:root {
  --bg: #eef1ec;
  --surface: #ffffff;
  --surface2: #f5f7f3;
  --ink: #1a2233;
  --muted: #5a6474;
  --line: #d6dcd3;
  --brand: #b8323d;
  --brand-ink: #ffffff;
  --gold: #c98a12;
  --science: #13806f;
  --social: #b9542a;
  --ela: #7446b8;
  --math: #2d66c4;
  --shadow: 0 1px 2px rgba(26, 34, 51, .06), 0 6px 18px rgba(26, 34, 51, .06);
  --display: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11161f; --surface: #19202c; --surface2: #1f2836; --ink: #e8ecf2; --muted: #9aa5b5; --line: #2c3645;
    --brand: #e0626b; --brand-ink: #1a0b0d; --gold: #f0b849;
    --science: #3cc0a8; --social: #e9875a; --ela: #a988e6; --math: #6c9cf0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11161f; --surface: #19202c; --surface2: #1f2836; --ink: #e8ecf2; --muted: #9aa5b5; --line: #2c3645;
  --brand: #e0626b; --brand-ink: #1a0b0d; --gold: #f0b849;
  --science: #3cc0a8; --social: #e9875a; --ela: #a988e6; --math: #6c9cf0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.15; text-wrap: balance; margin: 0; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* header */
.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.top .wrap { display: flex; align-items: center; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.brand-sub { font-size: .78rem; color: var(--muted); display: block; line-height: 1.2; }
.nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 6px 12px; border-radius: 8px; font-size: .92rem; color: var(--muted); }
.nav a:hover, .nav a.on { background: var(--surface2); color: var(--ink); }
.count { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font-size: .75rem; text-align: center; font-variant-numeric: tabular-nums; }

/* catalog hero */
.intro { padding-block: 36px 18px; display: grid; gap: 14px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } }
.intro h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; }
.intro h1 em { font-style: normal; color: var(--brand); }
.intro p { margin: 0; color: var(--muted); max-width: 60ch; }
.steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li { display: flex; gap: 12px; align-items: baseline; font-size: .95rem; }
.steps li::before { counter-increment: st; content: counter(st); font-family: var(--mono); font-weight: 700; color: var(--brand); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .9rem; color: var(--muted); padding-block: 4px 0; }
.facts b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* filters */
.filters { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--toph, 60px)); z-index: 10; background: var(--bg); padding-block: 10px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.fgroup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flabel { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 2px; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 5px 12px; border-radius: 999px; cursor: pointer; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.search { flex: 1 1 200px; min-width: 0; max-width: 320px; margin-left: auto; }
.search input { width: 100%; padding: 7px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }

/* standards groups */
.results { padding-block: 10px 60px; display: grid; gap: 34px; }
.std-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 14px; }
.std-code { font-family: var(--mono); font-weight: 700; font-size: .85rem; padding: 3px 8px; border-radius: 6px; color: #fff; white-space: nowrap; }
.std-code { max-width: 15em; white-space: normal; line-height: 1.5; flex-shrink: 0; }
.std-head h2 { font-size: 1.35rem; }
.std-head p { grid-column: 2; margin: 0; color: var(--muted); font-size: .92rem; max-width: 90ch; }
@media (max-width: 560px) { .std-head { grid-template-columns: 1fr; } .std-head p { grid-column: 1; } }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card-top { padding: 14px 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fmt { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--subj); }
.fmt svg { width: 18px; height: 18px; }
.star { border: 0; background: transparent; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; line-height: 0; }
.star svg { width: 22px; height: 22px; }
.star.on { color: var(--gold); }
.card-body { padding: 8px 16px 12px; display: grid; gap: 6px; flex: 1; align-content: start; }
.card h3 { font-size: 1.2rem; }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.card p { margin: 0; color: var(--muted); font-size: .93rem; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-actions { display: flex; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--line); background: var(--surface2); }
.card-strip { height: 5px; background: var(--subj); }
.cover { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.cover-band { height: 16px; }
.cover-body { display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px; min-height: 92px; }
.cover-emblem { width: 58px; height: 58px; flex: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.cover-title { font-size: 1.45rem; line-height: 1.05; text-wrap: balance; }
.cover.big { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.cover.big .cover-band { height: 28px; }
.cover.big .cover-body { min-height: 190px; flex-direction: column; justify-content: center; text-align: center; padding: 20px; }
.cover.big .cover-emblem { width: 96px; height: 96px; }
.cover.big .cover-title { font-size: 2rem; }
.room-head-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
.room-head-text { display: grid; gap: 10px; }
@media (max-width: 820px) { .room-head-grid { grid-template-columns: 1fr; } .cover.big .cover-body { min-height: 130px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; font-weight: 700; font-size: .92rem; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.primary:hover { filter: brightness(1.07); }
.btn svg { width: 17px; height: 17px; }
.btn.grow { flex: 1; }
.card-actions .btn { white-space: nowrap; padding-inline: 10px; font-size: .88rem; }
.empty { padding: 50px 0; text-align: center; color: var(--muted); }

/* room page */
.crumbs { padding-block: 18px 0; font-size: .9rem; }
.crumbs a { color: var(--muted); }
.room-head { padding-block: 14px 20px; display: grid; gap: 10px; }
.room-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
.room-head .tag { font-size: 1.08rem; color: var(--muted); margin: 0; max-width: 70ch; }
.kick { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--subj); display: flex; gap: 10px; flex-wrap: wrap; }
.std-box { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); max-width: 900px; }
.std-box p { margin: 0; font-size: .95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; border-block: 1px solid var(--line); position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--toph, 60px)); background: var(--bg); z-index: 9; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px; z-index: 100; font-weight: 700; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

.layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding-block: 24px 80px; }
@media (max-width: 640px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 140px; align-self: start; display: grid; gap: 2px; font-size: .92rem; }
.toc a { text-decoration: none; color: var(--muted); padding: 5px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-left-color: var(--subj); }
.sec { display: grid; gap: 12px; padding-bottom: 34px; margin-bottom: 30px; border-bottom: 1px solid var(--line); scroll-margin-top: 150px; }
.sec:last-child { border-bottom: 0; }
.sec > h2 { font-size: 1.6rem; }
.sec h3 { font-size: 1.1rem; margin-top: 6px; }
.sec p { margin: 0; max-width: 72ch; }
.sec ul, .sec ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; max-width: 76ch; }
.lede { color: var(--muted); }
.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.glance div { background: var(--surface); padding: 12px 14px; }
.glance dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.glance dd { margin: 2px 0 0; font-weight: 700; }
.timeline { display: grid; gap: 0; border-left: 3px solid var(--subj); margin-left: 6px; }
.timeline > div { padding: 4px 0 14px 18px; position: relative; display: grid; gap: 4px; }
.timeline > div::before { content: ""; position: absolute; left: -9px; top: 9px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 3px solid var(--subj); }
.timeline .when { font-family: var(--mono); font-size: .8rem; color: var(--subj); font-weight: 700; }
.timeline h3 { margin: 0; }
.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.vocab div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: .93rem; }
.vocab b { display: block; font-family: var(--display); font-size: 1rem; }
.callout { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; }
.callout.warn { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
details.key { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
details.key summary { cursor: pointer; padding: 12px 16px; font-weight: 700; display: flex; gap: 10px; align-items: baseline; }
details.key summary .pc { margin-left: auto; font-family: var(--mono); font-size: .85rem; color: var(--gold); }
details.key ol { padding: 0 16px 14px 36px; }
details.key li { padding: 4px 0; }
.ans { color: var(--subj); font-weight: 700; }
.codebig { font-family: var(--mono); font-weight: 800; letter-spacing: .15em; font-size: 1.3rem; }
.ticket { background: var(--surface); border: 1px dashed var(--muted); border-radius: 12px; padding: 16px 18px; display: grid; gap: 10px; }
.ticket ol { gap: 10px; }
.ticket .ch { list-style: upper-alpha; color: var(--muted); }
.res { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.res a { display: grid; gap: 2px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.res a:hover { border-color: var(--subj); }
.res b { font-size: .98rem; }
.res span { font-size: .88rem; color: var(--muted); }
.res small { font-size: .75rem; color: var(--subj); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.method { display: grid; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.method h3 { margin: 0; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.badge { font-family: var(--body); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); }
.badge.rec { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
textarea.code { width: 100%; min-height: 90px; font-family: var(--mono); font-size: .8rem; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); resize: vertical; }
.verify { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.verify input { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); flex: 1 1 200px; max-width: 300px; }
.verify output { font-family: var(--mono); font-weight: 800; font-size: 1.1rem; }

/* help page */
.help { padding-block: 30px 80px; display: grid; gap: 24px; max-width: 860px; }
.help h1 { font-size: clamp(2rem, 4vw, 2.8rem); }

/* student play overlay */
.cx-play { position: fixed; inset: 0; z-index: 200; background: #101a30; }
.cx-play-scroll { position: absolute; inset: 0; overflow: auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

.subj-science { --subj: var(--science); }
.subj-social { --subj: var(--social); }
.subj-ela { --subj: var(--ela); }
.subj-math { --subj: var(--math); }

@media print {
  .top, .filters, .actions, .toc, .crumbs, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .layout { grid-template-columns: 1fr; }
  details.key { break-inside: avoid; }
  details.key ol { display: block; }
}
.tbl{border-collapse:collapse;width:100%;margin:8px 0 14px;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--line,#cfd6e2);padding:8px 10px;text-align:left;vertical-align:top}
.tbl th{background:rgba(0,0,0,.05)}
#s-game code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px}
#s-game details{margin-top:8px}
@media (max-width:640px){#s-game .tbl{display:block;overflow-x:auto}}
.plan td:first-child{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.sec h2 .step,.made-row .step,.stephead .step{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:8px;background:var(--ink,#1d2433);color:#fff;font-size:16px;margin-right:10px;vertical-align:middle}
.sec h2 .when,.stephead .when{font-size:14px;font-weight:600;color:var(--muted,#5d6475);margin-left:8px;letter-spacing:0}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:18px;align-items:start}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.steps{display:grid;gap:14px;margin:14px 0}
.stepcard{border:1px solid var(--line,#cfd6e2);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.6)}
.stephead{display:flex;align-items:center;gap:4px;margin-bottom:8px}.stephead h3{margin:0;flex:1}
.stepcard dl{display:grid;gap:6px;margin:0}.stepcard dl>div{display:grid;grid-template-columns:130px 1fr;gap:10px}
.stepcard dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5d6475);padding-top:2px}.stepcard dd{margin:0}
@media (max-width:640px){.stepcard dl>div{grid-template-columns:1fr;gap:0}}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.ticket .stim{background:rgba(0,0,0,.05);padding:10px 14px;border-radius:10px}
.ticket i{display:block;color:var(--muted,#5d6475);margin-top:4px}
.made{display:grid;gap:10px;margin:8px 0 18px}
.made-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line,#cfd6e2);border-radius:12px;padding:10px 14px}
.made-row b{display:block}.made-row span:not(.step){font-size:14px;color:var(--muted,#5d6475)}
.made-act{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.made-row{grid-template-columns:auto 1fr}.made-act{grid-column:1/-1;justify-content:flex-start}}

/* ---------- lesson presenter ---------- */
.cx-present{background:#f6f4ee}
.lp{--lp:#2d66c4;--lp-soft:#e8eefa;--lp-ink:#1b2130;--lp-muted:#5b6376;position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;background:#f6f4ee;color:var(--lp-ink);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:clamp(16px,1.35vw,21px);line-height:1.45}
.lp-science{--lp:#13806f;--lp-soft:#e1f2ee}.lp-social{--lp:#b9542a;--lp-soft:#f8e9e1}.lp-ela{--lp:#7446b8;--lp-soft:#efe8f8}.lp-math{--lp:#2d66c4;--lp-soft:#e6edf9}
.lp *{box-sizing:border-box}
.lp-top{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#fff;border-bottom:3px solid var(--lp);flex-wrap:wrap}
.lp-title{display:flex;flex-direction:column;line-height:1.15;min-width:0}.lp-title b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.05em}.lp-title span{font-size:.72em;color:var(--lp-muted);font-weight:700;letter-spacing:.05em}
.lp-parts{display:flex;gap:4px;margin:0 auto;flex-wrap:wrap}.lp-parts span{font-size:.72em;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef0f4;color:var(--lp-muted)}.lp-parts span.past{background:var(--lp-soft);color:var(--lp)}.lp-parts span.on{background:var(--lp);color:#fff}
.lp-tools{display:flex;gap:6px;align-items:center}
.lp-ico,.lp-timer{font:inherit;font-size:.8em;font-weight:700;border:2px solid #c9ced9;background:#fff;color:var(--lp-ink);border-radius:10px;padding:6px 10px;cursor:pointer}
.lp-ico.on{background:var(--lp);color:#fff;border-color:var(--lp)}
.lp-timer{font-variant-numeric:tabular-nums;min-width:74px;font-size:.95em}.lp-timer.run{border-color:var(--lp);color:var(--lp)}.lp-timer.done{background:#c8272d;color:#fff;border-color:#c8272d;animation:lp-blink 1s infinite}
@keyframes lp-blink{50%{opacity:.55}}
.lp-main{overflow:auto;padding:22px clamp(16px,3vw,48px) 30px}
.lp-foot{display:flex;align-items:center;gap:14px;padding:10px 18px;background:#fff;border-top:1px solid #dfe3ea}
.lp-dots{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}.lp-dots button{width:13px;height:13px;border-radius:50%;border:2px solid var(--lp);background:#fff;padding:0;cursor:pointer}.lp-dots button.on{background:var(--lp)}
.lp-count{font-weight:700;color:var(--lp-muted);font-variant-numeric:tabular-nums}
.lp-btn{font:inherit;font-size:.85em;font-weight:700;border:2px solid var(--lp);background:var(--lp);color:#fff;border-radius:999px;padding:8px 18px;cursor:pointer}
.lp-btn.ghost{background:#fff;color:var(--lp)}.lp-btn.sm{padding:4px 12px;font-size:.78em}.lp-btn[disabled]{opacity:.35;cursor:not-allowed}
.lp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}.lp-row.center{justify-content:center}
.lp-head{margin-bottom:14px}.lp-head h2{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(28px,3.2vw,48px);line-height:1.05;margin:6px 0 0;text-wrap:balance}
.lp-sub{margin:4px 0 0;color:var(--lp-muted);font-weight:700}
.lp-tag{display:inline-block;font-size:.72em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--lp);color:#fff;border-radius:6px;padding:3px 10px}
.lp-hero h1{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(34px,4.4vw,64px);line-height:1;margin:6px 0 18px;text-wrap:balance}.lp-kick{font-weight:800;color:var(--lp);letter-spacing:.06em}
.lp-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}.lp-grid2.wide{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.lp-grid2>div:not(.lp-box){display:grid;gap:14px;align-content:start}
.lp-box{background:#fff;border:1px solid #dfe3ea;border-radius:16px;padding:16px 20px;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.lp-box.accent{background:var(--lp-soft);border-color:transparent;border-left:6px solid var(--lp)}
.lp-box.talk{border:2px dashed var(--lp)}
.lp-box h3{margin:0 0 8px;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:var(--lp)}
.lp-box h3 .lp-small{text-transform:none;letter-spacing:0;color:var(--lp-muted);font-weight:600;margin-left:6px}
.lp-big{font-size:1.3em;line-height:1.4;margin:0}.lp-big2{font-size:1.12em;margin:0}
.lp-small{font-size:.8em;color:var(--lp-muted)}
.lp-checks,.lp-exp{margin:0;padding-left:1.2em;display:grid;gap:6px}.lp-checks li::marker{content:"✓  ";color:var(--lp);font-weight:800}
.lp-agenda{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}.lp-agenda li{display:flex;gap:12px;align-items:baseline;font-weight:700}.lp-agenda span{font-variant-numeric:tabular-nums;color:var(--lp);min-width:44px}.lp-agenda em{margin-left:auto;font-style:normal;color:var(--lp-muted);font-weight:600;font-size:.85em}
.lp-chips{display:flex;flex-wrap:wrap;gap:6px}.lp-chips span{background:var(--lp-soft);color:var(--lp-ink);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.85em}
.lp-wq{margin:0;padding-left:1.3em;display:grid;gap:12px;font-size:1.15em}.lp-wq p{margin:0}
.lp-look,.lp-ans{margin-top:6px;background:#fff7d6;border-radius:10px;padding:8px 12px;font-size:.88em}.lp-ans span{color:var(--lp-muted)}
.lp-notes{font-size:1.1em;line-height:2;margin:0 0 8px}.lp-blank{display:inline-block;width:7em;border-bottom:3px solid var(--lp-ink);margin:0 4px;vertical-align:baseline}.lp-fill{color:var(--lp);font-weight:800;text-decoration-thickness:3px}
.lp-vis{margin:8px 0 0;text-align:center}.lp-vis svg{max-width:100%;height:auto;max-height:46vh}.lp-vis figcaption{font-size:.8em;color:var(--lp-muted);margin-top:4px}
.lp-visrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.lp-visrow .lp-vis{flex:1;min-width:140px}
.lp-sim{border-radius:12px;background:#f7f8fb;padding:10px}.lp-simh{font-weight:800;margin-bottom:6px}
.lp-sim .ep-btn,.lp-sim button{font-size:15px}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.lp-card{position:relative;min-height:110px;border:2px solid var(--lp);border-radius:14px;background:#fff;font:inherit;cursor:pointer;padding:10px;color:var(--lp-ink)}
.lp-card .f{font-weight:800;display:flex;flex-direction:column;gap:4px}.lp-card .f small{font-weight:600;color:var(--lp-muted);font-size:.7em}.lp-card .b{display:none;font-weight:700}
.lp-card.on{background:var(--lp);color:#fff}.lp-card.on .f{display:none}.lp-card.on .b{display:block}
.lp-cfu{background:#fff;border:3px solid var(--lp);border-radius:16px;padding:14px 18px}
.lp-cfuh{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.lp-mode{font-size:.8em;font-weight:700;color:var(--lp-muted)}
.lp-q{font-weight:800;font-size:1.12em;margin:10px 0}
.lp-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lp-choice{display:flex;gap:10px;align-items:flex-start;text-align:left;font:inherit;border:2px solid #c9ced9;background:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;color:var(--lp-ink)}
.lp-choice b{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:8px;background:var(--lp-soft);color:var(--lp)}
.lp-choice.right{border-color:#1f7a3a;background:#e2f4e6}.lp-choice.wrong{border-color:#c8272d;background:#fbe6e6;text-decoration:line-through}
.lp-seg{font:inherit;border:2px dashed #c9ced9;background:#fff;border-radius:8px;padding:2px 8px;margin:2px 0;cursor:pointer;color:var(--lp-ink)}.lp-seg.right{border-style:solid;border-color:#1f7a3a;background:#e2f4e6}.lp-seg.wrong{border-color:#c8272d;background:#fbe6e6}
.lp-order{display:grid;gap:4px;margin:0;padding-left:1.4em}
.lp-inrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.lp-inrow input{font:inherit;font-size:1.1em;padding:8px 12px;border:2px solid #c9ced9;border-radius:10px;width:min(260px,100%)}
.lp-fb{margin-top:8px;font-weight:700}.lp-fb.good{color:#1f7a3a}.lp-fb.bad{color:#c8272d}
.lp-steps{margin:0;padding-left:1.4em;display:grid;gap:8px;font-size:1.12em}
.lp-work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.lp-bigtimer{text-align:center}.lp-bt{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(64px,9vw,150px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--lp)}
.lp-bt.small{font-size:64px;text-align:center;margin:8px 0}.lp-bt.warn{color:#d9822b}.lp-bt.done{color:#c8272d;animation:lp-blink 1s infinite}
.lp-checkpts{display:grid;gap:4px;margin-top:14px;text-align:left;font-size:.85em}.lp-checkpts span{background:var(--lp-soft);border-radius:8px;padding:4px 10px}
.lp-votes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}.lp-vote{background:var(--lp-soft);border-radius:12px;padding:10px}.lp-vote span{display:block;font-weight:700}.lp-vote b{display:block;font-size:2.4em;color:var(--lp);font-variant-numeric:tabular-nums}.lp-vote div{display:flex;gap:6px;justify-content:center}
.lp-hook{margin-bottom:14px}
.lp-notesp{position:fixed;right:16px;bottom:74px;width:min(420px,calc(100% - 32px));max-height:50vh;overflow:auto;background:#1b2130;color:#fff;border-radius:14px;padding:14px 18px;font-size:.85em;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:5}
.lp-notesp h3{margin:0 0 6px;font-size:.9em;color:#ffd166}.lp-notesp ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.lp-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:10;padding:16px}
.lp-mbox{position:relative;background:#fff;border-radius:18px;padding:22px 26px;width:min(520px,100%);text-align:center}
.lp-mbox h3{margin:0 0 6px}.lp-mbox textarea{width:100%;font:inherit;margin:8px 0;border:2px solid #c9ced9;border-radius:10px;padding:8px}
.lp-x{position:absolute;top:8px;right:12px;border:0;background:none;font-size:28px;cursor:pointer;color:var(--lp-muted)}
.lp-picked{font-family:"Bricolage Grotesque",sans-serif;font-size:48px;font-weight:800;color:var(--lp);margin:12px 0}
@media (max-width:900px){.lp-grid2,.lp-grid2.wide,.lp-work{grid-template-columns:1fr}.lp-choices{grid-template-columns:1fr}.lp-parts{display:none}}
.lp .lp-sim.ep{min-height:0;background:#f7f8fb;font-size:17px;line-height:1.4;color:var(--lp-ink)}
.lp-box ul+h3,.lp-box p+h3,.lp-box div+h3{margin-top:16px}
.lp-task{margin:12px 0 0;font-weight:700;background:var(--lp-soft);border-radius:10px;padding:10px 12px}.lp-model li{font-size:1.05em}
.navdl{font-weight:700}
.lp-ws{float:right;margin:0 0 8px 12px;font-size:.78em;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--lp);color:var(--lp);border-radius:999px;padding:4px 12px;background:#fff}