:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; --rose:#9e4869; --ink:#392a36; --muted:#71616c; --blush:#f8e8ed; --line:#ead3dc; }
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--blush); color:var(--ink); }
button, input { font:inherit; }
button { cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:3px solid var(--rose); outline-offset:3px; }
[hidden] { display:none !important; }
.viewer { height:100vh; height:100dvh; overflow-y:auto; overscroll-behavior-y:contain; scroll-snap-type: y mandatory; scrollbar-width:none; }
.viewer::-webkit-scrollbar { display:none; }
.slide { min-height:100vh; min-height:100dvh; scroll-snap-align:start; scroll-snap-stop:always; display:grid; place-items:center;
  padding:max(1.1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(5.4rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.home { background:linear-gradient(160deg, #fcf5f7, #f8e8ed 68%, #f4e0e8); }
.home-content { width:min(100%, 32rem); margin:auto; text-align:center; }
.home-brand { color:var(--rose); font-size:.75rem; letter-spacing:.12em; margin-bottom:1.2rem; }
h1 { font-size:clamp(1.65rem, 7vw, 2.5rem); line-height:1.65; margin:0 0 1.5rem; font-weight:650; }
.home-facts { margin:1.3rem auto; padding:.85rem 1rem; border:1px solid var(--line); border-radius:1rem; background:#fff9fbdb; }
.home-facts p { margin:.25rem 0; color:var(--muted); font-size:.79rem; line-height:1.5; }
.viewer-counters:not([hidden]) { display:flex; justify-content:center; flex-wrap:wrap; gap:.15rem .65rem; margin-top:.45rem; color:var(--muted); font-size:.75rem; }
.viewer-counters span { white-space:nowrap; }
.clips-update { color:var(--muted); font-size:.79rem; line-height:1.5; margin:.75rem 0; }
.start-watching, .package-link, .detail-actions button, .package-description { border:0; border-radius:.75rem; padding:.7rem 1rem; font-weight:650; }
.start-watching, .package-link { display:inline-block; background:var(--rose); color:#fff; text-decoration:none; }
.start-watching { margin-top:.7rem; min-width:10rem; }
.clip { width:min(100%, 35rem); text-align:center; }
.clip h2, .end h2, .library-panel h2, .detail-panel h2 { margin:0 0:.85rem; font-size:clamp(1.15rem, 4.5vw, 1.55rem); line-height:1.4; }
video { display:block; width:100%; max-height:72vh; max-height:72dvh; aspect-ratio:9/16; object-fit:contain; background:#160f17; border-radius:1rem; }
.status, .unavailable { min-height:1.4rem; color:var(--muted); font-size:.88rem; }
.clip-actions { display:flex; justify-content:center; gap:.55rem; margin-top:.4rem; }
.clip-actions button, .bottom-nav button, .library-items button, .package-description, .detail-actions button, .pwa-install {
  background:#fff7fa; color:var(--ink); border:1px solid var(--line); border-radius:.7rem; padding:.55rem .75rem;
}
.clip-actions button { font-size:.85rem; }
.end { background:#f8e8ed; }
.end p { line-height:1.55; }
.packages { display:grid; gap:.8rem; max-height:55vh; max-height:55dvh; overflow-y:auto; padding:.25rem; }
.package-card { display:grid; grid-template-columns:5.7rem minmax(0,1fr); gap:.8rem; text-align:start;
  background:#fffafb; border:1px solid var(--line); border-radius:1rem; padding:.75rem; box-shadow:0 .3rem 1rem #9e48690b; }
.package-card h3 { font-size:1rem; margin:0 0:.2rem; }
.package-card p { margin:.2rem 0; }
.package-copy { min-width:0; }
.package-image, .package-art { width:100%; aspect-ratio:1; border-radius:.7rem; object-fit:cover; background:#ebdae1; }
.package-excerpt { color:var(--muted); font-size:.82rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.price { font-weight:700; color:var(--rose); }
.package-actions { display:grid; gap:.4rem; margin-top:.55rem; }
.package-actions form, .detail-actions form { margin:0; }
.package-actions button { width:100%; }
.package-description { background:transparent; }
.bottom-nav { position:fixed; z-index:4; inset:auto 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:.15rem;
  padding:.45rem max(.4rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
  background:#fff9fbf2; border-top:1px solid var(--line); backdrop-filter:blur(12px); }
.bottom-nav button { border:0; background:transparent; font-size:.82rem; padding:.6rem .1rem; white-space:nowrap; }
.bottom-nav button[aria-current="page"] { color:var(--rose); font-weight:750; }
.library-panel, .detail-panel { min-height:100vh; min-height:100dvh; padding:clamp(1rem,5vw,2rem) 1rem calc(6rem + env(safe-area-inset-bottom));
  width:min(100%,38rem); margin:auto; }
.library-panel label { display:grid; gap:.45rem; margin:1rem 0; }
.library-panel input { width:100%; border:1px solid var(--line); border-radius:.7rem; padding:.65rem; }
.library-items { display:grid; gap:.6rem; }
.library-items button { text-align:start; padding:.9rem; }
.package-detail { background:#fffafb; border:1px solid var(--line); border-radius:1rem; padding:1rem; }
.package-detail .package-image, .package-detail .package-art { width:min(100%,18rem); aspect-ratio:4/3; margin:0 auto 1rem; display:block; }
.full-description { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.7; }
.detail-actions { display:grid; gap:.5rem; margin-top:1rem; }
.detail-actions button { width:100%; }
.payment-panel { width:min(100% - 2rem, 35rem); margin:5vh auto; padding:1.25rem; background:#fffafb; border:1px solid var(--line); border-radius:1rem; }
.payment-panel form { margin:.75rem 0; }
.payment-panel a { color:var(--rose); }
.instructions { white-space:pre-wrap; overflow-wrap:anywhere; }
.site-notice:not([hidden]) { position:fixed; z-index:6; inset:max(.5rem, env(safe-area-inset-top)) .75rem auto;
  max-width:35rem; margin-inline:auto; padding:.55rem .8rem; border:1px solid var(--line); border-radius:.65rem;
  background:#fff9fbf0; color:var(--ink); text-align:center; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; pointer-events:none; }
.pwa-install { margin:.8rem auto 0; }
.pwa-hint { color:var(--muted); font-size:.85rem; }
.landscape-mode { position:fixed; z-index:10; inset:0; background:#080608; padding:.5rem; }
.landscape-mode .clip { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; }
.landscape-mode h2, .landscape-mode .status, .landscape-mode .save-clip, .landscape-mode .expand-clip { display:none; }
.landscape-mode video { width:100%; height:min(85vh,85dvh); max-height:none; aspect-ratio:16/9; border-radius:0; }
.landscape-mode .close-wide { color:#fff; background:#382934; }
video:fullscreen, video:-webkit-full-screen { width:100vw; height:100vh; max-height:none; aspect-ratio:auto; object-fit:contain; border-radius:0; }
@media (min-width:50rem) { .packages { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:60dvh; }
  .clip { width:min(100%,44rem); } video { margin-inline:auto; } }
@media (max-width:340px) { .slide { padding-inline:.65rem; } .package-card { grid-template-columns:4.5rem minmax(0,1fr); gap:.5rem; }
  .bottom-nav button { font-size:.74rem; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; } }