/* ThundersMC Pack: white and grey, square corners, plain system font, a night-sky dither canvas behind everything. */
/* Colours are variables so light and dark mode (the visitor's system setting) only swap values. */
:root {
  --bg: #f6f6f5;
  --panel: #ffffff;
  --ink: #1c1c1c;
  --on-ink: #ffffff;           /* text on an --ink background */
  --ink-2: #5c5c5c;
  --line: #d4d4d2;
  --shot-bg: #ededeb;
  --cap-bg: #fafaf9;
  --mac: #2f6fdc;
  --win: #4c9a2a;
  --c-mac: #2f6fdc;            /* coloured words in the text */
  --c-win: #356d1c;
  --ok: #356d1c;
  --err: #b3261e;
  --grey-btn: #e4e4e2;
  --grey-btn-dark: #a9a9a6;
  --btn-base: #1c1c1c;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
/* Dark mode = dusk: a deep blue-violet night colour behind a sunset sky. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15131f;
    --panel: #1e1b2b;
    --ink: #eeeaf2;
    --on-ink: #15131f;
    --ink-2: #aaa3b8;
    --line: #3a3450;
    --shot-bg: #110f19;
    --cap-bg: #1e1b2b;
    --mac: #3a78e6;
    --win: #4a9a2b;
    --c-mac: #8fb0ff;
    --c-win: #8fd66e;
    --ok: #8fd66e;
    --err: #ff9a8a;
    --grey-btn: #2c2840;
    --grey-btn-dark: #5e5873;
    --btn-base: #2c2840;
  }
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 var(--sans); overflow-x: hidden;
}
/* The background canvas covers the whole page and scrolls with it (app.js sets its exact size). */
#dither {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
  image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none;
}
main { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; padding: 0 16px; }
a { color: inherit; text-underline-offset: 3px; }

/* Load wave: each element appears as the wave passes it. */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* Hero */
.hero {
  min-height: min(92vh, 860px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 0 48px; gap: 18px;
}
.kicker { margin: 0; font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
h1 {
  margin: 0 0 14px; font: 800 clamp(40px, 9vw, 92px)/1 var(--sans); letter-spacing: -0.03em;
}
.sub { margin: 0 0 14px; max-width: 34em; color: var(--ink-2); font-size: 18px; }

/* Buttons: all three are the same height with the number badge pinned at the left edge and the label centred
   in the whole button, so the row is symmetrical. Flat, even 2px border, no bevel. */
.actions { width: min(100%, 460px); display: grid; gap: 14px; }
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.actions > *, .platforms > * { min-width: 0; }
.btn {
  position: relative; display: block; width: 100%; height: 60px; padding: 0 56px;
  font: 700 19px/56px var(--sans); text-align: center; text-decoration: none; color: #fff;
  border: 2px solid var(--ink); cursor: pointer; background: var(--btn-base);
  transition: transform .08s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); }
.btn:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn-no {
  position: absolute; left: 12px; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  display: grid; place-items: center; font: 800 17px/1 var(--sans);
  background: #fff; color: #1c1c1c; border: 2px solid var(--ink);
}
.btn-prism { background: var(--grey-btn); color: var(--ink); }
.btn-mac { background: var(--mac); }
.btn-win { background: var(--win); }
.btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--ink); }

.unlock {
  width: min(100%, 460px); margin-top: 6px; padding: 16px; text-align: left;
  background: var(--panel); border: 2px solid var(--ink);
  animation: drop .25s ease;
}
.unlock[hidden] { display: none; }
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.unlock label { display: block; font: 700 15px var(--sans); margin-bottom: 8px; }
.unlock-row { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 10px; }
.unlock-row[hidden] { display: none; }
.unlock input {
  min-width: 0; height: 48px; font: 17px var(--sans); padding: 0 12px;
  border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
}
.btn-go { height: 48px; padding: 0 8px; font-size: 17px; line-height: 44px; }
.unlock[data-platform="mac"] .btn-go { background: var(--mac); }
.unlock[data-platform="windows"] .btn-go { background: var(--win); }
.unlock-msg { margin: 0; font-size: 14px; color: var(--ink-2); }
.unlock-msg:not(:empty) { margin-top: 10px; }
.unlock-msg.err { color: var(--err); }
.unlock-msg.ok { color: var(--ok); }
.fineprint { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
/* Pack version + changelog, under the buttons */
.version { margin: 10px auto 0; max-width: 520px; font-size: 13px; color: var(--ink-2); text-align: left; background: var(--panel); border: 1px solid var(--line); }
.version summary { cursor: pointer; padding: 8px 12px; font-weight: 700; color: var(--ink); text-align: center; list-style-position: inside; }
.version > .note, .version ol { margin: 0; padding: 0 14px 10px; }
.version ol { list-style: none; }
.version li { padding: 8px 0 0; border-top: 1px solid var(--line); margin-top: 8px; }
.version li strong { color: var(--ink); }
.version .tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700; background: var(--ink); color: var(--on-ink); }
.version ul { margin: 4px 0 0; padding-left: 18px; }

