/* My Media / a compact video room */
:root{color-scheme:light;--canvas:#f1f4f8;--surface:#fff;--ink:#25364d;--soft:#6c7b90;--rule:#dce4ed;--accent:#375d91;--wash:#eef3f9;--error:#a23838}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--accent);text-underline-offset:4px}button,input{font:inherit}button,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent)}
.page{max-width:1220px;margin:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 34px;border-bottom:1px solid var(--rule)}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-size:21px;line-height:1.15;font-weight:700;letter-spacing:-.4px}.brand svg{width:41px;height:41px;fill:var(--ink);flex:none}.brand svg path{fill:#b4dbd7}.brand small{display:block;font-size:10px;letter-spacing:1px;color:var(--soft);font-weight:500;margin-top:5px}nav{display:flex;gap:28px}nav a{color:var(--soft);text-decoration:none;font-size:12px}nav a:hover{color:var(--accent)}
main{padding:38px 34px 24px}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:650;letter-spacing:1.5px;color:var(--soft);margin:0 0 8px}.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:end;margin:0 0 31px}.intro h1{font-size:clamp(32px,4vw,48px);line-height:1.12;font-weight:650;letter-spacing:-1.7px;margin:10px 0 0}.intro>p{font-size:14px;color:var(--soft);max-width:390px;margin:0 0 4px;line-height:1.8}
.media-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(270px,1fr);align-items:start;gap:24px}.player-card,.library-card{min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:23px}.card-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.card-heading .eyebrow{margin:0}.tag{background:var(--wash);color:var(--accent);font-size:10px;padding:4px 9px;border-radius:5px}video{display:block;width:100%;aspect-ratio:16/9;max-height:70vh;object-fit:contain;background:#1b2a3d;border-radius:7px}video:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.player-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:20px 0 9px}h2{font-size:21px;font-weight:650;line-height:1.35;margin:0;overflow-wrap:anywhere}.repeat{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--soft);white-space:nowrap}.repeat input{accent-color:var(--accent);margin:0}.playback-status{font-size:11px;color:var(--soft);min-height:18px;margin:0 0 20px;overflow-wrap:anywhere}.playback-status[data-kind="error"]{color:var(--error)}
.file-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}dt{font-size:10px;color:var(--soft)}dd{font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;margin:6px 0 0;overflow-wrap:anywhere}.player-actions{display:flex;align-items:center;gap:18px;margin-top:19px}.button{display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid var(--rule);border-radius:6px;padding:9px 14px;text-decoration:none;font-size:12px;line-height:1.5;background:var(--surface);color:var(--ink);cursor:pointer;white-space:nowrap}.primary{background:var(--ink);color:#fff;border-color:var(--ink)}.button:hover{filter:brightness(.96)}.player-actions p{color:var(--soft);font-size:10px;line-height:1.6;margin:0;max-width:210px}
.library-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.library-heading .eyebrow{margin-bottom:4px}.library-heading h2{font-size:19px}.count{background:var(--wash);border-radius:6px;font:12px/1.5 ui-monospace,monospace;padding:4px 9px;color:var(--accent)}.drop-zone{text-align:center;background:#f7f9fc;border:1px dashed #c2cfdf;border-radius:8px;padding:23px 12px 17px;transition:background .15s,border-color .15s}.drop-zone.is-over{background:#e6eef9;border-color:var(--accent)}.drop-zone>svg{width:33px;height:33px;fill:none;stroke:#708aa7;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.drop-zone>p{margin:8px 0 12px;font-size:12px}.drop-zone>small{display:block;font-size:10px;color:var(--soft);margin-top:12px}.file-picker{position:relative;overflow:hidden}.file-picker input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.file-picker:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.library-status{font-size:10px;min-height:16px;color:var(--soft);margin:15px 0 10px;overflow-wrap:anywhere}.file-list{list-style:none;padding:0;margin:0;max-height:330px;overflow:auto}.file-list li+li{margin-top:6px}.file-row{display:flex;align-items:center;gap:11px;width:100%;padding:11px 10px;text-align:left;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink);cursor:pointer}.file-row:hover{background:#f6f8fb}.file-row.is-current{background:var(--wash);border-color:var(--rule)}.file-glyph{display:grid;place-items:center;flex:none;width:30px;height:32px;font-size:10px;border-radius:4px;background:#dce7f3;color:var(--accent)}.file-copy{min-width:0}.file-copy strong{display:block;font-size:11px;font-weight:600;overflow-wrap:anywhere}.file-copy small{display:block;font-size:9px;color:var(--soft);margin-top:3px;overflow-wrap:anywhere}.reset-button{border:0;background:transparent;padding:0;color:var(--accent);font-size:11px;cursor:pointer;margin-top:17px;text-decoration:underline;text-underline-offset:4px}.library-help{font-size:10px;color:var(--soft);line-height:1.7;margin:15px 0 0}
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);gap:35px;border-top:1px solid var(--rule);margin-top:34px;padding:29px 0}.about h2{font-size:23px;font-weight:550;line-height:1.3;letter-spacing:-.4px}.about p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--soft);margin:0 0 12px}.about p:last-child{margin:0}footer{border-top:1px solid var(--rule);padding-top:19px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--soft)}.noscript{font-size:12px;padding:12px;background:var(--surface)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.drop-zone{transition:none}}
@media(max-width:900px){.media-grid{grid-template-columns:1fr}.intro{gap:25px}.library-card{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.library-heading{grid-column:1/-1}.drop-zone{grid-column:1;grid-row:2/5;align-self:start}.library-status,.file-list,.reset-button{grid-column:2}.library-status{margin-top:0}.reset-button{justify-self:start}.library-help{grid-column:1/-1}.file-list{max-height:200px}}
@media(max-width:560px){.topbar{padding:21px;flex-wrap:wrap;gap:20px}nav{gap:23px}main{padding:27px 16px 20px}.intro{grid-template-columns:1fr;gap:17px}.intro h1{font-size:36px;letter-spacing:-1.2px}.intro>p{font-size:13px}.player-card,.library-card{padding:17px;border-radius:9px}.player-title{gap:10px;align-items:flex-start}.player-title h2{font-size:19px}.player-actions{flex-direction:column;align-items:flex-start;gap:11px}.player-actions p{max-width:none}.file-details{gap:10px}dd{font-size:12px}.library-card{display:block}.library-status{margin-top:15px}.file-list{max-height:260px}.about{grid-template-columns:1fr;gap:19px;margin-top:27px;padding:25px 0}.about h2 br{display:none}footer{flex-wrap:wrap;gap:8px}}

/* Build: 8a6839781f56546e */