.skin-host,.site-bar,.site-width{--gutter:16px;width:min(100% - 2*var(--gutter),1100px);margin-inline:auto}@media (min-width:640px){.skin-host,.site-bar,.site-width{--gutter:24px}}.site-bar{--bar-h:64px;height:var(--bar-h);justify-content:space-between;align-items:center;gap:1rem;display:flex}@media (min-width:640px){.site-bar{--bar-h:88px}}.device-nav{min-width:0}.device-nav-row{align-items:flex-end;margin-right:-6px;display:flex}.device-nav-item{width:44px;min-width:36px;height:44px;color:var(--text-soft);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:8px;align-content:end;justify-items:center;padding:0 0 4px;display:grid}.device-nav-icon{--unchosen:grayscale(1)opacity(.35);height:28px;filter:var(--unchosen);align-items:flex-end;transition:filter .3s;display:flex}@media (prefers-color-scheme:dark){.device-nav-icon{--unchosen:grayscale(1)opacity(.5)}}.device-nav-icon svg{filter:drop-shadow(0 1px 1px #0000002e);width:auto;height:27px;display:block}.device-nav-icon[data-device=xbox-360] svg,.device-nav-icon[data-device=simple] svg{height:23px}.device-nav-label{display:none}.device-nav-item:after{content:"";background:0 0;border-radius:1px;width:12px;height:2px;margin-top:5px;transition:background .3s}.device-nav-item[aria-checked=true]{color:var(--foreground);cursor:default}.device-nav-item[aria-checked=true] .device-nav-icon{filter:none}.device-nav-item[aria-checked=true]:after{background:var(--peach-ink)}.device-nav-item[aria-checked=false]:hover .device-nav-icon{filter:grayscale(.3)opacity(.75)}.device-nav-item:focus-visible{outline:2px solid color-mix(in srgb,var(--pastel-blue)90%,transparent);outline-offset:2px}@media (min-width:640px){.device-nav-row{margin-right:-18px}.device-nav-item{width:80px;height:auto;padding:4px 0 6px}.device-nav-icon{height:42px}.device-nav-icon svg{height:40px}.device-nav-icon[data-device=xbox-360] svg,.device-nav-icon[data-device=simple] svg{height:34px}.device-nav-label{font-family:var(--font-heading),system-ui,sans-serif;white-space:nowrap;margin-top:6px;font-size:12px;font-weight:500;line-height:14px;display:block}.device-nav-item:after{width:14px;margin-top:4px}}.skin-host{--device-h:calc(100svh - 88px - 64px - 2.5rem);min-height:calc(var(--device-h) + 2.5rem);flex:1;grid-template-columns:minmax(0,1fr);align-items:center;padding-block:1.25rem;display:grid}@media (max-width:639px){.skin-host{--device-h:calc(100svh - 64px - 1.5rem);align-items:start;padding-block:.5rem 1.5rem}}.skin-host[data-view=page]{align-items:start}:root[data-device] .skin-host[data-view=page]>.skin-stage[data-phase=idle]{visibility:hidden}:root[data-device]:has(.skin-host[data-view=page]>.skin-stage[data-phase=idle]) .device-nav-item[aria-checked=true]{color:var(--text-soft)}:root[data-device]:has(.skin-host[data-view=page]>.skin-stage[data-phase=idle]) .device-nav-item[aria-checked=true] .device-nav-icon{filter:var(--unchosen)}:root[data-device]:has(.skin-host[data-view=page]>.skin-stage[data-phase=idle]) .device-nav-item[aria-checked=true]:after{background:0 0}.skin-host[data-view=device],.site-bar{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.skin-stage{width:100%}.skin-stage[data-intro]>*{animation:.56s cubic-bezier(.25,1.25,.4,1) both skin-intro}@keyframes skin-intro{0%{opacity:0;transform:translateY(24px)}40%{opacity:1}}.skin-stage[data-phase=leaving]{pointer-events:none;animation:.26s cubic-bezier(.55,0,.75,.2) both skin-leave}.skin-stage[data-phase=arriving]{animation:.52s cubic-bezier(.34,1.4,.64,1) both skin-arrive}@keyframes skin-leave{to{opacity:0;transform:translateY(48px)scale(.94)}}@keyframes skin-arrive{0%{opacity:0;transform:translateY(56px)scale(.94)}}.skin-host{--floor-pool:#ecdcca8c;--floor-shadow:#3c2c1e42}@media (prefers-color-scheme:dark){.skin-host{--floor-pool:#fff4e812;--floor-shadow:#0000009e}}.device-floor{isolation:isolate;position:relative}.device-floor:before,.device-floor:after{content:"";z-index:-1;pointer-events:none;position:absolute;top:100%;left:50%}.device-floor:before{aspect-ratio:4.3;background:radial-gradient(closest-side,var(--floor-pool),transparent);width:175%;translate:-50% -58%}.device-floor:after{aspect-ratio:8.5;background:radial-gradient(closest-side,var(--floor-shadow),transparent);width:92%;translate:-46% -58%}@media (prefers-reduced-motion:reduce){.device-nav-icon,.device-nav-item:after{transition:none}.skin-stage[data-intro]>*,.skin-stage[data-phase=leaving],.skin-stage[data-phase=arriving]{animation:none}}
