:root{color-scheme:dark;--bg:#14111d;--surface:#211b30;--border:#534567;--fg:#fff;--secondary:#ddd1f2;--purple:#a275e9;--active:#bd99ff;--focus:#f9d46a;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:21px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);line-height:1.5}header{background:#241a35;border-bottom:2px solid var(--border);padding:1rem clamp(1rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}header nav{display:flex;gap:.5rem;flex-wrap:wrap}header nav[hidden]{display:none}.brand{font-size:1.65rem;color:#d9bfff}.tag{display:block;color:var(--secondary);font-size:.72rem}main{max-width:1000px;margin:auto;padding:clamp(1rem,3vw,2rem)}h1{font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.2}button,input,select{font:inherit}button{cursor:pointer;padding:.75rem 1rem;min-height:55px;border:2px solid var(--purple);border-radius:10px;background:#322545;color:white;font-weight:650}button:hover{background:#523779}.primary{background:#7545b2;color:#fff;border-color:#c59af9}.primary:hover{background:#8c5bc9}button:focus-visible,input:focus-visible,select:focus-visible,video:focus-visible,a:focus-visible{outline:4px solid var(--focus);outline-offset:4px}button:disabled{opacity:.5;cursor:not-allowed}label{display:block;font-weight:650;margin:.9rem 0 .35rem}input:not([type=checkbox]),select{width:100%;max-width:600px;background:var(--surface);color:white;border:2px solid var(--border);border-radius:8px;padding:.7rem}form>button{display:block;margin-top:1.3rem}.toggle{display:flex;align-items:center;gap:.8rem}.toggle input{width:28px;height:28px;accent-color:var(--purple)}.big-list{display:grid;gap:.65rem;margin-top:1rem}.big-list button{text-align:left;width:100%;font-size:1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.subtext{font-size:.75rem;font-weight:400;color:var(--secondary)}.toolbar,.actions{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.toolbar h1{margin:.5rem 0}.message:not(:empty){padding:.7rem;border-left:4px solid var(--purple);background:var(--surface)}.overview{white-space:pre-wrap;max-width:70ch}.hint{font-size:.8rem;color:var(--secondary)}video{width:100%;max-height:70vh;background:#000;border:2px solid var(--border);border-radius:8px}.skip{position:absolute;top:-100px;left:1rem;background:var(--focus);color:#111;padding:.5rem;z-index:20}.skip:focus{top:1rem}@media(max-width:600px){:root{font-size:19px}header{align-items:start}.big-list button{font-size:1.1rem}}

/* Full-viewport player, keeping the Back button in our own webpage.
   This deliberately avoids Safari native fullscreen, which can hide custom UI. */
#playerShell { position: relative; }
#playerShell .player-back { display: block; margin-bottom: .75rem; }
body.immersive-player { overflow: hidden; }
body.immersive-player #playerSection:not([hidden]) {
    position: fixed; inset: 0; z-index: 1000; margin: 0;
    width: 100%; height: 100vh; height: 100dvh;
    padding: 0; background: #000;
}
body.immersive-player #playerShell { width: 100%; height: 100%; }
body.immersive-player #video {
    display: block; width: 100%; height: 100%; max-height: none;
    object-fit: contain; border: 0; border-radius: 0; background: #000;
}
body.immersive-player #playerTitle,
body.immersive-player #playerShell .hint { display: none; }
body.immersive-player #playerShell .player-back {
    position: absolute; z-index: 3;
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    margin: 0; padding: 8px 14px; min-height: 52px;
    font-size: 16px; line-height: 1.1;
    background: rgba(39, 25, 57, .92);
    border: 2px solid #bd99ff; border-radius: 10px;
    color: #fff; touch-action: manipulation;
}