/*
 * VoxyAI design system for the web.
 *
 * A port of the Mac app's Theme.swift and DesignSystem/*: the same indigo
 * accent, the gray grouped page with white cards, the SF system type scale,
 * 12pt corners, and the Core Animation loops (hero float, sparkles, beacon,
 * orbit, typing dots, confetti), all of which hold still under Reduce Motion.
 */

/* MARK: - Tokens */

:root {
    color-scheme: light dark;

    /* Theme.Color */
    --accent: #2f2eb2;
    --accent-rgb: 47 46 178;
    --accent-hover: #4342c6;
    --grouped: #f5f5f7;
    --card: #ffffff;
    --card-hover: #f2f2f2;
    --card-border: rgba(0, 0, 0, 0.12);
    --code-bg: #f2f2f7;
    --label: #1d1d1f;
    --label-2: rgba(60, 60, 67, 0.78);
    --label-3: rgba(60, 60, 67, 0.55);
    --separator: rgba(60, 60, 67, 0.16);
    --section-header: rgba(0, 0, 0, 0.5);
    --toolbar: rgba(245, 245, 247, 0.78);
    --success: #34c759;
    --orange: #ff9500;
    --teal: #30b0c7;
    --pink: #ff2d55;
    --yellow: #ffcc00;
    --lavender: #9d8cf5;
    /* The quick action set badge: a diagonal gradient, orange → accent → teal */
    --gradient: linear-gradient(120deg, var(--orange), var(--pink) 30%, var(--accent) 62%, var(--teal));
    --shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 60px -20px rgba(20, 20, 60, 0.28), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Accent scale for Tailwind's `purple-*` (remapped to the brand) */
    --p-50: 238 238 251;
    --p-100: 224 224 248;
    --p-200: 196 196 242;
    --p-300: 162 161 234;
    --p-400: 123 122 240;
    --p-500: 67 66 198;
    --p-600: 47 46 178;
    --p-700: 38 37 154;
    --p-800: 30 29 126;
    --p-900: 23 22 95;

    /* Theme.Font */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
    --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* Theme.Dimension */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-input: 10px;
    --radius-bubble: 20px;
    --button-h: 48px;

    /* Theme.Motion (springs approximated as curves) */
    --ease-arrive: cubic-bezier(0.22, 1.2, 0.36, 1);
    --ease-snappy: cubic-bezier(0.3, 1.3, 0.5, 1);
    --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #7b7af0;
        --accent-rgb: 123 122 240;
        --accent-hover: #9392f4;
        --grouped: #000000;
        --card: #1c1c1e;
        --card-hover: #2a2a2c;
        --card-border: rgba(255, 255, 255, 0.25);
        --code-bg: #2c2c2e;
        --label: #f5f5f7;
        --label-2: rgba(235, 235, 245, 0.72);
        --label-3: rgba(235, 235, 245, 0.5);
        --separator: rgba(84, 84, 88, 0.6);
        --section-header: rgba(255, 255, 255, 0.5);
        --toolbar: rgba(22, 22, 23, 0.78);
        --success: #30d158;
        --orange: #ff9f0a;
        --teal: #40c8e0;
        --pink: #ff375f;
        --yellow: #ffd60a;
        --lavender: #b8adff;
        --shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);

        --p-50: 30 30 62;
        --p-100: 38 38 82;
        --p-200: 62 61 128;
        --p-300: 98 97 200;
        --p-400: 147 146 244;
        --p-500: 147 146 244;
        --p-600: 123 122 240;
        --p-700: 147 146 244;
        --p-800: 178 177 248;
        --p-900: 205 204 251;
    }
}

/* MARK: - Base */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body {
    margin: 0;
    background: var(--grouped);
    color: var(--label);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgb(var(--accent-rgb) / 0.25); }
a { color: inherit; }
img, video, svg { max-width: 100%; }
:focus-visible { outline: 3px solid rgb(var(--accent-rgb) / 0.5); outline-offset: 2px; border-radius: 6px; }

.ds-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.ds-container-narrow { max-width: 780px; }

/* Icons: an inline SVG sprite of SF Symbol-like line icons */
.ds-icon {
    display: inline-block;
    width: 1em; height: 1em;
    flex-shrink: 0;
    fill: none; stroke: currentColor;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
    vertical-align: -0.125em;
}

/* MARK: - Type (Theme.Font, scaled up for the page's display sizes) */

.ds-display {
    font-family: var(--font);
    font-size: clamp(40px, 7vw, 76px);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
}
.ds-title {
    font-size: clamp(30px, 4.4vw, 48px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}
.ds-header { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.ds-section-title { font-size: 15px; font-weight: 600; margin: 0; }
.ds-lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.45; color: var(--label-2); margin: 0; }
.ds-body { font-size: 16px; color: var(--label-2); margin: 0; }
.ds-small { font-size: 14px; color: var(--label-2); }
.ds-caption { font-size: 13px; color: var(--label-2); }
.ds-accent { color: var(--accent); }

/* DynamicSectionHeader: uppercase, small, dimmed; sits outside cards */
.ds-section-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--section-header);
    margin: 0 0 8px 16px;
}
.ds-section-header .ds-link { margin-left: auto; margin-right: 16px; text-transform: none; letter-spacing: 0; }
.ds-footnote { font-size: 13px; color: var(--label-2); margin: 8px 16px 0; }

/* An accent "eyebrow" over a section title, as on the app's welcome screens */
.ds-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--accent);
}

/* MARK: - Surfaces */

.ds-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.ds-card-pad { padding: 16px; }
.ds-card-pad-lg { padding: 28px; }

/* CardGroup: rows separated by inset dividers (52pt, lining up with titles after an icon) */
.ds-group { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ds-group > * + * { position: relative; }
.ds-group > * + *::before {
    content: ""; position: absolute; top: 0; right: 0; left: 52px;
    border-top: 1px solid var(--separator);
}
.ds-group.ds-group-plain > * + *::before { left: 16px; }

/* DetailRow: icon, title, a description under it, a control on the right */
.ds-row {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 13px 16px;
    min-height: 24px;
}
.ds-row-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: 20px; flex-shrink: 0;
}
.ds-row-text { flex: 1; min-width: 0; }
.ds-row-title { font-size: 15px; font-weight: 500; color: var(--label); margin: 0; line-height: 24px; }
.ds-row-detail { font-size: 13px; color: var(--label-2); margin: 3px 0 0; line-height: 1.45; }
.ds-row-trailing { align-self: center; color: var(--label-3); font-size: 13px; flex-shrink: 0; }

/* Code block inside a card */
.ds-code {
    background: var(--code-bg); border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: 14px; line-height: 1.55;
    padding: 12px 14px; overflow-x: auto; color: var(--label);
}

/* MARK: - Buttons */

/* PrimaryButton: accent fill, white icon and title, 48pt tall, 12pt corners */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-sizing: border-box;
    height: var(--button-h); padding: 0 22px;
    border: 0; border-radius: var(--radius);
    font: 600 15px/1 var(--font);
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color 0.15s ease, transform 0.22s var(--ease-snappy), box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.ds-btn .ds-icon { font-size: 16px; }
.ds-btn:active { transform: scale(0.97); }
.ds-btn-primary { background: var(--accent); color: #fff; }
.ds-btn-primary:hover { background: var(--accent-hover); }
/* HoverButton: a card that darkens 5% on hover, accent icon */
.ds-btn-secondary { background: var(--card); color: var(--label); box-shadow: var(--shadow); }
.ds-btn-secondary .ds-icon { color: var(--accent); }
.ds-btn-secondary:hover { background: var(--card-hover); }
.ds-btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }
.ds-btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }
.ds-btn-block { display: flex; width: 100%; }

/* LinkButton: borderless accent text, 13pt medium */
.ds-link {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--accent); font-size: 15px; font-weight: 500; text-decoration: none;
}
.ds-link:hover { color: var(--accent-hover); }
.ds-link .ds-icon { transition: transform 0.2s var(--ease-snappy); }
.ds-link:hover .ds-icon { transform: translateX(2px); }

/* ChipButton: 28pt pill, accent with white text when on */
.ds-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 14px; border-radius: 14px; border: 0;
    background: var(--card); color: var(--label);
    font: 500 13px/1 var(--font); cursor: pointer; white-space: nowrap;
    box-shadow: var(--shadow);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-chip:hover { background: var(--card-hover); }
