:root{--bg: #f4f1ec;--stage: #efece6;--panel: #fbfaf7;--ink: #23201b;--muted: #7a7366;--line: #e2ddd3;--accent: #a4472c;--accent-soft: #f1ddd4;--track: #e6e1d7;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;color:var(--ink);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg)}#app{display:grid;grid-template-columns:340px 1fr;height:100vh}#panel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto;padding:18px 18px 40px}#stage{position:relative;overflow:hidden}#stage canvas{display:block;width:100%;height:100%}h1{font-family:Cormorant Garamond,Georgia,serif;font-weight:600;font-size:30px;letter-spacing:.02em;margin:0 0 2px}.tagline{color:var(--muted);margin:0 0 16px;line-height:1.4}.toolbar{display:flex;gap:8px;margin:0 0 14px}.toolbar.download select{flex:1}.toolbar.view{gap:16px;color:var(--muted)}.credit{font-size:11.5px;line-height:1.45;color:var(--muted);margin:-4px 0 14px;padding:8px 10px;background:var(--accent-soft);border-radius:7px}.toolbar.view label{display:flex;align-items:center;gap:6px;cursor:pointer}.toolbar.view input{accent-color:var(--accent);margin:0}button:disabled{opacity:.6;cursor:progress}button{font:inherit;font-weight:500;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:7px;padding:7px 12px;cursor:pointer}button:hover{border-color:var(--muted)}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{filter:brightness(1.08)}.group{border-top:1px solid var(--line)}.group-bar{display:flex;align-items:center;gap:6px}.group-dice{flex:none;display:grid;place-items:center;padding:4px;border:0;background:none;color:var(--muted);border-radius:6px}.group-dice:hover{color:var(--accent);background:var(--accent-soft)}.group-head{flex:1;width:100%;text-align:left;border:0;border-radius:0;background:none;padding:11px 0;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}.group-head:after{content:"+";font-weight:400;font-size:14px;line-height:1}.group.open .group-head:after{content:"–"}.group-body{display:none;padding:0 0 12px}.group-body>[hidden]{display:none!important}.group.open .group-body{display:block}.row{padding:5px 0 7px}.row-top{display:flex;justify-content:space-between;align-items:baseline}.row-label{font-weight:500}.row-value{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.row.choice{display:grid;gap:5px}select{font:inherit;width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink)}input[type=range]{width:100%;margin:6px 0 0;accent-color:var(--ink);height:16px}.vary{display:grid;grid-template-columns:34px 1fr 38px;align-items:center;gap:6px}.row-top .mix-toggle{margin-left:auto;margin-right:8px}.row.choice .row-top .mix-toggle{margin-right:0}.mix-toggle{font-size:10px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:3px 7px;border-radius:9px;color:var(--accent);border-color:var(--accent-soft);background:transparent}.mix-toggle.on{background:var(--accent);border-color:var(--accent);color:#fff}.mix{display:grid;gap:3px;margin-top:2px}.mix[hidden]{display:none}.mix-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 40px;align-items:center;gap:6px;font-size:12px}.mix-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.mix-row input[type=range]{accent-color:var(--accent);margin:0;height:12px}.mix-share{font-size:11px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}.vary input[type=range]{accent-color:var(--accent);margin:0;height:12px}.vary-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.vary-value{font-size:11px;color:var(--accent);text-align:right;font-variant-numeric:tabular-nums}.plugin{margin:16px 0 0;font-size:11.5px;color:var(--muted)}.plugin a{color:inherit;text-underline-offset:2px}.plugin a:hover{color:var(--accent)}#status{position:absolute;left:14px;bottom:12px;color:var(--muted);font-size:12px;background:color-mix(in srgb,var(--stage) 85%,transparent);padding:4px 8px;border-radius:6px}@media (max-width: 760px){#app{grid-template-columns:1fr;grid-template-rows:55vh auto;height:auto}#stage{order:-1;height:55vh}#panel{border-right:0;border-top:1px solid var(--line);padding:16px}}