*{margin:0;padding:0;box-sizing:border-box}@font-face{font-family:Digital-7;src:url(../../../fonts/digital-7.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}:root{--primary-cyan: #00d9ff;--primary-green: #00ff41;--primary-purple: #b400ff;--primary-pink: #ff0080;--dark-bg: #0a0e27;--darker-bg: #060818;--card-bg: #0f1429;--border-color: rgba(0, 217, 255, .3);--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--glow-cyan: 0 0 20px rgba(0, 217, 255, .5);--glow-green: 0 0 20px rgba(0, 255, 65, .5);--glow-purple: 0 0 20px rgba(180, 0, 255, .5)}body{font-family:Courier New,Consolas,monospace;background:var(--darker-bg);background-image:repeating-linear-gradient(0deg,rgba(0,217,255,.03) 0px,transparent 1px,transparent 2px,rgba(0,217,255,.03) 3px),repeating-linear-gradient(90deg,rgba(0,217,255,.03) 0px,transparent 1px,transparent 2px,rgba(0,217,255,.03) 3px);background-size:50px 50px;min-height:100vh;padding:20px;color:var(--text-primary)}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(0,217,255,.05) 0%,transparent 50%);pointer-events:none;z-index:0}.container{max-width:1400px;margin:0 auto;background:var(--card-bg);border-radius:15px;box-shadow:0 20px 60px #00000080,0 0 40px #00d9ff1a,inset 0 1px #00d9ff33;overflow:hidden;border:1px solid var(--border-color);position:relative;z-index:1}header{background:linear-gradient(135deg,#0a0e27,#1a1f3a);color:var(--primary-cyan);padding:40px 30px;text-align:center;border-bottom:2px solid var(--border-color);position:relative;overflow:hidden}header:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,217,255,.1),transparent);animation:scan 3s linear infinite}@keyframes scan{0%{transform:translate(-100%)}to{transform:translate(100%)}}header h1{font-size:2.5em;margin-bottom:10px;text-transform:uppercase;letter-spacing:3px;text-shadow:var(--glow-cyan);position:relative;z-index:1}header h2{font-size:1.3em;font-weight:300;color:var(--primary-green);text-shadow:var(--glow-green);position:relative;z-index:1}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:40px;background:var(--dark-bg)}@media (max-width: 1024px){.main-content{grid-template-columns:1fr}}.decoder-section{display:flex;flex-direction:column;gap:20px}.wheel-container{display:flex;flex-direction:column;align-items:center;gap:20px;background:var(--card-bg);padding:30px;border-radius:10px;border:1px solid var(--border-color);box-shadow:var(--glow-cyan)}#decoder-wheel{max-width:100%;height:auto;filter:drop-shadow(0 0 20px rgba(0,217,255,.4))}.wheel-controls{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}.control-group{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#00d9ff0d;padding:12px;border-radius:8px;border:1px solid var(--border-color)}.control-group label{flex:1;font-weight:600;color:var(--primary-cyan);text-transform:uppercase;font-size:.85em;letter-spacing:1px}.control-group button{padding:8px 16px;background:linear-gradient(135deg,var(--primary-cyan),var(--primary-purple));color:var(--darker-bg);border:none;border-radius:5px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s;text-transform:uppercase;box-shadow:0 0 10px #00d9ff4d}.control-group button:hover{box-shadow:0 0 20px #00d9ff99;transform:translateY(-2px)}.key-display,.quick-key-input{background:var(--card-bg);padding:20px;border-radius:10px;border:1px solid var(--border-color);box-shadow:inset 0 0 20px #00d9ff1a}.key-display h3,.quick-key-input h3{margin-bottom:15px;color:var(--primary-green);text-transform:uppercase;letter-spacing:2px;text-shadow:var(--glow-green)}#key-value{font-size:1.8em;font-weight:700;color:var(--primary-cyan);margin-bottom:15px;text-align:center;padding:15px;background:#00d9ff1a;border-radius:8px;border:2px solid var(--border-color);text-shadow:var(--glow-cyan);font-family:Courier New,monospace;letter-spacing:4px}.quick-key-input{display:flex;flex-direction:column;gap:10px}.quick-key-input label{display:flex;align-items:center;gap:10px;color:var(--text-primary);font-size:.9em;text-transform:uppercase;letter-spacing:1px}.quick-key-input input{flex:1;padding:10px;background:#00d9ff0d;border:1px solid var(--border-color);border-radius:5px;font-size:1em;color:var(--primary-cyan);font-family:Courier New,monospace;font-weight:700;text-align:center}.quick-key-input input:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 15px #00d9ff66}button{padding:12px 24px;background:linear-gradient(135deg,var(--primary-cyan),var(--primary-purple));color:var(--darker-bg);border:none;border-radius:8px;cursor:pointer;font-size:1em;font-weight:700;transition:all .3s;text-transform:uppercase;letter-spacing:1px;font-family:Courier New,monospace;box-shadow:0 0 15px #00d9ff66;position:relative;overflow:hidden}button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}button:hover:before{left:100%}button:hover{box-shadow:0 0 25px #00d9ffb3;transform:translateY(-2px)}button:active{transform:translateY(0)}.message-section{display:flex;flex-direction:column;gap:20px}.input-group,.output-group{background:var(--card-bg);padding:20px;border-radius:10px;border:1px solid var(--border-color);box-shadow:inset 0 0 20px #00d9ff0d}.input-group h3,.output-group h3{margin-bottom:10px;color:var(--primary-cyan);text-transform:uppercase;letter-spacing:2px;font-size:1em;text-shadow:var(--glow-cyan)}textarea{width:100%;padding:15px;background:#00d9ff0d;border:1px solid var(--border-color);border-radius:8px;font-family:Courier New,monospace;font-size:1em;resize:vertical;margin-bottom:10px;color:var(--primary-green);line-height:1.6}textarea:focus{outline:none;border-color:var(--primary-cyan);box-shadow:0 0 20px #00d9ff4d;background:#00d9ff14}textarea[readonly]{background:#00ff410d;color:var(--primary-green);border-color:#00ff414d}textarea::placeholder{color:var(--text-secondary);opacity:.5}footer{background:var(--darker-bg);color:var(--primary-cyan);text-align:center;padding:30px;border-top:2px solid var(--border-color);text-shadow:var(--glow-cyan)}.letter-text{font-family:Courier New,monospace;font-weight:700;font-size:18px;fill:var(--primary-cyan);filter:drop-shadow(0 0 5px rgba(0,217,255,.8));-webkit-user-select:none;user-select:none}.number-text{font-family:Courier New,monospace;font-weight:700;font-size:16px;fill:var(--primary-green);filter:drop-shadow(0 0 5px rgba(0,255,65,.8));-webkit-user-select:none;user-select:none}.inner-letter-text{font-family:Courier New,monospace;font-weight:700;font-size:14px;fill:var(--primary-purple);filter:drop-shadow(0 0 5px rgba(180,0,255,.8));-webkit-user-select:none;user-select:none}.rotating{transition:transform .3s ease-out}@keyframes glitch{0%{text-shadow:.05em 0 0 rgba(255,0,0,.75),-.05em -.025em 0 rgba(0,255,0,.75),-.025em .05em 0 rgba(0,0,255,.75)}14%{text-shadow:.05em 0 0 rgba(255,0,0,.75),-.05em -.025em 0 rgba(0,255,0,.75),-.025em .05em 0 rgba(0,0,255,.75)}15%{text-shadow:-.05em -.025em 0 rgba(255,0,0,.75),.025em .025em 0 rgba(0,255,0,.75),-.05em -.05em 0 rgba(0,0,255,.75)}49%{text-shadow:-.05em -.025em 0 rgba(255,0,0,.75),.025em .025em 0 rgba(0,255,0,.75),-.05em -.05em 0 rgba(0,0,255,.75)}50%{text-shadow:.025em .05em 0 rgba(255,0,0,.75),.05em 0 0 rgba(0,255,0,.75),0 -.05em 0 rgba(0,0,255,.75)}99%{text-shadow:.025em .05em 0 rgba(255,0,0,.75),.05em 0 0 rgba(0,255,0,.75),0 -.05em 0 rgba(0,0,255,.75)}to{text-shadow:-.025em 0 0 rgba(255,0,0,.75),-.025em -.025em 0 rgba(0,255,0,.75),-.025em -.05em 0 rgba(0,0,255,.75)}}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#060818e6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:1000;animation:fadeIn .2s ease-out}.modal-overlay.active{display:flex;justify-content:center;align-items:center}.modal-dialog{background:var(--card-bg);border:2px solid var(--primary-cyan);border-radius:8px;min-width:400px;max-width:600px;box-shadow:0 0 30px #00d9ff80,inset 0 0 30px #00d9ff1a;animation:slideIn .3s ease-out;position:relative}.modal-header{padding:20px;border-bottom:1px solid rgba(0,217,255,.3);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,rgba(0,217,255,.1) 0%,transparent 100%)}.modal-header h3{margin:0;color:var(--primary-cyan);font-size:1.2em;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px rgba(0,217,255,.5)}.modal-close{background:none;border:none;color:var(--primary-cyan);font-size:2em;cursor:pointer;padding:0;width:30px;height:30px;line-height:1;transition:all .3s ease;opacity:.7}.modal-close:hover{opacity:1;transform:rotate(90deg);text-shadow:0 0 15px rgba(0,217,255,.8)}.modal-body{padding:30px;color:var(--text-primary);font-size:1em;line-height:1.6;white-space:pre-line}.modal-body p{margin:0}.modal-footer{padding:20px;border-top:1px solid rgba(0,217,255,.3);display:flex;justify-content:center;gap:15px}.modal-button{background:linear-gradient(135deg,#00d9ff33,#00d9ff1a);color:var(--primary-cyan);border:1px solid var(--primary-cyan);padding:12px 40px;font-size:1em;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:all .3s ease;font-family:Courier New,monospace;font-weight:700;border-radius:4px}.modal-button:hover{background:linear-gradient(135deg,#00d9ff4d,#00d9ff33);box-shadow:0 0 15px #00d9ff80;transform:translateY(-2px)}.modal-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}