/* The Hyros Store (store.hyros.com → /plugins, /plugins/<slug>) — Alex, Nov 11 2026: layout 3 "Spotlight" of the
   three home-view takes, with a basic "Available plugins" list and the plugin page (banner + icon + download, an image
   of the dashboard, the description, the plugin's own tables, how to install, the file). The CL1 kit: tokens, the four
   fonts, the lavender sidebar shell, the plugin tile, the View pill and the dashboard window mock. Rendered by
   /store/store.js. A plugin's assets (icon, banner, the file) live in /store/apps/<slug>/. */
@font-face { font-family: "P22 Mackinac"; src: url("/assets/fonts/mackinac-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "P22 Mackinac"; src: url("/assets/fonts/mackinac/mackinac-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap }

:root {
  --cream: #FAF9F5; --cream2: #EDEBE3; --ink: #1F1E1D; --hair: rgba(31,30,29,.11);
  --brand: #5150F6; --lav: #A5A4FA; --lavbg: #EEEEFB; --g1: #55534E; --g2: #8B8984;
  --serif: 'P22 Mackinac', Georgia, serif; --sans: 'Inter', 'Helvetica Neue', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; --side: 264px;
  --ok: #1F8A5C; --ok-fill: #DCF3EA; --warn: #94700A; --warn-fill: #FFF1BF; --bad: #B5533A; --bad-fill: #F8E3DC;
}
*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0 }
html { scroll-behavior: smooth }
body { font-family: var(--sans); color: var(--ink); background: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility }
a { color: inherit; text-decoration: none }
h1, h2, h3, p, ul, ol { margin: 0 }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }
.k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2) }
.st-noscript { padding: 40px 24px; font-size: 15px; line-height: 1.6; color: var(--g1) }
.st-noscript a { color: var(--brand); text-decoration: underline }

/* ---- shell: the lavender sidebar + main ---- */
.st { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); min-height: 100vh }
.st-side { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; padding: 22px 14px 18px; border-right: 1px solid rgba(81,80,246,.16); background: var(--lavbg) }
.st-brand { display: flex; align-items: center; gap: 9px; padding: 4px 10px 20px }
.st-brand img { height: 22px; width: auto; display: block }
.st-brand span { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1; letter-spacing: -.01em; color: #7C7AC9; transform: translateY(1px) }
.st-nav { display: flex; flex-direction: column; gap: 2px }
.st-nav a { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); transition: background .15s ease, color .15s ease }
.st-nav a svg { flex: none; width: 18px; height: 18px; color: var(--brand); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.st-nav .num { flex: none; width: 18px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .04em; color: var(--brand) }
.st-nav a:hover { background: rgba(255,255,255,.6) }
.st-nav a.on { background: #FFFFFF; box-shadow: 0 1px 2px rgba(31,30,29,.07) }
.st-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #7C7AC9; padding: 20px 10px 8px }
.st-sfoot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 22px }
.st-sfoot a { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #5F5DB8; transition: background .15s ease }
.st-sfoot a:hover { background: rgba(255,255,255,.6) }
.st-sfoot a i { font-style: normal; font-size: 12px; opacity: .7 }
.st-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh }
.st-in { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 36px 44px 72px }
.st-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: 100%; max-width: 1240px; margin: 0 auto; padding: 18px 44px 26px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2) }
.st-foot nav { display: flex; gap: 18px }
.st-foot a:hover { color: var(--ink) }

