:root {
  color-scheme:light;
  --ink:#15211f; --ink-soft:#314743; --muted:#6e7c78; --paper:#f4f4ed; --surface:#fffef9;
  --lime:#d8ff66; --lime-deep:#b9e839; --coral:#ff735e; --aqua:#80ddd1; --line:rgba(21,33,31,.14);
  --shadow:0 22px 70px rgba(38,54,50,.10); --shadow-hover:0 30px 90px rgba(38,54,50,.16);
  --radius:24px; --serif:Georgia,"Times New Roman",serif; --sans:Inter,Avenir,"Segoe UI",system-ui,sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --ink:#eef4f1; --ink-soft:#c7d3ce; --muted:#9baea7; --paper:#0d1513; --surface:#15231f;
  --lime:#c9f45d; --lime-deep:#98bf31; --coral:#ff8a77; --aqua:#65cfc2; --line:rgba(238,244,241,.17);
  --shadow:0 22px 70px rgba(0,0,0,.32); --shadow-hover:0 30px 90px rgba(0,0,0,.42);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(circle at 88% 8%,rgba(128,221,209,.22),transparent 27rem),radial-gradient(circle at 3% 46%,rgba(255,115,94,.12),transparent 24rem),linear-gradient(rgba(21,33,31,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(21,33,31,.025) 1px,transparent 1px); background-size:auto,auto,48px 48px,48px 48px; }
[hidden] { display:none!important; }
.skip-link { position:fixed; left:16px; top:-80px; z-index:20; padding:12px 18px; border-radius:12px; background:var(--lime); color:var(--ink); font-weight:800; transition:top .2s; }
.skip-link:focus { top:16px; }
.site-header { min-height:84px; padding:14px max(22px,calc((100vw - 1200px)/2)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; border-bottom:1px solid var(--line); background:rgba(244,244,237,.82); position:sticky; top:0; z-index:10; backdrop-filter:blur(18px); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font:500 20px/1 var(--sans); letter-spacing:-.04em; width:max-content; }
.brand strong { font-weight:850; }.brand-mark { display:grid; place-items:center; width:38px; aspect-ratio:1; border-radius:50% 50% 50% 10%; background:var(--ink); color:var(--lime); font:800 18px/1 var(--serif); transform:rotate(-5deg); }.brand-mark.small { width:30px; font-size:14px; }
.header-note { margin:0; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }.header-actions,.identity { display:flex; justify-content:flex-end; align-items:center; gap:8px; }.header-actions { justify-self:end; }.theme-toggle { min-height:38px; padding:8px 11px; border-color:var(--line); background:var(--surface); color:var(--ink); box-shadow:none; font-size:11px; letter-spacing:.02em; }.theme-toggle:hover { background:var(--paper); color:var(--ink); box-shadow:none; }.theme-toggle[aria-pressed="true"] { border-color:var(--aqua); box-shadow:0 0 0 2px rgba(128,221,209,.18); }.theme-icon { color:var(--coral); font-size:17px; line-height:1; }.theme-toggle .theme-label { color:inherit; font-size:11px; }
main { max-width:1200px; margin:auto; padding:0 24px 96px; }
.hero { min-height:620px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); align-items:center; gap:clamp(36px,7vw,96px); padding:74px 0 64px; border-bottom:1px solid var(--line); }
.hero-copy { position:relative; z-index:1; }.eyebrow,.kicker,.card-label { color:var(--ink-soft); font-size:11px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px; }.eyebrow { display:flex; align-items:center; gap:9px; }.eyebrow span { width:28px; height:2px; background:var(--coral); }
h1,h2,h3 { margin:0; line-height:1.02; letter-spacing:-.045em; } h1,h2 { font-family:var(--serif); font-weight:500; } h1 { font-size:clamp(52px,7.2vw,96px); max-width:850px; } h1 em { color:var(--coral); font-weight:400; } h2 { font-size:clamp(38px,5vw,62px); } h3 { font-size:clamp(23px,3vw,31px); font-weight:780; }
.lede { color:var(--ink-soft); max-width:590px; margin:26px 0; font-size:clamp(17px,2vw,21px); }.hero-pills { display:flex; flex-wrap:wrap; gap:8px; }.hero-pills span { padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(255,254,249,.62); color:var(--ink-soft); font-size:12px; font-weight:750; }
.hero-orbit { position:relative; min-height:420px; display:grid; place-items:center; isolation:isolate; }.hero-orbit::before { content:""; position:absolute; width:76%; aspect-ratio:1; border-radius:43% 57% 50% 50%; background:var(--lime); transform:rotate(9deg); box-shadow:var(--shadow); z-index:-2; }.hero-orbit::after { content:""; position:absolute; width:58%; aspect-ratio:1; border-radius:50%; background:linear-gradient(145deg,#20332f,#0c1614); z-index:-1; }
.language-core { display:grid; gap:13px; text-align:center; color:white; transform:rotate(-3deg); }.language-core>span { color:var(--lime); font:italic 18px/1 var(--serif); }.language-core strong { font:500 clamp(31px,4vw,48px)/.92 var(--serif); letter-spacing:-.05em; }.language-core small { color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.orbit { position:absolute; border:1px solid rgba(21,33,31,.22); border-radius:50%; }.orbit-one { width:91%; aspect-ratio:1; transform:rotate(22deg) scaleY(.68); }.orbit-two { width:114%; aspect-ratio:1; transform:rotate(-37deg) scaleY(.48); }.floating-word { position:absolute; padding:9px 13px; border:1px solid rgba(21,33,31,.12); border-radius:10px; background:var(--surface); box-shadow:0 10px 30px rgba(21,33,31,.12); font:800 11px/1 var(--sans); text-transform:uppercase; letter-spacing:.12em; }.word-one { left:0; top:28%; transform:rotate(-8deg); }.word-two { right:-1%; top:19%; transform:rotate(7deg); }.word-three { right:2%; bottom:19%; transform:rotate(-4deg); }
.grid { display:grid; gap:22px; }.auth-grid { grid-template-columns:repeat(2,minmax(0,1fr)); padding:52px 0 0; }.admin-grid,.students-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.assignment-grid { grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); }.wide { grid-column:1/-1; }
.card { position:relative; overflow:hidden; background:rgba(255,254,249,.91); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,4vw,38px); box-shadow:var(--shadow); transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; }.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:rgba(21,33,31,.25); }.card::after { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--aqua),var(--lime)); opacity:.8; }.register-card::after { background:linear-gradient(90deg,var(--coral),#ffb357); }.auth-card { padding-top:48px; }.card-index { position:absolute; top:23px; right:28px; color:rgba(21,33,31,.11); font:700 48px/1 var(--serif); }.supporting,.section-copy { color:var(--muted); }.supporting { margin:14px 0 24px; max-width:62ch; }.section-copy { margin:10px 0 0; }.accent-card { background:linear-gradient(145deg,rgba(216,255,102,.16),rgba(255,254,249,.95) 45%); }
form { display:grid; gap:16px; } label,legend { color:var(--ink-soft); font-size:12px; font-weight:800; letter-spacing:.035em; } input,select,textarea { width:100%; margin-top:7px; padding:13px 14px; min-height:48px; border:1px solid rgba(21,33,31,.22); border-radius:12px; background:rgba(255,255,255,.88); color:var(--ink); font:500 15px/1.35 var(--sans); transition:border-color .18s,box-shadow .18s,background .18s; } textarea { min-height:110px; resize:vertical; } input:hover,select:hover,textarea:hover { border-color:rgba(21,33,31,.42); } input:focus,select:focus,textarea:focus { outline:0; border-color:var(--ink); background:white; box-shadow:0 0 0 4px rgba(128,221,209,.28); }
button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; width:max-content; border:1px solid var(--ink); border-radius:12px; padding:12px 18px; background:var(--ink); color:white; font:800 13px/1 var(--sans); cursor:pointer; box-shadow:0 8px 18px rgba(21,33,31,.15); transition:transform .18s,background .18s,color .18s,box-shadow .18s; } button span { color:var(--lime); font-size:18px; } button:hover { transform:translateY(-2px); background:#263d38; box-shadow:0 12px 24px rgba(21,33,31,.2); } button:active { transform:translateY(0); } button.secondary { background:var(--lime); color:var(--ink); border-color:var(--lime-deep); } button.secondary span { color:var(--ink); } button.text { min-height:38px; background:transparent; color:var(--ink); border-color:transparent; box-shadow:none; padding:8px; }
button:focus-visible,.brand:focus-visible,.skip-link:focus-visible,.admin-nav a:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
.admin-nav { display:flex; gap:8px; margin-top:26px; padding:8px; width:max-content; max-width:100%; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }.admin-nav a { padding:8px 12px; border-radius:9px; color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; }.admin-nav a:hover { background:var(--lime); color:#15211f; }.admin-section { scroll-margin-top:110px; }.student-directory { min-width:0; }.student-list-item>div:first-child { min-width:0; }.student-list-item .meta { overflow-wrap:anywhere; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin:68px 0 28px; }.section-number { color:rgba(21,33,31,.10); font:700 clamp(58px,9vw,110px)/.7 var(--serif); }.row { display:flex; align-items:center; justify-content:space-between; gap:18px; }.form-pair { display:grid; grid-template-columns:1.35fr .65fr; gap:16px; }
.badge { display:inline-flex; align-items:center; width:max-content; border-radius:999px; padding:7px 11px; background:rgba(128,221,209,.28); color:#15564f; font-size:10px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.badge.warning { background:rgba(255,179,87,.25); color:#7a4c10; }.message { position:sticky; top:96px; z-index:8; margin:22px 0; padding:14px 18px; border:1px solid rgba(21,86,79,.15); border-radius:13px; background:#ddf5f0; color:#154b45; box-shadow:0 12px 32px rgba(21,33,31,.10); font-weight:700; }.message.error { border-color:rgba(143,43,34,.2); background:#fde6e1; color:#852c24; }
.checks { display:flex; flex-wrap:wrap; gap:9px; }.checks label { display:flex; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.7); cursor:pointer; }.checks input { width:auto; min-height:auto; margin:0 7px 0 0; accent-color:var(--ink); } fieldset { min-width:0; border:1px solid var(--line); border-radius:14px; padding:16px; }.integration-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }.integration { border:1px solid var(--line); border-radius:14px; padding:18px; background:rgba(244,244,237,.58); }.integration p { margin:6px 0 12px; color:var(--muted); font-size:13px; }
.list { display:grid; margin-top:12px; }.list-item { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }.list-item:last-child { border:0; }.meta { color:var(--muted); font-size:12px; white-space:pre-line; }.prompt { white-space:pre-line; color:var(--ink-soft); }.empty { color:var(--muted); font-style:italic; } footer { max-width:1200px; margin:auto; padding:26px 24px 44px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } footer p:last-child { margin-left:auto; }
:root[data-theme="dark"] body::before { background:radial-gradient(circle at 88% 8%,rgba(101,207,194,.12),transparent 27rem),radial-gradient(circle at 3% 46%,rgba(255,138,119,.10),transparent 24rem),linear-gradient(rgba(238,244,241,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(238,244,241,.025) 1px,transparent 1px); background-size:auto,auto,48px 48px,48px 48px; }
:root[data-theme="dark"] .site-header { background:rgba(13,21,19,.86); }
:root[data-theme="dark"] .brand-mark { background:#20332f; color:var(--lime); }
:root[data-theme="dark"] .skip-link { color:#15211f; }
:root[data-theme="dark"] .orbit { border-color:rgba(238,244,241,.20); }
:root[data-theme="dark"] .card:hover { border-color:rgba(238,244,241,.28); }
:root[data-theme="dark"] .hero-pills span,:root[data-theme="dark"] .checks label { background:rgba(21,35,31,.76); }
:root[data-theme="dark"] .card { background:rgba(21,35,31,.94); }
:root[data-theme="dark"] .card-index,:root[data-theme="dark"] .section-number { color:rgba(238,244,241,.12); }
:root[data-theme="dark"] .accent-card { background:linear-gradient(145deg,rgba(201,244,93,.10),rgba(21,35,31,.96) 45%); }
:root[data-theme="dark"] input,:root[data-theme="dark"] select,:root[data-theme="dark"] textarea { background:rgba(8,14,12,.72); border-color:rgba(238,244,241,.25); }
:root[data-theme="dark"] input:focus,:root[data-theme="dark"] select:focus,:root[data-theme="dark"] textarea:focus { background:#101b18; }
:root[data-theme="dark"] button:not(.theme-toggle):not(.text) { background:#eef4f1; border-color:#eef4f1; color:#15211f; }
:root[data-theme="dark"] button:not(.theme-toggle):not(.text) span { color:#54710f; }
:root[data-theme="dark"] button:not(.theme-toggle):not(.text):hover { background:#dce7e2; }
:root[data-theme="dark"] button.text { color:var(--ink); }
:root[data-theme="dark"] .integration { background:rgba(8,14,12,.52); }
:root[data-theme="dark"] .badge { color:#c9fff6; }
:root[data-theme="dark"] .badge.warning { color:#ffdcae; }
:root[data-theme="dark"] .floating-word { border-color:var(--line); }
:root[data-theme="dark"] .message { background:#173a34; color:#bfece4; }
:root[data-theme="dark"] .message.error { background:#42211d; color:#ffd0c8; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; }.header-note { display:none; }.hero { min-height:auto; grid-template-columns:1fr; padding-top:55px; }.hero-copy { max-width:760px; }.hero-orbit { min-height:340px; max-width:520px; width:100%; margin:auto; }.auth-grid { grid-template-columns:1fr; }.form-pair { grid-template-columns:1fr; } }
@media (max-width:680px) { main { padding-inline:18px; padding-bottom:66px; }.site-header { min-height:72px; padding-inline:18px; }.identity .meta,.theme-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.theme-toggle { width:40px; padding:8px; }.hero { gap:24px; padding:42px 0 46px; }.hero-orbit { min-height:290px; }.floating-word { font-size:9px; }.admin-grid,.students-grid,.integration-grid { grid-template-columns:1fr; }.section-heading { align-items:flex-start; margin-top:52px; }.section-number { display:none; }.row { align-items:flex-start; flex-direction:column; }.card { border-radius:19px; }.list-item { flex-direction:column; gap:4px; } footer { align-items:flex-start; flex-wrap:wrap; } footer p:last-child { width:100%; margin-left:44px; } }
@media (max-width:420px) { .brand>span:last-child { font-size:18px; }.hero-orbit { min-height:250px; }.word-one { left:-4%; }.word-two { right:-3%; }.hero-pills span { font-size:11px; }.card { padding:24px 20px; } button:not(.text):not(.theme-toggle) { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }