.field-guide-page { --accent: #7ce0a0; }
.field-guide-page .site-header { border-color: var(--line); }
.field-guide-hero { min-height: 650px; display: grid; grid-template-columns: .93fr 1fr; align-items: center; gap: 7%; padding-top: 60px; padding-bottom: 75px; }
.guide-hero-copy { position: relative; z-index: 2; }
.guide-hero-copy .game-genre { margin-top: 27px; }
.guide-hero-copy h1 { margin: 0 0 24px; font-size: clamp(57px, 7.2vw, 85px); font-weight: 500; line-height: .95; letter-spacing: -.075em; }
.guide-hero-copy h1 em, .guide-intro h2 em, .guide-group-heading h2 em, .sealed-copy h2 em, .guide-end h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.guide-lede { max-width: 460px; margin: 0 0 15px; color: #d7d9cc; font-family: var(--serif); font-size: 19px; line-height: 1.55; }
.guide-copy { max-width: 430px; margin: 0; color: #9da69b; font-size: 12px; line-height: 1.8; }
.guide-map { min-height: 440px; position: relative; overflow: hidden; border: 1px solid #34453b; background: radial-gradient(ellipse at 47% 48%, #17593d36, transparent 40%), linear-gradient(145deg, #0d1719, #151f1b 66%, #0d1515); isolation: isolate; }
.map-grid { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(#849c8b24 1px, transparent 1px), linear-gradient(90deg, #849c8b24 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(135deg, #000, transparent 88%); }
.map-orbit { position: absolute; top: 18%; left: 17%; width: 66%; height: 62%; border: 1px solid #9de6b02b; border-radius: 50%; transform: rotate(-29deg); }
.map-orbit-two { top: 29%; left: 24%; width: 51%; height: 41%; border-color: #a3ddb02c; transform: rotate(31deg); }
.map-route { position: absolute; top: 46%; left: 20%; width: 65%; height: 2px; transform: rotate(-28deg); transform-origin: left center; background: linear-gradient(90deg, #edcd8155, #87efa9, #d6ffe2, #7ae4a0 71%, transparent); box-shadow: 0 0 12px #83e5a8; }
.map-node { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 9px; color: #a8b6a7; font-family: var(--mono); font-size: 7px; letter-spacing: .13em; white-space: nowrap; }
.map-node i { width: 12px; height: 12px; border: 1px solid #d8f9df; border-radius: 50%; background: #8fe9a7; box-shadow: 0 0 0 6px #76d99b20, 0 0 21px 8px #7ce0a055; }
.map-node-terra { left: 15%; bottom: 22%; }.map-node-terra i { background: #d7bd7d; box-shadow: 0 0 0 6px #d7bd7d20, 0 0 20px 8px #d7bd7d42; }
.map-node-signal { left: 47%; top: 26%; }.map-node-unknown { right: 9%; top: 53%; }.map-node-unknown i { background: transparent; border-style: dashed; box-shadow: none; }
.map-mapline, .map-coordinate { position: absolute; color: #87948a; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.map-mapline { top: 17px; left: 18px; }.map-coordinate { right: 18px; bottom: 17px; }
.map-stamp { position: absolute; right: 18px; top: 17px; padding: 8px 9px; transform: rotate(7deg); border: 1px solid #d5906a8c; color: #d5906a; font-family: var(--mono); font-size: 7px; line-height: 1.5; letter-spacing: .1em; text-align: center; }

.guide-intro { padding-top: 72px; padding-bottom: 54px; border-top: 1px solid var(--line); }
.guide-intro-row { display: grid; grid-template-columns: .9fr 1fr; gap: 10%; align-items: start; margin-top: 34px; }
.guide-intro h2, .guide-group-heading h2, .sealed-copy h2 { margin: 0; font-size: clamp(40px, 5vw, 58px); font-weight: 500; line-height: 1.04; letter-spacing: -.065em; }
.guide-intro-row > div > p:first-child { max-width: 500px; margin: 2px 0 18px; color: #aeb6aa; font-size: 12px; line-height: 1.8; }
.guide-warning { margin: 0; padding: 13px 15px; border-left: 2px solid #d9ad70; background: #d9ad700d; color: #d4c5a7; font-size: 10px; line-height: 1.7; }
.guide-warning span { margin-right: 8px; color: #e5bd7e; }
.guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 33px; }
.guide-index a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid #344039; color: #c9cec2; font-size: 9px; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.guide-index a:hover, .guide-index a:focus-visible { border-color: #80d99d; background: #7ce0a00c; color: #eff3e7; }
.guide-index a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-index a span { color: var(--accent); font-family: var(--mono); font-size: 8px; }
.archive-browser { margin-top: 29px; padding: 18px; border: 1px solid #344039; background: #131b17; }
.archive-search-label { display: block; margin-bottom: 8px; color: #9aa698; font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.archive-search-row { display: flex; align-items: center; gap: 15px; }
.archive-search-row input { width: min(100%, 440px); min-height: 40px; padding: 0 12px; border: 1px solid #465449; border-radius: 0; background: #0e1512; color: #e9ebde; font: inherit; font-size: 10px; }
.archive-search-row input::placeholder { color: #727e73; }.archive-search-row input:focus-visible { outline: 2px solid #8be4a3; outline-offset: 2px; border-color: transparent; }
.archive-search-row > span { color: #849084; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; white-space: nowrap; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.archive-filters button { padding: 7px 10px; border: 1px solid #39473d; background: transparent; color: #aeb6a9; font-family: var(--mono); font-size: 7px; letter-spacing: .04em; cursor: pointer; }
.archive-filters button:hover, .archive-filters button:focus-visible { border-color: #88d99a; color: #e5eedf; }
.archive-filters button[aria-pressed="true"] { border-color: #719677; background: #26382a; color: #cbf1d0; }
.archive-filters button:focus-visible { outline: 2px solid #8be4a3; outline-offset: 2px; }
.archive-noscript { margin: 12px 0 0; color: #aeb6a9; font-size: 9px; }
.guide-card[hidden], .guide-entry-group[hidden] { display: none; }
.archive-empty { margin: 0; padding: 34px 0; color: #aeb6a9; font-family: var(--serif); font-size: 19px; text-align: center; }

.guide-entries { padding-top: 24px; }
.guide-entry-group { padding: 60px 0 74px; border-top: 1px solid var(--line); scroll-margin-top: 35px; }
.guide-group-heading { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin: 31px 0 30px; }
.guide-group-heading > span { padding-bottom: 5px; color: #808b80; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; text-align: right; }
.guide-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.guide-card { overflow: hidden; border: 1px solid #354139; background: #141c18; }
.guide-card-art { height: 230px; position: relative; overflow: hidden; }
.guide-card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0e1512a8, transparent 40%); pointer-events: none; }
.art-label { position: absolute; z-index: 2; left: 16px; bottom: 14px; color: #d9ded2; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.terra-art { background: radial-gradient(circle at 78% 20%, #f2dfad 0 1px, transparent 2px), radial-gradient(circle at 14% 22%, #f2dfad 0 1px, transparent 2px), radial-gradient(circle at 36% 31%, #f2dfad 0 1px, transparent 2px), linear-gradient(180deg, #12212a, #354c48 66%, #252e25); }
.art-sun { position: absolute; top: 21%; left: 58%; width: 7px; height: 7px; border-radius: 50%; background: #abf1b5; box-shadow: 0 0 17px 9px #78d8927a; }
.art-horizon { position: absolute; left: -10%; bottom: -52%; width: 122%; height: 100%; border: 1px solid #879c7a; border-radius: 50%; background: linear-gradient(180deg, #687453, #222b23 55%); box-shadow: 0 -18px 45px #a0cf7a25; }
.art-signal { position: absolute; left: 35%; top: 36%; width: 79%; height: 2px; transform: rotate(-27deg); background: linear-gradient(90deg, transparent, #70d891, #e3ffe2, transparent); box-shadow: 0 0 14px #86e9a5; }
.art-star { position: absolute; top: 17%; left: 61%; color: #efffe2; font-size: 10px; text-shadow: 0 0 12px #a9ffc0; }
.garden-art { background: radial-gradient(circle at 22% 23%, #edcf8a 0 2px, transparent 3px), linear-gradient(180deg, #9c8a58, #c29d5d 60%, #8f824e); }
.garden-moon { position: absolute; top: 15%; right: 21%; width: 51px; aspect-ratio: 1; border-radius: 50%; background: #e8d496; box-shadow: 0 0 35px #e1c37b75; }
.garden-hill { position: absolute; bottom: -34%; width: 115%; height: 75%; border-radius: 50%; }
.hill-back { left: -27%; background: #81804d; transform: rotate(-8deg); }.hill-front { right: -32%; bottom: -46%; background: #687348; transform: rotate(9deg); }
.garden-label { color: #f5e8c4; }
.emerald-art { background: radial-gradient(ellipse at 50% 50%, #1c704952, transparent 53%), linear-gradient(140deg, #0d1821, #18211e 57%, #101917); }
.emerald-orbit { position: absolute; left: 28%; top: 14%; width: 43%; height: 70%; border: 1px solid #b1d8bb2e; border-radius: 50%; transform: rotate(45deg); }.emerald-orbit::after { content: ''; position: absolute; inset: 16% -27%; border: 1px solid #b1d8bb2a; border-radius: 50%; transform: rotate(-59deg); }
.emerald-streak { position: absolute; top: 50%; left: 4%; width: 102%; height: 3px; transform: rotate(-30deg); background: linear-gradient(90deg, transparent, #54c879, #d8ffe0 57%, #7af49d 67%, transparent); box-shadow: 0 0 13px #88f3a9, 0 0 39px #41d984; }
.emerald-core { position: absolute; top: 29%; right: 26%; width: 13px; height: 13px; border-radius: 50%; background: #eaffed; box-shadow: 0 0 20px 10px #7ff0a876; }
.deadzone-art { background: radial-gradient(ellipse at 49% 53%, #1c4034, #18211e 47%, #101715 74%); }
.deadzone-ring { position: absolute; left: 24%; top: 15%; width: 54%; height: 67%; border: 1px solid #8fa99830; border-radius: 50%; transform: rotate(28deg); }.ring-two { left: 30%; top: 23%; width: 42%; height: 49%; transform: rotate(-32deg); border-color: #95d9a330; }
.deadzone-dot { position: absolute; top: 48%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #a5e4b0; box-shadow: 0 0 17px 8px #85da9c4f; }
.vessel-art { background: radial-gradient(ellipse at 50% 58%, #84663e6e, transparent 44%), linear-gradient(150deg, #191b1c, #24231e 58%, #171a17); }
.vessel-halo { position: absolute; top: 12%; left: 39%; width: 22%; height: 78%; border: 1px solid #d5c28b50; border-radius: 50%; box-shadow: 0 0 0 21px #d5c28b08, 0 0 0 48px #d5c28b06; }
.vessel-silhouette { position: absolute; left: 44%; bottom: 10%; width: 12%; height: 54%; border-radius: 48% 48% 5% 5%; background: linear-gradient(180deg, #d3c09099, #69614988 55%, transparent); filter: blur(1px); }.vessel-silhouette::before { content: ''; position: absolute; top: -21%; left: 28%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #ded0a8bd; }
.machine-art { background: radial-gradient(ellipse at 50% 50%, #244a3c, transparent 53%), linear-gradient(140deg, #0d171a, #17231e 60%, #0c1414); }
.machine-planet { position: absolute; width: 43%; height: 74%; left: 30%; top: 12%; border: 1px solid #9fd6ac3b; border-radius: 50%; box-shadow: inset 0 0 30px #91d2a011, 0 0 30px #76c28d18; }
.machine-orbit { position: absolute; width: 83%; height: 42%; left: 8%; top: 31%; border: 1px solid #a9dfac4c; border-radius: 50%; transform: rotate(-24deg); }.machine-mark { position: absolute; top: 37%; left: 41%; color: #b8f3c4; font-family: var(--mono); font-size: 11px; letter-spacing: .11em; text-shadow: 0 0 17px #81e99b; }
.guide-card-body { padding: 19px 20px 17px; }
.guide-card-meta, .guide-card-foot { display: flex; justify-content: space-between; gap: 12px; color: #778378; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.guide-card-meta span:last-child { text-align: right; }
.guide-card h3 { margin: 16px 0 9px; color: #ece9dc; font-family: var(--serif); font-size: 25px; font-weight: 500; }
.guide-card-body > p { min-height: 73px; margin: 0; color: #a9b0a5; font-size: 10px; line-height: 1.8; }
.guide-card-foot { align-items: end; margin-top: 18px; padding-top: 12px; border-top: 1px solid #303c34; font-size: 6px; }
.guide-card-foot > span:last-child { text-align: right; }
.guide-tag { color: var(--accent); }

.sealed-file { padding-top: 68px; padding-bottom: 87px; border-top: 1px solid var(--line); scroll-margin-top: 30px; }
.sealed-layout { display: grid; grid-template-columns: .8fr 1fr; gap: 10%; align-items: center; margin-top: 35px; padding: 34px; border: 1px solid #62503b; background: radial-gradient(ellipse at top right, #a77d2422, transparent 43%), #181c18; }
.sealed-copy h2 { margin-bottom: 17px; }.sealed-copy > p:not(.game-kicker) { max-width: 350px; color: #aeb1a2; font-size: 11px; line-height: 1.8; }
.sealed-back-link { display: inline-flex; gap: 10px; margin-top: 7px; color: #c7b286; font-size: 9px; }.sealed-back-link span { color: #e3c687; }
.sealed-record { border-top: 1px solid #66593f; border-bottom: 1px solid #66593f; }
.sealed-record summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; color: #e6ddc8; font-family: var(--mono); font-size: 8px; letter-spacing: .11em; cursor: pointer; list-style: none; }
.sealed-record summary::-webkit-details-marker { display: none; }.sealed-record summary i { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: #dba95b; box-shadow: 0 0 10px #dba95b99; }
.sealed-record summary > span:last-child { color: #e4c47c; font-family: var(--sans); font-size: 16px; transition: transform .2s ease; }.sealed-record[open] summary > span:last-child { transform: rotate(45deg); }
.sealed-record-body { padding-bottom: 15px; color: #b8b8aa; font-size: 11px; line-height: 1.8; }.sealed-record-body p { margin: 0 0 12px; }.sealed-record-body h3 { margin: 6px 0 12px; color: #f0ead9; font-family: var(--serif); font-size: 23px; font-weight: 500; }.sealed-alert { color: #e4bd7b; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.guide-end { min-height: 395px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 65px; border-top: 1px solid var(--line); text-align: center; }
.guide-end .eyebrow { display: flex; }.guide-end h2 { margin: 0; font-size: clamp(46px, 6vw, 70px); font-weight: 500; line-height: 1.02; letter-spacing: -.065em; }.guide-end > p:not(.eyebrow) { max-width: 470px; margin: 17px auto 0; color: #9ea79b; font-size: 11px; line-height: 1.8; }
.guide-end-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 25px; }.guide-text-link { color: #d8ddcf; font-size: 10px; }.guide-text-link span { margin-left: 8px; color: var(--accent); }
.field-guide-page .site-footer { border-color: var(--line); }.field-guide-page .footer-note, .field-guide-page .footer-year { color: #889286; }

@media (max-width: 820px) {
  .field-guide-hero { min-height: 600px; grid-template-columns: .92fr 1fr; gap: 5%; }
  .guide-map { min-height: 365px; }
  .guide-card-art { height: 190px; }
  .guide-card-body { padding-inline: 16px; }
  .sealed-layout { gap: 7%; padding: 27px; }
}
@media (max-width: 620px) {
  .field-guide-page .site-nav.is-open { background: #141d1a; }
  .field-guide-page .site-nav a { color: #dddcd1; }
  .field-guide-hero { display: flex; flex-direction: column; align-items: stretch; gap: 27px; padding-top: 55px; padding-bottom: 65px; }
  .guide-hero-copy h1 { font-size: clamp(57px, 14vw, 77px); }
  .guide-lede { font-size: 17px; }
  .guide-map { min-height: 330px; }
  .guide-intro { padding-top: 60px; padding-bottom: 40px; }
  .guide-intro-row { grid-template-columns: 1fr; gap: 21px; margin-top: 25px; }
  .guide-intro h2, .guide-group-heading h2 { font-size: 42px; }
  .guide-index { gap: 6px; }
  .guide-index a { flex: 1 1 43%; padding: 10px; }
  .archive-browser { padding: 14px; }
  .archive-search-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .archive-search-row input { width: 100%; }
  .guide-entry-group { padding: 51px 0 60px; }
  .guide-group-heading { display: block; margin: 25px 0 24px; }
  .guide-group-heading > span { display: block; margin-top: 14px; text-align: left; }
  .guide-card-grid { grid-template-columns: 1fr; gap: 11px; }
  .guide-card-art { height: 215px; }
  .guide-card-body > p { min-height: 0; }
  .guide-card-foot { font-size: 6px; }
  .sealed-file { padding-top: 58px; padding-bottom: 68px; }
  .sealed-layout { grid-template-columns: 1fr; gap: 24px; margin-top: 26px; padding: 22px; }
  .sealed-copy h2 { font-size: 43px; }
  .guide-end { min-height: 360px; }
  .guide-end h2 { font-size: 52px; }
}

.atlas-console { min-width: 0; perspective: 850px; }
.guide-map { --atlas-x: 0deg; --atlas-y: 0deg; transform: perspective(850px) rotateX(var(--atlas-y)) rotateY(var(--atlas-x)); transform-origin: center; transition: transform .3s ease; }
.map-grid { animation: atlas-grid-breathe 8s ease-in-out infinite alternate; }
.map-route { overflow: visible; }
.map-route::after { content: ''; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: #dffff0; box-shadow: 0 0 14px 5px #82efa2; opacity: 0; }
.guide-map[data-tracing="true"] .map-route { animation: atlas-route-glow 2s ease-in-out infinite alternate; }
.guide-map[data-tracing="true"] .map-route::after { opacity: 1; animation: atlas-route-dot 3.2s ease-in-out infinite; }
.map-node { padding: 8px; border: 0; background: transparent; cursor: pointer; }
.map-node b { transition: opacity .2s ease, transform .2s ease, color .2s ease; }
.map-node:hover, .map-node:focus-visible, .map-node.is-selected { color: #e6f7e4; }
.map-node:hover i, .map-node:focus-visible i, .map-node.is-selected i { transform: scale(1.25); box-shadow: 0 0 0 8px #76d99b2b, 0 0 28px 11px #7ce0a077; }
.map-node:focus-visible { outline: 1px solid #a4ecb1; outline-offset: 2px; }
.map-node-unknown i { border-style: dashed; }
.labels-hidden .map-node b { opacity: 0; transform: translateY(-4px); }
.atlas-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 14px 15px 11px; border: 1px solid #344039; background: #131b17; }
.atlas-detail { display: grid; gap: 5px; align-content: center; }
.atlas-detail strong { color: #e3e5d9; font-family: var(--serif); font-size: 16px; font-weight: 500; }
.atlas-detail > span { max-width: 520px; color: #9da89b; font-size: 8px; line-height: 1.65; }
.atlas-buttons { display: flex; align-items: center; gap: 7px; }
.atlas-button { min-height: 35px; padding: 0 10px; border: 1px solid #3b4a3e; background: transparent; color: #9eab9c; font-family: var(--mono); font-size: 6px; letter-spacing: .08em; white-space: nowrap; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.atlas-button:hover, .atlas-button:focus-visible, .atlas-button[aria-pressed="true"] { border-color: #7cc890; background: #7ce0a00e; color: #c7f5d0; }
.atlas-button:focus-visible { outline: 2px solid #8be4a3; outline-offset: 2px; }
.atlas-trace span:first-child { margin-right: 5px; color: #8ae6a0; font-size: 11px; }
.atlas-status { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid #2f3c32; color: #748375; font-family: var(--mono); font-size: 6px; letter-spacing: .1em; }
.atlas-console.is-updating .atlas-detail { animation: atlas-detail-arrive .35s ease; }
.atlas-console.is-pending { opacity: 0; transform: translateY(15px); transition: opacity .65s ease, transform .65s ease; }
.atlas-console.is-pending.is-visible { opacity: 1; transform: translateY(0); }
@keyframes atlas-grid-breathe { from { opacity: .16; } to { opacity: .31; } }
@keyframes atlas-route-glow { from { filter: brightness(.8); } to { filter: brightness(1.5); } }
@keyframes atlas-route-dot { from { left: 1%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: 92%; opacity: 0; } }
@keyframes atlas-detail-arrive { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 620px) {
  .atlas-controls { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .atlas-buttons { flex-wrap: wrap; }
  .atlas-button { flex: 1; }
  .atlas-status { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-console.is-pending, .atlas-console.is-pending.is-visible { animation: none; transition: none; opacity: 1; transform: none; }
  .guide-map { transition: none; }
  .map-grid, .guide-map[data-tracing="true"] .map-route, .guide-map[data-tracing="true"] .map-route::after, .atlas-console.is-updating .atlas-detail { animation: none; }
}