/* ============================================================
   /mc — MGB 伺服器

   A Minecraft server's front page. Full-bleed world panorama, the
   address as the largest object on the screen, a live player count,
   a top bar — the vocabulary the genre actually uses.

   THINGS THIS PAGE DOES NOT DO, because they are the tells of a
   generated page and the owner has called each one out:

     · no kicker / eyebrow label above a heading ("生存經濟 · 無白名單")
     · no dot, bullet or square marker in front of a section title
     · no wall of rounded cards. There are exactly TWO boxes on the
       whole site (.key), they are square-cornered with an amber top
       rule, and everything else is hairline-divided rows, ruled
       columns, a timeline, or a full-bleed band.
     · no emoji anywhere

   Structure instead of decoration: a section is a two-column
   editorial grid — the heading sits in the left column and stays
   with you while you read (sticky), the content runs down the
   right. That is what replaced the labels.

   THE COLOUR BUDGET, and it is small on purpose:

     --acc   amber   an action, a rule tick, a hover, the current tab
     --live  green   the online dot, and nothing else in the sheet

   The world screenshots stay the most colourful thing on the page.

   THE GRADIENT BUDGET, and it is two:

     1. the hero scrim        photograph → page colour, so type lands
                              on a solid background. A photographic
                              technique, not decoration.
     2. the primary button    two amber stops, ~8% apart, vertical.
                              What a physical key looks like.

   No 135° violet→cyan, no glassmorphism, no blurred glow orbs. A
   button presses down INTO its own hard offset shadow rather than
   blooming.

   夜 is the default and there is no prefers-color-scheme block at
   all, so a light system setting can never reach the page: 日 exists
   only because the switch asked.
   ============================================================ */

/* ── 夜, the default ────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --bg:      #07070a;                /* 3% luminance: still black on OLED */
  --bg-2:    #101117;                /* full-bleed bands */
  --panel:   #121319;                /* the two .key boxes, and controls */
  --panel-2: #171922;
  --edge:    #23252f;
  --edge-2:  #2f323e;

  --ink:   #f4f5f7;
  --ink-2: #a8acb8;
  --ink-3: #7b7f8c;

  --acc:     #e08a2e;                /* amber — actions and marks */
  --acc-hi:  #ee9a3c;                /* the button's top stop */
  --acc-lo:  #d77c22;                /* the button's bottom stop */
  --acc-sh:  #a85e16;                /* the hard offset under it */
  --acc-ink: #1a1206;                /* type on the button's gradient */
  --acc-flat: #1a1206;               /* type on flat --acc; flips with the paper */
  --acc-dim: rgba(224, 138, 46, .13);
  --live:    #3fbf48;                /* the online dot, and only that */
  --live-ring: rgba(63, 191, 72, .18);

  --shadow: none;                    /* dark paper separates by fill, not shade */
  --hold: #14161c;                   /* an image's box before it decodes */

  --r-1: 5px;                        /* code chips */
  --r-2: 12px;                       /* buttons */
  --r-3: 16px;                       /* the address */
  --r-img: 6px;                      /* pictures: softened, not bubbled */
  --r-pill: 999px;                   /* controls only */

  --sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'PingFang TC', 'Microsoft JhengHei', sans-serif;
  /* CJK face last: DM Mono carries no Chinese, and without a named
     fallback the Chinese inside a mono run picks an unrelated face. */
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas,
          'Noto Sans TC', monospace;

  --bar: 3.5rem;
  --page: 74rem;
  --pad: 2.5rem;
  --col: 16rem;                      /* the section heading column */
  --gut: 4rem;
  --read: 42em;
}

/* ── 日, when the reader asks for it ────────────────────────── */

:root[data-theme="light"] {
  color-scheme: light;

  --bg:      #f4f4f2;
  --bg-2:    #ecece8;
  --panel:   #ffffff;
  --panel-2: #f7f7f5;
  --edge:    #dededa;
  --edge-2:  #d3d3ce;

  --ink:   #0b0b0c;
  --ink-2: #4a4c52;
  --ink-3: #6e7178;

  /* The button's two stops do not change with the paper, so its ink
     cannot either — white on #e0892c is 2.5:1 and fails AA at this
     size. Only the FLAT amber flips, because it is deep here. */
  --acc:     #a95f13;
  --acc-hi:  #e0892c;
  --acc-lo:  #c06d17;
  --acc-sh:  #8c4d0e;
  --acc-ink:  #1a1206;
  --acc-flat: #ffffff;
  --acc-dim: rgba(169, 95, 19, .1);
  --live:    #1f7a28;
  --live-ring: rgba(31, 122, 40, .16);

  --shadow: 0 1px 2px rgba(11, 11, 12, .05), 0 6px 18px rgba(11, 11, 12, .06);
  --hold: #e4e4e0;
}

