:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.seven-segment{width:100px;height:140px;filter:drop-shadow(0 0 4px rgba(0,255,100,.3))}.segment{fill:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:all .15s ease;cursor:pointer}.segment.on{stroke:#00ff64;filter:drop-shadow(0 0 6px rgba(0,255,100,.8))}.segment.off{stroke:#00502859}.segment:hover{stroke-width:5}.segment-dp.on{fill:#00ff64;stroke:#00ff64}.segment-dp.off{fill:#00502833;stroke:#00502859}.app{min-height:100vh;padding:2rem;background:linear-gradient(135deg,#0a0e14,#131920,#0d1117);color:#e6edf3}.header{text-align:center;margin-bottom:2.5rem}.header h1{font-size:2rem;font-weight:700;background:linear-gradient(90deg,#00ff64,#00d4aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.subtitle{color:#8b949e;font-size:.95rem;margin-top:.5rem}.main{max-width:560px;margin:0 auto}.display-section{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:#00281e40;border:1px solid rgba(0,255,100,.15);border-radius:16px;margin-bottom:2rem}.btn-reset{padding:.4rem 1rem;font-size:.85rem;background:#ff646433;color:#ff6b6b;border:1px solid rgba(255,100,100,.3);border-radius:8px;cursor:pointer;transition:all .2s}.btn-reset:hover{background:#ff64644d}.controls{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.control-group{display:flex;flex-direction:column;gap:.5rem}.control-group label{font-size:.9rem;font-weight:500;color:#8b949e;display:flex;align-items:center;gap:.5rem}.control-group input[type=checkbox]{accent-color:#00ff64;cursor:pointer}.char-grid{display:flex;flex-wrap:wrap;gap:.4rem}.char-btn{width:2.2rem;height:2.2rem;padding:0;font-size:1rem;font-weight:600;background:#30363d99;color:#8b949e;border:1px solid rgba(110,118,129,.3);border-radius:6px;cursor:pointer;transition:all .2s}.char-btn:hover{background:#30363d;color:#e6edf3;border-color:#00ff6466}.char-btn.active{background:#00ff6433;color:#00ff64;border-color:#00ff64}.toggle-group{display:flex;gap:.5rem}.toggle-btn{flex:1;padding:.6rem 1rem;font-size:.9rem;background:#30363d99;color:#8b949e;border:1px solid rgba(110,118,129,.3);border-radius:8px;cursor:pointer;transition:all .2s}.toggle-btn:hover{background:#30363d;color:#e6edf3}.toggle-btn.active{background:#00ff6426;color:#00ff64;border-color:#00ff64}.hint{font-size:.8rem;color:#6e7681;margin:0}.code-output{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}.code-block{flex:1;min-width:140px;padding:1rem;background:#161b22cc;border:1px solid rgba(48,54,61,.8);border-radius:10px}.code-label{display:block;font-size:.75rem;color:#8b949e;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em}.code-value{font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:1.25rem;font-weight:600;color:#00ff64}.code-value.binary{display:flex;flex-direction:column;gap:.25rem}.bit-labels{display:flex;gap:.15rem;font-size:.7rem;color:#6e7681}.bit-label{flex:1;text-align:center}.code-value.hex{color:#58a6ff}.segment-table{padding:1.25rem;background:#161b2299;border:1px solid rgba(48,54,61,.6);border-radius:10px}.segment-table h3{font-size:.95rem;color:#8b949e;margin:0 0 1rem;font-weight:500}.segment-table table{width:100%;border-collapse:collapse;font-size:.9rem}.segment-table th,.segment-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid rgba(48,54,61,.5)}.segment-table th{color:#8b949e;font-weight:500}.segment-table td strong{color:#00ff64}.footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(48,54,61,.5);text-align:center}.footer p{margin:0;font-size:.85rem;color:#6e7681}