:root{--panel-black:#0d0d0d;--panel-charcoal:#1a1a1a;--dial-cream:#f5f0e8;--dial-lines:#d4c9bb;--needle-red:#e63946;--amber-glow:#ffb703;--text-dark:#1a1a1a;--text-light:#f5f0e8;--text-muted:#8c8c8c;--font-din:"DIN Condensed", "Helvetica Neue Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;--font-mono:"SF Mono", "Monaco", "Consolas", "Courier New", monospace;scrollbar-color:var(--dial-lines) transparent;caret-color:var(--amber-glow)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-din);background:var(--panel-black);color:var(--text-light);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;min-height:100vh;padding:1rem;line-height:1.5;display:flex}#root{width:100%;max-width:1200px}.converter{background:var(--panel-charcoal);border-radius:1rem;padding:2rem;box-shadow:0 8px 24px #0006}.converter-header{margin-bottom:2.5rem}.converter-title{letter-spacing:.08em;text-transform:uppercase;color:var(--amber-glow);text-wrap:balance;margin-bottom:1.5rem;font-size:1.5rem;font-weight:700}.conversion-types{flex-wrap:wrap;gap:.5rem;display:flex}.type-button{border:2px solid var(--dial-lines);min-width:140px;min-height:44px;color:var(--text-muted);font-family:var(--font-din);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:.5rem;flex:1;padding:.875rem 1.25rem;font-size:.9375rem;font-weight:700}.type-button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px}.gauges-container{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;margin-bottom:2rem;display:grid}.gauge{aspect-ratio:1;max-width:320px;margin:0 auto;position:relative}.gauge-face{background:var(--dial-cream);border-radius:50%;width:100%;height:100%;position:relative;box-shadow:inset 0 2px 8px #00000026,0 4px 16px #0000004d}.gauge-label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dark);font-size:1.125rem;font-weight:700;position:absolute;top:30%;left:50%;transform:translate(-50%)}.gauge-value{font-family:var(--font-mono);color:var(--text-dark);text-align:center;word-break:break-all;font-variant-numeric:tabular-nums;width:80%;font-size:2rem;font-weight:700;line-height:1.2;position:absolute;top:55%;left:50%;transform:translate(-50%)}.gauge-unit{color:var(--text-muted);margin-top:.25rem;font-size:.875rem;font-weight:400;display:block}.gauge-arc{border:2px solid var(--dial-lines);border-radius:50%;position:absolute;inset:8%}.gauge-ticks{position:absolute;inset:10%}.gauge-tick{background:var(--dial-lines);transform-origin:top;width:2px;height:40%;position:absolute;top:50%;left:50%}.gauge-tick.major{background:var(--text-dark);width:3px}.gauge-needle{background:var(--needle-red);transform-origin:bottom;border-radius:2px 2px 0 0;width:4px;height:45%;position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)rotate(0);box-shadow:0 2px 6px #e6394666}.gauge-needle:after{content:"";background:var(--needle-red);border:3px solid var(--dial-cream);border-radius:50%;width:16px;height:16px;position:absolute;bottom:-8px;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #0003}.input-container{max-width:480px;margin:0 auto 1.5rem}.input-wrapper{align-items:stretch;gap:.75rem;margin-bottom:1rem;display:flex}.value-input{background:var(--dial-cream);border:2px solid var(--dial-lines);font-family:var(--font-mono);color:var(--text-dark);text-align:center;border-radius:.5rem;flex:1;padding:1rem 1.25rem;font-size:1.5rem;font-weight:700}.value-input:focus{border-color:var(--amber-glow);outline:none}.value-input::placeholder{color:var(--text-muted)}.swap-button{background:var(--dial-cream);border:2px solid var(--dial-lines);cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;min-width:56px;min-height:44px;padding:1rem;display:flex}.swap-button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px}.swap-button svg{width:24px;height:24px;stroke:var(--text-dark);stroke-width:2px;fill:none}.clear-button{border:2px solid var(--dial-lines);width:100%;min-height:44px;color:var(--text-light);font-family:var(--font-din);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:.5rem;padding:.875rem;font-size:.9375rem;font-weight:700}.clear-button:disabled{border-color:var(--text-muted);color:var(--text-muted);cursor:not-allowed}.clear-button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px}.converter-actions{gap:.75rem;max-width:480px;margin:0 auto;display:flex}.action-button{background:var(--amber-glow);border:2px solid var(--amber-glow);min-height:44px;color:var(--text-dark);font-family:var(--font-din);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:.5rem;flex:1;padding:.875rem 1.25rem;font-size:.9375rem;font-weight:700}.action-button:disabled{border-color:var(--dial-lines);color:var(--text-muted);cursor:not-allowed;background:0 0}.action-button:focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px}::selection{background:var(--amber-glow);color:var(--text-dark)}::selection{background:var(--amber-glow);color:var(--text-dark)}:focus-visible{outline:2px solid var(--amber-glow);outline-offset:3px}@media (width<=768px){.converter{padding:1.5rem}.converter-title{font-size:1.25rem}.gauges-container{gap:2rem}.gauge{max-width:100%}.gauge-value{font-size:1.5rem}.value-input{font-size:1.25rem}.type-button{min-width:100px;padding:.75rem 1rem;font-size:.8125rem}}@media (width<=480px){.conversion-types{flex-direction:column}.type-button{min-width:100%}.input-wrapper{flex-direction:column}.swap-button{min-width:100%}.converter-actions{flex-direction:column}}@media (prefers-reduced-motion:no-preference){.type-button{transition:all .15s cubic-bezier(.2,0,0,1)}.type-button:hover{border-color:var(--amber-glow);color:var(--text-light)}.type-button.active{background:var(--amber-glow);border-color:var(--amber-glow);color:var(--text-dark)}.value-input{transition:border-color .15s cubic-bezier(.2,0,0,1)}.swap-button{transition:all .15s cubic-bezier(.2,0,0,1)}.swap-button:hover{border-color:var(--amber-glow);background:var(--amber-glow)}.clear-button{transition:all .15s cubic-bezier(.2,0,0,1)}.clear-button:hover:not(:disabled){border-color:var(--needle-red);color:var(--needle-red)}.action-button{transition:all .15s cubic-bezier(.2,0,0,1)}.action-button:hover:not(:disabled){background:#fa0;border-color:#fa0}.gauge-needle{transition:transform .2s cubic-bezier(.2,0,0,1)}}@media (prefers-reduced-motion:reduce){.type-button.active{background:var(--amber-glow);border-color:var(--amber-glow);color:var(--text-dark)}.gauge-needle{transition:none}}@media print{body{color:#000;background:#fff}.converter{box-shadow:none;border:1px solid #000}button{display:none}}
