:root {
  color-scheme: dark;
  --abyss-ink: #eaf8fa;
  --abyss-muted: #9db6bc;
  --abyss-line: rgba(183, 226, 230, .18);
  --abyss-panel: rgba(4, 18, 26, .86);
  --abyss-accent: #79e0d1;
  --abyss-accent-deep: #0d8f8b;
  --abyss-gold: #efd39a;
  --abyss-bg: #02080d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--abyss-bg); }
body { margin: 0; color: var(--abyss-ink); background: var(--abyss-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--abyss-accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.abyss-skip { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; color: #031016; background: #fff; transform: translateY(-160%); transition: transform .2s; }
.abyss-skip:focus { transform: translateY(0); }

.abyss-site-header { position: relative; z-index: 10; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.1rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.abyss-brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.abyss-brand img { display: block; filter: drop-shadow(0 5px 15px rgba(0, 0, 0, .45)); }
.abyss-brand em { color: var(--abyss-accent); font-style: normal; }
.abyss-site-header nav { display: flex; align-items: center; gap: 1.25rem; }
.abyss-site-header nav a { color: #c9dbde; text-decoration: none; font-size: .88rem; }
.abyss-site-header nav a:hover { color: #fff; }

.abyss-intro { position: relative; min-height: 70vh; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) 0 6rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr); align-items: center; gap: clamp(2rem, 8vw, 8rem); }
.abyss-intro::before { content: ""; position: absolute; z-index: -2; inset: -5rem calc(50% - 50vw) 0; background: radial-gradient(circle at 74% 18%, rgba(78, 188, 190, .16), transparent 28%), radial-gradient(circle at 28% 6%, rgba(37, 116, 143, .22), transparent 32%), linear-gradient(180deg, #071c28 0%, #030c13 62%, #02080d 100%); }
.abyss-intro::after { content: ""; position: absolute; z-index: -1; inset: -4rem calc(50% - 50vw) auto; height: 44vh; opacity: .35; background: repeating-radial-gradient(ellipse at 50% 0, transparent 0 24px, rgba(134, 225, 224, .08) 27px 29px, transparent 33px 60px); mask-image: linear-gradient(#000, transparent); }
.abyss-kicker { margin: 0 0 .7rem; color: var(--abyss-accent); font-size: .72rem; font-weight: 780; letter-spacing: .16em; text-transform: uppercase; }
.abyss-intro h1 { margin: 0; max-width: 840px; color: #f7ffff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.5rem, 8.5vw, 8rem); font-weight: 400; line-height: .82; letter-spacing: -.07em; }
.abyss-intro h1 span { display: block; max-width: 760px; margin-top: 1rem; color: #bcd0d3; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: clamp(1rem, 2vw, 1.55rem); font-weight: 520; line-height: 1.15; letter-spacing: .01em; }
.abyss-promise { max-width: 680px; margin: 2rem 0 .75rem; color: #eefafa; font-size: clamp(1.2rem, 2.3vw, 1.65rem); line-height: 1.35; }
.abyss-intro__method { max-width: 660px; margin: 0; color: var(--abyss-muted); }
.abyss-intro__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .8rem; margin-top: 2rem; }
.abyss-button { min-height: 3rem; padding: .85rem 1.15rem; border: 1px solid var(--abyss-line); border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; cursor: pointer; text-decoration: none; font-weight: 720; }
.abyss-button small { font-size: .7rem; font-weight: 520; opacity: .72; }
.abyss-button--primary { border-color: #83e6d8; color: #031315; background: linear-gradient(135deg, #a3eee2, #58c8bc); box-shadow: 0 12px 35px rgba(60, 196, 185, .18); }
.abyss-button--primary:hover { background: #c2f8ef; }
.abyss-button--ghost { background: rgba(255, 255, 255, .035); }
.abyss-button--ghost:hover { background: rgba(255, 255, 255, .08); }
.abyss-intro__depth { min-height: 420px; padding: 1.5rem 0; display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; text-align: center; }
.abyss-intro__depth > span { color: #d7f7f4; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.abyss-intro__depth i { position: relative; width: 1px; height: 100%; margin: .9rem 0; background: linear-gradient(#87e4d8, rgba(135, 228, 216, .08)); }
.abyss-intro__depth i::before, .abyss-intro__depth i::after { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; border: 1px solid #95e7dd; border-radius: 50%; transform: translateX(-50%); }
.abyss-intro__depth i::before { top: 0; }
.abyss-intro__depth i::after { bottom: 0; background: var(--abyss-accent); box-shadow: 0 0 22px var(--abyss-accent); }
.abyss-intro__depth strong { font-family: Georgia, serif; font-size: clamp(2.4rem, 4vw, 4.4rem); font-weight: 400; letter-spacing: -.05em; }
.abyss-intro__depth small { max-width: 250px; color: var(--abyss-muted); }

.abyss-expedition { padding: 3rem 0 7rem; }
.abyss-expedition__heading, .abyss-stage, .abyss-stage-note { width: min(1320px, calc(100% - 2rem)); margin-right: auto; margin-left: auto; }
.abyss-expedition__heading { margin-bottom: 1.2rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.abyss-expedition__heading h2, .abyss-section-heading h2, .abyss-teacher h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.abyss-expedition__heading > p { max-width: 500px; margin: 0; color: var(--abyss-muted); font-size: .9rem; }

.abyss-stage { position: relative; height: min(78vh, 820px); min-height: 610px; overflow: hidden; border: 1px solid rgba(166, 225, 226, .2); border-radius: .75rem; background: #04131c; box-shadow: 0 40px 100px rgba(0, 0, 0, .45); isolation: isolate; touch-action: pan-y; }
.abyss-stage:focus-visible { outline: 3px solid var(--abyss-accent); outline-offset: 4px; }
.abyss-stage__canvas, .abyss-stage__fallback, .abyss-stage__vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.abyss-stage__canvas { z-index: 1; display: block; }
.abyss-stage__fallback { z-index: 0; overflow: hidden; background: linear-gradient(#1c7188, #071d2a 45%, #02080d); }
.abyss-stage__fallback img { position: absolute; top: 45%; left: 56%; width: min(72%, 900px); height: auto; opacity: 0; transform: translate(-40%, -50%); transition: opacity 1s; }
.abyss-stage[data-renderer="fallback"][data-depth-band="twilight"] .abyss-stage__fallback img { opacity: .76; }
.abyss-stage__water { position: absolute; inset: 0; opacity: .55; background: repeating-radial-gradient(ellipse at 50% 0, transparent 0 35px, rgba(150, 241, 231, .1) 38px, transparent 43px 80px); }
.abyss-stage__beam { position: absolute; top: 25%; left: 50%; width: 60%; height: 60%; opacity: .42; transform: translateX(-50%); clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(216, 255, 247, .48), rgba(113, 218, 207, 0)); filter: blur(12px); }
.abyss-stage__vignette { z-index: 2; pointer-events: none; box-shadow: inset 0 0 150px rgba(0, 0, 0, .75); background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 25%, transparent 65%, rgba(0, 0, 0, .72)); }
.abyss-media-status { position: absolute; z-index: 3; top: 28%; right: 1rem; left: 1rem; max-width: 28rem; margin: 0 auto; padding: 1rem; border: 1px solid var(--abyss-line); background: var(--abyss-panel); text-align: center; }

.abyss-hud { position: absolute; z-index: 5; left: 0; width: 100%; padding: 1.1rem; display: flex; align-items: center; gap: 1rem; pointer-events: none; }
.abyss-hud button, .abyss-hud input, .abyss-hud select, .abyss-hud label { pointer-events: auto; }
.abyss-hud--top { top: 0; align-items: flex-start; }
.abyss-hud--bottom { bottom: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: end; background: linear-gradient(0deg, rgba(0, 7, 11, .95), rgba(0, 7, 11, .7) 58%, transparent); }
.abyss-readout { min-width: 150px; }
.abyss-readout span, .abyss-location span { display: block; color: #9ac1c2; font-size: .67rem; font-weight: 740; letter-spacing: .13em; text-transform: uppercase; }
.abyss-readout output { display: block; margin-top: -.08rem; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.5rem); font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.05em; }
.abyss-location { margin-top: .2rem; }
.abyss-location small { color: #d5e7e7; }
.abyss-icon-button { margin-left: auto; padding: .65rem .85rem; border: 1px solid var(--abyss-line); border-radius: 999px; color: #def4f2; background: rgba(3, 18, 25, .68); backdrop-filter: blur(12px); cursor: pointer; }
.abyss-icon-button:hover { background: rgba(25, 69, 75, .75); }

.abyss-stage__opening { position: absolute; z-index: 4; inset: 0; padding: 2rem; display: grid; place-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(14, 66, 77, .45), rgba(2, 11, 17, .82) 60%); }
.abyss-stage__opening[hidden] { display: none; }
.abyss-stage__opening h3 { max-width: 720px; margin: .2rem 0 .8rem; font-family: Georgia, serif; font-size: clamp(2.1rem, 5vw, 4.8rem); font-weight: 400; line-height: 1; }
.abyss-stage__opening > p:not(.abyss-kicker) { max-width: 600px; margin: 0 0 1.5rem; color: var(--abyss-muted); }
.abyss-stage__opening > div { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

.abyss-playback { display: flex; align-items: center; gap: .45rem; }
.abyss-playback button { min-width: 2.8rem; min-height: 2.8rem; border: 1px solid var(--abyss-line); border-radius: 999px; background: rgba(7, 25, 32, .86); cursor: pointer; }
.abyss-playback .abyss-play { min-width: 7.3rem; padding: 0 1rem; border-color: rgba(129, 229, 216, .55); }
.abyss-depth-slider { width: 100%; padding: 0 1rem .8rem; }
.abyss-depth-slider input { width: 100%; height: 2px; accent-color: var(--abyss-accent); cursor: ew-resize; }
.abyss-tools { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; }
.abyss-tools button, .abyss-tools label { min-height: 2.7rem; padding: .55rem .75rem; border: 1px solid var(--abyss-line); border-radius: .3rem; background: rgba(7, 25, 32, .86); font-size: .78rem; }
.abyss-tools button { cursor: pointer; }
.abyss-tools button span { display: inline-block; width: .45rem; height: .45rem; margin-right: .35rem; border-radius: 50%; background: var(--abyss-gold); box-shadow: 0 0 12px var(--abyss-gold); }
.abyss-tools button[aria-pressed="false"] span { background: #52666a; box-shadow: none; }
.abyss-tools select { margin-left: .35rem; border: 0; color: #fff; background: transparent; }

.abyss-moment { position: absolute; z-index: 4; bottom: 5.7rem; left: 1.1rem; max-width: min(430px, calc(100% - 2.2rem)); padding: .8rem 1rem; border-left: 2px solid var(--abyss-accent); background: linear-gradient(90deg, rgba(1, 12, 18, .9), rgba(1, 12, 18, .25)); }
.abyss-moment[hidden] { display: none; }
.abyss-moment span { display: block; color: var(--abyss-accent); font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.abyss-moment strong { display: block; max-width: 350px; margin: .2rem 0 .5rem; font-family: Georgia, serif; font-size: clamp(1.4rem, 3vw, 2.3rem); font-weight: 400; line-height: 1.08; }
.abyss-moment button { padding: .4rem .7rem; border: 1px solid var(--abyss-line); border-radius: .25rem; background: rgba(255, 255, 255, .06); cursor: pointer; }

.abyss-encounter { position: absolute; z-index: 8; top: 5.5rem; right: 1.1rem; bottom: 7.2rem; width: min(390px, calc(100% - 2.2rem)); padding: 1.2rem; overflow: auto; border: 1px solid rgba(146, 224, 218, .25); border-radius: .5rem; background: rgba(2, 14, 21, .93); box-shadow: 0 20px 70px rgba(0, 0, 0, .55); backdrop-filter: blur(15px); }
.abyss-encounter[hidden] { display: none; }
.abyss-encounter > button { float: right; border: 0; color: #b8d1d2; background: transparent; cursor: pointer; }
.abyss-encounter h3 { margin: .15rem 0 .8rem; font-family: Georgia, serif; font-size: 2rem; font-weight: 400; }
.abyss-encounter > p:not(.abyss-kicker) { color: #cfdddd; }
.abyss-encounter dl { margin: 1.2rem 0; border-top: 1px solid var(--abyss-line); }
.abyss-encounter dl div { padding: .65rem 0; border-bottom: 1px solid var(--abyss-line); }
.abyss-encounter dt { color: var(--abyss-muted); font-size: .72rem; }
.abyss-encounter dd { margin: .15rem 0 0; }
.abyss-encounter__status { padding: .8rem; border-radius: .3rem; color: #d9e7e6 !important; background: rgba(99, 199, 188, .08); font-size: .8rem; }

.abyss-cutaway { position: absolute; z-index: 7; inset: 0; padding: 1.2rem; overflow: auto; background: #01090e; }
.abyss-cutaway[hidden] { display: none; }
.abyss-stage[data-view="cutaway"] > .abyss-hud, .abyss-stage[data-view="cutaway"] > .abyss-moment, .abyss-stage[data-view="cutaway"] > .abyss-stage__opening { display: none; }
.abyss-cutaway__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.abyss-cutaway__header h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; }
.abyss-cutaway__header button, .abyss-cutaway li button { border: 1px solid var(--abyss-line); color: #e8f5f5; background: rgba(255, 255, 255, .04); cursor: pointer; }
.abyss-cutaway__header button { padding: .65rem .85rem; border-radius: .3rem; }
.abyss-cutaway__body { min-height: 420px; margin: 1.2rem 0; display: grid; grid-template-columns: minmax(90px, .3fr) 1fr; gap: 1.5rem; }
.abyss-column { position: relative; min-height: 420px; display: flex; flex-direction: column; border: 1px solid var(--abyss-line); border-radius: .35rem; overflow: hidden; background: #01101b; }
.abyss-column__zone { display: block; min-height: 4px; }
.abyss-column__zone--epipelagic { flex: 200; background: #2c8ea1; }
.abyss-column__zone--mesopelagic { flex: 800; background: #15506a; }
.abyss-column__zone--bathypelagic { flex: 3000; background: #08273c; }
.abyss-column__zone--abyssopelagic { flex: 2000; background: #041828; }
.abyss-column__zone--hadal { flex: 4935; background: linear-gradient(#031422, #01070c); }
.abyss-column i { position: absolute; z-index: 2; top: 0; left: 50%; width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--abyss-accent); box-shadow: 0 0 20px var(--abyss-accent); transform: translate(-50%, -50%); }
.abyss-cutaway ol { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; list-style: none; }
.abyss-cutaway li button { width: 100%; height: 100%; min-height: 105px; padding: .8rem; border-radius: .35rem; text-align: left; }
.abyss-cutaway li.is-current button { border-color: var(--abyss-accent); background: rgba(80, 193, 183, .11); }
.abyss-cutaway li span, .abyss-cutaway li small { display: block; color: var(--abyss-muted); font-size: .72rem; }
.abyss-cutaway li strong { display: block; margin: .2rem 0; font-family: Georgia, serif; font-size: 1.25rem; font-weight: 400; }
.abyss-cutaway > p { margin: 0; color: var(--abyss-muted); font-size: .8rem; }

.abyss-stage-note { padding: .9rem 0; display: flex; align-items: flex-start; gap: 1rem; color: var(--abyss-muted); font-size: .78rem; }
.abyss-stage-note p { max-width: 880px; margin: 0 auto 0 0; }
.abyss-stage-note button { flex: 0 0 auto; padding: .55rem .75rem; border: 1px solid var(--abyss-line); border-radius: .25rem; color: var(--abyss-ink); background: transparent; cursor: pointer; }
.abyss-stage-note span { min-width: 1px; }
.abyss-no-script { width: min(1180px, calc(100% - 2rem)); margin: 2rem auto; padding: 1.2rem; border: 1px solid var(--abyss-accent); }

.abyss-understand { padding: 6rem max(1rem, calc((100% - 1180px) / 2)); color: #102127; background: #eef4f1; }
.abyss-section-heading { max-width: 850px; margin-bottom: 3rem; }
.abyss-understand .abyss-kicker { color: #16766f; }
.abyss-section-heading > p:last-child { max-width: 720px; color: #52676c; font-size: 1.05rem; }
.abyss-zone-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: #bfd0ce; border: 1px solid #bfd0ce; }
.abyss-zone-grid article { min-height: 325px; padding: 1.2rem; display: flex; flex-direction: column; background: #f9fbf8; }
.abyss-zone-grid article > span { color: #91a8a6; font-family: Georgia, serif; font-size: 2rem; }
.abyss-zone-grid article > p:first-of-type { margin: .8rem 0 .15rem; color: #16766f; font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.abyss-zone-grid h3 { margin: 0; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 400; line-height: 1.1; }
.abyss-zone-grid small { min-height: 2.5rem; margin-top: .25rem; color: #63777b; }
.abyss-zone-grid article > p:last-of-type { color: #52666b; font-size: .86rem; }
.abyss-zone-grid button { margin-top: auto; padding: .6rem 0; border: 0; border-top: 1px solid #ccd9d6; color: #126e68; background: transparent; text-align: left; cursor: pointer; }

.abyss-pressure { margin-top: 4rem; padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1fr); gap: clamp(2rem, 6vw, 6rem); color: var(--abyss-ink); background: #061820; border-radius: .65rem; box-shadow: 0 25px 60px rgba(0, 0, 0, .16); }
.abyss-pressure h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 400; line-height: 1; }
.abyss-pressure__copy > p:not(.abyss-kicker) { color: #adc2c4; }
.abyss-equation { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--abyss-line); font-family: Georgia, serif; font-size: clamp(1.35rem, 3vw, 2.2rem); text-align: center; }
.abyss-model-limit { font-size: .78rem; }
.abyss-pressure form { padding: 1.2rem; border: 1px solid var(--abyss-line); background: rgba(255, 255, 255, .025); }
.abyss-pressure form > label { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.abyss-pressure input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--abyss-accent); }
.abyss-pressure fieldset { margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--abyss-line); }
.abyss-pressure fieldset label { padding: .4rem 0; display: block; }
.abyss-pressure__result { margin-top: 1rem; padding: 1rem; border-left: 3px solid var(--abyss-accent); background: rgba(111, 218, 205, .09); }

.abyss-teacher { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 7rem 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: clamp(2rem, 8vw, 8rem); }
.abyss-teacher > div > p:not(.abyss-kicker) { max-width: 600px; color: var(--abyss-muted); }
.abyss-teacher ol { margin: 0; padding: 0; list-style: none; counter-reset: teacher; }
.abyss-teacher li { position: relative; padding: 1rem 0 1rem 3.2rem; border-bottom: 1px solid var(--abyss-line); counter-increment: teacher; }
.abyss-teacher li::before { content: "0" counter(teacher); position: absolute; left: 0; color: var(--abyss-accent); font-family: Georgia, serif; font-size: 1.5rem; }
.abyss-teacher > button { justify-self: start; padding: .65rem .9rem; border: 1px solid var(--abyss-line); color: #fff; background: transparent; cursor: pointer; }

.abyss-sources { padding: 6rem max(1rem, calc((100% - 1180px) / 2)); color: #15282c; background: #f4f0e7; }
.abyss-sources .abyss-kicker { color: #7b5e2d; }
.abyss-sources ul { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; list-style: none; }
.abyss-sources li { padding: 1rem 0; border-top: 1px solid #cfc8b8; }
.abyss-sources li a { display: block; color: #183f46; font-family: Georgia, serif; font-size: 1.05rem; }
.abyss-sources li span { display: block; margin-top: .2rem; color: #697677; font-size: .75rem; }
.abyss-credit { margin-top: 2rem; padding: 1rem; border-left: 3px solid #aa8448; background: rgba(255, 255, 255, .5); }
.abyss-footer { min-height: 130px; width: min(1180px, calc(100% - 2rem)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--abyss-muted); font-size: .8rem; }
.abyss-footer a { color: var(--abyss-accent); }

@media (max-width: 1050px) {
  .abyss-zone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abyss-zone-grid article:last-child { grid-column: 1 / -1; }
  .abyss-hud--bottom { grid-template-columns: auto 1fr; }
  .abyss-tools { grid-column: 1 / -1; justify-content: space-between; }
  .abyss-depth-slider { padding-bottom: .4rem; }
  .abyss-moment { bottom: 9rem; }
}

@media (max-width: 760px) {
  .abyss-site-header nav a:not(:first-child) { display: none; }
  .abyss-intro { min-height: auto; padding-top: 4.5rem; grid-template-columns: 1fr; gap: 2rem; }
  .abyss-intro__depth { min-height: 230px; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; }
  .abyss-intro__depth i { width: 100%; height: 1px; margin: 0; background: linear-gradient(90deg, #87e4d8, rgba(135, 228, 216, .08)); }
  .abyss-intro__depth i::before { top: 50%; left: 0; }
  .abyss-intro__depth i::after { top: 50%; right: 0; bottom: auto; left: auto; transform: translate(50%, -50%); }
  .abyss-intro__depth small { grid-column: 1 / -1; }
  .abyss-expedition__heading { display: block; }
  .abyss-expedition__heading > p { margin-top: 1rem; }
  .abyss-stage { width: 100%; height: 78svh; min-height: 620px; border-right: 0; border-left: 0; border-radius: 0; touch-action: pan-y; }
  .abyss-hud { padding: .8rem; }
  .abyss-readout { min-width: 110px; }
  .abyss-location { max-width: 42%; }
  .abyss-location small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .abyss-icon-button { max-width: 34%; font-size: .7rem; }
  .abyss-hud--bottom { grid-template-columns: 1fr; }
  .abyss-playback { justify-content: center; }
  .abyss-depth-slider { grid-row: 1; padding: 0 0 .55rem; }
  .abyss-tools { grid-column: auto; }
  .abyss-tools button { flex: 1; }
  .abyss-tools label { flex: 0 0 auto; }
  .abyss-stage__opening { padding: 1.2rem; }
  .abyss-stage__opening > div { flex-direction: column; width: min(100%, 310px); }
  .abyss-moment { right: 1rem; bottom: 11rem; left: 1rem; max-width: none; padding: .55rem .8rem; }
  .abyss-moment strong { font-size: 1.4rem; }
  .abyss-encounter { top: 4.8rem; bottom: 10.5rem; }
  .abyss-cutaway__body { grid-template-columns: 58px 1fr; }
  .abyss-cutaway ol { grid-template-columns: 1fr; }
  .abyss-cutaway li button { min-height: 76px; }
  .abyss-stage-note { padding-right: 1rem; padding-left: 1rem; flex-wrap: wrap; }
  .abyss-understand { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .abyss-zone-grid { grid-template-columns: 1fr; }
  .abyss-zone-grid article, .abyss-zone-grid article:last-child { min-height: 260px; grid-column: auto; }
  .abyss-pressure, .abyss-teacher { grid-template-columns: 1fr; }
  .abyss-teacher { padding: 5rem 0; }
  .abyss-sources ul { grid-template-columns: 1fr; }
  .abyss-footer { padding: 2rem 0; flex-direction: column; align-items: flex-start; justify-content: center; }
}

@media (max-width: 430px) {
  .abyss-site-header { width: calc(100% - 1.2rem); }
  .abyss-intro, .abyss-expedition__heading { width: calc(100% - 1.2rem); }
  .abyss-intro h1 { font-size: clamp(3.35rem, 19vw, 5rem); }
  .abyss-intro__actions { flex-direction: column; }
  .abyss-button small { display: block; }
  .abyss-stage { min-height: 670px; }
  .abyss-location { display: none; }
  .abyss-icon-button { max-width: 52%; }
  .abyss-tools { gap: .35rem; }
  .abyss-tools button, .abyss-tools label { padding: .45rem; font-size: .7rem; }
  .abyss-stage-note button { width: 100%; }
  .abyss-pressure { margin-right: -1rem; margin-left: -1rem; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  .abyss-stage__canvas, .abyss-stage__fallback, .abyss-stage__vignette { display: none; }
  .abyss-stage { border: 2px solid CanvasText; background: Canvas; }
  .abyss-hud--bottom { background: Canvas; }
  .abyss-button, button, select { border: 1px solid ButtonText !important; }
}

@media print {
  :root { color-scheme: light; }
  body { color: #111; background: #fff; }
  .abyss-site-header, .abyss-intro, .abyss-expedition__heading, .abyss-stage-note, .abyss-understand, .abyss-sources, .abyss-footer, .abyss-teacher > button { display: none !important; }
  .abyss-expedition { padding: 0; }
  .abyss-stage { height: auto; min-height: 0; border: 0; box-shadow: none; background: #fff; }
  .abyss-stage > * { display: none !important; }
  .abyss-teacher { width: 100%; padding: 0; display: block; color: #111; }
  .abyss-teacher ol { margin-top: 2rem; }
  .abyss-teacher li { border-color: #999; }
}