/* About: hero desk and the pinned guide. Loaded after about.css; owns motion, depth and scene scale. */
@property --hover { syntax:'<number>'; inherits:false; initial-value:0; }

/* Hero: labels stay readable at every desk scale; the desk leans towards a fine pointer. */
.desk-wash { width:580px; left:30px; transform:translate3d(calc(var(--px,0)*-6px),calc(var(--py,0)*-5px),0) rotate(-16deg); }
.desk-tabs { font-size:13px; }
.desk-topics > p { font-size:13px; }
.desk-topic { font-size:15px; }
.desk-target > span,.desk-target small { font-size:13px; }
.desk-paper,.desk-scheme,.desk-topics,.desk-target { transition:--hover .45s var(--ease),box-shadow .45s var(--ease); }
.desk-scheme { transform:translate3d(calc(var(--px,0)*4px),calc(var(--py,0)*3px - var(--hover)*6px),0) rotate(13deg); }
.desk-paper { transform:translate3d(calc(var(--px,0)*7px),calc(var(--py,0)*5px - var(--hover)*8px),0) rotate(5deg); }
.desk-topics { transform:translate3d(calc(var(--px,0)*13px),calc(var(--py,0)*10px - var(--hover)*6px),0) rotate(-5deg); }
.desk-target { transform:translate3d(calc(var(--px,0)*16px),calc(var(--py,0)*12px - var(--hover)*6px),0) rotate(7deg); }
.desk-mascot { transform:translate3d(calc(var(--px,0)*19px),calc(var(--py,0)*14px),0) rotate(-7deg); }
.desk-note { transform:translate3d(calc(var(--px,0)*10px),calc(var(--py,0)*8px),0) rotate(-9deg); }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .desk-paper:hover,.desk-scheme:hover { --hover:1; box-shadow:0 1px 2px #25395714,0 14px 24px #25395716,0 56px 54px -26px #25395740; }
 .desk-topics:hover,.desk-target:hover { --hover:1; box-shadow:0 2px 4px #27385f08,0 34px 40px -14px #27385f33; }
 .desk-topic:not(.desk-topic--off) i { transition:scale .3s var(--ease); }
 .desk-topics:hover .desk-topic:not(.desk-topic--off) i { scale:1.15; }
}
@media(max-width:1350px) { .hero__actions > span { font-size:11px; } }
@media(min-width:951px) and (max-width:1100px) { .teacher-desk { transform:scale(.78); left:calc(50% - 52px); top:-20px; } }
/* Tablets: copy first, then the whole desk at a readable size. */
@media(min-width:651px) and (max-width:950px) {
 .hero { min-height:0; padding:72px 0 104px; }
 .hero-copy { width:100%; max-width:600px; }
 .hero h1 { font-size:64px; }
 .hero__lead { max-width:470px; font-size:15px; }
 .hero__actions { display:flex; gap:22px; }
 .hero__actions > span { margin:0; }
 .hero__actions > span br { display:initial; }
 .teacher-desk { position:relative; left:50%; top:auto; margin:30px 0 -120px -330px; transform:scale(.82); transform-origin:50% 0; }
}

/* The stage is a fixed layer clipped by its section: it is revealed and covered like a page, never cut mid-motion. */
.has-story-motion .process { height:460svh; clip-path:inset(0); background:#eef0f5; }
.has-story-motion .process-pin { position:fixed; left:0; right:0; min-height:0; max-height:none; z-index:1; }
.has-story-motion .process::before,.has-story-motion .process::after { content:''; position:absolute; z-index:2; left:0; right:0; height:110px; pointer-events:none; }
.has-story-motion .process::before { top:0; background:linear-gradient(var(--bg),#fbfaf700); }
.has-story-motion .process::after { bottom:0; background:linear-gradient(#fbfaf700,var(--bg)); }
.process-canvas [data-object]:not(.question-provenance):not(.question-topic) { will-change:transform,opacity; }

/* Beat 1: a scan reads the page, each question and part is outlined, then Q6 lifts out. */
.source-window { box-shadow:none; }
.source-veil { position:absolute; left:5.042%; top:7.126%; width:86.555%; height:34.917%; box-shadow:0 0 0 1400px #eef0f5ad; opacity:0; }
.read-box { position:absolute; border:1.5px dashed #5e9d86; background:#8fc7b014; border-radius:2px; opacity:0; }
.read-box--q7 { left:6.2%; top:50.4%; width:85.2%; height:34.9%; }
.read-box--a,.read-box--b { left:10.4%; width:80.3%; height:11.2%; border:1px solid #79b29c; background:#8fc7b01f; }
.read-box--a { top:58.8%; }
.read-box--b { top:73.8%; }
.source-scan { position:absolute; left:0; right:0; top:0; height:16%; background:linear-gradient(#7fa2ec00,#7fa2ec26 75%,#5f84e0b3 98%,#7fa2ec00); opacity:0; }
.paper-sheet { height:842px; background:#fff repeating-linear-gradient(#fff 0 118px,#eceff4 118px 120px) 0 0/100% 100% content-box; padding:90px 60px; border:1px solid #e3e6eb; }
.process-canvas .question-object { box-shadow:0 1px 2px #22365c0f,0 15px 25px -9px #22365c30; }
.process-canvas .question-object::after,.paper-object--output::after,.paper-object--answers::after,.selection-brief::after { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; box-shadow:0 34px 46px -16px #1d3461,0 70px 90px -40px #1d3461; opacity:calc((var(--z,0) + var(--lift,0))*.45); pointer-events:none; }
.selection-brief { box-shadow:0 22px 40px -18px #20375f32,0 0 0 calc(var(--glow,0)*6px) #6f93dd38; }
/* Interface fragments: narrower layout and larger scale when the scene is small, so labels stay at 11px or more. */
.bank-object { width:calc(420px / var(--ui,1)); }
.selection-brief { width:calc(310px / var(--ui,1)); }
.process-canvas .question-provenance { top:auto; bottom:100%; padding:calc(8px*var(--ui,1)) 14px; border-radius:9px 9px 0 0; background:#e8eef8; font-size:calc(12px*var(--ui,1)); }
.process-canvas .question-provenance > b { font-size:calc(13px*var(--ui,1)); }
.process-canvas .question-topic { bottom:auto; top:calc(100% + 14px); width:max-content; font-size:calc(17px*var(--ui,1)); }
.process-canvas .question-topic small { font-size:calc(15px*var(--ui,1)); }
.process-canvas .question-topic i { font-size:calc(20px*var(--ui,1)); }
.source-note { width:calc(260px*var(--ui,1)); font-size:calc(14px*var(--ui,1)); }
.source-note > b { font-size:calc(19px*var(--ui,1)); }
.question-note { width:calc(245px*var(--ui,1)); }
.answer-note b { font-size:calc(19px*var(--ui,1)); }
.answer-note div > span { font-size:calc(13px*var(--ui,1)); }
/* Beat 2: marks travel to the target as each question lands. */
.mark-token { width:max-content; padding:6px 13px; border-radius:20px; background:#5277b8; color:#fff; font:600 calc(15px*var(--ui,1))/1.1 Inter,sans-serif; box-shadow:0 10px 18px -8px #24427e88; z-index:5; }
/* Beat 3: the printed question number rolls to its new place in the test. */
.renumber { position:absolute; left:17px; top:16px; width:15px; height:16px; overflow:hidden; background:#fff; border-radius:3px; box-shadow:0 0 0 calc(var(--mark,0)*5px) #5d86c94d; font:700 12px/16px Arial,Helvetica,sans-serif; color:#171717; }
.renumber b { display:block; height:16px; padding-left:3px; transform:translateY(calc(var(--roll,0)*-100%)); }
.renumber--keep { top:17px; }
.stage-mascot { width:96px; z-index:5; }
.stage-mascot .exam-mascot__arm--right { transform:rotate(calc(10deg + var(--wave,0)*22deg)); }
.process-canvas .answer-note { z-index:5; }

/* Landscape screens: copy on the left, the scene fills the rest. */
@media(min-width:900px) and (min-aspect-ratio:5/4) {
 .process-pin { --side:1; --gutter:max(40px,calc((100% - 1440px)/2)); --copy:clamp(280px,26vw,410px); }
}
@media(max-width:650px) {
 .has-story-motion .process { height:490svh; }
 .has-story-motion .process-pin { min-height:0; }
 .process-canvas .question-provenance { font-size:calc(16px*var(--ui,1)); }
 .process-canvas .brief-subject { display:none; }
 .process-canvas .question-provenance > b { font-size:calc(17px*var(--ui,1)); }
 .process-canvas .question-topic { font-size:calc(21px*var(--ui,1)); padding:14px 18px; }
 .process-canvas .question-topic small { font-size:calc(20px*var(--ui,1)); }
 .process-canvas .question-topic i { font-size:calc(24px*var(--ui,1)); }
 .process-canvas .bank-column > .bank-record:nth-of-type(4) { display:none; }
 .process-canvas .bank-cabinet__foot { font-size:13px; }
 .answer-note div > span { font-size:calc(15px*var(--ui,1)); }
 .process-canvas .selection-brief { width:260px; height:auto; padding:14px 16px 12px; display:grid; grid-template-columns:1fr auto; column-gap:10px; border-radius:12px; }
 .process-canvas .brief-kicker { grid-column:1/-1; max-width:none; font-size:12px; }
 .process-canvas .brief-subject { grid-column:1; font-size:15px; margin-top:6px; }
 .process-canvas .brief-topic { grid-column:1; margin-top:4px; }
 .process-canvas .brief-topic > strong { font-size:15px; gap:7px; }
 .process-canvas .brief-topic i { width:19px; height:19px; font-size:13px !important; }
 .process-canvas .brief-target { position:static; grid-column:2; grid-row:2/4; margin:0; }
 .process-canvas .brief-target > span { font-size:12px; }
 .process-canvas .brief-target > strong { font-size:48px; line-height:1; }
 .process-canvas .brief-meter { grid-column:1/-1; width:auto; height:22px; margin-top:10px; }
 .process-canvas .brief-meter i { font-size:12px; }
 .process-canvas .brief-total { display:flex; grid-column:1/-1; font-size:12px; gap:6px; margin-top:8px; padding-top:8px; }
 .process-canvas [data-object=questionOne] { clip-path:inset(-140px -90px calc(var(--fold,0)*63% - (1 - var(--fold,0))*140px) -90px); }
 .process-canvas .brief-total > i { width:19px; height:19px; font-size:13px; }
}
@media(prefers-color-scheme:dark) {
 .has-story-motion .process { background:#252e3e; }
 .has-story-motion .process::before { background:linear-gradient(var(--bg),#1a1d2200); }
 .has-story-motion .process::after { background:linear-gradient(#1a1d2200,var(--bg)); }
 .source-veil { box-shadow:0 0 0 1400px #252e3ea6; }
 .process-canvas .question-provenance { background:#33435e; }
 .paper-sheet { background:#f4f5f7 repeating-linear-gradient(#f4f5f7 0 118px,#e3e6ec 118px 120px) 0 0/100% 100% content-box; }
 .mark-token { background:#a3bdea; color:#14203a; }
 .question-object::after,.paper-object--output::after,.paper-object--answers::after,.selection-brief::after { box-shadow:0 34px 46px -16px #000,0 70px 90px -40px #000; }
}
@media(max-width:650px) { .desk-wash { width:100%; left:0; transform:none; } }
.brief-total > i { font-size:13px; }
.answer-check { font-size:calc(17px*var(--ui,1)); width:calc(32px*var(--ui,1)); height:calc(32px*var(--ui,1)); }
.process-canvas .brief-topic i { font-size:13px; }
/* Handwritten notes and their arrows: one ink, one size per screen class, one arrow family (drawn by the page script). */
.desk-note,.question-note { color:#5f6f83; font-family:Georgia,serif; font-style:italic; line-height:1.3; }
.desk-note { font-size:22px; transform:translate3d(calc(var(--px,0)*10px),calc(var(--py,0)*8px),0) rotate(-6deg); left:50px; top:548px; }
.desk-note svg,.question-note .note-arrow { position:absolute; left:0; top:0; width:1px; height:1px; margin:0; overflow:visible; transform:none; fill:none; stroke:currentColor; }
.desk-note svg path,.note-arrow path { stroke-linecap:round; stroke-linejoin:round; }
.question-note { width:max-content; font-size:var(--note-size,22px); }
.question-note .note-arrow--narrow { display:none !important; }
.question-note .note-arrow--wide { display:block; }
.desk-mascot { width:112px; left:270px; top:548px; transform:translate3d(calc(var(--px,0)*15px),calc(var(--py,0)*11px),0) rotate(-3deg); }
.stage-mascot .exam-mascot__pupils { transform:translate(-1.4px,-1px); }
.question-provenance > b,.bank-record small,.brief-meter i,.brief-total b,.brief-target > strong,.desk-target > strong,.mark-token { font-variant-numeric:tabular-nums; }
@media(max-width:1350px) { .desk-note { font-size:26px; } }
@media(min-width:951px) and (max-width:1100px) { .desk-note { font-size:26px; } }
@media(min-width:651px) and (max-width:950px) { .desk-note { font-size:24px; } }
@media(max-width:650px) {
 .desk-note { font-size:18px; left:0; top:1%; }
 .desk-mascot { width:25%; left:12%; top:76%; }
 .desk-tabs { font-size:11px; }
 .desk-topics > p { font-size:11px; }
 .desk-topic { font-size:12px; }
 .desk-target > span,.desk-target small { font-size:11px; }
}
@media(max-width:370px) { .desk-note { font-size:18px; } }
@media(prefers-color-scheme:dark) { .desk-note,.question-note { color:#8d9fbc; } }