:root {
  color-scheme: dark;
  --ink: #f3f5f8;
  --muted: #98a2b1;
  --faint: #647083;
  --line: rgba(202, 216, 237, 0.14);
  --surface: #121821;
  --surface-raised: #18212d;
  --page: #0d1118;
  --accent: #9cc9ff;
  --accent-strong: #66a7ef;
  --accent-ink: #07111e;
  --danger: #ff9e9e;
  --radius: 12px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--page); }

body {
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(66, 107, 159, 0.14), transparent 30rem),
    var(--page);
  line-height: 1.5;
}

a { color: inherit; }

button, input { font: inherit; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.brand span {
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.eyebrow, .panel-kicker {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 730;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 560;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(3rem, 10vw, 10rem);
  align-items: center;
  width: min(1200px, calc(100% - 3rem));
  min-height: 100svh;
  margin: 0 auto;
  padding: 3rem 0;
}

.login-intro { max-width: 650px; animation: rise-in 600ms ease both; }
.login-intro .brand { margin-bottom: clamp(4rem, 14vh, 10rem); }
.intro-copy { max-width: 440px; margin-bottom: 2rem; color: var(--muted); font-size: 1.05rem; }
.quiet-note { color: var(--faint); font-size: 0.85rem; }

.login-panel {
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  animation: rise-in 600ms 100ms ease both;
}

.login-form { display: grid; gap: 0.65rem; }
.login-form label { margin-top: 0.55rem; color: var(--muted); font-size: 0.8rem; }
.login-form input {
  width: 100%;
  padding: 0.85rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  transition: border-color 180ms ease;
}
.login-form input::placeholder { color: var(--faint); }
.login-form input:focus { border-bottom-color: var(--accent); }
.login-form .button { margin-top: 1.5rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 2.65rem;
  padding: 0.65rem 1rem;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible, .back-link:focus-visible, .lesson-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.button-primary { color: var(--accent-ink); background: var(--accent); font-weight: 740; }
.button-primary:hover { background: #b8dcff; }
.button-quiet { padding-inline: 0.7rem; color: var(--muted); background: transparent; border-color: var(--line); font-size: 0.8rem; }
.button-quiet:hover { color: var(--ink); border-color: rgba(202, 216, 237, 0.32); }
.button[disabled] { cursor: wait; opacity: 0.6; transform: none; }

.form-message { min-height: 1.4rem; margin: 0.55rem 0 0; color: var(--danger); font-size: 0.83rem; }
.security-note { margin: 2rem 0 0; color: var(--faint); font-size: 0.76rem; }
.status-dot { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.35rem; background: #87d5aa; border-radius: 50%; box-shadow: 0 0 0 4px rgba(135, 213, 170, 0.1); }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}
.header-actions { display: flex; align-items: center; gap: 1rem; }
.user-email { max-width: 240px; overflow: hidden; color: var(--muted); font-size: 0.8rem; text-overflow: ellipsis; white-space: nowrap; }

.app-shell { width: min(980px, calc(100% - 3rem)); margin: 0 auto; padding: clamp(4rem, 10vh, 8rem) 0 5rem; }
.page-heading { max-width: 680px; margin-bottom: clamp(3.5rem, 8vh, 6rem); }
.page-heading h1 { margin-bottom: 1.3rem; }
.page-copy { margin: 0; color: var(--muted); font-size: 1rem; }
.course-list { border-top: 1px solid var(--line); }
.course-section { padding: 1.75rem 0 0; border-bottom: 1px solid var(--line); animation: rise-in 500ms ease both; }
.course-section + .course-section { animation-delay: 80ms; }
.course-heading { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.course-heading h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.85rem); font-weight: 570; letter-spacing: -0.03em; }
.course-description { max-width: 550px; margin: 0 0 1.2rem; color: var(--muted); font-size: 0.9rem; }
.lesson-list { margin: 0; padding: 0; list-style: none; }
.lesson-link { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.9rem 0.25rem; color: var(--ink); border-top: 1px solid rgba(202, 216, 237, 0.08); text-decoration: none; transition: color 180ms ease, padding 180ms ease; }
.lesson-link:hover { padding-left: 0.5rem; color: var(--accent); }
.lesson-position { color: var(--faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.lesson-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-meta { color: var(--faint); font-size: 0.72rem; text-transform: uppercase; }
.loading-state, .empty-state { color: var(--muted); }
.loading-dots { display: inline-block; width: 1.3rem; overflow: hidden; animation: blink 1s steps(2, jump-none) infinite; }

.lesson-shell { max-width: 980px; padding-top: 2.5rem; }
.back-link { display: inline-block; margin-bottom: 4rem; color: var(--muted); font-size: 0.83rem; text-decoration: none; transition: color 180ms ease; }
.back-link:hover { color: var(--accent); }
.lesson-view { max-width: 860px; }
.lesson-view h1 { max-width: 780px; margin-bottom: 1.2rem; font-size: clamp(2.3rem, 6vw, 5.5rem); }
.lesson-description { max-width: 650px; margin-bottom: 3rem; color: var(--muted); font-size: 1.03rem; }
.video-wrap { overflow: hidden; margin: 2rem 0 3rem; background: #05070b; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 16 / 9; }
.video-wrap video, .video-wrap iframe { display: block; width: 100%; height: 100%; border: 0; }
.lesson-content { max-width: 700px; padding-top: 2rem; border-top: 1px solid var(--line); white-space: pre-wrap; }
.lesson-label { margin: 0 0 1rem; color: var(--accent); font-size: 0.72rem; font-weight: 720; letter-spacing: 0.12em; text-transform: uppercase; }
.attachments { max-width: 700px; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.attachment-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(202, 216, 237, 0.08); }
.attachment-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-error { color: var(--danger); }

@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink { 0%, 50% { opacity: 0.2; } 51%, 100% { opacity: 1; } }

@media (max-width: 760px) {
  .login-layout { display: block; width: min(100% - 2rem, 520px); padding: 1.5rem 0 3rem; }
  .login-intro .brand { margin-bottom: 5rem; }
  .login-intro h1 { font-size: clamp(2.7rem, 13vw, 4.5rem); }
  .login-panel { margin-top: 5rem; }
  .app-header { width: calc(100% - 2rem); padding: 1.2rem 0; }
  .app-shell { width: calc(100% - 2rem); padding-top: 3.5rem; }
  .user-email { display: none; }
  .lesson-link { grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: 0.65rem; }
  .lesson-meta { font-size: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* School workspace */
.lesson-work{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.assignment-body,.submission-feedback{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9rem;line-height:1.8}
.assignment-body{color:var(--muted)}
.assignment-form{display:grid;gap:12px;margin-top:22px}
.assignment-form .muted{font-size:.8rem;margin:0}
.assignment-form .button{justify-self:start}
.submission-review{border-left:2px solid var(--accent);padding:12px 18px;background:var(--surface)}
.submission-state{color:var(--accent);font-size:.85rem;margin-bottom:8px}
.submission-feedback{margin-bottom:0}
.homework-load-error{margin-top:24px;display:flex;gap:16px;align-items:center}
textarea[readonly]{background:transparent;color:var(--muted)}
.notes-export{margin-top:40px;padding-top:25px;border-top:1px solid var(--line);max-width:1000px}
.notes-export .muted{font-size:.84rem}
[hidden]{display:none!important}
body{background:var(--page)}
:root{--faint:#8894a6}
button,input,textarea,select{font:inherit}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:620;letter-spacing:-.045em;line-height:1.12}
h2{font-size:1.2rem;font-weight:600;letter-spacing:-.025em}
h3{font-size:.94rem;font-weight:600}
.brand{font-size:1.42rem;letter-spacing:-.06em;text-transform:none}
.brand span{font-size:.8rem;letter-spacing:.03em}
.button{border-radius:6px;font-size:.84rem;text-decoration:none}
.button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--surface-raised)}
.button-primary[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.button:disabled{cursor:not-allowed;opacity:.45}
input,textarea,select{width:100%;padding:.75rem .85rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;transition:border-color 160ms}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus{border-color:var(--accent)}
input:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
textarea{resize:vertical;min-height:130px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.app-header{width:min(1320px,calc(100% - 80px));min-height:82px;gap:48px;padding:16px 0}
.main-nav{display:flex;align-items:center;gap:26px;flex:1}
.main-nav a{font-size:.83rem;color:var(--muted);text-decoration:none;padding:12px 0}
.main-nav a:hover{color:var(--ink)}
body[data-page=courses] .main-nav a[href="/courses.html"],body[data-page=lesson] .main-nav a[href="/courses.html"],body[data-page=profile] .main-nav a[href="/profile.html"]{color:var(--ink)}
.user-email{max-width:190px}
.app-shell{width:min(1240px,calc(100% - 80px));padding:48px 0 80px;animation:rise-in 320ms ease both}
.page-heading{margin-bottom:36px}.page-heading h1{margin-bottom:12px}.page-copy{font-size:.92rem}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:56px}
.workspace-aside{padding-left:28px;border-left:1px solid var(--line)}
.aside-copy{font-size:.83rem;line-height:1.8;color:var(--muted);margin-bottom:28px}
.text-link{color:var(--accent);font-size:.82rem;text-decoration:none}.text-link:hover{text-decoration:underline}
.muted{color:var(--muted)}
.continue-learning{display:flex;justify-content:space-between;align-items:center;gap:30px;background:var(--surface);padding:25px 28px;margin-bottom:38px;border-left:2px solid var(--accent)}
.continue-learning .eyebrow{margin-bottom:12px}.continue-course{font-size:.76rem;margin-bottom:3px}
.continue-learning h2{margin:0;font-size:1.35rem;max-width:650px}.continue-learning .button{flex-shrink:0}
.section-heading h2{margin-bottom:18px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.course-toolbar{margin-bottom:24px}
.search-field{flex:1;min-width:150px}.search-field input{min-height:43px}
.course-section{padding:22px 0}.course-heading{align-items:center;margin:0;cursor:pointer;list-style:none}
.course-heading::-webkit-details-marker{display:none}
.course-heading:after{content:'+';font-size:1.25rem;color:var(--muted);margin-left:8px}
.course-section[open]>.course-heading:after{content:'−'}
.course-heading h2{flex:1;font-size:1.08rem}.course-heading .lesson-meta{white-space:nowrap}
.course-description{font-size:.84rem;margin:16px 0}
.course-progress{appearance:none;display:block;width:100%;height:3px;margin:18px 0 14px;border:0;background:var(--surface-raised)}
.course-progress::-webkit-progress-bar{background:var(--surface-raised)}
.course-progress::-webkit-progress-value{background:var(--accent);transition:width 250ms}
.course-progress::-moz-progress-bar{background:var(--accent)}
.lesson-list{margin-top:18px;animation:rise-in 200ms ease both}
.lesson-link{grid-template-columns:26px minmax(0,1fr) auto;gap:12px;padding:13px 8px;transition:background 150ms,color 150ms}
.lesson-link:hover{padding-left:8px;background:var(--surface)}
.lesson-title{font-size:.86rem;line-height:1.45;white-space:normal;overflow:visible}
.lesson-meta{font-size:.71rem;text-transform:none}
.announcement{padding:17px 0;border-top:1px solid var(--line)}.announcement h3{margin-bottom:7px}
.announcement p{color:var(--muted);white-space:pre-wrap;font-size:.81rem;line-height:1.65;overflow-wrap:anywhere}
#announcements{margin-bottom:26px}#announcements>h2{font-size:.95rem}
.notice{padding:15px 18px;margin:0 0 26px;border-left:2px solid var(--accent);background:var(--surface);color:var(--muted);font-size:.86rem}
.loading-state,.empty-state{padding:24px 0;font-size:.9rem}
.loading-state{animation:breathe 1.7s ease infinite}.form-message{color:var(--muted)}.inline-error{color:var(--danger)}
.lesson-shell{max-width:1240px;padding-top:27px}.back-link{margin-bottom:28px}
.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:40px;align-items:start}
.lesson-view{min-width:0;max-width:none}.lesson-view h1{font-size:clamp(1.7rem,3.5vw,2.65rem);line-height:1.2;margin-bottom:18px}
.lesson-label{text-transform:none;letter-spacing:0}
.lesson-description{font-size:.9rem;line-height:1.75;margin-bottom:22px}
.video-wrap{margin:26px 0;border-radius:6px}.lesson-content{font-size:.95rem;line-height:1.9}
.course-outline{position:sticky;top:24px;padding-left:25px;border-left:1px solid var(--line)}
.course-outline h2{font-size:1rem}.course-outline input{font-size:.8rem}
.outline-list{list-style:none;padding:0;margin:15px 0 0;max-height:65vh;overflow-y:auto;scrollbar-width:thin}
.outline-list a{display:block;padding:11px 10px;font-size:.77rem;color:var(--muted);text-decoration:none;line-height:1.6;border-left:2px solid transparent;transition:background 150ms,color 150ms}
.outline-list a:hover{background:var(--surface);color:var(--ink)}
.outline-list a[aria-current=page]{border-color:var(--accent);background:var(--surface);color:var(--accent)}
.lesson-tools{border-top:1px solid var(--line);padding-top:22px;margin-top:28px}
.notes-form{margin-top:30px;display:grid;gap:10px}.notes-label{font-size:1.1rem;font-weight:600}
.notes-form .muted{font-size:.8rem;margin-bottom:0}.notes-form .button{justify-self:start}
.lesson-navigation{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:24px;margin-top:28px}
.attachments{margin-top:28px;padding-top:20px}.attachment-title{font-size:.84rem;white-space:normal}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;max-width:1000px}
.profile-form{display:flex;flex-direction:column;align-items:stretch;gap:12px;border-top:1px solid var(--line);padding-top:26px}
.profile-form h2{margin:0}.profile-form .muted{font-size:.84rem;min-height:40px;margin-bottom:6px}
.profile-form label{font-size:.84rem}.profile-form .button{align-self:start;margin-top:12px}
.field-hint{color:var(--muted);font-size:.75rem;margin:0}
.login-layout{grid-template-columns:minmax(0,1fr) 360px;gap:100px;width:min(1000px,calc(100% - 80px));padding:70px 0}
.login-intro .brand{margin-bottom:80px;font-size:2rem}.login-intro h1{font-size:clamp(2.5rem,5vw,4.25rem)}
.intro-copy{font-size:.96rem;line-height:1.8}.quiet-note{max-width:360px}
.login-form input{padding:.75rem .85rem;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.login-form input:focus{border-color:var(--accent)}.security-note{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;padding:12px;background:var(--accent);color:var(--accent-ink)}.skip-link:focus{top:12px}
@keyframes breathe{50%{opacity:.5}}
@media(max-width:1000px){.app-header{gap:26px}.user-email{display:none}.workspace-grid{grid-template-columns:minmax(0,1fr) 210px;gap:30px}.lesson-layout{grid-template-columns:minmax(0,1fr) 240px;gap:25px}.course-outline{padding-left:18px}}
@media(max-width:760px){
.app-header{width:calc(100% - 32px);min-height:74px;gap:18px;flex-wrap:wrap;padding:17px 0 10px}.brand{font-size:1.25rem}.header-actions{margin-left:auto}.header-actions .button{min-height:36px;padding:6px 9px}
.main-nav{order:3;flex-basis:100%;gap:25px}.main-nav a{padding:5px 0;font-size:.8rem}
.app-shell{width:calc(100% - 32px);padding:30px 0 50px}.page-heading{margin-bottom:26px}.workspace-grid{display:block}
.workspace-aside{margin-top:35px;padding:25px 0 0;border-left:0;border-top:1px solid var(--line)}.aside-copy{display:none}
.continue-learning{padding:20px;display:block;margin-bottom:28px}.continue-learning h2{font-size:1.2rem}.continue-learning .button{margin-top:18px}
.course-heading{gap:8px}.course-heading h2{font-size:1rem}.course-heading .lesson-meta{font-size:.65rem}
.lesson-link{grid-template-columns:22px minmax(0,1fr);gap:9px}.lesson-link>.lesson-meta{grid-column:2;font-size:.68rem}.lesson-title{font-size:.83rem}
.course-toolbar{gap:8px}.course-toolbar .button{padding:.6rem .75rem}
.lesson-layout{display:flex;flex-direction:column}.lesson-view{width:100%}.course-outline{position:static;width:100%;padding:25px 0 0;border-left:0;border-top:1px solid var(--line);margin-top:15px}.outline-list{max-height:420px}
.profile-grid{grid-template-columns:1fr;gap:35px}.profile-form .muted{min-height:0}.lesson-navigation{flex-wrap:wrap}
.login-layout{display:block;width:min(460px,calc(100% - 40px));padding:35px 0}.login-intro .brand{margin-bottom:46px}.login-panel{margin-top:35px}.quiet-note{margin-top:20px}
}