/* FONTS for the Deep Dropdown UI block at the bottom of this file
   (added 2026-08-17). @import must be the first rule in a stylesheet,
   which is why this sits above the file's own banner. Archivo +
   JetBrains Mono are the two families the extracted bundle ships; both
   are variable fonts (wght axis) on the bundle's side too, so this is
   a like-for-like substitution, not static-vs-variable (design doc §9).
   If Obsidian ever blocks the remote fetch, every rule below falls
   back to 'Plus Jakarta Sans' / ui-monospace, already registered by
   pravarine-dashboard.css. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================================
   galvania-root-ui.css
   Shared snippet for "Pravarine UI.md" and "Matrix P UI.md".
   Save as: .obsidian/snippets/galvania-root-ui.css
   Then enable it in Settings -> Appearance -> CSS snippets.

   FONTS: Unbounded + Plus Jakarta Sans are expected to already be
   registered by pravarine-dashboard.css. @font-face rules are global
   once a snippet is enabled, so as long as that snippet stays on,
   these families resolve. If they don't, copy its @font-face blocks
   to the top of this file.
   ============================================================ */


/* ---------- WIDTH FIX 1 of 2: view-root, sizer, scroller ----------
   The cssclass lands DIRECTLY on the view-root element, so these
   selectors compound onto it with no space. */
.markdown-source-view.mod-cm6.galvania-root-ui,
.markdown-preview-view.galvania-root-ui,
.markdown-source-view.mod-cm6.galvania-root-ui .cm-content,
.markdown-source-view.mod-cm6.galvania-root-ui .cm-sizer,
.markdown-source-view.mod-cm6.galvania-root-ui .cm-scroller,
.markdown-preview-view.galvania-root-ui .markdown-preview-sizer {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.markdown-source-view.mod-cm6.galvania-root-ui .inline-title,
.markdown-preview-view.galvania-root-ui .inline-title,
.markdown-preview-view.galvania-root-ui .markdown-preview-sizer > .mod-header { display: none; }

/* ---------- WIDTH FIX 2 of 2: the dataviewjs block wrapper ----------
   Obsidian wraps every rendered code block in its own element with a
   SEPARATE width cap. Skipping this is what keeps the note boxed in. */
.markdown-preview-view.galvania-root-ui div:has(> .block-language-dataviewjs) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}
.markdown-source-view.mod-cm6.galvania-root-ui .cm-preview-code-block:has(> .block-language-dataviewjs) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
}
/* the block element itself, and Dataview's own paragraph wrapper */
.galvania-root-ui .block-language-dataviewjs,
.galvania-root-ui .block-language-dataviewjs > * {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================================
   TOKENS
   --s is written by the note's JS from the pane's own width.
   1500px pane == 1.0. Everything structural is calc()'d off it,
   so the layout grows without distorting.
   ============================================================ */
.pv-root {
  --s: 1;

  --teal:      #6fe3dc;
  --teal-mid:  #3fb3ae;
  --teal-deep: #2b8b88;
  --teal-dark: #1d6b69;

  --paper:   #eafffd;
  --paper-2: #f2fffd;
  --ink:     #07110f;
  --ink-2:   #16403f;
  --dim:     #7f9291;
  --dim-2:   #9fb0b1;

  --font-display: Unbounded, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;

  /* signature chamfer: notched top-right, cut top-left + bottom-right */
  --chamfer: polygon(
    0 calc(22px * var(--s)), calc(22px * var(--s)) 0,
    calc(100% - 66px * var(--s)) 0, calc(100% - 50px * var(--s)) calc(15px * var(--s)),
    100% calc(15px * var(--s)), 100% calc(100% - 22px * var(--s)),
    calc(100% - 22px * var(--s)) 100%, 0 100%);
  --chamfer-lg: polygon(
    0 calc(26px * var(--s)), calc(26px * var(--s)) 0,
    calc(100% - 78px * var(--s)) 0, calc(100% - 60px * var(--s)) calc(17px * var(--s)),
    100% calc(17px * var(--s)), 100% calc(100% - 26px * var(--s)),
    calc(100% - 26px * var(--s)) 100%, 0 100%);

  width: 100%;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.pv-root, .pv-root *, .pv-root *::before, .pv-root *::after { box-sizing: border-box; }


/* ---------- shell ---------- */
.pv-stage {
  display: flex;
  padding: calc(33px * var(--s));
  background: radial-gradient(1200px 700px at 60% -10%, #14201f 0%, #080a0b 55%, #050607 100%);
}
.pv-frame {
  flex: 1 1 auto;
  min-width: 0;
  /* Fixed-height boundary, added 2026-08-12 — matches .pvr-bezel's own
     formula exactly (Root UI, below), so Deep UI's frame no longer
     shrink-wraps to however many cards happen to be on the current
     page. The boundary itself is now permanent/pane-relative; only the
     content inside scrolls (.pv-cards, below) — nothing here stretches
     card sizing to fill the space. */
  height: min(calc(100vh - 150px), 960px);
  min-height: min(640px, calc(100vh - 150px));
  padding: calc(13.5px * var(--s));
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: calc(24px * var(--s));
  background: linear-gradient(150deg, #2b3136 0%, #0d1012 40%, #333a3f 62%, #0a0d0e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 30px 70px rgba(0, 0, 0, .65);
}
.pv-panel {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: calc(18px * var(--s));
  background: linear-gradient(200deg, #12181a 0%, #0a0e10 45%, #151b1e 70%, #080b0c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* graph paper + scanlines */
.pv-panel::before,
.pv-panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.pv-panel::before {
  background-image:
    linear-gradient(rgba(120, 180, 178, .09) 1px, rgba(0, 0, 0, 0) 1px),
    linear-gradient(90deg, rgba(120, 180, 178, .09) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: calc(66px * var(--s)) calc(66px * var(--s)), calc(66px * var(--s)) calc(66px * var(--s));
}
.pv-panel::after {
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .035) 0px, rgba(255, 255, 255, .035) 1px,
    rgba(0, 0, 0, .05) 1px, rgba(0, 0, 0, .05) 3px);
}
.pv-rail {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(5px * var(--s));
  background: linear-gradient(rgba(0,0,0,0), var(--teal-deep) 18%, var(--teal-mid) 52%, rgba(0,0,0,0));
  pointer-events: none;
}
.pv-hatch {
  position: absolute; top: calc(30px * var(--s)); right: calc(30px * var(--s));
  width: calc(75px * var(--s)); height: calc(75px * var(--s));
  opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    rgba(255,255,255,.5) 0px, rgba(255,255,255,.5) 5px,
    rgba(0,0,0,0) 5px, rgba(0,0,0,0) 11px);
}
.pv-body {
  position: relative; z-index: 1;
  height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  gap: calc(22.5px * var(--s));
  padding: calc(27px * var(--s)) calc(30px * var(--s)) calc(22.5px * var(--s));
}


/* ---------- header ---------- */
.pv-head { display: flex; align-items: center; gap: calc(21px * var(--s)); }
.pv-brand { display: flex; align-items: center; gap: calc(10px * var(--s)); flex: 0 0 auto; }
.pv-mark {
  display: flex; align-items: center; justify-content: center;
  width: calc(38px * var(--s)); height: calc(38px * var(--s));
  font-family: var(--font-display); font-size: calc(15px * var(--s)); font-weight: 800;
  color: var(--ink);
  background: linear-gradient(160deg, #ffffff, #dfeae9);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.pv-wordmark {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(15px * var(--s)); line-height: 1;
  letter-spacing: calc(2.4px * var(--s));
  color: var(--paper);
  text-shadow: 0 0 14px rgba(111, 227, 220, .55);
  white-space: nowrap;
}
.pv-crumb {
  display: flex; align-items: center; gap: calc(8px * var(--s)); flex: 0 0 auto;
  font-size: 9.5px; font-weight: 600; line-height: 1; letter-spacing: 1.9px;
  color: var(--dim); white-space: nowrap;
}
.pv-crumb .is-area { color: var(--teal); }
.pv-crumb .is-here { color: #dfe9ea; }
.pv-hairline {
  flex: 1 1 0; min-width: calc(120px * var(--s)); height: 1px;
  background: linear-gradient(90deg, rgba(111, 227, 220, .5), rgba(0, 0, 0, 0));
}
.pv-search {
  display: flex; align-items: center; gap: calc(10px * var(--s));
  flex: 0 1 calc(320px * var(--s)); min-width: calc(180px * var(--s));
  padding: calc(10px * var(--s)) calc(16px * var(--s));
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(120deg, #22282b 0%, #101416 42%, #2b3236 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  clip-path: polygon(0 40%, calc(14px * var(--s)) 0, 100% 0, 100% 60%, calc(100% - 14px * var(--s)) 100%, 0 100%);
}
.pv-search span:first-child { color: var(--teal); font-size: calc(15px * var(--s)); line-height: 1; }
.pv-search input {
  flex: 1 1 0; min-width: 0;
  border: 0; outline: none; background: transparent; box-shadow: none;
  padding: 1px 2px; height: auto;
  font-family: var(--font-body); font-size: calc(13px * var(--s)); font-weight: 500;
  color: #eef7f7;
}
.pv-search input::placeholder { color: rgba(255, 255, 255, .3); }
.pv-kbd {
  flex: 0 0 auto; font-size: 8.5px; font-weight: 600; letter-spacing: 1.53px;
  color: rgba(255, 255, 255, .32);
}
.pv-tools { display: flex; align-items: center; gap: calc(6px * var(--s)); flex: 0 0 auto; }
.pv-seg {
  display: flex; align-items: center;
  padding: 0 calc(14px * var(--s)); height: calc(34px * var(--s));
  font-family: var(--font-display); font-size: 8.5px; font-weight: 700; letter-spacing: 1.02px;
  color: var(--dim-2); white-space: nowrap; cursor: default;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
  clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 11px * var(--s)) 100%, 0 100%);
}
.pv-seg.is-on {
  color: var(--paper-2); border-color: transparent;
  background: linear-gradient(160deg, var(--teal-mid), var(--teal-dark));
}
.pv-clock {
  font-size: 9px; font-weight: 600; letter-spacing: 1.8px; color: var(--teal);
  opacity: .94; white-space: nowrap;
}


/* ---------- grid ---------- */
.pv-grid {
  position: relative;
  display: grid;
  gap: calc(22px * var(--s));
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* gradient hairline border = outer padded shell + inner fill, same clip */
.pv-tile {
  position: relative;
  padding: calc(1.5px * var(--s));
  clip-path: var(--chamfer);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  background: linear-gradient(200deg, rgba(111, 227, 220, .4), rgba(0, 0, 0, .6));
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease;
}
.pv-tile:hover { transform: translateY(calc(-2px * var(--s))); filter: brightness(1.08); }
.pv-tile:focus-visible { outline: none; filter: brightness(1.18); }
.pv-tile.is-selected { background: linear-gradient(200deg, var(--paper), rgba(111, 227, 220, .55)); }
.pv-tile.is-dragging { opacity: .45; }

.pv-face {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: calc(14px * var(--s));
  min-height: calc(250px * var(--s));
  padding: calc(19.5px * var(--s));
  clip-path: var(--chamfer);
  background: linear-gradient(200deg, #343a3f 0%, #101416 38%, #434a50 60%, #0d1012 100%);
}
.pv-face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .04) 0px, rgba(255, 255, 255, .04) 1px,
    rgba(0, 0, 0, .05) 1px, rgba(0, 0, 0, .05) 3px);
}
.pv-face > * { position: relative; z-index: 1; }

/* --- variants --- */
.pv-tile--paper .pv-face {
  background: linear-gradient(200deg, #f4f8f7 0%, #dae4e3 55%, #b9c6c5 100%);
}
.pv-tile--paper { background: linear-gradient(200deg, rgba(255,255,255,.5), rgba(0,0,0,.5)); }
.pv-tile--paper .pv-face::before {
  background: repeating-linear-gradient(90deg,
    rgba(0,0,0,.035) 0px, rgba(0,0,0,.035) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
}
.pv-tile--void .pv-face {
  background:
    linear-gradient(200deg, #0d1012 0%, rgba(5,7,8,0) 40%, #161b1e 70%, #070a0b 100%), #0a0d0e;
}
.pv-tile--void { background: linear-gradient(200deg, rgba(255,255,255,.16), rgba(0,0,0,.6)); }

/* --- hero (first tile, spans two columns) --- */
.pv-tile--hero { clip-path: var(--chamfer-lg); box-shadow: 0 18px 44px rgba(0,0,0,.55);
  background: linear-gradient(200deg, rgba(234,255,253,.55), rgba(0,0,0,.55)); }
.pv-tile--hero.pv-span2 { grid-column: span 2; }
.pv-tile--hero .pv-face {
  clip-path: var(--chamfer-lg);
  gap: calc(21px * var(--s));
  padding: calc(22.5px * var(--s)) calc(24px * var(--s));
  background: linear-gradient(150deg, #3aa8a3 0%, #2b8b88 45%, #1d6b69 100%);
}
.pv-tile--hero .pv-face::after {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.14) 0px, rgba(255,255,255,.14) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 9px);
}

/* --- tile internals --- */
.pv-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12px * var(--s)); }
.pv-index {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(38px * var(--s)); line-height: .9; letter-spacing: calc(-1.14px * var(--s));
  color: #eaf4f4;
}
.pv-tile--paper .pv-index { color: var(--ink-2); }
.pv-glyph {
  flex: 0 0 auto; width: calc(30px * var(--s)); height: calc(30px * var(--s)); opacity: .6;
  background: repeating-linear-gradient(135deg,
    rgba(111,227,220,.7) 0px, rgba(111,227,220,.7) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px);
}
.pv-tile--paper .pv-glyph {
  background: repeating-linear-gradient(135deg,
    rgba(22,64,63,.75) 0px, rgba(22,64,63,.75) 3px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px);
}
.pv-glyph--file { clip-path: polygon(0 0, 68% 0, 100% 32%, 100% 100%, 0 100%); }
.pv-tile-foot { display: flex; flex-direction: column; gap: calc(7px * var(--s)); }
.pv-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(19px * var(--s)); line-height: 1.08; letter-spacing: calc(-0.19px * var(--s));
  color: var(--paper);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-tile--paper .pv-name { color: var(--ink); }
.pv-kind {
  font-size: 9px; font-weight: 500; line-height: 1.4; letter-spacing: 1.62px;
  color: var(--dim);
}
.pv-tile--paper .pv-kind { color: rgba(22, 64, 63, .75); }
.pv-ticks { display: flex; align-items: center; gap: calc(4px * var(--s)); height: calc(8px * var(--s)); }
.pv-ticks i { width: calc(16px * var(--s)); height: 2px; background: rgba(255, 255, 255, .14); }
.pv-ticks i.is-lit { background: var(--teal); }
.pv-tile--paper .pv-ticks i { background: rgba(22, 64, 63, .2); }
.pv-tile--paper .pv-ticks i.is-lit { background: var(--teal-dark); }

/* --- hero internals --- */
.pv-hero-eyebrow {
  font-size: 9px; font-weight: 600; line-height: 1; letter-spacing: calc(2.16px * var(--s));
  color: rgba(255, 255, 255, .72);
}
.pv-dots { display: flex; gap: calc(5px * var(--s)); }
.pv-dots span {
  width: calc(15px * var(--s)); height: calc(15px * var(--s)); border-radius: 50%;
  background: rgba(7, 17, 15, .35);
}
.pv-dots span.is-lit { background: var(--paper); box-shadow: 0 0 12px rgba(234, 255, 253, .8); }
.pv-ghost {
  flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(81px * var(--s)); line-height: .82; letter-spacing: calc(-3.24px * var(--s));
  color: var(--ink); opacity: .72;
}
.pv-hero-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(31.5px * var(--s)); line-height: 1.02; letter-spacing: calc(-0.63px * var(--s));
  color: var(--paper-2);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-hero-kind {
  font-size: 11.5px; font-weight: 500; line-height: 1.4; letter-spacing: 1.61px;
  color: rgba(255, 255, 255, .75);
}
.pv-bars { display: flex; align-items: flex-end; gap: calc(2px * var(--s)); height: calc(26px * var(--s)); }
.pv-bars i { width: calc(2px * var(--s)); background: var(--ink); }
.pv-hero-underline { position: relative; height: calc(3px * var(--s)); background: rgba(0, 0, 0, .28); }
.pv-hero-underline i {
  position: absolute; inset: 0 auto 0 0; width: 78%;
  background: var(--paper); box-shadow: 0 0 12px rgba(234, 255, 253, .8);
}

/* --- hidden-folders drop tile --- */
.pv-drop { background: linear-gradient(200deg, rgba(111, 227, 220, .3), rgba(0, 0, 0, .5)); }
.pv-drop .pv-face {
  justify-content: flex-end;
  background: repeating-linear-gradient(135deg, #141b1d 0px, #141b1d 8px, #0e1416 8px, #0e1416 16px);
}
.pv-drop.is-over { background: linear-gradient(200deg, var(--teal), rgba(0,0,0,.5)); }
.pv-drop.is-over .pv-face {
  background: repeating-linear-gradient(135deg, #1c2b2c 0px, #1c2b2c 8px, #12201f 8px, #12201f 16px);
}
.pv-plus {
  position: absolute; top: calc(19.5px * var(--s)); left: calc(19.5px * var(--s));
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(32px * var(--s)); line-height: 1; color: var(--teal); opacity: .85;
}
.pv-drop-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(19px * var(--s)); line-height: 1.08; color: var(--paper);
}
.pv-drop-hint { font-size: 9px; font-weight: 500; line-height: 1.5; letter-spacing: 1.62px; color: var(--dim); }
.pv-hidden-list { display: flex; flex-wrap: wrap; gap: calc(6px * var(--s)); margin-top: calc(10px * var(--s)); }
.pv-chip {
  padding: calc(5px * var(--s)) calc(9px * var(--s));
  font-size: 8.5px; font-weight: 600; letter-spacing: 1.1px; color: var(--paper);
  background: rgba(111, 227, 220, .14);
  border: 1px solid rgba(111, 227, 220, .35);
  clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 7px * var(--s)) 100%, 0 100%);
  cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-chip:hover { background: rgba(111, 227, 220, .3); }


/* ---------- footer ---------- */
.pv-foot {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: calc(21px * var(--s));
  height: calc(47px * var(--s)); padding: 0 calc(21px * var(--s));
  background: linear-gradient(110deg, #333a3f 0%, #101415 30%, #454c52 55%, #0e1113 82%, #272c30 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.pv-foot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.04) 0px, rgba(255,255,255,.04) 1px, rgba(0,0,0,.05) 1px, rgba(0,0,0,.05) 3px);
}
.pv-foot > * { position: relative; z-index: 1; }
.pv-foot-label { font-size: 9px; font-weight: 600; letter-spacing: 1.8px; color: var(--dim); white-space: nowrap; }
.pv-foot-value {
  font-size: 11px; font-weight: 600; letter-spacing: .6px; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(320px * var(--s));
}
.pv-foot-line { flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(111,227,220,.45), rgba(0,0,0,0)); }
.pv-status { display: flex; align-items: center; gap: calc(8px * var(--s)); }
.pv-status i {
  width: calc(7px * var(--s)); height: calc(7px * var(--s)); border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 10px rgba(111, 227, 220, .8);
}
.pv-status span { font-size: 9px; font-weight: 600; letter-spacing: 1.8px; color: var(--teal); white-space: nowrap; }

.pv-empty {
  grid-column: 1 / -1;
  padding: calc(40px * var(--s));
  font-family: var(--font-display); font-size: calc(16px * var(--s)); font-weight: 700;
  letter-spacing: .6px; color: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  .pv-tile, .pv-tile:hover { transition: none; transform: none; }
}


/* ------------------------------------------------------------
   SUPERSEDED 2026-08-17 — the three blocks that follow (DEEP UI,
   DEEP UI — COMPANY CARD OVERRIDE, DEEP UI — LLLL CARD) styled the
   plate-card Deep UI. DeepUI.js no longer emits any of these classes;
   the live Deep design is the Deep Dropdown UI pva- block at the bottom
   of this file. Kept, not deleted, on purpose: they are the fallback
   if the Deep Dropdown UI gets rolled back, and deleting them is the user's
   call, not an automatic one. Nothing here can collide with the new
   block — every Deep Dropdown UI rule is prefixed pva- and nested under
   .pva-root.
   ------------------------------------------------------------ */

/* ============================================================
   DEEP UI — added 2026-07-31, self-authored (not from the same
   pass that built the Root UI section above — that CSS shipped
   without these rules, so this section was written directly
   against Matrix P Deep.md / Pravarine Deep.md's actual class
   usage, reusing the same tokens/scale/chamfer language as Root
   UI above rather than inventing a new visual system). Needs a
   real look at it in Obsidian to confirm — this is a best-effort
   match, not a verified one.

   Shell classes (.pv-stage/.pv-frame/.pv-panel/.pv-rail/.pv-body/
   .pv-head/.pv-hairline/.pv-search/.pv-tools/.pv-seg/.pv-empty/
   .pv-foot/.pv-status) are reused as-is from Root UI above — the
   deep scripts build the same outer chassis on purpose. Only the
   classes below are genuinely new to Deep UI.
   ============================================================ */

/* ---- header extras ---- */
.pv-up {
  flex: 0 0 auto; cursor: pointer;
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--teal); white-space: nowrap;
  padding: calc(6px * var(--s)) calc(10px * var(--s));
  border: 1px solid rgba(111, 227, 220, .35);
  background: rgba(111, 227, 220, .08);
  clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 8px * var(--s)) 100%, 0 100%);
}
.pv-up:hover { background: rgba(111, 227, 220, .18); }
.pv-up.is-disabled { cursor: default; opacity: .35; color: var(--dim); border-color: rgba(255,255,255,.14); background: transparent; }
.pv-folder-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(15px * var(--s)); line-height: 1; letter-spacing: calc(1.2px * var(--s));
  color: var(--paper); white-space: nowrap;
}
.pv-crumb--deep span:not(.is-here) { cursor: pointer; }
.pv-crumb--deep span:not(.is-here):hover { color: var(--paper-2); }

/* ---- meta row (between head and cards) ---- */
.pv-meta { display: flex; align-items: center; gap: calc(14px * var(--s)); }
.pv-meta-label {
  flex: 0 0 auto; font-size: 9px; font-weight: 600; letter-spacing: 1.5px; color: var(--dim); white-space: nowrap;
}
.pv-meta-line { flex: 1 1 0; height: 1px; background: rgba(255, 255, 255, .1); }
.pv-sort {
  flex: 0 0 auto; cursor: pointer;
  font-size: 9px; font-weight: 600; letter-spacing: 1.4px; color: var(--dim-2); white-space: nowrap;
}
.pv-sort:hover { color: var(--teal); }

/* ---- card grid ---- */
.pv-cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: calc(24px * var(--s));
  /* Added 2026-08-12, alongside .pv-frame's fixed height: this is the
     one element that absorbs whatever space the fixed boundary leaves
     over, page to page — cards keep their own real size (nothing here
     stretches them), a short page just leaves visible slack inside
     this area instead of shrinking the whole frame around it. Content
     already stays within one page via ROWS_PER_PAGE, so overflow-y is
     a safety net, not the primary mechanism. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
}

/* one card = a small stack (back plate peeking out + front plate on top +
   a rotated barcode tag hanging off the top-right corner) + a label underneath */
.pv-card {
  display: flex; flex-direction: column; gap: calc(10px * var(--s));
  cursor: pointer; outline: none;
}
.pv-card:focus-visible .pv-plate-front { filter: brightness(1.15); }

.pv-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.24;
  transition: transform .16s ease;
}
.pv-card:hover .pv-stack { transform: translateY(calc(-2px * var(--s))); }

