/* Opt-in scope: wrap migrated components in .vi2. Load after existing page CSS. */
.vi2 { margin:0; color:var(--fg-primary); background:var(--bg-canvas); font-family:var(--font-system); font-size:var(--font-size-15); line-height:var(--line-height-15); }
.vi2 *, .vi2 *::before, .vi2 *::after { box-sizing:border-box; }
.vi2 :where(h1,h2,h3,p,figure) { margin:0; }
.vi2 :where(h1,h2,h3) { font-weight:600; letter-spacing:-.02em; }
.vi2 h1 { font-size:var(--font-size-44); line-height:var(--line-height-44); }
.vi2 h2 { font-size:var(--font-size-24); line-height:var(--line-height-24); }
.vi2 h3 { font-size:var(--font-size-17); line-height:var(--line-height-17); }
.vi2 :where(button,input,textarea,select) { font:inherit; }
.vi2 :where(button,a,input,summary,select) { touch-action:manipulation; }
.vi2 :where(button,a,summary,input,textarea,select,[tabindex]):focus-visible { outline:var(--focus-ring); outline-offset:var(--focus-offset); }
.vi2 :where(a) { color:var(--fg-link); text-underline-offset:4px; }
.vi2 button { cursor:pointer; }
.vi2 button:disabled { cursor:not-allowed; }
.vi2 [hidden] { display:none!important; }
.vi2 code { font-family:var(--font-system); font-size:var(--font-size-13); overflow-wrap:anywhere; }
.vi2 .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.vi2 .skip-link { position:fixed; top:-100px; left:16px; z-index:var(--z-skip); padding:12px 20px; background:var(--bg-surface); color:var(--fg-primary); }
.vi2 .skip-link:focus { top:12px; }
.vi2 .muted, .vi2 .help, .vi2 .file-meta { color:var(--fg-secondary); }
.vi2 .help, .vi2 .file-meta { font-size:var(--font-size-13); line-height:var(--line-height-13); }
.vi2 .eyebrow { font-size:var(--font-size-12); line-height:var(--line-height-12); letter-spacing:.12em; font-weight:600; color:var(--fg-secondary); }
.vi2 .lead { font-size:var(--font-size-20); line-height:var(--line-height-20); }
.vi2 .icon { width:24px; height:24px; flex:none; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vi2 .button { display:inline-flex; gap:8px; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:1px solid var(--border-control); border-radius:var(--radius-md); font-size:var(--font-size-15); line-height:var(--line-height-15); font-weight:600; text-decoration:none; white-space:normal; color:var(--fg-primary); background:var(--bg-surface); }
.vi2 .button.primary { background:var(--action-primary); color:var(--on-primary); border-color:var(--focus); }
.vi2 .button.primary:is(:hover,[data-demo-state="hover"]) { background:var(--action-primary-hover); }
.vi2 .button.primary:is(:active,[data-demo-state="pressed"]) { background:var(--action-primary-pressed); }
.vi2 .button.secondary { color:var(--fg-primary); background:var(--bg-surface); }
.vi2 .button.secondary:is(:hover,[data-demo-state="hover"]) { background:var(--bg-hover); }
.vi2 .button.secondary:is(:active,[data-demo-state="pressed"]) { background:var(--bg-active); }
.vi2 .button.ghost { color:var(--fg-secondary); background:transparent; border-color:transparent; }
.vi2 .button.ghost:is(:hover,[data-demo-state="hover"]) { background:var(--bg-hover); }
.vi2 .button.ghost:is(:active,[data-demo-state="pressed"]) { background:var(--bg-active); }
.vi2 .button.danger { color:var(--on-danger); background:var(--action-danger); border-color:var(--action-danger); }
.vi2 .button.danger:is(:hover,[data-demo-state="hover"]) { background:var(--action-danger-hover); }
.vi2 .button.danger:is(:active,[data-demo-state="pressed"]) { background:var(--action-danger-pressed); }
.vi2 .button.dark { color:var(--on-dark); background:var(--action-dark); border-color:var(--action-dark); }
.vi2 .button.dark:hover { background:var(--action-dark-hover); }
.vi2 .button.dark:active { background:var(--action-dark-pressed); }
.vi2 .button.button:disabled, .vi2 .button.button[aria-disabled="true"] { background:var(--bg-subtle); color:var(--fg-disabled); border-color:var(--border-control); border-style:dashed; opacity:1; box-shadow:none; cursor:not-allowed; }
.vi2 .button.small { min-height:36px; padding:6px 12px; font-size:var(--font-size-13); line-height:var(--line-height-13); }
.vi2 .icon-button { display:inline-grid; place-items:center; width:44px; height:44px; flex:none; padding:8px; border:1px solid transparent; border-radius:var(--radius-md); background:transparent; color:inherit; }
.vi2 .icon-button:hover { background:var(--bg-hover); color:var(--fg-primary); }
.vi2 .icon-button:disabled { color:var(--fg-disabled); border-color:var(--border); border-style:dashed; background:var(--bg-subtle); }
.vi2 .button-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.vi2 .button-row:not(:first-child) { margin-top:16px; }
.vi2 .stack { display:grid; gap:16px; justify-items:start; }
.vi2 .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vi2 .wide { grid-column:1/-1; }
.vi2 .field { display:grid; align-content:start; gap:8px; min-width:0; }
.vi2 .field label { font-weight:600; }
.vi2 .field label span { font-size:var(--font-size-13); color:var(--fg-secondary); margin-left:8px; }
.vi2 .field :where(input,textarea,select), .vi2 .theme-control select { min-height:44px; width:100%; min-width:0; border:1px solid var(--border-control); border-radius:var(--radius-md); padding:10px 12px; color:var(--fg-primary); background:var(--bg-surface); }
.vi2 .field textarea { resize:vertical; }
.vi2 .field :where(input,textarea)::placeholder { color:var(--fg-secondary); opacity:1; }
.vi2 .field :where(input,textarea,select):disabled { color:var(--fg-disabled); background:var(--bg-subtle); border-style:dashed; opacity:1; }
.vi2 .field [aria-invalid="true"], .vi2 .input-error { border:2px solid var(--fg-danger); }
.vi2 .field input[type="file"] { font-size:var(--font-size-13); }
.vi2 .field input::file-selector-button { font:inherit; padding:4px 8px; margin-right:8px; border:1px solid var(--border-control); border-radius:var(--radius-sm); background:var(--bg-subtle); color:var(--fg-primary); }
.vi2 .form-error { color:var(--fg-danger); font-size:var(--font-size-13); }
.vi2 .char-count { font-size:var(--font-size-13); color:var(--fg-secondary); text-align:right; font-variant-numeric:tabular-nums; }
.vi2 .table-wrap { overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-surface); }
.vi2 .table-wrap + .table-wrap { margin-top:24px; }
.vi2 .data-table { border-collapse:collapse; width:100%; min-width:620px; font-size:var(--font-size-13); }
.vi2 .data-table.empty-table { min-width:0; table-layout:fixed; }
.vi2 .data-table caption { text-align:left; padding:16px; font-weight:600; color:var(--fg-primary); }
.vi2 .data-table th, .vi2 .data-table td { padding:16px; text-align:left; border-top:1px solid var(--border); vertical-align:middle; }
.vi2 .data-table thead { background:var(--bg-subtle); color:var(--fg-secondary); }
.vi2 .data-table tbody th { font-weight:600; }
.vi2 .data-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.vi2 .badge { display:inline-flex; align-items:center; gap:8px; padding:4px 8px; min-height:28px; border:1px solid currentColor; border-radius:var(--radius-sm); font-size:var(--font-size-12); line-height:var(--line-height-12); font-weight:600; color:var(--fg-secondary); background:var(--bg-subtle); white-space:nowrap; }
.vi2 .status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.vi2 .badge:is(.delivered,.ready,.done,.pass), .vi2 .check-marker.pass { color:var(--fg-success); background:var(--bg-success); }
.vi2 .badge:is(.beta,.warn,.demo), .vi2 .check-marker.warn { color:var(--fg-warning); background:var(--bg-warning); }
.vi2 .badge:is(.building,.received,.checking,.generating,.real) { color:var(--fg-info); background:var(--bg-info); }
.vi2 .badge:is(.needs_ack,.pending) { color:var(--fg-pending); background:var(--bg-pending); }
.vi2 .badge:is(.blocked,.failed,.fail), .vi2 .check-marker.fail { color:var(--fg-danger); background:var(--bg-danger); }
.vi2 .badge:is(.planned,.neutral) { color:var(--fg-secondary); background:var(--bg-subtle); }
.vi2 .status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; width:100%; }
.vi2 .status-grid > div { display:grid; gap:8px; justify-items:start; }
.vi2 .status-grid code { color:var(--fg-secondary); }
.vi2 .task-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:0 0 24px; gap:8px; }
.vi2 .task-progress li { display:flex; align-items:center; gap:8px; padding-bottom:16px; border-bottom:2px solid var(--border); color:var(--fg-secondary); font-size:var(--font-size-13); }
.vi2 .task-progress li.active { color:var(--fg-primary); border-color:var(--focus); font-weight:600; }
.vi2 .task-progress li.complete { color:var(--fg-success); border-color:var(--fg-success); }
.vi2 .step-number { display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid currentColor; }
.vi2 .surface, .vi2 .card { border:1px solid var(--border); background:var(--bg-surface); border-radius:var(--radius-lg); }
.vi2 .surface { overflow:hidden; }
.vi2 .card { padding:24px; box-shadow:var(--shadow-1); }
.vi2 .task-card { max-width:540px; }
.vi2 .task-card h3 { margin-top:24px; }
.vi2 .card-description { margin:12px 0; }
.vi2 .card-top, .vi2 .card-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.vi2 .card-bottom { margin-top:24px; padding-top:16px; border-top:1px solid var(--border); }
.vi2 .card-bottom a { display:inline-flex; align-items:center; gap:8px; min-height:44px; }
.vi2 .file-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.vi2 .output-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); min-width:0; }
.vi2 .output-card > div { min-width:0; flex:1; overflow-wrap:anywhere; }
.vi2 .output-card strong { font-weight:600; }
.vi2 .output-icon { display:grid; place-items:center; width:40px; height:48px; border-radius:var(--radius-sm); flex:none; }
.vi2 .output-icon.docx { color:var(--fg-info); background:var(--bg-info); }
.vi2 .output-icon.pptx { color:var(--fg-warning); background:var(--bg-warning); }
.vi2 .output-icon.csv { color:var(--fg-success); background:var(--bg-success); }
.vi2 .output-icon.json { color:var(--fg-pending); background:var(--bg-pending); }
.vi2 .check-row { display:grid; grid-template-columns:32px minmax(0,1fr); gap:16px; padding:24px; border-bottom:1px solid var(--border); }
.vi2 .check-row:last-child { border-bottom:0; }
.vi2 .check-marker { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; }
.vi2 .check-marker .icon { width:20px; height:20px; }
.vi2 .check-topline { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:12px; margin-bottom:8px; }
.vi2 .ack-field { display:flex; align-items:flex-start; gap:12px; padding:12px; margin:16px 0 8px; border-radius:var(--radius-md); background:var(--bg-warning); color:var(--fg-warning); cursor:pointer; }
.vi2 .ack-field input { width:20px; height:20px; flex:none; margin:2px 0; accent-color:var(--fg-warning); }
.vi2 .ack-field ~ .button { margin-top:16px; }
.vi2 .empty { text-align:center; padding:32px 24px; }
.vi2 .empty p { max-width:480px; margin:12px auto 24px; color:var(--fg-secondary); }
.vi2 .empty .button-row { justify-content:center; }
.vi2 .illustration { width:192px; height:160px; max-width:100%; color:var(--icon-primary); display:block; margin:0 auto 16px; }
.vi2 .notice { display:flex; align-items:flex-start; gap:12px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); color:var(--fg-info); background:var(--bg-info); }
.vi2 .notice p { margin-top:8px; }
.vi2 .notice.error { color:var(--fg-danger); background:var(--bg-danger); border-color:var(--fg-danger); }
.vi2 .spinner { display:inline-block; flex:none; width:20px; height:20px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; margin-top:2px; /* Deliberately static: real status text communicates polling. */ }
.vi2 .skeleton { height:16px; width:100%; background:var(--border); border-radius:var(--radius-sm); margin:12px 0; }
.vi2 .skeleton-title { height:24px; width:48%; }
.vi2 .skeleton-short { width:72%; }
.vi2 .toast, .vi2 .toast-preview { display:flex; align-items:center; gap:12px; background:var(--inverse-bg); color:var(--inverse-fg); border-radius:var(--radius-md); padding:12px 16px; box-shadow:var(--shadow-2); }
.vi2 .toast-preview { width:fit-content; }
.vi2 .toast { position:fixed; right:24px; bottom:24px; z-index:var(--z-toast); max-width:min(520px,calc(100vw - 32px)); }
.vi2 .toast .icon-button:focus-visible { outline-color:currentColor; }
.vi2 .dialog { position:fixed; max-width:min(520px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); width:100%; padding:32px; border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--fg-primary); background:var(--bg-surface); box-shadow:var(--shadow-3); z-index:var(--z-dialog); }
.vi2 .dialog::backdrop { background:var(--overlay); }
.vi2 .dialog p { margin-top:16px; }
.vi2 .dialog .button-row { margin-top:24px; justify-content:flex-end; }
.vi2 .drawer { inset:0 0 0 auto; width:400px; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
.vi2 .drawer .stack { margin-top:24px; }
.vi2 .shell-preview { display:grid; grid-template-columns:232px minmax(0,1fr); min-height:300px; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.vi2 .sidebar { padding:24px 16px; background:var(--bg-subtle); border-right:1px solid var(--border); display:grid; gap:24px; align-content:start; }
.vi2 .side-link { display:flex; gap:12px; padding:12px; min-height:44px; align-items:center; border:1px solid transparent; border-radius:var(--radius-md); color:var(--fg-secondary); text-decoration:none; font-size:var(--font-size-13); }
.vi2 .side-link:hover { background:var(--bg-hover); }
.vi2 .side-link.active { color:var(--fg-primary); background:var(--bg-surface); border-color:var(--border); box-shadow:inset 3px 0 var(--focus); font-weight:600; }
.vi2 .main-column { min-width:0; }
.vi2 .topbar { padding:16px 24px; min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); background:var(--bg-surface); }
.vi2 .crumb, .vi2 .profile { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:var(--font-size-13); }
.vi2 .avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--bg-subtle); font-weight:600; }
.vi2 .preview-content { padding:24px; }
.vi2 .preview-content p { margin-top:12px; }
.vi2 .breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:12px; list-style:none; margin:0; padding:0; }
.vi2 .breadcrumb a { display:inline-flex; min-height:44px; align-items:center; }
.vi2 .pagination { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vi2 .pagination [aria-current="page"] { background:var(--bg-active); border:2px solid var(--focus); font-weight:700; }
.vi2 .brand { display:inline-flex; align-items:center; gap:12px; flex:none; }
.vi2 .brand img { width:128px; height:36px; object-fit:cover; object-position:center; border-radius:var(--radius-sm); }
.vi2 .brand span { font-size:var(--font-size-13); font-weight:600; color:var(--fg-secondary); border-left:1px solid var(--border); padding-left:12px; }
.vi2 .brand-light { display:var(--logo-light); }
.vi2 .brand-dark { display:var(--logo-dark); }

/* Specimen layout only. These classes are not product layout contracts. */
.vi2 .board-header { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:20px 32px; border-bottom:1px solid var(--border); background:var(--bg-surface); }
.vi2 .board-edition { font-size:var(--font-size-12); letter-spacing:.1em; color:var(--fg-secondary); }
.vi2 .theme-control { display:flex; gap:12px; align-items:center; margin-left:auto; font-size:var(--font-size-13); }
.vi2 .theme-control select { width:auto; padding-right:28px; }
.vi2 .board-layout { display:grid; grid-template-columns:224px minmax(0,1fr); max-width:1440px; margin:auto; }
.vi2 .board-nav { position:sticky; top:0; max-height:100dvh; overflow:auto; align-self:start; padding:32px 20px; display:grid; gap:4px; border-right:1px solid var(--border); }
.vi2 .board-nav p { margin-bottom:16px; }
.vi2 .board-nav a { display:block; min-height:40px; padding:8px 12px; border-radius:var(--radius-md); text-decoration:none; color:var(--fg-secondary); font-size:var(--font-size-13); }
.vi2 .board-nav a:hover, .vi2 .board-nav a:focus-visible { color:var(--fg-primary); background:var(--bg-hover); }
.vi2 .board-main { min-width:0; padding:48px; }
.vi2 .board-intro { padding-bottom:48px; }
.vi2 .board-intro h1 { margin:20px 0; }
.vi2 .board-intro .lead { margin-bottom:12px; }
.vi2 .intro-meta { display:flex; flex-wrap:wrap; gap:24px; margin:24px 0 32px; color:var(--fg-secondary); font-size:var(--font-size-13); }
.vi2 .palette { display:grid; grid-template-columns:2fr 1fr 1fr; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border); margin:24px 0; }
.vi2 .swatch { padding:24px; min-height:112px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; font-size:var(--font-size-13); }
.vi2 .swatch.amber { background:var(--brand-amber); color:var(--brand-ink); }
.vi2 .swatch.ink { background:var(--brand-ink); color:var(--brand-paper); }
.vi2 .swatch.paper { background:var(--brand-paper); color:var(--ink-primary); }
.vi2 .type-ramp { display:flex; gap:24px; flex-wrap:wrap; align-items:baseline; margin-bottom:12px; font-variant-numeric:tabular-nums; }
.vi2 .type-12 { font-size:var(--font-size-12); line-height:var(--line-height-12); }
.vi2 .type-13 { font-size:var(--font-size-13); line-height:var(--line-height-13); }
.vi2 .type-15 { font-size:var(--font-size-15); line-height:var(--line-height-15); }
.vi2 .type-17 { font-size:var(--font-size-17); line-height:var(--line-height-17); }
.vi2 .type-20 { font-size:var(--font-size-20); line-height:var(--line-height-20); }
.vi2 .type-24 { font-size:var(--font-size-24); line-height:var(--line-height-24); }
.vi2 .type-32 { font-size:var(--font-size-32); line-height:var(--line-height-32); }
.vi2 .type-44 { font-size:var(--font-size-44); line-height:var(--line-height-44); }
.vi2 .spec-section { padding:40px 0; border-top:1px solid var(--border); scroll-margin-top:24px; }
.vi2 .section-heading { display:flex; gap:16px; margin-bottom:24px; }
.vi2 .section-number { color:var(--fg-secondary); font-size:var(--font-size-13); padding-top:5px; font-variant-numeric:tabular-nums; }
.vi2 .section-heading p { margin-top:8px; color:var(--fg-secondary); max-width:680px; font-size:var(--font-size-13); }
.vi2 .example { border:1px solid var(--border); background:var(--bg-surface); border-radius:var(--radius-lg); padding:24px; }
.vi2 .source { margin-top:12px; font-size:var(--font-size-13); }
.vi2 .source summary { cursor:pointer; min-height:44px; padding:12px 0; color:var(--fg-secondary); }
.vi2 .source > p { margin:8px 0 12px; }
.vi2 .source pre { overflow:auto; max-height:480px; padding:20px; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg-subtle); border:1px solid var(--border); border-radius:var(--radius-md); }
.vi2 .state-grid { display:grid; grid-template-columns:80px repeat(4,minmax(0,1fr)); gap:12px; align-items:stretch; }
.vi2 .state-grid > :is(span,strong) { font-size:var(--font-size-13); color:var(--fg-secondary); align-self:center; }
.vi2 .state-grid .button { padding:8px; font-size:var(--font-size-13); }
.vi2 .illustration-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
.vi2 .illustration-grid figure { text-align:center; }
.vi2 .illustration-grid figcaption { font-size:var(--font-size-13); }
.vi2 .illustration-grid code { display:block; color:var(--fg-secondary); font-size:var(--font-size-12); }
.vi2 .icon-index { max-width:1200px; margin:0 auto; padding:48px 24px; }
.vi2 .icon-index h1 { margin:16px 0; }
.vi2 .icon-index .muted { margin:16px 0 32px; }
.vi2 .icon-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.vi2 .icon-tile { display:grid; justify-items:center; gap:12px; padding:24px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); color:var(--fg-primary); text-decoration:none; }
.vi2 .icon-tile:hover { background:var(--bg-hover); border-color:var(--border-control); }
.vi2 .icon-tile code { color:var(--fg-secondary); }
.vi2 .board-footer { display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; padding:32px 0; border-top:1px solid var(--border); color:var(--fg-secondary); font-size:var(--font-size-13); }
#motion-result { margin-top:24px; }
/* Breakpoint tokens document values; CSS variables cannot be used in media conditions. */
@media (min-width:1440px) { .vi2 .board-main { padding:56px; } }
@media (max-width:1279px) { .vi2 .board-layout { grid-template-columns:200px minmax(0,1fr); } .vi2 .board-main { padding:32px; } .vi2 .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vi2 .file-grid { grid-template-columns:1fr; } }
@media (max-width:1023px) { .vi2 .board-layout { display:block; } .vi2 .board-nav { position:static; max-height:none; display:flex; overflow:auto; border-right:0; border-bottom:1px solid var(--border); padding:12px 24px; } .vi2 .board-nav a { white-space:nowrap; } .vi2 .board-nav p { display:none; } .vi2 .icon-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:767px) { .vi2 .board-header { padding:16px; gap:12px; } .vi2 .board-edition { display:none; } .vi2 .board-main { padding:24px 16px; } .vi2 .example { padding:16px; } .vi2 .form-grid, .vi2 .shell-preview { grid-template-columns:1fr; } .vi2 .sidebar { border-right:0; border-bottom:1px solid var(--border); } .vi2 .state-grid { grid-template-columns:68px repeat(4,136px); overflow:auto; padding:4px 4px 12px; } .vi2 .task-progress { grid-template-columns:1fr 1fr; gap:16px; } .vi2 .illustration-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .vi2 .palette { grid-template-columns:1fr 1fr; } .vi2 .swatch.amber { grid-column:1/-1; } .vi2 .icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .vi2 .dialog { padding:24px; } .vi2 .drawer { width:100%; } .vi2 .check-row { padding:16px; gap:12px; } .vi2 .topbar { padding:16px; } .vi2 .toast { right:16px; bottom:16px; } }
@media (max-width:389px) { .vi2 .brand img { width:108px; } .vi2 .theme-control { gap:8px; } .vi2 .theme-control select { max-width:112px; } .vi2 h1 { font-size:var(--font-size-32); line-height:var(--line-height-32); } .vi2 .status-grid, .vi2 .icon-grid { grid-template-columns:1fr 1fr; } .vi2 .output-card { padding:12px; gap:8px; } }
@media (forced-colors:active) { .vi2 .button, .vi2 .badge, .vi2 .icon-button, .vi2 .card { border:1px solid ButtonText; } .vi2 .skeleton { border:1px solid GrayText; } .vi2 .brand img { forced-color-adjust:none; } }