/* ===== Booklet section (3D) ===== */
.bk{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4rem);align-items:center;background:var(--ink-2);border:1px solid var(--line);border-radius:32px;padding:clamp(1.5rem,4vw,3.5rem);overflow:hidden}
.bk::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-2;pointer-events:none;background-image:radial-gradient(520px 380px at 20% 55%,rgba(47,166,224,.14),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;-webkit-mask-image:radial-gradient(ellipse at 22% 50%,#000,transparent 62%);mask-image:radial-gradient(ellipse at 22% 50%,#000,transparent 62%);opacity:.55}
.bk-tx{display:flex;flex-direction:column;gap:1.3rem}
.bk-tx h2{font-size:clamp(1.8rem,3.2vw,2.8rem);line-height:1.25}
.bk-tx p{color:var(--muted)}
.bk .meta-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;color:var(--muted);font-size:var(--s-small)}
.bk .tag{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .85rem;border-radius:999px;background:var(--accent);color:#fff;font-weight:500}
.bk-live i{width:7px;height:7px;border-radius:50%;background:#fff;animation:bkPulse 2s infinite}
@keyframes bkPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
.bk-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:20px;max-width:34rem;background:var(--ink)}
.bk-stats>div{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.15rem}
.bk-stats>div+div{border-inline-start:1px solid var(--line)}
.bk-stats b{font-size:1.7rem;line-height:1.2;color:var(--fg)}
.bk-stats small{color:var(--muted);font-size:var(--s-small)}
.bk-stage{position:relative;display:flex;justify-content:center;align-items:center;min-height:500px;perspective:2200px;text-decoration:none;color:inherit}
.bk-halo{position:absolute;width:400px;height:400px;max-width:100%;border-radius:50%;background:radial-gradient(circle,rgba(47,166,224,.35),transparent 65%);filter:blur(30px)}
.bk-book{--w:320px;--h:426px;--d:18px;position:relative;display:block;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateY(24deg) rotateX(8deg) rotateZ(-2deg);transition:transform .9s var(--ease);animation:bkFloat 6s ease-in-out infinite}
@keyframes bkFloat{50%{translate:0 -10px}}
.bk-stage:hover .bk-book,.bk-stage:focus-visible .bk-book{transform:rotateY(8deg) rotateX(4deg)}
.bk-page{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(90deg,#e3e9f1,#f4f6fa 7%);border-radius:4px 14px 14px 4px;transform:translateZ(calc(var(--d)*-1 + 2px));padding:32px 28px 28px 24px;color:#0b1d38;overflow:hidden}
.bk-pk{font-size:12.5px;color:#03689A;font-weight:700}
.bk-ph{font-size:21px;font-weight:700;margin:.2rem 0 1.2rem}
.bk-toc{display:grid;gap:10px}
.bk-toc>span{display:flex;align-items:baseline;gap:10px;font-size:14px;font-weight:500;padding-bottom:9px;border-bottom:1px dashed #cdd6e3}
.bk-toc em,.bk-toc i{font-style:normal;font-size:12px;font-weight:700;color:#03689A;min-width:20px}
.bk-toc i{margin-inline-start:auto;color:#8394ad;font-weight:500;min-width:0}
.bk-edge{position:absolute;top:4px;bottom:4px;left:0;width:var(--d);transform-origin:left center;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#f6f8fb 0 1.5px,#d2dae6 1.5px 3px)}
.bk-edge-b{position:absolute;left:4px;right:0;bottom:0;height:var(--d);transform-origin:bottom center;transform:rotateX(90deg);background:repeating-linear-gradient(0deg,#f6f8fb 0 1.5px,#cfd8e4 1.5px 3px)}
.bk-spine{position:absolute;top:0;bottom:0;right:0;width:var(--d);transform-origin:right center;transform:rotateY(-90deg);background:linear-gradient(90deg,#071226,#0f2546 50%,#071226)}
.bk-cover{position:absolute;inset:0;transform-origin:right center;transform:translateZ(1px);transform-style:preserve-3d;transition:transform 1s var(--ease)}
.bk-stage:hover .bk-cover,.bk-stage:focus-visible .bk-cover{transform:translateZ(1px) rotateY(-34deg)}
.bk-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:28px 26px;border-radius:4px 14px 14px 4px;overflow:hidden;backface-visibility:hidden;color:#fff;background:radial-gradient(120% 70% at 80% 0%,rgba(47,166,224,.45),transparent 55%),radial-gradient(80% 50% at 0% 100%,rgba(47,166,224,.18),transparent 60%),linear-gradient(170deg,#0f2850,#081731 55%,#050e20);box-shadow:inset -10px 0 18px -8px rgba(0,0,0,.6),0 30px 60px -20px rgba(0,0,0,.6)}
.bk-face::before{content:"";position:absolute;top:0;bottom:0;right:14px;width:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent);box-shadow:-3px 0 6px rgba(0,0,0,.35)}
.bk-face::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.12) 48%,transparent 56%);transform:translateX(60%);transition:transform 1.2s ease}
.bk-stage:hover .bk-face::after{transform:translateX(-60%)}
.bk-back{position:absolute;inset:0;border-radius:14px 4px 4px 14px;background:linear-gradient(90deg,#d9e1ec,#eef2f7);transform:rotateY(180deg);backface-visibility:hidden}
.bk-x{position:absolute;left:-60px;bottom:-40px;width:290px;height:290px;opacity:.09}
.bk-stars{position:absolute;inset:0;opacity:.55;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 18%,#fff,transparent),radial-gradient(1px 1px at 40% 70%,#fff,transparent),radial-gradient(1px 1px at 85% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 12% 82%,#9fdcff,transparent),radial-gradient(1px 1px at 58% 42%,#fff,transparent)}
.bk-top{position:relative;display:flex;justify-content:space-between;align-items:center}
.bk-logo{height:34px;width:71px;color:#fff}
.bk-f1{z-index:4}
[dir=ltr] .bk-f1{left:auto;right:-10px}
[dir=ltr] .bk-f2{right:auto;left:-14px}
@media (max-width:600px){[dir=ltr] .bk-f1{right:-4px}[dir=ltr] .bk-f2{left:-4px}}
.bk-yr{font-size:11px;color:#9fb6d6;border:1px solid rgba(255,255,255,.2);padding:3px 10px;border-radius:99px}
.bk-mid{position:relative;margin-top:auto;display:flex;flex-direction:column}
.bk-lbl{display:flex;align-items:center;gap:8px;font-size:12px;color:#5fd0ff;font-weight:600;margin-bottom:10px}
.bk-lbl::before{content:"";width:18px;height:1.5px;background:currentColor}
.bk-title{font-size:26px;line-height:1.35;font-weight:700;margin-bottom:16px}
.bk-title em{font-style:normal;color:#5fd0ff}
.bk-chips{display:flex;flex-wrap:wrap;gap:6px}
.bk-chips span{font-size:10.5px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#d6e3f3}
.bk-foot{position:relative;margin-top:22px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:10px;color:#7f95b4;direction:ltr}
.bk-float{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:16px;background:color-mix(in srgb,var(--ink-2) 78%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);font-size:.85rem;white-space:nowrap;animation:bkFloat 5s ease-in-out infinite}
.bk-float b{display:block;font-weight:600;color:var(--fg)}
.bk-float small{display:block;color:var(--muted);font-size:.74rem}
.bk-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(47,166,224,.16);color:var(--accent)}
.bk-f1{top:70px;left:-10px}
.bk-f2{bottom:30px;right:-14px;animation-delay:.8s}
@media (max-width:1024px){.bk{grid-template-columns:minmax(0,1fr)}.bk-stage{order:-1}}
@media (max-width:600px){.bk-book{--w:250px;--h:334px;--d:14px}.bk-face{padding:22px 20px}.bk-title{font-size:20px}.bk-foot{display:none}.bk-stage{min-height:420px}.bk-stats>div{padding:.8rem .7rem}.bk-stats b{font-size:1.35rem}.bk-float{font-size:.78rem;padding:9px 11px}.bk-f1{left:-4px;top:10px}.bk-f2{right:-4px;bottom:-4px}.bk-page{padding:22px 18px}.bk-toc>span{font-size:12px}}
@media (prefers-reduced-motion:reduce){.bk-book,.bk-float,.bk-live i{animation:none}}