/* 雅思工作台 · app/exam/exam.css — owner: E2; 天光 restyle: the Exam agent. docs/EXAM.md §8.9–§8.10, docs/LIFE.md §3, §6.6.
   Host tokens only; only #exam .ex-* #bx .bx-* .exr .exn .exs (§10.5). --now = now, --lamp = right / lit, --blueprint = plan,
   --red only for 差一点. The page is a day out on the sheet (a ticket, a calendar, a star chart, a postmark); the overlay a scene:
   its strip on the sky (--on-sky), the question on paper, texts on objects (life/objects.css). Targets ≥ 44px; two columns from
   900px. Motion is fx.js; CSS adds only press springs, dropped under reduced motion. */
#exam,#bx{--t-ok:color-mix(in srgb,var(--lamp-ink) 70%,var(--ink));--t-no:color-mix(in srgb,var(--red) 75%,var(--ink));--t-pl:color-mix(in srgb,var(--blueprint) 70%,var(--ink));--t-nw:color-mix(in srgb,var(--now-ink) 60%,var(--ink))}
.ex{display:grid;gap:26px}
.ex-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap}
.ex-h1{margin:0}
.ex-sub{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;font-size:13.5px;color:var(--ink-2)}
.ex-en{font:600 11.5px/1.4 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.ex-grid{display:grid;gap:34px}
.ex-col{display:contents}
@media (min-width:900px){.ex-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start;gap:40px}.ex-col{display:grid;gap:40px}}
#exam .ex-card,body.lf-staged #view #exam .ex-card{position:relative;display:grid;gap:12px;min-width:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.ex-card p,.exr p{margin:0}
.ex-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;margin:0;font:inherit}
.ex-hen{font:italic 380 25px/1.15 var(--f-display);letter-spacing:-.005em;color:var(--ink)}
.ex-hs{font-size:13px;color:var(--ink-3)}
.ex-hl,.ex-tg{margin-left:auto;font-size:13.5px}
.ex-tg{color:var(--t-pl)}
.ex-meta{font-size:13.5px;color:var(--ink-2);line-height:1.6}
.ex-why{font-size:14.5px;line-height:1.65}
.ex-acts{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-top:4px!important}
.ex-go{min-height:46px;padding:10px 26px;font-size:15.5px}
.ex-later{font-size:14px;color:var(--ink-2);text-decoration-color:var(--link-line)}
.ex-patrol{margin-left:auto;font-size:13.5px}
.ex-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;font-weight:700;font-size:16px;line-height:1.45}
.ex-t>span{min-width:0}
.ex-t .link{font-weight:500;font-size:14px}
.ex-moon{width:15px;height:15px;flex:none;fill:var(--moon);filter:drop-shadow(0 0 4px var(--moon))}
.ex-done .ex-moon{fill:var(--lamp);filter:none}
.ex-pp{white-space:nowrap}.ex-pp.done{color:var(--lamp-ink)}.ex-pp.cur{color:var(--moon-ink);font-weight:700}
.ex-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* the day out: a ticket with today's places */
.ex-tk-main{position:relative;display:grid;gap:10px;padding:22px 22px 18px}
.ex-tk-eb{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;font-size:12.5px;color:var(--ink-3)}
.ex-tk-eb span:first-child{font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--moon-ink)}
.ex-tk-t{margin:0;font:360 clamp(30px,7.6vw,40px)/1.05 var(--f-display);letter-spacing:-.018em}
.ex-tk-t i{font-weight:330}
.ex-tk-stub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 14px;font-size:12.5px;color:var(--ink-3)}
.ex-tk-stub p{margin:0}
.ex-tk .ex-stamp{position:absolute;top:16px;right:16px;--stamp-rot:-14deg}
.ex-tk.is-done .ex-tk-t{padding-right:92px}
.ex-now .ex-tk{filter:drop-shadow(0 1px 1px rgba(40,24,0,.1)) drop-shadow(0 16px 18px rgba(12,6,34,.4)) drop-shadow(0 0 18px var(--now-glow))}
.ex-route{list-style:none;margin:8px 0 4px;padding:0;display:flex}
.ex-route li{position:relative;flex:1 1 0;min-width:0;display:grid;justify-items:center;align-content:start;gap:5px;font-size:12px;font-weight:600;line-height:1.25;text-align:center}
.ex-route li:not(:last-child)::after{content:"";position:absolute;top:16px;left:calc(50% + 20px);right:calc(-50% + 20px);border-top:2px dashed var(--rule)}
.ex-pin{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--blueprint),0 3px 8px -4px rgba(39,34,60,.5);color:var(--blueprint)}
.ex-route li:first-child .ex-pin{background:var(--blueprint);color:#fff}
.ex-how{font-size:13px;color:var(--ink-3)}
.ex-how summary{min-height:36px;display:inline-flex;align-items:center;color:var(--link);cursor:pointer;list-style:none}
.ex-how summary::-webkit-details-marker{display:none}
.ex-how p{margin:4px 0 6px!important;line-height:1.7;color:var(--ink-2)}
.ex-tk-stub .ex-how[open]{flex:1 1 100%}

/* the week test: a calendar page, a part a day */
.ex-cal{display:grid;gap:10px}
/* a calendar page ruled into four days (no tiles); today's part ringed in pen, a done one washed gold */
.ex-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ex-part{position:relative;display:grid;justify-items:center;align-content:center;gap:1px;min-height:82px;padding:8px 2px;border:0;border-radius:0;background:none;box-shadow:inset 1px 0 0 var(--line);
color:var(--ink);font:inherit;text-align:center;cursor:pointer}
.ex-part:first-child{box-shadow:none}
.ex-part.cur::after{content:"";position:absolute;inset:5px 7px;border:2px solid var(--moon-ink);border-radius:50%;opacity:.75;transform:rotate(-5deg);pointer-events:none}
.ex-part small{font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.ex-part b{font:600 16px/1.35 var(--f-display-zh)}
.ex-part.done{cursor:default;background:linear-gradient(135deg,rgba(242,169,59,.16),rgba(242,169,59,.06))}
.ex-part.done small:last-child{color:var(--lamp-ink);font-weight:600}
.ex-cal.is-sketch{background:linear-gradient(var(--line),var(--line)) 0 0/100% 20px no-repeat,var(--pp)}
.ex-cal.is-sketch .ex-part{cursor:default;color:var(--ink-2)}
.ex-cal .ex-meta{font-size:13px}

/* what is weak: a night sky of every sub-skill; the list is the content */
.ex-skyc{position:relative;overflow:hidden;border-radius:22px;background:radial-gradient(110% 90% at 82% 0,rgba(120,96,220,.5),transparent 62%),radial-gradient(90% 80% at 6% 108%,rgba(160,70,120,.42),transparent 70%),linear-gradient(180deg,#0D1440,#171241);
box-shadow:var(--shadow-1)}
.ex-skyc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;background:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 38% 8%,#fff,transparent),radial-gradient(1.2px 1.2px at 64% 30%,#fff,transparent),
radial-gradient(1px 1px at 86% 62%,#fff,transparent),radial-gradient(1px 1px at 22% 78%,#fff,transparent),radial-gradient(1px 1px at 52% 92%,#fff,transparent),radial-gradient(1px 1px at 94% 12%,#fff,transparent)}
.ex-sky{position:relative;display:block;width:100%;height:auto}
.ex-sky .gl{font:15px/1 var(--f-display-zh);fill:rgba(255,248,251,.78);letter-spacing:.1em}
.ex-sky .cl line{stroke:#AFA8FF;stroke-width:.6;opacity:.32}
.ex-sky .cl line.lk{stroke-dasharray:2 3;opacity:.5}
.ex-sky .cl line.lkw{stroke:#FFB3A7;stroke-dasharray:2 3;opacity:.8}
.ex-sky .wkl{fill:none;stroke:#FFD0C6;stroke-width:1.4;opacity:.8;stroke-linejoin:round;filter:drop-shadow(0 0 3px #FFB3A7)}
.ex-sky .sr .cr{fill:#FFC869}
.ex-sky .sr.nw circle{fill:#AFA8FF;opacity:.5}
.ex-sky .sr.st .cr{filter:drop-shadow(0 0 3px #FFC869)}
.ex-sky .sr.wk .cr{fill:#FFF6F0}
.ex-sky .sr .rg{fill:none;stroke:#FFB3A7;stroke-width:1.3}
.ex-sky .sr .hl{fill-opacity:1;pointer-events:none}
.ex-sky .sr.bg text{font-size:10px;fill:rgba(255,248,251,.72)}
.ex-sky .hit{fill:transparent;pointer-events:all}
.ex-sky [data-act],.ex-sky [data-bx]{cursor:pointer}
.ex-weak{list-style:none;margin:0;padding:0;display:grid}
.ex-weak li{display:flex;gap:12px;align-items:center;min-height:52px;padding:6px 0;line-height:1.45}
.ex-wt{flex:1;min-width:0}
.ex-weak b{font-weight:600}
.ex-weak small{color:var(--ink-3);font-size:12.5px}
.ex-ring{flex:none;width:13px;height:13px;border-radius:50%;border:2px solid var(--moon);box-shadow:0 0 8px -1px var(--moon)}
.ex-note{display:block;font-size:12.5px;color:var(--ink-3)}
.ex-go-s{flex:none;min-width:48px;min-height:44px;padding:6px 2px 6px 10px;border:0;background:none;color:var(--ink);font:650 14.5px/1 var(--f-sans);text-shadow:inherit;cursor:pointer}
.ex-go-s:hover{color:var(--t-nw)}

/* the estimate: a postmark */
.ex-estb{display:flex;align-items:center;gap:18px}
.ex-stamp{--stamp:var(--moon-ink)}
.ex-stamp.lamp{--stamp:var(--lamp-ink)}
.ex-stamp.is-empty{border-style:dashed;box-shadow:none;opacity:.6}
.ex-est{flex:1;margin:0;display:grid;gap:3px}
.ex-est div{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px;font-size:14px}
.ex-est dt{font-weight:700}
.ex-est dd{margin:0;color:var(--ink-2)}
.ex-est b,.ex-all b{font:500 18px/1 var(--f-display);color:var(--ink)}
.ex-cL{--c:var(--c-l)}.ex-cR{--c:var(--c-r)}.ex-cW{--c:var(--c-w)}.ex-cS{--c:var(--c-s)}
:is(.ex-cL,.ex-cR,.ex-cW,.ex-cS){color:color-mix(in srgb,var(--c) 75%,var(--ink))}
.ex-q{color:var(--ink-3)}
.ex-all{font-size:14px;color:var(--ink-2)}

/* somewhere else: free practice */
.ex-chips{display:flex;flex-wrap:wrap;gap:0 22px}
/* a choice is a word: the chosen one full ink with a small glowing dot under it (life.css .lf-choice) */
.ex-chip,.ex-n{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:6px 0 12px;border:0;background:none;box-shadow:none;color:var(--air-dim,var(--ink-2));font:inherit;font-size:15px;text-shadow:inherit;cursor:pointer}
.ex-chip:hover,.ex-n:hover{color:var(--ink)}
.ex-chip::after,.ex-n::after{content:"";position:absolute;left:calc(50% - 2.5px);bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--now);box-shadow:var(--lf-glow,0 0 8px var(--now));opacity:0;transform:scale(.3);transition:opacity .25s,transform .4s}
.ex-chip[aria-pressed="true"],.ex-n[aria-pressed="true"]{color:var(--ink);font-weight:600}
.ex-chip[aria-pressed="true"]::after,.ex-n[aria-pressed="true"]::after{opacity:1;transform:none}
.ex-go-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:4px}
.ex-seg{display:inline-flex;align-items:center;gap:0 16px}
.ex-seg-l{font-size:13px;color:var(--ink-3);margin-right:4px}
.ex-n{min-width:44px;justify-content:center;font-variant-numeric:tabular-nums}
.ex-part,.ex-chip,.ex-n,.ex-go-s,.bx-opt,.bx-tfb,.bx-tile{transition:transform .45s cubic-bezier(.2,1.6,.4,1),box-shadow .15s,background-color .15s,color .15s;-webkit-tap-highlight-color:transparent}
.ex-part:active:not(:disabled),.ex-chip:active,.ex-n:active,.ex-go-s:active,.bx-opt:active:not(:disabled),.bx-tfb:active:not(:disabled),.bx-tile:active:not(:disabled){transform:scale(.97);transition-duration:.08s}

/* past trips */
.ex-hist{list-style:none;margin:0;padding:0;display:grid}
.ex-hrow{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:48px;padding:8px 2px;border:0;background:none;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;text-shadow:inherit;cursor:pointer}
.ex-hr{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ex-hrow .ex-moon{width:12px;height:12px;margin-right:5px;vertical-align:-1px;filter:none;fill:var(--lamp)}
.ex-foot{margin:0;font-size:12.5px;color:var(--ink-3)}

/* 「今日」's row (the classic page; 天光's Today draws it on its night postcard) and the 开工单 cell */
.exr{position:relative;display:grid;gap:8px;margin:0 0 18px;padding:16px 18px;border-radius:var(--r-xl);background:var(--sheet);box-shadow:var(--shadow-1);min-width:0}
.exr-k{margin:0;padding:12px 14px;border-radius:var(--r-lg)}
.exr-h{font-size:12px;color:var(--ink-3);letter-spacing:var(--label-ls)}
.exr.ex-now{box-shadow:var(--shadow-1),inset 3px 0 0 var(--now)}

/* ───── the overlay: a scene on the sky, the question on paper ───── */
html.bx-open{overflow:hidden}
html.bx-open .app{visibility:hidden}
#bx{position:fixed;inset:0;z-index:45;display:flex;justify-content:center;color:var(--ink)}
#bx::before{content:"";position:fixed;inset:0 0 auto;height:300px;pointer-events:none;background:linear-gradient(var(--sky-scrim),transparent)}
/* §9: the question reads on air; below the scene the world goes soft (blur + a veil), deepest behind the column, feathered to nothing */
#bx::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--air-veil,rgba(9,7,30,.56));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
-webkit-mask-image:linear-gradient(180deg,transparent 14vh,#000 46vh);mask-image:linear-gradient(180deg,transparent 14vh,#000 46vh)}
@media (min-width:760px){#bx::after{-webkit-mask-image:linear-gradient(180deg,transparent 12vh,#000 42vh),linear-gradient(90deg,transparent calc(50% - 600px),#000 calc(50% - 400px),#000 calc(50% + 400px),transparent calc(50% + 600px));
-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 12vh,#000 42vh),linear-gradient(90deg,transparent calc(50% - 600px),#000 calc(50% - 400px),#000 calc(50% + 400px),transparent calc(50% + 600px));mask-composite:intersect}}
#bx[hidden]{display:none}
.bx-sheet{position:relative;display:flex;flex-direction:column;width:100%;max-width:760px;height:100%;min-height:0}
.bx-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 8px max(18px,env(safe-area-inset-left,0px));
color:var(--on-sky);text-shadow:var(--on-sky-shadow)}
.bx-tt{min-width:0}
#bx-t{margin:0;font:600 14.5px/1.35 var(--f-sans);letter-spacing:.02em}
.bx-n{font-weight:500;font-size:13px;color:var(--on-sky-2);font-variant-numeric:tabular-nums}
.bx-ch{margin:0;font-size:12px;color:var(--on-sky-2)}
.bx-ch:empty{display:none}
.bx-stop.btn.ghost,.bx-stop.btn.ghost:hover{min-height:44px;flex:none;padding:8px 2px 8px 12px;background:none;box-shadow:none;color:var(--on-sky);text-shadow:var(--on-sky-shadow)}
/* the route: a stop per place, a dot per question */
.bx-dots{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;color:var(--on-sky-2)}
.bx-dots:empty{display:none}
.bx-dots .bx-way{position:relative;display:inline-flex;align-items:center;gap:3px;min-height:24px;margin:0 0 0 9px;padding:2px 3px;border-radius:999px}
.bx-dots .bx-way:first-child{margin-left:0}
.bx-dots .bx-way+.bx-way::before{content:"";position:absolute;right:100%;top:50%;width:8px;border-top:1.5px dashed color-mix(in srgb,var(--on-sky) 45%,transparent)}
.bx-dots .bx-way:has(i.cur){padding:2px 7px 2px 5px;background:color-mix(in srgb,var(--now) 30%,transparent);color:var(--on-sky)}
.bx-dots .ex-i{width:13px;height:13px;margin-right:1px}
.bx-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45}
.bx-dots i.cur{opacity:1;background:var(--now);box-shadow:0 0 8px var(--now)}
.bx-dots i.ok{opacity:1;background:var(--lamp)}
.bx-dots i.no{opacity:1;background:none;box-shadow:inset 0 0 0 1.5px var(--red)}
.bx-dots i.rec{opacity:.9}
.bx-dots .bx-way.r{text-decoration:underline dashed color-mix(in srgb,var(--on-sky) 50%,transparent)}
.bx-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
-webkit-mask-image:linear-gradient(transparent,#000 16px);mask-image:linear-gradient(transparent,#000 16px)}
.bx-scene{padding:16px max(20px,env(safe-area-inset-left,0px)) 24px;color:var(--on-sky);text-shadow:var(--on-sky-shadow)}
.bx-scene:empty{display:none}
.bx-eb{display:flex;align-items:center;gap:8px;margin:0;font:600 11.5px/1.4 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-sky-2)}
.bx-disp{margin:10px 0 0;font:360 clamp(32px,8.6vw,48px)/1.02 var(--f-display);letter-spacing:-.018em;color:var(--on-sky)}
.bx-disp i{font-weight:330}
.bx-disp .lf-say{text-decoration-thickness:2px}
.bx-scz{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--on-sky-2);letter-spacing:.03em}
.bx-main{--ink:var(--on-sky);--ink-2:var(--air-ink-2,var(--on-sky-2));--ink-3:var(--air-ink-3,var(--on-sky-2));--line:transparent;--fill:transparent;--sheet:transparent;--field:transparent;
--ctl:var(--air-line,rgba(255,248,251,.42));position:relative;flex:1 0 auto;display:grid;align-content:start;gap:18px;width:100%;box-sizing:border-box;
padding:10px max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px));color:var(--ink);text-shadow:var(--air-sh,var(--on-sky-shadow))}
.bx-main:focus{outline:none}
.bx-main p{margin:0}
@media (min-width:760px){
.bx-top{padding:22px 30px 10px}
.bx-scene{padding:18px 34px 30px}
.bx-main{padding:14px 34px 0}
}
.bx-sec{font:600 11.5px/1.4 var(--f-sans);letter-spacing:.16em;color:var(--t-pl)}
.bx-task{font-size:17.5px;font-weight:600;line-height:1.55}
/* the IELTS instructions: quiet print on the paper */
.bx-ins{padding:0}
.bx-ins p[lang="en"]{font:italic 400 15px/1.5 var(--f-display);color:var(--ink-2)}
.bx-ins b{font-style:normal;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.bx-insz,.bx-sum,.bx-note,.bx-gloss,.bx-wc,.bx-mz,.bx-qzh,.bx-help p{font-size:13px;color:var(--ink-2)}
.bx-insz{margin-top:2px!important}
/* listening: the voice message's controls */
.bx-play{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#bx .bx-pb,#bx .bx-slow{min-height:48px;padding:10px 20px;font-size:15px}
.bx-pb.on,.bx-slow.on{box-shadow:0 0 0 3px var(--hi-now),var(--glow-now)}
.bx-plays{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bx-mask{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:16px;letter-spacing:.05em;word-spacing:.25em;color:var(--ink-2);line-height:1.8}
.bx-mask small{font-family:var(--f-sans);letter-spacing:0;word-spacing:0;font-size:12.5px;white-space:nowrap}
/* a form or a notepad: the answers are written on it */
.bx-ft{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;padding:0 0 10px;border-bottom:2px solid var(--ink)}
.bx-ft b{font:600 19px/1.25 var(--f-display)}
.bx-ft span{font-size:12.5px;color:var(--ink-3)}
.bx-fr{display:grid;grid-template-columns:minmax(86px,34%) minmax(0,1fr);gap:10px;align-items:center;min-height:54px;padding:6px 0;border-bottom:1px dotted var(--rule)}
.bx-fr:last-child{border-bottom:0}
.bx-fr.is-s{grid-template-columns:minmax(0,1fr);gap:2px}
.is-s .bx-fv{display:block;line-height:1.9}
.is-s .bx-bl{display:inline-flex;width:min(8.5em,100%);margin:0 3px;vertical-align:bottom}
.bx-fl{display:grid;line-height:1.3;font-size:14px}
.bx-fl small,.bx-fz{font-size:12px;color:var(--ink-3)}
.bx-fv{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;font:italic 400 19px/1.4 var(--f-display);color:var(--pen)}
.is-notes .bx-ft{border-bottom-width:1px}
.bx-card .bx-mt{font:400 19px/1.5 var(--f-display)}
.bx-bl{position:relative;display:inline-flex;align-items:center;gap:6px;flex:1 1 150px;min-width:0;font-style:normal}
.bx-qn{flex:none;font:600 15px var(--f-sans);color:var(--blueprint)}
.bx-ipa,.bx-pre{flex:none;font-size:15px;color:var(--ink-2)}
.bx-ipa{font-family:var(--f-ipa,inherit)}
.bx-in{width:100%;min-width:0;min-height:46px;padding:8px 2px;border:0;border-radius:0;box-shadow:inset 0 -1.5px 0 var(--ctl);background:transparent;color:var(--ink);font:inherit;font-size:17px;text-shadow:none}
.bx-in:focus{outline:none;box-shadow:inset 0 -2px 0 var(--now),0 14px 16px -14px var(--now-glow)}
.bx-mt .bx-bl{flex:none;width:min(10em,100%);margin:0 2px;vertical-align:bottom}
.bx-mt .bx-in{min-height:40px;padding:4px 2px;border:0;border-bottom:2px solid var(--now);border-radius:0;background:none;box-shadow:none}
.bx-bl .bx-in,.bx-mt .bx-in,.bx-1l{font:italic 400 19px/1.35 var(--f-display);color:var(--pen,var(--ink))}
.bx-fv .bx-in,.bx-card .bx-in{border:0;border-bottom:2px solid var(--blueprint);border-radius:0;background:none;box-shadow:none}
.bx-fv .bx-in:focus,.bx-card .bx-in:focus{box-shadow:0 12px 14px -14px var(--blueprint)}
.bx-lim{position:absolute;right:4px;bottom:-18px;padding:0;font:500 11px/16px var(--f-sans);color:var(--ink-3);pointer-events:none}
.bx-in.ok{box-shadow:inset 0 -2px 0 var(--lamp)}
.bx-in.no{box-shadow:inset 0 -2px 0 var(--red)}
.bx-in.rec{box-shadow:inset 0 -2px 0 var(--blueprint)}
.bx-one{display:flex;flex-wrap:wrap;gap:8px}
.bx-ta{min-height:130px;resize:vertical;line-height:1.65;font-size:16.5px}
.bx-1l{resize:none;field-sizing:content;min-height:54px}
/* messages: bubbles on her phone */
.bx-msg{display:flex;align-items:flex-end;gap:8px}
.bx-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 14px/1 var(--f-display);color:#fff;background:linear-gradient(140deg,#7C6CF0,#E0645A)}
.bx-bub{max-width:min(470px,86%);padding:10px 15px 11px;border-radius:20px 20px 20px 6px;background:var(--raised);box-shadow:0 10px 24px -16px rgba(6,4,26,.6);color:var(--ink);text-shadow:none}
.bx-main .bx-bub{--ink:var(--ink-on-bub,#FFF8FB);--ink-2:rgba(255,248,251,.8);--ink-3:rgba(255,248,251,.7)}
:root[data-theme="light"] .bx-main .bx-bub{--ink-on-bub:#1D1A33;--ink-2:#4A4466;--ink-3:#625C7C}
.bx-from{font-size:12px;color:var(--ink-3)}
.bx-mt{font-size:17px;line-height:1.55}
.bx-mz{margin-top:3px!important}
.bx-msg.me{justify-content:flex-end}
.bx-msg.me .bx-bub{border-radius:20px 20px 6px 20px;background:color-mix(in srgb,var(--now) 22%,var(--raised))}
.bx-msg.me .bx-bub:has(textarea){width:min(470px,100%);padding:6px}
.bx-msg.me .bx-in{border-radius:0;background:none}
.bx-thread{display:grid;gap:6px;justify-items:start;padding:0}
.bx-thread .bx-from{margin-left:6px!important}
.bx-thread .bx-bub{margin:0;font-size:16.5px;line-height:1.55}
/* printed texts: a notice, a menu board, a timetable, a card, an email, an article */
.bx-text{margin:0;display:grid;gap:4px;font-size:16px;line-height:1.55}
.bx-text figcaption{margin:0 0 6px;font:700 14px/1.35 var(--f-sans);letter-spacing:.1em}
.bx-mailh{margin:0 0 8px!important;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.bx-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.bx-table td{padding:6px 8px;border-bottom:1px solid var(--line)}
#bx .obj-note{margin:10px 0 0;max-width:none}
.bx-zh{display:block;font-size:13.5px;color:var(--ink-2)}
/* the question and its answers */
.bx-q{display:grid;gap:2px}
.bx-qen{font:500 19px/1.45 var(--f-display)}
.bx-qen .lf-say{text-align:left}
.bx-opts{display:grid;gap:10px}
.bx-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* choices are words: the letter a small-caps mark, a glow on hover, gold when right, coral when not */
.bx-opt,.bx-tfb{position:relative;border:0;background:none;box-shadow:none;color:var(--ink);font:inherit;text-shadow:inherit;cursor:pointer}
.bx-opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 14px 8px 6px;border-radius:18px;font:450 19px/1.35 var(--f-display-zh);text-align:left}
.bx-opt:hover:not(:disabled),.bx-tfb:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 9%,transparent)}
.bx-opt:disabled,.bx-tfb:disabled,.bx-tile:disabled{cursor:default}
.bx-l{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--t-nw);font:700 13px/1 var(--f-sans);letter-spacing:.06em;text-shadow:inherit;transition:background-color .2s,color .2s}
.bx-ot{display:grid;line-height:1.35;min-width:0}
.bx-ot small,.bx-tfb small{font-size:12.5px;color:var(--ink-2)}
.bx-opt.ok,.bx-tfb.ok{background:none;color:var(--t-ok)}
.bx-opt.ok .bx-l{background:var(--lamp);color:#2A1E00;text-shadow:none;box-shadow:0 0 14px 2px var(--lamp-glow,rgba(255,200,105,.5))}
.bx-opt.no,.bx-tfb.no{background:none;color:var(--t-no)}
.bx-opt.no .bx-ot>span:first-child{text-decoration:line-through 1.5px}
.bx-opt.no .bx-l{background:var(--red);color:#fff;text-shadow:none}
.bx-opt.pick,.bx-tfb.pick{background:color-mix(in srgb,var(--now) 16%,transparent)}
.bx-opt.ok::after,.bx-tfb.ok::after,.bx-tile.ok::after{content:"";display:var(--spk-d);position:absolute;right:12px;top:-7px;width:14px;height:14px;background:var(--spk);filter:var(--spk-f);pointer-events:none}
.bx-st{display:grid;gap:8px}
.bx-tf{display:flex;flex-wrap:wrap;gap:8px}
.bx-tfb{display:grid;justify-items:center;align-content:center;min-width:88px;min-height:52px;padding:6px 14px;border-radius:16px}
.bx-tfb b{font:600 15px/1.2 var(--f-sans);letter-spacing:.04em}
.bx-tfb[aria-pressed="true"]{color:var(--ink);text-decoration:underline 2px var(--now);text-underline-offset:6px}
.bx-tfb.bx-lt{min-width:56px}
.bx-key{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14.5px}
.bx-key b{color:var(--t-pl);margin-right:4px}
/* word tiles are words on air: the picked one lit with a glowing dot, right gold, wrong coral (§9) */
.bx-tiles,.bx-line{display:flex;flex-wrap:wrap;gap:0 2px}
.bx-tiles{margin-left:-10px}
.bx-tile{position:relative;min-width:44px;min-height:50px;padding:6px 10px 14px;border:0;border-radius:14px;background:none;color:var(--ink);font:450 21px/1.2 var(--f-display);text-shadow:inherit;cursor:pointer}
.bx-tile::before{content:"";position:absolute;left:calc(50% - 2.5px);bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--now);box-shadow:var(--lf-glow);opacity:0;transform:scale(.3);transition:opacity .25s,transform .4s}
.bx-tile:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 9%,transparent)}
.bx-tile:is([aria-pressed="true"],.ok,.no)::before{opacity:1;transform:none}
.bx-tile.used{opacity:.3}
.bx-tile.ok{color:var(--t-ok)}
.bx-tile.ok::before{background:var(--lamp);box-shadow:0 0 10px 2px var(--lamp-glow)}
.bx-tile.no{color:var(--t-no);text-decoration:line-through 1.5px}
.bx-tile.no::before{background:var(--red);box-shadow:none}
.bx-line{min-height:64px;padding:4px 0;box-shadow:inset 0 -1.5px 0 var(--ctl)}
.bx-tools{text-align:right;font-size:13.5px}
/* speaking */
.bx-qs{margin:0;padding-left:1.3em;display:grid;gap:8px}
.bx-qs span{font:500 19px/1.45 var(--f-display)}
.bx-qs small{display:block;font-size:13px;color:var(--ink-2)}
.bx-mic.on,.bx-mic[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.bx-heard{padding:8px 0;font:italic 400 17px/1.5 var(--f-display);min-height:44px;box-shadow:inset 0 -1.5px 0 var(--ctl)}
.bx-say{display:grid;gap:8px}
.bx-read{font:500 21px/1.5 var(--f-display);padding:0}
/* writing: the points as a checklist */
.bx-bul{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:14.5px}
.bx-bul li{display:flex;gap:8px;align-items:baseline}
.bx-box{flex:none;display:inline-grid;place-items:center;width:14px;height:14px;border:1.5px solid var(--blueprint);border-radius:4px;transform:translateY(2px);font-size:10px;line-height:1}
.bx-bul li.ok .bx-box{border-color:var(--lamp);color:var(--lamp-ink)}
.bx-bul li.no{color:var(--ink-2)}
.bx-saved{color:var(--ink-3)}
.bx-help.is-off{display:none}
.bx-help p{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.bx-hb{min-height:44px;padding:4px 8px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;text-decoration:underline dotted color-mix(in srgb,var(--ink) 50%,transparent);text-underline-offset:5px;text-shadow:inherit;cursor:pointer}
.bx-hb:disabled{color:var(--ink);text-decoration:none;cursor:default}
.bx-hint{margin-top:8px;display:grid;gap:6px;padding:0 0 0 20px;font-size:14.5px}
.bx-gloss span{color:var(--ink)}
#bx .bx-foot{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 calc(-1 * max(18px,env(safe-area-inset-right,0px)));
padding:26px 18px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--air-veil,rgba(9,7,30,.56)) 60%)}
#bx .bx-foot:empty{display:none}
.bx-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:8px}
#bx .bx-go{min-height:52px;width:min(380px,100%);font-size:16px;box-shadow:var(--lf-pill-sh,var(--pri-glow))}
@media (min-width:760px){#bx .bx-foot{margin:0 -34px;padding:18px 34px 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent)}}
/* the feedback: a note on the paper; the pattern card a sticky note */
.bx-res{position:relative;display:grid;gap:10px;padding:0 0 0 22px}
.bx-res::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--blueprint)}
.bx-res[data-ok="1"]::before{background:var(--lamp);box-shadow:0 0 12px 2px var(--lamp-glow,rgba(255,200,105,.5))}
.bx-res[data-ok="0"]::before{background:var(--red);box-shadow:0 0 10px color-mix(in srgb,var(--red) 60%,transparent)}
.bx-verdict{font-size:18px;font-weight:700}
.bx-res[data-ok="1"] .bx-verdict{color:var(--t-ok)}
.bx-res[data-ok="0"] .bx-verdict{color:var(--t-no)}

.bx-rec{font-size:16px;font-weight:600;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.bx-rec small{font-weight:400;font-size:13px;color:var(--ink-2)}
.bx-pt{display:grid;gap:4px;font-size:15px;line-height:1.6}
p.bx-pt{display:block}
.bx-pt .bx-note{display:block}
.bx-pt.ok b{color:var(--t-ok)}
.bx-bad{color:var(--t-no);font-size:14.5px;font-weight:700}
.bx-lt{display:grid;gap:2px}
.bx-lt p{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.bx-k{flex:none;min-width:3.6em;font-size:12.5px;color:var(--ink-3)}
.bx-letters{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:20px;letter-spacing:.06em;overflow-wrap:anywhere}
.bx-letters span{display:inline-block;min-width:.6em;padding:0 1px;border-radius:4px;white-space:pre;text-align:center}
.bx-letters .m{background:var(--lamp);color:#2A1E00}
.bx-letters .a{color:var(--t-no);text-decoration:line-through;text-decoration-thickness:2px}
.bx-toks{font:400 18px/2 var(--f-display)}
.bx-toks span{white-space:nowrap}
.bx-toks i{font:normal 11px var(--f-sans);margin-left:2px}
.bx-toks .ok i{color:var(--t-ok)}
.bx-toks .no{color:var(--t-no);text-decoration:underline wavy;text-underline-offset:5px}
.bx-causes{margin:0;padding-left:1.2em;display:grid;gap:2px;font-size:14px;color:var(--ink-2)}
.bx-causes b{color:var(--ink)}
.bx-cmp,.bx-why{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;font-size:15px}
.bx-why .bx-zh,.bx-wen{flex-basis:100%}
.bx-wen{font:400 17.5px/1.5 var(--f-display)}
.bx-cmp .bx-k,.bx-why .bx-k{min-width:3em}
#bx .bx-pat{display:grid;gap:6px;max-width:none;margin:10px 2px 2px;padding:20px 16px 14px;font-size:14.5px;line-height:1.65;--tilt:-.6deg}
.bx-pat-t{font-size:13px;font-weight:700;letter-spacing:.04em}
.bx-pat-t span{color:#B06A00}
#bx :is(.bx-pat,.bx-after) .bx-pb{min-height:44px;padding:6px 16px;font-size:14px}
.bx-claim{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bx-claim small{font-size:12.5px;color:var(--ink-3)}
.bx-after{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
.bx-src{flex:1 1 100%;font-size:14.5px}
.bx-src summary{min-height:44px;display:flex;align-items:center;gap:6px;color:var(--link);cursor:pointer;list-style:none}
.bx-src summary::-webkit-details-marker{display:none}
.bx-src summary::after{content:"▾";font-size:12px;transition:transform .2s}
.bx-src[open] summary::after{transform:rotate(180deg)}
.bx-src p{margin-top:8px!important;font:400 16px/1.55 var(--f-display)}
.bx-src p b{font-family:var(--f-sans);font-size:13px;color:var(--ink-3)}
.bx-src .bx-zh{font-family:var(--f-sans)}
/* the weekly part's cover, the end of a trip */
.bx-intro{display:grid;gap:10px;line-height:1.75}
.bx-intro::before{content:"MAPLE BRIDGE LANGUAGE SCHOOL · TEST PAPER";font:700 10.5px/1 var(--f-sans);letter-spacing:.18em;color:var(--ink-3);padding-bottom:12px;border-bottom:3px double var(--rule)}
.bx-intro-t{font:500 21px/1.35 var(--f-display-zh)}
.bx-end{position:relative;isolation:isolate;display:grid;gap:12px;justify-items:center;text-align:center;padding:4px 0 0}
.bx-badge{position:relative;display:grid;place-items:center;width:104px;height:104px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bx-flower{width:86px;height:86px;overflow:visible;filter:var(--fl-glow)}
.bx-flower .pt{fill:var(--fl-p)}.bx-flower .hc{fill:var(--fl-c)}.bx-flower .hl{fill:#fff;opacity:.55}
.bx-end-t{font:500 24px/1.3 var(--f-display-zh)}
.bx-end-n{font-size:15px;color:var(--ink-2)}
.bx-end-n b{display:inline-block;min-width:1ch;font:400 36px/1.1 var(--f-display);color:var(--lamp-ink);font-variant-numeric:tabular-nums}
.bx-trip{justify-content:center;margin:2px 0 6px}
.bx-td{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
.bx-trip i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.5}
.bx-trip i.ok{background:var(--lamp);opacity:1}.bx-trip i.no{background:none;box-shadow:inset 0 0 0 1.5px var(--red);opacity:1}
.bx-end section{width:100%;display:grid;gap:4px;text-align:left;padding-top:18px}
.bx-end h3,.ex-trs h3,.ex-sw h3,.ex-hw h3,.ex-det h3,.ex-up h3{margin:0 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--ink-3)}
.bx-end ul{margin:0;padding-left:1.2em;display:grid;gap:3px;font-size:14.5px}
.bx-then{list-style:none;padding:0!important}
.bx-then li{display:flex;gap:12px;align-items:baseline}
.bx-then b{min-width:4.8em;white-space:nowrap;color:var(--t-ok);font-weight:650;font-size:13px;font-variant-numeric:tabular-nums}
.bx-flash{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:4px!important;font-size:14px}
.bx-flash small{color:var(--ink-3)}
.bx-end-cta{justify-self:stretch}
.bx-end-cta .btn.ghost{min-height:52px}
.bx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.bx-back{font-size:13.5px}
.bx-busy{font-size:14.5px;color:var(--ink-2)}
/* marking writing and speaking */
.bx-mark,.bx-mk{display:grid;gap:12px}
.bx-mk:empty{display:none}
.bx-chk small{display:block;font-size:12.5px;color:var(--ink-2)}
.bx-rub{margin:0;padding:0;border:0;display:grid;gap:6px;min-width:0}
.bx-rub legend{padding:0 6px;font-size:14px}
.bx-rub legend small{display:block;font-size:12px;color:var(--ink-3)}
.bx-rrow{display:flex;align-items:flex-start;gap:10px;width:100%;min-height:44px;padding:8px 6px;border-radius:12px;border:0;background:none;color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;text-align:left;text-shadow:inherit;cursor:pointer}
.bx-rrow b{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--blueprint);color:var(--blueprint);font-size:13px}
.bx-rrow:disabled{opacity:.5;cursor:default}
.bx-rrow small{display:block;font-size:12px;color:var(--ink-3)}
.bx-rrow[aria-pressed="true"]{background:color-mix(in srgb,var(--now) 14%,transparent)}
.bx-rrow[aria-pressed="true"] b{background:var(--now);box-shadow:none;color:var(--on-now)}
.bx-marks{display:grid;gap:8px}
.bx-crit{display:flex;flex-wrap:wrap;gap:6px}
.bx-crit span{padding:2px 12px 2px 0;font-size:14px}
.bx-crit i{font:normal 600 15px var(--f-display);color:var(--t-ok)}
.bx-whys{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;font-size:14px}
.bx-whys dt{font-weight:700;color:var(--t-pl)}
.bx-whys dd{margin:0;color:var(--ink-2)}
.bx-fixes{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:14.5px}
.bx-fixes s{color:var(--ink-2);text-decoration-color:var(--red)}
.bx-fixes small{display:block;font-size:12.5px;color:var(--ink-2)}
.bx-band{font-size:15px}
.bx-band b{font:400 30px/1 var(--f-display);color:var(--lamp-ink);margin:0 4px;font-variant-numeric:tabular-nums}
.bx-band small{display:block;font-size:12.5px;color:var(--ink-2)}

/* the weekly report: a certificate with a postmark */
.ex-rep{display:grid;gap:18px}
.ex-rep-top{position:relative;isolation:isolate;display:grid;justify-items:center;gap:4px;text-align:center;padding-top:2px}
.ex-rbadge{width:156px;height:156px}
.ex-rep-top.is-full{padding-top:14px;background:radial-gradient(circle 90px at 50% 92px,#FFF6D8,#EFD283 94%,#0000)}
.ex-rep .ex-pm{--stamp:var(--moon-ink);--stamp-rot:-9deg;width:142px;height:142px;padding:0 20px;font-size:10px;gap:5px}
.ex-rep .ex-pm b{font:italic 500 46px/1 var(--f-display)}
.ex-rsub{font-size:13px;color:var(--ink-2)}
.ex-rows{display:grid;border-top:2px solid var(--ink)}
.ex-rrow{display:grid;grid-template-columns:5.4em minmax(0,1fr);gap:2px 12px;padding:12px 2px;border-bottom:1px dotted var(--rule)}
.ex-rk{font-weight:700;grid-row:span 2;display:grid;align-content:start;line-height:1.3}
.ex-rk small{font:italic 400 13px/1.3 var(--f-display);color:var(--ink-3)}
.ex-rb{font-size:14.5px}
.ex-rb b{font:400 28px/1 var(--f-display);margin-right:3px;font-variant-numeric:tabular-nums}
.ex-rb small{font-size:13px;color:var(--ink-2)}
.ex-rd{font-size:13px;color:var(--ink-2)}
.ex-up ul{margin:0;padding-left:1.2em;font-size:14.5px;display:grid;gap:3px}
.ex-gap{display:grid;gap:6px;font-size:14px}
.ex-road{display:grid;grid-template-columns:3.2em minmax(0,1fr);align-items:center;gap:10px}
.ex-rl{font-size:12.5px;color:var(--ink-3)}
.ex-bar{position:relative;height:8px;border-radius:999px;background:var(--fill-2);overflow:hidden}
.ex-bar i{position:absolute;top:0;bottom:0;left:0}
.ex-have{background:var(--ink-3);opacity:.5;border-radius:999px 0 0 999px}
.ex-way{background:var(--blueprint);opacity:.5}
.ex-tips ul{margin:4px 0 0;padding-left:1.2em;font-size:14.5px}
.ex-howb table{width:100%;margin-top:8px;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.ex-howb th,.ex-howb td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:left}
.ex-howb th{color:var(--ink-3);font-weight:500}
.ex-howb tr.tg td{color:var(--ink);font-weight:700;background:var(--hi-now)}
.ex-trend{margin:0}
.ex-trend svg{display:block;width:100%;max-width:560px;height:auto;overflow:visible}
.ex-trend text{font-size:17px;fill:var(--ink-3)}
.ex-trend .gr{stroke:var(--line);stroke-width:1}
.ex-trend .tgl{stroke:var(--blueprint);stroke-width:1.5;stroke-dasharray:5 5}
.ex-trend .tgt{fill:var(--blueprint)}
.ex-trend .ln,.ex-trend path.ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ex-trend .mk,.ex-trend .mkt{fill:var(--lamp-ink)}
.ex-trend .kL{stroke:var(--c-l);fill:var(--c-l)}.ex-trend .kR{stroke:var(--c-r);fill:var(--c-r)}.ex-trend .kW{stroke:var(--c-w);fill:var(--c-w)}.ex-trend .kS{stroke:var(--c-s);fill:var(--c-s)}
.ex-trend figcaption{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:12.5px;color:var(--ink-2)}
.ex-trend figcaption i{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:50%;vertical-align:-1px}
.ex-trend .kL i{background:var(--c-l)}.ex-trend .kR i{background:var(--c-r)}.ex-trend .kW i{background:var(--c-w)}.ex-trend .kS i{background:var(--c-s)}
.ex-trend .kM i{background:var(--lamp);border-radius:1px;transform:rotate(45deg) scale(.8)}
.ex-trend .kT i{height:0;border-radius:0;border-top:2px dashed var(--blueprint)}
.ex-rbtns{display:flex;flex-wrap:wrap;gap:8px}

/* the star map sheet */
.ex-skyw{display:grid;gap:16px}
.ex-legend{margin:0;font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center}
.ex-legend span{white-space:nowrap}
.ex-legend .lg{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;vertical-align:-1px}
.lg.st{background:var(--lamp);box-shadow:0 0 5px var(--lamp)}.lg.gr{background:var(--lamp);opacity:.55}.lg.wk{background:none;box-shadow:inset 0 0 0 2px var(--moon)}.lg.nw{width:5px;height:5px;background:var(--blueprint)}
.ex-grps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;font-size:13px;color:var(--ink-2)}
.ex-grps b{color:var(--ink);font-family:var(--f-display-zh)}
/* rows on air: a lit dot for a note, space between the stars; one pill per screen, so a star's drill is a word with an arrow */
.ex-crit,.ex-drows li{position:relative;padding-left:20px}
.ex-crit{margin:0;font-size:14px}
.ex-crit::before,.ex-drows li::before{content:"";position:absolute;left:1px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--now);box-shadow:var(--lf-glow)}
.ex-stars,.ex-drows{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.ex-star{display:grid;gap:4px}
.ex-star.on .ex-sn b{color:var(--t-nw)}
.ex-star p{margin:0}
.ex-sn{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.ex-sn small{color:var(--ink-3);font-size:12.5px}
.ex-ret{color:var(--t-ok);font-size:12.5px}
.ex-adv{font-size:13.5px;color:var(--ink-2);line-height:1.65}
.ex-sa{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px!important}
#bx .ex-sa .btn{min-height:44px;padding:8px 0;border:0;background:none;box-shadow:none;color:var(--ink);font-weight:650}
#bx .ex-sa .btn:not(.ghost)::after{content:"→";margin-left:.5em;color:var(--now-ink)}
.ex-sgrp summary{min-height:44px;display:flex;align-items:center;font-size:14px;color:var(--link);cursor:pointer}
.ex-sgrp .ex-stars{margin-top:6px}
/* history and one session's questions */
.ex-hw{display:grid;gap:4px}
.ex-det{display:grid;gap:14px}
.ex-dsum{font-size:14.5px;color:var(--ink-2)}
.ex-drows li{display:grid;gap:4px}
.ex-drows li:not(.no,.ok)::before{background:var(--blueprint);box-shadow:none}
.ex-drows li.no::before{background:var(--red);box-shadow:none}
.ex-drows li.ok::before{background:var(--lamp);box-shadow:0 0 10px var(--lamp-glow)}
.ex-drows p{margin:0}
.ex-dq{display:grid;gap:2px;font-size:14.5px}
.ex-dq small{font-size:12px;color:var(--ink-3)}
.ex-da{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14.5px}
.ex-dr{margin-left:auto;font-size:13px}
.ex-dr.no{color:var(--t-no)}.ex-dr.ok{color:var(--t-ok)}
.ex-dp summary{font-size:13px;color:var(--link);cursor:pointer}
.ex-dp p{font-size:13.5px;color:var(--ink-2)}
/* 设置里的「考试」 and 每日复盘's block */
.exs-row{display:flex;align-items:center;flex-wrap:wrap;gap:0 22px;min-height:44px;font-size:15px}
.exn-r{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;min-height:40px;margin:0}
@media (hover:none){#bx .btn:hover{opacity:1}}
@media (prefers-reduced-motion:reduce){#exam *,#bx *,.exr *,.exs *{transition:none!important;animation:none!important}}
/* §11 the exam centre: five categories, the seven skills, the timetable, the host's panels inside */
.ex-tabs{margin:20px 0 28px}
.ex-tab small{margin-left:6px;font:italic 13px var(--f-display);color:var(--ink-3)}
.ex-sk,.ex-plan{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.ex-sk li{display:grid;gap:4px;min-width:0}
.ex-sk h3{display:flex;align-items:baseline;gap:8px;margin:0;font-size:17px}
.ex-sk h3 small{font:italic 14px var(--f-display);color:var(--ink-3)}
.ex-sk-acts{display:flex;flex-wrap:wrap;gap:0 14px;margin:0}
.ex-sk-acts .ex-go-s{padding-left:0}
.ex-tl[aria-expanded="true"]{color:var(--t-nw)}
@media (min-width:640px){.ex-sk{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 34px}}
.ex-plan{gap:10px}
.ex-plan li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;min-height:44px;font-size:14.5px;line-height:1.5}
.ex-pl-a{flex:none;min-width:4.5em;font-weight:600}
.ex-pl-b{flex:1 1 14em;color:var(--ink-2)}
.ex-hostc .panel{margin-top:0}
.exr-1{padding:0;background:none;box-shadow:none}
.exr-go{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:10px 4px;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;text-align:left;text-shadow:inherit;cursor:pointer}
.exr-go .ex-moon{flex:none;width:14px;height:14px;fill:var(--lamp)}
.exr-ar{margin-left:auto;color:var(--ink-3)}
.exr-1.ex-now .exr-go{color:var(--t-nw)}
.ex-card>div{min-width:0}