:root{--cyan:#00e5ff;--orange:#ff8a1e;--red:#ff2d2d}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#cdeef5;background:#03060a;height:100%;font-family:Courier New,ui-monospace,monospace;overflow:hidden}.wrap{width:100vw;height:100vh;position:relative}.viewport{position:absolute;inset:0}.viewport canvas{display:block}.hud{pointer-events:none;text-shadow:0 0 8px var(--cyan);gap:2rem;padding:1rem 1.5rem;display:flex;position:absolute;top:0;left:0;right:0}.hud-item{flex-direction:column;display:flex}.hud .label{letter-spacing:.2em;color:#4b8b99;font-size:.7rem}.hud .val{color:var(--cyan);font-size:1.8rem;font-weight:700}.hud .val.small{color:var(--orange);text-shadow:0 0 8px var(--orange);font-size:1.1rem}.reticle{pointer-events:none;width:46px;height:46px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle:before{content:"";background:var(--cyan);width:4px;height:4px;box-shadow:0 0 8px var(--cyan);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.reticle .tick{background:var(--cyan);box-shadow:0 0 6px var(--cyan);position:absolute}.reticle .top,.reticle .bottom{width:2px;height:12px;left:50%;transform:translate(-50%)}.reticle .top{top:0}.reticle .bottom{bottom:0}.reticle .left,.reticle .right{width:12px;height:2px;top:50%;transform:translateY(-50%)}.reticle .left{left:0}.reticle .right{right:0}.overlay{background:radial-gradient(circle,#00283766,#000000d9);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.panel{border:2px solid var(--cyan);text-align:center;background:#030c12eb;width:min(90vw,540px);padding:2.5rem;box-shadow:0 0 30px #00e5ff66,inset 0 0 30px #00e5ff1a}.panel h1{letter-spacing:.15em;color:var(--cyan);text-shadow:0 0 18px var(--cyan);font-size:3rem}.panel .sub{letter-spacing:.35em;color:var(--orange);margin-bottom:1.5rem;font-size:.85rem}.panel p{margin:.75rem 0;line-height:1.6}.panel .dim{color:#5f97a3;font-size:.85rem}.controls{text-align:left;grid-template-columns:1fr 1fr;gap:.4rem 1rem;max-width:380px;margin:1.25rem auto;font-size:.9rem;list-style:none;display:grid}.controls b{color:var(--cyan)}.final{color:var(--cyan);text-shadow:0 0 14px var(--cyan);margin:1rem 0 1.5rem;font-size:2.4rem}.final span{color:#5f97a3;font-size:1rem}button{letter-spacing:.15em;color:#03060a;background:var(--cyan);cursor:pointer;text-transform:uppercase;border:none;margin-top:1rem;padding:.85rem 1.75rem;font-family:inherit;font-size:1rem;font-weight:700;transition:filter .15s,transform 50ms}button:hover{filter:brightness(1.2)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:wait}button.ghost{color:var(--cyan);border:1px solid var(--cyan);background:0 0;margin-left:.5rem}.result{color:var(--orange);border-top:1px solid #ff8a1e66;margin-top:1.25rem;padding-top:1rem}.flag{color:#7dffa0;text-shadow:0 0 12px #7dffa0;word-break:break-all;margin-top:1rem;font-size:1.3rem}