*{box-sizing:border-box} [hidden]{display:none!important}
:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;color:#ececea;background:#17191b;font-synthesis:none}
body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #45494b;background:#272a2c;color:#ececea;border-radius:7px;padding:10px 16px;min-height:40px;font-size:13px}button:hover{background:#34383a;border-color:#8c9393}button:disabled{opacity:.45;cursor:wait}button:focus-visible,input:focus-visible{outline:2px solid #d6d0ba;outline-offset:4px}button.quiet{background:transparent;border-color:transparent}
header{height:70px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #303335}.brand{font-size:19px;font-weight:700;letter-spacing:.13em;color:#e2dbc6}.brand span{font-size:14px;font-weight:300;letter-spacing:.19em;color:#b8bcbd;margin-left:13px}
main{max-width:1650px;margin:0 auto;padding:24px 32px}.empty{min-height:calc(100dvh - 145px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;background:radial-gradient(ellipse at 50% 15%,#33363870,transparent 60%)}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:.25em;color:#b8b29f}h1{font-size:clamp(28px,3.5vw,46px);line-height:1.16;letter-spacing:-.035em;font-weight:300;margin:15px 0 0}.drop-target{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:225px;width:min(510px,100%);border:1px dashed #666b6a;border-radius:12px;background:#202426a8}.drop-target:hover{background:#2e3335}.drop-target svg{width:82px;height:66px;stroke:#bab9ae;stroke-width:1.4;margin-bottom:13px}.drop-target strong{font-size:18px;font-weight:400}.drop-target>span{font-size:12px;color:#babdbc}.drop-target small{font-size:10px;color:#969b9b;margin-top:10px}.finish-list{font-size:11px;color:#a8acac;margin:0;line-height:1.9;text-align:center}.finish-list span{color:#666;margin:0 7px}
#showcase{width:100%}#viewer{width:100%;border:1px solid #404546;border-radius:10px;overflow:hidden;background:#101214}#stage{width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 250px);min-height:230px;position:relative}#stage canvas{width:100%;height:100%;display:block}.controls{display:flex;align-items:center;gap:17px;padding:10px 15px;background:#222628}#play{min-width:86px}#seek{flex:1;min-width:0;height:28px;accent-color:#d2cbb5}#time{font-size:11px;font-variant-numeric:tabular-nums;color:#afb6b4;white-space:nowrap}#fullscreen{font-size:22px;padding:0;min-width:32px}.bottom-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:17px}#chapters{display:flex;gap:5px;flex-wrap:wrap}#chapters button{font-size:12px;background:transparent;border-color:transparent;color:#a2a9a8;padding:9px 12px}#chapters button span{font-size:9px;color:#7e8684;margin-right:5px}#chapters button[aria-current=true]{color:#ede9db;background:#2d3232;border-color:#51584f}#chapters button[aria-current=true] span{color:#d6cfb5}.primary{background:#d4cfbb;color:#1d2422;border-color:#d4cfbb;white-space:nowrap}.primary:hover{background:#ece5d2}.primary small{font-size:10px;opacity:.65;margin-left:8px}#status{font-size:12px;color:#d4ccb6;max-width:600px;margin:12px auto;text-align:center}#drop-overlay{position:fixed;inset:10px;z-index:10;background:#1f2726e8;border:2px dashed #d6cfb5;border-radius:15px;display:grid;place-items:center;font-size:23px;pointer-events:none}dialog{border:1px solid #59605d;border-radius:12px;padding:30px;background:#242a29;color:#eeeee7;width:min(430px,90vw)}dialog::backdrop{background:#0009}dialog h2{font-size:20px;font-weight:400;margin:0 0 22px}dialog progress{width:100%;accent-color:#d4cfbb}dialog p{font-size:13px;color:#c3c8c5}
#viewer:fullscreen{border:0;border-radius:0;display:flex;flex-direction:column;background:#101214}#viewer:fullscreen #stage{flex:1;max-height:none;aspect-ratio:auto;min-height:0}#viewer:fullscreen .controls{flex-shrink:0}
@media(max-width:760px){header{height:58px;padding:0 16px}.brand{font-size:16px}.brand span{font-size:11px;margin-left:7px}main{padding:16px}.bottom-bar{align-items:flex-start;flex-direction:column}#chapters{display:grid;grid-template-columns:1fr 1fr;width:100%}#chapters button{text-align:left}#export{align-self:flex-end}.controls{gap:8px;padding:8px}#time{font-size:9px}#play{min-width:65px;padding:8px}#stage{min-height:190px}.empty{gap:22px}.finish-list{max-width:300px}}