/* Device geometry comes directly from the Mac simulator's skin.json. */
:root{background:#151517;color:#dedbd7;--muted:#8c8a8c;--line:#373538}
body{min-height:100svh}.masthead{padding:20px 32px}.wordmark{color:#e9e6df}.wordmark span{color:#939092}.quiet:hover{color:#eee8e3}.icon-button{color:#9f9ba0}.icon-button:last-child{border-color:#484348}
main{padding:0 16px}.simulator{width:min(650px,100%,calc((100svh - 180px)*1145/1373));min-width:0}
.device{position:relative;width:100%;aspect-ratio:1145/1373;container-type:inline-size;visibility:hidden;isolation:isolate}
.device[data-loaded=true]{visibility:visible}
.device-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.device-rest{opacity:1}.device-pressed{opacity:0}.device[data-ptt=true] .device-rest,.device:has(.device-talk:active) .device-rest{opacity:0}.device[data-ptt=true] .device-pressed,.device:has(.device-talk:active) .device-pressed{opacity:1}
.device .stage{position:absolute;left:var(--screen-x);top:var(--screen-y);width:var(--screen-width);height:var(--screen-height);aspect-ratio:auto;border-radius:var(--screen-radius);background:#000;z-index:2;pointer-events:none;container-type:size;overflow:hidden}
.device .glass{position:relative;width:100%;height:100%;container-type:size;overflow:hidden}
.device .stage button,.device .stage a,.device .interaction,.device .orbit-canvas{pointer-events:auto}
.device-control{position:absolute;z-index:6;margin:0;padding:0;background:#ffffff13;border:1px solid #ffffff28;color:#d7d2d7;font-size:clamp(10px,2.1cqw,14px);line-height:1;display:grid;place-items:center;transition:background .1s,transform .1s;touch-action:manipulation}
.device-control:hover{background:#ffffff21}.device-control:active{background:#ffffff36;transform:translateX(-1px)}
.device-up{left:92.2%;top:32.7%;width:5%;height:4.6%;border-radius:999px 999px 0 0;border-bottom-color:#ffffff18}
.device-down{left:92.2%;top:37.3%;width:5%;height:4.6%;border-radius:0 0 999px 999px;border-top:0}
.device-select{left:92.2%;top:43.2%;width:5%;height:4.17%;border-radius:50%}
.device-talk,.device-talk:hover,.device-talk:active,.device-talk:disabled{left:4.2%;top:22%;width:7.2%;height:38%;background:transparent;border:0;border-radius:10px;transform:none;touch-action:none;cursor:grab;z-index:8;pointer-events:auto}
.device-talk:active{cursor:grabbing}.device-talk:focus-visible{outline:2px solid #ffb5da;outline-offset:4px}
.device-talk:before{content:'';position:absolute;inset:-10% -55% -10% -90%}
.device-up:before,.device-down:before,.device-select:before{content:'';position:absolute;inset:0 -12px 0 -3px}
.device .friend{position:absolute;left:29%;top:22%;width:41%;height:60%;display:grid;place-items:center;pointer-events:none}.device .friend img{height:100%;width:auto;object-fit:contain}
.device .caption,.device .stage:not(.has-scene) .caption{font-size:3.6cqw;bottom:10%;left:8%;right:8%;line-height:1.25;max-height:34%}
.device .listening,.device .stage-top,.device .stage-bottom{display:none}
.device .play-blocked{font-size:3.2cqw;padding:2cqw 2.8cqw}
.glass-dim{position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none}
.glass-boot,.glass-home,.glass-settings,.glass-camera{position:absolute;inset:0}
.glass-boot{z-index:7;background:#000;display:grid;place-items:center}
.glass-boot img{width:100%;height:100%;object-fit:contain}
.glass-home{z-index:1}
.glass-hud{position:absolute;z-index:4;top:6%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:0.5em;color:#fff;pointer-events:none;font-size:4.8cqw}
.glass-clock{font-family:Outfit,system-ui,sans-serif;font-weight:500;font-size:1em;font-variant-numeric:tabular-nums;letter-spacing:0.02em;line-height:1}
.glass-battery{display:flex;align-items:center;height:0.72em;gap:0.07em}
.glass-battery-body{box-sizing:border-box;width:1.42em;height:0.72em;border:0.09em solid #fff;border-radius:0.18em;padding:0.11em}
.glass-battery-body i{display:block;height:100%;width:var(--level,100%);background:#fff;border-radius:0.07em}
.glass-battery-nub{width:0.11em;height:0.3em;background:#fff;border-radius:0 0.08em 0.08em 0}
.glass-settings{z-index:6;display:flex;flex-direction:column;justify-content:center;gap:9%;padding:0 9%;background:#000;color:#fff}
.glass-setting{display:flex;align-items:center;gap:3.5%;min-height:12%;opacity:0.34}
.glass-setting.is-focus{opacity:1}
.glass-caret{width:1.5%;height:7.2cqh;border-radius:99px;background:transparent;flex-shrink:0}
.glass-setting.is-focus .glass-caret{background:#fff}
.glass-setting-body{flex:1;min-width:0}
.glass-setting-body p{margin:0 0 0.33em;font-size:5.4cqw;letter-spacing:0.08em;font-weight:500}
.glass-meter{display:flex;align-items:flex-end;gap:1.54cqh;height:4.8cqh}
.glass-meter i{flex:1;height:62%;border-radius:99px;background:#ffffff14}
.glass-meter i.is-on{height:100%;background:#fff}
.glass-setting:not(.is-focus) .glass-meter i{background:#ffffff14}
.glass-setting:not(.is-focus) .glass-meter i.is-on{background:#ffffff80}
.glass-ticks{width:2.8%;align-self:stretch;position:relative;visibility:hidden}
.glass-setting.is-adjust .glass-ticks{visibility:visible}
.glass-ticks:before,.glass-ticks:after{content:'';position:absolute;right:0;width:55%;height:1px;background:#fff}
.glass-ticks:before{top:18%}.glass-ticks:after{bottom:18%}
.glass-camera{--strip:22%;--finder-radius:6cqw;z-index:6;background:#000;overflow:hidden}
.camera-strip{position:absolute;left:0;right:0;bottom:0;z-index:1;height:var(--strip);display:flex;align-items:center;gap:3.2cqw;padding:0 4.5%;background:#000;color:#fff}
.camera-strip img{height:78%;width:auto;max-width:19%;object-fit:contain;flex-shrink:0;mix-blend-mode:screen}
.camera-line{margin:0;min-width:0;flex:1;font-size:4.7cqw;font-weight:500;line-height:1.2;letter-spacing:-0.02em;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.camera-finder{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:#0e0e0e;overflow:hidden;color:#ffffff66;font-size:2.9cqw;letter-spacing:0.14em;clip-path:inset(0 0 0 0 round 0);transition:clip-path 220ms cubic-bezier(0.23,1,0.32,1)}
.glass-camera.is-replying .camera-finder{clip-path:inset(0 0 var(--strip) 0 round var(--finder-radius))}
.camera-finder video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage[data-glass=camera] .caption{opacity:0}
.stage[data-glass=off] .glass-home,.stage[data-glass=off] .caption,.stage[data-glass=off] .scene,.stage[data-glass=boot] .caption{opacity:0}
.scene{transition:opacity .55s ease}
.stage:not(.has-scene) .scene{opacity:0}
.stage.scene-ending .scene{opacity:0}
.stage.has-scene .glass-home .friend,.stage.has-scene .glass-hud{opacity:0}
.stage.has-scene .scene{inset:0 0 20% 0}
.stage.has-scene .scene img,.stage.has-scene .scene video{object-fit:cover}
.stage.has-scene:after{content:'';position:absolute;left:0;right:0;bottom:0;height:20%;z-index:2;background:#04060d}
.stage.has-scene .caption{top:80%;bottom:0;left:7%;right:7%;max-height:none;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(13px,3.4cqw,19px);line-height:1.28}
#film{transition:opacity .22s ease}
#film.swap{opacity:0}
.power-bar{display:flex;justify-content:center;margin:16px 0 8px;position:relative;z-index:2}
.power-toggle{display:inline-flex;align-items:center;gap:10px;margin:0;padding:0;border:0;background:transparent;color:#c8c8c8;font:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.power-track{display:block;width:40px;height:22px;box-sizing:border-box;padding:2px;border:1px solid #fff;border-radius:999px}
.power-knob{display:block;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .16s ease}
.power-toggle.is-on .power-knob,.power-toggle[aria-checked=true] .power-knob{transform:translateX(18px)}
.power-toggle:focus-visible{outline:2px solid #fff;outline-offset:4px}
.below-screen{margin:-4% 10% 0;position:relative;min-height:22px;gap:12px}.below-screen p{font-size:12px}.notice{margin:8px 10% 0;color:#d4a1a9}.device-hints{display:flex;justify-content:center;gap:18px;margin:12px -15px 7px;font-size:11px;color:#88848a;white-space:nowrap}.device-hints kbd{color:#b6aeb7}.composer{max-width:320px}.composer input{color:#dfd8dd;font-size:13px;padding:10px 0}.composer input::placeholder{color:#787379}.composer button{color:#c2b6bf}.starters{margin-top:10px;gap:16px}.starters button{color:#a998a3;border-color:#574651;font-size:10px}footer{padding:18px 32px;color:#69656c;font-size:10px}footer .quiet{font-size:10px}.keyboard-hint{color:#7c777f}
@media(max-width:600px){.masthead{padding:19px 20px}.simulator{width:min(100%,520px)}main{padding:0 8px}.device-hints{font-size:10px;gap:12px;margin-left:0;margin-right:0}.below-screen{margin-top:-3%;margin-left:9%;margin-right:9%}.below-screen p{font-size:11px}.composer{max-width:280px}.starters{gap:10px}.starters button{font-size:9px}footer{padding:26px 20px}}
@media(prefers-reduced-motion:reduce){.device-control,.camera-finder{transition:none}}
@font-face{font-family:Michroma;src:url('/static/oddity-michroma.ttf') format('truetype');font-weight:400;font-display:swap}
.preview-gate{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:24px;background:#000;color:#fff}
.preview-form{display:flex;flex-direction:column;align-items:center;width:min(20rem,86vw);transform:translateY(-6vh)}
.preview-blink{width:min(15.5rem,72vw);margin:0;aspect-ratio:320/240}
.preview-blink img{display:block;width:100%;height:100%;object-fit:contain}
.preview-form h1{margin:-0.85rem 0 2.1rem;font-family:Michroma,ui-sans-serif,system-ui,sans-serif;font-size:0.8rem;font-weight:400;letter-spacing:0.14em;line-height:1.45;text-align:center;text-transform:uppercase;color:#fff;-webkit-text-stroke:0.16em currentColor;paint-order:stroke fill}
.preview-form input{width:100%;border:0;border-bottom:1px solid #555;background:transparent;color:#fff;padding:0.7rem 0;outline:0;font-size:0.8rem;letter-spacing:0.04em;border-radius:0}
.preview-form input::placeholder{color:#666;text-transform:uppercase;letter-spacing:0.12em}
.preview-form input:focus{border-bottom-color:#fff}
.preview-form button{margin-top:1.35rem;border:1px solid #fff;background:#000;color:#fff;padding:0.62rem 1.15rem;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;border-radius:0}
.preview-form button:hover,.preview-form button:focus-visible{background:#fff;color:#000;outline:0}
.preview-form .preview-error{min-height:0;margin:0.85rem 0 0;color:#888;font-size:0.68rem;letter-spacing:0.04em;text-align:center}
.preview-form .preview-error:empty{display:none;margin:0}
.embedded .masthead,.embedded footer,.embedded .below-screen,.embedded .device-hints,.embedded .composer,.embedded .starters,.embedded .notice{display:none}.embedded,.embedded body,.embedded main{background:#000}.embedded main{padding-top:12px}.embedded .simulator{width:min(650px,100%,calc((100svh - 92px)*1145/1373))}.embedded .power-bar{margin:10px 0 0}
html.embedded:not(.oddity-lab) .simulator{width:min(650px,100%,calc((100svh - 168px)*1145/1373))}
.moments{display:none;align-items:center;gap:12px;width:min(100%,22rem);margin:14px auto 0;color:#c8c2c6;touch-action:pan-y}
html.embedded:not(.oddity-lab) .moments:not([hidden]){display:flex}
.moments button{margin:0;padding:0;border:0;background:transparent;color:#d7d2d7;font:inherit}
#moment-prev,#moment-next{width:28px;height:28px;flex-shrink:0;font-size:22px;line-height:1;color:#9c959a}
#moment-prev:hover,#moment-next:hover,#moment-say:hover{color:#fff}
.moment-copy{min-width:0;flex:1;text-align:center}
#moment-line{margin:0 0 6px;font-size:12px;line-height:1.35;letter-spacing:.01em;color:#e6e0e4}
#moment-say{border-bottom:1px solid #5c555a;padding:0 0 1px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a898a0}
.moments.is-playing #moment-prev,.moments.is-playing #moment-next{opacity:.3;pointer-events:none}#moment-say.is-playing{border-bottom-color:transparent;color:#fff}
@media(max-width:600px){.embedded main{padding-top:6px}.embedded .simulator{width:min(100%,520px)}html.embedded:not(.oddity-lab) .simulator{width:min(100%,520px)}#moment-line{font-size:11px}}

/* The lab is the bare device: no site chrome, hints, or starter prompts. */
html.oddity-lab .masthead,
html.oddity-lab .device-hints,
html.oddity-lab .starters,
html.oddity-lab footer span{display:none}
html.oddity-lab footer{padding:10px 0}