:root {
  color-scheme: dark;
  --bg: #070810;
  --surface: rgba(16, 18, 31, .76);
  --surface-strong: #111322;
  --text: #f6f5fb;
  --muted: #9899aa;
  --line: rgba(255, 255, 255, .11);
  --accent: #8566ff;
  --lime: #a8ff63;
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --header: 82px;
  font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { margin: 0; background: var(--bg); scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--bg); color: var(--text); }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; background: #fff; color: #111; transform: translateY(-140%); transition: transform .2s; }
.skip-link:focus { transform: none; }
.noise { position: fixed; z-index: 50; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.pointer-light { position: fixed; z-index: 0; left: var(--pointer-x); top: var(--pointer-y); width: 440px; height: 440px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 11%, transparent); filter: blur(75px); transform: translate(-50%, -50%); pointer-events: none; transition: background .45s ease; }

.experience-header { position: fixed; z-index: 40; inset: 0 0 auto; display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; min-height: var(--header); padding: max(16px, env(safe-area-inset-top)) clamp(22px, 4vw, 68px) 14px; border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(7,8,16,.92), rgba(7,8,16,.35)); backdrop-filter: blur(16px); }
.brand { display: flex; width: fit-content; }
.brand img { display: block; width: 174px; height: auto; object-fit: contain; }
.header-progress { display: flex; justify-self: center; align-items: center; gap: 14px; width: min(420px, 45vw); color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.header-progress__track { flex: 1; overflow: hidden; height: 2px; background: rgba(255,255,255,.12); }
.header-progress__track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--accent), #79dcff); transform: scaleX(.125); transform-origin: left; transition: transform .6s cubic-bezier(.22,.8,.25,1), background .5s; }
.header-progress strong { min-width: 54px; color: #d4d3dc; font-weight: 600; }
.header-skip { justify-self: end; padding: 9px 0; border: 0; background: none; color: #d7d6df; cursor: pointer; font-size: 12px; }
.header-skip span { display: inline-block; margin-left: 7px; color: var(--accent); transition: transform .2s; }
.header-skip:hover span { transform: translate(2px,-2px); }
.experience-header-actions { display:flex; justify-self:end; align-items:center; gap:18px; }
.experience-menu-button { display:inline-flex; align-items:center; gap:8px; padding:9px 0; border:0; background:none; color:#9b9cab; cursor:pointer; font-size:12px; }
.experience-menu-button span { display:grid; place-items:center; width:20px; height:20px; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:var(--accent); transition:transform .25s,border-color .25s; }
.experience-menu-button:hover { color:#fff; }
.experience-menu-button:hover span { border-color:var(--accent); transform:rotate(90deg); }

.experience-menu { position:fixed; z-index:180; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; overflow:auto; border:0; background:#080910; color:#f6f5fb; opacity:0; clip-path:circle(0 at calc(100% - 70px) 42px); transition:clip-path .85s cubic-bezier(.2,.86,.24,1),opacity .18s; }
.experience-menu[open] { display:block; opacity:1; clip-path:circle(160vmax at calc(100% - 70px) 42px); }
.experience-menu::backdrop { background:rgba(3,4,8,.82); backdrop-filter:blur(12px); }
.experience-menu::before { content:''; position:fixed; z-index:-1; inset:0; background:radial-gradient(circle at 12% 72%,rgba(133,102,255,.17),transparent 32%),radial-gradient(circle at 86% 12%,rgba(94,219,255,.08),transparent 28%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,auto,72px 72px,72px 72px; mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.55)); }
.experience-menu > header { position:sticky; z-index:2; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:78px; padding:14px clamp(22px,4vw,68px); border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,9,16,.78); backdrop-filter:blur(20px); }
.experience-menu > header > span { color:#777986; font-size:9px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; }
.experience-menu > header button { justify-self:end; width:40px; height:40px; border:1px solid rgba(255,255,255,.14); border-radius:50%; background:rgba(255,255,255,.025); color:#dedde5; cursor:pointer; font-size:25px; line-height:1; transition:transform .25s,border-color .25s; }
.experience-menu > header button:hover { border-color:var(--accent); transform:rotate(90deg); }
.experience-menu-layout { display:grid; grid-template-columns:minmax(280px,.64fr) minmax(600px,1.36fr); gap:clamp(40px,7vw,120px); width:min(1420px,calc(100% - 96px)); min-height:calc(100svh - 78px); margin:auto; padding:clamp(54px,7vh,96px) 0 70px; }
.experience-menu-intro { align-self:stretch; display:flex; flex-direction:column; }
.experience-menu-intro small,.experience-menu-nav > div > small { color:#8d78f0; font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.experience-menu-intro h2 { max-width:600px; margin:24px 0; font-size:clamp(52px,5.5vw,88px); line-height:.9; letter-spacing:-.07em; }
.experience-menu-intro h2 em { color:var(--accent); font-style:normal; }
.experience-menu-intro p { max-width:440px; color:#8f909c; font-size:14px; line-height:1.65; }
.experience-menu-intro > a { display:flex; align-items:center; justify-content:space-between; width:min(340px,100%); margin-top:auto; padding:20px 0 12px; border-bottom:1px solid rgba(133,102,255,.45); color:#e7e4fa; font-size:13px; font-weight:750; }
.experience-menu-intro > a span { color:var(--accent); }
.experience-menu-nav { display:grid; grid-template-columns:1.18fr 1fr 1fr; gap:clamp(22px,3vw,50px); }
.experience-menu-nav > div { min-width:0; }
.experience-menu-nav > div > small { display:block; margin-bottom:26px; }
.experience-menu-nav a { position:relative; display:grid; grid-template-columns:1fr auto; gap:4px 12px; min-height:67px; align-content:center; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09); transition:padding .25s,border-color .25s; }
.experience-menu-nav a::before { content:''; position:absolute; inset:auto 0 -1px; height:1px; background:linear-gradient(90deg,var(--accent),transparent); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.experience-menu-nav a:hover { padding-left:8px; border-color:transparent; }
.experience-menu-nav a:hover::before { transform:scaleX(1); }
.experience-menu-nav b { font-size:15px; letter-spacing:-.02em; }
.experience-menu-nav span { grid-column:1; color:#71737f; font-size:9px; }
.experience-menu-nav i { grid-column:2; grid-row:1/3; align-self:center; color:#696b77; font-size:9px; font-style:normal; }
.experience-menu-nav a:hover i { color:var(--accent); }

.tour { position: relative; min-height: 800svh; }
.tour-stage { --tilt-x: 0px; --tilt-y: 0px; position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: minmax(360px, .78fr) minmax(520px, 1.22fr); align-items: center; gap: clamp(35px, 6vw, 110px); width: 100%; height: 100svh; min-height: 650px; overflow: clip; padding: calc(var(--header) + 22px) clamp(70px, 7vw, 138px) 54px; isolation: isolate; }
.stage-grid { position: absolute; z-index: -3; inset: 0; opacity: .13; background-image: linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(circle at 70% 50%,#000 0,transparent 68%); }
.ambient { position: absolute; z-index: -2; border-radius: 50%; filter: blur(85px); pointer-events: none; transition: background .8s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.ambient-a { top: 14%; right: 7%; width: 45vw; height: 45vw; background: color-mix(in srgb, var(--accent) 24%, transparent); transform: translate(var(--tilt-x),var(--tilt-y)); }
.ambient-b { bottom: -20%; left: 25%; width: 36vw; height: 36vw; background: rgba(77,174,255,.1); transform: translate(calc(var(--tilt-x) * -.5),calc(var(--tilt-y) * -.5)); }

.scene-copy { position: relative; z-index: 5; max-width: 620px; }
.scene-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; color: #c0bed0; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.scene-index { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius: 50%; color: var(--accent); }
.scene-kicker { position: relative; }
.scene-kicker::before { content: ''; display: inline-block; width: 26px; height: 1px; margin: 0 10px 3px 0; background: var(--accent); }
.scene-copy h1 { max-width: 710px; margin: 0; font-size: clamp(54px, 5.2vw, 86px); line-height: .92; letter-spacing: -.07em; text-wrap: balance; }
.scene-copy h1 em { color: var(--accent); font-style: normal; transition: color .5s ease; }
.scene-description { max-width: 600px; margin: 28px 0 0; color: #aaaabb; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.66; text-wrap: pretty; }
.scene-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 27px; }
.scene-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: #d8d7e1; font-size: 11px; backdrop-filter: blur(10px); }
.scene-facts i { color: var(--accent); font-style: normal; font-size: 8px; }
.scene-outcome { display: flex; align-items: flex-start; gap: 10px; max-width: 590px; margin: 15px 0 0; color: #b9b8c5; font-size: 11px; line-height: 1.5; }
.scene-outcome span { flex: 0 0 auto; color: var(--accent); font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.scene-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 19px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--accent); color: #090a11; box-shadow: 0 14px 44px color-mix(in srgb,var(--accent) 20%,transparent); }
.button-primary span { margin-left: 12px; }
.button-ghost { border-color: var(--line); background: rgba(255,255,255,.04); color: #eeeef3; }
.button-text { border: 0; background: transparent; color: var(--muted); }

.scene-visual { position: relative; z-index: 2; width: min(820px, 100%); aspect-ratio: 1.12; justify-self: end; perspective: 1400px; transform: translate(var(--tilt-x),var(--tilt-y)); transition: transform .22s ease-out; }
.ecosystem-caption { position: absolute; z-index: 8; top: 0; right: 2%; display: flex; align-items: center; gap: 9px; color: #d2d1da; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.ecosystem-caption span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 7px color-mix(in srgb,var(--accent) 13%,transparent),0 0 26px var(--accent); animation: caption-pulse 2.2s ease-in-out infinite; }
.ecosystem-map { position: absolute; z-index: 3; inset: 3% 0 0; transform-origin: center; transition: transform .8s cubic-bezier(.2,.9,.25,1), opacity .5s; }
.connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connections line { stroke: rgba(255,255,255,.13); stroke-width: .25; vector-effect: non-scaling-stroke; stroke-dasharray: 2 2; transition: stroke .4s, stroke-width .4s, filter .4s; animation: connection-flow 12s linear infinite; }
.connections line.is-active { stroke: var(--accent); stroke-width: .7; filter: drop-shadow(0 0 6px var(--accent)); }
.energy-packet { --packet-size: 8px; position: absolute; z-index: 4; left: 50%; top: 50%; width: var(--packet-size); height: var(--packet-size); border: 2px solid #fff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px #fff,0 0 24px var(--accent); opacity: 0; pointer-events: none; }
.tour-stage[data-mode="product"] .energy-packet, .tour-stage[data-mode="api"] .energy-packet { animation: packet-travel 2.8s cubic-bezier(.35,.02,.45,1) infinite; }
.tour-stage[data-scene="smartshell"] .energy-packet { animation-direction: alternate; }
.energy-packet.packet-b { --packet-size: 5px; animation-delay: -1.35s!important; }
.core-node, .orbit-node { position: absolute; display: grid; place-items: center; border: 0; cursor: pointer; transition: transform .55s cubic-bezier(.2,.9,.2,1), border-color .4s, background .4s, opacity .4s, box-shadow .4s; }
.core-node { left: 50%; top: 50%; width: clamp(128px, 12vw, 174px); aspect-ratio: 1; border: 1px solid color-mix(in srgb,var(--accent) 55%,transparent); border-radius: 50%; background: radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--accent) 42%,#17182a),#0d0e18 65%); transform: translate(-50%,-50%); box-shadow: 0 0 0 18px rgba(255,255,255,.018),0 30px 100px color-mix(in srgb,var(--accent) 20%,transparent); }
.core-node:hover { transform: translate(-50%,-50%) scale(1.05); }
.core-node__rings { position: absolute; inset: -28px; border: 1px solid color-mix(in srgb,var(--accent) 24%,transparent); border-radius: inherit; animation: ring-breathe 3.8s ease-in-out infinite; }
.core-node__rings::after { content:''; position:absolute; inset:-24px; border:1px solid rgba(255,255,255,.06); border-radius:inherit; }
.core-node small { position: absolute; top: 23%; color: var(--accent); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }
.core-node strong { font-size: clamp(21px,2vw,29px); line-height: .8; letter-spacing: -.06em; text-align: center; }
.core-node i { position: absolute; bottom: 22%; color: var(--lime); font-size: 8px; font-style: normal; }
.orbit-node { width: clamp(86px, 8.5vw, 122px); min-height: clamp(76px, 7.5vw, 108px); padding: 12px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: rgba(16,18,31,.72); box-shadow: 0 22px 50px rgba(0,0,0,.25); backdrop-filter: blur(14px); transform: translate(-50%,-50%); }
.orbit-node i { display: grid; place-items: center; min-width: 33px; height: 26px; margin-bottom: 7px; border-radius: 8px; background: color-mix(in srgb,var(--accent) 15%,rgba(255,255,255,.04)); color: var(--accent); font-size: 9px; font-style: normal; font-weight: 800; }
.orbit-node span { color: #e3e2ea; font-size: clamp(9px,.8vw,12px); font-weight: 700; }
.orbit-node:hover, .orbit-node.is-active { z-index: 5; border-color: var(--accent); background: color-mix(in srgb,var(--accent) 14%,#10121e); box-shadow: 0 20px 60px color-mix(in srgb,var(--accent) 20%,transparent); transform: translate(-50%,-50%) scale(1.12); }
.node-premium { left: 20%; top: 22%; }.node-gamer { left: 80%; top: 22%; }.node-kiosk { left: 88%; top: 60%; }.node-lock { left: 68%; top: 86%; }.node-api { left: 25%; top: 84%; }

.product-window, .api-window { position: absolute; z-index: 6; top: 14%; right: 0; width: 70%; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: #111420; box-shadow: 0 35px 120px rgba(0,0,0,.5); opacity: 0; transform: translate3d(80px,20px,-120px) rotateY(-9deg) scale(.9); transition: opacity .5s, transform .8s cubic-bezier(.2,.9,.25,1); pointer-events: none; }
.window-bar { display: flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: #161827; }
.window-bar > span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.23); }
.window-bar b { margin-left: 8px; color: #cac9d5; font-size: 9px; }
.window-bar > i { margin-left: auto; color: var(--lime); font-size: 8px; font-style: normal; }
.window-media { position: relative; height: clamp(280px, 32vw, 470px); overflow: hidden; background: radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 20%,#181a25),#0b0d15); }
.window-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 6s ease-out; }
.tour-stage.scene-enter .window-media img { transform: scale(1.035); }
.media-scan { position: absolute; inset: -60% 0 auto; height: 35%; background: linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 14%,transparent),transparent); animation: media-scan 4.4s ease-in-out infinite; }
.window-media::after { content:''; position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--accent) 12%,transparent); background: linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--accent) 8%,transparent) 48%,transparent 62%); background-size: 220% 100%; pointer-events:none; animation: interface-sheen 5.5s ease-in-out infinite; }
.window-status { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 0 17px; color: #e4e3e9; font-size: 10px; }
.window-status span { display: flex; align-items: center; gap: 8px; }
.window-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px var(--lime); }
.window-status strong { color: var(--accent); font-size: 11px; }
.product-window.image-error .window-media::after { content:'Интерфейс продукта'; position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); }

.api-window { padding-bottom: 13px; background: #0d1018; }
.api-window pre { min-height: 390px; margin: 0; padding: clamp(22px,3vw,42px); color: #e7e7ec; font: 500 clamp(11px,1vw,15px)/1.75 "Cascadia Code",Consolas,monospace; }
.code-purple { color: #b68bff; }.code-blue { color: #75c9ff; }.code-green { color: #a8ff92; }.code-orange { color: #ffbd79; }.code-muted { color: #696d7e; }
.api-pulse { display: flex; align-items: center; gap: 9px; margin: 0 14px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; color: #b9bac6; font-size: 9px; }
.api-pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px var(--lime); }

.product-story-card { position: absolute; z-index: 11; left: 0; bottom: 3%; width: min(390px,50%); overflow: hidden; padding: 15px 16px 13px; border: 1px solid color-mix(in srgb,var(--accent) 35%,rgba(255,255,255,.1)); border-radius: 18px; background: rgba(11,13,23,.9); box-shadow: 0 24px 75px rgba(0,0,0,.46),0 0 45px color-mix(in srgb,var(--accent) 9%,transparent); backdrop-filter: blur(18px); transform: translateY(14px); opacity: 0; transition: opacity .45s,transform .6s cubic-bezier(.2,.9,.2,1),border-color .4s; }
.product-story-card[hidden] { display: none; }
.tour-stage[data-mode="product"] .product-story-card, .tour-stage[data-mode="api"] .product-story-card { opacity: 1; transform: none; }
.story-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #aaaab7; font-size: 7px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.story-card-head nav { display: flex; gap: 6px; }
.story-card-head button { display: grid; place-items: center; width: 24px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.09); border-radius: 7px; background: rgba(255,255,255,.035); color: #7f818f; cursor: pointer; transition: border-color .25s,background .25s,color .25s,transform .25s; }
.story-card-head button:hover { transform: translateY(-1px); }
.story-card-head button i { display: none; }
.story-card-head button span { font-size: 7px; }
.story-card-head button.is-active { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 16%,transparent); color: var(--accent); }
.story-card-body { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; min-height: 70px; padding-top: 12px; }
.story-card-body > i { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid color-mix(in srgb,var(--accent) 38%,transparent); border-radius: 10px; color: var(--accent); font-size: 8px; font-style: normal; font-weight: 800; }
.story-card-body strong { display: block; color: #f0eff5; font-size: 12px; line-height: 1.25; }
.story-card-body p { margin: 5px 0 0; color: #9294a3; font-size: 9px; line-height: 1.45; }
.story-card-progress { overflow: hidden; height: 2px; margin-top: 4px; border-radius: 4px; background: rgba(255,255,255,.08); }
.story-card-progress i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,var(--accent),#fff); transform: scaleX(0); transform-origin: left; }
.story-card-progress i.is-running { animation: beat-progress 4.8s linear both; }
.product-story-card.beat-enter .story-card-body > * { animation: beat-copy-enter .48s both; }
.product-story-card.beat-enter .story-card-body > div { animation-delay: .05s; }

.ecosystem-result { position: absolute; z-index: 7; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; }
.ecosystem-result span { --angle: calc(var(--i) * 60deg); position: absolute; left: 50%; top: 50%; padding: 9px 12px; border: 1px solid color-mix(in srgb,var(--accent) 28%,transparent); border-radius: 999px; background: rgba(12,14,24,.82); color: #dedde5; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; transform: rotate(var(--angle)) translateX(clamp(175px,18vw,265px)) rotate(calc(var(--angle) * -1)) translate(-50%,-50%); animation: result-breathe 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }

.tour-stage[data-mode="product"] .ecosystem-map, .tour-stage[data-mode="api"] .ecosystem-map { transform: translate(-34%,-4%) scale(.57); opacity: .66; }
.tour-stage[data-mode="product"] .product-window { opacity: 1; transform: translate3d(0,0,0) rotateY(-5deg) scale(1); }
.tour-stage[data-mode="api"] .api-window { opacity: 1; transform: translate3d(0,0,0) rotateY(-5deg) scale(1); }
.tour-stage[data-scene="smartpremium"] .product-window { box-shadow: 0 35px 120px rgba(0,0,0,.5),0 0 80px rgba(180,124,255,.12); }
.tour-stage[data-scene="smartpremium"] .window-media { background-image: linear-gradient(rgba(180,124,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(180,124,255,.08) 1px,transparent 1px); background-size: 34px 34px; }
.tour-stage[data-scene="smartgamer"] .window-media img { object-fit: contain; filter: drop-shadow(0 25px 40px rgba(0,0,0,.25)); animation: gamer-device-float 5.5s ease-in-out infinite; }
.tour-stage[data-scene="smartkiosk"] .window-media img { object-fit: contain; animation: kiosk-focus 6s ease-in-out infinite; }
.tour-stage[data-scene="smartlock"] .window-media img { animation: tv-signal 4.2s ease-in-out infinite; }
.tour-stage[data-scene="api"] .api-window pre { background-image: radial-gradient(circle at 80% 15%,rgba(255,189,89,.08),transparent 45%); }
.tour-stage[data-beat="1"] .media-scan { animation-duration: 2.8s; }
.tour-stage[data-beat="2"] .window-media::after { animation-duration: 2.7s; }
.tour-stage[data-mode="result"] .ecosystem-map { transform: scale(.82); }
.tour-stage[data-mode="result"] .orbit-node { border-color: color-mix(in srgb,var(--accent) 34%,transparent); }
.tour-stage[data-mode="result"] .connections line { stroke: var(--accent); stroke-width: .42; filter: drop-shadow(0 0 5px var(--accent)); }
.tour-stage[data-mode="result"] .ecosystem-result { opacity: 1; }
.tour-stage[data-mode="result"] .ecosystem-caption { color: var(--lime); }
.tour-stage[data-scene="intro"] .scene-copy h1, .tour-stage[data-scene="final"] .scene-copy h1 { font-size: clamp(58px,5.7vw,96px); }

.chapter-nav { position: absolute; z-index: 12; right: clamp(18px,2.4vw,44px); top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.chapter-nav button { display: flex; justify-content: flex-end; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; }
.chapter-nav i { width: 5px; height: 5px; border-radius: 50%; background: #5a5c69; transition: width .3s,border-radius .3s,background .3s,box-shadow .3s; }
.chapter-nav span { position: absolute; right: 18px; width: max-content; padding: 5px 8px; border-radius: 7px; background: rgba(10,11,19,.8); color: #b8b7c1; font-size: 8px; opacity: 0; transform: translateX(8px); transition: opacity .2s,transform .2s; pointer-events: none; }
.chapter-nav button:hover span, .chapter-nav button:focus-visible span { opacity: 1; transform: none; }
.chapter-nav button.is-active i { width: 23px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.scroll-cue { position: absolute; z-index: 8; left: 50%; bottom: 25px; display: flex; align-items: center; gap: 10px; color: #737583; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue[hidden] { display: none; }
.scroll-cue i { position: relative; width: 18px; height: 28px; border: 1px solid #555765; border-radius: 10px; }
.scroll-cue i::after { content:''; position:absolute; top:5px; left:50%; width:2px; height:5px; border-radius:2px; background:var(--accent); transform:translateX(-50%); animation:scroll-dot 1.7s ease-in-out infinite; }
.story-triggers { position: relative; z-index: 1; margin-top: -100svh; pointer-events: none; }
.story-trigger { height: 100svh; min-height: 650px; }

.scene-copy > *, .ecosystem-caption { transition: opacity .25s ease,transform .45s cubic-bezier(.2,.9,.25,1); }
.tour-stage.scene-leave .scene-copy > * { opacity: 0; transform: translateY(16px); }
.tour-stage.scene-enter .scene-copy > * { animation: copy-enter .55s both; }
.tour-stage.scene-enter .scene-copy > *:nth-child(2) { animation-delay: .04s; }.tour-stage.scene-enter .scene-copy > *:nth-child(3) { animation-delay: .08s; }.tour-stage.scene-enter .scene-copy > *:nth-child(4) { animation-delay: .12s; }.tour-stage.scene-enter .scene-copy > *:nth-child(5) { animation-delay: .16s; }

.lead-dialog { width: min(560px,calc(100% - 28px)); max-height: calc(100svh - 28px); padding: 42px; border: 1px solid rgba(255,255,255,.15); border-radius: 26px; background: #10121e; color: var(--text); box-shadow: 0 40px 150px rgba(0,0,0,.8); }
.lead-dialog::backdrop { background: rgba(3,4,10,.8); backdrop-filter: blur(12px); }
.dialog-close { position: absolute; top: 16px; right: 18px; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); cursor: pointer; }
.dialog-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(135deg,var(--accent),#5edbff); color: #080910; font-size: 13px; font-weight: 900; }
.dialog-kicker { margin: 24px 0 8px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.lead-dialog h2 { margin: 0; font-size: clamp(32px,5vw,48px); line-height: .98; letter-spacing: -.055em; }
.lead-dialog > p:not(.dialog-kicker) { color: var(--muted); font-size: 13px; line-height: 1.6; }
.lead-dialog form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 26px; }
.lead-dialog label { display: grid; gap: 7px; color: #bebdca; font-size: 9px; }
.lead-dialog input, .lead-dialog select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #090b14; color: #f2f1f6; }
.lead-dialog input:focus, .lead-dialog select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 15%,transparent); }
.lead-dialog .consent { grid-column: 1/-1; display: flex; align-items: center; }
.lead-dialog .consent input { width: 16px; min-height: 16px; }
.lead-dialog form .button { grid-column: 1/-1; }
.form-success { padding: 30px 0 12px; text-align: center; }
.form-success > span { display: grid; place-items: center; width: 58px; height: 58px; margin: auto; border-radius: 50%; background: var(--lime); color: #071007; font-size: 24px; }
.form-success h3 { margin-bottom: 7px; font-size: 26px; }.form-success p { color: var(--muted); }
.noscript { position: fixed; z-index: 100; inset: auto 20px 20px; padding: 14px; border-radius: 12px; background: #fff; color: #111; text-align: center; }

/* Product dive — the second, tactile layer of the experience */
body.lab-open { overflow: hidden; }
.button-dive { position: relative; overflow: hidden; min-width: 206px; background: linear-gradient(115deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#fff)); color: #080910; box-shadow: 0 15px 48px color-mix(in srgb,var(--accent) 26%,transparent); }
.button-dive::before { content:''; position:absolute; inset:-80% -30%; background:linear-gradient(100deg,transparent 37%,rgba(255,255,255,.55) 49%,transparent 61%); transform:translateX(-80%) rotate(7deg); transition:transform .7s ease; }
.button-dive:hover::before { transform:translateX(80%) rotate(7deg); }
.button-dive > * { position:relative; }

.portal-transition { --portal-x:50vw; --portal-y:50vh; --portal-accent:var(--accent); position:fixed; z-index:199; inset:0; overflow:hidden; pointer-events:none; opacity:0; visibility:hidden; background:radial-gradient(circle at var(--portal-x) var(--portal-y),color-mix(in srgb,var(--portal-accent) 36%,#fff) 0 1px,var(--portal-accent) 2px,rgba(8,9,16,.96) 9%,#05060b 31%,rgba(5,6,11,0) 72%); clip-path:circle(0 at var(--portal-x) var(--portal-y)); transition:clip-path .82s cubic-bezier(.62,.01,.28,1),opacity .15s,visibility .15s; }
.portal-transition.is-active { opacity:1; visibility:visible; clip-path:circle(155vmax at var(--portal-x) var(--portal-y)); }
.portal-transition.is-returning { transition-timing-function:cubic-bezier(.72,0,.24,1); }
.portal-rings { position:absolute; left:var(--portal-x); top:var(--portal-y); width:36vmin; aspect-ratio:1; transform:translate(-50%,-50%); }
.portal-rings i { position:absolute; inset:0; border:1px solid color-mix(in srgb,var(--portal-accent) 70%,#fff); border-radius:48% 52% 43% 57% / 54% 44% 56% 46%; box-shadow:0 0 45px color-mix(in srgb,var(--portal-accent) 45%,transparent),inset 0 0 45px color-mix(in srgb,var(--portal-accent) 25%,transparent); animation:portal-spin 1.7s linear infinite; }
.portal-rings i:nth-child(2) { inset:13%; animation-direction:reverse; animation-duration:1.15s; }
.portal-rings i:nth-child(3) { inset:29%; animation-duration:.85s; }
.portal-core { position:absolute; left:var(--portal-x); top:var(--portal-y); display:grid; place-items:center; width:240px; aspect-ratio:1; border-radius:50%; color:#fff; text-align:center; transform:translate(-50%,-50%) scale(.45); opacity:0; animation:portal-core-in .7s .12s cubic-bezier(.2,.9,.3,1) forwards; }
.portal-core small { font-size:9px; letter-spacing:.22em; text-transform:uppercase; opacity:.72; }
.portal-core strong { margin-top:-50px; font-size:25px; letter-spacing:-.05em; }
.portal-core span { position:absolute; bottom:45px; color:var(--portal-accent); font-size:26px; }

.product-lab { --lab-accent:#8566ff; --lab-origin-x:50vw; --lab-origin-y:50vh; position:fixed; z-index:200; inset:0; width:100%; max-width:none; height:100%; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:#080a12; color:#f5f4fa; opacity:0; clip-path:circle(0 at var(--lab-origin-x) var(--lab-origin-y)); transition:clip-path .9s cubic-bezier(.2,.86,.24,1),opacity .18s; }
.product-lab[open] { display:grid; grid-template-rows:72px minmax(0,1fr) 66px; }
.product-lab.is-visible { opacity:1; clip-path:circle(160vmax at var(--lab-origin-x) var(--lab-origin-y)); }
.product-lab::backdrop { background:#05060b; }
.product-lab::before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 64% 42%,color-mix(in srgb,var(--lab-accent) 12%,transparent),transparent 37%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,64px 64px,64px 64px; mask-image:linear-gradient(90deg,transparent,#000 32%,#000); transition:background .45s ease; }
.product-lab.is-switching .lab-layout { opacity:0; transform:scale(.985); filter:blur(8px); }

.lab-header { position:relative; z-index:5; display:grid; grid-template-columns:230px 1fr 230px; align-items:center; gap:18px; min-width:0; padding:0 26px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(8,10,18,.88); backdrop-filter:blur(20px); }
.lab-brand { display:flex; align-items:center; gap:11px; min-width:0; }
.lab-brand > span { display:grid; place-items:center; width:36px; height:36px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--lab-accent) 48%,transparent); border-radius:11px; background:color-mix(in srgb,var(--lab-accent) 16%,transparent); color:var(--lab-accent); font-size:10px; font-weight:900; box-shadow:0 0 28px color-mix(in srgb,var(--lab-accent) 14%,transparent); }
.lab-brand div { display:grid; min-width:0; }
.lab-brand small { color:#747687; font-size:7px; letter-spacing:.16em; text-transform:uppercase; }
.lab-brand strong { overflow:hidden; margin-top:3px; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.lab-product-nav { display:flex; justify-content:center; gap:4px; min-width:0; }
.lab-product-nav button { display:flex; align-items:center; gap:6px; min-height:34px; padding:0 10px; border:1px solid transparent; border-radius:10px; background:transparent; color:#7e808f; cursor:pointer; font-size:8px; font-weight:700; transition:.25s; }
.lab-product-nav button i { display:grid; place-items:center; min-width:23px; height:19px; border-radius:6px; background:rgba(255,255,255,.05); font-size:6px; font-style:normal; }
.lab-product-nav button:hover { color:#fff; background:rgba(255,255,255,.04); }
.lab-product-nav button.is-active { border-color:color-mix(in srgb,var(--lab-accent) 35%,transparent); background:color-mix(in srgb,var(--lab-accent) 12%,transparent); color:var(--lab-accent); }
.lab-exit { justify-self:end; display:flex; align-items:center; gap:12px; border:0; background:none; color:#9a9ba8; cursor:pointer; font-size:9px; }
.lab-exit i { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.12); border-radius:50%; color:#fff; font-size:18px; font-style:normal; transition:.25s; }
.lab-exit:hover i { border-color:var(--lab-accent); background:color-mix(in srgb,var(--lab-accent) 13%,transparent); transform:rotate(90deg); }

.lab-layout { display:grid; grid-template-columns:minmax(210px,255px) minmax(480px,1fr) minmax(190px,230px); min-height:0; gap:16px; padding:16px 20px; transition:opacity .18s,transform .35s,filter .25s; }
.lab-sidebar,.lab-inspector { min-height:0; border:1px solid rgba(255,255,255,.08); border-radius:18px; background:rgba(13,15,25,.72); backdrop-filter:blur(14px); }
.lab-sidebar { display:flex; flex-direction:column; padding:22px 18px 17px; overflow:auto; }
.lab-eyebrow { margin:0 0 12px; color:var(--lab-accent)!important; font-size:8px!important; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.lab-sidebar h2 { margin:0; font-size:clamp(25px,2.2vw,38px); line-height:.96; letter-spacing:-.055em; text-wrap:balance; }
.lab-sidebar > p:not(.lab-eyebrow) { margin:14px 0 0; color:#898b99; font-size:10px; line-height:1.55; }
.lab-module-nav { display:grid; gap:6px; margin-top:22px; }
.lab-module-nav button { position:relative; display:grid; grid-template-columns:23px 1fr auto; align-items:center; gap:9px; min-height:42px; padding:6px 9px; overflow:hidden; border:1px solid transparent; border-radius:11px; background:transparent; color:#767887; cursor:pointer; text-align:left; transition:.25s; }
.lab-module-nav button i { color:#505260; font-size:7px; font-style:normal; }
.lab-module-nav button span { font-size:9px; font-weight:700; }
.lab-module-nav button em { color:var(--lab-accent); font-size:12px; font-style:normal; opacity:0; transform:translateX(-5px); transition:.25s; }
.lab-module-nav button::before { content:''; position:absolute; left:0; top:15%; width:2px; height:70%; border-radius:3px; background:var(--lab-accent); transform:scaleY(0); transition:.3s; }
.lab-module-nav button:hover { color:#ddd; background:rgba(255,255,255,.035); }
.lab-module-nav button.is-active { border-color:color-mix(in srgb,var(--lab-accent) 24%,transparent); background:color-mix(in srgb,var(--lab-accent) 10%,transparent); color:#fff; }
.lab-module-nav button.is-active::before { transform:scaleY(1); }
.lab-module-nav button.is-active em { opacity:1; transform:none; }
.lab-sidebar-result { margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); }
.lab-sidebar-result small { color:#686a79; font-size:7px; letter-spacing:.16em; text-transform:uppercase; }
.lab-sidebar-result p { margin:7px 0 0; color:#bbbcc7; font-size:9px; line-height:1.5; }

.lab-workspace-shell { position:relative; min-width:0; min-height:0; overflow:hidden; border:1px solid color-mix(in srgb,var(--lab-accent) 20%,rgba(255,255,255,.08)); border-radius:20px; background:#0c0e17; box-shadow:0 34px 100px rgba(0,0,0,.4),0 0 70px color-mix(in srgb,var(--lab-accent) 7%,transparent); }
.lab-workspace-bar { display:flex; align-items:center; gap:5px; height:36px; padding:0 12px; border-bottom:1px solid rgba(255,255,255,.07); background:#131621; }
.lab-workspace-bar > span { width:5px; height:5px; border-radius:50%; background:#414350; }
.lab-workspace-bar b { margin-left:7px; color:#9294a2; font-size:8px; }
.lab-workspace-bar > i { display:flex; align-items:center; gap:6px; margin-left:auto; color:#777987; font-size:7px; font-style:normal; }
.lab-workspace-bar em { width:5px; height:5px; border-radius:50%; background:#79ff9c; box-shadow:0 0 10px #79ff9c; }
.lab-workspace { height:calc(100% - 36px); min-height:0; overflow:auto; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--lab-accent) 8%,transparent),transparent 52%); transition:opacity .18s,transform .3s; }
.lab-workspace.module-enter > * { animation:lab-module-in .5s cubic-bezier(.2,.85,.25,1) both; }
.lab-workspace button { border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(255,255,255,.055); color:#e9e8ef; cursor:pointer; font:inherit; transition:border-color .2s,background .2s,transform .2s,box-shadow .2s; }
.lab-workspace button:hover:not(:disabled) { border-color:var(--lab-accent); background:color-mix(in srgb,var(--lab-accent) 13%,rgba(255,255,255,.05)); transform:translateY(-1px); box-shadow:0 8px 24px color-mix(in srgb,var(--lab-accent) 10%,transparent); }
.lab-workspace button:disabled { opacity:.32; cursor:not-allowed; }

.lab-inspector { position:relative; padding:22px 18px; overflow:auto; }
.inspector-signal { display:flex; align-items:center; gap:7px; width:fit-content; margin-bottom:30px; padding:5px 7px; border:1px solid rgba(121,255,156,.16); border-radius:999px; color:#79ff9c; font-size:6px; letter-spacing:.14em; text-transform:uppercase; }
.inspector-signal i { width:5px; height:5px; border-radius:50%; background:#79ff9c; box-shadow:0 0 11px #79ff9c; animation:inspector-pulse 1.7s ease infinite; }
.lab-inspector > small { color:#666876; font-size:7px; letter-spacing:.16em; text-transform:uppercase; }
.lab-inspector h3 { margin:9px 0 0; font-size:21px; line-height:1.03; letter-spacing:-.04em; }
.lab-inspector > p { margin:12px 0 0; color:#9294a2; font-size:9px; line-height:1.58; }
.inspector-tip { margin-top:24px; padding:12px; border:1px solid color-mix(in srgb,var(--lab-accent) 22%,transparent); border-radius:12px; background:color-mix(in srgb,var(--lab-accent) 7%,transparent); }
.inspector-tip span { color:var(--lab-accent); font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.inspector-tip p { margin:6px 0 0; color:#c0c1ca; font-size:8px; line-height:1.5; }
.inspector-links { display:flex; flex-wrap:wrap; gap:5px; margin-top:17px; }
.inspector-links span { padding:5px 7px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:#777987; font-size:6px; }
.lab-footer { position:relative; z-index:5; display:grid; grid-template-columns:230px 1fr 230px; align-items:center; gap:20px; padding:0 26px; border-top:1px solid rgba(255,255,255,.08); background:rgba(8,10,18,.9); }
.lab-footer-progress { display:grid; grid-template-columns:44px 1fr; align-items:center; gap:9px; }
.lab-footer-progress span { color:#878996; font-size:7px; }
.lab-footer-progress > i { overflow:hidden; height:2px; background:rgba(255,255,255,.09); }
.lab-footer-progress em { display:block; width:100%; height:100%; background:var(--lab-accent); transform-origin:left; transition:transform .45s; }
.lab-footer-actions { display:flex; justify-content:center; gap:7px; }
.lab-footer-actions button { min-height:32px; padding:0 12px; border:1px solid rgba(255,255,255,.09); border-radius:9px; background:rgba(255,255,255,.035); color:#8e909d; cursor:pointer; font-size:7px; }
.lab-footer-actions button:hover { color:#fff; border-color:var(--lab-accent); }
.lab-contact { justify-self:end; min-height:37px; padding:0 14px; border:0; border-radius:10px; background:var(--lab-accent); color:#080910; cursor:pointer; font-size:8px; font-weight:800; box-shadow:0 12px 34px color-mix(in srgb,var(--lab-accent) 18%,transparent); }
.lab-contact span { margin-left:8px; }

/* SmartShell uses the real product demo; the other labs stay clearly labelled concepts. */
.product-lab[data-product="smartshell"] .lab-layout { grid-template-columns:190px minmax(0,1fr); }
.product-lab[data-product="smartshell"] .lab-inspector { display:none; }
.product-lab[data-product="smartshell"] .lab-sidebar { padding-inline:15px; }
.product-lab[data-product="smartshell"] .lab-sidebar h2 { font-size:31px; }
.lab-workspace { position:relative; }
.lab-workspace.is-concept-preview::after { content:'Концепт-превью'; position:sticky; z-index:20; top:10px; float:right; margin:10px 10px -34px 0; padding:6px 9px; border:1px solid color-mix(in srgb,var(--lab-accent) 32%,transparent); border-radius:999px; background:rgba(8,10,18,.82); color:var(--lab-accent); font-size:7px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; backdrop-filter:blur(10px); pointer-events:none; }
.live-demo-shell { display:grid; grid-template-rows:58px minmax(0,1fr); height:100%; min-height:0; background:#0a0d14; }
.live-demo-toolbar { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:0 17px; border-bottom:1px solid rgba(255,255,255,.08); background:#11151f; }
.live-demo-toolbar > div { display:flex; align-items:center; gap:10px; min-width:0; }
.live-demo-toolbar > div > i { width:9px; height:9px; flex:0 0 auto; border-radius:50%; background:#79ff9c; box-shadow:0 0 0 6px rgba(121,255,156,.08),0 0 18px #79ff9c; animation:inspector-pulse 1.7s ease infinite; }
.live-demo-toolbar span { display:grid; min-width:0; }
.live-demo-toolbar b { font-size:12px; }.live-demo-toolbar small { overflow:hidden; margin-top:3px; color:#858896; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.live-demo-toolbar > a { display:inline-flex; align-items:center; min-height:34px; padding:0 11px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--lab-accent) 36%,transparent); border-radius:9px; background:color-mix(in srgb,var(--lab-accent) 10%,transparent); color:#dedde6; font-size:10px; font-weight:700; text-decoration:none; transition:.22s; }
.live-demo-toolbar > a:hover { border-color:var(--lab-accent); color:#fff; transform:translateY(-1px); }.live-demo-toolbar > a span { display:inline; margin-left:8px; color:var(--lab-accent); }
.live-demo-frame-wrap { position:relative; min-height:0; overflow:hidden; background:radial-gradient(circle at 50% 20%,rgba(133,102,255,.12),transparent 42%),#0b0e16; }
.live-demo-frame-wrap iframe { position:relative; z-index:2; display:block; width:100%; height:100%; border:0; background:#10131d; }
.live-demo-fallback { position:absolute; z-index:1; inset:0; display:grid; place-content:center; justify-items:center; gap:7px; color:#9a9ca8; text-align:center; }
.live-demo-fallback b { color:#fff; font-size:18px; }.live-demo-fallback span { font-size:11px; }.live-demo-fallback a { color:var(--lab-accent); font-size:11px; }

/* Shared miniature products */
.shell-console,.topology-ui,.monitor-ui,.updates-ui,.support-ui,.zones-ui { min-height:100%; padding:20px; }
.console-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.console-metrics div { padding:11px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:#11141f; }
.console-metrics small { color:#696b79; font-size:6px; text-transform:uppercase; }
.console-metrics b { display:block; margin-top:5px; font-size:15px; }
.club-console { display:grid; grid-template-columns:minmax(300px,1fr) 190px; gap:12px; min-height:370px; }
.club-map,.pc-panel,.shift-ui,.booking-ui,.analytics-ui,.topology-ui,.monitor-ui,.updates-ui,.support-ui,.zones-ui { border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(14,17,27,.9); }
.club-map { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; align-content:start; padding:14px; }
.pc { position:relative; min-height:48px; padding:6px; color:#8d8f9b; font-size:7px; }
.pc::before { content:''; display:block; width:14px; height:10px; margin:0 auto 5px; border:1px solid currentColor; border-radius:2px; box-shadow:0 7px 0 -5px currentColor; }
.pc strong,.pc span { display:block; overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.pc strong { color:currentColor; font-size:9px; }.pc span { margin-top:2px; font-size:6px; font-weight:500; }
.pc.active { color:#78ff9b; background:rgba(121,255,156,.06); }.pc.service { color:#ffca78; }.pc.selected { border-color:var(--lab-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--lab-accent) 13%,transparent); }
.pc-panel { padding:15px; }
.pc-panel > small,.shift-ui small,.booking-ui small,.analytics-ui small { color:#6f7180; font-size:7px; }
.pc-panel h3,.shift-ui h3,.booking-ui h3,.analytics-ui h3 { margin:7px 0; font-size:20px; }
.pc-panel p { color:#858795; font-size:8px; line-height:1.5; }
.pc-panel button,.shift-ui button,.booking-ui button { width:100%; min-height:34px; margin-top:7px; font-size:8px; }
.pc-panel button.subtle,.timer-screen button.subtle { background:transparent; color:#878997; }
.shift-ui,.booking-ui,.analytics-ui { min-height:100%; padding:22px; }
.shift-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }.shift-summary div { padding:14px; border-radius:11px; background:rgba(255,255,255,.035); }.shift-summary b { display:block; margin-top:5px; font-size:18px; }
.transaction-list { display:grid; gap:6px; margin:15px 0; }.transaction-list p { display:grid; grid-template-columns:70px 1fr auto; margin:0; padding:9px; border-bottom:1px solid rgba(255,255,255,.06); color:#8c8e9a; font-size:8px; }.transaction-list b { color:#d5d4dc; }.transaction-list em { color:#79ff9c; font-style:normal; }
.booking-timeline { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin:22px 0; }.booking-timeline span { min-height:78px; padding:7px 4px; border-radius:8px; background:rgba(255,255,255,.035); color:#6d6f7c; font-size:6px; }.booking-timeline span.booked { background:color-mix(in srgb,var(--lab-accent) 15%,transparent); color:var(--lab-accent); }
.analytics-top,.analytics-bottom { display:flex; justify-content:space-between; gap:8px; }.analytics-top nav { display:flex; gap:4px; }.analytics-top button { padding:6px 9px; color:#747684; font-size:7px; }.analytics-top button.active { border-color:var(--lab-accent); color:var(--lab-accent); }
.analytics-chart { position:relative; display:flex; align-items:end; gap:7px; height:190px; margin:18px 0; padding:20px 10px 0; border-bottom:1px solid rgba(255,255,255,.08); }.analytics-chart i { flex:1; min-height:8%; border-radius:5px 5px 0 0; background:linear-gradient(180deg,var(--lab-accent),color-mix(in srgb,var(--lab-accent) 16%,transparent)); animation:bar-grow .65s both; transform-origin:bottom; }.analytics-bottom div { flex:1; padding:12px; border-radius:10px; background:rgba(255,255,255,.035); }.analytics-bottom b { display:block; margin-top:5px; font-size:15px; }

/* SmartPremium — infrastructure as a live constellation */
.topology-ui { position:relative; overflow:hidden; }.topology-canvas { position:relative; min-height:330px; border-radius:12px; background:radial-gradient(circle at 50% 50%,rgba(180,124,255,.11),transparent 45%),linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,28px 28px,28px 28px; }
.topology-node { position:absolute; z-index:2; display:grid; place-items:center; width:78px; min-height:55px; padding:6px; color:#aaabb8; font-size:7px; }.topology-node:nth-child(1){left:7%;top:40%}.topology-node:nth-child(2){left:40%;top:12%}.topology-node:nth-child(3){left:42%;top:60%}.topology-node:nth-child(4){right:6%;top:39%}.topology-node.selected { border-color:var(--lab-accent); color:#fff; box-shadow:0 0 34px color-mix(in srgb,var(--lab-accent) 18%,transparent); }.topology-canvas::before,.topology-canvas::after { content:''; position:absolute; left:18%; right:18%; top:50%; height:1px; background:linear-gradient(90deg,var(--lab-accent),rgba(255,255,255,.12),var(--lab-accent)); transform:rotate(-13deg); opacity:.48; }.topology-canvas::after { transform:rotate(13deg); }
.topology-detail { position:absolute; z-index:3; left:20px; right:20px; bottom:15px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(8,10,17,.84); color:#888a97; font-size:7px; }.topology-detail b { color:#fff; }.topology-detail button { margin-left:auto; padding:7px 10px; font-size:7px; }
.monitor-ui header,.updates-ui header,.support-ui header,.zones-ui header { display:flex; justify-content:space-between; align-items:center; }.monitor-ui header h3,.updates-ui header h3,.support-ui header h3,.zones-ui header h3 { margin:5px 0 0; font-size:20px; }.monitor-ui header button,.updates-ui header button,.support-ui header button { padding:8px 11px; font-size:7px; }
.monitor-grid { display:grid; grid-template-columns:190px 1fr; gap:14px; margin-top:18px; }.monitor-radar { display:grid; place-items:center; aspect-ratio:1; border:1px solid rgba(255,255,255,.07); border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 25px,rgba(255,255,255,.045) 26px 27px); }.monitor-radar i { width:43%; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 20deg,var(--lab-accent),transparent 40%); filter:blur(1px); animation:radar 2.8s linear infinite; }.monitor-radar b { position:absolute; font-size:31px; }.monitor-list { display:grid; gap:7px; }.monitor-list div { display:grid; grid-template-columns:1fr auto; align-items:center; padding:11px; border-radius:9px; background:rgba(255,255,255,.035); color:#898b98; font-size:7px; }.monitor-list b { color:#e8e7ed; }.monitor-list em { color:#79ff9c; font-style:normal; }
.update-packages { display:grid; gap:8px; margin-top:18px; }.update-package { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; padding:11px; border:1px solid rgba(255,255,255,.07); border-radius:10px; }.update-package i { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:color-mix(in srgb,var(--lab-accent) 12%,transparent); color:var(--lab-accent); font-size:8px; font-style:normal; }.update-package b { display:block; font-size:9px; }.update-package small { color:#70727f; font-size:7px; }.update-package span { color:#7f818f; font-size:7px; }.update-rings { display:flex; align-items:center; gap:10px; margin-top:13px; padding:12px; border-radius:11px; background:color-mix(in srgb,var(--lab-accent) 7%,transparent); }.update-rings i { display:block; width:24px; height:24px; border:2px solid var(--lab-accent); border-right-color:transparent; border-radius:50%; animation:portal-spin 1s linear infinite; }
.support-chat { display:grid; gap:9px; margin-top:18px; }.message { max-width:78%; padding:11px; border-radius:12px 12px 12px 3px; background:rgba(255,255,255,.05); color:#b0b1bc; font-size:8px; line-height:1.5; }.message.me { justify-self:end; border-radius:12px 12px 3px 12px; background:color-mix(in srgb,var(--lab-accent) 13%,transparent); }.support-status { display:flex; align-items:center; gap:8px; margin-top:16px; color:#79ff9c; font-size:7px; }.support-status i { width:6px;height:6px;border-radius:50%;background:#79ff9c;box-shadow:0 0 10px #79ff9c; }

/* SmartGamer — a tactile phone inside the lab */
.phone-world { display:grid; place-items:center; min-height:100%; padding:18px; background:radial-gradient(circle at 50% 45%,rgba(93,141,255,.15),transparent 38%); }
.phone { position:relative; width:min(285px,78%); min-height:495px; padding:8px; border:1px solid rgba(255,255,255,.17); border-radius:34px; background:#05060b; box-shadow:0 35px 85px rgba(0,0,0,.6),0 0 60px rgba(93,141,255,.12); }
.phone::before { content:''; position:absolute; z-index:3; top:15px; left:50%; width:72px; height:16px; border-radius:20px; background:#05060b; transform:translateX(-50%); }
.phone-content { min-height:479px; overflow:hidden; padding:34px 17px 15px; border-radius:27px; background:linear-gradient(160deg,#151a2d,#0d101a 42%,#10121e); }
.phone-content h3 { margin:7px 0 13px; font-size:20px; letter-spacing:-.04em; }.phone-content h4 { margin:17px 0 8px; color:#9698a5; font-size:8px; text-transform:uppercase; }.phone-kicker { color:#7199ff; font-size:7px; letter-spacing:.14em; text-transform:uppercase; }
.phone-seat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.phone-seat-grid button { min-height:37px; color:#888b99; font-size:8px; }.phone-seat-grid button.selected { border-color:#5d8dff;background:rgba(93,141,255,.15);color:#fff; }.phone-seat-grid button.busy { opacity:.25; }
.phone-action { width:100%; min-height:40px; margin-top:15px; background:#5d8dff!important; color:#071022!important; font-size:9px; font-weight:800; }.phone-selection { display:flex; justify-content:space-between; margin-top:13px; color:#7e8190; font-size:7px; }.phone-selection b { color:#fff; }
.balance-card,.level-card { padding:16px; border-radius:17px; background:linear-gradient(135deg,#5d8dff,#9a76ff); color:#fff; box-shadow:0 18px 40px rgba(93,141,255,.2); }.balance-card small,.balance-card span { font-size:7px; opacity:.75; }.balance-card h3 { margin:8px 0; font-size:27px; }.amount-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }.amount-grid button { min-height:36px; font-size:8px; }.phone-history { margin-top:15px; }.phone-history > span { color:#686b79;font-size:7px; }.phone-history p { display:grid;grid-template-columns:1fr auto;margin:7px 0;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06);font-size:7px; }.phone-history em { color:#b5b6c0;font-style:normal; }.phone-history em.plus { color:#79ff9c; }
.level-card { background:linear-gradient(145deg,#202846,#5d4da3); }.level-card > i { float:right;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:15px;font-style:normal; }.level-card p { font-size:7px; }.level-card > span { display:block;height:3px;background:rgba(255,255,255,.2); }.level-card em { display:block;height:100%;background:#fff; }
.reward-card { display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px; }.reward-card > i { display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:rgba(93,141,255,.15);color:#7199ff;font-size:9px;font-style:normal;font-weight:800; }.reward-card b,.reward-card small { display:block;font-size:8px; }.reward-card small { color:#717381;font-size:6px; }.reward-card button { padding:7px;font-size:7px; }.streak { margin-top:12px;padding:10px;border-radius:10px;background:rgba(255,255,255,.035);color:#777987;font-size:7px; }.streak b { float:right;color:#fff; }
.shop-list { display:grid;gap:7px; }.shop-list button { display:grid;grid-template-columns:35px 1fr;align-items:center;gap:9px;min-height:52px;padding:8px;text-align:left; }.shop-list button.selected { border-color:#5d8dff;background:rgba(93,141,255,.12); }.shop-list i { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.05);font-style:normal; }.shop-list b,.shop-list small { display:block;font-size:8px; }.shop-list small { margin-top:3px;color:#777987;font-size:7px; }.cart-bar { display:flex;justify-content:space-between;margin-top:13px;padding:11px;border-radius:10px;background:#5d8dff;color:#071022;font-size:7px; }

/* SmartKiosk — self-service hardware */
.kiosk-world { display:grid;place-items:center;min-height:100%;padding:17px;background:radial-gradient(circle at 50% 50%,rgba(73,214,199,.13),transparent 42%); }.kiosk-device { position:relative;width:min(580px,94%);padding:12px 12px 30px;border:1px solid rgba(255,255,255,.18);border-radius:23px;background:linear-gradient(145deg,#282c37,#10121a);box-shadow:0 35px 90px rgba(0,0,0,.55); }.kiosk-camera { width:5px;height:5px;margin:0 auto 8px;border-radius:50%;background:#05060a;box-shadow:0 0 0 2px #353946; }.kiosk-screen { min-height:390px;overflow:hidden;border-radius:12px;background:#f3f5f7;color:#12141a; }.kiosk-screen header { display:flex;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #dcdfe4;font-size:8px; }.kiosk-screen header span { color:#6d7179; }.kiosk-main { min-height:315px;padding:25px 11%;text-align:center; }.kiosk-main > small { color:#6f777d;font-size:7px;text-transform:uppercase; }.kiosk-main h3 { margin:8px 0;font-size:24px;letter-spacing:-.04em; }.kiosk-main p { color:#6e737b;font-size:8px; }.fake-fields { display:grid;gap:7px;margin:18px 0; }.fake-fields span { padding:10px;border:1px solid #d5d9de;border-radius:8px;background:#fff;color:#555a63;font-size:8px;text-align:left; }.kiosk-main > button { min-height:36px;padding:0 14px;border:0;background:#12141a;color:#fff;font-size:8px; }.kiosk-screen nav { display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #dcdfe4;background:#fff; }.kiosk-screen nav span { padding:10px 3px;color:#8a8f96;font-size:6px;text-align:center; }.kiosk-screen nav span.active { color:#0da899;box-shadow:inset 0 -2px #0da899; }
.kiosk-amounts { display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0; }.kiosk-amounts button { min-height:35px;border-color:#d4d8dd;background:#fff;color:#363a41;font-size:8px; }.kiosk-amounts button.active { border-color:#16b7a6;background:#e6faf7;color:#087c70; }.sbp-code { display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0; }.sbp-code i,.fake-qr { display:block;width:48px;height:48px;background:repeating-linear-gradient(45deg,#101218 0 3px,#fff 3px 5px),repeating-linear-gradient(-45deg,transparent 0 4px,#101218 4px 6px);border:5px solid #fff;box-shadow:0 0 0 1px #d8dce0; }.sbp-code span { text-align:left;font-size:8px;font-weight:800; }.sbp-code small { display:block;margin-top:3px;color:#747980;font-size:6px;font-weight:400; }.kiosk-main.map { padding:20px 12%; }.kiosk-map { display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:16px 0; }.kiosk-map button { min-height:31px;border-color:#d6dade;background:#fff;color:#555a62;font-size:7px; }.kiosk-map button.selected { border-color:#0cad9d;background:#dff7f4;color:#08766b; }.kiosk-map button.busy { background:#e9ebee;opacity:.4; }.kiosk-products { display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:15px 0; }.kiosk-products button { min-height:104px;padding:10px;border-color:#d8dce0;background:#fff;color:#181b20; }.kiosk-products button.selected { border-color:#0cad9d;background:#e5faf7; }.kiosk-products i,.kiosk-products b,.kiosk-products span { display:block;font-style:normal; }.kiosk-products i { font-size:17px; }.kiosk-products b { margin:8px 0 4px;font-size:8px; }.kiosk-products span { color:#666c73;font-size:7px; }.kiosk-cart { padding:9px;border-radius:8px;background:#12141a;color:#fff;font-size:7px; }

/* SmartLock TV */
.tv-world { display:grid;place-items:center;align-content:center;min-height:100%;padding:22px;background:radial-gradient(circle at 50% 44%,rgba(255,110,145,.13),transparent 45%); }.tv-screen { position:relative;width:min(720px,96%);aspect-ratio:16/9;overflow:hidden;border:8px solid #08090e;border-radius:10px;background:linear-gradient(145deg,#21162a,#090b13);box-shadow:0 35px 90px rgba(0,0,0,.62),0 0 50px rgba(255,110,145,.11); }.tv-brand,.tv-footer { position:absolute;z-index:3;left:0;right:0;display:flex;justify-content:space-between;padding:13px 16px;color:#9b9ca9;font-size:7px; }.tv-brand { top:0; }.tv-brand i { color:#79ff9c;font-style:normal; }.tv-footer { bottom:0; }.tv-footer b { color:#fff; }.tv-stand { width:23%;height:10px;border-radius:0 0 50% 50%;background:#11131a;box-shadow:0 8px 20px #000; }.lock-access { display:grid;grid-template-columns:82px 1fr;align-items:center;gap:25px;width:72%;height:100%;margin:auto; }.lock-access .fake-qr { width:74px;height:74px; }.lock-access small,.timer-screen small { color:#ff88a4;font-size:7px;text-transform:uppercase; }.lock-access h3,.timer-screen h3 { margin:8px 0;font-size:26px; }.lock-access p,.timer-screen p { color:#90929e;font-size:8px;line-height:1.5; }.lock-access button,.timer-screen button,.message-screen > button { min-height:34px;padding:0 12px;font-size:7px; }
.timer-screen { display:grid;place-items:center;align-content:center;height:100%;text-align:center; }.timer-screen h3.tv-timer { font:500 clamp(35px,5vw,62px)/1 monospace;letter-spacing:.08em; }.timer-line { width:58%;height:3px;margin:6px auto 14px;background:rgba(255,255,255,.1); }.timer-line i { display:block;height:100%;background:#ff6e91;box-shadow:0 0 12px #ff6e91; }.timer-screen p { max-width:420px; }.timer-screen button { margin:4px; }.message-screen { position:relative;display:grid;place-items:center;height:100%;overflow:hidden; }.game-blur { position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,#584d7d,transparent 25%),radial-gradient(circle at 70% 45%,#8d405a,transparent 28%),#161827;filter:blur(15px);opacity:.65;transform:scale(1.15); }.message-screen aside,.no-message { position:relative;z-index:2;width:58%;padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:rgba(8,9,15,.82);backdrop-filter:blur(12px);text-align:center; }.message-screen aside small { color:#ff88a4;font-size:6px;text-transform:uppercase; }.message-screen h3 { margin:8px 0;font-size:20px; }.message-screen p { color:#9496a2;font-size:8px; }.message-screen > button { position:absolute;z-index:3;bottom:45px; }.no-message i { color:#ff88a4;font-size:18px;font-style:normal; }
.zone-list { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px; }.zone-list button { display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:9px;min-height:69px;padding:10px;text-align:left; }.zone-list button.selected { border-color:#ff6e91;background:rgba(255,110,145,.1); }.zone-list i { display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:rgba(255,110,145,.1);color:#ff88a4;font-size:8px;font-style:normal; }.zone-list b,.zone-list small { display:block;font-size:8px; }.zone-list small { margin-top:4px;color:#737583;font-size:7px; }.zone-list em { padding:5px 7px;border-radius:999px;background:rgba(121,255,156,.08);color:#79ff9c;font-size:6px;font-style:normal; }.zone-list em.free { color:#9a9ca8;background:rgba(255,255,255,.04); }

/* API — code becomes a living product */
.api-console { display:grid;grid-template-columns:170px 1fr;min-height:100%;background:#090c13;font-family:"Cascadia Code",Consolas,monospace; }.api-console > aside { padding:15px 10px;border-right:1px solid rgba(255,255,255,.07);background:#0e1119; }.api-search { margin-bottom:12px;padding:8px;border:1px solid rgba(255,255,255,.07);border-radius:7px;color:#555966;font-size:6px; }.api-console > aside span { display:flex;align-items:center;gap:7px;margin:3px 0;padding:8px 6px;border-radius:6px;color:#727682;font-size:6px; }.api-console > aside span.active { background:rgba(255,189,89,.09);color:#ffbd59; }.api-console > aside i { min-width:27px;color:#70c7ff;font-size:5px;font-style:normal; }.api-console > main { min-width:0;padding:26px;overflow:auto; }.api-path { color:#ffbd59;font-size:6px; }.api-console h3 { margin:9px 0 18px;font:700 22px/1.1 Inter,Arial,sans-serif;letter-spacing:-.04em; }.endpoint-list { display:grid;gap:6px; }.endpoint-list button { display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:9px;padding:10px;text-align:left; }.endpoint-list button.active { border-color:#ffbd59;background:rgba(255,189,89,.08); }.endpoint-list i { padding:4px;border-radius:5px;background:rgba(101,202,255,.1);color:#65caff;font-size:6px;font-style:normal;text-align:center; }.endpoint-list i.post { color:#a8ff92;background:rgba(168,255,146,.08); }.endpoint-list b { font-size:8px; }.endpoint-info { margin-top:12px;padding:12px;border-left:2px solid #ffbd59;background:rgba(255,255,255,.025);font-size:7px; }.endpoint-info p { color:#6d707d; }.request-line { display:grid;grid-template-columns:45px 1fr auto;align-items:center;margin:16px 0;padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:8px;font-size:7px; }.request-line i { color:#a8ff92;font-style:normal; }.request-line button { padding:7px 11px;background:#ffbd59;color:#151007;font-size:7px; }.api-console pre { overflow:auto;margin:0;padding:17px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#0d111a;color:#b6b9c4;font-size:8px;line-height:1.8; }.api-console code em { color:#b68bff;font-style:normal; }.api-console code span { color:#a8ff92; }.api-console code b { color:#ffbd59; }.api-response { margin-top:9px;opacity:.25;transition:.35s; }.api-response.visible { opacity:1; }.api-response small { display:block;margin-bottom:6px;color:#79ff9c;font-size:6px; }.event-flow { display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:6px;margin:45px 0; }.event-flow > div { min-height:100px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:11px; }.event-flow > div.active { border-color:#ffbd59;background:rgba(255,189,89,.07);box-shadow:0 0 30px rgba(255,189,89,.09); }.event-flow i,.event-flow b,.event-flow span { display:block;font-style:normal; }.event-flow i { color:#ffbd59;font-size:7px; }.event-flow b { margin:12px 0 6px;font-size:8px; }.event-flow span { color:#747784;font-size:6px; }.event-flow > em { color:#555966;font-size:7px;font-style:normal; }.api-event-button { display:block;min-height:35px;margin:auto;padding:0 14px;font-size:7px; }.integration-list { display:grid;grid-template-columns:1fr 1fr;gap:8px; }.integration-list button { display:grid;grid-template-columns:38px 1fr;gap:8px;min-height:78px;padding:12px;text-align:left; }.integration-list button.active { border-color:#ffbd59;background:rgba(255,189,89,.08); }.integration-list i { grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:rgba(255,189,89,.08);color:#ffbd59;font-size:7px;font-style:normal; }.integration-list b { font-size:8px; }.integration-list span { color:#747784;font-size:6px; }

@keyframes portal-spin { to { transform:rotate(360deg); } }
@keyframes portal-core-in { to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes lab-module-in { from { opacity:0;transform:translateY(12px) scale(.985); } to { opacity:1;transform:none; } }
@keyframes inspector-pulse { 50% { opacity:.35;transform:scale(.72); } }
@keyframes bar-grow { from { transform:scaleY(0); } }
@keyframes radar { to { transform:rotate(360deg); } }

.lab-module-nav button b,.lab-module-nav button small { display:block; }
.lab-module-nav button b { font-size:8px; }
.lab-module-nav button small { overflow:hidden; margin-top:2px; color:#626471; font-size:6px; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.inspector-links > small { width:100%; margin-bottom:3px; color:#626471; font-size:6px; letter-spacing:.12em; text-transform:uppercase; }

@media (max-width:1180px) {
  .lab-header,.lab-footer { grid-template-columns:190px 1fr 190px; padding-inline:18px; }
  .lab-product-nav button { padding-inline:7px; }
  .lab-product-nav button span { display:none; }
  .lab-layout { grid-template-columns:220px minmax(460px,1fr); }
  .lab-inspector { display:none; }
}

@media (max-width:780px) {
  .button-dive { min-width:0; flex:1 0 100%; }
  .portal-rings { width:70vmin; }
  .portal-core { width:190px; }
  .product-lab[open] { grid-template-rows:94px minmax(0,1fr) 55px; }
  .product-lab::before { background-size:auto,36px 36px,36px 36px; }
  .lab-header { grid-template-columns:1fr auto; grid-template-rows:48px 38px; gap:0 8px; padding:4px 10px 0; }
  .lab-brand > span { width:31px; height:31px; border-radius:9px; }
  .lab-brand small { font-size:5px; }.lab-brand strong { font-size:10px; }
  .lab-exit span { display:none; }.lab-exit i { width:30px;height:30px;font-size:16px; }
  .lab-product-nav { grid-column:1/-1; justify-content:flex-start; gap:5px; overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }
  .lab-product-nav::-webkit-scrollbar { display:none; }
  .lab-product-nav button { flex:1 0 auto; min-height:28px; padding:0 8px; border-radius:8px; }
  .lab-product-nav button span { display:block; font-size:6px; }
  .lab-product-nav button i { min-width:19px; height:16px; font-size:5px; }
  .lab-layout { display:grid; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:7px; padding:7px; }
  .lab-sidebar { display:block; padding:7px; overflow:hidden; border-radius:12px; }
  .lab-sidebar > .lab-eyebrow,.lab-sidebar > h2,.lab-sidebar > p,.lab-sidebar-result { display:none; }
  .lab-module-nav { grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin:0; }
  .lab-module-nav button { display:grid; grid-template-columns:1fr; place-items:center; min-width:0; min-height:35px; padding:4px 2px; border-radius:8px; text-align:center; }
  .lab-module-nav button i,.lab-module-nav button em,.lab-module-nav button small { display:none; }
  .lab-module-nav button b { overflow:hidden; width:100%; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
  .lab-module-nav button::before { top:auto; bottom:0; left:15%; width:70%; height:2px; transform:scaleX(0); }
  .lab-module-nav button.is-active::before { transform:scaleX(1); }
  .lab-workspace-shell { border-radius:13px; }
  .lab-workspace-bar { height:28px; padding-inline:8px; }.lab-workspace-bar b { max-width:52%; overflow:hidden; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }.lab-workspace-bar > i { font-size:5px; }
  .lab-workspace { height:calc(100% - 28px); }
  .lab-footer { grid-template-columns:58px 1fr auto; gap:6px; padding:0 8px; }
  .lab-footer-progress { grid-template-columns:1fr; }.lab-footer-progress > i { display:none; }.lab-footer-progress span { font-size:6px; }
  .lab-footer-actions { gap:4px; }.lab-footer-actions button { min-height:29px;padding:0 7px;font-size:0; }.lab-footer-actions button:first-child::after { content:'←';font-size:13px; }.lab-footer-actions button:last-child::after { content:'→';font-size:13px; }
  .lab-contact { min-height:31px;padding:0 9px;font-size:6px; }.lab-contact span { display:none; }
  .shell-console,.topology-ui,.monitor-ui,.updates-ui,.support-ui,.zones-ui { padding:10px; }
  .console-metrics { grid-template-columns:1fr 1fr; gap:4px; margin-bottom:6px; }.console-metrics div { padding:6px; }.console-metrics b { margin-top:2px;font-size:10px; }
  .club-console { grid-template-columns:1fr; gap:6px; min-height:auto; }.club-map { grid-template-columns:repeat(6,1fr);gap:4px;padding:7px; }.pc { min-height:36px;padding:3px;font-size:5px; }.pc::before { width:10px;height:7px;margin-bottom:3px; }.pc-panel { padding:8px; }.pc-panel h3 { font-size:14px; }.pc-panel p { display:none; }.pc-panel button { width:49%;min-height:28px;margin-top:3px;font-size:6px; }
  .shift-ui,.booking-ui,.analytics-ui { padding:12px; }.shift-summary { gap:5px;margin:10px 0; }.shift-summary div { padding:7px; }.shift-summary b { font-size:11px; }.transaction-list { margin:8px 0; }.transaction-list p { grid-template-columns:45px 1fr auto;padding:6px;font-size:6px; }.booking-timeline { gap:3px;margin:12px 0; }.booking-timeline span { min-height:52px;padding:4px 2px;font-size:5px; }.analytics-chart { height:120px;margin:10px 0;padding-top:10px; }.analytics-bottom div { padding:7px; }.analytics-bottom b { font-size:10px; }
  .topology-canvas { min-height:290px; }.topology-node { width:62px;min-height:46px;font-size:6px; }.topology-detail { left:8px;right:8px;bottom:8px;padding:7px;font-size:6px; }
  .monitor-grid { grid-template-columns:120px 1fr;gap:7px;margin-top:10px; }.monitor-list { gap:4px; }.monitor-list div { padding:7px;font-size:6px; }.monitor-radar b { font-size:21px; }
  .update-packages { gap:4px;margin-top:9px; }.update-package { grid-template-columns:29px 1fr auto;gap:6px;padding:7px; }.update-package i { width:27px;height:27px; }.support-chat { gap:5px;margin-top:9px; }.message { padding:7px;font-size:6px; }
  .phone-world { align-content:start;padding:7px; }.phone { width:min(245px,88%);min-height:385px;border-radius:27px; }.phone-content { min-height:369px;padding:28px 13px 11px;border-radius:21px; }.phone-content h3 { font-size:16px; }.phone-seat-grid button { min-height:28px; }.balance-card,.level-card { padding:11px; }.balance-card h3 { font-size:20px; }.phone-history { margin-top:8px; }.reward-card { padding:7px; }.shop-list button { min-height:44px; }
  .kiosk-world { align-content:start;padding:7px; }.kiosk-device { width:98%;padding:7px 7px 18px;border-radius:16px; }.kiosk-screen { min-height:325px; }.kiosk-main { min-height:259px;padding:15px 7%; }.kiosk-main h3 { font-size:18px; }.kiosk-products button { min-height:80px;padding:5px; }
  .tv-world { align-content:start;padding:8px; }.tv-screen { width:100%;border-width:5px; }.tv-brand,.tv-footer { padding:7px 9px;font-size:5px; }.lock-access { grid-template-columns:55px 1fr;gap:12px;width:84%; }.lock-access .fake-qr { width:50px;height:50px; }.lock-access h3,.timer-screen h3 { font-size:17px; }.lock-access p,.timer-screen p { font-size:6px; }.timer-screen h3.tv-timer { font-size:31px; }.message-screen aside,.no-message { width:72%;padding:10px; }.message-screen h3 { font-size:14px; }.message-screen > button { bottom:26px; }.zone-list { gap:5px;margin-top:9px; }.zone-list button { grid-template-columns:30px 1fr;min-height:54px;padding:6px; }.zone-list i { width:28px;height:28px; }.zone-list em { display:none; }
  .api-console { grid-template-columns:72px 1fr; }.api-console > aside { padding:7px 4px; }.api-search { display:none; }.api-console > aside span { display:grid;gap:2px;padding:6px 3px;font-size:4px; }.api-console > aside i { font-size:4px; }.api-console > main { padding:13px 9px; }.api-console h3 { margin:6px 0 10px;font-size:15px; }.endpoint-list button { grid-template-columns:34px 1fr auto;padding:7px; }.request-line { grid-template-columns:34px 1fr auto;margin:8px 0;padding:5px;font-size:5px; }.request-line button { padding:5px; }.api-console pre { padding:9px;font-size:6px; }.event-flow { grid-template-columns:1fr;gap:4px;margin:12px 0; }.event-flow > div { min-height:48px;padding:7px; }.event-flow > em { display:none; }.event-flow b { margin:5px 0 2px; }.integration-list { gap:4px; }.integration-list button { grid-template-columns:28px 1fr;min-height:58px;padding:6px; }.integration-list i { width:26px;height:26px; }
}

@media (max-width:410px) {
  .lab-product-nav button span { display:none; }
  .lab-product-nav button { min-width:37px; justify-content:center; }
  .lab-contact { max-width:100px; }
  .club-map { grid-template-columns:repeat(5,1fr); }
  .console-metrics { display:none; }
  .phone { width:min(230px,92%); }
  .kiosk-map { grid-template-columns:repeat(4,1fr); }
}

@keyframes connection-flow { to { stroke-dashoffset: -30; } }
@keyframes ring-breathe { 0%,100% { transform:scale(.96);opacity:.45 } 50% { transform:scale(1.08);opacity:1 } }
@keyframes caption-pulse { 0%,100% { transform:scale(.75);opacity:.7 } 50% { transform:scale(1.05);opacity:1 } }
@keyframes media-scan { 0% { transform:translateY(-30%) } 55%,100% { transform:translateY(480%) } }
@keyframes result-breathe { 0%,100% { opacity:.65;filter:brightness(.8) } 50% { opacity:1;filter:brightness(1.2) } }
@keyframes scroll-dot { 0% { transform:translate(-50%,0);opacity:0 } 30% { opacity:1 } 100% { transform:translate(-50%,11px);opacity:0 } }
@keyframes copy-enter { from { opacity:0;transform:translateY(18px) } to { opacity:1;transform:none } }
@keyframes packet-travel { 0% { left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.3) } 16% { opacity:1 } 82% { opacity:1 } 100% { left:var(--packet-x);top:var(--packet-y);opacity:0;transform:translate(-50%,-50%) scale(1.35) } }
@keyframes interface-sheen { 0%,25% { background-position:180% 0;opacity:0 } 45% { opacity:1 } 75%,100% { background-position:-80% 0;opacity:0 } }
@keyframes beat-progress { to { transform:scaleX(1) } }
@keyframes beat-copy-enter { from { opacity:0;transform:translateY(7px) } to { opacity:1;transform:none } }
@keyframes gamer-device-float { 0%,100% { transform:translateY(0) scale(.98) } 50% { transform:translateY(-9px) scale(1.01) } }
@keyframes kiosk-focus { 0%,100% { transform:scale(.97);filter:saturate(.92) } 50% { transform:scale(1.02);filter:saturate(1.1) } }
@keyframes tv-signal { 0%,100% { filter:brightness(.88) saturate(.95) } 50% { filter:brightness(1.08) saturate(1.12) } }

@media (max-width: 1120px) {
  .experience-header { grid-template-columns: 190px 1fr 150px; padding-inline: 28px; }
  .tour-stage { grid-template-columns: .86fr 1.14fr; gap: 20px; padding-inline: 54px; }
  .scene-copy h1 { font-size: clamp(50px,6vw,70px); }
  .scene-visual { width: 100%; }
  .chapter-nav { right: 18px; }
  .product-window, .api-window { width: 75%; }
}

@media (max-width: 780px) {
  :root { --header: 66px; }
  .experience-header { grid-template-columns: 1fr auto; padding: max(13px,env(safe-area-inset-top)) 15px 10px; }
  .brand img { width: 142px; }
  .header-progress { display: none; }
  .header-skip { font-size: 10px; }
  .experience-header-actions { gap:10px; }
  .experience-menu-button { font-size:10px; }
  .experience-menu-button span { width:18px; height:18px; }
  .experience-menu > header { min-height:66px; grid-template-columns:1fr auto; padding:12px 15px; }
  .experience-menu > header > span { display:none; }
  .experience-menu > header button { width:36px; height:36px; font-size:22px; }
  .experience-menu-layout { display:block; width:calc(100% - 30px); min-height:auto; padding:36px 0 max(40px,env(safe-area-inset-bottom)); }
  .experience-menu-intro { min-height:330px; padding-bottom:44px; }
  .experience-menu-intro h2 { margin:20px 0; font-size:clamp(52px,15vw,68px); }
  .experience-menu-intro p { max-width:320px; font-size:13px; }
  .experience-menu-intro > a { margin-top:auto; }
  .experience-menu-nav { display:block; }
  .experience-menu-nav > div { margin-top:38px; }
  .experience-menu-nav > div > small { margin-bottom:12px; }
  .experience-menu-nav a { min-height:65px; }
  .experience-menu-nav b { font-size:18px; }
  .experience-menu-nav span { font-size:10px; }
  .tour-stage { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; min-height: 620px; padding: calc(var(--header) + 22px) 15px max(20px,env(safe-area-inset-bottom)); }
  .scene-copy { z-index: 8; width: 100%; min-height: 42%; order: 2; padding: 0 2px; }
  .scene-meta { gap: 9px; margin-bottom: 13px; font-size: 8px; }
  .scene-index { width: 27px; height: 27px; }
  .scene-kicker::before { width: 16px; margin-right: 7px; }
  .scene-copy h1, .tour-stage[data-scene="intro"] .scene-copy h1, .tour-stage[data-scene="final"] .scene-copy h1 { font-size: clamp(39px,11.5vw,55px); line-height: .91; }
  .scene-description { margin-top: 14px; font-size: 13px; line-height: 1.52; }
  .scene-facts { gap: 5px; margin-top: 14px; }
  .scene-facts span { padding: 7px 8px; font-size: 9px; }
  .scene-outcome { display: none; }
  .scene-actions { gap: 7px; margin-top: 16px; }
  .button { flex: 1; min-height: 43px; padding-inline: 12px; border-radius: 11px; font-size: 10px; }
  .button-text { flex: 0 0 auto; }
  .scene-visual { z-index: 3; width: 100%; height: min(40svh,330px); aspect-ratio: auto; order: 1; flex: 1 1 auto; min-height: 250px; transform: none; }
  .ecosystem-caption { top: 0; right: 3px; font-size: 7px; }
  .ecosystem-map { inset: 1% 3% 0; }
  .core-node { width: 92px; }
  .core-node small { font-size: 6px; }.core-node strong { font-size: 18px; }.core-node i { font-size: 6px; }
  .core-node__rings { inset: -17px; }.core-node__rings::after { inset: -14px; }
  .orbit-node { width: 68px; min-height: 58px; padding: 6px; border-radius: 14px; }
  .orbit-node i { min-width: 26px; height: 20px; margin-bottom: 3px; font-size: 7px; }.orbit-node span { font-size: 7px; }
  .node-premium { left: 18%; top: 22%; }.node-gamer { left: 82%; top: 22%; }.node-kiosk { left: 88%; top: 62%; }.node-lock { left: 68%; top: 87%; }.node-api { left: 24%; top: 85%; }
  .tour-stage[data-mode="product"] .ecosystem-map, .tour-stage[data-mode="api"] .ecosystem-map { transform: translate(-38%,-7%) scale(.46); opacity: .6; }
  .product-window, .api-window { top: 12%; right: 0; width: 77%; border-radius: 16px; transform: translate3d(50px,10px,-60px) rotateY(-7deg) scale(.9); }
  .tour-stage[data-mode="product"] .product-window, .tour-stage[data-mode="api"] .api-window { transform: translate3d(0,0,0) rotateY(-3deg) scale(1); }
  .window-bar { min-height: 30px; padding-inline: 9px; }.window-bar b,.window-bar i { font-size: 6px; }
  .window-media { height: min(29svh,235px); }
  .window-status { min-height: 37px; padding-inline: 10px; font-size: 7px; }.window-status strong { font-size: 7px; }
  .api-window pre { min-height: 205px; padding: 18px; font-size: 7.5px; line-height: 1.55; }
  .api-pulse { margin-inline: 8px; padding: 8px; font-size: 6px; }
  .product-story-card { left: 0; bottom: -2px; width: 78%; padding: 10px 11px 9px; border-radius: 13px; }
  .story-card-head { font-size: 5.5px; }
  .story-card-head button { width: 19px; height: 18px; border-radius: 5px; }.story-card-head button span { font-size: 6px; }
  .story-card-body { grid-template-columns: 25px 1fr; gap: 8px; min-height: 53px; padding-top: 8px; }
  .story-card-body > i { width: 24px; height: 24px; border-radius: 7px; font-size: 6px; }
  .story-card-body strong { font-size: 9px; }.story-card-body p { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: 7px; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .energy-packet { --packet-size: 5px; }
  .ecosystem-result span { padding: 6px 8px; font-size: 6px; transform: rotate(var(--angle)) translateX(112px) rotate(calc(var(--angle) * -1)) translate(-50%,-50%); }
  .chapter-nav { top: auto; right: auto; bottom: max(12px,env(safe-area-inset-bottom)); left: 15px; display: flex; gap: 8px; transform: none; }
  .chapter-nav button { padding: 4px 0; }.chapter-nav span { display: none; }
  .chapter-nav button.is-active i { width: 18px; }
  .scroll-cue { display: none; }
  .stage-grid { background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 30%,#000 0,transparent 67%); }
  .ambient-a { top: 6%; right: -15%; width: 80vw; height: 80vw; }
  .pointer-light { display: none; }
  .story-trigger { min-height: 620px; }
  .lead-dialog { padding: 34px 20px 24px; border-radius: 20px; }
  .lead-dialog form { grid-template-columns: 1fr; }
  .lead-dialog .consent, .lead-dialog form .button { grid-column: auto; }
}

@media (max-height: 720px) and (min-width: 781px) {
  .tour-stage { padding-top: calc(var(--header) + 10px); padding-bottom: 30px; }
  .scene-copy h1 { font-size: clamp(46px,4.7vw,72px); }
  .scene-description { margin-top: 18px; }.scene-facts { margin-top: 18px; }.scene-actions { margin-top: 22px; }
  .scene-visual { max-height: 570px; }
}

@media (min-width:781px) {
  .lab-brand small { font-size:9px; }
  .lab-brand strong { font-size:15px; }
  .lab-product-nav button { font-size:10px; }
  .lab-product-nav button i { font-size:8px; }
  .lab-exit { font-size:11px; }
  .lab-eyebrow { font-size:10px!important; }
  .lab-sidebar > p:not(.lab-eyebrow) { font-size:13px; }
  .lab-module-nav button b { font-size:12px; }
  .lab-module-nav button small { font-size:10px; }
  .lab-sidebar-result small { font-size:9px; }
  .lab-sidebar-result p { font-size:11px; }
  .lab-workspace-bar b { font-size:10px; }
  .lab-workspace-bar > i { font-size:9px; }
  .inspector-signal { font-size:9px; }
  .lab-inspector > small { font-size:9px; }
  .lab-inspector h3 { font-size:24px; }
  .lab-inspector > p { font-size:12px; }
  .inspector-tip span { font-size:9px; }
  .inspector-tip p { font-size:11px; }
  .inspector-links span,.inspector-links > small { font-size:9px; }
  .lab-footer-progress span { font-size:10px; }
  .lab-footer-actions button { font-size:10px; }
  .lab-contact { font-size:11px; }
  .lab-workspace.is-concept-preview small { font-size:10px!important; }
  .lab-workspace.is-concept-preview p { font-size:12px; }
  .lab-workspace.is-concept-preview button { font-size:11px; }
  .lab-workspace.is-concept-preview :is(span,label,em) { font-size:10px; }
  .lab-workspace.is-concept-preview :is(pre,code) { font-size:11px; }
  .lab-workspace.is-concept-preview .pc strong { font-size:12px; }
  .lab-workspace.is-concept-preview .pc span { font-size:10px; }
  .lab-workspace.is-concept-preview .api-console > aside span,
  .lab-workspace.is-concept-preview .api-console > aside i { font-size:10px; }
}

@media (max-width:780px) {
  .product-lab[open] { grid-template-rows:100px minmax(0,1fr) 60px; }
  .lab-brand small { font-size:9px; }
  .lab-brand strong { font-size:14px; }
  .lab-product-nav button span { font-size:9px; }
  .lab-product-nav button i { font-size:8px; }
  .product-lab[data-product="smartshell"] .lab-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .lab-module-nav { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .lab-module-nav::-webkit-scrollbar { display:none; }
  .lab-module-nav button { flex:0 0 auto; width:auto; min-width:126px; min-height:44px; padding-inline:10px; }
  .lab-module-nav button b { overflow:visible; font-size:12px; text-overflow:clip; white-space:normal; }
  .lab-workspace-bar { height:34px; }
  .lab-workspace { height:calc(100% - 34px); }
  .lab-workspace-bar b { font-size:11px; }
  .lab-workspace-bar > i { font-size:10px; }
  .lab-footer-progress span { font-size:10px; }
  .lab-contact { min-height:36px; font-size:11px; }
  .live-demo-shell { grid-template-rows:56px minmax(0,1fr); }
  .live-demo-toolbar { padding-inline:10px; }
  .live-demo-toolbar b { font-size:14px; }.live-demo-toolbar small { max-width:175px; font-size:11px; }
  .live-demo-toolbar > a { min-height:34px; padding-inline:9px; font-size:0; }
  .live-demo-toolbar > a::before { content:'Развернуть'; font-size:11px; }
  .live-demo-toolbar > a span { margin-left:5px; font-size:12px; }
  .live-demo-frame-wrap iframe { width:91%; height:91%; transform:scale(1.1); transform-origin:0 0; }
  .lab-workspace.is-concept-preview::after { top:5px; margin:5px 5px -32px 0; padding:6px 8px; font-size:9px; }
  .lab-workspace.is-concept-preview small { font-size:11px!important; }
  .lab-workspace.is-concept-preview p { font-size:12px; line-height:1.5; }
  .lab-workspace.is-concept-preview button { font-size:12px; }
  .lab-workspace.is-concept-preview :is(span,label,em) { font-size:11px; }
  .lab-workspace.is-concept-preview :is(pre,code) { font-size:11px; line-height:1.6; }
  .lab-workspace.is-concept-preview .pc strong { font-size:13px; }
  .lab-workspace.is-concept-preview .pc span { font-size:11px; }
  .lab-workspace.is-concept-preview .topology-node { width:80px; min-height:62px; }
  .lab-workspace.is-concept-preview .topology-detail { font-size:11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
  .scene-visual,.ambient { transform: none!important; }
}

@media (max-width:780px) {
  html[data-surface="experience"],html[data-surface="experience"] body { height:100%; overflow:hidden; overscroll-behavior:none; }
  html[data-surface="experience"] body > main { height:100svh; }
  html[data-surface="experience"] .tour { height:100svh; min-height:100svh; }
  html[data-surface="experience"] .story-triggers { display:none; }
  html[data-surface="experience"] .tour-stage { position:relative; top:auto; height:100svh; min-height:0; padding:calc(var(--header) + 10px) 15px 52px; touch-action:pan-y; }
  html[data-surface="experience"] .scene-visual { flex:0 0 min(33svh,275px); height:min(33svh,275px); min-height:210px; }
  html[data-surface="experience"] .scene-copy { flex:1 1 auto; min-height:0; }
  html[data-surface="experience"] .scene-copy h1,
  html[data-surface="experience"] .tour-stage[data-scene="intro"] .scene-copy h1,
  html[data-surface="experience"] .tour-stage[data-scene="final"] .scene-copy h1 { font-size:clamp(37px,10.7vw,51px); }
  html[data-surface="experience"] .scene-description { display:-webkit-box; overflow:hidden; font-size:13px; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
  html[data-surface="experience"] .scene-actions { display:grid; grid-template-columns:1fr 1fr; }
  html[data-surface="experience"] .scene-actions .button-dive { grid-column:1/-1; width:100%; }
  html[data-surface="experience"] .scene-actions .button { min-width:0; }
  html[data-surface="experience"] .chapter-nav { bottom:max(9px,env(safe-area-inset-bottom)); left:15px; padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(8,9,15,.72); backdrop-filter:blur(12px); }
  html[data-surface="experience"] .tour-stage::after { content:'←  свайп  →'; position:absolute; z-index:9; right:15px; bottom:max(15px,calc(env(safe-area-inset-bottom) + 6px)); color:#777986; font-size:8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
  html[data-surface="experience"] .tour-stage[data-swipe-direction="next"].scene-leave .scene-copy > * { transform:translateX(-24px); }
  html[data-surface="experience"] .tour-stage[data-swipe-direction="prev"].scene-leave .scene-copy > * { transform:translateX(24px); }
}