/* Layout: school-supply catalog. Slim header, category shelf, worksheet page = paper preview + control panel */
:root{
  --bg:#F6F7F2; --surface:#FFFFFF; --ink:#18322B; --muted:#5B6B64; --line:#DCE2DA;
  --green:#1F6B4A; --gold:#F2C94C; --red:#C92A2A; --paper:#FFFFFF; --paper-ink:#1B1B1B; --key:#C92A2A;
  --display:"Lexend",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#101A16; --surface:#17241F; --ink:#E7EFEA; --muted:#9DB0A7; --line:#2A3A33;
  --green:#5FC08F; --gold:#F2C94C; --red:#FF6B6B; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#101A16; --surface:#17241F; --ink:#E7EFEA; --muted:#9DB0A7; --line:#2A3A33;
  --green:#5FC08F; --gold:#F2C94C; --red:#FF6B6B; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;line-height:1.15}
.banner{background:var(--gold);color:#3D2F00;font-size:.85rem;font-weight:500}
.banner .wrap{padding-block:7px}
header.top{background:var(--surface);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.25rem;text-decoration:none}
.brand svg{flex:none}
.search{position:relative;flex:1 1 240px;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:999px;padding:0 14px;color:var(--muted)}
.search:focus-within{border-color:var(--green)}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:9px 0;outline:none}
.sr{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:6px;z-index:20;display:grid;gap:2px;max-height:70vh;overflow:auto}
.sr a{display:grid;gap:1px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.sr a b{font-family:var(--display);font-weight:600;font-size:.95rem}
.sr a span{font-size:.8rem;color:var(--muted)}
.sr a:hover,.sr a.on{background:var(--bg)}
.sr .none{padding:10px;color:var(--muted);font-size:.9rem}
nav.cats{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
nav.cats a{text-decoration:none;padding:6px 12px;border-radius:999px;font-weight:500;color:var(--muted)}
nav.cats a:hover,nav.cats a.on{background:var(--bg);color:var(--ink)}
nav.cats a.hol{background:#B22234;color:#fff;font-weight:600}
nav.cats a.hol:hover,nav.cats a.hol.on{background:#8E1B2A;color:#fff}
.hol-banner{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--surface);border:2px solid #B22234;border-radius:18px;padding:18px 22px;margin-bottom:24px}
.hb-art{width:120px;height:auto;border-radius:10px;background:#fff;padding:6px;flex:none}
.hb-t{flex:1 1 300px;min-width:0;display:grid;gap:4px}
.hb-t h2{font-size:1.5rem}
.hb-t p{margin:0;color:var(--muted)}
.hb-t .eyebrow{color:#B22234}
:root[data-theme="dark"] .hb-t .eyebrow{color:#FF8A8A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hb-t .eyebrow{color:#FF8A8A}}
.credit{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted);margin-top:8px}
.credit img{border-radius:50%;flex:none;background:#fff}
.credit a{color:var(--green);font-weight:500}
.t-art{display:flex;align-items:center;justify-content:center;gap:2.5cqw}
.t-art img{height:11cqw;width:auto;max-width:14cqw;object-fit:contain}
.t-art .tt{min-width:0}
.p-credit{display:flex;align-items:center;gap:1cqw;font-size:1.5cqw;color:#777;margin-top:1.4cqw}
.p-credit img{height:2.6cqw;width:auto}
.crumbs{font-size:.88rem;color:var(--muted);padding-block:18px 6px}
.crumbs a{text-decoration:none;color:var(--green);font-weight:500}
.eyebrow{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--green)}
.hero{padding-block:44px 28px;display:grid;gap:14px;max-width:980px}
.hero p{max-width:720px}
.hero h1{font-size:clamp(2rem,4.5vw,3rem);font-weight:800}
.hero p{color:var(--muted);font-size:1.1rem;margin:0}
.popular{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;margin-bottom:36px;display:grid;gap:14px}
.popular h2{display:flex;align-items:center;justify-content:center;gap:10px;font-size:clamp(1.3rem,2.6vw,1.8rem);text-align:center}
.pop-note{margin:-4px 0 0;text-align:center;color:var(--muted);font-size:.88rem}
.pop-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:6px}
.pop{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;transition:transform .15s,box-shadow .15s}
.pop:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.12);border-color:var(--green)}
.pop-thumb{padding:10px 10px 0;pointer-events:none}
.tb{position:relative;aspect-ratio:8.5/11;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.15);background:#fff}
.tb .paper{position:absolute;top:0;left:0;width:600px;max-width:none;box-shadow:none;transform-origin:0 0;transform:scale(var(--s,.25))}
.pop-t{padding:10px 12px 12px;display:grid;gap:3px;text-align:center}
.pop-t b{font-family:var(--display);font-weight:600;font-size:.92rem;line-height:1.25}
.pop-t .views{color:var(--red);font-weight:700;font-size:.85rem}
.pop-t .grade{color:var(--muted);font-size:.82rem}
.shelf-h{font-size:1.3rem;margin-bottom:14px}
@media (prefers-reduced-motion:reduce){.pop{transition:none}.pop:hover{transform:none}}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding-bottom:48px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;text-decoration:none}
a.cat:hover{border-color:var(--green)}
.cat .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;color:#fff}
.cat h3{font-size:1.2rem}
.cat p{margin:0;color:var(--muted);font-size:.92rem}
.cat .meta{font-size:.85rem;font-weight:600;color:var(--green);margin-top:auto}
.cat.soon{opacity:.7}
.cat.soon .meta{color:var(--muted)}
.lh{font-size:2rem}
.sub{color:var(--muted);margin:6px 0 0}
.list{display:grid;gap:12px;padding-block:18px 48px}
.row{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-decoration:none}
.row:hover{border-color:var(--green)}
.thumb{width:58px;flex:none;aspect-ratio:8.5/11;background:#fff;border:1px solid var(--line);border-radius:4px;padding:6px;display:grid;gap:4px;align-content:start}
.thumb i{height:6px;background:#cfd6d2;border-radius:1px}
.row .t{min-width:0}
.row b{font-family:var(--display);font-size:1.05rem;display:block}
.row span{color:var(--muted);font-size:.9rem}
.row .go{margin-left:auto;color:var(--green);font-weight:600;white-space:nowrap}
.ws{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;padding-block:10px 56px;align-items:start}
@media (max-width:860px){.ws{grid-template-columns:1fr}}
.ws-head{grid-column:1/-1;display:grid;gap:6px}
.ws-head h1{font-size:clamp(1.5rem,3vw,2.1rem)}
.ws-head p{margin:0;color:var(--muted);max-width:68ch}
.paper-wrap{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;justify-content:center;min-width:0}
aside.panel{display:grid;gap:16px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px)}
@media (max-width:860px){aside.panel{position:static}}
.box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}
.box h3{font-size:1rem}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;padding:11px 14px;font-weight:600;font-family:var(--display);background:var(--green);color:#fff;text-decoration:none}
.btn.gold{background:var(--gold);color:#3D2F00}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--green)}
.vers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.vers a{border:1.5px solid var(--line);border-radius:8px;padding:7px 0;font-family:var(--display);font-weight:600;text-align:center;text-decoration:none}
.vers a:hover{border-color:var(--green)}
.vers a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600;font-family:var(--display)}
.toggle input{width:20px;height:20px;accent-color:var(--green)}
.note{font-size:.83rem;color:var(--muted);margin:0}
.toast{font-size:.85rem;background:var(--bg);border-radius:8px;padding:8px 10px}
.rel{display:grid;gap:6px}
.rel a{color:var(--green);font-weight:500;text-decoration:none}
.rel a:hover{text-decoration:underline}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
footer .wrap{padding-block:20px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* ---- the worksheet paper (sizes in % of paper width so it matches the PDF) ---- */
.paper{container-type:inline-size;width:100%;max-width:640px;aspect-ratio:8.5/11;background:var(--paper);color:var(--paper-ink);box-shadow:0 2px 14px rgba(0,0,0,.12);font-family:var(--display);line-height:1.2;overflow:hidden}
.pin{height:100%;padding:6cqw 6.5cqw 4.5cqw;display:flex;flex-direction:column}
.p-top{display:flex;justify-content:space-between;gap:3cqw;font-size:2.3cqw}
.p-top span{flex:1;border-bottom:.25cqw solid #333;padding-bottom:.4cqw}
.p-top span:last-child{flex:.55}
.p-title{text-align:center;margin-top:3.6cqw}
.p-title h2{font-size:3.9cqw;font-weight:700}
.p-title div{font-size:2.2cqw;color:#555;margin-top:.8cqw}
.p-key{display:inline-block;background:var(--key);color:#fff;font-size:1.9cqw;font-weight:700;padding:.3cqw 1.4cqw;border-radius:1cqw;margin-left:1.4cqw;vertical-align:middle}
.p-ins{font-size:2.2cqw;font-weight:600;margin-top:2.6cqw}
.grid{flex:1;display:grid;margin-top:1.6cqw;align-content:space-evenly;row-gap:1.4cqw;min-height:0}
.prob{display:flex;gap:.35em;font-variant-numeric:tabular-nums;min-width:0}
.prob .n{font-size:.5em;color:#777;padding-top:.3em;min-width:1.6em;text-align:right;flex:none}
.v-prob{justify-content:center}
.v-prob .v{display:grid;justify-items:end;font-weight:500;line-height:1.05}
.v-prob .ln{display:flex;gap:.4em;align-items:center}
.v-prob .bar{width:100%;border-top:.07em solid #222;margin-top:.04em}
.v-prob .ans{height:1.25em;padding-top:.15em;color:var(--key);font-weight:700}
.l-prob{align-items:baseline;padding-left:1.5cqw}
.l-prob .n{padding-top:0;font-size:.6em}
.l-prob .l{display:flex;align-items:baseline;gap:.3em;flex-wrap:nowrap;white-space:nowrap;font-weight:500}
.l-prob .tight{margin-left:-.25em}
.blank{display:inline-block;min-width:2.2em;border-bottom:.06em solid #222;text-align:center;height:1.15em}
.blank.w{min-width:3.2em}
.blank.s{min-width:1.6em}
.circ{display:inline-grid;place-items:center;width:1.45em;height:1.45em;border:.06em solid #222;border-radius:50%;align-self:center;line-height:1}
.ka{color:var(--key);font-weight:700}
.c-prob{flex-direction:row;align-items:flex-start}
.cbox{flex:1;display:grid;justify-items:center;gap:.4em}
.clk{width:88%;height:auto;display:block}
.f-prob{align-items:flex-start}
.w-prob{border:.25cqw solid #BBBBBB;border-radius:1.5cqw;padding:2cqw;gap:2cqw;min-height:0;align-items:stretch}
.wl{flex:0 0 56%;display:flex;gap:.5em;align-items:flex-start}
.wl p{margin:0;line-height:1.4;font-weight:400;white-space:normal}
.wr{flex:1;border-left:.2cqw dashed #C8C8C8;padding-left:2cqw;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;min-width:0}
.work{align-self:flex-start;font-size:.7em;color:#999}
.wans{display:flex;align-items:baseline;gap:.35em;font-weight:600;white-space:nowrap}
.fb{width:90%;height:auto;display:block}
.ct{font-size:1.2em;font-weight:600;display:flex;gap:.15em;align-items:baseline}
.p-foot{display:flex;justify-content:space-between;font-size:1.7cqw;color:#777;margin-top:2.4cqw;border-top:.2cqw solid #ddd;padding-top:1.2cqw}

@media print{
  @page{size:letter;margin:0}
  body{background:#fff}
  .banner,header.top,footer,.crumbs,.ws-head,aside.panel{display:none!important}
  .wrap,.ws,.paper-wrap{display:block;padding:0;margin:0;border:0;max-width:none;background:none}
  .paper{width:8.5in;max-width:none;height:11in;box-shadow:none}
}