@font-face{font-family:'Lexend';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/lexend-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/patrick-hand-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ================= Fraction Quest: shared chrome for the side pages (tools, learn) =================
   Same light-table look as the app (glass over colored pools), same fonts and pen colors. Nothing here
   depends on app.css so the side pages stay small. Section stylesheets (tools.css, learn.css) come after. */
:root{
  --field:#E6ECF7;
  --ink:#17203D; --ink-2:#3C4667; --ink-3:#5C6686;
  --line:rgba(60,82,140,.2); --surface-solid:#FFFFFF;
  --pen-red:#C42F2F; --pen-green:#157A4B; --pen-blue:#2453B8; --pen-orange:#B85E08; --focus:#2453B8;
  --grid:rgba(56,96,160,.06); --grid-major:rgba(56,96,160,.11);
  --g-fill:linear-gradient(155deg,rgba(255,255,255,.66),rgba(255,255,255,.36));
  --g-fill-hi:linear-gradient(155deg,rgba(255,255,255,.84),rgba(255,255,255,.56));
  --g-edge:rgba(255,255,255,.8);
  --g-spec:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3);
  --g-d1:0 18px 40px -26px rgba(26,40,90,.45),0 2px 6px -3px rgba(26,40,90,.16);
  --g-d2:0 30px 60px -28px rgba(26,40,90,.55),0 6px 14px -8px rgba(26,40,90,.24);
  --g-blur:saturate(170%) blur(22px);
  --c-fill:rgba(255,255,255,.56); --c-edge:rgba(255,255,255,.88); --c-ring:rgba(60,82,140,.16);
  --c-spec:inset 0 1px 0 rgba(255,255,255,.95); --c-drop:0 6px 14px -10px rgba(26,40,90,.5);
  --tint:linear-gradient(180deg,#4A74EC,#2B4EC0); --tint-glow:0 10px 22px -10px rgba(43,78,192,.75);
  --pools:
    radial-gradient(44vmax 36vmax at 6% 8%, rgba(59,126,224,.36), transparent 70%),
    radial-gradient(38vmax 30vmax at 96% 4%, rgba(229,86,126,.26), transparent 70%),
    radial-gradient(46vmax 38vmax at 92% 92%, rgba(63,174,104,.28), transparent 70%),
    radial-gradient(40vmax 34vmax at 6% 96%, rgba(242,193,46,.34), transparent 70%),
    radial-gradient(34vmax 28vmax at 52% 48%, rgba(142,90,213,.16), transparent 72%);
  --hand:'Patrick Hand','Segoe Print','Comic Sans MS',cursive;
  --sans:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --field:#0A1021;
    --ink:#EEF2FF; --ink-2:#BAC4E0; --ink-3:#8F9ABA;
    --line:rgba(190,205,255,.16); --surface-solid:#1A233F;
    --pen-red:#FF9A8B; --pen-green:#8BE3B1; --pen-blue:#A8C4FF; --pen-orange:#FFB36B; --focus:#A8C4FF;
    --grid:rgba(200,215,255,.035); --grid-major:rgba(200,215,255,.065);
    --g-fill:linear-gradient(155deg,rgba(44,56,92,.6),rgba(22,30,54,.46));
    --g-fill-hi:linear-gradient(155deg,rgba(56,70,112,.72),rgba(30,40,70,.6));
    --g-edge:rgba(255,255,255,.14);
    --g-spec:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25);
    --g-d1:0 18px 40px -24px rgba(0,0,0,.7); --g-d2:0 30px 60px -26px rgba(0,0,0,.8);
    --c-fill:rgba(255,255,255,.07); --c-edge:rgba(255,255,255,.15); --c-ring:rgba(0,0,0,.25);
    --c-spec:inset 0 1px 0 rgba(255,255,255,.13); --c-drop:0 6px 14px -8px rgba(0,0,0,.6);
    --tint:linear-gradient(180deg,#4F7BF2,#2D52C6); --tint-glow:0 10px 24px -10px rgba(79,123,242,.6);
    --pools:
      radial-gradient(44vmax 36vmax at 6% 8%, rgba(59,126,224,.34), transparent 70%),
      radial-gradient(38vmax 30vmax at 96% 4%, rgba(197,81,178,.26), transparent 70%),
      radial-gradient(46vmax 38vmax at 92% 92%, rgba(32,164,181,.26), transparent 70%),
      radial-gradient(40vmax 34vmax at 6% 96%, rgba(243,139,42,.2), transparent 70%),
      radial-gradient(34vmax 28vmax at 52% 48%, rgba(93,89,214,.2), transparent 72%);
  }
}

