/* Fly Studio board, dark workspace, own design. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --fly-bg: #2c2c2e;
    --fly-panel: #242426;
    --fly-card: #38383b;
    --fly-line: rgba(255, 255, 255, 0.09);
    --fly-text: #f4f4f5;
    --fly-dim: #b9b9c0;
    --fly-accent: #ffffff;
    --fly-red: #dc2626;
    --fly-lime: #d3f34b;
    --fly-radius: 14px;
}

html, body.fly-body {
    height: 100%;
    background: var(--fly-bg);
    color: var(--fly-text);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    overflow: hidden;
}

/* ---------- Top bar ---------- */

.fly-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    background: rgba(44, 44, 46, 0.92);
    border-bottom: 1px solid var(--fly-line);
    z-index: 50;
    backdrop-filter: blur(8px);
}

.fly-topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.fly-logo {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--fly-text);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}
.fly-logo span { color: var(--fly-red); }

.fly-links { display: flex; align-items: center; gap: 20px; flex: 1; justify-content: flex-start; padding-left: 6px; }
.fly-links a {
    color: var(--fly-dim);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    transition: color 0.13s;
}
.fly-links a:hover { color: var(--fly-text); }

.fly-topbar-sep { width: 1px; height: 22px; background: var(--fly-line); }

.fly-app-name {
    font-size: 32px;
    font-weight: 800;
    color: var(--fly-text);
    letter-spacing: -0.5px;
    white-space: nowrap;
    line-height: 1;
}

.fly-nav { display: flex; gap: 4px; background: var(--fly-panel); border: 1px solid var(--fly-line); border-radius: 999px; padding: 4px; }

.fly-menu { position: relative; }

.fly-menu-btn {
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.fly-menu-btn:hover { color: var(--fly-text); }
.fly-menu.active .fly-menu-btn { background: var(--fly-accent); color: #0b0b0d; }

.fly-menu-drop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #242426;
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    padding: 16px;
    gap: 18px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.3);
    z-index: 80;
}
.fly-menu:hover .fly-menu-drop,
.fly-menu.open .fly-menu-drop { display: flex; }
.fly-menu-drop::before {
    content: '';
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.fly-menu-drop-single .fly-menu-col { min-width: 260px; }

.fly-menu-col { display: flex; flex-direction: column; gap: 2px; min-width: 250px; }

.fly-menu-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fly-dim);
    padding: 4px 10px 8px;
}

.fly-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--fly-text);
    font: inherit;
    transition: background 0.12s;
    position: relative;
}
.fly-menu-item:hover { background: rgba(255,255,255,0.06); }
.fly-menu-item b { display: block; font-size: 13px; font-weight: 500; }
.fly-menu-item small { display: block; color: var(--fly-dim); font-size: 11.5px; font-weight: 400; margin-top: 1px; }

.fly-mi-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--fly-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fly-text);
}
.fly-mi-icon svg { width: 14px; height: 14px; stroke-width: 1.6; }
.fly-mi-icon img { width: 15px; height: 15px; display: block; }

.fly-menu-item[data-top="1"] .fly-mi-txt b::after {
    content: 'TOP';
    display: inline-block;
    vertical-align: 1px;
    margin-left: 8px;
    background: var(--fly-lime);
    color: #14140f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    padding: 2px 9px;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.fly-tab {
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.fly-tab:hover { color: var(--fly-text); }
.fly-tab.active { background: var(--fly-accent); color: #0b0b0d; }

.fly-topbar-right { display: flex; align-items: center; gap: 10px; }

.fly-points {
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    color: var(--fly-text);
    white-space: nowrap;
}

.fly-signin, .fly-exit {
    color: var(--fly-dim);
    text-decoration: none;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 10px;
    white-space: nowrap;
}
.fly-signin { background: var(--fly-accent); color: #0b0b0d; }
.fly-exit:hover { color: var(--fly-text); }

/* ---------- Layout ---------- */

.fly-main {
    position: fixed;
    top: 62px; left: 0; right: 0; bottom: 0;
    display: flex;
}

/* ---------- Left panel ---------- */

.fly-panel {
    width: 330px;
    min-width: 330px;
    background: var(--fly-bg);
    border-right: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 18px 16px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fly-panel::-webkit-scrollbar { width: 4px; }
.fly-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.fly-mode-panel { display: none; flex-direction: column; gap: 16px; }
.fly-mode-panel.active { display: flex; }

.fly-subtabs {
    display: flex;
    gap: 18px;
    border-bottom: 1px solid var(--fly-line);
    padding-bottom: 0;
}
.fly-subtabs button {
    background: transparent;
    border: 0;
    color: var(--fly-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 2px 0 9px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.13s;
}
.fly-subtabs button:hover { color: var(--fly-text); }
.fly-subtabs button.active { color: var(--fly-text); border-bottom-color: #fff; }

.fly-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.fly-row { display: flex; gap: 12px; }

.fly-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fly-dim);
}
.fly-label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.7; }

.fly-label-row { display: flex; align-items: center; justify-content: space-between; }

.fly-enhance {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.13s;
}
.fly-enhance:hover { color: var(--fly-text); border-color: rgba(255,255,255,0.3); }
.fly-enhance:disabled { opacity: 0.5; cursor: default; }

.fly-vfx { max-height: 252px; }

.fly-chips.fly-chips-hidden { display: none !important; }

#vidDuration { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#vidDuration .fly-chip { text-align: center; padding: 9px 12px; }
#musSeconds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#musSeconds .fly-chip { text-align: center; padding: 9px 6px; }

.fly-model-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(180deg, #38383b, #2e2e30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    color: var(--fly-text);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 13px;
    cursor: pointer;
    transition: border-color 0.13s;
}
.fly-model-btn:hover { border-color: rgba(255,255,255,0.3); }
.fly-model-btn-left { display: flex; align-items: center; gap: 9px; }
.fly-model-btn-arrow { color: var(--fly-dim); font-size: 18px; line-height: 1; }

.fly-model-panel {
    position: fixed;
    left: 338px;
    top: 74px;
    max-height: calc(100vh - 92px);
    width: 420px;
    background: #242426;
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    padding: 10px;
    overflow-y: auto;
    scrollbar-width: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.28);
    z-index: 70;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fly-model-panel::-webkit-scrollbar { display: none; }
.fly-model-panel-sm { width: 230px; }
.fly-ratio-shape {
    display: inline-block;
    border: 1.5px solid var(--fly-dim);
    border-radius: 3px;
}
.fly-model-panel[hidden] { display: none; }
.fly-model-panel button.fly-mp-item {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--fly-text);
    font: inherit;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
}
.fly-model-panel button.fly-mp-item:hover { background: rgba(255,255,255,0.07); }
.fly-model-panel button.fly-mp-item.selected { background: rgba(255,255,255,0.09); }
.fly-model-panel .fly-pbd-txt { min-width: 0; }
.fly-model-panel .fly-mp-item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.fly-textarea {
    background: linear-gradient(180deg, #343437, #2c2c2f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    color: var(--fly-text);
    font: inherit;
    padding: 11px 12px;
    resize: vertical;
    min-height: 44px;
}
.fly-textarea:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.fly-textarea::placeholder { color: rgba(244,244,245,0.35); }

.fly-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.fly-chip {
    border: 1px solid var(--fly-line);
    background: linear-gradient(180deg, #37373a, #2e2e30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    color: var(--fly-dim);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.13s;
}
.fly-chip:hover { color: var(--fly-text); border-color: rgba(255,255,255,0.25); }
.fly-chip.active { background: var(--fly-accent); border-color: var(--fly-accent); color: #0b0b0d; }

/* Camera presets */

.fly-presets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    max-height: 630px;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fly-presets::-webkit-scrollbar { width: 4px; }
.fly-presets::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.fly-preset {
    border: 1px solid var(--fly-line);
    background: linear-gradient(180deg, #37373a, #2e2e30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    color: var(--fly-dim);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.13s;
    text-align: center;
}
.fly-preset:hover { color: var(--fly-text); border-color: rgba(255,255,255,0.25); }
.fly-preset.active { background: var(--fly-accent); border-color: var(--fly-accent); color: #0b0b0d; }

/* Upload slots */

.fly-slot {
    position: relative;
    height: 82px;
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: var(--fly-radius);
    background: linear-gradient(180deg, #343437, #2c2c2f);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.13s;
}
.fly-slot:hover { border-color: rgba(255,255,255,0.4); }
.fly-slot-lg { height: 150px; }
.fly-slot-tall { height: 170px; }
.fly-slot-tall .fly-slot-img { object-fit: contain; background: #232325; }
.fly-slot-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #232325;
    display: block;
}
.fly-slot-hint { color: rgba(244,244,245,0.4); font-size: 12px; font-weight: 500; padding: 0 8px; text-align: center; }
.fly-slot-img { display: none; width: 100%; height: 100%; object-fit: cover; }
.fly-slot.filled .fly-slot-hint { display: none; }
.fly-slot.filled .fly-slot-img { display: block; }
.fly-slot-clear {
    display: none;
    position: absolute;
    top: 5px; right: 5px;
    width: 22px; height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.fly-slot.filled .fly-slot-clear { display: block; }
.fly-slot.loading .fly-slot-hint { color: var(--fly-text); }

.fly-strength input[type="range"] { width: 100%; accent-color: #fff; margin-top: 4px; }

.fly-note { font-size: 12px; line-height: 1.5; color: rgba(244,244,245,0.5); }

/* Generate */

.fly-generate-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fly-line); }

.fly-generate {
    width: 100%;
    border: 1px solid transparent;
    background: var(--fly-lime);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px rgba(211,243,75,0.20);
    color: #14140f;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 16px;
    border-radius: var(--fly-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.1s, opacity 0.15s;
}
.fly-generate:hover { transform: translateY(-1px); }
.fly-generate:disabled { opacity: 0.55; cursor: default; transform: none; }
.fly-cost { font-size: 12px; font-weight: 600; opacity: 0.65; }

.fly-error {
    margin-top: 10px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fca5a5;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.45;
}

/* ---------- Cinema Studio ---------- */

.fly-cinerail {
    width: 270px;
    min-width: 270px;
    background: var(--fly-bg);
    border-right: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    padding: 18px 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fly-cinerail[hidden] { display: none; }

.fly-cinerail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fly-dim);
}
.fly-cinerail-head button {
    border: 1px solid var(--fly-line);
    background: linear-gradient(180deg, #37373a, #2e2e30);
    color: var(--fly-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-cinerail-head button:hover { border-color: rgba(255,255,255,0.3); }

.fly-cine-addform { display: flex; flex-direction: column; gap: 9px; }
.fly-cine-addform[hidden] { display: none; }
.fly-cine-addform input {
    background: linear-gradient(180deg, #343437, #2c2c2f);
    border: 1px solid var(--fly-line);
    border-radius: 11px;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 9px 12px;
    outline: none;
}
.fly-cine-save {
    border: 1px solid rgba(255,255,255,0.25);
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.06));
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 11px;
    cursor: pointer;
}

.fly-cine-elements { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fly-cine-el {
    position: relative;
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--fly-card);
    cursor: pointer;
    transition: border-color 0.13s;
}
.fly-cine-el:hover { border-color: rgba(255,255,255,0.35); }
.fly-cine-el img { width: 100%; height: 86px; object-fit: cover; display: block; }
.fly-cine-el span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 7px;
    color: var(--fly-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly-cine-el small { position: absolute; top: 4px; left: 5px; background: rgba(0,0,0,0.6); color: #fff; font-size: 9px; padding: 1px 6px; border-radius: 999px; }
.fly-cine-el .fly-cine-del {
    position: absolute;
    top: 4px; right: 4px;
    width: 19px; height: 19px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.fly-cinebar[hidden] { display: none; }

/* ---------- Marketing Studio ---------- */

.fly-marketrail { width: 290px; min-width: 290px; }
.fly-mk-block { display: flex; flex-direction: column; gap: 8px; }
/* Sunken means you write in it, raised means you press it */
.fly-mk-input, .fly-cine-addform input {
    background: #202024;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 10px 12px;
    outline: none;
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.45), inset 2px 2px 5px rgba(0,0,0,0.55), inset -1px -1px 2px rgba(255,255,255,0.05);
}
.fly-mk-input:focus, .fly-cine-addform input:focus { background: #1c1c20; }
.fly-mk-input::placeholder, .fly-cine-addform input::placeholder { color: rgba(244,244,245,0.35); }

.fly-mk-chain { display: flex; flex-direction: column; gap: 7px; }
.fly-mk-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--fly-line);
    border-radius: 13px;
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.13s, background 0.13s;
}
.fly-mk-link:hover { border-color: rgba(255,255,255,0.3); }
.fly-mk-link.active { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.35); }
.fly-mk-link-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.fly-mk-link-thumb svg { width: 17px; height: 17px; color: var(--fly-dim); }
.fly-mk-link-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-mk-link-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fly-mk-link-txt b { font-size: 12.5px; font-weight: 600; }
.fly-mk-link-txt small {
    font-size: 11px;
    color: var(--fly-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly-mk-link.done .fly-mk-link-txt small { color: var(--fly-text); }
.fly-mk-link.done .fly-mk-link-thumb { background: rgba(255,255,255,0.14); }

.fly-marketbar[hidden] { display: none; }
/* Steps sit in one row, so the bar stays as low as every other bar */
.fly-marketbar .fly-pb-drop { min-width: 340px; max-height: 72vh; overflow-y: auto; scrollbar-width: none; }
.fly-marketbar .fly-pb-drop::-webkit-scrollbar { display: none; }
.fly-marketbar textarea:disabled { opacity: 0.5; cursor: not-allowed; }

.fly-cine-mode {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: center;
    background: linear-gradient(145deg, #2c2c2e, #1d1d1f);
    border: 1px solid var(--fly-line);
    border-radius: 16px;
    padding: 10px;
}
.fly-cine-mode button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 0;
    border-radius: 11px;
    color: var(--fly-dim);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 7px 12px;
    cursor: pointer;
}
.fly-cine-mode button svg { width: 17px; height: 17px; }
.fly-cine-mode button:hover { color: var(--fly-text); }
.fly-cine-mode button.active { background: rgba(255,255,255,0.1); color: var(--fly-text); }



.fly-cine-frameslot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 34px;
    border: 1px dashed rgba(255,255,255,0.25);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: var(--fly-dim);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
}
.fly-cine-frameslot:hover { border-color: rgba(255,255,255,0.45); color: var(--fly-text); }
.fly-cine-frameslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fly-cine-frameslot[hidden] { display: none; }

/* ---------- Stage ---------- */

.fly-stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.fly-canvas {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
}

.fly-empty { text-align: center; color: rgba(244,244,245,0.45); line-height: 1.7; }
.fly-empty-mark {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: 0.35em;
    margin-right: -0.35em;
    color: rgba(244,244,245,0.08);
    margin-bottom: 8px;
    user-select: none;
}

.fly-genbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.fly-genbox[hidden] { display: none; }
.fly-genbox canvas {
    border-radius: var(--fly-radius);
    border: 1px solid var(--fly-line);
    background: #232325;
    max-width: 100%;
}
.fly-genbox-label {
    color: var(--fly-dim);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    animation: flypulse 1.6s ease-in-out infinite;
}
@keyframes flypulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.fly-viewer { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 14px; align-items: center; justify-content: center; position: relative; }

.fly-viewer[hidden] { display: none; }

.fly-viewer-media { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.fly-viewer-media img,
.fly-viewer-media video {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--fly-radius);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
}
.fly-viewer-media .fly-grid4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 100%;
    max-width: min(100%, 760px);
}
.fly-viewer-media .fly-grid4 img { width: 100%; height: 100%; object-fit: cover; }

.fly-viewer-actions {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 6;
}

.fly-act {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(20, 20, 22, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fly-text);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.13s;
}
.fly-act svg { width: 16px; height: 16px; }
.fly-act:hover { border-color: rgba(255,255,255,0.4); background: rgba(20,20,22,0.85); }

.fly-act { position: relative; }
.fly-act::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: rgba(15, 15, 17, 0.95);
    border: 1px solid var(--fly-line);
    color: var(--fly-text);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}
.fly-act:hover::after { opacity: 1; }
.fly-act-danger { color: #fca5a5; border-color: rgba(220,38,38,0.4); }
.fly-act-danger:hover { border-color: rgba(220,38,38,0.8); }
.fly-act-confirm { background: var(--fly-red); border-color: var(--fly-red); color: #fff; }

/* ---------- Bottom prompt bar (image mode) ---------- */

.fly-promptbar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin: 0 auto 18px;
    width: min(980px, calc(100% - 40px));
    background:
        radial-gradient(120% 150% at 50% -30%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #37373a, #2d2d2f);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 24px;
    padding: 16px 16px 14px 16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 22px 60px rgba(0,0,0,0.45);
}
.fly-promptbar[hidden] { display: none; }

.fly-pb-plus {
    position: relative;
    width: 42px; height: 42px; min-width: 42px;
    border-radius: 12px;
    border: 1px dashed rgba(255,255,255,0.25);
    background: var(--fly-card);
    color: var(--fly-dim);
    font-size: 20px;
    cursor: pointer;
    overflow: hidden;
    align-self: flex-start;
}
.fly-pb-plus:hover { color: var(--fly-text); border-color: rgba(255,255,255,0.4); }
.fly-pb-plus img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.fly-pb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.fly-pb-toprow { display: flex; align-items: flex-start; gap: 12px; }
.fly-pb-toprow #pbPrompt { padding-top: 10px; }

/* Every bar in the studio writes into the same kind of field */
.fly-promptbar textarea {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--fly-text);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    resize: none;
    outline: none;
    line-height: 1.55;
    overflow-y: hidden;
}
.fly-promptbar textarea::placeholder { color: rgba(244,244,245,0.35); }
.fly-promptbar textarea:disabled { background: transparent; opacity: 0.45; }

.fly-pb-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.fly-pb-ctrl {
    border: 1px solid var(--fly-line);
    background: rgba(255,255,255,0.05);
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-pb-ctrl:hover { border-color: rgba(255,255,255,0.3); }

.fly-pb-controls .fly-enhance { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; }

#abModel { display: flex; align-items: center; gap: 7px; }
#abModel svg { width: 14px; height: 14px; }
#abModel .fly-pbd-brand { width: 15px; height: 15px; }

.fly-pb-drop-wrap { position: relative; }

.fly-pb-drop {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #333336;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    z-index: 90;
}
.fly-pb-drop[hidden] { display: none; }
.fly-pb-drop button {
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
}
.fly-pb-drop button:hover { background: rgba(255,255,255,0.07); }
.fly-pb-drop .fly-mp-item {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
}
.fly-pb-drop .fly-mp-item .fly-pbd-txt { min-width: 0; }
.fly-pb-drop .fly-mp-item small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.fly-promptbar .fly-pb-drop { min-width: 420px; max-height: 72vh; overflow-y: auto; scrollbar-width: none; }
.fly-cinebar .fly-pb-drop::-webkit-scrollbar { display: none; }
.fly-audiobar .fly-pb-drop { min-width: 250px; max-height: 70vh; scrollbar-width: none; }
.fly-audiobar .fly-pb-drop::-webkit-scrollbar { display: none; }
.fly-pb-drop button.selected { background: rgba(255,255,255,0.09); }
#pbRatioDrop button.selected { background: var(--fly-accent); color: #0b0b0d; }

#pbEngineDrop { min-width: 340px; max-height: 74vh; overflow-y: auto; scrollbar-width: none; }
#pbEngineDrop::-webkit-scrollbar { display: none; }
#pbEngine { display: flex; align-items: center; gap: 7px; }
#pbEngine svg { width: 14px; height: 14px; }
#pbEngineDrop button {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
}

.fly-pbd-search {
    background: #1e1e20;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 8px 12px;
    margin-bottom: 6px;
    outline: none;
}
.fly-pbd-search::placeholder { color: rgba(244,244,245,0.35); }

.fly-pbd-icon {
    width: 36px; height: 36px; min-width: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--fly-line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.fly-pbd-icon svg { width: 16px; height: 16px; }
.fly-pbd-brand { width: 18px; height: 18px; display: block; }
#pbEngine .fly-pbd-brand { width: 15px; height: 15px; }

.fly-pbd-txt { flex: 1; min-width: 0; }
.fly-pbd-txt b { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.fly-pbd-txt small { display: block; color: var(--fly-dim); font-size: 11px; font-weight: 400; margin-top: 1px; }

/* Tags are cut on a slant, lime plate, dark letters. The plate leans,
   the word inside stays upright. Same shape everywhere in the studio. */
.fly-pbd-badge {
    font-style: normal;
    display: inline-block;
    background: var(--fly-lime);
    color: #14140f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    padding: 3px 10px;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.fly-pbd-badge > span { display: inline; }
.fly-pbd-badge-top { background: var(--fly-lime); }

.fly-pbd-check { visibility: hidden; color: #fff; font-weight: 800; }
#pbEngineDrop button.selected .fly-pbd-check { visibility: visible; }

.fly-pb-count {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fly-text);
}
.fly-pb-count button {
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font-size: 15px;
    cursor: pointer;
    padding: 0 4px;
}
.fly-pb-count button:hover { color: var(--fly-text); }

.fly-pb-generate {
    border: 1px solid transparent;
    background: var(--fly-lime);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 24px rgba(211,243,75,0.22);
    color: #14140f;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    padding: 12px 28px;
    border-radius: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: stretch;
    max-height: 96px;
    min-width: 168px;
    transition: transform 0.1s, opacity 0.15s;
}
.fly-pb-spark svg { width: 17px; height: 17px; }
.fly-pb-generate:hover { transform: translateY(-1px); filter: brightness(1.05); }
.fly-pb-generate:disabled { opacity: 0.55; cursor: default; transform: none; }

.fly-panel.fly-hidden { display: none; }

/* ---------- Audio bar and equalizer ---------- */

.fly-audiobar[hidden] { display: none; }

.fly-ab-switch {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: center;
    background: linear-gradient(145deg, #2c2c2e, #1d1d1f);
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    padding: 14px 18px 14px 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 20px rgba(0,0,0,0.35);
}

.fly-ab-knob {
    position: relative;
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, #3f3f43, #232325 58%, #151517 100%);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.10),
        inset 0 -6px 12px rgba(0,0,0,0.6),
        0 6px 14px rgba(0,0,0,0.5);
}
.fly-ab-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 999px;
    background: #d3f34b;
    box-shadow: 0 0 8px rgba(211, 243, 75, 0.7);
    transform-origin: 0 50%;
    transform: rotate(0deg);
    transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.fly-ab-opts { display: flex; flex-direction: column; gap: 7px; }
.fly-ab-opts button {
    display: flex;
    align-items: center;
    gap: 9px;
    background: transparent;
    border: 0;
    color: var(--fly-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
    transition: color 0.15s;
}
.fly-ab-opts button:hover { color: var(--fly-text); }
.fly-ab-opts button.active { color: var(--fly-text); }
.fly-ab-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.2s;
}
.fly-ab-opts button.active .fly-ab-dot { background: #d3f34b; box-shadow: 0 0 8px rgba(211,243,75,0.8); }

.fly-ab-hint {
    align-self: center;
    color: rgba(244,244,245,0.45);
    font-size: 15px;
    padding-top: 6px;
}
.fly-ab-hint[hidden] { display: none; }

.fly-ab-lcd {
    background: #0c0c0d;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 10px;
    color: #f4f4f5;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 14px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(255,255,255,0.45);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
}

.fly-eq {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.fly-eq[hidden] { display: none; }
.fly-viewer, .fly-genbox, .fly-empty { position: relative; z-index: 1; }

/* ---------- My Projects ---------- */

.fly-projects-btn {
    position: relative;
    border: 1px solid var(--fly-line);
    background: var(--fly-panel);
    color: var(--fly-text);
    font: inherit;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.13s;
}
.fly-projects-btn:hover { border-color: rgba(255,255,255,0.35); }

.fly-jobs-badge[hidden] { display: none; }
.fly-jobs-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--fly-red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.fly-projects {
    position: fixed;
    top: 62px; left: 0; right: 0; bottom: 0;
    background: var(--fly-bg);
    z-index: 60;
    display: flex;
    flex-direction: column;
}
.fly-projects[hidden] { display: none; }

.fly-projects-head {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--fly-line);
}
.fly-projects-head h2 { font-size: 18px; font-weight: 700; }

.fly-projects-close {
    margin-left: auto;
    border: 1px solid var(--fly-line);
    background: var(--fly-panel);
    color: var(--fly-text);
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.fly-projects-close:hover { border-color: rgba(255,255,255,0.35); }

.fly-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 20px 24px;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.fly-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    cursor: pointer;
    transition: border-color 0.13s;
}
.fly-cell:hover { border-color: rgba(255,255,255,0.35); }
.fly-cell.selected { border-color: var(--fly-accent); }
.fly-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fly-cell .fly-cell-type {
    position: absolute;
    left: 5px; bottom: 5px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    pointer-events: none;
}

.fly-cell.pending { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; }
.fly-cell.pending .fly-spin {
    width: 22px; height: 22px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: flyspin 0.9s linear infinite;
}
.fly-cell.pending span { font-size: 10px; color: var(--fly-dim); text-transform: uppercase; letter-spacing: 0.08em; }

@keyframes flyspin { to { transform: rotate(360deg); } }

/* Audio assets */
.fly-cell-audio { display: flex; align-items: center; justify-content: center; }
.fly-audio-mark { font-size: 30px; color: var(--fly-dim); user-select: none; }
.fly-audio-big { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fly-audio-big .fly-audio-mark { font-size: 72px; }
.fly-audio-big audio { width: min(560px, 80vw); }
.fly-slot-file .fly-slot-hint { display: block !important; color: var(--fly-text); font-weight: 600; }
.fly-slot-file .fly-slot-img { display: none !important; }

/* ---------- Mobile ---------- */

@media (max-width: 1280px) {
    .fly-links { display: none; }
}

@media (max-width: 900px) {
    html, body.fly-body { overflow: auto; }
    .fly-topbar { padding: 0 10px; gap: 8px; }
    .fly-logo { font-size: 24px; }
    .fly-app-name, .fly-topbar-sep { display: none; }
    .fly-tab { padding: 7px 12px; }
    .fly-main { position: static; margin-top: 56px; flex-direction: column; height: auto; }
    .fly-panel { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--fly-line); overflow: visible; }
    .fly-canvas { min-height: 320px; }
    .fly-presets { grid-template-columns: 1fr 1fr 1fr; }
}

/* ---------- Community and Originals ---------- */

html:has(body.fly-showcase-body), body.fly-showcase-body { overflow-y: auto; height: auto; min-height: 100%; }
body.fly-noscroll { overflow: hidden; }

.fly-showcase-nav { display: flex; align-items: center; gap: 6px; }
.fly-showcase-link {
    color: var(--fly-dim);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
}
.fly-showcase-link:hover { color: var(--fly-text); background: rgba(255,255,255,0.06); }
.fly-showcase-link.active { color: var(--fly-text); background: rgba(255,255,255,0.11); }

.fly-showcase {
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 32px 80px;
}
.fly-showcase-head { margin-bottom: 26px; }
.fly-showcase-head h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.6px; }
.fly-showcase-head p { margin-top: 8px; color: var(--fly-dim); font-size: 15px; max-width: 620px; }

.fly-showcase-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 22px;
}
.fly-showcase-cta {
    margin-left: auto;
    background: var(--fly-text);
    color: #17171a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
}
.fly-showcase-cta:hover { opacity: 0.9; }

.fly-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

.fly-sc-card {
    position: relative;
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    background: var(--fly-card);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 3 / 4;
    transition: border-color 0.14s, transform 0.14s;
}
.fly-sc-card:hover { border-color: rgba(255,255,255,0.32); transform: translateY(-2px); }
.fly-sc-card img, .fly-sc-card video { width: 100%; height: 100%; object-fit: cover; display: block; }

.fly-sc-meta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 26px 12px 11px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.78));
}
.fly-sc-meta b { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-sc-meta small { font-size: 11.5px; color: rgba(255,255,255,0.72); }

.fly-sc-likes {
    position: absolute;
    top: 9px; right: 9px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.55);
    padding: 4px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.fly-sc-likes svg { width: 13px; height: 13px; }
.fly-sc-badge, .fly-sc-star {
    position: absolute;
    top: 9px; left: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    backdrop-filter: blur(4px);
}
.fly-sc-badge svg, .fly-sc-star svg { width: 13px; height: 13px; }
.fly-sc-star { top: 41px; }

.fly-showcase-empty { color: var(--fly-dim); font-size: 15px; padding: 40px 0; }
.fly-showcase-empty[hidden] { display: none; }
.fly-showcase-more { display: flex; justify-content: center; padding-top: 28px; }
.fly-showcase-morebtn {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-showcase-morebtn:hover { border-color: rgba(255,255,255,0.3); }
.fly-showcase-morebtn[hidden] { display: none; }

/* Lightbox */
.fly-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: rgba(12,12,14,0.86);
    backdrop-filter: blur(10px);
}
.fly-lightbox[hidden] { display: none; }
.fly-lb-panel {
    display: flex;
    gap: 0;
    width: min(1180px, 94vw);
    max-height: 86vh;
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    overflow: hidden;
}
.fly-lb-media {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #131315;
    min-width: 0;
}
.fly-lb-media img, .fly-lb-media video { max-width: 100%; max-height: 86vh; display: block; }
.fly-lb-side {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    border-left: 1px solid var(--fly-line);
}
.fly-lb-side h2 { font-size: 19px; font-weight: 700; }
.fly-lb-author { color: var(--fly-dim); font-size: 13px; }
.fly-lb-kind { color: var(--fly-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.fly-lb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fly-lb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    text-decoration: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-lb-btn:hover { border-color: rgba(255,255,255,0.3); }
.fly-lb-btn svg { width: 15px; height: 15px; }
.fly-lb-btn.liked { background: var(--fly-text); color: #17171a; }
.fly-lb-btn-danger { color: #f87171; }
.fly-lb-btn-danger[hidden] { display: none; }
.fly-lb-close {
    position: absolute;
    top: 18px; right: 22px;
    width: 38px; height: 38px;
    border: 1px solid var(--fly-line);
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: var(--fly-text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.fly-lb-close:hover { border-color: rgba(255,255,255,0.35); }

@media (max-width: 860px) {
    .fly-showcase { padding: 84px 18px 60px; }
    .fly-showcase-head h1 { font-size: 28px; }
    .fly-showcase-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; }
    .fly-lb-panel { flex-direction: column; max-height: 88vh; overflow-y: auto; }
    .fly-lb-side { flex: 1 1 auto; border-left: 0; border-top: 1px solid var(--fly-line); }
}

/* Share popover inside the studio viewer */
.fly-share-pop {
    position: absolute;
    right: 68px;
    bottom: 22px;
    width: 290px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px;
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.38);
    z-index: 30;
}
.fly-share-pop[hidden] { display: none; }
.fly-share-pop-row { display: flex; gap: 8px; }
.fly-share-go, .fly-share-cancel {
    flex: 1;
    border: 1px solid var(--fly-line);
    border-radius: 999px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 12px;
    cursor: pointer;
}
.fly-share-go { background: var(--fly-text); color: #17171a; border-color: transparent; }
.fly-share-cancel { background: var(--fly-card); color: var(--fly-text); }
.fly-share-go:hover { opacity: 0.9; }
.fly-share-cancel:hover { border-color: rgba(255,255,255,0.3); }
.fly-act.active { background: rgba(255,255,255,0.18); }

/* ---------- Explainer ---------- */

.fly-exrail { width: 320px; min-width: 320px; }
.fly-ex-scenes { display: flex; flex-direction: column; gap: 10px; }
.fly-ex-scene {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    background: var(--fly-card);
    padding: 11px;
}
.fly-ex-scene-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fly-ex-scene-head b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-ex-state {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fly-dim);
    white-space: nowrap;
}
.fly-ex-thumb { width: 100%; height: 96px; object-fit: cover; border-radius: 10px; display: block; }
.fly-ex-field {
    background: #202024;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--fly-text);
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.45), inset 2px 2px 5px rgba(0,0,0,0.55), inset -1px -1px 2px rgba(255,255,255,0.05);
}
.fly-ex-field:focus { background: #1c1c20; }
.fly-ex-btns { display: flex; gap: 7px; }
.fly-ex-btn {
    flex: 1;
    border: 1px solid var(--fly-line);
    background: linear-gradient(180deg, #37373a, #2e2e30);
    color: var(--fly-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-ex-btn:hover { border-color: rgba(255,255,255,0.3); }

.fly-exbar[hidden] { display: none; }
.fly-exbar .fly-pb-drop { min-width: 240px; max-height: 70vh; overflow-y: auto; scrollbar-width: none; }
.fly-exbar .fly-pb-drop::-webkit-scrollbar { display: none; }

/* ---------- Assistant chat ---------- */

/* The chat takes the place of the canvas, it never covers the writing bar */
.fly-chat {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--fly-bg);
}
.fly-canvas[hidden] { display: none; }
.fly-chat[hidden] { display: none; }
.fly-chat-thread {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px 18px;
    max-width: 860px;
    width: 100%;
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fly-chat-msg { display: flex; flex-direction: column; gap: 9px; max-width: 88%; }
.fly-chat-msg p { font-size: 14px; line-height: 1.55; }
.fly-chat-bot { align-self: flex-start; }
.fly-chat-user {
    align-self: flex-end;
    background: var(--fly-card);
    border: 1px solid var(--fly-line);
    border-radius: 16px;
    padding: 11px 15px;
}
.fly-chat-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--fly-line);
    border-radius: 16px;
    background: var(--fly-card);
    padding: 14px 16px;
    max-width: 460px;
}
.fly-chat-card b { font-size: 14px; font-weight: 600; }
.fly-chat-card small { font-size: 11.5px; color: var(--fly-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.fly-chat-card-prompt { font-size: 12.5px; color: var(--fly-dim); line-height: 1.5; margin-top: 4px; }
.fly-chat-go {
    align-self: flex-start;
    margin-top: 9px;
    border: 0;
    border-radius: 999px;
    background: var(--fly-text);
    color: #17171a;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    cursor: pointer;
}
.fly-chat-go:hover { opacity: 0.9; }
.fly-chat-go:disabled { opacity: 0.55; cursor: default; }
.fly-chat-result img, .fly-chat-result video { max-width: 340px; border-radius: 14px; display: block; }
.fly-chat-result audio { width: 300px; }
.fly-chatbar[hidden] { display: none; }

/* Assistant: the opening screen before the first message */
.fly-chat-intro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 30px 24px;
    max-width: 760px;
    margin: 0 auto;
}
.fly-chat-intro[hidden] { display: none; }
.fly-chat-mark {
    width: 54px; height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--fly-line);
}
.fly-chat-mark svg { width: 22px; height: 22px; }
.fly-chat-intro h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; }
.fly-chat-intro > p { color: var(--fly-dim); font-size: 14px; line-height: 1.6; max-width: 560px; }
.fly-chat-seeds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 10px;
}
.fly-chat-seeds button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    padding: 13px 15px;
    cursor: pointer;
    transition: border-color 0.13s, transform 0.13s;
}
.fly-chat-seeds button:hover { border-color: rgba(255,255,255,0.32); transform: translateY(-1px); }
.fly-chat-seeds b { font-size: 13.5px; font-weight: 600; }
.fly-chat-seeds small { font-size: 11.5px; color: var(--fly-dim); }
.fly-chat-thread[hidden] { display: none; }

/* Assistant demo: the three steps from one sentence to a finished clip, nothing here generates */
.fly-chat-intro:has(.fly-chat-demo) { max-width: 1060px; }
.fly-chat-demo { width: 100%; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--fly-line); }
.fly-cd-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F4F4F5; margin-bottom: 14px; }
.fly-cd-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.fly-cd-step { display: grid; grid-template-rows: 1fr auto; gap: 10px; text-align: left; height: 100%; }
.fly-cd-note { font-size: 12.5px; line-height: 1.55; color: #F4F4F5; margin: 0; text-align: center; }
.fly-cd-bubble { display: flex; align-items: center; max-width: 100%; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,0.09); border: 1px solid var(--fly-line); font-size: 13px; line-height: 1.5; }
.fly-cd-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 14px; border-radius: 16px; border: 1px solid var(--fly-line); background: var(--fly-card); }
.fly-cd-card b { font-size: 13.5px; font-weight: 600; }
.fly-cd-meta { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #F4F4F5; opacity: .82; }
.fly-cd-prompt { font-size: 12.5px; line-height: 1.5; color: #F4F4F5; opacity: .9; }
.fly-cd-pill { align-self: flex-start; margin-top: 4px; padding: 6px 16px; border-radius: 999px; background: #FFFFFF; color: #18181B; font-size: 12.5px; font-weight: 600; }
.fly-cd-video { width: 100%; height: 100%; min-height: 200px; object-fit: cover; border-radius: 16px; border: 1px solid var(--fly-line); background: #000; display: block; }
@media (max-width: 860px) {
    .fly-cd-flow { grid-template-columns: 1fr; }
    .fly-cd-video { height: 300px; }
}

@media (max-width: 720px) {
    .fly-chat-seeds { grid-template-columns: 1fr; }
}

/* One line of guidance under the controls of any bar */
.fly-bar-hint { font-size: 12px; color: var(--fly-dim); line-height: 1.5; }
.fly-bar-hint:empty { display: none; }
.fly-promptbar textarea[hidden] { display: none; }
.fly-pb-plus[hidden] { display: none; }
.fly-pb-drop-wrap[hidden] { display: none; }

/* ---------- Simple content pages: contests, academy, plugins, mcp ---------- */

.fly-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.fly-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    background: var(--fly-card);
    padding: 20px;
}
.fly-card h2 { font-size: 18px; font-weight: 700; }
.fly-card p { font-size: 13.5px; line-height: 1.6; color: var(--fly-dim); }
.fly-card-note { font-size: 12px; color: var(--fly-dim); opacity: 0.85; }
.fly-card-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--fly-line);
}
.fly-card-icon svg { width: 17px; height: 17px; }

.fly-tagline {
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fly-dim);
    background: rgba(255,255,255,0.09);
    padding: 4px 13px;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.fly-tagline > span { display: inline; }
.fly-tagline-live { color: #14140f; background: var(--fly-lime); border-color: transparent; }

.fly-card-facts { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 4px; }
.fly-card-facts dt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fly-dim); }
.fly-card-facts dd { font-size: 13.5px; font-weight: 600; margin-top: 2px; }

.fly-card-list { display: flex; flex-direction: column; gap: 6px; list-style: none; }
.fly-card-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--fly-text); }
.fly-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fly-dim); flex: 0 0 auto; }

.fly-card-btn {
    align-self: flex-start;
    margin-top: 6px;
    background: var(--fly-text);
    color: #17171a;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.fly-card-btn:hover { opacity: 0.9; }
.fly-card-btn-quiet { background: var(--fly-card); color: var(--fly-text); border: 1px solid var(--fly-line); }
.fly-card-btn-off { background: rgba(255,255,255,0.07); color: var(--fly-dim); cursor: default; font-weight: 600; }

.fly-block {
    display: flex;
    flex-direction: column;
    gap: 11px;
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    background: var(--fly-card);
    padding: 24px;
    margin-top: 18px;
}
.fly-block h2 { font-size: 19px; font-weight: 700; }
.fly-block p { font-size: 13.5px; line-height: 1.6; color: var(--fly-dim); }
.fly-block-note { font-size: 12.5px; opacity: 0.85; }
.fly-block-links { display: flex; flex-wrap: wrap; gap: 10px; }
.fly-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.fly-two .fly-block { margin-top: 0; }

.fly-steps { display: flex; flex-direction: column; gap: 9px; padding-left: 20px; }
.fly-steps li { font-size: 13.5px; line-height: 1.6; color: var(--fly-dim); }
.fly-steps b { color: var(--fly-text); font-weight: 600; }

.fly-code {
    background: #1c1c20;
    border-radius: 12px;
    padding: 15px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.65;
    color: #e6e6ea;
    overflow-x: auto;
    white-space: pre;
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.45), inset 2px 2px 5px rgba(0,0,0,0.55);
}

.fly-tool-rows { display: flex; flex-direction: column; gap: 2px; }
.fly-tool-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid var(--fly-line);
}
.fly-tool-row:last-child { border-bottom: 0; }
.fly-tool-row code {
    flex: 0 0 120px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--fly-text);
}
.fly-tool-row span { font-size: 13px; color: var(--fly-dim); }

/* ---------- Canvas ---------- */

.fly-cvrail { width: 300px; min-width: 300px; }
.fly-cv-palette { display: flex; flex-direction: column; gap: 6px; }
.fly-cv-pal {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 1px solid var(--fly-line);
    border-radius: 13px;
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    padding: 9px 10px;
    cursor: pointer;
}
.fly-cv-pal:hover { border-color: rgba(255,255,255,0.3); }
.fly-cv-pal-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--fly-line);
    flex: 0 0 auto;
}
.fly-cv-pal-icon svg { width: 15px; height: 15px; }
.fly-cv-pal-txt b { display: block; font-size: 12.5px; font-weight: 600; }
.fly-cv-pal-txt small { display: block; font-size: 11px; color: var(--fly-dim); }

.fly-cv-inspect { display: flex; flex-direction: column; gap: 12px; }
.fly-cv-inspect-kind { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fly-dim); }
.fly-cv-select {
    background: #202024;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 9px 10px;
    outline: none;
    box-shadow: inset 0 3px 0 rgba(0,0,0,0.45), inset 2px 2px 5px rgba(0,0,0,0.55);
}

.fly-cvstage { padding: 0; }
.fly-cv-board {
    position: relative;
    flex: 1;
    margin: 16px 16px 0;
    border: 1px solid var(--fly-line);
    border-radius: 18px;
    background:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1px, transparent 0) 0 0 / 26px 26px,
        var(--fly-panel);
    overflow: auto;
}
.fly-cv-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fly-cv-wire { fill: none; stroke: rgba(255,255,255,0.4); stroke-width: 2; }
.fly-cv-wire-live { stroke: var(--fly-text); stroke-dasharray: 5 4; }

.fly-cv-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    pointer-events: none;
}
.fly-cv-empty[hidden] { display: none; }
.fly-cv-empty b { font-size: 16px; font-weight: 700; }
.fly-cv-empty span { font-size: 13px; color: var(--fly-dim); max-width: 360px; }

.fly-cv-node {
    position: absolute;
    width: 200px;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    background: var(--fly-card);
    padding: 11px 12px;
    cursor: grab;
    user-select: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.32);
}
.fly-cv-node.selected { border-color: rgba(255,255,255,0.45); }
.fly-cv-node-head { display: flex; align-items: center; gap: 8px; }
.fly-cv-node-head b { font-size: 13px; font-weight: 600; flex: 1; }
.fly-cv-node-head svg { width: 15px; height: 15px; }
.fly-cv-node-sum { font-size: 11.5px; color: var(--fly-dim); margin-top: 6px; line-height: 1.45; }
.fly-cv-del {
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.fly-cv-del:hover { color: var(--fly-text); }

.fly-cv-port {
    position: absolute;
    top: 50%;
    width: 13px; height: 13px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--fly-panel);
    border: 2px solid rgba(255,255,255,0.5);
}
.fly-cv-in { left: -7px; }
.fly-cv-out { right: -7px; cursor: crosshair; }
.fly-cv-out:hover { background: var(--fly-text); }

.fly-cvbar { align-items: center; }

/* ---------- Shorts Studio ---------- */

.fly-shrail { width: 290px; min-width: 290px; }
.fly-sh-pool { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fly-sh-pool-cell {
    position: relative;
    border: 1px solid var(--fly-line);
    border-radius: 11px;
    background: var(--fly-card);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}
.fly-sh-pool-cell img { width: 100%; height: 88px; object-fit: cover; display: block; }
.fly-sh-pool-cell span {
    position: absolute;
    top: 5px; left: 5px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 2px 7px;
    border-radius: 999px;
}
.fly-sh-pool-cell:hover { border-color: rgba(255,255,255,0.35); }

.fly-sh-stage { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 0; }
.fly-sh-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: 0;
}
/* Shorts demo: the three steps, shown next to the phone while the timeline is still empty */
.fly-sh-demo { width: 100%; max-width: 900px; padding: 6px 22px 0; align-self: center; }
.fly-sh-preview:has(#shEmpty[hidden]) .fly-sh-demo { display: none; }
.fly-sh-demo .fly-cd-note { min-height: 3.2em; }
.fly-shd-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; }
.fly-shd-strip img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; border: 1px solid var(--fly-line); display: block; }
.fly-sh-phone {
    position: relative;
    height: min(56vh, 620px);
    aspect-ratio: 9 / 16;
    border: 1px solid var(--fly-line);
    border-radius: 26px;
    background: #131315;
    overflow: hidden;
}
.fly-sh-preview.square .fly-sh-phone { aspect-ratio: 1 / 1; height: min(46vh, 520px); }
.fly-sh-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-sh-caption {
    position: absolute;
    left: 14px; right: 14px; bottom: 26px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.75);
    line-height: 1.35;
}
.fly-sh-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 24px;
}
.fly-sh-empty[hidden] { display: none; }
.fly-sh-empty b { font-size: 15px; font-weight: 700; }
.fly-sh-empty span { font-size: 12.5px; color: var(--fly-dim); }

.fly-sh-timeline {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    min-height: 96px;
}
.fly-sh-piece {
    position: relative;
    flex: 0 0 auto;
    width: 82px;
    border: 1px solid var(--fly-line);
    border-radius: 11px;
    overflow: hidden;
    background: var(--fly-card);
    cursor: pointer;
}
.fly-sh-piece.selected { border-color: rgba(255,255,255,0.5); }
.fly-sh-piece img { width: 100%; height: 82px; object-fit: cover; display: block; }
.fly-sh-piece-no {
    position: absolute;
    top: 4px; left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 1px 6px;
    border-radius: 999px;
}
.fly-sh-piece-cap {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    font-size: 9.5px;
    color: #fff;
    background: rgba(0,0,0,0.62);
    padding: 3px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly-sh-piece-btns { display: flex; }
.fly-sh-piece-btns button {
    flex: 1;
    border: 0;
    border-top: 1px solid var(--fly-line);
    background: rgba(255,255,255,0.05);
    color: var(--fly-dim);
    font: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 5px 0;
    cursor: pointer;
}
.fly-sh-piece-btns button:hover { color: var(--fly-text); background: rgba(255,255,255,0.1); }

#shFormatDrop button { display: flex; flex-direction: column; gap: 1px; text-align: left; }


.fly-card-contest { justify-content: flex-start; }
.fly-shbar { align-items: center; }

/* ---------- Cinema: director panel above the writing row ---------- */

.fly-director {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.fly-director-name {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fly-dim);
    white-space: nowrap;
}
.fly-director-name svg { width: 14px; height: 14px; }
.fly-director-cell { min-width: 132px; }
.fly-director-cell[hidden] { display: none; }
.fly-director-btn {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    background: linear-gradient(180deg, #37373a, #2d2d2f);
    color: var(--fly-text);
    font: inherit;
    padding: 7px 12px;
    cursor: pointer;
    text-align: left;
}
.fly-director-btn:hover { border-color: rgba(255,255,255,0.3); }
.fly-director-btn small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fly-dim);
}
.fly-director-btn b {
    font-size: 14px;
    font-weight: 600;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Model chip carries the brand mark, same as the image bar */
.fly-pb-ctrl-model { display: inline-flex; align-items: center; gap: 8px; }
.fly-pb-ctrl-model img { width: 15px; height: 15px; display: block; }

/* Frame slots read as real drop targets, not as tiny chips */
.fly-cinebar .fly-cine-frameslot {
    flex-direction: column;
    gap: 3px;
    min-width: 108px;
    height: 62px;
    border-radius: 14px;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    padding: 6px 10px;
}
.fly-frameslot-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: var(--fly-text);
    font-size: 14px;
    line-height: 1;
}
.fly-cine-frameslot.filled .fly-frameslot-plus { display: none; }

/* The one button that spends points wears the studio accent */
/* Buttons that only check something stay quiet, the accent means spending */
.fly-pb-generate-quiet {
    background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.26);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(0,0,0,0.32);
}
.fly-pb-generate-quiet svg { color: #fff; }
.fly-pb-generate-quiet:hover { filter: none; background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0.1)); }

/* The accent lives on Generate everywhere, nothing else wears it */
.fly-cost { color: rgba(20,20,15,0.72); }
.fly-pb-generate svg, .fly-generate svg { color: #14140f; }


/* ---------- Projects and favorites ---------- */

.fly-projects-body { display: flex; gap: 18px; align-items: flex-start; min-height: 0; }
.fly-projects-side {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-right: 16px;
    border-right: 1px solid var(--fly-line);
    align-self: stretch;
    overflow-y: auto;
    scrollbar-width: thin;
}
.fly-proj-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--fly-text);
    font: inherit;
    font-size: 13.5px;
    padding: 9px 11px;
    cursor: pointer;
    text-align: left;
}
.fly-proj-item:hover { background: rgba(255,255,255,0.06); }
.fly-proj-item.active { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.18); }
.fly-proj-icon { display: flex; align-items: center; justify-content: center; width: 18px; }
.fly-proj-icon svg { width: 16px; height: 16px; }
.fly-proj-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-proj-count { font-size: 11.5px; color: var(--fly-dim); font-weight: 600; }
.fly-proj-del {
    display: none;
    font-size: 16px;
    line-height: 1;
    color: var(--fly-dim);
    padding: 0 2px;
}
.fly-proj-item:hover .fly-proj-del { display: inline; }
.fly-proj-item:hover .fly-proj-count { display: none; }
.fly-proj-del:hover { color: var(--fly-text); }