.ds-chip.is-on, .ds-chip[aria-selected="true"] { background: var(--accent); color: #fff; }
.ds-chip-plain { box-shadow: none; background: var(--grouped); }

/* Native "Recommended"-style badge */
.ds-badge {
    display: inline-flex; align-items: center; gap: 4px;
    height: 20px; padding: 0 8px; border-radius: 10px;
    background: rgb(var(--accent-rgb) / 0.12); color: var(--accent);
    font-size: 11px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap;
}
.ds-badge-green { background: rgb(52 199 89 / 0.15); color: #248a3d; }
@media (prefers-color-scheme: dark) { .ds-badge-green { color: var(--success); } }

/* ActionTile: icon above a short title; on hover it fills with the accent
   and its icon and title turn white, like a primary button */
.ds-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    gap: 6px; padding: 16px 8px 12px; min-height: 72px; box-sizing: border-box;
    background: var(--card); border-radius: var(--radius); color: var(--label);
    text-decoration: none; text-align: center; cursor: default;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.22s var(--ease-snappy);
}
.ds-tile .ds-icon { font-size: 20px; color: var(--accent); transition: color 0.15s ease; }
.ds-tile span { font-size: 14px; font-weight: 500; line-height: 1.2; }
.ds-tile:hover { background: var(--accent); color: #fff; }
.ds-tile:hover .ds-icon { color: #fff; }
.ds-tile:active { transform: scale(0.96); }

/* An accent-tinted circle holding a symbol, like the app's glow behind icons */
.ds-symbol {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.12); color: var(--accent);
    font-size: 22px; flex-shrink: 0;
}
.ds-symbol-lg { width: 64px; height: 64px; font-size: 30px; }

/* MARK: - Toolbar (nav) */

.ds-toolbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--toolbar);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--separator);
}
.ds-toolbar-inner { display: flex; align-items: center; gap: 24px; height: 56px; }
.ds-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ds-brand img { width: 30px; height: 30px; }
.ds-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ds-nav a {
    padding: 6px 10px; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 500; color: var(--label-2); text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ds-nav a:hover { color: var(--label); background: rgb(127 127 127 / 0.12); }
.ds-nav a[aria-current="page"] { color: var(--accent); }
.ds-nav .ds-btn { margin-left: 8px; }
.ds-nav-toggle { display: none; }
@media (max-width: 760px) {
    .ds-toolbar-inner { gap: 12px; }
    .ds-nav-toggle {
        display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
        width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm);
        background: transparent; color: var(--label); font-size: 22px; cursor: pointer;
    }
    .ds-nav {
        position: absolute; top: 56px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 14px;
        background: var(--card); border-bottom: 1px solid var(--separator); box-shadow: var(--shadow-lg);
        display: none;
    }
    .ds-nav.is-open { display: flex; animation: ds-arrive 0.3s var(--ease-arrive) both; }
    .ds-nav a { padding: 12px; font-size: 16px; }
    .ds-nav .ds-btn { margin: 8px 0 0; }
}

/* MARK: - More controls */

/* NSSwitch */
.ds-switch { position: relative; display: inline-block; width: 38px; height: 22px; border-radius: 11px; background: rgb(120 120 128 / 0.32); flex-shrink: 0; transition: background-color 0.2s ease; }
.ds-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.25s var(--ease-snappy); }
.ds-switch.is-on { background: var(--accent); }
.ds-switch.is-on::after { transform: translateX(16px); }

/* A pop-up button value, as in a settings row */
.ds-popup { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px; border-radius: 6px; background: var(--grouped); color: var(--label); font-size: 13px; white-space: nowrap; }
.ds-popup .ds-icon { font-size: 11px; color: var(--label-3); }

/* Progress steps (the README panel) */
.ds-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ds-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--label-3); transition: color 0.2s ease; }
.ds-steps .ds-step-mark { position: relative; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--separator); box-sizing: border-box; transition: border-color 0.2s ease, background-color 0.2s ease; }
.ds-steps li.is-active { color: var(--label); }
.ds-steps li.is-active .ds-step-mark { border-color: rgb(var(--accent-rgb) / 0.2); border-top-color: var(--accent); animation: ds-spin 0.8s linear infinite; }
.ds-steps li.is-done { color: var(--label-2); }
.ds-steps li.is-done .ds-step-mark { border-color: var(--accent); background: var(--accent); }
.ds-steps li.is-done .ds-step-mark::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: ds-check-pop 0.4s; }

/* Terminal */
.ds-terminal { background: #1c1c1e; color: #f5f5f7; border-radius: var(--radius); font: 13.5px/1.6 var(--font-mono); padding: 14px 16px; min-height: 120px; box-shadow: var(--shadow-lg); overflow-x: auto; }
.ds-terminal .ds-prompt { color: #7b7af0; }
.ds-terminal .ds-dim { color: rgba(235, 235, 245, 0.55); }
.ds-terminal .ds-ok { color: #30d158; }
.ds-terminal [data-line] { white-space: pre; }

/* The menu bar panel */
.ds-menubar-strip { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 26px; padding: 0 14px; border-radius: 10px 10px 0 0; background: rgb(var(--accent-rgb) / 0.08); font-size: 13px; color: var(--label-2); }
.ds-menubar-strip .ds-menubar-icon { width: 18px; height: 18px; color: var(--label); }
.ds-panel { width: 100%; max-width: 340px; background: var(--grouped); border-radius: 14px; padding: 14px; box-sizing: border-box; box-shadow: var(--shadow-lg); border: 1px solid var(--separator); }
.ds-panel .ds-section-header { margin-top: 4px; }
.ds-panel .ds-group + .ds-section-header { margin-top: 16px; }
.ds-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ds-panel-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 0 4px; font-size: 13px; color: var(--label-2); }
.ds-panel-footer span { display: inline-flex; align-items: center; gap: 6px; }

/* MARK: - Page sections */

.ds-section { padding: 96px 0; }
.ds-section-tight { padding: 64px 0; }
.ds-section-card { background: var(--card); }
.ds-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.ds-section-head .ds-title { margin: 10px 0 16px; }

.ds-grid { display: grid; gap: 16px; }
.ds-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .ds-grid-3, .ds-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ds-grid-2, .ds-grid-3, .ds-grid-4 { grid-template-columns: minmax(0, 1fr); } .ds-section { padding: 64px 0; } }

/* A feature: copy on one side, a live recreation of the app on the other */
.ds-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ds-feature + .ds-feature { margin-top: 112px; }
.ds-feature.is-flipped > :first-child { order: 2; }
.ds-feature .ds-header { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -0.02em; margin: 10px 0 14px; }
.ds-feature .ds-body { font-size: 17px; }
.ds-feature-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.ds-feature-list li { display: flex; gap: 10px; font-size: 15px; color: var(--label-2); }
.ds-feature-list .ds-icon { color: var(--accent); font-size: 18px; margin-top: 2px; }
@media (max-width: 860px) {
    .ds-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ds-feature.is-flipped > :first-child { order: 0; }
    .ds-feature + .ds-feature { margin-top: 80px; }
}

/* A window: the app's panels and windows, drawn in HTML */
.ds-window {
    background: var(--grouped); border-radius: 14px; overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--separator);
}
.ds-window-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--card); border-bottom: 1px solid var(--separator); }
.ds-window-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.ds-window-bar i:nth-child(2) { background: #febc2e; }
.ds-window-bar i:nth-child(3) { background: #28c840; }
.ds-window-bar span { margin: 0 auto; font-size: 13px; font-weight: 600; color: var(--label-2); padding-right: 52px; }
.ds-window-body { padding: 16px; }
.ds-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 340px; padding: 28px; box-sizing: border-box;
    background:
        radial-gradient(120% 100% at 50% 0%, rgb(var(--accent-rgb) / 0.09), transparent 70%),
        rgb(var(--accent-rgb) / 0.035);
    border-radius: 20px;
}

/* MARK: - Chat (bubbles, as in the chat window) */

.ds-chat { display: flex; flex-direction: column; gap: 12px; }
.ds-bubble {
    max-width: 80%; padding: 11px 15px; border-radius: var(--radius-bubble);
    font-size: 15px; line-height: 1.45;
}
.ds-bubble-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.ds-bubble-ai { align-self: flex-start; background: var(--card); color: var(--label); border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.ds-bubble-ai .ds-bubble-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.ds-composer {
    display: flex; align-items: center; gap: 10px; margin-top: 4px;
    background: var(--card); border-radius: 16px; padding: 10px 10px 10px 14px; box-shadow: var(--shadow);
    font-size: 14px; color: var(--label-3);
}
.ds-composer .ds-send {
    margin-left: auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: 15px;
}
.ds-model-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: var(--grouped); color: var(--label-2); font-size: 12px; font-weight: 500; white-space: nowrap; }

/* MARK: - Animations
   Every keyframe matches a loop in the app: values, durations and easing. */

/* HeroIconView: the symbol floats -3 → 4 over 1.6s, its glow breathes
   0.94 → 1.08, and two sparkles twinkle (scale .2 → 1.1 → .8 → 1 → .2,
   fade in and out, a quarter turn) over 1.8s, the second 0.7s later. */
.ds-hero-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 220px; height: 220px; }
.ds-hero-icon .ds-glow {
    position: absolute; inset: 14%; border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.16); filter: blur(18px);
    animation: ds-breathe 1.6s var(--ease-in-out) infinite alternate;
}
.ds-hero-icon img, .ds-hero-icon .ds-hero-symbol { position: relative; width: 72%; height: auto; animation: ds-float 1.6s var(--ease-in-out) infinite alternate; filter: drop-shadow(0 18px 30px rgba(20, 20, 80, 0.28)); }
.ds-hero-symbol { color: var(--accent); }
.ds-sparkle { position: absolute; color: var(--accent); width: 13px; height: 13px; animation: ds-twinkle 1.8s linear infinite backwards; }
.ds-sparkle svg { width: 100%; height: 100%; display: block; fill: currentColor; stroke: none; }
/* Sparkles twinkle in the space around the icon, never over it */
.ds-hero-icon .ds-sparkle:nth-of-type(1) { right: 0; top: 4%; width: 13%; height: 13%; color: var(--orange); }
.ds-hero-icon .ds-sparkle:nth-of-type(2) { left: 0; top: 34%; width: 9%; height: 9%; animation-delay: 0.7s; color: var(--lavender); }
.ds-hero-icon .ds-sparkle:nth-of-type(3) { right: 4%; bottom: 2%; width: 7%; height: 7%; animation-delay: 1.2s; color: var(--teal); }

