*{box-sizing:border-box}body{min-height:100vh;background:#001000;color:#0f0;font-family:Courier New,monospace;font-size:14px;line-height:1.4;margin:0;padding:0;overflow-x:hidden;text-shadow:0 0 2px #00ff00;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 1px,transparent 1px,transparent 2px);pointer-events:none;z-index:1}main{width:100%;max-width:900px;margin:0 auto;padding:20px;position:relative;z-index:2}.page-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-top:20px;margin-bottom:20px;padding:10px 0;border-bottom:2px solid #00ff00}.page-header h1{font-size:18px;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:2px}footer{margin-top:30px;padding:15px 0;text-align:center;font-size:12px;color:#080;border-top:1px solid #003300;opacity:.8}footer a{color:#0f0;text-decoration:none}footer a:hover{color:#0f0;text-decoration:underline}.language-selector{display:flex;flex-direction:row;align-items:center;width:fit-content;padding:4px 8px;border:1px solid #00ff00;background-color:#001000;font-size:12px}.language-selector .label{margin-right:8px;color:#0f0}.language-links{display:flex;flex-direction:row;gap:8px}.language-link{background-color:#001000;color:#0f0;border:1px solid #00ff00;padding:2px 6px;font-family:Courier New,monospace;font-size:11px;text-decoration:none;cursor:pointer;transition:all .2s ease}.language-link:hover{background-color:#030;color:#0f0;text-decoration:none}.language-link.active{background-color:#080;color:#fff}.language-link:focus{outline:1px solid #00ff00;outline-offset:1px}.introduction-section{max-width:100%;margin:0}.binary-pixel-display{background:#000800;border:2px solid #00ff00;padding:15px;margin:0;color:#0f0;position:relative;box-shadow:inset 0 0 20px #00ff001a,0 0 10px #0f03}.binary-pixel-display:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at center,transparent 60%,rgba(0,255,0,.05) 100%);pointer-events:none}.binary-pixel-display h1{text-align:center;margin:0 0 15px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:#0f0;text-shadow:0 0 5px #00ff00}.description{text-align:center;margin-bottom:20px;font-size:12px;opacity:.8;line-height:1.3}.input-section,.output-section{margin-bottom:20px}.output-header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.input-section h2,.output-section h2{margin:0 0 10px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#0f0;border-bottom:1px solid #00ff00;padding-bottom:3px;display:inline-block}textarea{width:100%;height:120px;padding:8px;background:#000800;color:#0f0;border:1px solid #00ff00;font-family:Courier New,monospace;font-size:12px;line-height:1.3;resize:vertical;outline:none}textarea:focus{border-color:#0f0;box-shadow:0 0 5px #00ff0080}.output{width:100%;min-height:120px;padding:8px;background:#000800;color:#0f0;border:1px solid #00ff00;font-family:Courier New,monospace;font-size:12px;line-height:1.3;white-space:pre;overflow:auto;position:relative}.char-grid{display:grid;grid-template-columns:repeat(9,auto);gap:0;justify-content:center;margin:5px auto 0;width:fit-content}.char-cell{display:flex;align-items:center;justify-content:center;font-size:18px;padding:0;margin:-1px 3px}.examples{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.example{background:#00ff000d;padding:10px;border:1px solid #003300}.example h3{margin:0 0 8px;font-size:12px;font-weight:700;color:#0f0;text-transform:uppercase}.example pre{background:#000800;padding:8px;margin:0;font-size:10px;line-height:1.2;color:#0f0;border:1px solid #003300;overflow-x:auto}.instructions{margin-top:15px;padding:10px;background:#00ff000d;border:1px solid #003300}.instructions h3{margin:0 0 8px;font-size:12px;font-weight:700;color:#0f0;text-transform:uppercase}.instructions ul{margin:0;padding-left:15px}.instructions li{margin-bottom:4px;font-size:11px}.status{margin-top:8px;padding:5px;font-size:10px;border-left:2px solid;height:20px;box-sizing:border-box;visibility:visible;overflow:hidden}.status.success{border-left-color:#0f0;background:#00ff000d}.status.error{border-left-color:red;background:#ff00000d}.status.info{border-left-color:#08f;background:#0088ff0d}.examples-label{margin-top:10px;font-size:12px;font-weight:700;color:#0f0;text-transform:uppercase;letter-spacing:1px}.format-buttons{display:flex;gap:8px;margin-top:5px;flex-wrap:wrap}.format-button{padding:4px 8px;background:#000800;color:#0f0;border:1px solid #00ff00;font-family:Courier New,monospace;font-size:10px;cursor:pointer;text-transform:uppercase}.format-button:hover{background:#030}.animation-toggle{margin:10px 0}.toggle-label{position:relative;display:inline-flex;align-items:center;cursor:pointer;font-size:12px;-webkit-user-select:none;user-select:none}.toggle-label input{opacity:0;width:0;height:0}.toggle-slider{position:relative;display:inline-block;width:40px;height:20px;background-color:#030;border:1px solid #00ff00;border-radius:20px;margin-right:10px;transition:.4s}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:1px;background-color:#0f0;border-radius:50%;transition:.4s}.toggle-label input:checked+.toggle-slider{background-color:#080}.toggle-label input:checked+.toggle-slider:before{transform:translate(20px)}.toggle-label:hover .toggle-slider{box-shadow:0 0 5px #00ff0080}@media (max-width: 768px){.binary-pixel-display{padding:10px;border-width:1px}.binary-pixel-display h1{font-size:14px;letter-spacing:2px}.description{font-size:11px}.char-cell{min-width:18px;height:18px;font-size:14px}.examples{grid-template-columns:1fr;gap:8px}.examples-label{font-size:11px;margin-top:8px}.format-buttons{flex-direction:column;gap:5px}.format-button{font-size:9px;padding:3px 6px}textarea,.output{font-size:11px}}@media (max-width: 480px){main{padding:10px}.page-header{flex-direction:column;gap:10px;text-align:center}.page-header h1{font-size:14px}.binary-pixel-display{padding:8px}.examples-label{font-size:10px;margin-top:6px}.char-cell{min-width:16px;height:16px;font-size:12px}textarea{height:100px}.output{min-height:100px}.example pre{font-size:9px}.language-links{flex-direction:column;gap:4px}.language-link{font-size:10px;padding:2px 4px}}@media (prefers-reduced-motion: reduce){.binary-pixel-display,.char-cell,.format-button{transform:none;transition:none}}.char-cell{position:relative;transition:all .2s ease}.char-cell.scanned{animation:pixelGlow .3s ease-out}@keyframes pixelGlow{0%{transform:scale(1);text-shadow:0 0 2px #00ff00}50%{transform:scale(1.2);text-shadow:0 0 8px #00ff00,0 0 12px #00ff00}to{transform:scale(1);text-shadow:0 0 2px #00ff00}}textarea:focus,.format-button:focus{outline:1px solid #00ff00;outline-offset:1px}@media print{body{background:#fff;color:#000;text-shadow:none}body:before{display:none}.binary-pixel-display{background:#fff;color:#000;border:1px solid black;box-shadow:none}.binary-pixel-display:before{display:none}.char-cell{color:#000!important}textarea,.output,.format-button{background:#fff;color:#000;border:1px solid black}}.crt{margin:1rem 0;box-shadow:inset 0 0 20px #00ff001a,0 0 10px #0f03;border-radius:2px;background-image:radial-gradient(#00ff004d,#00ff001a 80%,#00ff000d);position:relative;overflow:hidden}.crt .output{animation:flicker .25s alternate infinite;margin:0;box-shadow:none;background-color:transparent!important;padding:1rem;color:#0f0!important;text-shadow:rgba(0,255,0,.5) 0 0 .25rem,rgba(0,255,0,1) 0 0 .75rem;border:none;min-height:120px;position:relative;z-index:2}@keyframes flicker{25%{opacity:.95}50%{opacity:.85}75%{opacity:1}to{opacity:.9}}.scanlines{position:relative;overflow:hidden}.scanlines:before{display:block;position:absolute;z-index:1;animation:scanlines .1s linear infinite;top:0;right:0;bottom:0;left:0;background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.25),rgba(0,0,0,.25) 2px,transparent 2px,transparent 4px);pointer-events:none;content:""}@keyframes scanlines{to{background-position-y:4px}}.scanlines:after{display:block;position:absolute;animation:scanline 5s linear infinite;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to bottom,transparent,rgba(0,255,0,.05) 256px);background-size:auto 256px;background-repeat:no-repeat;background-position-y:-256px;pointer-events:none;content:""}@keyframes scanline{to{background-position-y:calc(100% + 256px)}}@media (max-width: 768px){.crt .output{padding:.75rem}}@media (max-width: 480px){.crt .output{padding:.5rem}}