/* The doc reader. One look for all seven docs; a doc sets --c, --ci and its fonts on :root through docs.js. */
:root {
  --c: #ffb21e; --ci: #16131c; --bg: #fbf7f1; --s1: #ffffff; --s2: #f1ebe1; --fg: #16131c; --mu: #5f5869; --ln: #e4dccf;
  --fd: "Eczar", Georgia, serif; --fb: "Literata", Georgia, serif; --hand: var(--fd);
  --today: #16a37f; --next: #4a90f0; --later: #9a6bf0;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121016; --s1: #1b1920; --s2: #25222b; --fg: #f5f1ea; --mu: #aaa3b4; --ln: #302c37; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #121016; --s1: #1b1920; --s2: #25222b; --fg: #f5f1ea; --mu: #aaa3b4; --ln: #302c37; color-scheme: dark; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.55 var(--fb); font-optical-sizing: auto; font-synthesis-weight: none; overflow-x: hidden; padding-bottom: 100px; }
a { color: inherit; } img { max-width: 100%; display: block; } button, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 980px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--fd); margin: 0; line-height: 1.02; text-wrap: balance; font-weight: 700; }

/* top bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 30; }
.oldbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 25; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ln); }
.bar .wrap { display: flex; gap: 8px; align-items: center; padding-block: 8px; }
.bar .doc { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.bar select { background: var(--s2); border: 1px solid var(--ln); border-radius: 999px; padding: 7px 10px; max-width: 46vw; }
.bar button { border: 1px solid var(--ln); background: var(--s1); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 700; white-space: nowrap; }
.bar button[aria-pressed="true"] { background: var(--c); color: var(--ci); border-color: var(--c); }
.prog { position: absolute; left: 0; bottom: -1px; height: 3px; background: var(--c); width: 0; }

/* cover */
.cover { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; align-items: center; padding-block: clamp(28px, 6vw, 64px); }
@media (max-width: 760px) { .cover { grid-template-columns: minmax(0, 1fr); } .cover .pic { order: -1; max-width: 340px; } }
.cover .kick { font-weight: 800; letter-spacing: .06em; font-size: 13px; color: var(--mu); }
.cover h1 { font-size: clamp(44px, 8vw, 88px); margin: 8px 0 14px; }
.cover .line { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; max-width: 30ch; }
.cover .time { margin-top: 14px; color: var(--mu); }
.cover .pic { background: var(--c); border-radius: 32px; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.cover .pic img { width: 76%; height: 76%; object-fit: contain; }
.cover .pic .cast { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 86%; }
.cover .pic .cast img { width: 100%; height: auto; aspect-ratio: 1; }
@media (prefers-reduced-motion: no-preference) { .cover .pic > img { animation: bob 3.4s ease-in-out infinite; } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }

/* chapter map */
.map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 40px; }
.map a { display: flex; gap: 12px; align-items: center; text-decoration: none; background: var(--s1); border: 1px solid var(--ln); border-radius: 18px; padding: 12px 14px; transition: transform .15s; }
.map a:hover { transform: translateY(-2px); border-color: var(--c); }
.map b { font-family: var(--fd); font-size: 26px; color: var(--c); min-width: 34px; -webkit-text-stroke: .5px var(--fg); }
.map span { font-weight: 700; line-height: 1.2; } .map small { display: block; color: var(--mu); font-weight: 500; }