/* ---------- page ---------- */
html{box-sizing:border-box;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);font-size:1.0625rem;line-height:1.5;background:var(--field)}
body::before,body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:var(--pools)}
body::after{
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 40%,transparent 100%);
}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:900px;margin:0 auto;padding:0 clamp(14px,3vw,32px) 40px}

/* ---------- top bar (screen only) ---------- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding:16px 0 14px}
.brand{display:inline-flex;flex-direction:column;align-items:center;color:var(--ink);text-decoration:none;font-weight:800;font-size:1.05rem;line-height:.95;letter-spacing:-.02em}
.brand:hover{color:var(--pen-blue)}
.vinc{display:flex;gap:2px;align-self:stretch;margin:.14em -.06em .1em}
.vinc i{flex:1;height:.16em;min-height:3px;border-radius:2px;background:var(--c)}
.crumb{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:.95rem}
.crumb a{color:var(--ink-2)}
.actions{display:flex;gap:8px;align-items:center}
.btn{min-height:44px;padding:8px 18px;border-radius:12px;font:inherit;font-weight:600;font-size:.98rem;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  background:var(--c-fill);border:1px solid var(--c-edge);box-shadow:var(--c-spec),0 0 0 1px var(--c-ring),var(--c-drop)}
.btn.primary{background:var(--tint);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.18),var(--tint-glow)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hand-written notes, the teacher's pen */
.hand{font-family:var(--hand);color:var(--pen-blue);font-size:1.2rem;line-height:1.25}
.hand.red{color:var(--pen-red)} .hand.green{color:var(--pen-green)} .hand.orange{color:var(--pen-orange)}
.label{display:block;font-size:.84rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:10px 0 2px}

/* fractions and equations: the same stacked fraction the app uses */
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-variant-numeric:tabular-nums;vertical-align:middle;margin:0 .08em;font-weight:700}
.frac>i{display:block;align-self:stretch;height:max(2px,.08em);background:currentColor;border-radius:2px;margin:.1em -.12em}
.frac>span{padding:.04em .08em}
.frac.small{font-size:.8em}
.mixed{display:inline-flex;align-items:center;gap:.1em;vertical-align:middle}
.mixed .w{font-size:1.6em;line-height:1;font-weight:800}
.whole{font-size:1.25em;font-weight:800;line-height:1}
.eq .by{font-family:var(--hand);font-weight:400;font-size:.8em;color:var(--pen-orange);margin:0 .15em;white-space:nowrap}
.eq{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .35em;font-weight:700;font-size:1.45rem;margin:.3em 0;min-width:0}
.eq .op{font-weight:700;color:var(--ink-2);margin:0 .05em}
.eq .op.arrow{color:var(--c)}
.eq .note{font-family:var(--hand);font-weight:400;font-size:.85em;line-height:1.15;color:var(--pen-blue);margin-left:.2em}
.eq .note.red{color:var(--pen-red)} .eq .note.green{color:var(--pen-green)}
.eq .by{font-family:var(--hand);font-weight:400;font-size:.8em;color:var(--pen-orange);margin:0 .15em;white-space:nowrap}
.eq .step{flex-basis:100%;font-size:.62em;font-weight:600;color:var(--ink-3);margin-bottom:-.2em}
.steps{display:grid;gap:6px;margin-top:4px}
.steps .eq{margin:0}

