.iq-button {
    --iq-button-min-height: 44px;
    --iq-button-padding-y: 11px;
    --iq-button-padding-x: 14px;
    --iq-button-radius: 12px;
    --iq-button-font-size: 14px;
    min-height: var(--iq-button-min-height);
    width: 100%;
    border-radius: var(--iq-button-radius);
    border: 1px solid transparent;
    padding: var(--iq-button-padding-y) var(--iq-button-padding-x);
    box-sizing: border-box;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: var(--iq-button-font-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #f7fbff;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.iq-button--primary {
    border-color: rgba(120, 210, 255, 0.66);
    background: linear-gradient(140deg, rgba(32, 132, 219, 0.9) 0%, rgba(9, 83, 151, 0.96) 100%);
    box-shadow: 0 14px 24px rgba(7, 52, 96, 0.34);
}

.iq-button--secondary {
    border-color: rgba(122, 230, 186, 0.52);
    background: linear-gradient(140deg, rgba(18, 157, 112, 0.9) 0%, rgba(7, 95, 67, 0.97) 100%);
    box-shadow: 0 14px 24px rgba(8, 64, 44, 0.34);
}

.iq-button--danger {
    border-color: rgba(245, 128, 128, 0.58);
    background: linear-gradient(140deg, rgba(172, 42, 42, 0.95) 0%, rgba(123, 24, 24, 0.98) 100%);
    box-shadow: 0 14px 24px rgba(82, 15, 15, 0.34);
}

.iq-button--neutral {
    border-color: rgba(200, 220, 255, 0.34);
    background: linear-gradient(150deg, rgba(15, 24, 44, 0.82) 0%, rgba(9, 16, 30, 0.92) 100%);
    color: #d9e8ff;
}

.iq-button--ghost {
    border-color: var(--color-border-secondary);
    background: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
}

.iq-button--auto {
    width: auto;
}

.iq-button--compact {
    --iq-button-min-height: 34px;
    --iq-button-padding-y: 7px;
    --iq-button-padding-x: 10px;
    --iq-button-radius: 9px;
    --iq-button-font-size: 12px;
}

.iq-button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.iq-button:focus-visible {
    outline: 2px solid rgba(56, 189, 248, 0.78);
    outline-offset: 2px;
}

.iq-button:disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.iq-surface-panel {
    border: 1px solid var(--color-border-primary);
    border-radius: 12px;
    background: var(--color-surface-primary);
    padding: 12px;
    box-sizing: border-box;
}

.iq-surface-panel--muted {
    background: var(--color-surface-secondary);
}

.iq-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.iq-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.iq-stack {
    display: grid;
    gap: 12px;
}

.iq-stack--sm {
    gap: 8px;
}

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

.iq-list--scroll {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 2px;
}

.iq-list-item {
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    padding: 8px;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.iq-list-item.is-selected {
    border-color: var(--color-state-active-border);
    background: var(--color-state-active-bg);
}

.iq-meta {
    color: var(--color-text-muted);
    font-size: 1.1rem;
}

.iq-pill {
    border: 1px solid var(--color-border-primary);
    border-radius: 999px;
    padding: 2px 8px;
    background: var(--color-surface-primary);
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1.2;
}

.iq-empty {
    border: 1px dashed var(--color-border-primary);
    border-radius: 10px;
    min-height: 120px;
    display: grid;
    place-items: center;
    padding: 10px;
    color: var(--color-text-muted);
    font-size: 1.2rem;
}

.iq-modal-root {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 16px;
    box-sizing: border-box;
    pointer-events: none;
}

.iq-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background:
        radial-gradient(120% 90% at 75% -5%, rgba(35, 112, 201, 0.18) 0%, rgba(15, 23, 42, 0.08) 48%, transparent 82%),
        rgba(5, 10, 24, 0.76);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    pointer-events: auto;
    cursor: default;
}

.iq-modal-panel {
    position: relative;
    pointer-events: auto;
    width: min(560px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    overflow: auto;
    border-radius: 16px;
    border: 1px solid var(--color-border-primary);
    background:
        linear-gradient(165deg, rgba(10, 20, 40, 0.98) 0%, rgba(7, 16, 33, 0.98) 100%),
        var(--color-surface-primary);
    box-shadow:
        0 24px 48px rgba(2, 6, 23, 0.56),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    color: var(--color-text-primary);
}

.iq-modal-panel--sm {
    width: min(420px, calc(100vw - 32px));
}

.iq-modal-panel--lg {
    width: min(720px, calc(100vw - 32px));
}

.iq-modal__header {
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--color-border-primary);
}

.iq-modal__title {
    margin: 0;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 2.1vw, 2.8rem);
    line-height: 1.14;
    color: var(--color-text-primary);
}

.iq-modal__body {
    padding: 16px 20px;
    display: grid;
    gap: 12px;
    color: var(--color-text-secondary);
}

.iq-modal__text {
    margin: 0;
    line-height: 1.5;
    font-size: var(--typography-font-size-body-small, 1.7rem);
    color: var(--color-text-secondary);
}

