/* =========================================================
   DESKTOP SCENE / LAYERS
   Logical canvas: 1672 × 941 px
   ========================================================= */

.scene {
    position: absolute;
    left: 0;
    top: 0;
    width: 1672px;
    height: 941px;
    transform-origin: left top;
    background: #02050b;
    isolation: isolate;
}

.scene-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 1672px;
    height: 941px;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.layer-background { z-index: 1; }
.layer-ship { z-index: 5; }

/* Holo base + HTML move together if the screen is repositioned later. */
.holo-group {
    --holo-shift-x: 0px;
    --holo-shift-y: 0px;
    --holo-scale: 1;

    position: absolute;
    inset: 0;
    z-index: 10;
    width: 1672px;
    height: 941px;
    transform: translate(var(--holo-shift-x), var(--holo-shift-y)) scale(var(--holo-scale));
    transform-origin: 0 0;
}

.layer-holo-base { z-index: 1; }

/*
   HTML plane inside the generated holo screen.
   Target safe quad on the 1672×941 scene:
   TL 525/142 · TR 1559/58 · BR 1559/620 · BL 525/580
*/
.holo {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;

    width: 1050px;
    height: 500px;
    padding: 18px 34px 18px 34px;
    overflow: hidden;

    transform: matrix3d(
         0.657163193, -0.092187765, 0, -0.000210134,
         0,            0.876000000, 0,  0,
         0,            0,           1,  0,
       525,          142,           0,  1
    );
    transform-origin: 0 0;

    color: rgba(222, 248, 255, 0.92);
    text-shadow: 0 0 7px rgba(85, 210, 255, 0.24);
}

.layer-projector-effects {
    z-index: 30;
    --projector-shift-x: 0px;
    --projector-shift-y: 0px;
    transform: translate(var(--projector-shift-x), var(--projector-shift-y));
}

.layer-foreground { z-index: 40; }

/* Future animation hook: only the ship layer moves. */
.layer-ship {
    transform: translate3d(0, 0, 0);
    transform-origin: 0 0;
}

/* Desktop phase: keep the desktop scene on narrow viewports for now.
   A dedicated mobile layer stack will replace this later. */
@media (max-width: 700px) {
    .scene {
        width: 1672px;
        height: 941px;
    }

    .holo {
        width: 1050px;
        height: 500px;
        padding: 18px 34px;
        transform: matrix3d(
             0.657163193, -0.092187765, 0, -0.000210134,
             0,            0.876000000, 0,  0,
             0,            0,           1,  0,
           525,          142,           0,  1
        );
    }
}

/* =========================================================
   DESKTOP / MOBILE APP SEPARATION
   ========================================================= */
.desktop-app { display: block; }
.mobile-app { display: none; }

@media (orientation: portrait) {
    .desktop-app { display: none !important; }
}

/* =========================================================
   RESPONSIVE RESET 2

   - Portrait: mobile scene.
   - Landscape: desktop scene, always cover.
   - The Holo artwork itself may be clipped by the viewport.
   - Holo content shrinks to the actually visible part of the Holo.
   - The compact menu is a translucent Holo layer, not a separate screen.
   ========================================================= */

.desktop-app {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #02050b;
}

/* JS writes these values from the actual visible Holo intersection. */
#desktop-holo {
    --holo-content-left: 0px;
    --holo-content-width: 982px;
    --holo-visible-left: 0px;
    --holo-visible-right: 1050px;
    --desktop-menu-toggle-left: 930px;
    --desktop-menu-panel-left: 430px;
    --desktop-menu-panel-width: 560px;
    --desktop-home-logo-left: 900px;
}

/* Content and the small desktop sub-navigation are constrained to
   the visible Holo area. The Holo artwork itself remains untouched. */
#desktop-holo > .holo-nav {
    width: var(--holo-content-width);
    max-width: var(--holo-content-width);
    margin-left: var(--holo-content-left);
    overflow: hidden;
}

#desktop-holo > .holo-content {
    width: var(--holo-content-width);
    max-width: var(--holo-content-width);
    margin-left: var(--holo-content-left);
    overflow-x: hidden;
}

#desktop-holo > .holo-content .route-page,
#desktop-holo > .holo-content .panel-scroll {
    min-width: 0;
    max-width: 100%;
}

#desktop-holo > .holo-content .panel-scroll {
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   Compact/Hamburger navigation
   --------------------------------------------------------- */

.desktop-menu-toggle,
.desktop-compact-menu,
.desktop-compact-home-logo {
    display: none;
}

.desktop-app.compact-nav .navigation-bar {
    display: none;
}

.desktop-app.compact-nav .holo-nav {
    display: none !important;
}

.desktop-app.compact-nav .holo.has-nav .holo-content {
    height: 100%;
}

.desktop-app.compact-nav .holo-content {
    padding: 76px 34px 64px 34px;
}

.desktop-app.compact-nav .holo[data-route="home"] .holo-content {
    padding: 22px 30px 24px;
}

/* Larger logical type compensates for the scene being scaled down
   on compact landscape windows. */
.desktop-app.compact-nav .holo h1 {
    padding-right: 0;
    font-size: 31px;
    line-height: 1.16;
}

.desktop-app.compact-nav .holo h2 {
    font-size: 27px;
    line-height: 1.18;
}

.desktop-app.compact-nav .holo p {
    max-width: none;
    font-size: 22px;
    line-height: 1.48;
}

