:root{
  --cream:#fff8f5;
  --paper:#fffdfb;
  --blush:#fbe6ea;
  --petal:#f5cbd6;
  --rose:#e79aae;
  --dusty:#c4607d;
  --wine:#8c3452;
  --ink:#4b2634;
  --bow:#f4b6c6;
  --bow-line:#c4607d;

  --sub-gehlee:#ffc9dd;
  --sub-housemate:#bfe3ff;
  --sub-host:#dccbff;
  --sub-other:#ffffff;
  --sub-scale:1;
  --sub-mix:100%;

  --serif:"Lora",Georgia,serif;
  --sans:"Nunito","Noto Sans KR",system-ui,sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:600;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--cream);
  /* faint gingham */
  background-image:
    repeating-linear-gradient(0deg, rgba(244,182,198,.16) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(90deg, rgba(244,182,198,.16) 0 18px, transparent 18px 36px);
  min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom,0);
}
svg{display:block}

/* top ribbon with scalloped edge */
.ribbon-top{
  position:relative;height:calc(14px + env(safe-area-inset-top,0px));
  background:var(--bow);
}
.ribbon-top::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:9px;
  background:radial-gradient(circle at 9px 0, var(--bow) 8.500px, transparent 9px) 0 0/18px 9px repeat-x;
}

/* hero */
.hero{position:relative;text-align:center;padding:30px 20px 10px}
.hero-bow{width:104px;height:70px;margin:0 auto -4px;filter:drop-shadow(0 4px 6px rgba(196,96,125,.22))}
h1{
  font-family:var(--script);font-weight:400;
  font-size:clamp(56px,14vw,112px);line-height:1.1;
  margin:0;padding:0 .12em .06em;
  color:var(--wine);
  background:linear-gradient(180deg,#b24468,#8c3452 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:4px auto 0;max-width:640px;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(15px,3.8vw,19px);color:var(--wine);
}
.tagline .rule{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rose));min-width:14px}
.tagline .rule:last-child{background:linear-gradient(270deg,transparent,var(--rose))}
.mini-heart{width:13px;height:13px;color:var(--rose);flex:none}

.spark{position:absolute;color:var(--rose);animation:twinkle 4s ease-in-out infinite}
.s1{left:14%;top:52px;width:20px;height:20px}
.s2{right:15%;top:34px;width:28px;height:28px;animation-delay:1.3s}
.s3{right:26%;top:140px;width:14px;height:14px;animation-delay:2.4s}
@keyframes twinkle{0%,100%{transform:scale(.6);opacity:.3}50%{transform:scale(1);opacity:.95}}

main{max-width:980px;margin:0 auto;padding:22px 16px 30px}

