@font-face {
font-family: "ALNST";
src: url("./fonts/ALNST_0.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

:root {
--bg: #05070d;
--bg-deep: #020409;

--surface: #0a1019;
--surface-2: #0d1722;
--surface-3: #132230;

--text: #edfaff;
--text-bright: #ffffff;
--muted: #8497a8;
--muted-bright: #a9bdcb;

--accent: #68e8ff;
--accent-bright: #b9f7ff;
--accent-dark: #249db8;

--violet: #9b7cff;
--pink: #e58cff;

--border: rgba(104, 232, 255, 0.18);
--border-bright: rgba(104, 232, 255, 0.42);

--success: #73e0b0;
--danger: #ef8f9d;
--locked: #53616d;

--radius: 14px;
--max-width: 1100px;
}

/* BASE */

html {
background: var(--bg-deep);
color: var(--text);
min-height: 100%;
font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
  }

body {
margin: 0;
min-height: 100vh;
background:
radial-gradient(
circle at 50% 0%,
rgba(54, 117, 150, 0.14),
transparent 38%
),
linear-gradient(
180deg,
#05070d 0%,
#03050a 100%
);
color: var(--text);
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}

/* BACKGROUND GRID / ATMOSPHERE */

body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;

background-image:
linear-gradient(
rgba(104, 232, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(104, 232, 255, 0.035) 1px,
transparent 1px
);

background-size: 48px 48px;

mask-image:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.9),
transparent 90%
);
}

body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;

background:
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.012) 0px,
rgba(255, 255, 255, 0.012) 1px,
transparent 1px,
transparent 4px
);

opacity: 0.35;
}

/* APP */

#app {
position: relative;
z-index: 1;

min-height: 100vh;

display: flex;
flex-direction: column;
}

/* HEADER */

.topbar {
position: relative;
z-index: 10;

width: 100%;
min-height: 74px;

display: flex;
align-items: center;
justify-content: space-between;

padding: 16px 28px;

border-bottom: 1px solid var(--border);

background:
linear-gradient(
180deg,
rgba(5, 9, 16, 0.96),
rgba(5, 9, 16, 0.84)
);

backdrop-filter: blur(12px);
}

/* BRAND */

.brand {
appearance: none;

border: 0;
background: transparent;

color: inherit;

padding: 0;
margin: 0;

cursor: pointer;
text-align: left;

display: flex;
flex-direction: column;
gap: 2px;
}

.brand-main,
.brand-sub,
.nav button,
.kicker,
.primary-button,
.secondary-button,
.progress-label,
.item-number,
.item-title,
.item-state,
.content-type,
.badge,
.section-heading h1,
.hero h1 {
font-family: "ALNST", Arial, Helvetica, sans-serif;
}

.brand-main {
color: var(--text-bright);

font-size: 1.15rem;
font-weight: 700;

letter-spacing: 0.12em;

text-shadow:
0 0 12px rgba(104, 232, 255, 0.2);
}

.brand-sub {
color: var(--accent);

font-size: 0.57rem;
font-weight: 500;

letter-spacing: 0.25em;

opacity: 0.8;
}

/* NAVIGATION */

.nav {
display: flex;
align-items: center;
gap: 6px;
}

.nav button {
appearance: none;

border: 1px solid transparent;
background: transparent;

color: var(--muted);

padding: 9px 14px;

border-radius: 7px;

cursor: pointer;

font-size: 0.75rem;
font-weight: 600;

letter-spacing: 0.12em;
text-transform: uppercase;

transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}

.nav button:hover {
color: var(--accent-bright);

border-color: var(--border);

background: rgba(104, 232, 255, 0.045);

box-shadow:
inset 0 0 16px rgba(104, 232, 255, 0.035);
}

.nav button:active {
background: rgba(104, 232, 255, 0.08);
}

/* MAIN SCREEN */

#screen-container {
position: relative;
z-index: 2;

width: 100%;
flex: 1;

display: block;
}

.screen {
position: relative;

width: min(
var(--max-width),
calc(100% - 40px)
);

margin: 0 auto;

padding: 60px 0 80px;
}

/* HOME / HERO */

.hero {
position: relative;

min-height: 650px;

display: flex;
flex-direction: column;
justify-content: center;

padding: 70px 6vw;

overflow: hidden;

border-bottom: 1px solid var(--border);
}

