/* ==========================================================================
   Focus Lab: the full-bleed 3D hero and everything drawn over it.

   Layers inside #flStage, bottom to top:
     .fl-canvas   the WebGL canvas (mounted by stage.js)
     .fl-labels   DOM pills that track 3D points (mounted by stage.js)
     .fl-ui       title card, control panel, help sheet, call to action
     .fl-loader / .fl-fallback
   The overlays are laid out around where the overview shot puts the room:
   the title card stays shallow over the curtain on the left, and the control
   panel is two compact rows (about 425px) tucked top right, between the third
   lightbox and the ring lights, the way the reference places it.
   Fonts: Inter and JetBrains Mono only. The lab is cyan light and brass;
   imagic orange appears only on the call to action.
   ========================================================================== */

:root { --fl-nav: 70px; }   /* the fixed site navbar (_navbar.html), 70px at every width */

.fl-hero { position: relative; margin-top: var(--fl-nav); }

.fl-stage {
    --fl-cyan: #6fd6ff;
    --fl-ice: #c6ecff;
    --fl-amber: #ffb347;
    --fl-orange: #ff9800;
    --fl-ink: #07090c;
    --fl-text: #dde5ec;
    --fl-soft: #b9c4ce;
    --fl-dim: #84919e;
    --fl-faint: #5f6b77;
    --fl-glass: rgba(10, 13, 18, 0.76);
    --fl-glass-2: rgba(9, 12, 16, 0.64);
    --fl-line: rgba(255, 255, 255, 0.075);
    --fl-line-2: rgba(255, 255, 255, 0.12);
    --fl-gutter: 22px;
    --fl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fl-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

    position: relative;
    height: calc(100vh - var(--fl-nav));
    height: calc(100svh - var(--fl-nav));
    min-height: 540px;
    overflow: hidden;
    isolation: isolate;
    background: radial-gradient(120% 90% at 50% 42%, #0f141b 0%, var(--fl-ink) 62%);
    color: var(--fl-text);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
.fl-stage > script { display: none; }

.fl-canvas {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; display: block;
    touch-action: none; outline: none;
    opacity: 0; transition: opacity 0.7s ease;
}
.fl-stage[data-ready='1'] .fl-canvas { opacity: 1; }

.fl-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3D label pills. stage.js writes translate(x, y) onto .fl-label every frame,
   so the element itself is a zero-size anchor at the 3D point: the dot sits
   exactly on the point and the pill (the span) hangs off it.
   Text written as "Plane of focus · 37 cm" is split by ui.js into a bright
   name and a dim reading (data-sub).
   -------------------------------------------------------------------------- */
.fl-labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: layout paint; }
.fl-label {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    font: 600 10px/1 var(--font-mono);
    color: #f1f5f8; white-space: nowrap;
    transition: opacity 0.35s ease;
    will-change: transform;
}
.fl-label.is-hidden { opacity: 0; }
.fl-label i {
    position: absolute; left: -3px; top: -3px; z-index: 1;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fl-cyan);
    box-shadow: 0 0 0 1.5px rgba(7, 9, 12, 0.9), 0 0 8px 1px rgba(111, 214, 255, 0.9);
}
.fl-label i::after {
    content: ''; position: absolute; inset: -5px; border-radius: 50%;
    border: 1px solid rgba(111, 214, 255, 0.6);
    animation: fl-ping 2.6s var(--fl-ease) infinite;
}
.fl-label span {
    position: absolute; top: 0; left: -9px;
    transform: translateY(-50%);
    transform-origin: 9px 50%;
    padding: 4px 8px 4px 16px;
    background: rgba(7, 10, 14, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.01em;
    transition: scale 0.4s var(--fl-spring);
}
.fl-label.is-hidden span { scale: 0.86; }
.fl-label span[data-sub]::after {
    content: attr(data-sub);
    margin-left: 7px; font-weight: 400; color: var(--fl-dim);
}
.fl-label--left span {
    left: auto; right: -9px;
    padding: 4px 16px 4px 8px;
    transform-origin: calc(100% - 9px) 50%;
}
.fl-label--center span {
    top: auto; left: 0; bottom: 13px;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    padding: 4px 9px;
}
.fl-label--center i::before {
    content: ''; position: absolute; left: 2.5px; bottom: 6px;
    width: 1px; height: 8px;
    background: linear-gradient(to top, rgba(111, 214, 255, 0.9), rgba(111, 214, 255, 0));
}

/* --------------------------------------------------------------------------
   Overlay layer and entrance
   -------------------------------------------------------------------------- */
.fl-ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fl-ui a, .fl-ui button, .fl-ui input, .fl-panel, .fl-help { pointer-events: auto; }

/* The H1 and intro paint at once (they are the page's largest text, and
   hiding them until the 3D is ready held LCP hostage to WebGL); the rest of
   the card and the controls rise in when the bench is ready. */
/* :where() keeps this selector's specificity below the ready rule's; a bare
   :not(.fl-title):not(.fl-intro) out-ranked it and kept the stats and
   callout hidden for good. */
.fl-js .fl-card > :where(:not(.fl-title, .fl-intro)), .fl-js .fl-dock, .fl-js .fl-cta, .fl-js .fl-cue {
    opacity: 0; translate: 0 10px;
    transition: opacity 0.8s var(--fl-ease), translate 0.9s var(--fl-ease);
}
.fl-stage[data-ready='1'] :is(.fl-card > *, .fl-dock, .fl-cta, .fl-cue),
.fl-stage.fl-failed :is(.fl-card > *, .fl-cta),
.fl-stage.fl-slow :is(.fl-card > *, .fl-dock, .fl-cta, .fl-cue) { opacity: 1; translate: 0 0; }
.fl-js .fl-intro { transition-delay: 0.12s; }
.fl-js .fl-stats { transition-delay: 0.2s; }
.fl-js .fl-card > .fl-callout { transition-delay: 0.28s; }
.fl-js .fl-dock { transition-delay: 0.18s; }
.fl-js .fl-cta { transition-delay: 0.5s; }
.fl-js .fl-cue { transition-delay: 0.8s; }

/* --------------------------------------------------------------------------
   Title card (top left). No panel behind the title and intro, like the
   reference; the stat tiles and the callout get their own dark glass.
   -------------------------------------------------------------------------- */
.fl-card {
    position: absolute; left: var(--fl-gutter); top: 16px;
    width: 340px;
    pointer-events: none;
}
/* a soft vignette behind the card keeps the copy legible over bright glass */
.fl-ui::before {
    content: ''; position: absolute; left: 0; top: 0; width: 600px; height: 360px;
    background: radial-gradient(100% 100% at 0 0, rgba(4, 6, 9, 0.74) 0%, rgba(4, 6, 9, 0.42) 42%, rgba(4, 6, 9, 0) 100%);
    pointer-events: none;
}
.fl-title {
    margin: 0; font-family: var(--font-sans); font-weight: 900;
    text-transform: uppercase; line-height: 0.9;
}
.fl-title-a {
    display: block; font-size: 14px; letter-spacing: 0.005em; color: #f5f8fa;
    margin-bottom: 3px;
}
.fl-title-b {
    display: block; font-size: 30px; letter-spacing: -0.03em;
    color: var(--fl-cyan);
    text-shadow: 0 0 22px rgba(111, 214, 255, 0.38), 0 0 2px rgba(111, 214, 255, 0.4);
}
/* the title racks into focus as the bench comes up */
.fl-js .fl-title-b { filter: blur(7px); transition: filter 1.5s var(--fl-ease) 0.2s; }
.fl-stage:is([data-ready='1'], .fl-failed, .fl-slow) .fl-title-b { filter: blur(0); }

.fl-intro {
    margin: 9px 0 0; max-width: 340px;
    font-size: 12px; line-height: 1.5; color: var(--fl-soft);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75);
}