.desktop-app.compact-nav .holo .member-rich p {
    max-width: none;
    font-size: 21px;
    line-height: 1.46;
}

.desktop-app.compact-nav .holo .panel-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 14px;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(145, 228, 255, 0.32)
        rgba(80, 170, 210, 0.055);
}

.desktop-app.compact-nav .holo .panel-scroll::-webkit-scrollbar {
    width: 7px;
}

.desktop-app.compact-nav .holo .panel-scroll::-webkit-scrollbar-track {
    background: rgba(80, 170, 210, 0.055);
}

.desktop-app.compact-nav .holo .panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(145, 228, 255, 0.32);
    border-radius: 20px;
}

/* Burger is pinned to the visible right edge of the Holo, not to its
   potentially clipped graphical right edge. */
.desktop-menu-toggle {
    position: absolute;
    top: 20px;
    left: var(--desktop-menu-toggle-left);
    right: auto;
    z-index: 82;

    width: 70px;
    height: 62px;
    padding: 14px;

    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;

    border: 1px solid rgba(160, 236, 255, 0.28);
    background: rgba(27, 122, 178, 0.12);
    box-shadow:
        inset 0 0 20px rgba(84, 210, 255, 0.07),
        0 0 15px rgba(82, 213, 255, 0.10);

    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.desktop-app.compact-nav .desktop-menu-toggle {
    display: flex;
}

.desktop-menu-toggle span {
    display: block;
    width: 100%;
    height: 5px;
    background: rgba(235, 252, 255, 0.98);
    box-shadow:
        0 0 7px rgba(119, 226, 255, 0.95),
        0 0 14px rgba(70, 197, 255, 0.45);
    transform-origin: center;
    transition: transform 180ms ease, opacity 150ms ease;
}

.holo.desktop-menu-open .desktop-menu-toggle span:nth-child(1) {
    transform: translateY(14px) rotate(45deg);
}
.holo.desktop-menu-open .desktop-menu-toggle span:nth-child(2) {
    opacity: 0;
}
.holo.desktop-menu-open .desktop-menu-toggle span:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg);
}

/* Menu is an additional translucent layer ON the Holo.
   It does not replace the whole screen and has no heavy opaque panel. */
.desktop-compact-menu {
    position: absolute;
    top: 14px;
    left: var(--desktop-menu-panel-left);
    bottom: 18px;
    width: var(--desktop-menu-panel-width);
    z-index: 76;

    padding: 70px 24px 20px;
    overflow-y: auto;
    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            rgba(4, 38, 82, 0.76) 0%,
            rgba(4, 47, 96, 0.70) 58%,
            rgba(3, 38, 82, 0.77) 100%
        );
    border: 1px solid rgba(145, 229, 255, 0.16);
    box-shadow:
        inset 0 0 50px rgba(71, 202, 247, 0.08),
        0 0 18px rgba(28, 151, 211, 0.08);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);

    scrollbar-width: thin;
    scrollbar-color:
        rgba(154, 231, 255, 0.24)
        transparent;

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 180ms ease;
}

.desktop-compact-menu::-webkit-scrollbar {
    width: 5px;
}

.desktop-compact-menu::-webkit-scrollbar-track {
    background: transparent;
}

.desktop-compact-menu::-webkit-scrollbar-thumb {
    background: rgba(154, 231, 255, 0.24);
    border-radius: 20px;
}

.desktop-app.compact-nav .desktop-compact-menu {
    display: block;
}

.holo.desktop-menu-open .desktop-compact-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.desktop-compact-menu-inner {
    display: flex;
    flex-direction: column;
}

.desktop-compact-menu-item,
.desktop-compact-band-submenu button {
    appearance: none;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;

    border: 0;
    border-bottom: 1px solid rgba(142, 225, 250, 0.12);
    background: transparent;

    color: rgba(229, 249, 255, 0.91);
    text-align: left;
    text-transform: uppercase;

    cursor: pointer;
}

.desktop-compact-menu-item {
    min-height: 46px;
    padding: 5px 4px;

    font-size: 21px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0.11em;
}

.desktop-compact-menu-item.active,
.desktop-compact-band-submenu button.active,
.desktop-compact-band-toggle.active {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(95, 224, 255, 0.86),
        0 0 16px rgba(62, 188, 255, 0.42);
}

.desktop-compact-chevron {
    font-size: 25px;
    font-weight: 300;
    transition: transform 160ms ease;
}

.desktop-compact-band-toggle[aria-expanded="true"] .desktop-compact-chevron {
    transform: rotate(45deg);
}

.desktop-compact-band-submenu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;

    transition:
        max-height 180ms ease,
        opacity 140ms ease;
}

.desktop-compact-band-submenu.open {
    max-height: 174px;
    opacity: 1;
}

.desktop-compact-band-submenu button {
    min-height: 38px;
    padding: 4px 7px 4px 22px;

    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.10em;
}

.desktop-compact-home-logo {
    position: absolute;
    left: calc(var(--holo-visible-right) - 150px);
    right: auto;
    bottom: 22px;
    z-index: 55;

    width: 128px;
    padding: 0;
    border: 0;
    background: transparent;

    cursor: pointer;
    opacity: 0.72;
    filter: drop-shadow(0 0 8px rgba(100, 220, 255, 0.22));
}

