:root{font-family:Inter,Arial,sans-serif;color:#162b25;background:#f4f5f0;line-height:1.5;--ink:#162b25;--forest:#123b31;--muted:#57675d;--border:#dbe2d9;--paper:#fff;--lime:#dff38a;--danger:#a32932}
*{box-sizing:border-box}
body{margin:0;min-width:310px;min-height:100vh;display:flex;flex-direction:column}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.53}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #5b8c52;outline-offset:3px}
[hidden]{display:none!important}
.top{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--border)}
.top-inner,.foot,.shell{width:min(1136px,calc(100% - 72px));margin-inline:auto}
.top-inner{height:75px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:19px;font-weight:750;letter-spacing:-.055em;text-decoration:none;white-space:nowrap}
.brand strong{font-weight:450}
.mark{display:inline-flex;background:var(--forest);color:var(--lime);width:36px;height:36px;border-radius:10px}
.mark svg{width:100%;height:100%}
.top-right,.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.top-right{justify-content:flex-end}
.top-right .user{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.foot{display:flex;justify-content:space-between;gap:14px;padding-block:19px 25px;border-top:1px solid var(--border);font-size:10px;font-weight:750;letter-spacing:.135em;color:var(--muted);margin-top:auto}
.shell{padding-block:46px 40px;min-height:470px}
.loading{padding:40px 0;color:var(--muted)}
.entry{display:grid;grid-template-columns:1.27fr 1fr;gap:22px;min-height:485px;align-items:stretch}
.hero,.paper,.sidebar,.question,.summary{border-radius:20px}
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:#f5faee;display:flex;flex-direction:column;justify-content:space-between;padding:42px;min-height:445px}
.hero::before,.hero::after{content:"";pointer-events:none;position:absolute;z-index:-1;border:1px solid #7a9c6f66;border-radius:50%;width:410px;height:410px;right:-154px;bottom:-200px}
.hero::after{width:540px;height:540px;right:-219px;bottom:-265px}
.hero-grid{position:absolute;z-index:-1;inset:auto 0 0 auto;width:74%;height:72%;opacity:.3;background-image:linear-gradient(#a0cb832e 1px,transparent 1px),linear-gradient(90deg,#a0cb832e 1px,transparent 1px);background-size:33px 33px;mask-image:linear-gradient(145deg,transparent 5%,black)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#526955;margin:0 0 12px}
.hero .eyebrow{color:var(--lime)}
.hero h1{font-size:clamp(48px,6vw,81px);line-height:.97;letter-spacing:-.073em;margin:18px 0 21px;font-weight:780}
.hero p:not(.eyebrow){font-size:16px;color:#d1dfd6;max-width:360px;margin:0}
.facts{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
.fact{padding:6px 11px;border:1px solid #afc7ae77;border-radius:8px;color:#f4f8ec;font-size:12px;font-weight:700}
.paper,.sidebar,.question,.summary{background:var(--paper);border:1px solid var(--border)}
.paper{padding:38px;display:flex;justify-content:center;flex-direction:column}
h1,h2,h3,p{overflow-wrap:anywhere}
.paper h2,.summary h1,.admin-head h1{margin:0;line-height:1.06;letter-spacing:-.049em;font-size:clamp(30px,4vw,43px)}
.muted,.caption{color:var(--muted)}
.caption{font-size:13px}
.paper p{margin:12px 0}
.paper .eyebrow{margin-top:0}
.form{display:grid;gap:14px;margin-top:20px}
.field{display:grid;gap:6px;font-size:13px;font-weight:700}
input{width:100%;color:var(--ink);border:1px solid #cbd5cc;border-radius:9px;min-height:47px;padding:11px 13px;background:#fbfcf9}
input::placeholder{color:#748178}
.button,.quiet,.icon-button{border-radius:9px;border:1px solid transparent;min-height:43px;padding:9px 14px;font-size:13px;font-weight:750;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.25}
.button{background:var(--forest);color:#fff}
.button:hover:not(:disabled){background:#205244}
.button.primary{background:var(--lime);color:var(--ink);border-color:#cde477}
.button.primary:hover:not(:disabled){background:#d1eb68}
.quiet,.icon-button{background:#fff;color:var(--ink);border-color:var(--border)}
.quiet:hover:not(:disabled),.icon-button:hover:not(:disabled){background:#f2f6ef}
.icon-button{font-size:23px;padding:4px 12px}
.text-link{font-size:13px;font-weight:750;text-underline-offset:4px}
.notice{font-size:13px;margin:0;color:var(--danger);min-height:0}
.notice:empty{display:none}
.notice.good{color:#29643a}
.steps{padding-left:23px;margin:14px 0 21px;display:grid;gap:9px;color:#33473d;font-size:14px}
.timer{font-size:17px;font-weight:780;font-variant-numeric:tabular-nums;color:var(--forest);background:#eaf4e7;border-radius:8px;padding:7px 11px;min-width:80px;text-align:center}
.timer.low{background:#ffe8e7;color:var(--danger)}
.exam{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:20px;align-items:start}
.question{overflow:hidden}
.question-inner{padding:26px 28px}
.question-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:21px}
.question-head h1{margin:0;font-size:27px;letter-spacing:-.04em}
.pill{font-size:11px;font-weight:750;background:#edf3e9;border-radius:6px;padding:5px 8px;color:#395742}
.question-image{display:block;max-width:100%;height:auto}
.prompt{margin:0;font-family:Georgia,serif;font-size:clamp(19px,3vw,23px);color:#17251d}
.answer-area{display:grid;gap:8px;margin-top:23px}
.answer-area .field{max-width:520px}
.answer-area .caption{margin:0}
.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:500px}
.choice{font-size:15px;min-height:45px}
.choice[aria-pressed=true],.nav-num[aria-current=step]{background:var(--forest);color:#fff;border-color:var(--forest)}
.choice[aria-pressed=true]:hover,.nav-num[aria-current=step]:hover{background:#205244;color:#fff}
.question-foot{display:flex;justify-content:space-between;gap:8px;padding:14px 28px;border-top:1px solid var(--border);background:#fbfcf9}
.sidebar{padding:20px;position:sticky;top:92px}
.sidebar h2{font-size:17px;margin:0 0 5px;letter-spacing:-.02em}
.sidebar p{margin:0 0 10px}
progress{display:block;width:100%;height:7px;border:0;border-radius:10px;background:#e7eee5;overflow:hidden}
progress::-webkit-progress-bar{background:#e7eee5}
progress::-webkit-progress-value{background:#4c8056}
progress::-moz-progress-bar{background:#4c8056}
.number-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:15px 0}
.nav-num{padding:0;min-height:35px;font-variant-numeric:tabular-nums}
.nav-num.done:not([aria-current=step]){background:#eaf4dc;border-color:#c7dbc1}
.sidebar .button{width:100%}
.share-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:14px;color:var(--muted);font-size:12px}
.dot{background:#638c55;width:7px;height:7px;border-radius:50%}
.dot.off{background:#b07836}
.summary{max-width:710px;margin-inline:auto;padding:40px}
.summary p{max-width:580px}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:23px}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:19px;align-items:start}
.admin-grid .paper{padding:22px;min-width:0}
.admin-grid h2,.dialog-head h2{font-size:22px;letter-spacing:-.025em;margin:0}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;text-align:left}
th,td{border-bottom:1px solid var(--border);padding:10px 7px;vertical-align:top;overflow-wrap:anywhere}
th{color:var(--muted)}
td .quiet{min-height:32px;padding:5px 8px;white-space:nowrap}
.table-actions{display:flex;gap:4px;flex-wrap:wrap}
.credentials{padding:10px;border-radius:8px;background:#eff5e9;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;margin:12px 0}
dialog{width:min(690px,calc(100% - 30px));border:1px solid var(--border);border-radius:16px;color:var(--ink);padding:22px;max-height:90vh}
dialog::backdrop{background:#132a23a6}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.screen-frame{display:block;max-width:100%;margin:10px auto;border-radius:8px}
.mode-link{border-color:transparent;background:transparent;min-height:38px}
.mode-link[aria-current=page]{background:#eaf2e6;color:var(--forest)}
.mode-card{gap:13px}
.mode-card h2{margin-bottom:9px}
.mode-option{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;border:1px solid var(--border);border-radius:13px;padding:17px 16px;background:#fbfcf9;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.mode-option:first-of-type{background:#f0f7df;border-color:#d4e3bd}
.mode-option:hover{transform:translateY(-2px);border-color:#82a177;background:#eaf4dc}
.mode-option strong,.mode-option small{display:block}
.mode-option small{color:var(--muted);margin-top:4px;font-size:13px}
.mode-option .arrow{font-size:24px;color:var(--forest)}
.code-input{font-weight:750;font-size:24px;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.option-stack{grid-template-columns:1fr;max-width:660px}
.option-stack .choice{text-align:left;justify-content:flex-start;font-weight:550;gap:12px;min-width:0}
.choice-letter{flex:none;display:grid;place-items:center;min-width:26px;height:26px;border-radius:6px;background:#eaf0e7;color:var(--forest);font-weight:800}
.choice-text{overflow-wrap:anywhere}
.choice.correct:disabled{background:#e6f4db;border-color:#89ad76;opacity:1}
.choice.incorrect:disabled{background:#ffeae7;border-color:#d79c94;opacity:1}
.practice-card{max-width:840px;margin:0 auto}
.practice-card .question-foot{justify-content:flex-end}
.practice-card .question-head{margin-bottom:6px}
.arrive{animation:arrive .24s ease-out both}
@keyframes arrive{from{transform:translateY(6px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.arrive{animation:none}.mode-option{transition:none}}
@media(max-width:850px){.top-inner,.shell,.foot{width:calc(100% - 36px)}.entry{grid-template-columns:1fr 1fr}.hero,.paper{padding:29px}.admin-grid{grid-template-columns:minmax(0,1fr)}.admin-grid aside{grid-row:1}}
@media(max-width:650px){.shell{padding-block:23px}.top-inner{height:62px}.entry,.exam{grid-template-columns:1fr;gap:13px}.hero{min-height:278px;padding:25px}.hero h1{font-size:48px;margin:10px 0 13px}.hero p:not(.eyebrow){font-size:14px}.facts{margin-top:14px}.paper,.summary{padding:23px}.sidebar{position:static}.question-inner{padding:20px}.question-foot{padding:12px 20px}.top-right .user{display:none}.foot{font-size:8px}.admin-head{align-items:flex-start}.number-grid{grid-template-columns:repeat(10,1fr)}}
@media(max-width:390px){.top-inner,.shell,.foot{width:calc(100% - 24px)}.number-grid{grid-template-columns:repeat(5,1fr)}.brand{font-size:17px}.top-right{gap:5px}}
@media(max-width:550px){.top-right:has(.timer) .mode-link{display:none}.mode-link{padding-inline:8px}}
