.playbook { --pb-ink:#1a1714; --pb-muted:rgba(26,23,20,.68); --pb-paper:#f6f1e8; --pb-line:rgba(63,8,8,.1); background:var(--pb-paper); color:var(--pb-ink); }
.pb-wrap { width:min(1280px, calc(100% - clamp(32px,8vw,96px))); margin-inline:auto; }
.pb-hero { overflow:hidden; color:#fff; background:radial-gradient(ellipse at 75% 40%,#723444 0%,transparent 58%),linear-gradient(118deg,#300a1b,#4b142a 52%,#250916); }
.pb-hero-grid { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:40px; padding-block:44px; }
.pb-eyebrow { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:650; letter-spacing:.08em; }
.pb-eyebrow>span { width:8px; height:8px; background:#e7c58d; border-radius:50%; }
.pb-hero .pb-eyebrow { color:rgba(255,255,255,.7); font-size:14px; letter-spacing:.02em; }
.pb-hero h1 { margin:20px 0; font-size:clamp(30px,3.5vw,42px); font-weight:700; line-height:1.4; letter-spacing:-.03em; }
.pb-hero h1 em { color:#f3d8af; font-style:normal; }
.pb-intro { color:rgba(255,255,255,.78); font-size:17px; line-height:1.85; }
.pb-button { display:inline-flex; align-items:center; gap:32px; min-height:48px; padding:12px 24px; background:#fff; color:#3f0808; border-radius:999px; font-size:16px; font-weight:700; margin-top:26px; transition:transform .2s; }
.pb-button:hover { transform:translateY(-2px); }
.pb-hero-foot { font-size:13px; margin-top:24px; color:rgba(255,255,255,.62); line-height:1.8; }
.pb-hero-foot span { margin-inline:7px; color:rgba(255,255,255,.3); }
.pb-hero-art { min-width:0; }
.pb-hero-art--diagram img { width:100%; height:auto; }
.pb-card-art.pb-card-art--diagram { padding:0; height:auto; aspect-ratio:8/5; background:#f6f0ed; }
.pb-card-art--diagram img { display:block; width:100%; height:100%; object-fit:contain; }
.pb-hero-art svg { display:block; width:100%; max-width:540px; margin-inline:auto; height:auto; filter:drop-shadow(0 14px 26px rgba(10,2,8,.2)); }
.pb-hero-art--photo { overflow:hidden; border-radius:24px; box-shadow:0 18px 48px rgba(12,2,8,.3); }
.pb-hero-art--photo img { width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; }
.pb-card-art.pb-card-art--photo { padding:0; }
.pb-card-art--photo img { width:100%; height:100%; object-fit:cover; object-position:center 43%; }
.pb-art-defs { position:absolute; width:0; height:0; overflow:hidden; }
.pb-goals { background:#fff; border-bottom:1px solid var(--pb-line); scroll-margin-top:var(--header-total); }
.pb-goals-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding-block:25px; }
.pb-goal { display:flex; align-items:flex-start; gap:12px; padding:7px 18px; border-left:1px solid var(--pb-line); }
.pb-goal:first-child { padding-left:0; border-left:0; }
.pb-goal-no { font-size:18px; font-weight:700; line-height:1.4; color:#3f0808; background:#f3e8e8; border-radius:10px; min-width:38px; height:38px; display:grid; place-items:center; }
.pb-goal strong { display:block; font-size:16px; font-weight:700; line-height:1.6; }
.pb-goal small { display:block; color:var(--pb-muted); font-size:13px; margin-top:5px; }
.pb-goal small span { padding-left:30px; }
.pb-goal:hover strong { text-decoration:underline; text-underline-offset:5px; }
.pb-tone-apricot { --pb-tint:#f5eae5; --pb-accent:#7a3227; --pb-darker:#3f0808; }
.pb-tone-sage { --pb-tint:#eaf0e7; --pb-accent:#567057; --pb-darker:#3f0808; }
.pb-tone-lilac { --pb-tint:#efeaf1; --pb-accent:#786285; --pb-darker:#3f0808; }
.pb-tone-butter { --pb-tint:#f5eedc; --pb-accent:#997426; --pb-darker:#3f0808; }
.pb-catalog { padding-top:8px; padding-bottom:82px; }
.pb-group { padding-top:64px; scroll-margin-top:calc(var(--header-total) + 22px); }
.pb-group-head { display:flex; align-items:center; gap:20px; margin-bottom:28px; }
.pb-section-no { font-size:32px; font-weight:700; line-height:1; color:#3f0808; opacity:.28; padding-right:20px; border-right:1px solid var(--pb-line); }
.pb-group-head h2 { font-size:clamp(24px,2.5vw,32px); font-weight:700; letter-spacing:-.02em; line-height:1.4; color:#3f0808; }
.pb-group-head p { margin-top:10px; color:var(--pb-muted); font-size:16px; line-height:1.8; }
.pb-group-count { margin-left:auto; white-space:nowrap; color:var(--pb-muted); font-size:14px; }
.pb-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.pb-cards--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pb-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--pb-line); border-radius:24px; overflow:hidden; box-shadow:0 8px 24px rgba(26,23,20,.04); transition:transform .2s,box-shadow .2s,border-color .2s; }
.pb-card:hover { transform:translateY(-4px); border-color:var(--pb-accent); box-shadow:0 12px 30px #302a250b; }
.pb-card-art { position:relative; background:var(--pb-tint); height:236px; padding:20px 14px 0; overflow:hidden; border-bottom:1px solid var(--pb-line); }
.pb-art-caption { position:absolute; top:16px; left:22px; font-size:12px; color:var(--pb-darker); opacity:.6; letter-spacing:.02em; }
.pb-card-art svg { width:100%; max-width:400px; margin-inline:auto; height:100%; display:block; color:var(--pb-accent); }
.pb-card-art svg text,.pb-hero-art svg text { font-family:"Microsoft YaHei","PingFang SC",sans-serif; }
.pb-card-copy { padding:28px; display:flex; flex-direction:column; flex:1; }
.pb-when { color:rgba(63,8,8,.62); font-size:14px; font-weight:500; margin-bottom:10px; line-height:1.7; }
.pb-card h3 { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.4; color:#3f0808; }
.pb-how { margin-top:16px; font-size:16px; line-height:1.85; color:var(--pb-muted); }
.pb-steps { display:flex; flex-wrap:wrap; gap:7px 0; margin-top:22px; list-style:none; font-size:13px; font-weight:600; color:var(--pb-darker); }
.pb-steps li+li::before { content:"→"; padding-inline:7px; color:#a89e91; }
.pb-note { margin-top:18px; padding-top:16px; border-top:1px solid var(--pb-line); color:rgba(26,23,20,.56); font-size:13px; line-height:1.8; }
.pb-card-link { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:24px; font-size:15px; font-weight:700; color:#3f0808; }
.pb-card-link>span { border:1px solid var(--pb-line); border-radius:50%; width:29px; height:29px; display:grid; place-items:center; color:var(--pb-accent); }
.pb-card:hover .pb-card-link>span { background:var(--pb-accent); color:white; border-color:var(--pb-accent); }
.pb-start { background:var(--pb-paper); padding-block:8px 48px; }
.pb-start-grid { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; background:#3f0808; color:#fff; padding:40px; border-radius:28px; }
.pb-start h2 { font-size:clamp(28px,3.5vw,40px); line-height:1.45; margin:16px 0 20px; letter-spacing:-.03em; }
.pb-start h2+p { color:rgba(255,255,255,.78); max-width:600px; font-size:16px; line-height:1.85; }
.pb-start-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:24px; font-size:15px; font-weight:600; }
.pb-start-links a { text-decoration:underline; text-underline-offset:5px; }
.pb-start .pb-scope { margin-top:24px; font-size:13px; color:rgba(255,255,255,.6); max-width:600px; line-height:1.8; }
.pb-scan { padding:24px; background:#fff; color:#3f0808; border-radius:18px; text-align:center; display:flex; align-items:center; flex-direction:column; }
.pb-scan img { margin:0 auto 15px; }
.pb-scan strong { font-size:14px; }
.pb-scan span { font-size:13px; color:var(--pb-muted); margin:8px 0 14px; }
.pb-scan a { font-size:14px; color:#3f0808; text-decoration:underline; text-underline-offset:4px; }
.playbook a:focus-visible { outline:3px solid #833429; outline-offset:5px; }
@media (max-width:1050px) { .pb-goal { padding-inline:12px; gap:8px; } .pb-goal strong { font-size:14px; } .pb-hero-grid { gap:20px; } .pb-hero h1 { font-size:34px; } .pb-card-copy { padding:24px; } .pb-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .pb-wrap { width:calc(100% - 36px); } .pb-hero-grid { grid-template-columns:1fr; padding-block:38px 10px; } .pb-hero h1 { font-size:clamp(27px,6vw,37px); margin-block:20px 18px; } .pb-intro { font-size:15px; } .pb-hero-art { width:min(100%,460px); margin:-6px auto 0; } .pb-hero-foot { font-size:12px; } .pb-goals-grid { grid-template-columns:1fr 1fr; row-gap:20px; padding-block:22px; } .pb-goal:nth-child(3) { border-left:0; padding-left:0; } .pb-goal strong { font-size:14px; } .pb-goal-no { font-size:16px; min-width:32px; height:32px; } .pb-group { padding-top:38px; } .pb-group-head { gap:12px; align-items:flex-start; } .pb-section-no { font-size:33px; padding-right:12px; } .pb-group-head h2 { font-size:24px; } .pb-group-head p { font-size:15px; line-height:1.8; } .pb-group-count { display:none; } .pb-cards,.pb-cards--two { grid-template-columns:1fr; gap:20px; } .pb-card-art { height:220px; } .pb-card-copy { padding:24px; } .pb-card h3 { font-size:24px; } .pb-how { font-size:16px; } .pb-steps { font-size:13px; } .pb-start-grid { grid-template-columns:1fr; gap:28px; padding:28px 24px; } .pb-start { padding-block:40px; } .pb-scan { justify-self:start; width:100%; } .pb-catalog { padding-bottom:45px; } }
@media (prefers-reduced-motion:reduce) { .pb-card,.pb-button { transition:none; } }