@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Sans+3:wght@300;400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(135deg,#0a0a1a 0%,#0d1528 30%,#0a0a1a 100%);color:#e8e6e3;font-family:'Source Sans 3',sans-serif;overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
canvas{display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.overlay{position:relative;z-index:10;pointer-events:none;text-align:center}
.title{font-family:'Playfair Display',serif;font-size:2.8em;font-weight:900;background:linear-gradient(135deg,#f0d68a,#d4a853,#8a7030);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:6px;margin-bottom:8px}
.subtitle{font-size:1.1em;color:#9a9a9a;font-style:italic;letter-spacing:2px}
.info{position:fixed;bottom:24px;left:0;right:0;text-align:center;z-index:10;pointer-events:none}
.info p{font-size:.95em;color:#666;line-height:1.8;max-width:700px;margin:0 auto}
.info .highlight{color:#d4a853;font-weight:600}
.controls{position:fixed;top:20px;right:20px;z-index:10;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.controls button{background:rgba(212,168,83,.1);border:1px solid rgba(212,168,83,.3);color:#d4a853;padding:8px 16px;font-family:'Source Sans 3',sans-serif;font-size:.85em;cursor:pointer;border-radius:4px;transition:all .3s;pointer-events:all}
.controls button:hover{background:rgba(212,168,83,.2);border-color:#d4a853}
.controls button.active{background:rgba(212,168,83,.25);border-color:#d4a853}
.controls button.formula-btn{border-color:rgba(74,247,160,.5);color:#4af7a0;background:rgba(74,247,160,.08)}
.controls button.formula-btn:hover{background:rgba(74,247,160,.15);border-color:#4af7a0}
.controls button.formula-btn.active{background:rgba(74,247,160,.2);border-color:#4af7a0}
.back-arrow{position:fixed;top:20px;left:20px;z-index:10;color:#d4a853;text-decoration:none;font-size:1.1em;font-weight:600;transition:color .3s;pointer-events:all}
.back-arrow:hover{color:#f0d68a}

/* Controls hint */
.controls-hint{position:fixed;top:62px;right:20px;z-index:10;color:#9a9a9a;font-size:.85em;font-style:italic;letter-spacing:1px;pointer-events:none;text-align:right}

/* Charge panel */
.charge-panel{position:fixed;left:20px;bottom:80px;z-index:10;pointer-events:none;opacity:0;transition:opacity .6s}
.charge-panel.visible{opacity:1}
.charge-panel table{border-collapse:collapse;font-size:.8em;background:rgba(10,10,18,.85);border:1px solid rgba(212,168,83,.2);border-radius:6px;overflow:hidden}
.charge-panel th{background:rgba(212,168,83,.15);color:#d4a853;padding:6px 12px;text-align:center;font-weight:600;letter-spacing:1px}
.charge-panel td{padding:5px 12px;text-align:center;color:#999;border-top:1px solid rgba(255,255,255,.04)}
.charge-panel td.particle{color:#e8e6e3;font-weight:600}
.charge-panel td.charge-val{color:#d4a853}

/* Port label tooltip */
.port-label{position:fixed;z-index:20;background:rgba(10,10,18,.9);border:1px solid rgba(212,168,83,.4);color:#d4a853;padding:4px 10px;border-radius:4px;font-size:.8em;pointer-events:none;opacity:0;transition:opacity .3s;white-space:nowrap}

/* Formula Panel */
.formula-panel{position:fixed;top:0;right:-420px;width:400px;height:100vh;z-index:20;background:rgba(10,10,18,.94);border-left:1px solid rgba(74,247,160,.2);overflow-y:auto;transition:right .4s cubic-bezier(.4,0,.2,1);padding:70px 24px 30px;pointer-events:all;backdrop-filter:blur(12px)}
.formula-panel.open{right:0}
.formula-panel::-webkit-scrollbar{width:6px}
.formula-panel::-webkit-scrollbar-track{background:transparent}
.formula-panel::-webkit-scrollbar-thumb{background:rgba(74,247,160,.3);border-radius:3px}
.formula-panel h2{font-family:'Playfair Display',serif;font-size:1.4em;color:#4af7a0;margin-bottom:20px;letter-spacing:2px;text-align:center}
.formula-card{background:rgba(26,26,46,.6);border:1px solid rgba(74,247,160,.12);border-radius:8px;padding:16px;margin-bottom:14px;transition:border-color .3s}
.formula-card:hover{border-color:rgba(74,247,160,.35)}
.formula-card .fname{font-size:.8em;color:#4af7a0;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px;font-weight:600}
.formula-card .fmath{text-align:center;padding:10px 0;font-size:1.1em}
.formula-card .fdesc{font-size:.85em;color:#9a9a9a;line-height:1.5;margin-top:6px}
.formula-card .fvalue{display:inline-block;margin-top:8px;background:rgba(74,247,160,.08);border:1px solid rgba(74,247,160,.2);border-radius:4px;padding:3px 10px;font-size:.82em;color:#4af7a0}
.panel-footer{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(74,247,160,.1)}
.panel-footer a{color:#4af7a0;text-decoration:none;font-size:.9em;transition:color .3s}
.panel-footer a:hover{color:#8bffcc}

@media(max-width:600px){
    .formula-panel{width:100%;right:-100%}
    .title{font-size:1.8em}
}