/* ==========================================================================
   EnPrisma — επεξηγηματικά οπτικά (νέοι τύποι + σύστημα αποκάλυψης)
   Κανόνας: το προεπιλεγμένο CSS είναι η ΤΕΛΙΚΗ κατάσταση. Η αρχική (κρυμμένη)
   κατάσταση ισχύει μόνο με .anim στο <html> ΚΑΙ πριν πάρει το figure .is-in.
   ========================================================================== */

/* ---------- Αποκάλυψη ---------- */
.anim .visual .rv { opacity: 0; translate: 0 18px; transition: opacity 0.9s var(--ease), translate 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual.is-in .rv { opacity: 1; translate: 0 0; }
.anim .visual .rv-pop { scale: 0; transition: scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual.is-in .rv-pop { scale: 1; }

/* Παλιοί τύποι που πλέον αποκαλύπτονται με CSS */
.vf__bar { transition: transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vf__bar { transform: scaleX(0); }
.vg__lines path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vg__lines path { stroke-dashoffset: 1; }
.vg__reply mark { transition: background-color 0.5s var(--ease), color 0.5s var(--ease); transition-delay: 2100ms; }
.anim .visual:not(.is-in) .vg__reply mark { background-color: transparent; color: inherit; }
.anim .visual.is-in .vg__hub-ring { animation: vg-pulse 1.8s ease-out 1.2s infinite; }
@keyframes vg-pulse { from { transform: scale(1); opacity: 0.6; } to { transform: scale(1.18); opacity: 0; } }
.vy__arc { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease), opacity 0.3s var(--ease), stroke-width 0.3s var(--ease); transition-delay: calc(var(--d, 0) * 1ms), 0s, 0s; }
.anim .visual:not(.is-in) .vy__arc { stroke-dashoffset: 1; }
.vb__floor { transition: opacity 0.2s linear; }
.vch.is-typing .vch__msg:not(.is-shown) { display: none; }
.anim .visual:not(.is-in) .vch__msg { opacity: 0; }

/* Κοινά */
.v-btn, .vo__tab, .vr__tab, .vcr__btn, .vsh__mode, .vsh__replay, .vbl__lang, .vrf__dev, .vfd__chip, .vvn__spot, .vwh__seg, .vfan__face, .vu__lvl button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.vo__tab:focus-visible, .vr__tab:focus-visible, .vcr__btn:focus-visible, .vsh__mode:focus-visible, .vbl__lang:focus-visible, .vrf__dev:focus-visible, .vfd__chip:focus-visible, .vvn__spot:focus-visible, .vwh__seg:focus-visible, .vfan__face:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.pill { border: 1px solid var(--black); border-radius: 999px; padding: 8px 16px; font-size: var(--size-small); }

/* ==========================================================================
   1. Orbit
   ========================================================================== */
.vo__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--grey-line); border-bottom: 1px solid var(--grey-line); margin-bottom: clamp(32px, 4vw, 56px); }
.vo__tab { display: grid; gap: 4px; padding: 16px 14px 18px; border-right: 1px solid var(--grey-line); position: relative; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.vo__tab:last-child { border-right: 0; }
.vo__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.vo__tab[aria-selected="true"]::after { transform: scaleX(1); }
.vo__tab[aria-selected="true"] { background: var(--grey-surface); }
.vo__num { font-size: 0.75rem; color: var(--grey-text); font-variant-numeric: tabular-nums; }
.vo__name { font-weight: 500; line-height: 1.25; }
.vo__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vo__stage { grid-column: 1 / span 7; position: relative; aspect-ratio: 1; max-width: 640px; width: 100%; justify-self: center; }
.vo__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vo__lines line { stroke: var(--grey-line); stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 0.4s var(--ease), stroke-width 0.4s var(--ease); }
.vo__lines line.is-on { stroke: var(--black); stroke-width: 0.8; }
.vo__orbit { fill: none; stroke: var(--grey-line); stroke-width: 0.4; stroke-dasharray: 1.5 2; }
.vo__pulse { fill: var(--black); }
.vo__ring { position: absolute; inset: 0; }
.vo__node { position: absolute; left: calc(50% + cos(var(--a)) * 41%); top: calc(50% + sin(var(--a)) * 41%); transform: translate(-50%, -50%); max-width: 9.5em; padding: 7px 13px; border: 1px solid var(--grey-line); border-radius: 999px; background: var(--white); color: var(--grey-soft); font-size: 0.8125rem; line-height: 1.2; text-align: center; transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease); }
.vo__node.is-on { background: var(--black); color: var(--white); border-color: var(--black); }
.vo__core { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; margin: -17% 0 0 -17%; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-content: center; text-align: center; padding: 12px; box-shadow: 0 0 0 10px var(--white), 0 0 0 11px var(--black); }
.vo__core strong { font-weight: 500; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem); line-height: 1.15; }
.vo__core span { font-size: 0.75rem; color: var(--grey-soft); margin-top: 6px; line-height: 1.3; }
.vo__panels { grid-column: 9 / span 4; }
.vo__step { font-size: var(--size-small); color: var(--grey-text); }
.vo__panel h3 { font-size: var(--size-h3); letter-spacing: -0.02em; line-height: 1.15; margin: 8px 0 14px; }
.vo__panel p { color: var(--grey-text); }
.vo__panel .vo__count { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grey-line); color: var(--black); font-weight: 500; }

/* ==========================================================================
   2. Handoff
   ========================================================================== */
.vh { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
.vh__panel { border: 1px solid var(--grey-line); padding: clamp(16px, 2vw, 28px); display: grid; gap: 16px; }
.vh__panel--one { background: var(--grey-surface); border-color: var(--grey-surface); }
.vh__svg { width: 100%; height: auto; overflow: visible; }
.vh__count { display: block; font-size: var(--size-small); color: var(--grey-text); }
.vh__count b { font-size: 2.5rem; font-weight: 500; color: var(--black); letter-spacing: -0.03em; margin-right: 6px; font-variant-numeric: tabular-nums; }
.vh__meta h3 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 6px 0 6px; }
.vh__meta p { font-size: var(--size-small); color: var(--grey-text); max-width: 44ch; }
.vh__text { font-size: 11px; fill: var(--black); }
.vh__text.is-inv { fill: var(--white); font-weight: 500; }
.vh__text.is-small { font-size: 10.5px; fill: var(--grey-soft); transition: fill 0.2s; }
.vh__text.is-small.is-hit { fill: var(--white); }
.vh__tangle line { stroke: var(--grey-soft); stroke-width: 0.8; stroke-dasharray: 3 4; }
.vh__link { stroke: var(--grey-line); stroke-width: 1; }
.vh__link.is-strong { stroke: var(--black); }
.vh__client { fill: var(--black); }
.vh__role circle { fill: var(--white); stroke: var(--black); stroke-width: 1; transition: fill 0.2s; }
.vh__role.is-hit circle { fill: #e9e9e9; }
.vh__team { fill: var(--black); }
.vh__out { fill: var(--grey-text); transition: fill 0.4s; }
.vh__out.is-done { fill: var(--black); }
.vh__dot { fill: var(--white); stroke: var(--black); stroke-width: 2; }

/* ==========================================================================
   3. Gantt
   ========================================================================== */
.vgt-wrap { overflow-x: auto; }
.vgt { --label: clamp(150px, 18vw, 240px); position: relative; min-width: 760px; padding-top: 40px; }
.vgt__head { display: grid; grid-template-columns: var(--label) 1fr; gap: 16px; border-bottom: 1px solid var(--black); padding-bottom: 10px; }
.vgt__phases { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.vgt__phases span { font-size: 0.8125rem; color: var(--grey-text); padding-right: 8px; line-height: 1.25; }
.vgt__row { display: grid; grid-template-columns: var(--label) 1fr; gap: 16px; align-items: center; border-bottom: 1px solid var(--grey-line); min-height: 44px; transition: color 0.3s; }
.vgt__label { font-size: 0.9375rem; padding-block: 8px; }
.vgt__track { position: relative; height: 100%; min-height: 44px; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cols) - 1px), var(--grey-line) calc(100% / var(--cols) - 1px) calc(100% / var(--cols))); }
.vgt__bar { position: absolute; top: 50%; height: 14px; margin-top: -7px; left: calc(var(--s) / var(--cols) * 100%); width: calc((var(--e) - var(--s)) / var(--cols) * 100% - 4px); border-radius: 7px; background: #cfcfcf; transition: background 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease); }
.vgt__bar.is-on { background: var(--black); height: 18px; margin-top: -9px; border-radius: 9px; }
.vgt.is-playing .vgt__row:not(.is-on) { color: var(--grey-soft); }
.vgt__overlay { position: absolute; top: 0; bottom: 0; left: calc(var(--label) + 16px); right: 0; pointer-events: none; }
.vgt__play { position: absolute; top: 0; bottom: 0; left: 100%; width: 1px; background: var(--black); display: none; }
.vgt.is-playing .vgt__play { display: block; }
.vgt__readout { position: absolute; top: 4px; left: 0; transform: translateX(-50%); white-space: nowrap; background: var(--black); color: var(--white); font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; }

/* ==========================================================================
   4. Plot
   ========================================================================== */
.vpl { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vpl__sheet { grid-column: 1 / span 8; position: relative; background: #fafafa; border: 1px solid var(--grey-line); padding: clamp(12px, 2vw, 28px); background-image: linear-gradient(var(--grey-line) 1px, transparent 1px), linear-gradient(90deg, var(--grey-line) 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
.vpl__svg { width: 100%; height: auto; overflow: visible; }
.vpl__lines path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.vpl__dim { stroke: var(--grey-text); stroke-width: 1; }
.vpl__fills { transition: opacity 0.4s linear; }
.vpl__pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--white); border: 1px solid var(--black); display: grid; place-items: center; font-size: 0.75rem; font-weight: 500; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, color 0.3s; }
.vpl__pin.is-active { background: var(--black); color: var(--white); transform: scale(1.2); }
.vpl__list { grid-column: 10 / span 3; border-top: 1px solid var(--grey-line); }
.vpl__item { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding-block: 12px; border-bottom: 1px solid var(--grey-line); outline: none; transition: opacity 0.4s var(--ease); }
.vpl__num { grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--black); display: grid; place-items: center; font-size: 0.6875rem; }
.vpl__item strong { font-weight: 500; }
.vpl__item > span:last-child { font-size: var(--size-small); color: var(--grey-text); }
.vpl__item.is-active .vpl__num { background: var(--black); color: var(--white); }
.anim .vpl__pin:not(.is-on) { transform: scale(0); }
.anim .vpl__item:not(.is-on) { opacity: 0.25; }

