:root{--mbo-ink: #0a1230;--mbo-mid: #14193a;--mbo-flame: #f6c15e;--mbo-coral: #ff6b8a;--mbo-mint: #8aeac0;--mbo-sky: #7ac8ed;--mbo-mauve: #c9a8ef;--mbo-cream: #f4e7c8;--mbo-cream-dim: #b8aa84;--mbo-cream-dimmer: #6a6e8a}body:has(.mbo){background:radial-gradient(circle at 18% 5%,#14193a 0%,transparent 50%),radial-gradient(circle at 82% 95%,#2a1640 0%,transparent 55%),var(--mbo-ink);color:var(--mbo-cream);font-family:Inter,-apple-system,system-ui,sans-serif;min-height:100vh}.mbo{max-width:780px;margin:0 auto;padding:36px 24px 64px}.mbo__hero{margin-bottom:32px}.mbo__kicker{font-family:JetBrains Mono,ui-monospace,monospace;font-size:11px;letter-spacing:.18em;color:var(--mbo-mauve);text-transform:uppercase;margin:0 0 12px}.mbo__title{font-family:Inter Tight,sans-serif;font-weight:800;font-size:clamp(32px,5.5vw,52px);letter-spacing:-.025em;line-height:1.04;margin:0 0 16px}.mbo__sub{font-size:15px;line-height:1.55;color:var(--mbo-cream-dim);margin:0}.mbo__sub a{color:var(--mbo-mauve);text-decoration:underline;text-underline-offset:3px}.mbo__stage{background:#ffffff0a;border:1px solid rgba(244,231,200,.1);border-radius:18px;padding:22px;margin-bottom:36px}.mbo__banner{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 18px;background:#c9a8ef1a;border:1px solid rgba(201,168,239,.3);border-radius:10px}.mbo__banner-icon{font-size:22px}.mbo__banner-body{flex:1;display:flex;flex-direction:column}.mbo__banner-from{font-family:Inter Tight,sans-serif;font-weight:700;font-size:15px;color:var(--mbo-mauve)}.mbo__banner-meta{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.04em;color:var(--mbo-cream-dim);margin-top:2px}.mbo__banner-action{border:1px solid rgba(201,168,239,.6);background:#c9a8ef26;color:var(--mbo-mauve);padding:8px 14px;border-radius:6px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.mbo__banner-action:hover{background:#c9a8ef40}.mbo__roll-wrap{display:grid;grid-template-columns:1fr 50px;gap:10px;margin-bottom:18px}@media(max-width:560px){.mbo__roll-wrap{grid-template-columns:1fr 38px;gap:6px}}.mbo__roll{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(15,1fr);gap:2px;aspect-ratio:16 / 15;background:#0000004d;border-radius:8px;padding:4px}.mbo__roll-cell{background:#f4e7c80d;border:1px solid rgba(244,231,200,.1);border-radius:2px;cursor:pointer;min-width:0;min-height:0;padding:0;transition:background 80ms ease}.mbo__roll-cell:hover{background:#f4e7c824}.mbo__roll-cell--on{background:var(--cell-color, var(--mbo-mauve));border-color:var(--cell-color, var(--mbo-mauve));box-shadow:0 0 6px var(--cell-color, var(--mbo-mauve))}.mbo__roll-cell--oct-low.mbo__roll-cell--on{--cell-color: #ff8a70}.mbo__roll-cell--oct-mid.mbo__roll-cell--on{--cell-color: #c9a8ef}.mbo__roll-cell--oct-high.mbo__roll-cell--on{--cell-color: #8aeac0}.mbo__roll-cell--play{box-shadow:0 0 0 2px var(--mbo-cream);transform:scale(.92)}.mbo__roll-cell:nth-child(16n+5),.mbo__roll-cell:nth-child(16n+9),.mbo__roll-cell:nth-child(16n+13){box-shadow:inset 2px 0 #f4e7c814}.mbo__pitch-labels{display:grid;grid-template-rows:repeat(15,1fr);gap:2px;padding:4px 0}.mbo__pitch-label{display:flex;align-items:center;justify-content:flex-end;font-family:JetBrains Mono,monospace;font-size:9px;letter-spacing:.04em;color:var(--mbo-cream-dimmer);padding-right:4px}.mbo__pitch-label--high{color:#8aeac0}.mbo__pitch-label--mid{color:#c9a8ef}.mbo__pitch-label--low{color:#ff8a70}.mbo__transport{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.mbo__btn{border:1px solid rgba(244,231,200,.25);background:#f4e7c814;color:var(--mbo-cream);padding:10px 18px;border-radius:8px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}.mbo__btn:hover{background:#f4e7c829}.mbo__btn--play{background:#c9a8ef26;border-color:#c9a8ef73;color:var(--mbo-mauve)}.mbo__btn--play:hover{background:#c9a8ef40}.mbo__bpm-wrap{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}.mbo__bpm-label{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.12em;color:var(--mbo-cream-dim)}.mbo__bpm{flex:1;accent-color:var(--mbo-mauve);cursor:pointer}.mbo__bpm-readout{font-family:JetBrains Mono,monospace;font-size:13px;color:var(--mbo-mauve);min-width:32px;text-align:right}.mbo__actions{display:flex;flex-wrap:wrap;gap:10px}.mbo__action{flex:0 0 auto;border:1px solid rgba(244,231,200,.18);background:#f4e7c80f;color:var(--mbo-cream);padding:10px 16px;border-radius:8px;font-family:inherit;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}.mbo__action:hover{background:#f4e7c824;border-color:#f4e7c859}.mbo__action--primary{background:#ff6b8a26;border-color:#ff6b8a73;color:var(--mbo-coral)}.mbo__action--primary:hover{background:#ff6b8a40}.mbo__action--ghost{color:var(--mbo-cream-dim);background:transparent;border-color:#f4e7c81a}.mbo__notes{max-width:720px}.mbo__notes-h{font-family:Inter Tight,sans-serif;font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--mbo-cream);margin:0 0 12px}.mbo__notes p{font-size:14px;line-height:1.6;color:var(--mbo-cream-dim);margin:0 0 12px}.mbo__notes em{color:var(--mbo-mauve);font-style:italic}.mbo__notes strong{color:var(--mbo-cream);font-weight:600}.mbo__notes a{color:var(--mbo-coral);text-decoration:underline;text-underline-offset:3px}.mbo__notes code{font-family:JetBrains Mono,monospace;font-size:12px;padding:1px 6px;border-radius:4px;background:#f4e7c814;color:var(--mbo-mint)}.mbo__toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%) translateY(20px);background:#000000d9;color:var(--mbo-mauve);padding:10px 18px;border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;z-index:50;border:1px solid rgba(201,168,239,.4)}.mbo__toast--show{opacity:1;transform:translate(-50%) translateY(0)}