.ab-whale { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
:root:not([data-theme="abyss"]) .ab-whale { display: none; }

:root[data-theme="abyss"][data-page="outposts"] {
  --ao-panel:   rgba(3, 12, 20, 0.74);
  --ao-panel-2: rgba(8, 30, 40, 0.6);
  --ao-line:    var(--ab-hair);
  --ao-line-2:  rgba(63, 217, 190, 0.24);
  --ao-jade:    #8DF2DE;
}
:root[data-theme="abyss"][data-page="outposts"] body {
  font-family: var(--font-ab-body); font-weight: 400; letter-spacing: 0; font-size: 1.125rem; line-height: 1.65;
}
:root[data-theme="abyss"][data-page="outposts"] :is(h1, h2, h3, .op-h3, .op-band-n, .isle b, .dare h3, .built-tiles b, .halls b, .sizes b, .never-line, .film-play-t, .nevers li, .op-callout strong) {
  font-family: var(--font-ab-display); font-optical-sizing: auto; letter-spacing: -0.02em; text-shadow: none;
}

:root[data-theme="abyss"][data-page="outposts"] main > .page-head { padding-bottom: 272px; }
:root[data-theme="abyss"][data-page="outposts"] main > .page-head::before { display: none; }
:root[data-theme="abyss"][data-page="outposts"] main > .page-head::after { z-index: 0; }
:root[data-theme="abyss"][data-page="outposts"] main > .page-head h1 { max-width: 17ch; color: var(--ab-foam); }
:root[data-theme="abyss"][data-page="outposts"] main > .page-head .lede { color: var(--ab-foam); font-size: 1.3125rem; max-width: 36ch; }
:root[data-theme="abyss"][data-page="outposts"] .page-head .app-mark {
  border: 1px solid var(--ab-hair); box-shadow: none; background: #1d2a34; margin-bottom: 26px;
}
:root[data-theme="abyss"][data-page="outposts"] .beta-call {
  background: var(--ao-panel); color: var(--ab-foam); border: 1px solid var(--ab-hair); border-radius: 999px; box-shadow: none;
  padding: 10px 10px 10px 28px; margin-top: 34px; gap: 12px 24px;
  transition: border-color 420ms var(--ab-ease), transform 420ms var(--ab-ease);
}
:root[data-theme="abyss"][data-page="outposts"] .beta-text { font-size: 1.125rem; }
:root[data-theme="abyss"][data-page="outposts"] .beta-text strong { font-weight: 600; }
:root[data-theme="abyss"][data-page="outposts"] .beta-go {
  background: var(--ab-foam); color: var(--ab-deep); font-weight: 600; font-size: 1.0625rem; min-height: 50px;
  transition: background-color 420ms var(--ab-ease), color 420ms var(--ab-ease);
}
@media (hover: hover) {
  :root[data-theme="abyss"][data-page="outposts"] .beta-call:hover { transform: none; box-shadow: none; border-color: var(--ab-pink); }
  :root[data-theme="abyss"][data-page="outposts"] .beta-call:hover .beta-go { background: var(--ab-pink); }
}
:root[data-theme="abyss"][data-page="outposts"] .beta-call:active { transform: none; box-shadow: none; }
:root[data-theme="abyss"][data-page="outposts"] .beta-call:focus-visible { outline: 2px solid var(--ab-pink); outline-offset: 4px; }
@media (max-width: 620px) {
  :root[data-theme="abyss"][data-page="outposts"] .beta-call { border-radius: 28px; padding: 16px; }
  :root[data-theme="abyss"][data-page="outposts"] main > .page-head { padding-bottom: 214px; }
}

:root[data-theme="abyss"][data-page="outposts"] :is(#film, #loop, #miss, #islands, #clans, #events, #market, #never, #built) {
  max-width: min(calc(var(--maxw, 1180px) + 80px), calc(100% - 2 * var(--gutter, 20px)));
  margin: 0 auto clamp(26px, 3.6vw, 48px);
  padding: clamp(26px, 4.4vw, 64px) !important;
  background: var(--ao-panel); border: 1px solid var(--ao-line-2); border-radius: 32px;
}
:root[data-theme="abyss"][data-page="outposts"] #film { margin-top: clamp(26px, 3.6vw, 48px); }
@media (max-width: 620px) {
  :root[data-theme="abyss"][data-page="outposts"] :is(#film, #loop, #miss, #islands, #clans, #events, #market, #never, #built) {
    padding: 22px 18px !important; border-radius: 24px; max-width: calc(100% - 24px);
  }
}
:root[data-theme="abyss"][data-page="outposts"] main > .page-head + section { padding-top: clamp(26px, 4.4vw, 64px) !important; }

:root[data-theme="abyss"][data-page="outposts"] .op-band {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 18px; gap: 14px;
  margin: 0 0 clamp(22px, 3vw, 38px); border-bottom: 1px solid var(--ao-line-2);
}
:root[data-theme="abyss"][data-page="outposts"] .op-band img { width: 40px; height: 40px; flex-basis: 40px; }
:root[data-theme="abyss"][data-page="outposts"] .op-band-t {
  font-family: var(--font-ab-body); font-weight: 600; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ab-foam-2); padding-top: 0;
}
:root[data-theme="abyss"][data-page="outposts"] .op-band-n {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0; border-radius: 999px; box-shadow: none;
  background: none; border: 1px solid var(--ab-hair); color: var(--ab-foam); font-weight: 300; font-size: 1.25rem;
}
:root[data-theme="abyss"][data-page="outposts"] #screens .op-band { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