/* ── base ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Never scroll-behavior: smooth here — it hijacks the reader and it
   turns every window.scrollTo in tools/mc-shots.mjs into an animation,
   which runs the lazy-image pass past puppeteer's protocol timeout. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  /* Chinese wants far more leading than Latin body copy does; below
     about 1.85 the glyphs pack into a grey block. */
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.25;
  text-wrap: balance;
}

p { margin: 0; max-width: var(--read); color: var(--ink-2); }
p + p { margin-top: 0.9rem; }
p strong, li strong { color: var(--ink); font-weight: 700; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--acc); text-decoration-color: var(--acc); }

::selection { background: var(--acc); color: var(--acc-flat); }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

code {
  font-family: var(--mono);
  font-size: 0.88em;
  font-weight: 500;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--r-1);
  padding: 0.1em 0.45em;
  /* A command must never break across lines — the tinted pill splits
     with it and `/grave tp` reads as two broken tokens. */
  white-space: nowrap;
}

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }

/* ── the top bar ────────────────────────────────────────────── */

/* Transparent while it sits over the hero, solid once the hero has
   scrolled past — mc.js flips .is-stuck off a sentinel. No blur:
   a solid bar reads as a piece of the page rather than a floating
   frosted panel. */
.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}

.bar.is-stuck { background: var(--bg); border-bottom-color: var(--edge); }

/* Pages without a hero start solid, so the bar is never transparent
   over ordinary copy. */
.bar.is-plain { background: var(--bg); border-bottom-color: var(--edge); }

.bar-in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--bar);
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* The mark is the server's own icon — the same picture the multiplayer
   list shows, only sharp. A drawn logo would be a fiction; this is what
   players already recognise. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
  font-weight: 900;
  font-size: 1.0625rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover { color: var(--ink); }

.brand img {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 4px;
  background: var(--hold);
}

.bar-nav { display: flex; gap: 0.15rem; min-width: 0; }

.bar-nav a {
  padding: 0.3rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-pill);
  transition: background .16s, color .16s;
}

.bar-nav a:hover { color: var(--ink); background: var(--panel); }
.bar-nav a[aria-current="page"] { color: var(--acc); font-weight: 700; background: var(--acc-dim); }

.bar-end { display: flex; align-items: center; gap: 0.65rem; margin-left: auto; flex: none; }

/* ── the live pill ──────────────────────────────────────────── */

/* Hidden until mc.js has a real number: a server site that says
   "線上 0" because a fetch failed is worse than one that says
   nothing. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.8rem 0.32rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.live[hidden] { display: none; }

.live-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--live);
  /* A solid ring, not a blurred glow. */
  box-shadow: 0 0 0 4px var(--live-ring);
  animation: live-beat 2.4s ease-in-out infinite;
}

@keyframes live-beat {
  0%, 100% { box-shadow: 0 0 0 3px var(--live-ring); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

.live-n { font-family: var(--mono); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* In the hero it is bigger and sits on the photograph. */
.hero .live {
  padding: 0.4rem 1rem 0.45rem;
  font-size: 0.9375rem;
  background: rgba(7, 7, 10, .55);
  border-color: rgba(255, 255, 255, .16);
  color: #d8dae2;
}

.hero .live-n { color: #fff; }

/* ── buttons ────────────────────────────────────────────────── */

/* .btn is the amber key: two stops and a hard offset shadow, and it
   presses down into that shadow instead of glowing. .btn-ghost is the
   same shape outlined, for anything secondary. */
.btn, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.62rem 1.25rem 0.68rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .16s, border-color .16s, color .16s;
}

.btn {
  color: var(--acc-ink);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo));
  box-shadow: 0 3px 0 var(--acc-sh);
}

.btn:hover { color: var(--acc-ink); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 0 var(--acc-sh); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--acc-sh); }

.btn-ghost {
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--edge-2);
}

.btn-ghost:hover { color: var(--ink); text-decoration: none; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--ink-3); }
.btn-ghost:active { transform: translateY(1px); }

