:root{--paper:#dfe5e1;--panel:#f6f8f6;--ink:#16211f;--muted:#566562;--line:#b9c4bf;--on-air:#c2255c;--display:"Bricolage Grotesque", "Zen Kaku Gothic New", sans-serif;--body:"Zen Kaku Gothic New", "Hiragino Sans", sans-serif}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font:400 16px / 1.75 var(--body);margin:0;padding:clamp(16px,3vw,40px)}:focus-visible{outline:3px solid var(--on-air);outline-offset:2px}.masthead{flex-wrap:wrap;align-items:baseline;gap:4px 24px;margin-bottom:clamp(20px,3vw,36px);display:flex}.masthead .back{color:var(--muted);font:500 14px / 1 var(--display);flex-basis:100%;text-decoration:none}.masthead .back:before{content:"← "}.masthead .back:hover{color:var(--on-air)}.masthead h1{font:800 clamp(28px, 4vw, 44px) / 1 var(--display);letter-spacing:-.03em;margin:0}.masthead p{color:var(--muted);margin:0}.bench{grid-template-columns:minmax(180px,1fr) minmax(0,4fr) minmax(260px,1.6fr);grid-template-areas:"shelf output output""shelf monitor controls";align-items:start;gap:clamp(16px,2.5vw,32px);display:grid}.shelf{grid-area:shelf}.shelf ul{margin:0;padding:0;list-style:none}.shelf button{width:100%;color:var(--muted);font:700 clamp(24px, 2.6vw, 38px) / 1.15 var(--display);letter-spacing:-.02em;text-align:left;cursor:pointer;background:0 0;border:0;border-left:4px solid #0000;padding:6px 0 6px 14px;display:block}.shelf button:hover{color:var(--ink)}.shelf button[aria-current=true]{border-left-color:var(--on-air);color:var(--ink)}.monitor{grid-area:monitor;min-width:0}.screen{aspect-ratio:16/9;box-shadow:0 0 0 1px var(--ink), 0 18px 40px -18px #16211f80;background:repeating-conic-gradient(#c9d1cd 0% 25%,#eef1ef 0% 50%) 0 0/24px 24px;border-radius:6px;position:relative;overflow:hidden}.screen iframe{transform-origin:0 0;transform:scale(var(--preview-scale,.5));border:0;position:absolute;top:0;left:0}.monitor h2{font:700 24px / 1.2 var(--display);margin:18px 0 0}.monitor p{max-width:40em;color:var(--muted);margin:4px 0 0}.controls{border:1px solid var(--line);background:var(--panel);border-radius:6px;grid-area:controls;padding:20px}.field{border:0;margin:0 0 18px;padding:0}.field legend{padding:0;font-weight:700}.slider-row{align-items:center;gap:12px;display:flex}.slider-row output{min-width:3.5ch;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}.field code{color:var(--muted);font:500 13px/1 ui-monospace,monospace}.field input[type=range]{min-width:0;accent-color:var(--on-air);flex:1}.swatches{flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;display:flex}.field input[type=color]{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:4px;width:44px;height:44px;padding:2px}.field input[type=color]:disabled{opacity:.35;cursor:not-allowed}.field input[type=text]{box-sizing:border-box;border:1px solid var(--line);width:100%;min-height:44px;color:var(--ink);background:#fff;border-radius:4px;margin-top:6px;padding:0 12px;font:500 15px ui-monospace,monospace}.field input[type=text]:invalid{border-color:var(--on-air)}.check{align-items:center;gap:6px;display:inline-flex}.check input{width:18px;height:18px;accent-color:var(--on-air)}button.quiet,.swatches button{border:1px solid var(--line);min-height:44px;color:var(--ink);font:500 14px var(--body);cursor:pointer;background:0 0;border-radius:4px;padding:0 14px}button.quiet:hover,.swatches button:hover:not(:disabled){border-color:var(--ink)}.swatches button:disabled{opacity:.4;cursor:not-allowed}.output{grid-area:output}.output label{margin-bottom:6px;font-weight:700;display:block}.output-row{gap:8px;display:flex}.output input{border:1px solid var(--ink);background:var(--panel);min-width:0;min-height:48px;color:var(--ink);border-radius:4px;flex:1;padding:0 14px;font:500 14px ui-monospace,monospace}#copy{background:var(--on-air);color:#fff;min-height:48px;font:700 15px var(--body);white-space:nowrap;cursor:pointer;border:0;border-radius:4px;padding:0 22px}#copy:hover{background:#a01d4a}#copy-status{min-height:1.75em;color:var(--muted);margin:6px 0 0}@media (width<=960px){.bench{grid-template-columns:1fr;grid-template-areas:"shelf""output""monitor""controls"}.shelf ul{flex-wrap:wrap;gap:0 8px;display:flex}.shelf button{border-bottom:4px solid #0000;border-left:0;width:auto;padding:8px 12px 8px 0}.shelf button[aria-current=true]{border-bottom-color:var(--on-air)}.output-row{flex-direction:column}}