@font-face {
  font-family: Geist;
  src: url("/assets/geist-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  font-family: Geist, system-ui, sans-serif;
  background: #061a2c;
  color: #f5faff;
  --navy: #061a2c;
  --blue: #1198f4;
  --line: #3c566a;
  --pale: #e9f6ff;
  --ink: #071f34;
  --muted: #a9bfd1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }

button {
  cursor: pointer;
  color: inherit;
  border: 0;
}

button:disabled { cursor: default; }
a { color: inherit; }
h1, h2, p { margin: 0; }

:focus-visible {
  outline: 2px solid #73cdff;
  outline-offset: 3px;
}

.icons {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
  pointer-events: none;
}

.icon {
  display: block;
  inline-size: 1.35em;
  block-size: 1.35em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.screen {
  min-block-size: 100vh;
  min-block-size: 100dvh;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-block: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(162deg, #082236 0%, var(--navy) 49%, #071d2e 100%);
  overscroll-behavior: contain;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-block-size: 60px;
  padding-inline: 3px;
  margin-block-end: clamp(16px, 4vh, 34px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  inline-size: 30px;
  block-size: 36px;
  object-fit: contain;
}

.brand h1 {
  font-size: clamp(1.2rem, 5.5vw, 1.53rem);
  font-weight: 710;
  letter-spacing: -.047em;
  line-height: 1.12;
}

.count {
  flex: none;
  font-size: .9rem;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

#short-view { touch-action: pinch-zoom; }

.video-frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #020d17;
  border-radius: 13px;
  border: 1px solid #527189;
}

.video-frame video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.media-message {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  border-radius: 8px;
  background: #071526eb;
  padding: 9px 12px;
  font-size: .8rem;
  text-align: center;
}

.seek {
  display: block;
  inline-size: 100%;
  block-size: 22px;
  appearance: none;
  margin: 8px 0 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  --progress: 0%;
  --track: linear-gradient(to right, #0cadfa var(--progress), #516979 var(--progress));
}

.seek::-webkit-slider-runnable-track {
  block-size: 4px;
  border-radius: 8px;
  background: var(--track);
}
.seek::-moz-range-track {
  block-size: 4px;
  border-radius: 8px;
  background: var(--track);
}
.seek::-webkit-slider-thumb {
  appearance: none;
  block-size: 12px;
  inline-size: 12px;
  margin-block-start: -4px;
  border-radius: 50%;
  background: #5ccaff;
}
.seek::-moz-range-thumb {
  block-size: 12px;
  inline-size: 12px;
  border: 0;
  border-radius: 50%;
  background: #5ccaff;
}

.player-controls { display: flex; align-items: center; gap: 5px; }

.player-controls button,
.nav-button {
  min-block-size: 44px;
  min-inline-size: 44px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  background: transparent;
  font-size: .83rem;
  font-weight: 630;
  white-space: nowrap;
}

.player-controls .icon { font-size: 1rem; }

.player-controls .sound-button {
  background: #233d50;
  border-radius: 999px;
  padding-inline: 12px;
}

.player-controls .full-button {
  margin-inline-start: auto;
  padding-inline: 8px;
}

.highlights {
  margin-block-start: clamp(17px, 3vh, 26px);
  border-radius: 16px;
  padding: 17px 18px 21px;
  color: var(--ink);
  background: linear-gradient(143deg, #edf9ff, #dff0fc);
}

.highlights-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #365a78;
  font-size: .85rem;
  font-weight: 650;
}

.like-button {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: #c9e8ff;
  color: #0074bf;
  border-radius: 50%;
  font-size: 1.05rem;
}

.like-button[aria-pressed="true"] {
  background: #086aa8;
  color: #fff;
}

.like-button[aria-pressed="true"] .icon { fill: currentColor; }
.like-button:disabled { opacity: .65; }
.highlights :focus-visible { outline-color: #0065a5; }

.highlights h2 {
  font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  margin-block: 3px 7px;
  font-weight: 735;
  line-height: 1.15;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.highlights p {
  line-height: 1.49;
  max-inline-size: 35ch;
  font-size: .99rem;
}

.highlights .like-status {
  margin-block-start: 9px;
  color: #294e6a;
  font-size: .8rem;
}

.short-nav {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 4px;
  margin-block-start: clamp(24px, 6vh, 56px);
}

.nav-button {
  color: #f1f9ff;
  border-radius: 50%;
  background: #18364b;
  font-size: 1rem;
}

.nav-button:disabled { opacity: .3; }

.swipe-hint {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
  font-size: clamp(.76rem, 3.4vw, .89rem);
  line-height: 1.32;
  text-wrap: balance;
}

.swipe-icons {
  display: flex;
  gap: 12px;
  color: #d3ecff;
  font-size: 1rem;
}

.contact-view { padding-block-end: 18px; }

.back-button, .restart-button {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  gap: 4px;
  padding-inline: 4px;
  text-decoration: none;
  color: #d3ebfc;
  font-size: .85rem;
  font-weight: 630;
  background: transparent;
}

.back-button { margin-block-end: 9px; }

.contact-card {
  padding: clamp(18px, 5.6vw, 25px);
  border-radius: 16px;
  background: var(--pale);
  color: var(--ink);
  color-scheme: light;
}

.contact-card h2 {
  font-size: clamp(1.58rem, 7vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.contact-card p {
  margin-block-start: 10px;
  font-size: .94rem;
  line-height: 1.5;
}
.contact-card form {
  display: grid;
  gap: 14px;
  margin-block-start: 20px;
}
.contact-card :focus-visible { outline-color: #0266a8; }

.channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-inline-size: 0;
  padding: 4px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: #d2e8f8;
}
.channels label { position: relative; cursor: pointer; }
.channels input { position: absolute; opacity: 0; }

.channels span {
  display: grid;
  place-items: center;
  min-block-size: 42px;
  border-radius: 7px;
  font-weight: 640;
  font-size: .9rem;
}

.channels :checked + span { background: #fff; }
.channels :focus-visible + span { outline: 2px solid #0266a8; }
.field { display: grid; gap: 7px; }
.field label { font-size: .83rem; font-weight: 670; }

.field input {
  min-inline-size: 0;
  min-block-size: 48px;
  border: 1px solid #80a6c0;
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--ink);
  background: #fff;
}

.field input::placeholder { color: #63798b; }

.submit-button {
  min-block-size: 48px;
  padding: 9px 12px;
  background: #066aa7;
  color: #fff;
  border-radius: 9px;
  font-weight: 650;
}

.submit-button:disabled { opacity: .68; }
.contact-card .contact-status { color: #96262f; font-size: .85rem; margin: 0; }

.contact-success {
  display: grid;
  gap: 6px;
  margin-block-start: 19px;
  font-size: .94rem;
  line-height: 1.4;
}

.success-icon {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  margin-block-end: 3px;
  border-radius: 50%;
  background: #c6eadf;
  color: #145d46;
}
.restart-button { margin-block-start: 11px; }
.load-status, noscript { color: var(--muted); font-size: .95rem; }

body.is-expanded { overflow: hidden; }

.player.is-expanded {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #02070d;
  color: #fff;
  touch-action: auto;
}

.player.is-expanded .player-content {
  inline-size: 100%;
  block-size: 100%;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px auto;
}

.player.is-expanded .video-frame {
  display: block;
  min-inline-size: 0;
  min-block-size: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: #02070d;
}
.player.is-expanded .seek { margin: 0; }

@media (orientation: portrait) and (pointer: coarse) {
  .player.is-expanded .player-content {
    position: absolute;
    top: 50%;
    left: 50%;
    inline-size: 100vh;
    inline-size: 100dvh;
    block-size: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
    padding-inline: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom));
  }
}

@media (max-height: 640px) {
  .topbar { min-block-size: 45px; margin-block-end: 10px; }
  .short-nav { margin-block-start: 20px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .screen { max-inline-size: 450px; margin-inline: auto; }
  #short-view { touch-action: pan-y pinch-zoom; }
}

@media (min-width: 691px) and (min-height: 555px) and (pointer: fine) {
  body {
    display: grid;
    place-items: center;
    padding: 16px;
    background: radial-gradient(ellipse at 50% 58%, #0a3b5b 0%, #071f34 40%, #061a2c 73%);
  }

  .phone {
    inline-size: min(408px, calc(100vw - 32px));
    block-size: min(798px, calc(100vh - 32px));
    block-size: min(798px, calc(100dvh - 32px));
    padding: 8px;
    border: 1px solid #9aafbd;
    border-radius: 42px;
    background: #03101a;
    box-shadow: 0 0 0 2px #121e29, 0 24px 62px #0007, inset 0 0 0 2px #617585;
  }

  .screen {
    min-block-size: 0;
    block-size: 100%;
    padding: 15px 16px 20px;
    border-radius: 33px;
    overflow: auto;
    scrollbar-width: none;
  }

  .brand h1 { font-size: 1.51rem; }
  .highlights h2 { font-size: 1.6rem; }
}

@media (max-height: 750px) and (min-width: 691px) and (pointer: fine) {
  .topbar { min-block-size: 52px; margin-block-end: 16px; }
  .short-nav { margin-block-start: 25px; }
}

@media (hover: hover) {
  .player-controls button:hover:not(:disabled) { background: #25465d; }
  .nav-button:hover:not(:disabled) { background: #244960; }
  .like-button:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #0b82cf; }
  .submit-button:hover:not(:disabled) { background: #055985; }
  .back-button:hover, .restart-button:hover { text-decoration: underline; }
}

@media (prefers-reduced-motion: no-preference) {
  .highlights, .contact-card { animation: appear 150ms ease-out; }
  @keyframes appear { from { opacity: .65; transform: translateY(4px); } }
}