/* Preserve the original palette and phone layout; refine interaction only. */
:root{--ease-ui:cubic-bezier(.22,1,.36,1)}
.native-main>*{animation:none}
.native-main.view-enter>*{animation:screen-in .28s var(--ease-ui) both}
button{transition:transform .18s var(--ease-ui),background-color .2s,color .2s,border-color .2s;}
button:active{transform:scale(.97)}
.icon{stroke-width:1.8;vertical-align:middle}
.mobile-nav button{isolation:isolate;border-radius:14px}
.nav-selection{position:absolute;top:0;inset-inline:5px;height:34px;border-radius:12px;background:#a277ff14;border:1px solid #a277ff1c;z-index:-1;pointer-events:none}
.mobile-nav button[data-id=create] .nav-selection{display:none}
.mobile-nav button.active>.icon{stroke-width:2;color:#c6a4ff}
.mobile-nav button.active>span:last-of-type{color:#c6a4ff}
.mobile-nav button:active>.icon{transform:translateY(-2px)}
.mobile-nav .icon{transition:transform .2s var(--ease-ui),color .2s}
.filters,.tabs{scroll-padding-inline:8px;overscroll-behavior-x:contain;scrollbar-width:none}
.tabs{overflow-x:auto;flex-wrap:nowrap}
.tabs>.tab,.filters>.chip{flex-shrink:0;white-space:nowrap;min-height:42px}
.filters>.chip{scroll-snap-align:start}
.filters,.stories{scroll-snap-type:x proximity}
.chip.active,.tab.active{box-shadow:inset 0 0 0 1px #c5a4ff26}
.tab:focus-visible,.chip:focus-visible{outline-offset:-3px}
.dialog-head .icon-btn{width:44px;height:44px;margin-block:-7px;flex-shrink:0}
.dialog-head .icon-btn>.icon{width:20px;height:20px}
dialog{overscroll-behavior:contain}
dialog[open]{animation:sheet-refined-in .32s var(--ease-ui) both}
dialog[open]::backdrop{animation:backdrop-in .25s ease both}
dialog[open].is-closing{animation:sheet-refined-out .18s ease-in both;pointer-events:none}
dialog[open].is-closing::backdrop{animation:backdrop-out .18s ease-in both}
.saved>.icon-bookmark{fill:#a277ff30;color:#c5a4ff}
@media(hover:hover){.icon-btn:hover,.tab:not(.active):hover,.chip:not(.active):hover{background-color:#ffffff0b}.mobile-nav button:hover{color:#d4bbef}.story:hover .story-ring{transform:translateY(-2px)}}
.story-ring{transition:transform .2s var(--ease-ui)}
@keyframes sheet-refined-in{from{opacity:0;transform:translate(-50%,32px) scale(.985)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes sheet-refined-out{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,24px)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}