:root { color-scheme: dark; --bg:#09090d; --panel:#14141c; --line:#2a2a35; --muted:#8f8f9f; --ink:#f1eff6; --accent:#ec3c71; --mint:#6ee7d0; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.studio { width:min(100%, 760px); margin:0 auto; padding:max(12px, env(safe-area-inset-top)) 12px max(24px, env(safe-area-inset-bottom)); }
header { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 0 14px; }
#project-name { min-width:0; width:40%; border:0; outline:0; background:transparent; font:600 15px inherit; color:var(--ink); }
.transport { display:flex; align-items:center; justify-content:flex-end; gap:7px; }
button { border:1px solid var(--line); border-radius:8px; background:#20202a; color:var(--ink); padding:10px 12px; font:700 12px inherit; letter-spacing:.05em; min-height:40px; touch-action:manipulation; }
button:active { transform:scale(.97); } button.run { background:var(--accent); border-color:var(--accent); } button:hover { filter:brightness(1.12); }
.bpm { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:11px; font-weight:bold; }
.bpm input { width:54px; border:1px solid var(--line); border-radius:7px; background:#16161e; color:var(--ink); padding:9px 4px; text-align:center; font:700 13px inherit; }
.panel { margin-top:13px; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:11px; }
.panel-title { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; font-weight:bold; letter-spacing:.12em; margin-bottom:9px; }
.editor-wrap { display:flex; height:330px; overflow:hidden; border-radius:6px; background:#07070a; }
#line-numbers { flex:0 0 39px; margin:0; padding:11px 7px 18px 0; overflow:hidden; text-align:right; color:#565664; background:#101016; font:14px/20px inherit; user-select:none; }
#code { flex:1; min-width:0; resize:none; overflow:auto; border:0; outline:0; padding:11px 10px 24px; background:#07070a; color:var(--ink); font:14px/20px inherit; tab-size:2; caret-color:#fff; white-space:pre; }
.console { min-height:42px; white-space:pre-wrap; margin-top:13px; padding:11px; border-radius:8px; border:1px solid #22222d; background:#050508; color:var(--mint); font-size:12px; line-height:1.35; }
.console.error { color:#ff6b82; border-color:#542433; }
.visual-panel canvas { display:block; width:100%; height:80px; background:#09090e; border-radius:6px; }
#piano-scroll { overflow-x:auto; overflow-y:hidden; border-radius:6px; background:#09090e; -webkit-overflow-scrolling:touch; }
#piano-roll { min-width:100%; }
dialog { width:min(400px, calc(100% - 30px)); border:1px solid #363642; border-radius:12px; padding:13px; color:var(--ink); background:#13131a; box-shadow:0 20px 70px #000b; }
dialog::backdrop { background:#000a; }.dialog-title { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; font-weight:bold; letter-spacing:.1em; margin-bottom:12px; }.dialog-title button { padding:3px 8px; min-height:28px; font-size:17px; }
#preset-list { display:grid; gap:7px; } #preset-list button { width:100%; text-align:left; padding:13px; }
@media (max-width:480px) { .studio { padding-left:8px; padding-right:8px; } header { align-items:flex-start; flex-direction:column; } #project-name { width:100%; padding:6px 2px; } .transport { width:100%; justify-content:space-between; } button span { display:none; } button { min-width:40px; padding:10px; }.editor-wrap { height:300px; } }

.chords { margin-top:10px; padding:8px; border-top:1px solid var(--line); }
.chord-head { color:var(--muted); font-size:10px; font-weight:bold; letter-spacing:.1em; margin-bottom:7px; }
.chord-list { display:flex; flex-wrap:wrap; gap:7px; }
.chord-list button { min-width:58px; min-height:38px; padding:8px 10px; }
@media (max-width:480px) { .transport { flex-wrap:wrap; } .chords { padding-bottom:4px; } }

/* v4 mobile transport: always visible and touch-friendly */
@media (max-width:480px){
  header{gap:8px;}
  .transport{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));width:100%;gap:7px;}
  .transport button,.transport .bpm{min-width:0;width:100%;min-height:44px;}
  .transport .bpm{justify-content:center;}
  .transport .bpm input{width:58px;min-height:40px;}
  button span{display:inline;}
  #preset-button,#save{display:block;}
}
#piano-scroll{width:100%;max-width:100%;contain:layout paint;overscroll-behavior-x:contain;}
#piano-roll{display:block;height:170px!important;max-width:none!important;min-height:170px!important;aspect-ratio:auto!important;}

/* v5: dedicated mobile action row — always visible */
.mobile-actions{display:flex;gap:10px;margin-top:4px;}
.mobile-actions button{flex:1;min-height:48px;font-size:12px;background:#20202a;border:1px solid #3a3a48;color:var(--ink);border-radius:9px;touch-action:manipulation;}
.mobile-actions button:first-child{border-color:#6ee7d0;}
.mobile-actions button:last-child{border-color:#9d6cff;}
@media (min-width:481px){.mobile-actions{max-width:360px;}.mobile-actions button{min-height:42px;}}

/* v6: lock canvas display sizes so intrinsic canvas dimensions cannot resize the layout */
#scope{display:block;width:100%;height:80px!important;min-height:80px;max-height:80px;aspect-ratio:auto!important;}


/* v7: beginner-friendly live code suggestions */
.editor-wrap{position:relative;}
.code-suggestions{position:absolute;left:48px;right:10px;bottom:10px;z-index:5;display:none;max-height:190px;overflow:auto;border:1px solid #3a3a48;border-radius:9px;background:#15151d;box-shadow:0 12px 35px #0009;padding:5px;}
.code-suggestions.open{display:block;}
.code-suggestion{display:flex;width:100%;align-items:center;gap:9px;border:0;border-radius:6px;background:transparent;text-align:left;padding:9px 10px;color:var(--ink);font:12px/1.25 inherit;cursor:pointer;}
.code-suggestion:hover,.code-suggestion.active{background:#292934;}
.code-suggestion .hint{margin-left:auto;color:var(--muted);font-size:10px;}
.code-suggestion strong{font-weight:800;}
@media(max-width:480px){.code-suggestions{left:48px;right:8px;bottom:8px;max-height:170px;}.code-suggestion{min-height:40px;}}

/* Command help menu */
body.help-open{overflow:hidden}
.help-modal{position:fixed;inset:0;z-index:1000}
.help-modal[hidden]{display:none}
.help-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.help-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 24px));max-height:min(82vh,760px);display:flex;flex-direction:column;background:#15151c;border:1px solid #393948;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.55);overflow:hidden;color:var(--ink,#eee)}
.help-top{display:flex;align-items:flex-start;justify-content:space-between;padding:18px 18px 12px;border-bottom:1px solid #2d2d38}
.help-kicker{font-size:10px;letter-spacing:.16em;color:#9d6cff;margin-bottom:4px}
.help-top h2{margin:0;font-size:20px}
.help-top p{margin:5px 0 0;color:#9292a0;font-size:12px}
.help-close{border:0;background:transparent;color:#bbb;font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.help-search-wrap{padding:12px 18px}
#help-search{width:100%;box-sizing:border-box;background:#20202a;border:1px solid #3a3a48;border-radius:8px;color:#eee;padding:10px 12px;outline:none}
#help-search:focus{border-color:#9d6cff}
.help-list{overflow:auto;padding:0 18px 14px;display:grid;gap:12px}
.help-group{border:1px solid #2f2f3b;border-radius:10px;background:#1b1b23;overflow:hidden}
.help-group h3{font-size:12px;margin:0;padding:11px 12px;border-bottom:1px solid #2d2d38}
.help-command{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:0;border-bottom:1px solid #292933;background:transparent;color:#ddd;padding:10px 12px;cursor:pointer}
.help-command:last-child{border-bottom:0}
.help-command:hover,.help-command:focus{background:#242430;outline:none}
.help-command code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#6ee7d0;font-size:12px}
.help-command span{color:#8e8e9a;font-size:11px;text-align:right}
.help-note{padding:11px 12px;color:#9999a5;font-size:11px;line-height:1.5}
.help-note code{color:#6ee7d0}
.help-footer{padding:10px 18px;border-top:1px solid #2d2d38;color:#777785;font-size:10px}
@media (max-width:480px){
  .help-dialog{width:calc(100vw - 14px);max-height:88vh;border-radius:12px}
  .help-top{padding:14px}
  .help-list{padding:0 12px 12px}
  .help-command{align-items:flex-start;flex-direction:column;gap:4px}
  .help-command span{text-align:left}
  .help-footer{padding:9px 14px}
}

#help{min-width:40px;font-weight:700;font-size:16px;cursor:pointer;}