/*
 * Homepage motion: animated product scenes, the 4.2 tour and scroll reveals.
 * Markup lives in index.html, behaviour in motion.js.
 *
 * The scenes are web ports of the app's in-app tours (iOS repo,
 * BarkRecognizerApp/Views/Onboarding/*GuideView.swift): same beats, timings
 * and mock data. motion.js only advances a beat counter on each scene root;
 * this file draws what every beat looks like:
 *
 *   [data-beat="3"]    exactly beat 3
 *   [data-past~="3"]   beat 3 or any later beat of the current loop
 *
 * Phone screens are drawn at iPhone size (390 x 844 pt) and scaled to the
 * frame by motion.js (--k), so every length inside .ph-ui is an app point.
 */

:root {
    --m-out: cubic-bezier(0.16, 1, 0.3, 1);
    --m-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
    --m-inout: cubic-bezier(0.65, 0, 0.35, 1);
    --app-orange: #E66B33;
    --app-green: #30D158;
    --app-red: #FF453A;
    --app-yellow: #FFD60A;
    --app-card: #1C1C1E;
    --app-sub: rgba(235, 235, 245, 0.6);
    --app-line: rgba(84, 84, 88, 0.5);
}

/* ---------- Scroll reveals (only once motion.js has added .js-motion) ---------- */

.js-motion [data-reveal]:not(.is-in),
.js-motion [data-reveal-group]:not(.is-in) > * {
    opacity: 0;
}
.js-motion [data-reveal].is-in,
.js-motion [data-reveal-group].is-in > * {
    animation: m-rise 0.8s var(--m-out) both;
    animation-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-reveal].is-static,
.js-motion [data-reveal-group].is-static > * {
    animation: none;
}
@keyframes m-rise {
    from { opacity: 0; translate: 0 18px; }
    to { opacity: 1; translate: 0 0; }
}

/* Infinite CSS loops run only while their block is on screen. */
.js-motion [data-play]:not(.is-playing) * {
    animation-play-state: paused !important;
}

/* ---------- Phone frame (same proportions as the App Store renders) ---------- */

.ph {
    --w: 300px;
    position: relative;
    flex: none;
    width: var(--w);
    padding: calc(var(--w) * 0.028);
    border-radius: calc(var(--w) * 0.152);
    background: #0b0b0b;
    box-shadow:
        0 0 0 calc(var(--w) * 0.0035) #3a3a3a,
        0 0 0 calc(var(--w) * 0.0065) #101010,
        0 40px 80px -24px rgba(0, 0, 0, 0.85),
        0 0 90px -30px rgba(240, 58, 0, 0.35);
}
.ph-screen {
    position: relative;
    aspect-ratio: 390 / 844;
    border-radius: calc(var(--w) * 0.125);
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.ph-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 390px;
    height: 844px;
    overflow: hidden;
    transform: scale(var(--k, 0.726));
    transform-origin: 0 0;
    background: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}
.ph-island {
    position: absolute;
    z-index: 9;
    top: 11px;
    left: 133px;
    width: 124px;
    height: 36px;
    border-radius: 20px;
    background: #000;
}
.ph-status {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 30px 0 52px;
    font-size: 17px;
    font-weight: 600;
}
.ph-status span:last-child {
    display: flex;
    gap: 6px;
    font-size: 14px;
}
.ph-tabs {
    position: absolute;
    z-index: 8;
    left: 16px;
    right: 16px;
    bottom: 24px;
    height: 64px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 0 6px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(28, 28, 30, 0.94);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.ph-tabs span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 52px;
    border-radius: 26px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}
.ph-tabs i {
    font-size: 18px;
}
.ph-tabs .is-on {
    background: rgba(255, 255, 255, 0.1);
    color: var(--app-orange);
}
/* A fingertip with a tap ring, shared by the tours. */
.ph-finger {
    position: absolute;
    z-index: 7;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.22), 0 6px 18px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: scale(1.3);
    transition: opacity 0.3s, transform 0.3s var(--m-out), left 0.6s var(--m-inout), top 0.6s var(--m-inout);
    pointer-events: none;
}

/* ---------- Hero: one string on the Carbon Pro shot timer ---------- */

.run {
    position: relative;
    padding: 0 36px;
}
.run .ph { --w: 240px; }
@media (min-width: 640px) { .run .ph { --w: 270px; } }
@media (min-width: 1024px) { .run .ph { --w: 300px; } }

.run-ui {
    background: #0E0F10;
}
.run-flash {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 50% 24%, rgba(255, 107, 26, 0.6), rgba(255, 107, 26, 0) 62%);
    opacity: 0;
    pointer-events: none;
}
.run[data-beat="2"] .run-flash {
    animation: run-flash 0.8s ease-out both;
}
@keyframes run-flash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
.run-nav {
    position: absolute;
    z-index: 2;
    top: 60px;
    left: 18px;
    right: 18px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
}
.run-nav > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #2C2C2E;
    font-size: 14px;
    color: #C7C7CC;
}
.run-nav > i {
    color: #FF6B1A;
    font-size: 19px;
}
.run-clock {
    position: absolute;
    z-index: 2;
    top: 150px;
    left: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}