@keyframes ds-float { from { transform: translateY(-3px); } to { transform: translateY(4px); } }
@keyframes ds-breathe { from { transform: scale(0.94); } to { transform: scale(1.08); } }
@keyframes ds-twinkle {
    0% { transform: scale(0.2) rotate(0deg); opacity: 0; }
    30% { transform: scale(1.1) rotate(27deg); opacity: 1; }
    50% { transform: scale(0.8) rotate(45deg); }
    70% { transform: scale(1) rotate(63deg); opacity: 1; }
    100% { transform: scale(0.2) rotate(90deg); opacity: 0; }
}

/* DSBeaconAnimation: three rings ripple out to 2.2× over 2.4s, staggered,
   while the symbol breathes 0.96 → 1.06 */
.ds-beacon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 160px; }
.ds-beacon .ds-ring {
    position: absolute; width: 45%; height: 45%; border-radius: 50%;
    border: 2px solid var(--accent); opacity: 0;
    animation: ds-ripple 2.4s ease-out infinite;
}
.ds-beacon .ds-ring:nth-child(2) { animation-delay: 0.8s; }
.ds-beacon .ds-ring:nth-child(3) { animation-delay: 1.6s; }
.ds-beacon .ds-core {
    position: relative; width: 62%; height: 62%; border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.12); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.ds-beacon .ds-core .ds-icon { animation: ds-pulse-symbol 0.9s var(--ease-in-out) infinite alternate; }
@keyframes ds-ripple { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes ds-pulse-symbol { from { transform: scale(0.96); } to { transform: scale(1.06); } }

/* DSOrbitAnimation / thinking: dots of falling size circle a symbol every 1.6s */
.ds-orbit { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; }
.ds-orbit .ds-core {
    width: 62%; height: 62%; border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.12); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 32px;
    animation: ds-glow-pulse 0.9s var(--ease-in-out) infinite alternate;
}
.ds-orbit .ds-dots { position: absolute; inset: 0; animation: ds-spin 1.6s linear infinite; }
.ds-orbit .ds-dots i { position: absolute; top: 50%; left: 50%; border-radius: 50%; background: var(--accent); }
.ds-orbit .ds-dots i:nth-child(1) { width: 12px; height: 12px; margin: -6px; transform: rotate(0deg) translateX(50px); }
.ds-orbit .ds-dots i:nth-child(2) { width: 9px; height: 9px; margin: -4.5px; opacity: 0.75; transform: rotate(-32deg) translateX(50px); }
.ds-orbit .ds-dots i:nth-child(3) { width: 6px; height: 6px; margin: -3px; opacity: 0.5; transform: rotate(-64deg) translateX(50px); }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-glow-pulse { from { transform: scale(0.92); } to { transform: scale(1.06); } }

/* DSSparkleAnimation: the thing being made bobs among twinkling sparkles */
.ds-making { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; }
.ds-making .ds-core {
    width: 66%; height: 66%; border-radius: 50%;
    background: rgb(var(--accent-rgb) / 0.12); color: var(--accent);
    display: flex; align-items: center; justify-content: center; font-size: 36px;
    animation: ds-pulse-symbol 1.4s var(--ease-in-out) infinite alternate;
}
.ds-making .ds-core .ds-icon { animation: ds-bob 1.4s var(--ease-in-out) infinite alternate; }
.ds-making .ds-sparkle { animation: ds-sparkle-blink 0.9s var(--ease-in-out) infinite alternate; }
.ds-making .ds-sparkle:nth-of-type(1) { left: 6%; top: 14%; width: 24px; height: 24px; }
.ds-making .ds-sparkle:nth-of-type(2) { right: 4%; top: 24%; width: 18px; height: 18px; animation-delay: 0.5s; }
.ds-making .ds-sparkle:nth-of-type(3) { right: 12%; bottom: 8%; width: 15px; height: 15px; animation-delay: 1s; }
.ds-making .ds-sparkle:nth-of-type(4) { left: 12%; bottom: 12%; width: 13px; height: 13px; animation-delay: 1.4s; }
@keyframes ds-bob { from { transform: translateY(3px); } to { transform: translateY(-3px); } }
@keyframes ds-sparkle-blink { from { transform: scale(0.3); opacity: 0.15; } to { transform: scale(1); opacity: 1; } }

/* TypingIndicatorView: three dots bounce in turn (1.1s, 0.16s apart) */
.ds-typing { display: inline-flex; align-items: flex-end; gap: 6px; height: 18px; padding-top: 4px; }
.ds-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: 0.45; animation: ds-typing 1.1s infinite backwards; }
.ds-typing i:nth-child(2) { animation-delay: 0.16s; }
.ds-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ds-typing {
    0% { transform: translateY(0); opacity: 0.45; animation-timing-function: ease-out; }
    20% { transform: translateY(-7px); opacity: 1; animation-timing-function: ease-in; }
    45% { transform: translateY(0); opacity: 0.45; }
    100% { transform: translateY(0); opacity: 0.45; }
}

/* Recording overlay: seven 4pt bars, taller in the middle */
.ds-wave { display: inline-flex; align-items: center; gap: 3px; height: 36px; }
.ds-wave i { width: 4px; height: 6px; border-radius: 2px; background: rgb(var(--accent-rgb) / 0.85); animation: ds-wave 0.9s var(--ease-in-out) infinite alternate; }
.ds-wave i:nth-child(1) { animation-delay: -0.4s; --h: 14px; }
.ds-wave i:nth-child(2) { animation-delay: -0.15s; --h: 22px; }
.ds-wave i:nth-child(3) { animation-delay: -0.55s; --h: 30px; }
.ds-wave i:nth-child(4) { animation-delay: -0.05s; --h: 36px; }
.ds-wave i:nth-child(5) { animation-delay: -0.7s; --h: 30px; }
.ds-wave i:nth-child(6) { animation-delay: -0.3s; --h: 22px; }
.ds-wave i:nth-child(7) { animation-delay: -0.6s; --h: 14px; }
@keyframes ds-wave { from { height: 6px; } to { height: var(--h); } }

/* Listening orb: a soft accent orb that breathes behind the waveform */
.ds-orb {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 96px; height: 96px; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgb(var(--accent-rgb) / 0.28), rgb(var(--accent-rgb) / 0.08) 70%);
    animation: ds-breathe 1.2s var(--ease-in-out) infinite alternate;
}

/* Translating: a bubble whose letter cycles through scripts, popping in */
.ds-translate { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; color: var(--accent); }
.ds-translate svg { width: 88px; height: 88px; animation: ds-wiggle 0.7s infinite; transform-origin: 50% 80%; }
.ds-translate b {
    position: absolute; top: 24px; left: 0; right: 0; text-align: center;
    font: 700 30px/1 var(--font); color: #fff;
}
.ds-translate b.is-pop { animation: ds-letter-pop 0.7s; }
@keyframes ds-wiggle { 0% { transform: rotate(0); } 12% { transform: rotate(3.4deg); } 24% { transform: rotate(-2.3deg); } 36%, 100% { transform: rotate(0); } }
@keyframes ds-letter-pop { 0% { transform: scale(0.6); } 18% { transform: scale(1.15); } 32%, 100% { transform: scale(1); } }

/* Organizing: files arc into a folder, which bounces as each lands */
.ds-organize { position: relative; width: 180px; height: 140px; }
.ds-organize .ds-folder { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 64px; color: var(--accent); animation: ds-folder-bounce 0.7s infinite; }
.ds-organize .ds-folder .ds-icon { fill: currentColor; stroke: none; }
.ds-organize .ds-file { position: absolute; top: 0; left: 0; offset-anchor: center; font-size: 26px; opacity: 0; offset-rotate: 0deg; animation: ds-file-arc 2.1s infinite; }
.ds-organize .ds-file .ds-icon { fill: currentColor; stroke: none; }
.ds-organize .ds-file:nth-child(2) { color: var(--orange); offset-path: path("M 12 30 Q 50 -30 90 100"); }
.ds-organize .ds-file:nth-child(3) { color: var(--teal); offset-path: path("M 90 0 Q 90 -40 90 100"); animation-delay: 0.7s; }
.ds-organize .ds-file:nth-child(4) { color: var(--pink); offset-path: path("M 168 30 Q 130 -30 90 100"); animation-delay: 1.4s; }
@keyframes ds-file-arc {
    0% { offset-distance: 0%; opacity: 0; transform: scale(0.6); animation-timing-function: ease-in; }
    8% { opacity: 1; }
    13% { transform: scale(1.1); }
    34% { offset-distance: 100%; opacity: 1; transform: scale(0.4); }
    36%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes ds-folder-bounce { 0%, 40%, 100% { transform: translateX(-50%) scale(1); } 52% { transform: translateX(-50%) scale(1.08, 0.92); } 64% { transform: translateX(-50%) scale(0.97, 1.03); } }

/* Success: a checkmark pops in (.2 → 1.18 → .94 → 1) and confetti bursts out */
.ds-success { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 120px; height: 120px; color: var(--accent); }
.ds-success .ds-check { width: 64px; height: 64px; position: relative; z-index: 1; }
.ds-success.is-playing .ds-check { animation: ds-check-pop 0.5s; }
@keyframes ds-check-pop { 0% { transform: scale(0.2); } 45% { transform: scale(1.18); } 75% { transform: scale(0.94); } 100% { transform: scale(1); } }
.ds-confetti { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; pointer-events: none; animation: ds-confetti 0.9s ease-out 0.12s both; }
@keyframes ds-confetti {
    0% { transform: translate(0, 0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    60% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 180deg)); opacity: 0; }
}

