/* Mode Studio per-mode styles: arithmetic.
   Keep mode-only visual rules here, not in css/mode-studio/studio.css. */
:where(body.studio-v2-arithmetic-route) {
    --studio-v2-mode-scope: arithmetic;
    --arithmetic-bg-a: #071225;
    --arithmetic-bg-b: #0a1b34;
    --arithmetic-bg-c: #102a51;
    --arithmetic-surface: rgba(10, 24, 46, .82);
    --arithmetic-surface-strong: rgba(8, 20, 39, .94);
    --arithmetic-surface-soft: rgba(255, 255, 255, .055);
    --arithmetic-line: rgba(170, 205, 255, .17);
    --arithmetic-line-strong: rgba(125, 211, 252, .42);
    --arithmetic-ink: #f7fbff;
    --arithmetic-muted: #bfd0e7;
    --arithmetic-accent: #2563eb;
    --arithmetic-accent-2: #06b6d4;
    --arithmetic-good: #10b981;
    --arithmetic-cta-ink: #ffffff;
    --arithmetic-grid: rgba(125, 211, 252, .08);
    --arithmetic-shadow: 0 24px 64px rgba(0, 0, 0, .28);
    --studio-v3-accent: var(--arithmetic-accent);
    --studio-v3-accent-2: var(--arithmetic-accent-2);
    --studio-v3-accent-3: var(--arithmetic-good);
    --studio-v3-bg-a: var(--arithmetic-bg-a);
    --studio-v3-bg-b: var(--arithmetic-bg-b);
    --studio-v3-bg-c: var(--arithmetic-bg-c);
    --studio-v3-ink: var(--arithmetic-ink);
    --studio-v3-muted: var(--arithmetic-muted);
    --studio-v3-line: var(--arithmetic-line);
    --studio-v3-line-strong: var(--arithmetic-line-strong);
    --studio-v3-panel:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
        var(--arithmetic-surface);
    --studio-v3-panel-strong:
        linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)),
        var(--arithmetic-surface-strong);
    --studio-v3-panel-soft: rgba(255, 255, 255, .052);
    --studio-v3-field: rgba(7, 18, 37, .78);
    --studio-v3-shadow: var(--arithmetic-shadow);
    color: var(--arithmetic-ink);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--arithmetic-accent) 16%, transparent) 0%, transparent 27%),
        linear-gradient(225deg, color-mix(in srgb, var(--arithmetic-accent-2) 16%, transparent) 0%, transparent 31%),
        linear-gradient(180deg, var(--arithmetic-bg-a) 0%, var(--arithmetic-bg-b) 48%, var(--arithmetic-bg-c) 100%) !important;
    font-family: "Sarabun", "Plus Jakarta Sans", system-ui, sans-serif;
}

:where(body.studio-v2-arithmetic-route[data-arithmetic-theme="light"]) {
    --arithmetic-bg-a: #f6f9ff;
    --arithmetic-bg-b: #eef5ff;
    --arithmetic-bg-c: #e8f7fb;
    --arithmetic-surface: rgba(255, 255, 255, .88);
    --arithmetic-surface-strong: rgba(255, 255, 255, .96);
    --arithmetic-surface-soft: rgba(37, 99, 235, .055);
    --arithmetic-line: rgba(58, 89, 140, .16);
    --arithmetic-line-strong: rgba(37, 99, 235, .38);
    --arithmetic-ink: #10233f;
    --arithmetic-muted: #53657f;
    --arithmetic-accent: #2563eb;
    --arithmetic-accent-2: #0891b2;
    --arithmetic-good: #059669;
    --arithmetic-cta-ink: #ffffff;
    --arithmetic-grid: rgba(37, 99, 235, .055);
    --arithmetic-shadow: 0 24px 64px rgba(41, 73, 125, .14);
    --studio-v3-field: rgba(255, 255, 255, .92);
}

html[data-index-v2-theme] body.studio-v2-arithmetic-route {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--arithmetic-accent) 16%, transparent) 0%, transparent 27%),
        linear-gradient(225deg, color-mix(in srgb, var(--arithmetic-accent-2) 16%, transparent) 0%, transparent 31%),
        linear-gradient(180deg, var(--arithmetic-bg-a) 0%, var(--arithmetic-bg-b) 48%, var(--arithmetic-bg-c) 100%) !important;
}

