:root{--bg:#f6f5f1;--ink:#1f2328;--mute:#68707a;--card:#fff;--line:#dcdad2;--accent:#0f5f73;--accent2:#b4531a;--soft:#e8f0f2;--ok:#1f7a4d;--ng:#b3372f;--grid:#e4e2da}
@media(prefers-color-scheme:dark){:root{--bg:#15181b;--ink:#e6e8ea;--mute:#98a1ab;--card:#1d2226;--line:#313840;--accent:#5fb4c9;--accent2:#e0905a;--soft:#1f2c31;--ok:#5fcf97;--ng:#ef7c73;--grid:#2a3036}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;line-height:1.9;font-size:16px}
.serif,h1,h2,h3{font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif}
.wrap{max-width:760px;margin:0 auto;padding:0 18px}
a{color:var(--accent)}
.topbar{border-bottom:1px solid var(--line);font-size:13px;padding:8px 0;color:var(--mute)}
.topbar a{color:var(--mute);text-decoration:none}.topbar a:hover{color:var(--accent)}
.head{padding:44px 0 18px}
.kick{color:var(--accent);font-size:13px;letter-spacing:.12em}
h1{font-size:clamp(30px,6vw,44px);margin:.15em 0 .25em;line-height:1.3;font-weight:700}
.lead{max-width:36em;color:var(--mute)}
.series{margin:26px 0;display:grid;gap:10px}
.item{display:grid;grid-template-columns:3.2em 1fr;gap:4px 14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink)}
a.item:hover{border-color:var(--accent)}
.item .no{grid-row:span 2;font-family:ui-monospace,Menlo,monospace;color:var(--accent);font-size:22px;line-height:1.3}
.item h3{margin:0;font-size:19px;line-height:1.5}.item .q{color:var(--mute);font-size:14px;line-height:1.6}
.item.stub{opacity:.5}.tag{font-size:12px;color:var(--mute);border:1px solid var(--line);border-radius:3px;padding:0 6px;margin-left:6px;font-family:system-ui;font-weight:400}
.pill{font-size:12px;letter-spacing:.1em;color:var(--mute);margin:30px 0 -4px}
.chead{padding:34px 0 10px;border-bottom:1px solid var(--line)}
.meta{font-size:13px;color:var(--mute);display:flex;gap:14px;flex-wrap:wrap}
.badge{border:1px solid var(--accent);color:var(--accent);border-radius:3px;padding:0 7px}
.chead h1{font-size:clamp(26px,5vw,36px)}.chead .q{font-size:19px;margin:.3em 0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;color:var(--accent2)}
.sec{margin:34px 0}
.sec h2{font-size:21px;margin:0 0 10px;padding-bottom:4px;border-bottom:2px solid var(--accent);display:inline-block}
.step{margin:18px 0}.step h3{font-size:17px;margin:0 0 2px;color:var(--accent)}.step p{margin:.2em 0}
.math{background:var(--soft);border-left:3px solid var(--accent);padding:6px 14px;margin:8px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;overflow-x:auto;white-space:pre;line-height:1.7}
.one{border:2px solid var(--ink);border-radius:4px;padding:12px 18px;margin:30px 0;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-size:20px;font-weight:700}
.one small{display:block;font-family:system-ui;font-size:12px;font-weight:400;color:var(--mute);letter-spacing:.1em}
.note{background:var(--soft);border-radius:4px;padding:8px 14px;font-size:14px;margin:10px 0;color:var(--ink)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:12px 16px}
.opt{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:4px;padding:7px 14px;margin:6px 0;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--accent)}.opt.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card))}.opt.ng{border-color:var(--ng);background:color-mix(in srgb,var(--ng) 14%,var(--card))}
.why{display:none;margin-top:6px;font-size:14px;color:var(--mute)}.why.show{display:block}
.result{font-weight:700;margin:8px 0}
details{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:6px 14px;margin:6px 0}summary{cursor:pointer;font-weight:700}
.links li{margin:.3em 0}
.priv{font-size:13px;color:var(--mute);border-top:1px dashed var(--line);padding-top:8px;margin-top:10px}
footer{text-align:center;color:var(--mute);font-size:13px;padding:44px 0 36px;border-top:1px solid var(--line);margin-top:40px}
/* widgets */
.wg{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:10px 0}
.wg label{display:block;font-size:14px;margin-top:10px}.wg label b{font-family:ui-monospace,Menlo,monospace;color:var(--accent2)}
.wg input[type=range]{width:100%;accent-color:var(--accent)}
.wg svg{max-width:100%;height:auto;display:block;touch-action:none}
.wg .row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;align-items:center}
.wg button,.btn{font:inherit;font-size:14px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:4px;padding:3px 12px;cursor:pointer}
.wg button:hover{border-color:var(--accent)}.wg button.on{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.wg .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:start}
.wg table{border-collapse:collapse;font-family:ui-monospace,Menlo,monospace;font-size:14px}
.wg td,.wg th{padding:1px 7px;text-align:right;border-bottom:1px solid var(--grid)}
.wg .vec{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all;background:var(--soft);padding:6px 10px;border-radius:4px;line-height:1.6}
.wg .out{font-family:ui-monospace,Menlo,monospace;font-size:15px;margin:6px 0}.wg .out b{color:var(--accent2)}
.wg .hint{font-size:13px;color:var(--mute)}
.pxc{cursor:pointer}