*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0b0b0c;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;overflow:hidden}
#app{display:flex;flex-direction:column;height:100dvh}
#stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#000}
#view{max-width:100%;max-height:100%;aspect-ratio:3/4;object-fit:contain;background:#111}
.chip{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-start:10px;background:#000a;backdrop-filter:blur(8px);padding:6px 12px;border-radius:99px;font-size:13px;display:flex;gap:6px;align-items:center}
.chip i{width:8px;height:8px;border-radius:50%;background:#aaa;display:inline-block}
.chip.live i{background:#3ddc84}.chip.gen i{background:#ffb020;animation:p 1s infinite}.chip.ai i{background:#6aa8ff}
@keyframes p{50%{opacity:.25}}
#tools{position:absolute;top:calc(10px + env(safe-area-inset-top));inset-inline-end:10px;display:flex;flex-direction:column;gap:8px}
#tools button{width:42px;height:42px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:18px;backdrop-filter:blur(8px)}
#tools button#aiToggle{font-size:13px;font-weight:700;opacity:.55}
#tools button#aiToggle.on{opacity:1;background:#2b5fd9}
.start{position:absolute;inset:0;background:#0b0b0cf2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px}
.start.hide{display:none}
.start h1{margin:0;font-size:28px}.start p{margin:0 0 8px;opacity:.75}
button.primary{background:#fff;color:#000;border:0;border-radius:14px;padding:14px 28px;font-size:17px;font-weight:700}
button.ghost{background:none;color:#fff;border:1px solid #fff5;border-radius:14px;padding:10px 20px;font-size:15px}
.err{color:#ff8a8a;font-size:14px;min-height:18px;max-width:320px}
#sheet{background:#141416;border-top:1px solid #ffffff14;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
#sel{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;min-height:30px;align-items:center}
#sel .dot{display:flex;gap:6px;align-items:center;background:#ffffff14;border-radius:99px;padding:4px 10px;font-size:13px;white-space:nowrap}
#sel .sw{border:2px solid transparent;border-radius:50%;width:22px;height:22px;padding:0;overflow:hidden;background:#333}
#sel .sw img{width:100%;height:100%;object-fit:cover;display:block}
#sel .sw.on{border-color:#fff}
#list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity}
.card{flex:0 0 108px;scroll-snap-align:start;background:#1d1d20;border:2px solid transparent;border-radius:12px;padding:0;color:#fff;text-align:center;overflow:hidden}
.card.on{border-color:#fff}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:#fff}
.card b{display:block;font-size:12px;padding:5px 4px 1px;font-weight:600;line-height:1.2}
.card span{display:block;font-size:11px;opacity:.6;padding:0 4px 6px}