/* Visual vocabulary · one material and type system for every template (28 Sept).
   Text colour follows its backing, never the category: light glass carries ink; dark glass (dusk) carries white. Lines that cross
   the open scene are light. Attention is clear through frost in every category: the scene sharp through the glass, under a light
   veil so its words stay readable. All classes are prefixed v- so no other stylesheet on the site can reach them. */
@font-face { font-family: 'V Outfit'; src: url(../shared/fonts/Outfit-Light.woff2) format('woff2'); font-weight: 300; }
@font-face { font-family: 'V Outfit'; src: url(../shared/fonts/Outfit-Regular.woff2) format('woff2'); font-weight: 400; }
@font-face { font-family: 'V Outfit'; src: url(../shared/fonts/Outfit-Medium.woff2) format('woff2'); font-weight: 500; }
@font-face { font-family: 'V Corm'; src: url(../shared/fonts/Cormorant-Regular.woff2) format('woff2'); font-weight: 400; }
@font-face { font-family: 'V Corm'; src: url(../shared/fonts/Cormorant-Medium.woff2) format('woff2'); font-weight: 500; }

.v-stage { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; overflow: hidden; transform-origin: 0 0; background: #1c1a2c;
  font-family: 'V Outfit', -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  --ease: cubic-bezier(.45,0,.2,1);
  --tx: #2f2c45; --tx2: #57536e; --th: #1f1c33; --rule: rgba(35,33,60,.26); --ink: rgba(47,44,69,.42);
  --g: linear-gradient(160deg, rgba(247,246,255,.64), rgba(241,240,255,.44) 55%, rgba(247,246,255,.54)); --gblur: blur(22px) saturate(1.2);
  --grim: rgba(255,255,255,.78); --glit: linear-gradient(160deg, rgba(250,249,255,.8), rgba(246,245,255,.64)); --veil: rgba(248,247,255,.5);
  --tray: rgba(246,245,255,.2); --line: rgba(255,255,255,.72); --lineq: rgba(255,255,255,.3); }
