:root{color-scheme:dark;--bg:#101d25;--panel:#192b35;--ink:#eef3e5;--muted:#9aafb1;--line:#344b52;--gold:#f6c06f;--mint:#9ad9ba;font:16px/1.7 system-ui,-apple-system,"Microsoft JhengHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}header,main{max-width:1240px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.1em}header b{color:var(--gold)}a{color:var(--mint);text-decoration:none}a:hover{text-decoration:underline}.intro{display:flex;justify-content:space-between;align-items:center;gap:50px;padding:14px 0 25px}.intro p{max-width:720px;color:var(--muted);margin:8px 0}.intro .eyebrow{color:var(--gold)}.eyebrow{font-size:11px;letter-spacing:.18em;font-weight:800}h1{font-size:clamp(26px,4vw,46px);line-height:1.2;letter-spacing:-.04em;margin:16px 0}h1 em{color:var(--gold);font-style:normal}.count{min-width:180px;text-align:right}.count b{display:block;font-size:60px;line-height:1.1}.count span{font-size:11px;color:var(--muted)}.workspace{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}#clips{display:flex;flex-direction:column;gap:10px}button,select{font:inherit;color:inherit;border:1px solid var(--line);border-radius:9px;background:var(--panel);min-height:44px;cursor:pointer}button:hover{border-color:var(--mint)}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.clip{padding:10px 14px;text-align:left;width:100%;transition:background .15s}.clip.active{background:#29433e;border-color:var(--mint)}.clip span{display:block;color:var(--muted);font-size:10px;letter-spacing:.1em}.clip b{font-size:16px}.clip small{float:right;color:var(--gold);font-size:11px}.viewer{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:22px;min-width:0}.viewer-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.viewer-bar h2{margin:0;font-size:22px}.viewer-bar .eyebrow{color:var(--gold)}.frame-label{font:18px ui-monospace,monospace;color:var(--mint)}.stage{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#13222b}#stage{display:block;width:100%;height:340px}.stage-label{position:absolute;bottom:10px;left:14px;pointer-events:none;font-size:9px;letter-spacing:.12em;color:#94a7aa}.stage-label span{margin-left:10px}.transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:16px 0}.transport button{padding:5px 18px}.transport .primary{background:var(--gold);border-color:var(--gold);color:#182830;font-weight:800;min-width:85px}label{font-size:12px;color:var(--muted)}.transport label{margin-left:auto;display:flex;align-items:center;gap:8px}.transport label+label{margin-left:4px}select{font-size:12px;min-height:40px;padding:4px 8px}.scrub-label{display:flex;justify-content:space-between}#scrub{width:100%;margin:10px 0 16px;accent-color:var(--gold);min-height:28px}.filmstrip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.frame{min-width:0;padding:0;border-radius:6px;position:relative}.frame.active{border-color:var(--gold);background:#31403e}.frame canvas{display:block;width:100%;height:55px}.frame span{display:block;font:9px ui-monospace,monospace;color:var(--muted);padding-bottom:3px}.asset-info{font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-bottom:0}.status{margin:35px 0 20px;border-top:1px solid var(--line);padding-top:16px}.status h2{font-size:19px}.status p{max-width:960px;font-size:13px;color:var(--muted)}.status strong{color:var(--gold)}.links{display:flex;flex-wrap:wrap;gap:24px;font-size:13px}footer{display:flex;justify-content:space-between;margin-top:40px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}#error{color:#ffb1a1;font-size:13px}@media(max-width:700px){header,main{padding:18px 16px}.count{display:none}.intro{gap:0;padding-top:0}.intro p{font-size:13px}.workspace{grid-template-columns:1fr;gap:14px}#clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.clip{padding:9px 8px}.clip b{font-size:13px}.clip small{display:none}.clip span{font-size:8px}.viewer{padding:14px}#stage{height:270px}.transport{gap:5px}.transport button{padding:4px 14px}.transport label{margin-left:8px}.transport .bg{margin-left:0}.filmstrip{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.frame canvas{height:48px}.stage-label span{display:none}.stage-label{font-size:8px}header>span{font-size:9px}footer{display:block}footer span{display:block;margin-top:5px}}