.print-foot{display:none}

/* ---------- list pages (tools index, learn index) ---------- */
.intro{text-align:center;margin:6px 0 18px}
.intro h1{margin:0;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1.1;letter-spacing:-.02em;font-weight:800}
.intro .tag{margin-top:6px}
.toollist{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.tool{display:grid;grid-template-columns:auto 1fr auto;gap:14px 16px;align-items:center;padding:14px 16px 14px 18px;border-radius:18px;text-decoration:none;color:inherit;
  background:var(--g-fill-hi);border:1px solid var(--g-edge);border-left:7px solid var(--c);box-shadow:var(--g-spec),var(--g-d2)}
.tool:hover h2{color:var(--c)}
.tool .mini{width:44px;height:52px;flex:none;border-radius:6px;background:var(--surface-solid);border:1px solid var(--line);box-shadow:0 1px 0 rgba(0,0,0,.08);position:relative;overflow:hidden}
.tool .mini::before{content:'';position:absolute;inset:7px 7px auto;height:4px;border-radius:2px;background:var(--c)}
.tool .mini::after{content:'';position:absolute;inset:16px 7px 7px;background:
  repeating-linear-gradient(transparent 0 4px,var(--line) 4px 5px)}
.tool h2{margin:0;font-size:1.2rem;line-height:1.2}
.tool p{margin:3px 0 0;color:var(--ink-2);font-size:.95rem}
.tool .go{font-weight:700;color:var(--c);white-space:nowrap}
.tool.blue{--c:var(--pen-blue)} .tool.green{--c:var(--pen-green)} .tool.orange{--c:var(--pen-orange)}
@media (max-width:520px){.tool{grid-template-columns:auto 1fr}.tool .go{grid-column:2}}
.fine{margin:18px 0 0;text-align:center;color:var(--ink-3);font-size:.9rem}
.fine a{color:var(--ink-2)}

/* ---------- start page: two doors ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
@media (max-width:640px){.doors{grid-template-columns:1fr}}
.door{--c:var(--pen-blue);display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;border-radius:22px;background:var(--g-fill-hi);border:1px solid var(--g-edge);border-top:7px solid var(--c);box-shadow:var(--g-spec),var(--g-d2)}
.door.green{--c:var(--pen-green)}
.door h2{margin:0;font-size:clamp(1.4rem,3vw,1.8rem);line-height:1.1;color:var(--c)}
.door .lead{margin:0;font-family:var(--hand);font-size:1.3rem;color:var(--pen-blue);line-height:1.25}
.door .lead.green{color:var(--pen-green)}
.door ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.door li a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600;
  background:var(--c-fill);border:1px solid var(--c-edge);box-shadow:var(--c-spec),0 0 0 1px var(--c-ring)}
.door li a:hover{color:var(--c)}
.door li a small{font-weight:500;color:var(--ink-3);font-size:.85rem}
.door li.sub a{margin-left:18px;padding:7px 12px;font-weight:500;font-size:.95rem}
.door .big{margin-top:auto;align-self:flex-start;font-size:1.15rem;padding:12px 22px}
.door p{margin:0;color:var(--ink-2)}
/* ================= learn: concept animations =================
   One idea per page, shown with the same fraction tiles as the app (color = piece size) and a short
   plain-language caption per step. Shared chrome and fraction primitives come from site.css. */
:root{--slot:rgba(255,255,255,.5); --slot-line:rgba(70,92,150,.5); --chunk:#157A4B}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--slot:rgba(255,255,255,.06); --slot-line:rgba(190,205,255,.42); --chunk:#8BE3B1}
}

.lesson{background:var(--g-fill);border:1px solid var(--g-edge);border-radius:26px;box-shadow:var(--g-spec),var(--g-d1);
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);padding:clamp(14px,3vw,26px)}
.row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:0 0 12px}
.row-label{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-width:46px;min-height:44px;padding:4px 12px;border-radius:12px;font:inherit;font-weight:600;font-size:1rem;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--c-fill);border:1px solid var(--c-edge);box-shadow:var(--c-spec),0 0 0 1px var(--c-ring),var(--c-drop);transition:transform .12s ease}
.chip:active{transform:translateY(1px)}
.chip[aria-pressed="true"]{background:var(--tint);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.18),var(--tint-glow)}
.chip .frac{font-size:.82rem}
.custom{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.custom label{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;color:var(--ink-2)}
.custom input{width:3.2em;min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);font:inherit;font-weight:700;font-size:1rem;text-align:center}
.custom .btn{min-height:40px;padding:6px 14px}
.msg{min-height:1.4em;margin:0 0 6px;font-family:var(--hand);font-size:1.15rem;color:var(--pen-red)}
.msg:empty{display:none}