.iq-modal__link {
    color: var(--color-accent-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    font-weight: 600;
}

.iq-modal__link:hover {
    color: var(--color-accent-primary-hover);
}

.iq-modal__error {
    margin: 0;
    color: var(--color-accent-error);
    font-size: var(--typography-font-size-body-small, 1.7rem);
    line-height: 1.45;
}

.iq-modal__actions {
    padding: 12px 20px 18px;
    border-top: 1px solid var(--color-border-primary);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.iq-modal__actions > * {
    width: auto;
}

@media (max-width: 700px) {
    .iq-modal-root {
        padding: 12px;
    }

    .iq-modal__header {
        padding: 14px 14px 10px;
    }

    .iq-modal__body {
        padding: 12px 14px;
    }

    .iq-modal__actions {
        padding: 10px 14px 14px;
    }
}

.iq-footer {
    --iq-footer-reserved-space: 0px;
    margin-top: 32px;
    padding: 18px 20px 20px 20px;
    padding-right: calc(20px + var(--iq-footer-reserved-space));
    border-top: 1px solid var(--color-border-primary, rgba(148, 163, 184, 0.22));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-surface-primary, #050b16) 94%, white 6%),
        color-mix(in srgb, var(--color-surface-primary, #050b16) 98%, black 2%)
    );
    color: var(--color-text-muted, #94a3b8);
}

.iq-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}

.iq-footer__brand {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.iq-footer__status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.iq-footer__product,
.iq-footer__status-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text-muted, #94a3b8) 85%, white 15%);
}

.iq-footer__version,
.iq-footer__status-meta {
    font-size: 12px;
    color: var(--color-text-muted, #94a3b8);
}

.iq-footer__version::before,
.iq-footer__status-meta::before {
    content: "·";
    margin-right: 8px;
    color: color-mix(in srgb, var(--color-text-muted, #94a3b8) 75%, transparent);
}

.iq-footer__status-value {
    font-size: 13px;
    font-weight: 700;
    text-transform: lowercase;
}

.iq-footer__status-value--success {
    color: var(--color-accent-success, #22c55e);
}

.iq-footer__status-value--danger {
    color: var(--color-accent-danger, #ef4444);
}

.iq-footer__status-value--muted {
    color: var(--color-text-primary, #e2e8f0);
}

@media (max-width: 720px) {
    .iq-footer {
        padding-left: 16px;
        padding-right: calc(16px + var(--iq-footer-reserved-space));
        align-items: flex-start;
        flex-direction: column;
    }
}

.iq-floating-menu {
    --iq-floating-menu-bottom-offset: 20px;
    --iq-floating-menu-right-offset: 20px;
    --iq-floating-menu-z-index: 1250;
    position: fixed;
    right: calc(var(--iq-floating-menu-right-offset) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--iq-floating-menu-bottom-offset) + env(safe-area-inset-bottom, 0px));
    z-index: var(--iq-floating-menu-z-index);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.iq-floating-menu__panel {
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--color-border-primary, rgba(148, 163, 184, 0.35));
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-surface-primary, #1e293b) 92%, transparent);
    box-shadow: 0 18px 36px var(--color-shadow-lg, rgba(2, 6, 23, 0.46));
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}

.iq-floating-menu__action {
    width: 100%;
    border: 1px solid color-mix(in srgb, var(--color-border-primary, #334155) 75%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-surface-secondary, #334155) 92%, transparent);
    color: var(--color-text-primary, #e2e8f0);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    padding: 10px 12px;
    cursor: pointer;
}

.iq-floating-menu__action:hover {
    border-color: color-mix(in srgb, var(--color-accent-primary, #2563eb) 75%, transparent);
    background: color-mix(in srgb, var(--color-accent-primary, #2563eb) 18%, transparent);
}

.iq-floating-menu__action:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.iq-floating-menu__trigger {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-accent-primary, #2563eb) 70%, transparent);
    background: radial-gradient(
        circle at 30% 24%,
        color-mix(in srgb, var(--color-accent-primary, #2563eb) 88%, white) 0%,
        color-mix(in srgb, var(--color-accent-primary, #2563eb) 72%, black) 55%,
        var(--color-bg-primary, #0f172a) 100%
    );
    color: var(--color-text-primary, #f8fafc);
    font-size: 24px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 28px var(--color-shadow-lg, rgba(2, 6, 23, 0.55));
}

.iq-floating-menu__trigger:hover {
    transform: translateY(-1px);
}

.iq-checkout-page {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 24px;
}

.iq-checkout-page__panel,
.iq-checkout-page__frame-shell {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(209, 193, 165, 0.18);
    background: rgba(7, 16, 31, 0.84);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
}

.iq-checkout-page__panel {
    padding: 28px;
    color: #f5f0e6;
}

.iq-checkout-page__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(245, 201, 123, 0.12);
    color: #ffd28f;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.iq-checkout-page__title {
    margin: 18px 0 12px 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
}

.iq-checkout-page__copy,
.iq-checkout-page__meta,
.iq-checkout-page__status-note {
    margin: 0;
    color: rgba(245, 240, 230, 0.74);
    line-height: 1.65;
}

.iq-checkout-page__status {
    margin-top: 20px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.iq-checkout-page__status[data-tone="success"] {
    background: rgba(84, 166, 112, 0.16);
    border-color: rgba(120, 208, 149, 0.28);
}

.iq-checkout-page__status[data-tone="warning"] {
    background: rgba(181, 105, 40, 0.16);
    border-color: rgba(255, 189, 115, 0.24);
}

.iq-checkout-page__status-title {
    margin: 0 0 6px 0;
    font-weight: 600;
    color: #f5f0e6;
}

.iq-checkout-page__meta-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
    display: grid;
    gap: 14px;
}

.iq-checkout-page__meta-item {
    display: grid;
    gap: 4px;
}

.iq-checkout-page__meta-label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 210, 143, 0.7);
}

.iq-checkout-page__frame-shell {
    min-height: 78dvh;
    position: relative;
}

.iq-checkout-page__frame {
    width: 100%;
    min-height: 78dvh;
    border: 0;
    background: #0a1220;
}

.iq-checkout-page__frame-fallback {
    padding: 24px;
    color: #f5f0e6;
}

.iq-checkout-page__link {
    color: #ffd28f;
}

@media (max-width: 960px) {
    .iq-checkout-page {
        grid-template-columns: 1fr;
    }

    .iq-checkout-page__frame-shell,
    .iq-checkout-page__frame {
        min-height: 66dvh;
    }
}

.iq-breadcrumbs {
    min-width: 0;
}

.iq-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.iq-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.iq-breadcrumbs__text {
    display: inline-block;
    color: var(--color-text-muted);
    font-family: var(--typography-font-family-ui);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40ch;
}

.iq-breadcrumbs__text.is-current {
    color: var(--color-text-secondary);
}

.iq-breadcrumbs__separator {
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1;
}

.iq-page-heading {
    --iq-page-heading-height: 124px;
    margin-bottom: 20px;
    border-top: 1px solid var(--color-page-heading-border, var(--color-border-primary));
    border-bottom: 1px solid var(--color-page-heading-border, var(--color-border-primary));
    background:
        linear-gradient(
            180deg,
            var(--color-page-heading-bg-top, var(--color-surface-secondary)),
            var(--color-page-heading-bg-bottom, var(--color-surface-primary))
        );
    padding: 12px 14px;
    display: grid;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    height: var(--iq-page-heading-height);
}

.iq-page-heading__content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
}

.iq-page-heading__text-stack {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.iq-page-heading__title {
    margin: 0;
    color: var(--color-text-primary);
    font-family: var(--typography-font-family-display);
    font-size: var(--typography-font-size-heading-4, 2.6rem);
    line-height: var(--typography-line-height-heading, 1.15);
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.iq-page-heading__description {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--typography-font-family-body);
    font-size: var(--typography-font-size-body-small, 1.7rem);
    line-height: var(--typography-line-height-body, 1.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iq-page-heading__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 860px) {
    .iq-page-heading__content-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.iq-doc-tree {
    width: 100%;
}

.iq-doc-tree__list,
.iq-doc-tree__nested-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}

.iq-doc-tree__nested-list {
    margin-top: 3px;
    padding-left: 14px;
}

.iq-doc-tree__item {
    margin: 0;
    padding: 0;
}

.iq-doc-tree__directory-item {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.iq-doc-tree__directory-summary,
.iq-doc-tree__directory-button {
    color: var(--color-text-secondary);
    font-size: var(--typography-font-size-body, 1.9rem);
    font-weight: 600;
    line-height: 1.4;
    padding: 4px 6px;
}

.iq-doc-tree__directory-button {
    width: 100%;
    border: none;
    border-radius: 4px;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.iq-doc-tree__directory-summary.is-contains-selection,
.iq-doc-tree__directory-button.is-contains-selection {
    color: var(--color-text-primary);
    font-weight: 700;
}

.iq-doc-tree__directory-button.is-selected,
.iq-doc-tree__file.is-selected {
    color: var(--color-accent-primary);
    background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--color-accent-primary);
    font-weight: 700;
}

.iq-doc-tree__file {
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    line-height: 1.4;
    font-size: var(--typography-font-size-body, 1.9rem);
    padding: 4px 10px;
}

.iq-highlighted-code-block {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: auto;
    box-sizing: border-box;
    border: 1px solid color-mix(in srgb, var(--color-border-secondary) 85%, #000 15%);
    border-radius: 12px;
    background: #2e3436;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.iq-highlighted-code-block__pre {
    margin: 0;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}

.iq-highlighted-code-block__code {
    display: block;
    box-sizing: border-box;
    font-size: var(--iq-highlighted-code-font-size, 1.55rem);
    line-height: 1.45;
    padding: 14px 16px;
    font-family: var(
        --typography-font-family-mono,
        "JetBrains Mono",
        "Fira Code",
        "Source Code Pro",
        "Menlo",
        "Consolas",
        monospace
    );
}

.iq-highlighted-code-block .hljs {
    background: transparent;
    color: #eeeeec;
}

.iq-highlighted-code-block .hljs-keyword,
.iq-highlighted-code-block .hljs-selector-tag,
.iq-highlighted-code-block .hljs-literal,
.iq-highlighted-code-block .hljs-name {
    color: #fcaf3e;
    font-weight: 600;
}

.iq-highlighted-code-block .hljs-title,
.iq-highlighted-code-block .hljs-section,
.iq-highlighted-code-block .hljs-selector-id {
    color: #8cc4ff;
}

.iq-highlighted-code-block .hljs-string,
.iq-highlighted-code-block .hljs-attr,
.iq-highlighted-code-block .hljs-template-variable,
.iq-highlighted-code-block .hljs-selector-attr {
    color: #8ae234;
}

.iq-highlighted-code-block .hljs-comment,
.iq-highlighted-code-block .hljs-quote {
    color: #888a85;
    font-style: italic;
}

.iq-highlighted-code-block .hljs-number,
.iq-highlighted-code-block .hljs-variable,
.iq-highlighted-code-block .hljs-symbol,
.iq-highlighted-code-block .hljs-bullet,
.iq-highlighted-code-block .hljs-meta,
.iq-highlighted-code-block .hljs-link {
    color: #ad7fa8;
}

.iq-highlighted-code-block .hljs-type,
.iq-highlighted-code-block .hljs-built_in,
.iq-highlighted-code-block .hljs-built-in,
.iq-highlighted-code-block .hljs-class .hljs-title {
    color: #729fcf;
}

.iq-highlighted-code-block .hljs-function .hljs-title,
.iq-highlighted-code-block .hljs-title.function_ {
    color: #fce94f;
}

.iq-highlighted-code-block .hljs-regexp,
.iq-highlighted-code-block .hljs-addition {
    color: #34e2e2;
}

.iq-highlighted-code-block .hljs-deletion,
.iq-highlighted-code-block .hljs-tag,
.iq-highlighted-code-block .hljs-selector-class {
    color: #ef2929;
}

@media (max-width: 640px) {
    .iq-highlighted-code-block__code {
        font-size: 1.4rem;
        padding: 12px 14px;
    }
}

.iq-auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 18% 14%, rgba(56, 189, 248, 0.24) 0%, rgba(11, 18, 32, 0) 34%),
        radial-gradient(circle at 82% 10%, rgba(148, 163, 184, 0.18) 0%, rgba(11, 18, 32, 0) 30%),
        radial-gradient(circle at 68% 76%, rgba(16, 185, 129, 0.2) 0%, rgba(11, 18, 32, 0) 36%),
        linear-gradient(160deg, #0b1325 0%, #0b1220 58%, #090f1c 100%);
}

@media (max-width: 720px) {
    .iq-auth-shell {
        padding: 16px;
    }
}

.iq-card {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(123, 156, 208, 0.34);
    background:
        linear-gradient(150deg, rgba(8, 16, 33, 0.88) 0%, rgba(8, 18, 37, 0.92) 48%, rgba(9, 22, 42, 0.88) 100%);
    box-shadow:
        0 22px 40px rgba(4, 10, 20, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    box-sizing: border-box;
}

.iq-card--auth {
    max-width: 460px;
    padding: 26px;
}

.iq-card--auth-compact {
    max-width: 420px;
}

@media (max-width: 720px) {
    .iq-card--auth {
        padding: 20px;
    }
}

.iq-form-heading {
    display: grid;
    gap: 6px;
    margin-bottom: 18px;
}

.iq-form-title {
    margin: 0;
    color: #f0f6ff;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
}

.iq-form-subtitle {
    margin: 0;
    color: rgba(216, 231, 255, 0.86);
    font-size: 14px;
    line-height: 1.5;
}

.iq-form-root {
    display: grid;
    gap: 14px;
}

.iq-form-fields {
    display: grid;
    gap: 12px;
}

.iq-form-feedback {
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 10px 12px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.4;
}

.iq-form-feedback--error {
    border-color: rgba(248, 113, 113, 0.4);
    background: rgba(127, 29, 29, 0.32);
    color: #fecaca;
}

.iq-form-feedback--info {
    border-color: rgba(148, 163, 184, 0.34);
    background: rgba(15, 23, 42, 0.66);
    color: #cbd5e1;
}

.iq-form-footer {
    margin-top: 16px;
    color: rgba(184, 211, 248, 0.88);
    font-size: 13px;
    text-align: center;
}

.iq-form-link {
    color: var(--color-link-default);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
    font-weight: 600;
}

.iq-form-link:visited {
    color: var(--color-link-visited);
}

.iq-form-link:hover {
    color: var(--color-link-hover);
}

.iq-form-link:active {
    color: var(--color-link-active);
}

.iq-form-link:focus-visible {
    outline: 2px solid var(--color-link-focus-ring);
    outline-offset: 2px;
    border-radius: 3px;
}

.iq-form-loading {
    color: rgba(184, 211, 248, 0.88);
    text-align: center;
    font-size: 14px;
    padding: 26px;
}

.iq-dictation-launcher {
    --iq-dictation-bottom-offset: 20px;
    --iq-dictation-right-offset: 20px;
    --iq-dictation-z-index: 1200;
    pointer-events: none;
    z-index: var(--iq-dictation-z-index);
}

.iq-dictation-launcher--fixed {
    position: fixed;
    bottom: calc(var(--iq-dictation-bottom-offset) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--iq-dictation-right-offset) + env(safe-area-inset-right, 0px));
}

.iq-dictation-launcher--sticky {
    position: sticky;
    bottom: calc(var(--iq-dictation-bottom-offset) + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding-right: calc(var(--iq-dictation-right-offset) + env(safe-area-inset-right, 0px));
}

.iq-dictation-launcher__button {
    pointer-events: auto;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: linear-gradient(145deg, #0f172a, #1e293b);
    color: #f8fafc;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.35);
    transform: scale(1);
}

.iq-dictation-launcher__button.is-listening {
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.18), 0 16px 32px rgba(15, 23, 42, 0.35);
    transform: scale(1.03);
}

.iq-dictation-launcher__label {
    font-size: 16px;
    font-weight: 700;
}

.iq-dictation-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.62);
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 16px;
}

.iq-dictation-modal {
    width: min(680px, 100%);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    border-radius: 16px;
    background: var(--color-surface-primary);
    border: 1px solid var(--color-border-primary);
    box-shadow: 0 24px 54px rgba(2, 6, 23, 0.45);
    padding: 16px;
    display: grid;
    gap: 10px;
}

.iq-dictation-modal--minimal-capture {
    width: min(560px, 100%);
    max-height: min(82vh, 640px);
    gap: 12px;
}

.iq-dictation-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.iq-dictation-modal__title {
    margin: 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

.iq-dictation-modal__close {
    border: 1px solid var(--color-border-primary);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    cursor: pointer;
}

.iq-dictation-modal__description {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.iq-dictation-modal__controls-row {
    display: grid;
    grid-template-columns: auto auto minmax(180px, 1fr);
    gap: 10px;
    align-items: center;
}

.iq-dictation-modal--minimal-capture .iq-dictation-modal__controls-row {
    grid-template-columns: auto;
    justify-content: flex-start;
}

.iq-dictation-modal__field-label {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.iq-dictation-modal__model-select {
    width: 100%;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    padding: 8px 10px;
}

.iq-dictation-modal__textarea {
    width: 100%;
    min-height: 200px;
    border-radius: 10px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    padding: 12px;
    resize: vertical;
    font-family: var(--typography-font-family-ui);
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
}

.iq-dictation-modal--minimal-capture .iq-dictation-modal__textarea {
    min-height: 240px;
}

.iq-dictation-modal__text {
    margin: 0;
    font-size: 13px;
}

.iq-dictation-modal__text--interim {
    color: var(--color-accent-primary);
}

.iq-dictation-modal__text--error {
    color: var(--color-accent-error);
}

.iq-dictation-modal__text--success {
    color: var(--color-accent-success);
}

.iq-dictation-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.iq-dictation-modal--minimal-capture .iq-dictation-modal__footer {
    margin-top: 8px;
}

.iq-dictation-modal__button {
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
}

.iq-dictation-modal__button.is-start {
    border: 1px solid #0284c7;
    background: #0284c7;
    color: #f8fafc;
    padding: 9px 14px;
}

.iq-dictation-modal__button.is-stop {
    border: 1px solid #ef4444;
    background: #ef4444;
    color: #f8fafc;
    padding: 9px 14px;
}

.iq-dictation-modal__button--secondary {
    border: 1px solid var(--color-border-primary);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    font-weight: 600;
}

.iq-dictation-modal__button--primary {
    border: 1px solid var(--color-accent-primary);
    background: var(--color-accent-primary);
    color: var(--color-text-on-accent);
}

.iq-dictation-modal__button--primary.is-submitting {
    opacity: 0.7;
    cursor: wait;
}

.iq-dictation-modal__file-input {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border-primary);
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    padding: 8px;
    font-size: 13px;
}

.iq-dictation-modal__button--small {
    padding: 4px 8px;
    font-size: 12px;
}

@media (max-width: 780px) {
    .iq-dictation-modal__controls-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .iq-dictation-modal__footer {
        flex-wrap: wrap;
    }
}

.iq-how-it-works {
    margin: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 18%, rgba(76, 122, 186, 0.2) 0%, rgba(9, 15, 28, 0) 48%),
        radial-gradient(circle at 78% 14%, rgba(33, 128, 98, 0.16) 0%, rgba(9, 15, 28, 0) 50%),
        radial-gradient(circle at 58% 92%, rgba(64, 95, 142, 0.1) 0%, rgba(9, 15, 28, 0) 42%),
        linear-gradient(168deg, rgba(8, 14, 26, 0.96) 0%, rgba(9, 16, 30, 0.93) 54%, rgba(8, 13, 24, 0.97) 100%);
    padding-top: clamp(14px, 2.2vw, 28px);
    padding-bottom: clamp(18px, 2.8vw, 36px);
}

.iq-how-it-works__block {
    position: static;
    display: grid;
    margin-top: 12px;
    width: 100%;
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(4px, 1.6vw, 12px);
    padding-right: clamp(4px, 1.6vw, 12px);
}

.iq-how-it-works__guide {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: clamp(4px, 1.2vw, 14px);
    width: 1px;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(162, 207, 255, 0.2) 0%,
        rgba(123, 177, 237, 0.75) 58%,
        rgba(123, 177, 237, 0.12) 100%
    );
    pointer-events: none;
}

.iq-how-it-works__item {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    border-radius: 12px;
    padding: 12px 14px 12px;
}

.iq-how-it-works__item--01 {
    gap: 4px;
    margin-left: clamp(4px, 1.4vw, 12px);
    border: 1px solid rgba(143, 191, 255, 0.5);
    border-top: 2px solid rgba(154, 205, 255, 0.7);
    background: linear-gradient(140deg, rgba(19, 33, 59, 0.82) 0%, rgba(12, 22, 42, 0.72) 100%);
    box-shadow: 0 14px 28px rgba(6, 13, 25, 0.28);
}

.iq-how-it-works__item--02 {
    gap: 5px;
    margin-left: clamp(12px, 3.2vw, 30px);
    border: 1px solid rgba(122, 176, 240, 0.38);
    border-top: 2px solid rgba(134, 190, 252, 0.62);
    background: linear-gradient(140deg, rgba(17, 30, 55, 0.8) 0%, rgba(11, 20, 39, 0.62) 100%);
    box-shadow: 0 15px 26px rgba(5, 10, 20, 0.3);
}

.iq-how-it-works__item--03 {
    gap: 5px;
    margin-left: clamp(6px, 1.9vw, 18px);
    border: 1px solid rgba(112, 165, 229, 0.34);
    border-top: 2px solid rgba(122, 181, 246, 0.58);
    background: linear-gradient(140deg, rgba(14, 25, 46, 0.76) 0%, rgba(9, 17, 33, 0.6) 100%);
    box-shadow: 0 14px 24px rgba(5, 10, 20, 0.28);
}

.iq-how-it-works__step {
    margin: 0;
    font-size: var(--typography-font-size-overline, 1.4rem);
    line-height: var(--typography-line-height-compact, 1.35);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 740;
    font-family: var(--typography-font-family-ui);
}

.iq-how-it-works__step--01 {
    color: rgba(157, 208, 255, 0.9);
}

.iq-how-it-works__step--02 {
    color: rgba(138, 196, 255, 0.86);
}

.iq-how-it-works__step--03 {
    color: rgba(122, 185, 250, 0.82);
}

.iq-how-it-works__title {
    margin: 0;
    color: rgba(236, 244, 255, 0.98);
    font-size: var(--typography-font-size-heading-6, 2rem);
    line-height: var(--typography-line-height-heading, 1.15);
    font-weight: 710;
    letter-spacing: 0.01em;
    font-family: var(--typography-font-family-display);
    text-wrap: balance;
}

.iq-how-it-works__title--primary {
    color: #ecf4ff;
    font-weight: 735;
}

.iq-how-it-works__body {
    margin: 0;
    color: rgba(216, 231, 255, 0.84);
    font-size: var(--typography-font-size-body, 1.9rem);
    line-height: var(--typography-line-height-body, 1.55);
    font-family: var(--typography-font-family-body);
}

@media (min-width: 1024px) {
    .iq-how-it-works__block {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: clamp(12px, 1.8vw, 18px);
        max-width: 1380px;
        padding-left: 0;
        padding-right: 0;
    }

    .iq-how-it-works__guide {
        inset: 8px 0.5% 8px 0.5%;
        left: 0.5%;
        right: 0.5%;
        width: auto;
        background: transparent;
        opacity: 1;
    }

    .iq-how-it-works__guide::before,
    .iq-how-it-works__guide::after {
        content: "";
        position: absolute;
        height: 2px;
        pointer-events: none;
        border-radius: 999px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(118, 186, 252, 0.09) 18%,
            rgba(156, 216, 255, 0.54) 50%,
            rgba(118, 186, 252, 0.09) 82%,
            transparent 100%
        );
    }

    .iq-how-it-works__guide::before {
        top: 22%;
        left: 9%;
        width: 68%;
        transform: rotate(33deg);
        transform-origin: 0 50%;
    }

    .iq-how-it-works__guide::after {
        top: 66%;
        right: 4%;
        width: 80%;
        transform: rotate(-26deg);
        transform-origin: 100% 50%;
    }

    .iq-how-it-works__item {
        border-radius: 14px;
        margin-left: 0;
    }

    .iq-how-it-works__item--01 {
        grid-column: 2 / span 8;
        grid-row: 1;
        gap: 9px;
        padding: 20px 22px 20px;
    }

    .iq-how-it-works__item--02 {
        grid-column: 6 / span 6;
        grid-row: 2;
        gap: 7px;
        padding: 17px 19px 17px;
    }

    .iq-how-it-works__item--03 {
        grid-column: 3 / span 8;
        grid-row: 3;
        gap: 7px;
        padding: 17px 19px 17px;
    }
}

.iq-proof-of-concept {
    margin: 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 24%, rgba(176, 124, 63, 0.09) 0%, rgba(6, 10, 18, 0) 42%),
        radial-gradient(circle at 86% 72%, rgba(61, 110, 164, 0.11) 0%, rgba(6, 10, 18, 0) 50%),
        radial-gradient(circle at 54% 8%, rgba(101, 139, 184, 0.05) 0%, rgba(6, 10, 18, 0) 38%),
        linear-gradient(170deg, rgba(4, 8, 15, 0.995) 0%, rgba(5, 9, 17, 0.985) 52%, rgba(3, 7, 13, 0.995) 100%);
    border-top: 1px solid rgba(46, 75, 110, 0.26);
    border-bottom: 1px solid rgba(34, 59, 92, 0.24);
    padding-top: clamp(18px, 2.8vw, 36px);
    padding-bottom: clamp(20px, 3vw, 38px);
}

.iq-proof-of-concept__content {
    width: 100%;
    max-width: 1360px;
    box-sizing: border-box;
    display: grid;
    gap: clamp(10px, 1.5vw, 16px);
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(12px, 2.2vw, 22px);
    padding-right: clamp(12px, 2.2vw, 22px);
}

.iq-proof-of-concept__eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(186, 213, 247, 0.88);
    font-weight: 730;
    font-size: var(--typography-font-size-overline, 1.35rem);
    line-height: var(--typography-line-height-compact, 1.35);
    font-family: var(--typography-font-family-ui);
}

.iq-proof-of-concept__detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(10px, 2vw, 18px);
}

.iq-proof-of-concept__copy {
    margin: 0;
    max-width: 100%;
    min-width: 0;
    display: grid;
    gap: 6px;
}

.iq-proof-of-concept__body {
    margin: 0;
    color: rgba(214, 227, 245, 0.88);
    font-size: var(--typography-font-size-body, 1.9rem);
    line-height: var(--typography-line-height-body, 1.55);
    font-family: var(--typography-font-family-body);
}

.iq-proof-of-concept__expectation {
    margin: 0;
    color: rgba(182, 205, 233, 0.84);
    font-size: var(--typography-font-size-body-small, 1.7rem);
    line-height: 1.5;
    font-family: var(--typography-font-family-body);
}

.iq-proof-of-concept__cta {
    justify-self: end;
    align-self: end;
    flex-shrink: 0;
    box-shadow: 0 10px 22px rgba(9, 55, 106, 0.3);
}

@media (max-width: 960px) {
    .iq-proof-of-concept__detail-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .iq-proof-of-concept__cta {
        justify-self: end;
    }
}

.iq-overview-summary-activity-layout {
    grid-template-areas: "live-activity summary";
}

.iq-overview-live-activity-cell {
    grid-area: live-activity;
}

.iq-overview-summary-cell {
    grid-area: summary;
}

@media (max-width: 768px) {
    .iq-overview-summary-activity-layout {
        grid-template-areas:
            "live-activity"
            "summary";
    }
}

.iq-detail-surface {
    display: grid;
    gap: 12px;
}

.iq-detail-surface__hero {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--color-border-secondary);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-surface-secondary)), var(--color-surface-secondary));
}

.iq-detail-surface__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.iq-detail-surface__identity {
    display: grid;
    gap: 6px;
}

.iq-detail-surface__title {
    margin: 0;
}

.iq-detail-surface__id {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.iq-detail-surface__summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.iq-detail-surface__summary-item {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-surface-secondary);
    min-width: 0;
}

.iq-detail-surface__summary-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.iq-detail-surface__summary-value {
    font-size: 13px;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.iq-detail-surface__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.iq-detail-surface__group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--color-border-secondary);
    background: var(--color-surface-secondary);
    min-width: 0;
}

.iq-detail-surface__group-title {
    margin: 0;
    font-size: 14px;
}

.iq-detail-surface__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.iq-detail-surface__field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.iq-detail-surface__field--wide {
    grid-column: 1 / -1;
}

.iq-detail-surface__field-label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.iq-detail-surface__field-value {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.iq-detail-surface__badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.2;
}

.iq-detail-surface__badge--neutral {
    background: color-mix(in srgb, var(--color-accent-secondary) 14%, var(--color-surface-secondary));
    color: var(--color-accent-secondary);
    border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 45%, transparent);
}

.iq-detail-surface__badge--success {
    background: color-mix(in srgb, var(--color-accent-success) 18%, var(--color-surface-secondary));
    color: var(--color-accent-success);
    border: 1px solid color-mix(in srgb, var(--color-accent-success) 45%, transparent);
}

.iq-detail-surface__badge--loading {
    background: color-mix(in srgb, var(--color-accent-warning) 18%, var(--color-surface-secondary));
    color: var(--color-accent-warning);
    border: 1px solid color-mix(in srgb, var(--color-accent-warning) 45%, transparent);
}

.iq-detail-surface__badge--error {
    background: color-mix(in srgb, var(--color-accent-error) 18%, var(--color-surface-secondary));
    color: var(--color-accent-error);
    border: 1px solid color-mix(in srgb, var(--color-accent-error) 45%, transparent);
}

.iq-story-demo {
    --story-surface: color-mix(in srgb, var(--color-surface-primary) 88%, rgba(255, 248, 240, 0.78));
    --story-surface-alt: color-mix(in srgb, var(--color-surface-secondary) 92%, rgba(250, 244, 236, 0.82));
    --story-surface-border: color-mix(in srgb, var(--color-border-primary) 74%, rgba(255, 255, 255, 0.18));
    --story-line: color-mix(in srgb, var(--color-border-primary) 54%, transparent);
    --story-muted: color-mix(in srgb, var(--color-text-secondary) 90%, rgba(255, 247, 236, 0.18));
    --story-panel-border: rgba(123, 156, 208, 0.24);
    --story-panel-text: rgba(239, 246, 242, 0.94);
    --story-panel-muted: rgba(239, 246, 242, 0.74);
    --story-highlight: color-mix(in srgb, var(--color-accent-success) 24%, rgba(216, 231, 203, 0.22));
    color: var(--color-text-primary);
    min-height: calc(100vh - 108px);
    padding: clamp(6px, 0.8vw, 10px) clamp(12px, 2vw, 24px) clamp(56px, 6vw, 96px);
    position: relative;
}

.iq-story-demo::before {
    background:
        radial-gradient(circle at 12% 10%, rgba(70, 109, 173, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 88% 12%, rgba(24, 149, 109, 0.16) 0%, transparent 38%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.iq-story-demo__hero,
.iq-story-demo__layout {
    margin: 0 auto;
    max-width: 1320px;
    position: relative;
    z-index: 1;
}

.iq-story-demo__hero {
    display: grid;
    gap: clamp(18px, 2vw, 24px);
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.82fr);
    margin-bottom: clamp(22px, 3vw, 34px);
}

.iq-story-demo__hero-copy,
.iq-story-demo__hero-card,
.iq-story-demo__chapter,
.iq-story-demo__panel-shell {
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    will-change: transform;
}

.iq-story-demo__hero-copy {
    border-radius: 24px;
    gap: 14px;
    padding: clamp(24px, 3vw, 34px);
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 38%),
        linear-gradient(180deg, var(--story-surface-alt), var(--story-surface));
    box-shadow: 0 20px 56px color-mix(in srgb, var(--color-shadow-lg) 28%, transparent);
}

.iq-story-demo__eyebrow,
.iq-story-demo__chapter-eyebrow,
.iq-story-demo__card-label,
.iq-story-demo__hero-label,
.iq-story-demo__quote-label {
    color: var(--story-muted);
    font-size: var(--typography-font-size-overline, 1.4rem);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: var(--typography-line-height-compact, 1.35);
    text-transform: uppercase;
}

.iq-story-demo__title {
    font-family: "Bruno Ace", "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(3.8rem, 5vw, 5.8rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    margin: 10px 0 8px;
    max-width: 11ch;
}

.iq-story-demo__intro,
.iq-story-demo__chapter-summary,
.iq-story-demo__quote p,
.iq-story-demo__response p,
.iq-story-demo__annotation,
.iq-story-demo__status-copy,
.iq-story-demo__option p,
.iq-story-demo__hero-note {
    color: var(--story-muted);
    font-size: var(--typography-font-size-body-small, 1.7rem);
    line-height: var(--typography-line-height-body, 1.55);
    margin: 0;
}

.iq-story-demo__hero-card {
    align-self: stretch;
    background:
        radial-gradient(circle at 18% 18%, rgba(118, 170, 255, 0.16) 0%, transparent 36%),
        linear-gradient(160deg, rgba(9, 20, 39, 0.92) 0%, rgba(6, 14, 28, 0.96) 100%);
    border: 1px solid var(--story-panel-border);
    border-radius: 24px;
    box-shadow:
        0 22px 40px rgba(4, 10, 20, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--story-panel-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 228px;
    padding: clamp(22px, 2.8vw, 28px);
    position: relative;
    overflow: hidden;
}

.iq-story-demo__hero-card::after {
    background: linear-gradient(120deg, rgba(216, 231, 203, 0.22), transparent 60%);
    content: "";
    inset: 0;
    position: absolute;
}

.iq-story-demo__hero-label,
.iq-story-demo__hero-stage,
.iq-story-demo__hero-note {
    position: relative;
    z-index: 1;
}

.iq-story-demo__hero-stage {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(2rem, 2.8vw, 2.6rem);
    line-height: var(--typography-line-height-heading, 1.15);
    margin: 12px 0 10px;
}

.iq-story-demo__hero-note {
    color: var(--story-panel-muted);
}

.iq-story-demo__layout {
    display: grid;
    gap: clamp(18px, 2vw, 24px);
    grid-template-columns: minmax(0, 1fr) minmax(340px, 460px);
    align-items: start;
}

.iq-story-demo__narrative {
    align-content: start;
    display: grid;
    gap: clamp(18px, 2.4vw, 24px);
}

.iq-story-demo__surface {
    background:
        linear-gradient(180deg, var(--story-surface-alt), var(--story-surface));
    border: 1px solid var(--story-surface-border);
    box-shadow: 0 22px 64px color-mix(in srgb, var(--color-shadow-lg) 22%, transparent);
}

.iq-story-demo__chapter {
    border-radius: 24px;
    display: grid;
    gap: 0;
    min-height: clamp(280px, 38vh, 440px);
    padding: clamp(24px, 3vw, 32px);
    position: relative;
    scroll-margin-top: 18px;
}

.iq-story-demo__chapter[data-active="true"] {
    border-color: color-mix(in srgb, var(--color-accent-secondary) 40%, var(--story-surface-border));
    box-shadow: 0 28px 72px color-mix(in srgb, var(--color-accent-secondary) 18%, transparent);
}

.iq-story-demo__chapter-header {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: 20px;
}

.iq-story-demo__chapter-index {
    align-items: center;
    background: linear-gradient(180deg, rgba(8, 18, 37, 0.96), rgba(10, 22, 44, 0.98));
    border-radius: 999px;
    color: #f7f1e8;
    display: inline-flex;
    font-size: 1.4rem;
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.iq-story-demo__chapter-title {
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: clamp(3.1rem, 3.4vw, 4.4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 10px 0 0;
    max-width: 16ch;
}

.iq-story-demo__quote,
.iq-story-demo__response {
    border-left: 3px solid color-mix(in srgb, var(--color-accent-secondary) 32%, transparent);
    margin-top: 24px;
    padding-left: 18px;
}

.iq-story-demo__response {
    border-left-color: color-mix(in srgb, var(--color-border-secondary) 66%, transparent);
}

.iq-story-demo__annotation {
    border-top: 1px solid var(--story-line);
    margin-top: 24px;
    padding-top: 18px;
}

.iq-story-demo__sticky-panel {
    align-self: start;
    position: relative;
}

.iq-story-demo__sticky-panel[data-sticky="true"] {
    position: sticky;
    top: 12px;
}

.iq-story-demo__panel-shell {
    background:
        radial-gradient(circle at 22% 14%, rgba(118, 170, 255, 0.12) 0%, transparent 32%),
        linear-gradient(180deg, rgba(16, 24, 29, 0.96) 0%, rgba(24, 37, 44, 0.96) 100%);
    border: 1px solid var(--story-panel-border);
    border-radius: 24px;
    box-shadow:
        0 22px 40px rgba(4, 10, 20, 0.36),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: var(--story-panel-text);
    display: grid;
    gap: 18px;
    overflow: hidden;
    padding: 22px;
}

.iq-story-demo__progress {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.iq-story-demo__progress-node {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(239, 246, 242, 0.08);
    border: 1px solid rgba(239, 246, 242, 0.08);
    border-radius: 16px;
    color: rgba(239, 246, 242, 0.62);
    display: inline-flex;
    font-size: 1.1rem;
    font-weight: 700;
    justify-content: center;
}

.iq-story-demo__progress-node[data-state="active"] {
    background: linear-gradient(135deg, #dceccd 0%, #8fb4a0 100%);
    color: #0f1b20;
}

.iq-story-demo__status-row {
    border-bottom: 1px solid rgba(239, 246, 242, 0.08);
    padding-bottom: 18px;
}

.iq-story-demo__status-pill {
    border-radius: 999px;
    display: inline-flex;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    text-transform: uppercase;
}

.iq-story-demo__status-pill[data-tone="success"] {
    background: rgba(154, 220, 185, 0.18);
    color: #cce8d7;
}

.iq-story-demo__status-pill[data-tone="warning"] {
    background: rgba(241, 165, 120, 0.18);
    color: #ffd2b7;
}

.iq-story-demo__status-pill[data-tone="accent"] {
    background: rgba(160, 196, 235, 0.18);
    color: #d7e9ff;
}

.iq-story-demo__status-pill[data-tone="neutral"] {
    background: rgba(239, 246, 242, 0.12);
    color: #eff6f2;
}

.iq-story-demo__status-copy {
    color: var(--story-panel-muted);
    margin-top: 12px;
}

.iq-story-demo__semantic-grid {
    display: grid;
    gap: 14px;
}

.iq-story-demo__card {
    border-radius: 18px;
    min-width: 0;
    padding: 18px;
}

.iq-story-demo__mono {
    color: #f6fbf8;
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: var(--typography-font-size-caption, 1.5rem);
    line-height: 1.58;
    margin: 14px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: break-word;
}

.iq-story-demo__evidence-list {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.iq-story-demo__evidence-list li {
    border-bottom: 1px solid rgba(239, 246, 242, 0.08);
    color: rgba(239, 246, 242, 0.82);
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size: var(--typography-font-size-caption, 1.5rem);
    line-height: 1.55;
    padding-bottom: 10px;
}

.iq-story-demo__evidence-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.iq-story-demo__options {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.iq-story-demo__option {
    background: rgba(239, 246, 242, 0.04);
    border: 1px solid rgba(239, 246, 242, 0.08);
    border-radius: 18px;
    padding: 14px;
}

.iq-story-demo__option[data-recommended="true"] {
    background: var(--story-highlight);
    border-color: color-mix(in srgb, var(--color-accent-success) 32%, transparent);
}

.iq-story-demo__option strong {
    display: block;
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-size: var(--typography-font-size-body-small, 1.7rem);
    line-height: var(--typography-line-height-compact, 1.35);
    margin-bottom: 6px;
}

@media (max-width: 1080px) {
    .iq-story-demo__hero,
    .iq-story-demo__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .iq-story-demo__sticky-panel[data-sticky="true"] {
        position: relative;
        top: auto;
    }
}

@media (max-width: 720px) {
    .iq-story-demo {
        min-height: auto;
        padding: 6px 0 64px;
    }

    .iq-story-demo__hero-copy,
    .iq-story-demo__hero-card,
    .iq-story-demo__chapter,
    .iq-story-demo__panel-shell {
        border-radius: 20px;
        padding: 20px;
    }

    .iq-story-demo__chapter {
        min-height: auto;
    }

    .iq-story-demo__title {
        font-size: clamp(3rem, 12vw, 4.2rem);
    }

    .iq-story-demo__chapter-title {
        font-size: clamp(2.6rem, 8vw, 3.4rem);
    }

    .iq-story-demo__progress {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}