.btn svg, .btn-ghost svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

.btn-sm { padding: 0.42rem 0.9rem 0.46rem; font-size: 0.875rem; }
.bar .btn-ghost svg { width: 17px; height: 17px; }

/* ── the 日／夜 switch ──────────────────────────────────────── */

/* A segmented control, not an icon button: both states are named and
   the knob says which one you are in. Its resting position is set by
   the palette rules below rather than by script, so it is never
   briefly on the wrong side. */
.switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  width: 4.5rem;
  flex: none;
  padding: 3px;
  font: inherit;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  cursor: pointer;
}

.switch-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--panel-2);
  border: 1px solid var(--edge-2);
  border-radius: var(--r-pill);
  transition: transform .3s cubic-bezier(.34, 1.28, .64, 1);
}

.switch span:not(.switch-knob) {
  position: relative;
  z-index: 1;
  padding: 0.18rem 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
  transition: color .2s;
}

.switch .s-night { color: var(--ink); font-weight: 700; }
.switch-knob { transform: translateX(100%); }

:root[data-theme="light"] .switch-knob { transform: translateX(0); }
:root[data-theme="light"] .switch .s-day { color: var(--ink); font-weight: 700; }
:root[data-theme="light"] .switch .s-night { color: var(--ink-3); font-weight: 400; }

/* ── the hero ───────────────────────────────────────────────── */

/* The whole point of the page is the address, so the address is the
   largest object on it and the world sits behind, dimmed until it is
   scenery rather than subject. No label above the name — the name is
   the first thing on the page. */
.hero {
  position: relative;
  margin-top: calc(var(--bar) * -1);
  padding: calc(var(--bar) + 7rem) 0 5.5rem;
  isolation: isolate;
}

.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg picture { display: block; width: 100%; height: 100%; }

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  background: var(--hold);
}

/* Gradient 1 of 2: photograph → page colour, so the type at the
   bottom sits on solid --bg and the seam into the next section is
   invisible. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 7, 10, .36) 0%, rgba(7, 7, 10, .6) 45%, var(--bg) 100%),
    linear-gradient(90deg, rgba(7, 7, 10, .62) 0%, rgba(7, 7, 10, .12) 58%, transparent 100%);
}

:root[data-theme="light"] .hero-bg::after {
  background:
    linear-gradient(180deg, rgba(8, 8, 10, .3) 0%, rgba(8, 8, 10, .5) 45%, var(--bg) 100%),
    linear-gradient(90deg, rgba(8, 8, 10, .55) 0%, rgba(8, 8, 10, .1) 58%, transparent 100%);
}

.hero-in { position: relative; max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }

.hero h1 { font-size: clamp(2.6rem, 7vw, 4.75rem); color: #fff; }

.hero .sub {
  margin-top: 1rem;
  max-width: 32em;
  font-size: 1.0625rem;
  color: #ccced8;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

.bar-sentinel {
  position: relative;
  top: calc(var(--bar) * -1);
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none;
}

/* ── the address ────────────────────────────────────────────── */

/* One ring on the site and nothing else may use it. The whole block
   is the copy button; the amber lozenge inside it is what the eye
   lands on. */
.addr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 42rem;
  margin-top: 2rem;
  padding: 1.1rem 1.2rem 1.15rem 1.6rem;
  text-align: left;
  font: inherit;
  color: inherit;
  background: rgba(7, 7, 10, .58);
  border: 2px solid rgba(255, 255, 255, .5);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: border-color .18s, background .18s;
}

.addr:hover { border-color: var(--acc); background: rgba(7, 7, 10, .72); }

.addr-str {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.6vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #fff;
  word-break: break-all;
}

/* The copy affordance is a real button face, not a hint — it is the
   single most-clicked thing on any server site. */
.addr-do {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  padding: 0.45rem 1rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--acc-ink);
  background: linear-gradient(180deg, var(--acc-hi), var(--acc-lo));
  border-radius: var(--r-2);
  box-shadow: 0 3px 0 var(--acc-sh);
  transition: transform .12s, box-shadow .12s;
}

.addr:active .addr-do { transform: translateY(3px); box-shadow: 0 0 0 var(--acc-sh); }
.addr-do svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.addr.is-done .addr-do svg { display: none; }

/* The small copy on the bar, for the three pages with no hero. */
.addr-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.34rem;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .16s, color .16s;
}

