@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)}
/* Start page: everything it needs is in site.css. */