:root{--color-bg:#fff;--color-text:#1a1a1a;--color-border:#c7c7c7;--color-panel-bg:#f4f4f5;--color-focus:#1a56db;--color-accent:#1a56db;--color-warning:#b91c1c}@media (prefers-color-scheme:dark){:root{--color-bg:#15171a;--color-text:#e8e8e8;--color-border:#3a3d42;--color-panel-bg:#1e2024;--color-focus:#7aa2ff;--color-accent:#7aa2ff;--color-warning:#ff8f8f}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{align-items:stretch;height:100vh;min-height:100vh;display:flex}#app>canvas{background:var(--color-bg);touch-action:none;flex:auto;min-width:0;display:block}.side-panel{background:var(--color-panel-bg);border-left:1px solid var(--color-border);flex-direction:column;flex:0 0 320px;gap:10px;min-width:260px;max-width:420px;padding:12px;display:flex;overflow-y:auto}.side-panel label{margin:6px 0;font-size:.9rem;display:block}.side-panel input,.side-panel select,.side-panel textarea{box-sizing:border-box;width:100%;font:inherit;color:inherit;background:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;margin-top:4px;padding:4px 6px;display:block}.side-panel textarea{resize:vertical;min-height:9rem;font-family:ui-monospace,Consolas,monospace}.side-panel button{font:inherit;color:inherit;background:var(--color-bg);border:1px solid var(--color-border);cursor:pointer;border-radius:4px;margin:2px 0;padding:4px 10px}.side-panel button:hover{border-color:var(--color-accent)}.side-panel button:disabled{opacity:.6;cursor:not-allowed}.side-panel ul{color:var(--color-warning);margin:4px 0;padding-left:1.2rem}.side-panel [role=status]{min-height:1em;color:var(--color-warning);margin:2px 0;font-size:.85rem}.side-panel hr{border:none;border-top:1px solid var(--color-border);margin:8px 0}.gallery{flex-wrap:wrap;gap:8px;margin:0 0 8px;display:flex}.gallery>h2{flex:1 0 100%;margin:0 0 2px;font-size:1rem}.gallery>button{text-align:center;flex-direction:column;align-items:center;gap:4px;width:104px;padding:6px;font-size:.8rem;display:flex}.gallery>button canvas{border:1px solid var(--color-border);background:var(--color-bg);border-radius:4px;width:96px;height:96px}.sentence{margin:4px 0;line-height:1.7}.sentence label,.instruction label{align-items:baseline;gap:4px;width:auto;margin:2px 4px 2px 0;font-size:.9rem;display:inline-flex}.sentence input,.sentence select,.instruction input,.instruction select{width:auto;min-width:3.5em;margin-top:0;display:inline-block}.sentence.colors label{min-width:0}.step-card{border:1px solid var(--color-border);border-radius:6px;margin:8px 0;padding:8px 10px}.step-card>h3{margin:0 0 6px;font-size:1rem}.branch{border-left:2px solid var(--color-border);margin:6px 0;padding:4px 0 4px 10px}.instruction{margin:4px 0;display:block}.note{opacity:.75;margin:2px 0 2px 10px;font-size:.8rem;font-style:italic}.chips{flex-wrap:wrap;align-items:center;gap:4px;margin:0 4px;display:inline-flex}.chip{border:1px solid var(--color-border);background:var(--color-bg);border-radius:999px;align-items:center;gap:4px;padding:1px 4px 1px 8px;font-size:.85rem;display:inline-flex}.chip button{margin:0;padding:0 6px;font-size:.75rem}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}[hidden]{display:none!important}