@font-face{font-family:"Fredoka";src:url("fonts/fredoka-latin.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin.woff2") format("woff2");font-weight:200 1000;font-display:swap}

:root{
  --leaf:#AECE86;--leaf-soft:#E6F1D6;--leaf-deep:#2F4020;--leaf-shadow:#7FA35A;
  --sky:#86A8F4;--sky-soft:#DCE6FD;--sky-deep:#25306E;--sky-shadow:#6284D6;
  --lilac:#B8AEE8;--lilac-soft:#ECE8FB;--lilac-deep:#2F3478;
  --sun:#F8BF45;--sun-soft:#FFF0C9;--sun-deep:#5A3208;
  --berry:#FFB8C2;--berry-soft:#FFE3E7;--berry-deep:#A3243A;
  --night-soft:#E8EAF0;--night-deep:#1F2A44;
  --ink:#1E2A16;--ink-soft:#55604C;--line:#E9E4D6;--sand:#F3EFE4;--paper:#FBF8F1;--white:#fff;
  --bg:var(--paper);--bg-2:var(--sand);--card:var(--white);--text:var(--ink);--text-2:var(--ink-soft);--border:var(--line);--link:var(--sky-deep);
  --btn-bg:var(--ink);--btn-fg:#fff;--btn-ledge:#000;
  --fd:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --fb:"Nunito",ui-rounded,system-ui,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161B13;--bg-2:#1E2519;--card:#252E20;--text:#EEF1E6;--text-2:#BAC2AE;--border:#36422D;--link:#BFD0FB;
    --leaf-soft:#2C3A22;--sky-soft:#232C4E;--lilac-soft:#2D2B4B;--sun-soft:#3A2E14;--berry-soft:#452029;--night-soft:#262C3A;
    --leaf-deep:#D3E6B8;--sky-deep:#C7D6FB;--lilac-deep:#D9D3F7;--sun-deep:#FBDD97;--berry-deep:#FFC4CD;--night-deep:#D6DAE6;
    --btn-bg:var(--leaf);--btn-fg:#1E2A16;--btn-ledge:#6E9148;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:600 17px/1.55 var(--fb);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--text)}
h1,h2,h3{font-family:var(--fd);font-weight:700;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:12px;top:-60px;background:var(--btn-bg);color:var(--btn-fg);padding:12px 18px;border-radius:999px;z-index:10;font-weight:800;text-decoration:none}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 20px}
@media (min-width:720px){.wrap{padding:0 32px}}
.sec{padding:clamp(72px,12vw,144px) 0}
.sec-sand{background:var(--bg-2)}
.eyebrow{font:800 13px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.h2{font-size:clamp(34px,5.6vw,56px);line-height:1.05;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--text-2);max-width:40ch}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(36px,6vw,64px)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 30px;border-radius:999px;background:var(--btn-bg);color:var(--btn-fg);font:800 18px/1 var(--fb);text-decoration:none;box-shadow:0 4px 0 var(--btn-ledge);transition:transform .12s,box-shadow .12s}
.btn:hover{color:var(--btn-fg);filter:brightness(1.12)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--btn-ledge)}
.btn-sm{min-height:48px;padding:0 20px;font-size:16px}
.btn-note{font:700 14px/1.4 var(--fb);color:var(--text-2)}
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 22px/1 var(--fd)}
.brand img{width:36px;height:36px;border-radius:11px}
.top nav{display:flex;align-items:center;gap:8px}
.top nav a:not(.btn){display:none;padding:12px 14px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:800;font-size:15px}
.top nav a:not(.btn):hover{background:var(--bg-2)}
@media (min-width:900px){.top nav a:not(.btn){display:inline-flex}}

