/* from Shop.dc.html */

body{margin:0}
html{scroll-behavior:smooth}
.light{--ivory:#FBFBF3;--ink:#2E2C28;--stone:#D9D8D4;--muted:#6A665E;--muted2:#57534B;--card:#FFFFFF;--line:#D8D2C8;--line2:#EEE9E1;--side:#C9C3B8;--footer:#2E2C28;--footer-ink:#FBFBF3}
.dark{--ivory:#1E1D1A;--ink:#F2F0E8;--stone:#3B3934;--muted:#B8B3A8;--muted2:#CFCAC0;--card:#2A2824;--line:#45423C;--line2:#36332E;--side:#B8B3A8;--footer:#141311;--footer-ink:#F2F0E8;color-scheme:dark}
.dark img[src="/logo.svg"]{filter:invert(1)}
.canvas{transition:background-color .4s ease,color .4s ease}
@font-face{font-family:'Feltful';src:url(/fonts/feltful.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-book.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Quicksand Dash';src:url(/fonts/quicksand-dash.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Web Serveroff';src:url(/fonts/web-serveroff.ttf) format('truetype');font-display:swap}
.h1{font:400 clamp(60px,6.4vw,112px)/1.02 'Feltful',cursive;margin:0;color:var(--ink)}
.h2{font:400 clamp(44px,4vw,72px)/1.05 'Feltful',cursive;margin:0;color:var(--ink)}
.dash{font:400 1.35em 'Quicksand Dash','Quicksand',sans-serif;letter-spacing:.06em}
.label{font-family:'Web Serveroff','Quicksand',sans-serif;letter-spacing:.04em}
*{cursor:url(/cursor.svg) 16 16,auto}
a,button,input,select{cursor:url(/cursor.svg) 16 16,pointer}
a{color:var(--ink)}a:hover{color:var(--muted2)}
.canvas{background:var(--ivory)}
.wrap{max-width:1680px;margin:0 auto;padding-inline:clamp(20px,4vw,80px)}
.tape{height:26px;background:repeating-linear-gradient(90deg,transparent 0 11px,#2E2C28 11px 12px) 0 0/60px 7px repeat-x,linear-gradient(90deg,transparent 0 58px,#2E2C28 58px 60px) 0 0/60px 14px repeat-x,#FBE288;border-block:1px solid #2E2C28}
.filterbar{position:sticky;top:0;z-index:15;background:var(--ivory);box-shadow:0 8px 14px -14px rgba(46,44,40,.45)}
.card-actions{opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease}
.lift:hover .card-actions,.lift:focus-within .card-actions{opacity:1;transform:none}
@media (hover:none){.card-actions{opacity:1;transform:none}}

.tag{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 12px 3px 22px;background:#FBE7A0;color:#2E2C28;border:1.5px solid #2E2C28;font:400 1em 'Web Serveroff',sans-serif;white-space:nowrap;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%);border-left:0;transform-origin:0 50%}
.tag::before{content:"";position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ivory);box-shadow:0 0 0 1.5px #2E2C28}
.dark .tag{background:#5A5236;color:#F2F0E8;border-color:#F2F0E8}
.tag-wrap{position:relative;display:inline-flex;align-items:center;flex:none}
.tag-wrap::before{content:"";width:14px;height:1.5px;background:var(--ink);margin-right:-1px;transform:rotate(-12deg)}
.cart-back{position:fixed;inset:0;z-index:45;background:rgba(30,29,26,.45)}
.cart-panel{position:fixed;z-index:46;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--ivory);color:var(--ink);border-left:2px dashed var(--ink);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:no-preference){.cart-panel{animation:slidein .35s cubic-bezier(.2,.8,.2,1) both}@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}}
@media (prefers-reduced-motion:no-preference){.lift:hover .tag{animation:swing 1.3s ease-in-out}@keyframes swing{0%{transform:rotate(0)}20%{transform:rotate(9deg)}45%{transform:rotate(-6deg)}70%{transform:rotate(3deg)}100%{transform:rotate(0)}}}
.qv-btn{position:absolute;z-index:2;left:50%;bottom:16px;transform:translate(-50%,8px);opacity:0;transition:opacity .25s,transform .25s;min-height:40px;padding:0 18px;border-radius:999px;border:1.5px dashed var(--ink);background:var(--ivory);color:var(--ink);font:700 .9em 'Quicksand',sans-serif;white-space:nowrap}
.lift:hover .qv-btn,.qv-btn:focus-visible{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.qv-btn{opacity:1;transform:translate(-50%,0)}}
.soldout img,.soldout video{filter:grayscale(.65) opacity(.8)}
.qv-back{position:fixed;inset:0;z-index:40;background:rgba(30,29,26,.55);display:grid;place-items:center;padding:16px}
.qv-card{background:var(--ivory);color:var(--ink);border-radius:22px;max-width:880px;width:100%;max-height:calc(100vh - 32px);overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));box-shadow:0 30px 80px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:no-preference){
.h1,.h2{animation:write 1.8s cubic-bezier(.4,0,.2,1) both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.hoop{animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tape{animation:unroll 30s linear infinite}
@keyframes unroll{to{background-position:-600px 0,-600px 0,0 0}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(20px)}to{transform:none}}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lift:hover{transform:translateY(-6px) rotate(-.6deg)}
.desc-reveal{display:grid;grid-template-rows:0fr;margin-top:-12px;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease}
.desc-reveal>p{overflow:hidden;min-height:0;margin:0;padding-top:12px;color:var(--muted);font-size:.92em;line-height:1.45}
.lift:hover .desc-reveal,.lift:focus-within .desc-reveal{grid-template-rows:1fr;opacity:1}
@media (hover:none){.desc-reveal{grid-template-rows:1fr;opacity:1}}
a[style*="999px"],button{transition:transform .2s ease,box-shadow .2s ease}
a[style*="999px"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 5px 0 -1px var(--stone)}
.spin:hover{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
}

/* from Product.dc.html */

body{margin:0}
.light{--ivory:#FBFBF3;--ink:#2E2C28;--stone:#D9D8D4;--muted:#6A665E;--muted2:#57534B;--card:#FFFFFF;--line:#D8D2C8;--line2:#EEE9E1;--side:#C9C3B8;--footer:#2E2C28;--footer-ink:#FBFBF3}
.dark{--ivory:#1E1D1A;--ink:#F2F0E8;--stone:#3B3934;--muted:#B8B3A8;--muted2:#CFCAC0;--card:#2A2824;--line:#45423C;--line2:#36332E;--side:#B8B3A8;--footer:#141311;--footer-ink:#F2F0E8;color-scheme:dark}
.dark img[src="/logo.svg"]{filter:invert(1)}
.canvas{transition:background-color .4s ease,color .4s ease}
@font-face{font-family:'Feltful';src:url(/fonts/feltful.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-book.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Quicksand Dash';src:url(/fonts/quicksand-dash.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Web Serveroff';src:url(/fonts/web-serveroff.ttf) format('truetype');font-display:swap}
.h1{font:400 clamp(60px,6.4vw,112px)/1.02 'Feltful',cursive;margin:0;color:var(--ink)}
.h2{font:400 clamp(44px,4vw,72px)/1.05 'Feltful',cursive;margin:0;color:var(--ink)}
.dash{font:400 1.35em 'Quicksand Dash','Quicksand',sans-serif;letter-spacing:.06em}
.label{font-family:'Web Serveroff','Quicksand',sans-serif;letter-spacing:.04em}
*{cursor:url(/cursor.svg) 16 16,auto}
a,button,summary,input,select,textarea{cursor:url(/cursor.svg) 16 16,pointer}
.canvas{background:var(--ivory)}
a{color:var(--ink)}a:hover{color:var(--muted2)}
.paper{background:var(--stone)}
.tape{height:20px;background:repeating-linear-gradient(90deg,transparent 0 11px,#2E2C28 11px 12px) 0 0/60px 7px repeat-x,linear-gradient(90deg,transparent 0 58px,#2E2C28 58px 60px) 0 0/60px 12px repeat-x,#FBE288;border-block:1px solid #2E2C28}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
.zoom{position:relative;cursor:zoom-in}
.zoom img{transition:transform .25s ease;transform-origin:var(--zx,50%) var(--zy,50%)}
.zoom:hover img{transform:scale(2.1)}
@media (hover:none){.zoom:hover img{transform:none}}
.mbar{display:none}
@media (max-width:700px){.mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--ivory);border-top:1.5px dashed var(--ink);box-shadow:0 -8px 20px rgba(46,44,40,.12)}.canvas:has(.mbar){padding-bottom:76px}}
.cart-back{position:fixed;inset:0;z-index:45;background:rgba(30,29,26,.45)}
.cart-panel{position:fixed;z-index:46;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--ivory);color:var(--ink);border-left:2px dashed var(--ink);display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
@media (prefers-reduced-motion:no-preference){.cart-panel{animation:slidein .35s cubic-bezier(.2,.8,.2,1) both}@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}}
@media (prefers-reduced-motion:no-preference){
.h1,.h2{animation:write 1.8s cubic-bezier(.4,0,.2,1) both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.hoop{animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tape{animation:unroll 30s linear infinite}
@keyframes unroll{to{background-position:-600px 0,-600px 0,0 0}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(20px)}to{transform:none}}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lift:hover{transform:translateY(-6px) rotate(-.6deg)}
a[style*="999px"],button{transition:transform .2s ease,box-shadow .2s ease}
a[style*="999px"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 5px 0 -1px var(--stone)}
.spin:hover{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
}

/* from Checkout.dc.html */

body{margin:0}
.light{--ivory:#FBFBF3;--ink:#2E2C28;--stone:#D9D8D4;--muted:#6A665E;--muted2:#57534B;--card:#FFFFFF;--line:#D8D2C8;--line2:#EEE9E1;--side:#C9C3B8;--footer:#2E2C28;--footer-ink:#FBFBF3}
.dark{--ivory:#1E1D1A;--ink:#F2F0E8;--stone:#3B3934;--muted:#B8B3A8;--muted2:#CFCAC0;--card:#2A2824;--line:#45423C;--line2:#36332E;--side:#B8B3A8;--footer:#141311;--footer-ink:#F2F0E8;color-scheme:dark}
.dark img[src="/logo.svg"]{filter:invert(1)}
.canvas{transition:background-color .4s ease,color .4s ease}
@font-face{font-family:'Feltful';src:url(/fonts/feltful.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-book.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Quicksand Dash';src:url(/fonts/quicksand-dash.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Web Serveroff';src:url(/fonts/web-serveroff.ttf) format('truetype');font-display:swap}
.h1{font:400 clamp(60px,6.4vw,112px)/1.02 'Feltful',cursive;margin:0;color:var(--ink)}
.h2{font:400 clamp(44px,4vw,72px)/1.05 'Feltful',cursive;margin:0;color:var(--ink)}
.dash{font:400 1.35em 'Quicksand Dash','Quicksand',sans-serif;letter-spacing:.06em}
.label{font-family:'Web Serveroff','Quicksand',sans-serif;letter-spacing:.04em}
*{cursor:url(/cursor.svg) 16 16,auto}
a,button,summary,input,select,textarea{cursor:url(/cursor.svg) 16 16,pointer}
.canvas{background:var(--ivory)}
a{color:var(--ink)}a:hover{color:var(--muted2)}
.paper{background:var(--stone)}
.tape-meter{position:relative;height:26px;border:1px solid #2E2C28;border-radius:4px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent 0 11px,rgba(46,44,40,.55) 11px 12px) 0 0/24px 7px repeat-x,linear-gradient(90deg,transparent 0 22px,rgba(46,44,40,.8) 22px 24px) 0 0/24px 12px repeat-x,var(--line2)}
.tape-meter i{position:absolute;inset:0 auto 0 0;background:repeating-linear-gradient(90deg,transparent 0 11px,#2E2C28 11px 12px) 0 0/24px 7px repeat-x,linear-gradient(90deg,transparent 0 22px,#2E2C28 22px 24px) 0 0/24px 12px repeat-x,#FBE288;border-right:2px solid #2E2C28}
@media (prefers-reduced-motion:no-preference){.fill-in{animation:fillin 1.4s .3s cubic-bezier(.4,0,.2,1) both}@keyframes fillin{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}}
.ty-back{position:fixed;inset:0;z-index:40;background:rgba(30,29,26,.55);display:grid;place-items:center;padding:16px}
.ty{background:var(--ivory);color:var(--ink);border-radius:24px;max-width:520px;width:100%;padding:clamp(24px,4vw,44px);text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;outline:2px dashed var(--ink);outline-offset:-10px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ty .heart{stroke-dasharray:10 7}
@media (prefers-reduced-motion:no-preference){.ty .sew{animation:sewheart 2.2s .2s cubic-bezier(.4,0,.2,1) both}@keyframes sewheart{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.ty .needle{offset-path:path("M60 98 C10 62 4 22 34 14 C48 10 58 20 60 30 C62 20 72 10 86 14 C116 22 110 62 60 98");animation:needle 2.2s .2s cubic-bezier(.4,0,.2,1) both}@keyframes needle{from{offset-distance:0%}to{offset-distance:100%}}}
@media (prefers-reduced-motion:no-preference){
.h1,.h2{animation:write 1.8s cubic-bezier(.4,0,.2,1) both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.hoop{animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tape{animation:unroll 30s linear infinite}
@keyframes unroll{to{background-position:-600px 0,-600px 0,0 0}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(20px)}to{transform:none}}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lift:hover{transform:translateY(-6px) rotate(-.6deg)}
a[style*="999px"],button{transition:transform .2s ease,box-shadow .2s ease}
a[style*="999px"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 5px 0 -1px var(--stone)}
.spin:hover{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
}

/* from Track.dc.html */

body{margin:0}
.light{--ivory:#FBFBF3;--ink:#2E2C28;--stone:#D9D8D4;--muted:#6A665E;--muted2:#57534B;--card:#FFFFFF;--line:#D8D2C8;--line2:#EEE9E1;--side:#C9C3B8;--footer:#2E2C28;--footer-ink:#FBFBF3}
.dark{--ivory:#1E1D1A;--ink:#F2F0E8;--stone:#3B3934;--muted:#B8B3A8;--muted2:#CFCAC0;--card:#2A2824;--line:#45423C;--line2:#36332E;--side:#B8B3A8;--footer:#141311;--footer-ink:#F2F0E8;color-scheme:dark}
.dark img[src="/logo.svg"]{filter:invert(1)}
.canvas{transition:background-color .4s ease,color .4s ease}
@font-face{font-family:'Feltful';src:url(/fonts/feltful.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-book.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Quicksand';src:url(/fonts/quicksand-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Quicksand Dash';src:url(/fonts/quicksand-dash.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Web Serveroff';src:url(/fonts/web-serveroff.ttf) format('truetype');font-display:swap}
.h1{font:400 clamp(60px,6.4vw,112px)/1.02 'Feltful',cursive;margin:0;color:var(--ink)}
.h2{font:400 clamp(44px,4vw,72px)/1.05 'Feltful',cursive;margin:0;color:var(--ink)}
.dash{font:400 1.35em 'Quicksand Dash','Quicksand',sans-serif;letter-spacing:.06em}
.label{font-family:'Web Serveroff','Quicksand',sans-serif;letter-spacing:.04em}
*{cursor:url(/cursor.svg) 16 16,auto}
a,button,summary,input,select,textarea{cursor:url(/cursor.svg) 16 16,pointer}
.canvas{background:var(--ivory)}
a{color:var(--ink)}a:hover{color:var(--muted2)}
.paper{background:var(--stone)}
.tape{height:20px;background:repeating-linear-gradient(90deg,transparent 0 11px,#2E2C28 11px 12px) 0 0/60px 7px repeat-x,linear-gradient(90deg,transparent 0 58px,#2E2C28 58px 60px) 0 0/60px 12px repeat-x,#FBE288;border-block:1px solid #2E2C28}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
@media (prefers-reduced-motion:no-preference){
.h1,.h2{animation:write 1.8s cubic-bezier(.4,0,.2,1) both}
@keyframes write{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.hoop{animation:sway 7s ease-in-out infinite;transform-origin:50% 0}
@keyframes sway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tape{animation:unroll 30s linear infinite}
@keyframes unroll{to{background-position:-600px 0,-600px 0,0 0}}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(20px)}to{transform:none}}
.lift{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lift:hover{transform:translateY(-6px) rotate(-.6deg)}
a[style*="999px"],button{transition:transform .2s ease,box-shadow .2s ease}
a[style*="999px"]:hover,button:hover{transform:translateY(-2px);box-shadow:0 5px 0 -1px var(--stone)}
.spin:hover{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
}
.needle-move{position:absolute;z-index:2;top:16px;left:calc(-50% + 24px);width:38px;height:6px;border-radius:3px 1px 1px 3px;background:linear-gradient(90deg,#6F737A,#E3E5E9 45%,#8D9097);clip-path:polygon(0 0,86% 20%,100% 50%,86% 80%,0 100%);transform:rotate(-6deg)}
.needle-move::before{content:"";position:absolute;left:5px;top:2px;width:7px;height:2px;border-radius:1px;background:var(--card)}
@media (prefers-reduced-motion:no-preference){.needle-move{animation:stitchgo 1.6s ease-in-out infinite}@keyframes stitchgo{0%,100%{transform:translateX(0) rotate(-6deg)}50%{transform:translateX(18px) rotate(-6deg)}}}