*{box-sizing:border-box}html,body{color:#e6e9f2;background:#0b1028;width:100%;height:100%;margin:0;font-family:Georgia,Malgun Gothic,serif;overflow:hidden}canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#app{z-index:1;pointer-events:none;height:100svh;position:relative}.heading{position:absolute;top:7%;left:7%}.eyebrow{letter-spacing:.28em;color:#a1abc5;font:10px sans-serif}h1{letter-spacing:.12em;margin:19px 0 12px;font-size:clamp(23px,3vw,38px);font-weight:400}.heading p{letter-spacing:.16em;color:#adb6c9;font-size:13px}#status{color:#b5c2cf;font:12px sans-serif;position:absolute;top:6%;right:5%}nav{white-space:nowrap;gap:8px;display:flex;position:absolute;bottom:8%;left:50%;transform:translate(-50%)}button{pointer-events:auto;color:#d1d9e4;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#111c2b85;border:1px solid #acbad82e;border-radius:30px;padding:10px 16px;font:12px Malgun Gothic,sans-serif}button:hover,button:focus-visible{background:#324152;outline:1px solid #b5c5dd}footer{text-align:center;color:#a9b5c6;letter-spacing:.08em;width:100%;font:11px sans-serif;position:absolute;bottom:3%}footer span{padding:0 12px}#motion{padding:7px 10px;font-size:10px;position:absolute;bottom:4%;right:3%}body[data-capture] #app{display:none}@media (width<=650px){.heading{top:5%;left:6%}.eyebrow{font-size:8px}#status{font-size:10px;top:20%;left:6%}nav{gap:4px;bottom:13%}button{padding:10px;font-size:11px}footer{font-size:9px;bottom:9%}#motion{bottom:2%}}.camera-controls{gap:5px;display:flex;position:absolute;bottom:4%;left:3%}.camera-controls button{padding:7px 10px;font-size:10px}button[aria-pressed=true]{background:#324152;border-color:#acbad880}@media (width<=650px){.camera-controls{bottom:2%}footer{letter-spacing:0;padding:0 12px;line-height:1.7}footer span{padding:0 4px}}#audio-controls{flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute;bottom:calc(4% + 38px);left:3%}.audio-row{pointer-events:auto;align-items:center;gap:7px;display:flex}.audio-row button{padding:6px 9px;font-size:10px}.audio-row input[type=range]{accent-color:#f4a76a;cursor:pointer;background:0 0;width:76px;height:16px;margin:0;padding:0}.credit{color:#78869c;letter-spacing:.05em;margin-top:5px;font-size:9px}@media (width<=650px){#audio-controls{gap:5px;bottom:19%;left:6px}.audio-row button{padding:6px 8px;font-size:10px}.audio-row input[type=range]{width:58px}}.channel-controls{color:#b5c2cf;align-items:center;gap:8px;font:12px Malgun Gothic,sans-serif;display:flex;position:absolute;top:calc(6% + 40px);right:5%}.channel-controls select{pointer-events:auto;color:#d1d9e4;max-width:130px;font:inherit;cursor:pointer;background:#111c2b;border:1px solid #acbad82e;border-radius:16px;padding:7px 10px}.channel-controls select:focus-visible{outline-offset:2px;outline:1px solid #b5c5dd}@media (width<=650px){.channel-controls{font-size:10px;top:calc(20% + 36px);left:6%;right:auto}}#ui-toggle{padding:7px 10px;font-size:10px;position:absolute;bottom:calc(4% + 38px);right:3%}#app[data-ui-hidden=true]>:not(#ui-toggle){visibility:hidden;pointer-events:none}#app[data-ui-hidden=true] #ui-toggle{opacity:.25;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border-color:#0000}#app[data-ui-hidden=true] #ui-toggle:hover,#app[data-ui-hidden=true] #ui-toggle:focus-visible{opacity:1}@media (width<=650px){#ui-toggle{bottom:calc(2% + 38px)}}