.fl-stats {
    display: flex; gap: 6px; margin: 10px 0 0;
}
.fl-stat {
    min-width: 78px;
    padding: 6px 10px 7px;
    background: var(--fl-glass-2);
    border: 1px solid var(--fl-line);
    border-radius: 8px;
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.fl-stat dt {
    font: 500 8.5px/1 var(--font-mono);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-dim);
}
.fl-stat dd {
    margin: 5px 0 0;
    font: 500 14px/1.1 var(--font-mono);
    color: #f3f6f8; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.fl-stat--focus dd { color: var(--fl-cyan); text-shadow: 0 0 12px rgba(111, 214, 255, 0.35); }
/* a tile glows while its value is still travelling */
.fl-stat.is-live {
    border-color: rgba(111, 214, 255, 0.42);
    box-shadow: inset 0 0 12px rgba(111, 214, 255, 0.1), 0 0 16px rgba(111, 214, 255, 0.14);
}

.fl-callout {
    position: relative; overflow: hidden;
    margin-top: 7px; padding: 8px 12px 9px;
    background: var(--fl-glass-2);
    border: 1px solid var(--fl-line);
    border-radius: 10px;
    font-size: 11.5px; line-height: 1.48; color: var(--fl-soft);
}
.fl-callout p { margin: 0; }
.fl-callout b { color: #fff; font-weight: 700; }
.fl-subj { color: var(--c, var(--fl-cyan)); font-weight: 600; }
.fl-disc { font-style: normal; font-weight: 700; color: var(--fl-amber); }
.fl-callout::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(111, 214, 255, 0.13), transparent);
    opacity: 0; pointer-events: none;
}
.fl-callout.is-flash::before { animation: fl-sweep 0.9s var(--fl-ease); }
.fl-callout.is-flash { animation: fl-edge 1.2s ease; }

