/* The pages outside the studio app, in the kit (pk.css): the library (/prompts), every prompt page and hub, pricing,
   the legal pages, the developers page and the 404. Loaded last on each of them, after its own stylesheet, so the
   older sheets (pa.css, site.css, lib.css, doc.css, pricing.css) keep their structure and take the kit's look:
   the same island nav as the studio, Mona Sans titles, Instrument Sans text, pills, 16px thumbs, one orange. */

body { font-family: var(--f-text); font-stretch: 100%; color: var(--bone); background: var(--room); }
button, input, select, textarea { font-family: var(--f-text); }
:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

/* ---------- the island nav (the same as the studio's) */
.pnav, .pnav.solid {
  position: fixed; inset: 0 0 auto; z-index: 60; height: 80px; display: flex; justify-content: center; align-items: flex-start; gap: 0;
  padding: 24px 16px 0; grid-template-columns: none; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  pointer-events: none; font-family: var(--f-text);
}
.pnav::before { display: none; }
body:has(.bar.stuck) .pnav { background: none; }
.pnav-island { pointer-events: auto; max-width: 100%; }
.pnav-brand { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; color: var(--bone); text-decoration: none; }
.pnav-brand svg { width: 26px; height: 26px; color: var(--bone); flex: none; }
.pnav-brand .pk-wordmark { padding: 0; font-size: 19px; }
.pnav-pages, .pnav-pages:hover { display: flex; gap: 4px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pnav-pages a, .pnav-pages .pk-tab { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 550; color: var(--bone-2); }
.pnav-pages a:hover { background: var(--control); color: var(--bone); }
.pnav-pages a[aria-current=page], .pnav-pages a[aria-current=page]:hover { background: var(--raised); color: var(--bone); font-weight: 550; }
.pnav-right { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.pnav-right [hidden] { display: none !important; }
.pnav .pnav-btn.light, .pnav .pnav-btn.light:hover { height: 40px; padding: 0 18px; margin-left: 4px; border: 0; border-radius: 999px; background: var(--bone); color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: none; }
.pnav .pnav-btn.light:hover { background: #fbf6ee; }
.pnav-search { color: var(--bone); }
.pnav-chip { height: 36px; margin-left: 4px; color: var(--bone); }
.pnav-chip svg { color: var(--bone-2); }
.pnav-me { margin: 0 4px; }
@media (max-width: 1180px) { .pnav-pages a { padding: 0 12px; } .pnav-brand { padding-right: 10px; } }
@media (max-width: 1040px) { .pnav-brand .pk-wordmark { display: none; } }
@media (max-width: 899px) {
  .pnav, .pnav.solid { height: 68px; padding: 12px 20px 0; }
  .pnav::after { content: ''; position: absolute; inset: 0 0 -20px; z-index: -1; background: linear-gradient(180deg, var(--room) 45%, rgba(15, 14, 12, 0)); opacity: 0; transition: opacity .3s; }
  .pnav.solid::after { opacity: 1; }
  .pnav-island { width: 100%; justify-content: space-between; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pnav-brand { padding: 0; }
  .pnav-brand .pk-wordmark { display: inline !important; }
  .pnav-pages { display: none; }
  .pnav-chip svg { display: none; }
  .pnav .hide-sm { display: none !important; }
}

/* ---------- footers */
footer, .lf, .foot { border-top: 1px solid var(--line); color: var(--bone-3); font-size: 14px; }
footer a, .lf a, .foot a { color: var(--bone-2); }
footer a:hover, .lf a:hover, .foot a:hover { color: var(--bone); }
.brand .mark { width: 22px; height: 22px; color: var(--bone); }
.brand .wm { font-family: var(--f-mark); font-size: 17px; font-weight: 800; font-stretch: 125%; letter-spacing: -0.045em; }
@media (max-width: 899px) { footer, .lf { padding-bottom: 128px; } }

/* ---------- shared bits */
.btn { height: 48px; gap: 10px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone); font: 600 15px var(--f-text); box-shadow: inset 0 0 0 1px var(--line); }
.btn:hover { background: var(--raised); }
.btn.light, .btn.white { background: var(--bone); color: var(--ink); box-shadow: none; }
.btn.light:hover, .btn.white:hover { background: #fbf6ee; }
.btn.go, .btn.pk-btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: none; padding: 0 6px 0 22px; }
.btn.go:hover, .btn.pk-btn--primary:hover { background: #f37f4c; }
.btn.ghost { background: var(--control); color: var(--bone); }
.wrap { width: min(1344px, calc(100% - 96px)); }
@media (max-width: 899px) { .wrap { width: calc(100% - 40px); } }

/* ---------- legal pages, developers, 404 */
.doc { padding: 140px 0 96px; }
.doc .wrap { max-width: 760px; }
.doc h1 { margin: 0 0 16px; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -0.02em; line-height: 0.92; text-transform: lowercase; }
.doc .updated { margin: 0 0 48px; font-size: 14px; color: var(--bone-3); }
.doc h2 { margin: 40px 0 8px; font-family: var(--f-text); font-stretch: 100%; font-size: 18px; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.doc h3 { font-size: 15px; font-weight: 650; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; color: var(--bone-2); }
.doc a { color: var(--bone); text-underline-offset: 3px; }
.doc code { font-size: 13px; border-radius: 8px; background: var(--control); }
.doc pre { border: 0; border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.doc td { border-top-color: var(--line); }
.dev-btn { height: 48px; padding: 0 22px; border-radius: 999px; background: var(--bone); color: var(--ink) !important; font-weight: 600; }
@media (max-width: 899px) { .doc { padding: 104px 0 64px; } .doc h1 { font-size: 40px; } }

/* ---------- pricing: plans as rows, the price on each one's button, the exact amount under them */
.pr { padding-top: 0; }
.pr-head { padding: 140px 0 48px; }
.pr h1 { margin: 0 0 16px; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -0.02em; line-height: 0.92; }
.pr-head .lead { max-width: 560px; margin: 0; font-size: 18px; color: var(--bone-2); text-transform: none; }
.pr-low { max-width: 640px; margin: 24px 0 0; padding: 16px 20px; border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font-size: 16px; color: var(--bone-2); }
.pr-low[hidden] { display: none; }
.pr-low b { color: var(--bone); font-weight: 650; }
.pr h2 { margin: 0 0 8px; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.05; text-transform: lowercase; }
.pr-sec { padding: 0 0 64px; }
.pr-sec > .wrap, .pr-head > .wrap { max-width: 1240px; }
.pr-fine { font-size: 13px; color: var(--bone-3); }
.pr-keep { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 24px 0 0 20px; font-size: 14px; color: var(--bone-2); }
.pr-keep span { display: inline-flex; align-items: center; gap: 8px; }
.pr-keep svg { color: var(--bone-3); }
.cu-range, .calc input[type=range] { --fill: 50%; }
.cu-range::-webkit-slider-runnable-track, .calc input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--bone) var(--fill), rgba(242, 236, 226, 0.16) var(--fill)); }
.cu-range::-moz-range-track, .calc input[type=range]::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right, var(--bone) var(--fill), rgba(242, 236, 226, 0.16) var(--fill)); }
.cu-range::-webkit-slider-thumb, .calc input[type=range]::-webkit-slider-thumb { margin-top: -8px; background: var(--bone); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.cu-range::-moz-range-thumb, .calc input[type=range]::-moz-range-thumb { background: var(--bone); }
.calc { gap: 32px; padding: 32px; border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.calc p { color: var(--bone-3); }
.calc-row label { font-size: 14px; color: var(--bone-2); }
.calc-out { border-top-color: var(--line); }
#calc-total { font-family: var(--f-text); font-size: 18px; font-weight: 650; letter-spacing: 0; }
#calc-pick { color: var(--bone-2); }
.pick-btn { height: 44px; padding: 0 14px 0 18px; border: 0; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); font: 550 14px var(--f-text); color: var(--bone); }
.pick-btn:hover, .pick.open .pick-btn { background: var(--raised); border: 0; }
.pick-cost, .pick-o-cost { color: var(--bone-3); }
.pick-menu { border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 8px; }
.pick-opt { height: 44px; padding: 0 12px; border-radius: 18px; font: 500 14px var(--f-text); color: var(--bone-2); }
.pick-opt:hover, .pick-opt:focus-visible { background: var(--control); }
.pick-opt[aria-selected=true] { background: var(--raised); color: var(--bone); }
.pick-opt[aria-selected=true] .pick-o-name::before { display: none; }
.inc { gap: 16px; }
.inc li { padding: 20px; border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.inc b { font-size: 16px; font-weight: 650; color: var(--bone); }
.inc span { font-size: 14px; color: var(--bone-3); }
.faq details { border-top-color: var(--line); }
.faq details:last-child { border-bottom-color: var(--line); }
.faq summary { font-size: 16px; font-weight: 600; text-transform: lowercase; }
.faq summary::after { color: var(--bone-3); }
.faq details p { font-size: 15px; color: var(--bone-2); }
.all-prices { border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.all-prices summary { font-size: 16px; font-weight: 650; }
.costs .col { border: 0; border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.costs li { border-top-color: var(--line); font-size: 15px; }
.costs h3 { text-transform: lowercase; }
@media (max-width: 899px) {
  .pr-head { padding: 104px 0 32px; }
  .pr h1 { font-size: 48px; }
  .pr-keep { margin-left: 8px; }
  .calc { padding: 20px; }
}

/* ---------- hubs and prompt pages (lib.css) */
.lib { padding: 120px 0 96px; }
.crumbs { font-size: 14px; color: var(--bone-3); }
.crumbs a { color: var(--bone-2); }
.lib-h { margin: 16px 0 0; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -0.02em; line-height: 0.92; }
.lib-n { font-size: 14px; color: var(--bone-3); }
.lib-intro { max-width: 70ch; font-size: 18px; line-height: 1.5; color: var(--bone-2); }
.chip, .chips.row .chip { height: 36px; padding: 0 14px; gap: 8px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone-2); font-size: 14px; font-weight: 550; box-shadow: inset 0 0 0 1px var(--line); }
.chip:hover { background: var(--control); color: var(--bone); border: 0; }
.chip[aria-current] { background: var(--bone); color: var(--ink); box-shadow: none; }
.chip[aria-current] small { color: rgba(18, 16, 13, 0.6); }
.chip small { font-size: 13px; color: var(--bone-3); }
.chips { gap: 8px; }
.chips-l { font-size: 13px; color: var(--bone-3); }
.grid { column-gap: 16px; }
.pc { margin: 0 0 32px; color: inherit; }
.pc .pc-m { border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.pc .pc-m img { transition: transform .6s var(--ease), opacity .3s; }
.pc:hover .pc-m img { transform: scale(1.035); }
.pc-d { display: none; }
.pc-r { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 0 2px; min-width: 0; }
.pc-t { flex: 1; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; font-weight: 600; color: var(--bone); }
.pc-b { flex: none; margin: 0; font-size: 14px; font-weight: 500; color: var(--bone-3); }
.pager { gap: 8px; }
.pg { height: 44px; min-width: 44px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone-2); box-shadow: inset 0 0 0 1px var(--line); }
a.pg:hover { background: var(--raised); color: var(--bone); }
.pg.on { background: var(--bone); color: var(--ink); box-shadow: none; }
.lib-about { border-top-color: var(--line); }
.lib-about h2, .pp-more h2, .stats h2 { font-family: var(--f-text); font-stretch: 100%; font-size: 18px; font-weight: 650; letter-spacing: 0; text-transform: lowercase; }
.lib-about p { font-size: 16px; color: var(--bone-2); }
.stats td { border-top-color: var(--line); }

/* one prompt: the framed picture on the left, what it is and the whole prompt on the right (the t-prompt screen) */
.pp .crumbs { display: none; }
.pp-grid { grid-template-columns: minmax(0, 1fr) 416px; gap: 48px; margin-top: 0; }
.pp-media, .pp-media.tall { position: sticky; top: 120px; width: auto; justify-self: stretch; padding: 6px; border-radius: 28px; overflow: visible; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.45); }
.pp-frame { position: relative; overflow: hidden; border-radius: 22px; background: var(--well); display: flex; align-items: center; justify-content: center; }
.pp-fill { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(40px) saturate(1.2) brightness(0.55); pointer-events: none; }
.pp-media img, .pp-media video { position: relative; display: block; width: 100%; height: auto; max-height: calc(100svh - 168px); margin: 0 auto; object-fit: contain; background: none; }
.pp-media .pp-fill { max-height: none; width: 112%; height: 112%; max-width: none; position: absolute; margin: 0; }
.pp-info { display: flex; flex-direction: column; gap: 24px; }
.pp-path { margin: 0; font-size: 14px; font-weight: 500; color: var(--bone-3); }
.pp-path a { color: var(--bone-3); text-decoration: none; }
.pp-path a:hover { color: var(--bone); }
.pp-info h1 { margin: -8px 0 0; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -0.02em; line-height: 0.92; text-transform: lowercase; text-wrap: balance; overflow-wrap: anywhere; }
.pp-info h1.long { font-size: 28px; line-height: 1.05; }
.pp-by { margin: -12px 0 0; font-size: 13px; color: var(--bone-3); }
.pp-by a { color: var(--bone-2); font-weight: 600; text-decoration: none; }
.pp-desc { margin: 0; font-size: 16px; line-height: 1.55; color: var(--bone-2); }
.pp-acts { gap: 8px; margin: 0; }
.pp-acts .btn { height: 56px; font-size: 16px; }
.pp-acts .btn.go { gap: 16px; padding: 0 6px 0 24px; }
.pp-acts .pk-btn__icon { width: 44px; height: 44px; }
.pp-well { padding: 16px 20px 4px; border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.pp-h { margin: 0 0 8px; font-size: 15px; font-weight: 650; color: var(--bone); }
.pp-text, .pp-text.clamp { margin: 0; padding: 0 0 12px; border: 0; border-radius: 0; background: none; font: 400 15px/1.6 var(--f-text); color: var(--bone-2); }
.pp-text.clamp { max-height: 440px; }
.pp-all { color: var(--bone-2); font: 600 14px var(--f-text); margin: 0 0 12px; }
.pp-facts { grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding: 20px; border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pp-facts > div dt, .pp-facts dt { font-size: 13px; color: var(--bone-3); }
.pp-facts dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--bone); }
.pp-facts a { color: var(--bone); text-decoration: none; }
.pp-fix { margin: 0; font-size: 13px; color: var(--bone-3); }
.pp-more { margin-top: 64px; }
@media (max-width: 1100px) { .pp-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } }
@media (max-width: 899px) {
  .lib { padding: 92px 0 64px; }
  .lib-h { font-size: 40px; }
  .pp-grid { grid-template-columns: 1fr; gap: 24px; }
  .pp-media, .pp-media.tall { position: relative; top: 0; }
  .pp-media img, .pp-media video { max-height: 60svh; }
  .pp-info h1 { font-size: 40px; }
  .pp-info h1.long { font-size: 24px; }
  .pp-acts .btn { flex: 1 1 auto; height: 52px; }
  .grid { columns: 2 150px; column-gap: 12px; }
  .pc-b { display: none; }
}

/* ---------- the library (/prompts: site.js + site.css) */
:root { --hdr: 80px; --field: var(--control); --field-2: var(--raised); --media: var(--well); --surface: var(--well); --viewer: var(--room); --edge: var(--line); --edge-2: var(--line-2); --mono: var(--f-text); --dim: var(--bone-3); }
.page-head { padding-top: 120px; padding-bottom: 24px; }
.page-h { gap: 0 16px; font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 56px; letter-spacing: -0.02em; line-height: 0.92; margin: 0; text-transform: lowercase; }
.page-n { font: 500 14px/1.4 var(--f-text); color: var(--bone-3); }
.bar { padding: 12px 0; }
.bar.stuck { background: rgba(15, 14, 12, 0.92); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) and (min-width: 721px) {
  .bar.stuck::before { background: rgba(15, 14, 12, 0.94); box-shadow: 0 1px 0 var(--line); }
}
.search { height: 52px; padding: 0 8px 0 48px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); }
.search:hover { background: var(--control); }
.search:focus-within { background: var(--control); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 2px rgba(242, 236, 226, 0.28); }
.search input { font: 500 16px var(--f-text); }
.search input::placeholder { color: var(--bone-3); }
.search .i-search { left: 18px; stroke: var(--bone-3); }
.search kbd { font: 500 12px/1 var(--f-text); border-radius: 999px; padding: 6px 9px; color: var(--bone-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.seg { height: auto; gap: 4px; padding: 4px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); }
.seg button { height: 36px; padding: 0 14px; font-size: 14px; font-weight: 550; color: var(--bone-2); }
.seg button[aria-pressed=true] { background: var(--raised); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2); }
.select select, .dd-btn { height: 44px; border-radius: 999px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); font: 550 14px var(--f-text); color: var(--bone); }
.dd-btn:hover, .dd-btn[aria-expanded=true] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.dd.is-set .dd-btn { background: var(--bone); color: var(--ink); box-shadow: none; }
.dd-caret { stroke: var(--bone-3); }
.dd-menu, .dd-menu.dd-sheet { padding: 8px; border: 0; border-radius: 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dd-group { padding: 14px 12px 6px 36px; font: 500 13px/1 var(--f-text); letter-spacing: 0; color: var(--bone-3); }
.dd-opt { min-height: 44px; border-radius: 18px; font: 500 14px/1.2 var(--f-text); color: var(--bone-2); }
.dd-opt:hover, .dd-opt:focus-visible { background: var(--control); }
.dd-opt[aria-selected=true] { background: var(--raised); color: var(--bone); font-weight: 600; }
.dd-opt .n { font: 500 13px/1 var(--f-text); color: var(--bone-3); }
.bar .icon-btn { width: 44px; height: 44px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); }
.mchip { height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--control); color: var(--bone-2); font: 550 14px var(--f-text); box-shadow: inset 0 0 0 1px var(--line); }
.mchip:hover { color: var(--bone); border: 0; }
.mchip[aria-pressed=true] { background: var(--bone); color: var(--ink); box-shadow: none; }
.mchip .n { font: 500 12px/1 var(--f-text); color: var(--bone-3); }
.mchip-lab { font: 500 13px/1 var(--f-text); letter-spacing: 0; color: var(--bone-3); }
.masonry { gap: 16px; }
.mcol { gap: 32px; }
.pc-media { border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.pc-media img { transition: opacity .4s, transform .6s var(--ease); }
.pcard:hover .pc-media img { transform: scale(1.035); }
.pc-media .badge, .pcard .badge { display: none; }
.pc-textonly { border-radius: 16px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); font: 400 14px/1.6 var(--f-text); color: var(--bone-2); }
.pc-textonly .pc-note { font: 500 13px/1.3 var(--f-text); color: var(--bone-3); }
.pc-meta { gap: 8px; padding: 14px 0 0 2px; align-items: center; }
.pc-words { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.pc-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--bone); }
.pcard .pc-words .pc-m { flex: none; display: block; margin: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 500 14px/1.4 var(--f-text); color: var(--bone-3); }
.pcard .pc-m > span { overflow: visible; }
.pc-x { display: none; }
.pc-copy { width: 36px; height: 36px; margin: 0; border-radius: 999px; color: var(--bone-3); }
.pc-copy:hover { background: var(--control); color: var(--bone); }
.skel { border-radius: 16px; background: var(--well); }
.card-afnw { border-radius: 24px; border: 0; box-shadow: inset 0 0 0 1px var(--line); background: var(--panel); }
.card-afnw .ca-h { font-family: var(--f-display); font-stretch: 75%; font-size: 28px; letter-spacing: -0.02em; }
.card-afnw .ca-btn { height: 44px; background: var(--bone); color: var(--ink); font-weight: 600; }
.empty h2 { font-family: var(--f-display); font-stretch: 75%; font-size: 28px; letter-spacing: -0.02em; }
.toast { border-radius: 999px; background: var(--raised); color: var(--bone); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 48px rgba(0, 0, 0, 0.45); }
@media (max-width: 899px) { .toast { bottom: 112px; } }

