*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050505}
body{font-family:"Courier New",monospace;color:#f4f4ee}
:root{--green:#39ff78;--green2:#66ff99;--black:#020403}
.chalkboard{min-height:100vh;position:relative;overflow:hidden;background:#050505}
.chalkboard:before{content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.03) 4px)}
.symbols span{position:absolute;color:rgba(244,244,238,.65);font-family:Georgia,serif;font-size:50px;font-weight:bold;text-shadow:0 0 2px #fff,1px 1px 2px rgba(255,255,255,.25);filter:blur(.15px);user-select:none}
.s1{left:7%;top:12%}.s2{left:25%;top:6%}.s3{right:12%;top:10%}.s4{left:14%;top:38%}.s5{right:28%;top:24%}.s6{right:7%;top:34%}.s7{left:5%;bottom:25%}.s8{left:18%;top:27%;font-size:38px}.s9{right:34%;top:42%}.s10{right:6%;bottom:24%}.s11{right:20%;bottom:14%}.s12{left:28%;bottom:17%}.s13{left:12%;bottom:9%}.s14{left:6%;bottom:40%}.s15{right:25%;bottom:10%}
.topbar{position:relative;z-index:10;display:flex;justify-content:flex-end;padding:28px}
.language-wrap{position:relative}.language-button{background:transparent;color:#f4f4ee;border:2px solid #f4f4ee;padding:11px 15px;font:15px "Courier New";cursor:pointer}.language-menu{display:none;position:absolute;right:0;top:calc(100% + 5px);width:210px;max-height:300px;overflow:auto;background:#080808;border:2px solid #f4f4ee;z-index:30}.language-menu.open{display:block}.language-option{display:block;width:100%;padding:10px;border:0;border-bottom:1px solid #333;background:#080808;color:#f4f4ee;text-align:left;font:14px "Courier New";cursor:pointer}.language-option:hover{background:var(--green);color:#000}
.home-content{position:relative;z-index:5;min-height:calc(100vh - 80px);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:16vh 20px 100px}.equation{text-align:center;font-size:clamp(25px,4vw,54px);margin:0 0 65px}.main-buttons{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.green-button{display:inline-block;min-width:160px;text-align:center;padding:16px 22px;background:#8cff66;color:#000;border:2px solid #000;text-decoration:none;font-weight:bold;font-size:18px}.green-button:hover{background:#b0ff98}
body:has(.coding-page) .chalkboard{background:radial-gradient(circle at 50% 40%,rgba(0,255,100,.07),transparent 45%),linear-gradient(rgba(0,255,100,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,100,.035) 1px,transparent 1px),#020403;background-size:auto,28px 28px,28px 28px}
.coding-page{min-height:100vh;position:relative;z-index:5;display:grid;place-items:center;padding:75px 20px 30px}.panel{width:min(900px,95vw);background:rgba(1,7,4,.97);border:1px solid var(--green);box-shadow:0 0 35px rgba(0,255,100,.08)}
.header{padding:20px 25px;border-bottom:1px solid rgba(57,255,120,.3);color:var(--green2);font-weight:bold}.panel-body{padding:40px}.back{position:absolute;left:25px;top:22px;background:var(--green);color:#000;padding:10px 15px;text-decoration:none;font-weight:bold}
textarea{width:100%;min-height:140px;resize:vertical;background:#010604;color:#eaffef;border:1px solid var(--green);padding:18px;font:16px/1.5 "Courier New";outline:none}.button{margin-top:12px;background:var(--green);color:#000;border:2px solid #000;padding:13px 20px;font:bold 16px "Courier New";cursor:pointer}.button:hover{background:var(--green2)}
.display{height:75px;background:#010604;color:var(--green2);border:1px solid var(--green);padding:18px;text-align:right;font-size:32px;margin-bottom:15px;overflow:auto}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.key{min-height:60px;background:var(--green);border:2px solid #000;font:bold 20px "Courier New";cursor:pointer}.key:hover{background:var(--green2)}.key.op{background:#0b1c12;color:var(--green2);border-color:var(--green)}.key.clear{background:#ff8f8f}.response{display:none;margin-top:25px;border-left:4px solid var(--green);padding:18px;background:rgba(0,255,100,.045);line-height:1.6}.response.show{display:block}.answer{color:var(--green2);font-size:28px;font-weight:bold;margin-bottom:12px}.step{padding:10px;margin:8px 0;background:rgba(0,255,100,.035)}
.retry{text-align:center;padding:55px 30px}.retry h1{color:var(--green2);font-size:clamp(32px,6vw,55px)}.retry p{color:#b8c9bd;font-size:18px;line-height:1.6}.retry .example{color:#eaffef;font-size:21px;margin:25px}
@media(max-width:600px){.panel-body{padding:25px 18px}.keys{gap:6px}.key{min-height:55px}.back{left:15px;top:15px}}