.addr-mini:hover { border-color: var(--acc); color: var(--ink); }
.addr-mini .addr-str { font-size: 0.8125rem; letter-spacing: 0; color: var(--ink); word-break: normal; }
.addr-mini.is-done { border-color: var(--acc); }
.addr-mini.is-done .addr-label { color: var(--acc); font-weight: 700; }

/* ── the page head on the other three pages ─────────────────── */

.phead {
  margin-top: calc(var(--bar) * -1);
  padding: calc(var(--bar) + 3.25rem) 0 3rem;
  background: var(--bg-2);
  border-bottom: 1px solid var(--edge);
}

.phead h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.phead .sub { margin-top: 1rem; font-size: 1.0625rem; max-width: 40em; }

/* ── the stat strip ─────────────────────────────────────────── */

.stats-band { background: var(--bg-2); border-bottom: 1px solid var(--edge); }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--pad);
  list-style: none;
}

.stats > * { min-width: 0; padding: 1.3rem 1.5rem 1.4rem; border-left: 1px solid var(--edge); }
.stats > *:first-child { border-left: 0; padding-left: 0; }

.stat-k { display: block; font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.06em; color: var(--ink-3); }

.stat-v {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

.stat-v .u { font-family: var(--sans); font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); margin-left: 0.35rem; }

/* ── sections ───────────────────────────────────────────────────
   The two-column editorial grid that replaced the kicker labels: the
   heading holds the left column and stays put while you read the
   right one, so you always know which section you are in without a
   label having to tell you. */

.sec, .feature-in {
  display: grid;
  grid-template-columns: minmax(0, var(--col)) minmax(0, 1fr);
  gap: 0 var(--gut);
}

.sec {
  margin-top: 4.5rem;
  padding-top: 3.25rem;
  border-top: 1px solid var(--edge);
}

.sec > h2, .feature-in > h2 {
  position: sticky;
  top: calc(var(--bar) + 2rem);
  align-self: start;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
}

.sec-b { min-width: 0; }
.sec-b > :first-child { margin-top: 0; }
.sec-b h3 { margin-top: 2.25rem; font-size: 1.0625rem; letter-spacing: -0.015em; }
.sec-b h3 + p { margin-top: 0.6rem; }
.sec-b > p { margin-top: 1.1rem; }

.sec-last { padding-bottom: 5rem; }

/* The caution sections. The badge rides the section heading, which is
   why these need no box around the copy. */
.sec-warn > h2::before {
  content: "注意";
  display: inline-block;
  margin-right: 0.6rem;
  padding: 0.08rem 0.65rem 0.13rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--acc-flat);
  background: var(--acc);
  border-radius: var(--r-pill);
  vertical-align: 0.2em;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 1.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--acc);
  text-decoration-color: transparent;
}

.link:hover { text-decoration-color: currentColor; }
.link::after { content: "\2192"; }

/* ── the feature band (the grave, the headline system) ──────── */

/* A full-bleed band rather than a card: it is a chapter of the page,
   not an object sitting on it. */
.feature {
  background: var(--bg-2);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  padding: 4rem 0 4.5rem;
}

.feature-in { max-width: var(--page); margin: 0 auto; padding: 0 var(--pad); }
.feature-in > h2 { font-size: clamp(1.55rem, 2.9vw, 2.15rem); }
.feature-b { min-width: 0; }
.feature-b > :first-child { margin-top: 0; }
.feature-b code { background: var(--panel); }

/* ── the timeline ───────────────────────────────────────────── */

/* The grave's four moments. A ruled line with the times sitting on
   it — a timeline, not four tiles. */
.beats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.beats::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0.72em;
  height: 2px;
  background: var(--edge-2);
}

.beats > li { position: relative; min-width: 0; padding-right: 1.25rem; }
.beats > li:last-child { padding-right: 0; }

.beat-n {
  position: relative;
  display: inline-block;
  padding-right: 0.7rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  /* The band's own colour, so the time cuts the rule behind it. */
  background: var(--bg-2);
}

.beat-t { display: block; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--ink-2); }

/* ── ruled rows: what used to be a wall of cards ────────────── */

/* Features, rules — anything that used to be a grid of boxes is a
   list of rows on hairlines. The row itself is the object; the amber
   only appears when you point at one. */
.rows { display: grid; margin: 2rem 0 0; padding: 0; list-style: none; }

