/* One optical axis; four parallel apertures. All artwork is native CSS/SVG. */
#hero[data-home-design=axis] { --ax-ease:cubic-bezier(.16,1,.3,1); color:#edf5ff; }
#hero .ax-ui { position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; pointer-events:none; scrollbar-width:thin; scrollbar-color:#9ddfe565 transparent; font:13px/1.6 'Microsoft YaHei','PingFang SC',sans-serif; }
#hero.ax-scroll .ax-ui { pointer-events:auto; }
#hero .ax-layout { position:relative; width:100%; min-height:100%; isolation:isolate; }
#hero .ax-header { position:absolute; top:max(28px,env(safe-area-inset-top)); left:var(--ax-gutter); right:var(--ax-gutter); display:flex; align-items:center; justify-content:space-between; gap:20px; opacity:0; }
#hero .ax-brand { display:flex; gap:12px; align-items:center; }
#hero .ax-brand svg { width:30px; height:30px; fill:none; stroke:#9cece9; stroke-width:1; }
#hero .ax-brand b { font:700 18px 'Orbitron',sans-serif; letter-spacing:.18em; }
#hero .ax-brand i { font-style:normal; color:#dfb2ee; }
#hero .ax-brand small { display:block; margin-top:6px; color:#b6c7d5; font:7px Consolas,monospace; letter-spacing:.16em; }
#hero .ax-edition,#hero .ax-status { display:flex; align-items:center; gap:14px; color:#b9c8da; font:8px Consolas,monospace; letter-spacing:.15em; }
#hero .ax-edition i { color:#87dfe7; font-style:normal; }
#hero .ax-status { gap:8px; }
#hero .ax-status i { width:4px; height:4px; background:#9ceee5; box-shadow:0 0 11px #9ceee5; animation:ax-beacon 4s ease-in-out infinite; }
#hero .ax-intro { position:absolute; left:var(--ax-gutter); top:var(--ax-intro-top); width:48%; max-width:690px; opacity:0; background:none; }
#hero .ax-eyebrow { display:flex; gap:12px; align-items:center; color:#b2d0e1; font:8px/1.5 Consolas,monospace; letter-spacing:.16em; margin:0 0 21px; }
#hero .ax-eyebrow i { display:block; width:28px; height:1px; background:#a7deec75; }
#hero .ax-eyebrow span:last-child { color:#d7addd; }
#hero .ax-title { display:flex; flex-direction:column; align-items:flex-start; gap:0; margin:0; font:900 clamp(62px,6.4vw,106px)/.98 'Orbitron',sans-serif; letter-spacing:.015em; }
#hero .ax-motto { display:block; width:100%; white-space:nowrap; }
#hero .ax-motto i { position:relative; font-style:normal; display:inline-block; will-change:transform; color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:.65px #b5dae6a6; }
#hero .ax-motto i::before { content:attr(data-glyph); position:absolute; inset:0; display:block; color:#e5f6ff; -webkit-text-fill-color:transparent; -webkit-text-stroke:0; background-color:#dff8ff; background-image:repeating-linear-gradient(0deg,transparent 0 3px,#02081459 3px 4px),linear-gradient(100deg,#dff8ff 0%,#fff 16%,#8fe6ff 40%,#ff9ae8 64%,#ffe3fb 84%,#fff 100%); background-size:100% 100%,220% 100%; background-position:0 0,120% 0; background-repeat:repeat,repeat-x; background-clip:text; -webkit-background-clip:text; clip-path:inset(calc((1 - var(--ax-ink,0))*102% - 1%) -2% -2% -2%); animation:ax-holo-fill 6s cubic-bezier(.45,0,.55,1) var(--ax-ink-delay,0s) infinite; pointer-events:none; }
#hero .ax-build i::before { background-image:repeating-linear-gradient(0deg,transparent 0 3px,#02081445 3px 4px),linear-gradient(100deg,#f6fbff 0%,#fff 16%,#c4edff 40%,#e8c7ed 64%,#ffe3fb 84%,#fff 100%); }
#hero .ax-outline { color:transparent; -webkit-text-stroke:1px #c2d8e6; font-size:.76em; line-height:1.14; margin:6px 0; font-weight:700; }
#hero .ax-outline i { -webkit-text-stroke:1px #c2d8e6; }
#hero .ax-outline i::before { content:none; animation:none; }
#hero .ax-future i { -webkit-text-stroke:.65px #a6cee57a; }
#hero .ax-copy { margin-top:21px; color:#e2edf4; font-size:13px; letter-spacing:.1em; line-height:1.9; overflow-wrap:anywhere; text-shadow:0 2px 8px #060f28; }
#hero .ax-copy-sub { color:#b6c5d9; font-size:11px; margin:6px 0 0; line-height:1.85; letter-spacing:.06em; overflow-wrap:anywhere; text-shadow:0 2px 8px #060f28; }
#hero .ax-signature { display:flex; align-items:center; gap:15px; color:#aec6dc; font:8px/1.5 Consolas,monospace; margin-top:20px; letter-spacing:.13em; }
#hero .ax-meter { display:block; position:relative; flex:0 0 82px; height:4px; background:linear-gradient(90deg,#93ede9 0 60%,#8ea3d940 60% 100%); overflow:hidden; }
#hero .ax-meter i { display:block; height:100%; width:20px; background:linear-gradient(90deg,transparent,#fff,transparent); animation:ax-meter 6s var(--ax-ease) infinite; }
#hero .ax-dock { position:absolute; bottom:var(--ax-dock-bottom); left:var(--ax-gutter); width:min(calc(100% - var(--ax-gutter)*2),clamp(560px,54vw,648px)); opacity:0; }
#hero .ax-dock-caption { display:flex; justify-content:space-between; gap:16px; align-items:center; font:8px/1.6 Consolas,monospace; letter-spacing:.17em; margin:0 0 16px; color:#afc4d7; }
#hero .ax-dock-caption span:last-child { font:9px/1.6 'Microsoft YaHei',sans-serif; letter-spacing:.12em; text-align:right; }
#hero .ax-nav { position:relative; display:flex; align-items:flex-end; gap:var(--ax-gap); height:var(--ax-panel-height); width:100%; pointer-events:auto; }
#hero .ax-posts { position:absolute; inset:0; pointer-events:none; }
#hero .ax-posts i { position:absolute; top:100%; width:1px; height:17px; background:linear-gradient(180deg,#b2e4f54d,#b4e9ed0d); }
#hero.ax-phone .ax-posts i { height:16px; }
#hero.ax-landscape .ax-posts i { height:13px; }
#hero .ax-panel { --ax-open:0; --ax-accent:#9cece9; --ax-card-height:calc(var(--ax-closed-size) + (var(--ax-panel-height) - var(--ax-closed-size))*var(--ax-open)); --ax-slant:calc(var(--ax-card-height)*.2); appearance:none; position:relative; flex:0 0 96px; min-width:0; height:var(--ax-card-height); margin:0; padding:0; border:0; border-radius:0; color:#ebf6fc; background:transparent; font:inherit; text-align:left; isolation:isolate; clip-path:polygon(var(--ax-slant) 0,100% 0,calc(100% - var(--ax-slant)) 100%,0 100%); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#hero .ax-panel:nth-child(2) { --ax-accent:#e4b0ed; }
#hero .ax-panel:nth-child(3) { --ax-accent:#adcbff; }
#hero .ax-panel:nth-child(4) { --ax-accent:#b6e5d8; }
#hero .ax-panel::before { content:''; position:absolute; inset:0; z-index:-2; background:linear-gradient(112deg,var(--ax-accent),#365071 25%,#263651 60%,var(--ax-accent)); opacity:calc(.38 + var(--ax-open)*.22); }
#hero .ax-panel::after { content:''; position:absolute; inset:1px 1px 5px; z-index:-1; clip-path:polygon(calc(var(--ax-slant) - .2px) 0,100% 0,calc(100% - var(--ax-slant) + 1px) 100%,0 100%); background:linear-gradient(112deg,#07182be8,#101b32d9 65%,#281b3bcc); backdrop-filter:blur(10px) saturate(.85); }
#hero .ax-panel-facet { position:absolute; inset:1px 2px 6px; pointer-events:none; background:linear-gradient(118deg,transparent 72%,#a8caff0a 72%),repeating-linear-gradient(0deg,transparent 0 16px,#91cce405 16px 17px); opacity:calc(.35 + var(--ax-open)*.45); }
#hero .ax-icon-wrap { position:absolute; top:50%; left:calc(50% - var(--ax-open)*(50% - 50px)); width:56px; height:56px; translate:-50% -50%; pointer-events:none; }
#hero .ax-icon { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--ax-accent); stroke-width:1.1; stroke-linejoin:miter; stroke-linecap:square; }
#hero .ax-icon path,#hero .ax-icon circle,#hero .ax-icon rect { vector-effect:non-scaling-stroke; }
#hero .ax-isometric-icon { filter:drop-shadow(0 0 2px #a7e8ff28); }
#hero .ax-model-back { stroke-opacity:.24; stroke-width:.85; }
#hero .ax-isometric-icon[data-model=signal-bridge] .ax-model-back { stroke-opacity:.42; }
#hero .ax-model-main { stroke-opacity:.95; }
#hero .ax-model-accent { stroke:#e0f6ff; stroke-width:1.35; }
#hero .ax-panel-copy { position:absolute; left:88px; right:32px; top:calc(50% - 2px); translate:0 -50%; opacity:clamp(0,calc((var(--ax-open) - .25)/.65),1); transform:translateX(calc((1 - var(--ax-open))*10px)); pointer-events:none; text-shadow:0 2px 8px #040b18; }
#hero .ax-panel-code { display:block; color:#adb6cf; font:6px/1.6 Consolas,monospace; letter-spacing:.14em; margin-bottom:4px; white-space:nowrap; }
#hero .ax-panel-name { display:block; font-size:21px; letter-spacing:.12em; line-height:1.4; white-space:nowrap; }
#hero .ax-panel-description { display:block; margin-top:6px; color:#aebfd1; font-size:9px; letter-spacing:.06em; line-height:1.7; overflow-wrap:anywhere; }
#hero .ax-panel-arrow { position:absolute; top:50%; right:19px; translate:0 -50%; font:17px sans-serif; color:var(--ax-accent); opacity:var(--ax-open); }
#hero .ax-panel-foot { position:absolute; height:1px; bottom:5px; left:14px; right:14px; background:linear-gradient(90deg,transparent,var(--ax-accent) 32%,var(--ax-accent) 68%,transparent); opacity:calc(.12 + var(--ax-open)*.7); transform:scaleX(calc(.18 + var(--ax-open)*.82)); box-shadow:0 0 8px var(--ax-accent); }
#hero .ax-panel:focus-visible::before { background:var(--ax-accent); }
#hero .ax-axis { position:relative; height:1px; margin:17px -14px 0; background:linear-gradient(90deg,transparent,#6ad9ed80 10%,#c2e9f4d9 40%,#e6a1eead 72%,transparent); box-shadow:0 0 7px #8bd5ef6b,0 3px 18px #a79cf342; pointer-events:none; }
#hero .ax-axis::before,#hero .ax-axis::after { content:''; position:absolute; width:4px; height:4px; top:-1.5px; background:#a9f9f5; box-shadow:0 0 8px #a9f9f5; }
#hero .ax-axis::before { left:2%; } #hero .ax-axis::after { right:2%; background:#edb8f9; }
#hero .ax-axis i { position:absolute; width:12%; top:-1px; height:3px; left:0; background:linear-gradient(90deg,transparent,#dcffff,transparent); animation:ax-axis 9s cubic-bezier(.45,0,.55,1) infinite; box-shadow:0 0 12px #b7e9f94d; }
#hero .ax-axis b { position:absolute; inset:-8px 0; background:linear-gradient(180deg,transparent,#95cdef0e,transparent); }
#hero .ax-selection { margin-top:13px; display:flex; gap:16px; justify-content:space-between; color:#9aafc5; font:7px/1.6 Consolas,monospace; letter-spacing:.13em; }
#hero .ax-touch-hint { color:#c4c5dd; font:9px 'Microsoft YaHei',sans-serif; letter-spacing:.06em; visibility:hidden; }
html.dev-mobile #hero .ax-touch-hint { visibility:visible; }
#hero .ax-footer { position:absolute; left:var(--ax-gutter); right:var(--ax-gutter); bottom:max(26px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; color:#a5bad0; font:7px/1.6 Consolas,monospace; letter-spacing:.1em; opacity:0; }
#hero .ax-footer i { font-style:normal; color:#d7b6e7; margin:0 6px; }
#hero .ax-letter-fault { animation:ax-fault .16s cubic-bezier(.2,.7,.3,1) both; text-shadow:2px 0 #8deeff,-2px 0 #dd8ee6; }
#hero.ax-compact .ax-title { font-size:clamp(44px,8.7vw,76px); }
#hero.ax-compact .ax-intro { width:60%; }
#hero.ax-phone .ax-header { top:max(21px,env(safe-area-inset-top)); display:grid; grid-template-columns:minmax(0,1fr) auto; row-gap:13px; column-gap:10px; }
#hero.ax-phone .ax-brand { gap:9px; }
#hero.ax-phone .ax-brand svg { width:25px; height:25px; }
#hero.ax-phone .ax-brand b { font-size:15px; }
#hero.ax-phone .ax-brand small { font-size:5.5px; letter-spacing:.08em; }
#hero.ax-phone .ax-status { grid-column:2; grid-row:1; font-size:6px; letter-spacing:.05em; gap:6px; }
#hero.ax-phone .ax-edition { grid-column:1 / 3; grid-row:2; font-size:6px; letter-spacing:.12em; }
#hero.ax-phone .ax-intro { width:calc(100% - var(--ax-gutter)*2); max-width:540px; }
#hero.ax-phone .ax-title { font-size:clamp(40px,12.8vw,68px); }
#hero.ax-phone .ax-eyebrow { font-size:6.5px; letter-spacing:.1em; gap:9px; margin-bottom:15px; }
#hero.ax-phone .ax-eyebrow i { width:20px; }
#hero.ax-phone .ax-copy { font-size:11px; margin-top:17px; }
#hero.ax-phone .ax-copy-sub { font-size:9px; margin-top:4px; }
#hero.ax-phone .ax-signature { font-size:6px; gap:11px; margin-top:14px; }
#hero.ax-phone .ax-meter { flex-basis:58px; height:3px; }
#hero.ax-phone .ax-dock { width:calc(100% - var(--ax-gutter)*2); }
#hero.ax-phone .ax-icon-wrap { width:36px; height:36px; left:calc(50% - var(--ax-open)*(50% - 26px)); }
#hero.ax-phone .ax-panel-copy { left:46px; right:15px; }
#hero.ax-phone .ax-panel-code { font-size:5px; letter-spacing:0; margin-bottom:5px; white-space:normal; }
#hero.ax-phone .ax-panel-name { font-size:17px; letter-spacing:.02em; }
#hero.ax-phone .ax-panel-description { margin-top:5px; font-size:8px; line-height:1.65; letter-spacing:0; }
#hero.ax-phone .ax-panel-arrow { top:11px; right:14px; font-size:11px; translate:0 0; }
#hero.ax-phone .ax-dock-caption { font-size:6px; letter-spacing:.04em; gap:10px; margin-bottom:15px; }
#hero.ax-phone .ax-dock-caption span:last-child { font-size:7px; letter-spacing:.04em; }
#hero.ax-phone .ax-axis { margin-top:16px; margin-left:-7px; margin-right:-7px; }
#hero.ax-phone .ax-selection { margin-top:12px; font-size:6px; letter-spacing:0; gap:8px; }
#hero.ax-phone .ax-touch-hint { font-size:7px; }
#hero.ax-phone .ax-footer { bottom:max(18px,env(safe-area-inset-bottom)); font-size:5.5px; column-gap:12px; row-gap:4px; letter-spacing:.035em; }
#hero.ax-phone .ax-footer > span:nth-child(2) { margin-left:auto; }
#hero.ax-phone .ax-footer > span:last-child { flex-basis:100%; text-align:center; }
@media(max-height:650px) { #hero.ax-phone .ax-title { font-size:clamp(34px,10.7vw,48px); } #hero.ax-phone .ax-eyebrow { margin-bottom:10px; } #hero.ax-phone .ax-copy { margin-top:12px; } #hero.ax-phone .ax-signature { margin-top:11px; } }
@media(max-width:359px) { #hero.ax-phone .ax-panel-name { font-size:16px; } #hero.ax-phone .ax-icon-wrap { width:32px; height:32px; } }
@media(min-width:980px) and (max-height:800px) { #hero .ax-title { font-size:clamp(54px,10vh,86px); } }
#hero.ax-landscape .ax-header { top:20px; }
#hero.ax-landscape .ax-intro { width:calc(100% - var(--ax-gutter)*2); max-width:none; }
#hero.ax-landscape .ax-intro { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:25px; row-gap:4px; }
#hero.ax-landscape .ax-title { font-size:clamp(23px,5.6vh,32px); line-height:1.02; }
#hero.ax-landscape .ax-title { grid-column:1; grid-row:2 / 5; align-self:start; }
#hero.ax-landscape .ax-outline { margin:2px 0; font-size:.76em; }
#hero.ax-landscape .ax-eyebrow { margin-bottom:10px; font-size:7px; }
#hero.ax-landscape .ax-eyebrow { grid-column:1; grid-row:1; margin:0; }
#hero.ax-landscape .ax-copy { margin-top:10px; font-size:10px; }
#hero.ax-landscape .ax-copy-sub { font-size:9px; }
#hero.ax-landscape .ax-signature { margin-top:10px; font-size:6px; }
#hero.ax-landscape .ax-copy { grid-column:2; grid-row:1; margin:0; }
#hero.ax-landscape .ax-copy-sub { grid-column:2; grid-row:2; margin:0; }
#hero.ax-landscape .ax-signature { grid-column:2; grid-row:3; margin-top:5px; }
#hero.ax-landscape .ax-dock-caption { margin-bottom:12px; font-size:7px; }
#hero.ax-landscape .ax-panel-copy { left:78px; right:30px; }
#hero.ax-landscape .ax-icon-wrap { width:44px; height:44px; left:calc(50% - var(--ax-open)*(50% - 43px)); }
#hero.ax-landscape .ax-panel-name { font-size:19px; }
#hero.ax-landscape .ax-panel-description { font-size:9px; margin-top:5px; }
#hero.ax-landscape .ax-panel-code { font-size:6px; margin-bottom:4px; }
#hero.ax-landscape .ax-axis { margin-top:13px; }
#hero.ax-landscape .ax-selection { margin-top:10px; }
#hero.ax-landscape .ax-footer { bottom:16px; font-size:6px; }
@keyframes ax-beacon { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@keyframes ax-spectrum { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }
@keyframes ax-holo-fill { 0%,100% { background-position:0 0,120% 0; } 50% { background-position:0 0,-80% 0; } }
@keyframes ax-meter { 0% { transform:translateX(-25px); opacity:0; } 30% { opacity:.9; } 75%,100% { transform:translateX(100px); opacity:0; } }
@keyframes ax-axis { 0% { left:0; opacity:0; } 12% { opacity:.8; } 88% { opacity:.8; } 100% { left:88%; opacity:0; } }
@keyframes ax-fault { 0%,100% { filter:none; } 25% { filter:drop-shadow(2px 0 #8deeff) drop-shadow(-2px 0 #dd8ee6); } 60% { filter:drop-shadow(-1px 0 #8deeff); } }
@media(prefers-reduced-motion:reduce) { #hero .ax-ui *,#hero .ax-ui *::before,#hero .ax-ui *::after { animation:none!important; transition:none!important; } }
#hero[data-home-design=axis]:not(.station-live) .ax-ui *,#hero[data-home-design=axis]:not(.station-live) .ax-ui *::before,#hero[data-home-design=axis]:not(.station-live) .ax-ui *::after { animation-play-state:paused; }