/* ==============================
   Veze – Design System & Variables
   ============================== */
   :root {
    --vz-corner-color: #a3a3a3;
    --vz-border-color: #212121;
    --vz-accent-color: #0f0f0f;
    --vz-bg-color: #050505;
    --vz-btn-color: #0f0f0f;
    --vz-btn-hover-color: #212121;
    --vz-text-color: #f1f1f1;
    --vz-text-glow: #777777;
    --vz-comm-open: #f00;
    --vz-comm-close: #f00;
    --vz-btn-count: 1;
  }
  
  /* ----- Theme Variations ----- */
  body.vz-theme-white {
    --vz-corner-color: #a1a1aa;
    --vz-border-color: #2a2a2e;
    --vz-accent-color: #18181b;
    --vz-btn-color: #141417;
    --vz-btn-hover-color: #1c1c21;
    --vz-text-color: #e4e4e7;
    --vz-text-glow: rgba(255,255,255,0.18);
    --vz-comm-open: #f87171;
  }
  body.vz-theme-red {
    --vz-corner-color: #b91c1c;
    --vz-border-color: #3b1f1f;
    --vz-accent-color: #7f1d1d;
    --vz-btn-color: #1a1111;
    --vz-btn-hover-color: #251515;
    --vz-text-color: #fca5a5;
    --vz-text-glow: rgba(239,68,68,0.22);
    --vz-comm-open: #ef4444;
  }
  body.vz-theme-blue {
    --vz-corner-color: #14b8a6;
    --vz-border-color: #1f3a3a;
    --vz-accent-color: #0f766e;
    --vz-btn-color: #0b1c1c;
    --vz-btn-hover-color: #123232;
    --vz-text-color: #99f6e4;
    --vz-text-glow: rgba(20,184,166,0.22);
    --vz-comm-open: #2dd4bf;
  }
  body.vz-theme-yellow {
    --vz-corner-color: #ca8a04;
    --vz-border-color: #3f3314;
    --vz-accent-color: #854d0e;
    --vz-btn-color: #1f1a10;
    --vz-btn-hover-color: #2a2213;
    --vz-text-color: #fde68a;
    --vz-text-glow: rgba(234,179,8,0.22);
    --vz-comm-open: #facc15;
  }
  body.vz-theme-green {
    --vz-corner-color: #16a34a;
    --vz-border-color: #1f3a2a;
    --vz-accent-color: #166534;
    --vz-btn-color: #0f1f17;
    --vz-btn-hover-color: #163324;
    --vz-text-color: #86efac;
    --vz-text-glow: rgba(34,197,94,0.22);
    --vz-comm-open: #4ade80;
  }
  body.vz-theme-purple {
    --vz-corner-color: #8b5cf6;
    --vz-border-color: #2e1f45;
    --vz-accent-color: #5b21b6;
    --vz-btn-color: #140f1f;
    --vz-btn-hover-color: #1d1530;
    --vz-text-color: #c4b5fd;
    --vz-text-glow: rgba(139,92,246,0.22);
    --vz-comm-open: #a78bfa;
  }
  
  /* Image filter adjustments per theme */
  body:not([class*="vz-theme-"]) #vz-nav-rose::after,
  body:not([class*="vz-theme-"]) #vz-about-headshot::after,
  body.vz-theme-white #vz-nav-rose::after,
  body.vz-theme-white #vz-about-headshot::after {
    filter: none;
  }
  body.vz-theme-red #vz-nav-rose::after,
  body.vz-theme-red #vz-about-headshot::after {
    filter: sepia(0.8) saturate(3) hue-rotate(320deg) brightness(0.9);
  }
  body.vz-theme-blue #vz-nav-rose::after,
  body.vz-theme-blue #vz-about-headshot::after {
    filter: sepia(0.6) saturate(2.5) hue-rotate(160deg) brightness(0.95);
  }
  body.vz-theme-yellow #vz-nav-rose::after,
  body.vz-theme-yellow #vz-about-headshot::after {
    filter: sepia(0.9) saturate(3) hue-rotate(330deg) brightness(0.95);
  }
  body.vz-theme-green #vz-nav-rose::after,
  body.vz-theme-green #vz-about-headshot::after {
    filter: sepia(0.5) saturate(2) hue-rotate(80deg) brightness(0.9);
  }
  body.vz-theme-purple #vz-nav-rose::after,
  body.vz-theme-purple #vz-about-headshot::after {
    filter: sepia(0.7) saturate(3) hue-rotate(250deg) brightness(0.9);
  }
  
  /* ==============================
     RESET & BASE
     ============================== */
  * {
    overflow: hidden;
    box-sizing: border-box;
    font-family: "proFont";
    text-transform: uppercase;
    text-shadow: var(--vz-text-glow) 0 0 1vh;
    color: var(--vz-text-color);
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    scrollbar-width: none;
  }
  
  body {
    height: 100svh;
    margin: 0;
    border: 1vh solid var(--vz-bg-color);
    outline: 1px solid white;
    position: relative;
    background-color: var(--vz-bg-color);
  }
  
  html {
    background-color: var(--vz-bg-color);
  }
  
  /* ==============================
     TYPOGRAPHY & LINKS
     ============================== */
  a {
    text-decoration: none;
    color: #8f8;
  }
  
  h1 {
    all: unset;
    font-size: 10vh;
    text-align: center;
  }
  
  h2 {
    all: unset;
    font-size: 3vh;
    padding: 1vh;
    text-align: center;
  }
  
  h3 {
    all: unset;
    font-size: 2.5vh;
    text-align: center;
    background-color: var(--vz-accent-color);
    height: 3.5vh;
    padding-top: 0.5vh;
  }
  
  ::selection {
    background: var(--vz-text-color);
    color: var(--vz-bg-color);
  }
  
  .vz-selectable {
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
  
  /* ==============================
     UTILITY CLASSES
     ============================== */
  .vz-hidden {
    display: none !important;
  }
  
  .vz-shown {
    animation: vz-flicker 0.2s;
  }
  
  /* Corner-decorated outline */
  .vz-outlined {
    border: 1px solid var(--vz-border-color);
    background:
      linear-gradient(to right, var(--vz-corner-color) 1px, transparent 1px) 0 0,
      linear-gradient(to right, var(--vz-corner-color) 1px, transparent 1px) 0 100%,
      linear-gradient(to left, var(--vz-corner-color) 1px, transparent 1px) 100% 0,
      linear-gradient(to left, var(--vz-corner-color) 1px, transparent 1px) 100% 100%,
      linear-gradient(to bottom, var(--vz-corner-color) 1px, transparent 1px) 0 0,
      linear-gradient(to bottom, var(--vz-corner-color) 1px, transparent 1px) 100% 0,
      linear-gradient(to top, var(--vz-corner-color) 1px, transparent 1px) 0 100%,
      linear-gradient(to top, var(--vz-corner-color) 1px, transparent 1px) 100% 100%;
    background-repeat: no-repeat;
    background-size: 4px 4px;
  }
  
  .vz-bright-outlined {
    border: 1px solid white;
  }
  
  /* ==============================
     CRT EFFECTS
     ============================== */
  .crt {
    transform-origin: 50% 50%;
    content: "";
  }
  
  .crt::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background:
      linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
      linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%;
    z-index: 2;
    pointer-events: none;
  }
  
  #vz-crt-scan-fx {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(white, black, white);
    background-size: 100% 200%;
    mix-blend-mode: overlay;
    opacity: 0.2;
    pointer-events: none;
    animation: vz-scan-scroll 7s linear infinite;
  }
  
  /* ==============================
     LANDING PAGE
     ============================== */
  #vz-landing {
    display: flex;
    width: 100%;
    height: 100%;
    font-size: 3vh;
    gap: 2vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--vz-bg-color);
  }
  
  #vz-enter-button {
    width: 40vh;
    height: 6.4vh;
    background-color: var(--vz-btn-color);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    font-size: 5vh;
    cursor: pointer;
    pointer-events: all !important;
  }
  
  #vz-enter-button:hover {
    background-color: var(--vz-btn-hover-color);
  }
  
  /* ==============================
     UNFIT MESSAGE
     ============================== */
  #vz-display-unfit {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--vz-bg-color);
  }
  
  #vz-display-unfit h1 {
    font-size: 9vw;
  }
  
  #vz-display-unfit h2 {
    font-size: 3vw;
  }
  
  /* ==============================
     CONTROL PANEL (header)
     ============================== */
  #vz-control-panel {
    height: 100%;
    width: 60vh;
    display: flex;
    gap: 1vh;
  }
  
  #vz-volume-slider-wrapper {
    padding: 1vh;
    height: 100%;
    flex: 1;
  }
  
  #vz-volume-slider {
    appearance: none;
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: var(--vz-bg-color);
    overflow: hidden;
    cursor: pointer;
  }
  
  #vz-volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 1vh;
    background-color: var(--vz-accent-color);
  }
  
  #vz-volume-slider::-moz-range-progress {
    width: 100%;
    height: 1vh;
    background-color: var(--vz-text-color);
  }
  
  #vz-volume-slider::-moz-range-track {
    width: 100%;
    height: 1vh;
    background-color: var(--vz-accent-color);
  }
  
  #vz-volume-slider::-webkit-slider-thumb {
    appearance: none;
    width: 1vh;
    height: 3vh;
    margin-top: -1vh;
    background-color: var(--vz-text-color);
  }
  
  #vz-volume-slider::-moz-range-thumb {
    width: 1vh;
    height: 3vh;
    border: 0;
    border-radius: 0;
    background-color: var(--vz-text-color);
  }
  
  /* Toggle buttons */
  input[type=checkbox].vz-toggle {
    all: unset;
    height: 100%;
    aspect-ratio: 1;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    outline: 1px solid var(--vz-border-color);
    outline-offset: -1px;
    cursor: pointer;
  }
  
  #vz-music-toggle {
    background-image: url("../SOURCE/Image/Buttons/music_off.svg");
  }
  #vz-music-toggle:checked {
    background-image: url("../SOURCE/Image/Buttons/music_on.svg");
  }
  
  #vz-crt-toggle {
    background-image: url("../SOURCE/Image/Buttons/crt_off.svg");
  }
  #vz-crt-toggle:checked {
    background-image: url("../SOURCE/Image/Buttons/crt_on.svg");
  }
  
  #vz-theme-toggle {
    background-image: url("../SOURCE/Image/Buttons/theme.png");
    background-size: 40% 40%;
  }
  
  .vz-toggle:hover {
    background-color: var(--vz-btn-hover-color);
  }
  
  .vz-toggle:active {
    background-color: var(--vz-corner-color);
  }
  
  /* ==============================
     MAIN LAYOUT (grid)
     ============================== */
  #vz-wrapper {
    width: 100%;
    height: 100%;
    padding: 2vh;
    padding-top: 1vh;
    display: grid;
    grid-template-columns: 22.5vh auto;
    grid-template-rows: 6vh auto;
    grid-template-areas:
      "header header"
      "nav main";
    column-gap: 2vh;
    row-gap: 1vh;
    animation: vz-wrapper-appear cubic-bezier(0,1,0,1) 1s;
  }
  
  @keyframes vz-wrapper-appear {
    0% { background-color: white; filter: blur(6vh); }
    100% { filter: none; }
  }
  
  header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: 2vh;
  }
  
  #vz-site-title {
    font-size: 7vh;
  }

  /* Bigger about-page title */
  .vz-big-title {
    font-size: 12vh !important;
  }

  .vz-big-subtitle {
    font-size: 4.2vh !important;
  }

  #vz-about-greeting .vz-big-title,
  #vz-about-greeting .vz-big-subtitle {
    line-height: 1;
  }

  
  #vz-page-title {
    font-size: 5vh;
    flex: 2;
  }
  
  main {
    grid-area: main;
    position: relative;
    padding: 1vh;
    flex-grow: 2;
    display: flex;
    flex-direction: column;
    gap: 1vh;
  }
  
  #vz-context {
    height: 5vh;
    padding: 1vh;
    padding-top: 0.2vh;
    flex-shrink: 0;
    font-size: 3.5vh;
    background-color: var(--vz-accent-color);
  }
  
  .vz-page {
    width: 100%;
    flex-grow: 1;
  }
  
  /* ==============================
     SIDEBAR (navigation)
     ============================== */
  nav {
    grid-area: nav;
    display: flex;
    padding: 1vh;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
  }
  
  nav > div {
    width: 100%;
  }
  
  #vz-nav-rose {
    aspect-ratio: 1;
    cursor: help;
  }
  
  #vz-nav-rose::after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../SOURCE/Image/Veze/Head.png");
    background-size: 100% 100%;
    background-position-x: 50%;
    content: "";
  }
  
  #vz-nav-update {
    padding: 1vh;
    width: 100%;
    font-size: 1.8vh;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1vh;
  }
  
  #vz-nav-update div:last-child {
    margin-top: auto;
    font-size: 2.5vh;
    text-align: center;
  }
  
  .vz-nav-btn {
    height: 3.8vh;
    padding-left: 0.5vh;
    padding-top: 0.3vh;
    text-align: left;
    font-size: 2.5vh;
    background-color: var(--vz-btn-color);
    pointer-events: all !important;
    cursor: pointer;
    transition: all 0.03s ease-out;
    image-rendering: pixelated;
  }
  
  .vz-nav-btn:hover {
    background-color: var(--vz-btn-hover-color);
    padding-left: 1.5vh;
  }
  
  .vz-nav-btn:active {
    background-color: var(--vz-corner-color);
  }
  
  /* ==============================
     PAGE: ABOUT
     ============================== */
  #vz-page-about {
    display: grid;
    grid-template-columns: auto 35vh;
    grid-template-rows: 66.5% auto;
    grid-template-areas:
      "greeting headshot"
      "greeting description";
    gap: 1vh;
  }
  
  #vz-about-greeting {
    grid-area: greeting;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  #vz-about-headshot {
    grid-area: headshot;
    width: 35vh;
  }
  
  #vz-about-headshot::after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("../SOURCE/Image/Veze/Profile.png");
    background-size: auto 100%;
    background-position-x: 50%;
    content: "";
  }
  
  #vz-about-description {
    grid-area: description;
    padding: 1vh;
    padding-top: 0.7vh;
    font-size: 2.5vh;
  }
  
  #vz-about-description > li {
    width: 100%;
    text-align: right;
  }
  
  #vz-about-description > li::before {
    float: left;
    content: attr(label) ":";
  }
  
  /* ==============================
     PAGE: GALLERY
     ============================== */
  #vz-page-gallery {
    position: relative;
  }
  
  #vz-gallery-masonry {
    padding: 1vh;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--vz-accent-color);
  }
  
  #vz-gallery-columns {
    display: flex;
    gap: 1vh;
  }
  
  .vz-gallery-column {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    overflow: visible;
  }
  
  .vz-gallery-item-wrapper {
    perspective: 10vh;
    perspective-origin: 50% 50%;
    overflow: visible;
  }
  
  .vz-gallery-item {
    transition: transform 0.1s ease-out;
    position: relative;
    flex-shrink: 0;
    padding: 1vh;
    cursor: pointer;
    transform-origin: center center;
    animation:
      vz-gallery-glow 2s cubic-bezier(0,1,0,1) forwards,
      vz-gallery-appear 0.5s cubic-bezier(0,1,0,1) forwards;
    opacity: 0;
  }
  
  .vz-gallery-thumb {
    width: 100%;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    filter: grayscale();
    transition: filter 1s ease-out;
  }
  
  .vz-gallery-item:hover {
    background-color: var(--vz-btn-hover-color);
    border: 1px solid white;
    transition: none;
  }
  
  .vz-gallery-item:hover > .vz-gallery-title {
    background-color: var(--vz-btn-hover-color);
  }
  
  .vz-gallery-item:hover > .vz-gallery-thumb {
    filter: none;
    transition: none;
    border: 1px solid white;
  }
  
  .vz-gallery-title {
    min-height: 4vh;
    margin-top: 1vh;
    padding: 0.5vh 0 0.5vh 1vh;
    font-size: 1.3vw;
    background-color: var(--vz-btn-color);
    text-transform: none;
    text-align: center;
  }
  
  #vz-gallery-mask {
    position: absolute;
    width: calc(100% - 2vh);
    height: calc(100% - 2px);
    top: 1px;
    left: 1vh;
    background-image: linear-gradient(to bottom,
      var(--vz-accent-color),
      transparent 2%,
      transparent 98%,
      var(--vz-accent-color));
    pointer-events: none;
  }
  
  /* ==============================
     ART VIEWER (shared overlay)
     ============================== */
  .vz-art-viewer {
    width: 100%;
    height: 100%;
    position: absolute;
    background: repeating-conic-gradient(#000000ee 0 25%, #0e0e0e88 0 50%) 50% / 4px 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vz-border-color);
  }
  
  .vz-art-viewer-image {
    width: auto;
    height: 80vh;
    image-rendering: pixelated;
    user-select: none;
    cursor: grab;
    outline: 1px solid white;
    outline-offset: 5px;
    box-shadow: rgba(0,0,0,0.8) 0 0 32px 32px;
    animation: vz-art-viewer-pulse 1.0s cubic-bezier(0,1,0,1);
    background-color: rgba(0,0,0,0.7);
    background-size: 100% 100%;
    z-index: 5;
  }
  
  .vz-art-viewer-image:active {
    cursor: grabbing;
  }
  
  .vz-art-viewer-instructions {
    position: absolute;
    width: 100%;
    height: 20vh;
    text-align: center;
    top: 1vh;
    font-size: 3vh;
    background-image: linear-gradient(rgba(0,0,0,0.5), transparent);
    pointer-events: none;
  }
  
  .vz-art-viewer-details {
    text-shadow: red 0 0 1vh !important;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: auto;
    bottom: 1vh;
    pointer-events: none;
    animation: vz-art-viewer-pulse 1.0s cubic-bezier(0,1,0,1);
  }
  
  .vz-art-viewer-title {
    font-size: 4vh;
    flex-shrink: 0;
    user-select: text;
    pointer-events: all;
    padding: 0 2vh;
  }
  
  /* ==============================
     PAGE: PINS
     ============================== */
  #vz-page-pins {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1vh;
  }
  
  #vz-pins-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1vh;
    gap: 1vh;
    flex: 1;
  }
  
  #vz-pins-top-row {
    display: flex;
    gap: 1vh;
    flex: 2;
  }
  
  #vz-pins-top-row img {
    flex: 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 1px solid var(--vz-border-color);
    cursor: pointer;
    filter: grayscale();
    transition: filter 0.3s ease-out;
    animation: vz-gallery-appear 0.5s cubic-bezier(0,1,0,1) forwards;
    opacity: 0;
  }
  
  #vz-pins-top-row img:hover {
    filter: none;
    border-color: white;
  }
  
  #vz-pins-bottom-row {
    flex: 1;
    overflow: hidden;
  }
  
  #vz-pins-bottom-scroller {
    display: flex;
    overflow-x: auto;
    padding: 0 1vh;
    gap: 1vh;
    height: 100%;
    align-items: center;
  }
  
  #vz-pins-bottom-scroller img {
    height: 95%;
    aspect-ratio: 9/16;
    border: 1px solid var(--vz-btn-hover-color);
    cursor: pointer;
    filter: grayscale();
    transition: filter 0.5s ease-out, outline-color 0.5s;
    animation: vz-gallery-appear 0.5s cubic-bezier(0,1,0,1) forwards;
    opacity: 0;
    flex-shrink: 0;
  }
  
  #vz-pins-bottom-scroller img:hover {
    filter: none;
    border-color: white;
  }
  
  /* ==============================
     PAGE: BLOG
     ============================== */
  #vz-page-blog {
    position: relative;
  }
  
  #vz-blog-list {
    padding: 1vh;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .vz-blog-item {
    width: 100%;
    height: auto;
    display: grid;
    padding: 1vh;
    animation: vz-blog-glow 3s cubic-bezier(0,1,0,1);
  }
  
  .vz-blog-item-header {
    background-color: var(--vz-accent-color);
    font-size: 3vh;
    padding: 0.5vh 0;
    display: flex;
  }
  
  .vz-blog-item-title {
    flex-grow: 1;
    padding: 0 1vh;
    user-select: text;
  }
  
  .vz-blog-item-date {
    padding: 0 1vh;
    user-select: text;
  }
  
  .vz-blog-item-body {
    font-size: 2vh;
    text-transform: none;
    padding: 0.5vh;
    user-select: text;
  }
  
  /* ==============================
     PAGE: LINKS
     ============================== */
  #vz-page-links {
    display: flex;
    flex-direction: column;
    gap: 1vh;
  }
  
  .vz-link {
    width: 100%;
    padding: 3vh;
    background-color: var(--vz-btn-color);
    display: flex;
    align-items: center;
    flex: 1;
    cursor: pointer;
    transform: scaleY(0);
    animation:
      vz-link-appear 0.1s ease-out forwards,
      vz-link-glow 2s cubic-bezier(0,1,0,1);
    transition: background-color 0.5s ease-out;
  }
  
  .vz-link:hover {
    background-color: var(--vz-btn-hover-color) !important;
    transition: background-color 0s;
  }
  
  .vz-link-icon {
    height: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
  }
  
  .vz-link-title {
    padding: 0 2vh;
    font-size: 3vh;
  }
  
  .vz-link-handle {
    text-align: right;
    font-size: 3vh;
    flex-grow: 1;
  }
  
  /* ==============================
     PAGE: CHRONICLE
     ============================== */
  #vz-chronicle-container {
    display: flex;
    height: 100%;
    width: 100%;
    gap: 1vh;
    padding: 1vh;
    background-color: var(--vz-accent-color);
  }
  
  #vz-chronicle-sidebar {
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    overflow-y: auto;
    padding-right: 0.5vh;
  }
  
  .vz-chronicle-btn {
    background-color: var(--vz-btn-color);
    padding: 1.5vh 1vh;
    text-align: center;
    font-size: 2.2vh;
    cursor: pointer;
    transition: background-color 0.1s;
    flex-shrink: 0;
  }
  
  .vz-chronicle-btn:hover {
    background-color: var(--vz-btn-hover-color);
  }
  
  .vz-chronicle-btn.vz-active {
    background-color: var(--vz-corner-color);
    border-color: white;
  }
  
  #vz-chronicle-content {
    flex: 1;
    background-color: #000;
    border: 1px solid var(--vz-border-color);
  }
  
  #vz-chronicle-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #111;
  }
  
  /* ==============================
     EXISTENCE PAGE & BLOOD BUTTON
     ============================== */
  .vz-nav-btn.vz-blood:hover,
  .vz-blood:hover {
    color: #f00 !important;
    border-color: #500 !important;
    background-color: #300 !important;
    text-shadow: #f00 0 0 1vh;
  }
  
  #vz-page-existence {
    width: 100%;
    height: 100%;
  }
  
  #vz-page-existence > div {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    height: 100%;
    gap: 1vh;
  }
  
  #vz-page-existence .vz-mut-left {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    width: 53vh;
  }
  
  #vz-page-existence .vz-mut-right {
    text-wrap: pretty;
    text-transform: none !important;
    text-align: center;
    width: 72%;
    padding: 1vh;
    font-size: 1.7vw;
  }
  
  #vz-page-existence .vz-selectable[style*="color: #f00"] {
    color: #f00 !important;
    text-shadow: #f00 0 0 1vh !important;
  }
  
  /* ==============================
     ANIMATIONS
     ============================== */
  @keyframes vz-link-appear {
    0% { transform: scaleY(0); width: 0%; }
    100% { transform: none; width: 100%; }
  }
  
  @keyframes vz-link-glow {
    0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--vz-corner-color); }
    100% { filter: none; background-color: var(--vz-btn-color); }
  }
  
  @keyframes vz-blog-glow {
    0% { filter: contrast(0) brightness(3) blur(0.7vh); background-color: var(--vz-corner-color); }
    100% { filter: none; background-color: none; }
  }
  
  @keyframes vz-gallery-glow {
    0% { filter: contrast(0) brightness(3) blur(4vh); background-color: var(--vz-corner-color); }
    100% { filter: none; background-color: var(--vz-bg-color); }
  }
  
  @keyframes vz-gallery-appear {
    0% { opacity: 1; transform: scaleX(1) scaleY(0.04); }
    100% { opacity: 1; transform: none; }
  }
  
  @keyframes vz-scan-scroll {
    0% { background-position-y: 0vh; }
    100% { background-position-y: 200vh; }
  }
  
  @keyframes vz-flicker {
    0% { filter: brightness(4); opacity: 0.0; }
    20% { opacity: 1; }
    40% { opacity: 0.5; }
    60% { opacity: 1; }
    80% { opacity: 0.7; }
    100% { filter: none; opacity: unset; }
  }
  
  @keyframes vz-art-viewer-pulse {
    0% { outline-width: 80px; outline-offset: 50px; filter: brightness(10) blur(16px); }
    100% { outline-width: 1px; outline-offset: 5px; filter: none; }
  }
  
  /* ==============================
     FONTS
     ============================== */
  @font-face {
    font-family: "proFont";
    src: local("proFont"), url("../Fonts/proFont.woff2") format("woff2");
  }