:root {
  --bg: #0c0e14;
  --panel: #171a23;
  --panel-2: #202532;
  --panel-3: #10131a;
  --text: #f7f8fc;
  --muted: #abb4c8;
  --accent: #9d8cff;
  --accent-2: #d0c7ff;
  --success: #63dda5;
  --warning: #ffc86a;
  --danger: #ff7c8d;
  --border: #313747;
  --shadow: 0 16px 48px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 92% -8%, rgba(108,76,255,.28), transparent 34%),
    radial-gradient(circle at 10% 24%, rgba(31,112,121,.18), transparent 30%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button, .button-like {
  border: 1px solid var(--border);
  background: #262b39;
  color: var(--text);
  padding: .7rem 1rem;
  border-radius: .82rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  transition: .14s ease;
}
button:hover, .button-like:hover { border-color: var(--accent); transform: translateY(-1px); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(157,140,255,.35); outline-offset: 2px; }
button:disabled, .disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
button.primary, .button-like.primary { background: var(--accent); color: #0d0f14; border-color: var(--accent); font-weight: 850; }
button.danger { border-color: rgba(255,124,141,.5); color: #ffdbe0; }
button.subtle { background: transparent; }
input, select, textarea {
  width: 100%;
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: .68rem;
  padding: .72rem .82rem;
}
textarea { resize: vertical; line-height: 1.58; }
label { display: grid; gap: .42rem; color: var(--muted); font-size: .9rem; }
.inline-label { display: inline-flex; grid-template-columns: auto 1fr; align-items: center; gap: .45rem; }
.inline-label input { width: auto; }
code { background: var(--panel-3); padding: .16rem .38rem; border-radius: .36rem; color: var(--accent-2); }
progress { width: 100%; height: .85rem; margin-top: .8rem; accent-color: var(--accent); }
.hidden { display: none !important; }

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.7rem clamp(1rem, 4vw, 4rem) 1rem;
  align-items: flex-start;
}
.brand { max-width: 850px; }
h1 { margin: .15rem 0 .35rem; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.045em; }
h2 { letter-spacing: -.025em; }
.eyebrow, .step { margin: 0; color: var(--accent-2); font-weight: 900; font-size: .75rem; letter-spacing: .145em; }
.subtitle, .muted, .status { color: var(--muted); }
.header-actions, .row { display: flex; gap: .65rem; align-items: center; }
.header-actions { justify-content: flex-end; flex-wrap: wrap; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: grid; gap: .72rem; }
.save-status { color: var(--muted); font-size: .84rem; padding: .35rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(0,0,0,.18); }
.save-status.saving { color: var(--warning); }
.save-status.saved { color: var(--success); }

.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  overflow-x: auto;
  gap: .4rem;
  padding: .72rem clamp(1rem, 4vw, 4rem);
  background: rgba(12,14,20,.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}
.tab { white-space: nowrap; border-radius: 999px; padding: .58rem .82rem; }
.tab.active { background: var(--accent); color: #10121a; border-color: var(--accent); font-weight: 850; }

main { padding: 1.25rem clamp(1rem, 4vw, 4rem) 4rem; }
.panel { display: none; }
.panel.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: .45; transform: translateY(3px); } }
.panel-heading { margin: .8rem 0 1.15rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.panel-heading h2 { margin: .22rem 0; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.panel-heading p:last-child { color: var(--muted); max-width: 900px; }
.grid { display: grid; gap: 1rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.026), transparent), var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .78rem; }
.form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.toolbar { display: flex; flex-wrap: wrap; gap: .52rem; margin: 1rem 0; }
.toolbar select { width: auto; min-width: 155px; }
.controls-row { margin-top: .9rem; }
.controls-row label { min-width: 130px; }
audio { width: 100%; }
.pill { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; padding: .32rem .68rem; color: var(--accent-2); background: rgba(157,140,255,.12); border: 1px solid rgba(157,140,255,.24); font-size: .84rem; }
.notice { border: 1px solid rgba(255,200,106,.45); background: rgba(255,200,106,.09); color: #ffe7bd; border-radius: .85rem; padding: .85rem 1rem; margin-bottom: 1rem; }

.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.project-card { min-height: 185px; display: grid; align-content: space-between; }
.project-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.project-title { margin: 0 0 .3rem; font-size: 1.2rem; }
.project-meta { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.project-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: 1rem; }
.project-actions button { flex: 1 1 auto; padding: .58rem .7rem; }

.waveform-card { overflow: hidden; }
.waveform-wrap { position: relative; margin-top: .8rem; min-height: 180px; border-radius: .8rem; border: 1px solid var(--border); background: #0e1118; overflow: hidden; }
#waveformCanvas { display: block; width: 100%; height: 180px; cursor: crosshair; }
.waveform-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 1rem; pointer-events: none; }
.timeline-list { display: grid; gap: .5rem; }
.timeline-item { display: grid; grid-template-columns: 85px 1fr auto; gap: .65rem; align-items: center; padding: .65rem .75rem; border-radius: .75rem; background: var(--panel-2); }
.timeline-time { color: var(--accent-2); font-variant-numeric: tabular-nums; font-weight: 800; }
.timeline-kind { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.timeline-item button { padding: .45rem .65rem; }

.song-preview { min-height: 530px; max-height: 700px; overflow: auto; padding: .45rem; }
.preview-section { margin: 1rem 0 .48rem; color: var(--accent-2); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.preview-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .13rem .25rem; margin-bottom: .62rem; line-height: 1.2; }
.word-stack { display: inline-grid; grid-template-rows: 1.38rem auto; align-items: end; }
.chord-chip { border: 0; padding: 0 .23rem; background: transparent; color: var(--accent-2); font-size: .82rem; font-weight: 900; justify-self: start; }
.chord-chip:hover { transform: none; text-decoration: underline; }
.lyric-token { padding: .12rem .23rem; border-radius: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .58rem; }
.chip { border-radius: 999px; }
.suggestion-list { display: grid; gap: .6rem; max-height: 420px; overflow: auto; }
.suggestion-row { display: grid; grid-template-columns: 82px 1fr; gap: .65rem; padding: .72rem; background: var(--panel-2); border-radius: .75rem; }
.suggestion-notes { color: var(--muted); font-size: .82rem; margin-bottom: .45rem; }
.suggestion-buttons { display: flex; gap: .4rem; flex-wrap: wrap; }
.suggestion-buttons button { padding: .48rem .65rem; }
.suggestion-buttons button.best { border-color: var(--success); }

.chord-display { display: grid; gap: .42rem; padding: 1.15rem; margin: 1rem 0; border-radius: 1rem; background: var(--panel-3); border: 1px solid var(--border); text-align: center; }
#chordNameLarge { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; }
#chordNotes { color: var(--muted); }
.inversion-grid { display: grid; gap: .65rem; }
.inversion-choice { text-align: left; justify-content: space-between; }
.inversion-choice strong { color: var(--accent-2); }
.theory-box { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1rem; margin-top: 1rem; padding: .85rem; border-radius: .78rem; background: var(--panel-3); }
.theory-box strong { color: var(--muted); }

.piano { position: relative; height: 230px; display: flex; user-select: none; margin: 1rem 0; overflow-x: auto; padding-bottom: .5rem; touch-action: none; }
.piano-key { position: relative; flex: 0 0 64px; border: 1px solid #3b4152; border-radius: 0 0 .55rem .55rem; display: flex; align-items: end; justify-content: center; padding-bottom: .65rem; cursor: pointer; }
.piano-key.white { background: linear-gradient(#fff, #d9dce4); color: #171a22; height: 210px; }
.piano-key.black { position: absolute; width: 40px; height: 130px; background: linear-gradient(#343a4a,#08090d); color: white; z-index: 2; border-radius: 0 0 .4rem .4rem; }
.piano-key.active { box-shadow: inset 0 0 0 4px var(--accent); }
#melodyRollCanvas { display: block; width: 100%; height: 280px; border: 1px solid var(--border); border-radius: .75rem; background: #0d1017; cursor: crosshair; }
#selectedNoteControls { margin-top: .75rem; }

.drum-pads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.drum-pad { min-height: 85px; font-size: .95rem; font-weight: 900; background: linear-gradient(145deg, #2e3445, #1c202d); }
.drum-pad:active, .drum-pad.flash { background: var(--accent); color: #0d0f14; }
.sequencer-card { overflow-x: auto; }
.sequencer { min-width: 1390px; display: grid; gap: .42rem; }
.seq-row { display: grid; grid-template-columns: 96px repeat(32, 1fr); gap: .22rem; align-items: center; }
.seq-label { color: var(--muted); font-weight: 800; position: sticky; left: 0; background: var(--panel); z-index: 2; padding-right: .4rem; }
.seq-step { aspect-ratio: 1; min-width: 28px; padding: 0; border-radius: .34rem; background: var(--panel-3); }
.seq-step:nth-of-type(9n+2), .seq-step:nth-of-type(9n+6) { border-left-color: var(--accent-2); }
.seq-step.on { background: var(--accent); border-color: var(--accent); }
.seq-step.accent { background: #d7d0ff; border-color: #d7d0ff; box-shadow: inset 0 0 0 3px #6651e4; }
.seq-step.playhead { box-shadow: 0 0 0 2px var(--success); }

.arrangement-summary { min-height: 175px; }
.arrangement-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.arrangement-part { background: var(--panel-2); border-radius: .72rem; padding: .7rem; }
.arrangement-part strong { display: block; color: var(--accent-2); margin-bottom: .28rem; }
.next-stage { border-left: 4px solid var(--accent); margin-top: 1rem; }
footer { border-top: 1px solid var(--border); padding: 1rem clamp(1rem, 4vw, 4rem) 2rem; color: var(--muted); }
#toast { position: fixed; right: 1rem; bottom: 1rem; background: #f6f7fb; color: #0d0f14; padding: .8rem 1rem; border-radius: .72rem; opacity: 0; transform: translateY(8px); transition: .18s; pointer-events: none; z-index: 100; font-weight: 850; max-width: min(420px, calc(100vw - 2rem)); }
#toast.show { opacity: 1; transform: translateY(0); }

dialog { border: 1px solid var(--border); border-radius: 1rem; padding: 0; background: transparent; color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.dialog-card { min-width: min(420px, calc(100vw - 2rem)); background: var(--panel); padding: 1.2rem; border-radius: 1rem; }

@media (max-width: 1020px) {
  .form-grid.four { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .app-header, .panel-heading { flex-direction: column; align-items: stretch; }
  .grid.two, .song-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .song-preview { min-height: 320px; }
  .timeline-item { grid-template-columns: 72px 1fr; }
  .timeline-item .row { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .app-header { padding-top: 1.15rem; }
  .header-actions { justify-content: flex-start; }
  .header-actions > * { flex: 1 1 auto; }
  .form-grid.four { grid-template-columns: 1fr; }
  .drum-pads { grid-template-columns: repeat(2, 1fr); }
  .card { padding: .88rem; }
}

/* Version 3 definitive personal-edition additions */
.library-tools{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin-bottom:18px}.compact-card{padding:16px}.grow{flex:1 1 240px}.hidden{display:none!important}.estimate-box{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.035);line-height:1.7}.big-tap{min-width:120px;min-height:48px}.mixer-grid{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:14px;margin:16px 0}.mixer-grid label{display:grid;grid-template-columns:70px 1fr 44px;align-items:center;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}.mixer-grid input{width:100%}.readiness-card{margin-top:18px}.readiness-bar{height:13px;background:#252a39;border-radius:999px;overflow:hidden;margin:10px 0 16px}.readiness-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#9d8cff,#63dda5);transition:width .25s ease}.checklist{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:8px}.check-item{display:grid;grid-template-columns:24px 1fr 30px;gap:8px;align-items:center;padding:9px 11px;border:1px solid var(--border);border-radius:10px;color:var(--muted)}.check-item.done{color:var(--text);border-color:rgba(99,221,165,.45);background:rgba(99,221,165,.06)}.help-dialog-card{width:min(760px,92vw)}.help-steps{display:grid;gap:12px;padding-left:24px;line-height:1.55}.tour-card{width:min(600px,92vw)}.tour-card p:not(.step){font-size:1.08rem;line-height:1.65}.flash{transform:translateY(2px);filter:brightness(1.35)}
@media(max-width:900px){.mixer-grid{grid-template-columns:1fr 1fr}.checklist{grid-template-columns:1fr}}
@media(max-width:620px){.mixer-grid{grid-template-columns:1fr}.library-tools>*{width:100%}.header-actions{gap:6px}.header-actions button,.header-actions .button-like{font-size:.8rem;padding:9px}.check-item{grid-template-columns:22px 1fr 26px}}
@media print{.app-header,.tabs,footer,button,.button-like{display:none!important}.panel{display:none!important}.panel.active{display:block!important}.card{box-shadow:none;border:0}.song-preview{color:#111;background:#fff}}
.check-detail{display:block;color:var(--muted);font-size:.78rem;margin-top:2px;font-weight:400}

/* Version 4 actual-100 additions */
.vocal-cleanup-box{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:12px;margin:14px 0;padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
.vocal-cleanup-box>label:not(.inline-label){display:grid;grid-template-columns:130px 1fr 58px;gap:8px;align-items:center}.vocal-cleanup-box p{grid-column:1/-1;margin:0}.version-list{display:grid;gap:10px;margin-top:14px;max-height:55vh;overflow:auto}.version-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2)}.version-item small{display:block;color:var(--muted);margin-top:3px}.version-item .row{justify-content:flex-end}.history-flash{animation:historyFlash .35s ease}@keyframes historyFlash{0%{box-shadow:0 0 0 0 rgba(99,221,165,.7)}100%{box-shadow:0 0 0 8px rgba(99,221,165,0)}}
@media(max-width:700px){.vocal-cleanup-box{grid-template-columns:1fr}.vocal-cleanup-box>label:not(.inline-label){grid-template-columns:110px 1fr 54px}}


/* v4.2 iPhone tap-tempo fix */
.tap-tempo-zone{width:100%;margin:12px 0 14px}
.big-tap{
  width:100%;min-width:0;min-height:88px;padding:16px 20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:18px;line-height:1.15;border-radius:16px;
  touch-action:manipulation;-ms-touch-action:manipulation;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:contain;
}
.big-tap .tap-main{font-size:1.35rem;font-weight:800;letter-spacing:.04em}
.big-tap .tap-sub{font-size:.88rem;font-weight:500;opacity:.82}
.big-tap:active,.big-tap.tap-active{transform:scale(.985);filter:brightness(1.18)}
@media(max-width:700px){.big-tap{min-height:104px;font-size:20px}.big-tap .tap-main{font-size:1.55rem}}


/* Version 4.3 phone workflow, library, recording and automatic-chord fixes */
.project-list{display:grid;gap:8px}.library-list-heading{display:grid;grid-template-columns:30px minmax(170px,1.2fr) minmax(230px,1.4fr) minmax(220px,.8fr);gap:12px;padding:0 14px 7px;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}.project-row{display:grid;grid-template-columns:30px minmax(170px,1.2fr) minmax(230px,1.4fr) minmax(220px,.8fr);gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel);transition:.15s}.project-row:hover{border-color:#596177}.project-row.current{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}.project-row.selected{background:rgba(157,140,255,.08)}.project-select{width:19px;height:19px;accent-color:var(--accent)}.project-open-title{display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;border:0;padding:4px;text-align:left;color:var(--text)}.project-open-title:hover{transform:none;text-decoration:underline}.project-current-badge{font-size:.7rem;color:var(--accent-2);white-space:nowrap}.project-meta{display:flex;flex-wrap:wrap;gap:5px 12px;color:var(--muted);font-size:.84rem}.project-meta span{white-space:nowrap}.project-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin:0}.project-actions button{flex:0 1 auto}.library-selection-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}.library-selection-bar .pill{margin-right:auto}
.recording-status.recording{color:#ff8585;font-weight:800}.record-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4f5e;margin-right:6px;box-shadow:0 0 0 0 rgba(255,79,94,.65);animation:recordPulse 1.2s infinite}@keyframes recordPulse{70%{box-shadow:0 0 0 7px rgba(255,79,94,0)}100%{box-shadow:0 0 0 0 rgba(255,79,94,0)}}.audio-attachment-details{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:12px 0}.audio-attachment-details label{flex:1 1 190px}.audio-scrub-row{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;margin-top:10px;font-variant-numeric:tabular-nums}.audio-scrub-row input{width:100%;accent-color:var(--accent);touch-action:pan-x}.compact-note{margin:.35rem 0 .8rem;font-size:.83rem}#waveformCanvas{touch-action:none;cursor:ew-resize}.key-context{padding:9px 11px;border-radius:9px;background:rgba(99,221,165,.08);border:1px solid rgba(99,221,165,.28)}.manual-chord-details{margin-top:12px}.manual-chord-details summary{cursor:pointer;color:var(--muted)}.details-row{margin-top:10px}.timeline-reason{display:block;color:var(--muted);margin-top:4px;line-height:1.35}.timeline-chord-audition{cursor:pointer;color:var(--accent-2)}.timeline-chord-audition:hover{text-decoration:underline}
@media(max-width:900px){.library-list-heading{display:none}.project-row{grid-template-columns:28px 1fr}.project-row .project-meta,.project-row .project-actions{grid-column:2}.project-actions{justify-content:flex-start}.project-meta span{white-space:normal}}
@media(max-width:560px){.library-selection-bar>*{flex:1 1 auto}.library-selection-bar .inline-label{flex-basis:100%}.audio-scrub-row{grid-template-columns:40px 1fr 40px}.project-row{padding:11px 9px}.project-actions button{padding:.5rem .6rem}.audio-attachment-details>*{width:100%}}

/* =========================================================
   VERSION 4.4 — MOBILE-FIRST UI / USABILITY REDESIGN
   ========================================================= */
:root{
  --surface-glass:rgba(18,21,30,.94);
  --accent-soft:rgba(157,140,255,.14);
  --accent-glow:0 0 0 1px rgba(157,140,255,.28),0 18px 48px rgba(0,0,0,.28);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}
body{padding-bottom:84px}
.v44-header{
  padding:1.15rem clamp(1rem,4vw,3.5rem);
  align-items:center;
  background:linear-gradient(180deg,rgba(20,23,33,.98),rgba(12,14,20,.9));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-topline{display:flex;align-items:center;gap:.9rem}
.app-mark{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--accent),#6c5ee8);color:#10121a;font-size:1.55rem;font-weight:950;box-shadow:0 12px 28px rgba(108,94,232,.28)}
.brand-copy{min-width:0}.brand-title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.brand-title-row h1{font-size:clamp(1.35rem,3vw,2.2rem);margin:0;letter-spacing:-.035em}.brand-copy .subtitle{margin:.28rem 0 0;max-width:720px;font-size:.94rem}
.version-badge{display:inline-flex;align-items:center;min-height:30px;padding:.34rem .68rem;border-radius:999px;background:linear-gradient(135deg,var(--accent),#c8bfff);color:#11131a;font-weight:950;font-size:.76rem;letter-spacing:.07em;box-shadow:0 8px 22px rgba(157,140,255,.24)}
.header-command-bar{display:flex;align-items:center;justify-content:flex-end;gap:.48rem;flex-wrap:wrap}
.header-command-bar button,.more-menu summary{min-height:42px}
.icon-button{padding:.62rem .8rem}.header-new{font-weight:800}.header-save{min-width:82px}
.more-menu{position:relative}.more-menu summary{list-style:none;border:1px solid var(--border);background:#262b39;color:var(--text);padding:.62rem .85rem;border-radius:.82rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.35rem;font-weight:750}.more-menu summary::-webkit-details-marker{display:none}.more-menu[open] summary{border-color:var(--accent);background:var(--accent-soft)}
.more-menu-panel{position:absolute;right:0;top:calc(100% + .55rem);z-index:80;display:grid;gap:.45rem;width:min(290px,88vw);padding:.7rem;border:1px solid var(--border);border-radius:1rem;background:var(--surface-glass);backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.48)}.more-menu-panel>*{width:100%;justify-content:flex-start}.more-menu-panel input{display:none}
.tabs{top:0;padding:.55rem clamp(1rem,4vw,3.5rem);gap:.45rem;background:rgba(10,12,18,.94)}
.tab{display:flex;align-items:center;gap:.55rem;border-radius:.86rem;padding:.52rem .68rem;min-width:max-content}.tab-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:.62rem;background:rgba(255,255,255,.055);font-size:1rem}.tab-label{display:grid;text-align:left;line-height:1.1}.tab-label strong{font-size:.87rem}.tab-label small{color:var(--muted);font-size:.68rem;margin-top:.16rem}.tab.active .tab-icon{background:rgba(16,18,26,.16)}.tab.active .tab-label small{color:#28223f}
.workflow-bar{position:sticky;top:61px;z-index:18;display:grid;grid-template-columns:minmax(220px,1fr) minmax(170px,460px) auto;align-items:center;gap:1rem;padding:.62rem clamp(1rem,4vw,3.5rem);background:rgba(15,18,26,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(15px)}.workflow-copy{display:grid;grid-template-columns:auto 1fr;gap:.1rem .55rem;align-items:baseline}.workflow-copy span{color:var(--accent-2);font-size:.73rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.workflow-copy strong{font-size:.92rem}.workflow-copy small{grid-column:1/-1;color:var(--muted)}.workflow-track{height:7px;border-radius:99px;background:#292e3b;overflow:hidden}.workflow-track span{display:block;height:100%;width:12.5%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#63dda5);transition:width .24s ease}.compact-mode{padding:.48rem .68rem;font-size:.76rem;white-space:nowrap}
main{max-width:1540px;margin:auto;padding-top:.9rem}.panel-heading{padding:.25rem .15rem}.panel-heading h2{font-size:clamp(1.55rem,2.7vw,2.25rem)}
.card{border-radius:1.12rem;padding:1.12rem;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel);box-shadow:0 10px 32px rgba(0,0,0,.2)}.card:hover{border-color:#3c4355}.compact-card{box-shadow:none}
.quick-start-card{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(520px,1.7fr);gap:1.1rem;align-items:center;margin-bottom:1rem;background:linear-gradient(120deg,rgba(157,140,255,.14),rgba(99,221,165,.06)),var(--panel)}.quick-start-copy h3{margin:.2rem 0 .35rem;font-size:1.35rem}.quick-start-copy p:last-child{margin:.2rem 0;color:var(--muted)}.quick-steps{display:grid;grid-template-columns:repeat(5,minmax(90px,1fr));gap:.55rem}.quick-steps button{display:grid;justify-items:start;align-content:center;min-height:92px;padding:.7rem;text-align:left;background:rgba(10,12,18,.42)}.quick-steps button>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#11131a;font-weight:950;margin-bottom:.35rem}.quick-steps strong{font-size:.88rem}.quick-steps small{font-size:.7rem;color:var(--muted);margin-top:.15rem}
.workspace-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.workspace-heading h3{margin:0}.workspace-heading p{margin:.2rem 0 0;color:var(--muted);font-size:.85rem}.focus-workspace-btn{padding:.48rem .7rem;font-size:.78rem;white-space:nowrap}
.panel-next{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.15rem 0 0;padding:1rem 1.05rem;border:1px solid rgba(157,140,255,.3);border-radius:1rem;background:linear-gradient(100deg,rgba(157,140,255,.11),rgba(99,221,165,.055))}.panel-next>div:first-child{display:grid}.panel-next small{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-size:.67rem}.panel-next strong{margin-top:.16rem}
.beginner-mode .advanced-only{display:none!important}.guided-off .workflow-bar,.guided-off .panel-next,.guided-off .quick-start-card{display:none!important}
body.focus-open{overflow:hidden}.workspace-focused{position:fixed!important;inset:12px!important;z-index:220!important;overflow:auto!important;margin:0!important;padding:1.15rem!important;background:#12151e!important;border-color:var(--accent)!important;box-shadow:0 0 0 100vmax rgba(0,0,0,.82)!important}.workspace-focused .focus-workspace-btn{position:sticky;top:0;z-index:4;background:var(--accent);color:#11131a}.workspace-focused #waveformCanvas{height:clamp(230px,42vh,520px)!important}.workspace-focused #melodyRollCanvas{height:clamp(320px,58vh,700px)!important}.workspace-focused .sequencer{min-width:100%;transform-origin:top left}
.mini-player{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:grid;grid-template-columns:auto minmax(170px,430px) auto auto;align-items:center;gap:.65rem;width:min(720px,calc(100vw - 24px));padding:.58rem .65rem;border:1px solid var(--border);border-radius:1rem;background:rgba(18,21,30,.94);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.45)}.mini-play,.mini-open{width:42px;height:42px;padding:0;border-radius:50%}.mini-track{display:grid;min-width:0}.mini-track strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem}.mini-track small{display:flex;gap:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}.mini-record{color:#ff8794;font-weight:900;font-size:.75rem;white-space:nowrap}.mobile-bottom-nav{display:none}
.mobile-sheet-dialog{padding:0;border:0;background:transparent}.mobile-sheet-dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}.mobile-tool-sheet{width:min(520px,calc(100vw - 20px));margin:auto;border-radius:1.2rem}.mobile-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:1rem}.mobile-tool-grid button{display:grid;justify-items:start;text-align:left;min-height:110px}.mobile-tool-grid button>span{font-size:1.35rem}.mobile-tool-grid button strong{margin:.35rem 0 .15rem}.mobile-tool-grid button small{color:var(--muted)}

@media(max-width:1020px){
  .v44-header{align-items:stretch}.header-command-bar{justify-content:flex-start}.quick-start-card{grid-template-columns:1fr}.workflow-bar{grid-template-columns:1fr auto}.workflow-track{grid-row:2;grid-column:1/-1}.quick-steps{grid-template-columns:repeat(5,minmax(100px,1fr));overflow-x:auto;padding-bottom:.25rem}
}
@media(max-width:760px){
  body{padding-bottom:calc(142px + var(--safe-bottom))}.v44-header{padding:.75rem .8rem .65rem;gap:.7rem}.brand-topline{gap:.65rem}.app-mark{width:39px;height:39px;border-radius:12px;font-size:1.2rem}.brand-title-row{gap:.45rem}.brand-title-row h1{font-size:1.08rem}.version-badge{font-size:.67rem;min-height:25px;padding:.25rem .48rem}.brand-copy .subtitle{display:none}.header-command-bar{gap:.36rem}.header-command-bar .save-status{order:5;margin-left:auto}.icon-button span,.header-new{font-size:0}.icon-button,.header-new,.header-save,.more-menu summary{width:42px;height:40px;min-height:40px;padding:0}.header-new::after{content:'＋';font-size:1.15rem}.header-save{width:auto;min-width:62px;padding:0 .72rem}.more-menu summary span{display:none}.more-menu-panel{position:fixed;top:110px;right:10px;left:10px;width:auto}.more-menu-panel>*{min-height:48px}
  .tabs{display:none}.workflow-bar{top:0;grid-template-columns:1fr auto;padding:.55rem .8rem}.workflow-copy small{display:none}.workflow-track{grid-row:2;grid-column:1/-1}.compact-mode{font-size:0;width:38px;height:34px;padding:0}.compact-mode::after{content:'Guide';font-size:.68rem}
  main{padding:.65rem .72rem 2rem}.panel-heading{margin:.35rem 0 .8rem}.panel-heading h2{font-size:1.5rem}.panel-heading p:last-child{font-size:.9rem}.grid.two,.song-grid,.form-grid.four{grid-template-columns:1fr}.card{padding:.92rem;border-radius:1rem}.quick-start-card{padding:.85rem}.quick-start-copy p:last-child{display:none}.quick-steps{grid-template-columns:repeat(5,112px);margin-right:-.1rem}.quick-steps button{min-height:82px}.library-tools,.library-selection-bar{gap:.55rem}.library-selection-bar .pill{margin-right:0}.panel-next{padding:.82rem;position:relative}.panel-next .row{flex-wrap:nowrap}.panel-next button{padding:.62rem .72rem}.panel-next strong{font-size:.9rem}
  .workspace-heading{align-items:center}.focus-workspace-btn{min-width:72px}.workspace-focused{inset:0!important;border-radius:0!important;padding:calc(.8rem + env(safe-area-inset-top,0px)) .8rem calc(.8rem + env(safe-area-inset-bottom,0px))!important}
  .mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-columns:repeat(5,1fr);padding:.45rem .35rem calc(.45rem + var(--safe-bottom));background:rgba(13,15,22,.97);border-top:1px solid var(--border);backdrop-filter:blur(18px)}.mobile-bottom-nav button{display:grid;justify-items:center;gap:.08rem;padding:.35rem .18rem;border:0;background:transparent;border-radius:.7rem;color:var(--muted)}.mobile-bottom-nav button>span{font-size:1.18rem}.mobile-bottom-nav button small{font-size:.68rem}.mobile-bottom-nav button.active{color:var(--accent-2);background:var(--accent-soft)}#mobileBuildBtn{margin-top:-17px;background:var(--accent);color:#11131a;border-radius:50%;width:58px;height:58px;justify-self:center;align-content:center;box-shadow:0 10px 30px rgba(157,140,255,.32)}#mobileBuildBtn small{font-weight:850}
  .mini-player{left:8px;right:8px;bottom:calc(66px + var(--safe-bottom));transform:none;width:auto;grid-template-columns:auto minmax(0,1fr) auto;padding:.45rem .5rem;border-radius:.9rem}.mini-record{grid-column:2;font-size:.68rem}.mini-open{display:none}.mini-track small{gap:.45rem;font-size:.7rem}.mini-track strong{font-size:.78rem}
  .audio-attachment-details,.row.wrap{align-items:stretch}.row.wrap>button,.row.wrap>.button-like{min-height:44px}.drum-pads{grid-template-columns:repeat(3,1fr)}.sequencer-card{overflow:hidden}.sequencer{overflow-x:auto}.toolbar{gap:.4rem}.toolbar>*{flex:1 1 130px}.song-preview{min-height:390px}.mixer-grid{grid-template-columns:1fr}.mobile-tool-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .brand-title-row h1{font-size:.98rem}.version-badge{font-size:.61rem}.workflow-copy strong{font-size:.82rem}.workflow-copy span{font-size:.63rem}.quick-steps{grid-template-columns:repeat(5,102px)}.mobile-tool-grid{grid-template-columns:1fr}.mini-track small span:last-child{display:none}.panel-next>div:first-child small{display:none}
}
@media print{.workflow-bar,.mobile-bottom-nav,.mini-player,.panel-next,.quick-start-card,.focus-workspace-btn,.more-menu{display:none!important}}
.mini-player.is-hidden{display:none!important}
@media(max-width:760px){
  .workflow-bar{grid-template-columns:minmax(0,1fr) 54px}
  .compact-mode{width:52px}
  .quick-start-card{position:relative;padding-bottom:2rem}
  .quick-start-card::after{content:'Swipe the steps →';position:absolute;right:.9rem;bottom:.55rem;color:var(--muted);font-size:.68rem}
}