:root[data-theme="abyss"][data-page="outposts"] main h2:not(.contact h2) {
  font-weight: 300; font-variation-settings: "wght" 300; color: var(--ab-foam);
  font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; margin: 0 0 0.45em; max-width: 24ch; text-wrap: balance;
}
:root[data-theme="abyss"][data-page="outposts"] .op-h3 {
  font-weight: 300; font-variation-settings: "wght" 300; color: var(--ab-foam);
  font-size: clamp(1.55rem, 2.9vw, 2.25rem); line-height: 1.12; margin-top: clamp(40px, 5vw, 60px); margin-bottom: 18px;
}
:root[data-theme="abyss"][data-page="outposts"] .sub { color: var(--ab-foam-2); font-size: 1.1875rem; line-height: 1.6; max-width: 52ch; margin-bottom: 30px; }
:root[data-theme="abyss"][data-page="outposts"] main p { color: var(--ab-foam); }
:root[data-theme="abyss"][data-page="outposts"] main :is(.sub, .never-sub, .built-team) { color: var(--ab-foam-2); }

:root[data-theme="abyss"][data-page="outposts"] .diamonds { gap: 20px; }
:root[data-theme="abyss"][data-page="outposts"] .diamonds li { font-weight: 500; font-size: 1.25rem; line-height: 1.35; color: var(--ab-foam); padding-left: 34px; }
:root[data-theme="abyss"][data-page="outposts"] .diamonds li::before {
  left: 3px; top: 0.5em; width: 11px; height: 11px; background: var(--ab-jade); border: 0; transform: rotate(45deg);
}
:root[data-theme="abyss"][data-page="outposts"] .diamonds small { font-weight: 400; font-size: 1.0625rem; line-height: 1.5; color: var(--ab-foam-2); margin-top: 4px; }

:root[data-theme="abyss"][data-page="outposts"] .op-card {
  background: var(--ao-panel-2); border: 1px solid var(--ao-line-2); border-radius: 22px; box-shadow: none; color: var(--ab-foam);
}

