:root{--paper:#f8f5ee;--ink:#272c29;--muted:#7f8279;--teal:#355c5a;--line:#deded3;--gold:#ad9666;--ease:cubic-bezier(.22,1,.36,1);--serif:"Source Han Serif SC","Noto Serif SC","Songti SC","SimSun",serif;--sans:"Microsoft YaHei","PingFang SC",sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:45px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0}button:active,.button-primary:active{transform:scale(.97)}button:focus-visible,a:focus-visible{outline:2px solid #6a9590;outline-offset:5px}::selection{background:#d6e6de}button,a{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;left:20px;top:-60px;z-index:100;padding:12px;background:var(--teal);color:white}.skip-link:focus{top:12px}
.first-screen{min-height:700px;height:100svh;max-height:1180px;display:flex;flex-direction:column;overflow:hidden;position:relative;background:radial-gradient(ellipse at 16% 42%,#fffdf8aa,transparent 53%),var(--paper)}.first-screen::after{content:"";inset:0;position:absolute;opacity:.035;pointer-events:none;z-index:30;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.45' d='M0 0h200v200H0z'/%3E%3C/svg%3E")}
.site-header{height:76px;min-height:76px;display:flex;align-items:center;justify-content:space-between;position:relative;padding:0 5.6%;z-index:40}.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-size:19px;letter-spacing:.08em;font-weight:600}.wordmark svg{width:18px;height:18px;fill:none;stroke:#8b7c58;stroke-width:1}.element-nav{display:flex;gap:13px;position:absolute;left:50%;transform:translateX(-50%)}.element-nav button{width:38px;height:30px;border-radius:18px;background:transparent;font-family:var(--serif);font-size:14px;transition:background-color .18s,color .18s,transform .18s}.element-nav button:hover{background:#ebece4}.element-nav button[aria-current="true"]{background:var(--ink);color:var(--paper)}.quick-wrap{position:relative}.quick-toggle{background:transparent;font-family:var(--serif);font-size:12px;letter-spacing:.08em;padding:12px 0 12px 13px;display:flex;gap:14px;align-items:center}.quick-toggle span{font-family:var(--sans);font-size:17px}.quick-menu{position:absolute;right:0;top:44px;min-width:205px;border:1px solid #d5d8cc;background:#fcfaf4;box-shadow:0 15px 50px #394b4020;padding:11px 8px;border-radius:10px;transform-origin:90% 0;animation:menu-in .17s var(--ease)}.quick-menu[hidden]{display:none}.quick-caption{display:block;padding:6px 11px 10px;color:var(--muted);font-size:10px;letter-spacing:.1em}.quick-menu a{display:flex;align-items:center;justify-content:space-between;font-size:12px;padding:12px 11px;border-radius:5px}.quick-menu a:hover,.quick-menu a:focus-visible{background:#eaf0e9}.quick-menu a span{color:#849184}@keyframes menu-in{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.hero{position:relative;flex:1;min-height:0;isolation:isolate}.hero-copy{position:absolute;z-index:10;left:5.6%;top:17.5%;width:34%;max-width:460px}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.09em;margin:0 0 23px;color:#5e665e}.eyebrow i{width:3px;height:3px;border-radius:50%;background:#657d6c}h1{font-family:var(--serif);font-size:clamp(58px,5.55vw,85px);line-height:1.18;font-weight:400;letter-spacing:-.055em;margin:0}h1>span{display:block}.title-second{color:var(--teal)}.title-dot{font-size:.5em;letter-spacing:0;margin-left:4px}.element-line{display:flex;align-items:center;gap:17px;font-family:var(--serif);font-size:17px;letter-spacing:.1em;margin:28px 0 18px}.element-line span{font-size:9px;color:#9b9d8e}.hero-description{font-family:var(--serif);font-size:12px;line-height:1.9;letter-spacing:.04em;color:#74796f;margin:0}.hero-actions{display:flex;align-items:center;gap:23px;margin-top:28px}.button-primary{display:flex;align-items:center;justify-content:space-between;gap:24px;background:#303e36;color:#fffdf4;border:1px solid #303e36;border-radius:24px;min-height:42px;padding:7px 8px 7px 20px;font-family:var(--serif);font-size:12px;letter-spacing:.06em;transition:background-color .18s,transform .18s}.button-primary:hover{background:#45594a}.button-arrow{display:grid;place-items:center;border-radius:50%;width:26px;height:26px;background:#f2f2e7;color:#334436;font:17px var(--sans)}.text-link{display:inline-flex;align-items:center;gap:13px;font-family:var(--serif);font-size:11px;padding:7px 0;position:relative}.text-link::after{content:"";position:absolute;left:0;right:22px;bottom:3px;height:1px;background:#aab3a2;transform-origin:left;transform:scaleX(.28);transition:transform .25s var(--ease)}.text-link:hover::after{transform:scaleX(1)}.interaction-note{margin-top:23px;display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:9px;letter-spacing:.06em;color:#94998a}.interaction-note>span:first-child{width:18px;height:1px;background:#b7bba9}.note-touch{display:none}
.scene-wrap{position:absolute;z-index:5;left:72%;top:51%;width:min(44vw,720px);aspect-ratio:6/5;transform:translate(-50%,-50%);--scene-scale:1}.scene-canvas{position:absolute;left:0;top:0;width:600px;height:500px;transform:scale(var(--scene-scale));transform-origin:0 0}.scene-backdrop{position:absolute;inset:0;width:600px;height:500px;pointer-events:none}.card-fan{position:absolute;inset:0;perspective:1100px}.card-position{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:110px;height:142px;transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg));transition:left .36s var(--ease),top .36s var(--ease),transform .36s var(--ease),opacity .22s;z-index:var(--z);filter:drop-shadow(1px 6px 4px #384a4225);will-change:transform}.card-position.is-selected{left:300px;top:291px;transform:translate(-50%,-50%) rotate(0) scale(1.58);z-index:20;filter:drop-shadow(0 9px 8px #384a4228)}.card-position.is-retreated{opacity:.65;transform:translate(-50%,-44%) rotate(calc(var(--r)*1deg)) scale(.96)}.card-rotor{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .44s var(--ease)}.is-selected .card-rotor{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border:1px solid #b8ab85;border-radius:8px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 0 0 3px #fffdf0;background:#f1e5cb}.card-front{display:block;width:100%;padding:0;text-align:center;cursor:pointer;outline-offset:3px!important;transform:translateZ(.2px)}.card-art{position:absolute;inset:3px;border-radius:5px;background-image:url('assets/element-atlas.webp');background-size:300% 200%;background-position:var(--art);transition:filter .22s}.card-art::after{content:"";position:absolute;inset:0;background:linear-gradient(#faf4df7a,transparent 48%)}.card-character{position:absolute;z-index:2;top:12px;left:0;right:0;text-align:center;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--accent);text-shadow:0 1px #fff8e7aa}.card-back{background:linear-gradient(145deg,#fcf8eb,#efe8d6);transform:rotateY(180deg);padding:17px 11px 10px;display:flex;flex-direction:column;text-align:left;color:#424d43}.card-back::before{content:"";position:absolute;top:-23px;right:-17px;width:72px;height:72px;border:1px solid #b9b49630;border-radius:50%;pointer-events:none}.card-close{position:absolute;right:2px;top:1px;width:21px;height:21px;background:transparent;color:#8e9385;font:15px var(--sans);z-index:2}.card-back-title{font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:.03em;margin:0 0 8px;color:var(--accent)}.card-back-copy{font-family:var(--serif);font-size:9px;line-height:1.8;margin:0}.card-back-link{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:8px;border-top:1px solid #a5a89250}.card-back-link:hover{text-decoration:underline}.floating-label{position:absolute;left:102px;top:307px;z-index:9;transform:rotate(-8deg);font-family:var(--serif);font-size:10px;background:#fdfcf5;border:1px solid #e6e5d7;border-radius:4px;padding:11px 12px;box-shadow:0 4px 8px #4d61461c;pointer-events:none}.floating-label i{font-style:normal;font-family:var(--sans);margin-left:17px;color:#6a8067}.scene-caption{position:absolute;left:85px;top:405px;color:#859180;font-family:var(--serif);font-size:8px;letter-spacing:.05em}.scene-caption::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:#a28d62;vertical-align:middle;margin-right:7px}
.star-entrance{position:absolute;left:211px;top:64px;width:83px;height:113px;z-index:7;display:block}.star-map{display:block;width:83px;height:87px;filter:drop-shadow(0 5px 5px #4965571b);transition:transform .25s var(--ease)}.star-orbits{transform-origin:59px 60px;transition:transform .5s var(--ease)}.object-label{position:absolute;font-family:var(--serif);font-size:9px;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:7px}.object-label i{font:10px var(--sans);opacity:.5;font-style:normal}.star-label{left:82px;top:47px;padding:5px 0;border-bottom:1px solid #b4b8a45c}.bagua-entrance{position:absolute;left:457px;top:323px;width:85px;height:109px;z-index:10}.bagua-disc{display:block;width:85px;height:85px;filter:drop-shadow(0 4px 3px #61644925);transition:transform .35s var(--ease)}.bagua-label{left:9px;top:88px;font-size:9px}.star-entrance:hover .star-map{transform:translateY(-5px)}.star-entrance:hover .star-orbits{transform:rotate(8deg)}.bagua-entrance:hover .bagua-disc{transform:translateY(-4px) rotate(7deg)}
.cloud-ornament{position:absolute;pointer-events:none;z-index:0;background-image:url('assets/element-atlas.webp');background-size:300% 200%;background-position:100% 100%;opacity:.48;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,black 27%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,black 27%,transparent 70%)}.cloud-top{width:39%;aspect-ratio:1;right:-8%;top:-26%;transform:rotate(-15deg)}.cloud-side{width:27%;aspect-ratio:1;right:-10%;bottom:-2%;transform:rotate(21deg);opacity:.3}
.hero-footer{position:relative;z-index:12;margin:0 5.6%;height:56px;min-height:56px;border-top:1px solid #dadfd3;display:flex;align-items:center;justify-content:space-between;color:#737d70;font-family:var(--serif);font-size:9px;letter-spacing:.06em}.footer-signature{font-style:italic;color:#4a5849}.footer-links{display:flex;gap:16px}.footer-links a:hover{color:var(--ink)}.footer-links span{opacity:.5}.scroll-link{display:flex;gap:15px;align-items:center}.scroll-link span{font:17px var(--sans);color:#53674e}
.explore-section{max-width:1440px;margin:0 auto;padding:125px 8% 140px;display:grid;grid-template-columns:1fr 1.2fr;gap:10%;border-bottom:1px solid var(--line)}.section-number{font-size:9px;color:#909689;letter-spacing:.1em}.section-intro h2{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1.35;letter-spacing:-.04em;margin:27px 0 24px}.section-intro p{font-family:var(--serif);font-size:12px;line-height:1.8;color:#82867a;margin-bottom:32px}.element-details{border-bottom:1px solid var(--line)}.element-details:first-child{border-top:1px solid var(--line)}.element-details summary{list-style:none;display:flex;align-items:center;gap:20px;padding:23px 0;cursor:pointer}.element-details summary::-webkit-details-marker{display:none}.detail-character{font-family:var(--serif);font-size:23px;width:28px;color:var(--accent)}.detail-name{font-family:var(--serif);font-size:14px;letter-spacing:.06em}.detail-plus{margin-left:auto;font:18px var(--serif);color:#9da492;transition:transform .22s}.element-details[open] .detail-plus{transform:rotate(45deg)}.detail-content{padding:0 35px 23px 48px;font-family:var(--serif);font-size:12px;line-height:1.95;color:#788271}.detail-content p{margin:0}.detail-content a{display:inline-flex;gap:25px;align-items:center;margin-top:17px;color:#3c6457;border-bottom:1px solid #b2bfaa;padding-bottom:3px}.page-footer{max-width:1440px;padding:32px 8%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:10px;color:#8e9488}.page-footer a{color:#4c614a;display:flex;align-items:center;gap:22px}.reveal{opacity:1}.js-ready .reveal{opacity:0;transform:translateY(15px);transition:opacity .55s var(--ease),transform .55s var(--ease)}.js-ready .reveal.is-visible{opacity:1;transform:none}.js-ready .reveal:nth-child(2){transition-delay:.09s}
/* Keep the original hit surfaces and stacking order; move only the artwork.
   Otherwise the lifted card steals its neighbour's hover and click targets. */
@media(hover:hover) and (pointer:fine){
 .card-position{--fan-shift:0px}
 #card-metal{--fan-shift:-24px}#card-wood{--fan-shift:-12px}#card-fire{--fan-shift:12px}#card-earth{--fan-shift:24px}
 .card-fan:not(:has(.is-selected)) .card-rotor{pointer-events:none}
 .card-fan:not(:has(.is-selected)) .card-rotor{transition:transform .2s var(--ease)}
 body:not(.canvas-editing) .card-fan:not(:has(.is-selected)):is(:hover,:focus-within) .card-rotor{transform:translateX(var(--fan-shift))}
 body:not(.canvas-editing) .card-fan:not(:has(.is-selected)) .card-position:is(:hover,:focus-within){filter:drop-shadow(1px 8px 5px #384a4230)}
 body:not(.canvas-editing) .card-fan:not(:has(.is-selected)) .card-position:is(:hover,:focus-within) .card-rotor{transform:translateX(var(--fan-shift)) translateY(-10px) rotateX(-2deg)}
 .card-position:hover .card-art{filter:saturate(1.04)}
}
@media(min-width:1800px){.hero-copy{top:20%}.scene-wrap{left:71%}.cloud-top{top:-32%}}
@media(max-width:1000px) and (min-width:701px){.site-header{height:66px;min-height:66px}.wordmark{font-size:16px;gap:8px}.element-nav{gap:5px}.element-nav button{width:31px}.hero-copy{top:23%;width:38%}h1{font-size:59px}.element-line{font-size:15px;gap:13px}.hero-description{font-size:11px}.hero-actions{gap:14px}.text-link{font-size:10px}.scene-wrap{width:47vw;left:74%;top:50%}.hero-footer{font-size:8px}.first-screen{min-height:720px}.eyebrow{font-size:9px}}
@media(max-width:700px){.first-screen{min-height:780px;height:100svh;max-height:1000px}.site-header{height:69px;min-height:69px;padding:0 7%}.wordmark{font-size:16px;gap:8px}.wordmark svg{width:14px;height:14px}.element-nav{top:69px;gap:12px;z-index:15}.element-nav button{width:32px;font-size:13px;height:29px}.quick-toggle{font-size:10px;gap:7px;padding-left:6px}.quick-toggle span{font-size:14px}.hero-copy{left:8%;top:9%;width:82%;max-width:none}.eyebrow{font-size:8px;margin-bottom:17px}h1{font-size:49px;line-height:1.14;letter-spacing:-.035em}h1>span{display:inline}.title-second{margin-left:4px}.title-dot{display:none}.element-line{font-size:13px;gap:13px;margin-top:19px;margin-bottom:11px}.hero-description{font-size:10px;line-height:1.8}.hero-description br{display:none}.hero-actions{margin-top:22px;gap:21px}.button-primary{min-height:39px;font-size:11px;padding:6px 7px 6px 16px;gap:19px}.button-arrow{width:25px;height:25px;font-size:16px}.text-link{font-size:10px}.interaction-note{font-size:8px;margin-top:14px}.scene-wrap{width:94vw;max-width:500px;left:50%;top:69%;transform:translate(-50%,-50%)}.scene-caption{font-size:10px}.card-position.is-selected{transform:translate(-50%,-50%) rotate(0deg) scale(2.05);top:285px}.cloud-top{width:65%;right:-26%;top:12%;opacity:.4}.cloud-side{width:58%;right:-32%;bottom:0;opacity:.25}.hero-footer{margin:0 8%;height:52px;min-height:52px;font-size:8px}.footer-links{display:none}.scroll-link{gap:10px}.scroll-link span{font-size:15px}.footer-signature{font-size:8px}.explore-section{display:block;padding:70px 9% 75px}.section-intro h2{font-size:36px;margin-top:22px}.section-intro p{font-size:11px;margin-bottom:20px}.section-intro{margin-bottom:35px}.element-details summary{padding:21px 0}.detail-content{font-size:11px;padding-right:5px}.page-footer{padding:26px 9%;font-size:9px}.quick-menu{min-width:190px}.scene-backdrop{opacity:.9}}
@media(max-width:700px){.card-position.is-selected{top:300px}.card-close{width:30px;height:25px;font-size:17px}.card-back-link{min-height:27px}}
.scene-canvas:has(.is-selected) .scene-caption{opacity:0}
@media(max-width:370px){h1{font-size:42px}.hero-copy{top:10%}.hero-description{font-size:9px}.hero-actions{gap:13px}.scene-wrap{top:69%}.element-line{gap:10px}.first-screen{min-height:760px}}
@media(max-height:650px) and (min-width:701px){.first-screen{min-height:620px}.site-header{height:58px;min-height:58px}.hero-copy{top:10%}h1{font-size:57px}.eyebrow{margin-bottom:15px}.element-line{margin-top:17px;margin-bottom:11px}.hero-actions{margin-top:20px}.interaction-note{margin-top:15px}.scene-wrap{width:42vw;max-width:600px;top:49%}.cloud-top{top:-36%}.hero-footer{height:44px;min-height:44px}}
@media(hover:none){.note-desktop{display:none}.note-touch{display:inline}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-ready .reveal{opacity:1;transform:none}.star-entrance:hover .star-map,.star-entrance:hover .star-orbits,.bagua-entrance:hover .bagua-disc{transform:none}}

/* Reference geometry: the video webpage is x0..719, y116..571 (720 x 456).
   Desktop layout uses one proportional canvas. C supplies only the surface style. */
@media(min-width:701px){
 .first-screen{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:720/456;container-type:inline-size}
 .site-header{position:absolute;inset:0 0 auto;height:9%;min-height:0;padding:0 5.55%}
 .wordmark{font-size:1.55cqw;gap:1cqw}.wordmark svg{width:1.55cqw;height:1.55cqw}
 .element-nav{gap:.55cqw}.element-nav button{font-size:1.05cqw;width:3.2cqw;height:2.8cqw;border-radius:2cqw}
 .quick-toggle{font-size:.95cqw;padding:1cqw 0;gap:1.2cqw}.quick-toggle span{font-size:1.5cqw}
 .hero{position:absolute;inset:0;flex:none}
 .hero-copy{left:10%;top:16%;width:29%;max-width:none}
 .eyebrow{font-size:.9cqw;gap:.7cqw;margin:0 0 2.8cqw}.eyebrow i{width:.3cqw;height:.3cqw}
 h1{font-size:6.35cqw;line-height:1.03;letter-spacing:-.045em}
 .title-dot{display:none}
 .element-line{font-size:1.55cqw;gap:1.45cqw;margin:3.8cqw 0 .95cqw}
 .element-line span{font-size:.75cqw}
 .hero-description{font-size:1cqw;line-height:1.7;letter-spacing:.02em}
 .hero-actions{gap:2.6cqw;margin-top:2.7cqw}
 .button-primary{font-size:1cqw;min-height:3.9cqw;border-radius:3cqw;padding:.45cqw .5cqw .45cqw 1.6cqw;gap:1.6cqw}
 .button-arrow{width:2.45cqw;height:2.45cqw;font-size:1.55cqw}
 .hero-actions .text-link{font-size:.95cqw;gap:1.1cqw}
 .interaction-note{font-size:.75cqw;margin-top:1.6cqw;gap:.6cqw}
 .interaction-note>span:first-child{width:1.5cqw}
 .scene-wrap{left:41.502525%;top:6.905503%;width:60.606061%;max-width:none;transform:none}
 .card-position{height:137.5px}
 #card-metal{--x:220!important;--y:327!important;--r:-24!important}
 #card-wood{--x:258!important;--y:304!important;--r:-12!important}
 #card-fire{--x:342!important;--y:304!important;--r:12!important}
 #card-earth{--x:380!important;--y:327!important;--r:24!important}
 .card-position.is-selected{left:300px;top:216px;transform:translate(-50%,-50%) rotate(0deg) scale(1.12)}
 .card-fan{z-index:8;pointer-events:none}.card-position{pointer-events:auto}.floating-label{z-index:6}
 .scene-backdrop{left:80px;top:84px;width:440px;height:350px;opacity:.9}
 .star-entrance{left:187px;top:123.1875px}
 .star-label{font-size:8px;left:77px;top:48px}
 .bagua-entrance{left:430.625px;top:278.5625px}
 .floating-label{left:80px;top:337px}
 .scene-caption{left:83px;top:410px}
 .cloud-top{right:-9%;top:6%;width:51%;height:62%;aspect-ratio:auto;opacity:.62;transform:none}
 .cloud-side{right:-15%;top:44%;bottom:auto;width:39%;height:39%;aspect-ratio:auto;opacity:.38;transform:rotate(12deg)}
 .hero-footer{position:absolute;left:5.55%;right:5.55%;bottom:0;margin:0;height:7.1%;min-height:0;font-size:.85cqw}
 .footer-links{gap:1.6cqw}.scroll-link{gap:1.5cqw}.scroll-link span{font-size:1.7cqw}
}

/* The upper illustration becomes one continuous, softly painted star field. */
.hero-description p{margin:0}.hero-description .hero-lead{font-size:14px;color:#405d51;letter-spacing:.04em;margin-bottom:11px}
.role-lines{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;font-size:12px;line-height:1.6}
.role-lines span{white-space:nowrap}.role-lines b{font-family:var(--serif);font-size:1.12em;font-weight:400;margin-right:8px;color:#64795d}
.hero-description .learning-note{margin-top:12px;color:#7b8475;line-height:1.75}
.star-entrance{left:62px;top:28px;width:490px;height:230px;z-index:7}
.star-map{display:none!important}.star-sky{display:block;width:100%;height:100%;overflow:visible;transition:filter .35s}
.star-label{left:92px;top:143px;display:flex;align-items:center;gap:9px;font-size:10px;color:#f2e8c7;border-bottom:0;padding:0;text-shadow:0 1px 5px #19383a}
.star-label small{font-size:6.5px;color:#c2d4c6;letter-spacing:.04em}.star-label i{color:#e7e7cb;opacity:.85}
.star-entrance:hover .star-sky{filter:brightness(1.08)}
.sky-star{animation:star-breathe 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes star-breathe{0%,100%{opacity:.65}50%{opacity:1}}
.bagua-disc{filter:drop-shadow(0 4px 3px #3c514329);transition:transform .35s var(--ease),filter .35s}
.bagua-entrance:hover .bagua-disc{transform:translateY(-3px) rotate(3deg);filter:drop-shadow(0 6px 4px #3c514334)}
@media(min-width:701px){
 .hero-description .hero-lead{font-size:1.12cqw;margin-bottom:.7cqw}
 .role-lines{font-size:.88cqw;line-height:1.55;gap:.3cqw 1cqw}
 .role-lines b{margin-right:.5cqw}
 .hero-description .learning-note{font-size:.9cqw;line-height:1.65;margin-top:.8cqw}
 .hero-actions{margin-top:1.9cqw}.interaction-note{margin-top:1.25cqw}
 .star-entrance{left:62px;top:28px;width:490px;height:230px}
 .star-label{left:92px;top:143px;font-size:10px}
 .scene-backdrop{opacity:.55}
}
@media(max-width:700px){
 .first-screen{min-height:960px;max-height:none}
 .hero-copy{top:7.5%}
 .hero-description .hero-lead{font-size:12px;margin-bottom:9px}
 .role-lines{font-size:10px;gap:4px 12px;max-width:320px}
 .hero-description .learning-note{font-size:10px;line-height:1.7;margin-top:9px}
 .hero-actions{margin-top:20px}
 .scene-wrap{top:74%}
 .star-label{left:92px;top:143px;font-size:13px}.star-label small{display:none}.star-label i{font-size:13px}
 .scene-backdrop{opacity:.55}
}
@media(prefers-reduced-motion:reduce){.sky-star{animation:none}.star-entrance:hover .star-sky{filter:none}}
@media(prefers-reduced-motion:reduce){body:not(.canvas-editing) .card-fan:not(:has(.is-selected)):is(:hover,:focus-within) .card-rotor,body:not(.canvas-editing) .card-fan:not(:has(.is-selected)) .card-position:is(:hover,:focus-within) .card-rotor{transform:none}}

:root{--soft-serif:"STKaiti","华文楷体","KaiTi","楷体",serif}
.hero-copy{isolation:isolate}.hero-copy h1,.hero-copy .element-line,.hero-copy .hero-description,.hero-copy .hero-actions,.hero-copy .hero-actions button,.hero-copy .hero-actions a{font-family:var(--soft-serif)}
.hero-copy h1{letter-spacing:.015em;line-height:1.08;font-weight:400}.hero-copy .hero-description{color:#647b68}.hero-copy .hero-lead{font-weight:400}.hero-copy .role-lines{line-height:1.7}.hero-copy .learning-note{letter-spacing:.03em}
.copy-wash{position:absolute;inset:-8% -19% -6% -16%;z-index:-1;pointer-events:none}
.copy-wash::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 46% 40%,#d2dfcf4f,transparent 66%),radial-gradient(ellipse at 32% 77%,#dfd5b62b,transparent 56%)}
.copy-wash::after{content:"";position:absolute;inset:0;opacity:.14;background:url('assets/element-atlas.webp') 100% 100% / 300% 200%;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse,#000 9%,transparent 69%);-webkit-mask-image:radial-gradient(ellipse,#000 9%,transparent 69%)}
button.floating-label{pointer-events:auto;cursor:pointer;color:#5f7659;z-index:9;background:transparent;border-color:transparent;box-shadow:none}.floating-label:active{transform:rotate(-8deg) scale(.97)}
button.floating-label::after{content:"";position:absolute;inset:-1px;z-index:-1;border:1px solid #e6e5d7;border-radius:4px;background:#fdfcf5;box-shadow:0 4px 8px #4d61461c;pointer-events:none;transition:box-shadow .2s,background-color .2s}
button.floating-label:hover{background:transparent;box-shadow:none}button.floating-label:hover::after{background:#fffdf4;box-shadow:0 5px 12px #49694324}
.floating-label-face{display:inline-flex;align-items:center;pointer-events:none}
@keyframes five-entry-nudge{0%,100%{transform:none}35%{transform:translateY(-2px) rotate(-1.5deg)}70%{transform:translateY(-.5px) rotate(1deg)}}
@media(hover:hover) and (pointer:fine){body:not(.canvas-editing) button.floating-label:hover::after,body:not(.canvas-editing) button.floating-label:hover .floating-label-face{animation:five-entry-nudge .48s var(--ease) both}}
@media(prefers-reduced-motion:reduce){body:not(.canvas-editing) button.floating-label:hover::after,body:not(.canvas-editing) button.floating-label:hover .floating-label-face{animation:none}}
.card-fan{z-index:8;pointer-events:none}.card-position{pointer-events:auto}
.card-back{cursor:pointer}.card-back:focus-visible{outline:2px solid #6a9590;outline-offset:4px}
.bagua-disc{translate:0 0;transform-origin:50% 50%;transform-box:view-box;pointer-events:none;transition:translate .25s var(--ease),filter .25s var(--ease)}
.bagua-entrance:hover .bagua-disc{transform:none}
@media(hover:hover) and (pointer:fine){body:not(.canvas-editing) .bagua-entrance:hover .bagua-disc{translate:0 -6px;filter:drop-shadow(0 8px 5px #3c514334)}}
@media(prefers-reduced-motion:reduce){body:not(.canvas-editing) .bagua-entrance:hover .bagua-disc{translate:0 0}}
.elements-stage{position:fixed;inset:0;margin:0;padding:0;border:0;width:100vw;max-width:none;height:100svh;max-height:none;background:var(--paper);color:var(--ink);overflow:hidden;font-family:var(--serif)}
.elements-stage:not([open]){display:none}.elements-stage[open]{display:flex;flex-direction:column}.elements-stage::backdrop{background:#15362980;backdrop-filter:blur(8px)}
.elements-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 35% 20%,#dce6d74a,transparent 55%),radial-gradient(ellipse at 90% 78%,#e9daba40,transparent 45%)}
.stage-header{height:76px;min-height:76px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid #dce0d4}.stage-title{display:flex;align-items:baseline;gap:18px}.stage-title strong{font-family:var(--soft-serif);font-size:27px;font-weight:400}.stage-title small{font-size:11px;color:#8b957e;letter-spacing:.1em}.stage-tools{display:flex;align-items:center;gap:20px}.stage-tools button{font:11px var(--serif);border:0;background:none;padding:12px 4px;color:#64795c}.stage-tools .stage-close{font:21px var(--sans);padding:9px 12px;color:#53694f}.stage-tools button:hover{color:#213f2b}.stage-tools [hidden]{display:none}
.stage-body{position:relative;flex:1;min-height:0;padding:32px 4% 24px;overflow:auto;overflow-x:hidden;scrollbar-gutter:stable;overflow-anchor:none}.stage-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;min-height:100%;align-items:stretch;overflow:clip;overflow-clip-margin:32px}
.stage-card{position:relative;display:flex;flex-direction:column;border:1px solid #c7c3a9;border-radius:12px;background:#fbf8ec;padding:0;overflow:hidden;text-align:left;box-shadow:0 7px 24px #344b3610;min-height:460px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.stage-card:hover{transform:none;box-shadow:0 12px 26px #344b361b}.stage-image{position:relative;height:39vh;min-height:200px;max-height:390px;background:url('assets/element-atlas.webp') var(--art) / 300% 200%;width:100%}.stage-image::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 75%,#fbf8ec)}.stage-image>b{position:absolute;top:22px;left:22px;font:52px var(--soft-serif);color:var(--accent);font-weight:400;z-index:1}
.stage-card-copy{display:flex;flex-direction:column;flex:1;padding:19px 20px 24px}.stage-card-copy h2{font:23px var(--soft-serif);color:var(--accent);margin:0 0 15px;font-weight:400}.stage-card-copy p{font:13px/1.9 var(--serif);color:#7b866f;margin:0 0 28px}.stage-card-copy span{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#698060;border-top:1px solid #dce0ce;padding-top:17px}
.stage-card.is-waiting{opacity:0}.stage-grid[hidden],.stage-reader[hidden]{display:none}.stage-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 4% 20px;font-size:10px;color:#929c86;position:relative}.stage-footer p{margin:0}.stage-footer span{letter-spacing:.3em;font-family:var(--soft-serif);font-size:14px}
.deal-ghost{position:fixed;z-index:10;border:1px solid #c0b58c;border-radius:10px;background:url('assets/element-atlas.webp') var(--art) / 300% 200%;box-shadow:0 12px 35px #243c3026;pointer-events:none;transform-origin:0 0;overflow:hidden}.deal-ghost b{position:absolute;left:17%;top:10%;font:clamp(35px,5vw,70px) var(--soft-serif);font-weight:400;color:var(--accent);text-shadow:0 1px #fff8de}
.stage-reader{height:100%;min-height:500px;display:grid;grid-template-columns:40% 60%;max-width:1350px;margin:0 auto;border:1px solid #d7dccb;border-radius:14px;overflow:hidden;background:#fcfaf0}.reader-art{position:relative;background:url('assets/element-atlas.webp') var(--art) / 300% 200%;min-height:520px}.reader-art b{position:absolute;top:8%;left:10%;font:100px var(--soft-serif);font-weight:400;color:var(--accent)}
.reader-copy{padding:38px 10% 40px;overflow:auto;display:flex;flex-direction:column}.reader-kicker{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#9aa18b;letter-spacing:.1em}.reader-kicker button{background:none;border:0;padding:8px 0;color:#6a805f;font:11px var(--serif)}.reader-copy h2{font:52px/1.25 var(--soft-serif);color:var(--accent);margin:35px 0 14px;font-weight:400}.reader-lead{font:20px/1.8 var(--soft-serif);color:#687a5f;margin:0 0 26px}.reader-text{font:15px/2 var(--serif);color:#7c856f}.reader-text p{margin:0 0 18px}.reader-cta{align-self:flex-start;margin-top:25px;padding:12px 0;border-bottom:1px solid #b8c4a9;color:#4c7255;font-size:13px}.reader-switch{margin-top:auto;padding-top:35px;display:flex;justify-content:space-between;gap:20px}.reader-switch button{background:transparent;border:0;color:#728367;font:12px var(--serif);padding:8px 0}
@media(min-width:701px){.hero-copy .role-lines{font-size:.98cqw}.hero-copy .learning-note{font-size:1cqw}}
@media(max-width:1000px){.stage-header{padding:0 5%;height:64px;min-height:64px}.stage-title strong{font-size:24px}.stage-title small{display:none}.stage-tools{gap:12px}.stage-body{padding:24px 5%}.stage-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70vw;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;min-height:0;align-items:stretch;padding:0 0 16px}.stage-card{scroll-snap-align:center;min-height:550px}.stage-image{height:34vh;min-height:210px}.stage-footer{font-size:9px;gap:20px}.stage-reader{grid-template-columns:1fr;min-height:0;height:auto}.reader-art{min-height:0;height:230px}.reader-art b{font-size:70px}.reader-copy{padding:22px 8% 32px;overflow:visible}.reader-copy h2{font-size:38px;margin-top:22px}.reader-lead{font-size:18px}.reader-text{font-size:14px}.reader-switch{padding-top:25px}.hero-copy .role-lines{font-size:11px}.hero-copy .learning-note{font-size:11px}.hero-copy .hero-description br{display:initial}}
@media(prefers-reduced-motion:reduce){.stage-card,.floating-label{transition:none}.stage-card:hover{transform:none}}

/* Deal directly out of the visible homepage; each large card waits for a click. */
.elements-stage{transition:background-color .2s}.elements-stage[data-phase=drawing]{background:transparent}
.elements-stage[data-phase=drawing]::before{opacity:0}.elements-stage[data-phase=drawing]::backdrop{background:transparent;backdrop-filter:none}
.elements-stage[data-phase=drawing] .stage-header,.elements-stage[data-phase=drawing] .stage-footer{background:#f8f5eef5}
.stage-card{perspective:1200px;overflow:visible;background:transparent;border:0;box-shadow:none}
.stage-card:hover{box-shadow:none}.stage-card-rotor{position:relative;width:100%;height:100%;min-height:460px;flex:1;transform-style:preserve-3d;transition:transform .62s var(--ease)}
.stage-card.is-flipped .stage-card-rotor{transform:rotateY(180deg)}
.stage-card-front,.stage-card-back{position:absolute;inset:0;border:1px solid #c7c3a9;border-radius:12px;background:#fbf8ec;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 7px 24px #344b3615}
.stage-card-front{padding:0;display:block;width:100%;text-align:left;transform:translateZ(.2px)}
.stage-card-front:active{transform:translateZ(.2px)}
.stage-artwork{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage-card-front::after,.direct-ghost::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#fff7df30,transparent 30%,transparent 64%,#f7f1ddbd)}
.stage-card-front>b,.direct-ghost>b{position:absolute;z-index:2;left:9%;top:4%;font:56px var(--soft-serif);color:var(--accent);font-weight:400;text-shadow:0 1px #fff8df}
.stage-front-caption{position:absolute;z-index:2;bottom:4%;left:9%;right:9%;display:flex;flex-direction:column;gap:13px;color:var(--accent)}
.stage-front-caption strong{font:23px var(--soft-serif);font-weight:400}.stage-front-caption span{font:11px var(--serif);opacity:.8}
.stage-card-back{transform:rotateY(180deg);padding:25px 23px;display:flex;flex-direction:column;text-align:left;cursor:pointer}.stage-card-back:focus-visible{outline:2px solid #6b8b63;outline-offset:4px}
.stage-turn-back{position:absolute;right:12px;top:8px;padding:7px;background:none;font:22px var(--serif);color:#7a8f70}
.stage-back-char{font:55px var(--soft-serif);color:var(--accent);margin:16px 0 25px}
.stage-card-back h2{font:28px/1.4 var(--soft-serif);color:var(--accent);font-weight:400;margin:0 0 20px}
.stage-card-back p{font:14px/2 var(--serif);color:#7b886e;margin:0 0 22px}.stage-card-back .stage-back-lead{font:19px/1.75 var(--soft-serif);color:#617957}
.stage-more{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:auto;border:0;border-top:1px solid #d7dfc9;background:none;font:12px var(--serif);color:#5d7f59;padding:18px 0 0;text-align:left}
.stage-flip-hint{font:11px/1.7 var(--soft-serif);color:#98a18a;margin-bottom:18px}.reader-text .reader-source{font-size:11px;line-height:1.9;color:#9aa18b;border-top:1px solid #dce0d1;padding-top:15px}
.direct-ghost{background:#f8f1df;border-radius:12px}
@media(max-width:1000px){.stage-grid{padding-inline-end:2px}.stage-card-rotor{min-height:550px}.stage-card-back{padding:28px}.stage-card-front>b{font-size:64px}}
@media(prefers-reduced-motion:reduce){.elements-stage,.stage-card-rotor{transition:none}}

/* A short learning moment on the left, within the user's exported composition. */
.hero-copy{--wash-tone:#76916d}
.copy-wash::before{background:var(--wash-tone);opacity:.19;mask-image:radial-gradient(ellipse at 45% 44%,#000 3%,#0008 34%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 45% 44%,#000 3%,#0008 34%,transparent 70%);transition:background-color .65s ease}
.hero-copy .role-lines{display:flex;flex-wrap:wrap;gap:5px 15px;color:#89917d;line-height:1.6}
.hero-copy .role-lines b{margin-right:5px;color:#62795c}
.learning-question{border-top:1px solid #acb99e66;border-bottom:1px solid #acb99e50;margin:18px 0 0;padding:15px 0 14px}
.learning-question summary{display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:6px 12px;list-style:none;cursor:pointer;outline-offset:7px}
.learning-question summary::-webkit-details-marker{display:none}
.question-kicker{grid-column:1;font:10px/1.5 var(--serif);letter-spacing:.12em;color:#92977f}
.question-title{grid-column:1;font:18px/1.65 var(--soft-serif);color:#4b6651}
.question-toggle{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;font:20px/1 var(--soft-serif);color:#8e9b7e;transition:transform .18s var(--ease)}
.learning-question[open] .question-toggle{transform:rotate(45deg)}
.question-answer{font:13px/1.9 var(--serif);color:#78856d;padding:13px 25px 0 0}
.hero-description .question-answer p{margin:0}.question-answer small{display:block;font-size:10px;color:#a0a58e;margin-top:9px}
.hero-copy .learning-note{margin-top:12px;line-height:1.7;color:#8d967f}
@media(min-width:701px){.hero-copy .role-lines{font-size:.86cqw;gap:.35cqw .9cqw}.hero-copy .role-lines b{margin-right:.3cqw}.learning-question{margin-top:1.2cqw;padding:1cqw 0 .9cqw}.learning-question summary{grid-template-columns:minmax(0,1fr) 1.5cqw;gap:.4cqw .8cqw}.question-kicker{font-size:.72cqw}.question-title{font-size:1.3cqw}.question-toggle{font-size:1.4cqw}.question-answer{font-size:.92cqw;padding:.9cqw 1.7cqw 0 0}.question-answer small{font-size:.7cqw;margin-top:.65cqw}.hero-copy .learning-note{font-size:.86cqw;margin-top:.85cqw}}
@media(max-width:700px){.hero-copy{top:min(7.5%,63px)}.hero-copy .role-lines{font-size:10px;gap:4px 13px}.learning-question{margin-top:13px;padding:12px 0 11px}.question-kicker{font-size:9px}.question-title{font-size:16px}.question-answer{font-size:11px;line-height:1.85}.question-answer small{font-size:9px}.hero-copy .learning-note{font-size:10px;margin-top:10px}.first-screen:has(.learning-question[open]){min-height:1100px}}
@media(prefers-reduced-motion:reduce){.copy-wash::before,.question-toggle{transition:none}}

/* Left: gathered ink and readable words. Right: the existing outward fan. */
:root{--ink-hand:"STXingkai","华文行楷","STKaiti","华文楷体","KaiTi",serif;--reading-serif:"STSong","华文宋体","Songti SC","SimSun",serif}
.hero-copy h1{display:flex;align-items:center;gap:24px;line-height:1;letter-spacing:0}
.hero-copy .title-primary{display:block;white-space:nowrap;font-family:var(--ink-hand);font-size:119px;font-weight:400;letter-spacing:-.045em;color:#2c4138;line-height:1.05}
.ink-glyph{display:inline-block}.ink-glyph:first-child{transform:translateY(-.025em)}.ink-glyph:nth-child(2){transform:translateY(.085em)}
.hero-copy .title-second{display:block;writing-mode:vertical-rl;font-family:var(--soft-serif);font-size:26px;letter-spacing:.22em;line-height:1.45;color:#556e5f;margin:20px 0 0;flex-shrink:0}
.hero-copy .hero-description,.hero-copy .hero-actions,.hero-copy .hero-actions button,.hero-copy .hero-actions a{font-family:var(--reading-serif)}
.hero-copy .hero-lead{font-family:var(--reading-serif);font-size:23px;line-height:1.65;letter-spacing:.08em;color:#3c5548;margin-bottom:14px}
.hero-description .philosophy-copy{font:18px/1.95 var(--reading-serif);letter-spacing:.025em;color:#61715f;margin:14px 0 0;text-wrap:pretty}
.hero-copy .role-lines{font-family:var(--reading-serif);color:#7a8676;gap:5px 15px}.hero-copy .role-lines b{font-family:var(--soft-serif);color:#4e6855}
.learning-question{border-top-color:#a5b09d55;border-bottom-color:#a5b09d38}
.question-kicker{font-family:var(--reading-serif);letter-spacing:.15em;color:#85917e}
.question-title{font-family:var(--reading-serif);font-size:17px;line-height:1.85;color:#455e4c;letter-spacing:.025em}
.question-answer{font-family:var(--reading-serif);color:#62745f;line-height:1.95}
.hero-copy .learning-note{font-family:var(--reading-serif);color:#84907c}
.copy-wash::before{opacity:.11}.copy-wash::after{opacity:.07}
.star-painting{filter:saturate(.48) contrast(.9);opacity:.88;transition:filter .65s cubic-bezier(.22,1,.36,1),opacity .65s cubic-bezier(.22,1,.36,1)}
.star-entrance,.star-sky,.star-painting{pointer-events:none}.sky-hit{pointer-events:fill;cursor:pointer}.star-entrance .star-label{pointer-events:auto}
body.canvas-editing .star-entrance{pointer-events:auto}
.cloud-top{opacity:.95}.cloud-side{opacity:.82}.cloud-ornament{filter:contrast(1.32) saturate(1.28)}
.scene-backdrop{opacity:.92;filter:saturate(1.16)}
.star-entrance .star-label{left:65px;top:-16px;color:#4e6656;text-shadow:none;font-size:10px;gap:8px}
.star-label::before{content:"";width:15px;height:1px;background:#b29c6c}
.star-entrance .star-label small{color:#84917d;font-size:7px}.star-entrance .star-label i{color:#647c65}
.star-entrance:hover .star-sky{filter:none}
.hero-copy,.site-header,.cloud-ornament,.scene-backdrop,.card-fan,.floating-label,.bagua-entrance,.hero-footer,.explore-section,.page-footer,.canvas-open{transition:filter .65s cubic-bezier(.22,1,.36,1)}
body.sky-focused .star-painting{filter:saturate(1) contrast(1);opacity:1;transition-duration:.48s}
body.sky-focused :is(.hero-copy,.site-header,.cloud-ornament,.scene-backdrop,.card-fan,.floating-label,.bagua-entrance,.hero-footer,.explore-section,.page-footer,.canvas-open){filter:saturate(.32)}
body.canvas-editing .star-painting{transition:none}
@media(min-width:701px){
 .scene-wrap{top:3.405503%}
 .hero-copy{top:22%}
 .eyebrow{margin-bottom:2.3cqw;font-family:var(--reading-serif);font-size:.82cqw;letter-spacing:.15em;color:#7b8978}
 .hero-copy h1{gap:1.65cqw;margin-bottom:1.4cqw}
 .hero-copy .title-primary{font-size:8.245cqw}
 .hero-copy .title-second{font-size:1.8cqw;margin-top:1.4cqw}
 .hero-copy .element-line{position:absolute;left:-3.25cqw;top:4.1cqw;margin:0;writing-mode:vertical-rl;display:flex;gap:.12cqw;font-size:.98cqw;letter-spacing:.08em;color:#7e8976}
 .hero-copy .element-line span{font-size:.47cqw;color:#b4b49d}
 .hero-copy .hero-lead{font-size:1.6cqw;margin-bottom:1cqw}
 .hero-description .philosophy-copy{font-size:1.25cqw;margin-top:1cqw}
 .hero-copy .role-lines{font-size:.87cqw;gap:.35cqw .85cqw}
 .learning-question{margin-top:1.5cqw;padding:1.1cqw 0 1cqw}
 .question-kicker{font-size:.72cqw}.question-title{font-size:1.2cqw}.question-answer{font-size:.94cqw}
 .hero-copy .hero-actions{margin-top:1.8cqw}
}
@media(max-width:700px){
 .star-entrance .star-label{top:-25px;font-size:14px}.star-entrance .star-label i{font-size:13px}
 .first-screen{min-height:1120px}.first-screen:has(.learning-question[open]){min-height:1280px}
 .hero-copy .eyebrow{font-family:var(--reading-serif);margin-bottom:18px;color:#7b8978;letter-spacing:.1em}
 .hero-copy h1{gap:17px;margin-bottom:0}
 .hero-copy .title-primary{font-size:clamp(69.7px,21.25vw,88.4px)}
 .hero-copy .title-second{font-size:21px;margin:14px 0 0}
 .hero-copy .element-line{position:static;writing-mode:horizontal-tb;font-size:11px;gap:10px;margin:22px 0 14px;color:#7e8976}
 .hero-copy .element-line span{font-size:6px;color:#b4b49d}
 .hero-copy .hero-lead{font-size:18px;line-height:1.7;margin-bottom:12px}
 .hero-description .philosophy-copy{font-size:13px;line-height:1.9;margin-top:12px}
 .hero-copy .role-lines{font-size:10px;gap:4px 13px}
 .learning-question{margin-top:16px;padding:13px 0 12px}
 .question-title{font-size:15px}.question-answer{font-size:12px}.hero-copy .hero-actions{margin-top:21px}
}

/* Revision 02: one continuous typographic composition, without brush ornaments. */
.abc-sample-return{display:none}
@media(min-width:701px){
 .hero-copy{--left-display:"Noto Serif SC","Source Han Serif SC",serif;--left-reading:"Noto Sans SC","Microsoft YaHei",sans-serif;left:10.2%;top:16.1%;width:30%;height:auto!important;max-width:none;translate:none!important;scale:1!important;isolation:isolate}
 .hero-copy .eyebrow{font:400 .77cqw/1.6 var(--left-reading);letter-spacing:.09em;color:#849080;margin:0 0 1.12cqw;gap:.65cqw}
 .hero-copy h1{position:relative;display:flex;align-items:center;gap:1.6cqw;margin:0 0 .9cqw;translate:none!important;scale:1!important}
 .hero-copy .title-primary{font:650 8.65cqw/1.12 var(--left-display);letter-spacing:.015em;color:#30463b}
 .hero-copy .ink-glyph{transform:none}
 .hero-copy .title-second{font:450 1.12cqw/1.75 var(--left-reading);letter-spacing:.16em;color:#71806b;margin:.5cqw 0 0;writing-mode:vertical-rl}
 .hero-copy .element-line{left:-2.2cqw;top:4.6cqw;font:400 .72cqw/1.3 var(--left-reading);gap:.13cqw;color:#9a9e88;letter-spacing:0}
 .hero-copy .element-line span{font-size:.3cqw;color:#c0b79d}
 .hero-copy .hero-description{position:relative;translate:none!important;scale:1!important;width:100%;letter-spacing:0}
 .hero-copy .hero-lead{font:500 1.52cqw/1.6 var(--left-display);letter-spacing:.015em;color:#405943;margin:0 0 1.55cqw;width:100%}
 .hero-lead .lead-line{display:inline}
 .hero-lead .lead-line+ .lead-line{padding-left:0}
 .hero-copy .philosophy-copy{font:350 1.04cqw/1.95 var(--left-reading);letter-spacing:.005em;color:#65715f;margin:0;width:96%;display:block}
 .philosophy-copy .copy-definition{display:block;margin-bottom:.65cqw}
 .philosophy-copy .copy-wood,.philosophy-copy .copy-metal{display:inline;padding:0;color:inherit;line-height:inherit}
 .philosophy-copy .copy-wood::before,.philosophy-copy .copy-metal::before{content:none}
 .philosophy-copy br{display:none}
 .philosophy-copy em{font-style:normal;font-weight:500;color:#52664f;white-space:nowrap}
 .philosophy-copy .copy-observation{display:block;margin-top:.65cqw;font-size:inherit;line-height:inherit;color:#7e8874}
 .hero-copy .learning-question{position:relative;margin:1.35cqw 0 0;padding:.95cqw 0 .85cqw;border-top:1px solid #a6ad943d;border-bottom:0;width:96%}
 .hero-copy .question-kicker{font:400 .65cqw/1.6 var(--left-reading);letter-spacing:.08em;color:#939780}
 .hero-copy .question-title{font:450 .98cqw/1.85 var(--left-reading);letter-spacing:.005em;color:#53694f}
 .hero-copy .question-toggle{font:300 1.4cqw var(--left-reading);color:#8f9a7f}
 .hero-copy .question-answer{position:absolute;z-index:15;top:auto;bottom:calc(100% + .6cqw);left:-1.1cqw;right:-1.1cqw;background:#fcfaf3;border:1px solid #d9ddce;padding:1.25cqw 1.35cqw;box-shadow:0 .7cqw 2cqw #344b3614;font:400 1.02cqw/1.95 var(--left-reading);color:#64745b}
 .hero-copy .question-answer small{font-size:.7cqw;color:#9b9e87}
 .hero-copy .hero-actions{margin-top:.9cqw;gap:2cqw}
 .hero-copy .button-primary{font:450 .95cqw var(--left-reading);min-height:3.6cqw;padding-left:1.45cqw;gap:1.4cqw}
 .hero-copy .hero-actions .text-link{font:400 .8cqw var(--left-reading);color:#6e7b64}
 .hero-copy .interaction-note{margin-top:.85cqw;font:400 .64cqw/1.7 var(--left-reading);letter-spacing:.06em;color:#a1a58d}
 .hero-copy .copy-wash{inset:-3cqw -2cqw -1cqw -3cqw;height:auto;opacity:1;z-index:-1;pointer-events:none;background:none}
 .hero-copy .copy-wash::before{inset:0;background:var(--wash-tone);opacity:.018;mask-image:radial-gradient(ellipse at 39% 43%,#000 0%,#0007 40%,transparent 74%)}
 .hero-copy .copy-wash::after{inset:0;opacity:.035;background:url('assets/paper-stock.webp') center/45cqw;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse at 40% 40%,#000 20%,transparent 74%)}
}

/* A cover held together by typography. Its physical edges remain invisible. */
@media(min-width:701px){
 .hero-copy{--cover-column:26.5cqw;left:10.2%;top:12.2%;width:30%;display:flex;flex-direction:column;align-items:center;background:none;border:0;box-shadow:none}
 .hero-copy .copy-wash{display:none}
 .hero-copy .eyebrow{justify-content:center;gap:.6cqw;margin:0 0 1.15cqw;font:400 .74cqw/1.6 "Noto Serif SC","SimSun",serif;letter-spacing:.15em;color:#89917c}
 .hero-copy .eyebrow i{width:3px;height:3px;background:#9a9e86}
 .hero-copy h1{width:100%;justify-content:center;align-items:center;gap:1.25cqw;padding-left:2.8cqw;margin:0 0 .65cqw;cursor:default}
 .hero-copy .title-primary{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-size:9.2cqw;font-weight:560;line-height:1.12;letter-spacing:.015em;color:#30463b}
 .hero-copy .title-second{font:450 1.12cqw/1.7 "Noto Serif SC","SimSun",serif;letter-spacing:.2em;margin:.35cqw 0 0;color:#6e7c65}
 .hero-copy .title-dot{display:none}
 .hero-copy .element-line{position:static;writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center;gap:.7cqw;margin:0 0 1.6cqw;font:400 .75cqw/1.6 "Noto Serif SC","SimSun",serif;letter-spacing:.15em;color:#93977e}
 .hero-copy .element-line span{font-size:.4cqw;color:#b7ad91}
 .hero-copy .hero-description{width:var(--cover-column);margin:0}
 .hero-copy .hero-lead{margin:0 0 1.35cqw;font:500 1.58cqw/1.65 "Noto Serif SC","SimSun",serif;letter-spacing:.025em;color:#405743;text-align:left;white-space:nowrap}
 .hero-copy .hero-lead .lead-line{display:inline;padding:0}
 .hero-copy .philosophy-copy{width:100%;margin:0;font:420 1.01cqw/1.95 "Noto Serif SC","SimSun",serif;letter-spacing:.025em;color:#6b7561;text-align:justify;text-justify:inter-ideograph}
 .hero-copy .philosophy-copy :is(.copy-definition,.copy-wood,.copy-metal,.copy-observation){display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}
 .hero-copy .philosophy-copy em{font-family:inherit;font-weight:520;color:#53664f}
 .hero-copy .learning-question{width:100%;margin:1.55cqw 0 0;padding:.8cqw 0 .1cqw;border:0}
 .hero-copy .learning-question::before{content:"";position:absolute;left:0;top:0;width:2.5cqw;height:1px;background:#a7ad9270}
 .hero-copy .question-kicker{font:400 .66cqw/1.7 "Noto Serif SC","SimSun",serif;letter-spacing:.12em;color:#92977e}
 .hero-copy .question-title{font:450 .94cqw/1.85 "Noto Serif SC","SimSun",serif;letter-spacing:0;color:#5e7056}
 .hero-copy .question-toggle{right:0;font-size:1.25cqw;color:#899679}
 .hero-copy .question-answer{font:400 1.01cqw/1.95 "Noto Serif SC","SimSun",serif;text-align:left}
 .hero-copy .hero-actions{width:var(--cover-column);margin:1.4cqw 0 0;display:flex;align-items:baseline;justify-content:flex-start;gap:2.4cqw}
 .hero-copy .button-primary{border:0;border-bottom:1px solid #85967783;border-radius:0;background:transparent;color:#354f3d;box-shadow:none;padding:0 0 .5cqw;min-height:2.6cqw;font:500 1.07cqw/1.5 "Noto Serif SC","SimSun",serif;gap:1.7cqw}
 .hero-copy .button-primary:hover{background:transparent;box-shadow:none;color:#1e3b2a}
 .hero-copy .button-arrow{width:1.7cqw;height:1.7cqw;border-radius:0;background:transparent;color:#586a4e;font-size:1.3cqw}
 .hero-copy .hero-actions .text-link{font:400 .8cqw/1.6 "Noto Serif SC","SimSun",serif;color:#7b866e;gap:.9cqw}
 .hero-copy .interaction-note{width:var(--cover-column);margin:.55cqw 0 0;font:400 .64cqw/1.7 "Noto Serif SC","SimSun",serif;letter-spacing:.07em;color:#9b9f89}
 .hero-copy .interaction-note>span:first-child{display:none}
}

:root {
  --mw-rail: #b9af92;
  --mw-paper: #f5f1e7;
}

@media (min-width: 741px) {
  .hero-copy > .mw-home-frame {
    position: absolute;
    inset: -22px -25px -24px;
    z-index: -1;
    border: 1px solid #b9af9290;
    box-shadow: inset 0 0 0 4px #f7f4e99c, inset 0 0 0 5px #b6ac9133, 0 8px 24px #4b51380b;
    background: linear-gradient(119deg,#f8f5ec93,#f5f0e554 75%,#e5ddc750);
    border-radius: 3px;
    pointer-events: none;
  }
  .hero-copy > .mw-window-latch {
    position: absolute;
    z-index: 2;
    right: -24px;
    top: 52%;
    width: 34px;
    height: 39px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }
  .mw-window-latch::before,.mw-sash-latch {
    content: '';
    position: absolute;
    width: 5px;
    height: 22px;
    right: 7px;
    top: 9px;
    border: 1px solid #9c947a80;
    border-radius: 5px;
    background: linear-gradient(90deg,#c1b69a,#e9dfc4 60%,#a69c83);
    box-shadow: 1px 2px 3px #524b3f30;
  }
  .hero-copy:has(.mw-window-latch:hover) > .mw-home-frame,
  .hero-copy:has(#start-explore:hover) > .mw-home-frame { border-color:#9d9573; }
}
@media (max-width: 740px) { .mw-home-frame,.mw-window-latch { display:none; } }


/* A light resting entrance; the painting is reserved for the click. Desktop sample. */
.star-entrance .star-sky{filter:none;overflow:visible}
.star-entrance .star-label{
  left:260px;top:112px;font-size:10px;gap:7px;
  color:#687567;text-shadow:none;border:0;padding:0;transition:color 180ms ease;
}
.star-entrance .star-label::before{display:none}
.star-entrance .star-label small{font-size:7px;color:#939788}
.star-entrance .star-label i{font-size:10px;color:#92927d;opacity:.7}
.moon-wisp{pointer-events:none}
.moon-ink{transform-origin:300px 79px;transition:filter 180ms ease,transform 180ms ease}
.moon-local-hit{pointer-events:all;cursor:pointer}
.moon-focus-ring{opacity:0;transition:opacity 160ms ease;pointer-events:none}
.star-entrance:focus-visible{outline:0}
.star-entrance:focus-visible .moon-focus-ring{opacity:.85}
.star-entrance:hover .moon-ink{filter:drop-shadow(0 0 5px #d7b86140);transform:translateY(-1px)}
.star-entrance:hover .star-label{color:#9a804c}
.star-entrance:active .moon-ink{transform:scale(.96)}
@media(prefers-reduced-motion:reduce){
  .star-entrance:hover .moon-ink,.star-entrance:active .moon-ink{transform:none;filter:none}
}

.moon-cloud-context{opacity:.44;filter:saturate(.58) contrast(.95);pointer-events:none}
.moon-small-star{fill:#b9a06a;opacity:.62;pointer-events:none}

/* An actual painted moon, with the original local focus behaviour. */
.moon-painted-source{pointer-events:none}
.moon-ink{opacity:.96;filter:saturate(.76) contrast(.98);transition:filter 520ms cubic-bezier(.22,1,.36,1),opacity 520ms ease}
.star-entrance:hover .moon-ink,.star-entrance:active .moon-ink{transform:none;filter:saturate(.76) contrast(.98)}
.moon-cloud-context{transition:filter 580ms cubic-bezier(.22,1,.36,1),opacity 580ms cubic-bezier(.22,1,.36,1)}
.moon-small-star,.moon-wisp{transition:opacity 520ms ease}

/* Keep the chosen soft-spread entrance; reduce only the scenic background. */
.first-screen .cloud-top{opacity:.68}
.first-screen .cloud-side{opacity:.56}
.first-screen .cloud-ornament{filter:contrast(1.14) saturate(1.06)}
.first-screen .scene-backdrop{opacity:.75;filter:saturate(1.02)}
#card-water .card-art{
  background-image:url('assets/water-card-pure-v3.webp');
  background-size:cover;
  background-position:center;
}

/* The window latch and moon are decorative on the public homepage. */
.first-screen .mw-window-latch,
.first-screen .star-entrance {
  pointer-events: none;
}
.stage-reader[data-element="water"] .reader-art {
  background: url('assets/water-card-pure-v3.webp') center / cover;
}
.hero-copy .button-primary {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hero-copy .button-primary:focus-visible,
.bagua-entrance:focus-visible {
  outline: 2px solid #55705c;
  outline-offset: 4px;
}
@media (max-width: 700px) {
  .first-screen {
    height: auto;
    max-height: none;
    min-height: 100svh;
  }
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-copy {
    position: relative;
    inset: auto;
    width: 84%;
    margin: 68px auto 0;
    transform: none;
  }
  .scene-wrap {
    position: relative;
    inset: auto;
    transform: none;
    width: min(94vw, 500px);
    margin: -10px auto 0;
    aspect-ratio: 6 / 4.35;
  }
}
@media (min-width: 701px) {
  .first-screen {
    min-height: 100svh;
  }
}