.desktop-app.compact-nav .desktop-compact-home-logo {
    display: block;
}

.desktop-app.compact-nav .holo[data-route="home"] .desktop-compact-home-logo,
.holo.desktop-menu-open .desktop-compact-home-logo {
    display: none;
}

.desktop-compact-home-logo img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   Astronaut hover — proven CSS hotspot pattern.
   --------------------------------------------------------- */

.layer-foreground-gadget {
    position: absolute;
    inset: 0;
    z-index: 41;
    width: 1672px;
    height: 941px;
    max-width: none;

    pointer-events: none;
    user-select: none;

    opacity: 0;
    transition: opacity 180ms ease-out;
}

.scene-hotspot {
    position: absolute;
    z-index: 70;
    background: transparent;
}

.hotspot-astronaut {
    left: 130px;
    top: 300px;
    width: 590px;
    height: 560px;
    cursor: pointer;
}

.hotspot-astronaut:hover ~ .layer-foreground-gadget {
    opacity: 1;
}

@media (hover: none) {
    .scene-hotspot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .layer-foreground-gadget,
    .desktop-compact-menu,
    .desktop-menu-toggle span,
    .desktop-compact-chevron {
        transition: none !important;
    }
}


/* =========================================================
   RESPONSIVE STABLE V3 — focused overrides only
   ========================================================= */

/* In compact landscape, keep the content inside the actually visible
   Holo area. A small right reserve prevents the Home logo overlapping text. */
.desktop-app.compact-nav .holo-content {
    padding: 68px 28px 58px 28px;
}

.desktop-app.compact-nav .holo:not([data-route="home"]) .holo-content {
    padding-right: 106px;
}

/* Smaller logical type for the compact Holo. */
.desktop-app.compact-nav .holo h1 {
    font-size: 29px;
}

.desktop-app.compact-nav .holo h2 {
    font-size: 25px;
}

.desktop-app.compact-nav .holo p {
    font-size: 21px;
}

.desktop-app.compact-nav .holo .member-rich p {
    font-size: 20px;
}

/* Burger: clearly part of the Holo, but not oversized. */
.desktop-menu-toggle {
    top: 24px;
    width: 58px;
    height: 52px;
    padding: 12px;

    border-color: rgba(160, 236, 255, 0.20);
    background: rgba(32, 136, 188, 0.08);
    box-shadow:
        inset 0 0 16px rgba(84, 210, 255, 0.05),
        0 0 12px rgba(82, 213, 255, 0.08);
}

.desktop-menu-toggle span {
    height: 4px;
}

.holo.desktop-menu-open .desktop-menu-toggle span:nth-child(1) {
    transform: translateY(12px) rotate(45deg);
}
.holo.desktop-menu-open .desktop-menu-toggle span:nth-child(3) {
    transform: translateY(-12px) rotate(-45deg);
}

/* The menu is a translucent Holo layer over the current content.
   No card border, no obvious browser scrollbar. */
.desktop-compact-menu {
    top: 10px;
    bottom: 12px;
    padding: 60px 20px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 35, 77, 0.54) 0%,
            rgba(5, 51, 101, 0.45) 54%,
            rgba(3, 39, 83, 0.56) 100%
        );

    border: 0;
    box-shadow:
        inset 0 0 54px rgba(83, 210, 250, 0.055),
        0 0 14px rgba(25, 151, 211, 0.04);

    backdrop-filter: blur(0.8px);
    -webkit-backdrop-filter: blur(0.8px);

    scrollbar-width: none;
}

.desktop-compact-menu::-webkit-scrollbar {
    display: none;
}

.desktop-compact-menu-item {
    min-height: 40px;
    padding: 4px;
    font-size: 18px;
}

.desktop-compact-chevron {
    font-size: 22px;
}

.desktop-compact-band-submenu.open {
    max-height: 138px;
}

.desktop-compact-band-submenu button {
    min-height: 31px;
    padding: 3px 7px 3px 20px;
    font-size: 15px;
}

/* Small Home logo pinned to the visible Holo edge. */
.desktop-compact-home-logo {
    left: var(--desktop-home-logo-left);
    bottom: 26px;
    width: 78px;
    opacity: 0.58;
    filter: drop-shadow(0 0 7px rgba(100, 220, 255, 0.18));
}


/* RECOVERY: visual menu corner restore only. */
.desktop-compact-menu {
    border-radius: 18px;
}


/* =========================================================
   PHOTO LAYOUT — DESKTOP
   Uses ONLY the existing responsive states:
   1) normal desktop
   2) .compact-nav desktop
   Mobile remains controlled by mobile.css.
   ========================================================= */

