/* Lambda gateway previews: the shared split screen (both worlds, the seam, the brand mark, sound, preview switcher) */
:root{--s:.5;--night:#081133;--ink:#26306e;--glow:#86e8ff}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--night);-webkit-tap-highlight-color:transparent}
body{font:16px/1.5 'DM Sans',system-ui,sans-serif;color:#fff;overscroll-behavior:none}
button{font:inherit;color:inherit}
.gate{position:fixed;inset:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}

/* the two halves: the lab owns the first --s of the screen, the kindergarten the rest */
.half{position:absolute;top:0;bottom:0;overflow:hidden;container:half/inline-size}
.half.lab{left:0;width:calc(var(--s)*100%)}
.half.kids{left:calc(var(--s)*100%);right:0}
.gate.v .half.lab{right:0;bottom:auto;width:auto;height:calc(var(--s)*100%)}
.gate.v .half.kids{left:0;top:calc(var(--s)*100%);width:auto}

/* each world is a fixed-size stage centred on its half, so opening a half reveals more of it instead of stretching it */
.stage{position:absolute;left:50%;width:var(--stw,1440px);height:var(--sth,900px);transform:translateX(-50%);transform-origin:50% 50%;will-change:transform}
.half.lab .stage{top:50%;transform:translate(-50%,-50%)}
.half.kids .stage{bottom:0}
.lyr{position:absolute;inset:0;will-change:transform;pointer-events:none}
.lyr svg,.lyr canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lyr .hit,.lyr [data-act]{pointer-events:auto;cursor:pointer}

/* brand mark rides the seam: its left half belongs to the night, its right half to the morning */
.brandmark{position:absolute;z-index:6;top:clamp(10px,2.2vh,22px);left:calc(var(--s)*100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.brandmark .disc{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.95),rgba(255,255,255,.72));box-shadow:0 10px 30px rgba(4,10,40,.35),inset 0 1px 0 #fff;backdrop-filter:blur(8px)}
.brandmark img{width:28px;height:auto;display:block}
.brandmark .word{position:relative;font:800 13px/1 'Unbounded',sans-serif;letter-spacing:.32em;padding-left:.32em;white-space:nowrap}
.brandmark .word span{display:block}
.brandmark .word .w-night{color:#fff;clip-path:inset(0 50% 0 0);text-shadow:0 0 12px rgba(134,232,255,.8)}
.brandmark .word .w-day{position:absolute;inset:0;color:var(--ink);clip-path:inset(0 0 0 50%)}
.gate.v .brandmark{top:auto;left:50%;top:calc(var(--s)*100%);transform:translate(-50%,-50%);flex-direction:row}
.gate.v .brandmark .disc{width:40px;height:40px}
.gate.v .brandmark img{width:19px}
.gate.v .brandmark .word{display:none}

/* sound button */
.sound{position:absolute;z-index:7;top:clamp(10px,2.2vh,22px);right:clamp(10px,2vw,22px);width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.78);color:var(--ink);box-shadow:0 6px 18px rgba(10,20,60,.22);backdrop-filter:blur(8px)}
.sound svg{width:22px;height:22px}
.sound .on{display:none}.sound[aria-pressed="true"] .on{display:block}.sound[aria-pressed="true"] .off{display:none}
.sound:focus-visible,.gate button:focus-visible,.gate a:focus-visible{outline:3px solid #ffd34d;outline-offset:3px}

/* preview switcher (only while choosing a design) */
.pv{position:absolute;z-index:8;left:50%;bottom:10px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(8,14,40,.62);backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(0,0,0,.25);font:500 12px/1 'DM Sans',sans-serif}
.pv b{font-weight:500;color:rgba(255,255,255,.7);padding:0 8px 0 10px}
.pv a{color:#fff;text-decoration:none;padding:7px 11px;border-radius:999px;white-space:nowrap}
.pv a[aria-current="page"]{background:#fff;color:#0b1540;font-weight:700}
.gate.v .pv{bottom:6px}
.gate.entering .pv,.gate.entering .sound,.gate.entering .brandmark{opacity:0;transition:opacity .3s}

/* the white-out at the end of the fly-in */
.flash{position:absolute;inset:0;z-index:9;pointer-events:none;opacity:0;background:var(--flash,#fff)}

/* visually hidden live text for screen readers */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){.stage,.lyr{will-change:auto}}