:root { color-scheme: dark; --beta-bg:#17191d; --beta-surface:#22262c; --beta-field:#17191d; --beta-line:#434b57; --beta-ink:#f4f5f7; --beta-muted:#c1c8d1; --beta-blue:#2563eb; --beta-accent:#a8c3ff; font: 400 16px/1.55 Jost,system-ui,sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--beta-bg); color:var(--beta-ink); }
a { color:var(--beta-accent); text-underline-offset:3px; }
.annotate-beta-header,.annotate-beta-layout { width:min(1150px,calc(100% - 40px)); margin:auto; }
.annotate-beta-header { padding:23px 0; border-bottom:1px solid var(--beta-line); }
.annotate-beta-header a { display:inline-flex; align-items:center; gap:10px; color:var(--beta-ink); text-decoration:none; font:400 24px/1 'Cal Sans',Jost,system-ui,sans-serif; }
.annotate-beta-header img { display:block; border-radius:10px; }
.annotate-beta-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr); gap:clamp(26px,5vw,68px); align-items:start; padding:clamp(28px,6vw,74px) 0 70px; }
.annotate-beta-intro h1,.annotate-beta-card h2 { font-family:'Cal Sans',Jost,system-ui,sans-serif; font-weight:400; letter-spacing:-.035em; line-height:1.05; }
.annotate-beta-intro h1 { font-size:clamp(40px,6vw,73px); margin:8px 0 16px; }
.annotate-beta-intro p:not(.annotate-beta-label) { max-width:43ch; color:var(--beta-muted); font-size:clamp(17px,2vw,21px); margin:0 0 22px; }
.annotate-beta-label { color:var(--beta-accent); font-weight:600; margin:0; }
.annotate-beta-preview { display:block; width:100%; height:auto; border:1px solid var(--beta-line); border-radius:15px; box-shadow:0 20px 50px #0004; }
.annotate-beta-card { background:var(--beta-surface); border:1px solid var(--beta-line); border-radius:17px; padding:clamp(18px,3vw,30px); }
.annotate-beta-card h2 { margin:0; font-size:30px; }
.annotate-beta-card > p { color:var(--beta-muted); }
.annotate-beta-card label { display:block; margin:14px 0 5px; font-weight:600; }
.annotate-beta-card label span { font-weight:400; color:var(--beta-muted); }
.annotate-beta-card :is(input,select,textarea) { display:block; width:100%; border:1px solid var(--beta-line); border-radius:8px; background:var(--beta-field); color:var(--beta-ink); font:inherit; padding:9px 11px; }
.annotate-beta-card textarea { resize:vertical; }
.annotate-beta-button { width:100%; margin-top:17px; padding:12px 15px; border:0; border-radius:9px; background:var(--beta-blue); color:white; font:600 16px Jost,system-ui,sans-serif; cursor:pointer; }
.annotate-beta-button:hover { background:#1d4ed8; }
.annotate-beta-download { display:inline-flex; align-items:center; width:auto; margin:0 0 22px; text-decoration:none; }
.annotate-beta-instructions { margin-top:24px; }
.annotate-beta-instructions h2 { margin:24px 0 8px; font:400 27px/1.1 'Cal Sans',Jost,system-ui,sans-serif; }
.annotate-beta-instructions ol { padding-inline-start:24px; }
.annotate-beta-instructions li + li { margin-top:6px; }
.annotate-beta-intro .annotate-beta-instructions p:not(.annotate-beta-label) { max-width:none; margin:8px 0 16px; font-size:16px; }
.annotate-beta-button:disabled { cursor:wait; opacity:.7; }
.annotate-beta-privacy { margin:10px 0 0; font-size:14px; }
#beta-status:empty { margin:0; }
#beta-status:not(:empty) { padding:11px 13px; border:1px solid var(--beta-line); border-radius:8px; color:#b7f0cc; }
#beta-status[data-error] { color:#ffbac3; }
:focus-visible { outline:2px solid var(--beta-accent); outline-offset:3px; }
@media(max-width:760px) { .annotate-beta-layout { grid-template-columns:1fr; } .annotate-beta-card { grid-row:2; } }

/* Optional first-lesson practice; stays collapsed until a teacher chooses it. */
.annotate-beta-practice { margin:12px 0 20px; border:1px solid var(--beta-line); border-radius:12px; padding:12px 16px; background:var(--beta-surface); }
.annotate-beta-practice summary { color:var(--beta-ink); font-weight:700; cursor:pointer; }
.annotate-beta-practice[open] summary { margin-bottom:12px; }
.annotate-beta-practice-grid { display:grid; grid-template-columns:repeat(4,minmax(0,64px)); gap:8px; margin:12px 0 16px; max-width:280px; }
.annotate-beta-tile { display:block; aspect-ratio:1; border:2px solid var(--beta-accent); border-radius:8px; background:var(--beta-field); }