.v-stage[data-mat="quiet"] { --g: rgba(246,245,255,.52); }
.v-stage[data-mat="plain"] { --g: rgba(248,248,252,.96); --gblur: none; --glit: #fff; --tray: rgba(248,248,252,.5); }
.v-stage[data-scene="dusk"] { --tx: #ecebf7; --tx2: #c4c1da; --th: #fff; --rule: rgba(255,255,255,.34); --ink: rgba(236,234,250,.5);
  --g: linear-gradient(160deg, rgba(64,58,116,.5), rgba(34,30,68,.48) 55%, rgba(52,46,98,.5)); --grim: rgba(226,230,255,.42);
  --glit: linear-gradient(160deg, rgba(86,80,146,.62), rgba(52,46,98,.6)); --veil: rgba(30,26,60,.42); --tray: rgba(34,30,66,.24); }
/* two experience treatments (David): reading, dark text on denser glass, for ordinary thinking; exploring, white text on lighter
   transparent glass, for visual exploration and walkthroughs. The same ideas can move between them; meaning does not change. */
.v-stage[data-treat="explore"] { --g: linear-gradient(160deg, rgba(92,84,168,.26), rgba(70,62,138,.3)); --gblur: blur(24px) saturate(1.3); --grim: rgba(255,255,255,.62); --glit: rgba(255,255,255,.3);
  --tx: #fff; --tx2: rgba(255,255,255,.86); --th: #fff; --rule: rgba(255,255,255,.44); --veil: rgba(44,38,98,.34); --tray: rgba(255,255,255,.07); }
.v-stage[data-treat="explore"][data-scene="dusk"] { --g: rgba(34,30,66,.3); --glit: rgba(60,54,110,.44); }
.v-stage[data-treat="explore"] .v-html { text-shadow: 0 1px 10px rgba(20,15,50,.45); }
.v-stage[data-scene="dusk"][data-mat="plain"] { --g: rgba(38,34,70,.96); --glit: rgba(58,52,100,1); }
.v-bg { position: absolute; inset: 0; background: #c9c6e6 url(../playground/assets/home-scene.webp) -79.5px 0 / 1599px 900px no-repeat; }
.v-stage[data-scene="dusk"] .v-bg, .v-stage[data-scene="dusk"] .v-clear::before { filter: brightness(.42) saturate(.9); }
.v-stage canvas, .v-stage svg.v-layer { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.v-html { position: absolute; inset: 0; }
.v-stage, .v-stage * { box-sizing: border-box; }

/* ---------- type: one scale for every category ---------- */
.v-k { display: block; font: 400 12.5px/1.3 'V Outfit'; letter-spacing: .035em; color: var(--tx2); }
.v-h1 { font: 500 38px/1.14 'V Corm'; letter-spacing: -.01em; color: var(--th); }
.v-h2 { font: 500 28px/1.16 'V Corm'; letter-spacing: -.006em; color: var(--th); }
.v-h3 { font: 500 23px/1.18 'V Corm'; color: var(--th); }
.v-h4 { font: 500 20px/1.2 'V Corm'; color: var(--th); }
.v-b { font: 300 19px/1.62 'V Outfit'; color: var(--tx); text-wrap: pretty; }
.v-bs { font: 300 16.5px/1.52 'V Outfit'; color: var(--tx); text-wrap: pretty; }
.v-bx { font: 300 15px/1.45 'V Outfit'; color: var(--tx); }
.v-q { margin-top: 10px; padding-left: 11px; border-left: 1.5px solid var(--rule); font: 400 14.5px/1.45 'V Outfit'; color: var(--tx2); }
/* words that sit on the open scene (beneath droplets, along an axis) are white in every treatment: colour follows backing */
.v-open, .v-open * { color: #fff !important; text-shadow: 0 1px 10px rgba(20,15,50,.55); }
.v-src { margin-top: 10px; display: flex; gap: 7px; font: 400 13.5px/1.4 'V Outfit'; color: var(--tx2); }
.v-src b { font-weight: 500; color: var(--tx); }
.v-src svg { flex: none; width: 15px; height: 15px; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.v-standing { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 10px; font: 400 12.5px 'V Outfit'; letter-spacing: .03em; color: var(--tx); box-shadow: inset 0 0 0 1px var(--rule); }
.v-standing.decided { background: var(--glit); box-shadow: inset 0 0 0 1.2px var(--grim); }

/* ---------- glass: one family. g = a region of content; pane = one idea in a diagram; pill = a small label; tray = a group's ground */
.v-g, .v-pane, .v-pill, .v-tray { position: absolute; color: var(--tx); overflow: hidden; }
.v-g { border-radius: 26px; background: var(--g); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur);
  box-shadow: inset 0 0 0 1.2px var(--grim), inset 0 12px 26px rgba(255,255,255,.16), 0 26px 50px -30px rgba(20,15,50,.45); }
.v-pane { border-radius: 18px; background: var(--g); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur); padding: 12px 18px;
  box-shadow: inset 0 0 0 1.2px var(--grim), 0 20px 40px -26px rgba(20,15,50,.45); transition: opacity 600ms var(--ease), box-shadow 600ms var(--ease); }
.v-pill { border-radius: 14px; padding: 4px 11px 5px; font: 400 13.5px/1.3 'V Outfit'; white-space: nowrap; background: var(--g); backdrop-filter: var(--gblur); -webkit-backdrop-filter: var(--gblur);
  box-shadow: inset 0 0 0 1px var(--grim); }
.v-pill.tent { font-style: italic; }
.v-tray { border-radius: 34px; background: var(--tray); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.v-g > *, .v-pane > *, .v-pill > * { position: relative; z-index: 1; }   /* words above the clear state's scene and veil */
/* attention, the same in every category */
.v-clear::before { content: ""; position: absolute; inset: 0; background: url(../playground/assets/home-scene.webp) no-repeat; background-size: 1599px 900px; background-position: var(--cx) var(--cy); }
.v-clear::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.v-clear { box-shadow: inset 0 0 0 1.8px rgba(255,255,255,.96), 0 0 42px rgba(255,255,255,.28), 0 26px 50px -26px rgba(20,15,50,.55) !important; }
.v-stage[data-treat="explore"] .v-clear { box-shadow: inset 0 0 0 2.2px #fff, 0 0 0 1px rgba(255,255,255,.35), 0 0 64px rgba(255,255,255,.34), 0 30px 56px -26px rgba(20,15,50,.6) !important; }
.v-lit { background: var(--glit); box-shadow: inset 0 0 0 1.6px rgba(255,255,255,.92), 0 20px 40px -24px rgba(20,15,50,.5); }
.v-qt { opacity: .42; }
.v-cell.v-qt { opacity: .58; }
/* resting: a diagram's other parts while one is open, quieter but still readable, so context is kept */
.v-rest { opacity: .66; }
.v-stage svg .v-ln { fill: none; stroke: var(--line); stroke-width: 1.6; filter: drop-shadow(0 1px 3px rgba(20,15,50,.25)); }
.v-stage svg .v-ln.dash { stroke-dasharray: 5 6; }
.v-stage svg .v-ln.lit { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(255,255,255,.7)); }
.v-stage svg .v-ln.qt { stroke: var(--lineq); }
.v-stage svg .v-rib { fill: rgba(255,255,255,.34); }
.v-stage svg .v-rib.lit { fill: rgba(255,255,255,.86); filter: drop-shadow(0 0 5px rgba(255,255,255,.6)); }
.v-stage svg .v-rib.qt { fill: rgba(255,255,255,.14); }
.v-stage svg .v-ink { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.v-stage svg .v-arrow { fill: var(--line); }

/* ---------- W18 at the bottom: the orb on the water's horizon, contextual actions beneath ---------- */
.v-orb { position: absolute; left: 703px; top: 775px; width: 34px; height: 34px; border-radius: 17px;
  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.7), rgba(255,255,255,.16) 46%, rgba(255,255,255,.08) 70%, rgba(255,255,255,.3));
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.8), 0 8px 20px -8px rgba(20,15,50,.45); }
.v-orb.typing { left: 490px; top: 769px; width: 460px; height: 46px; border-radius: 23px; background: rgba(255,255,255,.2); color: rgba(255,255,255,.92); font: 400 15.5px/46px 'V Outfit'; padding-left: 18px; }
.v-acts { position: absolute; left: 0; right: 0; top: 825px; display: flex; gap: 10px; justify-content: center; }
.v-ua { height: 32px; padding: 0 15px; border-radius: 16px; font: 400 14px/32px 'V Outfit'; color: #fff; text-shadow: 0 1px 8px rgba(20,15,50,.4); white-space: nowrap;
  background: linear-gradient(165deg, rgba(255,255,255,.26), rgba(255,255,255,.12)); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 8px 18px -10px rgba(20,15,50,.45); }
/* walkthrough controls: where you are is text, not a button; a control that can't act is quiet */
.v-ua-count { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: rgba(255,255,255,.9); }
.v-ua-dim { opacity: .4; }
.v-ua[data-go] { cursor: pointer; }