:root{
  --paper:#FAF6EC; --edge:#D9D2C2; --ink:#20272E; --soft:#6B7681;
  --amber:#B8791F; --navy:#152A42; --red:#B54A30; --sky:#EEF3F8;
}
*{box-sizing:border-box}
body{
  margin:0; background:#E9E4D6; color:var(--ink);
  font-family:'Klee One','Hiragino Maru Gothic ProN','Zen Kaku Gothic New',sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}

/* ---------- top nav ---------- */
.topnav{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:var(--navy); color:#EFF3F6; padding:10px 18px;
  font-family:'JetBrains Mono',monospace; font-size:12px; position:sticky; top:0; z-index:5;
}
.topnav a{ color:#9EC3E4; text-decoration:none; border-bottom:1px solid rgba(158,195,228,.35) }
.topnav a:hover{ color:#F1C989; border-color:#F1C989 }
.topnav span{ color:rgba(255,255,255,.35) }
.topnav .cur{ color:#F1C989 }
.topnav .grow{ flex:1 }
.topnav .pdf,.topnav .pr{
  background:#F1C989; color:var(--navy); border:none; border-radius:3px;
  padding:5px 11px; font-family:inherit; font-size:11.5px; font-weight:600; cursor:pointer; text-decoration:none;
}
.topnav .pdf:hover,.topnav .pr:hover{ background:#DC9C3F }

/* ---------- sheet ---------- */
.sheet{
  max-width:800px; margin:22px auto 60px; background:var(--paper);
  padding:30px 34px 24px; box-shadow:0 18px 44px -22px rgba(0,0,0,.45); border:1px solid var(--edge);
}
.sh-head{ display:flex; gap:18px; justify-content:space-between; align-items:flex-end;
  border-bottom:2px solid var(--navy); padding-bottom:8px; margin-bottom:18px; flex-wrap:wrap }
.sh-head h1{ font-size:26px; margin:0 0 3px; font-weight:600; line-height:1.3 }
.sh-head .sub{ margin:0; font-size:12.5px; color:var(--soft) }
.sh-r{ text-align:right; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--soft); flex:none }
.sh-r .who{ display:block; font-size:12.5px; color:var(--ink) }
.sh-r .dt{ display:block }
.timer{ display:inline-block; background:#FFF3D6; border:1px solid var(--amber); color:var(--amber);
  border-radius:3px; padding:3px 9px; font-size:11.5px; font-weight:600; margin-bottom:5px }
.cchip{ display:inline-block; font-family:'JetBrains Mono',monospace; font-size:12px; vertical-align:5px;
  background:rgba(21,42,66,.08); border:1px solid rgba(21,42,66,.2); border-radius:3px;
  padding:2px 7px; margin-right:8px; color:var(--navy) }

/* ---------- blocks ---------- */
.box{ padding:12px 15px; border-radius:0 3px 3px 0; margin:0 0 14px }
.box p{ margin:0; font-size:15px }
.box .bt{ display:block; font-size:12px; font-weight:600; margin-bottom:5px; letter-spacing:.03em }
.rei{ background:var(--paper); border-left:3px solid var(--amber); background:#FBF3E2 }
.rei .bt{ color:var(--amber) }
.disc{ background:var(--sky); border-left:3px solid var(--navy) }
.disc .bt{ color:var(--navy) }
.rulebox{ background:#F3EEDF; border:1px solid var(--edge); border-radius:3px }
.tx{ font-size:15px; margin:0 0 12px }
.memo{ font-size:12.5px; color:var(--soft); margin:5px 0 0 }
.warn{ color:var(--red); font-style:normal; font-weight:600 }
.rule{ display:flex; align-items:center; gap:9px; margin:20px 0 12px }
.rule span{ font-size:12.5px; font-weight:600; color:var(--soft); white-space:nowrap }
.rule::after{ content:""; flex:1; height:1px; background:var(--edge) }
.pb{ border:none; border-top:1px dashed var(--edge); margin:26px 0 }

/* ---------- questions ---------- */
.q{ display:flex; gap:11px; margin:0 0 14px; page-break-inside:avoid }
.qn{ flex:none; min-width:26px; height:22px; line-height:22px; text-align:center; background:var(--navy);
  color:#fff; border-radius:2px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; padding:0 6px }
.qb{ flex:1; min-width:0 }
.q p{ margin:0; font-size:15px }
.work{ border-bottom:1px solid var(--edge); margin-top:8px }
.omake{ display:block; border:1px dashed var(--edge); border-radius:3px; padding:11px 14px; margin-top:18px }
.omake .ot{ display:block; font-size:11.5px; font-weight:600; color:var(--soft); margin-bottom:5px }

/* ---------- fractions, tables, tape, hissan ---------- */
.fr{ display:inline-flex; flex-direction:column; vertical-align:-.55em; text-align:center; margin:0 3px; line-height:1.15 }
.fr .nu{ font-size:.78em; border-bottom:1.2px solid currentColor; padding:0 3px }
.fr .de{ font-size:.78em; padding:0 3px }
.pv{ border-collapse:collapse; margin:10px auto 14px; font-family:'JetBrains Mono',monospace }
.pv td{ border:1px solid var(--edge); padding:6px 12px; text-align:center; font-size:13.5px }
.hissan{ background:#F3EEDF; border-radius:3px; padding:12px 16px; margin:10px auto 14px;
  font-family:'Menlo','JetBrains Mono',monospace; font-size:13px; line-height:1.5; width:max-content }
.tape{ display:flex; width:min(100%,340px); height:26px; border:1.4px solid var(--ink); margin:0 0 7px }
.tape span{ flex:1; border-right:1.4px solid var(--ink) }
.tape span:last-child{ border-right:none }

.sh-foot{ display:flex; justify-content:space-between; margin-top:24px; padding-top:9px;
  border-top:1px solid var(--edge); font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--soft) }

@media (max-width:600px){ .sheet{ padding:20px 18px; margin:10px auto 40px } .sh-head h1{ font-size:21px } }
@media print{
  body{ background:#fff } .noprint{ display:none !important }
  .sheet{ box-shadow:none; border:none; margin:0; max-width:none; padding:0 }
  .pb{ page-break-after:always; border:none; margin:0 }
  .q,.box{ page-break-inside:avoid }
}