/* lotabin Production Orbit styles. Extracted from the web component and
   scoped under the .lotabin-orbit wrapper, with lo-prefixed classes so the
   site stylesheet and this file cannot leak into each other. Editable. */

.lotabin-orbit {
        color-scheme: dark;
        --ltb-bg: #0d0d11;
        --ltb-panel: rgba(7, 10, 9, .78);
        --ltb-panel-2: rgba(12, 16, 14, .88);
        --ltb-text: #f2efe6;
        --ltb-muted: rgba(242, 239, 230, .67);
        --ltb-soft: rgba(242, 239, 230, .46);
        --ltb-line: rgba(242, 239, 230, .13);
        --ltb-line-strong: rgba(242, 239, 230, .22);
        --ltb-sprout: #e3cda3;
        --ltb-sprout-deep: #c8a876;
        --ltb-warm: #f3efe2;
        --ltb-gold: #c8a876;
        --ltb-card-w: min(33vw, 144px);
        --ltb-card-h: calc(var(--ltb-card-w) * 1.34);
        --ltb-phone-wbase: min(58vw, 270px);
        /* Height is the master dimension, capped to the vertical gap between the HUD
           and the info card so the assembled phone never overlaps them. ~390px
           accounts for the HUD + info card + grid gaps; /1.08 leaves room for the
           final phone-scale. Width is derived from height to preserve the aspect. */
        --ltb-phone-h: min(calc(var(--ltb-phone-wbase) * 2.03), calc((100svh - 390px) / 1.08));
        --ltb-phone-w: calc(var(--ltb-phone-h) / 2.03);
        --lotabin-sticky-top: 0px;
        --lotabin-component-z-index: 0;
        --ltb-img1: url("../assets/orbit/img1.webp");
        --ltb-img2: url("../assets/orbit/img2.webp");
        --ltb-img25: url("../assets/orbit/img25.webp");
        --ltb-img3: url("../assets/orbit/img3.webp");
        --ltb-img35: url("../assets/orbit/img35.webp");
        --ltb-img4: url("../assets/orbit/img4.webp");
        --ltb-poster: url("../assets/orbit/poster.jpg");
        font-family: var(--font-sans, Inter, "Noto Sans JP", ui-sans-serif, system-ui, sans-serif);
        display: block;
        position: relative;
        z-index: var(--lotabin-component-z-index);
        isolation: isolate;
        contain: layout style;
      }
.lotabin-orbit .lo-assembly, .lotabin-orbit .lo-assembly * { box-sizing: border-box; }
.lotabin-orbit .lo-assembly {
        position: relative;
        z-index: 0;
        height: 950vh;
        min-height: 7200px;
        color: var(--ltb-text);
        background: transparent;
      }
.lotabin-orbit .lo-pin {
        position: sticky;
        top: var(--lotabin-sticky-top, 0px);
        height: calc(100svh - var(--lotabin-sticky-top, 0px));
        min-height: 720px;
        overflow: hidden;
        perspective: 1200px;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 20px clamp(16px, 2vw, 36px) 22px;
        background: transparent;
        z-index: 0;
      }
.lotabin-orbit .lo-pin::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(180deg, #0d0d10, #0d0d10 14%, rgba(13,13,16,0) 26%, rgba(13,13,16,0) 86%, #0d0d10),
          linear-gradient(90deg, #0d0d10, rgba(13,13,16,0) 12%, rgba(13,13,16,0) 88%, #0d0d10);
        z-index: 1;
        opacity: .82;
      }
/* Three.js soundstage background (js/orbit-stage.js). Sits under the edge-fade
   ::before (z 1) and all content (z 2); if WebGL is unavailable the .lo-pin
   gradient background simply shows through. */
.lotabin-orbit .lo-stage-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
        /* Deferred WebGL stage: stay invisible until it has rendered its first
           frame, then fade in (orbit-stage.js adds .is-stage-ready). Without
           this the soundstage pops in abruptly a beat after the popup reveals,
           reading as a flicker/glitch. */
        opacity: 0;
        transition: opacity 0.7s ease;
      }
.lotabin-orbit.is-stage-ready .lo-stage-bg { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lotabin-orbit .lo-stage-bg { transition: none; }
}
.lotabin-orbit .lo-hud, .lotabin-orbit .lo-stage, .lotabin-orbit .lo-info {
        position: relative;
        z-index: 2;
      }
.lotabin-orbit .lo-hud {
        padding: 4px 0 0;
        border-radius: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        transform: translateY(var(--hud-y, 0px)) scale(var(--hud-scale, 1));
        opacity: var(--hud-opacity, 1);
        transform-origin: top center;
      }
.lotabin-orbit .lo-hud-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
      }
.lotabin-orbit .lo-hud-kicker {
        flex: 0 0 auto;
        color: rgba(242,239,230,.66);
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
      }
.lotabin-orbit .lo-hud-stage {
        min-width: 0;
        text-align: right;
        margin-right: clamp(16px, 7vw, 130px);
        color: var(--ltb-text);
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: clamp(16px, 1.5vw, 26px);
        line-height: 1.25;
        font-weight: 500;
        letter-spacing: .09em;
        text-transform: uppercase;
        text-wrap: balance;
      }
