/* ELSEWHERE — editorial white & deep blue, built on assets/design-tokens.css (ae-*) */
:root{--ae-font-serif:"Iowan Old Style","Baskerville","Source Serif 4","Noto Serif SC","Songti SC",Georgia,serif;--ae-font-sans:"Helvetica Neue","Source Sans 3","PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;--ink:var(--ae-color-text);--muted:#4d5666;--line:var(--ae-color-border);--action:var(--ae-color-action);--header-h:80px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ae-color-bg);color:var(--ink);font-family:var(--ae-font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{border:0;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
button,a{transition:color var(--ae-duration-feedback) var(--ae-ease-standard),background-color var(--ae-duration-feedback) var(--ae-ease-standard),transform var(--ae-duration-feedback) var(--ae-ease-standard)}
:focus-visible{outline:3px solid var(--ae-color-focus);outline-offset:4px}
::selection{background:var(--ae-color-soft-blue)}
svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Header */
.header{position:absolute;z-index:var(--ae-z-header);top:0;left:0;right:0;height:var(--header-h);max-width:var(--ae-width-site);margin:auto;padding-inline:var(--ae-gutter);display:flex;align-items:center;justify-content:space-between;color:#fff}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--ae-font-serif);font-size:21px;letter-spacing:.12em}
.brand-en{display:block;font:500 9px/1 var(--ae-font-sans);letter-spacing:.24em;margin-top:4px;color:#ffffffa6}
.brand-symbol{width:22px;height:30px;border:1.5px solid;border-radius:16px 16px 0 0;position:relative;flex-shrink:0}
.brand-symbol:after{content:"";position:absolute;inset:4px 4px -1px;border:1.5px solid;border-radius:10px 10px 0 0}
.menu-button{background:#ffffff1f;color:#fff;border:1px solid #ffffff38;border-radius:var(--ae-radius-full);padding:0 20px;min-height:40px;font-size:14px;font-weight:500;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.menu-button:hover{background:#fff;color:var(--action)}
.menu-button:active,.send:active,.round-button:active{transform:scale(var(--ae-press-scale))}

/* Hero — a scroll track; the stage stays pinned while the camera flies through the door */
.hero{--stage-bg:#02050d;position:relative;height:calc(100svh + 240vh);background:var(--stage-bg);color:#fff}
.hero-stage{--copy:1;--cap:0;--white:0%;position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--stage-bg)}
.scene{position:absolute;inset:0;overflow:hidden}
.scene canvas{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s var(--ae-ease-out)}
.scene.ready canvas{opacity:1}
.scene-fallback{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 62%,#3a2a5c 0%,#10213a 38%,var(--stage-bg) 75%);transition:opacity 1.6s}
.scene-fallback>div{position:absolute;left:50%;bottom:6%;width:min(44vw,34vh);height:min(66vw,50vh);margin-left:calc(min(44vw,34vh) / -2);border:2px solid #f3cf8f;box-shadow:0 0 40px #f3b46a66,inset 0 0 40px #f3b46a33;border-radius:999px 999px 0 0;transform-origin:50% 100%}
.scene-fallback>div:nth-child(2){transform:scale(.84);opacity:.6}.scene-fallback>div:nth-child(3){transform:scale(.68);opacity:.4}.scene-fallback>div:nth-child(4){transform:scale(.52);opacity:.25}.scene-fallback>div:nth-child(5){transform:scale(.36);opacity:.15}
.scene.ready .scene-fallback{opacity:0}
.hero-copy{position:relative;z-index:2;max-width:var(--ae-width-site);margin:auto;padding:calc(var(--header-h) + clamp(16px,6vh,72px)) var(--ae-gutter) 0;text-align:center;opacity:var(--copy);transform:translateY(calc((1 - var(--copy)) * -64px)) scale(calc(.94 + var(--copy) * .06));filter:blur(calc((1 - var(--copy)) * 10px))}
.copy-gone .hero-copy{visibility:hidden}
.hero h1{margin:0 auto;font:400 var(--ae-type-hero)/var(--ae-leading-hero) var(--ae-font-serif);letter-spacing:var(--ae-tracking-hero);text-wrap:balance;text-shadow:0 2px 40px #02050d}
.hero h1 .char{display:inline-block;animation:char-in 1.4s var(--ae-ease-out) calc(.5s + var(--i) * 55ms) both}
.hero-subtitle{margin:20px auto 0;max-width:30em;font-size:var(--ae-type-subtitle);line-height:1.45;color:#ffffffb8;text-wrap:balance;animation:rise 1.2s var(--ae-ease-out) 1.25s both}
.hero-composer{max-width:var(--ae-width-hero);margin:clamp(24px,4vh,40px) auto 0;animation:rise 1.2s var(--ae-ease-out) 1.5s both;box-shadow:0 0 0 1px #ffffff26,0 24px 80px -12px #f3b46a59}
.hero-caption{position:absolute;z-index:2;left:var(--ae-gutter);right:var(--ae-gutter);bottom:12vh;margin:0;text-align:center;font:400 clamp(1.25rem,2.4vw,2rem)/1.3 var(--ae-font-serif);letter-spacing:.3em;color:#fff;opacity:var(--cap);transform:translateY(calc((1 - var(--cap)) * 16px));pointer-events:none}
.hero-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--ae-width-site);margin:auto;padding:0 var(--ae-gutter) calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:16px;opacity:var(--copy)}
.copy-gone .hero-foot{visibility:hidden}
.scene-controls{display:flex;align-items:center;gap:12px;font-size:13px;color:#ffffffa6}
.round-button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#ffffff1a;border:1px solid #ffffff33;color:#fff;font-size:13px}
.round-button:hover{background:#ffffff33}
.round-button[hidden]{display:none}
.scroll-cue{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;letter-spacing:.12em;color:#ffffffa6}
.scroll-cue i{position:relative;width:1px;height:40px;background:#ffffff33;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:#fff;animation:cue 2.2s var(--ae-ease-standard) infinite}
.hero-whiteout{position:absolute;inset:0;z-index:3;background:var(--ae-color-bg);clip-path:circle(var(--white) at 50% 46%);pointer-events:none}
.hero.is-static{height:auto}
.hero.is-static .hero-stage{position:relative}
.hero.is-static .scroll-cue,.hero.is-static .hero-caption,.hero.is-static .hero-whiteout{display:none}
@keyframes char-in{from{opacity:0;filter:blur(12px);transform:translateY(.35em)}to{opacity:1;filter:none;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cue{from{top:-40%}to{top:100%}}

/* Ask composer (hero + dock share one draft) */
.composer{display:flex;align-items:center;gap:8px;background:#fff;border-radius:var(--ae-radius-full);padding:8px 8px 8px 28px;box-shadow:var(--ae-shadow-floating)}
.draft-input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:var(--ae-type-input);height:48px;color:var(--ink)}
.draft-input::placeholder{color:#6b7280}
.draft-input::-webkit-search-cancel-button{cursor:pointer}
.composer:focus-within{outline:3px solid var(--ae-color-focus);outline-offset:3px}
.send{width:48px;height:48px;border-radius:50%;background:var(--action);color:#fff;display:grid;place-items:center;flex-shrink:0}
.send:hover{background:var(--ae-color-deep)}
.send svg{width:22px;height:22px}
.dock{position:fixed;z-index:var(--ae-z-dock);left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:30rem;margin:auto;padding:6px 6px 6px 22px;border:1px solid var(--line);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity var(--ae-duration-reveal) var(--ae-ease-out),transform var(--ae-duration-reveal) var(--ae-ease-out)}
.dock .draft-input{height:40px;font-size:16px}
.dock .send{width:40px;height:40px}
.dock.visible{opacity:1;transform:none;pointer-events:auto}

/* Manifesto */
.manifesto{max-width:var(--ae-width-site);margin:auto;padding:var(--ae-space-section) var(--ae-gutter)}
.manifesto-text{margin:0 auto;max-width:18em;text-align:center;font:400 var(--ae-type-section)/1.3 var(--ae-font-serif);letter-spacing:var(--ae-tracking-section)}
.manifesto-text .reveal,.phrase{display:inline-block}
.muted{color:var(--muted)}
.js .reveal{opacity:.08;filter:blur(4px);transition:opacity var(--ae-duration-reveal) var(--ae-ease-out),filter var(--ae-duration-reveal) var(--ae-ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js .reveal.is-in{opacity:1;filter:none}

/* Directory */
.directory{max-width:var(--ae-width-site);margin:auto;padding:var(--ae-space-section) var(--ae-gutter) 48px}
.section-heading{margin-bottom:40px}
.eyebrow{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--muted)}
.section-heading h2{margin:0;font:400 var(--ae-type-section)/var(--ae-leading-section) var(--ae-font-serif);letter-spacing:var(--ae-tracking-section)}
.toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{font-size:14px;padding:0 16px;min-height:40px;border-radius:var(--ae-radius-full);background:var(--ae-color-surface);white-space:nowrap}
.filters button:not(.active):hover{background:var(--ae-color-surface-muted)}
.filters button.active{background:var(--action);color:#fff}
.filters button span{margin-left:6px;font-size:12px;opacity:.8}
.search{display:flex;align-items:center;gap:8px;width:260px;border-bottom:1px solid var(--line);color:var(--muted)}
.search svg{width:18px;flex-shrink:0}
.search input{border:0;background:transparent;font-size:15px;width:100%;min-width:0;height:44px;color:var(--ink)}
.search input:focus{outline:0}
.search:focus-within{outline:3px solid var(--ae-color-focus);outline-offset:4px;border-radius:4px}
.search kbd{font:12px var(--ae-font-sans);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.result-meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:20px 0 4px}
.app-row{display:grid;grid-template-columns:40px 64px minmax(0,1fr) 120px 44px 44px;align-items:center;gap:16px;padding:28px 0;border-bottom:1px solid var(--line)}
.app-index{font:15px var(--ae-font-serif);color:var(--muted)}
.app-icon{width:56px;height:56px;border-radius:var(--ae-radius-lg);display:grid;place-items:center;background:var(--tile);color:var(--icon);font:26px var(--ae-font-serif)}
.app-main{display:block;min-width:0}
.app-main h3{margin:0 0 6px;font:400 var(--ae-type-feature)/1.1 var(--ae-font-serif);letter-spacing:var(--ae-tracking-feature);overflow-wrap:anywhere}
a.app-main:hover h3{color:var(--ae-color-link)}
.app-main p{margin:0;font-size:15px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.category{font-size:13px;color:var(--muted)}
.connection-label{font:500 12px var(--ae-font-sans);letter-spacing:0;color:var(--muted);background:var(--ae-color-surface);border-radius:var(--ae-radius-full);padding:3px 10px;margin-left:12px;vertical-align:middle;white-space:nowrap}
.icon-button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.icon-button:hover{background:var(--ae-color-surface)}
.favorite[aria-pressed=true]{color:var(--ae-color-interactive)}
.launch{background:var(--action);color:#fff}
.launch:hover{background:var(--ae-color-deep)}
.launch.is-pending,.launch.is-pending:hover{background:var(--ae-color-surface);color:var(--muted)}
.empty{text-align:center;padding:64px 16px}
.empty h3{margin:0 0 8px;font:400 28px var(--ae-font-serif)}
.empty p{margin:0 0 12px;color:var(--muted)}
.text-button{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;color:var(--ae-color-link);text-decoration:underline;text-underline-offset:4px}
.text-button:hover{color:var(--action)}

/* Closing & footer */
.closing{max-width:var(--ae-width-site);margin:auto;padding:var(--ae-space-section) var(--ae-gutter);text-align:center}
.closing-title{margin:0 0 24px;font:400 var(--ae-type-section)/var(--ae-leading-section) var(--ae-font-serif);letter-spacing:var(--ae-tracking-section)}
.footer{background:var(--ae-color-footer);border-top:1px solid var(--line);padding:56px var(--ae-gutter) calc(96px + env(safe-area-inset-bottom,0px))}
.footer-word{display:block;max-width:var(--ae-width-site);margin:auto;font:400 clamp(64px,15vw,200px)/1 var(--ae-font-serif);letter-spacing:-.05em;color:var(--action)}
.footer-meta{max-width:var(--ae-width-site);margin:32px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:14px;color:var(--muted)}
.footer-meta nav{display:flex;gap:24px}
.footer-meta a:hover{color:var(--ae-color-link)}

/* Menu: shell geometry animates separately from its content */
.menu-dialog{margin:12px max(12px,calc((100vw - var(--ae-width-site)) / 2 + var(--ae-gutter) - 12px)) auto auto;padding:0;border:0;background:none;width:min(var(--ae-width-menu),calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:visible;color:var(--ink)}
.menu-dialog::backdrop{background:rgb(0 12 31 / 28%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.menu-shell{position:relative;background:#fff;border-radius:var(--ae-radius-menu);box-shadow:var(--ae-shadow-menu);padding:72px 32px 32px;max-height:calc(100dvh - 24px);overflow:auto}
.close-button{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--ae-color-surface)}
.close-button:hover{background:var(--ae-color-surface-muted)}
.close-button svg{width:20px;height:20px}
.menu-nav{display:flex;flex-direction:column;align-items:center;gap:4px}
.menu-nav a{font:400 32px/40px var(--ae-font-serif);padding:4px 12px;border-radius:12px}
.menu-nav a:hover{color:var(--ae-color-link)}
.menu-nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.menu-note{margin:32px 0 0;padding:16px;border-radius:var(--ae-radius-lg);background:var(--ae-color-surface);font-size:13px;text-align:center;color:var(--muted)}
dialog[open] .menu-shell{animation:menu-shell var(--ae-duration-menu) var(--ae-ease-drawer) both}
dialog[open] .menu-shell>*{animation:menu-content var(--ae-duration-reveal) var(--ae-ease-out) both;animation-delay:calc(var(--ae-duration-menu) * .45)}
dialog[open]::backdrop{animation:fade var(--ae-duration-menu) var(--ae-ease-out) both}
.menu-dialog.closing .menu-shell{animation:menu-shell-out 280ms var(--ae-ease-standard) both}
.menu-dialog.closing .menu-shell>*{animation:none;opacity:0;transition:opacity 120ms}
.menu-dialog.closing::backdrop{animation:fade 280ms var(--ae-ease-standard) reverse both}
@keyframes menu-shell{from{clip-path:inset(0 0 calc(100% - 48px) calc(100% - 96px) round 24px)}to{clip-path:inset(0 0 0 0 round var(--ae-radius-menu))}}
@keyframes menu-shell-out{from{clip-path:inset(0 0 0 0 round var(--ae-radius-menu));opacity:1}to{clip-path:inset(0 0 calc(100% - 48px) calc(100% - 96px) round 24px);opacity:0}}
@keyframes menu-content{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
body:has(dialog[open]){overflow:hidden}

/* Misc */
.toast{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%,16px);background:var(--ink);color:#fff;border-radius:var(--ae-radius-full);padding:12px 20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;width:max-content;max-width:90vw}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.skip{position:fixed;top:-100px;left:16px;background:var(--action);color:#fff;padding:12px 16px;border-radius:var(--ae-radius-md);z-index:200}
.skip:focus{top:12px}
.noscript{padding:24px;background:var(--ae-color-soft-blue);position:fixed;bottom:0;width:100%}

@media (max-width:1000px){
.app-row{grid-template-columns:52px minmax(0,1fr) 44px 44px;gap:12px;padding:24px 0}
.app-index,.category{display:none}
.toolbar{flex-direction:column;align-items:stretch}
.search{width:100%}
}
@media (max-width:767px){
:root{--header-h:64px}
.hero{height:calc(100svh + 190vh)}
.hero-copy{padding-top:calc(var(--header-h) + 24px)}
.hero-subtitle{font-size:18px;margin-top:16px}
.hero-composer{padding:6px 6px 6px 20px}
.hero-foot{justify-content:center}
.scroll-cue{display:none}
.hero-caption{letter-spacing:.16em}
.hero-composer .draft-input{height:44px;font-size:16px}
.hero-composer .send{width:44px;height:44px}
.manifesto-text{font-size:2rem;line-height:1.4}
.filters{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--ae-gutter) * -1);padding-inline:var(--ae-gutter);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.search kbd{display:none}
.search input{font-size:16px}
.result-meta>span:last-child{display:none}
.app-row{grid-template-columns:48px minmax(0,1fr) 44px;grid-template-rows:auto auto;gap:4px 12px}
.app-icon{width:48px;height:48px;font-size:22px;grid-row:1/3;align-self:start}
.app-main{grid-row:1/3}
.app-row .favorite{grid-column:3;grid-row:1}
.app-row .launch{grid-column:3;grid-row:2}
.app-main h3{font-size:26px}
.connection-label{display:inline-block;margin:6px 0 0}
.menu-dialog{margin:12px auto auto;width:calc(100% - 32px)}
.menu-shell{padding:72px 24px 24px}
.footer-meta{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.js .reveal{opacity:1;filter:none}
}