:root{color-scheme:dark;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f2f4f5;background:#111315;font-synthesis:none;--teal:#53e0cb;--red:#ff626c;--muted:#b0bbc2}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 22% 26%,#29413e70,transparent 55%),linear-gradient(150deg,#111315,#1b2126)}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;background:#1b2126e8;border:1px solid #728087;border-radius:6px;padding:12px 16px;min-height:44px;font-size:12px}button:focus-visible,a:focus-visible{outline:3px solid var(--teal);outline-offset:4px}a{color:inherit;text-decoration:none}
#camera-video,.camera-shade{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#camera-video{object-fit:cover;opacity:0;background:#111315}.camera-shade{background:#0003;opacity:0}.camera-on #camera-video,.camera-on .camera-shade{opacity:1}
.camera-header,.camera-main,.camera-controls{position:relative;z-index:1}.camera-header{display:flex;align-items:center;gap:20px;padding:20px max(24px,env(safe-area-inset-right)) 20px max(24px,env(safe-area-inset-left));border-bottom:1px solid #ff626c35;background:#111315d9}
.camera-back{font-size:23px;font-weight:650;letter-spacing:-1px}.camera-back span{color:var(--red)}.camera-header>span{flex:1;font:9px ui-monospace,monospace;letter-spacing:1px;color:#b0bbc2}.camera-header>span i{font-style:normal;color:var(--teal);padding:0 5px}.camera-header button{font-size:11px}
.camera-main{flex:1;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:38px 24px 26px}.camera-intro{text-align:center;margin-bottom:30px}.camera-intro>span{font:8px ui-monospace,monospace;letter-spacing:1.2px;color:var(--muted)}h1{font-size:43px;line-height:1.1;font-weight:550;letter-spacing:-1.8px;margin:16px 0}h1 br{display:none}.camera-intro p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}
.glasses-frame{width:min(576px,100%);margin:0}.glasses-frame img{display:block;width:100%;height:auto;aspect-ratio:2/1}.glasses-frame figcaption{text-align:center;margin-top:12px;color:var(--muted);font-size:11px}.camera-off-label{margin-top:20px;font:8px ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}
.camera-controls{padding:18px max(24px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#111315ef;border-top:1px solid #ff626c35;text-align:center}.camera-controls>p{max-width:700px;margin:0 auto 14px;font-size:12px;line-height:1.7;color:var(--muted)}.camera-actions,.camera-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.camera-actions .primary{background:#e9eff2;color:#14191c;border-color:#e9eff2;font-weight:550}.camera-on .camera-actions .primary{color:#ffb9be;border-color:var(--red);background:#39252b}.camera-tabs{margin-top:12px;gap:6px}.camera-tabs button{border-color:#343e45;font-size:11px;padding:9px 15px}.camera-tabs button[aria-pressed=true]{border-color:var(--teal);color:var(--teal);background:#283d3c}.camera-controls>p.camera-note{font-size:10px;margin:16px auto 5px;max-width:600px}.camera-privacy{display:inline-block;font-size:10px;color:#b0bbc2;padding:9px;text-decoration:underline;text-underline-offset:3px}.camera-controls>p.fullscreen-help{font-size:11px;color:#e6eeee;margin-top:14px;padding:14px;border:1px solid #728087;border-radius:6px}.camera-on .camera-intro{display:none}.camera-on .camera-main{min-height:300px}.camera-on .camera-header{background:#111315a8}
[hidden]{display:none!important}
@media(max-width:600px){.camera-header{padding:14px 16px;gap:12px}.camera-back{font-size:20px}.camera-header>span{font-size:7px;line-height:1.8}.camera-header>span i{display:none}.camera-header button{font-size:10px;padding:10px}.camera-main{padding:30px 16px 24px}.camera-intro{margin-bottom:24px}.camera-intro>span{font-size:7px;letter-spacing:.7px}h1{font-size:36px;letter-spacing:-1.5px}h1 br{display:block}.camera-intro p{font-size:11px}.camera-controls{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}.camera-controls>p{font-size:11px}.camera-actions{gap:7px}.camera-actions button{font-size:11px;padding:11px 12px}.camera-tabs button{flex:1;max-width:130px}.camera-off-label{font-size:7px;letter-spacing:.5px}}
@media(orientation:landscape) and (max-height:600px){body{min-height:100svh}.camera-header{padding:8px 18px}.camera-header button{min-height:36px;padding:7px 12px}.camera-intro{display:none}.camera-main{min-height:180px;padding:14px 20px}.camera-off-label{margin-top:8px}.camera-controls{padding:9px 20px calc(8px + env(safe-area-inset-bottom))}.camera-controls>p{margin-bottom:8px;font-size:10px}.camera-actions,.camera-tabs{display:inline-flex;vertical-align:top;margin:0 5px;gap:6px}.camera-actions button,.camera-tabs button{padding:9px 12px;min-height:40px;font-size:10px}.camera-controls>p.camera-note,.camera-privacy{display:none}.camera-on .camera-main{min-height:180px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

@media(orientation:landscape) and (max-height:600px){.camera-main{padding:8px 20px;min-height:0}.camera-on .camera-main{min-height:0}.glasses-frame{width:min(576px,70vw,calc((100svh - 190px)*2))}.glasses-frame figcaption{margin-top:5px;font-size:9px}}

/* Camera placement uses the video viewport, independent of all page chrome. */
.viewport-overlay{height:100dvh;overflow:hidden}
.viewport-overlay .camera-header{position:fixed;inset:0 0 auto;z-index:3;padding-block:10px}
.viewport-overlay .camera-main{position:fixed;inset:0;padding:0;min-height:0;pointer-events:none;z-index:1}
.viewport-overlay .camera-intro{display:none}
.viewport-overlay #frame-plane{position:fixed;left:var(--overlay-x);top:var(--overlay-y);width:var(--overlay-width);aspect-ratio:2/1;transform:translate(-50%,-50%)}
.viewport-overlay .glasses-frame{width:auto}
.viewport-overlay .glasses-frame figcaption{position:fixed;top:calc(env(safe-area-inset-top) + 65px);left:0;width:100%;margin:0;font-size:10px}
.viewport-overlay .camera-off-label{position:fixed;top:calc(env(safe-area-inset-top) + 88px);left:0;width:100%;text-align:center;margin:0}
.viewport-overlay .camera-controls{position:fixed;bottom:0;left:0;width:100%;z-index:3;max-height:55dvh;overflow:auto;padding-block:10px;background:#111315e8}
.viewport-overlay .camera-controls>p.camera-note,.viewport-overlay .camera-privacy{display:none}
.viewport-overlay .camera-actions,.viewport-overlay .camera-tabs{display:flex;margin:0;gap:6px}
.viewport-overlay .camera-tabs{margin-top:7px}
.viewport-overlay .camera-actions button,.viewport-overlay .camera-tabs button{font-size:11px;min-height:40px;padding:9px 11px}
.position-panel{max-width:620px;margin:12px auto;padding:12px;border:1px solid #728087;border-radius:6px;background:#172023}
.position-panel p{font-size:11px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.position-panel p:last-child{font-size:10px;margin:8px 0 0}
.position-sliders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.position-sliders label{font-size:11px;line-height:1.5}
.position-sliders output{display:block;color:var(--teal);font-size:10px}
.position-sliders input{width:100%;min-height:36px;margin:0;accent-color:var(--teal);cursor:pointer}
.position-sliders input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
#position-reset{font-size:10px;padding:8px;min-height:36px;margin-top:5px}
@media(orientation:landscape) and (max-height:600px){.viewport-overlay .camera-header{padding-block:6px}.viewport-overlay .glasses-frame figcaption{top:54px}.viewport-overlay .camera-off-label{top:70px}.viewport-overlay .camera-controls{max-height:60dvh;padding-block:7px}.viewport-overlay .camera-actions,.viewport-overlay .camera-tabs{display:inline-flex;margin:0 4px;vertical-align:top}.viewport-overlay .camera-controls>p{margin-bottom:5px}.position-panel{margin:6px auto;padding:8px}.position-panel p:last-child{display:none}.position-sliders input{min-height:28px}.position-panel p{margin-bottom:4px}#position-reset{margin-top:0;min-height:30px}}

#restore-controls{display:none;position:fixed;right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 12px);z-index:4;font-size:11px;background:#111315ba}
.controls-hidden .camera-header,.controls-hidden .camera-controls,.controls-hidden .glasses-frame figcaption,.controls-hidden .camera-off-label{display:none}
.controls-hidden #restore-controls{display:block}
.viewport-overlay .camera-header{gap:10px}
.viewport-overlay .camera-header button{padding-inline:10px}
/* Keep the matching controls compact so they leave the frame in sight. */
.positioning .camera-controls{display:flex;flex-direction:column;align-items:center;gap:7px;max-height:40dvh}
.positioning .camera-controls>#camera-status,.positioning .camera-tabs{display:none}
.positioning .camera-actions{order:2}
.positioning .camera-actions>button:not(#position-toggle){display:none}
.positioning .position-panel{order:1;margin:0;width:100%}
@media(orientation:landscape) and (max-height:600px){
 .positioning .camera-controls{flex-direction:row;align-items:center;gap:10px;max-height:40dvh}
 .positioning .camera-actions{flex-shrink:0;margin:0}
 .positioning .position-panel{position:relative;flex:1;min-width:0;padding:8px;margin:0}
 .positioning #position-status{padding-right:120px;min-height:24px;font-size:10px}
 .positioning #position-reset{position:absolute;right:8px;top:5px;min-height:24px;padding:4px 8px}
 .positioning .position-sliders label{font-size:10px}
 .positioning .position-sliders output{display:inline;margin-left:8px}
}
@media(orientation:landscape) and (max-height:600px){.positioning .position-panel{padding:6px}.positioning #position-status{margin-bottom:0}.positioning .position-sliders input{min-height:24px}}