/* --------------------------------------------------------------------------
   Control panel (top right): dark glass, two compact rows, like the
   reference: Focus, Distance and the guide buttons over Aperture, Lens and
   the view icons. About 430px wide, so it sits right of the third lightbox
   and above the ring lights at every desktop size (the room scales with the
   stage height, the panel does not).
   -------------------------------------------------------------------------- */
.fl-dock {
    position: absolute; top: 14px; right: var(--fl-gutter);
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    max-width: calc(100% - 380px);
}
.fl-panel {
    display: flex; flex-direction: column; gap: 8px;
    padding: 9px 10px 10px;
    background: var(--fl-glass);
    border: 1px solid var(--fl-line-2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fl-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.fl-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* a range input's intrinsic width (~130px) would set the panel's width: pin the basis */
.fl-row--dist { flex: 1 1 94px; width: 94px; min-width: 94px; }
/* phone-only pieces */
.fl-row--cta, .fl-call-short, .fl-call-more { display: none; }
.fl-row-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 0 3px; min-height: 10px;
}
.fl-row-label {
    font: 700 9px/1 var(--font-sans);
    letter-spacing: 0.14em; text-transform: uppercase; color: #a3afba;
}
.fl-hint {
    font: 400 9.5px/1 var(--font-mono);
    color: var(--fl-dim); letter-spacing: 0.02em; white-space: nowrap;
}
.fl-hint--val { color: var(--fl-ice); font-weight: 500; font-variant-numeric: tabular-nums; }
.fl-hint--view { color: var(--fl-soft); }
/* keyboard hints mean nothing on a touch screen (the view name still helps);
   the help sheet swaps its mouse rows (drag, scroll) for finger ones */
.fl-keys .fl-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
    .fl-hint:not(.fl-hint--val):not(.fl-hint--view), .fl-keys .fl-kb, .fl-keys .fl-fine { display: none; }
    .fl-keys .fl-touch { display: grid; }
}

/* On a touch screen the heading and the readings read as page text, so a
   swipe there scrolls the page like the text around it (and a pinch zooms the
   page); the canvas everywhere else keeps its one-finger orbit and pinch.
   Without this .fl-ui passes the touch straight through to the canvas, whose
   touch-action is none. A mouse still orbits across the card on desktop. */
@media (max-width: 759px), (hover: none) and (pointer: coarse) {
    .fl-card { pointer-events: auto; touch-action: pan-y pinch-zoom; }
}

