:root{color-scheme:dark;--mint:#9be4ce;--dim:#7e9d9f;--line:rgba(168,218,219,.2)}*{box-sizing:border-box}body{margin:0;background:#03080c;color:#edf5f1;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:6px}button{border:0;color:inherit;background:none}button:hover,a:hover{color:#b8ffe1}.flight{position:relative;height:100svh;min-height:700px;overflow:hidden;isolation:isolate}.space-fallback,#universe,.glass,.ship{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.space-fallback{z-index:-4;background:radial-gradient(ellipse at 75% 32%,#183648 0,transparent 30%),radial-gradient(ellipse at 35% 50%,#0e1c2a,transparent 55%),#020509}.space-fallback:after{content:"";position:absolute;width:25vw;height:25vw;right:20%;top:18%;border-radius:50%;background:radial-gradient(circle at 70% 25%,#6facc0,#234b66 40%,#02070c 72%);box-shadow:2px -2px 22px #5eb4da55}#universe{z-index:-3}.glass{z-index:-2;background:linear-gradient(90deg,#01060a65,transparent 45%,#0003),linear-gradient(0deg,#0007,transparent 35%);box-shadow:inset 0 0 130px #0009}.ship{z-index:-1;transform:scale(1.025);transform-origin:50% 70%;will-change:transform}.ship img{width:100%;height:100%;object-fit:fill}.topbar{position:absolute;left:5%;right:5%;top:5.8%;height:38px;display:flex;align-items:center;gap:26px}.topbar .wof-logo{width:91px;max-height:36px}.mission-id{font:10px monospace;letter-spacing:1.5px;color:#9daead}.mission-id b{color:#567874;padding:0 6px}.topbar nav{margin-left:auto;display:flex;gap:28px;align-items:center;font-size:12px}.topbar nav span{color:var(--mint);margin-left:8px}.account{border-left:1px solid var(--line);padding-left:26px}.flight-line{position:absolute;top:14%;left:10%;right:10%;display:flex;justify-content:space-between;gap:20px;color:#b0c8c7;font:10px monospace;letter-spacing:1px}.flight-line b{color:#638e86;padding:0 10px}.live-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px #93e8c670;margin-right:7px;vertical-align:middle}.sim-label{color:#829999}.hero{position:absolute;left:27%;top:25%;width:290px}.eyebrow{font:10px monospace;letter-spacing:3px;color:#afccc9;display:flex;align-items:center;gap:10px}.eyebrow>span{height:1px;width:24px;background:var(--mint)}.hero-brand{display:block;position:relative;width:200px;margin:18px 0 16px}.hero-brand img{display:block;width:100%;filter:drop-shadow(0 0 24px #a6e8db20)}.hero h1{margin:0;font-size:clamp(29px,3vw,48px);line-height:1.35;font-weight:400;letter-spacing:5px;text-shadow:0 2px 18px #000}.hero p{font-size:12px;color:#a1b8b8;letter-spacing:2px;margin:18px 0 23px}.enter{display:flex;align-items:center;justify-content:space-between;background:#b4edce;color:#0c2823;padding:13px 17px;width:190px;font-size:12px;letter-spacing:1px;transition:background .2s}.enter:hover{background:#dbffe9;color:#0c2823}.enter span{font-size:20px}.entry-note{display:block;font-size:9px;letter-spacing:1px;color:#789a93;margin-top:13px}.target-reticle{position:absolute;left:60%;top:42%;font:9px monospace;color:#b8d3cd;letter-spacing:1px}.target-reticle i{display:block;width:34px;height:34px;border:1px solid #b7eadc55;border-radius:50%;position:relative;margin-bottom:14px}.target-reticle i:after,.target-reticle i:before{content:"";position:absolute;background:#b7eadc99;left:12px;top:16px;width:8px;height:1px}.target-reticle i:after{transform:rotate(90deg)}.target-reticle small{display:block;font-size:8px;color:#67948e;margin-top:7px}.scan{position:absolute;right:10%;top:25%;width:224px;padding:17px 0;border-top:1px solid #b1d7cd66;border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,#07111375);text-shadow:0 1px 8px #000}.panel-head{display:flex;justify-content:space-between;align-items:center;color:#afcac5;font:9px monospace;letter-spacing:1px}.target-title{display:flex;align-items:baseline;gap:15px;margin-top:18px}.target-title h2{font-weight:400;font-size:27px;letter-spacing:4px;margin:0}.target-title>span{font:9px monospace;color:#829f9e}.scan p{font-size:10px;line-height:1.9;color:#a1b9b6;max-width:210px;min-height:38px;margin:12px 0 16px}.scan dl{margin:0 0 20px}.scan dl>div{display:flex;justify-content:space-between;font-size:10px;line-height:2.2}.scan dt{color:#769695}.scan dd{margin:0;color:#c8ded7}.distance-caption{font-size:10px;color:#a7c4bd;display:flex;justify-content:space-between}.distance-caption span{font:8px monospace;color:#6d928a}.distance{display:flex;align-items:baseline;gap:10px;margin:8px 0 13px}.distance strong{font:32px monospace;letter-spacing:-1px;font-variant-numeric:tabular-nums}.distance>span{font:10px monospace;color:#809e95}.approach{height:2px;background:#80c3af25;overflow:hidden}.approach i{display:block;height:100%;width:2%;background:var(--mint);transition:width .4s}.scan-footer{display:flex;justify-content:space-between;font:8px monospace;color:#8fb4a7;margin:9px 0 15px}#next-target{display:flex;justify-content:space-between;width:100%;padding:10px 0 0;border-top:1px solid var(--line);font-size:10px;color:#c3dad2}.screen-label{font-size:8px;letter-spacing:1px;color:#6caaaa;display:flex;align-items:center;justify-content:space-between}.speed{display:flex;align-items:center;gap:9px;margin:6px 0 0}.speed strong{font-size:clamp(20px,2.5vw,39px);font-weight:400;letter-spacing:-2px;color:#b5ede1}.speed>span{font-size:9px}.speed small{display:block;font-size:7px;margin-top:4px;color:#608f8d}#waveform{display:block;width:100%;height:24px}.screen-row{display:flex;justify-content:space-between;gap:4px;font-size:7px}.screen-row b{font-weight:400;color:#bcdbd5}.attitude{height:42px;position:relative;margin:4px 8px;overflow:hidden;border:1px solid #59878244;border-radius:50%}.horizon{position:absolute;left:-20%;right:-20%;top:50%;height:40px;border-top:1px solid #88d9c4;background:repeating-linear-gradient(0deg,transparent 0 7px,#3a79763b 8px 9px);transform:rotate(-5deg)}.attitude>span{position:absolute;inset:0;display:grid;place-items:center;color:#e4bc7a;font-size:24px}.system-row{display:flex;justify-content:space-between;font-size:7px;gap:5px;margin:8px 0}.system-row b{font-weight:400;white-space:nowrap}.mint{color:var(--mint)}.meter{height:2px;background:#1a4140}.meter i{display:block;width:98%;height:100%;background:#78bbb0}.bottom-bar{position:absolute;bottom:3%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;gap:16px;font:10px monospace;color:#93adab}.vessel b{color:#47736d;margin:0 8px}.flight-controls{display:flex;gap:8px}.flight-controls button{padding:9px 13px;background:#081212dc;border:1px solid #86afa52b;font-size:10px;min-width:93px}.flight-controls span{margin-left:12px;color:#a5d1c5}.flight-controls button[aria-pressed=true]{color:#c5f9df;border-color:#9ce5c880;background:#1b3430}.more{position:relative}.more summary{cursor:pointer;list-style:none}.more summary::-webkit-details-marker{display:none}.more summary>span{margin-left:12px}.more nav{position:absolute;bottom:30px;right:0;width:150px;background:#061411f2;border:1px solid #5f8b7e;padding:7px;display:grid}.more nav a{padding:10px;font-size:11px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.paused .live-dot{box-shadow:none}.boosting #universe{filter:brightness(1.15)}
@media(min-width:1700px){.hero{top:27%}.scan{top:28%}.system-row,.screen-row{font-size:9px}.screen-label{font-size:10px}.attitude{height:60px}}
@media(max-width:1100px){.hero{left:22%;top:26%;width:235px}.hero-brand{width:170px}.hero h1{font-size:32px}.scan{right:9%;width:188px;top:24%}.target-reticle{left:56%;top:40%}.mission-id{display:none}.screen-label{font-size:6px}.system-row,.screen-row{font-size:6px}.bottom-bar{font-size:9px}.flight-controls button{padding:8px;font-size:9px;min-width:80px}}
@media(max-width:700px){.flight{min-height:900px;height:100svh}.topbar{top:28px;left:6%;right:6%}.topbar .wof-logo{width:78px}.topbar nav{gap:15px;font-size:10px}.account{border:0;padding:0}.topbar nav a:nth-child(2){display:none}.flight-line{top:87px;left:7%;right:7%;font-size:8px}.flight-line>span:nth-child(2){display:none}.ship{height:64%;top:auto;bottom:0;width:170%;left:-38%;opacity:.9}.hero{top:138px;left:8%;width:240px}.eyebrow{font-size:8px;letter-spacing:2px}.hero-brand{width:166px;margin:19px 0 16px}.hero h1{font-size:34px}.hero p{font-size:10px;letter-spacing:1px}.enter{width:172px;padding:11px 14px}.entry-note{font-size:8px}.scan{top:53%;right:7%;width:185px;padding:12px;background:#04101792}.panel-head{font-size:8px}.target-title{margin-top:12px}.target-title h2{font-size:22px}.scan p{font-size:9px;min-height:0;margin:9px 0}.scan dl{margin:0 0 10px}.scan dl>div{font-size:9px;line-height:1.9}.distance strong{font-size:27px}.distance-caption span{font-size:7px}.scan-footer{margin-bottom:10px}.target-reticle{left:72%;top:34%}.target-reticle span{font-size:8px}.speed strong{font-size:25px}.speed{margin-top:4px}.screen-label{font-size:6px}.system-row{font-size:6px;margin:8px 0}.screen-row{font-size:5px}#waveform{height:16px}.attitude{height:35px;margin:6px 2px}.bottom-bar{bottom:22px;left:7%;right:7%;flex-wrap:wrap;gap:12px}.vessel{font-size:8px}.flight-controls{order:3;width:100%;gap:6px}.flight-controls button{flex:1;min-width:0;font-size:9px}.more{font-size:9px}.distance{margin:6px 0 10px}.scan dl>div:nth-child(3){display:none}.scan p{max-width:180px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.ship{will-change:auto}}
@media(min-width:701px) and (max-height:850px){.hero{top:23%}.hero-brand{width:164px;margin:13px 0}.hero h1{font-size:32px;line-height:1.25}.hero p{margin:12px 0 16px;font-size:11px}.enter{padding:10px 15px}.entry-note{margin-top:9px}.scan{top:23%;padding:12px 0;width:205px}.target-title{margin-top:12px}.target-title h2{font-size:24px}.scan p{margin:8px 0 10px;line-height:1.7;min-height:34px}.scan dl{margin-bottom:10px}.scan dl>div{line-height:1.9}.distance strong{font-size:28px}.distance{margin:6px 0 10px}.scan-footer{margin:7px 0 10px}#next-target{padding-top:8px}.target-reticle{left:62%;top:39%}}

@media(max-width:700px){.flight{min-height:970px}.ship{left:-5%;width:125%;height:57%}.hero{top:140px}.hero h1{font-size:31px}.hero-brand{width:150px}.hero p{margin:12px 0 18px}.scan{top:47%;right:7%;padding:11px 12px;width:189px}.scan p{font-size:9px}.bottom-bar{bottom:25px}.target-reticle{top:33%}.flight-controls button{min-height:38px}}

/* Chinese aerospace material treatment; keep the live window beneath the raster. */
.ship img{-webkit-mask-image:url('/assets/cockpit/cockpit-window-cn-r2.svg');mask-image:url('/assets/cockpit/cockpit-window-cn-r2.svg');-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.eyebrow{letter-spacing:2px}.screen-label{letter-spacing:.6px}.mission-id{color:#b6bca8}.topbar .mission-id:before{content:"";display:inline-block;width:3px;height:9px;background:#b04b36;margin-right:8px;vertical-align:middle}

/* The image and SVG share the original 1672 × 941 coordinate plane.
   Only their common .ship parent moves; monitor geometry stays fixed at every viewport. */
.ship .instruments{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.ship .instrument{position:relative;inset:auto;display:block;width:100%;height:100%;margin:0;padding:8px;transform:none;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 30%,#082022b3,#041012b3);overflow:hidden}
.ship .screen-label{font-size:8px;line-height:12px;letter-spacing:.3px;white-space:nowrap}
.ship .screen-row{display:flex;justify-content:space-between;font-size:8px;line-height:11px;gap:4px;white-space:nowrap}
.ship .navigation{padding:5px 8px;background:linear-gradient(#071b1ce6,#041012b3)}
.ship .navigation .screen-label{font-size:7px;line-height:10px}
.ship .navigation .attitude{height:25px;margin:3px 13px 4px}
.ship .navigation .attitude>span{font-size:21px}
.ship .navigation .screen-row{font-size:7px;line-height:10px;flex-direction:column;gap:0;padding-left:10px}
.ship .telemetry{padding:10px 12px}
.ship .speed{margin:8px 0 0;gap:10px}
.ship .speed strong{font-size:35px;line-height:40px;letter-spacing:-1px}
.ship .speed>span{font-size:10px}
.ship .speed small{font-size:8px;margin-top:3px}
.ship #waveform{height:27px;margin:2px 0 5px}
.ship .system-row{font-size:8px;line-height:11px;margin:4px 0;gap:4px;white-space:nowrap}
.ship .systems .screen-label{font-size:7px}
.ship .systems .meter{height:2px}