.pv-plate-back,
.pv-plate-front {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: calc(10px * var(--cs, 1));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.pv-plate-back {
  top: calc(10px * var(--cs, 1)); left: calc(10px * var(--cs, 1));
  background: linear-gradient(200deg, #262c30 0%, #101416 60%, #0a0d0e 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: calc(11px * var(--cs, 1));
  display: flex; flex-direction: column; justify-content: space-between;
}
.pv-back-index {
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(13px * var(--cs, 1)); color: var(--dim-2);
}
.pv-back-dots { position: absolute; top: calc(11px * var(--cs, 1)); right: calc(11px * var(--cs, 1)); display: flex; gap: calc(4px * var(--cs, 1)); }
.pv-back-dots i { width: calc(6px * var(--cs, 1)); height: calc(6px * var(--cs, 1)); border-radius: 50%; background: rgba(255, 255, 255, .14); display: block; }
.pv-back-dots i.is-lit { background: var(--teal); box-shadow: 0 0 8px rgba(111, 227, 220, .8); }
.pv-back-dashes { display: flex; gap: calc(4px * var(--cs, 1)); }
.pv-back-dashes i { width: calc(12px * var(--cs, 1)); height: 2px; background: rgba(255, 255, 255, .16); display: block; }
.pv-back-tag {
  font-size: calc(8px * var(--cs, 1)); font-weight: 600; letter-spacing: 1.2px; color: var(--dim);
}
.pv-back-streak {
  position: absolute; left: -20%; right: -20%; bottom: 22%; height: 2px;
  background: linear-gradient(90deg, rgba(111,227,220,0), rgba(111,227,220,.4), rgba(111,227,220,0));
  transform: rotate(-8deg);
}

.pv-plate-front {
  top: 0; left: 0;
  background: linear-gradient(160deg, #3aa8a3 0%, #2b8b88 50%, #1d6b69 100%);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: calc(13px * var(--cs, 1));
  display: flex; flex-direction: column; gap: calc(8px * var(--cs, 1));
}
.pv-front-swatch {
  width: calc(16px * var(--cs, 1)); height: calc(16px * var(--cs, 1)); border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.pv-front-initials {
  font-family: var(--font-display); font-weight: 800;
  font-size: calc(28px * var(--cs, 1)); line-height: 1; letter-spacing: -.02em;
  color: var(--paper);
  text-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.pv-front-dashes { display: flex; gap: calc(4px * var(--cs, 1)); margin-top: auto; }
.pv-front-dashes i { width: calc(10px * var(--cs, 1)); height: 2px; background: rgba(255, 255, 255, .4); display: block; }
.pv-front-kind {
  font-size: calc(8.5px * var(--cs, 1)); font-weight: 700; letter-spacing: 1.3px; color: rgba(255,255,255,.85);
}

.pv-tag {
  position: absolute; top: calc(-6px * var(--cs, 1)); right: calc(-8px * var(--cs, 1));
  z-index: 2; transform: rotate(9deg);
  display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--cs, 1));
  padding: calc(6px * var(--cs, 1)) calc(8px * var(--cs, 1));
  background: linear-gradient(160deg, #f4f8f7, #dae4e3);
  border-radius: calc(4px * var(--cs, 1));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.pv-tag-bars { display: flex; align-items: stretch; gap: 1px; width: calc(30px * var(--cs, 1)); height: calc(10px * var(--cs, 1)); }
.pv-tag-bars i { background: var(--ink-2); display: block; }
.pv-tag-code { font-size: calc(6.5px * var(--cs, 1)); font-weight: 700; letter-spacing: .6px; color: var(--ink-2); white-space: nowrap; }

.pv-card.is-selected .pv-plate-front { outline: 2px solid var(--teal); outline-offset: 2px; }

.pv-card-label { display: flex; flex-direction: column; gap: calc(2px * var(--s)); padding: 0 calc(2px * var(--s)); }
.pv-card-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(12.5px * var(--s)); line-height: 1.2; color: var(--paper);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-card-sub { font-size: 9px; font-weight: 500; letter-spacing: .8px; color: var(--dim); }

/* ---- pager (deep footer) ---- */
.pv-pager { display: flex; align-items: center; gap: calc(10px * var(--s)); }
.pv-page-btn {
  cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; color: var(--dim-2);
  padding: calc(4px * var(--s)) calc(8px * var(--s));
}
.pv-page-btn:hover { color: var(--teal); }
.pv-page-btn.is-disabled { cursor: default; opacity: .3; }
.pv-page-btn.is-disabled:hover { color: var(--dim-2); }
.pv-page-count { font-size: 9px; font-weight: 600; letter-spacing: 1px; color: var(--dim); white-space: nowrap; }


/* ============================================================
   DEEP UI — COMPANY CARD OVERRIDE — added 2026-08-09.
   Scoped to `.deep-ui-company` (Company UI.md's own cssclass) only —
   Pravarine Deep / Matrix P Deep keep the DEEP UI card above, untouched.
   Ported verbatim from pravarine-deep-design-system.md /
   pravarine-deep-standalone.html — a byte-verified extraction of a
   Datacore preview export (0 pixel diff against the original bundle
   across 5 viewports, per that doc's own §1). Colors, clip-paths, type
   scale and spacing are copied exactly, not approximated or guessed.
   Reuses the class names verbatim (.pv-card/.pv-plate-back/.pv-plate-front
   collide on purpose with the block above — the ancestor scope below wins
   on specificity, so only notes carrying `deep-ui-company` ever see this).
   Only the card is touched — the shell chassis (.pv-stage/.pv-frame/
   .pv-panel/.pv-head/.pv-search/.pv-tools/.pv-foot/.pv-pager/.pv-cards
   grid) intentionally still comes from the shared section above.
   Caveat, flagged not fixed: sizes use clamp()+vw exactly as extracted
   from a standalone page. vw measures the whole app window, not this
   note's own pane, unlike the --s/--cs system above — in a narrow side
   pane the card may run larger than a pane-relative scale would give.
   Ask before this gets containerized to fix that.
   ============================================================ */

.markdown-preview-view.deep-ui-company .pv-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 11px; cursor: pointer; padding: 6px 4px 10px;
  transition: transform .2s ease;
}
.markdown-preview-view.deep-ui-company .pv-card:hover { transform: translateY(-4px); }

.markdown-preview-view.deep-ui-company .pv-plates {
  position: relative; width: 100%; max-width: 190px; aspect-ratio: 4 / 3.1;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6));
}

/* ---- back plate (green) ---- */
.markdown-preview-view.deep-ui-company .pv-plate-back {
  position: absolute; left: 0; right: 0; bottom: 0; top: 26%;
  overflow: hidden;
  background: linear-gradient(160deg, #3fd8a8 0%, #18b47e 42%, #0c6f52 100%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .28), 0 0 26px rgba(40, 220, 150, .28);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 20px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}
.markdown-preview-view.deep-ui-company .pv-plate-back__hatch {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .11) 0 2px, transparent 2px 10px);
  opacity: .6;
}
.markdown-preview-view.deep-ui-company .pv-plate-back__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 3px);
}
.markdown-preview-view.deep-ui-company .pv-plate-back__seq {
  position: absolute; left: 9px; bottom: 7px;
  font: 800 clamp(20px, 2.2vw, 32px) / 1 'Unbounded', sans-serif;
  letter-spacing: -.03em; color: rgba(6, 58, 42, .42);
}
.markdown-preview-view.deep-ui-company .pv-leds {
  position: absolute; right: 12px; top: 9px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.markdown-preview-view.deep-ui-company .pv-led--on {
  width: 7px; height: 7px; border-radius: 50%;
  background: #eafffd; box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}
.markdown-preview-view.deep-ui-company .pv-led--off {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(6, 58, 42, .5);
}
.markdown-preview-view.deep-ui-company .pv-marks {
  position: absolute; left: 11px; top: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.markdown-preview-view.deep-ui-company .pv-mark--a { width: 14px; height: 2px; background: rgba(6, 58, 42, .55); }
.markdown-preview-view.deep-ui-company .pv-mark--b { width: 9px; height: 2px; background: rgba(6, 58, 42, .55); }
.markdown-preview-view.deep-ui-company .pv-mark--c { width: 12px; height: 2px; background: rgba(6, 58, 42, .35); }
.markdown-preview-view.deep-ui-company .pv-plate-back__kind {
  position: absolute; right: 10px; bottom: 10px;
  font: 600 7px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em;
  color: rgba(6, 58, 42, .7);
}
.markdown-preview-view.deep-ui-company .pv-plate-back__hairline {
  position: absolute; left: 32%; right: 24%; bottom: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 255, 253, .85), transparent);
}

/* ---- front plate (paper) ---- */
.markdown-preview-view.deep-ui-company .pv-plate-front {
  position: absolute; left: 6%; right: 2%; top: 0; height: 47%;
  background: linear-gradient(165deg, #ffffff 0%, #e7edec 52%, #c3cfce 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 16px, 100% 100%, 20px 100%, 0 calc(100% - 18px));
}
.markdown-preview-view.deep-ui-company .pv-plate-front__hatch {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 6px);
}
.markdown-preview-view.deep-ui-company .pv-plate-front__checker {
  position: absolute; left: 9px; top: 8px;
  width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px);
  background: conic-gradient(from 0deg, #12201d 0 25%, #ffffff 0 50%, #12201d 0 75%, #ffffff 0);
  background-size: 33.4% 33.4%; opacity: .9;
}
.markdown-preview-view.deep-ui-company .pv-plate-front__initials {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 800 clamp(13px, 1.3vw, 19px) / 1 'Unbounded', sans-serif;
  letter-spacing: .02em; color: #0d201f;
}
.markdown-preview-view.deep-ui-company .pv-plate-front__marks {
  position: absolute; right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 2.5px; align-items: flex-end;
}
.markdown-preview-view.deep-ui-company .pv-fmark--a { width: 16px; height: 2px; background: #16403f; }
.markdown-preview-view.deep-ui-company .pv-fmark--b { width: 11px; height: 2px; background: #16403f; }
.markdown-preview-view.deep-ui-company .pv-fmark--c { width: 14px; height: 2px; background: rgba(22, 64, 63, .35); }
.markdown-preview-view.deep-ui-company .pv-plate-front__rare {
  position: absolute; right: 9px; bottom: 6px;
  font: 600 6.5px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em;
  color: rgba(13, 32, 31, .55);
}

/* ---- barcode sticker ---- */
.markdown-preview-view.deep-ui-company .pv-sticker {
  position: absolute; left: -3%; bottom: 11%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 5px 3px;
  background: linear-gradient(165deg, #f4f8f7, #c9d4d3);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
}
.markdown-preview-view.deep-ui-company .pv-sticker__bars {
  display: flex; align-items: flex-end; gap: 1.5px; height: 13px;
}
.markdown-preview-view.deep-ui-company .pv-bar--a { width: 1.5px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-company .pv-bar--b { width: 3px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-company .pv-bar--c { width: 1px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-company .pv-bar--d { width: 2px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-company .pv-bar--e { width: 3.5px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-company .pv-sticker__code {
  font: 600 5.5px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; color: #12201d;
}

/* ---- label under the plates ---- */
.markdown-preview-view.deep-ui-company .pv-card__meta {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; min-width: 0;
}
.markdown-preview-view.deep-ui-company .pv-card__name {
  max-width: 100%;
  font: 700 clamp(10px, 0.92vw, 12.5px) / 1.25 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .02em; color: #eaf4f4; text-align: center;
  text-wrap: pretty; overflow-wrap: break-word;
}
.markdown-preview-view.deep-ui-company .pv-card__sub {
  font: 500 8px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em;
  color: #7f9291; white-space: nowrap;
}


/* ============================================================
   DEEP UI — LLLL CARD — added 2026-08-09, scoped to `.deep-ui-llll`.
   First use of Deep UI — Card Template.md §4 as an actual template:
   this block is the Company card CSS above, copy-pasted with
   `deep-ui-company` find-replaced for `deep-ui-llll` — nothing else
   changed, per the template's own §1 process.
   ============================================================ */

.markdown-preview-view.deep-ui-llll .pv-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 11px; cursor: pointer; padding: 6px 4px 10px;
  transition: transform .2s ease;
}
.markdown-preview-view.deep-ui-llll .pv-card:hover { transform: translateY(-4px); }

.markdown-preview-view.deep-ui-llll .pv-plates {
  position: relative; width: 100%; max-width: 190px; aspect-ratio: 4 / 3.1;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .6));
}

.markdown-preview-view.deep-ui-llll .pv-plate-back {
  position: absolute; left: 0; right: 0; bottom: 0; top: 26%;
  overflow: hidden;
  background: linear-gradient(160deg, #3fd8a8 0%, #18b47e 42%, #0c6f52 100%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .28), 0 0 26px rgba(40, 220, 150, .28);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 20px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
}
.markdown-preview-view.deep-ui-llll .pv-plate-back__hatch {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .11) 0 2px, transparent 2px 10px);
  opacity: .6;
}
.markdown-preview-view.deep-ui-llll .pv-plate-back__scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 3px);
}
.markdown-preview-view.deep-ui-llll .pv-plate-back__seq {
  position: absolute; left: 9px; bottom: 7px;
  font: 800 clamp(20px, 2.2vw, 32px) / 1 'Unbounded', sans-serif;
  letter-spacing: -.03em; color: rgba(6, 58, 42, .42);
}
.markdown-preview-view.deep-ui-llll .pv-leds {
  position: absolute; right: 12px; top: 9px;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.markdown-preview-view.deep-ui-llll .pv-led--on {
  width: 7px; height: 7px; border-radius: 50%;
  background: #eafffd; box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}
.markdown-preview-view.deep-ui-llll .pv-led--off {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(6, 58, 42, .5);
}
.markdown-preview-view.deep-ui-llll .pv-marks {
  position: absolute; left: 11px; top: 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.markdown-preview-view.deep-ui-llll .pv-mark--a { width: 14px; height: 2px; background: rgba(6, 58, 42, .55); }
.markdown-preview-view.deep-ui-llll .pv-mark--b { width: 9px; height: 2px; background: rgba(6, 58, 42, .55); }
.markdown-preview-view.deep-ui-llll .pv-mark--c { width: 12px; height: 2px; background: rgba(6, 58, 42, .35); }
.markdown-preview-view.deep-ui-llll .pv-plate-back__kind {
  position: absolute; right: 10px; bottom: 10px;
  font: 600 7px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em;
  color: rgba(6, 58, 42, .7);
}
.markdown-preview-view.deep-ui-llll .pv-plate-back__hairline {
  position: absolute; left: 32%; right: 24%; bottom: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(234, 255, 253, .85), transparent);
}

.markdown-preview-view.deep-ui-llll .pv-plate-front {
  position: absolute; left: 6%; right: 2%; top: 0; height: 47%;
  background: linear-gradient(165deg, #ffffff 0%, #e7edec 52%, #c3cfce 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 16px, 100% 100%, 20px 100%, 0 calc(100% - 18px));
}
.markdown-preview-view.deep-ui-llll .pv-plate-front__hatch {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(105deg, rgba(0, 0, 0, .045) 0 1px, transparent 1px 6px);
}
.markdown-preview-view.deep-ui-llll .pv-plate-front__checker {
  position: absolute; left: 9px; top: 8px;
  width: clamp(22px, 2vw, 30px); height: clamp(22px, 2vw, 30px);
  background: conic-gradient(from 0deg, #12201d 0 25%, #ffffff 0 50%, #12201d 0 75%, #ffffff 0);
  background-size: 33.4% 33.4%; opacity: .9;
}
.markdown-preview-view.deep-ui-llll .pv-plate-front__initials {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 800 clamp(13px, 1.3vw, 19px) / 1 'Unbounded', sans-serif;
  letter-spacing: .02em; color: #0d201f;
}
.markdown-preview-view.deep-ui-llll .pv-plate-front__marks {
  position: absolute; right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 2.5px; align-items: flex-end;
}
.markdown-preview-view.deep-ui-llll .pv-fmark--a { width: 16px; height: 2px; background: #16403f; }
.markdown-preview-view.deep-ui-llll .pv-fmark--b { width: 11px; height: 2px; background: #16403f; }
.markdown-preview-view.deep-ui-llll .pv-fmark--c { width: 14px; height: 2px; background: rgba(22, 64, 63, .35); }
.markdown-preview-view.deep-ui-llll .pv-plate-front__rare {
  position: absolute; right: 9px; bottom: 6px;
  font: 600 6.5px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em;
  color: rgba(13, 32, 31, .55);
}

.markdown-preview-view.deep-ui-llll .pv-sticker {
  position: absolute; left: -3%; bottom: 11%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 5px 3px;
  background: linear-gradient(165deg, #f4f8f7, #c9d4d3);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
}
.markdown-preview-view.deep-ui-llll .pv-sticker__bars {
  display: flex; align-items: flex-end; gap: 1.5px; height: 13px;
}
.markdown-preview-view.deep-ui-llll .pv-bar--a { width: 1.5px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-llll .pv-bar--b { width: 3px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-llll .pv-bar--c { width: 1px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-llll .pv-bar--d { width: 2px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-llll .pv-bar--e { width: 3.5px; height: 100%; background: #12201d; }
.markdown-preview-view.deep-ui-llll .pv-sticker__code {
  font: 600 5.5px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .14em; color: #12201d;
}

.markdown-preview-view.deep-ui-llll .pv-card__meta {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; min-width: 0;
}
.markdown-preview-view.deep-ui-llll .pv-card__name {
  max-width: 100%;
  font: 700 clamp(10px, 0.92vw, 12.5px) / 1.25 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .02em; color: #eaf4f4; text-align: center;
  text-wrap: pretty; overflow-wrap: break-word;
}
.markdown-preview-view.deep-ui-llll .pv-card__sub {
  font: 500 8px / 1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em;
  color: #7f9291; white-space: nowrap;
}


/* ============================================================
   ROOT UI — REBUILD, 2026-08-11 (replaces the 2026-08-11 first pass
   outright; that one was built against a stale export and did not
   match the reference).

   SOURCE: pravarine-root-design-system.md + pravarine-root-standalone.html
   — extracted from Pravarine_Vault__standalone___3_.html
   (md5 75b5f16e238cefc071cc658bdd6b2c69), base64+gunzip out of the
   Datacore __bundler blobs, not read off a screenshot. Verified in
   the source doc at 244/244 elements, max geometry delta 0.0000px,
   0 computed-style diffs across 27 properties, 0 of 1,600,000 pixels
   changed. Every literal below is verbatim from that extraction.

   WHY THE FIRST PASS WAS WRONG (all five now fixed):
     1. hero glyph is a real <svg viewBox="0 0 120 200">, not rotated
        spans — the old build had no glyph at all
     2. the index panel + code block are ONE unit inside
        .pvr-hero__label-wrap, positioned in % / clamp(); the old
        build had .pv-idx and .pv-barcode as two unrelated absolutes
     3. hero progress bar is 38% wide, not 56%
     4. folder-face gradient darkened (#0f2d24→#174539, #27a87b→
        #249a71, #0b241c→#13332a) and both hatch layers dropped
        opacity; hero gained a diagonal sheen layer
     5. the whole frame — bezel, notched screen, ambient grid /
        scanlines / beam, footer plate, HUD overlay — was skipped
        entirely in favour of Deep UI's shared shell. Root UI now
        owns its own frame (RootUI.js builds it), which is the single
        biggest reason the old build read as a different design.

   SCOPE: prefix is pvr- (Deep UI keeps pv-), so the two stylesheets
   share this file with zero collisions. Everything is additionally
   nested under .pvr-root — the class RootUI.js puts on its own host
   element — so nothing here can reach Deep UI even by accident.
   Deep UI is untouched by this change.

   DELIBERATE DEVIATIONS FROM THE SOURCE, none silent:
     - keyframes renamed scan→pvr-scan, pulse→pvr-pulse. Bare `scan`
       and `pulse` are far too generic to drop into a vault-wide
       Obsidian snippet.
     - .pvr-bezel height: source is min(calc(100vh - 60px),960px).
       100vh is the whole Obsidian window, not this note's pane, so
       the offset is widened to 150px to clear the tab + note header.
       Section 9.5 of the source doc calls this out as expected.
     - a content-box containment block (below). The source relies on
       the CSS default box-sizing and opts into border-box on a few
       elements; Obsidian sets border-box globally, which shifts the
       layout. Section 9.1 of the source doc calls for exactly this.
     - .pvr-empty, .pvr-hidden-list, .pvr-chip, .is-over, .is-selected
       are additions, not in the source — they carry this vault's own
       hidden-folders feature and empty/selected states.
     - :hover rules ARE additions. The source authors them as
       style-hover="..." and no file in its runtime implements that
       attribute, so they do nothing in the original (source doc 2).
       Values are the ones the source doc proposes.

   STILL FLAGGED, NOT FIXED: every size is clamp()+vw exactly as
   extracted. vw measures the Obsidian window, not this note's pane,
   so in a narrow side pane tiles run larger than a pane-relative
   scale would give. Kept verbatim on purpose — same caveat already
   standing on the Deep UI Company card override above.
   ============================================================ */

@keyframes pvr-scan  { 0% { transform:translateY(-120%); } 100% { transform:translateY(2400%); } }
@keyframes pvr-pulse { 0%, 100% { opacity:.35; } 50% { opacity:1; } }

/* ---------- tokens (26, verbatim from source doc §3) ---------- */
.pvr-root {
  --pvr-accent:        #3ee89f;
  --pvr-accent-deep:   #127a56;
  --pvr-accent-dark:   #1a6f52;
  --pvr-paper:         #eafff4;
  --pvr-paper-warm:    #d9ece3;
  --pvr-field:         #eefff6;
  --pvr-text-idle:     #9db1a7;
  --pvr-text-meta:     #7d938a;
  --pvr-on-light:      #04140d;
  --pvr-hero-1:        #2fd08f;
  --pvr-hero-2:        #16a173;
  --pvr-hero-3:        #0c6b4c;
  --pvr-folder-1:      #1f8f68;
  --pvr-folder-2:      #174539;
  --pvr-folder-3:      #249a71;
  --pvr-folder-4:      #13332a;
  --pvr-file-1:        #f2f7f4;
  --pvr-file-2:        #dbe6e0;
  --pvr-file-3:        #b6c5bd;
  --pvr-file-ink:      #0b3527;
  --pvr-file-ink-deep: #08241a;
  --pvr-file-meta:     #4a655a;
  --pvr-fill:          rgba(255,255,255,.05);
  --pvr-hairline:      rgba(255,255,255,.13);
  --pvr-emboss:        rgba(255,255,255,.1);
  --pvr-glow:          rgba(62,232,159,.5);
}

/* ---------- containment: undo Obsidian's global border-box and its
   input/heading resets, so the source's own box model survives ---------- */
.pvr-root, .pvr-root *, .pvr-root *::before, .pvr-root *::after { box-sizing:content-box; }
.pvr-root { width:100%; min-width:0; }
.pvr-root input { margin:0; border-radius:0; }
.pvr-root ::-webkit-scrollbar { width:9px; height:9px; }
.pvr-root ::-webkit-scrollbar-track { background:rgba(255,255,255,.03); }
.pvr-root ::-webkit-scrollbar-thumb { background:rgba(62,232,159,.35); }
.pvr-root ::-webkit-scrollbar-thumb:hover { background:rgba(62,232,159,.6); }

/* ---------- frame / screen (source doc §7.1) ---------- */
.pvr-root .pvr-stage { min-width:0; padding:clamp(12px,1.8vw,30px); box-sizing:border-box; display:flex; justify-content:center; background:radial-gradient(1200px 700px at 60% -10%, #0c1f18 0%, #06100c 55%, #040806 100%); }
.pvr-root .pvr-bezel { width:100%; max-width:1680px; height:min(calc(100vh - 150px),960px); min-height:min(640px,calc(100vh - 150px)); position:relative; padding:1.5px; box-sizing:border-box; background:linear-gradient(160deg,#3ee89f 0%,#1a6f52 42%,#3ee89f 70%,#0d3d2d 100%); clip-path:polygon(0 34px,34px 0,34% 0,36% 12px,64% 12px,66% 0,calc(100% - 34px) 0,100% 34px,100% calc(100% - 34px),calc(100% - 34px) 100%,66% 100%,64% calc(100% - 12px),36% calc(100% - 12px),34% 100%,34px 100%,0 calc(100% - 34px)); }
.pvr-root .pvr-screen { position:relative; height:100%; box-sizing:border-box; overflow:hidden; background:linear-gradient(200deg,#0d1614 0%,#070d0b 45%,#101a17 70%,#050908 100%); clip-path:polygon(0 33px,33px 0,34% 0,36% 11px,64% 11px,66% 0,calc(100% - 33px) 0,100% 33px,100% calc(100% - 33px),calc(100% - 33px) 100%,66% 100%,64% calc(100% - 11px),36% calc(100% - 11px),34% 100%,33px 100%,0 calc(100% - 33px)); }

/* ---------- ambient overlays + content column (§7.2) ---------- */
.pvr-root .pvr-fx-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(62,232,159,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(62,232,159,.07) 1px,transparent 1px); background-size:clamp(48px,4.4vw,74px) clamp(48px,4.4vw,74px); background-position:-1px -1px; }
.pvr-root .pvr-fx-scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.05) 1px 3px); }
.pvr-root .pvr-fx-beam { position:absolute; left:0; right:0; top:0; height:70px; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(62,232,159,.05),transparent); animation:pvr-scan 11s linear infinite; }
.pvr-root .pvr-content { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:clamp(26px,2.4vw,38px) clamp(24px,2.4vw,40px) clamp(20px,2vw,30px); box-sizing:border-box; gap:clamp(12px,1.3vw,20px); }

/* ---------- header (§7.3) ---------- */
.pvr-root .pvr-header { flex:none; display:flex; align-items:center; gap:clamp(10px,1.4vw,20px); flex-wrap:wrap; }
.pvr-root .pvr-brand { display:flex; align-items:center; gap:10px; flex:none; }
.pvr-root .pvr-brand__mark { width:clamp(28px,2.4vw,34px); height:clamp(28px,2.4vw,34px); flex:none; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#ffffff,#d9ece3); color:#04140d; font:800 14px/1 'Unbounded',sans-serif; clip-path:polygon(0 0,100% 0,100% 62%,62% 100%,0 100%); }
.pvr-root .pvr-brand__word { font:800 clamp(12px,1.05vw,15px)/1 'Unbounded',sans-serif; letter-spacing:.16em; color:#eafff4; text-shadow:0 0 14px rgba(62,232,159,.5); white-space:nowrap; }
.pvr-root .pvr-crumbs { display:flex; align-items:center; gap:8px; flex:none; font:600 9.5px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:#7d938a; }
.pvr-root .pvr-crumb { display:flex; align-items:center; gap:8px; cursor:pointer; color:#7d938a; }
.pvr-root .pvr-crumb--here { color:#eafff4; }
.pvr-root .pvr-header__rule { flex:1; min-width:100px; height:1px; background:linear-gradient(90deg,rgba(62,232,159,.5),transparent); }
.pvr-root .pvr-search { flex:0 1 300px; min-width:170px; display:flex; align-items:center; gap:10px; padding:clamp(7px,0.7vw,10px) clamp(12px,1.1vw,16px); box-sizing:border-box; background:linear-gradient(120deg,#1d2723 0%,#0d1412 42%,#26332d 100%); border:1px solid rgba(255,255,255,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); clip-path:polygon(0 40%,14px 0,100% 0,100% 60%,calc(100% - 14px) 100%,0 100%); }
.pvr-root .pvr-search__icon { flex:none; font:400 15px/1 'Plus Jakarta Sans',sans-serif; color:#3ee89f; }
.pvr-root .pvr-search__input { flex:1; min-width:0; border:none; background:transparent; outline:none; box-shadow:none; height:auto; color:#eefff6; font:500 clamp(11px,1vw,13px)/1.3 'Plus Jakarta Sans',sans-serif; }
.pvr-root .pvr-search__input::placeholder { color:rgba(255,255,255,.38); }
.pvr-root .pvr-search__kbd { flex:none; font:600 8.5px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:rgba(255,255,255,.3); }
.pvr-root .pvr-viewtoggle { display:flex; align-items:center; gap:6px; flex:none; }
.pvr-root .pvr-btn-view--on { display:flex; align-items:center; height:clamp(28px,2.3vw,32px); padding:0 clamp(10px,1vw,14px); background:linear-gradient(160deg,#3ee89f,#127a56); color:#04140d; font:700 8.5px/1 'Unbounded',sans-serif; letter-spacing:.12em; cursor:pointer; clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 11px) 100%,0 100%); }
.pvr-root .pvr-btn-view--off { display:flex; align-items:center; height:clamp(28px,2.3vw,32px); padding:0 clamp(10px,1vw,14px); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); color:#9db1a7; font:700 8.5px/1 'Unbounded',sans-serif; letter-spacing:.12em; cursor:pointer; clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 11px) 100%,0 100%); }

/* ---------- scroll area + grid (§7.4) ---------- */
.pvr-root .pvr-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:2px clamp(6px,0.8vw,14px) 8px 2px; margin-right:-6px; }
.pvr-root .pvr-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.5vw,24px); align-items:stretch; }

/* ---------- hero tile / shell (§7.5) ---------- */
.pvr-root .pvr-hero { grid-column:span 2; position:relative; cursor:pointer; padding:1.5px; box-sizing:border-box; background:linear-gradient(200deg,rgba(234,255,244,.5),rgba(0,0,0,.55)); box-shadow:0 18px 44px rgba(0,0,0,.55); clip-path:polygon(0 26px,26px 0,calc(100% - 78px) 0,calc(100% - 60px) 17px,100% 17px,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); transition:transform .25s ease,box-shadow .25s ease; }
.pvr-root .pvr-hero__face { position:relative; height:100%; box-sizing:border-box; overflow:hidden; padding:clamp(18px,1.6vw,28px) clamp(18px,1.7vw,30px); display:flex; flex-direction:column; justify-content:space-between; gap:clamp(14px,1.4vw,22px); min-height:clamp(200px,18vw,260px); background:linear-gradient(150deg,#2fd08f 0%,#16a173 45%,#0c6b4c 100%); clip-path:polygon(0 26px,26px 0,calc(100% - 78px) 0,calc(100% - 60px) 17px,100% 17px,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%); }
.pvr-root .pvr-hero__scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.05) 1px 3px); }
.pvr-root .pvr-hero__hatch { position:absolute; inset:0; pointer-events:none; opacity:.24; background:repeating-linear-gradient(115deg,rgba(255,255,255,.1) 0 2px,transparent 2px 9px); }
.pvr-root .pvr-hero__sheen { position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg,transparent 26%,rgba(255,255,255,.16) 40%,rgba(255,255,255,.05) 50%,transparent 62%); }

/* ---------- hero tile / index label + glyph (§7.6) ---------- */
.pvr-root .pvr-hero__label-wrap { position:absolute; right:0; top:-1px; width:clamp(150px,18.4vw,300px); height:clamp(84px,10vw,162px); pointer-events:none; }
.pvr-root .pvr-hero__glyph-svg { position:absolute; right:100%; top:0; width:clamp(76px,9.3vw,152px); height:clamp(126px,15.5vw,253px); overflow:visible; }
.pvr-root .pvr-hero__label { position:absolute; inset:0; background:#eafff4; overflow:hidden; clip-path:polygon(clamp(18px,2.2vw,36px) 0,100% 0,100% 100%,0 100%,0 clamp(18px,2.2vw,36px)); }
.pvr-root .pvr-hero__label-scan { position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(4,20,13,.05) 0 1px,transparent 1px 3px); }
.pvr-root .pvr-hero__label-bars { position:absolute; left:17%; top:64%; display:flex; gap:clamp(3px,0.3vw,5px); align-items:flex-end; }
.pvr-root .pvr-hlbar--a { width:clamp(2px,0.24vw,4px); height:clamp(7px,0.75vw,12px); background:#0c6b4c; }
.pvr-root .pvr-hlbar--b { width:clamp(2px,0.24vw,4px); height:clamp(11px,1.15vw,19px); background:#0c6b4c; }
.pvr-root .pvr-hlbar--c { width:clamp(2px,0.24vw,4px); height:clamp(5px,0.5vw,8px); background:rgba(12,107,76,.45); }
.pvr-root .pvr-hero__label-idx { position:absolute; left:22%; top:11%; font:600 clamp(7px,0.62vw,11px)/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.24em; color:rgba(4,20,13,.55); }

/* ---------- hero tile / code column (§7.7) ---------- */
.pvr-root .pvr-hero__code-col { position:absolute; right:9%; top:calc(100% - clamp(6px,0.75vw,12px)); display:flex; flex-direction:column; align-items:flex-end; gap:clamp(5px,0.55vw,9px); z-index:3; }
.pvr-root .pvr-hero__bars { display:flex; align-items:center; gap:clamp(1.5px,0.16vw,3px); height:clamp(20px,2.05vw,34px); }
.pvr-root .pvr-hbar--1 { width:clamp(1.5px,0.16vw,3px); height:100%; background:#04140d; }
.pvr-root .pvr-hbar--2 { width:clamp(3px,0.32vw,5px); height:100%; background:#04140d; }
.pvr-root .pvr-hbar--3 { width:clamp(1px,0.09vw,1.6px); height:100%; background:#04140d; }
.pvr-root .pvr-hbar--4 { width:clamp(2.2px,0.24vw,4px); height:100%; background:#04140d; }
.pvr-root .pvr-hbar--5 { width:clamp(3.6px,0.4vw,6.5px); height:100%; background:#04140d; }
.pvr-root .pvr-hero__code { font:600 clamp(7px,0.65vw,11px)/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.22em; color:rgba(4,20,13,.8); }
/* POHAE shortcut, added 2026-08-18. Same type style as .pvr-hero__code (it
   carries both classes), recoloured to the label panel's own white and moved
   off the right edge into the green band. The top offset reproduces where the
   P_BASE text lands inside .pvr-hero__code-col — that column starts at
   calc(100% - clamp(6px,0.75vw,12px)), then the barcode (clamp(20px,2.05vw,34px))
   and the column gap (clamp(5px,0.55vw,9px)) push the text down — so the two
   labels share a baseline at every viewport width instead of only at one.
   left:0 anchors it to the label panel's own left edge — a real landmark that
   tracks the panel at every width, rather than a percentage that drifts. */
.pvr-root .pvr-hero__code--pohae {
  position:absolute;
  left:0;
  top:calc(100% - clamp(6px,0.75vw,12px) + clamp(20px,2.05vw,34px) + clamp(5px,0.55vw,9px));
  color:#eafff4;
  white-space:nowrap;
  z-index:3;
}

/* ---------- hero tile / content (§7.8) ---------- */
.pvr-root .pvr-hero__top { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.pvr-root .pvr-hero__topleft { display:flex; flex-direction:column; gap:9px; min-width:0; }
.pvr-root .pvr-hero__kicker { font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.24em; color:rgba(4,20,13,.72); }
.pvr-root .pvr-hero__action { display:inline-flex; align-items:center; gap:7px; font:600 8.5px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:rgba(4,20,13,.8); border:1px solid rgba(4,20,13,.35); padding:5px 9px; align-self:flex-start; white-space:nowrap; }
.pvr-root .pvr-hero__count { flex:none; font:800 clamp(46px,5.6vw,92px)/0.8 'Unbounded',sans-serif; letter-spacing:-.05em; color:#0c6b4c; margin-top:10px; }

/* ============================================================
   RECENT drawer, added 2026-08-18. The hero count is the handle:
   press it and the hero box drops open.

   Surface language: this is a DRAWER inside the hero, so it reads as the
   screen plate (dark, scanlined) rather than as another card face — the
   light green face stays the lid. Darks are kept near-neutral on purpose,
   matching the direction the notes were taken this same day; the only
   colour in here is the accent, which is what makes the interactive parts
   read as interactive.

   Rhythm is inherited, not invented: the same clamp() padding as
   .pvr-hero__face, the label/rule/value head from .pvr-footer, and the
   chip shape from .pvr-chip. Nothing new is introduced that the rest of
   Root UI does not already say.
   ============================================================ */
/* The hero was a plain block whose only child was the face, and the face is
   `height:100%`. Once the drawer became a second child, the grid gave the hero
   a DEFINITE height (face + drawer) — so `height:100%` resolved against it and
   the face ate the drawer's space, pushing it out under the clip-path. Making
   the hero a flex column restores the intent: the face takes the leftover
   space, the drawer takes what it needs. Behaviour when closed is unchanged. */
.pvr-root .pvr-hero { display:flex; flex-direction:column; }
/* Cards keep their own height. Without this the card beside an expanded hero
   stretches to match it — the exact thing that looked wrong. The hero opts back
   in to stretch so it fills the rows it claims, leaving no dead gap. */
.pvr-root .pvr-grid { align-items:start; }
.pvr-root .pvr-hero { align-self:stretch; }
.pvr-root .pvr-hero__face { flex:1 1 auto; height:auto; }
.pvr-root .pvr-hero__drop { flex:none; }

.pvr-root .pvr-hero__count { cursor:pointer; transition:color .2s ease, text-shadow .2s ease; }
.pvr-root .pvr-hero__count:hover { color:#04140d; text-shadow:0 0 22px rgba(4,20,13,.35); }
.pvr-root .pvr-hero.is-open .pvr-hero__count { color:#04140d; }
/* the tile's hover lift is disabled while open — a 4px jump under a list
   you are trying to click is just noise. */
.pvr-root .pvr-hero.is-open:hover { transform:none; }
/* While open the DRAWER absorbs the slack in the claimed block, not the face —
   otherwise the face stretches and the extra height is spent on empty green
   instead of on more recent rows. */
.pvr-root .pvr-hero.is-open > .pvr-hero__face { flex:0 0 auto; }
.pvr-root .pvr-hero.is-open > .pvr-hero__drop { flex:1 1 auto; }

.pvr-root .pvr-hero__drop {
  position:relative; overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .44s cubic-bezier(.2,.8,.25,1), opacity .3s ease;
}
.pvr-root .pvr-hero.is-open .pvr-hero__drop { max-height:clamp(300px,36vw,520px); opacity:1; }

.pvr-root .pvr-hero__drop-inner {
  position:relative; overflow:hidden;
  max-height:100%; overflow-y:auto;
  padding:clamp(15px,1.4vw,24px) clamp(18px,1.7vw,30px) clamp(17px,1.6vw,26px);
  background:linear-gradient(200deg,#141817 0%,#0b0d0d 48%,#171b1a 74%,#08090a 100%);
  box-shadow:inset 0 1px 0 rgba(62,232,159,.3);
}
/* The drawer is sized by syncDropSpan() to a WHOLE number of card rows
   (Math.ceil), so with one line of content — "Nothing recorded yet" — roughly a
   card's worth of height is left over. .pvr-hero__drop-inner carries the black
   gradient but is only as tall as its content, so that leftover showed as a bare
   grey void under the message. Stretch the inner over the whole claimed block
   instead: the background, the scanlines and the inset top edge then cover the
   drawer at any content height, empty or full. min-height:0 keeps its own
   overflow-y:auto able to shrink when the list IS long. */
.pvr-root .pvr-hero.is-open > .pvr-hero__drop { display:flex; flex-direction:column; }
.pvr-root .pvr-hero.is-open > .pvr-hero__drop > .pvr-hero__drop-inner { flex:1 1 auto; min-height:0; }

.pvr-root .pvr-hero__drop-scanlines {
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,rgba(0,0,0,.05) 1px 3px);
}

.pvr-root .pvr-hero__drop-head {
  position:relative; display:flex; align-items:center; gap:clamp(10px,1vw,16px);
  padding-bottom:clamp(9px,0.9vw,13px);
}
.pvr-root .pvr-hero__drop-label { font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.22em; color:#7d938a; }
.pvr-root .pvr-hero__drop-rule  { flex:1; min-width:40px; height:1px; background:linear-gradient(90deg,rgba(62,232,159,.45),transparent); }
.pvr-root .pvr-hero__drop-value { font:800 clamp(10px,0.85vw,12px)/1 'Unbounded',sans-serif; letter-spacing:.06em; color:#eafff4; }
.pvr-root .pvr-hero__drop-note  { position:relative; padding-top:clamp(8px,0.8vw,12px); font:600 9px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.16em; color:#7d938a; }

.pvr-root .pvr-hero__drop-list { position:relative; }

/* A main row: caret / name / age, with the faded caption spanning columns 2-3
   underneath. The caption starts at column 2 so it hangs under the NAME, not
   under the caret — that shared left edge is what makes nested tiers read as
   one list instead of three. */
.pvr-root .pvr-hero__rec {
  display:grid;
  grid-template-columns:clamp(14px,1.2vw,18px) minmax(0,1fr) auto;
  align-items:baseline;
  column-gap:clamp(9px,0.85vw,14px); row-gap:clamp(3px,0.35vw,5px);
  padding:clamp(8px,0.8vw,12px) clamp(8px,0.8vw,12px);
  border-top:1px solid rgba(234,255,244,.07);
  cursor:pointer; user-select:none;
  transition:background .18s ease, box-shadow .18s ease;
}
.pvr-root .pvr-hero__rec:first-child { border-top:0; }
.pvr-root .pvr-hero__rec:hover { background:rgba(62,232,159,.07); box-shadow:inset 2px 0 0 #3ee89f; }
.pvr-root .pvr-hero__rec:focus-visible { outline:none; background:rgba(62,232,159,.1); box-shadow:inset 2px 0 0 #3ee89f; }

.pvr-root .pvr-hero__rec-caret {
  font:700 clamp(10px,0.9vw,13px)/1 'Plus Jakarta Sans',sans-serif; color:#3ee89f;
  transition:transform .2s ease; transform-origin:50% 55%;
}
.pvr-root .pvr-hero__rec.is-expanded > .pvr-hero__rec-caret { transform:rotate(90deg); }
.pvr-root .pvr-hero__rec.is-leaf > .pvr-hero__rec-caret { color:#4a655a; }
/* a leaf has nothing to drill into, so it should not advertise a click — but
   right-click still opens it, which is what this cursor says. */
.pvr-root .pvr-hero__rec.is-leaf { cursor:context-menu; }

/* SR is the main. Root is the caption under it — smaller, faded, and in the
   body face rather than the display face so the two never compete. */
.pvr-root .pvr-hero__rec-name  { font:800 clamp(12px,1.15vw,17px)/1.05 'Unbounded',sans-serif; letter-spacing:-.01em; color:#eafff4; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pvr-root .pvr-hero__rec-age   { font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:#7d938a; white-space:nowrap; }
.pvr-root .pvr-hero__rec-subs  { grid-column:2 / -1; display:flex; align-items:baseline; gap:clamp(8px,0.8vw,12px); min-width:0; }
.pvr-root .pvr-hero__rec-chain { font:600 8.5px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:rgba(234,255,244,.34); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pvr-root .pvr-hero__rec-count { margin-left:auto; font:600 8.5px/1.3 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:#7d938a; white-space:nowrap; }

/* Nested tiers. The rule down the left is the only depth cue that survives
   several levels without runaway indentation. */
.pvr-root .pvr-hero__rec-kids:not(:empty) {
  margin-left:clamp(14px,1.3vw,20px);
  border-left:1px solid rgba(62,232,159,.22);
  padding-left:clamp(6px,0.6vw,10px);
}
.pvr-root .pvr-hero__rec-kids:not(:empty) > .pvr-hero__rec:first-child { border-top:0; }
.pvr-root .pvr-hero__rec-kids .pvr-hero__rec-name { font-size:clamp(11px,1vw,14.5px); color:rgba(234,255,244,.92); }

/* Context menu — right-click a main, choose OPEN. Lives on <body> so the
   hero's clip-path and the drawer's overflow cannot crop it. */
.pvr-root-menu-anchor {}
.pvr-menu {
  position:fixed; z-index:9999; min-width:150px;
  background:linear-gradient(200deg,#141817 0%,#0b0d0d 60%,#171b1a 100%);
  border:1px solid rgba(62,232,159,.35);
  box-shadow:0 18px 44px rgba(0,0,0,.7);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  padding:5px 0;
}
.pvr-menu__head {
  padding:7px 12px 6px; font:600 8.5px/1.2 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.2em; color:#7d938a; text-transform:uppercase;
  border-bottom:1px solid rgba(234,255,244,.08);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px;
}
.pvr-menu__item {
  padding:9px 12px; font:700 9.5px/1 'Plus Jakarta Sans',sans-serif;
  letter-spacing:.2em; color:#eafff4; cursor:pointer;
  transition:background .15s ease;
}
.pvr-menu__item:hover { background:rgba(62,232,159,.18); }

@media (prefers-reduced-motion: reduce) {
  .pvr-root .pvr-hero__drop { transition:none; }
}
.pvr-root .pvr-hero__bottom { position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(14px,1.4vw,26px); flex-wrap:wrap; }
.pvr-root .pvr-hero__id { min-width:0; display:flex; flex-direction:column; gap:8px; }
.pvr-root .pvr-hero__name { font:800 clamp(20px,2.2vw,34px)/1.02 'Unbounded',sans-serif; letter-spacing:-.02em; color:#04140d; text-transform:uppercase; text-wrap:pretty; }
.pvr-root .pvr-hero__meta { font:600 clamp(10px,0.9vw,11.5px)/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.14em; color:rgba(4,20,13,.72); }
.pvr-root .pvr-hero__progress { position:relative; width:38%; height:3px; background:rgba(0,0,0,.28); }
.pvr-root .pvr-hero__progress-fill { display:block; width:82%; height:100%; background:#eafff4; box-shadow:0 0 12px rgba(234,255,244,.7); }

/* ---------- shared card rows (§7.9) ---------- */
.pvr-root .pvr-card__top { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.pvr-root .pvr-card__body { position:relative; display:flex; flex-direction:column; gap:8px; }
.pvr-root .pvr-card__strip { display:flex; align-items:center; gap:10px; margin-top:4px; }

/* ---------- folder tile (§7.10) ---------- */
.pvr-root .pvr-fcard { position:relative; cursor:pointer; padding:1.5px; box-sizing:border-box; background:linear-gradient(200deg,rgba(62,232,159,.4),rgba(0,0,0,.6)); box-shadow:0 16px 40px rgba(0,0,0,.5); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); transition:transform .25s ease,box-shadow .25s ease; }
.pvr-root .pvr-fcard__face { position:relative; height:100%; box-sizing:border-box; overflow:hidden; padding:clamp(15px,1.4vw,24px); display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:clamp(200px,18vw,260px); background:linear-gradient(200deg,#1f8f68 0%,#174539 40%,#249a71 62%,#13332a 100%); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); }
.pvr-root .pvr-fcard__scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.05) 1px 3px); }
.pvr-root .pvr-fcard__hatch { position:absolute; inset:0; pointer-events:none; opacity:.21; background:repeating-linear-gradient(115deg,rgba(255,255,255,.085) 0 2px,transparent 2px 9px); }
.pvr-root .pvr-fcard__ratio { font:800 clamp(26px,2.6vw,38px)/0.9 'Unbounded',sans-serif; letter-spacing:-.03em; color:#eafff4; }
.pvr-root .pvr-fcard__checker { width:30px; height:30px; flex:none; opacity:.7; background:repeating-conic-gradient(#eafff4 0 25%,#0b241c 0 50%) 0 0/10px 10px; }
.pvr-root .pvr-fcard__name { font:700 clamp(14px,1.3vw,19px)/1.1 'Unbounded',sans-serif; letter-spacing:-.01em; color:#eafff4; text-transform:uppercase; text-wrap:pretty; }
.pvr-root .pvr-fcard__meta { font:600 9px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:rgba(234,255,244,.62); }
.pvr-root .pvr-fcard__bars { display:flex; align-items:center; gap:1.5px; height:16px; opacity:.8; }
.pvr-root .pvr-fbar--1 { width:1px; height:100%; background:#eafff4; }
.pvr-root .pvr-fbar--2 { width:2px; height:100%; background:#eafff4; }
.pvr-root .pvr-fbar--3 { width:3px; height:100%; background:#eafff4; }
.pvr-root .pvr-fbar--4 { width:4px; height:100%; background:#eafff4; }
.pvr-root .pvr-fcard__rule { flex:1; height:1px; background:rgba(234,255,244,.25); }
.pvr-root .pvr-fcard__action { font:600 8px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:rgba(234,255,244,.7); }

/* ---------- file tile (§7.11) ---------- */
.pvr-root .pvr-dcard { position:relative; cursor:pointer; padding:1.5px; box-sizing:border-box; background:linear-gradient(200deg,rgba(255,255,255,.42),rgba(0,0,0,.5)); box-shadow:0 16px 40px rgba(0,0,0,.5); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); transition:transform .25s ease,box-shadow .25s ease; }
.pvr-root .pvr-dcard__face { position:relative; height:100%; box-sizing:border-box; overflow:hidden; padding:clamp(15px,1.4vw,24px); display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:clamp(200px,18vw,260px); background:linear-gradient(200deg,#f2f7f4 0%,#dbe6e0 55%,#b6c5bd 100%); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); }
.pvr-root .pvr-dcard__scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px); }
.pvr-root .pvr-dcard__ratio { font:800 clamp(26px,2.6vw,38px)/0.9 'Unbounded',sans-serif; letter-spacing:-.03em; color:#0b3527; }
.pvr-root .pvr-dcard__marks { display:flex; flex-direction:column; gap:3px; align-items:flex-end; flex:none; }
.pvr-root .pvr-dmark--a { width:26px; height:3px; background:#0b3527; }
.pvr-root .pvr-dmark--b { width:18px; height:3px; background:#0b3527; }
.pvr-root .pvr-dmark--c { width:22px; height:3px; background:rgba(11,53,39,.4); }
.pvr-root .pvr-dcard__name { font:700 clamp(14px,1.3vw,19px)/1.1 'Unbounded',sans-serif; letter-spacing:-.01em; color:#08241a; text-transform:uppercase; text-wrap:pretty; }
.pvr-root .pvr-dcard__meta { font:600 9px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:#4a655a; }
.pvr-root .pvr-dcard__bars { display:flex; align-items:center; gap:1.5px; height:16px; }
.pvr-root .pvr-dbar--1 { width:1px; height:100%; background:#0b3527; }
.pvr-root .pvr-dbar--2 { width:2px; height:100%; background:#0b3527; }
.pvr-root .pvr-dbar--3 { width:3px; height:100%; background:#0b3527; }
.pvr-root .pvr-dbar--4 { width:4px; height:100%; background:#0b3527; }
.pvr-root .pvr-dcard__rule { flex:1; height:1px; background:rgba(11,53,39,.25); }
.pvr-root .pvr-dcard__action { font:600 8px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:#127a56; }

/* ---------- intake tile (§7.12) — this vault's hidden-folders drop zone ---------- */
.pvr-root .pvr-intake { position:relative; cursor:pointer; padding:1.5px; box-sizing:border-box; background:linear-gradient(200deg,rgba(62,232,159,.3),rgba(0,0,0,.5)); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); transition:background .2s ease; }
.pvr-root .pvr-intake__face { position:relative; height:100%; box-sizing:border-box; overflow:hidden; padding:clamp(15px,1.4vw,24px); display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; min-height:clamp(200px,18vw,260px); background:repeating-linear-gradient(135deg,#111c18 0 8px,#0c1512 8px 16px); clip-path:polygon(0 22px,22px 0,calc(100% - 66px) 0,calc(100% - 50px) 15px,100% 15px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%); }
.pvr-root .pvr-intake__glow { position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 40px rgba(62,232,159,.14); }
.pvr-root .pvr-intake__plus { position:relative; font:400 clamp(24px,2.2vw,32px)/1 'Plus Jakarta Sans',sans-serif; color:#3ee89f; }
.pvr-root .pvr-intake__body { position:relative; display:flex; flex-direction:column; gap:7px; }
.pvr-root .pvr-intake__title { font:700 clamp(14px,1.3vw,19px)/1.1 'Unbounded',sans-serif; letter-spacing:-.01em; color:#eafff4; }
.pvr-root .pvr-intake__hint { font:500 9px/1.5 'Plus Jakarta Sans',sans-serif; letter-spacing:.16em; color:rgba(157,208,183,.75); }

/* ---------- HUD overlay (§7.12) — verbatim, including the inset:14px
   that is then overridden by left/top so the marks sit outside the
   grid and over the frame (source doc §10 flags this as hand-nudged) ---------- */
.pvr-root .pvr-hud { position:absolute; inset:14px; pointer-events:none; z-index:6; left:-26px; top:-53px; }
.pvr-root .pvr-hud__corner--tl { position:absolute; left:0; top:0; width:16px; height:16px; border-left:2px solid #3ee89f; border-top:2px solid #3ee89f; }
.pvr-root .pvr-hud__corner--tr { position:absolute; right:0; top:0; width:16px; height:16px; border-right:2px solid #3ee89f; border-top:2px solid #3ee89f; }
.pvr-root .pvr-hud__corner--bl { position:absolute; left:0; bottom:0; width:16px; height:16px; border-left:2px solid #3ee89f; border-bottom:2px solid #3ee89f; }
.pvr-root .pvr-hud__corner--br { position:absolute; right:0; bottom:0; width:16px; height:16px; border-right:2px solid #3ee89f; border-bottom:2px solid #3ee89f; }
.pvr-root .pvr-hud__dot--l { position:absolute; left:-4px; top:22px; width:5px; height:5px; background:#3ee89f; border-radius:50%; }
.pvr-root .pvr-hud__dot--r { position:absolute; right:-4px; bottom:26px; width:5px; height:5px; background:#3ee89f; border-radius:50%; }
.pvr-root .pvr-hud__hatch--tr { position:absolute; right:74px; top:1px; width:64px; height:12px; opacity:.85; background:repeating-linear-gradient(115deg,#3ee89f 0 3px,transparent 3px 8px); }
.pvr-root .pvr-hud__ticks { position:absolute; right:150px; top:4px; display:flex; gap:5px; align-items:center; }
.pvr-root .pvr-hud__tick--a { width:9px; height:3px; background:#3ee89f; }
.pvr-root .pvr-hud__tick--b { width:30px; height:3px; background:#3ee89f; }
.pvr-root .pvr-hud__stack { position:absolute; left:2px; bottom:78px; display:flex; flex-direction:column; gap:5px; }
.pvr-root .pvr-hud__cell--1 { width:8px; height:6px; border:1.5px solid rgba(62,232,159,.85); }
.pvr-root .pvr-hud__cell--2 { width:8px; height:6px; border:1.5px solid rgba(62,232,159,.55); }
.pvr-root .pvr-hud__cell--3 { width:8px; height:6px; border:1.5px solid rgba(62,232,159,.35); }
.pvr-root .pvr-hud__cell--4 { width:8px; height:6px; border:1.5px solid rgba(62,232,159,.2); }
.pvr-root .pvr-hud__hatch--bl { position:absolute; left:150px; bottom:1px; width:70px; height:12px; opacity:.8; background:repeating-linear-gradient(115deg,#3ee89f 0 3px,transparent 3px 8px); }
.pvr-root .pvr-hud__plus { position:absolute; left:12px; top:2px; font:700 10px/1 'Plus Jakarta Sans',sans-serif; color:rgba(62,232,159,.75); }

/* ---------- footer (§7.12) ---------- */
.pvr-root .pvr-footer { flex:none; position:relative; display:flex; align-items:center; gap:clamp(12px,1.4vw,26px); flex-wrap:wrap; padding:clamp(11px,1.1vw,16px) clamp(14px,1.4vw,24px); box-sizing:border-box; background:linear-gradient(110deg,#2a3833 0%,#0e1512 30%,#3a4b43 55%,#0c1310 82%,#212c27 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); }
.pvr-root .pvr-footer__scanlines { position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,rgba(0,0,0,.05) 1px 3px); }
.pvr-root .pvr-footer__label { position:relative; font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.22em; color:#7d938a; }
.pvr-root .pvr-footer__value { position:relative; font:800 clamp(11px,1vw,14px)/1 'Unbounded',sans-serif; letter-spacing:.06em; color:#eafff4; text-shadow:0 0 14px rgba(62,232,159,.5); }
.pvr-root .pvr-footer__rule { position:relative; flex:1; min-width:80px; height:1px; background:linear-gradient(90deg,rgba(62,232,159,.45),transparent); }
.pvr-root .pvr-footer__cap-label { position:relative; font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:#7d938a; }
.pvr-root .pvr-footer__meter { position:relative; flex:0 1 200px; min-width:100px; height:4px; background:rgba(0,0,0,.4); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.pvr-root .pvr-footer__meter-fill { display:block; width:62%; height:100%; background:linear-gradient(90deg,#127a56,#3ee89f); box-shadow:0 0 12px rgba(62,232,159,.6); }
.pvr-root .pvr-footer__cap-value { position:relative; font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.18em; color:#3ee89f; }
.pvr-root .pvr-status { position:relative; display:flex; align-items:center; gap:6px; }
.pvr-root .pvr-status__dot { width:7px; height:7px; border-radius:50%; background:#3ee89f; box-shadow:0 0 10px rgba(62,232,159,.8); animation:pvr-pulse 2s ease-in-out infinite; }
.pvr-root .pvr-status__label { font:600 9px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.2em; color:#9db1a7; }
/* Mirrors the Connection Status pill. Two states only — the vault is either
   online or it is not — and two hues, the accent and its complement. */
.pvr-root .pvr-status.is-offline .pvr-status__dot { background:#c42e4c; box-shadow:0 0 10px rgba(196,46,76,.8); }
.pvr-root .pvr-status.is-offline .pvr-status__label { color:#e0899a; }

/* ---------- hover states (§7.13) — ADDITIONS. The source authors
   these as style-hover="…", which nothing in its runtime implements,
   so they are inert in the original. ---------- */
.pvr-root .pvr-crumb:hover { color:#3ee89f; }
.pvr-root .pvr-btn-view--off:hover { color:#eafff4; border-color:rgba(62,232,159,.5); }
.pvr-root .pvr-hero:hover { transform:translateY(-3px); box-shadow:0 26px 54px rgba(0,0,0,.65), 0 0 34px rgba(62,232,159,.28); }
.pvr-root .pvr-fcard:hover { transform:translateY(-3px); box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 30px rgba(62,232,159,.26); }
.pvr-root .pvr-dcard:hover { transform:translateY(-3px); box-shadow:0 24px 50px rgba(0,0,0,.6), 0 0 30px rgba(234,255,244,.2); }

/* ---------- ADDITIONS beyond the source: this vault's own states ---------- */
.pvr-root .pvr-hero--inert { cursor:default; }
.pvr-root .pvr-hero--inert:hover { transform:none; box-shadow:0 18px 44px rgba(0,0,0,.55); }
.pvr-root .pvr-fcard.is-selected { outline:2px solid #3ee89f; outline-offset:2px; }
.pvr-root .pvr-dcard.is-selected { outline:2px solid #0b3527; outline-offset:2px; }
.pvr-root .pvr-intake.is-over { background:linear-gradient(200deg,#3ee89f,rgba(0,0,0,.5)); }
.pvr-root .pvr-hidden-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.pvr-root .pvr-chip { padding:5px 9px; font:600 8.5px/1 'Plus Jakarta Sans',sans-serif; letter-spacing:.14em; color:#eafff4; background:rgba(62,232,159,.14); border:1px solid rgba(62,232,159,.35); clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 7px) 100%,0 100%); cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pvr-root .pvr-chip:hover { background:rgba(62,232,159,.3); }
.pvr-root .pvr-empty { grid-column:1 / -1; padding:clamp(40px,4vw,60px); font:700 clamp(14px,1.4vw,18px)/1 'Unbounded',sans-serif; letter-spacing:.06em; color:#7d938a; }

@media (prefers-reduced-motion: reduce) {
  .pvr-root .pvr-hero, .pvr-root .pvr-fcard, .pvr-root .pvr-dcard,
  .pvr-root .pvr-hero:hover, .pvr-root .pvr-fcard:hover, .pvr-root .pvr-dcard:hover { transition:none; transform:none; }
  .pvr-root .pvr-fx-beam, .pvr-root .pvr-status__dot { animation:none; }
}


/* ==================================================================
   ROOT → ROOT FOLDER-CHANGE TRANSITION            (added 2026-08-19)
   Root UI looks the same in every folder by design — same frame, same
   grid, same footer — so stepping from one root folder into another
   changed nothing on screen except the words inside the tiles. Motion
   is what carries "you moved" here. Driven entirely from
   RootUI.playFolderChange(); nothing below runs on its own.
   ================================================================== */

@keyframes pvr-tile-in {
  0%   { opacity:0; transform:translateY(16px) scale(.94); }
  55%  { opacity:1; }
  100% { opacity:1; transform:none; }
}
/* the hero deliberately has NO scale — its drawer measures live heights to
   size its grid-row span, and a scaled hero would corrupt that measurement */
@keyframes pvr-hero-in {
  0%   { opacity:0; transform:translateY(18px); }
  100% { opacity:1; transform:none; }
}
.pvr-root .pvr-grid > .pvr-anim-in {
  animation: pvr-tile-in .42s cubic-bezier(.22,1.4,.36,1) both;
}
.pvr-root .pvr-grid > .pvr-hero.pvr-anim-in {
  animation-name: pvr-hero-in;
  animation-timing-function: cubic-bezier(.22,1,.36,1);
}

/* the sweep: one bright band down the screen, in the same idiom as
   .pvr-fx-beam's idle scan, but a single fast pass instead of a loop */
.pvr-root .pvr-fx-refresh { position:absolute; inset:0; pointer-events:none; z-index:9; opacity:0; overflow:hidden; }
.pvr-root .pvr-fx-refresh::before {
  content:""; position:absolute; left:0; right:0; top:0; height:42%;
  background:linear-gradient(180deg,transparent,rgba(62,232,159,.10) 38%,rgba(234,255,244,.15) 50%,rgba(62,232,159,.10) 62%,transparent);
}
.pvr-root .pvr-fx-refresh.is-on          { animation: pvr-refresh-flash .52s linear both; }
.pvr-root .pvr-fx-refresh.is-on::before  { animation: pvr-refresh-sweep .52s cubic-bezier(.4,0,.2,1) both; }
@keyframes pvr-refresh-flash { 0% { opacity:0; } 8% { opacity:1; } 74% { opacity:1; } 100% { opacity:0; } }
@keyframes pvr-refresh-sweep { 0% { transform:translateY(-110%); } 100% { transform:translateY(250%); } }

@media (prefers-reduced-motion: reduce) {
  .pvr-root .pvr-grid > .pvr-anim-in,
  .pvr-root .pvr-fx-refresh.is-on,
  .pvr-root .pvr-fx-refresh.is-on::before { animation:none; }
  .pvr-root .pvr-fx-refresh { opacity:0; }
}


/* ============================================================
   DEEP UI — THE DEEP DROPDOWN UI (funnel stack), 2026-08-17.
   Replaces the plate-card Deep UI outright (the `.pv-card` /
   `.pv-plate-back` / `.pv-plate-front` design and both of its
   `deep-ui-company` / `deep-ui-llll` overrides above), per direct
   user instruction: this is the latest Deep version.

   SOURCE: autodictate-design-system.md + autodictatestandalone.html
   — a byte-verified extraction of the Datacore bundle
   `File Dropdown neww deep ui.html` (349,129 bytes), base64+gunzip
   out of the __bundler blobs, not read off a screenshot. Verified in
   the source doc at 442/1,700,000 px changed closed (0.026%) and
   367/1,700,000 open (0.022%), both 0px at threshold >80; 71/71
   .sc-interp spans; 192/192 spans; hover rule byte-identical. Every
   colour, alpha, clip-path polygon, gradient stop and transition
   string below is verbatim from that extraction.

   SCOPE / PREFIX: prefix is pva-, NOT the pv- the design doc names.
   Deliberate, same shape as the 2026-08-11 Root UI rebuild taking
   pvr-: the older Deep UI's bare `.pv-card{display:flex}`,
   `.pv-frame`, `.pv-search`, `.pv-root` rules are still live in this
   file, and any one of them would destroy this design's absolute
   positioning. The rename is a flat 1:1 `pv-` -> `pva-` across every
   class in the extraction, nothing else renamed, so the design doc
   still cross-references line for line. Everything is additionally
   nested under `.pva-root` — the class DeepUI.js puts on its own host
   — so nothing here can reach Root UI or the old Deep UI by accident.

   DELIBERATE DEVIATIONS FROM THE SOURCE, none silent:
     - keyframes renamed sheen/pulse/drift -> pva-sheen/pva-pulse/
       pva-drift. Bare `sheen`, `pulse` and `drift` are far too generic
       to drop into a vault-wide Obsidian snippet.
     - the canvas-mode `html{background:#f0eee6}` rule is NOT
       reproduced. It is a Datacore preview-host artifact; the design
       doc §2/§11 says reproduce-for-fidelity then delete on port.
       This is the port, so it is deleted.
     - `body{background:#000}` is not reproduced either — the bezel
       covers the whole frame and Obsidian owns the page background.
     - the authored `a{color:#2ec4a6}` rule is dropped: the source
       template contains zero <a> tags (design doc §11, "live in the
       cascade but permanently unmatched").
     - a content-box containment block (below). The source runs on the
       UA default box-sizing with border-box opted into on exactly 5
       elements; Obsidian sets border-box globally, which would shrink
       all five. Design doc §3 calls for exactly this — the 5 opt-ins
       are then restored by name, and no blanket reset is added.
     - .pva-fit / .pva-layer / .pva-search__input / .pva-crumb--here /
       .pva-statusbar__page / .pva-statusbar__clock / .pva-empty /
       .is-disabled are additions, not in the source: the pane-fit
       wrapper, the z-layer containers, Engine's shared filter input
       and clock, the pager, and empty/disabled states.
     - the status bar's CAPACITY slot is repurposed as PAGE progress.
       The source hardcodes "274.6 / 440 GB" against a 62% bar (design
       doc §11 flags the 62 vs 62.41 mismatch); that string is not real
       data, so the slot carries page state instead and the mismatch
       stops existing.

   STILL FLAGGED, NOT FIXED: LIST/GRID remains decorative — the source
   wires no view-mode state anywhere and none was invented here. GRID
   is permanently the active one.

   FONTS: Archivo + JetBrains Mono, both @import'd at the top of this
   file. The bundle ships them as VARIABLE fonts (wght axis) — not the
   static per-weight subsets the generic extraction boilerplate assumes
   — so the Google Fonts substitution is the same underlying font
   technology, not a rendering-model swap (design doc §9).
   ============================================================ */

@keyframes pva-sheen { 0% { background-position: -820px 0, 0 0; } 100% { background-position: 1560px 0, 0 0; } }
@keyframes pva-pulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes pva-drift { 0% { transform: translateY(0); } 100% { transform: translateY(46px); } }

/* ---------- tokens (design doc §4.1 — mapped, with provenance) ---------- */
.pva-root {
  --pva-accent:        #2ec4a6;
  --pva-accent-bright: #d6fff0;
  --pva-accent-mid:    #7ee7cc;
  --pva-accent-deeper: #04231c;              /* ink on accent (GRID button text) */
  --pva-accent-50:     rgba(46,196,166,.5);

  --pva-paper:         #e9f4f0;              /* text on dark */
  --pva-ink:           #0a2a21;              /* fg() dark branch, pale ramp cards */

  --pva-hairline:      rgba(255,255,255,.09);
  --pva-inset-hi:      rgba(255,255,255,.07);
  --pva-fill-soft:     rgba(255,255,255,.1);

  --pva-bar-1:         rgba(255,255,255,.045);
  --pva-bar-2:         rgba(255,255,255,.19);
  --pva-bar-3:         rgba(255,255,255,.13);
  --pva-bar-4:         rgba(255,255,255,.05);
  --pva-bar-5:         rgba(255,255,255,.03);

  --pva-shadow-card:   rgba(3,20,15,.6);
  --pva-shadow-deep:   rgba(0,0,0,.9);
}

/* CONTAINMENT — see the deviation note above. Obsidian's global
   border-box is undone inside this design only, then the source's own
   5 explicit opt-ins are restored by name further down. No blanket
   reset is introduced: any future padded+widthed element must opt in
   for itself, exactly as the source's author did (design doc §3). */
.pva-root, .pva-root *, .pva-root *::before, .pva-root *::after { box-sizing: content-box; }

.pva-root {
  overflow-x: hidden;
  font-family: Archivo, 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--pva-paper);
  -webkit-font-smoothing: antialiased;
}
/* pane-fit wrapper — JS writes .pva-frame's transform + marginLeft and
   this element's height, so the scaled frame occupies exactly the room
   it visually takes up. */
.pva-fit { position: relative; width: 100%; height: 800px; }
.pva-layer { position: static; }

/* ---------- frame / screen / shell ---------- */
.pva-frame {
  width: 1560px; height: 800px; box-sizing: border-box; padding: 14px;
  transform-origin: top left;
  background: linear-gradient(180deg, #1b2221, #0a0f0e 55%, #121817);
  border-radius: 26px;
  box-shadow: 0 50px 110px var(--pva-shadow-deep), inset 0 1px 0 var(--pva-inset-hi);
}
.pva-frame__screen {
  width: 1532px; height: 772px;
  background: linear-gradient(180deg, rgba(46,196,166,.34), rgba(46,196,166,.1) 40%, rgba(46,196,166,.22));
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.pva-shell {
  position: relative; width: 1530px; height: 770px; margin: 1px; overflow: hidden; background: #070c0b;
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}

/* shared transition string — the exact one repeated on the 10 animated
   elements in the source (foot, foot-band, foot-rim, card, cavity,
   rail, file, file__label, card__sheen, card__label) */
.pva-anim {
  transition: top .46s cubic-bezier(.22,1,.36,1), height .46s cubic-bezier(.22,1,.36,1),
              left .46s cubic-bezier(.22,1,.36,1), width .46s cubic-bezier(.22,1,.36,1),
              clip-path .46s cubic-bezier(.22,1,.36,1), opacity .3s ease, filter .2s ease;
}

/* ---------- FX layers (full-bleed ambient) ---------- */
.pva-fx-grid {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 7px),
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: auto, 46px 46px, 46px 46px;
}
.pva-fx-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(72% 46% at 20% 6%, rgba(46,196,166,.075), transparent 62%),
    radial-gradient(60% 48% at 62% 112%, rgba(0,0,0,.75), transparent 62%),
    radial-gradient(38% 30% at 14% 44%, rgba(46,196,166,.05), transparent 70%);
}
.pva-fx-spot {
  position: absolute; left: 330px; top: 118px; width: 300px; height: 300px;
  background: radial-gradient(60% 50% at 45% 45%, rgba(0,0,0,.75), rgba(0,0,0,0) 72%);
  filter: blur(16px);
}

/* ---------- HUD decoration ---------- */
.pva-hud__corner { position: absolute; width: 26px; height: 26px; }
.pva-hud__corner--tl { left: 18px; top: 18px; border-left: 1px solid rgba(46,196,166,.55); border-top: 1px solid rgba(46,196,166,.55); }
.pva-hud__corner--tr { right: 18px; top: 18px; border-right: 1px solid rgba(46,196,166,.55); border-top: 1px solid rgba(46,196,166,.55); }
.pva-hud__corner--bl { left: 18px; bottom: 18px; border-left: 1px solid rgba(46,196,166,.35); border-bottom: 1px solid rgba(46,196,166,.35); }
.pva-hud__corner--br { right: 18px; bottom: 18px; border-right: 1px solid rgba(46,196,166,.35); border-bottom: 1px solid rgba(46,196,166,.35); }

/* the stack's right edge IS the right wall's edge — same line, so the
   fold reads as one plane. Changing xR() in DeepUI.js without changing
   .pva-hud__wall--right here breaks that. */
.pva-hud__wall--left { position: absolute; left: 12px; top: 249px; width: 44px; height: 447px; transform: skewX(-1.28deg); transform-origin: top left; }
.pva-hud__wall-shade--left { position: absolute; left: 5px; top: 0; width: 30px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.012)); }
.pva-hud__wall-line--left { position: absolute; left: 3px; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, #49524e, #2a312f 65%, #1b2120); }
.pva-hud__wall-glow--left { position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: linear-gradient(180deg, rgba(214,255,240,.95), rgba(126,231,204,.9) 50%, rgba(46,196,166,.8)); box-shadow: 0 0 18px rgba(46,196,166,.55); }

/* left / top / height / transform are written by DeepUI.js (wallGeom) —
   the right wall is the SAME line as the stack's right edge, so both are
   derived from one constant rather than duplicated here and left to
   drift. Only the paint stays in CSS. */
.pva-hud__wall--right { position: absolute; width: 250px; transform-origin: top left; z-index: 1; }
.pva-hud__wall-face--edge { position: absolute; left: 0; top: 0; width: 16px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(74,83,79,.8) 60%, #2b3230); }
.pva-hud__wall-face { position: absolute; left: 16px; top: 0; width: 230px; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.pva-hud__wall-glow--right { position: absolute; width: 2px; transform-origin: top left; z-index: 265; background: linear-gradient(180deg, rgba(214,255,240,.98), rgba(126,231,204,.9) 50%, rgba(46,196,166,.85)); box-shadow: 0 0 14px rgba(46,196,166,.6); }

.pva-hud__tick { position: absolute; z-index: 272; left: 36px; top: 47px; width: 12px; height: 2px; background: rgba(255,255,255,.5); }

.pva-hud__cap-hi { position: absolute; z-index: 271; height: 2px; transition: top .18s ease, left .18s ease, width .18s ease, opacity .18s ease;  transform-origin: left center; background: linear-gradient(90deg, transparent, rgba(214,255,240,.95) 22px, rgba(168,220,196,.5)); box-shadow: 0 0 7px rgba(168,236,212,.4); }
.pva-hud__cap-conn { position: absolute; z-index: 271; height: 2px; transition: top .18s ease, left .18s ease, width .18s ease, opacity .18s ease;  transform-origin: left center; background: linear-gradient(90deg, rgba(126,231,204,.9), rgba(126,231,204,.9) 60%, rgba(126,231,204,.55)); box-shadow: 0 0 9px rgba(46,196,166,.5); }

.pva-hud__watermark { position: absolute; z-index: 4; right: 118px; top: 236px; text-align: right; pointer-events: none; }
.pva-hud__watermark-label { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .3em; color: rgba(233,244,240,.14); }
.pva-hud__watermark-num { margin-top: -26px; font: 900 168px Archivo, sans-serif; letter-spacing: -.04em; color: rgba(233,244,240,.035); line-height: 1; }

.pva-hud__rail { position: absolute; z-index: 4; right: 44px; top: 200px; width: 1px; height: 440px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 12%, rgba(255,255,255,.14) 88%, transparent); overflow: hidden; }
.pva-hud__rail-dash { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(46,196,166,.55) 0 6px, transparent 6px 46px); animation: pva-drift 3.6s linear infinite; }

/* ============================================================
   STACKING — reworked 2026-08-17.
   A dropbox now carries its own z-index (DeepUI.js derives it from the
   dropbox's slot), which is what lets every pooled element keep a
   STABLE identity: nothing has to be reordered in the DOM for the fan
   to stack correctly, so nothing ever loses a running transition.
   Every layer below is therefore lifted clear of the cards' range.
   Relative order is unchanged from the source — only the absolute
   numbers moved. Cards occupy roughly 130-210; everything here starts
   at 250.
   ============================================================ */

/* ---------- pva-card — the primary repeating plate ----------
   Single clipped flat plate. There is NO back/front plate pair in this
   design — `__front` is omitted rather than repointed at something
   that doesn't exist (design doc §7). */
.pva-card {
  position: absolute; cursor: pointer;
  background-image:
    linear-gradient(104deg, transparent 42%, rgba(255,255,255,.24) 50%, transparent 58%),
    repeating-linear-gradient(74deg, rgba(255,255,255,.075) 0 2px, transparent 2px 9px);
  background-repeat: no-repeat, repeat; background-size: 820px 100%, auto;
}
/* the source's ONE style-hover attribute, importantify()'d exactly as
   the runtime does (design doc §8) */
.pva-card:hover { filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)) brightness(1.06) !important; }

.pva-card__foot { position: absolute; z-index: 250; background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.34) 34%, rgba(0,0,0,.1) 64%, transparent); }
.pva-card__foot-band { position: absolute; z-index: 257; }
.pva-card__foot-rim { position: absolute; z-index: 258; height: 1px; background: linear-gradient(90deg, rgba(214,255,240,.5), rgba(126,231,204,.75) 55%, rgba(126,231,204,.35)); }

.pva-card__cavity {
  position: absolute; z-index: 260; background-color: #03100d;
  background-image:
    radial-gradient(125% 160% at 106% -20%, rgba(126,231,204,.34), rgba(36,124,101,.17) 34%, rgba(8,32,26,.06) 62%, transparent 80%),
    linear-gradient(206deg, rgba(46,196,166,.1), transparent 46%),
    repeating-linear-gradient(74deg, rgba(255,255,255,.028) 0 1px, transparent 1px 8px);
  box-shadow: inset 0 3px 14px rgba(0,0,0,.85), inset 0 -2px 10px rgba(0,0,0,.6);
}
/* skewX is written by DeepUI.js (railSkew) — it is kidL's own slope,
   which moves with the dropsection's opening; the source's -4.66deg is
   that expression evaluated at the old slope. */
.pva-card__rail { position: absolute; z-index: 261; width: 1px; background: linear-gradient(180deg, rgba(126,231,204,.9), rgba(46,196,166,.25)); transform-origin: top left; }

.pva-card__sheen { position: absolute; z-index: 269; pointer-events: none; }
.pva-card__edge { position: absolute; z-index: 269; height: 1px; transform: rotate(-0.34deg); transform-origin: left center; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 26px, rgba(255,255,255,.55)); pointer-events: none; }

.pva-card__label { position: absolute; z-index: 270; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 14px 0 26px; overflow: hidden; pointer-events: none; user-select: none; }
.pva-card__idxwrap { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 1px; width: 52px; flex: none; }
.pva-card__idx { font: 500 12px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; opacity: .72; }
.pva-card__den { font: 500 8.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; opacity: .42; }
.pva-card__name { position: relative; z-index: 1; white-space: nowrap; font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.pva-card__spacer { flex: 1; }
.pva-card__right { position: relative; z-index: 1; white-space: nowrap; font: 500 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; }

.pva-card__code { position: absolute; z-index: 271; width: 176px; text-align: right; white-space: nowrap; font: 500 7.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .24em; opacity: .5; pointer-events: none; }

/* ---------- pva-file — the repeating child plate ---------- */
.pva-file {
  position: absolute; z-index: 262; cursor: pointer;
  background-image: repeating-linear-gradient(74deg, rgba(255,255,255,.07) 0 2px, transparent 2px 9px);
  filter: drop-shadow(0 2px 0 var(--pva-shadow-card)) drop-shadow(0 9px 15px rgba(0,0,0,.5));
}
.pva-file__label { position: absolute; z-index: 263; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 20px; overflow: hidden; pointer-events: none; }
.pva-file__idxwrap { display: flex; align-items: baseline; gap: 1px; flex: none; }
.pva-file__idx { font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; opacity: .68; }
.pva-file__den { font: 500 7.5px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; opacity: .4; }
.pva-file__name { white-space: nowrap; font-family: Archivo, sans-serif; font-weight: 600; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; }
.pva-file__spacer { flex: 1; }
.pva-file__kind { white-space: nowrap; font: 500 8px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em; opacity: .45; }

/* ---------- search / view toggle / breadcrumbs / status bar ---------- */
.pva-search {
  position: absolute; z-index: 300; top: 34px; width: 352px; height: 39px; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px; padding: 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--pva-hairline);
  clip-path: polygon(0 0, 100% 0, 100% 58%, calc(100% - 15px) 100%, 0 100%);
}
.pva-search__icon { font: 400 12px 'JetBrains Mono', ui-monospace, monospace; color: var(--pva-accent); }
/* Engine's shared <input>, dressed as the source's static label */
.pva-search__input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0;
  font: 500 11px Archivo, sans-serif; letter-spacing: .13em; color: var(--pva-paper);
}
.pva-search__input::placeholder { color: rgba(233,244,240,.5); }
.pva-search__spacer { flex: 0; }
.pva-search__kbd { font: 500 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; padding: 3px 6px; border: 1px solid rgba(255,255,255,.12); color: rgba(233,244,240,.4); }

.pva-viewtoggle__sort { position: absolute; z-index: 300; right: 30px; top: 88px; white-space: nowrap; font: 500 10px Archivo, sans-serif; letter-spacing: .16em; color: rgba(233,244,240,.3); cursor: pointer; }
.pva-viewtoggle__sort:hover { color: var(--pva-accent); }

.pva-crumbs { position: absolute; z-index: 300; left: 430px; top: 120px; display: flex; align-items: center; gap: 18px; width: 1040px; }
.pva-crumbs__up { flex: none; padding: 6px 12px; border: 1px solid var(--pva-accent-50); font: 600 10px Archivo, sans-serif; letter-spacing: .18em; color: var(--pva-accent); cursor: pointer; }
.pva-crumbs__up:hover { background: rgba(46,196,166,.14); }
.pva-crumbs__up.is-disabled { cursor: default; opacity: .32; }
.pva-crumbs__up.is-disabled:hover { background: none; }
.pva-crumbs__title { flex: none; font: 800 21px Archivo, sans-serif; letter-spacing: .05em; }
.pva-crumbs__trail { flex: none; display: flex; gap: 9px; font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .16em; color: rgba(233,244,240,.34); }
.pva-crumbs__trail span:not(.pva-crumb--here) { cursor: pointer; }
.pva-crumbs__trail span:not(.pva-crumb--here):hover { color: var(--pva-paper); }
.pva-crumb--accent { color: rgba(46,196,166,.85); }
.pva-crumb--here { color: rgba(233,244,240,.75); cursor: default; }
.pva-crumbs__rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(46,196,166,.45), rgba(46,196,166,.06)); }
.pva-crumbs__dot { flex: none; width: 5px; height: 5px; background: rgba(46,196,166,.7); }
.pva-crumbs__hint { position: absolute; z-index: 300; left: 430px; top: 158px; white-space: nowrap; font: 500 10px Archivo, sans-serif; letter-spacing: .2em; color: rgba(233,244,240,.28); }

.pva-statusbar {
  position: absolute; z-index: 301; left: 24px; top: 696px; width: 1482px; height: 52px; box-sizing: border-box;
  display: flex; align-items: center; gap: 18px; padding: 0 24px;
  background: linear-gradient(90deg, var(--pva-bar-1), var(--pva-bar-2) 20%, var(--pva-bar-3) 38%, var(--pva-bar-4) 68%, var(--pva-bar-5));
  border-top: 1px solid var(--pva-hairline);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  font: 500 10px Archivo, sans-serif; letter-spacing: .18em; color: rgba(233,244,240,.4);
}
.pva-statusbar__label { white-space: nowrap; }
.pva-statusbar__value { white-space: nowrap; font: 700 12px Archivo, sans-serif; letter-spacing: .1em; color: var(--pva-paper); }
.pva-statusbar__rule { width: 1px; height: 18px; background: rgba(255,255,255,.12); }
.pva-statusbar__selected { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; color: rgba(233,244,240,.75); }
.pva-statusbar__spacer { flex: 1; height: 1px; background: linear-gradient(90deg, var(--pva-accent-50) 0 12%, var(--pva-fill-soft)); }
.pva-statusbar__figure { white-space: nowrap; font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; color: rgba(233,244,240,.6); }
.pva-statusbar__meter { flex: none; width: 168px; height: 4px; background: var(--pva-fill-soft); }
.pva-statusbar__meter-fill { display: block; height: 4px; background: linear-gradient(90deg, var(--pva-accent), #a8dcc4); box-shadow: 0 0 10px rgba(46,196,166,.6); transition: width .3s ease, margin-left .3s ease; }
/* the STACK meter is a scrollbar: fill LENGTH is the visible fraction,
   fill OFFSET is the scroll position. During a glide the offset is
   driven per-frame, so the easing transition would fight it. */
.pva-root.is-scrolling .pva-statusbar__meter-fill { transition: none; }
.pva-statusbar__page { white-space: nowrap; font: 700 9px Archivo, sans-serif; letter-spacing: .16em; color: rgba(233,244,240,.5); cursor: pointer; }
.pva-statusbar__page:hover { color: var(--pva-accent); }
.pva-statusbar__page.is-disabled { cursor: default; opacity: .3; }
.pva-statusbar__page.is-disabled:hover { color: rgba(233,244,240,.5); }
.pva-statusbar__status { white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.pva-statusbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pva-accent); box-shadow: 0 0 12px rgba(46,196,166,.9); animation: pva-pulse 3.2s ease-in-out infinite; }
.pva-statusbar__clock { white-space: nowrap; font: 500 10px Archivo, sans-serif; letter-spacing: .18em; color: rgba(233,244,240,.4); }

.pva-empty {
  position: absolute; z-index: 300; left: 430px; top: 300px;
  font: 500 11px Archivo, sans-serif; letter-spacing: .2em; color: rgba(233,244,240,.28);
}

/* ============================================================
   SCROLL STATE — added 2026-08-17 with the dropsection scroll engine.

   .pva-anim carries the source's .46s cubic-bezier transition, which
   exists to animate a STATE CHANGE (a dropbox opening or closing).
   During a scroll glide the geometry is recomputed every frame, so
   leaving those transitions live would make each layer chase a target
   that has already moved again — and layers carrying different content
   settle at different rates, which is precisely the rubber-banding that
   reads as a dropbox tearing away from its own dropbar extension.
   Killed for the duration of the glide; DeepUI.js removes
   .is-scrolling the instant it rests, so open/close still animates.

   will-change is set only WHILE scrolling, never permanently: holding
   every dropbox on its own compositor layer for a whole session costs
   memory for no benefit when nothing is moving.
   ============================================================ */
/* The sheen is a 9s background-position sweep living inside the card's
   drop-shadow filter and clip-path, which means it re-rasterises every
   card on every frame for as long as the pane is open. It costs nothing
   to give up while the wheel is turning — nobody tracks a nine-second
   shine mid-scroll — and giving it up hands those frames back to the
   geometry, which is the thing the eye IS tracking. It resumes exactly
   where it paused. */
.pva-root.is-scrolling .pva-card { animation-play-state: paused; }

.pva-root.is-scrolling .pva-anim { transition: none !important; }
/* A pooled element on its very first paint has no previous geometry to
   transition FROM, so it would fly in from nowhere. DeepUI.js tags it
   for exactly one frame. */
.pva-root .is-new { transition: none !important; }
.pva-root.is-scrolling .pva-card,
.pva-root.is-scrolling .pva-card__label,
.pva-root.is-scrolling .pva-file,
.pva-root.is-scrolling .pva-file__label { will-change: clip-path, top, left; }

/* The dropsection owns the wheel gesture (DeepUI.js > inDropsection),
   so a drag across it must not start a text selection — a half-selected
   stack mid-scroll looks broken. */
.pva-root .pva-card, .pva-root .pva-file, .pva-root .pva-card__label,
.pva-root .pva-file__label, .pva-root .pva-card__code { user-select: none; }

/* ---- pattern + complement tokens ----
   HEXAGON FIELD, generated rather than traced. The reference's own lattice
   was measured first (232 flat-top hexes, ~20px across) and rebuilt at R=8,
   so the hex is 16px wide with a 13.86px row pitch — 5.1 rows in a 70px
   dropbox, 3.3 in a 46px one, 2.5 in the shallowest. Generating it is what
   makes it SEAMLESS: the tile is a whole number of lattice pitches and every
   hex is drawn wrapped across each edge, so it repeats with no seam at any
   size. Each is drawn at 0.80 of the radius so neighbours never share an
   edge — at full radius they tessellate and dense clusters merge into blobs.

   THE RED IS DERIVED, NOT PICKED. --pva-accent #2ec4a6 sits at hue 168, so
   its exact complement is hue 348. Every red below is that hue at the
   accent's own saturation, varied only in lightness. There is no third hue
   anywhere in this design. */
:root {
  --pva-comp:        #c42e4c;
  --pva-comp-mid:    #d64f6a;
  --pva-comp-bright: #e18194;
  --pva-fx-b0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M328.0 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM279.6 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM255.3 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M473.5 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM352.3 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b2: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M473.5 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM182.6 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM303.8 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b3: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M546.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b4: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M473.5 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b5: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M570.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM497.7 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM497.7 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b6: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M667.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 181.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 153.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b7: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M667.4 209.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 126.0l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b8: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M594.7 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b9: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M837.1 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b10: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M594.7 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b11: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M618.9 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 181.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b12: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M909.8 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b13: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M740.1 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 209.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b14: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M812.8 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b15: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M740.1 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b16: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M812.8 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b17: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M788.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b18: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M982.5 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b19: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M885.6 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b20: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M934.0 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-b21: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M909.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-f0: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M570.4 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-fx-f1: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M982.5 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-field-hex: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 513%22 preserveAspectRatio=%22none%22%3E%3Cpath fill=%22%23fff%22 d=%22M182.6 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM255.3 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM279.6 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM303.8 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM328.0 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM352.3 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM376.5 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM400.8 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM425.0 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM449.2 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM473.5 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM497.7 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM497.7 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM522.0 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM546.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM570.4 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM594.7 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM618.9 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM643.2 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 209.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM667.4 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM691.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM715.9 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM740.1 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 153.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 181.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM764.4 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM788.6 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM812.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM837.1 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 126.0l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 209.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM861.3 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 167.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM885.6 503.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM909.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 279.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 335.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 447.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM934.0 475.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 321.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 461.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM958.3 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 195.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 223.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 251.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 307.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 363.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 391.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM982.5 419.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 181.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 237.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 265.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 293.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 349.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 377.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 405.9l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 433.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 489.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9zM1006.8 517.8l-6.5 11.2h-12.9l-6.5 -11.2l6.5 -11.2h12.9z%22/%3E%3C/svg%3E");
  --pva-art-hex:     url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.40%2013.86L3.20%2019.40L-3.20%2019.40L-6.40%2013.86L-3.20%208.31L3.20%208.31ZM198.40%2013.86L195.20%2019.40L188.80%2019.40L185.60%2013.86L188.80%208.31L195.20%208.31ZM6.40%2027.71L3.20%2033.26L-3.20%2033.26L-6.40%2027.71L-3.20%2022.17L3.20%2022.17ZM198.40%2027.71L195.20%2033.26L188.80%2033.26L185.60%2027.71L188.80%2022.17L195.20%2022.17ZM6.40%2041.57L3.20%2047.11L-3.20%2047.11L-6.40%2041.57L-3.20%2036.03L3.20%2036.03ZM198.40%2041.57L195.20%2047.11L188.80%2047.11L185.60%2041.57L188.80%2036.03L195.20%2036.03ZM6.40%2055.43L3.20%2060.97L-3.20%2060.97L-6.40%2055.43L-3.20%2049.88L3.20%2049.88ZM198.40%2055.43L195.20%2060.97L188.80%2060.97L185.60%2055.43L188.80%2049.88L195.20%2049.88ZM6.40%2069.28L3.20%2074.82L-3.20%2074.82L-6.40%2069.28L-3.20%2063.74L3.20%2063.74ZM198.40%2069.28L195.20%2074.82L188.80%2074.82L185.60%2069.28L188.80%2063.74L195.20%2063.74ZM6.40%20110.85L3.20%20116.39L-3.20%20116.39L-6.40%20110.85L-3.20%20105.31L3.20%20105.31ZM198.40%20110.85L195.20%20116.39L188.80%20116.39L185.60%20110.85L188.80%20105.31L195.20%20105.31ZM18.40%206.93L15.20%2012.47L8.80%2012.47L5.60%206.93L8.80%201.39L15.20%201.39ZM18.40%20145.49L15.20%20151.03L8.80%20151.03L5.60%20145.49L8.80%20139.95L15.20%20139.95ZM18.40%2020.78L15.20%2026.33L8.80%2026.33L5.60%2020.78L8.80%2015.24L15.20%2015.24ZM18.40%2034.64L15.20%2040.18L8.80%2040.18L5.60%2034.64L8.80%2029.10L15.20%2029.10ZM18.40%2048.50L15.20%2054.04L8.80%2054.04L5.60%2048.50L8.80%2042.95L15.20%2042.95ZM18.40%2062.35L15.20%2067.90L8.80%2067.90L5.60%2062.35L8.80%2056.81L15.20%2056.81ZM18.40%2090.07L15.20%2095.61L8.80%2095.61L5.60%2090.07L8.80%2084.52L15.20%2084.52ZM18.40%20117.78L15.20%20123.32L8.80%20123.32L5.60%20117.78L8.80%20112.24L15.20%20112.24ZM18.40%20131.64L15.20%20137.18L8.80%20137.18L5.60%20131.64L8.80%20126.09L15.20%20126.09ZM18.40%20-6.93L15.20%20-1.39L8.80%20-1.39L5.60%20-6.93L8.80%20-12.47L15.20%20-12.47ZM30.40%200.00L27.20%205.54L20.80%205.54L17.60%200.00L20.80%20-5.54L27.20%20-5.54ZM30.40%20138.56L27.20%20144.11L20.80%20144.11L17.60%20138.56L20.80%20133.02L27.20%20133.02ZM30.40%2013.86L27.20%2019.40L20.80%2019.40L17.60%2013.86L20.80%208.31L27.20%208.31ZM30.40%2027.71L27.20%2033.26L20.80%2033.26L17.60%2027.71L20.80%2022.17L27.20%2022.17ZM30.40%2041.57L27.20%2047.11L20.80%2047.11L17.60%2041.57L20.80%2036.03L27.20%2036.03ZM30.40%2096.99L27.20%20102.54L20.80%20102.54L17.60%2096.99L20.80%2091.45L27.20%2091.45ZM30.40%20110.85L27.20%20116.39L20.80%20116.39L17.60%20110.85L20.80%20105.31L27.20%20105.31ZM30.40%20124.71L27.20%20130.25L20.80%20130.25L17.60%20124.71L20.80%20119.17L27.20%20119.17ZM42.40%206.93L39.20%2012.47L32.80%2012.47L29.60%206.93L32.80%201.39L39.20%201.39ZM42.40%20145.49L39.20%20151.03L32.80%20151.03L29.60%20145.49L32.80%20139.95L39.20%20139.95ZM42.40%2020.78L39.20%2026.33L32.80%2026.33L29.60%2020.78L32.80%2015.24L39.20%2015.24ZM42.40%2034.64L39.20%2040.18L32.80%2040.18L29.60%2034.64L32.80%2029.10L39.20%2029.10ZM42.40%2048.50L39.20%2054.04L32.80%2054.04L29.60%2048.50L32.80%2042.95L39.20%2042.95ZM42.40%2076.21L39.20%2081.75L32.80%2081.75L29.60%2076.21L32.80%2070.67L39.20%2070.67ZM42.40%2090.07L39.20%2095.61L32.80%2095.61L29.60%2090.07L32.80%2084.52L39.20%2084.52ZM42.40%20103.92L39.20%20109.47L32.80%20109.47L29.60%20103.92L32.80%2098.38L39.20%2098.38ZM42.40%20117.78L39.20%20123.32L32.80%20123.32L29.60%20117.78L32.80%20112.24L39.20%20112.24ZM42.40%20131.64L39.20%20137.18L32.80%20137.18L29.60%20131.64L32.80%20126.09L39.20%20126.09ZM42.40%20-6.93L39.20%20-1.39L32.80%20-1.39L29.60%20-6.93L32.80%20-12.47L39.20%20-12.47ZM54.40%200.00L51.20%205.54L44.80%205.54L41.60%200.00L44.80%20-5.54L51.20%20-5.54ZM54.40%20138.56L51.20%20144.11L44.80%20144.11L41.60%20138.56L44.80%20133.02L51.20%20133.02ZM54.40%2013.86L51.20%2019.40L44.80%2019.40L41.60%2013.86L44.80%208.31L51.20%208.31ZM54.40%2027.71L51.20%2033.26L44.80%2033.26L41.60%2027.71L44.80%2022.17L51.20%2022.17ZM54.40%2055.43L51.20%2060.97L44.80%2060.97L41.60%2055.43L44.80%2049.88L51.20%2049.88ZM54.40%2069.28L51.20%2074.82L44.80%2074.82L41.60%2069.28L44.80%2063.74L51.20%2063.74ZM54.40%2083.14L51.20%2088.68L44.80%2088.68L41.60%2083.14L44.80%2077.60L51.20%2077.60ZM54.40%2096.99L51.20%20102.54L44.80%20102.54L41.60%2096.99L44.80%2091.45L51.20%2091.45ZM54.40%20110.85L51.20%20116.39L44.80%20116.39L41.60%20110.85L44.80%20105.31L51.20%20105.31ZM54.40%20124.71L51.20%20130.25L44.80%20130.25L41.60%20124.71L44.80%20119.17L51.20%20119.17ZM66.40%2020.78L63.20%2026.33L56.80%2026.33L53.60%2020.78L56.80%2015.24L63.20%2015.24ZM66.40%2048.50L63.20%2054.04L56.80%2054.04L53.60%2048.50L56.80%2042.95L63.20%2042.95ZM66.40%2076.21L63.20%2081.75L56.80%2081.75L53.60%2076.21L56.80%2070.67L63.20%2070.67ZM66.40%2090.07L63.20%2095.61L56.80%2095.61L53.60%2090.07L56.80%2084.52L63.20%2084.52ZM66.40%20103.92L63.20%20109.47L56.80%20109.47L53.60%20103.92L56.80%2098.38L63.20%2098.38ZM66.40%20117.78L63.20%20123.32L56.80%20123.32L53.60%20117.78L56.80%20112.24L63.20%20112.24ZM66.40%20131.64L63.20%20137.18L56.80%20137.18L53.60%20131.64L56.80%20126.09L63.20%20126.09ZM66.40%20-6.93L63.20%20-1.39L56.80%20-1.39L53.60%20-6.93L56.80%20-12.47L63.20%20-12.47ZM78.40%2013.86L75.20%2019.40L68.80%2019.40L65.60%2013.86L68.80%208.31L75.20%208.31ZM78.40%2055.43L75.20%2060.97L68.80%2060.97L65.60%2055.43L68.80%2049.88L75.20%2049.88ZM78.40%2069.28L75.20%2074.82L68.80%2074.82L65.60%2069.28L68.80%2063.74L75.20%2063.74ZM78.40%2083.14L75.20%2088.68L68.80%2088.68L65.60%2083.14L68.80%2077.60L75.20%2077.60ZM78.40%2096.99L75.20%20102.54L68.80%20102.54L65.60%2096.99L68.80%2091.45L75.20%2091.45ZM78.40%20110.85L75.20%20116.39L68.80%20116.39L65.60%20110.85L68.80%20105.31L75.20%20105.31ZM90.40%2034.64L87.20%2040.18L80.80%2040.18L77.60%2034.64L80.80%2029.10L87.20%2029.10ZM90.40%2048.50L87.20%2054.04L80.80%2054.04L77.60%2048.50L80.80%2042.95L87.20%2042.95ZM90.40%2062.35L87.20%2067.90L80.80%2067.90L77.60%2062.35L80.80%2056.81L87.20%2056.81ZM90.40%2076.21L87.20%2081.75L80.80%2081.75L77.60%2076.21L80.80%2070.67L87.20%2070.67ZM90.40%2090.07L87.20%2095.61L80.80%2095.61L77.60%2090.07L80.80%2084.52L87.20%2084.52ZM90.40%20103.92L87.20%20109.47L80.80%20109.47L77.60%20103.92L80.80%2098.38L87.20%2098.38ZM102.40%2041.57L99.20%2047.11L92.80%2047.11L89.60%2041.57L92.80%2036.03L99.20%2036.03ZM102.40%2055.43L99.20%2060.97L92.80%2060.97L89.60%2055.43L92.80%2049.88L99.20%2049.88ZM102.40%2069.28L99.20%2074.82L92.80%2074.82L89.60%2069.28L92.80%2063.74L99.20%2063.74ZM102.40%2083.14L99.20%2088.68L92.80%2088.68L89.60%2083.14L92.80%2077.60L99.20%2077.60ZM102.40%2096.99L99.20%20102.54L92.80%20102.54L89.60%2096.99L92.80%2091.45L99.20%2091.45ZM114.40%2020.78L111.20%2026.33L104.80%2026.33L101.60%2020.78L104.80%2015.24L111.20%2015.24ZM114.40%2034.64L111.20%2040.18L104.80%2040.18L101.60%2034.64L104.80%2029.10L111.20%2029.10ZM114.40%2048.50L111.20%2054.04L104.80%2054.04L101.60%2048.50L104.80%2042.95L111.20%2042.95ZM114.40%2062.35L111.20%2067.90L104.80%2067.90L101.60%2062.35L104.80%2056.81L111.20%2056.81ZM114.40%2076.21L111.20%2081.75L104.80%2081.75L101.60%2076.21L104.80%2070.67L111.20%2070.67ZM126.40%2013.86L123.20%2019.40L116.80%2019.40L113.60%2013.86L116.80%208.31L123.20%208.31ZM126.40%2027.71L123.20%2033.26L116.80%2033.26L113.60%2027.71L116.80%2022.17L123.20%2022.17ZM126.40%2041.57L123.20%2047.11L116.80%2047.11L113.60%2041.57L116.80%2036.03L123.20%2036.03ZM126.40%2055.43L123.20%2060.97L116.80%2060.97L113.60%2055.43L116.80%2049.88L123.20%2049.88ZM126.40%2069.28L123.20%2074.82L116.80%2074.82L113.60%2069.28L116.80%2063.74L123.20%2063.74ZM126.40%20124.71L123.20%20130.25L116.80%20130.25L113.60%20124.71L116.80%20119.17L123.20%20119.17ZM138.40%206.93L135.20%2012.47L128.80%2012.47L125.60%206.93L128.80%201.39L135.20%201.39ZM138.40%20145.49L135.20%20151.03L128.80%20151.03L125.60%20145.49L128.80%20139.95L135.20%20139.95ZM138.40%2020.78L135.20%2026.33L128.80%2026.33L125.60%2020.78L128.80%2015.24L135.20%2015.24ZM138.40%2034.64L135.20%2040.18L128.80%2040.18L125.60%2034.64L128.80%2029.10L135.20%2029.10ZM138.40%2048.50L135.20%2054.04L128.80%2054.04L125.60%2048.50L128.80%2042.95L135.20%2042.95ZM138.40%2062.35L135.20%2067.90L128.80%2067.90L125.60%2062.35L128.80%2056.81L135.20%2056.81ZM138.40%20131.64L135.20%20137.18L128.80%20137.18L125.60%20131.64L128.80%20126.09L135.20%20126.09ZM138.40%20-6.93L135.20%20-1.39L128.80%20-1.39L125.60%20-6.93L128.80%20-12.47L135.20%20-12.47ZM150.40%200.00L147.20%205.54L140.80%205.54L137.60%200.00L140.80%20-5.54L147.20%20-5.54ZM150.40%20138.56L147.20%20144.11L140.80%20144.11L137.60%20138.56L140.80%20133.02L147.20%20133.02ZM150.40%2013.86L147.20%2019.40L140.80%2019.40L137.60%2013.86L140.80%208.31L147.20%208.31ZM150.40%2027.71L147.20%2033.26L140.80%2033.26L137.60%2027.71L140.80%2022.17L147.20%2022.17ZM150.40%2041.57L147.20%2047.11L140.80%2047.11L137.60%2041.57L140.80%2036.03L147.20%2036.03ZM150.40%20110.85L147.20%20116.39L140.80%20116.39L137.60%20110.85L140.80%20105.31L147.20%20105.31ZM150.40%20124.71L147.20%20130.25L140.80%20130.25L137.60%20124.71L140.80%20119.17L147.20%20119.17ZM162.40%206.93L159.20%2012.47L152.80%2012.47L149.60%206.93L152.80%201.39L159.20%201.39ZM162.40%20145.49L159.20%20151.03L152.80%20151.03L149.60%20145.49L152.80%20139.95L159.20%20139.95ZM162.40%2020.78L159.20%2026.33L152.80%2026.33L149.60%2020.78L152.80%2015.24L159.20%2015.24ZM162.40%2048.50L159.20%2054.04L152.80%2054.04L149.60%2048.50L152.80%2042.95L159.20%2042.95ZM162.40%2076.21L159.20%2081.75L152.80%2081.75L149.60%2076.21L152.80%2070.67L159.20%2070.67ZM162.40%20103.92L159.20%20109.47L152.80%20109.47L149.60%20103.92L152.80%2098.38L159.20%2098.38ZM162.40%20117.78L159.20%20123.32L152.80%20123.32L149.60%20117.78L152.80%20112.24L159.20%20112.24ZM162.40%20131.64L159.20%20137.18L152.80%20137.18L149.60%20131.64L152.80%20126.09L159.20%20126.09ZM162.40%20-6.93L159.20%20-1.39L152.80%20-1.39L149.60%20-6.93L152.80%20-12.47L159.20%20-12.47ZM174.40%200.00L171.20%205.54L164.80%205.54L161.60%200.00L164.80%20-5.54L171.20%20-5.54ZM174.40%20138.56L171.20%20144.11L164.80%20144.11L161.60%20138.56L164.80%20133.02L171.20%20133.02ZM174.40%2013.86L171.20%2019.40L164.80%2019.40L161.60%2013.86L164.80%208.31L171.20%208.31ZM174.40%2069.28L171.20%2074.82L164.80%2074.82L161.60%2069.28L164.80%2063.74L171.20%2063.74ZM174.40%2083.14L171.20%2088.68L164.80%2088.68L161.60%2083.14L164.80%2077.60L171.20%2077.60ZM174.40%2096.99L171.20%20102.54L164.80%20102.54L161.60%2096.99L164.80%2091.45L171.20%2091.45ZM174.40%20110.85L171.20%20116.39L164.80%20116.39L161.60%20110.85L164.80%20105.31L171.20%20105.31ZM174.40%20124.71L171.20%20130.25L164.80%20130.25L161.60%20124.71L164.80%20119.17L171.20%20119.17ZM186.40%206.93L183.20%2012.47L176.80%2012.47L173.60%206.93L176.80%201.39L183.20%201.39ZM186.40%20145.49L183.20%20151.03L176.80%20151.03L173.60%20145.49L176.80%20139.95L183.20%20139.95ZM186.40%2020.78L183.20%2026.33L176.80%2026.33L173.60%2020.78L176.80%2015.24L183.20%2015.24ZM186.40%2048.50L183.20%2054.04L176.80%2054.04L173.60%2048.50L176.80%2042.95L183.20%2042.95ZM186.40%2062.35L183.20%2067.90L176.80%2067.90L173.60%2062.35L176.80%2056.81L183.20%2056.81ZM186.40%2076.21L183.20%2081.75L176.80%2081.75L173.60%2076.21L176.80%2070.67L183.20%2070.67ZM186.40%2090.07L183.20%2095.61L176.80%2095.61L173.60%2090.07L176.80%2084.52L183.20%2084.52ZM186.40%20103.92L183.20%20109.47L176.80%20109.47L173.60%20103.92L176.80%2098.38L183.20%2098.38ZM186.40%20117.78L183.20%20123.32L176.80%20123.32L173.60%20117.78L176.80%20112.24L183.20%20112.24ZM186.40%20131.64L183.20%20137.18L176.80%20137.18L173.60%20131.64L176.80%20126.09L183.20%20126.09ZM186.40%20-6.93L183.20%20-1.39L176.80%20-1.39L173.60%20-6.93L176.80%20-12.47L183.20%20-12.47Z%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   HEX FIELD — the large overlay across the open right-hand panel,
   added 2026-08-17 from the marked region.

   It sweeps in from the bottom-right corner and dissolves toward the
   middle of the panel. The dissolve is done in the BACKGROUND rather
   than with a second mask layer: the hex lattice is the only mask, and
   the colour behind it simply runs out to transparent toward the upper
   left, so the field thins hexagon by hexagon instead of being cut by a
   soft edge crossing them. That is what keeps it seamless — there is no
   boundary to see, because there isn't one.

   The glare is a separate unmasked bloom sitting exactly over the
   dissolve, which is what stops the thinning reading as "the pattern
   stopped" and makes it read as light falling off instead.

   z-index 2 puts it above the ambient FX and below everything that
   carries meaning — the watermark at 4, the dropboxes from 130, all
   chrome from 300. It cannot cover, dim or intercept a single readable
   thing; it is wallpaper.
   ============================================================ */
.pva-fx-hexfield {
  position: absolute; z-index: 2; pointer-events: none;
  left: 560px; top: 205px; right: 0; bottom: 82px;   /* stops clear of the status bar */
  /* It never moves and never changes, so it is worth its own compositing
     layer: promoted, the stack scrolling in front of it does not drag three
     masked layers and their bloom through a repaint on every frame. */
  will-change: opacity; contain: paint;

  /* ---- THE DISSOLVE IS IN THE MASK, NOT IN THE COLOUR ----
     Every version before this one thinned the field with an alpha ramp, and
     an alpha ramp dims every hexagon it crosses equally. That is what put a
     visible line across the field: on one side whole bright hexagons, on the
     other the same hexagons going dull, and the eye reads the handover as an
     edge no matter how long the ramp is. Shortening it only sharpened the
     line; lengthening it only made the dull band wider.

     So the fall-off moved out of the colour and into the geometry. This mask
     is not a repeating tile — it is drawn once at the size of the field, and
     each lattice site was kept or dropped by a coin weighted on its distance
     along the measured arc: certain inside r=0.60, thinning on a 1.6 curve,
     nothing past r=1.06. What survives is drawn WHOLE and lit FULL. The field
     therefore gets sparser toward the middle of the workspace without a single
     hexagon ever getting dimmer, ends on scattered complete hexagons rather
     than on a boundary, and has clean black past them. 554 hexagons over 2208
     sites; the arc is the same one measured off the reference (82.4% x 80.9%
     on the element's own bottom-right corner). */
  -webkit-mask-image: var(--pva-field-hex);      mask-image: var(--pva-field-hex);
  -webkit-mask-size: 100% 100%;                  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;                mask-repeat: no-repeat;

  /* Colour now runs at full alpha all the way out — it only says WHICH hue a
     hexagon is, never whether it is there. Green and its complement only, no
     third hue; the middle is not a blend of the two (complements average to
     grey), the lattice simply gets sparser. */
  /* ---- DULL, NOT GONE ----
     The colour ramp is back, and this time it is doing a different job. It
     does NOT end the field — the mask's density dissolve does that, and it is
     what keeps a boundary from ever forming. The ramp only DULLS: full
     strength on the packed mass, falling to a low but non-zero alpha at the
     rim, so the far hexagons read as dim rather than as dying. That distinction
     is the whole reason this works where the earlier ramps did not. A ramp
     that reaches zero draws a line, because on one side of it hexagons are lit
     and on the other they are corpses. A ramp that bottoms out at .18 has no
     such side: every hexagon on screen is visibly there, and the ones that
     leave, leave by not being drawn at all.

     Overall level matched to the reference the user gave — this is wallpaper
     behind a stack, not a subject. Green and its complement only, no third
     hue; the middle is not a blend of the two (complements average to grey). */
  background: radial-gradient(82.4% 80.9% at 100% 100%,
    var(--pva-comp-bright)   0%,
    var(--pva-comp)         20%,
    rgba(196,46,76,.55)     42%,
    rgba(46,196,166,.42)    62%,
    rgba(46,196,166,.26)    82%,
    rgba(46,196,166,.18)   100%);
  opacity: .62;
}

/* the glare — unmasked, a soft light behind the lattice rather than a fade */
.pva-fx-hexfield::after {
  content: ""; position: absolute; inset: -12% -6% -6% -18%; z-index: -1;
  background:
    radial-gradient(46% 50% at 88% 92%, rgba(225,129,148,.30), transparent 72%),
    radial-gradient(42% 46% at 62% 66%, rgba(126,231,204,.13), transparent 74%);
  filter: blur(30px);
}

/* ============================================================
   HEX BAND — the pattern carried on an opened dropbox.

   IT FILLS THE WHOLE .pva-card, edge to edge. That is deliberate and it is
   what fixes hexagons being cut "out of nowhere": the element has no edge of
   its own inside the box, so the ONLY thing that can ever cut a hexagon is
   the dropbox's own clip-path. Where the pattern should stop it stops by
   running out of colour, not by running out of element — an alpha fall-off
   leaves whole, faint hexagons rather than sliced ones.

   The colour ramp is written per dropbox by DeepUI.js in real pixels, keyed
   to that dropbox's own body width, because the card box also contains the
   long dropbar extension: a percentage ramp would put the red end out in the
   tail instead of on the plate.

   Readability holds by stacking, not avoidance — the label is z-index 270
   against the card's ~200, so text always paints over it.
   ============================================================ */
.pva-card__band {
  position: absolute; inset: 0; display: block; pointer-events: none; opacity: 0;
}
.pva-card__band.is-open { opacity: 1; }

/* ---- per-layer hex masks ----
   The lattice is split into eight RANDOM subsets plus a late group and a
   two-hex flicker group. That split is the whole mechanism behind the
   randomness: one mask can only be revealed by one advancing front, and a
   single front is uniform by definition no matter how it is eased. Eight
   fronts crossing the same ground on eight different clocks, over hexes
   scattered randomly between them, dithers the boundary into something that
   reads as hexagons lighting up individually. */
:root {
  --pva-hex-0: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M162.40%20103.92L159.20%20109.47L152.80%20109.47L149.60%20103.92L152.80%2098.38L159.20%2098.38ZM138.40%206.93L135.20%2012.47L128.80%2012.47L125.60%206.93L128.80%201.39L135.20%201.39ZM138.40%20145.49L135.20%20151.03L128.80%20151.03L125.60%20145.49L128.80%20139.95L135.20%20139.95ZM138.40%2062.35L135.20%2067.90L128.80%2067.90L125.60%2062.35L128.80%2056.81L135.20%2056.81ZM90.40%2090.07L87.20%2095.61L80.80%2095.61L77.60%2090.07L80.80%2084.52L87.20%2084.52ZM150.40%20124.71L147.20%20130.25L140.80%20130.25L137.60%20124.71L140.80%20119.17L147.20%20119.17ZM186.40%20131.64L183.20%20137.18L176.80%20137.18L173.60%20131.64L176.80%20126.09L183.20%20126.09ZM186.40%20-6.93L183.20%20-1.39L176.80%20-1.39L173.60%20-6.93L176.80%20-12.47L183.20%20-12.47ZM78.40%2083.14L75.20%2088.68L68.80%2088.68L65.60%2083.14L68.80%2077.60L75.20%2077.60ZM126.40%2027.71L123.20%2033.26L116.80%2033.26L113.60%2027.71L116.80%2022.17L123.20%2022.17ZM18.40%2062.35L15.20%2067.90L8.80%2067.90L5.60%2062.35L8.80%2056.81L15.20%2056.81ZM54.40%20110.85L51.20%20116.39L44.80%20116.39L41.60%20110.85L44.80%20105.31L51.20%20105.31ZM18.40%2048.50L15.20%2054.04L8.80%2054.04L5.60%2048.50L8.80%2042.95L15.20%2042.95ZM186.40%20117.78L183.20%20123.32L176.80%20123.32L173.60%20117.78L176.80%20112.24L183.20%20112.24ZM6.40%20110.85L3.20%20116.39L-3.20%20116.39L-6.40%20110.85L-3.20%20105.31L3.20%20105.31ZM198.40%20110.85L195.20%20116.39L188.80%20116.39L185.60%20110.85L188.80%20105.31L195.20%20105.31Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M114.40%2020.78L111.20%2026.33L104.80%2026.33L101.60%2020.78L104.80%2015.24L111.20%2015.24ZM90.40%2076.21L87.20%2081.75L80.80%2081.75L77.60%2076.21L80.80%2070.67L87.20%2070.67ZM54.40%20124.71L51.20%20130.25L44.80%20130.25L41.60%20124.71L44.80%20119.17L51.20%20119.17ZM66.40%2090.07L63.20%2095.61L56.80%2095.61L53.60%2090.07L56.80%2084.52L63.20%2084.52ZM150.40%2041.57L147.20%2047.11L140.80%2047.11L137.60%2041.57L140.80%2036.03L147.20%2036.03ZM174.40%2096.99L171.20%20102.54L164.80%20102.54L161.60%2096.99L164.80%2091.45L171.20%2091.45ZM114.40%2034.64L111.20%2040.18L104.80%2040.18L101.60%2034.64L104.80%2029.10L111.20%2029.10ZM186.40%2048.50L183.20%2054.04L176.80%2054.04L173.60%2048.50L176.80%2042.95L183.20%2042.95ZM126.40%2013.86L123.20%2019.40L116.80%2019.40L113.60%2013.86L116.80%208.31L123.20%208.31ZM138.40%2034.64L135.20%2040.18L128.80%2040.18L125.60%2034.64L128.80%2029.10L135.20%2029.10ZM102.40%2055.43L99.20%2060.97L92.80%2060.97L89.60%2055.43L92.80%2049.88L99.20%2049.88ZM150.40%2013.86L147.20%2019.40L140.80%2019.40L137.60%2013.86L140.80%208.31L147.20%208.31ZM162.40%2020.78L159.20%2026.33L152.80%2026.33L149.60%2020.78L152.80%2015.24L159.20%2015.24Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.40%2041.57L3.20%2047.11L-3.20%2047.11L-6.40%2041.57L-3.20%2036.03L3.20%2036.03ZM198.40%2041.57L195.20%2047.11L188.80%2047.11L185.60%2041.57L188.80%2036.03L195.20%2036.03ZM66.40%20131.64L63.20%20137.18L56.80%20137.18L53.60%20131.64L56.80%20126.09L63.20%20126.09ZM66.40%20-6.93L63.20%20-1.39L56.80%20-1.39L53.60%20-6.93L56.80%20-12.47L63.20%20-12.47ZM78.40%2096.99L75.20%20102.54L68.80%20102.54L65.60%2096.99L68.80%2091.45L75.20%2091.45ZM162.40%2048.50L159.20%2054.04L152.80%2054.04L149.60%2048.50L152.80%2042.95L159.20%2042.95ZM78.40%2055.43L75.20%2060.97L68.80%2060.97L65.60%2055.43L68.80%2049.88L75.20%2049.88ZM54.40%2083.14L51.20%2088.68L44.80%2088.68L41.60%2083.14L44.80%2077.60L51.20%2077.60ZM174.40%20110.85L171.20%20116.39L164.80%20116.39L161.60%20110.85L164.80%20105.31L171.20%20105.31ZM18.40%20131.64L15.20%20137.18L8.80%20137.18L5.60%20131.64L8.80%20126.09L15.20%20126.09ZM18.40%20-6.93L15.20%20-1.39L8.80%20-1.39L5.60%20-6.93L8.80%20-12.47L15.20%20-12.47ZM126.40%20124.71L123.20%20130.25L116.80%20130.25L113.60%20124.71L116.80%20119.17L123.20%20119.17ZM174.40%2069.28L171.20%2074.82L164.80%2074.82L161.60%2069.28L164.80%2063.74L171.20%2063.74ZM90.40%20103.92L87.20%20109.47L80.80%20109.47L77.60%20103.92L80.80%2098.38L87.20%2098.38ZM30.40%2096.99L27.20%20102.54L20.80%20102.54L17.60%2096.99L20.80%2091.45L27.20%2091.45ZM18.40%2020.78L15.20%2026.33L8.80%2026.33L5.60%2020.78L8.80%2015.24L15.20%2015.24Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-3: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M186.40%2090.07L183.20%2095.61L176.80%2095.61L173.60%2090.07L176.80%2084.52L183.20%2084.52ZM30.40%20110.85L27.20%20116.39L20.80%20116.39L17.60%20110.85L20.80%20105.31L27.20%20105.31ZM78.40%2013.86L75.20%2019.40L68.80%2019.40L65.60%2013.86L68.80%208.31L75.20%208.31ZM66.40%2076.21L63.20%2081.75L56.80%2081.75L53.60%2076.21L56.80%2070.67L63.20%2070.67ZM114.40%2076.21L111.20%2081.75L104.80%2081.75L101.60%2076.21L104.80%2070.67L111.20%2070.67ZM90.40%2034.64L87.20%2040.18L80.80%2040.18L77.60%2034.64L80.80%2029.10L87.20%2029.10ZM42.40%20117.78L39.20%20123.32L32.80%20123.32L29.60%20117.78L32.80%20112.24L39.20%20112.24ZM42.40%2020.78L39.20%2026.33L32.80%2026.33L29.60%2020.78L32.80%2015.24L39.20%2015.24ZM162.40%206.93L159.20%2012.47L152.80%2012.47L149.60%206.93L152.80%201.39L159.20%201.39ZM162.40%20145.49L159.20%20151.03L152.80%20151.03L149.60%20145.49L152.80%20139.95L159.20%20139.95ZM18.40%20117.78L15.20%20123.32L8.80%20123.32L5.60%20117.78L8.80%20112.24L15.20%20112.24ZM126.40%2069.28L123.20%2074.82L116.80%2074.82L113.60%2069.28L116.80%2063.74L123.20%2063.74ZM162.40%2076.21L159.20%2081.75L152.80%2081.75L149.60%2076.21L152.80%2070.67L159.20%2070.67ZM66.40%20103.92L63.20%20109.47L56.80%20109.47L53.60%20103.92L56.80%2098.38L63.20%2098.38Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-4: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M42.40%2048.50L39.20%2054.04L32.80%2054.04L29.60%2048.50L32.80%2042.95L39.20%2042.95ZM174.40%200.00L171.20%205.54L164.80%205.54L161.60%200.00L164.80%20-5.54L171.20%20-5.54ZM174.40%20138.56L171.20%20144.11L164.80%20144.11L161.60%20138.56L164.80%20133.02L171.20%20133.02ZM42.40%20103.92L39.20%20109.47L32.80%20109.47L29.60%20103.92L32.80%2098.38L39.20%2098.38ZM138.40%20131.64L135.20%20137.18L128.80%20137.18L125.60%20131.64L128.80%20126.09L135.20%20126.09ZM138.40%20-6.93L135.20%20-1.39L128.80%20-1.39L125.60%20-6.93L128.80%20-12.47L135.20%20-12.47ZM102.40%2069.28L99.20%2074.82L92.80%2074.82L89.60%2069.28L92.80%2063.74L99.20%2063.74ZM78.40%20110.85L75.20%20116.39L68.80%20116.39L65.60%20110.85L68.80%20105.31L75.20%20105.31ZM150.40%200.00L147.20%205.54L140.80%205.54L137.60%200.00L140.80%20-5.54L147.20%20-5.54ZM150.40%20138.56L147.20%20144.11L140.80%20144.11L137.60%20138.56L140.80%20133.02L147.20%20133.02ZM186.40%2076.21L183.20%2081.75L176.80%2081.75L173.60%2076.21L176.80%2070.67L183.20%2070.67ZM18.40%2090.07L15.20%2095.61L8.80%2095.61L5.60%2090.07L8.80%2084.52L15.20%2084.52ZM102.40%2096.99L99.20%20102.54L92.80%20102.54L89.60%2096.99L92.80%2091.45L99.20%2091.45ZM114.40%2062.35L111.20%2067.90L104.80%2067.90L101.60%2062.35L104.80%2056.81L111.20%2056.81ZM42.40%2076.21L39.20%2081.75L32.80%2081.75L29.60%2076.21L32.80%2070.67L39.20%2070.67ZM6.40%2069.28L3.20%2074.82L-3.20%2074.82L-6.40%2069.28L-3.20%2063.74L3.20%2063.74ZM198.40%2069.28L195.20%2074.82L188.80%2074.82L185.60%2069.28L188.80%2063.74L195.20%2063.74Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-5: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M150.40%20110.85L147.20%20116.39L140.80%20116.39L137.60%20110.85L140.80%20105.31L147.20%20105.31ZM18.40%206.93L15.20%2012.47L8.80%2012.47L5.60%206.93L8.80%201.39L15.20%201.39ZM18.40%20145.49L15.20%20151.03L8.80%20151.03L5.60%20145.49L8.80%20139.95L15.20%20139.95ZM66.40%20117.78L63.20%20123.32L56.80%20123.32L53.60%20117.78L56.80%20112.24L63.20%20112.24ZM186.40%206.93L183.20%2012.47L176.80%2012.47L173.60%206.93L176.80%201.39L183.20%201.39ZM186.40%20145.49L183.20%20151.03L176.80%20151.03L173.60%20145.49L176.80%20139.95L183.20%20139.95ZM42.40%206.93L39.20%2012.47L32.80%2012.47L29.60%206.93L32.80%201.39L39.20%201.39ZM42.40%20145.49L39.20%20151.03L32.80%20151.03L29.60%20145.49L32.80%20139.95L39.20%20139.95ZM126.40%2055.43L123.20%2060.97L116.80%2060.97L113.60%2055.43L116.80%2049.88L123.20%2049.88ZM66.40%2020.78L63.20%2026.33L56.80%2026.33L53.60%2020.78L56.80%2015.24L63.20%2015.24ZM138.40%2048.50L135.20%2054.04L128.80%2054.04L125.60%2048.50L128.80%2042.95L135.20%2042.95ZM42.40%20131.64L39.20%20137.18L32.80%20137.18L29.60%20131.64L32.80%20126.09L39.20%20126.09ZM42.40%20-6.93L39.20%20-1.39L32.80%20-1.39L29.60%20-6.93L32.80%20-12.47L39.20%20-12.47ZM102.40%2083.14L99.20%2088.68L92.80%2088.68L89.60%2083.14L92.80%2077.60L99.20%2077.60ZM174.40%2083.14L171.20%2088.68L164.80%2088.68L161.60%2083.14L164.80%2077.60L171.20%2077.60ZM126.40%2041.57L123.20%2047.11L116.80%2047.11L113.60%2041.57L116.80%2036.03L123.20%2036.03ZM150.40%2027.71L147.20%2033.26L140.80%2033.26L137.60%2027.71L140.80%2022.17L147.20%2022.17Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-6: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M66.40%2048.50L63.20%2054.04L56.80%2054.04L53.60%2048.50L56.80%2042.95L63.20%2042.95ZM78.40%2069.28L75.20%2074.82L68.80%2074.82L65.60%2069.28L68.80%2063.74L75.20%2063.74ZM162.40%20131.64L159.20%20137.18L152.80%20137.18L149.60%20131.64L152.80%20126.09L159.20%20126.09ZM162.40%20-6.93L159.20%20-1.39L152.80%20-1.39L149.60%20-6.93L152.80%20-12.47L159.20%20-12.47ZM138.40%2020.78L135.20%2026.33L128.80%2026.33L125.60%2020.78L128.80%2015.24L135.20%2015.24ZM186.40%2020.78L183.20%2026.33L176.80%2026.33L173.60%2020.78L176.80%2015.24L183.20%2015.24ZM54.40%2013.86L51.20%2019.40L44.80%2019.40L41.60%2013.86L44.80%208.31L51.20%208.31ZM42.40%2090.07L39.20%2095.61L32.80%2095.61L29.60%2090.07L32.80%2084.52L39.20%2084.52ZM162.40%20117.78L159.20%20123.32L152.80%20123.32L149.60%20117.78L152.80%20112.24L159.20%20112.24ZM6.40%2027.71L3.20%2033.26L-3.20%2033.26L-6.40%2027.71L-3.20%2022.17L3.20%2022.17ZM198.40%2027.71L195.20%2033.26L188.80%2033.26L185.60%2027.71L188.80%2022.17L195.20%2022.17ZM54.40%2096.99L51.20%20102.54L44.80%20102.54L41.60%2096.99L44.80%2091.45L51.20%2091.45ZM30.40%20124.71L27.20%20130.25L20.80%20130.25L17.60%20124.71L20.80%20119.17L27.20%20119.17ZM30.40%2027.71L27.20%2033.26L20.80%2033.26L17.60%2027.71L20.80%2022.17L27.20%2022.17ZM174.40%20124.71L171.20%20130.25L164.80%20130.25L161.60%20124.71L164.80%20119.17L171.20%20119.17Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-7: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M30.40%2013.86L27.20%2019.40L20.80%2019.40L17.60%2013.86L20.80%208.31L27.20%208.31ZM54.40%2069.28L51.20%2074.82L44.80%2074.82L41.60%2069.28L44.80%2063.74L51.20%2063.74ZM102.40%2041.57L99.20%2047.11L92.80%2047.11L89.60%2041.57L92.80%2036.03L99.20%2036.03ZM90.40%2048.50L87.20%2054.04L80.80%2054.04L77.60%2048.50L80.80%2042.95L87.20%2042.95ZM90.40%2062.35L87.20%2067.90L80.80%2067.90L77.60%2062.35L80.80%2056.81L87.20%2056.81ZM42.40%2034.64L39.20%2040.18L32.80%2040.18L29.60%2034.64L32.80%2029.10L39.20%2029.10ZM54.40%2055.43L51.20%2060.97L44.80%2060.97L41.60%2055.43L44.80%2049.88L51.20%2049.88ZM54.40%2027.71L51.20%2033.26L44.80%2033.26L41.60%2027.71L44.80%2022.17L51.20%2022.17ZM18.40%2034.64L15.20%2040.18L8.80%2040.18L5.60%2034.64L8.80%2029.10L15.20%2029.10ZM174.40%2013.86L171.20%2019.40L164.80%2019.40L161.60%2013.86L164.80%208.31L171.20%208.31ZM30.40%2041.57L27.20%2047.11L20.80%2047.11L17.60%2041.57L20.80%2036.03L27.20%2036.03ZM114.40%2048.50L111.20%2054.04L104.80%2054.04L101.60%2048.50L104.80%2042.95L111.20%2042.95Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-late:  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.40%2013.86L3.20%2019.40L-3.20%2019.40L-6.40%2013.86L-3.20%208.31L3.20%208.31ZM198.40%2013.86L195.20%2019.40L188.80%2019.40L185.60%2013.86L188.80%208.31L195.20%208.31ZM54.40%200.00L51.20%205.54L44.80%205.54L41.60%200.00L44.80%20-5.54L51.20%20-5.54ZM54.40%20138.56L51.20%20144.11L44.80%20144.11L41.60%20138.56L44.80%20133.02L51.20%20133.02ZM186.40%20103.92L183.20%20109.47L176.80%20109.47L173.60%20103.92L176.80%2098.38L183.20%2098.38ZM186.40%2062.35L183.20%2067.90L176.80%2067.90L173.60%2062.35L176.80%2056.81L183.20%2056.81Z%22%2F%3E%3C%2Fsvg%3E");
  --pva-hex-flick: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20192.00%20138.56%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.40%2055.43L3.20%2060.97L-3.20%2060.97L-6.40%2055.43L-3.20%2049.88L3.20%2049.88ZM198.40%2055.43L195.20%2060.97L188.80%2060.97L185.60%2055.43L188.80%2049.88L195.20%2049.88ZM30.40%200.00L27.20%205.54L20.80%205.54L17.60%200.00L20.80%20-5.54L27.20%20-5.54ZM30.40%20138.56L27.20%20144.11L20.80%20144.11L17.60%20138.56L20.80%20133.02L27.20%20133.02Z%22%2F%3E%3C%2Fsvg%3E");
}

.pva-hexlayer {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-size: 192px 138.6px;  mask-size: 192px 138.6px;
  -webkit-mask-repeat: repeat;       mask-repeat: repeat;
  -webkit-mask-position: 0 50%;      mask-position: 0 50%;
  /* the ramp is written per dropbox by DeepUI.js in real px, keyed to that
     dropbox's own body width, and inherits down to every layer */
  background: var(--band-ramp);
}
.pva-hexlayer--0 { -webkit-mask-image: var(--pva-hex-0); mask-image: var(--pva-hex-0); }
.pva-card__band.is-struck .pva-hexlayer--0 { animation: pva-hex-bloom 1.12s cubic-bezier(.05,.75,.15,1) 0.00s both; }
.pva-hexlayer--1 { -webkit-mask-image: var(--pva-hex-1); mask-image: var(--pva-hex-1); }
.pva-card__band.is-struck .pva-hexlayer--1 { animation: pva-hex-bloom 1.45s cubic-bezier(.05,.75,.15,1) 0.02s both; }
.pva-hexlayer--2 { -webkit-mask-image: var(--pva-hex-2); mask-image: var(--pva-hex-2); }
.pva-card__band.is-struck .pva-hexlayer--2 { animation: pva-hex-bloom 1.85s cubic-bezier(.05,.75,.15,1) 0.05s both; }
.pva-hexlayer--3 { -webkit-mask-image: var(--pva-hex-3); mask-image: var(--pva-hex-3); }
.pva-card__band.is-struck .pva-hexlayer--3 { animation: pva-hex-bloom 1.28s cubic-bezier(.05,.75,.15,1) 0.01s both; }
.pva-hexlayer--4 { -webkit-mask-image: var(--pva-hex-4); mask-image: var(--pva-hex-4); }
.pva-card__band.is-struck .pva-hexlayer--4 { animation: pva-hex-bloom 2.10s cubic-bezier(.05,.75,.15,1) 0.04s both; }
.pva-hexlayer--5 { -webkit-mask-image: var(--pva-hex-5); mask-image: var(--pva-hex-5); }
.pva-card__band.is-struck .pva-hexlayer--5 { animation: pva-hex-bloom 1.35s cubic-bezier(.05,.75,.15,1) 0.03s both; }
.pva-hexlayer--6 { -webkit-mask-image: var(--pva-hex-6); mask-image: var(--pva-hex-6); }
.pva-card__band.is-struck .pva-hexlayer--6 { animation: pva-hex-bloom 1.65s cubic-bezier(.05,.75,.15,1) 0.06s both; }
.pva-hexlayer--7 { -webkit-mask-image: var(--pva-hex-7); mask-image: var(--pva-hex-7); }
.pva-card__band.is-struck .pva-hexlayer--7 { animation: pva-hex-bloom 1.95s cubic-bezier(.05,.75,.15,1) 0.02s both; }

.pva-hexlayer--late  { -webkit-mask-image: var(--pva-hex-late);  mask-image: var(--pva-hex-late); }
.pva-hexlayer--flick { -webkit-mask-image: var(--pva-hex-flick); mask-image: var(--pva-hex-flick); }

/* ---- the settled layer ----
   The eight subsets, the late group and the flicker group are a strict
   PARTITION of the lattice: 130 hexes, every one in exactly one subset,
   none in two. So the moment the bloom is over, those ten layers are
   drawing precisely what ONE layer masked with the whole lattice draws —
   pixel for pixel, same ramp, same mask geometry. The band therefore
   collapses to this single layer as soon as DeepUI.js drops `is-struck`
   (STRIKE_MS), and expands back to ten only while a strike is playing.

   This is not a micro-optimisation. Each layer is a full-plate SVG mask
   sitting inside the card's `filter: drop-shadow(...)`, and a filter
   forces its whole subtree to be re-rasterised every time the card's
   geometry moves — which, during a scroll, is every single frame. With
   twelve dropboxes open that measured a median frame of 417ms; with the
   bands out of the picture, 183ms; with neither bands nor filter, 100ms.
   Frames that long are what the stack shows as blacking in and out and
   as rows going here and there while the wheel turns. Ten layers to one
   buys back the bulk of it and changes nothing on screen. */
.pva-hexlayer--all { -webkit-mask-image: var(--pva-art-hex); mask-image: var(--pva-art-hex); }
.pva-card__band > .pva-hexlayer                 { display: none; }
.pva-card__band > .pva-hexlayer--all            { display: block; }
.pva-card__band.is-struck > .pva-hexlayer       { display: block; }
.pva-card__band.is-struck > .pva-hexlayer--all  { display: none; }

/* a handful that arrive well after the rest have settled */
.pva-card__band.is-struck .pva-hexlayer--late  { animation: pva-hex-late 0.5s ease-out 1.65s both; }
/* and two that simply switch on, off, on — no glitch, no blur, just a lamp
   deciding whether it is on */
.pva-card__band.is-struck .pva-hexlayer--flick { animation: pva-hex-flick 1.5s steps(1, end) 0.95s both; }

/* The bloom front. A clip-path circle is what makes "growing from a point"
   true rather than approximate: hexes join in the order their distance from
   the origin puts them, ring by ring. Eight of these at different delays and
   durations is what stops it reading as one clean sweep. */
/* THE BRANCH. Every layer leaves the SAME point at the SAME moment — the
   delays are 0-60ms, effectively nothing — so the growth reads as one thing
   branching outward rather than as eight things starting in turn, and the
   first hexes are lit within a frame of the click. THE DELAY IS NOT WHERE
   TIME IS ADDED: asked to slow the branching down, the +0.4s goes on every
   front's DURATION, never on its start. Hexes pop the instant the dropbox
   is clicked; what takes longer is the crossing. Durations run 1.12s to
   2.10s on a curve almost vertical at the start and nearly flat at the end,
   so the branch still shoots out and then creeps, each layer halting at its
   own moment. That ragged finish is the randomised halt; the shared origin
   and shared start are what keep it one branch instead of eight. */
@keyframes pva-hex-bloom {
  0%   { opacity: 0; clip-path: circle(8px at 88% 50%); }
  6%   { opacity: 1; clip-path: circle(16px at 88% 50%); }
  100% { opacity: 1; clip-path: circle(175% at 88% 50%); }
}
@keyframes pva-hex-late  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pva-hex-flick {
  0%, 14%  { opacity: 0; }
  15%, 33% { opacity: 1; }
  34%, 51% { opacity: 0; }
  52%, 71% { opacity: 1; }
  72%, 84% { opacity: 0; }
  85%,100% { opacity: 1; }
}

/* Motion is opt-in, carried by .is-struck, which DeepUI.js retoggles
   exactly once — when a dropbox is newly opened. A 60fps scroll repaint
   leaves the class alone and therefore cannot restart anything. The
   rules above carry the resting look on their own, so an element that
   is never struck still renders correctly. */
/* Motion is opt-in per element — DeepUI.js sets `animation` exactly
   once, when a dropbox is newly opened, so a 60fps scroll repaint can
   never restart it. These rules carry only the resting look. */
@media (prefers-reduced-motion: reduce) {
  .pva-card__band, .pva-hexlayer { animation: none !important; }
  }

@media (prefers-reduced-motion: reduce) {
  .pva-root *, .pva-root *::before, .pva-root *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   v2.1 — THE WORKSPACE REVEAL.

   Clicking the empty centre sends the interface off the edges and leaves
   the workspace bare; clicking the green that stays behind brings it in
   again. Everything here is one class on the root, `.is-revealed`, so the
   whole state is reversible by removing it and no element needs to know
   how it got where it is.

   DIRECTIONS come from the user's own annotation: the stack goes LEFT,
   its extensions UP, the search UP, the breadcrumb RIGHT, the status bar
   DOWN. The stack and its extensions are one object and cannot be sent
   two ways — so the stack travels left AND up far enough that the plates
   clear the left edge (widest plate x is 516.5, travel 640) and the
   extensions clear the top (band bottom is y 94, travel 150) in the same
   movement. One transform, both arrows satisfied, nothing detached.

   TIMING is overlapped, not sequential: the dissolve owns 0-1.2s and the
   furniture leaves between 0.4s and 1.2s. See REVEAL_MS / REVEAL_DELAY /
   DISSOLVE_MS in DeepUI.js — the numbers live there and these durations
   mirror them.
   ============================================================ */
.pva-root .pva-layer,
.pva-root .pva-wallgroup,
.pva-root .pva-search,
.pva-root .pva-viewtoggle__sort,
.pva-root .pva-crumbs,
.pva-root .pva-crumbs__hint,
.pva-root .pva-hud__wall--left,
.pva-root .pva-statusbar,
.pva-root .pva-hud__watermark,
.pva-root .pva-hud__rail,
.pva-root .pva-hud__tick,
.pva-root .pva-fx-spot {
  transition: transform .8s cubic-bezier(.65,0,.20,1) .4s, opacity .8s ease .4s;
}
/* .pva-fx-spot is a black blur that darkens the fold BEHIND the stack —
   it belongs to the stack's lighting, not to the workspace's texture, so
   with the stack gone it is a stray smudge in open space. It leaves with
   them, by fading rather than travelling: a shadow sliding off the edge
   would read as an object. */
.is-revealed .pva-fx-spot { opacity: 0; }

/* coming back is the same motion without the dissolve's head start */
.pva-root:not(.is-revealed) .pva-layer,
.pva-root:not(.is-revealed) .pva-wallgroup,
.pva-root:not(.is-revealed) .pva-hud__wall--left,
.pva-root:not(.is-revealed) .pva-search,
.pva-root:not(.is-revealed) .pva-viewtoggle__sort,
.pva-root:not(.is-revealed) .pva-crumbs,
.pva-root:not(.is-revealed) .pva-crumbs__hint,
.pva-root:not(.is-revealed) .pva-statusbar,
.pva-root:not(.is-revealed) .pva-hud__watermark,
.pva-root:not(.is-revealed) .pva-hud__rail,
.pva-root:not(.is-revealed) .pva-hud__tick,
.pva-root:not(.is-revealed) .pva-fx-spot { transition-delay: 0s; }

/* THE LEFT WALL leaves with the stack, on the same transform. It is the
   dropsection's own wall, so with the dropsection gone it has nothing to
   be the edge of — left behind, it was a lit line standing in open space,
   which is what the user flagged as floating even while a sliver of plate
   was still there to anchor it. */
.is-revealed .pva-layer,
.is-revealed .pva-wallgroup,
.is-revealed .pva-hud__wall--left { transform: translate(-640px, -150px); }
.is-revealed .pva-search,
.is-revealed .pva-viewtoggle__sort,
.is-revealed .pva-hud__tick     { transform: translateY(-150px); opacity: 0; }
.is-revealed .pva-crumbs,
.is-revealed .pva-crumbs__hint  { transform: translateX(1180px); opacity: 0; }
.is-revealed .pva-statusbar,
.is-revealed .pva-hud__watermark { transform: translateY(190px); opacity: 0; }
.is-revealed .pva-hud__rail     { transform: translateX(120px); opacity: 0; }

/* nothing off stage may still be clicked or hovered */
.is-revealed .pva-layer { pointer-events: none; }

/* NO HOLD. An earlier pass kept the extension band and a sliver of the
   top dropbox pinned at the top-left — as the workspace's header, and as
   the way back. Scrapped on the user's instruction: the revealed
   workspace is to be clean, with no green left on it. The way back is the
   workspace itself now, so nothing needs to stay on screen to be
   clickable — and the never-detach rule needs no exception any more,
   because the extensions leave with their own dropboxes again. */

/* ---- THE REVERSE DISSOLVE ----
   The strike animation run backwards: hexagons switch themselves off from
   the outer edge inward, at their own scattered moments, until none are
   left.

   IT IS NOT A SHRINKING FRONT, AND THAT MATTERS. The first build animated
   a clip-path circle closing on the field's origin, which is a geometric
   EDGE — it does not remove hexagons, it cuts through whichever ones it
   crosses. The user saw exactly that: hexagons deforming, something black
   creeping over them and taking them away. No easing could fix it, because
   slicing was the mechanism.

   So the order is baked into the masks instead. All 185 hexagons were
   sorted by their real distance from the origin, outermost first, and that
   order was then shuffled locally by up to +/-22 places — enough that no
   ring is ever visible, not so much that direction is lost. The batch
   means run 653px down to 90px with reversals along the way (590, 611 /
   219, 240), which is the "outer to inner, but random here and there" this
   is meant to read as. Because the ramp puts green at the outer end and
   red at the origin, that order is also green first and red last: a lot of
   greens going, then reds beginning to mix in, then the last of the reds.

   Each batch is one layer that simply switches OFF. A hexagon is never
   covered and never cut — it is drawn on one frame and not on the next,
   whole, from where it was. Two hexagons, one from the green half and one
   from the red, blink before they go.
   ============================================================ */
.pva-fx-hexfield__sub { display: none; }
.is-revealed .pva-fx-hexfield > .pva-fx-hexfield__sub {
  display: block; position: absolute; inset: 0;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(82.4% 80.9% at 100% 100%, var(--pva-comp-bright) 0%, var(--pva-comp) 20%, rgba(196,46,76,.55) 42%, rgba(46,196,166,.42) 62%, rgba(46,196,166,.26) 82%, rgba(46,196,166,.18) 100%);
  /* LONGHANDS, DELIBERATELY. The `animation` shorthand resets every
     sub-property it does not mention — including animation-delay — and
     this selector outranks the per-batch rules three classes to one, so
     writing it short here silently zeroed all 22 delays and the field
     went out in one go at 80ms. Measured. Only the parts every layer
     shares are declared here; the delay belongs to the batch. */
  animation-duration: .05s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
/* GOING IN: each batch switches OFF at its own moment, outer edge first. */
.is-revealed .pva-fx-hexfield > .pva-fx-hexfield__sub {
  animation-name: pva-hex-off; animation-delay: var(--t);
}
/* COMING BACK: the same moments, read backwards. `--t` is when a batch
   leaves; `TOTAL - --t` is when it returns — so the batch that went last
   (innermost, the reds) comes back first and the field fills from the
   origin outward. One variable, two directions; the return can never
   drift out of step with the exit because it is derived from it. */
.is-returning .pva-fx-hexfield > .pva-fx-hexfield__sub {
  display: block; position: absolute; inset: 0;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: radial-gradient(82.4% 80.9% at 100% 100%, var(--pva-comp-bright) 0%, var(--pva-comp) 20%, rgba(196,46,76,.55) 42%, rgba(46,196,166,.42) 62%, rgba(46,196,166,.26) 82%, rgba(46,196,166,.18) 100%);
  animation-name: pva-hex-on;
  animation-duration: .05s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-delay: calc(0.76s - var(--t));
}
.is-returning .pva-fx-hexfield { background-image: none; }
@keyframes pva-hex-on { from { opacity: 0; } to { opacity: 1; } }

/* the two lamps blink on the way back too, mirrored the same way */
.is-returning .pva-fx-hexfield > .pva-fx-hexfield__sub--f0,
.is-returning .pva-fx-hexfield > .pva-fx-hexfield__sub--f1 {
  animation-name: pva-hex-blink-on; animation-duration: .30s;
}
@keyframes pva-hex-blink-on {
  0%, 24%  { opacity: 0; }
  25%, 44% { opacity: 1; }
  45%, 66% { opacity: 0; }
  67%, 84% { opacity: 1; }
  85%, 96% { opacity: 0; }
  97%, 100% { opacity: 1; }
}

.pva-fx-hexfield__sub--0 { --t: 0.033s; -webkit-mask-image: var(--pva-fx-b0); mask-image: var(--pva-fx-b0); }
.pva-fx-hexfield__sub--1 { --t: 0.049s; -webkit-mask-image: var(--pva-fx-b1); mask-image: var(--pva-fx-b1); }
.pva-fx-hexfield__sub--2 { --t: 0.068s; -webkit-mask-image: var(--pva-fx-b2); mask-image: var(--pva-fx-b2); }
.pva-fx-hexfield__sub--3 { --t: 0.113s; -webkit-mask-image: var(--pva-fx-b3); mask-image: var(--pva-fx-b3); }
.pva-fx-hexfield__sub--4 { --t: 0.143s; -webkit-mask-image: var(--pva-fx-b4); mask-image: var(--pva-fx-b4); }
.pva-fx-hexfield__sub--5 { --t: 0.171s; -webkit-mask-image: var(--pva-fx-b5); mask-image: var(--pva-fx-b5); }
.pva-fx-hexfield__sub--6 { --t: 0.214s; -webkit-mask-image: var(--pva-fx-b6); mask-image: var(--pva-fx-b6); }
.pva-fx-hexfield__sub--7 { --t: 0.258s; -webkit-mask-image: var(--pva-fx-b7); mask-image: var(--pva-fx-b7); }
.pva-fx-hexfield__sub--8 { --t: 0.267s; -webkit-mask-image: var(--pva-fx-b8); mask-image: var(--pva-fx-b8); }
.pva-fx-hexfield__sub--9 { --t: 0.314s; -webkit-mask-image: var(--pva-fx-b9); mask-image: var(--pva-fx-b9); }
.pva-fx-hexfield__sub--10 { --t: 0.350s; -webkit-mask-image: var(--pva-fx-b10); mask-image: var(--pva-fx-b10); }
.pva-fx-hexfield__sub--11 { --t: 0.363s; -webkit-mask-image: var(--pva-fx-b11); mask-image: var(--pva-fx-b11); }
.pva-fx-hexfield__sub--12 { --t: 0.395s; -webkit-mask-image: var(--pva-fx-b12); mask-image: var(--pva-fx-b12); }
.pva-fx-hexfield__sub--13 { --t: 0.428s; -webkit-mask-image: var(--pva-fx-b13); mask-image: var(--pva-fx-b13); }
.pva-fx-hexfield__sub--14 { --t: 0.467s; -webkit-mask-image: var(--pva-fx-b14); mask-image: var(--pva-fx-b14); }
.pva-fx-hexfield__sub--15 { --t: 0.494s; -webkit-mask-image: var(--pva-fx-b15); mask-image: var(--pva-fx-b15); }
.pva-fx-hexfield__sub--16 { --t: 0.529s; -webkit-mask-image: var(--pva-fx-b16); mask-image: var(--pva-fx-b16); }
.pva-fx-hexfield__sub--17 { --t: 0.577s; -webkit-mask-image: var(--pva-fx-b17); mask-image: var(--pva-fx-b17); }
.pva-fx-hexfield__sub--18 { --t: 0.609s; -webkit-mask-image: var(--pva-fx-b18); mask-image: var(--pva-fx-b18); }
.pva-fx-hexfield__sub--19 { --t: 0.626s; -webkit-mask-image: var(--pva-fx-b19); mask-image: var(--pva-fx-b19); }
.pva-fx-hexfield__sub--20 { --t: 0.666s; -webkit-mask-image: var(--pva-fx-b20); mask-image: var(--pva-fx-b20); }
.pva-fx-hexfield__sub--21 { --t: 0.715s; -webkit-mask-image: var(--pva-fx-b21); mask-image: var(--pva-fx-b21); }
.pva-fx-hexfield__sub--f0 { --t: 0.22s; -webkit-mask-image: var(--pva-fx-f0); mask-image: var(--pva-fx-f0); }
.pva-fx-hexfield__sub--f1 { --t: 0.58s; -webkit-mask-image: var(--pva-fx-f1); mask-image: var(--pva-fx-f1); }
.is-revealed .pva-fx-hexfield > .pva-fx-hexfield__sub--f0,
.is-revealed .pva-fx-hexfield > .pva-fx-hexfield__sub--f1 {
  animation-name: pva-hex-blink; animation-duration: .30s;
}
.is-revealed .pva-fx-hexfield { background-image: none; }
.is-revealed .pva-fx-hexfield::after { opacity: 0; transition: opacity .9s ease; }
/* THE GLOW BEHIND THE FIELD IS MASKED BY THE FIELD'S OWN LATTICE, so while
   the real hexagons are away it shows through as a full set of very dim
   ghost hexagons. Coming back that read as the whole field arriving
   translucent and then jumping to full: the ghosts appear the instant
   `.is-revealed` is dropped, ahead of every batch. Hold the glow at zero
   for the whole return and bring it in only once the last batch has
   landed, so a hexagon's first appearance is at its real brightness —
   nothing is ever on screen at a fraction of itself. */
.is-returning .pva-fx-hexfield::after {
  animation-name: pva-hex-glow-on;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
@keyframes pva-hex-glow-on { 0%, 76% { opacity: 0; } 100% { opacity: 1; } }

/* A hexagon goes out WHOLE. Nothing sweeps across it, nothing covers it:
   its own layer switches off and it is gone from where it was. */
@keyframes pva-hex-off   { from { opacity: 1; } to { opacity: 0; } }
/* ...except two, which think about it first. Hard steps, no blur — a lamp
   deciding, not a glitch. */
@keyframes pva-hex-blink {
  0%, 24%  { opacity: 1; }
  25%, 44% { opacity: 0; }
  45%, 66% { opacity: 1; }
  67%, 84% { opacity: 0; }
  85%, 96% { opacity: 1; }
  97%, 100% { opacity: 0; }
}


@media (prefers-reduced-motion: reduce) {
  .pva-root .pva-layer, .pva-root .pva-wallgroup, .pva-root .pva-search,
  .pva-root .pva-crumbs, .pva-root .pva-statusbar { transition: none !important; }
  .is-revealed .pva-fx-hexfield__sub { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   v2.1 — THE OVERLAY.

   The interface hangs off document.body, positioned over Obsidian's
   workspace, so a live editor can run underneath it. It cannot live
   inside our own DOM: fit() writes transform:scale() to .pva-frame, and
   a transformed element becomes the containing block for every
   position:fixed descendant — a fixed overlay in there would be trapped
   in the frame and scaled with it. DeepUI.js measures the workspace and
   writes left/top/width/height; nothing here assumes a position.

   CLICK-THROUGH is the other half. The overlay covers the editor, so by
   default it must not intercept anything: pointer-events is off on the
   overlay and turned back on only for the interface itself. Revealed,
   the interface gives that up too and every click, drag and selection
   reaches the text underneath — which is why the way back had to become
   a key.
   ============================================================ */
.pva-overlay {
  position: fixed; z-index: 40;
  pointer-events: none;                 /* the editor underneath owns the surface */
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pva-overlay > .pva-root { pointer-events: auto; width: 100%; }
/* off stage: hand the whole surface back to the editor */
.pva-overlay > .pva-root.is-revealed { pointer-events: none; }
/* ...except the frame, which stays drawn around the editor and stays inert */
.pva-overlay > .pva-root.is-revealed .pva-frame { pointer-events: none; }

/* temporary — the key readout. Visible in both states on purpose. */
.pva-keyecho {
  position: fixed; z-index: 99999; right: 18px; bottom: 14px;
  padding: 5px 11px; border: 1px solid rgba(46,196,166,.45);
  background: rgba(6,12,10,.88); color: #7ee7cc; pointer-events: none;
  font: 500 10px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .18em;
  opacity: 0; transition: opacity .18s ease;
}
.pva-keyecho.is-on { opacity: 1; }

/* ============================================================
   A FILE IS OPEN — the interface becomes a window.

   ONLY THE FLOOR STOPS PAINTING. The shell's opaque base is the single
   thing standing between the interface and the live editor behind it, so
   that — and only that — goes transparent. Everything the design draws on
   top of it stays exactly where it was: the grid, the vignette, the spot,
   and the hexagon field. They are the overlay. The file reads through
   them, not instead of them.

   The first version also faded the hexfield out and dimmed the texture,
   on the reasoning that a hex field over live text is unreadable. That
   was the wrong call and the user corrected it: the texture and the
   hexagons are the interface, and the interface is supposed to be over
   the workspace. They leave when you go INTO the workspace — the reveal
   dissolves the hexagons and slides everything else off — and at no
   other time.

   .pva-frame must stay transparent too, not merely lose its shadow: it
   sits behind the screen, so an opaque bezel would paint straight back
   over the file through the transparent screen above it.
   ============================================================ */
.pva-root.is-filed .pva-shell         { background: transparent; }
.pva-root.is-filed .pva-frame         { background: transparent; }
.pva-root.is-filed .pva-frame__screen { background: transparent; box-shadow: inset 0 0 0 1px rgba(46,196,166,.22); }

/* ---- right-click menu ----
   On document.body, not inside the interface: everything under
   .pva-frame is transform-scaled, and a menu built in there would be
   scaled with it and positioned against the frame instead of the
   pointer. */
.pva-menu {
  position: fixed; z-index: 2147483000; pointer-events: auto; min-width: 178px; padding: 5px 0;
  background: rgba(7,13,11,.97); border: 1px solid rgba(46,196,166,.34);
  box-shadow: 0 18px 44px rgba(0,0,0,.62);
  font: 500 10px Archivo, sans-serif; letter-spacing: .18em;
}
.pva-menu__head {
  padding: 7px 14px 8px; color: rgba(233,244,240,.42);
  border-bottom: 1px solid rgba(46,196,166,.16);
  font: 500 9px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .2em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.pva-menu__item { padding: 9px 14px; color: var(--pva-paper); cursor: pointer; white-space: nowrap; pointer-events: auto; }
.pva-menu__item:hover { background: rgba(46,196,166,.16); color: #d6fff0; }

/* The promoted home is marked inside the real path rather than replacing
   it — the trail answers "where does this file live", the mark answers
   "where is the stack rooted". Two different questions, one line. */
.pva-crumb--home {
  color: var(--pva-accent); position: relative;
  padding: 2px 6px; margin: 0 -2px;
  box-shadow: inset 0 0 0 1px rgba(46,196,166,.38);
}
/* UP naming a previous home reads as a way back, not as a level up */
/* ---- the arrow matches the home chip in the trail ----
   Same colour, same border alpha, same absence of a fill — it was
   noticeably brighter than the chip beside it (a full-accent border plus
   a 10% wash against the chip's .38 outline and nothing behind it), so
   the two read as different weights of thing when they are the same
   thing: the accent marking where home is. The face is the trail's own
   mono, not the button's Archivo, so the arrow sits at the chip's weight
   rather than looking bolder than it. */
.pva-crumbs__up {
  min-width: 34px; text-align: center;
  padding: 5px 10px;
  border: 1px solid rgba(46,196,166,.38);
  background: none;
  color: var(--pva-accent);
  font: 500 10px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em;
}
.pva-crumbs__up.is-home {
  border-color: rgba(46,196,166,.38);
  background: none;
  color: var(--pva-accent);
}
.pva-crumbs__up:hover { background: rgba(46,196,166,.12); }
.pva-crumbs__up.is-disabled:hover { background: none; }

/* ---- nothing in the stack ----
   The dropsection's walls, its glow and its tick are the FRAME AROUND a
   column of dropboxes. With no dropboxes they are a lit diagonal and a
   stray vertical standing in open space, which is what an empty filter
   result looked like. They go with the thing they frame. */
.pva-root.is-empty .pva-hud__wall--left,
.pva-root.is-empty .pva-wallgroup,
.pva-root.is-empty .pva-hud__tick { opacity: 0; transition: opacity .28s ease; }
.pva-root.is-empty .pva-empty { opacity: 1; }


/* ---- the vault crumb IS the GALVANIA mark, and the UP arrow beside it ----
   Added 2026-08-19 (v2.1.1). The first breadcrumb segment draws the glyph in
   place of the word "VAULT" — the vault IS Galvania, so the word was labelling
   what the mark already says; same slot, same click, same hover and here
   states (see the chain.forEach in DeepUI.paintChrome). Fill is currentColor,
   so the trail's own hover rule drives it like any other crumb.

   The arrow next to it is an inline SVG for the same reason its size and
   stroke are numbers rather than font-dependent guesses (built once in
   buildFrame). Its GLOW carries state: a two-stop halo when a previous home
   exists to return to, a dim single shadow when there is nowhere to go. The
   border stays at .38 alpha on purpose — it is pitched to match the home
   chip's outline in the trail, and brightening it puts the two out of step
   (see the note above .pva-crumbs__up further up this file). ------------- */
.pva-crumbs__trail .pva-crumb--galv {
  display: inline-flex; align-items: center;
  color: var(--pva-accent);
  filter: drop-shadow(0 0 6px rgba(46,196,166,.45));
  transition: filter .2s ease, color .2s ease;
}
.pva-crumbs__trail .pva-crumb--galv:not(.pva-crumb--here):hover {
  filter: drop-shadow(0 0 11px rgba(46,196,166,.8));
}
.pva-crumbs__trail .pva-crumb--galv.pva-crumb--here {
  color: rgba(233,244,240,.75);
  filter: drop-shadow(0 0 6px rgba(233,244,240,.3));
}
.pva-crumbs__up {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px; min-width: 34px;
  transition: filter .2s ease, background .2s ease, opacity .2s ease;
}
.pva-crumbs__up:not(.is-disabled) {
  filter: drop-shadow(0 0 5px rgba(46,196,166,.9)) drop-shadow(0 0 13px rgba(46,196,166,.5));
}
.pva-crumbs__up:not(.is-disabled):hover {
  filter: drop-shadow(0 0 6px rgba(126,231,204,1)) drop-shadow(0 0 18px rgba(46,196,166,.7));
}
.pva-crumbs__up.is-disabled {
  opacity: .62;
  filter: drop-shadow(0 0 5px rgba(46,196,166,.26));
}

/* ---------- ZEN MODE ----------
   Ctrl+F on any Galvania interface, Esc to leave. Everything hidden here
   is Obsidian's own chrome — a window bar, note tabs, a breadcrumb
   header, an icon ribbon, a word counter. All of it belongs to a text
   editor, and none of it means anything to a board of conversations.

   Scoped to `body.galvania-zen`, which `engine/Zen.js` toggles. The
   class goes on BODY rather than on the note, because most of what has
   to disappear lives outside the note's own leaf and cannot be reached
   from a cssclasses selector. */
body.galvania-zen .titlebar,
body.galvania-zen .workspace-tab-header-container,
body.galvania-zen .view-header,
body.galvania-zen .status-bar,
body.galvania-zen .workspace-ribbon {
  display: none !important;
}

/* Obsidian's find bar opens on Ctrl+F whatever we do — reading-mode find
   lives in the markdown view's own scope, below the layer a command
   hotkey or a capture-phase listener can reach, so there is nothing to
   rebind and nothing to intercept. `Zen.dismissFind()` closes it a beat
   later; this makes sure it is never SEEN even if that fails, because a
   search box sitting over the interface is the whole complaint. */
body.galvania-zen .document-search-container,
body.galvania-zen .document-search {
  display: none !important;
}

/* Obsidian reserves room for the frameless title bar with padding on the
   app container; with the bar gone that padding is a strip of dead
   space at the very top. */
body.galvania-zen .app-container,
body.galvania-zen .horizontal-main-container {
  padding-top: 0 !important;
}

/* The note's own scroller keeps its reading-view margins, which is what
   would otherwise leave the interface floating in a frame of nothing
   after all the chrome above it went away. */
body.galvania-zen .markdown-preview-view,
body.galvania-zen .markdown-preview-sizer {
  padding: 0 !important;
}

/* ---------- THE MODE FLASH ----------
   A mode you entered by accident and cannot name is a trap. This says
   what happened and how to undo it, for two seconds, then leaves. It is
   `pointer-events: none` throughout: it appears over the interface and
   must never intercept a click meant for what is underneath. */
#galvania-zen-flash {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 7px 16px;
  background: linear-gradient(180deg, #153E34, #0A1E19);
  box-shadow:
    inset 0 0 0 1px rgba(79, 224, 176, .45),
    inset 0 1px 0 rgba(160, 245, 205, .25),
    0 14px 34px rgba(0, 0, 0, .7);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  font: 700 9.5px 'JetBrains Mono', monospace;
  letter-spacing: .18em;
  color: #8DE9B6;
  pointer-events: none;
  opacity: 0;
}
#galvania-zen-flash.is-out {
  animation: galvania-zen-flash 2s cubic-bezier(.2, .9, .26, 1) forwards;
}
@keyframes galvania-zen-flash {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  10%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  #galvania-zen-flash.is-out { animation: none; opacity: 1; }
}

/* ---------- FULLSCREEN FILL (2026-10-23, Root v1.1) ----------
   Out of zen the bezel is min(100vh - 150px, 960px): the 150px is room for
   Obsidian's own title bar, tabs and status bar, and that stays exactly as
   it was. In zen that chrome is gone, so the same rule left a dead band
   under the frame. Here the bezel takes the whole viewport minus the
   stage's own top and bottom padding (the same clamp the stage uses), and
   the 960px cap is lifted. Zen only — `body.galvania-zen` is set by
   engine/Zen.js. */
body.galvania-zen .pvr-root .pvr-bezel {
  height: calc(100vh - 2 * clamp(12px, 1.8vw, 30px));
  max-height: none;
  min-height: 0;
}

/* ---------- DEEP UI — FULLSCREEN EXTRA HEIGHT (2026-10-23, Deep v2.1.2) ----------
   `--pva-x` is written by DeepUI.fit(): 0 out of zen, so every rule below
   resolves to the original pixel value. In zen it is the extra design
   height needed to reach the bottom of the screen without distorting the
   design: the frame, shell, both walls and the rail lengthen by it, and
   the status bar moves down by it. Nothing above the status bar moves. */
.pva-root .pva-frame { height: calc(800px + var(--pva-x, 0px)); }
.pva-root .pva-frame__screen { height: calc(772px + var(--pva-x, 0px)); }
.pva-root .pva-shell { height: calc(770px + var(--pva-x, 0px)); }
.pva-root .pva-statusbar { top: calc(696px + var(--pva-x, 0px)); }
.pva-root .pva-hud__wall--left { height: calc(447px + var(--pva-x, 0px)); }
.pva-root .pva-hud__rail { height: calc(440px + var(--pva-x, 0px)); }
.pva-root .pva-hud__wall--right,
.pva-root .pva-hud__wall-glow--right { height: calc(602px + var(--pva-x, 0px)) !important; }

/* ---------- ROOT UI — DRAG TO ARRANGE (2026-10-24) ----------
   Feedback while a tile is dragged over another. Tiles are clip-pathed,
   so borders and shadows would be clipped away. The target brightens
   and leans toward the side the dragged tile will land on. */
.pvr-root .pvr-grid > .is-drop-before { filter: brightness(1.3); transform: translateX(10px); transition: transform .12s ease, filter .12s ease; }
.pvr-root .pvr-grid > .is-drop-after  { filter: brightness(1.3); transform: translateX(-10px); transition: transform .12s ease, filter .12s ease; }

/* ---------- ROOT UI — HOVER GOLD (2026-10-24, per user) ----------
   A complementary gold that comes alive when a tile is hovered. It is
   chosen to sit in the palette's own family: about the same lightness
   as the mint accent #3ee89f, warm where the mint is cool, and deeper
   (#C9A227) on the white skin so it still reads. Two lines and one word:
     - a hairline along the top of the tile draws in from the left;
     - the strip rule beside the barcode fills with gold, left to right,
       just after it;
     - the OPEN / FILE label warms to gold.
   Idle, all of it is invisible, so the tiles look exactly as before. */
.pvr-root { --pvr-gold: #F2D46B; --pvr-gold-deep: #C9A227; --pvr-gold-glow: rgba(242,212,107,.55); }

.pvr-root .pvr-card__spacer { flex:1; }

.pvr-root .pvr-fcard__rule,
.pvr-root .pvr-dcard__rule { position:relative; }

.pvr-root .pvr-glint-rule {
  position:absolute; left:0; top:0; height:1px; width:100%;
  background:linear-gradient(90deg, var(--pvr-gold), rgba(242,212,107,.35) 70%, rgba(242,212,107,0));
  box-shadow:0 0 8px var(--pvr-gold-glow);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .55s cubic-bezier(.22,1,.36,1) .08s;
  pointer-events:none;
}
.pvr-root .pvr-glint-edge {
  position:absolute; z-index:3; top:9px; left:clamp(15px,1.4vw,24px); width:42%; height:1px;
  background:linear-gradient(90deg, var(--pvr-gold), rgba(242,212,107,0));
  box-shadow:0 0 10px var(--pvr-gold-glow);
  transform:scaleX(0); transform-origin:left center; opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .3s ease;
  pointer-events:none;
}
.pvr-root .pvr-dcard .pvr-glint-rule { background:linear-gradient(90deg, var(--pvr-gold-deep), rgba(201,162,39,.3) 70%, rgba(201,162,39,0)); box-shadow:0 0 6px rgba(201,162,39,.45); }
.pvr-root .pvr-dcard .pvr-glint-edge { background:linear-gradient(90deg, var(--pvr-gold-deep), rgba(201,162,39,0)); box-shadow:0 0 8px rgba(201,162,39,.4); }

.pvr-root .pvr-fcard__action,
.pvr-root .pvr-dcard__action { transition:color .35s ease, text-shadow .35s ease; }

.pvr-root .pvr-fcard:hover .pvr-glint-rule,
.pvr-root .pvr-dcard:hover .pvr-glint-rule,
.pvr-root .pvr-fcard:focus-visible .pvr-glint-rule,
.pvr-root .pvr-dcard:focus-visible .pvr-glint-rule { transform:scaleX(1); }
.pvr-root .pvr-fcard:hover .pvr-glint-edge,
.pvr-root .pvr-dcard:hover .pvr-glint-edge,
.pvr-root .pvr-fcard:focus-visible .pvr-glint-edge,
.pvr-root .pvr-dcard:focus-visible .pvr-glint-edge { transform:scaleX(1); opacity:1; }
.pvr-root .pvr-fcard:hover .pvr-fcard__action { color:var(--pvr-gold); text-shadow:0 0 10px var(--pvr-gold-glow); }
.pvr-root .pvr-dcard:hover .pvr-dcard__action { color:var(--pvr-gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .pvr-root .pvr-glint-rule, .pvr-root .pvr-glint-edge { transition:none; }
}

/* ---------- ROOT UI — HIDDEN PANEL (2026-10-24, per user) ----------
   Double-click HIDDEN FOLDERS → this floats over Galvania UI. Translucent
   glass on a dimmed backdrop, in the Root UI's own language: the tile
   chamfer, Unbounded for the title, Plus Jakarta for text, mint accent
   for OPEN, quiet hairline for RESTORE, and the hover gold on rows. It
   lives on document.body, so it is styled outside the .pvr-root scope. */
.pvr-hp {
  position: fixed; inset: 0; z-index: 99980; display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 6, .42); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pvr-hp.is-in { opacity: 1; }
.pvr-hp__card {
  width: min(720px, 88vw); max-height: min(74vh, 680px); display: flex; flex-direction: column;
  padding: 22px 22px 18px; box-sizing: border-box;
  background: linear-gradient(160deg, rgba(20, 48, 39, .78), rgba(6, 16, 12, .82));
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(62, 232, 159, .32), inset 0 1px 0 rgba(234, 255, 244, .14), 0 30px 80px rgba(0, 0, 0, .6);
  clip-path: polygon(0 18px, 18px 0, calc(100% - 64px) 0, calc(100% - 48px) 14px, 100% 14px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transform: translateY(8px) scale(.985); transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.pvr-hp.is-in .pvr-hp__card { transform: none; }
.pvr-hp__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.pvr-hp__title { font: 800 15px/1 'Unbounded', sans-serif; letter-spacing: .14em; color: #eafff4; }
.pvr-hp__count { font: 700 10px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; color: #04140d; background: linear-gradient(160deg, #3ee89f, #127a56); padding: 4px 7px; clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 6px) 100%, 0 100%); }
.pvr-hp__rule { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(62, 232, 159, .5), transparent); }
.pvr-hp__x { cursor: pointer; color: #9db1a7; font-size: 13px; padding: 2px 4px; }
.pvr-hp__x:hover { color: #eafff4; }
.pvr-hp__hint { font: 600 8.5px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; color: #7d938a; margin: 4px 0 14px; }
.pvr-hp__list { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 2px 4px 2px 0; }
.pvr-hp__row {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 10px 10px; cursor: pointer;
  background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pvr-hp__row:hover { background: rgba(62, 232, 159, .09); box-shadow: inset 0 0 0 1px rgba(242, 212, 107, .5); transform: translateY(-2px); }
.pvr-hp__row.is-gone { opacity: .5; cursor: default; }
.pvr-hp__ico { position: relative; width: 52px; height: 40px; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.pvr-hp__ico.is-folder { clip-path: polygon(0 0, 42% 0, 52% 16%, 100% 16%, 100% 100%, 0 100%); background: linear-gradient(160deg, #3ee89f, #127a56); }
.pvr-hp__ico.is-folder::after { content: ""; position: absolute; left: 0; right: 0; top: 30%; bottom: 0; background: linear-gradient(170deg, rgba(234, 255, 244, .22), rgba(0, 0, 0, .12)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.pvr-hp__ico.is-file { width: 38px; height: 46px; clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); background: linear-gradient(160deg, #f2f7f4, #b6c5bd); }
.pvr-hp__ext { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font: 800 7.5px/1 'Unbounded', sans-serif; letter-spacing: .08em; color: #0a2a21; }
.pvr-hp__row:hover .pvr-hp__ico.is-folder { background: linear-gradient(160deg, #F2D46B, #C9A227); }
.pvr-hp__name { max-width: 100%; text-align: center; font: 700 12px/1.2 'Plus Jakarta Sans', sans-serif; color: #eafff4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.pvr-hp__where { max-width: 100%; font: 600 7.5px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .16em; color: #7d938a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.pvr-hp__btn { margin-top: 4px; cursor: pointer; font: 700 7.5px/1 'Unbounded', sans-serif; letter-spacing: .12em; padding: 6px 9px; clip-path: polygon(0 0, 100% 0, 100% 60%, calc(100% - 6px) 100%, 0 100%); }
.pvr-hp__btn.is-restore { color: #9db1a7; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: .55; transition: opacity .2s ease, color .2s ease; }
.pvr-hp__row:hover .pvr-hp__btn.is-restore { opacity: 1; }
.pvr-hp__btn.is-restore:hover { color: #F2D46B; box-shadow: inset 0 0 0 1px rgba(242, 212, 107, .55); }
.pvr-hp__empty { font: 600 9px/1 'Plus Jakarta Sans', sans-serif; letter-spacing: .2em; color: #7d938a; padding: 18px 4px; }
@media (prefers-reduced-motion: reduce) { .pvr-hp, .pvr-hp__card { transition: none; } }

/* ---------- ROOT UI — TILE HEIGHT −25% (2026-10-24, per user) ----------
   The tiles carried about 30% empty face. Every tile on the grid (hero,
   folders, files, HIDDEN FOLDERS) now sits 25% shorter, so the rows stay
   aligned: clamp(200px,18vw,260px) → clamp(150px,13.5vw,195px). */
.pvr-root .pvr-hero__face,
.pvr-root .pvr-fcard__face,
.pvr-root .pvr-dcard__face,
.pvr-root .pvr-intake__face { min-height: clamp(150px, 13.5vw, 195px); }