.fly-proj-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    padding: 0 4px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fly-dim);
}
.fly-proj-head button {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-proj-head button:hover { border-color: rgba(255,255,255,0.3); }
.fly-proj-newform { display: flex; gap: 6px; padding: 4px 0 8px; }
.fly-proj-newform[hidden] { display: none; }
.fly-proj-newform input { flex: 1; min-width: 0; }
.fly-proj-list { display: flex; flex-direction: column; gap: 4px; }

.fly-projects-body .fly-grid { flex: 1; min-width: 0; }

/* A favourite carries a small heart in the corner of its tile */
.fly-cell.fav::after {
    content: '';
    position: absolute;
    top: 6px; left: 6px;
    width: 15px; height: 15px;
    background: var(--fly-lime);
    clip-path: path('M7.5 13.5 1.8 8.2A3.6 3.6 0 0 1 7.5 3.6a3.6 3.6 0 0 1 5.7 4.6z');
}
.fly-act.active { background: var(--fly-lime); border-color: transparent; color: #14140f; }
.fly-act.active svg { color: #14140f; }

.fly-file-pop { width: 300px; }
.fly-file-list { display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.fly-file-opt {
    border: 1px solid var(--fly-line);
    border-radius: 10px;
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    padding: 8px 11px;
    text-align: left;
    cursor: pointer;
}
.fly-file-opt:hover { border-color: rgba(255,255,255,0.3); }
.fly-file-opt.active { background: var(--fly-lime); color: #14140f; border-color: transparent; font-weight: 600; }
.fly-file-pop .fly-share-pop-row input { flex: 1; min-width: 0; }




/* ---------- Marketing bar ----------
   Same shape as every other bar: writing row, chips under it, button on the right.
   The step lives in the chip row and opens its own list. */
.fly-pb-ctrl-step { font-weight: 700; }
.fly-marketbar .fly-pb-drop { min-width: 300px; max-height: 70vh; overflow-y: auto; scrollbar-width: none; }
.fly-marketbar .fly-pb-drop::-webkit-scrollbar { display: none; }
.fly-marketbar .fly-pb-ctrl { display: inline-flex; align-items: center; gap: 7px; }
.fly-marketbar .fly-pb-ctrl svg { width: 14px; height: 14px; }
.fly-marketbar .fly-pb-ctrl img { width: 15px; height: 15px; display: block; }
/* The whole marketing bar sits 20px taller */
.fly-marketbar { padding-top: 26px; padding-bottom: 24px; }
/* The chain icons were rendering at their native size and getting clipped */
.fly-mk-link-thumb svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    stroke-width: 1.6;
    color: var(--fly-dim);
}
.fly-mk-link.done .fly-mk-link-thumb svg { color: var(--fly-text); }
/* display:block on an image beats the hidden attribute, so say it out loud once */
img[hidden], video[hidden], canvas[hidden] { display: none !important; }
/* Same trap as the images: a display rule must not beat the hidden attribute */
.fly-pb-ctrl[hidden], .fly-pb-drop-wrap[hidden], .fly-cine-frameslot[hidden] { display: none !important; }

/* Chips a touch tighter so a step never spills into a second row */
.fly-marketbar .fly-pb-ctrl { padding: 7px 12px; font-size: 12.5px; }
.fly-marketbar .fly-pb-controls { gap: 7px; flex-wrap: wrap; }
/* Chips keep their words on one line and never get squeezed */
.fly-marketbar .fly-pb-ctrl { white-space: nowrap; flex: 0 0 auto; }
.fly-marketbar .fly-pb-drop-wrap { flex: 0 0 auto; }

/* The marketing bar carries more chips than the others, so it gets more room */
.fly-marketbar { width: min(1240px, calc(100% - 32px)); }
/* An uploaded picture is shown whole, never cropped to fill the slot */
.fly-slot-img { object-fit: contain; background: #232325; }
/* Campaign slots stand tall, a product or a face is a portrait, not a strip */
/* Tall enough for a portrait, short enough that the chain stays in view */
.fly-marketrail .fly-slot { height: 210px; }
.fly-marketrail #mkTalentSlot { height: 150px; }

/* ---------- One navigation, two rows ----------
   Row one is the same on every page. Row two shows the tools of the
   section you are in, inside the window. */

.fly-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 999px;
    padding: 4px 6px;
    max-width: calc(100vw - 620px);
    overflow-x: auto;
    scrollbar-width: none;
}
.fly-nav::-webkit-scrollbar { display: none; }

.fly-nav-link {
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.13s, background 0.13s;
}
.fly-nav-link:hover { color: var(--fly-text); background: rgba(255,255,255,0.07); }
.fly-nav-link.active { background: var(--fly-accent); color: #0b0b0d; }
.fly-nav-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--fly-line); margin: 0 6px; }

.fly-subnav {
    position: fixed;
    top: 62px; left: 0; right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 18px;
    background: rgba(36, 36, 38, 0.96);
    border-bottom: 1px solid var(--fly-line);
    z-index: 40;
    overflow-x: auto;
    scrollbar-width: none;
}
.fly-subnav::-webkit-scrollbar { display: none; }
.fly-subnav-group { display: none; align-items: center; gap: 4px; }
.fly-subnav-group.active { display: flex; }
.fly-subnav-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-subnav-item svg { width: 15px; height: 15px; }
.fly-subnav-item:hover { color: var(--fly-text); background: rgba(255,255,255,0.06); }
.fly-subnav-item.active { color: var(--fly-text); background: rgba(255,255,255,0.12); }

/* The workspace starts under both rows now */
.fly-main { top: 108px; }

@media (max-width: 1500px) {
    .fly-nav { max-width: calc(100vw - 480px); }
    .fly-nav-link { padding: 7px 11px; font-size: 13px; }
}


/* Pages without a second row keep the old top offset */
body.fly-showcase-body .fly-showcase { padding-top: 96px; }
.canvas-page .fly-main, .shorts-page .fly-main { top: 62px; }

.fly-nav-tool { font-weight: 600; }

.fly-subnav[hidden] { display: none; }

/* The Image entry in the top bar opens a two column menu: features and models.
   It must sit above .fly-main (z-index 41) and the top bar (z-index 50). */
.fly-mega {
    position: fixed;
    top: 66px;
    left: 200px;
    display: flex;
    gap: 6px;
    background: #232325;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 10px;
    z-index: 95;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.fly-mega[hidden] { display: none; }
.fly-mega-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 280px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: none;
}
.fly-mega-col::-webkit-scrollbar { display: none; }
.fly-mega-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fly-dim);
    padding: 6px 12px 4px;
}
.fly-mega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.fly-mega-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--fly-text); }
.fly-mega-item.active { background: rgba(255, 255, 255, 0.1); color: var(--fly-text); }
.fly-mega-item svg { width: 17px; height: 17px; flex: none; }
.fly-mega-item .fly-pbd-brand { width: 17px; height: 17px; flex: none; }
.fly-dd-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fly-dd-name { font-size: 13px; font-weight: 600; color: var(--fly-text); }
.fly-dd-name .fly-pbd-badge { margin-left: 6px; }
.fly-dd-desc { font-size: 11.5px; color: var(--fly-dim); }

/* Inpaint mask editor keeps the picture inside the frame */
.fly-mask-stage { display: flex; justify-content: center; background: #18181a; }
.fly-mask-stage canvas { max-width: 100%; max-height: 62vh; cursor: crosshair; display: block; }
body.fly-nosub .fly-main { top: 62px; }
/* The bar is pinned to the middle of the window, so it never shifts
   when a page has a rail, a scrollbar, or a longer right side */
.fly-topbar { position: fixed; }
.fly-topbar .fly-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}
.fly-topbar-left, .fly-topbar-right { position: relative; z-index: 1; }
html { scrollbar-gutter: stable; }
.fly-sh-headbtns { display: inline-flex; gap: 6px; }
.fly-sh-pool-cell video { width: 100%; height: 88px; object-fit: cover; display: block; }

/* ---------- Shorts Studio: everything you set lives in the left panel ---------- */

.fly-shpanel {
    width: 330px;
    min-width: 330px;
    background: var(--fly-panel);
    border-right: 1px solid rgba(255,255,255,0.12);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    padding: 20px 16px 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.fly-shpanel::-webkit-scrollbar { width: 4px; }
.fly-shpanel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }

.fly-shpanel-title {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--fly-lime);
}

.fly-shblock { display: flex; flex-direction: column; gap: 9px; }
.fly-shblock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fly-shrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fly-sh-value { font-size: 13px; font-weight: 600; }

.fly-sh-change {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-sh-change:hover { border-color: rgba(255,255,255,0.3); }
.fly-sh-change svg { width: 13px; height: 13px; }

.fly-sh-styleview {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    background: var(--fly-card);
    padding: 13px 15px;
}
.fly-sh-styleview b { font-size: 14px; font-weight: 700; }
.fly-sh-styleview small { font-size: 12px; color: var(--fly-dim); }

.fly-sh-stylelist { display: flex; flex-direction: column; gap: 5px; }
.fly-sh-stylelist[hidden] { display: none; }
.fly-sh-styleopt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    background: transparent;
    color: var(--fly-text);
    font: inherit;
    padding: 9px 12px;
    cursor: pointer;
}
.fly-sh-styleopt:hover { border-color: rgba(255,255,255,0.3); }
.fly-sh-styleopt.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.fly-sh-styleopt b { font-size: 13px; font-weight: 600; }
.fly-sh-styleopt small { font-size: 11.5px; color: var(--fly-dim); }

.fly-sh-ratio {
    display: flex;
    gap: 6px;
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    background: var(--fly-card);
    padding: 5px;
}
.fly-sh-ratio button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 9px 6px;
    cursor: pointer;
}
.fly-sh-ratio button svg { width: 16px; height: 16px; }
.fly-sh-ratio button:hover { color: var(--fly-text); }
.fly-sh-ratio button.active { background: rgba(255,255,255,0.12); color: var(--fly-text); }

.fly-shgen { width: 100%; justify-content: center; min-width: 0; max-height: none; padding: 14px 20px; }
.fly-sh-clear {
    align-self: flex-start;
    border: 1px solid var(--fly-line);
    background: transparent;
    color: var(--fly-dim);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-sh-clear:hover { color: var(--fly-text); border-color: rgba(255,255,255,0.3); }

.fly-shgallery { border-top: 1px solid var(--fly-line); padding-top: 16px; }

/* Caption bar sits under the timeline, in the middle column */
.fly-sh-captionbar {
    margin: 0 16px 16px;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 18px;
    background: linear-gradient(180deg, #37373a, #2d2d2f);
    padding: 14px 18px;
}
.fly-sh-captionbar textarea {
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--fly-text);
    font: inherit;
    font-size: 15px;
    resize: none;
    outline: none;
    line-height: 1.5;
}
.fly-sh-captionbar textarea::placeholder { color: rgba(244,244,245,0.35); }

/* Caption styles, what the preview shows */
.fly-sh-caption-bold {
    background: rgba(0,0,0,0.72);
    padding: 6px 10px;
    border-radius: 6px;
    text-shadow: none;
}
.fly-sh-caption-pop { color: var(--fly-lime); text-transform: uppercase; letter-spacing: 0.02em; }
.fly-sh-caption-none { display: none; }

.fly-sh-preview.wide .fly-sh-phone { aspect-ratio: 16 / 9; height: auto; width: min(90%, 900px); }


/* The preview screen holds the piece, the stage around it never stretches */
.fly-sh-stage { overflow: hidden; }
.fly-sh-preview { background-image: none !important; overflow: hidden; }
/* The screen takes most of the free height, whatever the monitor is */
.fly-sh-phone { height: min(74vh, 880px); flex: 0 0 auto; }
.fly-sh-preview.wide .fly-sh-phone { height: auto; width: min(94%, 1180px); }
.fly-sh-preview.square .fly-sh-phone { height: min(64vh, 760px); }
.fly-sh-phone img, .fly-sh-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-sh-timeline { flex: 0 0 auto; }

/* Shorts: while the timeline is empty the demo sits on top and the screen goes under it, never side by side */
.fly-sh-preview { flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; overflow-y: auto; }
.fly-sh-preview:has(#shEmpty[hidden]) { justify-content: center; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { height: min(42vh, 460px); }
.fly-sh-demo { flex: 0 0 auto; width: 100%; max-width: 1000px; }
.fly-sh-demo .fly-cd-flow { height: min(32vh, 340px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fly-shd-strip { gap: 6px; }

/* ---------- Nothing stays a raw browser button ----------
   Any button in a panel, rail or block that has no style of its own
   still comes out as a proper pill. */
.fly-shpanel button:not([class]),
.fly-cinerail button:not([class]),
.fly-shblock button:not([class]),
.fly-shblock-head button,
.fly-sh-headbtns button,
.fly-cinerail-head button,
.fly-proj-head button {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.fly-shpanel button:not([class]):hover,
.fly-cinerail button:not([class]):hover,
.fly-shblock button:not([class]):hover,
.fly-shblock-head button:hover,
.fly-sh-headbtns button:hover,
.fly-cinerail-head button:hover,
.fly-proj-head button:hover { border-color: rgba(255,255,255,0.32); }
/* The bar must fit its 14 entries before it starts cutting them off */
.fly-nav { max-width: calc(100vw - 430px); padding: 4px; }
.fly-nav-link { padding: 7px 11px; font-size: 13px; }
@media (max-width: 1400px) {
    .fly-nav { max-width: calc(100vw - 360px); }
    .fly-nav-link { padding: 6px 9px; font-size: 12.5px; }
    .fly-logo, .fly-app-name { font-size: 24px; }
}

/* The board carries a Projects button too, so the bar gets a little less room */
body:not(.fly-showcase-body) .fly-nav { max-width: calc(100vw - 520px); }

/* ---------- More menu in the navigation ---------- */
.fly-nav { overflow: visible; }
.fly-nav-more { position: relative; flex: 0 0 auto; }
.fly-nav-morebtn { display: inline-flex; align-items: center; gap: 5px; }
.fly-nav-caret { display: inline-block; transform: rotate(90deg); font-size: 15px; line-height: 1; }
.fly-nav-more.open .fly-nav-caret { transform: rotate(-90deg); }
.fly-nav-moredrop {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 268px;
    background: #242426;
    border: 1px solid var(--fly-line);
    border-radius: 16px;
    padding: 7px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    z-index: 90;
}
.fly-nav-more.open .fly-nav-moredrop { display: block; }
.fly-nav-moreitem {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 12px;
    border-radius: 11px;
    text-decoration: none;
    color: var(--fly-text);
}
.fly-nav-moreitem:hover { background: rgba(255,255,255,0.07); }
.fly-nav-moreitem.active { background: rgba(255,255,255,0.12); }
.fly-nav-moreitem b { font-size: 13.5px; font-weight: 600; }
.fly-nav-moreitem small { font-size: 11.5px; color: var(--fly-dim); }
/* Facts line up the same way in every card, whatever the text length */
.fly-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fly-card-facts dd { line-height: 1.35; }
/* The director panel is only as wide as the cells it actually shows */
.fly-director { width: fit-content; max-width: 100%; }
/* Card buttons all sit on the same line at the bottom of their card */
.fly-card > .fly-card-btn, .fly-card > .fly-card-btn-off { margin-top: auto; }
/* Filter groups need air between them, they are three separate questions */
.fly-showcase-bar .fly-chips { gap: 6px; padding-right: 14px; margin-right: 6px; border-right: 1px solid var(--fly-line); }
.fly-showcase-bar .fly-chips:last-of-type { border-right: 0; }

/* The second row already lists these tools, the panel must not repeat them */
.fly-subtabs { display: none; }
/* One word, lime accent, no separator */
.fly-logo span { color: var(--fly-lime); }
.fly-topbar-sep, .fly-app-name { display: none; }

/* ---------- Contests ---------- */
.fly-fc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.fly-fc-btns .fly-card-btn { margin-top: 0; }
.fly-fc-admin { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--fly-line); }
.fly-fc-admin select, .fly-fc-admin button {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 12.5px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-fc-form { display: flex; flex-direction: column; gap: 9px; max-width: 620px; }
.fly-fc-formrow { display: flex; gap: 9px; align-items: center; }
.fly-fc-formrow input { flex: 1; min-width: 0; }
.fly-fc-formrow .fly-card-btn { margin-top: 0; }
.fly-fc-pickpanel { flex-direction: column; padding: 24px; overflow-y: auto; gap: 16px; }
.fly-fc-pickhead h2 { font-size: 20px; font-weight: 700; }
.fly-fc-pick {
    position: absolute;
    left: 8px; bottom: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--fly-lime);
    color: #14140f;
    font: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    z-index: 2;
}
/* Contest facts: timing needs the most room, entries the least */
.fly-card-contest .fly-card-facts { grid-template-columns: 0.9fr 1.5fr 0.5fr; }
/* An empty state inside a grid should not sit in one narrow column */
.fly-showcase-grid > .fly-note { grid-column: 1 / -1; }

/* ---------- Academy ---------- */

.fly-ac-top { margin-bottom: 20px; }
.fly-ac-progress { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fly-ac-bar {
    flex: 1 1 260px;
    max-width: 420px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.09);
    overflow: hidden;
}
.fly-ac-bar span { display: block; height: 100%; background: var(--fly-lime); transition: width 0.25s; }
.fly-ac-count { font-size: 12.5px; color: var(--fly-dim); }

.fly-ac-list { gap: 3px; margin-top: 4px; }
.fly-ac-list li { display: block; }
.fly-ac-lesson {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 7px 9px;
    border-radius: 10px;
    cursor: pointer;
}
.fly-ac-lesson:hover { background: rgba(255,255,255,0.06); }
.fly-ac-tick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    flex: 0 0 auto;
    color: var(--fly-dim);
}
.fly-ac-tick svg { width: 14px; height: 14px; }
.fly-ac-lesson.done .fly-ac-tick { color: var(--fly-lime); }
.fly-ac-lesson.done .fly-ac-lessonname { color: var(--fly-dim); }
.fly-ac-lessonname { flex: 1; }
.fly-ac-min { font-size: 11px; color: var(--fly-dim); }
.fly-ac-trackcount {
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fly-dim);
}

/* the reader */
.fly-ac-reader {
    flex-direction: column;
    width: min(760px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 32px 36px 28px;
    gap: 0;
}
.fly-ac-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
.fly-ac-head h2 { font-size: 27px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; }
.fly-ac-lead { font-size: 15.5px; line-height: 1.65; color: var(--fly-dim); }

.fly-ac-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 24px; border-top: 1px solid var(--fly-line); }
.fly-ac-body h3 { font-size: 15px; font-weight: 700; margin-top: 6px; }
.fly-ac-body p { font-size: 14.5px; line-height: 1.7; color: #e2e2e6; }
.fly-ac-steps, .fly-ac-ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.fly-ac-steps li, .fly-ac-ul li { font-size: 14.5px; line-height: 1.65; color: #e2e2e6; }
.fly-ac-note {
    border-left: 2px solid var(--fly-line);
    padding-left: 14px;
    font-size: 13.5px !important;
    color: var(--fly-dim) !important;
}
.fly-ac-do, .fly-ac-dont {
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 14px !important;
    line-height: 1.6;
}
.fly-ac-do { background: rgba(211,243,75,0.10); }
.fly-ac-do b { color: var(--fly-lime); }
.fly-ac-dont { background: rgba(255,255,255,0.05); }
.fly-ac-dont b { color: #f4f4f5; }

.fly-ac-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--fly-line);
}
.fly-ac-foot .fly-card-btn { margin-top: 0; }
.fly-ac-isdone { background: var(--fly-lime); color: #14140f; border-color: transparent; }


/* Academy: copyable examples, weak against strong, and the exercise */
.fly-ac-prompt {
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    overflow: hidden;
    background: #1c1c20;
}
.fly-ac-prompt figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fly-dim);
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid var(--fly-line);
}
.fly-ac-copy {
    border: 1px solid var(--fly-line);
    background: var(--fly-card);
    color: var(--fly-text);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 11px;
    border-radius: 999px;
    cursor: pointer;
}
.fly-ac-copy:hover { border-color: rgba(255,255,255,0.32); }
.fly-ac-prompt pre {
    margin: 0;
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    line-height: 1.7;
    color: #e6e6ea;
    white-space: pre-wrap;
    word-break: break-word;
}

.fly-ac-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fly-ac-weak, .fly-ac-strong { border-radius: 12px; padding: 13px 15px; }
.fly-ac-weak { background: rgba(255,255,255,0.05); }
.fly-ac-strong { background: rgba(211,243,75,0.10); }
.fly-ac-weak span, .fly-ac-strong span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.fly-ac-weak span { color: var(--fly-dim); }
.fly-ac-strong span { color: var(--fly-lime); }
.fly-ac-weak p, .fly-ac-strong p { font-size: 13.5px !important; line-height: 1.6; }

.fly-ac-task {
    border: 1px solid var(--fly-line);
    border-radius: 14px;
    padding: 15px 17px;
    margin-top: 4px;
}
.fly-ac-task span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fly-lime);
    margin-bottom: 6px;
}
.fly-ac-task p { font-size: 14px !important; line-height: 1.65; }

