/* ===========================================================================
   Flythrough product page, added 2026-07-28.
   Styling copied from the Luxoret Tools catalog so this page reads as part of
   the site: same page width, same card treatment, same light and dark values.
   Everything is scoped to .ft-* or body.ft-demo.
   =========================================================================== */

.ft-page {
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

/* --------------------------------------------------------------- headings -- */
.ft-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
    font-weight: 700;
    color: #6e6e73;
    margin: 0 0 10px;
}

[data-theme="dark"] .ft-eyebrow { color: #98989d; }

.ft-h1 {
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin: 0 0 14px;
}

.ft-h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 10px;
}

[data-theme="dark"] .ft-h1,
[data-theme="dark"] .ft-h2 { color: #f5f5f7; }

.ft-lead {
    font-size: 16px;
    line-height: 1.6;
    color: #86868b;
    margin: 0;
    max-width: 62ch;
}

[data-theme="dark"] .ft-lead { color: #98989d; }

.ft-section-head {
    text-align: center;
    margin-bottom: 36px;
}

.ft-section-head .ft-lead { margin: 0 auto; }

/* ------------------------------------------------------------------ hero -- */
.ft-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 44px;
    align-items: center;
    margin-bottom: 64px;
}

.ft-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    margin: 28px 0 0;
    padding: 0;
    font-size: 14px;
    color: #86868b;
}

.ft-facts strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
}

