@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root { --paper:#f5f3ed; --paper-deep:#e9e6dc; --ink:#1b2529; --muted:#647078; --line:#ccd0ca; --orange:#e16b3f; --blue:#4a7d94; --green:#708c75; --white:#fffefa; --shadow:0 18px 55px rgba(41,49,45,.10); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:238px minmax(0,1fr); }
.rail { background:#202a2d; color:#eef0ea; padding:30px 22px 24px; display:flex; flex-direction:column; min-height:100vh; }
.brand { color:inherit; text-decoration:none; display:flex; gap:10px; align-items:center; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid #92a39c; color:#dbe4da; font:600 18px 'IBM Plex Mono'; transform:rotate(-5deg); }
.brand strong,.brand small { display:block; letter-spacing:.08em; }.brand strong { font-size:11px; }.brand small { color:#aab7b0; font:11px 'IBM Plex Mono'; margin-top:4px; }
.rail-rule { height:1px; background:#455255; margin:33px 0 28px; }.eyebrow,.kicker,.mini-label { margin:0; color:var(--muted); font:600 10px 'IBM Plex Mono'; letter-spacing:.13em; text-transform:uppercase; }.rail .eyebrow { color:#8b9a94; }
.rail-nav { display:grid; gap:6px; margin-top:15px; }.nav-item { border:0; padding:11px 8px; display:grid; grid-template-columns:23px 1fr auto; gap:6px; color:#b9c3bd; text-align:left; background:transparent; font-size:12px; border-radius:3px; }.nav-item span { color:#91a59a; font-size:16px; }.nav-item b { color:#73827d; font:11px 'IBM Plex Mono'; }.nav-item:hover,.nav-item.active { color:#f5f2e8; background:#344246; }.nav-item.active span { color:#ed9b70; }.nav-item.active b { color:#e3a07d; }
.rail-bottom { margin-top:auto; border-top:1px solid #455255; padding-top:18px; display:grid; gap:11px; }.legend-line { display:flex; gap:9px; align-items:center; color:#8f9f99; font:10px 'IBM Plex Mono'; }.dot { width:7px; height:7px; border-radius:50%; }.dot.orange{background:var(--orange)}.dot.blue{background:#75a9b9}.dot.green{background:#91ac92}
main { min-width:0; max-width:1540px; width:100%; margin:0 auto; padding:43px clamp(28px,5vw,76px) 70px; }.topbar { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; padding-bottom:34px; }.kicker { color:var(--orange); margin-bottom:13px; }h1 { font-size:clamp(38px,5vw,68px); line-height:.98; letter-spacing:-.055em; margin:0; font-weight:600; }.topbar h1 em { color:var(--blue); font-style:normal; }.lede { color:var(--muted); line-height:1.55; max-width:490px; font-size:14px; margin:20px 0 0; }.top-actions { display:flex; gap:9px; white-space:nowrap; }.button { border:1px solid var(--ink); padding:11px 14px; font-size:12px; font-weight:600; }.button span { margin-right:7px; }.button.ghost { background:transparent; color:var(--ink); border-color:var(--line); }.button.dark { background:var(--ink); color:#f6f1e7; }
.signal-strip { border-block:1px solid var(--line); padding:14px 0; display:grid; grid-template-columns:minmax(220px,1fr) minmax(260px,1.5fr) auto; gap:30px; align-items:center; }.signal-strip strong { display:block; font-size:15px; margin-top:5px; }.signal-label { color:var(--orange); font:600 10px 'IBM Plex Mono'; letter-spacing:.12em; }.signal-strip p { color:var(--muted); font-size:12px; line-height:1.45; margin:0; }.lens-meta { display:flex; align-items:center; gap:10px; }.signal-index { color:#a1a9a2; font:11px 'IBM Plex Mono'; white-space:nowrap; }.lens-refresh { border:0; background:transparent; color:var(--orange); font:18px 'IBM Plex Mono'; padding:0; line-height:1; }.lens-refresh:hover { color:var(--blue); }.lens-refresh.loading { animation:spin .8s linear infinite; }@keyframes spin { to { transform:rotate(360deg); } }
.workspace-grid { display:grid; grid-template-columns:minmax(310px,.78fr) minmax(500px,1.22fr); gap:32px; padding-top:38px; }.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:18px; }.section-head h2 { margin:6px 0 0; font-size:22px; letter-spacing:-.03em; }.search-box { border-bottom:1px solid var(--line); display:flex; gap:6px; align-items:center; padding:6px 0; color:var(--muted); }.search-box input { border:0; outline:0; background:transparent; width:125px; color:var(--ink); font-size:12px; }.exercise-list { display:grid; gap:9px; }.exercise-card { appearance:none; border:1px solid var(--line); background:rgba(255,254,250,.36); text-align:left; padding:16px 17px; position:relative; transition:.18s ease; }.exercise-card:hover,.exercise-card.selected { border-color:var(--ink); background:var(--white); transform:translateX(3px); box-shadow:4px 4px 0 var(--paper-deep); }.exercise-card.selected:before { content:''; position:absolute; width:3px; background:var(--orange); left:-1px; top:-1px; bottom:-1px; }.card-top { display:flex; justify-content:space-between; color:var(--muted); font:10px 'IBM Plex Mono'; letter-spacing:.1em; }.card-top .card-no { color:var(--orange); }.exercise-card h3 { font-size:15px; line-height:1.2; margin:10px 0 8px; letter-spacing:-.02em; }.exercise-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.45; }.card-footer { display:flex; gap:8px; margin-top:13px; }.tiny-tag { color:var(--blue); font:10px 'IBM Plex Mono'; }
.sheet { background:var(--white); box-shadow:var(--shadow); border:1px solid #dbdcd4; padding:29px 34px 24px; min-height:720px; position:relative; overflow:hidden; }.sheet:after { content:''; position:absolute; top:0; right:0; width:76px; height:76px; background:linear-gradient(135deg, transparent 50%, #e9e8de 50%); opacity:.55; }.sheet-head,.sheet-footer,.visual-head { display:flex; justify-content:space-between; align-items:center; }.sheet-number { font:500 14px 'IBM Plex Mono'; color:var(--orange); margin-right:12px; }.tag { color:var(--muted); font:10px 'IBM Plex Mono'; letter-spacing:.1em; }.icon-button { border:0; background:transparent; color:var(--muted); font-size:19px; padding:0; }.sheet-title-row { display:flex; gap:14px; align-items:baseline; margin-top:31px; }.sheet h2 { font-size:clamp(25px,3vw,38px); line-height:1.04; letter-spacing:-.06em; margin:0; max-width:660px; }.difficulty { color:var(--orange); font:11px 'IBM Plex Mono'; white-space:nowrap; }.sheet-hook { max-width:680px; color:var(--muted); font-size:14px; line-height:1.5; margin:13px 0 23px; }.equation-block { border-block:1px solid var(--line); padding:18px 0; font:600 clamp(17px,2vw,25px) 'IBM Plex Mono'; color:var(--blue); letter-spacing:-.04em; }.sheet-columns { display:grid; grid-template-columns:1fr 1fr; gap:33px; margin-top:26px; }.sheet-columns p:not(.mini-label),.answer p:not(.mini-label) { font-size:12px; line-height:1.6; color:var(--muted); margin:9px 0 0; }.mini-label { color:var(--orange); }.parameter-list { display:flex; gap:15px; flex-wrap:wrap; margin-top:20px; }.parameter { border-top:1px solid var(--line); padding-top:6px; min-width:68px; }.parameter strong { display:block; font:14px 'IBM Plex Mono'; }.parameter span { color:var(--muted); font-size:10px; }.check-list,.break-list { list-style:none; margin:10px 0 0; padding:0; }.check-list li,.break-list li { position:relative; padding-left:19px; margin-bottom:8px; font-size:12px; line-height:1.5; color:var(--ink); }.check-list li:before { content:'\25a1'; position:absolute; left:0; color:var(--green); font-size:13px; }.break-list li:before { content:'\2022'; position:absolute; left:4px; color:var(--orange); }.break-list li { color:var(--muted); }.break-label { margin-top:24px !important; }
.visual-panel { margin-top:27px; background:#eef1ed; padding:17px 17px 13px; }.visual-head strong { font-size:13px; display:block; margin-top:5px; }.visual-description { color:var(--muted); font-size:10px; line-height:1.35; margin:5px 0 0; max-width:430px; }.chart-note { color:var(--muted); font:10px 'IBM Plex Mono'; }.visual-panel canvas { width:100%; height:210px; display:block; margin-top:9px; }.chart-axes { display:flex; justify-content:space-between; color:#84928b; font:9px 'IBM Plex Mono'; margin-top:-2px; }.controls { display:flex; gap:20px; flex-wrap:wrap; border-top:1px solid #d1d8d2; padding-top:10px; margin-top:8px; }.control { display:grid; grid-template-columns:auto 90px auto; gap:8px; align-items:center; color:var(--muted); font:10px 'IBM Plex Mono'; }.control input { accent-color:var(--orange); width:90px; }.control output { color:var(--ink); min-width:40px; text-align:right; }.sheet-footer { color:#9ba59e; font:10px 'IBM Plex Mono'; margin-top:21px; gap:10px; }.answer { margin-top:20px; border-left:2px solid var(--orange); padding:2px 0 2px 13px; }.answer p:not(.mini-label) { color:var(--ink); }
.implementation-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:15px; }.implementation-head { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; }.implementation-head strong { display:block; margin-top:5px; font-size:13px; }.implementation-note { color:var(--blue); font:10px 'IBM Plex Mono'; }.implementation-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }.implementation-grid > div { border-left:2px solid var(--paper-deep); padding-left:10px; }.frame-label { color:var(--muted); font:600 9px 'IBM Plex Mono'; letter-spacing:.1em; }.implementation-grid p { color:var(--muted); font-size:10px; line-height:1.45; margin:7px 0 0; }
body.ink-mode { --paper:#252b2b; --paper-deep:#333b3b; --ink:#ebeee7; --muted:#a7b1ab; --line:#4a5654; --white:#313a39; --shadow:0 18px 55px rgba(0,0,0,.25); }body.ink-mode .rail{background:#131a1c}body.ink-mode .exercise-card{background:#2a3332}body.ink-mode .visual-panel{background:#263130}body.ink-mode .button.ghost{color:var(--ink)}body.ink-mode .implementation-grid > div{border-color:#4a5654}
@media (max-width:1000px) { .app-shell { grid-template-columns:190px minmax(0,1fr); }.workspace-grid { grid-template-columns:1fr; }.sheet { min-height:0; }.library-column { order:2; }.sheet { order:1; }.exercise-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) { .app-shell { display:block; }.rail { min-height:0; padding:16px 18px; }.brand { justify-content:center; }.rail-rule,.rail-bottom,.rail .eyebrow { display:none; }.rail-nav { display:flex; overflow:auto; margin-top:15px; }.nav-item { white-space:nowrap; padding:8px 10px; }.nav-item b { display:none; }main { padding:30px 17px 50px; }.topbar { display:block; }.top-actions { margin-top:24px; }.signal-strip { display:block; }.signal-strip p { margin-top:10px; }.lens-meta { margin-top:12px; }.signal-index { display:block; }.workspace-grid { padding-top:27px; }.section-head { display:block; }.search-box { margin-top:15px; width:100%; }.search-box input { width:100%; }.exercise-list { grid-template-columns:1fr; }.sheet { padding:23px 19px; }.sheet-columns { grid-template-columns:1fr; gap:20px; }.sheet-footer { align-items:flex-start; flex-wrap:wrap; }.sheet-footer > span:nth-child(2) { display:none; }.visual-panel canvas { height:175px; }.control { grid-template-columns:auto 70px auto; }.control input { width:70px; }.implementation-grid { grid-template-columns:1fr 1fr; gap:12px; } }
@media print { @page { size:letter; margin:12mm; } body { background:white; }.rail,.top-actions,.library-column,.signal-strip,.topbar .lede,.icon-button,.controls,.chart-note,.visual-panel { display:none !important; } .app-shell,main { display:block; padding:0; max-width:none; }.topbar { display:block; padding:0 0 16px; border-bottom:2px solid #1b2529; }.topbar h1 { font-size:31px; }.topbar h1 br { display:none; }.topbar h1 em { color:#1b2529; }.workspace-grid { display:block; padding:0; }.sheet { box-shadow:none; border:0; padding:20px 0 0; min-height:0; }.sheet:after { display:none; }.implementation-panel { break-inside:avoid; }.sheet-columns { gap:28px; }.answer { break-inside:avoid; }.sheet-footer { margin-top:16px; }.sheet-footer span:last-child { margin-left:auto; }.sheet-footer span:last-child:after { content:'  /  PRINTED FIELD NOTE'; }.sheet-title-row { margin-top:19px; } }
.review-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:14px; }
.review-body { margin-top:14px; }
.review-body + .review-body { border-top:1px dashed var(--line); padding-top:14px; }
.review-body ol,.review-body ul { margin:9px 0 0; padding-left:18px; color:var(--muted); font-size:12px; line-height:1.6; }
.review-body li { margin-bottom:5px; }
.review-body p:not(.mini-label) { color:var(--muted); font-size:12px; line-height:1.6; margin:9px 0 0; }
.sizing-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:12px; }
.sizing-grid > div { border-top:1px solid var(--line); padding-top:7px; }
.sizing-grid strong { display:block; font:14px 'IBM Plex Mono'; color:var(--ink); }
.sizing-grid span { color:var(--muted); font-size:10px; }
.memo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:12px; }
.memo-grid > div { border-left:2px solid var(--paper-deep); padding-left:10px; }
.memo-grid p { color:var(--muted); font-size:10px; line-height:1.45; margin:7px 0 0; }
.verdict-grid { grid-template-columns:repeat(3,1fr) !important; border-top:1px solid var(--orange); padding-top:4px; }
.score-grid { grid-template-columns:repeat(6,1fr) !important; }
.pager { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.pager[hidden] { display:none; }
.page-button { border:1px solid var(--line); background:transparent; color:var(--ink); font:10px 'IBM Plex Mono'; letter-spacing:.08em; padding:7px 12px; }
.page-button:hover:not(:disabled) { border-color:var(--orange); color:var(--orange); }
.page-button:disabled { opacity:.32; cursor:not-allowed; }
.page-meta { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font:10px 'IBM Plex Mono'; letter-spacing:.06em; }
#page-status { color:#9ba59e; }
body.ink-mode .page-button { border-color:#4a5654; }
.level-item { border:0; padding:11px 8px; display:grid; grid-template-columns:23px 1fr auto; gap:6px; color:#b9c3bd; text-align:left; background:transparent; font-size:12px; border-radius:3px; }
.level-item span { color:#91a59a; font-size:16px; }
.level-item b { color:#73827d; font:11px 'IBM Plex Mono'; }
.level-item:hover,.level-item.active { color:#f5f2e8; background:#344246; }
.level-item.active span { color:#ed9b70; }
.level-item.active b { color:#e3a07d; }
#sheet-prereq[hidden],#prereq-label[hidden] { display:none; }
@media (max-width:680px) { .level-item b { display:none; } }
.verdict-grid strong { font-size:16px !important; }
.light-green { color:#4f7d52; }
.light-yellow { color:#b08327; }
.light-red { color:#c0442a; }
#sheet-prereq { color:var(--blue) !important; font-size:11px !important; border-left:2px solid var(--line); padding-left:9px; }
body.ink-mode .light-green { color:#8fc193; }
body.ink-mode .light-yellow { color:#e0b45c; }
body.ink-mode .light-red { color:#e58a72; }
@media (max-width:680px) { .rail .eyebrow { display:block; margin-top:16px; }.memo-grid { grid-template-columns:1fr 1fr; }.sizing-grid { grid-template-columns:1fr 1fr; }.score-grid { grid-template-columns:1fr 1fr !important; }.verdict-grid { grid-template-columns:1fr !important; } }
.equation-source { display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; margin:8px 0 0 !important; font-size:10px !important; line-height:1.45 !important; color:var(--muted) !important; }
.equation-source a { color:var(--blue); border-bottom:1px solid var(--line); }
.equation-source a:hover { border-bottom-color:var(--blue); }
.mechanism-panel { margin-top:20px; border-top:1px solid var(--line); padding-top:15px; }
.mechanism-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:14px 0 18px; }
.mechanism-grid > div { border-left:2px solid var(--orange); padding-left:10px; }
.mechanism-grid p { color:var(--muted); font-size:11px; line-height:1.5; margin:7px 0 0 !important; }
@media (max-width:680px) { .mechanism-grid { grid-template-columns:1fr; gap:12px; } }
.spec-panel { margin-top:18px; border-top:1px solid var(--line); padding-top:15px; }
.spec-panel[hidden] { display:none; }
.spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:14px; }
.spec-grid > div,.spec-rows > div { border-left:2px solid var(--paper-deep); padding-left:10px; }
.spec-grid ul { list-style:none; margin:7px 0 0; padding:0; }
.spec-grid li { position:relative; padding-left:13px; margin-bottom:5px; color:var(--muted); font-size:11px; line-height:1.45; }
.spec-grid li:before { content:'\203A'; position:absolute; left:0; color:var(--blue); }
.spec-rows { display:grid; gap:11px; margin-top:14px; }
.spec-rows p { color:var(--muted); font-size:11px; line-height:1.5; margin:6px 0 0 !important; }
@media (max-width:680px) { .spec-grid { grid-template-columns:1fr; gap:14px; } }
#print-all { display:none; }
@media print {
  .review-panel,.review-body { break-inside:avoid; }
  .mechanism-panel,.mechanism-grid > div { break-inside:avoid; }
  .spec-panel,.spec-grid > div,.spec-rows > div { break-inside:avoid; }
  .answer,.equation-block,.parameter-list,.check-list,.break-list,.memo-grid,.sizing-grid { break-inside:avoid; }
  .check-list li,.break-list li,.review-body li,.sheet-columns > div { break-inside:avoid; }
  .mini-label,.frame-label,.sheet-title-row { break-after:avoid; }
  .sheet p,.review-body p { orphans:3; widows:3; }
  body.print-all .workspace-grid,body.print-all .topbar { display:none !important; }
  body.print-all #print-all { display:block; }
  #print-all .sheet { break-before:page; padding-top:0; }
  #print-all .sheet:first-child { break-before:auto; }
}