/* 首页舞台（暖色深底 / 玻璃浅色）· 2026-10-15。样式前缀 sg-，只作用于首页。 */
/* ===== 首页舞台 · 页面级（只在首页路由 data-route=home 生效）===== */
@media (prefers-color-scheme:dark){
html[data-route=home]:not([data-theme=light]){--bg:#17100e;--wall-1:#8a2f1c;--wall-2:#a1432a;--wall-3:#4a2418;--wall-4:#6b2a2a;--wall-5:#3a1c14;--wall-alpha:.55;--glass:rgba(56,40,33,.55);--glass-strong:rgba(66,46,38,.74);--glass-thin:rgba(56,40,33,.32);--glass-edge:rgba(255,236,224,.16);--ink:#f8ede6;--muted:rgba(248,237,230,.62);--hairline:rgba(255,236,224,.14);--shadow:0 18px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);color-scheme:dark;}
html[data-route=home]:not([data-theme=light]) body{background-image:radial-gradient(90% 38% at 50% 0%,rgba(255,106,77,.30),transparent 70%),linear-gradient(#17100e,#211815)}
}
html[data-route=home][data-theme=dark]{--bg:#17100e;--wall-1:#8a2f1c;--wall-2:#a1432a;--wall-3:#4a2418;--wall-4:#6b2a2a;--wall-5:#3a1c14;--wall-alpha:.55;--glass:rgba(56,40,33,.55);--glass-strong:rgba(66,46,38,.74);--glass-thin:rgba(56,40,33,.32);--glass-edge:rgba(255,236,224,.16);--ink:#f8ede6;--muted:rgba(248,237,230,.62);--hairline:rgba(255,236,224,.14);--shadow:0 18px 40px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);color-scheme:dark;}
html[data-route=home][data-theme=dark] body{background-image:radial-gradient(90% 38% at 50% 0%,rgba(255,106,77,.30),transparent 70%),linear-gradient(#17100e,#211815)}
/* 页头：首页的 logo 换成会动的分件；其他页保持静态单图 */
.logo-only{position:relative}
html[data-route=home] .logo-only>img{opacity:0}
/* ===== 首页内容：变量（浅色 = 站点原来的玻璃风；深色 = 暖色舞台）===== */
.sg{--red1:#ff6a4d;--red2:#f2563e;--glow:255,106,77;--r:24px;--p:4.6s;
  --ink:#1b2236;--sub:#2f3a52;--mute:#66728e;--surface:rgba(255,255,255,.58);--surface2:rgba(255,255,255,.72);--line:rgba(255,255,255,.78);
  --glow-a:0;--glow2-a:0;--art-glow:.22;--eb-c:#c0391f;--see:#0a5fd0;--ghost:rgba(255,255,255,.46);--bar:rgba(40,60,130,.14);--alt:#d23f27;
  --shadow:0 18px 42px rgba(70,80,200,.24),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35);
  --shadow-h:0 26px 54px rgba(70,80,200,.34),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35);
  --signsh:rgba(40,50,140,.30);--card-bg:var(--surface);--bf:blur(24px) saturate(1.5);--sec-shadow:0 12px 30px rgba(70,80,200,.16),inset 0 1px 0 rgba(255,255,255,.9);
  --tag-bg:rgba(255,255,255,.55);--tag-bd:rgba(255,255,255,.9);--eb-bg:rgba(255,255,255,.65);--eb-bd:rgba(255,255,255,.95);
  --alt-bg:rgba(255,255,255,.62);--alt-bd:rgba(242,86,62,.55);--alt-bg-h:rgba(255,255,255,.85);--cell-bd:rgba(255,255,255,.85);
  --path-u:rgba(40,60,130,.2);--path-i-bd:#7b88a6;--path-i-bg:rgba(255,255,255,.6);
  color:var(--ink);font-family:var(--font-body);line-height:1.5;padding:0 0 56px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .sg{--ink:#f8ede6;--sub:#bba69c;--mute:#8d786f;--surface:#2a1f1b;--surface2:#33261f;--line:rgba(255,236,224,.10);
  --glow-a:.30;--glow2-a:.08;--art-glow:.34;--eb-c:#ffb199;--see:#9cc7ff;--ghost:rgba(255,255,255,.04);--bar:rgba(255,255,255,.10);--alt:#ff9b85;
  --shadow:0 20px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);--shadow-h:0 26px 50px rgba(0,0,0,.45),0 0 0 1px rgba(var(--glow),.25),inset 0 1px 0 rgba(255,255,255,.06);
  --signsh:rgba(0,0,0,.35);--card-bg:linear-gradient(180deg,var(--surface2),var(--surface));--bf:none;--sec-shadow:none;
  --tag-bg:transparent;--tag-bd:var(--line);--eb-bg:rgba(var(--glow),.14);--eb-bd:rgba(var(--glow),.28);
  --alt-bg:transparent;--alt-bd:rgba(var(--glow),.55);--alt-bg-h:rgba(var(--glow),.12);--cell-bd:var(--line);
  --path-u:var(--line);--path-i-bd:var(--mute);--path-i-bg:transparent;}}
html[data-theme=dark] .sg{--ink:#f8ede6;--sub:#bba69c;--mute:#8d786f;--surface:#2a1f1b;--surface2:#33261f;--line:rgba(255,236,224,.10);
  --glow-a:.30;--glow2-a:.08;--art-glow:.34;--eb-c:#ffb199;--see:#9cc7ff;--ghost:rgba(255,255,255,.04);--bar:rgba(255,255,255,.10);--alt:#ff9b85;
  --shadow:0 20px 40px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);--shadow-h:0 26px 50px rgba(0,0,0,.45),0 0 0 1px rgba(var(--glow),.25),inset 0 1px 0 rgba(255,255,255,.06);
  --signsh:rgba(0,0,0,.35);--card-bg:linear-gradient(180deg,var(--surface2),var(--surface));--bf:none;--sec-shadow:none;
  --tag-bg:transparent;--tag-bd:var(--line);--eb-bg:rgba(var(--glow),.14);--eb-bd:rgba(var(--glow),.28);
  --alt-bg:transparent;--alt-bd:rgba(var(--glow),.55);--alt-bg-h:rgba(var(--glow),.12);--cell-bd:var(--line);
  --path-u:var(--line);--path-i-bd:var(--mute);--path-i-bg:transparent;}
.sg *,.sg *::before,.sg *::after{box-sizing:border-box}
:where(.sg) :is(h1,h2,h3,p){margin:0}
.sg a{color:inherit;text-decoration:none}
.sg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.sg-assembly{position:relative;display:block}
.sg-assembly .sg-pc{position:absolute;top:0;height:100%;transform-origin:50% 100%;will-change:transform;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sg-assembly .sg-pc img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.sg-ceo{width:2.72em;aspect-ratio:1902/761;display:inline-block;vertical-align:-.14em;margin-left:.06em}
.sg-p-ni{left:1.5%;width:22.59%}
.sg-p-lai{left:24.84%;width:18.51%}
.sg-p-pai{left:45.64%;width:28.49%}
.sg-p-ban{left:75.49%;width:21.42%}
.sg-p-c{left:0;width:30.97%}
.sg-p-e{left:34.6%;width:26.34%}
.sg-p-o{left:64.3%;width:35.7%}
.sg-p-pai{transform-origin:50% 55%}
.sg-hero{padding:14px 0 6px;text-align:left}
.sg-eyebrow{font-size:13px;color:var(--sub);letter-spacing:.02em;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.sg-eyebrow b{display:inline-block;font-weight:600;color:var(--eb-c);background:rgba(var(--glow),.14);border:1px solid rgba(var(--glow),.28);border-radius:999px;padding:1px 9px;font-size:12px}
.sg h1{font-size:54px;line-height:1.12;margin:0 0 10px;font-weight:900;white-space:nowrap;color:var(--ink)}
.sg-lead{font-size:18px;color:var(--ink);margin:0 0 6px}
.sg-facts{font-size:14px;color:var(--sub);margin:0}
.sg-facts span+span::before{content:"·";margin:0 8px;color:var(--mute)}
.sg-sec-t{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 8px}
.sg-sec-t h2{font-size:15px;font-weight:700;margin:0;color:var(--sub);letter-spacing:.08em}
.sg-levels{display:grid;gap:18px;grid-template-columns:1fr}
.sg-card{position:relative;margin-top:50px;border-radius:var(--r);background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.sg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.sg-art{position:relative;height:178px;border-radius:var(--r) var(--r) 0 0;overflow-x:clip}
.sg-art::before{content:"";position:absolute;inset:0;border-radius:var(--r) var(--r) 0 0;background:var(--art);box-shadow:inset 0 -40px 60px rgba(0,0,0,.12)}
.sg-art::after{content:"";position:absolute;inset:0;border-radius:var(--r) var(--r) 0 0;background:radial-gradient(70% 90% at 72% 30%,rgba(255,255,255,var(--art-glow)),transparent 62%);pointer-events:none}
.sg-tea{--art:linear-gradient(135deg,#ffb15f,#ff6a5a 62%,#ef4f6d)}
.sg-fac{--art:linear-gradient(135deg,#4fd2b8,#3f86f2 60%,#5b63e8)}
.sg-chars{position:absolute;inset:0;clip-path:inset(-120px -2px 0 -2px)}
.sg-chars .sg-ch{position:absolute;bottom:0;width:250px;height:250px;filter:drop-shadow(0 14px 18px rgba(60,10,0,.35));transform-origin:50% 100%;cursor:pointer;animation:sg-breathe 4.4s ease-in-out var(--bd,0s) infinite;-webkit-tap-highlight-color:transparent}
.sg-chars .sg-ch>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none;user-select:none}
.sg-chars .sg-ch .sg-ex{position:absolute;opacity:0;pointer-events:none;user-select:none}
.sg-tea .sg-chars .sg-a{left:21%;z-index:1;width:230px;height:230px}
.sg-tea .sg-chars .sg-b{left:46%;z-index:2}
.sg-fac .sg-chars .sg-a{left:19%;z-index:1;width:236px;height:236px}
.sg-fac .sg-chars .sg-b{left:45%;z-index:2}
@keyframes sg-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.013)}}
@keyframes sg-exBlink{0%,92%,100%{opacity:0}93%,97%{opacity:1}}
@keyframes sg-exLeft{0%,100%{opacity:0}5%,15%{opacity:1}20%{opacity:0}}
@keyframes sg-exRight{0%,100%{opacity:0}5%,15%{opacity:1}20%{opacity:0}}
@keyframes sg-exSmile{0%,100%{opacity:0}44%,56%{opacity:1}62%{opacity:0}}
@keyframes sg-exTalk{0%,68%,100%{opacity:0}70%,72%{opacity:1}73%,75%{opacity:0}76%,78%{opacity:1}79%,81%{opacity:0}82%,84%{opacity:1}85%{opacity:0}}
.sg-ex.sg-blink{z-index:5;animation:sg-exBlink var(--bp,4.4s) linear var(--bd,0s) infinite}
.sg-ex.sg-left{z-index:3;animation:sg-exLeft var(--lp,9s) ease-in-out var(--ld,2s) infinite}
.sg-ex.sg-right{z-index:3;animation:sg-exRight var(--rp,11s) ease-in-out var(--rd,6s) infinite}
.sg-ex.sg-smile{z-index:4;animation:sg-exSmile var(--sp,10s) ease-in-out var(--sd,3s) infinite}
.sg-ex.sg-talk{z-index:2;animation:sg-exTalk var(--tp,8s) linear var(--td,5s) infinite}
.sg-ex.sg-surprise{z-index:6}
.sg-card:hover .sg-ex.sg-smile{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){.sg-chars .sg-ch,.sg-ex{animation:none!important}
.sg-card:hover .sg-ex.sg-smile{opacity:0}}
.sg-sign{position:absolute;left:12px;top:12px;width:112px;z-index:3;filter:drop-shadow(0 8px 10px var(--signsh));transform-origin:50% 9%;animation:sg-sway 5.6s ease-in-out infinite alternate}
@keyframes sg-sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.sg-fac .sg-sign{animation-delay:-2.4s;animation-duration:6.4s}
@media (prefers-reduced-motion:reduce){.sg-sign{animation:none}}
.sg-sign img{display:block;width:100%}
.sg-ribbon{position:absolute;right:12px;top:12px;z-index:4;font-size:12px;font-weight:700;color:#fff;background:rgba(0,0,0,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 10px}
.sg-name{position:absolute;left:16px;bottom:14px;z-index:3;font-size:26px;font-weight:900;color:#fff;text-shadow:0 2px 10px rgba(80,10,0,.45);letter-spacing:.01em}
.sg-body{padding:16px 18px 18px}
.sg-q{font-size:18px;font-weight:700;margin:0 0 8px;line-height:1.35;text-wrap:balance}
.sg-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.sg-tag.sg-rec{color:#fff;background:linear-gradient(145deg,var(--red1),var(--red2));border-color:transparent;font-weight:700}
.sg-tag{font-size:12px;color:var(--sub);border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.sg-path{display:flex;align-items:center;margin:0 0 16px}
.sg-path i{width:12px;height:12px;border-radius:50%;border:2px solid var(--mute);flex:none;background:transparent}
.sg-path i.sg-on{border-color:var(--red1);background:var(--red1);box-shadow:0 0 0 4px rgba(var(--glow),.2)}
.sg-path u{flex:1;height:2px;background:var(--line);min-width:6px;max-width:34px}
.sg-path em{font-style:normal;font-size:12px;color:var(--sub);margin-left:10px;white-space:nowrap}
.sg-act{display:flex;align-items:center;gap:14px}
.sg-go{flex:1;border:0;border-radius:15px;min-height:54px;padding:0 24px;font:inherit;font-size:20px;font-weight:800;letter-spacing:.04em;color:#fff;cursor:pointer;
  background:linear-gradient(145deg,var(--red1),var(--red2));text-shadow:0 1px 1px rgba(150,30,15,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 10px 22px rgba(242,86,62,.35);transition:transform .15s,box-shadow .15s}
.sg-go:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 14px 28px rgba(242,86,62,.45)}
.sg-go.sg-alt{background:transparent;color:var(--alt);text-shadow:none;border:1.5px solid rgba(var(--glow),.55);box-shadow:none}
.sg-go.sg-alt:hover{background:rgba(var(--glow),.12)}
.sg-see{font-size:15px;font-weight:600;color:var(--see);text-decoration:none;white-space:nowrap}
.sg-puzzle{margin-top:26px;border-radius:var(--r);padding:16px 18px 18px;background:linear-gradient(180deg,var(--surface2),var(--surface));border:1px solid var(--line)}
.sg-puzzle .sg-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sg-puzzle h3{margin:0;font-size:17px}
.sg-puzzle .sg-hd small{color:var(--sub);font-size:13px}
.sg-cells{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sg-cell{border-radius:16px;background:var(--ghost);border:1px solid var(--line);padding:12px 12px 12px}
.sg-cell b{display:block;font-size:14px;margin-bottom:8px}
.sg-bar{height:6px;border-radius:99px;background:var(--bar);overflow:hidden;margin-bottom:6px}
.sg-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--c)}
.sg-cell span{font-size:12px;color:var(--sub)}
.sg-puzzle .sg-more{display:inline-block;margin-top:14px;font-size:15px;font-weight:600;color:var(--see);text-decoration:none}
@media (min-width:900px){.sg-hero{text-align:center;padding:30px 0 6px}
.sg-eyebrow{justify-content:center}
.sg h1{font-size:96px;margin-bottom:12px}
.sg-lead{font-size:22px}
.sg-facts{font-size:15px}
.sg-levels{grid-template-columns:1fr 1fr;gap:28px}
.sg-sec-t{justify-content:center;margin-top:34px}
.sg-card{margin-top:64px}
.sg-art{height:220px}
.sg-chars .sg-ch{width:320px;height:320px}
.sg-tea .sg-chars .sg-a{left:19%;width:296px;height:296px}
.sg-tea .sg-chars .sg-b{left:43%}
.sg-fac .sg-chars .sg-a{left:17%;width:304px;height:304px}
.sg-fac .sg-chars .sg-b{left:42%}
.sg-sign{width:150px;left:16px;top:20px}
.sg-name{font-size:34px;left:22px;bottom:18px}
.sg-body{padding:20px 24px 24px}
.sg-q{font-size:21px}
.sg-go{flex:none;min-width:200px}
.sg-cells{gap:16px}}
@media (prefers-reduced-motion:reduce){.sg-aurora i{animation:none}}
.sg-chars .sg-ch{transition:translate .35s cubic-bezier(.2,.8,.3,1),rotate .35s cubic-bezier(.2,.8,.3,1)}
.sg-ch.sg-gl .sg-ex.sg-left,.sg-ch.sg-gr .sg-ex.sg-right{animation:none;opacity:1;z-index:7}
.sg-art::after{background:radial-gradient(70% 90% at var(--mx,72%) var(--my,30%),rgba(255,255,255,var(--art-glow)),transparent 62%)}
.sg-bub{position:absolute;top:-72px;z-index:9;max-width:210px;padding:8px 14px;border-radius:16px;background:#fff;color:#2a1a16;font-size:15px;font-weight:700;line-height:1.35;box-shadow:0 10px 24px rgba(40,10,0,.28);pointer-events:none;opacity:0;transform:translateY(8px) scale(.85);transform-origin:var(--tx,50%) 100%;transition:opacity .2s,transform .28s cubic-bezier(.3,1.5,.5,1);white-space:nowrap}
.sg-bub::after{content:"";position:absolute;left:var(--tx,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:#fff;transform:rotate(45deg);border-radius:0 0 4px 0}
.sg-bub.sg-on{opacity:1;transform:none}
.sg-go:not(.sg-alt){position:relative;overflow:visible}
.sg-go:not(.sg-alt)::after{content:"";position:absolute;inset:-2px;border-radius:17px;border:2px solid rgba(255,106,77,.65);opacity:0;pointer-events:none;animation:sg-goPing 3.6s ease-out 1.6s infinite}
@keyframes sg-goPing{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.09,1.28)}}
.sg-go:active{transform:scale(.97)}
.sg-cell{transition:transform .2s ease,box-shadow .2s ease}
.sg-cell:hover{transform:translateY(-3px)}
.sg-js .sg-card.sg-rv.sg-in:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.sg-go:not(.sg-alt)::after{animation:none}
.sg-js .sg-rv{opacity:1;transform:none;transition:none}
.sg-bub{transition:none}
.sg-chars .sg-ch{transition:none}}
/* ---- 动效 ---- */
@keyframes sg-dropC{0%{opacity:0;transform:translateY(-95%) rotate(-26deg)}45%{opacity:1;transform:translateY(0) rotate(-7deg) scale(1.07,.88)}62%{transform:translateY(-15%) rotate(6deg) scale(.97,1.05)}80%{transform:translateY(0) rotate(-2deg) scale(1.03,.97)}100%{opacity:1;transform:none}}
@keyframes sg-hopE{0%{opacity:0;transform:translateY(80%) scale(.45,.45)}48%{opacity:1;transform:translateY(-24%) scale(.94,1.1) rotate(9deg)}68%{transform:translateY(0) scale(1.09,.87)}84%{transform:translateY(-5%) scale(.98,1.03) rotate(-2deg)}100%{opacity:1;transform:none}}
@keyframes sg-rollO{0%{opacity:0;transform:translateY(-105%) rotate(170deg)}45%{opacity:1;transform:translateY(0) rotate(-15deg) scale(1.08,.87)}62%{transform:translateY(-19%) rotate(8deg) scale(.97,1.05)}80%{transform:translateY(0) rotate(-3deg) scale(1.03,.96)}100%{opacity:1;transform:none}}
@keyframes sg-stamp{0%{opacity:0;transform:scale(2.2) rotate(-14deg) translateY(-14%)}52%{opacity:1;transform:scale(.86) rotate(3deg)}68%{transform:scale(1.09) rotate(-2deg)}84%{transform:scale(.97)}100%{opacity:1;transform:none}}
@keyframes sg-shock{0%,100%{transform:none}30%{transform:translateY(5%) scale(1.03,.96)}60%{transform:translateY(-2%)}}
@keyframes sg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sg-idleC{0%{transform:none}4%{transform:translateY(-14%) rotate(-11deg)}8%{transform:translateY(0) rotate(5deg) scale(1.05,.93)}11%{transform:rotate(-2deg)}14%,100%{transform:none}}
@keyframes sg-idleE{0%{transform:none}5%{transform:translateY(-24%) scale(.95,1.09)}9%{transform:translateY(0) scale(1.09,.89)}12%{transform:scale(.99,1.02)}14%,100%{transform:none}}
@keyframes sg-idleO{0%{transform:none}5%{transform:translateY(-13%) rotate(45deg)}10%{transform:translateY(0) rotate(-13deg) scale(1.05,.94)}13%{transform:rotate(3deg)}14%,100%{transform:none}}
@keyframes sg-idlePai{0%{transform:none}5%{transform:scale(1.2) rotate(-7deg)}10%{transform:scale(.95) rotate(2deg)}14%,100%{transform:none}}
.sg-anim .sg-p-ni,.sg-anim .sg-p-lai,.sg-anim .sg-p-ban{animation:sg-shock .35s ease-out .5s both}
.sg-anim .sg-p-pai{animation-name:sg-stamp,sg-idlePai;animation-duration:.8s,var(--p);animation-delay:.1s,5.6s;animation-iteration-count:1,infinite;animation-timing-function:cubic-bezier(.3,.7,.4,1),linear;animation-fill-mode:both,none}
.sg-anim .sg-p-c{animation-name:sg-dropC,sg-idleC;animation-duration:.95s,var(--p);animation-delay:.75s,3.4s;animation-iteration-count:1,infinite;animation-timing-function:ease-out,linear;animation-fill-mode:both,none}
.sg-anim .sg-p-e{animation-name:sg-hopE,sg-idleE;animation-duration:.95s,var(--p);animation-delay:.9s,3.55s;animation-iteration-count:1,infinite;animation-timing-function:ease-out,linear;animation-fill-mode:both,none}
.sg-anim .sg-p-o{animation-name:sg-rollO,sg-idleO;animation-duration:.95s,var(--p);animation-delay:1.05s,3.7s;animation-iteration-count:1,infinite;animation-timing-function:ease-out,linear;animation-fill-mode:both,none}
.sg-anim .sg-rise{animation:sg-rise .5s ease-out .35s both}
@media (prefers-reduced-motion:reduce){.sg-anim *{animation:none!important}}
/* ---- 浅/深色差异（用变量）+ 新增元素 ---- */
.sg{overflow-x:clip}
.sg-hero h1{font-weight:900}
.sg-card,.sg-puzzle{background:var(--card-bg);-webkit-backdrop-filter:var(--bf);backdrop-filter:var(--bf)}
.sg-puzzle{box-shadow:var(--sec-shadow)}
.sg-tag{background:var(--tag-bg);border-color:var(--tag-bd)}
.sg-tag.sg-rec{background:linear-gradient(145deg,#cc3f26,#bf3b24);border-color:transparent} /* 对比度修订：白字 12px 需 ≥4.5:1，原渐变仅约 2.9–3.6 */
.sg-eyebrow b{background:var(--eb-bg);border-color:var(--eb-bd)}
.sg-go.sg-alt{background:var(--alt-bg);border-color:var(--alt-bd)}
.sg-go.sg-alt:hover{background:var(--alt-bg-h)}
.sg-cell{border-color:var(--cell-bd)}
.sg-path u{background:var(--path-u)}
.sg-path i:not(.sg-on){border-color:var(--path-i-bd);background:var(--path-i-bg)}
.sg-path i.sg-open{border-color:var(--red1)}
.sg-name{margin:0}
.sg-hd h2{margin:0;font-size:17px}
.sg-go,.sg-go2,.sg-see{display:inline-flex;align-items:center;justify-content:center}
.sg-go{text-decoration:none}
.sg-see{min-height:44px}
.sg-next{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.sg-next-t{display:flex;flex-direction:column;min-width:0}
.sg-next-t b{font-size:15px}
.sg-next-t em{font-style:normal;font-size:13px;color:var(--sub)}
.sg-go2{flex:none;font-weight:800;font-size:15px;border-radius:12px;padding:0 16px;min-height:44px;color:var(--alt);border:1.5px solid var(--alt-bd);background:var(--alt-bg);transition:background .15s,transform .15s}
.sg-go2:hover{background:var(--alt-bg-h)}
.sg-go2:active{transform:scale(.97)}
.sg-bookwrap{margin-top:18px}
.sg-bookwrap>.section{margin-top:0}
.sg a:focus-visible{outline:3px solid var(--see);outline-offset:3px;border-radius:12px}
.sg-rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.sg-rv.sg-in{opacity:1;transform:none;transition:opacity .6s ease,transform .25s ease,box-shadow .25s ease}
.sg-card.sg-rv.sg-in:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.sg-rv{opacity:1;transform:none;transition:none}.sg-lg *,.sg-assembly *{animation:none!important}}
@media (min-width:900px){.sg-next{margin-top:16px}}
.logo-only .sg-lg{position:absolute;left:0;top:50%;width:100%;aspect-ratio:2134/724;translate:0 -50%;display:block;pointer-events:none}
.logo-only .sg-lg .sg-pc{pointer-events:auto}
.logo-only .sg-lg .sg-pc img{display:block;width:100%;height:100%;max-width:100%;flex-shrink:1;filter:none}
.sg-body{display:flex;flex-direction:column}
.sg-body>.sg-next{margin-top:auto}
.sg-act{margin-bottom:14px}
.sg-soon{border-top-style:dashed}
.sg-body>.sg-act+.sg-next{margin-top:auto}
@media (max-width:359px){.sg h1{font-size:44px}.sg-name{font-size:23px}.sg-q{font-size:17px}}


/* WebKit clips negative-overflow character layers at the rounded art top.
   Give the characters real room above the art instead of a negative clip inset. */
.sg-art{overflow:visible}
.sg-chars{top:-120px;overflow:hidden;clip-path:none;-webkit-clip-path:none;isolation:isolate}
/* At 320px the old min-content grid grew past the viewport and cut off ears.
   Keep the existing 360px+ composition, only fit the very narrow phone card. */
@media(max-width:359px){
  .sg-levels{grid-template-columns:minmax(0,1fr)}
  .sg-card{min-width:0}
  .sg-path em{white-space:normal;min-width:0}
  .sg-tea .sg-chars .sg-b,.sg-fac .sg-chars .sg-b{left:43%;width:230px;height:230px}
}
/* v8: approved latest eye frames + gentle independent head movement.
   Same portrait bytes/URLs are reused; no new images or first-screen requests. */
.sg-head-frame{position:absolute;display:block;perspective:500px;pointer-events:none}
.sg-head-left,.sg-head-right,.sg-head-canvas{position:absolute;display:block;inset:0;width:100%;height:100%;transform-origin:50% 100%;pointer-events:none}
.sg-head-canvas{overflow:hidden}
.sg-head-canvas .sg-head-portrait{position:absolute;max-width:none;height:auto;pointer-events:none;user-select:none}
.sg-head-left{animation:sg-headLeft var(--lp,9s) ease-in-out var(--ld,2s) infinite;transition:transform .24s ease}
.sg-head-right{animation:sg-headRight var(--rp,11s) ease-in-out var(--rd,6s) infinite;transition:transform .24s ease}
@keyframes sg-headLeft{0%,100%{transform:none}5%,15%{transform:rotateY(-9deg) rotate(-.8deg)}20%{transform:none}}
@keyframes sg-headRight{0%,100%{transform:none}5%,15%{transform:rotateY(9deg) rotate(.8deg)}20%{transform:none}}
.sg-ch.sg-gl .sg-head-left,.sg-ch.sg-gr .sg-head-left,.sg-ch.sg-gl .sg-head-right,.sg-ch.sg-gr .sg-head-right{animation:none}
.sg-ch.sg-gl .sg-head-left{transform:rotateY(-9deg) rotate(-.8deg)}
.sg-ch.sg-gr .sg-head-left{transform:rotateY(9deg) rotate(.8deg)}
.sg-ch.sg-gl .sg-head-right,.sg-ch.sg-gr .sg-head-right{transform:none}
@media(prefers-reduced-motion:reduce){.sg-head-left,.sg-head-right{animation:none!important;transform:none!important;transition:none!important}}

/* V17.9 self-review: backdrop/light behind people.
   Original RGBA artwork is unchanged; 253/255 body alpha becomes opaque at
   composition time. Zero alpha stays zero; antialiased edges remain soft. */
.sg-composite-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sg-art{isolation:isolate}
.sg-art::before{z-index:0}
.sg-art::after{z-index:1}
.sg-chars{z-index:2}
.sg-name{z-index:3}
.sg-chars :is(.sg-body-portrait,.sg-head-portrait){filter:url(#sg-solid-portrait)}
/* Draw attention briefly at entry, then let the actual task remain still. */
.sg-go:not(.sg-alt)::after{animation-iteration-count:2;animation-fill-mode:forwards}