/* HOME STUDIES / 2026 — opt-in. No selectors affect the published homepage. */ #hero[data-home-design] { --cx-white:#eff5fc; --cx-muted:#a9bacd; --cx-cyan:#94ebe7; --cx-pink:#e5aedc; --cx-ease:cubic-bezier(.16,1,.3,1); --cx-gutter:clamp(32px,5.6vw,100px); } #hero .cx-ui { position:absolute; inset:0; overflow:hidden; isolation:isolate; color:var(--cx-white); font:13px/1.6 'Microsoft YaHei','PingFang SC',sans-serif; text-align:left; } #hero .cx-ui button,#hero .cx-ui a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; border-radius:0; } #hero .cx-header { position:absolute; top:max(30px,env(safe-area-inset-top)); left:var(--cx-gutter); right:var(--cx-gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; opacity:0; } #hero .cx-brand { display:flex; align-items:center; gap:12px; } #hero .cx-brand svg { width:31px; height:31px; fill:none; stroke:var(--cx-cyan); stroke-width:1.1; } #hero .cx-brand b { font:700 18px 'Orbitron',sans-serif; letter-spacing:.18em; } #hero .cx-brand i { color:var(--cx-pink); font-style:normal; } #hero .cx-brand small { display:block; margin-top:4px; color:var(--cx-muted); font:7px/1.5 Consolas,monospace; letter-spacing:.16em; } #hero .cx-edition,#hero .cx-status { display:flex; align-items:center; gap:16px; font:9px Consolas,monospace; letter-spacing:.16em; color:#b7c9d6; } #hero .cx-edition i { color:#9cebe3; font-style:normal; } #hero .cx-status { font-size:8px; gap:9px; } #hero .cx-status i { width:4px; height:4px; background:var(--cx-cyan); box-shadow:0 0 12px #90ecea; animation:cx-breathe 4s ease-in-out infinite; } #hero .cx-intro-anchor { position:absolute; left:var(--cx-gutter); top:20%; width:43%; } #hero .cx-intro { opacity:0; } #hero .cx-eyebrow { display:flex; align-items:center; gap:12px; color:#c2d7e5; font:8px/1.6 Consolas,monospace; letter-spacing:.18em; margin-bottom:21px; } #hero .cx-eyebrow i { width:26px; height:1px; background:var(--cx-pink); } #hero .cx-eyebrow span:last-child { color:var(--cx-pink); } #hero .cx-title { margin:0; font:900 clamp(44px,6.5vw,106px)/1.12 'Orbitron',sans-serif; letter-spacing:-.025em; } #hero .cx-title [data-home] { display:block; white-space:nowrap; } #hero .cx-title > .cx-desktop { display:block; } #hero .cx-title .cx-outline { font-size:.66em; line-height:1.5; letter-spacing:.005em; color:transparent; -webkit-text-stroke:1px #c8d8e5; text-shadow:none; } #hero .cx-copy { margin-top:22px; color:#d5e4ef; font-size:13px; letter-spacing:.12em; line-height:1.9; text-shadow:0 2px 9px #071225; } #hero .cx-mobile { display:none; } #hero .cx-signature { display:flex; align-items:center; gap:12px; margin-top:25px; color:#aebbcf; font:8px Consolas,monospace; letter-spacing:.2em; } #hero .cx-signature i { width:38px; height:2px; background:linear-gradient(90deg,var(--cx-cyan),var(--cx-pink)); transform-origin:left; animation:cx-signature 8s var(--cx-ease) infinite; } #hero .cx-note-anchor { position:absolute; left:var(--cx-gutter); top:57%; width:265px; } #hero .cx-note { opacity:0; } #hero .cx-note-label { font:9px Consolas,monospace; letter-spacing:.18em; color:#b4a2c9; } #hero .cx-note p { margin:10px 0 8px; max-width:245px; font-size:11px; color:#bacbda; line-height:1.8; letter-spacing:.05em; } #hero .cx-note small { color:#8cabc0; font:7px Consolas,monospace; letter-spacing:.14em; } #hero .cx-map { position:absolute; inset:0; width:100%; height:100%; fill:none; overflow:hidden; pointer-events:none; z-index:-1; opacity:0; } #hero .cx-map * { vector-effect:non-scaling-stroke; } #hero .cx-ring { stroke:#cccbec; stroke-width:.65; opacity:.24; } #hero .cx-ticks { stroke:#d5daef; stroke-width:2; stroke-dasharray:1 16; opacity:.22; } #hero .cx-sweep { fill:none; stroke:url(#cx-spectrum); stroke-width:1.2; stroke-dasharray:.2 .8; opacity:.68; transform-origin:0 0; animation:cx-scan 16s cubic-bezier(.45,0,.55,1) infinite; } #hero .cx-link { stroke:#87d3e5; stroke-width:.75; stroke-dasharray:1; stroke-dashoffset:0; opacity:0; transition:opacity .65s var(--cx-ease),stroke-dashoffset .9s var(--cx-ease); } #hero .cx-link.cx-selected { opacity:.38; } #hero .cx-nav { position:absolute; inset:0; pointer-events:none; } #hero .cx-nav-caption { position:absolute; left:var(--cx-gutter); right:var(--cx-gutter); bottom:calc(12% + 155px); display:flex; justify-content:space-between; gap:16px; color:#b9c8dc; font:8px Consolas,monospace; letter-spacing:.2em; opacity:0; } #hero .cx-nav-caption span:last-child { color:#bcb6cf; letter-spacing:.1em; } #hero .cx-place { position:absolute; left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i)); bottom:12%; width:calc((100% - var(--cx-gutter)*2)/4); height:130px; } #hero .cx-place:nth-child(1) { --cx-i:0; --cx-accent:#92ece9; } #hero .cx-place:nth-child(2) { --cx-i:1; --cx-accent:#f0b0df; } #hero .cx-place:nth-child(3) { --cx-i:2; --cx-accent:#b9caff; } #hero .cx-place:nth-child(4) { --cx-i:3; --cx-accent:#bce2da; } #hero .cx-gate { appearance:none; display:block; position:relative; width:100%; height:100%; border:0; border-top:1px solid #b5cce73d; border-right:1px solid #b5cce717; padding:0; background:transparent; color:var(--cx-white); text-align:left; cursor:pointer; pointer-events:auto; overflow:hidden; opacity:0; isolation:isolate; outline-offset:5px; } #hero .cx-place:last-child .cx-gate { border-right:0; } #hero .cx-gate::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#0b162e96,#08112517); backdrop-filter:blur(8px); opacity:.56; transition:opacity .55s var(--cx-ease); } #hero .cx-gate::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--cx-accent); box-shadow:0 0 14px var(--cx-accent); transform:scaleX(.10); transform-origin:left; opacity:.6; transition:transform .65s var(--cx-ease),opacity .5s var(--cx-ease); } #hero .cx-number { position:absolute; top:17px; left:20px; font:700 12px 'Orbitron',sans-serif; color:var(--cx-accent); } #hero .cx-code { position:absolute; top:21px; left:55px; right:22px; font:7px Consolas,monospace; letter-spacing:.13em; color:#b2c1d4; white-space:nowrap; } #hero .cx-gate-name { position:absolute; left:20px; right:42px; top:49px; font-size:20px; letter-spacing:.12em; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .5s ease; } #hero .cx-gate-desc { position:absolute; top:91px; left:20px; right:20px; font-size:10px; color:#b1bfd3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #hero .cx-arrow { position:absolute; right:20px; top:50px; color:var(--cx-accent); font:24px/1.2 sans-serif; transition:transform .5s var(--cx-ease); } #hero .cx-icon { display:none; position:absolute; width:38px; height:30px; fill:none; stroke:var(--cx-accent); stroke-width:1.2; } #hero .cx-light { position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--cx-accent); opacity:0; transform-origin:left; box-shadow:0 0 16px var(--cx-accent); pointer-events:none; } #hero .cx-gate:is(:hover,:focus-visible)::before { opacity:1; } #hero .cx-gate:is(:hover,:focus-visible)::after { transform:scaleX(1); opacity:1; } #hero .cx-gate:is(:hover,:focus-visible) .cx-arrow { transform:translate(3px,-3px); } #hero .cx-gate:is(:hover,:focus-visible) .cx-gate-name { color:var(--cx-accent); } #hero .cx-gate:focus-visible { outline:1px solid var(--cx-accent); } #hero .cx-gate:active::before { background:#182c4a9e; } #hero .cx-receiver { display:none; } #hero .cx-footer { position:absolute; bottom:max(30px,env(safe-area-inset-bottom)); left:var(--cx-gutter); display:flex; gap:38px; max-width:calc(100% - 360px); color:#a0b2c5; font:7px Consolas,monospace; letter-spacing:.12em; opacity:0; } #hero .cx-footer-idea i { color:var(--cx-pink); font-style:normal; margin:0 6px; } #hero .cx-picker { position:absolute; right:var(--cx-gutter); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; gap:3px; align-items:center; pointer-events:auto; opacity:0; z-index:5; } #hero .cx-picker-label { font:9px 'Microsoft YaHei',sans-serif; color:#b4baca; margin-right:10px; letter-spacing:.1em; } #hero .cx-picker button,#hero .cx-picker a { display:flex; align-items:center; justify-content:center; gap:6px; min-width:36px; min-height:36px; padding:7px 9px; appearance:none; border:1px solid transparent; background:#061024b3; backdrop-filter:blur(12px); color:#b4c9db; font:10px Consolas,monospace; text-decoration:none; cursor:pointer; transition:color .4s ease,background .4s ease,border-color .4s ease; } #hero .cx-picker button span { font:9px 'Microsoft YaHei',sans-serif; } #hero .cx-picker button[aria-pressed=true] { color:#e9fbfc; border-color:#a3e4e46b; background:#1b394a80; } #hero .cx-picker :is(button,a):is(:hover,:focus-visible) { border-color:var(--cx-cyan); color:#fff; outline:none; } /* B / A compass in the air, a quiet legend below. */ #hero[data-home-design=orbit] .cx-intro-anchor { top:auto; bottom:17%; width:40%; } #hero[data-home-design=orbit] .cx-title { font-size:clamp(42px,5vw,76px); } #hero[data-home-design=orbit] .cx-title .cx-outline { font-size:.71em; } #hero[data-home-design=orbit] .cx-eyebrow { margin-bottom:14px; } #hero[data-home-design=orbit] .cx-signature { display:none; } #hero[data-home-design=orbit] .cx-copy { margin-top:15px; } #hero[data-home-design=orbit] .cx-note-anchor { left:auto; right:var(--cx-gutter); top:auto; bottom:17%; width:228px; border-left:1px solid #aec7e63d; padding-left:20px; } #hero[data-home-design=orbit] .cx-nav-caption { left:var(--cx-gutter); top:140px; bottom:auto; right:auto; display:grid; gap:9px; width:200px; } #hero[data-home-design=orbit] .cx-nav-caption span:last-child { font-size:8px; } #hero[data-home-design=orbit] .cx-place { left:0; top:0; bottom:auto; width:180px; height:79px; } #hero[data-home-design=orbit] .cx-gate { border:0; border-bottom:1px solid #c7d3e43a; overflow:visible; } #hero[data-home-design=orbit] .cx-gate::before { background:linear-gradient(90deg,#0b172c16,#0814289e,#0b172c16); opacity:.6; backdrop-filter:blur(6px); } #hero[data-home-design=orbit] .cx-gate::after { top:auto; bottom:-1px; transform-origin:center; transform:scaleX(.12); height:1px; } #hero[data-home-design=orbit] .cx-gate:is(:hover,:focus-visible)::after { transform:scaleX(1); } #hero[data-home-design=orbit] .cx-number { top:10px; left:55px; font-size:9px; } #hero[data-home-design=orbit] .cx-code { display:none; } #hero[data-home-design=orbit] .cx-icon { display:block; left:5px; top:23px; transition:transform .7s var(--cx-ease); } #hero[data-home-design=orbit] .cx-gate:is(:hover,:focus-visible) .cx-icon { transform:translateY(-3px); } #hero[data-home-design=orbit] .cx-gate-name { left:55px; top:26px; right:18px; font-size:17px; letter-spacing:.10em; } #hero[data-home-design=orbit] .cx-gate-desc { left:55px; top:55px; right:4px; font-size:8px; } #hero[data-home-design=orbit] .cx-arrow { top:10px; right:6px; font-size:15px; opacity:.8; } #hero[data-home-design=orbit] .cx-link { opacity:.18; } #hero[data-home-design=orbit] .cx-link.cx-selected { opacity:.8; } #hero[data-home-design=orbit] .cx-ring { opacity:.40; stroke-width:.6; } #hero[data-home-design=orbit] .cx-ticks { stroke-dasharray:1 9; opacity:.40; } /* C / Four channels on the left; the selected frequency crosses the landscape. */ #hero[data-home-design=signal] .cx-intro-anchor { top:17%; width:41%; } #hero[data-home-design=signal] .cx-title { font-size:clamp(42px,5vw,76px); } #hero[data-home-design=signal] .cx-eyebrow { margin-bottom:14px; } #hero[data-home-design=signal] .cx-signature,#hero[data-home-design=signal] .cx-note-anchor { display:none; } #hero[data-home-design=signal] .cx-copy { margin-top:14px; } #hero[data-home-design=signal] .cx-nav-caption { bottom:calc(12% + 258px); right:auto; width:39%; font-size:7px; } #hero[data-home-design=signal] .cx-nav-caption span:last-child { display:none; } #hero[data-home-design=signal] .cx-place { left:var(--cx-gutter); width:39%; bottom:calc(12% + (3 - var(--cx-i))*62px); height:62px; } #hero[data-home-design=signal] .cx-gate { border-right:0; } #hero[data-home-design=signal] .cx-gate::before { background:linear-gradient(90deg,#051024bb,#111b304d,transparent); backdrop-filter:blur(4px); } #hero[data-home-design=signal] .cx-gate::after { top:0; right:auto; width:2px; height:100%; transform:scaleY(0); transform-origin:center; } #hero[data-home-design=signal] .cx-gate.cx-selected::after { transform:scaleY(.60); } #hero[data-home-design=signal] .cx-gate.cx-selected .cx-gate-name { color:var(--cx-accent); } #hero[data-home-design=signal] .cx-number { top:24px; left:18px; font-size:10px; } #hero[data-home-design=signal] .cx-gate-name { top:18px; left:64px; right:150px; font-size:19px; letter-spacing:.08em; } #hero[data-home-design=signal] .cx-code { top:28px; left:auto; right:44px; font-size:7px; } #hero[data-home-design=signal] .cx-gate-desc { display:none; } #hero[data-home-design=signal] .cx-arrow { top:22px; right:14px; font-size:18px; } #hero[data-home-design=signal] .cx-receiver { position:absolute; display:block; left:55%; bottom:12%; width:31%; color:var(--cx-channel-color); } #hero .cx-receiver-top,#hero .cx-receiver-foot { display:flex; justify-content:space-between; font:8px Consolas,monospace; letter-spacing:.2em; } #hero .cx-frequency { font:500 clamp(70px,10vw,144px)/1 'Orbitron',sans-serif; color:transparent; -webkit-text-stroke:1px var(--cx-channel-color); opacity:.7; margin:17px 0 4px; letter-spacing:-.03em; } #hero .cx-wave { display:block; width:100%; height:50px; fill:none; stroke:var(--cx-channel-color); stroke-width:1; } #hero .cx-wave-axis { opacity:.20; stroke-dasharray:2 6; } #hero .cx-wave-line { opacity:.85; } #hero .cx-tuning-name { font-size:17px; letter-spacing:.18em; color:#e1e9f2; margin:9px 0 7px; } #hero .cx-tuning-desc { color:#b7bfd2; font-size:10px; letter-spacing:.08em; } #hero .cx-receiver-foot { margin-top:17px; padding-top:11px; border-top:1px solid #b3c8df33; font-size:7px; } #hero[data-home-design=signal] .cx-link { display:none; } /* Portrait layouts are composed anew: scenery stays open in the middle. */ #hero.cx-compact { --cx-gutter:24px; } #hero.cx-compact .cx-header { top:max(23px,env(safe-area-inset-top)); gap:10px; } #hero.cx-compact .cx-brand svg { width:25px; height:25px; } #hero.cx-compact .cx-brand b { font-size:15px; } #hero.cx-compact .cx-brand small { font-size:6px; letter-spacing:.06em; } #hero.cx-compact .cx-status { font-size:6px; letter-spacing:.05em; gap:6px; } #hero.cx-compact .cx-edition { display:none; } #hero.cx-compact .cx-intro-anchor { left:var(--cx-gutter); top:105px; bottom:auto; width:calc(100% - var(--cx-gutter)*2); } #hero.cx-compact .cx-title { font-size:clamp(40px,9vw,68px); } #hero.cx-compact .cx-title .cx-outline { font-size:.85em; } #hero.cx-compact .cx-eyebrow { font-size:7px; gap:8px; margin-bottom:14px; } #hero.cx-compact .cx-eyebrow i { width:18px; } #hero.cx-compact .cx-copy { margin-top:14px; font-size:11px; letter-spacing:.08em; } #hero.cx-compact .cx-signature,#hero.cx-compact .cx-note-anchor { display:none; } #hero.cx-compact .cx-nav-caption { left:var(--cx-gutter); right:var(--cx-gutter); top:auto; bottom:calc(90px + 192px); width:auto; display:flex; font-size:7px; letter-spacing:.09em; } #hero.cx-compact .cx-nav-caption span:last-child { display:none; } #hero.cx-compact .cx-place { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/2*mod(var(--cx-i),2)); top:auto; bottom:calc(90px + (1 - round(down,var(--cx-i)/2))*96px); width:calc((100% - var(--cx-gutter)*2)/2); height:96px; } /* Explicit grid positions retain compatibility with older Edge versions. */ #hero.cx-compact .cx-place:nth-child(odd) { left:var(--cx-gutter); } #hero.cx-compact .cx-place:nth-child(even) { left:50%; } #hero.cx-compact .cx-place:nth-child(-n+2) { bottom:186px; } #hero.cx-compact .cx-place:nth-child(n+3) { bottom:90px; } #hero.cx-compact .cx-gate { border-right:1px solid #b5cce717; border-top:1px solid #b5cce73d; border-bottom:0; overflow:hidden; } #hero.cx-compact .cx-place:nth-child(even) .cx-gate { border-right:0; } #hero.cx-compact .cx-number { top:13px; left:12px; font-size:9px; } #hero.cx-compact .cx-code { display:none; } #hero.cx-compact .cx-gate-name { top:31px; left:12px; right:28px; font-size:17px; letter-spacing:.06em; } #hero.cx-compact .cx-gate-desc { display:block; left:12px; right:8px; top:66px; font-size:8px; } #hero.cx-compact .cx-arrow { right:12px; top:33px; font-size:17px; } #hero.cx-compact .cx-icon { display:none; } #hero.cx-compact .cx-footer { bottom:17px; max-width:100%; width:calc(100% - var(--cx-gutter)*2); justify-content:center; font-size:6px; } #hero.cx-compact .cx-footer-idea { display:none; } #hero.cx-compact .cx-picker { bottom:34px; left:var(--cx-gutter); right:var(--cx-gutter); justify-content:center; } #hero.cx-compact .cx-picker :is(button,a) { min-width:44px; min-height:44px; padding:5px 9px; background:#0713269c; } #hero.cx-compact .cx-picker-label { font-size:8px; } #hero.cx-compact .cx-picker button span { font-size:8px; } #hero.cx-compact .cx-receiver { display:none; } #hero.cx-compact .cx-map .cx-link { opacity:0; } #hero.cx-compact[data-home-design=orbit] .cx-gate { border:0; border-bottom:1px solid #b9cfe544; } #hero.cx-compact[data-home-design=orbit] .cx-gate::after { bottom:0; top:auto; transform-origin:center; } #hero.cx-compact[data-home-design=orbit] .cx-gate-name { left:42px; font-size:16px; } #hero.cx-compact[data-home-design=orbit] .cx-gate-desc { left:42px; font-size:7px; } #hero.cx-compact[data-home-design=orbit] .cx-icon { display:block; left:6px; top:37px; width:26px; height:24px; } #hero.cx-compact[data-home-design=orbit] .cx-number { left:42px; } #hero.cx-compact[data-home-design=orbit] .cx-arrow { top:11px; font-size:15px; } #hero.cx-compact[data-home-design=orbit] .cx-place:nth-child(odd) { width:calc(50% - var(--cx-gutter) - 7px); } #hero.cx-compact[data-home-design=orbit] .cx-place:nth-child(even) { left:calc(50% + 7px); width:calc(50% - var(--cx-gutter) - 7px); } #hero.cx-compact[data-home-design=signal] .cx-place { left:var(--cx-gutter); width:calc(100% - var(--cx-gutter)*2); height:53px; bottom:calc(90px + (3 - var(--cx-i))*53px); } #hero.cx-compact[data-home-design=signal] .cx-gate { border-right:0; } #hero.cx-compact[data-home-design=signal] .cx-number { top:19px; } #hero.cx-compact[data-home-design=signal] .cx-gate-name { top:13px; left:46px; right:100px; font-size:17px; } #hero.cx-compact[data-home-design=signal] .cx-code { display:block; top:23px; right:28px; left:auto; font-size:5px; letter-spacing:0; } #hero.cx-compact[data-home-design=signal] .cx-gate-desc { display:none; } #hero.cx-compact[data-home-design=signal] .cx-arrow { top:17px; right:5px; } #hero.cx-compact[data-home-design=signal] .cx-nav-caption { bottom:317px; } html.dev-mobile #hero .cx-desktop { display:none; } html.dev-mobile #hero .cx-mobile { display:block; } html.dev-mobile #hero .cx-title { font-family:'Microsoft YaHei','PingFang SC',sans-serif; letter-spacing:.05em; font-weight:600; line-height:1.15; } html.dev-mobile #hero .cx-title .cx-outline { font-size:1em; line-height:1.3; font-weight:500; } @media(max-height:720px) { #hero.cx-compact .cx-intro-anchor { top:83px; } #hero.cx-compact .cx-title { font-size:36px; } #hero.cx-compact .cx-copy { margin-top:8px; font-size:10px; } #hero.cx-compact .cx-eyebrow { margin-bottom:8px; font-size:6px; } #hero.cx-compact .cx-place { height:82px; } #hero.cx-compact .cx-place:nth-child(-n+2) { bottom:163px; } #hero.cx-compact .cx-place:nth-child(n+3) { bottom:81px; } #hero.cx-compact .cx-gate-name { top:27px; font-size:16px; } #hero.cx-compact .cx-gate-desc { top:58px; font-size:7px; } #hero.cx-compact .cx-nav-caption { bottom:257px; } #hero.cx-compact[data-home-design=signal] .cx-place { height:46px; bottom:calc(81px + (3 - var(--cx-i))*46px); } #hero.cx-compact[data-home-design=signal] .cx-gate-name { top:10px; font-size:16px; } #hero.cx-compact[data-home-design=signal] .cx-number { top:17px; } #hero.cx-compact[data-home-design=signal] .cx-code { top:20px; } #hero.cx-compact[data-home-design=signal] .cx-arrow { top:14px; } #hero.cx-compact[data-home-design=signal] .cx-nav-caption { bottom:278px; } } @media(min-width:980px) and (max-height:740px) { #hero .cx-intro-anchor { top:17%; } #hero .cx-title { font-size:66px; } #hero .cx-copy { margin-top:12px; } #hero .cx-signature { margin-top:15px; } #hero .cx-note-anchor { top:54%; } #hero .cx-place { height:106px; bottom:11%; } #hero .cx-nav-caption { bottom:calc(11% + 124px); } #hero .cx-gate-name { top:40px; font-size:19px; } #hero .cx-gate-desc { top:78px; font-size:9px; } #hero .cx-arrow { top:41px; } #hero[data-home-design=signal] .cx-intro-anchor { top:16%; } #hero[data-home-design=signal] .cx-title { font-size:51px; } #hero[data-home-design=signal] .cx-place { height:54px; bottom:calc(11% + (3 - var(--cx-i))*54px); } #hero[data-home-design=signal] .cx-nav-caption { bottom:calc(11% + 230px); } #hero[data-home-design=signal] .cx-gate-name { top:15px; } #hero[data-home-design=signal] .cx-code { top:24px; } #hero[data-home-design=signal] .cx-number { top:20px; } #hero[data-home-design=signal] .cx-arrow { top:18px; } #hero[data-home-design=signal] .cx-receiver { bottom:11%; width:29%; } #hero[data-home-design=signal] .cx-frequency { font-size:94px; } } /* Short landscape windows keep every gateway usable, including phone rotation. */ #hero.cx-horizontal { --cx-gutter:28px; } #hero.cx-horizontal .cx-header { top:19px; } #hero.cx-horizontal .cx-edition { display:none; } #hero.cx-horizontal .cx-intro-anchor { top:95px; bottom:auto; width:46%; } #hero.cx-horizontal .cx-title { font-size:clamp(30px,5vw,54px); } #hero.cx-horizontal .cx-eyebrow { margin-bottom:10px; font-size:7px; } #hero.cx-horizontal .cx-copy { margin-top:9px; font-size:10px; } #hero.cx-horizontal .cx-signature,#hero.cx-horizontal .cx-note-anchor,#hero.cx-horizontal .cx-nav-caption,#hero.cx-horizontal .cx-receiver { display:none; } #hero.cx-horizontal .cx-place { top:auto; bottom:62px; left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i)); width:calc((100% - var(--cx-gutter)*2)/4); height:83px; } #hero.cx-horizontal .cx-gate { border:0; border-top:1px solid #b5cce73d; border-right:1px solid #b5cce717; } #hero.cx-horizontal .cx-code,#hero.cx-horizontal .cx-icon { display:none; } #hero.cx-horizontal .cx-number { top:10px; left:12px; font-size:8px; } #hero.cx-horizontal .cx-gate-name { top:29px; left:12px; right:26px; font-size:16px; } #hero.cx-horizontal .cx-gate-desc { display:block; top:60px; left:12px; right:8px; font-size:7px; } #hero.cx-horizontal .cx-arrow { top:31px; right:9px; font-size:16px; } #hero.cx-horizontal .cx-footer { bottom:25px; } #hero.cx-horizontal .cx-footer-idea { display:none; } #hero.cx-horizontal .cx-picker { bottom:12px; } @media(max-width:359px) { #hero.cx-compact { --cx-gutter:18px; } #hero.cx-compact .cx-brand small { font-size:5px; } #hero.cx-compact .cx-status { font-size:5px; } #hero.cx-compact .cx-picker { gap:1px; } #hero.cx-compact .cx-picker-label { margin-right:3px; } #hero.cx-compact .cx-picker :is(button,a) { padding:5px 7px; } #hero.cx-compact[data-home-design=signal] .cx-gate-name { right:95px; font-size:15px; } } @keyframes cx-breathe { 0%,100% { opacity:.45; } 50% { opacity:1; } } @keyframes cx-signature { 0%,100% { transform:scaleX(1); opacity:.7; } 50% { transform:scaleX(.55); opacity:1; } } @keyframes cx-scan { 0% { transform:rotate(-35deg); opacity:.2; } 50% { opacity:.7; } 100% { transform:rotate(325deg); opacity:.2; } } @media(prefers-reduced-motion:reduce) { #hero .cx-ui *,#hero .cx-ui *::before,#hero .cx-ui *::after { animation:none!important; transition:none!important; } } /* Spatial studies: the gateways now behave as three different instruments. */ #hero .cx-tuner { display:none; } #hero .cx-lane,#hero .cx-stream { display:none; } #hero[data-home-design=horizon] .cx-sun-map { opacity:.32; } #hero[data-home-design=horizon] .cx-nav-caption { bottom:calc(13% + 153px); } #hero[data-home-design=horizon] .cx-note-anchor { display:none; } #hero[data-home-design=horizon] .cx-intro-anchor { top:19%; width:47%; } #hero[data-home-design=horizon] .cx-place { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i) + 10px); width:calc((100% - var(--cx-gutter)*2)/4 - 24px); bottom:13%; height:128px; perspective:650px; } #hero[data-home-design=horizon] .cx-gate { border:0; overflow:visible; rotate:x 28deg; transition:rotate .8s var(--cx-ease); transform-origin:center bottom; } #hero[data-home-design=horizon] .cx-gate::before { opacity:0; background:none; backdrop-filter:none; } #hero[data-home-design=horizon] .cx-gate::after { top:auto; bottom:0; height:1px; transform:scaleX(.3); background:linear-gradient(90deg,var(--cx-accent),transparent); } #hero[data-home-design=horizon] .cx-gate:is(:hover,:focus-visible) { rotate:x 0deg; } #hero[data-home-design=horizon] .cx-gate:is(:hover,:focus-visible)::after { transform:scaleX(1); } #hero[data-home-design=horizon] .cx-number { top:-4px; left:0; font:500 65px/1 'Orbitron',sans-serif; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:.8px var(--cx-accent); opacity:.75; transition:opacity .6s ease,text-shadow .6s ease; } #hero[data-home-design=horizon] .cx-code { top:31px; left:105px; right:0; font-size:7px; letter-spacing:.06em; } #hero[data-home-design=horizon] .cx-gate-name { left:0; right:25px; top:74px; font-size:23px; letter-spacing:.14em; text-shadow:0 2px 10px #020519; } #hero[data-home-design=horizon] .cx-gate-desc { display:none; } #hero[data-home-design=horizon] .cx-arrow { top:78px; right:0; font-size:20px; } #hero[data-home-design=horizon] .cx-gate:is(:hover,:focus-visible) .cx-number { opacity:1; text-shadow:0 0 28px #a4eeff30; } #hero[data-home-design=horizon] .cx-link { stroke:url(#cx-ground-light); opacity:.5; stroke-width:.8; } #hero[data-home-design=horizon] .cx-link.cx-selected { opacity:1; stroke-width:1.4; } #hero[data-home-design=horizon] .cx-lane { display:block; fill:url(#cx-ground-light); stroke:none; opacity:.015; transition:opacity 1s var(--cx-ease); } #hero[data-home-design=horizon] .cx-lane.cx-selected { opacity:.17; } #hero[data-home-design=horizon] .cx-stream { display:block; stroke:#cafdf3; stroke-width:1.8; stroke-dasharray:.045 .955; stroke-dashoffset:0; opacity:.28; filter:drop-shadow(0 0 4px #92f8ff); animation:cx-flight 4.8s cubic-bezier(.45,0,.55,1) infinite; } #hero[data-home-design=horizon] .cx-stream.cx-selected { opacity:.8; } @keyframes cx-flight { 0% { stroke-dashoffset:1; opacity:0; } 20% { opacity:.75; } 85% { opacity:.6; } 100% { stroke-dashoffset:0; opacity:0; } } #hero[data-home-design=orbit] .cx-sun-map { opacity:.3; } #hero[data-home-design=orbit] .cx-link { display:none; } #hero[data-home-design=orbit] .cx-intro-anchor { left:var(--cx-gutter); top:17%; bottom:auto; width:calc(100% - var(--cx-gutter)*2); } #hero[data-home-design=orbit] .cx-title { font-size:clamp(43px,5.5vw,84px); } #hero[data-home-design=orbit] .cx-title > .cx-desktop { display:flex; gap:.32em; align-items:baseline; } #hero[data-home-design=orbit] .cx-title .cx-outline { font-size:.71em; line-height:1.3; } #hero[data-home-design=orbit] .cx-note-anchor { display:none; } #hero[data-home-design=orbit] .cx-nav-caption { left:var(--cx-gutter); right:var(--cx-gutter); top:auto; bottom:calc(14% + 244px); width:auto; display:flex; justify-content:space-between; } #hero[data-home-design=orbit] .cx-nav { perspective:1300px; perspective-origin:50% 58%; } #hero[data-home-design=orbit] .cx-place { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i)); top:auto; bottom:14%; width:calc((100% - var(--cx-gutter)*2)/4); height:220px; rotate:y var(--cx-fold); transform-style:preserve-3d; transition:rotate 1s var(--cx-ease); } #hero[data-home-design=orbit] .cx-place:nth-child(odd) { --cx-fold:30deg; } #hero[data-home-design=orbit] .cx-place:nth-child(even) { --cx-fold:-30deg; } #hero[data-home-design=orbit] .cx-place.cx-selected { rotate:y 0deg; } #hero[data-home-design=orbit] .cx-gate { border:1px solid #a7d8ef29; border-left-color:#c7e7f057; border-right-color:#aac5e21f; overflow:hidden; } #hero[data-home-design=orbit] .cx-gate::before { background:linear-gradient(112deg,#0a1c3878,#121d377d 60%,#4a28665c); opacity:1; backdrop-filter:blur(13px); box-shadow:inset 1px 0 0 #c7ecfb27,inset -24px 0 50px #02091b52; transition:background .8s ease,box-shadow .8s ease; } #hero[data-home-design=orbit] .cx-place.cx-selected .cx-gate::before { background:linear-gradient(120deg,#113a505e,#2f294d75); box-shadow:inset 0 1px 0 #b8f2e58c,inset 0 -1px 0 #b8f2e561; } #hero[data-home-design=orbit] .cx-gate::after { bottom:0; top:auto; height:2px; opacity:.65; transform:scaleX(.18); } #hero[data-home-design=orbit] .cx-gate.cx-selected::after { transform:scaleX(1); } #hero[data-home-design=orbit] .cx-number { left:auto; right:17px; top:19px; font:500 72px/1 'Orbitron',sans-serif; color:transparent; -webkit-text-stroke:.7px var(--cx-accent); opacity:.37; letter-spacing:-.03em; } #hero[data-home-design=orbit] .cx-code { display:block; left:22px; top:21px; font-size:7px; width:75px; white-space:normal; line-height:1.8; } #hero[data-home-design=orbit] .cx-icon { display:block; left:22px; top:63px; width:62px; height:48px; opacity:.9; } #hero[data-home-design=orbit] .cx-gate-name { left:22px; top:139px; right:33px; font-size:25px; letter-spacing:.12em; } #hero[data-home-design=orbit] .cx-gate-desc { display:block; left:22px; right:16px; top:184px; font-size:10px; } #hero[data-home-design=orbit] .cx-arrow { top:143px; right:15px; font-size:23px; } #hero[data-home-design=orbit] .cx-gate:is(:hover,:focus-visible) .cx-icon { transform:translateY(-4px) rotate(-4deg); } #hero[data-home-design=signal] .cx-intro-anchor { top:16%; width:45%; } #hero[data-home-design=signal] .cx-title { font-size:clamp(44px,5vw,75px); } #hero[data-home-design=signal] .cx-nav-caption { display:none; } #hero[data-home-design=signal] .cx-receiver { left:var(--cx-gutter); right:auto; bottom:35%; width:calc(100% - var(--cx-gutter)*2); height:112px; display:grid; grid-template-columns:155px minmax(230px,1fr) 30%; grid-template-rows:1fr 28px; align-items:center; column-gap:24px; } #hero[data-home-design=signal] .cx-receiver-top { display:none; } #hero[data-home-design=signal] .cx-frequency { margin:0; grid-column:1; grid-row:1 / 3; font-size:98px; opacity:.86; } #hero[data-home-design=signal] .cx-tuning-name { grid-column:2; grid-row:1; align-self:end; margin:0 0 13px; font-size:38px; font-weight:300; letter-spacing:.22em; } #hero[data-home-design=signal] .cx-tuning-desc { grid-column:2; grid-row:2; margin:0; font-size:11px; } #hero[data-home-design=signal] .cx-wave { grid-column:3; grid-row:1; width:100%; height:80px; } #hero[data-home-design=signal] .cx-receiver-foot { grid-column:3; grid-row:2; padding:0; border:0; margin:0; } #hero[data-home-design=signal] .cx-tuner { display:block; position:absolute; left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/8); right:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/8); bottom:25%; height:40px; pointer-events:auto; } #hero .cx-tuner-instruction { position:absolute; bottom:54px; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:10px; font:9px 'Microsoft YaHei',sans-serif; color:#b6d3e3; letter-spacing:.1em; } #hero .cx-tuner-instruction i { font:8px Consolas,monospace; color:#d3b8d6; letter-spacing:.2em; } #hero .cx-tuner input { display:block; appearance:none; position:absolute; inset:0; width:100%; height:40px; margin:0; background:transparent; cursor:ew-resize; outline-offset:8px; z-index:2; border:0; border-radius:0; } #hero .cx-tuner input::-webkit-slider-runnable-track { height:1px; background:linear-gradient(90deg,#94ecec,#dea4ea); box-shadow:0 0 12px #bcdbf13d; } #hero .cx-tuner input::-webkit-slider-thumb { appearance:none; width:16px; height:34px; margin-top:-16px; background:linear-gradient(90deg,#daffff0d,#d6fcff9c,#daffff0d); border:1px solid #b6eff2; border-radius:0; box-shadow:0 0 18px #7edefd55; } #hero .cx-tuner input::-moz-range-track { height:1px; background:linear-gradient(90deg,#94ecec,#dea4ea); } #hero .cx-tuner input::-moz-range-thumb { width:14px; height:32px; background:#b6eff269; border:1px solid #b6eff2; border-radius:0; } #hero .cx-tuner input:focus-visible { outline:1px solid #9ee9ed; } #hero .cx-tuner-rail { position:absolute; inset:12px 0; opacity:.27; background:repeating-linear-gradient(90deg,#aed8ed 0 1px,transparent 1px calc(100% / 48)); pointer-events:none; } #hero[data-home-design=signal] .cx-place { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i)); bottom:12%; width:calc((100% - var(--cx-gutter)*2)/4); height:80px; } #hero[data-home-design=signal] .cx-gate { border:0; text-align:center; overflow:visible; } #hero[data-home-design=signal] .cx-gate::before { display:none; } #hero[data-home-design=signal] .cx-gate::after { height:15px; width:1px; top:-24px; left:50%; transform:scaleY(.45); background:var(--cx-accent); opacity:.4; } #hero[data-home-design=signal] .cx-gate.cx-selected::after { transform:scaleY(1); opacity:1; } #hero[data-home-design=signal] .cx-number { top:0; left:0; right:0; font-size:9px; } #hero[data-home-design=signal] .cx-gate-name { top:22px; left:0; right:0; font-size:19px; letter-spacing:.13em; } #hero[data-home-design=signal] .cx-code { display:block; left:0; right:0; top:61px; font-size:7px; color:#a6b6ce; } #hero[data-home-design=signal] .cx-arrow { right:18%; top:27px; font-size:15px; opacity:0; } #hero[data-home-design=signal] .cx-gate.cx-selected .cx-arrow { opacity:.8; } #hero[data-home-design=signal] .cx-sun-map { opacity:.55; } /* On touch screens the light paths become a split runway, folds become a vertical concertina, and the tuner remains a true, keyboard-accessible range input. */ #hero.cx-compact[data-home-design] .cx-intro-anchor { top:105px; width:calc(100% - var(--cx-gutter)*2); bottom:auto; } #hero.cx-compact[data-home-design] .cx-title { font-size:clamp(40px,9vw,68px); } #hero.cx-compact[data-home-design=horizon] .cx-place { left:var(--cx-gutter); width:calc(50% - var(--cx-gutter) - 14px); height:100px; bottom:90px; perspective:500px; } #hero.cx-compact[data-home-design=horizon] .cx-place:nth-child(even) { left:calc(50% + 14px); } #hero.cx-compact[data-home-design=horizon] .cx-place:nth-child(-n+2) { bottom:208px; } #hero.cx-compact[data-home-design=horizon] .cx-gate { rotate:x 20deg; } #hero.cx-compact[data-home-design=horizon] .cx-number { top:-1px; left:0; font-size:47px; } #hero.cx-compact[data-home-design=horizon] .cx-gate-name { left:0; right:20px; top:61px; font-size:18px; } #hero.cx-compact[data-home-design=horizon] .cx-arrow { top:64px; right:0; font-size:17px; } #hero.cx-compact[data-home-design=horizon] .cx-nav-caption { bottom:326px; font-size:6px; } #hero.cx-compact[data-home-design=horizon] .cx-gate-desc { display:none; } #hero.cx-compact[data-home-design=horizon] .cx-stream { stroke-width:1; opacity:.25; } #hero.cx-compact[data-home-design=horizon] .cx-link { opacity:.22; } #hero.cx-compact[data-home-design=horizon] .cx-link.cx-selected { opacity:.8; } #hero.cx-compact[data-home-design=orbit] .cx-nav { perspective:900px; perspective-origin:50% 68%; } #hero.cx-compact[data-home-design=orbit] .cx-place { left:var(--cx-gutter); width:calc(100% - var(--cx-gutter)*2); bottom:calc(96px + (3 - var(--cx-i))*66px); height:60px; rotate:x var(--cx-fold); } #hero.cx-compact[data-home-design=orbit] .cx-place:nth-child(n) { left:var(--cx-gutter); width:calc(100% - var(--cx-gutter)*2); } #hero.cx-compact[data-home-design=orbit] .cx-place:nth-child(odd) { --cx-fold:18deg; } #hero.cx-compact[data-home-design=orbit] .cx-place:nth-child(even) { --cx-fold:-18deg; } #hero.cx-compact[data-home-design=orbit] .cx-place.cx-selected { rotate:x 0deg; } #hero.cx-compact[data-home-design=orbit] .cx-gate { border:1px solid #b9dded3b; } #hero.cx-compact[data-home-design=orbit] .cx-number { left:12px; right:auto; top:10px; font-size:32px; opacity:.6; } #hero.cx-compact[data-home-design=orbit] .cx-code { display:none; } #hero.cx-compact[data-home-design=orbit] .cx-gate-name { top:11px; left:74px; right:38px; font-size:19px; } #hero.cx-compact[data-home-design=orbit] .cx-gate-desc { top:38px; left:74px; right:15px; font-size:8px; } #hero.cx-compact[data-home-design=orbit] .cx-arrow { top:21px; right:15px; font-size:18px; } #hero.cx-compact[data-home-design=orbit] .cx-icon { display:none; } #hero.cx-compact[data-home-design=orbit] .cx-nav-caption { bottom:373px; } #hero.cx-compact[data-home-design=orbit] .cx-title > .cx-desktop { display:block; } html.dev-mobile #hero.cx-compact[data-home-design=orbit] .cx-title > .cx-mobile { display:flex; align-items:baseline; gap:8px; } html.dev-mobile #hero.cx-compact[data-home-design=orbit] .cx-title { font-size:36px; } #hero.cx-compact[data-home-design=signal] .cx-place { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/4*var(--cx-i)); width:calc((100% - var(--cx-gutter)*2)/4); bottom:88px; height:60px; } #hero.cx-compact[data-home-design=signal] .cx-number { top:2px; left:0; right:0; font-size:8px; } #hero.cx-compact[data-home-design=signal] .cx-gate-name { top:23px; left:0; right:0; font-size:14px; letter-spacing:.01em; } #hero.cx-compact[data-home-design=signal] .cx-code,#hero.cx-compact[data-home-design=signal] .cx-arrow { display:none; } #hero.cx-compact[data-home-design=signal] .cx-tuner { left:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/8); right:calc(var(--cx-gutter) + (100% - var(--cx-gutter)*2)/8); bottom:173px; height:44px; } #hero.cx-compact[data-home-design=signal] .cx-tuner input { height:44px; } #hero.cx-compact[data-home-design=signal] .cx-tuner-instruction { bottom:45px; left:-12px; right:-12px; font-size:8px; letter-spacing:0; } #hero.cx-compact[data-home-design=signal] .cx-tuner-instruction i { font-size:6px; letter-spacing:.1em; } #hero.cx-compact[data-home-design=signal] .cx-tuner-rail { top:14px; bottom:14px; } #hero.cx-compact[data-home-design=signal] .cx-receiver { display:grid; bottom:265px; height:80px; grid-template-columns:80px 1fr; grid-template-rows:1fr 22px; column-gap:12px; width:calc(100% - var(--cx-gutter)*2); } #hero.cx-compact[data-home-design=signal] .cx-frequency { font-size:55px; } #hero.cx-compact[data-home-design=signal] .cx-tuning-name { font-size:24px; margin-bottom:9px; letter-spacing:.12em; } #hero.cx-compact[data-home-design=signal] .cx-tuning-desc { font-size:9px; } #hero.cx-compact[data-home-design=signal] .cx-wave,#hero.cx-compact[data-home-design=signal] .cx-receiver-foot { display:none; } @media(max-height:720px) { #hero.cx-compact[data-home-design] .cx-intro-anchor { top:83px; } #hero.cx-compact[data-home-design] .cx-title { font-size:36px; } #hero.cx-compact[data-home-design=horizon] .cx-place { height:82px; bottom:82px; } #hero.cx-compact[data-home-design=horizon] .cx-place:nth-child(-n+2) { bottom:179px; } #hero.cx-compact[data-home-design=horizon] .cx-number { font-size:36px; } #hero.cx-compact[data-home-design=horizon] .cx-gate-name { top:47px; font-size:17px; } #hero.cx-compact[data-home-design=horizon] .cx-arrow { top:51px; font-size:16px; } #hero.cx-compact[data-home-design=horizon] .cx-nav-caption { bottom:275px; } #hero.cx-compact[data-home-design=orbit] .cx-place { height:50px; bottom:calc(87px + (3 - var(--cx-i))*56px); } #hero.cx-compact[data-home-design=orbit] .cx-number { top:9px; font-size:26px; } #hero.cx-compact[data-home-design=orbit] .cx-gate-name { top:11px; left:65px; font-size:17px; } #hero.cx-compact[data-home-design=orbit] .cx-gate-desc { display:none; } #hero.cx-compact[data-home-design=orbit] .cx-arrow { top:13px; } #hero.cx-compact[data-home-design=orbit] .cx-nav-caption { bottom:321px; } html.dev-mobile #hero.cx-compact[data-home-design=orbit] .cx-title { font-size:32px; } #hero.cx-compact[data-home-design=signal] .cx-receiver { bottom:255px; height:62px; grid-template-columns:60px 1fr; } #hero.cx-compact[data-home-design=signal] .cx-frequency { font-size:44px; } #hero.cx-compact[data-home-design=signal] .cx-tuning-name { font-size:21px; margin-bottom:4px; } #hero.cx-compact[data-home-design=signal] .cx-tuning-desc { font-size:8px; } } @media(min-width:980px) and (max-height:740px) { #hero[data-home-design=horizon] .cx-title { font-size:70px; } #hero[data-home-design=orbit] .cx-title { font-size:58px; } #hero[data-home-design=orbit] .cx-place { height:185px; bottom:13%; } #hero[data-home-design=orbit] .cx-number { font-size:63px; } #hero[data-home-design=orbit] .cx-icon { top:56px; width:54px; height:42px; } #hero[data-home-design=orbit] .cx-gate-name { top:113px; font-size:24px; } #hero[data-home-design=orbit] .cx-gate-desc { top:155px; font-size:9px; } #hero[data-home-design=orbit] .cx-arrow { top:118px; } #hero[data-home-design=orbit] .cx-nav-caption { bottom:calc(13% + 210px); } #hero[data-home-design=signal] .cx-title { font-size:53px; } #hero[data-home-design=signal] .cx-receiver { bottom:35%; height:90px; grid-template-columns:120px 1fr 27%; } #hero[data-home-design=signal] .cx-frequency { font-size:80px; } #hero[data-home-design=signal] .cx-tuning-name { font-size:34px; } } /* Short landscapes: keep the instrument, condense its labeling. */ #hero.cx-horizontal[data-home-design] .cx-intro-anchor { top:82px; bottom:auto; width:46%; } #hero.cx-horizontal[data-home-design] .cx-title { font-size:37px; } #hero.cx-horizontal[data-home-design=orbit] .cx-intro-anchor { width:calc(100% - var(--cx-gutter)*2); } #hero.cx-horizontal[data-home-design] .cx-eyebrow { margin-bottom:7px; font-size:6px; } #hero.cx-horizontal[data-home-design] .cx-copy { margin-top:5px; font-size:9px; } #hero.cx-horizontal[data-home-design] .cx-signature,#hero.cx-horizontal[data-home-design] .cx-note-anchor,#hero.cx-horizontal[data-home-design] .cx-nav-caption { display:none; } #hero.cx-horizontal[data-home-design=horizon] .cx-place { height:94px; bottom:61px; } #hero.cx-horizontal[data-home-design=horizon] .cx-number { font-size:44px; } #hero.cx-horizontal[data-home-design=horizon] .cx-code { display:none; } #hero.cx-horizontal[data-home-design=horizon] .cx-gate-name { top:57px; font-size:18px; } #hero.cx-horizontal[data-home-design=horizon] .cx-arrow { top:59px; } #hero.cx-horizontal[data-home-design=orbit] .cx-place { height:117px; bottom:60px; } #hero.cx-horizontal[data-home-design=orbit] .cx-number { font-size:44px; top:12px; right:12px; } #hero.cx-horizontal[data-home-design=orbit] .cx-icon { width:38px; height:28px; top:12px; left:15px; } #hero.cx-horizontal[data-home-design=orbit] .cx-code,#hero.cx-horizontal[data-home-design=orbit] .cx-gate-desc { display:none; } #hero.cx-horizontal[data-home-design=orbit] .cx-gate-name { top:68px; left:15px; font-size:18px; } #hero.cx-horizontal[data-home-design=orbit] .cx-arrow { top:70px; right:12px; font-size:18px; } #hero.cx-horizontal[data-home-design=signal] .cx-receiver { display:none; } #hero.cx-horizontal[data-home-design=signal] .cx-tuner { bottom:156px; } #hero.cx-horizontal[data-home-design=signal] .cx-tuner-instruction { display:none; } #hero.cx-horizontal[data-home-design=signal] .cx-place { bottom:60px; height:66px; } #hero.cx-horizontal[data-home-design=signal] .cx-code { top:50px; font-size:6px; } #hero.cx-horizontal[data-home-design=signal] .cx-gate-name { font-size:17px; } html.dev-mobile #hero.cx-horizontal[data-home-design] .cx-title { font-size:28px; } html.dev-mobile #hero.cx-horizontal[data-home-design] .cx-title > .cx-mobile { display:flex; gap:7px; align-items:baseline; } html.dev-mobile #hero.cx-horizontal[data-home-design] .cx-title .cx-outline { font-size:1em; } html.dev-mobile #hero[data-home-design] .cx-title > .cx-desktop { display:none; } @media(prefers-reduced-motion:reduce) { #hero .cx-ui .cx-stream { animation:none; stroke-dasharray:none; opacity:.15; } }