.desktop-app .band-photo-stage {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Normal desktop:
   larger than the previous undersized correction, but below the
   recovered 122% photo that cropped both heads too strongly. */
.desktop-app .band-photo-effect {
    position: absolute;
    left: 1.5%;
    bottom: 0;
    width: 69%;
    height: 110%;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    transform: translateY(30px);
}

.desktop-app .band-photo {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: left bottom;
}

/* Keep the sweep mask exactly on the left-aligned photo. */
.desktop-app .band-photo-effect::after {
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}

/* Compact KI block with a guaranteed separate right-hand zone. */
.desktop-app .band-photo-note {
    left: auto;
    right: 3.2%;
    top: auto;
    bottom: 6.5%;

    width: 25.5%;
    max-width: 285px;
    min-width: 0;

    transform: none;
    gap: 4px;

    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
}

.desktop-app .band-photo-note span {
    padding: 7px 6px 7px 9px;
}


/* ---------------------------------------------------------
   EXISTING responsive state: desktop hamburger / compact-nav
   No new breakpoint. Photo + KI are rebalanced together.
   --------------------------------------------------------- */

.desktop-app.compact-nav .band-photo-effect {
    left: 0;
    bottom: 0;
    width: 66%;
    height: 104%;
    transform: translateY(18px);
}

.desktop-app.compact-nav .band-photo-note {
    left: auto;
    right: 1.5%;
    top: auto;
    bottom: 5%;

    width: 30%;
    max-width: none;
    min-width: 0;

    gap: 3px;
    font-size: 9.5px;
    letter-spacing: 0.015em;
}

.desktop-app.compact-nav .band-photo-note span {
    padding: 6px 4px 6px 7px;
}


/* =========================================================
   COMPACT DESKTOP PHOTO — VISUAL REFINEMENT ONLY
   Existing .compact-nav state; no new responsive breakpoint.
   ========================================================= */

.desktop-app.compact-nav .holo[data-route="photo"] .holo-content {
    padding-top: 18px;
    padding-bottom: 26px;
}

/* Use the free upper space for the actual main element: the band. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-effect {
    left: 0;
    bottom: 0;
    width: 86%;
    height: 150%;
    transform: translateY(30px);
}

/* KI annotation becomes a true right-edge rail:
   directly below the hamburger and above the small Home logo. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    left: auto;
    right: 0;
    top: 88px;
    bottom: auto;

    width: 62px;
    height: 240px;
    min-width: 0;
    max-width: none;

    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;

    padding: 0;
    margin: 0;
    overflow: visible;

    transform: none;

    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.01em;
    text-align: left;
}

/* Vertical typewriter: same three pieces of text, but they now reveal
   downward. The lower border is the moving cursor. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span {
    display: block;
    box-sizing: border-box;

    width: 18px;
    height: 0;
    min-width: 18px;
    max-width: 18px;

    padding: 6px 4px;
    overflow: hidden;
    white-space: nowrap;

    writing-mode: vertical-rl;
    text-orientation: mixed;

    background: linear-gradient(
        180deg,
        rgba(85, 210, 248, 0.11),
        rgba(85, 210, 248, 0.025)
    );

    border-left: 1px solid rgba(150, 233, 255, 0.12);
    border-right: 1px solid rgba(150, 233, 255, 0.12);
    border-top: 1px solid rgba(145, 230, 255, 0.09);
    border-bottom: 2px solid rgba(205, 249, 255, 0.92);

    animation: none;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(1) {
    animation:
        bandHudRevealVertical 0.95s steps(26, end) 0.35s forwards,
        bandHudCursorVertical 0.70s step-end 1.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(2) {
    animation:
        bandHudRevealVertical 0.95s steps(27, end) 1.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(3) {
    animation:
        bandHudRevealVertical 0.55s steps(9, end) 2.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.90s 2;
}

@keyframes bandHudRevealVertical {
    from { height: 0; }
    to   { height: 100%; }
}

@keyframes bandHudCursorVertical {
    0%, 49%   { border-bottom-color: rgba(205, 249, 255, 0.92); }
    50%, 100% { border-bottom-color: transparent; }
}

/* Same right-hand rail as the annotation. */
.desktop-app.compact-nav .holo[data-route="photo"] .desktop-compact-home-logo {
    left: calc(var(--holo-visible-right) - 100px);
    bottom: 52px;
    width: 68px;
}


/* =========================================================
   COMPACT DESKTOP — ASTRONAUT HOVER + OPEN MENU
   Hotspot is a sibling of .holo, not a child of it.
   Therefore the open-menu state must be addressed from .desktop-app.
   ========================================================= */

/* Hamburger closed: astronaut hover stays available. */
.desktop-app.compact-nav .scene-hotspot {
    display: block;
}

/* Hamburger open: hotspot cannot steal menu clicks. */
.desktop-app.compact-nav:has(.holo.desktop-menu-open) .scene-hotspot {
    pointer-events: none;
}

/* The hover image itself never receives pointer events. */
.desktop-app.compact-nav .layer-foreground-gadget {
    pointer-events: none;
}

/* =========================================================
   COMPACT SCENE SCROLLING
   ========================================================= */
.desktop-scroll-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #02050b;
}

.desktop-app.scrollable-scene {
    overflow: auto;
    overscroll-behavior: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;

    /* Holo-style outer scene scrollbar instead of the native white bar. */
    scrollbar-width: thin;
    scrollbar-color:
        rgba(145, 228, 255, 0.42)
        rgba(4, 35, 70, 0.08);
}

.desktop-app.scrollable-scene::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.desktop-app.scrollable-scene::-webkit-scrollbar-track {
    background: rgba(4, 35, 70, 0.08);
}

.desktop-app.scrollable-scene::-webkit-scrollbar-thumb {
    background: rgba(145, 228, 255, 0.42);
    border-radius: 20px;
    border: 1px solid rgba(2, 18, 36, 0.26);
}

.desktop-app.scrollable-scene::-webkit-scrollbar-thumb:hover {
    background: rgba(165, 238, 255, 0.58);
}

