/* THE PRODUCT VOCABULARY — `.pc-*`, and nothing else.
 *
 * A sixth sheet rather than an addition to landing.css or area.css, for the
 * reason app/layout.tsx gives about the other five: each page links the sheet
 * it needs, and a rule that only some pages use does not belong in the 94KB
 * every page already carries.
 *
 * It defines NO tokens. --wf-*, --io-accent, --io-display and --io-mono are
 * declared by whichever page sheet loaded first — landing.css on the index and
 * the product page, area.css or brand-io.css on an area page — and that is
 * deliberate: a product block on a dark index and a product block on an area
 * page should not be the same grey, they should each be their page's grey.
 * Every value below is either a token or a measurement, never a hex literal
 * that would pin it to one of the two.
 *
 * `.pc-` was checked against all five existing sheets before it was chosen.
 * Zero hits.
 */

.pc-sec{padding:64px 0 8px;position:relative}
.pc-anchor{position:absolute;top:calc(-1 * var(--nav-h, 50px) - 50px)}
.pc-eyebrow{font:700 8.5px/1 var(--io-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--io-accent);margin:0 0 10px}
.pc-title{font:500 30px/1.14 var(--io-display);letter-spacing:-.022em;color:var(--wf-fg);margin:0}
.pc-sub{font:400 14px/1.6 var(--ui);color:var(--wf-fg-subtle);margin:10px 0 0;max-width:62ch}

/* auto-fit, so the block is right at one product and at nine without the page
   saying which it has. minmax's floor is the narrowest a title and a price sit
   side by side without wrapping the price onto its own line. */
.pc-grid{margin-top:26px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}

.pc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:9px;
  padding:16px 17px 14px;text-decoration:none;
  background:linear-gradient(160deg,var(--wf-surface),var(--wf-bg-sunken));
  border:1px solid var(--wf-border);border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 14px 32px -18px rgba(0,0,0,.6);
  transition:border-color .16s cubic-bezier(.4,0,.2,1),transform .16s cubic-bezier(.4,0,.2,1)}
.pc-card:hover{border-color:var(--wf-brand);transform:translateY(-3px)}
/* The corner glow the area card carries, at the same radius and the same
   token, so the two vocabularies read as one system on the index where they
   appear on the same page. */
.pc-card::after{content:"";position:absolute;top:-60px;right:-60px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,var(--io-accent-soft),transparent 68%);
  pointer-events:none}
.pc-card > *{position:relative;z-index:2}

.pc-top{display:flex;align-items:center;gap:9px}
.pc-icon{font-size:15px;line-height:1}
.pc-icon img,.pc-h1-icon img{display:block}
.pc-kind{font:700 8px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--io-accent);border:1px solid rgba(255,144,19,.26);background:rgba(255,144,19,.10);
  padding:4px 8px;border-radius:4px}
.pc-name{font:600 15.5px/1.24 var(--io-display);letter-spacing:-.012em;color:var(--wf-fg)}
/* Clamped, not truncated by length in the component: a summary is written by
   whoever seeded it and a three-line box is the card's decision, not the
   copy's. Four lines on the product page, three here. */
.pc-sum{font:400 12.5px/1.55 var(--ui);color:var(--wf-fg-subtle);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{margin-top:auto;padding-top:11px;display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--wf-border)}
.pc-price{font:700 17px/1 var(--io-display);color:var(--io-accent);letter-spacing:-.02em}
/* A product that is listed and not buyable says so in the subtle ink rather
   than the accent — it is a state, not an offer. */
.pc-price.muted{font-size:11.5px;font-weight:600;color:var(--wf-fg-subtle);letter-spacing:.04em}
.pc-go{margin-left:auto;display:inline-flex;align-items:center;gap:3px;
  font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--wf-fg-subtle)}
.pc-go svg{width:11px;height:11px}
.pc-card:hover .pc-go{color:var(--io-accent)}

/* ── THE PRODUCT PAGE ──────────────────────────────────────────────────── */

.pc-page{padding:calc(var(--nav-h) + 40px) 0 90px}
.pc-detail{max-width:72ch}
.pc-h1{display:flex;align-items:center;gap:11px;margin:0;
  font:500 34px/1.12 var(--io-display);letter-spacing:-.026em;color:var(--wf-fg)}
