@import url('/fx-design.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=DM+Mono:wght@400;500&display=swap');
:root{color-scheme:dark;--ink:#eaf5f5;--muted:#94a4b2;--acid:#c4ff67;--cyan:#82e9fb;--line:#323747;--mono:'DM Mono',monospace;--display:'Barlow Condensed',Impact,sans-serif}*{box-sizing:border-box}body{margin:0;background:#080b14;color:var(--ink);font:11px var(--mono)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--acid);outline-offset:2px}.topbar{height:78px;margin:0 3vw;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;color:var(--ink);text-decoration:none;font:900 22px/.8 var(--display);letter-spacing:.04em}.brand b,.brand-mark{color:var(--acid)}.brand small{display:block;color:#8a9caa;font:9px var(--mono);letter-spacing:.13em;margin-top:8px}.brand-mark{font:900 italic 29px var(--display)}.brand-mark span{font:900 10px var(--display)}.top-caption,.back-link{color:#9aabb6;letter-spacing:.12em;font-size:9px}.top-caption i{display:inline-block;width:6px;height:6px;background:var(--acid);box-shadow:0 0 10px var(--acid);border-radius:50%;margin-right:8px}.back-link{color:var(--ink);text-decoration:none;border-left:1px solid var(--line);padding:9px 0 9px 24px}.back-link:hover{color:var(--acid)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,425px);gap:30px;padding:24px 3vw;max-width:1800px;margin:auto}.studio{min-width:0}.studio-head,.customizer-heading{display:flex;justify-content:space-between;align-items:end}.eyebrow{color:var(--acid);font-size:10px;letter-spacing:.17em;margin:0 0 12px}.studio h1,.customizer h2{font:900 italic clamp(38px,4vw,63px)/.85 var(--display);margin:0;letter-spacing:-.02em}.studio h1 span,.customizer h2 em{color:var(--acid);font-style:inherit}.studio-head p:last-child{color:#97a9b7;letter-spacing:.12em;font-size:9px;margin:11px 0 0}.studio-tag{color:#8798a8;border:1px solid #3d4656;padding:9px 12px;font-size:9px;letter-spacing:.1em}.studio-tag b{color:var(--cyan)}.preview-frame{height:clamp(420px,67vh,850px);min-height:420px;position:relative;overflow:hidden;margin-top:20px;border:1px solid #384353;background:radial-gradient(ellipse at 48% 48%,#344251 0%,#202939 36%,#0e1420 78%)}.preview-frame:after{content:'';pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 100px #080b16aa}.preview-grid{position:absolute;inset:45% -70% -55%;transform:perspective(550px) rotateX(58deg);background-image:linear-gradient(#b3d0de13 1px,transparent 1px),linear-gradient(90deg,#b3d0de13 1px,transparent 1px);background-size:50px 50px;mask-image:linear-gradient(transparent,#000 36%)}#ship-preview{width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}#ship-preview:active{cursor:grabbing}.preview-caption,.preview-note{position:absolute;z-index:1;pointer-events:none;letter-spacing:.12em}.preview-caption{top:20px;left:22px;color:#96aeb8;font-size:9px}.preview-caption b{display:block;color:var(--cyan);font:700 19px var(--display);margin-top:5px}.preview-note{bottom:20px;left:22px;color:#a8b9c0;font-size:9px}.preview-note span{color:var(--acid)}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;color:#8b9da9;letter-spacing:.14em;font-size:9px;padding-top:10px}.preview-toolbar b{color:var(--acid)}.preview-toolbar>div{display:flex;gap:6px}.preview-toolbar button{width:34px;height:32px;background:#141c29;border:1px solid #3c4958;color:#d0f4ff;font-size:17px}.customizer{min-width:0;border:1px solid #343b4a;background:linear-gradient(145deg,#151926,#0e111b);padding:23px;align-self:start}.customizer-heading{padding-bottom:19px}.customizer h2{font-size:36px}.customizer-heading>span{font-size:8px;line-height:1.7;text-align:right;color:#8b9ba8;letter-spacing:.11em}.categories{display:flex;gap:4px;overflow-x:auto;padding:3px 0 10px;border-bottom:1px solid var(--line);scrollbar-color:#596579 transparent;scrollbar-width:thin}.categories button{flex:none;padding:9px 10px;background:#1a202d;border:1px solid #343e4c;color:#9eafbb;text-transform:uppercase;font-size:9px;letter-spacing:.05em}.categories button[aria-pressed=true]{background:#c4ff67;color:#101a12;border-color:var(--acid);font-weight:500}.category-content{min-height:280px;padding:20px 0 14px}.section-heading{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}.section-heading h3{font:800 25px/.9 var(--display);margin:0;text-transform:uppercase}.section-heading span{font-size:9px;color:#8e9eaa}.section-help{color:#8b9ea9;line-height:1.5;margin:0 0 13px}.part-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.part-card{position:relative;min-height:86px;background:#101721;border:1px solid #364453;color:#c5d5dd;text-align:left;padding:8px 10px}.part-card:hover{border-color:#82c4d0}.part-card[aria-pressed=true]{border-color:var(--acid);background:#202c28;box-shadow:inset 0 0 0 1px #c4ff6740}.part-card svg{display:block;width:100%;height:45px;color:#8cc2cf}.part-card[aria-pressed=true] svg{color:var(--acid)}.part-card span{display:block;font:700 15px var(--display);text-transform:uppercase;letter-spacing:.06em}.part-card b{position:absolute;right:9px;bottom:9px;font-size:9px;color:var(--acid)}.paint-override{margin-top:15px;border-top:1px solid var(--line);padding-top:13px}.field-grid,.colors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px;color:#a5b5c0;font-size:9px;letter-spacing:.07em}.field input,.field select,.pilot input,.preset-entry input{min-width:0;width:100%;height:37px;background:#0a1019;border:1px solid #394756;color:#edf7f8;padding:0 10px}.field input[type=color]{padding:3px;cursor:pointer}.field input[type=checkbox]{width:auto;height:auto;accent-color:var(--acid)}.check{display:flex;align-items:center;gap:8px}.paint-override .field{grid-template-columns:1fr 64px;align-items:center}.paint-override input[type=color]{height:30px}.pilot{padding-top:16px;border-top:1px solid var(--line)}.pilot label{display:block;letter-spacing:.09em;margin-bottom:7px}.pilot small{float:right;color:#768b9b;font-size:8px}.actions{display:flex;gap:8px;margin-top:13px}.actions button,.preset-entry button,.preset-item button{border:1px solid #46586a;padding:11px;background:#17212c;color:#e6f1f3;font:700 16px var(--display);letter-spacing:.05em}.actions .save{flex:1;display:flex;justify-content:space-between;background:var(--acid);border-color:var(--acid);color:#15200f}.actions .save:hover{background:#ddffac}.form-error{color:#ffaaa2;margin:10px 0 0}.form-error:empty{display:none}.footnote{color:#768b99;font-size:8px;line-height:1.5;letter-spacing:.07em;margin:11px 0 0}.preset-entry{display:flex;gap:8px}.preset-entry button{white-space:nowrap;font-size:13px}.preset-list{display:grid;gap:7px;margin-top:14px}.preset-item{display:flex;align-items:center;gap:7px;padding:9px;background:#101721;border:1px solid #344351}.preset-item strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 16px var(--display)}.preset-item button{padding:6px 8px;font-size:12px}.preset-empty{color:#8b9ea9;line-height:1.5}
@media(max-width:850px){.topbar{height:64px;margin:0 16px}.top-caption{display:none}.workspace{grid-template-columns:1fr;gap:17px;padding:20px 16px}.preview-frame{height:42vh;min-height:280px;margin-top:15px}.studio h1{font-size:39px}.studio-tag{display:none}.customizer{padding:20px}.category-content{min-height:0}.part-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:460px){.back-link{padding-left:12px;font-size:8px}.brand{font-size:19px}.studio h1{font-size:34px}.preview-frame{height:36vh;min-height:250px}.preview-note{font-size:8px}.part-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.customizer-heading>span{display:none}}
@media(min-width:851px){.studio{position:sticky;top:12px}.preview-frame{height:clamp(360px,61vh,780px);min-height:360px}.categories{flex-wrap:wrap;overflow:visible}}

/* The workbench follows the order in which a machine is built. */
.categories{display:grid;gap:13px;overflow:visible;padding:3px 0 16px}
.category-group{display:grid;gap:6px;min-width:0}
.category-group-label{color:#8395a2;font-size:9px;letter-spacing:.1em}
.category-group-items{display:flex;flex-wrap:wrap;gap:4px}
.category-group-items button{min-height:34px}
.category-group:first-child button{width:100%;text-align:left}
.family-card{min-height:117px}
.family-card svg{height:65px}
.family-card small{display:block;color:#91a6b0;font-size:8px;letter-spacing:.08em;margin-top:3px}
.family-card[aria-pressed=true] small{color:#d8eeaa}
@media(max-width:460px){.family-card{min-height:105px}.family-card svg{height:53px}}

/* Rewards stay visible while the pilot tries different parts. */
.credit-balance{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 16px;padding:11px 12px;border:1px solid #455846;background:#19241e}
.credit-balance>span{color:#a4b5a4;font-size:9px;letter-spacing:.09em}
.credit-balance strong{color:var(--acid);font:800 22px/.9 var(--display);white-space:nowrap}
.credit-balance small{font:9px var(--mono);letter-spacing:.05em}
.choice-status{display:block;margin-top:5px;color:#b8c9cf;font:9px var(--mono);letter-spacing:.02em}
.part-card b{top:8px;bottom:auto}
.part-card .choice-status{color:#a5bac2}
.part-card[aria-pressed=true] .choice-status{color:#d6edae}
.unlock-help{margin-top:14px}
.unlock-row{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:9px;padding:10px;border:1px solid #4c4834;background:#201e18}
.unlock-details{min-width:0}.unlock-details strong,.unlock-details small{display:block}.unlock-details strong{font:700 15px var(--display);text-transform:uppercase}.unlock-details small{margin-top:3px;color:#d1bb8e;font-size:8px;letter-spacing:.04em}
.unlock-button{flex:none;padding:9px;border:1px solid #bdce78;background:#b9ed6c;color:#192012;font:700 13px var(--display);letter-spacing:.04em}.unlock-button:hover{background:#ddffac}
.preview-status{color:#e6c68f;line-height:1.5;margin:0 0 12px;font-size:9px;letter-spacing:.03em}.preview-status:empty{display:none}

/* Keep the machine in sight while the workbench moves independently. */
@media (min-width:851px) and (min-height:600px){
  body{overflow:hidden}
  .workspace{height:calc(100dvh - 78px);min-height:0}
  .studio{position:static;display:flex;flex-direction:column;min-height:0}
  .preview-frame{height:auto;min-height:0;flex:1}
  .customizer{height:100%;min-height:0;display:flex;flex-direction:column;padding:0;align-self:stretch}
  .customizer-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:23px 23px 0;scrollbar-color:#596579 transparent;scrollbar-width:thin}
  .customizer-save{flex:none;padding:0 23px 16px;background:#10141e}
}
@media (min-width:851px) and (max-height:599px){
  .studio{align-self:start}
  .preview-frame{height:min(360px,max(120px,calc(100dvh - 200px)));min-height:0}
}
@media (max-width:850px){
  .workspace{gap:12px}
  .studio{position:sticky;top:0;z-index:5;background:#080b14;padding:8px 0 10px}
  .studio-head{display:none}
  .preview-frame{height:clamp(140px,25dvh,230px);min-height:0;margin-top:0}
  .preview-caption{top:10px;left:12px}
  .preview-caption b{font-size:16px;margin-top:2px}
  .preview-note{display:none}
  .preview-toolbar{padding-top:5px}
  #ship-preview{touch-action:pan-y}
}

.account-panel{margin:0 0 18px;padding:12px;border:1px solid #384657;background:#101722}
.account-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.account-label{display:block;color:#8b9ea9;font-size:9px;letter-spacing:.1em}.account-header strong{display:block;margin-top:4px;color:var(--cyan);font:700 18px var(--display);overflow-wrap:anywhere}.account-panel p{color:#a0b2bb;line-height:1.5;margin:8px 0}.account-panel .form-error{color:#ffaaa2}.account-panel summary{color:var(--acid);cursor:pointer;font:700 14px var(--display);letter-spacing:.06em}.account-panel form{display:grid;gap:6px;margin-top:10px}.account-panel label{color:#a5b5c0;font-size:9px;letter-spacing:.07em}.account-panel input{min-width:0;width:100%;height:37px;background:#0a1019;border:1px solid #394756;color:#edf7f8;padding:0 10px}.account-panel button{border:1px solid #46586a;padding:8px 11px;background:#17212c;color:#e6f1f3;font:700 14px var(--display);letter-spacing:.05em}.account-actions{display:flex;gap:8px;margin-top:5px}.account-panel button:disabled,.unlock-button:disabled{opacity:.5;cursor:wait}

:root{--ink:var(--fx-text);--muted:var(--fx-muted);--acid:var(--fx-brand);--cyan:var(--fx-cyan);--line:var(--fx-line);--mono:var(--fx-mono);--display:var(--fx-display)}
body{background:var(--fx-bg)}
