/* Plugin docs (/plugins/): loaded after pf.css and built only from its language. A dark hero lit by the
   plugin's own cover and accent colour (like the shelf's sheet), the desk catalog for the screenshots,
   then the docs on the same white sheet as Setup and Privacy, with a contents list beside them on wide
   screens. --a is the plugin's accent, set inline per page or per card. Pages: zerobot-ops\bbb-docs\gen-docs-frost.js */

/* ---------- the hero: the cover, blurred, lights the room; the cover itself floats on the right ---------- */
.dp-hero { --a: #86ccff; position: relative; isolation: isolate; overflow: hidden; padding: 128px 16px 56px; }
.dp-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.dp-bg img { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; max-width: none; object-fit: cover; filter: blur(72px) saturate(1.4); opacity: .4; }
.dp-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(55% 60% at 72% 42%, color-mix(in srgb, var(--a) 22%, transparent), rgba(12, 12, 12, 0) 70%), linear-gradient(180deg, rgba(12, 12, 12, .2), rgba(12, 12, 12, .55) 62%, var(--bg));
}
.dp-hero-in { max-width: 80rem; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.dp-hcopy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.dp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(247, 245, 242, .55); }
.dp-crumb a { transition: color .2s; }
.dp-crumb a:hover { color: var(--bright); }
.dp-crumb a:last-child { color: color-mix(in srgb, var(--a) 65%, #fff); }
.dp-ic {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--a) 78%, #fff), var(--a) 45%, color-mix(in srgb, var(--a) 70%, #000));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 12px 30px -10px color-mix(in srgb, var(--a) 70%, transparent);
}
.dp-ic img { width: 30px; height: 30px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.dp-ic--s { width: 30px; height: 30px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .2); }
.dp-ic--s img { width: 20px; height: 20px; }
.dp-ic--g { --a: #2a2c30; width: 40px; height: 40px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .3); }
.dp-ic--g img { width: 24px; height: 24px; }
.dp-name { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(3rem, 7.4vw, 6.2rem); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; margin-top: 4px; }
.dp-t { font-weight: 300; font-size: clamp(1.02rem, 1.5vw, 1.25rem); line-height: 1.6; color: rgba(247, 245, 242, .78); max-width: 36rem; }
.dp-spec { width: 100%; max-width: 40rem; margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dp-spec div {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; min-width: 0;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.dp-spec div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
.dp-spec dt { font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 245, 242, .5); }
.dp-spec dd { font-weight: 500; font-size: 1rem; line-height: 1.25; color: var(--bright); overflow-wrap: anywhere; }
.dp-spec .dp-price { font-weight: 700; color: var(--a); }
.dp-spec .dp-mono { font-family: var(--mono); font-weight: 500; }
.dp-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.dp-go [hidden] { display: none; }
.dp-hero .vbtn, .dp-get .vbtn { background: var(--a); color: #0C0C0C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px -14px color-mix(in srgb, var(--a) 80%, transparent); }
.dp-hero .vbtn:hover, .dp-get .vbtn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 18px 40px -14px color-mix(in srgb, var(--a) 90%, transparent); }
.dp-hero .gbtn, .dp-get .gbtn { border-color: rgba(247, 245, 242, .45); color: var(--bright); font-size: .8rem; padding: 11px 24px; }
.dp-hero .gbtn:hover, .dp-get .gbtn:hover { background-color: rgba(247, 245, 242, .08); }
.dp-hero .vbtn { padding: 13px 28px; font-size: .8rem; }

.dp-cover { position: relative; margin: 0; }
.dp-cover img { position: relative; width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 14px; background: #1b1916; }
.dp-cover::before { content: ''; position: absolute; inset: 10% 6% -4%; z-index: -1; border-radius: 24px; background: var(--a); filter: blur(56px); opacity: .3; }
.dp-cover::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.dp-cover--ico { display: grid; place-items: center; aspect-ratio: 2 / 1; border-radius: 14px; background: rgba(255, 255, 255, .04); }
.dp-cover--ico img { width: 96px; height: 96px; aspect-ratio: auto; background: none; image-rendering: pixelated; }
/* "Coming soon" over the price badge baked into the covers of plugins not on sale yet */
.dp-soon {
  position: absolute; z-index: 2; left: 1.2%; top: 3.5%; width: 19%; height: 16%; display: grid; place-items: center;
  background: #F7F5F2; color: #0C0C0C; font-family: var(--cond); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1; text-align: center; border-radius: 4px; font-size: clamp(.5rem, 1.2vw, .9rem);
}
@media (min-width: 640px) { .dp-hero { padding: 156px 32px 72px; } .dp-spec { grid-template-columns: .8fr 1.6fr .8fr; } .dp-spec div:nth-child(2) { grid-column: auto; grid-row: auto; } }
@media (min-width: 960px) {
  .dp-hero { padding: 170px 48px 88px; }
  .dp-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; }
}

/* ---------- in game: the loop and the screenshots in the desk catalog (pf.css .gal) ---------- */
.dp-media { padding: 40px 16px 24px; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.dp-media-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.dp-media-head .su-k { margin-bottom: 0; }
.dp-h2 { font-family: var(--serif); font-weight: 400; color: var(--bright); font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.03em; text-align: center; }
.dp-media-l { max-width: 36rem; font-weight: 300; font-size: clamp(.95rem, 1.3vw, 1.08rem); line-height: 1.6; color: rgba(215, 226, 234, .7); text-align: center; }
.dp-gal .gal-stage { aspect-ratio: 16 / 9; }
.dp-gal .gal-fg { object-fit: contain; }
.dp-gal video.gal-fg { background: transparent; }
.dp-zoom-a { position: absolute; inset: 0; cursor: zoom-in; }
.dp-clip {
  position: absolute; z-index: 2; left: 16px; top: 14px; padding: 6px 10px; border-radius: 999px;
  background: rgba(10, 12, 18, .55); border: 1px solid rgba(215, 226, 234, .2); color: var(--bright);
  font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.dp-th-v { position: relative; }
.dp-th-v::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -7px 0 0 -5px; border: 7px solid transparent; border-left: 11px solid #fff; border-right: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
@media (min-width: 640px) { .dp-media { padding: 56px 32px 32px; } .dp-gal .gal-stage { aspect-ratio: 16 / 9; border-radius: 32px; } }
@media (min-width: 1024px) { .dp-media { padding: 72px 40px 40px; } .dp-gal .gal-stage { aspect-ratio: 16 / 9; border-radius: 48px; } }

/* full-size screenshots */
.dp-zoom { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 64px 12px 84px; background: rgba(8, 9, 10, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--bright); }
.dp-zoom[hidden] { display: none; }
/* the window minus the padding: 100% of a grid cell did not resolve, so the picture ran under the arrow
   bar at 1024 to 1600 (2026-11-02) */
.dp-zoom img { max-width: 100%; max-height: calc(100dvh - 148px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
html.anim .dp-zoom:not([hidden]) img { animation: dp-pop .5s var(--e-out); }
@keyframes dp-pop { from { opacity: 0; transform: scale(.97); } }
.dp-zx { position: absolute; top: 14px; right: 14px; }
.dp-zbar { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.dp-zbar p { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; min-width: 5em; text-align: center; color: rgba(247, 245, 242, .6); }
.dp-zbar b { color: var(--bright); font-weight: 500; }

/* ---------- the docs: the white sheet, contents on the left on wide screens ---------- */
.goal-sheet.dp-sheet { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; text-align: left; padding: 40px 18px 44px; }
.dp-toc { display: flex; gap: 6px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.dp-toc::-webkit-scrollbar { display: none; }
.dp-toc a {
  flex: none; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); font-weight: 500; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dp-toc a:hover { background-color: rgba(12, 12, 12, .05); }
.dp-toc a.is-here { background: var(--bg); border-color: var(--bg); color: #fff; }
.dp-toc .dp-toc-buy { display: none; }
.dp-body { min-width: 0; color: rgba(12, 12, 12, .82); }
.dp-sec { scroll-margin-top: 24px; }
.dp-sec + .dp-sec { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.dp-sec > h2 { font-family: var(--serif); font-weight: 400; color: var(--bg); font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; letter-spacing: -.02em; margin-bottom: 22px; }
.dp-body h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.25; color: var(--bg); margin: 34px 0 12px; scroll-margin-top: 24px; }
.dp-body p, .dp-body li { font-weight: 300; font-size: clamp(.98rem, 1.2vw, 1.05rem); line-height: 1.7; }
.dp-body p + p, .dp-body p + ul, .dp-body ul + p, .dp-body p + ol, .dp-body ol + p, .dp-body p + div, .dp-body div + p { margin-top: 14px; }
.dp-body ul, .dp-body ol { padding-left: 1.25em; }
.dp-body li + li { margin-top: 6px; }
.dp-body li::marker { color: rgba(12, 12, 12, .4); }
.dp-body a { font-weight: 500; color: var(--bg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(12, 12, 12, .3); transition: text-decoration-color .2s; }
.dp-body a:hover { text-decoration-color: currentColor; }
.dp-body strong { font-weight: 500; color: var(--bg); }
.dp-body code { font-family: var(--mono); font-size: .84em; color: var(--bg); background: #EEF0F2; border-radius: 6px; padding: .1em .38em; overflow-wrap: anywhere; }
.dp-body pre { margin: 16px 0 0; padding: 18px 20px; border-radius: 18px; background: #0C0C0C; color: #E6ECF1; overflow-x: auto; font: 400 13px/1.65 var(--mono); tab-size: 2; }
.dp-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.dp-mute { color: rgba(12, 12, 12, .45); }
.dp-sub { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.75rem) !important; line-height: 1.3 !important; color: var(--bg); margin-bottom: 18px; }
.dp-prose > :first-child { margin-top: 0; }
.dp-note { padding: 14px 16px; border-radius: 14px; background: #F2F3F4; font-size: .92rem !important; }
.dp-note + .dp-note { margin-top: 10px; }

/* "In short": the listing's reasons, as a quiet two-column list with accent squares */
.dp-why { list-style: none; padding: 0 !important; display: grid; gap: 2px 28px; margin-top: 4px; }
.dp-why li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line); margin: 0 !important; line-height: 1.5; }
.dp-why li::before { content: ''; position: absolute; left: 0; top: calc(9px + .58em); width: 8px; height: 8px; border-radius: 2px; background: var(--a, var(--bg)); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); }
.dp-why--plain li::before { background: rgba(12, 12, 12, .25); box-shadow: none; }
@media (min-width: 700px) { .dp-why { grid-template-columns: 1fr 1fr; } }

/* facts: label and value rows */
.dp-facts { margin-top: 26px; }
.dp-facts div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.dp-facts div:last-child { border-bottom: 1px solid var(--line); }
.dp-facts dt { font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(12, 12, 12, .5); padding-top: .3em; }
.dp-facts dd { font-weight: 400; font-size: clamp(.95rem, 1.2vw, 1.02rem); line-height: 1.55; color: var(--bg); min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .dp-facts div { grid-template-columns: 10rem minmax(0, 1fr); } }
.dp-facts + p, .dp-facts + ul, .dp-steps + p, .dp-table + p, div + .dp-note, .dp-why + p { margin-top: 18px; }
.dp-why + .dp-facts { margin-top: 30px; }

/* changelog, config files: one quiet row that opens */
.dp-more, .dp-file { margin-top: 18px; border-radius: 16px; background: #F2F3F4; }
.dp-more summary, .dp-file summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; border-radius: 16px;
  font-weight: 500; font-size: .92rem; color: var(--bg); transition: background-color .2s;
}
.dp-more summary::-webkit-details-marker, .dp-file summary::-webkit-details-marker { display: none; }
.dp-more summary:hover, .dp-file summary:hover { background-color: #E9EBED; }
.dp-file-n { font-family: var(--mono); font-size: .84rem; overflow-wrap: anywhere; min-width: 0; }
.dp-file-l { margin-left: auto; flex: none; font-family: var(--mono); font-size: .72rem; color: rgba(12, 12, 12, .5); }
.dp-more summary .dp-file-t { margin-left: auto; }
.dp-file-t { flex: none; position: relative; width: 12px; height: 12px; }
.dp-file-t::before, .dp-file-t::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; border-radius: 1px; transition: transform .45s var(--e-out); }
.dp-file-t::after { transform: rotate(90deg); }
details[open] > summary .dp-file-t::after { transform: rotate(0deg); }
.dp-more-in { padding: 0 18px 16px; }
.dp-more-in p, .dp-more-in li { font-size: .95rem !important; }
.dp-code { position: relative; padding: 0 6px 6px; }
/* the first line starts below the Copy button (it sat on "...for any server" on phones), and the button
   is solid so a long line scrolled under it stays hidden (2026-11-02) */
.dp-code pre { margin: 0; max-height: 72vh; overflow: auto; padding-top: 46px; }
.dp-copy-code {
  position: absolute; z-index: 1; top: 12px; right: 20px; padding: 6px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(230, 236, 241, .25); background: #0C0C0C; color: #E6ECF1; font: 500 .66rem/1 Kanit, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .2s;
}
.dp-copy-code:hover { background: rgba(60, 64, 70, .9); }
.dp-mono-h { font-family: var(--mono); text-transform: none !important; letter-spacing: 0 !important; font-size: 1rem !important; }

/* features: numbered rows, the title on the left on wide screens */
.dp-feats { list-style: none; padding: 0 !important; }
.dp-feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 32px; padding: 24px 0; border-top: 1px solid var(--line); margin: 0 !important; }
.dp-feat .dp-prose ul { list-style: disc; }
.dp-feat h3 { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.dp-n { flex: none; font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .04em; color: color-mix(in srgb, var(--a) 60%, #0C0C0C); }
.dp-feat .dp-prose ul { margin-top: 0; }
.dp-feat .dp-prose > p + ul { margin-top: 10px; }
@media (min-width: 760px) { .dp-feat { grid-template-columns: 13rem minmax(0, 1fr); } }

/* steps: counted like the terms on the legal page */
.dp-steps { list-style: none; padding: 0 !important; counter-reset: s; }
.dp-steps li { counter-increment: s; display: grid; grid-template-columns: 2.6em minmax(0, 1fr); gap: 8px; padding: 13px 0; border-top: 1px solid var(--line); margin: 0 !important; }
.dp-steps li:last-child { border-bottom: 1px solid var(--line); }
.dp-steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: .78rem; padding-top: .3em; color: rgba(12, 12, 12, .42); }

/* tables: plain rows; on a phone every row becomes a small labelled block */
.dp-table { margin-top: 16px; }
.dp-table table { width: 100%; border-collapse: collapse; }
.dp-table th { font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(12, 12, 12, .5); text-align: left; padding: 0 14px 10px 0; border-bottom: 1px solid rgba(12, 12, 12, .3); }
.dp-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 300; font-size: .93rem; line-height: 1.55; color: rgba(12, 12, 12, .85); overflow-wrap: anywhere; }
.dp-table td:first-child { overflow-wrap: normal; }
.dp-table td:first-child code { white-space: nowrap; }
.dp-table td:last-child, .dp-table th:last-child { padding-right: 0; }
@media (max-width: 899px) {
  .dp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dp-table table, .dp-table tbody, .dp-table tr, .dp-table td { display: block; }
  .dp-table tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .dp-table tr:last-child { border-bottom: 1px solid var(--line); }
  .dp-table td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: 10px; }
  .dp-table td > span { min-width: 0; }
  .dp-table td::before { content: attr(data-label); font-family: var(--cond); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(12, 12, 12, .45); padding-top: .35em; }
  .dp-table td:first-child { grid-template-columns: minmax(0, 1fr); padding-bottom: 6px; }
  .dp-table td:first-child::before { display: none; }
  .dp-table td:first-child code { white-space: normal; overflow-wrap: anywhere; font-size: .9em; }
}

/* FAQ: rows that open, a plus that turns */
.dp-faq { border-bottom: 1px solid var(--line); }
.dp-q { border-top: 1px solid var(--line); }
.dp-q summary { display: flex; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; }
.dp-q summary::-webkit-details-marker { display: none; }
.dp-q summary h3 { margin: 0; flex: 1; text-transform: none; letter-spacing: 0; font-size: clamp(1rem, 1.4vw, 1.12rem); font-weight: 500; }
.dp-plus { flex: none; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .2s, border-color .2s; }
.dp-plus::before, .dp-plus::after { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--bg); border-radius: 1px; transition: transform .45s var(--e-out); }
.dp-plus::after { transform: rotate(90deg); }
.dp-q[open] .dp-plus { background: var(--bg); border-color: var(--bg); }
.dp-q[open] .dp-plus::before, .dp-q[open] .dp-plus::after { background: #fff; transform: rotate(0deg); }
.dp-q summary:hover .dp-plus { border-color: rgba(12, 12, 12, .4); }
.dp-a { padding: 0 46px 20px 0; }
html.anim .dp-q[open] .dp-a { animation: dp-open .5s var(--e-out); }
@keyframes dp-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } }

@media (min-width: 640px) { .goal-sheet.dp-sheet { padding: 56px 36px 52px; } .dp-toc { margin: 0 -36px; padding: 2px 36px 6px; } }
@media (min-width: 1000px) {
  .goal-sheet.dp-sheet { grid-template-columns: 196px minmax(0, 50rem); justify-content: center; gap: 64px; padding: 88px 56px 80px; }
  .dp-toc { position: sticky; top: 28px; flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; }
  .dp-toc a { border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 9px 0 9px 16px; font-size: .72rem; color: rgba(12, 12, 12, .55); }
  .dp-toc a:hover { background: none; color: var(--bg); }
  .dp-toc a.is-here { background: none; color: var(--bg); border-left-color: var(--a, var(--bg)); }
  .dp-toc .dp-toc-buy {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; padding: 12px 16px; border: 0; border-radius: 999px;
    background: var(--bg); color: #fff; letter-spacing: .1em; transition: transform .45s var(--e-out), background-color .2s;
  }
  .dp-toc .dp-toc-buy b { font-family: var(--mono); font-weight: 500; letter-spacing: 0; color: var(--a); }
  .dp-toc .dp-toc-buy:hover { color: #fff; background: #1d2a38; transform: translateY(-2px); }
}

/* ---------- get it: glass panels on the dark page ---------- */
.dp-get { --a: #86ccff; padding: 56px 16px 8px; }
.dp-get-in { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dp-panel {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 26px 22px 24px; border-radius: 28px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.dp-panel[hidden] { display: none; }
.dp-panel p { font-weight: 300; font-size: .95rem; line-height: 1.6; color: rgba(215, 226, 234, .8); }
.dp-panel p strong { font-weight: 500; color: var(--bright); }
.dp-panel a:not(.vbtn):not(.gbtn) { color: var(--bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 245, 242, .35); }
.dp-panel code { font-family: var(--mono); font-size: .86em; color: var(--bright); background: rgba(255, 255, 255, .07); padding: .1em .38em; border-radius: 6px; }
.dp-panel--buy { background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--a) 16%, transparent), rgba(255, 255, 255, .03) 60%); border-color: color-mix(in srgb, var(--a) 28%, rgba(255, 255, 255, .09)); }
.dp-panel--quiet { background: none; }
.dp-pk { font-family: var(--cond); font-weight: 600 !important; font-size: 13px !important; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 65%, #fff) !important; }
.dp-ph { font-family: var(--serif); font-weight: 400; color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; margin-top: -4px; }
.dp-big { font-family: var(--mono); font-weight: 500 !important; font-size: clamp(2rem, 4vw, 2.8rem) !important; line-height: 1 !important; color: var(--a) !important; letter-spacing: -.02em; }
.dp-small { font-size: .82rem !important; line-height: 1.55 !important; color: rgba(215, 226, 234, .6) !important; }
.dp-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.dp-btns [hidden] { display: none; }
.dp-addr { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .1); max-width: 100%; }
.dp-addr code { background: none !important; padding: 0 !important; font-size: clamp(.9rem, 1.6vw, 1.05rem) !important; overflow-wrap: anywhere; }
.dp-copy.ok { border-color: var(--a); color: var(--a); }
@media (min-width: 640px) { .dp-get { padding: 72px 32px 8px; } .dp-panel { padding: 32px 30px 30px; border-radius: 32px; } .dp-get-in { gap: 14px; } }
@media (min-width: 960px) {
  .dp-get { padding: 88px 40px 8px; }
  .dp-get-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* an odd panel out (ZeroBot) takes the whole row: title on the left, the two paragraphs beside it */
  .dp-get-in > .dp-panel--quiet:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 17rem minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 12px 36px; align-items: start; }
  .dp-panel--quiet:last-child:nth-child(odd) > .dp-pk { grid-column: 1; grid-row: 1; }
  .dp-panel--quiet:last-child:nth-child(odd) > .dp-ph { grid-column: 1; grid-row: 2; }
  .dp-panel--quiet:last-child:nth-child(odd) > .dp-btns { grid-column: 1; grid-row: 3; margin-top: 6px; }
  .dp-panel--quiet:last-child:nth-child(odd) > p:nth-of-type(2) { grid-column: 2; grid-row: 1 / span 3; }
  .dp-panel--quiet:last-child:nth-child(odd) > p:nth-of-type(3) { grid-column: 3; grid-row: 1 / span 3; }
}

/* previous and next plugin */
.dp-pns { max-width: 80rem; margin: 12px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dp-pn {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .09);
  transition: background-color .25s, border-color .25s, transform .5s var(--e-out);
}
.dp-pn--next { align-items: flex-end; text-align: right; }
.dp-pn-k { font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(215, 226, 234, .5); }
.dp-pn-b { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dp-pn--next .dp-pn-b { flex-direction: row-reverse; }
.dp-pn-n { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.05; color: var(--bright); overflow-wrap: anywhere; min-width: 0; }
.dp-pn:hover { background: rgba(255, 255, 255, .04); border-color: color-mix(in srgb, var(--a) 40%, transparent); transform: translateY(-2px); }
@media (min-width: 640px) { .dp-pns { margin-top: 14px; gap: 14px; } .dp-pn { padding: 24px 26px; border-radius: 28px; } }
@media (min-width: 960px) { .dp-pns { margin-top: 16px; gap: 16px; } }
.dp-cta { padding-top: 96px; }

/* ---------- the overview ---------- */
.dp-ihead .links { margin-top: 4px; }
.dp-ihead .cbtn { padding: 14px 32px; font-size: .8rem; }
.dp-ihead .gbtn { font-size: .78rem; padding: 11px 22px; border-width: 1.5px; }
.goal-sheet.dp-isheet { padding-bottom: 40px; }
.dp-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 8px; max-width: 72rem; }
.dp-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--bg); font: 500 .72rem/1 Kanit, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .2s, color .2s, border-color .2s;
}
.dp-chip img { width: 16px; height: 16px; image-rendering: pixelated; }
.dp-chip span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; opacity: .55; }
.dp-chip:hover { background: rgba(12, 12, 12, .05); }
.dp-chip[aria-pressed="true"] { background: var(--bg); border-color: var(--bg); color: #fff; }
.dp-group { width: 100%; max-width: 72rem; margin-top: 44px; scroll-margin-top: 24px; }
.dp-group[hidden] { display: none; }
.dp-group-h { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.dp-group-h h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.02em; flex: 1; min-width: 0; }
.dp-count { font-family: var(--mono); font-size: .8rem; color: rgba(12, 12, 12, .45); }
.dp-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dp-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px 8px 0; border-radius: 24px; background: #F2F3F4;
  transition: transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.dp-card-pic { position: relative; margin: 0; aspect-ratio: 2 / 1; border-radius: 16px; overflow: hidden; background: #1b1916; }
.dp-card-pic > img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.dp-card-pic--ico { display: grid; place-items: center; background: #0C0C0C; }
.dp-card-b { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 8px 16px; }
.dp-card h3 { display: flex; align-items: center; gap: 10px; font-weight: 500; text-transform: uppercase; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.1; letter-spacing: .01em; margin-bottom: 2px; }
.dp-card-a::after { content: ''; position: absolute; inset: 0; border-radius: 24px; }
.dp-card-a:focus-visible { outline: none; }
.dp-card-a:focus-visible::after { outline: 2px solid var(--bg); outline-offset: 3px; }
.dp-card-t { font-size: .84rem; line-height: 1.5; opacity: .7; }
.dp-card-m { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--mono); font-size: .76rem; color: rgba(12, 12, 12, .55); }
.dp-card-p { font-weight: 500; font-size: .92rem; color: var(--bg); }
.dp-card-soon { font-family: var(--cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 11px; padding: 4px 8px; border-radius: 6px; background: var(--bg); color: #fff; }
.dp-card-free { color: #1d7a3f; }
.dp-card-free[hidden] { display: none; }
@media (hover: hover) {
  .dp-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--a) 75%, transparent); }
  .dp-card:hover .dp-card-pic > img { transform: scale(1.04); }
}
@media (min-width: 560px) { .dp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 980px) { .dp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .dp-card { border-radius: 26px; } }

.dp-get--index { padding-top: 96px; }
.dp-bundles { max-width: 80rem; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: center; gap: 18px; scroll-margin-top: 24px; }
.dp-bundles .su-k { margin-bottom: 0; }
.dp-bundle-list { list-style: none; width: 100%; margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.dp-bundle {
  --a: #86ccff; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; padding: 26px 22px 24px; border-radius: 28px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); scroll-margin-top: 24px;
}
.dp-bundle h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; color: #fff; letter-spacing: -.02em; }
.dp-bundle-p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-family: var(--mono); }
.dp-bundle-p b { font-weight: 500; font-size: 1.8rem; line-height: 1; color: var(--a); }
.dp-bundle-p s { font-size: .9rem; color: rgba(215, 226, 234, .45); }
.dp-bundle-p span { font-family: var(--cond); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(134, 204, 255, .14); color: #cfe9ff; }
.dp-bundle-c { flex: 1; font-weight: 300; font-size: .88rem; line-height: 1.6; color: rgba(215, 226, 234, .72); }
.dp-bundle-c a { color: var(--bright); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(247, 245, 242, .3); }
.dp-bundle-c a:hover { text-decoration-color: currentColor; }
.dp-bundle .gbtn { border-color: rgba(247, 245, 242, .45); color: var(--bright); font-size: .78rem; padding: 10px 22px; border-width: 1.5px; }
.dp-bundle .gbtn:hover { background-color: rgba(247, 245, 242, .08); }
.dp-bundle .vbtn { padding: 12px 26px; font-size: .78rem; }
.dp-bundle--main { background: radial-gradient(90% 120% at 0% 0%, rgba(134, 204, 255, .14), rgba(255, 255, 255, .03) 60%); border-color: rgba(134, 204, 255, .3); }
@media (min-width: 700px) { .dp-bundle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .dp-bundle-list { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 16px; } }

/* commissions page: the legal page's sheet, with a table and two buttons */
.dp-lg .dp-table { margin-top: 8px; }
.dp-lg h3 { font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: 1rem; color: var(--bg); margin: 26px 0 8px; }
.dp-lg h3:first-of-type { margin-top: 0; }
.dp-lg .lg-terms { margin-top: 4px; }
.dp-lg .dp-btns { margin-top: 28px; }
.dp-lg .dp-btns a { text-decoration: none; }
.dp-dark-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px; background: var(--bg); color: #fff !important; font-weight: 500 !important; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: transform .45s var(--e-out), background-color .2s; }
.dp-dark-btn:hover { transform: translateY(-2px); background: #1d2a38; }
.dp-line-btn { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px; border: 1.5px solid var(--bg); font-weight: 500 !important; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; transition: background-color .2s; }
.dp-line-btn:hover { background: rgba(12, 12, 12, .06); }

@media (prefers-reduced-motion: reduce) {
  .dp-card, .dp-pn, .dp-toc-buy, .dp-plus::before, .dp-plus::after, .dp-file-t::before, .dp-file-t::after { transition: none !important; }
  .dp-card:hover, .dp-pn:hover { transform: none !important; }
}