/* typewriter caret — solid while typing, blinking at rest */
.lotabin-orbit .lo-hud-stage::after {
        content: "";
        display: inline-block;
        width: .52em;
        height: 1.02em;
        margin-left: .22em;
        vertical-align: text-bottom;
        background: var(--ltb-gold, #cfa772);
        animation: ltbCaretBlink 1.1s steps(1) infinite;
      }
.lotabin-orbit .lo-hud-stage.lo-typing::after {
        animation: none;
        opacity: 1;
      }
@keyframes ltbCaretBlink {
        0%, 54% { opacity: 1; }
        55%, 100% { opacity: 0; }
      }
@media (prefers-reduced-motion: reduce) {
        .lotabin-orbit .lo-hud-stage::after { animation: none; }
      }
.lotabin-orbit .lo-hud-rail {
        display: none;
        height: 2px;
        margin-top: 15px;
        border-radius: 999px;
        background: rgba(207, 167, 114, .20);
        overflow: hidden;
        box-shadow: none;
      }
.lotabin-orbit .lo-hud-fill {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: var(--ltb-gold);
        box-shadow: 0 0 18px rgba(207, 167, 114, .22);
      }
.lotabin-orbit .lo-steps {
        display: grid;
        position: relative;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: 22px;
        margin-top: 18px;
        align-items: end;
      }
.lotabin-orbit .lo-step {
        min-width: 0;
        position: relative;
        overflow: visible;
        border: 0;
        border-radius: 0;
        padding: 0 0 13px;
        background: transparent;
        color: rgba(242,239,230,.48);
        text-align: center;
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 9px;
        font-weight: 500;
        letter-spacing: .15em;
        text-transform: uppercase;
      }
.lotabin-orbit .lo-step { cursor: pointer; transition: color .25s var(--e-out, ease); }
.lotabin-orbit .lo-step:hover, .lotabin-orbit .lo-step:focus-visible { color: rgba(242,239,230,.95); outline: none; }
.lotabin-orbit .lo-steps::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: #43382b;
        z-index: 0;
      }
.lotabin-orbit .lo-step::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        background: #43382b;
        transform: translateY(0);
      }
.lotabin-orbit .lo-step::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: calc(var(--seg,0) * 100%);
        height: 3px;
        background: var(--ltb-gold);
        box-shadow: 0 0 10px rgba(207, 167, 114, .25);
      }
.lotabin-orbit .lo-step span {
        position: relative;
        z-index: 1;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
.lotabin-orbit .lo-step.lo-active, .lotabin-orbit .lo-step.lo-done {
        color: rgba(242,239,230,.94);
        border-color: transparent;
        background: transparent;
      }
.lotabin-orbit .lo-stage {
        display: grid;
        place-items: center;
        min-height: 0;
        isolation: isolate;
        /* Clip only the TOP edge so the orbit/cards can never bleed up into
           the HUD + steps row (Board / QA …). Sides and bottom stay unclipped
           so wide cards and the rising phone are never cropped. */
        clip-path: inset(0 -100vw -100vw -100vw);
      }
.lotabin-orbit .lo-world {
        position: relative;
        width: min(100%, 1500px);
        height: clamp(400px, calc(100vh - 390px), 570px);
        min-height: 360px;
        transform-style: preserve-3d;
      }
.lotabin-orbit .lo-soft-shadow {
        position: absolute;
        left: 50%;
        top: 80%;
        width: min(50vw, 620px);
        height: 104px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(ellipse at center, rgba(0,0,0,.58), transparent 72%);
        filter: blur(6px);
        opacity: .8;
        z-index: 1;
        pointer-events: none;
      }
.lotabin-orbit .lo-glow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: min(24vw, 300px);
        height: min(24vw, 300px);
        transform: translate(-50%,-50%) scale(var(--glow-scale,.6));
        border-radius: 50%;
        background: radial-gradient(circle, rgba(200,168,118,.16), rgba(242,239,230,.04) 38%, transparent 60%);
        opacity: var(--glow-opacity,0);
        filter: blur(10px);
        z-index: 2;
        pointer-events: none;
      }
.lotabin-orbit .lo-orbit {
        position: absolute;
        left: 50%;
        top: 43%;
        width: min(77vw, 1260px);
        height: min(43vh, 430px);
        transform: translate(-50%,-50%) translateY(var(--ring-y,0px)) scale(var(--ring-scale,1));
        opacity: var(--ring-opacity,1);
        z-index: 4;
        pointer-events: none;
      }
.lotabin-orbit .lo-orbit svg {
        width: 100%;
        height: 100%;
        overflow: visible;
        filter: drop-shadow(0 0 12px rgba(200,168,118,.12));
      }
.lotabin-orbit .lo-hex-label {
        position: absolute;
        left: 50%;
        top: 50%;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: .24em;
        text-transform: uppercase;
        white-space: nowrap;
        color: rgba(242,239,230,.34);
        transition: color .35s ease, text-shadow .35s ease;
        pointer-events: none;
      }
