:root{--bg:#16171b;--panel:#1e2026;--hairline:#ffffff14;--text:#ffffffeb;--text-2:#ffffff8c;--accent:#8e5cf6;--radius-control:8px;--radius-card:12px;--topbar:56px;--chrome:208px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:13px;line-height:1.45}.shell{flex-direction:column;min-height:100svh;display:flex}.topbar{height:var(--topbar);border-bottom:1px solid var(--hairline);flex:none;align-items:center;padding:0 24px;display:flex}.wordmark{width:auto;height:20px;display:block}.viewer{--ratio:calc(var(--vw) / var(--vh));--frame-w:min(100%, 1440px, calc((100vh - var(--chrome)) * var(--ratio)));flex-direction:column;flex:1;align-items:center;padding:24px 24px 32px;display:flex}@supports (height:100svh){.viewer{--frame-w:min(100%, 1440px, calc((100svh - var(--chrome)) * var(--ratio)))}}.frame{width:var(--frame-w);min-width:min(100%,240px);aspect-ratio:var(--vw) / var(--vh);border-radius:var(--radius-card);border:1px solid var(--hairline);background:#000;overflow:hidden;box-shadow:0 16px 48px #00000073}.frame video{object-fit:contain;background:#000;width:100%;height:100%;display:block}.frame video:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.info{width:max(var(--frame-w), min(100%, 560px));justify-content:space-between;align-items:flex-start;gap:16px;margin-top:16px;display:flex}.info-text{min-width:0}.title{letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere;margin:0;font-size:17px;font-weight:600;line-height:1.3}.meta{color:var(--text-2);flex-wrap:wrap;column-gap:6px;margin:4px 0 0;display:flex}.dot{opacity:.7}.speed{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-control);flex:none;gap:2px;padding:2px;display:inline-flex}.speed-option{appearance:none;min-width:44px;height:28px;color:var(--text-2);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;border-radius:6px;margin:0;padding:0 8px;font-weight:500;transition:background-color .15s ease-out,color .15s ease-out}.speed-option:hover{color:var(--text)}.speed-option[aria-pressed=true]{color:#fff;background:#8e5cf638;box-shadow:inset 0 0 0 1px #8e5cf6a6}.speed-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.center{flex:1;justify-content:center;align-items:center;padding:24px 16px 15vh;display:flex}.notice{text-align:center;background:var(--panel);border:1px solid var(--hairline);border-radius:var(--radius-card);width:min(100%,400px);padding:32px 24px}.notice-icon{color:var(--text-2);margin-bottom:12px}.notice-title{color:var(--text);margin:0;font-size:17px;font-weight:600}.notice-text{color:var(--text-2);margin:8px 0 0}@media (max-width:640px){:root{--topbar:48px;--chrome:240px}.topbar{padding:0 16px}.viewer{padding:16px 16px 24px}.frame{border-radius:10px}.info{flex-direction:column;gap:12px;margin-top:12px}.title{font-size:16px}.speed{align-self:stretch}.speed-option{flex:1}}
