@layer components{.x-shell-credits{--x-shell-credits-accent:var(--alpha);border:1px solid color-mix(in oklch, var(--x-shell-credits-accent), transparent 82%);background:color-mix(in oklch, var(--x-shell-credits-accent), transparent 94%);color:color-mix(in oklch, var(--x-shell-credits-accent), var(--fg) 35%);font-variant-numeric:tabular-nums;box-shadow:var(--edge-highlight);font-weight:600}.x-shell-credits[data-tone=low]{--x-shell-credits-accent:var(--warning)}.x-shell-credits[data-tone=empty]{--x-shell-credits-accent:var(--danger)}.x-shell-credits .x-shell-credits-icon{box-sizing:content-box;color:var(--x-shell-credits-accent);background:color-mix(in oklch, var(--x-shell-credits-accent), transparent 85%);border-radius:999px;padding:.17rem}.x-shell-credits:disabled{cursor:default;opacity:1}.x-shell-credits[aria-busy=true]{animation:x-shell-credits-pulse calc(var(--motion-panel) * 4) ease-in-out infinite}@keyframes x-shell-credits-pulse{50%{opacity:.55}}.x-shell-credits:not(:disabled):is(:hover,:focus-visible){color:color-mix(in oklch, var(--x-shell-credits-accent), var(--fg) 35%);border-color:color-mix(in oklch, var(--x-shell-credits-accent), transparent 58%);background:color-mix(in oklch, var(--surface-control-solid), var(--x-shell-credits-accent) 7%);transform:translateY(var(--motion-hover-y));outline:none}.x-shell-account-signin{padding:0 calc(var(--pad) * .9);border:1px solid color-mix(in oklch, var(--fg), transparent 84%);font-weight:600}.x-shell-account-signin:is(:hover,:focus-visible){color:var(--ella-accent-text-hover);border-color:var(--ella-hover-line);background:var(--ella-hover-surface);transform:translateY(var(--motion-hover-y));outline:none}.x-shell-upgrade{isolation:isolate;padding:0 calc(var(--pad) * .8);color:var(--fg);background-image:var(--gradient-upsell);cursor:pointer;font-weight:700;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #0006}.x-shell-upgrade:after{content:"";z-index:-1;background:var(--upsell-shine);position:absolute;inset:0;transform:translate(-140%)}.x-shell-upgrade:is(:hover,:focus-visible){filter:brightness(1.08);outline:none}.x-shell-upgrade:is(:hover,:focus-visible):after{animation:.7s ease-out x-upsell-shine}.x-shell-upgrade:active{transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}@keyframes x-upsell-shine{to{transform:translate(140%)}}@media (prefers-reduced-motion:reduce){.x-shell-upgrade:is(:hover,:focus-visible):after{animation:none}}html[data-motion-interface=off] .x-shell-upgrade:is(:hover,:focus-visible):after{animation:none}:where(.x-shell-credits,.x-shell-upgrade,.x-shell-account-signin){--x-shell-credits-height:2rem;align-items:center;gap:calc(var(--pad) * .32);min-height:var(--x-shell-credits-height);padding:0 calc(var(--pad) * .7);color:var(--fg);font:inherit;transition:background var(--anim), border-color var(--anim), transform var(--motion-fast) var(--ease-sticky);background-color:#0000;border:0;border-radius:999px;font-size:.8rem;display:inline-flex}.x-shell-control-copy{white-space:nowrap}.x-shell-credits-icon,.x-shell-account-signin svg{color:currentColor;flex:none;width:.8rem;height:.8rem}.x-shell-account-root,.x-shell-account-trigger,.x-shell-account-signin{position:relative}.x-shell-account-face{background:linear-gradient(135deg, color-mix(in oklch, var(--alpha), white 12%) 0%, color-mix(in oklch, var(--alpha), var(--bg) 18%) 100%);color:#08110b;border-radius:999px;place-items:center;width:1.75rem;height:1.75rem;font-size:.72rem;font-weight:700;display:grid;position:relative;overflow:hidden}.x-shell-account-face img{object-fit:cover;width:100%;height:100%}.x-shell-account-face>svg{opacity:.22;position:absolute}.x-shell-account-trigger{border:1px solid color-mix(in oklch, var(--fg), transparent 90%);cursor:pointer;width:2rem;height:2rem;transition:background var(--anim), border-color var(--anim), box-shadow var(--anim), transform var(--anim);background:0 0;border-radius:999px;place-items:center;padding:0;display:grid}.x-shell-account-trigger:is(:hover,:focus-visible){background:color-mix(in oklch, var(--surface-control-solid), var(--alpha) 8%);border-color:color-mix(in oklch, var(--alpha), transparent 70%);box-shadow:0 0 0 1px color-mix(in oklch, var(--alpha), transparent 76%);transform:translateY(var(--motion-hover-y));outline:none}.x-shell-account-status{border:.12rem solid var(--bg);background:var(--alpha);width:.55rem;height:.55rem;box-shadow:0 0 .8rem color-mix(in oklch, var(--alpha), transparent 55%);border-radius:999px;position:absolute;bottom:.1rem;right:.1rem}.x-shell-account-heading{padding:calc(var(--pad) * .45) calc(var(--pad) * .6) calc(var(--pad) * .6);gap:.1rem;display:grid}.x-shell-account-menu :is(strong,span){white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.x-shell-account-menu strong{font-size:12.5px;font-weight:650;line-height:1.3}.x-shell-account-heading span{color:color-mix(in oklch, var(--fg), transparent 48%);font-size:11px;line-height:1.3}.x-shell-account-menu{--x-shell-account-menu-min-width:12.5em;--x-shell-account-menu-max-width:15em;--x-shell-account-menu-row-height:28px;--x-shell-account-menu-font-size:12px;z-index:4;top:calc(100% + var(--pad) * .5);width:max-content;min-width:var(--x-shell-account-menu-min-width);max-width:min(var(--x-shell-account-menu-max-width), calc(100dvw - var(--pad) * 2));padding:calc(var(--pad) * .5);border:1px solid var(--line-soft);border-radius:var(--menu-radius);background:var(--ella-menu-surface);box-shadow:var(--shadow-float);display:grid;position:absolute;right:0}.x-shell-account-menu-separator{width:100%;height:1px;margin:calc(var(--pad) * .25) 0;background:var(--line-soft);border:0}.x-shell-account-menu button{justify-content:flex-start;align-items:center;gap:calc(var(--pad) * .6);width:100%;min-height:var(--x-shell-account-menu-row-height);padding:0 calc(var(--pad) * .6);border-radius:var(--round);color:color-mix(in oklch, var(--fg), transparent 22%);font-family:inherit;font-size:var(--x-shell-account-menu-font-size);text-align:left;cursor:pointer;transition:background var(--anim), color var(--anim);background:0 0;border:0;font-weight:550;display:flex}.x-shell-account-menu button:is(:hover,:focus-visible){color:var(--fg);background:var(--ella-hover-surface);outline:none}.x-shell-account-menu button[data-danger]:is(:hover,:focus-visible){color:color-mix(in oklch, var(--danger), var(--fg) 25%)}.x-shell-account-heading{align-items:center;column-gap:calc(var(--pad) * .75);grid-template-columns:auto minmax(0,1fr)}.x-shell-account-face:where(.x-shell-account-heading *){width:1.75em;height:1.75em;box-shadow:0 0 0 1px color-mix(in oklch, var(--fg), transparent 86%)}.x-shell-account-heading-copy{gap:.15rem;min-width:0;display:grid}.x-shell-account-heading strong{color:var(--fg);font-weight:600}.x-shell-account-menu button svg{width:.95rem;height:.95rem;color:color-mix(in oklch, var(--fg), transparent 45%);flex:none}.x-shell-account-menu button:is(:hover,:focus-visible) svg{color:currentColor}.x-shell-account-menu button[data-danger]{color:var(--danger)}.x-shell-account-menu button[data-danger] svg{color:currentColor}.x-shell-account-menu button[data-danger]:is(:hover,:focus-visible){background:color-mix(in oklch, var(--danger), transparent 88%)}.x-navbutton{font:inherit;color:color-mix(in oklch, var(--text), var(--bg) 14%);aspect-ratio:1;box-sizing:border-box;width:100%;padding:var(--pad);border-radius:var(--round);background:0 0;border:.15em solid #0000;flex-direction:column;justify-content:center;align-items:center;gap:.25em;text-decoration:none;display:flex;position:relative;transform:translateY(0)scale(1)}.x-navbutton[data-clickable]{opacity:.92;cursor:pointer}.x-navbutton[data-clickable]:is(:hover,:focus-visible){opacity:1;color:var(--fg);transform:translateY(var(--motion-hover-y)) scale(1.04);outline:none}.x-navbutton[data-clickable]:not([data-marked]):is(:hover,:focus-visible){background:color-mix(in oklch, var(--fg), transparent 96%)}.x-navbutton[data-clickable][data-marked]{opacity:1;border-color:#0000}.x-navbutton[data-clickable]:focus-visible{box-shadow:var(--focus-ring), var(--edge-highlight)}.x-navbutton :is(img,svg){width:100%}.x-navbutton img{display:block}.x-navbutton svg{height:100%}.x-navbutton.x-navbutton-logo{aspect-ratio:auto;flex:none;align-self:center;width:28px;height:28px;padding:0}.x-navbutton.x-navbutton-logo img{object-fit:contain;height:28px}.x-navbutton.x-navbutton-labeled{aspect-ratio:auto;border-radius:12px;gap:2px;height:44px;padding:1px 2px}.x-navbutton.x-navbutton-labeled,.x-navbutton.x-navbutton-labeled[data-clickable]:is(:hover,:focus-visible),.x-navbutton.x-navbutton-labeled[data-clickable][data-marked]{color:var(--fg)}.x-ella-shell[data-maximized][data-mode=overlay]>nav .x-navbutton.x-navbutton-labeled[data-clickable][data-marked]{color:var(--fg);background:var(--ella-active-surface);box-shadow:none}.x-navbutton.x-navbutton-labeled svg{width:18px;height:18px}.x-navbutton.x-navbutton-plus{aspect-ratio:auto;width:32px;height:32px;color:var(--alpha);background:color-mix(in oklch, var(--alpha), transparent 90%);border-radius:16px;padding:0}.x-navbutton.x-navbutton-plus svg{width:16px;height:16px}.x-navbutton.x-navbutton-plus[data-clickable]:is(:hover,:focus-visible){background:color-mix(in oklch, var(--alpha), transparent 86%)}.x-navbutton .x-navbutton-label{text-align:center;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:10px;line-height:10px;overflow:hidden}.x-navbutton .x-navbutton-badge{color:var(--bg);letter-spacing:.08em;text-indent:.08em;background:#ffb800;border-radius:999px;flex:none;justify-content:center;align-items:center;padding:.45em .6em .25em;font-size:.55rem;font-weight:700;line-height:1;display:none}.x-navbutton{transition:color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease, opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-sticky)}.x-navbutton[data-clickable]:active{opacity:.9;transform:translateY(var(--motion-press-y)) scale(var(--motion-press-scale))}}