.run-clock b {
    font-size: 94px;
    font-weight: 500;
    letter-spacing: -2px;
}
.run-clock small {
    font-size: 60px;
    font-weight: 500;
    color: #636366;
}
.run-ctl {
    position: absolute;
    z-index: 2;
    top: 300px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.run-btn {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 500;
    box-shadow: inset 0 0 0 2px #0E0F10, 0 0 0 2px currentColor;
    transition: background 0.25s, color 0.25s;
}
.run-btn:first-child {
    background: #2C2C2E;
    color: #8E8E93;
}
.run-btn:last-child {
    background: #FF6B1A;
    color: #fff;
}
.run-btn:last-child::after { content: 'Start'; }
.run.is-live .run-btn:last-child {
    background: #3B1513;
    color: var(--app-red);
}
.run.is-live .run-btn:last-child::after { content: 'Stop'; }
.run-dots {
    display: flex;
    gap: 7px;
}
.run-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48484A;
}
.run-dots i:first-child { background: #fff; }
.run-list {
    position: absolute;
    z-index: 2;
    top: 404px;
    left: 18px;
    right: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: opacity 0.4s;
}
.run[data-beat="4"] .run-list { opacity: 0; }
.run-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 54px;
    overflow: hidden;
    box-shadow: inset 0 -1px var(--app-line);
    font-size: 17px;
    font-weight: 600;
    animation: run-row 0.5s var(--m-out) both;
}
.run-list span {
    text-align: right;
    line-height: 1.15;
}
.run-list small {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
}
.run-list .is-best { color: var(--app-green); }
.run-list .is-worst { color: var(--app-red); }
@keyframes run-row {
    from { height: 0; opacity: 0; background: rgba(255, 107, 26, 0.35); }
    60% { opacity: 1; }
    to { height: 54px; opacity: 1; background: rgba(255, 107, 26, 0); }
}

/* Floating chips around the phone */
.run-chip {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(18, 18, 18, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
/* Both chips hang off the phone's left edge, over the nav row and the tab
   bar, so they never cover the clock or the shot times. */
.run-mic {
    top: 8.5%;
    right: calc(100% - 72px);
}
.run-mic > i {
    color: #FF6B1A;
}
.run-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 22px;
}
.run-bars i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: #FF6B1A;
    transform: scaleY(var(--l, 0.15));
}
.run-result {
    right: calc(100% - 96px);
    bottom: 3.5%;
    gap: 14px;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.35s, transform 0.5s var(--m-spring);
}
.run[data-beat="3"] .run-result {
    opacity: 1;
    transform: none;
}
.run-result small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #A1A1A6;
}
.run-result b {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.run-result b.is-best { color: var(--app-green); }
.run-result hr {
    width: 1px;
    height: 30px;
    margin: 0;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
}
/* Phones: no room beside the frame. The result chip sits over the tab bar;
   the meter chip would cover the title, so it stays hidden. */
@media (max-width: 1023px) {
    .run { padding: 0; }
    .run-mic { display: none; }
    .run-result {
        right: auto;
        left: 50%;
        bottom: 2.5%;
        translate: -50% 0;
        padding: 8px 12px;
    }
}

/* ---------- The 4.2 tour: tabs on one side, the playing scene on the other ---------- */

/* Phones: header, playing scene, tabs. Desktop: header and tabs on the left,
   the scene beside them, so the whole tour fits one screen. */
.tour {
    display: grid;
    grid-template-areas: "head" "stage" "tabs";
    gap: 32px;
}
@media (min-width: 1024px) {
    .tour {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "head stage" "tabs stage";
        column-gap: 56px;
        row-gap: 36px;
    }
}
.tour-head { grid-area: head; }
.tour-side { grid-area: tabs; }
.tour-stage { grid-area: stage; }
.tour-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tour-tab {
    position: relative;
    display: block;
    width: 100%;
    padding: 16px 18px 16px 24px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    color: #888;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.tour-tab:hover {
    color: #fff;
}
.tour-tab:focus-visible {
    outline: 2px solid #F03A00;
    outline-offset: 2px;
}
.tour-tab[aria-selected="true"] {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}
/* Progress rail: fills while the tab's scene plays, like the app's tour dots. */
.tour-tab::before,
.tour-tab::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}
.tour-tab::after {
    background: #F03A00;
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
}
.tour-tab[aria-selected="false"]::after {
    transform: scaleY(0);
}
.tour-tab-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
}
.tour-tab-head i {
    width: 18px;
    text-align: center;
    color: #F03A00;
}
.tour-tab-head em {
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid rgba(240, 58, 0, 0.4);
    background: rgba(240, 58, 0, 0.12);
    color: #FF8A5C;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tour-tab-body {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s var(--m-out), opacity 0.3s;
}
.tour-tab-body > span {
    overflow: hidden;
    padding-left: 28px;
    color: #A1A1A6;
    font-size: 15px;
    line-height: 1.55;
}
.tour-tab[aria-selected="true"] .tour-tab-body {
    grid-template-rows: 1fr;
    opacity: 1;
}
.tour-tab[aria-selected="true"] .tour-tab-body > span {
    padding-top: 8px;
}
.tour-stage {
    position: relative;
    height: 560px;
}
@media (min-width: 640px) {
    .tour-stage { height: 620px; }
}
@media (min-width: 1024px) {
    .tour-stage { height: 680px; }
}
.tour-stage::before {
    content: '';
    position: absolute;
    inset: 12% 18%;
    border-radius: 50%;
    background: rgba(240, 58, 0, 0.16);
    filter: blur(80px);
}
.tour-panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.97);
    transition: opacity 0.45s var(--m-out), transform 0.7s var(--m-out), visibility 0s 0.45s;
}
.tour-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.45s var(--m-out), transform 0.7s var(--m-out), visibility 0s;
}
.tour-panel .ph { --w: 250px; }
@media (min-width: 640px) { .tour-panel .ph { --w: 278px; } }
@media (min-width: 1024px) { .tour-panel .ph { --w: 308px; } }

