:root { color-scheme: dark; --bg:#030716; --panel:#0d1734; --panel2:#111d42; --line:#30436e; --text:#f7f8ff; --muted:#aeb8d2; --blue:#3479ff; --violet:#8652f5; --mint:#78f2c1; --gold:#ffd57a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--text); font-family:Inter,Segoe UI,Arial,sans-serif; background:radial-gradient(circle at 55% 10%,#11153e 0,transparent 35%),var(--bg); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.72; background-image:radial-gradient(circle,#fff 1px,transparent 1.5px),radial-gradient(circle,#8aa8ff 1px,transparent 1.5px); background-position:0 0,53px 79px; background-size:143px 143px,197px 197px; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.page-shell { position:relative; width:min(1240px,calc(100% - 40px)); margin:0 auto; padding:30px 0 64px; }
.site-header { height:62px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 14px; border:1px solid #27375e; background:rgba(4,9,25,.82); backdrop-filter:blur(18px); }
.brand { color:#fff; text-decoration:none; font-size:22px; font-weight:800; display:flex; align-items:center; gap:10px; }
.brand img { width:40px; height:40px; object-fit:cover; border-radius:7px; }
.site-nav { display:flex; gap:30px; }
.site-nav a { color:#d9def0; text-decoration:none; }
.site-nav .active { color:#fff; border-bottom:2px solid #736dff; padding:20px 0; }
.top-cta,.primary-button,.secondary-button,.quiet-button { min-height:44px; padding:0 20px; border-radius:7px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; text-decoration:none; font-weight:750; }
.top-cta,.primary-button { color:#fff; background:linear-gradient(120deg,var(--blue),var(--violet)); }
.secondary-button { color:#fff; background:#142246; border-color:#48608f; }
.quiet-button { color:#dce4ff; background:#0a1330; border-color:#34456d; }
.lesson-hero { padding:36px 4px 18px; }
.lesson-kicker { display:inline-flex; padding:7px 11px; color:#c8d7ff; background:#102047; border:1px solid #344f86; border-radius:999px; font-size:13px; font-weight:700; }
.lesson-hero h1 { margin:13px 0 8px; font-size:clamp(38px,6vw,72px); line-height:.98; letter-spacing:0; max-width:780px; }
.lesson-hero > p { margin:0; color:var(--muted); font-size:18px; }
.stage-rail { display:grid; grid-template-columns:repeat(4,1fr); margin-top:22px; border:1px solid #2c4674; background:#07132d; }
.stage-step { min-width:0; border-right:1px solid #2c4674; }
.stage-step:last-child { border-right:0; }
.stage-step a { min-height:46px; padding:8px 12px; display:flex; align-items:center; gap:9px; color:#9faac3; text-decoration:none; font-weight:750; }
.stage-step em { width:27px; height:27px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:#24355c; font-style:normal; }
.stage-step.is-current a { color:#fff; background:linear-gradient(115deg,#17356d,#344a9a); }
.stage-step.is-current em { background:#636cff; }
.stage-step.is-complete:not(.is-current) a { color:var(--mint); }
.stage-step.is-locked a { pointer-events:none; opacity:.52; }
.notice { margin:14px 0 0; padding:11px 14px; border:1px solid #765d28; background:#2c210b; color:#ffe7a8; border-radius:7px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:16px; margin-top:4px; }
.single-workspace { display:block; }
.card { min-width:0; padding:20px; border:1px solid #2e426c; background:linear-gradient(145deg,rgba(15,27,60,.96),rgba(7,15,36,.96)); border-radius:8px; }
.card h2,.card h3 { margin:0 0 7px; }
.card > p { margin:0 0 16px; color:var(--muted); line-height:1.55; }
label,.field-label { display:block; margin:14px 0 7px; color:#e9edff; font-weight:750; }
input,textarea,select { width:100%; color:#fff; background:#050d23; border:1px solid #334a78; border-radius:7px; padding:12px 13px; outline:none; }
input:focus,textarea:focus,select:focus { border-color:#5994ff; box-shadow:0 0 0 3px rgba(71,125,255,.18); }
textarea { min-height:310px; resize:vertical; line-height:1.55; }
.field-help { display:block; margin-top:6px; color:#8f9bb8; font-size:12px; font-weight:500; }
.tab-row,.action-row,.choice-row { display:flex; flex-wrap:wrap; gap:8px; }
.tab-button,.grade-button,.choice-card { color:#dce4ff; background:#0b1531; border:1px solid #344970; border-radius:7px; cursor:pointer; }
.tab-button { flex:1; min-height:42px; }
.tab-button.is-active,.grade-button.is-selected,.choice-card.is-selected { color:#fff; border-color:#6579ff; background:linear-gradient(135deg,#24478f,#483c99); }
.text-panel { display:none; }
.text-panel.is-active { display:block; }
.upload-drop { min-height:250px; display:grid; place-items:center; text-align:center; border:1px dashed #5871a5; border-radius:7px; background:#08132e; cursor:pointer; }
.grade-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.grade-button { min-height:38px; }
.choice-grid { display:grid; gap:8px; }
.choice-card { padding:12px; text-align:left; }
.choice-card strong,.choice-card span { display:block; }
.choice-card span { margin-top:4px; color:#aeb8d2; font-size:12px; }
.summary-strip { margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.summary-strip div { padding:12px; border:1px solid #30456f; background:#0b1531; border-radius:7px; }
.summary-strip span { display:block; color:#8fa0c6; font-size:11px; text-transform:uppercase; }
.summary-strip strong { display:block; margin-top:5px; }
.review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.review-card { padding:18px; border:1px solid #30456f; background:#0b1531; border-radius:7px; }
.review-card.wide { grid-column:1/-1; }
.review-block { margin-top:12px; padding:12px; background:#071128; border-left:3px solid #597cff; }
.review-block span { color:var(--gold); font-size:12px; font-weight:800; text-transform:uppercase; }
.review-block p { margin:6px 0 0; color:#e1e6f6; line-height:1.5; }
.model-list { display:grid; gap:10px; }
.model-list blockquote { margin:0; font-family:Georgia,serif; font-size:19px; line-height:1.5; }
.assignment-grid { display:grid; grid-template-columns:360px 1fr; gap:14px; }
.assignment-list { display:grid; gap:9px; }
.assignment-row { padding:13px; display:grid; grid-template-columns:1fr 180px; gap:12px; align-items:center; border:1px solid #30456f; background:#09142f; border-radius:7px; }
.assignment-row select { padding:9px; }
.class-code { margin:12px 0; font-size:44px; letter-spacing:3px; font-weight:900; color:var(--gold); }
.publish-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pack-list { columns:2; color:#d9e0f3; line-height:1.8; }
.page-actions { position:sticky; bottom:0; z-index:5; margin-top:16px; padding:13px 0; display:flex; justify-content:space-between; gap:12px; background:linear-gradient(transparent,rgba(3,7,22,.96) 28%); }
.page-actions > :last-child { margin-left:auto; }
.error-text { margin-top:8px; color:#ffb4b4; min-height:20px; }
@media (max-width:800px) { .page-shell{width:min(100% - 22px,1240px);padding-top:12px}.site-nav{display:none}.lesson-hero h1{font-size:42px}.stage-step a{justify-content:center;padding:7px}.stage-step a span{display:none}.workspace,.review-grid,.assignment-grid,.publish-grid{grid-template-columns:1fr}.summary-strip{grid-template-columns:1fr 1fr}.grade-grid{grid-template-columns:repeat(5,1fr)}.assignment-row{grid-template-columns:1fr}.pack-list{columns:1} }