:root {
        color-scheme: dark;
        --page-bg: #2d2d2b;
        --ink: #f5f5f5;
        --ink-muted: rgba(245, 245, 245, 0.68);
        --line: rgba(245, 245, 245, 0.16);
        --panel: rgba(255, 255, 255, 0.06);
        --panel-strong: rgba(255, 255, 255, 0.12);
        --danger: #ffb4b4;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--page-bg);
        color: var(--ink);
      }

      body {
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        overflow-x: hidden;
      }

      body.body--home {
        overflow: hidden;
      }

      body.body--home.body--home-edit {
        overflow-x: hidden;
        overflow-y: auto;
      }


      body.body--section {
        overflow-x: hidden;
        overflow-y: auto;
      }

      body.body--home-mobile-list {
        overflow-x: hidden;
        overflow-y: auto;
      }

      body.body--home-mobile-list .home-view {
        display: block;
      }

      body.body--home-mobile-list .home-board {
        display: none;
      }

      body.body--home-mobile-list .home-mobile {
        display: block;
      }

      .app {
        min-height: 100svh;
        background: var(--page-bg);
      }

      .home-view,
      .section-view {
        min-height: 100svh;
      }

      [hidden] {
        display: none !important;
      }

      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      .home-view {
        display: grid;
        place-items: center;
      }

      .home-mobile {
        display: none;
        width: 100%;
        min-height: 100svh;
      }

      .home-mobile__shell {
        width: min(100%, 33rem);
        margin: 0 auto;
        padding:
          max(18px, calc(env(safe-area-inset-top) + 12px))
          clamp(18px, 5vw, 28px)
          max(28px, calc(env(safe-area-inset-bottom) + 20px));
        display: grid;
        gap: clamp(10px, 3vw, 18px);
      }

      .home-mobile__stage {
        position: relative;
        display: grid;
      }

      .home-mobile__topbar {
        display: grid;
        gap: 0.82rem;
        justify-items: start;
      }

      .home-release {
        display: grid;
        gap: 0.16rem;
        justify-items: center;
        text-align: center;
        pointer-events: none;
      }

      .home-release__eyebrow,
      .home-release__date,
      .home-release__countdown {
        margin: 0;
      }

      .home-release__eyebrow {
        color: var(--ink-muted);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.58rem, 1.4vw, 0.8rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .home-release__date {
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.76rem, 1.85vw, 1rem);
        font-weight: 900;
        line-height: 1.04;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      .home-release__countdown {
        color: rgba(255, 244, 212, 0.92);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.66rem, 1.5vw, 0.9rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
      }

      .home-release--mobile {
        justify-self: center;
        width: min(88vw, 18.5rem);
      }

      .home-release--board {
        position: absolute;
        z-index: 10;
        top: clamp(14px, 3.4cqi, 30px);
        left: 50%;
        width: min(36cqi, 26rem);
        transform: translateX(-50%);
      }

      .home-footer-meta {
        display: grid;
        justify-items: center;
        color: var(--ink-muted);
      }

      .home-footer-meta__summary {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
        list-style: none;
        transition: opacity 180ms ease;
      }

      .home-footer-meta__summary::-webkit-details-marker {
        display: none;
      }

      .home-footer-meta__summary:is(:hover, :focus-visible) {
        opacity: 0.72;
      }

      .home-footer-meta__summary:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.74);
        outline-offset: 4px;
      }

      .home-footer-meta__summary--static {
        cursor: default;
      }

      .home-footer-meta__link {
        color: currentColor;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 0.16em;
        transition: text-decoration-color 180ms ease;
      }

      .home-footer-meta__copy {
        color: currentColor;
      }

      .home-footer-meta__sep {
        color: rgba(236, 236, 236, 0.52);
      }

      .home-footer-meta[open] .home-footer-meta__link,
      .home-footer-meta__summary:is(:hover, :focus-visible) .home-footer-meta__link {
        text-decoration-color: currentColor;
      }

      .home-summary__content {
        width: 100%;
        margin-top: 0.9rem;
        padding: clamp(0.9rem, 2vw, 1.2rem);
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(18, 18, 18, 0.38);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
      }

      .home-summary__content > * {
        margin: 0;
      }

      .home-summary__content > * + * {
        margin-top: 1.1em;
      }

      .home-footer-meta--board {
        position: relative;
        margin-top: 0.7rem;
      }

      .home-footer-meta--board .home-summary__content {
        position: absolute;
        z-index: 1;
        left: 50%;
        bottom: calc(100% + clamp(18px, 3.2cqi, 30px));
        width: min(42cqi, 28rem);
        max-height: min(30vh, 18rem);
        overflow: auto;
        text-align: left;
        transform: translateX(-50%);
      }

      .home-footer-meta--mobile {
        margin-top: clamp(12px, 4vw, 18px);
        justify-items: end;
        text-align: right;
      }

      .home-footer-meta--mobile .home-footer-meta__summary {
        justify-content: flex-end;
      }

      .home-footer-meta--mobile .home-summary__content {
        width: min(82vw, 22rem);
        text-align: left;
      }

      .page-editor-dock {
        width: min(100%, 72rem);
        margin: clamp(24px, 4vw, 36px) auto 0;
      }

      .section-body > .page-editor-dock {
        width: min(calc(100vw - clamp(36px, 8.8vw, 104px)), 72rem);
        max-width: none;
        justify-self: center;
      }

      .home-mobile__wordmark {
        display: block;
        width: min(74vw, 19rem);
        height: auto;
        justify-self: center;
      }

      .lang-switch--home-mobile {
        position: static;
        justify-content: flex-start;
      }

      .home-mobile__list {
        display: grid;
        gap: clamp(18px, 5vw, 34px);
        padding-top: clamp(40px, 11vw, 88px);
        padding-bottom: clamp(280px, 52svh, 560px);
        grid-area: 1 / 1;
      }

      .home-mobile__rail {
        position: sticky;
        top: max(18px, calc(env(safe-area-inset-top) + 10px));
        z-index: 2;
        grid-area: 1 / 1;
        align-self: start;
        justify-self: end;
        width: fit-content;
        max-width: min(44vw, 12.75rem);
        display: grid;
        gap: clamp(4px, 1.8vw, 8px);
        padding-block: clamp(6px, 2vw, 12px);
        justify-items: end;
        overscroll-behavior: contain;
        scrollbar-width: thin;
      }

      .home-mobile__rail--scrollable {
        overflow-y: auto;
      }

      .home-mobile__rail-group {
        display: grid;
        gap: clamp(4px, 1.8vw, 8px);
      }

      .home-mobile__rail-group--footer {
        margin-top: clamp(34px, 10vw, 72px);
      }

      .home-mobile-rail__item {
        display: inline-grid;
        gap: 0.12rem;
        justify-items: end;
        width: auto;
        max-width: 100%;
        margin-left: auto;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        text-align: right;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        opacity: 0.3;
        pointer-events: auto;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .home-mobile-rail__item--static {
        cursor: default;
        pointer-events: none;
      }

      .home-mobile-rail__item:is(:hover, :focus-visible) {
        opacity: 0.82;
      }

      .home-mobile-rail__item.is-active {
        opacity: 1;
      }

      .home-mobile-rail__item--footer {
        color: rgba(255, 244, 212, 0.9);
        opacity: 0.76;
      }

      .home-mobile-rail__item--footer:is(:hover, :focus-visible) {
        opacity: 1;
      }

      .home-mobile-rail__item:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.74);
        outline-offset: 4px;
      }

      .home-mobile-rail__number {
        display: block;
        color: rgba(255, 244, 212, 0.56);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.58rem, 2.1vw, 0.68rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.12em;
      }

      .home-mobile-item--static .home-mobile-item__art-button {
        cursor: default;
        pointer-events: none;
      }

      .home-mobile-rail__label {
        display: block;
        max-width: min(44vw, 12.75rem);
        color: inherit;
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.98rem, 4vw, 1.24rem);
        font-weight: 900;
        font-style: normal;
        line-height: 0.88;
        letter-spacing: -0.05em;
        text-align: right;
        text-decoration: none;
        text-decoration-color: transparent;
        text-wrap: balance;
      }

      .home-mobile-rail__item--song:is(.is-active, :focus-visible) .home-mobile-rail__label {
        font-style: italic;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.14em;
        text-decoration-color: currentColor;
      }

      .home-mobile-item {
        position: relative;
        display: block;
        width: 100%;
        min-height: clamp(116px, 37vw, 214px);
        padding: clamp(4px, 1.8vw, 10px) 0;
        padding-left: calc(clamp(136px, 47vw, 244px) + clamp(12px, 4vw, 22px));
        border: 0;
        background: none;
        color: var(--ink);
        text-align: right;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        overflow: visible;
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 180ms ease;
      }

      .home-mobile-item:is(:hover, :focus-visible) {
        opacity: 0.82;
      }

      .home-mobile-item.is-active {
        opacity: 1;
      }

      .home-mobile-item__art-button {
        position: absolute;
        left: 0;
        top: 50%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: clamp(136px, 47vw, 244px);
        min-width: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        pointer-events: auto;
        transform: translate3d(
          0,
          calc(-50% + var(--home-mobile-art-base-offset, 0px) + var(--home-mobile-art-shift, 0px)),
          0
        );
        will-change: transform;
      }

      .home-mobile-item__art-button:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.74);
        outline-offset: 4px;
      }

      .home-mobile-item__art {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        pointer-events: none;
      }

      .home-mobile-item__image {
        display: block;
        width: 100%;
        max-height: clamp(98px, 33vw, 196px);
        height: auto;
        object-fit: contain;
        object-position: left center;
        filter: drop-shadow(0 0 0 rgba(255, 244, 212, 0));
        transition: opacity 220ms ease, filter 220ms ease, transform 220ms ease;
      }

      .home-mobile-item.is-active .home-mobile-item__image {
        filter: drop-shadow(0 0 1rem rgba(255, 244, 212, 0.12));
        transform: translateX(0.18rem) scale(1.02);
      }

      .home-mobile-item__meta {
        display: block;
        min-width: 0;
        padding-block: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .home-mobile-item__title-label {
        display: block;
        max-width: min(44vw, 12.75rem);
        margin-left: auto;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.98rem, 4vw, 1.24rem);
        font-weight: 900;
        font-style: normal;
        line-height: 0.88;
        letter-spacing: -0.05em;
        text-align: right;
        text-decoration: none;
        text-decoration-color: transparent;
        text-wrap: balance;
        transition: text-decoration-color 180ms ease, transform 180ms ease;
      }

      .home-mobile-item--song:is(.is-active, :focus-visible) .home-mobile-item__title-label {
        font-style: italic;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.14em;
        text-decoration-color: currentColor;
      }

      .home-mobile-item__ghost {
        position: absolute;
        left: 0;
        top: 50%;
        display: block;
        width: clamp(136px, 47vw, 244px);
        height: 1px;
        transform: translateY(-50%);
        opacity: 0;
        pointer-events: none;
      }

      .home-mobile-item__footer-label {
        display: block;
        max-width: min(44vw, 12.75rem);
        margin-left: auto;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.98rem, 4vw, 1.24rem);
        font-weight: 900;
        line-height: 0.88;
        letter-spacing: -0.05em;
        text-align: right;
        text-wrap: balance;
      }

      .home-mobile-item--song + .home-mobile-item--footer {
        margin-top: clamp(64px, 16vw, 124px);
      }


      .home-board {
        position: relative;
        width: min(100vw, calc(100svh * 1430 / 804));
        height: min(100svh, calc(100vw * 804 / 1430));
        max-width: 100vw;
        max-height: 100svh;
        overflow: hidden;
        background: var(--page-bg);
        container-type: size;
        isolation: isolate;
        cursor: default;
      }

      .home-board.scene--pointer-active {
        cursor: pointer;
      }

      .cursor-trail-layer {
        position: fixed;
        inset: 0;
        z-index: 24;
        pointer-events: none;
        overflow: hidden;
      }

      .cursor-trail-sprite {
        position: absolute;
        left: 0;
        top: 0;
        width: var(--trail-size, 18px);
        height: var(--trail-size, 18px);
        opacity: 0;
        object-fit: contain;
        transform: translate(-50%, -50%) translate(0, 0)
          scale(
            var(--trail-scale-start-x, var(--trail-scale-start, 0.88)),
            var(--trail-scale-start-y, var(--trail-scale-start, 0.88))
          )
          rotate(var(--trail-rotation, 0deg));
        transform-origin: center center;
        will-change: transform, opacity;
      }

      .cursor-trail-sprite.is-visible {
        animation: cursor-trail-fade var(--trail-duration, 620ms) ease-out forwards;
      }

      body.body--motion-lite .piece img {
        transition: opacity 220ms ease, transform 280ms ease, filter 280ms ease;
      }

      body.body--motion-lite .home-board:not(.scene--pointer-active):not(.scene--guiding)
        .piece.is-intro-settled:not(.piece--interlude):not(.is-guidance-flashing) img {
        animation: none;
      }

      body.body--motion-lite .piece:is(.is-pointer-active, :focus-visible) img {
        filter: none;
      }

      body.body--motion-disabled .cursor-trail-layer {
        display: none;
      }

      body.body--motion-disabled .piece,
      body.body--motion-disabled .piece img,
      body.body--motion-disabled .cursor-trail-sprite,
      body.body--motion-disabled .footer-links,
      body.body--motion-disabled .footer-link,
      body.body--motion-disabled .home-mobile-item,
      body.body--motion-disabled .home-mobile-item__image,
      body.body--motion-disabled .label-copy,
      body.body--motion-disabled .section-body,
      body.body--motion-disabled .section-back {
        transition: none !important;
      }

      body.body--motion-disabled .piece img,
      body.body--motion-disabled .cursor-trail-sprite,
      body.body--motion-disabled .label-copy--index {
        animation: none !important;
      }

      body.body--motion-disabled .piece:is(.is-pointer-active, :focus-visible) img {
        filter: none;
      }

      body.body--no-backdrop-filter .footer-menu__panel,
      body.body--no-backdrop-filter .site-modal__panel {
        backdrop-filter: none;
      }

      .wordmark {
        position: absolute;
        z-index: 1;
        left: 18.95%;
        top: 21.05%;
        width: 60.35%;
        height: auto;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
        transition: opacity 260ms ease;
      }

      .piece {
        position: absolute;
        z-index: var(--z, 2);
        left: var(--x);
        top: var(--y);
        width: var(--w);
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        cursor: inherit;
        appearance: none;
        pointer-events: none;
        opacity: 0;
        transition: opacity 320ms ease;
      }

      .piece img {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0;
        transform: var(--img-transform, translateZ(0));
        transform-origin: center center;
        transition: opacity 320ms ease, transform 520ms ease, filter 520ms ease;
        user-select: none;
        -webkit-user-drag: none;
        pointer-events: none;
        filter: drop-shadow(0 0 0 rgba(255, 244, 212, 0));
      }

      .piece.is-intro-ready {
        opacity: 1;
      }

      .piece.is-intro-ready img {
        opacity: 1;
      }

      .piece.is-intro-settled img {
        opacity: var(--opacity, 0.48);
      }

      .piece:is(.is-pointer-active, :focus-visible) img {
        opacity: 1;
        filter: drop-shadow(0 0 1.05cqi rgba(255, 244, 212, 0.28));
      }

      .home-board:not(.scene--pointer-active):not(.scene--guiding)
        .piece.is-intro-settled:not(.piece--interlude):not(.is-guidance-flashing) img {
        animation: piece-idle-breathe var(--idle-duration, 3.6s) ease-in-out infinite;
        animation-delay: var(--idle-delay, 0ms);
      }

      .piece.is-guidance-flashing img {
        animation: piece-guidance-burst 1680ms cubic-bezier(0.2, 0.7, 0.18, 1) 1 both;
        animation-delay: var(--guidance-delay, 0ms);
      }

      .piece.is-guidance-flashing .label-copy--index {
        animation: label-guidance-burst 1680ms cubic-bezier(0.2, 0.7, 0.18, 1) 1 both;
        animation-delay: var(--guidance-delay, 0ms);
      }

      .footer-links.is-outro-hidden {
        opacity: 0 !important;
      }

      .footer-link:focus-visible,
      .section-back:focus-visible,
      .section-action:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.74);
        outline-offset: 4px;
      }

      .piece:focus-visible {
        outline: none;
      }

      .label {
        position: absolute;
        left: var(--label-x, 0%);
        top: var(--label-y, 0%);
        z-index: 6;
        display: inline-grid;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(10px, 1.08cqi, 18px);
        font-weight: 900;
        line-height: 0.96;
        letter-spacing: -0.035em;
        text-align: var(--label-align, left);
        text-shadow: 0 0 0.4cqi rgba(0, 0, 0, 0.18);
        white-space: nowrap;
        pointer-events: none;
      }

      .label-copy {
        grid-area: 1 / 1;
        transition: opacity 180ms ease;
      }

      .label-copy--title {
        opacity: 0;
      }

      .piece:is(.is-pointer-active, :focus-visible) .label-copy--index {
        opacity: 0;
      }

      .piece:is(.is-pointer-active, :focus-visible) .label-copy--title {
        opacity: 1;
      }

      @keyframes piece-idle-breathe {
        0%,
        100% {
          opacity: var(--opacity, 0.3);
          transform: var(--img-transform, translateZ(0)) scale(1);
          filter: drop-shadow(0 0 0 rgba(255, 244, 212, 0));
        }

        48% {
          opacity: 0.85;
          transform: var(--img-transform, translateZ(0)) scale(1.024);
          filter: drop-shadow(0 0 1.15cqi rgba(255, 244, 212, 0.22));
        }
      }

      @keyframes piece-guidance-burst {
        0% {
          opacity: var(--opacity, 0.3);
          transform: var(--img-transform, translateZ(0)) scale(1);
          filter: drop-shadow(0 0 0 rgba(255, 244, 212, 0));
        }
        17% {
          opacity: 0.9;
          transform: var(--img-transform, translateZ(0)) scale(1.034);
          filter: drop-shadow(0 0 1.1cqi rgba(255, 244, 212, 0.22));
        }

        32% {
          opacity: calc(var(--opacity, 0.3) + 0.16);
          transform: var(--img-transform, translateZ(0)) scale(1.006);
          filter: drop-shadow(0 0 0.35cqi rgba(255, 244, 212, 0.1));
        }

        54% {
          opacity: 1;
          transform: var(--img-transform, translateZ(0)) scale(1.04);
          filter: drop-shadow(0 0 1.45cqi rgba(255, 244, 212, 0.3));
        }

        72% {
          opacity: 0.62;
          transform: var(--img-transform, translateZ(0)) scale(1.014);
          filter: drop-shadow(0 0 0.6cqi rgba(255, 244, 212, 0.12));
        }

        86% {
          opacity: calc(var(--opacity, 0.3) + 0.1);
          transform: var(--img-transform, translateZ(0)) scale(1.004);
          filter: drop-shadow(0 0 0.18cqi rgba(255, 244, 212, 0.08));
        }

        100% {
          opacity: var(--opacity, 0.3);
          transform: var(--img-transform, translateZ(0)) scale(1);
          filter: drop-shadow(0 0 0 rgba(255, 244, 212, 0));
        }
      }

      @keyframes label-guidance-burst {
        0%,
        100% {
          opacity: 1;
        }
        17% {
          opacity: 0.56;
        }

        32% {
          opacity: 0.94;
        }

        54% {
          opacity: 0.52;
        }

        72% {
          opacity: 0.82;
        }

        86% {
          opacity: 0.94;
        }
      }

      @keyframes cursor-trail-fade {
        0% {
          opacity: var(--trail-opacity, 0.92);
          transform: translate(-50%, -50%) translate(0, 0)
            scale(
              var(--trail-scale-start-x, var(--trail-scale-start, 0.82)),
              var(--trail-scale-start-y, var(--trail-scale-start, 0.82))
            )
            rotate(var(--trail-rotation, 0deg));
        }

        56% {
          opacity: calc(var(--trail-opacity, 0.92) * 0.36);
        }

        100% {
          opacity: 0;
          transform: translate(-50%, -50%)
            translate(var(--trail-drift-x, 0px), var(--trail-drift-y, -4px))
            scale(
              var(--trail-scale-end-x, var(--trail-scale-end, 1.08)),
              var(--trail-scale-end-y, var(--trail-scale-end, 1.08))
            )
            rotate(calc(var(--trail-rotation, 0deg) + var(--trail-drift-rotation, 8deg)));
        }
      }

      .piece--interlude {
        --x: 0.2%;
        --y: 1.5%;
        --w: 19.8%;
        --opacity: 0.3;
        --img-transform: rotate(8deg);
        --label-y: 59%;
        --label-x: 56%;
      }

      .piece--pitonisa {
        --x: 34.35%;
        --y: 7.8%;
        --w: 13.8%;
        --opacity: 0.3;
        --label-x: -10%;
        --label-y: 5%;
      }

      .piece--la-lune {
        --x: 60.3%;
        --y: 6.83%;
        --w: 17%;
        --z: 4;
        --opacity: 0.1;
        --label-x: -9%;
        --label-y: -3%;
      }

      .piece--good-morning-midnight {
        --x: 58.25%;
        --y: 5.15%;
        --w: 22%;
        --z: 3;
        --opacity: 0.3;
        --label-x: 88%;
        --label-y: 24%;
      }

      .piece--lo-colp {
        --x: 79.25%;
        --y: 8.55%;
        --w: 11.9%;
        --opacity: 0.3;
        --img-transform: rotate(34deg);
        --label-x: 71.5%;
        --label-y: 51.5%;
      }

      .piece--tot-esta-per-fer {
        --x: 13.8%;
        --y: 21.9%;
        --w: 31%;
        --img-transform: rotate(4deg);
        --opacity: 0.3;
        --label-x: 17%;
        --label-y: 51.5%;
      }

      .piece--bien-por-ti {
        --x: 0.2%;
        --y: 55.5%;
        --w: 19.5%;
        --opacity: 0.3;
        --label-x: 3%;
        --label-y: 99%;
      }

      .piece--tirsi {
        --x: 14.55%;
        --y: 70.8%;
        --w: 18.45%;
        --opacity: 0.3;
        --label-x: -12.5%;
        --label-y: 63.5%;
        --img-transform: scaleX(-1);
      }

      .piece--cant-de-la-sirena {
        --x: 55.8%;
        --y: 63.3%;
        --w: 20%;
        --opacity: 0.3;
        --img-transform: rotate(193deg);
        --label-x: -1%;
        --label-y: 49.5%;
      }

      .piece--les-persones {
        --x: 81.95%;
        --y: 48.8%;
        --w: 5.5%;
        --opacity: 0.3;
        --label-x: 100%;
        --label-y: 5%;
      }

      .piece--voy-a-dormir {
        --x: 78.5%;
        --y: 75%;
        --w: 17.8%;
        --opacity: 0.3;
        --label-x: 11.5%;
        --label-y: -12%;
      }

      .footer-links {
        position: absolute;
        z-index: 7;
        left: 47.05%;
        bottom: 6.8%;
        display: grid;
        justify-items: center;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 340ms ease;
      }
      .home-footer-meta .footer-link,
      .home-footer-meta .footer-text,
      .home-footer-meta .footer-sep {
        color: inherit;
      }

      .footer-links.is-intro-visible {
        opacity: 1;
      }

      .footer-links--section {
        position: static;
        left: auto;
        bottom: auto;
        width: 100%;
        transform: none;
        opacity: 1;
      }

      .footer-links__inline {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
      }

      .footer-links__inline > .footer-link {
        position: relative;
        padding-inline: 0.42em;
      }

      .footer-links__inline > .footer-link:first-child {
        padding-left: 0;
      }

      .footer-links__inline > .footer-link:last-child {
        padding-right: 0;
      }

      .footer-links__inline > .footer-link:not(:first-child)::before {
        content: "|";
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        opacity: 0.92;
        pointer-events: none;
      }

      .footer-menu {
        position: relative;
        display: none;
        padding: 0.16rem 0.5rem 0.9rem;
        margin: -0.16rem -0.5rem -0.9rem;
      }

      .footer-menu::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(100% - 0.05rem);
        width: min(11rem, 76vw);
        height: 0.8rem;
        transform: translateX(-50%);
      }

      .footer-menu__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        min-height: 1.9rem;
        padding: 0.28rem 0.52rem;
        line-height: 1;
        color: var(--ink);
      }

      .footer-menu__panel {
        position: absolute;
        left: 50%;
        bottom: calc(100% + 0.28rem);
        z-index: 1;
        width: max-content;
        min-width: min(11rem, 76vw);
        max-width: min(80vw, 18rem);
        padding: 1rem 1.08rem;
        border: 1px solid var(--line);
        background: var(--page-bg);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 8px) rotate(-1.5deg);
        transform-origin: center bottom;
        transition: opacity 180ms ease, visibility 180ms ease, transform 220ms ease;
        backdrop-filter: blur(8px);
      }

      .footer-menu__panel::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.55rem;
        width: 1rem;
        height: 1rem;
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: var(--page-bg);
        transform: translateX(-50%) rotate(45deg);
      }

      .footer-menu__list {
        display: grid;
        gap: 0.6rem;
        justify-items: center;
        text-align: center;
      }

      .footer-menu__list .footer-link {
        line-height: 1.08;
        padding: 0.12rem 0;
        color: var(--ink);
      }

      .footer-menu:is(.is-open, :focus-within) .footer-menu__panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0) rotate(0deg);
      }

      .footer-menu:is(.is-open, :focus-within) .footer-menu__toggle,
      .footer-menu__toggle[aria-expanded="true"] {
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
      }

      .lang-switch {
        position: absolute;
        z-index: 10;
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        column-gap: 0.84em;
        row-gap: 0.28em;
      }

      .lang-switch--home {
        top: clamp(14px, 3.4cqi, 30px);
        right: clamp(14px, 3.4cqi, 30px);
      }

      .lang-switch--section {
        position: static;
        justify-content: flex-end;
      }

      .lang-switch--home-mobile {
        position: static;
        justify-content: flex-start;
      }

      .lang-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.28em;
        min-height: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(10px, 1.16cqi, 19px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.035em;
        text-decoration: none;
        text-transform: none;
        transition: opacity 180ms ease;
        cursor: pointer;
      }

      .lang-button:is(:hover, :focus-visible) {
        opacity: 0.68;
      }

      .lang-button.is-active {
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
      }

      .footer-link,
      .footer-text,
      .footer-sep {
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(10px, 1.16cqi, 19px);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.035em;
        color: var(--ink);
        text-decoration: none;
      }

      .home-footer-meta .footer-text,
      .home-footer-meta .footer-link,
      .home-footer-meta .footer-sep,
      .section-footer-meta {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.62rem, 2.3vw, 0.74rem);
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
      }

      .footer-link {
        transition: opacity 180ms ease;
      }

      .footer-link--button {
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
      }

      .footer-link:is(:hover, :focus-visible) {
        opacity: 0.68;
      }

      .footer-sep {
        opacity: 0.92;
      }

      @media (hover: hover) and (pointer: fine) {
        .footer-menu:hover .footer-menu__panel {
          opacity: 1;
          visibility: visible;
          pointer-events: auto;
          transform: translate(-50%, 0) rotate(0deg);
        }

        .footer-menu:hover .footer-menu__toggle {
          text-decoration: underline;
          text-decoration-thickness: 0.08em;
          text-underline-offset: 0.16em;
        }
      }

      .body--modal-open {
        overflow: hidden;
      }

      .body--orientation-overlay-open {
        overflow: hidden;
      }

      .mobile-orientation-overlay {
        position: fixed;
        inset: 0;
        z-index: 29;
        display: grid;
        place-items: center;
        padding: clamp(18px, 5vw, 30px);
      }

      .mobile-orientation-overlay__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(10, 10, 10, 0.74);
      }

      .mobile-orientation-overlay__panel {
        position: relative;
        z-index: 1;
        width: min(100%, 28rem);
        display: grid;
        gap: 0.94rem;
        justify-items: center;
        padding: clamp(20px, 5vw, 30px);
        border: 1px solid var(--line);
        background: rgba(45, 45, 43, 0.96);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
        text-align: center;
      }

      .mobile-orientation-overlay__icon {
        position: relative;
        width: clamp(72px, 20vw, 92px);
        height: clamp(56px, 15vw, 76px);
        display: grid;
        place-items: center;
      }
      .mobile-orientation-overlay__phone {
        position: absolute;
        width: clamp(26px, 7.5vw, 34px);
        height: clamp(44px, 12vw, 58px);
        border: 2px solid rgba(245, 245, 245, 0.92);
        border-radius: 0.82rem;
        background: rgba(255, 255, 255, 0.035);
        transform-origin: center center;
      }
      .mobile-orientation-overlay__phone::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 4px;
        height: 4px;
        border-radius: 999px;
        background: currentColor;
        transform: translateX(-50%);
      }

      .mobile-orientation-overlay__phone {
        color: var(--ink);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
        animation: orientation-phone-rotate 1.9s cubic-bezier(0.22, 0.74, 0.2, 1) infinite;
      }

      .mobile-orientation-overlay__arrow {
        position: absolute;
        width: clamp(54px, 15vw, 72px);
        height: clamp(54px, 15vw, 72px);
        border: 2px solid transparent;
        border-top-color: rgba(245, 245, 245, 0.86);
        border-right-color: rgba(245, 245, 245, 0.86);
        border-radius: 999px;
        opacity: 0.88;
        transform: rotate(20deg);
        animation: orientation-arrow-pulse 1.9s ease-in-out infinite;
      }

      .mobile-orientation-overlay__arrow::after {
        content: "";
        position: absolute;
        top: 2px;
        right: -1px;
        width: 10px;
        height: 10px;
        border-top: 2px solid rgba(245, 245, 245, 0.92);
        border-right: 2px solid rgba(245, 245, 245, 0.92);
        transform: rotate(14deg);
      }

      .mobile-orientation-overlay__title,
      .mobile-orientation-overlay__copy {
        margin: 0;
      }

      .mobile-orientation-overlay__title {
        font-size: clamp(1.08rem, 4.8vw, 1.5rem);
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .mobile-orientation-overlay__copy {
        max-width: 22rem;
        color: var(--ink-muted);
        font-size: clamp(0.94rem, 3.8vw, 1.04rem);
        line-height: 1.45;
      }

      .mobile-orientation-overlay__action {
        padding: 0.16rem 0;
      }

      body.body--motion-disabled .mobile-orientation-overlay__phone,
      body.body--motion-disabled .mobile-orientation-overlay__arrow {
        animation: none;
      }

      @keyframes orientation-phone-rotate {
        0%,
        18% {
          transform: rotate(0deg);
        }

        42%,
        78% {
          transform: rotate(90deg);
        }

        100% {
          transform: rotate(90deg);
        }
      }

      @keyframes orientation-arrow-pulse {
        0%,
        18% {
          opacity: 0.42;
          transform: rotate(20deg) scale(0.96);
        }

        42%,
        78% {
          opacity: 0.94;
          transform: rotate(20deg) scale(1);
        }

        100% {
          opacity: 0.6;
          transform: rotate(20deg) scale(0.98);
        }
      }

      .site-modal {
        position: fixed;
        inset: 0;
        z-index: 30;
        display: grid;
        place-items: center;
        padding: clamp(18px, 4vw, 32px);
      }

      .site-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(10, 10, 10, 0.8);
      }

      .site-modal__panel {
        position: relative;
        z-index: 1;
        width: min(100%, 460px);
        max-height: min(72vh, 40rem);
        display: grid;
        gap: 20px;
        padding: clamp(22px, 4vw, 30px);
        border: 1px solid var(--line);
        background: var(--page-bg);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
      }

      .site-modal__header {
        position: relative;
        display: grid;
        gap: 8px;
        justify-items: center;
        padding-inline: 28px;
      }

      .site-modal__title {
        margin: 0;
        width: 100%;
        color: var(--ink);
        font-size: clamp(1.2rem, 2.1vw, 1.5rem);
        line-height: 1;
        letter-spacing: -0.045em;
        text-align: center;
      }

      .site-modal__close {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
        line-height: 1;
        cursor: pointer;
        transition: opacity 180ms ease;
      }

      .site-modal__close:is(:hover, :focus-visible) {
        opacity: 0.68;
      }

      .site-modal__content {
        display: grid;
        justify-items: center;
        min-height: 0;
        overflow: auto;
      }

      .site-modal__content > .site-modal__rich-copy.home-summary__content {
        width: min(100%, 28rem);
        margin-top: 0;
        text-align: left;
      }

      .site-modal__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 14px;
        justify-items: center;
        text-align: center;
      }

      .site-modal__list--platforms {
        width: auto;
        gap: 0.7rem;
      }

      .site-modal__list--platforms .site-modal__item {
        width: auto;
        padding: 0;
      }

      .site-modal__list--concerts {
        width: min(100%, 24rem);
        gap: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .site-modal__list--concerts .site-modal__item {
        width: 100%;
        padding: 0.9rem 0;
      }

      .site-modal__list--concerts .site-modal__item + .site-modal__item {
        border-top: 1px solid var(--line);
      }

      .site-modal__item {
        display: grid;
        gap: 6px;
        justify-items: center;
      }
      .site-modal__item--platform {
        justify-items: center;
      }

      .site-modal__item--concert {
        width: 100%;
        justify-items: stretch;
        text-align: left;
      }

      .site-modal__link,
      .site-modal__event-date,
      .site-modal__event-location {
        margin: 0;
      }

      .site-modal__link {
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.95rem, 1.5vw, 1.05rem);
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -0.035em;
        text-decoration: none;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
        transition: opacity 180ms ease;
      }

      .site-modal__link:is(:hover, :focus-visible) {
        opacity: 0.68;
        text-decoration: underline;
      }

      .site-modal__link--platform,
      .site-modal__link--contact {
        display: inline-flex;
        align-items: center;
        gap: 0.72rem;
      }

      .site-modal__link--platform {
        width: auto;
        justify-content: center;
        padding: 0.12rem 0;
      }

      .site-modal__link--concert {
        display: inline-flex;
        justify-content: flex-start;
        width: 100%;
      }

      .site-modal__icon {
        width: 1.18rem;
        height: 1.18rem;
        flex: 0 0 auto;
        object-fit: contain;
      }

      .site-modal__label {
        display: inline-block;
        line-height: 1.08;
      }

      .site-modal__concert-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.92rem;
        align-items: center;
        width: 100%;
      }

      .site-modal__calendar {
        display: grid;
        width: 3.2rem;
        border: 1px solid var(--line);
        border-radius: 0.82rem;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.03);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
      }

      .site-modal__calendar-month,
      .site-modal__calendar-day {
        display: block;
        text-align: center;
      }

      .site-modal__calendar-month {
        padding: 0.3rem 0.28rem 0.22rem;
        background: rgba(190, 76, 54, 0.92);
        color: #fff;
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: 0.56rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .site-modal__calendar-day {
        padding: 0.46rem 0.28rem 0.54rem;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: 1.18rem;
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .site-modal__concert-details {
        display: grid;
        gap: 0.24rem;
        min-width: 0;
        justify-items: start;
      }

      .site-modal__event-date {
        width: 100%;
        color: var(--ink-muted);
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 0.96rem;
        line-height: 1.55;
        text-align: left;
      }

      .site-modal__event-location {
        display: inline-flex;
        align-items: flex-start;
        gap: 0.52rem;
        width: 100%;
        color: rgba(255, 244, 212, 0.88);
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 0.92rem;
        line-height: 1.45;
        text-align: left;
      }

      .site-modal__event-location-label {
        display: block;
        min-width: 0;
      }

      .site-modal__location-pin {
        position: relative;
        width: 0.84rem;
        height: 0.84rem;
        flex: 0 0 auto;
        margin-top: 0.14rem;
        border-radius: 55% 55% 55% 0;
        background: linear-gradient(180deg, #ff7b60 0%, #c43b2c 100%);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.2);
        transform: rotate(-45deg);
      }

      .site-modal__location-pin::after {
        content: "";
        position: absolute;
        inset: 0.2rem;
        border-radius: 50%;
        background: rgba(255, 244, 212, 0.94);
      }

      .site-modal__contact {
        width: min(100%, 24rem);
        display: grid;
        gap: 14px;
        justify-items: center;
        text-align: center;
      }

      .site-modal__contact-value {
        display: grid;
        justify-items: center;
        gap: 10px;
        width: 100%;
        word-break: break-word;
      }

      .site-modal__copy {
        margin: 0;
        color: var(--ink-muted);
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 0.96rem;
        line-height: 1.55;
      }

      .site-modal__reveal {
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.95rem, 1.5vw, 1.05rem);
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -0.035em;
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
      }

      .site-modal__reveal:is(:hover, :focus-visible) {
        opacity: 0.68;
      }

      .site-lightbox-target {
        cursor: zoom-in;
        transition: opacity 180ms ease;
      }

      .site-lightbox-target:is(:hover, :focus-visible) {
        opacity: 0.9;
      }

      .site-lightbox-target:focus-visible {
        outline: 2px solid rgba(255, 255, 255, 0.74);
        outline-offset: 4px;
      }

      .site-modal[data-modal-variant="image"] .site-modal__panel {
        width: min(100%, 72rem);
        max-height: min(90vh, 56rem);
        gap: 14px;
        padding: clamp(16px, 2.6vw, 20px);
        background: rgba(20, 20, 18, 0.96);
      }

      .site-modal[data-modal-variant="image"] .site-modal__header {
        justify-items: start;
        padding-inline: 0 30px;
      }

      .site-modal[data-modal-variant="image"] .site-modal__title {
        color: var(--ink-muted);
        font-size: clamp(0.88rem, 1.3vw, 1rem);
        line-height: 1.3;
        letter-spacing: -0.02em;
        text-align: left;
      }

      .site-modal[data-modal-variant="image"] .site-modal__content {
        width: 100%;
      }

      .site-modal__figure {
        width: 100%;
        margin: 0;
        display: grid;
        gap: 0.92rem;
        justify-items: center;
      }

      .site-modal__figure-image {
        display: block;
        max-width: 100%;
        max-height: min(76vh, 46rem);
        width: auto;
        height: auto;
        object-fit: contain;
      }

      .site-modal__figcaption {
        margin: 0;
        width: min(100%, 46rem);
        color: var(--ink-muted);
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 0.96rem;
        line-height: 1.55;
        text-align: center;
      }

      .section-view {
        padding: clamp(24px, 4.4vw, 64px) clamp(18px, 4.4vw, 52px) clamp(80px, 8vw, 128px);
      }

      .section-shell {
        max-width: min(920px, 100%);
        margin: 0 auto;
        display: grid;
        gap: clamp(18px, 2.6vw, 28px);
      }

      .section-topbar {
        position: sticky;
        top: 18px;
        z-index: 12;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
      }

      .section-back,
      .section-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.28em;
        min-height: 0;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(0.78rem, 1vw, 0.95rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.035em;
        text-decoration: none;
        text-transform: none;
        cursor: pointer;
        transition: opacity 180ms ease;
      }

      .section-back {
        position: sticky;
        top: 18px;
        width: auto;
        justify-self: flex-start;
        align-self: flex-start;
        flex: 0 0 auto;
      }

      .section-back:is(:hover, :focus-visible),
      .section-action:is(:hover, :focus-visible) {
        opacity: 0.68;
      }

      .section-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 0.84em;
        row-gap: 0.28em;
      }

      .section-action--release {
        cursor: default;
      }


      .section-action:disabled {
        opacity: 0.58;
        cursor: not-allowed;
      }

      .section-action:disabled:is(:hover, :focus-visible) {
        opacity: 0.58;
      }

      .section-action-title {
        display: inline;
        font: inherit;
      }

      .section-action-meta {
        display: inline;
        margin: 0;
        color: var(--ink-muted);
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
      }

      .section-action[data-state="live"] .section-action-meta {
        color: var(--ink);
      }

      .section-action.is-active .section-action-title {
        text-decoration: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
      }

      .lang-switch > *:not(:first-child) {
        position: relative;
      }
      .lang-switch > *:not(:first-child)::before {
        content: "|";
        position: absolute;
        top: 50%;
        left: -0.42em;
        transform: translate(-50%, -50%);
        opacity: 0.92;
        pointer-events: none;
      }

      .section-header {
        display: grid;
        gap: 12px;
        justify-items: center;
        width: 100%;
      }

      .section-title-art {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
      }

      .section-kicker {
        margin: 0;
        color: var(--ink-muted);
        font-size: clamp(0.7rem, 1vw, 0.82rem);
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .section-title {
        margin: 0;
        font-size: clamp(2.6rem, 7vw, 5.4rem);
        line-height: 0.92;
        letter-spacing: -0.07em;
        text-align: center;
        text-wrap: balance;
      }

      .section-body {
        display: grid;
        gap: 20px;
      }

      .section-footer {
        display: grid;
        justify-items: center;
        gap: clamp(10px, 1.6vw, 16px);
        padding-top: clamp(18px, 3vw, 28px);
        border-top: 1px solid var(--line);
        text-align: center;
      }

      .section-footer-meta {
        margin: 0;
        color: var(--ink-muted);
        font-size: clamp(0.74rem, 1vw, 0.9rem);
        line-height: 1;
      }

      .section-panel {
        position: relative;
        display: grid;
        gap: 14px;
        padding-top: 0;
      }

      .section-panel--overflowing::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: clamp(34px, 6vw, 52px);
        background: linear-gradient(180deg, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.82) 58%, rgba(10, 10, 10, 0.97) 100%);
        pointer-events: none;
      }

      [data-section-lyrics-panel],
      [data-section-original-poem-panel],
      [data-section-panel="lyrics"],
      [data-section-panel="original-poem"] {
        grid-template-rows: auto minmax(0, 1fr);
        align-self: start;
        max-height: min(62vh, 36rem);
        overflow: hidden;
      }

      .section-panel-title {
        margin: 0;
        color: var(--ink-muted);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }
      .section-status {
        margin: 0;
        color: var(--ink-muted);
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 0.98rem;
        line-height: 1.6;
      }
      .section-status[data-state="error"] {
        color: var(--danger);
      }

      .section-content {
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: clamp(1.05rem, 1.45vw, 1.22rem);
        font-weight: 400;
        line-height: 1.72;
        color: rgba(245, 245, 245, 0.92);
      }

      .section-content > * {
        margin: 0;
      }

      .section-content > * + * {
        margin-top: 1.2em;
      }
      .section-content::after {
        content: "";
        display: block;
        clear: both;
      }

      .section-content > :first-child {
        margin-top: 0;
      }

      .section-content > :last-child {
        margin-bottom: 0;
      }

      .section-content h2,
      .section-content h3,
      .section-content h4,
      .section-content h5,
      .section-content h6 {
        margin-top: 2.2em;
        margin-bottom: 0.3em;
        font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
        line-height: 1.04;
        letter-spacing: -0.04em;
        color: var(--ink);
      }

      .section-content > :is(h2, h3, h4, h5, h6):first-child {
        margin-top: 0;
      }

      .section-content > :is(h2, h3, h4, h5, h6) + * {
        margin-top: 0;
      }

      .section-content h2 {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
      }

      .section-content h3 {
        font-size: clamp(1.42rem, 2.4vw, 2rem);
      }

      .section-content p,
      .section-content ul,
      .section-content ol,
      .section-content blockquote,
      .section-content pre,
      .section-content table {
        margin: 0;
      }

      .section-content ul,
      .section-content ol {
        padding-left: 1.35em;
      }

      .section-content a {
        color: var(--ink);
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.16em;
      }

      .section-content figure {
        width: auto;
        max-width: 100%;
        margin: 0;
      }

      .section-content figure.image {
        display: table;
        margin: 1.5em 0;
      }

      .section-content figure.image.image-style-align-center {
        margin-left: auto;
        margin-right: auto;
      }

      .section-content figure.image.image-style-align-left {
        float: left;
        margin: 0.4em 1.6em 1em 0;
      }

      .section-content figure.image.image-style-align-right {
        float: right;
        margin: 0.4em 0 1em 1.6em;
      }

      .section-content figure.image figcaption {
        display: table-caption;
        caption-side: bottom;
        padding-top: 0.65rem;
        color: var(--ink-muted);
        font-size: 0.92rem;
        line-height: 1.5;
      }

      .section-content img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
      }

      .section-content figure.image img,
      .section-content img[style*="display: block"],
      .section-content img[style*="margin-left: auto"],
      .section-content img[style*="margin-right: auto"] {
        display: block;
      }

      .section-content img[style*="margin-left: auto"][style*="margin-right: auto"],
      .section-content figure[style*="margin-left: auto"][style*="margin-right: auto"] {
        margin-left: auto;
        margin-right: auto;
      }

      .section-content iframe {
        display: block;
        width: 100%;
        min-height: clamp(240px, 48vw, 520px);
        border: 0;
      }

      .section-content--subsection {
        min-height: 0;
        padding-right: clamp(6px, 1vw, 12px);
        padding-bottom: 18px;
        overflow-y: auto;
        overscroll-behavior: auto;
        scrollbar-gutter: stable;
      }

      .section-panel--overflowing .section-content--subsection {
        padding-bottom: clamp(38px, 6vw, 50px);
      }

      .section-content blockquote {
        padding-left: 1em;
        border-left: 2px solid var(--line);
        color: var(--ink-muted);
      }

      .section-content hr {
        width: 100%;
        border: 0;
        border-top: 1px solid var(--line);
      }

      .section-content table {
        width: 100%;
        border-collapse: collapse;
      }

      @media (min-width: 960px) {
        .section-body.section-body--compare {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
          column-gap: clamp(20px, 3.2vw, 38px);
          align-items: start;
        }

        .section-body.section-body--compare > [data-section-status],
        .section-body.section-body--compare > [data-section-actions],
        .section-body.section-body--compare > [data-section-content] {
          grid-column: 1 / -1;
        }

        .section-body.section-body--compare > [data-section-lyrics-panel] {
          grid-column: 1;
        }

        .section-body.section-body--compare > [data-section-original-poem-panel] {
          grid-column: 2;
        }

        .section-body.section-body--compare > .page-editor-dock {
          grid-column: 1 / -1;
        }
      }

      .section-content th,
      .section-content td {
        padding: 0.75rem;
        border: 1px solid var(--line);
        text-align: left;
      }

      .label-index-prefix {
        font-style: italic;
        font-weight: 900;
      }


      @supports (height: 100dvh) {
        .app,
        .home-view,
        .section-view {
          min-height: 100dvh;
        }

        .home-board {
          width: min(100vw, calc(100dvh * 1430 / 804));
          height: min(100dvh, calc(100vw * 804 / 1430));
          max-height: 100dvh;
        }
      }

      @media (max-width: 720px), (pointer: coarse) {
        .footer-links {
          left: 50%;
          bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
          display: flex;
          justify-content: center;
          width: calc(100% - 20px);
        }

        .footer-links--section {
          width: 100%;
        }
        .footer-links__inline {
          display: none;
        }

        .footer-menu {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 0;
        }

        .footer-menu__toggle {
          min-height: 2.15rem;
          padding: 0.34rem 0.72rem;
          font-size: clamp(12px, 3.4vw, 14px);
          letter-spacing: -0.028em;
          touch-action: manipulation;
        }

        .footer-menu__panel {
          bottom: calc(100% + 0.42rem);
          max-width: min(86vw, 18rem);
          padding: 0.92rem 1rem;
        }

        .footer-menu__list {
          gap: 0.72rem;
        }

        .home-footer-meta--board .home-summary__content {
          width: min(82vw, 22rem);
        }

        .home-footer-meta--mobile {
          margin-top: clamp(12px, 4vw, 18px);
          justify-items: end;
          text-align: right;
        }

        .home-footer-meta--mobile .home-footer-meta__summary {
          justify-content: flex-end;
        }

        .home-footer-meta--mobile .home-summary__content {
          width: min(82vw, 22rem);
          margin-top: clamp(10px, 4vw, 16px);
          text-align: left;
        }
        .section-view {
          padding-top: 20px;
        }
        .section-actions {
          width: 100%;
        }

        .section-topbar {
          align-items: stretch;
          flex-direction: column;
        }

        .lang-switch--section {
          justify-content: flex-start;
        }
      }

      @container (max-width: 720px) {
        .footer-links__inline {
          display: none;
        }

        .footer-menu {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .piece,
        .piece img,
        .cursor-trail-sprite,
        .footer-links,
        .footer-link,
        .home-mobile-item,
        .home-mobile-rail__item,
        .home-mobile-item__image,
        .label-copy,
        .section-body,
        .section-back {
          transition: none;
        }

        .piece img,
        .cursor-trail-sprite,
        .label-copy--index,
        .mobile-orientation-overlay__phone,
        .mobile-orientation-overlay__arrow {
          animation: none !important;
        }
      }