:root{--bg:#f7f7f5;--panel:#fff;--ink:#17181b;--muted:#565a62;--line:#dcddd8;--accent:#b8301f;--pass:#1a7431;--fail:#b3261e;--code-bg:#efefeb;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--radius:10px;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#141517;--panel:#1c1d20;--ink:#ececea;--muted:#a7aab1;--line:#34363b;--accent:#ff8a7a;--pass:#7bd88f;--fail:#ff8a80;--code-bg:#24262a;color-scheme:dark}}:root[data-theme=dark]{--bg:#141517;--panel:#1c1d20;--ink:#ececea;--muted:#a7aab1;--line:#34363b;--accent:#ff8a7a;--pass:#7bd88f;--fail:#ff8a80;--code-bg:#24262a;color-scheme:dark}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;background:var(--bg)}body{background:var(--bg);color:var(--ink);font:1rem/1.6 var(--sans);margin:0;padding-inline:max(16px,4vw);overflow-x:clip}h1,h2,h3,p,ul,ol,figure{margin:0}img{max-width:100%}[hidden]{display:none!important}a{color:var(--accent);text-underline-offset:.2em}a:hover{text-decoration-thickness:2px}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button{font:inherit;color:inherit;cursor:pointer}code,.mono{font-family:var(--mono);font-size:.92em}code{background:var(--code-bg);border-radius:4px;padding:.1em .35em}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.skip{background:var(--ink);color:var(--bg);border-radius:6px;padding:8px 14px;position:absolute;top:-60px;left:16px}.skip:focus{top:12px}.wrap{max-width:68rem;margin-inline:auto}.bar{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;padding-block:20px;display:flex}.brand{color:var(--ink);letter-spacing:-.01em;font-weight:700;text-decoration:none}.brand span{color:var(--muted);font-weight:400}.bar nav{flex-wrap:wrap;gap:4px 18px;font-size:.9375rem;display:flex}.bar nav a{color:var(--muted);text-decoration:none}.bar nav a:hover{color:var(--ink);text-decoration:underline}.bar nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);font-weight:600;text-decoration-thickness:2px}.intro{gap:12px;padding-block:48px 28px;display:grid}.eyebrow{font-family:var(--mono);color:var(--muted);font-size:.8125rem}h1{letter-spacing:-.025em;text-wrap:balance;font-size:clamp(2rem,1.5rem + 2.2vw,2.75rem);line-height:1.1}.lede{color:var(--muted);max-width:60ch;font-size:1.125rem}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);gap:24px;padding:clamp(18px,3vw,28px);display:grid}.needs-js{color:var(--muted)}.fields{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end;gap:16px;display:grid}.field{gap:6px;min-width:0;display:grid}.field label,.field .label{font-size:.8125rem;font-weight:600}.field .hint{color:var(--muted);font-size:.8125rem}.combo{gap:6px;display:flex}input[type=text],input[type=number],select{border:1px solid var(--line);background:var(--bg);width:100%;min-width:0;height:44px;color:var(--ink);font:1rem var(--mono);border-radius:8px;padding:0 12px}select{font-family:var(--sans)}input[aria-invalid=true]{border-color:var(--fail)}input[type=color]{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:8px;flex:none;width:44px;height:44px;padding:2px}input[type=range]{width:100%;accent-color:var(--accent)}.btn{border:1px solid var(--line);background:var(--bg);border-radius:8px;height:44px;padding:0 16px;font-weight:600}.btn:hover{border-color:var(--ink)}.btn--small{height:32px;padding:0 10px;font-size:.8125rem}.result{gap:20px;display:grid}.panel>*,.result>*{min-width:0}.big{font:700 clamp(3rem,2rem + 5vw,4.5rem)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}.verdict{font-weight:700}.ok{color:var(--pass)}.bad{color:var(--fail)}.ok:before{content:"✓ "}.bad:before{content:"✗ "}.checks{border-top:1px solid var(--line);padding:0;list-style:none;display:grid}.checks li{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto 4.5rem;align-items:baseline;gap:12px;padding-block:10px;display:grid}.checks .need{font-family:var(--mono);color:var(--muted)}.checks .mark{text-align:right;font-weight:700}.sample{border:1px solid var(--line);background:var(--s-bg,var(--bg));color:var(--s-fg,var(--ink));border-radius:8px;padding:20px}.sample__big{font-size:1.5rem;font-weight:700;line-height:1.25}.subhead{color:var(--muted);font-size:.8125rem;font-weight:600}.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:0;list-style:none;display:grid}.card{border:1px solid var(--line);border-radius:8px;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px;display:grid}.card__chip{border:1px solid var(--line);background:var(--chip);border-radius:6px;grid-row:span 2;width:48px;height:48px}.card__hex{font:700 1.0625rem var(--mono)}.card__sub{color:var(--muted);font-size:.875rem}.card__actions{grid-row:span 2;gap:6px;display:grid}.note{color:var(--muted);font-size:.9375rem}.code{background:var(--code-bg);font:.875rem/1.6 var(--mono);border-radius:8px;margin:0;padding:14px 16px;position:relative;overflow-x:auto}.code-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9375rem}th,td{text-align:left;border-bottom:1px solid var(--line);vertical-align:baseline;padding:8px 10px 8px 0}th{color:var(--muted);font-size:.8125rem;font-weight:600}td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}.explain{gap:36px;padding-block:48px;display:grid}.explain section{gap:12px;display:grid}.explain h2{letter-spacing:-.015em;text-wrap:balance;font-size:1.375rem;line-height:1.25}.explain p,.explain li{max-width:65ch}.explain ul{gap:6px;padding-left:1.2em;display:grid}.facts{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;list-style:none;display:grid;padding:0!important}.facts li{border-top:2px solid var(--ink);padding:14px}.facts strong{letter-spacing:-.02em;font-size:1.5rem;display:block}.foot{border-top:1px solid var(--line);color:var(--muted);padding-block:24px 40px;font-size:.875rem}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}[data-preview]{overflow-wrap:anywhere;gap:.35em;display:grid}[data-preview] p{font-size:var(--fs);font-weight:var(--fw,400);line-height:1.2}.cb-table th[scope=row]{min-width:9rem}.cb-note{font-weight:400;display:block}.cb-row{flex-wrap:wrap;gap:6px;display:flex}.cb-chip{background:var(--chip);width:40px;height:40px;color:var(--chip-ink);font:600 .8125rem var(--mono);border:1px solid var(--line);border-radius:6px;place-items:center;display:grid}.touch-stage{gap:var(--tg,8px);background:var(--bg);border:1px solid var(--line);border-radius:8px;align-items:center;min-height:96px;padding:24px;display:flex;overflow-x:auto}.touch-target{width:var(--tw,24px);height:var(--th,24px);background:var(--ink);border-radius:4px;flex:none;position:relative}.touch-target:after{z-index:1;content:"";border:1.5px dashed var(--pass);border-radius:50%;width:24px;height:24px;position:absolute;top:50%;left:50%;translate:-50% -50%}.is-too-close .touch-target:after{border-color:var(--fail)}.touch-stage--zoom{zoom:3;min-height:0;padding:8px}.card--empty{display:block}.colour-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:0;list-style:none;display:grid}.colour-list li{align-items:center;gap:6px;display:flex}.colour-list .num-tag{width:1.5rem;font:600 .8125rem var(--mono);color:var(--muted);text-align:right;flex:none}.icon-btn{border:1px solid var(--line);background:var(--bg);border-radius:8px;flex:none;width:44px;height:44px;font-size:1.125rem;line-height:1}.icon-btn:hover{border-color:var(--ink)}.row-actions{flex-wrap:wrap;gap:8px;display:flex}.cb-fieldset{border:0;min-width:0;margin:0 0 12px;padding:0}.cb-fieldset .colour-list{margin-top:10px}.mg-stage{--mg-bg:#fbe7d6;--mg-c1:#e8700f;--mg-c2:#ffb27a;--mg-c3:#ff8f7a;--mg-text:#2b2a28;--mg-strength:80%;--mg-speed:1;background:var(--mg-bg);border-radius:8px;place-items:center;min-height:clamp(260px,40vw,420px);padding:24px;display:grid;position:relative;overflow:clip}.mg{pointer-events:none;position:absolute;inset:0;overflow:clip}.mg span{border-radius:50%;position:absolute}.mg span:first-child{aspect-ratio:1.3;background:radial-gradient(closest-side,color-mix(in srgb,var(--mg-c1)var(--mg-strength),transparent),transparent);width:60%;top:-10%;right:-8%}.mg span:nth-child(2){aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,var(--mg-c2)var(--mg-strength),transparent),transparent);width:46%;top:30%;left:5%}.mg span:nth-child(3){aspect-ratio:.8;background:radial-gradient(closest-side,color-mix(in srgb,var(--mg-c3)var(--mg-strength),transparent),transparent);width:40%;bottom:-15%;right:15%}.mg-title{text-align:center;max-width:14ch;color:var(--mg-text);letter-spacing:-.03em;text-wrap:balance;font-size:clamp(1.75rem,1rem + 3vw,3.25rem);font-weight:700;line-height:1.05;position:relative}.mg-actions{align-self:end}@media (prefers-reduced-motion:no-preference){.mg span:first-child{animation:mg-1 calc(11s/var(--mg-speed))ease-in-out infinite alternate}.mg span:nth-child(2){animation:mg-2 calc(14s/var(--mg-speed))ease-in-out infinite alternate}.mg span:nth-child(3){animation:mg-3 calc(18s/var(--mg-speed))ease-in-out infinite alternate}}.is-paused .mg span{animation-play-state:paused}@keyframes mg-1{25%{transform:translate(-45%,25%)rotate(60deg)scale(1.4,.8)}50%{transform:translate(-15%,-35%)rotate(-30deg)scale(.8,1.35)}75%{transform:translate(30%,15%)rotate(90deg)scale(1.25,1.05)}to{transform:translate(10%,-20%)rotate(20deg)scaleY(1.2)}}@keyframes mg-2{25%{transform:translate(55%,-35%)rotate(-70deg)scale(1.45,.85)}50%{transform:translate(-30%,30%)rotate(40deg)scaleY(1.4)}75%{transform:translate(35%,40%)rotate(-30deg)scale(1.3,.9)}to{transform:translate(-20%,-15%)rotate(10deg)scale(1.1)}}@keyframes mg-3{33%{transform:translate(-60%,-40%)rotate(90deg)scale(.85,1.45)}66%{transform:translate(40%,20%)rotate(-50deg)scaleX(1.4)}to{transform:translate(-10%,35%)rotate(30deg)scale(1.2,1.25)}}