.demo-page{--bg:#07090e;--panel:#0d131b;--line:#26313c;--text:#edf2f7;--muted:#a4b2c2;--green:#6aefbd;--amber:#f4cb83;--mono:var(--font-geist-mono), monospace;--display:var(--font-display), system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.demo-page *{box-sizing:border-box}.demo-page{background:var(--bg);color:var(--text);font:16px/1.65 var(--font-geist-sans),system-ui,sans-serif;-webkit-font-smoothing:antialiased;margin:0}body:has(.demo-page dialog[open]){overflow:hidden}.demo-page button,.demo-page a{-webkit-tap-highlight-color:transparent}.demo-page button{font:inherit;cursor:pointer}.demo-page a{color:inherit;text-decoration:none}.demo-page button:focus-visible,.demo-page a:focus-visible{outline:2px solid var(--green);outline-offset:6px}.demo-page button:disabled{cursor:wait}.demo-page button[hidden],.demo-page [hidden]{display:none!important}.demo-page ::selection{background:#6aefbd40}.demo-page .shell{width:min(1320px,100% - 96px);margin-inline:auto}.demo-page .sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demo-page .hero{padding-top:70px;position:relative}.demo-page .hero:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 70%,#1c65532a,#0000 65%);width:min(1250px,100%);height:800px;position:absolute;top:60px;right:-2%}.demo-page .eyebrow{font:11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#b4c3ca;align-items:center;gap:10px;margin:0 0 24px;font-weight:500;display:flex}.demo-page .eyebrow>span{background:var(--green);width:6px;height:6px}.demo-page .hero-copy{justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:44px;display:flex}.demo-page h1,.demo-page h2,.demo-page h3,.demo-page h4,.demo-page p{margin-top:0}.demo-page h1{font:650 clamp(54px,6.6vw,96px)/1.01 var(--display);letter-spacing:-.055em;margin-bottom:0}.demo-page em{color:var(--green);font-style:normal}.demo-page .hero-description{max-width:375px;padding-bottom:5px}.demo-page .hero-description p{color:var(--muted);margin-bottom:18px;font-size:18px;line-height:1.7}.demo-page .text-link{color:var(--text);align-items:center;gap:18px;font-size:13px;display:inline-flex}.demo-page .text-link span{color:var(--green);font-size:20px;transition:transform .2s}.demo-page .text-link:hover span{transform:translateY(4px)}.demo-page .demo{scroll-margin-top:105px}.demo-page .video-frame{aspect-ratio:16/9;background:#0c1118;border:1px solid #ffffff24;border-radius:14px;position:relative;overflow:hidden;box-shadow:0 30px 90px #0006,0 0 90px #6aefbd08}.demo-page video{object-fit:contain;width:100%;height:100%;display:block}.demo-page .video-cover{width:100%;color:var(--text);text-align:left;background:linear-gradient(#03070b3d 5%,#03070b24 30%,#03070b78 62%,#03070bef);border:0;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:36px;display:flex;position:absolute;inset:0}.demo-page .video-cover:hover .play-disc{background:#b4ffdf;transform:translate(-50%,-50%)scale(1.06)}.demo-page .video-tag{font:10px var(--mono);text-transform:uppercase;letter-spacing:.15em;background:#07090ebf;border:1px solid #ffffff1c;border-radius:4px;align-self:flex-end;align-items:center;gap:10px;padding:10px 13px;display:inline-flex}.demo-page .live-dot{background:var(--green);border-radius:50%;width:5px;height:5px}.demo-page .play-disc{background:var(--green);color:#08291e;border-radius:50%;place-items:center;width:90px;height:90px;padding-left:4px;font-size:25px;transition:transform .22s,background .22s;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 12px #6aefbd16}.demo-page .video-cover-bottom{justify-content:space-between;align-items:flex-end;gap:24px;width:100%;display:flex}.demo-page .video-cover strong{font:550 clamp(24px,3vw,38px) var(--display);letter-spacing:-.03em;display:block}.demo-page .video-cover small{color:#b8c6cc;margin-top:5px;font-size:15px;display:block}.demo-page .video-duration{font:13px var(--mono);color:#c0ced1;white-space:nowrap}.demo-page .video-duration span{color:var(--green);margin-left:14px;font-size:22px}.demo-page .video-frame.has-started .video-cover{display:none}.demo-page .video-toolbar{justify-content:space-between;align-items:center;gap:20px;margin-top:22px;display:flex}.demo-page .toolbar-label{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a4b2c2;margin:0}.demo-page .chapter-list{flex-wrap:wrap;gap:6px;display:flex}.demo-page .chapter-list button{color:#cbd4df;background:0 0;border:1px solid #ffffff0d;border-radius:6px;align-items:center;gap:11px;padding:9px 13px;font-size:12px;transition:border-color .2s,background .2s;display:flex}.demo-page .chapter-list button>span{font:10px var(--mono);color:#a4b2c2}.demo-page .chapter-list time{font:10px var(--mono);color:#a4b2c2;margin-left:12px}.demo-page .chapter-list button:hover,.demo-page .chapter-list button[aria-pressed=true]{color:var(--green);background:#6aefbd0b;border-color:#6aefbd60}.demo-page .chapter-list button[aria-pressed=true]>span{color:var(--green)}.demo-page .demo-caption{color:#9eaab9;max-width:810px;margin:20px 0 0;font-size:12px;line-height:1.8}.demo-page .architecture{background:linear-gradient(#0d151c66,#0000 600px);border-top:1px solid #ffffff10;margin-top:116px;padding-top:90px}.demo-page .architecture-intro h2{font:550 clamp(36px,4.2vw,58px)/1.1 var(--display);letter-spacing:-.04em;margin-bottom:22px}.demo-page .architecture-intro>p:last-child{color:var(--muted);margin:0;font-size:17px}.demo-page .diagram-nav{border-block:1px solid var(--line);grid-template-columns:repeat(2,1fr);margin-top:44px;display:grid}.demo-page .diagram-nav a{align-items:center;gap:18px;padding:18px 18px 18px 0;font-size:13px;transition:color .2s;display:flex}.demo-page .diagram-nav a>span{font:11px var(--mono);color:var(--green)}.demo-page .diagram-nav a:hover{color:var(--green)}.demo-page .diagram-section{padding:84px 0 72px;scroll-margin-top:86px}.demo-page .diagram-section+.diagram-section{border-top:1px solid #ffffff12}.demo-page .section-copy{grid-template-columns:1.1fr 1fr;align-items:end;gap:72px;margin-bottom:34px;display:grid}.demo-page .section-number{font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--green);margin-bottom:20px}.demo-page .section-copy h3{font:550 clamp(34px,3.6vw,50px)/1.08 var(--display);letter-spacing:-.04em;margin:0}.demo-page .section-copy>p{color:var(--muted);max-width:500px;margin:0 0 2px;font-size:17px;line-height:1.8}.demo-page figure{margin:0}.demo-page .diagram-image{background:var(--bg);text-align:left;border:1px solid #ffffff19;border-radius:12px;width:100%;padding:0;transition:border-color .2s;display:block;position:relative;overflow:hidden}.demo-page .diagram-image:hover{border-color:#6aefbd70}.demo-page .diagram-image img{width:100%;height:auto;display:block}.demo-page .expand-label{font:10px var(--mono);color:#dce5ef;opacity:0;background:#0d141ff2;border:1px solid #fff2;border-radius:5px;padding:6px 10px;transition:opacity .2s,transform .2s;position:absolute;bottom:16px;right:18px;transform:translateY(3px)}.demo-page .diagram-image:hover .expand-label,.demo-page .diagram-image:focus-visible .expand-label{opacity:1;transform:none}.demo-page figcaption{color:#a4b2c2;justify-content:space-between;align-items:start;gap:24px;margin-top:16px;font-size:12px;display:flex}.demo-page figcaption a{color:#d7e1e9;white-space:nowrap}.demo-page figcaption a:hover{color:var(--green)}.demo-page .principles{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:42px;display:grid}.demo-page .principles>div{border-top:1px solid #ffffff1a;padding-top:20px}.demo-page .principle-index{font:10px var(--mono);color:var(--green)}.demo-page .principles h4{letter-spacing:-.02em;margin:12px 0 7px;font-size:16px;font-weight:500}.demo-page .principles p{color:var(--muted);max-width:320px;margin-bottom:0;font-size:13px;line-height:1.8}.demo-page .connection-note{grid-template-columns:1fr 1fr;gap:72px;margin-top:30px;display:grid}.demo-page .connection-note p{color:var(--muted);max-width:550px;margin:0;font-size:13px;line-height:1.9}.demo-page .connection-note strong{color:#dce4eb;font-weight:500}.demo-page .scan-note{align-items:start;gap:20px;max-width:820px;margin-top:32px;display:flex}.demo-page .note-mark{color:var(--green);font-size:22px;line-height:1.2}.demo-page .scan-note p{color:var(--muted);margin:0;font-size:14px;line-height:1.8}.demo-page .scan-note strong{color:#dce4eb;font-weight:500}.demo-page .hunt-section .section-number{color:var(--amber)}.demo-page .hunt-note{grid-template-columns:repeat(3,1fr);gap:42px;margin-top:40px;display:grid}.demo-page .hunt-note>div{border-left:1px solid #ffffff24;padding-left:20px}.demo-page .role-label{font:10px var(--mono);color:var(--amber);letter-spacing:.11em;text-transform:uppercase}.demo-page .hunt-note>div:nth-child(2) .role-label{color:var(--green)}.demo-page .hunt-note>div:nth-child(3) .role-label{color:#c5b5ff}.demo-page .hunt-note p{font:500 23px/1.45 var(--display);letter-spacing:-.025em;margin:14px 0 0}.demo-page .planner-note{color:var(--muted);margin:28px 0 0;font-size:12px}.demo-page .closing{border-top:1px solid var(--line);padding-block:100px 108px;position:relative}.demo-page .closing h2{font:550 clamp(44px,5.6vw,76px)/1.05 var(--display);letter-spacing:-.045em;margin:0 0 32px}.demo-page .replay-button{color:var(--green);background:#6aefbd0a;border:1px solid #6aefbd60;border-radius:6px;align-items:center;gap:32px;padding:14px 20px;font-size:13px;transition:background .2s;display:flex}.demo-page .replay-button:hover{background:#6aefbd1f}.demo-page .replay-button span{font-size:20px}.demo-page .closing-actions{flex-wrap:wrap;gap:12px;display:flex}.demo-page .replay-button.primary{background:var(--green);color:#08291e;border-color:var(--green)}.demo-page .replay-button.primary:hover{background:#8af5cd}.demo-page .demo-transcript{color:#9eaab9;max-width:820px;margin-top:18px;font-size:13px;line-height:1.7}.demo-page .demo-transcript summary{cursor:pointer;color:var(--green);align-items:center;min-height:44px;font-size:13px;display:flex}.demo-page .demo-transcript ol{gap:8px;margin:6px 0 0;padding-left:0;list-style:none;display:grid}.demo-page .demo-transcript time{font-family:var(--mono);color:#c6cdd8;margin-right:10px}.demo-page .diagram-dialog{color:var(--text);background:#0b1017;border:1px solid #ffffff30;border-radius:14px;width:min(1540px,96vw);max-width:none;max-height:94dvh;padding:0;overflow:auto;box-shadow:0 24px 120px #0009}.demo-page .diagram-dialog::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#02050bef}.demo-page .dialog-toolbar{z-index:1;border-bottom:1px solid var(--line);background:#0b1017fa;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;display:flex;position:sticky;top:0}.demo-page .dialog-toolbar h2{font:500 18px var(--display);margin:0}.demo-page .dialog-toolbar>div{white-space:nowrap;align-items:center;gap:24px;display:flex}.demo-page .dialog-toolbar a{color:var(--green);font-size:12px}.demo-page .dialog-toolbar button{color:var(--text);border:1px solid var(--line);background:#ffffff08;border-radius:5px;padding:8px 13px;font-size:12px}.demo-page .dialog-toolbar button span{margin-left:16px;font-size:20px}.demo-page .dialog-image{overflow:auto}.demo-page .dialog-image img{width:100%;min-width:1300px;height:auto;display:block}.demo-page .dialog-hint{color:var(--muted);border-top:1px solid var(--line);margin:0;padding:12px 24px;font-size:11px}@media (min-width:1800px){.demo-page .hero{padding-top:84px}}@media (max-width:1000px){.demo-page .shell{width:calc(100% - 64px)}.demo-page .hero-copy{gap:28px}.demo-page .hero-description{max-width:300px}.demo-page .hero-description p{font-size:15px}.demo-page .video-cover{padding:26px}.demo-page .play-disc{width:72px;height:72px;font-size:22px}.demo-page .video-toolbar{flex-direction:column;align-items:start;gap:14px}.demo-page .section-copy{gap:40px}.demo-page .section-copy>p{font-size:15px}.demo-page .connection-note{gap:40px}.demo-page .principles{gap:28px}.demo-page .hunt-note{gap:24px}.demo-page .hunt-note p{font-size:20px}}@media (max-width:700px){.demo-page .shell{width:calc(100% - 40px)}.demo-page .hero{padding-top:42px}.demo-page .eyebrow{letter-spacing:.12em;margin-bottom:22px;font-size:9px}.demo-page .hero-copy{margin-bottom:30px;display:block}.demo-page h1{font-size:clamp(48px,11.2vw,74px);line-height:1.02}.demo-page .hero-description{max-width:420px;margin-top:26px}.demo-page .hero-description p{margin-bottom:12px;font-size:15px;line-height:1.65}.demo-page .text-link{font-size:12px}.demo-page .video-frame{border-radius:9px}.demo-page .video-cover{padding:15px}.demo-page .video-tag{letter-spacing:.08em;gap:7px;padding:6px 8px;font-size:7px}.demo-page .play-disc{width:50px;height:50px;font-size:16px;box-shadow:0 0 0 7px #6aefbd16}.demo-page .video-cover strong{font-size:21px}.demo-page .video-cover small{display:none}.demo-page .video-duration{font-size:10px}.demo-page .video-duration span{margin-left:6px;font-size:16px}.demo-page .video-toolbar{margin-top:18px}.demo-page .chapter-list{grid-template-columns:repeat(2,1fr);gap:8px;width:100%;display:grid}.demo-page .chapter-list button{justify-content:flex-start;min-height:44px;padding:10px 12px}.demo-page .chapter-list time{margin-left:auto}.demo-page .demo-caption{margin-top:16px;font-size:11px;line-height:1.8}.demo-page .architecture{margin-top:64px;padding-top:56px}.demo-page .architecture-intro h2{font-size:35px;line-height:1.12}.demo-page .architecture-intro>p:last-child{font-size:14px;line-height:1.8}.demo-page .diagram-nav{grid-template-columns:repeat(2,1fr);margin-top:30px}.demo-page .diagram-nav a{gap:12px;min-height:48px;padding:14px 0;font-size:12px}.demo-page .diagram-section{padding-block:50px;scroll-margin-top:76px}.demo-page .section-copy{grid-template-columns:1fr;gap:23px;margin-bottom:26px}.demo-page .section-number{margin-bottom:16px;font-size:9px}.demo-page .section-copy h3{font-size:36px}.demo-page .section-copy>p{max-width:480px;font-size:14px;line-height:1.85}.demo-page .diagram-image{border-radius:7px}.demo-page .expand-label{opacity:1;text-align:right;background:0 0;border:0;border-top:1px solid #ffffff0c;border-radius:0;padding:10px 12px;font-size:9px;display:block;position:static;transform:none}.demo-page figcaption{gap:16px;font-size:11px;line-height:1.7}.demo-page figcaption>span{max-width:250px}.demo-page .principles{grid-template-columns:1fr;gap:24px;margin-top:30px}.demo-page .principles>div{padding-top:14px}.demo-page .principle-index{float:left;margin-top:4px}.demo-page .principles h4{margin:0 0 6px 34px;font-size:15px}.demo-page .principles p{max-width:none;margin-left:34px;font-size:12px}.demo-page .connection-note{grid-template-columns:1fr;gap:16px;margin-top:26px}.demo-page .connection-note p{font-size:12px}.demo-page .scan-note{gap:14px;margin-top:24px}.demo-page .scan-note p{font-size:12px}.demo-page .hunt-note{grid-template-columns:1fr;gap:24px;margin-top:32px}.demo-page .hunt-note p{margin-top:9px;font-size:22px;line-height:1.4}.demo-page .hunt-note p br{display:none}.demo-page .hunt-note p br:after{content:" "}.demo-page .planner-note{font-size:11px;line-height:1.8}.demo-page .closing{padding-block:60px}.demo-page .closing h2{margin-bottom:28px;font-size:46px}.demo-page .dialog-toolbar{align-items:start;gap:14px;padding:14px}.demo-page .dialog-toolbar h2{font-size:15px;line-height:1.4}.demo-page .dialog-toolbar>div{gap:14px}.demo-page .dialog-toolbar a{font-size:10px}.demo-page .dialog-toolbar button{min-height:44px;padding:5px 10px;font-size:11px}.demo-page .dialog-toolbar button span{margin-left:8px}.demo-page .dialog-hint{padding:12px 14px;font-size:10px}.demo-page .diagram-dialog{border-radius:8px}}@media (prefers-reduced-motion:reduce){.demo-page *,.demo-page :before,.demo-page :after{transition:none!important;animation:none!important}}.demo-page .video-cover{display:none}.demo-page.is-enhanced .video-cover{display:flex}.demo-page.is-enhanced .has-started .video-cover{display:none}.demo-skip-link{z-index:100;color:#07090e;background:#6aefbd;padding:8px 16px;position:fixed;top:12px;left:12px;transform:translateY(-200%)}.demo-skip-link:focus{transform:none}.demo-page .demo-caption code{font:11px var(--mono);color:#cbd4df}