@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+20A0-20AB,U+20AD-20C0}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-baskerville-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/libre-baskerville-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C0}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/libre-baskerville-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/libre-baskerville-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20B8,U+20BA-20C0}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/rupee-serif-400.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Libre Baskerville';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/rupee-serif-700.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Noto Serif Tamil';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/noto-serif-tamil-tamil-500-normal.woff2) format('woff2');unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}
@font-face{font-family:'Noto Serif Tamil';font-style:normal;font-weight:700;font-display:swap;size-adjust:88%;src:url(/assets/fonts/noto-serif-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:400;font-display:swap;size-adjust:90%;src:url(/assets/fonts/noto-sans-tamil-tamil-400-normal.woff2) format('woff2');unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:600;font-display:swap;size-adjust:90%;src:url(/assets/fonts/noto-sans-tamil-tamil-600-normal.woff2) format('woff2');unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Tamil';font-style:normal;font-weight:700;font-display:swap;size-adjust:90%;src:url(/assets/fonts/noto-sans-tamil-tamil-700-normal.woff2) format('woff2');unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+25CC}

/* Boovaraghavan & Co. — generated from tokens.json */
:root, [data-theme="light"] {
  --navy: #1B2A41;
  --navy-deep: #111D2E;
  --navy-hover: #2C4261;
  --gold: #B08D57;
  --gold-ink: #6B5226;
  --gold-light: #DFC38B;
  --gold-wash: #FBF7EE;
  --ivory: #F8F6F1;
  --sand: #EFEADF;
  --white: #FFFFFF;
  --line: #E2DCCF;
  --field: #948E84;
  --text: #3F4752;
  --muted: #5E6573;
  --on-navy: #D8DFE7;
  --on-navy-muted: #9AA6B5;
  --success: #2E6B45;
  --warning: #8A5A00;
  --error: #A12622;
  --focus: #1B2A41;
  --focus-on-dark: #DFC38B;
  --shadow-card: 0 1px 2px rgba(27, 42, 65, 0.06), 0 8px 24px rgba(27, 42, 65, 0.06);
  --shadow-header: 0 1px 0 rgba(27, 42, 65, 0.08);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container: 1200px;
  --reading: 720px;
  --columns: 12;
  --header-height: 80px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --font-serif: "Libre Baskerville", "Noto Serif Tamil", Georgia, serif;
  --font-sans: "Source Sans 3", "Noto Sans Tamil", system-ui, sans-serif;
  --font-play: "Baloo 2", "Noto Sans Tamil", system-ui, sans-serif;
}

/* Learning engine styles. Joined after fonts.css and tokens.css at build time (scripts/learn/build.py).
   Uses only the design-system tokens. Breakpoints: phone up to 767px, tablet 768–1023px, desktop 1024px and up. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip;margin:0;background:var(--ivory);color:var(--text);font:400 17px/1.55 var(--font-sans);min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto}
a{color:var(--navy)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:15px;line-height:1.5}.muted{color:var(--muted)}
.eyebrow{margin:0 0 var(--space-2);font:700 13px/1.3 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
h1,h2,h3{font-family:var(--font-serif);color:var(--navy);margin:0;text-wrap:balance}
:lang(ta) h1,:lang(ta) h2,:lang(ta) h3{line-height:1.45}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--radius-pill);border:2px solid transparent;font:700 16px/1.2 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .12s,background .15s,box-shadow .15s}
.btn svg{width:18px;height:18px}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--gold);color:var(--navy);box-shadow:0 4px 0 var(--gold-ink)}
.btn-primary:active{box-shadow:0 2px 0 var(--gold-ink)}
.btn-primary:disabled{background:var(--sand);color:var(--field);box-shadow:0 4px 0 var(--line);cursor:not-allowed}
.btn-secondary{background:var(--white);border-color:var(--navy);color:var(--navy)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:var(--white)}
.btn-quiet{background:transparent;color:var(--navy);text-decoration:underline;text-underline-offset:3px;padding-inline:8px}
.btn-sm{min-height:40px;padding:8px 16px;font-size:15px}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.actions.center{justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:var(--radius-pill);border:1.5px solid var(--line);background:var(--white);color:var(--navy);font:600 15px/1.2 var(--font-sans);cursor:pointer}
.chip.on{background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip.seen:not(.on){border-color:var(--gold)}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.iconbtn svg{width:24px;height:24px}
.iconbtn:hover{background:var(--sand)}

/* firm header */
.lhead{background:var(--navy);color:var(--white)}
.lhead-in{max-width:var(--container);margin:0 auto;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--space-4)}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;min-width:0}
.brand img{width:40px;height:40px;flex:none}
.brand span{display:flex;flex-direction:column;min-width:0}
.brand .ta{font:600 14px/1.3 var(--font-sans);color:var(--on-navy)}
.brand b{font:700 16px/1.2 var(--font-sans);letter-spacing:.06em;color:var(--white);white-space:nowrap}
.brand small{font:700 10px/1.3 var(--font-sans);letter-spacing:.14em;color:var(--gold-light)}
.lhead nav{margin-left:auto;display:flex;gap:var(--space-4)}
.lhead nav a{color:var(--on-navy);text-decoration:none;font-weight:600;font-size:15px}
.lhead nav a:hover{color:var(--white)}

/* stats bar */
.lbar{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.lb-in{max-width:var(--container);margin:0 auto;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--space-3);flex-wrap:nowrap}
.lb-stat{display:inline-flex;align-items:center;gap:6px;font:800 17px/1 var(--font-play);color:var(--muted);white-space:nowrap}
.lb-stat svg{width:22px;height:22px}
.lb-stat.streak.on{color:#C2410C}
.lb-stat.xp{color:var(--gold-ink)}
.lb-stat small{font-weight:600;font-size:13px;color:var(--muted)}
.ring{width:26px;height:26px;transform:rotate(-90deg)}
.ring .rb{fill:none;stroke:var(--sand);stroke-width:4}
.ring .rf{fill:none;stroke:var(--success);stroke-width:4;stroke-linecap:round;transition:stroke-dasharray .6s}
.lb-sp{flex:1}
.lb-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:var(--radius-pill);border:1.5px solid var(--line);background:var(--white);color:var(--navy);font:600 15px/1 var(--font-sans);cursor:pointer;white-space:nowrap}
.lb-btn svg{width:20px;height:20px}
.lb-btn.icon{padding:6px 9px}
@media (max-width:520px){.lb-btn span{display:none}.lb-in{gap:8px}.lb-stat{font-size:16px;gap:4px}.lb-btn{padding:6px 10px}.lb-btn.icon{padding:6px 7px}}

/* page */
.lmain{flex:1}
.wrapl{max-width:var(--container);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.lhero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-6);align-items:center;padding:var(--space-7) var(--space-7) var(--space-6);background:var(--navy);color:var(--on-navy);margin-top:var(--space-4);border-radius:var(--radius-lg);background-image:radial-gradient(circle at 90% 10%,color-mix(in srgb,var(--gold) 38%,transparent),transparent 45%)}
.lh-in{min-width:0}
.lhero h1{color:var(--white);font-size:44px;line-height:1.2;margin-bottom:var(--space-3)}
.lhero .eyebrow{color:var(--gold-light)}
.lhero .lead{font-size:20px;line-height:1.5;margin:0;color:var(--on-navy);max-width:40ch}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;margin-bottom:var(--space-5);color:var(--on-navy-muted)}
.crumbs a{color:var(--on-navy);text-decoration:none}
.lh-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:var(--space-4);font-size:15px;color:var(--on-navy-muted)}
.lh-meta span+span::before{content:"·";margin-right:16px;color:var(--gold)}
.lh-progress{height:10px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:var(--space-4);max-width:460px;overflow:hidden}
.lh-progress i{display:block;height:100%;background:var(--gold);border-radius:99px;transition:width .6s}
.lh-art{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.lh-art .bablu{width:170px;animation:bob 3.2s ease-in-out infinite}
.lh-art .bubble{order:-1;position:relative;max-width:300px;background:var(--white);color:var(--navy);padding:14px 16px;border-radius:16px 16px 16px 4px;font:600 16px/1.45 var(--font-sans);box-shadow:var(--shadow-card)}
.lh-art .bubble::after{content:"";position:absolute;left:50%;bottom:-9px;width:18px;height:18px;background:var(--white);transform:translateX(-50%) rotate(45deg)}
@keyframes bob{50%{transform:translateY(-8px)}}

.lgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-7);padding-block:var(--space-7)}
.lside{display:flex;flex-direction:column;gap:var(--space-4);align-self:start;position:sticky;top:72px}
.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card)}
.panel p{margin:0 0 var(--space-3)}
.panel.review.due{border-color:var(--gold);background:var(--gold-wash)}
.panel .big{font:800 34px/1 var(--font-play);color:var(--navy);margin-right:4px}
.goals{display:flex;flex-direction:column;gap:8px;margin-bottom:var(--space-3)}
.goals .chip{justify-content:flex-start}
.stamp-slot{display:grid;place-items:center;height:140px;border:2px dashed var(--line);border-radius:var(--radius-md);margin-bottom:var(--space-3);color:var(--field)}
.stamp-slot svg{width:28px;height:28px}
.stamp-slot.got{border-style:solid;border-color:var(--gold-light);background:var(--gold-wash)}
.stamp-slot.got svg.stamp{width:120px;height:120px;transform:rotate(-8deg)}

