.top-layer-shell-panel{--top-layer-stage-bg:rgba(8,13,25,0.72)}.pattern-preview.top-layer-preview{display:grid;place-items:center;min-height:178px;padding:14px;overflow:hidden;isolation:isolate}.pattern-preview.top-layer-preview.pattern-preview--inspector{min-height:236px}.top-layer-stage{position:relative;width:min(100%,330px);height:154px;overflow:hidden;isolation:isolate;border:1px solid rgba(148,163,184,.14);border-radius:14px;background:var(--top-layer-stage-bg)}.pattern-preview--inspector .top-layer-stage{height:190px}.top-layer-page{position:absolute;inset:16px;display:grid;align-content:start;grid-gap:8px;gap:8px}.top-layer-page__bar{display:block;width:58%;height:7px;border-radius:999px;background:rgba(148,163,184,.18)}.top-layer-page__bar--wide{width:78%}.top-layer-page__bar--short{width:42%}.top-layer-trigger{position:absolute;left:50%;bottom:14px;z-index:0;transform:translateX(-50%);padding:6px 13px;border:1px solid color-mix(in srgb,var(--top-layer-accent) 44%,transparent);border-radius:999px;background:color-mix(in srgb,var(--top-layer-accent) 14%,rgba(15,23,42,.92));color:#eef2ff;font-size:.72rem;font-weight:750}.top-layer-backdrop{position:absolute;inset:0;z-index:1;background:rgba(2,6,23,.58);opacity:0;animation:topLayerBackdropCycle 4.8s ease-in-out infinite}.top-layer-panel{position:absolute;z-index:2;display:grid;align-content:start;grid-gap:9px;gap:9px;padding:14px;border:1px solid color-mix(in srgb,var(--top-layer-accent) 34%,rgba(148,163,184,.18));border-radius:16px;background:#101827;box-shadow:0 20px 42px rgba(2,6,23,.44);transform:translateY(var(--top-layer-offset,18px)) scale(.96);opacity:0;animation:topLayerPanelCycle 4.8s cubic-bezier(.2,.8,.2,1) infinite}.top-layer-preview--backdrop .top-layer-panel,.top-layer-preview--dialog .top-layer-panel{inset:auto 34px 24px;min-height:86px}.top-layer-preview--popover .top-layer-panel{top:34px;right:30px;width:150px;min-height:88px;transform-origin:86% 0}.top-layer-panel__label{color:color-mix(in srgb,var(--top-layer-accent) 78%,white);font-size:.68rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.top-layer-panel__line{display:block;width:100%;height:7px;border-radius:999px;background:rgba(226,232,240,.22)}.top-layer-panel__line--short{width:58%}.top-layer-panel__status{justify-self:start;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--top-layer-accent) 16%,transparent);color:rgba(226,232,240,.78);font-size:.6rem;font-weight:750}@keyframes topLayerBackdropCycle{0%,14%{opacity:0}24%,70%{opacity:1}84%,to{opacity:0}}@keyframes topLayerPanelCycle{0%,14%{opacity:0;transform:translateY(var(--top-layer-offset,18px)) scale(.96)}24%,70%{opacity:1;transform:translateY(0) scale(1)}84%,to{opacity:0;transform:translateY(calc(var(--top-layer-offset, 18px) * -.55)) scale(.97)}}@media (prefers-reduced-motion:reduce){.top-layer-backdrop,.top-layer-panel{animation:none}.top-layer-backdrop{opacity:1}.top-layer-panel{opacity:1;transform:none}}