.app{flex-direction:column;gap:1rem;width:100%;display:flex}header h1{letter-spacing:-.01em;margin:0 0 .2rem;font-size:1.8rem;font-weight:600}header h1 .accent{color:var(--accent);font-style:italic}.tagline{color:var(--muted);margin:0 0 1rem;font-size:.9rem}.tagline a{color:var(--accent);text-decoration:none}.tagline a:hover{text-decoration:underline}main{flex-direction:column;gap:1rem;display:flex}.panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:6px;flex-direction:column;gap:.5rem;padding:.85rem 1rem;display:flex}.panel h2{letter-spacing:0;text-transform:none;color:var(--fg);margin:0 0 .2rem;font-size:.95rem;font-weight:600}.row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.row label{color:var(--fg);align-items:center;gap:.3rem;font-size:.9rem;display:inline-flex}.row input[type=number]{background:var(--bg);width:5.5em;color:var(--fg);border:1px solid var(--border);font:inherit;border-radius:4px;padding:.25rem .4rem}.row input[type=number]:focus{border-color:var(--accent);outline:none}.toolbar{align-items:center}button{background:var(--accent);color:#fff;cursor:pointer;font-weight:600;font:inherit;touch-action:manipulation;border:none;border-radius:4px;padding:.3rem .85rem;line-height:1.2}button:hover:not(:disabled){filter:brightness(1.05)}button:disabled{opacity:.5;cursor:wait}button.secondary{color:var(--accent);border:1px solid var(--accent);background:0 0;font-weight:500}button.secondary:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 10%, transparent);filter:none}.mode-toggle{background:var(--bg);border:1px solid var(--border);border-radius:4px;gap:2px;padding:2px;display:inline-flex}.mode-toggle button{color:var(--muted);background:0 0;border-radius:3px;padding:.25rem .7rem;font-size:.85rem;font-weight:500}.mode-toggle button:hover:not(.active){color:var(--fg);background:var(--pre-bg);filter:none}.mode-toggle button.active{background:var(--accent);color:#fff}.example-list{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.82rem;display:inline-flex}.link-btn{color:var(--accent);cursor:pointer;background:0 0;border:none;border-radius:3px;padding:.15rem .4rem;font-family:inherit;font-size:.82rem;font-weight:400}.link-btn:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 12%, transparent);filter:none}.link-btn.dice{color:var(--fg);border:1px solid var(--border);margin-left:.5rem;font-weight:500}.link-btn.dice:hover:not(:disabled){background:var(--pre-bg);border-color:var(--accent);color:var(--accent)}.link-btn.share-btn{border:1px solid var(--border);color:var(--fg);margin-left:auto;font-weight:500}.link-btn.share-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--pre-bg)}.code{background:var(--panel-bg);width:100%;color:var(--fg);border:1px solid var(--border);resize:vertical;white-space:pre;tab-size:1;border-radius:4px;padding:.6rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;overflow:auto}.code:focus{border-color:var(--accent);outline:none}.status{color:var(--muted);min-height:1.2em;font-size:.82rem}.status .error{color:#c92a2a}@media (prefers-color-scheme:dark){.status .error{color:#ff8a8a}}.hint{color:var(--muted);margin:0;font-size:.82rem;line-height:1.5}.visualizer{background:var(--pre-bg);border:1px solid var(--border);color:var(--fg);white-space:pre;border-radius:4px;min-height:1.5em;padding:.6rem .8rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;overflow-x:auto}.vis-row{flex-wrap:nowrap;min-height:1.5em;display:flex}.vis-cell{text-align:center;border-radius:2px;width:1ch;transition:background 80ms ease-out,color 80ms ease-out;display:inline-block}.vis-cell.active{color:#0a0e1a;font-weight:600;box-shadow:0 0 0 1px #0000001f}@media (prefers-color-scheme:dark){.vis-cell.active{color:#0a0e1a;box-shadow:0 0 0 1px #ffffff2e}}.debug-panel,.play-output{background:var(--pre-bg);border:1px solid var(--border);border-radius:4px;flex-direction:column;gap:.55rem;padding:.6rem .8rem;font-size:.85rem;display:flex}.debug-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem 1rem;display:grid}.field{flex-direction:column;gap:2px;display:flex}.field-label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.7rem;font-weight:500}.field-value{color:var(--fg);font-size:.9rem}.field code{background:var(--panel-bg);color:var(--accent);border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}.output{background:var(--panel-bg);border:1px solid var(--border);color:var(--fg);white-space:pre-wrap;word-break:break-all;border-radius:3px;max-height:8rem;margin:0;padding:.5rem .7rem;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;overflow:auto}.output.dim{color:var(--muted)}.gallery{flex-direction:column;gap:.4rem;margin:.2rem 0 0;padding:0;list-style:none;display:flex}.gallery-item{text-align:left;background:var(--panel-bg);width:100%;color:var(--fg);border:1px solid var(--border);cursor:pointer;border-radius:4px;grid-template-columns:1fr auto;grid-template-areas:"title bpm""intent intent";gap:.2rem 1rem;padding:.55rem .8rem;font-family:inherit;font-size:.9rem;font-weight:400;transition:border-color .15s,background .15s;display:grid}.gallery-item:hover:not(:disabled){border-color:var(--accent);background:var(--pre-bg);filter:none}.gallery-item:disabled{opacity:.5;cursor:not-allowed}.gallery-title{color:var(--fg);grid-area:title;font-weight:600}.gallery-bpm{color:var(--muted);font-variant-numeric:tabular-nums;grid-area:bpm;align-self:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem}.gallery-intent{color:var(--muted);grid-area:intent;font-size:.82rem;line-height:1.4}kbd,.key-hint{background:var(--panel-bg);color:var(--fg);border:1px solid var(--border);vertical-align:baseline;border-radius:3px;margin:0 1px;padding:2px 5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;font-weight:500;line-height:1;display:inline-block}button .key-hint{color:inherit;opacity:.9;background:#ffffff2e;border-color:#ffffff4d;margin-left:.4rem}button.secondary .key-hint{background:var(--bg);color:var(--accent);border-color:var(--accent)}footer{border-top:1px solid var(--border);color:var(--muted);margin-top:1.5rem;padding-top:1rem;font-size:.8rem}footer a{color:var(--muted);border-bottom:1px dashed var(--border);text-decoration:none}footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}footer .sep{color:var(--border);margin:0 .4rem}.panel a{color:var(--accent);text-decoration:none}.panel a:hover{text-decoration:underline}@media (width<=800px){.app,main{gap:.75rem}.panel{padding:.7rem .8rem}.row{gap:.45rem}.toolbar{padding:0}.code,.visualizer{font-size:16px}button{min-height:38px;padding:.4rem .85rem}.mode-toggle button{min-height:0;padding:.3rem .7rem}.link-btn{padding:.25rem .5rem}.gallery-item{padding:.6rem .75rem}.gallery-bpm{font-size:.74rem}header h1{font-size:1.5rem}footer{margin-top:1rem;padding-top:.75rem;font-size:.75rem}}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:#fafafa;--panel-bg:#fff;--fg:#222;--muted:#666;--accent:#2463eb;--border:#ddd;--pre-bg:#f4f4f4;font-synthesis:none;text-rendering:optimizelegibility;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--bg:#181818;--panel-bg:#202020;--fg:#eaeaea;--muted:#999;--accent:#7ea5ff;--border:#333;--pre-bg:#141414}}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);margin:0;min-width:320px;max-width:1100px;min-height:100vh;margin-inline:auto;padding:1rem 2rem 2rem}@media (width<=800px){body{padding:.75rem 1rem 1rem}}#root{flex-direction:column;display:flex}