:root{--bg:#001a40;--card:#002a60;--surf:#003a80;--line:#0050a0;--acc:#7fb3ff;--txt:#d0e4ff;--muted:#8fb0dc;--dim:#5f84b8;--or:#fb923c}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}
main{max-width:1240px;margin:0 auto;padding:20px 16px 40px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pills a{padding:6px 14px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none;color:var(--acc);background:var(--card);border:1px solid var(--line)}
.pills a:hover{background:var(--surf);color:#fff}
.pills a.on{background:var(--acc);color:var(--bg);border-color:var(--acc)}
.pills a.mode{margin-left:auto;border-color:var(--or);color:var(--or)}
.cols{display:grid;gap:18px}
@media(min-width:900px){.cols{grid-template-columns:1fr 1.1fr}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;min-width:0}
.panel h2{font-size:17px;font-weight:800;margin-bottom:14px;color:#fff}
.panel h3{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--acc);margin-bottom:12px;text-transform:uppercase}
#visu{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
#cv{display:block;max-width:100%;touch-action:none}
#cap{font-size:14px;color:var(--txt);text-align:center;min-height:2.6em}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ctl label{font-size:12px;color:var(--muted)}
button{font:inherit;font-size:12px;font-weight:700;border-radius:99px;padding:7px 14px;cursor:pointer;border:1px solid var(--line);background:var(--surf);color:var(--txt)}
button:hover{background:var(--line)}
button.go{background:var(--or);border-color:var(--or);color:#001a40}
button:disabled{opacity:.4;cursor:default}
input[type=range]{accent-color:var(--or);width:150px}
#redac{font-size:15.5px}
.s{display:none;margin:10px 0;padding:6px 0 6px 14px;border-left:4px solid transparent}
.s.on{display:block;animation:in .45s both}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.s p{margin:4px 0}
.s .disp{margin:6px 0;overflow-x:auto;overflow-y:hidden}
.s-e{border-color:var(--dim)}
.s-m{border-color:var(--acc)}
.s-c{border-color:var(--or)}
.s-r{border-color:var(--txt);background:var(--surf);border-radius:0 12px 12px 0;padding:10px 12px 10px 14px}
.katex{color:var(--txt)}
.katex-display{margin:.5em 0}
@media (prefers-reduced-motion:reduce){.s.on{animation:none}}