:root{--color-play: #C8501A;--color-train: #4A8FA8;--color-timesig: #7A9E5A;--color-countin: #E8A020;--color-amber: #E8A020;--surface-panel: #F7F5F1;--surface-display: #EDEAE4;--surface-display-dark: #0D0D0B;--surface-stage: #E8E4DE;--border-panel: #E0DBD4;--border-display: #D0CBC4;--border-secondary: #D4CFC8;--text-primary: #1A1714;--text-secondary: #8A8078;--text-tertiary: #C4BFB8;--text-muted: #C8C3BC;--display-lit: rgba(240, 232, 210, .92);--display-unlit: rgba(240, 232, 210, .06);--display-dim: rgba(240, 232, 210, .55);--radius-panel: 18px;--radius-display: 8px;--radius-btn: 7px}.panel{background:#f0ede8;border-radius:18px;border:1px solid #DDD9D2;padding:20px 24px 26px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 1px #ffffffe6 inset,0 4px 12px #00000014,0 12px 32px #0000000f,0 32px 64px #0000000a;width:340px;height:506px;position:relative;transition:border-color .3s}.panel.train-mode{border-color:#9bb5c8}.topbar{width:100%;display:flex;align-items:center;justify-content:space-between}.wordmark{font-family:DM Sans,sans-serif;font-size:9px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:#c4bfb8}.beat-row{display:flex;gap:5px;align-items:center}.led{border-radius:50%;transition:background .04s,border-color .04s}.led.b1{width:10px;height:10px}.led.bn{width:8px;height:8px}.led.off-p{background:#d8d3cc;border:1px solid #C8C3BB}.led.on-p{background:#c8501a;border-color:#a03e12}.led.off-t{background:#c8d8e4;border:1px solid #A8C0CE}.led.on-t{background:#4a8fa8;border-color:#3a7a92}.led.ci{background:#e8a020;border-color:#c08010!important}.disp-outer{background:#e0ddd7;border-top:1px solid rgba(255,255,255,.6);border-left:1px solid rgba(255,255,255,.5);border-bottom:1px solid rgba(0,0,0,.12);border-right:1px solid rgba(0,0,0,.1);border-radius:8px;padding:2px;box-shadow:inset 0 3px 8px #00000040;width:100%}.disp-inner{background:var(--surface-display-dark);border-radius:6px;padding:11px 14px 13px;position:relative;overflow:hidden;height:90px;display:flex;flex-direction:column;justify-content:center}.badge-col{position:absolute;top:7px;right:10px;display:flex;flex-direction:column;align-items:center;gap:6px}.badge-ts{display:flex;flex-direction:column;align-items:center;line-height:1}.badge-ts .ts-n{font-family:DM Mono,monospace;font-size:11px;font-weight:500;color:#7a9e5a;line-height:1}.badge-ts .ts-line{width:14px;height:1px;background:#7a9e5a;opacity:.5;margin:1px 0}.badge-ts .ts-d{font-family:DM Mono,monospace;font-size:11px;font-weight:500;color:#7a9e5a;line-height:1}.badge-sound{display:flex;align-items:center;justify-content:center;width:14px;height:14px}.badge-ci{font-family:DM Sans,sans-serif;font-size:8px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#e8a020;opacity:0;transition:opacity .2s}.badge-ci.on{opacity:1}@keyframes soundRipple{0%{transform:scale(.5);opacity:.8}to{transform:scale(2.2);opacity:0}}@keyframes soundRippleSm{0%{transform:scale(.5);opacity:.5}to{transform:scale(1.6);opacity:0}}@keyframes clickPulse{0%{opacity:.5}40%{opacity:.9}to{opacity:0}}@keyframes clickPulseSm{0%{opacity:.3}40%{opacity:.6}to{opacity:0}}.disp-content{display:flex;align-items:center;gap:10px}.anim-area{font-family:DM Mono,monospace;font-size:13px;color:#a8a098;width:32px;text-align:center;flex-shrink:0;line-height:1.3;min-height:40px;display:flex;align-items:center;justify-content:center}.d-play{display:none;flex-direction:column;gap:1px}.d-play.active{display:flex}.bpm-row{display:flex;align-items:baseline;gap:8px}.bpm-big{font-family:DM Mono,monospace;font-size:52px;font-weight:300;color:#1a1714;letter-spacing:-2px;line-height:1;transition:color .2s}.bpm-big.stopped{color:#c0b8b0}.bpm-big.ci-glow{color:#e8a020}.bpm-unit{font-family:DM Sans,sans-serif;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#a8a098;margin-bottom:3px;align-self:flex-end}.d-train{display:none;flex-direction:column;gap:5px}.d-train.active{display:flex}.train-bpm{font-family:DM Mono,monospace;font-size:36px;font-weight:300;color:#1a1714;letter-spacing:-1px;line-height:1}.train-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.tr-arrow,.tr-val{font-family:DM Mono,monospace;font-size:12px;color:#4a8fa8}.tr-sep{font-family:DM Mono,monospace;font-size:10px;color:#c4bfb8}.tr-dim{font-family:DM Mono,monospace;font-size:12px;color:#8a8078}.d-idle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:58px}.d-idle.active{display:flex}.idle-char{font-family:DM Mono,monospace;font-size:14px;color:#b8b0a8;text-align:center;line-height:1.4;transition:opacity .3s}.prog-track{position:absolute;bottom:0;left:0;right:0;height:3px;background:transparent;border-radius:0 0 6px 6px;overflow:hidden}.prog-fill{height:100%;width:0%;border-radius:0 0 6px 6px;transition:width .5s;background:#4a8fa8}.mode-track{position:relative;width:130px;height:28px;border-radius:14px;background:#e8e4de;box-shadow:inset 0 2px 6px #0000002e,inset 0 1px 3px #0000001f;cursor:pointer;-webkit-user-select:none;user-select:none}.mode-pill{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:11px;background:#f7f5f1;box-shadow:0 2px 6px #00000026,0 1px 3px #0000001a;transition:left .22s cubic-bezier(.4,0,.2,1);pointer-events:none}.mode-pill.right{left:50%}.mode-labels{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;pointer-events:none}.mode-lbl{flex:1;display:flex;align-items:center;justify-content:center;font-family:DM Sans,sans-serif;font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a8a098;transition:color .2s;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;z-index:1}.mode-lbl.on-play{color:#c8501a}.mode-lbl.on-train{color:#4a8fa8}.btn-row{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 2px}.icon-btn{display:flex;align-items:center;justify-content:center;border-radius:7px;border:1px solid #CCC8C0;background:#f5f3ef;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .06s,box-shadow .06s;box-shadow:0 3px #c0bbb4,0 4px 8px #00000014}.icon-btn:active{transform:translateY(3px);box-shadow:0 0 #0000}.sound-icon-btn{width:38px;height:38px}.sound-label{font-family:DM Mono,monospace;font-size:8px;font-weight:500;color:#8a8078;letter-spacing:.05em}.ts-icon-btn{width:42px;height:38px;flex-direction:column;gap:0;padding:4px 8px}.ts-icon-btn .ts-num{font-family:DM Mono,monospace;font-weight:500;font-size:13px;color:#7a9e5a;line-height:1}.ts-icon-btn .ts-bar{width:20px;height:1px;background:#7a9e5a;opacity:.45;margin:1px 0}.ts-icon-btn:hover{background:#eef4e8;border-color:#b8d49a}.ci-icon-btn{width:38px;height:38px}.ci-inner{display:flex;flex-direction:column;align-items:center;gap:2px}.ci-arc{width:18px;height:9px;border:1.5px solid #C4BFB8;border-bottom:none;border-radius:9px 9px 0 0;transition:border-color .15s}.ci-bars{display:flex;gap:2px;align-items:flex-end}.ci-bar{width:3px;border-radius:1px;background:#c4bfb8;transition:background .15s}.ci-bar.b1{height:10px}.ci-bar.b2{height:7px}.ci-bar.b3{height:5px}.ci-bar.b4{height:7px}.ci-icon-btn.active{background:#fdf8ee;border-color:#f0c878}.ci-icon-btn.active .ci-arc{border-color:#e8a020}.ci-icon-btn.active .ci-bar{background:#e8a020}.divider{width:100%;height:1px;background:#ddd9d2}.knobs-row{display:flex;align-items:flex-end;justify-content:center;gap:22px;width:100%}.knob-unit{display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none;-webkit-user-select:none}.knob-val{font-family:DM Mono,monospace;font-size:10px;min-height:14px;text-align:center;transition:color .3s}.knob-label{font-family:DM Sans,sans-serif;font-size:7px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;transition:color .3s}.c-play{color:#c8501a}.c-play-dim{color:#8a8078}.c-play-lbl{color:#b8b0a8}.c-train{color:#4a8fa8}.c-train-lbl{color:#6aafc8}.knob-el{cursor:ns-resize;touch-action:none}@keyframes dp{0%{transform:scale(1)}40%{transform:scale(.953)}to{transform:scale(1)}}.dp{animation:dp .11s ease-out}.foot-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 2px}.footswitch{width:54px;height:54px;border-radius:50%;background:#f5f3ef;border:2px solid #CCC8C0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;transition:transform .06s,box-shadow .06s,border-color .1s;box-shadow:0 5px #b8b3ac,0 6px 12px #0000001f;-webkit-user-select:none;user-select:none}.footswitch:active,.footswitch.pressed{transform:translateY(3px);box-shadow:0 2px #b8b3ac,0 2px 4px #00000014}.footswitch.run-play{border-color:#c8501a}.footswitch.run-train{border-color:#4a8fa8}.footswitch.run-ci{border-color:#e8a020}.fs-dot{width:9px;height:9px;border-radius:50%;background:#c4bfb8;transition:background .2s}.footswitch.run-play .fs-dot{background:#c8501a}.footswitch.run-train .fs-dot{background:#4a8fa8}.footswitch.run-ci .fs-dot{background:#e8a020}.fs-lbl{font-family:DM Sans,sans-serif;font-size:7px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#b0a89e;transition:color .2s}.footswitch.run-play .fs-lbl,.footswitch.run-ci .fs-lbl{color:#c8501a}.footswitch.run-train .fs-lbl{color:#4a8fa8}.foot-hints{display:flex;flex-direction:column;gap:3px;align-items:flex-end}.foot-hint{font-family:DM Sans,sans-serif;font-size:8px;color:#c8c3bc}.foot-hint span{display:inline-block;border:1px solid #D8D3CC;border-radius:3px;padding:1px 5px;font-family:DM Mono,monospace;font-size:8px;color:#b8b0a8;margin-left:3px}.panel-screw{position:absolute;width:9px;height:9px;border-radius:50%;background:#d4d0c8;box-shadow:inset 0 1px 3px #0003,0 1px #ffffff8c}.panel-screw:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:5.5px;height:1px;background:#0003}.panel-screw.tl{top:10px;left:12px}.panel-screw.tr{top:10px;right:12px}.panel-screw.bl{bottom:10px;left:12px}.panel-screw.br{bottom:10px;right:12px}@tailwind base;@tailwind components;@tailwind utilities;*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--surface-stage);display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:DM Sans,sans-serif}