/* chapter */
.chap { margin-top: 56px; }
.chap > header { background: var(--c); color: var(--ci); border-radius: 26px; padding: clamp(20px, 4vw, 34px); display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.chap > header .n { font-family: var(--fd); font-size: clamp(54px, 9vw, 96px); line-height: .8; }
.chap > header h2 { font-size: clamp(30px, 5vw, 52px); }
.chap > header p { margin: 8px 0 0; font-weight: 600; max-width: 46ch; }
.chap > header img { width: clamp(80px, 14vw, 130px); flex: none; }
@media (max-width: 560px) { .chap > header img { display: none; } }

/* concept page */
.pg { background: var(--s1); border: 1px solid var(--ln); border-radius: 26px; padding: clamp(18px, 3.4vw, 32px); margin-top: 16px; }
.pg .t { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pg h3 { font-size: clamp(24px, 3.4vw, 34px); }
.pg .one { font-size: clamp(20px, 2.5vw, 25px); line-height: 1.32; font-weight: 700; margin: 12px 0 0; max-width: 40ch; }
.pg .one mark { background: color-mix(in srgb, var(--c) 40%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }
.ten { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.ten li { display: flex; gap: 10px; align-items: flex-start; }
.ten li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2316131c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.ten-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--mu); margin-top: 18px; }
.say { display: flex; gap: 12px; align-items: flex-end; margin-top: 20px; }
.say img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.say q { quotes: none; background: var(--s2); border-radius: 20px 20px 20px 4px; padding: 12px 16px; font-family: var(--hand); font-size: 21px; line-height: 1.2; position: relative; }
.say q small { display: block; font: 700 12px var(--fb); color: var(--mu); margin-top: 4px; }
.say button { white-space: nowrap; flex: none; border: 0; background: var(--c); color: var(--ci); border-radius: 999px; padding: 6px 12px; font-weight: 800; cursor: pointer; margin-left: 6px; }
.skim .pg .show, .skim .pg details, .skim .pg .say { display: none; }

/* status tags */
.tag { font: 800 11px var(--fb); letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; color: #fff; white-space: nowrap; vertical-align: middle; }
.tag.today { background: var(--today); } .tag.next { background: var(--next); } .tag.later { background: var(--later); }

/* visual blocks */
.show { margin-top: 22px; display: grid; gap: 14px; }
.blk-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--mu); }
.steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.steps .s { flex: 1 0 140px; background: var(--s2); border-radius: 18px; padding: 14px; position: relative; }
.steps .s b { font-family: var(--fd); font-size: 30px; color: var(--c); -webkit-text-stroke: .5px var(--fg); display: block; line-height: 1; }
.steps .s strong { display: block; margin: 6px 0 4px; line-height: 1.2; }
.steps .s span { color: var(--mu); font-size: 15px; display: block; line-height: 1.35; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cards .cd { background: var(--s2); border-radius: 18px; padding: 14px 16px; border-top: 5px solid var(--cc, var(--c)); min-width: 0; }
.cards .cd strong { display: block; line-height: 1.2; margin-bottom: 4px; }
.cards .cd span { color: var(--mu); font-size: 15px; line-height: 1.4; display: block; }
.cards .cd .tag { float: right; margin-left: 6px; }
.swap { display: grid; gap: 6px; }
.swap .r { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 8px; }
.swap .a, .swap .b { padding: 10px 14px; border-radius: 14px; line-height: 1.25; }
.swap .a { background: var(--s2); font-weight: 700; }
.swap .b { background: color-mix(in srgb, var(--c) 28%, transparent); font-weight: 700; }
.swap .b small, .swap .a small { display: block; font-weight: 500; color: var(--mu); font-size: 13px; }
.swap .arr { text-align: center; color: var(--mu); font-weight: 800; }
.swap .h { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--mu); }
.chat { display: grid; gap: 8px; max-width: 560px; }
.chat .m { padding: 10px 14px; border-radius: 18px; max-width: 85%; line-height: 1.35; }
.chat .you { background: var(--s2); justify-self: end; border-bottom-right-radius: 4px; }
.chat .it { background: var(--c); color: var(--ci); border-bottom-left-radius: 4px; font-weight: 600; }
.chat .m small { display: block; font-size: 12px; opacity: .7; font-weight: 700; }
.sw { display: flex; flex-wrap: wrap; gap: 10px; }
.sw .x { width: 120px; } .sw .x i { display: block; height: 70px; border-radius: 16px; border: 1px solid var(--ln); }
.sw .x strong { display: block; font-size: 14px; margin-top: 6px; line-height: 1.2; } .sw .x span { font-size: 13px; color: var(--mu); }
.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.big .b { background: var(--s2); border-radius: 18px; padding: 16px; }
.big .b b { font-family: var(--fd); font-size: clamp(34px, 5vw, 48px); line-height: 1; display: block; color: var(--c); -webkit-text-stroke: .6px var(--fg); }
.big .b span { font-weight: 600; line-height: 1.3; display: block; margin-top: 6px; }
.dd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .dd { grid-template-columns: minmax(0, 1fr); } }
.dd > div { border-radius: 18px; padding: 14px 16px; }
.dd .do { background: color-mix(in srgb, var(--today) 16%, transparent); } .dd .dont { background: color-mix(in srgb, #e5484d 14%, transparent); }
.dd strong { display: block; margin-bottom: 6px; } .dd ul { margin: 0; padding-left: 18px; } .dd li { margin: 4px 0; }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.week .d { background: var(--s2); border-radius: 18px; padding: 12px; }
.week .d b { display: block; font-size: 12px; letter-spacing: .08em; color: var(--mu); }
.week .d strong { display: block; margin: 4px 0; line-height: 1.2; } .week .d span { font-size: 15px; color: var(--mu); line-height: 1.35; display: block; }
.week .d.turn { background: var(--c); color: var(--ci); } .week .d.turn b, .week .d.turn span { color: var(--ci); opacity: .8; }
.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pics figure { margin: 0; background: var(--s2); border-radius: 18px; padding: 10px; }
.pics img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; }
.pics.screens img { aspect-ratio: auto; object-fit: cover; }
.pics figcaption { font-size: 14px; font-weight: 600; margin-top: 6px; line-height: 1.3; }
.sounds { display: flex; flex-wrap: wrap; gap: 8px; }
.sounds button { border: 1px solid var(--ln); background: var(--s2); border-radius: 999px; padding: 9px 14px 9px 10px; cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.sounds button::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l8 5-8 5z' fill='%2316131c'/%3E%3C/svg%3E") center/14px no-repeat; }
.sounds button.on { border-color: var(--c); }
.tw { overflow-x: auto; border: 1px solid var(--ln); border-radius: 16px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ln); vertical-align: top; }
th { background: var(--s2); font-size: 13px; letter-spacing: .03em; }
tr:last-child td { border-bottom: 0; }

/* full detail */
details { margin-top: 20px; border-top: 1px dashed var(--ln); padding-top: 12px; }
summary { cursor: pointer; font-weight: 800; color: var(--mu); list-style: none; display: flex; gap: 8px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--s2); color: var(--fg); }
details[open] summary::before { content: "\2212"; }
.md { margin-top: 10px; } .md h4 { font: 800 17px var(--fb); margin: 18px 0 6px; } .md p { margin: 8px 0; max-width: 70ch; }
.md ul, .md ol { padding-left: 22px; } .md li { margin: 4px 0; } .md .tw { margin: 10px 0; } .md code { background: var(--s2); padding: 1px 5px; border-radius: 5px; font-size: 14px; }
.md pre { background: var(--s2); padding: 12px; border-radius: 12px; overflow-x: auto; font-size: 13px; }

