:root{
      --bg:#0b1220;
      --surface: rgba(0,0,0,.18);
      --surfaceHover: rgba(0,0,0,.22);
      --inputBg: rgba(0,0,0,.18);
      --panel:rgba(255,255,255,.06);
      --panel2:rgba(255,255,255,.09);
      --text:#e8eefc;
      --muted:rgba(232,238,252,.72);
      --stroke:rgba(255,255,255,.14);
      --shadow: 0 18px 55px rgba(0,0,0,.55);
      --radius:18px;
      --ring: 0 0 0 4px rgba(95, 170, 255, .18);
      --grad: radial-gradient(1200px 500px at 10% -5%, rgba(95,170,255,.35), transparent 55%),
              radial-gradient(900px 420px at 100% 0%, rgba(180,90,255,.28), transparent 55%),
              radial-gradient(900px 600px at 50% 110%, rgba(0,255,200,.12), transparent 60%);
      --pill: rgba(255,255,255,.08);
      --pillHover: rgba(255,255,255,.11);
      --pillActive: rgba(95,170,255,.22);
      --pillText: rgba(232,238,252,.78);
      --pillActiveText: #e8eefc;
      --btn: rgba(255,255,255,.08);
      --btnHover: rgba(255,255,255,.12);
      --badgeBg: rgba(255,255,255,.08);
      --badgeText: rgba(232,238,252,.78);
      --badgeActiveBg: rgba(95,170,255,.18);
      --badgeActiveText: rgba(232,238,252,.92);
      --thumbOverlay: linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,.08));
      --placeholderBg: rgba(0,0,0,.25);
      --playColor: rgba(232,238,252,.92);
      --durationBg: rgba(0,0,0,.45);
      --durationText: rgba(232,238,252,.9);
      --emptyBg: rgba(0,0,0,.14);
      --modalBg: rgba(0,0,0,.62);
      --dialogBg: rgba(12, 18, 34, .92);
      --dialogHeadBg: rgba(255,255,255,.04);
      --iconBtnBg: rgba(255,255,255,.06);
      --iconBtnHover: rgba(255,255,255,.10);
    }
    :root[data-theme="light"]{
      --bg: #f3f7ff;
      --surface: rgba(255,255,255,.82);
      --surfaceHover: rgba(255,255,255,.95);
      --inputBg: rgba(255,255,255,.94);
      --text: #10203e;
      --muted: rgba(16,32,62,.72);
      --stroke: rgba(16,32,62,.16);
      --shadow: 0 18px 45px rgba(16,32,62,.14);
      --ring: 0 0 0 4px rgba(33, 118, 255, .2);
      --pill: rgba(16,32,62,.06);
      --pillHover: rgba(16,32,62,.12);
      --pillActive: rgba(33,118,255,.18);
      --pillText: rgba(16,32,62,.8);
      --pillActiveText: #10203e;
      --btn: rgba(16,32,62,.08);
      --btnHover: rgba(16,32,62,.14);
      --badgeBg: rgba(16,32,62,.08);
      --badgeText: rgba(16,32,62,.8);
      --badgeActiveBg: rgba(33,118,255,.24);
      --badgeActiveText: #10203e;
      --thumbOverlay: linear-gradient(to top, rgba(16,32,62,.22), rgba(16,32,62,.06));
      --placeholderBg: rgba(16,32,62,.24);
      --playColor: rgba(255,255,255,.95);
      --durationBg: rgba(16,32,62,.72);
      --durationText: rgba(255,255,255,.95);
      --emptyBg: rgba(255,255,255,.7);
      --modalBg: rgba(16,32,62,.5);
      --dialogBg: rgba(255,255,255,.96);
      --dialogHeadBg: rgba(16,32,62,.05);
      --iconBtnBg: rgba(16,32,62,.08);
      --iconBtnHover: rgba(16,32,62,.14);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    html{ color-scheme: light; }
    html[data-theme="dark"]{ color-scheme: dark; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color:var(--text);
      background: var(--bg);
      /* background-image: var(--grad); */
      line-height:1.45;
    }

    .wrap{
      max-width: 1200px;
      margin: 0 auto;
      padding: 28px 18px 64px;
    }

    header{
      display:flex;
      gap:16px;
      align-items:flex-end;
      justify-content:space-between;
      flex-wrap:wrap;
      margin-bottom: 18px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width: 240px;
    }
    h1{
      margin-top:20px;
      font-size: clamp(22px, 2.5vw, 34px);
      letter-spacing: -0.02em;
    }
    .subtitle{
      margin:0;
      color:var(--muted);
      font-size: 14px;
      max-width: 62ch;
    }

    .controls{
      display:flex;
      gap:10px;
      align-items:center;
      width:min(520px, 100%);
    }
    .search{
      flex: 1;
      position:relative;
    }
    .search input{
      width:100%;
      padding: 12px 12px 12px 40px;
      border-radius: 999px;
      border: 1px solid var(--stroke);
      background: var(--inputBg);
      color: var(--text);
      outline: none;
      box-shadow: none;
      transition: .15s ease;
    }
    .search input:focus{
      box-shadow: var(--ring);
      border-color: rgba(95,170,255,.55);
    }
    .search svg{
      position:absolute;
      left:14px;
      top:50%;
      transform:translateY(-50%);
      opacity:.75;
      pointer-events:none;
    }
    .count{
      color:var(--muted);
      font-size: 13px;
      white-space: nowrap;
    }

    /* Tabs / pills */
    .tabs{
      display:flex;
      gap:2px;
      flex-wrap:wrap;
      padding: 10px;
      border: 1px solid var(--stroke);
      border-radius: 18px;
      background: var(--surface);
      box-shadow: 0 8px 30px rgba(0,0,0,.28);
      margin: 18px 0 18px;
    }
    .tab{
      border: 1px solid transparent;
      background: var(--pill);
      color: var(--pillText);
      padding: 10px;
      border-radius: 999px;
      cursor:pointer;
      transition: .15s ease;
      font-size: 13px;
      display:flex;
      gap:8px;
      align-items:center;
      user-select:none;
    }
    .tab:hover{ background: var(--pillHover); }
    .tab[aria-selected="true"]{
      background: var(--pillActive);
      color: var(--pillActiveText);
      border-color: rgba(95,170,255,.45);
      box-shadow: 0 10px 25px rgba(95,170,255,.10);
    }
    .badge{
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--badgeBg);
      color: var(--badgeText);
    }
    .tab[aria-selected="true"] .badge{
      background: var(--badgeActiveBg);
      color: var(--badgeActiveText);
    }

    /* Grid */
    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      margin-top: 12px;
    }
    .card{
      grid-column: span 4;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--stroke);
      overflow:hidden;
      box-shadow: 0 14px 40px rgba(0,0,0,.30);
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
      display:flex;
      flex-direction:column;
      min-height: 320px;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(255,255,255,.22);
      background: var(--surfaceHover);
    }

    .thumb{
      position:relative;
      aspect-ratio: 16/9;
      background:
        linear-gradient(135deg, rgba(95,170,255,.22), rgba(180,90,255,.18)),
        radial-gradient(600px 220px at 30% 30%, rgba(255,255,255,.12), transparent 55%),
        rgba(255,255,255,.06);
      border-bottom: 1px solid var(--stroke);
      display:flex;
      align-items:center;
      justify-content:center;
      padding: 12px;
      cursor: pointer;
    }
    .thumb:hover{ filter: brightness(1.04); }
    .thumb:focus-visible{
      outline: none;
      box-shadow: var(--ring);
    }
    .thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background: var(--thumbOverlay);
      pointer-events:none;
    }
    .thumb .placeholder{
      position:relative;
      z-index:1;
      width: 76px;
      height: 76px;
      border-radius: 20px;
      display:grid;
      place-items:center;
      background: var(--placeholderBg);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
    .play{
      width: 0;
      height: 0;
      border-left: 22px solid var(--playColor);
      border-top: 14px solid transparent;
      border-bottom: 14px solid transparent;
      margin-left: 4px;
      filter: drop-shadow(0 8px 12px rgba(0,0,0,.35));
    }
    .duration{
      position:absolute;
      right: 10px;
      bottom: 10px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--durationBg);
      border: 1px solid rgba(255,255,255,.14);
      font-size: 12px;
      color: var(--durationText);
      backdrop-filter: blur(8px);
    }

    .body{
      padding: 14px 14px 12px;
      display:flex;
      flex-direction:column;
      gap: 10px;
      flex:1;
    }
    .meta{
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:space-between;
    }
    .tag{
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: var(--pill);
      border: 1px solid var(--stroke);
      color: var(--text);
    }
    .actions{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .btn{
      border: 1px solid rgba(255,255,255,.14);
      background: var(--btn);
      color: var(--text);
      border-radius: 12px;
      padding: 9px 10px;
      cursor:pointer;
      transition:.15s ease;
      display:inline-flex;
      align-items:center;
      gap:8px;
      font-size: 13px;
      text-decoration: none;
    }
    .btn:hover{ background: var(--btnHover); }
    .btn:focus{ outline:none; box-shadow: var(--ring); border-color: rgba(95,170,255,.55); }
    .btn svg{ opacity:.9 }

    .vtitle{
      margin:0;
      font-size: 16px;
      letter-spacing:-0.01em;
    }
    .desc{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      white-space: pre-line;
      display:-webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow:hidden;
      min-height: 5.9em;
    }

    /* Empty state */
    .empty{
      margin-top: 26px;
      padding: 22px;
      border-radius: var(--radius);
      border: 1px dashed rgba(255,255,255,.2);
      background: var(--emptyBg);
      color: rgba(232,238,252,.8);
      display:none;
    }

    /* Modal */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: var(--modalBg);
      backdrop-filter: blur(8px);
      z-index: 999;
    }
    .modal[aria-hidden="false"]{ display:flex; }
    .dialog{
      width: min(980px, 100%);
      border-radius: 18px;
      background: var(--dialogBg);
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: var(--shadow);
      overflow:hidden;
      transform: translateY(6px);
      animation: pop .16s ease forwards;
    }
    @keyframes pop{ to { transform: translateY(0); } }

    .dialog-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 12px 12px 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: var(--dialogHeadBg);
    }
    .dialog-title{
      margin:0;
      font-size: 14px;
      color: var(--text);
      letter-spacing: .01em;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .icon-btn{
      border: 1px solid rgba(255,255,255,.14);
      background: var(--iconBtnBg);
      color: var(--text);
      border-radius: 12px;
      width: 38px;
      height: 38px;
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:.15s ease;
    }
    .icon-btn:hover{ background: var(--iconBtnHover); }
    .icon-btn:focus{ outline:none; box-shadow: var(--ring); border-color: rgba(95,170,255,.55); }

    .player{
      width:100%;
      background: #000;
      position: relative;
      height: clamp(220px, 56vw, 560px);
    }
    .player iframe, .player video{
      width:100%;
      height:100%;
      display:block;
      border:0;
      position: absolute;
      inset: 0;
    }

    .dialog-body{
      padding: 14px 16px 16px;
      color: var(--muted);
      font-size: 13px;
    }
    .dialog-body p{
      margin: 0;
      color: var(--muted);
      white-space: pre-line;
    }
    .theme-toggle{
      justify-content: center;
      white-space: nowrap;
    }
    .top-nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom: 12px;
    }
    .breadcrumb{
      display:flex;
      align-items:center;
      gap:8px;
      color: var(--muted);
      font-size: 13px;
    }
    .breadcrumb a{
      color: var(--muted);
      text-decoration: none;
    }
    .breadcrumb a:hover{ color: var(--text); }
    .crumb-switch{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .crumb-link{
      border: 1px solid var(--stroke);
      background: var(--pill);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 12px;
      text-decoration: none;
      line-height: 1;
    }
    .crumb-link:hover{ background: var(--pillHover); }
    .crumb-link.active{
      background: var(--pillActive);
      border-color: rgba(95,170,255,.45);
    }
    .theme-toggle-floating{
      position: fixed;
      top: 5px;
      right: 16px;
      z-index: 1001;
      box-shadow: var(--shadow);
    }

    /* Responsive */
    @media (max-width: 980px){
      .card{ grid-column: span 6; }
    }
@media (max-width: 640px){
  .tabs{ border-radius: 18px; }
  .tab{ padding: 10px 12px; }
  .card{ grid-column: span 12; }
  .controls{ width: 100%; }
  .top-nav{ margin-top: 28px; }
}

/* Landing page only */
.home-page .thumb{
  aspect-ratio: 4 / 3;
  background: var(--surface);
}
.home-page .thumb img{
  object-fit: contain;
  background: #ffffff;
}
.home-page .body .btn{
  align-self: center;
  width: auto;
  padding: 7px 12px;
  font-size: 12px;
}

.mini-page .desc,
.duo-page .desc,
.yume-page .desc{
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  min-height: 0;
}

.home-popup{
  z-index: 1105;
}
.home-popup .dialog{
  width: min(420px, 100%);
}
.home-popup .dialog-body{
  text-align: center;
  display: grid;
  gap: 12px;
}
.home-popup .popup-logo{
  width: min(250px, 80%);
  margin: 0 auto;
  display: block;
  border-radius: 50%;
  border: 1px solid #000000;
}
.home-popup .popup-copy{
  margin: 0;
}
.home-popup .popup-cta{
  justify-self: center;
}