/* Steps */
.steps { padding: 24px 0 40px; }
.steps h2 { font: 800 32px var(--sans); letter-spacing: -0.02em; text-align: center; margin: 0 auto 28px; width: fit-content; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); padding: 22px;
}
.step-no {
  margin: 0 0 8px; width: 34px; height: 34px; display: grid; place-items: center;
  font: 800 18px var(--sans); background: var(--ink); color: var(--on-ink);
}
.step h3 { margin: 0 0 8px; font: 800 24px var(--sans); letter-spacing: -0.02em; }
.step p { margin: 0 0 10px; }
.note { font-size: 14px; color: var(--ink-2); }
.c-mac { color: var(--c-mac); }
.c-win { color: var(--c-win); }
.step figure { margin: 0; border: 1px solid var(--line); background: var(--shot-bg); }
.step img { display: block; width: 100%; height: auto; }
.step figcaption { padding: 6px 10px; font-size: 12px; color: var(--ink-2); border-top: 1px solid var(--line); background: var(--cap-bg); }

.step-wide { grid-template-columns: 1fr; }   /* a text-only card (no picture) */
.shaders { padding-top: 0; }
.shaders .step h3 { margin-top: 0; }
/* Fast / Fancy picker: a plain grid, one row per system */
.pick { width: 100%; border-collapse: collapse; margin: 6px 0 12px; table-layout: fixed; }
.pick th, .pick td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.pick thead th { font: 800 20px var(--sans); background: var(--cap-bg); }
.pick thead th span { display: block; font: 400 13px var(--sans); color: var(--ink-2); margin-top: 2px; }
.pick thead th:first-child { width: 22%; }
.pick tbody th { font: 800 17px var(--sans); }
.pick td { font: 700 17px var(--sans); }
.pick .rec { display: inline-block; margin-left: 6px; padding: 2px 7px; font: 700 12px var(--sans); background: var(--ink); color: var(--on-ink); vertical-align: 2px; }
.pick td em { font-weight: 400; font-style: normal; color: var(--ink-2); font-size: 14px; }
@media (max-width: 480px) { .pick th, .pick td { padding: 9px 8px; } .pick thead th { font-size: 17px; } .pick td, .pick tbody th { font-size: 15px; } }

/* Footer */
.foot { text-align: center; padding: 28px 0 150px; border-top: 1px solid var(--line); }   /* room for the bedrock floor */
.online { margin: 0 0 10px; font: 700 17px var(--sans); display: inline-flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; background: var(--grey-btn-dark); }
.online.live .dot { background: var(--win); animation: blink 2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.legal { margin: 0 auto; width: fit-content; max-width: 100%; font-size: 12px; color: var(--ink-2); }

@media (max-width: 720px) {
  .step { grid-template-columns: 1fr; padding: 16px; }
  .btn { padding: 0 44px; font-size: 17px; }
  .btn-no { left: 8px; width: 28px; height: 28px; margin-top: -14px; }
}
@media (max-width: 480px) {
  .btn { padding: 0 34px; font-size: 16px; }
  .btn-no { left: 6px; width: 24px; height: 24px; margin-top: -12px; font-size: 14px; }
  .platforms, .actions { gap: 10px; }
}
@media (max-width: 340px) {
  .platforms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .unlock { animation: none; }
}