/* player frame */
.frame{
  position:relative;
  padding:12px;border-radius:30px;
  background:var(--paper);
  border:2px solid var(--petal);
  box-shadow:0 0 0 6px #fff, 0 0 0 7.500px var(--petal), 0 22px 44px rgba(196,96,125,.22);
  margin-top:34px;
}
.frame-bow{
  position:absolute;left:50%;top:-37px;width:96px;height:64px;
  transform:translateX(-50%);z-index:3;filter:drop-shadow(0 3px 4px rgba(196,96,125,.25));
}
.player{position:relative;background:#1b0d13;border-radius:20px;overflow:hidden;width:100%}
.vid{position:relative;aspect-ratio:16/9;width:100%;background:#1b0d13;border-radius:20px;overflow:hidden;max-height:calc(100vh - 24px);max-height:calc(100svh - 24px)}
.player video{width:100%;height:100%;display:block;object-fit:contain;background:#1b0d13}

.subs{
  position:absolute;left:0;right:0;bottom:64px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0 12px;pointer-events:none;
}
.cue{
  max-width:min(94%,780px);
  padding:7px 16px 8px;
  border-radius:16px;
  border:1.5px solid rgba(255,255,255,.9);
  color:#000;
  font-family:var(--sans);
  font-size:calc(clamp(14px,min(2.7vw,4.6vh),25px) * var(--sub-scale));
  font-weight:800;
  line-height:1.38;
  text-align:center;
  text-wrap:balance;
  text-shadow:0 0 4px rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.cue small{display:block;font-size:.62em;font-weight:800;line-height:1.2;margin-bottom:2px;color:#000;opacity:.65}
.cue.gehlee{background:var(--sub-gehlee);background:color-mix(in srgb,var(--sub-gehlee) var(--sub-mix),transparent)}
.cue.housemate{background:var(--sub-housemate);background:color-mix(in srgb,var(--sub-housemate) var(--sub-mix),transparent)}
.cue.host{background:var(--sub-host);background:color-mix(in srgb,var(--sub-host) var(--sub-mix),transparent)}
.cue.other{background:var(--sub-other);background:color-mix(in srgb,var(--sub-other) var(--sub-mix),transparent)}

.fs{
  position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;padding:0;cursor:pointer;
  border:2px solid #fff;background:rgba(140,52,82,.85);color:#fff;
}
.fs svg{width:20px;height:20px}
.player.is-fs{border-radius:0;height:100%;background:#000;display:flex;flex-direction:column}
.player.is-fs .vid{flex:1;height:100%;aspect-ratio:auto;max-height:none;border-radius:0}
.player.is-fs .subs{position:absolute;bottom:90px}
.player.is-fs .cue{font-size:calc(clamp(16px,min(3.2vw,5.2vh),38px) * var(--sub-scale))}
.nofs .fs{display:none}

/* control panel with stitched border */
.panel{
  position:relative;margin:28px auto 0;max-width:640px;
  background:var(--paper);border-radius:26px;padding:26px 26px 22px;text-align:center;
  box-shadow:0 10px 26px rgba(196,96,125,.14);
}
.panel::before{
  content:"";position:absolute;inset:7px;border:1.5px dashed var(--petal);border-radius:20px;pointer-events:none;
}
.panel h2{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(20px,4.5vw,26px);line-height:1.3;margin:0 0 16px;color:var(--wine);
}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:10px}
label,.label{font-weight:800;color:var(--wine);font-size:16px}
select{
  font:inherit;font-weight:700;color:var(--ink);
  padding:11px 42px 11px 18px;border-radius:999px;border:2px solid var(--rose);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%238c3452' stroke-width='2.200' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 17px center;
  appearance:none;-webkit-appearance:none;min-width:240px;max-width:100%;cursor:pointer;
}
select:hover{border-color:var(--dusty)}
.status{min-height:1.5em;margin:8px 0 0;font-size:15px;color:var(--wine)}

.size{display:flex;gap:8px}
.size button{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:2px solid var(--petal);background:#fff;color:var(--wine);cursor:pointer;
  font-family:var(--serif);font-weight:600;padding:0;
}
.size button:nth-child(1){font-size:14px}
.size button:nth-child(2){font-size:19px}
.size button:nth-child(3){font-size:25px}
.size button[aria-pressed="true"]{background:var(--bow);border-color:var(--dusty);color:var(--ink)}

.legend{list-style:none;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0;margin:20px 0 0}
.chip{
  padding:5px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(140,52,82,.18);color:#000;font-weight:800;font-size:15px;
}
.chip.gehlee{background:var(--sub-gehlee)}
.chip.housemate{background:var(--sub-housemate)}
.chip.host{background:var(--sub-host)}
.note{margin:10px 0 0;font-size:14px;color:var(--wine)}
.note:empty{display:none}

button:focus-visible,select:focus-visible,.card:focus-visible{outline:3px solid var(--dusty);outline-offset:3px}

/* pearls */
.pearls{
  height:14px;margin:6px auto 22px;max-width:560px;
  background:radial-gradient(circle at 8px 7px,#fff 0,#f8e8ec 3px,#dcb7c2 6px,transparent 6.500px) 0 0/16px 14px repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* library */
.library{margin-top:44px}
.library h2{
  font-family:var(--script);font-weight:400;font-size:clamp(44px,9vw,62px);line-height:1.1;
  color:var(--wine);text-align:center;margin:0;
}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{
  position:relative;display:block;text-align:left;font:inherit;color:inherit;cursor:pointer;padding:8px;
  background:var(--paper);border:2px solid var(--petal);border-radius:24px;
  box-shadow:0 8px 20px rgba(196,96,125,.14);transition:transform .15s,border-color .15s;
}
.card:hover{transform:translateY(-3px);border-color:var(--rose)}
.card.active{border-color:var(--dusty);box-shadow:0 0 0 3px var(--blush),0 8px 20px rgba(196,96,125,.2)}
.thumb{position:relative;aspect-ratio:16/9;background:#2a0f1a;border-radius:17px;overflow:hidden}
.thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.thumb::after{
  content:"";position:absolute;right:10px;bottom:10px;width:32px;height:32px;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 15.500 3 8.800C3 6.100 5 4.500 7.200 4.500c1.800 0 3.600 1 4.800 2.900 1.200-1.900 3-2.900 4.800-2.900C19 4.500 21 6.100 21 8.800 21 15.500 12 21 12 21Z' fill='%23c4607d'/%3E%3C/svg%3E") center/16px no-repeat;
}
.card .meta{padding:12px 10px 8px}
.card h3{margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3;color:var(--wine)}
.card p{margin:0;font-size:15px;line-height:1.45}
.empty{text-align:center}

footer{text-align:center;padding:10px 20px 44px;font-size:14px;color:var(--wine)}
footer p{margin:0 auto 4px;max-width:520px}
footer .pearls{margin-bottom:14px}

@media (prefers-reduced-motion:reduce){.spark{animation:none;opacity:.7}.card{transition:none}}
@media (max-width:520px){
  .panel{padding:24px 16px 20px}
  select{min-width:0;width:100%}
  .row{flex-direction:column;gap:8px}
  .subs{bottom:58px}
}

/* ---- v5 additions ---- */
[hidden]{display:none !important}

.desc{margin:-4px auto 14px;max-width:520px;font-size:16px;line-height:1.55}
.desc:empty{display:none}
.credits{margin:0 auto 20px;padding:14px 0 2px;max-width:520px;border-top:1.5px dotted var(--petal)}
.credits h3{margin:0 0 8px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:17px;color:var(--wine)}
.credits dl{display:grid;grid-template-columns:auto auto;gap:4px 16px;justify-content:center;margin:0;text-align:left;font-size:15px}
.credits dt{font-weight:800;color:var(--wine)}
.credits dd{margin:0}
.credits dd.solo{grid-column:1 / -1;text-align:center}
.credits a{color:var(--dusty);text-underline-offset:3px}

.range{display:flex;align-items:center;gap:12px}
input[type=range]{width:200px;max-width:60vw;height:28px;accent-color:var(--dusty);cursor:pointer}
output{min-width:3.4em;text-align:left;font-weight:800;color:var(--wine)}

.toolbar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:center;margin:0 auto 12px;max-width:900px}
.search{position:relative;flex:1 1 260px;max-width:360px}
.search svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--dusty);pointer-events:none}
.search input{
  width:100%;font:inherit;font-weight:700;color:var(--ink);
  padding:11px 18px 11px 44px;border-radius:999px;border:2px solid var(--rose);background:#fff;
  -webkit-appearance:none;appearance:none;
}
.search input::placeholder{color:#a97b8a;font-weight:600}
.search input:focus-visible{outline:3px solid var(--dusty);outline-offset:3px}
.filters{display:flex;gap:8px}
.filters button{
  font:inherit;font-weight:800;padding:9px 18px;border-radius:999px;cursor:pointer;
  border:2px solid var(--petal);background:#fff;color:var(--wine);
}
.filters button[aria-pressed="true"]{background:var(--bow);border-color:var(--dusty);color:var(--ink)}
.sortbox{display:flex;align-items:center;gap:8px}
.toolbar select{min-width:0;padding-top:9px;padding-bottom:9px}
.count{text-align:center;margin:0 0 16px;font-size:14px;color:var(--wine);min-height:1.4em}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.tag{padding:2px 11px;border-radius:999px;font-size:12.5px;font-weight:800;color:var(--ink);background:var(--blush);border:1.5px solid var(--petal)}
.tag.live{background:#ffc9dd;border-color:#f3a6c1}
.tag.episode{background:#dccbff;border-color:#bfa8f0}
.card .meta .tags + h3{margin-top:0}

.disclaimer{
  position:relative;max-width:680px;margin:0 auto 18px;padding:26px 28px 18px;
  background:var(--paper);border-radius:24px;text-align:left;
  box-shadow:0 8px 20px rgba(196,96,125,.12);
}
.disclaimer::before{content:"";position:absolute;inset:7px;border:1.5px dashed var(--petal);border-radius:18px;pointer-events:none}
.disclaimer h2{margin:0 0 10px;text-align:center;font-family:var(--serif);font-style:italic;font-weight:600;font-size:20px;color:var(--wine)}
.disclaimer p{max-width:none;margin:0 0 10px;font-size:14.500px;line-height:1.6;color:var(--ink)}
.disclaimer a{color:var(--dusty)}
footer .love{font-family:var(--serif);font-style:italic}

@media (max-width:520px){
  .search{max-width:none;flex-basis:100%}
  .disclaimer{padding:24px 20px 14px}
  .credits dl{grid-template-columns:1fr;text-align:center;gap:0}
  .credits dt{margin-top:6px}
}

/* ---- v6: mobile ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding-left:env(safe-area-inset-left,0);padding-right:env(safe-area-inset-right,0)}
button,select,.card,input{touch-action:manipulation}
a,button,.card,select{-webkit-tap-highlight-color:rgba(231,154,174,.3)}
.fs{width:44px;height:44px}
.filters button{min-height:44px}
.search input{min-height:46px}
select{min-height:46px}
.toolbar select{min-height:44px}
input[type=range]{height:36px}
.hint{display:none;margin:2px auto 0;max-width:340px;font-size:13px;line-height:1.4;color:var(--wine)}

@media (max-width:760px){
  main{padding:16px 14px 26px}
  .hero{padding:20px 16px 4px}
  .hero-bow{width:84px;height:56px}
  .s1,.s3{display:none}

  .frame{
    padding:8px;border-radius:24px;margin-top:30px;
    box-shadow:0 0 0 5px #fff,0 0 0 6.500px var(--petal),0 16px 30px rgba(196,96,125,.2);
  }
  .frame-bow{width:80px;height:54px;top:-31px}

  /* captions sit under the video so they never cover the footage */
  .player:not(.is-fs){background:transparent;overflow:visible}
  .player:not(.is-fs) .vid{border-radius:17px}
  .player:not(.is-fs) .subs{
    position:static;justify-content:flex-start;gap:8px;
    padding:12px 2px 4px;min-height:92px;
  }
  .player:not(.is-fs) .subs:empty::before{
    content:"Captions appear here";align-self:center;margin-top:20px;
    color:#a97b8a;font-style:italic;font-weight:600;font-size:15px;
  }
  .player:not(.is-fs) .cue{
    max-width:100%;width:100%;font-size:calc(17px * var(--sub-scale));
    box-shadow:none;text-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
    border:1.5px solid rgba(140,52,82,.16);
  }
  .player:not(.is-fs) .cue.gehlee{background:var(--sub-gehlee)}
  .player:not(.is-fs) .cue.housemate{background:var(--sub-housemate)}
  .player:not(.is-fs) .cue.host{background:var(--sub-host)}
  .player:not(.is-fs) .cue.other{background:#fff7fa}

  .panel{margin-top:16px;padding:22px 16px 18px}
  .hint{display:block}
  .range{width:100%;justify-content:center}
  input[type=range]{width:100%;max-width:240px}

  .library{margin-top:34px}
  .toolbar{gap:10px}
  .filters{width:100%}
  .filters button{flex:1;padding:9px 8px}
  .sortbox{width:100%;justify-content:center}
  .sortbox select{flex:1;max-width:240px;width:auto}
  .grid{grid-template-columns:1fr;gap:16px}
  .card h3{font-size:17px}
  .disclaimer{padding:22px 18px 12px}
}

@media (max-width:380px){
  body{font-size:16px}
  h1{font-size:50px}
  .tagline{font-size:14px;gap:6px}
}

@media (orientation:landscape) and (max-height:500px){
  .hero{padding:12px 16px 0}
  .hero-bow{display:none}
  h1{font-size:54px}
  .frame{margin-top:18px}
  .frame-bow{display:none}
  .subs{bottom:54px;gap:4px}
  .cue{padding:4px 12px 5px;border-radius:12px;max-width:min(82%,640px)}
  .player.is-fs .subs{bottom:62px}
}