*{box-sizing:border-box}body{margin:0;background:#090909;color:#fff;font-family:Inter,system-ui,sans-serif}
main{min-height:100dvh;display:flex;flex-direction:column;max-width:760px;margin:auto;background:#111}
header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid #292929}
header b{letter-spacing:.12em}header span{font-size:12px;color:#9dffbd}
.stage{position:relative;flex:1;min-height:58dvh;overflow:hidden;background:#050505}
video,canvas{position:absolute;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}canvas{pointer-events:none}
#guide{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);padding:9px 14px;background:#000a;border:1px solid #ffffff24;border-radius:99px;font-size:12px;white-space:nowrap}
nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
button{border:1px solid #343434;background:#181818;color:#fff;border-radius:10px;padding:12px 8px;font-weight:650}button.active{background:#fff;color:#000}
.styles{display:flex;gap:10px;overflow:auto;padding:0 12px 12px}.style{min-width:86px;text-align:center;font-size:11px;border:1px solid #303030;border-radius:12px;padding:8px}
.style img{width:68px;height:68px;object-fit:contain}footer{text-align:center;color:#777;font-size:11px;padding:8px 12px 16px}
@media(min-width:760px){main{min-height:900px;margin-top:20px;border:1px solid #222;border-radius:20px;overflow:hidden}.stage{min-height:650px}}