/* ========== TYPE ========== */
    @font-face {
      font-family: "BasementType";
      src: url("/Assets/Type(1).otf") format("opentype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* ========== TOKENS ========== */
    :root {
      --black: #000000;
      --white: #ffffff;
      --red: #ff0000;
      --bg: var(--black);
      --chrome: var(--red);
      --active: var(--red);
      --u: calc(100vw / 1920);
      --iso: calc(32 * var(--u));
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    html[data-section="landing"] {
      --bg: var(--black);
      --chrome: var(--red);
      --active: var(--red);
    }
    html[data-section="archivos"] {
      --bg: var(--black);
      --chrome: var(--white);
      --active: var(--red);
    }
    html[data-section="servicios"] {
      --bg: var(--black);
      --chrome: var(--white);
      --active: var(--red);
    }
    html[data-section="nosotros"] {
      --bg: var(--red);
      --chrome: var(--black);
      --active: var(--white);
    }
    html[data-section="invocar"] {
      --bg: var(--black);
      --chrome: var(--red);
      --active: var(--white);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scrollbar-width: none;
    }
    html::-webkit-scrollbar { display: none; }

    html, body {
      background: var(--bg);
      color: var(--chrome);
    }

    body {
      font-family: "BasementType", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      font-size: 17.5px;
      line-height: 1.45;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      cursor: default;
    }

    img { display: block; max-width: 100%; }
    button, a, input, textarea, label, pre { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
    button { background: none; border: 0; cursor: pointer; }
    a { text-decoration: none; }
    input, textarea {
      background: transparent;
      border: 0;
      outline: none;
      caret-color: currentColor;
      text-transform: none;
    }

    /* Optical weight correction for black interface text on red surfaces. */
    #nosotros .nos-head,
    #nosotros .nos-card,
    .chrome-mask[data-chrome-section="nosotros"] .nav a:not(.is-active) {
      -webkit-text-stroke: 0.30px currentColor;
    }

    #nosotros .nos-card:hover,
    #nosotros .nos-card:focus-visible {
      -webkit-text-stroke: 0;
    }

    :focus-visible {
      outline: 1px solid currentColor;
      outline-offset: 3px;
    }

    /* ========== FIXED IDENTITY ========== */
    .chrome {
      position: fixed;
      top: calc(11 * var(--u));
      left: calc(13 * var(--u));
      z-index: 80;
      color: var(--chrome);
      pointer-events: none;
    }
    .chrome > * { pointer-events: auto; }
    .chrome-hit {
      z-index: 83;
      opacity: 0;
    }
    .chrome-mask {
      position: fixed;
      inset: 0;
      z-index: 82;
      overflow: hidden;
      pointer-events: none;
      clip-path: inset(0 0 100% 0);
    }
    .chrome-mask .chrome {
      z-index: 0;
      color: var(--mask-chrome);
    }
    .chrome-mask .chrome > * { pointer-events: none; }
    .chrome-mask .nav a { color: var(--mask-chrome); }
    .chrome-mask .nav a.is-active { color: var(--mask-active); }
    .chrome-mask[data-chrome-section="landing"] { --mask-chrome: var(--red); --mask-active: var(--red); }
    .chrome-mask[data-chrome-section="archivos"] { --mask-chrome: var(--white); --mask-active: var(--red); }
    .chrome-mask[data-chrome-section="servicios"] { --mask-chrome: var(--white); --mask-active: var(--red); }
    .chrome-mask[data-chrome-section="nosotros"] { --mask-chrome: var(--black); --mask-active: var(--white); }
    .chrome-mask[data-chrome-section="invocar"] { --mask-chrome: var(--red); --mask-active: var(--white); }

    .brand {
      position: relative;
      display: block;
      width: calc(210 * var(--u));
      height: calc(28 * var(--u));
      margin-bottom: calc(52 * var(--u));
      left: 0;
      top: 0;
    }
    .brand-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .brand-star img,
    .brand-logo img {
      height: calc(28 * var(--u));
      width: auto;
      max-width: none;
      pointer-events: none;
    }
    .brand-star img {
      width: calc(28 * var(--u));
      height: calc(28 * var(--u));
    }
    .chrome-mask[data-chrome-section="nosotros"] .brand img { filter: brightness(0); }
    .chrome-mask[data-chrome-section="archivos"] .brand img,
    .chrome-mask[data-chrome-section="servicios"] .brand img { filter: none; }
    .chrome-mask[data-chrome-section="landing"] .brand img,
    .chrome-mask[data-chrome-section="invocar"] .brand img {
      filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(7444%) hue-rotate(359deg) brightness(111%) contrast(117%);
    }

    .nav {
      display: flex;
      flex-direction: column;
      width: max-content;
      gap: 0;
      border-left: 1px solid currentColor;
      padding-left: calc(11 * var(--u));
    }
    .nav a {
      position: relative;
      display: block;
      white-space: nowrap;
      height: calc(23 * var(--u));
      line-height: calc(23 * var(--u));
    }
    .nav a::before {
      content: "";
      position: absolute;
      left: calc(-11 * var(--u));
      top: 50%;
      width: calc(10 * var(--u));
      border-top: 1px solid currentColor;
    }
    .nav a.is-active {
      color: var(--active);
    }
    /* ========== SECTIONS ========== */
    section.panel {
      position: relative;
      z-index: 1;
      height: 100vh;
      min-height: calc(640 * var(--u));
      background: var(--section-bg, transparent);
    }
    #landing { --section-bg: var(--black); color: var(--red); }
    #nosotros { --section-bg: var(--red); color: var(--black); }
    #archivos, #servicios, #invocar { --section-bg: var(--black); color: var(--white); }
    #invocar { color: var(--red); }

    /* ========== LANDING ========== */
    #landing { overflow: hidden; }
    .landing-mark {
      position: absolute;
      left: calc(404 * var(--u));
      top: calc(96 * var(--u));
    }
    .landing-stage {
      position: absolute;
      left: calc(180 * var(--u));
      right: calc(80 * var(--u));
      top: calc(170 * var(--u));
      bottom: calc(190 * var(--u));
      pointer-events: none;
    }
    .landing-copy {
      position: absolute;
      left: calc(404 * var(--u));
      top: calc(894 * var(--u));
      max-width: calc(720 * var(--u));
      display: flex;
      flex-direction: column;
      gap: calc(12 * var(--u));
    }
    .landing-copy .cta {
      margin-top: calc(18 * var(--u));
      align-self: flex-start;
    }
    .landing-copy .cta:hover { opacity: 0.7; }

    /* ========== ARCHIVOS ========== */
    #archivos { overflow: hidden; }
    .desktop {
      position: relative;
      width: 100%;
      height: 100%;
    }
    .win {
      position: absolute;
      display: flex;
      flex-direction: column;
      background: var(--black);
      color: var(--white);
      border: 1px solid var(--white);
      min-width: calc(220 * var(--u));
      min-height: calc(35 * var(--u));
    }
    .win.is-opening {
      pointer-events: none;
      will-change: clip-path;
    }
    .win.is-min { min-height: 0; height: auto !important; }
    .win.is-min .win-body { display: none; }
    .win.is-front { z-index: 20; }
    .win-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: var(--black);
      color: var(--white);
      border-bottom: 1px solid var(--white);
      padding: calc(4 * var(--u)) calc(10 * var(--u));
      cursor: grab;
      user-select: none;
      min-height: calc(35 * var(--u));
      flex: 0 0 auto;
    }
    .win-bar:active { cursor: grabbing; }
    .win-title { min-width: 0; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .win-ctrl {
      width: calc(22 * var(--u));
      height: calc(20 * var(--u));
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: var(--white);
    }
    .win-ctrl:hover { color: var(--red); }
    .win-ctrl img {
      display: block;
      width: calc(13 * var(--u));
      height: calc(13 * var(--u));
      object-fit: contain;
      pointer-events: none;
    }
    .win-ctrl[data-icon="min"] img {
      width: calc(14 * var(--u));
      height: auto;
    }
    .win-body {
      flex: 1;
      min-height: 0;
      padding: calc(18 * var(--u));
      overflow: hidden;
    }
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(calc(70 * var(--u)), 1fr));
      gap: calc(20 * var(--u));
      width: 100%;
    }
    .fs-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(8 * var(--u));
      min-width: 0;
      width: 100%;
      color: var(--white);
      text-align: center;
      padding: 0;
    }
    .fs-item img {
      width: calc(70 * var(--u));
      height: calc(70 * var(--u));
      object-fit: contain;
      filter: none;
      border: 0;
      padding: 0;
    }
    .fs-item.is-selected img,
    .fs-item:focus-visible img {
      outline: 1px solid var(--red);
      outline-offset: calc(2 * var(--u));
    }
    .fs-item.is-selected { color: var(--red); }
    .fs-item.is-sequence-pending { visibility: hidden; }
    .fs-label {
      display: block;
      width: 100%;
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-align: center;
    }
    .fs-label-track {
      display: inline-flex;
      min-width: max-content;
      will-change: transform;
    }
    .fs-label-copy { display: inline-block; }
    .fs-label-copy[aria-hidden="true"] { display: none; }
    .fs-label.is-marquee .fs-label-copy {
      display: inline-block;
      padding-right: calc(20 * var(--u));
    }
    .fs-label.is-marquee .fs-label-track {
      animation: fs-label-marquee var(--marquee-duration, 6s) linear 0.75s infinite;
    }
    @keyframes fs-label-marquee {
      to { transform: translateX(calc(-1 * var(--marquee-shift, 0px))); }
    }
    .win[data-open-mode="folder"] .win-body,
    .win[data-open-mode="text"] .win-body {
      overflow: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--white) var(--black);
      scrollbar-gutter: stable;
    }
    .win[data-open-mode="folder"] .win-body::-webkit-scrollbar,
    .win[data-open-mode="text"] .win-body::-webkit-scrollbar {
      width: calc(8 * var(--u));
      height: calc(8 * var(--u));
    }
    .win[data-open-mode="folder"] .win-body::-webkit-scrollbar-track,
    .win[data-open-mode="text"] .win-body::-webkit-scrollbar-track {
      background: var(--black);
    }
    .win[data-open-mode="folder"] .win-body::-webkit-scrollbar-thumb,
    .win[data-open-mode="text"] .win-body::-webkit-scrollbar-thumb {
      background: var(--white);
      border: 1px solid var(--black);
    }
    .win[data-open-mode="folder"] .win-body::-webkit-scrollbar-corner,
    .win[data-open-mode="text"] .win-body::-webkit-scrollbar-corner {
      background: var(--black);
    }
    .viewer-ph {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: calc(240 * var(--u));
      display: grid;
      place-items: center;
    }
    .viewer-ph img {
      width: calc(128 * var(--u));
      filter: none;
    }
    .viewer-ph .viewer-media {
      display: block;
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .media-audio-toggle {
      position: absolute;
      top: calc(12 * var(--u));
      left: calc(12 * var(--u));
      z-index: 3;
      width: clamp(22px, 8%, calc(30 * var(--u)));
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 1px solid var(--white);
      background: rgba(0, 0, 0, 0.72);
      color: var(--white);
    }
    .media-audio-toggle:hover,
    .media-audio-toggle:focus-visible { color: var(--red); border-color: var(--red); }
    .media-audio-toggle svg {
      width: 68%;
      height: 68%;
      overflow: visible;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: square;
      stroke-linejoin: miter;
      pointer-events: none;
    }
    .media-audio-toggle .audio-waves { display: none; }
    .media-audio-toggle.is-audible .audio-waves { display: block; }
    .media-audio-toggle.is-audible .audio-muted { display: none; }
    .readme {
      white-space: pre-wrap;
      line-height: 1.7;
    }
    .resize {
      position: absolute;
      z-index: 2;
    }
    .resize.n, .resize.s { left: 8px; right: 8px; height: 8px; cursor: ns-resize; }
    .resize.e, .resize.w { top: 8px; bottom: 8px; width: 8px; cursor: ew-resize; }
    .resize.n { top: 0; }
    .resize.s { bottom: 0; }
    .resize.e { right: 0; }
    .resize.w { left: 0; }
    .resize.ne, .resize.nw, .resize.se, .resize.sw {
      width: 12px; height: 12px;
    }
    .resize.ne { top: 0; right: 0; cursor: nesw-resize; }
    .resize.nw { top: 0; left: 0; cursor: nwse-resize; }
    .resize.se { bottom: 0; right: 0; cursor: nwse-resize; }
    .resize.sw { bottom: 0; left: 0; cursor: nesw-resize; }
    .win.is-min .resize { display: none; }

    /* ========== SERVICIOS ========== */
    #servicios { overflow: hidden; }
    .flow-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
    }
    #flow-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    #flow-svg path {
      fill: none;
      stroke: var(--red);
      stroke-width: 1;
      stroke-linecap: square;
      stroke-linejoin: miter;
    }
    .flow-node {
      position: absolute;
      color: var(--red);
      white-space: nowrap;
      background: var(--black);
      padding: calc(2 * var(--u)) calc(4 * var(--u));
      z-index: 1;
      visibility: hidden;
      opacity: 0;
    }
    .flow-node.is-visible {
      visibility: visible;
      opacity: 1;
    }
    .flow-node:hover,
    .flow-node:focus-visible,
    .flow-node.is-selected {
      color: var(--white);
    }
    .svc-info {
      position: absolute;
      left: calc(176 * var(--u));
      bottom: calc(115 * var(--u));
      color: var(--red);
      max-width: calc(1120 * var(--u));
      z-index: 2;
    }
    .svc-info h2 {
      font-size: 1em;
      font-weight: 400;
      margin-bottom: calc(10 * var(--u));
    }
    .svc-info p { line-height: 1.5; white-space: nowrap; }
    .svc-stage {
      position: absolute;
      left: calc(1010 * var(--u));
      right: calc(24 * var(--u));
      top: calc(100 * var(--u));
      bottom: calc(100 * var(--u));
      overflow: visible;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 280ms linear;
    }
    .svc-stage.is-ready { opacity: 1; }
    .services-ascii-frame {
      position: absolute;
      left: -14%;
      top: 52.5%;
      width: 128%;
      aspect-ratio: 32 / 27;
      transform: translateY(-50%);
      overflow: hidden;
    }
    #servicesAscii {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: var(--red);
      background: transparent;
      font-family: "BasementType", ui-monospace, monospace;
      font-weight: 400;
      line-height: 0.7 !important;
      letter-spacing: 0 !important;
      text-transform: none !important;
      white-space: pre;
      user-select: none;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    #servicesThreeCanvas,
    #servicesSampleCanvas { display: none; }

    /* ========== NOSOTROS ========== */
    #nosotros { overflow: hidden; }
    .nos-head {
      position: absolute;
      left: 50%;
      top: calc(96 * var(--u));
      width: calc(1500 * var(--u));
      max-width: calc(1500 * var(--u));
      transform: translateX(-50%);
      text-align: center;
      line-height: 1.45;
      white-space: normal;
    }
    .nos-stage {
      position: absolute;
      left: calc(250 * var(--u));
      right: calc(250 * var(--u));
      top: calc(170 * var(--u));
      bottom: calc(160 * var(--u));
      display: grid;
      place-items: center;
      overflow: hidden;
      pointer-events: none;
    }
    #nosAscii {
      position: absolute;
      inset: 0;
      margin: 0;
      overflow: hidden;
      color: var(--black);
      background: transparent;
      font-family: "BasementType", monospace;
      font-weight: 400;
      font-size: 17.5px;
      line-height: .7;
      letter-spacing: 0;
      font-kerning: none;
      font-variant-ligatures: none;
      font-feature-settings: "kern" 0, "liga" 0, "calt" 0;
      text-transform: none;
      -webkit-text-stroke: 0.30px currentColor;
      white-space: pre;
      user-select: none;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    .nos-ascii-video,
    #nosSourceCanvas,
    #nosSampleCanvas { display: none; }
    .nos-cards {
      position: absolute;
      inset: 0;
    }
    .nos-card {
      border: 1px solid var(--black);
      position: absolute;
      bottom: calc(95 * var(--u));
      min-height: calc(35 * var(--u));
      display: inline-grid;
      place-items: center;
      color: var(--black);
      background: transparent;
      padding: 0 calc(10 * var(--u));
    }
    .nos-card[data-card="impacto"] { left: calc(395 * var(--u)); }
    .nos-card[data-card="criterio"] { left: calc(923 * var(--u)); }
    .nos-card[data-card="adaptacion"] { left: calc(1436 * var(--u)); }
    .nos-card:hover,
    .nos-card:focus-visible {
      background: var(--black);
      color: var(--red);
    }

    /* ========== INVOCAR ========== */
    #invocar { overflow: hidden; }
    .term {
      position: absolute;
      left: calc(404 * var(--u));
      top: calc(96 * var(--u));
      width: calc(1000 * var(--u));
      color: var(--red);
    }
    .term-path { margin-bottom: calc(22 * var(--u)); }
    .term-row, .term-help, .term-actions { margin-bottom: calc(14 * var(--u)); }
    .term-row { width: max-content; max-width: 100%; }
    .term-field {
      display: inline-block;
      min-width: 0;
      padding: 0 calc(4 * var(--u));
      color: var(--red);
    }
    .term-field::placeholder { color: var(--red); opacity: 1; }
    .term-field:focus { background: rgba(255, 0, 0, 0.13); }
    .term-field.is-always-active {
      border: 1px solid var(--red);
      background: rgba(255, 0, 0, 0.08);
      padding: calc(6 * var(--u)) calc(8 * var(--u));
    }
    .term-field.is-always-active:focus { background: rgba(255, 0, 0, 0.14); }
    input.term-field.term-field-wide {
      width: 38ch !important;
      max-width: min(100%, calc(480 * var(--u)));
    }
    textarea.term-field {
      display: block;
      width: min(100%, calc(680 * var(--u)));
      min-height: calc(96 * var(--u));
      padding: calc(6 * var(--u)) calc(4 * var(--u));
      resize: vertical;
    }
    textarea.term-field.is-always-active {
      padding: calc(8 * var(--u));
    }
    .term-actions { display: flex; gap: calc(24 * var(--u)); margin-top: calc(20 * var(--u)); }
    .term-btn {
      padding: calc(4 * var(--u)) 0;
      color: var(--red);
    }
    .term-btn:hover, .term-btn:focus-visible { color: var(--white); }
    .svc-picks { display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: calc(650 * var(--u)); }
    .svc-pick {
      padding: calc(4 * var(--u)) 0;
      color: var(--red);
    }
    .svc-pick:hover,
    .svc-pick[aria-pressed="true"] { color: var(--white); }
    .term-error { color: var(--red); margin: 12px 0; }
    .term-process {
      white-space: pre-wrap;
      min-height: calc(80 * var(--u));
      line-height: 1.6;
    }
    .term-process.is-unstable {
      --term-jitter-speed: 270ms;
      --term-jitter-distance: .8px;
      animation: term-jitter var(--term-jitter-speed) steps(2, end) infinite;
      text-shadow: 1px 0 0 rgba(255, 0, 0, .65), -1px 0 0 rgba(255, 0, 0, .35);
    }
    .term-done { white-space: pre-wrap; line-height: 1.6; }
    @keyframes term-jitter {
      0%, 100% { transform: translate(0, 0); }
      20% { transform: translate(calc(0px - var(--term-jitter-distance)), 0); }
      40% { transform: translate(0, calc(0px - var(--term-jitter-distance))); }
      60% { transform: translate(var(--term-jitter-distance), 0); }
      80% { transform: translate(0, var(--term-jitter-distance)); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; animation: none !important; }
    }



    /* RECORDS V100 ASCII pipeline, adapted to DIGITAL media sources. */
    #landing {
      isolation: isolate;
    }

    #landing > :not(.landing-ascii-stage) {
      z-index: 2;
    }

    .landing-ascii-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: grid;
      place-items: center;
      overflow: visible;
      pointer-events: none;
    }

    #landingAscii {
      margin: 0;
      padding: 0;
      white-space: pre;
      font-family: "BasementType", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      font-weight: 400;
      letter-spacing: 0em;
      line-height: 0.7;
      text-align: left;
      text-transform: none !important;
      color: var(--red);
      user-select: none;
      pointer-events: none;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
      will-change: contents;
    }

    #landingAsciiVideoIntro,
    #landingAsciiVideoLoop,
    #landingAsciiCanvas {
      display: none;
    }

    #archivos {
      isolation: isolate;
    }

    #archivos > .desktop {
      z-index: 2;
    }

    .archivos-ascii-stage {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      display: grid;
      place-items: center;
      overflow: hidden;
      pointer-events: none;
    }

    #archivosAscii {
      margin: 0;
      padding: 0;
      white-space: pre;
      font-size: 17.5px;
      font-family: "BasementType", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      font-weight: 400;
      letter-spacing: 0em;
      line-height: 0.7;
      text-align: left;
      text-transform: none !important;
      color: #ff0000;
      user-select: none;
      pointer-events: none;
      text-rendering: geometricPrecision;
      -webkit-font-smoothing: antialiased;
      will-change: contents;
    }

    #archivosAsciiVideo,
    #archivosSourceCanvas,
    #archivosSampleCanvas {
      display: none;
    }

    /* Match the approved RECORDS V100 landing-copy origin and bottom clearance. */
    @media (min-width: 1101px) {
      .landing-copy {
        left: 500px;
        top: auto;
        bottom: 8vh;
      }
    }

    /* Match the approved RECORDS V100 positions for the brand and landing mark. */
    @media (min-width: 1101px) and (max-width: 1920px) {
      .brand { left: 0; top: 0; }

      .landing-mark {
        left: 500px;
        top: 104px;
      }
    }

    @media (min-width: 1921px) {
      .brand { left: 0; top: 0; }

      .landing-mark {
        left: 500px;
        top: calc(5vw + 8px);
      }
    }

    /* ========== LAYOUT MODES ========== */
    :root {
      --stage-scale: 1;
      --stage-left: 0px;
      --stage-top: 0px;
    }

    html, body { background: var(--black); }
    body { min-width: 0; overflow-x: hidden; }

    .panel-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: var(--section-bg, var(--black));
      color: inherit;
    }

    #landing .panel-canvas > :not(.landing-ascii-stage) { z-index: 2; }
    #archivos .panel-canvas > .desktop { position: relative; z-index: 1; }

    /* Exact footer system from BASEMENT RECORDS V100. */
    #footer {
      position: relative;
      width: 100%;
      height: calc(286 * var(--u));
      min-height: 0;
      overflow: hidden;
      background: var(--black);
      color: var(--white);
    }

    .footer-canvas {
      width: 100%;
      height: 100%;
      padding: calc(80 * var(--u)) calc(500 * var(--u)) calc(48 * var(--u));
      background: var(--black);
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 48px;
    }

    .footer-iso {
      width: calc(93.333333 * var(--u));
      mix-blend-mode: screen;
      opacity: 0.95;
    }

    #footer .footer-copy {
      font-size: 11px;
      letter-spacing: 0.18em;
      opacity: 0.85;
    }

    .form-honeypot {
      position: absolute !important;
      left: -100000px !important;
      top: auto !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    .invocation-form { display: contents; }

    html[data-layout="mobile-stage"] {
      --u: 1px;
    }

    html[data-layout="mobile-stage"] section.panel {
      width: 100%;
      height: 100vh;
      height: 100dvh;
      min-height: 0;
      overflow: hidden;
      background: var(--section-bg, var(--black));
    }

    html[data-layout="mobile-stage"] .panel-canvas {
      inset: auto;
      left: var(--stage-left);
      top: var(--stage-top);
      width: 1920px;
      height: 1080px;
      transform: scale(var(--stage-scale));
      transform-origin: 0 0;
    }

    html[data-layout="mobile-stage"] .chrome {
      left: var(--stage-left);
      top: var(--stage-top);
      width: 1920px;
      height: 1080px;
      padding: 11px 0 0 13px;
      transform: scale(var(--stage-scale));
      transform-origin: 0 0;
    }

    html[data-layout="mobile-stage"] .brand { left: 0; top: 0; }

    html[data-layout="mobile-stage"] .landing-mark {
      left: 500px;
      top: 104px;
    }

    html[data-layout="mobile-stage"] .landing-copy {
      left: 500px;
      top: auto;
      bottom: 86.4px;
    }

    html[data-layout="mobile-stage"] #footer {
      height: calc(286px * var(--stage-scale));
    }

    html[data-layout="mobile-stage"] .footer-canvas {
      position: absolute;
      left: var(--stage-left);
      top: 0;
      width: 1920px;
      height: 286px;
      padding: 80px 500px 48px;
      transform: scale(var(--stage-scale));
      transform-origin: 0 0;
    }

    html[data-layout="mobile-stage"] .footer-iso {
      width: 93.333333px;
    }

    .rotate-gate {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 22px;
      padding: 32px;
      background: var(--black);
      color: var(--red);
      text-align: center;
      font-family: "BasementType", ui-monospace, monospace;
      font-size: 17.5px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .rotate-gate img {
      width: 36px;
      height: 36px;
      max-width: none;
      filter: brightness(0) saturate(100%) invert(13%) sepia(100%) saturate(7444%) hue-rotate(359deg) brightness(111%) contrast(117%);
      transform: rotate(90deg);
    }

    .win-bar,
    .resize { touch-action: none; }
    .fs-item,
    .nos-card,
    .svc-node,
    .svc-pick,
    .nav a,
    .win-ctrl { touch-action: manipulation; }

    @media (orientation: portrait) and (pointer: coarse),
           (orientation: portrait) and (max-width: 900px) {
      html[data-layout="mobile-stage"] body { overflow: hidden; }
      html[data-layout="mobile-stage"] .rotate-gate { display: flex; }
    }

    @media (orientation: landscape) and (pointer: coarse),
           (orientation: landscape) and (max-width: 1000px) {
      html[data-layout="mobile-stage"] .brand { left: 0; }
      html[data-layout="mobile-stage"] .resize.n,
      html[data-layout="mobile-stage"] .resize.s,
      html[data-layout="mobile-stage"] .resize.e,
      html[data-layout="mobile-stage"] .resize.w { display: none; }
      html[data-layout="mobile-stage"] .resize.ne,
      html[data-layout="mobile-stage"] .resize.nw,
      html[data-layout="mobile-stage"] .resize.se,
      html[data-layout="mobile-stage"] .resize.sw { width: 76px; height: 76px; }
      html[data-layout="mobile-stage"] .win-bar { position: relative; }
      html[data-layout="mobile-stage"] .win-bar::after {
        content: "";
        position: absolute;
        z-index: 0;
        left: 76px;
        right: 76px;
        top: -18px;
        bottom: -18px;
      }
      html[data-layout="mobile-stage"] .win-bar > * { position: relative; z-index: 1; }
      html[data-layout="mobile-stage"] .win-ctrl { position: relative; }
      html[data-layout="mobile-stage"] .win-ctrl::before { content: ""; position: absolute; inset: -18px; }
      html[data-layout="mobile-stage"] .nos-card::before { content: ""; position: absolute; inset: -24px; }
    }