:root{--background:#fff;--surface:#f3f3f3;--text:#111;--muted:#5c5c5c;--border:#b8b8b8;--accent:#0b57d0;--alert:#b3261e;--warn:#8a5300;--inset-left:max(16px, env(safe-area-inset-left));--inset-right:max(16px, env(safe-area-inset-right));--mono:ui-monospace, "Berkeley Mono", SFMono-Regular, Menlo, Consolas, monospace;color-scheme:light dark;color:var(--text);background:var(--background);font-variant-numeric:tabular-nums;font:13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}@media (prefers-color-scheme:dark){:root{--background:#141414;--surface:#1e1e1e;--text:#e8e8e8;--muted:#9c9c9c;--border:#3d3d3d;--accent:#7cacf8;--alert:#f2726a;--warn:#e0a84a}}*{box-sizing:border-box}[hidden]{display:none!important}body{grid-template:auto minmax(0,1fr) auto/minmax(0,1fr);height:100dvh;margin:0;display:grid}header{padding:max(8px, env(safe-area-inset-top)) var(--inset-right) 8px var(--inset-left);border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;display:flex}.brand{align-items:baseline;gap:12px;display:flex}.actions{gap:6px;display:flex}h1{letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:15px}h2{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:11px}header p,footer p,.editor-toolbar p,#settings p{color:var(--muted);margin:0}footer{padding:4px var(--inset-right) max(4px, env(safe-area-inset-bottom)) var(--inset-left);border-top:1px solid var(--border)}#status{overflow-wrap:anywhere}main{grid-template-columns:400px minmax(0,1fr);min-height:0;display:grid}#drawer{border-right:1px solid var(--border);min-height:0;overflow-y:auto}#drawer>summary{display:none}#settings{padding:0 var(--inset-right) 16px var(--inset-left)}#settings>details{border-bottom:1px solid var(--border);padding-bottom:12px}#settings>details:not([open]){padding-bottom:0}summary{cursor:pointer;color:var(--muted);padding:8px 0}summary h2{display:inline}#settings>details>:is(p,button,textarea){margin:0 0 6px}#settings fieldset{border:0;min-width:0;margin:0;padding:6px 0 0}#settings legend{margin-bottom:2px;padding:0;font-weight:600}#settings fieldset+fieldset{margin-top:12px}.row{grid-template-columns:12em minmax(0,1fr) 5.5em;align-items:center;gap:8px;min-height:26px;display:grid}.check,input,button,select{font:inherit;accent-color:var(--accent)}input[type=range]{width:100%;margin:0}input[type=color]{border:1px solid var(--border);background:0 0;grid-column:3;width:100%;height:22px;padding:0}input[type=checkbox]{vertical-align:middle;margin:0}button,select,input[type=number],input[type=text]{color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:0;min-height:24px;padding:2px 6px}input[type=number]{width:100%;padding:2px 4px}.row input[type=text]{grid-column:2/-1;min-width:0}button,select{cursor:pointer}button:hover{color:var(--background);background:var(--text);border-color:var(--text)}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}#reset{margin-top:12px}#paste{resize:vertical;width:100%;font:12px/1.45 var(--mono);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:0;padding:2px 4px;display:block}#paste[aria-invalid=true]{border-color:var(--alert)}#paste-result{margin:6px 0}#paste-mapping{border-collapse:collapse;font:11px/1.5 var(--mono);margin-top:4px}#paste-mapping :is(th,td){text-align:left;vertical-align:top;overflow-wrap:anywhere;padding:0 8px 0 0;font-weight:400}#paste-mapping th{color:var(--muted);white-space:nowrap}#hues .row{grid-template-columns:8.5em minmax(0,1fr) 5.5em}#exports{flex-wrap:wrap;align-items:center;gap:6px 12px;display:flex}#preview{min-width:0;min-height:0;padding:12px var(--inset-right) 16px var(--inset-left);flex-direction:column;gap:12px;display:flex;overflow-y:auto}#swatches{border-top:1px solid var(--border);border-left:1px solid var(--border);flex-shrink:0;grid-template-columns:repeat(8,minmax(0,1fr));display:grid}.swatch{border-right:1px solid var(--border);border-bottom:1px solid var(--border);flex-direction:column;gap:1px;min-width:0;padding:4px 6px 6px;font-size:11px;display:flex}.color{border-bottom:1px solid var(--border);height:28px;margin:0 -6px 4px}.swatch code{font:11px var(--mono);color:var(--muted)}.badge{color:var(--muted)}.badge[data-pass=false]{color:var(--alert)}#readouts{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px 24px;display:grid}#checks{border-collapse:collapse;font:11px/1.5 var(--mono)}#checks caption{text-align:left;padding-bottom:4px}#checks :is(th,td){text-align:right;white-space:nowrap;padding:0 8px 0 0;font-weight:400}#checks thead th{color:var(--muted);border-bottom:1px solid var(--border)}#checks :is(th,td):is(:first-child,:last-child){text-align:left}#checks [data-status=lc_unreachable],#checks [data-status=m_out_of_bounds]{color:var(--alert);font-weight:600}#checks [data-status=gamut_mapped]{color:var(--warn)}.chip{border:1px solid var(--border);vertical-align:-1px;width:9px;height:9px;margin-right:6px;display:inline-block}#sample-panel h2{margin-bottom:4px}#sample{border:1px solid var(--border);background:var(--base00,var(--surface));font:12px/1.5 var(--mono);margin:0;padding:6px 10px;overflow-x:auto}#warning-panel{align-items:baseline;gap:16px;display:flex}#warning-panel h2{flex-shrink:0}#warnings{color:var(--muted);flex-wrap:wrap;gap:2px 16px;margin:0;padding:0;list-style:none;display:flex}#warnings:empty:before{content:"None."}.editor-toolbar{flex-wrap:wrap;align-items:center;gap:6px 16px;display:flex}.editor-status{color:var(--alert);margin:0}.code-frame{border:1px solid var(--border);background:var(--base00,var(--surface));min-height:240px;font:13px/1.6 var(--mono);flex:1;align-items:flex-start;display:flex;overflow:auto}.gutter{text-align:right;white-space:pre;user-select:none;min-height:100%;color:var(--base04,var(--muted));background:var(--base00,var(--surface));padding:10px 8px 10px 12px;position:sticky;left:0}#snippet{background:var(--base00,var(--surface));min-height:100%;color:var(--base05,var(--text));caret-color:var(--base05,var(--text));tab-size:4;white-space:pre;flex:1 0 auto;padding:10px 12px 10px 4px}#snippet ::selection,#snippet::selection{background:var(--base02);color:var(--base05)}#snippet:focus-visible{outline-offset:2px;outline:2px solid var(--accent)!important}.twinkleplop .comment{color:var(--base03)}.twinkleplop :is(.variable,.parameter,.lifetime,.label,.tag,.tag_name,.deleted){color:var(--base08)}.twinkleplop :is(.number,.boolean,.null,.constant,.attribute,.attr_sigil,.attr_name,.decorator,.unit){color:var(--base09)}.twinkleplop :is(.class_name,.type,.namespace,.selector_class){color:var(--base0A)}.twinkleplop :is(.string,.template,.inserted){color:var(--base0B)}.twinkleplop :is(.builtin,.string_escape,.escape,.regex){color:var(--base0C)}.twinkleplop :is(.function,.selector_id){color:var(--base0D)}.twinkleplop :is(.keyword,.selector,.changed){color:var(--base0E)}.twinkleplop .expression{color:var(--base0F)}#curve-controls fieldset{grid-template-columns:168px minmax(0,1fr);align-content:start;gap:4px 10px;display:grid}.curve-plot{background:var(--surface);grid-area:1/1/span 6;align-self:start;width:100%;height:auto;display:block}#curve-controls fieldset>:not(legend,.curve-plot){grid-column:2}.curve-axis{fill:none;stroke:var(--border);stroke-width:1px}.curve-line{stroke:var(--accent);stroke-width:2px}.curve-sample{fill:var(--background);stroke:var(--accent);stroke-width:1.5px}.curve-handle{fill:var(--text);stroke:var(--background);stroke-width:2px;cursor:grab;touch-action:none}.curve-handle:active{cursor:grabbing}.curve-handle:focus{stroke:var(--accent);outline:none}.curve-points>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.curve-points label{color:var(--muted);font-size:11px;display:block}.curve-points input{width:100%;min-width:0;display:block}#curve-controls select{width:100%}#curve-controls .row{grid-template-columns:minmax(0,1fr) 4.5em}#curve-controls .row>label:first-child{grid-column:1/-1}#curve-controls button{justify-self:start}dialog{max-width:min(40em,100vw - 32px);color:var(--text);background:var(--background);border:1px solid var(--border);padding:12px 16px}dialog::backdrop{background:#0006}dialog h2{margin-bottom:4px}dialog p{color:var(--muted);margin:0 0 8px}dialog table{border-collapse:collapse;margin-bottom:12px}dialog :is(th,td){text-align:left;vertical-align:top;padding:2px 12px 2px 0;font-weight:400}kbd{font:11px var(--mono);border:1px solid var(--border);background:var(--surface);padding:0 4px}@media (width<=900px){main{flex-direction:column;display:flex}#preview{flex:1;padding-top:0}#drawer{border-right:0;flex:none;order:1;overflow:visible}#drawer>summary{padding:12px var(--inset-right) 12px var(--inset-left);border-top:1px solid var(--border);background:var(--surface);display:list-item}#settings{overscroll-behavior:contain;border-top:1px solid var(--border);max-height:50dvh;overflow-y:auto}#swatches{z-index:1;background:var(--background);grid-template-columns:repeat(4,minmax(0,1fr));margin-top:12px;position:sticky;top:0}.code-frame{flex:none;height:min(420px,60dvh)}#readouts{grid-template-columns:minmax(0,1fr)}#warning-panel{flex-direction:column;gap:4px}}@media (width<=600px){.brand p{display:none}h1{letter-spacing:0;font-size:13px}header{column-gap:8px}#swatches{grid-template-columns:repeat(8,minmax(0,1fr))}.swatch{text-align:center;padding:0 0 2px;font-size:10px}.color{height:24px;margin:0 0 2px}.swatch :is(code,.badge,.prefix){display:none}.swatch:has(.badge[data-pass=false]) strong{color:var(--alert);text-decoration:underline}#checks :is(th,td){padding-right:6px}#checks :is(thead th,td:last-child){white-space:normal}.row{grid-template-columns:7em minmax(0,1fr) 5.5em}#settings .row:has(>input[type=range]){grid-template-columns:minmax(0,1fr) 5.5em;gap:0 12px}#settings .row:has(>input[type=range])>label{grid-column:1/-1}#curve-controls fieldset{grid-template-columns:minmax(0,1fr)}.curve-plot{grid-row:auto;max-width:320px}#curve-controls fieldset>:not(legend,.curve-plot){grid-column:1}}@media (pointer:coarse){input,select,textarea,#snippet{font-size:16px}:is(button,select,input[type=number],input[type=text],input[type=color]){min-height:44px}input[type=range]{height:44px}input[type=checkbox]{width:20px;height:20px}.row,.check{min-height:44px}.check{align-items:center;gap:8px;display:inline-flex}summary{padding:13px 0}.curve-handle{r:10px}}@media (hover:none){#shortcuts,.key-hint{display:none}}