:root{
  --bg:#F3F6F4; --surface:#FFFFFF; --ink:#1E3A36; --text:#26312F; --muted:#63726F;
  --line:#D3DCD8; --accent:#B8911E; --accent-soft:#F4EBCF; --focus:#2F6F63; --ok:#2F6F63; --err:#9B2C1F;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#131B19; --surface:#1B2522; --ink:#E4ECE9; --text:#D6DEDB; --muted:#93A39F;
  --line:#2E3B37; --accent:#D8B24A; --accent-soft:#2F2A18; --focus:#7CC3B3; --ok:#7CC3B3; --err:#F09A8B;}}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Palatino Linotype",serif;color:var(--ink);font-weight:700;line-height:1.2;margin:0}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:720px;margin:0 auto;padding:12px 20px 10px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:var(--muted)}
.save{white-space:nowrap}
.save.err{color:var(--err);font-weight:600}
.save.ok{color:var(--ok)}
.bar{display:flex;gap:4px;margin-top:8px}
.bar button{flex:1;height:8px;border:0;border-radius:4px;background:var(--line);padding:0;cursor:pointer}
.bar button.done{background:var(--focus);opacity:.55}
.bar button.cur{background:var(--accent)}
.bar button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
main{max-width:720px;margin:0 auto;padding:28px 20px 48px}
.why{background:var(--accent-soft);border-left:4px solid var(--accent);padding:14px 16px;border-radius:0 8px 8px 0;margin:16px 0 8px;font-size:16px}
h1{font-size:34px;margin-bottom:12px}
h2{font-size:28px}
h3{font-size:20px;margin:36px 0 4px;color:var(--accent)}
.q{margin-top:26px}
.q label{display:block;font-weight:600;color:var(--ink);font-size:18px}
.q .n{color:var(--muted);font-weight:500;margin-right:6px}
.q .hint{color:var(--muted);font-size:15px;margin:3px 0 0}
textarea,input[type=text]{width:100%;margin-top:10px;font:inherit;font-size:17px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;resize:vertical}
textarea{min-height:96px}
textarea:focus,input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px rgba(47,111,99,.2)}
.nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;flex-wrap:wrap}
.btn{font:600 17px/1 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;padding:15px 22px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn:disabled{opacity:.6;cursor:wait}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn[hidden]{display:none}
.lead{font-size:19px}
ul.soft{padding-left:20px}ul.soft li{margin:6px 0}
.toc{list-style:none;padding:0;margin:20px 0}
.toc li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.toc span:last-child{color:var(--muted);font-size:15px;white-space:nowrap}
.msg{margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-size:16px}
.msg.ok{border-color:var(--ok)}
.msg.err{border-color:var(--err)}
.po-invalid{max-width:560px;margin:15vh auto;padding:0 20px}
@media (max-width:480px){h1{font-size:28px}h2{font-size:24px}main{padding-top:20px}}