:root {
      color-scheme: dark;
      --pink: #fe2c55;
      --cyan: #25f4ee;
    }

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

    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      background: #080808;
      color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }

    body {
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
    }

    button, input { font: inherit; }

    button {
      color: inherit;
      background: none;
      border: 0;
      cursor: pointer;
      touch-action: manipulation;
    }

    a { color: inherit; text-decoration: none; }

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

    svg {
      display: block;
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .layout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 44px;
      width: 100%;
      height: 100%;
      height: 100dvh;
      background:
        radial-gradient(ellipse at 15% 35%, #122a2b 0, transparent 48%),
        radial-gradient(ellipse at 85% 75%, #29111a 0, transparent 48%),
        #080808;
    }

    .sidebar, .desktop-info { display: none; }

    .phone {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      isolation: isolate;
      background: #050505;
    }

    .topbar {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 10px;
      padding: 16px 16px 32px;
      padding-top: max(16px, env(safe-area-inset-top));
      background: linear-gradient(#000a, transparent);
      pointer-events: none;
    }

    .topbar > * { pointer-events: auto; }

    .brand {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 11px;
      background: #ffffff0e;
      font-size: 24px;
      font-weight: 900;
      text-shadow: -2px -1px var(--cyan), 2px 1px var(--pink);
    }

    .tabs { display: flex; gap: 23px; }

    .tab {
      position: relative;
      padding: 10px 0;
      color: #ffffffa6;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      text-shadow: 0 2px 8px #000;
    }

    .tab.active { color: #fff; }

    .tab.active::after {
      content: "";
      position: absolute;
      left: calc(50% - 10px);
      bottom: 0;
      width: 20px;
      height: 3px;
      border-radius: 5px;
      background: #fff;
    }

    .icon-button {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #0003;
    }

    .feed {
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      overscroll-behavior-y: contain;
      scrollbar-width: none;
    }

    .feed::-webkit-scrollbar { display: none; }

    .slide {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      background:
        radial-gradient(ellipse at 65% 30%, #21535266, transparent 55%),
        radial-gradient(ellipse at 25% 75%, #772b4066, transparent 50%),
        #0b0e13;
    }

    .slide:nth-child(3n + 2) {
      background:
        radial-gradient(ellipse at 30% 40%, #314d7666, transparent 55%),
        linear-gradient(150deg, #141b29, #09090d);
    }

    .slide:nth-child(3n) {
      background:
        radial-gradient(ellipse at 60% 40%, #85394966, transparent 55%),
        linear-gradient(150deg, #24121b, #09090d);
    }

    video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .shade {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(transparent 42%, #0002 60%, #000b 88%, #000e);
    }

    .video-toggle {
      position: absolute;
      z-index: 2;
      top: 80px;
      left: 0;
      right: 74px;
      bottom: 240px;
      display: grid;
      place-items: center;
    }

    .big-play {
      display: grid;
      place-items: center;
      width: 76px;
      height: 76px;
      border: 1px solid #ffffff30;
      border-radius: 50%;
      background: #0005;
      backdrop-filter: blur(8px);
    }

    .big-play svg {
      width: 35px;
      height: 35px;
      fill: white;
      margin-left: 4px;
    }

    .status {
      position: absolute;
      z-index: 8;
      top: 39%;
      left: 22px;
      right: 80px;
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 12px;
      text-align: center;
      pointer-events: none;
      text-shadow: 0 2px 8px #000;
    }

    .status p { font-size: 13px; line-height: 1.7; margin: 0; }

    .spinner {
      width: 25px;
      height: 25px;
      border: 2px solid #ffffff30;
      border-top-color: var(--cyan);
      border-right-color: var(--pink);
      border-radius: 50%;
      animation: spin .9s linear infinite;
    }

    .retry {
      pointer-events: auto;
      background: white;
      color: black;
      padding: 10px 20px;
      border-radius: 9px;
      font-weight: 700;
    }

    .actions {
      position: absolute;
      z-index: 6;
      right: 12px;
      bottom: calc(215px + env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 21px;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 47px;
      height: 47px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), #153b48 45%, var(--pink));
      font-size: 17px;
      font-weight: 800;
    }

    .action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 48px;
      padding: 0;
      text-shadow: 0 2px 8px #000;
    }

    .action svg {
      width: 30px;
      height: 30px;
      filter: drop-shadow(0 2px 4px #0008);
    }

    .action span {
      max-width: 65px;
      font-size: 10px;
      text-align: center;
      overflow-wrap: anywhere;
    }

    .like svg { fill: white; }
    .like[aria-pressed="true"] { color: var(--pink); }
    .like[aria-pressed="true"] svg { fill: var(--pink); animation: pop .25s ease; }

    .record {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 7px solid #202020;
      border-radius: 50%;
      background: conic-gradient(#666, #111, #777, #111, #666);
    }

    .record::after {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cyan), var(--pink));
    }

    .playing .record { animation: spin 5s linear infinite; }

    .caption {
      position: absolute;
      z-index: 5;
      left: 18px;
      right: 80px;
      bottom: calc(113px + env(safe-area-inset-bottom));
      text-shadow: 0 2px 7px #000;
    }

    .caption h2 {
      font-size: 17px;
      margin: 0 0 9px;
      overflow-wrap: anywhere;
    }

    .caption p {
      font-size: 13px;
      line-height: 1.7;
      margin: 0 0 10px;
      color: #ffffffe0;
    }

    .tags { color: #ffffffb3; }

    .audio-line {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #ffffffc9;
    }

    .audio-line svg { width: 14px; height: 14px; }

    .cta {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      margin-top: 14px;
      padding: 10px 13px;
      border: 1px solid #ffffff25;
      border-radius: 8px;
      background: #ffffff15;
      backdrop-filter: blur(12px);
      font-size: 12px;
      font-weight: 650;
    }

    .cta svg { width: 16px; height: 16px; }

    .timeline {
      position: absolute;
      z-index: 10;
      left: 16px;
      right: 16px;
      bottom: calc(79px + env(safe-area-inset-bottom));
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .seek {
      flex: 1;
      min-width: 0;
      height: 20px;
      margin: 0;
      accent-color: white;
      cursor: pointer;
    }

    .time {
      font-size: 9px;
      color: #ffffffa6;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .bottom-nav {
      position: absolute;
      z-index: 20;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      min-height: 67px;
      padding: 7px 10px;
      padding-bottom: max(7px, env(safe-area-inset-bottom));
      border-top: 1px solid #ffffff16;
      background: #090909ed;
      backdrop-filter: blur(16px);
    }

    .nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 50px;
      padding: 4px;
      color: #aaa;
      font-size: 9px;
    }

    .nav-link.active { color: white; }
    .nav-link svg { width: 23px; height: 23px; }

    .counter {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      font-size: 9px;
      color: #aaa;
    }

    #count { color: white; font-size: 17px; font-weight: 800; letter-spacing: 1px; }

    .modal {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 16px;
      padding-bottom: max(16px, env(safe-area-inset-bottom));
      background: #000b;
      backdrop-filter: blur(8px);
    }

    .modal-card {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 430px;
      max-height: 80vh;
      max-height: 80dvh;
      border: 1px solid #ffffff1a;
      border-radius: 22px;
      background: #181818;
      overflow: hidden;
    }

    .modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px 20px;
      border-bottom: 1px solid #ffffff10;
    }

    .modal-head h2 { margin: 0; font-size: 17px; }
    .modal-body { padding: 12px; overflow: auto; overscroll-behavior: contain; }

    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      padding: 14px 12px;
      border-radius: 10px;
      text-align: left;
      min-height: 48px;
    }

    .option:hover { background: #ffffff09; }
    .option[aria-pressed="true"] { color: var(--cyan); background: #25f4ee0d; }

    .video-number {
      display: grid;
      place-items: center;
      width: 42px;
      height: 54px;
      flex-shrink: 0;
      border-radius: 8px;
      background: linear-gradient(140deg, #194043, #49202c);
      font-weight: 800;
    }

    .video-label { flex: 1; font-size: 13px; overflow-wrap: anywhere; }
    .small { color: #888; font-size: 11px; }

    .share-body { padding: 8px; }
    .share-body p { color: #aaa; font-size: 13px; line-height: 1.7; }

    .share-input {
      width: 100%;
      padding: 12px;
      border: 1px solid #ffffff25;
      border-radius: 9px;
      background: #0c0c0c;
      color: white;
      font-size: 12px;
    }

    .select-button {
      width: 100%;
      margin-top: 12px;
      padding: 12px;
      border-radius: 9px;
      background: var(--pink);
      font-weight: 700;
    }

    .policies {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 18px 10px;
      color: #888;
      font-size: 11px;
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pop { 50% { transform: scale(1.25); } }

    @media (min-width: 900px) {
      .layout { padding: 24px; }

      .phone {
        width: 420px;
        height: min(860px, calc(100dvh - 48px));
        flex-shrink: 0;
        border: 1px solid #ffffff1a;
        border-radius: 26px;
        box-shadow: 0 30px 100px #0009;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        width: 180px;
        padding: 26px 0;
      }

      .desktop-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 50px;
        font-size: 20px;
        font-weight: 850;
      }

      .desktop-link {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 0;
        color: #aaa;
        font-size: 16px;
        font-weight: 650;
        text-align: left;
      }

      .desktop-link.active { color: var(--pink); }
      .desktop-foot { margin-top: auto; font-size: 11px; color: #666; }

      .desktop-info { display: block; width: 220px; }
      .kicker { color: var(--cyan); font-size: 10px; letter-spacing: 3px; }
      .desktop-info h1 { font-size: 42px; line-height: 1.1; letter-spacing: -2px; }
      .desktop-info p { font-size: 13px; color: #999; line-height: 1.8; }

      .scroll-guide {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 30px;
        color: #aaa;
        font-size: 11px;
      }

      .scroll-guide svg { color: var(--pink); }
      .modal { align-items: center; }
    }

    @media (max-width: 360px) {
      .tabs { gap: 15px; }
      .tab { font-size: 12px; }
      .caption { left: 13px; right: 72px; }
      .actions { right: 8px; }
    }

    @media (max-height: 650px) {
      .actions { gap: 13px; bottom: calc(185px + env(safe-area-inset-bottom)); }
      .caption p { font-size: 12px; margin-bottom: 6px; }
      .caption h2 { margin-bottom: 6px; }
      .cta { margin-top: 8px; padding: 8px 12px; }
    }

    @media (max-height: 450px) and (orientation: landscape) {
      .caption { bottom: 100px; }
      .caption p, .audio-line, .record { display: none; }
      .actions { bottom: 105px; gap: 12px; flex-direction: row; }
      .avatar { display: none; }
      .video-toggle { top: 65px; bottom: 155px; }
      .status { top: 26%; }
      .topbar { padding-top: 8px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; }
    }
  
.brand{font-style:normal}.desktop-brand{font-size:20px}.save[aria-pressed=true]{color:var(--cyan)}.save[aria-pressed=true] svg{fill:#25f4ee44}.caption h2{font-size:17px;line-height:1.3}.actions{gap:18px;bottom:230px}.clip-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tags{font-size:11px}.empty-state,.credit{font-size:12px;line-height:1.7;color:#a8a8b3;padding:12px}.source-link{display:block;padding:7px 12px;color:#81c7c9;font-size:11px}.feed{direction:ltr}.caption{direction:inherit}html[dir=rtl] .caption{direction:rtl;text-align:right}.sidebar,.desktop-info{direction:inherit}.layout{direction:ltr}.desktop-info p,.desktop-info h1{direction:inherit}.desktop-info h1{font-size:46px}.option{min-height:60px}button.cta{cursor:pointer}@media(max-height:700px){.actions{gap:12px;bottom:205px}.caption{bottom:106px}.caption h2{font-size:15px}.caption p{font-size:12px}.cta{margin-top:8px;padding:8px 12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important}}

:root{--cyan:#73e8e4;--pink:#ff71bf}.slide{isolation:isolate;background:#111123!important}.slide:before{content:"";position:absolute;inset:-20px;background-image:linear-gradient(#0a0b21bb,#151126bb),var(--scene);background-size:cover;background-position:center;filter:blur(16px);z-index:-1}.slide video{height:100%;object-fit:contain;position:absolute;inset:0}.scene-label{position:absolute;left:24px;right:24px;top:100px;display:flex;flex-direction:column;gap:9px;pointer-events:none}.scene-label>span{font-size:42px;font-weight:950;letter-spacing:-2px;color:#fff;text-shadow:2px 2px #ff71bf}.scene-label small{font-size:10px;letter-spacing:1px;color:#b5f5ef}.scene-label b{font-size:11px;font-weight:500;color:#d2bfd8}.shade{background:linear-gradient(180deg,#05071211 20%,transparent 55%,#070913e6 83%)}.actions{right:9px;bottom:245px;gap:13px}.caption{right:30px;left:24px}.caption h2{max-width:90%}.clip-description{-webkit-line-clamp:3;max-width:95%}.tags{display:none}.desktop-info h1{font-size:43px}.desktop-brand{font-size:17px}.brand{font-size:22px}.phone{background:#111123}.desktop-info .kicker{color:#ff95cb}@media(max-height:700px){.scene-label{top:82px;gap:5px}.scene-label>span{font-size:30px}.scene-label small{font-size:9px}.caption{bottom:108px}.caption h2{font-size:16px}.clip-description{font-size:11px}.audio-line{display:none}.actions{bottom:260px;gap:7px}.action{width:38px}.action svg{width:22px;height:22px}}@media(max-width:600px){.scene-label{top:90px}.caption p{line-height:1.4}.actions{bottom:260px}.scene-label>span{font-size:38px}}