body.studio-v2-arithmetic-route .studio-bg,
html[data-index-v2-theme] body.studio-v2-arithmetic-route .studio-bg {
    background:
        linear-gradient(var(--arithmetic-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--arithmetic-grid) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    opacity: .42;
}

body.studio-v2-arithmetic-route .background-scene :where(.blob, .curve, .geo) {
    display: none;
}

body.studio-v2-arithmetic-route .studio-v3-shell {
    width: min(1600px, calc(100% - 32px));
    padding-top: 18px;
}

body.studio-v2-arithmetic-route .studio-card,
body.studio-v2-arithmetic-route .hero-panel {
    border-color: var(--arithmetic-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .078), rgba(255, 255, 255, .024)),
        var(--arithmetic-surface);
    box-shadow: var(--arithmetic-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.studio-v2-arithmetic-route .studio-v3-hero {
    min-height: 88px;
    padding: 16px 18px;
}

body.studio-v2-arithmetic-route .studio-v3-title {
    gap: 12px;
}

body.studio-v2-arithmetic-route .studio-v3-title-icon {
    width: 46px;
    height: 46px;
    background:
        linear-gradient(135deg, var(--arithmetic-accent), var(--arithmetic-accent-2));
    box-shadow: 0 14px 28px color-mix(in srgb, var(--arithmetic-accent) 22%, transparent);
}

body.studio-v2-arithmetic-route .studio-v3-title h1 {
    font-size: clamp(1.45rem, 1.9vw, 2.05rem);
    letter-spacing: 0;
}

body.studio-v2-arithmetic-route .studio-v3-title p,
body.studio-v2-arithmetic-route .studio-section-head p,
body.studio-v2-arithmetic-route .studio-preview-head p,
body.studio-v2-arithmetic-route .studio-step-note,
body.studio-v2-arithmetic-route .studio-preview-summary {
    color: var(--arithmetic-muted);
}

body.studio-v2-arithmetic-route .studio-trust-strip {
    gap: 10px;
    margin-top: 12px;
}

body.studio-v2-arithmetic-route .studio-trust-strip span,
body.studio-v2-arithmetic-route .studio-v2-mode-return {
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid var(--arithmetic-line);
    background: var(--arithmetic-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    color: var(--arithmetic-ink);
}

body.studio-v2-arithmetic-route .studio-trust-strip span::before {
    background: var(--arithmetic-good);
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
}

body.studio-v2-arithmetic-route .studio-v2-mode-return {
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--arithmetic-accent) 16%, transparent), color-mix(in srgb, var(--arithmetic-accent-2) 12%, transparent)),
        rgba(255, 255, 255, .065);
}

body.studio-v2-arithmetic-route .studio-v3-workspace {
    grid-template-columns: minmax(360px, 390px) minmax(620px, 1fr) minmax(330px, 360px);
    gap: 16px;
    margin-top: 18px;
}

body.studio-v2-arithmetic-route .studio-builder-column,
body.studio-v2-arithmetic-route .studio-preview-column,
body.studio-v2-arithmetic-route .studio-output-column {
    padding: 16px;
}

body.studio-v2-arithmetic-route .studio-builder-column > .studio-section-head {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr);
    gap: 14px;
    align-items: end;
}

body.studio-v2-arithmetic-route .studio-section-head h2,
body.studio-v2-arithmetic-route .studio-preview-head h2 {
    font-size: clamp(1.15rem, 1.35vw, 1.48rem);
    letter-spacing: 0;
}

body.studio-v2-arithmetic-route .studio-section-head p {
    margin-top: 0;
    line-height: 1.45;
}

body.studio-v2-arithmetic-route .studio-step-card {
    border-color: var(--arithmetic-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .056), rgba(255, 255, 255, .026)),
        var(--arithmetic-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075);
}

body.studio-v2-arithmetic-route .studio-step-head {
    margin-bottom: 11px;
}

body.studio-v2-arithmetic-route .studio-step-head span {
    background: linear-gradient(135deg, var(--arithmetic-accent), var(--arithmetic-good));
    color: #031326;
}