/* chapter path */
.path{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-4);position:relative}
.path::before{content:"";position:absolute;left:35px;top:20px;bottom:20px;width:4px;background:repeating-linear-gradient(var(--line) 0 10px,transparent 10px 18px);border-radius:2px}
.node{display:flex;gap:var(--space-4);align-items:flex-start;position:relative}
.node button{flex:none;width:74px;height:74px;border-radius:50%;border:0;background:var(--white);box-shadow:0 6px 0 var(--line),inset 0 0 0 3px var(--line);cursor:pointer;display:grid;place-items:center;transition:transform .12s;position:relative;z-index:1}
.node button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line),inset 0 0 0 3px var(--line)}
.node .dot{font:800 26px/1 var(--font-play);color:var(--navy)}
.node .dot svg{width:30px;height:30px}
.node.done button{background:var(--gold);box-shadow:0 6px 0 var(--gold-ink)}
.node.done .dot{color:var(--navy)}
.node.current button{background:var(--navy);box-shadow:0 6px 0 var(--navy-deep);animation:pulse 2s infinite}
.node.current .dot{color:var(--white)}
.node.boss button,.node.exam button{border-radius:22px}
@keyframes pulse{0%{outline:0 solid rgba(var(--gold-rgb,176,141,87),.6)}70%{outline:12px solid rgba(var(--gold-rgb,176,141,87),0)}100%{outline:0 solid rgba(var(--gold-rgb,176,141,87),0)}}
.node:nth-child(4n+2){margin-left:36px}.node:nth-child(4n+3){margin-left:64px}.node:nth-child(4n){margin-left:36px}
.nl{display:flex;flex-direction:column;gap:2px;padding-top:6px;min-width:0}
.nl .nk{font:700 13px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.nl b{font:700 20px/1.35 var(--font-serif);color:var(--navy)}
.nl .ng{font-size:15px;color:var(--muted)}

/* player */
body.playing .lhead,body.playing .lfoot,body.playing .lbar,body.playing .about{display:none}
.player{max-width:760px;margin:0 auto;padding:var(--space-4) 0 160px}
.ptop{display:flex;align-items:center;gap:var(--space-3)}
.pbar{flex:1;height:16px;border-radius:99px;background:var(--sand);overflow:hidden}
.pbar i{display:block;height:100%;background:var(--success);border-radius:99px;transition:width .4s;box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.combo{min-width:0;font:800 15px/1 var(--font-play);color:#C2410C;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.combo svg{width:18px;height:18px}
.combo.hot{animation:pop .4s}
.pkick{margin:var(--space-3) 0 var(--space-5);font:700 13px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.retry-note{margin:-12px 0 var(--space-4);padding:10px 14px;border-radius:var(--radius-md);background:var(--gold-wash);color:var(--gold-ink);font-weight:600}
.stage-area{display:flex;flex-direction:column;gap:var(--space-4);animation:slidein .35s ease}
@keyframes slidein{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.q{font-size:26px;line-height:1.35}
.qsub{margin:0;color:var(--muted)}
.hint-line{margin:0;font-size:15px;color:var(--muted)}
.scene{border-radius:var(--radius-lg);overflow:hidden;background:var(--sand);aspect-ratio:16/7;max-width:100%}
.scene img{width:100%;height:100%;object-fit:cover;display:block}
.talks{display:flex;flex-direction:column;gap:var(--space-4)}
.tl{animation:rise .45s both;animation-delay:var(--d)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.talk{display:flex;gap:var(--space-3);align-items:flex-end}
.talk .av{flex:none;width:72px;height:72px;display:grid;place-items:end center}
.talk .av img{width:72px;height:72px;object-fit:contain}
.talk .av .bablu{height:86px;width:auto}
.talk .av.pop,.pop{animation:pop .45s}
@keyframes pop{30%{transform:scale(1.12) rotate(-4deg)}60%{transform:scale(.96)}}
.say{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:18px 18px 18px 4px;padding:12px 16px;box-shadow:var(--shadow-card);min-width:0}
.say .who{display:block;font:700 13px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:2px}
.say p{margin:0;font-size:19px;line-height:1.5;color:var(--navy)}
.note{margin:0;padding:12px 14px;border-left:4px solid var(--gold);background:var(--gold-wash);border-radius:0 var(--radius-md) var(--radius-md) 0}

.termcard{background:var(--white);border:2px solid var(--gold-light);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-card);position:relative}
.termcard h2{font-size:30px;margin-bottom:var(--space-3)}
.termcard .plain{font-size:19px;margin:0 0 var(--space-3);color:var(--navy)}
.termcard .ex{margin:0 0 var(--space-3);color:var(--text);font-style:italic}
.av-img.bablu.side{width:110px;align-self:flex-end;margin-top:-30px}
.std{border-top:1px solid var(--line);margin-top:var(--space-3);padding-top:var(--space-3)}
.std summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;color:var(--navy);list-style:none;min-height:40px}
.std summary::-webkit-details-marker{display:none}
.std summary svg{width:20px;height:20px;color:var(--gold-ink)}
.std summary::after{content:"+";margin-left:auto;font-size:22px;color:var(--gold-ink)}
.std[open] summary::after{content:"−"}
.std p{margin:var(--space-2) 0}

.opts{display:grid;gap:var(--space-3)}
.opts.two{grid-template-columns:1fr 1fr}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;min-height:60px;border-radius:var(--radius-lg);border:2px solid var(--line);background:var(--white);box-shadow:0 4px 0 var(--line);cursor:pointer;font-size:18px;line-height:1.4;color:var(--navy);transition:transform .1s}
.opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.opt .ok{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:2px solid var(--line);font:700 14px/1 var(--font-sans);color:var(--muted)}
.opt.sel{border-color:var(--navy);background:#EEF2F7;box-shadow:0 4px 0 var(--navy)}
.opt.right,.slip.right,.mt.right,.bl.right{border-color:var(--success)!important;background:#E7F3EC!important;box-shadow:0 4px 0 var(--success)}
.opt.wrongp,.slip.wrongp,.mt.wrongp,.bl.wrongp{border-color:var(--error)!important;background:#FBECEB!important;box-shadow:0 4px 0 var(--error);animation:shake .35s}
.bl.missed{border-color:var(--warning)!important;background:#FFF4DE!important}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.pool{display:flex;flex-wrap:wrap;gap:var(--space-2);min-height:52px;padding:var(--space-3);border-radius:var(--radius-lg);background:var(--sand)}
.pool-empty{display:grid;place-items:center;width:100%;color:var(--success)}.pool-empty svg{width:28px;height:28px}
.slip{overflow-wrap:anywhere;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;min-height:44px;border-radius:12px;border:2px solid var(--line);background:var(--white);box-shadow:0 3px 0 var(--line);font:600 16px/1.35 var(--font-sans);color:var(--navy);cursor:pointer;text-align:left;max-width:100%}
.slip em{font:800 14px/1 var(--font-play);font-style:normal;color:var(--gold-ink)}
.slip.held{border-color:var(--navy);background:var(--navy);color:var(--white);transform:translateY(-3px)}
.slip.in{box-shadow:none}
.slip.fly{animation:rise .4s both;animation-delay:var(--d)}
.bins{display:grid;gap:var(--space-3)}
.bins.b2{grid-template-columns:repeat(2,minmax(0,1fr))}.bins.b3{grid-template-columns:repeat(3,minmax(0,1fr))}.bins.b4{grid-template-columns:repeat(2,minmax(0,1fr))}.bins.b5,.bins.b6{grid-template-columns:repeat(3,minmax(0,1fr))}
.bin{min-height:110px;padding:var(--space-3);border-radius:var(--radius-lg);border:2px dashed var(--field);background:var(--white);display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
.bin-h{margin:0 0 4px;font:700 14px/1.3 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-ink)}
.lensbins .bin{cursor:default;border-style:solid;border-color:var(--line)}
.lens-tabs{display:flex;flex-wrap:wrap;gap:8px}
.lens-q{margin:0;font-weight:600;color:var(--navy)}

.bill{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:var(--space-4);font-family:var(--font-sans);background-image:repeating-linear-gradient(transparent 0 47px,#F2EEE5 47px 48px)}
.bill-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid var(--navy);padding-bottom:8px;margin-bottom:8px}
.bill-h b{color:var(--navy);font-size:17px}.bill-h span{color:var(--muted);font-size:14px}
.bl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:2px solid transparent;background:transparent;cursor:pointer;margin-bottom:4px;opacity:.55}
.bl.in{opacity:1;background:var(--gold-wash);border-color:var(--gold-light)}
.bl-t{font-weight:600;color:var(--navy)}
.bl-a{font:700 17px/1.2 var(--font-play);color:var(--navy);text-align:right}
.bl-s{grid-column:1/-1;font-size:13px;color:var(--muted)}
.sheet .bl{opacity:1;grid-template-columns:minmax(0,1fr) auto}
.sheet .bl.head{cursor:default;background:var(--sand);font-weight:700}
.sheet .bl.flag{border-color:var(--error);background:#FBECEB}
.bill-t{display:flex;justify-content:space-between;border-top:2px solid var(--navy);padding-top:10px;margin-top:6px;font-weight:700;color:var(--navy)}
.bill-t b{font:800 22px/1 var(--font-play)}

.numbox{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--navy)}
.nb{display:flex;align-items:center;gap:8px;max-width:340px;background:var(--white);border:2px solid var(--line);border-radius:var(--radius-md);padding:0 14px}
.nb:focus-within{border-color:var(--navy)}
.nb i{font-style:normal;font:700 22px/1 var(--font-play);color:var(--muted)}
.nb input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:800 26px/1 var(--font-play);color:var(--navy);padding:12px 0}
.tbox{overflow-x:auto}
.tbox table{border-collapse:collapse;width:100%;max-width:520px;background:var(--white);border-radius:var(--radius-md);overflow:hidden}
.tbox th,.tbox td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left}
.tbox td{text-align:right;font:700 17px/1.2 var(--font-play);color:var(--navy);white-space:nowrap}

.slider{display:flex;flex-direction:column;gap:8px;font-weight:600;color:var(--navy)}
.slider input{width:100%;accent-color:var(--gold);height:32px}
.sl-rows{display:flex;flex-direction:column;gap:10px}
.sl-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:6px 12px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:10px 12px}
.sl-row span small{display:block;color:var(--muted);font-weight:400;font-size:13px}
.sl-bar{height:12px;background:var(--sand);border-radius:99px;overflow:hidden}.sl-bar i{display:block;height:100%;background:var(--navy);transition:width .2s}
.sl-row b{font:700 17px/1 var(--font-play);color:var(--navy);text-align:right}
.sl-row em{grid-column:1/-1;font-style:normal;font-size:14px;color:var(--gold-ink);font-weight:700}
.sl-tot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-top:10px;padding:12px;border-radius:var(--radius-md);background:var(--navy);color:var(--white)}
.sl-tot b{font:800 22px/1 var(--font-play)}.sl-tot em{font-style:normal;color:var(--gold-light);font-weight:700}

.match{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.mcol{display:flex;flex-direction:column;gap:var(--space-2)}
.mt{overflow-wrap:anywhere;min-height:56px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);background:var(--white);box-shadow:0 3px 0 var(--line);font:600 16px/1.35 var(--font-sans);color:var(--navy);cursor:pointer;text-align:left}
.mt.sel{border-color:var(--navy);background:#EEF2F7}
.mt.right{opacity:.6}
.ordered{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:28px;min-height:40px}

.costcard{background:var(--white);border:2px solid var(--navy);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.cc-h{display:flex;align-items:center;gap:10px;background:var(--navy);color:var(--white);padding:12px 16px}.cc-h svg{width:22px;height:22px;color:var(--gold-light)}
.cc-l{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.cc-l b{font:700 17px/1.2 var(--font-play);color:var(--navy)}
.cc-l b i{color:var(--field)}
.cc-l.sum{background:var(--gold-wash);font-weight:700;color:var(--navy)}
.cc-l.new{animation:glow 1.6s}
@keyframes glow{0%{background:var(--gold-light)}100%{background:transparent}}

/* check bar */
.checkbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);border-top:2px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.cb-in{max-width:760px;margin:0 auto;padding:14px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.cb-msg{flex:1 1 320px;min-width:0;max-height:38vh;overflow:auto}
.cb-msg b{display:block;font:800 22px/1.2 var(--font-play)}
.cb-msg p{margin:4px 0 0;font-size:16px}
.cb-btns{display:flex;gap:8px;margin-left:auto}
.cb-btns .btn{min-width:150px}
.checkbar.good{background:#E7F3EC;border-color:#BFDCC9}.checkbar.good .cb-msg b{color:var(--success)}
.checkbar.bad{background:#FBECEB;border-color:#EFC6C3}.checkbar.bad .cb-msg b{color:var(--error)}
.checkbar.info{background:var(--gold-wash);border-color:var(--gold-light)}

/* end screen */
.endcard{max-width:720px;margin:0 auto;padding:var(--space-7) 0 var(--space-8);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.endcard h1{font-size:32px;line-height:1.3}
.end-art img{width:190px}
.stamp-hit{animation:stamp .7s cubic-bezier(.2,1.6,.4,1) both}
.stamp-hit svg{transform:rotate(-10deg)}
@keyframes stamp{0%{transform:scale(2.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}
.end-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);width:100%}
.end-stats>div{background:var(--white);border:2px solid var(--line);border-radius:var(--radius-lg);padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.end-stats span svg{width:26px;height:26px;color:var(--gold-ink)}
.end-stats .fl span svg{color:#C2410C}
.end-stats .fl.grow span{animation:pop .6s .3s}
.end-stats b{font:800 24px/1 var(--font-play);color:var(--navy)}
.end-stats small{font-size:13px;color:var(--muted)}
.end-stats .ring{width:30px;height:30px}
.end-msg{margin:0;padding:10px 14px;border-radius:var(--radius-md);background:var(--gold-wash);color:var(--gold-ink);font-weight:700}
.end-tip{margin:0;font-size:18px;color:var(--navy);max-width:56ch}
.come-back{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-lg);border:1px dashed var(--gold);background:var(--white);max-width:560px}
.come-back p{margin:0 0 8px}
.sharebox{margin-top:var(--space-5);padding:var(--space-5);border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--line);width:100%;text-align:left}
.sharebox .actions{margin-top:var(--space-3)}
.pp-name{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600;color:var(--navy)}
.pp-name input{min-height:44px;border:2px solid var(--line);border-radius:var(--radius-md);padding:8px 12px;font:inherit;max-width:360px}

/* dialogs */
.lmodal{border:0;border-radius:var(--radius-lg);padding:var(--space-6) var(--space-5);width:min(860px,calc(100vw - 24px));max-height:calc(100vh - 24px);background:var(--ivory);color:var(--text);box-shadow:0 24px 60px rgba(17,29,46,.35)}
.lmodal::backdrop{background:rgba(17,29,46,.6)}
.mclose{position:absolute;top:10px;right:10px}
.pp-cover{background:var(--navy);color:var(--on-navy);border-radius:var(--radius-lg);padding:var(--space-6);margin-bottom:var(--space-5);background-image:radial-gradient(circle at 85% 20%,color-mix(in srgb,var(--gold) 40%,transparent),transparent 40%)}
.pp-cover h2{color:var(--white);font-size:34px;margin-bottom:6px}
.pp-cover .eyebrow{color:var(--gold-light)}
.pp-cover .pp-name{color:var(--white);margin-top:var(--space-4)}
.pp-page{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}
.pp-page h3{font-size:22px;margin-bottom:var(--space-4)}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--space-4)}
.pp-slot{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--muted);text-align:center;font-size:13px}
.pp-empty{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;border:2px dashed var(--line);font:700 15px/1 var(--font-sans);color:var(--field);background:var(--ivory)}
.pp-slot.got svg{transform:rotate(-8deg)}
.terms{display:flex;flex-wrap:wrap;gap:8px}
.terms .chip{cursor:default}
.ccm h2{font-size:28px;margin-bottom:8px}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* about block (static, for readers and search engines) */
.about{padding-block:var(--space-7);border-top:1px solid var(--line)}
.about h2{font-size:30px;margin-bottom:var(--space-4)}
.about .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.about ol{padding-left:22px;margin:0}.about li{margin-bottom:10px}
.about li b{color:var(--navy)}
.about .faq details{border-bottom:1px solid var(--line);padding:12px 0}
.about .faq summary{font-weight:700;color:var(--navy);cursor:pointer}
.about .src{margin-top:var(--space-5);padding:var(--space-4);border-radius:var(--radius-md);background:var(--white);border:1px solid var(--line);font-size:15px}

/* footer */
.lfoot{background:var(--navy-deep);color:var(--on-navy-muted);font-size:14px;line-height:1.6;margin-top:auto}
.lfoot-in{max-width:var(--container);margin:0 auto;padding:var(--space-6) max(16px,env(safe-area-inset-right,0px)) var(--space-6) max(16px,env(safe-area-inset-left,0px))}
.lfoot a{color:var(--on-navy)}
.lfoot p{margin:0 0 8px}

/* ---- Release 3b: seals, ledger, surprises, lightning round ---- */
.seal{display:block;filter:drop-shadow(0 6px 10px rgba(17,29,46,.25))}
.seal.mystery{filter:drop-shadow(0 4px 8px rgba(17,29,46,.2));opacity:.92}
.seal-node button{background:transparent!important;box-shadow:none!important;width:74px;height:74px}
.seal-node .dot{display:block}
.seal-node:not(.done) .seal{animation:wobble 3.5s ease-in-out infinite}
@keyframes wobble{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-8deg)}96%{transform:rotate(8deg)}}
.next-lesson{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--space-6);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);background:var(--navy);color:var(--white);text-decoration:none;font:700 18px/1.3 var(--font-serif)}
.next-lesson b{color:var(--gold-light);font-size:24px}
.lb-stat .lv{margin-left:4px;padding:2px 7px;border-radius:99px;background:var(--gold-wash);color:var(--gold-ink);font:700 12px/1.3 var(--font-sans)}
.panel .eyebrow svg{width:16px;height:16px;vertical-align:-3px}
.panel.today{border-color:var(--navy);border-width:2px}
.tq{font:700 17px/1.45 var(--font-serif);color:var(--navy)}
.qopts{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.qopts .chip{justify-content:flex-start;text-align:left;min-height:44px;height:auto;padding:8px 14px;line-height:1.35}
.chip.right{border-color:var(--success);background:#E7F3EC}.chip.wrongp{border-color:var(--error);background:#FBECEB}
.okc{color:var(--success)}.badc{color:var(--error)}
.panel.bolt{background:linear-gradient(135deg,var(--navy),var(--navy-hover));border:0;color:var(--on-navy)}
.panel.bolt .eyebrow{color:var(--gold-light)}
.panel.bolt.off{opacity:.75}
.bolt-row{display:flex;align-items:center;gap:14px}
.bolt-row b{color:var(--white);font:800 20px/1 var(--font-play)}
.pxp{display:inline-flex;align-items:center;gap:3px;font:800 15px/1 var(--font-play);color:var(--gold-ink)}
.pxp svg{width:16px;height:16px}
.cbc{display:inline-flex;align-items:center;gap:2px;margin-left:8px;font-size:16px;color:#C2410C}.cbc svg{width:16px;height:16px}
.xpfloat{position:fixed;z-index:60;transform:translate(-50%,0);font:800 20px/1 var(--font-play);color:var(--gold-ink);pointer-events:none;animation:floatup .9s ease-out forwards}
@keyframes floatup{to{transform:translate(-50%,-60px);opacity:0}}
.pbar.timer i{background:var(--gold);transition:width 1s linear}
.bin.ready{border-color:var(--navy);background:#F3F6FA}
.levelup{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-lg);background:var(--navy);color:var(--white);text-align:left;animation:pop .6s .2s both}
.levelup>span svg{width:34px;height:34px;color:var(--gold-light)}
.levelup b{font:800 20px/1.2 var(--font-play)}.levelup p{margin:2px 0 0;color:var(--gold-light);font-weight:600}
.secret-got{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--radius-lg);background:#F8EEF1;border:1px solid #E4C5CF;text-align:left;animation:rise .5s .3s both}
.secret-got .eyebrow{color:#7A2E44;margin:0}.secret-got p{margin:2px 0 0}
.envelope{width:100%;max-width:460px}
.env-btn{display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px;border-radius:var(--radius-lg);border:2px dashed var(--gold);background:var(--gold-wash);cursor:pointer;text-align:left;animation:nudge 2.4s ease-in-out infinite}
.env-btn>svg{width:44px;height:44px;color:var(--gold-ink);flex:none}
.env-btn b{display:block;color:var(--navy);font:700 17px/1.3 var(--font-sans)}.env-btn small{color:var(--gold-ink);font-weight:700}
@keyframes nudge{0%,80%,100%{transform:none}85%{transform:rotate(-2deg)}90%{transform:rotate(2deg)}95%{transform:rotate(-1deg)}}
.env-open{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;border-radius:var(--radius-lg);background:var(--white);border:2px solid var(--gold-light);animation:pop .5s}
.env-open b{color:var(--navy);font:800 20px/1.2 var(--font-play)}.env-open small{color:var(--muted);font-size:15px;line-height:1.5;max-width:44ch}
.env-big{display:inline-flex;align-items:center;gap:4px;font:800 34px/1 var(--font-play);color:var(--gold-ink)}.env-big svg{width:34px;height:34px}
.env-sticker{width:110px;height:auto;animation:pop .6s}
.pressing{margin:0 0 8px;font:700 14px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);animation:fadeout .4s 1.1s forwards}
@keyframes fadeout{to{opacity:0}}
.seal-drop{animation:press 1s cubic-bezier(.2,1.5,.4,1) both}
.seal-drop .seal{transform:rotate(-10deg)}
@keyframes press{0%{transform:translateY(-60px) scale(2.2);opacity:0}55%{transform:scale(.9);opacity:1}75%{transform:scale(1.04)}100%{transform:none}}
.end-stats.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:360px}
.ledger.lmodal{background:#F3EDE1}
.pp-cover{background:linear-gradient(150deg,color-mix(in srgb,var(--navy) 88%,#fff),var(--navy-deep))!important;border:2px solid var(--gold);box-shadow:inset 0 0 0 6px var(--navy-deep),inset 0 0 0 7px rgba(223,195,139,.5)}
.pp-cover h2{font-size:38px;letter-spacing:.01em}
.pp-stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--on-navy)}
.pp-stats b{color:var(--white)}.pp-stats svg{width:15px;height:15px;color:#E8833A;vertical-align:-2px}
.pp-page{background:#FFFDF8!important;background-image:repeating-linear-gradient(transparent 0 31px,#EFE7D6 31px 32px)!important}
.pp-page.dim{opacity:.7}
.pp-slot{gap:8px}
.pp-slot .riddle{font-style:italic;color:var(--muted);max-width:16ch}
.pp-slot.soon .seal{opacity:.45}
.stickers{display:flex;flex-wrap:wrap;gap:10px}
.stickers img{width:64px;height:auto;filter:brightness(0) opacity(.12)}
.stickers img.got{filter:none;animation:pop .4s}
.stack-v{display:flex;flex-direction:column-reverse;gap:8px}
.lot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 64px;gap:10px;align-items:center;padding:10px 12px;border-radius:var(--radius-md);background:var(--white);border:1px solid var(--line)}
.lot-l small{display:block;color:var(--muted);font-size:13px}
.lot-bar{height:22px;border-radius:6px;background:repeating-linear-gradient(90deg,#CFE3E0 0 10px,#BFD9D5 10px 20px);overflow:hidden;position:relative}
.lot-bar .u{position:absolute;right:0;top:0;bottom:0;background:var(--gold);transition:width .5s}
.lot b{font:800 16px/1 var(--font-play);color:var(--error);text-align:right}
@media (max-width:767px){.lot{grid-template-columns:minmax(0,1fr) 56px}.lot-bar{grid-column:1/-1;grid-row:2}.lb-stat .lv{display:none}.pp-cover h2{font-size:30px}}


/* ==== Release 7: the casebook look (our own style, not a copy of any app) ==================================
   Working paper with a red margin rule, auditor's tick marks for progress, a reviewer's note for feedback,
   a ledger-style contents page, flat ink buttons, a Bablu calculator with a paper tape, a "closed" stamp. */
:root{--paper:#FFFDF8;--rule:#EFE7D6;--margin:#E7B9B2;--ink-ok:#2E6B45;--ink-q:#A33A2C;--tape:#FBF8F0}
.btn-primary{box-shadow:none;border-color:var(--gold-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--gold) 86%,#000)}
.btn-primary:active{box-shadow:none;transform:translateY(1px)}
.btn-primary:disabled{box-shadow:none;border-color:var(--line)}
.btn:active{transform:translateY(1px)}

/* stats bar */
.lb-stat .lb-l{font:600 12px/1.1 var(--font-sans);color:var(--muted);margin-left:2px}
.lb-stat.streak.on{color:var(--ink-ok)}
.lb-stat b{font-family:var(--font-sans);font-weight:800}
.tally{display:inline-block;width:34px;height:8px;border-radius:2px;background:var(--sand);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.tally i{display:block;height:100%;background:var(--gold)}
.lb-stat.goal.met .tally i{background:var(--ink-ok)}
.lb-stat .lv{font-weight:700}

/* hero tally of chapters */
.lh-tally{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:var(--space-4)}
.lh-tally i{width:14px;height:14px;border-radius:3px;border:1.5px solid rgba(255,255,255,.35)}
.lh-tally i.on{background:var(--gold);border-color:var(--gold)}
.lh-tally i.half{background:linear-gradient(90deg,var(--gold) 50%,transparent 50%);border-color:var(--gold)}
.lh-tally span{margin-left:8px;font-size:14px;color:var(--on-navy-muted)}

/* contents: a ledger index instead of a path of circles */
.contents-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;border-bottom:2px solid var(--navy);padding-bottom:10px;margin-bottom:0}
.contents-h h2{font-size:26px}
.contents{list-style:none;margin:0;padding:0;background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md)}
.crow{border-bottom:1px solid var(--rule);position:relative}
.crow:last-child{border-bottom:0}
.crow button{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 14px;align-items:center;width:100%;padding:14px 16px 14px 10px;border:0;background:transparent;text-align:left;cursor:pointer;color:var(--text)}
.crow button:hover{background:#FBF5E8}
.folio{font:700 20px/1 var(--font-serif);color:var(--gold-ink);text-align:center;border-right:1.5px solid var(--margin);padding:6px 0;align-self:stretch;display:grid;place-items:center}
.ct{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct b{font:700 18px/1.35 var(--font-serif);color:var(--navy)}
.ct small{font-size:14px;line-height:1.45;color:var(--muted)}
.ctag{font:700 11px/1.3 var(--font-sans);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-q)}
.cs{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap;color:var(--muted);font-size:13px}
.cs.done{color:var(--ink-ok);flex-direction:row;align-items:center;gap:4px}
.cs.done svg{width:26px;height:26px}
.cs.done small{font:700 14px/1 var(--font-sans)}
.cs.prog b{font:700 12px/1.2 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink)}
.crow.current{background:#FBF2DF}
.crow.current::before{content:"";position:absolute;left:-6px;top:-4px;width:12px;height:30px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.crow.current .folio{color:var(--navy)}
.crow.done .ct b{color:var(--navy)}
.sealrow .folio{border-right:0}
.seal-mini .seal{width:46px;height:46px}
.mcta{display:none}

/* player */
.player{max-width:780px;padding-bottom:150px}
.ptop{position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:6px;background:var(--ivory);padding:8px 0;border-bottom:1px solid var(--line)}
.pt-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.pt-k{margin:0;font:600 13px/1.25 var(--font-sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-k span{font-weight:800;color:var(--gold-ink);letter-spacing:.04em}
.ticks{display:flex;gap:1px;font:700 16px/1 var(--font-serif);color:#B9B2A3;overflow:hidden}
.ticks i{font-style:normal;flex:0 0 auto;width:15px;text-align:center}
.ticks i.ok{color:var(--ink-ok)}
.ticks i.no{color:var(--ink-q)}
.ticks i.seen{color:var(--navy)}
.ticks i.cur{color:var(--gold-ink);transform:translateY(-1px)}
.ticks i.look{color:var(--navy);text-decoration:underline}
.pts{display:inline-flex;align-items:center;gap:3px;font:800 15px/1 var(--font-sans);color:var(--gold-ink);padding:0 4px}
.pts svg{width:18px;height:18px}
.ptop .iconbtn{width:40px;height:40px;color:var(--navy)}
.ptop .iconbtn svg{width:22px;height:22px}
.retry-note{margin:12px 0 0}
.paper{position:relative;margin-top:var(--space-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 18px);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(27,42,65,.06);background-image:linear-gradient(90deg,transparent 22px,var(--margin) 22px,var(--margin) 23.5px,transparent 23.5px),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);background-position:0 0,0 18px}
.folio-no{position:absolute;top:10px;right:14px;margin:0;font:600 12px/1 var(--font-sans);letter-spacing:.06em;color:var(--field)}
.stage-area{animation:sheetin .3s ease}
@keyframes sheetin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q{font-size:25px;line-height:1.4}
.say{border-radius:14px 14px 14px 4px;box-shadow:none}
.scene{border-radius:var(--radius-md)}
.termcard{border:1.5px solid var(--gold-light);box-shadow:none;background:#FFFCF3}

/* answer rows: a box to tick, not a chunky button */
.opt{border-radius:var(--radius-md);border:1.5px solid var(--line);box-shadow:none;min-height:56px;font-size:18px;background:var(--white)}
.opt:hover{border-color:var(--navy)}
.opt:active{transform:none;box-shadow:none}
.opt .ok{border-radius:4px;width:26px;height:26px;border:1.5px solid var(--field);font-size:12px;position:relative}
.opt.sel{background:#F2F5F9;border-color:var(--navy);box-shadow:inset 3px 0 0 var(--navy)}
.opt.sel .ok{background:var(--navy);border-color:var(--navy);color:var(--white)}
.opt.right,.slip.right,.mt.right,.bl.right{border-color:var(--ink-ok)!important;background:#EEF6F0!important;box-shadow:inset 4px 0 0 var(--ink-ok)!important}
.opt.wrongp,.slip.wrongp,.mt.wrongp,.bl.wrongp{border-color:var(--ink-q)!important;background:#FBEFEC!important;box-shadow:inset 4px 0 0 var(--ink-q)!important}
.opt.right .ok{background:var(--ink-ok);border-color:var(--ink-ok);color:transparent}
.opt.right .ok::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px}
.opt.wrongp .ok{background:var(--ink-q);border-color:var(--ink-q);color:transparent}
.opt.wrongp .ok::after{content:"✗";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:15px}
.slip,.mt{box-shadow:none;border-width:1.5px;border-radius:8px}
.slip.held{transform:translateY(-2px);box-shadow:0 6px 14px rgba(27,42,65,.18)}
.pool{background:#F3EEE3;border-radius:var(--radius-md)}
.bin{border-width:1.5px;border-radius:var(--radius-md);background:rgba(255,255,255,.7)}
.bill{box-shadow:none}

/* numbers: the answer box and the calculator */
.numrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.nb{border-width:1.5px;border-radius:var(--radius-md);background:var(--white)}
.nb input{font-family:var(--font-sans)}
.calc-chip{display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:8px 14px;border-radius:var(--radius-md);border:1.5px dashed var(--gold);background:var(--gold-wash);color:var(--gold-ink);font:700 15px/1 var(--font-sans);cursor:pointer}
.calc-chip svg{width:22px;height:22px}
.fig{border:0;background:transparent;font:700 17px/1.2 var(--font-sans);color:var(--navy);cursor:pointer;padding:2px 6px;border-radius:4px;border-bottom:1.5px dotted var(--gold)}
.fig:hover{background:var(--gold-wash)}
.tbox table{background:var(--white);border:1px solid var(--line)}
.tbox td{font-family:var(--font-sans)}

/* reviewer's note (feedback) */
.rnote{margin-top:var(--space-5);border-top:1.5px dashed var(--line);padding-top:var(--space-4);animation:sheetin .3s ease}
.nt-h{display:flex;align-items:center;gap:12px}
.nt-h .mark{width:48px;height:48px;flex:none}
.mark path{stroke-dasharray:120;stroke-dashoffset:120;animation:draw .55s .05s ease-out forwards}
.mark.q path+path{animation-delay:.35s}
@keyframes draw{to{stroke-dashoffset:0}}
.rnote.good .mark{color:var(--ink-ok)}
.rnote.bad .mark{color:var(--ink-q)}
.nt-k{margin:0;font:700 11px/1.3 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nt-h b{display:block;font:700 22px/1.25 var(--font-serif)}
.rnote.good .nt-h b{color:var(--ink-ok)}
.rnote.bad .nt-h b{color:var(--ink-q)}
.nt-pts,.nt-run{display:inline-block;margin:4px 8px 0 0;padding:2px 8px;border:1.5px solid var(--gold);border-radius:4px;font:800 13px/1.4 var(--font-sans);color:var(--gold-ink);transform:rotate(-2deg)}
.nt-run{border-color:var(--ink-ok);color:var(--ink-ok)}
.nt-b{margin-top:10px;font-size:17px;line-height:1.6;color:var(--text);font-family:var(--font-sans)}
.nt-b b{color:var(--navy)}
.nt-f{margin:8px 0 0;font-size:14px;color:var(--muted);font-style:italic}
.rnote.info{border-top-style:solid;border-color:var(--gold-light)}

/* look back */
.snapview{opacity:.96}
.look-k{display:flex;align-items:center;gap:6px;margin:0 0 var(--space-4);font:700 12px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.look-k svg{width:16px;height:16px}
.frozen{pointer-events:none}

/* bottom bar: always calm, never a coloured banner */
.checkbar,.checkbar.good,.checkbar.bad,.checkbar.info{background:rgba(255,253,248,.97);border-top:1px solid var(--line);backdrop-filter:blur(6px)}
.cb-in{max-width:780px;gap:8px;flex-wrap:nowrap}
.cb-sp{flex:1}
.cb-back{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--navy)}
.cb-back svg{width:18px;height:18px}
.cb-in .btn-primary{min-width:170px}

/* calculator */
.calc{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:92px;z-index:45;width:320px;max-width:calc(100vw - 32px);background:color-mix(in srgb,var(--navy) 88%,#fff);color:var(--white);border-radius:18px;padding:12px;box-shadow:0 20px 50px rgba(17,29,46,.35);display:flex;flex-direction:column;gap:8px;animation:calcin .25s ease}
@keyframes calcin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.calc-h{display:flex;align-items:center;gap:8px}
.calc-h img{width:30px;height:auto}
.calc-h b{flex:1;font:700 15px/1.2 var(--font-sans);color:var(--gold-light)}
.calc-h .iconbtn{color:var(--on-navy);width:36px;height:36px}
.calc-h .iconbtn:hover{background:rgba(255,255,255,.08)}
.tape{background:var(--tape);color:var(--navy);border-radius:6px 6px 0 0;max-height:120px;min-height:56px;overflow:auto;padding:8px 10px;font:500 13px/1.5 ui-monospace,Menlo,Consolas,monospace;background-image:repeating-linear-gradient(transparent 0 19px,#EFE9DA 19px 20px);-webkit-mask-image:linear-gradient(transparent,#000 18px)}
.tl-row{display:flex;justify-content:space-between;gap:10px}
.tl-row span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-row b{font-weight:700}
.tape-empty{margin:0;color:var(--muted);font:400 12px/1.4 var(--font-sans)}
.cdisp{background:#D8E4C9;color:#1F2B18;border-radius:6px;padding:6px 10px;text-align:right;box-shadow:inset 0 2px 4px rgba(0,0,0,.25)}
.cdisp small{display:block;min-height:16px;font:500 13px/1.2 ui-monospace,Menlo,Consolas,monospace;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdisp output{display:block;font:700 28px/1.2 ui-monospace,Menlo,Consolas,monospace;overflow:hidden;text-overflow:ellipsis}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.k{min-height:46px;border:0;border-radius:10px;background:#34486A;color:var(--white);font:700 19px/1 var(--font-sans);cursor:pointer;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.k:hover{background:#3E557C}.k:active{transform:translateY(1px);box-shadow:none}
.k.op{background:#4A5F84;color:var(--gold-light)}
.k.fn{background:#5B3A3A;color:#FFD9D3}
.k.eq{background:var(--gold);color:var(--navy)}
.cuse{width:100%}

/* closing statement and stamp */
.closing{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:center;width:100%;text-align:left}
.stmt{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 14px);background-image:linear-gradient(90deg,transparent 18px,var(--margin) 18px,var(--margin) 19.5px,transparent 19.5px);overflow:hidden}
.stmt h1{font-size:30px;margin-bottom:4px}
.stmt-t{margin:0 0 var(--space-4);color:var(--muted);font-family:var(--font-serif)}
.stmt-l{margin:0;display:flex;flex-direction:column}
.stmt-l div{display:flex;align-items:baseline;gap:8px;padding:8px 0}
.stmt-l dt{color:var(--text);font-size:16px}
.stmt-l div::after{content:"";order:1;flex:1;border-bottom:1.5px dotted var(--field);transform:translateY(-4px)}
.stmt-l dd{order:2;margin:0;font:800 18px/1 var(--font-sans);color:var(--navy);white-space:nowrap}
.stmt-l dd small{font-weight:600;color:var(--gold-ink);font-size:12px}
.stmt-l .tot{border-top:1.5px solid var(--navy);border-bottom:4px double var(--navy);margin-top:4px}
.stmt-l .grow dd{color:var(--ink-ok)}
.stamp-closed{position:absolute;right:14px;top:16px;display:flex;flex-direction:column;align-items:center;padding:6px 12px;border:3px solid var(--ink-q);border-radius:8px;color:var(--ink-q);transform:rotate(-12deg);opacity:.85;animation:stampin .6s .4s cubic-bezier(.2,1.6,.4,1) both;mix-blend-mode:multiply}
.stamp-closed b{font:800 20px/1 var(--font-sans);letter-spacing:.18em}
.stamp-closed small{font:700 10px/1.3 var(--font-sans);letter-spacing:.08em}
@keyframes stampin{0%{transform:rotate(-12deg) scale(2.4);opacity:0}60%{transform:rotate(-12deg) scale(.92);opacity:.9}100%{transform:rotate(-12deg) scale(1);opacity:.85}}
.closing .end-art img{width:150px}

/* contents drawer while playing */
.drawer.lmodal{width:min(560px,calc(100vw - 24px))}
.drawer h2{font-size:28px;margin-bottom:var(--space-4)}
.in-drawer{border-top:1px solid var(--line);border-radius:var(--radius-md)}
.in-drawer .crow button{grid-template-columns:44px minmax(0,1fr) auto;padding:10px 12px 10px 6px}
.drawer-acts{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-4) 0 var(--space-3)}
.drawer-acts svg{width:18px;height:18px}

@media (max-width:767px){
  .lb-stat .lb-l{display:none}
  .mcta{display:block;position:sticky;bottom:0;z-index:15;padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--ivory) 30%)}
  .mcta .btn{width:100%}
  .lhero .actions .btn-primary{display:none}
  .crow button{grid-template-columns:40px minmax(0,1fr) auto;gap:2px 10px;padding:12px 12px 12px 6px}
  .folio{font-size:16px}
  .ct b{font-size:16.5px}
  .ct small{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .paper{padding:var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 14px);background-image:linear-gradient(90deg,transparent 16px,var(--margin) 16px,var(--margin) 17.5px,transparent 17.5px),repeating-linear-gradient(transparent 0 31px,var(--rule) 31px 32px);margin-inline:-4px}
  .folio-no{display:none}
  .pts{display:none}
  .ptop{gap:2px}
  .cb-in .btn-primary{min-width:0;flex:1 1 auto}
  .cb-back span{display:none}
  .calc{left:8px;right:8px;width:auto;max-width:none;bottom:76px;border-radius:16px}
  .tape{max-height:52px;min-height:40px}
  .k{min-height:40px;font-size:18px}
  .calc{gap:6px;padding:10px}
  .cdisp output{font-size:24px}
  .lgrid{padding-bottom:96px}
  .closing{grid-template-columns:minmax(0,1fr)}
  .closing .end-art{order:-1;justify-self:center}
  .closing .end-art img{width:110px}
  .stmt h1{font-size:26px;padding-right:80px}
  .stamp-closed{top:12px;right:8px;padding:4px 8px}.stamp-closed b{font-size:15px}
}
body.calc-on .player{padding-bottom:420px}

/* figures carried into each question */
.given{margin:0 0 18px;padding:12px 16px;border:1px solid var(--rule,#d9cfbd);border-left:4px solid var(--gold,var(--gold));border-radius:6px;background:var(--tape,#fbf7ee);font-size:15px;line-height:1.55}
.given-k{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:700 12px/1.4 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink,#7a5c2c)}
.given-k svg{width:16px;height:16px}
.given ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.given b{font-weight:700}
/* Release 7.1: thinker medallions on the chapter end and in the ledger */
.closing2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);align-items:center;width:100%;text-align:left;background:linear-gradient(150deg,color-mix(in srgb,var(--navy) 88%,#fff),var(--navy-deep));color:var(--on-navy);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:inset 0 0 0 1px rgba(223,195,139,.35)}
.closing2 .eyebrow{color:var(--gold-light)}
.closing2 h1{color:var(--white);font-size:32px;margin:4px 0 var(--space-4)}
.medal-wrap{position:relative;display:grid;place-items:center}
.medal-wrap::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(223,195,139,.35),transparent 65%);animation:mglow 3.2s ease-in-out infinite}
.medal{position:relative;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));max-width:100%;height:auto}
.medal-wrap.drop .medal{animation:mdrop .9s cubic-bezier(.2,1.4,.4,1) both}
.medal:not(.locked){animation:mspin 1.2s ease-out both}
.m-prog{transition:stroke-dasharray 1s ease}
@keyframes mdrop{0%{transform:translateY(-60px) scale(1.4);opacity:0}100%{transform:none;opacity:1}}
@keyframes mspin{0%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
@keyframes mglow{50%{opacity:.55}}
.who-card{background:rgba(255,255,255,.06);border:1px solid rgba(223,195,139,.35);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-4)}
.who-card h2{color:var(--white);font-size:26px;margin:2px 0 8px}
.who-card h2 small{display:block;font:600 14px/1.5 var(--font-sans);color:var(--gold-light);margin-top:4px}
.who-card p{margin:0 0 8px;color:#E6EBF1;font-size:16px;line-height:1.6}
.who-k{font:700 12px/1.4 var(--font-sans)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light)!important}
.clues{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.clues li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:15px;color:var(--white);animation:cluein .5s ease both}
@keyframes cluein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.clues span{color:var(--gold-light);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding-top:2px}
.th-look{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
.chips3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.chips3 li{background:rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.chips3 b{font:700 22px/1.2 var(--font-serif);color:var(--white)}
.chips3 span{font-size:12.5px;color:#C9D2DD}
.chips3 li.grow b{color:#F3D58C}
.pp-sub{color:#E6EBF1;max-width:60ch;margin:0 0 var(--space-4)}
.pp-slot .th-n{color:var(--navy);font:700 14px/1.3 var(--font-serif)}
.pp-slot .th-look{min-height:32px;font-size:13px;color:var(--gold-ink,#7a5c2c)}
.pp-slot .medal{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.pp-slot.got .medal{animation:none}
@media (max-width:720px){
  .closing2{grid-template-columns:1fr;justify-items:center;text-align:center;padding:var(--space-5) var(--space-4);gap:var(--space-4)}
  .closing2 .medal{width:170px}
  .closing2 h1{font-size:26px}
  .who-card{text-align:left;padding:var(--space-4)}
  .clues li{grid-template-columns:1fr;gap:2px}
  .chips3 b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.medal,.medal-wrap::before,.clues li,.medal-wrap.drop .medal{animation:none!important}}
/* tablet and phone */
@media (max-width:1023px){
  .lgrid{grid-template-columns:minmax(0,1fr)}
  .lside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lhero h1{font-size:36px}
}
@media (max-width:767px){
  .lhero{grid-template-columns:minmax(0,1fr);padding:var(--space-5) 20px;gap:var(--space-3)}
  .lh-art{display:none}
  .lhero h1{font-size:30px}
  .lhero .lead{font-size:18px}
  .lside{grid-template-columns:minmax(0,1fr)}
  .node:nth-child(n){margin-left:0}
  .node button{width:64px;height:64px}
  .path::before{left:30px}
  .nl b{font-size:18px}
  .q{font-size:22px}
  .say p{font-size:17px}
  .talk .av{width:56px;height:56px}.talk .av img{width:56px;height:56px}.talk .av .bablu{height:70px}
  .bins.b3,.bins.b5,.bins.b6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .match{gap:var(--space-2)}
  .mt{font-size:15px;padding:8px 10px}
  .end-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about .cols{grid-template-columns:minmax(0,1fr)}
  .cb-btns{width:100%}.cb-btns .btn{flex:1;min-width:0}
  .lhead nav{display:none}
  .termcard h2{font-size:26px}
  .player{padding-top:var(--space-3)}
}
@media (max-width:359px){.brand b{font-size:14px}.brand .ta{font-size:12px}.lb-stat small{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------------------------------------------------------------- Foundation 1: no zoom while tapping fast */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.calc,.calc *{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.k{min-height:50px}
.k:active{transform:translateY(1px);filter:brightness(1.15)}
@media (max-width:767px){input,select,textarea{font-size:16px!important}}
/* Back button at the top and the end of every lesson page */
.lback{display:inline-flex;align-items:center;gap:4px;flex:none;min-height:36px;padding:0 12px 0 6px;border-radius:999px;border:1px solid rgba(223,195,139,.45);color:var(--gold-light);font:600 14px/1 var(--font-sans);text-decoration:none}
.lback:hover{background:rgba(223,195,139,.12);color:var(--gold-light)}
.lhead-in .lback{order:-1}
.lend{background:transparent}
.lend-in{max-width:var(--container);margin:0 auto;padding:var(--space-5) max(16px,env(safe-area-inset-right,0px)) var(--space-6) max(16px,env(safe-area-inset-left,0px));display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid var(--line)}
.lback-lg{min-height:52px;border-radius:14px;padding:0 18px 0 10px;gap:8px;color:var(--gold-ink);border-color:var(--line);background:var(--white)}
.lback-lg:hover{background:var(--gold-wash);color:var(--gold-ink)}
.lback-lg span{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.lback-lg small{font:600 11px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lback-lg b{font:600 15px/1.2 var(--font-sans);color:var(--navy)}
.ltop{color:var(--muted);font-weight:600;text-decoration:none}
body.playing .lend{display:none}
@media (max-width:767px){.lhead-in{gap:10px}.lhead-in .lback span{display:none}.lhead-in .lback{padding:0 8px;min-width:36px;justify-content:center}}

/* ---------------------------------------------------------------- Foundation 2: the story before the lesson */
body.story-on{overflow:hidden}
.story-ov{position:fixed;inset:0;z-index:90;background:rgba(17,29,46,.82);display:grid;place-items:center;padding:16px;animation:stIn .3s ease}
.story-box{width:min(720px,100%);max-height:100%;overflow:auto;background:var(--ivory);border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45);padding:16px 18px 18px;display:flex;flex-direction:column;gap:12px}
.story-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.story-k{font:700 12px/1.3 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink)}
.story-skip{border:0;background:none;color:var(--muted);font:600 14px/1 var(--font-sans);cursor:pointer;padding:8px 4px;touch-action:manipulation}
.story-dots{display:flex;gap:6px}
.story-dots i{flex:1;height:4px;border-radius:2px;background:#E2DCCF;overflow:hidden;position:relative}
.story-dots i b{position:absolute;inset:0;width:0;background:var(--gold)}
.story-dots i.done b{width:100%}
.story-dots i.on b{animation:stBar 5.2s linear forwards}
.story-stage{border-radius:16px;overflow:hidden;border:2px solid var(--navy);aspect-ratio:36/22;background:#F6F1E6;cursor:pointer}
.story-stage svg{display:block;width:100%;height:100%}
.story-stage.in{animation:stScene .5s cubic-bezier(.2,.8,.3,1)}
.story-say{margin:0;min-height:3.2em;font:700 clamp(18px,4.4vw,23px)/1.4 var(--font-serif);color:var(--navy);text-wrap:balance}
.story-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.story-prev{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:var(--white);color:var(--navy);font-size:20px;cursor:pointer;touch-action:manipulation}
.story-next{min-height:50px;padding:0 26px;touch-action:manipulation}
@keyframes stIn{from{opacity:0}to{opacity:1}}
@keyframes stScene{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes stBar{from{width:0}to{width:100%}}
@media (max-width:600px){.story-ov{padding:10px;align-items:end}.story-box{border-radius:20px 20px 16px 16px;padding:14px}.story-next{flex:1}}
@media (prefers-reduced-motion:reduce){.story-dots i.on b{animation:none;width:100%}.story-stage.in,.story-ov{animation:none}}

/* medallion: reveal ceremony, shine, clues, the album */
.medal-wrap{position:relative}
.medal-wrap.reveal .medal{animation:mFlip 1.4s cubic-bezier(.2,.8,.25,1) both}
.m-rays{position:absolute;inset:-18%;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(223,195,139,.0) 0 8deg,rgba(223,195,139,.35) 8deg 12deg);animation:mRays 14s linear infinite,mRaysIn 1.2s ease both;pointer-events:none;-webkit-mask:radial-gradient(circle,#000 35%,transparent 70%);mask:radial-gradient(circle,#000 35%,transparent 70%)}
@keyframes mFlip{0%{transform:perspective(700px) rotateY(540deg) scale(.4);opacity:0;filter:brightness(2)}60%{opacity:1}100%{transform:perspective(700px) rotateY(0) scale(1);filter:none}}
@keyframes mRays{to{transform:rotate(360deg)}}
@keyframes mRaysIn{from{opacity:0;transform:scale(.4)}to{opacity:1}}
.who-card.reveal h2{animation:whoIn .8s 1s cubic-bezier(.2,.8,.3,1) both}
.who-card.reveal .who-title,.who-card.reveal .who-meta,.who-card.reveal p,.who-card.reveal .th-look{animation:whoIn .6s 1.4s ease both}
@keyframes whoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.who-title{margin:2px 0 0;font:italic 600 16px/1.35 var(--font-serif);color:var(--gold-light)}
.who-meta{margin:4px 0 8px;font:600 13px/1.3 var(--font-sans);letter-spacing:.06em;color:var(--on-navy-muted)}
.clues li.riddle{font-style:italic}
.next-clue{margin:8px 0 0;font:600 13px/1.3 var(--font-sans);color:var(--gold-light);opacity:.85}
.pp-set{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.pp-set h3{margin:2px 0 0}
.pp-count{font:700 13px/1 var(--font-sans);color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:7px 12px;white-space:nowrap}
.pp-count.full{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}
.pp-meter{height:10px;border-radius:5px;background:#E2DCCF;overflow:hidden;margin:12px 0 8px}
.pp-meter i{display:block;height:100%;background:linear-gradient(90deg,#B06E3C,#B9C2CD,#D4A63E);border-radius:5px}
.pp-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px;font-size:13px;color:var(--muted)}
.lg{width:12px;height:12px;border-radius:50%;display:inline-block}
.lg.gold{background:#D4A63E}.lg.silver{background:#B9C2CD}.lg.bronze{background:#B06E3C}
.pp-slot .th-t{font-style:italic;color:var(--gold-ink)}
.pp-slot.got.gold .medal{filter:drop-shadow(0 6px 14px rgba(212,166,62,.45))}
.medal.locked{filter:saturate(.8)}
.scene.live svg{width:100%;height:100%;display:block}
.scene.live{border:2px solid var(--navy);animation:stScene .5s cubic-bezier(.2,.8,.3,1)}
/* Bablu reacts: a little hop when he speaks */
.av-img.bablu{transition:transform .2s}
.pop .av-img.bablu{animation:bbHop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes bbHop{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.05,.96)}100%{transform:none}}
.pp-cover .pp-legend{color:var(--on-navy-muted)}

/* ---------------------------------------------------------------- Lessons, fewer words: word cards that turn over */
.wcard{perspective:1200px;cursor:pointer;outline:none;max-width:560px;margin:0 auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.wc-in{position:relative;display:grid;transition:transform .6s cubic-bezier(.2,.8,.25,1);transform-style:preserve-3d}
.wcard.on .wc-in{transform:rotateY(180deg)}
.wc-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;padding:28px 26px;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px}
.wc-front{background:linear-gradient(160deg,color-mix(in srgb,var(--navy) 88%,#fff),var(--navy));color:#fff;box-shadow:0 18px 40px rgba(17,29,46,.25)}
.wc-front h2{color:#fff;font-size:clamp(28px,6vw,38px);line-height:1.15;margin:0}
.wc-front .eyebrow{color:var(--gold-light);margin:0}
.wc-tap{margin-top:8px;font:600 14px/1 var(--font-sans);color:var(--gold-light);opacity:.9;animation:wcPulse 1.8s ease-in-out infinite}
.wc-back{transform:rotateY(180deg);background:#FFFCF3;border:2px solid var(--gold-light);color:var(--text)}
.wc-back h3{margin:0;font:700 15px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.wc-back .plain{font-size:clamp(18px,4.4vw,21px);line-height:1.45;color:var(--navy);margin:0;max-width:34ch}
.wc-ic{width:64px;height:64px;border-radius:18px;background:rgba(223,195,139,.16);color:var(--gold-light);display:grid;place-items:center}
.wc-ic svg{width:36px;height:36px}
.wc-ic.sm{width:44px;height:44px;border-radius:14px;background:var(--gold-wash);color:var(--gold-ink);border:1px solid #EADFC6}
.wc-ic.sm svg{width:24px;height:24px}
.wc-ex{margin-top:6px;background:var(--white);border:1px dashed #D8C9A4;border-radius:14px;padding:12px 14px;font-size:15.5px;line-height:1.5;text-align:left;max-width:38ch}
.wc-exk{display:block;font:700 11px/1 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.wcard + .std{max-width:560px;margin:14px auto 0}
@keyframes wcPulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.wc-in{transition:none}.wc-tap{animation:none}}

/* short feedback with "Why?" */
.why-more{display:inline}
.why-more summary{display:inline;cursor:pointer;color:var(--gold-ink);font-weight:700;list-style:none;margin-left:4px}
.why-more summary::-webkit-details-marker{display:none}
.why-more[open] summary{display:none}
.why-more span{display:inline}

/* picture steps */
.dg-title{margin-bottom:14px}
.dg{margin:4px 0 16px}
.dg-ic{width:44px;height:44px;flex:none;border-radius:13px;background:var(--gold-wash);border:1px solid #EADFC6;color:var(--gold-ink);display:grid;place-items:center}
.dg-ic svg{width:24px;height:24px}
.dg-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.dg-steps li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:16px;background:var(--white);border:1px solid var(--line);animation:rise .45s both;animation-delay:var(--d)}
.dg-steps b{font:700 16px/1.3 var(--font-sans);color:var(--navy)}
.dg-steps small{color:var(--muted);font-size:13.5px;line-height:1.4}
.dg-n{position:absolute;right:12px;top:10px;font:800 13px/1 var(--font-sans);color:#C9BBA0}
.dg-root{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto;width:max-content;max-width:100%;padding:12px 18px;border-radius:16px;background:var(--navy);color:#fff;animation:rise .4s both}
.dg-root .dg-ic{background:rgba(223,195,139,.18);border-color:transparent;color:var(--gold-light)}
.dg-root b{font:700 19px/1.2 var(--font-serif)}
.dg-branches{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;margin-top:30px}
.dg-branches::before{content:"";position:absolute;left:calc(100% / var(--n) / 2);right:calc(100% / var(--n) / 2);top:-16px;height:2px;background:var(--gold)}
.dg-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;border-radius:16px;background:var(--white);border:1px solid var(--line);animation:rise .45s both;animation-delay:var(--d)}
.dg-node::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:16px;background:var(--gold)}
.dg-tree::before{content:"";display:block;width:2px;height:14px;background:var(--gold);margin:0 auto -14px;position:relative;top:0}
.dg-node b{font:700 16px/1.25 var(--font-sans);color:var(--navy)}
.dg-node small{color:var(--muted);font-size:13px;line-height:1.4}
.dg-sum{display:grid;gap:8px;max-width:560px}
.dg-row{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px 14px;border-radius:14px;background:var(--white);border:1px solid var(--line);overflow:hidden;animation:rise .45s both;animation-delay:var(--d)}
.dg-l{font-weight:600;color:var(--navy)}
.dg-a{font:700 17px/1 var(--font-sans);color:var(--navy);font-variant-numeric:tabular-nums}
.dg-bar{position:absolute;left:0;bottom:0;height:4px;width:var(--w);background:var(--gold);transform-origin:left;animation:dgBar .8s both;animation-delay:calc(var(--d) + .25s)}
.dg-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--navy);color:#fff;animation:rise .45s both;animation-delay:var(--d)}
.dg-total span{font:700 15px/1.2 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light)}
.dg-total b{font:700 26px/1 var(--font-serif);font-variant-numeric:tabular-nums}
@keyframes dgBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:600px){
  .dg-branches{grid-template-columns:minmax(0,1fr);margin-top:16px;gap:8px}
  .dg-branches::before{display:none}
  .dg-node{flex-direction:row;text-align:left;align-items:center;padding:10px 12px}
  .dg-node::before{display:none}
  .dg-node > b{flex:none}
  .dg-steps{grid-template-columns:minmax(0,1fr)}
  .dg-steps li{flex-direction:row;align-items:center;padding:10px 12px}
  .dg-steps small{display:none}
}

/* ---------------------------------------------------------------- picture scenes from the story */
.dg .pl{display:block;font:700 16px/1.25 var(--font-sans);color:var(--navy)}
.dg .tm{display:block;font:600 11.5px/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-top:2px}
.dg-replay{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;border:0;background:none;color:var(--gold-ink);font:600 14px/1 var(--font-sans);cursor:pointer;padding:6px 2px;touch-action:manipulation}
.slipb{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:#FFFDF7;border:1.5px solid var(--navy);border-radius:6px 6px 2px 2px;padding:8px 10px 12px;box-shadow:0 3px 0 rgba(27,42,65,.08);font-size:14px}
.slipb::after{content:"";position:absolute;left:-1.5px;right:-1.5px;bottom:-7px;height:8px;background:linear-gradient(-45deg,transparent 4px,#FFFDF7 0) 0 0/8px 8px,linear-gradient(45deg,transparent 4px,#FFFDF7 0) 0 0/8px 8px;filter:drop-shadow(0 1.5px 0 var(--navy))}
.sp-n{color:var(--text);line-height:1.3}
.sp-a{color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
/* sorter */
.sorter{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:26px}
.shoebox{position:relative;width:170px;height:78px}
.sb-box{position:absolute;inset:22px 0 0;background:#C9A47A;border:2.5px solid var(--navy);border-radius:6px;display:grid;place-items:center;font:700 13px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}
.sb-lid{position:absolute;left:-6px;right:-6px;top:6px;height:20px;background:#B98E5E;border:2.5px solid var(--navy);border-radius:6px;transform-origin:15% 100%;animation:lidOpen .6s .2s cubic-bezier(.3,1.4,.5,1) both}
@keyframes lidOpen{to{transform:rotate(-24deg) translateY(-4px)}}
.trays{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;width:100%}
.tray{border-radius:16px;border:2px solid var(--line);background:var(--white);padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tr-0{border-color:#C9A86A;background:#FFF9EC}.tr-1{border-color:#8FD0C6;background:#F1FAF8}.tr-2{border-color:#B9AEEF;background:#F6F4FE}.tr-3{border-color:#F2B8A6;background:#FEF4F0}
.tr-h{display:flex;align-items:center;gap:8px}
.tr-ic{width:36px;height:36px;flex:none;border-radius:11px;background:var(--white);border:1px solid var(--line);color:var(--gold-ink);display:grid;place-items:center}
.tr-ic svg{width:20px;height:20px}
.tr-bills{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.slipb.fly{animation:fly .7s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:var(--d)}
@keyframes fly{0%{opacity:0;transform:translateY(-160px) rotate(-14deg) scale(.7)}60%{opacity:1}100%{opacity:1;transform:none}}
/* build */
.build{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center;position:relative}
.bd-shirt{width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(27,42,65,.15))}
.lyr{transform-box:fill-box;transform-origin:50% 100%;animation:fillUp .7s cubic-bezier(.3,.8,.4,1) both;animation-delay:var(--d)}
@keyframes fillUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bd-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bd-list li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--white);border:1px solid var(--line);animation:rise .45s both;animation-delay:var(--d)}
.bd-list li i{width:14px;height:14px;border-radius:4px;background:var(--c)}
.bd-list li > b{font-variant-numeric:tabular-nums;color:var(--navy)}
.bd-list .bd-tot{grid-template-columns:minmax(0,1fr) auto;background:var(--navy);border-color:var(--navy)}
.bd-list .bd-tot .pl{color:#fff}.bd-list .bd-tot .tm{color:var(--gold-light)}
.bd-list .bd-tot > b{color:#fff;font:700 22px/1 var(--font-serif)}
.bd-tag{grid-column:1/-1;justify-self:center;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 26px;background:var(--gold);color:#13202F;border-radius:12px 40px 40px 12px;position:relative;box-shadow:0 10px 20px rgba(var(--gold-rgb,176,141,87),.35);animation:tagPop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
.bd-tag::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#FFF8EC;border:2px solid #13202F}
.bd-tag span{font:600 14px/1 var(--font-sans);opacity:.8}
.bd-tag b{font:700 30px/1 var(--font-serif)}
.bd-tag small{font:700 13px/1.2 var(--font-sans);max-width:12ch}
@keyframes tagPop{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}
/* grow */
.gw-switch{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.gw-switch .chip{min-height:46px;padding:0 18px;font-size:15px}
.gw-switch .chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.gw-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gw-col{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;background:var(--white);border:1px solid var(--line);min-width:0}
.gw-h{display:flex;align-items:center;gap:8px}
.gw-stack{height:144px;overflow:hidden;display:flex;flex-direction:column-reverse;align-items:center;gap:3px;padding-top:6px;border-bottom:2px solid var(--line)}
.cash{display:block;box-sizing:border-box;width:74px;height:14px;border-radius:3px;background:linear-gradient(90deg,#7FB68A 0 18%,#A8D5B0 18% 82%,#7FB68A 82%);border:1.5px solid #2E6B45;animation:noteIn .35s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--k) * 40ms)}
.cash.fx{background:linear-gradient(90deg,#B9A27A 0 18%,#E3D2A6 18% 82%,#B9A27A 82%);border-color:var(--gold-ink)}
@keyframes noteIn{from{opacity:0;transform:translateY(-12px) scale(.8)}to{opacity:1;transform:none}}
.gw-tot b{display:block;font:700 18px/1.2 var(--font-serif);color:var(--navy);font-variant-numeric:tabular-nums}
.gw-tot small{display:block;font:600 13px/1.3 var(--font-sans);color:var(--gold-ink)}
.gw-note{margin:0;font-size:13.5px;line-height:1.4;color:var(--muted)}
/* stamps */
.stamps{display:flex;flex-direction:column;align-items:center;gap:18px;padding:6px 0 12px}
.big-bill{position:relative;width:min(100%,380px)}
.stamp-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.big-bill .slipb{font-size:17px;padding:16px 16px 20px}
.big-bill .slipb::before{content:"";position:absolute;left:16px;right:16px;top:48px;height:2px;background:repeating-linear-gradient(90deg,#9AA6B5 0 6px,transparent 6px 10px)}
.stamp{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:118px;height:118px;border-radius:50%;border:3px solid currentColor;text-align:center;padding:10px;transform:rotate(var(--r));animation:stampIn .45s cubic-bezier(.2,1.6,.4,1) both;animation-delay:var(--d);background:rgba(255,255,255,.75)}
.stamp::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed currentColor;opacity:.6}
.stamp small{font:700 9.5px/1.15 var(--font-sans);letter-spacing:.03em;opacity:.85}
.stamp b{font:800 15px/1.1 var(--font-sans);text-transform:uppercase;margin-top:4px}
.st-0{color:#B03A2E}.st-1{color:#1F6E8C}.st-2{color:#2E6B45}.st-3{color:#7B3FA0}.st-4{color:#9C6B12}
@keyframes stampIn{0%{opacity:0;transform:scale(2.2) rotate(var(--r))}70%{opacity:1;transform:scale(.92) rotate(var(--r))}100%{opacity:1;transform:scale(1) rotate(var(--r))}}
@media (max-width:600px){
  .trays{grid-template-columns:minmax(0,1fr)}
  .tray{flex-direction:column}
  .tr-bills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
  .build{grid-template-columns:minmax(0,1fr);gap:12px}
  .bd-shirt{width:150px;justify-self:center}
  .bd-list li{padding:8px 10px;gap:8px}
  .gw-cols{grid-template-columns:minmax(0,1fr)}
  .gw-col{display:grid;grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"h s" "t s" "n s";column-gap:12px;row-gap:4px}
  .gw-h{grid-area:h}.gw-stack{grid-area:s;height:108px;border-bottom:0;align-self:center}.gw-tot{grid-area:t}.gw-note{grid-area:n}
  .cash{width:70px;height:10px}
  .stamp{width:100px;height:100px}
  .stamp-row{gap:8px}
}
@media (prefers-reduced-motion:reduce){.slipb.fly,.lyr,.bd-list li,.bd-tag,.stamp,.sb-lid,.cash{animation:none!important}}

/* More picture scenes (November 2026): spread a big bill, share a pot, compare levels */
.spread{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0 8px}
.sp-grid{display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:6px;width:min(100%,420px)}
.sp-grid.many{gap:4px}
.sp-t{display:grid;place-items:center;aspect-ratio:1;border-radius:8px;background:var(--white);border:1.5px solid var(--line);font:700 13px/1 var(--font-sans);color:var(--muted);animation:noteIn .3s both;animation-delay:var(--d)}
.sp-grid.many .sp-t{border-radius:4px}
.sp-t.on{background:var(--gold);border-color:var(--gold-ink);color:#13202F;box-shadow:0 0 0 3px rgba(212,165,74,.28)}
.sp-key{display:flex;align-items:center;gap:8px;margin:0;font:600 14px/1.3 var(--font-sans);color:var(--muted)}
.sp-key .sp-t{width:16px;height:16px;animation:none}
.spread .bd-tag{animation:tagPop .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.share{display:flex;flex-direction:column;gap:12px;max-width:620px}
.sh-pot{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:var(--navy);color:#fff;animation:rise .45s both}
.sh-pot .pl{color:#fff}.sh-pot .tm{color:var(--gold-light)}
.sh-pot > b{font:700 24px/1 var(--font-serif);font-variant-numeric:tabular-nums}
.sh-pot .tr-ic{color:var(--gold-light)}
.sh-rows{display:grid;gap:8px}
.sh-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--white);border:1px solid var(--line);animation:rise .45s both;animation-delay:var(--d)}
.sh-row.hl{border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(212,165,74,.18)}
.sh-l{display:flex;align-items:center;gap:8px;min-width:0}
.sh-track{position:relative;height:16px;border-radius:999px;background:var(--sand,#F2EDE3);overflow:hidden}
.sh-track i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#2A9D8F,#3FB5A6);transform-origin:left;animation:dgBar .8s both;animation-delay:calc(var(--d) + .2s)}
.sh-row.hl .sh-track i{background:linear-gradient(90deg,#C9A86A,var(--gold))}
.sh-track em{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:700 11px/1 var(--font-sans);font-style:normal;color:var(--navy)}
.sh-v{font:700 16px/1 var(--font-sans);color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){
  .sh-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";row-gap:8px}
  .sh-l{grid-area:l}.sh-v{grid-area:v}.sh-track{grid-area:t}
  .sh-pot > b{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.sp-t,.spread .bd-tag,.sh-row,.sh-track i,.sh-pot{animation:none!important}}
.sh-pot .tr-ic{background:rgba(255,255,255,.12);border-color:transparent;color:var(--gold-light)}
@media (max-width:560px){
  .dg-steps li{display:grid;grid-template-columns:26px 30px minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:center}
  .dg-steps li .dg-n{grid-row:span 2}.dg-steps li .dg-ic{grid-row:span 2}
  .dg-steps li small{display:block;grid-column:3;font-size:13px;line-height:1.3}
}

/* ── Games (November 2026) ─────────────────────────────────────────────── */
/* swipe deck */
.swipe{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:4px}
.sw-meta{display:flex;justify-content:space-between;align-items:center;width:min(100%,380px);font:700 13px/1 var(--font-sans);color:var(--muted)}
.sw-streak{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:#FFF1D6;color:#9A5B00;animation:tagPop .4s both}
.sw-streak svg{width:14px;height:14px}
.sw-deck{position:relative;width:min(100%,340px);height:250px}
.sw-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px 20px;border-radius:24px;background:var(--white);border:2px solid var(--line);box-shadow:0 10px 24px rgba(27,42,65,.10);text-align:center;transform:translateY(14px) scale(.94);opacity:.7;transition:transform .32s cubic-bezier(.2,.9,.3,1.2),opacity .3s;touch-action:pan-y;user-select:none}
.sw-card:nth-last-child(2){transform:translateY(7px) scale(.97);opacity:.9}
.sw-card.top{transform:none;opacity:1;cursor:grab;border-color:#D9CFBC}
.sw-card.drag{transition:none;cursor:grabbing}
.sw-card b{font:700 21px/1.25 var(--font-sans);color:var(--navy);text-wrap:balance}
.sw-card small{font-size:14px;color:var(--muted)}
.sw-art{width:96px;height:96px}.sw-art svg{width:100%;height:100%}
.sw-hint{position:absolute;top:16px;padding:5px 10px;border-radius:8px;font:800 12px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;opacity:0;transition:opacity .15s;border:2.5px solid currentColor}
.sw-hint.l{left:14px;color:#3B6EA8;transform:rotate(-10deg)}.sw-hint.r{right:14px;color:#2A9D8F;transform:rotate(10deg)}
.sw-card.lean-l .sw-hint.l,.sw-card.lean-r .sw-hint.r{opacity:1}
.sw-card.out-l{transform:translateX(-140%) rotate(-24deg)!important;opacity:0}
.sw-card.out-r{transform:translateX(140%) rotate(24deg)!important;opacity:0}
.sw-card.good{border-color:#2A9D8F;background:#EAF7F3}.sw-card.bad{border-color:#D1495B;background:#FCEDEF}
.sw-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,380px)}
.sw-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:8px 12px;border-radius:16px;border:2px solid var(--line);background:var(--white);font:700 15px/1.2 var(--font-sans);color:var(--navy);box-shadow:0 4px 0 #D9CFBC;cursor:pointer;touch-action:manipulation;transition:transform .08s}
.sw-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #D9CFBC}
.sw-btn i{font-style:normal;font-size:18px;color:var(--gold-ink)}
.sw-l{border-color:#BFD3EA}.sw-r{border-color:#B9DED6}
.sw-flash{min-height:44px;margin:0;text-align:center;font:600 15px/1.4 var(--font-sans);max-width:380px}
.sw-flash.good{color:#1F7A6E}.sw-flash.bad{color:#B23A48}.sw-flash svg{width:16px;height:16px;vertical-align:-2px}
.sw-done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:24px;background:var(--gold-wash);border:2px dashed #EADFC6;animation:tagPop .4s both}
.sw-done svg{width:80px;height:80px}.sw-done b{font:700 34px/1 var(--font-serif);color:var(--navy)}
/* tiles */
.tlw{display:flex;flex-direction:column;gap:18px;max-width:600px}
.tl-art{width:84px;height:84px;align-self:center}.tl-art svg{width:100%;height:100%}
.tl-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:64px;padding:10px 4px;border-bottom:2px solid var(--line);border-top:2px solid var(--line)}
.tl-line.right{border-color:#2A9D8F;background:#EAF7F3}.tl-line.wrongp{border-color:#D1495B;background:#FCEDEF}
.tl-pre{font:700 16px/1.3 var(--font-sans);color:var(--navy)}
.tl-slots{display:flex;flex-wrap:wrap;gap:8px}
.tl-empty{font-size:14px;color:var(--muted)}
.tl-bank{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tl-tile{min-height:46px;padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--white);box-shadow:0 4px 0 #D9CFBC;font:600 16px/1.2 var(--font-sans);color:var(--navy);cursor:pointer;touch-action:manipulation}
.tlw.fresh .tl-tile{animation:noteIn .25s both}
.tl-tile:active{transform:translateY(3px);box-shadow:0 1px 0 #D9CFBC}
.tl-tile.in{background:#FFF8EC;border-color:#EADFC6}
.tl-ghost{min-height:46px;padding:8px 14px;border-radius:12px;background:#ECE6DA;color:transparent;font:600 16px/1.2 var(--font-sans);border:2px solid transparent}
/* hotspot scene */
.hs-scene{position:relative;width:100%;max-width:640px;aspect-ratio:360/220;border-radius:20px;overflow:hidden;border:2px solid var(--line);box-shadow:0 8px 20px rgba(27,42,65,.08)}
.hs-bg{position:absolute;inset:0;width:100%;height:100%}
.hs-obj{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border:2.5px solid transparent;border-radius:14px;background:none;cursor:pointer;touch-action:manipulation;animation:hsIn .45s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:var(--d)}
.hs-obj svg{width:100%;height:auto;aspect-ratio:1;filter:drop-shadow(0 4px 4px rgba(27,42,65,.15));transition:transform .15s}
.hs-obj:hover svg{transform:translateY(-3px)}
.hs-l{font:700 clamp(9.5px,2.6vw,12.5px)/1.15 var(--font-sans);color:var(--navy);background:rgba(255,255,255,.88);padding:2px 6px;border-radius:6px;text-align:center}
.hs-obj.on{border-color:var(--gold);background:rgba(233,196,106,.22)}
.hs-obj.right{border-color:#2A9D8F;background:rgba(42,157,143,.18)}
.hs-obj.wrongp{border-color:#D1495B;background:rgba(209,73,91,.15)}
.hs-obj.missed{border-color:#2A9D8F;border-style:dashed}
@keyframes hsIn{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}
/* speed round */
.sp{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:420px;margin:0 auto}
.sp-intro{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:24px 18px;border-radius:22px;background:linear-gradient(160deg,#FFF6E2,#FBEFD6);border:2px solid #EADFC6}
.sp-ic{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--gold);color:#13202F;animation:spPulse 1.4s infinite}
.sp-ic svg{width:30px;height:30px}
.sp-intro p{margin:0;font:600 15px/1.45 var(--font-sans);color:var(--navy)}
.sp-go{min-width:180px;min-height:52px;font-size:17px}
@keyframes spPulse{50%{transform:scale(1.08)}}
.sp-top{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;width:100%;font:700 13px/1 var(--font-sans);color:var(--muted)}
.sp-combo{font:800 16px/1 var(--font-sans);color:#C46A00}
.sp-combo.pop{animation:tagPop .35s both}
.sp-time{height:10px;border-radius:999px;background:#ECE6DA;overflow:hidden}
.sp-time i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2A9D8F,#3FB5A6);transition:width .1s linear}
.sp-time i.low{background:linear-gradient(90deg,#E76F51,#D1495B)}
.sp-stage{width:100%;min-height:200px;display:grid;place-items:center}
.sp-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;padding:22px 18px;border-radius:22px;background:var(--white);border:2px solid var(--line);box-shadow:0 8px 20px rgba(27,42,65,.08);text-align:center;animation:spIn .2s ease-out both}
.sp-card b{font:700 20px/1.3 var(--font-sans);color:var(--navy)}
.sp-art{width:84px;height:84px}.sp-art svg{width:100%;height:100%}
.sp-card.good{border-color:#2A9D8F;background:#EAF7F3}.sp-card.bad{border-color:#D1495B;background:#FCEDEF;animation:shake .35s}
@keyframes spIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sp-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.sp-btns button{min-height:62px;border-radius:18px;font:800 17px/1 var(--font-sans);cursor:pointer;touch-action:manipulation;border:0;transition:transform .06s}
.sp-btns button:active{transform:translateY(3px)}
.sp-no{background:#FCEDEF;color:#B23A48;box-shadow:0 5px 0 #E8B4BC}.sp-yes{background:#EAF7F3;color:#1F7A6E;box-shadow:0 5px 0 #A9D9CF}
.sp-btns span{font-size:15px}
.sp-end{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;border-radius:22px;background:var(--navy);color:#fff;width:100%;animation:tagPop .4s both}
.sp-end b{font:700 40px/1 var(--font-serif);color:var(--gold-light)}
.sp-end span{font:600 14px/1.3 var(--font-sans);color:var(--on-navy,#D8DFE7)}
/* estimate */
.es{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:520px;margin:0 auto;padding:18px;border-radius:22px;background:var(--white);border:2px solid var(--line)}
.es.right{border-color:#2A9D8F}.es.wrongp{border-color:#D1495B}
.es-art{width:88px;height:88px}.es-art svg{width:100%;height:100%}
.es-v{font:700 clamp(32px,8vw,44px)/1 var(--font-serif);color:var(--navy);font-variant-numeric:tabular-nums}
.es-track{position:relative;width:100%;padding:18px 0 8px}
.es-track input{width:100%;height:36px;accent-color:var(--gold);touch-action:manipulation}
.es-true{position:absolute;top:-14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;animation:tagPop .5s both}
.es-true b{padding:4px 8px;border-radius:8px;background:#2A9D8F;color:#fff;font:700 13px/1 var(--font-sans);white-space:nowrap}
.es-true::after{content:"";width:3px;height:30px;background:#2A9D8F}
.es-ends{display:flex;justify-content:space-between;width:100%;font-size:12.5px;color:var(--muted)}
.es-fine{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.es-fine .chip{min-width:46px;min-height:42px;font-size:20px}
/* fill the cost sheet */
.fl .fl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;border-top:1px dashed #E3DACB}
.fl-less{font-style:normal;color:var(--muted)}
.fl .fl-tot{border-top:2px solid var(--navy);font-weight:700}
.fl-slot{min-width:104px;min-height:40px;padding:6px 10px;border-radius:10px;border:2px dashed #C9B98F;background:#FFFDF6;font:700 15px/1 var(--font-sans);color:var(--muted);cursor:pointer;font-variant-numeric:tabular-nums}
.fl-slot.act{border-color:var(--gold);box-shadow:0 0 0 3px rgba(233,196,106,.35)}
.fl-slot.full{border-style:solid;color:var(--navy);background:var(--white)}
.fl-slot.right{border-color:#2A9D8F;background:#EAF7F3}.fl-slot.wrongp{border-color:#D1495B;background:#FCEDEF}
.fl-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}
.fl-chip{min-height:46px;padding:8px 14px;border-radius:12px;border:2px solid var(--line);background:var(--white);box-shadow:0 4px 0 #D9CFBC;font:700 16px/1 var(--font-sans);color:var(--navy);cursor:pointer;font-variant-numeric:tabular-nums}
.fl-chip:disabled{opacity:.3;box-shadow:none}
/* flow scene: a process with things moving through it */
.flow{display:flex;align-items:flex-start;justify-content:center;gap:0;flex-wrap:nowrap;overflow-x:auto;padding:8px 2px 4px}
.fw-st{display:flex;flex-direction:column;align-items:center;gap:6px;width:clamp(86px,22vw,130px);flex:none;text-align:center;animation:hsIn2 .5s both;animation-delay:var(--d)}
.fw-st svg{width:clamp(64px,17vw,96px);height:auto;filter:drop-shadow(0 6px 6px rgba(27,42,65,.12))}
.fw-st b{font:700 13.5px/1.2 var(--font-sans);color:var(--navy)}
.fw-st small{font-size:12px;line-height:1.3;color:var(--muted)}
.fw-st em{font-style:normal;font:700 13px/1 var(--font-sans);color:#1F7A6E;background:#EAF7F3;border-radius:999px;padding:4px 8px}
.fw-st.hl em{background:var(--gold);color:#13202F}
.fw-ar{position:relative;flex:none;width:clamp(18px,5vw,40px);height:4px;margin-top:clamp(32px,8.5vw,48px);background:repeating-linear-gradient(90deg,#C9B98F 0 6px,transparent 6px 10px)}
.fw-ar i{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #13202F;animation:fwDot 1.6s linear infinite;animation-delay:var(--d)}
@keyframes fwDot{from{left:-6px}to{left:calc(100% - 6px)}}
@keyframes hsIn2{from{opacity:0;transform:translateY(12px) scale(.8)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .sw-deck{height:230px}.sw-card b{font-size:19px}
  .flow{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.sw-card,.hs-obj,.sp-card,.tl-tile,.fw-st,.fw-ar i,.sp-ic{animation:none!important;transition:none!important}}
/* games: facts card, bigger scenes on phones, vertical flows */
.g-where{margin:0 0 6px;font:700 11.5px/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.g-facts{list-style:none;margin:10px 0 16px;padding:12px 14px;display:grid;gap:6px;border-radius:16px;background:#FFFDF6;border:1.5px dashed #D9C9A3;max-width:600px}
.g-facts li{position:relative;padding-left:18px;font:500 15px/1.4 var(--font-sans);color:var(--navy);animation:rise .35s both;animation-delay:var(--d)}
.g-facts li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.hs-obj{width:calc(var(--w) * var(--k, 1) * 1%)}
@media (max-width:560px){
  .hs-scene{aspect-ratio:4/5}
  .hs-obj{--k:1.6}
  .hs-l{font-size:11.5px}
  .flow{flex-direction:column;align-items:stretch;gap:0;overflow:visible}
  .fw-st{width:auto;flex-direction:row;align-items:center;gap:12px;text-align:left;padding:8px 12px;border-radius:14px;background:var(--white);border:1px solid var(--line)}
  .fw-st svg{width:56px;flex:none}
  .fw-st > b{flex:1}
  .fw-st small{display:none}
  .fw-ar{width:4px;height:22px;margin:0 0 0 38px;background:repeating-linear-gradient(180deg,#C9B98F 0 5px,transparent 5px 9px)}
  .fw-ar i{left:-4px;top:-6px;animation-name:fwDotV}
}
@keyframes fwDotV{from{top:-6px}to{top:calc(100% - 6px)}}

/* ===== November 2026: order, desk, hints, new activities, sign-in, start again ===== */
.crow.locked button,.crow.locked .crow-in{cursor:not-allowed;opacity:.55}
.crow.locked button:hover{background:transparent}
.crow-in{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 14px;align-items:center;padding:14px 16px 14px 10px}
.contents.peek .crow-in{opacity:.75}
.lock-why{margin:var(--space-4) 0 0;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.08);color:var(--on-navy,#DCE3EC);max-width:60ch;line-height:1.55}
.lock-why b{color:var(--gold-light)}
.welcome-seal{display:flex;gap:16px;align-items:center;max-width:var(--container);margin:var(--space-5) auto 0;padding:14px 18px;border-radius:18px;background:var(--white);border:1px solid var(--line);box-shadow:0 10px 26px rgba(27,42,65,.08);animation:wsIn .6s ease-out both}
.welcome-seal svg{flex:none}
.welcome-seal p{margin:4px 0 0}
@keyframes wsIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.reset-btn{align-self:flex-start;margin-top:var(--space-2)}
.syncp{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.syncp.on{border-color:#9FC9AE;background:#F1F8F3}
.lb-btn.sync{font-weight:700}
.lb-btn.sync.on{color:#2F855A}
.lb-stat.seals b{font-family:var(--font-play,inherit)}
.pp-reset{text-align:center;margin:var(--space-5) 0 0}
/* the desk: everything the question needs, on the same screen */
.desk{margin:0 0 var(--space-4);padding:12px 14px 10px;border-radius:16px;background:var(--white);border:1.5px solid #E6D8B8;box-shadow:0 6px 18px rgba(27,42,65,.06)}
.desk-k{margin:0 0 6px;font:700 12.5px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.desk table{width:100%;border-collapse:collapse}
.desk th{font-weight:500;text-align:left;padding:6px 8px 6px 0;font-size:15.5px;line-height:1.35;border-bottom:1px dashed var(--line)}
.desk td{text-align:right;padding:4px 0;border-bottom:1px dashed var(--line);white-space:nowrap}
.desk tr:last-child th,.desk tr:last-child td{border-bottom:0}
.desk tr.tot th{font-weight:700;color:var(--navy)}
.desk .fig{border:1.5px solid #E6D8B8;background:#FFF9EC;border-radius:10px;padding:4px 10px;font:700 16px/1.2 var(--font-play,inherit);color:var(--navy);cursor:pointer}
.desk .fig:hover{border-color:var(--gold)}
.desk .fig small{font:500 12px var(--font-sans);color:var(--muted)}
.desk-tip{margin:6px 0 0;font-size:13px;color:var(--muted)}
.rnote.nearly{border-left:5px solid var(--gold);background:#FFF8E8}
.rnote.shown{border-left:5px solid #3B6EA8;background:#F1F5FB}
#cbskip{font-weight:700;text-decoration:none;border:1.5px solid #E6D8B8;background:#FFF9EC;border-radius:var(--radius-pill);min-height:44px}
/* a worked example, line by line */
.wk{display:flex;flex-direction:column;gap:12px}
.wk-lines{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wk-l{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:var(--white);border:1px solid var(--line)}
.wk-l.in{animation:wsIn .35s ease-out both}
.wk-l p{margin:0;line-height:1.55}
.wk-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold-light);font:700 14px/1 var(--font-sans)}
.wk-sum{margin-top:6px!important;font:700 18px/1.4 var(--font-play,inherit);color:var(--navy);background:#FFF9EC;border-radius:10px;padding:6px 10px;display:inline-block}
.wk-next{align-self:flex-start}
.wk-res{padding:12px 16px;border-radius:14px;background:#F1F8F3;border:1.5px solid #9FC9AE;font-weight:600}
/* choose what happens */
.ch-opts{display:grid;gap:12px}
.ch-opt{border-radius:16px;border:2px solid var(--navy);background:var(--white);overflow:hidden;transition:box-shadow .2s}
.ch-opt.open{box-shadow:0 10px 24px rgba(27,42,65,.1)}
.ch-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border:0;background:transparent;text-align:left;cursor:pointer;font:600 16.5px/1.4 var(--font-sans);color:var(--navy)}
.ch-btn em{margin-left:auto;font:600 13px var(--font-sans);font-style:normal;color:var(--gold-ink);white-space:nowrap}
.ch-art svg{width:44px;height:44px}
.ch-then{padding:0 16px 14px;border-top:1px dashed var(--line);animation:wsIn .35s ease-out both}
.ch-then p{margin:10px 0 0;line-height:1.55}
.ch-rule{color:#2F855A;font-weight:700}
.ch-after{margin-top:var(--space-4)}
@media (max-width:520px){.ch-btn{flex-wrap:wrap}.ch-btn em{margin-left:0}}

.rnote.shown .nt-h svg{width:28px;height:28px;flex:none}

/* November 2026: course-finished card on the last lesson's finish screen */
.course-done{max-width:760px;margin:var(--space-5) auto;padding:24px 22px;border-radius:20px;background:var(--white);border:2px solid var(--gold-ink);box-shadow:0 12px 30px rgba(27,42,65,.1);text-align:center}
.course-done h2{margin:4px 0 8px;font-size:clamp(24px,5vw,32px);text-wrap:balance}
.course-done p{margin:0 auto 14px;max-width:52ch;line-height:1.6}
.course-done .actions{justify-content:center;flex-wrap:wrap;gap:10px}
.course-done.full{background:linear-gradient(180deg,#FFF8E6,var(--white))}
/* November 2026: share the lesson from its first screen */
.lshare .sharebox{margin:0;padding:0;border:0;background:none}
.lshare .sharebox .actions{gap:8px}
.lshare > p{margin:10px 0 0}


.bb-body{animation:bbBob 3.2s ease-in-out infinite;transform-origin:100px 210px;transform-box:view-box}
.bb-eyes{animation:bbBlink 4.6s infinite;transform-origin:100px 76px;transform-box:view-box}
.bb-armR{transform-origin:156px 120px;transform-box:view-box}
.bb-armL{transform-origin:44px 120px;transform-box:view-box}
.bb-hello .bb-armR{animation:bbWave 1.1s ease-in-out infinite}
.bb-celebrate .bb-body{animation:bbJump .9s cubic-bezier(.3,.7,.4,1) infinite}
.bb-celebrate .bb-armR,.bb-celebrate .bb-armL{animation:bbCheer .45s ease-in-out infinite alternate}
.bb-oops .bb-body{animation:bbShake .5s ease-in-out 3}
.bb-think .bb-body{animation:bbTilt 3s ease-in-out infinite}
.bb-think .bb-dots circle{animation:bbDot 1.4s infinite}
.bb-think .bb-dots circle:nth-child(2){animation-delay:.2s}.bb-think .bb-dots circle:nth-child(3){animation-delay:.4s}
.bb-calc .bb-armR{animation:bbTap .35s ease-in-out infinite alternate}
.bb-point .bb-armR{animation:bbPoint 1.2s ease-in-out infinite}
.bb-pencil{animation:bbPen 3.2s ease-in-out infinite;transform-origin:150px 40px;transform-box:view-box}
.bb-conf rect,.bb-conf circle{animation:bbConf 1.6s linear infinite}
.bb-conf :nth-child(2n){animation-delay:.4s}.bb-conf :nth-child(3n){animation-delay:.8s}.bb-conf :nth-child(5n){animation-delay:1.1s}
.bb-sweat{animation:bbSweat 1.2s ease-in infinite}
@keyframes bbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bbBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes bbWave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(22deg)}}
@keyframes bbJump{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.04,.95)}45%{transform:translateY(-16px) scale(.98,1.03)}}
@keyframes bbCheer{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes bbShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes bbTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes bbDot{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes bbTap{from{transform:rotate(0)}to{transform:rotate(9deg)}}
@keyframes bbPoint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes bbPen{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes bbConf{0%{transform:translateY(-10px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(60px) rotate(220deg);opacity:0}}
@keyframes bbSweat{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(14px);opacity:0}}
.sc-drive{animation:scDrive 2.4s cubic-bezier(.2,.8,.3,1) both}
.sc-float{animation:scFloat 3.4s ease-in-out infinite}
.sc-float2{animation:scFloat 3.9s ease-in-out .6s infinite}
.sc-spin{animation:scSpin 2.2s linear infinite;transform-box:fill-box;transform-origin:center}
.sc-glow{animation:scGlow 2.4s ease-in-out infinite}
.sc-steam path{animation:scSteam 2.6s ease-in-out infinite}.sc-steam path:nth-child(2){animation-delay:.8s}
.sc-needle{animation:scNeedle .28s ease-in-out infinite alternate}
.sc-bubble circle{animation:scRise 2.8s ease-in infinite}.sc-bubble circle:nth-child(2){animation-delay:.9s}.sc-bubble circle:nth-child(3){animation-delay:1.7s}
.sc-sway{animation:scSway 4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.sc-pop{animation:scPop .6s cubic-bezier(.3,1.6,.5,1) both}
.sc-pop2{animation:scPop .6s cubic-bezier(.3,1.6,.5,1) .5s both}
.sc-pop3{animation:scPop .6s cubic-bezier(.3,1.6,.5,1) 1s both}
.sc-tick{animation:scSpin 6s steps(12) infinite;transform-box:view-box}
.sc-blink{animation:scBlink 1.6s steps(2) infinite}
.sc-arm{animation:scArm 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
.sc-grow{animation:scGrow 1.8s cubic-bezier(.3,.8,.4,1) both;transform-box:fill-box;transform-origin:50% 100%}
.sc-person{animation:scSway 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.sc-eyes{animation:bbBlink 5s infinite;transform-box:fill-box;transform-origin:center}
@keyframes scDrive{from{transform:translateX(-260px)}to{transform:translateX(0)}}
@keyframes scFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(2deg)}}
@keyframes scSpin{to{transform:rotate(360deg)}}
@keyframes scGlow{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes scSteam{0%{transform:translateY(4px);opacity:0}40%{opacity:.8}100%{transform:translateY(-14px);opacity:0}}
@keyframes scNeedle{from{transform:translateY(0)}to{transform:translateY(5px)}}
@keyframes scRise{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
@keyframes scSway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.4deg)}}
@keyframes scPop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes scBlink{50%{opacity:.25}}
@keyframes scArm{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@keyframes scGrow{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.sc-pop,.sc-pop2,.sc-pop3{transform-box:fill-box;transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){svg *{animation:none!important}}