:root{--bg:#f4f7f2;--card:#fff;--ink:#1f2d24;--muted:#5c6b60;--accent:#2f7d4f;--danger:#c0392b;--c1:#3a86c8;--c2:#d9822b;}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
header{background:linear-gradient(120deg,#1d5c3a,#2f7d4f 55%,#3a86c8);color:#fff;padding:18px 20px 0}
h1{margin:0;font-size:1.6rem}
.sub{margin:2px 0 12px;opacity:.9}
nav{display:flex;gap:6px;flex-wrap:wrap}
.tab{border:0;background:rgba(255,255,255,.18);color:#fff;padding:10px 16px;border-radius:10px 10px 0 0;font-size:1rem;cursor:pointer}
.tab.active{background:var(--bg);color:var(--ink);font-weight:bold}
main{max-width:1100px;margin:0 auto;padding:16px}
.panel{display:none}.panel.active{display:block}
.intro{background:var(--card);border-radius:12px;padding:14px 18px;margin-bottom:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.intro h2{margin:0 0 6px;font-size:1.2rem;color:var(--accent)}
.intro p{margin:0}
.layout{display:grid;grid-template-columns:300px 1fr;gap:14px}
@media(max-width:860px){.layout{grid-template-columns:1fr}}
.controls,.view{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.view{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start}
canvas{max-width:100%;height:auto;background:#fbfdfb;border-radius:8px}
label{display:block;margin-bottom:12px;font-size:.92rem}
output{float:right;font-weight:bold;color:var(--accent)}
input[type=range]{width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.btns.col{flex-direction:column}
button{font:inherit}
.btns button,.sc,.predict button{border:1px solid var(--accent);background:#fff;color:var(--accent);padding:7px 12px;border-radius:8px;cursor:pointer}
.btns button:hover,.sc:hover{background:#eaf4ee}
.btns button.danger{border-color:var(--danger);color:var(--danger)}
.sc.active{background:var(--accent);color:#fff}
.switch{display:flex;gap:8px;margin:6px 0 8px;flex-wrap:wrap}
.note{font-size:.88rem;color:var(--muted);background:#f3f6f3;border-radius:8px;padding:8px 10px}
.c1{color:var(--c1)}.c2{color:var(--c2)}
.predict{border:2px dashed #b9d3c2;border-radius:10px;padding:8px 10px;margin-bottom:10px;font-size:.9rem}
.predict .q{margin:6px 0 2px}
.predict button{padding:3px 9px;margin:2px;font-size:.85rem}
.predict button.sel{background:var(--accent);color:#fff}
.predict .res{font-weight:bold}
.ok{color:var(--accent)}.ng{color:var(--danger)}
.think{background:#fffbe8;border:1px solid #f0e2a6;border-radius:12px;padding:10px 16px;margin-top:14px}
.think summary{cursor:pointer;font-weight:bold}
.ref{font-size:.82rem;color:var(--muted)}
footer{text-align:center;font-size:.8rem;color:var(--muted);padding:20px}

.howto{background:#f4f8f1;border:1px solid #cfe0c6;border-radius:10px;padding:8px 14px;margin:0 0 12px}
.howto summary,.answer summary{cursor:pointer;font-weight:bold}
.howto ul{margin:6px 0;padding-left:1.3em;line-height:1.7}
.answer{margin-top:8px;background:#fff8e6;border:1px solid #f0dca8;border-radius:8px;padding:6px 12px}
.answer ol{line-height:1.7}