.pc-h1-icon{font-size:26px;line-height:1}
.pc-lead{font:400 15px/1.62 var(--ui);color:var(--wf-fg-subtle);margin:14px 0 0}
.pc-amount{font:700 26px/1 var(--io-display);color:var(--io-accent);letter-spacing:-.024em;
  margin:22px 0 0}
.pc-amount.muted{font-size:13px;font-weight:600;color:var(--wf-fg-subtle);letter-spacing:.04em}
.pc-block{margin-top:34px}
.pc-block h2{font:600 12px/1 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--wf-fg-subtle);margin:0 0 13px}
.pc-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.pc-list li{position:relative;padding-left:19px;
  font:400 14px/1.6 var(--ui);color:var(--wf-fg)}
.pc-list li::before{content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--io-accent)}
.pc-body{font:400 14px/1.68 var(--ui);color:var(--wf-fg);margin:0}
.pc-faq{margin:0}
.pc-faq > div + div{margin-top:16px}
.pc-faq dt{font:600 14px/1.5 var(--ui);color:var(--wf-fg)}
.pc-faq dd{margin:5px 0 0;font:400 14px/1.62 var(--ui);color:var(--wf-fg-subtle)}

/* ── THE PRODUCT PAGE, BUILT OUT ───────────────────────────────────────
   Every value a token or a measurement, per the header. */

.pc-card[hidden],.pc-shelf[hidden]{display:none}
.pc-muted{color:var(--wf-fg-subtle);margin-top:10px}

.pc-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 26px;
  font:600 11px/1.3 var(--io-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wf-fg-faint)}
.pc-crumb a{color:var(--wf-fg-subtle);text-decoration:none}
.pc-crumb a:hover{color:var(--io-accent)}
.pc-crumb [aria-current]{color:var(--wf-fg)}

.pc-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.pc-hero-copy .pc-h1{font-size:44px;line-height:1.06}
.pc-hero-copy .pc-lead{font-size:16.5px;max-width:60ch}

.pc-stats{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.pc-stats li{display:flex;flex-direction:column;gap:6px;min-width:110px;padding:14px 16px;
  border:1px solid var(--wf-border);border-radius:10px;background:var(--wf-bg-sunken)}
.pc-stats b{font:700 24px/1 var(--io-display);letter-spacing:-.03em;color:var(--wf-fg)}
.pc-stats span{font:600 9.5px/1.2 var(--io-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--wf-fg-subtle)}

.pc-panel{position:sticky;top:calc(var(--nav-h) + 20px);padding:22px;border-radius:14px;
  border:1px solid var(--wf-border-strong);
  background:linear-gradient(170deg,var(--wf-surface),var(--wf-bg-sunken));
  box-shadow:0 24px 60px -30px var(--wf-brand-glow)}
.pc-panel-kind{margin:0;font:700 9px/1 var(--io-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--wf-fg-subtle)}
.pc-panel .pc-amount{font-size:40px;margin:12px 0 18px}
.pc-panel-list{margin:18px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--wf-border);
  display:flex;flex-direction:column;gap:9px}
.pc-panel-list li{position:relative;padding-left:22px;font:400 13.5px/1.45 var(--ui);color:var(--wf-fg)}
.pc-panel-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--io-accent);font-weight:700}
.pc-secure{display:flex;align-items:center;gap:7px;margin:16px 0 0;
  font:600 10.5px/1 var(--io-mono);letter-spacing:.06em;color:var(--wf-fg-subtle)}
.pc-secure svg{width:13px;height:13px}

/* THE BUY BUTTON. Ink is the page's own background rather than a white
   literal: dark on the accent on the landing sheet, and whatever that page's
   ground is anywhere else. */
.pc-buy-form{margin:0}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:0 24px;border:0;border-radius:9px;cursor:pointer;text-decoration:none;
  font:700 14.5px/1 var(--io-display);letter-spacing:-.005em;
  background:var(--io-accent);color:var(--wf-bg);
  box-shadow:0 0 0 1px var(--wf-brand),0 12px 32px -12px var(--wf-brand-glow);
  transition:transform .15s ease,filter .15s ease}
