@layer components{.ribbon{block-size:calc((var(--count) * 95 + 190) * 1svh);position:relative}.ribbon__pin{isolation:isolate;block-size:100svh;color:var(--foreground);position:sticky;inset-block-start:0;overflow:hidden}.ribbon__canvas{z-index:1;block-size:100%;inline-size:100%;display:block;position:absolute;inset:0}.ribbon__hits{z-index:2;pointer-events:none;position:absolute;inset:0}.ribbon__hit{cursor:pointer;visibility:hidden;pointer-events:none;background:0 0;border:0;padding:0;position:absolute;top:0;left:0}.ribbon__hit.is-on{visibility:visible;pointer-events:auto}.ribbon__count{z-index:3;color:var(--muted-foreground);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .5s var(--ease-out), translate .7s var(--ease-out);align-items:center;gap:.6rem;margin:0;display:flex;position:absolute;inset-block-start:calc(var(--header-h) + 1rem);inset-inline-end:var(--gutter);translate:0 -.4rem}.ribbon__count.is-shown{opacity:1;translate:0}.ribbon__count b{color:var(--foreground);font-weight:600}.ribbon__count-line{background:color-mix(in srgb, var(--foreground) 16%, transparent);block-size:1px;inline-size:4.5rem;display:block;position:relative}.ribbon__count-line i{background:var(--gradient-fire);transition:inline-size .7s var(--ease-out);position:absolute;inset-block:0;inset-inline-start:0}.ribbon__plate{--plate-cut:1.1rem;z-index:3;inline-size:min(25rem, calc(100vw - 2 * var(--gutter)));pointer-events:none;visibility:hidden;transition:visibility 0s linear .6s;position:absolute;inset-block-end:calc(var(--dock-h,3rem) + var(--dock-gap,1rem) + 1.4rem);inset-inline-start:calc(var(--wire-x) + var(--corridor))}.ribbon__plate.is-shown{visibility:visible;pointer-events:auto;transition-delay:0s}.ribbon__plate-shade{z-index:-1;filter:blur(22px);opacity:0;transition:opacity .6s var(--ease-out);pointer-events:none;position:absolute;inset:.9rem .6rem -.4rem}.ribbon__plate .cut{--_cut:var(--plate-cut)}.ribbon__plate-shade .cut{background:#140c0452;position:absolute;inset:0}.ribbon__plate.is-shown .ribbon__plate-shade{opacity:1}.ribbon__plate-in{background:radial-gradient(120% 90% at 0% 0%, #ffffff8c, transparent 60%), linear-gradient(158deg, #ffffffb8 0%, #ffffff75 45%, #fff6 70%, #fff9 100%), color-mix(in srgb, var(--background) 30%, transparent);-webkit-backdrop-filter:blur(18px)saturate(180%)brightness(1.04);backdrop-filter:blur(18px)saturate(180%)brightness(1.04);color:var(--foreground);opacity:0;transition:opacity .55s var(--ease-out), translate .8s var(--ease-out);gap:.4rem;padding:1.3rem 1.5rem 1.35rem;display:grid;position:relative;translate:0 1.1rem;box-shadow:inset 0 1px #fffffff2,inset 1px 0 #ffffff8c,inset -1px 0 #ffffff4d,inset 0 -1px #00000012}.ribbon__plate.is-shown .ribbon__plate-in{opacity:1;translate:0}.ribbon__plate-in:before{content:"";inset-block-start:0;inset-inline:0 var(--plate-cut);background:var(--gradient-fire);transform-origin:0;block-size:2px;animation:plate-line .9s var(--ease-out) .1s both;position:absolute}[dir=rtl] .ribbon__plate-in:before{transform-origin:100%}.ribbon__plate-in:after{content:"";animation:plate-sheen 1.5s var(--ease-out) .15s both;pointer-events:none;background:linear-gradient(112deg,#0000 30%,#ffffff8c 48%,#ffffff1a 56%,#0000 70%) 120% 0/260% 100%;position:absolute;inset:0}.ribbon__plate-in>*{z-index:1;animation:plate-rise .7s var(--ease-out) both;margin:0;position:relative}.ribbon__plate-in>:nth-child(2){animation-delay:60ms}.ribbon__plate-in>:nth-child(3){animation-delay:.12s}.ribbon__plate-in>:nth-child(4){animation-delay:.18s}.ribbon__kind{color:var(--muted-foreground);padding-inline-end:var(--plate-cut)}.ribbon__name{font-family:var(--font-title);text-transform:uppercase;font-size:clamp(1.5rem,1.1rem + 1.5vw,2.4rem);font-weight:400;line-height:.95}.ribbon__tag{color:color-mix(in srgb, var(--foreground) 72%, transparent)}.ribbon__actions{flex-wrap:wrap;gap:.5rem;display:flex;margin-block-start:.55rem!important}.ribbon__actions>*{white-space:nowrap}.dark .ribbon__plate-in,:root.dark .ribbon__plate-in{background:linear-gradient(158deg, #ffffff21 0%, #ffffff0a 45%, #ffffff05 62%, #ffffff14 100%), color-mix(in srgb, var(--background) 52%, transparent);box-shadow:inset 0 1px #ffffff38,inset 1px 0 #ffffff1a,inset -1px 0 #ffffff0f,inset 0 -1px #0000004d}.dark .ribbon__plate-in:after,:root.dark .ribbon__plate-in:after{background-image:linear-gradient(112deg,#0000 30%,#ffffff29 48%,#ffffff08 56%,#0000 70%)}.dark .ribbon__plate-shade .cut,:root.dark .ribbon__plate-shade .cut{background:#0000008c}@keyframes plate-line{0%{transform:scaleX(0)}}@keyframes plate-sheen{0%{background-position:120% 0}to{background-position:-30% 0}}@keyframes plate-rise{0%{opacity:0;translate:0 .55rem}}.ribbon-room-section{background:var(--background);color:var(--foreground);padding:0}.ribbon-room{position:relative}.ribbon-room.is-moving{block-size:calc((var(--count) * 58 + 120) * 1svh)}.ribbon-room__pin{gap:var(--space-m);padding-block:calc(var(--header-h) + var(--space-l)) var(--space-xl);display:grid;position:relative}.ribbon-room.is-moving .ribbon-room__pin{block-size:100svh;padding:0;display:block;position:sticky;inset-block-start:0;overflow:clip}.ribbon-room .ribbon__pin.ribbon-room__stage{block-size:auto;position:absolute;inset:0}.ribbon-room__head{z-index:3;position:relative}.ribbon-room.is-moving .ribbon-room__head{position:absolute;inset-block-start:calc(var(--header-h) + var(--space-m));inset-inline:0}.ribbon-room__glow{z-index:0;background:radial-gradient(48% 42% at 50% 6%, color-mix(in srgb, var(--fire-1) 9%, transparent), transparent 72%), radial-gradient(70% 55% at 50% 44%, color-mix(in srgb, var(--foreground) 3%, transparent), transparent 75%);pointer-events:none;position:absolute;inset:0}.ribbon__pin--room .ribbon__count{inset-block:auto calc(var(--dock-h,3rem) + var(--dock-gap,1rem) + 1.6rem);inset-inline-end:calc(var(--floater-inset,1rem) + var(--floater,3rem) + 1.5rem)}@media (width<=47.99rem){.ribbon-room.is-moving{block-size:calc((var(--count) * 52 + 100) * 1svh)}.ribbon__plate-in{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(158deg, #fffffff5, #ffffffe0 58%, #fffffff0), var(--background)}.dark .ribbon__plate-in,:root.dark .ribbon__plate-in{background:linear-gradient(158deg, #ffffff1a, #ffffff08 58%, #ffffff0f), var(--background)}.ribbon__plate-shade{filter:blur(14px)}.ribbon__pin--room .ribbon__count{display:none}.ribbon{block-size:calc((var(--count) * 85 + 170) * 1svh)}.ribbon__plate{--plate-cut:.9rem;inset-inline:var(--gutter) calc(var(--floater-inset,1rem) + var(--floater,3rem) + .6rem);inline-size:auto}.ribbon__plate-in{padding:1.05rem 1.15rem 1.1rem}.ribbon__actions>:not(:first-child){display:none}.ribbon__actions>:first-child{letter-spacing:.06em;max-inline-size:100%;padding-inline:.95rem;font-size:.74rem}.ribbon__name{font-size:1.45rem}.ribbon__count{inset-block-start:calc(var(--header-h) + .6rem)}}@media (prefers-reduced-motion:reduce){.ribbon__plate-in,.ribbon__plate-in>*,.ribbon__plate-in:before,.ribbon__plate-in:after{transition:none;animation:none}}}