:root[data-theme="abyss"][data-page="outposts"] .screen {
  border: 1px solid var(--ab-hair); border-radius: 22px; box-shadow: none; background: #0a141b;
}
@media (hover: hover) { :root[data-theme="abyss"][data-page="outposts"] .screen:hover { transform: none; box-shadow: none; } }
:root[data-theme="abyss"][data-page="outposts"] .film-play { background: radial-gradient(ellipse at 50% 55%, rgba(3, 10, 20, 0.36), rgba(3, 10, 20, 0) 62%); }
:root[data-theme="abyss"][data-page="outposts"] .film-play-dot {
  background: var(--ab-foam); border: 0; box-shadow: none; transition: transform 500ms var(--ab-ease), background-color 420ms var(--ab-ease);
}
:root[data-theme="abyss"][data-page="outposts"] .film-play-dot svg { fill: var(--ab-deep); }
:root[data-theme="abyss"][data-page="outposts"] .film-play-t { background: rgba(3, 10, 20, 0.78); color: var(--ab-foam); font-family: var(--font-ab-body); font-weight: 600; font-size: 1.0625rem; padding: 10px 18px; border: 1px solid var(--ab-hair); }
:root[data-theme="abyss"][data-page="outposts"] .film-len { color: var(--ao-jade); }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="abyss"][data-page="outposts"] .film-play:hover .film-play-dot { transform: scale(1.05); background: var(--ab-pink); }
}
:root[data-theme="abyss"][data-page="outposts"] .film-play:active .film-play-dot { transform: scale(0.98); box-shadow: none; }
:root[data-theme="abyss"][data-page="outposts"] .film-play:focus-visible { outline: 2px solid var(--ab-pink); }

:root[data-theme="abyss"][data-page="outposts"] .op-callout, :root[data-theme="abyss"][data-page="outposts"] .op-callout.green {
  background: rgba(63, 217, 190, 0.08); color: var(--ab-foam); border: 1px solid var(--ab-hair); box-shadow: none; border-radius: 20px;
  font-weight: 400; font-size: 1.125rem; line-height: 1.5; padding: 20px 24px;
}
:root[data-theme="abyss"][data-page="outposts"] .op-callout strong { color: var(--ao-jade); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin-bottom: 4px; }

:root[data-theme="abyss"][data-page="outposts"] .isle {
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--ao-line-2); border-radius: 24px; box-shadow: none;
  transition: border-color 420ms var(--ab-ease), transform 600ms var(--ab-slow);
}
:root[data-theme="abyss"][data-page="outposts"] .isle b { color: var(--ab-foam); font-weight: 300; font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 8px; }
:root[data-theme="abyss"][data-page="outposts"] .isle span { color: var(--ab-foam-2); font-weight: 400; font-size: 1.0625rem; }
@media (hover: hover) {
  :root[data-theme="abyss"][data-page="outposts"] .isle:hover { transform: translate3d(0, -4px, 0); box-shadow: none; border-color: var(--ab-pink); }
}
:root[data-theme="abyss"][data-page="outposts"] .free { padding: 22px 26px; }
:root[data-theme="abyss"][data-page="outposts"] .free p { font-size: 1.1875rem; color: var(--ab-foam); max-width: 40ch; }
:root[data-theme="abyss"][data-page="outposts"] .free p a { text-decoration-color: var(--ab-hair); text-decoration-thickness: 1px; text-underline-offset: 6px; color: var(--ab-foam); font-weight: 500; }
@media (hover: hover) { :root[data-theme="abyss"][data-page="outposts"] .free p a:hover { color: var(--ab-pink); text-decoration-color: var(--ab-pink); text-decoration-thickness: 1px; } }
:root[data-theme="abyss"][data-page="outposts"] .decos li {
  background: rgba(63, 217, 190, 0.07); border: 1px solid var(--ao-line-2); color: var(--ab-foam); font-weight: 500; font-size: 1.0625rem;
}
:root[data-theme="abyss"][data-page="outposts"] .decos small { color: var(--ab-foam-2); font-weight: 400; font-size: 0.9375rem; }

