:root {
  --wall:#DCDEE1; --ink:#1B1C1F; --paper:#F2F2F0; --chrome:#2A2C30;
  --panel:#34373C; --line:#4A4D54; --muted:#A9ACB1; --dim:#565960; --live:#F0443A;
  --ui:'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --display:'Segoe UI Variable Display','Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Cascadia Mono',Consolas,ui-monospace,monospace;
}
* { box-sizing:border-box }
[hidden] { display:none!important }
html { scroll-behavior:smooth; scroll-padding-top:32px }
body { margin:0; background:var(--wall); color:var(--ink); font:16px/1.5 var(--ui); -webkit-font-smoothing:antialiased }
a { color:inherit }
button,input { font:inherit }
button,a,summary { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
button:disabled { cursor:wait }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:var(--display) }
button { color:inherit }
a,button,input,summary { outline-offset:5px }
:focus-visible { outline:2px solid currentColor; outline-offset:5px }
::selection { background:var(--ink); color:var(--paper) }
.wrap { width:min(1184px,calc(100% - 96px)); margin-inline:auto }
.symbol-bank { position:absolute; width:0; height:0; overflow:hidden }
.skip { position:fixed; z-index:20; top:-80px; left:24px; background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:6px }
.skip:focus { top:12px }
.nav { height:92px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #1b1c1f26 }
.logo { display:block; width:105px; height:auto }
.nav nav { display:flex; align-items:center; gap:30px }
.nav-link { font-size:13px; font-weight:500; text-decoration:none; white-space:nowrap }
.nav-link:hover { text-decoration:underline; text-underline-offset:5px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:46px; padding:0 20px; border:1px solid transparent; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background .16s,transform .16s }
.button.dark { background:var(--ink); color:var(--paper) }
.button.dark:hover { background:#36383D; transform:translateY(-1px) }
.button.light { background:var(--paper); color:var(--ink) }
.button.light:hover { background:#DCDDDA }
.button.outline { background:transparent; border-color:#1B1C1F55 }
.button.outline:hover { background:#f2f2f066 }
.button.small { min-height:40px; padding-inline:16px; font-size:13px; gap:16px }
.button.large { min-height:54px; padding-inline:22px; font-size:15px }
.icon { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.text-link { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:14px; font-weight:500; text-decoration:none }
.text-link:hover { text-decoration:underline; text-underline-offset:5px }
.text-link .icon { width:18px; transition:transform .16s }
.text-link:hover .icon { transform:translateX(3px) }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:10px; line-height:1.4; font-weight:650; letter-spacing:.13em }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--live); flex-shrink:0 }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; gap:48px; padding:68px 0 78px }
.hero h1 { font-size:clamp(60px,6.8vw,94px); line-height:1.02; font-weight:650; letter-spacing:-.055em; margin-top:22px }
.intro { max-width:480px; margin-top:24px; font-size:18px; line-height:1.65; color:var(--dim) }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:30px }
.availability { margin-top:15px; font-size:12px; color:var(--dim) }
.hero-signature { display:flex; flex-direction:column; align-items:center; gap:28px; padding-top:12px }
.power-mark { width:208px; aspect-ratio:1; position:relative; border-radius:23%; background:var(--ink) }
.power-display { position:absolute; left:27.083%; top:21.875%; width:45.833%; height:28.125%; border-radius:7px; background:var(--paper); animation:screen-power 5.6s ease-in-out infinite; transform-origin:center }
.power-stem { position:absolute; left:42.708%; top:58.333%; width:14.583%; height:20.833%; background:var(--paper) }
.signature-caption { display:flex; align-items:center; gap:8px; font:10px var(--mono); color:var(--dim); white-space:nowrap }
@keyframes screen-power {
  0%,18% { transform:scaleY(1); background:var(--paper) }
  24% { transform:scaleY(0); background:var(--paper) }
  24.01% { transform:scaleY(0); background:var(--live) }
  32%,66% { transform:scaleY(1); background:var(--live) }
  72% { transform:scaleY(0); background:var(--live) }
  72.01% { transform:scaleY(0); background:var(--paper) }
  80%,100% { transform:scaleY(1); background:var(--paper) }
}
.showcase-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px }
.showcase-heading h2 { font-size:32px; line-height:1.15; font-weight:600; letter-spacing:-.035em; margin-top:9px }
.demo-tabs { display:flex; align-items:center; gap:4px; padding:4px; border:1px solid #1b1c1f2e; border-radius:9px; flex-shrink:0 }
.demo-tabs button { min-height:36px; padding:0 17px; border:0; border-radius:6px; background:transparent; color:var(--dim); font-size:12px; font-weight:500; transition:background .15s,color .15s }
.demo-tabs button[aria-selected=true] { color:var(--paper); background:var(--ink) }
.demo-tabs button:hover:not([aria-selected=true]) { background:#1b1c1f0b; color:var(--ink) }
.app-preview { background:var(--chrome); color:var(--paper); border:1px solid #43454B; border-radius:14px; overflow:hidden; box-shadow:0 24px 60px -30px #1115,0 3px 6px #1111 }
.window-bar { display:flex; align-items:center; gap:16px; height:34px; padding:0 15px; background:#1C1D20; color:#9DA0A5; font-size:10px }
.window-dots { display:flex; gap:6px }
.window-dots i { width:8px; height:8px; border:1px solid #55575D; background:#36383D; border-radius:50% }
.window-state { margin-left:auto; display:flex; gap:7px; align-items:center; font-size:9px }
.window-state .live-dot { width:4px; height:4px }
.session-top { height:72px; display:flex; align-items:center; gap:20px; padding:0 22px }
.preview-logo { width:68px; height:auto; filter:invert(.95) }
.session-context { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; border-left:1px solid var(--line); padding-left:20px; font-size:12px }
.session-context strong { font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis }
.session-context>span { font-size:10px; color:var(--muted) }
.session-people { display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); white-space:nowrap }
.session-people .icon { width:15px; height:15px }
.preview-invite { display:flex; gap:9px; align-items:center; border:1px solid var(--line); border-radius:7px; min-height:36px; padding:0 13px; font-size:11px; white-space:nowrap }
.preview-invite .icon { width:14px; height:14px }
.preview-account { display:flex; gap:9px; align-items:center; font-size:12px }
.preview-account>.icon { width:12px; height:12px; color:var(--muted) }
.avatar { display:inline-grid; place-items:center; height:28px; width:28px; border-radius:50%; font-size:12px; font-weight:650; color:var(--ink); flex-shrink:0 }
.avatar-you { background:#C8BBA7 }
.avatar-bia { background:#D5A16A }
.avatar-caio { background:#9CAF9B }
.demo-panel:focus-visible { outline-offset:-3px }
.demo-viewer { display:grid; grid-template-columns:minmax(0,1fr) 174px; gap:12px; padding:0 14px }
.video-illustration { position:relative; height:420px; background:#142427; overflow:hidden; isolation:isolate; border-radius:9px }
.video-illustration[data-scene=caio] { background:#20243B }
.video-illustration:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,#576f493b,transparent 65%),linear-gradient(120deg,#07161980,transparent 60%) }
.scene-grid { position:absolute; inset:-100%; opacity:.35; background:repeating-linear-gradient(0deg,transparent 0 69px,#6d8e7c33 70px 71px),repeating-linear-gradient(90deg,transparent 0 69px,#6d8e7c33 70px 71px); transform:rotate(-30deg) skewX(30deg) scaleY(.8) }
.scene-platform { position:absolute; transform:rotate(-30deg) skewX(30deg) scaleY(.8); border:2px solid #537561; background:#263e37; box-shadow:10px 12px 0 #102421,11px 13px 0 #3d5f50 }
.platform-one { width:270px; height:270px; left:29%; top:85px; background:repeating-linear-gradient(0deg,transparent 0 28px,#64806538 29px 30px),repeating-linear-gradient(90deg,#354e3d 0 28px,#6480655c 29px 30px) }
.platform-two { width:125px; height:125px; left:5%; top:135px }
.platform-three { width:190px; height:130px; right:-10px; top:30px }
.scene-arch { position:absolute; height:144px; width:104px; border:16px solid #608073; border-bottom:0; border-radius:58px 58px 0 0; transform:skewY(-20deg); box-shadow:6px 0 #213c35,9px -3px #344e42; opacity:.8 }
.arch-one { left:11%; top:65px }
.arch-two { right:11%; top:125px; width:74px; height:110px; border-width:12px; opacity:.7 }
.scene-player { position:absolute; left:51%; top:49%; height:62px; width:29px; transform:rotate(18deg); background:linear-gradient(90deg,#bbb078 30%,#d9cda0 30% 70%,#60795c 70%); clip-path:polygon(30% 0,75% 0,80% 23%,100% 45%,70% 55%,95% 100%,38% 85%,10% 100%,28% 58%,0 40%,20% 25%); filter:drop-shadow(0 4px 4px black) }
.scene-crystal { position:absolute; background:#8ebbb1; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); width:10px; height:22px }
.crystal-one { top:40%; left:38% }
.crystal-two { top:68%; left:69%; background:#c3a65f }
[data-scene=caio] .scene-platform,[data-scene=caio] .scene-arch,[data-scene=caio] .scene-grid { filter:hue-rotate(95deg) }
[data-scene=caio] .scene-player { left:38%; top:40%; transform:rotate(-12deg) }
.game-status { position:absolute; left:19px; top:15px; display:flex; align-items:center; gap:5px }
.game-status span { font-size:24px; color:#d1b86a; margin-right:2px }
.game-status i { height:5px; width:34px; border-radius:1px; background:#acbd8a; box-shadow:0 0 0 2px #121d20 }
.game-status i:last-child { width:18px; opacity:.6 }
.scene-map { position:absolute; right:16px; top:16px; width:60px; height:60px; border:1px solid #8fb3a14a; background:#101c2170 }
.scene-map i { position:absolute; width:14px; height:14px; border:1px solid #afc4a8; transform:rotate(45deg); left:10px; top:19px }
.scene-map i:nth-child(2) { left:29px; top:10px }
.scene-map i:nth-child(3) { left:29px; top:31px }
.track-label { position:absolute; bottom:14px; left:14px; background:#17181AE8; padding:7px 12px 7px 8px; display:flex; gap:9px; align-items:center; font-size:12px; border-radius:8px }
.track-label .avatar { width:24px; height:24px; font-size:10px }
.track-label .live-dot { width:5px; height:5px; margin-left:4px }
.scene-label { position:absolute; bottom:23px; right:18px; font:9px var(--mono); letter-spacing:.05em; color:#cad8ce99 }
.stream-list { display:flex; flex-direction:column; gap:8px; min-width:0; padding-top:7px }
.stream-heading { color:var(--muted); padding:0 6px 4px; font-size:10px }
.stream-card { width:100%; padding:13px 12px; border:1px solid var(--line); border-radius:8px; background:transparent; text-align:left; transition:background .15s,border-color .15s }
.stream-card.selected { border-color:#dadbda; background:var(--panel) }
.stream-card:hover { background:var(--panel) }
.stream-person { display:flex; gap:10px; align-items:center; font-size:12px; font-weight:500 }
.stream-status { display:flex; align-items:center; gap:6px; margin-top:12px; font-size:9px; color:var(--muted) }
.stream-status .live-dot { width:4px; height:4px }
.stream-note { margin-top:auto; padding:16px 8px 6px; font-size:10px; line-height:1.7; color:#8F939B }
.preview-controls { height:66px; display:flex; align-items:center; gap:18px; padding:0 20px; font-size:11px }
.illustrated-volume { display:flex; gap:12px; align-items:center; color:var(--muted) }
.illustrated-volume>.icon { width:17px; height:17px; color:var(--paper) }
.illustrated-volume>i { position:relative; display:block; width:76px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--paper) 75%,var(--line) 75%) }
.illustrated-volume>i:after { content:''; position:absolute; top:-3px; left:71%; width:9px; height:9px; border-radius:50%; background:var(--paper) }
.illustrated-volume>span { font-size:9px }
.preview-hint { color:var(--muted); font-size:10px }
.preview-action { display:flex; gap:9px; align-items:center; justify-content:center; min-height:36px; padding:0 13px; margin-left:auto; background:var(--paper); color:var(--ink); border:1px solid var(--paper); border-radius:7px; font-size:11px; font-weight:500; white-space:nowrap }
.preview-action:hover { background:#DCDDDA }
.preview-action .icon { width:15px; height:15px }
.preview-action.stop { color:#FF6F65; background:transparent; border-color:#F0443A80 }
.preview-action.stop:hover { background:#F0443A15 }
.broadcast-illustration { height:420px; margin:0 14px; padding:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#17181A; text-align:center }
.broadcast-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:16px; color:var(--live); background:#F0443A12; margin-bottom:24px }
.broadcast-icon .icon { width:30px; height:30px }
.broadcast-illustration h3 { font-size:25px; line-height:1.25; font-weight:600; letter-spacing:-.025em }
.broadcast-illustration p { margin-top:20px; font-size:13px; color:var(--muted) }
.broadcast-illustration>span:last-child { font-size:12px; line-height:1.6; color:var(--muted); margin-top:22px }
.live-label { display:flex; align-items:center; gap:7px; height:28px; padding:0 10px; color:#FF766C; background:#F0443A22; border-radius:5px; font-size:10px; font-weight:650; letter-spacing:.03em }
.camera-rail { display:grid; grid-template-columns:minmax(0,1fr) 132px 132px; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid var(--line); background:#24262A }
.camera-rail-copy { min-width:0 }
.camera-rail-copy strong { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:500 }
.camera-rail-copy .icon { width:17px; height:17px; color:var(--muted) }
.camera-rail-copy p { margin-top:6px; color:var(--muted); font-size:10px }
.camera-tile { position:relative; min-width:0; height:82px; border-radius:7px; overflow:hidden; background:#655447 }
.camera-caio { background:#455B60 }
.camera-portrait { position:absolute; left:50%; bottom:0; width:76px; height:78px; transform:translateX(-50%) }
.camera-portrait i { position:absolute; top:4px; left:25px; width:27px; height:32px; background:#D5A16A; border-radius:45% 45% 50% 50%; border-top:8px solid #302923; transform:rotate(7deg) }
.camera-portrait b { position:absolute; bottom:-12px; left:5px; width:67px; height:52px; background:#283E42; border-radius:30px 30px 0 0 }
.camera-caio .camera-portrait i { background:#D0A58A; border-top-color:#332D2B; transform:rotate(-5deg) }
.camera-caio .camera-portrait b { background:#9CAF9B }
.camera-label { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; gap:6px; padding:5px 8px; background:#17181AC9; font-size:9px }
.camera-label .icon { width:12px; height:12px }
.camera-label .live-dot { margin-left:auto; width:4px; height:4px }
.showcase-caption { display:flex; justify-content:space-between; gap:20px; margin-top:17px; font-size:10px; color:var(--dim) }
.section { margin-top:108px }
.how { display:grid; grid-template-columns:1fr 1.18fr; gap:90px; border-top:1px solid #1b1c1f36; padding-top:56px }
h2 { font-size:clamp(36px,4.1vw,54px); line-height:1.08; letter-spacing:-.045em; font-weight:600 }
.section-intro h2 { margin-top:22px }
.section-intro>p:not(.eyebrow) { margin-top:22px; color:var(--dim); font-size:16px; line-height:1.65 }
.section-intro .text-link { margin-top:24px }
.section-intro>.access-note { max-width:31ch; margin-top:13px!important; font-size:11px!important; line-height:1.7!important }
.steps { list-style:none; padding:0; margin:0 }
.steps li { display:grid; grid-template-columns:36px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid #1b1c1f25 }
.steps li:first-child { padding-top:0 }
.step-number { color:var(--dim); font:12px var(--mono); padding-top:6px }
.steps h3 { font-size:22px; font-weight:600; line-height:1.2; letter-spacing:-.025em }
.steps p { max-width:47ch; margin-top:10px; color:var(--dim); font-size:14px; line-height:1.7 }
.manual-note { display:flex; gap:18px; margin-top:28px; padding:22px; border:1px solid #1b1c1f2a; border-radius:10px; background:#F2F2F025 }
.manual-note>.icon { margin-top:2px; width:18px; height:18px }
.manual-note h3 { font-size:15px; font-weight:600; letter-spacing:-.015em }
.manual-note p { margin-top:8px; font-size:12px; line-height:1.7; color:var(--dim) }
.manual-note a { display:inline-block; margin-top:13px; font-size:12px; font-weight:500; text-underline-offset:4px }
.details-heading { display:flex; align-items:baseline; justify-content:space-between; gap:28px; margin-bottom:38px }
.details-heading h2 { font-size:36px }
.feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px }
.feature-art { height:174px; border-radius:10px; background:#CFD1D5; margin-bottom:28px; position:relative; overflow:hidden }
.feature-number { font:10px var(--mono); color:var(--dim); letter-spacing:.06em }
.feature-grid h3 { margin-top:14px; font-size:24px; line-height:1.17; font-weight:600; letter-spacing:-.03em }
.feature-grid p { margin-top:14px; font-size:14px; line-height:1.7; color:var(--dim); max-width:34ch }
.window-art { display:grid; place-items:center }
.back-window { position:absolute; width:135px; height:90px; border:1px solid #999DA5; border-radius:8px; transform:translate(-23px,-9px) }
.front-window { display:grid; place-items:center; position:relative; width:138px; height:92px; border:1px solid var(--line); border-radius:8px; background:var(--chrome); color:var(--paper); transform:translate(18px,12px) }
.front-window>i { position:absolute; top:0; left:0; right:0; height:18px; border-bottom:1px solid var(--line) }
.front-window>.icon { width:28px; height:28px; margin-top:12px }
.front-window b { display:grid; place-items:center; position:absolute; right:-11px; bottom:-9px; width:25px; height:25px; border-radius:6px; background:var(--paper); color:var(--ink); border:1px solid #B8BAC0 }
.front-window b .icon { width:16px; height:16px }
.front-window .window-camera { width:44px; height:34px; right:-16px; background:var(--live); color:var(--paper); border-color:var(--live) }
.front-window .window-camera .icon { width:20px; height:20px }
.sound-art { display:flex; align-items:center; justify-content:center; gap:24px; padding-bottom:18px }
.sound-art>.icon { width:28px; height:28px }
.sound-bars { display:flex; align-items:center; justify-content:center; gap:7px; height:56px }
.sound-bars i { width:5px; height:20px; background:var(--ink); border-radius:3px }
.sound-bars i:nth-child(2),.sound-bars i:nth-child(8) { height:32px }
.sound-bars i:nth-child(3),.sound-bars i:nth-child(7) { height:45px }
.sound-bars i:nth-child(4),.sound-bars i:nth-child(6) { height:28px }
.sound-bars i:nth-child(5) { height:58px; background:var(--live) }
.sound-art>span { position:absolute; bottom:27px; font:9px var(--mono); letter-spacing:.06em; color:var(--dim) }
.quality-art { padding:28px 28px 20px; display:flex; justify-content:center; flex-direction:column; gap:14px }
.quality-art>span { display:flex; gap:9px; align-items:center; font-size:11px }
.quality-art>span .icon { width:16px; height:16px }
.quality-art>div { display:flex; align-items:center; gap:10px; padding:12px 13px; color:var(--paper); background:var(--chrome); border-radius:7px; font-size:12px }
.quality-art b { font-weight:500 }
.quality-art>div>span { color:var(--muted); font-size:10px }
.quality-art i { margin-left:auto; display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--paper); color:var(--ink) }
.quality-art i .icon { width:11px; height:11px }
.quality-art small { font:9px var(--mono); color:var(--dim); white-space:nowrap }
.join-section { margin-top:104px; display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:70px; padding:52px; color:var(--paper); background:var(--chrome); border-radius:14px }
.join-copy>.eyebrow { color:var(--muted) }
.join-copy>.eyebrow .icon { width:16px; height:16px }
.join-copy h2 { font-size:40px; margin-top:22px; letter-spacing:-.035em }
.join-copy>p:last-child { max-width:33ch; color:var(--muted); font-size:13px; line-height:1.75; margin-top:18px }
label { font-size:12px; font-weight:500; display:block; margin-bottom:12px }
.join-fields { display:flex; gap:10px; align-items:stretch }
input { min-width:0; width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:7px; background:#1D1F22; color:var(--paper); font:13px var(--mono); letter-spacing:.04em }
input::placeholder { color:#92969F }
input:focus-visible { outline:2px solid var(--paper); outline-offset:3px }
input[aria-invalid=true] { border-color:#FF9C8D }
.join-fields .button { flex-shrink:0; min-height:48px; font-size:13px; padding-inline:16px; gap:12px }
.field-error { min-height:20px; margin-top:10px; color:#FFB5A9; font-size:11px; line-height:1.6 }
.join-help { color:var(--muted); font-size:11px; margin-top:6px }
.join-help a { color:var(--paper); text-underline-offset:3px }
.download-section { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; padding:96px 0 }
.download-section h2 { margin-top:22px; font-size:58px }
.download-section>div>p:not(.eyebrow) { margin-top:20px; font-size:16px; line-height:1.7; color:var(--dim) }
.download-section .button { margin-top:28px }
.download-platform { display:block; font-size:11px; color:var(--dim); margin-top:13px }
.download-file { justify-self:end; width:100%; max-width:430px; border-top:1px solid #1b1c1f40; border-bottom:1px solid #1b1c1f40; padding:27px 0 17px }
.file-heading { display:flex; align-items:center; gap:16px }
.file-heading img { width:50px; height:50px }
.file-heading>div { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0 }
.file-heading strong { font:14px var(--mono) }
.file-heading span { color:var(--dim); font-size:11px; line-height:1.5 }
.file-heading>.icon { width:20px; height:20px; margin-left:12px }
.download-file details { border-top:1px solid #1b1c1f22; margin-top:24px; padding-top:16px }
.download-file summary { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:12px; cursor:pointer; list-style:none }
.download-file summary::-webkit-details-marker { display:none }
.download-file summary .icon { width:14px; height:14px }
.download-file details[open] summary .icon { transform:rotate(180deg) }
.download-file details p { margin-top:16px; font-size:12px; line-height:1.8; color:var(--dim) }
.site-footer { border-top:1px solid #1b1c1f35; padding:28px 0 35px; display:flex; align-items:center; gap:24px; color:var(--dim); font-size:11px }
.footer-logo { width:78px }
.site-footer a { text-decoration:none }
.site-footer a:hover { text-decoration:underline; text-underline-offset:4px }
.author-link { margin-left:auto }
.author-link strong { color:var(--ink); font-weight:600 }
.back-top { margin-left:16px; white-space:nowrap }
/* Shared invitation and status pages. */
.invite { padding:90px 0 100px; min-height:calc(100svh - 92px) }
.invite h1 { font-size:clamp(38px,5vw,64px); line-height:1.08; letter-spacing:-.04em; margin:22px 0; font-weight:600 }
.invite-description { font-size:18px; line-height:1.65; color:var(--dim); max-width:50ch }
.code-boxes { display:flex; gap:clamp(8px,2vw,18px); max-width:650px; margin:38px 0 34px }
.code-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(3px,.6vw,7px); min-width:0; flex:1 }
.code-group>span { font:500 clamp(18px,3vw,34px)/1 var(--mono); aspect-ratio:.74; display:grid; place-items:center; border:1px solid #adb0b8; background:#c9cbd0; border-radius:6px }
.copy-row { display:flex; align-items:center; gap:16px; margin:26px 0 20px }
.copy-row .button { font-size:13px }
#copy-status { font-size:13px; color:var(--dim) }
.dim { color:var(--dim); font-size:14px }
.mobile-only { display:none }
.message h1 { max-width:18ch }
.message .button { margin-top:32px }
@media(max-width:1100px) {
  .wrap { width:calc(100% - 72px) }
  .hero { grid-template-columns:minmax(0,1fr) 210px; gap:32px; padding-block:60px }
  .power-mark { width:176px }
  .hero h1 { font-size:76px }
  .signature-caption { font-size:9px }
  .session-top { gap:15px; padding-inline:18px }
  .session-context { padding-left:15px }
  .preview-invite { display:none }
  .video-illustration,.broadcast-illustration { height:360px }
  .demo-viewer { grid-template-columns:minmax(0,1fr) 155px }
  .platform-one { width:230px; height:230px; left:25%; top:65px }
  .how { gap:60px }
  .join-section { padding:38px; gap:36px }
  .join-fields { flex-wrap:wrap }
  .join-fields .button { width:100% }
  .join-fields input { min-height:48px }
  .feature-grid { gap:24px }
  .quality-art { padding-inline:20px }
  .details-heading { display:block }
  .details-heading h2 { margin-top:20px }
  .site-footer { gap:20px }
  .site-footer>.back-top { display:none }
}
@media(max-width:760px) {
  html { scroll-padding-top:20px }
  .wrap { width:calc(100% - 40px) }
  .nav { height:76px; gap:16px }
  .logo { width:92px }
  .nav nav { gap:14px }
  .nav nav>.nav-link { display:none }
  .nav .button { font-size:11px; min-height:38px; padding-inline:12px; gap:14px }
  .nav .button .icon { width:15px; height:15px }
  .hero { position:relative; display:block; padding:46px 0 54px }
  .hero h1 { font-size:clamp(47px,9.8vw,70px); margin-top:22px; letter-spacing:-.05em }
  .hero .eyebrow { font-size:9px }
  .intro { font-size:16px; line-height:1.65; max-width:38ch; margin-top:23px }
  .hero .actions { gap:8px 22px; margin-top:26px }
  .button.large { min-height:50px; font-size:13px; padding-inline:18px; gap:12px }
  .hero .text-link { font-size:12px }
  .availability { font-size:10px; margin-top:12px }
  .hero-signature { position:absolute; right:0; top:39px; padding:0 }
  .power-mark { width:46px; border-radius:23% }
  .power-display { border-radius:2px }
  .signature-caption { display:none }
  .showcase-heading { display:block; margin-bottom:18px }
  .showcase-heading .eyebrow { font-size:9px }
  .showcase-heading h2 { font-size:29px; margin-top:10px }
  .demo-tabs { display:inline-flex; margin-top:20px; padding:3px; gap:3px }
  .demo-tabs button { min-height:34px; font-size:11px; padding-inline:15px }
  .app-preview { border-radius:11px }
  .window-bar { height:27px; padding-inline:10px; font-size:9px; gap:11px }
  .window-dots { gap:4px }
  .window-dots i { width:6px; height:6px }
  .window-state { font-size:8px; gap:5px }
  .session-top { height:59px; gap:12px; padding-inline:11px }
  .preview-logo { display:none }
  .session-context { border:0; padding:0; font-size:11px }
  .session-context>span { font-size:9px }
  .session-people { font-size:9px; gap:5px }
  .session-people .icon { width:12px; height:12px }
  .preview-account { gap:0 }
  .preview-account>span:not(.avatar),.preview-account>.icon { display:none }
  .preview-account .avatar { height:24px; width:24px; font-size:10px }
  .demo-viewer { grid-template-columns:1fr; gap:10px; padding-inline:9px }
  .video-illustration { height:260px; border-radius:6px }
  .platform-one { width:180px; height:180px; top:40px; left:25% }
  .platform-two { width:75px; height:75px; left:1%; top:95px }
  .platform-three { width:100px; height:80px; right:-35px; top:0 }
  .scene-arch { width:60px; height:90px; border-width:10px }
  .arch-one { left:6%; top:36px }
  .arch-two { right:7%; top:70px; width:48px; height:75px; border-width:9px }
  .scene-player { width:22px; height:44px }
  .game-status { top:9px; left:11px; gap:4px }
  .game-status span { font-size:18px }
  .game-status i { width:23px; height:4px }
  .game-status i:last-child { width:11px }
  .scene-map { width:44px; height:44px; top:11px; right:11px }
  .scene-map i { width:10px; height:10px; top:13px; left:6px }
  .scene-map i:nth-child(2) { top:6px; left:21px }
  .scene-map i:nth-child(3) { top:23px; left:21px }
  .track-label { left:10px; bottom:10px; font-size:10px; padding:5px 9px 5px 6px; gap:7px; border-radius:6px }
  .track-label .avatar { width:20px; height:20px; font-size:9px }
  .scene-label { font-size:7px; bottom:20px; right:11px }
  .stream-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:0; min-height:68px }
  .stream-heading,.stream-note { display:none }
  .stream-card { padding:9px; border-radius:6px }
  .stream-person { gap:7px; font-size:10px }
  .stream-person .avatar { width:22px; height:22px; font-size:9px }
  .stream-status { margin-top:7px; font-size:8px; gap:5px }
  .preview-controls { height:59px; gap:9px; padding-inline:11px }
  .preview-hint { display:none }
  .illustrated-volume { gap:8px }
  .illustrated-volume>.icon { width:15px; height:15px }
  .illustrated-volume>i { width:42px }
  .illustrated-volume>span { display:none }
  .preview-action { min-height:34px; padding-inline:10px; gap:7px; font-size:10px }
  .preview-action .icon { width:13px; height:13px }
  .broadcast-illustration { height:338px; padding:28px 20px; margin:0 9px; border-radius:6px }
  .broadcast-illustration h3 { font-size:21px }
  .broadcast-illustration p { font-size:12px; margin-top:16px }
  .broadcast-illustration>span:last-child { font-size:10px; margin-top:18px; max-width:30ch }
  .broadcast-icon { width:54px; height:54px; margin-bottom:22px; border-radius:13px }
  .broadcast-icon .icon { width:26px; height:26px }
  .live-label { font-size:9px; padding-inline:9px; height:27px }
  .camera-rail { grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px 10px; gap:10px }
  .camera-rail-copy { grid-column:1/-1 }
  .camera-rail-copy strong { font-size:11px }
  .camera-rail-copy p { font-size:9px; margin-top:4px }
  .showcase-caption { margin-top:13px; font-size:9px }
  .showcase-caption>span:last-child { display:none }
  .section { margin-top:68px }
  .how { grid-template-columns:1fr; gap:34px; padding-top:34px }
  .section-intro h2 { font-size:42px; margin-top:18px }
  .section-intro>p:not(.eyebrow) { font-size:14px; margin-top:18px }
  .section-intro .text-link { margin-top:15px; font-size:13px }
  .section-intro>.access-note { max-width:38ch; margin-top:8px!important }
  .steps li { grid-template-columns:29px 1fr; gap:15px; padding-block:22px }
  .steps h3 { font-size:20px }
  .steps p { font-size:13px }
  .step-number { font-size:11px }
  .manual-note { padding:19px; margin-top:24px; gap:14px }
  .manual-note h3 { font-size:14px }
  .details-heading { margin-bottom:28px }
  .details-heading h2 { font-size:34px; max-width:15ch; margin-top:18px }
  .feature-grid { grid-template-columns:1fr; gap:36px }
  .feature-art { height:168px; margin-bottom:20px }
  .feature-grid h3 { font-size:24px; margin-top:11px }
  .feature-grid h3 br { display:none }
  .feature-grid p { max-width:45ch; margin-top:11px; font-size:13px }
  .quality-art { padding-inline:max(28px,15%) }
  .quality-art small { font-size:9px }
  .join-section { grid-template-columns:1fr; gap:28px; padding:29px 24px; margin-top:64px; border-radius:12px }
  .join-copy h2 { font-size:34px; margin-top:19px }
  .join-copy>p:last-child { font-size:12px; max-width:36ch }
  .join-fields { flex-direction:column; flex-wrap:nowrap }
  .join-fields input { font-size:12px; min-height:49px }
  .join-fields .button { width:100%; min-height:46px }
  label { font-size:11px; margin-bottom:10px }
  .field-error { font-size:10px }
  .join-help { font-size:10px; line-height:1.7 }
  .download-section { grid-template-columns:1fr; gap:40px; padding:66px 0 48px }
  .download-section h2 { font-size:46px; margin-top:20px }
  .download-section>div>p:not(.eyebrow) { font-size:15px; margin-top:18px }
  .download-section .button { margin-top:24px }
  .download-file { max-width:none; padding-top:24px }
  .file-heading img { width:44px; height:44px }
  .file-heading strong { font-size:13px }
  .file-heading span { font-size:10px }
  .site-footer { flex-wrap:wrap; gap:17px 20px; padding:25px 0 30px; font-size:10px }
  .footer-logo { width:76px }
  .site-footer .author-link { margin:1px 0 0; width:100% }
  .invite { padding:54px 0 70px; min-height:calc(100svh - 76px) }
  .invite h1 { font-size:40px }
  .invite-description { font-size:16px }
  .code-boxes { margin-block:30px; gap:10px }
  .code-group { gap:4px }
  .code-group>span { border-radius:4px }
  .invite .desktop-only { display:none }
  .invite .mobile-only { display:block }
  .copy-row { display:block; margin-top:0 }
  .copy-row .button { width:100%; min-height:48px; font-size:14px }
  .copy-row #copy-status { display:block; margin-top:14px }
  .nav>.nav-link { font-size:12px }
}
@media(max-width:360px) {
  .nav .button { font-size:10px; gap:9px; padding-inline:10px }
  .hero-signature { top:38px }
  .power-mark { width:36px }
  .hero .eyebrow { font-size:8px; gap:6px }
  .hero h1 { font-size:45px }
  .hero .actions { gap:12px }
  .hero .text-link { font-size:12px }
  .join-section { padding-inline:20px }
  .join-copy h2 { font-size:30px }
  .preview-action { font-size:9px; padding-inline:9px }
  .illustrated-volume>i { width:32px }
  .stream-status { font-size:7px }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*:before,*:after { animation:none!important; transition:none!important }
  .power-display { background:var(--live) }
}