/* CelebrationIconView: springs in from 0.55, then bobs */
.ds-celebrate { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ds-celebrate > img, .ds-celebrate > .ds-celebrate-icon { animation: ds-spring-in 0.9s var(--ease-arrive) both, ds-float 1.6s var(--ease-in-out) 0.6s infinite alternate; }
@keyframes ds-spring-in { 0% { transform: scale(0.55); } 45% { transform: scale(1.08); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } }

/* Engines card: a spinning check indicator morphs into a checkmark */
.ds-engine-status { align-self: center; position: relative; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.ds-engine-status .ds-spinner {
    position: absolute; inset: 1px; border-radius: 50%;
    border: 2px solid rgb(var(--accent-rgb) / 0.18); border-top-color: var(--accent);
    animation: ds-spin 0.8s linear infinite;
}
.ds-engine-status .ds-done { opacity: 0; transform: scale(0.4); color: var(--success); font-size: 22px; transition: opacity 0.25s ease, transform 0.4s var(--ease-arrive); }
.ds-engine-status .ds-done .ds-icon { stroke-width: 2.2; }
.ds-engine-status.is-ready .ds-spinner { opacity: 0; transform: scale(1.4); transition: opacity 0.2s ease, transform 0.3s ease; animation-play-state: paused; }
.ds-engine-status.is-ready .ds-done { opacity: 1; transform: scale(1); }

/* Writing: text appears as it's written, with a caret */
.ds-caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: ds-caret 1s steps(1) infinite; }
@keyframes ds-caret { 50% { opacity: 0; } }

/* Shimmer over a loading line */
.ds-shimmer { position: relative; overflow: hidden; background: var(--code-bg); border-radius: 6px; }
.ds-shimmer::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); animation: ds-shimmer 1.4s linear infinite; }
@media (prefers-color-scheme: dark) { .ds-shimmer::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent); } }
@keyframes ds-shimmer { to { transform: translateX(100%); } }

/* Model download progress bar */
.ds-progress { height: 6px; border-radius: 3px; background: rgb(var(--accent-rgb) / 0.15); overflow: hidden; }
.ds-progress i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 0.4s ease; }

/* "Arrive": content fades and rises 12pt into place with the arrive spring */
.ds-arrive { opacity: 0; transform: translateY(12px); }
.ds-arrive.is-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.7s var(--ease-arrive); transition-delay: var(--delay, 0s); }
@keyframes ds-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* A chat bubble arriving: grows from its corner and rises */
.ds-bubble.is-new { animation: ds-bubble-in 0.42s var(--ease-arrive) both; }
.ds-bubble-user.is-new { transform-origin: bottom right; }
.ds-bubble-ai.is-new { transform-origin: bottom left; }
@keyframes ds-bubble-in { from { opacity: 0; transform: translateY(14px) scale(0.85); } to { opacity: 1; transform: none; } }

/* MARK: - Modal (sheet) */

.ds-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; }
.ds-modal.is-open { display: flex; }
.ds-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: ds-fade 0.2s ease both; }
.ds-modal-sheet {
    position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--grouped); border-radius: 16px; padding: 24px; box-sizing: border-box;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    animation: ds-sheet-in 0.42s var(--ease-arrive) both;
}
@keyframes ds-fade { from { opacity: 0; } }
@keyframes ds-sheet-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
.ds-choice { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; color: var(--label); transition: background-color 0.15s ease; }
.ds-choice:hover { background: var(--card-hover); }
.ds-choice .ds-row-icon { font-size: 22px; }
.ds-choice .ds-chevron { margin-left: auto; color: var(--label-3); font-size: 14px; }
.ds-choice.is-disabled { cursor: default; filter: grayscale(1); opacity: 0.5; }
.ds-choice.is-disabled:hover { background: transparent; }
.ds-choice .ds-choice-soon { flex-shrink: 0; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 3px 8px; border-radius: 10px; background: rgb(127 127 127 / 0.16); color: var(--label-2); }

/* MARK: - Footer */

.ds-footer { padding: 56px 0 40px; border-top: 1px solid var(--separator); font-size: 13px; color: var(--label-2); }
.ds-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.ds-footer h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--label); }
.ds-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-footer a { color: var(--label-2); text-decoration: none; }
.ds-footer a:hover { color: var(--accent); }
.ds-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--separator); }
@media (max-width: 760px) { .ds-footer-grid { grid-template-columns: 1fr 1fr; } .ds-footer-grid > :first-child { grid-column: 1 / -1; } }

