/* Shared mechanical web-gallery surfaces, retained verbatim from accepted design. */
.ds { --ds-bg:#081922; --ds-ink:#e0edf0; --ds-soft:#88a8b7; --ds-line:#7bbad024; --ds-accent:#9cd6e5; background:var(--ds-bg); color:var(--ds-ink); font-family:ZaowuSans,"Microsoft YaHei",sans-serif; }
:root[data-theme="light"] .ds { --ds-bg:#dce6e7; --ds-ink:#173341; --ds-soft:#577583; --ds-line:#285b7628; --ds-accent:#286d84; }
.ds a,.ds button { color:inherit; }
.ds a:focus-visible,.ds button:focus-visible { outline:2px solid var(--ds-accent); outline-offset:5px; }
.ds-header { position:fixed; inset:0 0 auto; z-index:100; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 4%; border-bottom:1px solid var(--ds-line); background:var(--ds-bg); }
.ds-brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:650; }
.ds-brand .ey-badge { display:block; width:43px; height:43px; background-size:contain; background-position:center; background-repeat:no-repeat; }
.ds-brand small { display:block; font-size:10px; color:var(--ds-soft); margin-top:3px; font-weight:400; }
.ds-header nav { display:flex; align-items:center; gap:8px; font-size:12px; }
.ds-header nav a,.ds-header button { border:1px solid var(--ds-line); padding:8px 12px; border-radius:3px; background:transparent; }
.ds-header nav .selected { background:var(--ds-accent); color:var(--ds-bg); }
.ds-story { height:360svh; position:relative; }
.ds-stage { position:sticky; top:0; height:100svh; min-height:650px; overflow:hidden; isolation:isolate; }
.ds-ambient { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ds-grid { position:absolute; inset:0; background-image:linear-gradient(var(--ds-line) 1px,transparent 1px),linear-gradient(90deg,var(--ds-line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at center,#0009,#000); }
.ds-ambient:after { content:''; position:absolute; inset:105px 3% 64px; border:1px solid var(--ds-line); clip-path:polygon(0 15px,15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px)); }
.ds-halo { position:absolute; inset:8%; background:radial-gradient(ellipse at 48% 48%,#80bfd526,transparent 62%); }
.ds-intro { position:absolute; top:110px; left:5%; z-index:3; pointer-events:none; }
.ds-intro p { font-size:10px; color:#c9a96b; letter-spacing:.13em; }
.ds-intro h1 { font-size:32px; letter-spacing:.06em; margin:8px 0; }
.ds-intro>span { font-size:12px; color:var(--ds-soft); }
.ds-space { position:absolute; inset:0; perspective:1100px; perspective-origin:50% 48%; }
.ds-screen { position:absolute; left:50%; top:47%; width:min(660px,65vw); transform-style:preserve-3d; will-change:transform; }
.ds-browser { position:relative; padding:9px; background:linear-gradient(125deg,#d4dade,#738d9a 10%,#324954 11%,#142a36 35%,#788d96 72%,#c7cdcb); border:1px solid #95b8c5; border-radius:12px; box-shadow:0 25px 75px #0005,inset 0 1px #fff8; overflow:hidden; }
.ds-browser>header { display:flex; justify-content:space-between; align-items:center; padding:8px 10px 12px; font:10px ZaowuSans,sans-serif; color:#c6d7de; }
.ds-browser>header>div { display:flex; gap:5px; }
.ds-browser>header i { width:5px; height:5px; border-radius:50%; background:#d0ae6d; }
.ds-browser>header i:nth-child(2) { background:#85b7c9; }.ds-browser>header i:nth-child(3) { background:#768994; }
.ds-interface { height:330px; overflow:hidden; padding:20px 26px; background:#0e1822; color:#dce4f3; border:1px solid #0a1b24; border-radius:5px; }
.ds-screen-0 .ds-interface { background:linear-gradient(130deg,#151823,#202039); }
.ds-screen-1 .ds-interface { background:#f4f4f0; color:#203c40; }
.ds-screen-2 .ds-interface { background:linear-gradient(120deg,#0c2428,#11353b); }
.ds-ui-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid #8dbbda22; font-size:10px; }
.ds-ui-top strong { font-size:15px; letter-spacing:.12em; }
.ds-ui-top span { opacity:.6; font-size:9px; }
.ds-ui-title { margin-top:17px; }.ds-ui-title small,.ds-chat small { font-size:10px; opacity:.7; }
.ds-ui-title h3,.ds-chat h3 { font-size:25px; line-height:1.3; margin:7px 0 12px; font-weight:600; }
.ds-wave { height:44px; display:flex; align-items:center; gap:5px; padding:6px 14px; background:#9384fa0d; border:1px solid #9e9bde22; border-radius:4px; }
.ds-wave i { display:block; flex:1; height:var(--bar); min-height:3px; background:linear-gradient(#b9a2ff,#748ffc); border-radius:3px; }
.ds-ui-cards { display:flex; gap:10px; margin-top:15px; }
.ds-ui-cards>div { flex:1; padding:12px; border:1px solid #8cbacc29; border-radius:5px; background:#8596d110; }
.ds-ui-cards b { display:block; font-size:14px; margin-bottom:4px; }.ds-ui-cards span { font-size:10px; opacity:.65; }
.ds-chat { display:grid; grid-template-columns:100px 1fr; gap:20px; margin-top:18px; }
.ds-chat aside { display:flex; flex-direction:column; gap:21px; font-size:9px; color:#647d79; border-right:1px solid #203b4022; }
.ds-chat aside b { font-weight:400; color:#295b5d; }
.ds-message { font-size:10px; padding:10px 12px; background:#dfe6df; border-radius:5px; margin:10px 0; }
.ds-response { display:flex; align-items:center; gap:10px; font-size:10px; margin:16px 0; }
.ds-response i { width:8px; height:8px; border-radius:50%; background:#519594; box-shadow:0 0 10px #52959755; }
.ds-input { display:flex; justify-content:space-between; padding:12px; border:1px solid #b5c6c2; border-radius:6px; color:#718781; font-size:10px; }
.ds-chart { position:relative; display:flex; gap:8px; height:64px; margin-top:18px; align-items:end; padding-bottom:17px; }
.ds-chart i { flex:1; background:linear-gradient(#73c7c7,#26727e); opacity:.65; border-radius:3px 3px 0 0; }
.ds-chart span { position:absolute; bottom:0; font-size:8px; opacity:.5; }
.ds-screen-shine { position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 28%,#ffffff08 45%,transparent 62%); }
.ds-screen-label { display:flex; justify-content:space-between; font:9px ZaowuSans,sans-serif; color:var(--ds-soft); margin:12px 10px; letter-spacing:.08em; }
.ds-mount { position:absolute; width:25%; height:35px; bottom:-10px; left:37.5%; background:linear-gradient(90deg,#7e6738,#c9b17b 45%,#69592d); border:1px solid #dfc991; border-radius:3px; transform:translateZ(-18px); box-shadow:0 20px 40px #0004; }
.ds svg.ds-rail { position:absolute; bottom:12%; left:50%; width:160%; height:50%; transform:translateX(-50%) rotateX(40deg); fill:none; stroke:#88b4c6; stroke-width:5; opacity:.55; }
.ds svg.ds-rail .ds-tick { stroke-width:1; opacity:.4; }.ds-track-glow { stroke:#d9bc7b; stroke-width:6; stroke-dasharray:90 1400; animation:dsFlow 9s linear infinite; }
.ds-depth svg.ds-rail { display:none; }.ds-room { position:absolute; inset:20% 4% 12%; transform-style:preserve-3d; }
.ds-rail .ds-room { display:none; }
.ds-room i { position:absolute; inset:0; border:1px solid #7bbad03a; box-shadow:inset 0 0 45px #4b9bac08; }
.ds-room i:nth-child(2) { inset:13%; opacity:.65; }.ds-room i:nth-child(3) { inset:26%; opacity:.4; }
.ds-caption { position:absolute; bottom:96px; left:50%; transform:translateX(-50%); width:min(720px,82%); text-align:center; z-index:60; }
.ds-caption p { font-size:10px; color:#c9a96b; letter-spacing:.18em; }.ds-caption h2 { font-size:25px; font-weight:550; margin:6px 0; }
.ds-caption>span { display:block; font-size:12px; color:var(--ds-soft); line-height:1.6; max-width:560px; margin:0 auto; }
.ds-caption>a { display:inline-block; margin-top:9px; font-size:11px; color:var(--ds-accent); border-bottom:1px solid var(--ds-line); padding:3px; }
.ds-bottom { position:absolute; bottom:25px; left:5%; right:5%; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:15px; color:var(--ds-soft); font-size:10px; }
.ds-bottom small { font-size:9px; }.ds-dots { display:flex; gap:8px; }
.ds-dots button { width:38px; height:30px; background:transparent; border:1px solid var(--ds-line); color:var(--ds-soft); font:10px ZaowuSans,sans-serif; cursor:pointer; }
.ds-dots button[aria-pressed="true"] { color:var(--ds-bg); background:var(--ds-accent); }
.ds-progress { position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--ds-accent); transform:scaleX(var(--ds-progress,0)); transform-origin:left; }
.ds[data-paused="true"] .ds-track-glow { animation-play-state:paused; }
@keyframes dsFlow { to{stroke-dashoffset:-1490} }
@media(min-width:760px) and (max-height:800px) {
 .ds-screen { top:44%; }.ds-interface { height:270px; padding:14px 24px; }.ds-ui-title { margin-top:10px; }.ds-ui-title h3,.ds-chat h3 { font-size:21px; }
 .ds-ui-cards>div { padding:8px; }.ds-chat { margin-top:10px; }.ds-chat aside { gap:17px; }.ds-response { margin:10px 0; }.ds-chart { height:46px; }
}
@media(max-width:759px) {
 .ds-header { gap:8px; padding:12px 4%; align-items:start; }.ds-brand { font-size:13px; gap:7px; }.ds-brand .ey-badge { width:28px; height:28px; }.ds-brand small { font-size:8px; }
 .ds-header nav { justify-content:end; flex-wrap:wrap; max-width:188px; gap:5px; font-size:10px; }.ds-header nav a,.ds-header button { padding:6px 8px; font-size:10px; }
 .ds-story { height:330svh; }.ds-stage { min-height:570px; }.ds-intro { top:112px; left:6%; }.ds-intro h1 { font-size:25px; }.ds-intro>span { display:block; font-size:10px; width:280px; line-height:1.6; }
 .ds-screen { width:88vw; top:47%; }.ds-browser { padding:5px; border-radius:8px; }.ds-browser>header { font-size:8px; padding:5px 5px 8px; }
 .ds-interface { height:215px; padding:12px 14px; }.ds-ui-top { padding-bottom:9px; }.ds-ui-top strong { font-size:11px; }.ds-ui-top span { font-size:7px; }
 .ds-ui-title { margin-top:10px; }.ds-ui-title h3,.ds-chat h3 { font-size:19px; }.ds-ui-title small,.ds-chat small { font-size:8px; }
 .ds-wave { height:27px; padding:3px 7px; gap:3px; }.ds-ui-cards { gap:6px; margin-top:9px; }.ds-ui-cards>div { padding:8px; }.ds-ui-cards b { font-size:11px; }.ds-ui-cards span { font-size:8px; }
 .ds-chat { grid-template-columns:58px 1fr; gap:10px; margin-top:10px; }.ds-chat aside { font-size:7px; gap:17px; }.ds-chat h3 { margin:4px 0 8px; }.ds-message,.ds-input,.ds-response { font-size:8px; }.ds-message,.ds-input { padding:8px; }.ds-response { gap:5px; margin:9px 0; }
 .ds-chart { height:37px; margin-top:12px; }.ds-chart span { font-size:6px; }.ds-screen-label { font-size:7px; margin:9px 5px; }
 .ds-caption { bottom:100px; width:86%; }.ds-caption h2 { font-size:21px; }.ds-caption>span { font-size:10px; }.ds-caption>a { font-size:10px; }
 .ds-bottom { bottom:22px; flex-wrap:wrap; font-size:8px; gap:10px; }.ds-bottom small { width:100%; text-align:center; font-size:8px; }.ds-dots button { width:28px; height:23px; }
}
@media(prefers-reduced-motion:reduce) {.ds-track-glow{animation:none}}