:root{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:#24304a;background:#fff;font-synthesis:none;--red:#ff5a50;--red-dark:#e94840;--yellow:#ffd45c;--teal:#28bba5;--ink:#24304a;--muted:#6f7890;--soft:#fff7ef}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;overflow-x:hidden}
a{color:inherit}
.site-header{height:84px;width:min(1240px,calc(100% - 56px));margin:auto;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}
.home-brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-size:24px;font-weight:900;letter-spacing:-.04em;color:var(--ink)}
.brand-mark{width:38px;height:38px;border-radius:13px;background:var(--red);display:grid;place-items:center;position:relative;transform:rotate(-4deg);box-shadow:0 7px 0 rgba(255,90,80,.14)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:#fff;border-radius:20px;transform-origin:left center}
.brand-mark:before{width:10px;height:5px;left:9px;top:20px;transform:rotate(45deg)}
.brand-mark:after{width:19px;height:5px;left:16px;top:24px;transform:rotate(-49deg)}
.brand-mark i{position:absolute;width:5px;height:5px;background:var(--yellow);border-radius:50%;top:7px}
.brand-mark i:first-child{left:8px}
.brand-mark i:last-child{right:8px}
.site-header nav{display:flex;gap:38px}
.site-header nav a{text-decoration:none;font-size:14px;font-weight:650;color:#545d73;transition:color .2s}
.site-header nav a:hover{color:var(--red)}
.admin-entry{border:1.5px solid #dcdfe7;border-radius:999px;padding:11px 18px;text-decoration:none;font-size:13px;font-weight:750;transition:.2s}
.admin-entry:hover{border-color:var(--ink);transform:translateY(-1px)}
.admin-entry span{color:var(--red);margin-left:5px}
.hero{min-height:calc(100vh - 84px);max-height:820px;width:min(1240px,calc(100% - 56px));margin:auto;display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:60px;padding:40px 0 92px}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{font-size:clamp(52px,5.2vw,76px);line-height:1.14;letter-spacing:-.065em;margin:0 0 30px;font-weight:900}
.hero-copy h1{font-size:clamp(50px,4.3vw,64px)}
.hero-line{display:block;white-space:nowrap}
.hero-copy h1 em{font-style:normal;color:var(--red);position:relative;white-space:nowrap}
.hero-copy h1 em:after{content:"";height:10px;border-radius:50%;background:var(--yellow);position:absolute;left:-2px;right:-2px;bottom:-5px;transform:rotate(-2deg);z-index:-1}
.hero-copy p{font-size:19px;line-height:1.9;color:var(--muted);margin:0 0 36px}
.hero-actions{display:flex;align-items:center;gap:28px}
.button{display:inline-flex;align-items:center;gap:24px;padding:15px 22px;border-radius:14px;text-decoration:none;font-size:15px;font-weight:800;transition:.2s}
.button span{font-size:21px;line-height:1}
.button-primary{background:var(--red);color:#fff;box-shadow:0 10px 0 #f2c5b7,0 18px 32px rgba(255,90,80,.18)}
.button-primary:hover{transform:translateY(-3px);box-shadow:0 13px 0 #f2c5b7,0 22px 36px rgba(255,90,80,.22)}
.text-link{font-size:14px;font-weight:750;text-decoration:none;border-bottom:1px solid #c9ccd5;padding-bottom:5px}
.text-link span{color:var(--teal);margin-left:6px}
.hero-world{height:570px;position:relative;border-radius:54% 46% 48% 52%/42% 46% 54% 58%;background:#eefaf7}
.hero-world:before{content:"";position:absolute;inset:44px 25px 30px 35px;border:2px dashed rgba(40,187,165,.18);border-radius:48% 52% 43% 57%/57% 40% 60% 43%;transform:rotate(-4deg)}
.sun{position:absolute;width:72px;height:72px;border-radius:50%;background:var(--yellow);right:70px;top:45px;box-shadow:0 0 0 15px rgba(255,212,92,.18)}
.cloud{position:absolute;width:70px;height:23px;border-radius:30px;background:#fff;box-shadow:25px -13px 0 -3px #fff}
.cloud-one{left:68px;top:85px}
.cloud-two{right:70px;top:168px;transform:scale(.7)}
.island{position:absolute;border-radius:50%;transform:rotate(-7deg)}
.island-back{width:370px;height:190px;background:#b9e88b;left:125px;top:215px;box-shadow:0 20px 0 #7ecb95,0 45px 35px rgba(36,48,74,.14)}
.island-front{width:270px;height:115px;background:#7ad0b2;left:210px;top:345px;transform:rotate(8deg);opacity:.85}
.path{position:absolute;left:173px;top:257px;width:290px;height:140px;border:16px solid transparent;border-top-color:#fff0c4;border-radius:50%;transform:rotate(12deg)}
.path i{position:absolute;width:18px;height:18px;border-radius:50%;background:#fff0c4}
.path i:nth-child(1){left:8px;top:-13px}
.path i:nth-child(2){left:80px;top:-55px}
.path i:nth-child(3){right:75px;top:-55px}
.path i:nth-child(4){right:2px;top:-11px}
.word-card{position:absolute;background:#fff;padding:17px 19px;border-radius:16px;box-shadow:0 14px 30px rgba(36,48,74,.13);display:grid;gap:2px;z-index:5}
.word-card small{font-size:10px;color:var(--muted);font-weight:700}
.word-card strong{font:900 25px/1.1 ui-rounded,"Arial Rounded MT Bold",sans-serif;color:var(--ink)}
.word-card span{font-size:10px;color:var(--teal)}
.word-card-one{left:30px;top:175px;transform:rotate(-8deg)}
.word-card-one:before{content:"🍎";font-size:33px;position:absolute;right:13px;top:14px}
.word-card-two{right:18px;top:253px;transform:rotate(8deg)}
.word-card-two strong{color:var(--red)}
.sound-wave{letter-spacing:2px}
.character{position:absolute;left:290px;top:222px;width:84px;height:160px;z-index:4;filter:drop-shadow(0 12px 8px rgba(36,48,74,.12))}
.character .face{position:absolute;left:18px;top:10px;width:55px;height:57px;border-radius:46% 46% 44% 44%;background:#ffd2ad}
.character .hair{position:absolute;z-index:2;left:13px;top:2px;width:65px;height:35px;border-radius:60% 55% 35% 20%;background:#473c48;transform:rotate(-6deg)}
.character .body{position:absolute;left:14px;top:60px;width:62px;height:68px;border-radius:25px 25px 14px 14px;background:var(--red);transform:rotate(-3deg)}
.character .arm{position:absolute;right:-5px;top:67px;width:50px;height:16px;border-radius:20px;background:#ffd2ad;transform:rotate(-38deg);transform-origin:left}
.character .leg{position:absolute;left:25px;top:118px;width:24px;height:48px;border-radius:0 0 12px 12px;background:#33466d;box-shadow:28px 0 #33466d}
.flag{position:absolute;right:128px;top:189px;width:10px;height:145px;background:#fff;border-radius:10px;z-index:3}
.flag i{position:absolute;left:8px;width:69px;height:47px;background:var(--yellow);clip-path:polygon(0 0,100% 12%,72% 100%,0 87%)}
.star{position:absolute;color:var(--yellow);font-size:35px;z-index:7;filter:drop-shadow(0 5px 0 rgba(255,212,92,.2))}
.star-one{left:93px;bottom:92px;transform:rotate(-15deg)}
.star-two{right:78px;bottom:80px;font-size:25px;transform:rotate(18deg)}
.card-stage{background:radial-gradient(circle at 50% 45%,#163f54 0,#102d41 48%,#0b2032 100%);border-radius:44px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 35px 70px rgba(20,57,73,.22);isolation:isolate;overflow:hidden;perspective:1000px}
.card-stage:before{inset:-25%;border:0;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(48,221,192,.13),transparent 28%,rgba(255,194,54,.12),transparent 58%);animation:stage-spin 18s linear infinite}
.card-stage:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.8px);background-size:43px 43px;opacity:.14;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.stage-aura{position:absolute;width:330px;height:330px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-48%);border:1px solid rgba(80,233,205,.3);box-shadow:0 0 55px rgba(39,200,178,.3),inset 0 0 60px rgba(39,200,178,.16);z-index:0}
.stage-aura:before,.stage-aura:after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(255,216,99,.45);inset:-35px;animation:stage-spin 14s linear infinite}
.stage-aura:after{inset:38px;border-style:solid;border-color:rgba(255,255,255,.13);animation-direction:reverse;animation-duration:9s}
.game-card{position:absolute;aspect-ratio:430/645;filter:drop-shadow(0 24px 22px rgba(3,17,29,.45));transform-style:preserve-3d;z-index:3}
.hero-card{width:270px;left:calc(50% - 135px);top:18px;animation:card-float 5s ease-in-out infinite}
.side-card{width:205px;left:22px;top:145px;z-index:2;transform:rotate(-15deg);animation:card-float-left 6s ease-in-out infinite}
.back-card{width:205px;right:21px;top:128px;z-index:1;transform:rotate(14deg);animation:card-float-right 6.5s ease-in-out infinite}
.card-art{position:absolute;left:6.5%;top:20.8%;width:87%;height:59.2%;overflow:hidden;border-radius:20% 20% 18% 18%;background:#20a4b8}
.card-art img{width:100%;height:100%;object-fit:cover;display:block}
.card-shell{position:absolute;inset:0;width:100%;height:100%;z-index:3}
.card-word,.card-meaning{position:absolute;z-index:4;left:12%;right:12%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-word{top:6.1%;font:900 2.1em/1.2 ui-rounded,"Arial Rounded MT Bold",sans-serif;color:#087a70;text-shadow:0 2px 0 #fff7dd,0 3px 2px rgba(0,0,0,.18)}
.card-meaning{bottom:6.1%;font-size:1.78em;font-weight:900;color:#fff9e4;text-shadow:0 3px 0 #07544f,0 4px 4px rgba(0,0,0,.25)}
.effect-scan{position:absolute;z-index:5;inset:3%;border-radius:10%;overflow:hidden;pointer-events:none}
.effect-scan:after{content:"";position:absolute;width:42%;height:150%;left:-65%;top:-20%;transform:rotate(15deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);filter:blur(2px);animation:foil-scan 4.2s ease-in-out infinite}
.card-fire .card-art{filter:saturate(1.08) sepia(.04)}
.effect-flame{position:absolute;z-index:5;left:10%;right:10%;bottom:7%;height:32%;background:radial-gradient(ellipse at 18% 100%,#fff47e 0 5%,#ff8a19 13%,transparent 29%),radial-gradient(ellipse at 48% 100%,#fffbc4 0 5%,#ff511e 19%,transparent 38%),radial-gradient(ellipse at 82% 100%,#ffe14f 0 4%,#ff651d 17%,transparent 31%);filter:blur(1px) drop-shadow(0 -8px 10px #ff521f);mix-blend-mode:screen;opacity:.64;clip-path:polygon(0 100%,4% 68%,12% 85%,19% 25%,28% 72%,39% 8%,49% 71%,61% 18%,72% 74%,86% 31%,93% 76%,100% 52%,100% 100%);animation:flame-flicker .72s ease-in-out infinite alternate}
.card-fire{filter:drop-shadow(0 24px 22px rgba(3,17,29,.45)) drop-shadow(0 0 16px rgba(255,106,35,.6))}
.card-lightning{filter:drop-shadow(0 22px 20px rgba(3,17,29,.45)) drop-shadow(0 0 18px rgba(65,192,255,.72))}
.card-lightning .card-art{filter:saturate(.85) hue-rotate(8deg) contrast(1.08)}
.effect-bolt{position:absolute;z-index:6;width:10%;height:75%;top:8%;background:#d8f7ff;filter:drop-shadow(0 0 5px #27b9ff) drop-shadow(0 0 12px #218dff);clip-path:polygon(45% 0,63% 0,51% 21%,74% 27%,45% 48%,62% 54%,25% 100%,38% 60%,12% 54%,43% 33%,25% 26%);opacity:.84;animation:bolt-flash 2.3s steps(1) infinite}
.bolt-one{left:48%;transform:rotate(8deg)}
.bolt-two{left:72%;height:45%;top:35%;transform:rotate(-18deg);animation-delay:.17s}
.card-water{filter:drop-shadow(0 22px 20px rgba(3,17,29,.45)) drop-shadow(0 0 18px rgba(47,190,235,.58))}
.card-water .card-art{filter:sepia(.08) hue-rotate(145deg) saturate(.85)}
.effect-ripple{position:absolute;z-index:6;border:2px solid rgba(221,250,255,.85);border-radius:50%;box-shadow:0 0 8px #36bfe4,inset 0 0 8px #36bfe4;opacity:0;animation:ripple 2.8s ease-out infinite}
.ripple-one{width:35%;aspect-ratio:1;left:20%;top:38%}
.ripple-two{width:26%;aspect-ratio:1;right:17%;top:58%;animation-delay:1.1s}
.card-particle{position:absolute;z-index:8;color:#ffe36d;text-shadow:0 0 12px #ffd333;font-size:25px;animation:particle-pulse 2s ease-in-out infinite}
.particle-one{left:20%;top:13%}
.particle-two{right:18%;top:27%;animation-delay:.6s}
.particle-three{right:26%;bottom:12%;animation-delay:1.2s}
@keyframes stage-spin{to{transform:rotate(360deg)}}
@keyframes card-float{50%{transform:translateY(-13px) rotateY(-2deg)}}
@keyframes card-float-left{50%{transform:translateY(9px) rotate(-13deg) rotateY(5deg)}}
@keyframes card-float-right{50%{transform:translateY(-8px) rotate(12deg) rotateY(-5deg)}}
@keyframes foil-scan{0%,35%{left:-65%}70%,100%{left:125%}}
@keyframes flame-flicker{to{transform:scaleY(1.1) translateY(-3px);filter:blur(1.5px) drop-shadow(0 -12px 12px #ff521f)}}
@keyframes bolt-flash{0%,13%,19%,100%{opacity:0}14%,18%{opacity:.95}}
@keyframes ripple{0%{transform:scale(.25);opacity:.85}100%{transform:scale(1.7);opacity:0}}
@keyframes particle-pulse{50%{transform:scale(1.55) rotate(25deg);opacity:.48}}
.concept-stage{background:radial-gradient(circle at 53% 44%,#fffdf4 0,#f4f3e5 47%,#e7f3ec 100%);border-radius:44px;box-shadow:inset 0 0 0 1px rgba(31,129,105,.08),0 35px 70px rgba(36,84,74,.16);isolation:isolate;overflow:hidden;perspective:1000px}
.concept-stage:before{inset:-25%;border:0;border-radius:50%;background:conic-gradient(from 180deg,transparent,rgba(31,139,111,.09),transparent 30%,rgba(244,184,53,.12),transparent 60%);animation:stage-spin 22s linear infinite}
.concept-stage:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,#258c72 0 1px,transparent 1.8px);background-size:43px 43px;opacity:.08;mask-image:linear-gradient(to bottom,#000,transparent 82%)}
.concept-card{position:absolute;margin:0;aspect-ratio:2/3;z-index:2;filter:drop-shadow(0 24px 22px rgba(36,48,50,.22));transform-style:preserve-3d}
.concept-card img{width:100%;height:100%;object-fit:contain;display:block}
.concept-card figcaption{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;background:#fff;color:#26745f;border:1px solid #d8e7df;border-radius:999px;padding:7px 12px;font-size:10px;font-weight:850;box-shadow:0 7px 18px rgba(31,89,74,.12)}
.concept-complete{width:278px;left:calc(50% - 139px);top:22px;z-index:4;animation:card-float 5.4s ease-in-out infinite}
.concept-fire{width:215px;left:15px;top:142px;transform:rotate(-14deg);animation:concept-float-left 6.4s ease-in-out infinite}
.concept-lightning{width:220px;right:8px;top:126px;transform:rotate(13deg);animation:concept-float-right 6.8s ease-in-out infinite}
@keyframes concept-float-left{50%{transform:translateY(9px) rotate(-12deg)}}
@keyframes concept-float-right{50%{transform:translateY(-8px) rotate(11deg)}}
.experience{background:var(--soft);padding:112px max(28px,calc((100vw - 1180px)/2));position:relative}
.section-heading{text-align:center}
.section-heading p,.section-label{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:var(--red);margin:0 0 16px}
.section-heading h2,.highlight-copy h2,.together-copy h2{font-size:clamp(38px,4vw,56px);line-height:1.2;letter-spacing:-.055em;margin:0;font-weight:900}
.experience-stage{display:grid;grid-template-columns:1fr 80px 1fr 80px 1fr;align-items:start;gap:20px;margin-top:78px}
.stage-copy{background:#fff;border-radius:24px;padding:30px;min-height:225px;box-shadow:0 18px 45px rgba(84,66,56,.07);transition:.25s}
.stage-copy:hover{transform:translateY(-7px)}
.step-number{font:900 44px/1 ui-rounded,"Arial Rounded MT Bold";color:#f4d4cc}
.stage-copy:nth-child(3) .step-number{color:#c3ebe3}
.stage-copy:nth-child(5) .step-number{color:#f3dfa5}
.stage-copy h3{font-size:24px;margin:24px 0 10px}
.stage-copy p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}
.stage-line{height:110px;border-bottom:3px dashed #ebc9b8;position:relative}
.stage-line span{position:absolute;right:-3px;bottom:-6px;width:11px;height:11px;border-radius:50%;background:var(--red)}
.stage-line:nth-child(4){border-color:#a9dcd1}
.stage-line:nth-child(4) span{background:var(--teal)}
.highlights{width:min(1180px,calc(100% - 56px));margin:0 auto;padding:140px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:105px;align-items:center}
.highlight-visual{height:510px;border-radius:42px;background:#f0faf8;position:relative;display:grid;place-items:center}
.map-sheet{width:74%;height:68%;background:#fff;border-radius:22px;padding:24px;box-shadow:0 28px 55px rgba(36,48,74,.13);transform:rotate(-3deg)}
.map-top{height:30px;border-bottom:1px solid #edf0f4;display:flex;align-items:center;gap:6px}
.map-top span{width:70px;height:9px;border-radius:9px;background:var(--red);margin-right:auto}
.map-top i{width:8px;height:8px;border-radius:50%;background:#e8eaf0}
.map-route{height:185px;display:flex;align-items:center}
.map-route b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:#9b7224}
.map-route b:nth-of-type(even){background:var(--teal);color:#fff}
.map-route span{height:3px;flex:1;background:repeating-linear-gradient(90deg,#d8dde6 0 7px,transparent 7px 13px)}
.map-caption{display:grid;gap:6px}
.map-caption strong{font-size:20px}
.map-caption small{color:var(--muted)}
.floating-card{position:absolute;width:67px;height:79px;border-radius:16px;display:grid;place-items:center;color:#fff;font:900 30px ui-rounded;background:var(--red);box-shadow:0 14px 25px rgba(36,48,74,.14)}
.card-a{left:25px;top:78px;transform:rotate(-12deg)}
.card-b{right:29px;bottom:62px;transform:rotate(11deg);background:var(--yellow);color:#fff}
.shader-demo{position:absolute;width:178px;height:118px;border-radius:22px;padding:22px;color:#fff;overflow:hidden;box-shadow:0 22px 35px rgba(9,29,43,.22);display:grid;align-content:end;z-index:2}
.shader-demo span{font-size:11px;letter-spacing:.16em;font-weight:800;opacity:.72}
.shader-demo b{font-size:18px;margin-top:4px}
.shader-fire{left:34px;top:42px;background:linear-gradient(145deg,#3c2024,#a63226 58%,#ff862d);transform:rotate(-7deg)}
.shader-lightning{right:30px;top:75px;background:linear-gradient(145deg,#18284d,#1d66a0 62%,#38c8f4);transform:rotate(7deg)}
.shader-water{left:115px;bottom:33px;background:linear-gradient(145deg,#0d5969,#168ba0 60%,#66dddc);transform:rotate(3deg)}
.shader-demo i{position:absolute;inset:0;opacity:.75}
.shader-fire i{background:radial-gradient(ellipse at 30% 110%,#fff587 0 4%,#ff741f 18%,transparent 43%),radial-gradient(ellipse at 75% 110%,#ffd53e 0 4%,#ff3d1f 17%,transparent 39%);animation:flame-flicker .8s ease-in-out infinite alternate}
.shader-lightning i{background:linear-gradient(112deg,transparent 45%,#dffbff 46% 48%,transparent 49%),linear-gradient(70deg,transparent 59%,#5ed8ff 60% 61%,transparent 62%);filter:drop-shadow(0 0 7px #32bfff);animation:bolt-flash 2s steps(1) infinite}
.shader-water i{background:repeating-radial-gradient(ellipse at 65% 38%,transparent 0 11px,rgba(220,252,255,.55) 12px 13px,transparent 14px 22px);animation:water-drift 3s linear infinite}
.effect-core{position:absolute;width:145px;height:145px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 35% 30%,#fff9c4,#ffcc40 44%,#dd8d19 100%);color:#63470f;font-size:17px;font-weight:900;border:8px solid #fff;box-shadow:0 12px 30px rgba(87,63,16,.22),0 0 0 2px #e7af35;animation:core-breathe 3s ease-in-out infinite}
.effect-core:after{content:"✦";position:absolute;right:13px;top:9px;color:#fff;font-size:22px}
@keyframes water-drift{to{transform:translate(14px,8px) scale(1.08)}}
@keyframes core-breathe{50%{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 16px 38px rgba(87,63,16,.3),0 0 0 2px #e7af35,0 0 30px rgba(255,208,64,.4)}}
.state-gallery{background:radial-gradient(circle at 50% 44%,#fffaf0 0,#f5f1e7 68%,#e9f2ed 100%);display:flex;align-items:center;justify-content:center;gap:0;overflow:hidden;padding:38px}
.state-gallery:before{content:"";position:absolute;width:330px;height:330px;border:1px dashed rgba(26,135,107,.25);border-radius:50%;animation:stage-spin 22s linear infinite}
.state-gallery figure{position:relative;margin:0;width:31%;aspect-ratio:2/3;z-index:2;transition:transform .3s ease,filter .3s ease;filter:drop-shadow(0 19px 17px rgba(37,46,45,.18))}
.state-gallery figure:nth-child(1){transform:rotate(-9deg) translate(15px,18px)}
.state-gallery figure:nth-child(2){z-index:3;transform:translateY(-12px)}
.state-gallery figure:nth-child(3){transform:rotate(9deg) translate(-15px,18px)}
.state-gallery figure:hover{z-index:5;transform:translateY(-22px) scale(1.06)}
.state-gallery img{width:100%;height:100%;object-fit:contain;display:block}
.state-gallery figcaption{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);background:rgba(25,43,40,.82);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 11px;font-size:10px;font-weight:800;backdrop-filter:blur(8px)}
.highlight-copy ul{list-style:none;margin:44px 0 0;padding:0}
.highlight-copy li{display:grid;grid-template-columns:122px 1fr;gap:22px;border-top:1px solid #e5e7ec;padding:23px 0}
.highlight-copy li span{font-size:15px;font-weight:850}
.highlight-copy li p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.together{background:var(--yellow);padding:110px max(28px,calc((100vw - 1180px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:95px;align-items:center;overflow:hidden}
.together-copy>p:not(.section-label){color:#655633;line-height:1.85;margin:28px 0 35px;max-width:440px}
.together .section-label{color:#8b6e1f}
.button-dark{background:var(--ink);color:#fff;box-shadow:0 10px 0 rgba(123,91,17,.22)}
.button-dark:hover{transform:translateY(-3px)}
.admin-preview{height:390px;background:#fff;border-radius:25px;box-shadow:0 28px 60px rgba(117,82,9,.2);transform:rotate(2deg);overflow:hidden}
.preview-bar{height:54px;background:#fff;display:flex;align-items:center;padding:0 22px;border-bottom:1px solid #edf0f4;gap:7px}
.preview-bar span{font-size:14px;font-weight:900;color:var(--red);margin-right:auto}
.preview-bar i{width:8px;height:8px;border-radius:50%;background:#d8dde5}
.preview-body{height:calc(100% - 54px);display:grid;grid-template-columns:105px 1fr}
.preview-side{background:#f7f8fb;padding:24px 17px;display:grid;align-content:start;gap:19px}
.preview-side b{width:35px;height:35px;border-radius:12px;background:var(--red)}
.preview-side span{height:8px;background:#dfe3ea;border-radius:8px}
.preview-content{padding:38px}
.preview-content small{color:var(--muted);font-weight:700}
.preview-content>strong{font-size:27px;display:block;margin:6px 0 32px}
.progress-row{display:grid;grid-template-columns:50px 1fr 42px;gap:12px;align-items:center;margin-top:24px;font-size:12px}
.progress-row>span{font-weight:800}
.progress-row i{height:9px;border-radius:9px;background:#edf0f3;overflow:hidden}
.progress-row i b{display:block;height:100%;background:var(--teal);border-radius:inherit}
.progress-row em{font-style:normal;font-size:10px;color:var(--teal)}
footer{width:min(1180px,calc(100% - 56px));margin:auto;min-height:160px;display:flex;align-items:center;gap:38px;color:var(--muted);font-size:12px}
footer p{margin-right:auto}
.icp-link{color:var(--muted);text-decoration:none;white-space:nowrap}
.icp-link:hover{color:var(--ink);text-decoration:underline}
.footer-brand{font-size:18px}
.footer-brand .brand-mark{width:30px;height:30px;border-radius:10px}
.footer-brand .brand-mark:before{left:7px;top:16px}
.footer-brand .brand-mark:after{left:13px;top:20px}
.footer-brand .brand-mark i{display:none}
@media(max-width:900px){.site-header nav{display:none}
.hero{grid-template-columns:1fr;max-height:none;padding:55px 0 80px}
.hero-copy{text-align:center}
.hero-actions{justify-content:center}
.hero-world{height:520px;width:min(620px,100%);margin:auto}
.experience-stage{grid-template-columns:1fr;gap:16px}
.stage-line{display:none}
.stage-copy{min-height:0}
.highlights,.together{grid-template-columns:1fr;gap:55px}
.highlight-copy{order:-1}
.together{padding-top:90px;padding-bottom:90px}
.admin-preview{transform:none}
}
@media(max-width:600px){.site-header{height:72px;width:calc(100% - 32px)}
.home-brand{font-size:18px}
.brand-mark{width:34px;height:34px}
.admin-entry{padding:9px 13px}
.hero{width:calc(100% - 36px);padding-top:42px}
.hero-copy h1{font-size:42px}
.hero-copy p{font-size:16px}
.hero-actions{flex-direction:column;gap:22px}
.hero-world{height:410px;margin-top:14px;border-radius:30px}
.hero-card{width:200px;left:calc(50% - 100px);top:18px}
.side-card,.back-card{width:143px;top:123px}
.side-card{left:5px}
.back-card{right:5px}
.card-word{font-size:1.65em}
.card-meaning{font-size:1.42em}
.stage-aura{width:240px;height:240px}
.concept-complete{width:205px;left:calc(50% - 102px);top:20px}
.concept-fire{width:150px;left:0;top:126px}
.concept-lightning{width:155px;right:-2px;top:119px}
.word-card-two{right:-5px}
.word-card-one{left:-7px}
.island-back{width:270px;height:150px;left:55px;top:170px}
.island-front{left:105px;top:270px;width:220px}
.character{left:162px;top:168px;transform:scale(.8)}
.flag{right:65px;top:145px}
.path{left:78px;top:210px;width:235px}
.sun{right:32px}
.experience{padding-top:80px;padding-bottom:80px}
.section-heading h2,.highlight-copy h2,.together-copy h2{font-size:36px}
.experience-stage{margin-top:45px}
.highlights{width:calc(100% - 36px);padding:85px 0}
.highlight-visual{height:360px}
.shader-demo{width:145px;height:105px;padding:16px}
.shader-fire{left:15px}
.shader-lightning{right:15px}
.shader-water{left:60px}
.effect-core{width:115px;height:115px;font-size:14px}
.state-gallery{padding:22px 8px}
.state-gallery figure{width:37%}
.map-sheet{width:84%;height:70%;padding:17px}
.map-route{height:135px}
.map-route b{width:32px;height:32px}
.together{padding-left:18px;padding-right:18px}
.admin-preview{height:310px}
.preview-side{display:none}
.preview-body{grid-template-columns:1fr}
.preview-content{padding:28px 20px}
footer{width:calc(100% - 36px);padding:40px 0;min-height:0;align-items:flex-start;flex-direction:column;gap:15px}
footer p{margin:0}
.site-header .brand-mark:after{left:14px;top:21px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.card-stage:before,.concept-stage:before,.stage-aura:before,.stage-aura:after,.game-card,.concept-card,.effect-scan:after,.effect-flame,.effect-bolt,.effect-ripple,.card-particle,.shader-demo i,.effect-core,.state-gallery:before{animation:none!important}
}