* { box-sizing: border-box }
:root { color-scheme: light; --ink:#162d26; --muted:#50625b; --forest:#153a30; --lime:#d9ed9e; --paper:#f4f5ee; --line:#dce3d9; --white:#fff; font-family: system-ui, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper) }
body { margin:0; min-height:100vh; display:flex; flex-direction:column }
a { color:inherit; text-decoration:none }
button,input,textarea,select { font:inherit }
button { cursor:pointer }
button:disabled { cursor:not-allowed; opacity:.55 }
[hidden] { display:none !important }
:focus-visible { outline:3px solid #689853; outline-offset:3px }
.shell { width:min(1120px, calc(100% - 48px)); margin-inline:auto }
main { flex:1 }
.top { background:#fffefa; border-bottom:1px solid var(--line) }
.top-inner { min-height:77px; display:flex; align-items:center; justify-content:space-between; gap:16px }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:21px; font-weight:550; line-height:1.1 }
.brand small { display:block; letter-spacing:.16em; font-size:9px; font-weight:800; margin-top:6px; color:var(--muted) }
.mark { width:44px; height:44px; background:var(--forest); color:var(--lime); display:grid; place-items:center; border-radius:12px; font-size:26px }
.outline,.primary { border:1px solid var(--line); background:#fff; border-radius:9px; padding:11px 16px; font-size:14px; font-weight:750; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap }
.outline:hover { background:#eff3e8 }
.primary { background:var(--lime); border-color:#c6dc87 }
.primary:hover { background:#cde68e }
.crumb { padding:23px 0 19px; font-size:13px; color:var(--muted) }
.crumb span { padding:0 8px; opacity:.55 }
.hero { background:var(--forest); color:#fff; border-radius:20px; min-height:226px; padding:35px 42px; display:flex; align-items:center; justify-content:space-between; overflow:hidden; position:relative; isolation:isolate; gap:20px }
.hero > div:first-child { z-index:1 }
.hero h1 { font-size:clamp(42px,7vw,82px); font-weight:760; line-height:1; letter-spacing:-.075em; margin:12px 0 10px }
.hero h1 span,.hero .eyebrow { color:var(--lime) }
.hero p { margin:0; font-size:clamp(14px,2vw,19px); color:#dae7dd }
.eyebrow { display:block; font-weight:800; font-size:11px; letter-spacing:.18em }
.green { color:#38664d }
.hero-art { width:146px; height:146px; flex:0 0 146px; position:relative; border:1px solid #98ba8670; border-radius:50%; display:grid; place-items:center; text-align:center; margin-right:34px; color:var(--lime) }
.hero-art::before,.hero-art::after { content:""; border:1px solid #98ba8640; position:absolute; inset:-26px; border-radius:50%; z-index:-1 }
.hero-art::after { inset:-55px; box-shadow:0 0 0 35px #98ba8614,0 0 0 36px #98ba8629,0 0 0 70px #98ba8612 }
.hero-art strong { font-size:56px; letter-spacing:-.08em; line-height:.93 }
.hero-art small { display:block; font-size:11px; letter-spacing:.2em; margin-top:9px }
.overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:15px 0 20px }
.tile { display:flex; align-items:center; gap:13px; padding:15px; min-height:74px; background:var(--white); border:1px solid var(--line); border-radius:13px; font-weight:700 }
.tile h2 { font-size:15px; margin:0 0 3px }
.tile p { font-size:13px; font-weight:400; margin:0; color:var(--muted) }
.tile-num { flex:none; min-width:40px; height:39px; padding:0 6px; display:grid; place-items:center; background:#ecf2e5; border-radius:9px; font-size:16px; color:#345a46; font-variant-numeric:tabular-nums }
.welcome-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:15px }
.panel { background:var(--white); border:1px solid var(--line); border-radius:16px; padding:25px 28px }
.panel h2 { margin:7px 0 12px; font-size:25px; letter-spacing:-.04em }
.panel p,.rules,.requirements { line-height:1.55 }
.rules { padding-left:20px; margin-bottom:0; color:#354a40; font-size:14px }
.rules li { margin:9px 0 }
.rules li::marker { color:#548961 }
.access { background:#edf2e6 }
.access p { margin:8px 0; font-size:15px }
.muted { color:var(--muted) }
.footer { color:var(--muted); display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-top:25px; border-top:1px solid var(--line); padding:18px 0 }
.consent { display:flex; gap:9px; align-items:flex-start; font-size:14px; margin:17px 0 }
input[type=checkbox],input[type=radio] { accent-color:var(--forest) }
.testing .top,.testing .footer { display:none }
.testing main { width:min(910px,calc(100% - 40px)); padding:25px 0 }
.exam-top,.section-top { display:flex; justify-content:space-between; gap:12px; align-items:center }
.exam-top strong { display:block; margin-top:4px }
.clock { background:var(--forest); color:var(--lime); padding:12px 17px; border-radius:10px; font-size:25px; font-variant-numeric:tabular-nums }
.clock.urgent { background:#842b31; color:white }
progress { appearance:none; border:0; width:100%; height:8px; margin:14px 0; border-radius:99px; background:#e0e9d9; overflow:hidden }
progress::-webkit-progress-bar { background:#e0e9d9 }
progress::-webkit-progress-value { background:#55865c }
progress::-moz-progress-bar { background:#55865c }
.question h1,.end h1,.login h1 { font-size:clamp(25px,4vw,36px); letter-spacing:-.045em; line-height:1.18; margin:6px 0 19px }
.fields { min-width:0; border:0; padding:0; margin:0 }
.fields legend { font-size:14px; color:var(--muted); margin-bottom:10px }
.option,.pair { display:flex; gap:12px; align-items:center; padding:11px 13px; border:1px solid var(--line); border-radius:10px; margin-bottom:8px }
.option { cursor:pointer }
.option:has(:checked) { border-color:#618c5e; background:#eef4e7 }
.letter { background:#e8eee4; border-radius:6px; padding:4px 8px }
.pair { justify-content:space-between }
.pair select { width:38%; flex:none }
.option-bank { margin:0 0 12px; background:#edf2e6; padding:12px 14px; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border-radius:10px }
.scenario { margin-top:0 }
.requirements { padding-left:22px }
input:not([type=checkbox],[type=radio]),textarea,select { display:block; width:100%; min-width:0; border:1px solid #becbbd; border-radius:8px; background:white; color:var(--ink); padding:10px 11px }
textarea { resize:vertical }
.notice { font-size:14px; color:#7b3d24; overflow-wrap:anywhere }
.notice:empty { display:none }
.question .primary { margin-top:14px }
.end { margin-top:35px }
.admin-hero h1 { font-size:clamp(37px,6vw,63px) }
.login { max-width:560px; margin:15px auto 0 }
.login label,.invite label,.grade label { display:grid; gap:6px; font-size:14px; font-weight:700 }
.login button { margin-top:12px }
.invite { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:12px }
.actions,.copy-row { display:flex; gap:8px; flex-wrap:wrap }
.copy-row input { flex:1 }
.results { margin-top:15px }
.table-wrap { overflow:auto }
table { width:100%; border-collapse:collapse; text-align:left; font-size:14px }
th,td { border-bottom:1px solid var(--line); padding:11px; white-space:nowrap }
th { color:var(--muted); background:#f4f7f0 }
td small { display:block; margin-top:3px }
.badge { background:#eef1eb; padding:4px 8px; border-radius:20px; font-size:12px; font-weight:750 }
.badge.invalid { background:#f8e3df; color:#812c30 }
.badge.submitted { background:#e4f0db; color:#255a35 }
dialog { width:min(760px,calc(100% - 24px)); max-height:85vh; color:var(--ink); border:1px solid var(--line); border-radius:15px; padding:20px }
dialog::backdrop { background:#172e28a0 }
.review { border:1px solid var(--line); padding:10px 12px; border-radius:8px; margin:7px 0 }
.review summary { font-weight:700; cursor:pointer }
.pre { white-space:pre-wrap; overflow-wrap:anywhere }
.grade { display:grid; gap:10px; margin-top:16px }
.grade button { justify-self:start }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%) }
@media(max-width:850px) { .invite { grid-template-columns:1fr 1fr }.invite .actions { grid-column:1/-1 } }
@media(max-width:620px) { .shell { width:calc(100% - 28px) }.top-inner { min-height:64px }.top .outline { white-space:normal; text-align:center; padding:8px; font-size:12px }.hero { padding:24px; min-height:176px }.hero-art { width:70px; height:70px; flex-basis:70px; margin-right:0 }.hero-art strong { font-size:33px }.hero-art small { font-size:7px }.overview,.welcome-grid,.invite { grid-template-columns:1fr }.tile { min-height:58px; padding:9px 12px }.panel { padding:19px }.footer,.pair,.section-top { flex-wrap:wrap }.pair select { width:100% }.admin-hero { align-items:flex-start; flex-direction:column }.option-bank { grid-template-columns:1fr } }