:root{color-scheme:light;--bg:#fafafa;--ink:#171719;--muted:#77777e;--rule:#d8d8de;--accent:#8b0000;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg);color:var(--ink)}
:root[data-theme=dark]{color-scheme:dark;--bg:#07080b;--ink:#f5f5f7;--muted:#888a94;--rule:#292c35;--accent:#d97784}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{display:grid;place-items:center;min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}h1,h2,p{margin:0}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}.screen{position:relative;width:min(100vw,177.7778dvh);height:min(100dvh,56.25vw);isolation:isolate;overflow:hidden;container-type:size;background:var(--bg)}.theme-nav{position:absolute;z-index:90;right:3.1%;top:4.4%;display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted)}.theme-nav a{padding:6px 1px}.theme-nav span{opacity:.35}.theme-nav a[aria-current=page]{color:var(--ink)}.hero{position:absolute;top:10.2%;left:0;right:0;text-align:center;z-index:30;pointer-events:none}.hero h1{line-height:1}.wordmark{width:31cqw;max-width:530px;min-width:190px;height:auto;margin:auto}.tagline{height:4.5cqh;margin-top:2cqh}.wheel{position:absolute;left:0;right:0;top:26%;height:43%;touch-action:none;cursor:grab;user-select:none;outline:0}.wheel.is-dragging{cursor:grabbing}.orbit-items{position:absolute;inset:0;isolation:isolate}.orbit-line{position:absolute;left:11%;width:78%;height:39%;top:31%;border:1px solid var(--rule);border-radius:50%;opacity:.19;pointer-events:none;transform:rotate(-2deg)}.orbital-item{position:absolute;left:50%;top:50%;display:block;width:var(--item-size,20cqw);height:var(--item-size,20cqw);padding:0;margin:0;background:transparent;border-radius:38%;transform-origin:center;touch-action:none;will-change:transform;cursor:inherit;pointer-events:none;transition:filter .25s ease;outline-offset:-15px}.orbital-item:focus-visible{outline:1px solid var(--accent)}.character{display:block;width:100%;height:100%;position:relative;transform-origin:50% 75%;pointer-events:none}.character img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .22s ease}.action-image{opacity:0}.orbital-item.has-action.is-active .idle-image{opacity:0}.orbital-item.has-action.is-active .action-image{opacity:1}.orbital-item.future{filter:grayscale(1) contrast(.5) brightness(1.5);opacity:.4}.letter-label{position:absolute;top:98%;left:0;right:0;font-size:12px;letter-spacing:.1em;color:var(--muted);opacity:var(--label-opacity,0);font-weight:500;pointer-events:none}.speed-lines{position:absolute;left:-14%;top:43%;width:50%;height:30%;opacity:0;background:linear-gradient(90deg,transparent,#9d6ade85) 0 0/90% 2px no-repeat,linear-gradient(90deg,transparent,#9d6adeb0) 0 45%/100% 3px no-repeat,linear-gradient(90deg,transparent,#9d6ade60) 10% 90%/70% 2px no-repeat;z-index:-1}.orbital-item[data-letter=q].is-active .speed-lines{opacity:1;animation:streak .6s linear infinite}.orbital-item.live.is-active{z-index:80!important}.orbital-item[data-letter=q].is-active .character{animation:sprint 1.45s cubic-bezier(.2,.7,.2,1) infinite}.orbital-item[data-letter=e].is-active .character{animation:greet 1.9s ease-in-out infinite}.orbital-item[data-letter=x].is-active .character{animation:hop 1.4s cubic-bezier(.3,.1,.3,1) infinite}.orbital-item[data-letter=a].is-active .character{animation:inspect 2.2s ease-in-out infinite}
@keyframes sprint{0%,100%{transform:translate(-8px,5px) rotate(-7deg)}45%{transform:translate(35px,-17px) rotate(-15deg)}75%{transform:translate(21px,-10px) rotate(-11deg)}}@keyframes streak{from{transform:translateX(8px) scaleX(.75);opacity:.85}to{transform:translateX(-38px) scaleX(1.1);opacity:0}}@keyframes greet{0%,100%{transform:rotate(-5deg) translateY(-4px)}30%{transform:rotate(7deg) translateY(-17px)}65%{transform:rotate(-3deg) translateY(-9px)}}@keyframes hop{0%,100%{transform:translateY(0) rotate(-4deg)}45%{transform:translateY(-32px) rotate(8deg)}65%{transform:translateY(-5px) rotate(2deg)}}@keyframes inspect{0%,100%{transform:translate(0,-3px) rotate(-3deg)}50%{transform:translate(-17px,-16px) rotate(-9deg) scale(1.04)}}
.detail{position:absolute;top:77%;left:20%;right:20%;height:17%;z-index:85;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.3,1);pointer-events:none}.detail.is-visible{opacity:1;transform:none;pointer-events:auto}.detail-code{font-size:11px;line-height:1.5;letter-spacing:.1em;color:var(--muted);margin-bottom:5px}.detail h2{font-size:clamp(17px,1.6cqw,27px);line-height:1.4;font-weight:600;letter-spacing:-.025em}.detail-description{font-size:clamp(12px,1cqw,16px);color:var(--muted);line-height:1.6;margin-top:7px}.detail-link{display:inline-block;font-size:clamp(12px,1cqw,15px);color:var(--accent);line-height:1.5;margin-top:9px;text-underline-offset:5px;padding:2px 8px}.detail-link:hover{text-decoration:underline}.detail.is-coming .detail-code{margin-bottom:9px}.detail.is-coming h2{font-weight:400;color:var(--muted);letter-spacing:.08em}.wheel-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:3.8%;z-index:90;display:flex;align-items:center;gap:14px;white-space:nowrap;color:var(--muted);font-size:11px;line-height:1.5}.home-position{padding:8px 2px;font-size:11px;letter-spacing:.09em;background:transparent;color:var(--muted)}.home-position:hover{color:var(--ink)}.control-rule{width:1px;height:10px;background:var(--rule)}.identity{position:absolute;left:3.1%;right:3.1%;bottom:1.4%;display:flex;justify-content:space-between;gap:15px;align-items:center;color:var(--muted);font-size:11px;letter-spacing:.01em;opacity:.75;pointer-events:none}.fallback-links{position:absolute;left:10%;right:10%;bottom:12%;display:flex;justify-content:center;gap:20px;font-size:14px}.wheel:not(.wheel-ready) .future{display:none}.wheel:not(.wheel-ready) .live{position:relative;left:auto;top:auto;width:21%;transform:none}.wheel:not(.wheel-ready) .orbit-items{display:flex;align-items:center;justify-content:center;gap:1%}
/* Temporary white-background originals also look clean while transparent versions load. */
:root[data-theme=light] .character{mix-blend-mode:multiply}
@media(max-aspect-ratio:4/5){.screen{width:100vw;height:100dvh}.hero{top:12%}.wordmark{width:70cqw;min-width:0}.theme-nav{top:max(20px,env(safe-area-inset-top));right:7%;font-size:12px}.wheel{top:31%;height:38%}.orbit-line{left:-10%;width:120%;height:38%;top:28%}.detail{top:71%;height:19%;left:7%;right:7%}.detail h2{font-size:21px}.detail-description{font-size:14px;line-height:1.65;max-width:330px;margin:9px auto 0}.detail-code{font-size:11px}.detail-link{font-size:14px;margin-top:10px}.wheel-controls{bottom:7.2%;font-size:12px}.home-position{font-size:12px}.identity{left:6%;right:6%;bottom:max(16px,env(safe-area-inset-bottom));display:block;text-align:center;font-size:10px;line-height:1.8}.identity span{display:block}.letter-label{font-size:11px}.tagline{height:25px}.fallback-links{bottom:18%;font-size:12px;gap:13px}}
@media(max-height:500px) and (min-aspect-ratio:4/5){.hero{top:5%}.wordmark{width:25cqw}.wheel{top:23%;height:47%}.detail{top:73%;height:18%;left:15%;right:15%}.detail-code{display:none}.detail h2{font-size:15px}.detail-description{font-size:11px;margin-top:3px}.detail-link{font-size:11px;margin-top:3px}.wheel-controls{bottom:2%;font-size:9px}.home-position{font-size:9px;padding:4px}.identity{display:none}.theme-nav{font-size:10px;top:4%;gap:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.speed-lines{display:none!important}.orbital-item .action-image{opacity:0!important}.orbital-item .idle-image{opacity:1!important}}

.orbital-item::after{content:"";position:absolute;inset:10% 9%;border-radius:40%;pointer-events:auto}.wheel.is-dragging .orbital-item::after{pointer-events:none}.screen.detail-open .letter-label{opacity:0}

.screen.detail-open .wheel-controls{opacity:0;pointer-events:none}

@media(max-aspect-ratio:4/5) and (max-height:650px){.hero{top:10%}.wheel{top:29%;height:36%}.detail{top:68%;height:22%}.detail-code{display:none}.detail h2{font-size:19px}.detail-description{font-size:13px;line-height:1.55;margin-top:7px}.detail-link{font-size:13px;margin-top:7px}.identity{font-size:9px;bottom:10px}.wheel-controls{bottom:8%}}

.orbital-item[data-letter=q] .action-image{transform:translateX(-20%) scale(1.25);transform-origin:50% 50%}

/* CUFEL navigation, bilingual title and selectable interaction editions. */
:root{--header-bg:rgba(250,250,250,.88);--tagline:#95959d;--cn-face:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}
:root[data-theme=dark]{--header-bg:rgba(16,17,21,.88);--tagline:#80828c}
.site-header{position:fixed;top:0;left:0;right:0;z-index:120;height:64px;background:var(--header-bg);border-bottom:1px solid var(--rule);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.banner-nav{height:100%;width:100%;margin:0;padding:0 clamp(24px,3.1vw,60px);display:flex;align-items:center;justify-content:space-between;gap:25px}.banner-brand{display:block;padding:6px 0;flex-shrink:0}.banner-brand img{width:115px;height:auto}.banner-links{display:flex;align-items:center;gap:38px}.banner-links a{font-size:14px;line-height:1.5;color:var(--muted);white-space:nowrap}.banner-links a:hover{color:var(--ink)}
.version-nav{position:absolute;z-index:90;top:max(72px,8.8%);right:3.1%;display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted)}.version-nav .theme-nav,.interaction-nav{position:static;display:flex;align-items:center;gap:9px;font-size:inherit}.version-nav a{padding:5px 1px}.version-nav a[aria-current=page]{color:var(--ink)}.version-nav span{opacity:.45}.version-separator{padding:0 2px}
.hero{top:14%}.hero h1{display:flex;align-items:center;justify-content:center;gap:2.5cqw;line-height:1}.wordmark{width:25cqw;max-width:420px;min-width:0;margin:0;height:auto}.brand-cn,.tagline{font-family:var(--cn-face);font-weight:600}.brand-cn{font-size:5.55cqw;line-height:1.15;letter-spacing:.045em;white-space:nowrap;transform:translateY(.015em)}.tagline{height:auto;margin:2.1cqh 0 0;font-size:clamp(17px,1.6cqw,25px);line-height:1.5;letter-spacing:.12em;color:var(--tagline)}
:root[data-interaction=hover] .wheel{cursor:default}:root[data-interaction=hover] .wheel.is-dragging{cursor:grabbing}:root[data-interaction=hover] .orbital-item{cursor:pointer}
:root[data-interaction=hover] .wheel::before,:root[data-interaction=hover] .wheel::after{content:"";position:absolute;top:17%;bottom:8%;width:16%;pointer-events:none;opacity:0;transition:opacity .25s;z-index:1}
:root[data-interaction=hover] .wheel::before{left:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 3%,transparent),transparent)}:root[data-interaction=hover] .wheel::after{right:0;background:linear-gradient(-90deg,color-mix(in srgb,var(--ink) 3%,transparent),transparent)}
:root[data-interaction=hover] .wheel[data-hover-direction=left]::before,:root[data-interaction=hover] .wheel[data-hover-direction=right]::after{opacity:1}
@media(max-aspect-ratio:4/5){.site-header{height:86px;padding-top:env(safe-area-inset-top,0px)}.banner-nav{padding:7px 18px 9px;display:flex;flex-direction:column;justify-content:center;gap:9px}.banner-brand{padding:0}.banner-brand img{width:82px}.banner-links{width:100%;justify-content:center;gap:22px}.banner-links a{font-size:12px}.version-nav{top:95px;right:6%;font-size:11px;gap:11px}.hero{top:20%}.hero h1{gap:4cqw}.wordmark{width:42cqw;max-width:none}.brand-cn{font-size:9.33cqw}.tagline{font-size:18px;margin-top:14px;letter-spacing:.1em}.wheel{top:33%;height:36%}}
@media(max-width:350px) and (max-aspect-ratio:4/5){.banner-links{gap:15px}.banner-links a{font-size:11px}.version-nav{gap:9px}.tagline{font-size:16px}}
@media(max-aspect-ratio:4/5) and (max-height:650px){.site-header{height:78px}.banner-nav{gap:7px;padding-top:5px;padding-bottom:6px}.banner-brand img{width:76px}.version-nav{top:84px}.hero{top:21%}.tagline{font-size:16px;margin-top:11px}.wheel{top:34%;height:31%}}
@media(max-height:500px) and (min-aspect-ratio:4/5){.site-header{height:40px}.banner-nav{padding:0 22px}.banner-brand img{width:84px}.banner-links{gap:24px}.banner-links a{font-size:11px}.version-nav{top:46px;right:3%;font-size:10px}.hero{top:18%}.hero h1{gap:2.6cqw}.wordmark{width:21cqw}.brand-cn{font-size:4.66cqw}.tagline{font-size:13px;margin-top:6px}.wheel{top:34%;height:35%}}