/* SPACE IMPACT whitepaper (Claude, 2026-10-13). Cyan identity, readable long-form layout. */
:root { color-scheme: dark; --bg: #03080d; --panel: #08131b; --line: #1d3b4b; --ink: #e6f6fb; --muted: #9fb6c2; --cyan: #54e4f5; --gold: #ffc266; --void: #b77cff;
  --common: #a9b4bf; --uncommon: #64f2c7; --rare: #57b8ff; --epic: #d787ff; --legendary: #ffca63; font-family: "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 16px; }
a { color: var(--cyan); }
img { max-width: 100%; }
.wp-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 20px; padding: 10px 28px; background: #030a10ee; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: .06em; }
.brand img { width: 28px; height: 28px; image-rendering: pixelated; } .brand b { color: var(--cyan); }
.wp-top nav { display: flex; gap: 18px; margin-left: auto; font-size: 14px; } .wp-top nav a { color: #cfe6ef; text-decoration: none; }
.badge { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 3px 8px; }

.cover { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 24px; padding: 64px 7% 56px;
  background: linear-gradient(90deg, #03080df5 0%, #03080dcc 50%, #03080d66 100%), url("../assets/aerovanguard/background-nebula.jpg") center / cover; border-bottom: 1px solid var(--line); }
.kicker { margin: 0; font-size: 12px; letter-spacing: .16em; color: var(--cyan); font-weight: 700; }
.cover h1 { margin: 10px 0 14px; font-size: clamp(48px, 7.5vw, 96px); line-height: .92; font-weight: 900; font-style: italic; letter-spacing: .02em; text-shadow: 0 0 22px #54e4f566, 0 4px 0 #0b3a4a; }
.cover h1 span { color: transparent; background: linear-gradient(180deg, #a8f6ff, #54e4f5 50%, #1aa3c4); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.lede { font-size: 19px; max-width: 640px; margin: 0 0 18px; }
.cover-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 18px; list-style: none; }
.cover-facts li { padding: 4px 10px; border: 1px solid #54e4f540; background: #04121bcc; font-size: 13px; color: #bcd3dd; } .cover-facts b { color: var(--cyan); }
.note { font-size: 13px; color: var(--muted); max-width: 640px; border-left: 3px solid var(--gold); padding-left: 12px; margin: 0; }
.cover-ship { justify-self: center; width: min(360px, 100%); filter: drop-shadow(0 0 40px #54e4f544); image-rendering: auto; }

.wp-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; max-width: 1240px; margin: 0 auto; padding: 40px 28px 64px; }
.toc { position: sticky; top: 64px; align-self: start; font-size: 14px; max-height: calc(100vh - 80px); overflow: auto; }
.toc strong { display: block; font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
.toc ol { margin: 0; padding: 0 0 0 20px; color: var(--muted); } .toc li { margin: 4px 0; } .toc a { color: #cfe6ef; text-decoration: none; } .toc a:hover { color: var(--cyan); }
.wp section { padding: 8px 0 34px; border-bottom: 1px solid #12293a; margin-bottom: 26px; scroll-margin-top: 70px; }
.wp h2 { font-size: 28px; margin: 0 0 14px; display: flex; align-items: baseline; gap: 12px; }
.wp h2 span { font-size: 14px; color: var(--cyan); font-weight: 800; letter-spacing: .1em; }
.wp h3 { font-size: 19px; margin: 22px 0 6px; } .wp h4 { margin: 8px 0 2px; font-size: 16px; }
.wp p { margin: 0 0 12px; color: #d3e4ec; max-width: 820px; }
.fine { font-size: 13px; color: var(--muted) !important; }
.pull { border: 1px solid var(--line); background: var(--panel); padding: 14px 18px; margin: 14px 0; }
.pull ul { margin: 6px 0 0; padding-left: 20px; } .pull li { margin: 4px 0; color: #d3e4ec; }
.pull.gold { border-color: #ffc26680; background: linear-gradient(180deg, #1d1708, #0a0d10); }
.pull.gold b:first-child { color: var(--gold); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.shot { margin: 0; } .shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--line); } figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

.table-wrap { overflow-x: auto; margin: 10px 0 14px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #12293a; vertical-align: middle; }
th { background: #0a1923; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
tbody tr:last-child td { border-bottom: 0; }
td.ok { color: #6ff0a4; } td.mid { color: var(--gold); } td.no { color: #ff8a96; }
.ico { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; image-rendering: pixelated; object-fit: contain; }
.r-common { color: var(--common); } .r-uncommon { color: var(--uncommon); } .r-rare { color: var(--rare); } .r-epic { color: var(--epic); } .r-legendary { color: var(--legendary); }

.diagram { margin: 14px 0 18px; padding: 14px; border: 1px solid var(--line); background: #050d14; }
.diagram svg { width: 100%; height: auto; display: block; }
.node rect { fill: #0a1923; stroke: #2f6b82; stroke-width: 1.5; }
.node.hot rect { stroke: var(--cyan); } .node.gold rect { stroke: var(--gold); fill: #17130a; } .node.void rect { stroke: var(--void); fill: #140c22; }
.node text { fill: var(--ink); font: 800 16px "Segoe UI", system-ui, sans-serif; text-anchor: middle; letter-spacing: .08em; }
.node text.sub { fill: var(--muted); font: 500 12px "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.ln { fill: none; stroke: #54e4f5; stroke-width: 2; } .ln.dash { stroke: #8fa9b6; stroke-dasharray: 6 5; } .ar { fill: #54e4f5; }
.steps { padding-left: 22px; } .steps li { margin: 6px 0; color: #d3e4ec; }

.galaxy-grid, .ship-grid, .module-grid, .enemy-grid, .void-grid, .base-grid { display: grid; gap: 12px; margin: 14px 0; }
.galaxy-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.galaxy-grid article, .void-grid article { border: 1px solid var(--line); background: var(--panel); }
.galaxy-grid img, .void-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.galaxy-grid h4, .void-grid h4 { margin: 8px 10px 0; font-size: 14px; } .galaxy-grid p, .void-grid p { margin: 2px 10px 10px; font-size: 12px; color: var(--muted); }
.ship-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ship-grid article { border: 1px solid var(--line); background: radial-gradient(circle at 50% 30%, #0f2a38, var(--panel) 70%); padding: 12px; text-align: center; }
.ship-grid img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; }
.ship-grid p { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.ship-grid dl { display: grid; grid-template-columns: auto auto; gap: 2px 8px; margin: 0; font-size: 12px; text-align: left; }
.ship-grid dt { color: var(--muted); } .ship-grid dd { margin: 0; text-align: right; font-weight: 700; }
.module-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.module-grid article, .base-grid article { border: 1px solid var(--line); background: var(--panel); padding: 12px; }
.module-grid img, .base-grid img { width: 36px; height: 36px; image-rendering: pixelated; object-fit: contain; }
.module-grid p, .base-grid p { font-size: 12px; color: var(--muted); margin: 0; }
.rarity-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; } .rarity-row span { border: 1px solid currentColor; padding: 3px 10px; font-size: 13px; font-weight: 700; }
.portrait-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
.portrait-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid #2f6b82; background: #050a0e; }
.enemy-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.enemy-grid article { border: 1px solid var(--line); background: var(--panel); padding: 10px; text-align: center; }
.enemy-grid img { height: 96px; width: 100%; object-fit: contain; } .enemy-grid p { font-size: 12px; color: var(--muted); margin: 0; }
.enemy-grid .boss { border-color: #ff8a9680; } .enemy-grid .void { border-color: #b77cff80; }
.void-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.base-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sprite-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; } .sprite-strip img { width: 110px; height: 110px; object-fit: contain; border: 1px solid var(--line); background: var(--panel); padding: 6px; }
.plain { padding-left: 20px; } .plain li { margin: 6px 0; color: #d3e4ec; }
.button { display: inline-block; padding: 10px 20px; color: #e8fbff; text-decoration: none; font-weight: 700; background: #124058; border: 7px solid transparent; border-image: url("../assets/ui/themes/cyan/button_normal.png") 4 fill / 8px / 0 stretch; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 6px 0 12px 20px; color: #d3e4ec; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 12px; width: 12px; height: 12px; background: #0a1923; border: 2px solid #2f6b82; }
.timeline li.done::before { background: #6ff0a4; border-color: #6ff0a4; } .timeline li.now::before { background: var(--cyan); border-color: var(--cyan); }
code { font-size: 13px; color: #cfe6ef; }
.wp-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

@media (max-width: 1100px) { .galaxy-grid, .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ship-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .enemy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .portrait-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px) { .wp-layout { grid-template-columns: 1fr; padding: 24px 18px 48px; } .toc { position: static; max-height: none; border: 1px solid var(--line); padding: 12px 14px; } .toc ol { columns: 2; } .two { grid-template-columns: 1fr; } .void-grid, .base-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cover { grid-template-columns: 1fr; padding: 40px 18px; } .cover-ship { width: 220px; } }
@media (max-width: 560px) { .wp-top { padding: 10px 16px; } .wp-top nav { display: none; } .galaxy-grid, .module-grid, .ship-grid, .enemy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portrait-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .toc ol { columns: 1; } .wp h2 { font-size: 23px; } }
.wp-layout > * { min-width: 0; }
.two > *, .wp > section { min-width: 0; }
.toc ol { padding-left: 28px; }
.two table { min-width: 0; }