@media (max-width: 700px) {
    .fly-ac-compare { grid-template-columns: 1fr; }
}
/* Canvas while a chain runs */
.fly-cv-node.running { border-color: var(--fly-lime); box-shadow: 0 0 0 1px var(--fly-lime), 0 10px 24px rgba(0,0,0,0.4); }
.fly-cv-node.ok { border-color: rgba(211,243,75,0.5); }
.fly-cv-node.bad { border-color: rgba(220,38,38,0.7); }
.fly-cv-thumb { margin-top: 9px; border-radius: 10px; overflow: hidden; background: #131315; }
.fly-cv-thumb img, .fly-cv-thumb video { width: 100%; height: 96px; object-fit: cover; display: block; }
.fly-cv-audio { display: block; padding: 12px; text-align: center; font-size: 11.5px; color: var(--fly-dim); }

/* ---------- Draw pad (sketch with the mouse) ---------- */

.fly-draw {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fly-draw[hidden] { display: none; }

.fly-draw-box {
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    padding: 14px;
    /* At least 80% of the screen, the canvas keeps its shape against the viewport height */
    max-width: min(94vw, calc((100vh - 190px) * 1.6));
    width: 100%;
}

.fly-draw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
}

.fly-draw-x {
    background: none;
    border: none;
    color: var(--fly-dim);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

.fly-draw-x:hover { color: var(--fly-text); }

#drawPad {
    width: 100%;
    height: auto;
    border-radius: 10px;
    background: #fff;
    cursor: crosshair;
    display: block;
    touch-action: none;
}

.fly-draw-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.fly-draw-tool {
    background: var(--fly-card);
    border: 1px solid var(--fly-line);
    color: var(--fly-text);
    border-radius: 9px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 13px;
}

.fly-draw-tool.active,
.fly-draw-tool:hover { border-color: rgba(255, 255, 255, 0.35); }

.fly-draw-use {
    margin-left: auto;
    background: var(--fly-lime);
    color: #18181b;
    border: none;
    border-radius: 9px;
    padding: 8px 18px;
    font-weight: 700;
    cursor: pointer;
}

.fly-draw-use:disabled { opacity: 0.6; cursor: default; }

.fly-draw-open {
    margin-top: 8px;
    background: none;
    border: 1px dashed var(--fly-line);
    color: var(--fly-dim);
    border-radius: 9px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 13px;
    width: 100%;
}

.fly-draw-open:hover { color: var(--fly-text); border-color: rgba(255, 255, 255, 0.35); }

/* Face ID asks for the face photo: the + button glows until it gets one */
.fly-pb-plus.fly-need-face {
    border: 1px dashed var(--fly-lime);
    box-shadow: 0 0 0 3px rgba(211, 243, 75, 0.15);
}

/* Multi Reference: the four upload slots are proper square boxes, two per row, not thin strips */
[data-panel="multiref"] .fly-row .fly-slot { flex: 1 1 0; min-width: 0; height: 124px; border-radius: 10px; }
[data-panel="multiref"] .fly-slot-img { object-fit: cover; background: none; }

/* ---------- Result toolbar lifted into the subnav row (2026-07-29) ----------
   The round action buttons no longer float over the picture. They sit in the
   empty right side of the subnav row. On narrow windows, or on modes without
   a subnav, they drop back to their own row above the picture, never over the tabs. */
.fly-viewer-actions {
    position: fixed;
    top: 66px;
    right: 18px;
}
/* The workspace paints above the subnav background so the lifted toolbar shows */
.fly-main { z-index: 41; }

@media (max-width: 1760px) {
    .fly-viewer-actions { position: static; order: -1; flex-wrap: wrap; justify-content: center; }
}
body.fly-nosub .fly-viewer-actions { position: static; order: -1; flex-wrap: wrap; justify-content: center; }

/* Relight lighting preset select */
.fly-select {
    background: linear-gradient(180deg, #343437, #2c2c2f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    color: var(--fly-text);
    font: inherit;
    padding: 10px 12px;
    width: 100%;
    cursor: pointer;
}
.fly-select:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.fly-select option { background: #202024; color: var(--fly-text); }

/* Account pill in topbar (replaces points display) */
.fly-account {
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
    color: var(--fly-text);
    text-decoration: none;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly-account:hover { border-color: rgba(255,255,255,0.35); }


/* ---------- Demo hero: shared pieces greet the empty Image screen ---------- */

.fly-empty.demo-on .fly-empty-mark, .fly-empty.demo-on > p { display: none; }
.fly-demo-hero { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.fly-demo-hero[hidden] { display: none; }
.fly-demo-fan { display: flex; align-items: center; justify-content: center; padding: 8px 0 4px; }
.fly-demo-fan[hidden] { display: none; }
.fly-demo-card {
    position: relative;
    width: 104px;
    height: 104px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 18px;
    background: var(--fly-card);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
    transition: transform 0.15s, border-color 0.15s;
}
.fly-demo-card img, .fly-demo-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-demo-card .fly-demo-swap { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.fly-demo-card .fly-demo-swap-in { opacity: 1; }
/* Five cards, the round one dead centre with two leaning in from each side */
.fly-demo-card-1 { transform: rotate(-12deg) translateY(10px); }
.fly-demo-card-2 { transform: rotate(-6deg) translateY(2px); margin-left: -16px; z-index: 1; }
.fly-demo-card-3 { border-radius: 50%; transform: rotate(0deg); margin-left: -16px; z-index: 2; }
.fly-demo-card-4 { transform: rotate(6deg) translateY(2px); margin-left: -16px; z-index: 1; }
.fly-demo-card-5 { transform: rotate(12deg) translateY(10px); margin-left: -16px; }
.fly-demo-card:hover { transform: rotate(0deg) translateY(-4px) scale(1.06); border-color: rgba(255,255,255,0.7); z-index: 3; }
.fly-demo-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.18;
    text-transform: uppercase;
    color: #fff;
}
.fly-demo-title span { color: var(--fly-lime); }
.fly-demo-sub { font-size: 14px; color: rgba(244,244,245,0.62); margin: 0; }
@media (max-width: 760px) {
    .fly-demo-card { width: 78px; height: 78px; }
    .fly-demo-title { font-size: 24px; }
}

/* ---------- Create Video demo: make videos in one click ---------- */

.fly-empty.vdemo-on { width: 92%; max-width: 1560px; }
.fly-vdemo { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; }
.fly-vdemo[hidden] { display: none; }
.fly-vdemo-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
}
.fly-vdemo-sub { font-size: 14.5px; color: rgba(244,244,245,0.62); margin: 0 0 14px; line-height: 1.5; }
.fly-vdemo-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 14px; width: 100%; align-items: stretch; }
.fly-vd-card {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 8px;
    background: var(--fly-card);
    border: 1px solid var(--fly-line);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
    min-width: 0;
}
.fly-vd-body { flex: 1; width: 100%; display: flex; align-items: stretch; justify-content: center; min-height: 0; }
.fly-vd-foot { display: flex; align-items: center; gap: 10px; padding: 10px 6px 4px; min-width: 0; }
.fly-vd-step {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--fly-lime);
    color: #18181b;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fly-vd-name { flex: 0 0 auto; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.fly-vd-cap { font-size: 12.5px; color: rgba(244,244,245,0.62); margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fly-vd-drop {
    flex: 1;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(255,255,255,0.32);
    border-radius: 14px;
    background: rgba(255,255,255,0.02);
    padding: 18px;
}
.fly-vd-drop img {
    width: 82%;
    max-height: 270px;
    object-fit: cover;
    border-radius: 12px;
    transform: rotate(-3deg);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    display: block;
}
.fly-vd-presets { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.fly-vd-preset { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fly-vd-tile {
    width: 100%;
    height: 264px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.28);
    background: #101012;
}
.fly-vd-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-vd-preset.active .fly-vd-tile {
    height: 296px;
    border: 2px solid var(--fly-lime);
    box-shadow: 0 0 0 3px rgba(211,243,75,0.16), 0 12px 30px rgba(0,0,0,0.5);
}
.fly-vd-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244,244,245,0.72); text-align: center; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fly-vd-preset.active .fly-vd-tag { color: var(--fly-lime); }
.fly-vd-final {
    flex: 1;
    min-height: 320px;
    border: 2px solid #fff;
    border-radius: 14px;
    overflow: hidden;
    background: #101012;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    position: relative;
}
.fly-vd-final video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1100px) {
    .fly-vdemo-row { grid-template-columns: 1fr; }
    .fly-vdemo-title { font-size: 26px; }
    .fly-empty.vdemo-on { max-height: 100%; overflow-y: auto; width: 96%; }
    .fly-vd-drop { min-height: 240px; }
    .fly-vd-tile { height: 220px; }
    .fly-vd-preset.active .fly-vd-tile { height: 244px; }
    .fly-vd-final { min-height: 260px; }
}

/* vdemo pinned top, the model hero centered in the space below it */
.fly-canvas:has(.fly-empty.vdemo-on:not([hidden])) { align-items: stretch; }
.fly-empty.vdemo-on { margin-top: 4px; display: flex; flex-direction: column; min-height: 0; }
.fly-empty.vdemo-on .fly-demo-hero { margin: 0 0 6px; padding: 12px 0 0; }
/* The head already names the tool in big letters, so the demo under it
   does not say the same thing twice. */
#flySeriesTitle, #flyBaTitle { display: none; }
#vidRefsWrap .fly-row .fly-slot { flex: 1 1 0; min-width: 0; height: 124px; border-radius: 10px; }
#vidRefsWrap .fly-slot-img { object-fit: cover; background: none; }
.fly-empty[hidden] { display: none !important; }

/* Edit Video demo showcase */
.fly-ed-row { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.fly-ed-stage video { width: 100%; max-height: 62vh; object-fit: contain; background: #101012; border-radius: 14px; border: 2px solid rgba(255,255,255,0.9); display: block; }
.fly-ed-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fly-ed-thumb { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color .15s; }
.fly-ed-thumb img { width: 100%; height: 116px; object-fit: cover; display: block; }
.fly-ed-thumb span { position: absolute; left: 8px; bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.85); }
.fly-ed-thumb.active { border-color: #d3f34b; }
.fly-ed-cap { text-align: center; color: rgba(244,244,245,0.7); font-size: 14px; font-style: italic; }
@media (max-width: 1100px) { .fly-ed-strip { grid-template-columns: repeat(2, 1fr); } }

/* Motion Control hero: the demo clip sits under the title */
.fly-demo-motion { max-height: 46vh; max-width: min(78vw, 400px); border-radius: 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .45); }
.fly-demo-motion[hidden] { display: none; }

/* Motion Control: the copy-a-move library under the hero */
.fly-motion-lib { width: 100%; margin: 26px auto 0; text-align: left; }
.fly-motion-lib[hidden] { display: none; }
.fly-motion-lib-title { font-size: 15px; font-weight: 600; color: #f4f4f5; margin-bottom: 14px; }
.fly-motion-lib-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.fly-motion-card { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; padding: 0; border: 1px solid rgba(255, 255, 255, .08); background: #131316; cursor: pointer; }
.fly-motion-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-motion-card:hover { border-color: var(--fly-lime); }
.fly-motion-card-name { position: absolute; left: 8px; bottom: 8px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 8px; border-radius: 8px; pointer-events: none; }
.fly-empty.mlib-on { width: calc(100% - 40px); max-width: none; max-height: 100%; overflow-y: auto; padding: 24px 0; }
.fly-empty.mlib-on .fly-demo-motion { max-height: 34vh; }
.fly-ed-model { color: #d3f34b; }
.fly-canvas:has(.fly-empty.mlib-on:not([hidden])) { align-items: stretch; }
.fly-empty.mlib-on .fly-demo-hero { margin-top: 8px; }

/* Translate: dubbed demo player and the language flag grid */
.fly-trans-lib { width: 100%; margin: 8px auto 0; text-align: center; }
.fly-trans-lib[hidden] { display: none; }
.fly-trans-video { max-height: 40vh; aspect-ratio: 9 / 16; background: #000; border-radius: 18px; box-shadow: 0 14px 44px rgba(0, 0, 0, .45); margin: 0 auto; }
.fly-trans-demo-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 26px; }
.fly-trans-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(145deg, #3a3a41, #232328); color: #f4f4f5; cursor: pointer; font-size: 13px; }
.fly-trans-pill:hover { border-color: var(--fly-lime); }
.fly-trans-pill.active { border-color: var(--fly-lime); color: var(--fly-lime); }
.fly-trans-lib .fly-motion-lib-title { text-align: left; }
.fly-trans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.fly-trans-card { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(145deg, #3d3d45, #232329); color: #f4f4f5; cursor: pointer; font-size: 14px; font-weight: 500; }
.fly-trans-card .flag { font-size: 20px; line-height: 1; }
.fly-trans-card:hover { border-color: var(--fly-lime); }
.fly-trans-card.active { border-color: var(--fly-lime); background: rgba(211, 243, 75, .08); }

/* Lip Sync demo showcase, three ads in a row */
.fly-ls-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; align-items: start; justify-items: center; }
.fly-ls-row video { width: 100%; max-height: 48vh; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,0.9); cursor: pointer; display: block; }
.fly-ls-row .fly-ed-cap { grid-column: 1 / -1; text-align: center; color: rgba(244,244,245,0.7); font-size: 14px; font-style: italic; }
@media (max-width: 1100px) { .fly-ls-row { grid-template-columns: 1fr; } }

.fly-trans-flag { width: 26px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); display: block; }

.fly-audio-demo { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.fly-audio-demo[hidden] { display: none; }

.fly-audio-demo { flex-direction: column; align-items: center; }
.fly-audio-demo-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fly-audio-demo-player { margin-top: 14px; width: min(420px, 90%); }

.fly-ls-cell { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fly-ls-cap { text-align: center; color: rgba(244,244,245,0.7); font-size: 13px; font-style: italic; }

/* Marketing demo showcase */
.fly-mk-row { display: flex; justify-content: center; width: 100%; }
.fly-mk-row video { width: 100%; max-width: 1100px; border-radius: 14px; border: 2px solid rgba(255,255,255,0.9); cursor: pointer; display: block; }

/* Cinema home: projects and featured films */
.fly-cine-home { width: 100%; margin: 8px auto 0; text-align: left; }
.fly-cine-home[hidden] { display: none; }
.fly-cine-projects { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.fly-cine-proj { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 170px; height: 110px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .22); background: linear-gradient(145deg, #2c2c32, #1d1d21); color: #f4f4f5; cursor: pointer; font-size: 13px; }
.fly-cine-proj:hover { border-color: var(--fly-lime); }
.fly-cine-proj i, .fly-cine-proj svg { width: 26px; height: 26px; }
.fly-cine-films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fly-cine-film { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #131316; border: 1px solid rgba(255, 255, 255, .1); cursor: pointer; }
.fly-cine-film img, .fly-cine-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-cine-film:hover { border-color: var(--fly-lime); }
.fly-cine-film-name { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 8px; pointer-events: none; }
.fly-cine-film-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .35); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; pointer-events: none; }
#flyMarketDemo .fly-vdemo-title, #flyMarketDemo .fly-vdemo-sub { text-align: center; }

/* My projects inside the cinema rail */
.fly-cinerail-projects { padding: 14px 0 6px; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 14px; }
.fly-cinerail-subhead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f4f4f5; margin-bottom: 10px; }
.fly-cinerail-projects .fly-cine-proj { width: 100%; height: auto; flex-direction: row; justify-content: flex-start; padding: 10px 12px; margin-bottom: 8px; }
.fly-cinerail-projects .fly-cine-proj i, .fly-cinerail-projects .fly-cine-proj svg { width: 18px; height: 18px; }

/* Explainer demo: the five scenes of one sample script, tap a scene to read its line */
#flyExplainDemo { --exh: 420px; }
.fly-ex-row { display: flex; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; padding-left: 24px; padding-right: 24px; }
.fly-ex-topic { color: #F4F4F5; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.85; }
.fly-ex-stage { display: flex; justify-content: flex-start; }
.fly-ex-stage video { height: var(--exh); width: auto; border-radius: 16px; border: 2px solid rgba(255,255,255,0.9); background: #000; display: block; }
/* Full width: video hard left, its scenes filling the rest of the row at the same height */
.fly-ex-demo { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 12px; align-items: start; justify-content: start; width: 100%; }
.fly-ex-demo + .fly-ex-demo { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.12); }
.fly-ex-demo .fly-ex-topic { grid-column: 1 / -1; grid-row: 1; text-align: left; }
.fly-ex-demo .fly-ex-stage { grid-column: 1; grid-row: 2; }
.fly-ex-demo .fly-ex-grid { grid-column: 2; grid-row: 2; }
.fly-ex-demo .fly-ex-line { grid-column: 2; grid-row: 3; text-align: left; margin: 0; max-width: none; }
.fly-ex-grid { display: flex; flex-wrap: nowrap; gap: 10px; width: 100%; height: var(--exh); }
.fly-ex-grid > .fly-ex-card { flex: 1 1 0; min-width: 0; height: 100%; }
@media (max-width: 1000px) {
    .fly-ex-demo { grid-template-columns: 1fr; }
    .fly-ex-demo .fly-ex-stage { grid-column: 1; grid-row: 2; justify-content: center; }
    .fly-ex-demo .fly-ex-grid { grid-column: 1; grid-row: 3; height: 190px; }
    .fly-ex-demo .fly-ex-line { grid-column: 1; grid-row: 4; }
}
.fly-ex-card { position: relative; padding: 0; border: 2px solid rgba(255,255,255,0.25); border-radius: 12px; overflow: hidden; background: none; cursor: pointer; display: block; }
.fly-ex-card img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; transition: opacity 0.2s ease; }
.fly-ex-card:hover img { opacity: 1; }
.fly-ex-card.active { border-color: rgba(255,255,255,0.95); }
.fly-ex-card.active img { opacity: 1; }
.fly-ex-step { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,0.66); color: #FFFFFF; font-size: 11px; }
.fly-ex-line { text-align: left; color: #F4F4F5; font-size: 17px; line-height: 1.5; margin: 0 0 26px; }
#flyExplainDemo .fly-vdemo-title, #flyExplainDemo .fly-vdemo-sub { text-align: center; }

/* Short screens: the demo column must never slide under the prompt bar */
#flyExplainDemo { padding-bottom: 150px; }
.fly-ex-row { padding-bottom: 4px; }
@media (max-height: 900px) {
    .fly-ex-grid { gap: 8px; }
    .fly-ex-line { font-size: 15px; margin-bottom: 14px; }
    .fly-ex-topic { font-size: 13px; }
    #flyExplainDemo .fly-vdemo-title { font-size: 26px; }
    #flyExplainDemo { padding-bottom: 140px; }
}

/* Very short windows: the demo scrolls inside its own area instead of sliding under the bar */
@media (max-height: 820px) {
    .fly-empty.vdemo-on { max-height: calc(100vh - 250px); overflow-y: auto; }
    #flyExplainDemo { padding-bottom: 18px; }
    .fly-ex-row { gap: 10px; }
}

/* The area scrolls on short windows, so the player keeps a usable size instead of shrinking away */
@media (max-height: 1000px) { #flyExplainDemo { --exh: 340px; } }
@media (max-height: 820px)  { #flyExplainDemo { --exh: 280px; } }
@media (max-height: 620px)  { #flyExplainDemo { --exh: 220px; } }

/* Explainer demo only: keep the column inside the free space above the prompt bar at any window height */
.fly-empty.vdemo-on:has(#flyExplainDemo:not([hidden])) { max-height: calc(100vh - 250px); overflow-y: auto; }
.fly-empty.vdemo-on:has(#flyExplainDemo:not([hidden])) #flyExplainDemo { padding-bottom: 18px; }

/* Shorts demo: hero title on top, then one row in step order 1-2-3 (three images, the card, the video), notes under each, and one big empty-timeline screen below */
.fly-sh-preview:has(#shEmpty:not([hidden])) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, min(44vh, 500px)) auto minmax(0, min(46vh, 520px));
    gap: 14px 16px;
    align-content: start;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 6px 22px 0;
}
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-demo,
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-demo .fly-cd-flow,
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-step { display: contents; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-hero { grid-row: 1; grid-column: 1 / -1; padding: 8px 0 14px; }
/* the row: step 1 images, step 2 card, step 3 video */
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-strip { grid-row: 2; grid-column: 1 / 4; gap: 16px; height: 100%; min-height: 0; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-strip img { height: 100%; min-height: 0; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-card { grid-row: 2; grid-column: 4; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-video { grid-row: 2; grid-column: 5; height: 100%; min-height: 0; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-step:nth-of-type(1) .fly-cd-note { grid-row: 3; grid-column: 1 / 4; min-height: 0; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-step:nth-of-type(2) .fly-cd-note { grid-row: 3; grid-column: 4; min-height: 0; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-step:nth-of-type(3) .fly-cd-note { grid-row: 3; grid-column: 5; min-height: 0; }
/* one big empty-timeline screen underneath */
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { grid-row: 4; grid-column: 1 / -1; height: 100%; width: auto; aspect-ratio: 9 / 16; justify-self: center; }
@media (max-width: 860px) {
    .fly-sh-preview:has(#shEmpty:not([hidden])) { grid-template-columns: 1fr; grid-template-rows: none; }
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-hero,
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-strip,
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-card,
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-video,
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-note,
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { grid-row: auto; grid-column: 1; }
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-shd-strip { height: 220px; }
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-video { height: 300px; }
    .fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { height: 300px; width: auto; justify-self: center; }
}
/* the step-2 card stands as tall as the pictures next to it */
.fly-sh-preview:has(#shEmpty:not([hidden])) { align-items: stretch; }
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-cd-card { align-self: stretch; height: 100%; min-height: 0; }
/* the empty-timeline screen follows the chosen output ratio */
.fly-sh-preview.square:has(#shEmpty:not([hidden])) .fly-sh-phone { aspect-ratio: 1 / 1; }
.fly-sh-preview.wide:has(#shEmpty:not([hidden])) .fly-sh-phone { aspect-ratio: 16 / 9; }

/* The Image menu carries every image tool, so it runs three narrow columns of
   names next to the model list. Rows drop the description to stay compact. */
.fly-mega-wide .fly-mega-col { min-width: 218px; }
.fly-mega-wide #flyMegaModels { min-width: 292px; }
.fly-mega-wide .fly-mega-item { padding: 6px 10px; gap: 10px; }
.fly-mega-wide .fly-mega-head:not(:first-child) { margin-top: 10px; }
.fly-mega-wide .fly-mega-col > .fly-dd-name { flex: 1; }
.fly-mega-item > .fly-dd-name { flex: 1; min-width: 0; white-space: nowrap; }
.fly-soon {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-style: normal;
    color: var(--fly-dim);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    padding: 1px 4px;
    flex: none;
}
.fly-mega-soon { cursor: default; }

/* Image menu, second pass: the tool groups sit on a grid so the top row and
   the bottom row each start on the same line, whatever their length. */
.fly-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, 218px);
    grid-auto-rows: min-content;
    align-items: start;
    column-gap: 6px;
    row-gap: 14px;
}
.fly-mega-group { display: flex; flex-direction: column; gap: 2px; }
.fly-mega-wide .fly-mega-group .fly-mega-head { margin-top: 0; }
.fly-mega-wide { align-items: flex-start; }

/* The section menus read as a pane of smoked glass: the board blurs through
   them, light gathers along the top edge and falls off towards the bottom. */
.fly-mega {
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 32%, rgba(255, 255, 255, 0) 62%),
        radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 58%),
        rgba(32, 32, 35, 0.78);
    border-color: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 -20px 40px rgba(0, 0, 0, 0.28),
        0 30px 70px rgba(0, 0, 0, 0.62);
}

/* Column heads sit on a hairline of light, the way glass panes meet */
.fly-mega-head {
    color: rgba(255, 255, 255, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 4px;
    padding-bottom: 6px;
}

/* Rows lift out of the glass on hover instead of just changing color */
.fly-mega-item {
    border: 1px solid transparent;
    transition: background 0.14s, border-color 0.14s;
}
.fly-mega-item:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fly-mega-item.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07));
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.fly-mega-soon:hover { background: rgba(255, 255, 255, 0.05); border-color: transparent; box-shadow: none; }

/* A hairline of glass separates the tools from the model list, short of both
   edges so it reads as a seam and not as a frame. */
.fly-mega-wide .fly-mega-grid { position: relative; padding-right: 16px; }
.fly-mega-wide .fly-mega-grid::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 0;
    width: 1px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.14) 12%,
        rgba(255, 255, 255, 0.14) 88%,
        rgba(255, 255, 255, 0) 100%);
}
.fly-mega-wide #flyMegaModels { padding-left: 10px; }

/* The edit panel has a whole empty column under it, so the picture takes the
   room it needs: the frame follows the shape of the image, tall for portraits,
   with a soft margin left and right when the picture is narrower than the bar. */
#edSlot.filled {
    height: auto;
    max-height: 68vh;
    padding: 6px;
    background: #232325;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.12);
}
#edSlot.filled .fly-slot-img {
    width: 100%;
    height: auto;
    max-height: calc(68vh - 12px);
    object-fit: contain;
    border-radius: 8px;
}

/* The first button in the viewer bar says what it does, so it is never read
   as the twin of the red delete X at the other end. */
.fly-act-text {
    width: auto;
    padding: 0 16px;
    border-radius: 19px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

/* Darkroom sliders: a glass strip under the picture, only there once a
   picture is on the screen. */
.fly-adjust {
    position: absolute;
    left: 50%;
    bottom: 82px;
    transform: translateX(-50%);
    width: min(460px, calc(100% - 40px));
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(28, 28, 31, 0.82);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 24px 60px rgba(0, 0, 0, 0.6);
    z-index: 6;
}
.fly-adjust[hidden] { display: none; }
.fly-adjust-rows { display: flex; flex-direction: column; gap: 8px; }
.fly-adjust-row {
    display: grid;
    grid-template-columns: 84px 1fr 38px;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--fly-text);
}
.fly-adjust-row em { font-style: normal; text-align: right; color: rgba(244, 244, 245, 0.75); }
.fly-adjust-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}
.fly-adjust-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: #f4f4f5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.fly-adjust-row input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f5;
    cursor: pointer;
}
.fly-adjust-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.fly-act.active { border-color: rgba(255, 255, 255, 0.45); background: rgba(20, 20, 22, 0.9); }

/* The strip sits under Generate for good, greyed out until a picture exists */
.fly-adjust {
    position: static;
    transform: none;
    width: auto;
    margin-top: 16px;
    padding: 14px 14px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.fly-adjust-off { opacity: 0.4; pointer-events: none; }
.fly-adjust-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.7);
    margin-bottom: 10px;
}
.fly-adjust-row { grid-template-columns: 76px 1fr 32px; font-size: 11.5px; }

/* Darkroom panel: sections of looks, sliders and framing, kept dense */
.fly-adjust { padding: 14px 14px 12px; }
.fly-adjust-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.75);
    margin-bottom: 12px;
}
.fly-adjust-sec + .fly-adjust-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.fly-adjust-sub {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.55);
    margin-bottom: 9px;
}
.fly-adjust-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fly-adjust-chips button {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--fly-text);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s;
}
.fly-adjust-chips button:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.22); }
.fly-adjust-chips button.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    border-color: rgba(255, 255, 255, 0.3);
}
.fly-adjust-rows { gap: 9px; }
.fly-adjust-row { grid-template-columns: 92px 1fr 30px; }
.fly-adjust-foot { margin-top: 14px; }
/* A quarter turned picture is scaled by the viewer, keep it inside the stage */
.fly-viewer-media img { transition: filter 0.08s linear; }

/* One slider design across the board, tuned for the dark room: a dim track,
   the travelled part in light, a white head that lifts on grab. */
.fly-adjust input[type="range"],
.fly-panel input[type="range"],
.fly-strength input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
    accent-color: #e7e7ea;
    outline: none;
    cursor: pointer;
}
.fly-adjust input[type="range"]::-webkit-slider-thumb,
.fly-panel input[type="range"]::-webkit-slider-thumb,
.fly-strength input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -1px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #d9d9dd);
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    cursor: grab;
    transition: transform 0.1s;
}
.fly-adjust input[type="range"]:active::-webkit-slider-thumb,
.fly-panel input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.fly-adjust input[type="range"]::-moz-range-thumb,
.fly-panel input[type="range"]::-moz-range-thumb,
.fly-strength input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff, #d9d9dd);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    cursor: grab;
}
.fly-adjust input[type="range"]::-moz-range-progress { background: #e7e7ea; height: 5px; border-radius: 4px; }
.fly-adjust input[type="range"]:disabled::-webkit-slider-thumb { background: #8a8a8f; box-shadow: none; }

/* Sliders as in the studio: a flat dark rail, no fill, and an upright white
   pill for a head. Name on the left, value on the right, nothing shouting. */
.fly-adjust input[type="range"],
.fly-panel input[type="range"],
.fly-strength input[type="range"] {
    height: 8px;
    border-radius: 5px;
    background: #3f3f46;
    box-shadow: none;
    accent-color: auto;
}
.fly-adjust input[type="range"]::-webkit-slider-thumb,
.fly-panel input[type="range"]::-webkit-slider-thumb,
.fly-strength input[type="range"]::-webkit-slider-thumb {
    width: 8px;
    height: 20px;
    margin-top: -6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #ffffff, #e4e4e7);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.fly-adjust input[type="range"]::-moz-range-thumb,
.fly-panel input[type="range"]::-moz-range-thumb,
.fly-strength input[type="range"]::-moz-range-thumb {
    width: 8px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    background: linear-gradient(180deg, #ffffff, #e4e4e7);
}
.fly-adjust input[type="range"]::-moz-range-progress { background: #3f3f46; }
.fly-adjust-row { grid-template-columns: 96px 1fr 26px; align-items: center; }
.fly-adjust-rows { gap: 13px; }

/* Section head with its own revert arrow */
.fly-adjust-subrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.fly-adjust-subrow .fly-adjust-sub { margin-bottom: 0; }
.fly-adjust-revert {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(244, 244, 245, 0.8);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fly-adjust-revert:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ===== Darkroom dressed exactly like the Studio panel (dark theme) ===== */

/* Sliders: flat rail, black 3D knob with a white line down the middle */
.fly-adjust input[type="range"],
.fly-panel input[type="range"],
.fly-strength input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: none;
    cursor: pointer;
}
.fly-adjust input[type="range"]::-webkit-slider-runnable-track,
.fly-panel input[type="range"]::-webkit-slider-runnable-track,
.fly-strength input[type="range"]::-webkit-slider-runnable-track {
    height: 9px;
    border-radius: 999px;
    background: #45464f;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.fly-adjust input[type="range"]::-moz-range-track,
.fly-panel input[type="range"]::-moz-range-track,
.fly-strength input[type="range"]::-moz-range-track {
    height: 9px;
    border-radius: 999px;
    background: #45464f;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.fly-adjust input[type="range"]::-moz-range-progress { background: #45464f; }
.fly-adjust input[type="range"]::-webkit-slider-thumb,
.fly-panel input[type="range"]::-webkit-slider-thumb,
.fly-strength input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    margin-top: -7.5px;
    background: linear-gradient(90deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 100% calc(100% - 10px) no-repeat,
                linear-gradient(180deg, #3a3a3d 0%, #1c1c1e 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.5);
    cursor: grab;
}
.fly-adjust input[type="range"]::-moz-range-thumb,
.fly-panel input[type="range"]::-moz-range-thumb,
.fly-strength input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 24px;
    border-radius: 6px;
    border: 0;
    background: linear-gradient(90deg, transparent calc(50% - 1px), #ffffff calc(50% - 1px), #ffffff calc(50% + 1px), transparent calc(50% + 1px)) center / 100% calc(100% - 10px) no-repeat,
                linear-gradient(180deg, #3a3a3d 0%, #1c1c1e 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: grab;
}
.fly-adjust input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

/* Chips laid on a grid so the rows line up, Studio button shape */
.fly-adjust-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fly-adjust-sec:last-of-type .fly-adjust-chips { grid-template-columns: repeat(3, 1fr); }
.fly-adjust-chips button {
    min-width: 0;
    height: 34px;
    padding: 0 6px;
    border: 1px solid #48484a;
    border-radius: 8px;
    background: #2c2c2e;
    color: #e5e5ea;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.fly-adjust-chips button:hover { border-color: #7a7a80; background: #3a3a3d; }
.fly-adjust-chips button.active { background: rgba(255, 255, 255, 0.10); color: #f5f5f7; border-color: #f5f5f7; }

/* Section revert circle, same as the studio one */
.fly-adjust-revert { background: #2c2c2e; border: 1px solid #55555a; color: #e5e5ea; }
.fly-adjust-revert:hover { color: #ff6b66; border-color: #ff6b66; background: #3a3a3d; }

/* Foot buttons stand off the panel */
.fly-adjust-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fly-adjust-foot button {
    height: 40px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, filter 0.12s ease;
}
.fly-adjust-foot #adjReset {
    border: 1px solid #55555a;
    background: #2c2c2e;
    color: #e5e5ea;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.fly-adjust-foot #adjSave {
    border: 1px solid #f5f5f7;
    background: #f5f5f7;
    color: #17171b;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.fly-adjust-foot button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fly-adjust-foot button:disabled { transform: none; filter: none; }

.fly-adjust-row { grid-template-columns: 92px 1fr 24px; }
.fly-adjust-rows { gap: 12px; }

/* Waiting for a picture means deaf, not dimmed: the panel looks the same,
   it just does not answer until there is something to work on. */
.fly-adjust-off { opacity: 1; pointer-events: none; }
.fly-adjust-frame .fly-adjust-chips { grid-template-columns: repeat(3, 1fr); }

/* The writing box: sunken, empty, clearly a place to type and never the twin
   of the upload frame above it. The example sits in the corner mark. */
.fly-ask { position: relative; }
.fly-ask-box {
    width: 100%;
    min-height: 84px;
    padding: 12px 34px 12px 13px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--fly-text);
    background: #1b1b1d;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    resize: none;
}
.fly-ask-box:focus {
    outline: none;
    border-color: rgba(211, 243, 75, 0.55);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(211, 243, 75, 0.12);
}
.fly-ask-tip {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(244, 244, 245, 0.8);
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: help;
}
.fly-ask-tip[hidden] { display: none; }
.fly-ask-tip:hover, .fly-ask-tip:focus { background: rgba(255, 255, 255, 0.14); color: #fff; outline: none; }
.fly-ask-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    right: -4px;
    width: 216px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #232325;
    color: #f4f4f5;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.4;
    text-align: left;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.13s, transform 0.13s;
    z-index: 30;
}
.fly-ask-tip:hover .fly-ask-bubble,
.fly-ask-tip:focus .fly-ask-bubble { opacity: 1; transform: translateY(0); }

/* Lighter well and half again as tall: there is room in the column for it */
.fly-ask-box {
    min-height: 126px;
    background: #303033;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.34);
}
.fly-ask-box:focus {
    background: #333336;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(211, 243, 75, 0.12);
}

/* Boxes that were grown by hand keep their own height, the rest follow the
   panel default; the mark never sits on top of the text */
.fly-panel .fly-ask-box { min-height: 96px; }
.fly-panel #edPrompt.fly-ask-box { min-height: 126px; }
.fly-ask-box::placeholder { color: transparent; }

/* The dots sit quietly, just enough to say "write here" */
.fly-ask-box::placeholder { color: rgba(244, 244, 245, 0.34); font-size: 18px; letter-spacing: 2px; }

/* One quiet word, normal size again now that it carries meaning */
.fly-ask-box::placeholder { color: rgba(244, 244, 245, 0.38); font-size: 14px; letter-spacing: 0; }

/* A field that asks nothing must actually disappear: flex was beating hidden,
   so tools like Face Enhance kept an empty box with no hint behind it. */
.fly-field[hidden] { display: none; }

/* The empty board leads with the open tool, the model line steps back under it */
.fly-demo-tool {
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 6px;
}
.fly-demo-tool[hidden] { display: none; }
.fly-demo-title { font-size: 15px; font-weight: 700; letter-spacing: 0.06em; color: rgba(244, 244, 245, 0.66); }
.fly-demo-sub { text-align: center; max-width: 560px; }

/* The rest of the group, one click away */
.fly-demo-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 640px;
    margin-top: 18px;
}
.fly-demo-tools[hidden] { display: none; }
.fly-demo-tool-chip {
    height: 34px;
    padding: 0 14px;
    border: 1px solid #48484a;
    border-radius: 999px;
    background: #2c2c2e;
    color: #e5e5ea;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.13s, background 0.13s, transform 0.12s;
}
.fly-demo-tool-chip:hover { background: #3a3a3d; border-color: #7a7a80; transform: translateY(-1px); }
@media (max-width: 760px) { .fly-demo-tool { font-size: 30px; } }

/* With a tool name leading it, the hero belongs at the top of the board,
   not floating in the middle of the empty space. */
.fly-canvas:has(> .fly-empty.demo-on:not([hidden])) { align-items: flex-start; }
.fly-empty.demo-on { padding-top: 8px; }
.fly-demo-hero { gap: 18px; }
.fly-demo-fan { padding-top: 0; }

/* Save reads as a machined metal key: brushed gradient, lit top edge, seated
   in its own shadow, and it presses in when clicked. */
.fly-adjust-foot #adjSave {
    background: linear-gradient(180deg, #6e7076 0%, #55575d 42%, #3c3e43 58%, #2b2d31 100%);
    border: 1px solid #2a2c30;
    color: #f7f7f9;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(0, 0, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.5),
        0 1px 2px rgba(0, 0, 0, 0.45);
}
.fly-adjust-foot #adjSave:hover {
    background: linear-gradient(180deg, #7b7d84 0%, #5f6167 42%, #45474c 58%, #313338 100%);
    filter: none;
}
.fly-adjust-foot #adjSave:active {
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* The shelf of shared work: a slow drift across the foot of the board. It sits
   under everything, keeps moving while a job runs, and never blocks a click. */
.fly-showcase {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 168px;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.fly-showcase[hidden] { display: none; }
.fly-showcase-track {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    width: max-content;
    animation: flyShelf 64s linear infinite;
}
.fly-showcase-item {
    margin: 0;
    width: 190px;
    height: 140px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    opacity: 0.5;
    transition: opacity 0.4s;
}
.fly-showcase-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-showcase-busy .fly-showcase-item { opacity: 0.3; }
@keyframes flyShelf {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .fly-showcase-track { animation: none; } }

/* The shelf hangs under the hero instead of at the foot of the board */
.fly-showcase { top: 430px; bottom: auto; }

/* Full cards, not half of one: the shelf takes exactly the height of a card
   plus its breathing room, and nothing crops it. */
.fly-showcase { height: auto; }
.fly-showcase-track { padding: 0; gap: 16px; }
.fly-showcase-item {
    width: 232px;
    height: 174px;
    opacity: 0.62;
    flex: none;
}

/* The wall of community work: still pictures across the whole board, no drift.
   It scrolls with the board when there are more rows than room. */
.fly-showcase {
    left: 24px;
    right: 24px;
    bottom: 12px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    mask-image: none;
    -webkit-mask-image: none;
}
.fly-showcase::-webkit-scrollbar { display: none; }
.fly-showcase-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    width: auto;
    animation: none;
    padding-bottom: 8px;
}
.fly-showcase-item {
    width: auto;
    height: auto;
    aspect-ratio: 4 / 3;
    opacity: 0.9;
}
.fly-showcase-item:hover { opacity: 1; }
.fly-showcase-busy .fly-showcase-item { opacity: 0.45; }

/* Community wall proper: pictures keep their own shape and stack into columns,
   so the grid breathes the way it does on the community page. */
.fly-showcase { left: 16px; right: 16px; }
.fly-showcase-track {
    display: block;
    column-width: 268px;
    column-gap: 14px;
    grid-template-columns: none;
    padding-bottom: 10px;
}
.fly-showcase-item {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    margin: 0 0 14px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    border-radius: 16px;
}
.fly-showcase-item img { height: auto; object-fit: contain; }

/* Edge to edge, and the wall takes the wheel: it was deaf to the mouse before,
   so it could never scroll. */
.fly-showcase {
    left: 0;
    right: 0;
    padding: 0 14px;
    pointer-events: auto;
    overscroll-behavior: contain;
}
.fly-showcase-track { column-width: 300px; column-gap: 14px; }

/* Tool chips always sit on one line; when a group is long the row slides */
.fly-demo-tools {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.fly-demo-tools::-webkit-scrollbar { display: none; }
.fly-demo-tool-chip { flex: none; }

/* Create Image gives its room to the wall: no sample fan, tighter head */
.fly-demo-tight { gap: 10px; }
.fly-demo-tight .fly-demo-tool { font-size: 34px; margin-bottom: 2px; }
.fly-demo-tight .fly-demo-sub { display: none; }
.fly-demo-tight .fly-demo-tools { margin-top: 10px; }

/* Wider still: the wall runs to the very edges of the board and the pictures
   themselves grow with it. */
.fly-showcase { padding: 0 6px; }
.fly-showcase-track { column-width: 340px; column-gap: 12px; }
.fly-showcase-item { margin-bottom: 12px; }

/* Five columns on a wide screen, four when the board narrows. Nothing behind
   the pictures: no card, no border, no drop shadow. */
.fly-showcase-track { column-width: auto; column-count: 4; }
@media (min-width: 1500px) { .fly-showcase-track { column-count: 5; } }
@media (max-width: 900px) { .fly-showcase-track { column-count: 3; } }
@media (max-width: 620px) { .fly-showcase-track { column-count: 2; } }
.fly-showcase-item {
    border: 0;
    background: transparent;
    box-shadow: none;
}
.fly-showcase-item img { border-radius: 16px; display: block; }

/* The wall is pinned to the window: it starts where the left panel ends and
   runs to the right edge, which buys it the room the canvas padding was eating. */
.fly-showcase {
    position: fixed;
    right: 10px;
    bottom: 14px;
    left: auto;
    padding: 0;
}

/* The wall lives under the writing bar, never over it */
.fly-showcase { z-index: 0; }
.fly-promptbar { z-index: 5; }

/* Real columns instead of CSS multicol: a new batch lands at the foot of the
   shortest column, so pictures already on screen never jump to a new place. */
.fly-showcase-track {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    column-count: auto;
    column-width: auto;
}
.fly-showcase-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fly-showcase-item { margin: 0; width: 100%; }

/* Same spacing rules as the community page */
.fly-showcase-track { gap: 16px; }
.fly-showcase-col { gap: 0; display: block; }
.fly-showcase-item { margin-bottom: 16px; break-inside: avoid; }
@media (max-width: 1200px) { .fly-showcase-track { gap: 12px; } }
@media (max-width: 768px) {
    .fly-showcase-track { gap: 10px; }
    .fly-showcase-item { margin-bottom: 10px; }
}

/* Before and after demo, dressed like the community wiper */
.fly-ba-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fly-ba-demo[hidden] { display: none; }
.fly-ba {
    position: relative;
    width: min(760px, 74vw);
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    margin-top: 6px;
}
.fly-ba > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fly-ba-after { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.fly-ba-after img { position: absolute; top: 0; left: 0; height: 100%; width: auto; object-fit: cover; }
.fly-ba-handle {
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 3px;
    background: #fff;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
}
.fly-ba-handle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.fly-ba-handle::before {
    content: '\2194';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #1d1d1f;
    z-index: 4;
}
.fly-ba-label {
    position: absolute;
    top: 12px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    z-index: 2;
    backdrop-filter: blur(6px);
}
.fly-ba-label-before { left: 12px; }
.fly-ba-label-after { right: 12px; }
.fly-ba-prompt { margin: 0; font-size: 13px; color: rgba(244, 244, 245, 0.6); font-style: italic; }

/* Bigger stage for the before and after: it is the whole point of this board */
.fly-ba { width: min(1180px, 88vw); margin-top: 10px; }
.fly-ba-demo .fly-vdemo-title { font-size: 30px; }

/* The pair takes the whole board: as wide as the stage allows and as tall as
   the space under the title, whichever runs out first. */
.fly-ba {
    width: min(1600px, 94vw);
    max-height: calc(100vh - 300px);
    aspect-ratio: 4 / 3;
    margin-top: 8px;
}
.fly-ba-demo { gap: 6px; }
.fly-ba-demo .fly-vdemo-sub { margin-bottom: 0; }

/* Half the size: the pair should read at a glance, not fill the room */
.fly-ba { width: min(800px, 47vw); max-height: calc(100vh - 340px); }

/* The board opens on the finished picture; the handle waits at the left edge
   and only reveals the original as it is pulled across. */
.fly-ba-after { width: 0; }
.fly-ba-handle { left: 0; }
.fly-ba-label-before { opacity: 0.85; }

/* The handle rests in the middle: half the frame shows what went in, half what
   came out, and both labels make sense at first glance. */
.fly-ba-after { width: 50%; }
.fly-ba-handle { left: 50%; }

/* Whole picture, never a crop: the frame is as tall as the picture needs */
.fly-ba > img, .fly-ba-after img { object-fit: contain; }
.fly-ba { max-height: calc(100vh - 300px); }

/* Series demo: the upload on the left, the run of results beside it */
.fly-series-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fly-series-demo[hidden] { display: none; }
.fly-series-row {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-top: 8px;
    max-width: min(1240px, 92vw);
}
.fly-series-cell { position: relative; flex: 0 0 auto; }
.fly-series-cell img {
    display: block;
    height: clamp(190px, 34vh, 340px);
    width: auto;
    border-radius: 16px;
    object-fit: cover;
    background: #000;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.fly-series-cell.is-source img { box-shadow: 0 0 0 2px #d7ff3e, 0 18px 44px rgba(0, 0, 0, 0.5); }
.fly-series-tag {
    position: absolute;
    left: 10px; bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    backdrop-filter: blur(6px);
}
.fly-series-cell.is-source .fly-series-tag { background: #d7ff3e; color: #14170c; }
.fly-series-arrow {
    align-self: center;
    color: #8f8f94;
    font-size: 22px;
    line-height: 1;
    padding: 0 2px;
}
@media (max-width: 1100px) {
    .fly-series-row { gap: 10px; }
    .fly-series-cell img { height: clamp(150px, 26vh, 240px); }
    .fly-series-arrow { display: none; }
}
@media (max-width: 700px) {
    .fly-series-row { flex-wrap: wrap; justify-content: center; }
    .fly-series-cell img { height: 150px; }
}

/* Plain waiting state: no demo for this tool, so the card sits dead centre
   of the free space and disappears the moment a result shows up. */
.fly-canvas:has(> .fly-empty:not(.demo-on):not([hidden])) { align-items: center; justify-content: center; }
.fly-empty:not(.demo-on) {
    margin: auto;
    padding: 46px 64px 42px;
    border: 1px dashed rgba(244, 244, 245, 0.14);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.015);
    max-width: min(720px, 86%);
}
@media (max-width: 700px) {
    .fly-empty:not(.demo-on) { padding: 30px 24px 28px; }
}

/* The series sits in the middle of the free space, and the whole run always
   fits the width, nothing runs off the right edge. */
.fly-empty.vdemo-on:has(#flySeriesDemo:not([hidden])) { justify-content: center; }
#flySeriesDemo { margin: auto 0; width: 100%; }
.fly-series-row {
    width: 100%;
    max-width: min(1500px, 96%);
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.fly-series-cell { flex: 1 1 0; min-width: 0; }
.fly-series-cell img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: min(52vh, 460px);
}

/* ---------- The framed landing box ---------- */
/* The old centred wording is replaced by this box, so hide the loose copy. */
.fly-empty > p, .fly-empty .fly-empty-mark { display: none; }
.fly-stage-box {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: auto;
    width: min(560px, 84%);
    aspect-ratio: 4 / 3;
    max-height: min(46vh, 420px);
    border: 1px dashed rgba(244, 244, 245, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.015);
    color: rgba(244, 244, 245, 0.45);
    line-height: 1.7;
    padding: 24px;
}
.fly-stage-box[hidden] { display: none; }
/* Under a demo the box takes whatever room is left below it */
.fly-empty.vdemo-on .fly-stage-box, .fly-empty.demo-on .fly-stage-box { margin-top: 22px; }
.fly-empty.vdemo-on { justify-content: flex-start; }
#flySeriesDemo { margin: 0; }
/* The spinner wears the same frame in the same place */
.fly-genbox {
    width: min(560px, 84%);
    aspect-ratio: 4 / 3;
    max-height: min(46vh, 420px);
    justify-content: center;
    border: 1px dashed rgba(244, 244, 245, 0.16);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.015);
    gap: 12px;
}
.fly-genbox canvas { border: 0; background: transparent; max-height: 62%; width: auto; }
@media (max-width: 700px) {
    .fly-stage-box, .fly-genbox { width: 92%; max-height: 38vh; }
}
/* The landing box carries the mark and sits in the middle of what is left
   under the demo, not glued to the pictures above it. */
.fly-stage-stack { flex-direction: column; gap: 14px; }
.fly-stage-mark {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.32em;
    margin-right: -0.32em;
    color: rgba(244, 244, 245, 0.10);
    user-select: none;
    line-height: 1;
}
.fly-empty.vdemo-on .fly-stage-box, .fly-empty.demo-on .fly-stage-box {
    margin-top: auto;
    margin-bottom: auto;
}
.fly-empty.vdemo-on { justify-content: flex-start; min-height: 100%; }
/* Sits low in the room left under the demo, so the demo above it breathes */
.fly-empty.vdemo-on .fly-stage-box, .fly-empty.demo-on .fly-stage-box { transform: translateY(min(14vh, 220px)); }

/* Community and Originals are full pages, not the strip that hangs at the foot
   of the studio board, so they keep the plain flow layout. */
body.fly-showcase-body .fly-showcase {
    position: static;
    height: auto;
    overflow: visible;
    pointer-events: auto;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px 32px 80px;
    left: auto; right: auto; bottom: auto; top: auto;
    width: auto;
}

/* ---------- One starting line for every tool ---------- */
/* Whatever the open tool brings under it, its head starts at the same height
   under the top bar, so the title never jumps when you switch tools. */
.fly-canvas:has(> .fly-empty.demo-on:not([hidden])) { align-items: flex-start; }
.fly-empty.demo-on,
.fly-empty.vdemo-on,
.fly-empty.mlib-on { margin-top: 0; padding-top: 12px; }
.fly-empty.demo-on .fly-demo-hero,
.fly-empty.vdemo-on .fly-demo-hero,
.fly-empty.mlib-on .fly-demo-hero { margin: 0 0 6px; padding: 0; }

/* The community wall: real columns, every card in its own proportions */
.fly-showcase-grid.fly-sc-masonry {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.fly-sc-masonry .fly-sc-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fly-sc-masonry .fly-sc-card {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / var(--fly-sc-ratio, 1.25);
}
.fly-sc-masonry .fly-sc-card img, .fly-sc-masonry .fly-sc-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 620px) {
    .fly-showcase-grid.fly-sc-masonry, .fly-sc-masonry .fly-sc-col { gap: 10px; }
}
/* With a demo on the board the landing box sits right under it. With nothing
   above it, it takes the middle of the screen. */
.fly-empty.vdemo-on .fly-stage-box, .fly-empty.demo-on .fly-stage-box {
    margin-top: 26px;
    margin-bottom: auto;
    transform: none;
}
.fly-empty:not(.demo-on):not(.vdemo-on) .fly-stage-box { margin: auto; transform: none; }

/* Sketch to Image shows a tall drawing, so its pair runs 30 percent smaller */
.fly-ba-demo[data-tool="sketch"] .fly-ba {
    width: min(532px, 52vw);
    max-height: calc((100vh - 340px) * 0.7);
}

/* My Projects fills the screen, so the gallery itself has to scroll */
.fly-projects-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 40px;
}
.fly-projects-side { position: sticky; top: 0; align-self: flex-start; max-height: 100%; overflow-y: auto; }

/* A row with no upload in front of it stands for itself, so it sits 30%
   narrower than a photo series, and a square mark keeps its own shape. */
.fly-series-row:not(:has(.is-source)) { max-width: min(1050px, 67%); }
.fly-series-row:not(:has(.is-source)) .fly-series-cell img { aspect-ratio: 1 / 1; object-fit: contain; }

/* Logo panel: even rows of equal buttons instead of a ragged wrap */
#lgKind, #lgColor { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#lgStyle { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
#lgNum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
#lgKind .fly-chip, #lgStyle .fly-chip, #lgColor .fly-chip, #lgNum .fly-chip {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
}
#lgNum .fly-chip { padding-left: 0; padding-right: 0; }

/* The name of the tool stands 20px clear of the fan above it */
.fly-demo-hero .fly-demo-tool { margin-top: 20px; }

/* One head per tool: the name in big letters and a line saying what it does.
   The model line and every demo block's own title and line are off. */
.fly-demo-title { display: none; }
.fly-vdemo-title, .fly-vdemo-sub { display: none; }
.fly-demo-hero .fly-demo-sub { margin-top: 6px; }
/* Tool name reads in two tones: first word plain, the rest lime */
.fly-tool-accent { color: var(--fly-lime); }

/* Both explainer runs share one screen, so the scenes are kept small */
#flyExplainDemo { --exh: 232px; }
@media (max-height: 1000px) { #flyExplainDemo { --exh: 196px; } }
@media (max-height: 820px)  { #flyExplainDemo { --exh: 164px; } }
@media (max-height: 620px)  { #flyExplainDemo { --exh: 132px; } }
.fly-ex-demo + .fly-ex-demo { margin-top: 16px; padding-top: 16px; }
.fly-ex-row { gap: 10px; }

/* Shorts, waiting screen: same grey as the cards around it, and 30% taller */
.fly-sh-preview:has(#shEmpty:not([hidden])) {
    grid-template-rows: auto minmax(0, min(44vh, 500px)) auto minmax(0, min(60vh, 676px));
}
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { background: var(--fly-card); }

/* The line under the tool name stays on one line and sits right under it */
.fly-demo-hero .fly-demo-sub {
    margin-top: -18px;
    max-width: none;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .fly-demo-hero .fly-demo-sub { white-space: normal; max-width: 560px; }
}

/* Ad Studio: room for three commercials side by side, one for now */
.fly-mk-row { gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.fly-mk-row video {
    flex: 0 1 calc((100% - 32px) / 3);
    width: calc((100% - 32px) / 3);
    max-width: 420px;
    max-height: 52vh;
    object-fit: cover;
}
@media (max-width: 900px) {
    .fly-mk-row video { flex-basis: calc((100% - 16px) / 2); width: calc((100% - 16px) / 2); }
}

/* The row of sister tools keeps one distance from the description, on every
   tool, so Create Image no longer sits tighter than the rest */
.fly-demo-hero .fly-demo-tools { margin-top: 14px; }

/* Ad shelf: mixed shapes line up on one height, wide or tall */
.fly-mk-row { align-items: center; justify-content: center; }
.fly-mk-row video {
    flex: 0 0 auto;
    height: clamp(220px, 44vh, 420px);
    width: auto;
    max-width: 32%;
    max-height: none;
    object-fit: cover;
}
@media (max-width: 900px) { .fly-mk-row video { max-width: 46%; height: 30vh; } }

/* Every ad on the shelf offers to hand its sentence to the bar below */
.fly-mk-cell { position: relative; flex: 0 0 auto; display: flex; }
.fly-mk-row .fly-mk-cell video { display: block; }
.fly-mk-recreate {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    padding: 9px 26px;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: #0b0b0d;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.16s ease;
    white-space: nowrap;
}
.fly-mk-cell:hover .fly-mk-recreate, .fly-mk-recreate:focus-visible { opacity: 1; }
@media (hover: none) { .fly-mk-recreate { opacity: 1; } }
/* Ad shelf, final layout: one height for every ad, whatever its shape */
.fly-mk-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
}
.fly-mk-row .fly-mk-cell {
    flex: 0 0 auto;
    height: clamp(220px, 46vh, 430px);
    max-width: 32%;
    display: block;
    position: relative;
    border-radius: 14px;
    overflow: hidden;
}
.fly-mk-row .fly-mk-cell video {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.9);
}
@media (max-width: 900px) {
    .fly-mk-row { flex-wrap: wrap; }
    .fly-mk-row .fly-mk-cell { height: 30vh; max-width: 46%; }
}

/* ---------- Demo film over the whole page ---------- */
.fly-ex-stage.is-play { cursor: pointer; position: relative; }
.fly-ex-stage.is-play::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") no-repeat center / 26px 26px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    transition: transform .18s ease, background-color .18s ease;
}
.fly-ex-stage.is-play:hover::after { transform: scale(1.1); }
.fly-vpop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.88);
}
.fly-vpop[hidden] { display: none; }
.fly-vpop-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 70vw;
    max-height: 78vh;
}
.fly-vpop-video, .fly-vpop-img {
    max-width: 70vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: 18px;
    background: #000;
    display: block;
}
.fly-vpop-video[hidden], .fly-vpop-img[hidden], .fly-vpop-line[hidden] { display: none; }
.fly-vpop-line {
    max-width: min(70vw, 760px);
    margin: 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.55;
    color: #F4F4F5;
}
.fly-vpop-close {
    position: absolute;
    top: -14px; right: -14px;
    z-index: 1;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: #F4F4F5;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.fly-vpop-close:hover { background: rgba(255, 255, 255, 0.18); }
body.fly-vpop-on { overflow: hidden; }

/* The scenes are as wide as the film beside them, not stretched to fill the row */
.fly-ex-grid { justify-content: flex-start; }
.fly-ex-grid > .fly-ex-card { flex: 0 0 auto; width: auto; aspect-ratio: 9 / 16; }

/* ---------- Each explainer demo is one card ---------- */
.fly-ex-demo {
    display: block;
    padding: 14px;
    border: 1px solid var(--fly-line);
    border-radius: 22px;
    background: var(--fly-card);
}
.fly-ex-demo + .fly-ex-demo { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--fly-line); }
.fly-ex-media { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; }
.fly-ex-media .fly-ex-stage { flex: 0 0 auto; }
.fly-ex-media .fly-ex-grid { flex: 1 1 auto; width: auto; }
.fly-ex-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
}
.fly-ex-foot-txt { min-width: 0; }
.fly-ex-foot .fly-ex-topic { margin: 0 0 2px; }
.fly-ex-foot .fly-ex-line { margin: 0; }
.fly-ex-try {
    flex: 0 0 auto;
    padding: 8px 22px;
    border: 0;
    border-radius: 999px;
    background: #FFFFFF;
    color: #18181B;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}
.fly-ex-try:hover { background: rgba(255, 255, 255, 0.85); }
@media (max-width: 860px) {
    .fly-ex-media { flex-wrap: wrap; }
    .fly-ex-foot { flex-direction: column; align-items: flex-start; }
}

/* The two explainer cards stand side by side, and inside each one the film and
   its scenes share the width equally instead of running off the edge */
#flyExplainDemoRow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.fly-ex-demo + .fly-ex-demo { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--fly-line); }
.fly-ex-media .fly-ex-stage { flex: 1 1 0; min-width: 0; }
.fly-ex-media .fly-ex-stage video { height: auto; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.fly-ex-grid { height: auto; }
.fly-ex-grid > .fly-ex-card { flex: 1 1 0; min-width: 0; height: auto; aspect-ratio: 9 / 16; }
@media (max-width: 1100px) {
    #flyExplainDemoRow { grid-template-columns: 1fr; }
}

/* Explainer: two cards of equal height, frames as large as the room allows */
.fly-empty.vdemo-on:has(#flyExplainDemo:not([hidden])) { width: 98%; max-width: 1900px; }
#flyExplainDemoRow { align-items: stretch; }
.fly-ex-demo { display: flex; flex-direction: column; }
.fly-ex-demo .fly-ex-foot { margin-top: auto; }
.fly-ex-media .fly-ex-stage { flex: 1 1 0; min-width: 0; }
.fly-ex-media .fly-ex-grid { flex: 1 1 0; min-width: 0; }
.fly-ex-media .fly-ex-stage video { width: 100%; height: auto; aspect-ratio: 9 / 16; }

/* Five scenes stand in the card, anything past that scrolls inside the strip,
   so both cards show the same number of frames */
.fly-ex-media .fly-ex-grid { overflow-x: auto; scrollbar-width: none; }
.fly-ex-media .fly-ex-grid::-webkit-scrollbar { display: none; }
.fly-ex-grid > .fly-ex-card { flex: 0 0 calc((100% - 40px) / 5); }
@media (max-width: 700px) {
    .fly-ex-grid > .fly-ex-card { flex: 0 0 calc((100% - 32px) / 5); }
}

/* The strip is bound by the card, the frames past the fifth stay inside it */
.fly-ex-demo { overflow: hidden; }
.fly-ex-media { min-width: 0; max-width: 100%; }
.fly-ex-media .fly-ex-grid { width: auto; max-width: 100%; }

/* The scene strip carries its own arrow when there is more behind the edge */
.fly-ex-strip { position: relative; display: flex; min-width: 0; flex: 1 1 0; }
.fly-ex-strip .fly-ex-grid { flex: 1 1 0; }

/* The rail under the strip: drag it to walk through the rest of the scenes */
.fly-ex-strip { flex-direction: column; gap: 8px; }
.fly-ex-bar {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    flex: 0 0 auto;
}
.fly-ex-bar[hidden] { display: none; }
.fly-ex-bar-thumb {
    position: absolute;
    top: 0;
    height: 100%;
    min-width: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    cursor: grab;
}
.fly-ex-bar.is-dragging .fly-ex-bar-thumb { background: #FFFFFF; cursor: grabbing; }
.fly-ex-bar-thumb:hover { background: rgba(255, 255, 255, 0.8); }

.fly-ex-strip .fly-ex-grid { width: 100%; flex: 0 0 auto; }
.fly-ex-media { align-items: flex-start; }

/* The rest of the open tool group, listed down the left panel */
.fly-side-tools {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #3a3a3d;
}
.fly-side-tools[hidden] { display: none; }
.fly-side-tools-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.7);
    margin-bottom: 10px;
}
.fly-side-tools-list {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    margin-top: 0;
    overflow: visible;
}
.fly-side-tools-list[hidden] { display: none; }
.fly-side-tools-list .fly-demo-tool-chip {
    width: 100%;
    height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    text-align: left;
}
.fly-side-tools-list .fly-demo-tool-chip:hover { transform: none; }

/* Cinema writes at the top: the bar leads the board, the films follow */
.fly-cinebar { order: -1; margin: 14px auto 4px; }


/* Cinema head: the studio's own films run far back behind one line, and the
   band dissolves into the page instead of ending on an edge */
.fly-cine-hero {
    order: -2;
    position: relative;
    height: 380px;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-image:
        linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 100%),
        linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 100%),
        linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12%, rgba(0,0,0,1) 88%, rgba(0,0,0,0) 100%);
    mask-composite: intersect;
}
.fly-cine-hero[hidden] { display: none; }
.fly-cine-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    filter: brightness(0.88) saturate(0.9);
}
.fly-cine-hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(44,44,46,0.28) 0%, rgba(44,44,46,0.18) 45%, rgba(44,44,46,0.88) 100%),
        radial-gradient(75% 95% at 50% 45%, rgba(44,44,46,0) 0%, rgba(44,44,46,0.30) 100%);
}
.fly-cine-hero-title {
    position: relative;
    margin-bottom: 12px;
    text-align: center;
    white-space: nowrap;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    text-shadow: 0 6px 30px rgba(0,0,0,0.55);
}
.fly-cinebar { position: relative; z-index: 3; margin: 10px auto 4px; }
@media (max-width: 1100px) { .fly-cine-hero-title { font-size: 32px; } }
@media (max-width: 900px) {
    .fly-cine-hero { height: 250px; }
    .fly-cine-hero-title { font-size: 24px; margin-bottom: 44px; }
    .fly-cinebar { margin-top: 10px; }
}

/* Featured films: one row of four, pulled in from both edges */
.fly-cine-home { padding: 0 8%; }
.fly-cine-films { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .fly-cine-home { padding: 0; }
    .fly-cine-films { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Director panel rides in the row of controls now: a clapper icon and the
   ratio pill sitting beside the model and the count */
.fly-pb-controls .fly-director {
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
}
.fly-pb-controls .fly-director-name {
    padding: 0 2px;
    font-size: 0;
    letter-spacing: 0;
    color: var(--fly-text);
}
.fly-pb-controls .fly-director-name svg { width: 17px; height: 17px; }
.fly-pb-controls .fly-director-cell { min-width: 0; }
.fly-pb-controls .fly-director-btn {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
}
.fly-pb-controls .fly-director-btn small { font-size: 10px; }
.fly-pb-controls .fly-director-btn b { font-size: 13px; font-weight: 500; }

/* The Cinema bar sits at the head of the board, so its menus fall downward */
.fly-cinebar .fly-pb-drop { bottom: auto; top: calc(100% + 8px); }


/* Cinema model menu: search on top, sections, families with their own panel */
#cnModelDrop { padding: 0; }
.fly-mp-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    background: #333336;
    z-index: 2;
}
.fly-mp-search svg { width: 15px; height: 15px; color: var(--fly-dim); }
.fly-mp-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
}
.fly-mp-body { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.fly-mp-head {
    padding: 10px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fly-dim);
}
.fly-mp-badge {
    font-style: normal;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 6px;
    background: var(--fly-lime);
    color: #14140f;
    vertical-align: middle;
}
.fly-mp-fam { position: relative; }
.fly-mp-chev { margin-left: auto; padding-left: 10px; color: var(--fly-dim); font-size: 18px; line-height: 1; }
.fly-mp-subdrop {
    left: auto;
    top: 0;
    bottom: auto;
    min-width: 300px;
    max-height: 72vh;
    overflow-y: auto;
    scrollbar-width: none;
    padding: 6px;
    z-index: 95;
}
.fly-mp-subdrop::-webkit-scrollbar { display: none; }

/* Featured films: three per row, so each poster gets real size */
.fly-cine-films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .fly-cine-films { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fly-cine-films { grid-template-columns: 1fr; } }

/* The poster carries the card, no play badge */
.fly-cine-film-play { display: none !important; }
.fly-cine-film video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }


/* The three director calls, floating over the foot of the film band */
.fly-cine-tags {
    order: -2;
    position: relative;
    z-index: 4;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    width: min(980px, calc(100% - 40px));
    margin: -150px auto 0;
}
.fly-cine-tags[hidden] { display: none; }
.fly-cine-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(20,20,22,0.72);
    backdrop-filter: blur(6px);
    color: var(--fly-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.fly-cine-tag:hover { border-color: rgba(255,255,255,0.4); }
.fly-cine-tag svg { width: 15px; height: 15px; color: var(--fly-dim); }
.fly-cine-tag span { color: var(--fly-dim); }
.fly-cine-tag b { font-weight: 600; }

/* The picker: choices on the right, what they do to the shot on the left */
.fly-cnpick {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,10,12,0.72);
    backdrop-filter: blur(3px);
}
.fly-cnpick[hidden] { display: none; }
.fly-cnpick-box {
    width: min(860px, calc(100% - 40px));
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: #2f2f32;
    box-shadow: 0 30px 90px rgba(0,0,0,0.6);
    overflow: hidden;
}
.fly-cnpick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f4f4f5;
}
.fly-cnpick-x {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: transparent;
    color: #f4f4f5;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.fly-cnpick-x:hover { border-color: rgba(255,255,255,0.4); }
.fly-cnpick-body { display: grid; grid-template-columns: 1fr 300px; min-height: 340px; }
.fly-cnpick-view { padding: 28px 26px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.fly-cnpick-name { font-size: 30px; font-weight: 800; letter-spacing: 0.02em; color: #f4f4f5; }
.fly-cnpick-note { font-size: 14px; color: #f4f4f5; opacity: 0.75; }
.fly-cnpick-line {
    font-size: 14px;
    line-height: 1.7;
    color: #f4f4f5;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
}
.fly-cnpick-wheel {
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 12px;
    max-height: 420px;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fly-cnpick-wheel::-webkit-scrollbar { display: none; }
.fly-cnpick-item {
    border: 0;
    background: transparent;
    color: #f4f4f5;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-radius: 12px;
    opacity: 0.55;
    cursor: pointer;
}
.fly-cnpick-item:hover { background: rgba(255,255,255,0.07); opacity: 1; }
.fly-cnpick-item.active { opacity: 1; background: rgba(255,255,255,0.10); }
@media (max-width: 760px) {
    .fly-cnpick-body { grid-template-columns: 1fr; }
    .fly-cnpick-wheel { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); max-height: 240px; }
}


/* Cinema bar in two floors: writing, model and Generate on top, the director
   row running the full width underneath so nothing wraps into a stray line */
.fly-cinebar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 14px;
    row-gap: 12px;
}
.fly-cinebar > .fly-cine-mode { grid-column: 1; grid-row: 1; }
.fly-cinebar > .fly-pb-mid { grid-column: 2; grid-row: 1; }
.fly-cinebar > .fly-pb-generate { grid-column: 3; grid-row: 1; }
.fly-cinebar .fly-director {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    align-items: center;
    gap: 8px;
}
/* Everything a shot is set with lives on one line at the foot of the bar */
.fly-cinebar > .fly-pb-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.fly-cinebar .fly-director .fly-director-name { padding: 0 4px 0 2px; font-size: 0; }
.fly-cinebar .fly-director .fly-director-name svg { width: 17px; height: 17px; }
.fly-cinebar .fly-director .fly-director-cell { min-width: 0; }
.fly-cinebar .fly-director .fly-director-btn {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
}
.fly-cinebar .fly-director .fly-director-btn small { font-size: 10px; }
.fly-cinebar .fly-director .fly-director-btn b { font-size: 13px; font-weight: 500; }

/* The scene text is the point of the bar, so it gets the room */
.fly-cinebar #cnPrompt { font-size: 17px; }

/* Start and end frame sit on the same line as the model, not below it */
.fly-cinebar .fly-cine-frameslot {
    flex-direction: row;
    gap: 7px;
    min-width: 0;
    height: 32px;
    border-radius: 999px;
    font-size: 12px;
    padding: 0 14px;
    text-align: left;
}
.fly-cinebar .fly-cine-frameslot .fly-frameslot-plus { width: 16px; height: 16px; font-size: 12px; }
.fly-cinebar .fly-cine-frameslot img { border-radius: 999px; }
@media (max-width: 900px) {
    .fly-cinebar { grid-template-columns: 1fr; }
    .fly-cinebar > .fly-cine-mode,
    .fly-cinebar > .fly-pb-mid,
    .fly-cinebar > .fly-pb-generate { grid-column: 1; grid-row: auto; }
    .fly-cinebar .fly-director { grid-row: auto; }
}

/* The foot of the Cinema bar stays one line; a narrow window slides it */
.fly-cinebar > .fly-pb-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.fly-cinebar > .fly-pb-controls::-webkit-scrollbar { display: none; }
.fly-cinebar > .fly-pb-controls > *,
.fly-cinebar .fly-director > * { flex: none; }
.fly-cinebar .fly-director { flex-wrap: nowrap; }
.fly-cinebar > .fly-pb-controls .fly-pb-ctrl { padding: 6px 12px; font-size: 12.5px; }
.fly-cinebar .fly-director-btn { padding: 0 11px; gap: 6px; }
.fly-cinebar .fly-cine-frameslot { padding: 0 11px; }
/* Cinema carries more controls than the other boards, so it gets more width */
.fly-cinebar { width: min(1100px, calc(100% - 40px)); }
.fly-cine-tags { width: min(1100px, calc(100% - 40px)); }

/* A scrolling row clips its own menus, so the foot stays visible and simply
   wraps on a narrow window instead */
.fly-cinebar > .fly-pb-controls { overflow: visible; }
@media (max-width: 1120px) { .fly-cinebar > .fly-pb-controls { flex-wrap: wrap; } }
.fly-cinebar { z-index: 30; }
.fly-promptbar .fly-pb-drop { z-index: 220; }
.fly-cine-tags { z-index: 31; }

/* ---------- Cinema menus: brushed metal, not flat grey ---------- */
.fly-promptbar .fly-pb-drop {
    position: absolute;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
        radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, #3c3c41 0%, #303034 45%, #2a2a2e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 28px 70px rgba(0,0,0,0.60);
    backdrop-filter: blur(10px);
}
#cnModelDrop, .fly-mp-subdrop { overflow: hidden auto; }
.fly-mp-search {
    background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.fly-mp-search input { letter-spacing: 0.01em; }
.fly-mp-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(244,244,245,0.55);
}
.fly-mp-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0));
}
.fly-promptbar .fly-pb-drop .fly-mp-item,
.fly-promptbar .fly-pb-drop button {
    position: relative;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: background 0.14s, border-color 0.14s, transform 0.12s;
}
.fly-promptbar .fly-pb-drop .fly-mp-item:hover,
.fly-promptbar .fly-pb-drop button:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border-color: rgba(255,255,255,0.16);
    transform: translateX(2px);
}
.fly-promptbar .fly-pb-drop .fly-mp-item::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--fly-lime);
    opacity: 0;
    transition: opacity 0.14s;
}
.fly-promptbar .fly-pb-drop .fly-mp-item:hover::before { opacity: 0.9; }
.fly-promptbar .fly-pb-drop .fly-pbd-icon {
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 6px rgba(0,0,0,0.35);
}
.fly-mp-badge {
    background: linear-gradient(180deg, #e6ff6a, #c9ee2a);
    box-shadow: 0 2px 8px rgba(201,238,42,0.35);
}
.fly-mp-chev { transition: transform 0.14s, color 0.14s; }
.fly-mp-fam:hover .fly-mp-chev { transform: translateX(3px); color: var(--fly-lime); }
/* The search field is pinned, so it needs a solid floor under the sheen */
.fly-mp-search {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
        linear-gradient(180deg, #3b3b40, #34343a);
}

/* Badges wear the studio cut everywhere: straight edges, sheared sides */
.fly-mp-badge {
    display: inline-block;
    border-radius: 0;
    padding: 3px 11px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #14140f;
    background: var(--fly-lime);
    box-shadow: none;
    clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

/* Label and value on the same line, whatever their size */
.fly-cinebar .fly-director-btn { align-items: center; line-height: 1; }
.fly-cinebar .fly-director-btn small,
.fly-cinebar .fly-director-btn b {
    display: flex;
    align-items: center;
    line-height: 1;
    height: 14px;
    margin: 0;
}
.fly-cinebar .fly-director-btn b { position: relative; top: 0.5px; }

/* Generate on the Cinema bar: liquid glass, lit from above, sheen on hover */
.fly-pb-generate, .fly-generate {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255,255,255,0.35);
    background:
        radial-gradient(120% 140% at 30% -25%, rgba(255,255,255,0.95), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #e4ff6b 0%, #cbf227 45%, #aede0f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.9),
        inset 0 -3px 10px rgba(0,0,0,0.18),
        0 12px 28px rgba(190,232,20,0.32),
        0 2px 0 rgba(0,0,0,0.22);
    transition: transform 0.12s, box-shadow 0.16s, filter 0.16s;
}
.fly-pb-generate::before, .fly-generate::before {
    content: '';
    position: absolute;
    inset: 1px 1px 45% 1px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
    pointer-events: none;
}
.fly-pb-generate::after, .fly-generate::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -40%;
    width: 40%;
    height: 220%;
    transform: rotate(18deg) translateX(-120%);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.65), rgba(255,255,255,0));
    transition: transform 0.65s ease;
    pointer-events: none;
}
.fly-pb-generate:hover, .fly-generate:hover {
    filter: brightness(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        inset 0 -3px 10px rgba(0,0,0,0.16),
        0 16px 36px rgba(190,232,20,0.45),
        0 2px 0 rgba(0,0,0,0.22);
}
.fly-pb-generate:hover::after, .fly-generate:hover::after { transform: rotate(18deg) translateX(420%); }
.fly-pb-generate:active, .fly-generate:active { transform: translateY(1px); }

/* Same button, only the size changes with the board it sits on */
.fly-generate { display: flex; align-items: center; justify-content: center; gap: 10px; }
.fly-generate svg { width: 18px; height: 18px; }
.fly-generate:hover { transform: none; }
.fly-pb-generate:disabled, .fly-generate:disabled { filter: none; box-shadow: none; }

/* An empty board says nothing: no frame, no watermark, no instructions.
   The first result is the first thing on it. */
.fly-empty-mark { display: none; }
.fly-empty > p { display: none; }
.fly-stage-box { display: none !important; }
/* Without the old frame under it the head sat on the header, so it gets air */
.fly-empty.demo-on,
.fly-empty.vdemo-on,
.fly-empty.mlib-on { padding-top: 56px; }
@media (max-width: 900px) {
    .fly-empty.demo-on,
    .fly-empty.vdemo-on,
    .fly-empty.mlib-on { padding-top: 60px; }
}

/* Every tool opens the same way: the board sticks to the top of the canvas and
   the head keeps one rhythm, fan, title, line, then the tool's own demo */
.fly-empty:not([hidden]) { align-self: flex-start; width: 100%; }
.fly-empty.demo-on,
.fly-empty.vdemo-on,
.fly-empty.mlib-on { padding-top: 56px; }
.fly-demo-hero { gap: 0; }
.fly-demo-fan { margin-bottom: 16px; }
.fly-demo-tool { margin-bottom: 6px; }
.fly-demo-title { margin-bottom: 6px; }
.fly-demo-sub { margin-bottom: 0; }
.fly-empty.demo-on .fly-demo-hero,
.fly-empty.vdemo-on .fly-demo-hero,
.fly-empty.mlib-on .fly-demo-hero { margin: 0 0 18px; padding: 0; }
.fly-vdemo, .fly-ba-demo, .fly-series-demo, .fly-motion-lib, .fly-trans-lib, .fly-cine-home { margin-top: 0; }
.fly-vdemo-title { margin-bottom: 6px; }
.fly-vdemo-sub { margin-bottom: 18px; }
/* Full width board, everything on it still stacks down the middle */
.fly-empty:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
.fly-empty > * { max-width: 100%; }
/* The series used to float in the middle of the board, it now opens like the rest */
.fly-empty.vdemo-on:has(#flySeriesDemo:not([hidden])) { justify-content: flex-start; }
#flySeriesDemo { margin: 0; }

/* One standard for every tool that shows a single before and after pair:
   the size Sketch to Image already used. Same box, same rhythm, everywhere. */
.fly-ba,
.fly-ba-demo[data-tool] .fly-ba {
    width: min(532px, 52vw);
    max-height: calc((100vh - 340px) * 0.7);
    aspect-ratio: 4 / 3;
    margin-top: 44px;
}
/* The run of results keeps the same air under the head as the pair does */
.fly-series-demo .fly-series-row { margin-top: 34px; }
.fly-ba-demo { gap: 0; }
.fly-ba-demo .fly-vdemo-title { margin-bottom: 6px; }
.fly-ba-demo .fly-vdemo-sub { margin-bottom: 14px; }

/* Shorts Studio: the line under the tool name keeps the same gap as the other
   pages, and the waiting screen under the three steps is gone. */
.fly-shd-hero .fly-demo-sub { margin-top: 6px; }
.fly-sh-preview:has(#shEmpty:not([hidden])) {
    grid-template-rows: auto minmax(0, min(44vh, 500px)) auto;
}
.fly-sh-preview:has(#shEmpty:not([hidden])) .fly-sh-phone { display: none; }
/* The tool name and the line under it were touching */
.fly-ba-demo .fly-vdemo-sub,
.fly-series-demo .fly-vdemo-sub,
.fly-vdemo .fly-vdemo-sub { margin-top: 10px; }
.fly-empty.demo-on .fly-demo-hero,
.fly-empty.vdemo-on .fly-demo-hero,
.fly-empty.mlib-on .fly-demo-hero { margin-bottom: 10px; }
/* The line under the tool name had a negative margin pulling it onto the title */
.fly-demo-hero .fly-demo-sub { margin-top: -6px; }

/* The left panel still scrolls with the wheel, but the bar itself is not drawn */
.fly-panel { scrollbar-width: none; }
.fly-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Logo: the brand name field wears the same skin as the text box under it */
#lgName.fly-mk-input {
    background: linear-gradient(180deg, #343437, #2c2c2f);
    border: 1px solid var(--fly-line);
    border-radius: var(--fly-radius);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
    padding: 11px 12px;
    font-size: inherit;
}
#lgName.fly-mk-input:focus { background: linear-gradient(180deg, #343437, #2c2c2f); border-color: rgba(255,255,255,0.3); }

/* Edit Video demo was filling the board, it reads fine at half the size */
.fly-ed-row { max-width: min(760px, 50vw); margin-left: auto; margin-right: auto; }
.fly-ed-stage video { max-height: 42vh; }
.fly-ed-thumb img { height: 84px; }
@media (max-width: 1100px) { .fly-ed-row { max-width: 92vw; } }
/* The four takes stand beside the clip, not under it */
.fly-ed-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 158px;
    align-items: start;
    gap: 14px;
    max-width: min(900px, 60vw);
}
.fly-ed-stage { grid-column: 1; grid-row: 1; }
.fly-ed-strip { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; gap: 10px; }
.fly-ed-thumb img { height: 92px; }
.fly-ed-cap { grid-column: 1 / -1; }
@media (max-width: 1100px) {
    .fly-ed-row { grid-template-columns: 1fr; max-width: 92vw; }
    .fly-ed-strip { grid-column: 1; grid-row: auto; grid-template-columns: repeat(4, 1fr); }
}
/* The column of takes runs the full height of the clip beside it */
.fly-ed-row { align-items: stretch; }
.fly-ed-strip { grid-template-rows: repeat(4, minmax(0, 1fr)); height: 100%; }
.fly-ed-thumb { height: 100%; min-height: 0; }
.fly-ed-thumb img { height: 100%; }
/* Audio has no picture to hang under the header, so it keeps the middle */
.fly-empty:has(#flyAudioDemo:not([hidden])) {
    align-self: center;
    padding-top: 0;
    margin-top: -60px;
}


/* ---------- Audio boards: our own transport, and a room to play it in ---------- */
.fly-audio-demo {
    position: relative;
    padding: 34px 26px 30px;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(90% 120% at 50% -10%, rgba(211,243,75,0.10), rgba(211,243,75,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    overflow: hidden;
}
.fly-audio-demo::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -40%;
    width: 720px;
    height: 720px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(211,243,75,0.13), rgba(211,243,75,0) 62%);
    filter: blur(10px);
    pointer-events: none;
    animation: flyApGlow 7s ease-in-out infinite;
}
@keyframes flyApGlow {
    0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.95; transform: translateX(-50%) scale(1.06); }
}
.fly-audio-demo > * { position: relative; z-index: 1; }
.fly-audio-demo-player { display: none; }

.fly-ap {
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(560px, 90%);
    margin: 20px auto 0;
    padding: 12px 18px 12px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background:
        radial-gradient(120% 160% at 20% -40%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
        linear-gradient(180deg, #3a3a3f, #2c2c30);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 18px 44px rgba(0,0,0,0.45);
}
.fly-ap-key {
    flex: none;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background:
        radial-gradient(120% 140% at 30% -20%, rgba(255,255,255,0.9), rgba(255,255,255,0) 55%),
        linear-gradient(180deg, #e4ff6b, #b6e510);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 8px 20px rgba(190,232,20,0.35);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s, box-shadow 0.16s;
}
.fly-ap-key:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 12px 28px rgba(190,232,20,0.5); }
.fly-ap-key:active { transform: translateY(1px); }
.fly-ap-ico { display: block; }
.fly-ap-ico-play {
    width: 0; height: 0;
    margin-left: 3px;
    border-left: 13px solid #14140f;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
}
.fly-ap-ico-pause {
    width: 13px; height: 15px;
    border-left: 4px solid #14140f;
    border-right: 4px solid #14140f;
}
.fly-ap-wave {
    position: relative;
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    overflow: hidden;
}
.fly-ap-wave i {
    flex: 1;
    min-width: 2px;
    border-radius: 2px;
    background: rgba(244,244,245,0.28);
    transform-origin: center;
}
.fly-ap.is-playing .fly-ap-wave i { animation: flyApBar 1.1s ease-in-out infinite alternate; }
@keyframes flyApBar {
    from { transform: scaleY(0.55); }
    to   { transform: scaleY(1.25); }
}
.fly-ap-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: linear-gradient(90deg, rgba(211,243,75,0.25), rgba(211,243,75,0.55));
    mix-blend-mode: overlay;
    pointer-events: none;
    transition: width 0.12s linear;
}
.fly-ap-time {
    flex: none;
    min-width: 74px;
    text-align: right;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: rgba(244,244,245,0.7);
}

/* Audio plays in a room: one dark studio plate behind the whole board, dimmed
   almost to nothing and fading out at the edges. 37 KB, and only ever fetched
   when an audio tool is open. */
.fly-empty:has(#flyAudioDemo:not([hidden]))::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    background: url('/public/assets/fly/audio-studio.webp') center center / cover no-repeat;
    opacity: 0.12;
    -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000 25%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(80% 70% at 50% 45%, #000 25%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.fly-empty:has(#flyAudioDemo:not([hidden])) > * { position: relative; z-index: 1; }

/* Scrollbars on the studio stay dark and thin, never a white system bar */
.fly-body *, .fly-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}
.fly-body *::-webkit-scrollbar, .fly-body::-webkit-scrollbar { width: 8px; height: 8px; }
.fly-body *::-webkit-scrollbar-track, .fly-body::-webkit-scrollbar-track { background: transparent; }
.fly-body *::-webkit-scrollbar-thumb, .fly-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}
.fly-body *::-webkit-scrollbar-thumb:hover, .fly-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.28);
}
.fly-body *::-webkit-scrollbar-corner, .fly-body::-webkit-scrollbar-corner { background: transparent; }

/* No visible scrollbar anywhere in the studio, the wheel still scrolls */
html:has(.fly-body), .fly-body, .fly-body * { scrollbar-width: none; -ms-overflow-style: none; }
html:has(.fly-body)::-webkit-scrollbar,
.fly-body::-webkit-scrollbar,
.fly-body *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Cinema hero: the film reads brighter, the headline steps back */
.fly-cine-hero-video { opacity: 0.78; filter: brightness(1.02) saturate(1.0); }
.fly-cine-hero-veil {
    background:
        linear-gradient(180deg, rgba(44,44,46,0.14) 0%, rgba(44,44,46,0.08) 45%, rgba(44,44,46,0.78) 100%),
        radial-gradient(75% 95% at 50% 45%, rgba(44,44,46,0) 0%, rgba(44,44,46,0.18) 100%);
}
.fly-cine-hero-title {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 700;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
.fly-cine-hero-title span, .fly-cine-hero-title em { opacity: 0.8; }

/* More film on screen: the hero grows and its contents sit 50px lower */
.fly-cine-hero { height: 430px; padding-top: 100px; box-sizing: border-box; }
.fly-cinebar { margin-top: 60px; }
@media (max-width: 700px) { .fly-cine-hero { height: 300px; padding-top: 60px; } }

/* Director calls: a slim strip of pills sitting just above the writing bar,
   left aligned with it, the way the reference does it. Cinema only. */
.fly-cine-tags {
    order: -1;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto 8px;
    padding: 0;
    background: none;
    border: 0;
}
.fly-cine-tags .fly-cine-tag {
    background: linear-gradient(180deg, #37373a, #2d2d2f);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    padding: 8px 14px;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fly-cine-tags .fly-cine-tag:hover { border-color: rgba(255, 255, 255, 0.34); }
.fly-cinebar { margin-top: 0; }
.fly-cine-hero { margin-bottom: 44px; }
@media (max-width: 700px) { .fly-cine-tags { flex-wrap: wrap; } }

/* Close the gap: the headline sits lower in the band and the pills follow it */
.fly-cine-hero { padding-top: 210px; margin-bottom: 4px; }
.fly-cine-tags { margin-bottom: 10px; }
@media (max-width: 700px) { .fly-cine-hero { padding-top: 120px; } }

/* Another 100px closer to the headline */
.fly-cine-hero { padding-top: 310px; margin-bottom: 0; }
@media (max-width: 700px) { .fly-cine-hero { padding-top: 170px; } }

/* Belt and braces: the pills never render outside the Cinema board */
body:not(.fly-mode-cinema) .fly-cine-tags { display: none !important; }

/* Tighter gap between the studio bar and the film shelf */
.fly-cine-home { margin-top: -70px; }
.fly-cine-home .fly-motion-lib-title { margin-bottom: 10px; }
@media (max-width: 700px) { .fly-cine-home { margin-top: -20px; } }

/* The whole Cinema head moves up another 100px */
.fly-cine-hero { height: 330px; padding-top: 210px; }
@media (max-width: 700px) { .fly-cine-hero { height: 240px; padding-top: 120px; } }

/* The band fades only into the page below, the sides run edge to edge */
.fly-cine-hero {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 42%, rgba(0,0,0,0) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* Create Image writes at the top: the bar sits right under the head line, and
   the wall of shared work fills the board under it. Every other board keeps
   its bar at the foot, so this only holds while the wall is on. */
body.fly-pbtop #flyPromptbar {
    position: fixed;
    margin: 0;
    z-index: 6;
}

/* Image board: the head starts close under the top bar */
body.fly-pbtop .fly-empty.demo-on { padding-top: 24px; }

/* ---------- Director picker, card grid ---------- */
.fly-cnpick-box { width: min(1080px, calc(100% - 40px)); background: #232326; border-radius: 26px; }
.fly-cnpick-head { font-size: 14.5px; letter-spacing: 0.02em; color: rgba(244,244,245,0.72); }
.fly-cnpick-body { display: block; min-height: 0; }
.fly-cnpick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px 6px;
    max-height: min(62vh, 560px);
    overflow-y: auto;
    scrollbar-width: none;
}
.fly-cnpick-grid::-webkit-scrollbar { display: none; }
.fly-cnpick-card {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;
    overflow: hidden;
    background: #17171a;
    cursor: pointer;
    text-align: left;
    transition: transform 0.14s ease, border-color 0.14s ease;
}
.fly-cnpick-card img {
    display: block;
    width: 100%;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    opacity: 0.94;
}
.fly-cnpick-auto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 8 / 5;
    background: linear-gradient(140deg, #34343a, #1d1d21);
    color: rgba(244, 244, 245, 0.5);
    font-size: 13px;
    letter-spacing: 0.28em;
    font-weight: 700;
}
.fly-cnpick-cap {
    display: block;
    padding: 9px 12px 11px;
    background: linear-gradient(180deg, #232326, #1c1c1f);
}
.fly-cnpick-cap b { display: block; font-size: 13.5px; font-weight: 650; color: #f4f4f5; }
.fly-cnpick-cap i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(244, 244, 245, 0.5);
}
.fly-cnpick-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.32); }
.fly-cnpick-card.active { border-color: var(--fly-lime); }
.fly-cnpick-tick { display: none; }
.fly-cnpick-card.active .fly-cnpick-tick {
    display: block;
    position: absolute;
    top: 9px;
    right: 9px;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--fly-lime);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.fly-cnpick-card.active .fly-cnpick-tick::after {
    content: '';
    position: absolute;
    left: 6px; top: 4px;
    width: 5px; height: 10px;
    border: solid #14170c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* the strip under the grid explains the hovered card in the studio's own words */
.fly-cnpick-foot {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #1d1d20;
}
.fly-cnpick-foot-l { flex: 0 0 auto; min-width: 190px; }
.fly-cnpick-foot .fly-cnpick-name { font-size: 17px; font-weight: 700; }
.fly-cnpick-foot .fly-cnpick-note { font-size: 12.5px; opacity: 0.6; margin-top: 2px; }
.fly-cnpick-foot .fly-cnpick-line {
    flex: 1 1 auto;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(244, 244, 245, 0.62);
    max-height: 54px;
    overflow: hidden;
}
@media (max-width: 900px) {
    .fly-cnpick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fly-cnpick-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Director pills parked on 02.08.2026: the picker would not open, so they are
   off the board until someone fixes the click. Markup, data and thumbs stay. */

/* Remove Background: the cut out sits on the grey and white checker that says
   transparent, not on a black board */
.fly-ba-demo[data-tool="rembg"] .fly-ba {
    background-color: #f2f2f2;
    background-image:
        linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%),
        linear-gradient(45deg, #d0d0d0 25%, transparent 25%, transparent 75%, #d0d0d0 75%);
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
}
/* Uncrop shows a 21:9 pair, so its box keeps that shape and runs 40% wider
   than the standard box, otherwise the sides it painted would be cropped off */
.fly-ba-demo[data-tool="uncrop"] .fly-ba {
    width: min(745px, 73vw);
    aspect-ratio: 21 / 9;
    max-height: none;
}

/* Hair Color Changer: pair sits a touch lower under the heading */
.fly-ba-demo[data-tool="haircolor"] .fly-ba { margin-top: 28px; }

/* Fun group: one band across the Image menu, three columns of two rows, so
   the six tools fit without stretching the columns above them. */
.fly-mega-grid .fly-mega-fun { grid-column: 1 / -1; }
.fly-mega-fun-grid {
    display: grid;
    grid-template-columns: repeat(3, 218px);
    column-gap: 6px;
    row-gap: 2px;
}

/* Baby Face Predictor shows three pictures at once, no handle to drag: the two
   parents stand side by side and the child stands on its own beside them. */
.fly-trio-demo { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fly-trio-demo[hidden] { display: none; }
.fly-trio-row { display: flex; align-items: center; gap: 22px; margin-top: 10px; }
.fly-trio-in { display: flex; gap: 8px; }
.fly-trio-row img {
    height: min(calc(100vh - 340px), 420px);
    width: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.fly-trio-sign { font-size: 26px; font-weight: 700; color: var(--fly-lime); line-height: 1; }
@media (max-width: 900px) {
    .fly-trio-row { gap: 12px; }
    .fly-trio-row img { height: min(calc(100vh - 380px), 260px); }
}


/* Luxoret Cinema 4.0 sits at the head of the model menu. The row that is
   running carries a lime tick on the right, the way a picked take is marked. */
.fly-pb-drop .fly-mp-item.active { background: rgba(215, 242, 5, 0.08); }
.fly-pb-drop .fly-mp-item.active::after {
    content: "";
    width: 15px;
    height: 9px;
    margin-left: auto;
    flex: 0 0 auto;
    border-left: 2px solid var(--fly-lime);
    border-bottom: 2px solid var(--fly-lime);
    transform: rotate(-45deg) translateY(-2px);
}
.fly-pb-drop .fly-mp-item.fly-mp-fam.active::after { content: none; }


/* ---------- Director picker, the stage version ----------
   One big frame instead of a grid of stamps. The strip of choices runs under
   it, and where two choices can be held against the same shot the frame
   splits down a handle: what is in force on the left, what the cursor is on
   to the right. */
.fly-cnpick-box {
    width: min(1180px, calc(100% - 48px));
    background: #202023;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.68);
}
.fly-cnpick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 244, 245, 0.62);
    border-bottom: 0;
}

.fly-cnstage {
    position: relative;
    margin: 0 22px;
    border-radius: 16px;
    overflow: hidden;
    background: #141416;
    aspect-ratio: 21 / 9;
    width: auto;
    user-select: none;
    cursor: default;
}
.fly-cnstage-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fly-cnstage-img[hidden] { display: none; }
.fly-cnstage-over {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 50%);
}
.fly-cnstage-over[hidden] { display: none; }
.fly-cnstage-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255, 255, 255, 0.9);
    cursor: ew-resize;
    z-index: 3;
}
.fly-cnstage-handle[hidden] { display: none; }
.fly-cnstage-handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    background: rgba(20, 20, 22, 0.72);
    border: 2px solid #fff;
    backdrop-filter: blur(4px);
}
.fly-cnstage-handle i::before,
.fly-cnstage-handle i::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.fly-cnstage-handle i::before { left: 9px; transform: rotate(-135deg); }
.fly-cnstage-handle i::after { right: 9px; transform: rotate(45deg); }
.fly-cnstage-tag {
    position: absolute;
    bottom: 14px;
    z-index: 4;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.66);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
    font-weight: 600;
    color: #f4f4f5;
    pointer-events: none;
}
.fly-cnstage-tag[hidden] { display: none; }
.fly-cnstage-tag.is-l { left: 14px; }
.fly-cnstage-tag.is-r { right: 14px; color: var(--fly-lime); }
.fly-cnstage-auto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: rgba(244, 244, 245, 0.34);
}
.fly-cnstage-auto[hidden] { display: none; }