[data-theme="dark"] .ft-facts { color: #98989d; }
[data-theme="dark"] .ft-facts strong { color: #f5f5f7; }

.ft-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    background: #05070d;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    aspect-ratio: 16 / 10;
}

[data-theme="dark"] .ft-frame {
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ft-frame__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ft-frame__tag {
    position: absolute;
    left: 14px;
    bottom: 14px;
    padding: 7px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    color: #f5f5f7;
    background: rgba(8, 10, 18, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* -------------------------------------------------------------- sections -- */
.ft-block {
    margin-bottom: 64px;
}

/* ----------------------------------------------------------------- cards -- */
.ft-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ft-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ft-card {
    display: block;
    padding: 28px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.ft-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .ft-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .ft-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ft-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px;
}

.ft-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #86868b;
    margin: 0;
}

[data-theme="dark"] .ft-card h3 { color: #f5f5f7; }
[data-theme="dark"] .ft-card p { color: #98989d; }

.ft-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1d1d1f;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
}

[data-theme="dark"] .ft-num {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #f5f5f7;
}

/* -------------------------------------------------------------- showcase -- */
.ft-shot {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.ft-shot:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .ft-shot {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .ft-shot:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.ft-shot__video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #05070d;
}

.ft-shot figcaption {
    padding: 20px 22px 22px;
}

.ft-shot figcaption strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 6px;
}

.ft-shot figcaption span {
    font-size: 14px;
    line-height: 1.55;
    color: #86868b;
}

[data-theme="dark"] .ft-shot figcaption strong { color: #f5f5f7; }
[data-theme="dark"] .ft-shot figcaption span { color: #98989d; }

.ft-hint-line {
    margin: 20px 0 0;
    text-align: center;
    font-size: 14px;
    color: #86868b;
}

.ft-hint-line a {
    color: #1d1d1f;
    font-weight: 600;
    text-decoration: underline;
}

[data-theme="dark"] .ft-hint-line { color: #98989d; }
[data-theme="dark"] .ft-hint-line a { color: #f5f5f7; }

/* --------------------------------------------------------------- buttons -- */
.ft-cta-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.ft-cta-row--center { justify-content: center; }

.ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: transparent;
    color: #1d1d1f;
    transition: all 0.2s ease;
}

.ft-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.18);
}

.ft-btn-primary {
    background: #1d1d1f;
    border-color: #1d1d1f;
    color: #ffffff;
}

.ft-btn-primary:hover {
    background: #000000;
    border-color: #000000;
}

[data-theme="dark"] .ft-btn {
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .ft-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] .ft-btn-primary {
    background: #f5f5f7;
    border-color: #f5f5f7;
    color: #1d1d1f;
}

[data-theme="dark"] .ft-btn-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.ft-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- builder -- */
.ft-note {
    margin: 0 0 26px;
    padding: 18px 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    background: #ffffff;
    color: #86868b;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ft-note strong { color: #1d1d1f; }
.ft-note a { color: #1d1d1f; font-weight: 600; }

[data-theme="dark"] .ft-note {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #98989d;
}

[data-theme="dark"] .ft-note strong,
[data-theme="dark"] .ft-note a { color: #f5f5f7; }

.ft-form {
    display: grid;
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
}

.ft-field {
    display: grid;
    gap: 8px;
}

.ft-field > span {
    font-size: 13px;
    font-weight: 600;
    color: #6e6e73;
}

[data-theme="dark"] .ft-field > span { color: #98989d; }

.ft-field input,
.ft-field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    background: #fff;
    outline: none;
    transition: all 0.2s;
    resize: vertical;
}

.ft-field input::placeholder,
.ft-field textarea::placeholder { color: #86868b; }

.ft-field input:focus,
.ft-field textarea:focus {
    border-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .ft-field input,
[data-theme="dark"] .ft-field textarea {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f5f5f7;
}

[data-theme="dark"] .ft-field input::placeholder,
[data-theme="dark"] .ft-field textarea::placeholder { color: #98989d; }

[data-theme="dark"] .ft-field input:focus,
[data-theme="dark"] .ft-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.ft-scenes {
    display: grid;
    gap: 16px;
}

.ft-scene-row {
    display: grid;
    gap: 14px;
    padding: 24px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .ft-scene-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ft-scene-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ft-scene-head .ft-num { margin-bottom: 0; }

.ft-remove {
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #86868b;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}

.ft-remove:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .ft-remove:hover {
    color: #f5f5f7;
    background: rgba(255, 255, 255, 0.08);
}

.ft-form-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.ft-status,
.ft-result {
    margin: 26px auto 0;
    max-width: 820px;
    padding: 24px;
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

[data-theme="dark"] .ft-status,
[data-theme="dark"] .ft-result {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ft-status__title,
.ft-result h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 14px;
}

[data-theme="dark"] .ft-status__title,
[data-theme="dark"] .ft-result h3 { color: #f5f5f7; }

.ft-stages {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: grid;
    gap: 9px;
}

.ft-stage {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.03);
    font-size: 14px;
    color: #1d1d1f;
}

[data-theme="dark"] .ft-stage {
    background: rgba(255, 255, 255, 0.05);
    color: #f5f5f7;
}

.ft-stage__state { color: #86868b; }
[data-theme="dark"] .ft-stage__state { color: #98989d; }
.ft-stage--done .ft-stage__state { color: #10b981; font-weight: 600; }

.ft-status__note {
    margin: 0;
    font-size: 13.5px;
    color: #86868b;
}

[data-theme="dark"] .ft-status__note { color: #98989d; }

#ft-embed {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1100px) {
    .ft-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .ft-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .ft-hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .ft-hero__media { order: -1; }
}

@media (max-width: 700px) {
    .ft-page { padding: 24px 16px 60px; }
    .ft-grid-4,
    .ft-grid-3 { grid-template-columns: 1fr; }
    .ft-h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-card,
    .ft-shot,
    .ft-btn { transition: none; }
}


/* ===========================================================================
   Soft-card pass, added 2026-07-28 after Gagi pointed at the Tools cards.
   The site's raised card language lives in softcard.css as --sc-* tokens.
   These rules put the Flythrough page on exactly those tokens, so the cards
   sit on the page the same way the tool cards do, in both themes.
   =========================================================================== */

[data-theme="light"] .ft-page { background: #EDECEC; }

.ft-page,
.ft-page input,
.ft-page textarea,
.ft-page button {
    font-family: var(--sc-font);
}

/* ---- cards, showcase tiles, form rows, panels: one raised surface ---- */
[data-theme="light"] .ft-card,
[data-theme="light"] .ft-shot,
[data-theme="light"] .ft-scene-row,
[data-theme="light"] .ft-status,
[data-theme="light"] .ft-result,
[data-theme="light"] .ft-note,
[data-theme="light"] .ft-frame {
    background: #F4F4F5;
    border: none;
    border-radius: 20px;
    box-shadow: var(--sc-shadow-card-light);
}

html:not([data-theme="light"]) .ft-card,
html:not([data-theme="light"]) .ft-shot,
html:not([data-theme="light"]) .ft-scene-row,
html:not([data-theme="light"]) .ft-status,
html:not([data-theme="light"]) .ft-result,
html:not([data-theme="light"]) .ft-note,
html:not([data-theme="light"]) .ft-frame {
    background: linear-gradient(0deg, #2F2F31, #2F2F31),
                radial-gradient(62% 62% at 28% -10%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%);
    border: none;
    border-radius: 20px;
    box-shadow: var(--sc-shadow-card-dark);
}

.ft-card,
.ft-shot {
    transition: transform 0.15s ease;
}

.ft-card:hover,
.ft-shot:hover {
    transform: translateY(-2px);
}

[data-theme="light"] .ft-card:hover,
[data-theme="light"] .ft-shot:hover {
    background: #F4F4F5;
    box-shadow: var(--sc-shadow-card-light);
}

html:not([data-theme="light"]) .ft-card:hover,
html:not([data-theme="light"]) .ft-shot:hover {
    box-shadow: var(--sc-shadow-card-dark);
}

/* The hero frame keeps its own dark canvas behind the clip */
.ft-frame { overflow: hidden; }
.ft-frame__video { border-radius: 20px; }

/* ---- step numbers become dark chips, same as the tool icons ---- */
.ft-num {
    background: var(--sc-dark-grad);
    border: none;
    border-radius: 14px;
    box-shadow: var(--sc-shadow-chip);
    color: rgba(255, 255, 255, 0.92);
    width: 38px;
    height: 38px;
    font-weight: 700;
}

[data-theme="light"] .ft-num,
html:not([data-theme="light"]) .ft-num {
    background: var(--sc-dark-grad);
    color: rgba(255, 255, 255, 0.92);
}

/* ---- buttons on the site's pill recipes ---- */
.ft-btn {
    border: none;
    border-radius: 99px;
    font-family: var(--sc-font);
    font-weight: 700;
    font-size: 14px;
    padding: 14px 32px;
    transition: transform 0.2s ease;
}

.ft-btn-primary,
.ft-btn-primary:hover {
    background: var(--sc-dark-grad);
    color: #ffffff;
    box-shadow: var(--sc-shadow-chip);
}

[data-theme="light"] .ft-btn:not(.ft-btn-primary) {
    background: #FAFAFA;
    color: #09090B;
    box-shadow: var(--sc-shadow-flat-light);
}

html:not([data-theme="light"]) .ft-btn:not(.ft-btn-primary) {
    background: #232326;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255,255,255,0.12) inset, 0px 3px 6px 0px rgba(0,0,0,0.25);
}

.ft-btn:hover { transform: translateY(-2px); }

/* ---- inputs as raised pills, matching the catalog search ---- */
[data-theme="light"] .ft-field input,
[data-theme="light"] .ft-field textarea {
    background: #FAFAFA;
    border: none;
    box-shadow: var(--sc-shadow-flat-light);
    border-radius: 16px;
    color: #1C1C1E;
}

html:not([data-theme="light"]) .ft-field input,
html:not([data-theme="light"]) .ft-field textarea {
    background: #232326;
    border: none;
    box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255,255,255,0.10) inset;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.95);
}

[data-theme="light"] .ft-field input:focus,
[data-theme="light"] .ft-field textarea:focus,
html:not([data-theme="light"]) .ft-field input:focus,
html:not([data-theme="light"]) .ft-field textarea:focus {
    box-shadow: var(--sc-shadow-flat-light), 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* ---- stage rows inside the status panel ---- */
[data-theme="light"] .ft-stage {
    background: #FAFAFA;
    box-shadow: var(--sc-shadow-flat-light);
    border-radius: 14px;
}

html:not([data-theme="light"]) .ft-stage {
    background: #232326;
    box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255,255,255,0.10) inset;
    border-radius: 14px;
}

/* ---- text tones from the same page family ---- */
[data-theme="light"] .ft-h1,
[data-theme="light"] .ft-h2,
[data-theme="light"] .ft-card h3,
[data-theme="light"] .ft-shot figcaption strong,
[data-theme="light"] .ft-facts strong { color: #1C1C1E; }

[data-theme="light"] .ft-lead,
[data-theme="light"] .ft-card p,
[data-theme="light"] .ft-shot figcaption span {
    color: #1C1C1E;
    opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
    .ft-card, .ft-shot, .ft-btn { transition: none; }
    .ft-card:hover, .ft-shot:hover, .ft-btn:hover { transform: none; }
}

/* ===========================================================================
   Full screen demo page (/flythrough/demo) only. Carries body.ft-demo.
   =========================================================================== */
body.ft-demo .top-header {
    background: linear-gradient(180deg, rgba(4, 6, 12, 0.82) 0%, rgba(4, 6, 12, 0.5) 58%, rgba(4, 6, 12, 0) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.ft-demo .top-header a,
body.ft-demo .top-header button,
body.ft-demo .top-header .logo-text,
body.ft-demo .top-header .header-text-btn,
body.ft-demo .top-header .header-avatar,
body.ft-demo .top-header .avatar-name,
body.ft-demo .top-header svg {
    color: #f2f4f8;
}

body.ft-demo .top-header .dropdown-menu *,
body.ft-demo .top-header .header-dropdown * { color: inherit; }

.app-layout.flythrough-layout .sidebar { display: none; }
.app-layout.flythrough-layout .main-content { margin-left: 0; max-width: 100%; }

.ft-world {
    --sw-bg: #05070d;
    --sw-ink: #f5f5f7;
    --sw-ink-soft: #98989d;
    --sw-accent: #7c3aed;
    width: 100%;
}

.ft-world .sw-stage,
.ft-world .sw-copylayer,
.ft-world .sw-sky,
.ft-world .sw-route,
.ft-world .sw-hint,
.ft-world .sw-scrollbar {
    left: var(--ft-left, 0px);
    width: calc(100vw - var(--ft-left, 0px));
}

.ft-world .sw-topbar {
    left: var(--ft-left, 0px);
    width: calc(100vw - var(--ft-left, 0px));
    top: calc(var(--ft-top, 0px) + 10px);
    padding-right: 28px;
    box-sizing: border-box;
}

.ft-world .sw-scrollbar { top: var(--ft-top, 0px); }
.ft-world .sw-route { right: 18px; }
.ft-world .sw-brand { display: none; }
.ft-world .sw-nav { margin-left: auto; }
.ft-world .sw-hint { bottom: 34px; }

.ft-world .sw-copylayer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(6, 8, 14, 0.72) 0%,
        rgba(6, 8, 14, 0.46) 34%,
        rgba(6, 8, 14, 0.06) 62%,
        rgba(6, 8, 14, 0) 78%);
}

/* Do not touch position here, the engine anchors the copy itself */
.ft-world .sw-copy { z-index: 1; }

.ft-world .sw-copy__title,
.ft-world .sw-copy__body,
.ft-world .sw-copy__num {
    color: #f7f7fa;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.ft-world.ft-parked .sw-stage,
.ft-world.ft-parked .sw-copylayer,
.ft-world.ft-parked .sw-sky,
.ft-world.ft-parked .sw-route,
.ft-world.ft-parked .sw-hint,
.ft-world.ft-parked .sw-topbar,
.ft-world.ft-parked .sw-scrollbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 860px) {
    .ft-world .sw-copylayer {
        padding-top: var(--ft-top, 0px);
        box-sizing: border-box;
    }
    .ft-world .sw-copy { padding-right: 22px; }
    .ft-world .sw-copy__body,
    .ft-world .sw-copy__title { max-width: 100%; }
}

/* Field help sits above the input, the inputs themselves stay empty so people
   are not deleting sample text before they can type. */
.ft-field .ft-help {
    display: block;
    font-style: normal;
    font-size: 13px;
    line-height: 1.5;
    margin: -2px 0 2px;
    color: #1C1C1E;
    opacity: 0.6;
}

html:not([data-theme="light"]) .ft-field .ft-help {
    color: rgba(255, 255, 255, 0.95);
    opacity: 0.55;
}

/* ===========================================================================
   Windowed scroll demo. Full screen was rejected: the clips are 1440p and a
   wide monitor stretched them. Inside a panel they play near native scale.
   The engine's layers are absolute here, not fixed, so they stay in the panel.
   =========================================================================== */
.ft-linkbtn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #1C1C1E;
    text-decoration: underline;
    cursor: pointer;
}

html:not([data-theme="light"]) .ft-linkbtn { color: #f5f5f7; }

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

.ft-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.ft-modal[hidden] { display: none; }

.ft-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 16, 0.68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ft-modal__panel {
    position: relative;
    width: min(1180px, 92vw);
    height: min(760px, 84vh);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    overflow: hidden;
    background: #0a0c12;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.ft-modal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: #16181f;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--sc-font);
}

.ft-modal__title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ft-modal__close {
    border: none;
    border-radius: 99px;
    padding: 8px 18px;
    font-family: var(--sc-font);
    font-size: 13px;
    font-weight: 700;
    color: #09090B;
    background: #FAFAFA;
    box-shadow: var(--sc-shadow-flat-light);
    cursor: pointer;
}

.ft-modal__scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background: #05070d;
}

/* Inside the panel the engine paints against the panel, not the viewport */
.ft-modal .ft-world .sw-stage,
.ft-modal .ft-world .sw-copylayer,
.ft-modal .ft-world .sw-sky,
.ft-modal .ft-world .sw-route,
.ft-modal .ft-world .sw-hint,
.ft-modal .ft-world .sw-topbar,
.ft-modal .ft-world .sw-scrollbar {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}

/* Sticky layers need a real height. The panel's own height is measured in JS and
   handed over as --ft-panel-h, since percentage heights would resolve against
   the tall scroll track instead of the visible window. */
.ft-modal .ft-world .sw-stage,
.ft-modal .ft-world .sw-copylayer,
.ft-modal .ft-world .sw-sky {
    position: sticky;
    top: 0;
    height: var(--ft-panel-h, 700px);
}

.ft-modal .ft-world .sw-copylayer,
.ft-modal .ft-world .sw-sky {
    margin-top: calc(var(--ft-panel-h, 700px) * -1);
}

.ft-modal .ft-world .sw-scene,
.ft-modal .ft-world .sw-scene__video,
.ft-modal .ft-world .sw-scene__still {
    height: 100%;
}

.ft-modal .ft-world .sw-topbar {
    top: 10px;
    padding: 0 16px;
}

.ft-modal .ft-world .sw-route { right: 12px; }
.ft-modal .ft-world .sw-hint { bottom: 22px; top: auto; }
.ft-modal .ft-world .sw-scrollbar { top: 0; }

@media (max-width: 700px) {
    .ft-modal { padding: 12px; }
    .ft-modal__panel { width: 96vw; height: 86vh; }
}

/* Copy inside the panel: the engine sizes type with vw, which reads the whole
   monitor and not this window, so it came out oversized and broken across
   lines. Fixed sizes here, scaled to the panel instead. */
.ft-modal .ft-world .sw-copy {
    width: min(46%, 460px);
    left: 34px;
}

.ft-modal .ft-world .sw-copy__title {
    font-size: 30px;
    line-height: 1.1;
}

.ft-modal .ft-world .sw-copy__body {
    font-size: 15px;
    line-height: 1.55;
    margin-top: 12px;
    max-width: 42ch;
}

.ft-modal .ft-world .sw-copy__eyebrow { font-size: 11px; }
.ft-modal .ft-world .sw-copy__num { font-size: 11px; }
.ft-modal .ft-world .sw-copy__tags li { font-size: 12px; padding: 5px 11px; }

@media (max-width: 860px) {
    .ft-modal .ft-world .sw-copy {
        width: auto;
        right: 24px;
        left: 24px;
    }
    .ft-modal .ft-world .sw-copy__title { font-size: 24px; }
}

/* The engine ships its own chrome for a full page: section chips, a dot rail
   and a scroll hint. In a 1180px window they overlap the panel edges and read
   as clutter, and the title bar already says what to do. Hide them here. */
.ft-modal .ft-world .sw-nav,
.ft-modal .ft-world .sw-topbar,
.ft-modal .ft-world .sw-route,
.ft-modal .ft-world .sw-hint,
.ft-modal .ft-world .sw-scrollbar {
    display: none;
}

/* With the chrome gone the copy can start a little higher in the frame */
.ft-modal .ft-world .sw-copy {
    top: 50%;
}

/* Two ways to start a stop: describe it, or hand over a photo. */
.ft-source {
    display: flex;
    gap: 8px;
    margin: 2px 0 4px;
}

.ft-tab {
    border: none;
    border-radius: 99px;
    padding: 8px 18px;
    font-family: var(--sc-font);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: #FAFAFA;
    color: #09090B;
    box-shadow: var(--sc-shadow-flat-light);
}

.ft-tab.is-on {
    background: var(--sc-dark-grad);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: var(--sc-shadow-chip);
}

html:not([data-theme="light"]) .ft-tab {
    background: #232326;
    color: rgba(255, 255, 255, 0.95);
    box-shadow: 0px -3px 0px 0px #080808 inset, 0px 1px 0px 0px rgba(255,255,255,0.10) inset;
}

html:not([data-theme="light"]) .ft-tab.is-on {
    background: #FAFAFA;
    color: #1C1C1E;
    box-shadow: var(--sc-shadow-flat-light);
}

.ft-pane[hidden] { display: none; }

.ft-pane--photo > span {
    font-size: 13px;
    font-weight: 600;
    color: #6e6e73;
}

html:not([data-theme="light"]) .ft-pane--photo > span { color: #98989d; }

.ft-file {
    font-family: var(--sc-font);
    font-size: 14px;
}

.ft-thumb {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ft-thumb img {
    width: 132px;
    height: 78px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: var(--sc-shadow-flat-light);
}

.ft-thumb__clear {
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #86868b;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}

.ft-thumb__clear:hover { color: #1C1C1E; background: rgba(0,0,0,0.04); }
html:not([data-theme="light"]) .ft-thumb__clear:hover { color: #f5f5f7; background: rgba(255,255,255,0.08); }

/* Inputs read as pressed in, not raised. A raised control says "click me", a
   sunken one says "type here", and these are all typing surfaces. */
[data-theme="light"] .ft-field input,
[data-theme="light"] .ft-field textarea {
    background: #EBEBEC;
    box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.06),
                inset 2px 2px 5px 0px rgba(0,0,0,0.10),
                inset -2px -2px 4px 0px rgba(255,255,255,0.85),
                0px 1px 0px 0px rgba(255,255,255,0.70);
}

[data-theme="light"] .ft-field input:focus,
[data-theme="light"] .ft-field textarea:focus {
    background: #E7E7E9;
    box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.08),
                inset 2px 2px 6px 0px rgba(0,0,0,0.14),
                inset -2px -2px 4px 0px rgba(255,255,255,0.85),
                0px 1px 0px 0px rgba(255,255,255,0.70);
}

html:not([data-theme="light"]) .ft-field input,
html:not([data-theme="light"]) .ft-field textarea {
    background: #202024;
    box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.45),
                inset 2px 2px 5px 0px rgba(0,0,0,0.55),
                inset -1px -1px 2px 0px rgba(255,255,255,0.05),
                0px 1px 0px 0px rgba(255,255,255,0.06);
}

html:not([data-theme="light"]) .ft-field input:focus,
html:not([data-theme="light"]) .ft-field textarea:focus {
    background: #1C1C20;
    box-shadow: inset 0px 3px 0px 0px rgba(0,0,0,0.55),
                inset 2px 2px 7px 0px rgba(0,0,0,0.65),
                inset -1px -1px 2px 0px rgba(255,255,255,0.05),
                0px 1px 0px 0px rgba(255,255,255,0.06);
}

/* The status rows are read only surfaces, keep them sunken too so the panel
   does not look like a stack of buttons. */
[data-theme="light"] .ft-stage {
    background: #EBEBEC;
    box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.08),
                inset -2px -2px 4px 0px rgba(255,255,255,0.85);
}

html:not([data-theme="light"]) .ft-stage {
    background: #202024;
    box-shadow: inset 2px 2px 5px 0px rgba(0,0,0,0.5),
                inset -1px -1px 2px 0px rgba(255,255,255,0.04);
}

/* Lighter inside. The sunken read comes from the shadow, not from a grey fill,
   so the surface can sit near white and still look pressed in. */
[data-theme="light"] .ft-field input,
[data-theme="light"] .ft-field textarea {
    background: #FBFBFC;
}

[data-theme="light"] .ft-field input:focus,
[data-theme="light"] .ft-field textarea:focus {
    background: #FFFFFF;
}

[data-theme="light"] .ft-stage {
    background: #FBFBFC;
}

html:not([data-theme="light"]) .ft-field input,
html:not([data-theme="light"]) .ft-field textarea {
    background: #2A2A2E;
}

html:not([data-theme="light"]) .ft-field input:focus,
html:not([data-theme="light"]) .ft-field textarea:focus {
    background: #2E2E33;
}

html:not([data-theme="light"]) .ft-stage {
    background: #2A2A2E;
}