@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#000;color:#f1f5f9;font-family:'Inter',sans-serif;}
.app{display:flex;width:100vw;height:100vh;}
aside{width:370px;flex-shrink:0;background:rgba(6,10,22,0.98);border-right:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;overflow-y:auto;}
main{flex-grow:1;position:relative;background:#000;}
canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;}
.mono{font-family:'JetBrains Mono',monospace;}
input[type=range]{height:3px;-webkit-appearance:none;width:100%;background:#1e293b;border-radius:2px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border-radius:50%;background:#38bdf8;cursor:pointer;border:2px solid #000;}
.sc::-webkit-scrollbar{width:3px;}
.sc::-webkit-scrollbar-thumb{background:#1e293b;border-radius:10px;}
.card{background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;}
details>summary{cursor:pointer;list-style:none;user-select:none;}
details>summary::-webkit-details-marker{display:none;}
.explain-body{font-size:11px;line-height:1.6;color:#94a3b8;margin-top:10px;}
.explain-body strong{color:#e2e8f0;}
.explain-body code{font-family:'JetBrains Mono',monospace;font-size:10px;background:#0f172a;padding:1px 5px;border-radius:3px;color:#7dd3fc;}
.sidebar-toggle{display:none;width:100%;padding:9px 16px;background:rgba(6,10,22,0.98);border:none;border-bottom:1px solid rgba(255,255,255,0.07);color:#38bdf8;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.1em;text-align:center;cursor:pointer;flex-shrink:0;}
@media(max-width:768px){
  body,html{overflow:auto;height:auto;}
  .app{flex-direction:column;height:auto;min-height:100vh;}
  .sidebar-toggle{display:block;}
  aside{width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease;border-right:none;border-bottom:1px solid rgba(255,255,255,0.07);}
  aside.open{max-height:75vh;overflow-y:auto;}
  main{height:55vw;min-height:300px;flex-shrink:0;width:100%;}
  nav{overflow-x:auto;gap:16px;padding:0 12px;}
  nav>*{flex-shrink:0;}
}