@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@600;700&family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');
:root{--navy:#1A375E;--accent:#293B8F;--blue:#3D6FD9;--light:#EEF2F9;--light2:#E1EAF7;--bg:#F5F7FC;--warn:#E07A2E;--ok:#2E9E6B;--danger:#C8423B;--mono:'JetBrains Mono',Consolas,'Courier New',monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--navy);font-family:Montserrat,'Segoe UI',Arial,sans-serif;font-size:18px}
header{padding:22px 40px 10px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
header h1{font-family:'League Spartan',Montserrat,sans-serif;font-weight:700;font-size:44px;margin:0;color:var(--accent);line-height:1}
header p{margin:6px 0 0;font-size:20px}
header .tag{background:var(--accent);color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:15px;white-space:nowrap}
header .bar{width:150px;height:4px;background:var(--navy);margin-top:14px;border-radius:2px}
main{padding:10px 40px 30px}
.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 14px}
button,select,input[type=text]{font-family:inherit;font-size:16px}
button{border:2px solid var(--accent);background:#fff;color:var(--accent);border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;transition:transform .15s,background .2s,color .2s,box-shadow .2s}
button:hover{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(41,59,143,.25)}
button:active{transform:scale(.96)}
button.primary{background:var(--accent);color:#fff}
button.primary:hover{background:var(--navy);border-color:var(--navy)}
button.ghost{border-color:#9AA8C7;color:#5B6B8C}
button.ghost:hover{background:#5B6B8C;border-color:#5B6B8C;color:#fff}
button:disabled{opacity:.35;pointer-events:none}
button code,.cmd{font-family:var(--mono);font-weight:600}
select,input[type=text]{border:2px solid var(--light2);border-radius:10px;padding:8px 10px;color:var(--navy);background:#fff}
.card{background:#fff;border-radius:18px;box-shadow:0 2px 10px rgba(26,55,94,.06);padding:18px 22px}
.panel-light{background:var(--light);border-radius:18px;padding:18px 22px}
.panel-dark{background:var(--navy);color:#fff;border-radius:18px;padding:18px 22px}
.label{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.panel-dark .label{color:var(--light2)}
.term{background:#13294A;color:#DCE6F7;border-radius:16px;padding:16px 20px;font-family:var(--mono);font-size:16px;line-height:1.55;min-height:120px;max-height:260px;overflow:auto}
.term .p{color:#7FA6FF}
.term .c{color:#fff;font-weight:600}
.term .o{color:#B8C7E0}
.term .e{color:#FF9C8F}
.term .g{color:#7EE2B0}
.term .line{animation:fadeIn .35s ease}
.explain{font-size:19px;line-height:1.45;min-height:56px}
.explain b{color:var(--accent)}
.grid2{display:grid;grid-template-columns:1.65fr 1fr;gap:20px;align-items:start}
@media (max-width:1100px){.grid2{grid-template-columns:1fr}}
canvas{width:100%;display:block;background:#fff;border-radius:18px;box-shadow:0 2px 10px rgba(26,55,94,.06)}
.back{position:fixed;right:18px;bottom:14px;font-size:14px;color:#5B6B8C;text-decoration:none;background:#fff;padding:6px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.back:hover{color:var(--accent)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.shake{animation:shake .45s}
kbd{font-family:var(--mono);background:var(--light2);border-radius:6px;padding:1px 6px;font-size:.9em}
.ixg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
.ix{text-decoration:none;color:var(--navy);transition:transform .2s,box-shadow .2s;display:block}
.ix:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(26,55,94,.15)}
.ix h3{font-family:'League Spartan',sans-serif;font-size:28px;margin:6px 0}
.ix p{font-size:16px;line-height:1.4;min-height:66px}
.ix .go{font-weight:700;color:var(--accent)}
@media(max-width:1000px){.ixg{grid-template-columns:1fr}}