/* hero */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(72px,10vw,120px)}
.hero .wrap{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}}
.hero-text{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(48px,9.5vw,96px);line-height:.98;letter-spacing:-.02em}
.hero h1 span{display:block;color:var(--leaf-deep)}
@media (prefers-color-scheme:light){.hero h1 span{color:#3E5A26}}
.hero .lead{max-width:34ch}
.hero-stage{position:relative;justify-self:center;padding:0 0 0 40px}
.hero-pips{position:absolute;left:-10px;top:-40px;width:clamp(110px,14vw,150px);z-index:2}

/* phone */
.phone{width:min(312px,78vw);border-radius:48px;background:#1E2A16;padding:10px;box-shadow:0 30px 60px -20px rgba(30,42,22,.35)}
.screen{border-radius:38px;background:#FBF8F1;color:#1E2A16;overflow:hidden;padding:16px 16px 22px;display:flex;flex-direction:column;gap:12px;aspect-ratio:9/18.4}
.p-status{display:flex;justify-content:space-between;font:800 12px/1 var(--fb);padding:4px 8px 2px;color:#1E2A16}
.p-bar{display:flex;align-items:center;gap:10px}
.p-x{width:40px;height:40px;border-radius:50%;background:#F3EFE4;display:grid;place-items:center;flex:none}
.p-segs{flex:1;display:flex;gap:3px}
.p-segs i{flex:1;height:10px;border-radius:5px;background:#E9E4D6}
.p-segs .ok{background:#AECE86}.p-segs .no{background:#FFB8C2}
.p-count{font:700 14px/1 var(--fd)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 11px;font:800 12px/1.2 var(--fb);background:#F3EFE4;color:#1E2A16}
.chip-sky{background:#DCE6FD;color:#25306E}
.p-talk{display:flex;justify-content:flex-end;align-items:flex-end;gap:4px;margin-top:4px;height:70px}
.bubble{background:#fff;color:#1E2A16;border-radius:16px 16px 4px 16px;padding:8px 11px;font:800 12.5px/1.3 var(--fb);box-shadow:0 2px 10px rgba(30,42,22,.1);margin-bottom:26px;max-width:170px}
.p-talk img{width:66px;height:62px}
.flip{position:relative;flex:1;perspective:1000px;min-height:220px}
.flip-in{position:absolute;inset:0;transform-style:preserve-3d}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px;text-align:center}
.face-front{background:#86A8F4;box-shadow:0 6px 0 #6284D6}
.face-back{background:#fff;box-shadow:inset 0 0 0 4px #86A8F4,0 6px 0 #E9E4D6;transform:rotateY(180deg)}
.face small{font:800 11px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#25306E}
.face-back small{color:#55604C}
.face b{font:800 26px/1.15 var(--fb);color:#1E2A16}
.face em{position:absolute;bottom:16px;font:800 12px/1 var(--fb);font-style:normal;color:#25306E}
.p-grade{display:flex;gap:8px}
.p-grade span{flex:1;height:50px;border-radius:999px;display:grid;place-items:center;font:900 14px/1 var(--fb)}
.g-no{background:#FFE3E7;color:#A3243A}.g-yes{background:#AECE86;color:#1E2A16}
@media (prefers-reduced-motion:no-preference){
  .flip-in{animation:flip 7s cubic-bezier(.3,1.3,.5,1) infinite 1.5s}
  .p-grade{animation:grade 7s ease infinite 1.5s}
}
.p-grade{opacity:.35}
@keyframes flip{0%,38%{transform:none}46%,88%{transform:rotateY(180deg)}96%,100%{transform:none}}
@keyframes grade{0%,40%{opacity:.35}48%,86%{opacity:1}94%,100%{opacity:.35}}

/* steps */
.steps{display:grid;gap:20px;counter-reset:s}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{background:var(--card);border-radius:32px;padding:24px;display:flex;flex-direction:column;gap:14px}
.step-art{border-radius:24px;height:240px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;margin-bottom:6px}
.num{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font:700 20px/1 var(--fd);background:var(--bg-2);color:var(--text)}
.step h3{font-size:24px;line-height:1.15}
.step p{color:var(--text-2)}

.art-snap{background:#DCE6FD}
.art-snap .photo{width:140px;height:189px;border-radius:14px;transform:rotate(-5deg);box-shadow:0 10px 24px rgba(30,42,22,.2);object-fit:cover}
.art-snap .think{position:absolute;right:18px;bottom:16px;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.art-snap .think img{width:80px;height:74px}
.art-snap .bubble{margin:0}
.art-round{background:#E6F1D6;padding:18px}
.opts{width:100%;max-width:280px;display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px 6px 6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 3px #E9E4D6;font:800 14px/1.2 var(--fb);color:#1E2A16}
.opt i{width:32px;height:32px;border-radius:11px;background:#F3EFE4;display:grid;place-items:center;font:700 14px/1 var(--fd);font-style:normal;flex:none}
.opt.ok{background:#E6F1D6;box-shadow:inset 0 0 0 3px #AECE86}.opt.ok i{background:#AECE86}
.art-boxes{background:#FFF0C9;padding:22px 20px 18px}
.boxes{width:100%;display:flex;gap:8px;align-items:flex-end;height:100%}
.boxes div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%}
.boxes b{font:700 14px/1 var(--fd);color:#5A3208}
.boxes span{width:100%;border-radius:12px}
.boxes small{font:800 11px/1.1 var(--fb);color:#5A3208;text-align:center}

/* set kinds */
.kinds{display:grid;gap:20px}
@media (min-width:900px){.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kind{border-radius:36px;padding:22px;display:flex;flex-direction:column;gap:14px}
.kind h3{font-size:26px;line-height:1.1;hyphens:auto;overflow-wrap:anywhere}
.kind p{font-size:16px}
.k-vocab{background:var(--sky-soft);color:var(--sky-deep)}
.k-sum{background:var(--lilac-soft);color:var(--lilac-deep)}
.k-map{background:var(--sun-soft);color:var(--sun-deep)}
.kind h3{color:var(--text)}
.shot{background:#FBF8F1;border-radius:26px;padding:14px;color:#1E2A16;min-height:250px;display:flex;flex-direction:column;gap:10px;justify-content:center;box-shadow:0 1px 0 rgba(30,42,22,.06)}
.setcard{background:#DCE6FD;border-radius:26px;padding:16px;display:flex;flex-direction:column;gap:12px}
.setcard-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.setcard-top > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.tag-w{align-self:flex-start;background:#fff;border-radius:999px;padding:5px 10px;font:800 11px/1.2 var(--fb);color:#25306E}
.setcard strong{font:700 18px/1.15 var(--fd)}
.setcard .sub{font:600 12px/1.3 var(--fb);color:#3D4A7E}
.ring{width:54px;height:54px;flex:none;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring span{position:absolute;inset:0;display:grid;place-items:center;font:700 13px/1 var(--fd);color:#25306E}
.due{align-self:flex-start;background:#FFE3E7;color:#A3243A;border-radius:999px;padding:6px 11px;font:800 12px/1 var(--fb)}
.mode{background:#fff;border-radius:20px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.mode i{width:36px;height:36px;border-radius:12px;background:#DCE6FD;flex:none;display:grid;place-items:center;font:700 15px/1 var(--fd);font-style:normal;color:#25306E}
.mode div{flex:1;display:flex;flex-direction:column;gap:1px;font:700 14px/1.2 var(--fd)}
.mode small{font:600 11.5px/1.3 var(--fb);color:#55604C}
.mode > b{font:700 14px/1 var(--fd);color:#25306E}
.sumcard{background:#fff;border-radius:26px;box-shadow:inset 0 0 0 4px #B8AEE8,0 5px 0 #E9E4D6;padding:20px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.sumcard small{font:800 10.5px/1 var(--fb);letter-spacing:.08em;text-transform:uppercase;color:#55604C}
.sumcard small.a{color:#2F3478}
.sumcard .q{font:700 15px/1.3 var(--fb);color:#55604C}
.sumcard hr{width:44px;height:5px;border:0;border-radius:3px;background:#B8AEE8;margin:8px 0}
.sumcard .ans{font:700 14px/1.5 var(--fb);text-align:left;color:#1E2A16}
.map{position:relative;border-radius:22px;overflow:hidden;background:#E4EFD3;aspect-ratio:4/3;box-shadow:inset 0 0 0 3px #D2E2B8}
.map .land{position:absolute;border-radius:50%;background:#D2E2B8}
.map .lake{position:absolute;border-radius:50%;background:#9CC8EE}
.map .pin{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #1E2A16;transform:translate(-50%,-50%)}
.map .pin.hit{background:#AECE86;box-shadow:0 0 0 3px #2F4020;width:22px;height:22px}
.map .lbl{position:absolute;transform:translate(-50%,-150%);background:#1E2A16;color:#fff;border-radius:10px;padding:4px 8px;font:800 11px/1 var(--fb);white-space:nowrap}
.map .scan{position:absolute;left:8px;bottom:8px;font:700 10px/1 ui-monospace,Menlo,monospace;color:#55604C;background:rgba(255,255,255,.85);padding:4px 6px;border-radius:6px}
.mapq{font:700 19px/1.15 var(--fd)}

/* why */
.why{display:grid;gap:16px}
@media (min-width:720px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pt{border-radius:32px;padding:28px;display:flex;flex-direction:column;gap:8px;background:var(--card);min-height:190px;position:relative;overflow:hidden}
.pt h3{font-size:28px;line-height:1.1}
.pt p{color:var(--text-2);max-width:32ch}
.pt-night{background:var(--night-soft)}
.pt-night h3{color:var(--night-deep)}
.pt-night img{position:absolute;right:18px;bottom:14px;width:96px;height:89px}
.pt-night p{max-width:24ch}
.pt-sky{background:var(--sky-soft)}.pt-sky h3{color:var(--sky-deep)}
.pt-berry{background:var(--berry-soft)}.pt-berry h3{color:var(--berry-deep)}
.pt-leaf{background:var(--leaf-soft)}.pt-leaf h3{color:var(--leaf-deep)}

/* library */
.lib .wrap{display:grid;gap:48px;align-items:center}
@media (min-width:900px){.lib .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px}}
.lib-text{display:flex;flex-direction:column;gap:18px}
.lib-text .pips{width:120px;height:112px}
.panel{background:#fff;color:#1E2A16;border-radius:36px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 50px -24px rgba(30,42,22,.25)}
.search{display:flex;align-items:center;gap:10px;min-height:56px;border-radius:999px;background:#F3EFE4;padding:0 18px;font:700 16px/1.2 var(--fb)}
.search .caret{width:2px;height:20px;background:#1E2A16;margin-left:-8px}
@media (prefers-reduced-motion:no-preference){.search .caret{animation:blink 1s steps(1) infinite}}
@keyframes blink{50%{opacity:0}}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters span{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;background:#F3EFE4;font:800 13px/1 var(--fb)}
.filters .on{background:#1E2A16;color:#fff}
.res{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:24px;background:#FBF8F1}
.row .tile{width:52px;height:52px;border-radius:18px;flex:none;display:grid;place-items:center;font:700 18px/1 var(--fd)}
.row .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.row strong{font:700 16px/1.2 var(--fd)}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tags span{border-radius:999px;padding:4px 9px;font:800 11.5px/1.2 var(--fb);background:#fff;box-shadow:inset 0 0 0 2px #E9E4D6;color:#1E2A16}
.tags .school{background:#DCE6FD;box-shadow:none;color:#25306E}
.tags .teacher{background:#ECE8FB;box-shadow:none;color:#2F3478}
.row .save{flex:none;min-height:40px;padding:0 14px;border-radius:999px;background:#AECE86;display:inline-flex;align-items:center;font:800 13px/1 var(--fb)}
@media (max-width:420px){.row .save{display:none}}

/* privacy */
.priv{display:grid;gap:16px}
@media (min-width:720px){.priv{grid-template-columns:repeat(2,minmax(0,1fr))}}
.list{background:var(--card);border-radius:32px;padding:28px;display:flex;flex-direction:column;gap:14px}
.list h3{font-size:24px}
.list ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.list li{display:flex;gap:12px;align-items:flex-start}
.list li::before{content:"";width:12px;height:12px;border-radius:4px;flex:none;margin-top:8px;background:var(--leaf)}
.list.no li::before{background:var(--berry);border-radius:50%}
.list small{display:block;color:var(--text-2);font-size:15px}
.links{display:flex;gap:10px 24px;flex-wrap:wrap;margin-top:28px;font-weight:800}
.links a{min-height:48px;display:inline-flex;align-items:center}

/* faq */
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
.faq details{background:var(--card);border-radius:28px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:14px 16px 14px 26px;font:600 clamp(19px,2.3vw,22px)/1.25 var(--fd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:44px;height:44px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font:700 26px/1 var(--fd);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 26px 24px;color:var(--text-2);max-width:62ch}

/* final */
.final{text-align:center}
.final .wrap{display:flex;flex-direction:column;align-items:center;gap:22px}
.final img{width:clamp(150px,20vw,200px);height:auto}
.final .cta{align-items:center}
.final .lead{margin:0 auto}

/* footer */
.foot{border-top:2px solid var(--border);padding:32px 0 44px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.foot nav{display:flex;gap:4px 22px;flex-wrap:wrap}
.foot a{color:var(--text);font-weight:800;min-height:48px;display:inline-flex;align-items:center}
.foot small{color:var(--text-2);font-size:14px}

/* legal pages */
.legal{padding:clamp(32px,6vw,72px) 0 96px}
.legal .wrap{max-width:820px;display:flex;flex-direction:column;gap:28px}
.legal h1{font-size:clamp(40px,7vw,64px);line-height:1.02}
.legal h2{font-size:26px;line-height:1.15;margin-top:12px}
.legal .box{background:var(--card);border-radius:28px;padding:26px 28px;display:flex;flex-direction:column;gap:12px}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.ph{background:var(--sun-soft);color:var(--sun-deep);border-radius:8px;padding:1px 6px;font-weight:800}
.back{font-weight:800;min-height:48px;display:inline-flex;align-items:center}

/* 404 */
.nf{min-height:calc(100vh - 72px);display:grid;place-items:center;text-align:center;padding:40px 0 80px}
.nf .wrap{display:flex;flex-direction:column;align-items:center;gap:20px}
.nf img{width:200px;height:auto}
.nf h1{font-size:clamp(40px,7vw,64px);line-height:1.02}