:root { --cream:#fbf8f2; --ink:#161615; --muted:#787975; --line:#a5afbf; --blue:#52637d; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'Inter Tight',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { touch-action:manipulation; }
button { font:inherit; color:inherit; cursor:pointer; user-select:none; -webkit-user-select:none; }
button:active { opacity:.7; }
button:disabled { opacity:.3; cursor:default; }
button:focus-visible,a:focus-visible,input:focus-visible,.feed:focus-visible { outline:2px solid #7189ac; outline-offset:4px; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p { margin:0; }
.site-header { height:72px; padding:0 42px; display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.brand { font-size:10px; font-weight:600; letter-spacing:.12em; }
.site-header a { display:flex; align-items:center; min-height:44px; }
.watch-room { --player-height:min(740px,calc(100dvh - 114px)); display:grid; grid-template-columns:260px minmax(0,calc((var(--player-height) - 76px)*9/16)) 48px; justify-content:center; align-items:center; gap:42px; margin:10px auto 30px; padding:0 28px; }
.show-info { align-self:center; }
.eyebrow { font-size:10px; letter-spacing:.1em; color:var(--blue); }
h1 { font-size:44px; font-weight:500; letter-spacing:-.055em; line-height:1.03; margin:18px 0 10px; }
.intro { font-size:15px; color:var(--muted); }
.episode-list { margin:28px 0; }
.episode-row { display:flex; width:100%; gap:12px; align-items:center; padding:11px 8px; background:none; border:0; border-bottom:1px solid #deded8; text-align:left; border-radius:3px; }
.episode-row[aria-current=true] { background:#e9edf2; }
.episode-row img { width:34px; height:46px; object-fit:cover; border:1px solid #b4bdc8; border-radius:2px; }
.episode-row .row-copy { flex:1; }
.episode-row small { display:block; color:var(--blue); font-size:9px; margin-bottom:5px; letter-spacing:.03em; }
.episode-row strong { display:block; font-size:13px; font-weight:500; }
.row-mark { font-size:13px; color:var(--blue); }
.membership-card { border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.window-bar { height:29px; padding:0 10px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#f9fbff,#d5ddea); color:var(--blue); border-bottom:1px solid var(--line); font-size:11px; }
.card-body { padding:20px 18px 10px; }
.card-body h2 { font-size:22px; font-weight:500; letter-spacing:-.04em; }
.card-body p { font-size:12px; line-height:1.5; color:var(--muted); margin:10px 0; }
.plain-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:0; border:0; background:none; text-align:left; font-size:12px; }
.preview-note { margin-top:22px; font-size:10px; color:var(--muted); line-height:1.8; }
.preview-note button { background:none; border:0; padding:0; min-height:32px; color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.watch-window { height:var(--player-height); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 14px 45px #424a5810; display:flex; flex-direction:column; min-width:0; }
.player-bar { height:32px; flex:none; }
.window-glyphs { display:flex; gap:5px; align-items:center; }
.window-glyphs button { display:grid; place-items:center; width:30px; height:30px; padding:0; margin:0 -5px; border:0; background:none; }
.window-glyphs button:focus-visible { outline-offset:-3px; }
.window-glyphs button:disabled { opacity:1; cursor:default; }
.window-glyphs i,.window-glyphs b { display:grid; place-items:center; width:13px; height:12px; font-size:10px; font-style:normal; font-weight:400; line-height:1; border:1px solid #8a9bb3; border-radius:2px; }
.window-glyphs b { background:linear-gradient(#ffa288,#d34d29); border-color:#a27261; color:white; }
.window-glyphs b svg,.panel-bar button svg { display:block; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.window-glyphs b svg { width:8px; height:8px; }
body.full-feed { overflow:hidden; background:#181916; }
.full-feed .site-header,.full-feed .show-info,.full-feed .feed-navigation { display:none; }
.full-feed .watch-room { display:block; height:100dvh; margin:0; padding:0; }
.full-feed .watch-window { position:fixed; inset:0; z-index:10; width:100%; height:100dvh; border:0; border-radius:0; background:#181916; box-shadow:none; }
.full-feed .player-body { align-self:center; width:min(100%,calc((100dvh - 76px)*9/16)); }
.full-feed .feed-item video { object-fit:contain; }
.full-feed .player-nav { justify-content:center; gap:32px; }
.player-body { position:relative; flex:1; min-height:0; background:#25251f; color:white; isolation:isolate; }
.feed { height:100%; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior-y:contain; scrollbar-width:none; }
.feed::-webkit-scrollbar { display:none; }
.feed-item { position:relative; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.feed-item video { width:100%; height:100%; display:block; object-fit:cover; }
.player-body::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(#0003,transparent 20%,transparent 57%,#0009 90%,#000b); }
.player-top { position:absolute; top:14px; left:16px; right:12px; display:flex; justify-content:space-between; align-items:center; z-index:2; pointer-events:none; }
.episode-counter { font-size:10px; letter-spacing:.1em; text-shadow:0 1px 4px #0008; }
.glass-button { pointer-events:auto; background:#23231f55; border:1px solid #ffffff40; border-radius:30px; color:white; min-height:36px; padding:0 12px; font-size:10px; backdrop-filter:blur(10px); }
.glass-button span { color:#c7ddbe; margin-left:6px; }
.glass-button[aria-pressed=false] span { color:#b5b5b5; }
.side-controls { position:absolute; right:9px; bottom:135px; display:grid; gap:14px; z-index:3; }
.round-button { display:grid; justify-items:center; align-content:center; gap:5px; width:46px; min-height:48px; border:0; padding:4px 0; background:none; color:white; text-shadow:0 1px 4px #000; }
.round-button svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 1px 3px #0008); }
.round-button span { font-size:9px; }
#save[aria-pressed=true] svg { fill:#fff9; }
.center-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border:1px solid #fff9; border-radius:50%; background:#fbf8f2df; color:#46536a; font-size:24px; padding:0 0 0 4px; z-index:3; }
.video-caption { pointer-events:none; position:absolute; bottom:49px; left:19px; right:60px; z-index:2; }
#episode-tag { font-size:9px; letter-spacing:.08em; }
#episode-tag span { margin-left:10px; color:#ffffffa6; }
.video-caption h2 { font-size:28px; font-weight:500; letter-spacing:-.035em; line-height:1.1; margin:10px 0 7px; }
#episode-note { font-size:12px; line-height:1.4; color:#ffffffcf; }
.transport { position:absolute; bottom:5px; left:10px; right:16px; display:flex; align-items:center; gap:9px; z-index:3; }
.transport button { width:34px; height:38px; border:0; padding:0; color:white; background:none; font-size:17px; }
.transport input { min-width:0; width:100%; height:24px; accent-color:#fbf8f2; cursor:pointer; margin:0; }
.transport span { font-size:9px; min-width:25px; text-align:right; font-variant-numeric:tabular-nums; }
.player-nav { display:flex; justify-content:space-between; align-items:center; flex:none; height:44px; padding:0 13px; gap:8px; background:linear-gradient(#f6f8fb,#e6ebf2); color:var(--blue); }
.player-nav button { min-height:44px; padding:0; background:none; border:0; font-size:10px; }
.player-nav button span { margin-left:4px; }
.scroll-hint { font-size:9px; color:#7b8798; }
.feed-navigation { display:grid; gap:12px; }
.feed-navigation button { width:44px; height:44px; border:1px solid #c8ced8; border-radius:50%; background:#f4f5f6; color:var(--blue); font-size:23px; }
.gate,.end-card,.playback-error { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; background:#191b1aaa; backdrop-filter:blur(10px); }
.gate-content { width:100%; }
.gate .eyebrow { color:#d4dfef; font-size:9px; }
.gate h2,.end-card h2 { font-size:36px; font-weight:500; line-height:1.05; letter-spacing:-.045em; margin:18px 0; }
.gate p,.end-card p,.playback-error p { font-size:13px; margin-bottom:25px; color:#fffd; }
.cream-button,.dark-button { min-height:46px; border:0; border-radius:30px; padding:12px 22px; background:var(--cream); color:var(--ink); font-size:12px; }
.gate-back { display:block; margin:15px auto 0; min-height:44px; border:0; color:#fffc; background:none; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.dark-button { background:var(--ink); color:var(--cream); width:100%; }
dialog { width:390px; padding:0; max-width:calc(100vw - 32px); max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--cream); overscroll-behavior:contain; box-shadow:0 15px 50px #1113; }
dialog::backdrop { background:#161b2566; backdrop-filter:blur(4px); }
.panel-bar { height:42px; position:sticky; top:0; z-index:1; }
.panel-bar h2 { font-size:12px; font-weight:400; }
.panel-bar button { display:grid; place-items:center; background:none; border:0; width:44px; height:40px; padding:0; margin-right:-10px; }
.panel-bar button span { display:grid; place-items:center; width:20px; height:19px; border-radius:3px; border:1px solid #a27261; background:linear-gradient(#ffa288,#d34d29); color:white; font-size:17px; }
.panel-bar button svg { width:12px; height:12px; }
.panel-content { padding:26px; }
.panel-content h3 { font-size:36px; line-height:1.05; letter-spacing:-.045em; font-weight:500; margin:15px 0; }
.panel-intro { font-size:14px; color:var(--muted); }
.panel-content ul { padding:0; margin:26px 0 18px; list-style:none; font-size:13px; display:grid; gap:14px; }
.panel-content li::before { content:'□'; color:var(--blue); padding-right:10px; }
.shop-link { display:inline-flex; align-items:center; min-height:44px; color:var(--blue); text-decoration:underline; text-underline-offset:4px; font-size:12px; }
.fine-print { font-size:10px; color:var(--muted); line-height:1.6; margin:10px 0; }
.account-email { font-size:13px; overflow-wrap:anywhere; margin-top:20px; }
#account-summary { overflow-wrap:anywhere; }
.account-notice { margin:0 26px 24px; padding:12px; border:1px solid #b9c6d7; background:#eaf0f7; color:var(--blue); font-size:12px; line-height:1.5; }
.flow-error { color:#9c3825; font-size:13px; line-height:1.5; margin:12px 0; }
#auth-form { margin-top:24px; }
#auth-form label { display:block; font-size:13px; margin-bottom:8px; }
#auth-form input { display:block; width:100%; min-height:46px; padding:12px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:16px; margin-bottom:20px; }
#auth-code { letter-spacing:.2em; }
.price { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #d8dbdd; margin:23px 0 18px; padding-top:20px; }
.price strong { font-size:29px; font-weight:500; letter-spacing:-.03em; }
.price small,.price>span { font-size:12px; font-weight:400; color:var(--muted); letter-spacing:0; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(hover:hover) and (pointer:fine) { .episode-row:hover,.feed-navigation button:hover { background:#e1e7ef; } .plain-button:hover,.site-header a:hover { color:var(--blue); } .round-button:hover { opacity:.75; } }
@media(max-width:900px) and (min-width:701px) { .watch-room { gap:22px; grid-template-columns:220px minmax(0,calc((var(--player-height) - 76px)*9/16)) 44px; padding:0 20px; } h1 { font-size:38px; } }
@media(max-width:700px) {
  html,body { height:100%; overflow:hidden; overscroll-behavior:none; background:#e8edf5; }
  .site-header,.show-info,.feed-navigation { display:none; }
  .watch-room { display:block; margin:0; padding:0; height:100dvh; }
  .watch-window { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; }
  .player-bar { height:calc(38px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); padding-left:max(15px,env(safe-area-inset-left)); padding-right:max(15px,env(safe-area-inset-right)); font-size:12px; }
  .player-nav { height:calc(50px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
  .player-nav button { font-size:12px; }
  .window-glyphs button { width:44px; height:38px; }
  .full-feed .player-body { width:100%; }
  .full-feed .player-nav { justify-content:space-between; gap:8px; }
  .scroll-hint { font-size:10px; }
  .video-caption { left:22px; bottom:54px; }
  .video-caption h2 { font-size:32px; }
  #episode-note { font-size:13px; }
  .side-controls { right:12px; bottom:157px; gap:18px; }
  .player-top { top:17px; left:22px; right:17px; }
  dialog { width:100%; max-width:100%; max-height:85dvh; margin:auto 0 0; border-radius:14px 14px 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom); }
  .panel-content { padding:24px; }
  .episode-row { min-height:72px; }
  .episode-row strong { font-size:15px; }
}
@media(max-height:600px) and (min-width:701px) { .watch-room { align-items:start; } .show-info { align-self:start; } .membership-card,.preview-note { margin-top:12px; } .show-info .episode-list { margin:12px 0; } .site-header { height:48px; } .watch-room { --player-height:calc(100dvh - 72px); } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; } }