.stage{background:var(--g-fill-hi);border:1px solid var(--g-edge);border-radius:20px;box-shadow:var(--g-spec),var(--g-d2);padding:12px 10px 8px;margin:4px 0 10px}
.stage-svg{display:block;width:100%;overflow:visible}
.caption{margin:6px 2px 2px;min-height:2.6em;font-size:clamp(1.25rem,2.4vw,1.5rem);line-height:1.35;color:var(--pen-blue);max-width:70ch}
.caption.ink{animation:write .55s ease-out}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.eqline{display:flex;align-items:center;flex-wrap:wrap;gap:.3em .4em;font-weight:700;font-size:clamp(1.6rem,4vw,2.2rem);min-height:2.4em;margin:0 0 8px}
.eqline .ops{display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;align-self:stretch;font-family:var(--hand);font-weight:400;font-size:.5em;color:var(--pen-blue);line-height:1;padding:.15em .1em;white-space:nowrap}
.eqline .ops .sign{font-family:var(--sans);font-weight:700;font-size:1.5em;color:var(--ink)}
.eqline .dim{opacity:.45}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.controls .btn:disabled{opacity:.45;cursor:not-allowed}
.controls .spacer{flex:1}
.hint{margin:0;color:var(--ink-3);font-size:.9rem}

.words{margin:16px 0 0;padding:14px 18px;border-radius:18px;background:var(--g-fill-hi);border:1px solid var(--g-edge);box-shadow:var(--g-spec),var(--g-d1)}
.words h2{margin:0 0 6px;font-size:1.1rem;text-transform:uppercase;letter-spacing:.02em;color:var(--pen-blue)}
.words p{margin:.3em 0}
.words a{color:var(--ink-2)}

