/* One active name, five recognizable icons. The row keeps the same footprint. */
.demo-stack{padding-top:76px}
.corner-mascot{top:-11px}
.platform-switcher{top:22px}
.platform-tabs{--tab-width:44px;--active-width:136px;--tab-icon:20px;--tab-font:16px;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:8px;transform:none}
.platform-tabs button{flex:0 0 var(--tab-width);width:var(--tab-width);height:44px;min-width:0;flex-direction:row;justify-content:center;gap:0;padding:0 0 8px;font-size:var(--tab-font);line-height:1;transition:color .18s;isolation:isolate}
.platform-tabs button[aria-selected=true]{flex-basis:var(--active-width);width:var(--active-width);justify-content:flex-start;padding-inline:9px;z-index:1}
.platform-tabs img{display:block;flex:none;width:var(--tab-icon);height:var(--tab-icon);opacity:.58;transition:opacity .18s}
.platform-tabs button:hover img,.platform-tabs button:focus-visible img{opacity:1}
.platform-tabs .tab-label{display:block;max-width:0;overflow:hidden;opacity:0;white-space:nowrap}
.platform-tabs button[aria-selected=true] .tab-label{max-width:100px;margin-left:7px;opacity:1;animation:platform-name-in .34s cubic-bezier(.22,1,.36,1) both}
.platform-tabs .tab-timer{left:9px;right:9px;bottom:0;height:3px}
.platform-tabs button:not([aria-selected=true]) .tab-timer{visibility:hidden}
@keyframes platform-name-in{from{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-5px)}to{clip-path:inset(0);opacity:1;transform:translateX(0)}}
@container(max-width:400px){.platform-tabs{--tab-width:36px;--active-width:122px;--tab-icon:19px;--tab-font:15px;gap:6px}}
@container(max-width:340px){.platform-tabs{--tab-width:32px;--active-width:114px;--tab-icon:18px;--tab-font:14px;gap:4px}}
@container(max-width:300px){.platform-tabs{--tab-width:28px;--active-width:106px;--tab-icon:17px;--tab-font:13px;gap:2px}.platform-tabs button[aria-selected=true]{padding-inline:7px}.platform-tabs button[aria-selected=true] .tab-label{margin-left:5px}.platform-tabs .tab-timer{left:7px;right:7px}}
@container(max-width:260px){.platform-tabs{--tab-width:26px;--active-width:98px;--tab-icon:16px;--tab-font:12px;gap:1px}}
@media(max-width:1100px){.demo-stack{padding-top:66px}.platform-switcher{top:12px}.corner-mascot{top:-14px}}
@media(max-width:760px){.demo-stack{padding-top:64px}.platform-switcher{top:10px}.corner-mascot{top:0}}
@media(min-width:761px) and (max-height:700px){.demo-stack{padding-top:58px}.platform-switcher{top:4px}.corner-mascot{top:-14px}}
@media(max-width:760px) and (max-height:700px){.demo-stack{padding-top:58px}.platform-switcher{top:4px}.corner-mascot{top:-6px}}
@media(prefers-reduced-motion:reduce){.platform-tabs button[aria-selected=true] .tab-label{animation:none}.platform-tabs img{transition:none}}