/* Language picker, styled like a pop-up button */
.ds-lang { position: relative; }
.ds-lang-button {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border: 0; border-radius: var(--radius-sm); background: var(--card); color: var(--label);
    font: 500 13px/1 var(--font); cursor: pointer; box-shadow: var(--shadow);
}
.ds-lang-button .ds-icon { color: var(--accent); }
.ds-lang-menu {
    position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 200px; max-height: 320px; overflow-y: auto; padding: 5px;
    background: var(--card); border-radius: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--separator);
    display: none;
}
.ds-lang-menu.is-open { display: block; animation: ds-sheet-in 0.25s var(--ease-arrive) both; }
.ds-lang-menu a { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: var(--label); text-decoration: none; white-space: nowrap; }
.ds-lang-menu a:hover { background: var(--accent); color: #fff; }
.ds-lang-menu a[aria-current="true"] { font-weight: 600; color: var(--accent); }
.ds-lang-menu a[aria-current="true"]:hover { color: #fff; }
html[dir="rtl"] .ds-lang-menu { right: auto; left: 0; }

/* MARK: - Prose (docs, legal) */

.ds-prose { font-size: 16px; line-height: 1.65; color: var(--label-2); }
/* :where() keeps these at zero specificity so utility classes in the content win. */
:where(.ds-prose) :where(h1, h2, h3, h4, th, strong) { color: var(--label); }
:where(.ds-prose) :where(h1, h2, h3, h4) { letter-spacing: -0.01em; }
:where(.ds-prose) :where(a) { color: var(--accent); text-decoration: none; }
:where(.ds-prose) :where(a:hover) { text-decoration: underline; }
:where(.ds-prose) :where(code) { font-family: var(--font-mono); font-size: 0.88em; background: var(--code-bg); color: var(--label); padding: 0.1em 0.35em; border-radius: 5px; }
/* Code blocks are a small terminal window: title bar with traffic lights, green text. */
:where(.ds-prose) :where(pre) { position: relative; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; color: #30d158; background: linear-gradient(#2c2c2e 0 32px, #1c1c1e 32px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 46px 16px 14px; overflow-x: auto; direction: ltr; text-align: left; box-shadow: var(--shadow); }
:where(.ds-prose) :where(pre)::before { content: ""; position: absolute; top: 10px; left: 14px; width: 52px; height: 12px; background: radial-gradient(circle at 6px 6px, #ff5f57 5.5px, transparent 6px), radial-gradient(circle at 26px 6px, #febc2e 5.5px, transparent 6px), radial-gradient(circle at 46px 6px, #28c840 5.5px, transparent 6px); }
:where(.ds-prose) :where(pre code) { font-size: inherit; background: none; color: inherit; padding: 0; }
/* Code inside a dark block (bg-gray-900 examples) sits on the block, not on a light inline pill */
:where(.ds-prose) :where(.bg-gray-900 code, .bg-gray-800 code) { background: none; padding: 0; color: #f5f5f7; }
:where(.ds-prose) :where(table) { border-collapse: collapse; width: 100%; }
:where(.ds-prose) :where(img) { border-radius: var(--radius); }

/* Content written with Tailwind utilities (docs, legal) follows the
   system appearance: cards, grays and tinted callouts switch to their dark
   counterparts. Specific enough to win over the CDN's generated rules. */
@media (prefers-color-scheme: dark) {
    html body .bg-white { background-color: var(--card); }
    html body .bg-gray-50 { background-color: var(--grouped); }
    html body .bg-gray-100 { background-color: var(--code-bg); }
    html body .bg-gray-200 { background-color: #3a3a3c; }
    html body .text-gray-900, html body .text-gray-800 { color: var(--label); }
    html body .text-gray-700, html body .text-gray-600 { color: var(--label-2); }
    html body .text-gray-500 { color: var(--label-3); }
    html body .border-gray-100, html body .border-gray-200, html body .border-gray-300 { border-color: var(--separator); }
    html body .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--separator); }
    html body .hover\:bg-gray-50:hover, html body .hover\:bg-gray-100:hover { background-color: var(--card-hover); }
    html body .hover\:text-gray-900:hover { color: var(--label); }
    html body .bg-blue-50, html body .bg-blue-100 { background-color: rgba(10, 132, 255, 0.14); }
    html body .border-blue-200 { border-color: rgba(10, 132, 255, 0.35); }
    html body .text-blue-700, html body .text-blue-800, html body .text-blue-900 { color: #64b5ff; }
    html body .bg-yellow-50, html body .bg-yellow-100, html body .bg-amber-50 { background-color: rgba(255, 214, 10, 0.12); }
    html body .border-yellow-200, html body .border-amber-200 { border-color: rgba(255, 214, 10, 0.32); }
    html body .text-yellow-800, html body .text-yellow-900, html body .text-amber-800 { color: #ffd60a; }
    html body .bg-green-50, html body .bg-green-100 { background-color: rgba(48, 209, 88, 0.13); }
    html body .border-green-200 { border-color: rgba(48, 209, 88, 0.32); }
    html body .text-green-800, html body .text-green-600 { color: #30d158; }
    html body .bg-red-50, html body .bg-red-100 { background-color: rgba(255, 69, 58, 0.14); }
    html body .text-red-800 { color: #ff6961; }
    html body .shadow-sm { box-shadow: var(--shadow); }
    html body pre.bg-gray-900, html body .bg-gray-900 { background-color: #1c1c1e; }
}

/* MARK: - Color
   The app's tints: each quick action set, file, and badge has its own color.
   A tint class recolors the icons inside it; text stays in the accent. */

.tint-orange { --tint: var(--orange); }
.tint-teal { --tint: var(--teal); }
.tint-pink { --tint: var(--pink); }
.tint-green { --tint: var(--success); }
.tint-yellow { --tint: var(--yellow); }
.tint-lavender { --tint: var(--lavender); }
.tint-indigo { --tint: var(--accent); }
[class*="tint-"] .ds-symbol, .ds-symbol[class*="tint-"] {
    color: var(--tint);
    background: color-mix(in srgb, var(--tint) 15%, transparent);
}
[class*="tint-"] .ds-eyebrow .ds-icon, .ds-eyebrow[class*="tint-"] .ds-icon,
[class*="tint-"] .ds-feature-list .ds-icon,
[class*="tint-"] > .ds-row-icon, [class*="tint-"] .ds-row-icon { color: var(--tint); }
[class*="tint-"] .ds-stage {
    background:
        radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--tint) 16%, transparent), transparent 70%),
        color-mix(in srgb, var(--tint) 6%, transparent);
}
section[id], .ds-feature[id] { scroll-margin-top: 72px; }

.ds-gradient-text {
    background: var(--gradient); background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: ds-gradient-pan 7s var(--ease-in-out) infinite alternate;
}
@media (min-width: 641px) { .ds-display .ds-gradient-text { white-space: nowrap; } }
@keyframes ds-gradient-pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* The set badge: a gradient circle with a white symbol and a colored glow */
.ds-badge-orb {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 30px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--orange), var(--accent) 55%, var(--teal));
    box-shadow: 0 12px 30px -10px var(--teal);
}
.ds-badge-orb .ds-icon { animation: ds-pulse-symbol 0.9s var(--ease-in-out) infinite alternate; }
.ds-badge-orb.is-lg { width: 96px; height: 96px; font-size: 44px; }
.ds-badge-orb.is-warm { background: linear-gradient(135deg, var(--yellow), var(--orange) 45%, var(--pink)); box-shadow: 0 12px 30px -10px var(--pink); }
.ds-badge-orb.is-cool { background: linear-gradient(135deg, var(--teal), var(--accent)); box-shadow: 0 12px 30px -10px var(--accent); }
.ds-badge-orb.is-fresh { background: linear-gradient(135deg, var(--success), var(--teal)); box-shadow: 0 12px 30px -10px var(--success); }

/* "Coming soon": a pill with a gradient edge and a shimmer running across it */
.ds-soon {
    position: relative; display: inline-flex; align-items: center; gap: 6px; overflow: hidden;
    padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--label);
    background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box;
    border: 1.5px solid transparent;
}
.ds-soon .ds-icon { color: var(--orange); }
.ds-soon::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / 0.18), transparent); animation: ds-shimmer 2.4s linear infinite; }

/* A card that lifts toward you on hover while its symbol wiggles */
.ds-lift { transition: transform 0.35s var(--ease-snappy), box-shadow 0.35s ease; }
.ds-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ds-lift:hover .ds-symbol, .ds-lift:hover .ds-badge-orb { animation: ds-wiggle 0.7s; }

/* A card with a gradient edge, for the plan that's on its way */
.ds-card-gradient { background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box; border: 2px solid transparent; }

/* Aurora: soft orange, indigo, and teal light drifting behind a hero */
.ds-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ds-aurora i { position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(80px); opacity: 0.22; animation: ds-drift 14s var(--ease-in-out) infinite alternate; }
.ds-aurora i:nth-child(1) { left: -8%; top: -12%; background: var(--orange); }
.ds-aurora i:nth-child(2) { right: -10%; top: 4%; background: var(--accent); opacity: 0.26; animation-delay: -5s; animation-duration: 17s; }
.ds-aurora i:nth-child(3) { left: 30%; top: 38%; background: var(--teal); animation-delay: -9s; animation-duration: 19s; }
@media (prefers-color-scheme: dark) { .ds-aurora i { opacity: 0.18; } }
@keyframes ds-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.15); } }

/* The hero halo: the icon floats while sparkles in the app's colors twinkle
   on a slowly turning ring around it. */
.ds-halo { --size: min(470px, 92vw); position: relative; display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); margin: 0 auto; }
.ds-halo .ds-glow { position: absolute; inset: 20%; border-radius: 50%; background: var(--gradient); opacity: 0.32; filter: blur(34px); animation: ds-breathe 1.6s var(--ease-in-out) infinite alternate; }
.ds-halo > img { position: relative; width: 62%; height: auto; animation: ds-float 1.6s var(--ease-in-out) infinite alternate; filter: drop-shadow(0 22px 36px rgba(20, 20, 80, 0.32)); }
.ds-halo-ring { position: absolute; inset: 0; animation: ds-spin 48s linear infinite; }
.ds-halo-ring > span {
    position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2);
    transform: rotate(var(--a)) translateX(calc(var(--size) * 0.465)) rotate(calc(-1 * var(--a)));
}
.ds-halo-ring .ds-sparkle { inset: 0; width: 100%; height: 100%; color: inherit; animation-delay: var(--d, 0s); }

/* Team hub: a shared host Mac, its rings rippling, with team Macs around it
   and data flowing along the lines between them */
.ds-hub { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1.25; margin: 0 auto; }
.ds-hub svg.ds-hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ds-hub-lines line { stroke: rgb(var(--accent-rgb) / 0.35); stroke-width: 0.5; stroke-dasharray: 1.6 1.6; animation: ds-flow 1.2s linear infinite; }
.ds-hub-lines line:nth-child(even) { stroke: color-mix(in srgb, var(--teal) 55%, transparent); animation-direction: reverse; }
@keyframes ds-flow { to { stroke-dashoffset: -3.2; } }
.ds-hub .ds-beacon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 132px; height: 132px; }
.ds-hub .ds-beacon .ds-core { background: var(--gradient); color: #fff; font-size: 46px; box-shadow: 0 16px 36px -12px rgb(var(--accent-rgb) / 0.8); }
.ds-hub-label { position: absolute; left: 50%; top: calc(50% + 66px); transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.ds-hub-node {
    position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500; color: var(--label-2); white-space: nowrap;
}
.ds-hub-node > .ds-symbol { animation: ds-float 1.6s var(--ease-in-out) infinite alternate; animation-delay: var(--d, 0s); }
.ds-hub-node .ds-symbol { width: 48px; height: 48px; font-size: 22px; background: var(--card); box-shadow: var(--shadow-lg); color: var(--tint, var(--accent)); }
@media (max-width: 520px) { .ds-hub .ds-beacon { width: 104px; height: 104px; } .ds-hub .ds-beacon .ds-core { font-size: 36px; } .ds-hub-label { top: calc(50% + 50px); } .ds-hub-node .ds-symbol { width: 40px; height: 40px; font-size: 18px; } .ds-hub-node small { display: none; } }

/* App screenshots (static/images/screens, 2x), light or dark to match the system */
.ds-shot { display: block; max-width: 1000px; margin: 48px auto 0; }
.ds-shot img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--separator); box-shadow: var(--shadow-lg); }

