:root{
  --bg:#05080d;
  --panel:#0f1822ee;
  --panel2:#162432dd;
  --line:#2c4559;
  --text:#eff9ff;
  --muted:#9bb0c1;
  --cyan:#62e8ff;
  --violet:#9d7dff;
  --pink:#ff76c8;
  --danger:#ff7280;
  --shadow:0 24px 70px #0009;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0,#10283a 0,#071019 38%,var(--bg) 78%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

body{overflow-x:hidden}
.shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.glass{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid #39556c88;box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.sidebar{position:sticky;top:0;height:100vh;padding:16px 12px;border-radius:0 22px 22px 0;display:flex;flex-direction:column;gap:12px;overflow:auto}
.brand{display:flex;align-items:center;gap:12px;padding:6px 8px 12px}
.brand h1{font-size:20px;line-height:1;margin:0}
.brand p{margin:3px 0 0;color:var(--muted);font-size:13px}
.orb{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--cyan) 18%,var(--violet) 52%,#06131d 72%);box-shadow:0 0 38px #62e8ff77;flex:0 0 auto}
nav{display:grid;gap:5px}
.nav,.quiet,.tool,.file-button{border:1px solid transparent;background:transparent;color:var(--muted);text-align:left;border-radius:10px;padding:10px 11px;min-height:40px}
.nav:hover,.nav.active,.quiet:hover,.tool:hover,.file-button:hover{background:#172632;color:var(--text);border-color:#345166}
.nav.active{color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan)}
.status{margin-top:auto;display:grid;gap:8px;font-size:12px;color:var(--muted)}
#modeBadge,.badge{display:inline-block;padding:7px 10px;border:1px solid #345166;border-radius:999px;color:var(--muted);font-size:12px;background:#0b151e}
main{min-width:0;padding:24px 30px 72px}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}
.top h2{margin:4px 0 0;font-size:clamp(24px,4vw,40px)}
.eyebrow{margin:0;color:var(--cyan);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.primary,.round,.danger{border-radius:11px;padding:10px 15px;border:1px solid #53d6ef;background:linear-gradient(180deg,#17485a,#0e2d3a);color:var(--text)}
.room{display:none}
.room.active{display:block}
.panel,.hero,.chat{border-radius:17px;padding:18px}
.hero{display:grid;gap:14px;min-height:260px;align-content:center}
.hero h2{font-size:clamp(30px,6vw,58px);line-height:1.02;margin:0}
.hero p{color:var(--muted);font-size:17px;line-height:1.55;margin:0}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:18px}
.card{min-height:150px;text-align:left;border:1px solid #314b60;border-radius:16px;background:linear-gradient(180deg,#13212d,#0a1118);color:var(--text);padding:16px;font-weight:700}
.card:hover{border-color:var(--cyan);box-shadow:0 18px 45px #0008,0 0 22px #62e8ff22;transform:translateY(-2px)}
.two{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px}
.section-head,.toolbar,.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.list{display:grid;gap:9px}
.item{display:flex;justify-content:space-between;gap:15px;padding:14px 16px;border:1px solid #2d4456;border-radius:12px;background:#0b141d}
.item small{display:block;color:var(--muted);margin-top:3px}
.item button{border:0;background:none;color:var(--cyan)}
.chat{overflow:hidden;padding:0}
#messages{height:58vh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.message{max-width:84%;padding:12px 14px;border-radius:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.message.user{align-self:flex-end;background:#144657}
.message.assistant{align-self:flex-start;background:#1a2631;border:1px solid #2d4456}
#chatForm{border-top:1px solid #2d4456;padding:12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
#chatInput{min-height:72px;max-height:180px}
label{display:grid;gap:7px;margin:12px 0;color:#d3dfe8}
input,textarea,select{width:100%;border:1px solid #2d4456;border-radius:10px;background:#081119;color:var(--text);padding:10px 12px;outline:none;min-width:0}
input:focus,textarea:focus,select:focus{border-color:var(--cyan)}
textarea{resize:vertical}
.muted{color:var(--muted);line-height:1.5}
.titleInput{font-size:25px;font-weight:700;border:0;background:transparent;padding-left:0}
.writer{min-height:62vh;font:18px/1.7 Georgia,serif;padding:22px}
#versions{display:grid;gap:8px}
#drumSeq,.sequencer{overflow:auto;padding-bottom:6px}
.seq-row{display:grid;grid-template-columns:70px repeat(16,32px);gap:6px;align-items:center;margin:8px 0;min-width:620px}
.seq-name{color:var(--muted);font-size:13px}
.step{width:30px;height:30px;border:1px solid #2d4456;border-radius:7px;background:#071019}
.step.active{background:var(--violet);box-shadow:0 0 15px #9d7dff77}
.step.playing{outline:2px solid var(--cyan)}
#melodySeq,.melody{display:grid;grid-template-columns:repeat(16,minmax(34px,1fr));gap:6px;margin-top:12px}
.melody-step{height:54px;border:1px solid #2d4456;border-radius:8px;background:#071019;color:var(--muted)}
.melody-step.active{background:#16485a;color:var(--text)}
#songNotes,#videoNotes,#mission,#findings,#sources,#imagePrompt,#codeEditor{min-height:160px}
#imageCanvas{width:100%;height:auto;background:#03060a;border:1px solid #294153;border-radius:12px;touch-action:none}
#mediaPreview img,#mediaPreview video,#mediaPreview audio{max-width:100%;max-height:520px}
#fileTree{display:grid;gap:6px;max-height:65vh;overflow:auto}
#fileTree button{border:1px solid #2d4456;background:#071019;color:var(--muted);border-radius:8px;padding:8px;text-align:left}
.code{min-height:65vh;font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.module-card{border:1px solid #314d60;border-radius:15px;padding:16px;background:linear-gradient(180deg,#13212d,#09121a)}
.module-card p{color:var(--muted);font-size:13px}
.toast{position:fixed;right:18px;bottom:18px;padding:12px 16px;border-radius:10px;background:#173947;border:1px solid #3b8da6;opacity:0;transform:translateY(8px);transition:.2s;z-index:20}
.toast.show{opacity:1;transform:none}
.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
.low-motion *{animation:none!important;transition:none!important}

@media(max-width:1050px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:780px){
  .shell{display:block;min-height:100vh}
  .sidebar{position:sticky;top:0;z-index:10;height:auto;max-height:45vh;border-radius:0 0 18px 18px;padding:10px;overflow:auto}
  .brand{padding:4px 6px}.brand h1{font-size:18px}.brand p{font-size:12px}.orb{width:34px;height:34px}
  nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x proximity}
  .nav{white-space:nowrap;min-width:max-content;scroll-snap-align:start;padding:9px 10px}
  .nav.active{box-shadow:inset 0 -3px 0 var(--cyan)}
  .status{margin-top:4px;grid-template-columns:1fr;gap:6px}
  main{padding:14px 12px 92px}
  .top{display:grid;gap:10px;margin-bottom:14px}
  .top .primary{width:100%;text-align:center}
  .hero{min-height:190px;padding:18px}
  .cards{grid-template-columns:1fr;gap:10px}.card{min-height:84px}
  .two{grid-template-columns:1fr;gap:12px}
  .section-head,.toolbar,.controls{align-items:stretch;display:grid;grid-template-columns:1fr;gap:8px}
  .toolbar button,.controls button{width:100%;text-align:center}
  .item{display:grid;grid-template-columns:1fr;gap:8px}
  #messages{height:52vh;padding:12px}
  .message{max-width:94%;font-size:15px}
  #chatForm{grid-template-columns:1fr;gap:8px}
  #chatForm button{width:100%}
  #chatInput{min-height:90px;font-size:16px}
  input,textarea,select,button{font-size:16px}
  .writer{min-height:48vh;font-size:17px;padding:15px}
  .panel{padding:14px}
  #melodySeq,.melody{grid-template-columns:repeat(8,1fr)}
  .seq-row{grid-template-columns:58px repeat(16,27px);min-width:540px}.step{width:25px;height:25px}
  .module-grid{grid-template-columns:1fr}
  #imageCanvas{max-height:55vh;object-fit:contain}
}

@media(max-width:420px){
  main{padding-left:9px;padding-right:9px}
  .hero h2{font-size:29px}
  .top h2{font-size:23px}
  .panel,.hero{padding:12px}
  #messages{height:50vh}
}