body.studio-v2-arithmetic-route .studio-template-selection-card,
body.studio-v2-arithmetic-route .studio-template-fallback-card,
body.studio-v2-arithmetic-route .studio-template-card,
body.studio-v2-arithmetic-route .studio-advanced-card,
body.studio-v2-arithmetic-route .studio-output-summary-item,
body.studio-v2-arithmetic-route .studio-preview-toolbar,
body.studio-v2-arithmetic-route .studio-page-input-label,
body.studio-v2-arithmetic-route .studio-chip,
body.studio-v2-arithmetic-route .studio-segment-btn,
body.studio-v2-arithmetic-route .studio-check-row {
    border-color: var(--arithmetic-line);
    background: var(--arithmetic-surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.studio-v2-arithmetic-route .studio-chip,
body.studio-v2-arithmetic-route .studio-segment-btn,
body.studio-v2-arithmetic-route .studio-check-row {
    min-height: 44px;
}

body.studio-v2-arithmetic-route .studio-chip-grid--operations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

body.studio-v2-arithmetic-route .studio-chip-grid--operations .studio-chip--operation-with-caption.studio-chip--operation-symbol,
body.studio-v2-arithmetic-route .studio-chip-grid--operations .studio-chip--operation-symbol {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    padding: 6px 5px;
}

body.studio-v2-arithmetic-route .studio-chip-grid--operations .studio-operation-symbol {
    transform: scale(.92);
}

body.studio-v2-arithmetic-route .studio-chip-grid--operations .studio-operation-caption {
    max-width: 100%;
    font-size: clamp(.68rem, .9vw, .78rem);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.studio-v2-arithmetic-route .studio-chip:has(input:checked),
body.studio-v2-arithmetic-route .studio-check-row:has(input:checked),
body.studio-v2-arithmetic-route .studio-segment-btn.is-active,
html[data-index-v2-theme] body.studio-v2-arithmetic-route .studio-check-row:has(input:checked),
html[data-index-v2-theme] body.studio-v2-arithmetic-route .studio-segment-btn.is-active {
    border-color: color-mix(in srgb, var(--arithmetic-accent) 52%, rgba(255, 255, 255, .26));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .15), transparent 44%),
        linear-gradient(135deg, var(--arithmetic-accent), color-mix(in srgb, var(--arithmetic-accent) 64%, var(--arithmetic-accent-2)));
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 12px 24px color-mix(in srgb, var(--arithmetic-accent) 18%, transparent);
}

body.studio-v2-arithmetic-route .studio-template-selection-action,
body.studio-v2-arithmetic-route .studio-template-access-badge {
    border: 1px solid color-mix(in srgb, var(--arithmetic-good) 36%, rgba(255, 255, 255, .22));
    background: color-mix(in srgb, var(--arithmetic-good) 16%, rgba(255, 255, 255, .88));
    color: #064e3b;
    font-weight: 900;
}

body.studio-v2-arithmetic-route .studio-template-step {
    border-color: rgba(59, 130, 246, .58);
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 38%),
        linear-gradient(180deg, #132b52 0%, #0d2546 100%);
    box-shadow:
        0 18px 42px rgba(3, 12, 24, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.studio-v2-arithmetic-route .studio-template-step .studio-step-head span {
    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
    color: #06203b;
    box-shadow: 0 14px 26px rgba(20, 184, 166, .22);
}

body.studio-v2-arithmetic-route .studio-template-step .studio-step-head strong {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

body.studio-v2-arithmetic-route .studio-template-step .studio-step-note {
    color: #d1e2f8;
}

body.studio-v2-arithmetic-route .studio-template-selection-card {
    border-color: rgba(148, 180, 220, .34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .018) 48%, rgba(3, 10, 20, .18)),
        linear-gradient(180deg, #263d5b 0%, #122a48 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(3, 10, 20, .3),
        0 14px 28px rgba(2, 8, 23, .18);
}

body.studio-v2-arithmetic-route .studio-template-selection-icon {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .18), transparent 42%),
        linear-gradient(135deg, #4f7cff 0%, #168df2 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 12px 24px rgba(37, 99, 235, .28);
}

body.studio-v2-arithmetic-route .studio-template-selection-copy small {
    color: #cfe0f8;
}

body.studio-v2-arithmetic-route .studio-template-selection-copy strong {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}

body.studio-v2-arithmetic-route .studio-template-selection-action {
    border-color: rgba(101, 229, 191, .72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)),
        #bfeee3;
    color: #063f35;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        0 12px 24px rgba(20, 184, 166, .18);
}

body.studio-v2-arithmetic-route .studio-field input,
body.studio-v2-arithmetic-route .studio-field select,
body.studio-v2-arithmetic-route .studio-field textarea,
body.studio-v2-arithmetic-route .studio-template-search input,
body.studio-v2-arithmetic-route .studio-page-input-label input {
    min-height: 44px;
    border-color: var(--arithmetic-line);
    background: var(--studio-v3-field);
    color: var(--arithmetic-ink);
}

body.studio-v2-arithmetic-route .studio-field > span,
body.studio-v2-arithmetic-route .studio-check-row span,
body.studio-v2-arithmetic-route .studio-output-summary-item span,
body.studio-v2-arithmetic-route .studio-template-selection-copy small,
body.studio-v2-arithmetic-route .studio-template-fallback-copy small {
    color: var(--arithmetic-muted);
}

body.studio-v2-arithmetic-route .studio-template-selection-card .studio-template-selection-copy small {
    color: #cfe0f8;
}

body.studio-v2-arithmetic-route .studio-check-row:has(input:checked) span,
html[data-index-v2-theme] body.studio-v2-arithmetic-route .studio-check-row:has(input:checked) span,
body.studio-v2-arithmetic-route .studio-export-rng-check:has(input:checked) span {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(3, 19, 38, .28);
}

body.studio-v2-arithmetic-route .studio-export-rng-check:has(input:checked) {
    border-color: color-mix(in srgb, var(--arithmetic-accent) 68%, rgba(255, 255, 255, .32));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 46%),
        linear-gradient(135deg, #1d4ed8, #2563eb);
}

body.studio-v2-arithmetic-route .studio-settings-group {
    gap: 12px;
    padding: 14px 0;
    border-top-color: var(--arithmetic-line);
}

body.studio-v2-arithmetic-route .studio-settings-group h3 {
    font-size: .92rem;
}

body.studio-v2-arithmetic-route .studio-preview-column {
    grid-template-rows: auto auto minmax(0, 1fr);
}

body.studio-v2-arithmetic-route .studio-preview-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

body.studio-v2-arithmetic-route .studio-preview-head > div:first-child {
    min-width: 0;
}

body.studio-v2-arithmetic-route .studio-preview-actions {
    display: grid;
    grid-template-columns: 44px 44px 72px;
    align-items: center;
    gap: 10px;
    width: auto;
    min-width: 0;
}

body.studio-v2-arithmetic-route .studio-preview-actions .studio-icon-btn {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
}

body.studio-v2-arithmetic-route .studio-preview-actions .studio-icon-btn--text {
    width: 72px;
    min-width: 72px;
}

body.studio-v2-arithmetic-route .studio-preview-workspace {
    border-color: var(--arithmetic-line);
    background:
        linear-gradient(var(--arithmetic-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--arithmetic-grid) 1px, transparent 1px),
        color-mix(in srgb, var(--arithmetic-bg-a) 86%, transparent);
    background-size: 28px 28px, 28px 28px, 100% 100%;
}

body.studio-v2-arithmetic-route .studio-output-column {
    gap: 14px;
    grid-template-rows: auto auto minmax(0, 1fr);
}

body.studio-v2-arithmetic-route .studio-output-summary {
    gap: 10px;
    grid-row: 3;
    min-height: 0;
}

body.studio-v2-arithmetic-route .studio-action-card {
    border-color: rgba(59, 130, 246, .58);
    background:
        radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 38%),
        linear-gradient(180deg, #132b52 0%, #0d2546 100%);
    color: #f8fbff;
    box-shadow:
        0 18px 42px rgba(3, 12, 24, .24),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.studio-v2-arithmetic-route .studio-action-card .studio-step-head span {
    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
    color: #071225;
    box-shadow: 0 12px 24px rgba(20, 184, 166, .22);
}

body.studio-v2-arithmetic-route .studio-action-card .studio-step-head strong {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

body.studio-v2-arithmetic-route .studio-action-card .studio-export-rng-check:has(input:checked) {
    border-color: rgba(96, 165, 250, .82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .035) 44%),
        linear-gradient(135deg, #4f7cff 0%, #168df2 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .26),
        0 16px 30px rgba(37, 99, 235, .26);
}

body.studio-v2-arithmetic-route .studio-action-card .studio-export-rng-check:has(input:checked) span {
    color: #ffffff;
}

body.studio-v2-arithmetic-route .studio-action-card #studioRefreshBtn {
    border-color: rgba(148, 180, 220, .34);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .018) 48%, rgba(3, 10, 20, .18)),
        linear-gradient(180deg, #263d5b 0%, #122a48 100%);
    color: #f8fbff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(3, 10, 20, .3);
}

body.studio-v2-arithmetic-route .studio-output-btn--primary,
body.studio-v2-arithmetic-route #studioExportBtn.studio-output-btn--primary {
    min-height: 58px;
    border-color: rgba(96, 165, 250, .76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 44%),
        linear-gradient(135deg, #4f7ff7 0%, #1294ef 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(3, 38, 91, .34),
        0 18px 34px rgba(37, 99, 235, .28);
}

body.studio-v2-arithmetic-route .studio-action-card #studioStatus {
    border-color: rgba(148, 180, 220, .34);
    background: rgba(96, 125, 166, .22);
    color: #ffffff;
}

body.studio-v2-arithmetic-route .studio-secondary-btn,
body.studio-v2-arithmetic-route .studio-icon-btn,
body.studio-v2-arithmetic-route .studio-ghost-link {
    border-color: var(--arithmetic-line);
    background: var(--arithmetic-surface-soft);
}

body.studio-v2-arithmetic-route .studio-mobile-tabs {
    border: 1px solid var(--arithmetic-line);
    border-radius: 8px;
    padding: 5px;
    background: color-mix(in srgb, var(--arithmetic-bg-a) 78%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

body.studio-v2-arithmetic-route .studio-mobile-tab {
    min-height: 42px;
    border-radius: 8px;
}

body.studio-v2-arithmetic-route .studio-mobile-tab.is-active,
body.studio-v2-arithmetic-route .studio-mobile-tab[aria-selected="true"] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--arithmetic-accent) 18%, transparent), color-mix(in srgb, var(--arithmetic-accent-2) 12%, transparent));
}