:root[data-theme="abyss"][data-page="outposts"] .sizes li {
  background: rgba(63, 217, 190, 0.08); border: 1px solid var(--ab-hair); border-radius: 18px; box-shadow: none;
  color: var(--ab-foam-2); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.1em; padding: 10px 14px 12px; min-width: 84px;
}
:root[data-theme="abyss"][data-page="outposts"] .sizes b { font-size: 2.2rem; font-weight: 300; color: var(--ab-foam); letter-spacing: -0.02em; }
:root[data-theme="abyss"][data-page="outposts"] .faces img { background: #1d2a34; border: 1px solid var(--ab-hair); box-shadow: none; }
:root[data-theme="abyss"][data-page="outposts"] .halls li { font-weight: 500; font-size: 1.0625rem; color: var(--ab-foam-2); }
:root[data-theme="abyss"][data-page="outposts"] .halls b { font-weight: 300; font-size: 1.9rem; color: var(--ao-jade); }
:root[data-theme="abyss"][data-page="outposts"] .halls figcaption { font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.1em; color: var(--ab-foam-2); }

:root[data-theme="abyss"][data-page="outposts"] .dare h3 { color: var(--ab-foam); font-weight: 300; font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
:root[data-theme="abyss"][data-page="outposts"] .dare p { color: var(--ab-foam); font-weight: 400; font-size: 1.125rem; line-height: 1.55; }
:root[data-theme="abyss"][data-page="outposts"] .dare .pay { color: var(--ao-jade); font-weight: 500; }
:root[data-theme="abyss"][data-page="outposts"] .villains li {
  background: var(--ao-panel-2); border: 1px solid var(--ao-line-2); border-radius: 18px; color: var(--ab-foam); font-weight: 500; font-size: 1.0625rem;
}
:root[data-theme="abyss"][data-page="outposts"] .villains small { color: var(--ab-foam-2); font-weight: 400; font-size: 0.9375rem; }

:root[data-theme="abyss"][data-page="outposts"] :is(.rail-item, .market-phone) {
  background: #06121a; border: 1px solid var(--ab-hair); box-shadow: none; border-radius: 30px;
}
:root[data-theme="abyss"][data-page="outposts"] :is(.rail-item img, .market-phone img) { border-radius: 22px; }

:root[data-theme="abyss"][data-page="outposts"] .op-card.dark { background: none; border: 0; padding: 0; color: var(--ab-foam); overflow: visible; }
:root[data-theme="abyss"][data-page="outposts"] .never h2 { color: var(--ab-foam); }
:root[data-theme="abyss"][data-page="outposts"] .never-sub { font-weight: 400; font-size: 1.25rem; margin-bottom: 28px; }
:root[data-theme="abyss"][data-page="outposts"] .nevers li {
  background: var(--ao-panel-2); color: var(--ab-foam); border: 1px solid var(--ao-line-2); border-radius: 18px; box-shadow: none;
  font-weight: 300; font-size: 1.5rem; line-height: 1.15; padding: 18px 18px 20px; gap: 14px;
}
:root[data-theme="abyss"][data-page="outposts"] .nevers .x { background: none; border: 1px solid var(--ab-pink); border-radius: 999px; width: 34px; height: 34px; }
:root[data-theme="abyss"][data-page="outposts"] .nevers .x svg { stroke: var(--ab-pink); stroke-width: 2.4; width: 16px; height: 16px; }
:root[data-theme="abyss"][data-page="outposts"] .never-line { font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.1rem); max-width: 30ch; color: var(--ab-foam); }
:root[data-theme="abyss"][data-page="outposts"] .never-line em { color: var(--ab-pink); }
@media (min-width: 720px) { :root[data-theme="abyss"][data-page="outposts"] .never .banner { right: 4px; bottom: 0; } }

:root[data-theme="abyss"][data-page="outposts"] .built-tiles li { font-weight: 400; font-size: 1.125rem; line-height: 1.5; color: var(--ab-foam-2); padding: 26px 28px 28px; }
:root[data-theme="abyss"][data-page="outposts"] .built-tiles b { font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 3.6rem); color: var(--ab-foam); line-height: 1.05; margin-bottom: 8px; }
:root[data-theme="abyss"][data-page="outposts"] .built-team { font-size: 1.125rem; }

