/*
 * Styles for the hufu-theme/patpatdots block.
 *
 * 本文件是原型 patpatdots.html 里那段 <style>（15–1492 行）的移植版。规则本身
 * 逐字保留 —— 原型是叠了 layout-v3 → v9 五层覆盖写出来的，见 render.php 顶部
 * 那条警告，把它们"整理"成一层会静默改变某些章节的样子。
 *
 * 相对原型只做了三件事：
 *   1. 给所有裸选择器加 .patpatdots-page 作用域（原文件是单页，裸选择器无所谓；
 *      进了主题会污染整站）。:root 收成 .patpatdots-page，html 收成
 *      html:has(.patpatdots-page)。
 *   2. 删掉已确认的死代码（DOM 里没有、view.js 也不生成的类，共 161 个选择器）。
 *   3. html 上那条 background:var(--ink) 去掉 —— .patpatdots-page 自己已有一份，
 *      留着会把整站底色刷黑。
 *
 * 五条这个仓库反复踩过的坑：
 *
 * 1. 改完本文件必须抬 block.json 的 version。file: 形式的 style 走的是
 *    wp_register_style 的 ?ver=，那个值取自 block.json 的 version 字段；
 *    旁边放一个 style.asset.php 是完全没用的 —— 它只对 index.js / view.js 那种
 *    "脚本" 生效，样式不走这条路。
 *
 * 2. 本主题沿用 Twenty Twenty-Five，没有全局的 box-sizing: border-box。
 *    这里凡是同时有 width 和 padding/border 的地方都得自己写。
 *
 * 3. 注释里不要出现星号加斜杠那个组合，它会把注释提前结束，然后解析器会把
 *    下一条规则整条吞掉，而且哪儿都不报错。
 *
 * 4. 所有视觉和尺寸规则挂 .patpatdots-page，不挂 .wp-block-hufu-theme-patpatdots。
 *    编辑器里 useBlockProps() 的包装元素和 render.php 的输出会同时带上后者，
 *    写在那儿会生效两次。
 *
 * 5. 原型的字号大量用 clamp() 配 vw/svh。区块在全宽下大致等价，但这些值是按
 *    "整页只有它" 调的；窄屏形态另有 @media 覆盖，改动时两边一起看。
 *
 * 还有一条不是"坑"但容易看漏：原型的 .patpatdots-page{overflow-x:hidden} 让这个
 * 元素成了滚动容器（一个轴 hidden、另一个轴 visible 会计算成 auto）。这是原样
 * 搬过来的，改动前先确认依赖它的那几条布局。
 */

.patpatdots-page{
      --ink:#0a0a0b;
      --ink-2:#151519;
      --paper:#f2efe6;
      --white:#fbfaf5;
      --text:#171815;
      --muted:rgba(255,255,255,.61);
      --line:rgba(255,255,255,.16);
      --paper-line:rgba(17,18,15,.14);
      --lime:#ddff62;
      --coral:#ff725f;
      --sky:#71c8ff;
      --lilac:#c5a7ff;
      --mint:#7be4bf;
      --yellow:#ffd75d;
      --pink:#ff9ac9;
      --ease:cubic-bezier(.2,.78,.2,1);
    }
