/* ViewLingo 官网。token：主黄 #FFE100 / 墨 #1A1A1A / 画布 #F5F5F2，圆角 20 系。 */

/* ---------- 基础 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:35px}
body{margin:0;color:#1a1a1a;background:#fff;font-family:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #1a1a1a;outline-offset:4px}
html[data-input-modality="pointer"] :is(button,a,summary):focus{outline:none}
::selection{background:#ffe100}
h1,h2,h3,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
.m-only{display:none}
.skip{position:absolute;top:-80px;left:20px;padding:14px;background:#ffe100;z-index:20}
.skip:focus{top:10px}

/* ---------- 页头 ---------- */
.header{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 4.6%;position:relative;z-index:5;background:#fff}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:850;font-size:23px;letter-spacing:-.7px}
.brand img{border-radius:10px}
.header nav{display:flex;gap:39px;font-size:14px;font-weight:600;letter-spacing:1px}
.header nav a:hover,footer a:hover{color:#64805b}
.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 28px;border-radius:99px;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s;background:#fff;border:1.5px solid #20231e}
.button:hover{transform:translateY(-3px);box-shadow:0 4px 0 #20231e}
.nav-cta{min-height:40px;padding:0 24px;font-size:14px}
.yellow{background:#ffe100;border-color:#ffe100}
.outline{background:#ffffffd9}
.button.pending{background:#ecefe6;border-color:#ecefe6;color:#7a8087;cursor:default}
.button.pending:hover{transform:none;box-shadow:none}

/* ---------- 首屏 ---------- */
.hero{height:min(760px,calc(100svh - 92px));min-height:600px;position:relative;overflow:hidden;isolation:isolate}
.hero-copy{position:relative;text-align:center;z-index:3;padding-top:38px;pointer-events:none}
.hero-copy a{pointer-events:auto}
.wordmark{position:relative;display:inline-block;font-family:"Arial Rounded MT Bold","Avenir Next",sans-serif;font-size:30px;line-height:1.15;letter-spacing:-1.2px;font-weight:950;transform:rotate(-1.5deg)}
.hero h1{font-size:clamp(36px,4.3vw,60px);line-height:1.3;letter-spacing:2px;font-weight:800;margin-top:14px}
.hero-description{font-size:17px;color:#4f544b;letter-spacing:.8px;margin-top:12px}
.hero-actions{display:flex;justify-content:center;gap:13px;margin-top:26px}

.world{position:absolute;inset:0;z-index:1;pointer-events:none}
.landscape{position:absolute;bottom:-90px;left:0;width:100%;height:auto;min-height:650px;object-fit:cover;object-position:center bottom}
.animal{position:absolute;bottom:86px;will-change:transform}
.animal img{width:100%;height:auto;display:block;object-fit:contain}
.cat{left:27%;width:155px;animation:cat-arrive 1s linear both,cat-snap .3s 1s ease-out}
.cat-step{transform-origin:50% 96%;animation:cat-step .25s 4 ease-in-out}
.bird{right:35%;bottom:110px;width:155px;animation:bird-arrive 1.15s linear both}
.bird-puppet{position:relative;aspect-ratio:360/377;animation:bird-land 1.15s linear both;transform-origin:53% 96%}
.bird-puppet img{position:absolute;inset:0;width:100%;height:100%}
/* Reuse the original transparent illustration; wings hinge at their shoulders, independently of the flight path. */
.bird-core{clip-path:polygon(44% 0,80% 0,80% 22%,65% 24%,65% 38%,60% 43%,60% 51%,65% 54%,70% 61%,100% 100%,0 100%,0 55%,37% 54%,47% 55%,54% 54%,57% 47%,54% 36%,50% 36%,44% 34%)}
.wing-near{clip-path:polygon(0 0,44% 0,44% 34%,50% 36%,54% 36%,57% 47%,54% 54%,47% 55%,37% 54%,0 55%);transform-origin:55% 44%;animation:wing-near 1.15s linear both}
.wing-far{clip-path:polygon(65% 38%,80% 20%,100% 15%,100% 60%,65% 60%,60% 51%,60% 43%);transform-origin:62% 47%;animation:wing-far 1.15s linear both}
.bear{right:16%;bottom:82px;width:clamp(175px,15vw,255px);z-index:3;transform-origin:50% 94%;animation:bear-settle 1s ease-in-out both}
.squirrel{right:6%;bottom:119px;width:clamp(87px,7.5vw,125px);z-index:2;animation:squirrel-arrive 1s .08s linear both}
.squirrel-hop{transform-origin:50% 94%;animation:squirrel-hop .46s .08s 2 both}

/* 词标签：首屏与演示共用 */
.word-tag{border:1.4px solid #252a22;border-radius:12px;background:#fff;padding:7px 13px;box-shadow:2px 3px 0 #252a2220;font-family:"Avenir Next","PingFang SC",sans-serif;font-size:16px;font-weight:750;white-space:nowrap;pointer-events:auto;transition:background .2s,transform .2s}
.word-tag:hover,.word-tag.open{background:#ffe100;transform:translateY(-3px)}
.word-tag.open::after{content:" · " attr(data-zh);font-weight:600}
.animal .word-tag{position:absolute;top:-19px;left:50%;animation:tag-appear .5s 1.5s both}
.bird .word-tag{animation-delay:1.6s}
.picnic-tag{position:absolute;left:47%;bottom:61px;animation:tag-appear .5s 1.7s both}
.bear .word-tag{animation-delay:1.8s;left:38%}
.squirrel .word-tag{animation-delay:1.9s;left:auto;right:12%}

/* 定格：取景角 → 闪光 → 白边相纸 + 框外提亮，停留约 3 秒后整框淡出（用户定：一直摆着很奇怪） */
.snap-frame{position:absolute;left:3%;right:3%;top:max(41%,302px);bottom:14px;border-radius:24px;z-index:4}
.snap-frame::before{content:"";position:absolute;inset:14px;opacity:0;animation:aim 1.2s .1s ease-out both;
  background:
    linear-gradient(#1a1a1a,#1a1a1a) left top/30px 3px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) left top/3px 30px no-repeat,
    linear-gradient(#1a1a1a,#1a1a1a) right top/30px 3px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right top/3px 30px no-repeat,
    linear-gradient(#1a1a1a,#1a1a1a) left bottom/30px 3px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) left bottom/3px 30px no-repeat,
    linear-gradient(#1a1a1a,#1a1a1a) right bottom/30px 3px no-repeat,linear-gradient(#1a1a1a,#1a1a1a) right bottom/3px 30px no-repeat}
.snap-frame::after{content:"";position:absolute;inset:0;border:6px solid #fff;border-radius:inherit;box-shadow:0 14px 40px rgba(23,32,8,.16),0 0 0 100vmax rgba(255,255,255,.55);opacity:0;animation:print 4.2s 1.3s ease-out both}
.flash{position:absolute;inset:0;border-radius:inherit;background:#fff;opacity:0;animation:flash .5s 1.2s ease-out both}
.world:not(.ready) *,.world:not(.ready) *::before,.world:not(.ready) *::after{animation-play-state:paused}
.world.reset *,.world.reset *::before,.world.reset *::after{animation:none!important}

.world-footer{position:absolute;left:calc(3% + 24px);right:calc(3% + 24px);bottom:32px;display:flex;justify-content:space-between;align-items:center;z-index:4;font-size:12px;color:#535e48}
.world-footer>span,.replay{border:0;background:#ffffffe6;padding:8px 14px;border-radius:20px;font-size:12px}
.replay:hover{background:#ffe100}

/* ---------- 通用段落件 ---------- */
.eyebrow{font-size:12px;font-weight:750;letter-spacing:2.8px;color:#62675d}
.step-line{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:650;color:#4f544b;letter-spacing:.5px}
.step-line li{display:inline-flex;align-items:center;gap:9px}
.step-number{font-size:12px;font-weight:750;background:#ffe100;color:#1a1a1a;border-radius:50%;display:inline-grid;place-items:center;width:30px;height:30px;transform:rotate(-8deg)}
.experience h2,.speak h2,.more h2,.faq h2,.about h2{font-size:40px;line-height:1.5;letter-spacing:1px;font-weight:750}
.underline{position:relative;z-index:0}
.underline::after{content:"";position:absolute;bottom:2px;left:0;right:0;height:13px;background:#ffe100;z-index:-1;transform:rotate(-3deg);border-radius:20px}
.demo-caption{position:absolute;font-size:12px;bottom:-27px;left:0;width:100%;text-align:center;letter-spacing:2px;color:#7b8074}

/* ---------- 照片点词 ---------- */
.experience{max-width:1180px;margin:auto;padding:110px 65px 105px;display:grid;grid-template-columns:1fr 440px;gap:65px;align-items:center}
.experience h2{margin:25px 0 22px;font-size:37px}
.experience-copy>p:not(.try-note),.speak-copy>p{font-size:16px;line-height:1.9;color:#686c64}
.experience-copy .try-note{margin-top:35px;font-size:14px;color:#373e30}
.scene-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.scene-tabs button{background:#fff;border:1px solid #d9ded2;border-radius:24px;padding:10px 15px;font-size:13px}
.scene-tabs button.active{background:#edf1e7;border-color:#6a7b5e}
.photo-demo,.talk-demo{background:#f5f5f2;padding:19px;border-radius:27px;box-shadow:0 15px 45px #1720080c;border:1px solid #e7e9e0;position:relative}
.photo-demo{transform:rotate(2deg)}
.photo-top{display:flex;justify-content:space-between;font-size:14px;font-weight:650;gap:10px;padding:1px 3px 15px}
.photo-caption{font-size:12px;color:#767970;font-weight:450}
.photo-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:15px;background:#e9ebe3}
.photo-frame>img{display:block;width:100%;height:100%;object-fit:cover}
.photo-frame .word-tag{position:absolute;font-size:14px;padding:7px 12px;border:1px solid #ffffff65;background:#ffffffeb;transform:translate(-50%,-50%);box-shadow:0 2px 8px #1112}
.photo-frame .word-tag:hover,.photo-frame .word-tag.selected{background:#ffe100;border-color:#ffe100}
.word-detail{border-radius:15px;background:#fff;margin-top:12px;padding:16px;display:grid;grid-template-columns:1fr 42px;gap:9px}
.word-line{display:flex;align-items:center;gap:10px}
.word-line strong{font-size:23px}
.word-line span,#selected-meaning{font-size:14px;color:#686e62}
.sound-button{width:42px;height:42px;border:0;border-radius:50%;background:#ffe100;display:grid;place-items:center}
.is-speaking{animation:pulse .7s infinite alternate}
.word-detail p{grid-column:1/-1;font-size:14px;border-top:1px solid #f0f0eb;padding-top:11px;line-height:1.5}

/* ---------- 开口说 ---------- */
.speak{max-width:1180px;margin:auto;padding:70px 65px 125px;display:grid;grid-template-columns:440px 1fr;gap:80px;align-items:center}
.speak h2{margin:25px 0 22px;font-size:37px}
.points{margin-top:30px;display:grid;gap:14px;font-size:15px;color:#4f544b}
.points li{display:flex;align-items:baseline;gap:14px}
.points b{flex:none;font-size:13px;font-weight:750;color:#1a1a1a;background:#fff6a8;border-radius:8px;padding:3px 9px}
.talk-demo{transform:rotate(-2deg)}
.talk-photo{position:relative;height:150px;border-radius:15px;overflow:hidden}
.talk-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.talk-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(#10101466,#10101400 55%)}
.talk-title,.talk-count{position:absolute;top:12px;z-index:1;color:#fff;font-size:13px;font-weight:700}
.talk-title{left:15px}
.talk-count{right:15px;font-weight:500;font-size:12px;color:#ffffffd6}
.talk-body{display:flex;flex-direction:column;gap:12px;padding:18px 2px 8px}
.bubble{position:relative;border-radius:16px;padding:13px 16px;font-size:15px;line-height:1.55;max-width:88%}
.bubble.teacher{background:#fff;align-self:flex-start;margin-left:10px}
.bubble.student{background:#fff3b0;align-self:flex-end}
.bubble .zh{font-size:12.5px;color:#7a8087;margin-top:3px}
.bubble-play{position:absolute;left:-10px;top:-10px;width:26px;height:26px;border-radius:50%;background:#ffe100;border:0;display:grid;place-items:center;padding:0 0 0 2px}
.bubble-play::before{content:"";position:absolute;inset:-9px}
.scores{display:flex;gap:6px;margin-top:9px}
.pill{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:#dff3e3;color:#1c7a3c}
.talk-mic{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 0 6px;font-size:12px;font-weight:700}
.talk-mic .mic{width:56px;height:56px;border-radius:50%;background:#ffe100;display:grid;place-items:center;box-shadow:0 0 0 8px #ffe10033}
.talk-demo [data-step],.talk-demo .pill{transition:opacity .45s,transform .45s,scale .35s}
.js .talk-demo:not(.play) [data-step]{opacity:0;transform:translateY(12px)}
.js .talk-demo:not(.play) .pill{opacity:0;scale:.7}
.talk-demo.play [data-step="2"]{transition-delay:1s}
.talk-demo.play .pill{transition-delay:1.6s}
.talk-demo.play .pill+.pill{transition-delay:1.78s}
.talk-demo.play [data-step="3"]{transition-delay:2.5s}

/* ---------- 次要卖点 ---------- */
.more{background:#fcfcf9;padding:100px 7% 105px;text-align:center}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;max-width:1030px;margin:55px auto 0;text-align:left}
.more h3{font-size:19px;margin:20px 0 8px;letter-spacing:1px}
.more article p{font-size:15px;line-height:1.8;color:#62665e}
.thumb{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#eef0e6}
.thumb img{position:absolute;display:block;object-fit:cover}
.thumb-album img{width:40%;aspect-ratio:4/5;border:4px solid #fff;border-radius:11px;box-shadow:0 6px 18px #17200822;top:14%}
.thumb-album img:nth-child(1){left:9%;transform:rotate(-8deg)}
.thumb-album img:nth-child(2){left:30%;top:9%;transform:rotate(2deg);z-index:1}
.thumb-album img:nth-child(3){left:51%;transform:rotate(9deg)}
.thumb-quiz img{inset:0;width:100%;height:100%;object-position:50% 78%}
.thumb-quiz .dim{filter:blur(3px) brightness(.5);transform:scale(1.05)}
.thumb-quiz .spot{clip-path:circle(21% at 33% 58%)}
.thumb-quiz .ring{position:absolute;left:33%;top:58%;width:37.1%;aspect-ratio:1;translate:-50% -50%;border:2px solid #ffe100;border-radius:50%}
.thumb-quiz .ask{position:absolute;right:9%;top:16%;background:#fff;border-radius:12px;padding:7px 12px;font-size:13px;font-weight:700}
.thumb-share{background:#f2f5ed}
.thumb-share .phone{position:absolute;left:50%;top:9%;height:100%;aspect-ratio:9/16;translate:-50% 0;border-radius:18px 18px 0 0;overflow:hidden;border:4px solid #1a1a1a;border-bottom:0}
.thumb-share .phone img{inset:0;width:100%;height:100%;object-position:60% 30%}
.thumb-share .clock{position:absolute;top:9%;left:0;right:0;text-align:center;color:#fff;font-size:26px;font-weight:650;letter-spacing:1px;text-shadow:0 1px 8px #0006}
.thumb-share .mini-tag{position:absolute;right:9%;top:36%;background:#ffe100;border-radius:8px;padding:3px 8px;font-size:11px;font-weight:750}
.thumb-share .mark{position:absolute;left:0;right:0;bottom:7%;text-align:center;color:#ffffffd9;font-size:8px;letter-spacing:.5px}

/* ---------- 常见问题 ---------- */
.faq{max-width:760px;margin:auto;padding:100px 25px 105px}
.faq h2{text-align:center;margin-bottom:38px}
.faq details{border-bottom:1px solid #e7e9e0}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 2px;font-size:17px;font-weight:650;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:9px;height:9px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;translate:0 -70%;rotate:45deg;transition:rotate .2s,translate .2s}
.faq details[open] summary::after{rotate:-135deg;translate:0 -20%}
.faq details p{padding:0 40px 24px 2px;font-size:15px;line-height:1.9;color:#62665e}

/* ---------- 结尾与页脚 ---------- */
.about{text-align:center;background:#f2f5ed;padding:88px 25px 92px}
.about h2{margin:22px 0 0;line-height:1.65}
.about h2 span{background:#ffe100;border-radius:4px;padding:0 5px}
.about .apply-note{font-size:14px;line-height:1.9;color:#656f5c;margin-top:30px}
.about .button{margin-top:16px}
footer{display:flex;align-items:center;gap:24px;padding:34px 4.6%;font-size:12px;color:#757970}
footer .brand{font-size:19px;color:#1a1a1a}
footer>div{margin-left:auto;display:flex;gap:24px;align-items:center}
.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);padding:13px 23px;border-radius:30px;background:#222b20;color:#fff;z-index:50;font-size:14px;opacity:0;pointer-events:none;transition:.25s}
.toast.visible{opacity:1;transform:translate(-50%,0)}

/* ---------- 动画 ---------- */
@keyframes cat-arrive{from{transform:translateX(-95px)}to{transform:none}}
@keyframes cat-step{0%,100%{transform:translateY(0) rotate(-1deg)}25%{transform:translateY(-4px) rotate(1.5deg)}50%{transform:translateY(0) rotate(1deg)}75%{transform:translateY(-3px) rotate(-1.5deg)}}
@keyframes cat-snap{0%,100%{transform:none}40%{transform:translateY(-4px) rotate(-3deg)}}
@keyframes bird-arrive{0%{transform:translate(-150px,-96px) rotate(6deg)}22%{transform:translate(-108px,-111px) rotate(4deg)}45%{transform:translate(-62px,-86px) rotate(-3deg)}68%{transform:translate(-22px,-45px) rotate(-7deg)}86%{transform:translate(-3px,-12px) rotate(-4deg)}100%{transform:none}}
@keyframes bird-land{0%,76%{transform:scaleY(.96)}88%{transform:scaleY(1.03)}95%{transform:scaleY(.96)}100%{transform:none}}
@keyframes wing-near{0%,24%,48%{transform:rotate(9deg) scaleY(.95)}12%,36%,60%{transform:rotate(-32deg) scaleY(.8)}74%{transform:rotate(6deg)}86%{transform:rotate(-16deg) scaleY(.93)}100%{transform:none}}
@keyframes wing-far{0%,24%,48%{transform:rotate(-8deg) scaleY(.94)}12%,36%,60%{transform:rotate(36deg) scaleY(.78)}74%{transform:rotate(-6deg)}86%{transform:rotate(17deg) scaleY(.94)}100%{transform:none}}
@keyframes bear-settle{0%,100%{transform:none}35%{transform:rotate(-1.8deg) scaleY(1.015)}68%{transform:rotate(.7deg)}}
@keyframes squirrel-arrive{from{transform:translateX(92px)}to{transform:none}}
@keyframes squirrel-hop{0%{transform:scale(1.06,.94)}16%{transform:translateY(-6px) scale(.95,1.04) rotate(-4deg)}46%{transform:translateY(-24px) rotate(-5deg)}76%{transform:translateY(-9px) rotate(2deg)}88%{transform:scale(1.08,.91)}100%{transform:none}}
@keyframes tag-appear{0%{opacity:0;translate:0 12px;scale:.8}100%{opacity:1;translate:0 0;scale:1}}
@keyframes aim{0%{opacity:0;scale:1.05}30%{opacity:1;scale:1}88%{opacity:1}100%{opacity:0}}
@keyframes flash{0%{opacity:0}14%{opacity:.92}100%{opacity:0}}
@keyframes print{0%{opacity:0;scale:1.015}9.5%{opacity:1;scale:1}81%{opacity:1;scale:1}100%{opacity:0;scale:1}}
@keyframes pulse{to{box-shadow:0 0 0 6px #ffe10044}}

/* ---------- 大屏 ---------- */
@media(min-width:1600px){
  .hero{height:840px;max-height:none}
  .landscape{bottom:-145px}
  .cat{bottom:110px}.bird{bottom:136px}.bear{bottom:104px}.squirrel{bottom:148px}
  .picnic-tag{bottom:100px}
}

/* ---------- 平板 ---------- */
@media(max-width:1000px){
  .header{padding:0 30px}
  .header nav{gap:22px}
  .hero{height:720px}
  .landscape{width:120%;max-width:none;left:-10%;bottom:-30px}
  .cat{left:23%;width:130px}
  .experience{grid-template-columns:1fr 380px;padding:85px 35px;gap:30px}
  .speak{grid-template-columns:380px 1fr;padding:50px 35px 105px;gap:45px}
  .experience h2,.speak h2{font-size:31px}
  .more{padding:80px 30px}
  .more-grid{gap:22px}
  .photo-caption{display:none}
}
@media(max-width:1000px) and (min-width:701px){
  .bird{right:38%;width:124px;bottom:106px}
  .bear{right:14%;width:175px;bottom:83px}
  .squirrel{right:3%;width:85px;bottom:120px}
  .animal .word-tag{font-size:14px;padding:6px 11px}
}

/* ---------- 手机 ---------- */
@media(max-width:700px){
  .m-only{display:inline}
  .header{height:76px;padding:0 22px}
  .brand{font-size:21px;gap:8px}
  .brand img{width:31px;height:31px;border-radius:9px}
  .header nav{display:none}
  .nav-cta{min-height:36px;font-size:12px;padding:0 15px}

  .hero{height:600px;min-height:0;max-height:none}
  .hero-copy{padding:26px 18px 0}
  .wordmark{font-size:24px}
  .hero h1{font-size:clamp(28px,8.6vw,38px);letter-spacing:1px;margin-top:12px}
  .hero-description{font-size:14px;letter-spacing:0;margin-top:10px}
  .hero-actions{gap:9px;margin-top:22px}
  .hero-actions .button{font-size:13px;padding:0 20px;min-height:45px}
  .landscape{width:190%;left:-45%;min-height:0;bottom:-16px}
  .snap-frame{left:12px;right:12px;top:300px;bottom:10px;border-radius:20px}
  .snap-frame::after{border-width:5px}
  .snap-frame::before{inset:11px}
  /* 向左避开篮子提手；脚底随 190vw 宽的背景缩放，落在篮子左后方草地。 */
  .cat{left:1%;width:92px;bottom:calc(29vw - 20px)}
  .bird{right:44%;width:75px;bottom:87px}
  .bear{right:10%;width:114px;bottom:57px}
  .squirrel{right:40%;bottom:24px;width:53px;z-index:4}
  .word-tag{min-height:32px}
  .animal .word-tag{font-size:12px;padding:5px 9px;top:-15px;left:29%;min-height:30px}
  .cat .word-tag{left:10%;top:-21px}
  .bird .word-tag{left:8%;top:-24px}
  .bear .word-tag{left:30%;top:-20px}
  .squirrel .word-tag{display:none}
  .picnic-tag{font-size:12px;left:19%;bottom:29px;padding:5px 9px}
  .world-footer{left:24px;right:24px;bottom:22px;justify-content:flex-end}
  .world-footer>span{display:none}
  .replay{padding:5px 10px}

  .experience,.speak{display:flex;flex-direction:column;padding:70px 24px 85px;gap:37px}
  .speak{padding-top:20px}
  .speak-copy{order:-1}
  .experience-copy,.speak-copy{width:100%;max-width:400px}
  .experience h2,.speak h2{font-size:31px;margin:21px 0 17px}
  .experience-copy .try-note{margin-top:22px}
  .scene-tabs{margin-top:15px}
  .scene-tabs button{font-size:14px}
  .photo-demo,.talk-demo{width:100%;max-width:400px;padding:15px;border-radius:23px}
  .photo-demo{transform:rotate(1deg)}
  .talk-demo{transform:rotate(-1deg)}
  .photo-top{font-size:13px}
  .experience-copy p br,.speak-copy p br{display:none}
  .points{margin-top:24px}

  .more{padding:70px 24px 75px}
  .more h2,.faq h2,.about h2{font-size:28px}
  .more-grid{grid-template-columns:1fr;gap:34px;max-width:400px;margin-top:38px}
  .faq{padding:70px 24px 75px}
  .faq summary{font-size:16px}
  .about{padding:70px 23px 75px}
  footer{padding:27px 24px;flex-wrap:wrap;gap:14px}
  footer>span{margin-left:auto}
  footer>div{width:100%;margin:9px 0 0;gap:20px}
  footer>div span{margin-left:auto}
  .toast{font-size:12px;max-width:90%;width:max-content;text-align:center}
}
@media(max-width:360px){
  .cat{width:82px}
  .bird{right:44%;width:65px}
  .bear{right:10%;width:96px}
  .squirrel{right:40%;bottom:22px;width:47px}
  .hero-actions .button{padding:0 16px}
}

/* ---------- 减少动态效果 ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .replay{display:none}
}