.desktop-app.scrollable-scene::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.desktop-app.scrollable-scene::-webkit-scrollbar-corner {
    background: transparent;
}

.desktop-app.scrollable-scene .desktop-scroll-surface {
    position: relative;
    inset: auto;
    overflow: hidden;
}

/* =========================================================
   COMPACT PHOTO RIGHT RAIL — TRUE VISIBLE HOLO EDGE
   No new breakpoint: existing .compact-nav state only.
   ========================================================= */
.desktop-app.compact-nav .holo[data-route="photo"] .holo-content,
.desktop-app.compact-nav .holo[data-route="photo"] .route-photo,
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-stage {
    overflow: visible;
}

/* Preserve the last tested photo geometry. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-effect {
    left: 0;
    bottom: 0;
    width: 86%;
    height: 150%;
    transform: translateY(30px);
}

/*
   The content column has a deliberate 106px compact right reserve.
   JS already exposes the live visible Holo edge and Home-logo rail.
   This calculation moves the annotation OUT of the content column so
   its right edge follows the same live rail as Hamburger and Home logo.
*/
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    right: calc(
        var(--holo-content-left)
        + var(--holo-content-width)
        - var(--desktop-home-logo-left)
        - 160px
    );
    top: 90px;
    bottom: auto;
    width: 58px;
    height: 250px;
    min-width: 0;
    max-width: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    padding: 0;
    margin: 0;
    transform: none;
    pointer-events: none;
    font-size: 8px;
    line-height: 1;
    letter-spacing: 0.01em;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span {
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 0;
    min-width: 18px;
    max-width: 18px;
    padding: 6px 4px;
    overflow: hidden;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* PHOTO right rail: Hamburger, KI block and Home logo share one exact right edge. */
.desktop-app.compact-nav .holo[data-route="photo"] {
    --photo-rail-right: calc(var(--holo-visible-right) - 32px);
}

.desktop-app.compact-nav .holo[data-route="photo"] .desktop-menu-toggle {
    left: calc(var(--photo-rail-right) - 58px);
}

.desktop-app.compact-nav .holo[data-route="photo"] .desktop-compact-home-logo {
    left: calc(var(--photo-rail-right) - 68px);
    bottom: 52px;
    width: 68px;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    /* band-photo-stage ends at the content edge minus the 106px compact reserve */
    right: calc(
        var(--holo-content-left)
        + var(--holo-content-width)
        - 106px
        - var(--photo-rail-right)
    );
    height: 220px;
}
/* =========================================================
   COMPACT PHOTO — NO HOLO CONTENT SCROLLBAR
   PHOTO only. BIO / LIVE / MEMBERS keep their normal scrollbars.
   ========================================================= */
.desktop-app.compact-nav .holo[data-route="photo"] .holo-content,
.desktop-app.compact-nav .holo[data-route="photo"] .route-photo,
.desktop-app.compact-nav .holo[data-route="photo"] .panel-scroll {
    scrollbar-width: none;
}

.desktop-app.compact-nav .holo[data-route="photo"] .panel-scroll {
    padding-right: 0;
}

.desktop-app.compact-nav .holo[data-route="photo"] .holo-content::-webkit-scrollbar,
.desktop-app.compact-nav .holo[data-route="photo"] .route-photo::-webkit-scrollbar,
.desktop-app.compact-nav .holo[data-route="photo"] .panel-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
/* =========================================================
   COMPACT DESKTOP — LOCK OUTER SCREEN SCROLL
   The compact/hamburger desktop stays fixed.
   Portrait/mobile layout scrolling is controlled separately by mobile.css.
   ========================================================= */
.desktop-app.compact-nav.scrollable-scene {
    overflow: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior: none;
    touch-action: none;
}

.desktop-app.compact-nav.scrollable-scene::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.desktop-app.compact-nav.scrollable-scene .desktop-scroll-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
/* =========================================================
   COMPACT PHOTO — V3 VISUAL CORRECTION
   - band photo no longer shrinks with the visible content column
   - all three KI strips fit and size to their text
   - KI rail visually aligns with hamburger / Home-logo right edge
   ========================================================= */

/* Keep the band roughly at its normal logical desktop size.
   The whole scene may still scale, but the photo no longer shrinks again
   just because --holo-content-width becomes narrower. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-effect {
    width: 670px;
    max-width: none;
    height: 150%;
}

/* The previous 58px rail could physically hold only two 18px strips
   plus gaps. 64px gives all three strips room. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    width: 64px;
    height: 256px;

    /* optical correction against the projected Holo:
       right edge now follows hamburger + small logo */
    transform: translateX(-14px);

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    color: rgba(225, 248, 255, 0.90);
    text-shadow: 0 0 5px rgba(115, 225, 255, 0.42);
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span {
    width: 18px;
    min-width: 18px;
    max-width: 18px;

    /* less dead space at top/bottom */
    padding: 3px 4px;

    /* each strip gets its own final text length */
    height: 0;
}

/* Text lengths correspond to the existing 26 / 27 / 9-step reveal. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(1) {
    --band-hud-final-height: 246px;
    animation:
        bandHudRevealVerticalTight 0.95s steps(26, end) 0.35s forwards,
        bandHudCursorVertical 0.70s step-end 1.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(2) {
    --band-hud-final-height: 256px;
    animation:
        bandHudRevealVerticalTight 0.95s steps(27, end) 1.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(3) {
    --band-hud-final-height: 92px;
    animation:
        bandHudRevealVerticalTight 0.55s steps(9, end) 2.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.90s 2;
}

@keyframes bandHudRevealVerticalTight {
    from { height: 0; }
    to   { height: var(--band-hud-final-height); }
}
/* =========================================================
   COMPACT PHOTO — V4 FINAL NARROW-LANDSCAPE TUNING
   ========================================================= */

/* KI rail: a little further left so its right edge aligns better
   with hamburger and Home logo in the projected Holo. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    transform: translateX(-26px);
}

/* Only in the very last landscape phase before portrait/mobile:
   allow a small, controlled reduction of the band photo. */
@media (orientation: landscape) and (max-width: 950px) {
    .desktop-app.compact-nav .holo[data-route="photo"] .band-photo-effect {
        width: 640px;
    }
}
/* =========================================================
   COMPACT PHOTO — KI RAIL NATURAL HEIGHT
   Keep normal letter spacing. The strip borders now follow the
   actual text length instead of using oversized fixed heights.
   ========================================================= */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    /* Slight additional move left from the tested V4 position. */
    transform: translateX(-36px);

    /* Parent no longer forces long strips. */
    height: auto;

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span {
    /* Let each vertical strip end where its own text ends. */
    height: auto !important;
    min-height: 0;
    max-height: none;

    padding: 3px 4px;
    overflow: hidden;

    /* Reveal is done by clipping, not by stretching the box height. */
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    animation: none;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(1) {
    animation:
        bandHudRevealClip 0.95s steps(26, end) 0.35s forwards,
        bandHudCursorVertical 0.70s step-end 1.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(2) {
    animation:
        bandHudRevealClip 0.95s steps(27, end) 1.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.30s 2;
}

.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span:nth-child(3) {
    animation:
        bandHudRevealClip 0.55s steps(9, end) 2.35s forwards,
        bandHudCursorVertical 0.70s step-end 2.90s 2;
}

@keyframes bandHudRevealClip {
    from {
        clip-path: inset(0 0 100% 0);
        -webkit-clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}
/* =========================================================
   COMPACT PHOTO — V6 EXACT RIGHT RAIL
   One calculated right edge for hamburger, KI annotation and Home logo.
   No optical translate / eyeballing.
   ========================================================= */
.desktop-app.compact-nav .holo[data-route="photo"] {
    --photo-rail-right: calc(var(--desktop-menu-toggle-left) + 58px);
}

/* Home logo: exact same right edge as hamburger. */
.desktop-app.compact-nav .holo[data-route="photo"] .desktop-compact-home-logo {
    left: calc(var(--photo-rail-right) - 68px);
}

/* KI note lives inside band-photo-stage, whose right edge is:
   holo-content-left + holo-content-width - 106px
   (106px = existing compact PHOTO right reserve).
   Therefore its 'right' offset is the distance from that stage edge
   back to the shared hamburger right edge. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    right: calc(
        var(--holo-content-left)
        + var(--holo-content-width)
        - 106px
        - var(--photo-rail-right)
    );

    transform: none;
}
/* =========================================================
   COMPACT PHOTO — V7
   Fix the two actual causes:
   1) stage -> holo coordinate conversion was missing the Holo's 34px left padding
   2) vertical text needs intrinsic logical inline-size, not auto/fixed height
   ========================================================= */

/* Exact shared right edge:
   stage-right in Holo coordinates =
   34px Holo left padding
   + visible-content offset
   + visible-content width
   - 106px compact PHOTO right reserve */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note {
    right: calc(
        34px
        + var(--holo-content-left)
        + var(--holo-content-width)
        - 106px
        - var(--photo-rail-right)
    );

    transform: none;
    height: auto;
    letter-spacing: 0.01em;
}

/* In vertical writing mode the inline axis is vertical.
   max-content therefore makes each strip exactly as tall as its text. */
.desktop-app.compact-nav .holo[data-route="photo"] .band-photo-note span {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    height: max-content !important;
    inline-size: max-content !important;
    block-size: 18px !important;

    min-height: 0 !important;
    max-height: none !important;

    padding: 3px 4px;
    white-space: nowrap;
    overflow: hidden;
}

/* =========================================================
   RESPONSIVE STATE RESTORE — FINAL SCENE SWITCH + PHONE LANDSCAPE

   - Landscape / nearly-square remains the desktop/Hamburger scene.
   - Mobile artwork starts only in clear portrait at <= 3:4.
   - JS is the exact source of truth; this media rule is the CSS fallback.
   - Real phone landscape keeps the desktop scene/Hamburger and may scroll
     the complete scene vertically. Tablet/desktop landscape remain fixed.
   - No PHOTO geometry or existing compact-Holo rules are changed here.
   ========================================================= */

@media (orientation: portrait) and (min-aspect-ratio: 751/1000) {
    .desktop-app {
        display: block !important;
    }

    .mobile-app {
        display: none !important;
    }
}

.desktop-app.phone-landscape-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.desktop-app.phone-landscape-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.desktop-app.phone-landscape-scroll .desktop-scroll-surface {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: var(--phone-landscape-scene-height, 100vh);
    overflow: hidden;
}

/* =========================================================
   FIREFOX TEST 33 — 32.8125% GEOMETRY + SMALL RIGHT-EDGE DROP

   Windows Firefox only.

   Purpose:
   - move closer to today's desired geometry than Patch 32
   - at the same time improve the visual impression by pulling the
     right edge slightly downward, like a mild 2D clockwise tilt

   Base search point before cosmetic tilt: 32.8125%
   Additional tweak: right edge +12px in screen space
   Logical Holo surface remains fixed at 760 × 370.
   ========================================================= */
.desktop-app.firefox-old-holo-test #desktop-holo {
    width: 760px !important;
    height: 370px !important;

    padding:
        12px
        28px
        10px
        24px !important;

    transform:
        matrix3d(
             0.882469006, -0.142065945, 0, -0.000305672,
             -0.002322390, 1.162570562, 0, -0.000004426,
             0, 0, 1, 0,
             524.693057, 161.836271, 0, 1
        ) !important;

    transform-origin: 0 0 !important;
}


/* =========================================================
   FIREFOX FIX 36 — PROPORTIONAL COPY OF APPROVED DESKTOP UI

   IMPORTANT:
   - Patch 33 perspective is frozen and unchanged.
   - This is NOT a new visual design.
   - The accepted 1050×500 compact layout is converted numerically to
     the 760×370 Firefox fallback coordinate system.

   Horizontal factor: 760/1050 = 0.723809524
   Vertical factor:   370/500  = 0.740000000

   Percentage-based PHOTO sizing stays exactly 86% × 150%.
   ========================================================= */

/* ---------- Typography: keep Patch 34 values exactly (user-approved) ---------- */

.desktop-app.firefox-old-holo-test #desktop-holo .panel h1,
.desktop-app.firefox-old-holo-test #desktop-holo h1 {
    font-size: 23px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .panel h2,
.desktop-app.firefox-old-holo-test #desktop-holo h2 {
    font-size: 15px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .panel p,
.desktop-app.firefox-old-holo-test #desktop-holo p {
    font-size: 13px;
    line-height: 1.50;
}

.desktop-app.firefox-old-holo-test #desktop-holo .section-subnav button,
.desktop-app.firefox-old-holo-test #desktop-holo .band-subnav button,
.desktop-app.firefox-old-holo-test #desktop-holo .band-home-link {
    font-size: 10px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .member {
    font-size: 12px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .member span {
    font-size: 10px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .imprint p {
    font-size: 11px;
}

.desktop-app.firefox-old-holo-test.compact-nav #desktop-holo h1 {
    font-size: 22px;
    line-height: 1.16;
}

.desktop-app.firefox-old-holo-test.compact-nav #desktop-holo h2 {
    font-size: 19px;
    line-height: 1.18;
}

.desktop-app.firefox-old-holo-test.compact-nav #desktop-holo p {
    font-size: 16px;
    line-height: 1.46;
}

.desktop-app.firefox-old-holo-test.compact-nav #desktop-holo .member-rich p {
    font-size: 15px;
    line-height: 1.44;
}

