:root {
  color-scheme: dark;
  --bg: #050507;
  --surface: #0d0d12;
  --surface-2: #121219;
  --line: rgba(255,255,255,.14);
  --text: #f3f1ed;
  --soft: rgba(243,241,237,.6);
  --faint: rgba(243,241,237,.36);
  --gold: #ffd479;
  --pink: #ff5c98;
  --mint: #5eead4;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 82% 8%, rgba(255,212,121,.06), transparent 27%),
    radial-gradient(circle at 13% 72%, rgba(255,92,152,.045), transparent 31%),
    var(--bg);
  font-family: "Songti SC", "Noto Serif SC", "STSong", serif;
}

button, a { color: inherit; font: inherit; }
a { text-decoration: none; }

.shell {
  width: min(1420px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding:
    max(22px, env(safe-area-inset-top))
    max(26px, env(safe-area-inset-right))
    max(34px, env(safe-area-inset-bottom))
    max(26px, env(safe-area-inset-left));
}

@media (min-width: 1061px) and (min-height: 700px) {
  .shell {
    display: grid;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .intro {
    padding: clamp(18px, 2.7vh, 30px) 0 clamp(16px, 2.2vh, 24px);
  }

  .intro h2 {
    font-size: clamp(32px, 3.1vw, 48px);
  }

  .groups {
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .group {
    min-height: 0;
    padding: 15px 18px;
  }

  .checkpoint {
    min-height: 0;
    padding-top: 13px;
    padding-bottom: 12px;
  }

  .checkpoint .tag {
    margin-bottom: 7px;
  }

  .checkpoint strong {
    margin-bottom: 4px;
  }
}

.topbar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.back {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: sans-serif;
  font-size: 28px;
  line-height: 1;
}

.heading p {
  margin: 0 0 5px;
  color: var(--gold);
  font: 11px/1.2 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .28em;
}

.heading h1 {
  margin: 0;
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
}

.reset {
  min-height: 44px;
  padding: 0 17px;
  color: var(--soft);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.back:hover, .back:focus-visible,
.reset:hover, .reset:focus-visible {
  color: var(--gold);
  border-color: rgba(255,212,121,.55);
  outline: none;
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  align-items: end;
  gap: 34px;
  padding: clamp(28px, 5vw, 66px) 0 clamp(24px, 4vw, 42px);
}

.step {
  display: inline-block;
  margin-bottom: 13px;
  color: var(--pink);
  font-size: 13px;
  letter-spacing: .16em;
}

.intro h2 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(30px, 4.5vw, 60px);
  font-weight: 500;
  line-height: 1.15;
}

.intro p {
  max-width: 510px;
  margin: 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.8;
}

.groups {
  display: grid;
  gap: 18px;
}

.group {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 22px;
  padding: 22px;
  background: rgba(8,8,11,.72);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.group > header {
  display: grid;
  align-content: start;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
}

.group > header > span {
  padding-top: 5px;
  color: var(--gold);
  font: 12px/1 ui-monospace, "SFMono-Regular", monospace;
  letter-spacing: .12em;
}

.group h3 {
  margin: 0 0 8px;
  font-size: 23px;
  font-weight: 600;
}

.group header p {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.6;
}

.checkpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.checkpoint {
  position: relative;
  display: grid;
  min-height: 132px;
  align-content: start;
  padding: 17px 46px 16px 17px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.checkpoint.featured { background: linear-gradient(145deg, rgba(255,212,121,.09), var(--surface) 58%); }
.checkpoint:hover, .checkpoint:focus-visible {
  transform: translateY(-2px);
  background-color: var(--surface-2);
  border-color: rgba(255,212,121,.48);
  outline: none;
}

.checkpoint .tag {
  width: max-content;
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .12em;
}

.checkpoint strong {
  margin-bottom: 7px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
}

.checkpoint small {
  color: var(--soft);
  font-size: 12px;
  line-height: 1.55;
}

.checkpoint i {
  position: absolute;
  right: 16px;
  top: 50%;
  color: var(--faint);
  font: normal 22px/1 sans-serif;
  transform: translateY(-50%);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 5;
  padding: 12px 18px;
  color: #08080b;
  background: var(--gold);
  border-radius: 999px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 1061px) {
  .main-flow-page .shell {
    width: min(1580px, 100%);
    display: grid;
    min-height: 100dvh;
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .main-flow-page .intro {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
    align-items: center;
    padding: clamp(30px, 5vh, 54px) 0 clamp(24px, 4vh, 38px);
  }

  .main-flow-page .intro h2 {
    max-width: 720px;
    font-size: clamp(34px, 3.1vw, 50px);
    line-height: 1.2;
  }

  .main-flow-page .groups {
    display: grid;
    grid-template-rows: none;
    gap: 14px;
    min-height: 0;
  }

  .main-flow-page .group {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    min-height: 0;
    padding: 18px;
  }

  .main-flow-page .group > header {
    align-content: center;
    padding-right: 20px;
    border-right: 1px solid var(--line);
  }

  .main-flow-page .checkpoints {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }

  .main-flow-page .stage-single .checkpoints {
    grid-template-columns: 1fr;
  }

  .main-flow-page .checkpoint {
    min-height: 132px;
    align-content: center;
    padding: 18px 44px 16px 18px;
  }
}

@media (min-width: 1061px) and (max-width: 1280px) {
  .main-flow-page .group {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .main-flow-page .group > header {
    padding-right: 14px;
  }

  .main-flow-page .checkpoint {
    padding-left: 15px;
    padding-right: 34px;
  }

  .main-flow-page .checkpoint strong {
    font-size: 15px;
  }

  .main-flow-page .checkpoint small {
    font-size: 11px;
  }
}

@media (min-width: 1061px) {
  .entertainment-debug-page .shell {
    width: min(1580px, 100%);
    display: block;
    height: auto;
    min-height: 100dvh;
  }

  .entertainment-debug-page .intro {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
    align-items: center;
    padding: clamp(28px, 4vh, 44px) 0 clamp(22px, 3vh, 32px);
  }

  .entertainment-debug-page .intro h2 {
    max-width: 720px;
    font-size: clamp(34px, 3.2vw, 50px);
    line-height: 1.2;
  }

  .entertainment-debug-page .groups {
    display: grid;
    grid-template-rows: none;
    gap: 14px;
  }

  .entertainment-debug-page .group {
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    min-height: 0;
    padding: 18px;
  }

  .entertainment-debug-page .group > header {
    align-content: center;
    padding-right: 18px;
    border-right: 1px solid var(--line);
  }

  .entertainment-debug-page .checkpoints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }

  .entertainment-debug-page .checkpoint {
    min-height: 146px;
    padding: 18px 42px 16px 18px;
  }
}

@media (max-width: 1060px) {
  .group { grid-template-columns: 190px minmax(0, 1fr); }
  .checkpoints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .shell { padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .topbar { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding-bottom: 12px; }
  .back { width: 42px; height: 42px; }
  .heading p { display: none; }
  .heading h1 { font-size: 23px; }
  .reset { min-height: 42px; padding: 0 12px; font-size: 12px; }
  .intro { display: block; padding: 28px 0 22px; }
  .intro h2 { font-size: 32px; }
  .intro p { margin-top: 14px; }
  .group { grid-template-columns: 1fr; padding: 17px; }
  .group > header { grid-template-columns: 30px minmax(0, 1fr); }
  .checkpoints { grid-template-columns: 1fr; }
  .checkpoint { min-height: 112px; }
}

@media (orientation: landscape) and (max-height: 430px) {
  body { min-height: 100dvh; }
  .shell { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .topbar { position: sticky; top: 0; z-index: 3; padding: 5px 0 8px; background: rgba(5,5,7,.94); backdrop-filter: blur(12px); }
  .back { width: 44px; height: 44px; }
  .heading h1 { font-size: 21px; }
  .intro { grid-template-columns: 1fr 1fr; padding: 16px 0; }
  .intro h2 { font-size: 26px; }
  .intro p { font-size: 12px; line-height: 1.55; }
  .step { margin-bottom: 6px; font-size: 10px; }
  .group { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .group h3 { font-size: 17px; }
  .group header p { font-size: 11px; }
  .checkpoints { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .checkpoint { min-height: 96px; padding: 10px 31px 9px 10px; }
  .checkpoint .tag { margin-bottom: 5px; font-size: 9px; }
  .checkpoint strong { margin-bottom: 3px; font-size: 13px; }
  .checkpoint small { font-size: 9px; line-height: 1.35; }
  .checkpoint i { right: 10px; }

  .main-flow-page .intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    gap: 24px;
  }

  .main-flow-page .intro h2 {
    max-width: 480px;
    font-size: 26px;
  }

  .main-flow-page .group {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .main-flow-page .group > header {
    display: grid;
    grid-template-columns: 28px 126px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .main-flow-page .group > header .index,
  .main-flow-page .group > header h3,
  .main-flow-page .group > header p {
    margin: 0;
  }

  .main-flow-page .checkpoints {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .main-flow-page .stage-single .checkpoints {
    grid-template-columns: 1fr;
  }

  .main-flow-page .checkpoint {
    min-height: 90px;
    padding: 10px 34px 10px 12px;
  }

  .main-flow-page .checkpoint strong {
    font-size: 14px;
  }

  .main-flow-page .checkpoint small {
    font-size: 10px;
  }

  .entertainment-debug-page .intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    gap: 24px;
  }

  .entertainment-debug-page .group {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .entertainment-debug-page .group > header {
    display: grid;
    grid-template-columns: 28px 126px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--line);
  }

  .entertainment-debug-page .group > header h3,
  .entertainment-debug-page .group > header p {
    margin: 0;
  }

  .entertainment-debug-page .checkpoints {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .entertainment-debug-page .checkpoint {
    min-height: 94px;
    padding: 10px 30px 10px 11px;
  }

  .entertainment-debug-page .checkpoint strong {
    font-size: 13px;
  }

  .entertainment-debug-page .checkpoint small {
    font-size: 9px;
  }
}