@font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-latin.woff2) format("woff2");font-weight:500 700;font-stretch:75% 125%;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans;src:url(/assets/fonts/plex-sans-latin.woff2) format("woff2");font-weight:400 700;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;src:url(/assets/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;src:url(/assets/fonts/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:optional;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Plex Sans fallback;src:local("Arial"),local("Roboto"),local("Helvetica Neue"),local("Liberation Sans");size-adjust:98.4%;ascent-override:100%;descent-override:27.5%;line-gap-override:0%}@font-face{font-family:Fraunces fallback;src:local("Georgia"),local("Times New Roman"),local("Times"),local("Liberation Serif");size-adjust:92%;ascent-override:90%;descent-override:22%;line-gap-override:0%}@font-face{font-family:Plex Mono fallback;src:local("Menlo"),local("Consolas"),local("DejaVu Sans Mono"),local("Courier New");size-adjust:109.1%;ascent-override:93%;descent-override:25%;line-gap-override:0%}:root{--paper: #faf9f6;--paper-raised: #ffffff;--paper-sunken: #f2efe8;--ink: #171613;--ink-soft: #625c4f;--ink-faint: #948d7c;--rule: #e6e1d4;--rule-strong: #d2cab5;--accent: #ff5a36;--accent-ink: #b8340f;--accent-soft: #ffe7de;--accent-strong:#e0431f;--info: #1c6e8c;--info-ink: #0f4457;--info-soft: #e4eff2;--good: #2f7d4f;--good-soft: #e3f3e8;--bad: #c23b3b;--bad-soft: #fbe6e6;--shadow-sm: 0 1px 2px rgba(23,22,19,.06);--shadow-md: 0 6px 20px -8px rgba(23,22,19,.18);--shadow-lg: 0 16px 40px -16px rgba(23,22,19,.28);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--font-display: "Fraunces", "Fraunces fallback", Georgia, "Times New Roman", serif;--font-body: "IBM Plex Sans", "Plex Sans fallback", -apple-system, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", "Plex Mono fallback", ui-monospace, SFMono-Regular, Menlo, monospace;--container: 1180px}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--paper: #14130f;--paper-raised: #1c1a15;--paper-sunken: #100f0c;--ink: #f2ede1;--ink-soft: #b7ae99;--ink-faint: #7d7566;--rule: #322d24;--rule-strong: #45402f;--accent: #ff7b5c;--accent-ink: #ffb49c;--accent-soft: #3a2019;--accent-strong:#ff9376;--info: #6dc2e0;--info-ink: #bfe6f5;--info-soft: #17303a;--good: #6fce93;--good-soft: #163625;--bad: #e88484;--bad-soft: #3a1d1d;--shadow-sm: 0 1px 2px rgba(0,0,0,.35);--shadow-md: 0 6px 20px -8px rgba(0,0,0,.5);--shadow-lg: 0 16px 40px -16px rgba(0,0,0,.6)}}:root[data-theme=dark]{--paper: #14130f;--paper-raised: #1c1a15;--paper-sunken: #100f0c;--ink: #f2ede1;--ink-soft: #b7ae99;--ink-faint: #7d7566;--rule: #322d24;--rule-strong: #45402f;--accent: #ff7b5c;--accent-ink: #ffb49c;--accent-soft: #3a2019;--accent-strong:#ff9376;--info: #6dc2e0;--info-ink: #bfe6f5;--info-soft: #17303a;--good: #6fce93;--good-soft: #163625;--bad: #e88484;--bad-soft: #3a1d1d;--shadow-sm: 0 1px 2px rgba(0,0,0,.35);--shadow-md: 0 6px 20px -8px rgba(0,0,0,.5);--shadow-lg: 0 16px 40px -16px rgba(0,0,0,.6)}*,*:before,*:after{box-sizing:border-box}html{color-scheme:light dark}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:var(--ink);text-wrap:balance;margin:0 0 .5em}code,.mono{font-family:var(--font-mono)}:not(pre)>code{overflow-wrap:anywhere}p,li,dd,figcaption,.dek{overflow-wrap:break-word}a{color:var(--info-ink)}img{max-width:100%}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}[hidden]{display:none!important}#copy-toast{position:fixed;z-index:200;transform:translate(-50%,-150%);background:var(--ink);color:var(--paper);font-size:.76rem;font-weight:600;letter-spacing:.01em;padding:.25rem .6rem;border-radius:6px;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;transition:opacity .12s ease,transform .18s ease}#copy-toast.show{opacity:1;transform:translate(-50%,-180%)}.container{max-width:var(--container);margin:0 auto;padding:0 1.75rem}.site-header{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:40}.site-header .bar{display:flex;align-items:center;gap:1.75rem;height:64px}.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:600;font-size:1.1rem;color:var(--ink);text-decoration:none;white-space:nowrap}.brand .mark{width:22px;height:22px;border-radius:7px;flex:none;background:conic-gradient(from 210deg,#ff5a36,#ffb236,#8fbf5c,#1c6e8c,#7d5fc7,#ff5a36);box-shadow:inset 0 0 0 1px #00000014}.brand-logo{display:block;width:auto;height:30px}@media(max-width:900px){.brand-logo{height:25px}}@media(max-width:430px){.brand-logo{height:22px}.header-search{padding:.35rem .7rem}}.site-footer .brand-logo{height:34px}.main-nav{display:flex;align-items:center;gap:.1rem;flex:1}.main-nav a,.nav-trigger{color:var(--ink-soft);text-decoration:none;font:inherit;font-size:.92rem;font-weight:500;padding:.5rem .7rem;border-radius:var(--radius-sm);white-space:nowrap;background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.32rem}.main-nav a:hover,.nav-trigger:hover{background:var(--paper-sunken);color:var(--ink)}.main-nav a.active,.nav-trigger.active{color:var(--accent-ink);background:var(--accent-soft)}.nav-chev{opacity:.65;transition:transform .16s ease}.nav-item{position:relative}.nav-menu{position:absolute;top:calc(100% + 7px);left:0;z-index:60;width:340px;padding:.4rem;background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .15s ease,transform .15s ease,visibility .15s}.nav-has-menu:hover .nav-menu,.nav-has-menu:focus-within .nav-menu,.nav-item.open .nav-menu{opacity:1;visibility:visible;transform:none}.nav-has-menu:hover .nav-chev,.nav-item.open .nav-chev{transform:rotate(180deg)}.nav-menu a{display:block;padding:.5rem .7rem;border-radius:var(--radius-sm);white-space:normal}.nav-menu a:hover{background:var(--paper-sunken)}.nav-menu a span{display:block;font-weight:600;color:var(--ink);font-size:.9rem}.nav-menu a small{display:block;color:var(--ink-faint);font-size:.78rem;line-height:1.4;margin-top:.05rem}.nav-menu a.active{background:var(--accent-soft)}.nav-menu a.active span{color:var(--accent-ink)}.nav-toggle{display:none;flex:none;width:40px;height:40px;padding:0;order:5;align-items:center;justify-content:center;cursor:pointer;background:var(--paper-sunken);border:1px solid var(--rule);border-radius:var(--radius-sm);color:var(--ink)}.nav-toggle svg{width:20px;height:20px}.header-search{display:flex;align-items:center;gap:.4rem;order:4;background:var(--paper-sunken);border:1px solid var(--rule);border-radius:999px;padding:.4rem .9rem;min-width:200px}.header-search input{border:none;background:transparent;outline:none;font:inherit;color:var(--ink);width:100%;font-size:.88rem}.header-search svg{flex:none;color:var(--ink-faint)}@media(max-width:900px){.site-header .bar{gap:.75rem}.nav-toggle{display:inline-flex}.header-search{flex:1;min-width:0;order:3}.main-nav{position:absolute;top:100%;left:0;right:0;z-index:55;flex-direction:column;align-items:stretch;gap:.05rem;background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:var(--shadow-md);padding:.6rem 1.75rem 1rem;max-height:calc(100dvh - 64px);overflow-y:auto;display:none}.site-header.nav-open .main-nav{display:flex}.main-nav a,.nav-trigger{width:100%;justify-content:space-between;padding:.7rem .6rem;font-size:.98rem}.nav-item{position:static}.nav-menu{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;border-left:2px solid var(--rule-strong);border-radius:0;margin:.1rem 0 .5rem .55rem;padding:.15rem 0 .15rem .5rem;display:none}.nav-item.open .nav-menu{display:grid}}.site-footer{border-top:1px solid var(--rule);margin-top:5rem;padding:2.75rem 0 3rem;color:var(--ink-soft);font-size:.88rem}.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}.site-footer h2{font-family:var(--font-body);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin:0 0 .7rem}.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}.site-footer a{color:var(--ink-soft);text-decoration:none}.site-footer a:hover{color:var(--accent-ink)}.site-footer .fine{margin-top:2.25rem;padding-top:1.5rem;border-top:1px solid var(--rule);color:var(--ink-faint);font-size:.8rem}@media(max-width:760px){.site-footer .cols{grid-template-columns:1fr 1fr}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;border-radius:var(--radius-sm);border:1px solid transparent;padding:.6rem 1.05rem;text-decoration:none;transition:transform .08s ease}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-strong)}.btn-ghost{background:var(--paper-raised);color:var(--ink);border-color:var(--rule-strong)}.btn-ghost:hover{border-color:var(--ink-faint)}.btn-sm{padding:.4rem .7rem;font-size:.8rem}.card{background:var(--paper-raised);border:1px solid var(--rule);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.card-pad{padding:1.4rem 1.5rem}.hover-card{transition:box-shadow .15s ease,transform .15s ease}.hover-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.swatch{border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.08)}.swatch-sm{width:16px;height:16px;border-radius:4px}.hexchip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.9rem}.tool-shell{display:grid;grid-template-columns:1.1fr 1fr;gap:2.25rem;margin-top:2rem}.tool-shell>*{min-width:0}@media(max-width:880px){.tool-shell{grid-template-columns:1fr}}.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--rule);margin:2.25rem 0 1.25rem;overflow-x:auto}.tab{font:inherit;font-weight:600;font-size:.88rem;color:var(--ink-soft);background:none;border:none;border-bottom:2px solid transparent;padding:.65rem .9rem;cursor:pointer;white-space:nowrap}.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}.tab-panel{display:none}.tab-panel.active{display:block}label.field-label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.04em}input[type=text],input[type=number],input[type=search]{font:inherit;font-family:var(--font-mono);font-size:.95rem;color:var(--ink);background:var(--paper-raised);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.55rem .7rem;width:100%;min-width:0}input[type=color]{width:100%;height:44px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:2px;background:var(--paper-raised);cursor:pointer}input[type=range]{width:100%}.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--paper-raised)}table{border-collapse:collapse;width:100%;font-size:.92rem}th,td{text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--rule);vertical-align:middle}th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:600;background:var(--paper-sunken)}tr:last-child td{border-bottom:none}td.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.copy-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--paper-sunken);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.6rem .8rem;font-family:var(--font-mono);font-size:.92rem}.copy-row button{font:inherit;font-family:var(--font-body);font-size:.76rem;font-weight:600;background:var(--paper-raised);border:1px solid var(--rule-strong);border-radius:6px;padding:.3rem .55rem;cursor:pointer;color:var(--ink-soft);flex:none}.copy-row button:hover{color:var(--ink);border-color:var(--ink-faint)}.copy-row button.copied{color:var(--good);border-color:var(--good)}.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.8rem;color:var(--ink-faint);padding-top:1.5rem;margin-bottom:-.75rem}.breadcrumb a{color:var(--ink-soft);text-decoration:none}.breadcrumb a:hover{color:var(--ink);text-decoration:underline}.breadcrumb .sep{color:var(--ink-faint)}.breadcrumb [aria-current]{color:var(--ink-soft)}.kicker{text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;color:var(--accent-ink);font-weight:700;margin-bottom:.6rem}.page-head{padding:2.75rem 0 0}.page-head p.dek{color:var(--ink-soft);font-size:1.05rem;max-width:62ch;margin-top:.6rem}.pill{display:inline-block;background:var(--paper-sunken);color:var(--ink-soft);border-radius:999px;padding:.15rem .65rem;font-size:.72rem;font-weight:600}.faq{display:grid;gap:.75rem;margin-top:1.5rem;max-width:70ch}.faq details{border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--paper-raised);padding:.9rem 1.1rem}.faq details[open]{border-color:var(--rule-strong)}.faq summary{font-family:var(--font-display);font-weight:600;font-size:1rem;cursor:pointer;list-style:none;color:var(--ink)}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;color:var(--ink-faint);font-weight:400}.faq details[open] summary:after{content:"\2013"}.faq details p{margin:.7rem 0 0;color:var(--ink-soft);font-size:.95rem}main{min-height:60vh}section{margin-top:3rem}.picker-head{display:flex;align-items:center;gap:1.1rem;margin-top:1.5rem;flex-wrap:wrap}.picker-head .big-swatch{width:64px;height:64px;border-radius:var(--radius-md);border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-sm);flex:none}.picker-head .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;flex:1;min-width:0}.picker-head .fields>div{min-width:0}.picker-head .fields input{min-width:0}.picker-head .fields label{font-size:.7rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.2rem}@media(max-width:560px){.picker-head .fields{grid-template-columns:1fr;width:100%;flex-basis:100%}}.sv-wrap{position:relative;width:100%;aspect-ratio:16/11;border-radius:var(--radius-md);overflow:hidden;cursor:crosshair;touch-action:none;border:1px solid var(--rule)}.sv-wrap canvas{width:100%;height:100%;display:block}.sv-cursor{position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000059,var(--shadow-sm);pointer-events:none}.hue-slider{position:relative;height:16px;border-radius:999px;margin-top:1rem;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:pointer;touch-action:none}.hue-handle{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.2);box-shadow:var(--shadow-sm);pointer-events:none}.picker-actions{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}.harmony-block{margin-bottom:1.35rem}.harmony-title{font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:.5rem}.harmony-row{display:flex;gap:.4rem}.harmony-swatch{flex:1;height:52px;border-radius:8px;border:1px solid rgba(0,0,0,.08);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.3rem;font:inherit;position:relative}.harmony-swatch span{font-family:var(--font-mono);font-size:.62rem;background:#00000059;color:#fff;padding:.05rem .3rem;border-radius:4px;opacity:0;transition:opacity .12s ease}.harmony-swatch:hover span{opacity:1}.conv-table td:first-child{color:var(--ink-soft);width:9rem}.conv-table td.mono{font-size:.95rem}.conv-table button{font:inherit;font-size:.74rem;font-weight:600;color:var(--ink-soft);background:var(--paper-sunken);border:1px solid var(--rule-strong);border-radius:6px;padding:.25rem .5rem;cursor:pointer}.contrast-preview{border-radius:var(--radius-md);padding:2.2rem 1.5rem;text-align:center;font-size:1.4rem;font-weight:600;border:1px solid var(--rule)}.wcag-badges{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}.wcag-badge{padding:.4rem .8rem;border-radius:8px;font-size:.8rem;font-weight:600}.wcag-pass{background:var(--good-soft);color:var(--good)}.wcag-fail{background:var(--bad-soft);color:var(--bad)}.gradient-preview{height:180px;border-radius:var(--radius-md);border:1px solid var(--rule);margin-top:1rem}.stop-row{display:flex;align-items:center;gap:.6rem;margin-top:.6rem}.stop-row input[type=color]{width:44px;height:36px;padding:2px}.stop-row input[type=range]{flex:1}.mp{width:280px;max-width:100%}.mp-sv{position:relative;width:100%;height:170px;border-radius:var(--radius-sm);overflow:hidden;cursor:crosshair;touch-action:none;border:1px solid var(--rule)}.mp-sv canvas{width:100%;height:100%;display:block}.mp-cursor{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0006;pointer-events:none}.mp-hue{position:relative;height:14px;border-radius:999px;margin-top:.6rem;cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.mp-handle{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:2px solid rgba(0,0,0,.25);box-shadow:var(--shadow-sm);pointer-events:none}.mp-row{display:flex;gap:.4rem;margin-top:.7rem;align-items:flex-end}.mp-row label{flex:1;font-size:.64rem;font-weight:600;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;display:flex;flex-direction:column;gap:.2rem}.mp-row input{width:100%;font-family:var(--font-mono);font-size:.85rem;padding:.35rem .4rem;border:1px solid var(--rule-strong);border-radius:6px;background:var(--paper-raised);color:var(--ink);text-align:center}.mp-eye{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-strong);border-radius:6px;background:var(--paper-raised);color:var(--ink-soft);cursor:pointer}.mp-eye:hover{color:var(--ink);border-color:var(--ink-faint)}.dropzone{border:2px dashed var(--rule-strong);border-radius:var(--radius-lg);background:var(--paper-raised);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.dropzone:hover,.dropzone.is-drag{border-color:var(--accent);background:var(--accent-soft)}.dropzone .dz-title{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);margin:.6rem 0 .2rem}.dropzone p{color:var(--ink-soft);font-size:.88rem;margin:0}.dropzone .dz-icon{font-size:1.6rem}.dropzone .dz-url{display:flex;gap:.5rem;max-width:26rem;margin:1rem auto 0}.dropzone .dz-url input{flex:1}.img-stage{position:relative;border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-sunken);display:flex;align-items:center;justify-content:center}.img-stage canvas{display:block;max-width:100%;height:auto;cursor:crosshair}.loupe{position:absolute;width:112px;height:112px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #00000059,var(--shadow-lg);pointer-events:none;image-rendering:pixelated;overflow:hidden;display:none;z-index:5}.loupe:after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px #00000080}html.sc-locked{overflow:hidden}.sc-preview{position:relative;width:100%;max-height:62vh;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--rule);cursor:zoom-in;background-image:linear-gradient(45deg,var(--paper-sunken) 25%,transparent 25%,transparent 75%,var(--paper-sunken) 75%),linear-gradient(45deg,var(--paper-sunken) 25%,transparent 25%,transparent 75%,var(--paper-sunken) 75%);background-size:22px 22px;background-position:0 0,11px 11px}.sc-preview .sc-fill{position:absolute;inset:0}.sc-preview .sc-open-hint{position:absolute;left:50%;bottom:.9rem;transform:translate(-50%);z-index:2;background:#0000008c;color:#fff;font-size:.76rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;pointer-events:none}.sc-caption{margin-top:.6rem;font-family:var(--font-mono);font-size:.85rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}.sc-field{margin-top:1.35rem}.sc-field>.sc-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:.5rem}.sc-color-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.sc-color-row input[type=color]{width:54px;height:42px;flex:none;padding:3px}.sc-color-row input[type=text]{width:8.5rem;flex:none;text-transform:uppercase}.sc-swatches{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}.sc-swatch{width:30px;height:30px;border-radius:7px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0;font:inherit}.sc-seg{display:flex;flex-wrap:wrap;gap:.4rem}.sc-seg button{font:inherit;font-weight:600;font-size:.82rem;color:var(--ink-soft);background:var(--paper-raised);border:1px solid var(--rule-strong);border-radius:var(--radius-sm);padding:.45rem .75rem;cursor:pointer;white-space:nowrap}.sc-seg button:hover{border-color:var(--ink-faint);color:var(--ink)}.sc-seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent)}.sc-size{display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}.sc-size label{display:flex;flex-direction:column;gap:.2rem;flex:none;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}.sc-size input{width:6.5rem;text-align:center}.sc-size .sc-swap{flex:none;height:38px;width:38px;border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--paper-raised);color:var(--ink-soft);cursor:pointer;font-size:1rem}.sc-size .sc-x{align-self:center;color:var(--ink-faint);padding:0 .1rem .5rem}.sc-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}.sc-adv{margin-top:1.1rem}.sc-adv summary{font-size:.82rem;color:var(--ink-soft);cursor:pointer;font-weight:600}.sc-adv .sc-size{margin-top:.8rem}.sc-stage{position:fixed;inset:0;z-index:9998;display:none;background:#fff;cursor:pointer}.sc-stage.on{display:block}.sc-stage .sc-hint{position:fixed;left:50%;bottom:6%;transform:translate(-50%);background:#0009;color:#fff;font-size:.85rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;transition:opacity .5s ease;pointer-events:none}.sc-stage.idle .sc-hint{opacity:0}.share-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.share-row a,.share-row button{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--rule-strong);background:var(--paper-raised);color:var(--ink-soft);text-decoration:none;cursor:pointer}.share-row a:hover,.share-row button:hover{color:var(--ink);border-color:var(--ink-faint)}.screen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:.7rem;margin-top:1.25rem}.screen-card{display:block;border-radius:var(--radius-md);border:1px solid var(--rule);overflow:hidden;text-decoration:none;color:inherit;background:var(--paper-raised);transition:box-shadow .15s ease,transform .15s ease}.screen-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.screen-card .sw{display:block;height:76px}.screen-card .nm{display:block;padding:.5rem .65rem .1rem;font-size:.84rem;font-weight:600}.screen-card .hx{display:block;padding:0 .65rem .55rem;font-size:.72rem;color:var(--ink-faint);font-family:var(--font-mono)}.res-note{font-size:.82rem;color:var(--ink-faint);margin-top:.6rem}@media(max-width:880px){.sc-preview{max-height:48vh}}.screen-figure{margin:2.25rem 0;max-width:640px}.screen-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-md);border:1px solid var(--rule);box-shadow:var(--shadow-sm);background:var(--paper-sunken)}.screen-figure figcaption{margin-top:.6rem;font-size:.85rem;color:var(--ink-faint);line-height:1.6}.fam-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-top:1.5rem}.fam-card2{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;background:var(--paper-raised);box-shadow:var(--shadow-sm);transition:box-shadow .15s ease,transform .15s ease}.fam-card2:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.fam-card2 .fam-strip{display:flex;height:56px}.fam-card2 .fam-strip span{flex:1}.fam-card2 strong{display:block;padding:.7rem .9rem .15rem;font-family:var(--font-display);font-size:1.02rem}.fam-card2 small{display:block;padding:0 .9rem .75rem;color:var(--ink-faint);font-size:.8rem}.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:.7rem;margin-top:1.5rem}.lib-swatch{display:block;text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-raised)}.lib-swatch:hover{border-color:var(--ink-faint)}.lib-swatch .lib-sw{display:block;height:72px;background:var(--c, #ccc)}.lib-swatch .lib-nm{display:block;padding:.4rem .6rem .1rem;font-size:.82rem;font-weight:600}.lib-swatch .lib-hx{display:block;padding:0 .6rem .45rem;font-size:.68rem;color:var(--ink-faint)}.fam-jump{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.25rem}.fam-jump a{font-size:.8rem;padding:.3rem .7rem;border-radius:999px;background:var(--paper-sunken);color:var(--ink-soft);text-decoration:none}.fam-jump a:hover{color:var(--ink)}.fam-jump a[aria-current]{background:var(--accent-soft);color:var(--accent-ink)}.color-hero{display:flex;gap:1.5rem;align-items:flex-start;margin-top:1.5rem;flex-wrap:wrap}.color-hero .big{width:240px;height:190px;flex:none;border-radius:var(--radius-lg);border:1px solid rgba(0,0,0,.1);box-shadow:var(--shadow-md);display:flex;align-items:flex-end;padding:1rem}.color-hero .big .h{font-family:var(--font-mono);font-size:.95rem;padding:.2rem .55rem;border-radius:6px;background:#00000047;color:#fff}.color-hero .meta{flex:1;min-width:240px}.color-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.color-actions a,.color-actions button{font:inherit;font-size:.82rem;font-weight:600;text-decoration:none;padding:.4rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--rule-strong);background:var(--paper-raised);color:var(--ink);cursor:pointer}.color-actions a:hover,.color-actions button:hover{border-color:var(--ink-faint)}.color-actions .primary{background:var(--accent);color:#fff;border-color:transparent}.codes2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:1rem;max-width:42rem}@media(max-width:580px){.codes2{grid-template-columns:1fr}}.codes2 .copy-row{font-size:.82rem}.codes2 .copy-row span:first-child{color:var(--ink-faint)}.harm-block{margin-top:1.1rem}.harm-block .t{font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:.4rem}.chip-row{display:flex;gap:.35rem;flex-wrap:wrap}.lib-chip{flex:1 1 66px;min-width:58px;height:52px;border-radius:7px;border:1px solid rgba(0,0,0,.1);cursor:pointer;font-family:var(--font-mono);font-size:.58rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;padding-bottom:.22rem}.ramp{display:flex;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--rule);margin-top:.4rem}.ramp button{flex:1;border:none;cursor:pointer;padding:0}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-top:1rem}.related-grid a{text-decoration:none;color:inherit;border:1px solid var(--rule);border-radius:var(--radius-sm);overflow:hidden;background:var(--paper-raised)}.related-grid a:hover{border-color:var(--ink-faint)}.related-grid a .s{height:56px;display:block}.related-grid a strong{display:block;padding:.35rem .55rem .05rem;font-size:.8rem;font-family:var(--font-display);font-weight:600}.related-grid a small{display:block;padding:0 .55rem .4rem;font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint)}.wcag-mini{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}.wcag-mini .b{font-size:.78rem;font-weight:600;padding:.35rem .7rem;border-radius:8px}.wcag-mini .pass{background:var(--good-soft);color:var(--good)}.wcag-mini .fail{background:var(--bad-soft);color:var(--bad)}