/* ---------- Compact content box: exact proportional copy ---------- */

.desktop-app.firefox-old-holo-test.compact-nav #desktop-holo .holo-content {
    padding:
        50.320px
        20.267px
        42.920px
        20.267px;
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo:not([data-route="home"]) .holo-content {
    padding-right: 76.724px;
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="home"] .holo-content {
    padding:
        16.280px
        21.714px
        17.760px;
}

/* ---------- Hamburger + compact menu: exact proportional copy ---------- */

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-menu-toggle {
    top: 17.760px;
    width: 41.981px;
    height: 38.480px;
    padding: 8.686px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-menu-toggle span {
    height: 2.960px;
}

.desktop-app.firefox-old-holo-test
#desktop-holo.desktop-menu-open .desktop-menu-toggle span:nth-child(1) {
    transform: translateY(8.880px) rotate(45deg);
}

.desktop-app.firefox-old-holo-test
#desktop-holo.desktop-menu-open .desktop-menu-toggle span:nth-child(3) {
    transform: translateY(-8.880px) rotate(-45deg);
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-menu {
    top: 7.400px;
    bottom: 8.880px;
    padding:
        44.400px
        14.476px
        10.360px;
    border-radius: 13.174px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-menu-item {
    min-height: 29.600px;
    padding: 2.928px;
    font-size: 13.174px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-chevron {
    font-size: 16.102px;
}

.desktop-app.firefox-old-holo-test #desktop-holo
.desktop-compact-band-submenu.open {
    max-height: 102.120px;
}

.desktop-app.firefox-old-holo-test #desktop-holo
.desktop-compact-band-submenu button {
    min-height: 22.940px;
    padding:
        2.220px
        5.067px
        2.220px
        14.476px;
    font-size: 10.979px;
}

/* ---------- Small Home logo: exact proportional copy ---------- */

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-home-logo {
    bottom: 19.240px;
    width: 56.457px;
}

/* ---------- PHOTO: SAME accepted percentages, only px offsets converted ---------- */

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .holo-content {
    padding-top: 13.320px;
    padding-bottom: 19.240px;
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-effect {
    left: 0;
    bottom: 0;
    width: 86%;
    height: 150%;
    transform: translateY(22.200px);
}

/* KI rail: same approved geometry, converted from 1050×500 units. */
.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-note {
    right: calc(
        var(--holo-content-left)
        + var(--holo-content-width)
        - var(--desktop-home-logo-left)
        - 108.571px
    );
    top: 66.600px;
    width: 41.981px;
    height: 196.840px;
    gap: 2.171px;
    font-size: 5.855px;
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-note span {
    width: 13.029px;
    min-width: 13.029px;
    max-width: 13.029px;
    padding: 4.440px 2.895px;
    border-bottom-width: 1.480px;
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .desktop-compact-home-logo {
    left: calc(var(--holo-visible-right) - 72.381px);
    bottom: 38.480px;
    width: 49.219px;
}

/* ---------- Panel scrolling: same usable width as approved layout ---------- */

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo .panel-scroll {
    padding-right: 10.133px;
    scrollbar-width: none !important;
}

/* The proxy scrollbar lives in the SAME logical Holo plane, so it follows
   the perspective exactly instead of relying on Windows' overlay scrollbar. */
.desktop-app.firefox-old-holo-test #desktop-holo .holo-content {
    position: relative;
}

.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar {
    position: absolute;
    z-index: 68;
    width: 5.067px;
    pointer-events: auto;
    background: rgba(80, 170, 210, 0.055);
    border-radius: 14.638px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar[hidden] {
    display: none !important;
}

.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 20.720px;
    border-radius: 14.638px;
    background: rgba(145, 228, 255, 0.32);
    box-shadow: 0 0 3.660px rgba(105, 220, 255, 0.12);
    cursor: pointer;
}


/* =========================================================
   FIREFOX FIX 38 — ISOLATED FINAL CORRECTIONS

   Windows Firefox only. All approved Chromium / other-browser geometry
   remains untouched.

   Fixes:
   - PHOTO keeps the accepted fixed compact-photo size on the 760px plane
   - KI rail uses the correct vertical scale and remains readable
   - compact menu is explicitly composited above PHOTO
   - compact menu typography is reduced for Firefox
   - Home logo remains visible while the compact menu is open
   - custom Holo scrollbar gets a stable, non-overlay visual width
   ========================================================= */

/* Keep routed PHOTO content below the compact controls in Firefox's
   transformed Holo stacking context. */
.desktop-app.firefox-old-holo-test #desktop-holo > .holo-content {
    position: relative;
    z-index: 1;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-menu {
    z-index: 160;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-menu-toggle {
    z-index: 180;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-home-logo {
    z-index: 170;
}

/* Firefox renders the compact menu type too large on this transformed
   fallback plane. These values are intentionally Firefox-only. */
.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-menu-item {
    font-size: 11.2px;
    line-height: 1.06;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-chevron {
    font-size: 14px;
}

.desktop-app.firefox-old-holo-test #desktop-holo .desktop-compact-band-submenu button {
    font-size: 9.4px;
    line-height: 1.06;
}

/* The accepted compact PHOTO uses a fixed 670px band width on the
   1050px Holo. 670 * (760/1050) = 484.95px. Do not revert to 86%,
   otherwise the band shrinks again with the visible content column. */
.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-effect {
    left: 0;
    bottom: 0;
    width: 484.95px;
    max-width: none;
    height: 150%;
    transform: translateY(22.2px);
}

/* One shared PHOTO rail in Firefox coordinates. */
.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] {
    --photo-rail-right: calc(var(--desktop-menu-toggle-left) + 41.981px);
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .desktop-compact-home-logo {
    left: calc(var(--photo-rail-right) - 49.219px);
    bottom: 38.48px;
    width: 49.219px;
}

/* Keep the Home logo available when the Firefox hamburger menu is open.
   The global rule intentionally remains untouched for every other browser. */
.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo.desktop-menu-open .desktop-compact-home-logo {
    display: block;
}

/* KI rail: exact stage-to-Holo conversion on the 760px fallback plane.
   24px = actual Firefox Holo left padding.
   76.724px = 106px compact PHOTO reserve * 760/1050. */
.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-note {
    right: calc(
        24px
        + var(--holo-content-left)
        + var(--holo-content-width)
        - 76.724px
        - var(--photo-rail-right)
    );
    top: 66.6px;
    width: 46.324px;
    height: auto;
    gap: 2.171px;

    /* 9.5px * 370/500 = 7.03px: use vertical scaling for vertical text. */
    font-size: 7.03px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgba(232, 251, 255, 0.96);
    text-shadow:
        0 0 4px rgba(130, 232, 255, 0.72),
        0 0 8px rgba(70, 185, 230, 0.34);
}

.desktop-app.firefox-old-holo-test.compact-nav
#desktop-holo[data-route="photo"] .band-photo-note span {
    width: 13.029px !important;
    min-width: 13.029px !important;
    max-width: 13.029px !important;
    block-size: 13.029px !important;

    height: max-content !important;
    inline-size: max-content !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 2.22px 2.895px;
    border-bottom-width: 1.48px;
}

/* Stable Firefox Holo scrollbar: the native overlay remains hidden;
   this proxy keeps its full visual width before, during and after hover. */
.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar {
    width: 7px;
    background: rgba(80, 170, 210, 0.065);
}

.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar-thumb {
    min-height: 22px;
    background: rgba(145, 228, 255, 0.38);
    box-shadow: 0 0 4px rgba(105, 220, 255, 0.16);
}

.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar:hover,
.desktop-app.firefox-old-holo-test #desktop-holo .firefox-holo-scrollbar-thumb:hover {
    width: 7px;
}