:root{
  --bg:#e2e5de; --panel:#f3f4f0; --ink:#1b241f; --muted:#5b665e; --line:#c9cfc6;
  --accent:#8a6a24; --accent-ink:#ffffff; --stage:#151b17; --stage-ink:#e3e9e1; --danger:#a33a2a;
  --shadow:0 10px 30px rgba(20,28,24,0.18), 0 2px 6px rgba(20,28,24,0.12);
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1e2722; --panel:#232d27; --ink:#e8e7dd; --muted:#9aa69c; --line:#38463e;
    --accent:#cfa95f; --accent-ink:#1a221d; --stage:#0e1310; --danger:#e48a73;
    --shadow:0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  --bg:#1e2722; --panel:#232d27; --ink:#e8e7dd; --muted:#9aa69c; --line:#38463e;
  --accent:#cfa95f; --accent-ink:#1a221d; --stage:#0e1310; --danger:#e48a73;
  --shadow:0 10px 30px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none !important}
html,body{height:100%; margin:0; overflow:hidden}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:14px; line-height:1.4;
}
img,video,canvas{max-width:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* the board fills the page */
.scene{position:fixed; inset:0; background:var(--bg)}
/* with a table, a soft vignette makes it feel lit by a lamp over the board */
.scene.table::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 45%, transparent 45%, rgba(0,0,0,0.38) 100%)}
.scene canvas{display:block; width:100%; height:100%; touch-action:none; cursor:grab}
.scene canvas:active{cursor:grabbing}

