/* Hallmark · pre-emit critique: P4 H5 E5 S4 R5 V4 */
/* Hallmark · genre: atmospheric · macrostructure: Workbench (preserved, app-scope redesign)
* theme: Midnight · anchor hue: 85 (brand gold, preserved) · type: Geist + Geist Mono
* motion: 0.9x — press / modal / toast only · designed-as-app */
:root{
/* colour — warm-tinted dark neutrals, one gold accent */
--color-paper: oklch(13% 0.012 85); /* stage ground */
--color-paper-2: oklch(17% 0.013 85); /* panel */
--color-paper-3: oklch(21% 0.014 85); /* inputs, wells */
--color-paper-4: oklch(25% 0.015 85); /* hover elevation */
--color-rule: oklch(28% 0.013 85);
--color-rule-2: oklch(38% 0.016 85); /* hover borders */
--color-ink: oklch(93% 0.012 85);
--color-muted: oklch(71% 0.018 85);
--color-faint: oklch(63% 0.016 85);
--color-accent: oklch(85% 0.155 88); /* the brand gold */
--color-accent-dim: oklch(76% 0.12 88);
--color-danger: oklch(74% 0.13 32);
--color-focus: var(--color-accent);
--color-scrim: oklch(10% 0.01 85 / 0.78);
/* type */
--font-ui: "Geist", ui-sans-serif, system-ui, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* space — 4-pt */
--space-2xs: 4px; --space-xs: 8px; --space-sm: 12px;
--space-md: 16px; --space-lg: 20px; --space-xl: 28px;
/* motion — Midnight, 0.9x */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.7, 0, 0.84, 0);
--dur-short: 140ms;
--dur-mid: 230ms;
--radius-input: 7px;
--radius-card: 12px;
}
*{box-sizing:border-box}
html,body{height:100%; overflow-x:clip}
body{margin:0; background:var(--color-paper); color:var(--color-ink);
font-family:var(--font-ui); font-weight:400; -webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility}
#app{display:grid; grid-template-columns:312px 1fr; height:100vh; height:100dvh}
/* ---- control rail --------------------------------------- */
#panel{background:var(--color-paper-2); border-right:1px solid var(--color-rule);
overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column;
scrollbar-width:thin; scrollbar-color:var(--color-rule-2) transparent}
#panel::-webkit-scrollbar{width:10px}
#panel::-webkit-scrollbar-thumb{background:var(--color-rule-2); border-radius:10px;
border:3px solid var(--color-paper-2)}
.brand{padding:var(--space-lg) var(--space-lg) var(--space-md); border-bottom:1px solid var(--color-rule);
position:sticky; top:0; background:var(--color-paper-2); z-index:5}
.brand h1{margin:0; font-size:14px; font-weight:600; letter-spacing:-0.02em}
.brand p{margin:6px 0 0; font-size:12px; line-height:1.55; color:var(--color-muted)}
.sect{border-bottom:1px solid var(--color-rule); padding:var(--space-md) var(--space-lg) var(--space-lg)}
.sect > h2{margin:0 0 var(--space-sm); font-family:var(--font-mono); font-size:10.5px; font-weight:500;
letter-spacing:.16em; text-transform:uppercase; color:var(--color-faint)}
.row{margin-bottom:var(--space-sm); position:relative}
.row:last-child{margin-bottom:0}
.row .lab{display:flex; justify-content:space-between; align-items:baseline; font-size:12px;
margin-bottom:6px; gap:var(--space-xs)}
.row .lab span:first-child{color:var(--color-ink)}
.row .lab output{font-family:var(--font-mono); font-size:11px; color:var(--color-accent-dim);
font-variant-numeric:tabular-nums}
/* ---- sliders -------------------------------------------- */
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:16px;
background:transparent; cursor:ew-resize; display:block}
input[type=range]::-webkit-slider-runnable-track{height:3px; background:var(--color-paper-4);
border-radius:3px}
input[type=range]::-moz-range-track{height:3px; background:var(--color-paper-4); border-radius:3px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:13px; height:13px;
border-radius:50%; background:var(--color-ink); margin-top:-5px; border:0;
transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out)}
input[type=range]::-moz-range-thumb{width:13px; height:13px; border-radius:50%;
background:var(--color-ink); border:0;
transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out)}
input[type=range]:hover::-webkit-slider-thumb{background:var(--color-accent)}
input[type=range]:hover::-moz-range-thumb{background:var(--color-accent)}
input[type=range]:active::-webkit-slider-thumb{background:var(--color-accent); transform:scale(1.18)}
input[type=range]:active::-moz-range-thumb{background:var(--color-accent); transform:scale(1.18)}
input[type=range]:focus-visible{outline:2px solid var(--color-focus); outline-offset:4px; border-radius:4px}
/* ---- fields, buttons ------------------------------------ */
select, textarea, button, .filebtn{font-family:var(--font-ui); font-size:12px; color:var(--color-ink);
background:var(--color-paper-3); border:1px solid var(--color-rule); border-radius:var(--radius-input)}
select{width:100%; padding:7px 28px 7px 10px; cursor:pointer; appearance:none; -webkit-appearance:none;
transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out)}
.row:has(> select)::after{content:""; position:absolute; right:10px; bottom:13px; width:8px; height:8px;
background:var(--color-muted); pointer-events:none;
-webkit-mask:url('data:image/svg+xml,') center/contain no-repeat;
mask:url('data:image/svg+xml,') center/contain no-repeat}
select:hover{background-color:var(--color-paper-4); border-color:var(--color-rule-2)}
textarea{width:100%; min-height:64px; padding:9px 10px; font-family:var(--font-mono); font-size:11px;
line-height:1.5; resize:vertical; color:var(--color-muted);
transition:border-color var(--dur-short) var(--ease-out)}
textarea:hover{border-color:var(--color-rule-2)}
textarea:focus-visible{outline:2px solid var(--color-focus); outline-offset:-1px; color:var(--color-ink)}
button, .filebtn{padding:8px 10px; cursor:pointer; text-align:center; display:block; width:100%;
font-weight:500; white-space:nowrap;
transition:background-color var(--dur-short) var(--ease-out),
border-color var(--dur-short) var(--ease-out),
transform 100ms var(--ease-out)}
button:hover, .filebtn:hover{background:var(--color-paper-4); border-color:var(--color-rule-2)}
button:active{transform:translateY(1px)}
button:focus-visible, select:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.filebtn:focus-within{outline:2px solid var(--color-focus); outline-offset:2px}
.btns{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-xs)}
.filebtn{position:relative; overflow:hidden}
.filebtn input{position:absolute; inset:0; opacity:0; cursor:pointer}
.presets{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-xs); margin-bottom:var(--space-xs)}
.presets button{padding:8px 2px; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
color:var(--color-muted)}
.presets button:hover{color:var(--color-ink)}
.presets button[aria-pressed=true]{border-color:var(--color-accent-dim); color:var(--color-accent);
background:color-mix(in oklab, var(--color-accent) 8%, var(--color-paper-3))}
.check{display:flex; align-items:center; gap:9px; font-size:12px; cursor:pointer; padding:3px 0;
color:var(--color-ink)}
.check input{accent-color:var(--color-accent); width:14px; height:14px; margin:0; cursor:pointer}
.check input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.swatch{display:flex; align-items:center; gap:10px}
.swatch input[type=color]{width:32px; height:26px; padding:0; border:1px solid var(--color-rule);
border-radius:6px; background:none; cursor:pointer;
transition:border-color var(--dur-short) var(--ease-out)}
.swatch input[type=color]:hover{border-color:var(--color-rule-2)}
.swatch input[type=color]:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.swatch input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
.swatch input[type=color]::-webkit-color-swatch{border:none; border-radius:4px}
.swatch input[type=color]::-moz-color-swatch{border:none; border-radius:4px}
.swatch .lab{margin:0; flex:1}
.note{font-size:11px; line-height:1.55; color:var(--color-faint); margin:var(--space-xs) 0 0}
.note code{font-family:var(--font-mono); color:var(--color-muted)}
.err{color:var(--color-danger); font-size:11px; line-height:1.5; margin-top:6px; display:none}
.err.on{display:block}
/* ---- stage ---------------------------------------------- */
#stage{position:relative; display:flex; align-items:center; justify-content:center;
overflow:hidden; touch-action:none; background:var(--color-paper)}
#checker{position:absolute; inset:0;
background-image:
linear-gradient(45deg, var(--color-paper-2) 25%, transparent 25%),
linear-gradient(-45deg, var(--color-paper-2) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--color-paper-2) 75%),
linear-gradient(-45deg, transparent 75%, var(--color-paper-2) 75%);
background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0;
opacity:0; transition:opacity var(--dur-mid) var(--ease-out)}
#checker.on{opacity:1}
canvas{position:relative; display:block; max-width:100%; max-height:100%; cursor:grab}
canvas.drag{cursor:grabbing}
#hud{position:absolute; left:16px; bottom:14px; font-family:var(--font-mono); font-size:10.5px;
color:var(--color-faint); letter-spacing:.04em; pointer-events:none;
font-variant-numeric:tabular-nums}
#toast{position:absolute; right:16px; bottom:14px; font-family:var(--font-mono); font-size:10.5px;
color:var(--color-accent); background:var(--color-paper-3); border:1px solid var(--color-rule);
border-radius:999px; padding:4px 12px; opacity:0;
transition:opacity var(--dur-mid) var(--ease-out); pointer-events:none}
#toast.on{opacity:1}
/* ---- export modal --------------------------------------- */
.modal{position:fixed; inset:0; background:var(--color-scrim); display:none;
align-items:center; justify-content:center; z-index:50; padding:32px}
.modal.on{display:flex}
.modal-inner{background:var(--color-paper-2); border:1px solid var(--color-rule);
border-radius:var(--radius-card); width:min(900px,100%); max-height:100%;
display:flex; flex-direction:column; overflow:hidden}
.modal.on .modal-inner{animation:modal-in var(--dur-mid) var(--ease-out)}
@keyframes modal-in{from{opacity:0; transform:scale(0.97)} to{opacity:1; transform:scale(1)}}
.modal-head,.modal-foot{display:flex; align-items:center; gap:var(--space-sm);
padding:var(--space-sm) var(--space-md)}
.modal-head{border-bottom:1px solid var(--color-rule)}
.modal-foot{border-top:1px solid var(--color-rule)}
.modal-head strong{flex:1; font-size:13px; font-weight:600; letter-spacing:-0.01em}
.modal-head button,.modal-foot button{width:auto; padding:6px 14px}
.modal-foot .btns{display:flex; gap:var(--space-xs); width:auto}
#exNote{flex:1; font-family:var(--font-mono); font-size:10.5px; color:var(--color-muted); line-height:1.55}
#exCode{flex:1; min-height:340px; border:0; border-radius:0; background:var(--color-paper);
font-size:11px; line-height:1.55; padding:var(--space-sm) var(--space-md); resize:none;
color:var(--color-muted)}
#exCode:focus-visible{outline:none; color:var(--color-ink)}
@media (max-width:820px){
#app{grid-template-columns:1fr; grid-template-rows:minmax(240px,42vh) 1fr}
#panel{order:2; border-right:0; border-top:1px solid var(--color-rule)}
#stage{order:1}
.modal{padding:12px}
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{transition-duration:0.01ms !important; animation-duration:0.01ms !important}
}