@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:30px;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:600px;margin:0 auto}
.info .highlight{color:#d4a853;font-weight:600}
.controls{position:fixed;top:20px;right:20px;z-index:10;display:flex;gap:10px}
.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,124,247,.5);color:#7aa2f7;background:rgba(74,124,247,.1)}
.controls button.formula-btn:hover{background:rgba(74,124,247,.2);border-color:#7aa2f7}
.controls button.formula-btn.active{background:rgba(74,124,247,.25);border-color:#7aa2f7}
.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}

/* 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(212,168,83,.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(212,168,83,.3);border-radius:3px}
.formula-panel h2{font-family:'Playfair Display',serif;font-size:1.4em;color:#d4a853;margin-bottom:20px;letter-spacing:2px;text-align:center}
.formula-card{background:rgba(26,26,46,.6);border:1px solid rgba(212,168,83,.15);border-radius:8px;padding:16px;margin-bottom:14px;transition:border-color .3s}
.formula-card:hover{border-color:rgba(212,168,83,.4)}
.formula-card .fname{font-size:.8em;color:#7aa2f7;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(212,168,83,.1);border:1px solid rgba(212,168,83,.2);border-radius:4px;padding:3px 10px;font-size:.82em;color:#d4a853}
.panel-footer{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid rgba(212,168,83,.1)}
.panel-footer a{color:#7aa2f7;text-decoration:none;font-size:.9em;transition:color .3s}
.panel-footer a:hover{color:#aac4ff}

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