:root { --paper:#f4f1eb; --ink:#20201e; --muted:#8b8880; --line:#d9d5cc; --on:#f15e3c; --cursor:#41423e; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.app { width:min(940px,100%); height:100svh; margin:auto; padding:clamp(12px,3vh,34px) clamp(16px,5vw,44px) 12px; display:flex; flex-direction:column; overflow:hidden; }
.topbar { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:18px; }
.view-toggle { display:flex; gap:4px; }.view-toggle button { border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); padding:5px 8px; font:8px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; cursor:pointer; }.view-toggle button[aria-pressed="true"] { border-color:var(--ink); color:var(--ink); }
.title { margin:0; font-size:18px; letter-spacing:.14em; font-weight:700; }
.controls { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:clamp(12px,2.5vh,22px) 0; }
.control-group,.instrument-select { display:grid; grid-template-columns:22px 40px 22px; align-items:center; gap:3px; }
.control-label { grid-column:1/-1; color:var(--muted); font-size:9px; letter-spacing:.15em; margin-bottom:2px; }
.round-button { border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); width:22px; height:22px; font:16px/1 sans-serif; cursor:pointer; }
.round-button:hover,.round-button:focus-visible { border-color:var(--ink); outline:none; }
output { min-width:0; width:40px; text-align:center; font-size:12px; }
output small { display:none; }
.instrument-select { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:82px; }
.instrument-select select { height:22px; border:1px solid var(--line); border-radius:3px; background:transparent; padding:0 14px 0 5px; font:10px ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); cursor:pointer; }
.action-line { display:flex; align-items:flex-end; gap:7px; }
.action-button { display:grid; place-items:center; width:40px; height:40px; min-width:40px; min-height:40px; aspect-ratio:1 / 1; border:1px solid var(--ink); border-radius:9999px !important; background:var(--ink); color:var(--paper); padding:0; font:24px/1 sans-serif; cursor:pointer; overflow:hidden; }
.action-button:focus-visible { background:var(--on); border-color:var(--on); outline:none; }
@media (hover:hover) { .action-button:hover { background:var(--on); border-color:var(--on); } }
.move-button { font-size:11px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.move-button[data-move-count="1"] { margin-left:8px; }
.sequencer { position:relative; width:min(100%,calc(100svh - 160px)); margin:auto; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:clamp(8px,1.5vh,14px) 0; }
.cylinder-stage { position:relative; width:100%; aspect-ratio:1/1; perspective:900px; }
.grid { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); grid-template-rows:repeat(16,minmax(0,1fr)); aspect-ratio:1/1; position:relative; overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none; background:var(--line); gap:1px; border:1px solid var(--line); }
.cell { position:relative; min-width:0; min-height:0; border:0; background:var(--paper); padding:0; cursor:pointer; }
.cell::after { content:""; position:absolute; inset:28%; border-radius:50%; transform:scale(0); background:var(--on); transition:transform .09s ease; }
.cell.on::after { transform:scale(1); }
.cell:focus-visible { outline:2px solid var(--ink); outline-offset:-2px; z-index:3; }
.playhead { position:absolute; top:0; bottom:0; width:0; left:0; pointer-events:none; border-left:2px solid var(--cursor); z-index:5; transform:translateX(-1px); }
.grid.cylinder { display:block; overflow:visible; background:transparent; border:0; transform-style:preserve-3d; transform:rotateX(-14deg) rotateY(var(--cylinder-turn,0deg)); }
.grid.cylinder .cell { position:absolute; left:50%; top:var(--cylinder-top); width:42px; height:calc(100% / 16 - 1px); transform:translate(-50%,-50%) rotateY(var(--cylinder-angle)) translateZ(min(29vw,205px)); transform-style:preserve-3d; backface-visibility:hidden; border:1px solid var(--line); }
.grid.cylinder .cell.cylinder-hidden { visibility:hidden; pointer-events:none; }
.scale-label { position:absolute; right:0; font-size:8px; letter-spacing:.12em; color:var(--muted); }
.top-label { top:3px; }.bottom-label { bottom:3px; }
@media (max-width:580px) { .app{padding-top:12px}.topbar{padding-bottom:10px}.controls{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;padding:12px 0}.control-group{grid-template-columns:20px 36px 20px;gap:1px}.round-button{width:20px;height:20px;font-size:15px}output{width:36px;font-size:11px}.action-line{gap:4px}.instrument-select{width:76px}.instrument-select select{width:76px;height:20px;padding:0 10px 0 4px;font-size:9px}.action-button{width:36px;height:36px;min-width:36px;min-height:36px;font-size:22px}.move-button{font-size:10px}.move-button[data-move-count="1"]{margin-left:7px}.sequencer{width:min(100%,calc(100svh - 154px));padding:8px 0}.grid.cylinder .cell{width:28px;transform:translate(-50%,-50%) rotateY(var(--cylinder-angle)) translateZ(min(31vw,138px))}.scale-label{display:none}.cell::after{inset:24%} }
@media (max-width:420px) { .controls{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-start;gap:10px 8px}.action-line{width:100%;justify-content:flex-end} }
@media (prefers-reduced-motion:reduce) { .playhead,.cell::after { transition:none; } }