:root{color-scheme:dark;font-family:Inter,ui-rounded,system-ui,sans-serif;background:#050918;color:#f5f8ff;--panel:#0c1428;--line:#263959;--muted:#aebbd4;--cyan:#49e6dd;--violet:#ad72ff;--yellow:#ffd54d}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:#050918;color:#f5f8ff}html[data-presentation-surface="preview"],html[data-presentation-surface="preview"] body{height:100%;overflow:hidden}body{min-height:100svh;display:grid;place-items:center;padding:max(.75rem,env(safe-area-inset-top)) max(.75rem,env(safe-area-inset-right)) max(.75rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left));background:radial-gradient(circle at 50% -10%,#17294f 0,#071022 46%,#050918 78%)}
.game-shell{position:relative;width:min(100%,68rem);min-height:min(46rem,calc(100svh - 1.5rem));padding:clamp(.9rem,2.2vw,1.5rem);border:1px solid #284064;border-radius:1.35rem;background:linear-gradient(150deg,rgba(16,27,52,.98),rgba(6,11,25,.99));box-shadow:0 1.3rem 4rem rgba(0,0,0,.42);overflow:hidden}
.shell-header,.stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.shell-header h1{margin:.12rem 0 0;font-size:clamp(1.8rem,4.8vw,3.1rem);letter-spacing:-.045em}.eyebrow{margin:0;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.14em;color:#7fe7ff}.shell-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}.round-chip,.score-chip{display:inline-flex;align-items:center;min-height:40px;padding:.45rem .8rem;border:1px solid #34517c;border-radius:999px;background:#0a1d36;color:#d9eeff;font-weight:800}.utility-button{min-width:44px;white-space:nowrap}.help-button{padding-inline:.8rem}
button,select,input{font:inherit}button,select{min-height:44px;border:1px solid #45658f;border-radius:.8rem;padding:.65rem .9rem;background:#102442;color:#f5f8ff}button{cursor:pointer;font-weight:750}button:hover{background:#18375e}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #8ee7ff;outline-offset:3px}.primary-action{border-color:#3c85c7;background:linear-gradient(135deg,#2d6ab4,#6352c9);font-weight:850}.primary-action:hover{background:linear-gradient(135deg,#377dcc,#735fe4)}
.intro-card{display:grid;grid-template-columns:minmax(12rem,24rem) minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:center;margin-top:1rem;padding:clamp(1rem,3vw,2rem);border:1px solid var(--line);border-radius:1.1rem;background:rgba(7,15,34,.82)}.intro-card h2{margin:.3rem 0 .8rem;font-size:clamp(1.55rem,4vw,2.6rem);line-height:1.05}.intro-card ol{margin:.5rem 0;padding-left:1.25rem;color:#d7e0ef;line-height:1.55}.comfort-note,.view-hint{color:var(--muted);line-height:1.45}.fusion-demo{position:relative;display:flex;justify-content:center;align-items:center;gap:4rem;height:13rem;border-radius:1rem;background:radial-gradient(circle,#182b54 0,#0b1429 65%)}.fusion-demo i,.fusion-dots span{display:block;width:.62rem;height:.62rem;border-radius:50%;background:#fff;box-shadow:0 0 1rem rgba(255,255,255,.55)}.fusion-demo i:nth-child(2){position:absolute;left:50%;transform:translateX(-50%);background:var(--cyan)}
.tutorial-presentation-mount{min-width:0}.cross-eyes-presentation{width:100%;padding:.75rem;border:1px solid #31527d;border-radius:1rem;background:linear-gradient(155deg,#0b1d39,#090f21);box-shadow:0 .8rem 2rem rgba(0,0,0,.28);transition:transform .16s ease}.cross-eyes-presentation-header{display:flex;justify-content:space-between;gap:.6rem;align-items:end;margin-bottom:.55rem}.cross-eyes-presentation-header strong{font-size:.9rem;text-align:right}.cross-eyes-presentation-picture{position:relative;overflow:hidden;border:1px solid #2d456d;border-radius:.75rem;background:#070d1d}.cross-eyes-presentation-image{display:block;width:100%;aspect-ratio:752/360;object-fit:contain}.cross-eyes-presentation-focus{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94);padding:.35rem .55rem;border:1px solid rgba(73,230,221,.8);border-radius:999px;background:rgba(5,9,24,.88);color:#d9fffb;font-size:.68rem;font-weight:850;opacity:0;transition:opacity .22s ease,transform .22s ease}.cross-eyes-presentation.is-middle .cross-eyes-presentation-focus{opacity:1;transform:translate(-50%,-50%) scale(1)}.cross-eyes-presentation-choices,.cross-eyes-presentation-order{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem;margin-top:.5rem}.cross-eyes-presentation-choice,.cross-eyes-presentation-order .depth-pill{min-width:0;padding:.32rem .28rem;border:1px solid #405d86;border-radius:.6rem;background:#0b1c34;text-align:center;font-size:.68rem;font-weight:800}.cross-eyes-presentation-choice.is-selected{border-color:#58e5ad;background:#12392f;color:#c6ffe4;box-shadow:0 0 0 2px rgba(88,229,173,.12)}.cross-eyes-presentation-order{display:none}.cross-eyes-presentation.is-revealed .cross-eyes-presentation-order{display:grid}.cross-eyes-presentation-caption{min-height:2.2em;margin:.55rem 0 0;color:#d8e3f5;font-size:.76rem;line-height:1.35;text-align:center}.cross-eyes-presentation[data-presentation-surface="preview"]{max-height:332px;padding:.55rem}.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-header{margin-bottom:.35rem}.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-picture{height:190px}.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-image{height:100%;aspect-ratio:auto;object-fit:contain}.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-choices,.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-order{margin-top:.35rem}.cross-eyes-presentation[data-presentation-surface="preview"].is-revealed .cross-eyes-presentation-choices{display:none}.cross-eyes-presentation[data-presentation-surface="preview"] .cross-eyes-presentation-caption{min-height:1.4em;margin-top:.35rem;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-panel{margin-top:.8rem}.stage-head h2{margin:.25rem 0 0;font-size:clamp(1.2rem,3vw,1.8rem)}.stereo-frame{margin:.75rem auto 0;width:min(100%,58rem);border:1px solid #263a62;border-radius:1rem;overflow:hidden;background:#070d1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}.stereo-frame img{display:block;width:100%;height:auto;aspect-ratio:752/360;object-fit:contain}.fusion-dots{display:flex;justify-content:center;gap:min(33vw,18rem);margin:.55rem 0 .2rem}.view-hint{margin:.15rem auto .75rem;max-width:54rem;text-align:center;font-size:.86rem}.answer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}.answer-button{position:relative;display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px;background:#111f3b}.answer-button::before{content:"";width:.85rem;height:.85rem;background:var(--shape-color,#7fe7ff)}.answer-button[data-shape="sphere"]::before{border-radius:50%}.answer-button[data-shape="diamond"]::before{transform:rotate(45deg)}.answer-button[data-shape="star"]::before{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%)}.answer-button[data-state="correct"]{border-color:#52e5a3;background:#12392f}.answer-button[data-state="wrong"]{border-color:#ff8e9a;background:#3b1724}.answer-button:disabled{cursor:default;opacity:.82}.secondary-actions{display:flex;justify-content:center;gap:.6rem;margin:.7rem 0}.result-panel{margin-top:.8rem;padding:1rem;border:1px solid #35547c;border-radius:1rem;background:linear-gradient(145deg,#0b1c36,#10152f)}.result-panel h3{margin:.25rem 0 .4rem;font-size:1.35rem}.result-panel p{margin:.25rem 0;color:#d8e3f5}.depth-order{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0}.depth-pill{padding:.4rem .65rem;border:1px solid #405d86;border-radius:999px;background:#0b1c34;font-size:.82rem}.depth-pill:first-child{border-color:#54e0ad;color:#b8ffe0}
.settings-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(10rem,15rem);gap:.75rem;align-items:center;margin-top:.85rem;padding:.85rem;border:1px solid #315078;border-radius:1rem;background:rgba(4,12,27,.92)}.toggle-row{display:contents}.toggle-row input{justify-self:end;width:1.35rem;height:1.35rem}.game-footer{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.75rem;color:#8497b5;font-size:.75rem}.game-tip{position:absolute;left:50%;bottom:1rem;z-index:5;display:flex;align-items:center;gap:.55rem;width:min(calc(100% - 2rem),34rem);padding:.75rem .9rem;border:1px solid #68d9ff;border-radius:999px;background:#08283a;color:#e8fbff;box-shadow:0 .8rem 2rem rgba(0,0,0,.35);opacity:0;transform:translate(-50%,.75rem);transition:opacity .2s ease,transform .2s ease;cursor:pointer}.game-tip.is-visible{opacity:1;transform:translate(-50%,0)}.game-tip.is-fading{opacity:0;transform:translate(-50%,.35rem)}
html[data-webgames-display-mode="fullscreen"] body{place-items:stretch;padding:max(.35rem,env(safe-area-inset-top)) max(.35rem,env(safe-area-inset-right)) max(.35rem,env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left))}html[data-webgames-display-mode="fullscreen"] .game-shell{width:100%;max-width:none;min-height:calc(100svh - .7rem);border-radius:.9rem}
html[data-motion-profile="instant"] *,html[data-motion-profile="instant"] *::before,html[data-motion-profile="instant"] *::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
@media(max-width:46rem){body{place-items:start center}.game-shell{min-height:calc(100svh - 1.5rem);padding:.8rem}.shell-header{display:grid;grid-template-columns:1fr;gap:.45rem}.shell-header h1{font-size:1.7rem;white-space:nowrap}.shell-actions{justify-content:flex-start;flex-wrap:nowrap;gap:.4rem}.round-chip{display:none}.utility-button{padding:.55rem .7rem}.intro-card{grid-template-columns:1fr;gap:.55rem;margin-top:.6rem;padding:.7rem}.tutorial-presentation-mount{max-width:34rem;margin-inline:auto;width:100%}.cross-eyes-presentation{padding:.5rem}.cross-eyes-presentation-header{margin-bottom:.35rem}.cross-eyes-presentation-choices,.cross-eyes-presentation-order{gap:.25rem;margin-top:.35rem}.cross-eyes-presentation.is-revealed .cross-eyes-presentation-choices{display:none}.cross-eyes-presentation-caption{min-height:1.35em;margin-top:.35rem;font-size:.7rem}.fusion-demo{height:7rem}.intro-card h2{margin:.2rem 0 .45rem;font-size:1.3rem}.intro-card ol{margin:.3rem 0;padding-left:1.1rem;font-size:.9rem;line-height:1.35}.comfort-note{margin:.4rem 0 .55rem;font-size:.9rem;line-height:1.35}.intro-card .primary-action{width:100%;padding:.55rem .7rem}.answer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fusion-dots{gap:40vw}.view-hint{font-size:.8rem}.game-footer{display:none}}
@media(max-width:46rem) and (max-height:650px){.intro-card ol{display:none}.intro-card h2{font-size:1.15rem}.comfort-note{margin:.3rem 0 .45rem}.cross-eyes-presentation-picture{max-height:125px}.cross-eyes-presentation-image{max-height:125px}.cross-eyes-presentation-header strong{font-size:.78rem}}
@media(max-width:25rem){.game-shell{padding:.7rem}.shell-header h1{font-size:1.55rem}.shell-actions{gap:.3rem}.utility-button{padding:.5rem .6rem}.help-button{padding-inline:.65rem}.secondary-actions{display:grid;grid-template-columns:1fr 1fr}.answer-grid{gap:.45rem}.answer-button{min-height:46px;padding:.55rem}.stereo-frame{margin-top:.5rem}.settings-panel{grid-template-columns:1fr}.toggle-row{display:flex;justify-content:space-between;align-items:center}.toggle-row input{justify-self:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