/* MARK: - App recreations (the features page)
   The Mac app's settings pages, panels and windows, drawn the way the app
   draws them: SwiftUI DSCard rows 48pt tall with 16pt titles (Rows.swift,
   SwiftUIComponents.swift), the recording overlay, the rewrite panel, the
   README panel, the pairing sheet, and the Automations page. Scripted motion
   (progress, typing, stage changes) lives in voxy.js. */

.app-col { width: 100%; max-width: 440px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
/* DSSectionCaption: uppercase 13pt semibold, 0.6 kerning, secondary, inset 4pt */
.app-caption { margin: 0 0 8px; padding-inline-start: 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--label-2); line-height: 1.3; }
.app-caption-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.app-caption-row .app-caption { margin: 0; }
/* DSFootnote */
.app-footnote { margin: 8px 0 0; padding: 0 4px; font-size: 13px; color: var(--label-2); }

/* DSRow / ControlRow: icon in a 24pt column, 16pt title, control trailing */
.app-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; box-sizing: border-box; }
.app-row.has-sub { padding-top: 10px; padding-bottom: 10px; }
.app-row .ds-row-icon { font-size: 18px; }
.app-row-title { flex: 1 1 auto; min-width: 0; font-size: 16px; color: var(--label); line-height: 1.3; }
.app-row-title.is-medium { font-size: 15px; font-weight: 500; }
.app-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app-row-sub { font-size: 13px; color: var(--label-2); line-height: 1.35; }
.app-trailing { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 62%; flex-shrink: 1; color: var(--label-2); font-size: 15px; }
.app-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-glyph { display: inline-flex; flex-shrink: 0; font-size: 18px; color: var(--accent); }
.app-glyph.is-muted { color: var(--label-2); }
.app-glyph.is-small { font-size: 14px; }
.app-mono { font: 14px/1 var(--font-mono); color: var(--label); white-space: nowrap; }
.app-spacer { flex: 1 1 auto; }
.app-hstack { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.app-content { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 16px; }
.app-content-title { margin: 0; font-size: 16px; color: var(--label); }

/* Capsule badges (LocalModelsPanel.badge) */
.app-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.app-badge.is-plain { background: rgb(127 127 127 / 0.12); color: var(--label-2); }
.app-badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* AppKit and SwiftUI controls */
.app-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0;
    height: 24px; padding: 0 10px; border-radius: 6px; box-sizing: border-box;
    background: var(--card); color: var(--label); font: 400 13px/1 var(--font); white-space: nowrap;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 1px 1.5px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, filter 0.15s ease, background-color 0.2s ease;
}
.app-button .ds-icon { font-size: 12px; stroke-width: 2.4; }
.app-button.is-prominent { background: var(--accent); color: #fff; box-shadow: none; }
.app-button.is-lg { height: 30px; padding: 0 14px; }
.app-button.is-pressed { transform: scale(0.95); filter: brightness(0.88); }
.app-link { color: var(--accent); font-size: 13px; font-weight: 500; white-space: nowrap; }
.app-popup {
    display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 60%; flex-shrink: 1;
    height: 24px; padding: 0 5px 0 10px; border-radius: 6px; box-sizing: border-box;
    background: var(--card); color: var(--label); font-size: 13px;
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.16), 0 1px 1.5px rgba(0, 0, 0, 0.12);
}
.app-row:has(.app-popup) .app-row-title { flex: 1 0 auto; }
.app-popup > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-popup .ds-icon { font-size: 12px; color: var(--label-2); stroke-width: 2.2; }
.app-field { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 64px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 5px; border: 1px solid var(--separator); background: var(--card); font-size: 13px; color: var(--label); }
@media (prefers-color-scheme: dark) {
    .app-button, .app-popup { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12); }
    .app-button.is-prominent { background: var(--accent); }
    .app-field { background: rgba(255, 255, 255, 0.06); }
}
/* SwiftUI's segmented Picker */
.app-segmented { display: flex; padding: 2px; border-radius: 8px; background: rgb(120 120 128 / 0.16); }
.app-segmented span { flex: 1; padding: 3px 0; border-radius: 6px; text-align: center; font-size: 13px; font-weight: 500; color: var(--label); }
.app-segmented .is-on { background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
@media (prefers-color-scheme: dark) { .app-segmented .is-on { background: rgba(255, 255, 255, 0.2); } }

/* A block that opens and closes with the app's spring */
.app-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.42s var(--ease-arrive), opacity 0.3s ease; }
.app-reveal > * { min-height: 0; overflow: hidden; }
.app-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.ds-group > .app-reveal:first-child:not(.is-open) + *::before { display: none; }

/* Symbol bounce (.symbolEffect(.bounce)) */
.app-bounce { animation: app-bounce 0.5s var(--ease-snappy); }
@keyframes app-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 65% { transform: scale(0.94); } 100% { transform: scale(1); } }

/* The animations at the sizes the app shows them: DSOrbitAnimation and
   DSBeaconAnimation at 96pt and 56pt */
.ds-orbit.app-orbit-96 { width: 96px; height: 96px; }
.app-orbit-96 .ds-core { font-size: 25px; }
.app-orbit-96 .ds-dots i:nth-child(1) { width: 11.5px; height: 11.5px; margin: -5.75px; transform: rotate(0deg) translateX(40px); }
.app-orbit-96 .ds-dots i:nth-child(2) { width: 9px; height: 9px; margin: -4.5px; transform: rotate(-32deg) translateX(40px); }
.app-orbit-96 .ds-dots i:nth-child(3) { width: 6.7px; height: 6.7px; margin: -3.35px; transform: rotate(-64deg) translateX(40px); }
.ds-beacon.app-beacon-96 { width: 96px; height: 96px; }
.app-beacon-96 .ds-core { font-size: 27px; }
.ds-beacon.app-beacon-56 { width: 56px; height: 56px; flex-shrink: 0; }
.app-beacon-56 .ds-core { font-size: 16px; }
.app-beacon-56 .ds-ring { border-width: 1.5px; }

/* MARK: Engines (EngineStatusView): a spinning arrow while checking, then a
   green checkmark that morphs in (.replace.downUp) and bounces */
.app-engine { display: inline-grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; font-size: 19px; }
.app-engine > * { grid-area: 1 / 1; display: inline-flex; transition: opacity 0.25s ease, transform 0.3s var(--ease-snappy); }
.app-engine-checking { color: var(--label-3); }
.app-engine-checking > span { display: inline-flex; animation: ds-spin 1s linear infinite; }
.app-engine-ready { color: var(--success); opacity: 0; transition: none; }
.app-engine.is-ready .app-engine-checking { opacity: 0; transform: translateY(7px) scale(0.6); }
.app-engine.is-ready .app-engine-ready { opacity: 1; animation: app-morph-in 0.6s var(--ease-in-out) both; }
@keyframes app-morph-in { 0% { opacity: 0; transform: translateY(-7px) scale(0.6); } 40% { opacity: 1; transform: none; } 65% { transform: scale(1.2); } 85% { transform: scale(0.95); } 100% { opacity: 1; transform: none; } }

