/* Night Sky page: the star chart is always a dark observatory sheet; the page around it follows the
   site's theme (data-canvas) through the site's own colour tokens. */
@font-face { font-family: Cinzel; src: url('../../fonts/cinzel-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Cinzel; src: url('../../fonts/cinzel-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.sky-page {
  --sky-serif: Cinzel, Georgia, serif; --serif: var(--sky-serif);
  --font: inherit; --mono: ui-monospace, Menlo, Consolas, monospace;
  --surface2: color-mix(in srgb, var(--surface) 82%, var(--line)); --btn-ink: var(--button-ink);
  --iommu: #086a8b; --pcie: #b54f08; --power: #4f6b05; --tour: #5b3fd0;
  padding-block: 24px 80px;
}
:root:not([data-canvas="light"]) .sky-page { --iommu: #5fe3ff; --pcie: #ff9a3c; --power: #c6e55a; --tour: #b9a2ff; }
.sky-page .sky-back { display: inline-block; margin-bottom: 8px; }
.sky-page .sky-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 18px; }
.sky-page .sky-head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1; text-wrap: balance; }
.sky-page .sky-head p { margin: 6px 0 0; color: var(--muted); max-width: 58ch; }
.sky-page .sky-back { color: var(--accent); }
.sky-page [hidden] { display: none !important; }
.sky-page :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sky-page .kicker { font: 700 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sky-page .score { text-align: right; font-family: var(--mono); min-width: 0; }
.sky-page .score b { display: block; font-size: 2.2rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.sky-page .score span { color: var(--muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.sky-page .meter { height: 4px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.sky-page .meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pcie), var(--iommu), var(--power)); }
.sky-page .bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.sky-page .bar .sp { flex: 1; }
.sky-page .bar .bar { margin: 0; }
.sky-page .bar .kicker { margin: 0 4px 0 0; }
.sky-page button,
.sky-page .btn { font: 700 .85rem/1 var(--font); min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.sky-page button:hover,
.sky-page .btn:hover { border-color: var(--muted); }
.sky-page button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sky-page .chip svg { width: 14px; height: 14px; flex: none; color: var(--c); }
.sky-page .primary { background: var(--accent); color: var(--btn-ink); border-color: var(--accent); }
.sky-page .layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sky-page .stage { --bg: #060a14; --surface: #0c1322; --ink: #e8f0ff; --muted: #92a3c0; --line: #22304d; --iommu: #5fe3ff; --pcie: #ff9a3c; --power: #c6e55a; --tour: #b9a2ff; --btn-ink: #04101c; color: var(--ink); position: relative; border: 1px solid var(--line); border-radius: 6px 28px 6px 6px; background: radial-gradient(120% 90% at 30% 20%, #0b1630, #050913 62%); overflow: hidden; aspect-ratio: 1300 / 900; touch-action: none; cursor: grab; }
.sky-page .stage.grabbing { cursor: grabbing; }
.sky-page .stage,
.sky-page .stage svg { user-select: none; -webkit-user-select: none; }
.sky-page .stage #space { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-page .stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sky-page .tools { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 6px; z-index: 2; }
.sky-page .tools button { min-height: 44px; min-width: 44px; padding: 0; justify-content: center; font-size: 1.1rem; background: color-mix(in srgb, var(--surface) 88%, transparent); }
.sky-page .cname-t { font: 600 15px/1 var(--font); fill: var(--ink); text-anchor: middle; pointer-events: none; }
.sky-page .cname { font: 800 96px/1 var(--font); letter-spacing: -.04em; fill: var(--c); opacity: .07; pointer-events: none; text-anchor: middle; }
.sky-page .cname-s { font: 700 26px/1 var(--serif); letter-spacing: .16em; fill: var(--c); text-anchor: middle; pointer-events: none; text-transform: uppercase; }
.sky-page .edge { fill: none; stroke: var(--c); stroke-width: 1.6; opacity: calc(.38 * var(--fog, 1)); vector-effect: non-scaling-stroke; }
.sky-page .edge.gate { stroke: var(--muted); stroke-dasharray: 3 7; opacity: calc(.6 * var(--fog, 1)); }
.sky-page .gate-t { font: 700 12px var(--mono); fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; }
.sky-page .route { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.sky-page .star { cursor: pointer; color: var(--c); outline: none; opacity: var(--fog, 1); }
.sky-page .star .hit { fill: transparent; }
.sky-page .star .g { fill: var(--surface); stroke: currentColor; stroke-width: 2; transition: fill .5s; transform-box: fill-box; transform-origin: center; }
.sky-page .star.lit .g { fill: currentColor; }
.sky-page .star text { opacity: var(--lab, 1); font: 700 15px var(--font); fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; transition: opacity .3s; }
.sky-page .star .ring { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sky-page .star .focus { fill: none; stroke: var(--ink); stroke-width: 2; opacity: 0; }
.sky-page .star:focus-visible .focus,
.sky-page .star.sel .focus { opacity: 1; }
.sky-page .dim .star { opacity: calc(.16 * var(--fog, 1)); }
.sky-page .dim .edge { opacity: calc(.16 * var(--fog, 1)); }
.sky-page .dim .star.keep { opacity: var(--fog, 1); }
.sky-page .dim .edge.keep { opacity: calc(.7 * var(--fog, 1)); }
.sky-page .star:hover text,
.sky-page .star.sel text,
.sky-page .star:focus text { opacity: 1; }
.sky-page .star.lit .g { filter: drop-shadow(0 0 7px currentColor); }
.sky-page .packet circle { fill: var(--ink); }
.sky-page .packet .halo { fill: var(--ink); opacity: .25; }
.sky-page .dust circle { fill: var(--ink); }
.sky-page .card { border: 1px solid var(--line); border-radius: 6px 20px 6px 6px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; min-width: 0; }
.sky-page .card .tag { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c, var(--muted)); }
.sky-page .card .tag svg { width: 14px; height: 14px; }
.sky-page .card h2 { margin: 0; font-family: var(--serif); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.sky-page .card .desc { margin: 0; color: var(--muted); font-size: .92rem; }
.sky-page .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: .75rem var(--mono); color: var(--muted); }
.sky-page .beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: b; }
.sky-page .beats li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: .95rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface2); }
.sky-page .beats li::before { counter-increment: b; content: counter(b); font: 700 .75rem/1.9 var(--mono); color: var(--c); }
.sky-page .beats li.on { border-color: var(--c); }
.sky-page .row { display: flex; flex-wrap: wrap; gap: 8px; }
.sky-page .empty { color: var(--muted); font-size: .92rem; }
.sky-page .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font: .72rem var(--mono); color: var(--muted); margin-top: 4px; }
.sky-page .legend span { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
.sky-page .legend svg { width: 12px; height: 12px; color: var(--c); }
.sky-page .hint2 { font: .75rem/1.4 var(--mono); color: var(--muted); margin: 10px 0 0; }
.sky-page #status { font: .78rem var(--mono); color: var(--muted); min-height: 1.4em; margin: 10px 0 0; }
.sky-page .list { margin-top: 28px; }
.sky-page .list h2 { font-size: 1.1rem; margin: 0 0 4px; }
.sky-page .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 12px; }
.sky-page .cols h3 { margin: 0 0 8px; font: 700 .75rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c); display: flex; gap: 8px; align-items: center; }
.sky-page .cols h3 svg { width: 12px; height: 12px; }
.sky-page .cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sky-page .cols li { display: flex; align-items: center; gap: 6px; }
.sky-page .cols li a { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: baseline; padding: 8px 4px; min-height: 44px; border-bottom: 1px solid var(--line); text-decoration: none; }
.sky-page .cols li a::before { content: ''; width: 8px; height: 8px; flex: none; border: 2px solid var(--c); border-radius: 50%; transform: translateY(1px); }
.sky-page .cols li.lit a::before { background: var(--c); }
.sky-page .cols li small { margin-left: auto; font: .7rem var(--mono); color: var(--muted); }
.sky-page .cols li.lit small::after { content: ' read'; }
.sky-page .pv { min-width: 44px; padding: 0; justify-content: center; color: var(--c); }
.sky-page .cols .pv { display: none; }
@media (max-width: 1060px) {
  .sky-page .layout { grid-template-columns: minmax(0, 1fr); }
  .sky-page .card { position: static; }
}
@media (max-width: 820px) {
  .sky-page .stage,
  .sky-page .bar .sp,
  .sky-page .tools,
  .sky-page .hint2,
  .sky-page .chips,
  .sky-page #tours { display: none; }
  .sky-page .score { text-align: left; }
  .sky-page .cols .pv { display: inline-flex; }
  .sky-page .card.idle { display: none; }
  .sky-page .chart-only { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-page .star .g { transition: none; }
}
.sky-page .stage { --gold: #cdbb8a; }
.sky-page .stage::before { content: ''; position: absolute; inset: 8px; z-index: 1; pointer-events: none; border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); border-radius: 3px 22px 3px 3px;
  background: linear-gradient(var(--gold), var(--gold)) top left / 22px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) top left / 2px 22px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 22px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom left / 2px 22px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 22px 2px no-repeat, linear-gradient(var(--gold), var(--gold)) bottom right / 2px 22px no-repeat; }
.sky-page .toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 3; text-align: center; pointer-events: none; opacity: 0; font-family: var(--serif); text-shadow: 0 2px 12px #000; }
.sky-page .toast b { display: block; font-size: clamp(.85rem, 2vw, 1.05rem); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.sky-page .toast small { display: block; margin-top: 4px; font-size: 1.05rem; font-family: var(--font); font-weight: 700; letter-spacing: .08em; color: var(--ink); }
.sky-page .toast::before,
.sky-page .toast::after { content: '◆'; display: block; color: var(--gold); font-size: .7rem; opacity: .8; }
.sky-page .keys { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: flex; gap: 14px; font: 700 .72rem/1 var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.sky-page .keys kbd { font: 700 .7rem/1 var(--mono); border: 1px solid var(--gold); color: var(--gold); border-radius: 3px; padding: 3px 5px; margin-right: 6px; }
.sky-page .card .sign { font: 500 .9rem var(--serif); color: var(--gold, var(--muted)); margin: -6px 0 0; }
@media (max-width: 1060px) {
  .sky-page .keys { display: none; }
}
.sky-page .keys,
.sky-page .tools { transition: opacity .6s; }
.sky-page .stage.hushed .keys,
.sky-page .stage.hushed .tools:not(:focus-within) { opacity: 0; }
.sky-page .try { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--surface2); display: grid; gap: 10px; }
.sky-page .try > b { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.sky-page .try p { margin: 0; font-size: .95rem; }
.sky-page .try .row button { min-height: 44px; }
.sky-page .try .row button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--btn-ink); }
.sky-page .flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: f; }
.sky-page .flow:empty { display: none; }
.sky-page .flow li { counter-increment: f; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font: 600 .85rem/1.4 var(--font); padding: 6px 10px; border-left: 2px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.sky-page .flow li::before { content: counter(f); font: 700 .75rem/1.7 var(--mono); color: var(--c); }
.sky-page .try .out { font-weight: 700; }
.sky-page .try .out.bad::before { content: '✕ '; color: #ff6b6b; }
.sky-page .try .out.ok::before { content: '✓ '; color: var(--power); }
.sky-page .try .out:empty { display: none; }

.sky-page .narrow-only { display: none; }
@media (max-width: 820px) {
  .sky-page .narrow-only { display: inline; }
}
.sky-page #motionbtn[aria-pressed=true]::after { content: ' ✓'; }