@font-face { font-family: 'VT323'; src: url('fonts/VT323-Regular.ttf') format('truetype'); }
:root { --bg: #888; --hi: #bbb; --lo: #555; --ink: #000; --blue: #00f; --fg: #fff; --row: 18px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--fg); font: 20px/1 'VT323', ui-monospace, monospace; }
button, input { font: inherit; }
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: #fff; color: #000; cursor: pointer; z-index: 10; }
.kick { text-align: center; }
.hand { width: 260px; height: 230px; margin: 0 auto 18px; display: grid; place-items: center; background: #fff; }
.disk { position: relative; width: 150px; height: 160px; background: #1b46c8; border: 4px solid #000; border-radius: 4px; }
.shutter { position: absolute; left: 34px; top: -4px; width: 70px; height: 52px; background: #bbb; border: 4px solid #000; }
.label { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 70px; background: #fff; border: 4px solid #000; display: grid; place-items: center; font-size: 22px; line-height: 1.1; }
.kickline { font-size: 26px; margin: 4px; }
.blink { font-size: 30px; color: #1b46c8; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.app { max-width: 980px; margin: 0 auto; padding: 6px; background: var(--bg); color: var(--ink); min-height: 100%; }
.panel { background: var(--bg); border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); padding: 4px; margin-bottom: 4px; }
button { background: var(--bg); color: var(--ink); border: 2px solid; border-color: var(--hi) var(--lo) var(--lo) var(--hi); padding: 2px 4px; cursor: pointer; }
button:active, button.on { border-color: var(--lo) var(--hi) var(--hi) var(--lo); background: #777; color: var(--fg); }
.top { display: grid; grid-template-columns: 1.15fr 1fr 1.25fr; gap: 4px; }
.top .panel { margin: 0; }
.box { display: grid; grid-template-columns: 1fr auto 26px 26px; gap: 3px; align-items: center; margin-bottom: 3px; }
.box b { background: #000; color: var(--fg); padding: 1px 6px; font-weight: normal; min-width: 52px; text-align: right; }
.box button { padding: 0; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; align-content: start; }
.samples .title { text-align: center; margin-bottom: 2px; }
.samples ol { list-style: none; margin: 0; padding: 0; background: #000; color: var(--fg); height: 178px; overflow: auto; }
.samples li { padding: 0 6px; cursor: pointer; white-space: pre; }
.samples li.sel { background: var(--blue); }
.scopes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.scope { position: relative; background: #000; border: 2px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); cursor: pointer; }
.scope canvas { display: block; width: 100%; height: 70px; image-rendering: pixelated; }
.scope .lbl { position: absolute; left: 4px; top: 2px; color: #8f8; font-size: 16px; }
.scope.muted canvas { opacity: .25; }
.scope.muted .lbl { color: #f55; }
.songname { display: flex; gap: 8px; align-items: center; }
.songname input { flex: 1; background: #000; color: var(--fg); border: 0; padding: 1px 6px; text-transform: uppercase; }
.status { background: #000; color: #8f8; padding: 1px 6px; min-width: 200px; }
.pattern { position: relative; height: calc(var(--row) * 19 + 12px); overflow: hidden; background: #000; }
.pattern .bar { position: absolute; left: 4px; right: 4px; top: calc(4px + var(--row) * 9); height: var(--row); background: #335; }
.app.editing .pattern .bar { background: #622; }
.grid { position: relative; margin: 0; color: #ddd; line-height: var(--row); font-size: 20px; transition: none; }
.grid .r { white-space: pre; }
.grid .rn { color: #ff8; }
.grid .cur { background: #bbb; color: #000; }
.grid .now { color: #fff; }
footer { text-align: center; margin-top: 6px; font-size: 18px; }
footer .hint { color: #333; }
.crt::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 120px rgba(0,0,0,.6); }
@media (max-width: 760px) {
  .top { grid-template-columns: 1fr 1fr; } .samples { grid-column: span 2; }
  .samples ol { height: 90px; } .grid { font-size: 14px; } :root { --row: 14px; } footer .hint { display: none; }
}
.dialog { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); width: 460px; z-index: 10; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 0 2px #000, 6px 6px 0 #0008; }
.dialog[hidden] { display: none; }
.dialog label { display: flex; flex-direction: column; gap: 3px; }
.dialog input { font: inherit; background: #000; color: #fff; border: 2px inset #888; padding: 2px 4px; }
.dialog .drop { background: #000; color: #4f4; border: 2px dashed #888; padding: 14px; text-align: center; cursor: pointer; }
.dialog .drop.over { border-color: #ff4; }
.dialog .row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.help pre { margin: 0; background: #000; color: #4f4; padding: 8px; white-space: pre; font: inherit; line-height: 1.15; }
.help { width: 520px; top: 12%; }