.pc-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.pc-btn:focus-visible{outline:2px solid var(--wf-fg);outline-offset:3px}
.pc-btn-block{width:100%}
.pc-btn-ghost{background:transparent;color:var(--wf-fg);box-shadow:inset 0 0 0 1px var(--wf-border-strong)}
.pc-btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--io-accent);filter:none}
.pc-buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:20px 0 0}
.pc-buy-note{font:600 11px/1.4 var(--io-mono);letter-spacing:.06em;color:var(--wf-fg-subtle);margin:14px 0 0}
.pc-alert{margin:14px 0 0;padding:10px 14px;border:1px solid var(--wf-border-strong);border-radius:8px;
  font:500 13px/1.5 var(--ui);color:var(--wf-fg);background:var(--wf-bg-sunken)}

.pc-sec2{margin-top:76px}
.pc-sec2-head{max-width:70ch}
.pc-h2{font:500 28px/1.16 var(--io-display);letter-spacing:-.022em;color:var(--wf-fg);margin:0}
.pc-h2 a{color:inherit;text-decoration:none}
.pc-h2 a:hover{color:var(--io-accent)}
.pc-h2 em{font-style:normal;color:var(--io-accent)}

.pc-toc{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.pc-toc li{display:flex;align-items:baseline;gap:12px;padding:12px 14px;
  border:1px solid var(--wf-border);border-radius:9px;background:var(--wf-bg-sunken)}
.pc-toc-n{font:700 11px/1 var(--io-mono);color:var(--io-accent);letter-spacing:.06em}
.pc-toc-t{font:500 14px/1.35 var(--ui);color:var(--wf-fg)}
.pc-more{margin-top:8px}
.pc-more>summary{cursor:pointer;list-style:none;display:inline-flex;margin-top:10px;padding:10px 16px;
  border:1px solid var(--wf-border-strong);border-radius:8px;
  font:700 10.5px/1 var(--io-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wf-fg)}
.pc-more>summary::-webkit-details-marker{display:none}
.pc-more[open]>summary{display:none}

.pc-sample{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-top:26px}
.pc-sample-doc,.pc-sample-side{position:relative;padding:22px;border-radius:12px;
  border:1px solid var(--wf-border);background:var(--wf-surface)}
.pc-sample-label{margin:0 0 10px;font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--io-accent)}
.pc-sample-text{margin:0;font:400 15px/1.7 var(--ui);color:var(--wf-fg)}
.pc-sample-parts{margin:20px 0 0;padding:16px 0 0;list-style:none;border-top:1px dashed var(--wf-border-strong);
  display:flex;flex-wrap:wrap;gap:8px}
.pc-sample-parts li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--wf-border);font:600 11px/1 var(--io-mono);color:var(--wf-fg-subtle)}
.pc-sample-parts svg{width:11px;height:11px}
.pc-fields{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.pc-fields code{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:5px 8px;border-radius:6px;
  font:500 11.5px/1.35 var(--io-mono);color:var(--wf-fg);background:var(--wf-bg-sunken);border:1px solid var(--wf-border)}
.pc-sample-side .pc-sub{margin:0;font-size:13px}

.pc-steps{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
.pc-steps li{padding:22px;border:1px solid var(--wf-border);border-radius:12px;background:var(--wf-bg-sunken)}
.pc-step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  font:700 13px/1 var(--io-display);color:var(--wf-bg);background:var(--io-accent)}
.pc-steps h3{margin:14px 0 6px;font:600 17px/1.2 var(--io-display);color:var(--wf-fg)}
.pc-steps p{margin:0;font:400 14px/1.6 var(--ui);color:var(--wf-fg-subtle)}

.pc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:44px}
.pc-faq2 details{border-bottom:1px solid var(--wf-border);padding:14px 0}
.pc-faq2 summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;
  font:600 15px/1.45 var(--ui);color:var(--wf-fg)}
.pc-faq2 summary::-webkit-details-marker{display:none}
.pc-faq2 summary::after{content:"+";color:var(--io-accent);font-weight:700}
.pc-faq2 details[open] summary::after{content:"–"}
.pc-faq2 p{margin:8px 0 0;font:400 14px/1.62 var(--ui);color:var(--wf-fg-subtle)}

.pc-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:76px;
  padding:30px 32px;border-radius:14px;border:1px solid var(--wf-brand);
  background:radial-gradient(120% 140% at 100% 0,var(--io-accent-soft),transparent 60%),var(--wf-bg-sunken)}
.pc-cta .pc-h2{max-width:26ch}