/* What the choice is, and the words it puts in the prompt */
.fly-cnpick-read {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 16px 22px 14px;
    height: 106px;
    box-sizing: border-box;
}
.fly-cnpick-read-l { flex: 0 0 210px; }
.fly-cnpick-read .fly-cnpick-name { font-size: 21px; font-weight: 700; color: #f4f4f5; letter-spacing: 0; }
.fly-cnpick-read .fly-cnpick-note { margin: 2px 0 0; font-size: 13px; color: rgba(244, 244, 245, 0.66); }
.fly-cnpick-read .fly-cnpick-line {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 13px;
    line-height: 1.45;
    color: rgba(244, 244, 245, 0.82);
    height: 76px;
    box-sizing: border-box;
    overflow: hidden;
}

/* The strip of choices */
.fly-cnstrip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 22px 22px;
    scrollbar-width: none;
}
.fly-cnstrip::-webkit-scrollbar { display: none; }
.fly-cncard {
    flex: 0 0 132px;
    position: relative;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.22);
    user-select: none;
    border-radius: 12px;
    overflow: hidden;
    background: #2a2a2e;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.fly-cncard img {
    display: block;
    width: 100%;
    height: 74px;
    object-fit: cover;
}
.fly-cncard-auto {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: rgba(244, 244, 245, 0.4);
}
.fly-cncard b {
    display: block;
    padding: 8px 10px 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #f4f4f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fly-cncard:hover { border-color: rgba(255, 255, 255, 0.55); }
.fly-cncard.active { border-color: var(--fly-lime); }
.fly-cncard.active::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 9px;
    border-left: 2px solid var(--fly-lime);
    border-bottom: 2px solid var(--fly-lime);
    transform: rotate(-45deg);
}