.hero::before {
content: "";

position: absolute;

width: 700px;
height: 700px;

right: -240px;
top: 50%;

transform: translateY(-50%);

border-radius: 50%;

border:
1px solid rgba(104, 232, 255, 0.08);

box-shadow:
0 0 100px rgba(43, 190, 224, 0.04),
inset 0 0 100px rgba(43, 190, 224, 0.025);

pointer-events: none;

z-index: 0;
}

.hero::after {
content: "";

position: absolute;

width: 470px;
height: 470px;

right: -125px;
top: 50%;

transform: translateY(-50%);

border-radius: 50%;

border:
1px solid rgba(155, 124, 255, 0.08);

pointer-events: none;

z-index: 0;
}

.hero > * {
position: relative;
z-index: 2;
}

.home-promo {
  display: block;
  width: min(100%, 700px);
  max-height: 380px;
  object-fit: contain;
  margin: 28px auto 32px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hero {
  padding-top: 36px;
  padding-bottom: 44px;
}

.hero h1 {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* KICKER */

.kicker {
display: inline-flex;
align-items: center;
gap: 10px;

width: fit-content;

margin-bottom: 18px;

color: var(--accent);

font-size: 0.72rem;
font-weight: 600;

letter-spacing: 0.22em;
text-transform: uppercase;
}

.kicker::before {
content: "";

width: 28px;
height: 1px;

background: var(--accent);

box-shadow:
0 0 8px rgba(104, 232, 255, 0.7);
}

/* HERO TITLE */

.hero h1 {
max-width: 760px;

margin: 0;

color: var(--text-bright);

font-size: clamp(4.2rem, 11vw, 9rem);

font-weight: 700;

line-height: 0.82;

letter-spacing: 0.025em;

text-transform: uppercase;

text-shadow:
0 0 30px rgba(104, 232, 255, 0.12);
}

.hero h1 br {
display: block;
}

.hero p {
max-width: 620px;

margin: 34px 0 0;

color: var(--muted-bright);

font-size: 1rem;
line-height: 1.75;

letter-spacing: 0.015em;
}

/* PRIMARY BUTTON */

.primary-button {
width: fit-content;

margin-top: 34px;

padding: 15px 25px;

border:
1px solid var(--accent);

border-radius: 8px;

background:
linear-gradient(
135deg,
rgba(104, 232, 255, 0.16),
rgba(104, 232, 255, 0.045)
);

color: var(--accent-bright);

font-size: 0.78rem;
font-weight: 700;

letter-spacing: 0.14em;

text-transform: uppercase;

cursor: pointer;

box-shadow:
0 0 18px rgba(104, 232, 255, 0.08),
inset 0 0 20px rgba(104, 232, 255, 0.025);

transition:
transform 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease;
}

.primary-button:hover {
transform: translateY(-2px);

background:
linear-gradient(
135deg,
rgba(104, 232, 255, 0.25),
rgba(104, 232, 255, 0.08)
);

box-shadow:
0 0 25px rgba(104, 232, 255, 0.16),
inset 0 0 20px rgba(104, 232, 255, 0.06);
}

.primary-button:active {
transform: translateY(0);
}

/* PROGRESS */

.progress-wrap {
width: min(520px, 100%);

margin-top: 50px;

padding-top: 18px;

border-top: 1px solid var(--border);
}

.progress-label {
display: flex;
justify-content: space-between;
gap: 20px;

margin-bottom: 10px;

color: var(--muted);

font-size: 0.7rem;
font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;
}

.progress-track {
position: relative;

width: 100%;
height: 5px;

overflow: hidden;

border-radius: 999px;

background: rgba(104, 232, 255, 0.08);
}

.progress-bar {
height: 100%;

border-radius: inherit;

background:
linear-gradient(
90deg,
var(--accent-dark),
var(--accent),
var(--accent-bright)
);

box-shadow:
0 0 14px rgba(104, 232, 255, 0.55);

transition: width 0.35s ease;
}

/* SECTION HEADINGS */

.section-heading {
position: relative;

margin-bottom: 38px;

padding-bottom: 24px;

border-bottom: 1px solid var(--border);
}

.section-heading h1 {
margin: 0;

color: var(--text-bright);

font-size: clamp(2.4rem, 5vw, 4rem);

font-weight: 700;

line-height: 0.95;

letter-spacing: 0.04em;

text-transform: uppercase;
}

.section-description {
max-width: 680px;

margin: 18px 0 0;

color: var(--muted-bright);

line-height: 1.7;

font-size: 0.95rem;
}

/* SECONDARY BUTTON */

.secondary-button {
appearance: none;

padding: 10px 16px;

border:
1px solid var(--border);

border-radius: 7px;

background: rgba(104, 232, 255, 0.025);

color: var(--muted-bright);

font-size: 0.72rem;
font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

cursor: pointer;

transition:
color 0.2s ease,
border-color 0.2s ease,
background 0.2s ease;
}

.secondary-button:hover {
color: var(--accent-bright);

border-color: var(--border-bright);

background: rgba(104, 232, 255, 0.07);
}

/* STORY LIST */

.story-list {
display: flex;
flex-direction: column;

gap: 10px;
}

.story-item {
position: relative;

display: grid;

grid-template-columns: 72px 1fr auto;

align-items: center;

gap: 20px;

min-height: 86px;

padding: 16px 20px;

border:
1px solid var(--border);

border-radius: var(--radius);

background:
linear-gradient(
135deg,
rgba(13, 23, 34, 0.9),
rgba(8, 14, 22, 0.9)
);

color: var(--text);

transition:
border-color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}

.story-item:hover {
border-color: var(--border-bright);

background:
linear-gradient(
135deg,
rgba(19, 34, 48, 0.95),
rgba(8, 15, 23, 0.95)
);

transform: translateX(3px);
}

.item-number {
color: var(--accent);

font-size: 0.7rem;
font-weight: 700;

letter-spacing: 0.12em;
}

.item-title {
color: var(--text);

font-size: 1rem;
font-weight: 600;

letter-spacing: 0.05em;
}

.item-meta {
margin-top: 5px;

color: var(--muted);

font-family: Arial, Helvetica, sans-serif;

font-size: 0.76rem;
line-height: 1.4;
}

.item-state {
color: var(--muted);

font-size: 0.68rem;
font-weight: 600;

letter-spacing: 0.1em;

text-transform: uppercase;

text-align: right;
}

/* MENU */

.menu-dropdown {
  position: relative;
}

.menu-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 42px;
  padding: 0 16px;
  box-sizing: border-box;
  border: 1px solid var(--border-bright);
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(104, 232, 255, 0.08),
    rgba(155, 124, 255, 0.12)
  );
  color: var(--text-bright);
  font-family: "ALNST", Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.menu-dropdown summary::-webkit-details-marker {
  display: none;
}

.menu-dropdown summary::after {
  content: "▾";
  margin-left: 9px;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.menu-dropdown[open] summary::after {
  transform: rotate(180deg);
}

.menu-dropdown summary:hover {
  background: linear-gradient(
    135deg,
    rgba(104, 232, 255, 0.16),
    rgba(155, 124, 255, 0.2)
  );
  border-color: var(--accent);
  box-shadow:
    0 0 12px rgba(104, 232, 255, 0.12),
    inset 0 0 12px rgba(104, 232, 255, 0.04);
}

.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  padding: 6px;
  box-sizing: border-box;
  background: rgba(10, 16, 25, 0.97);
  border: 1px solid var(--border-bright);
  border-radius: 10px;
  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(104, 232, 255, 0.08);
  z-index: 100;
}

.menu-panel button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.menu-panel button:hover {
  background: rgba(104, 232, 255, 0.09);
  border-color: var(--border);
  color: var(--accent-bright);
}

.menu-panel button:active {
  background: rgba(155, 124, 255, 0.14);
}

/* GENERIC CARDS */

.card,
.archive-card,
.content-card {
border:
1px solid var(--border);

border-radius: var(--radius);

background:
linear-gradient(
145deg,
rgba(13, 23, 34, 0.94),
rgba(7, 12, 19, 0.94)
);

box-shadow:
inset 0 0 30px rgba(104, 232, 255, 0.015);
}

/* CONTENT VIEW */

.content-card {
padding: clamp(24px, 5vw, 48px);
}

.content-type {
color: var(--accent);

font-size: 0.7rem;
font-weight: 700;

letter-spacing: 0.18em;

text-transform: uppercase;
}

.content-card h1 {
margin: 12px 0 0;

color: var(--text-bright);

font-family: "ALNST", Arial, Helvetica, sans-serif;

font-size: clamp(2rem, 5vw, 4rem);

font-weight: 700;

line-height: 1;

letter-spacing: 0.035em;

text-transform: uppercase;
}

.content-description {
max-width: 720px;

margin-top: 20px;

color: var(--muted-bright);

font-family: Arial, Helvetica, sans-serif;

font-size: 0.95rem;

line-height: 1.75;
}

/* LOCAL CONTENT / ARTICLES / INTERVIEWS */

.embedded-content {
margin-top: 32px;
}

.embedded-article {
max-width: 820px;

margin: 0 auto;

color: var(--muted-bright);

font-family: Arial, Helvetica, sans-serif;

font-size: 0.98rem;

line-height: 1.8;
}

.embedded-article p {
margin: 0 0 1.35rem;
}

.embedded-article h1,
.embedded-article h2,
.embedded-article h3,
.embedded-article h4 {
color: var(--text-bright);

font-family: "ALNST", Arial, Helvetica, sans-serif;

line-height: 1.3;
}

.embedded-article h2 {
margin: 2.5rem 0 1rem;

color: var(--accent-bright);

font-size: 1.4rem;
}

.embedded-article h3 {
margin: 2.25rem 0 1rem;

color: var(--accent);

font-size: 1.05rem;

letter-spacing: 0.03em;
}

.embedded-article strong {
color: var(--text-bright);
}

.embedded-article em {
color: var(--accent-bright);
}

.embedded-article blockquote {
margin: 1.5rem 0;

padding: 12px 20px;

border-left: 2px solid var(--violet);

color: var(--muted-bright);

background:
rgba(155, 124, 255, 0.04);
}

/* LOCAL IMAGES */

.image-wrap {
margin-top: 32px;

display: flex;
justify-content: center;
}

.content-image {
display: block;

max-width: 100%;
height: auto;

border:
1px solid var(--border);

border-radius: 10px;

box-shadow:
0 0 30px rgba(104, 232, 255, 0.05);
}

.image-gallery {
display: flex;
flex-direction: column;
gap: 20px;

margin-top: 32px;
}

.image-gallery .content-image {
width: 100%;
}

/* MEDIA PLACEHOLDER */

.media-placeholder {
position: relative;

min-height: 320px;

margin-top: 32px;

display: flex;
align-items: center;
justify-content: center;

overflow: hidden;

border:
1px solid var(--border);

border-radius: 10px;

background:
radial-gradient(
circle at center,
rgba(104, 232, 255, 0.06),
transparent 60%
),
#050a11;
}

.media-placeholder::before {
content: "";

position: absolute;
inset: 20px;

border:
1px dashed rgba(104, 232, 255, 0.14);

border-radius: 7px;

pointer-events: none;
}

.media-placeholder::after {
content: "MEDIA";

position: absolute;

color: rgba(104, 232, 255, 0.25);

font-family: "ALNST", Arial, sans-serif;

font-size: 0.7rem;

letter-spacing: 0.25em;
}

.external-note {
margin-top: 15px;

color: var(--muted);

font-family: Arial, Helvetica, sans-serif;

font-size: 0.75rem;
line-height: 1.5;
}

/* CONTENT ACTIONS */

.content-actions {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-top: 24px;
}

.content-actions .secondary-button,
.content-actions .primary-button {
  position: relative;
  top: 0;
  margin: 0;
  width: 160px;
  min-width: 160px;
  max-width: 160px;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
}

/* ARCHIVE */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.archive-card {
  min-height: 150px;
}

.archive-card:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .archive-grid {
    grid-template-columns: 1fr;
  }

  .archive-card:last-child {
    grid-column: auto;
  }
}

