*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a1643;--glass:#ffffff1a;--glass-border:#fff3;--glass-hover:#ffffff26;--text:#ffffffd9;--text-dim:#fff9;--text-bright:#fff;--peach:#fca18d;--pink:#e35694;--purple:#ab1bb4;--blue:#1b2df5;--cyan:#3baee5;--radius:16px}.intro-page-root{background:var(--bg);width:100%;height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;z-index:0;background-image:radial-gradient(at 10% 10%,#fca18d4d 0%,#0000 60%),radial-gradient(at 0 40%,#e356944d 0%,#0000 60%),radial-gradient(at 20% 90%,#ab1bb44d 0%,#0000 60%),radial-gradient(at 90% 90%,#1b2df566 0%,#0000 70%),radial-gradient(at 90% 10%,#3baee540 0%,#0000 60%);font-family:Be Vietnam Pro,system-ui,sans-serif;position:fixed;inset:0;overflow:hidden}#scene{z-index:0;width:100%;height:100%;position:fixed;top:0;left:0}#topbar{z-index:50;pointer-events:none;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:fixed;top:0;left:0;right:0}#topbar>*{pointer-events:auto}.topbar-left{align-items:center;gap:18px;display:flex}.brand-logo{filter:drop-shadow(0 4px 12px #6366f180);flex-shrink:0}.brand-name{color:var(--text-bright);letter-spacing:-.5px;align-items:center;font-size:1.8rem;font-weight:800;line-height:1;display:flex}.brand-edition{color:var(--cyan);letter-spacing:.5px;background:#06b6d426;border-radius:6px;margin-left:12px;padding:4px 12px;font-size:.85rem;font-weight:600}.brand-status{color:#ffffff80;letter-spacing:2.5px;text-transform:uppercase;align-items:center;gap:8px;margin-top:8px;font-size:.75rem;font-weight:500;display:flex}.status-dot{background:#10b981;border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite pulse-dot;box-shadow:0 0 10px #10b981}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.topbar-right{gap:12px;display:flex}.stat-box{border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);text-align:center;min-width:120px;padding:12px 20px}.stat-value{color:var(--text-bright);font-family:Space Grotesk,monospace;font-size:1.5rem;font-weight:700;line-height:1}.stat-plus{color:var(--indigo);font-size:1rem}.stat-label{color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;margin-top:6px;font-size:.55rem;font-weight:600}#center-hud{z-index:10;text-align:center;pointer-events:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-ring{border:1px solid #6366f126;border-radius:50%;width:200px;height:200px;animation:20s linear infinite hud-rotate;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.hud-ring:before{content:"";background:var(--indigo);width:6px;height:6px;box-shadow:0 0 10px var(--indigo);border-radius:50%;position:absolute;top:-3px;left:50%}.hud-ring-2{border-color:#06b6d41a;width:240px;height:240px;animation-duration:30s;animation-direction:reverse}.hud-ring-2:before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}@keyframes hud-rotate{to{transform:translate(-50%,-50%)rotate(360deg)}}.hud-label{letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;margin-bottom:4px;font-size:.6rem;font-weight:600}.hud-value{color:var(--text-bright);text-shadow:0 0 40px #6366f14d;margin-bottom:2px;font-family:Space Grotesk,monospace;font-size:3rem;font-weight:700;line-height:1;display:inline-block;position:relative}.hud-circuit{z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 200 200\"><g stroke=\"rgba(255,255,255,0.4)\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\"><rect x=\"40\" y=\"40\" width=\"120\" height=\"120\" rx=\"8\" fill=\"rgba(255,255,255,0.08)\"/><rect x=\"70\" y=\"70\" width=\"60\" height=\"60\" rx=\"4\" fill=\"rgba(255,255,255,0.15)\"/><path d=\"M70,80L55,80 M70,90L55,90 M70,100L55,100 M70,110L55,110 M70,120L55,120\"/><path d=\"M130,80L145,80 M130,90L145,90 M130,100L145,100 M130,110L145,110 M130,120L145,120\"/><path d=\"M80,70L80,55 M90,70L90,55 M100,70L100,55 M110,70L110,55 M120,70L120,55\"/><path d=\"M80,130L80,145 M90,130L90,145 M100,130L100,145 M110,130L110,145 M120,130L120,145\"/><path stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"3\" d=\"M50,40L50,25 M60,40L60,25 M70,40L70,25 M80,40L80,25 M90,40L90,25 M100,40L100,25 M110,40L110,25 M120,40L120,25 M130,40L130,25 M140,40L140,25 M150,40L150,25\"/><path stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"3\" d=\"M50,160L50,175 M60,160L60,175 M70,160L70,175 M80,160L80,175 M90,160L90,175 M100,160L100,175 M110,160L110,175 M120,160L120,175 M130,160L130,175 M140,160L140,175 M150,160L150,175\"/><path stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"3\" d=\"M40,50L25,50 M40,60L25,60 M40,70L25,70 M40,80L25,80 M40,90L25,90 M40,100L25,100 M40,110L25,110 M40,120L25,120 M40,130L25,130 M40,140L25,140 M40,150L25,150\"/><path stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"3\" d=\"M160,50L175,50 M160,60L175,60 M160,70L175,70 M160,80L175,80 M160,90L175,90 M160,100L175,100 M160,110L175,110 M160,120L175,120 M160,130L175,130 M160,140L175,140 M160,150L175,150\"/><circle cx=\"55\" cy=\"55\" r=\"3\" fill=\"rgba(255,255,255,0.8)\" stroke=\"none\"/><circle cx=\"145\" cy=\"55\" r=\"3\" fill=\"rgba(255,255,255,0.8)\" stroke=\"none\"/><circle cx=\"55\" cy=\"145\" r=\"3\" fill=\"rgba(255,255,255,0.8)\" stroke=\"none\"/><circle cx=\"145\" cy=\"145\" r=\"3\" fill=\"rgba(255,255,255,0.8)\" stroke=\"none\"/></g></svg>");background-position:50%;background-size:cover;width:105px;height:105px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#module-count{z-index:1;position:relative}.hud-sub{color:var(--text-dim);font-size:.75rem;font-weight:400}#module-tooltip{z-index:60;border-radius:var(--radius);-webkit-backdrop-filter:blur(40px);pointer-events:none;background:#191e2dad;border:1px solid #ffffff26;max-width:260px;padding:16px 20px;transition:opacity .2s,transform .2s;position:fixed;box-shadow:0 4px 24px #0003}#module-tooltip.tooltip-hidden{opacity:0;pointer-events:none;transform:scale(.95)}.tooltip-icon{margin-bottom:8px;font-size:1.8rem}.tooltip-name{color:var(--text-bright);margin-bottom:4px;font-size:.95rem;font-weight:700}.tooltip-desc{color:var(--text-dim);margin-bottom:8px;font-size:.78rem;line-height:1.5}.tooltip-pages{color:var(--cyan);font-size:.7rem;font-weight:600}#start-learning-container{z-index:40;position:fixed;bottom:70px;left:50%;transform:translate(-50%)}.btn-start-learning{color:var(--text-bright);background:linear-gradient(135deg,#6366f1,#06b6d4);border-radius:50px;align-items:center;gap:8px;padding:12px 28px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 20px #6366f166}.btn-start-learning:hover{background:linear-gradient(135deg,#7c7fff,#22d3ee);transform:translateY(-2px);box-shadow:0 6px 24px #6366f199}#bottom-bar{z-index:50;pointer-events:none;justify-content:space-between;align-items:center;padding:14px 24px;display:flex;position:fixed;bottom:0;left:0;right:0}#bottom-bar>*{pointer-events:auto}.controls-left{align-items:center;gap:20px;display:flex}.control-hint{color:var(--text-dim);align-items:center;gap:6px;font-size:.72rem;display:flex}.control-hint svg{opacity:.5}.key-hint{background:var(--glass);border:1px solid var(--glass-border);color:var(--text);border-radius:4px;padding:2px 8px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:600}.controls-right{align-items:center;gap:16px;display:flex}.toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.toggle-text{color:var(--text-dim);font-size:.75rem;font-weight:500}.toggle-label input{display:none}.toggle-switch{background:#ffffff1a;border-radius:10px;width:36px;height:20px;transition:background .3s;position:relative}.toggle-switch:after{content:"";background:var(--text-dim);border-radius:50%;width:14px;height:14px;transition:transform .3s,background .3s;position:absolute;top:3px;left:3px}.toggle-label input:checked+.toggle-switch{background:#6366f14d}.toggle-label input:checked+.toggle-switch:after{background:var(--indigo);box-shadow:0 0 8px var(--indigo);transform:translate(16px)}.btn-control{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-dim);cursor:pointer;border-radius:8px;align-items:center;gap:6px;padding:6px 14px;font-family:inherit;font-size:.75rem;font-weight:500;transition:all .3s;display:flex}.btn-control:hover{background:var(--glass-hover);color:var(--text-bright)}.volume-control{-webkit-backdrop-filter:blur(12px);background:#ffffff0f;border:1px solid #ffffff1a;border-radius:10px;align-items:center;gap:8px;padding:4px 6px 4px 4px;transition:background .3s,border-color .3s;display:flex}.volume-control:hover{background:#ffffff1a;border-color:#ffffff2e}.volume-btn{min-width:unset;background:0 0!important;border:none!important;padding:5px 8px!important}.volume-btn:hover{background:#ffffff14!important}.volume-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#6366f180,#06b6d480);border-radius:2px;outline:none;width:80px;height:4px;transition:opacity .3s}.volume-slider:hover{opacity:1}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:linear-gradient(135deg,#6366f1,#06b6d4);border:2px solid #ffffff80;border-radius:50%;width:14px;height:14px;transition:transform .2s,box-shadow .2s;box-shadow:0 0 8px #6366f199,0 0 16px #06b6d44d}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 12px #6366f1cc,0 0 24px #06b6d480}.volume-slider::-moz-range-thumb{cursor:pointer;background:linear-gradient(135deg,#6366f1,#06b6d4);border:2px solid #ffffff80;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #6366f199,0 0 16px #06b6d44d}.volume-slider::-moz-range-track{background:linear-gradient(90deg,#6366f180,#06b6d480);border-radius:2px;height:4px}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border-rotate{to{--border-angle:360deg}}#detail-panel{z-index:55;-webkit-backdrop-filter:blur(40px);background:#191e2dad;border-radius:16px;width:300px;padding:32px 28px;transition:opacity .4s,transform .4s;position:fixed;top:50%;right:30px;transform:translateY(-50%);box-shadow:0 10px 40px #0000004d}#detail-panel:before{content:"";background:conic-gradient(from var(--border-angle), #ffffff0d 0%, #ffffff0d 60%, #6366f199 80%, #06b6d4cc 90%, #ffffff0d 100%);-webkit-mask-composite:xor;pointer-events:none;border-radius:16px;padding:1.5px;animation:8s linear infinite border-rotate;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}#detail-panel.panel-hidden{opacity:0;pointer-events:none;transform:translateY(-50%)translate(30px)}#panel-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;font-size:1.4rem;transition:color .2s;position:absolute;top:12px;right:16px}#panel-close:hover{color:var(--text-bright)}.panel-icon{margin-bottom:16px;font-size:2.5rem}#detail-panel h3{color:var(--text-bright);margin-bottom:8px;font-size:1.15rem;font-weight:700}#detail-panel p{color:var(--text-dim);margin-bottom:16px;font-size:.85rem;line-height:1.6}#panel-features{flex-direction:column;gap:6px;margin-bottom:20px;display:flex}.panel-feature{color:var(--text);align-items:center;gap:8px;font-size:.78rem;display:flex}.panel-feature:before{content:"";background:var(--indigo);border-radius:50%;flex-shrink:0;width:5px;height:5px}.panel-meta{border-top:1px solid var(--glass-border);gap:20px;padding-top:16px;display:flex}.meta-label{color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;font-size:.6rem}.meta-value{color:var(--text-bright);margin-top:2px;font-size:.85rem;font-weight:600}.module-label{z-index:30;pointer-events:none;color:#94a3b8;white-space:nowrap;text-shadow:0 1px 4px #000c;align-items:center;gap:6px;font-size:.7rem;font-weight:500;transition:opacity .3s;display:flex;position:fixed}@media (max-width:768px){.topbar-right{display:none}#detail-panel{width:auto;left:10px;right:10px}.controls-left{display:none}.hud-value{font-size:3rem}.hud-ring{width:150px;height:150px}.hud-ring-2{width:180px;height:180px}}