:root{
  --bg:#f3f6f8; --panel:#ffffff; --ink:#0f2b34; --sub:#5a7480;
  --line:#dbe6ea; --accent:#0e8f9b; --accent2:#0b6b8f;
  --ok:#12a150; --okbg:#e6f6ec; --bad:#e0484d; --badbg:#fdeaea; --warn:#e08a1e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{--bg:#0d1b20;--panel:#132a31;--ink:#e9f3f5;--sub:#93aeb6;--line:#22434c;
    --accent:#3fc7d1;--accent2:#5bb4d6;--okbg:#12331f;--badbg:#3a1c1e;}
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-text-size-adjust:100%}
.wrap{max-width:900px;margin:0 auto;padding:clamp(16px,4vw,32px)}
a{color:var(--accent2)}
.back{display:inline-block;font-size:.85rem;color:var(--sub);text-decoration:none;margin-bottom:12px}
.back:hover{color:var(--accent)}
h1{font-size:clamp(1.3rem,4vw,1.7rem);margin:.2rem 0}
.crumb{font-size:.78rem;color:var(--accent);font-weight:700;letter-spacing:.04em}
.lead{color:var(--sub);font-size:.95rem;margin:.3rem 0 1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:clamp(14px,3vw,22px);margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0}
label.ctl{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--sub)}
input[type=range]{width:180px}
input[type=text],input[type=number]{font-family:var(--mono);padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);font-size:.95rem}
select{padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-family:inherit}
button.primary{background:var(--accent);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-weight:800;cursor:pointer;font-family:inherit}
button.primary:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:9px 14px;cursor:pointer;font-family:inherit}
canvas{max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:block}
.val{font-family:var(--mono);font-weight:700;color:var(--accent2)}
.stat{display:inline-block;font-family:var(--mono);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px;padding:2px 8px;margin:2px 4px 2px 0}
.why{font-size:.9rem;color:var(--sub);border-left:4px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);border-radius:8px;padding:9px 13px;margin-top:12px}
.why b{color:var(--accent2)}
.reveal{font-size:.9rem;background:var(--okbg);border:1px dashed var(--ok);border-radius:10px;padding:9px 13px;margin-top:10px}
table.dt{width:100%;border-collapse:collapse;font-size:.85rem}
table.dt th,table.dt td{border:1px solid var(--line);padding:5px 8px;text-align:center}
table.dt th{background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--sub);font-size:.78rem}
.mono{font-family:var(--mono)}
footer{color:var(--sub);font-size:.78rem;margin-top:22px;border-top:1px solid var(--line);padding-top:12px}
/* hub */
.grouptitle{font-size:1.05rem;margin:20px 0 8px;padding-left:8px;border-left:5px solid var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
a.tile{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:transform .1s,border-color .1s}
a.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
a.tile .emoji{font-size:1.5rem}
a.tile .t{font-weight:800;margin:4px 0 2px}
a.tile .d{font-size:.82rem;color:var(--sub)}
a.tile .op{font-size:.72rem;color:var(--accent);margin-top:6px;font-weight:700}