:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark;--ink:#f5f6ef;--muted:#a9ada0;--base:#121310;--panel:#1c1e18;--line:#373b30;--lime:#d7fa91;background:var(--base);color:var(--ink)}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:280px}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
button:disabled{opacity:.48;cursor:default}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
svg{width:24px;height:24px;vertical-align:middle;flex:none}
.symbol-bank,.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.top{border-bottom:1px solid #282b23}
.top-inner,.shell{width:min(100% - 64px,1280px);margin-inline:auto}
.top-inner,.top-right,.brand,.feature-actions,.status{display:flex;align-items:center}
.top-inner{min-height:75px;justify-content:space-between}
.brand{gap:11px;font-size:22px;letter-spacing:-.06em;font-weight:480}
.brand strong{font-weight:750}
.brand-mark{display:grid;place-items:center;width:35px;height:35px;color:#171b12;background:var(--lime);border-radius:9px;overflow:hidden}
.brand-mark img{width:35px;height:35px}
.top-right{gap:21px}
.status,.tag,.count,.time,.hero-note{font-variant-numeric:tabular-nums}
.status{gap:8px;color:var(--muted);font-size:13px}
.status i,.eyebrow i,.watch-foot i{width:7px;height:7px;background:var(--lime);border-radius:50%;display:inline-block;flex:none}
.status i{box-shadow:0 0 12px #d7fa9150}
.icon-button,.secondary{min-height:46px;border-radius:10px;border:1px solid var(--line);background:#1b1d17;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.icon-button{min-width:46px;padding:0 8px}
.icon-button:hover,.secondary:hover{background:#282d22}
.logout{min-height:42px;min-width:42px}
.shell{padding-top:28px}
.feature{position:relative;isolation:isolate;overflow:hidden;min-height:375px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 80% 20%,#4d5838 0%,#2a3223 45%,#1b2119 86%);display:flex;align-items:center}
.feature::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#141910 3%,#141910eb 30%,#14191055 75%),linear-gradient(0deg,#141910af,transparent 65%);pointer-events:none}
.feature-art{position:absolute;z-index:-2;right:0;width:75%;height:100%;inset-block:0;object-fit:cover;object-position:center 37%;opacity:.72}
.feature-inner{padding:50px 48px 54px;max-width:665px}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--lime);font-size:11px;letter-spacing:.18em;font-weight:760}
h1,h2,p{margin:0}
.feature h1,.login h1{font-size:clamp(41px,5.7vw,81px);line-height:.98;letter-spacing:-.07em;font-weight:740;margin:16px 0}
.feature p,.login-card>p{font-size:17px;line-height:1.55;color:#c3c7ba;max-width:385px}
.feature-actions{gap:13px;margin-top:29px}
.primary{min-height:50px;padding:0 18px;border:0;border-radius:10px;color:#171b12;background:var(--lime);font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.primary:hover:enabled{background:#e6ffb4}
.tag{border:1px solid #676e5d;border-radius:8px;color:#e4e7db;padding:8px 10px;font-size:13px;font-weight:650}
.hero-note{position:absolute;bottom:22px;right:26px;font-size:10px;letter-spacing:.13em;font-weight:730;color:#d8dbce}
.hero-note span:first-child{color:var(--lime)}
.library{padding-top:38px}
.library-head,.library-tools{display:flex;justify-content:space-between;align-items:end;gap:16px}
.library h2{font-size:clamp(31px,4vw,51px);line-height:1.15;letter-spacing:-.065em;margin-top:7px}
.search{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--muted);width:min(100%,320px)}
.search input{min-width:0;width:100%;min-height:45px;border:0;background:transparent;color:var(--ink);outline:none}
.search:focus-within{outline:2px solid var(--lime);outline-offset:2px}
.search input:focus-visible{outline:none}
.library-tools{margin:20px 0 17px;align-items:center}
.filters{display:flex;gap:7px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:transparent;border-radius:99px;min-height:42px;padding:0 17px;color:var(--muted);font-size:14px;font-weight:670}
.filters button[aria-pressed="true"]{background:#303b24;color:var(--lime);border-color:#4b5a3a}
.count{font-size:13px;color:var(--muted);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(169px,1fr));gap:14px}
.tile{text-align:left;display:block;width:100%;min-width:0;overflow:hidden;border:1px solid #2e3227;border-radius:13px;padding:0;background:#1b1d17;transition:border-color .15s,background .15s}
.tile:hover,.tile:focus-visible{border-color:#7a9461;background:#21251c}
.tile-media{display:grid;place-items:center;aspect-ratio:1.55;background:radial-gradient(ellipse at 75% 25%,#394631,#252c20);position:relative;overflow:hidden}
.tile-media img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.tile-media>svg{color:#a2ac97;opacity:.65}
.tile-play{position:absolute;z-index:1;right:9px;bottom:9px;display:grid;place-items:center;background:#141611d9;border:1px solid #ffffff38;border-radius:50%;width:35px;height:35px}
.tile-play svg{width:20px;height:20px}
.tile-meta{display:block;padding:11px 11px 13px}
.tile-meta strong,.tile-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-meta strong{font-size:15px;letter-spacing:-.015em}
.tile-meta small{color:var(--muted);font-size:12px;margin-top:4px}
.library-message{padding:22px 0;color:var(--muted)}
.secondary{padding:0 15px;font-size:14px;font-weight:650}
.more{display:flex;margin:22px auto 0}
footer{display:flex;justify-content:space-between;gap:14px;border-top:1px solid #282b23;margin-top:44px;padding:19px 0 26px;color:var(--muted);font-size:12px}
.watch{padding-bottom:30px}
.watch-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.watch h1{font-size:clamp(30px,4vw,53px);line-height:1.12;letter-spacing:-.055em;margin:20px 0 6px}
.watch-sub{color:var(--muted);margin-bottom:17px}
.screen{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#070806}
.picture{position:relative;display:grid;place-items:center;aspect-ratio:16/9;max-height:64vh}
.picture canvas{width:100%;height:100%;object-fit:contain;min-height:0;min-width:0;grid-area:1 / 1}
.overlay{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:14px;background:#0a0c08c4;padding:15px;text-align:center}
.overlay-status{display:flex;align-items:center;justify-content:center;gap:9px}
.overlay-status:empty{display:none}
.spinner{width:19px;height:19px;border:2px solid #738060;border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.controls{padding:7px 12px 12px;background:#1b1d17}
.timeline{width:100%;height:33px;margin:0;accent-color:var(--lime);cursor:pointer}
.control-row{display:flex;align-items:center;gap:7px}
.control-play{background:var(--lime);color:#171b12;border-color:var(--lime)}
.control-play:hover:enabled{background:#e6ffb4}
.control-spacer{flex:1}
.skip,.time{font-variant-numeric:tabular-nums;font-size:13px}
.time{padding-inline:5px;color:#e2e7d9;white-space:nowrap}
.track{display:flex;align-items:center;gap:6px;border:1px solid var(--line);min-height:46px;border-radius:10px;padding:0 7px;color:var(--muted)}
.track select{width:min(20vw,195px);min-height:43px;background:transparent;color:var(--ink);border:0;cursor:pointer;font-size:13px}
.watch-foot{margin-top:14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.screen:fullscreen,.screen.expanded{display:flex;flex-direction:column;border:0;border-radius:0;background:#070806}
.screen:fullscreen .picture,.screen.expanded .picture{flex:1;aspect-ratio:auto;max-height:none;min-height:0}
.screen.expanded{position:fixed;inset:0;z-index:3}
body:has(.expanded){overflow:hidden}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(ellipse at 85% 0%,#303c24 0%,#181c15 43%,var(--base) 79%);padding:25px}
.login{width:min(100%,470px)}
.login>.brand{margin-bottom:23px}
.login-card{border:1px solid var(--line);border-radius:22px;background:#1a1d17;padding:clamp(23px,5vw,44px)}
.login h1{font-size:clamp(42px,7vw,67px)}
.login form{margin-top:24px;display:grid;gap:9px}
.login form label{font-size:14px;font-weight:700}
.login form input{background:#121410;border:1px solid #454c3c;color:var(--ink);border-radius:10px;padding:0 13px;min-height:52px;width:100%}
.login form .primary{justify-content:space-between}
.login-error{font-size:13px;color:#ffb7ad}
.login-error:empty{display:none}
.login-footer{margin-top:19px;display:flex;align-items:center;gap:10px;font-size:10px;font-weight:710;letter-spacing:.14em;color:var(--muted)}
.login-footer span{width:16px;height:1px;background:#777e6e}
@media (max-width:640px){
  .top-inner,.shell{width:calc(100% - 32px)}
  .top-inner{min-height:62px}
  .shell{padding-top:16px}
  .feature{min-height:304px}
  .feature-inner{padding:34px 20px 49px}
  .feature-art{width:100%}
  .hero-note{bottom:12px;right:15px}
  .library{padding-top:27px}
  .library-head{align-items:stretch;flex-direction:column;gap:12px}
  .search{width:100%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .control-row{gap:4px;flex-wrap:wrap}
  .skip{min-width:38px}
  .track select{width:70px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:2s!important}}