/* Vision page (2026-10-30): borrows ECS's hero band (ecs-mono.css .mx-*) and sx/gm sections (rx.css). This file holds the hero
   image card and the three HTML demos (vision.js steps them): Vision Library intake, Opportunities, meeting notes to PRD.
   Each demo is drawn on a 1120x630 stage that vision.js scales to the card (--k); data-s is the current step. */
.vx-card { padding: clamp(20px, 4vw, 56px); }
.vx-card :is(img, video) { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
.vx-demo .gm-media { aspect-ratio: 16 / 9; }
body.mono .vx-demo .gm-media { background: radial-gradient(120% 90% at 50% 110%, #2a2d33 0, #1a1b1e 55%, #111214 100%); }
.gm-media.vx-vid { display: grid; place-items: center; padding: 5% 7%; }
.gm-media.vx-vid video { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.8); }

/* ---------- stage + window chrome ---------- */
.vd { position: absolute; inset: 0; overflow: hidden; }
.vd-stage { position: absolute; left: 0; top: 0; width: 1120px; height: 630px; transform: scale(var(--k, 1)); transform-origin: 0 0;
  font-family: "Google Sans", Roboto, Arial, sans-serif; color: #1f1f1f; }
.vd-win { position: absolute; left: 70px; top: 48px; right: 70px; bottom: 48px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4); }
.vd-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f1f3f4; border-bottom: 1px solid #e1e3e1; font-size: 13px; }
.vd-bar i { width: 11px; height: 11px; border-radius: 50%; background: #dadce0; }
.vd-bar b { margin-left: 10px; font-weight: 500; color: #444746; }
.vd-body { flex: 1; min-height: 0; display: flex; }
.vd * { box-sizing: border-box; }
/* the demos are light app windows: point the page's dark-theme ink tokens (mono.css / ecs-mono.css type rules) at dark inks inside them */
.vd { --m-ink: #1f1f1f; --m-ink-2: #3c4043; --m-ink-3: #5f6368; --ink: #1f1f1f; --ink-2: #3c4043; --muted: #5f6368; color: #1f1f1f; }
.vd ul { margin: 0; padding: 0; list-style: none; }
.vd p, .vd li, .vd h5 { color: inherit; }
.vp-k { margin: 0 0 12px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: #5f6368 !important; }
.vl-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.vl-ic.pdf { background: #c5221f; } .vl-ic.img { background: #1a73e8; } .vl-ic.mov { background: #7b3fe4; } .vl-ic.doc { background: #3c4043; }

/* ---------- 1. Vision Library intake ---------- */
.vl-side { flex: none; width: 190px; padding: 16px 10px; background: #f8f9fa; border-right: 1px solid #e8eaed; font-size: 14px; }
.vl-side li { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 999px; color: #444746; }
.vl-side li.on { background: #d3e3fd; color: #041e49; font-weight: 500; }
.vl-n { font-style: normal; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: #0b57d0; color: #fff; font-size: 12px; text-align: center; line-height: 20px; transition: opacity .3s; }
.vl-main { position: relative; flex: 1; padding: 22px 26px; }
.vl-hd { display: flex; align-items: baseline; justify-content: space-between; font-size: 20px; }
.vl-hd b { font-weight: 500; }
.vl-count { font-size: 14px; color: #5f6368; }
.vl-count em { font-style: normal; font-weight: 500; color: #1f1f1f; }
.vl-count .b, .vd-lib[data-s="6"] .vl-count .a { display: none; }
.vd-lib[data-s="6"] .vl-count .b { display: inline; }
.vl-drop { display: grid; place-items: center; height: 110px; margin-top: 18px; border: 2px dashed #c4c7c5; border-radius: 14px; font-size: 15px; color: #5f6368;
  transition: border-color .3s, background .3s, height .5s, margin .5s, opacity .4s; }
.vd-lib[data-s="1"] .vl-drop { border-color: #0b57d0; background: #e8f0fe; color: #0b57d0; }
.vd-lib:not([data-s="0"]):not([data-s="1"]) .vl-drop { height: 0; margin-top: 0; opacity: 0; border-width: 0; }
.vl-rows { margin-top: 18px !important; display: grid; gap: 10px; }
.vl-rows li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #e1e3e1; border-radius: 14px; background: #fff;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s cubic-bezier(.2,.8,.2,1); }
.vl-rows li:nth-child(2) { transition-delay: .08s; } .vl-rows li:nth-child(3) { transition-delay: .16s; }
.vd-lib:is([data-s="2"], [data-s="3"], [data-s="4"], [data-s="5"]) .vl-rows li { opacity: 1; transform: none; }
.vd-lib[data-s="6"] .vl-rows li { opacity: 0; transform: translateX(40px); }
.vl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vl-t b { font-size: 15px; font-weight: 500; }
.vl-t small { position: relative; height: 18px; font-size: 13px; color: #5f6368; }
.vl-t em { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; opacity: 0; transition: opacity .3s; }
.vd-lib[data-s="2"] .s1, .vd-lib[data-s="3"] .s2, .vd-lib:is([data-s="4"], [data-s="5"], [data-s="6"]) .s3 { opacity: 1; }
.flag { font-style: normal; padding: 1px 8px; border-radius: 999px; background: #fce8b2; color: #7a4a00; }
.vl-ok { flex: none; height: 32px; padding: 0 16px; border-radius: 999px; border: 1px solid #c4c7c5; font-size: 13px; font-weight: 500; line-height: 30px; color: #0b57d0;
  opacity: .35; transition: opacity .3s, background .25s, color .25s; }
.vd-lib:is([data-s="4"], [data-s="5"]) .vl-ok { opacity: 1; }
.vd-lib[data-s="5"] .vl-ok { background: #0b57d0; border-color: #0b57d0; color: #fff; }
.vd-lib[data-s="6"] .vl-n { opacity: 0; }
.vl-toast { position: absolute; left: 50%; bottom: 22px; display: flex; gap: 18px; padding: 12px 18px; border-radius: 10px; background: #303134; color: #e8eaed;
  font-size: 14px; transform: translate(-50%, 20px); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.vl-toast u { text-decoration: none; color: #a8c7fa; font-weight: 500; }
.vd-lib[data-s="6"] .vl-toast { opacity: 1; transform: translate(-50%, 0); }
.vl-file { position: absolute; top: -130px; display: grid; place-items: center; width: 64px; height: 80px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: top .8s cubic-bezier(.3,.7,.2,1), opacity .3s, transform .8s; }
.vl-file.f1 { left: 520px; background: #c5221f; transform: rotate(-8deg); } .vl-file.f2 { left: 610px; background: #1a73e8; transition-delay: .12s; transform: rotate(5deg); }
.vl-file.f3 { left: 700px; background: #7b3fe4; transition-delay: .24s; transform: rotate(-3deg); }
.vd-lib[data-s="1"] .vl-file { top: 172px; transform: none; }
.vd-lib:not([data-s="0"]):not([data-s="1"]) .vl-file { top: 172px; opacity: 0; transition: opacity .25s; }

/* ---------- 2. Opportunities dashboard (2026-10-30), after the Opportunities view in the product experience map work:
   header + View all, Top opportunities gallery (featured + four, type colour, Reviewed/Auto, recommendation, source, impact/effort
   bars), a bento row (by product area, Help the tool learn, Recently learned), then the featured one opens its derivation. ---------- */
.od { position: relative; flex-direction: column; gap: 8px; padding: 12px 18px; background: #f8f9fa; }
.od-hd { display: flex; align-items: flex-end; justify-content: space-between; }
.od-hd > span { display: flex; flex-direction: column; } .od-hd b { font-size: 19px; font-weight: 500; } .od-hd small { font-size: 11.5px; color: #5f6368; }
.od-hd em { font-style: normal; font-size: 12px; font-weight: 500; color: #1a73e8; }
.od-sec { background: #fff; border: 1px solid #e8eaed; border-radius: 12px; padding: 10px 12px; }
.od-k { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #202124 !important; } .od-k small { font-weight: 500; color: #80868b; }
.od-gal { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
.og { --c: #1a73e8; display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 10px; border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 7%, #fff); opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.og.feat { grid-row: span 2; }
.og-h { display: flex; gap: 6px; align-items: center; }
.og-ty { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.og-bd { font-size: 9.5px; font-weight: 500; padding: 2px 6px; border-radius: 999px; }
.og-bd.rv { background: #e6f4ea; color: #0d652d; } .og-bd.au { background: #f1f3f4; color: #5f6368; border: 1px dashed #c4c7c5; }
.og-t { font-size: 12.5px; font-weight: 500; line-height: 1.3; } .og.feat .og-t { font-size: 14px; }
.og p { margin: 0; font-size: 10.5px; line-height: 1.4; } .og-ev { color: #3c4043 !important; }
.og-rec { color: #5f6368 !important; } .og-rec::before { content: "→ "; color: var(--c); }
.og-f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 9.5px; color: #5f6368; }
.og-ie { display: flex; align-items: center; gap: 3px; } .og-ie small { font-size: 9px; color: #80868b; margin-left: 3px; }
.og-bars { display: flex; gap: 1.5px; } .og-bars i { width: 5px; height: 8px; border-radius: 1px; background: #e1e3e1; }
.og-bars i.on { background: #1a73e8; } .og-bars.e i.on { background: #80868b; }
.od-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; min-height: 0; }
.od-s { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .55s cubic-bezier(.2,.8,.2,1); }
.oa li { display: grid; gap: 2px; margin-bottom: 4px; font-size: 11px; }
.oa-t { display: flex; justify-content: space-between; } .oa-t b { font-weight: 600; }
.oa-bar { display: flex; height: 6px; border-radius: 3px; background: #f1f3f4; overflow: hidden; }
.oa-bar .rv, .oa-key .rv { background: #1a73e8; } .oa-bar .au, .oa-key .au { background: #a8c7fa; }
.oa-key { margin: 2px 0 0; display: flex; align-items: center; gap: 4px; font-size: 9.5px; color: #5f6368 !important; } .oa-key i { width: 8px; height: 8px; border-radius: 2px; margin-left: 4px; }
.ogp li { display: flex; gap: 7px; margin-bottom: 7px; } .ogp i { flex: none; width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #fbbc04; }
.ogp span { display: flex; flex-direction: column; font-size: 10px; line-height: 1.35; color: #5f6368; } .ogp b { font-size: 11px; font-weight: 500; color: #202124; }
.olg li { display: flex; gap: 8px; margin-bottom: 6px; font-size: 10.5px; line-height: 1.35; color: #3c4043 !important; } .olg time { flex: none; width: 38px; font-weight: 600; color: #1a73e8; }
.vd-gap[data-s="7"] .og.c0, .vd-gap[data-s="8"] .og.c0, .vd-gap[data-s="9"] .og.c0 { box-shadow: 0 0 0 2px #1a73e8, 0 8px 22px rgba(26,115,232,.18); }
.od-modal { position: absolute; right: 22px; top: 54px; width: 380px; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06); opacity: 0; transform: translateX(16px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.od-modal > b { font-size: 16px; font-weight: 500; margin: 4px 0 2px; } .od-modal .og-ty { align-self: flex-start; }
.od-modal p { margin: 0; font-size: 11.5px; line-height: 1.45; color: #3c4043 !important; }
.od-modal .od-mk { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5f6368 !important; }
.od-src, .od-sc { display: flex; flex-wrap: wrap; gap: 5px; } .od-src span, .od-sc span { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: #e8f0fe; color: #174ea6; }
.od-sc span { background: #f1f3f4; color: #3c4043; } .od-sc .qw { background: #0d652d; color: #fff; }
.vd-gap:is([data-s="8"], [data-s="9"]) .od-modal { opacity: 1; transform: none; }

/* ---------- 3. Meeting notes to PRD (2026-10-30: mimics the Training Schedule Request PRD, cleaned of names and quotes) ----------
   left: the two sources and Draft PRD; right: the one-page PRD in the TSR artifact's layout (date, title, labels, concept figure,
   What's changing, P0/P1 requirements, blue call chips + amber board chips, quote toast). The page scrolls as it fills (--y). */
.vt { position: relative; }
.vt-src { flex: none; width: 250px; padding: 20px 18px; background: #f8f9fa; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; gap: 10px; }
.vt-s { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #e1e3e1; }
.vt-s .vl-ic { width: 34px; height: 34px; font-size: 9.5px; }
.vt-s > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.vt-s b { font-size: 13px; font-weight: 500; } .vt-s small { font-size: 11px; color: #5f6368; line-height: 1.35; }
.vt-go { align-self: flex-start; margin-top: 6px; height: 36px; padding: 0 18px; border-radius: 999px; background: #1a73e8; color: #fff; font-size: 13.5px; font-weight: 500; line-height: 36px;
  transition: transform .15s, box-shadow .3s; }
.vd-prd.go .vt-go { transform: scale(.94); box-shadow: 0 0 0 6px rgba(26,115,232,.2); }
.vt-note { margin: auto 0 0; font-size: 11.5px; line-height: 1.4; color: #5f6368 !important; }
.vt-page { flex: 1; min-width: 0; overflow: hidden; background: #fff; }
.vt-doc { padding: 0 44px 40px; transform: translateY(var(--y, 0)); transition: transform 1s cubic-bezier(.4,0,.2,1); font-family: "Google Sans", Roboto, Arial, sans-serif; color: #202124; }
.vd-prd.y1 .vt-doc { --y: -250px; }
.vd-prd.y2 .vt-doc { --y: -390px; }
.vt-top { display: flex; align-items: center; gap: 12px; height: 46px; margin: 0 -44px 0; padding: 0 44px; border-bottom: 1px solid #dadce0; font-size: 12.5px; color: #5f6368; }
.vt-top b { font-size: 14px; font-weight: 500; color: #202124; } .vt-top em { margin-left: auto; font-style: normal; }
.vt-b { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.vt-date { margin: 16px 0 0; font-size: 12px; color: #5f6368 !important; }
.vt-doc h5 { margin: 4px 0 0; font: 400 24px/1.25 "Google Sans", Roboto, Arial, sans-serif; color: #202124; }
.vt-lab { display: flex; gap: 6px; margin: 10px 0 0; }
.vt-lab span { font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 999px; border: 1px solid #dadce0; color: #5f6368; }
.vt-lab span.due { border-color: transparent; background: #fef7e0; color: #b06000; }
.vt-intro { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: #202124 !important; }
.vt-shot { margin-top: 14px; border: 1px solid #dadce0; border-radius: 8px; overflow: hidden; }
.vt-sbar { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: #f1f3f4; font: 400 10.5px/1.2 "Roboto Mono", ui-monospace, monospace; color: #5f6368; }
.vt-sbar i { width: 7px; height: 7px; border-radius: 50%; background: #dadce0; }
.vt-sbody { padding: 12px; display: grid; gap: 8px; font-size: 12px; }
.vt-h { font-size: 13px; font-weight: 500; }
.vt-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #dadce0; border-radius: 8px; }
.vt-opt > span:first-child { display: flex; flex-direction: column; gap: 2px; } .vt-opt b { font-weight: 500; }
.vt-opt em { font-style: normal; font-size: 10.5px; color: #5f6368; } .vt-opt em.open { color: #137333; }
.vt-opt.new { border-color: #1a73e8; box-shadow: inset 3px 0 0 #1a73e8; }
.vt-sel { padding: 5px 8px; border: 1px solid #dadce0; border-radius: 4px; color: #5f6368; }
.vt-btn { padding: 7px 14px; border-radius: 999px; background: #1a73e8; color: #fff; font-weight: 500; transition: background .3s, color .3s; }
.vt-opt u { text-decoration: none; } .vt-opt .b { display: none; }
.vd-prd.saved .vt-opt .a { display: none; }
.vd-prd.saved .vt-opt .b { display: inline; }
.vd-prd.saved .vt-btn { background: #e6f4ea; color: #137333; }
.vt-h3 { margin: 18px 0 6px; font: 500 15px/1.35 "Google Sans", Roboto, Arial, sans-serif; color: #202124 !important; }
.vt-doc ul { padding-left: 18px !important; list-style: disc !important; }
.vt-doc li { margin: 3px 0; font-size: 12.5px; line-height: 1.5; color: #202124 !important; }
.vt-doc li b { font-weight: 700; }
.vt-doc li em { font-style: normal; display: inline-block; margin-right: 4px; padding: 2px 5px; border-radius: 4px; font: 500 10px/1 "Roboto Mono", monospace; background: #f1f3f4; color: #5f6368; vertical-align: 1px; }
.vt-doc li em.p0 { background: #fef7e0; color: #b06000; }
.ts { font-style: normal; display: inline-block; margin-left: 2px; padding: 2px 5px; border-radius: 4px; font: 500 9.5px/1 "Roboto Mono", monospace; background: #e8f0fe; color: #174ea6; vertical-align: 2px; transition: outline-color .3s; outline: 1px solid transparent; }
.ts.board { background: #fef7e0; color: #b06000; }
.ts.on { outline-color: currentColor; }
.vt-toast { position: absolute; left: calc(360px + (100% - 360px) / 2 - 210px); bottom: 18px; width: 420px; display: grid; gap: 3px; padding: 11px 16px; border-radius: 6px; background: #323232; color: #fff;
  font-size: 13px; line-height: 1.4; box-shadow: 0 6px 10px rgba(0,0,0,.2); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .4s cubic-bezier(.16,1,.3,1); }
.vt-toast small { font: 500 10.5px/1 "Roboto Mono", monospace; opacity: .7; }
.vd-prd.toast .vt-toast { opacity: 1; transform: none; }

/* ingest column (2026-10-30, more dynamic PRD demo): the recording drops in, plays while it is transcribed on the Mac (waveform +
   playhead + progress), timestamped lines stream in, the board is added, then Draft PRD; PRD lines flash the transcript line they cite */
.vi { flex: none; width: 360px; padding: 16px; background: #f8f9fa; border-right: 1px solid #e8eaed; display: flex; flex-direction: column; gap: 10px; }
.vi-drop { display: grid; place-items: center; height: 200px; border: 2px dashed #c4c7c5; border-radius: 14px; font-size: 14px; color: #5f6368; transition: border-color .3s, background .3s; }
.vd-prd.over .vi-drop { border-color: #7b3fe4; background: #f3ecfe; color: #7b3fe4; }
.vd-prd.has .vi-drop { display: none; }
.vi-player { display: none; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #e1e3e1; }
.vd-prd.has .vi-player { display: flex; animation: viIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes viIn { from { opacity: 0; transform: scale(.96); } }
.vi-screen { position: relative; height: 112px; background: #202124; color: #e8eaed; }
.vi-ttl { position: absolute; left: 10px; top: 8px; font-size: 11px; font-weight: 500; }
.vi-tiles { position: absolute; left: 10px; right: 10px; top: 28px; bottom: 26px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.vi-tiles i { border-radius: 6px; background: #3c4043; } .vi-tiles i:nth-child(2) { box-shadow: 0 0 0 2px #81c995; }
.vd-prd.play .vi-tiles i:nth-child(2) { animation: viTalk 2.4s steps(1) infinite; } .vd-prd.play .vi-tiles i:nth-child(4) { animation: viTalk 2.4s steps(1) 1.2s infinite; }
@keyframes viTalk { 0% { box-shadow: 0 0 0 2px #81c995; } 50% { box-shadow: none; } }
.vi-time { position: absolute; right: 10px; bottom: 7px; font: 500 10.5px/1 "Roboto Mono", monospace; color: #bdc1c6; }
.vi-time u { text-decoration: none; display: none; } .vi-time u.on { display: inline; }
.vi-wave { position: relative; height: 34px; padding: 6px 10px; background: #fff; }
.vi-w { display: flex; align-items: center; gap: 2px; height: 100%; }
.vi-w i { flex: 1; height: calc(var(--h) * 9%); border-radius: 2px; background: #c4c7c5; }
.vd-prd.play .vi-w i { animation: viWave 1.1s ease-in-out infinite alternate; } .vd-prd.play .vi-w i:nth-child(3n) { animation-delay: .3s; } .vd-prd.play .vi-w i:nth-child(3n+1) { animation-delay: .6s; }
@keyframes viWave { to { transform: scaleY(.45); } }
.vi-ph { position: absolute; top: 4px; bottom: 4px; left: calc(10px + (100% - 20px) * var(--p, 0)); width: 2px; background: #7b3fe4; transition: left .6s linear; }
.vi-st { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 8px; font-size: 11px; color: #5f6368; }
.vi-st2, .vd-prd.done .vi-st1 { display: none; } .vd-prd.done .vi-st2 { display: inline; color: #137333; font-weight: 500; }
.vi-bar { width: 90px; height: 4px; border-radius: 4px; background: #e8eaed; overflow: hidden; } .vi-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #7b3fe4; transition: width .6s; }
.vi-tr li { display: flex; gap: 8px; padding: 4px 8px; border-radius: 8px; font-size: 11.5px; line-height: 1.35; color: #3c4043 !important; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .4s, opacity .4s, background .4s, padding .4s; padding-block: 0; }
.vi-tr li.on-in { max-height: 40px; padding-block: 4px; }
.vi-tr time { flex: none; font: 500 10.5px/1.5 "Roboto Mono", monospace; color: #174ea6; }
.vi-tr li.hit { background: #e8f0fe; }
.vi-more { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #3c4043; opacity: 0; transition: opacity .4s; } .vi-more .vl-ic { width: 26px; height: 26px; font-size: 8px; border-radius: 6px; }
.vd-prd.done .vi-more { opacity: 1; }
.vi .vt-go { margin-top: auto; opacity: .35; } .vd-prd.done .vi .vt-go { opacity: 1; }
.vi-file { position: absolute; left: 150px; top: -110px; display: grid; place-items: center; width: 60px; height: 74px; border-radius: 10px; background: #7b3fe4; color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(0,0,0,.3); transform: rotate(-6deg); transition: top .8s cubic-bezier(.3,.7,.2,1), opacity .3s, transform .8s; }
.vd-prd.over .vi-file { top: 70px; transform: none; } .vd-prd.has .vi-file { opacity: 0; top: 70px; }
.vt-page .vt-empty { margin-top: 140px; text-align: center; font-size: 14px; color: #80868b; }

.vd .on-in { opacity: 1 !important; transform: none !important; }

@media (max-width: 1023.98px) { .vx-demo .gm-media { aspect-ratio: 16 / 10; } }
/* the dashboard needs more height than the other windows */
.vd-gap .vd-win { top: 24px; bottom: 24px; left: 56px; right: 56px; }
.vd-gap .od-k small { display: none; }
.vd .oa-key { font-size: 9.5px !important; line-height: 1.2; }