/* ============================================================================
 * tl3.css · 天睐智能体 · 总005批1 三大板块新前端（创作/广场/订阅）设计系统
 * 基调：米纸底 + 赭红 + 墨黑 + 墨蓝（老板《网站简化0706》转场稿三色宪法）；
 * 字体/贝塞尔/彩虹渐变沿用 v7 token（与 /v2 同源，字体文件共享 /v2/assets/fonts 零包体增量）。
 * 首页保留浅灰极简底（彩环主视觉）；三板块与转场页走米纸编辑风。
 * 铁律：UI 零 emoji（图标一律单色 SVG）；对外零技术词泄露。
 * ========================================================================== */

/* ---------- 字体（共享 v2 字体文件） ---------- */
@font-face{font-family:"TL Sans";src:local("Alibaba PuHuiTi 3.0 45 Light"),local("AlibabaPuHuiTi_3_45_Light"),url("/v2/assets/fonts/tl-sans-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TL Sans";src:local("Alibaba PuHuiTi 3.0"),url("/v2/assets/fonts/tl-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TL Sans";src:url("/v2/assets/fonts/tl-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TL Sans";src:url("/v2/assets/fonts/tl-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TL Sans";src:url("/v2/assets/fonts/tl-sans-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"TL Sans";src:url("/v2/assets/fonts/tl-sans-900.woff2") format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"TL Serif";src:local("Source Han Serif CN Light"),local("SourceHanSerifCN-Light"),url("/v2/assets/fonts/tl-serif-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"TL Serif";src:local("Source Han Serif CN"),url("/v2/assets/fonts/tl-serif-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TL Serif";src:url("/v2/assets/fonts/tl-serif-900.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --paper:#f5f1e9; --paper2:#fbf9f4; --paper3:#efe8db; --art:#f2ede3;
  /* 0709 可读性整改（老板屡批「字太小色太淡」·根治）：
     --ink3 6.7:1 / --mute 4.6:1 起步；极浅灰只准给不承载信息的英文装饰（--mute-deco）。 */
  --ink:#171410; --ink2:#403c33; --ink3:#5a5347; --mute:#756c5b; --mute-deco:#a59e8d;
  --line:#ddd6c5; --line2:#c8beaa;
  --red:#c14436; --red-d:#a83527; --sicon:#b8432b;
  --accent:#243570; --accent-l:#4a5aa2; --gold:#7d5f24;
  --home-bg:#efefef; /* ＝ Spline 场景 BG Color(#EFEFEF)·首页纸底同色→彩环无缝无灰块（照 v2 --spline-bg） */
  --iris:linear-gradient(112deg,#37d3df 0%,#5b8cf5 33%,#8a5cf0 62%,#d264d2 100%);
  --sans:"TL Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  --serif:"TL Serif","Source Han Serif CN","Songti SC",serif;
  --ease:cubic-bezier(.4,0,.2,1); --smooth:cubic-bezier(.42,.04,.16,1);
  --soft:cubic-bezier(.66,0,.2,1); --spring:cubic-bezier(.34,1.32,.44,1); --out:cubic-bezier(.19,1,.22,1);
  --r:2px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:var(--sans);background:var(--home-bg);color:var(--ink);overflow-x:hidden;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body[data-view="create"],body[data-view="square"],body[data-view="subscribe"]{background:var(--paper)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
input,textarea,select{font-family:inherit}
img{max-width:100%}
::selection{background:rgba(36,53,112,.16)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

.kicker{font-size:12px;font-weight:600;letter-spacing:.34em;color:var(--mute);text-transform:uppercase}
.f-serif{font-family:var(--serif)}
.hide{display:none!important}

/* ---------- 欢迎页（总007·Z601：您即将进入天睐智能体 · 彩环加载完毕才退场） ---------- */
#tlLoad{position:fixed;inset:0;z-index:4000;background:#fff;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:24px;transition:opacity .65s var(--soft)}
#tlLoad.off{opacity:0;pointer-events:none}
/* 007v3·V1：正版 logo 居环心 · 彩环 donut 绕行加载（并用方案） */
#tlLoad .ld-mark{position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
#tlLoad .ld-logo{width:40px;height:40px;display:block;object-fit:contain;
  animation:ldLogo 1.4s var(--out) both}
@keyframes ldLogo{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
#tlLoad .ld-dot{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(#37d3df,#5b8cf5,#8a5cf0,#d264d2,#37d3df);
  -webkit-mask:radial-gradient(circle at center,transparent 82%,#000 84%);
          mask:radial-gradient(circle at center,transparent 82%,#000 84%);
  animation:ldSpin 1.1s linear infinite;
  filter:drop-shadow(0 6px 22px rgba(91,140,245,.28))}
@keyframes ldSpin{to{transform:rotate(360deg)}}
#tlLoad .ld-welcome{font-size:clamp(22px,3.2vw,34px);font-weight:300;color:var(--ink);
  letter-spacing:.3em;padding-left:.3em;white-space:nowrap;
  animation:ldTrack 1.6s var(--out) both}
#tlLoad .ld-welcome em{font-style:normal;font-weight:900;
  background:var(--iris);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
@keyframes ldTrack{from{opacity:0;letter-spacing:.52em;filter:blur(5px)}
                   to{opacity:1;letter-spacing:.3em;filter:none}}
#tlLoad .ld-brand{font-size:11.5px;font-weight:600;letter-spacing:.5em;color:var(--mute);padding-left:.5em;
  animation:ldMeta 1s var(--out) .5s both}
@keyframes ldMeta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#tlLoad .ld-quip{font-size:13.5px;color:var(--mute);letter-spacing:.12em;min-height:20px;transition:opacity .35s}
@media (max-width:600px){#tlLoad .ld-welcome{letter-spacing:.16em;padding-left:.16em}
  @keyframes ldTrack{from{opacity:0;letter-spacing:.3em;filter:blur(5px)}to{opacity:1;letter-spacing:.16em;filter:none}}}

/* ---------- 顶栏 ---------- */
#tlBar{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;gap:14px;
       padding:14px clamp(16px,3vw,44px);pointer-events:none}
#tlBar>*{pointer-events:auto}
#tlBar .tb-left{display:flex;align-items:center;gap:0;min-width:0}
.tb-back{display:none;align-items:center;gap:6px;background:var(--ink);color:#fff;font-size:14px;
         font-weight:600;padding:7px 14px 7px 10px;letter-spacing:.08em;transition:transform .3s var(--spring)}
.tb-back:hover{transform:translateX(-2px)}
.tb-back svg{width:13px;height:13px;display:block}
.tb-title{display:none;font-size:15px;font-weight:600;letter-spacing:.22em;color:var(--ink);
          padding:7px 14px;border-left:0}
body[data-view]:not([data-view="home"]) .tb-back,
body[data-view]:not([data-view="home"]) .tb-title{display:flex}
.tb-brand{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.5em;color:var(--mute)}
.tb-brand img{width:20px;height:20px;display:block;object-fit:contain} /* 007v3·V1 正版 logo */
body[data-view]:not([data-view="home"]) .tb-brand{display:none}
#tlBar .tb-spacer{flex:1}
#tlBar .tb-right{display:flex;align-items:center;gap:12px}
.tb-sub-toggle{display:none;width:34px;height:30px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;border:1px solid var(--line2);background:var(--paper2)}
.tb-sub-toggle span{display:block;width:16px;height:1.5px;background:var(--ink);transition:transform .2s var(--ease)}
.tb-sub-toggle.on span:first-child{transform:translateY(3.25px) rotate(45deg)}
.tb-sub-toggle.on span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* 信封 + 上下文提示（Z512） */
.tb-envwrap{display:flex;align-items:center;gap:8px}
.tb-envnote{font-size:13px;color:var(--ink3);letter-spacing:.06em;white-space:nowrap}
.tb-envnote b{color:var(--red);font-weight:700}
/* 总010⑧·上新提示做成真跳转链接 */
.tb-envnote-link{cursor:pointer;transition:color .16s;text-underline-offset:3px}
.tb-envnote-link:hover{color:var(--red);text-decoration:underline}
.tb-env{position:relative;width:34px;height:30px;display:flex;align-items:center;justify-content:center;
        border:1px solid var(--line2);background:var(--paper2);transition:transform .25s var(--spring)}
.tb-env:hover{transform:translateY(-1px)}
.tb-env svg{width:17px;height:17px;stroke:var(--ink2)}
.tb-env .badge{position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;line-height:16px;
  text-align:center;display:none}
.tb-env.has .badge{display:block}

/* 钱包胶囊 */
.tb-coin{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink3);cursor:pointer;
         padding:5px 8px;transition:background .2s}
.tb-coin:hover{background:rgba(0,0,0,.045)}
.tb-coin b{font-size:15.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.tb-join{border:1px solid var(--ink);padding:6px 16px;font-size:13.5px;font-weight:600;letter-spacing:.12em;
         transition:all .25s var(--ease)}
.tb-join:hover{background:var(--ink);color:#fff}
.tb-avatar{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;
           display:flex;align-items:center;justify-content:center;font-weight:600;cursor:pointer}

/* 信封下拉 */
.env-pop{position:fixed;top:56px;right:clamp(16px,3vw,44px);z-index:950;width:min(360px,92vw);
  background:var(--paper2);border:1px solid var(--line2);box-shadow:0 18px 50px rgba(23,20,16,.14);
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:all .3s var(--out)}
.env-pop.on{opacity:1;transform:none;pointer-events:auto}
.env-pop .ep-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.env-pop .ep-head b{font-size:14.5px;letter-spacing:.14em}
.env-pop .ep-read{font-size:13px;color:var(--accent);cursor:pointer}
.env-pop .ep-sec{padding:8px 16px 4px;font-size:12px;letter-spacing:.2em;color:var(--mute)}
.env-pop .ep-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:14px;color:var(--ink2);
  cursor:pointer;transition:background .15s}
.env-pop .ep-item:hover{background:var(--paper3)}
.env-pop .ep-item .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.env-pop .ep-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-pop .ep-empty{padding:14px 16px 18px;font-size:13.5px;color:var(--mute)}

/* ---------- 首页（彩环 + 轮盘 + 广告胶囊） ---------- */
/* 移动端021·落款被切：iOS/微信内核里 100vh 指【大视口】(浏览器栏隐藏时的高度)，
   而实际可视高度是小视口 → 首页比屏幕高一截，落款掉到 fold 之下。改用 dvh(动态视口)贴合真实可视高度。
   @supports 兜底老内核。（注意：不动 body 的 overflow-x —— 滚动容器是视口，改它会误伤新手引导021） */
#view-home{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;padding:64px 16px 18px}
.hero{position:relative;width:min(96vw,74vh,840px);height:min(96vw,74vh,840px);flex:none; /* 0708老板：圆环+20%(80→96vw/62→74vh/700→840px) */
      display:flex;align-items:center;justify-content:center}
/* 彩环【回退为 v2 最终版】：Spline 即时可见（无淡入门·去掉 pointer-events:none 让 heroCatch 拖拽穿透翻转），
   transform:scale(1.18) 同 v2 填满视觉中心。兜底环＝v2 平面环形 mask，默认 opacity:0，仅 4.5s 未 load 时 JS 亮 .92。 */
.hero-ring{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;z-index:1;
           transform:scale(1.18);transform-origin:center center}
.hero-fallback{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s;
  background:conic-gradient(from 210deg,#5fe0d6,#5b8cf5,#7c4dde,#d36ad8,#5fe0d6);filter:blur(2px);
  -webkit-mask:radial-gradient(circle,transparent 40%,#000 42%,#000 60%,transparent 62%);
          mask:radial-gradient(circle,transparent 40%,#000 42%,#000 60%,transparent 62%)}

/* 总006·老板0707：首页彩环+轮盘【回退为 v2 最终版实现】——同 rolling 彩环 + 连续丝滑补间轮盘 +
   双层「细体→粗体虹彩」渐亮文字 + 右侧圆点指示 + 按住彩环可翻转。取消彩蛋（不插领墨水项）。 */
.wheel{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:4;width:70%;
  pointer-events:none;text-align:center}
.wheel-item{position:absolute;left:50%;top:50%;white-space:nowrap;pointer-events:auto;cursor:pointer;
  will-change:transform,opacity}
.wheel-item .zh{position:relative;display:inline-block;font-size:clamp(30px,4.4vw,58px);line-height:1}
.wheel-item .zh .thin{font-weight:300;letter-spacing:.14em;color:var(--mute);opacity:calc(1 - var(--lit,0))}
.wheel-item .zh .bold{position:absolute;left:0;top:0;right:0;font-weight:900;letter-spacing:.05em;
  background:var(--iris);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;opacity:var(--lit,0)}
.wheel-item .en{font-size:9.5px;font-weight:600;letter-spacing:.5em;color:var(--ink3);margin-top:12px;
  opacity:calc(var(--lit,0)*var(--lit,0));text-transform:uppercase}
/* 右侧圆点指示（照 v2 .dots：position:fixed 贴【视口】右缘 right:50px·非贴环·0708老板"移到右侧v2标准"） */
.wheel-dots{position:fixed;right:50px;top:50%;transform:translateY(-50%);z-index:6;display:flex;
  flex-direction:column;gap:15px;align-items:center}
.wheel-dots .d{width:5px;height:5px;border-radius:50%;background:var(--line2);cursor:pointer;transition:.34s var(--soft)}
.wheel-dots .d.on{height:26px;border-radius:99px;background:var(--iris)}
/* 按住彩环可翻转：抓取层（透明·grab 光标·让 Spline 场景收到拖拽·照 v2 .hero-catch 语义） */
.hero-catch{position:absolute;inset:0;z-index:2;cursor:grab}
.hero-catch:active{cursor:grabbing}
@media(max-width:980px){.wheel-item .zh{font-size:34px}.wheel-dots{right:14px}}
@media(max-width:480px){.wheel-item .zh{font-size:27px}.wheel-item .en{font-size:8px;letter-spacing:.4em;margin-top:8px}}

.home-hint{margin-top:clamp(20px,5vh,72px);font-size:13px;color:var(--ink3);letter-spacing:.34em;min-height:20px;
  transition:opacity .45s} /* 0708：环+20%后 scale(1.18)视觉环底会压住胶囊→用 vh 净空把提示/胶囊/落款推到环底之下·大屏也不重叠 */
.home-caps{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.cap{border:1px solid var(--line2);background:rgba(255,255,255,.55);padding:9px 22px;font-size:14.5px;
  letter-spacing:.18em;color:var(--ink2);transition:all .3s var(--ease);cursor:pointer}
.cap:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);background:#fff}
/* 电脑端首页快捷入口：六个创作台和广场八大栏目无需先进入二级页面即可直达。
   小屏仍由已验收的七砖首页承接，避免重复入口。 */
.home-launchpad{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;align-items:start;width:min(760px,calc(100vw - 32px));margin-top:18px}
.hl-group{min-width:0}.hl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 7px}
.hl-head b{font-family:var(--serif);font-size:14px;letter-spacing:.12em;color:var(--ink)}.hl-head span{font-size:10px;letter-spacing:.16em;color:var(--mute)}
.hl-grid{display:grid;gap:7px}.hl-create{grid-template-columns:repeat(6,minmax(52px,1fr))}.hl-square{grid-template-columns:repeat(4,minmax(92px,1fr))}
.hl-item{min-width:0;border:1px solid var(--line2);background:rgba(255,255,255,.5);padding:8px 9px;text-align:left;color:var(--ink2);cursor:pointer;text-decoration:none;transition:all .22s var(--ease)}
.hl-item:hover,.hl-item:focus-visible{border-color:var(--accent);background:#fff;color:var(--ink);transform:translateY(-1px);outline:none}
.hl-item .hl-k{display:block;font-family:var(--serif);font-size:15px;font-weight:800;line-height:1.1;letter-spacing:.06em}.hl-item .hl-v{display:block;overflow:hidden;margin-top:3px;font-size:10.5px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;color:var(--mute)}
.hl-square .hl-item{padding:8px 10px}.hl-square .hl-k{font-size:12.5px;letter-spacing:.02em}.hl-square .hl-v{font-size:9.5px}
@media(max-width:1120px){.home-launchpad{width:min(650px,calc(100vw - 32px))}}
.home-foot{margin-top:28px;text-align:center}
.home-foot::before{content:"";display:block;width:26px;height:26px;margin:0 auto 10px;
  background:url("tl_logo_256.png") center/contain no-repeat} /* 007v3·V1 首页落款正版 logo */
.home-foot .b1{font-size:13px;font-weight:600;letter-spacing:.62em;color:var(--ink2);padding-left:.62em}
.home-foot .b2{margin-top:8px;font-size:10.5px;letter-spacing:.36em;color:var(--mute)}
/* 0708：矮屏（≤940px高·如1440×900笔记本）圆环+20%会顶到落款/被裁→按高度收一档(68vh·仍比原始62vh大)·净空同步收 */
@media (max-height:940px){
  .hero{width:min(96vw,68vh,760px);height:min(96vw,68vh,760px)}
  .home-hint{margin-top:clamp(16px,3.5vh,44px)}
}

/* ---------- 转场层（老板三套 SVG · 分层入场） ---------- */
#tlSplash{position:fixed;inset:0;z-index:3000;background:var(--art);display:none;overflow:hidden;cursor:pointer}
#tlSplash.on{display:block}
#tlSplash .tls-stage{position:absolute;inset:0}
#tlSplash img.tls-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
#tlSplash.play .l-ghost{animation:tlsGhost 1s var(--out) .05s forwards}
#tlSplash.play .l-deco1{animation:tlsDecoA .9s var(--out) .22s forwards}
#tlSplash.play .l-deco2{animation:tlsDecoB .9s var(--out) .34s forwards}
#tlSplash.play .l-title{animation:tlsTitle .7s var(--spring) .5s forwards}
#tlSplash.play .l-meta{animation:tlsMeta .7s var(--out) .72s forwards}
@keyframes tlsGhost{from{opacity:0;transform:scale(1.05);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes tlsDecoA{from{opacity:0;transform:translate(-46px,-30px) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes tlsDecoB{from{opacity:0;transform:translate(46px,34px) rotate(4deg)}to{opacity:1;transform:none}}
@keyframes tlsTitle{from{opacity:0;transform:translateY(34px);clip-path:inset(0 0 100% 0)}
                    to{opacity:1;transform:none;clip-path:inset(0 0 -8% 0)}}
@keyframes tlsMeta{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#tlSplash.out{animation:tlsOut .62s var(--soft) forwards}
@keyframes tlsOut{to{clip-path:inset(0 0 100% 0);transform:translateY(-2vh)}}
#tlSplash .tls-skip{position:absolute;right:26px;bottom:22px;font-size:11px;letter-spacing:.3em;color:var(--mute)}
@media (prefers-reduced-motion:reduce){
  #tlSplash img.tls-l{animation:none!important;opacity:1!important}
}

/* ---------- 板块容器通用 ---------- */
.bd{min-height:100vh;padding:88px clamp(16px,4vw,56px) 60px;max-width:1560px;margin:0 auto}
.bd-rule{height:1px;background:var(--ink);opacity:.85;margin:14px 0 0}
.bd-footmark{text-align:center;margin-top:46px}
.bd-footmark::before{content:"";display:block;width:32px;height:32px;margin:0 auto 12px;
  background:url("tl_logo_256.png") center/contain no-repeat} /* 007v3·V1 页脚落款正版 logo */
.bd-footmark .en{font-size:11px;letter-spacing:.5em;color:var(--mute)}
.bd-footmark .cn{margin-top:8px;font-size:14px;letter-spacing:.4em;color:var(--accent);font-weight:500}

/* 通用按钮 */
.tl-btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;background:var(--ink);color:#fff;
  font-size:14.5px;font-weight:600;letter-spacing:.14em;padding:11px 26px;transition:all .25s var(--ease)}
.tl-btn:hover{background:#000;transform:translateY(-1px)}
.tl-btn.red{background:var(--red)}
.tl-btn.red:hover{background:var(--red-d)}
.tl-btn.hollow{background:none;border:1px solid var(--ink);color:var(--ink)}
.tl-btn.hollow:hover{background:var(--ink);color:#fff}
.tl-btn[disabled]{opacity:.45;pointer-events:none}
.tl-mini{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;letter-spacing:.08em;
  border:1px solid var(--line2);padding:5px 12px;color:var(--ink2);cursor:pointer;transition:all .2s}
.tl-mini:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- 弹层（modal） ---------- */
#tlModalScrim{position:fixed;inset:0;z-index:2000;background:rgba(23,20,16,.42);opacity:0;
  pointer-events:none;transition:opacity .3s}
#tlModalScrim.on{opacity:1;pointer-events:auto}
#tlModalCard{position:fixed;z-index:2010;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);
  width:min(480px,92vw);max-height:84vh;overflow:auto;background:var(--paper2);
  border:1px solid var(--line2);box-shadow:0 30px 80px rgba(23,20,16,.25);padding:26px 26px 22px;
  opacity:0;pointer-events:none;transition:all .35s var(--out)}
#tlModalCard.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.tlm-kicker{font-size:11.5px;letter-spacing:.4em;color:var(--mute)}
.tlm-title{margin-top:6px;font-size:22px;font-weight:800;letter-spacing:.06em}
.tlm-sub{margin-top:6px;font-size:14px;color:var(--ink3);line-height:1.7}
.tlm-field{margin-top:16px}
.tlm-label{font-size:12.5px;letter-spacing:.2em;color:var(--ink3);margin-bottom:7px}
.tlm-row{display:flex;gap:8px}
.tlm-input{width:100%;border:1px solid var(--line2);background:#fff;padding:10px 12px;font-size:15px;
  outline:none;transition:border-color .2s}
.tlm-input:focus{border-color:var(--accent)}
.tlm-code-btn{flex:none;border:1px solid var(--ink);padding:0 14px;font-size:13.5px;font-weight:600;
  transition:all .2s}
.tlm-code-btn:hover{background:var(--ink);color:#fff}
.tlm-code-btn[disabled]{opacity:.4;pointer-events:none}
.tlm-actions{margin-top:20px;display:flex;gap:10px}
.tlm-actions .tl-btn{flex:1}
.tlm-note{margin-top:12px;font-size:13px;color:var(--mute);line-height:1.8}
.tlm-x{position:absolute;top:14px;right:14px;width:30px;height:30px;display:flex;align-items:center;
  justify-content:center;color:var(--mute);transition:color .2s}
.tlm-x:hover{color:var(--ink)}
.tlm-x svg{width:14px;height:14px}

/* 钱包面板（Q4：墨水余额 + 天心兑换选项） */
.wp-big{margin-top:18px;display:flex;align-items:baseline;gap:10px}
.wp-big b{font-size:40px;font-weight:800;font-variant-numeric:tabular-nums}
.wp-big span{font-size:13.5px;color:var(--ink3);letter-spacing:.2em}
.wp-note{margin-top:4px;font-size:13px;color:var(--mute)}
.wp-line{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;font-size:14.5px}
.wp-line b{font-variant-numeric:tabular-nums;font-size:17px}
.wp-exrow{margin-top:14px;background:var(--paper3);padding:12px 14px;font-size:13.5px;color:var(--ink2);
  line-height:1.8}
.wp-exrow b{color:var(--accent)}
.subq{position:fixed;right:8px;top:52px;z-index:1701;width:min(316px,calc(100vw - 16px));
  background:var(--paper2);border:1px solid var(--line2);box-shadow:0 16px 42px rgba(23,20,16,.18);
  padding:12px;display:none}
.subq.on{display:block}
.subq-title{font-size:12px;letter-spacing:.22em;color:var(--mute);padding:2px 4px 10px}
.subq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.subq button{border:1px solid var(--line2);background:#fff;padding:11px 8px;font-size:14px;
  font-weight:600;letter-spacing:.06em;color:var(--ink2)}
.subq button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.subq-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line)}
.subq-actions button{background:var(--paper3)}
/* 充值格 */
.preset-grid{margin-top:16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preset{border:1px solid var(--line2);background:#fff;padding:12px 6px;text-align:center;cursor:pointer;
  transition:all .2s}
.preset:hover{border-color:var(--ink)}
.preset.on{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.preset .v{font-size:18px;font-weight:800}
.preset .u{margin-top:3px;font-size:12px;color:var(--mute)}
/* Native 扫码层 */
.np-qr{margin:18px auto 0;width:210px;height:210px;background:#fff;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center}
.np-qr svg,.np-qr img{width:196px;height:196px;display:block}
.np-tip{margin-top:12px;text-align:center;font-size:13.5px;color:var(--ink3);line-height:1.8}

/* ---------- Toast ---------- */
#tlToast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(18px);z-index:5000;
  background:var(--ink);color:#fff;font-size:14.5px;letter-spacing:.06em;padding:11px 22px;
  opacity:0;pointer-events:none;transition:all .35s var(--out);max-width:86vw;text-align:center}
#tlToast.on{opacity:1;transform:translateX(-50%)}

/* ---------- 新手引导层 v2（§2.2#9 · 挖洞遮罩 spotlight + 分步聚焦卡片 · 老板0714重做） ----------
 * 保留「背景压暗 + 目标高亮 + 文字提示」形态：暗场由 .g2-mask 的巨型 box-shadow 铺成、洞内即高亮；
 * 提示卡 .g2-cap 由 JS 按目标 rect 定位（中心对齐 + 自动翻边 + clamp），不再手拼坐标；对目标零侵入。 */
#tlGuide{position:fixed;inset:0;z-index:1500;display:none;pointer-events:none}
#tlGuide.on{display:block;pointer-events:auto}
/* 暗场：挖洞四周四块 fixed 面板铺暗（不用 box-shadow/clip-path，绕开 body-as-scroller 裁剪与 evenodd 怪癖，最稳） */
.g2-dim{position:fixed;background:rgba(38,34,28,.72);pointer-events:none}
/* 高亮框：单独一层描白边 + 外发光，贴住挖洞 */
.g2-ring{position:fixed;left:0;top:0;width:0;height:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 14px 60px rgba(0,0,0,.34);
  transition:left .3s var(--out),top .3s var(--out),width .3s var(--out),height .3s var(--out)}
/* 提示卡 */
.g2-cap{position:absolute;left:0;top:0;max-width:min(340px,86vw);box-sizing:border-box;
  background:var(--ink,#28241e);color:#fff;border-radius:14px;padding:15px 17px 12px;
  box-shadow:0 18px 60px rgba(0,0,0,.42);animation:g2in .32s var(--out) both}
@keyframes g2in{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.g2-txt{font-size:15px;line-height:1.72;letter-spacing:.02em;font-weight:600}
.g2-txt b{color:#ffd98a;font-weight:800}
.g2-bar{display:flex;align-items:center;gap:8px;margin-top:14px}
.g2-step{font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.5);margin-right:auto}
.g2-skip{background:none;border:none;color:rgba(255,255,255,.6);font-size:13px;letter-spacing:.08em;
  padding:6px 8px;cursor:pointer;transition:color .2s}
.g2-skip:hover{color:#fff}
.g2-next{background:#fff;color:var(--ink,#28241e);border:none;border-radius:9px;font-size:13.5px;
  font-weight:700;letter-spacing:.08em;padding:8px 20px;cursor:pointer;transition:opacity .2s}
.g2-next:hover{opacity:.85}
.g2-arrow{position:absolute;left:20px;top:-17px;width:22px;height:22px;color:#fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
@media (max-width:640px){.g2-cap{max-width:min(300px,88vw);padding:13px 15px 11px}.g2-txt{font-size:14.5px}}

/* ---------- 移动端 ---------- */
@media (max-width:760px){
  #tlBar{padding:10px 12px;gap:8px}
  .tb-envnote{display:none}
  .tb-title{letter-spacing:.12em;padding:7px 8px}
  .tb-coin{padding:4px 5px}
  .tb-coin b{font-size:13px}
  .tb-join{padding:5px 10px;letter-spacing:.06em}
  /* 移动端021·顶栏禁折行：中文每字之间都是合法断行点，子项无 nowrap 时不是被裁而是被压成竖排
     （实拍：品牌折2行、开通会员折2行、顶栏 51→70px）。tb-join 是真钱入口(tl3-core.js:1269→#subscribe/member)，
     单独 flex:none 保它永不被压缩；其余项仍可收缩，避免把它挤出屏幕右缘被 body{overflow-x:hidden} 切掉。 */
  .tb-brand,.tb-title,.tb-coin,.tb-coin b,.tb-join,.tb-back{white-space:nowrap}
  .tb-join{flex:none}
  /* 移动版重做·补 021 三刀的漏网：.tb-back 当时不在 nowrap 名单里（首页不显示返回键，只验首页量不到它）。
     实测广场/创作台等非首页：「返回」二字被压成竖排 → 顶栏 51→74px，箭头 svg 被挤成 8×13（CSS 写死 13×13）。 */
  .tb-back svg{flex:none}
  /* 顶栏原本全透明：非首页一滚动，商品条/正文就与「返回·墨水·开通会员」叠印成一团。给米纸底＋一条墨线封住。
     #tlBar 自身仍是 pointer-events:none（:88 只有子项 auto），加底色不改变命中行为。 */
  #tlBar{background:var(--paper);border-bottom:1px solid var(--line)}
  body[data-view="home"] #tlBar{border-bottom:0}
  /* 🩸非首页顶栏本来就【超预算】：375 屏实需 游客 399 / 登录·会员在期 435（返回73＋标题49＋信封34＋钱包137＋开通会员78＋边距）。
   * 旧版靠「折行成 74px」把超出藏起来（代价：返回二字竖排、箭头压扁）；一加 nowrap 就从折行变成
   * 「广场」二字与信封图标叠印。要么折行、要么叠印——只有真砍掉一段才解得开。
   * 砍标题：非首页三页(广场/订阅/问答)各自都有自己的大标题（广场页顶就写着「百花齐放 你最美丽」），
   * 顶栏这个 49px 标题纯属重复；而 返回/钱包/开通会员(真钱) 三项都有功能，一个都不能砍。
   * 砍掉后：435−49−8(gap)=378…仍差 3 → 同时把 ≤480 的左右边距 12→8、gap 8→6 收 12px ⇒ 366 < 375 富余 9。 */
  body[data-view]:not([data-view="home"]) .tb-title{display:none}
  .tb-brand{letter-spacing:.12em}   /* 收字距：.5em 时 5 字白占 1/3 宽 */
  .hero{width:min(96vw,72vh,760px);height:min(96vw,72vh,760px)} /* 0708老板：移动端圆环同步+20%；移动端021 补回 px 上限（原缺上限，手机竖屏 vh 项恒不生效→hero≡96vw） */
  /* 移动端021·彩环出屏根治：手机上 hero≡96vw，再乘 :156 的 scale(1.18) ＝ 113.28vw
     → 每侧必出屏≈25px 被 overflow-x:hidden 裁成弧，且向下溢出 32px 压住「老师，今天想创作点什么？」。
     桌面有 840px 上限故幸免——这正是「只有手机崩」的机理。移动端取消放大即同时根治两个症状。 */
  .hero-ring{transform:none}
  .wheel-item .zh{font-size:24px}
  .home-caps{gap:8px;margin-top:22px}
  .cap{padding:8px 14px;font-size:12.5px;letter-spacing:.1em}
  .bd{padding:74px 14px 44px}
  #tlModalCard{padding:20px 16px 16px}
  .preset-grid{grid-template-columns:repeat(3,1fr)}
  body[data-view="subscribe"] .tb-envwrap,
  body[data-view="subscribe"] .tb-coin,
  body[data-view="subscribe"] .tb-join{display:none}
  body[data-view="subscribe"] #tlBar{z-index:1700}
  body[data-view="subscribe"] .tb-sub-toggle{display:flex}
  body[data-view="subscribe"] #tlBar .tb-right{gap:0}
}
/* 移动端021·手机档（iPhone 375/390）：顶栏隐藏品牌文字＋logo，只留返回/标题。
   算术：会员在期态(tl3-core.js:201 文案变「书院在期」6字)顶栏实需 476.5px ≫ 375；
   隐藏品牌省 121.8px → 354.7px < 375（富余 20px），会员态也不会把「开通会员」挤出屏。
   品牌露出不受损：顶栏品牌本就只在首页显示(:100)，而首页落款已有「天睐智能体 TIANLAI AGENT」。 */
@media (max-width:480px){
  .tb-brand{display:none}
  /* 手机档再收 12px 边距/间距：非首页「登录·书院在期」最长态实需 378 > 375，收完 366 富余 9。
     ⚠️顶栏类改动必须按「书院会员在期＋真实余额」最长态验（游客态钱包显示占位「—」会严重低估）。 */
  #tlBar{padding:10px 8px;gap:6px}
  #tlBar .tb-right{gap:8px}
}
@media (max-width:420px){
  .wheel-item .zh{font-size:21px}
  .home-hint{letter-spacing:.2em}
}

/* 批2 · 钱包兑换表单（P0c 天心兑墨接真） */
.wp-exform{margin-top:10px;display:flex;gap:10px;align-items:stretch}
.wp-exform .tlm-input{margin:0}

/* 007v3·V3 天证确权弹窗 */
.tz-copy{margin-top:14px;font-size:14.5px;line-height:2.0;color:var(--ink2)}
.tz-copy b{color:var(--ink)}
.tz-hook{margin-top:10px;border-left:3px solid var(--red);background:#faf3ee;padding:10px 14px;
  font-size:13.5px;color:var(--ink2);line-height:1.9}
.tz-hook b{color:var(--red)}

/* 007v3·V5 商品六要素：价格图标 + 免单徽章 + 元信息行（V6：天心图标已换精致硬币·老板0708） */
.tl-cico{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:3px}
.tl-cico svg{display:block;width:100%;height:100%;stroke:currentColor;fill:none}
/* 硬币款：配色全由 SVG 内联渐变控制，解除单色描边强制（否则金色填充被毁） */
.tl-cico.tl-coin svg{stroke:none;fill:none}
.tl-exempt{display:inline-flex;align-items:center;margin-left:8px;border:1px solid #a8461f;color:#a8461f;
  font-size:11px;font-weight:700;letter-spacing:.06em;padding:2px 8px;white-space:nowrap;vertical-align:2px}
.tl-free,.tl-promo{display:inline-flex;align-items:center;margin-left:8px;border:1px solid #b43228;color:#9f251d;
  background:#fff4ef;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;white-space:nowrap;vertical-align:2px}
.tl-promo b{margin-left:5px;font-variant-numeric:tabular-nums;color:#7d1d18}
.sq-meta{margin-top:6px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;
  font-size:11.5px;color:var(--mute);letter-spacing:.02em}
.sq-meta .sr{border:1px solid var(--line2);padding:1px 7px;color:var(--ink3);white-space:nowrap;
  max-width:150px;overflow:hidden;text-overflow:ellipsis}
.sq-meta .au{color:var(--ink3);white-space:nowrap}
.sq-meta .wc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:0;white-space:nowrap}
.sq-dcode{margin-top:10px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink3)}
.sq-dcode b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;color:var(--ink);
  letter-spacing:.04em}
.sq-dcode .cp{border:1px solid var(--line2);padding:3px 10px;font-size:12px;cursor:pointer;transition:all .2s}
.sq-dcode .cp:hover{border-color:var(--ink);color:var(--ink)}

/* ============================================================
   0709 可读性统一补丁区（老板屡批「文字太小·颜色太淡」·根治）
   立规：中文信息字 ≥13px、正文段 ≥15px、报错一律 var(--red-d)；
   ≤12px 只准给不承载信息的英文装饰（--mute-deco）。
   body 前缀提特异性，压住各 view_*.js 运行时注入的 <style>。
   ============================================================ */
/* 顶栏 / 首页 / 弹窗 */
body .tb-coin{font-size:13.5px}
body .tb-envnote{font-size:14px}
body .home-hint{font-size:14px}
body .wheel-item .en{color:var(--mute-deco)}
body .tlm-kicker{font-size:12px}
body .tlm-label{font-size:13.5px}
body .tlm-sub{font-size:15px}
body .tlm-note,body .wp-note{font-size:13.5px;color:var(--ink3)}
body .preset .u{font-size:12.5px}
/* 广场 */
body .sq-cs{font-size:14px}
body .sq-meta{font-size:12.5px}
body .sq-dterms{font-size:13.5px;color:var(--ink3)}
body .ship{font-size:12.5px}
body .sq-subcard .row{font-size:13.5px;color:rgba(255,255,255,.95)}
body .sq-acopy .tip{font-size:12.5px}
body .sq-acopy p{font-size:15px}
body .sq-ddesc p{font-size:15px}
body .sq-mega-facts{font-size:13.5px}
body .sq-physical .note{color:var(--red-d);font-size:13px}
/* 订阅页 */
body .sb-tdesc{font-size:14px}
body .sb-tier-note{font-size:13.5px;color:var(--ink3)}
body .sb-row .rt .m{font-size:13px}
body .sb-badge{font-size:12.5px}
body .sb-walletrow span{font-size:13px}
body .sb-gh .m,body .sb-draft .m{font-size:13px}
body .sb-fb-cnt,body .sb-inv-stats span,body .sb-prog .pl{font-size:13px}
body .sb-qa-a{font-size:15px}
body .sb-ink{color:var(--red-d)}
/* 问答中心 */
body .qa-a{font-size:15px}
body .qa-yn-head .s{font-size:13.5px}
body .qa-yn-note{font-size:13.5px;color:var(--ink3)}
body .qa-yn-eg .chip{font-size:13.5px}
body .qa-msg .cost{font-size:13px}
/* 创作台三页（studio / mo / sheng 旧页仍在售后场景可达） */
body .sg-tier .tg{color:var(--red-d)}
body .sg-tier .ds{font-size:13.5px;color:var(--ink3)}
body .st-quote .sub{font-size:13.5px;color:var(--ink3)}
body .st-planline{font-size:14px}
body .st-libnote{font-size:13.5px;color:var(--ink3)}
body .st-refchip{font-size:13.5px}
body .mo-precap{font-size:13.5px}
body .mo-st{font-size:13px}

/* ============================================================================
 * 移动版首页《七砖·印面》· 老板0715「移动版可重新设计一套更便于显示的新界面」
 * ----------------------------------------------------------------------------
 * 版面：报头（问候＋报头双线＋右上朱印）→ 一方赭红大印「写教案」（实底＋白内框＝印面·非 banner）
 *      → 2×2 四块纸白砖（各带淡墨「摹影声绘」水印）→ 两块窄砖（逛广场／我的订阅·朱丝栏封边）
 *      → 次级胶囊 2×2 → 落款。七个入口全部在首屏、零滚动、零 3D、零外链、零图片请求。
 * 语汇：三色宪法（米纸/赭红/墨黑）＋思源宋体＋直角(--r:2px)＋零 emoji。大字汉字退为水印只做气质，
 *      信息主体一律中文白话（老师认字不认字谜）；拼音/英文全删——9.5px 老师根本看不见，白占 15px/砖。
 * 🩸桌面零影响靠两条保证：① .m-home 默认 display:none，只在本 @media 内翻开；
 *   ② 本段所有规则都在 @media(max-width:760px) 内，且选择器一律限定 .m-home 与 .mh- / .tk 前缀，不复用桌面类名。
 *   桌面 .hero、.wheel、.home- 各件的 HTML 与 CSS 一个字未动。
 * ⚠️CSS 注释里【绝不能出现星号加斜杠】：写 .mh-* 加 /.tk* 这种通配串会当场闭合注释，
 *   后面的文字变成垃圾 CSS，并把紧随其后的下一条规则一起吞掉（本段就踩过：.m-home{display:none} 被吞，
 *   桌面因此渲出整块手机版面。A/B 对照才抓出来）。
 * ========================================================================== */
.m-home{display:none}
.mp-home-note{display:none}
html.tl-miniprogram .mp-hide{display:none!important}
html.tl-miniprogram .mp-home-note{display:block;margin-top:12px;padding:10px 12px;border-left:3px solid var(--accent);
  background:var(--paper2);color:var(--ink2);font-size:13px;line-height:1.65;letter-spacing:.02em}
html.tl-miniprogram #tlBar .tb-coin,html.tl-miniprogram #tlBar .tb-join{display:none!important}

@media (max-width:760px){
  /* 关掉桌面首页四件（JS 侧同步不给 iframe 赋 src，见 tl3-core.js _mountRing） */
  #view-home > .hero,
  #view-home > .home-hint,
  #view-home > .home-caps,
  #view-home > .home-launchpad,
  #view-home > .home-foot{display:none!important}

  /* #tlBar 是 position:fixed(:86)·手机实测 51px → 必须由 padding-top 让位；并解除桌面的 flex 居中 */
  #view-home{display:block;min-height:auto;padding:51px 0 0}
  body[data-view="home"]{background:var(--paper)}   /* --home-bg 灰只为配 Spline 场景底·环没了就回米纸 */
  body[data-view="home"] .tb-envwrap,
  body[data-view="home"] .tb-coin,
  body[data-view="home"] .tb-join{display:none}
  html{-webkit-text-size-adjust:100%}               /* iOS 大字号不放大 px → 垂直预算恒定不破版 */

  .m-home{display:block;
    --h-main:136px; --h-cell:98px; --h-wide:84px; --gap:10px;
    padding:12px 14px calc(78px + env(safe-area-inset-bottom));  /* 78＝云霓浮标净空·滚到底也不压次级入口 */
    background:radial-gradient(120% 60% at 92% 4%, rgba(23,20,16,.055) 0%, rgba(23,20,16,0) 58%),
               var(--paper)}
  .m-home *{min-width:0}

  /* 报头：双线一行画成（border-bottom 墨线 + box-shadow 副线） */
  .mh-head{position:relative;height:40px;padding-bottom:15px;
    border-bottom:1px solid var(--ink);box-shadow:0 3px 0 -2px var(--line2)}
  .mh-greet{font-family:var(--serif);font-weight:900;font-synthesis:none;font-size:18px;line-height:24px;
    letter-spacing:.04em;color:var(--ink);white-space:nowrap}
  .mh-logo{position:absolute;right:0;top:-1px;width:38px;height:38px;object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(23,20,16,.14))}
  /* 首屏·新用户免费试用提示条（自身即写教案入口·省一次点击） */
  .mh-trial{display:flex;align-items:center;gap:8px;margin-top:9px;padding:7px 12px;
    border:1px solid var(--line2);border-left:3px solid var(--accent);border-radius:var(--r);
    background:var(--paper2);text-decoration:none;
    transition:background .12s var(--ease),border-color .12s var(--ease)}
  .mh-trial:active{border-color:var(--accent);background:var(--paper3)}
  .mh-trial-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .mh-trial-tx{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:1.25;letter-spacing:.01em;
    color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mh-trial-cor{flex:none;width:12px;height:10px;fill:none;stroke:var(--accent);stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}

  /* 砖·通用（整块可点·:active 即时物理反馈·手机无 hover 不依赖 hover） */
  .tk{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
    border:1px solid var(--line2);border-radius:var(--r);padding:0 12px;
    background:radial-gradient(80% 100% at 100% 100%, rgba(193,68,54,.055) 0%, rgba(193,68,54,0) 70%),
               var(--paper2);
    transition:background .12s var(--ease),border-color .12s var(--ease),transform .12s var(--ease)}
  .tk:active{border-color:var(--ink);transform:scale(.985)}
  .tk-zh{font-family:var(--serif);font-weight:900;font-synthesis:none;color:var(--ink);
    letter-spacing:.04em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tk-sub{margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* 中文信息字 ≥13px（可读性铁律） */
  .tk-wm{position:absolute;right:-8px;bottom:-16px;font-family:var(--serif);font-weight:900;
    font-synthesis:none;font-size:62px;line-height:1;color:rgba(23,20,16,.055);
    pointer-events:none;user-select:none}
  .tk-cor{position:absolute;right:10px;top:10px;width:12px;height:10px;fill:none;
    stroke:var(--mute-deco);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

  /* ① 主印·写教案 347×136 ＝ 版面视觉主体（实底赭红＋白内框＝一方朱印） */
  .tk-main{height:var(--h-main);flex-direction:row;align-items:center;justify-content:space-between;
    gap:12px;padding:0 18px;margin-top:var(--gap);background:var(--red);border-color:var(--red-d)}
  .tk-main::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.3);
    pointer-events:none}
  .tk-main:active{background:var(--red-d);border-color:var(--red-d)}
  .tkm-txt{display:flex;flex-direction:column;min-width:0}
  .tk-main .tk-zh{font-size:32px;color:#fff;letter-spacing:.06em}
  .tk-main .tk-sub{margin-top:10px;font-size:13.5px;color:rgba(255,255,255,.94)}
  /* 明写字的实心按钮＝全屏唯一「一看就知道能按」的东西（老板骂的「入口进不去」多半是不知道那儿能点） */
  .tkm-cta{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;
    background:#fff;color:var(--red-d);border-radius:var(--r);font-size:15px;font-weight:700;
    letter-spacing:.06em;white-space:nowrap}
  .tkm-cta svg{width:12px;height:10px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .tk-main:active .tkm-cta{background:var(--paper3)}
  .tk-flag{position:absolute;right:0;top:0;background:#fff;color:var(--red-d);font-size:11px;
    font-weight:700;letter-spacing:.1em;padding:3px 8px;z-index:2}

  /* ②③④⑤ 四宫格：每格 168.5×98 ≫ 44×44(HIG) */
  .tk-grid4{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
  .tk-grid4 .tk{height:var(--h-cell);align-items:flex-start}
  .tk-grid4 .tk-zh{font-size:20px}

  /* ⑥⑦ 双联窄砖·朱丝栏封边（订阅＝真钱入口·走墨蓝 --accent 分族） */
  .tk-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
  .tk-grid2 .tk{height:var(--h-wide);align-items:flex-start;background:var(--paper3);
    border-left:3px solid var(--ink)}
  .tk-grid2 .tk-zh{font-size:19px}
  .tk-grid2 .tk-ink{border-left-color:var(--accent)}
  .tk-grid2 .tk-ink .tk-zh{color:var(--accent)}

  /* 次级胶囊 2×2 · 44 高达 HIG */
  .mh-caps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .mh-caps .cap{height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px;
    border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--ink2);
    font-size:13.5px;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mh-caps .cap:active{border-color:var(--ink);background:var(--paper3)}

  .mh-foot{margin-top:14px;height:44px;text-align:center}
  .mh-foot .b1{font-size:13px;line-height:18px;font-weight:600;letter-spacing:.5em;color:var(--ink2);
    padding-left:.5em}
  .mh-foot .b2{margin-top:8px;font-size:10.5px;line-height:14px;letter-spacing:.28em;color:var(--mute)}

  /* 20260812·微信宣发首页：先回答「是什么/先点哪」；主任务在前，能力全集折叠。 */
  .m-home{--h-main:124px;--h-wide:100px;padding-top:14px}
  .mh-head{height:58px;padding-right:52px;padding-bottom:10px}
  .mh-greet{font-size:20px;line-height:25px}
  .mh-kicker{margin-top:4px;font-family:var(--serif);font-size:13px;line-height:18px;
    letter-spacing:.16em;color:var(--red);white-space:nowrap}
  .mh-logo{top:3px;width:44px;height:44px}
  .mh-intro{margin-top:15px;font-family:var(--serif);font-size:20px;font-weight:900;line-height:1.45;
    color:var(--ink);letter-spacing:.025em}
  .mh-intro span{font-family:var(--sans);font-size:13.5px;font-weight:400;color:var(--ink3);letter-spacing:.02em}
  .mh-primary-grid{margin-top:var(--gap)}
  .mh-primary-grid .tk{height:var(--h-wide);padding-right:18px}
  .mh-primary-grid .tk-zh{font-size:18px}
  .mh-primary-grid .tk-sub{font-size:12.5px;white-space:normal;line-height:1.4}
  .mh-return{display:grid;grid-template-columns:42% 1fr;min-height:116px;margin-top:var(--gap);
    overflow:hidden;border:1px solid rgba(36,81,216,.22);background:#102b5d;color:#fff;text-decoration:none;
    box-shadow:0 12px 34px rgba(16,43,93,.12);transition:transform .12s var(--ease)}
  .mh-return:active{transform:scale(.988)}
  .mh-return>img{width:100%;height:100%;min-height:116px;object-fit:cover;object-position:63% center}
  .mh-return-copy{display:flex;flex-direction:column;justify-content:center;padding:14px 14px 13px}
  .mh-return-copy b{font-family:var(--serif);font-size:19px;line-height:1.25;letter-spacing:.04em}
  .mh-return-copy span{margin-top:7px;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.82)}
  .mh-return-copy em{margin-top:9px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;color:#ffd98a}
  .mh-more{margin-top:12px;border:1px solid var(--line2);background:var(--paper2)}
  .mh-more summary{min-height:48px;box-sizing:border-box;padding:14px 14px;font-size:14px;font-weight:700;
    letter-spacing:.08em;color:var(--ink2);cursor:pointer;list-style:none}
  .mh-more summary::-webkit-details-marker{display:none}
  .mh-more summary::after{content:"＋";float:right;color:var(--red);font-size:16px;line-height:1}
  .mh-more[open] summary::after{content:"－"}
  .mh-more .tk-grid4{margin:0;padding:0 10px 10px}
  .mh-more .tk-grid4 .tk{height:84px;background:var(--paper)}
  .mh-more .tk-grid4 .tk-zh{font-size:18px}
  .mh-caps{margin-top:12px}
}

/* 矮屏档：iOS 真实可视高远小于机型标称（375×812 机器地址栏展开只剩 635）→ 只降四个变量保七入口零滚动 */
@media (max-width:760px) and (max-height:700px){
  .m-home{--h-main:110px; --h-cell:82px; --h-wide:70px; --gap:8px}
  .m-home .tk-main .tk-zh{font-size:28px}
  .m-home .tk-grid4 .tk-zh{font-size:19px}
  .m-home .tk-wm{font-size:52px}
}

/* ---------- 版本说明 v1.001 beta（版本说明v1001·老板0716）：顶栏版本胶囊＋整体说明弹层 ---------- */
.tb-ver{border:1px solid var(--line2);background:transparent;color:var(--ink3);font-family:var(--sans);
  font-size:12px;font-weight:600;letter-spacing:.06em;padding:5px 11px;border-radius:999px;cursor:pointer;
  white-space:nowrap;flex:none;transition:border-color .2s,color .2s}
.tb-ver:hover{border-color:var(--ink);color:var(--ink)}
#tlModalCard:has(.vn-wrap){width:min(760px,94vw)}
.vn-wrap{margin-top:14px}
.vn-toc{display:flex;flex-wrap:wrap;gap:6px}
.vn-toc span{border:1px solid var(--line2);padding:3px 11px;font-size:12.5px;color:var(--ink3);
  cursor:pointer;border-radius:999px;transition:border-color .2s,color .2s}
.vn-toc span:hover{border-color:var(--ink);color:var(--ink)}
.vn-sec{margin-top:20px}
.vn-sec .h{font-size:15.5px;font-weight:800;letter-spacing:.04em;color:var(--ink);
  border-left:3px solid var(--red);padding-left:9px}
.vn-sec p{margin-top:9px;font-size:13.5px;line-height:1.95;color:var(--ink2)}
.vn-sec ul{margin:9px 0 0 19px}
.vn-sec li{font-size:13.5px;line-height:1.95;color:var(--ink2);margin-top:3px}
.vn-tbl{margin-top:10px;overflow-x:auto}
.vn-tbl table{border-collapse:collapse;width:100%;font-size:12.5px}
.vn-tbl th,.vn-tbl td{border:1px solid var(--line);padding:6px 9px;text-align:left;color:var(--ink2);line-height:1.6}
.vn-tbl th{background:var(--paper3);color:var(--ink);font-weight:700;white-space:nowrap}
.vn-fb{border:1px solid var(--ink);background:transparent;color:var(--ink);padding:4px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.vn-fb:hover{background:var(--ink);color:#fff}
.vn-date{margin-top:22px;font-size:12px;color:var(--mute);letter-spacing:.12em;text-align:center}
@media(max-width:760px){
  .tb-ver{padding:4px 8px;font-size:10.5px;letter-spacing:.02em}
  /* 手机顶栏寸土寸金（0715 折行血泪·返回键与真钱键不容侵占）：胶囊只留首页；
     广场/订阅/问答有「返回」键的窄顶栏不加塞——创作台移动端走六台自己的版本胶囊入口 */
  body[data-view="square"] .tb-ver,body[data-view="subscribe"] .tb-ver,
  body[data-view="qa"] .tb-ver,body[data-view="create"] .tb-ver{display:none}
  .vn-tbl th,.vn-tbl td{white-space:nowrap}
}

/* ---------- 20260818·首页五入口任务枢纽 ---------- */
body[data-view="home"]{background:var(--paper)}
#view-home{display:flex;min-height:100vh;min-height:100dvh;align-items:center;justify-content:center;
  padding:78px clamp(18px,4vw,58px) 24px;background:
  radial-gradient(circle at 84% 13%,rgba(36,53,112,.085),transparent 27%),
  radial-gradient(circle at 8% 88%,rgba(193,68,54,.075),transparent 30%),var(--paper)}
.home-hub{width:min(1180px,100%);min-width:0;margin:0 auto}
.home-hub-head{position:relative;max-width:760px;margin-bottom:24px;padding-left:18px;border-left:3px solid var(--red)}
.home-hub-brand{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.22em;color:var(--ink2)}
.home-hub-brand img{width:24px;height:24px;object-fit:contain}
.home-hub-kicker{margin-top:17px;font-size:10.5px;font-weight:600;letter-spacing:.34em;color:var(--mute)}
.home-hub-head h1{margin-top:7px;font-family:var(--serif);font-size:clamp(31px,4vw,52px);font-weight:900;
  line-height:1.16;letter-spacing:.035em;color:var(--ink)}
.home-hub-head p{margin-top:9px;font-size:15px;line-height:1.75;color:var(--ink3)}
.home-hub-actions{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:14px;min-width:0}
.home-action{position:relative;min-width:0;overflow:hidden;border:1px solid var(--line2);background:rgba(255,255,255,.68);
  padding:23px 24px 20px;display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);
  box-shadow:0 12px 34px rgba(31,27,20,.045);transition:transform .22s var(--ease),border-color .22s,box-shadow .22s}
.home-action:hover,.home-action:focus-visible{transform:translateY(-3px);border-color:var(--ink3);
  box-shadow:0 18px 42px rgba(31,27,20,.1);outline:none}
.home-action-en{position:relative;z-index:1;font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--mute)}
.home-action strong{position:relative;z-index:1;margin-top:10px;font-family:var(--serif);font-size:27px;
  line-height:1.2;letter-spacing:.06em}
.home-action-copy{position:relative;z-index:1;margin-top:9px;max-width:31em;font-size:13.5px;line-height:1.7;color:var(--ink3)}
.home-action-go{position:relative;z-index:1;margin-top:auto;padding-top:17px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--accent)}
.home-action-go svg{width:18px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6}
.home-action-mark{position:absolute;right:-5px;bottom:-31px;font-family:var(--serif);font-size:118px;font-weight:900;
  line-height:1;color:rgba(23,20,16,.035);pointer-events:none}
.home-action--primary{min-height:414px;padding:38px 40px 34px;background:linear-gradient(145deg,#bd4033,#9f2d24);
  border-color:#9f2d24;color:#fff;box-shadow:0 20px 52px rgba(159,45,36,.17)}
.home-action--primary:hover,.home-action--primary:focus-visible{border-color:#7f211a;box-shadow:0 24px 58px rgba(159,45,36,.25)}
.home-action--primary .home-action-en{color:rgba(255,255,255,.72)}
.home-action--primary strong{margin-top:18px;font-size:clamp(39px,5vw,64px);letter-spacing:.08em}
.home-action--primary .home-action-copy{margin-top:16px;max-width:29em;font-size:16px;line-height:1.85;color:rgba(255,255,255,.88)}
.home-action--primary .home-action-go{font-size:14px;color:#fff}
.home-action--primary .home-action-mark{right:-10px;bottom:-44px;font-size:230px;color:rgba(255,255,255,.075)}
.home-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;min-width:0}
.home-action-grid .home-action{min-height:200px}
.home-action--square{border-top:3px solid var(--accent)}
.home-action--qa{border-top:3px solid var(--ink)}
.home-action--member{border-top:3px solid var(--gold)}
.home-action--invite{border-top:3px solid #6d4b91}
.home-hub .home-foot{margin-top:20px;text-align:center}
.home-hub .home-foot::before{width:22px;height:22px;margin-bottom:8px}
.home-hub .home-foot .b1{font-size:12px}
.home-hub .home-foot .b2{margin-top:6px;font-size:9.5px}
html.tl-miniprogram .home-action--primary,html.tl-miniprogram .home-action--member,
html.tl-miniprogram .home-action--invite{display:none}
html.tl-miniprogram .home-hub-actions{display:block}
html.tl-miniprogram .home-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(max-width:980px){
  #view-home{align-items:flex-start;padding-top:76px}
  .home-hub-actions{grid-template-columns:1fr}
  .home-action--primary{min-height:230px}
  .home-action-grid .home-action{min-height:180px}
}
@media(max-width:760px){
  #view-home{display:flex;min-height:100vh;min-height:100dvh;padding:68px 14px 22px}
  .home-hub-head{margin-bottom:15px;padding-left:12px}
  .home-hub-brand{font-size:12px;letter-spacing:.16em}
  .home-hub-brand img{width:21px;height:21px}
  .home-hub-kicker{margin-top:10px;font-size:8.5px;letter-spacing:.22em}
  .home-hub-head h1{margin-top:5px;font-size:29px;line-height:1.18}
  .home-hub-head p{margin-top:6px;font-size:13px;line-height:1.55}
  .home-hub-actions{gap:9px}
  .home-action{padding:15px 15px 13px}
  .home-action--primary{min-height:158px;padding:20px 21px 18px}
  .home-action--primary strong{margin-top:8px;font-size:36px}
  .home-action--primary .home-action-copy{margin-top:7px;max-width:27em;font-size:13px;line-height:1.55}
  .home-action--primary .home-action-go{padding-top:10px;font-size:12px}
  .home-action--primary .home-action-mark{right:-7px;bottom:-28px;font-size:146px}
  .home-action-grid{gap:9px}
  .home-action-grid .home-action{min-height:137px}
  .home-action-en{font-size:8.5px;letter-spacing:.14em}
  .home-action strong{margin-top:7px;font-size:22px}
  .home-action-copy{margin-top:5px;font-size:11.5px;line-height:1.5}
  .home-action-go{padding-top:9px;font-size:10.5px;letter-spacing:.04em}
  .home-action-go svg{width:15px}
  .home-action-mark{right:-3px;bottom:-18px;font-size:82px}
  .home-hub .home-foot{margin-top:13px}
  .home-hub .home-foot::before{display:none}
  .home-hub .home-foot .b1{font-size:11px;letter-spacing:.45em;padding-left:.45em}
  .home-hub .home-foot .b2{font-size:8px;letter-spacing:.16em}
}
@media(max-width:360px){
  .home-action-grid{grid-template-columns:1fr}
  .home-action-grid .home-action{min-height:118px}
}