.viewport{position:relative;isolation:isolate;background:radial-gradient(ellipse at 55% 36%,#133e58 0,#0a2337 40%,#040d19 78%);border-color:#2592d1;box-shadow:inset 0 0 0 2px #061522,0 0 9px #079ef135;overflow:hidden}.viewport::after{content:'';position:absolute;inset:0;border:3px solid #12375155;border-radius:4px;pointer-events:none;z-index:8}.viewport canvas{width:100%;height:100%;display:block;touch-action:none;outline-offset:-5px;cursor:grab}.viewport canvas:active{cursor:grabbing}.viewport-toolbar{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;gap:7px;z-index:3;pointer-events:none}.viewport-toolbar>div{pointer-events:auto}.viewport-toolbar button{height:31px;padding:6px 9px;font-size:10px;background:#0a2134ec;box-shadow:0 2px 5px #0004;display:flex;align-items:center;gap:6px}.viewport-toolbar select{height:31px;font-size:10px;background:#092237ed;max-width:160px}.foundation-caption{position:absolute;top:23%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;width:70%;max-width:540px;color:#d9efff}.foundation-caption strong{display:block;font-size:clamp(19px,1.7vw,29px);font-weight:300;margin-top:12px;letter-spacing:.03em;text-shadow:0 2px 14px #041322}.foundation-caption p{color:#81aac6;font-size:11px;margin:11px 0 15px;letter-spacing:.015em}.foundation-caption .phase-note{font-size:8px;letter-spacing:.15em;color:#8ba6bd;padding:5px 9px;border:1px solid #47738a5c;border-radius:3px;background:#0617258a}.hud{position:absolute;z-index:2;background:linear-gradient(145deg,#0a243beb,#04101cec);border:1px solid #2c6488;border-radius:5px;box-shadow:0 4px 15px #0004;color:#bbd6ec;overflow:hidden}.performance-hud{top:61px;left:11px;width:188px;padding:10px 11px}.hud-heading{font-size:9px;font-weight:600;letter-spacing:.08em;color:#7ed0ff;display:flex;align-items:center;gap:5px;margin-bottom:10px}.hud-heading .icon{width:12px;height:12px}.hud dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 5px;font-size:10px}.hud dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:#cef1ff}.hud dt{color:#a0bdd6}.hud-divider{border-top:1px solid #28516c;margin:12px -11px 10px}.integrity-line{display:flex;align-items:center;gap:7px;font-size:10px;margin-bottom:8px}.phase-hud{right:11px;top:61px;width:154px;padding:10px}.phase-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:10px}.phase-grid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid #2d4b60;background:#0b1d2a;font-size:9px;color:#91aabd}.phase-grid .current{background:#0866a2;color:#fff;border-color:#4bc1ff;box-shadow:0 0 7px #03b2ff55}.phase-hud .tiny-note span{float:right;font-size:8px}.selection-hud{right:11px;bottom:34px;width:242px;padding:10px}.selection-hud .hud-heading{margin-bottom:6px}.selection-hud .selected-name{font-size:12px;color:#e4f6ff;margin-bottom:7px}.selection-hud .coords{display:flex;justify-content:space-between;font-family:monospace;font-size:10px;color:#9ac8e7}.selection-hud .coord-label{color:#4fadcf;margin-right:3px}.viewport-footnote{position:absolute;bottom:0;left:0;right:0;background:#061622db;height:24px;border-top:1px solid #19425c;display:flex;justify-content:space-between;align-items:center;padding:0 10px;font-size:9px;color:#7497b4;pointer-events:none}.viewport-footnote>span:first-child{color:#7fc9f9}.viewport.hud-hidden .hud{display:none}.viewport.hud-hidden .foundation-caption{opacity:.4}.viewport.has-selection .foundation-caption{top:21%}