/* Paper is the product material. Motion only enhances the complete HTML guide. */
@font-face { font-family:Inter; src:url('/fonts/InterVariable.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
:root { color-scheme:light; --surface:#fff; --ease:cubic-bezier(.2,.75,.2,1); font:16px/1.6 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:var(--text); background:var(--bg); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
body,h1,h2,h3,p,figure { margin:0; }
body { min-width:320px; overflow-x:clip; }
a { color:var(--blue); text-underline-offset:4px; }
img { display:block; max-width:100%; height:auto; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
.wrap { width:min(1200px,calc(100% - 112px)); margin-inline:auto; }
.skip { position:fixed; z-index:40; top:8px; left:16px; padding:10px 18px; background:var(--surface); border-radius:6px; transform:translateY(-160%); }
.skip:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:30; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:68px; }
.brand { display:inline-flex; align-items:center; gap:7px; color:var(--text); text-decoration:none; }
.wordmark { font-size:21px; line-height:1; font-weight:680; letter-spacing:-.065em; }
.wordmark > span { color:var(--blue); }
.site-header nav { display:flex; gap:30px; align-items:center; font-size:12px; font-weight:520; }
.site-header nav > a:not(.btn) { color:var(--muted); text-decoration:none; padding-block:12px; }
.site-header nav > a:hover { color:var(--blue); }
.reading-line { height:1px; background:var(--line); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:30px; padding:14px 25px; border-radius:30px; background:#4a6eae; color:#fff; text-decoration:none; font-size:14px; font-weight:560; transition:background .2s,transform .3s var(--ease); }
.btn:hover { background:#3155b1; transform:translateY(-2px); }
.btn > span { font-size:17px; }
.btn--small { padding:7px 16px; font-size:11px; gap:16px; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:600; letter-spacing:.075em; text-transform:uppercase; }
h1,h2,h3 { letter-spacing:-.055em; line-height:1.06; font-weight:570; text-wrap:balance; }
h2 { font-size:clamp(38px,4.4vw,62px); }
h2 > span { color:var(--muted); }
.hero .eyebrow { font-size:11px; letter-spacing:.055em; }
.hero h1 > span { color:var(--blue); }
.hero__lead { color:var(--muted); text-wrap:pretty; }
.hero__actions { display:flex; align-items:center; }
.hero__actions > span { color:var(--muted); }
.hero__next { display:inline-flex; align-items:center; gap:17px; margin-top:37px; font-size:11px; color:var(--muted); text-decoration:none; }
.hero__next > span { font-size:18px; color:var(--blue); }
/* One stationary stage. The source question remains the same element as it travels. */
.process { position:relative; }
.process-pin { position:relative; overflow:clip; }
.process-beats { width:min(1120px,calc(100% - 100px)); margin:auto; }
.process-beat { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:70px; padding:85px 0; }
.beat-index { font-size:11px; font-weight:550; letter-spacing:.075em; text-transform:uppercase; }
.beat-copy h2 { font-size:51px; margin-top:18px; letter-spacing:-.053em; }
.beat-copy > p:last-child { font-size:16px; line-height:1.65; max-width:435px; margin-top:24px; text-wrap:pretty; }
.process-fallback img { box-shadow:0 2px 3px #03174326,0 22px 45px -10px #0b1d6950; }
.process-fallback figcaption { font-size:12px; line-height:1.65; margin-top:25px; }
.fallback-source > img { width:340px; margin:auto; transform:rotate(-4deg); }
.fallback-selection img { width:460px; margin-bottom:18px; }
.fallback-output { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:20px; }
.fallback-output figcaption { grid-column:1/-1; }
.process-art,.process-rail { display:none; }
.has-story-motion .process { height:390svh; background:none; }
.has-story-motion .process-pin { position:sticky; min-height:600px; max-height:1100px; }
.has-story-motion .process-beats { position:absolute; inset:35px 0 auto; width:calc(100% - 60px); height:172px; z-index:5; pointer-events:none; }
.has-story-motion .process-beat { display:block; position:absolute; inset:0; padding:0; text-align:center; opacity:0; }
.has-story-motion .process-beat:first-child { opacity:1; }
.has-story-motion .beat-copy h2 { margin-top:12px; }
.has-story-motion .beat-copy h2 br::after { content:' '; }
.has-story-motion .beat-copy > p:last-child { margin:16px auto 0; }
.has-story-motion .process-fallback { display:none; }
.has-story-motion .process-art { display:block; position:absolute; inset:214px 30px 76px; }
.process-canvas { position:absolute; top:50%; left:50%; width:1080px; height:590px; transform:translate(-50%,-50%) scale(var(--canvas-scale,1)); }
.process-canvas [data-object] { position:absolute; top:0; left:0; transform-origin:0 0; }
.paper-object { width:595px; background:#fff; }
.paper-object--back,.paper-object--answers { width:842px; }
.paper-object--back { box-shadow:0 5px 15px #0b1d4d22,0 25px 45px -12px #0b1d4d40; }
.process-canvas .question-topic { top:auto; bottom:-66px; left:18px; width:250px; display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:9px; background:#e3eee9; color:#3f6d5d; box-shadow:0 10px 20px -8px #3352453a; font-size:15px; font-weight:520; }
.question-topic small { display:block; font-size:11px; font-weight:450; letter-spacing:.04em; color:#4b6c60; margin-bottom:1px; }
.question-topic i { font-style:normal; font-size:16px; }
.source-window { position:absolute; left:5.042%; top:7.126%; width:86.555%; height:34.917%; border:1.5px solid #7695e8; background:#9bbaf91c; }
.source-window::before,.source-window::after { content:''; position:absolute; width:5px; height:5px; border:1px solid #6486e4; background:#fff; }
.source-window::before { top:-3px; left:-3px; }
.source-window::after { right:-3px; bottom:-3px; }
.question-object { width:515px; background:white; }
.question-provenance { width:515px; display:flex; align-items:center; justify-content:space-between; padding-bottom:9px; font-size:12px; font-weight:520; letter-spacing:.05em; }
.process-canvas .question-provenance { top:-32px; }
.question-provenance > b { font-size:13px; font-weight:550; letter-spacing:0; }
.selection-brief { width:310px; }
.brief-kicker { display:flex; align-items:center; justify-content:space-between; color:#aec6fd; font-size:12px; font-weight:500; letter-spacing:.09em; }
.brief-kicker span { color:#d0dfff; }
.brief-subject { letter-spacing:-.04em; line-height:1.3; margin-top:13px; }
.brief-topic > span { font-size:13px; }
.brief-topic > strong { display:flex; align-items:center; gap:12px; font-weight:520; letter-spacing:-.035em; margin-top:13px; border-bottom:1px solid #c4d8ff50; }
.brief-topic i { font-size:11px; font-style:normal; display:grid; place-items:center; width:21px; height:21px; border-radius:5px; }
.brief-target { display:flex; align-items:center; justify-content:space-between; }
.brief-target > span { font-size:13px; }
.brief-target > strong { line-height:1; font-weight:430; letter-spacing:-.085em; }
.brief-total { border-top:1px solid #c4d8ff50; }
.brief-total b { font-weight:550; margin-right:5px; }
.source-note { width:260px; }
.source-note > b { display:block; font-weight:500; letter-spacing:-.025em; margin-top:5px; }
.answer-note { display:flex; align-items:center; gap:14px; width:380px; }
.answer-check { display:grid; place-items:center; width:32px; height:32px; border:1px solid #b7cfff80; border-radius:50%; font-size:15px; }
.answer-note b { font-size:19px; font-weight:500; letter-spacing:-.03em; display:block; }
.answer-note div > span { font-size:13px; }
.has-story-motion .process-rail { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); gap:26px; width:min(510px,calc(100% - 64px)); font-size:11px; }
.process-rail > span { position:relative; padding-top:12px; }
.process-rail > span::before,.process-rail i { position:absolute; content:''; top:0; left:0; width:100%; height:2px; background:#c5d6ff32; }
.process-rail i { transform-origin:left; transform:scaleX(0); }
.process-note { display:flex; gap:35px; justify-content:space-between; padding-top:22px; color:var(--muted); font-size:11px; }
.process-note p { max-width:490px; }
/* A teacher's collection, with the small, familiar character from Builder. */
:root { --bg:#fbfaf7; --text:#272a2f; --muted:#64676d; --line:#e1e2e1; --blue:#5277b8; }
.site-header { background:#fbfaf7ed; }
.hero { position:relative; min-height:760px; text-align:left; padding-block:120px 104px; }
.hero-copy { position:relative; z-index:2; width:530px; }
.hero h1 { font-size:78px; line-height:1.02; margin-top:26px; font-weight:610; letter-spacing:-.065em; }
.hero__lead { max-width:390px; font-size:16px; line-height:1.75; margin:26px 0 0; }
.hero__actions { justify-content:flex-start; gap:22px; margin-top:28px; }
.hero__actions > span { line-height:1.7; font-size:11px; }
.hero__next { position:absolute; left:0; bottom:25px; margin:0; padding-top:22px; border-top:1px solid var(--line); width:100%; justify-content:space-between; }
.teacher-desk { position:absolute; left:calc(50% - 15px); top:28px; width:690px; height:670px; transform-origin:0 50%; }
.desk-wash { position:absolute; width:635px; height:590px; top:50px; left:10px; border-radius:48% 52% 59% 41% / 60% 44% 56% 40%; background:radial-gradient(ellipse at 48% 50%,#e9edf5,#f1f1f600 73%); transform:rotate(-16deg); }
.desk-paper,.desk-scheme { position:absolute; box-shadow:0 1px 2px #25395714,0 9px 17px #25395712,0 42px 44px -27px #25395735; background:#fff; border:1px solid #e7e8e9; }
.desk-paper { width:325px; left:193px; top:55px; transform:rotate(5deg); }
.desk-scheme { width:390px; left:241px; top:218px; transform:rotate(13deg); }
.desk-topics { position:absolute; width:259px; left:17px; top:170px; padding:20px; background:#fff; border:1px solid #e4e7ec; border-radius:15px; box-shadow:0 2px 4px #27385f06,0 24px 35px -13px #27385f27; transform:rotate(-5deg); }
.desk-tabs { display:flex; gap:4px; padding:3px; border-radius:8px; background:#f0f1f4; font-size:12px; }
.desk-tabs > * { width:50%; text-align:center; padding:6px; font-weight:500; color:#8a8e98; }
.desk-tabs b { color:#fff; background:#30343b; border-radius:6px; }
.desk-topics > p { font-size:12px; color:#6f737c; margin:21px 0 8px; }
.desk-topic { display:flex; gap:10px; align-items:center; font-size:13px; padding:10px 0; }
.desk-topic b { font-weight:530; }
.desk-topic i { width:15px; height:15px; display:grid; place-items:center; background:#6988c0; border-radius:4px; color:white; font-style:normal; font-size:10px; }
.desk-topic--off { color:#6f727d; }
.desk-topic--off i { background:transparent; border:1px solid #dce0e7; }
.desk-target { position:absolute; left:378px; top:418px; width:205px; padding:23px; border-radius:14px; background:#f1edf8; color:#6f5c99; border:1px solid #e4deef; transform:rotate(7deg); box-shadow:0 20px 30px -12px #58437624; }
.desk-target > span { font-size:12px; }
.desk-target > strong { display:flex; align-items:center; gap:22px; font-size:65px; line-height:1.1; letter-spacing:-.07em; font-weight:510; margin-top:8px; }
.desk-target small { font-size:12px; line-height:1.65; letter-spacing:0; font-weight:400; }
.desk-target > div { height:4px; border-radius:3px; background:#dbd2ec; margin-top:15px; }
.desk-target > div > i { display:block; width:100%; height:4px; background:#a18dc5; border-radius:3px; }
.desk-mascot { position:absolute; width:127px; left:244px; top:477px; transform:rotate(-7deg); }
.scene-mascot { width:100%; height:auto; overflow:visible; }
.scene-mascot__shadow { fill:#33477212; }
.scene-mascot .exam-mascot__arm--right { transform:rotate(10deg); }
.desk-note { position:absolute; left:62px; top:510px; color:#5f6f83; font:italic 22px/1.3 Georgia,serif; transform:rotate(-9deg); }
.desk-note svg { position:absolute; width:90px; top:28px; left:122px; fill:none; stroke:#91a0b3; stroke-width:1.3; }
.process { margin-inline:0; border-radius:0; background:#eef0f5; color:var(--text); }
.process-pin { border-radius:0; background:radial-gradient(ellipse at 50% 60%,#e0e7f2 0,#eef0f5 65%); }
.beat-index { color:#536381; }
.beat-copy h2 > span { color:#6786b4; }
.beat-copy > p:last-child { color:#566174; }
.has-story-motion .process-pin { top:69px; height:calc(100svh - 69px); }
.has-story-motion .beat-copy h2 br { display:initial; }
.has-story-motion .process-beats { top:30px; }
.has-story-motion .beat-copy h2 { font-size:43px; }
.has-story-motion .beat-copy > p:last-child { font-size:14px; max-width:570px; margin-top:16px; }
.has-story-motion .process-art { top:244px; bottom:64px; }
.paper-object { box-shadow:0 1px 2px #22365c12,0 8px 14px #22365c0f,0 33px 40px -17px #22365c3b; }
.question-object { box-shadow:0 1px 2px #22365c0f,0 15px 25px -9px #22365c30; }
.question-provenance { color:#50627f; }
.question-provenance > b { color:#3f66a0; }
.selection-brief { padding:24px; background:#fff; color:#38465c; border:1px solid #dee4ed; border-radius:16px; box-shadow:0 22px 40px -18px #20375f32; }
.brief-kicker,.brief-kicker span { color:#61718b; }
.brief-subject { font-size:23px; }
.brief-topic { margin-top:23px; }
.brief-topic > span { color:#61718b; }
.brief-topic > strong { font-size:20px; border-color:#e3e9f0; padding-bottom:18px; color:#5277b8; }
.brief-topic i { background:#6c8ac3; color:#fff; }
.brief-target { margin-top:16px; }
.brief-target > span { color:#61718b; }
.brief-target > strong { font-size:91px; color:#5f7cb2; }
.brief-total { border-color:#e3e9f0; color:#61718b; font-size:12px; padding-top:13px; margin-top:14px; }
.brief-total b { color:#657fae; }
.source-note { color:#55657e; font-size:14px; }
.source-note > b { color:#3f5c88; font-size:19px; }
.question-note { width:245px; color:#46726a; font:italic 24px/1.35 Georgia,serif; }
.question-note b { display:block; font-weight:400; }
.question-note svg { width:135px; fill:none; stroke:#90aaa4; stroke-width:1.35; transform:rotate(-8deg); margin-top:12px; margin-left:12px; }
.answer-note { color:#45695f; }
.answer-check { background:#dcece6; border-color:#bccdc7; }
.answer-note div > span { color:#5b7a71; }
.has-story-motion .process-rail { color:#5c6a80; }
.process-rail > span::before { background:#d0d9e6; }
.process-rail i { background:#7693c3; }
.process-rail [data-current] { color:#3f66a0; }
.process-fallback figcaption { color:#566174; }
/* The bank is a collection of stored records, not another application window. */
.bank-object { width:420px; }
.bank-cabinet { position:relative; isolation:isolate; padding:22px 24px 17px; border:1px solid #d3dbe8; border-radius:14px; background:#f6f8fc; color:#577097; box-shadow:0 3px 6px #1b356017,0 32px 42px -24px #23407066; }
.bank-cabinet::before,.bank-cabinet::after { content:''; position:absolute; inset:auto 10px -11px; height:12px; z-index:-1; background:#e3eaf4; border:1px solid #c5d2e4; border-radius:13px; }
.bank-cabinet::after { inset:auto 18px -21px; height:12px; z-index:-2; background:#d8e2f0; }
.bank-cabinet__top > b { display:block; font-size:20px; font-weight:540; letter-spacing:-.04em; }
.bank-cabinet__top > span { display:flex; align-items:center; gap:6px; font-size:13px; color:#62718a; margin-top:2px; }
.bank-cabinet__top svg { width:14px; fill:none; stroke:currentColor; stroke-width:1.2; }
.bank-index { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:17px; }
.bank-column { --record:#8faedf; --record-bg:#e5edfa; }
.bank-column--hardware { --record:#8eb5a3; --record-bg:#e4f0e9; }
.bank-column--code { --record:#b09acb; --record-bg:#ece6f4; }
.bank-column > b { display:block; min-height:42px; color:#5d6d86; font-size:13px; line-height:1.5; font-weight:500; padding-left:2px; }
.bank-record { position:relative; display:flex; align-items:center; gap:9px; height:50px; margin-bottom:9px; padding:11px; border-radius:5px; background:var(--record-bg); color:#55667f; box-shadow:0 1px 1px #30426613; }
.bank-record > i { flex:none; width:3px; height:21px; border-radius:2px; background:var(--record); }
.bank-record > span { font-size:14px; font-weight:540; }
.bank-record small { font-size:13px; margin-left:auto; }
.bank-record:not(:has(span))::after { content:''; width:58%; height:4px; border-radius:2px; background:var(--record); opacity:.35; box-shadow:0 9px 0 var(--record); }
.bank-cabinet__foot { display:flex; align-items:center; justify-content:space-between; gap:5px; border-top:1px solid #e0e6ef; padding-top:13px; margin-top:7px; font-size:12px; color:#62718a; }
.bank-cabinet__foot i { font-style:normal; opacity:.6; }
.fallback-source { position:relative; padding-bottom:10px; }
.fallback-source > img { width:290px; margin-left:0; }
.fallback-bank { position:relative; width:320px; margin:-185px 0 40px auto; transform:rotate(3deg); }
.fallback-bank .bank-cabinet { padding:18px; }
.fallback-bank .bank-cabinet__top > b { font-size:17px; }
.fallback-bank .bank-index { gap:8px; margin-top:13px; }
.fallback-bank .bank-record { height:38px; padding:8px; }
.fallback-bank .bank-record > span,.fallback-bank .bank-record small { font-size:12px; }
@media(min-width:1600px) { .hero { min-height:800px; } .teacher-desk { left:calc(50% + 5px); top:52px; } }
@media(max-width:1350px) {
 .wrap { width:calc(100% - 80px); }
 .hero { padding-top:100px; min-height:710px; }
 .hero-copy { width:48%; }
 .hero h1 { font-size:67px; }
 .teacher-desk { transform:scale(.85); left:calc(50% - 32px); top:7px; }
 .hero__lead { font-size:15px; max-width:350px; }
 .hero__actions { gap:15px; }
 .hero__actions .btn { padding-inline:19px; font-size:13px; gap:20px; }
 .hero__actions > span { font-size:9px; }
}
@media(min-width:951px) and (max-width:1100px) {
 .hero-copy { width:47%; }
 .hero h1 { font-size:55px; }
 .hero__lead { max-width:306px; font-size:14px; }
 .teacher-desk { transform:scale(.68); left:calc(50% - 39px); top:-11px; }
}
@media(max-width:950px) {
 .wrap { width:calc(100% - 56px); }
 .hero { min-height:660px; padding-top:85px; }
 .hero h1 { font-size:55px; }
 .hero-copy { width:47%; }
 .hero__lead { font-size:14px; max-width:306px; }
 .hero__actions { display:block; }
 .hero__actions > span { display:block; margin-top:14px; }
 .hero__actions > span br { display:none; }
 .teacher-desk { transform:scale(.57); left:calc(50% - 39px); top:-11px; }
 .process-beats { width:calc(100% - 70px); }
 .process-beat { gap:40px; }
 .beat-copy h2 { font-size:37px; }
 .beat-copy > p:last-child { font-size:14px; }
 .has-story-motion .process-art { inset-inline:24px; }
 .has-story-motion .beat-copy h2 { font-size:41px; }
}
@media(min-width:651px) and (max-height:850px) {
 .has-story-motion .process-beats { top:30px; }
 .has-story-motion .beat-copy h2 { font-size:35px; }
 .has-story-motion .beat-copy h2 br { display:none; }
 .has-story-motion .beat-copy > p:last-child { max-width:660px; font-size:13px; margin-top:14px; }
 .has-story-motion .process-art { top:184px; bottom:60px; }
}
@media(max-width:650px) {
 html { scroll-padding-top:75px; }
 .wrap { width:calc(100% - 40px); }
 .site-header__inner { min-height:59px; gap:12px; }
 .brand img { width:24px; height:24px; }
 .wordmark { font-size:19px; }
 .site-header nav > a:not(.btn) { display:none; }
 .btn--small { padding:7px 12px; font-size:10px; gap:9px; }
 .btn--small > span { font-size:13px; }
 .hero { min-height:915px; padding:54px 0 75px; }
 .hero-copy { width:100%; }
 .hero .eyebrow { font-size:9px; }
 .hero h1 { font-size:clamp(51px,11.9vw,75px); margin-top:22px; line-height:1.025; }
 .hero__lead { font-size:14px; line-height:1.75; max-width:365px; margin-top:23px; }
 .hero__actions { display:flex; gap:18px; margin-top:24px; }
 .hero__actions .btn { font-size:12px; padding:12px 18px; }
 .hero__actions > span { font-size:9px; margin:0; }
 .hero__actions > span br { display:initial; }
 .hero__next { bottom:23px; font-size:9px; padding-top:16px; gap:8px; }
 .teacher-desk { position:relative; left:calc(50% - 196px); top:0; margin-top:35px; margin-bottom:-275px; transform:scale(.56); transform-origin:0 0; }
 .desk-note { font-size:24px; left:64px; }
 .process-beats { width:calc(100% - 40px); }
 .process-beat { display:block; padding-block:48px; }
 .beat-index { font-size:9px; }
 .beat-copy h2 { font-size:35px; margin-top:17px; }
 .beat-copy > p:last-child { font-size:13px; margin-top:18px; max-width:365px; }
 .process-fallback { margin:35px auto 0; max-width:360px; }
 .fallback-source > img { width:260px; }
 .process-fallback figcaption { font-size:10px; margin-top:22px; }
 .fallback-selection img { width:100%; }
 .fallback-output { gap:13px; }
 .has-story-motion .process { height:400svh; }
 .has-story-motion .process-pin { top:60px; height:calc(100svh - 60px); min-height:620px; }
 .has-story-motion .process-beats { top:29px; width:calc(100% - 40px); }
 .has-story-motion .beat-copy h2 { font-size:34px; margin-top:13px; }
 .has-story-motion .beat-copy > p:last-child { font-size:12px; line-height:1.65; max-width:335px; margin-top:15px; }
 .has-story-motion .process-art { top:229px; bottom:63px; left:14px; right:14px; }
 .process-canvas .selection-brief { width:570px; height:163px; padding:22px 27px; }
 .brief-kicker { max-width:300px; font-size:11px; }
 .brief-subject { font-size:23px; margin-top:10px; }
 .brief-topic { margin-top:13px; }
 .brief-topic > span { display:none; }
 .brief-topic > strong { margin:0; padding:0; border:0; font-size:23px; }
 .brief-target { position:absolute; right:29px; top:23px; margin:0; display:flex; flex-direction:column; align-items:flex-end; }
 .brief-target > span { font-size:11px; }
 .brief-target > strong { font-size:87px; line-height:1.08; }
 .brief-total { display:none; }
 .has-story-motion .process-rail { bottom:23px; font-size:9px; width:calc(100% - 44px); gap:17px; }
 .process-note { display:block; font-size:9px; padding-top:19px; }
 .process-note p + p { margin-top:8px; }
}
@media(max-width:370px) {
 .wrap { width:calc(100% - 32px); }
 .hero { min-height:867px; }
 .hero h1 { font-size:45px; }
 .hero__lead { font-size:13px; }
 .hero__actions { gap:12px; }
 .hero__actions .btn { font-size:11px; padding-inline:15px; gap:12px; }
 .hero__actions > span { font-size:8px; }
 .teacher-desk { top:0; left:calc(50% - 169px); transform:scale(.48); margin-bottom:-323px; }
 .hero__next { font-size:8px; }
 .has-story-motion .beat-copy h2 { font-size:29px; }
 .has-story-motion .beat-copy > p:last-child { font-size:11px; }
 .has-story-motion .process-art { top:221px; bottom:54px; }
 .has-story-motion .process-rail { font-size:8px; }
}
@media(prefers-color-scheme:dark) {
 :root { --bg:#1a1d22; --surface:#282e37; --text:#edf0f3; --muted:#9da6b2; --line:#37404d; --blue:#93b0e1; }
 .site-header { background:#1a1d22ed; }
 .brand > img { filter:brightness(0) invert(1); }
 .btn { color:white; background:#4a6eae; }
 .desk-wash { background:radial-gradient(ellipse,#394357,transparent 72%); }
 .desk-topics { background:#2f3847; border-color:#414f67; }
 .desk-tabs { background:#202938; }
 .desk-tabs b { color:#fff; background:#556c90; }
 .desk-topic--off { color:#8b9bb3; }
 .desk-topic--off i { border-color:#687b98; }
 .desk-topics > p { color:#a3b4cf; }
 .desk-target { background:#443c55; color:#c8b9df; border-color:#615370; }
 .desk-target > div { background:#65577c; }
 .desk-note { color:#8d9fbc; }
 .scene-mascot .exam-mascot__check { stroke:#86a5dc; }
 .process,.process-pin { background:#252e3e; }
 .process-pin { background:radial-gradient(ellipse at 50% 60%,#354460,#252e3e 68%); }
 .beat-copy h2 > span { color:#a2bae3; }
 .beat-index,.beat-copy > p:last-child,.process-fallback figcaption { color:#b0bed4; }
 .selection-brief { color:#d0daec; background:#32425d; border-color:#506488; }
 .brief-kicker,.brief-kicker span,.brief-target > span,.brief-topic > span,.brief-total { color:#a5b7d6; }
 .brief-topic > strong,.brief-target > strong,.brief-total b { color:#bfcef0; }
 .brief-topic > strong,.brief-total { border-color:#536582; }
 .source-note,.question-provenance { color:#a4b7d6; }
 .source-note > b,.question-provenance > b { color:#d2dff4; }
 .question-note,.answer-note { color:#b2d0c7; }
 .answer-check { background:#395149; border-color:#658879; }
 .answer-note div > span { color:#a1beb4; }
 .process-rail > span::before { background:#455672; }
 .process-rail i { background:#adc4e9; }
 .process-rail [data-current] { color:#d2e0f6; }
}
@media(prefers-reduced-motion:no-preference) {
 .motion-ready .hero-copy { animation:arrive .7s var(--ease) both; }
 .motion-ready .desk-paper { animation:paper-in 1s .12s var(--ease) both; }
 .motion-ready .desk-topics { animation:paper-in .9s .24s var(--ease) both; }
 .motion-ready .desk-target { animation:paper-in .9s .34s var(--ease) both; }
 .motion-ready .desk-mascot { animation:paper-in .9s .45s var(--ease) both; }
 .motion-ready .desk-mascot .exam-mascot__arm--right { animation:hello 1.6s 1.3s ease-in-out; }
}
@keyframes arrive { from { opacity:0; translate:0 18px; } to { opacity:1; translate:0 0; } }
@keyframes paper-in { from { opacity:0; translate:0 25px; } to { opacity:1; translate:0 0; } }
@keyframes hello { 0%,100% { transform:translate(0,0) rotate(10deg); } 35%,65% { transform:translate(0,-4px) rotate(32deg); } 50% { transform:translate(0,-4px) rotate(18deg); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
@media(max-width:950px) {
 .fallback-bank { width:290px; }
}
@media(max-width:650px) {
 .desk-wash { transform:none; }
 .fallback-source > img { width:250px; }
 .fallback-bank { width:270px; margin-top:-180px; margin-right:5px; margin-bottom:34px; }
 .fallback-bank .bank-cabinet { padding:15px; }
 .fallback-bank .bank-column > b { font-size:11px; min-height:36px; }
 .fallback-bank .bank-record { height:35px; padding:7px; }
 .fallback-bank .bank-cabinet__foot { font-size:11px; }
}
@media(max-width:370px) {
 .teacher-desk { width:680px; }
 .fallback-bank { width:244px; }
 .fallback-bank .bank-cabinet__foot { font-size:11px; gap:2px; }
}
@media(prefers-color-scheme:dark) {
 .bank-cabinet { background:#313c4f; border-color:#4b5c76; color:#c0cce0; }
 .bank-cabinet::before { background:#3b4c67; border-color:#4a6080; }
 .bank-cabinet::after { background:#405674; border-color:#557293; }
 .bank-cabinet__top > span,.bank-column > b,.bank-cabinet__foot { color:#9aaecb; }
 .bank-cabinet__foot { border-color:#4a5b74; }
 .bank-column { --record:#9cb9e8; --record-bg:#465a79; }
 .bank-column--hardware { --record:#9bbfae; --record-bg:#435e59; }
 .bank-column--code { --record:#bba4d3; --record-bg:#574e6d; }
 .bank-record { color:#c0cee1; }
}
/* Stage payoffs: the crop lifts, the bank receives, the target fills, the answers match. */
.process-canvas [data-object='answers'] { z-index:1; }
.process-canvas [data-object='output'] { z-index:2; }
.process-canvas .question-object { z-index:3; box-shadow:0 1px 2px #22365c0f,0 calc(15px + 26px*var(--lift,0)) calc(25px + 30px*var(--lift,0)) -9px rgb(34 54 92/calc(.19 + .2*var(--lift,0))); }
.process-canvas .source-note,.process-canvas .question-note,.process-canvas .answer-note { z-index:4; }
.paper-object--source { overflow:hidden; }
.source-window { border:1.5px dashed #5f84e0; background:#9bbaf912; box-shadow:0 0 0 1200px rgb(238 240 245/calc(var(--veil,0)*.66)); }
.process-canvas .bank-record { box-shadow:0 1px 1px #30426613,0 0 0 calc(var(--ring,0)*6px) #6f93dd45; }
.process-canvas .bank-record--arrival { background:color-mix(in srgb,var(--record-bg) calc(var(--fill,1)*100%),transparent); outline:1.5px dashed color-mix(in srgb,var(--record) calc(100% - var(--fill,1)*100%),transparent); outline-offset:-1.5px; }
.process-canvas .bank-record--arrival > * { opacity:var(--fill,1); }
.brief-meter { display:flex; gap:3px; height:26px; margin-top:16px; padding:3px; border-radius:8px; background:#edf1f7; }
.brief-meter i { flex:3; display:grid; place-items:center; border-radius:5px; background:#6f8fca; color:#fff; font:normal 600 12px/1 Inter,sans-serif; clip-path:inset(0 calc(100% - var(--fill,1)*100%) 0 0 round 5px); }
.brief-meter i + i { flex:5; background:#5277b8; }
.brief-meter span { opacity:var(--fill,1); }
.brief-total { display:flex; align-items:center; gap:8px; opacity:var(--fill,1); translate:0 calc((1 - var(--fill,1))*6px); }
.brief-total > i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#dcece6; color:#3f6d5d; font-style:normal; font-size:11px; }
.brief-total b { margin:0; }
.match-lines { position:absolute; inset:0; width:100%; height:100%; z-index:3; overflow:visible; pointer-events:none; }
.match-lines path { fill:none; stroke:#5d86c9; stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--draw,0)); }
.match-lines circle { fill:#fff; stroke:#5d86c9; stroke-width:2; opacity:var(--draw,0); }
.question-note { position:relative; }
.note-arrow { position:absolute; fill:none; stroke:#7ea69c; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.question-note .note-arrow--wide { width:120px; left:-112px; top:58px; margin:0; transform:none; }
.question-note .note-arrow--narrow { display:none; }
.answer-note { padding:12px 18px 12px 12px; border-radius:40px; background:#ffffffd9; box-shadow:0 12px 26px -14px #2a4a4060; width:max-content; }
.answer-check { background:#4f8a75; border-color:#4f8a75; color:#fff; }
@media(min-width:651px) and (max-height:850px) { .has-story-motion .beat-copy > p:last-child { font-size:14px; } }
/* Landscape screens: copy on the left, the stage takes the remaining room. */
@media(min-width:900px) and (min-aspect-ratio:5/4) {
 .process-pin { --gutter:max(40px,calc((100% - 1320px)/2)); --copy:clamp(280px,27vw,390px); }
 .has-story-motion .process-beats { inset:0 auto 0 var(--gutter); width:var(--copy); height:auto; }
 .has-story-motion .process-beat { display:flex; flex-direction:column; justify-content:center; padding-bottom:40px; text-align:left; }
 .has-story-motion .beat-copy h2 { font-size:clamp(34px,3.2vw,46px); }
 .has-story-motion .beat-copy h2 br { display:none; }
 .has-story-motion .beat-copy h2 > span { display:block; text-wrap:balance; }
 .has-story-motion .beat-copy > p:last-child { margin:20px 0 0; font-size:clamp(14px,1.15vw,16px); max-width:none; }
 .has-story-motion .process-art { inset:18px max(18px,calc(var(--gutter) - 30px)) 18px calc(var(--gutter) + var(--copy) + 16px); }
 .has-story-motion .process-rail { left:var(--gutter); bottom:max(32px,calc(50% - 300px)); transform:none; width:var(--copy); gap:12px; }
 .process-rail > span { white-space:nowrap; }
}
@media(max-width:650px) {
 .question-note .note-arrow--wide { display:none; }
 .question-note .note-arrow--narrow { display:block; width:80px; left:-82px; top:-70px; }
 .process-canvas .selection-brief { height:auto; }
 .has-story-motion .process-art { top:244px; }
 .has-story-motion .beat-copy h2 { font-size:32px; }
 .process-canvas .brief-meter { width:300px; height:30px; margin-top:12px; }
 .process-canvas .brief-meter i { font-size:16px; }
 .has-story-motion .process-rail { font-size:11px; }
 .process-note { font-size:11px; }
 .beat-index { font-size:11px; }
 .process-fallback figcaption { font-size:12px; }
}
@media(max-width:370px) { .has-story-motion .process-rail { font-size:11px; gap:10px; width:calc(100% - 28px); } }
@media(prefers-color-scheme:dark) {
 :root .source-window { box-shadow:0 0 0 1200px rgb(37 46 62/calc(var(--veil,0)*.62)); }
 .brief-meter { background:#26324a; }
 .brief-meter i { background:#7f9fd6; color:#14203a; }
 .brief-meter i + i { background:#a3bdea; }
 .brief-total > i { background:#395149; color:#cfe6dd; }
 .question-topic,.process-canvas .question-topic { background:#2f4a42; color:#cfe6dd; }
 .question-topic small { color:#a7c7bb; }
 .match-lines path,.match-lines circle { stroke:#7ea3e3; }
 .note-arrow { stroke:#8fb7ac; }
 .answer-note { background:#2c3a4fe6; }
 .answer-check { background:#6aa58f; border-color:#6aa58f; color:#13221d; }
 .beat-index { color:#a9b8cf; }
 .has-story-motion .process-rail { color:#a0adc2; }
 .process-canvas .bank-record { box-shadow:0 1px 1px #0003,0 0 0 calc(var(--ring,0)*6px) #9cb9e855; }
}
/* Hero: one short, settled load. Compression is ticked, the target fills, the paper lands, the mascot approves. */
@media(prefers-reduced-motion:no-preference) {
 .motion-ready .desk-topics { animation:paper-in .8s .12s var(--ease) both; }
 .motion-ready .desk-topic:not(.desk-topic--off) i { animation:tick-in .5s .7s var(--ease) both; }
 .motion-ready .desk-target { animation:paper-in .8s .45s var(--ease) both; }
 .motion-ready .desk-target > div > i { transform-origin:left; animation:fill-in .85s 1s cubic-bezier(.55,0,.25,1) both; }
 .motion-ready .desk-target > strong { transform-origin:0 60%; animation:count-pop .55s 1.7s var(--ease) both; }
 .motion-ready .desk-paper { animation:fade-in .5s both,paper-settle .9s 1.35s var(--ease) both; }
 .motion-ready .desk-scheme { animation:scheme-out .9s 1.6s var(--ease) both; }
 .motion-ready .desk-mascot { animation:paper-in .8s .3s var(--ease) both,mascot-hop .6s 2.05s ease-in-out; }
 .motion-ready .desk-mascot .exam-mascot__arm--right { animation:hello 1.3s 2.15s ease-in-out; }
 .motion-ready .desk-note { animation:arrive .8s 2.25s var(--ease) both; }
}
@keyframes fade-in { from { opacity:0; } }
@keyframes tick-in { 0% { background:transparent; box-shadow:inset 0 0 0 1px #c9cfd9; color:transparent; scale:.75; } 55% { scale:1.22; } 100% { scale:1; } }
@keyframes fill-in { from { transform:scaleX(0); } }
@keyframes count-pop { from { opacity:.15; scale:.82; } }
@keyframes paper-settle { from { translate:-14px -30px; rotate:-3deg; scale:1.035; box-shadow:0 2px 4px #25395714,0 26px 34px -8px #25395730,0 60px 60px -30px #25395740; } }
@keyframes scheme-out { from { opacity:0; translate:-70px -40px; rotate:-9deg; } }
@keyframes mascot-hop { 0%,100% { translate:0 0; scale:1; } 30% { translate:0 -16px; scale:.97 1.04; } 62% { translate:0 0; scale:1.05 .95; } 80% { scale:.99 1.01; } }
/* Phones: a compact desk that fits under the copy, labels at full size. */
@media(max-width:650px) {
 .hero { min-height:0; padding:38px 0 92px; }
 .hero .eyebrow { font-size:11px; }
 .hero h1 { font-size:clamp(44px,11.6vw,66px); margin-top:16px; }
 .hero__lead { margin-top:18px; }
 .hero__actions { margin-top:20px; }
 .hero__actions > span { font-size:11px; }
 .hero__next { font-size:11px; }
 .teacher-desk { position:relative; left:auto; top:auto; width:100%; max-width:400px; height:auto; aspect-ratio:335/350; margin:22px auto 0; transform:none; }
 .desk-wash { width:100%; height:92%; left:0; top:4%; }
 .desk-paper { width:45%; left:37%; top:0; }
 .desk-scheme { width:50%; left:49%; top:30%; }
 .desk-topics { width:min(200px,59%); left:0; top:17%; padding:13px; border-radius:12px; }
 .desk-tabs { font-size:11px; }
 .desk-tabs > * { padding:4px; }
 .desk-topics > p { font-size:11px; margin:12px 0 2px; }
 .desk-topic { font-size:12px; gap:8px; padding:6px 0; white-space:nowrap; }
 .desk-target { width:min(158px,47%); left:53%; top:57%; padding:13px 15px; border-radius:12px; }
 .desk-target > span,.desk-target small { font-size:11px; }
 .desk-target > strong { font-size:44px; gap:12px; margin-top:2px; }
 .desk-target small { line-height:1.35; }
 .desk-target > div { margin-top:8px; }
 .desk-mascot { width:24%; left:33%; top:71%; }
 .desk-note { left:0; top:84%; font-size:18px; }
 .desk-note svg { width:52px; top:8px; left:108px; transform:rotate(-40deg); }
}
@media(max-width:370px) {
 .hero h1 { font-size:42px; }
 .hero__actions > span { font-size:11px; }
 .hero__next { font-size:11px; }
 .teacher-desk { width:100%; transform:none; margin-bottom:0; left:auto; }
 .desk-topics { width:62%; padding:11px; }
 .desk-topic { font-size:11px; }
 .desk-note { font-size:16px; }
 .desk-note svg { left:96px; }
 .hero__actions { display:block; }
 .hero__actions .btn { white-space:nowrap; }
 .hero__actions > span { display:block; margin-top:12px; }
 .hero__actions > span br { display:none; }
}
/* ── Below the stage. One cream ground and blue; other colours only name a topic. ── */
:root { --ink:#5f6f83; --blue-ink:#46699f; --card:#fff; --card-line:#e4e2dc; --shade:#f1f0ec; --folder:#eae9e4; --paper-shadow:0 1px 2px #25395714,0 9px 17px #25395712,0 42px 44px -27px #25395735; }
.section-label { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:13px; font-weight:520; line-height:1.4; }
.section-label::before { content:''; flex:none; width:22px; height:2px; border-radius:1px; background:var(--blue); }
.small-note { font-size:13px; line-height:1.7; color:var(--muted); }
/* A little more control: one question, three ways to keep it. */
.refine { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px 88px; align-items:start; padding-block:168px 150px; }
.refine h2 { margin-top:26px; font-size:clamp(46px,5.1vw,72px); line-height:1; letter-spacing:-.06em; font-weight:600; }
.refine h2 em { font:italic 400 1.04em/1 Georgia,serif; letter-spacing:-.035em; color:var(--blue); }
.refine-lead { margin-top:26px; max-width:400px; font-size:17px; line-height:1.65; color:var(--muted); text-wrap:pretty; }
.refine-modes { list-style:none; margin:44px 0 0; padding:0; max-width:440px; border-top:1px solid var(--line); }
.refine-modes li { position:relative; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:3px 16px; padding:17px 6px 17px 22px; border-bottom:1px solid var(--line); }
.refine-modes li::before { content:''; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:2px; background:var(--blue); transform:scaleY(0); transition:transform .35s var(--ease); }
.refine-modes h3 { font-size:25px; letter-spacing:-.045em; line-height:1.2; transition:color .25s; }
.refine-modes b { font-size:14px; font-weight:560; font-variant-numeric:tabular-nums; transition:color .25s; }
.refine-modes p { grid-column:1/-1; font-size:14px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
.refine-modes button { font:inherit; letter-spacing:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.refine-modes button::after { content:''; position:absolute; inset:0; border-radius:10px; }
.refine-modes button:focus-visible { outline:none; }
.refine-modes button:focus-visible::after { outline:2px solid var(--blue); outline-offset:-2px; }
.refine-live .refine-modes li { transition:background-color .25s; }
.refine-live .refine-modes li:hover { background:color-mix(in srgb,var(--blue) 6%,transparent); }
.refine-live .refine-modes li:not(.is-active) h3 { color:var(--muted); }
.refine-live .refine-modes li.is-active::before { transform:none; }
.refine-live .refine-modes li.is-active :is(h3,b) { color:var(--blue-ink); }
.refine-now,.total-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.refine-paper { position:relative; padding:6px 4px 0 0; }
.sheet::before { content:''; position:absolute; z-index:-1; inset:30px -12px -12px 20px; background:#fff; border:1px solid #e7e6e1; rotate:2.4deg; box-shadow:0 22px 40px -26px #2539574d; }
.sheet { --ink:#5f6f83; --compression:#46699f; --size:#3a7560; --number:#77599f; --topic:var(--compression); position:relative; padding:30px 54px 28px 62px; background:#fff; color:#1f2124; border:1px solid #e7e8e9; box-shadow:var(--paper-shadow); font:15px/1.55 Arial,Helvetica,sans-serif; }
.sheet-key { display:flex; flex-wrap:wrap; gap:6px 20px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #ebeae6; color:#55585e; font:500 12px/1.4 Inter,sans-serif; }
.sheet-key span { display:inline-flex; align-items:center; gap:7px; }
.sheet-key i { width:10px; height:10px; border-radius:3px; background:var(--compression); }
.sheet-key .key-size i { background:var(--size); }
.sheet-key .key-number i { background:var(--number); }
.sheet-key .key-chosen { color:var(--compression); font-weight:620; }
.sheet-key small { font-size:12px; font-weight:450; color:#55585e; }
.q-lead { display:flex; gap:26px; }
.q-lead b,.q-text b { flex:none; }
.q-lead b { width:12px; }
.q-part[data-topic='size'] { --topic:var(--size); }
.q-part[data-topic='number'] { --topic:var(--number); }
.q-body,.q-stub,.q-kept { display:grid; grid-template-rows:1fr; transition:grid-template-rows .5s var(--ease),opacity .4s .25s,translate .5s .2s var(--ease),visibility 0s; }
.q-body > div,.q-stub > div,.q-kept > div { min-height:0; overflow:hidden; }
.q-body > div { position:relative; margin-left:-38px; padding-left:38px; }
.q-body > div > :first-child { margin-top:20px; }
.q-body > div > .q-lines { margin-bottom:4px; }
.q-body > div::before { content:''; position:absolute; left:4px; top:24px; bottom:6px; width:4px; border-radius:2px; background:var(--topic); }
.q-topic { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:0 0 5px 38px; color:var(--topic); font:620 12px/1.4 Inter,sans-serif; letter-spacing:.01em; }
.q-note { color:var(--ink); font:italic 400 22px/1.3 Georgia,serif; letter-spacing:0; rotate:-4deg; white-space:nowrap; translate:0 -2px; }
.q-text { display:flex; gap:14px; }
.q-text b { position:relative; width:24px; }
.q-circle { position:absolute; left:-8px; top:-6px; width:40px; height:32px; fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; overflow:visible; }
.q-lines { display:block; height:52px; margin:4px 40px 0 38px; background:radial-gradient(circle at 2px 24px,#777 .75px,transparent 1.1px) 0 0/4px 26px repeat; }
.q-lines--one { height:26px; }
.q-mark { position:absolute; right:0; bottom:8px; font-size:14px; }
.q-stub { grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .4s var(--ease),opacity .2s,visibility 0s .4s; }
.q-stub p { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin:14px 0 2px; padding:9px 14px; border:1px dashed #cfd1d5; border-radius:6px; color:#5d6066; font:500 12px/1.4 Inter,sans-serif; }
.q-stub s { text-decoration-color:#8d9096; }
.q-kept { grid-template-rows:0fr; opacity:0; visibility:hidden; transition:grid-template-rows .45s var(--ease),opacity .3s,visibility 0s .45s; }
.q-kept p { padding:12px 0 8px 38px; color:var(--ink); font:italic 400 22px/1.3 Georgia,serif; rotate:-3deg; transform-origin:0 50%; }
.q-part.is-out .q-body { grid-template-rows:0fr; opacity:0; translate:46px 0; visibility:hidden; transition:opacity .35s,translate .5s var(--ease),grid-template-rows .55s .25s var(--ease),visibility 0s .8s; }
.q-part.is-out .q-stub,.refine[data-mode='skip'] .q-kept { grid-template-rows:1fr; opacity:1; visibility:visible; transition:grid-template-rows .5s .3s var(--ease),opacity .4s .55s,visibility 0s; }
.sheet-total { display:flex; justify-content:space-between; align-items:baseline; margin-top:24px; padding-top:14px; border-top:1.5px solid #2a2b2e; font-size:14px; font-weight:700; }
.sheet-total > b { display:flex; align-items:baseline; gap:8px; }
.total-roll { display:inline-block; height:1.1em; overflow:hidden; color:var(--compression); font:600 34px/1.1 Inter,sans-serif; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.total-roll span { display:block; text-align:right; translate:0 calc(var(--mode,0) * -100%); transition:translate .6s .2s var(--ease); }
.refine-paper figcaption { max-width:520px; margin-top:28px; color:var(--muted); font-size:13px; line-height:1.65; }
/* Two everyday reasons to come back, each told as its own scene. */
.teacher-tools { padding-bottom:24px; }
.tool-scene__inner { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:56px 96px; align-items:center; padding-block:104px; border-top:1px solid var(--line); }
.reuse-paper .tool-scene__inner { grid-template-columns:minmax(0,7fr) minmax(0,4fr); }
.reuse-paper .tool-copy { order:2; }
.tool-copy h2 { margin-top:24px; font-size:clamp(38px,4vw,54px); }
.tool-copy h2 > span { color:var(--muted); }
.tool-copy h2.quote-title { font:italic 400 clamp(34px,3.5vw,50px)/1.12 Georgia,serif; letter-spacing:-.02em; text-indent:-.4em; }
.tool-copy > p:last-child { max-width:420px; margin-top:24px; color:var(--muted); font-size:16px; line-height:1.75; text-wrap:pretty; }
.tool-copy b { color:var(--text); font-weight:620; }
.find-art,.reuse-art { position:relative; container-type:inline-size; }
.find-art { aspect-ratio:680/600; }
.find-search { position:absolute; z-index:3; left:0; top:1%; width:56%; padding:11px; background:var(--card); border:1px solid var(--card-line); border-radius:16px; box-shadow:0 2px 4px #27385f08,0 24px 35px -14px #27385f30; rotate:-2deg; }
.find-tabs { display:flex; gap:4px; padding:3px; border-radius:8px; background:#f0f1f4; font-size:12px; }
.find-tabs > * { width:50%; padding:5px; text-align:center; font-weight:520; color:#5f636b; }
.find-tabs b { color:#fff; background:#30343b; border-radius:6px; }
.find-field { display:flex; align-items:center; gap:12px; margin-top:10px; padding:11px 14px; border:1.5px solid var(--blue); border-radius:10px; font-size:max(15px,3.1cqi); line-height:1.3; }
.find-field svg { flex:none; width:max(16px,2.9cqi); fill:none; stroke:var(--muted); stroke-width:1.6; }
.find-typed { display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom; }
.find-field i { width:2px; height:1.15em; margin-left:-10px; background:var(--blue); }
.find-card { position:absolute; z-index:2; left:15%; top:25%; width:80%; background:#fff; border:1px solid #e5e8ed; box-shadow:0 3px 5px #1835630a,0 26px 40px -16px #29436838; rotate:1.5deg; }
.find-source { display:flex; justify-content:space-between; gap:12px; padding:12px 18px 0; color:#5d6066; font-size:12px; }
.find-source b { color:#46699f; font-weight:600; }
.find-shot { position:relative; }
.find-shot img { width:100%; }
.find-mark { position:absolute; left:23%; top:50.3%; width:11.6%; height:6.4%; border-radius:2px; background:#4f78c42e; border-bottom:2px solid #46699f; transform-origin:left; }
.find-pin { position:absolute; right:22px; bottom:-20px; display:flex; align-items:center; gap:8px; padding:9px 16px 9px 12px; border-radius:30px; background:var(--blue-ink); color:#fff; font-size:13px; font-weight:580; box-shadow:0 12px 22px -10px #2c4a8a80; rotate:-4deg; }
.find-pin svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.4; }
.find-target { position:absolute; z-index:4; left:1%; bottom:1%; width:43%; padding:14px 16px 16px; background:var(--card); border:1px solid var(--card-line); border-radius:14px; box-shadow:0 22px 34px -16px #27385f38; rotate:-3deg; }
.find-target p { display:flex; justify-content:space-between; align-items:baseline; color:var(--muted); font-size:12px; }
.find-target p b { color:var(--blue); font-size:max(24px,4.4cqi); line-height:1; font-weight:520; letter-spacing:-.06em; }
.find-meter { display:flex; gap:3px; height:30px; margin-top:10px; font-size:12px; }
.find-meter i { display:grid; place-items:center; border-radius:6px; font-style:normal; white-space:nowrap; transform-origin:left; }
.find-meter i:first-child { flex:3; background:var(--blue-ink); color:#fff; font-weight:580; }
.find-meter i:last-child { flex:5; border:1.5px dashed color-mix(in srgb,var(--muted) 55%,transparent); color:var(--muted); }
.reuse-art { aspect-ratio:700/660; --fx:-46cqi; --fy:-34.9cqi; --fs:.714; }
.saved-head { position:absolute; left:0; top:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; }
.saved-head b { font-size:max(15px,2.5cqi); font-weight:620; letter-spacing:-.025em; }
.saved-head span { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:max(12px,1.85cqi); }
.saved-head svg { width:max(13px,2cqi); fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.saved-card { position:absolute; width:30%; padding:max(8px,1.5cqi); background:var(--card); border:1px solid var(--card-line); border-radius:12px; box-shadow:var(--paper-shadow); }
.saved-cover { aspect-ratio:7/5; overflow:hidden; background:#fff; border:1px solid #ebeae6; border-radius:4px; box-shadow:0 1px 3px #14283d12; }
.saved-cover img { width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.saved-cover--page img { height:auto; padding:5% 3% 0; }
.saved-copy { padding:max(8px,1.4cqi) 2px 2px; line-height:1.35; }
.saved-subject { color:var(--blue-ink); font-size:max(11px,1.6cqi); font-weight:560; }
.saved-title { overflow:hidden; margin-top:2px; color:var(--text); font-size:max(13px,2.1cqi); font-weight:620; letter-spacing:-.015em; white-space:nowrap; text-overflow:ellipsis; }
.saved-facts { display:flex; flex-wrap:wrap; gap:4px; margin-top:max(6px,1cqi); }
.saved-facts > span { padding:2px 7px; border-radius:5px; background:color-mix(in srgb,var(--text) 6%,transparent); color:var(--muted); font-size:max(11px,1.6cqi); line-height:1.5; }
.saved-facts > .saved-changed { background:color-mix(in srgb,var(--blue) 14%,transparent); color:var(--blue-ink); font-weight:600; }
.saved-roll { display:inline-flex; flex-direction:column; height:1.5em; overflow:hidden; vertical-align:bottom; text-align:right; }
.saved-roll i { font-style:normal; line-height:1.5; translate:0 -100%; }
.saved-from { margin-top:max(6px,1cqi); padding-top:max(6px,1cqi); border-top:1px solid var(--line); color:var(--muted); font-size:max(11px,1.6cqi); }
.saved-card--1 { left:0; top:10%; rotate:-2deg; }
.saved-card--2 { left:34.5%; top:8%; rotate:1deg; }
.saved-card--3 { left:69%; top:11%; rotate:-1deg; }
.saved-card--new { transform-origin:0 0; z-index:3; left:46%; top:47%; width:42%; rotate:3deg; box-shadow:0 2px 4px #25395714,0 18px 30px -8px #2539572b,0 60px 60px -34px #25395752; }
.saved-card--new .saved-title { font-size:max(14px,2.4cqi); }
.reuse-note { right:calc(100% + 64px); top:42%; rotate:-8deg; }
.reuse-note .hand-arrow { left:calc(100% + 6px); top:2px; }
/* Handwritten notes and arrows: one ink, one size scale, one arrow family. */
.hand-note { position:absolute; z-index:5; margin:0; color:var(--ink); font:italic 400 22px/1.3 Georgia,serif; letter-spacing:0; white-space:nowrap; text-align:left; }
.hand-arrow { position:absolute; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.find-note { top:calc(100% + 84px); right:18px; rotate:-6deg; }
.find-note .hand-arrow { left:96px; bottom:calc(100% + 6px); }
.close-note { bottom:calc(100% + 64px); right:-30%; rotate:-2deg; }
.close-note .hand-arrow { left:-10px; top:calc(100% + 6px); }
.q-mark,.find-source b,.find-meter,.saved-facts,.subject-group h3 small,.sheet-total,.refine-modes b { font-variant-numeric:tabular-nums; }
.refine-paper figcaption,.small-note,.close__note,.tool-copy > p:last-child,.subjects__intro > p { text-wrap:pretty; }
/* Subjects: a calm directory on the page ground. */
.subjects { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:56px 88px; padding-block:120px 128px; border-top:1px solid var(--line); }
.subjects__intro { align-self:start; position:sticky; top:110px; }
.subjects h2 { margin-top:24px; font-size:clamp(36px,3.5vw,48px); }
.subjects__intro > p:not(.section-label) { max-width:360px; margin-top:20px; color:var(--muted); font-size:16px; line-height:1.7; }
.subjects__intro > .subject-count { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); color:var(--text); font-size:15px; }
.subject-count b { font-weight:640; font-variant-numeric:tabular-nums; }
.subjects__intro > .subjects__ext { display:flex; gap:10px; margin-top:10px; font-size:13px; line-height:1.6; }
.subjects__ext svg { flex:none; width:14px; height:14px; margin-top:4px; fill:none; stroke:var(--blue); stroke-width:1.5; }
.subject-groups { display:grid; grid-template-columns:1fr 1fr; gap:56px 48px; }
.subject-group { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0; }
.subject-group h3 { align-self:end; }
.subject-group h3 { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--text); font-size:16px; font-weight:620; letter-spacing:-.02em; line-height:1.3; }
.subject-group h3 small { flex:none; color:var(--muted); font-size:12px; font-weight:450; letter-spacing:0; }
.subject-group ul { list-style:none; margin:0; padding:0; }
.subject-group li { border-bottom:1px solid var(--line); }
.subject-group a,.subject-row { display:flex; align-items:center; gap:12px; min-height:48px; padding-block:8px; color:var(--text); font-size:15px; text-decoration:none; }
.subject-label { flex:1; min-width:0; transition:color .2s; }
.subject-group a > small,.subject-row > small { color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums; }
.subject-ext { flex:none; width:13px; height:13px; fill:none; stroke:var(--muted); stroke-width:1.5; transition:translate .2s,stroke .2s; }
.subject-group a:hover .subject-label { color:var(--blue-ink); }
.subject-group a:hover .subject-ext { stroke:var(--blue); translate:2px -2px; }
.subject-group a:focus-visible { outline-offset:2px; border-radius:4px; }
.subject-group[data-group='cambridge:checkpoint'] { grid-column:1/-1; }
.subject-group[data-group='cambridge:checkpoint'] ul { display:grid; grid-template-columns:1fr 1fr; column-gap:48px; }
.subjects__note { max-width:640px; margin-top:36px; }
/* A few things to know. */
.getting-started { display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:48px 88px; padding-block:120px 136px; border-top:1px solid var(--line); }
.start-copy { align-self:start; position:sticky; top:110px; }
.start-copy h2 { margin-top:24px; font-size:clamp(36px,3.5vw,48px); }
.start-copy > p:not(.section-label) { max-width:360px; margin-top:20px; color:var(--muted); font-size:16px; line-height:1.7; }
.start-copy > p.small-note { font-size:13px; }
.faq { border-top:1px solid var(--text); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { position:relative; display:block; padding:24px 64px 24px 0; cursor:pointer; list-style:none; font-size:18px; font-weight:540; letter-spacing:-.02em; line-height:1.4; transition:color .2s; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:''; position:absolute; right:2px; top:50%; width:34px; height:34px; margin-top:-17px; border:1px solid var(--line); border-radius:50%; background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat; transition:rotate .3s var(--ease),border-color .2s,background-color .2s; }
.faq summary:hover { color:var(--blue); }
.faq summary:hover::after { border-color:var(--blue); }
.faq summary:focus-visible { outline-offset:4px; border-radius:4px; }
.faq details[open] summary::after { rotate:45deg; background-color:var(--shade); }
.faq details p { max-width:62ch; padding:0 64px 28px 0; color:var(--muted); font-size:16px; line-height:1.75; }
.faq p strong { color:var(--text); font-weight:600; }
.faq a,.site-footer__inner > a:last-child:hover { color:var(--blue-ink); }
/* The ending: the finished paper and its answers, on the desk. */
.close { position:relative; overflow:hidden; border-top:1px solid var(--line); }
.close-inner { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px; min-height:620px; }
.close-copy { align-self:center; padding-block:120px; }
.close h2 { margin-top:26px; font-size:clamp(44px,4.7vw,68px); line-height:1.02; font-weight:600; letter-spacing:-.06em; }
.close h2 > span { color:var(--blue); }
.close-actions { display:flex; align-items:center; gap:24px; margin-top:40px; }
.close__note { color:var(--muted); font-size:13px; line-height:1.6; }
.close-desk { position:relative; }
.close-desk > div:not(.close-mascot) { position:absolute; background:#fff; border:1px solid #e7e8e9; box-shadow:var(--paper-shadow); }
.close-scheme { width:min(480px,86%); right:-8%; bottom:-40px; rotate:8deg; }
.close-paper { z-index:2; width:min(370px,66%); left:6%; bottom:-170px; rotate:-4deg; }
.close-mascot { position:absolute; z-index:3; width:124px; left:-26%; bottom:-9px; }
.site-footer { border-top:1px solid var(--line); }
.site-footer__inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px 40px; padding-block:36px 44px; font-size:13px; }
.site-footer__inner p { color:var(--muted); line-height:1.6; }
.site-footer__inner > a:last-child { color:var(--muted); text-decoration:none; }
.site-footer__inner > a:last-child:hover { color:var(--blue); }
@media(max-width:1100px) {
 .hand-note,.q-note,.q-kept p { font-size:20px; }
 .close-scheme { bottom:-80px; }
 .refine { gap:48px 56px; padding-block:136px 120px; }
 .sheet { padding-inline:58px 44px; }
 .tool-scene__inner { gap:48px 56px; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
 .reuse-paper .tool-scene__inner { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
 .subjects,.getting-started { gap:48px 56px; }
 .subject-groups { column-gap:36px; }
 .close-mascot { left:-34%; width:112px; bottom:-8px; }
}
@media(min-width:901px) and (max-width:1100px) { .saved-card:not(.saved-card--new) .saved-facts > span + span { display:none; } }
@media(max-width:900px) {
 .refine,.tool-scene__inner,.reuse-paper .tool-scene__inner,.subjects,.getting-started,.close-inner { grid-template-columns:1fr; }
 .refine { padding-block:112px 100px; }
 .refine-copy { max-width:620px; }
 .refine-modes { max-width:none; }
 .refine-paper { max-width:640px; }
 .tool-scene__inner { padding-block:84px; }
 .reuse-paper .tool-copy { order:0; }
 .tool-copy { max-width:560px; }
 .find-art,.reuse-art { width:100%; max-width:620px; }
 .subjects,.getting-started { padding-block:96px 104px; }
 .subjects__intro,.start-copy { position:static; max-width:560px; }
 .close-inner { min-height:0; }
 .close-copy { padding:104px 0 0; }
 .close-desk { height:430px; max-width:560px; }
 .close-paper { left:28%; }
 .close-scheme { right:-14%; }
 .close-mascot { left:2%; width:112px; bottom:-8px; }
}
@media(max-width:650px) {
 .hand-note,.q-note,.q-kept p { font-size:18px; }
 .close-note { right:-20%; }
 .close-note .hand-arrow { left:24px; }
 .q-topic { flex-wrap:wrap; row-gap:2px; }
 .q-topic > .q-note { margin-left:auto; }
 .q-text { gap:10px; }
 .q-circle { left:-6px; width:36px; }
 .find-note,.reuse-note { display:none; }
 .refine { gap:40px; padding-block:88px 80px; }
 .refine h2 { font-size:clamp(38px,11vw,50px); margin-top:20px; }
 .refine-lead { font-size:16px; margin-top:20px; }
 .refine-modes { margin-top:32px; }
 .refine-modes h3 { font-size:22px; }
 .refine-live .refine-modes { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }
 .refine-live .refine-modes li { grid-template-columns:1fr; padding:12px 10px 14px; border-bottom:0; text-align:center; }
 .refine-live .refine-modes li + li { border-left:1px solid var(--line); }
 .refine-live .refine-modes li::before { left:12px; right:12px; top:auto; bottom:-1px; width:auto; height:3px; transform:scaleX(0); }
 .refine-live .refine-modes li.is-active::before { transform:none; }
 .refine-live .refine-modes h3 { font-size:20px; }
 .refine-live .refine-modes button { text-align:center; }
 .refine-live .refine-modes b { font-size:13px; font-weight:500; }
 .refine-live .refine-modes p { display:none; }
 .refine-live .refine-now { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; min-height:4.8em; margin-top:14px; color:var(--muted); font-size:14px; line-height:1.6; }
 .sheet::before { inset:20px 2px -8px 10px; rotate:1deg; }
 .sheet { padding:22px 18px 20px 36px; font-size:14px; }
 .sheet-key { gap:6px 14px; margin-bottom:16px; }
 .q-lead { gap:16px; }
 .q-body > div { margin-left:-28px; padding-left:28px; }
 .q-body > div::before { left:6px; width:3px; }
 .q-topic,.q-lines { margin-left:30px; }
 .q-kept p { padding-left:30px; }
 .q-lines { margin-right:30px; }

 .q-mark { font-size:13px; }
 .total-roll { font-size:30px; }
 .tool-scene__inner { padding-block:72px; gap:40px; }
 .tool-copy h2 { font-size:clamp(34px,9.6vw,44px); margin-top:20px; }
 .tool-copy h2.quote-title { font-size:clamp(30px,8.6vw,40px); text-indent:-.35em; }
 .tool-copy > p:last-child { font-size:15px; margin-top:18px; }
 .find-art { aspect-ratio:335/400; }
 .find-search { width:78%; padding:8px; border-radius:13px; }
 .find-tabs { font-size:11px; }
 .find-field { padding:8px 10px; gap:8px; margin-top:8px; }
 .find-card { left:4%; top:28%; width:94%; }
 .find-source { padding:9px 12px 0; font-size:11px; }
 .find-pin { right:12px; bottom:-16px; font-size:12px; padding:7px 12px 7px 9px; }
 .find-target { width:62%; left:0; bottom:0; padding:10px 12px 12px; }
 .find-target p { font-size:11px; }
 .find-meter { height:26px; font-size:11px; }
 .reuse-art { aspect-ratio:335/500; --fx:-14cqi; --fy:-47.8cqi; --fs:.64; }
 .saved-card { width:46%; border-radius:10px; }
 .saved-card:not(.saved-card--new) :is(.saved-subject,.saved-facts) { display:none; }
 .saved-card:not(.saved-card--new) .saved-title { font-size:12px; }
 .saved-card--1 { top:8%; }
 .saved-card--2 { left:54%; top:7%; }
 .saved-card--3 { display:none; }
 .saved-card--new { left:14%; top:40%; width:72%; }
 .saved-card--new .saved-title { white-space:normal; font-size:15px; }
 .subjects,.getting-started { gap:36px; padding-block:80px 88px; }
 .subjects h2,.start-copy h2 { font-size:clamp(32px,9vw,40px); margin-top:20px; }
 .subjects__intro > p:not(.section-label),.start-copy > p:not(.section-label) { font-size:15px; }
 .subject-groups { grid-template-columns:1fr; gap:40px; }
 .subject-group[data-group='cambridge:checkpoint'] ul { display:block; }
 .faq summary { font-size:16px; padding:20px 52px 20px 0; }
 .faq summary::after { width:30px; height:30px; margin-top:-15px; }
 .faq details p { font-size:15px; padding-right:8px; }
 .close-copy { padding-top:84px; }
 .close h2 { font-size:clamp(36px,10.4vw,48px); }
 .close-actions { flex-wrap:wrap; gap:16px 20px; margin-top:30px; }
 .close-desk { height:300px; margin-top:8px; }
 .close-paper { width:52%; left:10%; bottom:-160px; }
 .close-scheme { width:70%; right:-14%; bottom:-90px; }
 .close-mascot { width:88px; left:0; bottom:-6px; }
 .close-paper { left:30%; }
 .site-footer__inner { display:grid; justify-content:start; gap:16px; padding-block:30px 36px; }
}
@media(max-width:370px) {
 .close-mascot { width:76px; }
 .close-paper { left:34%; }
 .close-note { right:-36%; }
 .sheet { padding:20px 14px 18px 30px; }
 .sheet-key { font-size:11px; }
 .q-body > div { margin-left:-24px; padding-left:24px; }
 .q-body > div::before { left:4px; }
 .q-topic,.q-lines { margin-left:26px; }
 .q-kept p { padding-left:26px; }
 .q-lines { margin-right:26px; }
 .q-topic { flex-wrap:wrap; }
 .refine-live .refine-modes li { padding-inline:6px; }
 .refine-live .refine-modes h3 { font-size:18px; }
 .find-target { width:70%; }
 .find-meter i:first-child { flex:4; }
 .close-actions .btn { gap:16px; padding-inline:20px; }
}
@media(prefers-color-scheme:dark) {
 :root { --ink:#8d9fbc; --shade:#252931; --folder:#2b3039; --blue-ink:var(--blue); --card:#262c35; --card-line:#3a4250; }
 .find-tabs { background:#1d2229; }
 .find-tabs > * { color:#a5afbd; }
 .find-tabs b { color:#fff; background:#556c90; }
 .sheet::before { border-color:#d9d7d1; }
 .find-card,.close-desk > div:not(.close-mascot) { border-color:#d9d7d1; }
 .find-meter i:first-child,.find-pin { color:#14203a; }
 .saved-cover { border-color:#d9d7d1; }
 .subjects .subject-icon { background:color-mix(in srgb,var(--subject-hue) 22%,var(--surface)); color:color-mix(in srgb,var(--subject-hue) 70%,white); }
 .faq details[open] summary::after { background-color:#262c35; }
}
@media(prefers-reduced-motion:no-preference) {
 .motion-ready :is(.refine-copy,.refine-paper,.tool-copy,.subjects__intro,.subject-group,.start-copy,.close-copy) { transition:opacity .8s var(--ease),translate .8s var(--ease); }
 .motion-ready :is(.refine-copy,.refine-paper,.tool-copy,.subjects__intro,.subject-group,.start-copy,.close-copy):not(.is-in) { opacity:0; translate:0 26px; }
 .motion-ready .refine-paper,.motion-ready .subject-group + .subject-group { transition-delay:.12s; }
 .motion-ready .find-art:not(.is-in) > *,.motion-ready .reuse-art:not(.is-in) > *,.motion-ready .close-desk:not(.is-in) > * { opacity:0; }
 .motion-ready .find-art.is-in .find-search { animation:paper-in .7s var(--ease) both; }
 .motion-ready .find-art.is-in .find-typed { animation:type-in .9s .45s steps(10,end) both; }
 .motion-ready .find-art.is-in .find-field i { animation:caret .5s 1.4s 3 steps(1) both; }
 .motion-ready .find-art.is-in .find-card { animation:lift-in .9s 1.25s var(--ease) both; }
 .motion-ready .find-art.is-in .find-mark { animation:mark-in .5s 2s var(--ease) both; }
 .motion-ready .find-art.is-in .find-pin { animation:stamp .5s 2.45s var(--ease) both; }
 .motion-ready .find-art.is-in .find-target { animation:paper-in .7s 2.6s var(--ease) both; }
 .motion-ready .find-art.is-in .find-meter i:first-child { animation:fill-in .7s 3.05s var(--ease) both; }
 .motion-ready .reuse-art.is-in .saved-head { animation:arrive .7s both; }
 .motion-ready .reuse-art.is-in .saved-card:not(.saved-card--new) { animation:file-in .8s .15s var(--ease) both; }
 .motion-ready .reuse-art.is-in .saved-card--2 { animation-delay:.27s; }
 .motion-ready .reuse-art.is-in .saved-card--3 { animation-delay:.39s; }
 .motion-ready .reuse-art.is-in .saved-card--new { animation:copy-out 1.4s .9s var(--ease) both; }
 .motion-ready .reuse-art.is-in .saved-roll i { animation:roll-up .6s 2.3s var(--ease) both; }
 .motion-ready .close-desk.is-in .close-scheme { animation:rise 1s .1s var(--ease) both; }
 .motion-ready .close-desk.is-in .close-paper { animation:rise 1s .3s var(--ease) both; }
 .motion-ready .close-desk.is-in .close-mascot { animation:paper-in .7s .8s var(--ease) both,mascot-hop .6s 1.5s ease-in-out; }
 .motion-ready .find-art.is-in .find-note { animation:arrive .8s 3.3s var(--ease) both; }
 .motion-ready .reuse-art.is-in .reuse-note { animation:arrive .8s 2.6s var(--ease) both; }
 .motion-ready .close-desk.is-in .close-note { animation:arrive .8s 1.7s var(--ease) both; }
 .motion-ready .close-desk.is-in .exam-mascot__arm--right { animation:hello 1.3s 1.6s ease-in-out; }
 .faq details[open] p { animation:faq-open .35s var(--ease); }
}
@keyframes type-in { from { max-width:0; } to { max-width:4.9em; } }
@keyframes caret { 50% { opacity:0; } }
@keyframes lift-in { from { opacity:0; translate:0 40px; rotate:-2deg; } }
@keyframes mark-in { from { transform:scaleX(0); } }
@keyframes stamp { 0% { opacity:0; scale:1.5; } 60% { opacity:1; scale:.94; } 100% { scale:1; } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 .saved-cover img { transition:object-position 2.6s cubic-bezier(.45,0,.55,1) .2s; }
 .saved-card:hover .saved-cover img { object-position:50% 100%; }
}
@keyframes file-in { from { opacity:0; translate:0 40px; } }
@keyframes copy-out { 0% { opacity:0; translate:var(--fx) var(--fy); scale:var(--fs); rotate:-2deg; } 22% { opacity:1; translate:var(--fx) var(--fy); scale:var(--fs); rotate:-2deg; } }
@keyframes roll-up { from { translate:0 0; } }
@keyframes rise { from { opacity:0; translate:0 90px; } }
@keyframes faq-open { from { opacity:0; translate:0 -6px; } }