@layer components{.hero-stage{--frame-w:min(100% - 2rem,22.5rem);--frame-x:50%;--frame-top:11%;--row-h:2.45rem;--header-h:2.35rem;--progress-h:0.22rem;position:relative;isolation:isolate;overflow:hidden;border-radius:1rem;border:1px solid var(--color-line);background:radial-gradient(120% 90% at 80% 12%,color-mix(in srgb,var(--color-blueprint-bright) 18%,transparent),transparent 58%),radial-gradient(90% 70% at 10% 90%,color-mix(in srgb,var(--color-signal-bright) 14%,transparent),transparent 52%),linear-gradient(180deg,#fbfcfe 0,var(--color-surface) 100%);box-shadow:0 1px 2px rgb(21 53 81/.04),0 22px 48px rgb(21 53 81/.08)}.hero-stage-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 40%,color-mix(in srgb,var(--color-blueprint-bright) 10%,transparent),transparent 40%),radial-gradient(circle at 70% 60%,color-mix(in srgb,var(--color-signal-bright) 8%,transparent),transparent 42%);opacity:.7;animation:hero-glow-drift 10s ease-in-out infinite;pointer-events:none}.hero-stage[data-phase=hold] .hero-stage-glow,.hero-stage[data-phase=live] .hero-stage-glow{opacity:.35}.hero-stage-grid{position:absolute;inset:0;background-image:linear-gradient(90deg,rgb(21 53 81/.045) 1px,transparent 0),linear-gradient(180deg,rgb(21 53 81/.045) 1px,transparent 0);background-size:28px 28px;mask-image:radial-gradient(ellipse at 55% 45%,black 12%,transparent 72%);pointer-events:none;transition:opacity .7s ease}.hero-stage[data-phase=hold] .hero-stage-grid,.hero-stage[data-phase=live] .hero-stage-grid{opacity:.3}.hero-scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility 0s linear .38s}.hero-stage[data-scene=buildout] .hero-scene[data-scene-panel=buildout],.hero-stage[data-scene=coi] .hero-scene[data-scene-panel=coi],.hero-stage[data-scene=messages] .hero-scene[data-scene-panel=messages]{opacity:1;visibility:visible;transition:opacity .38s ease,visibility 0s linear 0s}.hero-scene-dots{position:absolute;z-index:6;right:.9rem;top:.95rem;display:flex;gap:.35rem}.hero-scene-dot{width:.35rem;height:.35rem;border-radius:9999px;background:var(--color-line-bright);transition:background .3s ease,transform .3s ease}.hero-scene-dot.is-active{background:var(--color-blueprint);transform:scale(1.2)}.hero-threads{position:absolute;inset:8% 6%;z-index:1;width:88%;height:78%;overflow:visible;pointer-events:none;opacity:.15;transition:opacity .5s ease}.hero-thread{fill:none;stroke:var(--color-blueprint);stroke-width:.45;stroke-linecap:round;stroke-dasharray:4 3;opacity:.35;transition:opacity .5s ease,stroke .5s ease,stroke-dashoffset .9s ease}.hero-stage[data-phase=chaos] .hero-threads{opacity:.2}.hero-stage[data-phase=thread] .hero-threads{opacity:.9}.hero-stage[data-phase=thread] .hero-thread{opacity:.85;stroke:var(--color-blueprint-bright);stroke-dasharray:80;stroke-dashoffset:80;animation:hero-thread-draw .9s ease forwards}.hero-stage[data-phase=thread] .hero-thread:nth-child(2){animation-delay:80ms}.hero-stage[data-phase=thread] .hero-thread:nth-child(3){animation-delay:.14s}.hero-stage[data-phase=thread] .hero-thread:nth-child(4){animation-delay:.2s}.hero-stage[data-phase=thread] .hero-thread:nth-child(5){animation-delay:.26s}.hero-stage[data-phase=thread] .hero-thread:nth-child(6){animation-delay:.32s}.hero-stage[data-phase=hold] .hero-threads,.hero-stage[data-phase=live] .hero-threads,.hero-stage[data-phase=morph] .hero-threads{opacity:0}.hero-core{position:absolute;left:50%;top:48%;z-index:1;width:4.5rem;height:4.5rem;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}.hero-core-pulse,.hero-core-ring{position:absolute;inset:0;border-radius:9999px}.hero-core-ring{border:1px solid color-mix(in srgb,var(--color-blueprint-bright) 45%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--color-blueprint-bright) 28%,transparent) 0,transparent 70%)}.hero-core-pulse{background:radial-gradient(circle,color-mix(in srgb,var(--color-blueprint-bright) 40%,transparent) 0,transparent 65%)}.hero-stage[data-phase=thread] .hero-core{opacity:1;transform:translate(-50%,-50%) scale(1)}.hero-stage[data-phase=thread] .hero-core-pulse{animation:hero-core-pulse 1.1s ease-out infinite}.hero-stage[data-phase=hold] .hero-core,.hero-stage[data-phase=live] .hero-core,.hero-stage[data-phase=morph] .hero-core{opacity:0;transform:translate(-50%,-50%) scale(1.6)}.hero-frame,.hero-msg-frame{position:absolute;z-index:2;left:var(--frame-x);top:var(--frame-top);width:var(--frame-w);transform:translateX(-50%) scale(.92);border-radius:.9rem;border:1px solid transparent;background:transparent;box-shadow:none;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1),border-color .5s ease,background .5s ease,box-shadow .6s ease}.hero-stage[data-phase=hold] .hero-frame,.hero-stage[data-phase=hold] .hero-msg-frame,.hero-stage[data-phase=live] .hero-frame,.hero-stage[data-phase=live] .hero-msg-frame,.hero-stage[data-phase=morph] .hero-frame,.hero-stage[data-phase=morph] .hero-msg-frame{opacity:1;transform:translateX(-50%) scale(1);border-color:var(--color-line);background:color-mix(in srgb,var(--color-surface) 97%,white);box-shadow:inset 0 1px 0 rgb(255 255 255/.85),0 24px 50px rgb(21 53 81/.14)}.hero-frame-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;height:var(--header-h);padding:0 .95rem;border-bottom:1px solid transparent;opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .5s ease,border-color .4s ease}.hero-stage[data-phase=hold] .hero-frame-header,.hero-stage[data-phase=live] .hero-frame-header,.hero-stage[data-phase=morph] .hero-frame-header{opacity:1;transform:translateY(0);border-bottom-color:var(--color-line)}.hero-board-title{font-size:.6875rem;color:var(--color-ink-muted)}.hero-board-title,.hero-live{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.hero-live{display:inline-flex;align-items:center;gap:.35rem;border-radius:9999px;border:1px solid color-mix(in srgb,var(--color-blueprint) 28%,transparent);background:color-mix(in srgb,var(--color-blueprint-bright) 14%,transparent);padding:.15rem .55rem;font-size:.625rem;color:var(--color-blueprint);opacity:0;transition:opacity .4s ease .2s;white-space:nowrap}.hero-stage[data-phase=hold] .hero-live,.hero-stage[data-phase=live] .hero-live{opacity:1}.hero-live-dot{width:.4rem;height:.4rem;border-radius:9999px;background:var(--color-blueprint-bright)}.hero-stage[data-phase=hold] .hero-live-dot,.hero-stage[data-phase=live] .hero-live-dot{animation:hero-live-blink 1.3s ease-in-out infinite}.hero-progress{height:var(--progress-h);background:var(--color-surface-raised)}.hero-progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--color-blueprint),var(--color-blueprint-bright));transition:width 1.5s cubic-bezier(.22,1,.36,1) .2s}.hero-stage[data-phase=hold] .hero-progress>span,.hero-stage[data-phase=live] .hero-progress>span{width:78%}.hero-stage[data-phase=hold] .hero-progress-coi>span,.hero-stage[data-phase=live] .hero-progress-coi>span{width:75%}.hero-slots{display:flex;flex-direction:column}.hero-slot{height:var(--row-h);border-bottom:1px solid var(--color-line)}.hero-slot:last-child{border-bottom:0}.hero-signal{position:absolute;z-index:3;left:var(--left);top:var(--top);display:inline-flex;align-items:center;max-width:13rem;border-radius:.55rem;border:1px solid var(--color-line-bright);background:color-mix(in srgb,var(--color-surface) 94%,white);padding:.5rem .7rem .5rem .55rem;font-family:var(--font-mono);font-size:.6875rem;line-height:1.3;color:var(--color-ink-muted);box-shadow:0 10px 24px rgb(21 53 81/.1);transform:translate(-50%,-50%) rotate(var(--rot,0deg));transition:left .9s cubic-bezier(.22,1,.36,1),top .9s cubic-bezier(.22,1,.36,1),width .7s ease,max-width .7s ease,height .7s ease,padding .6s ease,border-radius .6s ease,border-color .5s ease,background .5s ease,box-shadow .6s ease,transform .9s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease;will-change:left,top,transform,opacity}.hero-signal-dot{display:inline-block;width:.4rem;height:.4rem;margin-right:.4rem;flex-shrink:0;border-radius:9999px;background:var(--accent,var(--color-blueprint-bright))}.hero-signal-chaos,.hero-signal-order{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero-signal-order{display:none;align-items:center;gap:.55rem;width:100%;font-family:var(--font-sans);font-size:.8125rem;color:var(--color-ink)}.hero-signal-check{display:grid;place-items:center;width:1.15rem;height:1.15rem;flex-shrink:0;border-radius:9999px;border:1px solid color-mix(in srgb,var(--color-blueprint) 40%,transparent);background:color-mix(in srgb,var(--color-blueprint-bright) 18%,white);color:var(--color-blueprint);font-size:.65rem;line-height:1}.hero-signal-check-warn{border-color:color-mix(in srgb,var(--color-signal) 45%,transparent);background:color-mix(in srgb,var(--color-signal-bright) 18%,white);color:var(--color-signal)}.hero-stage[data-phase=chaos] .hero-signal{animation:hero-chip-float 3.6s ease-in-out infinite;animation-delay:var(--float-delay,0s)}.hero-stage[data-phase=thread] .hero-signal{left:50%;top:48%;transform:translate(-50%,-50%) rotate(0deg) scale(.78);opacity:.55;filter:blur(.3px);transition-delay:var(--float-delay,0s)}.hero-stage[data-phase=hold] .hero-signal-row,.hero-stage[data-phase=live] .hero-signal-row,.hero-stage[data-phase=morph] .hero-signal-row{left:var(--frame-x);width:var(--frame-w);max-width:var(--frame-w);height:var(--row-h);padding:0 .95rem;border-radius:0;border-color:transparent;border-bottom:1px solid var(--color-line);background:transparent;box-shadow:none;transform:translate(-50%) rotate(0deg) scale(1);opacity:1;filter:none;z-index:4}.hero-stage[data-phase=hold] .hero-signal-row[data-slot="0"],.hero-stage[data-phase=live] .hero-signal-row[data-slot="0"],.hero-stage[data-phase=morph] .hero-signal-row[data-slot="0"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h))}.hero-stage[data-phase=hold] .hero-signal-row[data-slot="1"],.hero-stage[data-phase=live] .hero-signal-row[data-slot="1"],.hero-stage[data-phase=morph] .hero-signal-row[data-slot="1"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + var(--row-h))}.hero-stage[data-phase=hold] .hero-signal-row[data-slot="2"],.hero-stage[data-phase=live] .hero-signal-row[data-slot="2"],.hero-stage[data-phase=morph] .hero-signal-row[data-slot="2"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + (var(--row-h) * 2))}.hero-stage[data-phase=hold] .hero-signal-row[data-slot="3"],.hero-stage[data-phase=live] .hero-signal-row[data-slot="3"],.hero-stage[data-phase=morph] .hero-signal-row[data-slot="3"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + (var(--row-h) * 3));border-bottom:0}.hero-stage[data-phase=hold] .hero-signal-row .hero-signal-chaos,.hero-stage[data-phase=hold] .hero-signal-row .hero-signal-dot,.hero-stage[data-phase=live] .hero-signal-row .hero-signal-chaos,.hero-stage[data-phase=live] .hero-signal-row .hero-signal-dot,.hero-stage[data-phase=morph] .hero-signal-row .hero-signal-chaos,.hero-stage[data-phase=morph] .hero-signal-row .hero-signal-dot{display:none}.hero-stage[data-phase=hold] .hero-signal-row .hero-signal-order,.hero-stage[data-phase=live] .hero-signal-row .hero-signal-order,.hero-stage[data-phase=morph] .hero-signal-row .hero-signal-order{display:inline-flex}.hero-stage[data-scene=buildout][data-phase=hold] .hero-signal-row[data-slot="2"],.hero-stage[data-scene=buildout][data-phase=live] .hero-signal-row[data-slot="2"]{background:color-mix(in srgb,var(--color-blueprint-bright) 8%,transparent)}.hero-stage[data-scene=coi][data-phase=hold] .hero-signal-row[data-status=warn],.hero-stage[data-scene=coi][data-phase=live] .hero-signal-row[data-status=warn]{background:color-mix(in srgb,var(--color-signal-bright) 10%,transparent)}.hero-stage[data-phase=hold] .hero-signal-extra,.hero-stage[data-phase=live] .hero-signal-extra,.hero-stage[data-phase=morph] .hero-signal-extra{left:50%;top:48%;transform:translate(-50%,-50%) scale(.35);opacity:0;pointer-events:none}.hero-msg-chip{position:absolute;z-index:3;left:var(--left);top:var(--top);display:flex;flex-direction:column;gap:.2rem;max-width:11.5rem;border-radius:.75rem;border:1px solid var(--color-line-bright);background:color-mix(in srgb,var(--color-surface) 96%,white);padding:.45rem .65rem;box-shadow:0 10px 24px rgb(21 53 81/.1);transform:translate(-50%,-50%) rotate(var(--rot,0deg));transition:left .9s cubic-bezier(.22,1,.36,1),top .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),opacity .5s ease,filter .5s ease}.hero-msg-from{font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-blueprint)}.hero-msg-text{font-size:.75rem;line-height:1.3;color:var(--color-ink-muted)}.hero-stage[data-phase=chaos] .hero-msg-chip{animation:hero-chip-float 3.6s ease-in-out infinite;animation-delay:var(--float-delay,0s)}.hero-stage[data-phase=thread] .hero-msg-chip{left:50%;top:48%;transform:translate(-50%,-50%) rotate(0deg) scale(.82);opacity:.5;filter:blur(.3px);transition-delay:var(--float-delay,0s)}.hero-stage[data-phase=hold] .hero-msg-chip,.hero-stage[data-phase=live] .hero-msg-chip,.hero-stage[data-phase=morph] .hero-msg-chip{left:50%;top:48%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none}.hero-msg-thread{display:flex;flex-direction:column;padding:.35rem 0}.hero-msg-row{display:flex;align-items:flex-start;gap:.5rem;padding:.42rem .85rem;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1);transition-delay:var(--delay,0s)}.hero-msg-row+.hero-msg-row{border-top:1px solid var(--color-line)}.hero-stage[data-phase=hold] .hero-msg-row,.hero-stage[data-phase=live] .hero-msg-row,.hero-stage[data-phase=morph] .hero-msg-row{opacity:1;transform:translateY(0)}.hero-msg-badge{flex-shrink:0;min-width:4.25rem;border-radius:9999px;border:1px solid var(--color-line);background:var(--color-surface-raised);padding:.12rem .4rem;font-family:var(--font-mono);font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--color-ink-muted)}.hero-msg-body{font-size:.72rem;line-height:1.3;color:var(--color-ink)}.hero-msg-frame{max-height:calc(100% - 3.4rem)}.hero-roles{position:absolute;z-index:5;left:50%;bottom:.7rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;width:min(100% - 1.5rem,22rem);transform:translateX(-50%)}.hero-role{border-radius:9999px;border:1px solid var(--color-line);background:color-mix(in srgb,var(--color-surface) 92%,white);padding:.28rem .6rem;font-family:var(--font-mono);font-size:.625rem;letter-spacing:.05em;text-transform:uppercase;color:var(--color-ink-muted);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .45s;transition-delay:0s;box-shadow:0 8px 18px rgb(21 53 81/.08)}.hero-stage[data-phase=hold] .hero-role,.hero-stage[data-phase=live] .hero-role{opacity:1;visibility:visible;transform:translateY(0);transition-delay:var(--delay,0s);transition:opacity .45s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear 0s}.hero-caption{position:absolute;z-index:5;top:.85rem;left:1rem;max-width:calc(100% - 4.5rem);font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint);transition:opacity .35s ease}.hero-stage[data-phase=thread] .hero-caption{opacity:.85}}@keyframes hero-chip-float{0%,to{translate:0 0}50%{translate:0 -7px}}@keyframes hero-thread-draw{to{stroke-dashoffset:0}}@keyframes hero-core-pulse{0%{transform:scale(.7);opacity:.9}to{transform:scale(1.8);opacity:0}}@keyframes hero-live-blink{0%,to{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.2)}}@keyframes hero-glow-drift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(2%,-1.5%) scale(1.04)}}@media (prefers-reduced-motion:reduce){.hero-core,.hero-frame,.hero-frame-header,.hero-live-dot,.hero-msg-chip,.hero-msg-frame,.hero-msg-row,.hero-progress>span,.hero-role,.hero-signal,.hero-stage-glow,.hero-threads{animation:none!important;transition:none!important}.hero-scene{transition:none!important}.hero-core,.hero-msg-chip,.hero-signal-extra,.hero-threads{opacity:0!important}.hero-frame,.hero-frame-header,.hero-live,.hero-msg-frame,.hero-msg-row,.hero-role{opacity:1!important;visibility:visible!important;transform:none!important}.hero-frame,.hero-msg-frame{border-color:var(--color-line)!important;background:color-mix(in srgb,var(--color-surface) 97%,white)!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.85),0 24px 50px rgb(21 53 81/.14)!important}.hero-signal-row{left:var(--frame-x)!important;width:var(--frame-w)!important;max-width:var(--frame-w)!important;height:var(--row-h)!important;padding:0 .95rem!important;border-radius:0!important;border-color:transparent!important;border-bottom:1px solid var(--color-line)!important;background:transparent!important;box-shadow:none!important;transform:translate(-50%)!important;opacity:1!important}.hero-signal-row[data-slot="0"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h))!important}.hero-signal-row[data-slot="1"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + var(--row-h))!important}.hero-signal-row[data-slot="2"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + (var(--row-h) * 2))!important}.hero-signal-row[data-slot="3"]{top:calc(var(--frame-top) + var(--header-h) + var(--progress-h) + (var(--row-h) * 3))!important;border-bottom:0!important}.hero-signal-row .hero-signal-chaos,.hero-signal-row .hero-signal-dot{display:none!important}.hero-signal-row .hero-signal-order{display:inline-flex!important}.hero-progress>span{width:78%!important}}