/* ---------- 4.2 Home (port of HomeRedesignGuideView) ---------- */

.home-body {
    position: absolute;
    top: 58px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.home-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    background: var(--app-card);
    color: #8E8E93;
    font-size: 15px;
}
.home-hello {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.home-hello small {
    display: block;
    margin-bottom: 2px;
    color: var(--app-orange);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.home-hello b {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
.home-streak,
.coach-streak span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 99px;
    background: rgba(230, 107, 51, 0.16);
    color: var(--app-orange);
    font: 700 13px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-streak::before,
.coach-streak span::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}
.home-label {
    margin-bottom: -4px;
    font-size: 16px;
    font-weight: 600;
}
.home-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.home-card {
    padding: 8px;
    border-radius: 14px;
    background: var(--app-card);
    font-size: 13px;
}
.home-card b {
    display: block;
    margin-top: 8px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-card small {
    color: #8E8E93;
    font-size: 11.5px;
}
.home-thumb {
    position: relative;
    display: grid;
    place-items: center;
    height: 74px;
    overflow: hidden;
    border-radius: 9px;
    background: linear-gradient(160deg, #3a3a3c, #1c1c1e);
}
.home-thumb.is-stage {
    background: linear-gradient(180deg, #f2f2f0 0%, #d9d6cf 100%);
}
.home-thumb svg {
    width: 100%;
    height: 100%;
}
.home-thumb > i {
    color: var(--app-orange);
    font-size: 26px;
}
.home-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.home-coach {
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(230, 107, 51, 0.35);
    background: linear-gradient(160deg, rgba(230, 107, 51, 0.16), rgba(28, 28, 30, 0.9) 55%);
}
.home-coach small {
    display: block;
    color: #A1A1A6;
    font-size: 12px;
}
.home-coach small i,
.coach-head i {
    color: var(--app-orange);
}
.home-coach b {
    display: block;
    margin: 6px 0 4px;
    font-size: 17px;
    line-height: 1.25;
}
.home-coach p {
    margin: 0 0 10px;
    color: #A1A1A6;
    font-size: 13px;
    line-height: 1.35;
}
.home-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 99px;
    background: var(--app-orange);
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.15s, filter 0.15s;
}
.home-stats {
    padding: 12px 14px 10px;
    border-radius: 16px;
    background: var(--app-card);
}
.home-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 12px;
    padding: 2px;
    border-radius: 9px;
    background: #2C2C2E;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}
.home-seg span {
    padding: 5px 0;
    border-radius: 7px;
    color: #A1A1A6;
}
.home-seg .is-on {
    background: #636366;
    color: #fff;
}
.home-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.home-kpis small {
    display: block;
    color: #8E8E93;
    font: 700 9.5px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}
.home-kpis b {
    display: block;
    margin: 2px 0 1px;
    font: 700 22px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-kpis em {
    color: var(--app-green);
    font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
}
.home-chart {
    display: block;
    width: 100%;
    height: 54px;
    margin-top: 8px;
    overflow: visible;
}
.home-chart path {
    fill: none;
    stroke: var(--app-orange);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.3s var(--m-out);
}
.home-chart line {
    stroke: rgba(255, 255, 255, 0.07);
}

/* Beats: 0 skeleton · 1 greeting · 2 pick-up cards · 3 coach · 4 numbers + chart · 5 tap · 6 fade */
.home .home-hello,
.home .home-label,
.home .home-card,
.home .home-coach,
.home .home-kpis em {
    opacity: 0.12;
    transition: opacity 0.5s var(--m-out), transform 0.6s var(--m-spring);
}
.home .home-card { transform: scale(0.7); }
.home .home-card + .home-card { transition-delay: 0.08s; }
.home .home-coach {
    opacity: 0;
    transform: translateX(-110%);
}
.home[data-past~="1"] .home-hello,
.home[data-past~="1"] .home-label { opacity: 1; }
.home[data-past~="2"] .home-card { opacity: 1; transform: none; }
.home[data-past~="3"] .home-coach { opacity: 1; transform: none; }
.home[data-past~="4"] .home-kpis em { opacity: 1; }
.home[data-past~="4"] .home-chart path { stroke-dashoffset: 0; }
.home[data-beat="5"] .ph-finger {
    left: 132px;
    top: 498px;
    opacity: 1;
    transform: none;
    animation: m-tap 2.6s ease-in-out both;
}
.home[data-beat="5"] .home-go {
    animation: m-press 2.6s ease-in-out both;
}
.home[data-beat="6"] .home-body > * {
    opacity: 0.12;
    transition: opacity 0.4s;
}
@keyframes m-tap {
    0%, 30% { transform: scale(1.3); opacity: 0; }
    40% { transform: none; opacity: 1; }
    52% { transform: scale(0.82); }
    64%, 85% { transform: none; opacity: 1; }
    100% { opacity: 0; }
}
@keyframes m-press {
    0%, 46% { transform: none; filter: none; }
    52% { transform: scale(0.94); filter: brightness(1.25); }
    64%, 100% { transform: none; filter: none; }
}

/* ---------- Coach (port of CoachProgressGuideView, plus the "Why this?" evidence) ---------- */

.coach-body {
    position: absolute;
    top: 58px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.coach-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    font-size: 17px;
}
.coach-nav i {
    color: var(--app-orange);
    font-size: 20px;
}
.coach-nav span {
    width: 20px;
}
.coach-card {
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(230, 107, 51, 0.35);
    background: linear-gradient(160deg, rgba(230, 107, 51, 0.16), rgba(28, 28, 30, 0.92) 60%);
}
.coach-head {
    display: flex;
    justify-content: space-between;
    color: var(--app-orange);
    font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}
.coach-head em {
    color: #A1A1A6;
    font: 600 12px -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-style: normal;
}
.coach-typed {
    min-height: 104px;
    margin: 12px 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}
.coach[data-beat="1"] .coach-typed::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 20px;
    margin-left: 2px;
    vertical-align: -3px;
    background: var(--app-orange);
    animation: m-blink 0.8s steps(2) infinite;
}
@keyframes m-blink {
    50% { opacity: 0; }
}
.coach-actions {
    display: flex;
    gap: 8px;
}
.coach-actions span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 14px;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s, transform 0.5s var(--m-spring), background 0.2s;
}
.coach-actions span:first-child {
    background: var(--app-orange);
}
.coach-actions span + span {
    transition-delay: 0.08s;
}
.coach-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
}
.coach-row > div {
    padding: 14px 12px;
    border-radius: 16px;
    background: var(--app-card);
}
.coach-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.coach-streak span {
    padding: 0;
    background: none;
    font-size: 22px;
}
.coach-row small {
    color: #8E8E93;
    font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
}
.coach-trend > div:first-child {
    display: flex;
    justify-content: space-between;
}
.coach-pb {
    color: var(--app-yellow);
    font: 700 10px ui-monospace, SFMono-Regular, Menlo, monospace;
    font-style: normal;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s, transform 0.4s var(--m-spring);
}
.coach-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 64px;
    margin-top: 10px;
}
.coach-bars i {
    flex: 1;
    height: calc(var(--v) * 100%);
    border-radius: 3px;
    background: var(--app-orange);
    transform: scaleY(0.04);
    transform-origin: bottom;
    transition: transform 0.6s var(--m-spring), background 0.3s;
    transition-delay: calc(var(--i) * 60ms);
}
.coach-sheet {
    position: absolute;
    z-index: 6;
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 20px 18px 104px;
    border-radius: 28px;
    background: rgba(44, 44, 46, 0.97);
    box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.55);
    transform: translateY(105%);
    transition: transform 0.6s var(--m-out);
}
.coach-sheet b {
    font-size: 19px;
}
.coach-sheet p {
    margin: 8px 0 12px;
    color: #C7C7CC;
    font-size: 14px;
    line-height: 1.4;
}
.coach-sheet dl {
    margin: 0;
}
.coach-sheet dl div {
    display: flex;
    justify-content: space-between;
    padding: 9px 0;
    border-top: 1px solid var(--app-line);
    font-size: 13px;
}
.coach-sheet dt {
    color: #A1A1A6;
}
.coach-sheet dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}
.coach-sheet dd small {
    display: block;
    color: #8E8E93;
    font-size: 11px;
    font-weight: 500;
}

