:root{--night: #02040a;--air: #030813;--navy: #050a1a;--cyan: #14b8ff;--cyan-hot: #a1e3ff;--rim: #336bf2;--amber: #ff8c1f;--text: #e8f3ff;--text-dim: #9db3cf;--glass: rgba(5, 10, 26, .62);--glass-strong: rgba(5, 10, 26, .82);--glass-edge: rgba(161, 227, 255, .28);--glow: 0 0 24px rgba(20, 184, 255, .35);--gutter: max(16px, env(safe-area-inset-left));--font: "Segoe UI", Selawik, system-ui, -apple-system, "Helvetica Neue", Roboto, sans-serif;--header-h: 64px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}a{color:var(--cyan-hot)}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.field{position:fixed;inset:0;z-index:0}.field-canvas{display:block;width:100%;height:100%;outline:none}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.site-header>*{pointer-events:auto}.wordmark{font-size:1.05rem;font-weight:300;letter-spacing:.42em;color:var(--text);text-decoration:none;text-shadow:0 0 18px rgba(20,184,255,.45)}.header-actions{display:flex;align-items:center;gap:10px}.progress-chip{padding:6px 12px;font-size:.8rem;letter-spacing:.08em;color:var(--text-dim);background:var(--glass);border:1px solid var(--glass-edge);border-radius:999px;font-variant-numeric:tabular-nums}.progress-chip[hidden]{display:none}.button,.icon-button{font:inherit;color:var(--text);background:var(--glass);border:1px solid var(--glass-edge);border-radius:12px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}.button{padding:.8rem 1.4rem;font-size:1rem;letter-spacing:.06em}.button-small{padding:.5rem 1rem;font-size:.9rem}.button-primary{color:#02101c;font-weight:600;background:linear-gradient(180deg,var(--cyan-hot),var(--cyan));border-color:transparent;box-shadow:var(--glow)}.button-quiet{background:transparent;border-color:transparent;color:var(--text-dim);padding-left:.6rem;padding-right:.6rem}.button:hover,.icon-button:hover{border-color:#a1e3ff99;box-shadow:var(--glow)}.button-primary:hover{box-shadow:0 0 34px #14b8ff99}.button-quiet:hover{color:var(--text);box-shadow:none;border-color:transparent}.button:active,.icon-button:active{transform:translateY(1px)}.button:focus-visible,.icon-button:focus-visible,.pad-button:focus-visible,.wordmark:focus-visible{outline:2px solid var(--cyan-hot);outline-offset:3px}.icon-button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%}.sound-toggle .icon-sound-off,.sound-toggle.muted .icon-sound-on{display:none}.sound-toggle.muted .icon-sound-off{display:block}.overlays{position:fixed;inset:0;z-index:10;pointer-events:none}.overlays>*{pointer-events:auto}.overlays-hidden .overlays,.overlays-hidden .touch-pad{opacity:0;pointer-events:none}.overlays,.touch-pad{transition:opacity .4s ease}.hero{position:absolute;left:calc(var(--gutter) + 2vw);top:50%;transform:translateY(-50%);width:min(30rem,42vw);transition:opacity .6s ease,transform .6s ease}.hero.gone{opacity:0;transform:translateY(calc(-50% + 12px));pointer-events:none}.hero-title{margin:0 0 1.2rem;font-size:clamp(3rem,7vw,5.6rem);font-weight:300;letter-spacing:.32em;line-height:1;text-shadow:0 0 40px rgba(20,184,255,.55),0 0 2px rgba(161,227,255,.8)}.hero-line{margin:0 0 2rem;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.6;color:var(--text-dim);max-width:26rem}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}.hero-hint{margin:1.4rem 0 0;font-size:.85rem;color:#9db3cfbf;letter-spacing:.03em}.hint-touch{display:none}.area-panel{position:absolute;left:calc(var(--gutter) + 1vw);bottom:calc(56px + env(safe-area-inset-bottom));width:min(26rem,calc(100vw - 2 * var(--gutter)));padding:1.1rem 1.3rem;background:var(--glass);border:1px solid var(--glass-edge);border-left:2px solid var(--cyan);border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}.area-panel[hidden]{display:none}.area-panel.shown{opacity:1;transform:none}.area-lines p{margin:0;font-size:1.05rem;line-height:1.6}.area-lines p+p{margin-top:.6rem}.area-stills{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:.9rem}.area-stills:empty{display:none}.area-stills img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:8px;border:1px solid var(--glass-edge)}.touch-pad{position:fixed;z-index:15;right:max(18px,env(safe-area-inset-right));bottom:calc(52px + env(safe-area-inset-bottom));width:156px;height:156px}.touch-pad[hidden]{display:none}.pad-button{position:absolute;width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding:0;color:var(--text);background:var(--glass);border:1px solid var(--glass-edge);border-radius:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.pad-button:active{background:#14b8ff47;border-color:var(--cyan-hot)}.pad-up{left:52px;top:0}.pad-left{left:0;top:52px}.pad-right{right:0;top:52px}.pad-down{left:52px;bottom:0}.pad-undo{left:60px;top:60px;width:36px;height:36px;border-radius:50%;color:var(--text-dim)}.site-footer{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:0 var(--gutter) calc(14px + env(safe-area-inset-bottom));text-align:center;pointer-events:none}.site-footer p{display:inline-block;margin:0;font-size:.78rem;color:#9db3cfb3;pointer-events:auto}.site-footer a{color:inherit}.field-fallback{position:absolute;inset:calc(var(--header-h) + 1rem) var(--gutter) 3rem;overflow-y:auto;max-width:40rem;margin:0 auto}.field-fallback[hidden]{display:none}.field-fallback section{margin:0 0 1.6rem}.field-fallback p{font-size:1.1rem;line-height:1.6}.fallback-note{color:var(--text-dim)}.no-webgl .hero,.no-webgl .hero-actions .button-quiet,.no-webgl .hero-hint,.no-webgl #headerPlay{display:none}@media (pointer: coarse){.hint-keys{display:none}.hint-touch{display:inline}}@media (max-aspect-ratio: 1/1){.hero{left:var(--gutter);right:var(--gutter);top:auto;bottom:calc(64px + env(safe-area-inset-bottom));transform:none;width:auto;text-align:center}.hero.gone{transform:translateY(12px)}.hero-title{font-size:clamp(2.6rem,13vw,4rem);letter-spacing:.28em;margin-bottom:.8rem}.hero-line{margin:0 auto 1.4rem}.hero-actions{justify-content:center}.area-panel{left:var(--gutter);right:var(--gutter);width:auto;bottom:calc(220px + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion: reduce){.hero,.area-panel,.overlays,.touch-pad,.button,.icon-button{transition:none}}.demo-veil{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);overflow:hidden}.demo-veil[hidden],.demo-veil [hidden]{display:none}.demo-veil-rings span{position:absolute;left:var(--veil-x, 50%);top:var(--veil-y, 50%);width:40vmax;height:40vmax;margin:-20vmax 0 0 -20vmax;border:3px solid var(--cyan);border-radius:50%;box-shadow:0 0 25px #14b8ff99,inset 0 0 25px #14b8ff66;opacity:0;transform:scale(0);pointer-events:none}.demo-veil.rings-on .demo-veil-rings span{animation:veilRing .9s ease-out forwards}.demo-veil.rings-on .demo-veil-rings span:nth-child(2){animation-delay:.15s}.demo-veil.rings-on .demo-veil-rings span:nth-child(3){animation-delay:.3s}@keyframes veilRing{0%{opacity:.9;transform:scale(.05)}to{opacity:0;transform:scale(1.2)}}.demo-veil-status{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}.demo-progress{width:clamp(72px,14vw,96px);height:clamp(72px,14vw,96px);transform:rotate(-90deg);filter:drop-shadow(0 0 12px rgba(20,184,255,.5))}.demo-progress circle{fill:none;stroke-width:4}.demo-progress-track{stroke:#336bf24d}.demo-progress-fill{stroke:var(--cyan);stroke-linecap:round;transition:stroke-dashoffset .3s ease}.demo-veil-status.indeterminate .demo-progress{animation:spinRing 1.2s linear infinite}.demo-veil-status.indeterminate .demo-progress-fill{stroke-dashoffset:200!important}@keyframes spinRing{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}.demo-veil-text{font-size:clamp(1rem,2.5vw,1.2rem);color:var(--cyan-hot);letter-spacing:.1em;font-variant-numeric:tabular-nums}.demo-card{position:relative;max-width:min(520px,92vw);padding:clamp(1.5rem,4vw,3rem);background:var(--glass-strong);border:1px solid var(--glass-edge);border-radius:clamp(15px,3vw,25px);box-shadow:0 0 60px #14b8ff40;text-align:center;animation:cardIn .4s ease}@keyframes cardIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.demo-card-text{font-size:clamp(1rem,2.5vw,1.2rem);line-height:1.6;color:var(--text-dim);margin-bottom:clamp(1.25rem,3vh,2rem)}.demo-card-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.demo-card-button{min-width:8rem;padding:.85rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:600;letter-spacing:.05em;color:var(--cyan-hot);background:var(--glass);border:1px solid var(--glass-edge);border-radius:12px;cursor:pointer;transition:all .3s ease}.demo-card-button:hover,.demo-card-button:focus-visible{border-color:#a1e3ff99;box-shadow:var(--glow);outline:none}.demo-card-button.primary{color:#02101c;background:linear-gradient(180deg,var(--cyan-hot),var(--cyan));border-color:transparent;box-shadow:var(--glow)}.demo-close{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));width:45px;height:45px;border-radius:50%;background:var(--glass);border:1px solid var(--glass-edge);color:var(--cyan-hot);font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.demo-close:hover,.demo-close:focus-visible{border-color:#a1e3ff99;color:var(--cyan);transform:rotate(90deg);outline:none}.demo-frame{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;border:0;z-index:300;opacity:0;pointer-events:none;background:var(--air);transition:opacity .35s ease}.demo-frame.revealed{opacity:1;pointer-events:auto}.demo-safe-area-probe{position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media (prefers-reduced-motion: reduce){.demo-veil.rings-on .demo-veil-rings span,.demo-veil-status.indeterminate .demo-progress,.demo-card{animation:none}.demo-frame{transition:none}}
