/* 20260924_mytg_v4_5 — 我的推广 v4：石墨黑灰 · 香槟金 · 暖白文字（参照下载页主体，明暗主题统一深色）· 黑卡邀请函 · 首屏标题排版同下载页。仅作用于 .mytg-v4，公共头部不受影响。 */

@font-face{font-family:"MytgSerif";src:url("../font/mytg-v4/mytg-serif-sc.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"MytgCinzel";src:url("../font/mytg-v4/mytg-cinzel.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"MytgNum";src:url("../font/mytg-v4/mytg-num.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

html.mytg-scrollbar-stable-root{scrollbar-gutter:stable}
html body.mytg-page-active{background:#0b0b0a!important;min-height:100vh}
html[data-theme="light"] body.mytg-page-active{background:#f7f3ec!important}

/* ---------------- tokens ---------------- */
html .mytg-page.mytg-v4{
  --serif:"MytgSerif","Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei",system-ui,sans-serif;
  --cap:"MytgCinzel","Cinzel","Trajan Pro",serif;
  --num:"MytgNum","Cormorant Garamond","Cormorant",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --bg:#0b0b0a;
  --ink:#f6f1e7;
  --ink-2:#cfc7b8;
  --ink-3:#958c7e;
  --ink-4:#615a50;
  --hair:rgba(246,241,231,.08);
  --hair-2:rgba(246,241,231,.15);
  --gold:#e4c78f;
  --gold-2:#c9a261;
  --gold-line:rgba(228,199,143,.28);
  --gold-soft:rgba(228,199,143,.08);
  --gold-grad:linear-gradient(135deg,#f8e9c6 0%,#e3c487 42%,#b88d4c 100%);
  --gold-text:linear-gradient(180deg,#fbf0d4 0%,#ead09a 48%,#c49a57 100%);
  --btn-ink:#21180a;
  --dot-bg:#131210;

  position:relative;isolation:isolate;display:block;box-sizing:border-box;overflow:hidden;
  padding:0 0 40px!important;color:var(--ink);background:var(--bg);
  font-family:var(--sans);font-size:15px;line-height:1.7;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
html[data-theme="light"] .mytg-page.mytg-v4{
  --bg:#f7f3ec;
  --ink:#1f1a12;
  --ink-2:#4b4234;
  --ink-3:#877c6a;
  --ink-4:#b4aa98;
  --hair:rgba(31,26,18,.09);
  --hair-2:rgba(31,26,18,.16);
  --gold:#a57b32;
  --gold-2:#8c6524;
  --gold-line:rgba(165,123,50,.32);
  --gold-soft:rgba(165,123,50,.08);
  --gold-text:linear-gradient(180deg,#c99c4c 0%,#a57b32 50%,#7d5719 100%);
  --dot-bg:#fffdf8;
}
.mytg-v4::before{content:"";position:absolute;inset:0 0 auto 0;height:900px;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 600px at 78% 30%,rgba(196,150,74,.13),transparent 65%),radial-gradient(700px 500px at 0% 0%,rgba(196,150,74,.05),transparent 60%)}
html[data-theme="light"] .mytg-v4::before{background:radial-gradient(900px 600px at 78% 30%,rgba(214,176,108,.28),transparent 65%)}
.mytg-v4 *,.mytg-v4 *::before,.mytg-v4 *::after{box-sizing:border-box}
html .mytg-v4 .mytg-shell{width:calc(100% - 96px);max-width:1280px;margin:0 auto}
.mytg-v4 :where(h1,h2,h3,p,ul,ol,dl,dd){margin:0;padding:0}
.mytg-v4 :where(ul,ol){list-style:none}
.mytg-v4 a{color:inherit;text-decoration:none}
.mytg-v4 button,.mytg-v4 input{font:inherit}
.mytg-v4 svg{display:block;flex:none}
.mytg-v4 .mx-title,.mytg-v4 .mx-h2,.mytg-v4 h3,.mytg-v4 .mx-top h1,.mytg-v4 .mx-node-text b,.mytg-v4 .mx-card-brand b{font-family:var(--serif);font-feature-settings:"palt" 1,"kern" 1}
.mytg-v4 .mx-figure strong,.mytg-v4 .mx-journey-count,.mytg-v4 .mx-cta-note b,.mytg-v4 .mx-hint b,.mytg-v4 .mx-node-dot em,.mytg-v4 .mx-step-no,.mytg-v4 .mx-rules-list span{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* ---------------- 顶栏 ---------------- */
.mx-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:34px 0 26px;border-bottom:1px solid var(--hair)}
.mx-top-title{display:flex;align-items:center;gap:18px;min-width:0}
.mytg-v4 .mx-top h1{font-size:22px;font-weight:700;letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.mx-top-title i{width:1px;height:16px;background:var(--hair-2)}
.mx-top-title p{font-size:14px;letter-spacing:.08em;color:var(--ink-3)}
.mx-link{display:inline-flex;align-items:center;gap:6px;font-size:14px;letter-spacing:.12em;color:var(--ink-2)!important;padding:6px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap}
.mx-link svg{width:16px;height:16px;color:var(--gold)}
.mx-link:hover{color:var(--ink)!important;border-bottom-color:var(--gold-line)}

/* ---------------- 首屏 ---------------- */
.mx-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(400px,.8fr);gap:48px;align-items:center;padding:76px 0 96px}
.mx-eyebrow{display:flex;align-items:center;gap:16px}
.mx-eyebrow b{font-family:var(--cap);font-size:12px;font-weight:600;letter-spacing:.44em;color:var(--gold)}
.mx-eyebrow em{position:relative;padding-left:17px;font-style:normal;font-size:13px;letter-spacing:.22em;color:var(--ink-3)}
.mx-eyebrow em::before{content:"";position:absolute;left:0;top:50%;width:1px;height:12px;margin-top:-6px;background:var(--hair-2)}
.mytg-v4 .mx-title{margin:30px 0 26px;font-size:clamp(44px,4.6vw,70px);font-weight:800;line-height:1.16;letter-spacing:.02em;color:var(--ink)}
.mx-title span{display:block}
@media (min-width:1181px){.mx-title span{white-space:nowrap}}
.mx-title em{font-style:normal;font-weight:900;background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mx-lead{font-size:18px;line-height:1.8;letter-spacing:.08em;color:var(--ink-2)}
.mx-perks{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:26px}
.mx-perks li{display:inline-flex;align-items:center;gap:8px;font-size:15px;letter-spacing:.06em;color:var(--ink-2)}
.mx-perks svg{width:15px;height:15px;color:var(--gold)}
.mx-cta{display:flex;align-items:center;flex-wrap:wrap;gap:26px;margin-top:44px}
.mx-cta-note{font-size:14px;letter-spacing:.08em;color:var(--ink-3)}
.mx-cta-note b{font-size:28px;font-weight:600;color:var(--gold);margin:0 3px;vertical-align:-3px;letter-spacing:0}

.mx-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:58px;padding:0 36px;border:0;border-radius:999px;cursor:pointer;overflow:hidden;
  font-size:16px;font-weight:600;letter-spacing:.16em;transition:transform .25s,box-shadow .25s}
.mx-btn svg{width:19px;height:19px;transition:transform .25s}
.mx-btn-gold{color:var(--btn-ink)!important;background:var(--gold-grad);box-shadow:0 18px 40px -18px rgba(228,190,120,.75),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(120,80,20,.25)}
.mx-btn-gold::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .8s ease}
.mx-btn-gold:hover{transform:translateY(-2px);box-shadow:0 24px 48px -18px rgba(228,190,120,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.mx-btn-gold:hover::after{left:135%}
.mx-btn-gold:hover svg{transform:translateX(3px)}
.mx-btn-block{display:flex;width:100%;height:52px;font-size:15px;letter-spacing:.14em}

.mx-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:60px;padding-top:30px;border-top:1px solid var(--hair)}
.mx-figure+.mx-figure{padding-left:34px;border-left:1px solid var(--hair)}
.mx-figure dt{font-size:13px;letter-spacing:.16em;color:var(--ink-3)}
.mx-figure dd{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.mx-figure strong{font-size:62px;font-weight:500;line-height:.9;letter-spacing:0;color:var(--ink)}
.mx-figure small{font-size:13px;letter-spacing:.08em;color:var(--ink-3)}
.mytg-v4.is-member .mx-figure:first-child strong{background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ---- 邀请函卡片 ---- */
.mx-hero-card{position:relative;display:grid;place-items:center;min-height:640px;scroll-margin-top:90px}
.mx-halo{position:absolute;left:50%;top:50%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(214,168,90,.26),rgba(214,168,90,.06) 45%,transparent 68%)}
.mx-rings{position:absolute;left:50%;top:50%;width:640px;height:640px;margin:-320px 0 0 -320px;color:var(--gold);pointer-events:none;animation:mxSpin 140s linear infinite}
@keyframes mxSpin{to{transform:rotate(360deg)}}
.mx-card-back{position:absolute;left:50%;top:50%;width:392px;height:560px;margin:-280px 0 0 -196px;border-radius:30px;
  background:linear-gradient(160deg,#1a1814,#0d0c0a);border:1px solid rgba(228,199,143,.14);transform:rotate(7deg) translate(34px,8px);opacity:.75;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.mx-card{position:relative;z-index:1;width:392px;padding:28px 28px 22px;border-radius:30px;color:#f6f1e7;overflow:hidden;
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(228,199,143,.20),transparent 52%),
    repeating-radial-gradient(circle at 0% 100%,rgba(228,199,143,.045) 0 1px,transparent 1px 8px),
    linear-gradient(160deg,#211e19 0%,#11100d 55%,#191510 100%);
  box-shadow:0 60px 110px -44px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,210,.10);
  transform:perspective(1600px) rotateY(-8deg) rotateX(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.mx-card:hover{transform:perspective(1600px) rotateY(0) rotateX(0)}
.mx-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(248,233,198,.75),rgba(228,199,143,.12) 30%,rgba(228,199,143,.05) 60%,rgba(248,233,198,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.mx-card-sheen{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,236,196,.10) 50%,transparent 58%);animation:mxSheen 7s ease-in-out infinite}
@keyframes mxSheen{0%,55%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.mx-card-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between}
.mx-card-brand{display:flex;flex-direction:column;gap:4px}
.mx-card-brand b{font-size:19px;font-weight:700;letter-spacing:.16em;background:linear-gradient(180deg,#fbf0d4,#d9b474);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mx-card-brand small{font-family:var(--cap);font-size:10.5px;font-weight:600;letter-spacing:.52em;color:rgba(228,199,143,.7)}
.mx-card-chip{position:relative;width:42px;height:32px;border-radius:7px;background:linear-gradient(135deg,#f3dfae,#c39a55 55%,#e8cf98);box-shadow:inset 0 0 0 1px rgba(90,60,20,.35)}
.mx-card-chip::before,.mx-card-chip::after{content:"";position:absolute;background:rgba(90,60,20,.35)}
.mx-card-chip::before{left:0;right:0;top:50%;height:1px}
.mx-card-chip::after{top:0;bottom:0;left:50%;width:1px}
.mx-card-chip i{position:absolute;left:30%;right:30%;top:26%;bottom:26%;border:1px solid rgba(90,60,20,.35);border-radius:4px}
.mx-card-sub{position:relative;margin:12px 0 22px;font-size:13px;letter-spacing:.1em;color:rgba(246,241,231,.55)}

.mx-code{position:relative;display:flex;flex-direction:column;align-items:center}
.mx-qr{position:relative;display:grid;place-items:center;width:236px;height:236px}
.mx-qr img.mytg-qr-img{display:block;width:100%;height:100%;object-fit:contain;padding:12px;border-radius:18px;background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.8);transition:filter .35s}
.mx-qr.is-blurred img.mytg-qr-img{filter:blur(10px) saturate(.5)}
.mx-qr-corners i{position:absolute;width:22px;height:22px;border:2px solid #e4c78f;pointer-events:none}
.mx-qr-corners i:nth-child(1){left:-10px;top:-10px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.mx-qr-corners i:nth-child(2){right:-10px;top:-10px;border-left:0;border-bottom:0;border-top-right-radius:10px}
.mx-qr-corners i:nth-child(3){left:-10px;bottom:-10px;border-right:0;border-top:0;border-bottom-left-radius:10px}
.mx-qr-corners i:nth-child(4){right:-10px;bottom:-10px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.mx-qr-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;height:100%;border-radius:18px;text-align:center;
  font-size:13.5px;line-height:1.8;letter-spacing:.14em;color:rgba(246,241,231,.6);background:rgba(255,255,255,.03);border:1px dashed rgba(228,199,143,.25)}
.mx-qr-lock svg{width:30px;height:30px;color:#e4c78f}

.mx-card-meta{display:flex;align-items:flex-end;justify-content:space-between;width:100%;margin-top:24px}
.mx-code-id{display:flex;flex-direction:column;gap:2px}
.mx-code-id small{font-size:11px;letter-spacing:.24em;color:rgba(246,241,231,.45)}
.mx-code-id b{font-family:var(--cap);font-size:20px;font-weight:600;letter-spacing:.2em;color:#e9cf9b}
.mx-switch{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;color:rgba(246,241,231,.5);cursor:pointer;user-select:none}
.mx-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.mx-switch-track{position:relative;width:30px;height:18px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(228,199,143,.22);transition:background .2s}
.mx-switch-track i{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:rgba(246,241,231,.5);transition:transform .2s,background .2s}
.mx-switch input:checked+.mx-switch-track{background:rgba(228,199,143,.3)}
.mx-switch input:checked+.mx-switch-track i{transform:translateX(12px);background:#f3dfae}
.mx-switch input:focus-visible+.mx-switch-track{outline:2px solid #e4c78f;outline-offset:2px}

.mx-aff{width:100%;margin-top:16px}
.mx-aff-row{display:flex;align-items:center;gap:8px;height:46px;padding:4px 4px 4px 14px;border-radius:12px;background:rgba(0,0,0,.35);border:1px solid rgba(228,199,143,.16)}
.mx-aff-input{flex:1;min-width:0;height:100%;padding:0!important;border:0!important;outline:0;background:transparent!important;box-shadow:none!important;
  color:rgba(246,241,231,.78)!important;font-family:var(--mono)!important;font-size:12.5px!important;letter-spacing:.02em}
.mx-aff-copy{flex:none;height:100%;padding:0 14px;border-radius:9px;border:0;background:rgba(228,199,143,.12);color:#f0d9a6;font-size:13px;font-weight:600;letter-spacing:.08em;cursor:pointer;transition:background .2s,color .2s}
.mx-aff-copy:hover{background:#e4c78f;color:#21180a}
.mx-aff-tip{min-height:18px;margin-top:7px;font-size:11.5px;letter-spacing:.04em;color:rgba(246,241,231,.38);text-align:left;transition:color .2s}
.mx-aff-tip.is-ok{color:#9ad7a8}
.mx-code .mx-btn-block{margin-top:14px}
.is-guest .mx-code .mx-btn-block{margin-top:26px}
.mx-card-note{position:relative;margin-top:14px;font-size:11.5px;letter-spacing:.1em;color:rgba(246,241,231,.38);text-align:center}

/* ---------------- 通用区块 ---------------- */
.mx-block{padding:80px 0;border-top:1px solid var(--hair)}
.mx-label{display:block;margin-bottom:14px;font-family:var(--cap);font-size:12px;font-weight:600;letter-spacing:.44em;color:var(--gold)}
.mytg-v4 .mx-h2{display:block;font-size:34px;font-weight:700;line-height:1.3;letter-spacing:.08em;color:var(--ink)}

/* ---- 里程碑 ---- */
.mx-journey{display:grid;grid-template-columns:360px minmax(0,1fr);gap:72px;align-items:center}
.mx-journey-count{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:30px}
.mx-journey-count strong{font-size:128px;font-weight:500;line-height:.82;letter-spacing:-.02em;background:var(--gold-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mx-journey-count span{font-size:44px;font-weight:400;color:var(--ink-4)}
.mx-journey-count small{flex-basis:100%;margin-top:14px;font-family:var(--sans);font-size:13px;letter-spacing:.2em;color:var(--ink-3)}
.mx-hint{margin-top:20px;padding-top:20px;border-top:1px solid var(--hair);font-size:15px;line-height:1.85;letter-spacing:.06em;color:var(--ink-2)}
.mx-hint b{font-size:26px;font-weight:600;color:var(--gold);margin:0 2px;vertical-align:-3px}
.mytg-v4.is-done .mx-hint{color:var(--gold)}

.mx-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mx-track-line{position:absolute;left:12.5%;right:12.5%;top:40px;height:2px;margin-top:-1px;border-radius:2px;background:var(--hair-2)}
.mx-track-line>span{display:block;height:100%;border-radius:inherit;background:var(--gold-grad);box-shadow:0 0 14px rgba(228,190,120,.6);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.mx-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.mx-node-dot{display:grid;place-items:center;width:64px;height:64px;margin-top:8px;border-radius:50%;background:var(--dot-bg);border:1px solid var(--hair-2);color:var(--ink-4);transition:all .3s}
.mx-node-dot em{font-style:normal;font-size:26px;font-weight:600;line-height:1}
.mx-node-dot svg{width:26px;height:26px}
.mx-node.is-on .mx-node-dot{border-color:transparent;background:var(--gold-grad);color:var(--btn-ink);box-shadow:0 0 0 6px var(--gold-soft),0 12px 30px -10px rgba(228,190,120,.7)}
.mx-node.is-next .mx-node-dot{border:1px dashed var(--gold);color:var(--gold);animation:mxPulse 2.4s ease-out infinite}
@keyframes mxPulse{0%{box-shadow:0 0 0 0 rgba(228,199,143,.35)}70%,100%{box-shadow:0 0 0 14px rgba(228,199,143,0)}}
.mx-node.is-goal .mx-node-dot{width:80px;height:80px;margin-top:0;border:1px solid var(--gold-line);color:var(--gold);background:radial-gradient(circle at 30% 25%,rgba(228,199,143,.18),transparent 60%),var(--dot-bg)}
.mx-node.is-goal .mx-node-dot svg{width:32px;height:32px}
.mx-node.is-goal.is-on .mx-node-dot{border-color:transparent;background:var(--gold-grad);color:var(--btn-ink);box-shadow:0 0 0 8px var(--gold-soft),0 0 50px rgba(228,190,120,.55)}
.mx-node-text{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.mytg-v4 .mx-node-text b{font-size:17px;font-weight:700;letter-spacing:.08em;color:var(--ink-2)}
.mx-node-text small{font-size:13px;letter-spacing:.08em;color:var(--ink-4)}
.mx-node.is-on .mx-node-text b,.mx-node.is-next .mx-node-text b{color:var(--ink)}
.mx-node.is-on .mx-node-text small,.mx-node.is-next .mx-node-text small,.mx-node.is-goal .mx-node-text small{color:var(--gold)}

.mx-reward{display:flex;align-items:center;gap:22px;margin-top:48px;padding:24px 28px;border-radius:22px;border:1px solid var(--gold-line);
  background:linear-gradient(100deg,rgba(228,199,143,.11),rgba(228,199,143,.02) 65%)}
.mx-reward-ico{display:grid;place-items:center;width:58px;height:58px;border-radius:17px;color:var(--btn-ink);background:var(--gold-grad);box-shadow:0 14px 30px -12px rgba(228,190,120,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.mx-reward-ico svg{width:28px;height:28px}
.mx-reward>div{flex:1;min-width:0}
.mx-reward small{font-size:12px;letter-spacing:.24em;color:var(--gold)}
.mytg-v4 .mx-reward h3{margin-top:2px;font-size:22px;font-weight:700;letter-spacing:.06em;color:var(--ink)}
.mx-reward p{margin-top:4px;font-size:14px;letter-spacing:.06em;color:var(--ink-3)}
.mx-reward-state{flex:none;padding:7px 18px;border-radius:99px;border:1px solid var(--gold-line);font-size:13px;letter-spacing:.14em;color:var(--gold)}
.mytg-v4.is-done .mx-reward-state{border-color:transparent;background:var(--gold-grad);color:var(--btn-ink);font-weight:600}

/* ---- 三步 ---- */
.mx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:48px}
.mx-steps li{display:flex;flex-direction:column;padding:6px 40px 6px 0}
.mx-steps li+li{padding-left:40px;border-left:1px solid var(--hair)}
.mx-step-no{font-size:84px;font-weight:300;line-height:.9;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px var(--gold);opacity:.9}
.mytg-v4 .mx-steps h3{margin-top:22px;font-size:23px;font-weight:700;letter-spacing:.1em;color:var(--ink)}
.mx-steps p{margin-top:8px;font-size:15px;letter-spacing:.08em;color:var(--ink-3)}

/* ---- 规则 ---- */
.mx-rules{scroll-margin-top:90px}
.mx-rules summary{position:relative;display:block;padding-right:60px;cursor:pointer;list-style:none;user-select:none}
.mx-rules summary::-webkit-details-marker{display:none}
.mx-rules summary i{position:absolute;right:6px;bottom:12px;width:12px;height:12px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .3s}
.mx-rules[open] summary i{transform:rotate(225deg) translate(-4px,-4px)}
.mx-rules summary:hover i{border-color:var(--gold)}
.mx-rules-list{display:grid;gap:0;margin-top:34px;max-width:960px}
.mx-rules-list li{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:baseline;padding:18px 0;border-top:1px solid var(--hair)}
.mx-rules-list li:last-child{border-bottom:1px solid var(--hair)}
.mx-rules-list span{font-size:22px;font-weight:600;color:var(--gold)}
.mx-rules-list p{font-size:15px;line-height:1.9;letter-spacing:.06em;color:var(--ink-2)}

.mytg-v4 a:focus-visible,.mytg-v4 button:focus-visible,.mytg-v4 summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}

/* ---------------- 响应式 ---------------- */
@media (max-width:1180px){
  .mx-hero{grid-template-columns:minmax(0,1fr) 400px;gap:36px}
  .mx-journey{grid-template-columns:1fr;gap:44px}
  .mx-figure strong{font-size:52px}
}
@media (max-width:900px){
  html .mytg-v4 .mytg-shell{width:calc(100% - 48px)}
  .mx-hero{grid-template-columns:1fr;gap:20px;padding:52px 0 64px}
  .mx-hero-card{min-height:600px}
}
@media (max-width:640px){
  html .mytg-v4 .mytg-shell{width:calc(100% - 32px)}
  .mx-top{flex-wrap:wrap;align-items:flex-start;padding:22px 0 18px;gap:8px 16px}
  .mx-top-title{flex-direction:column;align-items:flex-start;gap:4px}
  .mx-top-title i{display:none}
  .mytg-v4 .mx-top h1{font-size:20px}
  .mx-top-title p{font-size:13px;letter-spacing:.04em}
  .mx-link{font-size:13px;margin-top:2px}
  .mx-hero{padding:36px 0 48px;gap:8px}
  .mx-eyebrow{gap:12px}
  .mx-eyebrow b{font-size:10.5px;letter-spacing:.36em}
  .mx-eyebrow em{font-size:12px;letter-spacing:.14em;padding-left:13px}
  .mytg-v4 .mx-title{margin:22px 0 16px;font-size:clamp(32px,9.4vw,40px);line-height:1.2;letter-spacing:.01em}
  .mx-lead{font-size:15.5px;letter-spacing:.04em}
  .mx-perks{gap:8px 18px;margin-top:18px}
  .mx-perks li{font-size:14px}
  .mx-cta{flex-direction:column;align-items:stretch;gap:14px;margin-top:30px}
  .mx-cta .mx-btn{width:100%;height:54px}
  .mx-cta-note{text-align:center}
  .mx-figures{margin-top:36px;padding-top:22px}
  .mx-figure+.mx-figure{padding-left:14px}
  .mx-figure dt{font-size:11.5px;letter-spacing:.06em}
  .mx-figure dd{flex-direction:column;align-items:flex-start;gap:4px;margin-top:8px}
  .mx-figure strong{font-size:42px}
  .mx-figure small{font-size:11.5px;letter-spacing:.02em}
  .mx-hero-card{min-height:0;padding:36px 0 10px}
  .mx-halo{width:420px;height:420px;margin:-210px 0 0 -210px}
  .mx-rings{width:440px;height:440px;margin:-220px 0 0 -220px}
  .mx-card-back{display:none}
  .mx-card{width:100%;max-width:380px;padding:24px 20px 18px;transform:none!important}
  .mx-qr{width:220px;height:220px}
  .mx-block{padding:52px 0}
  .mytg-v4 .mx-h2{font-size:25px;letter-spacing:.05em}
  .mx-label{font-size:10.5px;letter-spacing:.36em;margin-bottom:10px}
  .mx-journey{gap:34px}
  .mx-journey-count{margin-top:20px}
  .mx-journey-count strong{font-size:96px}
  .mx-journey-count span{font-size:34px}
  .mx-track-line{top:32px}
  .mx-node-dot{width:48px;height:48px;margin-top:8px}
  .mx-node-dot em{font-size:20px}
  .mx-node-dot svg{width:20px;height:20px}
  .mx-node.is-goal .mx-node-dot{width:64px;height:64px;margin-top:0}
  .mx-node.is-goal .mx-node-dot svg{width:26px;height:26px}
  .mx-node-text{margin-top:12px}
  .mytg-v4 .mx-node-text b{font-size:13.5px;letter-spacing:.02em}
  .mx-node-text small{font-size:11px;letter-spacing:0}
  .mx-reward{flex-wrap:wrap;gap:14px 16px;margin-top:34px;padding:20px}
  .mx-reward-ico{width:48px;height:48px;border-radius:14px}
  .mx-reward>div{flex-basis:calc(100% - 64px)}
  .mytg-v4 .mx-reward h3{font-size:17.5px;letter-spacing:.03em}
  .mx-reward p{font-size:13px}
  .mx-reward-state{margin-left:64px}
  .mx-steps{grid-template-columns:1fr;margin-top:26px}
  .mx-steps li,.mx-steps li+li{flex-direction:row;align-items:center;gap:22px;padding:20px 0;border-left:0;border-top:1px solid var(--hair)}
  .mx-steps li:last-child{border-bottom:1px solid var(--hair)}
  .mx-step-no{font-size:58px;width:74px}
  .mytg-v4 .mx-steps h3{margin-top:0;font-size:19px}
  .mx-steps p{margin-top:2px;font-size:14px}
  .mx-rules-list{margin-top:24px}
  .mx-rules-list li{grid-template-columns:40px minmax(0,1fr);padding:14px 0}
  .mx-rules-list span{font-size:19px}
  .mx-rules-list p{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .mytg-v4 *,.mytg-v4 *::before,.mytg-v4 *::after{animation:none!important;transition:none!important}
}
.mx-hint b{line-height:1}
.mx-node.is-goal .mx-node-dot{margin-bottom:-8px}
.mx-rules-list{max-width:none}
@media (max-width:640px){.mx-node.is-goal .mx-node-dot{margin-bottom:-8px}}
@media (max-width:640px){
  .mytg-v4 .mx-title{font-size:clamp(27px,8.3vw,38px);letter-spacing:0}
  .mytg-v4 .mx-reward h3{font-size:16px;letter-spacing:.01em}
}

/* ================= v4_2：暖调黑金（非纯黑） ================= */
html body.mytg-page-active{background:#18130d!important}
html .mytg-page.mytg-v4{
  --bg:#18130d;
  --ink:#f8f0e1;
  --ink-2:#dccfb8;
  --ink-3:#ad9d83;
  --ink-4:#7a6b52;
  --hair:rgba(236,208,156,.11);
  --hair-2:rgba(236,208,156,.20);
  --gold:#ebcd92;
  --gold-line:rgba(235,205,146,.32);
  --gold-soft:rgba(235,205,146,.10);
  --dot-bg:#241d14;
  --panel:linear-gradient(135deg,rgba(255,226,176,.07),rgba(255,226,176,.02) 60%,rgba(255,226,176,.05));
  background:
    radial-gradient(1200px 760px at 82% -4%,rgba(222,176,100,.26),transparent 62%),
    radial-gradient(900px 760px at -6% 42%,rgba(196,142,70,.14),transparent 62%),
    radial-gradient(1100px 820px at 104% 96%,rgba(206,152,82,.13),transparent 62%),
    linear-gradient(180deg,#231b12 0%,#1a150e 38%,#16120c 100%);
}
html .mytg-page.mytg-v4::before{height:100%;background:radial-gradient(600px 420px at 70% 22%,rgba(255,214,150,.08),transparent 70%)}
html[data-theme="light"] body.mytg-page-active{background:#f7f3ec!important}
html[data-theme="light"] .mytg-page.mytg-v4{--dot-bg:#fffdf8;background:#f7f3ec}
html[data-theme="light"] .mytg-page.mytg-v4::before{background:radial-gradient(900px 600px at 78% 30%,rgba(214,176,108,.28),transparent 65%)}

/* 渐隐金线分隔 */
.mytg-v4 .mx-top{border-bottom-color:transparent;background:linear-gradient(90deg,transparent,var(--gold-line) 20%,var(--gold-line) 80%,transparent) bottom/100% 1px no-repeat}
.mytg-v4 .mx-block{border-top:0;background:linear-gradient(90deg,transparent,var(--hair-2) 15%,var(--hair-2) 85%,transparent) top/100% 1px no-repeat}
/* 里程碑：暖色玻璃面板 */
.mytg-v4 .mx-journey{margin-bottom:24px;padding:56px;border-radius:32px;background:var(--panel),rgba(36,28,18,.55);
  border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,236,200,.07),0 40px 80px -50px rgba(0,0,0,.7)}
html[data-theme="light"] .mytg-v4 .mx-journey{background:rgba(255,253,248,.75);box-shadow:0 30px 60px -40px rgba(120,86,30,.25)}
.mytg-v4 .mx-reward{background:linear-gradient(100deg,rgba(235,205,146,.15),rgba(235,205,146,.03) 65%),rgba(20,16,11,.3)}
html[data-theme="light"] .mytg-v4 .mx-reward{background:linear-gradient(100deg,rgba(214,176,108,.16),rgba(214,176,108,.03) 65%)}
/* 黑卡：暖底上的金色光晕 */
.mytg-v4 .mx-card{box-shadow:0 60px 110px -40px rgba(10,6,2,.95),0 0 0 1px rgba(30,20,8,.6),0 0 90px -20px rgba(222,176,100,.28),inset 0 1px 0 rgba(255,240,210,.12)}
.mytg-v4 .mx-halo{background:radial-gradient(circle,rgba(230,178,96,.34),rgba(230,178,96,.09) 45%,transparent 68%)}
.mytg-v4 .mx-card-back{background:linear-gradient(160deg,#2c2419,#16110b)}
.mytg-v4 .mx-figure strong{color:var(--ink)}
@media (max-width:640px){.mytg-v4 .mx-journey{padding:32px 18px;border-radius:24px}}

/* ================= v4_4：石墨黑灰 + 香槟金 + 暖白（参照下载页主体；明暗主题统一深色；取代 v4_3 浅色底） ================= */
html body.mytg-page-active,html[data-theme="light"] body.mytg-page-active{background:#111111!important}
html .mytg-page.mytg-v4,html[data-theme="light"] .mytg-page.mytg-v4{
  --bg:#111111;
  --ink:#f0eee7;
  --ink-2:#c3c2be;
  --ink-3:#999998;
  --ink-4:#807f7b;
  --hair:#2a2a29;
  --hair-2:#363635;
  --gold:#dbc18c;
  --gold-2:#c6a36a;
  --gold-line:rgba(219,193,140,.32);
  --gold-soft:rgba(219,193,140,.10);
  --gold-grad:linear-gradient(110deg,#e6ce9a 0%,#c6a36a 100%);
  --gold-text:linear-gradient(180deg,#f2e2bb 0%,#dcc28c 52%,#c2a068 100%);
  --btn-ink:#28281c;
  --dot-bg:#1b1b1b;
  --panel:none;
  color-scheme:dark;
  color:var(--ink);
  background:
    radial-gradient(1100px 680px at 84% -8%,rgba(219,193,140,.09),transparent 62%),
    radial-gradient(820px 620px at -10% 36%,rgba(219,193,140,.035),transparent 62%),
    linear-gradient(180deg,#151515 0%,#111111 42%,#101010 100%);
  background-color:#111111;
}
html .mytg-page.mytg-v4::before,html[data-theme="light"] .mytg-page.mytg-v4::before{height:100%;
  background:radial-gradient(560px 420px at 72% 26%,rgba(219,193,140,.06),transparent 70%)}
html .mytg-v4.mytg-v4 .mx-title{text-shadow:none}
html .mytg-v4.mytg-v4 .mx-figure strong{color:var(--ink)}

/* 主操作：浅金渐变 + 深色字（下载页主按钮），实色打底 */
html .mytg-v4.mytg-v4 .mx-btn-gold{background:#d8bb82 linear-gradient(110deg,#e6ce9a,#c6a36a);
  box-shadow:0 16px 34px -18px rgba(219,193,140,.5),inset 0 0 0 1px #e1c792,inset 0 1px 0 rgba(255,255,255,.4)}
html .mytg-v4.mytg-v4 .mx-btn-gold:hover{background:#ead5a6;
  box-shadow:0 22px 40px -18px rgba(219,193,140,.6),inset 0 0 0 1px #ecd9ad,inset 0 1px 0 rgba(255,255,255,.5)}

/* 黑卡：石墨底 + 香槟金描边，弱金光 */
html .mytg-v4.mytg-v4 .mx-halo{background:radial-gradient(circle,rgba(219,193,140,.15),rgba(219,193,140,.045) 45%,transparent 68%)}
html .mytg-v4.mytg-v4 .mx-card{color:#f0eee7;
  background:
    radial-gradient(120% 70% at 100% 0%,rgba(219,193,140,.12),transparent 52%),
    repeating-radial-gradient(circle at 0% 100%,rgba(219,193,140,.03) 0 1px,transparent 1px 8px),
    linear-gradient(160deg,#262625 0%,#1a1a19 55%,#1f1f1d 100%);
  background-color:#1d1d1c;
  box-shadow:0 60px 110px -44px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.55),0 0 90px -30px rgba(219,193,140,.14),inset 0 1px 0 rgba(255,255,255,.06)}
html .mytg-v4.mytg-v4 .mx-card-back{background:linear-gradient(160deg,#2a2a28,#171716);border-color:rgba(219,193,140,.2);opacity:.8;box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
html .mytg-v4.mytg-v4 .mx-card-brand b{background:linear-gradient(180deg,#f3e4c0,#d4b67c);-webkit-background-clip:text;background-clip:text}
html .mytg-v4.mytg-v4 .mx-code-id b{color:#dbc18c}
html .mytg-v4.mytg-v4 .mx-qr-corners i{border-color:#dbc18c}
html .mytg-v4.mytg-v4 .mx-aff-row{background:#141414;border-color:#3a3a38}
html .mytg-v4.mytg-v4 .mx-aff-copy{background:#262625;color:#d6d5d3;box-shadow:inset 0 0 0 1px #4b4a48}
html .mytg-v4.mytg-v4 .mx-aff-copy:hover{background:#333231;color:#f0eee7;box-shadow:inset 0 0 0 1px #797874}
html .mytg-v4.mytg-v4 .mx-aff-tip,html .mytg-v4.mytg-v4 .mx-card-note{color:#8a8986}
html .mytg-v4.mytg-v4 .mx-aff-tip.is-ok{color:#9ad7a8}

/* 里程碑：基础面板层级（#1b1b1b），灰线分区 */
html .mytg-v4.mytg-v4 .mx-journey{
  --hair:#2e2e2d;--hair-2:#3b3b39;--dot-bg:#202020;
  color:var(--ink);margin-bottom:24px;padding:56px;border-radius:32px;border:1px solid #363635;
  background:
    radial-gradient(90% 120% at 100% 0%,rgba(219,193,140,.08),transparent 55%),
    repeating-radial-gradient(circle at 0% 100%,rgba(219,193,140,.022) 0 1px,transparent 1px 9px),
    linear-gradient(150deg,#1e1e1d,#171717 60%,#1b1b1a);
  background-color:#1b1b1b;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)}
html .mytg-v4.mytg-v4 .mx-reward{border-color:rgba(219,193,140,.3);background:linear-gradient(100deg,rgba(219,193,140,.10),rgba(219,193,140,.02) 65%),#171717}
html .mytg-v4.mytg-v4 .mx-reward-ico{box-shadow:0 14px 30px -14px rgba(219,193,140,.45),inset 0 1px 0 rgba(255,255,255,.45)}
html .mytg-v4.mytg-v4 .mx-track-line>span{box-shadow:0 0 12px rgba(219,193,140,.4)}
html .mytg-v4.mytg-v4 .mx-node.is-on .mx-node-dot{box-shadow:0 0 0 6px var(--gold-soft),0 12px 30px -12px rgba(219,193,140,.5)}
html .mytg-v4.mytg-v4 .mx-node.is-goal.is-on .mx-node-dot{box-shadow:0 0 0 8px var(--gold-soft),0 0 44px rgba(219,193,140,.35)}

/* 三步 & 规则 */
html .mytg-v4.mytg-v4 .mx-step-no{-webkit-text-stroke:1.2px var(--gold)}
html .mytg-v4.mytg-v4 .mx-steps li{transition:transform .3s}
html .mytg-v4.mytg-v4 .mx-rules-list span{color:var(--gold)}
html .mytg-v4.mytg-v4 a:focus-visible,html .mytg-v4.mytg-v4 button:focus-visible,html .mytg-v4.mytg-v4 summary:focus-visible{outline-color:#e1c488}
@media (max-width:640px){html .mytg-v4.mytg-v4 .mx-journey{padding:32px 18px;border-radius:24px}}
@media (max-width:640px){
  html .mytg-v4.mytg-v4 .mx-node-text b{font-size:12.5px;letter-spacing:0;white-space:nowrap}
  html .mytg-v4.mytg-v4 .mx-reward h3{font-size:15px;letter-spacing:0}
}

/* ================= v4_5：首屏标题排版参照下载页「让创作，/ 不止于浏览器。」——无衬线；主句 550 暖白，强调短语常规字重 + 实色香槟金 ================= */
html .mytg-v4.mytg-v4 .mx-title{margin:24px 0 18px;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;font-feature-settings:normal;
  font-size:clamp(34px,3.5vw,49px);font-weight:550;line-height:1.4;letter-spacing:-1px;color:var(--ink)}
html .mytg-v4.mytg-v4 .mx-title em{font-weight:400;background:none;color:#dcc28c;-webkit-text-fill-color:#dcc28c}
@media (min-width:1500px){html .mytg-v4.mytg-v4 .mx-title{font-size:51px}}
@media (max-width:900px){html .mytg-v4.mytg-v4 .mx-title{font-size:42px}}
@media (max-width:640px){html .mytg-v4.mytg-v4 .mx-title{margin:18px 0 13px;font-size:clamp(27px,8.7vw,34px);letter-spacing:-.4px}}