.field-guide {
  --guide-ink: #f3f5ff;
  --guide-copy: #c8cede;
  --guide-muted: #aab4ca;
  --guide-line: #343c50;
  --guide-lime: var(--lime, #c5ff50);
  --guide-cyan: var(--cyan, #68e5fa);
  --guide-display: var(--display, "Chakra Petch", sans-serif);
  --guide-mono: var(--mono, ui-monospace, monospace);
  width: min(100%, 1360px);
  min-width: 0;
  margin-inline: auto;
  padding-block: clamp(16px, 2.5vw, 34px) clamp(40px, 7vw, 90px);
  color: var(--guide-ink);
  font-family: var(--sans, "Space Grotesk", sans-serif);
}
.field-guide *,
.field-guide *::before,
.field-guide *::after { box-sizing: border-box; }
.field-guide :where(h1, h2, h3, p, ol, ul, dl, dt, dd) { margin: 0; }
.field-guide a:focus-visible { outline: 2px solid var(--guide-lime); outline-offset: 4px; }

.guide-cover {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(0, .83fr);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #454b65;
  border-inline-start: 3px solid var(--guide-lime);
  background:
    radial-gradient(ellipse at 88% 32%, #34325d 0, #1a2038 29%, transparent 65%),
    linear-gradient(115deg, #0d1120 8%, #111827 64%, #121629);
}
.guide-cover::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 46%;
  pointer-events: none;
  background-image: linear-gradient(#8ab9ff16 1px, transparent 1px), linear-gradient(90deg, #8ab9ff16 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: linear-gradient(105deg, transparent, #000 52%);
}
.guide-intro {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(26px, 4vw, 62px);
  padding-inline-end: clamp(8px, 2vw, 30px);
}
.guide-cover.guide-cover-anatomy{display:block}
.guide-cover-anatomy .guide-intro{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 18px;padding:clamp(10px,1.5vw,20px)}
.guide-cover-anatomy .guide-intro h1{margin:0;font-size:clamp(28px,3.6vw,44px)}
.guide-cover-anatomy .guide-switch{margin:0}
.guide-board,.guide-battle-example{margin:20px 0;padding:clamp(12px,2vw,20px);border:1px solid #42605e;background:linear-gradient(130deg,#102020,#101423)}
.guide-board figcaption,.guide-battle-example figcaption{margin-bottom:12px;font:650 14px/1.4 var(--guide-display);color:#caff96}
.guide-board-zones{display:grid;grid-template-columns:1fr minmax(0,2.6fr) 1fr;gap:6px}
.guide-board-zones>div{display:grid;align-content:start;justify-items:center;gap:6px;min-width:0;padding:6px 2px;border:1px dashed #52646d}
.guide-board-zones b,.guide-battle-example>div span{font:600 clamp(11px,2.5vw,13px)/1.3 var(--guide-display);text-align:center}
.guide-board-zones img{width:auto;max-width:100%;height:clamp(54px,12vw,76px);object-fit:contain;border-radius:4px}
.guide-console{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.guide-board-zones small{font:500 10px/1.3 var(--guide-mono);color:#b6cbca;text-align:center}
.guide-board-zones .guide-character-zone{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:5px 12px}.guide-character-zone>span{color:var(--guide-cyan);font-family:var(--guide-mono)}
.guide-battle-example>div{display:flex;align-items:center;justify-content:space-around;gap:4px;margin-bottom:12px}
.guide-battle-example>div strong{display:block;margin-top:4px;color:var(--guide-cyan);font:700 clamp(21px,5vw,34px)/1 var(--guide-display)}
.guide-battle-example>div i{font-style:normal;color:#a9b7c8}
.guide-kicker,
.guide-eyebrow,
.guide-index > strong {
  font: 650 .69rem/1.45 var(--guide-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.guide-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--guide-lime); }
.guide-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.guide-intro h1 {
  max-width: 13ch;
  margin: 11px 0 14px;
  color: #fafbff;
  font: italic 750 clamp(2.5rem, 5.25vw, 5rem)/.99 var(--guide-display);
  letter-spacing: -.05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.guide-intro > p {
  max-width: 54ch;
  color: var(--guide-copy);
  font-size: clamp(.94rem, 1.18vw, 1.075rem);
  line-height: 1.55;
}
.guide-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.guide-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-width: 100%;
  padding: 7px 16px;
  border: 1px solid #69748b;
  border-radius: 999px;
  background: #101623;
  color: #e8edf9;
  font: 600 .83rem/1.3 var(--guide-display);
  letter-spacing: .025em;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.guide-switch a[aria-current="page"] { border-color: var(--guide-lime); background: var(--guide-lime); color: #142008; }
.guide-switch a:hover:not([aria-current="page"]) { border-color: var(--guide-cyan); color: var(--guide-cyan); }

.guide-art {
  position: relative;
  align-self: stretch;
  isolation: isolate;
  min-height: clamp(245px, 23vw, 330px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.guide-art::before,
.guide-art::after {
  content: "";
  position: absolute;
  inset: 14% 3% 12% 4%;
  border: 1px solid #94c8f539;
  border-radius: 50%;
  transform: rotate(-17deg);
}
.guide-art::after { inset: 8% 21%; border-color: #ac96fa42; transform: rotate(29deg); }
.guide-art > img {
  --guide-height: clamp(148px, 13.5vw, 205px);
  --guide-x: 32%;
  --guide-y: 53%;
  --guide-turn: -14deg;
  position: absolute;
  z-index: 1;
  top: var(--guide-y);
  left: var(--guide-x);
  height: var(--guide-height);
  width: auto;
  max-width: 38%;
  aspect-ratio: 63 / 88;
  object-fit: contain;
  border-radius: var(--printed-corner, 4% / 3%);
  box-shadow: 0 8px 16px #04060ec9;
  transform: translate(-50%, -50%) rotate(var(--guide-turn));
}
.guide-art > img:nth-child(2) { --guide-x: 68%; --guide-y: 52%; --guide-turn: 15deg; }
.guide-art > img:nth-child(3) {
  --guide-height: clamp(172px, 16vw, 238px);
  --guide-x: 50%;
  --guide-y: 48%;
  --guide-turn: -3deg;
  z-index: 2;
  box-shadow: 0 12px 23px #040612c9, 0 0 0 1px #c0e9ff55;
}

.guide-body {
  display: grid;
  grid-template-columns: minmax(178px, 246px) minmax(0, 790px);
  justify-content: center;
  align-items: start;
  gap: clamp(30px, 5.7vw, 94px);
  margin: clamp(29px, 4.5vw, 66px) auto 0;
  padding-inline: clamp(0px, 1.45vw, 23px);
}
.guide-index { min-width: 0; padding-top: 14px; border-top: 2px solid var(--guide-lime); }
.guide-index > strong { display: block; margin-bottom: 12px; color: var(--guide-lime); }
.guide-index ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.guide-index summary{padding:7px 0;min-height:44px;cursor:pointer;font:650 .87rem/1.5 var(--guide-display);color:var(--guide-lime)}
.guide-index summary:focus-visible{outline:2px solid var(--guide-lime);outline-offset:3px}
.guide-unit{margin-block:clamp(36px,6vw,78px);scroll-margin-block-start:18px}
.guide-unit-title{font:italic 700 clamp(28px,5vw,48px)/1.1 var(--guide-display);color:var(--guide-ink);text-transform:uppercase}
.guide-unit>.guide-body{margin-block-start:20px}
.guide-index li + li { border-top: 1px solid #292f40; }
.guide-index a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-height: 40px;
  padding: 9px 2px;
  color: #cdd5e6;
  font-size: .88rem;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.guide-index a > span { flex: none; color: var(--guide-cyan); font: 550 .72rem/1.4 var(--guide-mono); }
.guide-index a:is(:hover, [aria-current]) { color: #fff; text-decoration: underline; text-underline-offset: .23em; }
@media (min-width: 900px) and (min-height: 735px) {
  .guide-index { position: sticky; top: 22px; }
}

.guide-chapters,
.guide-chapter,
.guide-heading > div,
.guide-prose { min-width: 0; }
.guide-chapter { padding-bottom: clamp(28px, 3.1vw, 46px); }
.guide-chapter + .guide-chapter { padding-top: clamp(28px, 3.5vw, 48px); border-top: 1px solid var(--guide-line); }
.guide-chapter:last-child { padding-bottom: 0; }
.field-guide :where([id], :target) { scroll-margin-block-start: 90px; }
.guide-heading { display: flex; align-items: flex-start; gap: clamp(12px, 1.6vw, 22px); margin-bottom: 18px; }
.guide-number {
  display: grid;
  flex: none;
  place-items: center;
  min-width: 46px;
  min-height: 44px;
  padding: 5px 8px;
  border-left: 2px solid var(--guide-cyan);
  background: linear-gradient(115deg, #203847, #192333);
  color: #a4f0ff;
  font: italic 700 1.28rem/1 var(--guide-display);
  font-variant-numeric: tabular-nums;
}
.guide-chapter:target .guide-number { border-color: var(--guide-lime); color: var(--guide-lime); }
.guide-heading .guide-eyebrow { color: var(--guide-cyan); font-size: .63rem; }
.guide-heading h3 {
  margin-top: 3px;
  color: var(--guide-ink);
  font: 650 clamp(1.5rem, 2.55vw, 2.4rem)/1.1 var(--guide-display);
  letter-spacing: -.033em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.guide-prose { max-width: 73ch; color: var(--guide-copy); font-size: clamp(.97rem, 1.16vw, 1.08rem); line-height: 1.7; overflow-wrap: anywhere; }
.guide-prose > * + * { margin-top: 13px; }
.guide-prose strong { color: #f1f5fc; font-weight: 680; }
.guide-prose a { color: #87e6fa; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.guide-prose a:hover { color: #d9ff94; }
.guide-prose :is(ol, ul) { padding-inline-start: 1.45em; }
.guide-prose li { padding-inline-start: .15em; }
.guide-prose li + li { margin-top: 6px; }
.guide-prose li::marker { color: var(--guide-cyan); font-weight: 650; }
.guide-prose dl { border-top: 1px solid #394459; }
.guide-prose dl > div { display: grid; grid-template-columns: minmax(100px, .36fr) minmax(0, 1fr); gap: 8px 21px; padding-block: 13px; border-bottom: 1px solid #30384b; }
.guide-prose dt { color: #d9f7ff; font-weight: 650; }
.guide-prose dd { margin: 0; }
.guide-example {
  padding: 16px clamp(16px, 2.1vw, 26px);
  border-inline-start: 3px solid var(--guide-lime);
  background: linear-gradient(115deg, #192622 0, #111a23 70%);
}
.guide-example > strong { color: #d1fb99; font: 650 .76rem/1.4 var(--guide-mono); letter-spacing: .07em; }
.guide-example p { margin: 5px 0 0; color: #d6dfe7; }
.guide-next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: clamp(30px, 5vw, 70px);
  padding-block: 17px;
  border-block: 1px solid var(--guide-line);
}
.guide-next a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 5px;
  color: var(--guide-lime);
  font: 650 .94rem/1.35 var(--guide-display);
  overflow-wrap: anywhere;
}
.guide-next a:first-child:not(:only-child) { margin-inline-end: auto; }
.guide-next a:hover { text-decoration: underline; text-underline-offset: .24em; }

@media (max-width: 899px) {
  .guide-body { grid-template-columns: minmax(0, 790px); gap: 28px; }
  .guide-index { padding-top: 12px; }
  .guide-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .guide-index li { border-bottom: 1px solid #292f40; }
  .guide-index li + li { border-top: 0; }
}

@media (max-width: 660px) {
  .guide-cover { grid-template-columns: minmax(0, 1fr); }
  .guide-cover::before { inset: 38% 0 0; }
  .guide-intro { padding: 22px 18px 4px; }
  .guide-intro h1 { font-size: clamp(2.35rem, 9.2vw, 3.4rem); }
  .guide-switch { margin-top: 16px; }
  .guide-art { height: clamp(140px, 31vw, 180px); min-height: 0; }
  .guide-art > img { --guide-height: clamp(87px, 19vw, 124px); --guide-x: 36%; --guide-y: 53%; max-width: 30%; }
  .guide-art > img:nth-child(2) { --guide-x: 64%; }
  .guide-art > img:nth-child(3) { --guide-height: clamp(102px, 23vw, 145px); --guide-y: 50%; }
  .guide-art::before { inset: 12% 17%; }
  .guide-art::after { inset: 7% 30%; }
  .guide-body { margin-top: 24px; padding-inline: 1px; }
  .guide-number { min-width: 37px; min-height: 37px; font-size: 1.05rem; }
  .guide-heading { margin-bottom: 13px; gap: 10px; }
  .guide-prose { line-height: 1.62; }
  .guide-prose dl > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}
@media (max-width: 420px) {
  .guide-index ol { grid-template-columns: minmax(0, 1fr); }
  .guide-cover-anatomy .guide-switch { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .guide-switch a { padding-inline: 3px; }
}
@media (max-width: 700px) {
  .guide-switch a, .guide-index a, .guide-next a { min-height: 44px; align-items: center; }
  .guide-index a { display: flex; }
  .field-guide { padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)); }
  .site-shell:has(.field-guide) { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
}
@media (prefers-reduced-motion: no-preference) {
  .guide-art > img:nth-child(3) { animation: guide-float 7s ease-in-out infinite; }
  .guide-switch a, .guide-index a { transition: color .16s, border-color .16s, background-color .16s; }
}
@keyframes guide-float { 0%, 100% { translate: 0 1px; } 50% { translate: 0 -3px; } }