.app{overflow-x:hidden}.workbench{border-top:1px solid var(--rule);grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:0;min-height:calc(100vh - 70px);display:grid}.rail{padding:8px 28px 80px var(--gutter);border-right:1px solid var(--rule);align-self:start;max-height:calc(100vh - 70px);position:sticky;top:0;overflow-y:auto}.opt{border-bottom:1px solid var(--rule);gap:12px;padding:22px 0;display:grid}.opt:last-child{border-bottom:0}.opt h2{font-size:24px}#source-color,#source-names{gap:12px;display:grid}.hint,.metric,.readout{color:var(--muted);font-size:16px;line-height:1.4}.metric b,.readout b{color:var(--ink);font-weight:400}.readout{font:400 12px/1.6 var(--mono);flex-wrap:wrap;gap:4px 14px;display:flex}textarea,input[type=text]{background:var(--field);border:1px solid var(--rule);width:100%;font:400 13px/1.7 var(--mono);resize:vertical;border-radius:4px;padding:10px 12px}input.one{font-size:22px;font-family:var(--serif);padding:8px 12px}.presets{flex-wrap:wrap;gap:6px 16px;font-size:16px;display:flex}.control{gap:8px;display:grid}.control label,.control .label{justify-content:space-between;font-size:17px;display:flex}.value{font:400 12px/1.6 var(--mono);color:var(--muted)}input[type=range]{width:100%;accent-color:var(--ink);cursor:pointer}.marks{color:var(--faint);font:400 10.5px/1 var(--mono);justify-content:space-between;display:flex}.segmented{border:1px solid var(--rule);border-radius:4px;display:flex;overflow:hidden}.segmented button{cursor:pointer;color:var(--muted);background:0 0;border:0;flex:1;padding:8px 6px;font-size:16px}.segmented button+button{border-left:1px solid var(--rule)}.segmented button[aria-pressed=true]{background:var(--ink);color:var(--surface)}.toggle{cursor:pointer;align-items:center;gap:10px;font-size:17px;display:flex}.toggle input{accent-color:var(--ink);width:16px;height:16px}.wheel{margin:0}.wheel svg{width:100%;height:auto;display:block}.counters{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat b{font:400 22px/1.2 var(--serif);display:block}.stat span{color:var(--muted);font-size:14px}.run{border:1px solid var(--faint);cursor:pointer;background:0 0;border-radius:4px;padding:8px 12px;font-size:17px}.run:hover:not(:disabled){border-color:var(--ink)}.run:disabled{opacity:.5;cursor:progress}.timing{color:var(--muted);min-height:1.6em;font-size:11.5px;line-height:1.6}.stage{padding:20px var(--gutter) 0 36px;flex-direction:column;min-width:0;display:flex}.tabs{flex-wrap:wrap;gap:4px 22px;display:flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:2px solid #0000;padding:6px 0;font-size:19px}.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--ink)}.tabs.small button{font-size:15px}.caption{color:var(--muted);max-width:62ch;margin:14px 0 18px}.frame{flex:1;min-height:340px;padding:8px 0 24px;overflow-x:auto}.stats{border-top:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px 28px;margin:0;padding:18px 0;display:grid}.stats dt{color:var(--muted);font-size:15px}.stats dd{font:400 20px/1.3 var(--serif);margin:2px 0 0}.drawer{background:var(--surface);border-top:1px solid var(--rule);margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter);position:sticky;bottom:0}.drawer-bar{flex-wrap:wrap;align-items:center;gap:24px;padding:10px 0;display:flex}.drawer-toggle{border:1px solid var(--faint);cursor:pointer;background:0 0;border-radius:4px;padding:6px 14px}.drawer-toggle:hover{border-color:var(--ink)}#copy{margin-left:auto}.drawer-body{padding-bottom:14px}.drawer-body pre{max-height:260px}@media (max-width:900px){.workbench{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid var(--rule);max-height:none;padding:8px var(--gutter) 24px;position:static}.stage{padding:20px var(--gutter) 0}}.color-row{align-items:center;gap:10px;display:flex}.color-row input[type=color]{border:1px solid var(--faint);cursor:pointer;background:0 0;border-radius:4px;flex:none;width:56px;height:40px;padding:0}input.hex{max-width:9em;font:400 15px/1.3 var(--mono)}input[aria-invalid=true]{border-style:dashed;border-color:var(--ink)}.swatch-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.color-panels{border:1px solid var(--rule);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));display:grid;overflow:hidden}.color-panel{flex-direction:column;gap:4px;min-width:0;padding:22px;display:flex}.color-panel h4{font:italic 400 28px/1.1 var(--serif)}.color-panel .sample{font:italic 400 clamp(30px, 3.4vw, 46px)/1.1 var(--serif);overflow-wrap:anywhere;margin-top:16px}.color-panel .mono{color:var(--muted);overflow-wrap:anywhere;font-size:11.5px;line-height:1.5}.color-panel .change{margin-top:14px}.backdrops{margin-top:8px;padding-bottom:8px}.backdrops h3{font:italic 400 26px/1.1 var(--serif);margin:8px 0 14px}.backdrop-row{border:1px solid var(--rule);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));display:grid;overflow:hidden}.backdrop{min-width:0;padding:18px 20px}.backdrop h4{font:italic 400 22px/1.1 var(--serif)}.backdrop ul{font:italic 400 22px/1.3 var(--serif);flex-wrap:wrap;gap:2px 14px;margin:12px 0;padding:0;list-style:none;display:flex}.backdrop .mono{color:var(--muted);font-size:11.5px;line-height:1.5}.backdrop .worst b{color:var(--ink);font-weight:500}