/* ==========================================================================
   5. Fan
   ========================================================================== */
.vfan__deck { position: relative; height: clamp(300px, 34vw, 440px); display: flex; justify-content: center; align-items: flex-end; }
.vfan__card { --mid: calc((var(--n) - 1) / 2); --off: calc(var(--i) - var(--mid)); position: absolute; bottom: 0; width: clamp(150px, 16vw, 210px); aspect-ratio: 3 / 4; transform-origin: 50% 150%; transform: translateX(calc(var(--off) * clamp(48px, 7vw, 110px))) rotate(calc(var(--off) * 7deg)); transition: transform 0.9s var(--ease), translate 0.4s var(--ease); transition-delay: calc(var(--i) * 60ms), 0s; z-index: var(--i); }
.anim .visual:not(.is-in) .vfan__card { transform: translateX(0) rotate(0deg); }
.vfan__card.is-active { translate: 0 -34px; z-index: 20; }
.vfan__face { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; width: 100%; height: 100%; padding: 16px; background: var(--white); border: 1px solid var(--black); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; }
.vfan__label { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); }
.vfan__title { font-weight: 500; font-size: 0.9375rem; line-height: 1.2; }
.vfan__art { position: absolute; inset: 12px 12px auto; height: 58%; }
.vfan__art i { position: absolute; display: block; }
.vfan__card--magazine .vfan__art { background: #1b1b1b; }
.vfan__card--magazine .vfan__art i:nth-child(1) { left: 10px; top: 10px; right: 10px; height: 22px; background: var(--white); }
.vfan__card--magazine .vfan__art i:nth-child(2) { left: 10px; bottom: 12px; width: 50%; height: 6px; background: #8a8a8a; }
.vfan__card--web .vfan__art { border: 1px solid var(--grey-line); background: linear-gradient(var(--grey-surface) 0 14px, #d6d6d6 14px 62%, var(--white) 62%); }
.vfan__card--web .vfan__art i:nth-child(1) { left: 8px; right: 30%; bottom: 18px; height: 6px; background: var(--black); }
.vfan__card--web .vfan__art i:nth-child(2) { left: 8px; right: 50%; bottom: 8px; height: 4px; background: var(--grey-soft); }
.vfan__card--award .vfan__art { display: grid; place-items: center; }
.vfan__card--award .vfan__art i:nth-child(1) { width: 62%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--black); position: relative; }
.vfan__card--award .vfan__art i:nth-child(2) { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--black); position: absolute; }
.vfan__card--social .vfan__art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.vfan__card--social .vfan__art i { position: static; background: #cfcfcf; }
.vfan__card--social .vfan__art i:nth-child(2) { background: #1b1b1b; }
.vfan__card--deck .vfan__art { border: 1px solid var(--black); background: var(--white); }
.vfan__card--deck .vfan__art i:nth-child(1) { left: 10%; bottom: 14%; width: 12%; height: 40%; background: var(--black); }
.vfan__card--deck .vfan__art i:nth-child(2) { left: 30%; bottom: 14%; width: 12%; height: 60%; background: #6b6b6b; }
.vfan__card--deck .vfan__art i:nth-child(3) { left: 50%; bottom: 14%; width: 12%; height: 76%; background: #b5b5b5; }
.vfan__card--book .vfan__art { background: var(--grey-surface); border-left: 8px solid var(--black); }
.vfan__card--book .vfan__art i:nth-child(1) { left: 14px; right: 14px; top: 40%; height: 2px; background: var(--black); }
.vfan__detail { position: relative; min-height: 4.5em; max-width: 64ch; margin: clamp(28px, 4vw, 48px) auto 0; text-align: center; }
.vfan__text { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s var(--ease); color: var(--grey-text); }
.vfan__text strong { color: var(--black); font-weight: 500; }
.vfan__text.is-active { opacity: 1; position: relative; }
.vfan .visual__note { text-align: center; }

/* ==========================================================================
   6. Crops
   ========================================================================== */
.vcr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vcr__stage { grid-column: 1 / span 8; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-surface); }
.vcr__stage img { width: 100%; height: 100%; object-fit: cover; }
.vcr__frame { position: absolute; left: 50%; top: 50%; width: 90%; height: 60%; transform: translate(-50%, -50%); box-shadow: 0 0 0 200vmax rgba(255, 255, 255, 0.72); outline: 1.5px solid var(--white); transition: width 0.9s var(--ease), height 0.9s var(--ease); }
.vcr__grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)), linear-gradient(transparent calc(33.33% - 0.5px), rgba(255, 255, 255, 0.7) calc(33.33% - 0.5px) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px) calc(66.66% - 0.5px), rgba(255, 255, 255, 0.7) calc(66.66% - 0.5px) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px)); }
.vcr__tag { position: absolute; left: 10px; top: 10px; background: var(--black); color: var(--white); font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.vcr__formats { grid-column: 9 / span 4; border-top: 1px solid var(--grey-line); }
.vcr__btn { display: grid; gap: 2px; width: 100%; padding: 14px 0 14px 18px; border-bottom: 1px solid var(--grey-line); position: relative; transition: color 0.3s; color: var(--grey-text); }
.vcr__btn::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1px solid var(--grey-soft); }
.vcr__btn strong { font-weight: 500; }
.vcr__btn span { font-size: var(--size-small); }
.vcr__btn[aria-pressed="true"] { color: var(--black); }
.vcr__btn[aria-pressed="true"]::before { background: var(--black); border-color: var(--black); }

/* ==========================================================================
   7. Radar
   ========================================================================== */
