:root{
  --paper:#faf8f4; --ink:#26211e; --ink-soft:#5c544e; --ink-faint:#8a817a;
  --line:#e2dcd3; --shu:#bf3a2b; --shu-soft:#f4e3df; --card:#ffffff; --mono-bg:#f1ede6;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1d1a18; --ink:#ece7e0; --ink-soft:#b3aaa2; --ink-faint:#7e766f;
    --line:#38322d; --shu:#e05a48; --shu-soft:#3a2420; --card:#262220; --mono-bg:#2b2724;
  }
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic Medium","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.9;font-feature-settings:"palt";
}
.wrap{max-width:44rem;margin:0 auto;padding:0 1.1rem 4rem}
nav{display:flex;gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--line);margin-bottom:1.6rem}
nav .brand{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;font-size:1.05rem}
nav .brand span{color:var(--shu)}
nav a{color:var(--ink-faint);text-decoration:none;font-size:.86rem}
nav a.on{color:var(--shu);font-weight:600}
h1{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;font-size:1.3rem;line-height:1.6;margin:0 0 1rem;text-wrap:balance}
h2{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-weight:600;font-size:1.05rem;margin:1.6rem 0 .6rem}
p{margin:0 0 1em}
.muted{color:var(--ink-faint);font-size:.82rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:1.1rem 1.2rem;margin:0 0 1rem}
.card.hot{border-color:var(--shu);box-shadow:inset 3px 0 0 var(--shu)}
.state{display:inline-block;font-size:.68rem;letter-spacing:.12em;color:var(--shu);
       background:var(--shu-soft);border-radius:2px;padding:.1rem .55rem;vertical-align:.1em}
.state.gray{color:var(--ink-faint);background:var(--mono-bg)}
button,.btn{
  font:inherit;font-size:.88rem;font-weight:600;cursor:pointer;border-radius:4px;
  padding:.55rem 1.1rem;border:1px solid var(--line);background:var(--card);color:var(--ink);
}
button.primary{background:var(--shu);border-color:var(--shu);color:#fff}
button.danger{color:var(--shu);border-color:var(--shu);background:transparent}
button:disabled{opacity:.5;cursor:default}
textarea{
  width:100%;min-height:9rem;font:inherit;font-size:.95rem;line-height:1.9;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:4px;
  padding:.9rem;resize:vertical;
}
textarea.editor{min-height:60vh;font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
textarea:focus{outline:2px solid var(--shu);outline-offset:-1px}
.md h3,.md h2{font-family:"Hiragino Mincho ProN",serif;font-size:1.02rem;margin:1.4rem 0 .4rem}
.md p{margin:0 0 .9em}
.md ul{padding-left:1.3rem}
.md blockquote{border-left:2px solid var(--shu);margin:1em 0;padding:.1rem 0 .1rem 1rem;color:var(--ink-soft);
  font-family:"Hiragino Mincho ProN",serif}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);border-radius:4px;padding:.6rem 1.2rem;
  font-size:.86rem;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90vw}
.toast.show{opacity:1}
.row{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.statline{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.statline b{font-variant-numeric:tabular-nums;font-family:"Hiragino Mincho ProN",serif;font-size:1.05rem}
.q{font-weight:600;margin:.9rem 0 .3rem}
.err{color:var(--shu);font-size:.88rem}