@view-transition { navigation: auto; }
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation:page-out 160ms var(--motion-ease) both}
::view-transition-new(root){animation:page-in 220ms var(--motion-ease) both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0}}
@keyframes motion-in{from{opacity:0;transform:translateY(10px)}}
html,body,.hero,.settings-card,.engines,.engines button,.quick-tabs>a,.quick-tabs>button,.avatar,.primary,.profile-action,.topbar,.segmented-item,.nav-card{transition:background-color 340ms var(--motion-ease),color 280ms var(--motion-ease),border-color 280ms var(--motion-ease),box-shadow 280ms var(--motion-ease),transform 200ms var(--motion-ease)}
body{transition:opacity 180ms var(--motion-ease),background-color 340ms var(--motion-ease)}
html[data-leaving] body{opacity:0;pointer-events:none}
button:active,.quick-tabs a:active,.nav-card:active{transform:scale(.975)}
.engines{position:relative;isolation:isolate}
.engines::before{content:"";position:absolute;z-index:-1;top:5px;bottom:5px;left:5px;width:calc(50% - 8px);border-radius:14px;background:var(--accent);transform:translateX(0);transition:transform 400ms var(--motion-ease),background-color 340ms var(--motion-ease);box-shadow:0 3px 8px #0000000c}
:root[data-engine=claude] .engines::before{transform:translateX(calc(100% + 6px))}
.engines button[aria-pressed=true]{background:transparent;box-shadow:none}
.claude-mark{display:block;width:100%;height:100%;object-fit:contain}
.engines .claude-mark{width:23px;height:23px;flex:none}
.engines button[data-engine=claude][aria-pressed=true] .claude-mark{filter:brightness(0) invert(1)}
:root[data-theme=dark] .engines button[data-engine=claude][aria-pressed=true] .claude-mark{filter:brightness(0)}
.hero .claude-art{width:78px;height:78px;right:20px;top:84px;transform:none;font-size:0}
.topbar-actions{display:flex;align-items:center;margin-bottom:8px}
.topbar-actions .gpt-dialog-link,.admin-home-link{display:inline-flex;align-items:center;gap:7px;min-height:40px;min-width:44px;padding:8px 5px;margin:0;border:0;border-radius:12px;background:transparent;box-shadow:none;color:var(--accent,var(--muted));font-size:14px;font-weight:550;text-decoration:none}
.admin-footer{display:flex;justify-content:center;padding:26px 12px max(24px,env(safe-area-inset-bottom));font-size:13px;color:var(--muted)}.admin-footer a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:inherit;background:transparent;transition:background-color 250ms,color 250ms}.admin-footer a:active{background:var(--tint)}
.nav-card svg{width:19px;height:19px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.segmented-item{min-height:48px;font-size:15px}
.topbar .segmented{border-radius:17px;padding:4px}
.topbar .segmented-thumb{top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:13px;transition:transform 400ms var(--motion-ease)}

.toast:not([hidden]){animation:motion-in 240ms var(--motion-ease)}
@supports (interpolate-size:allow-keywords){details{interpolate-size:allow-keywords}details::details-content{height:0;opacity:0;overflow:clip;transition:height 320ms var(--motion-ease),opacity 240ms,content-visibility 320ms;transition-behavior:allow-discrete}details[open]::details-content{height:auto;opacity:1}}
@media(min-width:600px){.hero .claude-art{width:90px;height:90px;right:27px;top:87px}}
@media(max-width:350px){.topbar-actions{gap:7px}.hero .claude-art{right:13px;width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}*,*::before,*::after{transition:none!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){width:100%;height:auto;object-fit:cover;object-position:top left;mix-blend-mode:normal}
[hidden]{display:none!important}

.settings-card{overflow:clip;overflow-anchor:none}.hero-copy{min-height:42px}.hero-art,.hero .claude-art,:root[data-engine=claude] .gpt-art{display:block;transition:opacity 280ms var(--motion-ease),scale 320ms var(--motion-ease)}.hero .gpt-art{opacity:1;scale:1}.hero .claude-art{opacity:0;scale:.92}:root[data-engine=claude] .hero .gpt-art{opacity:0;scale:.92}:root[data-engine=claude] .hero .claude-art{opacity:1;scale:1}