.intro-dialog{position:fixed;inset:0;margin:0;max-width:none;max-height:none;width:100vw;height:100dvh;padding:0;border:0;border-radius:0;background:#000;color:#fff;overflow:hidden;box-shadow:none;isolation:isolate;transition:background 1.35s ease}
.intro-pending .intro-dialog{display:block}
.intro-dialog::backdrop{background:#000;backdrop-filter:none;transition:background 1.35s ease}
.intro-pending .header,.intro-pending main,.intro-pending body>footer,.intro-playing:not(.intro-landing) .header,.intro-playing:not(.intro-landing) main,.intro-playing:not(.intro-landing) body>footer{opacity:0}
.intro-playing{overflow:hidden}.intro-playing body{overflow:hidden}
.intro-landing .header,.intro-landing main,.intro-landing body>footer{transition:opacity 1.25s ease;opacity:1}
.intro-top{position:absolute;inset:0 0 auto;z-index:8;display:flex;justify-content:space-between;align-items:center;padding:23px 34px;transition:opacity .6s}
.intro-brand{display:flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-.6px;font-weight:600}.intro-brand img{width:28px;height:28px}

.intro-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:85px 26px 66px}
.intro-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:23px;background:radial-gradient(ellipse at center,#0a1b21 0,transparent 52%)}
.intro-boot-icon{position:relative;width:75px;height:75px;display:grid;place-items:center}.intro-boot-icon::before{content:"";position:absolute;inset:-12px;border:1px solid #ffffff14;border-top-color:#b4fff1;border-right-color:#b4fff13a;border-radius:50%;animation:intro-orbit 1.9s linear infinite}.intro-boot-icon img{width:68px;height:68px}
.intro-loader>p{color:#edf9fa;font-size:12px;letter-spacing:2px;margin:4px 0 0}.intro-boot-line{width:115px;height:2px;background:#ffffff14;overflow:hidden;border-radius:2px}.intro-boot-line::after{content:"";display:block;height:100%;width:50%;background:#d1fff7;box-shadow:0 0 12px #99fff6;animation:intro-load 1.2s ease-in-out infinite}
.intro-scene{width:min(620px,100%);margin:auto;position:relative;animation:intro-scene-in .6s ease;transition:opacity .55s,transform .85s}
.intro-scene-title{font-size:26px;letter-spacing:-1.3px;font-weight:600;display:flex;align-items:center;gap:11px;margin-bottom:29px}.intro-scene-title>span{width:1px;height:17px;background:#ffffff2b;margin-left:2px}.intro-scene-title>small{font:8px ui-monospace,monospace;letter-spacing:1.7px;color:#8f95a2}
.intro-message{display:grid;grid-template-columns:33px minmax(0,1fr);gap:12px;margin-bottom:23px;animation:intro-scene-in .4s ease both}
.intro-avatar{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:#202228;border:1px solid #ffffff24;font-size:10px;font-weight:650;letter-spacing:-.3px}.intro-avatar-grok{background:#060809}.intro-avatar img{width:28px;height:28px}
.intro-message-name{font-size:11px;line-height:1.3;font-weight:600;color:#fff;display:block;margin:1px 0 8px}.intro-message p{font-size:15px;line-height:1.65;color:#e8e9ed;margin:0;min-height:25px;white-space:pre-wrap}.intro-message-grok p{color:#d5d8df}
.intro-cursor::after{content:"";display:inline-block;width:2px;height:1em;vertical-align:-2px;background:#b4fff1;margin-left:3px;animation:intro-blink .65s steps(2) infinite}
.intro-thinking{display:flex;align-items:center;gap:5px;height:25px}.intro-thinking i{height:5px;width:5px;background:#ddd;border-radius:50%;animation:intro-think 1s ease-in-out infinite}.intro-thinking i:nth-child(2){animation-delay:.15s}.intro-thinking i:nth-child(3){animation-delay:.3s}
.intro-reveal{position:relative;margin:7px auto 0;width:clamp(150px,24vw,210px);animation:intro-image-in .65s cubic-bezier(.2,.7,.3,1) both}
.intro-frame{position:relative;border:1px solid #a7d8ef4a;border-radius:13px;padding:4px;background:#131a24;box-shadow:0 0 50px #3b8dbd20,0 20px 60px #0008;isolation:isolate}
.intro-frame::after{content:"";position:absolute;inset:-5px;border:1px solid #9bfff140;border-radius:16px;pointer-events:none;opacity:0}
.intro-frame img{display:block;width:100%;height:auto;aspect-ratio:784/1168;object-fit:contain;border-radius:9px;transition:opacity .35s,filter .35s}
.intro-image-label{position:absolute;bottom:13px;left:13px;right:13px;display:flex;justify-content:space-between;align-items:center;color:#fff;font:7px ui-monospace,monospace;letter-spacing:1.1px;text-shadow:0 2px 6px #000;pointer-events:none}.intro-image-label>span:first-child{background:#071421a8;padding:5px 6px;border-radius:4px;backdrop-filter:blur(8px)}
.intro-reveal.is-opening .intro-frame img{opacity:.1;filter:blur(5px)}.intro-reveal.is-opening .intro-frame::after{animation:intro-portal .7s ease-out both}.intro-reveal.is-opening .intro-image-label{opacity:0}

.intro-footer{position:absolute;bottom:22px;left:20px;right:20px;display:flex;justify-content:center;align-items:center;gap:9px;color:#7c838f;font-size:9px;letter-spacing:.1px;transition:opacity .5s}.intro-footer span:first-child{width:3px;height:3px;border-radius:50%;background:#9ca5b7}
.intro-flyer{position:fixed;z-index:15;object-fit:contain;pointer-events:none;transform-origin:center;filter:drop-shadow(0 0 25px #67f5ed4d);will-change:transform,opacity}
.intro-dialog.is-exiting,.intro-dialog.is-exiting::backdrop{background:transparent}.intro-dialog.is-exiting .intro-scene{opacity:0;transform:translateY(-18px) scale(.96)}.intro-dialog.is-exiting .intro-top,.intro-dialog.is-exiting .intro-footer{opacity:0}
#replay-intro{margin-top:20px;width:100%;font-size:11px}
@keyframes intro-orbit{to{transform:rotate(360deg)}}@keyframes intro-load{from{transform:translateX(-110%)}to{transform:translateX(220%)}}@keyframes intro-blink{50%{opacity:0}}@keyframes intro-think{50%{opacity:.3;transform:translateY(-3px)}}@keyframes intro-scene-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes intro-image-in{from{opacity:0;transform:translateY(12px) scale(.88)}to{opacity:1;transform:none}}@keyframes intro-portal{0%{opacity:0;transform:scale(1)}40%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@media(max-width:700px){.intro-top{padding:19px 20px}.intro-brand{font-size:16px}.intro-brand img{width:25px;height:25px}.intro-scroll{padding:80px 22px 65px}.intro-scene-title{font-size:24px;margin-bottom:24px}.intro-scene-title>small{font-size:7px;letter-spacing:1.2px}.intro-message{grid-template-columns:28px minmax(0,1fr);gap:10px;margin-bottom:20px}.intro-avatar{width:28px;height:28px;font-size:9px}.intro-avatar img{width:24px;height:24px}.intro-message p{font-size:13px;line-height:1.65}.intro-message-name{font-size:10px}.intro-reveal{width:172px}.intro-footer{font-size:8px;bottom:18px}}
@media(max-height:720px){.intro-scroll{padding-top:70px;padding-bottom:48px}.intro-scene-title{margin-bottom:18px}.intro-message{margin-bottom:16px}.intro-reveal{width:145px}.intro-footer{bottom:13px}}
@media(prefers-reduced-motion:reduce){.intro-dialog,.intro-dialog::backdrop,.intro-landing .header,.intro-landing main,.intro-landing body>footer{transition:none}.intro-boot-icon::before{animation:none}.intro-cursor::after{display:none}}

/* Opposing chat positions: Elon on the right, Grok on the left. */
.intro-message-elon{width:fit-content;max-width:90%;margin-left:auto;grid-template-columns:minmax(0,1fr) 33px}
.intro-message-elon>.intro-avatar{grid-column:2;grid-row:1}
.intro-message-elon>div{grid-column:1;grid-row:1;min-width:0}
.intro-message-elon .intro-message-name{text-align:right}
.intro-message-elon p{padding:10px 14px;border:1px solid #ffffff20;border-radius:13px 3px 13px 13px;background:#ffffff0d;text-align:left}
.intro-avatar-elon{overflow:hidden;background:#15191e}
.intro-avatar-elon img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.intro-message-grok{max-width:94%;margin-right:auto}
@media(max-width:700px){.intro-message-elon{grid-template-columns:minmax(0,1fr) 28px;max-width:94%}.intro-message-elon p{padding:9px 12px}.intro-message-grok{max-width:100%}}

/* Match the portrait reveal to the landing mascot. */
.intro-frame img{aspect-ratio:1027/1531}.intro-reveal:not(.is-opening) .intro-frame{animation:intro-portrait-float 2.6s ease-in-out infinite}.intro-flying #robot-canvas .mascot-float{opacity:0;animation-play-state:paused}.intro-landing #robot-canvas .mascot-float{transition:opacity .42s ease}.header-x{display:inline-grid;place-items:center;flex-shrink:0;color:#fff;text-decoration:none}.header-x svg{width:18px;height:18px}.header-x:hover{background:#ffffff20}.header-x:focus-visible{outline:2px solid #5ce4de;outline-offset:3px}@keyframes intro-portrait-float{50%{transform:translateY(-5px) rotate(-1deg)}}@media(prefers-reduced-motion:reduce){.intro-reveal:not(.is-opening) .intro-frame{animation:none}}