/* B400 · the bold system shared by every redesigned cultureai.com page (approved Nov 2, 2026, from the overnight
   design pass). Site tokens stay: Rubik 600, Source Serif 4, IBM Plex Mono; ink #0a1633, blue #1559f5, sky #5b8cfa.
   Components (chapter labels, the request/response panel, the photo-backed close, the tool row) work at every width;
   the bigger desktop layout sits in the 1101px+ block; each page adds its own sheet. */
:root{--b-ink:#0a1633;--b-blue:#1559f5;--b-deep:#1148d4;--b-sky:#5b8cfa;--b-mist:#f5f7fc;--b-line:#e3e8f2;--b-navy2:#0d1d42}
.b-k{display:block;font:500 13px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--b-blue);margin:0 0 26px;white-space:pre}
.b-k b{color:var(--b-ink);font-weight:500}
.b-close{position:relative;padding:170px 0;text-align:center;color:#fff;background:linear-gradient(90deg,rgba(17,72,212,.95) 0%,rgba(21,89,245,.82) 55%,rgba(21,89,245,.55) 100%),var(--b-photo) 50% 30%/cover,#0a1633}
.b-close h2{font:600 112px/.94 Rubik,sans-serif;letter-spacing:-5px;color:#fff;margin:0 auto 40px;max-width:1100px}
.b-close p{font-size:21px;line-height:1.55;color:#dbe5ff;max-width:640px;margin:0 auto 36px}
.b-close .ctas{display:flex;gap:12px;justify-content:center}
.b-close .ctas a{font:600 17px Rubik,sans-serif;padding:16px 26px;border-radius:999px;text-decoration:none;background:#fff;color:var(--b-ink)}
.b-close .ctas a.g{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35)}
.b-api{border-radius:16px;background:var(--b-navy2);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 100px rgba(10,22,51,.35);overflow:hidden;font:400 14px/1.7 "IBM Plex Mono",monospace;color:#c9d5f2;text-align:left}
.b-api .bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#8ea2cc}
.b-api .bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:#7ee2a8}
.b-api .bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fd17f;box-shadow:0 0 0 4px rgba(63,209,127,.18)}
.b-api .m{background:#1559f5;color:#fff;border-radius:6px;padding:2px 7px;font-size:11.5px;font-weight:600}
.b-api pre{margin:0;padding:18px 20px;white-space:pre;font:inherit}
.b-api .c{color:#6f84b3}
.b-api .s{color:#7ee2a8}
.b-api .h{color:#9dbbff}
.b-api .k{color:#ffd28a}
.b-api .rid{background:rgba(91,140,250,.18);color:#fff;border-radius:5px;padding:1px 5px}
.b-tools{margin:56px 0 64px;border-top:1px solid var(--b-line);padding-top:30px}
.b-tools .b-tk{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#566074;margin:0 0 22px}
.b-tools ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.b-tools li{background:#fff;border:1px solid var(--b-line);border-radius:16px;height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 6px}
.b-tools li:first-child{grid-column:span 2}
.b-tools li .m{height:32px;display:flex;align-items:center;justify-content:center;gap:10px}
.b-tools li img{height:28px;width:auto;max-width:120px;display:block}
.b-tools li img.sq{height:28px;width:28px}
.b-tools li img.cf{height:40px}
.b-tools li .nm{font:600 16px/1 Rubik,sans-serif;color:#0a1633;letter-spacing:-.2px;white-space:nowrap}
.b-tools li span{font:500 11.5px/1.25 "IBM Plex Mono",monospace;letter-spacing:.04em;color:#6a7690;text-align:center}
.b-api pre{overflow-x:auto;max-width:100%}
.b-close .ctas a{display:inline-flex;align-items:center;min-height:52px}
.b-close a:focus-visible,.b-api a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.b-tools li img{object-fit:contain;background:none!important}
.b-api .bar .live.off{color:#8ea2cc}.b-api .bar .live.off::before{background:#8ea2cc;box-shadow:none}
.b-km{display:none}
@media (max-width:1100px){
  .b-k{font-size:12px;margin-bottom:16px;letter-spacing:.16em}
  .b-close{padding:96px 20px}
  .b-close h2{font-size:44px;line-height:.98;letter-spacing:-2px;margin-bottom:24px}
  .b-close p{font-size:18px;margin-bottom:28px}
  .b-close .ctas{flex-direction:column;align-items:stretch;max-width:420px;margin:0 auto}
  .b-close .ctas a{justify-content:center}
  .b-api{font-size:12.5px}
  .b-api pre{padding:16px}
  .b-tools ul{grid-template-columns:repeat(2,1fr)}
  .b-tools li{height:96px}
}
@media (max-width:600px){
  .b-km{display:block}
  .b-k.b-kd{display:none}
}
@media (min-width:1101px){
  html.px-page body main .sx-sec>.sx-in,html.px-page body main .px-sec>.px-wrap,html.px-page body main .pp-sec>.pp-in{max-width:1240px!important}
  html.px-page body main .sx-sec,html.px-page body main .px-sec,html.px-page body main .pp-sec{padding-top:140px!important;padding-bottom:140px!important}
  html.px-page body main .sx-sec p,html.px-page body main .px-sec p,html.px-page body main .pp-sec p{text-wrap:pretty}
  html.px-page body .b-dark .b-k{color:var(--b-sky)}
  html.px-page body .b-dark .b-k b{color:#fff}
  html.px-page body .b-dark h2,html.px-page body .b-dark h3{color:#fff!important}
  html.px-page body .b-dark p{color:#b9c4dd}
  html.px-page body .b-navy{background:radial-gradient(70% 90% at 85% 0%,rgba(21,89,245,.42) 0%,rgba(21,89,245,0) 60%),#0a1633!important}
  html.px-page body .b-mist{background:var(--b-mist)!important}
  html.px-page body .sx-hero{background:linear-gradient(180deg,#0f2a6b 0%,#0a1633 100%)!important;padding-top:140px!important;padding-bottom:150px!important;overflow:hidden}
  html.px-page body .sx-hero .sx-wave i{background:radial-gradient(38% 46% at 78% 30%,#5b8cfa 0,rgba(91,140,250,0) 70%),radial-gradient(40% 50% at 25% 35%,#1559f5 0,rgba(21,89,245,0) 70%),linear-gradient(170deg,#1148d4 0%,#0f2a6b 55%,#0a1633 100%)!important}
  html.px-page body .sx-hero .sx-in{max-width:1320px!important;align-items:center}
  html.px-page body .sx-hero h1,html.px-page body .sx-hero h1 *{color:#fff!important}
  html.px-page body .sx-hero h1 em{color:#9dbbff!important;font-style:normal}
  html.px-page body .sx-hero .sx-dek,html.px-page body .sx-hero .sx-copy>p{color:#c9d5f2!important;font-size:21px!important;line-height:1.55!important;max-width:560px!important}
  html.px-page body .sx-hero .sx-btn{font-size:17px!important;padding:16px 26px!important}
  html.px-page body .sx-hero .sx-btn:not(.ghost){background:#fff!important;color:var(--b-ink)!important}
  html.px-page body .sx-hero .sx-btn.ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
  html.px-page body .sx-hero .sx-prod{filter:drop-shadow(0 40px 80px rgba(0,0,0,.45))}
  html.px-page body #pp-faq summary{font:600 24px/1.25 Rubik,sans-serif!important;letter-spacing:-.5px!important;padding:26px 0!important;color:var(--b-ink)}
  html.px-page body #pp-faq details p{font-size:18px!important;line-height:1.6!important}
  html.px-page body .pp-rel{gap:20px!important}
  html.px-page body .pp-rel li a{border-radius:24px!important;overflow:hidden;padding:0 28px 30px!important;display:flex!important;flex-direction:column;height:100%}
  html.px-page body .pp-rel .b-shot{display:block;width:calc(100% + 56px);max-width:none;margin:0 -28px 24px;aspect-ratio:16/10;object-fit:cover;object-position:0 0;border-bottom:1px solid var(--b-line)}
  html.px-page body .pp-rel li b{font-size:24px!important;letter-spacing:-.6px!important;line-height:1.15!important}
  html.px-page body .pp-rel li small{font:500 12px/1 "IBM Plex Mono",monospace!important;letter-spacing:.14em!important;text-transform:uppercase}
  html.px-page body .pp-rel li em{margin-top:auto!important;padding-top:18px}
}