.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 2rem;
  align-items: baseline;
  padding: 1.35rem 0 1.45rem;
  border-top: 1px solid var(--edge);
  transition: border-color .16s;
}

.rows > li:first-child { border-top: 0; padding-top: 0; }
.rows > li:last-child { border-bottom: 1px solid var(--edge); }
.rows > li:hover { border-top-color: var(--acc); }
.rows > li:first-child:hover { border-top-color: transparent; }

.rows h3 { grid-column: 1; margin: 0; font-size: 1.0625rem; transition: color .16s; }
.rows > li:hover h3 { color: var(--acc); }
.rows p { grid-column: 1; margin-top: 0.4rem; font-size: 0.9375rem; }
.rows p + p { margin-top: 0.7rem; }

.rows .link {
  grid-row: 1;
  grid-column: 2;
  margin-top: 0;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* ── the two .key boxes on the whole site ───────────────────── */

/* Square corners and an amber top rule, so on the two occasions the
   page does put a box around something it does not look like the
   generic rounded card it spent the rest of its length avoiding. */
.key {
  margin-top: 2rem;
  padding: 1.5rem 1.7rem 1.65rem;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top: 3px solid var(--acc);
  box-shadow: var(--shadow);
}

.key > h3 { margin: 0; font-size: 1.0625rem; }
.key > h3 + p { margin-top: 0.6rem; }
.key > p { max-width: 46em; }
.key code { background: var(--panel-2); }

/* ── caution copy ───────────────────────────────────────────── */

/* An amber rule down the side. No fill, no border, no radius — the
   heading above it already carries the 注意 badge. */
.caution { margin-top: 2rem; padding-left: 1.6rem; border-left: 3px solid var(--acc); }
.caution > :first-child { margin-top: 0; }
.caution ul { margin: 0; padding: 0; list-style: none; }

.caution li {
  position: relative;
  padding-left: 1.2rem;
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
  max-width: var(--read);
}

/* A short amber tick, not a bullet. */
.caution li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 10px;
  height: 2px;
  background: var(--acc);
}

/* ── two ruled columns (Java / Bedrock) ─────────────────────── */

.two { display: grid; grid-template-columns: 1fr 1fr; margin-top: 2rem; }
.two > div { min-width: 0; padding-right: 2.5rem; }
.two > div + div { padding-right: 0; padding-left: 2.5rem; border-left: 1px solid var(--edge); }
.two h3 { margin: 0 0 0.6rem; font-size: 1.0625rem; }

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }

.steps li {
  position: relative;
  counter-increment: step;
  padding-left: 1.9rem;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink-2);
}

/* The step number is the one thing here that is genuinely ordered, so
   it is the one place a numeral is allowed — bare, no box. */
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

/* ── flow (the grave timeline: the times really are data) ───── */

.flow { display: grid; margin: 2rem 0 0; padding: 0; list-style: none; }

.flow > li {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0 1.5rem;
  padding: 1.2rem 0 1.3rem;
  border-top: 1px solid var(--edge);
}

.flow > li:first-child { border-top: 0; padding-top: 0; }
.flow > li:last-child { border-bottom: 1px solid var(--edge); }

