:root{--color-accent: #0071e3;--color-link-blue: #0066cc;--color-carbon: #1d1d1f;--color-frost: #f5f5f7;--color-ice: #f4f8fb;--color-smoke: #333333;--color-graphite: #474747;--color-ash: #707070;--color-mist: #858585;--color-pebble: #e2e2e5;--color-hairline: #d2d2d7;--font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-text: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, monospace;--text-caption: 12px;--leading-caption: 1.33;--tracking-caption: -.264px;--text-body-sm: 14px;--leading-body-sm: 1.29;--tracking-body-sm: -.224px;--text-body: 17px;--leading-body: 1.47;--tracking-body: -.272px;--text-subheading: 21px;--leading-subheading: 1.24;--tracking-subheading: -.105px;--text-heading-sm: 28px;--leading-heading-sm: 1.18;--tracking-heading-sm: .196px;--weight-light: 300;--weight-regular: 400;--weight-semibold: 600;--spacing-4: 4px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-32: 32px;--spacing-40: 40px;--radius-card: 8px;--radius-field: 14px;--radius-pill: 980px;--nav-h: 44px}*{box-sizing:border-box}html,body{margin:0;overscroll-behavior:none}body{background:#fff;color:var(--color-carbon);font-family:var(--font-text);font-size:var(--text-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);-webkit-font-smoothing:antialiased}#root{min-height:100dvh;display:grid;grid-template-rows:var(--nav-h) 1fr}.globalnav{display:flex;align-items:center;gap:var(--spacing-20);padding:0 var(--spacing-24);background:var(--color-carbon);font-size:var(--text-caption);letter-spacing:var(--tracking-caption)}.globalnav-mark{color:var(--color-frost);font-weight:var(--weight-semibold)}.globalnav-spacer{flex:1}.globalnav a{color:var(--color-frost);text-decoration:none;opacity:.8;transition:opacity .12s ease}.globalnav a:hover{opacity:1}.globalnav a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}.workspace{display:grid;grid-template-columns:minmax(0,580px) 300px;justify-content:center;align-content:center;gap:var(--spacing-40);padding:var(--spacing-24)}.controls{display:grid;align-content:start;gap:var(--spacing-24);min-width:0}.group{display:grid;gap:var(--spacing-12);min-width:0}.group h2{margin:0;font-family:var(--font-display);font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--weight-semibold)}.lede{margin:-4px 0 var(--spacing-4);max-width:68ch;font-size:var(--text-body-sm);line-height:1.45;letter-spacing:var(--tracking-body-sm);color:var(--color-graphite)}.note{margin:0;font-size:var(--text-caption);line-height:var(--leading-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}.field{display:flex;align-items:stretch;border:1px solid var(--color-hairline);border-radius:var(--radius-field);background:#fff;overflow:hidden;min-width:0}.field:focus-within{outline:2px solid var(--color-accent);outline-offset:-1px;border-color:transparent}.field-body{display:grid;align-content:center;gap:1px;padding:11px var(--spacing-16);min-width:0;flex:1}.field-label{font-size:var(--text-caption);line-height:var(--leading-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}.field-body input,.field-body output{font-family:var(--font-text);font-size:var(--text-body);line-height:1.3;letter-spacing:var(--tracking-body);color:var(--color-carbon);border:0;background:transparent;padding:0;min-width:0;width:100%}.field-body input:focus{outline:none}.field-derived .hex{color:var(--color-ash)}.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--spacing-12)}.field-colour .chip{position:relative;flex:0 0 44px;background:var(--well, #fff);border-right:1px solid var(--color-hairline);cursor:pointer}.field-derived .chip{cursor:default}.field-colour .chip input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;cursor:pointer}.hex{text-transform:uppercase}.budget{display:grid;gap:6px}.budget-track{height:4px;background:var(--color-pebble);border-radius:var(--radius-pill);overflow:hidden}.budget-fill{height:100%;width:0;background:var(--color-carbon);transition:width .2s cubic-bezier(.2,0,0,1)}.budget-fill.over{background:var(--color-mist)}.swatches{display:flex;flex-wrap:nowrap;gap:var(--spacing-16);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:var(--spacing-4) 2px;margin-inline:-2px;scrollbar-width:none}.swatches::-webkit-scrollbar{display:none}.swatches[data-fade=end]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 52px),transparent)}.swatches[data-fade=start]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 52px),transparent)}.swatches[data-fade=both]{-webkit-mask-image:linear-gradient(to right,transparent,#000 52px,#000 calc(100% - 52px),transparent);mask-image:linear-gradient(to right,transparent,#000 52px,#000 calc(100% - 52px),transparent)}.swatch{flex:0 0 auto;scroll-snap-align:center;display:grid;justify-items:center;gap:6px;width:62px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit}.swatch i{display:block;width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--color-hairline);background:linear-gradient(135deg,var(--fg) 0 50%,var(--bg) 50% 100%) border-box;transition:box-shadow .14s ease}.swatch:hover i{box-shadow:0 0 0 3px var(--color-pebble)}.swatch.on i{outline:2px solid var(--color-accent);outline-offset:2px;border-color:transparent}.swatch:focus-visible i{outline:2px solid var(--color-accent);outline-offset:2px}.swatch span{font-size:var(--text-caption);line-height:1.25;letter-spacing:var(--tracking-caption);color:var(--color-graphite);text-align:center}.verdict{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--color-graphite)}.verdict b{font-weight:var(--weight-semibold);color:var(--color-carbon)}.fixes{display:flex;flex-wrap:wrap;gap:var(--spacing-8);margin-top:var(--spacing-8)}.fix{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-link-blue);background:transparent;border:1px solid var(--color-link-blue);border-radius:var(--radius-pill);padding:6px 13px;cursor:pointer}.fix:hover{background:#0066cc0d}.fix i{width:10px;height:10px;border-radius:var(--radius-pill);display:block}.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--spacing-16) var(--spacing-24);padding-top:var(--spacing-16);border-top:1px solid var(--color-hairline)}.pane{display:grid;align-content:start;gap:var(--spacing-8);min-width:0}.pane h3{margin:0;font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);font-weight:var(--weight-regular);color:var(--color-graphite)}.source{display:flex;align-items:center;gap:var(--spacing-12);min-height:32px;padding:0 var(--spacing-4);border-radius:var(--radius-card);transition:background-color .14s ease}.source.dragover{background:var(--color-ice)}.source-state{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}.source.filled .source-state{color:var(--color-carbon)}.source-actions{display:flex;align-items:center;gap:var(--spacing-12);flex:0 0 auto}.source-actions .link{font-size:var(--text-caption);letter-spacing:var(--tracking-caption)}.icons{display:flex;flex-wrap:wrap;gap:6px}.icon{width:28px;height:28px;display:grid;place-items:center;padding:0;color:var(--color-graphite);background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-card);cursor:pointer;transition:color .14s ease,border-color .14s ease,background-color .14s ease}.icon svg{width:16px;height:16px;display:block}.icon:hover{background:var(--color-frost)}.icon.on{color:#fff;background:var(--color-accent);border-color:transparent}.icon:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.text-input{min-width:0;font-family:var(--font-text);font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--color-carbon);background:#fff;border:1px solid var(--color-hairline);border-radius:var(--radius-card);padding:9px var(--spacing-12)}.text-input:focus{outline:2px solid var(--color-accent);outline-offset:-1px;border-color:transparent}.segmented{display:flex;min-width:0;padding:2px;background:var(--color-pebble);border-radius:var(--radius-pill)}.segmented button{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:inherit;font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);font-weight:var(--weight-semibold);color:var(--color-carbon);background:transparent;border:none;border-radius:var(--radius-pill);padding:7px 10px;cursor:pointer;transition:background-color .14s ease,color .14s ease}.segmented button.on{background:var(--color-accent);color:#fff}.segmented button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.preview{display:grid;align-content:center;justify-items:center;gap:var(--spacing-16);min-height:0}.render{width:min(260px,100%);aspect-ratio:1;display:grid;place-items:center}.render svg{width:100%;height:100%;display:block}.render p{margin:0;color:var(--color-ash);text-align:center;font-size:var(--text-body-sm)}.preview-url{margin:0;max-width:100%;font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash);overflow-wrap:anywhere;text-align:center}.stats{display:flex;gap:var(--spacing-32);margin:0}.stats dt{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash);text-align:center}.stats dd{margin:2px 0 0;font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm);letter-spacing:var(--tracking-heading-sm);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;display:flex;align-items:baseline;justify-content:center;gap:2px}.stats .unit{font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);font-weight:var(--weight-regular);color:var(--color-ash)}number-flow-react{--number-flow-mask-height: .2em}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-12)}.pill{font-family:inherit;font-size:var(--text-body-sm);line-height:var(--leading-body-sm);letter-spacing:var(--tracking-body-sm);font-weight:var(--weight-regular);padding:10px 18px;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:opacity .14s ease,background-color .14s ease}.pill-filled{background:var(--color-accent);color:#fff;border:none}.pill-filled:hover{opacity:.85}.pill-outlined{background:transparent;color:var(--color-link-blue);border:1px solid var(--color-link-blue)}.pill-outlined:hover{background:#0066cc0d}.pill:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}.pill:disabled{background:var(--color-pebble);color:var(--color-mist);border-color:transparent;cursor:not-allowed}.pill-outlined:disabled{background:transparent;border:1px solid var(--color-pebble)}.link{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:var(--text-body-sm);letter-spacing:var(--tracking-body-sm);color:var(--color-link-blue);background:none;border:0;padding:0;cursor:pointer;white-space:nowrap}.link:hover{text-decoration:underline}.link:disabled{color:var(--color-mist);cursor:not-allowed;text-decoration:none}.link:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}.link-icon{justify-self:start}.links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-16)}.api{display:grid;justify-items:center;gap:6px;width:100%;min-width:0;padding-top:var(--spacing-12);border-top:1px solid var(--color-hairline)}.api-label{font-size:var(--text-caption);letter-spacing:var(--tracking-caption);color:var(--color-ash)}.api code{max-width:100%;overflow-wrap:anywhere;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-carbon);background:var(--color-frost);border-radius:6px;padding:5px 9px}.api-actions{display:flex;gap:var(--spacing-16)}.api-actions .link{font-size:var(--text-caption);letter-spacing:var(--tracking-caption)}.sheet{border:0;border-radius:var(--radius-card);padding:0;width:min(600px,calc(100vw - 48px));background:#fff;color:var(--color-carbon)}.sheet::backdrop{background:#0006}.sheet-inner{display:grid;gap:var(--spacing-12);padding:var(--spacing-24);margin:0}.sheet h2{margin:0;font-family:var(--font-display);font-size:var(--text-subheading);line-height:var(--leading-subheading);letter-spacing:var(--tracking-subheading);font-weight:var(--weight-semibold)}.sheet textarea{width:100%;font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-carbon);background:var(--color-frost);border:1px solid var(--color-hairline);border-radius:var(--radius-card);padding:var(--spacing-12);resize:none}.sheet textarea:focus{outline:2px solid var(--color-accent);outline-offset:-1px;border-color:transparent}.sheet-actions{display:flex;justify-content:flex-end;gap:var(--spacing-12);margin-top:var(--spacing-4)}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1.4fr) minmax(0,1fr);gap:var(--spacing-24)}.fields{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*{transition-duration:1ms!important}}