*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0b0d12;color:#e8eaed}
a{color:#7aa7ff}
.wrap{max-width:720px;margin:0 auto;padding:48px 20px}
h1{font-size:36px;margin:0 0 8px}
h1 span{color:#7aa7ff}
.sub{opacity:.7;margin:0 0 24px}
.card{background:#12151c;border:1px solid #1f2430;border-radius:12px;padding:20px;
  display:flex;flex-direction:column;gap:12px}
.card input,.card button{font:inherit;padding:12px 14px;border-radius:8px;border:1px solid #2a3040;
  background:#0b0d12;color:#e8eaed}
.row{display:flex;gap:10px}
.row input{flex:1}
.card button{background:#3b82f6;border-color:#3b82f6;color:#fff;cursor:pointer;font-weight:600}
.card button:hover{background:#2563eb}
.docs{margin-top:32px}
pre{background:#0f1218;border:1px solid #1f2430;border-radius:8px;padding:12px;overflow:auto}

body.watch{padding:0}
.bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid #1f2430}
.bar h1{font-size:18px;margin:0}
.player-wrap{width:100%;aspect-ratio:16/9;background:#000}
#player{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#aaa}
.meta{display:flex;gap:16px;padding:20px;max-width:900px;margin:0 auto}
.meta img{width:120px;border-radius:8px}