@media (min-width: 1421px) {
    body.studio-v2-arithmetic-route .studio-preview-column,
    body.studio-v2-arithmetic-route .studio-output-column {
        height: calc(100dvh - var(--studio-v3-topbar-offset, 82px) - 30px);
        max-height: calc(100dvh - var(--studio-v3-topbar-offset, 82px) - 30px);
    }

    body.studio-v2-arithmetic-route .studio-preview-stage {
        min-height: 100%;
    }
}

@media (max-width: 1420px) {
    body.studio-v2-arithmetic-route .studio-v3-workspace {
        grid-template-columns: 1fr;
    }

    body.studio-v2-arithmetic-route .studio-builder-column > .studio-section-head {
        grid-template-columns: 1fr;
        align-items: start;
    }

    body.studio-v2-arithmetic-route .studio-output-column {
        grid-template-rows: auto auto minmax(0, 1fr);
    }
}

@media (max-width: 1060px) {
    body.studio-v2-arithmetic-route .studio-v3-shell {
        width: min(100% - 24px, 980px);
    }

    body.studio-v2-arithmetic-route .studio-v3-hero {
        align-items: stretch;
    }
}

@media (max-width: 560px) {
    body.studio-v2-arithmetic-route .studio-v3-shell {
        width: min(100% - 16px, 480px);
        padding-top: 12px;
    }

    body.studio-v2-arithmetic-route .studio-v3-title {
        grid-template-columns: auto minmax(0, 1fr);
    }

    body.studio-v2-arithmetic-route .studio-v3-title-icon {
        width: 42px;
        height: 42px;
    }

    body.studio-v2-arithmetic-route .studio-v3-title h1 {
        font-size: 1.55rem;
    }

    body.studio-v2-arithmetic-route .studio-trust-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.studio-v2-arithmetic-route .studio-v2-mode-return {
        grid-column: 1 / -1;
    }

    body.studio-v2-arithmetic-route .studio-trust-strip span,
    body.studio-v2-arithmetic-route .studio-v2-mode-return {
        min-width: 0;
        justify-content: center;
        text-align: center;
    }

    body.studio-v2-arithmetic-route .studio-builder-column,
    body.studio-v2-arithmetic-route .studio-preview-column,
    body.studio-v2-arithmetic-route .studio-output-column {
        padding: 12px;
    }

    body.studio-v2-arithmetic-route .studio-chip--operation-with-caption.studio-chip--operation-symbol,
    body.studio-v2-arithmetic-route .studio-chip--operation-symbol {
        width: 100%;
    }
}

