/*
 * Audio-to-text tool.
 *
 * The transcript is the product, so the reading pane gets the most space and
 * the highest contrast; controls around it stay quiet. Colours come from the
 * site's A-to-Z palette (--az-* in tool-shell.css) with fallbacks.
 *
 * Scoped under .att- throughout: this loads alongside the site-wide
 * stylesheet and must not reach anything outside this page.
 */

.att-hero,
.att-section,
.att-toasts {
    --att-a1: var(--az-a-1, #5b8def);
    --att-a2: var(--az-a-2, #7b5bf0);
    --att-mid: var(--az-mid, #c05ad9);
    --att-z1: var(--az-z-1, #f0655f);
    --att-ink: var(--az-ink, #10162b);
    --att-ink2: var(--az-ink-2, #454d63);
    --att-ink3: var(--az-ink-3, #5f677d);
    --att-line: var(--az-line, #e8e6e3);
    --att-line2: #eceaf6;
    --att-bg: var(--az-bg, #fbf9f7);
    --att-surface: #ffffff;
    --att-soft: #f5f3ff;
    --att-primary: #5a3fd6;            /* text-safe violet: 6.6:1 on white */
    --att-mint: #16895a;               /* text-safe green */
    --att-error: var(--az-error, #c62f2f);
    --att-grad: linear-gradient(120deg, var(--att-a1) 0%, var(--att-a2) 48%, var(--att-mid) 100%);
    --att-grad-warm: linear-gradient(90deg, var(--att-a1), var(--att-a2) 35%, var(--att-mid) 70%, var(--att-z1));
    --att-radius: 22px;
    --att-shadow: 0 1px 2px rgba(16, 22, 43, .04), 0 18px 48px -22px rgba(16, 22, 43, .22);
    --att-ring: 0 0 0 3px rgba(123, 91, 240, .35);
    --att-ease: cubic-bezier(.2, .8, .2, 1);
}

.att-hero *, .att-hero *::before, .att-hero *::after,
.att-section *, .att-section *::before, .att-section *::after,
.att-toasts *, .att-toasts *::before, .att-toasts *::after { box-sizing: border-box; }

.att-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================== hero ============================== */

.att-hero {
    position: relative;
    overflow: hidden;
    background: #10162b;
    color: #fff;
    padding: 40px 0 112px;
    margin: 0;
}

.att-hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(40% 60% at 12% 20%, rgba(91, 141, 239, .38), transparent 70%),
        radial-gradient(35% 55% at 62% 0%, rgba(123, 91, 240, .42), transparent 70%),
        radial-gradient(40% 60% at 95% 70%, rgba(192, 90, 217, .30), transparent 70%),
        radial-gradient(30% 45% at 40% 110%, rgba(240, 101, 95, .22), transparent 70%);
}

.att-hero-inner { position: relative; }

.att-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    color: #dfe3ff;
}

.att-eyebrow-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #3ee39b;
    box-shadow: 0 0 0 0 rgba(62, 227, 155, .6);
    animation: att-ping 2.2s ease-out infinite;
}

.att-hero-title {
    font-size: clamp(1.75rem, 3.6vw, 2.55rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -.02em;
    margin: 0 0 14px;
    color: #fff;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #d9cbff 75%, #ffc2bf 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.att-hero-lead {
    font-size: 1.06rem;
    line-height: 1.65;
    color: rgba(236, 239, 255, .9);
    max-width: 40rem;
    margin: 0 0 20px;
}

.att-hero-points {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}

.att-hero-points li {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: .86rem;
    color: #eef0ff;
}

.att-hero-points i { color: #b9a8ff; }

.att-hero-art { width: 100%; height: auto; max-width: 460px; display: block; margin-left: auto; overflow: visible; }
.att-art-panel { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .14); }
.att-art-doc { fill: #ffffff; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); }
.att-tstamp { fill: #ece6ff; }
.att-tline { fill: #c9cfe3; }
.att-art-orb { filter: drop-shadow(0 6px 16px rgba(192, 90, 217, .55)); }
.att-flow-dot { fill: #c9b8ff; }

.att-wbar {
    transform-box: fill-box;
    transform-origin: center;
    animation: att-wave 1.1s ease-in-out infinite alternate;
    animation-delay: calc(var(--d, 0) * -.13s);
}

.att-tline {
    transform-box: fill-box;
    transform-origin: left center;
    animation: att-type 5.4s var(--att-ease) infinite;
    animation-delay: calc(var(--d, 0) * .45s);
}

.att-flow-dot {
    animation: att-flow 1.8s ease-in infinite;
    animation-delay: calc(var(--d, 0) * .6s);
    opacity: 0;
}

@keyframes att-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes att-type {
    0% { transform: scaleX(0); opacity: 0; }
    8% { opacity: 1; }
    22%, 82% { transform: scaleX(1); opacity: 1; fill: #7b5bf0; }
    34% { fill: #c9cfe3; }
    94%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes att-flow {
    0% { transform: translateX(-24px); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateX(10px); opacity: 0; }
}
@keyframes att-ping {
    0% { box-shadow: 0 0 0 0 rgba(62, 227, 155, .55); }
    80%, 100% { box-shadow: 0 0 0 10px rgba(62, 227, 155, 0); }
}

/* ============================== layout ============================== */

.att-section {
    color: var(--att-ink2);
    background: var(--att-bg);
    padding: 56px 0;
    margin: 0;
}

/* The site template clips every <section>; the card deliberately overlaps the hero. */
.att-section--app { position: relative; z-index: 2; padding: 0 0 40px; overflow: visible; }
.att-hero { z-index: 1; }

.att-app {
    position: relative;
    z-index: 2;
    max-width: 1040px;
    margin: -84px auto 0;
}

.att-card {
    position: relative;
    background: var(--att-surface);
    border: 1px solid var(--att-line);
    border-radius: var(--att-radius);
    box-shadow: var(--att-shadow);
    padding: clamp(16px, 3vw, 28px);
    margin-bottom: 20px;
    min-width: 0;
}

.att-card[hidden] { display: none; }

.att-progress-card:not([hidden]),
.att-result-card:not([hidden]),
.att-history-card:not([hidden]) { animation: att-rise .45s var(--att-ease) both; }

@keyframes att-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.att-kicker {
    margin: 0 0 2px;
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--att-primary);
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

.att-label {
    display: block;
    font-size: .82rem; font-weight: 700;
    color: var(--att-ink);
    margin-bottom: 6px;
}

.att-hint {
    display: flex; gap: 8px; align-items: flex-start;
    margin: 10px 0 0;
    font-size: .86rem; line-height: 1.5;
    color: var(--att-ink3);
}
.att-hint i { margin-top: 3px; color: var(--att-a2); }
.att-hint--soft { font-size: .82rem; }
.att-hint[hidden] { display: none; }

/* ============================== buttons ============================== */

.att-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit; font-weight: 600; font-size: .95rem; line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s var(--att-ease), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s;
}
.att-btn[hidden] { display: none; }
.att-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.att-btn:focus-visible,
.att-icon-btn:focus-visible,
.att-chip:focus-visible,
.att-dl:focus-visible,
.att-tab:focus-visible,
.att-drop:focus-visible,
.att-seg-time:focus-visible,
.att-rec-btn:focus-visible,
.att-toast-action:focus-visible,
.att-toast-close:focus-visible,
.att-faq-item summary:focus-visible { outline: none; box-shadow: var(--att-ring); }

.att-btn--sm { min-height: 40px; padding: 8px 14px; font-size: .88rem; border-radius: 10px; }
.att-btn--lg { min-height: 52px; padding: 12px 26px; font-size: 1.02rem; border-radius: 14px; }

.att-btn--primary {
    color: #fff;
    background: var(--att-grad);
    background-size: 160% 100%;
    background-position: 0% 50%;
    box-shadow: 0 10px 24px -10px rgba(123, 91, 240, .7);
}
.att-btn--primary:hover:not(:disabled) { background-position: 100% 50%; box-shadow: 0 14px 30px -10px rgba(123, 91, 240, .8); color: #fff; }
.att-btn--primary:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; filter: grayscale(.2); }

.att-btn--ghost { background: #fff; color: var(--att-ink); border-color: var(--att-line); }
.att-btn--ghost:hover:not(:disabled) { border-color: #cfc6fb; background: var(--att-soft); color: var(--att-primary); }

.att-btn--danger { background: var(--att-error); color: #fff; }
.att-btn--danger:hover { background: #a82525; color: #fff; }
.att-btn--danger-text { color: var(--att-error); }
.att-btn--danger-text:hover:not(:disabled) { color: var(--att-error); background: #fdf0f0; border-color: #f3c4c4; }

.att-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 10px;
    border: 1px solid var(--att-line);
    background: #fff;
    color: var(--att-ink3);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.att-icon-btn:hover:not(:disabled) { color: var(--att-error); border-color: #f3c4c4; background: #fdf3f3; }
.att-icon-btn:disabled { opacity: .4; cursor: default; }
.att-icon-btn--sm { width: 34px; height: 34px; border-radius: 8px; }

.att-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid var(--att-line);
    background: #fff;
    color: var(--att-ink2);
    font: inherit; font-size: .86rem; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.att-chip[hidden] { display: none; }
.att-chip:hover:not(:disabled) { border-color: #cfc6fb; color: var(--att-primary); }
.att-chip:disabled { opacity: .45; cursor: default; }
.att-chip[aria-pressed="true"] {
    background: var(--att-soft);
    border-color: #bfb2fa;
    color: var(--att-primary);
    box-shadow: inset 0 0 0 1px #bfb2fa;
}

.att-mini-label { font-size: .78rem; font-weight: 700; color: var(--att-ink3); text-transform: uppercase; letter-spacing: .06em; }

.att-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff4e5;
    color: #9a5300;
    font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: none;
}
.att-badge[hidden] { display: none; }

.att-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--att-line);
    border-radius: 12px;
    background: #fff;
    padding: 10px 12px;
    font: inherit; font-size: .95rem;
    color: var(--att-ink);
    transition: border-color .2s, box-shadow .2s;
}
.att-input::placeholder { color: #8a90a2; }
.att-input:focus { outline: none; border-color: var(--att-a2); box-shadow: var(--att-ring); }

/* ============================== tabs ============================== */

.att-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 5px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: #f1effa;
    border: 1px solid var(--att-line2);
}

.att-tabs-pill {
    position: absolute;
    top: 5px; bottom: 5px; left: 5px;
    width: calc((100% - 10px) / 3);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(16, 22, 43, .1), 0 0 0 1px rgba(123, 91, 240, .12);
    transition: transform .35s var(--att-ease);
}
.att-tabs[data-mode="record"] .att-tabs-pill { transform: translateX(100%); }
.att-tabs[data-mode="url"] .att-tabs-pill { transform: translateX(200%); }

.att-tab {
    position: relative;
    z-index: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px;
    padding: 8px 6px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--att-ink3);
    font: inherit; font-weight: 700; font-size: .95rem;
    cursor: pointer;
    transition: color .25s;
    min-width: 0;
}
.att-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-tab:hover { color: var(--att-ink); }
.att-tab[aria-selected="true"] { color: var(--att-primary); }
.att-tab i { font-size: 1rem; }

.att-panel[hidden] { display: none; }
.att-panel:not([hidden]) { animation: att-fade .3s ease both; }
@keyframes att-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============================== drop zone ============================== */

.att-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.att-drop {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 220px;
    padding: 28px 18px;
    text-align: center;
    border-radius: 18px;
    border: 2px dashed #cdc4f4;
    background:
        radial-gradient(60% 80% at 50% 0%, rgba(123, 91, 240, .07), transparent 70%),
        #fcfbff;
    cursor: pointer;
    transition: border-color .25s, background-color .25s, transform .25s var(--att-ease), box-shadow .25s;
}
.att-drop[hidden] { display: none; }
.att-drop:hover { border-color: var(--att-a2); background-color: #f8f6ff; }
.att-drop.is-dragging {
    border-color: var(--att-a2);
    border-style: solid;
    transform: scale(1.015);
    box-shadow: 0 0 0 6px rgba(123, 91, 240, .12), 0 20px 50px -20px rgba(123, 91, 240, .55);
    background-color: #f3efff;
}
.att-drop.is-rejected { animation: att-shake .45s ease; border-color: var(--att-error); }

.att-drop-icon {
    width: 72px; height: 72px;
    display: grid; place-items: center;
    margin-bottom: 12px;
    border-radius: 22px;
    background: var(--att-grad);
    box-shadow: 0 14px 30px -12px rgba(123, 91, 240, .7);
    transition: transform .3s var(--att-ease);
}
.att-drop:hover .att-drop-icon, .att-drop.is-dragging .att-drop-icon { transform: translateY(-3px) rotate(-3deg); }
.att-drop-icon svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.att-drop-arrow { animation: att-bob 1.8s ease-in-out infinite; }
.att-drop.is-dragging .att-drop-arrow { animation-duration: .7s; }
@keyframes att-bob { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }

.att-drop-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--att-ink); }
.att-drop-sub { margin: 4px 0 0; color: var(--att-ink3); }
.att-drop-link { color: var(--att-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.att-drop-types { margin: 12px 0 0; font-size: .76rem; letter-spacing: .04em; color: var(--att-ink3); }

@keyframes att-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(3px); }
}

/* ---- chosen file ---- */

.att-file {
    border-radius: 18px;
    border: 1px solid #ddd6fb;
    background: linear-gradient(180deg, #fbfaff, #fff);
    padding: 14px;
    animation: att-pop .4s var(--att-ease) both;
}
.att-file[hidden] { display: none; }
@keyframes att-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.att-file-top { display: flex; align-items: center; gap: 12px; min-width: 0; }

.att-file-icon {
    flex: 0 0 auto;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--att-grad);
    color: #fff; font-size: 1.3rem;
}

.att-file-info { flex: 1 1 auto; min-width: 0; }
.att-file-name { font-weight: 700; color: var(--att-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; font-size: .84rem; color: var(--att-ink3); }
.att-file-meta > span + span::before { content: "\2022"; margin-right: 12px; color: #c3c7d4; }

.att-wave { display: block; width: 100%; height: 64px; margin-top: 12px; }
.att-wave[hidden] { display: none; }
.att-wave.is-loading { animation: att-breathe 1.2s ease-in-out infinite; }
@keyframes att-breathe { 50% { opacity: .45; } }
.att-wave-note { margin: 10px 0 0; font-size: .82rem; color: var(--att-ink3); }
.att-wave-note[hidden] { display: none; }

/* ============================== record ============================== */

.att-rec {
    --lvl: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: 22px 12px 10px;
    border-radius: 18px;
    background:
        radial-gradient(60% 90% at 50% 0%, rgba(192, 90, 217, .08), transparent 70%),
        #fcfbff;
    border: 1px solid var(--att-line2);
    text-align: center;
}

.att-rec-visual { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; flex-wrap: wrap; }

.att-rec-btn {
    position: relative;
    width: 84px; height: 84px; flex: 0 0 auto;
    border: 0; border-radius: 50%;
    background: linear-gradient(135deg, var(--att-mid), var(--att-z1));
    color: #fff; font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 16px 34px -12px rgba(240, 101, 95, .7);
    transition: transform .2s var(--att-ease);
}
.att-rec-btn[hidden] { display: none; }
.att-rec-btn:hover:not(:disabled) { transform: scale(1.05); }
.att-rec-btn:disabled { opacity: .6; cursor: progress; }
.att-rec-btn i { position: relative; z-index: 1; }

.att-rec-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(240, 101, 95, .45);
    animation: att-ring 2.4s ease-out infinite;
}
.att-rec-ring--2 { animation-delay: 1.2s; }
@keyframes att-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }

.att-rec-bars {
    display: none;
    align-items: center; justify-content: center; gap: 4px;
    height: 84px;
    flex: 1 1 260px;
    max-width: 420px;
    min-width: 0;
}
.att-rec-bars i {
    display: block;
    width: 6px; height: 100%;
    flex: 0 1 6px;
    border-radius: 6px;
    background: var(--att-grad-warm);
    background-size: 100% 100%;
    transform: scaleY(.08);
    transition: transform .08s linear;
}
.att-rec[data-status="recording"] .att-rec-bars,
.att-rec[data-status="paused"] .att-rec-bars { display: flex; }
.att-rec[data-status="paused"] .att-rec-bars i { opacity: .45; }

.att-rec-timer {
    display: none;
    font-variant-numeric: tabular-nums;
    font-size: 2rem; font-weight: 700;
    color: var(--att-ink);
    min-width: 5ch;
}
.att-rec[data-status="recording"] .att-rec-timer,
.att-rec[data-status="paused"] .att-rec-timer,
.att-rec[data-status="done"] .att-rec-timer { display: block; }
.att-rec[data-status="recording"] .att-rec-timer::before {
    content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: middle;
    border-radius: 50%; background: var(--att-z1);
    animation: att-blink 1s steps(2, start) infinite;
}
.att-rec[data-status="paused"] .att-rec-timer { color: var(--att-ink3); }
@keyframes att-blink { to { visibility: hidden; } }

.att-rec-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.att-rec-controls:empty { display: none; }

.att-rec-preview { width: 100%; max-width: 460px; margin-top: 14px; }
.att-rec-preview[hidden] { display: none; }

.att-rec-msg { margin: 14px auto 6px; max-width: 560px; font-size: .9rem; line-height: 1.5; color: var(--att-ink3); }
.att-rec-msg[data-tone="error"] {
    color: var(--att-error);
    background: #fdf1f1; border: 1px solid #f5cccc; border-radius: 12px; padding: 10px 14px;
}
.att-rec-msg[data-tone="success"] { color: var(--att-mint); font-weight: 600; }

/* ============================== link ============================== */

.att-url { padding: 6px 2px 2px; }
.att-url-field { position: relative; display: flex; align-items: center; gap: 8px; }
.att-url-field > i { position: absolute; left: 14px; color: var(--att-ink3); pointer-events: none; }
.att-url-field .att-input { padding-left: 38px; min-height: 52px; font-size: 1rem; flex: 1 1 auto; min-width: 0; }

/* ============================== options row ============================== */

.att-controls {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--att-line2);
}

.att-language { flex: 1 1 auto; min-width: 0; }

.att-combo { position: relative; }
.att-combo-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--att-a2); pointer-events: none; z-index: 1; }
.att-section .att-combo-input {
    min-height: 52px;
    padding-left: 40px;
    border-radius: 12px;
    border-color: var(--att-line);
    font-size: .98rem;
    color: var(--att-ink);
    cursor: text;
}
.att-section .att-combo-input::placeholder { color: var(--att-ink2); }
.att-section .att-combo-input:focus { border-color: var(--att-a2); box-shadow: var(--att-ring); }

.att-combo-list {
    position: absolute;
    left: 0; right: 0; top: calc(100% + 6px);
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0; padding: 6px;
    background: #fff;
    border: 1px solid var(--att-line);
    border-radius: 14px;
    box-shadow: 0 20px 44px -14px rgba(16, 22, 43, .3);
    animation: att-fade .18s ease both;
}
.att-combo-list[hidden] { display: none; }
.att-combo-option {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    color: var(--att-ink2);
}
.att-combo-option:hover, .att-combo-option.is-active { background: var(--att-soft); color: var(--att-primary); }
.att-combo-option.is-selected { font-weight: 700; color: var(--att-primary); }
.att-combo-empty { padding: 10px 12px; color: var(--att-ink3); }
.att-combo-native { display: none; }

.att-convert { flex: 0 0 auto; min-width: 230px; }

/* ============================== error ============================== */

.att-error {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px;
    padding: 12px 12px 12px 16px;
    border-radius: 14px;
    background: #fdf1f1;
    border: 1px solid #f3c4c4;
    color: #9f2323;
    font-size: .93rem; line-height: 1.5;
}
.att-error[hidden] { display: none; }
.att-error > i { margin-top: 3px; }
.att-error > span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.att-error.is-shaking { animation: att-shake .45s ease; }

/* ============================== progress ============================== */

.att-progress-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.att-progress-titles { min-width: 0; }
.att-progress-title { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--att-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.att-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 20px; padding: 0;
    counter-reset: att-step;
}

.att-step-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center;
    font-size: .84rem; font-weight: 600;
    color: var(--att-ink3);
    min-width: 0;
}
/* connector line to the previous step */
.att-step-item + .att-step-item::before {
    content: "";
    position: absolute;
    top: 17px; right: calc(50% + 22px); width: calc(100% - 44px);
    height: 3px; border-radius: 3px;
    background: #e9e6f5;
}
.att-step-item + .att-step-item::after {
    content: "";
    position: absolute;
    top: 17px; right: calc(50% + 22px); width: calc(100% - 44px);
    height: 3px; border-radius: 3px;
    background: var(--att-grad);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--att-ease);
}
.att-step-item.is-done::after,
.att-step-item.is-active::after { transform: scaleX(1); }

.att-step-dot {
    position: relative;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e2def2;
    color: transparent;
    counter-increment: att-step;
    transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--att-ease);
}
.att-step-dot::before { content: counter(att-step); position: absolute; color: #9aa0b3; font-weight: 700; font-size: .88rem; }
.att-step-dot i { font-size: .9rem; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .3s var(--att-ease); }

.att-step-item.is-active { color: var(--att-primary); }
.att-step-item.is-active .att-step-dot { border-color: var(--att-a2); transform: scale(1.08); }
.att-step-item.is-active .att-step-dot::before { color: var(--att-primary); }
.att-step-item.is-active .att-step-dot::after {
    content: ""; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(123, 91, 240, .45);
    animation: att-pulse 1.6s ease-out infinite;
}
@keyframes att-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

.att-step-item.is-done { color: var(--att-ink); }
.att-step-item.is-done .att-step-dot { background: var(--att-grad); border-color: transparent; color: #fff; }
.att-step-item.is-done .att-step-dot::before { content: none; }
.att-step-item.is-done .att-step-dot i { opacity: 1; transform: none; }

.att-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.att-progress-stage { font-weight: 600; color: var(--att-ink); min-width: 0; overflow-wrap: anywhere; }
.att-progress-percent {
    font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: var(--att-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    color: var(--att-primary);
}

.att-progress-track { height: 12px; border-radius: 999px; background: #eeebf8; overflow: hidden; }
.att-progress-bar {
    position: relative;
    height: 100%;
    border-radius: inherit;
    background: var(--att-grad-warm);
    transition: width .5s var(--att-ease);
    overflow: hidden;
    min-width: 12px;
}
.att-progress-bar::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: translateX(-100%);
    animation: att-shimmer 1.6s ease-in-out infinite;
}
@keyframes att-shimmer { to { transform: translateX(100%); } }

.att-progress-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: .84rem; color: var(--att-ink3); font-variant-numeric: tabular-nums; }
.att-progress-detail { min-width: 0; overflow-wrap: anywhere; }
.att-progress-note { display: flex; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: #f6f5fb; font-size: .84rem; line-height: 1.5; color: var(--att-ink3); }
.att-progress-note i { margin-top: 3px; color: var(--att-a2); }

/* ============================== result ============================== */

.att-result-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; min-width: 0; }
.att-result-titles { min-width: 0; }
.att-result-title { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; color: var(--att-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.att-done-badge { position: relative; flex: 0 0 auto; width: 52px; height: 52px; }
.att-done-badge svg { width: 52px; height: 52px; display: block; }
.att-done-circle { fill: #eafaf2; stroke: #22b06b; stroke-width: 3; stroke-dasharray: 145; stroke-dashoffset: 0; }
.att-done-check { fill: none; stroke: #16895a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 0; }

.att-burst { position: absolute; inset: 0; pointer-events: none; }
.att-burst i {
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px; margin: -3px;
    border-radius: 50%;
    opacity: 0;
    background: var(--att-a2);
}
.att-burst i:nth-child(2n) { background: var(--att-z1); }
.att-burst i:nth-child(3n) { background: #22b06b; }
.att-burst i:nth-child(1) { --r: 0deg; }
.att-burst i:nth-child(2) { --r: 45deg; }
.att-burst i:nth-child(3) { --r: 90deg; }
.att-burst i:nth-child(4) { --r: 135deg; }
.att-burst i:nth-child(5) { --r: 180deg; }
.att-burst i:nth-child(6) { --r: 225deg; }
.att-burst i:nth-child(7) { --r: 270deg; }
.att-burst i:nth-child(8) { --r: 315deg; }

.att-result-card.is-celebrating .att-done-circle { animation: att-draw-circle .6s var(--att-ease) both; }
.att-result-card.is-celebrating .att-done-check { animation: att-draw-check .45s .45s var(--att-ease) both; }
.att-result-card.is-celebrating .att-done-badge svg { animation: att-bounce .5s .8s var(--att-ease) both; }
.att-result-card.is-celebrating .att-burst i { animation: att-burst .75s .75s ease-out both; }

@keyframes att-draw-circle { from { stroke-dashoffset: 145; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
@keyframes att-draw-check { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
@keyframes att-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes att-burst {
    0% { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(1); }
    100% { opacity: 0; transform: rotate(var(--r)) translateY(-40px) scale(.3); }
}

.att-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}
.att-fact {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8f7fd;
    border: 1px solid var(--att-line2);
    min-width: 0;
}
.att-fact dt { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--att-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-fact dt i { color: var(--att-a2); margin-right: 3px; }
.att-fact dd { margin: 2px 0 0; font-size: 1.12rem; font-weight: 700; color: var(--att-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.att-player {
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f5f3ff, #fdf3fb);
    border: 1px solid #e7e0fb;
}
.att-player[hidden] { display: none; }
.att-player audio { width: 100%; display: block; }
.att-player-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; }

.att-seg-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.att-player .att-chip { background: rgba(255, 255, 255, .8); }
.att-player .att-chip[aria-pressed="true"] { background: #fff; }

.att-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--att-line2);
}
.att-toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.att-search {
    position: relative;
    display: flex; align-items: center; gap: 6px;
    flex: 1 1 260px;
    min-width: 0;
}
.att-search > i { position: absolute; left: 13px; color: var(--att-ink3); pointer-events: none; }
.att-search .att-input { padding-left: 36px; padding-right: 88px; min-height: 42px; }
.att-search .att-input::-webkit-search-cancel-button { display: none; }
.att-search-count {
    position: absolute; right: 84px;
    font-size: .78rem; font-weight: 700; color: var(--att-ink3);
    white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums;
}
.att-search-count.is-empty { color: var(--att-error); }
.att-search .att-icon-btn { flex: 0 0 auto; }
.att-search .att-icon-btn:hover:not(:disabled) { color: var(--att-primary); border-color: #cfc6fb; background: var(--att-soft); }
.att-search--small { flex: 0 1 200px; }
.att-search--small .att-input { padding-right: 12px; min-height: 40px; }

/* ---- segments ---- */

.att-segments {
    --att-fs: 1rem;
    max-height: 560px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 4px 6px 0;
    margin: 0 -4px 0 0;
    scroll-padding: 40px;
}

.att-segments::-webkit-scrollbar { width: 10px; }
.att-segments::-webkit-scrollbar-thumb { background: #dcd6f3; border-radius: 10px; border: 3px solid #fff; }

.att-seg,
.att-para {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    transition: background-color .25s, box-shadow .25s;
}
.att-seg:hover, .att-para:hover { background: #faf9fe; }

.att-segments.is-animated .att-seg,
.att-segments.is-animated .att-para { animation: att-seg-in .45s var(--att-ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes att-seg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.att-seg-time {
    justify-self: start;
    min-height: 32px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: #efebfd;
    color: var(--att-primary);
    font: inherit; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color .2s, color .2s, transform .15s;
}
.att-seg-time:hover { background: var(--att-a2); color: #fff; }
.att-segments:not(.has-audio) .att-seg-time { cursor: default; }
.att-segments:not(.has-audio) .att-seg-time:hover { background: #efebfd; color: var(--att-primary); }

.att-segments.is-no-times .att-seg,
.att-segments.is-no-times .att-para { grid-template-columns: minmax(0, 1fr); }
.att-segments.is-no-times .att-seg-time { display: none; }

.att-seg-text,
.att-para-text {
    margin: 0;
    font-size: var(--att-fs);
    line-height: 1.7;
    color: var(--att-ink);
    overflow-wrap: anywhere;
    transition: font-size .2s ease;
}
.att-para-text { margin: 0; }
.att-para + .att-para { margin-top: 6px; }

.att-seg.is-playing { background: linear-gradient(90deg, rgba(123, 91, 240, .12), rgba(192, 90, 217, .05)); box-shadow: inset 3px 0 0 var(--att-a2); }
.att-seg.is-playing .att-seg-time { background: var(--att-a2); color: #fff; }
span.att-seg-text.is-playing { background: rgba(123, 91, 240, .16); border-radius: 4px; box-shadow: 0 0 0 2px rgba(123, 91, 240, .16); }

.att-segments.is-editing .att-seg-text[contenteditable] {
    outline: none;
    border-radius: 6px;
    background: #fffdf5;
    box-shadow: inset 0 -1px 0 #f0d98c;
    cursor: text;
    padding: 1px 4px;
}
.att-segments.is-editing .att-seg-text[contenteditable]:focus { background: #fff8dc; box-shadow: 0 0 0 2px #e9c24a; }

.att-mark { background: #ffe58a; color: inherit; padding: 0 1px; border-radius: 3px; }
.att-mark.is-current { background: #ffb347; box-shadow: 0 0 0 2px #ffb347; }

.att-empty { display: flex; gap: 10px; align-items: center; padding: 20px; margin: 0; border-radius: 14px; background: #f8f7fd; color: var(--att-ink2); }

/* ---- exports ---- */

.att-exports {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--att-line2);
}
.att-export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.att-export-sep { width: 1px; height: 26px; background: var(--att-line); margin: 0 4px; }

.att-download {
    display: inline-flex;
    border: 1px solid var(--att-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.att-dl {
    min-height: 40px; min-width: 48px;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: var(--att-ink2);
    font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}
.att-dl + .att-dl { border-left: 1px solid var(--att-line); }
.att-dl:hover { background: var(--att-soft); color: var(--att-primary); }

.att-export-note { margin-top: 8px; }

/* ============================== history ============================== */

.att-history-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.att-history-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--att-ink); }
.att-history-title i { color: var(--att-a2); margin-right: 4px; }
.att-history-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.att-history-note { margin: 8px 0 12px; font-size: .84rem; color: var(--att-ink3); }

.att-confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fdf1f1;
    border: 1px solid #f3c4c4;
    color: #8f1f1f; font-weight: 600; font-size: .9rem;
    animation: att-fade .2s ease both;
}
.att-confirm[hidden] { display: none; }
.att-confirm > span { flex: 1 1 220px; }

.att-history-list { display: grid; gap: 8px; }

.att-history-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--att-line2);
    background: #fff;
    transition: border-color .2s, box-shadow .2s, transform .2s, opacity .2s;
    min-width: 0;
}
.att-history-item:hover { border-color: #d9d1fa; box-shadow: 0 6px 18px -10px rgba(123, 91, 240, .4); }
.att-history-item.is-open { border-color: #bfb2fa; background: #fbfaff; }
.att-history-item.is-removing { opacity: 0; transform: translateX(24px); }

.att-history-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #f1edff;
    color: var(--att-primary);
}
.att-history-main { flex: 1 1 auto; min-width: 0; }
.att-history-name { font-weight: 700; color: var(--att-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-history-meta { font-size: .8rem; color: var(--att-ink3); margin-top: 1px; }
.att-history-snippet { font-size: .84rem; color: var(--att-ink2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-history-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.att-history-empty { margin: 0; padding: 14px; color: var(--att-ink3); text-align: center; }

/* ============================== toasts ============================== */

.att-toasts {
    position: fixed;
    z-index: 1080;
    left: 50%; bottom: 20px;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: min(460px, calc(100vw - 24px));
    pointer-events: none;
}

.att-toast {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 8px 8px 14px;
    border-radius: 14px;
    background: #151b33;
    color: #f2f3fb;
    box-shadow: 0 20px 40px -14px rgba(16, 22, 43, .55);
    font-size: .9rem; line-height: 1.4;
    pointer-events: auto;
    animation: att-toast-in .3s var(--att-ease) both;
}
.att-toast.is-leaving { animation: att-toast-out .22s ease both; }
.att-toast-icon { color: #b9a8ff; }
.att-toast--success .att-toast-icon { color: #4ade9b; }
.att-toast--error .att-toast-icon { color: #ff8d86; }
.att-toast-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.att-toast-action {
    min-height: 36px; padding: 6px 12px;
    border: 0; border-radius: 9px;
    background: rgba(185, 168, 255, .18);
    color: #d9cfff;
    font: inherit; font-weight: 700;
    cursor: pointer;
}
.att-toast-action:hover { background: rgba(185, 168, 255, .3); color: #fff; }
.att-toast-close {
    width: 36px; height: 36px; flex: 0 0 auto;
    border: 0; border-radius: 9px;
    background: transparent; color: #aab1cc;
    cursor: pointer;
}
.att-toast-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

@keyframes att-toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes att-toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ============================== how it works / faq ============================== */

.att-h2 {
    text-align: center;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--att-ink);
    margin: 0 0 28px;
}

.att-how { background: #fff; }

.att-how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 0 auto; }

.att-how-step {
    padding: 22px;
    border-radius: var(--att-radius);
    border: 1px solid var(--att-line);
    background: linear-gradient(180deg, #fbfaff, #fff);
    transition: transform .25s var(--att-ease), box-shadow .25s;
}
.att-how-step:hover { transform: translateY(-3px); box-shadow: var(--att-shadow); }
.att-how-num {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 14px;
    background: var(--att-grad);
    color: #fff; font-size: 1.2rem;
    margin-bottom: 14px;
    box-shadow: 0 10px 22px -10px rgba(123, 91, 240, .7);
}
.att-how-step h3 { font-size: 1.08rem; font-weight: 700; color: var(--att-ink); margin: 0 0 6px; }
.att-how-step p { margin: 0; line-height: 1.6; color: var(--att-ink2); font-size: .95rem; }

.att-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto; align-items: start; }

.att-faq-item {
    border-radius: 16px;
    border: 1px solid var(--att-line);
    background: #fff;
    transition: box-shadow .25s, border-color .25s;
}
.att-faq-item[open] { border-color: #d9d1fa; box-shadow: 0 10px 26px -18px rgba(123, 91, 240, .55); }
.att-faq-item summary {
    position: relative;
    list-style: none;
    padding: 16px 48px 16px 18px;
    min-height: 44px;
    font-weight: 700;
    color: var(--att-ink);
    cursor: pointer;
    border-radius: 16px;
}
.att-faq-item summary::-webkit-details-marker { display: none; }
.att-faq-item summary::after {
    content: "+";
    position: absolute; right: 16px; top: 50%;
    width: 26px; height: 26px; margin-top: -13px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--att-soft); color: var(--att-primary);
    font-weight: 700;
    transition: transform .25s var(--att-ease);
}
.att-faq-item[open] summary::after { transform: rotate(45deg); }
.att-faq-item p { margin: 0; padding: 0 18px 16px; line-height: 1.65; color: var(--att-ink2); }

/* ============================== responsive ============================== */

@media (max-width: 991.98px) {
    .att-hero { padding: 40px 0 104px; }
    .att-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .att-how-grid { grid-template-columns: minmax(0, 1fr); }
    .att-faq-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .att-controls { flex-direction: column; align-items: stretch; }
    .att-convert { min-width: 0; width: 100%; }
    .att-exports { flex-direction: column; align-items: stretch; }
    .att-tp-btn { width: 100%; }
    .att-export-sep { display: none; }
    .att-history-tools { width: 100%; }
    .att-search--small { flex: 1 1 auto; }
    .att-toolbar-group { width: 100%; }
    .att-section { padding: 40px 0; }
    .att-section--app { padding: 0 0 28px; }
}

@media (max-width: 575.98px) {
    .att-hero { padding: 30px 0 96px; }
    .att-hero-lead { font-size: .98rem; }
    .att-hero-points li { font-size: .8rem; padding: 6px 10px; }
    .att-app { margin-top: -76px; }
    .att-card { border-radius: 18px; }
    .att-tab { flex-direction: column; gap: 2px; font-size: .8rem; min-height: 54px; }
    .att-drop { min-height: 190px; padding: 22px 12px; }
    .att-drop-title { font-size: 1.05rem; }
    .att-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .att-fact:first-child { grid-column: 1 / -1; }
    .att-seg, .att-para { grid-template-columns: 50px minmax(0, 1fr); gap: 8px; padding: 7px 4px; }
    .att-seg-time { padding: 3px 7px; font-size: .74rem; min-height: 28px; }
    .att-seg-text, .att-para-text { line-height: 1.6; }
    .att-step-item { font-size: .72rem; }
    .att-step-dot { width: 30px; height: 30px; }
    .att-step-item + .att-step-item::before,
    .att-step-item + .att-step-item::after { top: 14px; right: calc(50% + 18px); width: calc(100% - 36px); }
    .att-progress-percent { font-size: 1.35rem; }
    .att-file-top { flex-wrap: wrap; }
    .att-file-info { flex-basis: calc(100% - 60px); }
    #changeFileBtn { flex: 1 1 auto; }
    .att-history-item { flex-wrap: wrap; }
    .att-history-main { flex-basis: calc(100% - 52px); }
    .att-history-actions { width: 100%; justify-content: flex-end; }
    .att-rec-btn { width: 76px; height: 76px; }
    .att-rec-timer { font-size: 1.6rem; }
    .att-export-row { justify-content: flex-start; }
    .att-download { flex: 1 1 100%; }
    .att-dl { flex: 1 1 0; min-width: 0; }
    .att-export-row > .att-btn { flex: 1 1 calc(50% - 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .att-hero *, .att-section *, .att-toasts * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
    }
    .att-wbar, .att-tline, .att-flow-dot, .att-eyebrow-dot, .att-drop-arrow,
    .att-rec-ring, .att-progress-bar::after, .att-step-item.is-active .att-step-dot::after { animation: none !important; }
    .att-flow-dot { opacity: 0; }
}