@media (max-width: 820px) {
    .fly-cnpick-read { flex-direction: column; align-items: flex-start; gap: 10px; height: auto; }
    .fly-cnpick-read .fly-cnpick-line { height: auto; min-height: 60px; }
    .fly-cncard { flex-basis: 116px; }
}


/* The strip is wider than the box, so it carries its own arrows */
.fly-cnstrip-wrap { position: relative; }
.fly-cnstrip-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 34px;
    height: 34px;
    margin-top: -22px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(24, 24, 27, 0.86);
    backdrop-filter: blur(6px);
    color: #f4f4f5;
    font-size: 21px;
    line-height: 30px;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.fly-cnstrip-arrow.is-l { left: 8px; }
.fly-cnstrip-arrow.is-r { right: 8px; }
.fly-cnstrip-arrow:hover { border-color: rgba(255, 255, 255, 0.5); }
.fly-cnstrip-arrow.is-off { opacity: 0.22; pointer-events: none; }

/* A thin rail under the strip so it reads as scrollable at a glance */
.fly-cnstrip { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.28) transparent; }
.fly-cnstrip::-webkit-scrollbar { display: block; height: 6px; }
.fly-cnstrip::-webkit-scrollbar-track { background: transparent; }
.fly-cnstrip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 999px; }
.fly-cnstrip::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.45); }

