:root{--bg-app: #14161c;--bg-panel: #1b1e26;--bg-panel-2: #21252f;--bg-elevated: #2a2f3b;--bg-input: #0f1116;--border: #2f343f;--border-strong: #3c4250;--text: #e7e9ef;--text-dim: #9aa1b2;--text-faint: #646b7d;--accent: #3fd0c9;--accent-strong: #2bb4ad;--accent-contrast: #06201f;--learn: #e0a44b;--danger: #e2607a;--scale-in: #3a6f6a;--chord-tone: #c9923f;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--radius: 6px;--radius-sm: 4px;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;--mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg-app);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}button{font:inherit;color:var(--text);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-3);cursor:pointer}button:hover{border-color:var(--accent-strong)}button:disabled{opacity:.4;cursor:not-allowed}button.is-active{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}input,select{font:inherit;color:var(--text);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-2)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}input[type=range]{accent-color:var(--accent);padding:0;background:transparent}.app-shell{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:220px 1fr 280px;grid-template-areas:"transport transport transport" "tracks    center     inspector" "mixer     mixer      mixer";height:100vh;width:100vw}.transport-bar{grid-area:transport;background:var(--bg-panel);border-bottom:1px solid var(--border)}.track-list{grid-area:tracks;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto}.center-pane{grid-area:center;display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden}.inspector-panel{grid-area:inspector;background:var(--bg-panel);border-left:1px solid var(--border);overflow-y:auto}.mixer-strip{grid-area:mixer;background:var(--bg-panel-2);border-top:1px solid var(--border);overflow-x:auto}.transport-bar__row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);flex-wrap:wrap}.transport-bar__title{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text);font-weight:600;min-width:160px}.transport-bar__title:hover,.transport-bar__title:focus{border-color:var(--border);background:var(--bg-input)}.field{display:inline-flex;align-items:center;gap:var(--sp-1)}.field>label{color:var(--text-dim);font-size:12px}.field input[type=number]{width:64px}.save-indicator{margin-left:auto;color:var(--text-faint);font-size:12px}.position-display{font-family:var(--mono);color:var(--accent);min-width:84px}.track-row{display:grid;grid-template-columns:18px 1fr;gap:var(--sp-2);align-items:center;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);cursor:pointer}.track-row.is-selected{background:var(--bg-panel-2)}.track-row__swatch{width:12px;height:12px;border-radius:3px}.track-row__name{font-weight:600}.track-row__type{color:var(--text-faint);font-size:11px;text-transform:uppercase;letter-spacing:.04em}.track-row__controls{grid-column:2;display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-1)}.track-row__controls input[type=range]{flex:1}.mini-btn{padding:1px 7px;font-size:11px;font-weight:700}.chord-lane{border-bottom:1px solid var(--border);background:var(--bg-panel-2);padding:var(--sp-2)}.chord-lane__header{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2);color:var(--text-dim);font-size:12px}.chord-lane__grid{position:relative;display:flex;height:56px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.chord-chip{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border-right:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;overflow:hidden}.chord-chip.is-selected{background:var(--accent-strong);color:var(--accent-contrast)}.chord-chip.is-selected .chord-chip__degree{color:var(--accent-contrast)}.editor-area{display:grid;grid-template-rows:auto 1fr;min-height:0;overflow:hidden}.editor-tabs{display:flex;gap:var(--sp-1);padding:var(--sp-2);border-bottom:1px solid var(--border)}.editor-body{overflow:auto;padding:var(--sp-3);min-height:0}.piano-roll{position:relative;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input)}.piano-roll__row{display:flex;align-items:center;height:14px;border-bottom:1px solid rgba(255,255,255,.03)}.piano-roll__row.is-scale-in{background:#3a6f6a2e}.piano-roll__row-label{width:44px;flex:0 0 44px;font-size:10px;color:var(--text-faint);padding-left:var(--sp-2);font-family:var(--mono)}.piano-roll__note{position:absolute;height:12px;background:var(--accent);border-radius:2px}.piano-roll__note.is-chord-tone{background:var(--chord-tone)}.empty-hint{color:var(--text-faint);font-size:12px;padding:var(--sp-3)}.drum-grid{display:inline-grid;gap:3px}.drum-grid__row{display:grid;grid-template-columns:64px repeat(var(--steps, 16),22px);gap:3px;align-items:center}.drum-grid__lane-label{font-size:11px;color:var(--text-dim);text-align:right;padding-right:var(--sp-2)}.drum-cell{width:22px;height:22px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);cursor:pointer;padding:0}.drum-cell.is-beat-start{border-color:var(--border-strong)}.drum-cell.is-on{background:var(--accent);border-color:var(--accent)}.arranger__row{display:flex;align-items:center;gap:var(--sp-2);height:28px;border-bottom:1px solid var(--border)}.arranger__name{width:80px;flex:0 0 80px;color:var(--text-dim);font-size:12px}.arranger__lane{position:relative;flex:1;height:22px;background:var(--bg-input);border-radius:var(--radius-sm)}.arranger__clip{position:absolute;top:2px;bottom:2px;background:var(--accent-strong);border-radius:2px;font-size:10px;color:var(--accent-contrast);padding:0 4px;overflow:hidden;white-space:nowrap}.panel-section{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}.panel-section__title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin:0 0 var(--sp-2)}.kv{display:flex;justify-content:space-between;gap:var(--sp-2);font-size:13px;padding:2px 0}.kv>span:first-child{color:var(--text-dim)}.tutorial-panel__body{color:var(--text-dim);font-size:13px}.badge{display:inline-block;font-size:10px;padding:1px 6px;border-radius:999px;background:var(--bg-elevated);color:var(--text-dim);border:1px solid var(--border)}.mixer-strip__row{display:flex;gap:var(--sp-2);padding:var(--sp-3);align-items:flex-end}.mixer-channel{display:flex;flex-direction:column;gap:var(--sp-1);width:96px;flex:0 0 96px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-2)}.mixer-channel__name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mixer-channel__buttons{display:flex;gap:var(--sp-1)}.mixer-channel__label{font-size:10px;color:var(--text-faint)}:root{--fn-tonic: #4f9d8a;--fn-subdom: #c2904a;--fn-dom: #b7585f;--fn-other: #6b7286;--warning: #d8743f;--chordtone-wash: rgba(201, 146, 63, .16);--scale-row: rgba(63, 208, 201, .07);--marquee: rgba(63, 208, 201, .18);--sec-intro: #4d7ea8;--sec-verse: #4f9d8a;--sec-prechorus: #8a78c0;--sec-chorus: #c75b86;--sec-bridge: #c2904a;--sec-outro: #5c6273}.right-tabs{display:flex;gap:var(--sp-1);padding:var(--sp-2);border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-panel);z-index:2}.right-tabs button{flex:1;font-size:12px;padding:var(--sp-1) var(--sp-1)}.right-tabs__body{min-height:0}.inspector-hints{margin:0;padding-left:var(--sp-4);color:var(--text-dim);font-size:12.5px;line-height:1.7}.chord-headline{font-size:22px;font-weight:700;color:var(--text);margin-bottom:var(--sp-2)}.inspector-explain{margin:var(--sp-2) 0 0;color:var(--text-dim);font-size:12.5px;line-height:1.6;background:var(--bg-panel-2);border-radius:var(--radius-sm);padding:var(--sp-2)}.inspector-next{margin-top:var(--sp-3);border-top:1px solid var(--border);padding-top:var(--sp-2)}.inspector-next__buttons{display:flex;flex-wrap:wrap;gap:var(--sp-1)}.inspector-next__btn{font-weight:700}.inspector-next__reason{margin:var(--sp-2) 0 0;font-size:11.5px;color:var(--text-faint);line-height:1.5}.chord-lane__count{color:var(--text-faint)}.chord-lane__grid{position:relative;height:56px;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-input);cursor:cell}.chord-lane__bar{position:absolute;top:0;bottom:0;width:1px;background:#ffffff0d}.chord-chip{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;border:none;border-left:3px solid var(--fn-other);border-right:1px solid var(--bg-app);background:var(--bg-elevated);cursor:grab;overflow:hidden;padding:0 var(--sp-2)}.chord-chip.is-fn-t{border-left-color:var(--fn-tonic)}.chord-chip.is-fn-sd{border-left-color:var(--fn-subdom)}.chord-chip.is-fn-d{border-left-color:var(--fn-dom)}.chord-chip.is-fn-other{border-left-color:var(--fn-other)}.chord-chip.is-selected{outline:2px solid var(--accent);outline-offset:-2px}.chord-chip__symbol{font-weight:700}.chord-chip__degree{font-size:11px;color:var(--text-dim)}.chord-chip__resize{position:absolute;top:0;right:0;bottom:0;width:7px;cursor:ew-resize}.chord-lane__templates{position:relative;margin-left:auto}.template-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;list-style:none;margin:0;padding:var(--sp-1);width:280px;max-height:320px;overflow-y:auto;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 8px 24px #0006}.template-menu li{margin:0}.template-menu button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;background:transparent;border:1px solid transparent;padding:var(--sp-2)}.template-menu button:hover{background:var(--bg-panel-2);border-color:var(--border)}.template-menu__name{font-weight:600}.template-menu__desc{font-size:11px;color:var(--text-faint);line-height:1.4}.chord-pop{position:absolute;z-index:30;margin-top:var(--sp-2);width:320px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:0 10px 28px #00000073;padding:var(--sp-3)}.chord-pop__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-2)}.chord-pop__close{padding:0 var(--sp-2);background:transparent;border:none;font-size:18px;line-height:1}.chord-pop__form{display:flex;gap:var(--sp-2)}.chord-pop__input{flex:1}.chord-pop__feedback{margin:var(--sp-2) 0;font-size:12px;line-height:1.4}.chord-pop__feedback.is-ok{color:var(--accent)}.chord-pop__feedback.is-warn{color:var(--warning)}.chord-pop__section{margin-top:var(--sp-2);border-top:1px solid var(--border);padding-top:var(--sp-2)}.chord-pop__label{margin:0 0 var(--sp-1);font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em}.chord-pop__palette{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1)}.chord-pop__chip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:var(--sp-1)}.chord-pop__chip-roman{font-size:11px;color:var(--text-dim)}.chord-pop__chip-sym{font-weight:700}.chord-pop__suggestions{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.chord-pop__suggestions li{display:flex;align-items:center;gap:var(--sp-2)}.chord-pop__suggestions li button{font-weight:700;min-width:56px}.chord-pop__reason{font-size:11px;color:var(--text-faint);line-height:1.4}.chord-pop__foot{margin-top:var(--sp-3)}.chord-pop__delete{width:100%;border-color:var(--danger);color:var(--danger)}.chord-pop__delete:hover{background:var(--danger);color:var(--bg-app)}.pr{display:flex;flex-direction:column;min-height:0;height:100%}.pr__toolbar{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-2);flex-wrap:wrap}.pr__field{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:12px;color:var(--text-dim)}.pr__zoom{display:inline-flex;align-items:center;gap:var(--sp-1)}.pr__zoom-val{font-family:var(--mono);font-size:12px;color:var(--text-dim);min-width:42px;text-align:center}.pr__hint{margin:0;font-size:11px;color:var(--text-faint);flex:1 1 100%}.pr__scroll{display:flex;overflow:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);min-height:0}.pr__keyboard{position:sticky;left:0;z-index:3;width:52px;flex:0 0 52px;background:var(--bg-panel-2);border-right:1px solid var(--border)}.pr__key{display:flex;align-items:center;border-bottom:1px solid rgba(255,255,255,.03)}.pr__key.is-scale{background:var(--scale-row)}.pr__key.is-c{background:var(--bg-elevated)}.pr__key-label{font-size:9px;font-family:var(--mono);color:var(--text-faint);padding-left:var(--sp-1)}.pr__grid{position:relative;flex:0 0 auto;cursor:crosshair}.pr__row{position:absolute;left:0;right:0}.pr__row.is-scale{background:var(--scale-row)}.pr__gridline{position:absolute;top:0;bottom:0;width:1px;background:#ffffff0a}.pr__gridline.is-bar{background:#ffffff1f}.pr__chordtone{position:absolute;background:var(--chordtone-wash);pointer-events:none}.pr__note{position:absolute;background:var(--accent);border-radius:2px;cursor:grab;box-shadow:inset 0 0 0 1px #00000040}.pr__note.is-selected{outline:2px solid var(--text);outline-offset:-1px;z-index:2}.pr__note.is-out{background:var(--warning)}.pr__note-resize{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:ew-resize}.pr__marquee{position:absolute;background:var(--marquee);border:1px solid var(--accent);pointer-events:none;z-index:4}.pr__velocity{display:flex;align-items:flex-end;gap:var(--sp-2);margin-top:var(--sp-2);overflow-x:auto}.pr__velocity-label{flex:0 0 44px;font-size:11px;color:var(--text-dim);padding-bottom:var(--sp-1)}.pr__velocity-lane{position:relative;flex:0 0 auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input)}.pr__velbar{position:absolute;width:6px;background:var(--accent-strong);border-radius:1px 1px 0 0;cursor:ns-resize}.pr__velbar.is-selected{background:var(--accent)}.assistant{display:flex;flex-direction:column}.assistant__modes{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1)}.assistant__mode{font-size:12px}.assistant__hint{margin:var(--sp-2) 0;font-size:11.5px;color:var(--text-faint);line-height:1.5}.assistant__generate{width:100%;background:var(--accent);color:var(--accent-contrast);border-color:var(--accent);font-weight:700}.assistant__reasons{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1);font-size:11.5px;color:var(--text-dim);line-height:1.5}.assistant__reasons li{padding:var(--sp-1) var(--sp-2);background:var(--bg-panel-2);border-radius:var(--radius-sm)}.assistant__melody-buttons{display:flex;gap:var(--sp-2)}.assistant__melody-buttons .assistant__generate{width:auto;flex:1}.assistant__review{margin-top:var(--sp-3)}.assistant__score{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--text-dim)}.assistant__score strong{font-size:24px;color:var(--accent)}.assistant__findings{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.assistant__finding{display:flex;gap:var(--sp-2);font-size:11.5px;line-height:1.5;padding:var(--sp-1) var(--sp-2);background:var(--bg-panel-2);border-radius:var(--radius-sm)}.assistant__finding-icon{flex:0 0 auto}.assistant__finding.is-info .assistant__finding-icon{color:var(--accent)}.assistant__finding.is-warn .assistant__finding-icon{color:var(--warning)}.arranger{display:flex;flex-direction:column;gap:var(--sp-2)}.arranger__toolbar{display:flex;align-items:center;gap:var(--sp-3)}.arranger__timeline{position:relative;height:72px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);overflow:hidden}.arranger__bar{position:absolute;top:0;bottom:0;width:1px;background:#ffffff0d}.arranger__bar-num{position:absolute;top:2px;left:3px;font-size:9px;color:var(--text-faint);font-family:var(--mono)}.arranger__section{position:absolute;top:18px;bottom:6px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;border:none;border-radius:var(--radius-sm);padding:0 var(--sp-2);color:#0d1014;overflow:hidden;text-align:left}.arranger__section.is-editing{outline:2px solid var(--text);outline-offset:1px}.arranger__section.is-intro{background:var(--sec-intro)}.arranger__section.is-verse{background:var(--sec-verse)}.arranger__section.is-preChorus{background:var(--sec-prechorus)}.arranger__section.is-chorus{background:var(--sec-chorus)}.arranger__section.is-bridge{background:var(--sec-bridge)}.arranger__section.is-outro{background:var(--sec-outro)}.arranger__section-name{font-weight:700;font-size:12px;white-space:nowrap}.arranger__section-type{font-size:10px;opacity:.85}.arranger__editor{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-3);background:var(--bg-panel-2)}.arranger__editor-row{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-2)}.arranger__editor-row label{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--text-dim);flex:1}.arranger__editor-row input[type=number]{width:72px}.arranger__editor-actions{display:flex;justify-content:space-between;gap:var(--sp-2)}.arranger__remove{border-color:var(--danger);color:var(--danger)}.drums{display:flex;flex-direction:column;gap:var(--sp-2)}.drums__toolbar{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}.drums__patterns,.drums__bars{display:flex;align-items:center;gap:var(--sp-1);flex-wrap:wrap}.drums__patterns-label,.drums__bars-label{font-size:11px;color:var(--text-faint)}.drums__patterns button,.drums__bars button{font-size:11px;padding:var(--sp-1) var(--sp-2)}.drum-cell.is-strong{background:var(--accent);border-color:var(--accent)}.drum-cell.is-medium{background:var(--accent-strong);border-color:var(--accent-strong);opacity:.85}.drum-cell.is-soft{background:var(--accent-strong);border-color:var(--accent-strong);opacity:.5}.drums__hint{margin:0;font-size:11px;color:var(--text-faint)}.mixer-strip{display:flex;align-items:stretch}.mixer-strip__row{display:flex;gap:var(--sp-2);padding:var(--sp-3);align-items:stretch;flex:1}.mixer-strip__master{display:flex;padding:var(--sp-3);border-left:1px solid var(--border-strong);background:var(--bg-panel)}.mix-ch{display:flex;flex-direction:column;gap:var(--sp-2);width:88px;flex:0 0 88px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-2)}.mix-ch.is-master{border-color:var(--accent-strong);width:104px;flex:0 0 104px}.mix-ch__head{display:flex;align-items:center;gap:var(--sp-1)}.mix-ch__dot{width:10px;height:10px;border-radius:3px;flex:0 0 10px}.mix-ch__name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mix-ch__fader{display:flex;flex-direction:column;gap:2px}.mix-ch__volume{width:100%}.mix-ch__db{font-family:var(--mono);font-size:10px;color:var(--text-dim);text-align:center}.mix-ch__pan{display:flex;flex-direction:column;gap:2px}.mix-ch__pan input{width:100%}.mix-ch__pan-label{font-family:var(--mono);font-size:10px;color:var(--text-faint);text-align:center}.mix-ch__buttons{display:flex;gap:var(--sp-1);justify-content:center}.mini-btn.is-mute{background:var(--danger);border-color:var(--danger);color:var(--bg-app)}.mini-btn.is-solo{background:var(--learn);border-color:var(--learn);color:var(--bg-app)}.toast-stack{position:fixed;right:var(--sp-4);bottom:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);z-index:100;max-width:360px}.toast{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--bg-elevated);border:1px solid var(--border-strong);border-left-width:3px;border-radius:var(--radius);box-shadow:0 6px 20px #0006;animation:toast-in .18s ease-out}.toast--success{border-left-color:var(--accent)}.toast--error{border-left-color:var(--danger)}.toast--info{border-left-color:var(--learn)}.toast__msg{flex:1;font-size:13px;line-height:1.45}.toast__close{background:transparent;border:none;color:var(--text-dim);padding:0 var(--sp-1);cursor:pointer;font-size:16px;line-height:1}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dialog-backdrop{position:fixed;inset:0;background:#08090c99;display:flex;align-items:center;justify-content:center;z-index:90;padding:var(--sp-5)}.dialog{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);width:100%;max-width:440px;max-height:86vh;display:flex;flex-direction:column;box-shadow:0 16px 48px #00000080}.dialog--wide{max-width:640px}.dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}.dialog__title{margin:0;font-size:15px;font-weight:600}.dialog__close{background:transparent;border:none;color:var(--text-dim);font-size:20px;line-height:1;cursor:pointer;padding:0 var(--sp-2)}.dialog__body{padding:var(--sp-4);overflow-y:auto}.export-menu{display:flex;flex-direction:column;gap:var(--sp-5)}.export-menu__group{display:flex;flex-direction:column;gap:var(--sp-2)}.export-menu__row{display:flex;gap:var(--sp-2);flex-wrap:wrap}.export-menu__hint{margin:0;font-size:12px;color:var(--text-dim)}.project-menu{display:flex;flex-direction:column;gap:var(--sp-4)}.project-menu__rename{display:flex;flex-direction:column;gap:var(--sp-1);font-size:12px;color:var(--text-dim)}.project-menu__rename input{background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);padding:var(--sp-2) var(--sp-3);font:inherit}.project-menu__tabs{display:flex;gap:var(--sp-1)}.project-menu__tabs button.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.project-menu__empty{color:var(--text-dim);font-size:13px;padding:var(--sp-4) 0;text-align:center}.template-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-3)}.template-card{display:flex;flex-direction:column;gap:var(--sp-1);text-align:left;align-items:stretch;padding:var(--sp-3);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer}.template-card:hover{border-color:var(--accent-strong)}.template-card--blank{border-style:dashed}.template-card__name{font-weight:600;font-size:14px}.template-card__desc{font-size:12px;color:var(--text-dim);line-height:1.4}.template-card__meta{font-size:11px;color:var(--text-faint);margin-top:auto}.saved-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.saved-item{display:flex;align-items:stretch;gap:var(--sp-2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.saved-item.is-active{border-color:var(--accent-strong)}.saved-item__main{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left;align-items:flex-start;background:var(--bg-panel-2);border:none;border-radius:0;padding:var(--sp-3);cursor:pointer}.saved-item__title{font-weight:600;font-size:13px}.saved-item__date{font-size:11px;color:var(--text-faint)}.saved-item__delete{border:none;border-radius:0;background:transparent;color:var(--danger);padding:0 var(--sp-3);cursor:pointer}.tutorial-panel{display:flex;flex-direction:column;gap:var(--sp-3)}.lesson-browser{display:flex;flex-direction:column;gap:var(--sp-4)}.course-card{display:flex;flex-direction:column;gap:var(--sp-2)}.course-card__title{margin:0;font-size:14px;font-weight:600}.course-card__desc{margin:0;font-size:12px;color:var(--text-dim);line-height:1.4}.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.lesson-card__btn{width:100%;display:flex;flex-direction:column;gap:var(--sp-1);text-align:left;align-items:stretch;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--sp-3);cursor:pointer}.lesson-card__btn:hover{border-color:var(--accent-strong)}.lesson-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.lesson-card__title{font-weight:600;font-size:13px}.lesson-card__desc{font-size:12px;color:var(--text-dim);line-height:1.4}.lesson-card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:11px;color:var(--text-faint)}.lesson-card__cta{color:var(--accent);font-weight:600}.lesson-status{font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid var(--border-strong);white-space:nowrap}.lesson-status--idle{color:var(--text-faint)}.lesson-status--inProgress{color:var(--learn);border-color:var(--learn)}.lesson-status--completed{color:var(--accent);border-color:var(--accent)}.lesson-runner{display:flex;flex-direction:column;gap:var(--sp-3)}.lesson-runner__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.lesson-runner__back{background:transparent;border:none;color:var(--accent);cursor:pointer;padding:0;font-size:12px}.lesson-runner__progress-text{font-size:11px;color:var(--text-dim)}.lesson-runner__progress{height:6px;background:var(--bg-input);border-radius:999px;overflow:hidden}.lesson-runner__progress-fill{height:100%;background:var(--accent);transition:width .2s ease}.lesson-runner__lesson-title{margin:0;font-size:13px;color:var(--text-dim)}.lesson-runner__step{display:flex;flex-direction:column;gap:var(--sp-3)}.lesson-runner__step-title{margin:0;font-size:15px;font-weight:600}.lesson-runner__block{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);background:var(--bg-panel-2);border-radius:var(--radius)}.lesson-runner__why{background:#e0a44b14}.lesson-runner__label{font-size:11px;font-weight:600;color:var(--text-faint)}.lesson-runner__block p{margin:0;font-size:13px;line-height:1.5}.lesson-runner__hints{display:flex;flex-direction:column;gap:var(--sp-2)}.lesson-runner__hint-btn{align-self:flex-start}.lesson-runner__hint{margin:0;font-size:12px;color:var(--learn);background:#e0a44b1a;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm)}.lesson-runner__done{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center;padding:var(--sp-5) 0}.lesson-runner__done-emoji{font-size:32px;margin:0}.exercise{display:flex;flex-direction:column;gap:var(--sp-2)}.exercise__q{margin:0;font-size:13px;font-weight:600}.exercise__sub{margin:0;font-size:11px;color:var(--text-faint)}.exercise__choices{display:flex;flex-direction:column;gap:var(--sp-1)}.exercise__choice{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;font-size:13px}.exercise__choice-btn{align-self:flex-start}.exercise__order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-1)}.exercise__order-item{font-size:13px;padding:var(--sp-1) var(--sp-3);background:var(--bg-panel-2);border-radius:var(--radius-sm)}.exercise__order-empty{font-size:12px;color:var(--text-faint)}.exercise__actions{display:flex;gap:var(--sp-2)}.exercise__submit{align-self:flex-start}.exercise__feedback{margin:0;font-size:12px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);line-height:1.45}.exercise__feedback.is-correct{color:var(--accent);background:#3fd0c91a}.exercise__feedback.is-wrong{color:var(--danger);background:#e2607a1a}.onboarding-backdrop{position:fixed;inset:0;background:#08090c8c;display:flex;align-items:center;justify-content:center;z-index:95;padding:var(--sp-5)}.onboarding{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius);max-width:420px;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);box-shadow:0 16px 48px #00000080}.onboarding__title{margin:0;font-size:17px}.onboarding__lead{margin:0;font-size:13px;color:var(--text-dim);line-height:1.5}.onboarding__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.onboarding__step{display:flex;gap:var(--sp-2);align-items:baseline;font-size:13px;line-height:1.45}.onboarding__step-n{color:var(--accent);font-weight:700}.onboarding__start{align-self:flex-end;background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);font-weight:600;padding:var(--sp-2) var(--sp-5)}