.archive-card h3 {
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-family: "ALNST", Arial, Helvetica, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.archive-card p {
  margin: 8px 0 0;
  padding: 0;
  color: #a9bdcb;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.55;
}

.archive-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-bright);
  background:
    linear-gradient(
      135deg,
      rgba(104, 232, 255, 0.12),
      rgba(155, 124, 255, 0.09)
    ),
    var(--surface-2);
  box-shadow:
    0 0 24px rgba(104, 232, 255, 0.08),
    inset 0 0 24px rgba(104, 232, 255, 0.03);
}

.archive-card:hover h3 {
  color: #ffffff;
}

.archive-card:hover p {
  color: #c9dce7;
}

.embedded-article img {
  display: block;
  width: auto;
  max-width: 85%;
  max-height: 600px;
  height: auto;
  margin: 28px auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ABOUT */

.content-card p {
font-family: Arial, Helvetica, sans-serif;

color: var(--muted-bright);

line-height: 1.75;
}

/* FOOTER */

.footer {
position: relative;
z-index: 5;

width: 100%;

display: flex;
align-items: center;
justify-content: space-between;

gap: 20px;

padding: 20px 28px;

border-top: 1px solid var(--border);

color: var(--muted);

font-family: Arial, Helvetica, sans-serif;

font-size: 0.68rem;

letter-spacing: 0.05em;

background: rgba(3, 6, 11, 0.8);
}

.text-button {
appearance: none;

border: 0;
background: transparent;

padding: 0;

color: var(--muted);

font-family: "ALNST", Arial, Helvetica, sans-serif;

font-size: 0.62rem;

letter-spacing: 0.1em;

text-transform: uppercase;

cursor: pointer;
}

.text-button:hover {
color: var(--accent);
}

/* FOCUS STATES */

button:focus-visible {
outline:
1px solid var(--accent);

outline-offset: 3px;

box-shadow:
0 0 14px rgba(104, 232, 255, 0.18);
}

/* RESPONSIVE */

@media (max-width: 800px) {

.topbar {
padding: 14px 18px;
}

.brand-sub {
display: none;
}

.nav {
gap: 2px;
}

.nav button {
padding: 8px 9px;

font-size: 0.62rem;

letter-spacing: 0.08em;

}

.screen {
width: min(
var(--max-width),
calc(100% - 28px)
);

padding-top: 38px;
padding-bottom: 55px;

}

.hero {
min-height: 590px;
padding:
  55px 22px;
}

.hero h1 {
font-size: clamp(
4rem,
18vw,
7rem
);
}

.hero p {
font-size: 0.9rem;
}

.hero::before {
width: 500px;
height: 500px;

right: -300px;

}

.hero::after {
width: 340px;
height: 340px;

right: -215px;

}

.story-item {
grid-template-columns: 48px 1fr;

gap: 10px;

padding: 16px;

}

.item-state {
grid-column: 2;

text-align: left;

}

.archive-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.footer {
flex-direction: column;
align-items: flex-start;

padding:
  18px;

}
}

@media (max-width: 520px) {

.topbar {
min-height: 64px;

padding:
  12px 14px;

}

.brand-main {
font-size: 0.95rem;
}

.nav button {
padding:
7px 6px;

font-size: 0.55rem;

}

.screen {
width:
calc(100% - 20px);
}

.hero {
min-height: 560px;

padding:
  48px 18px;

}

.hero h1 {
font-size: clamp(
3.5rem,
18vw,
5.5rem
);
}

.hero p {
margin-top: 26px;

font-size: 0.86rem;

}

.primary-button {
width: 100%;

text-align: center;

}

.progress-wrap {
margin-top: 38px;
}

.section-heading h1 {
font-size: 2.4rem;
}

.story-item {
min-height: 76px;

padding: 14px;

}

.item-title {
font-size: 0.9rem;
}

.item-meta {
font-size: 0.7rem;
}

.archive-grid {
grid-template-columns:
1fr;
}

.content-card {
padding: 22px 18px;
}

.content-card > h1 {
  height: 3.2em;
  margin-bottom: 16px;
  line-height: 1.6;
  display: flex;
  align-items: center;
}

.media-placeholder {
min-height: 230px;
}

.embedded-article {
font-size: 0.92rem;
line-height: 1.75;
}
.embedded-article img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
}

/* VIDEO PLAYER */

.video-wrap {
  width: min(100%, 760px);
  margin: 24px auto 0;

  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;

  box-shadow:
    0 0 30px rgba(104, 232, 255, 0.08),
    inset 0 0 30px rgba(104, 232, 255, 0.04);
}

/* Local videos */
.video-wrap .local-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #000;
}