.pc-dock{display:none}
.pc-all{margin:18px 0 0}
.pc-all a{font:700 10.5px/1 var(--io-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--io-accent);text-decoration:none}
.pc-all a:hover{text-decoration:underline}

/* ── THE INDEX ──────────────────────────────────────────────────────── */
.pc-index-head{max-width:78ch}
.pc-index-head .pc-h1{font-size:48px}
.pc-filter{display:flex;flex-direction:column;gap:8px;margin:28px 0 0;max-width:460px}
.pc-filter-l{font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--wf-fg-subtle)}
.pc-filter input{height:46px;padding:0 14px;border-radius:9px;border:1px solid var(--wf-border-strong);
  background:var(--wf-bg-sunken);color:var(--wf-fg);font:400 15px/1 var(--ui)}
.pc-filter input:focus{outline:2px solid var(--io-accent);outline-offset:1px}
.pc-shelf{margin-top:56px}
.pc-shelf-head{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--wf-border)}
.pc-shelf-n{font:700 11px/1 var(--io-mono);color:var(--wf-fg-subtle)}
.pc-empty{margin-top:40px;font:400 15px/1.6 var(--ui);color:var(--wf-fg-subtle)}

@media (max-width:980px){
  .pc-hero{grid-template-columns:1fr;gap:28px}
  .pc-panel{position:static}
  .pc-sample,.pc-split{grid-template-columns:1fr}
  .pc-steps{grid-template-columns:1fr}
}

@media (max-width:640px){
  .pc-hero-copy .pc-h1,.pc-index-head .pc-h1{font-size:32px}
  .pc-h2{font-size:22px}
  .pc-stats li{min-width:calc(50% - 5px);flex:1}
  .pc-sec2,.pc-cta{margin-top:52px}
  .pc-cta{padding:22px}
  .pc-page{padding-bottom:120px}
  .pc-dock{display:flex;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--wf-surface);border-top:1px solid var(--wf-border-strong)}
  .pc-dock-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
  .pc-dock-t b{font:600 14px/1.2 var(--io-display);color:var(--wf-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pc-dock-t span{font:600 11px/1 var(--io-mono);color:var(--io-accent)}
  .pc-dock .pc-btn{min-height:44px;padding:0 18px}
  .pc-sec{padding:44px 0 4px}
  .pc-title{font-size:24px}
  .pc-h1{font-size:26px}
  .pc-grid{grid-template-columns:1fr}
}

/* ── THE TEMPLATE GALLERY — the Notion template as pictures ────────────────
   The images are drawn by /libraries/<slug>/image/<view>.png (lib/mockup.tsx).
   The wide one leads; the two beside it are the same template's prompts and
   its phone view. */
.pc-shots{margin-top:26px;display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.pc-shot{margin:0;display:flex;flex-direction:column;gap:9px}
.pc-shot-wide{grid-column:1 / -1}
.pc-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--wf-border);
  background:var(--wf-surface);box-shadow:0 18px 44px -24px rgba(0,0,0,.7)}
.pc-shot figcaption{font:500 10px/1.4 var(--io-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--wf-fg-subtle)}

/* A card's cover: the same image as the og:image, at the top of the card. */
.pc-thumb{display:block;width:calc(100% + 34px);margin:-16px -17px 4px;aspect-ratio:1200 / 630;height:auto;
  border-bottom:1px solid var(--wf-border);background:var(--wf-bg-sunken)}

/* ── THE LOOPS ─────────────────────────────────────────────────────────── */
.pc-loops{margin-top:26px;display:grid;gap:28px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.pc-loop-side h3{font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--io-accent);margin:22px 0 10px}
.pc-loop-side h3:first-child{margin-top:4px}
.pc-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pc-links li{font:500 13px/1.3 var(--ui);color:var(--wf-fg-muted);padding:7px 11px;border-radius:7px;
  border:1px solid var(--wf-border);background:var(--wf-surface)}