/* ---------- SVG ---------- */
.stage-svg .tray{fill:var(--slot);stroke:var(--slot-line);stroke-width:1.5}
.stage-svg .slot{fill:none;stroke:var(--slot-line);stroke-width:1.5;stroke-dasharray:5 5}
.stage-svg .tile>rect:first-child{fill-opacity:.92}
.stage-svg .tile>rect:nth-child(2){stroke:rgba(255,255,255,.6);stroke-width:1}
.stage-svg .tlabel{font:600 13px var(--sans);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.stage-svg .tile.ghost{opacity:.22;transition:opacity .4s ease}
.stage-svg .tile.pop{transform-box:fill-box;transform-origin:center;animation:snapIn .55s cubic-bezier(.2,.9,.25,1.25) both}
.stage-svg .chunk{fill:none;stroke:var(--chunk);stroke-width:2.5;transform-box:fill-box;transform-origin:center;animation:chunkIn .3s ease-out both}
.stage-svg .lnum{font:800 34px var(--sans);fill:var(--ink);text-anchor:middle}
.stage-svg .lbar{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.stage-svg .lhand{font:400 22px var(--hand);fill:var(--pen-blue);text-anchor:start}
.stage-svg .larrow{fill:none;stroke:var(--ink-3);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stage-svg .lname{font:600 14px var(--sans);fill:var(--ink-3);text-anchor:middle}
@keyframes snapIn{0%{transform:scale(.72,.55);opacity:0}60%{transform:scale(1.03,1.1);opacity:1}100%{transform:none;opacity:1}}
@keyframes chunkIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.stage-svg .tile.pop,.stage-svg .chunk,.caption.ink{animation:none}}

/* ---------- add/subtract, multiply, divide ---------- */
.chip .mk{font-weight:800;margin:0 .1em;color:var(--pen-blue)}
.chip[aria-pressed="true"] .mk{color:inherit}
.custom .opword{font-weight:800;font-size:1.2rem;color:var(--ink-2);padding:0 2px}
.custom select{min-height:40px;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface-solid);color:var(--ink);font:inherit;font-weight:800;font-size:1.1rem}
.eqline .op{font-weight:700;color:var(--ink-2);margin:0 .08em}
.eqline .whole{font-size:1.25em;font-weight:800;line-height:1}
.eqline .mixed{display:inline-flex;align-items:center;gap:.08em;vertical-align:middle}
.eqline .mixed .w{font-size:1.5em;line-height:1;font-weight:800}
.eqline .break{flex-basis:100%;height:0}
.tool.red{--c:var(--pen-red)}
.stage-svg .lsign{font:800 54px var(--sans);fill:var(--ink-2);text-anchor:middle}
.stage-svg .lhand.mid{text-anchor:middle;font-size:19px}
.stage-svg .cut{stroke:var(--pen-blue);stroke-width:2;stroke-dasharray:4 4;opacity:0;animation:cutIn .5s ease-out .15s forwards}
.stage-svg .tile.take>rect:first-child{fill-opacity:.55}
.stage-svg .tile.take>rect:nth-child(2){stroke:var(--pen-red);stroke-width:2;stroke-dasharray:6 4}
.stage-svg .strip{fill-opacity:0;stroke:var(--slot-line);stroke-width:1.5;stroke-dasharray:5 5}
.stage-svg .strip.on{fill-opacity:.5;stroke:none;animation:fadeIn .4s ease-out both}
.stage-svg .band{fill-opacity:0}
.stage-svg .band.on{fill-opacity:.42;animation:fadeIn .45s ease-out both}
.stage-svg .chunk.rest{stroke:var(--pen-red);stroke-dasharray:7 5}
.stage-svg .badge{stroke:#fff;stroke-width:2}
.stage-svg .badge-n{font:800 13px var(--sans);fill:#fff;pointer-events:none}
@keyframes cutIn{to{opacity:1}}
@keyframes fadeIn{from{fill-opacity:0}}
@media (prefers-reduced-motion: reduce){.stage-svg .cut{animation:none;opacity:1}.stage-svg .strip.on,.stage-svg .band.on{animation:none}}

/* ---------- lesson 2: mixed numbers ---------- */
.custom .mixedin{display:inline-flex;align-items:center;gap:6px}
.custom .frac-in{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.custom .frac-in input{width:2.8em;min-height:34px;padding:2px 6px}
.custom .frac-in i{display:block;width:2.6em;height:2px;background:var(--ink);border-radius:2px}
.stage-svg .tray.broken{stroke:var(--pen-red);stroke-dasharray:6 4}
.stage-svg .unit{fill:none;stroke:var(--ink);stroke-width:3}
.stage-svg .unitline{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 4}
.tool.sub{margin-left:34px;padding:10px 14px 10px 16px;grid-template-columns:1fr auto}
.tool.sub h2{font-size:1.02rem}
.tool.sub p{font-size:.88rem}
@media (max-width:520px){.tool.sub{margin-left:16px}}