/* camera controls, top right */
.camera{
  position:fixed; z-index:2; top:calc(16px + env(safe-area-inset-top,0px)); right:calc(16px + env(safe-area-inset-right,0px));
  display:flex; align-items:center; gap:2px; padding:4px; border-radius:999px;
  background:rgba(12,16,14,0.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
.cam{
  position:relative; flex:none; width:34px; height:34px; display:grid; place-items:center; padding:0; margin:0;
  border:0; border-radius:50%; cursor:pointer; color:var(--stage-ink); background:transparent; transition:background .15s ease;
}
.cam svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.cam:hover{background:rgba(255,255,255,0.12)}
.cam[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink)}
.cam-sep{flex:none; width:1px; height:20px; margin:0 3px; background:rgba(255,255,255,0.2)}
@media (hover:hover){
  .cam::after{
    content:attr(data-tip); position:absolute; top:calc(100% + 10px); right:0; white-space:nowrap; pointer-events:none;
    font-size:12px; font-weight:500; padding:4px 8px; border-radius:8px; color:var(--stage-ink); background:rgba(12,16,14,0.85);
    opacity:0; transition:opacity .15s ease;
  }
  .cam:hover::after, .cam:focus-visible::after{opacity:1}
}

/* floating video card, bottom left */
.card{
  position:fixed; z-index:2;
  left:calc(20px + env(safe-area-inset-left,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px));
  width:clamp(300px, 30vw, 620px);
  background:var(--stage); border-radius:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:width .25s ease;
}
.card.expanded{width:min(62vw, 1100px)}
.card.cropped{width:clamp(360px, 24vw, 460px)}
.stage{
  position:relative; aspect-ratio:16/9; background:var(--stage); overflow:hidden; border-radius:16px;
}
.card.cropped .stage{aspect-ratio:var(--ar, 1)}
.stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.card.cropped .stage video{inset:auto; object-fit:fill}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.stage.drawing canvas{pointer-events:auto; cursor:crosshair; touch-action:none}
.empty{
  position:absolute; inset:0; color:var(--stage-ink); padding:16px 18px;
  display:flex; flex-direction:column; justify-content:center; gap:10px; overflow:auto;
}
.empty .lead{margin:0; font-size:17px; font-weight:600}
.empty .small{margin:0; color:#aab5ac; font-size:13px}
.empty input{
  flex:1 1 140px; min-width:0; font:inherit; color:var(--stage-ink); background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.18); border-radius:999px; padding:7px 12px;
}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn{
  font:inherit; font-weight:600; font-size:13px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.empty .btn{color:var(--stage-ink); border-color:rgba(255,255,255,0.25)}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn[aria-pressed="true"]{background:color-mix(in srgb, var(--accent) 18%, transparent); border-color:var(--accent)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.icon{padding:7px 10px; font-size:15px; line-height:1}
#trackBtn.on{background:transparent; color:var(--ink); border-color:var(--accent)}
#trackBtn.on::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent)}

/* controls above the video, clear of YouTube's own: crop (top left), status, settings (top right) */
.tools{
  position:absolute; z-index:2; left:0; right:0; bottom:calc(100% + 8px);
  --tool:36px; display:grid; grid-template-columns:var(--tool) 1fr var(--tool); align-items:end; gap:8px; pointer-events:none;
}
.tools > .tool, .status button{pointer-events:auto}
.tool{
  flex:none; width:var(--tool); height:var(--tool); display:grid; place-items:center; padding:0; margin:0;
  border:0; border-radius:50%; cursor:pointer; color:#fff;
  background:rgba(12,16,14,0.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .15s ease;
}

.tool svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tool:hover{background:rgba(12,16,14,0.8)}
.tool[aria-pressed="true"], .tool[aria-expanded="true"]{background:var(--accent); color:var(--accent-ink)}
.tools #cropBtn{grid-column:1}
.tools .status{grid-column:2; justify-self:center}
.tools .settings{grid-column:3}
.status{
  margin:0; min-width:0; max-width:100%; padding:6px 12px; border-radius:14px;
  color:var(--stage-ink); font-size:12.5px; line-height:1.35; text-align:center;
  background:rgba(12,16,14,0.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:opacity .4s ease;
}
.status:empty{display:none}
.status.warn{color:#f6b3a2}
.status.quiet{opacity:0; pointer-events:none}
.status button{font:inherit; font-weight:600; color:var(--accent); background:none; border:0; padding:0 0 0 6px; cursor:pointer}

/* settings: a popover above the video card, a bottom sheet on phones */
.menu-backdrop{display:none}
.menu{
  position:absolute; right:0; bottom:calc(100% + 56px); z-index:4;
  width:270px; max-height:min(70vh, 560px); overflow:auto; overscroll-behavior:contain;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:6px; display:flex; flex-direction:column;
}
.menu .sheet-head{display:none}
.menu button, .menu a{
  font:inherit; text-align:left; background:none; border:0; color:var(--ink); padding:8px 10px;
  border-radius:8px; cursor:pointer; text-decoration:none;
}
.menu button:hover:not(:disabled), .menu a:hover{background:color-mix(in srgb, var(--ink) 7%, transparent)}
.menu button:disabled{opacity:.4; cursor:default}
.menu button[aria-pressed="true"]::after{content:" \2713"; color:var(--accent)}
.menu label{display:flex; flex-direction:column; gap:4px; padding:6px 10px; color:var(--muted); font-size:12.5px}
.menu select{font:inherit; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 8px}
.menu hr{border:0; border-top:1px solid var(--line); margin:4px 6px}
.menu .swatches{display:flex; gap:6px; padding:0 10px 6px}
.menu .swatches label{flex:1; flex-direction:row; align-items:center; gap:6px; padding:0; color:var(--ink); font-size:13px}
.menu input[type="checkbox"]{margin:0; accent-color:var(--accent)}
.menu input[type="color"]{width:30px; height:26px; padding:2px; border:1px solid var(--line); border-radius:6px; background:var(--bg); cursor:pointer}

@media (max-width:700px){
  .card, .card.cropped, .card.expanded{
    left:calc(8px + env(safe-area-inset-left,0px)); right:calc(8px + env(safe-area-inset-right,0px));
    bottom:calc(8px + env(safe-area-inset-bottom,0px)); width:auto;
  }
  .card.cropped{width:min(72vw, 300px); right:auto}
  .tools{--tool:40px}
  .camera{top:calc(8px + env(safe-area-inset-top,0px)); right:calc(8px + env(safe-area-inset-right,0px)); padding:3px}
  .cam{width:32px; height:32px}
  .cam-sep{margin:0 2px}
  /* 16px stops iOS zooming into a field when it gets focus */
  .empty input, .menu select{font-size:16px}
}
/* settings as a bottom sheet on phones, upright or sideways */
@media (max-width:700px), (max-height:500px){
  .menu-backdrop{display:block; position:fixed; inset:0; z-index:3; background:rgba(0,0,0,0.4)}
  .menu-backdrop[hidden]{display:none}
  .menu{
    position:fixed; left:0; right:0; bottom:0; width:auto; max-width:560px; margin:0 auto; max-height:min(80vh, 640px);
    border-radius:18px 18px 0 0; border-width:1px 0 0; padding:4px 10px calc(14px + env(safe-area-inset-bottom,0px));
  }
  .menu .sheet-head{
    display:flex; align-items:center; justify-content:space-between; position:sticky; top:-4px; z-index:1;
    margin:0 -10px 4px; padding:10px 12px 8px 20px; background:var(--panel); border-bottom:1px solid var(--line);
    font-weight:600; font-size:16px;
  }
  .menu .sheet-head button{font-size:22px; line-height:1; padding:4px 10px}
  .menu button, .menu a{padding:12px 10px; font-size:15px}
  .menu label{font-size:13px}
  .menu .swatches label{font-size:14px}
  .menu input[type="color"]{width:38px; height:32px}
  .menu input[type="checkbox"]{width:20px; height:20px}
}

/* server version additions */
.stage #yt, .stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.card.cropped .stage #yt, .card.cropped .stage iframe, .card.cropped .stage video{inset:auto}
.stage .still{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.progress{position:absolute; left:0; right:0; top:0; z-index:2; height:3px; pointer-events:none; transition:opacity .6s ease}
.progress.done{opacity:0}
.progress span{display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease}
.empty form{display:flex; gap:8px; flex-wrap:wrap}
/* with nothing loaded the card grows to fit what it offers, the series to pick an episode from */
.card.idle .stage{aspect-ratio:auto}
.card.idle .empty{position:relative; inset:auto}
.series{display:flex; flex-direction:column; gap:10px; margin-top:6px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.1)}
.series-head{display:flex; align-items:center; gap:8px}
.series-tabs{display:flex; gap:4px; padding:3px; border-radius:999px; background:rgba(255,255,255,0.06); min-width:0; overflow-x:auto; scrollbar-width:none}
.series-tabs button{
  font:inherit; font-size:13px; font-weight:600; color:#aab5ac; background:none; border:0; border-radius:999px;
  padding:5px 12px; cursor:pointer; white-space:nowrap;
}
.series-tabs button span{font-weight:500; opacity:.7; margin-left:5px}
.series-tabs button:hover{color:var(--stage-ink)}
.series-tabs button[aria-selected="true"]{background:rgba(255,255,255,0.14); color:var(--stage-ink)}
.series-nav{display:flex; gap:4px; margin-left:auto}
.series-nav button{
  width:30px; height:30px; display:grid; place-items:center; padding:0; border-radius:50%; cursor:pointer;
  color:var(--stage-ink); background:none; border:1px solid rgba(255,255,255,0.2);
}
.series-nav button:disabled{opacity:.3; cursor:default}
.series-nav svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
@media (hover:none){ .series-nav{display:none} }
.episodes{
  display:grid; grid-auto-flow:column; grid-auto-columns:156px; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding:0 2px; padding:2px 2px 8px; margin:0 -2px; scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.2) transparent;
}
.ep{
  display:flex; flex-direction:column; gap:6px; padding:0; margin:0; border:0; background:none; color:var(--stage-ink);
  font:inherit; text-align:left; cursor:pointer; scroll-snap-align:start; min-width:0;
}
.ep .thumb{position:relative; display:block; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:rgba(255,255,255,0.06)}
.ep img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .2s ease}
.ep:hover img{transform:scale(1.04)}
.ep:focus-visible{outline:none}
.ep:focus-visible .thumb{outline:2px solid var(--accent); outline-offset:2px}
.ep .dur, .ep .tag{position:absolute; font-size:11px; font-weight:600; line-height:1; padding:3px 5px; border-radius:5px}
.ep .dur{right:5px; bottom:5px; color:#fff; background:rgba(0,0,0,0.75)}
.ep .tag{left:5px; top:5px; color:var(--accent-ink); background:var(--accent)}
.ep .tag.ready{color:#fff; background:rgba(12,16,14,0.8)}
.ep.watched .thumb::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--accent)}
.ep.watched img{opacity:.6}
.ep .title{
  font-size:12.5px; font-weight:500; line-height:1.3; color:#d6ddd4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ep .n{font-size:11.5px; color:#8f9a91}
.empty .or{display:flex; align-items:center; gap:8px; color:#aab5ac; font-size:13px}
.empty .err{color:#f0a08c; margin:0; font-size:13px}
/* the start card of the screen-sharing page */
@media (min-width:701px){ .card.idle.intro{width:min(680px, calc(100vw - 40px))} }
.empty .howto{display:block; width:100%; height:auto; border-radius:10px}
.empty .row .or{margin-left:2px}