:root {
  color-scheme: dark;
  --ink: #020713;
  --surface: #071326;
  --surface-soft: rgba(8, 25, 49, 0.68);
  --line: rgba(84, 181, 255, 0.2);
  --line-bright: rgba(72, 207, 255, 0.5);
  --cyan: #56e5ff;
  --ice: #dff8ff;
  --text: #f5fbff;
  --muted: #91a9c2;
  --max: 1180px;
}

* { box-sizing: border-box; }

html { overflow-x: clip; scroll-behavior: smooth; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 4%, rgba(0, 130, 255, 0.15), transparent 34rem),
    radial-gradient(ellipse at 14% 42%, rgba(0, 77, 173, 0.08), transparent 38rem),
    linear-gradient(180deg, #020713, #030a17 62%, #020713);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body.viewer-open { overflow: hidden; }
a { color: inherit; }

.skip-link {
  position: fixed; top: -5rem; left: .75rem; z-index: 50;
  padding: .7rem 1rem; border-radius: .4rem; background: var(--text); color: var(--ink);
}
.skip-link:focus { top: .75rem; }

.preview-header,
.preview-main,
.preview-footer { width: min(calc(100% - 3rem), var(--max)); margin-inline: auto; }

.preview-header {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: 96px; border-bottom: 1px solid var(--line);
}

.brand-home { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-home img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(26,164,255,.45)); }
.brand-home strong { color: var(--ice); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }

.preview-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1.1rem; }
.preview-nav a {
  color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-decoration: none; text-transform: uppercase;
}
.preview-nav a:hover, .preview-nav a[aria-current="page"] { color: var(--cyan); }

.preview-hero { max-width: 940px; padding: clamp(5rem, 11vw, 9rem) 0 4.5rem; }
.eyebrow { margin: 0 0 1.25rem; color: var(--cyan); font-size: .7rem; font-weight: 760; letter-spacing: .23em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 1.5rem; font-size: clamp(3rem, 7.8vw, 6.7rem); font-weight: 300; letter-spacing: -.055em; line-height: .98; }
.preview-hero > p:last-child { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.28rem); }

.early-notice {
  display: grid; grid-template-columns: 210px 1fr; gap: 2rem;
  margin-bottom: 5rem; padding: 2rem; border: 1px solid var(--line-bright); border-radius: .7rem;
  background: linear-gradient(135deg, rgba(7,136,255,.12), rgba(8,25,49,.46));
}
.early-notice h2 { margin: 0; color: var(--ice); font-size: 1rem; letter-spacing: .09em; text-transform: uppercase; }
.early-notice p { margin: 0; color: var(--muted); }