/* YouTube embeds */
.video-wrap iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}
video:fullscreen::cue {
  font-size: 2.8rem;
}

video:-webkit-full-screen::cue {
  font-size: 2.8rem;
}
/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}

/* SUPPLEMENTARY MATERIAL */

.supplementary-list {
display: flex;
flex-direction: column;

gap: 8px;

margin-top: 10px;
padding-top: 10px;

border-top: 1px dashed rgba(155, 124, 255, 0.18);
}

.story-item--supplementary {
min-height: 68px;

padding: 12px 18px;

border-color: rgba(155, 124, 255, 0.16);

background:
linear-gradient(
135deg,
rgba(21, 15, 34, 0.85),
rgba(10, 8, 18, 0.85)
);
}

.story-item--supplementary:hover {
border-color: rgba(229, 140, 255, 0.4);

background:
linear-gradient(
135deg,
rgba(31, 20, 46, 0.92),
rgba(12, 9, 20, 0.92)
);
}

.story-item--supplementary .item-number {
color: var(--violet);

font-size: 1rem;
text-align: center;
}

.story-item--supplementary .item-title {
font-size: 0.9rem;
}

.story-item--supplementary .item-state {
color: var(--pink);
}

.story-item.locked,
.story-item:disabled {
opacity: 0.45;
cursor: not-allowed;
}

