:root{color-scheme:light dark;--bg:#f5f3ed;--ink:#242521;--muted:#666861;--line:#d4d3cb;--panel:#eeece4;--stroke:#c5c5ba;--tile:#faf9f5;--blue:#386dbe;--cyan:#207e8e;--green:#3e7b4b;--orange:#b77627;--teal:#327f74;--amber:#9b741c;--purple:#8064a8;--lime:#6d7f2b;--pink:#a35680}
@media(prefers-color-scheme:dark){:root{--bg:#151a20;--ink:#f0eee7;--muted:#a6afb4;--line:#363e47;--panel:#1d252d;--stroke:#3f4b55;--tile:#202932;--blue:#8bb7f4;--cyan:#83cdd5;--green:#a0cba0;--orange:#edbe7d;--teal:#8dccbe;--amber:#ebcd7f;--purple:#bea3df;--lime:#c3ce8d;--pink:#e0a0bf}}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit}button,a,select{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:6px}header{height:90px;padding:0 5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:40px;background:var(--bg);position:relative;z-index:5}.brand{display:flex;align-items:center;gap:13px;margin-right:auto;font-weight:800;font-size:24px;letter-spacing:-1px}.brand img{width:42px;height:42px;object-fit:cover;border-radius:50%}.brand-dot{font-size:12px;vertical-align:top;margin-left:3px}nav{display:flex;gap:38px;font-size:13px}nav a{padding:10px 0;border-bottom:1px solid transparent}nav a[aria-current=page]{border-color:var(--ink)}.language{display:flex;align-items:center;gap:8px;margin-left:24px;font-size:14px}.language select{border:0;background:var(--bg);padding:9px 0;cursor:pointer}.skip{position:absolute;top:-80px;z-index:100;background:var(--bg);padding:15px}.skip:focus{top:5px}.hero{position:relative;min-height:650px;height:calc(100svh - 90px);max-height:920px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:45px}.hero-top{position:absolute;top:32px;left:5%;right:5%;display:flex;justify-content:space-between;font-size:11px;letter-spacing:2px;color:var(--muted)}.wordmark{position:absolute;top:15%;left:3%;width:94%;pointer-events:none;overflow:visible}.wordmark text{fill:var(--ink);font-family:Impact,"Arial Black",sans-serif;font-weight:900;letter-spacing:-8px;font-style:italic}.hero-caption{position:relative;margin:0 5% 26px;font-size:14px;letter-spacing:2px}.rail{display:flex;gap:18px;overflow-x:auto;padding:14px 5% 24px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.tile{position:relative;flex:0 0 155px;height:164px;background:var(--tile);border:1px solid var(--line);border-radius:3px;padding:18px;scroll-snap-align:start;transition:transform .2s,border-color .2s}.tile:hover{transform:translateY(-6px);border-color:var(--ink)}.tile-num{font-size:10px;color:var(--muted);letter-spacing:1px}.tile .icon{display:block;width:64px;height:64px;margin:0 auto 12px;color:var(--accent)}.tile-label{display:flex;justify-content:space-between;gap:4px;font-size:13px}.hero-bottom{margin:24px 5% 0;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;letter-spacing:2px}.rail-controls{display:flex;align-items:center;gap:10px}.rail-controls button{border:1px solid var(--line);border-radius:50%;width:34px;height:34px;background:none;cursor:pointer}.rail-controls button:disabled{opacity:.3;cursor:default}.section-intro{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:28px 5%;font-size:11px;letter-spacing:2px;color:var(--muted)}.feature{position:relative;isolation:isolate;min-height:490px;display:grid;grid-template-columns:42% 58%;align-items:center;overflow:hidden;border-top:1px solid var(--line);padding:70px 9%}.outline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.outline text{fill:none;stroke:var(--stroke);stroke-width:.65;font-family:Impact,"Arial Black",sans-serif;font-weight:900}.feature-icon{justify-self:center;display:flex;align-items:center;justify-content:center;width:190px;height:190px;background:var(--tile);border:1px solid var(--line);border-radius:36px;transform:rotate(-7deg);box-shadow:8px 12px 0 var(--panel);color:var(--accent);transition:transform .2s}.feature-icon:hover{transform:rotate(0)}.feature-icon svg{width:120px;height:120px}.feature-copy{max-width:480px;background:var(--bg);padding:25px 26px}.eyebrow{font-size:10px;color:var(--muted);letter-spacing:2px}.feature h2{font-size:42px;letter-spacing:-1px;font-weight:500;margin:18px 0}.feature p{font-size:14px;line-height:2;color:var(--muted);margin-bottom:24px}.more{font-size:12px;border-bottom:1px solid var(--ink);display:inline-flex;gap:50px;padding-bottom:8px}footer{border-top:1px solid var(--line);padding:35px 5%;display:flex;gap:30px;align-items:center;color:var(--muted);font-size:11px}footer div{display:flex;gap:26px;margin-right:auto}footer a:hover{color:var(--ink)}.theme-note{font-size:10px}.page{max-width:1100px;min-height:75vh;margin:auto;padding:65px 5% 100px}.page h1{font-size:clamp(42px,7vw,80px);font-weight:500;letter-spacing:-2px;margin:30px 0}.page h2{font-weight:500}.page p{color:var(--muted);line-height:2;max-width:680px}.page .back{font-size:12px}.detail-lead{display:flex;align-items:center;gap:35px;margin:35px 0}.detail-lead .icon{width:100px;height:100px;color:var(--accent);flex-shrink:0}.detail-lead h1{margin:0}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:50px}.screen{border:7px solid var(--ink);border-radius:36px;width:280px;min-height:460px;padding:35px 18px;background:var(--panel);margin:auto;position:relative}.screen:before{content:"";position:absolute;top:10px;left:40%;width:20%;height:6px;background:var(--ink);border-radius:10px}.screen-title{font-size:24px;margin:15px 0 30px}.screen-row{padding:19px 14px;border:1px solid var(--line);margin:13px 0;border-radius:10px;font-size:13px;display:flex;justify-content:space-between}.screen .icon{width:65px;height:65px;color:var(--accent);margin:15px auto;display:block}.caption{text-align:center;font-size:11px!important}.detail-list{padding:0;list-style:none}.detail-list li{padding:20px 0;border-top:1px solid var(--line);line-height:1.9;font-size:14px}.detail-list b{display:block;margin-bottom:7px}.detail-list span{color:var(--muted)}details{border-top:1px solid var(--line);padding:25px 0}summary{cursor:pointer;font-size:17px}details p{font-size:14px}.notice{border-left:2px solid var(--ink);padding:5px 20px;margin-top:35px}.page-nav{margin-top:70px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:25px;font-size:13px}
@media(min-width:1500px){.tile{flex-basis:180px}.wordmark{top:10%}}@media(max-width:700px){header{height:76px;padding:0 5%;gap:14px;flex-wrap:wrap}.brand{font-size:18px;gap:8px}.brand img{width:30px;height:30px}nav{gap:15px;font-size:11px}.language{margin-left:0;font-size:11px;gap:3px}.language>span{display:none}.hero{height:650px;min-height:0;max-height:none;padding-bottom:30px}.hero-top{font-size:8px;letter-spacing:1px;top:27px}.wordmark{top:19%;left:2%;width:96%;transform:scaleY(1.6)}.hero-caption{font-size:12px;margin-bottom:20px;max-width:75%;line-height:1.8}.tile{flex-basis:132px;height:152px;padding:14px}.hero-bottom{letter-spacing:.5px;font-size:9px}.section-intro{font-size:9px;letter-spacing:1px}.feature{padding:55px 6%;min-height:390px;grid-template-columns:32% 68%}.feature-icon{width:100px;height:100px;border-radius:22px;box-shadow:5px 7px 0 var(--panel)}.feature-icon svg{width:75px;height:75px}.feature-copy{padding:16px}.feature h2{font-size:29px;margin:13px 0}.feature p{font-size:12px}.eyebrow{font-size:8px;letter-spacing:1px}.more{gap:25px;font-size:11px}footer{flex-wrap:wrap;gap:20px;font-size:10px}footer div{width:100%;gap:24px}.theme-note{margin-left:auto}.detail-grid{grid-template-columns:1fr;gap:25px}.detail-lead{gap:20px}.detail-lead .icon{width:65px;height:65px}.page{padding-top:40px}.page h1{letter-spacing:-1px}.outline{width:180%;left:-40%}}
@media(max-width:390px){.brand span{display:none}nav{gap:17px}.feature-icon{width:82px;height:82px}.feature-icon svg{width:62px;height:62px}}
/* Home entrance: stationary wordmark behind the looping App menu. */
.brand{font-weight:700;letter-spacing:1.5px;font-size:22px}.brand img{border-radius:10px}
.hero{height:calc(100svh - 90px);min-height:540px;max-height:850px;padding:0;justify-content:center;isolation:isolate}
.hero-brand{position:absolute;inset:0;margin:0;display:flex;align-items:center;pointer-events:none;z-index:0}
.wordmark{position:static;width:100%;height:auto;margin:0 2%;transform:scaleY(2.1);opacity:.22}
.rail{position:relative;z-index:1;display:flex;align-items:center;gap:28px;width:100%;padding:32px 5%;scroll-snap-type:none;scroll-behavior:auto;scrollbar-width:none;overflow-x:auto;overflow-y:hidden}
.rail::-webkit-scrollbar{display:none}.rail-group{display:flex;flex:0 0 auto;gap:28px;align-items:center}.rail-group[hidden]{display:none}
.tile{flex:0 0 238px;width:238px;height:300px;padding:0;border:0;border-radius:0;background:none;color:var(--accent);scroll-snap-align:none;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));transition:transform .18s}
.tile-frame{position:absolute;inset:0;width:100%;height:100%;fill:color-mix(in srgb,var(--accent) 8%,var(--bg));stroke:var(--accent);stroke-width:1.5;stroke-opacity:.55;pointer-events:none}.tile-frame .inner{fill:none;stroke-width:1;stroke-opacity:.22}
.tile-content{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;padding:22px 16px}
.tile .icon{width:119px;height:119px;margin:0;color:var(--accent)}.tile-label{display:block;text-align:center;color:var(--accent);font-size:22px;font-weight:700;letter-spacing:.8px;line-height:1.4}
.tile:hover{transform:translateY(-5px)}.tile:active{transform:scale(.96)}.tile:focus-visible{outline:none}.tile:focus-visible .tile-frame{stroke-opacity:1;stroke-width:4}
@media(max-width:700px){.brand{font-size:18px;letter-spacing:.8px}.hero{height:calc(85svh - 76px);min-height:460px;max-height:650px}.wordmark{width:160%;max-width:none;margin-left:-30%;flex-shrink:0;transform:scaleY(2.4);opacity:.17}.rail,.rail-group{gap:20px}.rail{padding:30px 7%}.tile{flex-basis:190px;width:190px;height:250px}.tile .icon{width:95px;height:95px}.tile-label{font-size:19px}.tile-content{gap:18px}}
/* Two five-card decks perform in front of stationary stacked typography. */
.hero{min-height:650px;max-height:950px}
.hero-brand{display:block;overflow:hidden}
.stacked-wordmark{position:absolute;width:72%;height:auto;left:3%;top:12%;overflow:visible;transform:rotate(-8deg);transform-origin:35% 35%}
.stacked-wordmark text{font-family:Impact,"Arial Black",sans-serif;font-size:210px;font-weight:900;font-style:italic;letter-spacing:-6px;fill:var(--ink);opacity:.7}
.stacked-wordmark .hollow{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.38;vector-effect:non-scaling-stroke}
.direction-art{position:absolute;right:3%;top:10%;width:26%;height:48%;fill:none;stroke:var(--ink);stroke-width:1;opacity:.48;transform:rotate(-8deg)}
.rail{--card-width:clamp(118px,calc((100vw - 180px)/5),218px);--card-gap:18px;position:absolute;top:56%;left:0;height:340px;padding:25px 0;transform:translateY(-28%);display:block;overflow:visible}
.rail-group{position:absolute;top:25px;left:0;gap:var(--card-gap);will-change:transform}
.tile{flex:0 0 var(--card-width);width:var(--card-width);height:calc(var(--card-width)*1.3);will-change:transform,opacity;transition:none;transform-origin:50% 80%}
.tile .icon{width:calc(var(--card-width)*.5);height:calc(var(--card-width)*.5)}.tile-label{font-size:clamp(15px,1.7vw,22px)}.tile-content{gap:16px;padding:18px 10px}.tile:hover,.tile:active{transform:none}
.rail.reduced{overflow-x:auto;display:flex;gap:var(--card-gap);padding:25px 5%;height:auto;min-height:330px}.rail.reduced .rail-group{position:relative;top:0;transform:none!important}.rail.reduced .tile{transform:none!important;opacity:1!important}
.feature-copy h2 a:hover{color:var(--accent)}
@media(max-width:700px){.hero{height:calc(100svh - 76px);min-height:560px;max-height:760px}.stacked-wordmark{width:100%;left:-3%;top:6%;transform:rotate(-8deg) scaleY(1.25);transform-origin:20% 0}.direction-art{width:29%;right:2%;top:25%;height:30%;opacity:.35}.rail{--card-width:calc((100vw - 64px)/5);--card-gap:8px;top:64%;height:180px;transform:translateY(-12%)}.tile{height:calc(var(--card-width)*1.65);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px))}.tile-content{gap:9px;padding:8px 3px}.tile-label{font-size:clamp(9px,2.4vw,15px);letter-spacing:0;line-height:1.3}.tile .icon{width:calc(var(--card-width)*.52);height:calc(var(--card-width)*.52)}.rail.reduced{min-height:170px}}
.stacked-wordmark{transform:rotate(-8deg) scaleY(1.12);transform-origin:35% 20%}
.stacked-wordmark text{font-style:normal}
.direction-art{width:42%;height:53%;top:-3%;right:-8%;transform:rotate(-8deg)}
.glitch-echo{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:18px 10px;opacity:0;pointer-events:none;mix-blend-mode:screen;clip-path:polygon(0 10%,100% 10%,100% 38%,0 38%,0 53%,100% 53%,100% 72%,0 72%)}
.glitch-echo.red{--channel:#ff4158;transform:translateX(-4px)}.glitch-echo.green{--channel:#37f5ac;transform:translateY(2px)}.glitch-echo.blue{--channel:#439bff;transform:translateX(4px)}
.glitch-echo .icon,.glitch-echo .tile-label{color:var(--channel)}
.rail[data-glitch=true] .glitch-echo{opacity:.9}.rail.reduced .glitch-echo{display:none}
.leaderboard-intro{font-size:18px}.board-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:45px 0 25px}.board-tabs{display:flex;gap:8px}.board-tabs button{border:1px solid var(--line);padding:12px 25px;background:transparent;cursor:pointer}.board-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.board-filter{font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center}.board-filter select{background:var(--bg);border:1px solid var(--line);padding:12px;color:var(--ink);max-width:210px}.board-table{border-top:1px solid var(--line);overflow-x:auto}.board-table table{width:100%;border-collapse:collapse}.board-table caption{text-align:left;padding:18px 0;font-size:12px;color:var(--muted)}.board-table th{font-weight:400;font-size:12px;text-align:left;padding:18px 12px;border-bottom:1px solid var(--line);white-space:nowrap}.board-table th:first-child{width:10%}.board-table th:nth-child(2){width:40%}.board-empty{text-align:center;padding:65px 20px 75px;border-bottom:1px solid var(--line)}.board-empty svg{width:50px;height:50px;fill:none;stroke:var(--muted);stroke-width:1}.board-empty h2{font-size:23px;margin-top:25px}.board-empty p{font-size:13px;margin:0 auto}.rank-guide{margin-top:35px}.rank-guide summary{font-size:14px}.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:30px}.tier-grid>div{border:1px solid var(--line);padding:20px 12px}.tier-grid b{display:block;font-size:11px;letter-spacing:1px}.tier-grid span{display:block;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.7}
@media(max-width:700px){.stacked-wordmark{transform:rotate(-8deg) scaleY(1.4)}.direction-art{width:53%;height:36%;top:12%;right:-12%}.glitch-echo{gap:9px;padding:8px 3px}.board-controls{flex-wrap:wrap;margin-top:25px}.board-tabs{width:100%}.board-filter{width:100%;justify-content:space-between}.tier-grid{grid-template-columns:repeat(2,1fr)}header{gap:10px}.brand{font-size:15px;letter-spacing:.5px}nav{gap:12px;font-size:11px}.language{font-size:10px}}
@media(max-width:480px){header{height:auto;min-height:102px;padding-top:12px;padding-bottom:10px;justify-content:space-between}.brand{order:0}.language{order:1}nav{order:2;width:100%;justify-content:space-between;gap:10px}.brand span{display:inline}.hero{height:calc(100svh - 102px)}}
.stacked-wordmark text.hollow{fill:none;stroke:var(--ink);stroke-width:.65;stroke-linejoin:round;vector-effect:none;opacity:.38}
.rail{--card-width:clamp(120px,calc((100vw - 128px)/5),280px);--card-gap:clamp(28px,3.4vw,64px);height:420px}
.tile-content,.glitch-echo{gap:22px}.tile-label{font-size:clamp(16px,1.8vw,27px)}
.glitch-echo{clip-path:polygon(0 8%,100% 8%,100% 42%,0 42%,0 49%,100% 49%,100% 88%,0 88%);mix-blend-mode:normal}
.glitch-echo.red{transform:translate(-11px,-2px);filter:drop-shadow(0 0 4px #ff4158)}.glitch-echo.green{transform:translate(0,5px);filter:drop-shadow(0 0 4px #37f5ac)}.glitch-echo.blue{transform:translate(11px,2px);filter:drop-shadow(0 0 4px #439bff)}
.rail[data-glitch=true] .glitch-echo{opacity:1}.rail[data-glitch=true] .tile-frame{stroke-opacity:1;stroke-width:4;filter:drop-shadow(-6px 0 2px #ff4158) drop-shadow(6px 0 2px #439bff)}
@media(max-width:700px){.rail{--card-width:calc((100vw - 64px)/5);--card-gap:12px;height:200px}.tile-content,.glitch-echo{gap:9px}.tile-label{font-size:clamp(9px,2.4vw,15px)}.glitch-echo.red{transform:translateX(-5px)}.glitch-echo.blue{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.glitch-echo{display:none!important}}

.stacked-wordmark text.hollow{font-weight:400;stroke-width:.65}

/* Keep all five entrance positions inside the viewport. */
.rail{--card-width:min(280px,calc((100vw - 48px - 4 * clamp(28px,3.4vw,64px))/5))}
.tile{transform-origin:right center}
.feature-copy{position:relative;isolation:isolate;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));background:color-mix(in srgb,var(--accent) 28%,var(--bg))}
.feature-copy:before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--bg);clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px))}
@media(max-width:700px){.rail{--card-width:calc((100vw - 88px)/5)}}
/* Three concentric fine contours, with clear space between each line. */
.stacked-wordmark .triple-outline{opacity:.38}
.stacked-wordmark .triple-outline text.hollow{opacity:1}
.feature-copy{background:var(--bg)}
.feature-copy:before{display:none}
.basics-showcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start;margin-top:48px}
.basics-capture{margin:0;min-width:0}.basics-capture a{display:block;cursor:zoom-in}.basics-capture img{display:block;width:100%;height:auto;background:#0c1a29}.basics-capture figcaption{font-size:11px;color:var(--muted);line-height:1.7;text-align:center;margin-top:16px}
.basics-guide{position:sticky;top:32px}.basics-guide>h2{font-size:26px;line-height:1.5;margin:0 0 26px}.basics-step{border-top:1px solid var(--line);padding:25px 0}.basics-step-number{font-size:11px;letter-spacing:2px;color:var(--accent)}.basics-step h3{font-size:21px;font-weight:500;margin:12px 0}.basics-step p{font-size:14px;margin:0 0 16px}.basics-topics{font-size:12px;line-height:1.9;color:var(--accent)}
@media(max-width:700px){.basics-showcase{grid-template-columns:1fr;gap:36px;margin-top:32px}.basics-guide{position:static}.basics-capture{width:100%;max-width:440px;justify-self:center}.basics-guide>h2{font-size:24px}.basics-page .page-nav{gap:20px;line-height:1.8}.basics-page .page-nav a:last-child{text-align:right}}
.basics-story{padding:8px 0}.basics-story p{font-size:18px;line-height:2.1;margin:0 0 30px;color:var(--ink)}.basics-story p:last-child{color:var(--muted);font-size:16px;margin-bottom:0}
@media(max-width:700px){.basics-story p{font-size:17px;margin-bottom:24px}.basics-story p:last-child{font-size:15px}}

.dictionary-view{margin-top:56px}.dictionary-view>p{color:var(--muted);line-height:1.9;margin:16px 0 24px}.dictionary-view .basics-capture{max-width:none;width:100%;margin:0}.dictionary-view .basics-capture img{width:100%;height:auto}@media(max-width:700px){.dictionary-view{margin-top:36px}}

.nebula-video{display:block;width:100%;height:auto;background:#060b16}

.interaction-capture{margin-top:40px}.interaction-capture h3{font-size:20px;font-weight:500}.interaction-capture>p{color:var(--muted);line-height:1.9;margin:12px 0 24px}
.genre-showcase{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px}
.genre-captures{min-width:0}.genre-captures section+section{margin-top:44px}.genre-captures h2{font-size:20px;font-weight:500;margin:0 0 18px}.genre-captures .basics-capture{margin:0;max-width:none}
@media(max-width:700px){.genre-showcase{grid-template-columns:1fr;gap:32px}.genre-showcase>.basics-story{grid-row:1}.genre-captures{width:100%;max-width:540px;justify-self:center}}

#section-menu{cursor:pointer;color:inherit;text-decoration:none}#section-menu:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}