/* end */
.end { margin-top: 60px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.end a { text-decoration: none; background: var(--s1); border: 1px solid var(--ln); border-radius: 20px; padding: 16px; display: flex; gap: 12px; align-items: center; font-weight: 800; }
.end a img { width: 48px; height: 48px; object-fit: contain; } .end a small { display: block; font-weight: 500; color: var(--mu); }
.end a.cur { border-color: var(--c); }

/* five characters side by side */
.castb { display: grid; gap: 8px; }
.castb .cb { display: flex; gap: 12px; align-items: center; background: var(--s2); border-radius: 18px; padding: 10px 14px 10px 10px; border-left: 6px solid var(--cc); }
.castb img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.castb .nm { display: block; font-weight: 800; } .castb span { display: block; line-height: 1.35; }
/* phone screens */
.phones { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.phones figure { margin: 0; flex: 0 0 auto; width: clamp(150px, 26vw, 210px); }
.phones .ph { border: 6px solid var(--fg); border-radius: 28px; overflow: hidden; background: #000; aspect-ratio: 9 / 19.5; }
.phones .ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phones figcaption { font-size: 14px; font-weight: 700; margin-top: 8px; line-height: 1.3; }
/* flow with arrows */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 6px; }
.flow .f { flex: 0 0 auto; min-width: 120px; max-width: 200px; background: var(--c); color: var(--ci); border-radius: 16px; padding: 12px 14px; }
.flow .f strong { display: block; line-height: 1.2; } .flow .f span { display: block; font-size: 14px; margin-top: 4px; line-height: 1.3; opacity: .85; }
.flow .f .tag { display: inline-block; margin-top: 6px; }
.flow i { flex: 0 0 28px; align-self: center; height: 3px; background: var(--fg); position: relative; margin: 0 4px; }
.flow i::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--fg); border-right: 0; }