.experience-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; margin-bottom: 7rem; }
.experience-card {
  position: relative; min-height: 290px; padding: 2.2rem; overflow: hidden;
  border: 1px solid var(--line); border-radius: .75rem;
  background: radial-gradient(circle at 100% 0%, rgba(0,136,255,.19), transparent 16rem), rgba(7,19,38,.72);
  text-decoration: none; transition: transform 180ms ease, border-color 180ms ease;
}
.experience-card:hover { border-color: var(--line-bright); transform: translateY(-3px); }
.experience-number { display: block; margin-bottom: 4.6rem; color: #55728e; font-size: .68rem; letter-spacing: .18em; }
.experience-card h2 { margin-bottom: .65rem; font-size: clamp(1.65rem,3vw,2.35rem); font-weight: 440; letter-spacing: -.03em; }
.experience-card p { max-width: 420px; margin: 0; color: var(--muted); }
.experience-card-arrow { position: absolute; right: 2rem; bottom: 1.7rem; color: var(--cyan); font-size: 1.5rem; }

.content-section { padding: 0 0 7rem; }
.section-heading { display: grid; grid-template-columns: minmax(220px, .65fr) 1.35fr; gap: 4rem; margin-bottom: 3rem; }
.section-heading h2 { margin: 0; font-size: clamp(2.2rem,5vw,4rem); font-weight: 330; letter-spacing: -.045em; line-height: 1.04; }
.section-heading p { max-width: 650px; margin: .5rem 0 0; color: var(--muted); }

.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.theme { padding: 1.6rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.theme h3 { margin-bottom: .55rem; color: var(--ice); font-size: .92rem; letter-spacing: .04em; }
.theme p { margin: 0; color: var(--muted); font-size: .9rem; }

.playback-chain { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2rem 0; }
.playback-chain span { padding: .65rem .85rem; border: 1px solid var(--line); border-radius: .35rem; background: var(--surface-soft); color: var(--ice); font-size: .78rem; }
.playback-chain span:not(:last-child)::after { margin-left: 1.3rem; color: var(--cyan); content: "→"; }

.split-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-panel { padding: 2rem; border: 1px solid var(--line); border-radius: .65rem; background: rgba(7,19,38,.56); }
.info-panel h3 { font-size: 1.2rem; }
.info-panel p, .info-panel li { color: var(--muted); }
.info-panel ul { margin: 0; padding-left: 1.15rem; }

.truth-block {
  margin-bottom: 7rem; padding: clamp(2rem,5vw,4rem); border: 1px solid var(--line-bright); border-radius: .8rem;
  background: radial-gradient(circle at 90% 15%, rgba(0,136,255,.14), transparent 22rem), rgba(5,15,31,.75);
}
.truth-block h2 { max-width: 760px; margin-bottom: 1.2rem; font-size: clamp(2.4rem,6vw,5.5rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; }
.truth-block p { max-width: 780px; margin-bottom: 0; color: var(--muted); }

.roadmap-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem 2rem; margin: 0; padding: 0; list-style: none; }
.roadmap-list li { padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }

.development-notice { margin-bottom: 5rem; padding: 1.2rem 1.4rem; border-left: 2px solid var(--cyan); background: rgba(8,25,49,.48); color: var(--muted); }
.development-notice strong { color: var(--ice); }

.preview-footer { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--line); color: #678098; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.preview-footer p { margin: 0; }

/* Galleries */
.gallery-hero { max-width: 900px; padding: clamp(4rem,9vw,7rem) 0 2.5rem; }
.gallery-hero h1 { margin-bottom: 1rem; }
.gallery-hero > p:last-child { max-width: 680px; color: var(--muted); font-size: 1.06rem; }
.gallery-notice { margin-bottom: 3rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--muted); font-size: .9rem; }
.gallery-notice strong { color: var(--ice); }
.gallery-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.2rem; padding-bottom: 7rem; }
.gallery-grid.mobile-gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
.gallery-item { min-width: 0; margin: 0; }
.gallery-link {
  display: block; overflow: hidden; border: 1px solid var(--line); border-radius: .55rem;
  background: #02050c; text-decoration: none; transition: border-color 160ms ease, transform 160ms ease;
}
.gallery-link:hover { border-color: var(--line-bright); transform: translateY(-2px); }
.gallery-link img { display: block; width: 100%; height: auto; object-fit: contain; }
.mobile-gallery .gallery-link { display: grid; min-height: 420px; place-items: center; }
.mobile-gallery .gallery-link img { width: auto; max-width: 100%; max-height: 620px; }
.gallery-item figcaption { padding: .8rem .15rem 0; color: var(--muted); font-size: .83rem; }

.screenshot-viewer {
  width: min(calc(100% - 2rem), 1800px); max-width: none;
  height: calc(100dvh - 2rem); max-height: none; margin: auto; padding: 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: .5rem;
  background: rgba(0,4,12,.98); color: var(--text);
}
.screenshot-viewer::backdrop { background: rgba(0,4,12,.96); }
.viewer-shell { height: 100%; padding: 4.5rem 1rem 2rem; overflow: auto; }
.viewer-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 2; min-width: 44px; min-height: 44px;
  border: 1px solid var(--line-bright); border-radius: 999px; background: #071326; color: white;
  cursor: pointer; font: inherit; font-size: 1.3rem;
}
.viewer-figure { display: grid; justify-items: center; min-width: 0; margin: 0; }
.viewer-image { display: block; width: auto; max-width: min(100%, 1800px); height: auto; max-height: none; object-fit: contain; }
.mobile-preview-page .viewer-image { max-width: min(430px, 100%); }
.viewer-caption { max-width: 900px; margin-top: 1rem; color: var(--muted); text-align: center; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

@media (max-width: 820px) {
  .early-notice, .section-heading { grid-template-columns: 1fr; gap: 1rem; }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gallery-grid.mobile-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .preview-header, .preview-main, .preview-footer { width: min(calc(100% - 2rem), var(--max)); }
  .preview-header { align-items: flex-start; flex-direction: column; gap: .75rem; padding: 1rem 0; }
  .brand-home img { width: 38px; height: 38px; }
  .preview-nav { justify-content: flex-start; gap: .65rem 1rem; }
  .preview-hero { padding: 4rem 0 3rem; }
  .experience-grid, .split-panel, .gallery-grid, .gallery-grid.mobile-gallery, .roadmap-list { grid-template-columns: 1fr; }
  .experience-card { min-height: 245px; padding: 1.5rem; }
  .experience-number { margin-bottom: 3.2rem; }
  .theme-grid { grid-template-columns: 1fr; }
  .playback-chain { display: grid; }
  .playback-chain span:not(:last-child)::after { float: right; margin-left: .6rem; transform: rotate(90deg); }
  .mobile-gallery .gallery-link { min-height: 0; }
  .preview-footer { flex-direction: column; gap: .5rem; }
}

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