/* ---- the plugin tile (the Hyros mark, or the plugin's own logo, on a tone) and the View pill ---- */
.st-ico { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; overflow: hidden }
.st-ico svg { width: 23px; height: auto; display: block; fill: currentColor }
.st-ico img { width: 100%; height: 100%; object-fit: cover; display: block }
.st-ico.is-48 { width: 48px; height: 48px; border-radius: 12px } .st-ico.is-48 svg { width: 20px }
.st-ico.is-40 { width: 40px; height: 40px; border-radius: 10px } .st-ico.is-40 svg { width: 17px }
.st-ico.is-88 { width: 88px; height: 88px; border-radius: 21px } .st-ico.is-88 svg { width: 36px }
.t-brand { background: var(--brand); color: #FFFFFF }
.t-ink { background: var(--ink); color: var(--lav) }
.t-lavbg { background: var(--lavbg); color: var(--brand) }
.t-lav { background: var(--lav); color: #FFFFFF }
.t-cream { background: var(--cream2); color: var(--ink) }
.t-white { background: #FFFFFF; color: var(--brand); box-shadow: inset 0 0 0 1px var(--hair) }
.t-deep { background: #141246; color: #FFFFFF }
.st-view { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 17px; border: 0; border-radius: 999px; background: var(--lavbg); color: var(--brand); font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .005em; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease }
a:hover > .st-view, a.st-view:hover, button.st-view:hover { background: #E0DFFA }
.st-view.is-ink { background: var(--ink); color: #FFFFFF } a.st-view.is-ink:hover { background: #3A3836 }

/* ---- the dashboard window (a plugin running inside the Hyros app): cream bar, app tabs, KPI tiles, chart, table ---- */
.sw { width: 520px; background: #FFFFFF; color: var(--ink); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; box-shadow: 0 34px 64px -36px rgba(31,30,29,.45), 0 2px 6px rgba(31,30,29,.04); text-align: left }
.sw-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--cream); border-bottom: 1px solid var(--hair) }
.sw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E3E1D9 }
.sw-bar span { margin-left: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sw-nav { display: flex; align-items: center; gap: 4px; padding: 10px 14px; border-bottom: 1px solid var(--hair); font-size: 12px; color: var(--g1); white-space: nowrap }
.sw-nav span { padding: 5px 9px; border-radius: 6px }
.sw-nav span.on { background: var(--lavbg); color: var(--brand); font-weight: 500 }
.sw-nav span.on b { margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: var(--brand); color: #FFFFFF; font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .06em; vertical-align: 1px }
.sw-nav em { margin-left: auto; font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--g2) }
.sw-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px 14px 0 }
.sw-kpis div { min-width: 0; border: 1px solid var(--hair); border-radius: 9px; padding: 10px 12px }
.sw-kpis small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sw-kpis b { display: block; margin-top: 6px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sw-kpis b.is-s { font-size: 16.5px; line-height: 22px }
.sw-kpis u { display: inline-block; margin-top: 6px; text-decoration: none; font-size: 10.5px; font-weight: 500; color: #1F8A5C }
.sw-kpis u.is-q { font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .04em; color: var(--g2) }
.sw-chart { display: flex; align-items: flex-end; gap: 6px; height: 112px; margin: 14px 14px 0; padding: 12px 12px 0; border: 1px solid var(--hair); border-radius: 9px }
.sw-chart i { flex: 1; border-radius: 3px 3px 0 0; background: #D9D8FB }
.sw-chart i.on { background: var(--brand) }
.sw-rows { padding: 6px 14px 14px }
.sw-rows div { display: grid; grid-template-columns: var(--gc, minmax(0, 1fr) 76px 76px 64px); padding: 8px 2px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--g1) }
.sw-rows div:first-child { border-top: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--g2) }
.sw-rows span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sw-rows span:not(:first-child) { text-align: right }
.sw-rows b { font-weight: 500; color: var(--ink) }
.sw-rows em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase }
.sw-rows em.ok { color: #1F8A5C } .sw-rows em.bad { color: #B5533A } .sw-rows em.mute { color: var(--g2) }
.sw-shot { display: block; width: 100%; height: auto }
/* a report's own controls: the level chips, the checkboxes (a ticked one is the plugin's), the legend, tinted rows */
.sw-tools { display: flex; align-items: center; gap: 12px; padding: 12px 14px 0; font-size: 10.5px; color: var(--g1); white-space: nowrap }
.sw-lv { display: flex; gap: 1px; padding: 2px; border: 1px solid var(--hair); border-radius: 7px }
.sw-lv span { padding: 3px 6px; border-radius: 5px }
.sw-lv span.on { background: var(--ink); color: #FFFFFF; font-weight: 500 }
.sw-ck { display: inline-flex; align-items: center; gap: 5px }
.sw-lv + .sw-ck { margin-left: auto }
.sw-ck i { display: grid; place-items: center; width: 11px; height: 11px; border: 1px solid rgba(31,30,29,.32); border-radius: 3px }
.sw-ck svg { width: 7px; height: 7px; fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.sw-ck.on { margin-right: -4px; padding: 4px 8px 4px 6px; border-radius: 6px; background: var(--lavbg); color: var(--brand); font-weight: 600 }
.sw-ck.on i { border-color: var(--brand); background: var(--brand) }
.sw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 11px; margin: 10px 14px 0; padding: 7px 10px; border-radius: 8px; background: var(--cream); font-size: 10px; color: var(--g1); white-space: nowrap }
.sw-legend span { display: inline-flex; align-items: center; gap: 5px }
.sw-legend em { padding: 2px 6px; border-radius: 999px; font-family: var(--mono); font-style: normal; font-size: 8.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase }
.sw-legend em.ok { background: var(--ok-fill); color: var(--ok) } .sw-legend em.warn { background: var(--warn-fill); color: var(--warn) }
.sw-legend em.bad { background: var(--bad-fill); color: var(--bad) } .sw-legend em.none { background: #FFFFFF; color: var(--g1); box-shadow: inset 0 0 0 1px var(--hair) }
.sw-rows.is-tint { padding: 8px 0 0 }
.sw-rows.is-tint div { padding: 8px 16px }
.sw-rows div.r-ok { background: var(--ok-fill) } .sw-rows div.r-warn { background: var(--warn-fill) } .sw-rows div.r-bad { background: var(--bad-fill) }
.sw-rows div.r-ok span:nth-child(3) { color: var(--ok); font-weight: 600 } .sw-rows div.r-warn span:nth-child(3) { color: var(--warn); font-weight: 600 } .sw-rows div.r-bad span:nth-child(3) { color: var(--bad); font-weight: 600 }

/* ---- the brand-purple zebra panel (the home hero + the plugin banner share it) ---- */
.sx-purple { position: relative; overflow: hidden; border-radius: 20px; background: var(--brand) url(/assets/brand/zebra-print-white.svg) center / cover no-repeat; color: #FFFFFF }
.sx-pill { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgba(255,255,255,.16); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.sx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #EEFF41 }
.sx-b1 { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px; border-radius: 7px; background: #FFFFFF; color: var(--ink); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .15s ease, transform .15s ease }
.sx-b1:hover { background: #F4F4FF }
.sx-b1 i { font-style: normal; color: var(--brand) }
.sx-b2 { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; color: #FFFFFF; font-size: 15px; font-weight: 500; white-space: nowrap; transition: background .15s ease }
.sx-b2:hover { background: rgba(255,255,255,.12) }

/* ---- home: the hero ---- */
/* one fixed row: the window is taller than the hero on purpose (cropped at the bottom edge) and must not stretch the row */
.sx-hero { display: grid; grid-template-columns: minmax(0, 1fr) 520px; grid-template-rows: minmax(0, 1fr); gap: 40px; height: 432px; padding: 0 48px }
.sx-txt { align-self: center }
.sx-hero h1 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: 1.1; letter-spacing: -.014em }
.sx-hero h1 b { display: inline-block; margin-top: .12em; padding: .02em .22em .08em; border-radius: .2em; background: #FFFFFF; color: var(--brand); font-weight: 500; white-space: nowrap }
.sx-hero p { margin-top: 16px; max-width: 400px; font-size: 16.5px; line-height: 1.5; color: rgba(255,255,255,.82) }
.sx-btns { display: flex; align-items: center; gap: 16px; margin-top: 24px }
.sx-btns .k { color: rgba(255,255,255,.66) }
/* the windows are drawn at 520px and zoomed to the room they have: store.js sets --z = min(cap, width / 520) */
.sx-stage { align-self: start; min-width: 0; margin-top: 44px }
.sx-win { position: relative; width: fit-content }
.sx-stage .sw { zoom: var(--z, 1); box-shadow: 0 34px 70px -30px rgba(12,10,60,.7) }
.sx-cm { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.85) }
.sx-cm.tl { left: -12px; top: -12px; border-right: 0; border-bottom: 0 } .sx-cm.tr { right: -12px; top: -12px; border-left: 0; border-bottom: 0 }
.sx-cm.bl { left: -12px; bottom: -12px; border-right: 0; border-top: 0 } .sx-cm.br { right: -12px; bottom: -12px; border-left: 0; border-top: 0 }
.sx-tag { position: absolute; right: -22px; top: -30px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; background: #FFFFFF; color: var(--ink); box-shadow: 0 20px 44px -18px rgba(12,10,60,.6) }
.sx-tag .k { display: block; margin: 0 0 3px; color: var(--brand) } .sx-tag b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap }

/* ---- sections + the plugin card grid ---- */
.sx-sec { margin-top: 46px; scroll-margin-top: 24px }
.sx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px }
.sx-h h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em }
.sx-h a { font-size: 13.5px; font-weight: 500; color: var(--brand) }
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px }
.sx-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 18px; border: 1px solid var(--hair); border-radius: 14px; background: #FFFFFF; transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease }
.sx-card:hover { transform: translateY(-2px); border-color: rgba(81,80,246,.35); box-shadow: 0 16px 34px -22px rgba(31,30,29,.3) }
.sx-card .nm { margin-top: 16px; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.005em }
.sx-card .ds { margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--g1) }
.sx-card .ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 18px }
.sx-card .ft .k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sx-ct { display: contents }
.sx-soon { display: flex; flex-direction: column; justify-content: center; grid-column: span 2; min-height: 150px; padding: 22px 26px; border: 1px dashed rgba(81,80,246,.32); border-radius: 14px; background: #FBFBFF }
.sx-soon b { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2 }
.sx-soon span { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--g1) }

/* ---- a category view (the sidebar categories filter the list) + its empty state ---- */
.sx-back { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-left: -4px; padding: 0 10px 0 6px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--brand); transition: background .15s ease }
.sx-back:hover { background: var(--lavbg) }
.sx-chead { margin-top: 14px }
.sx-chead h1 { margin-top: 10px; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.014em }
.sx-empty { display: flex; flex-direction: column; align-items: center; margin-top: 22px; padding: 56px 24px 60px; border: 1px dashed rgba(81,80,246,.32); border-radius: 16px; background: #FBFBFF; text-align: center }
.sx-empty b { margin-top: 16px; font-family: var(--serif); font-weight: 500; font-size: 21px }
.sx-empty p { margin-top: 6px; max-width: 360px; font-size: 14.5px; line-height: 1.5; color: var(--g1) }
.sx-empty .st-view { margin-top: 18px }

/* ---- the plugin page: banner, facts, the dashboard image, description, its tables, install, the file ---- */
.pp-banner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 44px; margin-top: 14px; padding: 44px 48px }
.pp-banner.has-art { grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr) }
.pp-hd { display: flex; align-items: center; gap: 20px }
.pp-banner .st-ico { background: #FFFFFF; color: var(--brand); box-shadow: 0 22px 44px -22px rgba(12,10,60,.7) }
.pp-banner h1 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: 46px; line-height: 1.06; letter-spacing: -.016em }
.pp-banner p { margin-top: 22px; max-width: 520px; font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.86) }
.pp-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px }
.pp-meta { display: block; margin-top: 16px; color: rgba(255,255,255,.66) }
.pp-art { position: relative; border-radius: 14px; background: #FFFFFF; box-shadow: 0 34px 70px -30px rgba(12,10,60,.7) }
.pp-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: inherit }
.pp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--hair); border-radius: 14px; background: #FFFFFF }
.pp-facts div { min-width: 0; padding: 15px 20px 16px; border-left: 1px solid var(--hair) }
.pp-facts div:first-child { border-left: 0 }
.pp-facts b { display: block; margin-top: 6px; font-weight: 600; font-size: 14.5px; line-height: 1.25 }
.pp-shot { position: relative; margin-top: 14px; padding: 52px 44px 22px; border-radius: 20px; background: var(--lavbg) url(/assets/brand/zebra/zebra-print-brand.svg) center / cover no-repeat }
.pp-frame { --z: 1.5 }
.pp-win { position: relative; width: fit-content; margin: 0 auto }
.pp-win .sw { zoom: var(--z); box-shadow: 0 30px 60px -34px rgba(31,30,29,.42), 0 2px 6px rgba(31,30,29,.04) }
.pp-win:has(.is-img) { width: min(860px, 100%) } .pp-win .sw.is-img { zoom: 1; width: 100% }
.pp-cm { position: absolute; width: 22px; height: 22px; border: 2px solid var(--ink) }
.pp-cm.tl { left: -13px; top: -13px; border-right: 0; border-bottom: 0 } .pp-cm.tr { right: -13px; top: -13px; border-left: 0; border-bottom: 0 }
.pp-cm.bl { left: -13px; bottom: -13px; border-right: 0; border-top: 0 } .pp-cm.br { right: -13px; bottom: -13px; border-left: 0; border-top: 0 }
.pp-cap { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 14px; border-top: 1px solid rgba(81,80,246,.2) }
.pp-cap .k { color: #6E6CC4 }
.pp-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; margin-top: 46px }
.pp-about h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em }
.pp-about p { margin-top: 14px; max-width: 640px; font-size: 16.5px; line-height: 1.62; color: var(--g1) }
.pp-list { padding: 20px 22px 22px; border: 1px solid var(--hair); border-radius: 14px; background: var(--cream) }
.pp-list ul { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-direction: column; gap: 12px }
.pp-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px; align-items: start; font-size: 14.5px; line-height: 1.4; font-weight: 500 }
.pp-list li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #FFFFFF; font-style: normal; font-size: 11px; line-height: 1 }
/* a plugin's own sections (tables), how to install, the file */
.pp-sec { margin-top: 46px; scroll-margin-top: 24px }
.pp-sec h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: -.01em }
.pp-sec > p { margin-top: 10px; max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--g1) }
.pp-tbl { margin-top: 18px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #FFFFFF }
.pp-tbl > div { display: grid; grid-template-columns: var(--gc); gap: 18px; align-items: center; padding: 13px 20px; border-top: 1px solid var(--hair); font-size: 14.5px; line-height: 1.4; color: var(--ink) }
.pp-tbl > div:first-child { border-top: 0; padding: 11px 20px; background: var(--cream); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2) }
.pp-tbl span { min-width: 0 }
.pp-tbl code { padding: 3px 7px; border-radius: 6px; background: var(--lavbg); color: var(--brand); font-family: var(--mono); font-size: 12.5px }
.pp-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-family: var(--mono); font-style: normal; font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase }
.pp-pill.ok { background: var(--ok-fill); color: var(--ok) } .pp-pill.warn { background: var(--warn-fill); color: var(--warn) } .pp-pill.bad { background: var(--bad-fill); color: var(--bad) }
.pp-pill.none { background: #FFFFFF; color: var(--g1); box-shadow: inset 0 0 0 1px var(--hair) }
.pp-tint { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--g1) }
.pp-tint i { flex: none; width: 34px; height: 16px; border-radius: 5px }
.pp-tint i.ok { background: var(--ok-fill) } .pp-tint i.warn { background: var(--warn-fill) } .pp-tint i.bad { background: var(--bad-fill) } .pp-tint i.none { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--hair) }
.pp-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; padding: 0 }
.pp-steps li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 20px 20px 22px; border: 1px solid var(--hair); border-radius: 14px; background: #FFFFFF }
.pp-steps .n { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; color: var(--brand) }
.pp-steps b { margin-top: 14px; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.005em }
.pp-steps p { margin: 6px 0 16px; font-size: 14px; line-height: 1.5; color: var(--g1) }
.pp-steps .st-view, .pp-say { margin-top: auto }
.pp-say { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 12px; border-radius: 8px; background: var(--lavbg); color: var(--brand); font-family: var(--mono); font-size: 12.5px }
.pp-say::before { content: ">"; margin-right: 8px; opacity: .55 }
.pp-notes { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 16px 20px; border-radius: 14px; background: var(--cream) }
.pp-notes li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.5; color: var(--g1) }
.pp-notes li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand) }
.pp-file { margin-top: 18px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #FFFFFF }
.pp-fh { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px 14px }
.pp-fico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--lavbg); color: var(--brand); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em }
.pp-fn { flex: 1; min-width: 0 }
.pp-fn b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pp-fn .k { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.pp-fbody { margin: 0; max-height: 560px; overflow: auto; padding: 20px 22px; border-top: 1px solid var(--hair); background: var(--ink); color: #E9E7DF; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; white-space: pre; tab-size: 2 }
.pp-fbody[hidden] { display: none }

@media (max-width: 1400px) {
  .sx-hero { grid-template-columns: minmax(0, 1fr) 400px }
  .sx-hero h1 { font-size: clamp(30px, calc(3.2vw - 8px), 40px) }
  .pp-banner h1 { font-size: 40px }
}
@media (max-width: 1180px) {
  .sx-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; height: auto; max-height: 770px; padding: 0 36px }
  .sx-txt { padding-top: 36px } .sx-hero h1 { font-size: 38px }
  .sx-stage { margin-top: 44px } .sx-tag { right: -12px }
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .sx-tag { top: -24px }
  .sx-soon { grid-column: span 1 }
  .pp-banner, .pp-banner.has-art { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 36px 34px 38px }
  .pp-art { max-width: 640px }
  .pp-steps { grid-template-columns: 1fr } .pp-steps p { margin-bottom: 14px }
  .pp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pp-facts div:nth-child(3) { border-left: 0 } .pp-facts div:nth-child(n+3) { border-top: 1px solid var(--hair) }
  .pp-shot { padding: 40px 28px 20px }
  .pp-about { grid-template-columns: 1fr; gap: 28px }
}
/* phones + small tablets: the sidebar becomes a sticky top bar with a chip row */
@media (max-width: 860px) {
  .st { display: block }
  .st-side { position: sticky; top: 0; z-index: 20; display: block; height: auto; overflow: visible; padding: 12px 0 0; border-right: 0; border-bottom: 1px solid rgba(81,80,246,.16) }
  .st-brand { padding: 0 18px 10px }
  .st-brand img { height: 20px } .st-brand span { font-size: 19px }
  .st-nav { flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 18px 12px; scrollbar-width: none }
  .st-nav::-webkit-scrollbar { display: none }
  .st-nav a { flex: none; height: 34px; padding: 0 13px; gap: 8px; border-radius: 999px; border: 1px solid var(--hair); background: #FFFFFF; font-size: 13.5px; white-space: nowrap }
  .st-nav a svg { width: 16px; height: 16px }
  .st-nav a.on { background: var(--brand); border-color: var(--brand); color: #FFFFFF; box-shadow: none } .st-nav a.on svg { color: #FFFFFF }
  .st-nav .num, .st-cap, .st-sfoot { display: none }
  .st-main { min-height: 0 }
  .st-in { padding: 20px 18px 56px }
  .st-foot { padding: 16px 18px 24px }
  .sx-purple { border-radius: 16px }
  .sx-hero { max-height: 740px; padding: 0 22px }
  .sx-txt { padding-top: 28px } .sx-hero h1 { font-size: 31px } .sx-hero p { font-size: 15.5px }
  .sx-b1 { height: 44px; padding: 0 16px; font-size: 14.5px } .sx-btns .k { display: none }
  .sx-stage { margin-top: 42px } .sx-cm { display: none } .sx-tag { right: -6px; top: -26px; padding: 8px 10px 8px 8px }
  .sx-b2 { height: 44px; font-size: 14.5px }
  .sx-soon { min-height: 0; padding: 18px 18px 20px } .sx-soon b { font-size: 17px }
  .sx-sec { margin-top: 34px } .sx-h h2 { font-size: 22px }
  .sx-grid { grid-template-columns: 1fr; gap: 10px }
  .sx-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 13px 14px }
  .sx-card:hover { transform: none }
  .sx-card .st-ico { width: 48px; height: 48px; border-radius: 12px } .sx-card .st-ico svg { width: 20px }
  .sx-ct { display: block; min-width: 0 }
  .sx-card .nm { display: block; margin-top: 0; font-size: 15px } .sx-card .ds { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--g2) }
  .sx-card .ft { display: block; width: auto; margin: 0; padding: 0 } .sx-card .ft .k { display: none }
  .sx-chead h1 { font-size: 31px }
  .sx-empty { padding: 40px 20px 44px }
  .pp-banner, .pp-banner.has-art { gap: 26px; padding: 26px 22px 24px }
  .pp-hd { gap: 16px }
  .pp-banner .st-ico.is-88 { width: 68px; height: 68px; border-radius: 16px } .pp-banner .st-ico.is-88 svg { width: 28px }
  .pp-banner h1 { margin-top: 10px; font-size: 32px } .pp-banner p { margin-top: 18px; font-size: 15.5px }
  .pp-act { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px } .pp-act .sx-b1, .pp-act .sx-b2 { justify-content: center }
  .pp-meta { margin-top: 14px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .pp-art { border-radius: 10px }
  .pp-facts div { padding: 13px 15px 14px } .pp-facts b { font-size: 13.5px }
  .pp-shot { padding: 18px 14px 16px; border-radius: 16px } .pp-cm { display: none }
  .pp-cap { margin-top: 16px; padding-top: 12px } .pp-cap .k:last-child { display: none }
  .pp-about { margin-top: 34px } .pp-about h2 { font-size: 22px } .pp-about p { font-size: 15.5px }
  .pp-sec { margin-top: 34px; scroll-margin-top: 118px } .pp-sec h2 { font-size: 22px } .pp-sec > p { font-size: 15px }
  .pp-tbl > div { gap: 12px; padding: 12px 15px; font-size: 14px } .pp-tbl > div:first-child { padding: 10px 15px }
  .pp-tbl.m-hide3 > div { grid-template-columns: 84px minmax(0, 1fr) } .pp-tbl.m-hide3 span:nth-child(3) { display: none }
  .pp-tbl.m-wrap3 > div { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px } .pp-tbl.m-wrap3 span:nth-child(3) { grid-column: 1 / -1; color: var(--g1) }
  .pp-tbl.m-wrap3 > div:first-child span:nth-child(3) { display: none }
  .pp-steps li { padding: 18px 18px 20px } .pp-notes { padding: 14px 16px }
  .pp-fh { flex-wrap: wrap; padding: 14px } .pp-fn { flex: 1 1 calc(100% - 52px) } .pp-fh .st-view { flex: 1 }
  .pp-fbody { max-height: 440px; padding: 16px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere }
}
/* small phones: the hero window is zoomed down, so the crop comes up with it */
@media (max-width: 560px) { .sx-hero { max-height: 590px } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } .sx-card, .sx-b1, .sx-b2, .st-view { transition: none } .sx-card:hover { transform: none } }