:root{
  --bg:#f4f1ea;
  --surface:#ffffff;
  --ink:#1d2328;
  --ink-2:#5a6670;
  --ink-3:#62717b;
  --line:#ddd8cd;
  --accent:#2f6f7e;
  --accent-ink:#ffffff;
  --radius:10px;
  --font:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{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:1320px; margin:0 auto; padding:14px clamp(14px,3vw,28px);
}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-size:15px}
.brand b{font-weight:700}
.brand span{font-family:var(--font); letter-spacing:.2px}
.topnav{display:flex; gap:18px}
.topnav a{color:var(--ink-2); text-decoration:none; font-size:13.5px}
.topnav a:hover{color:var(--accent)}

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

.pagetitle{
  font-family:var(--font); font-weight:600;
  font-size:clamp(23px,3vw,31px); line-height:1.2;
  margin:6px 0 6px;
}
.pagesub{margin:0 0 18px; color:var(--ink-2); font-size:14.5px; max-width:62ch}

/* ---------- tool ---------- */
.tool{
  display:grid; grid-template-columns:320px minmax(0,1fr); gap:22px;
  align-items:start;
}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 18px; position:sticky; top:14px;
}
.field{margin-bottom:14px}
.field:last-child{margin-bottom:0}
label,.lbl{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; letter-spacing:.2px}
label output{float:right; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums}

select{
  width:100%; padding:8px 10px; font-size:14px; font-family:inherit;
  border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink);
}
select:focus,input:focus,button:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

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

.seg{display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden}
.segbtn{
  flex:1; padding:7px 4px; font:inherit; font-size:13px; background:#fff;
  border:0; cursor:pointer; color:var(--ink-2);
}
.segbtn + .segbtn{border-left:1px solid var(--line)}
.segbtn.on{background:var(--accent); color:var(--accent-ink); font-weight:600}

.swatches{display:flex; gap:7px; flex-wrap:wrap}
.sw{
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  background:var(--c); cursor:pointer; padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.sw.on{border-color:var(--ink); box-shadow:inset 0 0 0 2px #fff}

.checks{display:flex; flex-direction:column; gap:7px; margin-top:4px}
.ck{
  display:flex; align-items:center; gap:7px; font-size:13px;
  font-weight:400; color:var(--ink); margin:0; letter-spacing:0;
}
.ck input[type=checkbox]{accent-color:var(--accent); width:15px; height:15px; margin:0}
.mini{
  width:46px; padding:2px 5px; font:inherit; font-size:13px;
  border:1px solid var(--line); border-radius:5px; text-align:center;
}

.actions{display:flex; flex-direction:column; gap:7px; margin-top:16px}
button.primary,button.ghost{
  padding:10px 14px; font:inherit; font-size:14px; border-radius:7px; cursor:pointer;
  border:1px solid var(--accent);
}
button.primary{background:var(--accent); color:var(--accent-ink); font-weight:600}
button.primary:hover{filter:brightness(1.08)}
button.ghost{background:#fff; color:var(--accent)}
button.ghost:hover{background:#f0f6f7}

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

/* ---------- preview ---------- */
.preview{min-width:0}
.paperwrap{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; display:flex; justify-content:center; align-items:flex-start;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
#sheet{max-width:100%; height:auto; display:block}
.pmeta{margin:9px 2px 0; font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ---------- prose ---------- */
.prose{max-width:72ch; margin:46px auto 0; font-size:15px; line-height:1.68}
.prose h2{
  font-family:var(--font); font-size:21px; font-weight:600;
  margin:34px 0 10px; padding-top:14px; border-top:1px solid var(--line);
}
.prose h3{font-size:15.5px; font-weight:650; margin:22px 0 5px}
.prose p{margin:0 0 12px; color:#2c343a}
.prose ol{margin:0 0 14px; padding-left:20px}
.prose li{margin-bottom:8px; color:#2c343a}

/* ---------- footer ---------- */
.site-footer{
  max-width:1320px; margin:40px auto 0; padding:16px clamp(14px,3vw,28px) 32px;
  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:860px){
  .tool{grid-template-columns:1fr}
  .panel{position:static}
  .preview{order:0}
  .paperwrap{padding:9px; width:fit-content; margin:0 auto; max-width:100%}
  #sheet{max-height:65vh; width:auto}
  .pmeta{text-align:center}
}
@media (max-width:420px){
  .topnav{display:none}
  .pagetitle{font-size:21px}
}

/* ================= PRINT ================= */
@media print{
  @page{margin:0}
  html,body{background:#fff !important; margin:0 !important; padding:0 !important}
  .topbar,.pagetitle,.pagesub,.panel,.pmeta,.prose,.site-footer{display:none !important}
  main{max-width:none; margin:0; padding:0}
  .tool{display:block; gap:0}
  .preview{margin:0}
  .paperwrap{
    border:0 !important; border-radius:0 !important; padding:0 !important;
    box-shadow:none !important; display:block !important;
  }
  #sheet{
    width:100% !important; height:auto !important;
    max-width:none !important; max-height:none !important;
    page-break-inside:avoid; break-inside:avoid;
  }
}

/* Paper workflow: presets first, secondary settings on demand. */
.presets{border:0;padding:0;margin:0 0 18px}.presets legend{font-size:13px;font-weight:700;margin-bottom:8px}.presets>div{display:grid;gap:6px}.presets button{font:inherit;text-align:left;border:1px solid var(--line);background:#f5f8f8;color:var(--accent);border-radius:7px;padding:10px 12px;min-height:44px;cursor:pointer}.presets button[aria-pressed=true]{border-color:var(--accent);background:#e6f0f2}.advanced{border-top:1px solid var(--line);padding-top:12px}.advanced summary{font-weight:650;cursor:pointer;min-height:44px;color:var(--accent)}.advanced[open] summary{margin-bottom:10px}.preview-toolbar{background:var(--bg);padding:0 0 12px;position:sticky;top:0;z-index:2}.preview-toolbar>strong{font-size:14px}.preview-toolbar .actions{flex-direction:row;flex-wrap:wrap;margin-top:8px}.preview-toolbar p{font-size:12px;color:var(--ink-2);margin:6px 0 0}.preview-toolbar .actions button{min-height:44px}.preview-toolbar .actions .primary{flex:1}.segbtn{min-height:44px}.sw{width:36px;height:36px}.pmeta{color:var(--ink-2)}
@media(max-width:860px){.preview-toolbar{position:static}.preview-toolbar .actions{position:fixed;bottom:0;left:0;right:0;padding:10px 14px;background:#fff;border-top:1px solid var(--line);margin:0;z-index:10}.preview-toolbar #resetBtn{display:none}body{padding-bottom:80px}.panel{padding:16px}.presets>div{grid-template-columns:repeat(3,minmax(0,1fr))}.presets button{font-size:12px;padding:8px}.paperwrap{width:100%}.pagetitle{font-size:30px}}
@media print{.preview-toolbar{display:none!important}body{padding-bottom:0!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}