@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto:wght@300;400;500&display=swap";:root{--neon-cyan: #00ffbb;--neon-pink: #ff3366;--dark-bg: #0a1122;--medium-bg: #131b33;--light-bg: #1c2542;--text-primary: #ffffff;--text-secondary: #b3c5ef}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:Roboto,sans-serif;background-color:var(--dark-bg);color:var(--text-primary);overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;padding:2rem;background-image:radial-gradient(circle at 10% 20%,rgba(0,255,187,.03) 0%,transparent 40%),radial-gradient(circle at 90% 80%,rgba(255,51,102,.03) 0%,transparent 40%)}.game-container{max-width:1000px;margin:0 auto;background-color:var(--medium-bg);border-radius:12px;box-shadow:0 0 20px #00ffbb1a,0 0 40px #0003;padding:2rem;border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden}.game-container:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);animation:scanline 4s linear infinite}@keyframes scanline{0%{transform:translateY(-100%)}to{transform:translateY(2000px)}}.displays{display:flex;justify-content:space-between;margin-bottom:3rem;gap:1.5rem}.transistors-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin-bottom:3rem;padding:1.5rem;background-color:var(--light-bg);border-radius:8px;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 20px #0000004d;position:relative}.transistors-container:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(0,255,187,.05),transparent),linear-gradient(0deg,transparent,rgba(255,51,102,.05),transparent);pointer-events:none;border-radius:8px}@media (max-width: 768px){.displays{flex-direction:column;gap:1rem}.transistors-container{gap:1rem}.game-container,.main-content{padding:1rem}}@media (max-width: 480px){.header h1{font-size:1.8rem}.controls{flex-direction:column;align-items:center}.control-button{width:100%;max-width:250px}}.transistor-wrapper{display:flex;flex-direction:column;align-items:center;width:80px}.position-label{font-family:Orbitron,sans-serif;font-size:.9rem;margin-bottom:.8rem;text-align:center;color:var(--text-secondary);text-shadow:0 0 5px rgba(179,197,239,.3)}.transistor{width:70px;height:120px;cursor:pointer;position:relative}.transistor-body{width:100%;height:100%;background-color:var(--light-bg);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;border:1px solid rgba(255,255,255,.1);padding:10px 0;overflow:hidden}.transistor.on .transistor-body{box-shadow:0 0 10px 2px #00ffbb4d}.transistor.off .transistor-body{box-shadow:0 0 10px 2px #ff33664d}.connector{width:4px;height:12px;background-color:#888;border-radius:2px}.connector.top{position:relative}.connector.top:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:12px;height:12px;border-radius:50%;background-color:#888}.connector.bottom{position:relative}.connector.bottom:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:12px;height:12px;border-radius:50%;background-color:#888}.circuit-lines{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.2;background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 10%,transparent 10%,transparent 90%,rgba(255,255,255,.1) 90%,transparent),linear-gradient(0deg,transparent,rgba(255,255,255,.1) 10%,transparent 10%,transparent 90%,rgba(255,255,255,.1) 90%,transparent)}.state-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Orbitron,sans-serif;font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 0 5px rgba(255,255,255,.8)}.transistor.on .state-indicator{background-color:var(--neon-cyan);box-shadow:0 0 15px 5px #00ffbbb3}.transistor.off .state-indicator{background-color:var(--neon-pink);box-shadow:0 0 15px 5px #ff3366b3}@media (max-width: 480px){.transistor-wrapper{width:60px}.transistor{width:55px;height:100px}.state-indicator{width:25px;height:25px;font-size:1rem}.position-label{font-size:.7rem}}.binary-display{flex:1;background-color:var(--light-bg);padding:1.5rem;border-radius:8px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 10px #0000004d}.binary-display h3{font-family:Orbitron,sans-serif;color:var(--text-primary);margin-bottom:1rem;letter-spacing:1px}.binary-value-container{font-family:Orbitron,sans-serif;font-size:2.2rem;font-weight:700;letter-spacing:1rem;margin-top:1rem;display:flex;justify-content:center}.bit-digit{display:inline-block;width:2rem;text-align:center}.bit-digit.on{color:var(--neon-cyan);text-shadow:0 0 10px rgba(0,255,187,.8),0 0 20px rgba(0,255,187,.5)}.bit-digit.off{color:var(--neon-pink);text-shadow:0 0 10px rgba(255,51,102,.8),0 0 20px rgba(255,51,102,.5)}.binary-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(0,255,187,.05) 50%,transparent 100%);pointer-events:none}@media (max-width: 768px){.binary-value-container{font-size:1.8rem;letter-spacing:.5rem}.bit-digit{width:1.5rem}}@media (max-width: 480px){.binary-value-container{font-size:1.4rem;letter-spacing:.3rem}.bit-digit{width:1.2rem}}.decimal-display{flex:1;background-color:var(--light-bg);padding:1.5rem;border-radius:8px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 10px #0000004d}.decimal-display h3{font-family:Orbitron,sans-serif;color:var(--text-primary);margin-bottom:1rem;letter-spacing:1px}.decimal-value-container{position:relative;height:70px;display:flex;align-items:center;justify-content:center}.decimal-value{font-family:Orbitron,sans-serif;font-size:3rem;font-weight:700;margin-top:.5rem;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 10px rgba(255,255,255,.3)}.decimal-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,transparent 0%,rgba(255,51,102,.05) 50%,transparent 100%);pointer-events:none}@media (max-width: 768px){.decimal-value{font-size:2.5rem}.decimal-value-container{height:60px}}@media (max-width: 480px){.decimal-value{font-size:2rem}.decimal-value-container{height:50px}}.controls{display:flex;justify-content:center;gap:1.5rem;margin-top:2rem;flex-wrap:wrap}.control-button{position:relative;padding:.8rem 1.5rem;border:none;border-radius:4px;font-family:Orbitron,sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;background-color:transparent;color:#fff;overflow:hidden;z-index:1}.control-button span{position:relative;z-index:2}.button-glow{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;border-radius:4px;transition:all .3s ease}.control-button.add .button-glow{background:linear-gradient(45deg,#007755,var(--neon-cyan));box-shadow:0 0 10px 2px #00ffbb80}.control-button.remove .button-glow{background:linear-gradient(45deg,#aa1133,var(--neon-pink));box-shadow:0 0 10px 2px #ff336680}.control-button.reset .button-glow{background:linear-gradient(45deg,#84f,#b4f);box-shadow:0 0 10px 2px #8844ff80}.control-button:hover .button-glow{filter:brightness(1.2)}.control-button:disabled{cursor:not-allowed;opacity:.5}.control-button:disabled .button-glow{background:#555;box-shadow:none}.header{background-color:var(--dark-bg);color:#fff;padding:2rem;text-align:center;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)}.header-content{position:relative;z-index:2}.header:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 10% 50%,rgba(0,255,187,.1) 0%,transparent 50%),radial-gradient(circle at 90% 50%,rgba(255,51,102,.1) 0%,transparent 50%);pointer-events:none}.header h1{margin:0;margin-bottom:1rem;font-family:Orbitron,sans-serif;font-size:2.5rem;letter-spacing:2px}.header p{font-size:1.1rem;opacity:.9;max-width:600px;margin:0 auto;color:var(--text-secondary)}.neon-text{color:var(--neon-cyan);text-shadow:0 0 5px rgba(0,255,187,.5),0 0 10px rgba(0,255,187,.3),0 0 15px rgba(0,255,187,.2)}.title-accent{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}.header-logo{margin:1rem auto}.footer{background-color:var(--dark-bg);color:var(--text-secondary);padding:3rem 2rem;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.05)}.info-section{max-width:800px;margin:0 auto;position:relative;z-index:2}.info-section h3{margin-top:0;margin-bottom:1.5rem;font-family:Orbitron,sans-serif;color:var(--text-primary);border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.8rem;letter-spacing:1px}.info-section p{margin-bottom:1rem;line-height:1.6}.footer-glow{position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--neon-pink),transparent);animation:glowPulse 3s ease-in-out infinite}@keyframes glowPulse{0%,to{opacity:.3}50%{opacity:.8}}