@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 900; font-display: swap; src: url(/fonts/inter-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family: Anton; font-display: swap; src: url(/fonts/anton-latin-400-normal.woff2) format("woff2"); }

:root {
  --bg: #12081A; --plum: #2B1630; --ink: #160B1A; --pink: #FF6FAE; --pink2: #F25C9A; --yel: #FFD84D;
  --mint: #6FF0C8; --pale: #FFE7F1; --dim: rgba(255, 231, 241, .7); --line: rgba(255, 214, 232, .18);
  --col: min(100vw, calc(100svh * 9 / 16));
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--pale); font: 500 15px/1.4 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

/* the feed: one full-screen slide per video, snap like TikTok */
.feed {
  height: 100svh; width: var(--col); margin: 0 auto; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain; position: relative;
}
.feed::-webkit-scrollbar { display: none; }
.slide { position: relative; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; background: #0B0510; }
.slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0B0510; }
.tap { position: absolute; inset: 0; z-index: 1; }
.paused { position: absolute; left: 50%; top: 46%; z-index: 2; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: rgba(18, 8, 26, .55); display: grid; place-items: center; opacity: 0; transform: scale(.8); transition: .18s; pointer-events: none; }
.paused::after { content: ""; border-left: 26px solid var(--pale); border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 8px; }
.slide.is-paused .paused { opacity: 1; transform: scale(1); }

/* text over the bottom of the video (the videos keep that area free) */
.meta { position: absolute; left: 0; right: 64px; bottom: 0; z-index: 2; padding: 56px 14px calc(18px + var(--safe-b)) 14px;
  background: linear-gradient(to top, rgba(12, 5, 16, .92) 30%, rgba(12, 5, 16, 0)); pointer-events: none; }
.tag { display: inline-block; font: 700 11px/1 Inter; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: var(--mint);
  border-radius: 99px; padding: 5px 9px; }
.meta h1 { margin: 8px 0 4px; font: 400 26px/1.05 Anton, Inter, sans-serif; letter-spacing: .01em; color: #fff; text-wrap: balance; }
.meta p { margin: 0; color: var(--dim); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* action rail, right side (inside the Reels safe column of the videos) */
.rail { position: absolute; right: 6px; bottom: calc(96px + var(--safe-b)); z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.rail button { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 10.5px/1 Inter; color: var(--pale); text-shadow: 0 1px 6px #000; }
.rail .ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(18, 8, 26, .62);
  border: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rail svg { width: 22px; height: 22px; fill: none; stroke: var(--pale); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail button:active .ic { transform: scale(.92); }

/* progress (tap/drag to seek) */
.progress { position: absolute; left: 0; right: 0; bottom: var(--safe-b); height: 14px; z-index: 4; display: flex; align-items: flex-end; touch-action: none; }
.progress i { display: block; height: 3px; width: 100%; background: rgba(255, 255, 255, .18); position: relative; }
.progress i::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.progress:hover i, .progress.drag i { height: 5px; }

/* top bar */
.top { position: fixed; z-index: 10; top: 0; left: 50%; transform: translateX(-50%); width: var(--col); display: flex; align-items: center; gap: 10px;
  padding: calc(12px + var(--safe-t)) 14px 22px; background: linear-gradient(to bottom, rgba(12, 5, 16, .75), rgba(12, 5, 16, 0)); pointer-events: none; }
.brand { pointer-events: auto; text-decoration: none; font: 400 22px/1 Anton, Inter, sans-serif; letter-spacing: .02em; color: var(--pale); }
.brand b { font-weight: 400; color: var(--pink); }
.chip { font: 700 10.5px/1 Inter; letter-spacing: .06em; text-transform: uppercase; color: var(--pale); border: 1px solid var(--line);
  background: rgba(18, 8, 26, .55); border-radius: 99px; padding: 6px 9px; }

.mute { position: fixed; z-index: 11; left: 50%; top: calc(58px + var(--safe-t)); transform: translateX(-50%); padding: 9px 14px; border-radius: 99px;
  background: rgba(255, 216, 77, .95); color: var(--ink); font: 700 13px/1 Inter; box-shadow: 0 6px 24px rgba(0, 0, 0, .4); pointer-events: none; }
.hint { position: fixed; z-index: 11; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: 2px; font: 700 12px/1 Inter; color: var(--pale); text-shadow: 0 1px 8px #000; pointer-events: none; animation: nudge 1.4s ease-in-out infinite; }
.hint .arrow { font-size: 22px; }
@keyframes nudge { 50% { transform: translate(-50%, -10px); } }

/* about / end slide */
.about { display: grid; place-items: center; background: radial-gradient(120% 70% at 50% 35%, #3A1E40, var(--bg) 70%); }
.about-in { width: 100%; padding: 70px 26px calc(40px + var(--safe-b)); }
.word { margin: 0; font: 400 clamp(44px, 14vw, 64px)/.95 Anton, Inter, sans-serif; color: var(--pale); letter-spacing: .01em; }
.word b { font-weight: 400; color: var(--pink); text-shadow: 0 0 24px rgba(255, 111, 174, .6); }
.lead { margin: 12px 0 24px; font: 900 21px/1.2 Inter; color: #fff; }
.steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; color: var(--dim); font-size: 14.5px; }
.steps b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--yel); color: var(--ink); font: 900 14px/1 Inter; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; font: 700 14px/1 Inter; text-decoration: none;
  background: var(--pink2); color: #fff; box-shadow: 0 6px 0 #8E2A5C; }
.btn.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; color: var(--pale); }
.small { margin-top: 22px; color: rgba(255, 231, 241, .5); font-size: 12px; }

/* sources sheet */
.sheet { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(6, 2, 10, .6); opacity: 0; transition: opacity .2s; }
.sheet-card { position: absolute; left: 50%; bottom: 0; width: var(--col); max-height: 78svh; overflow-y: auto; transform: translate(-50%, 102%);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1); background: #1C0E22; border-top: 1px solid var(--line); border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(26px + var(--safe-b)); }
.sheet.open { pointer-events: auto; }
.sheet.open .sheet-bg { opacity: 1; }
.sheet.open .sheet-card { transform: translate(-50%, 0); }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 10px; }
.x { position: absolute; right: 12px; top: 10px; width: 36px; height: 36px; border-radius: 50%; color: var(--dim); }
.sheet h2 { margin: 6px 40px 6px 0; font: 400 24px/1.1 Anton, Inter; color: #fff; }
.sheet h3 { margin: 18px 0 8px; font: 700 11.5px/1 Inter; letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.sheet h3.warn { color: var(--yel); }
.sheet ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--dim); font-size: 14px; }
.sheet .src a { color: var(--pink); text-underline-offset: 3px; }
.sheet .cred { margin-top: 16px; font-size: 12.5px; color: rgba(255, 231, 241, .55); }

.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(40px + var(--safe-b)); transform: translate(-50%, 20px); opacity: 0; transition: .2s;
  background: var(--pale); color: var(--ink); font: 700 13px/1 Inter; padding: 10px 14px; border-radius: 99px; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* desktop: phone-width column in the middle */
@media (min-aspect-ratio: 3/4) {
  body { background: radial-gradient(70% 90% at 50% 40%, #2B1630, var(--bg)); }
  .feed { box-shadow: 0 0 0 1px var(--line), 0 30px 80px rgba(0, 0, 0, .6); }
}
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } .sheet-card, .toast, .paused { transition: none; } }

[hidden] { display: none !important; }