/* Decorative render treatment belongs only to See it. Before you live it. */
#vision{--vision-status-size:clamp(24px,1.3vw,28px);--vision-chat-size:calc(var(--vision-status-size) / 1.2);--vision-chat-top:calc(100px + var(--vision-status-size) * 1.35)}
#vision .vision-render-status,#vision .vision-chat{font:400 var(--vision-status-size)/1.35 Arial,Helvetica,sans-serif;letter-spacing:-.045em}
#vision .matrix-text{position:relative;display:inline-block}
#vision .matrix-text.is-scrambling{color:transparent}
#vision .matrix-ghost{position:absolute;inset:0;pointer-events:none;user-select:none;white-space:pre}
#vision .vision-ring{position:absolute;z-index:3;pointer-events:none;width:54vw;height:54vw;right:-18vw;top:-18vw;border:1px solid #fff5;border-radius:50%}
#vision .vision-orbit{position:absolute;inset:-1px;border:1px solid transparent;border-bottom-color:#ffffff38;border-radius:50%;animation:vision-orbit-turn 54s linear infinite}
#vision .vision-orbit::after{content:"";position:absolute;width:3px;height:3px;left:50%;bottom:-2px;border-radius:50%;background:#ffffff85;box-shadow:0 0 9px #fff3}
#vision .vision-render-status{--render-ink:#fff;position:absolute;z-index:4;top:82px;left:var(--gutter);display:flex;align-items:center;gap:13px;color:var(--render-ink);text-shadow:0 1px 8px #10201970;pointer-events:none;user-select:none}
#vision .vision-render-spinner{width:32px;height:32px;flex-shrink:0;border:1px solid #ffffff29;border-top-color:#ffffff85;border-right-color:#ffffff52;border-radius:50%;animation:vision-orbit-turn 4.8s linear infinite}
#vision .vision-chat{position:absolute;z-index:4;top:var(--vision-chat-top);left:var(--gutter);max-width:calc(100% - 2 * var(--gutter) - 320px);font-size:var(--vision-chat-size);color:#fff;opacity:.75;pointer-events:none;transition:opacity 220ms ease}
#vision .vision-chat .matrix-text{max-width:100%;white-space:nowrap}
#vision .vision-chat-row{margin:0;min-height:1.55em;line-height:1.55}
#vision .vision-chat-row.has-provider{display:flex;align-items:flex-start;gap:.5em}
#vision .vision-chat-row.has-provider .matrix-text{flex:0 1 auto;min-width:0;max-width:calc(100% - 1.5em)}
#vision .vision-chat-provider{flex:none;display:block;width:1em;height:1em;max-width:none;margin-top:.26em;object-fit:contain}
#vision .vision-chat-provider[hidden]{display:none}
#vision .vision-chat .is-typing::after{content:"";position:absolute;right:-.12em;top:.17em;width:1px;height:.85em;background:currentColor;opacity:.6}
#vision .vision-chat.is-changing{opacity:0}
#vision .vision-render-word{position:relative;color:transparent;white-space:nowrap}
#vision .vision-render-word::after{content:"Rendering";position:absolute;inset:0;color:var(--render-ink);animation:vision-render-letters .622222s step-end infinite;animation-play-state:inherit}
#vision .vision-render-dots{letter-spacing:.22em;opacity:.65}
#vision .vision-motion{animation-play-state:paused}
#vision:has(.vision-slides.is-running) .vision-motion{animation-play-state:running}
#vision .digital-corners{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none;color:#ffffff52;font:10px/1.8 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.14em}
#vision .digital-corner{position:absolute}
#vision .digital-top-left,#vision .digital-top-right{top:148px}
#vision .digital-top-left{top:calc(var(--vision-chat-top) + var(--vision-chat-size) * 6.2 + 22px)}
#vision .digital-bottom-left,#vision .digital-bottom-right{bottom:76px}
#vision .digital-top-left,#vision .digital-bottom-left{left:var(--gutter)}
#vision .digital-top-right,#vision .digital-bottom-right{right:var(--gutter);text-align:right}
#vision .digital-corner::before{content:"";display:block;width:15px;height:3px;margin-bottom:7px;border-top:1px solid currentColor;opacity:.6}
#vision .digital-top-right::before,#vision .digital-bottom-right::before{margin-left:auto}
#vision .digital-matrix{display:block;min-height:1.6em;font-size:9px;line-height:1.6;letter-spacing:.18em;opacity:.7}
#vision .digital-matrix::after{content:"A7 01 F0 2B";display:block;animation:vision-matrix-letters .8s step-end infinite;animation-play-state:paused}
#vision:has(.vision-slides.is-running) .is-active .digital-matrix::after{animation-play-state:running}
#vision .digital-top-right .digital-matrix::after{animation-delay:-.2s}
#vision .digital-bottom-left .digital-matrix::after{animation-delay:-.4s}
#vision .digital-bottom-right .digital-matrix::after{animation-delay:-.6s}
@keyframes vision-orbit-turn{to{transform:rotate(360deg)}}
@keyframes vision-render-letters{
  0%,65%,100%{content:"Rendering"}
  47%{content:"Render1ng"}
}
@keyframes vision-matrix-letters{
  0%,61.5%,100%{content:"A7 01 F0 2B"}
  48%{content:"A7 01 F_ 2B"}
}