@media (max-width: 1420px) {
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-card {
        border: 2px solid rgba(66, 133, 255, .58);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 32%),
            radial-gradient(circle at 14% 0%, rgba(56, 189, 248, .11), transparent 38%),
            linear-gradient(180deg, #10264a 0%, #0d223f 100%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .13),
            inset 0 0 0 1px rgba(148, 190, 255, .08),
            0 22px 48px rgba(2, 8, 23, .3);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-head span {
        background: linear-gradient(135deg, #38bdf8 0%, #14b8a6 100%);
        color: #06203b;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .24),
            0 14px 28px rgba(20, 184, 166, .22);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-head strong,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-card h3,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-card h4 {
        color: #f8fbff;
        text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-note,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-field > span,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-copy small,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-fallback-copy small {
        color: #cfe0f8;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-card,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-fallback-card,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-check-row,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-segment-btn,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-output-summary-item,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-preview-toolbar,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-page-input-label {
        border-color: rgba(112, 151, 204, .34);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .028) 44%),
            #1a314f;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .12),
            inset 0 -1px 0 rgba(0, 0, 0, .16),
            0 12px 24px rgba(2, 8, 23, .18);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-card {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 50%),
            #203853;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-action,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-access-badge {
        border-color: rgba(101, 229, 191, .72);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05)),
            #bfeee3;
        color: #063f35;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .42),
            0 12px 24px rgba(20, 184, 166, .18);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-chip:has(input:checked),
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-check-row:has(input:checked),
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-segment-btn.is-active,
    html[data-index-v2-theme] body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-check-row:has(input:checked),
    html[data-index-v2-theme] body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-segment-btn.is-active {
        border-color: rgba(96, 165, 250, .86);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .035) 42%),
            linear-gradient(135deg, #4f7cff 0%, #168df2 100%);
        color: #ffffff;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .28),
            inset 0 -2px 0 rgba(16, 72, 180, .42),
            0 16px 30px rgba(37, 99, 235, .28);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-action-card {
        border-color: rgba(66, 133, 255, .68);
        background:
            linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 32%),
            linear-gradient(180deg, #10264a 0%, #0d223f 100%);
    }
}

@media (max-width: 900px) {
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-card {
        padding: 26px;
        border-radius: 16px;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-head {
        gap: 18px;
        margin-bottom: 24px;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-head span {
        width: 56px;
        height: 56px;
        font-size: 1.14rem;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-step-head strong {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-segment,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-chip-grid {
        gap: 16px;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-segment-btn,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-chip {
        min-height: 82px;
        min-width: 94px;
        padding: 14px 18px;
        border-radius: 14px;
        font-size: clamp(1.22rem, 3.8vw, 1.55rem);
        font-weight: 900;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-card,
    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-check-row {
        min-height: 100px;
        border-radius: 14px;
        padding: 18px;
    }

    body.studio-v2-arithmetic-route:not([data-arithmetic-theme="light"]) .studio-template-selection-card .studio-template-selection-action {
        min-height: 64px;
        padding-inline: 24px;
        font-size: 1.08rem;
    }
}

/* Page-level design system: Premium Dark Navy Education SaaS */
body.studio-v2-arithmetic-route,
body.studio-v2-arithmetic-route[data-arithmetic-theme="light"] {
    --arithmetic-bg-a: #071225;
    --arithmetic-bg-b: #0a1b34;
    --arithmetic-bg-c: #102a51;
    --arithmetic-panel: linear-gradient(180deg, #132b52 0%, #0d2546 100%);
    --arithmetic-panel-glow: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, .18), transparent 38%);
    --arithmetic-inner: linear-gradient(180deg, #263d5b 0%, #122a48 100%);
    --arithmetic-inner-gloss: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .018) 48%, rgba(3, 10, 20, .18));
    --arithmetic-primary: linear-gradient(135deg, #4f7ff7 0%, #1294ef 100%);
    --arithmetic-primary-strong: linear-gradient(135deg, #4f7cff 0%, #168df2 100%);
    --arithmetic-mint: #bfeee3;
    --arithmetic-mint-ink: #063f35;
    --arithmetic-panel-border: rgba(59, 130, 246, .58);
    --arithmetic-inner-border: rgba(148, 180, 220, .34);
    --arithmetic-ink: #f8fbff;
    --arithmetic-muted: #cfe0f8;
    --arithmetic-soft-muted: #9fb5d2;
    --arithmetic-field: #0b1f3c;
    --arithmetic-shadow: 0 22px 48px rgba(2, 8, 23, .3);
    --studio-v3-ink: var(--arithmetic-ink);
    --studio-v3-muted: var(--arithmetic-muted);
    --studio-v3-field: var(--arithmetic-field);
    color: var(--arithmetic-ink);
    background:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, .16), transparent 34%),
        radial-gradient(circle at 82% 10%, rgba(6, 182, 212, .11), transparent 30%),
        linear-gradient(180deg, var(--arithmetic-bg-a) 0%, var(--arithmetic-bg-b) 48%, var(--arithmetic-bg-c) 100%) !important;
}

body.studio-v2-arithmetic-route .studio-card,
body.studio-v2-arithmetic-route .hero-panel,
body.studio-v2-arithmetic-route .studio-step-card,
body.studio-v2-arithmetic-route .studio-preview-column,
body.studio-v2-arithmetic-route .studio-output-column,
body.studio-v2-arithmetic-route .studio-builder-column {
    border-color: var(--arithmetic-panel-border);
    background:
        var(--arithmetic-panel-glow),
        var(--arithmetic-panel);
    color: var(--arithmetic-ink);
    box-shadow:
        var(--arithmetic-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .12);
}

body.studio-v2-arithmetic-route .studio-v3-hero {
    background:
        radial-gradient(circle at 0% 0%, rgba(20, 184, 166, .14), transparent 36%),
        var(--arithmetic-panel-glow),
        var(--arithmetic-panel);
}

body.studio-v2-arithmetic-route :where(
    .studio-v3-title h1,
    .studio-section-head h2,
    .studio-preview-head h2,
    .studio-step-head strong,
    .studio-settings-group h3,
    .studio-template-selection-copy strong,
    .studio-template-fallback-copy strong,
    .studio-output-summary-item strong
) {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .22);
}

body.studio-v2-arithmetic-route :where(
    .studio-v3-title p,
    .studio-section-head p,
    .studio-preview-head p,
    .studio-step-note,
    .studio-preview-summary,
    .studio-field > span,
    .studio-template-selection-copy small,
    .studio-template-fallback-copy small,
    .studio-output-summary-item span
) {
    color: var(--arithmetic-muted);
}

body.studio-v2-arithmetic-route .studio-step-head span,
body.studio-v2-arithmetic-route .studio-v3-title-icon,
body.studio-v2-arithmetic-route .studio-output-summary-item i {
    background: linear-gradient(135deg, #3b82f6 0%, #14b8a6 100%);
    color: #06203b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .24),
        0 14px 28px rgba(20, 184, 166, .22);
}

body.studio-v2-arithmetic-route :where(
    .studio-template-selection-card,
    .studio-template-fallback-card,
    .studio-template-card,
    .studio-advanced-card,
    .studio-output-summary-item,
    .studio-preview-toolbar,
    .studio-page-input-label,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-secondary-btn,
    .studio-icon-btn,
    .studio-ghost-link,
    .studio-mobile-tabs
) {
    border-color: var(--arithmetic-inner-border);
    background:
        var(--arithmetic-inner-gloss),
        var(--arithmetic-inner);
    color: var(--arithmetic-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(3, 10, 20, .3),
        0 12px 24px rgba(2, 8, 23, .18);
}

body.studio-v2-arithmetic-route :where(input, select, textarea),
body.studio-v2-arithmetic-route .studio-field :where(input, select, textarea),
body.studio-v2-arithmetic-route .studio-template-search input,
body.studio-v2-arithmetic-route .studio-page-input-label input {
    border-color: rgba(148, 180, 220, .36);
    background: #0b1f3c;
    color: #ffffff;
}

body.studio-v2-arithmetic-route :where(input, select, textarea)::placeholder {
    color: rgba(207, 224, 248, .68);
}

body.studio-v2-arithmetic-route :where(.studio-chip:has(input:checked), .studio-check-row:has(input:checked), .studio-segment-btn.is-active, .studio-mobile-tab.is-active, .studio-mobile-tab[aria-selected="true"]),
html[data-index-v2-theme] body.studio-v2-arithmetic-route :where(.studio-check-row:has(input:checked), .studio-segment-btn.is-active) {
    border-color: rgba(96, 165, 250, .86);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .035) 42%),
        var(--arithmetic-primary-strong);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(16, 72, 180, .42),
        0 16px 30px rgba(37, 99, 235, .28);
}

body.studio-v2-arithmetic-route :where(.studio-chip:has(input:checked), .studio-check-row:has(input:checked), .studio-segment-btn.is-active) span {
    color: #ffffff;
}

body.studio-v2-arithmetic-route .studio-template-selection-icon,
body.studio-v2-arithmetic-route .studio-cta,
body.studio-v2-arithmetic-route .studio-output-btn--primary,
body.studio-v2-arithmetic-route #studioExportBtn.studio-output-btn--primary {
    border-color: rgba(96, 165, 250, .76);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .2), transparent 44%),
        var(--arithmetic-primary);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .28),
        inset 0 -2px 0 rgba(3, 38, 91, .34),
        0 18px 34px rgba(37, 99, 235, .28);
}

