@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');

:root { --page:#f5f5f0; --page-alt:#edece6; --ink:#141715; --muted:#6d716d; --line:rgba(20,23,21,.13); --card:#ffffff; --hero:#14242b; --hero-soft:#1b3037; --hero-text:#f8f7f1; --accent:#b8ee70; --accent-ink:#1f3423; --blue:#5f75f4; --purple:#a98cf7; --peach:#ffad82; --yellow:#f8d75b; --shadow:0 24px 60px rgba(22,28,25,.12); --radius:28px; }

[data-theme="dark"] { --page:#101311; --page-alt:#161a17; --ink:#f5f6f0; --muted:#a2a8a2; --line:rgba(245,246,240,.13); --card:#1b211e; --hero:#071419; --hero-soft:#0d2128; --hero-text:#f8f7f1; --accent:#b8ee70; --accent-ink:#1d3222; --shadow:0 24px 60px rgba(0,0,0,.32); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; font-family:"DM Sans",Arial,sans-serif; background:var(--page); color:var(--ink); transition:background .25s ease,color .25s ease; }
button,a { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.skip-link { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:16px; top:16px; width:auto; height:auto; z-index:100; padding:10px 14px; background:var(--accent); color:#101510; border-radius:8px; }
.section-shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }

.site-header { width:min(1280px,calc(100% - 48px)); height:86px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-size:19px; font-weight:700; letter-spacing:-.6px; }
.brand-mark,.tiny-mark { display:grid; place-items:center; color:#112016; background:var(--accent); font-family:Georgia,serif; font-style:italic; font-weight:700; }
.brand-mark { width:28px; height:28px; border-radius:9px; font-size:20px; padding-bottom:3px; }
.desktop-nav { display:flex; align-items:center; gap:30px; margin-left:80px; }
.desktop-nav a,.sign-in { color:var(--muted); font-size:14px; font-weight:500; transition:color .2s; }
.sign-in { padding:0; border:0; background:transparent; }
.desktop-nav a:hover,.sign-in:hover { color:var(--ink); }
.header-actions { display:flex; align-items:center; gap:19px; }
.theme-toggle { border:1px solid var(--line); background:transparent; color:var(--ink); height:34px; padding:0 10px; display:flex; gap:7px; align-items:center; border-radius:17px; font-size:12px; font-weight:600; }
.theme-icon { font-size:16px; line-height:1; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:14px; padding:0 20px; border:1px solid transparent; font-weight:600; font-size:14px; transition:transform .2s,box-shadow .2s,background .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.13); }
.button-small { min-height:40px; padding:0 14px; border-radius:11px; color:#122018; background:var(--accent); font-size:13px; }
.button-primary { background:var(--accent); color:#18251a; }
.button-inverted { background:#f4f3eb; color:#182019; }

.hero { position:relative; overflow:hidden; min-height:660px; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; background:var(--hero); color:var(--hero-text); border-radius:32px; padding:72px 62px 72px; }
.hero:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,rgba(255,255,255,.035),transparent 38%); }
.hero-copy { position:relative; z-index:2; max-width:480px; }
.eyebrow { margin:0 0 19px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(184,238,112,.13); }
.hero .eyebrow,.light-eyebrow { color:#b8c3c0; }
h1,h2,h3,h4,p { margin-top:0; }
h1,h2 { font-weight:500; letter-spacing:-2.8px; line-height:.98; }
h1 { margin-bottom:24px; font-size:clamp(52px,6.1vw,80px); }
h2 { font-size:clamp(38px,4vw,59px); }
h1 em,h2 em,.lesson-content em { font-family:Fraunces,Georgia,serif; font-weight:500; }
.hero-description { max-width:405px; color:#b8c3c0; font-size:17px; line-height:1.58; }
.hero-actions { margin-top:33px; display:flex; align-items:center; gap:24px; }
.text-link { display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:5px; text-decoration-color:color-mix(in srgb,currentColor 32%,transparent); }
.hero-proof { margin-top:55px; display:flex; align-items:center; gap:12px; color:#aab8b4; font-size:12px; }
.hero-proof p { margin:0; }
.hero-proof strong { color:#edf0e8; font-weight:500; }
.avatar-stack { display:flex; }
.avatar-stack span { display:grid; place-items:center; width:27px; height:27px; margin-left:-7px; border:2px solid var(--hero); border-radius:50%; background:#b8ee70; color:#203022; font-size:11px; font-weight:700; }
.avatar-stack span:first-child { margin-left:0; background:#f6b9d6; }.avatar-stack span:nth-child(2) { background:#b8d5f7; }

.hero-art { position:relative; min-height:515px; margin-right:-24px; }
.grain { position:absolute; inset:-20%; opacity:.38; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); mix-blend-mode:overlay; pointer-events:none; }
.orb { position:absolute; border-radius:50%; filter:blur(1px); }.orb-one { width:235px; height:235px; right:2%; top:-18px; background:rgba(111,166,168,.33); }.orb-two { width:170px; height:170px; bottom:16px; left:5%; background:rgba(184,238,112,.16); }
.dashboard-window { position:absolute; z-index:1; width:650px; max-width:100%; top:28px; right:-72px; overflow:hidden; background:#eff1eb; color:#17201f; border:1px solid rgba(255,255,255,.23); border-radius:18px; box-shadow:0 35px 70px rgba(0,0,0,.34); transform:rotate(-2deg); }
.window-bar { height:48px; display:flex; align-items:center; padding:0 16px; border-bottom:1px solid #d5dad4; background:#f6f7f2; font-size:10px; }.window-brand { display:flex; align-items:center; gap:6px; font-weight:700; }.tiny-mark { width:17px; height:17px; border-radius:5px; font-size:13px; padding-bottom:2px; }.window-pills { display:flex; gap:5px; margin-left:auto; margin-right:15px; }.window-pills span { width:7px; height:7px; border-radius:50%; background:#d1d6cf; }.window-avatar { display:grid; place-items:center; width:21px; height:21px; background:#e8b493; border-radius:50%; font-size:7px; font-weight:700; }
.window-body { display:flex; min-height:380px; }.mini-sidebar { display:flex; width:52px; padding:16px 0; align-items:center; flex-direction:column; gap:19px; background:#e4e8e2; color:#88928b; font-size:14px; }.mini-sidebar span { display:grid; place-items:center; width:27px; height:27px; }.mini-sidebar .mini-active { border-radius:8px; background:#1c2c30; color:#d9faad; }
.dashboard-content { flex:1; padding:24px 25px 20px; }.dash-heading { display:flex; justify-content:space-between; align-items:start; }.dash-heading p { margin:0 0 5px; color:#85908a; font-size:10px; }.dash-heading h2 { margin:0; letter-spacing:-1px; font-size:22px; }.dash-heading button { display:grid; place-items:center; width:28px; height:28px; border:0; border-radius:8px; color:#10201e; background:#b8ee70; font-size:20px; }
.dash-grid { display:grid; grid-template-columns:1.25fr 1.1fr .75fr; gap:10px; margin-top:20px; }.today-card,.graph-card,.progress-card,.subject-strip { border:1px solid #d7ddd6; background:#f9faf7; border-radius:11px; }.today-card,.graph-card,.progress-card { padding:13px; }.card-label { display:flex; justify-content:space-between; color:#7e8881; font-size:9px; }.date { margin:13px 0 9px; font-size:11px; font-weight:700; }.class-row { display:grid; grid-template-columns:30px 1fr 17px; align-items:center; min-height:32px; margin-top:5px; padding:0 7px; border-radius:6px; font-size:8px; }.class-row span { color:#6e716d; }.class-row strong { font-weight:600; }.class-row i { display:grid; place-items:center; width:16px; height:16px; border-radius:5px; color:#fff; font-style:normal; }.class-row.purple { background:#eee8ff; }.class-row.purple i { background:#9275ea; }.class-row.blue { background:#e1f0ff; }.class-row.blue i { background:#5c9fe8; }.class-row.peach { background:#feeee1; }.class-row.peach i { background:#e88e4f; }
.graph-card svg { width:100%; height:112px; margin-top:8px; }.graph-grid { fill:none; stroke:#e4e8e3; stroke-width:1; }.graph-axis { fill:none; stroke:#abb5ad; stroke-width:1; }.graph-line { fill:none; stroke:#5473ec; stroke-width:2.5; }.graph-point { fill:#5473ec; stroke:#eff1eb; stroke-width:2; }.graph-card p { margin:2px 0 0; font-size:8px; }.blue-dot { display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:#5473ec; }.progress-summary { display:flex; align-items:end; gap:7px; margin-top:34px; }.progress-summary strong { font-size:30px; line-height:.8; }.progress-summary span { color:#89928d; font-size:8px; line-height:1.15; }.bars { display:flex; align-items:end; height:51px; gap:5px; margin-top:18px; }.bars i { width:9px; border-radius:5px 5px 0 0; background:#d7eac3; }.bars i:nth-child(1){height:24%}.bars i:nth-child(2){height:47%}.bars i:nth-child(3){height:35%}.bars i:nth-child(4){height:72%;background:#b8ee70}.bars i:nth-child(5){height:59%;background:#b8ee70}.bars i:nth-child(6){height:90%;background:#7dbf77}.bars i:nth-child(7){height:68%;background:#7dbf77}
.subject-strip { display:flex; align-items:center; gap:9px; margin-top:10px; padding:10px 12px; }.subject-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:8px; font-size:14px; }.subject-icon.yellow { background:#ffedb8; }.subject-strip strong,.subject-strip small { display:block; }.subject-strip strong { font-size:9px; }.subject-strip small { margin-top:3px; color:#89918b; font-size:8px; }.subject-strip button { margin-left:auto; border:0; background:transparent; color:#596e67; font-size:8px; font-weight:600; }
.floating-note { position:absolute; z-index:2; bottom:25px; left:-23px; display:flex; align-items:center; gap:10px; width:176px; padding:11px; border-radius:13px; color:#173026; background:#d9ff9d; box-shadow:0 14px 25px rgba(0,0,0,.17); transform:rotate(4deg); }.floating-note p { margin:0; font-size:9px; line-height:1.35; }.floating-note strong { font-size:11px; }.note-star { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#f4adcf; }.note-arrow { margin-left:auto; font-size:16px; }

.intro { padding:146px 0 130px; }.intro-heading { display:flex; gap:70px; align-items:end; justify-content:space-between; }.intro-heading h2 { margin:0; }.intro-heading > p { width:315px; margin:0 2px 7px 0; color:var(--muted); font-size:15px; line-height:1.6; }.pillars { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:57px; }.pillar { min-height:295px; padding:21px; border:1px solid var(--line); border-radius:18px; background:var(--card); transition:transform .25s,box-shadow .25s; }.pillar:hover { transform:translateY(-5px); box-shadow:var(--shadow); }.pillar-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#18231d; font-size:23px; }.pillar-calculate .pillar-icon { background:#cef1f1; }.pillar-organize .pillar-icon { background:#e9ddff; }.pillar-learn .pillar-icon { background:#ffe8ba; }.pillar-play .pillar-icon { background:#ffd4e2; }.pillar-number { margin:47px 0 8px; color:var(--muted); font-family:"DM Mono",monospace; font-size:11px; }.pillar h3 { margin-bottom:9px; font-size:22px; letter-spacing:-.8px; }.pillar > p:not(.pillar-number) { min-height:57px; margin-bottom:16px; color:var(--muted); font-size:13px; line-height:1.5; }.pillar a { color:var(--ink); font-size:12px; font-weight:600; }.pillar a span { margin-left:4px; }

.calculator-showcase { background:#162a31; color:#f6f7f2; }.feature-split { display:grid; grid-template-columns:.78fr 1.22fr; gap:62px; align-items:center; min-height:760px; padding:100px 0; }.feature-copy h2 { margin:0 0 22px; }.feature-copy > p:not(.eyebrow) { max-width:350px; color:#b9c6c3; font-size:15px; line-height:1.7; }.check-list { display:grid; gap:13px; padding:0; margin:30px 0 33px; list-style:none; color:#e7eee9; font-size:13px; }.check-list span { display:inline-grid; place-items:center; width:17px; height:17px; margin-right:9px; border-radius:50%; background:#b8ee70; color:#1b2d25; font-size:10px; font-weight:700; }
.calculator-device { overflow:hidden; background:#080a0a; border:1px solid rgba(255,255,255,.17); border-radius:20px; box-shadow:0 30px 70px rgba(0,0,0,.4); font-family:"DM Sans",sans-serif; }.calculator-top { height:59px; display:flex; align-items:center; padding:0 19px; border-bottom:1px solid #2b2e2d; color:#e9ebe5; }.calc-brand { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:700; }.calc-tabs { display:flex; gap:19px; margin:auto; color:#8d908d; font-size:9px; }.calc-tabs strong { position:relative; color:#eceee8; font-weight:500; }.calc-tabs strong:after { content:""; position:absolute; left:0; right:0; bottom:-15px; height:2px; border-radius:2px; background:#758bff; }.calc-moon { color:#d4dad4; }.calculator-main { display:grid; grid-template-columns:1fr .45fr; }.calc-work { padding:23px 20px 20px; }.calc-screen { min-height:110px; display:flex; justify-content:center; align-items:end; flex-direction:column; padding:0 4px 15px; border-bottom:1px solid #2b2e2d; }.calc-screen p { margin:0 0 9px; color:#929792; font-size:12px; }.calc-screen strong { max-width:100%; overflow:hidden; color:#f4f5f1; font-size:33px; font-weight:500; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.calc-toolbar { display:flex; gap:19px; align-items:center; min-height:40px; color:#9da29d; font-size:8px; }.calc-keypad { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }.calc-keypad button { min-height:34px; padding:0; border:0; border-radius:7px; background:#292c2b; color:#f1f2ee; font-size:12px; transition:filter .16s,transform .16s; }.calc-keypad button:hover { filter:brightness(1.2); transform:scale(1.03); }.calc-keypad .secondary { color:#c4cae9; background:#22272a; }.calc-keypad .operator { background:#353837; }.calc-keypad .equals { grid-column:span 3; color:white; background:#4867ec; }.calc-history { display:flex; flex-direction:column; padding:22px 17px 15px; border-left:1px solid #2b2e2d; color:#e4e6e2; }.calc-history > div { display:flex; justify-content:space-between; align-items:center; font-size:11px; }.calc-history > div span { padding-bottom:6px; border-bottom:2px solid #637af2; }.calc-history button { border:0; color:#878d88; background:transparent; font-size:8px; }.calc-history ul { display:grid; gap:20px; padding:0; margin:31px 0 0; list-style:none; text-align:right; }.calc-history li small,.calc-history li strong { display:block; }.calc-history li small { margin-bottom:5px; color:#888e89; font-size:8px; }.calc-history li strong { font-size:15px; font-weight:500; }.save-history { margin-top:auto; padding:0!important; color:#c7cec8!important; text-align:left; font-size:9px!important; }.save-history span { float:right; }

.workspace { padding:143px 0 126px; }.workspace-lead { display:flex; align-items:end; justify-content:space-between; margin-bottom:54px; }.workspace-lead h2 { margin:0; }.workspace-lead > p { width:315px; margin:0 0 3px; color:var(--muted); font-size:15px; line-height:1.6; }.workspace-preview { display:grid; grid-template-columns:178px 1fr; min-height:550px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:var(--shadow); }.workspace-menu { display:flex; flex-direction:column; padding:21px 13px; border-right:1px solid var(--line); }.workspace-logo { margin:0 5px 36px; }.workspace-menu a { padding:10px 9px; border-radius:7px; color:var(--muted); font-size:11px; }.workspace-menu a.active-menu { background:var(--page-alt); color:var(--ink); font-weight:600; }.workspace-menu span { flex:1; }.workspace-main { padding:37px 37px 26px; }.workspace-title { display:flex; justify-content:space-between; align-items:start; }.workspace-title p { margin:0 0 7px; color:var(--muted); font-size:11px; }.workspace-title h3 { margin:0; font-size:24px; letter-spacing:-.9px; }.workspace-title button { padding:10px 13px; border:0; border-radius:8px; background:var(--ink); color:var(--page); font-size:10px; font-weight:600; }.subject-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:31px; }.subject-card { position:relative; min-height:134px; padding:13px; border-radius:12px; color:#1e2322; }.subject-card span { display:grid; place-items:center; width:31px; height:31px; margin-bottom:27px; border-radius:9px; background:rgba(255,255,255,.54); font-size:16px; }.subject-card p { margin:0 0 4px; font-size:11px; font-weight:700; }.subject-card small { color:rgba(20,25,24,.65); font-size:9px; }.subject-card i { position:absolute; right:12px; bottom:10px; font-style:normal; }.subject-card.violet { background:#dcd1fb; }.subject-card.blue { background:#bde6f0; }.subject-card.orange { background:#ffdcbf; }.subject-card.add-card { border:1px dashed var(--line); color:var(--muted); background:transparent; }.subject-card.add-card span { background:var(--page-alt); }.workspace-bottom { display:grid; grid-template-columns:1.2fr .8fr; gap:12px; margin-top:14px; }.upcoming,.notebook { min-height:200px; padding:16px; border:1px solid var(--line); border-radius:12px; }.upcoming .card-label,.notebook .card-label { color:var(--muted); font-size:9px; }.schedule-item { display:grid; grid-template-columns:39px 9px 1fr auto; align-items:center; margin-top:19px; }.schedule-item b { font-size:9px; }.schedule-color { width:7px; height:7px; border-radius:50%; }.violet-dot { background:#9f86ed; }.blue-dot { background:#5eaaee; }.schedule-item p { margin:0; }.schedule-item strong,.schedule-item small { display:block; }.schedule-item strong { font-size:10px; }.schedule-item small { margin-top:3px; color:var(--muted); font-size:9px; }.schedule-item em { color:var(--muted); font-size:9px; font-style:normal; }.notebook { background:var(--page-alt); }.notebook h4 { margin:27px 0 8px; font-size:15px; }.handwriting { min-height:74px; color:#6657a6; font-family:Georgia,serif; font-size:16px; font-style:italic; line-height:1.35; transform:rotate(-2deg); }.handwriting span { text-decoration:overline; }.notebook small { color:var(--muted); font-size:8px; }.features-row { display:flex; justify-content:space-between; margin-top:20px; color:var(--muted); font-size:11px; }.features-row p { margin:0; }.features-row span { display:inline-grid; place-items:center; width:22px; height:22px; margin-right:5px; border-radius:7px; background:var(--page-alt); color:var(--ink); }

.learn { padding-bottom:140px; }.learn-card { display:grid; grid-template-columns:1fr .95fr; min-height:524px; overflow:hidden; border-radius:26px; background:#e1e7da; color:#17241e; }.learn-copy { padding:82px 70px; }.learn-copy .eyebrow { color:#607166; }.learn-copy h2 { margin:0 0 22px; }.learn-copy > p:not(.eyebrow) { max-width:325px; margin-bottom:34px; color:#536157; font-size:15px; line-height:1.6; }.lesson-preview { align-self:center; width:min(390px,calc(100% - 48px)); min-height:392px; margin:42px auto; overflow:hidden; border-radius:17px; background:#fdfdf9; box-shadow:0 24px 45px rgba(56,73,60,.18); transform:rotate(2deg); }.lesson-header { display:flex; justify-content:space-between; padding:16px 20px; color:#78827a; border-bottom:1px solid #e4e9e2; font-size:10px; }.lesson-content { padding:28px 35px; }.lesson-kicker { color:#8b70df; font-size:9px; font-weight:700; letter-spacing:1px; }.lesson-content h3 { margin:14px 0 15px; font-size:29px; line-height:1.04; letter-spacing:-1px; }.lesson-content > p:not(.lesson-kicker) { color:#68736b; font-size:11px; line-height:1.5; }.lesson-example { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:7px; margin:20px 0; padding:12px; border-radius:10px; background:#f0f4ec; color:#788279; font-size:8px; }.lesson-example strong { color:#5c43ae; font-size:11px; }.lesson-content button { width:100%; padding:11px; border:0; border-radius:9px; background:#192821; color:#eff6e9; font-size:10px; font-weight:600; }.lesson-content button span { margin-left:50px; }.lesson-progress { display:flex; gap:4px; padding:0 35px 20px; }.lesson-progress i { flex:1; height:3px; border-radius:2px; background:#e1e5df; }.lesson-progress i.current,.lesson-progress i:nth-child(-n+2) { background:#9579e9; }

.kids { padding-bottom:138px; }.kids-card { display:grid; grid-template-columns:1fr 1.03fr; min-height:508px; overflow:hidden; border-radius:26px; background:#ffd07d; color:#17372f; }.kids-copy { position:relative; z-index:1; padding:67px 72px; }.kids-brand { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700; }.kids-brand span { display:grid; place-items:center; width:27px; height:27px; border-radius:10px; background:#6d57e8; color:white; font-family:Georgia,serif; font-size:18px; font-style:italic; }.kids-copy h2 { margin:37px 0 20px; font-size:52px; }.kids-copy h2 em { color:#e95a69; }.kids-copy > p { max-width:315px; color:#416359; font-size:15px; line-height:1.55; }.kids-button { margin-top:19px; background:#17372f; color:#fff7da; }.kids-copy small { display:block; margin-top:21px; color:#587267; font-size:10px; }.kids-game { position:relative; width:min(465px,calc(100% - 52px)); min-height:356px; align-self:center; justify-self:center; overflow:hidden; padding:20px; border:5px solid #f9f2d9; border-radius:27px; background:#639f8a; color:#fffdec; box-shadow:0 20px 0 rgba(87,108,82,.16),0 30px 47px rgba(71,66,42,.26); transform:rotate(-2deg); }.game-top { display:flex; justify-content:space-between; font-size:11px; font-weight:700; }.game-stars { color:#ffda6d; letter-spacing:2px; }.game-problem { position:relative; z-index:2; width:72%; margin:39px auto 20px; padding:15px 17px; border-radius:16px; background:#fffaf0; color:#284a41; text-align:center; box-shadow:0 4px 0 #dce6d1; }.game-problem p { margin:0 0 11px; font-size:12px; line-height:1.3; font-weight:600; }.game-problem strong { font-size:29px; letter-spacing:-1px; }.game-problem strong span { color:#ec6d6d; }.game-problem strong b { display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#efe0ff; color:#704fd1; }.answer-row { position:relative; z-index:2; display:flex; justify-content:center; gap:9px; }.answer-row button { min-width:66px; padding:10px; border:3px solid #f8f1d6; border-radius:10px; background:#faeee4; color:#2d5148; box-shadow:0 4px 0 #e0cdbb; font-weight:700; }.answer-row .correct-answer { background:#eb76a0; color:white; }.pixel { position:absolute; z-index:1; bottom:9px; display:grid; grid-template-columns:repeat(2,8px); grid-template-rows:8px 8px 8px; gap:7px; width:59px; height:65px; padding:13px 11px 11px; border-radius:25px 25px 14px 14px; }.pixel i { display:block; border-radius:50%; background:#234d47; }.pixel b { grid-column:span 2; font-size:17px; line-height:8px; text-align:center; }.pixel-one { left:24px; background:#f9d866; transform:rotate(-9deg); }.pixel-two { right:29px; bottom:17px; background:#ee8bad; transform:rotate(9deg); }.sparkle,.star { position:absolute; }.sparkle { color:#fff9d7; font-size:24px; }.sparkle-one { top:75px; left:30px; }.sparkle-two { right:35px; top:117px; font-size:17px; }.star { color:#ffe379; }.star-one { left:100px; bottom:42px; }.star-two { right:110px; top:52px; font-size:19px; }

.final-cta { display:flex; justify-content:space-between; align-items:end; padding:88px 0 98px; border-top:1px solid var(--line); }.final-cta h2 { margin:0; }.final-cta > div:last-child { width:322px; }.final-cta > div:last-child p { color:var(--muted); font-size:15px; line-height:1.6; }.final-cta .button { margin-top:16px; }.site-footer { display:grid; grid-template-columns:1fr .8fr 1fr; gap:20px; align-items:start; padding:34px 0 42px; border-top:1px solid var(--line); }.site-footer > p { margin:3px 0; color:var(--muted); font-size:12px; }.site-footer > div { display:flex; justify-content:flex-end; gap:18px; }.site-footer a,.site-footer small { color:var(--muted); font-size:11px; }.site-footer .brand { color:var(--ink); }.site-footer small { grid-column:1/-1; margin-top:15px; }

/* Landing page account entry */
.landing-forgot-password{justify-self:start;margin:-5px 0 0;padding:0;border:0;background:transparent;color:var(--muted);font:600 12px "DM Sans",Arial,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.landing-forgot-password:hover{color:var(--ink)}.landing-forgot-password:disabled{opacity:.65;cursor:wait}.landing-account-form label[hidden]{display:none!important}
.landing-account-dialog{width:min(510px,calc(100% - 32px));margin:auto;padding:26px;border:1px solid var(--line);border-radius:24px;background:var(--card);color:var(--ink);box-shadow:0 28px 70px rgba(15,24,19,.32)}.landing-account-dialog::backdrop{background:rgba(10,17,13,.58);backdrop-filter:blur(5px)}.landing-account-top{display:flex;justify-content:space-between;gap:16px}.landing-account-top p{margin:0 0 7px;color:var(--muted);font:500 10px "DM Mono",monospace;letter-spacing:1px}.landing-account-top h2{margin:0;font-size:31px;letter-spacing:-1.4px}.landing-account-top>button{display:grid;width:33px;height:33px;place-items:center;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--page-alt);color:var(--ink);font-size:22px}.landing-account-dialog>section>p{margin:20px 0;color:var(--muted);font-size:14px;line-height:1.6}.landing-account-form{display:grid;gap:13px}.landing-account-form label{display:grid;gap:7px;color:var(--muted);font:500 10px "DM Mono",monospace;letter-spacing:.7px;text-transform:uppercase}.landing-account-form input{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:11px;outline:0;background:var(--page-alt);color:var(--ink);font:600 13px "DM Sans",Arial,sans-serif}.landing-account-form input:focus{border-color:#94c967;box-shadow:0 0 0 3px rgba(184,238,112,.19)}.landing-account-notice{min-height:18px!important;margin:-3px 0 0!important;color:var(--muted)!important;font-size:11px!important}.landing-account-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:5px}.landing-account-actions>button:not(.button){border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:4px}.landing-account-actions .button{min-height:42px;margin:0}.landing-account-actions .button:disabled{opacity:.65;cursor:wait}

@media (max-width:1000px) { .desktop-nav { margin-left:0; gap:17px; }.hero { padding:60px 42px; grid-template-columns:.83fr 1.17fr; }.dashboard-window { right:-120px; }.feature-split { gap:32px; }.calculator-main { grid-template-columns:1fr .34fr; }.calc-history { padding:19px 12px; }.workspace-main { padding:30px 25px; }.kids-copy { padding:60px 45px; }.learn-copy { padding:65px 45px; } }
@media (max-width:760px) { .section-shell,.site-header { width:min(100% - 32px,1180px); }.site-header { height:71px; }.desktop-nav,.theme-label { display:none; }.sign-in{font-size:12px}.header-actions { gap:8px; }.theme-toggle { width:36px; height:36px; justify-content:center; padding:0; }.button-small { min-height:36px; padding:0 11px; }.landing-account-dialog{width:min(100% - 20px,510px);padding:21px}.landing-account-actions{align-items:stretch;flex-direction:column-reverse}.landing-account-actions .button{width:100%}.hero { min-height:auto; display:block; padding:59px 26px 0; border-radius:23px; }.hero-copy { max-width:none; }.hero-actions { flex-wrap:wrap; }.hero-proof { margin-top:39px; }.hero-art { min-height:390px; margin:25px -26px 0; }.dashboard-window { width:560px; top:24px; right:auto; left:52px; transform:rotate(-2deg) scale(.75); transform-origin:top left; }.floating-note { left:13px; bottom:22px; transform:rotate(4deg) scale(.86); }.intro { padding:88px 0; }.intro-heading,.workspace-lead,.final-cta { display:block; }.intro-heading > p,.workspace-lead > p,.final-cta > div:last-child { width:auto; margin-top:20px; }.pillars { grid-template-columns:repeat(2,1fr); margin-top:35px; }.pillar { min-height:255px; }.pillar-number { margin-top:31px; }.feature-split { grid-template-columns:1fr; min-height:0; padding:80px 0; }.calculator-device { margin-top:8px; }.calc-tabs { display:none; }.calculator-main { grid-template-columns:1fr; }.calc-history { display:none; }.workspace { padding:89px 0; }.workspace-lead { margin-bottom:35px; }.workspace-preview { display:block; min-height:0; }.workspace-menu { display:none; }.workspace-main { padding:22px 15px 15px; }.workspace-title h3 { font-size:19px; }.subject-cards { grid-template-columns:repeat(2,1fr); margin-top:22px; }.workspace-bottom { grid-template-columns:1fr; }.features-row { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.learn { padding-bottom:90px; }.learn-card,.kids-card { grid-template-columns:1fr; }.learn-copy { padding:55px 30px 26px; }.lesson-preview { width:calc(100% - 56px); margin:25px auto 45px; }.kids { padding-bottom:90px; }.kids-copy { padding:48px 30px 15px; }.kids-copy h2 { margin-top:31px; font-size:43px; }.kids-game { width:calc(100% - 44px); margin:30px auto 46px; min-height:338px; }.final-cta { padding:70px 0; }.site-footer { grid-template-columns:1fr; }.site-footer > div { justify-content:flex-start; flex-wrap:wrap; }.site-footer small { grid-column:auto; } }
@media (max-width:420px) { .hero { padding-inline:20px; }.hero-art { margin-inline:-20px; }.button { min-height:44px; padding-inline:15px; }.hero-actions { gap:15px; }.pillars { grid-template-columns:1fr; }.pillar { min-height:220px; }.calculator-showcase .section-shell { width:calc(100% - 32px); }.calc-work { padding:17px 11px; }.calc-keypad { gap:5px; }.calc-keypad button { min-height:31px; font-size:11px; }.calc-screen strong { font-size:27px; }.features-row { grid-template-columns:1fr; }.lesson-content { padding:24px; }.lesson-progress { padding-inline:24px; }.lesson-example { grid-template-columns:1fr; text-align:center; }.kids-game { width:calc(100% - 28px); padding-inline:9px; }.game-problem { width:78%; }.answer-row button { min-width:56px; }.pixel-one { left:12px; }.pixel-two { right:13px; }.star-one { left:82px; } }

/* Phone landing: respect the iPhone safe area and keep the hero easy to scan. */
@media (max-width:760px) {
  .site-header{height:calc(71px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
  .theme-toggle{width:44px;height:44px;border-radius:14px}
  .button-small{min-height:44px}
  .sign-in{display:inline-flex;min-height:44px;align-items:center;padding-inline:5px}
  .landing-account-top>button{width:44px;height:44px;border-radius:13px}
  .landing-forgot-password{min-height:44px;text-align:left}
  .hero-actions .text-link{min-height:44px;align-items:center}
  .hero{padding-top:calc(42px + env(safe-area-inset-top));padding-bottom:0;scroll-margin-top:10px}
  .hero h1{font-size:clamp(42px,13vw,56px);letter-spacing:-2.25px;line-height:.98}
  .hero-description{font-size:16px;line-height:1.52}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:13px;margin-top:27px}
  .hero-actions .button,.hero-actions .text-link{width:max-content}
  .hero-proof{margin-top:34px;padding-bottom:2px}
  .hero-art{min-height:365px;margin-top:18px}
}
@media (max-width:420px) {
  .hero h1{font-size:clamp(40px,12.8vw,50px);letter-spacing:-2px}
  .hero-description{font-size:15px}
  .hero-actions .button{width:100%}
}