*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0e1a;overflow:hidden;font-family:'DM Sans',sans-serif;color:#e2e8f0}
svg{display:block}
#panel{position:fixed;right:0;top:0;width:400px;height:100vh;background:linear-gradient(180deg,#0f1629,#131b30);border-left:1px solid rgba(56,189,248,0.15);padding:28px 24px;overflow-y:auto;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);z-index:100;box-shadow:-20px 0 60px rgba(0,0,0,.5)}
#panel.open{transform:translateX(0)}
#panel-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:#94a3b8;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#panel-close:hover{background:rgba(255,255,255,0.1);color:#fff}
#panel-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;padding:3px 10px;border-radius:6px;display:inline-block}
#panel-title{font-family:'DM Serif Display',serif;font-size:1.45rem;color:#fff;margin-bottom:14px;line-height:1.3}
#panel-body{font-size:.92rem;line-height:1.7;color:#cbd5e1}
#panel-body strong{color:#fff}
#panel-body ul{padding-left:18px;margin:8px 0}
#panel-body li{margin-bottom:5px}
#panel-body .kaplan-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.72rem;font-weight:700;background:rgba(52,211,153,0.15);color:#34d399;margin:4px 0}
#controls{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:50;flex-wrap:wrap;justify-content:center}
.ctrl-btn{padding:9px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.12);background:rgba(15,22,41,0.85);backdrop-filter:blur(12px);color:#94a3b8;font-size:.8rem;font-family:'DM Sans',sans-serif;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}
.ctrl-btn:hover{border-color:rgba(56,189,248,0.4);color:#e2e8f0}
.ctrl-btn.active{background:rgba(56,189,248,0.15);border-color:rgba(56,189,248,0.4);color:#38bdf8}
#header{position:fixed;top:16px;left:20px;z-index:50}
#header h1{font-family:'DM Serif Display',serif;font-size:1.4rem;color:#fff}
#header p{font-size:.78rem;color:#64748b;margin-top:2px}
#legend{position:fixed;top:16px;right:20px;z-index:50;display:flex;flex-wrap:wrap;gap:10px;max-width:480px;justify-content:flex-end}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.72rem;color:#64748b}
.legend-dot{width:10px;height:10px;border-radius:50%}
#force-control{position:fixed;bottom:62px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:12px;background:rgba(15,22,41,0.85);backdrop-filter:blur(12px);padding:8px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.08)}
#force-control label{font-size:.72rem;color:#64748b;font-weight:600}
#force-control input[type="range"]{width:120px;accent-color:#38bdf8}
#tooltip{position:fixed;pointer-events:none;z-index:200;background:rgba(15,22,41,0.95);border:1px solid rgba(56,189,248,0.25);border-radius:8px;padding:8px 14px;font-size:.82rem;color:#e2e8f0;max-width:240px;opacity:0;transition:opacity .15s;backdrop-filter:blur(12px)}
@media(max-width:700px){#panel{width:100vw}#legend{display:none}}