body.studio-v2-arithmetic-route :where(.studio-template-selection-action, .studio-template-access-badge) {
    border-color: rgba(101, 229, 191, .72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06)),
        var(--arithmetic-mint);
    color: var(--arithmetic-mint-ink);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .42),
        0 12px 24px rgba(20, 184, 166, .18);
}

body.studio-v2-arithmetic-route .studio-preview-workspace {
    border-color: rgba(148, 180, 220, .28);
    background:
        linear-gradient(rgba(125, 211, 252, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, .045) 1px, transparent 1px),
        #071a32;
}

body.studio-v2-arithmetic-route .studio-trust-strip span,
body.studio-v2-arithmetic-route .studio-v2-mode-return {
    border-color: rgba(148, 180, 220, .34);
    background:
        var(--arithmetic-inner-gloss),
        var(--arithmetic-inner);
    color: #f8fbff;
}

body.studio-v2-arithmetic-route .studio-action-status,
body.studio-v2-arithmetic-route #studioStatus {
    border-color: rgba(148, 180, 220, .34);
    background: rgba(96, 125, 166, .22);
    color: #ffffff;
}

body.studio-v2-arithmetic-route :where(
    .studio-cta,
    .studio-secondary-btn,
    .studio-ghost-link,
    .studio-icon-btn,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-template-selection-card,
    .studio-template-fallback-card
):hover {
    border-color: rgba(96, 165, 250, .74);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 16px 30px rgba(37, 99, 235, .18);
}

