/* Orbital interface. Each control family has its own silhouette;
   titanium, smoked blue glass and champagne light tie them together. */
:root {
  --bg: #070f1c;
  --panel: #102b46;
  --ink: #f0f5f8;
  --muted: #b5cfe2;
  --cyan: #79d7f3;
  --amber: #f5bd69;
  --violet: #b8a0e7;
  --line: #8faebe32;
  --steel: #7793a7;
  --gold: #f5bd69;
  --glass: linear-gradient(145deg, #204b6ddf, #102b46ef 53%, #091c32ed);
  --edge: inset 0 1px 0 #e7f4fa29, inset 0 -1px 0 #02070ccc;
  --display: Exo, Arial, sans-serif;
  --body: Golos, Arial, sans-serif;
}
body { color: var(--ink); font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; }
button, input, summary { font-family: var(--display); }
p, li, dt, dd { text-shadow: 0 2px 5px #02060b65; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-weight: 800; letter-spacing: -.045em; line-height: .98; }
h2 { font-weight: 650; letter-spacing: -.035em; line-height: 1.12; }
h3 { font-weight: 600; letter-spacing: -.02em; }
/* Light rolls over the face; the small offset shadow supplies physical depth.
   Body copy stays solid, with no gradient or blur on the glyphs themselves. */
h1, h2, .mechanic-panel h3, .world-panel h3 {
  color: #e9f0f0;
  background: linear-gradient(175deg, #fffef8 9%, #edf6fc 43%, #c5e4f7 75%, #e7f4fc 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #708b9b) drop-shadow(0 3px 0 #152532) drop-shadow(0 8px 12px #02060999);
}
.hero h1 { background: none; -webkit-text-fill-color: currentColor; }
.hero-title-metal { background: linear-gradient(175deg, #fffef8, #edf6fc 44%, #c5e4f7); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }
h1 em {
  color: #efb357;
  background: linear-gradient(172deg, #ffe7ad 6%, #ffcd7c 41%, #d9963e 82%, #efb45e);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  /* Isolate the gold face from the white title and include italic overhang,
     so the final dot receives the same fill as the rest of the word. */
  display: inline-block; white-space: nowrap;
  padding-inline: .035em .13em; margin-inline: -.035em -.13em;
}
.hero-kicker, .section-label, .eyebrow, .mechanic-label, .world-kicker {
  font-family: var(--display); font-weight: 500; letter-spacing: .065em;
  color: #8fd9f1; text-shadow: 0 1px 0 #04101c, 0 3px 12px #060d16;
}
.hero-kicker { display: flex; align-items: center; gap: 13px; font-size: 1rem; }
.hero-copy { color: #d0dde5; font-size: 1.0625rem; line-height: 1.85; letter-spacing: .005em; text-shadow: 0 2px 3px #03070a, 0 5px 20px #03070ae0; }
.hero-note { color: #a9becb; font-size: .8125rem; letter-spacing: .025em; }
.hero-note::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; background: #e0ae65; box-shadow: 0 0 9px #d7bd8355; }
.racecraft-heading h2 { font-weight: 650; font-size: clamp(2.2rem, 3.7vw, 3.6rem); }
.racecraft-heading p, .world-heading>p, .tokenomics-heading>p, .closing-content>div>p:last-child { color: #b8cad7; line-height: 1.85; }
.mechanic-panel h3 { font-weight: 650; letter-spacing: -.035em; line-height: 1.04; }
.mechanic-panel figcaption p, .world-panel p { color: #d2dfe6; line-height: 1.85; text-shadow: 0 2px 4px #02070cf0, 0 7px 18px #02070c; }
.world-panel h3 { font-weight: 650; }
.world-kicker { text-transform: none; font-size: .8125rem; letter-spacing: .04em; }
.stage-title h3 { font: 600 clamp(1.7rem, 2.5vw, 2.4rem)/1.15 var(--display); letter-spacing: -.025em; color: #f0f2ea; text-shadow: 0 1px 0 #7b8c95, 0 3px 0 #192631, 0 5px 18px #040910; }
.stage-drag { color: #d1dde4; font: 400 .75rem/1.5 var(--body); letter-spacing: .025em; text-shadow: 0 2px 6px #06101a; }
/* Preserve the original bright wordmark, independent of the interface palette. */
.wordmark { color: #f3f4ef; font-weight: 900; letter-spacing: -.04em; text-shadow: none; }
.wordmark span { color: #87eaff; }
.wordmark small { color: #ffc264; font-weight: 600; text-shadow: none; }

/* Global interaction states, kept outside cut surfaces for keyboard access. */
:where(a, button, summary, input):focus-visible { outline: 2px solid #c2e8ef; outline-offset: 5px; }
:where(button, a, summary) { touch-action: manipulation; }
:where(button, a, summary) { -webkit-tap-highlight-color: #9ad8e91a; }
.skip-link { border-radius: 0 0 12px 0; background: #ead3a9; color: #101a24; font-weight: 600; }
.site-header { background: linear-gradient(#070e17e8, #09121b63 68%, transparent); }
.site-header nav { gap: 22px; }
#navigation>a:not(.button) { position: relative; min-height: 44px; padding: 12px 1px; color: #c3d0d9; font: 500 .875rem/1.4 var(--display); letter-spacing: .035em; text-shadow: 0 2px 5px #02060b; transition: color .2s; }
#navigation>a:not(.button)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 5px; height: 1px; background: linear-gradient(90deg, #ddbd87, #9ad8e9, transparent); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
#navigation>a:not(.button):hover, #navigation>a:not(.button):focus-visible { color: #fff0d4; }
#navigation>a:not(.button):hover::after, #navigation>a:not(.button):focus-visible::after { transform: scaleX(1); }
.menu-toggle { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 12px 18px; gap: 14px; color: #dce6e8; font: 550 .875rem/1.25 var(--display); letter-spacing: .04em; }
.menu-toggle::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--glass); border: 1px solid #7d9dab78; box-shadow: var(--edge); clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.menu-toggle:hover, .menu-toggle[aria-expanded=true] { color: #efd6ad; transform: none; }
.menu-toggle[aria-expanded=true]::before { background: linear-gradient(135deg, #2e4150, #132331); border-color: #d4b57c; }
.menu-toggle svg { color: #a6d2dc; }

/* Secondary actions: a slender asymmetric launch rail, not the PLAY silhouette. */
.button.button-quiet, .button.button-primary:not(.button-orbital) { position: relative; isolation: isolate; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 54px; padding: 16px 27px; color: #e3e8e6; font: 550 .9375rem/1.4 var(--display); letter-spacing: .015em; text-shadow: 0 1px 1px #000b; transition: color .2s, filter .2s; }
.button.button-quiet::before, .button.button-primary:not(.button-orbital)::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, #315f7f 0, #1c3c59 2%, #102a43 58%, #173852); border-block: 1px solid #8ea9b05c; box-shadow: inset 0 1px 0 #e7f4fa19, inset 0 -3px 0 #030b12a0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); }
.hero-actions .button-quiet { gap: 20px; }
.hero-actions .button-quiet::after { content: ''; width: 7px; height: 7px; border-top: 1px solid #efbc71; border-right: 1px solid #efbc71; transform: rotate(45deg); transition: transform .2s; }
.button.button-quiet:hover:not(:disabled), .button.button-primary:not(.button-orbital):hover:not(:disabled) { background: none; box-shadow: none; color: #fff2d8; transform: none; filter: drop-shadow(0 0 7px #9ad8e91d); }
.button.button-quiet:hover::before, .button.button-primary:not(.button-orbital):hover::before { border-color: #bed9de9c; background: linear-gradient(115deg, #397899, #255b7b 3%, #174569 68%, #4d402e); }
.hero-actions .button-quiet:hover::after { transform: translateX(3px) rotate(45deg); }
.button.button-quiet:active:not(:disabled), .button.button-primary:not(.button-orbital):active { transform: translateY(1px); box-shadow: none; }
#viewer-action.button-quiet { min-height: 46px; padding: 12px 22px; font-size: .875rem; }
#viewer-action.button-quiet::before { clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); border-color: #a7cfd17a; }
.viewer-feedback p { border: 1px solid #7295a345; border-radius: 2px; background: #0b1723ed; color: #cfdee5; box-shadow: 0 6px 22px #03070b66; }

/* Hull selectors: clipped docking tickets with a brass selection rail. */
.ship-stage { border-radius: 3px; border-color: #7896a54d; box-shadow: inset 0 1px 0 #dce9e21a, 0 18px 42px #02070b50; }
.showroom-art, .ship-stage:after { border-radius: 3px; }
.fleet-console { border: 0; border-left: 1px solid #799bad40; border-radius: 0; padding: 16px 0 16px 18px; background: linear-gradient(90deg, #1527364f, transparent); }
.fleet-console .ship-tabs { gap: 10px; }
.ship-tabs button { position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; min-height: 88px; padding: 7px 16px 7px 4px; gap: 10px; color: #c3d0d8; font: 500 1rem/1.3 var(--display); letter-spacing: .02em; transition: color .2s; }
.ship-tabs button::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--hull-cut, polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%)); background: linear-gradient(120deg, #1c4465c9, #0c243cd9); border: 1px solid #789aad3d; box-shadow: inset 0 1px 0 #c7dbe812; transition: background .2s; }
.ship-tabs button[data-ship=heavy] { --hull-cut: polygon(0 0, calc(100% - 9px) 0, calc(100% - 9px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) calc(100% - 9px), calc(100% - 9px) 100%, 0 100%); }
.ship-tabs button[data-ship=vanguard] { --hull-cut: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.ship-tabs button[data-ship=neon] { --hull-cut: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }
.ship-tabs button[data-ship=aero] { --hull-cut: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
.ship-tabs button::after { content: ''; position: absolute; top: 20%; bottom: 20%; left: 0; width: 2px; background: #526976; transition: background .2s, box-shadow .2s; }
.ship-tabs button img { width: 76px; height: 66px; filter: drop-shadow(0 4px 3px #01050a); transition: transform .25s; }
.ship-tabs button:hover { background: none; color: #edf0e8; }
.ship-tabs button:hover::before { background: linear-gradient(120deg, #20557a, #123350); }
.ship-tabs button:hover img { transform: translateX(3px); }
.ship-tabs button[aria-selected=true] { padding: 7px 16px 7px 4px; border: 0; background: none; color: #ffe0a6; font-weight: 650; text-shadow: 0 2px 8px #050d14; }
.ship-tabs button[aria-selected=true]::before { background: linear-gradient(110deg, #93622155, #235880e6 42%, #143d60e6); border-color: #d6b77966; box-shadow: inset 0 1px 0 #e7d1a836, inset 0 -1px 0 #05111b; }
.ship-tabs button[aria-selected=true]::after { background: #e0c595; box-shadow: 0 0 10px #d6b57355; }
.ship-tabs button .ship-check { color: #e3c690; font-size: .8125rem; }

/* Camera presets are recessed switches; tools have round / hexagonal faces. */
.view-controls { gap: 2px; padding: 4px; border: 1px solid #7293a349; border-radius: 4px 14px 4px 4px; background: #091724d6; box-shadow: inset 0 2px 6px #02070bab, 0 6px 18px #02070b55; backdrop-filter: blur(14px); }
.view-controls button { position: relative; min-height: 44px; padding: 10px 13px; border: 1px solid transparent; border-radius: 2px; background: none; box-shadow: none; font: 500 .8125rem/1.4 var(--display); color: #b5c8d5; letter-spacing: .01em; }
.view-controls button[data-view=rear] { border-radius: 2px 9px 2px 2px; }
.view-controls button[aria-pressed=true] { background: linear-gradient(#324b5be3, #1d3343); border-color: #8faebc68; color: #edf1ec; box-shadow: inset 0 1px 0 #e9f0ec32, 0 2px 5px #030a1255; }
.view-controls button:hover:not(:disabled) { background: #254254; color: #f3dfbc; }
.viewer-controls { align-items: center; gap: 7px; }
.viewer-controls button { width: 44px; height: 44px; padding: 10px; min-height: 44px; border: 1px solid #7596a263; border-radius: 50%; background: radial-gradient(ellipse at 35% 10%, #355261, #172c3b 55%, #0a1621); box-shadow: inset 0 1px 0 #d8edf239, 0 3px 6px #03081090; color: #b6d1dd; }
.viewer-controls button:hover:not(:disabled) { border-color: #c1d9da; color: #f1dfbd; background: radial-gradient(ellipse at 35% 10%, #486573, #203949 55%, #102431); }
.viewer-controls button[aria-pressed=true] { color: #efd6a7; border-color: #cfb27b; background: radial-gradient(ellipse at 35% 10%, #595342, #283b43 65%); box-shadow: inset 0 0 0 3px #172733, 0 0 12px #ccaa6330; }
.viewer-controls #zoom-in { border-radius: 12px 3px 3px 12px; margin-right: -4px; }
.viewer-controls #zoom-out { border-radius: 3px 12px 12px 3px; }
.viewer-controls #reset-view { border-radius: 8px; transform: rotate(45deg); width: 36px; height: 36px; margin: 0 6px; }
.viewer-controls #reset-view svg { transform: rotate(-45deg); }
.view-controls button:disabled, .viewer-controls button:disabled { opacity: .45; }

/* Racecraft uses three separate swept plates, each ending on a different edge. */
.mechanic-tabs { border: 0; border-radius: 0; background: none; backdrop-filter: none; gap: 10px; width: min(690px, calc(100% - 104px)); }
.mechanic-tabs button { position: relative; isolation: isolate; border: 0; min-height: 96px; padding: 17px 22px; background: none; color: #bacbd6; gap: 6px; }
.mechanic-tabs button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, #204969ed, #0b2441f2); border-block: 1px solid #8ea8b566; box-shadow: inset 0 -3px 0 #020910; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.mechanic-tabs button[data-mechanic=strike]::before { clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 0 14px); }
.mechanic-tabs button[data-mechanic=phase]::before { clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 8px 50%); }
.mechanic-tabs button>span { font: 600 1.5rem/1.2 var(--display); letter-spacing: -.02em; text-shadow: 0 1px 0 #07111c, 0 3px 7px #02070a; }
.mechanic-tabs small { color: #aebfcd; font: 400 .75rem/1.45 var(--body); }
.mechanic-tabs button:hover { background: none; color: #f0e4cf; }
.mechanic-tabs button:hover::before { background: linear-gradient(135deg, #28658bec, #103d60f2); }
.mechanic-tabs button[aria-selected=true] { background: none; color: #f4e8d1; }
.mechanic-tabs button[aria-selected=true]::before { background: linear-gradient(135deg, #675631ee, #225d88f2 48%, #123a60f2); border-top-color: #e4c89b; border-bottom-color: #a4d4dd; box-shadow: inset 0 -3px 0 #7fa5ad66, inset 0 1px 0 #ead7b633; }
.mechanic-tabs button[aria-selected=true] small { color: #d0dbdf; }

/* Destinations: image windows with a cut upper corner and a bottom nameplate. */
.world-panels { border-radius: 3px; border-color: #86a7b24d; box-shadow: 0 20px 60px #01050955; }
.world-tabs button { --world-cut: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none; filter: drop-shadow(0 3px 5px #02081077); }
.world-tabs button[data-world=rust] { --world-cut: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.world-tabs button[data-world=nysa] { --world-cut: polygon(12px 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.world-tabs button img { clip-path: var(--world-cut); opacity: .62; }
.world-tabs button::after { background: linear-gradient(0deg, #071522 3%, #0d1e2bdc 27%, #10263326 82%); clip-path: var(--world-cut); border-bottom: 3px solid #547487; }
.world-tabs button::before { content: ''; position: absolute; top: 7px; right: 3px; z-index: 2; width: 19px; height: 1px; transform: rotate(45deg); background: #8298a6; }
.world-tabs button>span { left: 18px; right: 14px; bottom: 18px; font: 600 1.1875rem/1.3 var(--display); letter-spacing: .005em; text-shadow: 0 2px 2px #050c15; }
.world-tabs button small { color: #b6c7d3; font: 400 .75rem/1.5 var(--body); }
.world-tabs button[aria-selected=true] { box-shadow: none; filter: drop-shadow(0 3px 7px #02081077); }
.world-tabs button[aria-selected=true]::before { background: #ecd4a8; box-shadow: 0 0 8px #d6b980; }
.world-tabs button[aria-selected=true]::after { border-bottom-color: #efb963; }
.world-tabs button[aria-selected=true]>span { color: #ffe2af; }
.world-tabs button:hover>span { color: #fff0d2; }

/* Information uses steady, solid typography and tabular figures. */
.tokenomics-section { background: radial-gradient(ellipse at 15% 18%, #143b6a80, transparent 58%), linear-gradient(#070f1c, #0b1d36 70%, #070f1c); }
.token-ticker { color: #cfe4e8; font: 550 1rem/1.3 var(--display); letter-spacing: .16em; }
.token-supply>strong { font-weight: 500; letter-spacing: -.065em; color: #f2c476; text-shadow: 0 1px 0 #b69a6b, 0 3px 0 #2e302b, 0 9px 25px #040a10; }
.token-supply>strong>span { color: #b4c9d6; font: 400 1.2rem/1.4 var(--display); letter-spacing: .07em; text-shadow: 0 2px 6px #050910; }
.token-supply>p { font-size: .875rem; color: #b4c5d0; }
.token-principles h3 { font: 550 1.45rem/1.4 var(--display); color: #e2e7e2; text-shadow: 0 1px 0 #53677855, 0 3px 10px #050b11; }
.token-principles p { max-width: 68ch; color: #b6c7d4; line-height: 1.8; }
.token-subheading h3, .trade-example h3 { font-weight: 550; line-height: 1.2; letter-spacing: -.025em; color: #e9ece5; text-shadow: 0 1px 0 #77939c55, 0 3px 7px #030910; }
.allocation-bar { height: 12px; border-radius: 0; gap: 4px; transform: skewX(-18deg); margin-inline: 2px; }
.allocation-bar>span { box-shadow: inset 0 1px 0 #ffffff55, inset 0 -2px 0 #02091288; }
.pool-community{--pool:#68cce7}.pool-treasury{--pool:#5c9fdf}.pool-team{--pool:#a597db}.pool-strategic{--pool:#b59be0}.pool-airdrop{--pool:#dfbd79}.pool-liquidity{--pool:#df9d61}.pool-advisors{--pool:#83c0c5}.pool-security{--pool:#8caecc}
.allocation-list li { padding-block: 18px; }
.allocation-list li>span { font-size: .9375rem; color: #cbd6dc; }
.allocation-list strong { font: 550 1.35rem/1.4 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 2px 7px #030a12; }
.allocation-list small { font: 400 .8125rem/1.7 var(--body); letter-spacing: .015em; font-variant-numeric: tabular-nums; color: #a8bdcc; }
.allocation-list li::before { border-radius: 0; width: 4px; height: 12px; top: 22px; transform: skewY(-25deg); }
.tge-summary { border-color: #af986345; }
.tge-summary strong { color: #edbf76; font-weight: 500; font-variant-numeric: tabular-nums; }
.tge-summary span { color: #adbfcb; font-size: .875rem; }
.trade-example { position: relative; border-radius: 0 24px 0 0; border-color: #809bab3e; background: linear-gradient(145deg, #16446acc, #102e50d9 50%, #0a203a); box-shadow: inset 0 1px 0 #d3e7e41a, 0 12px 30px #02070b30; }
.trade-input label { font: 500 .875rem/1.6 var(--display); color: #bcd0dd; margin: 24px 0 8px; letter-spacing: .025em; }
.trade-input input { -webkit-appearance: none; appearance: none; display: block; height: 44px; min-height: 44px; margin: 0; background: transparent; }
.trade-input input::-webkit-slider-runnable-track { height: 4px; border: 0; background: #426d91; border-radius: 2px; }
.trade-input input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #d4f3ff; border-radius: 50%; background: #8edbf4; box-shadow: 0 2px 4px #02080b88; }
.trade-input input::-moz-range-track { height: 4px; border: 0; background: #426d91; border-radius: 2px; }
.trade-input input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #d4f3ff; border-radius: 50%; background: #8edbf4; box-shadow: 0 2px 4px #02080b88; }
.trade-input input:hover::-webkit-slider-thumb { background: #b1e9fa; }
.trade-input input:hover::-moz-range-thumb { background: #b1e9fa; }
.trade-result { font-variant-numeric: tabular-nums; }
.trade-result>p strong { font-weight: 550; color: #f0c17a; letter-spacing: -.01em; }
.trade-result dt { color: #c2d0d9; font-size: .9375rem; }
.trade-result dt span { color: #92acbd; font-family: var(--display); }
.trade-result dd { color: #a7ddf6; font-weight: 500; font-variant-numeric: tabular-nums; }
.table-scroll { scrollbar-color: #708994 #101b25; scrollbar-width: thin; }
.table-scroll table { font-size: .875rem; font-variant-numeric: tabular-nums; }
.table-scroll caption { font: 500 .875rem/1.6 var(--display); color: #c4d6df; }
.table-scroll thead th { color: #d4bd92; font-family: var(--display); letter-spacing: .025em; background: #1a2c3977; }
.table-scroll tbody th { color: #cbd6de; }
.table-scroll td { color: #b0c3d0; }

/* Disclosures are open-ended rails with a separate faceted toggle. */
.faq-section details { padding-block: 0; border-top-color: #7995a538; }
.faq-section details:last-child { border-bottom: 1px solid #7995a538; }
.faq-section summary, .vesting-details summary { position: relative; display: flex; align-items: center; min-height: 76px; list-style: none; padding: 20px 64px 20px 0; font: 550 1.125rem/1.5 var(--display); letter-spacing: .005em; color: #ccd9df; text-shadow: 0 2px 4px #02080d; transition: color .2s; }
.faq-section summary::-webkit-details-marker, .vesting-details summary::-webkit-details-marker { display: none; }
.faq-section summary::before, .vesting-details summary::before { content: ''; position: absolute; right: 7px; top: calc(50% - 17px); width: 34px; height: 34px; border: 1px solid #7b99aa70; background: linear-gradient(135deg, #275577, #12334f); border-radius: 2px 9px 2px 9px; box-shadow: inset 0 1px 0 #d7e8e91c, 0 3px 8px #03080c66; }
.faq-section summary::after, .vesting-details summary::after { content: '+'; position: absolute; right: 7px; top: calc(50% - 17px); width: 36px; height: 36px; display: grid; place-items: center; font: 400 1.4rem/1 var(--display); color: #bdd5df; text-shadow: 0 1px 2px #02060c; }
.faq-section details[open]>summary, .vesting-details[open]>summary { color: #f3cb87; }
.faq-section details[open]>summary::after, .vesting-details[open]>summary::after { content: '−'; color: #eed8a9; }
.faq-section details[open]>summary::before, .vesting-details[open]>summary::before { border-color: #d4ba897a; }
.faq-section summary:hover, .vesting-details summary:hover { color: #f3e4c7; }
.faq-section details p { max-width: 66ch; margin: 0 60px 25px 0; color: #b4c7d4; font-size: .9375rem; line-height: 1.85; }
.vesting-details { border-color: #7894a645; }
.vesting-details summary { font-size: 1rem; }
.vesting-details summary::before { border-radius: 50%; }
.vesting-details>p { color: #b4c6d2; font-size: .9375rem; line-height: 1.8; }

/* Text links stay unmistakably links, with a bronze underline and generous hits. */
.text-link, .footer-links a, .legal-page a:not(.button), .faq-section p a, .site-footer>a, .site-header>a:not(.wordmark) { color: #c1d9e0; text-decoration: underline; text-decoration-color: #a5b9bc66; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
.text-link:hover, .footer-links a:hover, .legal-page a:not(.button):hover, .faq-section p a:hover, .site-footer>a:hover, .site-header>a:not(.wordmark):hover { color: #f0d9b0; text-decoration-color: #e0c395; }
.closing-actions .text-link { gap: 12px; font: 500 .9375rem/1.5 var(--display); text-decoration: none; padding: 9px 0; border-bottom: 1px solid #b2cbd04d; }
.closing-actions .text-link::after { content: '↗'; color: #efbc6f; font-size: 1.2rem; }
.footer-links a { position: relative; padding: 9px 0; font: 400 .8125rem/1.5 var(--body); }
.footer-links a[href='#main'] { padding-right: 20px; text-decoration: none; }
.footer-links a[href='#main']::after { content: '↑'; position: absolute; right: 0; color: #e6b267; }
.site-footer { color: #aebecb; }
.footer-top .wordmark { font-weight: 900; }
.footer-top>p, .footer-bottom p { color: #a4b8c6; }
.legal-page { max-width: 860px; }
.legal-page>p { line-height: 1.9; color: #bccbd5; max-width: 68ch; }
.legal-page h2 { margin-top: 44px; font-size: 1.6rem; font-weight: 550; }
.legal-page .button { text-decoration: none; }
.site-header>a:not(.wordmark) { display: inline-flex; align-items: center; min-height: 44px; font: 500 .875rem/1.5 var(--display); }
.site-footer>a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1100px) and (min-width: 801px) {
  .site-header nav { gap: 14px; }
  #navigation>a:not(.button) { font-size: .8125rem; letter-spacing: 0; }
  .fleet-console { padding-left: 12px; }
  .ship-tabs button { gap: 4px; font-size: .9375rem; }
}
@media (max-width: 800px) {
  #navigation { background: linear-gradient(140deg, #173c5df7, #0b213bfa); border: 1px solid #8eacb560; border-top: 2px solid #bda779; padding: 10px 20px 18px; box-shadow: 0 22px 40px #010710aa; backdrop-filter: blur(22px); }
  .site-header nav { gap: 0; }
  #navigation>a:not(.button) { padding: 15px 4px; min-height: 50px; font-size: 1rem; border-bottom: 1px solid #8dabb126; }
  #navigation>a:not(.button)::after { bottom: 0; }
  #navigation .button-orbital { margin-top: 14px; }
  .fleet-console { border: 0; border-top: 1px solid #86a2b74d; padding: 10px 0 0; background: linear-gradient(#1a2d3c50, transparent); }
  .fleet-console .ship-tabs { gap: 9px; padding: 6px; scrollbar-color: #6e8a99 #101d2a; }
  .ship-tabs button, .ship-tabs button[aria-selected=true] { flex: 0 0 116px; min-width: 116px; min-height: 118px; padding: 7px 8px 12px; gap: 3px; font-size: .9375rem; }
  .ship-tabs button img { width: 90px; height: 72px; }
  .ship-tabs button::after { top: auto; bottom: 0; left: 15%; width: 70%; height: 2px; }
  .ship-tabs button:hover img { transform: translateY(-2px); }
  .mechanic-tabs { width: calc(100% - 48px); gap: 8px; }
  .world-tabs button>span { font-size: 1rem; left: 14px; right: 10px; }
  .view-controls button { padding-inline: 11px; }
  html:not(.js-menu) #navigation { padding: 0; border: 0; box-shadow: none; background: none; backdrop-filter: none; }
}
@media (max-width: 550px) {
  h1 { letter-spacing: -.035em; line-height: 1; }
  h2 { font-size: clamp(1.65rem, calc(8.4vw + .65rem), 2.75rem); }
  .hero-kicker { font-size: .875rem; letter-spacing: .03em; gap: 9px; }
  .hero-copy { font-size: .9375rem; line-height: 1.85; }
  .hero-note { font-size: .8125rem; }
  .hero-actions { row-gap: 17px; }
  .hero-actions .button-quiet { font-size: .875rem; padding: 14px 23px; min-height: 50px; }
  .stage-title h3 { font-size: 1.65rem; }
  .stage-bottom { left: 12px; right: 12px; gap: 12px; }
  .view-controls { gap: 2px; padding: 4px; }
  .view-controls button { padding: 10px 5px; font-size: .75rem; }
  .viewer-controls { gap: 9px; }
  .mechanic-tabs { margin-left: 20px; width: calc(100% - 40px); gap: 5px; }
  .mechanic-tabs button { min-height: 90px; padding: 15px 12px; gap: 5px; }
  .mechanic-tabs button>span { font-size: 1.2rem; }
  .mechanic-tabs small { font-size: .6875rem; }
  .world-tabs { gap: 8px; }
  .world-tabs button>span { font-size: .875rem; left: 10px; right: 7px; bottom: 15px; line-height: 1.4; }
  .world-kicker { font-size: .75rem; letter-spacing: .03em; }
  .token-principles h3 { font-size: 1.25rem; }
  .token-principles p { font-size: .9375rem; }
  .allocation-list li>span { font-size: .875rem; }
  .faq-section summary { font-size: 1rem; padding-right: 56px; min-height: 74px; }
  .faq-section details p { margin-right: 15px; font-size: .9375rem; }
  .vesting-details summary { font-size: .9375rem; }
  .trade-example { border-radius: 0 18px 0 0; }
  .legal-page h1 { line-height: 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .ship-tabs button:hover img, .hero-actions .button-quiet:hover::after { transform: none; }
}
@media (forced-colors: active) {
  h1, h1 em, h2, .hero-title-metal, .hero h1, .mechanic-panel h3, .world-panel h3 { background: none; -webkit-text-fill-color: CanvasText; filter: none; }
  .button.button-quiet, .button.button-primary:not(.button-orbital), .ship-tabs button, .mechanic-tabs button, .world-tabs button, .menu-toggle, .view-controls button, .viewer-controls button { border: 1px solid ButtonText; }
  [aria-selected=true], [aria-pressed=true] { outline: 2px solid Highlight; outline-offset: -3px; }
  .faq-section summary::after, .vesting-details summary::after { color: ButtonText; }
  .trade-input input { appearance: auto; }
}

/* Generated titanium faces share the PLAY material, with distinct silhouettes.
   Original PNGs stay unchanged; crop only transparent margins in layout.
   Labels remain live text and determine height when text is enlarged. */
.hero-actions .button.button-hangar, .site-header .button-social {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  flex: 0 1 auto; max-width: 100%; padding: 0; gap: 0; border: 0;
  border-radius: 0; background: none; box-shadow: none; text-decoration: none;
  color: #f4f3e9; text-shadow: 0 1px 0 #607a88, 0 2px 3px #020910;
  filter: drop-shadow(0 3px 5px #02080a99);
  transition: filter .2s ease, transform .2s ease;
}
.hero-actions .button.button-hangar { width: 320px; min-height: 64px; font: italic 700 1.1875rem/1.25 var(--display); letter-spacing: .005em; }
.generated-button-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.generated-button-art img { position: absolute; max-width: none; }
.button-hangar .generated-button-art img { width: 100%; height: 188.541667%; left: 0; top: -37.5%; }
.generated-button-label { position: relative; display: block; text-align: center; padding-block: 1em; }
.button-hangar .generated-button-label { width: 78%; margin-left: 4%; margin-right: 18%; padding-block: .85em; }
.site-header .button-social { width: 168px; min-height: 48px; font: 650 .875rem/1.3 var(--display); letter-spacing: .01em; }
.button-social .generated-button-art img { width: 107.001972%; height: 148.565574%; left: -3.451677%; top: -22.540984%; }
.button-social .generated-button-label { width: 62%; margin-left: 30%; margin-right: 8%; padding-block: .8em; }
.hero-actions .button.button-hangar:hover, .site-header .button-social:hover { background: none; box-shadow: none; color: #fff8e8; transform: translateY(-1px); filter: brightness(1.12) drop-shadow(0 3px 6px #020a14aa) drop-shadow(0 0 5px #7ed6f139); }
.hero-actions .button.button-hangar:active, .site-header .button-social:active { transform: translateY(1px); background: none; box-shadow: none; }
.site-header { gap: 20px; }
.site-header>.wordmark { order: 0; }
.site-header #navigation { order: 1; margin-left: auto; }
.site-header .button-social { order: 2; }
.site-header .menu-toggle { order: 3; }
@media (max-width: 1200px) and (min-width: 1001px) {
  .site-header { gap: 14px; padding-inline: 24px; }
  .site-header nav { gap: 14px; }
  .site-header .button-social { width: 148px; font-size: .8125rem; }
  .site-header .button.button-orbital[data-play] { width: 165px; }
}
@media (max-width: 1000px) {
  .site-header .button-social { margin-left: auto; }
  .js-menu .site-header .menu-toggle { display: flex; }
  .js-menu .site-header #navigation { display: none; position: absolute; inset: 100% 24px auto; margin: 0; padding: 10px 20px 18px; flex-direction: column; align-items: stretch; gap: 0; background: linear-gradient(140deg, #173c5df7, #0b213bfa); border: 1px solid #8eacb560; border-top: 2px solid #bda779; box-shadow: 0 22px 40px #010710aa; backdrop-filter: blur(22px); }
  .js-menu .site-header #navigation[data-open=true] { display: flex; }
  .site-header #navigation>a:not(.button) { padding: 15px 4px; min-height: 50px; font-size: 1rem; border-bottom: 1px solid #8dabb126; }
  .site-header #navigation .button-orbital { margin-top: 14px; }
  html:not(.js-menu) .site-header { flex-wrap: wrap; }
  html:not(.js-menu) .site-header #navigation { order: 3; display: flex; position: static; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; margin: 0; padding: 0; border: 0; gap: 12px; background: none; box-shadow: none; }
}
@media (max-width: 550px) {
  .js-menu .site-header { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 8px; }
  .site-header>.wordmark { flex: 0 0 auto; }
  .site-header .button-social { flex: 0 0 150px; width: 150px; min-height: 44px; font-size: .8125rem; }
  .site-header .menu-toggle { margin-left: auto; }
  .hero-content { padding-top: calc(100px + 5rem); }
  .hero-actions .button.button-hangar { width: min(100%, 320px); min-height: 62px; padding: 0; font-size: 1.125rem; }
}
@media (max-width: 360px) {
  .site-header>.wordmark { font-size: 1.35rem; }
  .site-header .button-social { flex-basis: 128px; width: 128px; font-size: .75rem; }
  .js-menu .site-header { column-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .button.button-hangar:hover, .hero-actions .button.button-hangar:active,
  .site-header .button-social:hover, .site-header .button-social:active { transform: none; transition: none; }
}
@media (forced-colors: active) {
  .generated-button-art { display: none; }
  .hero-actions .button.button-hangar, .site-header .button-social { border: 2px solid ButtonText; filter: none; text-shadow: none; color: LinkText; }
  .button-hangar .generated-button-label, .button-social .generated-button-label { width: 100%; margin: 0; padding: 12px; }
}