/* the library's viewer: the same as the studio's (the t-viewer screen) */
#viewer.viewer { padding: 0; }
#viewer .viewer-scrim { background: var(--dim); -webkit-backdrop-filter: blur(6px) saturate(0.8); backdrop-filter: blur(6px) saturate(0.8); }
#viewer .viewer-panel { grid-template-columns: minmax(0, 1fr) 416px; width: min(1440px, calc(100% - 48px)); height: min(880px, calc(100% - 48px)); border-radius: 28px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 120px rgba(0, 0, 0, 0.6); }
#viewer .viewer-stage { margin: 6px; border-radius: 22px; background: var(--well); }
#viewer .viewer-info { padding: 8px 0 8px; }
#viewer .viewer-top { padding: 12px 16px 8px 24px; }
#viewer .viewer-nav { gap: 8px; }
#viewer .viewer-nav .icon-btn { width: 36px; height: 36px; background: var(--control); box-shadow: inset 0 0 0 1px var(--line); }
#viewer .chip-model { padding: 0; background: none; font: 500 14px var(--f-text); color: var(--bone-3); }
#viewer .v-title { font-family: var(--f-display); font-stretch: 75%; font-weight: 800; font-size: 28px; letter-spacing: -0.02em; line-height: 1.05; text-transform: lowercase; }
#viewer .v-credit { font-size: 13px; color: var(--bone-3); }
#viewer .v-credit a { color: var(--bone-2); }
#viewer .v-prompt { border-radius: 18px; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
#viewer .v-text { font: 400 15px/1.6 var(--f-text); color: var(--bone-2); padding: 16px 20px 18px; }
#viewer .v-facts, #viewer .v-sub { font: 500 13px/1.5 var(--f-text); color: var(--bone-3); }
#viewer .v-acts { gap: 8px; padding: 0 16px 16px; }
#viewer .v-acts .btn { height: 48px; font-size: 15px; }
#viewer .v-acts #vGen { background: var(--accent); color: var(--on-accent); }
#viewer .v-acts #vGen:hover { background: #f37f4c; }
#viewer .v-skel { border-radius: 999px; background: var(--raised); }
#viewer .vs-snd { border-radius: 999px; background: rgba(26, 24, 21, 0.78); box-shadow: inset 0 0 0 1px var(--line-2); }
#viewer .vs-bar { left: 24px; right: 24px; bottom: 22px; height: 3px; border-radius: 999px; background: rgba(242, 236, 226, 0.16); overflow: hidden; }
#viewer .vs-bar i { border-radius: 999px; background: var(--bone); }
@media (max-width: 899px) {
  .page-head { padding-top: 92px; }
  .page-h { font-size: 40px; }
  #viewer .viewer-panel { width: 100%; height: 100%; border-radius: 0; }
  #viewer .viewer-stage { margin: 0 12px; }
  #viewer .v-acts { background: var(--panel); }
  .pc-words { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pc-title { max-width: 100%; font-size: 14px; }
  .pcard .pc-words .pc-m { font-size: 13px; }
  .pc-meta { align-items: flex-start; }
}
.all-prices[open] summary::after { content: '\2212'; }

/* the library and the other pages use the screen: centred, wider on big monitors */
.wrap { width: min(1760px, calc(100% - 96px)); margin-inline: auto; }
@media (max-width: 899px) { .wrap { width: calc(100% - 40px); } }
.doc .wrap { max-width: 760px; }
.pr-sec > .wrap, .pr-head > .wrap { max-width: 1240px; }

/* a soft band of room colour behind the island, so content never scrolls into the nav */
.pnav::before { display: block; content: ''; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; opacity: 1;
  background: linear-gradient(to bottom, rgba(15, 14, 12, .98) 0%, rgba(15, 14, 12, .96) 64%, rgba(15, 14, 12, 0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; }

/* pricing: the plan columns (styles in pk.css), the three promises under them */
.plans.pw { margin-top: 8px; }
.pr-keep { margin: 24px 0 0; justify-content: center; }
.pr-fine { text-align: center; }