/* Motion is restricted to feedback and decoration; content geometry is unchanged. */
:root {--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.language-control {position:relative;display:grid;place-items:center;min-width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--glass-control);color:var(--text);flex-shrink:0;cursor:pointer}
.language-control>span {font-size:12px;font-weight:650;letter-spacing:-.04em}
.language-control select {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;color:var(--text);background:var(--surface)}
.language-control:focus-within {outline:2px solid var(--accent);outline-offset:3px}
.hero-art {position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;opacity:.8}
.hero-art svg {width:100%;height:100%;overflow:visible}
.nebula-cloud {position:absolute;inset:-20%;background:radial-gradient(ellipse at 75% 45%,#878bd044,transparent 26%),radial-gradient(ellipse at 60% 68%,#729fcb38,transparent 22%),radial-gradient(ellipse at 90% 25%,#b68cc631,transparent 28%);animation:wave-drift 22s var(--ease-in-out) infinite alternate}
.nebula-stars {position:absolute;inset:0;background:radial-gradient(circle,#93a7cb88 1px,transparent 2px);background-size:83px 61px;opacity:.32;animation:star-breathe 18s var(--ease-in-out) infinite alternate}
.ripple-group {transform-origin:1030px 180px;animation:ripple-drift 20s var(--ease-in-out) infinite alternate}
.mesh-group {animation:mesh-drift 24s var(--ease-in-out) infinite alternate}
.horizon-sky {position:absolute;inset:0;background:radial-gradient(ellipse at 76% 68%,#dca87e30,transparent 48%),linear-gradient(transparent 45%,#819ad523 72%,transparent 90%);animation:star-breathe 22s var(--ease-in-out) infinite alternate}
.horizon-sun {position:absolute;width:130px;height:130px;border-radius:50%;right:18%;top:24%;background:linear-gradient(#c5a7cf26,#ddbb982b);border:1px solid #bbaac22b;animation:wave-drift 24s var(--ease-in-out) infinite alternate}
.horizon-line {position:absolute;left:0;right:0;top:72%;height:1px;background:linear-gradient(90deg,transparent,#97a5c977,transparent)}
.constellation-group {animation:constellation-drift 24s var(--ease-in-out) infinite alternate}
.prism-group {animation:mesh-drift 24s var(--ease-in-out) infinite alternate}
@keyframes ripple-drift {from{transform:scale(.94);opacity:.7}to{transform:scale(1.06);opacity:1}}
@keyframes mesh-drift {from{transform:translateX(-12px)}to{transform:translateX(12px)}}
@keyframes constellation-drift {from{transform:translateY(-5px);opacity:.65}to{transform:translateY(5px);opacity:1}}
@keyframes star-breathe {from{opacity:.4}to{opacity:.8}}
.os-hero[data-hero-theme]:not([data-hero-theme="particles"]) #hero-particles {visibility:hidden}
.os-hero[data-hero-theme="particles"] .hero-art {visibility:hidden}
.hero-orb {position:absolute;width:66%;height:145%;left:-16%;top:-35%;border-radius:50%;background:radial-gradient(ellipse,rgba(56,117,255,.35),rgba(116,111,255,.15) 40%,transparent 70%);animation:aurora-drift 18s var(--ease-in-out) infinite alternate}
.hero-orb.second {left:55%;top:-60%;background:radial-gradient(ellipse,rgba(147,104,255,.26),rgba(52,207,192,.14) 42%,transparent 70%);animation-delay:-8s;animation-duration:22s}
.hero-art .orbit-group {transform-origin:700px 160px;animation:orbit-drift 24s linear infinite}
.hero-art .wave-group {animation:wave-drift 14s var(--ease-in-out) infinite alternate;transform-origin:center}
.os-hero[data-hero-theme="orbit"] .hero-art {opacity:.68}
.os-hero[data-hero-theme="waves"] .hero-art {opacity:.72}
.hero-art[data-paused="true"] * {animation-play-state:paused!important}
@keyframes aurora-drift {from{transform:translate(-4%,0) scale(.95)}to{transform:translate(15%,8%) scale(1.12)}}
@keyframes orbit-drift {to{transform:rotate(360deg)}}
@keyframes wave-drift {from{transform:translate(-1%,2%) scale(1)}to{transform:translate(2%,-3%) scale(1.04)}}
.theme-choices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.theme-choice {padding:10px;border:1px solid var(--line);border-radius:15px;background:var(--glass-inset);text-align:left;color:var(--text);min-width:0}
.theme-choice[aria-pressed="true"] {border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.theme-choice span {display:block;font-size:13px;font-weight:600;margin-top:8px}
.theme-sample {height:64px;border-radius:10px;position:relative;overflow:hidden;background:var(--bg)}
.theme-sample.particles {background:radial-gradient(circle at 18% 35%,#769aea 1px,transparent 3px),radial-gradient(circle at 80% 70%,#9173da 2px,transparent 4px),radial-gradient(circle at 60% 30%,#f0b773 1px,transparent 3px),var(--bg);background-size:27px 27px,49px 35px,35px 50px,auto}
.theme-sample.aurora {background:radial-gradient(ellipse at 20% 60%,#7193e9,transparent 70%),radial-gradient(ellipse at 85% 30%,#a497de,transparent 70%),var(--bg)}
.theme-sample.orbit::before,.theme-sample.orbit::after {content:"";position:absolute;width:120%;height:80%;left:-10%;top:10%;border:1px solid #8595c5;border-radius:50%;transform:rotate(24deg)}
.theme-sample.orbit::after {transform:rotate(-24deg)}
.theme-sample.waves {background:repeating-radial-gradient(ellipse at 5% 100%,transparent 0 8px,rgba(90,123,207,.35) 9px 10px,transparent 11px 20px),var(--bg)}
.theme-sample.nebula {background:radial-gradient(ellipse at 70% 35%,#a19bd180,transparent 45%),radial-gradient(ellipse at 35% 75%,#73a0cc80,transparent 50%),var(--bg)}
.theme-sample.ripple {background:repeating-radial-gradient(ellipse at 70% 60%,transparent 0 7px,#819ccb66 8px 9px,transparent 10px 15px),var(--bg)}
.theme-sample.mesh {background:repeating-linear-gradient(90deg,transparent 0 15px,#829acb44 16px 17px),repeating-linear-gradient(0deg,transparent 0 11px,#829acb44 12px 13px),var(--bg)}
.theme-sample.horizon {background:radial-gradient(circle at 70% 45%,#c6b2c166 0 13px,transparent 14px),linear-gradient(transparent 55%,#c8a99955 69%,#8c9fc766 71%,transparent 74%),var(--bg)}
.theme-sample.constellation {background:radial-gradient(circle at 20% 30%,#859ed9 2px,transparent 3px),radial-gradient(circle at 50% 65%,#859ed9 2px,transparent 3px),radial-gradient(circle at 80% 25%,#859ed9 2px,transparent 3px),linear-gradient(30deg,transparent 45%,#8ba2d544 46% 47%,transparent 48%),var(--bg)}
.theme-sample.prism {background:repeating-linear-gradient(123deg,transparent 0 22px,#8d9bc744 23px 43px,#b5a1d533 44px 65px,transparent 66px 75px),var(--bg)}
.motion-control {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;font-size:14px}
.motion-control input {accent-color:var(--accent);width:20px;height:20px}
button:not(.bottom-nav button):not(.liquid-indicator) {transition:transform 160ms var(--ease-out),background-color 160ms ease,border-color 160ms ease}
button:not(.bottom-nav button):active {transform:scale(.97)}
input,textarea,select {transition:border-color 160ms ease,box-shadow 160ms ease}
input:focus,textarea:focus,select:focus {box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
@media (hover:hover) and (pointer:fine) {.auto-card:hover,.theme-choice:hover {transform:translateY(-2px)}.brand:hover .brand-mark {transform:scale(1.04)}.brand-mark {transition:transform 160ms var(--ease-out)}}
@media (max-width:560px) {.language-control {height:36px;min-width:36px}.theme-choices {grid-template-columns:repeat(2,minmax(0,1fr))}.top-actions {gap:5px}}
@media (prefers-reduced-motion:reduce) {.hero-art * {animation:none!important}button:active {transform:none!important}.brand-mark,button,input,textarea,select {transition:none!important}}
html[data-motion="off"] .hero-art * {animation:none!important}
html[data-motion="off"] button {transition:none!important}
html[data-motion="off"] .side-drawer,html[data-motion="off"] .toast,html[data-motion="off"] .brand-mark {transition:none!important}
@media (hover:hover) and (pointer:fine) {html[data-motion="off"] .auto-card:hover,html[data-motion="off"] .theme-choice:hover,html[data-motion="off"] .brand:hover .brand-mark {transform:none}}