:root{ --bg-cream:#FCF9F2; --paper:#FFFDF7; --primary-navy:#1A2B4C; --accent-mustard:#F4C430; --accent-rust:#D95D39; --accent-amber:#B45309; /* A LITTLE purple, back by request, on ONE idea so it reads as its own thing instead of more of the same brown: Insights. Light and FLAT — the colour that was removed was a saturated #7C3AED on a soft diagonal gradient, which is the generic-SaaS shape, not the hue. This one is a pale wash with the usual navy ink on top, so it belongs to the paper. */ --accent-violet:#EDE7FA; --accent-violet-ink:#5B4A87; /* Third self-referential declaration (see --accent-primary-soft below): in light mode this was invalid, so the Core plan card painted no background at all while dark mode gave it a real #3A2E14. Real value, both themes now agree. */ --accent-amber-soft:#FEF3C7; --ink-muted:rgba(26,43,76,0.72); --ink-soft:rgba(26,43,76,0.12); --line-soft:rgba(26,43,76,0.08); --font-display:"Patrick Hand","Caveat",cursive; --font-body:"DM Sans",Inter,system-ui,sans-serif; --border-ink:2px solid var(--primary-navy); --border-sketch:2px dashed var(--primary-navy); --shadow-navy:3px 3px 0 var(--primary-navy); --shadow-mustard:3px 3px 0 var(--accent-mustard); --shadow-rust:3px 3px 0 var(--accent-rust); --shadow-amber:3px 3px 0 var(--accent-amber); --radius-md:18px; --radius-lg:24px; --radius-xl:32px; --ease-pop:cubic-bezier(.2,.9,.2,1); /* Aliases for JS-generated HTML */ --bg:var(--bg-cream); --bg-soft:var(--paper); --border:var(--ink-soft); --text:var(--primary-navy); --text-muted:var(--ink-muted); --accent-basic:#059669; --accent-basic-soft:#ECFDF5; --accent-exam:var(--accent-rust); --accent-exam-soft:#FFF7ED; --accent-primary:#1D4ED8; /* These two were declared SELF-REFERENTIALLY (`--x:var(--x)`), which is invalid at computed-value time, so in LIGHT mode every `background: var(--accent-primary-soft)` and `var(--p-purple)` resolved to nothing and silently painted transparent — while dark mode (below) gives both a real value. Real literals, so the two themes now behave the same way. */ --accent-primary-soft:#FFF8E7; --ink:var(--primary-navy); --p-yellow:#FEF3C7; --p-pink:#FCE7F3; --p-blue:#DBEAFE; --p-mint:#D1FAE5; --p-purple:#FEF3C7; --radius:var(--radius-lg); --radius-sm:14px; } /* =========================================================================== THEMES — dark mode + accent colour schemes + a reduced-motion switch. Everything is driven off the CSS variables above, so a theme is just a variable override; no component needs to know a theme exists. Set on as data-theme / data-accent / data-motion. =========================================================================== */ /* ---- DARK MODE ---------------------------------------------------------- Not pure black: a warm, ink-blue paper so the hand-drawn borders still read as ink on paper rather than glowing lines on a void. */ :root[data-theme="dark"]{ --bg-cream:#141B2B; --paper:#1D2740; --primary-navy:#E8EDF7; /* "ink" becomes light — borders/text flip */ --ink-muted:rgba(232,237,247,0.68); --ink-soft:rgba(232,237,247,0.16); --line-soft:rgba(232,237,247,0.10); --accent-amber-soft:#3A2E14; --accent-violet:#2B2440; --accent-violet-ink:#C9BCEB; --accent-primary:#A5B4FC; --accent-primary-soft:#232C4A; --accent-basic:#34D399; --accent-basic-soft:#12312A; --accent-exam-soft:#3A2418; /* pastel chips need to stop being pastel or they blind you */ --p-yellow:#3D3417; --p-pink:#3B2230; --p-blue:#1D2C47; --p-mint:#13322A; --p-purple:#3A2E14; } :root[data-theme="dark"] body{ color:var(--primary-navy); } /* Doodle art is drawn with a hardcoded ink colour; lift it out of the dark. */ :root[data-theme="dark"] .welcome-hero svg, :root[data-theme="dark"] .doodle-guy svg{ filter:brightness(1.06); } /* The logo is dark ink on transparent — lift it so it doesn't vanish. */ :root[data-theme="dark"] .logo img{ filter:brightness(1.9) contrast(1.05); } /* Some surfaces have a FIXED light colour (the yellow post-it, gold pills, pastel badges). Their text must NOT flip with the theme or it turns light text on a light background. --fixed-ink never changes. */ :root{ --fixed-ink:#1A2B4C; /* The muted partner to --fixed-ink, for secondary copy ("per month") sitting on one of those fixed light surfaces. Same value --ink-muted has in light mode, so light rendering is unchanged; unlike --ink-muted it does NOT flip. */ --fixed-ink-muted:rgba(26,43,76,0.72); /* The Core plan's violet. It sits on --accent-amber-soft, which DOES flip, so a single hard-coded #B45309 was 2.53:1 on the dark card — the Core price and heading. Light keeps the exact brand violet; dark lifts it to violet-300. */ --plan-core-ink:#B45309; } :root[data-theme="dark"]{ --plan-core-ink:#FCD34D; } :root[data-theme="dark"] .demo-postit, :root[data-theme="dark"] .demo-postit *, :root[data-theme="dark"] .btn-seafoam, :root[data-theme="dark"] .cp-tag, :root[data-theme="dark"] .stg-sw{ color:var(--fixed-ink); } :root[data-theme="dark"] .demo-postit{ border-color:var(--fixed-ink); } /* ---- ACCENT SCHEMES ----------------------------------------------------- Only the accent family changes; the paper/ink stay put so contrast is never at the mercy of the colour the student picked. */ :root[data-accent="blue"] { --accent-amber:#2563EB; --accent-mustard:#38BDF8; --shadow-amber:3px 3px 0 #2563EB; } :root[data-accent="red"] { --accent-amber:#DC2626; --accent-mustard:#F97316; --shadow-amber:3px 3px 0 #DC2626; } :root[data-accent="yellow"]{ --accent-amber:#CA8A04; --accent-mustard:#F4C430; --shadow-amber:3px 3px 0 #CA8A04; } :root[data-accent="green"] { --accent-amber:#059669; --accent-mustard:#34D399; --shadow-amber:3px 3px 0 #059669; } :root[data-accent="pink"] { --accent-amber:#DB2777; --accent-mustard:#F472B6; --shadow-amber:3px 3px 0 #DB2777; } /* ---- REDUCED MOTION ----------------------------------------------------- One switch that genuinely stops motion, including the JS-driven arcade animations. Also honours the OS setting by default. */ :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } @media (prefers-reduced-motion: reduce){ :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } } /* ---- settings button + panel ---- */ .nav-settings-btn{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--paper);color:var(--primary-navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .12s,background .15s} .nav-settings-btn:hover{background:var(--accent-amber);color:#fff;transform:rotate(35deg)} .stg-overlay{position:fixed;inset:0;z-index:6800;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto;overscroll-behavior:contain} .stg-overlay.open{display:flex;animation:fadeIn .16s ease} .stg-card{background:var(--paper);border:3px solid var(--primary-navy);border-radius:24px;box-shadow:8px 8px 0 var(--primary-navy);max-width:460px;width:100%;padding:22px;position:relative;max-height:88vh;overflow-y:auto} .stg-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--bg-cream);color:var(--primary-navy);font-size:14px;font-weight:800;cursor:pointer;line-height:1} .stg-h{font-family:var(--font-display);font-size:26px;color:var(--primary-navy);margin:0 0 2px} .stg-sub{font-family:var(--font-body);font-size:12.5px;color:var(--ink-muted);margin:0 0 16px} .stg-sec{margin-bottom:16px} .stg-lbl{font-family:var(--font-display);font-size:16px;color:var(--primary-navy);margin-bottom:7px} .stg-row{display:flex;gap:7px;flex-wrap:wrap} .stg-opt{flex:1;min-width:88px;padding:10px 8px;border:2.5px solid var(--primary-navy);border-radius:12px;background:var(--bg-cream);color:var(--primary-navy);font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s} .stg-opt:hover{transform:translateY(-1px)} .stg-opt[aria-pressed="true"]{background:var(--primary-navy);color:var(--paper)} .stg-swatches{display:flex;gap:9px;flex-wrap:wrap} .stg-sw{width:42px;height:42px;border-radius:50%;border:3px solid var(--primary-navy);cursor:pointer;position:relative;transition:transform .12s} .stg-sw:hover{transform:scale(1.08)} .stg-sw[aria-pressed="true"]::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:17px;text-shadow:0 1px 3px rgba(0,0,0,.5)} .stg-note{font-family:var(--font-body);font-size:11.5px;color:var(--ink-muted);line-height:1.5;margin-top:6px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg-cream);color:var(--text);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased} .doodle{font-family:var(--font-display)} h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:.01em} .mono{font-family:'JetBrains Mono',monospace} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img{max-width:100%;height:auto} .bubble{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:all .18s ease;background:var(--bg)} .bubble.filled{border-color:currentColor;background:radial-gradient(circle at 35% 35%,currentColor 0 38%,transparent 40%),conic-gradient(currentColor 0deg 305deg,transparent 305deg 360deg);background-size:60% 60%,100% 100%;background-position:center,center;background-repeat:no-repeat} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} /* Header */ header{position:sticky;top:0;z-index:50;background:rgba(255,253,247,.96);backdrop-filter:blur(12px);border-bottom:2px solid var(--primary-navy);box-shadow:0 2px 12px rgba(26,43,76,.06)} /* the sticky nav had a hardcoded cream background — it stayed bright white over the whole dark app, which is the first thing you notice logged in. */ :root[data-theme="dark"] header{background:rgba(29,39,64,.96);box-shadow:0 2px 12px rgba(0,0,0,.35)} .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;max-width:1180px;margin:0 auto} .logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;font-family:var(--font-display)} .logo img{height:44px;width:auto;display:block} .credit-pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;border-radius:999px;padding:6px 14px;white-space:nowrap;font-family:var(--font-body);transition:background .3s;background:var(--paper);border:2px solid var(--primary-navy);color:var(--primary-navy);box-shadow:2px 2px 0 var(--primary-navy)} .credit-pill b{font-size:14.5px} /* Insights is the one thing wearing the violet. Flat fill, ink border, hard offset shadow — the house shape, just not brown again. */ .credit-pill.cp-violet{background:var(--accent-violet);color:var(--accent-violet-ink)} .credit-pill.cp-violet .cp-lbl{color:var(--accent-violet-ink);opacity:.8} .credit-pill .cp-lbl{font-weight:600;color:var(--ink-muted);font-size:12px} /* The low-credit warning must outrank the violet — a warning that is the same colour as the normal state is not a warning. Kept as its own class (mutually exclusive with cp-violet in JS) but written with a compound selector too so it wins even if both are ever present at once. */ .credit-pill.cp-low{background:#FFF1F0} .credit-pill.cp-low.cp-violet{background:#FFF1F0;color:var(--primary-navy)} .credit-pill.cp-low.cp-violet .cp-lbl{color:var(--ink-muted);opacity:1} .cp-tag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.08em;padding:2px 7px;border-radius:999px;margin-right:2px} .cp-tag.max{background:#F4C430;color:#4A3403;border:1.5px solid var(--primary-navy)} .cp-tag.pro{background:#B45309;color:#fff;border:1.5px solid var(--primary-navy)} /* Paywall modal */ /* paywall is now a focus-overlay — see #paywallOverlay */ /* Essay challenge view */ .essay-challenge{max-width:820px;margin:0 auto} .essay-challenge h3{font-size:22px;margin-bottom:6px} .essay-prompt-card{border:var(--border-ink);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-navy);background:var(--paper);margin-bottom:18px} .essay-prompt-card .passage-title{font-size:16px;font-weight:700;font-family:var(--font-display);margin-bottom:10px;color:var(--primary-navy)} .essay-prompt-card .passage-body{font-size:14px;font-family:var(--font-body);line-height:1.75;color:var(--text)} .essay-question-box{border:var(--border-sketch);border-radius:var(--radius-sm);padding:18px;background:#f0fdf4;margin-bottom:14px} .essay-question-box .eq-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-basic);font-family:'JetBrains Mono',monospace;margin-bottom:8px} .essay-question-box p{font-size:14.5px;font-family:var(--font-body);line-height:1.6;color:var(--text)} .essay-criteria{margin-bottom:18px;border:2px solid var(--accent-primary-soft);border-radius:14px;padding:16px;background:var(--accent-primary-soft)} .essay-criteria ul{margin:6px 0 0 0;padding-left:18px} .essay-criteria ul li{font-size:13.5px;font-family:var(--font-body);margin-bottom:6px;color:var(--text);line-height:1.5} .essay-ta-wrap{position:relative;margin-bottom:12px} .essay-ta{width:100%;min-height:220px;border:var(--border-ink);border-radius:var(--radius-sm);padding:16px;font-size:15px;font-family:var(--font-body);line-height:1.7;resize:vertical;box-shadow:3px 3px 0 var(--primary-navy);background:var(--paper);color:var(--text);box-sizing:border-box} .essay-ta:focus{outline:none;border-color:var(--accent-primary);box-shadow:3px 3px 0 var(--accent-primary)} .char-bar{display:flex;justify-content:space-between;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-muted);margin-bottom:14px} .char-bar span{transition:color .2s} .char-bar.warn span:last-child{color:#dc2626} .anti-cheat-warn{background:#FEF3C7;border:2px solid #F59E0B;border-radius:14px;padding:16px;margin-bottom:14px;font-size:14px;font-family:var(--font-body);display:none} .anti-cheat-warn.show{display:block} .rubric-result{border:2.5px solid var(--ink);border-radius:18px;padding:22px;box-shadow:4px 4px 0 var(--ink);background:var(--paper);margin-top:18px;display:none} .rubric-result.show{display:block} .rubric-score-big{font-size:52px;font-weight:700;font-family:var(--font-display);text-align:center;margin-bottom:6px} .rubric-score-label{text-align:center;font-size:14px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:18px} .rubric-breakdown{display:flex;flex-direction:column;gap:8px;margin-bottom:18px} .rubric-row{display:flex;align-items:center;gap:10px;font-size:13.5px;font-family:var(--font-body)} .rubric-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:2px solid var(--ink)} .rubric-dot.pass{background:var(--accent-basic)} .rubric-dot.partial{background:var(--p-yellow)} .rubric-dot.fail{background:#FCA5A5} .rubric-micro{font-size:13px;color:var(--accent-primary);font-family:var(--font-display);font-weight:700;text-align:center;margin-top:4px} .focus-pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .focus-pick-btn{border:2px solid var(--border);border-radius:14px;padding:12px 14px;font-size:13.5px;font-family:var(--font-display);background:var(--bg);color:var(--text);cursor:pointer;transition:all .15s;text-align:center} .focus-pick-btn:hover{border-color:var(--accent-primary);background:var(--accent-primary-soft)} .focus-pick-btn.selected{border-color:var(--accent-primary);background:var(--accent-primary);color:#fff} .sub-map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} .sub-map-card{border:2px solid var(--primary-navy);border-radius:var(--radius-md);padding:24px 20px;box-shadow:3px 3px 0 var(--primary-navy);background:var(--paper);cursor:pointer;transition:transform .15s,box-shadow .15s;text-align:center} .sub-map-card:hover{transform:translateY(-3px);box-shadow:4px 5px 0 var(--primary-navy)} .sub-map-card h3{font-size:18px;margin-bottom:6px} .sub-map-card .sub-icon{margin-bottom:8px;display:flex;justify-content:center;align-items:center;line-height:0} .sub-map-card .sub-desc{font-size:13px;font-family:var(--font-body);color:var(--text-muted);line-height:1.45;margin-bottom:10px} .sub-map-card .sub-cost{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--accent-primary);font-weight:700} .sub-map-card.featured{position:relative;background:linear-gradient(180deg,var(--p-yellow) 0%,var(--paper) 55%);grid-column:1/-1} .sub-map-card.featured .sub-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent-mustard);color:var(--primary-navy);border:2px solid var(--primary-navy);border-radius:999px;font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.04em;padding:2px 12px;white-space:nowrap} .sub-map-card.featured .sub-icon{} .profile-card{border:var(--border-ink);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-navy);background:var(--paper);margin-bottom:18px} .profile-card h4{font-size:17px;margin-bottom:10px} /* A secondary card — same shape as the rest, lighter weight, so a small prompt does not need a dashed border to say "I am minor". The dashed treatment read as unfinished next to the solid cards above it. */ .profile-card-quiet{padding:18px 20px;box-shadow:none;background:var(--paper-soft,var(--paper))} .pc-quiet-label{font-family:var(--font-body);font-size:13px;color:var(--text-muted);margin-bottom:10px;text-align:left} /* The one genuinely destructive control in the app. It gets a calm, solid frame and a tinted ground rather than red dashes: the danger belongs in the label and the confirm step, not in a border that also framed the Sign out button. */ .profile-card-danger{padding:18px 20px;border:2px solid rgba(220,38,38,.45);background:rgba(220,38,38,.05);box-shadow:none} .pc-danger-title{font-family:var(--font-body);font-size:14px;font-weight:700;color:#B91C1C;margin-bottom:6px} .pc-danger-note{font-family:var(--font-body);font-size:12px;color:var(--text-muted);line-height:1.55;margin-bottom:14px} .profile-card-danger .pc-danger-btn{width:100%;font-size:13px;color:#B91C1C;border-color:rgba(220,38,38,.55)} .profile-card-danger .pc-danger-btn:hover{background:rgba(220,38,38,.10);border-color:#B91C1C} [data-theme="dark"] .profile-card-danger{border-color:rgba(248,113,113,.45);background:rgba(248,113,113,.08)} [data-theme="dark"] .pc-danger-title{color:#FCA5A5} [data-theme="dark"] .profile-card-danger .pc-danger-btn{color:#FCA5A5;border-color:rgba(248,113,113,.55)} [data-theme="dark"] .profile-card-danger .pc-danger-btn:hover{background:rgba(248,113,113,.14);border-color:#FCA5A5} .profile-tag{display:inline-block;background:var(--accent-primary-soft);color:var(--accent-primary);border-radius:999px;padding:4px 12px;font-size:12.5px;font-weight:600;margin:3px 4px 3px 0;font-family:var(--font-body)} .nav-profile-btn{background:none;border:var(--border-ink);border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:border-color .15s;overflow:hidden} .nav-profile-btn:hover{border-color:var(--accent-primary)} .recommend-banner{border:2px solid var(--accent-primary);border-radius:16px;padding:16px 20px;background:var(--accent-primary-soft);margin-bottom:20px;font-family:var(--font-body);font-size:14px;line-height:1.5} .feature-map{display:flex;flex-direction:column;gap:20px;max-width:800px;margin:0 auto;padding:20px} .feature-map-card{border:var(--border-ink);border-radius:var(--radius-lg);padding:24px 28px;box-shadow:var(--shadow-navy);background:var(--paper);cursor:pointer;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;gap:20px} .feature-map-card:hover{transform:translateY(-3px);box-shadow:4px 5px 0 var(--primary-navy)} .feature-map-card .fm-icon{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center} .feature-map-card .fm-body{flex:1} .feature-map-card .fm-body h4{font-size:17px;margin:0 0 4px} .feature-map-card .fm-body p{font-size:13px;font-family:var(--font-body);color:var(--text-muted);margin:0;line-height:1.5} .feature-map-card .fm-cost{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--accent-primary);font-weight:700;white-space:nowrap;flex-shrink:0} .vip-badge{display:inline-block;background:#F4C430;color:var(--fixed-ink);border:2px solid var(--primary-navy);box-shadow:2px 2px 0 var(--primary-navy);font-size:10px;font-weight:800;letter-spacing:.08em;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;text-transform:uppercase;font-family:'JetBrains Mono',monospace} .feature-map-card.vip{border-color:#F4C430;box-shadow:5px 5px 0 #F4C430} .feature-map-card.vip:hover{box-shadow:7px 8px 0 #B45309} .recommend-card{border:2.5px solid var(--accent-primary);border-radius:22px;padding:20px 24px;background:var(--accent-primary-soft);margin-bottom:8px} .recommend-card h4{font-size:16px;margin:0 0 8px;color:var(--accent-primary)} .recommend-card .rec-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px} .recommend-card .rec-tag{background:var(--accent-primary);color:#fff;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:600;font-family:var(--font-body)} .profile-header{display:flex;align-items:center;gap:18px;margin-bottom:20px} .profile-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#20B2AA,#38bdf8);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#fff;font-family:var(--font-display);flex-shrink:0} .profile-name{font-size:20px;font-weight:700;font-family:var(--font-display)} .profile-email{font-size:13px;color:var(--text-muted);font-family:var(--font-body)} .profile-grade-pill{display:inline-block;background:var(--accent-primary-soft);color:var(--accent-primary);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;cursor:pointer} /* old paywall-feature-list removed — now inline in premium tab */ .premium-trigger{position:relative;cursor:pointer;display:inline-block} .premium-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--paper);border:2.5px solid #F4C430;border-radius:16px;box-shadow:0 12px 40px rgba(180,83,9,.18);padding:18px;z-index:9999;opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1)} .premium-trigger:hover .premium-dropdown,.premium-trigger.active .premium-dropdown{opacity:1;transform:translateY(0) scale(1);pointer-events:all} .premium-dropdown::before{content:'';position:absolute;top:-8px;right:20px;width:14px;height:14px;background:var(--paper);border-left:2.5px solid #F4C430;border-top:2.5px solid #F4C430;transform:rotate(45deg);z-index:1} .premium-dropdown h5{margin:0 0 10px;font-size:14px;font-family:var(--font-display);color:#B45309} .premium-dropdown ul{list-style:none;padding:0;margin:0 0 14px} .premium-dropdown ul li{font-size:12px;font-family:var(--font-body);color:var(--text);padding:4px 0;display:flex;gap:6px;align-items:flex-start;line-height:1.4} .premium-dropdown ul li::before{content:'\2713';color:#B45309;font-weight:800;flex-shrink:0;font-size:11px} .premium-dropdown .pd-cta{display:block;width:100%;padding:10px;background:#F4C430;color:var(--fixed-ink);border:2.5px solid var(--primary-navy);box-shadow:3px 3px 0 var(--primary-navy);border-radius:12px;font-size:13px;font-weight:700;font-family:var(--font-display);cursor:pointer;text-align:center;transition:transform .1s} .premium-dropdown .pd-cta:hover{transform:scale(1.03)} .nav-cta{display:flex;gap:10px;align-items:center} .btn{border-radius:var(--radius-sm);padding:10px 20px;font-size:14px;font-weight:700;border:var(--border-ink);background:var(--paper);color:var(--primary-navy);transition:all .15s;box-shadow:4px 4px 0 var(--accent-mustard);white-space:nowrap} .btn:hover{transform:translateY(-3px);box-shadow:4px 6px 0 var(--accent-mustard)} .btn:disabled{opacity:.4;cursor:not-allowed} .btn-primary{background:var(--primary-navy);color:var(--bg-cream);border-color:var(--primary-navy)} /* Sign up free — the flat teal pill did not belong to the doodle palette and read as a generic SaaS button. Now purple with the hand-drawn ink border and hard shadow, so it matches the rest of the site and clearly outranks "Log in". */ .btn-seafoam{background:#F4C430;color:var(--primary-navy);border:2.5px solid var(--primary-navy);border-radius:999px;padding:10px 22px;font-size:14px;font-weight:800;font-family:var(--font-display);letter-spacing:.01em;cursor:pointer;white-space:nowrap;box-shadow:3px 3px 0 var(--primary-navy);transition:transform .12s ease,box-shadow .12s ease,background .15s} .btn-seafoam:hover{background:#FFD34D;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--primary-navy)} .btn-seafoam:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--primary-navy)} .nav-signout{display:none;background:none;border:1.5px solid var(--border);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);transition:all .15s} .nav-signout:hover{border-color:#dc2626;color:#dc2626} .btn-primary:hover{background:#0f1d35;border-color:#0f1d35;transform:translateY(-3px)} .btn-sm{padding:7px 14px;font-size:13px;border-radius:8px} .btn-doodle{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--primary-navy);border:var(--border-ink);border-radius:var(--radius-sm);background:var(--paper);padding:10px 20px;box-shadow:4px 4px 0 var(--accent-mustard);transition:transform .1s ease} .btn-doodle:hover{transform:translateY(-3px);box-shadow:4px 6px 0 var(--accent-mustard)} .btn-doodle:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent-mustard)} .btn-doodle.primary{background:var(--primary-navy);color:var(--bg-cream)} @media(max-width:760px){.nav-links{display:none}} /* ===================== Onboarding ===================== */ .onboarding-overlay{position:fixed;inset:0;background:var(--bg);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px} .onboarding-overlay.hidden{display:none} .onboarding-card{max-width:560px;width:100%;text-align:center;border:var(--border-ink);border-radius:var(--radius-lg);padding:40px 32px;box-shadow:var(--shadow-navy);position:relative;background:var(--paper)} .onboarding-card .doodle-emoji{font-size:48px;margin-bottom:8px} .onboarding-card h1,.onboarding-card .onboard-h1{font-size:32px;margin-bottom:10px;font-family:var(--font-display);color:var(--primary-navy);font-weight:700} .onboarding-card p{font-size:15px;color:var(--text-muted);margin:0 0 20px;font-family:var(--font-body)} .onboarding-card textarea{width:100%;min-height:90px;border:2px solid var(--border);border-radius:14px;padding:14px;font-size:14px;font-family:var(--font-body);resize:vertical;margin-bottom:16px} .onboarding-card textarea:focus{outline:none;border-color:var(--accent-primary)} .onboarding-actions{display:flex;flex-direction:column;gap:10px;align-items:center} .onboarding-skip{font-size:13px;color:var(--text-muted);font-family:var(--font-body);background:none;border:none;text-decoration:underline;padding:4px} .quiz-card-onboard{max-width:600px;text-align:left} .quiz-card-onboard h1,.quiz-card-onboard .onboard-h1,.quiz-card-onboard p{text-align:center} .diag-questions{display:flex;flex-direction:column;gap:18px;margin-bottom:20px} .diag-q-text{font-family:var(--font-display);font-size:18px;margin-bottom:8px} .diag-opts{display:flex;flex-direction:column;gap:8px} @media(min-width:520px){.diag-opts{flex-direction:row}} .diag-opt{flex:1;border:2px solid var(--border);border-radius:14px;padding:12px 14px;font-size:13.5px;font-family:var(--font-body);background:var(--bg);text-align:left;transition:all .15s ease;min-height:44px} .diag-opt:hover{border-color:var(--accent-primary);background:var(--accent-primary-soft)} .diag-opt.selected{border-color:var(--ink);background:var(--p-yellow);font-weight:700} .grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:8px} .grade-btn{border:var(--border-ink);border-radius:var(--radius-sm);padding:18px;font-family:var(--font-display);font-size:24px;font-weight:700;background:var(--paper);box-shadow:4px 4px 0 var(--accent-mustard);transition:transform .1s ease} .grade-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} .grade-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} /* ===================== Map View ===================== */ .map-view.hidden{display:none} /* --------------------------------------------------------------------------- APP SHELL — a persistent sidebar for navigation. The home screen used to stack full-width banners and cram five destinations (practice, mistakes, study plan, class league, parent view) into a single row of buttons, so nothing had priority and the page read as noise. Navigation now lives permanently on the left; the main column is free to answer one question: what should I do next? ------------------------------------------------------------------------- */ /* The nav is a ☰ drawer, not a permanent column: it stays out of the way until asked for, so the home screen leads with the student's own progress. */ .app-shell{display:block} .nav-toggle{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:2.5px solid var(--primary-navy); border-radius:12px;box-shadow:3px 3px 0 var(--primary-navy);padding:9px 15px;cursor:pointer; font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--primary-navy);margin-bottom:16px} .nav-toggle:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--primary-navy)} .nav-toggle:focus-visible{outline:3px solid var(--accent-amber);outline-offset:2px} .nav-bars{display:inline-flex;flex-direction:column;gap:3.5px;width:18px} .nav-bars i{display:block;height:2.6px;background:currentColor;border-radius:2px} .nav-scrim{position:fixed;inset:0;z-index:6200;background:rgba(15,23,42,.45);opacity:0;pointer-events:none;transition:opacity .18s} .nav-scrim.open{opacity:1;pointer-events:auto} .app-side{position:fixed;top:0;left:0;bottom:0;width:264px;z-index:6300;background:var(--paper); border-right:2.5px solid var(--primary-navy);box-shadow:6px 0 0 rgba(26,43,76,.08); display:flex;flex-direction:column;gap:2px;padding:18px 14px;overflow-y:auto; transform:translateX(-104%);transition:transform .22s cubic-bezier(.3,0,.4,1)} .app-side.open{transform:none} .app-side-h{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);padding:12px 10px 5px} .nav-close{align-self:flex-end;background:none;border:none;cursor:pointer;font-size:19px;line-height:1;color:var(--ink-muted);padding:2px 6px 8px} .nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border:none;background:none;border-radius:10px;cursor:pointer; font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink-main);text-align:left;transition:background .12s} .nav-item:hover{background:var(--accent-amber-soft)} .nav-item.active{background:var(--accent-amber-soft);color:var(--accent-amber);font-weight:800} .nav-item .ni-ic{width:20px;flex:0 0 20px;display:inline-flex;justify-content:center;line-height:0;font-size:15px} .nav-item .ni-badge{margin-left:auto;background:#E11D48;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;line-height:18px; text-align:center;border-radius:999px;font-family:'JetBrains Mono',monospace;padding:0 5px} .app-main{flex:1;min-width:0} /* The drawer behaves identically at every width — only its footprint changes, so it never covers the whole screen on a small phone. */ @media(max-width:420px){ .app-side{width:84vw} } @media print{ .app-side,.nav-scrim,.nav-toggle{display:none} } .map-hero{padding:44px 0 16px;text-align:center} .map-hero h2{font-size:34px;margin-bottom:10px;color:var(--primary-navy)} .map-hero p{font-size:15px;color:var(--text-muted);font-family:var(--font-body);max-width:520px;margin:0 auto} .recommend-note{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13.5px;font-weight:700;color:var(--primary-navy);background:var(--accent-mustard);border:var(--border-ink);border-radius:999px;padding:8px 16px;font-family:var(--font-display)} .topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;padding:28px 0 18px} @media(max-width:760px){.topic-grid{grid-template-columns:1fr}} .topic-card{position:relative;border:var(--border-ink);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;background:var(--paper);transition:transform .15s ease,box-shadow .15s ease;box-shadow:var(--shadow-navy)} .topic-card:hover{transform:translateY(-3px);box-shadow:4px 5px 0 var(--primary-navy)} .topic-card:nth-child(odd){transform:none} .topic-card:nth-child(even){transform:none} .topic-card:nth-child(odd):hover{transform:translateY(-4px)} .topic-card:nth-child(even):hover{transform:translateY(-4px)} .topic-card-inner{padding:22px 22px 24px;position:relative} .topic-card-preview{filter:blur(6px) saturate(.7);opacity:.55;transition:filter .25s ease,opacity .25s ease;pointer-events:none;user-select:none} .topic-card.recommended .topic-card-preview{filter:blur(0px) saturate(1);opacity:1} .topic-card-title{font-size:22px;font-weight:700;margin-bottom:6px;position:relative;z-index:2} .topic-card-sub{font-size:13px;color:var(--text-muted);font-family:var(--font-body);margin-bottom:14px;position:relative;z-index:2} .topic-card-track{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px;border:1.5px solid var(--ink);font-family:var(--font-display);position:relative;z-index:2} .topic-card-badge{position:absolute;top:14px;right:14px;font-family:var(--font-display);font-size:12px;font-weight:700;background:var(--p-yellow);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;transform:rotate(4deg);z-index:3} .topic-card-check{position:absolute;bottom:14px;right:18px;font-size:22px;z-index:3} .topic-card::before{display:none} .topic-card-tap{font-size:12.5px;color:var(--text-muted);font-family:var(--font-body);position:relative;z-index:2;margin-top:6px} .preview-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:6px} .preview-row{height:9px;border-radius:5px;background:currentColor;opacity:.35} .preview-row.short{width:55%} .preview-row.med{width:80%} .preview-grid{display:flex;gap:6px;margin-top:4px} .preview-chip{width:34px;height:34px;border-radius:8px;background:currentColor;opacity:.3} /* ===================== Two-track arena cards ===================== */ .topic-grid.tracks{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){.topic-grid.tracks{grid-template-columns:1fr}} .tc2{padding:0 !important;overflow:hidden;border-radius:inherit} /* THE CORNERS THAT GO SQUARE ON HOVER. The band and the body are the two things that paint a background right out to the card's edge, and both were border-radius:0 — rounded only by .track-card-content's own `overflow:hidden`. That clip stops being applied the moment an ancestor gets a transform, which is exactly what `.track-card:hover{transform:translateY(-5px)}` does. So the card was round at rest and square under the pointer. This is a second-order effect of the mascot fix: .track-card is `overflow:visible` on purpose now, so the doodle guy can lean out of the card, which leaves the inner clip as the only thing rounding anything. Rounding these two directly does not depend on a clip surviving compositing, so it holds in every state. Radius matches the card's inner edge: --radius-lg minus the 2.5px border, same as .track-card-content. */ .tc2-band{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 14px;border-bottom:2.5px solid var(--primary-navy);min-height:104px;border-radius:calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0} .tc-mastery{margin:10px 0 2px} .tcm-row{display:flex;align-items:center;gap:8px;margin-bottom:6px} .tcm-label{font-family:'JetBrains Mono',monospace;font-size:0.58rem;font-weight:800;color:var(--ink-muted);width:38px;letter-spacing:.04em} .tcm-track{flex:1;height:9px;border:1.5px solid var(--primary-navy);border-radius:999px;overflow:hidden;background:var(--paper)} .tcm-fill{height:100%;border-radius:999px;transition:width .5s var(--ease-pop,ease)} .tcm-pct{font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:800;color:var(--primary-navy);width:34px;text-align:right} .tc2-doodles{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:.85} /* the scenery drifts, slowly, so the card is alive without being busy */ .tcd-drift{transform-box:view-box;transform-origin:center;animation:tcdDrift 9s ease-in-out infinite} @keyframes tcdDrift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-5px,4px) rotate(-1.5deg)}} .track-card:hover .tcd-drift{animation-duration:3.6s} .tc2-head{position:relative;z-index:1} .tc2-body{background:var(--paper);padding:16px 22px 20px;border-radius:0 0 calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px)} /* NO overflow:hidden here. This box gets `rotate(-4deg) scale(1.06)` on card hover, and a rotated clip rectangle is still a RECTANGLE — so hovering the card sliced a hard diagonal square edge straight through the doodle, which is the "when you hover IT IS STILL a square" complaint. The guy's own SVG already carries overflow:visible so his hat can rise above the box; the clip was fighting that and losing. Nothing needs clipping here — the card itself is overflow:visible and the mascot is sized to fit. */ .tc-mascot{position:relative;z-index:2;flex-shrink:0;display:flex;align-items:flex-start;height:110px;width:85px;justify-content:center;overflow:visible;padding-top:2px;cursor:pointer;transition:transform .25s var(--ease-pop)} /* Two tracks, two personalities. They used to share one bob with a 1.6s delay, which is the same animation twice and reads as a template. The SHSAT guy wears a graduation cap, so he takes a proud little bow; the State Test guy wears a propeller hat, so he hovers and tips like something actually being lifted. */ .tc-mascot svg{animation:mascotBob 3.4s ease-in-out infinite;transform-origin:50% 90%} .tc-shsat .tc-mascot svg{animation:mascotBow 4.2s ease-in-out infinite} .tc-state .tc-mascot svg{animation:mascotHover 2.6s ease-in-out infinite} @keyframes mascotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @keyframes mascotBow{ 0%,62%,100%{transform:translateY(0) rotate(0)} 70%{transform:translateY(3px) rotate(-9deg)} 78%{transform:translateY(3px) rotate(-9deg)} 88%{transform:translateY(-2px) rotate(2deg)} } @keyframes mascotHover{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} } /* the propeller itself spins, because it is a propeller */ .tc-state .tc-mascot svg [class*="hat"],.tc-state .tc-mascot svg g[data-hat]{ transform-box:fill-box;transform-origin:center;animation:propSpin 1.1s linear infinite} @keyframes propSpin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ .tc-mascot svg,.tcd-drift,.tc-shsat .tc-mascot svg,.tc-state .tc-mascot svg{animation:none} } /* blinking — the guys are alive */ .g-eye{transform-box:fill-box;transform-origin:center;animation:guyBlink 4.6s ease-in-out infinite} @keyframes guyBlink{0%,93.5%,100%{transform:scaleY(1)}95.5%,97%{transform:scaleY(0.08)}} .track-card:hover .tc-mascot{transform:rotate(-4deg) translateY(-4px) scale(1.06)} .track-card-sub{margin-top:10px} .tc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .tc-chip{display:inline-flex;align-items:center;gap:5px;background:var(--paper);border:2px solid var(--primary-navy);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;font-family:var(--font-body);box-shadow:2px 2px 0 var(--primary-navy)} @keyframes skitOrbit{0%{transform:rotate(0) translateX(16px)}100%{transform:rotate(360deg) translateX(16px)}} @keyframes skitFlip{0%{transform:rotate(0) translateY(-40px)}100%{transform:rotate(360deg) translateY(0)}} @keyframes skitSplash{0%{transform:scale(.3);opacity:1}70%{transform:scale(1.15);opacity:1}100%{transform:scale(1.3);opacity:0}} @keyframes skitPuff{0%{transform:translateX(0);opacity:0}15%{opacity:1}100%{transform:translateX(-26px) translateY(-14px);opacity:0}} @keyframes eggFall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(320deg)}} @keyframes eggSpin{0%{transform:rotate(0) scale(1)}60%{transform:rotate(340deg) scale(1.25)}100%{transform:rotate(360deg) scale(1)}} @keyframes eggDance{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-11deg) translateY(-5px)}75%{transform:rotate(11deg) translateY(-3px)}} @keyframes eggWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-3deg) scale(1.04)}75%{transform:rotate(3deg) scale(1.04)}} .tc-go{position:absolute;right:18px;bottom:12px;font-size:26px;color:var(--primary-navy);opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .25s var(--ease-pop)} .track-card:hover .tc-go{opacity:.85;transform:translateX(0)} .track-card-content{position:relative} .track-card{position:relative;border:2.5px solid var(--primary-navy);border-radius:var(--radius-lg);overflow:visible;cursor:pointer;background:var(--paper);box-shadow:4px 4px 0 var(--primary-navy);min-height:240px;transition:transform .18s var(--ease-pop),box-shadow .18s var(--ease-pop);animation:cardIn .45s var(--ease-pop) backwards} .track-card:nth-child(2){animation-delay:.09s} .track-card:nth-child(3){animation-delay:.18s} @keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} /* Both track cards carry real colour — the SHSAT card used to be so close to white it read as unstyled next to the tinted State Test card. */ .track-card:nth-child(1){background:linear-gradient(135deg,#FEF3C7 0%,#FFFBEB 65%)} .track-card:nth-child(2){background:linear-gradient(135deg,#FDF0CE 0%,#FFF8E7 65%)} /* dark equivalents so the (now light) card text stays readable */ :root[data-theme="dark"] .track-card:nth-child(1){background:linear-gradient(135deg,#2A2118 0%,#1D2740 60%)} :root[data-theme="dark"] .track-card:nth-child(2){background:linear-gradient(135deg,#1B2440 0%,#1D2740 60%)} .track-card:hover{transform:translateY(-5px);box-shadow:5px 8px 0 var(--primary-navy)} /* The inner panel used to be a flat 16px inside a 24px card, so its corners sat OUTSIDE the card's curve — a square edge poking out of every rounded corner. An inner radius has to be the outer one minus the border, never a round number picked separately. */ .track-card-content{border-radius:calc(var(--radius-lg) - 3px);overflow:hidden;height:100%;padding:22px;transition:filter .3s ease;position:relative} .track-card:hover .track-card-content,.track-card.recommended .track-card-content{} .track-card-emoji{font-size:32px;margin-bottom:8px} .track-card-title{font-size:22px;font-weight:700;margin-bottom:6px} .track-card-sub{font-size:13px;color:var(--text-muted);font-family:var(--font-body);margin-bottom:12px;max-width:380px} .track-card-tag{display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;border:1.5px solid var(--ink);font-family:var(--font-display)} .track-card-tap{position:absolute;bottom:18px;left:22px;font-size:12px;color:var(--text-muted);font-family:var(--font-body)} .track-card.recommended{animation:pulseDoodle 2.2s ease-in-out infinite} @keyframes npSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes slideUp{from{transform:translateX(-50%) translateY(30px);opacity:0}to{transform:translateX(-50%) translateY(0);opacity:1}} .np-spin{display:inline-block;animation:npSpin 1.2s linear infinite} .ams-load-guy{animation:amsLoadBob 1s ease-in-out infinite} @keyframes amsLoadBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}} .ams-load-tips span{position:absolute;left:0;right:0;opacity:0;animation:amsTipCycle 8s linear infinite} .ams-load-tips span:nth-child(2){animation-delay:2s} .ams-load-tips span:nth-child(3){animation-delay:4s} .ams-load-tips span:nth-child(4){animation-delay:6s} @keyframes amsTipCycle{0%{opacity:0;transform:translateY(4px)}4%{opacity:1;transform:translateY(0)}23%{opacity:1}27%{opacity:0;transform:translateY(-4px)}100%{opacity:0}} /* ---- Fun loader (AI waits) ---- */ .ams-funload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:26px 16px;text-align:center;min-height:180px} .ams-funload-stage{position:relative;width:120px;height:96px;display:flex;align-items:flex-end;justify-content:center} .ams-funload-guy{width:70px;line-height:0;animation:amsLoadBob 1.1s ease-in-out infinite;filter:drop-shadow(2px 4px 0 rgba(26,43,76,.14))} .ams-funload-doodles{position:absolute;inset:0;pointer-events:none} .ams-funload-doodles span{position:absolute;font-size:18px;opacity:0;animation:amsDoodleFloat 3.2s ease-in-out infinite} .ams-funload-doodles span:nth-child(1){left:4px;top:20px;animation-delay:0s} .ams-funload-doodles span:nth-child(2){right:6px;top:6px;animation-delay:.8s} .ams-funload-doodles span:nth-child(3){left:14px;top:2px;animation-delay:1.6s} .ams-funload-doodles span:nth-child(4){right:12px;top:34px;animation-delay:2.4s} @keyframes amsDoodleFloat{0%{opacity:0;transform:translateY(6px) rotate(-8deg) scale(.7)}30%{opacity:1;transform:translateY(-4px) rotate(6deg) scale(1)}70%{opacity:1;transform:translateY(-10px) rotate(-4deg)}100%{opacity:0;transform:translateY(-20px) rotate(8deg) scale(.8)}} .ams-funload-tips{position:relative;height:20px;width:100%;max-width:280px;font-family:var(--font-display);font-size:1rem;color:var(--primary-navy);font-weight:700} .ams-funload-tips span{position:absolute;left:0;right:0;opacity:0;animation:amsTipCycle 10s linear infinite} .ams-funload-tips span:nth-child(2){animation-delay:2s}.ams-funload-tips span:nth-child(3){animation-delay:4s} .ams-funload-tips span:nth-child(4){animation-delay:6s}.ams-funload-tips span:nth-child(5){animation-delay:8s} .ams-funload-bar{width:180px;max-width:70%;height:10px;border:2px solid var(--primary-navy);border-radius:999px;overflow:hidden;background:var(--paper)} .ams-funload-bar i{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--accent-mustard),#FBBF24);animation:amsBarSlide 1.4s ease-in-out infinite} @keyframes amsBarSlide{0%{margin-left:-42%}100%{margin-left:102%}} .widget-card:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:8px 10px 0 var(--primary-navy)!important} .widget-card{transition:transform .2s ease,box-shadow .2s ease} .btn-doodle:active{transform:scale(0.96)} .sub-map-card:active{transform:scale(0.98)!important} .feature-map-card:active{transform:scale(0.97)!important} @keyframes pulseDoodle{0%,100%{box-shadow:5px 5px 0 var(--ink),0 0 0 0 rgba(67,56,202,.35)}50%{box-shadow:5px 5px 0 var(--ink),0 0 0 10px rgba(67,56,202,0)}} .track-card-badge{position:absolute;top:-12px;left:20px;font-family:var(--font-display);font-size:11px;font-weight:700;background:var(--p-yellow);border:2px solid var(--primary-navy);border-radius:999px;padding:3px 12px;transform:none;z-index:6;box-shadow:2px 2px 0 var(--primary-navy)} /* Floating hover preview */ .track-preview{position:absolute;top:-14px;right:-14px;transform:translateY(-100%);background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:12px 16px;box-shadow:4px 4px 0 var(--ink);font-size:13px;font-family:var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:10} .track-card:hover .track-preview{opacity:1;transform:translateY(-110%)} .track-preview .tp-row{display:flex;align-items:center;gap:6px;margin-bottom:3px} .track-preview .tp-row:last-child{margin-bottom:0} /* ===================== Focus Mode ===================== */ .focus-overlay{position:fixed;inset:0;background:var(--bg);z-index:200;overflow-y:auto;display:none} .focus-overlay.open{display:block} .focus-bar{position:sticky;top:0;background:var(--bg-cream);backdrop-filter:blur(10px);border-bottom:var(--border-ink);padding:14px 28px;display:flex;align-items:center;justify-content:center;justify-content:space-between;z-index:5} .focus-bar h2{font-size:22px} .focus-body{max-width:1100px;margin:0 auto;padding:28px} /* Panels reused from workspace */ .panel{border:var(--border-ink);border-radius:var(--radius);background:var(--paper);overflow:hidden;box-shadow:var(--shadow-navy)} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--bg-soft);flex-wrap:wrap;gap:8px} .panel-head h3{font-size:14px;font-weight:700;font-family:var(--font-body)} .panel-body{padding:18px} .workspace-grid{display:flex;gap:24px;align-items:stretch} .workspace-col{flex:1 1 50%;min-width:0;display:flex;flex-direction:column;gap:16px} @media(max-width:920px){.workspace-grid{flex-direction:column}} .tabs{display:flex;gap:6px} .tab{border:1px solid var(--border);background:var(--bg);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:700;color:var(--text-muted);transition:all .15s;font-family:var(--font-body)} .tab:hover{color:var(--text);border-color:#cbd5e1} .tab.active{background:var(--text);color:#fff;border-color:var(--text)} .state-subnav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px} .state-grade-pill{font-family:var(--font-display);font-size:14px;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:6px 14px;background:var(--p-blue)} .passage-text{font-size:14.5px;color:var(--text);white-space:pre-line;font-family:var(--font-body)} .passage-text .lede{font-weight:700;display:block;margin-bottom:8px;font-size:15px} .passage-meta{display:flex;gap:14px;font-size:12px;color:var(--text-muted);margin-bottom:14px;font-family:'JetBrains Mono',monospace} .prompt-text{font-size:14.5px;margin-bottom:16px;font-family:var(--font-body);white-space:pre-line} .mcq{display:flex;flex-direction:column;gap:10px} .mcq-option{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;font-weight:500;background:var(--bg);text-align:left;width:100%;color:var(--text);transition:all .15s;min-height:44px;font-family:var(--font-body)} .mcq-option:hover{border-color:var(--accent-primary);background:var(--accent-primary-soft)} .essay-textarea{width:100%;min-height:320px;resize:vertical;border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;font-family:var(--font-body);font-size:14.5px;color:var(--text);background:var(--bg)} .essay-textarea:focus{outline:2px solid var(--accent-primary);outline-offset:1px} .essay-textarea::placeholder{color:#94A3B8} .essay-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace} .grammar-tag{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);overflow:hidden;margin-bottom:10px;font-family:var(--font-body)} .grammar-tag:last-child{margin-bottom:0} .grammar-tag-head{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap} .grammar-tag-head .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .grammar-tag-head .dot.spell{background:#EF4444} .grammar-tag-head .dot.grammar{background:#F59E0B} .grammar-tag-head .dot.style{background:#3B82F6} .grammar-tag-head .flag-text{flex:1;font-size:13px;min-width:160px} .grammar-tag-head .flag-text .found{font-family:'JetBrains Mono',monospace;background:var(--bg-soft);padding:1px 5px;border-radius:4px;border:1px solid var(--border)} .grammar-tag-head .flag-text .arrow{color:var(--text-muted);margin:0 4px} .grammar-tag-head .flag-text .suggest{font-family:'JetBrains Mono',monospace;background:var(--accent-basic-soft);color:var(--accent-basic);padding:1px 5px;border-radius:4px;border:1px solid #A7F3D0} .explain-toggle{font-size:12px;font-weight:700;color:var(--accent-primary);border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:6px 9px;flex-shrink:0;min-width:44px;min-height:28px;font-family:var(--font-body)} .ignore-btn{font-size:12px;font-weight:600;color:var(--text-muted);border:1px solid var(--border);background:var(--bg-soft);border-radius:6px;padding:6px 9px;flex-shrink:0;font-family:var(--font-body)} .grammar-explain{display:none;padding:10px 14px 14px 32px;font-size:12.5px;color:var(--text-muted);border-top:1px solid var(--border);background:var(--bg-soft);line-height:1.6;font-family:var(--font-body)} .grammar-tag.open .grammar-explain{display:block} .grammar-empty{font-size:13px;color:var(--text-muted);padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg-soft);font-family:var(--font-body)} .grammar-tools-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px;flex-wrap:wrap} .usage-pill{font-size:11.5px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:4px 10px;background:var(--bg-soft)} /* Flashcards */ .flashcard{width:100%;max-width:480px;height:320px;border:var(--border-ink);border-radius:var(--radius-lg);background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;position:relative;margin:0 auto;cursor:pointer;box-shadow:var(--shadow-navy);transition:transform .15s var(--ease-pop),box-shadow .15s var(--ease-pop);user-select:none} .flashcard:active{transform:scale(.98);box-shadow:3px 3px 0 var(--ink)} .flashcard .word{font-size:40px;font-weight:700;margin-bottom:8px;font-family:var(--font-display)} .flashcard .pos{font-size:14px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:16px} .flashcard .def{font-size:19px;color:var(--text);font-family:var(--font-body);line-height:1.55} .flashcard .flip-hint{position:absolute;bottom:14px;font-size:12px;color:#94A3B8;font-family:'JetBrains Mono',monospace} .flashcard.flip-anim{animation:cardFlip .28s ease} @keyframes cardFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}} .flashcard.swipe-right{animation:swipeRight .3s ease forwards} .flashcard.swipe-left{animation:swipeLeft .3s ease forwards} @keyframes swipeRight{to{transform:translateX(120%) rotate(12deg);opacity:0}} @keyframes swipeLeft{to{transform:translateX(-120%) rotate(-12deg);opacity:0}} /* Slider config panel */ .deck-config{max-width:460px;margin:0 auto;border:var(--border-ink);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-navy);background:var(--paper)} .deck-config h3{font-size:22px;margin-bottom:6px} .deck-config p{font-size:13.5px;color:var(--text-muted);margin-bottom:20px;font-family:var(--font-body)} .slider-row{display:flex;align-items:center;gap:14px;margin-bottom:16px} .slider-tier{width:80px;flex-shrink:0} .slider-tier .tier-label{font-size:12px;font-weight:700;font-family:var(--font-display);margin-bottom:4px} .slider-tier .tier-badge{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:2px 8px;font-size:11px;font-family:var(--font-display)} .tier-easy .tier-badge{background:var(--accent-basic-soft);color:var(--accent-basic)} .tier-medium .tier-badge{background:var(--accent-primary-soft);color:var(--accent-primary)} .tier-hard .tier-badge{background:var(--accent-exam-soft);color:var(--accent-exam)} .slider-track{flex:1;display:flex;flex-direction:column;gap:4px} input[type=range]{width:100%;accent-color:var(--accent-primary);height:4px;cursor:pointer} .slider-count{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;min-width:28px;text-align:right;color:var(--text)} .deck-total{font-size:13px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-top:4px;margin-bottom:18px} .deck-total b{color:var(--text)} /* Flashcard arena */ .fc-arena{max-width:460px;margin:0 auto;text-align:center} .fc-tier-bar{display:flex;gap:6px;justify-content:center;margin-bottom:16px;flex-wrap:wrap} .fc-tier-chip{font-size:11.5px;font-weight:700;font-family:var(--font-display);border:1.5px solid var(--border);border-radius:999px;padding:4px 12px} .fc-tier-chip.active{border-color:var(--ink);background:var(--p-yellow)} .fc-micro{font-size:14px;font-weight:700;font-family:var(--font-display);color:var(--accent-primary);min-height:22px;margin-bottom:10px;transition:opacity .3s ease} .fc-card-wrap{position:relative;min-height:340px;display:flex;align-items:center;justify-content:center;margin-bottom:14px} .fc-swipe-hint{font-size:12px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:10px} .fc-swipe-btns{display:flex;justify-content:center;gap:12px;margin-bottom:14px} .fc-swipe-btn{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font-size:20px;box-shadow:3px 3px 0 var(--ink);transition:transform .1s ease} .fc-swipe-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} .fc-progress-row{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:4px} .fc-progress-bar{flex:1;max-width:220px;height:6px;background:var(--border);border-radius:3px;overflow:hidden} .fc-progress-fill{height:100%;background:var(--accent-primary);border-radius:3px;transition:width .3s ease} .fc-progress-label{font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-muted)} .vocab-nav{display:flex;justify-content:center;gap:12px;margin-top:18px} .vocab-progress{text-align:center;font-size:12.5px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-top:10px} /* Quiz (SHSAT + Math drills) */ .quiz-shell{max-width:640px;margin:0 auto} .quiz-alert{display:none;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:14px;font-size:13px;font-weight:700;font-family:var(--font-body)} .quiz-alert.up{background:var(--accent-basic-soft);color:var(--accent-basic);border:1px solid #A7F3D0;display:flex} .quiz-alert.down{background:#FEF2F2;color:#EF4444;border:1px solid #FECACA;display:flex} .quiz-meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:8px} .quiz-progress{display:flex;gap:5px} .quiz-progress .bubble{width:13px;height:13px;border:2px solid var(--primary-navy);background:var(--paper)} .quiz-progress .bubble.filled{border-color:var(--primary-navy);background:var(--primary-navy)} .phase-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;font-family:var(--font-body)} .phase-chip{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;border:2px solid var(--border);background:var(--bg);color:var(--text-muted);transition:all .25s} .phase-chip.active{border-color:var(--accent-primary);background:var(--accent-primary-soft);color:var(--accent-primary);box-shadow:2px 2px 0 var(--accent-primary)} .phase-arrow{font-size:14px;color:var(--text-muted)} .phase-counter{margin-left:auto;font-size:12px;font-family:'JetBrains Mono',monospace;color:var(--text-muted)} .difficulty-pill{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 11px;border-radius:999px;border:1px solid var(--border);font-family:var(--font-body)} .difficulty-pill.easy{background:var(--accent-basic-soft);color:var(--accent-basic);border-color:#A7F3D0} .difficulty-pill.medium{background:var(--accent-primary-soft);color:var(--accent-primary);border-color:#C7D2FE} .difficulty-pill.hard{background:var(--accent-exam-soft);color:var(--accent-exam);border-color:#FED7AA} .quiz-card{border:var(--border-ink);border-radius:var(--radius);background:var(--paper);padding:24px;box-shadow:var(--shadow-navy)} .quiz-card .qsubject{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:8px;font-family:'JetBrains Mono',monospace} .quiz-card .qtext{font-size:16px;font-weight:600;margin-bottom:18px;line-height:1.5;font-family:var(--font-body)} .quiz-choices{display:flex;flex-direction:column;gap:10px;margin-bottom:20px} .quiz-choice{display:flex;align-items:center;gap:12px;border:var(--border-ink);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;font-weight:500;text-align:left;background:var(--paper);color:var(--text);width:100%;min-height:44px;transition:all .15s;font-family:var(--font-body)} .quiz-choice:hover{border-color:var(--accent-primary);background:var(--accent-primary-soft)} .quiz-choice .choice-letter{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace;color:var(--text-muted)} .quiz-choice.selected{border-color:var(--accent-primary);background:var(--accent-primary-soft)} .quiz-choice.selected .choice-letter{background:var(--accent-primary);color:#fff;border-color:var(--accent-primary)} .quiz-choice.locked{pointer-events:none;opacity:.55} .quiz-choice.correct{border-color:var(--accent-basic);background:var(--accent-basic-soft)} .quiz-choice.correct .choice-letter{background:var(--accent-basic);color:#fff;border-color:var(--accent-basic)} .quiz-choice.incorrect{border-color:#EF4444;background:#FEF2F2} .quiz-choice.incorrect .choice-letter{background:#EF4444;color:#fff;border-color:#EF4444} .quiz-result{text-align:center;padding:8px} .quiz-result .score-big{font-size:42px;font-weight:700;font-family:var(--font-display)} .quiz-result .score-label{font-size:13px;color:var(--text-muted);margin-bottom:18px;font-family:var(--font-body)} /* Welcome landing page */ #welcomePage{position:fixed;inset:0;z-index:500;background:var(--bg-cream);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;overflow-y:auto} #welcomePage.hidden{display:none} .welcome-guys{display:flex;gap:10px;justify-content:center;align-items:flex-end;margin-bottom:24px} @media(max-width:440px){.welcome-guys{transform:scale(0.75);transform-origin:center bottom;margin-bottom:8px}} .welcome-guys .wg{filter:drop-shadow(2px 3px 0 rgba(26,43,76,.12));transition:transform .3s var(--ease-pop)} .welcome-guys .wg:nth-child(2){transform:translateY(-10px)} .welcome-guys .wg:hover{transform:scale(1.12) translateY(-6px)} .welcome-title{font-family:var(--font-display);font-size:clamp(32px,6vw,52px);color:var(--primary-navy);margin:0 0 8px;line-height:1.15} .welcome-sub{font-family:var(--font-body);font-size:clamp(14px,2.2vw,18px);color:var(--ink-muted);max-width:460px;margin:0 auto 32px;line-height:1.6} .welcome-btns{display:flex;flex-direction:column;gap:12px;width:100%;max-width:340px} .welcome-btns .btn-welcome{width:100%;padding:16px 24px;font-size:16px;font-weight:800;border-radius:var(--radius-md);border:2.5px solid var(--primary-navy);cursor:pointer;transition:all .15s;font-family:var(--font-body)} .welcome-btns .btn-welcome:hover{transform:translateY(-2px)} .welcome-btns .btn-welcome.primary{background:var(--primary-navy);color:var(--bg-cream);box-shadow:4px 4px 0 var(--accent-mustard)} .welcome-btns .btn-welcome.secondary{background:var(--paper);color:var(--primary-navy);box-shadow:4px 4px 0 var(--primary-navy)} .welcome-btns .btn-welcome.ghost{background:transparent;border:2px dashed var(--ink-muted);color:var(--ink-muted);box-shadow:none;font-size:14px;font-weight:600;padding:12px 24px} .welcome-footer{margin-top:28px;font-size:12px;color:var(--ink-muted);font-family:var(--font-body)} .welcome-disclaimer{margin:14px auto 0;max-width:520px;font-size:11px;line-height:1.6;color:var(--ink-muted);font-family:var(--font-body);opacity:.9} .welcome-disclaimer strong{font-weight:700;color:var(--primary-navy);opacity:.85} /* Try-6 entry: a real square sticky-note taped to the side of the welcome card */ .demo-postit{position:absolute;top:calc(50% - 86px);right:max(20px,5vw);width:172px;height:172px;background:linear-gradient(160deg,#FFF6A0 0%,#FFE95C 100%);border:2.5px solid var(--primary-navy);border-radius:14px 5px 26px 6px/5px 16px 6px 20px;box-shadow:4px 5px 0 rgba(26,43,76,.25),8px 11px 16px rgba(26,43,76,.14);transform:rotate(4deg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:24px 12px 18px;transition:transform .18s var(--ease-pop,ease),box-shadow .18s;z-index:6} .demo-postit::after{content:'';position:absolute;bottom:-2px;right:-2px;width:36px;height:36px;background:linear-gradient(135deg,rgba(0,0,0,.12),rgba(0,0,0,.02) 60%);border-left:2px solid rgba(26,43,76,.35);border-top:2px solid rgba(26,43,76,.35);border-radius:2px 3px 24px 2px} .demo-postit::before{content:'';position:absolute;inset:5px;border:1.5px dashed rgba(26,43,76,.22);border-radius:10px 4px 20px 5px/4px 12px 5px 16px;pointer-events:none} .demo-postit:hover{transform:rotate(1.5deg) translateY(-5px) scale(1.05);box-shadow:5px 7px 0 rgba(26,43,76,.25),10px 15px 22px rgba(26,43,76,.2)} .demo-postit:active{transform:rotate(4deg) scale(.97)} .demo-tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);width:78px;height:26px;background:rgba(255,255,255,.55);border:1.5px solid rgba(26,43,76,.28);box-shadow:0 1px 3px rgba(0,0,0,.12);border-radius:2px} .demo-pt-doodle{position:absolute;top:-46px;right:14px;width:44px;height:44px;line-height:0;transform:rotate(6deg);filter:drop-shadow(1px 2px 0 rgba(26,43,76,.15));pointer-events:none} .demo-pt-title{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--primary-navy);line-height:1.04;text-align:center;position:relative;z-index:1} .demo-pt-sub{font-family:var(--font-body);font-size:11px;font-weight:700;color:var(--accent-rust,#D95D39);letter-spacing:.01em;text-align:center;position:relative;z-index:1} .demo-pt-arrow{position:absolute;bottom:4px;right:38px;font-size:19px;color:var(--primary-navy);opacity:.55;transform:rotate(8deg)} @media(max-width:860px){.demo-postit{position:static;margin:34px auto 2px;transform:rotate(-2.5deg);width:164px;height:164px}.demo-pt-doodle{top:-44px}} @keyframes spin{to{transform:rotate(360deg)}} /* ---- Welcome hero + below-the-fold sections ---- */ #welcomePage{justify-content:flex-start} .welcome-hero{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box} .welcome-scrollcue{margin-top:22px;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px;opacity:.85} .welcome-scrollcue span{display:inline-block;animation:wBounce 1.6s ease-in-out infinite;font-size:16px} @keyframes wBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} .welcome-sections{width:100%;max-width:960px;margin:0 auto;padding:10px 18px 70px;box-sizing:border-box} .wsec{text-align:center;padding:44px 0 12px;border-top:2px dashed var(--ink-soft)} .wsec-badge{display:inline-block;background:var(--p-blue,#EAF3FF);border:2px solid var(--primary-navy);border-radius:999px;padding:4px 14px;font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;letter-spacing:.03em;color:var(--primary-navy);margin-bottom:12px} .wsec-badge.alt{background:#FFE4EC;border-color:#BE185D;color:#9D174D} .wsec-h{font-family:var(--font-display);font-size:clamp(24px,4.4vw,36px);color:var(--primary-navy);margin:0 0 8px;line-height:1.15} .wsec-h u{text-decoration-color:var(--accent-mustard);text-decoration-thickness:3px} .wsec-sub{font-family:var(--font-body);font-size:15px;color:var(--ink-muted);max-width:560px;margin:0 auto 8px;line-height:1.6} .wtool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px} .wtool{background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:18px;box-shadow:4px 4px 0 var(--primary-navy);padding:14px;text-align:left} /* These mini-screens deliberately imitate the real (white) test viewer, so in dark mode they keep the white paper and dark ink — flipping them would stop them looking like the actual exam, and light-on-white is unreadable anyway. */ :root[data-theme="dark"] .wtool-demo, :root[data-theme="dark"] .wtool-demo *, :root[data-theme="dark"] .wt-ch, :root[data-theme="dark"] .wt-zoomtxt, :root[data-theme="dark"] .wt-zbtn{ color:var(--fixed-ink); border-color:var(--fixed-ink); } /* --fixed-ink, NOT --ink: this text sits on the white mock test screen, so it must stay dark in both themes. */ :root[data-theme="dark"] .wt-lines{ color:var(--fixed-ink); } .wtool-demo{height:92px;border:2px solid var(--primary-navy);border-radius:12px;background:var(--paper);overflow:hidden;position:relative;margin-bottom:10px} .wtool-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--primary-navy)} .wtool-desc{font-family:var(--font-body);font-size:12px;color:var(--ink-muted);line-height:1.4;margin-top:2px} /* highlighter demo */ .wt-lines{padding:14px 12px;font-family:'DM Sans',sans-serif;font-size:12.5px;color:var(--ink);line-height:1.9} .wt-line{position:relative;display:block;white-space:nowrap} .wt-hl{position:absolute;left:-4px;top:1px;bottom:1px;width:0;background:rgba(244,196,48,.6);border-radius:3px;animation:wHl 3s ease-in-out infinite} @keyframes wHl{0%,10%{width:0}45%,100%{width:calc(100% + 8px)}} /* eliminator demo */ .wt-choices{display:flex;gap:8px;align-items:center;justify-content:center;height:100%} .wt-ch{width:34px;height:34px;border:2px solid var(--primary-navy);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Patrick Hand',cursive;font-weight:700;font-size:16px;color:var(--primary-navy);position:relative;background:var(--paper)} .wt-strike::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:2.5px;background:#E11D48;transform:scaleX(0);transform-origin:left;animation:wStrike 3s ease-in-out infinite} .wt-strike2::after{animation-delay:.5s} @keyframes wStrike{0%,20%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}} /* line reader demo */ .wt-reader{position:relative;padding:12px 12px 0;height:100%} .wt-rline{display:block;height:5px;border-radius:3px;background:#CBD5E1;margin-bottom:8px} .wt-rline:nth-child(2){width:88%}.wt-rline:nth-child(3){width:94%}.wt-rline:nth-child(4){width:80%} .wt-rwindow{position:absolute;left:6px;right:6px;height:15px;border-top:2.5px solid #eab308;border-bottom:2.5px solid #eab308;background:rgba(234,179,8,.12);top:8px;animation:wReader 3.4s ease-in-out infinite} @keyframes wReader{0%,100%{top:8px}50%{top:52px}} /* zoom + flag demo */ .wt-zoom{display:flex;align-items:center;justify-content:center;gap:8px;height:100%} .wt-zoomtxt{font-family:'Patrick Hand',cursive;font-weight:700;color:var(--primary-navy);animation:wZoom 3s ease-in-out infinite} @keyframes wZoom{0%,100%{font-size:18px}50%{font-size:30px}} .wt-zbtn{width:26px;height:26px;border:2px solid var(--primary-navy);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--primary-navy);background:var(--paper)} .wt-flag{font-size:11px;font-weight:800;color:#B45309;background:#FEF3C7;border:1.5px solid #B45309;border-radius:6px;padding:2px 6px;animation:wFlag 3s ease-in-out infinite} @keyframes wFlag{0%,60%{opacity:.35}70%,100%{opacity:1}} /* parent trust */ /* The pink wash is a hardcoded LIGHT gradient — in dark mode it has to become a dark wash, otherwise the (now light) text sits on a light background. */ .wsec-parents{background:linear-gradient(180deg,#FFF7FB,transparent);border-radius:22px;margin-top:20px;padding:40px 16px 24px} :root[data-theme="dark"] .wsec-parents{background:linear-gradient(180deg,#2A1D2B,transparent)} :root[data-theme="dark"] .wsec-badge.alt{background:#3B1B2A;border-color:#F472B6;color:#FBCFE8} /* Surfaces that imitate the REAL test viewer stay white paper + dark ink in both themes — a student should practise in test-day conditions. */ .tt-screen,.wtool-demo,#cbtMain,.cbt-passage,.cbt-question,.cbt-q-choice{background:#fff !important} .tt-screen,.tt-screen *,.wtool-demo,.wtool-demo *, #cbtMain,#cbtMain *,.cbt-passage,.cbt-passage *, .cbt-question,.cbt-question *,.cbt-q-choice,.cbt-q-choice *{color:var(--fixed-ink)} .tt-screen,.wtool-demo{border-color:var(--fixed-ink)} :root[data-theme="dark"] .warm-card, :root[data-theme="dark"] .warm-card *, :root[data-theme="dark"] .pr-freedaily, :root[data-theme="dark"] .pr-freedaily *, :root[data-theme="dark"] .pr-buddy, :root[data-theme="dark"] .pr-buddy *{ color:var(--fixed-ink) !important; } /* ---- Feedback tab: findable, never in the way ---- A slim tab pinned to the right edge. It does not pop up, does not nag, and never appears during an exam (the CBT engine hides it). */ /* One small round button in the bottom-right corner. It opens Settings — appearance, text size, accessibility and "send feedback" all live in there, and it works before you ever sign in. Hidden during an exam. */ .ams-fab{position:fixed;right:16px;bottom:16px;z-index:5100; width:46px;height:46px;border-radius:50%; background:var(--paper);color:var(--primary-navy); border:2.5px solid var(--primary-navy);box-shadow:3px 3px 0 var(--primary-navy); cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform .12s ease,box-shadow .12s ease} .ams-fab:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--primary-navy)} .ams-fab:focus-visible{outline:3px solid var(--accent-amber);outline-offset:2px} /* ONE settings gear at a time. [G14 = findings #20 + #21] There were two on screen simultaneously — #navSettingsBtn in the header and this floating one — both opening the same panel. And because this one is fixed at z-index 5100 it also sat on top of whatever occupied the bottom-right corner: answer choice B in the Quick 6 demo, the "Keep exploring first" CTA on its results screen, the scrim of the open nav drawer, and the play area of the arcade games. Hidden by default now, because the header gear is right there and is the one in the place people look. It appears only while a full-screen overlay has COVERED the header — the single case where the header gear cannot be reached. See amsWatchOverlayChrome() in account.js, which deliberately does NOT count the Quick 6 demo: that is a short flow with no need for Settings, and the floating gear landing on answer choice B was the original complaint. z-index 5300 while shown, because .arc-overlay is 5200 — at the old 5100 the gear was rendered but sat UNDERNEATH the Practice Hub, so Settings (text size, high contrast, easy-read font) was simply unreachable in the place a child spends most of their time. Unreachable accessibility controls beat a corner overlap. */ .ams-fab{display:none} body.ams-overlay .ams-fab{display:flex;z-index:5300} body.cbt-active .ams-fab{display:none} @media print{.ams-fab{display:none}} /* ---- Accessibility preferences (all work signed-out, saved to the device) ---- */ :root[data-textsize="large"] body{ zoom:1.12 } :root[data-textsize="xl"] body{ zoom:1.25 } :root[data-font="readable"] body, :root[data-font="readable"] body *:not(svg):not(svg *){ font-family:Verdana,Tahoma,"Trebuchet MS",sans-serif !important; letter-spacing:.02em;word-spacing:.06em;line-height:1.62} :root[data-contrast="high"]{ --ink-muted:#1A2B4C; --text-muted:#1A2B4C; } :root[data-theme="dark"][data-contrast="high"]{ --ink-muted:#EAF0FF; --text-muted:#EAF0FF; } :root[data-contrast="high"] .stg-note{ color:var(--ink-muted) } .fb-overlay{position:fixed;inset:0;z-index:7100;background:rgba(15,23,42,.6);display:none;align-items:center;justify-content:center;padding:18px;overflow-y:auto;overscroll-behavior:contain} .fb-overlay.open{display:flex;animation:fadeIn .16s ease} .fb-card{position:relative;background:var(--paper);border:3px solid var(--primary-navy);border-radius:22px;box-shadow:8px 8px 0 var(--primary-navy);max-width:480px;width:100%;padding:22px;max-height:90vh;overflow-y:auto} .fb-x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--bg-cream);color:var(--primary-navy);font-size:14px;font-weight:800;cursor:pointer} .fb-h{font-family:var(--font-display);font-size:26px;color:var(--primary-navy);margin:0 0 3px} .fb-sub{font-family:var(--font-body);font-size:12.5px;color:var(--ink-muted);margin:0 0 14px;line-height:1.5} .fb-kinds{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px} .fb-kind{flex:1;min-width:120px;padding:9px 8px;border:2.5px solid var(--primary-navy);border-radius:11px;background:var(--bg-cream);color:var(--primary-navy);font-family:var(--font-body);font-size:12.5px;font-weight:700;cursor:pointer} .fb-kind[aria-pressed="true"]{background:var(--primary-navy);color:var(--paper)} .fb-text{width:100%;padding:12px;border:2.5px solid var(--primary-navy);border-radius:12px;font-family:var(--font-body);font-size:14px;background:var(--paper);color:var(--primary-navy);box-sizing:border-box;resize:vertical} .fb-row{margin-top:9px} .fb-email{width:100%;padding:11px 12px;border:2.5px solid var(--primary-navy);border-radius:12px;font-family:var(--font-body);font-size:13.5px;background:var(--paper);color:var(--primary-navy);box-sizing:border-box} .fb-err{color:#DC2626;font-family:var(--font-body);font-size:12.5px;min-height:17px;margin:6px 0 4px} .fb-fine{font-family:var(--font-body);font-size:11px;color:var(--ink-muted);line-height:1.5;margin:10px 0 0;text-align:center} /* ---- Family: who's studying? ---- */ .fam-overlay{position:fixed;inset:0;z-index:7000;background:var(--bg-cream);display:none;align-items:center;justify-content:center;padding:22px;overflow-y:auto;overscroll-behavior:contain} .fam-overlay.open{display:flex;animation:fadeIn .18s ease} .fam-wrap{max-width:620px;width:100%;text-align:center} .fam-h{font-family:var(--font-display);font-size:34px;color:var(--primary-navy);margin:0 0 4px} .fam-sub{font-family:var(--font-body);font-size:13.5px;color:var(--ink-muted);margin:0 0 22px} .fam-grid{display:flex;gap:16px;flex-wrap:wrap;justify-content:center} .fam-card{width:150px;background:var(--paper);border:3px solid var(--primary-navy);border-radius:20px;box-shadow:5px 5px 0 var(--primary-navy);padding:16px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;transition:transform .13s,box-shadow .13s} .fam-card:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--primary-navy)} .fam-card:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--primary-navy)} .fam-avatar{line-height:0} .fam-name{font-family:var(--font-display);font-size:19px;color:var(--primary-navy);line-height:1.1} .fam-grade{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;color:var(--ink-muted)} .fam-add{border-style:dashed;justify-content:center;min-height:150px;background:transparent} /* The parent's own profile. Same shape and weight as the children's cards — it is a person on this account, not a settings link — but in the plan colour so it reads as a different KIND of profile at a glance rather than as "the odd one out". It previously appeared as a text link under the grid. */ .fam-card-parent{background:linear-gradient(160deg,var(--accent-amber-soft,#FFF8E7),var(--paper))} .fam-card-parent .fam-grade{color:var(--accent-amber,#B45309);font-weight:700;letter-spacing:.4px} .fam-initial{display:flex;align-items:center;justify-content:center;width:62px;height:62px; border-radius:50%;background:var(--accent-amber,#B45309);color:#fff; font-family:var(--font-display,'Patrick Hand',cursive);font-size:30px;font-weight:700;line-height:1} [data-theme="dark"] .fam-card-parent{background:linear-gradient(160deg,rgba(180,83,9,.22),var(--paper))} /* ---- Setup wizard ------------------------------------------------------- One question per screen. The position indicator is not decoration: a parent who can see there are four steps and they are on the second will finish; one facing an undifferentiated wall of fields decides to do it later. */ .fam-wiz{max-width:420px;margin:0 auto;text-align:center} .wiz-top{display:flex;align-items:center;gap:10px;margin-bottom:18px} .wiz-back{background:none;border:none;font-size:30px;line-height:1;color:var(--ink-muted); cursor:pointer;padding:0 6px;font-family:var(--font-display);flex-shrink:0} .wiz-back:hover{color:var(--primary-navy)} .wiz-dots{display:flex;gap:6px;flex:1;justify-content:center} .wiz-dot{width:26px;height:5px;border-radius:99px;background:var(--border,#E7E2D8);transition:background .25s} .wiz-dot.on{background:var(--accent-amber,#B45309)} .wiz-count{font-family:var(--font-body);font-size:12px;color:var(--ink-muted);flex-shrink:0} .wiz-h{font-size:26px;margin:0 0 6px;line-height:1.2} .wiz-field{width:100%;text-align:center;font-size:17px} .wiz-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:center} .wiz-next{width:100%;padding:13px} .wiz-skip{background:none;border:none;color:var(--ink-muted);text-decoration:underline; cursor:pointer;font-family:var(--font-body);font-size:13px} .wiz-skip:hover{color:var(--primary-navy)} /* grade picker — six taps, not a dropdown */ .wiz-grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px} .wiz-grade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px; padding:14px 0;border:2.5px solid var(--primary-navy);border-radius:16px;background:var(--paper); cursor:pointer;font-family:inherit;box-shadow:3px 3px 0 var(--primary-navy);transition:transform .1s,box-shadow .1s} .wiz-grade:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--primary-navy)} .wiz-grade.on{background:var(--accent-amber,#B45309);color:#fff;box-shadow:3px 3px 0 var(--primary-navy)} .wiz-grade-n{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1} .wiz-grade-l{font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.75} /* multi-select chips */ .wiz-group{margin-top:14px;text-align:left} .wiz-group-h{display:block;font-family:var(--font-display);font-weight:700;font-size:15px; color:var(--primary-navy);margin-bottom:7px} .wiz-chips{display:flex;flex-wrap:wrap;gap:8px} .wiz-chip{padding:9px 14px;border:2px solid var(--primary-navy);border-radius:999px;background:var(--paper); font-family:var(--font-body);font-size:13.5px;color:var(--ink-main);cursor:pointer;transition:background .12s,color .12s} .wiz-chip.on{background:var(--accent-amber,#B45309);color:#fff;border-color:var(--accent-amber,#B45309)} @media(max-width:380px){ .wiz-grade-grid{gap:8px} .wiz-h{font-size:23px} } /* the student's survey, same stepper language as the parent's wizard */ .kwiz-top{display:flex;align-items:center;gap:10px;margin-bottom:14px} .kwiz-dots{display:flex;gap:6px;flex:1} .kwiz-count{font-family:var(--font-body);font-size:12px;color:var(--ink-muted);flex-shrink:0} .kwiz-nav{display:flex;align-items:center;gap:12px;margin-top:20px} .kwiz-back{background:none;border:none;color:var(--ink-muted);cursor:pointer; font-family:var(--font-body);font-size:13.5px;padding:6px 2px} .kwiz-back:hover{color:var(--primary-navy)} .kwiz-nav .btn{margin-left:auto} .fam-plus{font-size:36px;color:var(--accent-amber);line-height:1} .fam-parent{margin-top:26px} .fam-parent button{background:none;border:none;font-family:var(--font-body);font-size:13px;color:var(--ink-muted);text-decoration:underline;cursor:pointer} /* PIN pad */ .fam-pin{max-width:330px;margin:0 auto} .fam-dots{display:flex;gap:12px;justify-content:center;margin:16px 0 18px} .fam-dot{width:16px;height:16px;border-radius:50%;border:2.5px solid var(--primary-navy);background:transparent} .fam-dot.on{background:var(--primary-navy)} .fam-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .fam-key{padding:15px 0;font-family:var(--font-display);font-size:23px;background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:14px;box-shadow:3px 3px 0 var(--primary-navy);cursor:pointer;color:var(--primary-navy)} .fam-key:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--primary-navy)} .fam-err{color:#DC2626;font-family:var(--font-body);font-size:12.5px;min-height:18px;margin-top:10px} .fam-field{width:100%;padding:12px;border:2.5px solid var(--primary-navy);border-radius:12px;font-size:16px;font-family:var(--font-body);box-sizing:border-box;background:var(--paper);color:var(--primary-navy);margin-bottom:10px} /* ---- clickable CBT tool cards + their try-it demo ---- */ .wtool{cursor:pointer;text-align:left;font:inherit;width:100%} .wtool:hover{transform:translateY(-3px)} .wtool-try{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;color:var(--accent-amber);margin-top:8px;letter-spacing:.03em} .tt-overlay{position:fixed;inset:0;z-index:6900;background:rgba(15,23,42,.6);display:none;align-items:center;justify-content:center;padding:18px;overflow-y:auto;overscroll-behavior:contain} .tt-overlay.open{display:flex;animation:fadeIn .16s ease} .tt-card{background:var(--paper);border:3px solid var(--primary-navy);border-radius:22px;box-shadow:8px 8px 0 var(--primary-navy);max-width:540px;width:100%;padding:22px;position:relative;max-height:90vh;overflow-y:auto} .tt-x{position:absolute;top:13px;right:13px;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--bg-cream);color:var(--primary-navy);font-size:14px;font-weight:800;cursor:pointer} .tt-h{font-family:var(--font-display);font-size:24px;color:var(--primary-navy);margin:0 0 2px} .tt-sub{font-family:var(--font-body);font-size:12.5px;color:var(--ink-muted);margin:0 0 14px;line-height:1.5} /* the mock test screen stays white paper in BOTH themes — it's a test viewer */ .tt-screen{background:var(--paper);border:2.5px solid var(--fixed-ink);border-radius:12px;padding:16px;color:var(--fixed-ink);font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.85;position:relative;user-select:text} .tt-screen *{color:var(--fixed-ink)} .tt-tip{font-family:var(--font-body);font-size:12px;color:var(--ink-muted);margin-top:10px;text-align:center;line-height:1.5} .tt-bar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px} .tt-btn{border:2px solid var(--fixed-ink);background:var(--paper);color:var(--fixed-ink);border-radius:9px;padding:6px 12px;font-family:'DM Sans',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer} .tt-btn.on{background:#FEF08A} mark.tt-hl{background:#FDE68A;padding:1px 0;border-radius:2px} .tt-choice{display:flex;align-items:center;gap:9px;border:2px solid var(--fixed-ink);border-radius:10px;padding:8px 11px;margin-bottom:7px;cursor:pointer;background:var(--paper)} .tt-choice .tt-let{width:24px;height:24px;border:2px solid var(--fixed-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0} .tt-choice.struck{opacity:.45} .tt-choice.struck .tt-ctext{text-decoration:line-through} .tt-band{position:absolute;left:8px;right:8px;height:30px;background:rgba(253,224,71,.42);border-top:2px solid #CA8A04;border-bottom:2px solid #CA8A04;pointer-events:none;transition:top .12s ease} .tt-flagged{outline:3px solid #DC2626;outline-offset:3px;border-radius:8px} /* ---- pre-login pricing ---- */ .wprice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px;text-align:left;max-width:820px;margin-left:auto;margin-right:auto} .wprice{position:relative;background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:18px;box-shadow:4px 4px 0 var(--primary-navy);padding:18px 16px;display:flex;flex-direction:column} .wprice-best{border-color:var(--accent-amber);box-shadow:4px 4px 0 var(--accent-amber)} .wprice-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent-amber);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:800;letter-spacing:.04em;border-radius:999px;padding:3px 10px;white-space:nowrap} .wprice-name{font-family:var(--font-display);font-size:19px;color:var(--primary-navy)} .wprice-amt{font-family:var(--font-display);font-size:32px;font-weight:800;color:var(--primary-navy);line-height:1.1;margin-top:2px} .wprice-per{font-family:var(--font-body);font-size:11.5px;color:var(--ink-muted);margin-bottom:10px} .wprice-list{list-style:none;margin:0;padding:0;font-family:var(--font-body);font-size:12.5px;color:var(--ink);line-height:1.75} .wprice-list li{padding-left:18px;position:relative} .wprice-list li::before{content:'✓';position:absolute;left:0;color:#16a34a;font-weight:800} /* [S-5] The landing pricing cards described three plans and offered no way to choose one — the only control was a single "Start free →" under all three, so a visitor who had decided on Core had nowhere to press. margin-top:auto pins the button to the bottom of the flex card so the three line up whatever the bullet counts are. */ .wprice-cta{margin-top:auto;padding-top:12px} .wprice-cta button{width:100%;padding:10px 12px;font-family:var(--font-body);font-size:13px;font-weight:800;border-radius:12px;border:2.5px solid var(--primary-navy);background:var(--primary-navy);color:var(--bg-cream);cursor:pointer;transition:transform .12s} .wprice-cta button:hover{transform:translateY(-2px)} .wprice-best .wprice-cta button{border-color:var(--accent-amber);background:var(--accent-amber);color:#fff} .wtrust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:22px;text-align:left} .wtrust{background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:18px;box-shadow:4px 4px 0 var(--primary-navy);padding:16px} .wtrust-ico{line-height:0;margin-bottom:8px} .wtrust-t{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--primary-navy);margin-bottom:4px} .wtrust-d{font-family:var(--font-body);font-size:12.5px;color:var(--ink);line-height:1.55} @media(max-width:560px){.wsec{padding-top:34px}.wsec-parents{padding:28px 12px 20px}} /* ===================== THE LAYER SCALE [G22 / #31] ===================== These values were assigned ad hoc over time and had real inversions in them: the free-exam offer (640) and the state-test manager (600) both sat UNDERNEATH the Practice Hub / Doodle Arcade (.arc-overlay, 5200), so opening either from inside the hub rendered a full-screen dialog that nobody could see — the app simply appeared to ignore the tap. Both are now in the app-modal band. 10-100 in-page furniture (track previews, CBT side panels, the header) 200-640 page-level focus views (.focus-overlay, onboarding, the demo quiz) 600 auth + grade sheets (.modal-overlay) 5200 .arc-overlay — Practice Hub and Doodle Arcade, opaque, full screen 5300 .ams-fab while an overlay covers the header 5400-5499 APP MODALS that must beat the arcade: paywall 5400, state-test manager 5420, free-exam offer 5440 6200-6300 nav scrim + drawer 6800-7100 settings, tooltips, family switcher, feedback 7200 confirmAction() — must outrank anything that can raise it 9000+ the CBT exam environment, deliberately isolated 9700 .toast — see its own note; highest because it is how the app speaks Adding a layer? Put it in a band, not between two arbitrary numbers. */ /* ---- Try 6 Questions demo (fullscreen) ---- */ #demoQuiz{position:fixed;inset:0;z-index:520;background:var(--bg-cream);display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto} #demoQuiz.hidden{display:none} .dq-card{position:relative;width:100%;max-width:720px;background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:18px;box-shadow:5px 5px 0 var(--primary-navy);padding:22px 24px 26px;margin:auto 0} @media(min-height:700px){.dq-card{margin:4vh 0 auto}} .dq-close{position:absolute;top:10px;right:12px;background:none;border:none;font-size:17px;color:var(--ink-muted);cursor:pointer;padding:4px} /* [G15 / #22] This was a non-wrapping flex row: doodle 52px + text + six 12px dots + gaps + 24px of padding. On a 375px phone that left the subtitle about 93px of width, so "3 reading · 3 math — the math levels up when you're right" stacked into a five-line sliver beside the dots and looked broken on the very first screen a visitor sees. Allow it to wrap, and below 430px drop the dots onto their own full-width row where they read as a progress bar should. */ .dq-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:24px;flex-wrap:wrap} .dq-top>div:nth-child(2){min-width:150px} @media(max-width:430px){ .dq-top{gap:10px} .dq-top>div:nth-child(2){flex:1 1 100%;min-width:0;order:2} .dq-dots{flex:1 1 100%;order:3;justify-content:flex-start;margin-top:2px} } .dq-dots{display:flex;gap:6px} .dq-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--primary-navy);background:transparent;transition:background .2s} .dq-dot.on{background:var(--accent-mustard)} .dq-dot.right{background:#4ade80} .dq-dot.wrong{background:#f87171} .dq-passage{max-height:34vh;overflow-y:auto;background:var(--bg-cream);border:2px solid var(--primary-navy);border-radius:14px;padding:14px 16px;margin-bottom:14px;font-family:'Georgia',serif;font-size:0.92rem;line-height:1.6;color:var(--primary-navy)} .dq-passage h4{font-family:var(--font-display);font-size:1rem;margin:0 0 8px;letter-spacing:.02em} .dq-passage p{margin:0 0 9px} .dq-subject{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.58rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-amber);border:1.5px solid var(--accent-amber);border-radius:999px;padding:2px 10px;margin-bottom:10px} .dq-subject.math{color:#2563EB;border-color:#2563EB} .dq-q{font-family:var(--font-body);font-size:1.06rem;color:var(--primary-navy);line-height:1.55;margin-bottom:16px;font-weight:700} .dq-choice{display:block;width:100%;text-align:left;background:var(--bg-cream);border:2px solid var(--primary-navy);border-radius:12px;padding:13px 15px;margin-bottom:10px;font-family:var(--font-body);font-size:0.95rem;color:var(--primary-navy);cursor:pointer;transition:transform .12s,background .15s;box-shadow:2px 2px 0 var(--ink-soft)} .dq-choice .dq-let{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:2px solid var(--primary-navy);border-radius:50%;font-weight:800;font-size:0.8rem;margin-right:10px;flex-shrink:0} .dq-choice:hover:not(:disabled){transform:translateY(-1px);background:var(--paper)} .dq-choice:disabled{cursor:default} .dq-choice.correct{background:#dcfce7;border-color:#16a34a;box-shadow:2px 2px 0 #16a34a;animation:dqPop .35s var(--ease-pop)} .dq-choice.wrong{background:#fee2e2;border-color:#dc2626;box-shadow:2px 2px 0 #dc2626;animation:dqShake .35s} @keyframes dqShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} @keyframes dqPop{0%{transform:scale(.92)}55%{transform:scale(1.03)}100%{transform:scale(1)}} .pq-pop{animation:dqPop .35s var(--ease-pop,ease)} .pq-shake{animation:dqShake .35s ease} @keyframes amsComboFloat{0%{opacity:0;transform:translate(-50%,6px) scale(.7)}25%{opacity:1;transform:translate(-50%,-6px) scale(1.08)}100%{opacity:0;transform:translate(-50%,-34px) scale(1)}} .streak-saver{display:flex;align-items:center;gap:10px;background:#FFF8E1;border:2px solid var(--primary-navy);border-radius:var(--radius-md);box-shadow:3px 3px 0 var(--primary-navy);padding:10px 14px;margin-bottom:14px;animation:popIn .3s ease} .streak-saver b{font-family:var(--font-display);font-size:1rem;color:var(--primary-navy)} .streak-saver p{margin:0;font-size:0.75rem;color:var(--ink-muted);font-family:var(--font-body)} .streak-saver button.go{margin-left:auto;flex-shrink:0;background:var(--primary-navy);color:var(--bg-cream);border:2px solid var(--primary-navy);border-radius:999px;padding:7px 16px;font-family:var(--font-display);font-weight:700;font-size:0.85rem;cursor:pointer;box-shadow:2px 2px 0 var(--accent-mustard)} .streak-saver button.x{flex-shrink:0;background:none;border:none;color:var(--ink-muted);font-size:15px;cursor:pointer;padding:4px} /* ---- State Test manager: Google-Slides styled board ---- */ /* "Want a free test?" — shown to free users instead of a hard paywall */ .fso-overlay{position:fixed;inset:0;z-index:5440;background:rgba(32,33,36,.6);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow-y:auto;overscroll-behavior:contain;animation:fadeIn .18s ease} .fso-card{position:relative;background:var(--paper);border:3px solid var(--primary-navy);border-radius:24px;box-shadow:8px 8px 0 var(--primary-navy);max-width:560px;width:100%;padding:28px 26px 22px;text-align:center;animation:popIn .28s cubic-bezier(.34,1.56,.64,1)} .fso-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--bg-cream);font-size:14px;font-weight:800;color:var(--primary-navy);cursor:pointer;line-height:1} .fso-guy{line-height:0;margin-bottom:6px} .fso-h{font-family:var(--font-display);font-size:34px;color:var(--primary-navy);margin:0 0 6px} .fso-sub{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--ink-muted);margin:0 auto 18px;max-width:430px} .fso-pick{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .fso-opt{flex:1;min-width:190px;background:var(--bg-cream);border:2.5px solid var(--primary-navy);border-radius:18px;box-shadow:4px 4px 0 var(--primary-navy);padding:18px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;font-family:var(--font-display);font-size:19px;color:var(--primary-navy);transition:transform .12s ease,box-shadow .12s ease,background .15s} .fso-opt:hover{background:#FFF7DB;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--primary-navy)} .fso-opt:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--primary-navy)} .fso-ico{font-size:30px;line-height:1} .fso-note{font-family:var(--font-body);font-size:11.5px;font-weight:500;color:var(--ink-muted);line-height:1.45} .fso-fine{font-family:var(--font-body);font-size:11.5px;color:var(--ink-muted);margin:16px 0 0;line-height:1.55} @media(max-width:520px){ .fso-h{font-size:28px} .fso-opt{min-width:100%} } .stm-overlay{position:fixed;inset:0;z-index:5420;background:rgba(32,33,36,.55);display:flex;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;animation:fadeIn .18s ease} .stm-frame{width:100%;max-width:940px;background:#F1F3F4;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);padding:18px 20px 26px;margin:auto 0} .stm-top{display:flex;align-items:center;gap:12px;margin-bottom:4px} .stm-title{font-family:var(--font-display);font-size:1.5rem;color:#202124;font-weight:700} .stm-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:800;color:#5f6368;background:var(--paper);border:1px solid #dadce0;border-radius:999px;padding:4px 12px} .stm-close{background:var(--paper);border:1px solid #dadce0;border-radius:50%;width:32px;height:32px;font-size:15px;cursor:pointer;color:#5f6368} .stm-hint{font-family:var(--font-body);font-size:.8rem;color:#5f6368;margin:2px 0 16px;line-height:1.45;max-width:640px} .stm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px} .stm-slide{position:relative;background:var(--paper);border:1px solid #dadce0;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.12);min-height:210px;text-align:left} .stm-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;border:2px dashed #9aa0a6;background:var(--paper);transition:border-color .15s,background .15s;font-family:var(--font-body)} .stm-new:hover:not(.stm-disabled){border-color:var(--primary-navy);background:#F8FBFF} .stm-new.stm-disabled{opacity:.55;cursor:not-allowed} .stm-plus{font-size:44px;color:var(--primary-navy);font-weight:300;line-height:1} .stm-new-t{font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#202124} .stm-new-s{font-size:.72rem;color:#5f6368;text-align:center;padding:0 16px;line-height:1.35} .stm-card{padding:12px 13px 14px} .stm-x{position:absolute;top:6px;right:6px;z-index:2;background:var(--paper);border:1px solid #dadce0;border-radius:50%;width:24px;height:24px;font-size:12px;cursor:pointer;color:#5f6368} .stm-badge{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:800;color:var(--primary-navy);letter-spacing:.03em;margin-bottom:8px} .stm-thumb{position:relative;height:84px;border-radius:6px;background:linear-gradient(135deg,var(--accent-primary-soft),#FFF8E7);border:1px solid #e3e6ea;overflow:hidden;display:flex;align-items:center;justify-content:center;margin-bottom:9px} .stm-thumb-lines{position:absolute;left:12px;top:14px;right:12px;height:4px;border-radius:2px;background:#c9d2e3;box-shadow:0 12px 0 #d8dfec,0 24px 0 #e2e8f2} /* z-index + a solid (not translucent) fill: the mock "page lines" behind this pill were showing through and reading as a strikethrough across the label. */ .stm-sess{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--primary-navy);background:#FFFDF7;padding:3px 14px;border-radius:999px;border:2px solid var(--primary-navy);box-shadow:2px 2px 0 rgba(26,43,76,.18)} .stm-meta{font-family:var(--font-body);font-size:.78rem;color:#202124;font-weight:600;margin-bottom:7px;line-height:1.3} /* the at-a-glance score on each dashboard slide */ .stm-score{display:flex;align-items:baseline;gap:7px;margin:0 0 7px} .stm-score b{font-family:var(--font-display);font-size:1.35rem;color:var(--primary-navy);line-height:1} .stm-score span{font-family:var(--font-body);font-size:.68rem;color:#5f6368;font-weight:600} .stm-score-empty span{font-size:.7rem;font-style:italic;color:#80868b} .stm-written{font-family:var(--font-body);font-size:.66rem;color:#80868b;margin:-3px 0 7px} .stm-bar{height:8px;background:#e8eaed;border-radius:999px;overflow:hidden} .stm-fill{height:100%;background:var(--primary-navy);border-radius:999px;transition:width .4s ease} .stm-row{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px} .stm-pct{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:.72rem;color:var(--primary-navy)} .stm-when{font-size:.62rem;color:#9aa0a6;font-family:var(--font-body)} .stm-resume{width:100%;background:var(--primary-navy);color:#fff;border:none;border-radius:8px;padding:9px;font-family:var(--font-display);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:2px 2px 0 var(--accent-mustard)} .stm-resume:hover{transform:translateY(-1px)} .dq-report{position:relative;border:2px dashed var(--primary-navy);border-radius:12px;padding:16px 14px;margin:16px 0;overflow:hidden;background:var(--bg-cream)} .dq-report .dq-bars{filter:blur(4px);opacity:.5;pointer-events:none} .dq-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:9px} .dq-bar-row:last-child{margin-bottom:0} .dq-bar-label{font-family:'JetBrains Mono',monospace;font-size:0.6rem;font-weight:800;color:var(--primary-navy);width:70px;text-align:left} .dq-bar-track{flex:1;height:12px;border:1.5px solid var(--primary-navy);border-radius:999px;overflow:hidden;background:var(--paper)} .dq-bar-fill{height:100%;border-radius:999px} .dq-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px} /* Modals (auth) — full-screen */ /* overscroll-behavior:contain stops a hard scroll inside the login sheet from chaining to the page underneath — that bounce was showing the homepage through/behind the login screen. */ .modal-overlay{position:fixed;inset:0;background:var(--bg-cream);display:none;align-items:center;justify-content:center;z-index:600;padding:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .modal-overlay.open{display:flex} /* while a full-screen modal is open the page behind must not scroll at all */ body.ams-modal-open{overflow:hidden;position:fixed;width:100%} .modal{background:var(--paper);border:none;border-radius:0;max-width:100%;width:100%;height:100%;padding:0;box-shadow:none;text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center} .modal .icon-row{display:flex;justify-content:center;gap:6px;margin-bottom:16px} .modal h3{font-size:28px;margin-bottom:10px;font-family:var(--font-display);color:var(--primary-navy)} .modal p{font-size:15px;color:var(--text-muted);margin:0 0 22px;line-height:1.6;font-family:var(--font-body)} .modal-actions{display:flex;flex-direction:column;gap:10px} .modal-actions .btn{width:100%;padding:14px;font-size:15px} .modal-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;border:2.5px solid var(--primary-navy);background:var(--bg-cream);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:var(--primary-navy);cursor:pointer;z-index:10;transition:all .15s} .modal-close:hover{background:var(--primary-navy);color:var(--bg-cream)} /* ===== The sign-in sheet: a scene beside the form ========================== It was one centred column on a flat page — the first thing anyone sees of the product, and it looked like a form on a wall. Two panels now: a living doodle scene on the left, the form on the right, in one rounded card. */ .modal.auth-shell{flex-direction:row;align-items:stretch;justify-content:center; max-width:1040px;width:calc(100% - 48px);height:auto;max-height:min(88vh,760px); margin:auto;border-radius:28px;overflow:hidden; box-shadow:0 30px 70px -20px rgba(15,23,42,.45),0 0 0 1px rgba(15,23,42,.06); animation:authShellIn .5s var(--ease-pop,cubic-bezier(.34,1.4,.64,1)) backwards} @keyframes authShellIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}} .modal-overlay:has(.auth-shell){background:rgba(20,28,45,.55);backdrop-filter:blur(6px);padding:24px} :root[data-theme="dark"] .modal-overlay:has(.auth-shell){background:rgba(6,10,20,.7)} .auth-pane{flex:1 1 46%;min-width:0;background:var(--paper);overflow-y:auto; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:18px 8px;position:relative;-webkit-overflow-scrolling:touch} /* ---- the scene ---- */ .auth-art{flex:1 1 54%;position:relative;overflow:hidden;isolation:isolate; background:linear-gradient(150deg,#FFF8E7 0%,#FDF2F8 55%,#FFF7ED 100%); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:34px} :root[data-theme="dark"] .auth-art{background:linear-gradient(150deg,#1C2440 0%,#3A2418 55%,#2A2118 100%)} .aa-blob{position:absolute;border-radius:44% 56% 60% 40%/48% 42% 58% 52%;filter:blur(.5px); transform:translate3d(var(--aa-bg-x,0),var(--aa-bg-y,0),0);transition:transform .5s cubic-bezier(.22,1,.36,1);z-index:0} .aa-blob1{width:280px;height:300px;left:-52px;top:8%;background:#C7D2FE;opacity:.62;animation:aaMorph 13s ease-in-out infinite} .aa-blob2{width:230px;height:250px;right:-40px;bottom:6%;background:#FBCFE8;opacity:.6;animation:aaMorph 17s ease-in-out infinite reverse} .aa-blob3{width:150px;height:160px;right:16%;top:10%;background:#FDE68A;opacity:.55;animation:aaMorph 11s ease-in-out infinite .6s} :root[data-theme="dark"] .aa-blob{opacity:.3} @keyframes aaMorph{ 0%,100%{border-radius:44% 56% 60% 40%/48% 42% 58% 52%} 33%{border-radius:60% 40% 42% 58%/54% 62% 38% 46%} 66%{border-radius:38% 62% 54% 46%/62% 38% 60% 40%} } .aa-stage{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:190px} .aa-guy{display:block;line-height:0;cursor:pointer; transform:translate3d(var(--aa-par-x,0),var(--aa-par-y,0),0); transition:transform .45s cubic-bezier(.22,1,.36,1),filter .2s ease; filter:drop-shadow(0 8px 0 rgba(26,43,76,.10))} .aa-guy:hover{filter:drop-shadow(0 12px 0 rgba(26,43,76,.16))} /* each floats on its own clock, so it never reads as one looping animation */ .aa-g1 svg{animation:aaFloat 4.2s ease-in-out infinite} .aa-g2 svg{animation:aaFloat 3.3s ease-in-out .5s infinite} .aa-g3 svg{animation:aaFloat 5.1s ease-in-out .9s infinite} @keyframes aaFloat{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-12px) rotate(2deg)} } /* the eyes actually look at the cursor */ .aa-guy svg .g-eye{transform-box:fill-box;transform-origin:center; translate:var(--aa-look-x,0) var(--aa-look-y,0);transition:translate .18s ease-out} .aa-guy.aa-hop svg{animation:aaHop .55s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} @keyframes aaHop{ 0%{transform:translateY(0) scale(1,1)} 22%{transform:translateY(2px) scale(1.12,.86)} 55%{transform:translateY(-26px) scale(.92,1.12)} 78%{transform:translateY(2px) scale(1.1,.9)} 100%{transform:translateY(0) scale(1,1)} } .aa-guy.aa-spin svg{animation:aaSpin .7s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} @keyframes aaSpin{ 0%{transform:rotate(0) scale(1)} 40%{transform:rotate(200deg) scale(1.1)} 100%{transform:rotate(360deg) scale(1)} } /* the scene's mood follows the step */ .auth-art[data-mood="verify"] .aa-g2 svg{animation-duration:1.5s} .auth-art[data-mood="verify"] .aa-g1{transform:translate3d(var(--aa-par-x,0),calc(var(--aa-par-y,0) + 10px),0) rotate(-6deg)} .auth-art[data-mood="done"] .aa-guy svg{animation:aaHop .8s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} .auth-art[data-mood="done"] .aa-g2 svg{animation-delay:.1s} .auth-art[data-mood="done"] .aa-g3 svg{animation-delay:.2s} .aa-caption{position:relative;z-index:1;text-align:center;max-width:330px} .aa-caption b{display:block;font-family:var(--font-display);font-size:25px;color:var(--primary-navy);line-height:1.2} .aa-caption span{display:block;font-family:var(--font-body);font-size:13.5px;color:var(--ink-muted);margin-top:6px} :root[data-theme="dark"] .aa-caption b{color:#E8EEFB} .aa-cap-in{animation:aaCapIn .45s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} @keyframes aaCapIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Phones get the form. The scene becomes a short band so it is still greeted by a face, without pushing the email field below the fold. */ @media(max-width:860px){ .modal.auth-shell{flex-direction:column;width:calc(100% - 20px);max-height:94vh;border-radius:22px} .auth-art{flex:0 0 auto;min-height:150px;padding:14px} .aa-stage{min-height:0;transform:scale(.62);margin:-14px 0} .aa-caption{display:none} .aa-blob1{width:170px;height:180px} .aa-blob2{width:150px;height:160px} .aa-blob3{display:none} } @media (prefers-reduced-motion: reduce){ .modal.auth-shell,.aa-blob,.aa-guy svg,.aa-caption{animation:none!important} .aa-guy svg .g-eye{translate:none} } .auth-step{max-width:420px;width:100%;padding:32px 24px} /* ---- Sign in / sign up, with some life in it ---------------------------- Every step used to snap in with no transition, which made the whole flow feel like a stack of forms. Each screen now settles in, and its children arrive a beat apart so the eye is led down the page instead of meeting all of it at once. Nothing here delays a keystroke: it is 0.42s, once. */ .auth-step{animation:authStepIn .42s var(--ease-pop,cubic-bezier(.34,1.4,.64,1)) backwards} @keyframes authStepIn{ from{opacity:0;transform:translateY(14px) scale(.98)} to{opacity:1;transform:none} } .auth-step > *{animation:authRise .5s var(--ease-pop,cubic-bezier(.34,1.4,.64,1)) backwards} .auth-step > *:nth-child(1){animation-delay:.03s} .auth-step > *:nth-child(2){animation-delay:.07s} .auth-step > *:nth-child(3){animation-delay:.11s} .auth-step > *:nth-child(4){animation-delay:.15s} .auth-step > *:nth-child(5){animation-delay:.19s} .auth-step > *:nth-child(n+6){animation-delay:.23s} @keyframes authRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}} /* the doodle at the top of the sign-up sheet gets a slow float and a wave on arrival — it is the first thing anyone sees of this product */ .auth-doodle,.auth-step .doodle-guy{animation:authFloat 4.6s ease-in-out infinite} @keyframes authFloat{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-7px) rotate(1.5deg)} } /* the OTP boxes fill in like a countdown rather than all at once */ .otp-digit{transition:transform .16s var(--ease-pop,ease),border-color .16s ease,box-shadow .16s ease} .otp-digit:focus{transform:translateY(-2px) scale(1.06)} .otp-digit:not(:placeholder-shown){animation:otpPop .28s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} @keyframes otpPop{0%{transform:scale(.86)}60%{transform:scale(1.12)}100%{transform:scale(1)}} /* the survey's chips and grade cards land one after another, not in a block */ .focus-pick-grid .focus-pick-btn{animation:authRise .42s var(--ease-pop,ease) backwards} .focus-pick-grid .focus-pick-btn:nth-child(2){animation-delay:.04s} .focus-pick-grid .focus-pick-btn:nth-child(3){animation-delay:.08s} .focus-pick-grid .focus-pick-btn:nth-child(4){animation-delay:.12s} .focus-pick-grid .focus-pick-btn:nth-child(5){animation-delay:.16s} .focus-pick-grid .focus-pick-btn:nth-child(n+6){animation-delay:.2s} .focus-pick-btn{transition:transform .14s var(--ease-pop,ease),background .14s ease,border-color .14s ease} .focus-pick-btn:active{transform:scale(.94)} .focus-pick-btn.selected,.focus-pick-btn.on{animation:chipPick .3s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} @keyframes chipPick{0%{transform:scale(1)}45%{transform:scale(1.11) rotate(-2deg)}100%{transform:scale(1)}} .wiz-grade{animation:authRise .4s var(--ease-pop,ease) backwards} .wiz-grade:nth-child(2){animation-delay:.04s} .wiz-grade:nth-child(3){animation-delay:.08s} .wiz-grade:nth-child(4){animation-delay:.12s} .wiz-grade:nth-child(5){animation-delay:.16s} .wiz-grade:nth-child(6){animation-delay:.2s} .wiz-chip{transition:transform .14s var(--ease-pop,ease),background .14s ease,border-color .14s ease} .wiz-chip:active{transform:scale(.94)} .wiz-chip.on{animation:chipPick .3s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} /* ranked high-school picks — the order is the point, so it is shown */ #hsPickGrid .focus-pick-btn{position:relative} #hsPickGrid .focus-pick-btn[data-rank]:not([data-rank=""])::after{ content:attr(data-rank);position:absolute;top:-7px;right:-7px;width:21px;height:21px; display:flex;align-items:center;justify-content:center;border-radius:50%; background:var(--accent-amber,#B45309);color:#fff;border:2px solid var(--primary-navy); font-family:var(--font-display,cursive);font-size:12px;font-weight:700; animation:chipPick .3s var(--ease-pop,cubic-bezier(.34,1.4,.64,1))} .hs-list{margin-top:8px;display:flex;flex-direction:column;gap:4px} .hs-row{display:flex;align-items:center;gap:8px;font-size:12.5px} .hs-rank{flex:0 0 18px;height:18px;border-radius:50%;background:var(--accent-amber,#B45309); color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700} .hs-nm{flex:1;font-weight:600} .hs-cut{color:var(--ink-muted);font-family:'JetBrains Mono',monospace;font-size:11px;white-space:nowrap} /* ===== Parent area ======================================================== This was a list of rows with "New PIN" and "Remove" on each — the surface a paying adult looks at most, styled like an admin table. It is the one screen that has to justify the charge, so it leads with what the child has actually done, not with the buttons a parent almost never presses. */ .pd-wrap{max-width:520px;margin:0 auto;text-align:left;animation:authRise .4s var(--ease-pop,ease) backwards} .pd-head{display:flex;align-items:center;gap:14px;margin-bottom:18px} .pd-avatar{width:52px;height:52px;font-size:24px;flex-shrink:0} .pd-avatar-guy{line-height:0;flex-shrink:0} .pd-h{font-size:26px;margin:0;line-height:1.15} .pd-sub{margin:3px 0 0;font-size:12.5px} /* the plan, stated once, at the top */ .pd-plan{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px; border:2.5px solid var(--primary-navy);box-shadow:3px 3px 0 var(--primary-navy);margin-bottom:16px} .pd-plan-free{background:var(--paper)} .pd-plan-core{background:linear-gradient(135deg,var(--accent-primary-soft,#E8EEFB),var(--paper))} .pd-plan-max{background:linear-gradient(135deg,var(--accent-amber-soft,#FFF8E7),var(--paper))} .pd-plan-l{flex:1;min-width:0} .pd-plan-name{display:block;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--primary-navy)} .pd-plan-sub{display:block;font-family:var(--font-body);font-size:12px;color:var(--ink-muted);margin-top:2px} .pd-plan-btn{padding:8px 14px;font-size:13px;flex-shrink:0} /* one card per child, and the numbers come first */ .pd-kids{display:flex;flex-direction:column;gap:10px} .pd-kid{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer; background:var(--paper);border:2.5px solid var(--primary-navy);border-radius:16px; box-shadow:3px 3px 0 var(--primary-navy);padding:12px 14px;font-family:inherit; transition:transform .13s var(--ease-pop,ease),box-shadow .13s var(--ease-pop,ease); animation:authRise .42s var(--ease-pop,ease) backwards} .pd-kid:nth-child(2){animation-delay:.06s} .pd-kid:nth-child(3){animation-delay:.12s} .pd-kid:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--primary-navy)} .pd-kid:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--primary-navy)} .pd-kid-av{line-height:0;flex-shrink:0} .pd-kid-main{flex:1;min-width:0} .pd-kid-top{display:flex;align-items:center;gap:8px} .pd-kid-top b{font-family:var(--font-display);font-size:17px;color:var(--primary-navy)} .pd-seat{font-family:var(--font-body);font-size:10.5px;font-weight:700;text-transform:uppercase; letter-spacing:.4px;padding:2px 8px;border-radius:999px;white-space:nowrap} .pd-seat.on{background:var(--accent-amber,#B45309);color:#fff} .pd-seat.off{background:var(--border,#E7E2D8);color:var(--ink-muted)} .pd-kid-meta{display:block;font-family:var(--font-body);font-size:11.5px;color:var(--ink-muted);margin-top:1px} .pd-kid-go{font-size:24px;color:var(--ink-muted);flex-shrink:0} .pd-stats,.pd-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 16px} .pd-stat{display:flex;flex-direction:column;align-items:center;justify-content:center; background:var(--paper-soft,rgba(26,43,76,.04));border-radius:10px;padding:7px 10px;min-width:64px} .pd-stat b{font-family:var(--font-display);font-size:18px;line-height:1;color:var(--primary-navy)} .pd-stat span{font-family:var(--font-body);font-size:10px;color:var(--ink-muted);margin-top:3px;text-align:center} .pd-good b{color:#15803D} .pd-warn b{color:#B45309} .pd-grid .pd-stat{padding:11px 8px} .pd-grid .pd-stat b{font-size:22px} .pd-weak{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px} .pd-weak-h{width:100%;font-family:var(--font-display);font-size:14px;color:var(--primary-navy);margin-bottom:2px} .pd-weak-chip{background:#FEF3C7;border:1.5px solid #F59E0B;color:#92400E;border-radius:999px; padding:3px 10px;font-family:var(--font-body);font-size:12px} :root[data-theme="dark"] .pd-weak-chip{background:rgba(245,158,11,.16);color:#FCD34D} /* the seat control — a sentence, then the button */ .pd-seatbox{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px; border:2px solid var(--border,#E7E2D8);background:var(--paper);margin-bottom:16px} .pd-seatbox.on{border-color:var(--accent-amber,#B45309);background:linear-gradient(135deg,var(--accent-amber-soft,#FFF8E7),var(--paper))} .pd-seatbox-l{flex:1;min-width:0} .pd-seatbox-l b{display:block;font-family:var(--font-display);font-size:15.5px;color:var(--primary-navy)} .pd-seatbox-l span{display:block;font-family:var(--font-body);font-size:12px;color:var(--ink-muted);margin-top:3px;line-height:1.45} .pd-seatbox .btn-doodle{flex-shrink:0;padding:9px 13px;font-size:13px} .pd-actions{display:flex;gap:10px;margin-top:16px} .pd-actions .btn-doodle{flex:1;padding:12px} .pd-actions-col{flex-direction:column} .pd-actions-col .btn-doodle{width:100%} .pd-danger{border-color:rgba(220,38,38,.55);color:#B91C1C} .pd-danger:hover{background:rgba(220,38,38,.08);border-color:#B91C1C} :root[data-theme="dark"] .pd-danger{border-color:rgba(248,113,113,.5);color:#FCA5A5} @media(max-width:430px){ .pd-grid{grid-template-columns:repeat(2,1fr)} .pd-plan{flex-direction:column;align-items:flex-start;gap:10px} .pd-plan-btn{width:100%} .pd-seatbox{flex-direction:column;align-items:stretch} .pd-actions{flex-direction:column} } @media (prefers-reduced-motion: reduce){ .pd-wrap,.pd-kid{animation:none} } @media (prefers-reduced-motion: reduce){ .auth-step,.auth-step > *,.auth-doodle,.auth-step .doodle-guy, .focus-pick-grid .focus-pick-btn,.wiz-grade,.otp-digit:not(:placeholder-shown){animation:none} } .auth-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;text-align:left} .auth-input{width:100%;border:var(--border-ink);border-radius:var(--radius-sm);padding:12px 14px;font-size:14px;font-family:var(--font-body);color:var(--text);min-height:44px;background:var(--bg-cream);box-shadow:3px 3px 0 var(--primary-navy)} .auth-input:focus{outline:2px solid var(--accent-primary);outline-offset:1px;border-color:var(--accent-primary)} .auth-error{font-size:12.5px;color:#DC2626;background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:10px;text-align:left;font-family:var(--font-body)} .otp-row{display:flex;justify-content:center;gap:8px;margin-bottom:6px} .otp-digit{width:42px;height:50px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'JetBrains Mono',monospace;color:var(--text)} .otp-digit:focus{outline:2px solid var(--accent-primary);outline-offset:1px;border-color:var(--accent-primary)} /* The toast must outrank every overlay, because it is how the app explains itself. At z-index 500 it sat UNDER .arc-overlay (5200, opaque) — so every message raised from inside the Practice Hub or the Doodle Arcade was rendered into a covered element and seen by nobody: "−3 ⚡ · 17 left", "Need 3 ⚡ …", "🎁 Free game of the day", "🎯 Daily Quest complete! +120 coins", "Insights refreshed", and the Parent Dashboard's "🔐 PIN updated" / "✅ Plan moved". A free user burned their one free game a day and was never told. It is pointer-events:none, so sitting on top blocks nothing. Keep this the highest z-index OUTSIDE an exam — 9700 clears .cbt-line-reader-overlay (9500) and .cbt-modal-overlay (9600). Inside an exam, see the .cbt-active rule below. */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--primary-navy);color:var(--bg-cream);padding:12px 20px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:all .25s;pointer-events:none;z-index:9700;font-family:var(--font-body);border:var(--border-ink);box-shadow:var(--shadow-mustard)} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* DURING AN EXAM ONLY, back under the test surface. The real NYSED CBT does not pop messages over the paper, and fidelity is the bar for the exam engines — a toast floating over the question is a difference a student would notice on the real thing. .cbt-env is an opaque full-screen layer at z-index 9000, so 500 puts the toast behind it exactly as it was before. Same precedent as `body.cbt-active .ams-fab{display:none}` above. This deliberately does NOT undo the rule above: outside an exam the toast still sits over .arc-overlay (5200), which is the whole point — Practice Hub and Doodle Arcade messages must stay visible. exams.js adds/removes .cbt-active on (exams.js:53,73). */ body.cbt-active .toast{z-index:500} /* ===================== EXAM ENGINES (clean, real-test layout) ===================== */ .exam-shell,.shsat-shell{max-width:760px;margin:0 auto;padding:8px 4px 40px;font-family:var(--font-body)} .exam-shell *,.shsat-shell *{font-family:var(--font-body)} /* State test cover */ .exam-cover{border:1px solid #cbd5e1;border-radius:8px;padding:32px;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.08)} .exam-cover-seal{width:54px;height:54px;border-radius:50%;background:#1e3a8a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;margin-bottom:16px;letter-spacing:.02em} .exam-cover-title{font-family:var(--font-body);font-size:26px;font-weight:800;margin:0 0 4px;color:var(--ink);letter-spacing:-.01em} .exam-cover-sub{font-size:15px;color:var(--ink-muted);font-weight:600;margin-bottom:20px} .exam-cover-meta{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink);border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:16px 0;margin-bottom:20px} .exam-diff-label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px} .exam-diff-pick{display:flex;flex-direction:column;gap:10px} .exam-diff-opt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid #cbd5e1;border-radius:8px;padding:12px 16px;background:var(--paper);cursor:pointer;text-align:left;transition:all .12s} .exam-diff-opt:hover{border-color:#3b82f6;background:#f8fafc} .exam-diff-opt.sel{border-color:#1e3a8a;background:#eff6ff;box-shadow:0 0 0 1px #1e3a8a inset} .exam-diff-opt strong{font-size:14.5px;color:var(--ink)} .exam-diff-opt span{font-size:12.5px;color:#64748b} /* Topbar */ .exam-topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#1e3a8a;color:#fff;border-radius:8px 8px 0 0;flex-wrap:wrap;gap:8px} .exam-topbar-left{display:flex;align-items:center;gap:10px} .exam-part-tag{background:var(--paper);color:#1e3a8a;font-size:11px;font-weight:800;padding:3px 10px;border-radius:4px;letter-spacing:.04em} .exam-part-tag.p2{background:#fbbf24;color:#78350f} .exam-qnum{font-size:13px;font-weight:600} .exam-topbar-right{display:flex;gap:8px;align-items:center} .exam-bookmark{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer} .exam-bookmark.on{background:#fbbf24;color:#78350f;border-color:#fbbf24} .exam-review-btn{background:var(--paper);color:#1e3a8a;border:none;border-radius:6px;padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer} /* Progress dots */ .exam-progress-track{display:flex;flex-wrap:wrap;gap:4px;padding:12px 16px;background:#f1f5f9;border-left:1px solid #cbd5e1;border-right:1px solid #cbd5e1} .exam-dot{width:10px;height:10px;border-radius:50%;background:#cbd5e1;transition:all .15s} .exam-dot.done{background:#3b82f6} .exam-dot.cur{background:#1e3a8a;transform:scale(1.4);box-shadow:0 0 0 2px #bfdbfe} .exam-dot.bk{box-shadow:0 0 0 2px #fbbf24} /* Question area */ .exam-question-area{border:1px solid #cbd5e1;border-top:none;background:var(--paper);padding:0} .exam-passage{padding:20px 22px;border-bottom:1px solid #e2e8f0;background:#fafafa;max-height:340px;overflow-y:auto} .exam-passage-title{font-size:14px;font-weight:800;color:#1e3a8a;margin-bottom:10px;text-transform:uppercase;letter-spacing:.02em} .exam-passage-body p{font-size:14px;line-height:1.7;color:#1e293b;margin:0 0 10px} .exam-qcard{padding:22px} .exam-qsubject{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px} .exam-qtext{font-size:16px;font-weight:600;line-height:1.55;color:var(--ink);margin-bottom:18px} .exam-choices{display:flex;flex-direction:column;gap:10px} .exam-choice{display:flex;align-items:center;gap:12px;border:1.5px solid #cbd5e1;border-radius:8px;padding:13px 16px;background:var(--paper);cursor:pointer;text-align:left;font-size:14.5px;color:#1e293b;transition:all .12s;width:100%} .exam-choice:hover{border-color:#3b82f6;background:#f8fafc} .exam-choice.sel{border-color:#1e3a8a;background:#eff6ff;box-shadow:0 0 0 1px #1e3a8a inset} .exam-choice-letter{width:28px;height:28px;border-radius:50%;border:1.5px solid #94a3b8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:var(--ink-muted)} .exam-choice.sel .exam-choice-letter{background:#1e3a8a;color:#fff;border-color:#1e3a8a} .exam-textarea{width:100%;min-height:140px;border:1.5px solid #cbd5e1;border-radius:8px;padding:14px;font-size:14.5px;line-height:1.6;resize:vertical;box-sizing:border-box;color:#1e293b} .exam-textarea:focus{outline:none;border-color:#1e3a8a;box-shadow:0 0 0 1px #1e3a8a inset} .exam-help{margin-top:8px} .exam-help-list{background:#fffbeb;border:1px solid #fde68a;border-radius:6px;padding:10px 12px;font-size:12.5px;color:#92400e;line-height:1.6} /* Nav */ .exam-nav{display:flex;justify-content:space-between;gap:10px;padding:16px;background:#f8fafc;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 8px 8px} /* Review */ .exam-review{border:1px solid #cbd5e1;border-radius:8px;padding:24px;background:var(--paper)} .exam-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-bottom:16px} .exam-review-cell{border:1.5px solid #cbd5e1;border-radius:6px;padding:10px 4px;font-size:13px;font-weight:700;cursor:pointer;background:var(--paper);color:var(--ink-muted)} .exam-review-cell.answered{background:#dbeafe;border-color:#3b82f6;color:#1e3a8a} .exam-review-cell.unanswered{background:var(--paper);border-color:#cbd5e1;color:#94a3b8} .exam-review-cell.bookmarked{box-shadow:0 0 0 2px #fbbf24} .exam-review-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#64748b} .exam-review-legend span{display:flex;align-items:center;gap:6px} .lg-box{width:14px;height:14px;border-radius:3px;display:inline-block} .lg-box.answered{background:#dbeafe;border:1.5px solid #3b82f6} .lg-box.unanswered{background:var(--paper);border:1.5px solid #cbd5e1} .lg-box.bookmarked{background:var(--paper);border:1.5px solid #fbbf24;box-shadow:0 0 0 1.5px #fbbf24} /* Results */ .exam-results,.shsat-results{border:1px solid #cbd5e1;border-radius:8px;padding:28px;background:var(--paper)} .exam-result-cards,.shsat-result-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;margin-bottom:20px} .exam-result-card,.shsat-rcard{border:1px solid #e2e8f0;border-radius:8px;padding:16px;text-align:center;background:#f8fafc} .erc-num,.src-num{font-size:26px;font-weight:800;color:#1e3a8a} .erc-label,.src-label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-top:4px} .exam-result-section,.shsat-result-section{border:1px solid #e2e8f0;border-radius:8px;padding:18px;margin-bottom:16px;background:var(--paper)} /* SHSAT (slightly different — black/white official feel) */ .shsat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#0f172a;color:#fff;border-radius:8px 8px 0 0} .shsat-header-title{font-size:15px;font-weight:800;letter-spacing:.01em} .shsat-header-num{font-size:13px;font-weight:600;opacity:.85} .shsat-progress{height:5px;background:#e2e8f0} .shsat-progress-fill{height:100%;background:#0f172a;transition:width .3s} .shsat-phase-row{display:flex;gap:8px;padding:12px 18px;background:#f1f5f9;border-left:1px solid #cbd5e1;border-right:1px solid #cbd5e1} .shsat-phase{font-size:12px;font-weight:700;color:#94a3b8;padding:4px 12px;border-radius:999px;border:1px solid #cbd5e1;background:var(--paper)} .shsat-phase.active{color:var(--ink);border-color:var(--ink);background:var(--paper)} .shsat-phase.done{color:#059669;border-color:#6ee7b7;background:#ecfdf5} .shsat-qcard{border:1px solid #cbd5e1;border-top:none;background:var(--paper);padding:24px} .shsat-qmeta{font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px} .shsat-qtext{font-size:16.5px;font-weight:600;line-height:1.6;color:var(--ink);margin-bottom:20px} .shsat-choices{display:flex;flex-direction:column;gap:10px} .shsat-choice{display:flex;align-items:center;gap:14px;border:1.5px solid #cbd5e1;border-radius:8px;padding:14px 16px;background:var(--paper);cursor:pointer;text-align:left;transition:all .12s;width:100%} .shsat-choice:hover{border-color:var(--ink);background:#f8fafc} .shsat-choice.sel{border-color:var(--ink);background:#f1f5f9;box-shadow:0 0 0 1px #0f172a inset} .shsat-letter{width:30px;height:30px;border-radius:6px;border:1.5px solid #94a3b8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:var(--ink-muted)} .shsat-choice.sel .shsat-letter{background:#0f172a;color:#fff;border-color:var(--ink)} .shsat-ctext{font-size:14.5px;color:#1e293b} .shsat-nav{padding:16px;background:#f8fafc;border:1px solid #cbd5e1;border-top:none;display:flex;justify-content:flex-end} .shsat-next-btn{background:#0f172a;color:#fff;border:none;border-radius:8px;padding:12px 28px;font-size:14px;font-weight:700;cursor:pointer} .shsat-next-btn:disabled{opacity:.4;cursor:not-allowed} .shsat-footer{font-size:11.5px;color:#94a3b8;text-align:center;margin-top:12px;padding:0 8px} .shsat-transition,.shsat-results{border:1px solid #cbd5e1;border-radius:8px;padding:32px;background:var(--paper);text-align:center} .shsat-transition{text-align:center} /* ===================== PROFESSIONAL CBT MODE ===================== */ .cbt-env{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;background:#f0f0f0;font-family:'DM Sans',Segoe UI,system-ui,sans-serif;color:#1a1a1a;overflow:hidden} .cbt-env *{font-family:'DM Sans',Segoe UI,system-ui,sans-serif;box-sizing:border-box} /* Reverse contrast — the universal Nextera white-on-black display option. Inverts the test surfaces only; images/figures are re-inverted so they stay readable rather than turning into negatives. */ /* Color choices — the real Nextera tool offers a set of background/text combinations. Applied as colours on the surfaces rather than a whole-screen filter:invert(1), which turned every diagram into a photographic negative. */ .cbt-env[data-cbt-colors]{--cbtc-bg:#fff;--cbtc-fg:#1a1a1a;--cbtc-panel:#fff;--cbtc-line:#888} .cbt-env[data-cbt-colors="cream"]{--cbtc-bg:#FBF3DE;--cbtc-fg:#22201A;--cbtc-panel:#FDF8EC;--cbtc-line:#B9AC8C} .cbt-env[data-cbt-colors="dark"]{--cbtc-bg:#111418;--cbtc-fg:#F2F4F7;--cbtc-panel:#1B2027;--cbtc-line:#4A5462} .cbt-env[data-cbt-colors="yellow"]{--cbtc-bg:#111111;--cbtc-fg:#FFE44D;--cbtc-panel:#1A1A1A;--cbtc-line:#6B6320} .cbt-env[data-cbt-colors="blue"]{--cbtc-bg:#0B2340;--cbtc-fg:#E8F1FF;--cbtc-panel:#12305A;--cbtc-line:#3C6394} .cbt-env[data-cbt-colors]{background:var(--cbtc-bg);color:var(--cbtc-fg)} .cbt-env[data-cbt-colors] .cbt-passage-pane, .cbt-env[data-cbt-colors] .cbt-question-pane, .cbt-env[data-cbt-colors] .cbt-main{background:var(--cbtc-bg);color:var(--cbtc-fg)} .cbt-env[data-cbt-colors] .cbt-q-choice{background:var(--cbtc-panel);color:var(--cbtc-fg);border-color:var(--cbtc-line)} .cbt-env[data-cbt-colors] .cbt-q-letter{background:var(--cbtc-panel);color:var(--cbtc-fg);border-color:var(--cbtc-line)} .cbt-env[data-cbt-colors] .cbt-passage-body, .cbt-env[data-cbt-colors] .cbt-passage-body p, .cbt-env[data-cbt-colors] .cbt-q-text{color:var(--cbtc-fg)} .cbt-env[data-cbt-colors] .cbt-passage-header{background:var(--cbtc-panel);color:var(--cbtc-fg);border-color:var(--cbtc-line)} .cbt-env button{cursor:pointer;font-family:inherit} /* CBT Top Banner */ .cbt-banner{display:flex;align-items:center;justify-content:space-between;padding:0 20px;height:48px;flex-shrink:0} .cbt-banner-nys{background:linear-gradient(180deg,#e8e8e8,#d4d4d4);border-bottom:2px solid #999} .cbt-banner-shsat{background:linear-gradient(180deg,#1a2744,#0f1b33);border-bottom:2px solid #3b5998;color:#fff} .cbt-banner-left{display:flex;align-items:center;gap:14px;font-size:14px;font-weight:600} .cbt-banner-center{font-size:13px;font-weight:700;letter-spacing:.02em} .cbt-banner-right{display:flex;align-items:center;gap:12px} .cbt-exit-btn{background:#c0392b;color:#fff;border:1px solid #922b21;border-radius:4px;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.03em} .cbt-exit-btn:hover{background:#a93226} /* CBT Timer */ .cbt-timer{font-size:14px;font-weight:700;font-family:'JetBrains Mono',monospace;padding:4px 12px;border-radius:4px;background:rgba(0,0,0,.15);color:inherit} .cbt-timer.warning{color:#e74c3c;background:rgba(231,76,60,.15)} /* CBT Toolbar (highlighter, cross-out, line reader, zoom) */ .cbt-toolbar{display:flex;align-items:center;gap:2px;padding:4px 20px;background:#e2e2e2;border-bottom:1px solid #bbb;flex-shrink:0;height:38px} .cbt-toolbar-shsat{background:#1e3050;border-bottom:1px solid #3b5998} .cbt-tool-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid transparent;border-radius:3px;font-size:12px;font-weight:600;background:transparent;color:#333;transition:background .1s} .cbt-toolbar-shsat .cbt-tool-btn{color:#c8d6e5} .cbt-tool-btn:hover{background:rgba(0,0,0,.08)} .cbt-toolbar-shsat .cbt-tool-btn:hover{background:rgba(255,255,255,.1)} .cbt-tool-btn.active{background:#3498db;color:#fff;border-color:#2980b9} .cbt-tool-sep{width:1px;height:22px;background:#bbb;margin:0 6px} .cbt-toolbar-shsat .cbt-tool-sep{background:#3b5998} /* CBT Main Content Area */ .cbt-main{flex:1;display:flex;overflow:hidden} /* CBT Split-screen (passage left, questions right) */ .cbt-passage-pane{width:48%;border-right:2px solid #bbb;background:#fafaf5;overflow-y:auto;padding:0;display:flex;flex-direction:column} .cbt-passage-header{padding:10px 20px;background:#e8e8e8;border-bottom:1px solid #ccc;font-size:12px;font-weight:700;color:#444;text-transform:uppercase;letter-spacing:.05em;flex-shrink:0} .cbt-passage-body{padding:24px 28px;font-size:15px;line-height:1.85;color:#1a1a1a;font-family:Georgia,'Times New Roman',serif;flex:1;overflow-y:auto} .cbt-passage-body p{margin:0 0 14px} .cbt-passage-body .cbt-highlight{background:#ffeb3b;padding:1px 0} .cbt-passage-body .cbt-crossout{text-decoration:line-through;color:#999} .cbt-passage-body .cbt-line-reader{position:relative} /* Highlighter: persistent with hover delete trigger */ .cbt-mark{background:#fde047;color:#000;border-radius:1px;position:relative;cursor:pointer} .cbt-mark .cbt-mark-del{position:absolute;top:-11px;right:-6px;display:none;background:#dc2626;color:#fff;font-size:10px;line-height:1;border:none;border-radius:3px;padding:2px 4px;cursor:pointer;z-index:5;box-shadow:0 1px 2px rgba(0,0,0,.3)} .cbt-mark:hover .cbt-mark-del{display:block} .cbt-highlightable.cbt-hl-cursor,.cbt-highlightable.cbt-hl-cursor *{cursor:crosshair} /* Line reader: a clear reading window between two masking panels. EVERYTHING here is pointer-events:none except the two grab targets. The window used to be `auto` so it could be dragged by its body, which meant the only strip of the screen a student could see was also the only strip that would not pass a click through — on a math item, where the overlay covers the whole content area, that made the answers unclickable while the tool was on. Dragging now lives on .cbt-lr-grip and .cbt-lr-handle, so nothing the student needs is ever blocked. touch-action:none on both: without it a touch-drag scrolls the page and the pointermove handler never sees the gesture. */ .cbt-line-reader-overlay{position:fixed;pointer-events:none;z-index:9500} .cbt-line-reader-overlay .cbt-lr-mask{position:absolute;left:0;right:0;background:rgba(24,32,48,.975);pointer-events:none} .cbt-line-reader-overlay .cbt-lr-window{position:absolute;left:0;right:0;background:transparent;border-top:2.5px solid #eab308;border-bottom:2.5px solid #eab308;pointer-events:none} /* Grab bar down the left edge of the reading window. 30px wide and full height, so it clears the 44px touch target on all but the thinnest window. */ .cbt-line-reader-overlay .cbt-lr-grip{position:absolute;left:0;top:0;bottom:0;width:30px;background:#eab308;cursor:grab;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;border-right:1.5px solid #1a2b4c} .cbt-line-reader-overlay .cbt-lr-grip::before{content:'';width:3px;height:14px;background:#1a2b4c;border-radius:2px;box-shadow:5px 0 0 #1a2b4c,-5px 0 0 #1a2b4c} .cbt-line-reader-overlay .cbt-lr-grip:active{cursor:grabbing} .cbt-line-reader-overlay .cbt-lr-grip:focus-visible{outline:3px solid #1d4ed8;outline-offset:2px} .cbt-line-reader-overlay .cbt-lr-handle{position:absolute;right:14px;bottom:-11px;width:56px;height:22px;background:#eab308;border:1.5px solid #1a2b4c;border-radius:11px;cursor:ns-resize;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center} .cbt-line-reader-overlay .cbt-lr-handle::before{content:'';width:22px;height:3px;background:#1a2b4c;border-radius:2px;box-shadow:0 5px 0 #1a2b4c,0 -5px 0 #1a2b4c} /* Visual size (56x22) stays put — this is what "looks clean" for a thin resize grip — but the actual hit area is padded out to the ~44px touch minimum with an invisible pseudo-element. Pointer events on it are the same DOM element for JS purposes, so bindLrPointer's listener on #lrHandle still fires. `bottom:-11px` + `height:22px` on .cbt-lr-handle means the handle's own vertical CENTER sits exactly on the reading window's bottom edge (11px above it, 11px below). A hit area centered on that same point would put half of itself — up to 22px — over the clear reading strip, right where a math answer choice can sit. `top:50%` + `translate(-50%,0)` (no vertical shift) anchors the hit area's TOP edge at that center point instead, so it only ever extends DOWN into the masked region below the window, where there is nothing for a student to click through. */ .cbt-line-reader-overlay .cbt-lr-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,0);width:44px;height:44px;pointer-events:auto} .cbt-question-pane{flex:1;display:flex;flex-direction:column;background:var(--paper);overflow:hidden} .cbt-question-header{padding:10px 20px;background:#f5f5f0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;align-items:center;flex-shrink:0} .cbt-question-num{font-size:13px;font-weight:700;color:#333} .cbt-question-body{flex:1;overflow-y:auto;padding:24px 28px} .cbt-q-text{font-size:15px;font-weight:600;line-height:1.6;color:#1a1a1a;margin-bottom:20px} .cbt-q-choices{display:flex;flex-direction:column;gap:8px} .cbt-q-choice{display:flex;align-items:flex-start;gap:12px;border:1.5px solid #ccc;border-radius:4px;padding:12px 14px;background:var(--paper);text-align:left;font-size:14px;color:#1a1a1a;transition:border-color .12s,background .12s;width:100%} .cbt-q-choice:hover{border-color:#666;background:#f9f9f5;transform:translateX(2px)} .cbt-q-choice:active{transform:scale(.99)} .cbt-q-choice.selected{border-color:#1e3a8a;background:#e8f0fe;animation:choicePop .22s ease} @keyframes choicePop{0%{transform:scale(1)}45%{transform:scale(1.02)}100%{transform:scale(1)}} .cbt-q-choice.selected .cbt-q-letter{animation:letterPop .3s ease} @keyframes letterPop{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(1)}} .cbt-q-choice.cbt-crossout-choice{opacity:.4} .cbt-q-choice.cbt-crossout-choice .cbt-q-choice-text{text-decoration:line-through;text-decoration-color:#dc2626;text-decoration-thickness:2px;color:#8a8a8a} .cbt-q-choice.cbt-crossout-choice:hover{border-color:#ccc;background:var(--paper)} .cbt-q-letter{width:26px;height:26px;border-radius:50%;border:1.5px solid #999;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;color:#555;background:#f5f5f5} .cbt-q-choice.selected .cbt-q-letter{background:#1e3a8a;color:#fff;border-color:#1e3a8a} .cbt-q-choice-text{flex:1;line-height:1.5} /* CBT Navigation Grid (numbered 1-50) */ .cbt-nav-strip{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;background:#e8e8e8;border-top:2px solid #bbb;flex-shrink:0;gap:10px} .cbt-nav-strip-shsat{background:#1e3050;border-top:2px solid #3b5998} .cbt-nav-grid{display:flex;flex-wrap:wrap;gap:3px;flex:1;justify-content:center} .cbt-nav-cell{position:relative;width:28px;height:28px;border:1px solid #b0b0b0;border-radius:2px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;background:#f1f1f1;color:#777;cursor:pointer} .cbt-nav-strip-shsat .cbt-nav-cell{border-color:#3b5998;background:#243a5e;color:#8ea3c4} .cbt-nav-cell:hover{filter:brightness(.95)} /* visited but not yet answered: blue outline */ .cbt-nav-cell.visited{border:2px solid #2563eb;background:var(--paper);color:#2563eb;font-weight:800} .cbt-nav-strip-shsat .cbt-nav-cell.visited{border-color:#5b9bd5;background:#1b2c49;color:#cfe0f5} /* answered: solid blue */ .cbt-nav-cell.answered{background:#1e40af;color:#fff;border-color:#1e40af;font-weight:800} .cbt-nav-strip-shsat .cbt-nav-cell.answered{background:#2c5282;color:#e2e8f0;border-color:#2c5282} /* current question ring */ .cbt-nav-cell.current{outline:2px solid #f59e0b;outline-offset:1px;z-index:1} /* flagged: orange triangle in corner */ .cbt-nav-cell.flagged::after{content:'';position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 8px 8px 0;border-color:transparent #f97316 transparent transparent} .cbt-nav-arrows{display:flex;gap:6px} .cbt-nav-btn{padding:6px 18px;border:1px solid #999;border-radius:3px;font-size:13px;font-weight:700;background:var(--paper);color:#333} .cbt-nav-btn:hover{background:#eee} .cbt-nav-btn.primary{background:#1e3a8a;color:#fff;border-color:#1e3a8a} .cbt-nav-strip-shsat .cbt-nav-btn{background:#243a5e;color:#c8d6e5;border-color:#3b5998} .cbt-nav-strip-shsat .cbt-nav-btn.primary{background:#3498db;color:#fff;border-color:#2980b9} /* CBT Grid-In (SHSAT Math) */ .cbt-gridin-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px} .cbt-gridin-display{font-size:28px;font-weight:700;font-family:'JetBrains Mono',monospace;letter-spacing:6px;min-height:40px;border-bottom:2px solid #333;padding:4px 16px;min-width:120px;text-align:center} .cbt-gridin-pad{display:grid;grid-template-columns:repeat(5,44px);gap:4px} .cbt-gridin-key{width:44px;height:40px;border:1px solid #999;border-radius:3px;font-size:16px;font-weight:700;background:var(--paper);display:flex;align-items:center;justify-content:center} .cbt-gridin-key:hover{background:#e8f0fe} .cbt-gridin-key.active{background:#1e3a8a;color:#fff} /* CBT Essay/Short Response */ .cbt-textarea{width:100%;min-height:180px;border:1.5px solid #bbb;border-radius:4px;padding:16px;font-size:15px;font-family:Georgia,serif;line-height:1.8;color:#1a1a1a;resize:vertical;background:var(--paper)} .cbt-textarea:focus{outline:none;border-color:#1e3a8a;box-shadow:0 0 0 1px #1e3a8a} /* CBT Confirm Modal */ .cbt-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9600;display:flex;align-items:center;justify-content:center} .cbt-modal{background:var(--paper);border:2px solid #999;border-radius:6px;padding:28px;max-width:420px;width:90%;text-align:center} .cbt-modal h3{font-size:18px;margin:0 0 10px;font-weight:700} .cbt-modal p{font-size:14px;color:#555;margin:0 0 20px;line-height:1.5} .cbt-modal-btns{display:flex;gap:10px;justify-content:center} .cbt-modal-btn{padding:10px 24px;border-radius:4px;font-size:14px;font-weight:700;border:1px solid #999;background:var(--paper);color:#333} .cbt-modal-btn.primary{background:#1e3a8a;color:#fff;border-color:#1e3a8a} .cbt-modal-btn.danger{background:#c0392b;color:#fff;border-color:#922b21} .cbt-modal-btn:disabled{opacity:.4;cursor:not-allowed} /* CBT Zoom controller (toolbar) */ .cbt-zoom-group{display:flex;align-items:center;gap:4px;margin-left:auto} .cbt-zoom-btn{width:28px;height:26px;border:1px solid #bbb;border-radius:3px;background:var(--paper);font-weight:800;font-size:15px;line-height:1;color:#333;display:flex;align-items:center;justify-content:center} .cbt-zoom-btn:disabled{opacity:.4;cursor:default} .cbt-zoom-label{font-size:11px;font-weight:700;color:#555;min-width:38px;text-align:center} .cbt-toolbar-shsat .cbt-zoom-btn{background:#243a5e;color:#c8d6e5;border-color:#3b5998} .cbt-toolbar-shsat .cbt-zoom-label{color:#c8d6e5} /* CBT multi-stage submit gate */ .cbt-modal.cbt-modal-wide{max-width:500px;text-align:left} .cbt-submit-warn{font-weight:800;color:#b45309;margin:0 0 10px;font-size:16px} .cbt-submit-row{font-size:13.5px;color:#333;margin:0 0 10px;line-height:1.6} .cbt-submit-missed{color:#dc2626;font-size:13px;font-weight:700;line-height:1.7;margin:2px 0 12px;word-break:break-word;max-height:120px;overflow-y:auto} .cbt-submit-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#222;margin:16px 0 4px;cursor:pointer;user-select:none} .cbt-submit-check input{margin-top:2px;width:16px;height:16px;flex-shrink:0;cursor:pointer} /* CBT: No-passage single-pane layout */ .cbt-single-pane .cbt-passage-pane{display:none} .cbt-single-pane .cbt-question-pane{width:100%} /* CBT Results */ .cbt-results{max-width:700px;margin:40px auto;padding:32px;background:var(--paper);border:1px solid #ccc;border-radius:6px} .cbt-results h2{font-size:22px;font-weight:800;margin:0 0 6px;text-align:center} .cbt-results-sub{font-size:14px;color:#555;text-align:center;margin-bottom:20px} .cbt-results-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:24px} .cbt-results-card{border:1px solid #ddd;border-radius:4px;padding:16px;text-align:center;background:#f8f8f8} .cbt-results-card .val{font-size:28px;font-weight:800;color:#1e3a8a} .cbt-results-card .lbl{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.04em;margin-top:4px} .cbt-results-section{border:1px solid #ddd;border-radius:4px;padding:18px;margin-bottom:16px} .cbt-results-section h3{font-size:15px;font-weight:700;margin:0 0 12px} .cbt-results-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-top:4px;margin-bottom:10px} .cbt-results-bar-fill{height:100%;border-radius:4px} @media(max-width:760px){ .dashboard-widgets{grid-template-columns:1fr !important} .topic-card:nth-child(odd),.topic-card:nth-child(even){transform:none} .topic-card:nth-child(odd):hover,.topic-card:nth-child(even):hover{transform:translateY(-5px)} .nav{flex-wrap:wrap;gap:8px} .btn,.btn-doodle{width:100%} #tierCardsGrid{grid-template-columns:1fr !important} .cbt-passage-pane{width:100%;border-right:none;border-bottom:2px solid #bbb;max-height:40vh} .cbt-main{flex-direction:column} .cbt-nav-cell{width:24px;height:24px;font-size:10px} } @media(max-width:600px){ .exam-cover,.exam-review,.exam-results,.shsat-qcard{padding:18px} .exam-qcard{padding:16px} } .doodle-guy{display:inline-block;vertical-align:middle} .ui-ic-wrap{display:inline} .ui-ic{display:inline-flex;align-items:center;justify-content:center} .ui-ic svg{width:1.05em;height:1.05em;vertical-align:-0.16em;display:inline-block} .doodle-float{position:absolute;pointer-events:none;opacity:.18;z-index:0} .doodle-inline{display:inline-block;vertical-align:middle;margin:0 4px} /* ===================== CBT VISUAL REFRESH ===================== Professional testing-platform skin (Nextera/Pearson-style): calm neutrals, generous spacing, crisp states. Overrides only — the exam logic and structure are untouched. */ .cbt-env{background:#E9EDF3} .cbt-banner{height:54px;box-shadow:0 1px 0 rgba(15,23,42,.18)} .cbt-banner-left span:first-child{letter-spacing:.02em} .cbt-timer{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px;letter-spacing:.04em;background:rgba(255,255,255,.14);padding:5px 12px;border-radius:8px} .cbt-exit-btn{border-radius:8px;font-weight:600} .cbt-toolbar{background:var(--paper);border-bottom:1px solid #D8DEE9;padding:6px 14px;gap:2px} .cbt-tool-btn{border-radius:8px;padding:7px 12px;font-weight:600;color:var(--ink)} .cbt-tool-btn:hover{background:#EFF3FA} .cbt-tool-btn.active{background:#DBEAFE;color:#1D4ED8;box-shadow:inset 0 0 0 1.5px #1D4ED8} .cbt-zoom-btn{border-radius:6px} .cbt-passage-pane{background:var(--paper);border-right:1px solid #D8DEE9} .cbt-passage-header{background:#F4F6FA;border-bottom:1px solid #E2E8F0;color:#64748B} .cbt-passage-body{font-size:16px;line-height:1.9;color:#1E293B;padding:28px 34px;max-width:680px} .cbt-question-pane{background:#FBFCFE} .cbt-question-header{background:#F4F6FA;border-bottom:1px solid #E2E8F0;padding:12px 24px} .cbt-question-num{font-weight:700;color:var(--ink);font-size:13.5px;letter-spacing:.01em} .cbt-question-body{padding:30px 36px 40px} .cbt-question-body > *{max-width:780px;margin-left:auto;margin-right:auto} .cbt-q-text{font-size:17px;line-height:1.75;color:#0F172A;margin-bottom:22px} .cbt-q-choices{display:flex;flex-direction:column;gap:10px} .cbt-q-choice{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid #CBD5E1;border-radius:12px;background:var(--paper);font-size:15.5px;line-height:1.55;color:#1E293B;text-align:left;transition:border-color .12s, background .12s, box-shadow .12s;cursor:pointer} .cbt-q-choice:hover{border-color:#3B82F6;background:#F8FAFF} .cbt-q-choice:active{transform:none} .cbt-q-choice.selected{border-color:#1D4ED8;background:#EFF6FF;box-shadow:inset 0 0 0 1.5px #1D4ED8} .cbt-q-letter{width:30px;height:30px;flex-shrink:0;border:1.5px solid #94A3B8;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:var(--ink-muted);background:var(--paper)} .cbt-q-choice.selected .cbt-q-letter{background:#1D4ED8;border-color:#1D4ED8;color:#fff} .cbt-q-choice.cbt-crossout-choice{opacity:.5} .cbt-nav-strip{background:var(--paper);border-top:1px solid #D8DEE9;padding:10px 16px;box-shadow:0 -2px 8px rgba(15,23,42,.05)} .cbt-nav-cell{border-radius:8px;border:1.5px solid #CBD5E1;font-weight:600;font-size:12px;color:var(--ink-muted);background:var(--paper);transition:all .1s} .cbt-nav-cell:hover{border-color:#3B82F6;color:#1D4ED8} .cbt-nav-cell.answered{background:#DCFCE7;border-color:#16A34A;color:#166534} .cbt-nav-cell.current{background:#1D4ED8;border-color:#1D4ED8;color:#fff;box-shadow:0 0 0 3px #BFDBFE} .cbt-nav-btn{border-radius:10px;font-weight:700;padding:9px 18px;border:1.5px solid #CBD5E1;background:var(--paper);color:var(--ink)} .cbt-nav-btn:hover{border-color:#94A3B8;background:#F8FAFC} .cbt-nav-btn.primary{background:#1D4ED8;border-color:#1D4ED8;color:#fff} .cbt-nav-btn.primary:hover{background:#1E40AF} /* question palette: ONE compact scrolling row (real CBT style), never a wall */ .cbt-nav-strip{display:flex;align-items:center;gap:14px;flex-wrap:nowrap} .cbt-nav-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;flex:1;justify-content:flex-start;padding:4px 2px;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .cbt-nav-cell,.cbt-nav-strip-shsat .cbt-nav-cell{flex:0 0 auto;width:34px;height:34px;border-radius:8px;border:1.5px solid #CBD5E1;font-weight:700;font-size:12px;color:var(--ink-muted);background:var(--paper)} .cbt-nav-cell:hover,.cbt-nav-strip-shsat .cbt-nav-cell:hover{border-color:#3B82F6;color:#1D4ED8;background:#F8FAFF} .cbt-nav-cell.visited,.cbt-nav-strip-shsat .cbt-nav-cell.visited{background:#F1F5F9;color:#64748B} .cbt-nav-cell.answered,.cbt-nav-strip-shsat .cbt-nav-cell.answered{background:#DCFCE7;border-color:#16A34A;color:#166534} .cbt-nav-cell.current,.cbt-nav-strip-shsat .cbt-nav-cell.current{background:#1D4ED8;border-color:#1D4ED8;color:#fff;box-shadow:0 0 0 3px #BFDBFE} .cbt-nav-arrows{flex-shrink:0;display:flex;gap:8px} @media(max-width:640px){.cbt-nav-strip{flex-wrap:wrap}.cbt-nav-arrows{width:100%;justify-content:center}} /* ===== Nextera-style shell (photo-matched): trunk, qbar, bottom toolbar ===== */ .cbt-trunk{display:flex;align-items:center;justify-content:space-between;height:40px;background:#334155;color:#fff;padding:0 14px;font-size:13px;flex-shrink:0} .cbt-trunk-left{display:flex;align-items:center;gap:10px} .cbt-dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;display:inline-block} .cbt-trunk-ctx{opacity:.85} .cbt-trunk-right{display:flex;align-items:center;gap:14px} .cbt-trunk-student{opacity:.9;font-weight:600} .cbt-qbar{display:flex;align-items:center;height:52px;background:#475569;color:#fff;padding:0 14px;flex-shrink:0;gap:10px} .cbt-review-btn{background:#2563EB;color:#fff;border:none;border-radius:6px;padding:9px 18px;font-weight:700;font-size:14px;cursor:pointer} .cbt-review-btn:hover{background:#1D4ED8} .cbt-qbar-title{flex:1;text-align:center;font-size:21px;font-weight:800;letter-spacing:.01em} .cbt-qbar-arrows{display:flex;gap:8px} .cbt-arrow{width:42px;height:36px;border:none;border-radius:6px;background:#E2E8F0;color:#1E293B;font-size:15px;cursor:pointer;font-weight:700} .cbt-arrow:hover{background:var(--paper)} .cbt-bottombar{display:flex;align-items:center;justify-content:center;gap:6px;height:62px;background:#F1F3F5;border-top:1px solid #D1D5DB;flex-shrink:0;flex-wrap:wrap;padding:0 8px;overflow-x:auto} .cbt-tbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:76px;height:52px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--ink);padding:4px 10px} .cbt-tbtn:hover{background:#E2E8F0} .cbt-tbtn.active{background:#DBEAFE;color:#1D4ED8;box-shadow:inset 0 0 0 1.5px #1D4ED8} .cbt-tbtn.nozoom{cursor:default} .cbt-tbtn.nozoom:hover{background:none} .cbt-tico{width:21px;height:21px} .cbt-tlbl{font-size:10.5px;font-weight:600;white-space:nowrap} /* Marks a tool that is an IEP/504 accommodation on the real test rather than a general tool every student gets. */ .cbt-tacc{font-size:7.5px;font-weight:800;letter-spacing:.04em;vertical-align:super;margin-left:3px;padding:1px 3px;border-radius:3px;background:#E0E7FF;color:#3730A3} .cbt-zoomgrp{display:flex;gap:5px} .cbt-zbtn{width:24px;height:24px;border:1px solid #CBD5E1;border-radius:5px;background:var(--paper);font-weight:700;cursor:pointer} /* bigger exam type */ .cbt-q-text{font-size:18.5px;line-height:1.8} .cbt-q-choice{font-size:16.5px;padding:16px 20px} .cbt-q-letter{width:33px;height:33px;font-size:14.5px} .cbt-passage-body{font-size:17px;line-height:1.95} /* review screen */ .cbt-rv{position:absolute;inset:0;z-index:30;background:#F3F4F6;display:flex;flex-direction:column} .cbt-rv-head{display:flex;align-items:center;justify-content:space-between;background:#475569;color:#fff;height:52px;padding:0 18px;flex-shrink:0} .cbt-rv-title{font-size:20px;font-weight:800} .cbt-rv-close{background:#2563EB;color:#fff;border:none;border-radius:6px;padding:9px 18px;font-weight:700;cursor:pointer} .cbt-rv-submit{background:#16A34A;color:#fff;border:none;border-radius:6px;padding:9px 18px;font-weight:700;cursor:pointer} .cbt-rv-submit:hover{background:#15803D} .cbt-rv-close:hover{background:#1D4ED8} .cbt-rv-body{flex:1;overflow-y:auto;padding:22px 26px 40px} .cbt-rv-sec{margin-bottom:26px} .cbt-rv-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:2px solid #CBD5E1;padding-bottom:8px;margin-bottom:14px} .cbt-rv-sec-h span:first-child{font-size:18px;font-weight:800;color:#1E293B} .cbt-rv-sec-sub{font-size:13px;color:#64748B;font-weight:600} .cbt-rv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px} .cbt-rv-tile{position:relative;height:92px;background:var(--paper);border:1.5px solid #CBD5E1;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:border-color .1s, box-shadow .1s} .cbt-rv-tile:hover{border-color:#2563EB;box-shadow:0 2px 8px rgba(37,99,235,.18)} .cbt-rv-tile.cur{border-color:#1D4ED8;box-shadow:inset 0 0 0 2px #1D4ED8} .cbt-rv-num{font-size:34px;font-weight:800;color:#1F2937;line-height:1} .cbt-rv-badge{font-size:11px;font-weight:700} .cbt-rv-badge.ok{color:#166534} .cbt-rv-badge.no{color:#B45309} .cbt-rv-flag{position:absolute;top:6px;right:9px;color:#DC2626;font-size:13px} #cbtNavStrip{display:none !important} .essay-tab.sel{background:var(--primary-navy);color:#fff} /* tool panels */ .cbt-panel{position:absolute;z-index:40;background:var(--paper);border:1.5px solid #94A3B8;border-radius:10px;box-shadow:0 10px 30px rgba(15,23,42,.25);overflow:hidden} .cbt-panel-h{display:flex;align-items:center;justify-content:space-between;background:#334155;color:#fff;padding:8px 12px;font-size:13px;font-weight:700;cursor:grab;user-select:none;touch-action:none} .cbt-panel-h:active{cursor:grabbing} .cbt-panel-x{background:none;border:none;color:#fff;font-size:13px;cursor:pointer} .cbt-panel-b{padding:12px} .cbt-notes-ta{width:100%;height:160px;border:1px solid #CBD5E1;border-radius:8px;padding:10px;font-family:'DM Sans',sans-serif;font-size:14px;resize:vertical;box-sizing:border-box} .cbt-ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .cbt-ref-cell{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px;padding:9px 10px;font-size:12.5px;font-weight:600;color:#1E293B} .cbt-calc-note{font-size:11px;color:#B45309;background:#FEF3C7;border-radius:6px;padding:5px 8px;margin-bottom:8px;font-weight:600} .cbt-calc-disp{background:#0F172A;color:#F8FAFC;border-radius:8px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:22px;text-align:right;margin-bottom:10px;min-height:30px;overflow:hidden} .cbt-calc-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .cbt-calc-key{height:40px;border:1px solid #CBD5E1;border-radius:8px;background:#F1F5F9;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink)} .cbt-calc-key.num{background:var(--paper)} .cbt-calc-key:active{background:#DBEAFE} .cbt-ruler{position:relative;height:64px;background:linear-gradient(180deg,#FDF6E3,#FBEEC9);border:1.5px solid #111;border-radius:6px} /* answer masking */ .cbt-masking .cbt-q-choice:not(.unmasked){position:relative} .cbt-masking .cbt-q-choice:not(.unmasked) > *{visibility:hidden} .cbt-masking .cbt-q-choice:not(.unmasked)::after{content:'Click to reveal';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#E2E8F0,#E2E8F0 12px,#EDF2F7 12px,#EDF2F7 24px);border-radius:10px;font-weight:700;color:#64748B;font-size:13.5px;visibility:visible} /* exam math rendering */ .cbt-q-text .ams-frac,.cbt-q-choice .ams-frac{font-size:.95em} /* Whose menu is this? [G20 / #29] Only rendered when a child profile is active — see amsSyncNavIdentity() in features.js. */ .nav-who{display:flex;flex-direction:column;gap:2px;margin:2px 0 14px;padding:10px 12px; background:var(--accent-amber-soft, #FFF8E7);border:2px solid var(--accent-amber); border-radius:12px;font-family:var(--font-body)} .nav-who-l{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)} .nav-who b{font-family:var(--font-display);font-size:18px;color:var(--primary-navy);line-height:1.15} .nav-who-g{font-size:11.5px;color:var(--ink-muted)} /* =========================================================================== ACCESSIBILITY The arcade is a game, but the practice, the exams and the parent dashboard are the product, and much of the app assumed a mouse. These are the fixes for the barriers that actually stop someone using it — plus the ones a school's procurement review will ask about. =========================================================================== */ /* Visible only when focused, which is the point: the first Tab on any page offers a jump past the header instead of making a keyboard user walk it. */ .skip-link{position:absolute;left:8px;top:-60px;z-index:100000;background:var(--paper); color:var(--primary-navy);border:2.5px solid var(--primary-navy);border-radius:0 0 12px 12px; box-shadow:3px 3px 0 var(--primary-navy);padding:10px 18px;font-family:var(--font-display); font-weight:700;font-size:15px;text-decoration:none;transition:top .15s ease} .skip-link:focus{top:0} /* One consistent, high-contrast focus ring everywhere. A keyboard user has to be able to see where they are; :focus-visible means a mouse click does not light it up, so nothing looks broken for everyone else. */ :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid var(--accent-amber); outline-offset:2px; border-radius:4px; } /* These four cleared the outline on focus with nothing put back, so a keyboard user writing an essay could not tell which box they were in. */ .essay-ta:focus-visible,.onboarding-card textarea:focus-visible, .exam-textarea:focus-visible,.cbt-textarea:focus-visible{ outline:3px solid var(--accent-amber);outline-offset:1px} /* Announced to a screen reader, invisible on screen. Used for game state that is otherwise only drawn on a canvas. */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} /* A canvas is a picture to assistive tech. Give the games' boards a name and keep them reachable so a keyboard user can at least focus and be told what is there. */ canvas[role="img"]{outline-offset:3px}