:root{
--bg:#08131d;--panel:#0d1a29;--panel2:#112238;--line:#294965;--text:#eff7ff;--muted:#9fb3c7;
--accent:#67d7ff;--accent2:#9b87ff;--danger:#ff7d89;--ok:#6ee0a1;--shadow:0 20px 60px #0004;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#16273d,#07111a 48%);color:var(--text)}
button,input,textarea,select{font:inherit}button{cursor:pointer}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 36px;border-bottom:1px solid #213b52;background:#07111be8;backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}
.topbar h1{margin:2px 0 0;font-size:30px}.topbar p{margin:5px 0 0;color:var(--muted)}
.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:900;color:#74dcff}
.toplinks,.inline,.panel-head,.overlay-head{display:flex;gap:10px;align-items:center}
.panel-head,.overlay-head{justify-content:space-between}
button,.file-btn{border-radius:12px;padding:11px 15px;font-weight:800;border:1px solid transparent}
.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06121d}
.secondary,.ghost,.file-btn{background:#14283d;color:#eef7ff;border-color:#365875}
.ghost{background:transparent}
.wide{width:100%}.mini-btn{width:100%;background:#0d2033;color:#cce6fb;border:1px dashed #41627e}
.steps{max-width:1320px;margin:24px auto 0;padding:0 22px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.step{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;text-align:left;column-gap:10px;background:#0c1a28;color:#dcecff;border:1px solid #28465f;padding:14px;border-radius:16px}
.step span{grid-row:1/3;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#17314b;color:#9fdfff}
.step b{font-size:14px}.step small{color:#879eb4}
.step.active{border-color:#6ddcff;background:#10253a}.step.active span{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07111a}
.main{max-width:1320px;margin:0 auto;padding:26px 22px 70px}.stage{display:none}.stage.active{display:block}.stage-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}.stage-head h2{margin:5px 0 6px;font-size:28px}.stage-head p{margin:0;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{background:linear-gradient(180deg,#0c1928,#0a1622);border:1px solid #29465f;border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.card h3{margin-top:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:block;margin:12px 0 6px;color:#bdcddd;font-size:13px}
input,textarea,select{width:100%;background:#071421;color:#fff;border:1px solid #355976;border-radius:12px;padding:11px}textarea{min-height:95px;resize:vertical}
.codebox{min-height:300px;font-family:Consolas,monospace;font-size:12px}.hint,.muted{color:var(--muted)}hr{border:none;border-top:1px solid #29435c;margin:22px 0}.status{margin-top:12px;padding:10px 12px;border-radius:12px;background:#0a1623;color:#9fb5c9;min-height:20px}
.file-btn{display:inline-block;cursor:pointer}.file-btn input{display:none}
.editor-layout{display:grid;grid-template-columns:230px 1fr;gap:16px}.editor-nav{background:#091622;border:1px solid #29465f;border-radius:18px;padding:12px;height:max-content;position:sticky;top:116px}
.edit-tab,.round-link{width:100%;text-align:left;background:transparent;color:#c5d5e5;border:1px solid transparent;margin:3px 0;padding:10px 11px;border-radius:10px}
.edit-tab:hover,.edit-tab.active,.round-link.active{background:#132a40;border-color:#365b77;color:white}.editor-nav-title{font-size:11px;color:#7890a7;margin:14px 8px 6px;font-weight:900;letter-spacing:.12em}
.edit-panel{display:none}.edit-panel.active{display:block}.stack{display:grid;gap:12px}.edit-card{background:#0c1927;border:1px solid #294963;border-radius:16px;padding:14px}
.card-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}.danger{background:#3a2029;color:#ffe0e5;border:1px solid #6e3948}.choice{background:#091522;border:1px solid #2c4964;border-radius:14px;padding:12px;margin:10px 0}
.stage-next{display:flex;justify-content:flex-end;margin-top:18px}.media-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.media-card{display:grid;grid-template-columns:220px 1fr;gap:14px;background:#0c1927;border:1px solid #294963;border-radius:18px;padding:14px}
.media-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#06111b;border:1px solid #31516d}.media-thumb.portrait{aspect-ratio:4/3}.prompt-mini{min-height:110px}.student-preview{background:#06101a;border:1px solid #294963;border-radius:22px;padding:22px;min-height:520px}.student-screen{max-width:980px;margin:auto}
.scene-img{aspect-ratio:16/9;border-radius:20px;background:radial-gradient(circle at top right,#426486,#172a40 42%,#07111b 80%);background-size:cover;background-position:center;position:relative;overflow:hidden}.scene-caption{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(transparent,#050b12e8)}
.student-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}.student-stat{background:#0d1c2b;border:1px solid #2c4b65;border-radius:14px;padding:10px}.bar{height:8px;background:#15283c;border-radius:99px;overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.choices{display:grid;gap:10px}.choice-btn{text-align:left;background:#122941;color:white;border:1px solid #3c607d}.choice-btn:hover{background:#19374f}.consequence{padding:16px;border-left:4px solid var(--accent);background:#0c1b2a;border-radius:12px;margin:14px 0}.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.hero-card{background:#0d1b2a;border:1px solid #31536e;border-radius:16px;padding:14px;cursor:pointer}.hero-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.overlay-stage{position:fixed;inset:0;z-index:60;background:#07111b;padding:28px 5vw;overflow:auto}.hidden{display:none!important}.overlay-head{margin-bottom:20px}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.two,.editor-layout,.media-grid,.grid2{grid-template-columns:1fr}.editor-nav{position:static}.media-card{grid-template-columns:1fr}.topbar{flex-direction:column;align-items:flex-start;gap:12px}}