body.studio-v2-arithmetic-route :where(
    .studio-cta,
    .studio-secondary-btn,
    .studio-ghost-link,
    .studio-icon-btn,
    .studio-chip,
    .studio-segment-btn,
    .studio-check-row,
    .studio-template-selection-card,
    .studio-template-fallback-card
):focus-visible,
body.studio-v2-arithmetic-route :where(input, select, textarea):focus-visible {
    outline: 3px solid rgba(56, 189, 248, .42);
    outline-offset: 3px;
}

body.studio-v2-arithmetic-route .studio-template-selection-action,
body.studio-v2-arithmetic-route .studio-template-access-badge {
    min-height: 44px;
    padding: 10px 18px;
    border-color: rgba(101, 229, 191, .78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)),
        #bfeee3;
    color: #053b32;
}

body.studio-v2-arithmetic-route .studio-preview-toolbar,
body.studio-v2-arithmetic-route .studio-page-input-label,
body.studio-v2-arithmetic-route .studio-action-card {
    border-color: var(--arithmetic-inner-border);
    background:
        var(--arithmetic-inner-gloss),
        var(--arithmetic-inner);
    color: var(--arithmetic-ink);
}

body.studio-v2-arithmetic-route .studio-field input,
body.studio-v2-arithmetic-route .studio-field select,
body.studio-v2-arithmetic-route .studio-field textarea,
body.studio-v2-arithmetic-route .studio-page-input-label input {
    min-height: 44px;
    border-color: rgba(148, 180, 220, .42);
    background: #0b1f3c;
    color: #ffffff;
}

body.studio-v2-arithmetic-route .studio-output-btn--primary,
body.studio-v2-arithmetic-route #studioExportBtn.studio-output-btn--primary {
    min-height: 58px;
    border-color: rgba(96, 165, 250, .78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .22), transparent 44%),
        var(--arithmetic-primary);
    color: #ffffff;
}

body.studio-v2-arithmetic-route .studio-secondary-btn,
body.studio-v2-arithmetic-route .studio-icon-btn,
body.studio-v2-arithmetic-route .studio-v2-mode-return {
    min-height: 44px;
}

body.studio-v2-arithmetic-route .studio-secondary-btn--compact,
body.studio-v2-arithmetic-route .studio-icon-btn {
    min-width: 44px;
}

body.studio-v2-arithmetic-route .studio-v2-mode-return {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fbff;
}