/* segmented control with a sliding white pill */
.fl-seg {
    position: relative; display: flex; gap: 2px; padding: 3px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--fl-line);
    border-radius: 10px;
}
.fl-seg button {
    position: relative; z-index: 1; flex: 0 0 auto;
    appearance: none; -webkit-appearance: none; border: 0; background: transparent;
    padding: 7px 8px; border-radius: 7px;
    font: 600 11px/1 var(--font-sans); letter-spacing: 0.005em;
    color: #c9d2db; white-space: nowrap; cursor: pointer;
    transition: color 0.3s ease, background-color 0.2s ease;
}
.fl-seg button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.fl-seg button[aria-pressed='true'] { color: #0a0d11; background: transparent; }
.fl-seg--mono button { font-family: var(--font-mono); font-weight: 500; font-size: 11px; }
/* the view picker: icons on desktop (the row head names the view), words on phones */
.fl-seg--icons button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5.5px 7.5px; }
.fl-vi { display: block; width: 14px; height: 14px; flex: 0 0 auto; }
@media (min-width: 760px) {
    .fl-seg--icons .fl-vt, .fl-tour .fl-btn-txt {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    /* the guide buttons are two icons at the end of the first row, no heading */
    .fl-row--acts .fl-row-head { display: none; }
    .fl-row--acts .fl-acts { gap: 4px; }
    .fl-row--acts .fl-btn { width: 30px; height: 33px; padding: 0; }
    .fl-row--dist .fl-row-head { gap: 6px; }
}
.fl-seg-pill {
    position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0;
    border-radius: 7px;
    background: linear-gradient(180deg, #ffffff, #e2e8ee);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 16px rgba(198, 236, 255, 0.28);
    opacity: 0;
    transition: transform 0.45s var(--fl-spring), width 0.45s var(--fl-spring), opacity 0.25s ease;
}
.fl-seg.has-active .fl-seg-pill { opacity: 1; }
.fl-seg.no-anim .fl-seg-pill { transition: none; }
/* before ui.js has measured the pill, the pressed button paints itself */
.fl-seg:not(.is-ready) button[aria-pressed='true'] { background: #eef2f6; }

/* distance slider */
.fl-range { position: relative; height: 30px; display: flex; align-items: center; padding: 0 2px; }
.fl-range input {
    --f: 0.078;
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer;
}
.fl-range input::-webkit-slider-runnable-track {
    height: 4px; border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(111, 214, 255, 0.35) 0, var(--fl-cyan) calc(8px + (100% - 16px) * var(--f)),
        rgba(255, 255, 255, 0.12) calc(8px + (100% - 16px) * var(--f)), rgba(255, 255, 255, 0.12) 100%);
}
.fl-range input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.fl-range input::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, rgba(111, 214, 255, 0.35), var(--fl-cyan)); }
.fl-range input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffffff, #dfe7ee 70%);
    box-shadow: 0 0 0 4px rgba(111, 214, 255, 0.16), 0 0 14px rgba(111, 214, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s ease, transform 0.2s var(--fl-spring);
}
.fl-range input::-moz-range-thumb {
    width: 16px; height: 16px; border: 0; border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #ffffff, #dfe7ee 70%);
    box-shadow: 0 0 0 4px rgba(111, 214, 255, 0.16), 0 0 14px rgba(111, 214, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.fl-range input:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(111, 214, 255, 0.2), 0 0 18px rgba(111, 214, 255, 0.6), 0 2px 6px rgba(0, 0, 0, 0.5); }
.fl-range input:active::-webkit-slider-thumb { transform: scale(1.14); }
.fl-range input:focus { outline: none; }
.fl-range input:focus-visible { outline: 2px solid var(--fl-cyan); outline-offset: 3px; border-radius: 6px; }
/* where each subject sits on the distance scale, in its tint */
.fl-range-ticks { position: absolute; left: 10px; right: 10px; top: 50%; height: 0; pointer-events: none; }
.fl-range-ticks i {
    position: absolute; top: 6px; width: 4px; height: 4px; margin-left: -2px;
    border-radius: 50%; background: var(--c, #fff); opacity: 0.75;
    box-shadow: 0 0 6px var(--c, #fff);
    transition: transform 0.3s var(--fl-spring), opacity 0.3s;
}
.fl-range-ticks i.is-on { transform: scale(1.6); opacity: 1; }

/* buttons */
.fl-acts { display: flex; gap: 6px; }
.fl-btn {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 30px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--fl-line-2);
    background: rgba(255, 255, 255, 0.045);
    color: #e6ecf1; cursor: pointer;
    font: 600 11px/1 var(--font-sans);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.fl-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
.fl-btn svg { width: 12px; height: 12px; flex: 0 0 auto; }
.fl-btn--icon { width: 30px; padding: 0; font-size: 13px; font-weight: 800; }
.fl-btn--ghost { background: transparent; border-color: transparent; }
.fl-btn[aria-expanded='true'], .fl-tour[aria-pressed='true'] {
    color: #0a0d11; background: #eef3f7; border-color: transparent;
    box-shadow: 0 0 18px rgba(198, 236, 255, 0.3);
}
.fl-eq { display: none; align-items: flex-end; gap: 2px; height: 11px; }
.fl-eq i { width: 2.5px; height: 100%; border-radius: 1px; background: currentColor; transform-origin: 50% 100%; animation: fl-eq 0.95s ease-in-out infinite; }
.fl-eq i:nth-child(2) { animation-delay: -0.35s; }
.fl-eq i:nth-child(3) { animation-delay: -0.7s; }
.fl-tour[aria-pressed='true'] .fl-i-play { display: none; }
.fl-tour[aria-pressed='true'] .fl-eq { display: inline-flex; }

.fl-stage :is(button, a):focus { outline: none; }
.fl-stage :is(button, a):focus-visible { outline: 2px solid var(--fl-cyan); outline-offset: 2px; }

/* the phone sheet's handle and expander are desktop-invisible */
.fl-sheet-toggle, .fl-sheet-more { display: none; }

/* --------------------------------------------------------------------------
   Help sheet
   -------------------------------------------------------------------------- */
.fl-help {
    width: 356px; padding: 12px 14px 8px;
    background: var(--fl-glass);
    border: 1px solid var(--fl-line-2);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform-origin: 90% 0;
    animation: fl-pop 0.34s var(--fl-spring);
}
.fl-help[hidden] { display: none; }
.fl-help-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fl-help h2 {
    margin: 0; padding: 0; border: 0;
    font: 700 9.5px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: #a3afba;
}
.fl-keys { margin: 0; }
.fl-keys div {
    display: grid; grid-template-columns: 94px 1fr; gap: 10px; align-items: center;
    padding: 5px 0; border-top: 1px solid var(--fl-line);
}
.fl-keys dt { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-keys dd { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--fl-soft); }
.fl-help kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 21px; height: 21px; padding: 0 5px;
    font: 500 10.5px/1 var(--font-mono); color: #eaf1f6;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px;
    border-radius: 5px;
}
.fl-gesture { font: 500 10.5px/1.3 var(--font-mono); color: var(--fl-cyan); }

/* --------------------------------------------------------------------------
   Call to action (bottom right) and the scroll cue (bottom centre)
   -------------------------------------------------------------------------- */
.fl-cta {
    position: absolute; right: var(--fl-gutter); bottom: 18px;
    display: flex; align-items: center; gap: 10px;
    padding: 5px 5px 5px 14px;
    border-radius: 999px;
    background: rgba(9, 11, 15, 0.8);
    border: 1px solid rgba(255, 152, 0, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(255, 152, 0, 0.08);
    color: #d6dde4; font-size: 12.5px; font-weight: 500; line-height: 1;
    text-decoration: none;
}
.fl-cta:hover { color: #fff; border-color: rgba(255, 152, 0, 0.6); }
.fl-cta-dot {
    width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
    background: var(--fl-orange);
    box-shadow: 0 0 10px var(--fl-orange);
    animation: fl-breathe 2.4s ease-in-out infinite;
}
.fl-cta-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 13px; border-radius: 999px;
    color: #fff; font-weight: 700; font-size: 12.5px;
    background: #f67014 radial-gradient(circle farthest-corner at 50% 100%, #ffb347, #ff6a00 79%);
    border: 1px solid #ba530e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.fl-cta-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: fl-shine 5s ease-in-out 2s infinite;
}
.fl-cta-btn svg { width: 12px; height: 12px; transition: transform 0.25s var(--fl-spring); }
.fl-cta:hover .fl-cta-btn svg { transform: translateX(3px); }

.fl-cue {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px 7px 14px; border-radius: 999px;
    background: rgba(8, 10, 14, 0.72);
    border: 1px solid var(--fl-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(214, 224, 233, 0.72); text-decoration: none; white-space: nowrap;
}
.fl-cue:hover { color: #fff; border-color: var(--fl-line-2); }
.fl-cue svg { width: 13px; height: 13px; color: var(--fl-cyan); animation: fl-bob 1.9s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Loader (until stage.js reports ready) and the no-3D fallback
   -------------------------------------------------------------------------- */
.fl-loader {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
}
.fl-js:not([data-ready='1']):not(.fl-failed) .fl-loader { opacity: 1; }
.fl-loader-iris { position: relative; width: 58px; height: 58px; }
.fl-loader-iris i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; }
.fl-loader-iris i:nth-child(1) {
    border-top-color: var(--fl-cyan); border-right-color: rgba(111, 214, 255, 0.25);
    filter: drop-shadow(0 0 6px rgba(111, 214, 255, 0.7));
    animation: fl-spin 1.1s linear infinite;
}
.fl-loader-iris i:nth-child(2) {
    inset: 9px; border-bottom-color: #c08a36; border-left-color: rgba(192, 138, 54, 0.3);
    animation: fl-spin 1.7s linear infinite reverse;
}
.fl-loader-iris i:nth-child(3) {
    inset: 23px; background: var(--fl-cyan); border: 0;
    box-shadow: 0 0 14px 3px rgba(111, 214, 255, 0.6);
    animation: fl-breathe 1.4s ease-in-out infinite;
}
.fl-loader-txt {
    font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fl-dim);
}

.fl-fallback {
    position: absolute; inset: 0; z-index: 4;
    display: none; align-items: center; justify-content: center;
    padding: 180px 20px 40px;
    background: radial-gradient(60% 50% at 50% 55%, rgba(111, 214, 255, 0.08), transparent 70%);
}
.fl-failed .fl-fallback, .fl-fallback--on { display: flex; }
/* !important: three.js writes an inline display:block onto its canvas */
.fl-failed :is(.fl-canvas, .fl-labels, .fl-dock, .fl-cue) { display: none !important; }
.fl-fallback-card {
    max-width: 380px; padding: 26px 28px 24px; text-align: center;
    background: var(--fl-glass);
    border: 1px solid var(--fl-line-2);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.fl-fallback-card p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--fl-soft); }
.fl-fallback-card .fl-fallback-title { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: #fff; }
.fl-fallback-card a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px;
    font-size: 13px; font-weight: 600; color: #0a0d11; background: #eef3f7;
}
.fl-fallback-card a:hover { color: #0a0d11; background: #fff; }
.fl-fallback-iris {
    position: relative; display: block; width: 44px; height: 44px; margin: 0 auto 14px;
    border-radius: 50%; border: 1.5px solid rgba(111, 214, 255, 0.55);
    box-shadow: 0 0 18px rgba(111, 214, 255, 0.25), inset 0 0 12px rgba(111, 214, 255, 0.2);
}
.fl-fallback-iris i {
    position: absolute; inset: 12px; border-radius: 50%;
    background: radial-gradient(circle, var(--fl-cyan), rgba(111, 214, 255, 0.1) 70%);
    animation: fl-breathe 2.2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes fl-ping { 0% { transform: scale(0.4); opacity: 0.9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fl-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes fl-pop { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fl-sweep { 0% { opacity: 1; left: -40%; } 100% { opacity: 1; left: 110%; } }
@keyframes fl-edge { 0% { border-color: rgba(111, 214, 255, 0.5); } 100% { border-color: var(--fl-line); } }
@keyframes fl-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
@keyframes fl-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes fl-bob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } }
@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Desktop niceties: real glass where the GPU can afford it
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .fl-panel, .fl-help {
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        backdrop-filter: blur(14px) saturate(1.3);
        background: rgba(10, 13, 18, 0.62);
    }
}

/* short desktop windows: the intro gives way before the card reaches the bench */
@media (min-width: 760px) and (max-height: 820px) {
    .fl-intro { display: none; }
}

/* narrow desktops and tablets: the card slims, the panel wraps */
@media (min-width: 760px) and (max-width: 1180px) {
    .fl-card { width: 280px; }
    /* centred, the cue lands on the CTA below about 936px (iPad portrait) */
    .fl-cue { left: var(--fl-gutter); transform: none; }
    .fl-dock { max-width: calc(100% - 330px); }
    .fl-stat { min-width: 0; flex: 1 1 0; }
}

/* laptops: the room is drawn smaller against the width, so the panel tucks
   closer to the edge to clear the third lightbox */
@media (min-width: 1181px) and (max-width: 1400px) {
    .fl-dock { right: 14px; }
}

/* --------------------------------------------------------------------------
   Phones: a one-line title over one strip of readings up top; the callout
   (two lines, tap for the full sentence) just above a bottom sheet that opens
   from one row of focus presets. The site header already carries the orange
   call to action, so the stage's own moves into the open sheet. Nothing sits
   over the middle of the frame, where the portrait overview puts the lens.
   -------------------------------------------------------------------------- */
@media (max-width: 759px) {
    .fl-stage { --fl-gutter: 14px; min-height: 480px; }

    .fl-label { font-size: 9px; }
    .fl-label span { padding: 3px 7px 3px 14px; }
    .fl-label--left span { padding: 3px 14px 3px 7px; }
    .fl-label[data-id*='rearGroup'], .fl-label[data-id*='helicoid'], .fl-label[data-id*='frontGroup'] { display: none; }

    .fl-ui::before {
        width: 100%; height: 150px;
        background: linear-gradient(rgba(4, 6, 9, 0.7), rgba(4, 6, 9, 0.35) 55%, rgba(4, 6, 9, 0));
    }
    .fl-card { left: 14px; right: 14px; top: 12px; width: auto; }
    .fl-title { white-space: nowrap; font-size: 22px; line-height: 1; }
    .fl-title-a, .fl-title-b { display: inline-block; margin: 0; font-size: 22px; letter-spacing: -0.02em; }
    .fl-intro { display: none; }
    /* the three readings share one 40px strip */
    .fl-stats {
        margin-top: 8px; gap: 0; height: 40px; max-width: 440px;
        background: var(--fl-glass-2);
        border: 1px solid var(--fl-line); border-radius: 10px;
        overflow: hidden;
    }
    .fl-stat {
        flex: 1 1 0; min-width: 0; padding: 0 10px;
        display: flex; flex-direction: column; justify-content: center;
        background: none; border: 0; border-radius: 0;
    }
    .fl-stat + .fl-stat { border-left: 1px solid var(--fl-line); }
    .fl-stat dt { font-size: 7.5px; letter-spacing: 0.12em; }
    .fl-stat dd { font-size: 13px; margin-top: 4px; }
    .fl-stat.is-live { border-color: var(--fl-line); box-shadow: inset 0 -2px 0 rgba(111, 214, 255, 0.65); }

    .fl-dock {
        top: auto; left: 0; right: 0; bottom: 0; max-width: none;
        align-items: stretch; gap: 8px;
    }
    .fl-dock > .fl-callout {
        margin: 0 12px; padding: 8px 34px 8px 12px;
        font-size: 13px; line-height: 1.42;
        background: rgba(9, 12, 16, 0.84);
    }
    /* (scoped to the dock: ui.js moves the callout there, so without it the
       full sentence stays in the card and no dead chevron shows) */
    .fl-dock > .fl-callout [data-fl-callout] { display: none; }
    .fl-dock > .fl-callout.is-expanded [data-fl-callout] { display: block; }
    .fl-dock .fl-call-short {
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    }
    .fl-dock > .fl-callout.is-expanded .fl-call-short { display: none; }
    /* the whole callout is the tap target; the chevron says so */
    .fl-dock .fl-call-more {
        display: block; position: absolute; inset: 0; z-index: 1;
        width: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit;
        background: none; color: var(--fl-dim); cursor: pointer;
    }
    .fl-call-more svg {
        position: absolute; right: 10px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px;
        transition: transform 0.35s var(--fl-spring);
    }
    .fl-callout.is-expanded .fl-call-more svg { transform: rotate(180deg); }
    .fl-stage .fl-call-more:focus-visible { outline-offset: -2px; }

    .fl-panel {
        position: relative;
        gap: 0; padding: 0 12px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0; border-bottom: 0;
        background: rgba(10, 13, 18, 0.9);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    /* open, the sheet sits over the bright bracket strip: near-opaque glass */
    .fl-panel.is-open {
        background: rgba(10, 12, 16, 0.94);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
        backdrop-filter: blur(16px) saturate(1.2);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .fl-sheet-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 20px; margin: 0; padding: 0;
        background: none; border: 0; cursor: pointer;
    }
    .fl-sheet-bar { width: 38px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.24); }
    .fl-line { display: contents; }
    .fl-row { margin-top: 10px; }
    .fl-row--focus {
        display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 5px; margin-top: 0;
    }
    .fl-row--focus .fl-row-head { grid-column: 1 / -1; display: none; }
    .fl-row--focus .fl-seg { grid-column: 1; }
    .fl-seg button { flex: 1 1 0; padding: 10px 6px; font-size: 12px; }
    .fl-seg--mono button { font-size: 12px; }
    .fl-sheet-more {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; align-self: center;
        border-radius: 10px; border: 1px solid var(--fl-line-2);
        background: rgba(255, 255, 255, 0.05); color: #e6ecf1; cursor: pointer;
    }
    .fl-sheet-more svg { width: 16px; height: 16px; transition: transform 0.35s var(--fl-spring); }
    .fl-panel.is-open .fl-sheet-more svg { transform: rotate(180deg); }
    .fl-panel.is-open .fl-row--focus .fl-row-head { display: flex; }

    .fl-panel:not(.is-open) .fl-x { display: none; }
    .fl-panel.is-open .fl-x { animation: fl-rise 0.35s var(--fl-ease) both; }
    .fl-panel.is-open .fl-row--ap { animation-delay: 0.04s; }
    .fl-panel.is-open .fl-row--lens { animation-delay: 0.08s; }
    .fl-panel.is-open .fl-row--view { animation-delay: 0.12s; }
    .fl-panel.is-open .fl-row--acts { animation-delay: 0.16s; }
    .fl-panel.is-open .fl-row--cta { animation-delay: 0.2s; }
    .fl-panel.is-open { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; }
    .fl-panel.is-open > .fl-sheet-toggle,
    .fl-panel.is-open .fl-row--focus,
    .fl-panel.is-open .fl-row--dist,
    .fl-panel.is-open .fl-row--view { grid-column: 1 / -1; }
    /* the desktop rows are grouped differently: the sheet reads top to bottom */
    .fl-row--focus { order: 1; }
    .fl-row--dist { order: 2; width: auto; min-width: 0; }
    .fl-row--ap { order: 3; }
    .fl-row--lens { order: 4; }
    .fl-row--view { order: 5; }
    .fl-row--acts { order: 6; }
    .fl-row--cta { order: 7; display: flex; }
    .fl-row--acts .fl-acts { justify-content: flex-start; }
    .fl-btn { height: 38px; }
    .fl-btn--icon { width: 38px; }
    .fl-range, .fl-range input { height: 36px; }
    /* words on the sheet: the view keeps its icons, the lens has no room for them */
    .fl-hint--view { display: none; }
    .fl-seg--icons button { padding: 10px 4px; gap: 5px; }
    .fl-row--lens .fl-vi { display: none; }
    .fl-row--view .fl-vi { width: 13px; height: 13px; opacity: 0.8; }
    .fl-sheet-cta {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        height: 38px; padding: 0 12px; border-radius: 10px;
        font: 700 12.5px/1 var(--font-sans); color: #fff; text-decoration: none; white-space: nowrap;
        background: #f67014 radial-gradient(circle farthest-corner at 50% 100%, #ffb347, #ff6a00 79%);
        border: 1px solid #ba530e;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        box-shadow: 0 0 18px rgba(255, 152, 0, 0.16);
    }
    .fl-sheet-cta:hover, .fl-sheet-cta:active { color: #fff; }
    .fl-sheet-cta svg { width: 13px; height: 13px; }
    .fl-dock:has(.fl-panel.is-open) > .fl-callout,
    .fl-dock:has(.fl-help:not([hidden])) > .fl-callout { display: none; }

    /* on a phone the help sheet takes the control sheet's place */
    .fl-dock:has(.fl-help:not([hidden])) .fl-panel { display: none; }
    .fl-help {
        width: auto; margin: 0; padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0; border-bottom: 0;
        background: rgba(10, 13, 18, 0.95);
        transform-origin: 50% 100%;
        animation-name: fl-rise;
    }
    .fl-keys div { grid-template-columns: 110px 1fr; padding: 9px 0; }
    .fl-keys dd { font-size: 12.5px; }

    .fl-cta, .fl-cue { display: none; }

    .fl-fallback { padding-top: 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .fl-stage *, .fl-stage *::before, .fl-stage *::after {
        animation-duration: 0.001s !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important; transition-delay: 0s !important;
    }
}

/* The site's Max promo card would sit on the console and the sensor. The
   stage carries its own call to action, so it stays out of this page. */
.fl-noui .fl-ui, .fl-noui .fl-loader { display: none; }

/* big screens: the overlays grow a little with the bench */
@media (min-width: 1680px) and (min-height: 940px) {
    .fl-card, .fl-dock, .fl-cta, .fl-cue { zoom: 1.14; }
    .fl-ui::before { width: 700px; height: 420px; }
}