.lotabin-orbit .lo-hex-label.lo-active {
        color: #d8b985;
        text-shadow: 0 0 9px rgba(200,168,118,.45);
      }
@media (max-width: 759px) {
.lotabin-orbit .lo-hex-label { font-size: 7.5px; letter-spacing: .18em; }
      }
.lotabin-orbit .lo-track {
        fill: none;
        stroke: rgba(200,168,118,.14);
        stroke-width: 0.5;
      }
.lotabin-orbit .lo-vine-line {
        fill: none;
        stroke: url(#ltbVineGradient);
        stroke-width: 0.8;
        stroke-linecap: round;
        stroke-dasharray: 100;
        stroke-dashoffset: var(--vine-offset,100);
        opacity: var(--vine-green-opacity, 1);
        filter: drop-shadow(0 0 6px rgba(200,168,118,.5));
      }
.lotabin-orbit .lo-vine-gold {
        stroke: var(--ltb-gold, #CFA772);
        opacity: var(--vine-gold-opacity, 0);
        filter: drop-shadow(0 0 7px rgba(207,167,114,.55));
      }
.lotabin-orbit .lo-vine-leaf {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 44px;
        height: 60px;
        opacity: 0;
        pointer-events: none;
        filter: drop-shadow(0 3px 7px rgba(0,0,0,.30)) drop-shadow(0 0 6px rgba(200,168,118,.32));
      }
.lotabin-orbit .lo-leaf-svg {
        width: 100%;
        height: 100%;
        overflow: visible;
        display: block;
      }
.lotabin-orbit .lo-leaf-blade {
        fill: rgba(200,168,118,.16);
        stroke: rgba(216,200,160,.78);
        stroke-width: 1.25;
        stroke-linejoin: round;
      }
.lotabin-orbit .lo-leaf-vein {
        fill: none;
        stroke: rgba(216,200,160,.55);
        stroke-width: .9;
        stroke-linecap: round;
      }
.lotabin-orbit .lo-leaf-stem {
        fill: none;
        stroke: rgba(200,168,118,.74);
        stroke-width: 1.4;
        stroke-linecap: round;
      }
.lotabin-orbit .lo-vine-bud {
        position: absolute;
        left: 50%;
        top: 16%;
        width: 7px;
        height: 7px;
        border-radius: 999px;
        transform: translate(-50%,-50%);
        background: radial-gradient(circle at 38% 35%, #efe0c2, #c8a876 55%, #9a7d4f);
        box-shadow: 0 0 9px rgba(200,168,118,.72);
        opacity: var(--ring-opacity, 1);
        pointer-events: none;
      }
.lotabin-orbit .lo-card {
        position: absolute;
        left: 50%;
        top: 43%;
        width: var(--ltb-card-w);
        height: var(--ltb-card-h);
        transform-style: preserve-3d;
        will-change: transform, opacity, filter;
        z-index: 6;
        pointer-events: none;
      }
.lotabin-orbit .lo-dev {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
      }

/* ---- c1 · KPI Setup — tablet (iPad) ---- */
.lotabin-orbit .lo-tablet {
        position: relative;
        width: 90%;
        aspect-ratio: 0.75;
        border-radius: 9.5%/7.1%;
        background: linear-gradient(150deg, #a7adb3, #62676c 58%, #8b9197);
        padding: 2.4%;
        box-shadow: 0 22px 50px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.45);
      }
.lotabin-orbit .lo-tablet-bezel {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 8.5%/6.4%;
        background: #101214;
        padding: 4.2%;
      }
.lotabin-orbit .lo-tablet-bezel::before {
        content: "";
        position: absolute;
        top: 2.1%;
        left: 50%;
        width: 5px;
        height: 5px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: radial-gradient(circle at 35% 35%, #3d4750, #14181c 70%);
      }
.lotabin-orbit .lo-tablet-screen {
        width: 100%;
        height: 100%;
        border-radius: 5.5%/4.1%;
        background: #fbfbfc var(--pic) center/contain no-repeat;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
      }

/* ---- c2 · Script — printed page ---- */
.lotabin-orbit .lo-paper {
        position: relative;
        width: 86%;
        aspect-ratio: 0.78;
      }
.lotabin-orbit .lo-paper-back {
        position: absolute;
        inset: 0;
        transform: rotate(2.6deg) translate(2.5%, 1.2%);
        background: #e9e5da;
        border-radius: 3px;
        box-shadow: 0 14px 30px rgba(0,0,0,.35);
      }
.lotabin-orbit .lo-paper-sheet {
        position: absolute;
        inset: 0;
        transform: rotate(-1.7deg);
        background: #fdfcf8 var(--pic) center/92% no-repeat;
        border-radius: 3px;
        box-shadow: 0 16px 36px rgba(0,0,0,.40);
      }
.lotabin-orbit .lo-paper-clip {
        position: absolute;
        top: -3.5%;
        left: 9%;
        width: 10.5%;
        aspect-ratio: 0.46;
        transform: rotate(-7deg);
        border: 2.5px solid #b6bcc3;
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(0,0,0,.25);
      }
.lotabin-orbit .lo-paper-clip::before {
        content: "";
        position: absolute;
        left: 22%;
        right: 22%;
        top: 14%;
        bottom: 36%;
        border: 2px solid #c9ced4;
        border-radius: 999px;
      }

/* ---- c3 · Concept — taped art sheet ---- */
.lotabin-orbit .lo-art {
        position: relative;
        width: 98%;
        aspect-ratio: 4/3;
        transform: rotate(1.6deg);
      }
.lotabin-orbit .lo-art-sheet {
        position: absolute;
        inset: 0;
        background: #f6ead0 var(--pic) center/cover no-repeat;
        border-radius: 2px;
        box-shadow: 0 16px 36px rgba(0,0,0,.38);
      }
.lotabin-orbit .lo-tape {
        position: absolute;
        width: 30%;
        height: 8.5%;
        background: linear-gradient(rgba(244,238,218,.62), rgba(238,230,206,.55));
        box-shadow: 0 2px 5px rgba(0,0,0,.20);
      }
.lotabin-orbit .lo-tape-tl { left: -8%; top: -3%; transform: rotate(-37deg); }
.lotabin-orbit .lo-tape-br { right: -8%; bottom: -3%; transform: rotate(-37deg); }

/* ---- c4 · Storyboard — clipped printout ---- */
.lotabin-orbit .lo-storyb {
        position: relative;
        width: 99%;
        aspect-ratio: 1.775;
      }
.lotabin-orbit .lo-storyb-sheet {
        position: absolute;
        inset: 0;
        background: #f4f2ec var(--pic) center/cover no-repeat;
        border-radius: 2px;
        box-shadow: 0 16px 36px rgba(0,0,0,.40);
      }
.lotabin-orbit .lo-binder {
        position: absolute;
        top: -7%;
        left: 50%;
        transform: translateX(-50%);
        width: 19%;
        aspect-ratio: 2.5;
        background: linear-gradient(#43484e, #1e2125 70%);
        clip-path: polygon(6% 100%, 94% 100%, 100% 8%, 88% 0, 12% 0, 0 8%);
        box-shadow: 0 3px 7px rgba(0,0,0,.35);
      }
.lotabin-orbit .lo-binder::before {
        content: "";
        position: absolute;
        left: 30%;
        right: 30%;
        top: -38%;
        height: 42%;
        border: 2px solid #aab0b7;
        border-bottom: none;
        border-radius: 5px 5px 0 0;
      }

/* ---- c5 · QA — laptop, lid driven by scroll (--lid: 0 closed → 1 open) ---- */
.lotabin-orbit .lo-laptop {
        position: relative;
        width: 96%;
        display: flex;
        flex-direction: column;
        align-items: center;
        perspective: 900px;
        transform-style: preserve-3d;
      }
.lotabin-orbit .lo-laptop-lid {
        position: relative;
        width: 97%;
        aspect-ratio: 1.40;
        transform-origin: 50% 100%;
        transform: rotateX(calc(-84deg * (1 - var(--lid, 0))));
        transform-style: preserve-3d;
        will-change: transform;
      }
.lotabin-orbit .lo-laptop-screen {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        border-radius: 8px 8px 0 0;
        background: #0a0c0d var(--pic) center/cover no-repeat;
        box-shadow: inset 0 0 0 1.5px #26292c, inset 0 0 0 2.5px rgba(255,255,255,.05);
      }
.lotabin-orbit .lo-laptop-screen::before {
        content: "";
        position: absolute;
        top: 3.5%;
        left: 50%;
        width: 4px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 50%;
        background: #2f3a42;
      }
.lotabin-orbit .lo-laptop-cover {
        position: absolute;
        inset: 0;
        transform: rotateX(180deg);
        backface-visibility: hidden;
        border-radius: 0 0 8px 8px;
        background: linear-gradient(200deg, #9aa0a5, #666b70 60%, #7e848a);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
      }
.lotabin-orbit .lo-laptop-base {
        position: relative;
        width: 100%;
        aspect-ratio: 21;
        background: linear-gradient(#b9bec3, #8e9398 45%, #5f6469);
        border-radius: 2px 2px 8px 8px;
        box-shadow: 0 14px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.5);
      }
.lotabin-orbit .lo-laptop-base::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 15%;
        height: 46%;
        background: rgba(20,22,24,.28);
        border-radius: 0 0 5px 5px;
      }

/* ---- c6 · Pictures — director's field monitor ---- */
.lotabin-orbit .lo-monitor {
        position: relative;
        height: 94%;
        aspect-ratio: 0.62;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
.lotabin-orbit .lo-monitor-handle {
        position: relative;
        z-index: 1;
        width: 52%;
        height: 4%;
        border-radius: 999px;
        background: linear-gradient(#3c4146, #23272b);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
      }
.lotabin-orbit .lo-monitor-handle::before,
.lotabin-orbit .lo-monitor-handle::after {
        content: "";
        position: absolute;
        bottom: -68%;
        width: 9%;
        height: 90%;
        background: #2a2e32;
      }
.lotabin-orbit .lo-monitor-handle::before { left: 14%; }
.lotabin-orbit .lo-monitor-handle::after { right: 14%; }
.lotabin-orbit .lo-monitor-body {
        position: relative;
        width: 100%;
        flex: 1;
        margin-top: 2.5%;
        border-radius: 12px;
        background: linear-gradient(165deg, #34393e, #1d2125 65%);
        box-shadow: 0 22px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
      }
.lotabin-orbit .lo-monitor-screen {
        position: absolute;
        inset: 3.4%;
        border-radius: 7px;
        overflow: hidden;
        background: #000 var(--pic) center/cover no-repeat;
      }
.lotabin-orbit .lo-monitor-screen::before,
.lotabin-orbit .lo-monitor-screen::after {
        content: "";
        position: absolute;
        width: 14%;
        aspect-ratio: 1;
        border: 1.5px solid rgba(255,255,255,.55);
      }
.lotabin-orbit .lo-monitor-screen::before {
        left: 5%; top: 3.5%;
        border-right: none; border-bottom: none;
      }
.lotabin-orbit .lo-monitor-screen::after {
        right: 5%; bottom: 3.5%;
        border-left: none; border-top: none;
      }
.lotabin-orbit .lo-rec {
        position: absolute;
        top: 4.6%;
        right: 8%;
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
        color: #ff6b5e;
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
      }
.lotabin-orbit .lo-rec i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff4540;
        box-shadow: 0 0 7px rgba(255,70,60,.85);
      }
.lotabin-orbit .lo-tc {
        position: absolute;
        bottom: 4.2%;
        left: 50%;
        transform: translateX(-50%);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 9.5px;
        letter-spacing: .1em;
        color: rgba(255,255,255,.88);
        text-shadow: 0 1px 2px rgba(0,0,0,.6);
      }
.lotabin-orbit .lo-card-meta {
        position: absolute;
        left: 11px;
        right: 11px;
        bottom: 11px;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 11px;
        border: 1px solid rgba(242,239,230,.10);
        border-radius: 17px;
        background: rgba(3,5,4,.74);
        backdrop-filter: blur(12px);
      }
.lotabin-orbit .lo-badge {
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: rgba(200,168,118,.10);
        border: 1px solid rgba(200,168,118,.24);
        color: var(--ltb-warm);
        font-size: 12px;
        font-weight: 900;
      }
.lotabin-orbit .lo-meta { min-width: 0; }
.lotabin-orbit .lo-meta strong {
        display: block;
        color: var(--ltb-text);
        font-size: 12px;
        line-height: 1.05;
        letter-spacing: .06em;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
.lotabin-orbit .lo-meta small {
        display: block;
        margin-top: 4px;
        color: rgba(242,239,230,.52);
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
.lotabin-orbit .lo-phone {
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--ltb-phone-w);
        height: var(--ltb-phone-h);
        transform: translate(-50%,-50%) translateY(var(--phone-y,0px)) rotateX(var(--phone-rx,0deg)) rotateY(var(--phone-ry,0deg)) rotateZ(var(--phone-rz,0deg)) scale(var(--phone-scale,.8));
        opacity: var(--phone-opacity,0);
        z-index: 14;
        pointer-events: none;
      }
.lotabin-orbit .lo-device {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: calc(var(--ltb-phone-w) * .16);
        padding: calc(var(--ltb-phone-w) * .032);
        background: linear-gradient(145deg,#e8e5da 0%,#858882 12%,#151817 24%,#050605 44%,#1d211f 72%,#f3efe2 100%);
        box-shadow: 0 48px 120px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.14);
        overflow: hidden;
      }
.lotabin-orbit .lo-screen {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: calc(var(--ltb-phone-w) * .125);
        overflow: hidden;
        background: #050605;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 40px rgba(0,0,0,.88);
      }
.lotabin-orbit .lo-grid {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(3,1fr);
        gap: 6px;
        padding: 48px 10px 32px;
        opacity: var(--grid-opacity,1);
        transform: scale(var(--grid-scale,1));
      }
.lotabin-orbit .lo-grid div {
        border-radius: 12px;
        border: 1px solid rgba(242,239,230,.10);
        background-image: var(--pic);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(0,0,0,.22);
      }
.lotabin-orbit video, .lotabin-orbit .lo-poster, .lotabin-orbit .lo-shine {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
.lotabin-orbit video {
        object-fit: cover;
        opacity: var(--video-opacity,0);
      }
.lotabin-orbit .lo-poster {
        background: var(--ltb-poster) center/cover no-repeat;
        opacity: calc(1 - var(--video-opacity,0));
        filter: saturate(.86) brightness(.84);
      }
.lotabin-orbit .lo-shine {
        z-index: 4;
        pointer-events: none;
        background:
          linear-gradient(110deg,rgba(255,255,255,.27),transparent 22%,transparent 58%,rgba(255,255,255,.07)),
          radial-gradient(circle at 50% 8%,rgba(255,255,255,.16),transparent 18%);
        mix-blend-mode: screen;
        opacity: .35;
      }
.lotabin-orbit .lo-island {
        position: absolute;
        z-index: 5;
        top: calc(var(--ltb-phone-w) * .066);
        left: 50%;
        width: calc(var(--ltb-phone-w) * .31);
        height: calc(var(--ltb-phone-w) * .083);
        transform: translateX(-50%);
        border-radius: 999px;
        background: #010101;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.36);
      }
.lotabin-orbit .lo-home {
        position: absolute;
        z-index: 5;
        left: 50%;
        bottom: calc(var(--ltb-phone-w) * .06);
        width: calc(var(--ltb-phone-w) * .33);
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgba(255,255,255,.72);
      }
.lotabin-orbit .lo-info {
        z-index: 5;
        width: min(1080px, calc(100vw - 96px));
        justify-self: center;
        transform: translateY(var(--info-y, 0px));
        opacity: var(--info-opacity, 1);
      }
.lotabin-orbit .lo-info-card {
        padding: 16px 21px 16px;
        display: grid;
        grid-template-columns: minmax(280px, .86fr) minmax(400px, 1.14fr);
        column-gap: 32px;
        row-gap: 7px;
        align-items: center;
      }
.lotabin-orbit .lo-copy-k {
        grid-column: 1 / -1;
        color: rgba(242,239,230,.52);
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .18em;
        text-transform: uppercase;
      }
.lotabin-orbit .lo-copy-t {
        grid-column: 1;
        grid-row: 2 / span 4;
        margin: 0;
        color: var(--ltb-text);
        font-family: var(--font-display, 'Playfair Display', Georgia, serif);
        font-size: clamp(30px, 2.45vw, 44px);
        line-height: 1.0;
        font-weight: 500;
        letter-spacing: -.02em;
        text-wrap: balance;
      }
.lotabin-orbit .lo-copy-t.lo-title-final {
        background: linear-gradient(100deg,
          #CFA772 0%, #CFA772 40%, #FBEFD2 50%, #CFA772 60%, #CFA772 100%);
        background-size: 250% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        filter: drop-shadow(0 0 10px rgba(207,167,114,.38));
        animation: loTitleShine 2.8s linear infinite;
      }
@keyframes loTitleShine {
        0%   { background-position: 130% 0; }
        100% { background-position: -30% 0; }
      }
@media (prefers-reduced-motion: reduce) {
.lotabin-orbit .lo-copy-t.lo-title-final { animation: none; background-position: 50% 0; }
      }
.lotabin-orbit .lo-copy-b {
        grid-column: 2;
        margin: 0;
        color: rgba(242,239,230,.66);
        font-size: 15px;
        line-height: 1.45;
      }
.lotabin-orbit .lo-why-label {
        grid-column: 2;
        margin-top: 3px;
        color: rgba(200,168,118,.82);
        font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .16em;
        text-transform: uppercase;
      }
.lotabin-orbit .lo-why {
        grid-column: 2;
        margin: 0;
        color: rgba(242,239,230,.84);
        font-size: 14px;
        line-height: 1.45;
      }
@media (min-width: 1200px) {.lotabin-orbit { --ltb-card-w: clamp(196px, 13.2vw, 260px); --ltb-phone-wbase: clamp(330px, 22vw, 430px); }
.lotabin-orbit .lo-world { width: min(100%, 1500px); height: clamp(420px, calc(100vh - 390px), 560px); }
.lotabin-orbit .lo-info { width: min(1100px, calc(100vw - 132px)); }
}
@media (min-width: 1600px) {.lotabin-orbit { --ltb-card-w: 272px; --ltb-phone-wbase: 450px; }
.lotabin-orbit .lo-world { width: min(100%, 1580px); height: clamp(440px, calc(100vh - 380px), 590px); }
.lotabin-orbit .lo-info { width: min(1160px, calc(100vw - 160px)); }
}
@media (max-width: 759px) {.lotabin-orbit { --ltb-card-w: min(33vw, 144px); --ltb-phone-wbase: min(58vw, 270px); }
.lotabin-orbit .lo-assembly { height: 900vh; min-height: 6200px; }
.lotabin-orbit .lo-pin {
          /* Never force the pinned panel taller than the visible viewport — a
             min-height above the available svh pushes the info card below the
             fold on short phones (e.g. iPhone SE) and breaks the sticky hold. */
          min-height: 0;
          height: calc(100svh - var(--lotabin-sticky-top, 0px));
          padding: 10px 12px 14px;
          gap: 8px;
        }
.lotabin-orbit .lo-hud {
          padding: 2px 0 0;
          border-radius: 0;
        }
.lotabin-orbit .lo-hud-kicker {
          font-size: 9px;
        }
.lotabin-orbit .lo-hud-stage {
          font-size: clamp(12px, 3.3vw, 17px);
        }
.lotabin-orbit .lo-steps {
          /* VERTICAL production-flow progress rail (reparented into .lo-stage
             by production-orbit.js at mobile widths). Sits over the dim left
             edge of the orbit; the orbit is shifted right to clear it. */
          position: absolute;
          left: 2px;
          top: 50%;
          transform: translateY(-50%);
          display: flex;
          flex-direction: column;
          align-items: stretch;
          grid-template-columns: none;
          gap: 0;
          margin: 0;
          height: min(78%, 384px);
          width: clamp(82px, 25vw, 104px);
          z-index: 6;
        }
.lotabin-orbit .lo-steps::before {
          /* soft scrim so the rail labels stay legible over the dim left edge
             of the orbit (overrides the desktop horizontal baseline line) */
          display: block;
          content: "";
          left: -12px; right: auto; top: -16px; bottom: -16px;
          width: 122px; height: auto;
          background: linear-gradient(90deg, rgba(13,13,16,.94), rgba(13,13,16,.74) 52%, rgba(13,13,16,0));
          z-index: -1;
        }
.lotabin-orbit .lo-step {
          flex: 1 1 0;
          display: flex;
          align-items: center;
          padding: 0 4px 0 18px;
          text-align: left;
          font-size: 8.5px;
          letter-spacing: .1em;
        }
.lotabin-orbit .lo-step span { white-space: nowrap; }
.lotabin-orbit .lo-step::before {
          left: 4px; right: auto; top: 0; bottom: auto;
          width: 2px; height: 100%;
        }
.lotabin-orbit .lo-step::after {
          left: 4px; right: auto; top: 0; bottom: auto;
          width: 2px; height: calc(var(--seg,0) * 100%);
        }
.lotabin-orbit .lo-world {
          width: min(100%, 420px);
          height: 100%;
          /* yields vertical space to the info card on short viewports so the
             orbit shrinks gracefully instead of pushing copy off-screen or
             overlapping it; the 1fr grid track gives it room on taller phones */
          min-height: 0;
        }
.lotabin-orbit .lo-orbit, .lotabin-orbit .lo-card {
          top: 44%;
        }
.lotabin-orbit .lo-phone {
          top: 55%;
        }
.lotabin-orbit .lo-info {
          width: 100%;
        }
.lotabin-orbit .lo-info-card {
          display: block;
          padding: 14px 14px 13px;
        }
.lotabin-orbit .lo-copy-k {
          font-size: 10px;
        }
.lotabin-orbit .lo-copy-t {
          margin-top: 6px;
          font-size: clamp(21px,5.8vw,30px);
        }
.lotabin-orbit .lo-copy-b {
          margin-top: 7px;
          font-size: 13px;
          line-height: 1.4;
        }
.lotabin-orbit .lo-why-label {
          margin-top: 8px;
          font-size: 10px;
        }
.lotabin-orbit .lo-why {
          margin-top: 4px;
          font-size: 12.5px;
          line-height: 1.4;
        }
}

/* ============================================================
   Production-flow popup + floating launcher
   The orbit keeps its native scroll-scrub — inside the popup the
   .orbit-pop-panel is the scroll container (production-orbit.js
   binds scroll to it when data-orbit-driver="popup").
   ============================================================ */
.orbit-pop[hidden] { display: none; }
.orbit-pop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(7, 7, 10, 0.94);
  /* Water-spill reveal: a clip-path circle that grows out of the launcher
     corner. Driven by a single CSS transition (toggled via .is-open) — the
     resting state is the collapsed pinhole, .is-open spreads it across. */
  --spill: circle(0% at 88% 90%);
  clip-path: var(--spill);
  -webkit-clip-path: var(--spill);
  transition: clip-path 850ms cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-clip-path 850ms cubic-bezier(0.22, 1, 0.36, 1);
}
.orbit-pop.is-open { --spill: circle(150% at 88% 90%); }
@media (prefers-reduced-motion: reduce) {
  .orbit-pop { transition: none; }
}
.orbit-pop-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
}
.orbit-pop-panel {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--ltb-bg, #0d0d11);
  overscroll-behavior: contain;
}
/* In the popup the HUD kicker would sit under the top-left close button —
   nudge the HUD row right so "OUR PRODUCTION FLOW" clears it. */
.lotabin-orbit[data-orbit-driver="popup"] .lo-hud-head { padding-left: 66px; }
@media (max-width: 759px) {
  .lotabin-orbit[data-orbit-driver="popup"] .lo-hud-head { padding-left: 58px; }
}
.orbit-pop-close {
  position: fixed;
  bottom: clamp(16px, 3vw, 30px);
  right: clamp(16px, 3vw, 30px);
  top: auto;
  left: auto;
  z-index: 1210;
  width: auto;
  height: 42px;
  padding: 0 18px 0 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper-50, #f6f4ef);
  background: rgba(13, 13, 17, 0.6);
  border: 1px solid rgba(236, 235, 228, 0.22);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .3s ease;
}
.orbit-pop-close-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.orbit-pop-close svg { transition: transform .25s ease; }
.orbit-pop-close:hover {
  background: var(--bronze, #c8a876);
  color: var(--ink-1000, #07070a);
  border-color: var(--bronze, #c8a876);
}
.orbit-pop-close:hover svg { transform: translateX(-3px); }
@keyframes orbitPopFade { from { opacity: 0; } to { opacity: 1; } }

/* "Scroll to know more" cue — shows on open, fades once the panel scrolls */
.orbit-pop-hint {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 1208;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: var(--paper-50, #f6f4ef);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: clamp(1.4rem, 1rem + 2.2vw, 2.6rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity .45s ease, transform .45s ease;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.85);
}
.orbit-pop-hint.is-gone { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
.orbit-pop-hint::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 168%;
  min-width: 720px;
  height: 340%;
  background: radial-gradient(ellipse at center,
    rgba(7, 7, 10, 0.82) 0%,
    rgba(7, 7, 10, 0.66) 40%,
    rgba(7, 7, 10, 0) 74%);
  z-index: -1;
  pointer-events: none;
}
.orbit-pop-hint-arrow {
  width: 38px;
  height: 38px;
  border-right: 3px solid var(--bronze, #c8a876);
  border-bottom: 3px solid var(--bronze, #c8a876);
  transform: rotate(45deg);
  animation: orbitHintBob 1.7s ease-in-out infinite;
}
@keyframes orbitHintBob {
  0%, 100% { transform: rotate(45deg) translate(-4px, -4px); opacity: .5; }
  50%      { transform: rotate(45deg) translate(4px, 4px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-pop-hint-arrow { animation: none; }
}

/* Floating launcher */
.orbit-fab {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px 11px 12px;
  border-radius: 999px;
  color: var(--paper-50, #f6f4ef);
  background: rgba(13, 13, 17, 0.8);
  border: 1px solid rgba(200, 168, 118, 0.34);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(22px) scale(.96);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease, border-color .3s ease, background .3s ease;
}
.orbit-fab.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.orbit-fab:hover {
  border-color: var(--bronze, #c8a876);
  background: rgba(20, 20, 26, 0.92);
}
.orbit-fab-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--bronze, #c8a876);
  animation: orbitFabSpin 16s linear infinite;
}
.orbit-fab.is-active .orbit-fab-mark { animation-play-state: paused; }
.orbit-fab-label { white-space: nowrap; }
@keyframes orbitFabSpin { to { transform: rotate(360deg); } }

/* Hover: the hex fills up with staggered triangular pie wedges that grow out
   from the centre. The idle spin pauses so the fill reads as a clean sweep. */
.orbit-fab-mark svg { overflow: visible; }
.fab-pie {
  fill: var(--bronze, #c8a876);
  stroke: none;
  transform: scale(0);
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .34s cubic-bezier(.34, 1.56, .64, 1);
}
.fab-pie:nth-child(even) { opacity: .6; }
.orbit-fab:hover .orbit-fab-mark,
.orbit-fab:focus-visible .orbit-fab-mark { animation-play-state: paused; }
.orbit-fab:hover .fab-pie,
.orbit-fab:focus-visible .fab-pie { transform: scale(1); }
.orbit-fab:hover .fab-pie:nth-child(1), .orbit-fab:focus-visible .fab-pie:nth-child(1) { transition-delay: 0s; }
.orbit-fab:hover .fab-pie:nth-child(2), .orbit-fab:focus-visible .fab-pie:nth-child(2) { transition-delay: .05s; }
.orbit-fab:hover .fab-pie:nth-child(3), .orbit-fab:focus-visible .fab-pie:nth-child(3) { transition-delay: .1s; }
.orbit-fab:hover .fab-pie:nth-child(4), .orbit-fab:focus-visible .fab-pie:nth-child(4) { transition-delay: .15s; }
.orbit-fab:hover .fab-pie:nth-child(5), .orbit-fab:focus-visible .fab-pie:nth-child(5) { transition-delay: .2s; }
.orbit-fab:hover .fab-pie:nth-child(6), .orbit-fab:focus-visible .fab-pie:nth-child(6) { transition-delay: .25s; }
@media (max-width: 520px) {
  .orbit-fab { padding: 11px; }
  .orbit-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-fab-mark { animation: none; }
  .fab-pie { transition: none; }
}

/* ============================================================
   MOBILE (<=759px) — lighter, simplified production orbit.
   Desktop (>759px) is completely unaffected. Removes the orbiting
   side cards (only the front phone remains), the background
   hexagon/octagon + its leaves, the WebGL soundstage canvas, the
   typewriter caret, and the explainer body / "why it matters"
   (header only). Pairs with the innerWidth<760 JS guards.
   ============================================================ */
@media (max-width: 759px) {
  .lotabin-orbit .lo-orbit { display: none !important; }           /* no background octagon */
  .lotabin-orbit .lo-vine-leaf,
  .lotabin-orbit .lo-vine-bud { display: none !important; }
  .lotabin-orbit .lo-stage-bg { display: none !important; }        /* no WebGL soundstage on mobile */
  .lotabin-orbit .lo-hud-stage::after { display: none !important; } /* no typewriter caret */
  .lotabin-orbit .lo-copy-b,
  .lotabin-orbit .lo-why-label,
  .lotabin-orbit .lo-why { display: none !important; }             /* explainer: header only */
}