Mini Video Library

:root{color-scheme:dark;--bg:#0b0c0f;--panel:#14161b;--line:#252832;--text:#f3f4f6;--muted:#9197a5;--accent:#ff4d5e}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,sans-serif}a{color:inherit;text-decoration:none}header{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);position:sticky;top:0;background:#0b0c0fe8;backdrop-filter:blur(14px);z-index:5}.brand{font-weight:750;letter-spacing:-.02em}.brand:first-letter{color:var(--accent)}nav{display:flex;gap:24px;color:var(--muted)}nav a:hover{color:white}main{max-width:1500px;margin:auto;padding:48px max(5vw,24px)}footer{text-align:center;color:#555;padding:50px}.hero{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.hero h1,.settings h1{font-size:clamp(38px,6vw,72px);line-height:.95;letter-spacing:-.06em;margin:5px 0}.hero p{color:var(--muted)}.eyebrow{font-size:12px!important;letter-spacing:.2em;color:var(--accent)!important;font-weight:800}.badge{background:#272a32;border-radius:50px;padding:7px 12px}.pulse{animation:pulse 1.5s infinite}@keyframes pulse{50%{opacity:.5}}.filters{display:flex;gap:10px;margin-bottom:30px}.filters input{flex:1}input,select,textarea,button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:12px 14px;border-radius:9px;font:inherit}button{cursor:pointer}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 20px}.card h2{font-size:16px;margin:10px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card p{color:var(--muted);font-size:13px;margin:0 2px}.poster{aspect-ratio:16/10;border-radius:12px;background:linear-gradient(135deg,#20232b,#111318);overflow:hidden;display:grid;place-items:center;position:relative;transition:.2s}.poster img{width:100%;height:100%;object-fit:cover}.card:hover .poster{transform:translateY(-4px);box-shadow:0 16px 40px #0009}.poster b{position:absolute;right:10px;top:8px;color:#ffd75e}.empty{text-align:center;padding:100px 20px;color:var(--muted)}.empty span{font-size:60px}.button,.play{display:inline-block;background:var(--accent);border:0;color:white;border-radius:9px;padding:13px 20px;font-weight:700}.detail{display:grid;grid-template-columns:minmax(300px,48%) 1fr;gap:60px;align-items:center}.cover{aspect-ratio:16/10;background:var(--panel);border-radius:16px;display:grid;place-items:center;font-size:60px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.detail h1{font-size:clamp(35px,5vw,65px);line-height:1;margin:20px 0 5px;letter-spacing:-.05em}.muted,.back{color:var(--muted)}.actions{display:flex;gap:10px;margin:30px 0}.actions form{margin:0}.icon{font-size:22px;padding:8px 15px}dl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}dl div{background:var(--bg);padding:15px}dt{color:var(--muted);font-size:12px;text-transform:uppercase}dd{margin:3px 0}.player{position:fixed;inset:68px 0 0;background:#000;display:flex;flex-direction:column}.playerbar{height:50px;display:flex;gap:30px;align-items:center;padding:0 20px}.playerbar a{color:var(--muted)}video{width:100%;height:calc(100% - 50px)}.settings{max-width:800px;margin:auto}.settings label{display:flex;flex-direction:column;gap:7px;margin:22px 0;font-weight:700}.settings small{color:var(--muted);font-weight:400}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.notice{background:#173524;color:#82e8aa;padding:12px;border-radius:8px}hr{border:0;border-top:1px solid var(--line);margin:40px 0}@media(max-width:700px){.brand span{display:none}.filters{flex-wrap:wrap}.filters input{flex-basis:100%}.detail{grid-template-columns:1fr;gap:25px}.twocol{grid-template-columns:1fr}main{padding-top:28px}}