@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@500;600;700&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--cream-mist:#fff6f8;--lavender-mist:#f4eefb;--soft-white:#fffcf7;--glass-lavender:#f7f2fc;--lavender:#c8b6e2;--lavender-deep:#9b8bc4;--pink:#f7c8d8;--pink-deep:#f4a8c0;--mint:#b8e6d4;--mint-deep:#8fd4c0;--sky:#b8dced;--yellow:#fff0b8;--ink:#5a4a6b;--ink-soft:#9b8fa8;--soft-line:#e8def5;--font-round:"Baloo 2", "Quicksand", system-ui, "Hiragino Maru Gothic", "M PLUS Rounded 1c", sans-serif;--shadow-soft:0 6px 22px #9b8bc429, 0 2px 6px #9b8bc41a;--shadow-card:0 10px 30px #9b8bc424, inset 0 1px 0 #ffffffe6;--radius-card:22px;--radius-pill:999px}*{box-sizing:border-box;margin:0;padding:0}html,body{max-width:100%;min-height:100vh;overflow-x:clip}body{font-family:var(--font-round);color:var(--ink);background:radial-gradient(1200px 600px at 12% -5%, var(--lavender-mist) 0%, transparent 55%), radial-gradient(1000px 700px at 105% 110%, #fbeaf4 0%, transparent 50%), linear-gradient(160deg, var(--cream-mist) 0%, var(--lavender-mist) 100%);-webkit-font-smoothing:antialiased;background-attachment:fixed}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}button:focus-visible{outline:2px solid var(--lavender-deep);outline-offset:2px}.app{flex-direction:column;gap:10px;max-width:1320px;min-height:100vh;margin:0 auto;padding:12px clamp(12px,2vw,28px) 16px;display:flex}.topbar{box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(14px)saturate(150%);background:linear-gradient(135deg,#fffcf7e0 0%,#f7f2fce0 100%);border:1px solid #ffffffd9;border-radius:18px;justify-content:space-between;align-items:center;gap:14px;padding:8px 16px;display:flex}.topbar-left{align-items:center;gap:10px;display:flex}.topbar-mascot{filter:drop-shadow(0 2px 4px #9b8bc440)}.topbar-title{letter-spacing:.1em;color:var(--ink);background:linear-gradient(135deg, var(--lavender-deep), var(--pink-deep));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:800}.topbar-right{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.pill{font-family:var(--font-round);border-radius:var(--radius-pill);background:var(--soft-white);border:1.5px solid var(--soft-line);color:var(--ink);letter-spacing:.03em;white-space:nowrap;padding:6px 14px;font-size:12px;font-weight:700;transition:border-color .15s,background .15s,transform .12s}.pill:hover{border-color:var(--lavender);transform:translateY(-1px)}.pill-static{cursor:default}.pill-static:hover{border-color:var(--soft-line);transform:none}.pill-key{border-color:var(--lavender);background:linear-gradient(135deg,#c8b6e240 0%,#f7c8d840 100%);align-items:center;gap:6px;display:inline-flex}.pill-mode{letter-spacing:.06em;color:#fff;background:linear-gradient(135deg, var(--lavender-deep) 0%, var(--pink-deep) 100%);border-color:#0000;padding:6px 10px;font-size:11px;font-weight:800}.pill-mode:hover{filter:brightness(1.05);transform:translateY(-1px)}.pill-tag{letter-spacing:.1em;color:#fff;background:linear-gradient(135deg, var(--lavender-deep) 0%, var(--pink-deep) 100%);border-radius:999px;padding:2px 5px;font-size:8px;font-weight:800;line-height:1.2}.pill-main{letter-spacing:.02em;font-weight:700}.ready-badge{letter-spacing:.08em;border-radius:var(--radius-pill);border:1.5px solid var(--mint-deep);color:#5fae9a;background:#b8e6d480;align-items:center;gap:6px;padding:6px 12px;font-size:11px;font-weight:700;display:inline-flex}.ready-badge.live{border-color:var(--pink-deep);color:#d97a99;background:#f7c8d88c}.ready-dot{background:var(--mint-deep);border-radius:50%;width:8px;height:8px;animation:2s infinite pulseDot;box-shadow:0 0 #8fd4c099}.ready-badge.live .ready-dot{background:var(--pink-deep);animation:1s infinite pulseDot;box-shadow:0 0 #f4a8c0b3}@keyframes pulseDot{0%{box-shadow:0 0 #8fd4c099}70%{box-shadow:0 0 0 7px #8fd4c000}to{box-shadow:0 0 #8fd4c000}}.help-btn{background:var(--soft-white);border:1.5px solid var(--soft-line);width:34px;height:34px;color:var(--lavender-deep);border-radius:50%;place-items:center;transition:transform .15s,border-color .15s,color .15s;display:grid}.help-btn:hover{border-color:var(--lavender);color:var(--lavender);transform:scale(1.08)}.help-btn .ico-svg{width:18px;height:18px;display:block}.help-btn .ico-svg svg{width:100%;height:100%;display:block}.card{border-radius:var(--radius-card);box-shadow:var(--shadow-card);-webkit-backdrop-filter:blur(12px)saturate(140%);background:linear-gradient(150deg,#fffcf7eb 0%,#f7f2fce6 100%);border:1px solid #ffffffe6;min-width:0;padding:13px 16px}.card-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.card-title{letter-spacing:.12em;color:var(--ink-soft);font-size:11px;font-weight:700}.card-sub{color:var(--lavender-deep);font-size:12px;font-weight:700}.dir-group{background:var(--glass-lavender);border-radius:var(--radius-pill);border:1px solid var(--soft-line);gap:4px;padding:3px;transition:opacity .15s;display:inline-flex}.dir-group.dimmed{opacity:.5}.dir-btn{font-family:var(--font-round);letter-spacing:.04em;border-radius:var(--radius-pill);color:var(--ink-soft);padding:4px 10px;font-size:10px;font-weight:700;transition:all .14s}.dir-btn:hover:not(:disabled){color:var(--lavender-deep)}.dir-btn.active{background:var(--soft-white);color:var(--lavender-deep);box-shadow:0 2px 6px #9b8bc440}.dir-btn:disabled{cursor:not-allowed}.workspace{grid-template-columns:minmax(0,1fr) 274px;align-items:start;gap:10px;display:grid}.right-stack{flex-direction:column;gap:10px;display:flex}.card-performance{flex-direction:column;display:flex}.performance-body{flex:1;justify-content:center;align-items:center;gap:12px;display:flex}.wheel-stage{--wheel:min(300px, 40vh, 56vw);width:calc(var(--wheel) + 52px);aspect-ratio:1;flex-shrink:0;place-items:center;display:grid;position:relative}.deco{opacity:.85;pointer-events:none;filter:drop-shadow(0 1px 2px #9b8bc42e);position:absolute}.deco.d1{width:22px;top:4%;left:16%}.deco.d2{width:40px;top:2%;right:18%}.deco.d3{width:18px;top:26%;right:0%}.deco.d4{width:18px;bottom:20%;right:2%}.deco.d5{width:26px;bottom:4%;right:22%}.deco.d6{width:22px;bottom:6%;left:20%}.deco.d7{width:20px;top:30%;left:0%}.deco.d8{width:16px;top:50%;left:-2%}.wheel{width:var(--wheel);height:var(--wheel);--r:calc(var(--wheel) / 2 - 30px);position:relative}.wheel:before{content:"";width:calc(var(--r) * 2);height:calc(var(--r) * 2);pointer-events:none;background:radial-gradient(circle,#f7f2fc80 0%,#0000 70%);border:2px dashed #9b8bc466;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.wheel:after{content:"";width:calc(var(--r) * 2 + 18px);height:calc(var(--r) * 2 + 18px);pointer-events:none;border:1.5px solid #e8def5b3;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.note{border:2px solid var(--nb-border);background:var(--nb-bg);width:50px;height:50px;color:var(--ink);transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(var(--angle) * -1));border-radius:50%;flex-direction:column;justify-content:center;align-items:center;margin:-25px 0 0 -25px;font-size:14px;font-weight:700;transition:transform .14s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,filter .18s;display:flex;position:absolute;top:50%;left:50%;box-shadow:0 2px 6px #9b8bc42e,inset 0 1px #fff9}.note:hover{transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(var(--angle) * -1)) scale(1.12);filter:brightness(1.05)}.note.active{transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(var(--angle) * -1)) scale(1.18);box-shadow:0 0 0 4px #9b8bc459,0 6px 16px #9b8bc466}.note.selected{box-shadow:0 0 0 5px var(--lavender-deep), 0 0 22px #9b8bc473, inset 0 1px 0 #fff9}.note.selected.active{transform:rotate(var(--angle)) translateY(calc(var(--r) * -1)) rotate(calc(var(--angle) * -1)) scale(1.2)}.note-sharp{line-height:1}.note-flat{opacity:.55;margin-top:1px;font-size:9px;font-weight:500;line-height:1}.note.dim{opacity:.28;filter:saturate(.45)}.note.dim:hover{opacity:.6;filter:saturate(.7)}.note.dim.active,.note.dim.selected{opacity:.9;filter:saturate(.85)}.note-diatonic-dot{background:#fffffff2;border-radius:50%;width:5px;height:5px;position:absolute;bottom:5px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #9b8bc473,0 1px 2px #5a4a6b59}.note-tonic-badge{letter-spacing:.02em;color:#fff;z-index:2;background:linear-gradient(135deg,#f5c84a 0%,#e8a833 100%);border-radius:999px;padding:1px 6px;font-size:9px;font-weight:800;line-height:1.25;position:absolute;top:-9px;left:50%;transform:translate(-50%);box-shadow:0 1px 3px #e8a8338c}.note.tonic{border-color:#f5c84a;box-shadow:0 0 0 2px #f5c84a66,0 2px 6px #9b8bc42e,inset 0 1px #fff9}.waypoint{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);pointer-events:none;z-index:4;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;transition:transform .18s,box-shadow .18s,background .18s;position:absolute;box-shadow:0 2px 6px #9b8bc480}.waypoint.current{background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);animation:1.4s ease-in-out infinite wpPulse;transform:scale(1.5);box-shadow:0 0 0 4px #f4a8c066,0 4px 12px #f4a8c0b3}@keyframes wpPulse{0%,to{transform:scale(1.5)}50%{transform:scale(1.75)}}.playhead{background:radial-gradient(circle at 35% 30%, #fff, var(--pink-deep) 70%);pointer-events:none;z-index:5;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;transition:left linear,top linear;animation:1s ease-in-out infinite headBob;position:absolute;box-shadow:0 0 0 4px #f4a8c059,0 0 14px #f4a8c0e6}@keyframes headBob{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.wheel>.note{z-index:2}.wheel>.wheel-center{z-index:3}.center-roman.non-dia{color:var(--pink-deep);font-style:italic}.note-star{filter:drop-shadow(0 1px 2px #f5c84a99);animation:1.8s ease-in-out infinite twinkle;position:absolute;top:-10px;right:-8px}@keyframes twinkle{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.18)rotate(18deg)}}.wheel-center{aspect-ratio:1;background:radial-gradient(circle at 40% 35%, var(--soft-white) 0%, var(--glass-lavender) 100%);border:2px dashed var(--lavender);pointer-events:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:36%;padding:6px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #9b8bc433,inset 0 0 0 5px #fff9}.center-cat{filter:drop-shadow(0 2px 3px #9b8bc440)}.center-chord{color:var(--lavender-deep);font-size:clamp(15px,2.2vw,22px);font-weight:800;line-height:1.1}.center-roman{color:var(--ink-soft);font-size:12px;font-weight:600}.center-tones{color:var(--ink-soft);letter-spacing:.06em;font-size:11px;font-weight:600}.follow-panel{flex-direction:column;gap:8px;width:92px;display:flex}.follow-btn{font-family:var(--font-round);letter-spacing:.05em;background:var(--soft-white);border:1.5px solid var(--soft-line);color:var(--ink-soft);text-align:center;border-radius:14px;padding:10px 6px;font-size:10px;font-weight:700;transition:all .15s}.follow-btn:hover{border-color:var(--lavender);color:var(--lavender-deep)}.follow-btn.active{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);border-color:var(--lavender-deep);color:#fff;box-shadow:0 4px 12px #9b8bc466}.beat-indicator{justify-content:center;gap:8px;margin-top:10px;display:flex}.beat-dot{background:var(--soft-line);border-radius:50%;width:9px;height:9px;transition:all 80ms}.beat-dot.pulse{background:var(--lavender-deep);transform:scale(1.4)}.beat-dot.pulse.accent{background:var(--pink-deep);transform:scale(1.7);box-shadow:0 0 0 4px #f4a8c04d}.osc-body{flex-direction:column;gap:8px;display:flex}.osc-row{align-items:center;gap:10px;display:flex}.osc-label{color:var(--ink-soft);letter-spacing:.04em;width:58px;font-size:11px;font-weight:700}.wave-group{flex:1;gap:5px;display:flex}.wave-btn{background:var(--soft-white);border:1.5px solid var(--soft-line);height:28px;color:var(--ink-soft);border-radius:9px;flex:1;place-items:center;transition:all .14s;display:grid}.wave-btn:hover{border-color:var(--lavender);color:var(--lavender-deep)}.wave-btn.active{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);border-color:var(--lavender-deep);color:#fff;box-shadow:0 3px 10px #9b8bc459}.wave-ico{width:22px;height:15px;display:block}.wave-ico svg{width:100%;height:100%;display:block}.octave-group{align-items:center;gap:6px;display:flex}.step-btn{background:var(--soft-white);border:1.5px solid var(--soft-line);width:30px;height:30px;color:var(--lavender-deep);border-radius:9px;place-items:center;transition:all .14s;display:grid}.step-btn:hover{border-color:var(--lavender);transform:translateY(-1px)}.step-btn .ico-svg{width:18px;height:18px;display:block}.step-btn .ico-svg svg{width:100%;height:100%;display:block}.octave-val{text-align:center;min-width:26px;color:var(--ink);font-size:14px;font-weight:700}.osc-val{color:var(--lavender-deep);text-align:right;min-width:32px;margin-left:auto;font-size:12px;font-weight:700}.slider{appearance:none;border-radius:var(--radius-pill);background:linear-gradient(90deg, var(--lavender) 0%, var(--pink) 100%);outline:none;flex:1;height:8px}.slider::-webkit-slider-thumb{appearance:none;background:var(--thumb,var(--soft-white)) center / contain no-repeat;border:2px solid var(--soft-white);cursor:pointer;border-radius:50%;width:26px;height:26px;box-shadow:0 2px 6px #9b8bc466}.slider::-moz-range-thumb{background:var(--soft-white);border:2px solid var(--soft-white);cursor:pointer;border-radius:50%;width:26px;height:26px;box-shadow:0 2px 6px #9b8bc466}.chord-body{flex-direction:column;gap:8px;display:flex}.quality-group{flex-wrap:wrap;gap:5px;transition:opacity .15s;display:flex}.quality-group.dimmed{opacity:.5}.qbtn{font-family:var(--font-round);border-radius:var(--radius-pill);background:var(--soft-white);border:1.5px solid var(--soft-line);color:var(--ink);padding:5px 10px;font-size:12px;font-weight:700;transition:all .14s}.qbtn:hover:not(:disabled){border-color:var(--pink-deep);color:var(--pink-deep);transform:translateY(-1px)}.qbtn.active{background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);border-color:var(--pink-deep);color:#fff;box-shadow:0 3px 10px #f4a8c066}.qbtn-auto.active{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);border-color:var(--lavender-deep);box-shadow:0 3px 10px #9b8bc466}.qbtn:disabled{cursor:not-allowed}.voicing-label{letter-spacing:.1em;color:var(--ink-soft);margin-top:1px;font-size:10px;font-weight:700}.voicing-group{flex-wrap:wrap;gap:5px;display:flex}.vbtn{font-family:var(--font-round);border-radius:var(--radius-pill);background:var(--soft-white);border:1.5px solid var(--soft-line);color:var(--ink);padding:5px 10px;font-size:11px;font-weight:700;transition:all .14s}.vbtn:hover{border-color:var(--mint-deep);color:#5fae9a;transform:translateY(-1px)}.vbtn.active{background:linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);border-color:var(--mint-deep);color:#fff;box-shadow:0 3px 10px #8fd4c066}.feel-body{justify-content:space-around;gap:6px;padding:2px 0;display:flex}.knob-wrap{-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:3px;display:flex}.knob{cursor:ns-resize;touch-action:none;background:radial-gradient(circle at 32% 30%, #fff 0%, var(--glass-lavender) 60%, #ece2f7 100%);border:2px solid #fff;border-radius:50%;transition:box-shadow .15s;position:relative;box-shadow:0 4px 12px #9b8bc447,inset 0 1px #ffffffe6}.knob:hover{box-shadow:0 0 0 4px #9b8bc42e,0 4px 12px #9b8bc44d}.knob:focus-visible{outline:2px solid var(--knob-color,var(--lavender-deep));outline-offset:3px}.knob-ring{border:2px dashed color-mix(in srgb, var(--knob-color,var(--lavender-deep)) 40%, transparent);border-radius:50%;position:absolute;inset:-5px}.knob-cap{background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--knob-color,#9b8bc4) 35%, #fff), color-mix(in srgb, var(--knob-color,#9b8bc4) 12%, #fff));border:1.5px solid color-mix(in srgb, var(--knob-color,#9b8bc4) 50%, #fff);border-radius:50%;transition:transform 40ms linear;position:absolute;inset:7px}.knob-pointer{background:var(--knob-color,var(--lavender-deep));border-radius:2px;width:3px;height:14px;margin-left:-1.5px;position:absolute;top:4px;left:50%}.knob-label{color:var(--ink-soft);letter-spacing:.04em;font-size:10px;font-weight:700}.knob-value{color:var(--knob-color,var(--lavender-deep));font-variant-numeric:tabular-nums;font-size:11px;font-weight:700}.seq-actions{gap:6px;display:flex}.seq-action{color:var(--ink-soft);border-radius:var(--radius-pill);border:1.5px solid var(--soft-line);background:var(--soft-white);align-items:center;gap:4px;padding:3px 8px;font-size:11px;font-weight:700;transition:all .14s;display:inline-flex}.seq-action:hover{border-color:var(--pink-deep);color:var(--pink-deep)}.seq-integrated{margin-top:10px}.seq-subhead{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.seq-subtitle{letter-spacing:.12em;color:var(--ink-soft);font-size:11px;font-weight:700}.seq-tabs{flex-wrap:wrap;gap:6px;margin-bottom:10px;display:flex}.seq-tab{font-family:var(--font-round);border-radius:var(--radius-pill);background:var(--soft-white);border:1.5px solid var(--soft-line);color:var(--ink-soft);padding:6px 14px;font-size:12px;font-weight:700;transition:all .14s}.seq-tab:hover{border-color:var(--lavender);color:var(--lavender-deep)}.seq-tab.active{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);border-color:var(--lavender-deep);color:#fff;box-shadow:0 3px 10px #9b8bc459}.seq-cards{gap:10px;padding:10px 4px;display:flex;overflow-x:auto}.seq-cards::-webkit-scrollbar{height:6px}.seq-cards::-webkit-scrollbar-thumb{background:var(--lavender);border-radius:3px}.seq-card{background:linear-gradient(160deg, var(--card-bg,var(--soft-white)) 0%, color-mix(in srgb, var(--card-bg,var(--soft-white)) 70%, #fff) 100%);border:2px solid var(--card-border,var(--soft-line));border-radius:16px;flex-direction:column;flex:none;align-items:center;gap:3px;width:86px;padding:10px 8px;transition:transform .14s,box-shadow .14s;display:flex;box-shadow:0 3px 8px #9b8bc424}.seq-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px #9b8bc447}.seq-card.current{box-shadow:0 0 0 3px var(--pink-deep), 0 8px 20px #f4a8c073;animation:1.4s ease-in-out infinite cardGlow;transform:translateY(-4px)scale(1.06)}@keyframes cardGlow{0%,to{box-shadow:0 0 0 3px var(--pink-deep), 0 6px 16px #f4a8c066}50%{box-shadow:0 0 0 3px var(--pink-deep), 0 10px 24px #f4a8c0b3}}.seq-sticker{filter:drop-shadow(0 1px 2px #9b8bc440)}.seq-card-name{color:var(--ink);font-size:13px;font-weight:700;line-height:1.1}.seq-card-roman{color:var(--ink-soft);font-size:10px;font-weight:600}.seq-add{background:var(--soft-white);border:2px dashed var(--lavender);color:var(--lavender-deep)}.seq-add .add-ico{width:20px;height:20px}.seq-add .add-ico svg{width:100%;height:100%;display:block}.seq-add .seq-card-name{color:var(--lavender-deep)}.seq-empty{color:var(--ink-soft);padding:16px;font-size:13px}.card-transport{z-index:50;flex-wrap:wrap;align-items:center;gap:16px;display:flex;position:sticky;bottom:0}.card-transport .card-head{display:none}.transport-left{align-items:center;gap:10px;display:flex}.transport-play{background:linear-gradient(135deg, var(--lavender) 0%, var(--lavender-deep) 100%);border-radius:50%;place-items:center;width:56px;height:56px;transition:transform .14s;display:grid;box-shadow:0 6px 16px #9b8bc46b,inset 0 1px #ffffff80}.transport-play:hover{transform:scale(1.06)}.transport-play:active{transform:scale(.96)}.transport-play.on{background:linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%);box-shadow:0 6px 16px #f4a8c073,inset 0 1px #ffffff80}.transport-icon{background:var(--soft-white);border:1.5px solid var(--soft-line);width:52px;height:52px;color:var(--lavender-deep);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:1px;transition:all .14s;display:flex}.transport-icon .ico-svg{width:20px;height:20px;display:block}.transport-icon .ico-svg svg{width:100%;height:100%;display:block}.ti-label{color:var(--ink-soft);letter-spacing:.04em;font-size:9px;font-weight:700}.transport-icon:hover{border-color:var(--lavender);transform:translateY(-2px)}.transport-icon.active{background:linear-gradient(135deg, var(--mint) 0%, var(--mint-deep) 100%);border-color:var(--mint-deep);color:#fff;box-shadow:0 4px 12px #8fd4c066}.transport-icon.active .ti-label{color:#fff}.bpm-control{border-radius:var(--radius-pill);background:var(--soft-white);border:1.5px solid var(--soft-line);align-items:center;gap:6px;padding:4px 6px;display:flex}.bpm-arrow{width:26px;height:26px;color:var(--lavender-deep);background:var(--glass-lavender);border-radius:50%;font-size:16px;font-weight:800;transition:all .12s}.bpm-arrow:hover{background:var(--lavender);color:#fff}.bpm-val{text-align:center;min-width:36px;color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px;font-weight:800}.mixer{gap:14px;margin-left:auto;padding:0 6px;display:flex}.spectrum{background:var(--glass-lavender);border:1.5px solid var(--soft-line);border-radius:12px;width:140px;height:48px;padding:4px;overflow:hidden}.spectrum-canvas{width:100%;height:100%;display:block}.ico{display:block}.ico-svg{line-height:0;display:inline-block}.ico-svg svg{display:block}.guide-toggle{width:50px;height:50px;color:var(--lavender-deep);background:linear-gradient(135deg, var(--soft-white), var(--glass-lavender));border:1.5px solid var(--lavender);box-shadow:var(--shadow-soft);z-index:200;border-radius:50%;place-items:center;font-size:1.2rem;font-weight:800;transition:transform .18s;display:grid;position:fixed;bottom:18px;right:18px}.guide-toggle:hover{transform:scale(1.06)}.guide-toggle:active{transform:scale(.94)}.guide-toggle.open{background:var(--lavender);color:#fff}.guide-panel{z-index:199;pointer-events:none;border-left:1px solid var(--soft-line);background:linear-gradient(160deg,#fffcf7f7 0%,#f7f2fcf7 100%);border-radius:22px 0 0 22px;flex-direction:column;width:min(400px,92vw);height:100dvh;transition:transform .32s cubic-bezier(.32,.72,.16,1);display:flex;position:fixed;top:0;right:0;overflow:hidden;transform:translate(110%);box-shadow:-10px 0 40px #9b8bc433}.guide-panel.open{pointer-events:auto;transform:translate(0)}.guide-header{border-bottom:1px solid var(--soft-line);justify-content:space-between;align-items:center;padding:18px 20px 14px;display:flex}.guide-header h2{color:var(--ink);font-size:16px;font-weight:800}.guide-close{width:32px;height:32px;color:var(--ink-soft);background:var(--glass-lavender);border:1px solid var(--soft-line);border-radius:50%;font-size:1.2rem}.guide-close:hover{background:var(--lavender);color:#fff}.info-content{flex-direction:column;gap:20px;padding:16px 20px 24px;display:flex;overflow-y:auto}.info-content h3{letter-spacing:.1em;color:var(--lavender-deep);border-bottom:1px solid var(--soft-line);margin-bottom:8px;padding-bottom:6px;font-size:11px;font-weight:700}.info-content dt{color:var(--ink);margin-top:10px;font-size:13px;font-weight:700}.info-content dt:first-child{margin-top:0}.info-content dd{color:var(--ink-soft);margin-top:3px;font-size:12px;line-height:1.6}.info-content code{background:var(--glass-lavender);border-radius:5px;padding:1px 6px;font-size:11px}@media (width<=980px){.workspace{grid-template-columns:minmax(0,1fr)}.right-stack{flex-flow:wrap}.right-stack>.card{flex:240px;min-width:0}}@media (width<=720px){.app{gap:8px;padding:10px}.card{padding:12px}.card-transport{gap:10px}.mixer{gap:8px;margin-left:0}.transport-left{flex-wrap:wrap;gap:8px}.topbar{flex-wrap:wrap;gap:8px;padding:6px 10px}.topbar-title{font-size:15px}.performance-body{flex-flow:column wrap;width:100%}.follow-panel{flex-direction:row;width:auto;max-width:100%}.seq-card{width:80px}.knob{width:48px!important;height:48px!important}}@media (width<=460px){.app{gap:6px;padding:8px}.card{border-radius:16px;padding:10px}.note{width:46px;height:46px;margin:-23px 0 0 -23px;font-size:13px}.wheel-center{width:42%}.center-chord{font-size:16px}.wheel-stage{--wheel:min(240px, 44vh, 70vw);width:calc(var(--wheel) + 36px)}.knob{width:42px!important;height:42px!important}.knob-cap{inset:5px}.knob-pointer{height:11px;top:3px}.transport-play{width:48px;height:48px}.transport-icon{border-radius:13px;width:44px;height:44px}.seq-card{width:72px;padding:8px 6px}.seq-card-name{font-size:12px}.seq-sticker{width:26px!important;height:26px!important}.topbar-title{font-size:14px}}