html:has(.vsf),body:has(.vsf){margin:0!important;background:#050505!important}
.vsf,.vsf *{box-sizing:border-box}.vsf{--r:#e52229;--bg:#050505;--p:#0d0d0f;--line:#242428;--muted:#77777d;min-height:100dvh;background:var(--bg);color:#f5f5f5;font-family:Arial,sans-serif}
.vsf header{height:60px;background:#080809;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.brand{display:flex;gap:9px;align-items:center}.brand .logo{width:29px;height:23px;border:2px solid var(--r);border-radius:5px;color:var(--r);display:grid;place-items:center;font-size:10px}.brand b{display:block;letter-spacing:1.5px;font-size:16px}.brand small{display:block;color:#707076;font-size:8px}.vsf header button{border:1px solid #303035;background:#111;color:#aaa;border-radius:5px;padding:7px;font-size:8px}
.vsf main{max-width:760px;margin:auto;background:#080809}.viewer{height:min(64dvh,650px);min-height:420px;background:#000;position:relative;overflow:hidden}.viewer>video{width:100%;height:100%;object-fit:cover;background:#000}.welcome{position:absolute;inset:0;background:#09090a;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}.lens{width:62px;height:62px;border:2px solid #333;border-radius:50%;display:grid;place-items:center;color:var(--r);font-size:28px}.welcome h1{letter-spacing:3px;margin:14px 0 5px}.welcome p{color:#999;font-size:12px}.welcome button,#save{background:var(--r);border:0;color:#fff;font-weight:900;border-radius:6px;padding:12px 17px;margin-top:12px;text-decoration:none;font-size:10px}.welcome small{color:#555;margin-top:10px;font-size:9px}
.hud{position:absolute;display:flex;gap:6px}.hud.top{right:9px;top:9px}.hud.bottom{left:9px;right:9px;bottom:9px;align-items:center}.hud span,.hud button,.mic{background:#050505c9;border:1px solid #ffffff1c;color:#ddd;border-radius:4px;padding:6px 7px;font-size:9px;font-weight:800}.mic{margin-left:auto;display:flex;gap:5px;align-items:center}.mic em{width:44px;height:5px;background:#333;display:block;border-radius:4px;overflow:hidden}.mic em i{display:block;height:100%;width:0;background:#eee}
.grid{position:absolute;inset:0;pointer-events:none}.grid:before,.grid:after{content:"";position:absolute;top:0;bottom:0;width:1px;background:#ffffff3d}.grid:before{left:33.333%}.grid:after{left:66.666%}.grid i:before,.grid i:after{content:"";position:absolute;left:0;right:0;height:1px;background:#ffffff3d}.grid i:before{top:33.333%}.grid i:after{top:66.666%}.recflag{position:absolute;left:9px;top:9px;background:#050505cc;padding:6px 8px;border-radius:4px;font-size:9px;font-weight:900}.recflag i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--r);margin-right:5px}.smarttip{position:absolute;top:44px;left:9px;max-width:245px;background:#080808dc;border-left:2px solid var(--r);padding:8px 10px}.smarttip b{display:block;color:var(--r);font-size:8px}.smarttip span{font-size:10px;color:#ddd}
.pro{height:65px;display:grid;grid-template-columns:repeat(4,1fr);background:var(--p);border-block:1px solid var(--line)}.pro button{border:0;border-right:1px solid var(--line);background:none;color:#fff}.pro span,.pro small{display:block;font-size:7px;color:#666}.pro b{display:block;font-size:11px;margin:2px}.pro .available small{color:var(--r)}
.controls{height:105px;display:grid;grid-template-columns:1fr 1fr 1.35fr 1fr 1fr;align-items:center}.controls>button{border:0;background:none;color:#777}.controls>button b{display:block;color:#eee;font-size:21px}.controls>button span{font-size:8px}.controls>button.active b{color:var(--r)}.recordWrap{text-align:center}#record{width:62px;height:62px;border:3px solid #eee;background:none;border-radius:50%;padding:6px}#record:disabled{opacity:.25}#record i{display:block;width:100%;height:100%;border-radius:50%;background:var(--r);transition:.15s}#record.recording i{border-radius:6px;transform:scale(.48)}.recordWrap time{display:block;font-size:9px;color:#999;margin-top:3px}
.vsf footer{height:32px;border-top:1px solid #19191c;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#666;font-size:8px}.modal{position:fixed;z-index:999999;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px}.modal[hidden]{display:none}.card{position:relative;width:min(520px,100%);max-height:85dvh;overflow:auto;background:#111114;border:1px solid #303035;border-radius:12px;padding:18px}.close{position:absolute;right:10px;top:8px;border:0;background:none;color:#aaa;font-size:25px}.card h3{font-size:12px;letter-spacing:.7px}.card pre{white-space:pre-wrap;background:#080809;padding:10px;color:#aaa;font-size:8px}.card>video{width:100%;background:#000}.diagItem{background:#19191c;border:1px solid #28282c;padding:8px;margin:5px 0;border-radius:5px}.diagItem span{display:block;color:#666;font-size:8px}.diagItem b{font-size:10px}
@media(min-width:900px){.vsf{padding:18px}.vsf header,.vsf main{max-width:760px;margin:auto}.vsf header{border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0}.vsf main{border:1px solid var(--line);border-radius:0 0 12px 12px;overflow:hidden}}