/* Beats: 0 reset · 1 typing · 2 actions · 3 bars + streak · 4 PB · 5 why this? · 6 fade */
.coach[data-past~="2"] .coach-actions span { opacity: 1; transform: none; }
.coach[data-past~="3"] .coach-bars i { transform: none; }
.coach[data-past~="4"] .coach-bars i:last-child { background: var(--app-yellow); }
.coach[data-past~="4"] .coach-pb { opacity: 1; transform: none; }
.coach[data-beat="5"] .ph-finger {
    left: 199px;
    top: 290px;
    animation: m-tap 1.4s ease-in-out both;
}
.coach[data-beat="5"] .coach-actions span:nth-child(2) {
    background: rgba(255, 255, 255, 0.24);
}
.coach[data-beat="5"] .coach-sheet {
    transform: none;
    transition-delay: 0.65s;
}
.coach[data-beat="6"] .coach-body {
    opacity: 0.15;
    transition: opacity 0.4s;
}

/* ---------- AR builder (port of ARBuilderGuideView) ---------- */

.ar-room {
    position: absolute;
    inset: -20px;
    background:
        radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, #8d8780 0%, #6e6964 36%, #5d5955 39%, #6b6762 39.4%, #4f4c49 62%, #3a3836 100%);
    transition: transform 1.2s var(--m-inout);
}
/* A doorway and a baseboard so the backdrop reads as a real room. */
.ar-room::before {
    content: '';
    position: absolute;
    left: 66%;
    top: 14%;
    width: 15%;
    height: 25.6%;
    border: 4px solid #5a554f;
    border-bottom: 0;
    background: linear-gradient(180deg, #3c3936, #2f2d2b);
}
.ar-room::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 39%;
    height: 8px;
    background: #4a4743;
}
.ar-stage {
    position: absolute;
    inset: 0;
    width: 390px;
    height: 844px;
    overflow: visible;
    transition: transform 1.2s var(--m-inout);
}
.ar-placed {
    transform-box: view-box;
    transform-origin: 195px 520px;
    transition: transform 0.7s var(--m-spring);
}
.ar-mat {
    fill: rgba(209, 191, 166, 0.22);
    stroke: rgba(255, 255, 255, 0.5);
    stroke-width: 1.5;
}
.ar-grid {
    fill: none;
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 1;
}
.ar-mat,
.ar-grid {
    opacity: 0;
    transition: opacity 0.5s;
}
.ar-wallp {
    fill: #b8946a;
    stroke: #8a6a45;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(0.02);
    opacity: 0;
}
.ar-target {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.55s var(--m-spring), opacity 0.3s;
}
.ar-glow {
    fill: none;
    stroke: #C6FF00;
    stroke-width: 3;
    filter: drop-shadow(0 0 6px #C6FF00);
    opacity: 0;
    transition: opacity 0.3s;
}
.ar-frame {
    position: absolute;
    z-index: 6;
    inset: 0;
    border: 5px solid rgba(230, 107, 51, 0.85);
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}
.ar-back {
    position: absolute;
    z-index: 7;
    top: 62px;
    left: 18px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-size: 16px;
}
.ar-edit {
    position: absolute;
    z-index: 7;
    top: 68px;
    left: 50%;
    padding: 6px 13px;
    border-radius: 99px;
    background: var(--app-orange);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translate(-50%, -8px);
    transition: opacity 0.3s, transform 0.4s var(--m-spring);
}
.ar-hint {
    position: absolute;
    z-index: 7;
    left: 0;
    right: 0;
    top: 568px;
    display: grid;
    justify-items: center;
}
.ar-hint span {
    grid-area: 1 / 1;
    padding: 9px 15px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.4s var(--m-out);
}
.ar-tools {
    position: absolute;
    z-index: 7;
    left: 14px;
    right: 14px;
    top: 620px;
    padding: 12px;
    border-radius: 22px;
    background: rgba(30, 30, 32, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.ar-tools > b {
    display: block;
    margin: 0 0 10px 2px;
    font-size: 14px;
}
.ar-tools > div {
    display: flex;
    gap: 6px;
}
.ar-tools > div span {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 0 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 9.5px;
    font-weight: 600;
    color: #C7C7CC;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.ar-tools > div i {
    font-size: 15px;
}
.ar-tools > div span.is-on {
    background: rgba(230, 107, 51, 0.2);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--app-orange);
}

/* Beats: 0 floor · 1 placed · 2 target · 3 wall · 4 select · 5 fit · 6 walk · 7 fade */
.ar[data-past~="1"] .ar-mat,
.ar[data-past~="1"] .ar-grid { opacity: 1; }
.ar[data-past~="2"] .ar-target { transform: none; opacity: 1; }
.ar[data-past~="2"] .ar-frame,
.ar[data-past~="2"] .ar-edit { opacity: 1; }
.ar[data-past~="2"] .ar-edit { transform: translate(-50%, 0); }
.ar[data-past~="3"] .ar-wallp { opacity: 1; transform: none; }
.ar[data-beat="3"] .ar-wallp { animation: ar-wall 1.1s var(--m-inout) both; }
.ar[data-beat="4"] .ar-glow { opacity: 1; }
.ar[data-past~="5"] .ar-placed { transform: scale(0.55); }
.ar[data-beat="6"] .ar-stage { transform: translateX(-26px); }
.ar[data-beat="6"] .ar-room { transform: translateX(-10px); }
.ar[data-beat="7"] .ar-placed { opacity: 0; transition: opacity 0.4s; }
.ar[data-beat="7"] .ar-frame,
.ar[data-beat="7"] .ar-edit { opacity: 0; }
@keyframes ar-wall {
    from { transform: scaleX(0.02); }
    to { transform: none; }
}
.ar[data-beat="0"] .ar-hint span:nth-child(1),
.ar[data-beat="1"] .ar-hint span:nth-child(2),
.ar[data-beat="2"] .ar-hint span:nth-child(3),
.ar[data-beat="3"] .ar-hint span:nth-child(4),
.ar[data-beat="4"] .ar-hint span:nth-child(5),
.ar[data-beat="5"] .ar-hint span:nth-child(6),
.ar[data-beat="6"] .ar-hint span:nth-child(7),
.ar[data-beat="7"] .ar-hint span:nth-child(7) {
    opacity: 1;
    transform: none;
}
.ar[data-beat="2"] [data-tool="paper"],
.ar[data-beat="3"] [data-tool="wall"],
.ar[data-beat="4"] [data-tool="paper"],
.ar[data-beat="5"] [data-tool="fit"] {
    background: rgba(230, 107, 51, 0.2);
    color: #fff;
    box-shadow: inset 0 0 0 1.5px var(--app-orange);
}
.ar-tools > b span { display: none; }
.ar[data-beat="0"] .ar-tools > b span:nth-child(1),
.ar[data-beat="1"] .ar-tools > b span:nth-child(1),
.ar[data-beat="2"] .ar-tools > b span:nth-child(2),
.ar[data-beat="3"] .ar-tools > b span:nth-child(3),
.ar[data-beat="4"] .ar-tools > b span:nth-child(2),
.ar[data-beat="5"] .ar-tools > b span:nth-child(4),
.ar[data-beat="6"] .ar-tools > b span:nth-child(4),
.ar[data-beat="7"] .ar-tools > b span:nth-child(1) {
    display: inline;
}
/* Finger choreography, as in the app: tap to place, tap a target, drag a wall, tap to select. */
.ar[data-beat="1"] .ph-finger { left: 195px; top: 500px; opacity: 1; transform: none; }
.ar[data-beat="2"] .ph-finger { left: 262px; top: 486px; opacity: 1; transform: none; }
.ar[data-beat="3"] .ph-finger { opacity: 1; transform: none; animation: ar-drag 1.1s var(--m-inout) both; }
.ar[data-beat="4"] .ph-finger { left: 262px; top: 470px; opacity: 1; transform: none; }
@keyframes ar-drag {
    from { left: 92px; top: 452px; }
    to { left: 212px; top: 452px; }
}

/* ---------- Web: synced stages on blastbuddy.io (port of CloudWebGuideView) ---------- */

.web {
    position: relative;
    width: min(100%, 640px);
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #111;
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(240, 58, 0, 0.35);
}
.web-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 36px;
    padding: 0 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: #1b1b1d;
}
.web-bar > span:first-child {
    display: flex;
    gap: 6px;
}
.web-bar > span:first-child i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3a3a3c;
}
.web-url {
    flex: 1;
    max-width: 300px;
    margin: 0 auto;
    padding: 4px 12px;
    border-radius: 8px;
    background: #2a2a2c;
    color: #A1A1A6;
    font-size: 12px;
    text-align: center;
}
.web-url i {
    margin-right: 4px;
    font-size: 10px;
}
.web-view {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #222;
}
.web-view img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 0;
    /* The push-in is pinned to the top so the web app's own toolbar stays whole. */
    transform-origin: 50% 0;
    transition: opacity 0.6s var(--m-inout), transform 3.4s linear;
}
.web-tag {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: grid;
}
.web-tag span {
    grid-area: 1 / 1;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s;
}
.web-tag i {
    margin-right: 6px;
    color: #FF8A5C;
}
.web[data-beat="0"] .web-view img:nth-of-type(1),
.web[data-beat="1"] .web-view img:nth-of-type(2),
.web[data-beat="2"] .web-view img:nth-of-type(3),
.web[data-beat="3"] .web-view img:nth-of-type(4) {
    opacity: 1;
    transform: scale(1.06);
}
.web[data-beat="0"] .web-tag span:nth-child(1),
.web[data-beat="1"] .web-tag span:nth-child(2),
.web[data-beat="2"] .web-tag span:nth-child(3),
.web[data-beat="3"] .web-tag span:nth-child(4) {
    opacity: 1;
}

