:root{
    --zuri-blue:#0d5bd7;
    --zuri-blue-600:#0a49ad;
    --zuri-white:#ffffff;
    --ink:#0b1b2b;
    --muted:#5f728a;
    --card:#ffffff;
    --bg:linear-gradient(135deg,var(--zuri-white),#eef4ff 30%, #e6f0ff 60%, #f8fbff 100%);
    --radius:22px;
    --shadow:0 10px 30px rgba(13,91,215,.18);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
    color:var(--ink);
    background:var(--bg) fixed;
  }
  
  .site-header, .site-footer{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 16px;
  }
  
  .brand{
    display:flex; align-items:center; gap:10px;
    padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.7); backdrop-filter: blur(8px);
  }
  .flag{width:26px; height:26px; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.1)}
  .title{font-weight:700; letter-spacing:.2px}
  
  .hero{
    min-height:calc(100dvh - 140px);
    display:grid;
    place-items:center;
    padding:24px;
  }
  
  .card{
    width:min(680px, 92vw);
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:28px;
    text-align:center;
  }
  
  h1{
    margin:0 0 6px;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem);
  }
  .sub{ margin:0 0 18px; color:var(--muted) }
  
  /* Play Button */
  .play-btn{
    --size: clamp(86px, 16vw, 140px);
    width:var(--size); height:var(--size);
    border-radius:999px;
    border:none;
    background: radial-gradient(120% 120% at 20% 20%, #4590ff 0%, var(--zuri-blue) 60%, var(--zuri-blue-600) 100%);
    color:#fff;
    display:grid;
    place-items:center;
    gap:8px;
    margin:18px auto 12px;
    box-shadow:0 10px 24px rgba(13,91,215,.35), inset 0 0 0 2px rgba(255,255,255,.15);
    cursor:pointer;
    transition: transform .15s ease, box-shadow .2s ease;
    position:relative;
  }
  .play-btn:focus-visible{ outline:3px solid #9cc6ff; outline-offset:4px }
  .play-btn:hover{ transform: translateY(-1px) }
  .play-btn:active{ transform: translateY(0) scale(.98) }
  
  .play-btn .icon{ width:46%; aspect-ratio:1 }
  .play-btn svg{ width:100%; height:100%; fill:#fff }
  .icon-pause{ display:none }
  .playing .icon-pause{ display:block }
  .playing .icon-play{ display:none }
  .play-btn .label{
    position:absolute;
    bottom:-28px; left:50%; transform:translateX(-50%);
    font-weight:600; font-size:.95rem; color:var(--zuri-blue-600);
  }
  
  /* Progress */
  .progress-wrap{
    width:100%; height:8px; background:#edf3ff;
    border-radius:999px; overflow:hidden; margin:22px 0 8px;
  }
  .progress{
    width:0%; height:100%;
    background: linear-gradient(90deg, #76aaff, var(--zuri-blue));
    transition: width .1s linear;
  }
  .time{ color:#2b3a52; font-variant-numeric: tabular-nums }
  
  /* Footer */
  .site-footer small{ color:var(--muted) }
  
  /* Age Gate */
  .age-overlay{
    position: fixed; inset: 0; z-index: 9999;
    display: grid; place-items: center;
    background: radial-gradient(120% 120% at 20% 20%, rgba(69,144,255,.18), rgba(13,91,215,.28)) , rgba(255,255,255,.65);
    backdrop-filter: blur(8px);
  }
  .age-card{
    width:min(560px,92vw);
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    text-align: center;
  }
  .brand--center{ justify-content:center; margin-bottom:6px; display:flex; align-items:center; gap:10px }
  .age-card h2{ margin:6px 0 8px; font-size: clamp(1.4rem,1.1rem + 1.4vw,2rem); }
  .age-sub{ color: var(--muted); margin:0 0 18px }
  .age-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
  .btn{
    border:0; border-radius:999px; padding:12px 18px; font-weight:700; cursor:pointer;
    box-shadow:0 8px 18px rgba(13,91,215,.18);
  }
  .btn.yes{
    background: radial-gradient(120% 120% at 20% 20%, #4590ff 0%, var(--zuri-blue) 60%, var(--zuri-blue-600) 100%);
    color:#fff;
  }
  .btn.no{ background:#edf3ff; color:#0a49ad }
  .btn:focus-visible{ outline:3px solid #9cc6ff; outline-offset:3px }
  .age-msg{ margin-top:12px; color:#0b1b2b }
  .body-lock{ overflow:hidden }