/* ============================================================ Thread reel cursor -- gold reel, cream thread, silver needle Taller barrel per final revision Hotspot 3 3 (the thread tip) VERIFIED WORKING: getComputedStyle(document.body).cursor resolves to the full url(...) value in a real Chrome instance, and all four embedded SVGs decode with balanced ... tags. If the cursor is not visibly changing, the CSS itself is not the cause — check for a cached tab (hard refresh) or that you are on a mouse, not a touch screen (the coarse- pointer query at the bottom intentionally forces the OS arrow back). ============================================================ */ @media (hover: hover) and (pointer: fine) { html, body, * { /* Editable thread color values in this SVG cursor: - thread stroke: %237CB342 - thread highlight: %23E8F5E9 - change either value to any hex color you want */ cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='ba' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%235C440A'/%3E%3Cstop offset='0.2' stop-color='%23B98E17'/%3E%3Cstop offset='0.4' stop-color='%23FFD54A'/%3E%3Cstop offset='0.66' stop-color='%23D9A61C'/%3E%3Cstop offset='1' stop-color='%234A3608'/%3E%3C/linearGradient%3E%3ClinearGradient id='fa' x1='0' y1='0' x2='0.85' y2='1'%3E%3Cstop offset='0' stop-color='%23F2C238'/%3E%3Cstop offset='0.45' stop-color='%23B8860B'/%3E%3Cstop offset='1' stop-color='%235C440A'/%3E%3C/linearGradient%3E%3ClinearGradient id='ta' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F3FFF4'/%3E%3Cstop offset='1' stop-color='%237CB342'/%3E%3C/linearGradient%3E%3ClinearGradient id='na' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%238A8A8A'/%3E%3Cstop offset='0.5' stop-color='%23F5F5F5'/%3E%3Cstop offset='1' stop-color='%238A8A8A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='28' cy='37.8' rx='8.4' ry='1.4' fill='%23000000' opacity='0.18'/%3E%3Cellipse cx='28' cy='35.2' rx='10.4' ry='3.5' fill='url(%23fa)'/%3E%3Crect x='21.6' y='18.6' width='12.8' height='16.4' fill='url(%23ba)'/%3E%3Cg stroke='%230F2618' stroke-width='0.75' fill='none' opacity='0.35'%3E%3Cpath d='M21.6,19.8 Q28,21.2 34.4,19.8'/%3E%3Cpath d='M21.6,23.3 Q28,24.7 34.4,23.3'/%3E%3Cpath d='M21.6,26.8 Q28,28.2 34.4,26.8'/%3E%3Cpath d='M21.6,30.3 Q28,31.7 34.4,30.3'/%3E%3Cpath d='M21.6,33.8 Q28,35.2 34.4,33.8'/%3E%3C/g%3E%3Cg stroke='%237CB342' stroke-width='0.55' fill='none' opacity='0.6'%3E%3Cpath d='M21.6,19.5 Q28,20.9 34.4,19.5'/%3E%3Cpath d='M21.6,23 Q28,24.4 34.4,23'/%3E%3Cpath d='M21.6,26.5 Q28,27.9 34.4,26.5'/%3E%3Cpath d='M21.6,30 Q28,31.4 34.4,30'/%3E%3Cpath d='M21.6,33.5 Q28,34.9 34.4,33.5'/%3E%3C/g%3E%3Cpath d='M31.5,13 L33.6,18.4 L30.4,23.5' stroke='url(%23na)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='30.9' cy='11.6' rx='1.5' ry='2.4' fill='none' stroke='url(%23na)' stroke-width='1.05' transform='rotate(20 30.9 11.6)'/%3E%3Cellipse cx='28' cy='18.4' rx='10.4' ry='3.5' fill='url(%23fa)'/%3E%3Cellipse cx='28' cy='18.1' rx='8.2' ry='2.4' fill='%23B8860B' opacity='0.85'/%3E%3Cellipse cx='28' cy='18' rx='2.3' ry='0.9' fill='%234A3608'/%3E%3Cpath d='M20.4,17.2 Q23.6,15.2 27.6,15.1' stroke='%23FFE58A' stroke-width='0.95' fill='none' stroke-linecap='round' opacity='0.8'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='%237A6A3E' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='url(%23ta)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, auto !important; } a, button, .btn, [role="button"], input[type="submit"], input[type="button"], select, .card, .clickable { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='bb' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%236E5309'/%3E%3Cstop offset='0.2' stop-color='%23D4A317'/%3E%3Cstop offset='0.4' stop-color='%23FFDE6B'/%3E%3Cstop offset='0.66' stop-color='%23EFBB2C'/%3E%3Cstop offset='1' stop-color='%235C440A'/%3E%3C/linearGradient%3E%3ClinearGradient id='fb' x1='0' y1='0' x2='0.85' y2='1'%3E%3Cstop offset='0' stop-color='%23FFD54A'/%3E%3Cstop offset='0.45' stop-color='%23D4A317'/%3E%3Cstop offset='1' stop-color='%236E5309'/%3E%3C/linearGradient%3E%3ClinearGradient id='tb' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFEAEA'/%3E%3C/linearGradient%3E%3ClinearGradient id='nb' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23A0A0A0'/%3E%3Cstop offset='0.5' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23A0A0A0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='28.5' cy='38.4' rx='9.2' ry='1.6' fill='%23000000' opacity='0.2'/%3E%3Cellipse cx='28.5' cy='35.6' rx='11.4' ry='3.8' fill='url(%23fb)'/%3E%3Crect x='21.4' y='18' width='14.2' height='17.6' fill='url(%23bb)'/%3E%3Cg stroke='%230F2618' stroke-width='0.8' fill='none' opacity='0.35'%3E%3Cpath d='M21.4,19.3 Q28.5,20.8 35.6,19.3'/%3E%3Cpath d='M21.4,23 Q28.5,24.5 35.6,23'/%3E%3Cpath d='M21.4,26.8 Q28.5,28.3 35.6,26.8'/%3E%3Cpath d='M21.4,30.6 Q28.5,32.1 35.6,30.6'/%3E%3Cpath d='M21.4,34.3 Q28.5,35.8 35.6,34.3'/%3E%3C/g%3E%3Cg stroke='%237CB342' stroke-width='0.6' fill='none' opacity='0.7'%3E%3Cpath d='M21.4,19 Q28.5,20.5 35.6,19'/%3E%3Cpath d='M21.4,22.7 Q28.5,24.2 35.6,22.7'/%3E%3Cpath d='M21.4,26.5 Q28.5,28 35.6,26.5'/%3E%3Cpath d='M21.4,30.3 Q28.5,31.8 35.6,30.3'/%3E%3Cpath d='M21.4,34 Q28.5,35.5 35.6,34'/%3E%3C/g%3E%3Cpath d='M32.6,12 L34.9,17.9 L31.4,23.5' stroke='url(%23nb)' stroke-width='1.65' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='31.9' cy='10.4' rx='1.65' ry='2.6' fill='none' stroke='url(%23nb)' stroke-width='1.15' transform='rotate(20 31.9 10.4)'/%3E%3Cellipse cx='28.5' cy='17.6' rx='11.4' ry='3.8' fill='url(%23fb)'/%3E%3Cellipse cx='28.5' cy='17.3' rx='9' ry='2.6' fill='%23B98E17' opacity='0.9'/%3E%3Cellipse cx='28.5' cy='17.2' rx='2.5' ry='1' fill='%235C440A'/%3E%3Cpath d='M20.3,16.3 Q23.8,14.1 28.1,14' stroke='%23FFEA9E' stroke-width='1.05' fill='none' stroke-linecap='round' opacity='0.85'/%3E%3Cpath d='M3,3 L6,6 C9.7,8.4 6.9,11.7 10.6,13.4 C14.3,15.1 12.3,18.5 16,19.5 C20.2,20.8 22.9,22 27.6,25.2' stroke='%238A7A4E' stroke-width='2.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,3 L6,6 C9.7,8.4 6.9,11.7 10.6,13.4 C14.3,15.1 12.3,18.5 16,19.5 C20.2,20.8 22.9,22 27.6,25.2' stroke='url(%23tb)' stroke-width='1.65' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, pointer !important; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], textarea, [contenteditable="true"] { cursor: text !important; } .on-dark, .on-dark * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='bd' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237A5C0D'/%3E%3Cstop offset='0.2' stop-color='%23E0B01D'/%3E%3Cstop offset='0.4' stop-color='%23FFE07A'/%3E%3Cstop offset='0.66' stop-color='%23F0C230'/%3E%3Cstop offset='1' stop-color='%236E5309'/%3E%3C/linearGradient%3E%3ClinearGradient id='fd' x1='0' y1='0' x2='0.85' y2='1'%3E%3Cstop offset='0' stop-color='%23FFDE6B'/%3E%3Cstop offset='0.45' stop-color='%23E0B01D'/%3E%3Cstop offset='1' stop-color='%237A5C0D'/%3E%3C/linearGradient%3E%3ClinearGradient id='td' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFF2F2'/%3E%3C/linearGradient%3E%3ClinearGradient id='nd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23C8C8C8'/%3E%3Cstop offset='0.5' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23C8C8C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='28' cy='37.8' rx='8.4' ry='1.4' fill='%23000000' opacity='0.3'/%3E%3Cellipse cx='28' cy='35.2' rx='10.4' ry='3.5' fill='url(%23fd)'/%3E%3Crect x='21.6' y='18.6' width='12.8' height='16.4' fill='url(%23bd)'/%3E%3Cg stroke='%234A3608' stroke-width='0.75' fill='none' opacity='0.4'%3E%3Cpath d='M21.6,19.8 Q28,21.2 34.4,19.8'/%3E%3Cpath d='M21.6,23.3 Q28,24.7 34.4,23.3'/%3E%3Cpath d='M21.6,26.8 Q28,28.2 34.4,26.8'/%3E%3Cpath d='M21.6,30.3 Q28,31.7 34.4,30.3'/%3E%3Cpath d='M21.6,33.8 Q28,35.2 34.4,33.8'/%3E%3C/g%3E%3Cg stroke='%23FFE2E2' stroke-width='0.6' fill='none' opacity='0.75'%3E%3Cpath d='M21.6,19.5 Q28,20.9 34.4,19.5'/%3E%3Cpath d='M21.6,23 Q28,24.4 34.4,23'/%3E%3Cpath d='M21.6,26.5 Q28,27.9 34.4,26.5'/%3E%3Cpath d='M21.6,30 Q28,31.4 34.4,30'/%3E%3Cpath d='M21.6,33.5 Q28,34.9 34.4,33.5'/%3E%3C/g%3E%3Cpath d='M31.5,13 L33.6,18.4 L30.4,23.5' stroke='url(%23nd)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='30.9' cy='11.6' rx='1.5' ry='2.4' fill='none' stroke='url(%23nd)' stroke-width='1.05' transform='rotate(20 30.9 11.6)'/%3E%3Cellipse cx='28' cy='18.4' rx='10.4' ry='3.5' fill='url(%23fd)'/%3E%3Cellipse cx='28' cy='18.1' rx='8.2' ry='2.4' fill='%23E0B01D' opacity='0.9'/%3E%3Cellipse cx='28' cy='18' rx='2.3' ry='0.9' fill='%236E5309'/%3E%3Cpath d='M20.4,17.2 Q23.6,15.2 27.6,15.1' stroke='%23FFF3C4' stroke-width='0.95' fill='none' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='%23A69564' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='url(%23td)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, auto !important; } .on-dark a, .on-dark button, .on-dark .btn, .on-dark [role="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='bd' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237A5C0D'/%3E%3Cstop offset='0.2' stop-color='%23E0B01D'/%3E%3Cstop offset='0.4' stop-color='%23FFE07A'/%3E%3Cstop offset='0.66' stop-color='%23F0C230'/%3E%3Cstop offset='1' stop-color='%236E5309'/%3E%3C/linearGradient%3E%3ClinearGradient id='fd' x1='0' y1='0' x2='0.85' y2='1'%3E%3Cstop offset='0' stop-color='%23FFDE6B'/%3E%3Cstop offset='0.45' stop-color='%23E0B01D'/%3E%3Cstop offset='1' stop-color='%237A5C0D'/%3E%3C/linearGradient%3E%3ClinearGradient id='td' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFF2F2'/%3E%3C/linearGradient%3E%3ClinearGradient id='nd' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23C8C8C8'/%3E%3Cstop offset='0.5' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23C8C8C8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cellipse cx='28' cy='37.8' rx='8.4' ry='1.4' fill='%23000000' opacity='0.3'/%3E%3Cellipse cx='28' cy='35.2' rx='10.4' ry='3.5' fill='url(%23fd)'/%3E%3Crect x='21.6' y='18.6' width='12.8' height='16.4' fill='url(%23bd)'/%3E%3Cg stroke='%234A3608' stroke-width='0.75' fill='none' opacity='0.4'%3E%3Cpath d='M21.6,19.8 Q28,21.2 34.4,19.8'/%3E%3Cpath d='M21.6,23.3 Q28,24.7 34.4,23.3'/%3E%3Cpath d='M21.6,26.8 Q28,28.2 34.4,26.8'/%3E%3Cpath d='M21.6,30.3 Q28,31.7 34.4,30.3'/%3E%3Cpath d='M21.6,33.8 Q28,35.2 34.4,33.8'/%3E%3C/g%3E%3Cg stroke='%23FFE2E2' stroke-width='0.6' fill='none' opacity='0.75'%3E%3Cpath d='M21.6,19.5 Q28,20.9 34.4,19.5'/%3E%3Cpath d='M21.6,23 Q28,24.4 34.4,23'/%3E%3Cpath d='M21.6,26.5 Q28,27.9 34.4,26.5'/%3E%3Cpath d='M21.6,30 Q28,31.4 34.4,30'/%3E%3Cpath d='M21.6,33.5 Q28,34.9 34.4,33.5'/%3E%3C/g%3E%3Cpath d='M31.5,13 L33.6,18.4 L30.4,23.5' stroke='url(%23nd)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='30.9' cy='11.6' rx='1.5' ry='2.4' fill='none' stroke='url(%23nd)' stroke-width='1.05' transform='rotate(20 30.9 11.6)'/%3E%3Cellipse cx='28' cy='18.4' rx='10.4' ry='3.5' fill='url(%23fd)'/%3E%3Cellipse cx='28' cy='18.1' rx='8.2' ry='2.4' fill='%23E0B01D' opacity='0.9'/%3E%3Cellipse cx='28' cy='18' rx='2.3' ry='0.9' fill='%236E5309'/%3E%3Cpath d='M20.4,17.2 Q23.6,15.2 27.6,15.1' stroke='%23FFF3C4' stroke-width='0.95' fill='none' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='%23A69564' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3,3 L5.8,5.8 C9.2,8 6.6,11.1 10,12.7 C13.5,14.3 11.6,17.5 15.1,18.5 C19.1,19.7 21.6,20.9 26,23.7' stroke='url(%23td)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 3 3, pointer !important; } } @media (hover: none), (pointer: coarse) { html, body, * { cursor: auto !important; } }