:root { color-scheme: dark; --bg:#050505; --surface:#101010; --surface-hi:#181818; --line:#2c2c2c; --text:#f2f1ec; --muted:#8e8e89; --lime:#c8ff45; --lime-dim:rgba(200,255,69,.18); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:"Segoe UI",Roboto,Arial,sans-serif; }
body { overscroll-behavior:none; }
button, input, label { font:inherit; }
button { border:0; color:inherit; cursor:pointer; }
.app { height:100dvh; max-width:620px; margin:0 auto; display:flex; flex-direction:column; overflow:hidden; padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.empty-state { height:100%; display:flex; flex-direction:column; justify-content:center; padding:36px 14px 72px; }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:15px; background:var(--lime); color:#121212; font-weight:800; font-size:23px; margin-bottom:38px; }
.eyebrow, .subtitle-label { margin:0; color:var(--lime); font:500 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:12px 0 18px; letter-spacing:-.075em; font-size:clamp(42px,11vw,64px); line-height:1.02; }
.intro { max-width:320px; color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 38px; }
.file-actions { display:grid; gap:10px; }
.file-actions label { min-height:56px; display:flex; align-items:center; justify-content:center; border-radius:16px; font-size:14px; font-weight:700; cursor:pointer; }
.file-actions input { position:absolute; width:1px; height:1px; opacity:0; }
.primary-action { color:#101010; background:var(--lime); }
.secondary-action { border:1px solid var(--line); background:var(--surface); }
.hint { margin:16px 0 0; text-align:center; color:#6f6f6b; font-size:11px; }
.player-view { height:100%; display:flex; flex-direction:column; padding-top:8px; }
.topbar { height:52px; display:grid; grid-template-columns:44px 1fr 44px; align-items:center; }
.icon-button { width:38px; height:38px; border-radius:12px; background:transparent; color:var(--muted); font-size:23px; }
.menu-wrap { justify-self:end; position:relative; }
.file-menu { position:absolute; z-index:5; top:46px; right:0; width:174px; padding:13px; border:1px solid #333; border-radius:14px; background:#171717; box-shadow:0 14px 35px rgba(0,0,0,.45); }
.file-menu p { margin:0 0 9px; color:#878780; font:500 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.1em; text-transform:uppercase; }
.file-menu label { display:block; padding:10px 8px; border-radius:8px; color:#f0f0eb; font-size:12px; font-weight:700; cursor:pointer; }
.file-menu label:active { background:#292929; }
.episode-title { justify-self:center; display:flex; align-items:center; gap:8px; max-width:220px; overflow:hidden; color:#e8e8e1; font-size:13px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); flex:none; }
.video-progress-area { padding:14px 4px 18px; }
.video-times, .segment-meta { display:flex; justify-content:space-between; color:var(--muted); font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.03em; }
.video-times span:nth-child(2) { color:#cdcdc7; }
.seek { width:100%; appearance:none; -webkit-appearance:none; height:4px; background:linear-gradient(90deg,var(--lime) var(--progress,0%),var(--line) var(--progress,0%)); border-radius:999px; outline:none; cursor:pointer; }
.seek::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--lime); border:3px solid #171717; box-shadow:0 0 0 1px rgba(200,255,69,.25); }
.video-seek { margin-top:13px; }
.video-stage { position:relative; margin:0 -16px; width:calc(100% + 32px); background:#000; aspect-ratio:16/9; max-height:49dvh; display:grid; place-items:center; overflow:hidden; }
video { display:block; width:100%; height:100%; object-fit:contain; }
.segment-panel { flex:1; min-height:173px; padding:25px 6px 15px; display:flex; flex-direction:column; }
.subtitle-text { flex:1; display:flex; align-items:center; justify-content:center; margin:0; padding:8px 8px 18px; color:var(--text); text-align:center; white-space:pre-line; font-size:19px; font-weight:600; line-height:1.38; letter-spacing:-.028em; }
.segment-panel.inactive .subtitle-label { visibility:hidden; }
.segment-panel.inactive .subtitle-text { color:#666661; font-weight:500; font-size:14px; letter-spacing:0; }
.segment-controls { display:grid; gap:14px; }
.segment-controls[hidden] { display:none; }
.loop-range { position:relative; height:28px; display:flex; align-items:center; }
.loop-range::before { content:""; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:var(--line); }
.loop-fill { position:absolute; left:var(--a,0%); width:calc(var(--b,100%) - var(--a,0%)); height:4px; border-radius:3px; background:var(--lime); pointer-events:none; }
.segment-seek, .point-slider { position:absolute; inset:0; width:100%; margin:0; background:transparent; }
.segment-seek { z-index:1; }
.point-slider { pointer-events:none; z-index:3; appearance:none; -webkit-appearance:none; }
.point-slider::-webkit-slider-runnable-track { background:transparent; }
.point-slider::-webkit-slider-thumb { pointer-events:auto; appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:#111; border:2px solid var(--lime); box-shadow:0 0 0 3px var(--bg); }
.point-slider:not(.enabled) { display:none; }
.transport { margin-top:auto; min-height:90px; padding:12px 0 16px; display:grid; grid-template-columns:1.25fr 1.25fr 44px 58px 44px; gap:7px; align-items:center; }
.transport-button { height:51px; border-radius:14px; padding:0 5px; color:#989893; background:var(--surface); font-size:9px; font-weight:700; line-height:1.1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; white-space:nowrap; }
.transport-button .button-icon { font-size:16px; line-height:13px; }
.transport-button[aria-pressed="true"] { color:#101010; background:var(--lime); }
.round-button { width:44px; height:44px; border-radius:50%; background:var(--surface-hi); color:#e7e7e1; font-size:35px; font-weight:300; line-height:1; padding-bottom:5px; }
.play-button { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:#0b0b0b; font-size:20px; box-shadow:0 5px 20px rgba(200,255,69,.18); }
.play-button span { margin-left:3px; }
@media (orientation:landscape) { .app::after { content:"Portrait orientation only"; position:fixed; inset:0; z-index:9; display:grid; place-items:center; background:#050505; color:#c8ff45; font:500 13px ui-monospace,SFMono-Regular,Consolas,monospace; } }