.flow-t {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.flow-b { min-width: 0; }
.flow-b b { display: block; font-weight: 700; font-size: 1rem; line-height: 1.75; color: var(--ink); }
.flow-b p { margin-top: 0.2rem; font-size: 0.9375rem; }

/* ── command chips ─────────────────────────────────────────── */

/* The rank pages list a lot of commands at once. A bulleted list of
   sixteen of them is a wall; a flowing row of the code chips the page
   already uses everywhere reads as one object you can scan. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chips li { display: block; }
.chips code { font-size: 0.875rem; padding: 0.2em 0.6em; }

/* ── the spec list ──────────────────────────────────────────── */

.spec { display: grid; margin: 2rem 0 0; padding: 0; list-style: none; }
.spec > li { padding: 0.95rem 0 1rem; border-top: 1px solid var(--edge); font-size: 0.9375rem; color: var(--ink-2); }
.spec > li:first-child { border-top: 0; padding-top: 0; }
.spec > li:last-child { border-bottom: 1px solid var(--edge); }
.spec b { color: var(--ink); font-weight: 700; }

/* ── tables, unboxed ────────────────────────────────────────── */

.table-scroll { margin-top: 2rem; overflow-x: auto; }

table { width: 100%; min-width: 26rem; border-collapse: collapse; font-size: 0.9375rem; }

th {
  text-align: left;
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding: 0 1.5rem 0.6rem 0;
  border-bottom: 1px solid var(--edge-2);
  white-space: nowrap;
}

td { padding: 0.8rem 1.5rem 0.8rem 0; border-top: 1px solid var(--edge); color: var(--ink-2); vertical-align: baseline; }
th:last-child, td:last-child { padding-right: 0; }
td:first-child { font-family: var(--mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
td:first-child .arg { color: var(--ink-3); }
.row-key td:first-child { color: var(--acc); }

/* Four columns are wider than a phone. .table-scroll already scrolls;
   a cut-off column on its own does not tell anyone that, and a fade would
   be a third gradient. A sentence costs nothing and is unambiguous. */
.scroll-hint { display: none; margin-top: 0.7rem; font-size: 0.8125rem; color: var(--ink-3); }
@media (max-width: 48rem) { .scroll-hint { display: block; } }

/* A comparison table scans by contrast, not by colour: what a tier HAS
   is at full strength and what it lacks is dimmed, so the shape of the
   difference is visible before you read a word. Spending the amber here
   would make a data cell look like an action. */
.tcmp td { color: var(--ink); }
.tcmp .off { color: var(--ink-3); }

/* ── the command detail list ────────────────────────────────── */

.cmds { display: grid; margin: 2rem 0 0; }
.cmd { padding: 1.6rem 0 1.75rem; border-top: 1px solid var(--edge); }
.cmd:first-child { border-top: 0; padding-top: 0; }
.cmd:last-child { border-bottom: 1px solid var(--edge); }

.cmd h3 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  word-break: break-all;
}

.cmd h3 .arg { color: var(--ink-3); }
.cmd p { margin-top: 0.6rem; font-size: 0.9375rem; }
.cmd .eg { margin-top: 0.8rem; font-size: 0.875rem; color: var(--ink-3); }

/* ── faq ────────────────────────────────────────────────────── */

.faq { display: grid; margin: 2rem 0 0; }
.qa { padding: 1.25rem 0 1.4rem; border-top: 1px solid var(--edge); }
.qa:first-child { border-top: 0; padding-top: 0; }
.qa:last-child { border-bottom: 1px solid var(--edge); }
.qa h3 { margin: 0; font-size: 1rem; }
.qa p { margin-top: 0.45rem; font-size: 0.9375rem; }

/* ── pictures ───────────────────────────────────────────────── */

.shot { margin: 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hold);
  border-radius: var(--r-img);
}

.shot figcaption { margin-top: 0.85rem; font-size: 0.8125rem; line-height: 1.8; color: var(--ink-3); }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.shots .shot-wide { grid-column: 1 / -1; }

.more { margin-top: 2rem; font-size: 0.9375rem; }
.more a { font-weight: 700; color: var(--acc); text-decoration-color: transparent; }
.more a:hover { text-decoration-color: currentColor; }
.more a::after { content: "\00a0\2197"; }

/* ── the join band ──────────────────────────────────────────── */

.band { padding: 3.5rem 0 3.75rem; background: var(--bg-2); border-top: 1px solid var(--edge); }
.band h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
.band p { margin-top: 1.1rem; }
.band .btn { margin-top: 1.75rem; }

/* ── foot ───────────────────────────────────────────────────── */

.foot { background: var(--bg-2); border-top: 1px solid var(--edge); }

.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  max-width: var(--page);
  margin: 0 auto;
  padding: 3rem var(--pad) 3.25rem;
}

.foot-brand .brand { font-size: 1rem; }
.foot-addr { display: block; margin-top: 0.9rem; font-family: var(--mono); font-size: 0.9375rem; color: var(--ink-2); }
.foot-note { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.8; color: var(--ink-3); }

.foot-col h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-3); }
.foot-col ul { margin: 0.7rem 0 0; padding: 0; list-style: none; }
.foot-col li { margin-top: 0.3rem; }
.foot-col a { font-size: 0.9375rem; color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--acc); text-decoration: underline; }

/* ── narrow ─────────────────────────────────────────────────── */

@media (max-width: 74rem) {
  :root { --col: 13rem; --gut: 2.5rem; }
}

