:root{--tk-bg:#faf7f2;--tk-surface:#f3eee5;--tk-text:#1c1a17;--tk-muted:#6b645a;--tk-accent:#d4552b;--tk-border:#e7e0d3;--tk-font-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--tk-font-display:var(--tk-font-sans);--tk-radius:10px;--tk-shadow:0 2px 8px rgba(28,26,23,.08);--tk-space:8px;--tk-btn-radius:8px;--tk-btn-border:transparent;--tk-btn-shadow:0 2px 8px rgba(28,26,23,.08);--scroll-thumb:#1c1a17;--scroll-thumb-hover:#faf7f2;--section-gap:46px;--title-gap:16px;--panel-gap:18px;--motion-press:140ms;--motion-content:220ms;--ease-out:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--tk-bg)}html::-webkit-scrollbar{width:10px}html::-webkit-scrollbar-track{background:var(--tk-bg)}html::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--tk-bg);border-radius:999px}body{margin:0;overflow-x:hidden;background:var(--tk-bg);color:var(--tk-text);font:15px/1.55 var(--tk-font-sans);transition:background-color var(--motion-content) var(--ease-out),color var(--motion-content) var(--ease-out)}button,input{font:inherit}.shell{max-width:1180px;margin:auto;padding:32px 24px 80px}.eyebrow{color:var(--tk-accent);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.top{display:flex;justify-content:space-between;gap:24px;align-items:end;border-bottom:1px solid var(--tk-border);padding-bottom:26px}.top h1{font:700 clamp(28px,5vw,52px)/1 var(--tk-font-display);margin:8px 0}.top p,.export-help{margin:0;color:var(--tk-muted);max-width:510px}.status{font-size:13px;color:var(--tk-muted);white-space:nowrap}.section{margin-top:var(--section-gap)}.section-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:var(--title-gap)}.section-title h2{font:700 20px/1.2 var(--tk-font-display);margin:0}.filters{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:-4px 0 16px}.chips,.tags,.export-toolbar{display:flex;flex-wrap:wrap;gap:7px}.chip,.tag,.copy{border:1px solid var(--tk-border);background:var(--tk-bg);color:var(--tk-text);border-radius:99px;padding:4px 10px;font-size:12px}.chip{cursor:pointer}.chip[aria-pressed=true]{background:var(--tk-accent);border-color:var(--tk-accent);color:#fff}.search input{width:min(280px,100%);border:1px solid var(--tk-border);border-radius:8px;background:var(--tk-bg);color:var(--tk-text);padding:7px 10px}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.site-card{content-visibility:auto;contain-intrinsic-size:250px 185px;padding:0;min-width:0;border:1px solid var(--tk-border);border-radius:var(--tk-radius);background:var(--tk-bg);color:var(--tk-text);text-align:left;cursor:pointer;overflow:hidden;transition:transform var(--motion-press) var(--ease-out),border-color var(--motion-content) var(--ease-out)}.site-card[aria-pressed=true]{border-color:var(--tk-accent)}.site-card:active{transform:scale(.985)}.site-media{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--tk-surface)}.site-media img{width:100%;height:100%;display:block;object-fit:cover;object-position:top;transition:transform 220ms var(--ease-out)}.card-overlay{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:end;gap:4px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.36) 52%,transparent 76%);color:#fff;opacity:0;transform:translateY(6px);transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);pointer-events:none}.card-overlay strong{font-size:16px;line-height:1.2}.card-overlay span,.card-overlay small{font-size:12px;line-height:1.35}.card-overlay small{opacity:.78}.site-card:focus-visible{outline:2px solid var(--tk-accent);outline-offset:3px}.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--panel-gap);padding:clamp(22px,5vw,52px);background:var(--tk-surface);border:1px solid var(--tk-border);border-radius:calc(var(--tk-radius) * 1.6)}.detail h2{font:700 clamp(30px,5vw,54px)/1 var(--tk-font-display);margin:10px 0}.detail p{color:var(--tk-muted);margin:14px 0 0;max-width:650px}.facts{border-left:1px solid var(--tk-border);padding-left:22px;color:var(--tk-muted);font-size:13px}.facts a{color:var(--tk-accent)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.panel{border:1px solid var(--tk-border);border-radius:var(--tk-radius);padding:var(--panel-gap);background:var(--tk-bg)}.panel h3{font-size:13px;margin:0 0 13px}.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:10px}.swatch{border:0;padding:0;border-radius:calc(var(--tk-radius)*.8);background:transparent;color:var(--tk-text);text-align:left;cursor:pointer;overflow:hidden}.swatch-sample,.swatch-missing{min-height:112px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;border-radius:calc(var(--tk-radius)*.8)}.swatch-missing{background:var(--tk-surface);color:var(--tk-muted)}.sample-label,.sample-value{font-size:11px}.sample-surface{min-height:48px;padding:9px;border-radius:calc(var(--tk-radius)*.5)}.sample-lines i{display:block;height:5px;margin:5px 0;border-radius:99px;background:currentColor;opacity:.72}.sample-lines i:last-child{width:58%;opacity:.42}.type-row{padding:12px 0;border-bottom:1px solid var(--tk-border)}.type-row:last-child{border:0}.type-row small{display:block;color:var(--tk-muted);font-size:11px}.space-row{margin:11px 0;font-size:12px}.space-demo{display:flex;align-items:center;width:max-content;margin-top:6px}.space-block,.radius-box{width:20px;height:20px;flex:none;border-radius:4px;background:var(--tk-accent)}.radius-samples{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.radius-sample{display:grid;gap:6px;font-size:11px;color:var(--tk-muted)}.radius-box{width:58px;height:42px}.shadow-box{min-height:112px;padding:18px;background:color-mix(in srgb,var(--tk-surface) 72%,var(--tk-bg));display:grid;place-items:center;font-size:11px;color:var(--tk-muted)}.shadow-sample{width:100%;min-height:58px;padding:12px;border-radius:var(--tk-radius);background:var(--tk-bg);display:grid;place-items:center;text-align:center;overflow-wrap:anywhere}.code{overflow:hidden}.export-toolbar{align-items:center;justify-content:flex-end;margin-top:12px}.copy{border-radius:7px;cursor:pointer}.copy:disabled{cursor:wait;opacity:.58}.code-frame{margin-top:16px;border:1px solid var(--tk-border);border-radius:calc(var(--tk-radius)*.8);overflow:hidden;background:color-mix(in srgb,var(--tk-surface) 72%,var(--tk-bg))}.code pre{margin:0;padding:16px;max-height:420px;overflow:auto;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.empty{grid-column:1/-1;border:1px dashed var(--tk-border);padding:28px;border-radius:var(--tk-radius);color:var(--tk-muted)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--tk-text);color:var(--tk-bg);padding:8px 12px;border-radius:99px;font-size:13px;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.skeleton{min-height:185px;border-radius:var(--tk-radius);background:linear-gradient(100deg,var(--tk-surface),#fff9f0,var(--tk-surface));background-size:200% 100%;animation:pulse 1.4s ease-in-out infinite}.detail-skeleton{height:14px;margin:10px 0;border-radius:99px;background:var(--tk-border)}.detail-skeleton:nth-child(2){width:72%}.detail-skeleton:nth-child(3){width:45%}@keyframes pulse{to{background-position:-200% 0}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(hover:hover) and (pointer:fine){.site-card:hover{transform:translateY(-2px);border-color:var(--tk-accent)}.site-card:hover .card-overlay,.site-card:focus-visible .card-overlay{opacity:1;transform:translateY(0)}.site-card:hover .site-media img,.site-card:focus-visible .site-media img{transform:scale(1.02)}}@media(hover:none),(pointer:coarse){.card-overlay{opacity:1;transform:none}}@media(max-width:900px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}@media(max-width:760px){:root{--section-gap:36px;--title-gap:12px;--panel-gap:16px}.top,.detail{display:block}.status{margin-top:16px}.facts{border-left:0;border-top:1px solid var(--tk-border);padding:14px 0 0;margin-top:20px}.grid{grid-template-columns:1fr}.shell{padding:24px 16px 56px}.filters{align-items:stretch;flex-direction:column}.search input{width:100%}}@media(max-width:600px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-overlay{padding:10px;gap:3px}.card-overlay strong{font-size:13px}.card-overlay span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-overlay small{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:1ms!important}.site-card:active,.swatch:active,.copy:active{transform:none}.toast,.toast.show{transform:translate(-50%,0)}}

/* Token previews retain their own neutral cabinet edge; token colours only paint the role itself. */
.swatch{border:1px solid var(--tk-border);outline:1px solid rgba(0,0,0,.16);outline-offset:-2px;background:var(--tk-bg)}.swatch:focus-visible{outline:3px solid var(--tk-accent);outline-offset:3px}.sample-surface,.sample-card{min-height:48px;padding:9px;border-radius:calc(var(--tk-radius)*.5)}.sample-copy strong{font-size:16px;line-height:1.2}.sample-action{align-self:flex-start;padding:8px 10px;border-radius:6px;font-size:12px;font-weight:700}.sample-border{min-height:48px;padding:9px;border:2px solid;border-radius:calc(var(--tk-radius)*.5);display:grid;place-items:center;font-size:11px}
#font-stack{max-width:min(100%,460px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(forced-colors:active){.swatch{forced-color-adjust:none;border-color:CanvasText;outline-color:CanvasText}.swatch-sample,.sample-surface,.sample-card,.sample-action,.sample-border{forced-color-adjust:auto}.sample-border{border-color:CanvasText}.swatch:focus-visible{outline-color:Highlight}}