/* Native selects keep keyboard support; the decorative chevron has its own space. */
.controls label{position:relative;display:flex;align-items:center}
.controls label::after{content:"";position:absolute;inset-inline-end:16px;top:calc(50% - 4px);width:6px;height:6px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:rotate(45deg);pointer-events:none}
[dir=rtl] .controls label::after{transform:rotate(45deg)}
.controls select{appearance:none;-webkit-appearance:none;max-width:none;padding:10px 36px 10px 14px;padding-inline:14px 36px;min-height:44px;transition:border-color .2s,box-shadow .2s,background-color .2s}
#language{width:148px}#theme{width:140px}
.controls select:hover{border-color:var(--blue)}
.controls select:focus-visible{outline-offset:2px;box-shadow:0 0 0 4px var(--soft)}
.button,.text-link,.closing-links a,.product,.mock-window,.principle-symbol,.nav nav a{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,color .2s ease,background-color .2s ease}
.text-link>span:last-child,.closing-links a>span,.button>span:last-child{display:inline-block;transition:transform .25s ease}
.live-dot{animation:signal-pulse 3s ease-in-out infinite}
.hero-art .core{animation:core-drift 8s ease-in-out infinite}
.hero-art .orbit-one{animation:orbit-drift 36s linear infinite}
.hero-art .orbit-two{animation:orbit-drift 48s linear reverse infinite}
.hero-art .label-one{animation:label-drift 6s ease-in-out -1s infinite}
.hero-art .label-two{animation:label-drift 7s ease-in-out -3s infinite}
.hero-art .spark{animation:spark-turn 18s linear infinite}
.motion-paused .hero-art *{animation-play-state:paused!important}
@keyframes signal-pulse{50%{box-shadow:0 0 0 8px #00b9b408}}
@keyframes core-drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:5px -12px;rotate:4deg}}
@keyframes orbit-drift{to{rotate:360deg}}
@keyframes label-drift{50%{translate:0 -10px}}
@keyframes spark-turn{to{rotate:360deg}}
@keyframes hero-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference){
  .hero-copy>.eyebrow{animation:hero-enter .7s both}
  .hero-copy>h1{animation:hero-enter .8s .08s both}
  .hero-copy>.lead{animation:hero-enter .8s .16s both}
  .hero-copy>.button{animation:hero-enter .8s .24s both}
  .hero-copy>.hero-note{animation:hero-enter .8s .32s both}
  .hero-art{animation:hero-enter 1s .15s both}
  .reveal-pending{opacity:0;translate:0 24px}
  .reveal-visible{animation:hero-enter .75s cubic-bezier(.2,.65,.3,1) both}
}
@media(hover:hover) and (pointer:fine){
  .product:hover{transform:translateY(-4px);border-color:var(--blue);box-shadow:0 16px 35px #17394d0b}
  .product:hover .mock-window{transform:perspective(1000px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}
  .principles article:hover .principle-symbol{display:inline-block;transform:translateY(-4px) rotate(12deg)}
  .text-link:hover>span:last-child,.closing-links a:hover>span,.button:hover>span:last-child{transform:translate(3px,-3px)}
}
@media(max-width:900px){.nav nav{display:none}}
@media(max-width:720px){
  #language{width:148px}#theme{width:124px}
  .controls select{font-size:11px;padding-inline:12px 32px}
  .controls label::after{inset-inline-end:14px}
  .hero-art .orbit-one{animation-duration:54s}.hero-art .orbit-two{animation-duration:64s}
}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;translate:none}.motion-paused .hero-art *{animation:none!important}}