.mb-app{--mb-ink:#4a3522;--mb-accent:#c87a3a;--mb-paper:#fbf3e2;--mb-line:#c9b89a;--play-accent:#c87a3a;--play-ink:#4a3522;--play-paper:#fbf3e2;position:relative;overflow:hidden;touch-action:manipulation;-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;height:100dvh;background:#e7d8bf;color:var(--mb-ink)}.mb-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}.mb-app[data-step=punch] .mb-scene{opacity:0}.mb-app:not([data-step=punch]) .mb-punch-wrap{display:none}.mb-head{position:absolute;z-index:6;left:0;right:0;top:calc(env(safe-area-inset-top, 0px) + 8px);display:grid;grid-template-columns:44px 1fr 44px;align-items:center;grid-gap:8px;gap:8px;padding:0 12px;max-width:600px;margin:0 auto}.mb-icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:18px;background:rgba(74,53,34,.85);color:#fff;border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 0 rgba(30,20,10,.3);text-decoration:none}.mb-steps{display:flex;justify-content:center;gap:6px}.mb-step{background:rgba(251,243,226,.9);border:2px solid rgba(74,53,34,.2);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13px;color:var(--mb-ink);cursor:pointer}.mb-app[data-step=crank] #mb-step-crank,.mb-app[data-step=load] #mb-step-load,.mb-app[data-step=punch] #mb-step-punch{background:var(--mb-accent);color:#fff;border-color:var(--mb-accent)}.mb-punch-wrap{position:absolute;z-index:3;inset:0;top:calc(env(safe-area-inset-top, 0px) + 60px);bottom:86px;flex-direction:column;padding:0 10px;background:repeating-linear-gradient(90deg,transparent 0 39px,rgba(201,184,154,.25) 39px 40px),#efe3cb}.mb-punch-wrap,.mb-songbar{display:flex;align-items:center}.mb-songbar{gap:8px;margin-bottom:4px;flex-wrap:wrap;justify-content:center}.mb-songsel{display:flex;align-items:center;gap:4px;background:var(--mb-paper);border:2px solid rgba(74,53,34,.2);border-radius:999px;padding:4px 10px;font-weight:700}.mb-songsel select{border:none;background:none}.mb-pill,.mb-songsel select{font-weight:700;color:var(--mb-ink);font-size:14px}.mb-pill{background:var(--mb-paper);border:2px solid rgba(74,53,34,.25);border-radius:999px;padding:6px 14px;cursor:pointer}.mb-pill.mb-primary{background:var(--mb-accent);color:#fff;border-color:var(--mb-accent);box-shadow:0 3px 0 #a5602a}.mb-count{font-size:13px;font-weight:700;color:rgba(74,53,34,.7)}.mb-grid-hint{margin:2px 0 6px;font-size:12px;color:rgba(74,53,34,.65);text-align:center}.mb-grid{--mb-cols:15;width:100%;max-width:440px;flex:1 1;overflow-y:auto;border:3px solid rgba(74,53,34,.2);border-radius:12px;padding:6px;box-shadow:inset 0 2px 8px rgba(74,53,34,.08)}.mb-grid,.mb-note-head{background:var(--mb-paper)}.mb-note-head{display:grid;grid-template-columns:repeat(var(--mb-cols),1fr);grid-gap:2px;gap:2px;position:-webkit-sticky;position:sticky;top:0;padding-bottom:3px;z-index:1}.mb-note-label{text-align:center;font-size:10px;font-weight:700;color:rgba(74,53,34,.55)}.mb-note-label.mb-note-c{color:var(--mb-accent)}.mb-field{display:grid;grid-template-columns:repeat(var(--mb-cols),1fr);grid-gap:2px;gap:2px}.mb-cell{aspect-ratio:1;border:none;border-radius:50%;background:rgba(74,53,34,.06);cursor:pointer;padding:0;transition:transform .06s ease}.mb-cell:hover{background:rgba(200,122,58,.18)}.mb-cell.on{background:#4a3522;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}.mb-cell.play{background:var(--mb-accent);transform:scale(1.25)}.mb-dock{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);display:none;flex-direction:column;align-items:center;gap:8px;width:min(94%,460px)}.mb-dock.show{display:flex}.mb-dock-punch{flex-direction:row;justify-content:center}.mb-crank-tip,.mb-load-tip{background:rgba(74,53,34,.88);color:#fff;font-weight:700;font-size:13px;padding:6px 14px;border-radius:999px;text-align:center;margin:0}.mb-resonators{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.mb-res-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--mb-paper);border:2px solid rgba(74,53,34,.25);border-radius:12px;padding:6px 10px;cursor:pointer;min-width:62px}.mb-res-btn span{font-size:22px}.mb-res-btn b{font-size:11px;font-weight:700}.mb-res-btn.on{border-color:var(--mb-accent);background:#fff2e0;box-shadow:0 2px 0 rgba(200,122,58,.4)}.mb-load-row{display:flex;gap:10px}.mb-crank-pad{position:relative;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d9b98a,#b98a5a);border:4px solid #8a5a2a;box-shadow:0 4px 0 #7a4a1a,inset 0 2px 6px rgba(255,255,255,.3);cursor:-webkit-grab;cursor:grab;touch-action:none}.mb-crank-pad:active{cursor:-webkit-grabbing;cursor:grabbing}.mb-crank-arm{width:8px;height:46px;background:#7a4a1a;border-radius:4px;transform-origin:top center;transform:translate(-50%)}.mb-crank-arm,.mb-crank-knob{position:absolute;left:50%;top:50%}.mb-crank-knob{width:18px;height:18px;border-radius:50%;background:#5a3410;transform:translate(-50%,-50%)}