/* ---------- Stage builder: one stage in 2D, AR and 3D ---------- */

.stage-fan {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 16px;
}
.stage-fan::before {
    content: '';
    position: absolute;
    inset: 10% 15% 20%;
    border-radius: 50%;
    background: rgba(240, 58, 0, 0.18);
    filter: blur(70px);
}
.stage-view {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin: 0;
}
.stage-view figcaption {
    color: #888;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}
.stage-view.is-ar {
    z-index: 2;
}
.stage-view.is-ar figcaption {
    color: #fff;
}
/* Tilted phones dip at their outer corner; lift them clear of their captions. */
.stage-view.is-side figcaption {
    margin-top: 30px;
}
.stage-view .ph { --w: 176px; }
.stage-view.is-side .ph {
    --w: 128px;
    filter: brightness(0.78);
    transition: filter 0.4s, translate 0.5s var(--m-out);
}
.stage-view.is-side:hover .ph {
    filter: none;
    translate: 0 6px;
}
/* The side phones lean out from behind the AR phone. */
.stage-view:first-child { margin-right: -44px; }
.stage-view:last-child { margin-left: -44px; }
.stage-view:first-child .ph {
    rotate: -7deg;
    translate: 0 16px;
    transform-origin: 100% 100%;
}
.stage-view:last-child .ph {
    rotate: 7deg;
    translate: 0 16px;
    transform-origin: 0 100%;
}
.js-motion .stage-fan.is-in .stage-view:first-child .ph {
    animation: fan-left 1.1s var(--m-out) 0.25s backwards;
}
.js-motion .stage-fan.is-in .stage-view:last-child .ph {
    animation: fan-right 1.1s var(--m-out) 0.25s backwards;
}
@keyframes fan-left {
    from { rotate: 0deg; translate: 70px 30px; }
}
@keyframes fan-right {
    from { rotate: 0deg; translate: -70px 30px; }
}
@media (min-width: 640px) {
    .stage-view .ph { --w: 220px; }
    .stage-view.is-side .ph { --w: 168px; }
    .stage-view:first-child { margin-right: -40px; }
    .stage-view:last-child { margin-left: -40px; }
}
@media (min-width: 1024px) {
    .stage-view .ph { --w: 246px; }
    .stage-view.is-side .ph { --w: 190px; }
    .stage-view:first-child { margin-right: -46px; }
    .stage-view:last-child { margin-left: -46px; }
}
.stage-view .ph-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
/* Raw captures have no Dynamic Island; the AR render already carries one. */
.stage-island {
    position: absolute;
    top: 1.3%;
    left: 34.1%;
    width: 31.8%;
    height: 4.3%;
    border-radius: 99px;
    background: #000;
}
.stage-badge {
    position: absolute;
    z-index: 3;
    top: -38px;
    left: 50%;
    padding: 5px 11px;
    border-radius: 99px;
    background: #F03A00;
    box-shadow: 0 8px 24px -6px rgba(240, 58, 0, 0.6);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    translate: -50% 0;
}
/* A tap ring where the stage is anchored on the real floor, like the app's AR hint. */
.stage-anchor {
    position: absolute;
    left: 56%;
    top: 47%;
    width: 46%;
    aspect-ratio: 3 / 1;
    translate: -50% -50%;
    pointer-events: none;
}
.stage-anchor i {
    position: absolute;
    inset: 0;
    border: 2px solid #FF6B1A;
    border-radius: 50%;
    opacity: 0;
    animation: anchor 2.8s ease-out infinite;
}
.stage-anchor i + i {
    animation-delay: 1.4s;
}
@keyframes anchor {
    0% { opacity: 0; scale: 0.25; }
    15% { opacity: 0.9; }
    100% { opacity: 0; scale: 1; }
}

/* ---------- 4.0 tour cards ---------- */

.m-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #141414;
    transition: border-color 0.3s;
}
.m-card:hover {
    border-color: rgba(240, 58, 0, 0.4);
}
.m-card header {
    padding: 22px 22px 18px;
}
.m-card h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
.m-card header p {
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 1.5;
}
.m-scene {
    position: relative;
    height: 300px;
    margin-top: auto;
    overflow: hidden;
}