@media (max-width: 64rem) {
  :root { --pad: 1.75rem; --page: 100%; }

  /* The heading column cannot hold a heading and a paragraph side by
     side any more, so it lies down on top of the content and stops
     being sticky. */
  .sec, .feature-in { grid-template-columns: minmax(0, 1fr); gap: 1.25rem 0; }
  .sec > h2, .feature-in > h2 { position: static; }

  .stats { grid-template-columns: 1fr 1fr; }
  .stats > * { border-left: 1px solid var(--edge); border-top: 1px solid var(--edge); }
  .stats > *:nth-child(-n+2) { border-top: 0; }
  .stats > *:nth-child(odd) { border-left: 0; padding-left: 0; }
  .beats { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; }
  .beats::before { display: none; }
  .beat-n { background: none; }
  .shots { grid-template-columns: 1fr; gap: 1.75rem; }
  .foot-in { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  /* The bar goes to two rows: the mark and the controls on the first,
     the nav on the second as a horizontally scrollable strip. No
     hamburger drawer — one less script and one less stock UI. */
  .bar-in { flex-wrap: wrap; height: auto; padding-top: 0.55rem; padding-bottom: 0; gap: 0.75rem; row-gap: 0; }
  .bar-in > .brand { order: 1; }
  .bar-end { order: 2; gap: 0.5rem; }
  .bar-nav {
    order: 3;
    width: 100%;
    margin: 0 calc(var(--pad) * -1);
    padding: 0.35rem var(--pad) 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .bar-nav::-webkit-scrollbar { display: none; }
  .bar .live, .bar .btn-ghost span, .bar .addr-mini { display: none; }
  .bar .btn-ghost { padding: 0.42rem 0.55rem 0.46rem; }

  :root { --bar: 5.75rem; }

  .hero { padding-top: calc(var(--bar) + 3.5rem); padding-bottom: 3rem; }
  .phead { padding-top: calc(var(--bar) + 2rem); }

  .two { grid-template-columns: 1fr; }
  .two > div { padding-right: 0; }
  .two > div + div { margin-top: 2rem; padding-top: 2rem; padding-left: 0; border-left: 0; border-top: 1px solid var(--edge); }
}

@media (max-width: 34rem) {
  :root { --pad: 1.1rem; }

  body { font-size: 15px; }

  .stats, .beats { grid-template-columns: 1fr; }
  .stats > * { border-left: 0; padding-left: 0; }
  .stats > *:first-child { border-top: 0; }
  .stats > *:nth-child(2) { border-top: 1px solid var(--edge); }
  .addr { padding: 1rem 1.1rem 1.1rem 1.2rem; }
  .addr-do { width: 100%; justify-content: center; }
  .key { padding: 1.3rem 1.25rem 1.4rem; }
  .caution { padding-left: 1.2rem; }
  .flow > li { grid-template-columns: 1fr; gap: 0.15rem; }
  .rows > li { grid-template-columns: 1fr; }
  .rows .link { grid-row: auto; grid-column: 1; margin-top: 0.5rem; }
  .sec { margin-top: 3.25rem; padding-top: 2.5rem; }
  .foot-in { grid-template-columns: 1fr; gap: 1.75rem; }
  .hero-cta { gap: 0.75rem; }
  .hero-cta .btn, .hero-cta .btn-ghost { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── print ──────────────────────────────────────────────────── */

@media print {
  /* Dark is the base palette, so printing has to be handed the light
     one explicitly or the ink comes out white on white. */
  :root {
    color-scheme: light;
    --bg: #fff; --bg-2: #fff; --panel: #fff; --panel-2: #f4f4f4;
    --edge: #ccc; --edge-2: #bbb;
    --ink: #000; --ink-2: #333; --ink-3: #555;
    --acc: #8a4d0d; --acc-ink: #1a1206; --acc-flat: #fff; --acc-dim: #f0e6da;
    --shadow: none; --hold: #eee;
  }
  body { background: #fff; font-size: 11pt; }
  .bar, .switch, .live, .foot-col, .hero-bg { display: none; }
  .hero, .phead { margin-top: 0; padding-top: 1rem; background: #fff; }
  .hero h1, .hero .sub { color: #000; }
  .addr { background: none; border-color: #000; }
  .addr-str { color: #000; }
  .addr-do { display: none; }
  .btn, .btn-ghost { border: 1px solid #999; color: #000; background: none; box-shadow: none; }
  .sec > h2, .feature-in > h2 { position: static; }
  .sec, .cmd, .rows li, .qa, .flow li { break-inside: avoid; }
}