/* Homepage-only visual layer. Shared style.css and its tokens are preserved. */
@font-face{font-family:ZW Geist;src:url('assets/fonts/Geist.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:ZW Mono;src:url('assets/fonts/GeistMono.woff2') format('woff2');font-weight:100 900;font-display:swap}
body.architecture{--zw-paper:#f1eee7;--zw-ink:#232323;--zw-muted:#68665f;--zw-line:#d6d3cc;--zw-accent:#eaa04b;--zw-ease:cubic-bezier(.23,1,.32,1);--zw-mono:'ZW Mono','PingFang SC','Microsoft YaHei',monospace;--zw-sans:'ZW Geist',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;background:var(--zw-paper);color:var(--zw-ink);font-family:var(--zw-sans);font-size:18px;line-height:1.7;overflow-x:clip}
body.architecture::before,body.architecture::after{display:none}
.architecture :where(h1,h2,h3,h4,p,ul,ol){margin:0;padding:0}
.architecture :where(h1,h2){font-weight:500;letter-spacing:-.035em;line-height:1.15;text-shadow:none}
.architecture h2{font-size:48px;color:inherit}
.architecture :where(a,button,input,select,summary){-webkit-tap-highlight-color:transparent}
.architecture :where(a){color:inherit;text-decoration:none}
.architecture :where(button,input,select){font:inherit}
.architecture :where(button,a,input,select,summary):focus-visible{outline:2px solid var(--zw-accent);outline-offset:4px}
.architecture :where(button){cursor:pointer}
.architecture :where([hidden],.hidden){display:none!important}
.architecture .section-wrap{width:min(100% - 128px,1440px);margin-inline:auto}
.architecture :where(section[id]){scroll-margin-top:128px}
.architecture .eyebrow{font:14px/1.5 var(--zw-mono);letter-spacing:.025em;margin-bottom:24px}
.architecture .skip-link{position:fixed;top:8px;left:8px;transform:translateY(-200%);z-index:1000;padding:12px 24px;background:var(--zw-ink);color:var(--zw-paper)}
.architecture .skip-link:focus{transform:translateY(0)}
/* Feedback only: 160ms color response. The continuous ticker is an infrequent brand cue. */
.architecture .floating-nav{position:fixed;z-index:100;top:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:8px;background-color:var(--zw-ink);background-image:repeating-conic-gradient(#ffffff30 0% 25%,transparent 0% 50%);background-size:4px 4px;border:1px solid #111;border-radius:8px;box-shadow:0 8px 16px #23232326;color:var(--zw-paper);font:14px/1 var(--zw-mono)}
.architecture .floating-nav nav{display:flex;align-items:center;background:var(--zw-ink);gap:24px;padding:8px 12px}
.architecture .wordmark{font-weight:700;font-size:24px;letter-spacing:-.08em;display:flex;align-items:center;gap:4px;white-space:nowrap}
.architecture .wordmark span{font-size:14px;letter-spacing:0;color:var(--zw-accent)}
.architecture .desktop-links{display:flex;gap:24px;align-items:center}
.architecture .desktop-links a{padding:8px 0;transition:color 160ms ease;color:#cfcdc7;white-space:nowrap}
.architecture .nav-ticker{contain:inline-size;overflow:hidden;background:var(--zw-paper);color:var(--zw-ink);height:20px;line-height:20px;margin-top:4px;font-size:12px}
.architecture .nav-ticker>div{width:max-content;display:flex;animation:zw-ticker 28s linear infinite}
@keyframes zw-ticker{to{transform:translateX(-33.333333%)}}
.architecture .menu-toggle{display:none}
.architecture .menu-dialog{position:fixed;inset:16px auto auto 16px;margin:0;padding:16px;width:min(320px,calc(100vw - 32px));background:var(--zw-ink);color:var(--zw-paper);border:1px solid #111;border-radius:8px;font:14px/1.6 var(--zw-mono);box-shadow:0 8px 16px #23232326}
.architecture .menu-dialog::backdrop{background:#23232330}
.architecture .menu-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px}
.architecture .menu-dialog button{border:0;background:#393939;color:var(--zw-paper);width:32px;height:32px}
.architecture .menu-dialog nav{display:flex;flex-direction:column;gap:8px}
.architecture .menu-dialog nav a{padding:12px 8px}
.architecture .motion-control{position:fixed;top:24px;right:24px;z-index:90}
.architecture .motion-control button{background:var(--zw-paper);border:1px solid var(--zw-line);color:var(--zw-ink);padding:8px 12px;border-radius:4px;font:12px/1.5 var(--zw-mono);display:flex;align-items:center;gap:8px}
/* Spatial continuity: the GPU field grows with scroll; text moves only with transform/opacity. */
.architecture .architecture-intro{height:200svh;position:relative}
.architecture .hero-stage{position:sticky;top:0;height:100svh;min-height:640px;isolation:isolate;overflow:hidden}
.architecture #glyphCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;clip-path:inset(0 0 0 50%)}
.architecture .hero-copy{position:absolute;top:50%;left:max(64px,calc((100vw - 1440px)/2));width:calc(50% - 160px);transform:translateY(-50%);max-width:512px}
.architecture .hero-copy h1{font-size:48px;line-height:1.04;margin-bottom:32px;letter-spacing:-.035em;color:var(--zw-ink);font-family:var(--zw-sans)}
.architecture .hero-description{max-width:48ch;line-height:1.7;color:var(--zw-muted);margin-bottom:32px;font-size:18px}
.architecture .hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.architecture .ticket-button{display:inline-flex;align-items:stretch;padding:0;background:transparent;border:0;box-shadow:none;text-decoration:none;border-radius:0;color:var(--zw-paper);font:14px/1.5 var(--zw-mono);font-weight:500;white-space:nowrap;position:relative;overflow:visible;width:auto;min-height:48px;transition:transform 160ms var(--zw-ease)}
.architecture .ticket-button::before,.architecture .ticket-button::after{display:none}
.architecture .ticket-button>span{position:relative;display:flex;align-items:center;justify-content:center;background:var(--zw-ink);padding:12px 24px;border-radius:8px}
.architecture .ticket-button>span+span{margin-left:0}
.architecture .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--zw-accent);flex-shrink:0}
.architecture .ticket-button .status-dot{position:absolute;top:8px;right:8px;width:4px;height:4px;box-shadow:0 0 0 4px #eaa04b20}
.architecture .quiet-button{display:inline-flex;align-items:center;min-height:48px;background:#e3e0d9;padding:12px 24px;border-radius:8px;font:14px/1.5 var(--zw-mono);transition:background-color 160ms ease}
.architecture .scroll-cue{position:absolute;left:max(64px,calc((100vw - 1440px)/2));bottom:48px;display:flex;align-items:center;gap:16px;color:var(--zw-muted);font:12px/1.5 var(--zw-mono)}
.architecture .scroll-cue i{width:32px;height:32px;border:1px dotted var(--zw-line);border-radius:50%;display:grid;place-items:center}
.architecture .field-caption{position:absolute;bottom:48px;right:48px;left:calc(50% + 48px);display:flex;justify-content:space-between;gap:16px;color:#c8c5be;font:12px/1.5 var(--zw-mono)}

@media(max-width:1024px){
 .architecture .section-wrap{width:calc(100% - 64px)}
 .architecture .hero-copy{left:32px;width:calc(50% - 64px)}
 .architecture .hero-copy h1{font-size:48px}
 .architecture .scroll-cue{left:32px}
 .architecture .motion-control span{display:none}
 .architecture .overview,.architecture .faq-layout{gap:32px}
 .architecture .feature-grid{gap:32px}
 .architecture .input-section{padding:32px}
 .architecture .workspace-index{padding:32px 16px}
}
@media(max-width:700px){
 .architecture h2{font-size:32px}
 .architecture .section-wrap{width:calc(100% - 32px)}
 .architecture .eyebrow{font-size:12px;margin-bottom:24px}
 .architecture .floating-nav{left:16px;transform:none;max-width:calc(100% - 96px)}
 .architecture .floating-nav nav{padding:8px;gap:24px;justify-content:space-between}
 .architecture .desktop-links{display:none}
 .architecture .wordmark{font-size:24px}
 .architecture .wordmark span{font-size:12px}
 .architecture .menu-toggle{display:flex;align-items:center;gap:24px;background:transparent;border:0;color:var(--zw-paper);font:12px/1.6 var(--zw-mono)}
 .architecture .menu-toggle i{width:24px;height:24px;background:#393939;display:grid;place-items:center}
 .architecture .nav-ticker{max-width:176px;font-size:12px}
 .architecture .motion-control{right:16px;top:24px}
 .architecture .motion-control button{padding:8px;width:32px;height:32px;justify-content:center}
 .architecture .architecture-intro{height:auto}
 .architecture .hero-stage{height:auto;min-height:0;position:relative;display:flex;flex-direction:column;overflow:visible}
 .architecture #glyphCanvas{position:relative;order:2;height:64svh;min-height:320px;clip-path:none;z-index:0}
 .architecture .hero-copy{position:relative;left:auto;top:auto;transform:none;width:auto;max-width:none;padding:160px 16px 48px;order:1}
 .architecture .hero-copy h1{font-size:48px;line-height:1.1;margin-bottom:32px}
 .architecture .hero-copy h1 br:nth-child(2){display:none}
 .architecture .hero-description{font-size:18px;line-height:1.7;max-width:40ch}
 .architecture .hero-actions{gap:8px;flex-wrap:nowrap}
 .architecture .ticket-button>span{padding:12px 16px}
 .architecture .quiet-button{padding:12px 16px}
 .architecture .scroll-cue{position:relative;order:3;bottom:auto;left:auto;padding:24px 16px}
 .architecture .field-caption{display:none}
}

.architecture .portal-index{position:absolute;inset:0;z-index:-2;display:grid;place-content:center;text-align:center;opacity:0;pointer-events:none;color:var(--zw-ink)}
.architecture .portal-index>span{font:500 128px/1 var(--zw-sans);letter-spacing:-.08em;font-variant-numeric:tabular-nums}
.architecture .portal-index>p{font:14px/1.5 var(--zw-mono);margin-top:16px}
@media(max-width:700px){.architecture .portal-index{display:none}}
.architecture .language-toggle{background:transparent;color:var(--zw-paper);border:0;white-space:nowrap}
.architecture .motion-control{border:0;background:transparent;padding:0;width:auto;height:auto}.architecture #glyphCanvas{opacity:1;transition:none}.architecture .motion-control .motion-icon{display:inline;color:var(--zw-accent)}.architecture .nav-ticker>div{animation-play-state:running}.architecture.motion-paused .nav-ticker>div{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.architecture .nav-ticker>div{animation:none}.architecture .architecture-intro{height:100svh}.architecture .hero-stage{position:relative}}@media(prefers-reduced-motion:reduce) and (max-width:700px){.architecture .architecture-intro{height:auto}}
@media(max-width:700px){.architecture .floating-nav nav{gap:8px}.architecture .floating-nav .wordmark{font-size:18px}.architecture .floating-nav .wordmark span{font-size:12px}.architecture .language-toggle{font-size:12px;padding:8px 0}.architecture .hero-copy{padding:160px 16px 48px}}