.story-item.locked:hover,
.story-item:disabled:hover {
transform: none;
border-color: var(--border);
}

.story-item--supplementary.locked:hover,
.story-item--supplementary:disabled:hover {
border-color: rgba(155, 124, 255, 0.16);
}

.story-item.completed .item-state {
color: var(--success);
}

/* ARCHIVE — EMPTY STATE */

.archive-card--empty {
opacity: 0.5;
cursor: default;
}

.archive-card--empty:hover {
transform: none;

border-color: var(--border);

background:
linear-gradient(
145deg,
rgba(13, 23, 34, 0.94),
rgba(7, 12, 19, 0.94)
);
}

/* SUBTITLES */

@font-face {
  font-family: "MyClematis";
  src: url("./fonts/Stay With Me.otf") format("opentype");
  font-weight: normal;
  letter-spacing: 0.1em;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "UTTE";
  src: url("./fonts/Hello Baby.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BlackSorrow";
  src: url("./fonts/Roffelia.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "RoMH";
  src: url("./fonts/Cherish Free.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AllIn";
  src: url("./fonts/kosalsayshy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cure";
  src: url("./fonts/Aquifer.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "BlinkGone";
  src: url("./fonts/Neuropol.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Wiege";
  src: url("./fonts/Milkyway DEMO.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karma";
  src: url("./fonts/nikotinusDEMO.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "News";
  src: url("./fonts/ALNST_0.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Shared appearance for HTML captions and native fullscreen captions. */
.video-wrap { position: relative; }
.custom-subtitles {
  position: absolute;
  left: 5%; right: 5%; bottom: calc(46px + 12%);
  z-index: 20; pointer-events: none; text-align: center;
}
.custom-subtitles[hidden] { display: none; }
.subtitle-line {
  display: block; width: fit-content; max-width: 100%; margin: .15em auto;
  color: #fff; font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 400;
  line-height: 1.3; text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: -1px -1px 2px #000, 1px -1px 2px #000,
               -1px 1px 2px #000, 1px 1px 2px #000, 0 2px 4px #000;
}
.subtitle-font-styled .subtitle-line,
.subtitle-font-styled video::cue { font-family: Arial, Helvetica, sans-serif; }
video::cue {
  color: #fff; background-color: transparent; font-size: 1.8rem;
  font-weight: 400; text-shadow: -1px -1px 2px #000, 1px 1px 2px #000;
}
.subtitle-font-readable .subtitle-line,
.subtitle-font-readable .subtitle-line * {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700; letter-spacing: .08em; transform: none;
}
.subtitle-font-readable video::cue {
  font-family: Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: .08em;
}
.subtitle-font-styled.subtitle-alien-stage-intro .subtitle-line,
.subtitle-font-styled video.subtitle-alien-stage-intro::cue { font-family: "News", sans-serif; }
.subtitle-font-styled.subtitle-r1-main .subtitle-line,
.subtitle-font-styled video.subtitle-r1-main::cue { font-family: "MyClematis", sans-serif; }
.subtitle-font-styled.subtitle-r2-main .subtitle-line,
.subtitle-font-styled video.subtitle-r2-main::cue { font-family: "UTTE", sans-serif; }
.subtitle-font-styled.subtitle-r3-main .subtitle-line,
.subtitle-font-styled video.subtitle-r3-main::cue { font-family: "BlackSorrow", sans-serif; }
.subtitle-font-styled.subtitle-r5-main .subtitle-line,
.subtitle-font-styled video.subtitle-r5-main::cue { font-family: "RoMH", sans-serif; }
.subtitle-font-styled.subtitle-all-in-main .subtitle-line,
.subtitle-font-styled video.subtitle-all-in-main::cue { font-family: "AllIn", sans-serif; }
.subtitle-font-styled.subtitle-top-3-main .subtitle-line,
.subtitle-font-styled video.subtitle-top-3-main::cue { font-family: "News", sans-serif; }
.subtitle-font-styled.subtitle-r6-main .subtitle-line,
.subtitle-font-styled video.subtitle-r6-main::cue { font-family: "Cure", sans-serif; }
.subtitle-font-styled.subtitle-final-main .subtitle-line,
.subtitle-font-styled video.subtitle-final-main::cue { font-family: "BlinkGone", sans-serif; }
.subtitle-font-styled.subtitle-wiege-main .subtitle-line,
.subtitle-font-styled video.subtitle-wiege-main::cue { font-family: "Wiege", sans-serif; }
.subtitle-font-styled.subtitle-karma-main .subtitle-line,
.subtitle-font-styled video.subtitle-karma-main::cue { font-family: "Karma", sans-serif; }
.subtitle-line .sua0, video::cue(.sua0) { color: #d0fef5; }
.subtitle-font-styled .subtitle-line .sua0,
.subtitle-font-styled video::cue(.sua0) { font-family: "News", sans-serif; }
.subtitle-line .news, video::cue(.news) { color: #cccccc; }
.subtitle-font-styled .subtitle-line .news,
.subtitle-font-styled video::cue(.news) { font-family: "News", sans-serif; }
.subtitle-line .sua1, video::cue(.sua1) { color: #d0fef5; }
.subtitle-font-styled .subtitle-line .sua1,
.subtitle-font-styled video::cue(.sua1) { font-family: "MyClematis", sans-serif; }
.subtitle-line .mizi1, video::cue(.mizi1) { color: #fab2ea; }
.subtitle-font-styled .subtitle-line .mizi1,
.subtitle-font-styled video::cue(.mizi1) { font-family: "MyClematis", sans-serif; }
.subtitle-line .mzsu1, video::cue(.mzsu1) { color: #c0a4cc; }
.subtitle-font-styled .subtitle-line .mzsu1,
.subtitle-font-styled video::cue(.mzsu1) { font-family: "MyClematis", sans-serif; }
.subtitle-line .till1, video::cue(.till1) { color: #2d93ad; }
.subtitle-font-styled .subtitle-line .till1,
.subtitle-font-styled video::cue(.till1) { font-family: "UTTE", sans-serif; }
.subtitle-line .ivan1, video::cue(.ivan1) { color: #a63d40; }
.subtitle-font-styled .subtitle-line .ivan1,
.subtitle-font-styled video::cue(.ivan1) { font-family: "BlackSorrow", sans-serif; }
.subtitle-line .luka1, video::cue(.luka1) { color: #ffe26e; }
.subtitle-font-styled .subtitle-line .luka1,
.subtitle-font-styled video::cue(.luka1) { font-family: "RoMH", sans-serif; }
.subtitle-line .mizi2, video::cue(.mizi2) { color: #fab2ea; }
.subtitle-font-styled .subtitle-line .mizi2,
.subtitle-font-styled video::cue(.mizi2) { font-family: "RoMH", sans-serif; }
.subtitle-line .mzlu, video::cue(.mzlu) { color: #fdcaac; }
.subtitle-font-styled .subtitle-line .mzlu,
.subtitle-font-styled video::cue(.mzlu) { font-family: "RoMH", sans-serif; }
.subtitle-line .hyuna1, video::cue(.hyuna1) { color: #f4a65a; }
.subtitle-font-styled .subtitle-line .hyuna1,
.subtitle-font-styled video::cue(.hyuna1) { font-family: "AllIn", sans-serif; }
.subtitle-line .hyuna1a, video::cue(.hyuna1a) { color: #ad82d7; }
.subtitle-font-styled .subtitle-line .hyuna1a,
.subtitle-font-styled video::cue(.hyuna1a) { font-family: "AllIn", sans-serif; }
.subtitle-line .hyuna1b, video::cue(.hyuna1b) { color: #8fa0fa; }
.subtitle-font-styled .subtitle-line .hyuna1b,
.subtitle-font-styled video::cue(.hyuna1b) { font-family: "AllIn", sans-serif; }
.subtitle-line .luka1a, video::cue(.luka1a) { color: #e7e2b8; }
.subtitle-font-styled .subtitle-line .luka1a,
.subtitle-font-styled video::cue(.luka1a) { font-family: "AllIn", sans-serif; }
.subtitle-line .till2, video::cue(.till2) { color: #2d93ad; }
.subtitle-font-styled .subtitle-line .till2,
.subtitle-font-styled video::cue(.till2) { font-family: "Cure", sans-serif; }
.subtitle-line .ivan2, video::cue(.ivan2) { color: #a63d40; }
.subtitle-font-styled .subtitle-line .ivan2,
.subtitle-font-styled video::cue(.ivan2) { font-family: "Cure", sans-serif; }
.subtitle-line .ivti, video::cue(.ivti) { color: #6a6877; }
.subtitle-font-styled .subtitle-line .ivti,
.subtitle-font-styled video::cue(.ivti) { font-family: "Cure", sans-serif; }
.subtitle-line .luka2, video::cue(.luka2) { color: #8169b5; }
.subtitle-font-styled .subtitle-line .luka2,
.subtitle-font-styled video::cue(.luka2) { font-family: "BlinkGone", sans-serif; }
.subtitle-line .till3, video::cue(.till3) { color: #2d93ad; }
.subtitle-font-styled .subtitle-line .till3,
.subtitle-font-styled video::cue(.till3) { font-family: "BlinkGone", sans-serif; }
.subtitle-line .tilu, video::cue(.tilu) { color: #577eb1; }
.subtitle-font-styled .subtitle-line .tilu,
.subtitle-font-styled video::cue(.tilu) { font-family: "BlinkGone", sans-serif; }
.subtitle-line .luka3, video::cue(.luka3) { color: #8169b5; }
.subtitle-font-styled .subtitle-line .luka3,
.subtitle-font-styled video::cue(.luka3) { font-family: "Wiege", sans-serif; }
.subtitle-line .hyuna2, video::cue(.hyuna2) { color: #deb841; }
.subtitle-font-styled .subtitle-line .hyuna2,
.subtitle-font-styled video::cue(.hyuna2) { font-family: "Wiege", sans-serif; }
.subtitle-line .hylu, video::cue(.hylu) { color: #b0917b; }
.subtitle-font-styled .subtitle-line .hylu,
.subtitle-font-styled video::cue(.hylu) { font-family: "Wiege", sans-serif; }
.subtitle-line .mizi3, video::cue(.mizi3) { color: #fab2ea; }
.subtitle-font-styled .subtitle-line .mizi3,
.subtitle-font-styled video::cue(.mizi3) { font-family: "Karma", sans-serif; }
.subtitle-line .mizi3a, video::cue(.mizi3a) { color: #fe7fc0; }
.subtitle-font-styled .subtitle-line .mizi3a,
.subtitle-font-styled video::cue(.mizi3a) { font-family: "Karma", sans-serif; }
.subtitle-line .sua2, video::cue(.sua2) { color: #d0fef5; }
.subtitle-font-styled .subtitle-line .sua2,
.subtitle-font-styled video::cue(.sua2) { font-family: "Karma", sans-serif; }
.subtitle-line .mzsu2, video::cue(.mzsu2) { color: #e5d8f0; }
.subtitle-font-styled .subtitle-line .mzsu2,
.subtitle-font-styled video::cue(.mzsu2) { font-family: "Karma", sans-serif; }
.subtitle-line .isaac, video::cue(.isaac) { color: #5c513e; }
.subtitle-font-styled .subtitle-line .isaac,
.subtitle-font-styled video::cue(.isaac) { font-family: "Karma", sans-serif; }
.subtitle-font-styled.subtitle-r1-main .subtitle-line,
.subtitle-font-styled video.subtitle-r1-main::cue { letter-spacing: .1em; }
video:fullscreen::cue {
  background-color: transparent; font-size: clamp(1.5rem, 3vw, 3rem);
}
video:-webkit-full-screen::cue {
  background-color: transparent; font-size: clamp(1.5rem, 3vw, 3rem);
}
.subtitle-settings {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 10px; border-top: 1px solid var(--border);
  background: rgba(3, 6, 11, .96);
}
.subtitle-control-button {
  appearance: none; min-height: 36px; padding: 6px 12px;
  border: 1px solid var(--border-bright); border-radius: 6px;
  background: rgba(104,232,255,.04); color: var(--muted-bright);
  font-family: "ALNST", Arial, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.subtitle-control-button:hover, .subtitle-control-button:focus-visible {
  border-color: var(--accent); color: var(--accent-bright);
  background: rgba(104,232,255,.1);
}
.image-gallery .content-image, .image-wrap .content-image {
  display: block; width: auto; height: auto;
  max-width: min(100%, 680px); max-height: 85vh;
  margin-inline: auto; object-fit: contain;
}
.image-gallery:has(.content-image:nth-child(3)) .content-image {
  max-width: min(100%, 900px); max-height: none;
}
.embedded-content img {
  display: block; width: auto; height: auto; max-width: min(100%, 680px);
  margin-inline: auto;
}
.associated-track { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); }
.associated-track h2 { margin-bottom: 12px; }
@media (max-width: 520px) {
  .custom-subtitles { left: 3%; right: 3%; bottom: calc(46px + 15%); }
  .subtitle-line { font-size: clamp(.9rem, 4.8vw, 1.35rem); }
}