/* MARK: Download LLM (LocalModelsPanel): a catalog row, and DSDownloadAnimation */
.app-dl-state { display: inline-grid; place-items: center; }
.app-dl-state > * { grid-area: 1 / 1; }
.app-model { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.app-model-head { display: flex; align-items: center; gap: 8px; }
.app-model-name { font-size: 16px; color: var(--label); }
.app-model-summary { margin: 0; font-size: 13px; color: var(--label-2); }
.app-model-meta { margin: 0; font-size: 12px; color: var(--label-3); }
.app-dl { --g1: var(--accent); --g2: #8b5cf6; --g3: #ec4899; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
@media (prefers-color-scheme: dark) { .app-dl { --g2: #a78bfa; --g3: #f472b6; } }
/* The scene runs left to right in every language, as in the app */
.app-dl-scene { position: relative; height: 64px; direction: ltr; }
.app-dl-cloud { position: absolute; left: 7px; top: 17px; font-size: 30px; display: inline-flex; color: color-mix(in srgb, var(--g2) 50%, transparent); }
.app-dl-chip { position: absolute; right: 0; top: 8px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 26px; color: var(--g1); }
.app-dl-chip > * { grid-area: 1 / 1; }
.app-dl-chip i { width: 48px; height: 48px; border-radius: 50%; background: var(--g1); opacity: 0.08; transform: scale(0.8); }
.app-dl-spark { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; opacity: 0; }
.app-dl-spark .ds-sparkle { position: static; display: block; width: 100%; height: 100%; animation: none; }
.app-dl-spark:nth-of-type(3n+1) .ds-sparkle { color: var(--g1); }
.app-dl-spark:nth-of-type(3n+2) .ds-sparkle { color: var(--g2); }
.app-dl-spark:nth-of-type(3n) .ds-sparkle { color: var(--g3); }
.app-dl-bar { display: flex; align-items: center; gap: 10px; }
.app-dl-track { position: relative; flex: 1; height: 6px; border-radius: 3px; overflow: hidden; background: rgb(var(--accent-rgb) / 0.12); }
.app-dl-track i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0 round 3px); transition: clip-path 0.3s ease-out; }
html[dir="rtl"] .app-dl-track i { background: linear-gradient(270deg, var(--g1), var(--g2), var(--g3)); clip-path: inset(0 0 0 calc(100% - var(--p, 0%)) round 3px); }
.app-dl-pct { min-width: 36px; text-align: end; font-size: 13px; color: var(--label-2); font-variant-numeric: tabular-nums; }

/* MARK: Recording overlay (RecordingOverlayWindow): a 420pt card with 20pt
   corners. A white mic on an accent disc, three rings rippling 1 → 1.75 over
   1.8s, 0.6s apart; seven 4pt level bars; then the countdown, the thinking
   animation, and a green check. */
.app-hud {
    position: relative; width: 100%; max-width: 420px; min-height: 250px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 20px 24px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow-lg); text-align: center;
    transition: opacity 0.25s ease, transform 0.35s var(--ease-arrive);
}
.app-hud.is-hidden { opacity: 0; transform: scale(0.96); }
.app-hud p { margin: 0; }
.app-hud-close { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; font-size: 18px; color: var(--label-3); opacity: 0.7; }
.app-hud-icon { display: grid; place-items: center; width: 96px; height: 96px; }
.app-hud-icon > * { grid-area: 1 / 1; }
.app-listen { position: relative; display: grid; place-items: center; width: 96px; height: 96px; }
.app-listen > * { grid-area: 1 / 1; }
.app-listen-ring { width: 56px; height: 56px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; animation: app-ring 1.8s ease-out infinite backwards; }
.app-listen-ring:nth-child(2) { animation-delay: 0.6s; }
.app-listen-ring:nth-child(3) { animation-delay: 1.2s; }
@keyframes app-ring { 0% { transform: scale(1); opacity: 0; } 15% { opacity: 0.55; } 100% { transform: scale(1.75); opacity: 0; } }
.app-listen-disc { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 26px; animation: app-swell 1.3s var(--ease-in-out) infinite; }
.app-listen-disc > * { grid-area: 1 / 1; display: inline-flex; }
.app-listen-disc .ds-icon { stroke-width: 2.2; }
/* The disc swells with the voice level (up to 1.3×) */
@keyframes app-swell { 0%, 100% { transform: scale(1.02); } 22% { transform: scale(1.2); } 40% { transform: scale(1.08); } 62% { transform: scale(1.26); } 80% { transform: scale(1.1); } }
.app-listen.is-done .app-listen-ring { display: none; }
.app-listen.is-done .app-listen-disc { background: var(--success); animation: app-check-pop 0.35s ease-out; }
@keyframes app-check-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.app-bars { display: inline-flex; align-items: center; gap: 3px; height: 32px; }
.app-bars i { width: 4px; height: 4px; border-radius: 2px; background: rgb(var(--accent-rgb) / 0.85); animation: app-bar 0.62s var(--ease-in-out) infinite alternate; }
.app-bars i:nth-child(1) { --h: 13px; animation-duration: 0.5s; animation-delay: -0.2s; }
.app-bars i:nth-child(2) { --h: 19px; animation-duration: 0.66s; animation-delay: -0.45s; }
.app-bars i:nth-child(3) { --h: 24px; animation-duration: 0.42s; animation-delay: -0.1s; }
.app-bars i:nth-child(4) { --h: 28px; animation-duration: 0.58s; animation-delay: -0.32s; }
.app-bars i:nth-child(5) { --h: 24px; animation-duration: 0.47s; animation-delay: -0.5s; }
.app-bars i:nth-child(6) { --h: 19px; animation-duration: 0.7s; animation-delay: -0.05s; }
.app-bars i:nth-child(7) { --h: 13px; animation-duration: 0.54s; animation-delay: -0.38s; }
@keyframes app-bar { from { height: 4px; } to { height: var(--h); } }
.app-hud-status { font-size: 17px; font-weight: 600; color: var(--label); }
.app-hud-text { font-size: 18px; line-height: 1.35; color: var(--label); }
.app-hud-hint { font-size: 13px; color: var(--label-2); min-height: 1.4em; }
.app-hud-count { font: 700 72px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--accent); }
.app-hud-count.is-go { color: var(--success); }
.app-hud-count.is-pop { animation: app-count 0.3s ease-out; }
@keyframes app-count { from { transform: scale(1.3); } to { transform: scale(1); } }
.app-pasted-text { margin: 0; font-size: 14px; min-height: 3em; }

/* MARK: Writing Coach (RewritePanel): a gray card with 16pt corners,
   REWRITE AS, 28pt chips, a white custom-instruction card, and the
   thinking animation with Rewriting… while it works */
