:root{
  --bg:#eef1f8;
  --surface:#ffffff;
  --ink:#1b2033;
  --ink-2:#565e78;
  --ink-3:#8b93a9;
  --line:#dde2ee;
  --accent:#4a53c4;
  --accent-2:#e8692f;
  --accent-ink:#ffffff;
  --radius:14px;
  --sans:ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:1240px; margin:0 auto; padding:16px clamp(14px,3vw,28px);
}
.brand{display:flex; align-items:center; gap:9px; color:var(--accent); text-decoration:none; font-size:16px}
.brand span{color:var(--ink); font-weight:500}
.brand b{font-weight:800; color:var(--accent)}
.topnav{display:flex; gap:18px}
.topnav a{color:var(--ink-2); text-decoration:none; font-size:13.5px; font-weight:500}
.topnav a:hover{color:var(--accent)}

main{max-width:1240px; margin:0 auto; padding:0 clamp(14px,3vw,28px) 48px}

.pagetitle{font-size:clamp(24px,3.2vw,33px); font-weight:800; line-height:1.15; margin:4px 0 7px; letter-spacing:-.4px}
.pagesub{margin:0 0 20px; color:var(--ink-2); font-size:14.5px; max-width:64ch}

/* ---------- tool ---------- */
.tool{display:grid; grid-template-columns:304px minmax(0,1fr); gap:22px; align-items:start}

.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:17px; position:sticky; top:14px;
  box-shadow:0 1px 2px rgba(27,32,51,.04);
}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
label,.lbl{display:block; font-size:12px; font-weight:700; color:var(--ink-2); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px}
label .sub{text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink-3)}
label output{float:right; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; text-transform:none}