.fly-block-sub { margin: 22px 0 0; font-size: 16px; font-weight: 700; }


/* A genre that owns a clip plays it in the stage, over its own still */
#cnStageVid { z-index: 2; }
#cnStageVid[hidden] { display: none; }
.fly-cncard.has-clip::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 2;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* MCP page: the connector url, the client tabs, the three steps */
.fly-mcp-hero { display: flex; flex-direction: column; gap: 14px; }
.fly-mcp-urlrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fly-mcp-urlrow code {
    flex: 1 1 320px; padding: 12px 14px; border-radius: 10px;
    background: #1F1F21; border: 1px solid #333; font-size: 14px;
    word-break: break-all; color: #F5F5F5;
}
.fly-mcp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fly-mcp-tabs button {
    padding: 8px 16px; border-radius: 999px; border: 1px solid #3A3A3C;
    background: transparent; color: #E4E4E7; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fly-mcp-tabs button.active { background: #F5F5F5; color: #18181B; border-color: #F5F5F5; }
.fly-mcp-panel { margin-top: 6px; }
.fly-mcp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fly-mcp-step {
    padding: 16px; border-radius: 12px; background: #232325; border: 1px solid #313134;
}
.fly-mcp-step b { display: block; margin: 8px 0 4px; font-size: 15px; }
.fly-mcp-step p { margin: 0; font-size: 13.5px; color: #C9C9CE; }
.fly-mcp-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 999px;
    background: #303033; font-size: 13px; font-weight: 700;
}
@media (max-width: 860px) { .fly-mcp-steps { grid-template-columns: 1fr; } }

/* Brand marks on the MCP client tabs */
.fly-mcp-tabs button { display: inline-flex; align-items: center; gap: 8px; }
.fly-mcp-mark { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; flex: none; }
.fly-mcp-glyph { width: 16px; height: 16px; flex: none; }

/* The code block under the steps needs air, it is a separate thing */
.fly-mcp-panel .fly-code { margin-top: 14px; }

/* How it goes: three examples side by side, nothing cropped */
.fly-mcp-examples {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-top: 6px; align-items: stretch;
}
.fly-mcp-example {
    display: flex; flex-direction: column; gap: 12px;
    padding: 16px; border-radius: 14px; background: #232325; border: 1px solid #313134;
}
.fly-mcp-said { display: flex; flex-direction: column; gap: 8px; }
.fly-mcp-who {
    align-self: flex-start; padding: 3px 10px; border-radius: 999px;
    background: #303033; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.fly-mcp-said p {
    margin: 0; padding: 12px 14px; border-radius: 12px; background: #2C2C2E;
    font-size: 14px; line-height: 1.55; color: #F0F0F2; min-height: 96px;
}
.fly-mcp-got { display: flex; flex-direction: column; gap: 10px; }
.fly-mcp-got img, .fly-mcp-got video {
    width: 100%; height: 300px; object-fit: contain;
    border-radius: 12px; display: block; background: #141416;
}
.fly-mcp-got-audio { flex: 1; min-height: 310px; justify-content: center; }
.fly-mcp-got-audio .fly-ap-mount { margin: auto 0; }
.fly-mcp-got-audio .fly-mcp-meta { margin-top: 0; }
.fly-mcp-got-audio audio { width: 100%; height: 44px; }
.fly-mcp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: #C9C9CE; }
.fly-mcp-meta code {
    padding: 3px 8px; border-radius: 6px; background: #1c1c20;
    font-size: 12px; color: #F5F5F5;
}
.fly-mcp-meta span:last-child { margin-left: auto; font-weight: 600; color: #E4E4E7; }
@media (max-width: 980px) { .fly-mcp-examples { grid-template-columns: 1fr; } .fly-mcp-said p { min-height: 0; } .fly-mcp-got-audio { min-height: 0; } .fly-mcp-got-audio .fly-ap-mount { margin: 0; } }

/* The studio audio deck, inside an example column */
.fly-mcp-got .fly-ap { width: 100%; margin: 0; }

/* The one line that tells you where the key comes from */
.fly-mcp-first { margin: 0; font-size: 14.5px; color: #E4E4E7; }
.fly-mcp-first a { color: #C6F24E; text-decoration: underline; }


/* A director pill with a choice in force wears that frame as a small screen */
.fly-cine-tags .fly-cine-tag .fly-cine-tag-dot {
    width: 38px;
    height: 22px;
    min-width: 38px;
    max-width: 38px;
    flex: 0 0 38px;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.fly-cine-tags .fly-cine-tag .fly-cine-tag-dot[hidden] { display: none; }


/* The row that only names the engine behind the studio is not clickable */
.fly-pb-drop .fly-mp-item.is-note { cursor: default; opacity: 0.72; }
.fly-pb-drop .fly-mp-item.is-note:hover { background: transparent; }


/* The clapperboard in the cinema bar was a group label with its text switched
   off, so it read as a dead button. The row speaks for itself without it. */
.fly-cinebar .fly-director .fly-director-name { display: none; }


/* ---------- The written section page ----------
   It sits under the board, so the studio opens on the tool as before and the
   copy is there for anyone who scrolls, and for a search engine. */
.fly-seo {
    border-top: 1px solid var(--fly-line);
    background: #1a1a1d;
    padding: 54px 24px 70px;
}
.fly-seo-in { max-width: 940px; margin: 0 auto; }
.fly-seo h1 {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #F4F4F5;
}
.fly-seo h2 {
    margin: 38px 0 12px;
    font-size: 19px;
    font-weight: 700;
    color: #F4F4F5;
}
.fly-seo p {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.62;
    color: #E4E4E7;
}
.fly-seo .fly-seo-lead { font-size: 17px; color: #F4F4F5; }
.fly-seo-steps { margin: 0; padding-left: 20px; }
.fly-seo-steps li { margin-bottom: 8px; font-size: 15.5px; line-height: 1.6; color: #E4E4E7; }
.fly-seo-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px 18px;
}
.fly-seo-tools a {
    color: #E4E4E7;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid transparent;
}
.fly-seo-tools a:hover { color: var(--fly-lime); border-bottom-color: var(--fly-lime); }
.fly-seo-faq { margin: 0; }
.fly-seo-faq dt {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 650;
    color: #F4F4F5;
}
.fly-seo-faq dd {
    margin: 6px 0 0;
    font-size: 15.5px;
    line-height: 1.62;
    color: #E4E4E7;
}
@media (max-width: 700px) {
    .fly-seo { padding: 38px 18px 52px; }
    .fly-seo h1 { font-size: 27px; }
}


/* The last showcase card holds one result per preset, not a single clip */
.fly-vd-results { display: flex; gap: 8px; align-items: flex-start; }
.fly-vd-result { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fly-vd-result .fly-vd-final { width: 100%; }
.fly-vd-result .fly-vd-tag { font-size: 10.5px; letter-spacing: 0.08em; }


/* ---------- Our own showcase set is wide, not upright ----------
   The cards were built for 9:16 clips. When the set on show is 16:9, the
   frames follow it, so nothing is cropped down to a strip. */
body .fly-vd-presets { align-items: flex-start; gap: 8px; }
body .fly-vd-preset .fly-vd-tile,
body .fly-vd-preset.active .fly-vd-tile { height: auto; aspect-ratio: 16 / 9; }
/* the three cards stay the same height, and each one keeps its caption on the
   floor of the card rather than under whatever it happens to hold */
/* the tall card of results sets the height, so what the other two hold sits in
   the middle of their own card rather than clinging to the top */
body .fly-vd-card .fly-vd-body { display: flex; flex-direction: column; justify-content: center; }
body .fly-vd-drop { min-height: 0; align-items: center; }
body .fly-vd-drop img { width: 100%; height: auto; }
body .fly-vd-card .fly-vd-body { flex: 1 1 auto; }
body .fly-vd-card .fly-vd-foot,
body .fly-vd-card > *:last-child { margin-top: auto; }
body .fly-vd-final { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
/* a preset is a still you can pick, so it reads as a button */
body .fly-vd-preset {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
body .fly-vd-preset .fly-vd-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .fly-vd-preset:hover .fly-vd-tile { border-color: rgba(255, 255, 255, 0.55); }


/* Two showcases, one under the other, each with its own choice */
#flyVideoDemoRow { display: flex; flex-direction: column; gap: 18px; }
.fly-vd-row-own { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .fly-vd-row-own { grid-template-columns: 1fr; } }


/* Each preset keeps its own element inside the result frame, so switching back
   and forth costs nothing and the file is fetched once */
.fly-vd-final { position: relative; }
.fly-vd-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fly-vd-clip[hidden] { display: none; }

/* Models the current plan cannot use */
.fly-locked { opacity: .55; }
.fly-locked .fly-pbd-check { display: none; }
.fly-pbd-badge-lock span { background: #18181B; color: #FFFFFF; }
.fly-upg-wrap {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.fly-upg-box {
    background: #1C1C1E; color: #F4F4F5;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px; padding: 24px; max-width: 380px; width: 100%;
    box-shadow: 0 20px 44px rgba(0,0,0,0.45);
}
.fly-upg-box h4 { margin: 0 0 8px; font-size: 17px; }
.fly-upg-box p { margin: 0 0 18px; font-size: 14px; opacity: .8; }
.fly-upg-row { display: flex; gap: 10px; justify-content: flex-end; }
.fly-upg-no, .fly-upg-yes {
    border-radius: 99px; padding: 10px 18px; font-size: 14px; font-weight: 600;
    cursor: pointer; text-decoration: none; border: 1px solid rgba(255,255,255,0.16);
    background: transparent; color: #F4F4F5;
}
.fly-upg-yes { background: #FFFFFF; color: #18181B; border-color: #FFFFFF; }


/* ================= phone layout =================
   Only below 700 pixels. The desktop board is untouched. */
@media (max-width: 700px) {

    /* ---- the bar ---- */
    .fly-topbar {
        height: 54px;
        padding: 0 12px;
        gap: 8px;
    }
    .fly-topbar .fly-logo,
    .fly-topbar .fly-brand { font-size: 17px; flex: 0 0 auto; }

    /* The bar cannot hold twelve entries beside the logo, and wrapping fought
       with the desktop rules, so on a phone the strip is simply pinned under
       the bar as a band of its own. */
    .fly-topbar { height: 52px; padding: 0 12px; }
    .fly-topbar #flyNav,
    .fly-topbar .fly-nav {
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none !important;
        margin: 0;
        padding: 6px 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        background: rgba(38, 38, 40, 0.96);
        backdrop-filter: blur(8px);
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        z-index: 49;
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 22px), transparent 100%);
    }
    /* the board begins below both bands */
    body.fly-body { padding-top: 52px; }
    .fly-shell, .fly-main, .fly-stage { padding-top: 46px; }
    .fly-nav::-webkit-scrollbar { display: none; }
    .fly-nav-link { flex: 0 0 auto; padding: 6px 10px; font-size: 13.5px; }
    .fly-nav-sep { display: none; }

    /* the right hand side keeps only what a thumb needs */
    .fly-topbar-right { gap: 6px; flex: 0 0 auto; }
    .fly-topbar-right .fly-user-name,
    .fly-topbar .fly-projects-btn span:not(.fly-proj-count) { display: none; }

    /* ---- the writing box ----
       It is a flex row on the desktop. On a phone it wraps, and every child is
       told it may shrink, otherwise the writing area collapses to nothing. */
    .fly-promptbar {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
        padding: 12px;
        border-radius: 18px;
        flex-wrap: wrap;
    }
    .fly-promptbar > * { min-width: 0; }
    .fly-pb-mid { flex: 1 1 100%; width: 100%; min-width: 0; }
    .fly-pb-toprow { align-items: flex-start; width: 100%; min-width: 0; }
    .fly-promptbar textarea {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 68px;
        max-height: 140px;
        font-size: 15px;
    }
    /* the button stops eating half the box and sits under the writing */
    .fly-pb-generate {
        position: static;
        width: 100%;
        margin-top: 10px;
        justify-content: center;
        height: 46px;
    }
    .fly-pb-mid { width: 100%; }

    /* every row of settings scrolls sideways rather than stacking */
    .fly-pb-controls {
        display: flex;
        width: 100%;
        flex: 1 1 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .fly-pb-controls::-webkit-scrollbar { display: none; }
    .fly-pb-controls > * { flex: 0 0 auto; }
    .fly-pb-ctrl, .fly-pb-count, .fly-enhance { font-size: 13px; padding: 7px 11px; }

    /* ---- the cinema pills ---- */
    .fly-cine-tags {
        width: calc(100% - 20px);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .fly-cine-tags::-webkit-scrollbar { display: none; }
    .fly-cine-tags .fly-cine-tag { flex: 0 0 auto; }

    /* ---- the picker ---- */
    .fly-cnpick-box { width: calc(100% - 16px); border-radius: 18px; }
    .fly-cnpick-head { padding: 14px 16px 10px; font-size: 12px; }
    .fly-cnstage { margin: 0 12px; aspect-ratio: 16 / 9; }
    .fly-cnpick-read { flex-direction: column; align-items: flex-start; gap: 8px; height: auto; padding: 12px 16px; }
    .fly-cnpick-read-l { flex: 0 0 auto; }
    .fly-cnpick-read .fly-cnpick-line { height: auto; min-height: 0; font-size: 12.5px; }
    .fly-cnstrip { padding: 4px 12px 16px; }
    .fly-cncard { flex-basis: 108px; }
    .fly-cnstrip-arrow { display: none; }

    /* ---- the showcase ---- */
    .fly-vd-row-own { grid-template-columns: 1fr; gap: 10px; }
    .fly-vd-card { padding: 8px 8px 6px; }

    /* ---- the gallery behind it ---- */
    .fly-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fly-demo-fan, .fly-demo-hero-fan { transform: scale(0.72); }

    /* ---- headings ---- */
    .fly-demo-title, .fly-hero-title { font-size: 27px; }
    .fly-demo-sub { font-size: 13px; padding: 0 14px; }

    /* nothing may push the page sideways */
    body { overflow-x: hidden; }
}


/* ================= the phone board ================= */
.fly-phone-toolsbtn { display: none; }
.fly-phone-sheet { display: none; }

@media (max-width: 700px) {
    /* the strip of sections goes, one button takes its place */
    .fly-topbar #flyNav, .fly-topbar .fly-nav { display: none !important; }
    body.fly-body { padding-top: 52px; }
    .fly-shell, .fly-main, .fly-stage { padding-top: 0; }

    /* the bar keeps the logo, the tool button and the account, nothing else */
    .fly-topbar .fly-projects-btn,
    .fly-topbar .fly-exit { display: none !important; }
    /* the brand stays, it is the way back out */
    .fly-topbar .fly-logo, .fly-topbar .fly-brand { order: 1; flex: 0 0 auto; font-size: 16px; }
    .fly-topbar .fly-user, .fly-topbar .fly-user-chip { order: 3; }
    .fly-topbar .fly-user, .fly-topbar .fly-user-chip { max-width: 120px; overflow: hidden; }

    .fly-phone-toolsbtn {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 120px;
        max-width: none;
        margin: 0 6px;
        order: 2;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: linear-gradient(180deg, #37373a, #2d2d2f);
        color: #F4F4F5;
        font-size: 14px;
        font-weight: 600;
    }
    .fly-phone-toolsname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fly-phone-caret { margin-left: auto; opacity: 0.7; transform: rotate(90deg); }

    /* the list itself, a full screen sheet */
    .fly-phone-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 120;
        background: #202023;
    }
    .fly-phone-sheet[hidden] { display: none; }
    .fly-phone-sheet-head {
        display: flex;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--fly-line);
    }
    .fly-phone-search {
        flex: 1 1 auto;
        min-width: 0;
        height: 40px;
        padding: 0 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: #2a2a2e;
        color: #F4F4F5;
        font-size: 15px;
    }
    .fly-phone-close {
        flex: 0 0 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: #2a2a2e;
        color: #F4F4F5;
        font-size: 22px;
        line-height: 1;
    }
    .fly-phone-list { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 24px; }
    .fly-phone-group {
        padding: 14px 6px 6px;
        font-size: 11.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(244, 244, 245, 0.6);
    }
    .fly-phone-item {
        display: flex;
        align-items: center;
        width: 100%;
        text-align: left;
        padding: 13px 14px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 0;
        background: transparent;
        color: #F4F4F5;
        font-size: 15.5px;
    }
    .fly-phone-item.is-tool { padding-left: 26px; font-size: 15px; }
    .fly-phone-item:active { background: rgba(255, 255, 255, 0.08); }
    body.fly-phone-sheet-open { overflow: hidden; }

    /* the side panels belong to a desk, not to a phone: cast, places and the
       project list all sat above the tool itself and pushed the work off screen */
    .fly-cinerail, #flyCinerail,
    .fly-projects-side, .fly-side-tools,
    .fly-proj-panel { display: none !important; }
    .fly-main, .fly-shell { display: block !important; }
    .fly-stage { width: 100% !important; max-width: none !important; }

    /* once a tool is open, the shop window gets out of the way */
    body.fly-phone-working .fly-demo-hero,
    body.fly-phone-working #flyVideoDemo,
    body.fly-phone-working #flyDemoHero,
    body.fly-phone-working .fly-grid,
    body.fly-phone-working #flyStrip,
    body.fly-phone-working .fly-cine-hero,
    body.fly-phone-working .fly-cine-home { display: none !important; }
}


/* ========== the working box, laid out for a thumb ========== */
@media (max-width: 700px) {
    /* the whole box reads top to bottom in a fixed order */
    .fly-promptbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .fly-promptbar .fly-cine-mode { order: 1; }
    .fly-promptbar .fly-pb-controls { order: 2; }
    .fly-promptbar .fly-pb-mid { order: 3; }
    .fly-promptbar .fly-pb-generate { order: 4; }

    /* Image and Video: one switch, two halves, not two stacked blocks */
    .fly-cine-mode, #cnMode {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        width: 100%;
        padding: 4px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
    }
    .fly-cine-mode button, #cnMode button {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 7px;
        width: 100%;
        height: 38px;
        margin: 0;
        border-radius: 11px;
        font-size: 14px;
    }
    .fly-cine-mode button svg, #cnMode button svg { width: 16px; height: 16px; }

    /* one line of settings, pushed sideways, never wrapped */
    .fly-promptbar .fly-pb-controls {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 7px;
        width: 100%;
        padding-bottom: 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .fly-promptbar .fly-pb-controls::-webkit-scrollbar { display: none; }
    .fly-promptbar .fly-pb-controls > * { flex: 0 0 auto; }
    .fly-pb-drop-wrap { flex: 0 0 auto; }

    /* the director row is a second line of the same kind */
    .fly-director {
        display: flex;
        flex: 0 0 auto;
        gap: 7px;
    }
    .fly-director-cell { min-width: 104px; }

    /* writing area */
    .fly-promptbar textarea {
        width: 100%;
        min-height: 76px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.04);
        font-size: 15px;
        line-height: 1.4;
    }
    .fly-pb-toprow { gap: 8px; }

    /* the button ends the box */
    .fly-pb-generate { width: 100%; height: 48px; font-size: 16px; margin: 0; }
}


/* The bar used to be two rows tall, so the board carried a 56 pixel margin to
   clear it. The bar is one row now, and that margin was left as a band of empty
   space above the hero. */
@media (max-width: 700px) {
    /* no dead band, but nothing slides under the bar either */
    .fly-main { margin-top: 0 !important; padding-top: 10px; }
    .fly-cine-hero, .fly-demo-hero { padding-top: 0 !important; }
    .fly-cine-hero-title, .fly-demo-hero-title { padding-top: 10px; }
    .fly-stage > *:first-child { margin-top: 0; }
    /* headings that used to clear a taller bar */
    .fly-demo-title, .fly-hero-title, .fly-tool-title { margin-top: 0; padding-top: 4px; }
}


/* the tool sheet, two levels */
@media (max-width: 700px) {
    .fly-phone-sheet-top {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px 6px;
        box-sizing: border-box;
        width: 100%;
    }
    .fly-phone-sheet, .fly-phone-sheet * { box-sizing: border-box; }
    .fly-phone-list { padding: 0 0 24px; }

    /* a section heading, and the tools that unfold under it */
    .fly-phone-sec {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 15px 14px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09);
        background: transparent;
        color: #F4F4F5;
        font-size: 16px;
        font-weight: 650;
        text-align: left;
    }
    .fly-phone-sec .fly-phone-item-s {
        margin-left: auto;
        font-size: 12.5px;
        color: rgba(244, 244, 245, 0.6);
    }
    .fly-phone-sec .fly-phone-item-a {
        font-size: 20px;
        color: rgba(244, 244, 245, 0.5);
        transition: transform 0.15s ease;
    }
    .fly-phone-sec.open { color: var(--fly-lime); }
    .fly-phone-sec.open .fly-phone-item-a { transform: rotate(90deg); color: var(--fly-lime); }
    .fly-phone-sub { background: rgba(255, 255, 255, 0.03); }
    .fly-phone-sub.is-two {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0;
    }
    .fly-phone-sub.is-two .fly-phone-item {
        padding-left: 18px;
        padding-right: 10px;
        font-size: 14.5px;
        min-width: 0;
    }
    .fly-phone-sub.is-two .fly-phone-item .fly-phone-item-t {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* no line down the middle: the rows are held by their own underlines */
    .fly-phone-sub.is-two .fly-phone-item { border-right: 0; }
    .fly-phone-none { padding: 18px 14px; color: rgba(244, 244, 245, 0.6); }
    .fly-phone-title {
        flex: 1 1 auto;
        font-size: 17px;
        font-weight: 700;
        color: #F4F4F5;
    }
    .fly-phone-back, .fly-phone-close {
        flex: 0 0 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: #2a2a2e;
        color: #F4F4F5;
        font-size: 22px;
        line-height: 1;
    }
    .fly-phone-back[hidden] { display: none; }
    .fly-phone-sheet-head { border-bottom: 1px solid var(--fly-line); padding: 6px 12px 10px; }
    .fly-phone-item {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .fly-phone-item-t { flex: 0 1 auto; }
    .fly-phone-item-s {
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 12.5px;
        color: rgba(244, 244, 245, 0.6);
    }
    .fly-phone-item-a { flex: 0 0 auto; font-size: 20px; color: rgba(244, 244, 245, 0.5); }
    .fly-phone-item.has-more .fly-phone-item-s { margin-left: auto; }
}


/* ---------- the page never pushes sideways ----------
   Locked at every width, not only on a phone. clip is used where the browser
   has it, because unlike hidden it does not break sticky positioning; hidden
   stays as the fallback. */
html.fly-html, body.fly-body {
    max-width: 100%;
    overflow-x: hidden;
}
@supports (overflow: clip) {
    html.fly-html, body.fly-body { overflow-x: clip; }
}
/* anything that carries content keeps itself inside its box, except the
   before and after slider, whose two halves are sized against each other on
   purpose: capping them made the left side shrink while the right stayed full */
.fly-body img,
.fly-body video,
.fly-body canvas,
.fly-body svg,
.fly-body iframe { max-width: 100%; }
.fly-ba img,
.fly-ba video,
.fly-ba-after img,
.fly-ba-before img,
.fly-trio-row img,
.fly-cnstage img,
.fly-cnstage video,
.fly-vd-clip { max-width: none; }
.fly-body pre, .fly-body code { max-width: 100%; overflow-x: auto; }
/* a wide row scrolls inside itself rather than stretching the page */
.fly-body table { display: block; max-width: 100%; overflow-x: auto; }


/* headings inside an unfolded section, matching the desktop menus */
@media (max-width: 700px) {
    .fly-phone-subwrap { background: rgba(255, 255, 255, 0.03); }
    .fly-phone-groupname {
        padding: 12px 14px 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(244, 244, 245, 0.55);
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .fly-phone-subwrap .fly-phone-sub { background: transparent; }
}


/* ---------- each tool is a card, each category a block of cards ---------- */
@media (max-width: 700px) {
    .fly-phone-subwrap { background: transparent; padding: 4px 12px 14px; }

    .fly-phone-groupname {
        padding: 16px 2px 8px;
        border-bottom: 0;
        font-size: 11px;
        letter-spacing: 0.16em;
        color: rgba(244, 244, 245, 0.6);
    }

    /* two columns of cards, with the gap between them doing the dividing */
    .fly-phone-subwrap .fly-phone-sub {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        background: transparent;
    }
    .fly-phone-subwrap .fly-phone-sub.is-two { grid-template-columns: 1fr 1fr; }

    .fly-phone-subwrap .fly-phone-item {
        display: flex;
        align-items: center;
        min-height: 46px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.13);
        border-radius: 12px;
        background: linear-gradient(180deg, #313134, #2a2a2d);
        color: #F4F4F5;
        font-size: 14px;
        line-height: 1.25;
    }
    .fly-phone-subwrap .fly-phone-item .fly-phone-item-t {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    .fly-phone-subwrap .fly-phone-item:active {
        border-color: var(--fly-lime);
        background: rgba(211, 243, 75, 0.10);
    }
}


/* the slider is the demo, so on a phone it takes the width it is given and
   keeps both halves at exactly the same size, the way it does on a desktop */
@media (max-width: 700px) {
    .fly-ba {
        width: calc(100% - 24px) !important;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .fly-ba > img { width: 100%; height: 100%; object-fit: cover; }
    .fly-ba-after { height: 100%; }
    .fly-ba-after img {
        width: auto;
        height: 100%;
        max-width: none;
        object-fit: cover;
    }
    /* the same for the three way demo and any other side by side pair */
    .fly-trio-row { flex-wrap: nowrap; gap: 8px; }
    .fly-trio-row img { height: auto; width: 100%; max-width: 100%; }
    .fly-trio-in { flex: 1 1 auto; min-width: 0; }
}


/* the heading only exists on a phone, the desktop has its shop window */
.fly-phone-head { display: none; }
@media (max-width: 700px) {
    .fly-phone-head {
        display: block;
        padding: 16px 10px 12px;
        text-align: center;
    }
    .fly-phone-head[hidden] { display: none; }
    .fly-phone-head-t {
        margin: 0 0 6px;
        /* grows with the screen so the line fills the width instead of sitting
           in the middle of it, without ever wrapping awkwardly */
        font-size: clamp(24px, 8.2vw, 34px);
        font-weight: 800;
        letter-spacing: 0.01em;
        line-height: 1.1;
        text-transform: uppercase;
        color: #FFFFFF;
    }
    .fly-phone-head-t .fly-tool-accent { color: var(--fly-lime); }
    .fly-phone-head-d {
        margin: 0 auto;
        max-width: 38ch;
        font-size: 14px;
        line-height: 1.45;
        color: #E4E4E7;
    }
}


/* the same sentence is now in the heading, so the panel keeps quiet on a phone */
@media (max-width: 700px) {
    [data-phone-dupe] { display: none; }
}


/* ---------- the labels inside a series, on a phone ----------
   A pill with a dark backing over a thumbnail the size of a stamp covers the
   face it is meant to label. Down here it is just small type with a shadow. */
@media (max-width: 700px) {
    .fly-series-tag {
        left: 6px;
        bottom: 5px;
        padding: 0;
        border-radius: 0;
        background: transparent !important;
        backdrop-filter: none;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.2px;
        color: #FFFFFF;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
    }
    .fly-series-cell.is-source .fly-series-tag {
        background: transparent !important;
        color: var(--fly-lime);
    }
}


/* ---------- the explainer scenes on a phone ----------
   Five cards squeezed into the width of a phone leave sixty five pixels each,
   which is smaller than the number printed on them. They keep a readable size
   and the row is pushed sideways instead. */
@media (max-width: 700px) {
    .fly-ex-row { padding-left: 12px; padding-right: 12px; }

    .fly-ex-demo {
        display: block;
        width: 100%;
    }
    .fly-ex-demo .fly-ex-topic { margin-bottom: 10px; }

    /* the film is the point, so it leads at full width and the scenes follow
       underneath in a strip you push along. The film and the strip are siblings
       inside .fly-ex-media, which is a row on a desktop and squeezed the film
       down to forty five pixels here. */
    .fly-ex-media { display: block !important; width: 100%; }
    .fly-ex-strip { width: 100%; flex: none !important; }
    .fly-ex-stage {
        display: block !important;
        width: 100%;
        justify-content: center;
        margin-bottom: 12px;
    }
    .fly-ex-stage video {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 62vh;
        aspect-ratio: 9 / 16;
        object-fit: cover;
        border-radius: 16px;
    }

    .fly-ex-grid {
        height: auto;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
    }
    .fly-ex-grid::-webkit-scrollbar { display: none; }
    .fly-ex-grid > .fly-ex-card {
        flex: 0 0 auto;
        width: 104px;
        height: auto;
        aspect-ratio: 9 / 16;
        min-width: 0;
    }
    /* the caption inside a card can breathe now */
    .fly-ex-card .fly-ex-cardname,
    .fly-ex-card b,
    .fly-ex-card span {
        font-size: 10.5px;
        line-height: 1.2;
    }
    .fly-ex-demo .fly-ex-line { margin-top: 10px; }
}