/* ---------- the book ---------- */
body { padding-bottom: 60px; }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ln); }
.bar .in { display: flex; gap: 8px; align-items: center; padding: 8px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); flex-wrap: wrap; }
.bar button { border: 1px solid var(--ln); background: var(--s1); border-radius: 999px; padding: 7px 12px; cursor: pointer; font-weight: 800; font-size: 14px; white-space: nowrap; }
.bar button[aria-pressed="true"], .ver button[aria-checked="true"] { background: var(--c); color: var(--ci); border-color: var(--c); }
.home { display: flex; gap: 8px; align-items: center; text-decoration: none; margin-right: auto; }
.home b { font-family: var(--fd); font-size: 20px; font-weight: 700; }
.slot { border: 1.5px dashed var(--mu); color: var(--mu); border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.menu { display: inline-block; }
.srch { position: relative; flex: 0 1 240px; min-width: 0; }
.srch input { width: 100%; border: 1px solid var(--ln); background: var(--s2); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; color: var(--fg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.res { position: absolute; top: 44px; right: 0; width: min(420px, 90vw); background: var(--s1); border: 1px solid var(--ln); border-radius: 18px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.25); max-height: 60vh; overflow-y: auto; z-index: 50; }
.res a { display: block; padding: 9px 12px; border-radius: 12px; text-decoration: none; } .res a:hover { background: var(--s2); }
.res b { display: block; } .res small { color: var(--mu); display: block; line-height: 1.3; } .res p { padding: 10px; margin: 0; color: var(--mu); }
.who { display: flex; gap: 4px; }
.who button { padding: 3px 10px 3px 3px; display: flex; gap: 6px; align-items: center; }
.who button img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%; background: var(--s2); }
.who button[aria-checked="true"] { background: var(--cc); color: #16131c; border-color: var(--cc); }
.who button[aria-checked="true"] img { background: #ffffffaa; }
.ver { display: flex; background: var(--s2); border-radius: 999px; padding: 3px; gap: 2px; }
.ver button { border: 0; background: transparent; padding: 5px 10px; }
@media (max-width: 900px) { .who button span { display: none; } .who button { padding: 3px; } .srch { order: 9; flex: 1 1 100%; } .theme { display: none; } }

.lay { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.main { min-width: 0; padding-top: 22px; max-width: 980px; }
.rail { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 80px); overflow-y: auto; padding: 18px 0 40px; scrollbar-width: thin; }
.rp { margin-bottom: 2px; }
.rpt { display: flex; gap: 10px; align-items: center; text-decoration: none; padding: 8px 10px; border-radius: 14px; font-weight: 800; }
.rpt b { font-family: var(--fd); font-weight: 700; width: 30px; height: 30px; border-radius: 10px; background: var(--s2); display: grid; place-items: center; flex: none; }
.rp.open .rpt b, .rpt:hover b { background: var(--c); color: var(--ci); }
.rs { display: grid; gap: 1px; padding: 2px 0 8px 18px; border-left: 2px solid var(--ln); margin-left: 24px; }
.rs a { text-decoration: none; padding: 6px 10px; border-radius: 10px; color: var(--mu); font-weight: 600; font-size: 14px; line-height: 1.25; display: flex; gap: 8px; }
.rs a i { font-style: normal; font-weight: 800; min-width: 26px; }
.rs a:hover { background: var(--s2); color: var(--fg); } .rs a.on { background: var(--c); color: var(--ci); }
@media (max-width: 1000px) { .lay { grid-template-columns: minmax(0, 1fr); } .lay > .rail { display: none; } }
@media (min-width: 1001px) { .menu { display: none; } }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(10,8,14,.5); display: flex; align-items: flex-end; }
.sheet[hidden] { display: none; }
.sh-in { background: var(--bg); width: 100%; max-height: 86vh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 14px max(16px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)); }
.sh-in .rp .rs { display: grid; } .sh-in .close { float: right; border: 1px solid var(--ln); background: var(--s1); border-radius: 999px; padding: 7px 14px; font-weight: 800; }

/* home */
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 26px; align-items: center; padding-block: 20px 34px; }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } .hero .pic { order: -1; max-width: 300px; } }
.hero .kick { font-weight: 800; letter-spacing: .06em; font-size: 13px; color: var(--mu); }
.hero h1 { font-size: clamp(44px, 7vw, 84px); margin: 8px 0 14px; }
.hero .line { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.32; max-width: 32ch; }
.hero .pic { background: var(--c); border-radius: 32px; aspect-ratio: 1; display: grid; place-items: center; position: relative; overflow: hidden; }
.hero .pic img { width: 74%; height: 74%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) { .hero .pic img { animation: bob 3.4s ease-in-out infinite; } }
.hero .nmb { position: absolute; left: 14px; bottom: 12px; background: var(--ci); color: var(--c); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 14px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.roles a { text-decoration: none; border: 1.5px solid var(--fg); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 15px; }
.roles a:hover { background: var(--c); color: var(--ci); border-color: var(--c); }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pt { display: grid; grid-template-columns: auto minmax(0, 1fr) 64px; gap: 14px; align-items: center; text-decoration: none; background: var(--s1); border: 1px solid var(--ln); border-radius: 24px; padding: 16px; transition: transform .15s; }
.pt:hover { transform: translateY(-3px); border-color: var(--c); }
.pt > b { font-family: var(--fd); font-weight: 700; font-size: 34px; width: 56px; height: 56px; border-radius: 18px; background: var(--c); color: var(--ci); display: grid; place-items: center; }
.pt strong { display: block; font-size: 19px; } .pt small { display: block; color: var(--mu); line-height: 1.35; margin-top: 2px; } .pt em { display: block; font-style: normal; font-size: 13px; font-weight: 800; margin-top: 6px; color: var(--mu); }
.pt img { width: 64px; height: 64px; object-fit: contain; }

/* section */
.sh { background: var(--c); color: var(--ci); border-radius: 28px; padding: clamp(20px, 4vw, 34px); display: flex; gap: 18px; align-items: center; justify-content: space-between; }
.sh .kick { font-weight: 800; font-size: 13px; letter-spacing: .06em; opacity: .8; }
.sh h2 { font-size: clamp(32px, 5vw, 56px); margin-top: 6px; } .sh h2 .n { font-size: .55em; margin-right: 12px; opacity: .7; vertical-align: .15em; }
.sh p { margin: 10px 0 0; font-weight: 600; max-width: 48ch; font-size: 18px; }
.sh img { width: clamp(84px, 14vw, 150px); flex: none; }
@media (max-width: 560px) { .sh img { display: none; } }
.jumpp { display: flex; gap: 6px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: none; }
.jumpp a { white-space: nowrap; text-decoration: none; background: var(--s2); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 14px; }
.jumpp a:hover { background: var(--c); color: var(--ci); }
.pg .lnk { margin-left: auto; text-decoration: none; color: var(--mu); font-weight: 800; padding: 0 6px; }
.pg .you { margin: 10px 0 0; color: var(--mu); font-weight: 700; font-size: 16px; }
.pg .you::before { content: "You: "; color: var(--c); -webkit-text-stroke: .3px var(--fg); }
.tag.vt { background: var(--fg); color: var(--bg); } .tag.vt.later { background: var(--mu); }
.off { opacity: .45; } .off .off { opacity: 1; }
.arrives { margin-top: 8px; display: inline-block; font-weight: 800; font-size: 13px; background: var(--s2); border-radius: 999px; padding: 4px 12px; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 30px; }
.pn a { text-decoration: none; background: var(--s1); border: 1px solid var(--ln); border-radius: 20px; padding: 14px 16px; font-weight: 800; }
.pn a small { display: block; color: var(--mu); font-weight: 700; } .pn .nx { text-align: right; } .pn a:hover { border-color: var(--c); }
.blk-k .tag { margin-left: 4px; }

/* new blocks */
.phones.live figure { width: auto; }
.kslot .k-phone { margin: 0; }
.phones.live .desk { flex: 0 0 min(640px, 88vw); }
.vars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.va { background: var(--s2); border-radius: 20px; padding: 14px; position: relative; border: 2px solid transparent; min-width: 0; }
.va.pick { border-color: var(--c); }
.va .pk { position: absolute; top: -12px; left: 14px; background: var(--c); color: var(--ci); font-weight: 800; font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.va img { width: 100%; border-radius: 12px; margin-bottom: 8px; } .va .kslot { display: flex; justify-content: center; margin-bottom: 8px; zoom: .62; }
.va .sk { background: var(--bg); border-radius: 12px; padding: 8px; margin-bottom: 8px; } .va .sk svg { width: 100%; height: auto; display: block; }
.va strong { display: block; font-size: 17px; } .va > span { display: block; color: var(--mu); line-height: 1.35; margin-top: 4px; }
.va ul { margin: 8px 0 0; padding-left: 18px; font-size: 15px; } .va .pro li::marker { content: "+  "; color: var(--today); } .va .con li::marker { content: "\2212  "; color: #e5484d; }
.states { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.states .st { flex: 0 0 170px; background: var(--s2); border-radius: 16px; padding: 12px; border-top: 4px solid var(--c); }
.states .st b { display: block; } .states .st span { display: block; font-size: 15px; line-height: 1.35; margin-top: 4px; } .states .st small { display: block; color: var(--mu); margin-top: 6px; font-size: 13px; }
.map2 { display: grid; gap: 6px; }
.map2 .r { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: center; }
.map2 .old { background: var(--s2); border-radius: 14px; padding: 10px 14px; color: var(--mu); text-decoration: line-through; text-decoration-color: #e5484d88; }
.map2 .new { background: color-mix(in srgb, var(--c) 30%, transparent); border-radius: 14px; padding: 10px 14px; font-weight: 700; }
.map2 .new small { display: block; font-weight: 500; color: var(--mu); font-size: 13px; } .map2 .arr { text-align: center; font-weight: 800; color: var(--mu); }
.tree ul { list-style: none; margin: 0; padding-left: 22px; position: relative; }
.tree > ul { padding-left: 0; }
.tree li { position: relative; padding: 4px 0; }
.tree ul ul li::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 50%; width: 12px; border-left: 2px solid var(--ln); border-bottom: 2px solid var(--ln); border-bottom-left-radius: 8px; }
.tree span { display: inline-block; background: var(--s2); border-radius: 12px; padding: 6px 12px; font-weight: 700; }
.tree > ul > li > span { background: var(--c); color: var(--ci); }
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 560px) { .ba { grid-template-columns: minmax(0, 1fr); } }
.ba > div { border-radius: 20px; padding: 14px; } .ba .bef { background: var(--s2); } .ba .aft { background: color-mix(in srgb, var(--c) 28%, transparent); }
.ba b { display: block; font-size: 12px; letter-spacing: .08em; color: var(--mu); } .ba strong { display: block; margin: 6px 0 4px; } .ba img { border-radius: 12px; margin-top: 8px; }
.cd.off { opacity: .45; } .cdp { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; margin-bottom: 8px; }
.castb .cb.me { outline: 2px solid var(--cc); }
.miss { color: var(--mu); }
.show > div, .pg, .main, .sh, .blk { min-width: 0; }
.show { grid-template-columns: minmax(0, 1fr); }
.kslot .k-desk-fit, .phones.live .desk .kslot { width: 100%; }
.phones.live { gap: 12px; }
.phones.live .kslot { zoom: .6; }
.phones.live .desk .kslot { zoom: 1; }
@media (max-width: 560px) { .phones.live .kslot { zoom: .5; } }
.agents { text-decoration: none; font-weight: 800; font-size: 13px; color: var(--mu); border: 1.5px dashed var(--ln); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
@media (max-width: 900px) { .agents { display: none; } }
.phones.live figure.desk { flex: 0 0 auto; width: min(640px, 82vw); min-width: 0; }
.phones.live figure.desk .kslot { width: 100%; overflow: hidden; border-radius: 14px; }
.kslot .k-desk-fit { width: 100%; overflow: hidden; }
@media (max-width: 560px) { .pics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pics.screens { grid-template-columns: minmax(0, 1fr); } .pics figcaption { font-size: 13px; } }

/* navigation test fixes */
.hero .what { font-size: clamp(22px, 3vw, 30px); line-height: 1.25; font-weight: 800; margin: 0 0 12px; max-width: 26ch; }
.hero .what mark { background: color-mix(in srgb, var(--c) 45%, transparent); color: inherit; padding: 0 4px; border-radius: 6px; }
.vexp { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 0 0 22px; }
.vexp button { text-align: left; border: 1px solid var(--ln); background: var(--s1); border-radius: 16px; padding: 10px 14px; cursor: pointer; font: 600 14px/1.3 var(--fb); color: var(--fg); }
.vexp button b { display: block; font-family: var(--fd); font-weight: 700; font-size: 22px; }
.vexp button.on { background: var(--c); color: var(--ci); border-color: var(--c); }
.vrib { background: var(--fg); color: var(--bg); text-align: center; font-weight: 700; font-size: 14px; padding: 7px 16px; }
.tag.newv { background: var(--c); color: var(--ci); }
.sh-k { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--mu); margin: 18px 0 6px; }
.sh-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-pages a { text-decoration: none; background: var(--s2); border-radius: 999px; padding: 7px 12px; font-weight: 700; font-size: 14px; }
.sh-tools { display: flex; gap: 8px; flex-wrap: wrap; } .sh-tools button, .sh-tools a { border: 1px solid var(--ln); background: var(--s1); border-radius: 999px; padding: 8px 14px; font-weight: 800; text-decoration: none; font-size: 14px; }
.sbtn { display: none; }
@media (max-width: 900px) {
  .sbtn { display: inline-block; }
  .srch { display: none; }
  body.sopen .srch { display: block; }
  .bar .in { row-gap: 6px; }
  .home b { font-size: 17px; } .slot { display: none; }
  .who button { padding: 2px; } .who button img { width: 26px; height: 26px; }
  .ver button { padding: 4px 7px; font-size: 13px; }
}
.res { right: 0; left: auto; }
@media (min-width: 1001px) { .res { right: 0; width: min(440px, 60vw); } }
/* things that scroll sideways show it, and wrap when there is room */
.states, .flow, .steps { flex-wrap: wrap; row-gap: 10px; }
.flow i { display: none; }
.flow .f { position: relative; margin-right: 22px; }
.flow .f:not(:last-child)::after { content: ""; position: absolute; right: -18px; top: 50%; border: 6px solid transparent; border-left: 9px solid var(--fg); transform: translateY(-50%); }
.phones { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 40px; }
@media (max-width: 900px) { .bar .skim { display: none; } }
/* keep the laptop bar on one row with the wider book type */
.bar button, .agents { font-size: 13px; padding: 6px 10px; }
.srch { flex: 0 1 200px; }
@media (min-width: 901px) and (max-width: 1500px) { .who button span { display: none; } .who button { padding: 3px; } }
.rpt b { line-height: 1; padding-top: 2px; }