body{margin:0;padding:0;overflow:hidden}:root{--bg-dark: #0a0e27;--bg-darker: #050714;--cyan: #00ffff;--magenta: #ff00ff;--green: #00ff88;--yellow: #ffff00;--red: #ff0066;--white: #ffffff;--gray: #8892b0;--gray-dark: #495670}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:Courier New,Consolas,Monaco,monospace;background:var(--bg-darker);color:var(--cyan);overflow:hidden}#root{width:100vw;height:100vh;margin:0;padding:0}.presentation{width:1920px;height:1080px;background:linear-gradient(135deg,var(--bg-darker) 0%,var(--bg-dark) 100%);position:relative;display:flex;flex-direction:column;transform-origin:top left;overflow:hidden}@media (max-width: 1920px){.presentation{transform:scale(.8)}}@media (max-width: 1536px){.presentation{transform:scale(.65)}}@media (max-width: 1280px){.presentation{transform:scale(.5)}}.progress-bar{height:6px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--green));transition:width .1s linear;box-shadow:0 0 20px var(--cyan)}.slide-container{flex:1;display:flex;flex-direction:column;padding:60px 80px 40px;position:relative;overflow:hidden}.slide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:2px solid var(--cyan);padding-bottom:12px}.header-left{display:flex;align-items:center;gap:20px}.header-logo{height:60px;width:auto;filter:drop-shadow(0 0 10px var(--cyan));opacity:.9}.slide-title{font-size:48px;font-weight:700;color:var(--cyan);text-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan),0 0 30px rgba(0,255,255,.5);letter-spacing:2px;margin:0}.slide-meta{font-size:22px;color:var(--magenta);font-weight:700;text-shadow:0 0 10px var(--magenta)}.slide-content{flex:1;display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;padding:5px 0 120px;max-height:850px}.center-logo-container{display:flex;justify-content:center;align-items:center;margin:40px 0;animation:fadeIn .8s ease-in}.center-logo{max-width:400px;max-height:400px;width:auto;height:auto;filter:drop-shadow(0 0 30px var(--cyan)) drop-shadow(0 0 60px rgba(0,255,255,.5));animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{filter:drop-shadow(0 0 30px var(--cyan)) drop-shadow(0 0 60px rgba(0,255,255,.5))}50%{filter:drop-shadow(0 0 40px var(--cyan)) drop-shadow(0 0 80px rgba(0,255,255,.7))}}.chart-container{width:100%;margin-bottom:30px;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.text-section{display:flex;flex-direction:column;gap:4px}.content-line{font-size:24px;line-height:1.35;color:var(--white);margin:0;text-align:left;font-family:Courier New,monospace}.content-line.header{font-size:28px;color:var(--green);font-weight:700;margin-top:10px;text-shadow:0 0 10px rgba(0,255,136,.5)}.content-line.bullet{color:var(--gray);padding-left:20px}.content-line.indented{color:var(--gray);padding-left:40px;font-size:22px}.spacer{height:8px}.slide-explanation{margin-top:15px;padding:12px 16px;background:#00ffff14;border-left:4px solid var(--cyan);border-radius:8px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 0 15px #0ff3}.explanation-icon{font-size:20px;flex-shrink:0;filter:drop-shadow(0 0 5px var(--cyan))}.explanation-text{font-size:16px;line-height:1.45;color:var(--white);font-family:Courier New,monospace;opacity:.9}.code-section{display:flex;flex-direction:column;gap:15px}.code-intro{display:flex;flex-direction:column;gap:5px}.code-block{background:#0009;border:2px solid var(--magenta);border-radius:12px;padding:20px;overflow-x:auto;box-shadow:0 0 20px #ff00ff4d,inset 0 0 30px #ff00ff1a;max-height:600px;overflow-y:auto}.code-block code{font-family:Courier New,Consolas,monospace;font-size:20px;line-height:1.4;color:var(--green);text-shadow:0 0 5px rgba(0,255,136,.5)}.visual-cue{position:absolute;bottom:180px;left:80px;right:80px;background:#ffff001a;border:2px solid var(--yellow);border-radius:8px;padding:15px 25px;font-size:20px;color:var(--yellow);text-align:center;font-style:italic;box-shadow:0 0 15px #ffff004d;z-index:10}.controls{display:flex;gap:20px;align-items:center;justify-content:center;padding:30px 80px;background:#00000080;border-top:2px solid var(--cyan)}.control-btn{background:linear-gradient(135deg,#0ff3,#f0f3);border:2px solid var(--cyan);color:var(--white);padding:15px 30px;font-size:20px;font-family:Courier New,monospace;font-weight:700;cursor:pointer;border-radius:8px;transition:all .3s ease;text-shadow:0 0 5px var(--cyan);box-shadow:0 0 15px #00ffff4d}.control-btn:hover:not(:disabled){background:linear-gradient(135deg,#0ff6,#f0f6);transform:translateY(-2px);box-shadow:0 0 25px #0ff9}.control-btn:disabled{opacity:.3;cursor:not-allowed;border-color:var(--gray-dark)}.control-btn.play-btn{border-color:var(--green);color:var(--green);font-size:24px;padding:15px 50px;box-shadow:0 0 20px #00ff8880}.control-btn.play-btn:hover{box-shadow:0 0 30px #0f8c}.timer{font-size:24px;color:var(--magenta);font-weight:700;padding:15px 30px;background:#ff00ff1a;border:2px solid var(--magenta);border-radius:8px;min-width:180px;text-align:center;text-shadow:0 0 10px var(--magenta)}.keyboard-hints{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:30px;font-size:16px;color:var(--gray);opacity:.7}.keyboard-hints span{padding:5px 12px;background:#00000080;border:1px solid var(--gray-dark);border-radius:4px}.slide-content::-webkit-scrollbar{width:12px}.slide-content::-webkit-scrollbar-track{background:#0000004d;border-radius:6px}.slide-content::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:6px;box-shadow:0 0 10px var(--cyan)}.slide-content::-webkit-scrollbar-thumb:hover{background:var(--magenta);box-shadow:0 0 15px var(--magenta)}@keyframes glow{0%,to{text-shadow:0 0 10px var(--cyan),0 0 20px var(--cyan),0 0 30px rgba(0,255,255,.5)}50%{text-shadow:0 0 20px var(--cyan),0 0 30px var(--cyan),0 0 40px rgba(0,255,255,.8)}}.slide-title{animation:glow 3s ease-in-out infinite}.presentation:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,255,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:0}.slide-container{position:relative;z-index:1}