:root{
  --bg:#12141c; --bg-deep:#0b0c11; --panel:#171a24;
  --ink:#edeae2; --ink-dim:#8b8f9c; --seal:#b23b3b; --line:#2a2d3a;
  --ok:#5f8f6a; --warn:#b28b3b;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
html{ background:var(--bg-deep); }
/* 背景のグラデーションは固定レイヤーとして敷く。
   body に background-attachment:fixed を使うと、スクロール時に描き直されず白く抜ける端末がある。 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:radial-gradient(120% 140% at 20% 10%, #171a24 0%, var(--bg) 45%, var(--bg-deep) 100%);
}
body{
  background:transparent;
  color:var(--ink);
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:15px; line-height:1.75;
  -webkit-text-size-adjust:100%;
}
.grain{
  position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{ width:min(92vw,900px); margin:0 auto; padding:6vh 0 12vh; }
h1{
  font-family:'Shippori Mincho B1', serif; font-weight:800;
  font-size:clamp(2rem,6vw,3rem); letter-spacing:.12em; margin:0 0 .1em -0.04em; line-height:1.3;
}
h1 .kana{ display:block; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:400;
  font-size:.3em; letter-spacing:.5em; color:var(--ink-dim); margin-top:.8em; }
.lead{ color:var(--ink-dim); margin:1.6em 0 0; font-size:.95rem; }
.home{ display:inline-block; margin-top:1.4em; color:var(--ink-dim); text-decoration:none; font-size:.85rem; letter-spacing:.08em; }
.home:hover{ color:var(--ink); }
h2{ font-family:'Shippori Mincho B1',serif; font-weight:600; font-size:1.05rem; letter-spacing:.14em;
  margin:0 0 1em; display:flex; align-items:center; gap:.7em; }
h2::before{ content:""; width:.38em; height:.38em; border-radius:50%; background:var(--seal); flex:none; }
h3{ font-size:.85rem; font-weight:500; letter-spacing:.1em; color:var(--ink-dim); margin:2em 0 .8em; }
.panel{ background:rgba(23,26,36,.66); border:1px solid var(--line); border-radius:3px;
  padding:1.6em 1.5em; margin-top:1.6em; }
label.lbl{ display:block; font-size:.8rem; letter-spacing:.1em; color:var(--ink-dim); margin-bottom:.7em; }
textarea, input[type=text], select{
  width:100%; background:#0e1017; color:var(--ink); border:1px solid var(--line); border-radius:2px;
  padding:.7em .8em; font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:1rem; line-height:1.7;
}
textarea{ resize:vertical; }
textarea:focus, input:focus, select:focus{ outline:none; border-color:#4a4f63; }
#eq{ font-size:1.15rem; }
select{ font-family:'Zen Kaku Gothic New',sans-serif; }
.opts{ display:flex; flex-wrap:wrap; gap:1.1em 1.8em; align-items:center; }
.opt{ display:flex; align-items:center; gap:.6em; font-size:.85rem; color:var(--ink-dim); }
.opt input[type=text]{ width:5.5em; padding:.35em .5em; font-size:.95rem; }
.opt select{ width:auto; padding:.35em 1.6em .35em .5em; font-size:.85rem; }
.opt.check{ gap:.45em; }
input[type=checkbox]{ appearance:none; width:15px; height:15px; border:1px solid var(--line);
  background:#0e1017; border-radius:2px; cursor:pointer; position:relative; flex:none; }
input[type=checkbox]:checked{ background:var(--seal); border-color:var(--seal); }
input[type=checkbox]:checked::after{ content:"✓"; position:absolute; inset:0; color:#fff; font-size:11px;
  display:flex; align-items:center; justify-content:center; }
.opt.check label{ cursor:pointer; }
button{ background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:2px;
  padding:.5em 1.4em; font-family:'Zen Kaku Gothic New',sans-serif; font-size:.85rem; letter-spacing:.08em; cursor:pointer;
  transition:border-color .3s, color .3s; }
button:hover{ border-color:var(--seal); color:#fff; }
.row{ display:flex; align-items:center; gap:1em; margin-bottom:.9em; flex-wrap:wrap; }
.note{ color:var(--ink-dim); font-size:.82rem; margin:.8em 0 0; }
.err{ color:var(--seal); font-size:.85rem; margin-top:.7em; white-space:pre-wrap; }
.mathview{ margin-top:1.1em; padding:1em .2em; border-top:1px solid var(--line); overflow-x:auto; }
.mathview:empty{ display:none; }
.mathline{ padding:.28em 0; }
.sol{ display:grid; grid-template-columns:auto 1fr; gap:.5em 1.1em; align-items:baseline;
  padding:.75em 0; border-bottom:1px solid var(--line); }
.sol:last-child{ border-bottom:none; }
.sol .name{ font-family:ui-monospace,monospace; color:var(--seal); font-size:.95rem; }
.sol .body{ overflow-x:auto; }
.badge{ font-size:.7rem; letter-spacing:.06em; border:1px solid var(--line); border-radius:2px;
  padding:.15em .6em; color:var(--ink-dim); margin-left:.7em; white-space:nowrap; }
.badge.ok{ color:var(--ok); border-color:#31432f; }
.badge.ng{ color:var(--seal); border-color:#4a2a2a; }
.badge.info{ color:var(--warn); border-color:#463a22; }
.stale{ opacity:.35; }
.gridwrap{ overflow-x:auto; }
table.grid{ border-collapse:collapse; font-family:ui-monospace,monospace; font-size:.78rem; white-space:nowrap; }
table.grid th, table.grid td{ border:1px solid var(--line); padding:.35em .7em; text-align:left; }
table.grid th{ background:#0e1017; color:var(--ink-dim); font-weight:400; text-align:center; }
table.grid td.head{ background:#0e1017; color:var(--ink-dim); text-align:center; }
table.grid td.input{ background:rgba(178,59,59,.12); color:var(--ink-dim); }
table.grid td.name{ color:var(--seal); }
.legend{ font-size:.78rem; color:var(--ink-dim); margin-top:.8em; }
.legend i{ display:inline-block; width:.8em; height:.8em; background:rgba(178,59,59,.25);
  border:1px solid var(--line); vertical-align:-1px; margin-right:.4em; }
ol.steps{ margin:0; padding-left:1.4em; }
ol.steps li{ margin-bottom:1.1em; }
ol.steps .why{ color:var(--ink-dim); font-size:.85rem; margin-bottom:.4em; }
ol.steps .math{ overflow-x:auto; padding:.2em 0; }
.help{ color:var(--ink-dim); font-size:.85rem; }
.help code{ color:var(--ink); font-family:ui-monospace,monospace; background:#0e1017;
  padding:.1em .45em; border-radius:2px; }
.help table{ border-collapse:collapse; margin:.6em 0 1.2em; }
.help td{ padding:.25em 1.4em .25em 0; vertical-align:top; }
.chips{ display:flex; flex-wrap:wrap; gap:.5em; }
.chip{ display:flex; align-items:center; gap:.45em; border:1px solid var(--line); border-radius:2px;
  padding:.3em .8em; font-family:ui-monospace,monospace; font-size:.85rem; cursor:pointer; color:var(--ink-dim); }
.chip.on{ border-color:var(--seal); color:var(--ink); }
.katex{ font-size:1.02em; }
.katex-display{ margin:.4em 0; }
@media(max-width:600px){
  main{ width:92vw; }
  .panel{ padding:1.2em 1em; }
  .sol{ grid-template-columns:1fr; gap:.2em; }
}