.app-doc { width: 100%; max-width: 460px; box-sizing: border-box; font-size: 15px; line-height: 1.5; color: var(--label); }
.app-sel { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.3s ease; }
.app-sel.is-selected { background: rgb(var(--accent-rgb) / 0.22); }
.app-sel.is-new { background: color-mix(in srgb, var(--success) 18%, transparent); }
.app-rewrite {
    position: relative; width: 100%; max-width: 460px; min-height: 150px; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 14px;
    border-radius: 16px; background: var(--grouped); border: 1px solid var(--separator); box-shadow: var(--shadow-lg);
    transition: opacity 0.2s ease, transform 0.3s var(--ease-arrive);
}
.app-rewrite.is-hidden { opacity: 0; transform: translateY(6px) scale(0.98); }
/* The panel floats over the app it was opened in, near the selection */
.ds-stage.app-rw-stage { flex-direction: column; justify-content: flex-start; gap: 16px; }
.app-rw-stage .app-doc { min-height: 340px; }
.app-rw-stage .app-rewrite { position: absolute; left: 50%; bottom: 44px; width: calc(100% - 80px); transform: translateX(-50%); }
.app-rw-stage .app-rewrite.is-hidden { transform: translateX(-50%) translateY(6px) scale(0.98); }
.app-rewrite-head { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--section-header); }
.app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 2px; }
.app-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 14px; background: var(--card); color: var(--label); font: 500 13px/1 var(--font); white-space: nowrap; transition: background-color 0.15s ease, color 0.15s ease; }
.app-chip.is-on { background: var(--accent); color: #fff; }
.app-custom { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--card); font-size: 15px; color: var(--label-3); }
.app-custom .ds-icon { font-size: 15px; color: var(--accent); }
.app-rewrite-progress { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.app-rewrite-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.app-rewrite-status strong { font-size: 15px; font-weight: 500; color: var(--label); }
.app-rewrite.is-busy > :not(.app-rewrite-progress) { visibility: hidden; }
.app-rewrite.is-busy .app-rewrite-progress { opacity: 1; }

/* MARK: Create README (ReadmeProgressPanel): one stage at a time, its
   animation in a 96pt slot, a 20pt title, a 13pt subtitle (monospaced for
   file names), then the rendered README and Show in Finder, Done, Open README */
.app-readme {
    width: 100%; max-width: 520px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 18px;
    padding: 24px; border-radius: 14px; background: var(--grouped); border: 1px solid var(--separator); box-shadow: var(--shadow-lg); text-align: center;
}
.app-readme-anim { display: grid; place-items: center; width: 96px; height: 96px; margin-top: 8px; }
.app-readme-anim > * { grid-area: 1 / 1; transition: opacity 0.25s ease, transform 0.45s var(--ease-arrive); }
.app-readme-anim > .is-off { opacity: 0; transform: scale(0.5); }
.app-readme-done { display: inline-flex; font-size: 56px; color: var(--accent); }
.app-readme-done.app-bounce { animation: app-bounce 0.5s var(--ease-snappy); }
.app-readme-head { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.app-readme-title { margin: 0; font-size: 20px; font-weight: 600; color: var(--label); }
.app-readme-sub { margin: 0; font-size: 13px; color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-readme-sub.is-mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: plaintext; }
.app-readme-sub.is-tick { animation: app-tick 0.25s ease-out; }
@keyframes app-tick { from { transform: translateY(8px); opacity: 0; } }
.app-linear { width: 100%; height: 6px; border-radius: 3px; background: rgb(120 120 128 / 0.2); overflow: hidden; transition: opacity 0.25s ease; }
.app-linear i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 0.25s ease; }
.app-linear.is-off { opacity: 0; height: 0; margin: -9px 0; }
.app-readme-preview { width: 100%; }
.app-readme-preview:not(.is-open) { margin: -9px 0; }
.app-md { max-height: 270px; overflow: hidden; padding: 16px; border-radius: 10px; background: var(--card); text-align: start; font-size: 13px; line-height: 1.5; color: var(--label); }
.app-md h1 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.app-md h2 { margin: 12px 0 4px; font-size: 15px; font-weight: 600; }
.app-md p { margin: 0; color: var(--label-2); }
.app-md ul, .app-md ol { margin: 0; padding-inline-start: 20px; color: var(--label-2); }
.app-buttons { width: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* WritemeAnimation: five lines draw in, 0.45s each, a pencil riding the
   newest one, then the page clears after a 0.9s pause (3.15s a cycle) */
.app-writeme { display: grid; place-items: center; width: 96px; height: 96px; direction: ltr; }
.app-writeme > * { grid-area: 1 / 1; }
.app-writeme-page { position: relative; width: 64px; height: 70px; box-sizing: border-box; border-radius: 6px; background: var(--card); border: 1.5px solid rgb(var(--accent-rgb) / 0.35); }
.app-writeme-page i { position: absolute; left: 6.5px; height: 3px; border-radius: 2px; background: rgb(var(--accent-rgb) / 0.35); transform-origin: left center; transform: scaleX(0); animation: 3.15s linear infinite; }
.app-writeme-page i:nth-child(1) { top: 8.5px; width: 26.4px; height: 4px; background: var(--accent); animation-name: app-write-0; }
.app-writeme-page i:nth-child(2) { top: 19.5px; width: 43.2px; animation-name: app-write-1; }
.app-writeme-page i:nth-child(3) { top: 29.5px; width: 36px; animation-name: app-write-2; }
.app-writeme-page i:nth-child(4) { top: 39.5px; width: 40.8px; animation-name: app-write-3; }
.app-writeme-page i:nth-child(5) { top: 49.5px; width: 19.2px; animation-name: app-write-4; }
.app-writeme-pencil { justify-self: start; align-self: start; margin: 13px 0 0 22px; display: inline-flex; font-size: 16px; color: var(--accent); animation: app-pencil 3.15s linear infinite; }
.app-writeme-pencil .ds-icon { stroke-width: 2.2; }
@keyframes app-write-0 { 0% { transform: scaleX(0); } 14.29%, 100% { transform: scaleX(1); } }
@keyframes app-write-1 { 0%, 14.29% { transform: scaleX(0); } 28.57%, 100% { transform: scaleX(1); } }
@keyframes app-write-2 { 0%, 28.57% { transform: scaleX(0); } 42.86%, 100% { transform: scaleX(1); } }
@keyframes app-write-3 { 0%, 42.86% { transform: scaleX(0); } 57.14%, 100% { transform: scaleX(1); } }
@keyframes app-write-4 { 0%, 57.14% { transform: scaleX(0); } 71.43%, 100% { transform: scaleX(1); } }
@keyframes app-pencil {
    0% { transform: translate(0, -4px) rotate(-10deg); opacity: 1; }
    14.28% { transform: translate(26.4px, -4px) rotate(-10deg); }
    14.29% { transform: translate(0, 6px) rotate(-10deg); }
    28.56% { transform: translate(43.2px, 6px) rotate(-10deg); }
    28.57% { transform: translate(0, 16px) rotate(-10deg); }
    42.85% { transform: translate(36px, 16px) rotate(-10deg); }
    42.86% { transform: translate(0, 26px) rotate(-10deg); }
    57.13% { transform: translate(40.8px, 26px) rotate(-10deg); }
    57.14% { transform: translate(0, 36px) rotate(-10deg); }
    71.42% { transform: translate(19.2px, 36px) rotate(-10deg); opacity: 1; }
    71.43%, 100% { transform: translate(19.2px, 36px) rotate(-10deg); opacity: 0; }
}

/* MARK: Coding Tools (CodingToolsSettingsView) */
.app-snippet { display: flex; align-items: flex-start; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; background: var(--code-bg); direction: ltr; text-align: left; }
.app-snippet code { flex: 1; min-width: 0; font: 12px/1.5 var(--font-mono); color: var(--label); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-ok { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; color: #248a3d; }
.app-ok .ds-icon { flex-shrink: 0; margin-top: 2px; }
@media (prefers-color-scheme: dark) { .app-ok { color: var(--success); } }
.app-ok.is-new { animation: ds-arrive 0.35s var(--ease-arrive) both; }
@media (max-width: 440px) {
    .app-row.app-wrap-narrow { flex-wrap: wrap; row-gap: 8px; }
    .app-wrap-narrow .app-trailing { max-width: none; margin-inline-start: 36px; }
}

/* MARK: LLM Host (LLMHostSettingsView) and the pairing sheet (PairingSheetView) */
.app-sheet-stage { overflow: hidden; }
.app-sheet-stage .app-col { max-width: 460px; }
.app-sheet-host {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px;
    border-radius: inherit; background: rgb(0 0 0 / 0.16); opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.app-sheet-host.is-open { opacity: 1; }
.app-sheet {
    width: 100%; max-width: 440px; max-height: 100%; overflow: hidden; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 14px; padding: 20px;
    border-radius: 14px; background: var(--grouped); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    transform: translateY(-16px); transition: transform 0.42s var(--ease-arrive);
}
.app-sheet-host.is-open .app-sheet { transform: none; }
.app-sheet p { margin: 0; }
.app-sheet-title { font-size: 20px; font-weight: 700; color: var(--label); }
.app-sheet-sub { margin-top: 4px !important; font-size: 13px; color: var(--label-2); }
.app-sheet-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; }
.app-sheet-note { font-size: 15px; color: var(--label-2); }
.app-sheet-done { font-size: 17px; font-weight: 600; color: var(--label); }
.app-paired { display: inline-flex; font-size: 56px; color: var(--success); animation: app-bounce 0.5s var(--ease-snappy); }
.app-sheet-waiting { display: flex; flex-direction: column; gap: 14px; }
.app-qr { display: flex; justify-content: center; padding: 16px; }
.app-qr svg { width: 148px; height: 148px; border-radius: 4px; }
.app-waiting { gap: 14px; padding-top: 6px; padding-bottom: 6px; }
.app-countdown { flex-shrink: 0; font: 600 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--label); }
@media (max-width: 520px) {
    .app-sheet-host { padding: 10px; }
    .app-sheet { padding: 16px; gap: 10px; }
    .app-sheet-title { font-size: 18px; }
    .app-sheet-state { padding: 12px 0; }
    .app-qr { padding: 10px; }
    .app-qr svg { width: 100px; height: 100px; }
    .app-waiting { gap: 10px; }
    .app-countdown { font-size: 20px; }
}

/* MARK: Automations (AutomationsTabView): a checkbox per automation with its
   schedule beside it, and under it a status line, Ready (a green check) or
   what's missing (an orange warning) with a Fix link. A changed status bounces. */
.app-auto { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.app-auto-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 22px; }
.app-auto-title { font-size: 15px; color: var(--label); }
.app-auto-at { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: 13px; color: var(--label-2); white-space: nowrap; }
.app-auto-time { padding: 2px 7px; border-radius: 6px; background: var(--grouped); color: var(--label); font-variant-numeric: tabular-nums; }
.app-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; box-sizing: border-box; border-radius: 4px; border: 1px solid rgb(120 120 128 / 0.45); background: var(--card); color: transparent; font-size: 12px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.app-check .ds-icon { stroke-width: 3.4; }
.app-check.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.app-auto-status { display: none; align-items: center; margin: 0; padding-inline-start: 24px; font-size: 12.5px; }
.app-auto.is-on .app-auto-status { display: flex; }
.app-auto-ok, .app-auto-need { display: inline-flex; align-items: center; gap: 6px; }
.app-auto-ok { color: var(--label-2); }
.app-auto-ok .ds-icon { color: var(--success); font-size: 13px; }
.app-auto-need { color: var(--label); }
.app-auto-need .ds-icon { color: var(--orange); font-size: 13px; stroke-width: 2.4; }
.app-auto-need .app-link { font-size: 12.5px; transition: opacity 0.15s ease; }
.app-auto-need .app-link.is-pressed { opacity: 0.5; }
.app-auto[data-need]:not(.is-fixed) .app-auto-ok, .app-auto.is-fixed .app-auto-need { display: none; }
.app-auto-status .ds-icon.app-bounce { animation: app-bounce 0.5s var(--ease-snappy); }

/* MARK: Recreations in right-to-left and with Reduce Motion */
@media (prefers-reduced-motion: reduce) {
    .app-listen-ring, .app-dl-spark, .app-writeme-pencil { display: none; }
    .app-writeme-page i { transform: none; }
    .app-bars i { height: var(--h); }
    .app-engine-checking { opacity: 0; }
    .app-engine-ready { opacity: 1; transform: none; }
}

/* MARK: - Reduce Motion: everything holds still, as in the app */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .ds-arrive { opacity: 1; transform: none; }
    .ds-sparkle { opacity: 1; }
    .ds-organize .ds-file { display: none; }
    .ds-wave i { height: var(--h); }
}

/* Utilities */
.ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ds-center { text-align: center; }
.ds-stack { display: flex; flex-direction: column; }
.ds-hstack { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-hstack-center { justify-content: center; }
.ds-flip { transform: scaleX(-1); }
html[dir="rtl"] .ds-flip { transform: none; }

/* Right-to-left: mirror the inset dividers and the section header insets */
html[dir="rtl"] .ds-group > * + *::before { left: 0; right: 52px; }
html[dir="rtl"] .ds-group.ds-group-plain > * + *::before { right: 16px; }
html[dir="rtl"] .ds-section-header { margin: 0 16px 8px 0; }
html[dir="rtl"] .ds-section-header .ds-link { margin-left: 16px; margin-right: auto; }
html[dir="rtl"] .ds-nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .ds-nav .ds-btn { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .ds-link:hover .ds-icon { transform: translateX(-2px); }
html[dir="rtl"] .ds-choice .ds-chevron { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
html[dir="rtl"] .ds-terminal { direction: ltr; text-align: left; }