.pc-links a{color:var(--wf-fg);text-decoration:none}
.pc-links a:hover{color:var(--io-accent)}
.pc-phases{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pc-phases li{display:flex;justify-content:space-between;gap:12px;font:400 13px/1.4 var(--ui);color:var(--wf-fg-subtle);
  padding:8px 11px;border-radius:7px;background:var(--wf-surface)}
.pc-phases b{font-weight:600;color:var(--wf-fg)}

.lp-fig{margin:0;display:flex;flex-direction:column;gap:14px}
.lp{display:block;width:100%;max-width:560px;height:auto}
.lp text{font-family:var(--io-mono);text-anchor:middle}
.lp-ring{fill:none;stroke:var(--wf-border-strong, var(--wf-border));stroke-width:2}
.lp-dir{fill:none;stroke:var(--io-accent);stroke-width:2.2}
.lp-arrowhead{fill:var(--io-accent)}
.lp-node circle{fill:var(--wf-surface);stroke:var(--wf-border-strong, var(--wf-border));stroke-width:1.5}
.lp-node .lp-n{font-size:9px;fill:var(--wf-fg-subtle);letter-spacing:.1em}
.lp-node .lp-t{font-size:11.5px;font-weight:600;fill:var(--wf-fg)}
.lp-node.on circle{fill:var(--io-accent);stroke:var(--io-accent)}
.lp-node.on .lp-n,.lp-node.on .lp-t{fill:var(--wf-bg)}
.lp-hub circle{fill:var(--wf-bg-sunken);stroke:var(--wf-border);stroke-dasharray:3 5}
.lp-hub.on circle{fill:var(--io-accent-soft);stroke:var(--io-accent);stroke-dasharray:none}
.lp-hub-k{font-size:8.5px;letter-spacing:.14em;fill:var(--io-accent);text-transform:uppercase}
.lp-hub-t{font-size:20px;font-weight:600;fill:var(--wf-fg);font-family:var(--io-display)}
.lp-hub-s{font-size:9.5px;fill:var(--wf-fg-subtle)}
.lp-gate line{stroke:var(--wf-fg-subtle);stroke-dasharray:3 4}
.lp-gate circle{fill:var(--wf-fg-subtle)}
.lp-gate rect{fill:var(--wf-bg);stroke:var(--wf-fg-subtle);stroke-dasharray:4 4}
.lp-gate text{font-size:10px;fill:var(--wf-fg-muted)}
.lp-cap{display:flex;flex-direction:column;gap:5px}
.lp-cap-k{font:700 9px/1 var(--io-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--io-accent)}
.lp-cap-t{font:500 18px/1.25 var(--io-display);color:var(--wf-fg)}
.lp-cap-s{font:400 13px/1.55 var(--ui);color:var(--wf-fg-subtle)}
.lp-cap-s b{color:var(--wf-fg);font-weight:600}

/* The flowchart scrolls inside its own frame on a narrow screen; the page never does. */
.wf-frame{margin-top:30px;overflow-x:auto;border:1px solid var(--wf-border);border-radius:12px;
  background:var(--wf-bg-sunken);padding:14px}
.wf{display:block;width:100%;min-width:880px;height:auto}
.wf text{font-family:var(--ui)}
.wf-l{fill:none;stroke:var(--wf-fg-subtle);stroke-width:1.5}
.wf-arrowhead{fill:var(--wf-fg-subtle)}
.wf-box rect{fill:var(--wf-surface);stroke:var(--wf-border-strong, var(--wf-border));stroke-width:1.2}
.wf-box.phase rect{stroke:var(--io-accent)}
.wf-box.human rect{stroke:var(--io-accent);stroke-dasharray:5 4;fill:var(--wf-bg)}
.wf-box.start rect{fill:var(--wf-bg)}
.wf-bt{font-size:12.5px;font-weight:600;fill:var(--wf-fg)}
.wf-box.phase .wf-bt{fill:var(--io-accent)}
.wf-bs{font-size:10.5px;fill:var(--wf-fg-subtle)}
.wf-bl{font-size:10.5px;fill:var(--wf-fg-muted);font-family:var(--io-mono)}
.wf a:hover .wf-box rect{fill:var(--io-accent-soft)}
.wf-dia path{fill:var(--wf-bg);stroke:var(--wf-fg-muted);stroke-width:1.4}
.wf-dia text{font-size:10.5px;fill:var(--wf-fg);text-anchor:middle;font-weight:600}
.wf-tag rect{fill:var(--io-accent-soft);stroke:var(--io-accent);stroke-width:1}
.wf-tag text{font-size:10px;fill:var(--io-accent);text-anchor:middle;font-family:var(--io-mono)}

@media (max-width:980px){
  .pc-loops{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pc-shots{grid-template-columns:1fr}
}