/* Timer skins: a running clock that cycles through the real faces (canvas). */
.skins {
    background: var(--skin-bg, #0E0F10);
    transition: background 0.35s;
}
.skins canvas {
    display: block;
    width: 100%;
    height: 236px;
}
.skins-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 34px;
    color: var(--skin-accent, #FF6B1A);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    transition: color 0.35s;
}
.m-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 6px;
}
.m-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s, width 0.3s;
}
[data-beat="0"] > .m-dots i:nth-child(1),
[data-beat="1"] > .m-dots i:nth-child(2),
[data-beat="2"] > .m-dots i:nth-child(3),
[data-beat="3"] > .m-dots i:nth-child(4) {
    width: 16px;
    border-radius: 3px;
    background: var(--skin-accent, #F03A00);
}

/* Multi-angle editor (port of MultiAngleGuideView): pick, align, output, export. */
.ma {
    --a1: #3B82F6;
    --a2: #A855F7;
    background: #101010;
}
.ma-stage {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 180px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
.ma-scene {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.45s var(--m-out), transform 0.6s var(--m-out);
}
.ma[data-beat="0"] .ma-scene:nth-child(1),
.ma[data-beat="1"] .ma-scene:nth-child(2),
.ma[data-beat="2"] .ma-scene:nth-child(3),
.ma[data-beat="3"] .ma-scene:nth-child(4) {
    opacity: 1;
    transform: none;
}
.ma-clip {
    width: 86px;
    height: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: var(--c);
    font-size: 22px;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.5s var(--m-out) 0.15s, transform 0.7s var(--m-spring) 0.15s;
}
.ma-clip + .ma-plus + .ma-clip {
    transform: translateX(30px);
}
.ma-clip b {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 12px;
}
.ma-plus {
    color: rgba(255, 255, 255, 0.45);
    font-size: 16px;
}
.ma[data-beat="0"] .ma-clip {
    opacity: 1;
    transform: none;
}
.ma-lanes {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 40px);
}
.ma-lane {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 0 8px;
    border-radius: 9px;
    border: 1.2px solid color-mix(in srgb, var(--c) 60%, transparent);
    background: color-mix(in srgb, var(--c) 12%, transparent);
}
.ma-lane + .ma-lane {
    transform: translateX(calc((1 - var(--p, 0)) * 36px));
}
.ma-lane b {
    flex: none;
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--c);
    color: #fff;
    font-size: 9px;
}
.ma-wave {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.ma-wave i {
    width: 3px;
    height: calc(6px + var(--h) * 32px);
    border-radius: 2px;
    background: color-mix(in srgb, var(--c) 85%, transparent);
}
.ma-head {
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: calc(var(--p, 0) * 100%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.ma-head::before {
    content: '';
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
}
.ma-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    transition: box-shadow 0.3s;
}
.ma:not(.is-hi) .ma-opt:first-child,
.ma.is-hi .ma-opt:last-child {
    box-shadow: inset 0 0 0 2px #fff;
}
.ma-frame {
    position: relative;
    width: 64px;
    height: 76px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ma-frame span {
    flex: 1;
    border-radius: 4px;
    background: color-mix(in srgb, var(--a1) 80%, transparent);
}
.ma-frame span + span {
    background: color-mix(in srgb, var(--a2) 80%, transparent);
}
.ma-frame.is-cut span + span {
    display: none;
}
.ma.is-hi .ma-frame.is-cut span {
    background: color-mix(in srgb, var(--a2) 80%, transparent);
}
.ma-cuts {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 74px;
    height: 8px;
    display: flex;
    border-radius: 2px;
    overflow: hidden;
    background: linear-gradient(90deg, var(--a1) 0 33%, #9C27B0 33% 35%, var(--a2) 35% 66%, #9C27B0 66% 68%, var(--a1) 68%);
    opacity: 0.8;
}
.ma-export {
    flex-direction: column;
    gap: 14px;
}
.ma-export .ma-frame {
    width: 96px;
    height: 96px;
}
.ma-hud {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: #FF6B1A;
    font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace;
    font-style: normal;
}
.ma-hud small {
    font-size: 9px;
    opacity: 0.85;
}
.ma-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}
.ma-bar span {
    width: 120px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.ma-bar span::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #FF6B1A;
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}
.ma-cap {
    position: absolute;
    top: 210px;
    left: 20px;
    right: 20px;
    display: grid;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13.5px;
    line-height: 1.4;
    text-align: center;
}
.ma-cap span {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.4s;
}
.ma[data-beat="0"] .ma-cap span:nth-child(1),
.ma[data-beat="1"] .ma-cap span:nth-child(2),
.ma[data-beat="2"] .ma-cap span:nth-child(3),
.ma[data-beat="3"] .ma-cap span:nth-child(4) {
    opacity: 1;
}

/* Splits on the overlay (port of SplitsGuideView) over Bolzoni's run. */
.hud img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}
.hud::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.35));
}
.hud-stack {
    position: absolute;
    z-index: 2;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hud-big {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.58);
    color: #FFD60A;
}
.hud-big b {
    font-size: 26px;
    font-style: italic;
    font-weight: 800;
}
.hud-big small {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
}
.hud-big.is-pop {
    animation: hud-in 0.45s var(--m-spring) both;
}
@keyframes hud-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}
.hud-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    max-height: 0;
    padding: 0 7px;
    overflow: hidden;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateX(18px);
    transition: max-height 0.4s var(--m-out), padding 0.4s var(--m-out), opacity 0.3s, transform 0.5s var(--m-spring);
}
.hud-row span {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
}
.hud-row small {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.75;
}
.hud-ready {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font: 800 13px ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.12em;
    transition: opacity 0.3s;
}
.hud[data-past~="1"] .hud-ready {
    opacity: 0;
}
.hud:not([data-past~="1"]) .hud-big {
    visibility: hidden;
}
.hud[data-past~="1"] .hud-row[data-n="1"],
.hud[data-past~="2"] .hud-row[data-n="2"],
.hud[data-past~="3"] .hud-row[data-n="3"],
.hud[data-past~="4"] .hud-row[data-n="4"] {
    max-height: 26px;
    padding: 3px 7px;
    opacity: 1;
    transform: none;
}

/* ---------- Cloud: data moving between the phone, the cloud and the browser ---------- */

.sync-link {
    position: relative;
    width: 44px;
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}
.sync-link i {
    position: absolute;
    top: -2px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #39FF14;
    box-shadow: 0 0 8px #39FF14;
    animation: sync-go 1.8s var(--m-inout) infinite;
}
.sync-link i + i {
    background: #F03A00;
    box-shadow: 0 0 8px #F03A00;
    animation-name: sync-back;
    animation-delay: 0.9s;
}
@keyframes sync-go {
    0% { left: 0; opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { left: calc(100% - 6px); opacity: 0; }
}
@keyframes sync-back {
    0% { left: calc(100% - 6px); opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { left: 0; opacity: 0; }
}

/* ---------- Reduced motion: finished frames, no movement ---------- */

@media (prefers-reduced-motion: reduce) {
    .run *,
    .tour *,
    .m-card *,
    .tour-panel,
    .stage-view .ph,
    .stage-anchor i,
    .sync-link i {
        animation: none !important;
        transition: none !important;
    }
    .stage-anchor,
    .sync-link i { display: none; }
}