:root[data-theme="abyss"][data-page="outposts"] #screens { background: none; border: 0; color: var(--ab-foam); padding-block: 0 clamp(60px, 7vw, 100px); overflow: hidden; }
:root[data-theme="abyss"][data-page="outposts"] #screens::before { display: none; }
:root[data-theme="abyss"][data-page="outposts"] #screens h2 { color: var(--ab-foam); }
:root[data-theme="abyss"][data-page="outposts"] #screens p { color: var(--ab-foam-2); font-size: 1.1875rem; }
:root[data-theme="abyss"][data-page="outposts"] #screens .op-slide-band,
:root[data-theme="abyss"][data-page="outposts"] #screens .screens-head {
  max-width: min(calc(var(--maxw, 1180px) + 80px), calc(100% - 2 * var(--gutter, 20px)));
  background: var(--ao-panel); border: 1px solid var(--ao-line-2);
  padding-left: clamp(26px, 4.4vw, 64px); padding-right: clamp(26px, 4.4vw, 64px);
}
:root[data-theme="abyss"][data-page="outposts"] #screens .op-slide-band { border-bottom: 0; border-radius: 32px 32px 0 0; padding-top: clamp(26px, 4.4vw, 64px); padding-bottom: 20px; }
:root[data-theme="abyss"][data-page="outposts"] #screens .screens-head { border-top: 0; border-radius: 0 0 32px 32px; padding-top: 0; padding-bottom: clamp(26px, 4vw, 52px); margin-bottom: clamp(34px, 4.4vw, 58px); }
:root[data-theme="abyss"][data-page="outposts"] #screens a:focus-visible, :root[data-theme="abyss"][data-page="outposts"] #screens button:focus-visible { outline: 2px solid var(--ab-pink); }
:root[data-theme="abyss"][data-page="outposts"] .rail:focus-visible { outline: 2px solid var(--ab-pink); }
:root[data-theme="abyss"][data-page="outposts"] .rail-btn {
  background: var(--ao-panel); color: var(--ab-foam); border: 1px solid var(--ab-hair); box-shadow: none; width: 52px; height: 52px;
  transition: border-color 300ms var(--ab-ease), color 300ms var(--ab-ease), opacity 300ms var(--ab-ease);
}
@media (hover: hover) {
  :root[data-theme="abyss"][data-page="outposts"] .rail-btn:not(:disabled):hover { transform: none; box-shadow: none; border-color: var(--ab-pink); color: var(--ab-pink); }
}
:root[data-theme="abyss"][data-page="outposts"] .rail-btn:not(:disabled):active { transform: none; box-shadow: none; }

:root[data-theme="abyss"][data-page="outposts"] .contact::before { display: none; }
:root[data-theme="abyss"][data-page="outposts"] .contact p { color: var(--ab-foam-2); }

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="abyss"][data-page="outposts"] .rise { transform: translate3d(0, 24px, 0); }
  :root[data-theme="abyss"][data-page="outposts"] .rise.in { transform: none; transition: opacity 800ms var(--ab-ease), transform 1000ms var(--ab-ease); }
  @media (hover: hover) {
    :root[data-theme="abyss"][data-page="outposts"] :is(.decos li:hover img, .villains li:hover img) { transform: translateY(-3px); }
    :root[data-theme="abyss"][data-page="outposts"] :is(.sizes li:hover, .op-band:hover .op-band-n) { transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="abyss"][data-page="outposts"] :is(.isle, .beta-call, .beta-go, .film-play-dot, .rail-btn) { transition: none; }
}

:root[data-theme="abyss"][data-page="outposts"] .reel { max-width: 940px; margin-inline: auto; gap: 20px; }

:root[data-theme="abyss"][data-page="outposts"] main > .page-head > .wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: 20% 28% -4% -12%;
  background: radial-gradient(closest-side, rgba(3, 14, 22, 0.55) 0%, rgba(3, 14, 22, 0.4) 55%, rgba(3, 14, 22, 0) 100%);
}