.patpatdots-page,
.patpatdots-page *{box-sizing:border-box}
html:has(.patpatdots-page){scroll-behavior:smooth}
.patpatdots-page{margin:0;overflow-x:hidden;background:var(--ink);color:var(--white);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
.patpatdots-page button,
.patpatdots-page a{font:inherit;color:inherit}
.patpatdots-page button{cursor:pointer}
.patpatdots-page a{text-decoration:none}
.patpatdots-page img{display:block;max-width:100%}
.patpatdots-page :focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.patpatdots-page .shell{width:min(1320px,calc(100% - 48px));margin:0 auto}
.patpatdots-page .brand{font-size:15px;font-weight:950;letter-spacing:-.03em}
.patpatdots-page .brand i{font-style:normal;color:var(--lime)}
.patpatdots-page .nav{display:flex;align-items:center;gap:23px}
.patpatdots-page .nav a{font-size:10px;font-weight:850;letter-spacing:.08em;color:rgba(255,255,255,.68)}
.patpatdots-page .nav a:hover{color:#fff}
.patpatdots-page .nav .nav-cta{padding:10px 15px;border-radius:999px;background:var(--lime);color:#11120f}
.patpatdots-page .hero{min-height:100svh;position:relative;display:grid;align-items:end;padding:130px 0 34px;overflow:hidden;background:radial-gradient(circle at 67% 43%,#2a2731 0,#15151a 32%,#0a0a0b 68%)}
.patpatdots-page .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,11,.78) 0,rgba(10,10,11,.25) 52%,rgba(10,10,11,.04)),linear-gradient(0deg,rgba(10,10,11,.88),transparent 38%);pointer-events:none}
.patpatdots-page .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,640px) minmax(360px,1fr);gap:44px;align-items:end}
.patpatdots-page .eyebrow{margin:0 0 18px;color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.19em;text-transform:uppercase}
.patpatdots-page .hero h1{margin:0;font-size:clamp(58px,8.2vw,118px);line-height:.87;letter-spacing:-.075em;text-wrap:balance}
.patpatdots-page .hero-lead{max-width:590px;margin:27px 0 0;color:rgba(255,255,255,.74);font-size:clamp(16px,1.45vw,20px);line-height:1.68}
.patpatdots-page .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.patpatdots-page .pill,
.patpatdots-page .pill-ghost{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:999px;border:0;font-size:12px;font-weight:900}
.patpatdots-page .pill{background:var(--lime);color:#11120f}
.patpatdots-page .pill-ghost{border:1px solid var(--line);background:rgba(255,255,255,.055)}
.patpatdots-page .hero-shot{position:relative;min-height:650px;border:1px solid rgba(255,255,255,.2);border-radius:32px;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))}
.patpatdots-page .hero-shot::before,
.patpatdots-page .media-blank::before{content:"";position:absolute;inset:22px;border:1px solid rgba(255,255,255,.1);pointer-events:none}
.patpatdots-page .hero-strip{position:relative;z-index:2;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.patpatdots-page .hero-strip div{padding:15px;border-right:1px solid var(--line)}
.patpatdots-page .hero-strip div:last-child{border:0}
.patpatdots-page .hero-strip small{display:block;color:rgba(255,255,255,.46);font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .hero-strip strong{display:block;margin-top:5px;font-size:11px}
/* V10 — optional hero film between the cover and the intro copy. The frame is
   the hufu-theme/media-player block, so radius, 16:9 crop, shadow and 3D hover
   are the same ones used on the homepage. Only its width/spacing is set here. */
.patpatdots-page .hero-video{position:relative;padding:clamp(56px,7vw,104px) 0 clamp(24px,3vw,48px);background:var(--cream,#f5f1e7);color:var(--charcoal,#171815)}
.patpatdots-page .hero-video .wp-block-hufu-theme-media-player{width:min(100%,1120px);margin:0 auto;background:var(--cream,#f5f1e7)}
.patpatdots-page .section{padding:128px 0}
.patpatdots-page .dark{background:var(--ink)}
.patpatdots-page .paper{background:var(--paper);color:var(--text)}
.patpatdots-page .soft{background:#17171b}
.patpatdots-page .lime{background:var(--lime);color:#11120f}
.patpatdots-page .section-head{display:grid;grid-template-columns:150px minmax(0,840px);gap:26px;margin-bottom:52px}
.patpatdots-page .section-index{color:var(--lime);font-size:10px;font-weight:900;letter-spacing:.17em}
.patpatdots-page .paper .section-index,
.patpatdots-page .lime .section-index{color:#59603f}
.patpatdots-page .section-head h2{margin:0;font-size:clamp(42px,6vw,84px);line-height:.95;letter-spacing:-.062em;text-wrap:balance}
.patpatdots-page .section-head p{max-width:700px;margin:20px 0 0;color:var(--muted);font-size:16px;line-height:1.7}
.patpatdots-page .paper .section-head p,
.patpatdots-page .lime .section-head p{color:#62645e}
.patpatdots-page .micro-copy{font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.patpatdots-page .media-stack{display:grid;gap:22px}
.patpatdots-page .media-slot{margin:0;border:1px solid var(--line);border-radius:30px;overflow:hidden;background:#111114}
.patpatdots-page .paper .media-slot{border-color:var(--paper-line);background:#e2dfd5}
.patpatdots-page .media-blank{position:relative;min-height:min(70vw,780px);overflow:hidden;background:linear-gradient(135deg,#26262c,#111115 58%,#202127)}
.patpatdots-page .paper .media-blank{background:linear-gradient(135deg,#e7e3d8,#c9c7be)}
.patpatdots-page .media-blank.tall{min-height:760px}
.patpatdots-page .media-blank.medium{min-height:560px}
.patpatdots-page .media-blank.wide{aspect-ratio:16/9;min-height:0}
.patpatdots-page .frame-number{position:absolute;right:26px;top:18px;color:rgba(255,255,255,.09);font-size:clamp(90px,18vw,250px);font-weight:950;line-height:1;letter-spacing:-.08em}
.patpatdots-page .paper .frame-number{color:rgba(17,18,15,.075)}
.patpatdots-page figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);gap:28px;padding:27px 29px;border-top:1px solid var(--line)}
.patpatdots-page .paper figcaption{border-color:var(--paper-line);background:#fbfaf5}
.patpatdots-page .public-copy small{display:block;margin-bottom:11px;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.16em}
.patpatdots-page .paper .public-copy small{color:#676e4e}
.patpatdots-page .public-copy h3{margin:0;font-size:clamp(27px,3.3vw,44px);line-height:1.02;letter-spacing:-.05em}
.patpatdots-page .public-copy p{max-width:680px;margin:14px 0 0;color:var(--muted);font-size:13px;line-height:1.65}
.patpatdots-page .paper .public-copy p{color:#666960}
.patpatdots-page .triptych{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:10px}
.patpatdots-page .triptych .media-slot{border-radius:24px}
.patpatdots-page .triptych .media-blank{min-height:510px}
.patpatdots-page .triptych figcaption{display:block;padding:20px}
.patpatdots-page .triptych .public-copy h3{font-size:27px}
.patpatdots-page .play-stage{position:relative;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:#0e0e11}
.patpatdots-page .stage-visual{position:relative;min-height:720px;display:grid;grid-template-columns:1fr minmax(300px,470px) 1fr;align-items:center;padding:50px;overflow:hidden}
.patpatdots-page .stage-visual canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.patpatdots-page .stage-copy-left,
.patpatdots-page .stage-copy-right{position:relative;z-index:5;align-self:end;padding-bottom:12px}
.patpatdots-page .stage-copy-right{justify-self:end;text-align:right}
.patpatdots-page .stage-copy-left small,
.patpatdots-page .stage-copy-right small{display:block;color:rgba(255,255,255,.42);font-size:8px;font-weight:900;letter-spacing:.16em}
.patpatdots-page .stage-copy-left strong,
.patpatdots-page .stage-copy-right strong{display:block;margin-top:8px;font-size:13px}
.patpatdots-page .wearable-figure{position:relative;z-index:4;width:330px;height:610px;margin:auto}
.patpatdots-page .stage-status{position:absolute;left:24px;right:24px;bottom:22px;z-index:15;display:flex;justify-content:center;pointer-events:none}
.patpatdots-page .stage-status span{padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(10,10,11,.72);backdrop-filter:blur(12px);font-size:10px;font-weight:850;letter-spacing:.08em}
.patpatdots-page .mode-controls{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.patpatdots-page .mode-button{min-height:130px;padding:20px;border:0;border-right:1px solid var(--line);background:#151519;color:#fff;text-align:left}
.patpatdots-page .mode-button:last-child{border-right:0}
.patpatdots-page .mode-button[aria-pressed="true"]{background:var(--mode-color);color:#11120f}
.patpatdots-page .mode-button small{font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .mode-button strong{display:block;margin-top:30px;font-size:22px;letter-spacing:-.04em}
.patpatdots-page .mode-button span{display:block;margin-top:7px;color:rgba(255,255,255,.5);font-size:10px}
.patpatdots-page .mode-button[aria-pressed="true"] span{color:rgba(17,18,15,.62)}
.patpatdots-page .stage-explain{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-top:1px solid var(--line);background:var(--line)}
.patpatdots-page .stage-explain article{padding:27px;background:#111114}
.patpatdots-page .stage-explain small{color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .stage-explain h3{margin:13px 0 0;font-size:28px;letter-spacing:-.05em}
.patpatdots-page .stage-explain p{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.patpatdots-page .scene-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.patpatdots-page .scene-grid .media-blank{min-height:650px}
.patpatdots-page .scene-grid .media-slot:nth-child(3){grid-column:1/-1}
.patpatdots-page .scene-grid .media-slot:nth-child(3) .media-blank{min-height:760px}
.patpatdots-page .five-strip{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.patpatdots-page .five-strip article{min-height:250px;padding:22px;border-right:1px solid var(--line);background:#121216}
.patpatdots-page .five-strip article:last-child{border:0}
.patpatdots-page .five-strip span{color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .five-strip h3{margin:88px 0 0;font-size:25px;letter-spacing:-.045em}
.patpatdots-page .five-strip p{margin:11px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.patpatdots-page .party-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:12px}
.patpatdots-page .party-feature .media-blank{min-height:780px}
.patpatdots-page .party-lab{display:flex;flex-direction:column;padding:28px;border:1px solid var(--paper-line);border-radius:28px;background:#fbfaf5}
.patpatdots-page .party-lab-head small{font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .party-lab-head h3{margin:12px 0 0;font-size:36px;letter-spacing:-.055em}
.patpatdots-page .party-lab-head p{margin:12px 0 0;color:#686b62;font-size:12px;line-height:1.6}
.patpatdots-page .party-people{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:28px 0}
.patpatdots-page .person{position:relative;min-height:118px;display:grid;place-items:center;border:1px solid var(--paper-line);border-radius:18px;background:#eeece4;transition:transform .35s var(--ease),background .35s}
.patpatdots-page .person.grouped{transform:translateY(-6px);background:#e5e1d7}
.patpatdots-page .person-shape{position:relative;width:42px;height:72px;border-radius:20px 20px 13px 13px;background:#2a2a2e}
.patpatdots-page .person-shape::before{content:"";position:absolute;width:27px;height:27px;left:7px;top:-18px;border-radius:50%;background:#2a2a2e}
.patpatdots-page .person-dot{position:absolute;width:31px;height:31px;right:-11px;top:20px;border:4px solid #fff;border-radius:50%;background:var(--guest-color,var(--coral));box-shadow:0 0 18px var(--guest-color,var(--coral))}
.patpatdots-page .person-label{position:absolute;left:8px;right:8px;bottom:8px;color:#676960;font-size:8px;font-weight:850;text-align:center}
.patpatdots-page .lab-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.patpatdots-page .lab-actions button{min-height:47px;border:0;border-radius:999px;background:#19191c;color:#fff;font-size:10px;font-weight:900}
.patpatdots-page .lab-actions button:first-child{background:var(--lime);color:#11120f}
.patpatdots-page .accordion-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 25px 25px;color:#60635b;font-size:12px;line-height:1.65}
.patpatdots-page .accordion-content b{display:block;margin-bottom:6px;color:#171815;font-size:10px;letter-spacing:.1em}
.patpatdots-page .wide-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.patpatdots-page .wide-pair .media-blank{min-height:650px}
.patpatdots-page .wip{color:var(--coral)!important}
.patpatdots-page .cta{min-height:78svh;display:grid;place-items:center;padding:110px 0;text-align:center;background:radial-gradient(circle at 50% 50%,#2b2932,#0a0a0b 65%)}
.patpatdots-page .cta h2{max-width:1080px;margin:0 auto;font-size:clamp(60px,9vw,132px);line-height:.86;letter-spacing:-.075em}
.patpatdots-page .cta p{max-width:620px;margin:27px auto 0;color:var(--muted);font-size:16px;line-height:1.65}
.patpatdots-page .cta .hero-actions{justify-content:center}
.patpatdots-page .interest-form{padding:72px 0 88px;background:#0f1014;color:#fff}
.patpatdots-page .interest-form-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:52px;align-items:start}
.patpatdots-page .interest-form-intro h2{max-width:520px;margin:0;font-size:clamp(38px,5.6vw,76px);line-height:.94;letter-spacing:-.06em}
.patpatdots-page .interest-form-intro p{max-width:430px;margin:20px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.patpatdots-page .interest-form form{display:grid;gap:14px}
.patpatdots-page .interest-form-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.patpatdots-page .interest-form label{display:grid;gap:7px;color:rgba(255,255,255,.62);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.patpatdots-page .interest-form input,
.patpatdots-page .interest-form select,
.patpatdots-page .interest-form textarea{width:100%;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;padding:13px 14px;font:inherit;font-size:13px;outline:none}
.patpatdots-page .interest-form input:focus,
.patpatdots-page .interest-form select:focus,
.patpatdots-page .interest-form textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(221,255,98,.14)}
.patpatdots-page .interest-form select option{background:#17181d;color:#fff}
.patpatdots-page .interest-form textarea{min-height:126px;resize:vertical}
.patpatdots-page .interest-form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.patpatdots-page .interest-form button{min-height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--lime);color:#11120f;font-size:11px;font-weight:900;letter-spacing:.04em}
.patpatdots-page .interest-form-status{margin:0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.5}
@media(max-width:760px){.patpatdots-page .interest-form{padding:58px 0 70px}
.patpatdots-page .interest-form-grid{grid-template-columns:1fr;gap:32px}
.patpatdots-page .interest-form-fields{grid-template-columns:1fr}}
.patpatdots-page footer{display:flex;justify-content:space-between;gap:20px;padding:28px;border-top:1px solid var(--line);color:rgba(255,255,255,.46);font-size:9px;font-weight:850;letter-spacing:.12em}
.patpatdots-page .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--ease)}
.patpatdots-page .reveal.visible{opacity:1;transform:none}
.patpatdots-page .signal-visual{position:relative;min-height:680px;overflow:hidden;background:radial-gradient(circle at 72% 44%,rgba(197,167,255,.12),transparent 28%),linear-gradient(135deg,#09090c,#15151b)}
.patpatdots-page .signal-reserve{display:grid;align-content:end;padding:30px}
.patpatdots-page .signal-readout{display:grid;grid-template-columns:minmax(220px,.7fr) 1fr auto;align-items:center;gap:26px;padding:22px 26px;border-top:1px solid var(--line);background:#101014}
.patpatdots-page .signal-readout small{display:block;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.16em}
.patpatdots-page .signal-readout strong{display:block;margin-top:7px;font-size:22px;letter-spacing:-.04em}
.patpatdots-page .signal-readout p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.patpatdots-page .signal-readout button{min-height:43px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);font-size:10px;font-weight:900}
.patpatdots-page .play-map-compact{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;border:1px solid var(--line);border-radius:24px;overflow:hidden}
.patpatdots-page .play-map-compact article{min-height:220px;padding:22px;border-right:1px solid var(--line);background:#121216}
.patpatdots-page .play-map-compact article:last-child{border:0}
.patpatdots-page .play-map-compact span{color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.14em}
.patpatdots-page .play-map-compact h3{margin:76px 0 0;font-size:26px;letter-spacing:-.045em}
.patpatdots-page .play-map-compact p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.patpatdots-page .together-compact{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(270px,.7fr) minmax(320px,1fr);gap:24px;align-items:center;margin-top:12px;padding:26px;border:1px solid var(--line);border-radius:24px;background:#1b1b20}
.patpatdots-page .together-title small{color:var(--coral);font-size:8px;font-weight:900;letter-spacing:.14em}
.patpatdots-page .together-title h3{margin:12px 0 0;font-size:30px;line-height:1.02;letter-spacing:-.05em}
.patpatdots-page .together-title p{margin:12px 0 0;color:var(--muted);font-size:11px;line-height:1.6}
.patpatdots-page .guest-dots{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.patpatdots-page .guest-dot{aspect-ratio:1;border:5px solid #efeee8;border-radius:48% 52% 46% 54%;background:var(--guest-color);box-shadow:0 0 20px color-mix(in srgb,var(--guest-color),transparent 38%);transition:transform .25s var(--ease),background .25s}
.patpatdots-page .guest-dot:hover{transform:translateY(-5px) scale(1.04)}
.patpatdots-page .together-compact details{border-left:1px solid var(--line);padding-left:24px}
.patpatdots-page .together-compact summary{list-style:none;display:flex;justify-content:space-between;gap:18px;cursor:pointer;font-size:11px;font-weight:900}
.patpatdots-page .together-compact summary::-webkit-details-marker{display:none}
.patpatdots-page .together-compact summary i{font-style:normal;font-size:20px;transition:transform .25s}
.patpatdots-page .together-compact details[open] summary i{transform:rotate(45deg)}
.patpatdots-page .together-details{display:grid;gap:10px;margin-top:16px}
.patpatdots-page .together-details p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}
.patpatdots-page .together-details b{color:white}
.patpatdots-page .movement-band{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-top:12px;padding:30px;border:1px solid var(--line);border-radius:24px;background:#19191e}
.patpatdots-page .movement-band small{color:var(--yellow);font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .movement-band h3{margin:14px 0 0;font-size:34px;letter-spacing:-.05em}
.patpatdots-page .movement-band p{margin:13px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.patpatdots-page .movement-route{display:flex;justify-content:center;align-items:center;gap:18px;min-height:150px}
.patpatdots-page .movement-route i{width:42px;height:42px;border:5px solid #eeeDE7;border-radius:50%;background:var(--yellow);box-shadow:0 0 24px rgba(255,215,93,.55)}
.patpatdots-page .movement-route i:nth-child(2),
.patpatdots-page .movement-route i:nth-child(5){transform:translateY(-32px)}
.patpatdots-page .movement-route i:nth-child(3),
.patpatdots-page .movement-route i:nth-child(6){transform:translateY(24px)}
.patpatdots-page .evidence-list{border-top:1px solid var(--paper-line)}
.patpatdots-page .evidence-list details{border-bottom:1px solid var(--paper-line)}
.patpatdots-page .evidence-list summary{list-style:none;display:grid;grid-template-columns:60px minmax(150px,.55fr) 1fr auto;gap:22px;align-items:center;min-height:92px;cursor:pointer}
.patpatdots-page .evidence-list summary::-webkit-details-marker{display:none}
.patpatdots-page .evidence-list summary span{color:#69704f;font-size:9px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .evidence-list summary strong{font-size:22px;letter-spacing:-.035em}
.patpatdots-page .evidence-list summary em{color:#666960;font-size:12px;font-style:normal}
.patpatdots-page .evidence-list summary i{font-size:22px;font-style:normal;transition:transform .25s}
.patpatdots-page .evidence-list details[open] summary i{transform:rotate(45deg)}
.patpatdots-page .evidence-list details>div{padding:0 50px 24px 82px;color:#62655d;font-size:12px;line-height:1.65}
.patpatdots-page .evidence-list details p{margin:0}
.patpatdots-page .evidence-list details a{display:inline-block;margin-top:10px;color:#171815;font-weight:900;text-decoration:underline;text-underline-offset:4px}
.patpatdots-page .evidence-boundary{margin:20px 0 0;padding:17px;border:1px solid var(--paper-line);border-radius:15px;color:#676960;font-size:11px;line-height:1.6}
.patpatdots-page .app-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:12px}
.patpatdots-page .app-steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.patpatdots-page .app-steps article{min-height:270px;padding:24px;border:1px solid var(--line);border-radius:24px;background:#151519}
.patpatdots-page .app-steps span{color:var(--lime);font-size:9px;font-weight:900}
.patpatdots-page .app-steps h3{margin:100px 0 0;font-size:25px;letter-spacing:-.045em}
.patpatdots-page .app-steps p{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.55}
.patpatdots-page .spec-table{margin-top:14px;border-top:1px solid var(--paper-line)}
.patpatdots-page .spec-table>div{display:grid;grid-template-columns:240px 1fr;gap:24px;min-height:72px;align-items:center;border-bottom:1px solid var(--paper-line)}
.patpatdots-page .spec-table b{font-size:13px}
.patpatdots-page .spec-table span{color:#666960;font-size:11px;line-height:1.55}
.patpatdots-page .packages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.patpatdots-page .packages article{min-height:390px;display:flex;flex-direction:column;padding:27px;border:1px solid var(--line);border-radius:26px;background:#17171b}
.patpatdots-page .packages article:nth-child(1){background:var(--lime);color:#11120f}
.patpatdots-page .packages article:nth-child(3){background:#f0c7dd;color:#11120f}
.patpatdots-page .packages small{font-size:8px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .packages h3{margin:94px 0 0;font-size:32px;line-height:1.02;letter-spacing:-.05em}
.patpatdots-page .packages p{margin:15px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.patpatdots-page .packages article:nth-child(1) p,
.patpatdots-page .packages article:nth-child(3) p{color:rgba(17,18,15,.64)}
.patpatdots-page .packages strong{margin-top:auto;padding-top:28px;font-size:13px}
.patpatdots-page .act-start .section-index::before{content:attr(data-act);display:block;margin-bottom:10px;color:var(--coral);font-size:8px;letter-spacing:.18em}
.patpatdots-page .paper.act-start .section-index::before{color:#985a4f}
.patpatdots-page .living-stage{--stage-opacity:.86;--scroll-opacity:1;--stage-left:45vw;--stage-right:18px;--stage-top:82px;--stage-height:calc(100svh - 100px);position:fixed;z-index:7;left:var(--stage-left);right:var(--stage-right);top:var(--stage-top);height:var(--stage-height);max-height:900px;overflow:hidden;border:1px solid transparent;border-radius:34px;background:transparent;box-shadow:none;backdrop-filter:none;pointer-events:none;opacity:calc(var(--stage-opacity) * var(--scroll-opacity));transition:opacity .28s ease,background .4s ease,border-color .4s ease,box-shadow .4s ease;contain:layout paint}
.patpatdots-page .living-stage[data-depth="quiet"]{z-index:3}
.patpatdots-page .living-stage[data-depth="media"]{z-index:7}
.patpatdots-page .living-stage[data-depth="focus"]{z-index:9}
.patpatdots-page .living-stage[data-section="tap"]{--stage-opacity:1;border-color:rgba(255,255,255,.12);background:radial-gradient(circle at 50% 48%,rgba(197,167,255,.14),transparent 44%),rgba(9,9,12,.74);box-shadow:0 24px 90px rgba(0,0,0,.28),inset 0 0 80px rgba(255,255,255,.018);backdrop-filter:blur(13px)}
.patpatdots-page .living-stage[data-section="evidence"]{--stage-opacity:.48}
.patpatdots-page .living-stage[data-section="design"],
.patpatdots-page .living-stage[data-section="shop"],
.patpatdots-page .living-stage[data-section="kit"]{--stage-opacity:.92}
.patpatdots-page .living-signal{position:absolute;inset:0;width:100%;height:100%}
.patpatdots-page .living-node{--node-color:var(--lime);position:absolute;z-index:4;left:var(--tx);top:var(--ty);width:var(--node-size,72px);height:var(--node-size,72px);padding:0;transform:translate(-50%,-50%);border:7px solid #deddd7;border-radius:46% 54% 48% 52%;background:radial-gradient(circle at 31% 24%,#777982 0 4%,#373941 23%,#17181d 66%,#08090c 100%);box-shadow:0 19px 31px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.3);pointer-events:auto;transition:transform .22s var(--ease),filter .3s ease,box-shadow .3s ease;will-change:left,top,width,height,transform}
.patpatdots-page .living-node::before{content:"";position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0 5%,var(--node-color) 18%,color-mix(in srgb,var(--node-color),#111 38%) 72%);box-shadow:0 0 24px color-mix(in srgb,var(--node-color),transparent 30%);opacity:.64;transition:opacity .18s,transform .18s,box-shadow .18s}
.patpatdots-page .living-node::after{content:attr(data-index);position:absolute;right:-8px;bottom:-7px;width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.34);border-radius:50%;background:#111218;color:#fff;font-size:7px;font-weight:950}
.patpatdots-page .living-node:nth-of-type(1){--node-color:var(--sky)}
.patpatdots-page .living-node:nth-of-type(2){--node-color:var(--lilac)}
.patpatdots-page .living-node:nth-of-type(3){--node-color:var(--coral)}
.patpatdots-page .living-node:nth-of-type(4){--node-color:var(--yellow)}
.patpatdots-page .living-node:nth-of-type(5){--node-color:var(--mint)}
.patpatdots-page .living-node:nth-of-type(6){--node-color:var(--lime)}
.patpatdots-page .living-node:hover{filter:brightness(1.08);transform:translate(-50%,-50%) scale(1.05)}
.patpatdots-page .living-node.active{transform:translate(-50%,-50%) scale(1.15)}
.patpatdots-page .living-node.active::before{opacity:1;transform:scale(1.15);box-shadow:0 0 12px #fff,0 0 42px var(--node-color),0 0 75px color-mix(in srgb,var(--node-color),transparent 55%)}
.patpatdots-page .living-node.hit{transform:translate(-50%,-50%) scale(.84)}
.patpatdots-page .living-stage:not([data-interactive="true"]) .living-node{pointer-events:none}
.patpatdots-page .living-stage[data-section="evidence"] .living-node{filter:saturate(.35)}
.patpatdots-page .living-controls{position:absolute;z-index:9;left:20px;right:20px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(10,10,13,.8);backdrop-filter:blur(15px);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .35s var(--ease);pointer-events:none}
.patpatdots-page .living-stage[data-section="tap"] .living-controls{opacity:1;transform:none;pointer-events:auto}
.patpatdots-page .living-status small{display:block;color:var(--lime);font-size:7px;font-weight:900;letter-spacing:.15em}
.patpatdots-page .living-status strong{display:block;max-width:330px;margin-top:4px;font-size:10px;line-height:1.45}
.patpatdots-page .living-actions{display:flex;gap:7px}
.patpatdots-page .living-actions button{min-height:34px;padding:0 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05);color:#fff;font-size:8px;font-weight:900;letter-spacing:.07em}
.patpatdots-page .living-actions button[aria-pressed="true"]{background:var(--lime);color:#11120f}
.patpatdots-page .hero-grid{z-index:auto}
.patpatdots-page .hero-grid>div:first-child,
.patpatdots-page .hero-strip,
.patpatdots-page .section-head,
.patpatdots-page figcaption,
.patpatdots-page .signal-readout,
.patpatdots-page .mode-controls,
.patpatdots-page .stage-explain,
.patpatdots-page .play-map-compact,
.patpatdots-page .together-compact,
.patpatdots-page .five-strip,
.patpatdots-page .movement-band,
.patpatdots-page .evidence-list,
.patpatdots-page .evidence-boundary,
.patpatdots-page .app-steps,
.patpatdots-page .spec-table,
.patpatdots-page .packages{position:relative;z-index:10}
.patpatdots-page .frame-number{z-index:10}
@media(max-width:1180px){.patpatdots-page .living-stage{left:auto;right:14px;top:82px;width:260px;height:360px;border-radius:28px;--stage-opacity:.55}
.patpatdots-page .living-node{width:52px;height:52px;border-width:5px}
.patpatdots-page .living-node::before{inset:9px}
.patpatdots-page .living-stage[data-section="tap"]{right:3vw;top:94px;width:94vw;height:min(560px,calc(100svh - 112px));max-height:none;--stage-opacity:1}
.patpatdots-page .living-controls{align-items:flex-start}
.patpatdots-page .living-status strong{max-width:240px}}
@media(max-width:980px){.patpatdots-page .nav a:not(.nav-cta){display:none}
.patpatdots-page .hero-grid{grid-template-columns:1fr}
.patpatdots-page .hero-shot{min-height:660px}
.patpatdots-page .triptych{grid-template-columns:1fr 1fr}
.patpatdots-page .triptych .media-slot:first-child{grid-column:1/-1}
.patpatdots-page .stage-visual{grid-template-columns:1fr;min-height:720px}
.patpatdots-page .stage-copy-left,
.patpatdots-page .stage-copy-right{display:none}
.patpatdots-page .party-feature{grid-template-columns:1fr}
.patpatdots-page .party-lab{min-height:620px}
.patpatdots-page .five-strip{grid-template-columns:1fr 1fr}
.patpatdots-page .five-strip article{border-bottom:1px solid var(--line)}
.patpatdots-page .five-strip article:nth-child(2n){border-right:0}
.patpatdots-page .five-strip article:last-child{grid-column:1/-1}
.patpatdots-page .together-compact{grid-template-columns:1fr 1fr}
.patpatdots-page .together-compact details{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding:20px 0 0}
.patpatdots-page .app-layout{grid-template-columns:1fr}
.patpatdots-page .packages{grid-template-columns:1fr 1fr}
.patpatdots-page .packages article:last-child{grid-column:1/-1}}
@media(max-width:680px){.patpatdots-page .shell{width:calc(100% - 28px)}
.patpatdots-page .hero{padding-top:102px}
.patpatdots-page .hero h1{font-size:clamp(48px,14.5vw,72px)}
.patpatdots-page .hero-shot{min-height:550px}
.patpatdots-page .hero-strip{grid-template-columns:1fr 1fr}
.patpatdots-page .hero-strip div:nth-child(2){border-right:0}
.patpatdots-page .section{padding:88px 0}
.patpatdots-page .section-head{grid-template-columns:1fr;gap:12px}
.patpatdots-page .section-head h2{font-size:clamp(39px,12vw,60px)}
.patpatdots-page figcaption{grid-template-columns:1fr}
.patpatdots-page .media-blank,
.patpatdots-page .media-blank.tall,
.patpatdots-page .media-blank.medium{min-height:520px}
.patpatdots-page .triptych,
.patpatdots-page .scene-grid,
.patpatdots-page .wide-pair{grid-template-columns:1fr}
.patpatdots-page .triptych .media-slot:first-child,
.patpatdots-page .scene-grid .media-slot:nth-child(3){grid-column:auto}
.patpatdots-page .scene-grid .media-slot:nth-child(3) .media-blank,
.patpatdots-page .scene-grid .media-blank,
.patpatdots-page .wide-pair .media-blank{min-height:540px}
.patpatdots-page .signal-visual{min-height:520px}
.patpatdots-page .signal-readout{grid-template-columns:1fr}
.patpatdots-page .mode-controls{grid-template-columns:1fr 1fr}
.patpatdots-page .mode-button:nth-child(2){border-right:0}
.patpatdots-page .mode-button{border-bottom:1px solid var(--line)}
.patpatdots-page .stage-explain{grid-template-columns:1fr}
.patpatdots-page .play-map-compact{grid-template-columns:1fr 1fr}
.patpatdots-page .play-map-compact article:nth-child(2){border-right:0}
.patpatdots-page .together-compact{grid-template-columns:1fr}
.patpatdots-page .guest-dots{max-width:330px}
.patpatdots-page .together-compact details{grid-column:auto}
.patpatdots-page .five-strip{grid-template-columns:1fr}
.patpatdots-page .five-strip article,
.patpatdots-page .five-strip article:nth-child(2n){border-right:0}
.patpatdots-page .five-strip article:last-child{grid-column:auto}
.patpatdots-page .movement-band{grid-template-columns:1fr}
.patpatdots-page .evidence-list summary{grid-template-columns:36px 1fr auto}
.patpatdots-page .evidence-list summary em{display:none}
.patpatdots-page .evidence-list details>div{padding-left:58px}
.patpatdots-page .party-feature .media-blank{min-height:560px}
.patpatdots-page .accordion-content{grid-template-columns:1fr}
.patpatdots-page .app-steps{grid-template-columns:1fr}
.patpatdots-page .spec-table>div{grid-template-columns:1fr;gap:8px;padding:18px 0}
.patpatdots-page .packages{grid-template-columns:1fr}
.patpatdots-page .packages article:last-child{grid-column:auto}
.patpatdots-page footer{display:block;line-height:1.8}
.patpatdots-page .living-stage{right:-10px;top:68px;width:148px;height:220px;border-radius:23px;--stage-opacity:.48}
.patpatdots-page .living-node{width:39px;height:39px;border-width:4px}
.patpatdots-page .living-node::before{inset:7px}
.patpatdots-page .living-node::after{display:none}
.patpatdots-page .living-stage[data-section="tap"]{right:10px;top:78px;width:calc(100vw - 20px);height:min(520px,calc(100svh - 92px))}
.patpatdots-page .living-stage[data-section="tap"] .living-node{width:56px;height:56px;border-width:5px}
.patpatdots-page .living-controls{left:10px;right:10px;bottom:10px;display:block}
.patpatdots-page .living-actions{margin-top:9px}
.patpatdots-page .living-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){html:has(.patpatdots-page){scroll-behavior:auto}
.patpatdots-page,
.patpatdots-page *,
.patpatdots-page,
.patpatdots-page *::before,
.patpatdots-page,
.patpatdots-page *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.patpatdots-page .reveal{opacity:1;transform:none}}
.patpatdots-page.layout-v3{--cream:#f5f1e7;--cream-2:#ece8dc;--charcoal:#171815;--violet:#7d60ff;--blue:#579cff;--rose:#ff8c84;--soft-lime:#e7f5a9;background:var(--cream);color:var(--charcoal)}
.patpatdots-page.layout-v3 .nav a{color:rgba(23,24,21,.64)}
.patpatdots-page.layout-v3 .nav a:hover{color:var(--charcoal)}
.patpatdots-page.layout-v3 .nav .nav-cta{background:var(--charcoal);color:#fff}
.patpatdots-page.layout-v3 .hero{background:radial-gradient(circle at 78% 26%,rgba(125,96,255,.28),transparent 28%),radial-gradient(circle at 55% 82%,rgba(221,255,98,.46),transparent 36%),linear-gradient(145deg,#fbf8f0 0,#eee8db 58%,#e8e0ff 100%);color:var(--charcoal)}
.patpatdots-page.layout-v3 .hero::before{background:linear-gradient(90deg,rgba(249,246,237,.98) 0,rgba(249,246,237,.72) 40%,rgba(249,246,237,.06) 69%),linear-gradient(0deg,rgba(245,241,231,.8),transparent 30%)}
.patpatdots-page.layout-v3 .eyebrow{color:#586225}
.patpatdots-page.layout-v3 .hero-lead{color:rgba(23,24,21,.68)}
.patpatdots-page.layout-v3 .pill{background:var(--charcoal);color:#fff}
.patpatdots-page.layout-v3 .pill-ghost{border-color:rgba(23,24,21,.2);background:rgba(255,255,255,.38);color:var(--charcoal)}
.patpatdots-page.layout-v3 .hero-shot{border-color:rgba(23,24,21,.16);background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(125,96,255,.12) 47%,rgba(255,140,132,.18));box-shadow:0 30px 90px rgba(61,48,95,.14)}
.patpatdots-page.layout-v3 .hero-shot::before{border-color:rgba(23,24,21,.12)}
.patpatdots-page.layout-v3 .hero-strip{border-color:rgba(23,24,21,.16)}
.patpatdots-page.layout-v3 .hero-strip div{border-color:rgba(23,24,21,.16)}
.patpatdots-page.layout-v3 .hero-strip small{color:rgba(23,24,21,.46)}
.patpatdots-page.layout-v3 .section{position:relative;background:var(--cream);color:var(--charcoal)}
.patpatdots-page.layout-v3 #wear{background:#f6f2e8}
.patpatdots-page.layout-v3 #play{background:#efeaff}
.patpatdots-page.layout-v3 #five{background:var(--soft-lime)}
.patpatdots-page.layout-v3 #evidence{background:#fbfaf5}
.patpatdots-page.layout-v3 #records{background:#e7f1ff}
.patpatdots-page.layout-v3 #beyond-body{background:#f3efe4}
.patpatdots-page.layout-v3 #culture{background:radial-gradient(circle at 80% 26%,rgba(255,124,105,.24),transparent 32%),#3a1518;color:#fff}
.patpatdots-page.layout-v3 #app{background:radial-gradient(circle at 28% 18%,rgba(87,156,255,.24),transparent 35%),#101218;color:#fff}
.patpatdots-page.layout-v3 #design{background:linear-gradient(150deg,#f7f5ef,#e4e5e5)}
.patpatdots-page.layout-v3 #shop{background:#f6e8ef}
.patpatdots-page.layout-v3 .cta{background:radial-gradient(circle at 82% 25%,rgba(125,96,255,.24),transparent 30%),var(--lime);color:var(--charcoal)}
.patpatdots-page.layout-v3 .section-head{grid-template-columns:112px minmax(0,880px);gap:34px;margin-bottom:68px}
.patpatdots-page.layout-v3 .section-head h2{font-size:clamp(44px,6.2vw,88px)}
.patpatdots-page.layout-v3 .section-head p{max-width:660px;color:#65675f}
.patpatdots-page.layout-v3 .section-index{color:#5a6330}
.patpatdots-page.layout-v3 .act-start .section-index::before{color:#985849}
.patpatdots-page.layout-v3 :is(#culture,#app) .section-head p{color:rgba(255,255,255,.64)}
.patpatdots-page.layout-v3 #tap .section-head p{color:#171815}
.patpatdots-page.layout-v3 :is(#culture,#app) .section-index{color:var(--lime)}
.patpatdots-page.layout-v3 #tap .section-index{color:#59603f}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .act-start .section-index::before{color:var(--coral)}
/* TAP 章节标题：像 #wear 章节海报一样，叠在下方深色舞台画面上方 —— 白字浮于画面上 */
.patpatdots-page.layout-v3 #tap .play-stage .section-head{
      position:absolute;
      z-index:12;
      top:clamp(28px,5svh,64px);
      left:clamp(28px,4vw,64px);
      width:min(680px,calc(100% - 56px));
      display:block;
      margin:0;
      padding:0;
      background:transparent;
      color:#fff;
      text-shadow:0 2px 26px rgba(0,0,0,.42);
      pointer-events:none;
    }
.patpatdots-page.layout-v3 #tap .play-stage .section-head .section-index{
      display:block;
      margin:0 0 clamp(18px,2.6svh,28px);
      color:rgba(255,255,255,.8);
    }
.patpatdots-page.layout-v3 #tap .play-stage .section-head h2{
      color:#fff;
      font-size:clamp(38px,4.6vw,66px);
      line-height:.92;
      letter-spacing:-.058em;
      text-wrap:balance;
    }
.patpatdots-page.layout-v3 #tap .play-stage .section-head p{
      max-width:620px;
      margin:clamp(16px,2vw,24px) 0 0;
      color:rgba(255,255,255,.78);
      font-size:clamp(14px,1.3vw,17px);
      line-height:1.6;
    }
.patpatdots-page.layout-v3 #tap .play-stage .section-head>div{min-width:0}
@media(max-width:680px){.patpatdots-page.layout-v3 #tap .play-stage .section-head{top:22px;left:20px;width:calc(100% - 40px)}
.patpatdots-page.layout-v3 #tap .play-stage .section-head .section-index{margin-bottom:12px}
.patpatdots-page.layout-v3 #tap .play-stage .section-head h2{font-size:clamp(30px,9vw,44px)}
.patpatdots-page.layout-v3 #tap .play-stage .section-head p{margin-top:12px;max-width:480px;font-size:13px;line-height:1.55}}
.patpatdots-page.layout-v3 .media-slot{border-color:rgba(23,24,21,.14);background:rgba(255,255,255,.58);box-shadow:0 24px 65px rgba(35,32,29,.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.patpatdots-page.layout-v3 .media-slot:hover{transform:translateY(-4px);box-shadow:0 30px 78px rgba(35,32,29,.1)}
.patpatdots-page.layout-v3 .media-blank{background:radial-gradient(circle at 70% 30%,rgba(125,96,255,.22),transparent 27%),linear-gradient(145deg,#dedbd2,#f5f2ea 50%,#d8e8ee)}
.patpatdots-page.layout-v3 .media-blank::before{border-color:rgba(23,24,21,.13)}
.patpatdots-page.layout-v3 .frame-number{color:rgba(23,24,21,.06);transition:transform .7s var(--ease)}
.patpatdots-page.layout-v3 .media-slot:hover .frame-number{transform:translate3d(-8px,8px,0)}
.patpatdots-page.layout-v3 figcaption{border-color:rgba(23,24,21,.12);background:#fffdf8}
.patpatdots-page.layout-v3 .public-copy small{color:#64703f}
.patpatdots-page.layout-v3 .public-copy p{color:#63665e}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .media-slot{border-color:rgba(255,255,255,.16);background:#15161c;box-shadow:none}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .media-blank{background:radial-gradient(circle at 68% 30%,rgba(125,96,255,.25),transparent 28%),linear-gradient(145deg,#23242b,#0d0e12)}
.patpatdots-page.layout-v3 #culture .media-blank{background:radial-gradient(circle at 68% 28%,rgba(255,140,132,.28),transparent 30%),linear-gradient(145deg,#5a2024,#1f1012)}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .media-blank::before{border-color:rgba(255,255,255,.12)}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .frame-number{color:rgba(255,255,255,.06)}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) figcaption{border-color:rgba(255,255,255,.14);background:#121319}
.patpatdots-page.layout-v3 :is(#tap,#culture,#app) .public-copy p{color:rgba(255,255,255,.62)}
.patpatdots-page.layout-v3 .triptych{grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);grid-template-rows:1fr 1fr;gap:14px}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child{grid-row:1/3}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child .media-blank{min-height:930px}
.patpatdots-page.layout-v3 .triptych .media-slot:not(:first-child) .media-blank{min-height:390px}
.patpatdots-page.layout-v3 .triptych figcaption{display:grid;padding:24px}
.patpatdots-page.layout-v3 .triptych .public-copy h3{font-size:clamp(25px,2.6vw,38px)}
.patpatdots-page.layout-v3 .scene-grid{gap:14px}
.patpatdots-page.layout-v3 .scene-grid .media-slot:first-child{grid-column:1/-1}
.patpatdots-page.layout-v3 .scene-grid .media-slot:first-child .media-blank{min-height:780px}
.patpatdots-page.layout-v3 .scene-grid .media-slot:nth-child(2),
.patpatdots-page.layout-v3 .scene-grid .media-slot:nth-child(3){grid-column:auto}
.patpatdots-page.layout-v3 .scene-grid .media-slot:nth-child(2) .media-blank,
.patpatdots-page.layout-v3 .scene-grid .media-slot:nth-child(3) .media-blank{min-height:620px}
.patpatdots-page.layout-v3 .play-map-compact{border-color:rgba(23,24,21,.13);background:rgba(255,255,255,.55)}
.patpatdots-page.layout-v3 .play-map-compact article{border-color:rgba(23,24,21,.12);background:rgba(255,255,255,.72)}
.patpatdots-page.layout-v3 .play-map-compact span{color:#6653d4}
.patpatdots-page.layout-v3 .play-map-compact p{color:#65675f}
.patpatdots-page.layout-v3 .together-compact{border-color:rgba(77,57,157,.18);background:#6d57db;color:#fff}
.patpatdots-page.layout-v3 .together-title p,
.patpatdots-page.layout-v3 .together-details p{color:rgba(255,255,255,.7)}
.patpatdots-page.layout-v3 .five-strip{border-color:rgba(23,24,21,.14);background:rgba(255,255,255,.38)}
.patpatdots-page.layout-v3 .five-strip article{border-color:rgba(23,24,21,.13);background:rgba(255,255,255,.65);transition:background .3s,transform .3s}
.patpatdots-page.layout-v3 .five-strip article:hover{background:#fff;transform:translateY(-5px)}
.patpatdots-page.layout-v3 .five-strip span{color:#5e672f}
.patpatdots-page.layout-v3 .five-strip p{color:#60635b}
.patpatdots-page.layout-v3 .movement-band{border-color:rgba(23,24,21,.13);background:#fffdf7}
.patpatdots-page.layout-v3 .movement-band small{color:#765e16}
.patpatdots-page.layout-v3 .movement-band p{color:#62655d}
.patpatdots-page.layout-v3 .training-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);margin-bottom:14px}
.patpatdots-page.layout-v3 .training-feature .media-blank{min-height:650px}
.patpatdots-page.layout-v3 .training-feature figcaption{grid-template-columns:1fr;align-content:end;border-top:0;border-left:1px solid rgba(23,24,21,.12)}
.patpatdots-page.layout-v3 .evidence-list summary{grid-template-columns:54px minmax(150px,.55fr) 1fr auto}
.patpatdots-page.layout-v3 .evidence-list details{background:rgba(255,255,255,.3);transition:background .3s}
.patpatdots-page.layout-v3 .evidence-list details[open]{background:#fff}
.patpatdots-page.layout-v3 .evidence-boundary{background:#eeece4}
.patpatdots-page.layout-v3 #records>.shell>.media-slot,
.patpatdots-page.layout-v3 #culture .media-slot,
.patpatdots-page.layout-v3 #design>.shell>.media-slot,
.patpatdots-page.layout-v3 #shop>.shell>.media-slot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)}
.patpatdots-page.layout-v3 #records .media-blank,
.patpatdots-page.layout-v3 #design>.shell>.media-slot .media-blank,
.patpatdots-page.layout-v3 #shop>.shell>.media-slot .media-blank{aspect-ratio:auto;min-height:650px}
.patpatdots-page.layout-v3 :is(#records,#culture,#design,#shop)>.shell>.media-slot figcaption{grid-template-columns:1fr;align-content:end;border-top:0;border-left:1px solid rgba(23,24,21,.12)}
.patpatdots-page.layout-v3 #culture>.shell>.media-slot figcaption{border-left-color:rgba(255,255,255,.14)}
.patpatdots-page.layout-v3 .wide-pair{gap:14px}
.patpatdots-page.layout-v3 .wide-pair .media-blank{min-height:720px}
.patpatdots-page.layout-v3 .app-layout{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:14px}
.patpatdots-page.layout-v3 .app-steps{grid-template-columns:1fr}
.patpatdots-page.layout-v3 .app-steps article{min-height:160px;background:rgba(255,255,255,.05);transition:background .3s,transform .3s}
.patpatdots-page.layout-v3 .app-steps article:hover{background:rgba(87,156,255,.16);transform:translateX(-5px)}
.patpatdots-page.layout-v3 .app-steps h3{margin-top:48px}
.patpatdots-page.layout-v3 .design-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.patpatdots-page.layout-v3 .design-detail-grid .media-blank{min-height:330px}
.patpatdots-page.layout-v3 .design-detail-grid figcaption{display:block}
.patpatdots-page.layout-v3 .design-detail-grid .public-copy h3{font-size:25px}
.patpatdots-page.layout-v3 .spec-table{margin-top:28px;background:rgba(255,255,255,.42);border-radius:24px;padding:0 24px;border:1px solid rgba(23,24,21,.12)}
.patpatdots-page.layout-v3 .packages{gap:14px}
.patpatdots-page.layout-v3 .packages article{min-height:470px;border-color:rgba(23,24,21,.14);background:#fffdf8;color:var(--charcoal)}
.patpatdots-page.layout-v3 .packages article:nth-child(1){background:var(--lime)}
.patpatdots-page.layout-v3 .packages article:nth-child(3){background:#efc9dc}
.patpatdots-page.layout-v3 .packages p{color:#62655d}
.patpatdots-page.layout-v3 .package-blank{position:relative;min-height:150px;margin:-8px -8px 0;border:1px dashed rgba(23,24,21,.2);border-radius:18px;background:rgba(255,255,255,.28)}
.patpatdots-page.layout-v3 .package-blank span{position:absolute;left:14px;top:13px;font-size:7px;font-weight:950;letter-spacing:.15em}
.patpatdots-page.layout-v3 .packages small{display:block;margin-top:18px}
.patpatdots-page.layout-v3 .packages h3{margin-top:34px}
.patpatdots-page.layout-v3 .cta .eyebrow{color:#555e27}
.patpatdots-page.layout-v3 .cta p{color:rgba(23,24,21,.65)}
.patpatdots-page.layout-v3 .cta .pill{background:var(--charcoal);color:#fff}
.patpatdots-page.layout-v3 .cta .pill-ghost{border-color:rgba(23,24,21,.2);color:var(--charcoal)}
.patpatdots-page.layout-v3 footer{border-color:rgba(23,24,21,.14);background:var(--cream);color:rgba(23,24,21,.52)}
.patpatdots-page.layout-v3 .living-stage[data-section="design"]{--stage-opacity:.58}
.patpatdots-page.layout-v3 .living-stage[data-section="shop"]{--stage-opacity:.76}
.patpatdots-page.layout-v3 #play::before,
.patpatdots-page.layout-v3 #culture::before,
.patpatdots-page.layout-v3 #app::before{content:"";position:absolute;z-index:0;width:34vw;height:34vw;border-radius:50%;filter:blur(30px);opacity:.28;pointer-events:none;animation:ambient-drift 12s ease-in-out infinite alternate}
.patpatdots-page.layout-v3 #play::before{right:-8vw;top:16%;background:var(--coral)}
.patpatdots-page.layout-v3 #culture::before{left:-12vw;top:36%;background:#ff6d5a}
.patpatdots-page.layout-v3 #app::before{right:-10vw;top:22%;background:var(--blue)}
@keyframes ambient-drift{to{transform:translate3d(3vw,5vh,0) scale(1.12)}}
@media(max-width:980px){.patpatdots-page.layout-v3 .triptych{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child{grid-row:auto;grid-column:1/-1}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child .media-blank{min-height:720px}
.patpatdots-page.layout-v3 .training-feature,
.patpatdots-page.layout-v3 #records>.shell>.media-slot,
.patpatdots-page.layout-v3 #culture .media-slot,
.patpatdots-page.layout-v3 #design>.shell>.media-slot,
.patpatdots-page.layout-v3 #shop>.shell>.media-slot{grid-template-columns:1fr}
.patpatdots-page.layout-v3 :is(#records,#culture,#design,#shop)>.shell>.media-slot figcaption,
.patpatdots-page.layout-v3 .training-feature figcaption{border-left:0;border-top:1px solid rgba(23,24,21,.12)}
.patpatdots-page.layout-v3 .design-detail-grid{grid-template-columns:1fr 1fr}
.patpatdots-page.layout-v3 .app-steps{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.patpatdots-page.layout-v3 .section-head{grid-template-columns:1fr;margin-bottom:44px}
.patpatdots-page.layout-v3 .triptych{grid-template-columns:1fr}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child{grid-column:auto}
.patpatdots-page.layout-v3 .triptych .media-slot:first-child .media-blank,
.patpatdots-page.layout-v3 .scene-grid .media-slot:first-child .media-blank{min-height:580px}
.patpatdots-page.layout-v3 .scene-grid .media-slot:first-child{grid-column:auto}
.patpatdots-page.layout-v3 .design-detail-grid,
.patpatdots-page.layout-v3 .app-steps{grid-template-columns:1fr}
.patpatdots-page.layout-v3 .packages article{min-height:420px}}
@media(prefers-reduced-motion:reduce){.patpatdots-page.layout-v3 #play::before,
.patpatdots-page.layout-v3 #culture::before,
.patpatdots-page.layout-v3 #app::before{animation:none}}
/* V4 — one clean frame, scroll-led media, and a reference-led PATPATDOT material */
.patpatdots-page.layout-v4 .hero-shot::before,
.patpatdots-page.layout-v4 .media-blank::before{display:none}
.patpatdots-page.layout-v4 .media-slot{overflow:hidden;border-radius:28px;transform:none}
.patpatdots-page.layout-v4 .media-slot:hover{transform:none;box-shadow:0 28px 72px rgba(35,32,29,.09)}
.patpatdots-page.layout-v4 .media-blank{isolation:isolate;border-radius:0}
.patpatdots-page.layout-v4 .media-slot>.media-blank:first-child{border-radius:27px 27px 0 0}
.patpatdots-page.layout-v4 .media-slot>figcaption:last-child{position:relative;z-index:10;margin:0;border-right:0;border-bottom:0;border-left:0;border-radius:0}
.patpatdots-page.layout-v4 :is(#records,#culture,#design,#shop)>.shell>.media-slot>figcaption,
.patpatdots-page.layout-v4 .training-feature>figcaption{border-top:0;border-left:1px solid rgba(23,24,21,.12)}
.patpatdots-page.layout-v4 #culture>.shell>.media-slot>figcaption{border-left-color:rgba(255,255,255,.14)}
.patpatdots-page.layout-v4 .frame-number{right:clamp(18px,3vw,38px);bottom:clamp(10px,2vw,26px)}
.patpatdots-page.layout-v4 [data-motion]{--motion-x:0px;--motion-y:0px;--motion-scale:1;position:relative;overflow:hidden}
/* FORM STUDIES(shot-13e) 容器要纯黑 —— 这个 data-motion 光晕渐变层不再套在它上面。 */
.patpatdots-page.layout-v4 .media-blank[data-motion]:not([data-media-id="shot-13e"]):not([data-media-id="shot-13c"])::before,
.patpatdots-page.layout-v4 .hero-shot[data-motion]::after{display:block;content:"";position:absolute;z-index:0;inset:-9%;pointer-events:none;border:0;background:radial-gradient(circle at 72% 27%,rgba(125,96,255,.28),transparent 25%),radial-gradient(circle at 24% 74%,rgba(221,255,98,.3),transparent 31%),linear-gradient(145deg,rgba(255,255,255,.26),rgba(87,156,255,.12));transform:translate3d(var(--motion-x),var(--motion-y),0) scale(var(--motion-scale));transform-origin:center;will-change:transform}
.patpatdots-page.layout-v4 :is(#tap,#culture,#app) .media-blank[data-motion]::before{background:radial-gradient(circle at 70% 28%,rgba(125,96,255,.38),transparent 28%),radial-gradient(circle at 23% 73%,rgba(255,114,95,.22),transparent 30%),linear-gradient(145deg,rgba(255,255,255,.05),rgba(0,0,0,.12))}
.patpatdots-page.layout-v4 [data-motion]>img,
.patpatdots-page.layout-v4 [data-motion]>picture,
.patpatdots-page.layout-v4 [data-motion]>video{position:absolute;z-index:1;inset:-5%;width:110%;height:110%;object-fit:cover;transform:translate3d(var(--motion-x),var(--motion-y),0) scale(var(--motion-scale));transform-origin:center;will-change:transform}
.patpatdots-page.layout-v4 [data-motion] :is(.frame-number){position:absolute;z-index:3}
.patpatdots-page.layout-v4 .motion-note{position:absolute;z-index:4;right:16px;top:16px;padding:8px 10px;border:1px solid rgba(23,24,21,.13);border-radius:999px;background:rgba(250,248,240,.74);color:rgba(23,24,21,.54);font-size:7px;font-style:normal;font-weight:950;letter-spacing:.13em;backdrop-filter:blur(10px)}
.patpatdots-page.layout-v4 :is(#tap,#culture,#app) .motion-note{border-color:rgba(255,255,255,.16);background:rgba(12,13,17,.56);color:rgba(255,255,255,.62)}
.patpatdots-page.layout-v4 .living-stage{--stage-opacity:1;--scroll-opacity:0;opacity:var(--scroll-opacity);border-radius:32px;transition:opacity .16s linear,background .42s ease,border-color .42s ease,box-shadow .42s ease;will-change:left,right,top,height,opacity;contain:layout paint style}
.patpatdots-page.layout-v4 .living-stage[data-section="tap"]{--stage-opacity:1}
.patpatdots-page.layout-v4 .living-stage[data-section="evidence"],
.patpatdots-page.layout-v4 .living-stage[data-section="design"],
.patpatdots-page.layout-v4 .living-stage[data-section="shop"]{--stage-opacity:1}
.patpatdots-page.layout-v4 .living-node{--node-color:#9ab8ff;z-index:4;border:1px solid rgba(255,255,255,.82);border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.08) 0 46%,rgba(255,255,255,.72) 52%,rgba(225,229,246,.9) 68%,rgba(249,247,243,.98) 100%),conic-gradient(from 18deg,rgba(174,199,255,.92),rgba(242,224,255,.82) 18%,rgba(255,255,255,.9) 34%,rgba(255,183,216,.7) 50%,rgba(209,225,255,.92) 68%,rgba(255,255,255,.88) 84%,rgba(174,199,255,.92));box-shadow:0 13px 30px rgba(28,35,58,.22),0 3px 8px rgba(28,35,58,.15),inset 0 0 12px rgba(255,255,255,.92),inset 0 -5px 11px rgba(119,132,174,.16);filter:none;transition:transform .24s var(--ease),filter .3s ease,box-shadow .3s ease;will-change:left,top,width,height,transform}
.patpatdots-page.layout-v4 .living-node::before{z-index:3;inset:20%;border:1px solid rgba(184,184,181,.42);border-radius:50%;background:radial-gradient(circle at 39% 30%,#fff 0 8%,#f2f1ee 46%,#d9d8d5 100%);box-shadow:0 5px 12px rgba(68,66,72,.23),inset 0 2px 4px rgba(255,255,255,.86),inset 0 -3px 6px rgba(119,117,124,.13);opacity:1;transition:transform .2s ease,box-shadow .2s ease}
.patpatdots-page.layout-v4 .living-node::after{z-index:2;content:"";display:block;position:absolute;inset:4%;width:auto;height:auto;border:0;border-radius:50%;background:radial-gradient(circle at 26% 24%,rgba(160,195,255,.92) 0 3%,transparent 12%),radial-gradient(circle at 76% 27%,rgba(225,177,255,.82) 0 4%,transparent 13%),radial-gradient(circle at 81% 70%,rgba(255,169,204,.7) 0 3%,transparent 13%),radial-gradient(circle at 25% 73%,color-mix(in srgb,var(--node-color),white 24%) 0 4%,transparent 14%);filter:blur(3px);opacity:.8;pointer-events:none}
.patpatdots-page.layout-v4 .living-node:hover{filter:brightness(1.04);transform:translate(-50%,-50%) scale(1.035)}
.patpatdots-page.layout-v4 .living-node.active{transform:translate(-50%,-50%) scale(1.11);box-shadow:0 16px 34px rgba(34,39,62,.25),0 0 22px rgba(178,203,255,.62),0 0 44px color-mix(in srgb,var(--node-color),transparent 56%),inset 0 0 14px #fff}
.patpatdots-page.layout-v4 .living-node.active::before{opacity:1;transform:scale(.94);box-shadow:0 3px 9px rgba(68,66,72,.22),inset 0 2px 5px rgba(255,255,255,.9),0 0 20px rgba(255,255,255,.75)}
.patpatdots-page.layout-v4 .living-node.hit{transform:translate(-50%,-50%) scale(.91)}
.patpatdots-page.layout-v4 .living-stage[data-section="evidence"] .living-node{filter:saturate(.55)}
.patpatdots-page.layout-v4 .living-signal{opacity:.74}
.patpatdots-page.layout-v4 .public-copy,
.patpatdots-page.layout-v4 .section-head{position:relative;z-index:10}
@media(max-width:1180px){.patpatdots-page.layout-v4 .living-stage{left:auto;right:18px;top:94px;width:224px;height:300px;max-height:none;transition:right .65s var(--ease),top .65s var(--ease),width .65s var(--ease),height .65s var(--ease),opacity .22s linear,background .42s ease,border-color .42s ease}
.patpatdots-page.layout-v4 .living-node{width:var(--node-size,48px);height:var(--node-size,48px);border-width:1px}
.patpatdots-page.layout-v4 .living-node::before{inset:20%}
.patpatdots-page.layout-v4 .living-stage[data-section="tap"]{right:3vw;top:92px;width:94vw;height:min(570px,calc(100svh - 108px))}}
@media (max-width: 760px){.patpatdots-page.layout-v4 .triptych,
.patpatdots-page.layout-v4 .scene-grid,
.patpatdots-page.layout-v4 .wide-pair,
.patpatdots-page.layout-v4 .design-detail-grid{
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        margin-right: calc((100vw - 100%) / -2);
        padding-right: 14px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
.patpatdots-page.layout-v4 .triptych::-webkit-scrollbar,
.patpatdots-page.layout-v4 .scene-grid::-webkit-scrollbar,
.patpatdots-page.layout-v4 .wide-pair::-webkit-scrollbar,
.patpatdots-page.layout-v4 .design-detail-grid::-webkit-scrollbar{
        display: none;
      }
.patpatdots-page.layout-v4 .triptych > .media-slot,
.patpatdots-page.layout-v4 .scene-grid > .media-slot,
.patpatdots-page.layout-v4 .wide-pair > .media-slot,
.patpatdots-page.layout-v4 .design-detail-grid > .media-slot{
        flex: 0 0 min(86vw, 540px);
        scroll-snap-align: start;
      }
.patpatdots-page.layout-v4 .triptych .media-blank,
.patpatdots-page.layout-v4 .scene-grid .media-blank,
.patpatdots-page.layout-v4 .wide-pair .media-blank,
.patpatdots-page.layout-v4 .design-detail-grid .media-blank,
.patpatdots-page.layout-v4 .triptych .media-slot:first-child .media-blank,
.patpatdots-page.layout-v4 .scene-grid .media-slot:first-child .media-blank{
        min-height: clamp(470px, 118vw, 620px);
      }
.patpatdots-page.layout-v4 .triptych .media-slot:first-child{
        grid-row: auto;
        grid-column: auto;
      }
.patpatdots-page.layout-v4 .media-slot > figcaption{
        min-height: 360px;
        align-content: start;
      }
.patpatdots-page.layout-v4 .motion-note{
        top: 12px;
        right: 12px;
      }}
@media(max-width:680px){.patpatdots-page.layout-v4 .hero{padding-top:90px}
.patpatdots-page.layout-v4 .hero-grid{gap:26px}
.patpatdots-page.layout-v4 .hero-shot{min-height:520px}
.patpatdots-page.layout-v4 .section{padding:78px 0}
.patpatdots-page.layout-v4 .section-head{margin-bottom:36px}
.patpatdots-page.layout-v4 .section-head h2{font-size:clamp(38px,11.2vw,56px)}
.patpatdots-page.layout-v4 .living-stage{--mobile-stage:0;right:8px;top:106px;width:154px;height:210px;border-radius:22px;opacity:calc(var(--scroll-opacity) * var(--mobile-stage));pointer-events:none}
.patpatdots-page.layout-v4 .living-stage:is([data-section="top"],[data-section="wear"],[data-section="play"],[data-section="five"],[data-section="beyond-body"],[data-section="culture"],[data-section="shop"],[data-section="kit"]){--mobile-stage:1}
.patpatdots-page.layout-v4 .living-stage:is([data-section="play"],[data-section="beyond-body"],[data-section="shop"],[data-section="kit"]){top:calc(100svh - 236px)}
.patpatdots-page.layout-v4 .living-stage[data-section="culture"]{top:128px}
.patpatdots-page.layout-v4 .living-stage[data-section="tap"]{--mobile-stage:1;right:10px;top:78px;width:calc(100vw - 20px);height:min(520px,calc(100svh - 92px));pointer-events:auto}
.patpatdots-page.layout-v4 .living-node{width:var(--node-size,38px);height:var(--node-size,38px)}
.patpatdots-page.layout-v4 .living-stage[data-section="tap"] .living-node{width:var(--node-size,56px);height:var(--node-size,56px)}
.patpatdots-page.layout-v4 :is(#records,#culture,#design,#shop)>.shell>.media-slot>figcaption,
.patpatdots-page.layout-v4 .training-feature>figcaption{border-top:1px solid rgba(23,24,21,.12);border-left:0}
.patpatdots-page.layout-v4 #culture>.shell>.media-slot>figcaption{border-top-color:rgba(255,255,255,.14)}
.patpatdots-page.layout-v4 .media-slot>figcaption{min-height:320px}}
@media(prefers-reduced-motion:reduce){.patpatdots-page.layout-v4 [data-motion]::before,
.patpatdots-page.layout-v4 [data-motion]>img,
.patpatdots-page.layout-v4 [data-motion]>picture,
.patpatdots-page.layout-v4 [data-motion]>video{transform:none!important}
.patpatdots-page.layout-v4 .living-stage{transition:none}}
/* V5 — the viewport stays still; only the six dots move between media and ambient states. */
.patpatdots-page.layout-v5 .living-stage,
.patpatdots-page.layout-v5 .living-stage[data-section="tap"]{left:0!important;right:0!important;top:0!important;width:100vw!important;height:100vh!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;opacity:var(--scroll-opacity)!important;transition:opacity .18s linear!important;contain:layout paint style;overflow:hidden}
.patpatdots-page.layout-v5 .living-stage[data-depth="quiet"],
.patpatdots-page.layout-v5 .living-stage[data-depth="media"]{z-index:7}
.patpatdots-page.layout-v5 .living-stage[data-depth="focus"]{z-index:9}
.patpatdots-page.layout-v5 .living-stage[data-presentation="ambient"]{z-index:2}
.patpatdots-page.layout-v5 .living-stage[data-presentation="ambient"] .living-node{filter:saturate(.8);box-shadow:0 10px 25px rgba(28,35,58,.14),0 0 18px rgba(178,203,255,.24),inset 0 0 12px rgba(255,255,255,.9)}
.patpatdots-page.layout-v5 .living-stage[data-presentation="ambient"] .living-signal{opacity:.16}
.patpatdots-page.layout-v5 .living-stage[data-presentation="anchored"] .living-signal{opacity:.58}
.patpatdots-page.layout-v5 .living-stage[data-presentation="interactive"] .living-signal{opacity:.82}
.patpatdots-page.layout-v5 .living-controls{left:50%;right:auto;width:min(720px,calc(100vw - 40px));bottom:18px;box-sizing:border-box;transform:translate(-50%,12px)}
.patpatdots-page.layout-v5 .living-stage[data-section="tap"] .living-controls{transform:translate(-50%,0)}
.patpatdots-page.layout-v5 .living-node{width:var(--node-size,64px);height:var(--node-size,64px)}
.patpatdots-page.layout-v5 .public-copy,
.patpatdots-page.layout-v5 .section-head,
.patpatdots-page.layout-v5 .frame-number{z-index:10}
@media(max-width:760px){.patpatdots-page.layout-v5 .living-stage{--scroll-opacity:.46}
.patpatdots-page.layout-v5 .living-stage[data-presentation="anchored"]{z-index:6}
.patpatdots-page.layout-v5 .living-stage[data-presentation="ambient"]{z-index:1}
.patpatdots-page.layout-v5 .living-stage[data-presentation="quiet"]{opacity:0!important}
.patpatdots-page.layout-v5 .living-node{width:var(--node-size,38px);height:var(--node-size,38px)}
.patpatdots-page.layout-v5 .living-controls{width:calc(100vw - 20px);bottom:max(10px,env(safe-area-inset-bottom))}
.patpatdots-page.layout-v5 .living-stage[data-section="tap"] .living-node{width:var(--node-size,48px);height:var(--node-size,48px)}}
@media(prefers-reduced-motion:reduce){.patpatdots-page.layout-v5 .living-stage{transition:none!important}}
/* V6 — WEAR becomes a wide editorial feature followed by two balanced detail cards. */
.patpatdots-page.layout-v6 #wear .triptych{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;gap:16px}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot{min-width:0;border-radius:28px}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child{grid-column:1/-1;grid-row:auto}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child .media-blank{min-height:0;aspect-ratio:2/1}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:not(:first-child) .media-blank{min-height:0;aspect-ratio:16/10}
.patpatdots-page.layout-v6 #wear .triptych figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.72fr);gap:26px;min-height:0;padding:27px 29px;align-items:start}
.patpatdots-page.layout-v6 #wear .triptych .public-copy h3{max-width:620px;font-size:clamp(28px,3vw,40px);line-height:1.04}
.patpatdots-page.layout-v6 #wear .triptych .public-copy p{max-width:600px}
@media(max-width:1040px) and (min-width:761px){.patpatdots-page.layout-v6 #wear .triptych{gap:13px}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child .media-blank{aspect-ratio:16/10}
.patpatdots-page.layout-v6 #wear .triptych figcaption{grid-template-columns:1fr;gap:18px;padding:24px}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:not(:first-child) .public-copy h3{font-size:30px}}
@media (max-width: 760px){.patpatdots-page.layout-v6 #wear .triptych{
        display: flex;
        gap: 12px;
      }
.patpatdots-page.layout-v6 #wear .triptych > .media-slot{
        flex: 0 0 min(86vw, 440px);
      }
.patpatdots-page.layout-v6 #wear .triptych > .media-slot:first-child{
        display: block;
        grid-column: auto;
      }
.patpatdots-page.layout-v6 #wear .triptych > .media-slot:first-child .media-blank{
        min-height: 0;
        aspect-ratio: 4 / 5;
      }
.patpatdots-page.layout-v6 #wear .triptych > .media-slot:not(:first-child) .media-blank{
        min-height: 0;
        aspect-ratio: 4 / 3;
      }
.patpatdots-page.layout-v6 #wear .triptych figcaption{
        display: block;
        min-height: 0;
        padding: 22px;
      }
.patpatdots-page.layout-v6 #wear .triptych .public-copy h3{
        font-size: 30px;
      }}
/* Real asset layer: images and video only — no chapter layout here. */
.patpatdots-page [data-media-id]{position:relative}
.patpatdots-page [data-media-id]>.managed-media{position:absolute;z-index:1;display:block;object-fit:cover;object-position:center}
.patpatdots-page [data-media-id]:not([data-motion])>.managed-media{inset:0;width:100%;height:100%}
.patpatdots-page [data-media-id][data-motion]>.managed-media{inset:-5%;width:110%;height:110%;transform:translate3d(var(--motion-x,0),var(--motion-y,0),0) scale(var(--motion-scale,1));transform-origin:center;will-change:transform}
.patpatdots-page [data-media-id]:has(>.managed-media)::after{display:none!important}
/* 视频在首帧解码前浏览器会画黑；view.js 在这段时间挂 is-media-loading，
   藏起视频露出容器的深色渐变，拿到首帧后再淡入。 */
.patpatdots-page video.managed-media{opacity:1;transition:opacity .35s ease}
.patpatdots-page video.managed-media.is-media-loading{opacity:0}
.patpatdots-page figure:has([data-media-id]>.managed-media) figcaption{grid-template-columns:minmax(0,1fr)}
.patpatdots-page .package-blank{overflow:hidden}
.patpatdots-page .package-blank>.managed-media{inset:0!important;width:100%!important;height:100%!important}
/* Supplied cut-outs, UI and portrait motion should remain complete instead of being cropped like photography. */
.patpatdots-page :is(
  [data-media-id="shot-01"],
  [data-media-id="ui-08"],
  [data-media-id="shot-09"],
  [data-media-id="shot-10"],
  [data-media-id="shot-11"],
  [data-media-id="ui-12"],
  [data-media-id="shot-13a"],
  [data-media-id="shot-13c"],
  [data-media-id="packshot-a"]
){background:linear-gradient(145deg,#111319,#23262d)}
.patpatdots-page :is(
  [data-media-id="shot-01"],
  [data-media-id="ui-08"],
  [data-media-id="shot-09"],
  [data-media-id="shot-10"],
  [data-media-id="shot-11"],
  [data-media-id="ui-12"],
  [data-media-id="shot-13a"],
  [data-media-id="shot-13c"],
  [data-media-id="shot-13e"],
  [data-media-id="packshot-a"]
)>.managed-media{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:none!important;
}
.patpatdots-page :is([data-media-id="shot-01"],[data-media-id="shot-11"],[data-media-id="shot-13a"])>.managed-media{
  object-position:76% center;
}
/* shot-01 now carries a full, near-square garment photo — keep it centered, not nudged right. */
.patpatdots-page [data-media-id="shot-01"]>.managed-media{object-position:center}
.patpatdots-page [data-media-id="ui-08"]>.managed-media,
.patpatdots-page [data-media-id="ui-12"]>.managed-media{object-position:center top}
.patpatdots-page [data-media-id="packshot-a"]{background:linear-gradient(145deg,#f4f0e8,#e4ddd2)}
@media(prefers-reduced-motion:reduce){.patpatdots-page [data-media-id]>.managed-media{transform:none!important}.patpatdots-page video.managed-media{transition:none}}
/* V7 — a full-screen brand cover before the explanatory hero. */
.patpatdots-page.layout-v6 .opening-hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 72% 26%,rgba(202,183,255,.32),transparent 27%),
    radial-gradient(circle at 23% 74%,rgba(150,207,255,.24),transparent 31%),
    linear-gradient(145deg,#131319 0,#23222a 48%,#0b0b0e 100%);
  color:#fff;
}
.patpatdots-page.layout-v6 .opening-hero>.managed-media{
  position:absolute;
  z-index:0;
  inset:-5%;
  width:110%;
  height:110%;
  object-fit:cover;
  object-position:center;
  transform:translate3d(var(--motion-x,0),var(--motion-y,0),0) scale(var(--motion-scale,1));
  transform-origin:center;
  will-change:transform;
}
.patpatdots-page.layout-v6 .opening-shade{
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,7,10,.28) 0,rgba(7,7,10,.04) 34%,rgba(7,7,10,.08) 62%,rgba(7,7,10,.62) 100%),
    radial-gradient(circle at 50% 49%,transparent 10%,rgba(7,7,10,.2) 82%);
}
.patpatdots-page.layout-v6 .opening-brand{
  position:relative;
  z-index:12;
  width:min(1180px,calc(100% - 48px));
  text-align:center;
  text-shadow:0 2px 30px rgba(0,0,0,.3);
}
.patpatdots-page.layout-v6 .opening-kicker{
  margin:0 0 22px;
  color:rgba(255,255,255,.72);
  font-size:clamp(8px,.72vw,11px);
  font-weight:850;
  letter-spacing:.22em;
}
.patpatdots-page.layout-v6 .opening-wordmark{
  margin:0;
  font-size:clamp(66px,12.8vw,188px);
  font-weight:950;
  line-height:.8;
  letter-spacing:-.082em;
  white-space:nowrap;
}
.patpatdots-page.layout-v6 .opening-manifesto{
  margin:clamp(25px,3vw,42px) 0 0;
  font-size:clamp(13px,1.35vw,19px);
  font-weight:900;
  letter-spacing:.15em;
}
.patpatdots-page.layout-v6 .opening-manifesto span{color:var(--lime)}
.patpatdots-page.layout-v6 .opening-scroll{
  position:absolute;
  z-index:14;
  right:clamp(20px,3vw,44px);
  bottom:clamp(22px,3vw,40px);
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.72);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
.patpatdots-page.layout-v6 .opening-scroll i{
  position:relative;
  width:37px;
  height:37px;
  border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  backdrop-filter:blur(10px);
}
.patpatdots-page.layout-v6 .opening-scroll i::before{
  content:"";
  position:absolute;
  left:50%;
  top:44%;
  width:7px;
  height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.patpatdots-page.layout-v6 .hero-intro h2{
  margin:0;
  font-size:clamp(58px,8.2vw,118px);
  line-height:.87;
  letter-spacing:-.075em;
  text-wrap:balance;
}
@media(max-width:680px){.patpatdots-page.layout-v6 .opening-brand{width:calc(100% - 28px)}
.patpatdots-page.layout-v6 .opening-kicker{max-width:310px;margin:0 auto 18px;line-height:1.7}
.patpatdots-page.layout-v6 .opening-wordmark{font-size:clamp(50px,17vw,78px);letter-spacing:-.075em}
.patpatdots-page.layout-v6 .opening-manifesto{margin-top:23px;font-size:10px;letter-spacing:.12em}
.patpatdots-page.layout-v6 .opening-scroll{right:18px;bottom:18px}
.patpatdots-page.layout-v6 .opening-scroll span{display:none}
.patpatdots-page.layout-v6 .hero-intro h2{font-size:clamp(48px,14.5vw,72px)}}
@media(prefers-reduced-motion:reduce){.patpatdots-page.layout-v6 .opening-hero>.managed-media{transform:none!important}}
/* V8 — wide-but-short laptop viewports: title and first core visual share one composition. */
@media (min-width:981px) and (max-height:900px){html:has(.patpatdots-page){scroll-padding-top:72px}
.patpatdots-page.layout-v6 .section{
    --laptop-visual-h:clamp(330px,44svh,410px);
    padding:clamp(70px,8.5svh,88px) 0 clamp(94px,12svh,126px);
    scroll-margin-top:68px;
  }
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design)>.shell{
    display:grid;
    grid-template-columns:minmax(290px,.34fr) minmax(0,.66fr);
    column-gap:clamp(30px,4vw,64px);
    row-gap:16px;
    align-items:start;
  }
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design)>.shell>*{min-width:0}
.patpatdots-page.layout-v6 .section-head{
    grid-template-columns:94px minmax(0,760px);
    gap:22px;
    margin-bottom:clamp(22px,3svh,30px);
  }
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design)>.shell>.section-head{
    display:block;
    grid-column:1;
    grid-row:1;
    margin:0;
    padding-top:4px;
  }
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design)>.shell>.section-head .section-index{
    display:block;
    margin-bottom:clamp(22px,3.2svh,32px);
  }
.patpatdots-page.layout-v6 .section-head h2{
    font-size:clamp(42px,4.55vw,62px);
    line-height:.94;
    letter-spacing:-.058em;
  }
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design) .section-head h2{
    font-size:clamp(42px,4.1vw,58px);
  }
.patpatdots-page.layout-v6 .section-head p{
    max-width:620px;
    margin-top:13px;
    font-size:14px;
    line-height:1.55;
  }
.patpatdots-page.layout-v6 .hero-intro{
    min-height:100svh;
    padding:86px 0 24px;
  }
.patpatdots-page.layout-v6 .hero-intro .hero-grid{gap:clamp(26px,3.4vw,46px)}
.patpatdots-page.layout-v6 .hero-intro h2{font-size:clamp(52px,6.5vw,88px)}
.patpatdots-page.layout-v6 .hero-intro .hero-lead{margin-top:18px;font-size:16px;line-height:1.55}
.patpatdots-page.layout-v6 .hero-intro .hero-actions{margin-top:22px}
.patpatdots-page.layout-v6 .hero-intro .hero-shot{min-height:0;height:min(64svh,560px)}
.patpatdots-page.layout-v6 .hero-intro .hero-strip{margin-top:22px}
/* Let the first media item become the right-hand chapter visual. */
.patpatdots-page.layout-v6 #wear .triptych,
.patpatdots-page.layout-v6 #play .scene-grid,
.patpatdots-page.layout-v6 #beyond-body .wide-pair,
.patpatdots-page.layout-v6 #app .app-layout{display:contents}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child,
.patpatdots-page.layout-v6 #tap .play-stage,
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:first-child,
.patpatdots-page.layout-v6 #five .training-feature,
.patpatdots-page.layout-v6 #records>.shell>.media-slot,
.patpatdots-page.layout-v6 #beyond-body .wide-pair>.media-slot:first-child,
.patpatdots-page.layout-v6 #culture>.shell>.media-slot,
.patpatdots-page.layout-v6 #app .app-layout>.media-slot,
.patpatdots-page.layout-v6 #design>.shell>.media-slot{
    grid-column:2;
    grid-row:1;
    align-self:start;
  }
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child .media-blank,
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:first-child .media-blank,
.patpatdots-page.layout-v6 #five .training-feature .media-blank,
.patpatdots-page.layout-v6 #records>.shell>.media-slot .media-blank,
.patpatdots-page.layout-v6 #beyond-body .wide-pair>.media-slot:first-child .media-blank,
.patpatdots-page.layout-v6 #culture>.shell>.media-slot .media-blank,
.patpatdots-page.layout-v6 #app .app-layout>.media-slot .media-blank,
.patpatdots-page.layout-v6 #design>.shell>.media-slot .media-blank{
    min-height:0;
    height:var(--laptop-visual-h);
    aspect-ratio:auto;
  }
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:first-child figcaption,
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:first-child figcaption,
.patpatdots-page.layout-v6 #beyond-body .wide-pair>.media-slot:first-child figcaption,
.patpatdots-page.layout-v6 #app .app-layout>.media-slot figcaption{
    grid-template-columns:minmax(0,1fr) minmax(220px,.72fr);
    gap:20px;
    padding:20px 22px;
  }
/* Continue the remaining material below the complete chapter opener. */
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:nth-child(2),
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:nth-child(2){grid-column:1;grid-row:2}
.patpatdots-page.layout-v6 #wear .triptych>.media-slot:nth-child(3),
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:nth-child(3){grid-column:2;grid-row:2}
.patpatdots-page.layout-v6 #beyond-body .wide-pair>.media-slot:nth-child(2),
.patpatdots-page.layout-v6 #app .app-steps,
.patpatdots-page.layout-v6 #five .five-strip,
.patpatdots-page.layout-v6 #five .movement-band,
.patpatdots-page.layout-v6 #design .design-detail-grid,
.patpatdots-page.layout-v6 #design .spec-table,
.patpatdots-page.layout-v6 #play .play-map-compact,
.patpatdots-page.layout-v6 #play .together-compact{
    grid-column:1/-1;
  }
.patpatdots-page.layout-v6 #tap .signal-visual{
    min-height:0;
    height:var(--laptop-visual-h);
  }
.patpatdots-page.layout-v6 #tap .signal-readout{padding:15px 20px}
.patpatdots-page.layout-v6 #tap .mode-button{min-height:96px;padding:14px 16px}
.patpatdots-page.layout-v6 #tap .mode-button strong{margin-top:18px;font-size:18px}
.patpatdots-page.layout-v6 #tap .mode-button span{font-size:9px}
.patpatdots-page.layout-v6 #tap .stage-explain article{padding:18px 20px}
.patpatdots-page.layout-v6 #tap .stage-explain h3{margin-top:9px;font-size:21px}
.patpatdots-page.layout-v6 #app .app-steps{
    grid-template-columns:repeat(4,1fr);
    margin-top:2px;
  }
.patpatdots-page.layout-v6 #app .app-steps article{min-height:190px;padding:20px}
.patpatdots-page.layout-v6 #app .app-steps h3{margin-top:54px;font-size:21px}
.patpatdots-page.layout-v6 #evidence .evidence-list summary{min-height:72px}
.patpatdots-page.layout-v6 #evidence .evidence-boundary{margin-top:14px}
.patpatdots-page.layout-v6 #shop .packages article{min-height:var(--laptop-visual-h);padding:22px}
.patpatdots-page.layout-v6 #shop .package-blank{min-height:112px}
.patpatdots-page.layout-v6 #shop .packages small{margin-top:14px}
.patpatdots-page.layout-v6 #shop .packages h3{margin-top:22px;font-size:27px}
.patpatdots-page.layout-v6 #shop .packages p{margin-top:11px}
.patpatdots-page.layout-v6 #shop .packages strong{padding-top:18px}}
@media (min-width:981px) and (max-height:740px){.patpatdots-page.layout-v6 .section{
    --laptop-visual-h:clamp(286px,41svh,318px);
    padding-top:64px;
  }
.patpatdots-page.layout-v6 .section-head{margin-bottom:18px}
.patpatdots-page.layout-v6 .section-head h2,
.patpatdots-page.layout-v6 :is(#wear,#tap,#play,#five,#records,#beyond-body,#culture,#app,#design) .section-head h2{font-size:clamp(38px,3.8vw,52px)}
.patpatdots-page.layout-v6 .section-head p{font-size:13px}
.patpatdots-page.layout-v6 .hero-intro .hero-shot{height:min(59svh,420px)}
.patpatdots-page.layout-v6 #tap .mode-button{min-height:86px}
.patpatdots-page.layout-v6 #tap .stage-explain{display:none}}
/* V9 — image-led chapter posters and an optional horizontal WIP reel. */
.patpatdots-page.layout-v9 .chapter-poster{
  --poster-media-height:clamp(580px,78svh,840px);
  position:relative;
  /* Keep the photograph below the global dots, while allowing the heading
     itself to remain above them. */
  isolation:auto;
}
.patpatdots-page.layout-v9 .chapter-poster::after{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:0;
  height:var(--poster-media-height);
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,8,10,.8) 0,rgba(7,8,10,.52) 31%,rgba(7,8,10,.08) 62%,transparent 82%),
    linear-gradient(180deg,rgba(7,8,10,.32),transparent 38%,rgba(7,8,10,.2));
}
.patpatdots-page.layout-v9 .chapter-poster>.media-blank{
  min-height:0!important;
  height:var(--poster-media-height)!important;
  aspect-ratio:auto!important;
}
.patpatdots-page.layout-v9 .chapter-poster>.section-head{
  position:absolute;
  z-index:12;
  left:clamp(28px,5vw,72px);
  top:clamp(48px,8svh,92px);
  width:min(600px,calc(100% - 112px));
  display:block;
  margin:0;
  padding:0;
  color:#fff;
  pointer-events:none;
  text-shadow:0 2px 28px rgba(0,0,0,.36);
}
.patpatdots-page.layout-v9 .chapter-poster>.section-head .section-index{
  display:block;
  margin:0 0 clamp(20px,3svh,34px);
  color:rgba(255,255,255,.72)!important;
}
.patpatdots-page.layout-v9 .chapter-poster>.section-head h2{
  max-width:590px;
  color:#fff;
  font-size:clamp(50px,6.2vw,88px);
  line-height:.91;
  letter-spacing:-.064em;
}
.patpatdots-page.layout-v9 .chapter-poster>.section-head p{
  max-width:520px;
  margin-top:18px;
  color:rgba(255,255,255,.76)!important;
  font-size:clamp(13px,1.15vw,16px);
  line-height:1.62;
}
.patpatdots-page.layout-v9 .chapter-poster .frame-number{opacity:.38}
.patpatdots-page.layout-v9 .chapter-poster>figcaption{position:relative;z-index:10}
.patpatdots-page.layout-v9 #five .training-feature,
.patpatdots-page.layout-v9 #culture>.shell>.chapter-poster,
.patpatdots-page.layout-v9 #design>.shell>.chapter-poster{display:block}
.patpatdots-page.layout-v9 #beyond-body .wide-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.patpatdots-page.layout-v9 #beyond-body .wide-pair>.media-slot{
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0;
}
.patpatdots-page.layout-v9 #beyond-body .wide-pair .media-blank{
  min-height:0;
  height:clamp(520px,62svh,720px);
}
.patpatdots-page.layout-v9 #beyond-body .wide-pair figcaption{
  display:block;
  min-height:250px;
}
/* TAP needs width more than compression: keep the title above a full-width stage. */
.patpatdots-page.layout-v9 #tap>.shell{display:block}
.patpatdots-page.layout-v9 #tap .signal-visual{
  min-height:0;
  height:clamp(560px,68svh,760px);
}
.patpatdots-page.layout-v9 #tap .signal-readout{padding:20px 24px}
.patpatdots-page.layout-v9 #tap .signal-readout strong{font-size:22px}
.patpatdots-page.layout-v9 #tap .signal-readout p{font-size:12px}
.patpatdots-page.layout-v9 #tap .mode-button{min-height:116px;padding:18px 20px}
.patpatdots-page.layout-v9 #tap .mode-button small{font-size:9px}
.patpatdots-page.layout-v9 #tap .mode-button strong{margin-top:24px;font-size:21px}
.patpatdots-page.layout-v9 #tap .mode-button span{font-size:11px;line-height:1.45}
/* The final decision area should fit its message and both actions in one view. */
.patpatdots-page.layout-v9 .cta{
  min-height:clamp(430px,58svh,610px);
  padding:clamp(64px,8svh,86px) 0 clamp(48px,6svh,68px);
}
.patpatdots-page.layout-v9 .cta h2{font-size:clamp(52px,6.6vw,94px)}
.patpatdots-page.layout-v9 .cta p{margin-top:20px;font-size:15px}
.patpatdots-page.layout-v9 .cta .hero-actions{margin-top:24px}
.patpatdots-page.layout-v9 .design-rail-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin:clamp(70px,9vw,120px) 0 26px;
}
.patpatdots-page.layout-v9 .design-rail-head small{
  color:#676e4e;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
.patpatdots-page.layout-v9 .design-rail-head h3{
  margin:13px 0 0;
  font-size:clamp(32px,4.1vw,58px);
  line-height:.96;
  letter-spacing:-.055em;
}
.patpatdots-page.layout-v9 .design-rail-head p{
  max-width:690px;
  margin:14px 0 0;
  color:#62655d;
  font-size:13px;
  line-height:1.65;
}
.patpatdots-page.layout-v9 .design-rail-actions{display:flex;gap:8px;flex:0 0 auto}
.patpatdots-page.layout-v9 .design-rail-actions button{
  width:46px;
  height:46px;
  border:1px solid rgba(23,24,21,.17);
  border-radius:50%;
  background:#fffdf8;
  color:#171815;
  font-size:18px;
  transition:transform .2s ease,background .2s ease;
}
.patpatdots-page.layout-v9 .design-rail-actions button:hover{transform:translateY(-2px);background:var(--lime)}
.patpatdots-page.layout-v9 #design .design-wip-rail{
  display:flex!important;
  gap:16px;
  margin-right:calc((100vw - 100%)/-2);
  padding:0 max(24px,calc((100vw - min(1320px,calc(100vw - 48px)))/2)) 18px 0;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:0 24px;
  scrollbar-width:none;
  cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.patpatdots-page.layout-v9 #design .design-wip-rail::-webkit-scrollbar{display:none}
.patpatdots-page.layout-v9 #design .design-wip-rail[data-dragging="true"]{cursor:grabbing;user-select:none;scroll-snap-type:none}
/* 轨道里拖的是「滚动」，不是图片本身。不挡掉原生图片拖拽的话，指针落在图上时
   Chrome 会判成拖图并甩出 pointercancel，手势当场断掉（落在图注上却正常，因为
   那儿没有可拖的原生内容）。Firefox 不认这个属性，view.js 里另有一道 dragstart。 */
.patpatdots-page.layout-v9 #design .design-wip-rail img,
.patpatdots-page.layout-v9 #design .design-wip-rail video{-webkit-user-drag:none}
.patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot{
  flex:0 0 min(72vw,900px);
  min-width:0;
  scroll-snap-align:start;
  border-radius:28px;
}
.patpatdots-page.layout-v9 #design .design-wip-rail .media-blank{min-height:0;height:clamp(420px,55svh,620px)}
.patpatdots-page.layout-v9 #design .design-wip-rail figcaption{grid-template-columns:minmax(0,1fr) minmax(260px,.72fr)}
/* Brand covers and purchase controls stay clear of the global dot layer. */
.patpatdots-page.layout-v9 :is(.opening-hero,.hero-intro):has(.managed-media),
.patpatdots-page.layout-v9 .packages{
  position:relative;
  z-index:8;
}
.patpatdots-page.layout-v9 .cta>.shell{
  position:relative;
  z-index:12;
}
/* In the image-led chapters, the six dots sit on top of photography so the
   living system stays visible. Headings, captions and controls use z10–12 and
   therefore remain readable above the dots. */
.patpatdots-page.layout-v9 .living-stage:is(
  [data-section="wear"],
  [data-section="play"],
  [data-section="beyond-body"],
  [data-section="culture"]
){
  z-index:9;
}
.patpatdots-page.layout-v9 .living-stage:is(
  [data-section="wear"],
  [data-section="play"],
  [data-section="beyond-body"],
  [data-section="culture"]
) .living-node{
  box-shadow:
    0 16px 38px rgba(30,38,70,.28),
    0 0 24px rgba(160,192,255,.38),
    inset 0 0 13px rgba(255,255,255,.94);
}
/* Records, App UI and product specifications carry dense factual content;
   keep the dots behind those chapters instead of covering data or controls. */
.patpatdots-page.layout-v9 :is(#records,#app,#design){
  position:relative;
  z-index:8;
}
@media (min-width:981px) and (max-height:900px){.patpatdots-page.layout-v9 :is(#wear,#play,#five,#beyond-body,#culture,#design)>.shell{display:block}
.patpatdots-page.layout-v9 #wear .triptych{display:grid}
.patpatdots-page.layout-v9 #play .scene-grid{display:grid}
/* V8 temporarily moved the first card into the right-hand column. Once the
     chapter title lives on the image, restore the hero card to full width. */
.patpatdots-page.layout-v9 #wear .triptych>.media-slot:first-child,
.patpatdots-page.layout-v9 #play .scene-grid>.media-slot:first-child{
    grid-column:1/-1;
    grid-row:auto;
  }
.patpatdots-page.layout-v9 #beyond-body .wide-pair{display:grid}
.patpatdots-page.layout-v9 .chapter-poster{--poster-media-height:calc(100svh - 112px)}
.patpatdots-page.layout-v9 .chapter-poster>.section-head h2{font-size:clamp(48px,5.7vw,78px)}
.patpatdots-page.layout-v9 #tap .signal-visual{height:clamp(540px,68svh,650px)}
.patpatdots-page.layout-v9 #beyond-body .wide-pair .media-blank{height:clamp(440px,57svh,560px)}
.patpatdots-page.layout-v9 #design .design-wip-rail,
.patpatdots-page.layout-v9 #design .spec-table{grid-column:auto}}
@media (max-width:760px){html:has(.patpatdots-page),
.patpatdots-page{overflow-x:clip}
.patpatdots-page.layout-v9 .opening-wordmark{font-size:15.2vw;letter-spacing:-.06em}
/* The earlier flex shorthand with min() is dropped by some mobile browser
     engines. Use an explicit basis so Chinese copy never collapses into
     one-character columns. */
.patpatdots-page.layout-v9 #wear .triptych,
.patpatdots-page.layout-v9 #play .scene-grid,
.patpatdots-page.layout-v9 #beyond-body .wide-pair{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px;
    margin-right:calc((100vw - 100%)/-2);
    padding-right:14px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
.patpatdots-page.layout-v9 :is(#wear .triptych,#play .scene-grid,#beyond-body .wide-pair)::-webkit-scrollbar{display:none}
.patpatdots-page.layout-v9 :is(#wear .triptych,#play .scene-grid,#beyond-body .wide-pair)>.media-slot{
    flex:0 0 86vw!important;
    width:86vw;
    max-width:540px;
    min-width:0;
    scroll-snap-align:start;
  }
/* On mobile the App walkthrough is one full-width screen followed by four
     compact steps. This prevents the 320px step column from crushing the UI
     video into a narrow strip. */
.patpatdots-page.layout-v9 #app .app-layout{grid-template-columns:minmax(0,1fr)!important}
.patpatdots-page.layout-v9 #app .app-layout>.media-slot{width:100%;min-width:0}
.patpatdots-page.layout-v9 #app .app-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.patpatdots-page.layout-v9 #app .app-steps article{min-height:220px;padding:18px}
.patpatdots-page.layout-v9 #app .app-steps h3{margin-top:58px;font-size:20px}
.patpatdots-page.layout-v9 .chapter-poster{--poster-media-height:clamp(520px,76svh,680px)}
.patpatdots-page.layout-v9 .chapter-poster::after{
    background:
      linear-gradient(180deg,rgba(7,8,10,.62) 0,rgba(7,8,10,.18) 50%,rgba(7,8,10,.48) 100%),
      linear-gradient(90deg,rgba(7,8,10,.45),transparent 82%);
  }
.patpatdots-page.layout-v9 .chapter-poster>.section-head{
    left:22px;
    top:32px;
    width:calc(100% - 44px);
  }
.patpatdots-page.layout-v9 .chapter-poster>.section-head .section-index{margin-bottom:18px}
.patpatdots-page.layout-v9 .chapter-poster>.section-head h2{font-size:clamp(40px,12vw,58px)}
.patpatdots-page.layout-v9 .chapter-poster>.section-head p{max-width:340px;margin-top:13px;font-size:12px}
.patpatdots-page.layout-v9 #tap .signal-visual{height:clamp(520px,70svh,620px)}
.patpatdots-page.layout-v9 #tap .signal-readout{padding:18px}
.patpatdots-page.layout-v9 #tap .mode-button{min-height:112px;padding:16px}
.patpatdots-page.layout-v9 #tap .mode-button strong{margin-top:20px;font-size:19px}
.patpatdots-page.layout-v9 #beyond-body .wide-pair{display:flex}
.patpatdots-page.layout-v9 #beyond-body .wide-pair>.media-slot{flex:0 0 86vw;max-width:540px}
.patpatdots-page.layout-v9 #beyond-body .wide-pair .media-blank{height:auto;min-height:clamp(470px,118vw,620px)}
.patpatdots-page.layout-v9 #beyond-body .wide-pair figcaption{min-height:330px}
.patpatdots-page.layout-v9 .cta{min-height:0;padding:72px 0 50px}
.patpatdots-page.layout-v9 .cta h2{font-size:clamp(48px,14vw,72px)}
.patpatdots-page.layout-v9 .cta p{font-size:14px}
.patpatdots-page.layout-v9 .design-rail-head{align-items:flex-start;margin-top:72px}
.patpatdots-page.layout-v9 .design-rail-actions{display:none}
.patpatdots-page.layout-v9 #design .design-wip-rail{margin-right:calc((100vw - 100%)/-2);padding-right:14px}
.patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot{flex-basis:86vw;max-width:540px}
.patpatdots-page.layout-v9 #design .design-wip-rail .media-blank{height:clamp(430px,112vw,580px)}
.patpatdots-page.layout-v9 #design .design-wip-rail figcaption{display:block;min-height:0}}
@media(prefers-reduced-motion:reduce){.patpatdots-page.layout-v9 .design-rail-actions button{transition:none}
.patpatdots-page.layout-v9 #design .design-wip-rail{scroll-behavior:auto}}
/* ================================================================
   FLOATING SECTION DOCK · right edge, vertically centered
   Replaces the removed header menu with full-name pill buttons.
   Container is pointer-transparent; only the pills capture clicks,
   so the dock never blocks selecting or scrolling content beneath.
   ================================================================ */
.patpatdots-page .side-dock{
  position:fixed;
  right:22px;
  top:50%;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:9px;
  transform:translateY(-50%);
  pointer-events:none;
}
.patpatdots-page .side-dock a{
  pointer-events:auto;
  display:block;
  padding:9px 15px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(9,9,12,.55);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  white-space:nowrap;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease);
}
.patpatdots-page .side-dock a:hover{background:#fff;color:#0a0a0b;border-color:#fff;transform:translateX(-3px)}
.patpatdots-page .side-dock a:active{transform:translateX(0) scale(.96)}
.patpatdots-page .side-dock a.active{background:var(--lime);color:#11120f;border-color:var(--lime)}
.patpatdots-page .side-dock a.kit{background:var(--lime);color:#11120f;border-color:var(--lime);font-weight:900}
.patpatdots-page .side-dock a.kit.active{box-shadow:0 0 0 4px rgba(221,255,98,.25)}
@media(max-width:700px){.patpatdots-page .side-dock{right:12px;gap:7px}
.patpatdots-page .side-dock a{padding:8px 12px;font-size:9px}}
@media(max-height:560px){.patpatdots-page .side-dock{top:auto;bottom:18px;transform:none}}
/* WordPress block-theme overrides: keep this page isolated from global theme CSS. */
.patpatdots-page,
.patpatdots-page *{
  box-sizing:border-box!important;
}
.patpatdots-page{
  max-width:none!important;
  /* 只清纵向外边距，横向留给主题的 .has-global-padding>.alignfull 负外边距。
   * 原型是单文件页面，写 margin:0!important 无所谓；进区块后那句 !important
   * 权重 (0,1,0)+important 会压掉主题的 .has-global-padding>.alignfull
   * (0,2,0，无 important)，负外边距失效，区块就被夹在 entry-content 的
   * 左右 padding 里，宽度掉到 theme.json 的 wideSize(1340) 而不是满幅。
   * 纵向该归零还是归零，主题给 .is-layout-flow 的 blockGap 不留进来。 */
  margin-block:0!important;
  padding:0!important;
  overflow-x:clip!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif!important;
  /* 版式基线拉回浏览器默认值 —— 也就是原型当初所在的宿主环境。
   * 原型是单文件页面，body 上没人写版式，取的是 UA 的 16px / normal / 400 / normal；
   * 主题在 body 上写了 22px / 行高 1.4 / 字重 300 / 字距 -0.1px，会顺着继承流进
   * 区块里所有没显式声明版式的元素。dock 那个 font-size:10px 的链接最典型：
   * 无单位行高 1.4 在它身上算成 14px（原型是 normal≈12px），整条高 34 而不是 32，
   * 六条累计 12px，把整页每一项都往下推。
   * font-family 是原来就钉着的，这四项是同一条理由漏掉的。 */
  font-size:16px!important;
  line-height:normal!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}
/* 满幅全靠主题那条 alignfull：宽度 auto + 两侧各 -50px 负外边距 = 撑满 1440。
 * render.php 是按 width 属性把 alignfull 加在 .patpatdots-page 自己身上的，
 * 这时候再写 width:100% 就是自相矛盾：盒子先按父级内容盒(1340)定宽，负外边距
 * 只把它整体左移 50px，右边反而空出 100px。
 * 其余情况（alignwide/content，或被人包进 group 里）仍旧铺满父级，保持原型的防御性。 */
.patpatdots-page:not(.alignfull){
  width:100%!important;
}
.patpatdots-page img,
.patpatdots-page video,
.patpatdots-page canvas{
  max-width:none!important;
}
.patpatdots-page .shell{
  width:min(1320px,calc(100% - 48px))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.patpatdots-page h1,
.patpatdots-page h2,
.patpatdots-page h3,
.patpatdots-page h4,
.patpatdots-page p,
.patpatdots-page figure,
.patpatdots-page header{
  margin-block-start:0!important;
}
/* 标题的浏览器默认值。主题的全局样式（theme.json 的 styles.elements.heading）
 * 给 h1–h6 写了 font-weight:400 / letter-spacing:-0.1px / line-height:1.125，
 * 而原型是单文件页面，拿到的是 UA 的 bold / normal / normal。区块自己的标题规则
 * 大多显式声明了这几项、权重也更高，所以受影响的只有没声明的那些 —— TAP 那节
 * 压在深色舞台上的大标题就是，字重掉了 300，整节矮 1.5px。
 * 这里刻意不加 !important：(0,1,1) 刚好压过主题的 (0,0,1)，又低于区块里那些
 * 更具体的标题规则；加了 !important 反而会把区块自己的字重/行高全压掉。 */
.patpatdots-page h1,
.patpatdots-page h2,
.patpatdots-page h3,
.patpatdots-page h4,
.patpatdots-page h5,
.patpatdots-page h6{
  font-weight:bold;
  line-height:normal;
  letter-spacing:normal;
  text-wrap:wrap;
}
/* figure 的浏览器默认外边距是 1em 40px（顶部同样被上面那条 !important 归零）。
 * WP 区块库用 :where(figure){margin:0 0 1em} 把左右那 40px 抹了，而 .hero-shot
 * 自己没写外边距，于是它从 554px 涨到 634px，里面那张图跟着宽 88px。
 * 区块里显式写过外边距的 figure（如 .media-slot）权重更高，不受这条影响。 */
.patpatdots-page figure{
  margin:1em 40px;
}
/* WP 区块库还给这些元素加了 text-wrap:pretty（避免孤字换行），折行位置会变；
 * 原型拿到的是浏览器默认的 wrap。TAP 那节标题自己写了 balance，权重更高，
 * 照旧生效。 */
.patpatdots-page p,
.patpatdots-page figcaption,
.patpatdots-page caption,
.patpatdots-page blockquote{
  text-wrap:wrap;
}
.patpatdots-page a{
  text-decoration:none!important;
}
.patpatdots-page button,
.patpatdots-page input,
.patpatdots-page select,
.patpatdots-page textarea{
  font-family:inherit!important;
}
@media(max-width:680px){.patpatdots-page .shell{width:calc(100% - 28px)!important}}
/* ===== 修复：WordPress 主题会把正文标题/表单标签统一染成深色，这里按设计意图恢复 ===== */
/* 标题一律跟随所在区块的颜色（本页所有标题本就走继承，无独立 color） */
.patpatdots-page :is(h1,h2,h3,h4,h5,h6){color:inherit!important}
/* 开屏大图 hero：品牌 PATPATDOTS 及开场文案恢复白色 */
.patpatdots-page .opening-hero,
.patpatdots-page .opening-hero :is(.opening-kicker,.opening-wordmark,.opening-manifesto){color:#fff!important}
.patpatdots-page .opening-manifesto span{color:var(--lime)!important}
/* 联系区（邮件/手机留资）整块深色背景，所有文字恢复浅色，防止主题统一染黑 */
.patpatdots-page .interest-form{background:#0f1014!important;color:rgba(255,255,255,.72)!important}
.patpatdots-page .interest-form :is(h1,h2,h3,h4,h5,h6,p,li,label,legend,span,strong,b,em,small){color:inherit!important}
.patpatdots-page .interest-form .interest-form-intro h2,
.patpatdots-page .interest-form .forminator-title{color:#fff!important}
.patpatdots-page .interest-form .eyebrow{color:var(--lime)!important}
.patpatdots-page .interest-form :is(.forminator-subtitle,.forminator-label){color:rgba(255,255,255,.72)!important}
.patpatdots-page .interest-form input,
.patpatdots-page .interest-form select,
.patpatdots-page .interest-form textarea{color:#fff!important}
/* ==================================================================
   Bottom email form = WordPress/Forminator #6539 (server-rendered).
   These rules only matter once the page body lives inside WordPress,
   where the shortcode becomes <form id="forminator-module-6539">.
   Interaction mirrors the old landing: each interest option is a pill
   you can click — tapping highlights it (checked state → lime).
   ================================================================== */
/* 让表单贴合右侧栏（不套旧版那种居中大卡片） */
.patpatdots-page #forminator-module-6539{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
/* 表单自带的标题/副标题默认隐藏 —— 左侧 STAY IN THE LOOP 已承担文案；
   若想显示 WP 里填写的标题，删掉下面这条即可 */
.patpatdots-page #forminator-module-6539 .forminator-title,
.patpatdots-page #forminator-module-6539 .forminator-subtitle{display:none!important}
.patpatdots-page #forminator-module-6539 .forminator-row{
  display:block!important;
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
}
.patpatdots-page #forminator-module-6539 .forminator-col{
  display:block!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
}
.patpatdots-page #forminator-module-6539 .forminator-response,
.patpatdots-page #forminator-module-6539 .forminator-button-wrap{display:block!important}
/* 字段名（NAME / EMAIL / I'M INTERESTED IN） */
.patpatdots-page #forminator-module-6539 .forminator-label{
  display:block!important;
  width:100%!important;
  margin:0 0 8px!important;
  color:rgba(255,255,255,.62)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  line-height:1.4!important;
}
.patpatdots-page #forminator-module-6539 .forminator-required{color:var(--lime,#ddff62)!important}
/* 邮箱输入框（NAME/EMAIL 通用） */
.patpatdots-page #forminator-module-6539 .forminator-input{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,255,255,.2)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  padding:14px 16px!important;
  font-size:14px!important;
  outline:none!important;
  box-shadow:none!important;
}
.patpatdots-page #forminator-module-6539 .forminator-input::placeholder{color:rgba(255,255,255,.35)!important}
.patpatdots-page #forminator-module-6539 .forminator-input:focus{
  border-color:var(--lime,#ddff62)!important;
  box-shadow:0 0 0 3px rgba(221,255,98,.14)!important;
}
/* 兴趣选项 —— 药丸按钮，整粒可点，点选后高亮 */
.patpatdots-page #forminator-module-6539 .forminator-field-radio,
.patpatdots-page #forminator-module-6539 .forminator-field-checkbox{
  display:block!important;
  width:100%!important;
}
.patpatdots-page #forminator-module-6539 .forminator-radio,
.patpatdots-page #forminator-module-6539 .forminator-checkbox{
  position:relative!important;
  display:inline-block!important;
  width:auto!important;
  margin:0 8px 8px 0!important;
  padding:0!important;
  vertical-align:middle!important;
}
/* 真实 input 透明铺满整粒 —— 保证点击范围覆盖整颗药丸 */
.patpatdots-page #forminator-module-6539 .forminator-radio input,
.patpatdots-page #forminator-module-6539 .forminator-checkbox input{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  opacity:0!important;
  z-index:3!important;
  cursor:pointer!important;
}
/* 药丸外观（文字层） */
.patpatdots-page #forminator-module-6539 .forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-checkbox-label{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:11px 18px!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.05)!important;
  color:rgba(255,255,255,.78)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.patpatdots-page #forminator-module-6539 .forminator-radio:hover .forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-checkbox:hover .forminator-checkbox-label{
  border-color:rgba(255,255,255,.45)!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
}
/* 选中态 → lime（兼容不同 Forminator 结构：:checked 相邻 / :has / is_checked） */
.patpatdots-page #forminator-module-6539 .forminator-radio input:checked+.forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-checkbox input:checked+.forminator-checkbox-label,
.patpatdots-page #forminator-module-6539 .forminator-radio:has(input:checked) .forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-checkbox:has(input:checked) .forminator-checkbox-label,
.patpatdots-page #forminator-module-6539 .forminator-is_checked .forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-is_checked .forminator-checkbox-label{
  background:var(--lime,#ddff62)!important;
  border-color:transparent!important;
  color:#11120f!important;
  font-weight:800!important;
  box-shadow:0 0 16px rgba(221,255,98,.35)!important;
}
/* 提交按钮 */
.patpatdots-page #forminator-module-6539 .forminator-button-submit{
  display:block!important;
  width:100%!important;
  min-height:48px!important;
  margin:4px 0 0!important;
  padding:0 24px!important;
  border:0!important;
  border-radius:999px!important;
  background:var(--lime,#ddff62)!important;
  color:#11120f!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  box-shadow:none!important;
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease!important;
}
.patpatdots-page #forminator-module-6539 .forminator-button-submit:hover{
  background:#fff!important;
  color:#11120f!important;
  transform:translateY(-1px)!important;
  box-shadow:0 6px 20px rgba(255,255,255,.14)!important;
}
.patpatdots-page #forminator-module-6539 .forminator-button-submit:active{transform:translateY(0)!important}
/* 提交反馈 / 错误提示 */
.patpatdots-page #forminator-module-6539 .forminator-response-message{
  margin:14px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  text-align:left!important;
}
.patpatdots-page #forminator-module-6539 .forminator-response-message p{color:#ddff62!important;font-size:13px!important;margin:0!important}
.patpatdots-page #forminator-module-6539 .forminator-error-message{color:#ff9d94!important;font-size:11px!important;margin-top:6px!important}
.patpatdots-page #forminator-module-6539 .forminator-error--field{border-color:rgba(255,140,130,.6)!important}
/* 手机端：药丸全宽纵向排列 */
@media(max-width:760px){.patpatdots-page #forminator-module-6539 .forminator-radio,
.patpatdots-page #forminator-module-6539 .forminator-checkbox{display:block!important;width:100%!important;margin-right:0!important}
.patpatdots-page #forminator-module-6539 .forminator-radio-label,
.patpatdots-page #forminator-module-6539 .forminator-checkbox-label{width:100%!important}}
/* Clean public build: never print internal asset / motion labels. */
/* #records 截图(ui-08,竖屏)：宽度收窄、高度按截图比例自适应(不写死)，整张完整显示；去掉外围卡片框/衬底 */
.patpatdots-page #records [data-media-id="ui-08"]{
  width:min(160px,37%)!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1284/2778!important;
  align-self:start;
  justify-self:center;margin-inline:auto;background:none;
  border-bottom-left-radius:27px;border-bottom-right-radius:27px
}
.patpatdots-page #records>.shell>.media-slot{border:none;background:none;box-shadow:none}
/* #contact WhatsApp 社区入口 */
.patpatdots-page .interest-form .whatsapp-block{margin-top:36px}
.patpatdots-page .interest-form .whatsapp-block>p{margin:0 0 18px;color:var(--lime)!important;font-size:13px;line-height:1.7}
.patpatdots-page .interest-form .whatsapp-join{display:inline-flex;align-items:center;min-height:46px;padding:0 26px;border-radius:999px;background:var(--lime);color:#11120f;font-size:12px;font-weight:900;letter-spacing:.06em;text-decoration:none}
.patpatdots-page .interest-form .whatsapp-qr{display:block;width:150px;height:150px;margin-top:20px;padding:8px;border-radius:14px;background:#000;object-fit:contain}
/* “How the dot found its shape.” 上方的图片容器改为纯黑、去掉渐变 */
.patpatdots-page .media-blank[data-media-id="shot-13e"]{background:#000!important;background-image:none!important}
/* 同级第四个 HARDWARE EVOLUTION(shot-13c) 容器同样纯黑 */
.patpatdots-page .media-blank[data-media-id="shot-13c"]{background:#000!important;background-image:none!important}
/* 区块离开视口时收起两层固定元素 —— view.js 里的 IntersectionObserver 负责切换
 * data-fixed-layer。.side-dock 与 .living-stage 都是 position:fixed，不收的话会
 * 一直贴在视口上，飘过页眉、页脚和站内其它内容。
 *
 * 用 visibility 而不是把 --scroll-opacity 归零：区块整个滚出视口时它已经不在
 * 屏幕上了，做淡出只是拖着一层半透明的东西压住页脚；visibility 同时把命中测试
 * 和无障碍树一起摘掉。不加过渡，切换必须是瞬时的。
 *
 * 选择器的权重 (0,3,0) 高于 .patpatdots-page .living-stage 的 (0,2,0)，
 * 与 .patpatdots-page.layout-v4 .living-stage 打平 —— 那条只写 opacity，
 * 两者不冲突（visibility:hidden 会盖过任何 opacity）。 */
.patpatdots-page[data-fixed-layer="off"] > .side-dock,
.patpatdots-page[data-fixed-layer="off"] > .living-stage{visibility:hidden}

/* ==========================================================================
   图片完整展示 —— 让框去贴合图片自己的宽高比
   ==========================================================================

   cover 会裁掉一部分，contain 会把图缩在框中间、四周留空条。这里换个方向：每个
   位把自己那张图的比例写成 --pp-ar，框按它伸缩，图就正好铺满。

   往哪边伸缩，由「哪个维度被版式锁死」决定。三种情形的共同点是**改后高度不超过
   改前**（只有 shop 那三张会高约 50px，因为原来的框实在太扁）：
     高度锁死 → 收窄宽度   design 横向轨道
     宽度锁死 → 压矮高度   play 网格、hero 栏
     两边都不合适 → 固定方块   shop 的扁框里放方形图

   注意「图占框比例」这个指标只在框比图更极端时才有意义。章节海报那三张量出来是
   47%~79%，但图的背景是柔和渐变、和卡片深色底融合，contain 的空条肉眼看不见 ——
   照那个数去收窄反而把区块掏空了，所以它们保持满宽（见下面 a 段）。

   ⚠️ 比例是写死的，属于「按图配框」不是「按框配图」：换了图（比例变了）就要改
      这里的数。和上面 #records ui-08 那条是同一条约定。每行后面注了来源像素。
   ========================================================================== */
.patpatdots-page [data-media-id="shot-13b"],
.patpatdots-page [data-media-id="shot-13f"]{--pp-ar:1.49953}  /* 1600x1067 */
.patpatdots-page [data-media-id="shot-05"]{--pp-ar:1.33333}   /* 1448x1086 */
.patpatdots-page [data-media-id="shot-06"]{--pp-ar:1.5}       /* 1536x1024 */
.patpatdots-page [data-media-id="hero"]{--pp-ar:1.50094}      /* 1600x1066 */
.patpatdots-page :is(
  [data-media-id="packshot-a"],
  [data-media-id="packshot-b"],
  [data-media-id="packshot-c"]
){--pp-ar:1.09749}                                            /* 1137x1036 */

/* a. 章节海报（shot-01 / shot-11 / shot-13a）**不在这里改** —— 试过了，退回来了。

   它们的高度由 --poster-media-height 锁死，按图收窄就得连带把 figure 一起收窄，
   结果区块里空出一大片背景（culture 那张 1440 里只占 618px，右边 822px 全空），
   比不改更难看。而且这个「留白」本来是量出来的假问题：三张图的背景都是柔和渐变，
   和卡片的深色底自然融合，contain 留出的空条肉眼根本看不见 —— 「图占框 47%」
   这个数不等于观感差。它们一直在 contain 名单里（见上面的 object-fit 段），
   本来就没有裁切。

   真正需要修的是被 cover 真裁掉的那批（shot-05 / 06 / hero / 13b / 13f）和
   packshot-a 那个 31% 的扁条，那些改动保留。 */

/* b. design 横向轨道 —— 高度 clamp(420px,55svh,620px) 锁死，slide 宽度按各自图片
   比例算。shot-13c / shot-13e 没有 --pp-ar，落回 1.82（≈它们原来的 898px），保持
   原样；13b / 13f 变成 742px。轨道里宽度参差本来就是画廊该有的样子。

   flex 那条限定在 ≥761px：窄屏下轨道由 :1385 的 86vw 接管，不该被这里顶掉。 */
.patpatdots-page.layout-v9 #design .design-wip-rail{--wip-h:clamp(420px,55svh,620px)}
.patpatdots-page.layout-v9 #design .design-wip-rail .media-blank{min-height:0;height:var(--wip-h)}
.patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot:has(>[data-media-id="shot-13b"]),
.patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot:has(>[data-media-id="shot-13f"]){--pp-ar:1.49953}
@media (min-width:761px){
  .patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot{
    flex:0 0 min(72vw,calc(var(--wip-h) * var(--pp-ar,1.82)));
  }
}

/* c. 宽度被版式锁死的那几处 —— 让高度跟着图片比例压矮。

   .scene-grid 是两列网格、.hero-shot 由 hero 网格第二栏决定宽度，往宽里拉会顶破
   网格，所以只能往矮里走（结果比现在矮 132 / 186 / 191px）。框的比例和图片一致
   之后，原来的 cover 也就等于 contain，不必再动 object-fit。 */
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:not(:first-child) .media-blank,
.patpatdots-page.layout-v6 .hero-intro .hero-shot{
  aspect-ratio:var(--pp-ar);
  height:auto;
  min-height:0;
}
/* 网格默认 align-items:stretch 会把两格拉成同高，图就会被拉回原来的比例上。 */
.patpatdots-page.layout-v6 #play .scene-grid>.media-slot:not(:first-child){align-self:start}

/* d. shop 的三张卡 —— 401x112 的扁框里放 1137x1036 的方形图，两头都不合适：按宽度
   配要 365px 高，按高度配只有 123px 宽。直接给一个固定方块。

   选择器要和 :1087 的 .layout-v6 #shop .package-blank 同等权重，靠源码顺序取胜；
   只写 .patpatdots-page #shop 会输给它。卡片本身是 min-height:470px，框变高约
   50px 不会把卡片撑变形。packshot-b / packshot-c 是空槽，一起变成同尺寸方块，
   三张卡片才齐。 */
.patpatdots-page.layout-v6 #shop .package-blank{
  min-height:0;
  width:180px;
  max-width:100%;
  aspect-ratio:var(--pp-ar);
}

/* e. 窄屏（≤760px）—— 只改 design 轨道，海报不动。

   海报这一档保持原样（--poster-media-height 仍是 clamp(520px,76svh,680px)）。
   窄屏下那层白字标题是绝对定位压在图上、要占到 340px 上下，图片一收窄标题就
   溢到浅色卡片上，变成白底白字（shot-01 的 "own clothes." 那行直接看不见）。
   也就是说窄屏海报的高度是标题定的、不是图片定的。图片在那边本来就是 contain，
   已经完整显示，只是四周有留白 —— 这一档没有可改的余地，动了就是回退。

   design 轨道不一样：图的下面是 figcaption，没有东西压在图上，可以按图比例走。
   三个属性都要 !important：v9 的 .chapter-poster>.media-blank（:1109）把 height
   和 aspect-ratio 都写了 !important，少一个就变成 height:auto 配 aspect-ratio:auto，
   框塌成 0 高。

   13c/13e 也一起按比例（1.77778）—— 这不是扩范围，是修我自己的锅：只改 13b/13f
   的话它们缩到 222 高，而卡片被拉到 683（最高的 13c 决定），底下空出 291px 死白，
   比不改还难看。三条一起按比例后卡片高度落在 311~440 之间，每张图都完整。
   这两条只写在窄屏里，桌面仍是原样的 98%。

   align-items:flex-start 让卡片收成内容高，不再被最高的那张撑开。 */
@media (max-width:760px){
  .patpatdots-page.layout-v9 #design .design-wip-rail{align-items:flex-start}
  .patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot:has(>[data-media-id="shot-13c"]),
  .patpatdots-page.layout-v9 #design .design-wip-rail>.media-slot:has(>[data-media-id="shot-13e"]){--pp-ar:1.77778} /* 1600x900 */
  .patpatdots-page.layout-v9 #design .design-wip-rail .media-blank{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:var(--pp-ar,1.82)!important;   /* 1.82 兜底：空槽 shot-13d */
  }
}

/* 首屏视频接在导语前面时，导语不再负责「一整屏开场」。
   .hero 的 100svh 最小高度 + 130px 上内边距是给「封面 → 导语」设计的；
   中间多了一个播放器之后，这段空间就变成视频与标题之间的一条空带。
   有视频时去掉最小高度、收紧上内边距，其余排版不动。规则放在文件末尾，
   是为了压过窄屏高度媒体查询里的 .layout-v6 .hero-intro（同为 3 个类）。 */
.patpatdots-page .hero.has-hero-video{min-height:0;padding-top:clamp(40px,3.5vw,56px)}