:root{font-family:Tahoma,Arial,sans-serif;color:#f3f6fb;background:#0b111c}
*{box-sizing:border-box}body{margin:0}.shell{max-width:1440px;padding:24px;margin:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}
h1{font-size:clamp(26px,3vw,42px);margin:9px 0}h1 span{color:#71e5c2}.eyebrow{font-size:12px;color:#9eb3c6}
p{line-height:1.8}header p{margin:0;color:#b0bfd0;font-size:14px}.pill{background:#1d2937;border:1px solid #344b5c;padding:9px 14px;border-radius:30px;white-space:nowrap;font-size:12px}
main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,0.85fr);gap:18px}
.viewer,.panel{background:#121e2a;border:1px solid #283647;border-radius:18px;overflow:hidden}
.screen{height:min(76vh,760px);min-height:420px;display:flex;justify-content:center;align-items:center;position:relative;background:radial-gradient(circle at 50% 40%,#273d4d,#0a1018)}
#scene{width:100%;height:100%;object-fit:contain;position:relative;z-index:2}
.placeholder{position:absolute;text-align:center;max-width:80%;z-index:3;color:#dce9f6}.placeholder .big{font-size:72px;color:#71e5c2}.placeholder h2{margin:6px}.placeholder p{font-size:13px}
.screen-label{position:absolute;bottom:16px;right:14px;background:#0a1521c9;padding:7px 12px;border-radius:30px;z-index:4;font-size:11px;color:#d5e4e9}
.metrics{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding:11px 16px;font:12px monospace;color:#9dbbc5}
.panel{padding:20px}h2{margin-top:0;font-size:20px}h3{margin-top:0;font-size:15px}label:not(.check){font-size:13px;color:#b7c6d5}
select,button{font:inherit}select{width:100%;background:#1d2b3a;color:white;padding:12px;border:1px solid #395064;border-radius:10px;margin:9px 0 14px}
.buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}button{border:1px solid #3c5261;color:#e8f2f7;background:#253443;border-radius:10px;padding:12px 8px;cursor:pointer}
button:hover:enabled{filter:brightness(1.12)}button:disabled{opacity:.45;cursor:not-allowed}
button.primary,.costume.selected{background:#2c8b79;color:white;border-color:#45bc9c}.separator{border-top:1px solid #2b3b4b;margin:24px 0}
.costumes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.costume{font-size:13px;padding:12px 5px}
.check{display:flex;align-items:center;gap:9px;color:#bacbdb;margin-top:18px;font-size:13px}.check input{width:16px;height:16px;accent-color:#48c5ac}
.hint{background:#192a34;border-radius:10px;padding:8px 14px;font-size:13px}.hint p{margin:5px 0}
.privacy{color:#8ba9b8;font-size:12px;margin-top:22px}.error{color:#ff9b9b;font-size:12px;white-space:pre-wrap}
footer{margin-top:20px;font-size:12px;color:#8a9eae}
@media(max-width:820px){.shell{padding:12px}main{grid-template-columns:1fr}.screen{height:60vh;min-height:330px}header{align-items:start}.panel{padding:15px}header p{max-width:240px}}

.switch-camera{width:100%;margin-top:10px;font-size:13px}
@media (max-width:820px){.switch-camera{display:block}.viewer{min-width:0}.screen{height:56vh;min-height:310px}}