/* The sensor option lives with the motion hint, and stays available in the menu. */
[data-tilt-toggle][hidden],[data-tilt-center][hidden]{display:none!important}
.tilt-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:4px 12px;border:1px solid #9fc5df55;border-radius:30px;font-size:11px;letter-spacing:0;color:inherit;pointer-events:auto;cursor:pointer}
.tilt-toggle svg{width:16px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.tilt-toggle[aria-pressed=true]{border-color:#a9ddf3;background:#9cd2ec12}
.tilt-toggle:disabled{opacity:.55;cursor:default}
.tilt-toggle:focus-visible,[data-tilt-center]:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hero-tilt{display:none;margin-top:6px}
.tilt-capable .hero-tilt{display:block}
.tilt-status{position:fixed;z-index:60;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:min(88vw,430px);padding:12px 18px;border:1px solid #9eb7c54d;border-radius:12px;background:#101e2cf5;color:#e4f1f7;font-size:12px;line-height:1.7;box-shadow:0 8px 40px #0003;pointer-events:none}
.tilt-status:empty{display:none}
.mobile-nav .tilt-menu{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.mobile-nav .tilt-menu .tilt-toggle{font-size:13px;padding:6px 14px;border:1px solid #9fc5df55;letter-spacing:0}
.tilt-menu [data-tilt-center]{min-height:44px;padding:8px;font-size:12px;color:#bfd8e8}
.tilt-capable .phone-stage{margin-bottom:22px}
.demo-footer .tilt-toggle{font-size:10px;letter-spacing:0;min-height:44px}
.tilt-active .light-interactive:before{opacity:1}
.tilt-active .app-project{transition:transform .18s ease-out,border-color .4s,box-shadow .7s}
.tilt-active .app-project .app-icon{transform:rotateY(calc(-13deg + var(--tilt-x,0)*13deg)) rotateX(calc(12deg - var(--tilt-y,0)*8deg)) rotateZ(calc(-8deg + var(--tilt-x,0)*3deg));transition:transform .18s ease-out}
.tilt-active .phone-orbit{transition:transform .24s ease-out}
@media(max-width:700px){
  .intro{top:clamp(100px,14svh,140px);right:7%}
  .intro h1{font-size:clamp(52px,13vw,88px)}
  .stage>.bottom{bottom:max(20px,env(safe-area-inset-bottom));align-items:flex-end}
  .tilt-capable .stage>.bottom{align-items:center}
  .tilt-capable .scroll-cue small{display:none}
  .tilt-capable .hero-tilt .tilt-toggle{min-height:44px;padding:3px 10px;font-size:10px}
  .tilt-capable .scroll-cue{gap:10px}
}
@media(max-width:700px) and (max-height:640px){
  .intro{top:90px}
  .intro h1{font-size:clamp(44px,11vw,64px);margin:13px 0}
  .intro .text-link{margin-top:6px;padding-bottom:9px}
  .hero-description{font-size:10px;line-height:1.7}
  .stage>.bottom{bottom:12px}
}
@media(prefers-reduced-motion:reduce){.tilt-active .light-interactive:before{display:none}}
#mobile-nav{overflow-y:auto;overscroll-behavior:contain}
#mobile-nav .tilt-menu{flex-shrink:0}
@media(max-height:700px){
  #mobile-nav{padding-top:92px;padding-bottom:20px}
  #mobile-nav>a,#mobile-nav>button{font-size:34px;padding-top:12px;padding-bottom:12px}
}

/* An opaque matching surface avoids re-blurring the moving page on phones. */
@media(max-width:700px){.continuity-ready .site-header.scrolled{background:var(--nav-solid,#0a1018);backdrop-filter:none;-webkit-backdrop-filter:none}}