.vr { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vr__chart { grid-column: 1 / span 7; }
.vr__svg { width: 100%; height: auto; max-height: 520px; overflow: visible; }
.vr__grid { fill: none; stroke: var(--grey-line); stroke-width: 1; }
.vr__axis { stroke: var(--grey-line); }
.vr__label { font-size: 11.5px; fill: var(--grey-text); }
.vr__ghost { fill: none; stroke: var(--grey-soft); stroke-width: 0.8; stroke-dasharray: 3 3; opacity: 0.5; }
.vr__shape { fill: rgba(0, 0, 0, 0.12); stroke: var(--black); stroke-width: 2; stroke-linejoin: round; }
.vr__dot { fill: var(--black); }
.vr__side { grid-column: 9 / span 4; }
.vr__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.vr__tab { border: 1px solid var(--black); border-radius: 999px; padding: 7px 14px; font-size: var(--size-small); transition: background 0.3s, color 0.3s; }
.vr__tab[aria-pressed="true"] { background: var(--black); color: var(--white); }
.vr__panel h3 { font-size: var(--size-h3); letter-spacing: -0.02em; margin-bottom: 10px; }
.vr__panel p { color: var(--grey-text); }

/* ==========================================================================
   8. Stairs
   ========================================================================== */
.vst { position: relative; padding-left: 34px; }
.vst__steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--black); }
.vst__step { display: grid; grid-template-rows: clamp(220px, 26vw, 340px) auto auto auto; align-content: start; padding-right: var(--grid-gap); outline: none; transition: opacity 0.4s var(--ease); }
.vst__step.is-dim { opacity: 0.35; }
.vst__col { position: relative; display: flex; align-items: flex-end; border-bottom: 1px solid var(--black); margin-right: calc(var(--grid-gap) * -1); }
.vst__bar { position: relative; display: block; width: 100%; height: var(--h); background: linear-gradient(180deg, #e9e9e9, #f6f6f6); border-top: 2px solid var(--black); transform-origin: bottom; transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vst__bar { transform: scaleY(0); }
.vst__step:not(:last-child) .vst__bar::after { content: ""; position: absolute; right: 0; top: -2px; width: 2px; height: calc(100% / (var(--i) + 1)); background: var(--black); translate: 0 -100%; }
.vst__units { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 5px; }
.vst__units i { width: 13px; height: 13px; background: var(--black); }
.vst__label { margin-top: 16px; font-size: var(--size-small); color: var(--grey-text); }
.vst__step strong { font-weight: 500; font-size: 1.0625rem; line-height: 1.25; margin-top: 4px; }
.vst__text { margin-top: 6px; font-size: var(--size-small); color: var(--grey-text); }
.vst__axis { position: absolute; font-size: 0.75rem; color: var(--grey-text); letter-spacing: 0.04em; text-transform: uppercase; }
.vst__axis--y { left: 0; top: 0; writing-mode: vertical-rl; transform: rotate(180deg); height: clamp(220px, 26vw, 340px); text-align: right; }
.vst__axis--y::before { content: "↑"; display: inline-block; transform: rotate(90deg); margin-bottom: 6px; }
.vst__axis--x { right: 0; top: calc(clamp(220px, 26vw, 340px) + 6px); }
.vst__axis--x::after { content: " →"; }

/* ==========================================================================
   9. Radius
   ========================================================================== */
.vrd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vrd__map { grid-column: 1 / span 7; background: var(--grey-surface); overflow: hidden; }
.vrd__svg { width: 100%; height: auto; }
.vrd__streets line { stroke: var(--white); stroke-width: 5; }
.vrd__avenue { fill: none; stroke: var(--white); stroke-width: 12; }
.vrd__park { fill: #dedede; }
.vrd__rings circle { fill: none; stroke: var(--black); stroke-width: 1; stroke-dasharray: 4 5; transform-box: fill-box; transform-origin: center; transition: scale 1s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.vrd__rings text { font-size: 12px; fill: var(--grey-text); transition: opacity 0.6s; transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vrd__rings circle { scale: 0.2; opacity: 0; }
.anim .visual:not(.is-in) .vrd__rings text { opacity: 0; }
.vrd__pins g { transition: opacity 0.5s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.vrd__pins path { fill: #8a8a8a; stroke: var(--white); stroke-width: 1.5; }
.anim .visual:not(.is-in) .vrd__pins g { opacity: 0; }
.vrd__office circle { fill: var(--black); }
.vrd__office .vrd__halo { fill: rgba(0, 0, 0, 0.12); transform-box: fill-box; transform-origin: center; animation: vrd-halo 2.4s ease-out infinite; }
.vrd__office text { font-size: 13px; font-weight: 600; fill: var(--black); paint-order: stroke; stroke: var(--grey-surface); stroke-width: 4px; }
@keyframes vrd-halo { from { scale: 0.6; opacity: 1; } to { scale: 2.2; opacity: 0; } }
.vrd__search { grid-column: 8 / span 5; border: 1px solid var(--black); background: var(--white); padding: 18px; box-shadow: 0 30px 50px -36px rgba(0, 0, 0, 0.5); }
.vrd__bar { border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 16px 10px 40px; position: relative; min-height: 46px; font-size: 0.9375rem; }
.vrd__bar::before { content: ""; position: absolute; left: 16px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border: 1.5px solid var(--black); border-radius: 50%; }
.vrd__bar::after { content: ""; position: absolute; left: 26px; top: 50%; width: 6px; height: 1.5px; margin-top: 3px; background: var(--black); transform: rotate(45deg); }
.vrd__results { margin-top: 12px; }
.vrd__result { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 12px 6px; border-bottom: 1px solid var(--grey-line); }
.vrd__result:last-child { border-bottom: 0; }
.vrd__result strong { display: block; font-weight: 500; }
.vrd__result span span { display: block; font-size: var(--size-small); color: var(--grey-text); }
.vrd__pin { width: 24px; height: 24px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8a8a8a; color: var(--white); font-size: 0.6875rem; display: grid; place-items: center; }
.vrd__result.is-you { background: var(--grey-surface); }
.vrd__result.is-you .vrd__pin { background: var(--black); }

/* ==========================================================================
   10. Upgrade
   ========================================================================== */
.vu { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vu__card { grid-column: 1 / span 5; border: 1px solid var(--black); background: var(--white); max-width: 440px; width: 100%; justify-self: center; box-shadow: 0 30px 50px -36px rgba(0, 0, 0, 0.5); }
.vu__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey-surface); }
.vu__media img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.7s var(--ease), transform 0.7s var(--ease); }
.vu[data-level="0"] .vu__media img { filter: saturate(0.4) brightness(0.82) contrast(0.8) blur(1.2px); transform: rotate(-3deg) scale(1.15); }
.vu__play { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(0, 0, 0, 0.75); transition: opacity 0.5s, scale 0.5s; }
.vu__play::after { content: ""; position: absolute; left: 22px; top: 18px; border-left: 16px solid var(--white); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vu__count { position: absolute; right: 10px; bottom: 10px; width: 46px; height: 22px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); transition: opacity 0.5s; }
.vu__body { padding: 16px; display: grid; gap: 8px; }
.vu__line { display: block; line-height: 1.3; }
.vu__line--title { font-weight: 500; }
.vu__line--place { font-size: var(--size-small); color: var(--grey-text); }
.vu__facts { display: flex; gap: 6px; align-items: center; }
.vu__facts i { width: 22%; height: 22px; border: 1px solid var(--grey-line); border-radius: 4px; }
.vu__energy { width: 30px; height: 22px; display: grid; place-items: center; background: var(--black); color: var(--white); font-size: 0.75rem; clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%); transition: opacity 0.5s, scale 0.5s; }
.vu__extras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vu__plan { height: 64px; border: 1px solid var(--black); background: repeating-linear-gradient(90deg, transparent 0 32%, var(--black) 32% calc(32% + 1px), transparent calc(32% + 1px)), linear-gradient(transparent 55%, var(--black) 55% calc(55% + 1px), transparent calc(55% + 1px)); transition: opacity 0.5s, scale 0.5s; }
.vu__area { height: 64px; background: var(--grey-surface); position: relative; transition: opacity 0.5s, scale 0.5s; }
.vu__area i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--black); }
.vu__area i:nth-child(1) { left: 20%; top: 30%; } .vu__area i:nth-child(2) { left: 60%; top: 55%; } .vu__area i:nth-child(3) { left: 40%; top: 70%; background: var(--grey-text); }
.vu[data-level="0"] .vu__count, .vu[data-level="0"] .vu__energy, .vu[data-level="1"] .vu__energy { opacity: 0.12; }
.vu[data-level="0"] .vu__plan, .vu[data-level="1"] .vu__plan { opacity: 0.08; scale: 0.9; }
.vu[data-level="0"] .vu__play, .vu[data-level="1"] .vu__play, .vu[data-level="2"] .vu__play { opacity: 0; scale: 0.5; }
.vu[data-level="0"] .vu__area, .vu[data-level="1"] .vu__area, .vu[data-level="2"] .vu__area, .vu[data-level="3"] .vu__area { opacity: 0.08; scale: 0.9; }
.vu__controls { grid-column: 7 / span 6; }
.vu__meter { display: grid; gap: 8px; margin-bottom: 18px; }
.vu__meter-label { font-size: var(--size-small); color: var(--grey-text); }
.vu__meter-track { height: 6px; background: var(--grey-line); border-radius: 3px; overflow: hidden; }
.vu__meter-fill { display: block; height: 100%; background: var(--black); transform-origin: left; transition: transform 0.6s var(--ease); }
.vu__range { width: 100%; accent-color: var(--black); margin: 0 0 6px; }
.vu__levels { border-top: 1px solid var(--grey-line); }
.vu__lvl button { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 0; border-bottom: 1px solid var(--grey-line); color: var(--grey-soft); transition: color 0.3s; }
.vu__lvl button span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 0.6875rem; flex: none; }
.vu__lvl.is-on button { color: var(--black); }
.vu__lvl.is-current button span { background: var(--black); color: var(--white); border-color: var(--black); }
.vu__notes { margin-top: 16px; color: var(--grey-text); min-height: 3em; }

/* ==========================================================================
   11. Arcs
   ========================================================================== */
.var { display: grid; gap: clamp(24px, 3vw, 40px); }
.var__map { background: var(--black); border-radius: 4px; overflow: hidden; }
.var__svg { width: 100%; height: auto; }
.var__grid line { stroke: #2a2a2a; stroke-width: 1; }
.var__dots circle { fill: #3a3a3a; }
.var__arc { fill: none; stroke: #8a8a8a; stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease), stroke 0.3s, stroke-width 0.3s, opacity 0.3s; transition-delay: calc(var(--d, 0) * 1ms), 0s, 0s, 0s; }
.anim .visual:not(.is-in) .var__arc { stroke-dashoffset: 1; }
.var.has-focus .var__arc:not(.is-active) { opacity: 0.25; }
.var__arc.is-active { stroke: var(--white); stroke-width: 2.4; }
.var__city circle { fill: var(--white); }
.var__city text { font-size: 13px; fill: #bdbdbd; }
.var__city.is-active text { fill: var(--white); font-weight: 600; }
.var__plane { fill: var(--white); }
.var__hub circle { fill: var(--white); }
.var__hub .var__halo { fill: rgba(255, 255, 255, 0.18); transform-box: fill-box; transform-origin: center; animation: vrd-halo 2.4s ease-out infinite; }
.var__hub text { fill: var(--white); font-size: 15px; font-weight: 600; }
.var__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 var(--grid-gap); border-top: 1px solid var(--grey-line); }
.var__origin { padding: 14px 0; border-bottom: 1px solid var(--grey-line); outline: none; transition: opacity 0.3s; cursor: default; }
.var__origin strong { display: block; font-weight: 500; }
.var__origin span { display: block; margin-top: 2px; font-size: var(--size-small); color: var(--grey-text); }
.var.has-focus .var__origin:not(.is-active) { opacity: 0.4; }

/* ==========================================================================
   12. Clocks
   ========================================================================== */
.vck__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--grid-gap); }
.vck__city { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 20px 12px; border: 1px solid var(--grey-line); transition: background 0.6s, color 0.6s, border-color 0.6s; }
.vck__face { width: min(120px, 100%); aspect-ratio: 1; margin-bottom: 10px; }
.vck__face svg { width: 100%; height: 100%; }
.vck__dial { fill: var(--white); stroke: var(--black); stroke-width: 1.5; transition: fill 0.6s; }
.vck__tick { stroke: var(--black); stroke-width: 1.4; }
.vck__hour { stroke: var(--black); stroke-width: 3.2; stroke-linecap: round; }
.vck__minute { stroke: var(--black); stroke-width: 2; stroke-linecap: round; }
.vck__second { stroke: #8a8a8a; stroke-width: 1; }
.vck__pin { fill: var(--black); }
.vck__city strong { font-weight: 500; }
.vck__time { font-size: 1.5rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vck__state { font-size: 0.75rem; color: var(--grey-text); text-transform: uppercase; letter-spacing: 0.06em; }
.vck__city[data-state="night"] { background: var(--black); color: var(--white); border-color: var(--black); }
.vck__city[data-state="night"] .vck__state { color: var(--grey-soft); }
.vck__city[data-state="night"] .vck__dial { fill: #1a1a1a; stroke: #555; }
.vck__city[data-state="night"] .vck__tick, .vck__city[data-state="night"] .vck__hour, .vck__city[data-state="night"] .vck__minute { stroke: var(--white); }
.vck__city[data-state="night"] .vck__pin { fill: var(--white); }
.vck__city[data-state="evening"] { background: var(--grey-surface); }
.vck__city--office { border-color: var(--black); border-width: 2px; }
.vck__summary { margin-top: 24px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; min-height: 1.6em; }

/* ==========================================================================
   13. Walkthrough
   ========================================================================== */
.vw { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vw__plan { grid-column: 1 / span 7; }
.vw__svg { width: 100%; height: auto; overflow: visible; }
.vw__rooms rect { fill: var(--white); transition: fill 0.5s var(--ease); }
.vw__rooms rect.is-here { fill: #ececec; }
.vw__rooms .vw__terrace { fill: var(--grey-surface); stroke: var(--grey-soft); stroke-dasharray: 4 4; }
.vw__furniture * { fill: none; stroke: var(--grey-soft); stroke-width: 1; }
.vw__walls path { stroke: var(--black); stroke-width: 5; stroke-linecap: square; }
.vw__walls path:first-child { stroke-width: 7; }
.vw__labels text { font-size: 11px; fill: var(--grey-text); letter-spacing: 0.06em; text-transform: uppercase; }
.vw__route { stroke: var(--grey-line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.vw__trail { stroke: var(--black); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.vw__cone { fill: rgba(0, 0, 0, 0.14); }
.vw__cam circle { fill: var(--black); stroke: var(--white); stroke-width: 2; }
.vw__cam { transform: translate(530px, 300px); }
.vw__side { grid-column: 9 / span 4; }
.vw__list { border-top: 1px solid var(--grey-line); }
.vw__room { padding: 12px 0 12px 18px; border-bottom: 1px solid var(--grey-line); position: relative; color: var(--grey-soft); transition: color 0.4s var(--ease); }
.vw__room::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border-radius: 50%; border: 1px solid currentColor; transition: background 0.4s; }
.vw__room strong { display: block; font-weight: 500; }
.vw__room span { display: block; font-size: var(--size-small); }
.vw__room.is-here { color: var(--black); }
.vw__room.is-here::before { background: var(--black); }
.vw__room.is-here span { color: var(--grey-text); }
.no-js .vw__room, .vw:not(:has(.is-here)) .vw__room { color: var(--black); }
.vw__meter { position: relative; margin-top: 20px; height: 28px; border: 1px solid var(--grey-line); }
.vw__meter-fill { position: absolute; inset: 0; background: var(--black); transform-origin: left; transform: scaleX(0); }
.vw__meter-label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--white); mix-blend-mode: difference; }

/* ==========================================================================
   14. Shelf
   ========================================================================== */
.vsh__controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.vsh__modes { display: inline-flex; border: 1px solid var(--black); border-radius: 999px; padding: 3px; }
.vsh__mode { padding: 7px 16px; border-radius: 999px; font-size: var(--size-small); transition: background 0.3s, color 0.3s; }
.vsh__mode[aria-pressed="true"] { background: var(--black); color: var(--white); }
.vsh__replay { font-size: var(--size-small); text-decoration: underline; text-underline-offset: 4px; }
.vsh__stage { position: relative; background: linear-gradient(180deg, #fbfbfb, var(--grey-surface)); padding: clamp(24px, 4vw, 48px) clamp(12px, 3vw, 40px) 0; overflow: hidden; }
.vsh__row { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 16px); align-items: end; position: relative; z-index: 1; }
.vsh__item svg { width: 100%; height: auto; overflow: visible; }
.vsh__item svg > :not(.vsh__label) { fill: #cfcfcf; transition: fill 0.4s; }
.vsh__item:nth-child(3n) svg > :not(.vsh__label) { fill: #bdbdbd; }
.vsh__item:nth-child(4n) svg > :not(.vsh__label) { fill: #d9d9d9; }
.vsh__label { fill: #ececec; transition: fill 0.4s; }
.vsh__item { transition: translate 0.4s var(--ease), scale 0.4s var(--ease); transform-origin: bottom; }
.vsh__item.is-looked { translate: 0 -4px; }
.vsh[data-mode="1"] .vsh__item.is-yours svg > :not(.vsh__label) { fill: var(--black); }
.vsh[data-mode="1"] .vsh__item.is-yours .vsh__label { fill: var(--white); }
.vsh.is-found .vsh__item.is-yours { scale: 1.06; }
.vsh__plank { display: block; height: 14px; background: var(--black); margin: 0 calc(clamp(12px, 3vw, 40px) * -1); position: relative; z-index: 1; }
.vsh__gaze { position: absolute; left: 0; top: 0; z-index: 2; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 2px solid var(--black); background: rgba(255, 255, 255, 0.35); opacity: 0; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s; pointer-events: none; }
.vsh__gaze::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--black); }
.vsh__gaze.is-on { opacity: 1; }
.vsh.is-missed .vsh__gaze { opacity: 0.3; }
.vsh__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.4); z-index: 3; }
.vsh__timer span { display: block; height: 100%; background: var(--white); transform-origin: left; transform: scaleX(0); }
.vsh__verdict { margin-top: 18px; font-size: 1.125rem; font-weight: 500; min-height: 1.6em; }
.vsh__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); margin-top: 24px; }
.vsh__points li { border-top: 1px solid var(--black); padding-top: 14px; }
.vsh__points strong { display: block; font-weight: 500; }
.vsh__points span { display: block; margin-top: 4px; font-size: var(--size-small); color: var(--grey-text); }

/* ==========================================================================
   15. Wheel
   ========================================================================== */
.vwh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vwh__wheel { grid-column: 1 / span 6; position: relative; max-width: 520px; width: 100%; justify-self: center; }
.vwh__svg { width: 100%; height: auto; overflow: visible; }
.vwh__slice { cursor: pointer; transition: transform 0.5s var(--ease), opacity 0.6s var(--ease), scale 0.8s var(--ease); transition-delay: 0s, 0s, calc(var(--d, 0) * 1ms); transform-box: view-box; transform-origin: center; }
.anim .visual:not(.is-in) .vwh__slice { scale: 0.6; opacity: 0; }
.vwh__slice path { fill: #e9e9e9; stroke: var(--white); stroke-width: 2; transition: fill 0.4s; }
.vwh__slice:nth-child(even) path { fill: #dcdcdc; }
.vwh__slice text { font-size: 12.5px; fill: var(--black); pointer-events: none; }
.vwh__slice.is-active { transform: translate(var(--dx), var(--dy)); }
.vwh__slice.is-active path { fill: var(--black); }
.vwh__slice.is-active text { fill: var(--white); }
.vwh__center { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: 6px; }
.vwh__center strong { font-weight: 500; font-size: 1.125rem; line-height: 1.2; }
.vwh__center span { font-size: 0.8125rem; color: var(--grey-text); line-height: 1.4; }
.vwh__list { grid-column: 8 / span 5; border-top: 1px solid var(--grey-line); }
.vwh__seg { display: grid; gap: 2px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--grey-line); transition: opacity 0.3s; }
.vwh__seg strong { font-weight: 500; }
.vwh__seg span { font-size: var(--size-small); color: var(--grey-text); }
.vwh.has-focus .vwh__seg[aria-pressed="false"] { opacity: 0.4; }

/* ==========================================================================
   16. Countdown
   ========================================================================== */
.vcd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
.vcd__counter { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-height) + 40px); display: grid; gap: 6px; }
.vcd__big { font-size: clamp(4.5rem, 3rem + 7vw, 10rem); line-height: 0.9; letter-spacing: -0.06em; font-weight: 500; font-variant-numeric: tabular-nums; }
.vcd.is-zero .vcd__big { text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: 12px; }
.vcd__unit { color: var(--grey-text); }
.vcd__fair { font-weight: 500; }
.vcd__ruler { grid-column: 7 / span 6; position: relative; display: grid; grid-template-columns: 70px 1fr; min-height: calc(var(--rows, 8) * 1px); }
.vcd__ticks { position: relative; border-right: 1px solid var(--black); min-height: 640px; }
.vcd__ticks i { position: absolute; right: 0; top: var(--p); width: 14px; height: 1px; background: var(--grey-soft); transition: background 0.3s, width 0.3s; }
.vcd__ticks i span { position: absolute; right: 22px; top: -0.7em; font-size: 0.6875rem; color: var(--grey-soft); font-style: normal; font-variant-numeric: tabular-nums; }
.vcd__ticks i.is-on { background: var(--black); width: 20px; }
.vcd__ticks i.is-zero { width: 34px; background: var(--black); height: 2px; }
.vcd__ticks i.is-zero span { color: var(--black); font-weight: 600; }
.vcd__fill { position: absolute; right: -2px; top: 0; bottom: 0; width: 3px; background: var(--black); transform-origin: top; }
.vcd__marks { position: relative; }
.vcd__mark { position: absolute; left: 24px; right: 0; top: var(--p); transform: translateY(-14px); padding-left: 16px; border-left: 1px solid var(--grey-line); transition: opacity 0.4s, border-color 0.4s; opacity: 0.35; }
.vcd__mark.is-on { opacity: 1; border-color: var(--black); }
.vcd__t { display: block; font-size: 0.75rem; color: var(--grey-text); font-variant-numeric: tabular-nums; }
.vcd__mark strong { display: block; font-weight: 500; }
.vcd__mark > span:last-child { display: block; font-size: var(--size-small); color: var(--grey-text); max-width: 40ch; }
.no-js .vcd__mark { opacity: 1; }

/* ==========================================================================
   17. Contact sheet
   ========================================================================== */
.vcs__sheet { background: #111; padding: clamp(10px, 2vw, 24px); }
.vcs__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 0.8vw, 10px); }
.vcs__frame { position: relative; aspect-ratio: 3 / 2; overflow: visible; background: #222; transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.vcs__frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--x) var(--y); transform: scale(var(--z)); filter: grayscale(1) contrast(1.05); }
.vcs__frame { overflow: hidden; }
.vcs__no { position: absolute; left: 3px; bottom: 2px; font-size: 0.5625rem; color: #d9b54a; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.04em; }
.vcs__frame.is-out { opacity: 0.22; }
.vcs__frame.is-out::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(255, 255, 255, 0.6) 50%, transparent calc(50% + 1px)); }
.vcs__frame.is-pick img { filter: none; }
.vcs__mark { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; pointer-events: none; }
.vcs__mark { opacity: 0; transition: opacity 0.2s; }
.vcs__frame.is-pick .vcs__mark { opacity: 1; }
.vcs__mark path { fill: none; stroke: #ff4d2e; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s var(--ease); }
.vcs__frame.is-pick .vcs__mark path { stroke-dashoffset: 0; }
.vcs__count { margin-top: 18px; display: flex; align-items: baseline; gap: 8px; }
.vcs__num { font-size: 2.5rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vcs__of { color: var(--grey-text); }
.vcs__label { color: var(--grey-text); }

/* ==========================================================================
   18. Babel
   ========================================================================== */
.vbl__langs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 4vw, 48px); }
.vbl__lang { border: 1px solid var(--grey-line); border-radius: 999px; padding: 6px 14px; font-size: var(--size-small); color: var(--grey-text); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.vbl__lang b { font-weight: 600; margin-right: 4px; }
.vbl__lang[aria-pressed="true"] { background: var(--black); color: var(--white); border-color: var(--black); }
.vbl__line { font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; min-height: 2.4em; max-width: 26ch; }
.vbl__hint { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--grey-line); color: var(--grey-text); max-width: 60ch; min-height: 3em; }

/* ==========================================================================
   19. NLE
   ========================================================================== */
.vn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: end; background: #0d0d0d; color: var(--white); padding: clamp(14px, 2.4vw, 32px); border-radius: 6px; }
.vn__monitor { grid-column: 3 / span 8; position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; margin-bottom: 12px; }
.vn__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.vn__shot.is-on { opacity: 1; }
.no-js .vn__shot:first-of-type { opacity: 1; }
.vn__reel { position: absolute; left: 50%; top: 0; bottom: 0; aspect-ratio: 9 / 16; transform: translateX(-50%); box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.62); outline: 1.5px solid var(--white); opacity: 0; transition: opacity 0.35s; }
.vn__reel b { position: absolute; left: 8px; top: 8px; font-size: 0.6875rem; background: var(--white); color: var(--black); padding: 2px 6px; border-radius: 3px; }
.vn__monitor.is-reel .vn__reel { opacity: 1; }
.vn__tc { position: absolute; right: 10px; top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.75rem; background: rgba(0, 0, 0, 0.6); padding: 2px 6px; }
.vn__clip { position: absolute; left: 10px; bottom: 8px; font-size: 0.75rem; background: rgba(0, 0, 0, 0.6); padding: 2px 8px; }
.vn__clip:empty { display: none; }
.vn__timeline { grid-column: 1 / -1; position: relative; }
.vn__ruler { position: relative; height: 22px; margin-left: 110px; border-bottom: 1px solid #333; }
.vn__ruler i { position: absolute; left: var(--p); bottom: 0; font-style: normal; font-size: 0.625rem; color: #8a8a8a; transform: translateX(-50%); padding-bottom: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.vn__track { display: grid; grid-template-columns: 110px 1fr; align-items: center; border-bottom: 1px solid #222; }
.vn__tlabel { font-size: 0.75rem; color: #9a9a9a; padding: 0 10px 0 0; }
.vn__lane { position: relative; height: 38px; }
.vn__item { position: absolute; top: 5px; bottom: 5px; left: var(--s); width: calc(var(--w) - 2px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.6875rem; padding: 0 6px; display: flex; align-items: center; border-radius: 3px; background: #3a3a3a; color: #e5e5e5; transition: background 0.2s, color 0.2s; }
.vn__track--reel .vn__item { background: #2a2a2a; border: 1px dashed #777; }
.vn__track--audio .vn__item { background: repeating-linear-gradient(90deg, #4a4a4a 0 2px, transparent 2px 4px) center / 100% 60% no-repeat, #262626; color: #bbb; }
.vn__item.is-on { background: var(--white); color: var(--black); }
.vn__track--audio .vn__item.is-on { background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 4px) center / 100% 60% no-repeat, #555; color: #fff; }
.vn__overlay { position: absolute; top: 0; bottom: 0; left: 110px; right: 0; pointer-events: none; }
.vn__head { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #ff4d2e; }
.vn__head::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top: 8px solid #ff4d2e; }

/* ==========================================================================
   20. Reflow
   ========================================================================== */
.vrf__devices { display: inline-flex; border: 1px solid var(--black); border-radius: 999px; padding: 3px; margin-bottom: 24px; }
.vrf__dev { padding: 7px 18px; border-radius: 999px; font-size: var(--size-small); transition: background 0.3s, color 0.3s; }
.vrf__dev[aria-pressed="true"] { background: var(--black); color: var(--white); }
.vrf__stage { background: var(--grey-surface); padding: clamp(16px, 3vw, 40px); display: flex; justify-content: center; min-height: clamp(420px, 42vw, 560px); align-items: flex-start; }
.vrf__frame { width: 100%; max-width: 980px; background: var(--white); border: 1px solid var(--black); border-radius: 8px; overflow: hidden; transition: max-width 0.76s var(--ease), border-radius 0.76s var(--ease); box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.5); }
.vrf[data-device="1"] .vrf__frame { max-width: 560px; border-radius: 14px; }
.vrf[data-device="2"] .vrf__frame { max-width: 280px; border-radius: 26px; }
.vrf__chrome { display: flex; gap: 6px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--grey-line); }
.vrf__chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--grey-line); }
.vrf__chrome span { flex: 1; height: 16px; margin-left: 10px; border-radius: 999px; background: var(--grey-surface); }
.vrf[data-device="2"] .vrf__chrome i { display: none; }
.vrf__page { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 14px; }
.vrf__b { position: relative; border-radius: 4px; background: var(--grey-surface); min-height: 30px; font-size: 0.6875rem; color: var(--grey-text); padding: 8px; overflow: hidden; transform-origin: top left; }
.vrf__b span { position: relative; z-index: 1; }
.vrf__b--nav { grid-column: 1 / -1; min-height: 26px; background: none; border-bottom: 1px solid var(--grey-line); border-radius: 0; }
.vrf__b--hero { grid-column: 1 / span 4; grid-row: span 2; min-height: 200px; background: linear-gradient(135deg, #bdbdbd, #8a8a8a); color: var(--white); }
.vrf__b--title { grid-column: 5 / span 2; grid-row: span 2; background: none; display: grid; align-content: center; gap: 8px; }
.vrf__b--title i { display: block; height: 8px; background: var(--black); border-radius: 2px; }
.vrf__b--title i + i { width: 60%; background: var(--grey-soft); }
.vrf__b--card { grid-column: span 2; min-height: 92px; border: 1px solid var(--grey-line); background: var(--white); }
.vrf__b--form { grid-column: 1 / span 4; min-height: 60px; border: 1px solid var(--black); background: var(--white); }
.vrf__b--footer { grid-column: 5 / span 2; min-height: 60px; background: var(--black); color: var(--grey-soft); }
.vrf[data-device="1"] .vrf__b--hero { grid-column: 1 / -1; grid-row: auto; min-height: 150px; }
.vrf[data-device="1"] .vrf__b--title { grid-column: 1 / -1; grid-row: auto; }
.vrf[data-device="1"] .vrf__b--card { grid-column: span 3; }
.vrf[data-device="1"] .vrf__b--card:last-of-type { grid-column: 1 / -1; }
.vrf[data-device="1"] .vrf__b--form, .vrf[data-device="1"] .vrf__b--footer { grid-column: 1 / -1; }
.vrf[data-device="2"] .vrf__b--nav::after { content: "≡"; position: absolute; right: 8px; top: 4px; font-size: 1rem; color: var(--black); }
.vrf[data-device="2"] .vrf__b--hero { grid-column: 1 / -1; grid-row: auto; min-height: 210px; }
.vrf[data-device="2"] .vrf__b--title, .vrf[data-device="2"] .vrf__b--card, .vrf[data-device="2"] .vrf__b--form, .vrf[data-device="2"] .vrf__b--footer { grid-column: 1 / -1; grid-row: auto; }
.vrf[data-device="2"] .vrf__b--card { min-height: 64px; }
.vrf__b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); transform: translateX(-100%); }
.anim .visual:not(.is-in) .vrf__b { background: var(--grey-surface) !important; color: transparent; border-color: transparent; }
.anim .visual.is-in .vrf__b::after { animation: vrf-shimmer 1s var(--ease) 1; }
@keyframes vrf-shimmer { to { transform: translateX(100%); } }

/* ==========================================================================
   21. Auction
   ========================================================================== */
.vau__control { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 16px 20px; background: var(--grey-surface); margin-bottom: 20px; }
.vau__label { font-weight: 500; }
.vau__range { width: 100%; accent-color: var(--black); }
.vau__head, .vau__row { display: grid; grid-template-columns: 56px minmax(120px, 1fr) minmax(0, 2fr) minmax(0, 2fr); gap: 16px; align-items: center; }
.vau__head { font-size: 0.75rem; color: var(--grey-text); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 0 8px; border-bottom: 1px solid var(--black); }
.vau__rows { position: relative; margin-top: 8px; }
.vau__row { padding: 12px 0; border-bottom: 1px solid var(--grey-line); background: var(--white); }
.vau.is-live .vau__row { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.7s var(--ease); }
.vau__rank { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.vau__row strong { font-weight: 500; }
.vau__row.is-you { background: var(--grey-surface); z-index: 1; }
.vau__row.is-you strong::after { content: " ●"; font-size: 0.5rem; vertical-align: 3px; }
.vau__bar { display: block; height: 10px; background: var(--grey-line); border-radius: 5px; overflow: hidden; }
.vau__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); background: var(--grey-text); border-radius: 5px; transition: width 0.5s var(--ease); }
.vau__bar--q i { background: var(--black); }

/* ==========================================================================
   22. Feed
   ========================================================================== */
.vfd { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vfd__phone { grid-column: 1 / span 5; max-width: 400px; width: 100%; justify-self: center; border: 10px solid var(--black); border-radius: 34px; padding: 18px 10px 10px; background: var(--white); }
.vfd__profile { display: flex; gap: 12px; align-items: center; padding: 0 6px 14px; }
.vfd__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; font-weight: 600; font-size: 1.25rem; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--black); flex: none; }
.vfd__profile strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.vfd__profile span span { display: block; font-size: 0.75rem; color: var(--grey-text); line-height: 1.35; }
.vfd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.vfd__tile { aspect-ratio: 4 / 5; overflow: hidden; background: var(--grey-surface); transition: opacity 0.5s var(--ease), filter 0.5s var(--ease); }
.vfd__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.vfd.has-filter .vfd__tile:not(.is-match) { opacity: 0.18; filter: grayscale(1); }
.vfd.has-filter .vfd__tile.is-match img { transform: scale(1.06); }
.vfd__side { grid-column: 7 / span 6; }
.vfd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.vfd__chip { border: 1px solid var(--black); border-radius: 999px; padding: 7px 15px; font-size: var(--size-small); transition: background 0.3s, color 0.3s; }
.vfd__chip[aria-pressed="true"] { background: var(--black); color: var(--white); }
.vfd__pillars { border-top: 1px solid var(--grey-line); }
.vfd__pillar { padding: 12px 0; border-bottom: 1px solid var(--grey-line); transition: opacity 0.3s; }
.vfd__pillar strong { display: block; font-weight: 500; }
.vfd__pillar span { display: block; font-size: var(--size-small); color: var(--grey-text); }
.vfd.has-filter .vfd__pillar:not(.is-active) { opacity: 0.35; }

/* ==========================================================================
   23. Kit
   ========================================================================== */
.vk__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: var(--grid-gap); }
.vk__tile { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 20px; border: 1px solid var(--grey-line); background: var(--white); transition: transform 1s var(--ease), opacity 0.8s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vk__tile { transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.35); opacity: 0; }
.vk__cap { position: absolute; left: 14px; bottom: 10px; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); }
.vk__tile--mark { grid-row: span 2; background: var(--black); border-color: var(--black); }
.vk__tile--mark .vk__cap { color: var(--grey-soft); }
.vk__mono { width: min(70%, 220px); aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--white); color: var(--white); display: grid; place-items: center; font-size: clamp(3rem, 2rem + 4vw, 6rem); font-weight: 300; letter-spacing: -0.04em; }
.vk__tile--word { grid-column: span 2; }
.vk__wordmark { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); letter-spacing: 0.32em; text-transform: uppercase; font-weight: 300; }
.vk__swatches { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; height: 100%; min-height: 110px; }
.vk__swatches i { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px; font-style: normal; color: var(--white); }
.vk__swatches i:nth-child(n+3) { color: var(--black); }
.vk__swatches b { font-size: 0.6875rem; font-weight: 500; }
.vk__swatches small { font-size: 0.5625rem; opacity: 0.8; }
.vk__tile--colour { padding: 14px 14px 34px; }
.vk__aa { font-size: clamp(3rem, 2rem + 3vw, 5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.vk__face { font-size: var(--size-small); color: var(--grey-text); }
.vk__pattern { position: absolute; inset: 0; background: radial-gradient(circle at 0 0, transparent 14px, var(--black) 15px 16px, transparent 17px) 0 0 / 32px 32px, radial-gradient(circle at 100% 100%, transparent 14px, var(--black) 15px 16px, transparent 17px) 0 0 / 32px 32px; opacity: 0.85; }
.vk__tile--pattern .vk__cap { background: var(--white); padding: 2px 6px; left: 8px; }
.vk__tile--voice { grid-column: span 2; align-items: flex-start; }
.vk__quote { font-size: clamp(1.125rem, 0.9rem + 1vw, 1.625rem); line-height: 1.3; letter-spacing: -0.015em; quotes: "“" "”"; max-width: 30ch; }
.vk__tile--sign { grid-column: span 2; background: var(--grey-surface); border-color: var(--grey-surface); }
.vk__hoarding { width: 92%; aspect-ratio: 4 / 1.2; background: var(--black); color: var(--white); display: grid; align-content: center; padding: 0 6%; position: relative; }
.vk__hoarding b { font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; font-size: clamp(0.875rem, 0.6rem + 1vw, 1.375rem); }
.vk__hoarding span { font-size: 0.6875rem; color: var(--grey-soft); margin-top: 4px; }
.vk__hoarding i { position: absolute; right: 6%; top: 50%; width: 15%; aspect-ratio: 1; transform: translateY(-50%); background: repeating-conic-gradient(var(--white) 0 25%, var(--black) 0 50%) 0 0 / 34% 34%; border: 3px solid var(--white); }

/* ==========================================================================
   24. Kanban
   ========================================================================== */
.vkb__week { font-size: var(--size-small); color: var(--grey-text); min-height: 1.5em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.vkb__board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vkb__col { background: var(--grey-surface); padding: 12px; min-height: 340px; }
.vkb__head { display: flex; gap: 10px; align-items: center; font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin-bottom: 12px; }
.vkb__head span { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--black); display: grid; place-items: center; font-size: 0.6875rem; flex: none; }
.vkb__col:last-child .vkb__head span { background: var(--black); color: var(--white); }
.vkb__cards { display: grid; gap: 8px; }
.vkb__card { background: var(--white); border: 1px solid var(--grey-line); padding: 10px 12px; font-size: var(--size-small); line-height: 1.35; box-shadow: 0 6px 14px -12px rgba(0, 0, 0, 0.6); }
.vkb__col:last-child .vkb__card { border-color: var(--black); }
.vkb__tag { display: block; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-text); margin-bottom: 2px; }

/* ==========================================================================
   25. Venn
   ========================================================================== */
.vvn { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
.vvn__diagram { grid-column: 1 / span 7; position: relative; aspect-ratio: 1 / 0.92; max-width: 600px; width: 100%; justify-self: center; }
.vvn__circle { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--black); background: rgba(0, 0, 0, 0.07); transition: transform 1.2s var(--ease), background 0.4s; }
.vvn__circle--1 { left: 4%; top: 2%; }
.vvn__circle--2 { right: 4%; top: 2%; }
.vvn__circle--3 { left: 21%; bottom: 0; }
.anim .visual:not(.is-in) .vvn__circle--1 { transform: translate(-22%, -12%); }
.anim .visual:not(.is-in) .vvn__circle--2 { transform: translate(22%, -12%); }
.anim .visual:not(.is-in) .vvn__circle--3 { transform: translate(0, 22%); }
.vvn[data-active="c1"] .vvn__circle--1, .vvn[data-active="c2"] .vvn__circle--2, .vvn[data-active="c3"] .vvn__circle--3 { background: rgba(0, 0, 0, 0.18); }
.vvn__spot { position: absolute; transform: translate(-50%, -50%); text-align: center; font-weight: 500; line-height: 1.2; padding: 6px 10px; border-radius: 999px; transition: background 0.3s, color 0.3s; max-width: 11em; }
.vvn__spot--small { font-size: 0.75rem; font-weight: 400; color: var(--grey-text); max-width: 8em; }
.vvn__spot--c1 { left: 24%; top: 26%; }
.vvn__spot--c2 { left: 76%; top: 26%; }
.vvn__spot--c3 { left: 50%; top: 84%; }
.vvn__spot--p1 { left: 50%; top: 17%; }
.vvn__spot--p2 { left: 70%; top: 60%; }
.vvn__spot--p3 { left: 30%; top: 60%; }
.vvn__spot--core { left: 50%; top: 46%; background: var(--black); color: var(--white); padding: 10px 14px; }
.vvn__spot.is-active:not(.vvn__spot--core) { background: var(--black); color: var(--white); }
.vvn__spot--core.is-active { box-shadow: 0 0 0 6px var(--white), 0 0 0 7px var(--black); }
.vvn__panel { grid-column: 9 / span 4; }
.vvn__panel h3 { font-size: var(--size-h3); letter-spacing: -0.02em; margin-bottom: 10px; }
.vvn__panel p { color: var(--grey-text); }

/* ==========================================================================
   26. SERP
   ========================================================================== */
.vse__window { max-width: 760px; border: 1px solid var(--black); padding: clamp(14px, 2vw, 24px); background: var(--white); box-shadow: 0 30px 60px -44px rgba(0, 0, 0, 0.55); }
.vse__bar { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid var(--grey-line); border-radius: 999px; padding: 10px 18px; margin-bottom: 16px; }
.vse__q { font-size: 0.9375rem; }
.vse__pos { font-size: 0.75rem; background: var(--black); color: var(--white); padding: 3px 10px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vse__pos:empty { display: none; }
.vse__ai { position: relative; padding: 14px 16px; background: var(--grey-surface); border-radius: 8px; margin-bottom: 12px; }
.vse__ai-label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 8px; }
.vse__ai-lines { display: grid; gap: 6px; }
.vse__ai-lines i { height: 7px; background: #d6d6d6; border-radius: 3px; }
.vse__ai-lines i:nth-child(2) { width: 88%; } .vse__ai-lines i:nth-child(3) { width: 62%; }
.vse__cite { display: inline-block; margin-top: 10px; font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--grey-soft); color: var(--grey-text); transition: background 0.4s, color 0.4s, border-color 0.4s; }
.vse.is-cited .vse__cite, .no-js .vse__cite { background: var(--black); color: var(--white); border-color: var(--black); }
.vse__map { position: relative; height: 70px; background: var(--grey-surface) repeating-linear-gradient(35deg, transparent 0 22px, var(--white) 22px 25px); border-radius: 8px; margin-bottom: 8px; }
.vse__map-label { position: absolute; left: 10px; top: 8px; font-size: 0.75rem; font-weight: 600; background: var(--white); padding: 1px 6px; }
.vse__map i { position: absolute; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #8a8a8a; }
.vse__map i:nth-of-type(1) { left: 40%; top: 40%; } .vse__map i:nth-of-type(2) { left: 62%; top: 26%; } .vse__map i:nth-of-type(3) { left: 78%; top: 54%; }
.vse__results { position: relative; }
.vse__r { padding: 10px 0; border-bottom: 1px solid var(--grey-line); background: var(--white); }
.vse.is-live .vse__r { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.6s var(--ease); }
.vse__url { display: block; font-size: 0.75rem; color: var(--grey-text); }
.vse__r strong { display: block; font-weight: 500; font-size: 1rem; line-height: 1.3; }
.vse__snip { display: block; font-size: 0.8125rem; color: var(--grey-text); min-height: 1.1em; }
.vse__snip:empty { height: 7px; min-height: 0; margin-top: 6px; width: 70%; background: var(--grey-line); border-radius: 3px; }
.vse__r.is-you { background: var(--black); color: var(--white); padding-inline: 12px; z-index: 2; border-radius: 6px; }
.vse__r.is-you .vse__url, .vse__r.is-you .vse__snip { color: var(--grey-soft); }

/* ==========================================================================
   27. Crawl
   ========================================================================== */
.vcw__map { overflow-x: auto; }
.vcw__svg { width: 100%; min-width: 720px; height: auto; overflow: visible; }
.vcw__edges path { fill: none; stroke: var(--black); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.4s var(--ease); }
.anim .vcw__edges path:not(.is-drawn) { stroke-dashoffset: 1; }
.vcw__node rect { fill: var(--white); stroke: var(--grey-soft); stroke-width: 1; transition: fill 0.3s, stroke 0.3s; }
.vcw__node text { font-size: 10.5px; fill: var(--grey-text); transition: fill 0.3s; }
.vcw__node.is-visited rect { fill: var(--black); stroke: var(--black); }
.vcw__node.is-visited text { fill: var(--white); }
.vcw__node.is-home rect { stroke: var(--black); }
.vcw__node.is-broken.is-visited rect { fill: var(--white); stroke: var(--black); stroke-width: 2; }
.vcw__node.is-broken.is-visited text { fill: var(--black); text-decoration: line-through; }
.vcw__node.is-noindex.is-visited rect { fill: #9a9a9a; stroke: #9a9a9a; }
.vcw__node.is-orphan rect { fill: var(--white); stroke: var(--black); stroke-dasharray: 3 3; }
.vcw__crawler { fill: #ff4d2e; stroke: var(--white); stroke-width: 2; transition: opacity 0.5s; }
.vcw__crawler.is-done { opacity: 0; }
.vcw__legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 18px; font-size: var(--size-small); color: var(--grey-text); }
.vcw__key { display: flex; align-items: center; gap: 8px; }
.vcw__key i { width: 22px; height: 12px; border-radius: 2px; border: 1px solid var(--black); }
.vcw__key--ok i { background: var(--black); }
.vcw__key--broken i { border-width: 2px; background: linear-gradient(var(--white) 45%, var(--black) 45% 55%, var(--white) 55%); }
.vcw__key--noindex i { background: #9a9a9a; border-color: #9a9a9a; }
.vcw__key--orphan i { border-style: dashed; }

/* ==========================================================================
   28. Prompts
   ========================================================================== */
.vpr__field { position: relative; height: clamp(440px, 44vw, 560px); }
.vpr__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vpr__lines line { stroke: var(--grey-soft); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.anim .visual:not(.is-in) .vpr__lines line { stroke-dashoffset: 1; }
.vpr__prompt { position: absolute; left: calc(50% + cos(var(--a)) * 37%); top: calc(50% + sin(var(--a)) * 40%); transform: translate(-50%, -50%); width: max-content; max-width: min(30ch, 40%); }
.vpr__text { display: block; padding: 10px 14px; border: 1px solid var(--grey-line); background: var(--white); border-radius: 16px 16px 16px 4px; font-size: 0.875rem; line-height: 1.4; min-height: 2.6em; min-width: 3em; transition: border-color 0.3s; }
.anim .vpr__prompt:not(.is-typing):not(.is-done) .vpr__text { opacity: 0.25; }
.vpr__prompt.is-typing .vpr__text { border-color: var(--black); }
.vpr__prompt.is-typing .vpr__text::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: vch-blink 0.9s steps(1) infinite; }
.vpr__prompt.is-done .vpr__text { border-color: var(--black); }
.vpr__intent { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(150px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; background: var(--black); color: var(--white); display: grid; place-items: center; text-align: center; padding: 18px; font-weight: 500; line-height: 1.25; }
.vpr.is-complete .vpr__intent { animation: vpr-pulse 1.6s var(--ease) 1; }
@keyframes vpr-pulse { 40% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0.12); } 100% { box-shadow: 0 0 0 28px rgba(0, 0, 0, 0); } }

/* Μέσα σε άρθρο (στενή στήλη): το prompts σε μία στήλη */
.article__body .vpr__field { height: auto; display: grid; gap: 12px; }
.article__body .vpr__lines { display: none; }
.article__body .vpr__list { display: grid; gap: 10px; order: 2; }
.article__body .vpr__prompt { position: static; transform: none; max-width: none; width: auto; }
.article__body .vpr__intent { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 12px; order: 1; }

/* ==========================================================================
   Κινητό
   ========================================================================== */
@media (max-width: 860px) {
  .vo__tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .vo__tab { flex: 0 0 auto; min-width: 140px; scroll-snap-align: start; }
  .vo__stage, .vo__panels, .vpl__sheet, .vpl__list, .vcr__stage, .vcr__formats, .vr__chart, .vr__side, .vrd__map, .vrd__search, .vu__card, .vu__controls, .vw__plan, .vw__side, .vwh__wheel, .vwh__list, .vcd__counter, .vcd__ruler, .vfd__phone, .vfd__side, .vvn__diagram, .vvn__panel, .vn__monitor { grid-column: 1 / -1; }
  /* Στο κινητό ο κύκλος γίνεται λίστα: ο πυρήνας πάνω, τα κανάλια από κάτω σε ευανάγνωστα chips */
  .vo__stage { aspect-ratio: auto; max-width: none; display: grid; gap: 20px; justify-items: center; }
  .vo__lines { display: none; }
  .vo__core { position: relative; left: auto; top: auto; order: -1; width: 150px; margin: 0; }
  .vo__ring { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .vo__node { position: static; transform: none; max-width: none; font-size: 0.8125rem; padding: 7px 13px; }
  .vk__hoarding span { font-size: 0.75rem; }
  .vh { grid-template-columns: 1fr; }
  .vfan__deck { height: auto; display: flex; overflow-x: auto; gap: 12px; justify-content: flex-start; padding: 40px 4px 8px; scroll-snap-type: x mandatory; }
  .vfan__card { position: relative; transform: none !important; flex: 0 0 62%; scroll-snap-align: center; }
  .vfan__detail { text-align: left; }
  .vst { padding-left: 0; }
  .vst__axis { display: none; }
  .vst__steps { grid-template-columns: 1fr; border-bottom: 0; }
  .vst__step { grid-template-rows: auto; grid-template-columns: 90px 1fr; column-gap: 16px; padding: 0 0 18px; }
  .vst__col { grid-row: span 3; height: 120px; margin-right: 0; }
  .vst__step:not(:last-child) .vst__bar::after { display: none; }
  .vst__units { left: 6px; right: 6px; bottom: 6px; gap: 3px; }
  .vst__units i { width: 9px; height: 9px; }
  .vst__label { margin-top: 0; }
  .vsh__points { grid-template-columns: 1fr; }
  .vsh__row { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
  .vsh__gaze { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .vcd__counter { position: static; }
  .vcd__big { font-size: 5rem; }
  .vcd__ruler { grid-template-columns: 46px 1fr; }
  .vcs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vn__tlabel { font-size: 0.625rem; }
  .vn__track, .vn__ruler { grid-template-columns: 64px 1fr; }
  .vn__ruler { margin-left: 64px; }
  .vn__overlay { left: 64px; }
  .vrf__stage { padding: 12px; min-height: 0; }
  .vrf__b--hero { min-height: 120px; }
  .vau__head, .vau__row { grid-template-columns: 36px minmax(80px, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .vau__control { grid-template-columns: 1fr; gap: 8px; }
  .vk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk__tile--mark { grid-row: auto; grid-column: span 2; min-height: 220px; }
  .vkb__board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .vkb__col { flex: 0 0 72%; scroll-snap-align: start; min-height: 300px; }
  .vvn__spot { font-size: 0.8125rem; }
  .vvn__spot--small { font-size: 0.625rem; }
  .vpr__field { height: auto; display: grid; gap: 12px; }
  .vpr__lines { display: none; }
  .vpr__list { display: grid; gap: 10px; order: 2; }
  .vpr__prompt { position: static; transform: none; max-width: none; width: auto; }
  .vpr__intent { position: static; transform: none; width: auto; aspect-ratio: auto; border-radius: 12px; order: 1; }
}