:root{color-scheme:dark;--bg: #2b2b2b;--panel: #333;--line: #474747;--text: #ddd;--muted: #999;--accent: #4a90d9;font:12px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}main{padding:8px;display:flex;flex-direction:column;gap:6px}.preview{position:relative;background:#1e1e1e;min-height:120px;touch-action:none;-webkit-user-select:none;user-select:none}.preview.actual{overflow:auto;max-height:60vh}.stage{position:relative}.preview.actual .stage{width:max-content}.preview canvas{display:block;width:100%;height:auto}.preview.actual canvas{max-width:none;image-rendering:pixelated}.toggles{gap:14px}body:not(.no-fold) .preview:not(.actual){cursor:ew-resize}.spine{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,80,60,.85);pointer-events:none;opacity:0;transition:opacity .15s}body:not(.no-fold) .preview:hover .spine{opacity:1}.empty{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:var(--muted)}.row{display:flex;align-items:center;gap:8px}.row>span{flex:0 0 auto;min-width:44px}.row select,.row input[type=number]{flex:1}.check{cursor:pointer}select,input[type=number],button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:3px 6px}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}#dice{font-size:16px;line-height:1;padding:2px 8px}details{border-top:1px solid var(--line);padding-top:4px}summary{cursor:pointer;font-weight:600;padding:2px 0}.section{display:flex;flex-direction:column;gap:4px;padding:4px 0 6px}.slider{display:grid;grid-template-columns:1fr auto;column-gap:8px}.slider .value{color:var(--muted);font-variant-numeric:tabular-nums}.slider input{grid-column:1 / -1;width:100%;margin:0;accent-color:var(--accent)}.no-fold .fold-only{opacity:.45}.hint{color:var(--muted)}.no-fold .hint{visibility:hidden}.advanced[open]{display:flex;flex-direction:column;gap:6px;padding-bottom:4px}.section-title{font-weight:600;color:var(--muted);padding-top:4px}.actions{display:flex;gap:6px;border-top:1px solid var(--line);padding-top:8px}.actions button{flex:1;padding:6px}.status{color:var(--muted);min-height:1.4em}.status.error{color:#ff7b6b}.empty[hidden]{display:none}