select,input.txt{
  width:100%; padding:9px 11px; font:inherit; font-size:14px;
  border:1.5px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
}
select:focus,input:focus,button:focus-visible{outline:2.5px solid #b9bdf0; outline-offset:1px; border-color:var(--accent)}

input[type=range]{
  width:100%; -webkit-appearance:none; appearance:none; height:5px; border-radius:4px;
  background:linear-gradient(var(--accent),var(--accent)) 0/var(--fill,30%) 100% no-repeat #e2e6f2;
  margin:8px 0 2px;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:17px; height:17px; border-radius:50%;
  background:#fff; border:3px solid var(--accent); cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:#fff;
  border:3px solid var(--accent); cursor:pointer;
}

.seg{display:flex; background:#eef0f8; border-radius:9px; padding:3px; gap:3px}
.segbtn{
  flex:1; padding:7px 3px; font:inherit; font-size:13px; font-weight:600;
  background:transparent; border:0; border-radius:7px; cursor:pointer; color:var(--ink-2);
}
.segbtn.on{background:#fff; color:var(--accent); box-shadow:0 1px 3px rgba(27,32,51,.12)}
.lvlnote{margin:7px 0 0; font-size:12px; color:var(--ink-3); line-height:1.45}

.checks{display:flex; flex-direction:column; gap:8px}
.ck{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500;
  color:var(--ink); margin:0; text-transform:none; letter-spacing:0;
}
.ck input[type=checkbox]{accent-color:var(--accent); width:16px; height:16px; margin:0; flex:none}

.actions{display:flex; flex-direction:column; gap:8px; margin-top:17px}
button.primary,button.ghost{
  padding:11px 14px; font:inherit; font-size:14px; font-weight:700;
  border-radius:9px; cursor:pointer; border:1.5px solid transparent;
}
button.primary{background:var(--accent); color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.1)}
button.primary.alt{background:var(--accent-2)}
button.ghost{background:#fff; color:var(--accent); border-color:var(--line)}
button.ghost:hover{border-color:var(--accent); background:#f5f6fd}

.hint{margin:12px 0 0; font-size:12px; color:var(--ink-3); line-height:1.5}

/* ---------- worksheet preview ---------- */
.preview{min-width:0}
.sheetbox{display:flex; flex-direction:column; gap:18px}

.sheet{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 32px 34px; box-shadow:0 1px 3px rgba(27,32,51,.06);
}
.sheet-head{border-bottom:2px solid #2b2f45; padding-bottom:9px; margin-bottom:7px}
.sheet-title{font-size:20px; font-weight:800; margin:0; letter-spacing:-.2px; color:#15192b}
.sheet-sub{font-size:11.5px; color:#707890; margin:3px 0 0; font-weight:500}
.namerow{
  display:flex; gap:26px; font-size:12.5px; color:#3d4458;
  margin:13px 0 20px; font-weight:500;
}
.namerow span{flex:1; border-bottom:1px solid #b9c0d2; padding-bottom:3px}
.namerow span.sm{flex:0 0 118px}

.qgrid{display:grid; gap:11px 26px}
.q{display:flex; align-items:baseline; gap:8px; font-size:15px; line-height:1.9; page-break-inside:avoid; break-inside:avoid}
.qn{
  flex:none; width:23px; font-size:11px; color:#9199ad; font-weight:700;
  font-variant-numeric:tabular-nums; text-align:right;
}
.qbody{font-family:var(--mono); font-size:15.5px; color:#15192b; letter-spacing:.2px}
.qblank{display:inline-block; min-width:48px; border-bottom:1.5px solid #434a63; margin-left:3px}

/* vertical / column arithmetic */
.q.vert{align-items:flex-start; line-height:1.35}
.vstack{font-family:var(--mono); font-size:16px; text-align:right; min-width:86px; color:#15192b}
.vstack .vop{display:flex; justify-content:space-between; gap:10px; border-bottom:1.5px solid #434a63; padding-bottom:2px}
.vstack .vans{height:30px}

.keybox{background:#fcfcff; border-style:dashed}
.keybox .sheet-title{color:var(--accent)}
.kgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:5px 14px}
.kitem{font-size:12.5px; font-family:var(--mono); color:#2b3147; display:flex; gap:6px}
.kitem b{color:#9199ad; font-weight:700; min-width:20px; text-align:right; font-family:var(--sans); font-size:11px}

/* ---------- prose ---------- */
.prose{max-width:70ch; margin:48px auto 0; font-size:15px; line-height:1.7}
.prose h2{font-size:21px; font-weight:800; margin:34px 0 10px; padding-top:16px; border-top:1px solid var(--line); letter-spacing:-.2px}
.prose h3{font-size:15.5px; font-weight:700; margin:22px 0 5px}
.prose p{margin:0 0 12px; color:#333a52}
.prose ol{margin:0 0 14px; padding-left:21px}
.prose li{margin-bottom:9px; color:#333a52}

/* ---------- footer ---------- */
.site-footer{
  max-width:1240px; margin:40px auto 0; padding:17px clamp(14px,3vw,28px) 34px;
  border-top:1px solid var(--line); font-size:13px; color:var(--ink-3);
}
.foot-main{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.foot-main a{color:var(--ink-3); text-decoration:none}
.foot-main a:hover{color:var(--accent)}
.tw-xlinks{display:flex; gap:14px; flex-wrap:wrap; margin-top:9px}
.tw-xlinks a{color:var(--ink-3); text-decoration:none; font-size:12.5px}
.tw-xlinks a:hover{color:var(--accent); text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .tool{grid-template-columns:1fr}
  .panel{position:static}
  .sheet{padding:20px 18px 24px}
}
@media (max-width:430px){
  .topnav{display:none}
  .pagetitle{font-size:22px}
  .qgrid{gap:9px 14px}
}

/* ================= PRINT ================= */
@media print{
  @page{size:auto; margin:14mm 13mm}
  html,body{background:#fff !important; font-size:12pt}
  .topbar,.pagetitle,.pagesub,.panel,.prose,.site-footer{display:none !important}
  main{max-width:none; margin:0; padding:0}
  .tool{display:block}
  .sheetbox{display:block; gap:0}
  .sheet{
    border:0 !important; border-radius:0 !important; padding:0 !important;
    box-shadow:none !important; background:#fff !important;
    page-break-after:always; break-after:page;
  }
  .sheet:last-child{page-break-after:auto; break-after:auto}
  .keybox{background:#fff !important}
  .q,.kitem{page-break-inside:avoid; break-inside:avoid}
  .sheet-head{border-bottom:2px solid #000}
}