create-yss-spec 3.5.2 → 3.5.3

package/template/.codex/skills/data-analytics/src/datascience-chart-widget.css

@@ -1,2117 +0,0 @@
-* {
-        box-sizing: border-box;
-      }
-
-      [hidden] {
-        display: none !important;
-      }
-
-      :root {
-        --ds-chip-border: var(--border-neutral-outline-default, rgba(13, 13, 13, 0.12));
-        --ds-chip-text: var(--text-neutral-outline-default, var(--ds-text-secondary));
-        --ds-chip-hover-bg: var(--color-background-primary-ghost-hover, rgba(13, 13, 13, 0.04));
-        --ds-chip-hover-text: var(--ds-text-primary);
-        --ds-segmented-bg: var(--surface-tertiary, var(--ds-surface-tertiary));
-        --ds-segmented-active-bg: var(--color-surface-default, var(--ds-surface));
-        --ds-segmented-active-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.08);
-        --ds-code-container-bg: rgba(232, 232, 232, 0.2);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        :root:not([data-theme="light"]) {
-          --ds-chip-border: var(--ds-border-strong);
-          --ds-chip-text: var(--ds-text-secondary);
-          --ds-chip-hover-bg: var(--ds-menu-hover-bg);
-          --ds-chip-hover-text: var(--ds-text-primary);
-          --ds-segmented-bg: var(--ds-surface-tertiary);
-          --ds-segmented-active-bg: var(--ds-surface);
-          --ds-segmented-active-shadow: none;
-          --ds-code-container-bg: color-mix(in srgb, var(--ds-surface) 76%, white 8%);
-        }
-      }
-
-      :root[data-theme="dark"] {
-        --ds-chip-border: var(--ds-border-strong);
-        --ds-chip-text: var(--ds-text-secondary);
-        --ds-chip-hover-bg: var(--ds-menu-hover-bg);
-        --ds-chip-hover-text: var(--ds-text-primary);
-        --ds-segmented-bg: var(--ds-surface-tertiary);
-        --ds-segmented-active-bg: var(--ds-surface);
-        --ds-segmented-active-shadow: none;
-        --ds-code-container-bg: color-mix(in srgb, var(--ds-surface) 76%, white 8%);
-      }
-
-      html {
-        min-height: 0;
-        overflow: clip;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-      }
-
-      html:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) {
-        min-height: 100%;
-        overflow: auto;
-        background: var(--ds-bg);
-      }
-
-      body {
-        margin: 0;
-        min-height: 0;
-        overflow: clip;
-        background: transparent;
-        color: var(--ds-text);
-        font-synthesis: none;
-        font: 14px/1.45 var(--ds-font);
-        letter-spacing: 0;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-      }
-
-      body:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) {
-        height: auto;
-        min-height: 100vh;
-        overflow: auto;
-        background: var(--ds-bg);
-      }
-
-      html[data-display-mode="modal"],
-      body[data-display-mode="modal"] {
-        height: 100%;
-        min-height: 100%;
-        overflow: hidden;
-      }
-
-      .widget {
-        overflow: clip;
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-      }
-
-      .widget:not([data-display-mode="fullscreen"]):not([data-display-mode="modal"]) {
-        padding: 16px;
-      }
-
-      header {
-        padding: 0 0 16px;
-        border-bottom: 0;
-        background: transparent;
-        box-shadow: none;
-      }
-
-      .detail-topbar,
-      .detail-title-section {
-        display: none;
-      }
-
-      .title-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-      }
-
-      h1 {
-        min-width: 0;
-        overflow: hidden;
-        margin: 0;
-        color: var(--ds-text-primary);
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 24px;
-        letter-spacing: -0.01px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .subtitle,
-      .source-note {
-        margin: 4px 0 0;
-        color: var(--ds-text-muted);
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-        max-width: 980px;
-      }
-
-      select:focus-visible,
-      button:focus-visible {
-        outline: 2px solid var(--ds-blue-bright);
-        outline-offset: 2px;
-      }
-
-      button,
-      input,
-      select {
-        font-synthesis: none;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-rendering: optimizeLegibility;
-      }
-
-      .top-bar-button,
-      .display-mode-button {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        min-height: 32px;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: var(--ds-radius-pill);
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-      }
-
-      .display-mode-button svg {
-        display: block;
-        width: 14px;
-        height: 14px;
-        fill: currentColor;
-        stroke: currentColor;
-      }
-
-      .display-mode-button-label {
-        white-space: nowrap;
-      }
-
-      .top-bar-button:hover,
-      .top-bar-button[aria-expanded="true"],
-      .display-mode-button:hover {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-text);
-      }
-
-      .detail-action-button {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        gap: 6px;
-        min-height: 32px;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: var(--ds-radius-pill);
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-        white-space: nowrap;
-      }
-
-      .detail-action-button:hover {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-text);
-      }
-
-      .detail-action-button svg {
-        display: block;
-        width: 16px;
-        height: 16px;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      .display-mode-button[disabled] {
-        cursor: default;
-        opacity: 0.45;
-      }
-
-      .controls {
-        display: flex;
-        flex-wrap: wrap;
-        align-content: flex-start;
-        align-items: center;
-        gap: 6px 10px;
-        padding: 0;
-        background: transparent;
-      }
-
-      .controls[hidden],
-      .controls:empty {
-        display: none !important;
-        border-bottom: 0;
-        padding: 0;
-      }
-
-      .control-group {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        gap: 6px;
-      }
-
-      .control-label {
-        color: var(--ds-text-muted);
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      select,
-      .toggle-button {
-        min-height: 32px;
-        border: 1px solid var(--ds-border-strong);
-        border-radius: var(--ds-radius-pill);
-        background: transparent;
-        color: var(--ds-text);
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      select {
-        max-width: min(280px, 62vw);
-        padding: 0 26px 0 8px;
-      }
-
-      .segmented {
-        display: inline-flex;
-        overflow: hidden;
-        border: 1px solid var(--ds-border-strong);
-        border-radius: var(--ds-radius-pill);
-      }
-
-      .segmented .toggle-button {
-        border: 0;
-        border-radius: 0;
-        padding: 0 9px;
-      }
-
-      .segmented .toggle-button + .toggle-button {
-        border-left: 1px solid var(--ds-border);
-      }
-
-      .toggle-button[aria-pressed="true"] {
-        background: var(--ds-code-container-bg);
-        font-weight: 500;
-      }
-
-      .app-toolbar {
-        display: none;
-      }
-
-      .view-mode-tabs {
-        display: inline-flex;
-        overflow: hidden;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: 999px;
-        background: transparent;
-      }
-
-      .view-mode-tab {
-        min-width: 38px;
-        min-height: 32px;
-        border: 0;
-        border-radius: 0;
-        padding: 0 13px;
-        background: transparent;
-        color: var(--ds-text-secondary);
-        cursor: pointer;
-        font: inherit;
-        font-size: 12px;
-        font-weight: 650;
-      }
-
-      .view-mode-tab + .view-mode-tab {
-        border-left: 1px solid var(--ds-border-subtle);
-      }
-
-      .view-mode-tab[aria-pressed="true"] {
-        background: var(--ds-text-primary);
-        color: var(--ds-bg);
-      }
-
-      .query-actions {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 0;
-        margin-left: auto;
-      }
-
-      .clear-button,
-      .chart-picker-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        height: 32px;
-        min-height: 32px;
-        border: 1px solid var(--ds-chip-border);
-        border-radius: var(--ds-radius-pill);
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-chip-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-      }
-
-      .field-wells {
-        display: contents;
-      }
-
-      .chart-settings-wells {
-        display: contents;
-      }
-
-      .chart-setting-control {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        gap: 6px;
-      }
-
-      .field-well {
-        position: relative;
-        display: inline-flex;
-        flex: 0 0 auto;
-      }
-
-      .field-pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        height: 32px;
-        min-height: 32px;
-        border: 1px solid var(--ds-chip-border);
-        border-radius: var(--ds-radius-pill);
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-chip-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-        white-space: nowrap;
-      }
-
-      .chart-picker-button:hover,
-      .chart-picker-button[aria-expanded="true"],
-      .clear-button:hover,
-      .field-pill:hover,
-      .field-pill[aria-expanded="true"] {
-        border-color: var(--ds-chip-border);
-        background: var(--ds-chip-hover-bg);
-        color: var(--ds-chip-hover-text);
-      }
-
-      .field-pill-role {
-        color: inherit;
-        font-size: 14px;
-        font-weight: 500;
-      }
-
-      .field-pill-field {
-        max-width: 140px;
-        overflow: hidden;
-        color: var(--ds-text);
-        font-weight: 400;
-        text-overflow: ellipsis;
-      }
-
-      .field-pill-modifier {
-        color: var(--ds-text-muted);
-        font-weight: 400;
-      }
-
-      .field-pill-caret {
-        color: var(--ds-text-muted);
-      }
-
-      .dropdown-caret {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        color: var(--ds-text-muted);
-      }
-
-      .dropdown-caret svg {
-        display: block;
-        width: 14px;
-        height: 14px;
-        stroke: currentColor;
-      }
-
-      .field-menu {
-        position: absolute;
-        top: calc(100% + 8px);
-        left: 0;
-        z-index: 6;
-        display: block;
-        width: max-content;
-        max-width: min(240px, calc(100vw - 24px));
-        border: 1px solid var(--ds-menu-border);
-        border-radius: var(--ds-dropdown-radius);
-        background: var(--ds-menu-bg);
-        box-shadow: var(--ds-shadow);
-        color: var(--ds-text);
-        font-size: 14px;
-        overflow: visible;
-      }
-
-      .menu-surface {
-        max-width: calc(100vw - 24px);
-        transform-origin: top left;
-        will-change: opacity, transform;
-      }
-
-      .menu-surface.opening {
-        animation: dashboard-menu-in 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
-      }
-
-      .menu-surface.closing {
-        pointer-events: none;
-        animation: dashboard-menu-out 90ms ease both;
-      }
-
-      .export-menu-list.menu-surface {
-        transform-origin: top right;
-      }
-
-      @keyframes dashboard-menu-in {
-        from {
-          opacity: 0;
-          transform: translateY(-4px) scale(0.98);
-        }
-
-        to {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-      }
-
-      @keyframes dashboard-menu-out {
-        from {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-
-        to {
-          opacity: 0;
-          transform: translateY(-3px) scale(0.98);
-        }
-      }
-
-      .field-menu-panel {
-        display: flex;
-        flex-direction: column;
-        width: 220px;
-        max-width: calc(100vw - 24px);
-        max-height: min(480px, calc(100vh - 190px));
-        min-width: 0;
-        min-height: 0;
-        padding: var(--ds-dropdown-padding);
-        overflow: auto;
-      }
-
-      .menu-search {
-        width: 100%;
-        min-height: var(--ds-dropdown-row-height);
-        margin-bottom: 6px;
-        border: 1px solid var(--ds-border);
-        border-radius: var(--ds-dropdown-row-radius);
-        padding: 0 10px;
-        background: var(--ds-surface-secondary);
-        color: var(--ds-text);
-        font: inherit;
-      }
-
-      .menu-scroll {
-        min-height: 0;
-        overflow: auto;
-      }
-
-      .menu-row,
-      .chart-option {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        width: 100%;
-        min-height: var(--ds-dropdown-row-height);
-        border: 0;
-        border-radius: var(--ds-dropdown-row-radius);
-        padding: 0 10px;
-        background: transparent;
-        color: var(--ds-text-secondary);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        text-align: left;
-      }
-
-      .menu-row:hover,
-      .menu-row.is-active,
-      .chart-option:hover,
-      .chart-option[aria-pressed="true"] {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-text);
-      }
-
-      .menu-row.is-danger {
-        color: var(--ds-red);
-      }
-
-      .menu-row.is-danger:hover {
-        background: var(--ds-red-bg);
-      }
-
-      .menu-row-value {
-        color: var(--ds-text-muted);
-      }
-
-      .menu-row-value-with-icon {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        color: var(--ds-text-muted);
-      }
-
-      .menu-row-value-with-icon svg {
-        flex: 0 0 auto;
-      }
-
-      .menu-submenu {
-        position: relative;
-      }
-
-      .menu-submenu-panel {
-        position: absolute;
-        top: -6px;
-        left: calc(100% + 8px);
-        z-index: 8;
-        display: none;
-        width: 220px;
-        max-width: calc(100vw - 24px);
-        max-height: min(420px, calc(100vh - 160px));
-        overflow: auto;
-        border: 1px solid var(--ds-menu-border);
-        border-radius: var(--ds-dropdown-radius);
-        padding: var(--ds-dropdown-padding);
-        background: var(--ds-menu-bg);
-        color: var(--ds-menu-text);
-        box-shadow: var(--ds-shadow);
-      }
-
-      .menu-submenu:hover > .menu-submenu-panel,
-      .menu-submenu:focus-within > .menu-submenu-panel,
-      .menu-submenu.is-open > .menu-submenu-panel {
-        display: grid;
-      }
-
-      .menu-submenu-trigger[aria-expanded="true"],
-      .menu-submenu:hover > .menu-submenu-trigger,
-      .menu-submenu:focus-within > .menu-submenu-trigger {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-text);
-      }
-
-      .menu-row > svg,
-      .menu-row svg {
-        display: block;
-        flex: 0 0 auto;
-        width: 14px;
-        height: 14px;
-        stroke: currentColor;
-      }
-
-      .menu-heading {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        min-height: 30px;
-        padding: 0 10px;
-        color: var(--ds-text-muted);
-        font-size: 12px;
-        font-weight: 500;
-        letter-spacing: 0.02em;
-        text-transform: uppercase;
-      }
-
-      .menu-divider {
-        height: 1px;
-        margin: 6px 0;
-        background: var(--ds-border);
-      }
-
-      .menu-field-label {
-        display: inline-flex;
-        align-items: center;
-        gap: 9px;
-        min-width: 0;
-      }
-
-      .menu-field-icon {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        color: var(--ds-text-muted);
-      }
-
-      .menu-field-icon svg,
-      .field-icon svg,
-      .chart-picker-button svg,
-      .filter-menu-button svg,
-      .filter-menu-item svg,
-      .export-menu-item svg {
-        display: block;
-        width: 14px;
-        height: 14px;
-        stroke: currentColor;
-      }
-
-      @media (max-width: 640px) {
-        .menu-submenu-panel {
-          position: static;
-          width: 100%;
-          max-height: none;
-          margin: 2px 0 6px;
-          border-color: var(--ds-border-subtle);
-          box-shadow: none;
-        }
-      }
-
-      .clear-button {
-        flex: 0 0 auto;
-        color: var(--ds-text-secondary);
-      }
-
-      .query-status {
-        overflow: hidden;
-        max-width: 320px;
-        color: var(--ds-text-muted);
-        font-size: 12px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .widget:not([data-display-mode="fullscreen"]):not([data-display-mode="modal"]) .query-status {
-        display: none;
-      }
-
-      .chart-picker {
-        position: relative;
-      }
-
-      .chart-picker-popover {
-        position: absolute;
-        top: calc(100% + 8px);
-        left: 0;
-        z-index: 6;
-        width: min(220px, calc(100vw - 24px));
-        max-height: min(560px, calc(100vh - 190px));
-        overflow: auto;
-        border: 1px solid var(--ds-menu-border);
-        border-radius: var(--ds-dropdown-radius);
-        padding: var(--ds-dropdown-padding);
-        background: var(--ds-menu-bg);
-        box-shadow: var(--ds-shadow);
-      }
-
-      .export-menu {
-        position: relative;
-        display: inline-flex;
-      }
-
-      .export-menu-list {
-        position: absolute;
-        z-index: 40;
-        top: calc(100% + 6px);
-        right: 0;
-        display: grid;
-        min-width: 164px;
-        max-width: calc(100vw - 24px);
-        padding: 6px;
-        border: 1px solid var(--ds-menu-border);
-        border-radius: var(--ds-radius-sm);
-        background: var(--ds-menu-bg);
-        color: var(--ds-menu-text);
-        box-shadow: var(--ds-shadow);
-      }
-
-      .export-menu-item {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        justify-content: flex-start;
-        min-height: 34px;
-        border: 0;
-        border-radius: 6px;
-        padding: 0 10px;
-        background: transparent;
-        color: var(--ds-menu-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
-        text-align: left;
-        white-space: nowrap;
-      }
-
-      .export-menu-item:hover,
-      .export-menu-item:focus-visible {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-menu-text);
-      }
-
-      .filter-menu {
-        position: relative;
-        display: inline-flex;
-        flex: 0 0 auto;
-        width: fit-content;
-      }
-
-      .filter-menu-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        height: 32px;
-        min-height: 32px;
-        border: 1px solid var(--ds-chip-border);
-        border-radius: var(--ds-radius-pill);
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-chip-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-        white-space: nowrap;
-      }
-
-      .filter-menu-button:hover,
-      .filter-menu-button[aria-expanded="true"] {
-        border-color: var(--ds-chip-border);
-        background: var(--ds-chip-hover-bg);
-        color: var(--ds-chip-hover-text);
-      }
-
-      .filter-menu-label {
-        color: inherit;
-      }
-
-      .filter-menu-value {
-        overflow: hidden;
-        max-width: min(320px, 42vw);
-        color: var(--ds-text);
-        text-overflow: ellipsis;
-      }
-
-      .filter-menu-list {
-        position: absolute;
-        z-index: 20;
-        top: calc(100% + 6px);
-        left: 0;
-        display: grid;
-        min-width: max(100%, 160px);
-        max-width: min(220px, calc(100vw - 32px));
-        padding: 6px;
-        border: 1px solid var(--ds-menu-border);
-        border-radius: var(--ds-radius-sm);
-        background: var(--ds-menu-bg);
-        color: var(--ds-menu-text);
-        box-shadow: var(--ds-shadow);
-      }
-
-      .filter-menu-item {
-        display: flex;
-        gap: 12px;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 34px;
-        border: 0;
-        border-radius: 6px;
-        padding: 0 10px;
-        background: transparent;
-        color: var(--ds-menu-text);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 20px;
-        text-align: left;
-        white-space: nowrap;
-      }
-
-      .filter-menu-item:hover,
-      .filter-menu-item[aria-checked="true"] {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-menu-text);
-      }
-
-      .chart-picker-section + .chart-picker-section {
-        margin-top: 6px;
-        border-top: 1px solid var(--ds-border);
-        padding-top: 6px;
-      }
-
-      .chart-picker-heading {
-        margin: 6px 14px 8px;
-        color: var(--ds-text-muted);
-        font-size: 12px;
-        font-weight: 500;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-      }
-
-      .chart-option-grid {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-        gap: 0;
-      }
-
-      .chart-option {
-        min-width: 0;
-        justify-content: flex-start;
-        padding: 6px 10px;
-      }
-
-      .chart-option[aria-pressed="true"] {
-        color: var(--ds-text);
-      }
-
-      .chart-option-preview {
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        width: 24px;
-        height: 24px;
-        color: var(--ds-blue-bright);
-      }
-
-      .chart-option-label {
-        min-width: 0;
-        flex: 1 1 auto;
-        line-height: 20px;
-        overflow-wrap: anywhere;
-        white-space: normal;
-      }
-
-      .chart-option-check {
-        flex: 0 0 auto;
-        margin-left: auto;
-        color: var(--ds-text-muted);
-        visibility: hidden;
-      }
-
-      .chart-option-check svg {
-        display: block;
-        width: 16px;
-        height: 16px;
-        stroke: currentColor;
-      }
-
-      .chart-option[aria-pressed="true"] .chart-option-check {
-        visibility: visible;
-      }
-
-      .chart-shell {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        gap: 0;
-        padding: 0;
-      }
-
-      .chart-canvas-wrap {
-        position: relative;
-        flex: 1 1 auto;
-        width: 100%;
-        height: auto;
-        min-height: 0;
-        overflow: visible;
-        overscroll-behavior: contain;
-        touch-action: pan-y;
-      }
-
-      .chart-canvas {
-        display: block;
-        width: 100% !important;
-        height: 100% !important;
-      }
-
-      .recharts-chart-wrap .recharts-cartesian-grid line {
-        stroke: var(--ds-chart-grid);
-      }
-
-      .recharts-chart-wrap .recharts-text,
-      .recharts-chart-wrap .recharts-label {
-        fill: var(--ds-chart-text-muted);
-        font-family: var(--ds-chart-font-family);
-        font-size: 11px;
-      }
-
-      .recharts-tooltip {
-        display: grid;
-        gap: 5px;
-        min-width: 140px;
-        max-width: 280px;
-        padding: 9px 10px;
-        border: 1px solid var(--ds-chart-tooltip-border);
-        border-radius: 8px;
-        background: var(--ds-chart-tooltip-bg);
-        color: var(--ds-chart-text);
-        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
-        font: 12px/1.35 var(--ds-chart-font-family);
-      }
-
-      .recharts-tooltip strong {
-        font-size: 12px;
-        font-weight: 600;
-      }
-
-      .recharts-tooltip-row {
-        display: grid;
-        grid-template-columns: 8px 1fr;
-        align-items: center;
-        gap: 7px;
-        color: var(--ds-chart-text-muted);
-      }
-
-      .recharts-tooltip-row i {
-        width: 8px;
-        height: 8px;
-        border-radius: 999px;
-      }
-
-      .recharts-custom-panel {
-        height: 100%;
-        min-height: 260px;
-        overflow: auto;
-      }
-
-      .leaderboard-panel {
-        display: grid;
-        grid-auto-rows: minmax(0, 1fr);
-        align-content: stretch;
-        gap: 8px;
-        height: 100%;
-      }
-
-      .leaderboard-row {
-        position: relative;
-        display: grid;
-        grid-template-columns: minmax(0, 1fr) auto;
-        min-height: 0;
-        gap: 8px;
-        align-items: center;
-        overflow: hidden;
-        padding: 4px 12px;
-        border-radius: 999px;
-        color: var(--ds-text);
-        font-size: 14px;
-        letter-spacing: -0.14px;
-        line-height: 20px;
-      }
-
-      .leaderboard-row span {
-        position: relative;
-        z-index: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .leaderboard-row b {
-        position: relative;
-        z-index: 1;
-        font-weight: 500;
-        font-variant-numeric: tabular-nums;
-        font-feature-settings: "tnum" 1, "lnum" 1;
-      }
-
-      .leaderboard-row i {
-        position: absolute;
-        top: 0;
-        right: auto;
-        bottom: 0;
-        left: 0;
-        max-width: 100%;
-        height: 100%;
-        border-radius: 999px;
-        background: var(--ds-surface-tertiary, #f3f3f3) !important;
-      }
-
-      .heatmap-grid {
-        display: grid;
-        align-items: stretch;
-        gap: 4px;
-        min-width: 100%;
-        font-size: 11px;
-      }
-
-      .heatmap-grid b,
-      .heatmap-grid strong {
-        overflow: hidden;
-        color: var(--ds-text-muted);
-        font-weight: 500;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .heatmap-cell {
-        min-height: 24px;
-        border: 1px solid color-mix(in srgb, var(--ds-border) 80%, transparent);
-        border-radius: 4px;
-      }
-
-      .boxplot-panel {
-        display: grid;
-        align-content: center;
-        gap: 12px;
-      }
-
-      .boxplot-row {
-        display: grid;
-        grid-template-columns: minmax(72px, 1fr) minmax(90px, 2fr) auto auto;
-        align-items: center;
-        gap: 10px;
-        font-size: 12px;
-      }
-
-      .boxplot-row i {
-        height: 8px;
-        border-radius: 999px;
-      }
-
-      .boxplot-row b {
-        font-weight: 600;
-      }
-
-      .boxplot-row em {
-        color: var(--ds-text-muted);
-        font-style: normal;
-      }
-
-      .app-shell {
-        min-width: 0;
-      }
-
-      .app-sidebar,
-      .bottom-split,
-      .split-resizer,
-      .data-preview,
-      .sql-preview {
-        display: none;
-      }
-
-      .widget:not([data-display-mode="fullscreen"]):not([data-display-mode="modal"]) .controls {
-        display: none !important;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) {
-        display: flex;
-        height: auto;
-        min-height: 100vh;
-        max-height: none;
-        width: 100%;
-        max-width: none;
-        margin: 0 auto;
-        padding: 0;
-        overflow: visible;
-        border: 0;
-        border-radius: 0;
-        background: var(--ds-bg);
-        box-shadow: none;
-        flex-direction: column;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) header {
-        flex: 0 0 auto;
-        position: sticky;
-        top: 0;
-        z-index: 50;
-        margin: 0;
-        padding: 0;
-        border-bottom: 1px solid var(--ds-border-subtle);
-        background: var(--ds-bg);
-        box-shadow: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .compact-title-row,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) header > .subtitle {
-        display: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .detail-topbar {
-        display: flex;
-        position: sticky;
-        top: 0;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        z-index: 60;
-        min-height: 56px;
-        padding: 12px;
-        background: var(--ds-bg);
-      }
-
-      .widget[data-display-mode="modal"] .detail-topbar {
-        display: none;
-      }
-
-      .detail-topbar-actions {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 0;
-      }
-
-      .detail-run-time {
-        overflow: hidden;
-        max-width: 220px;
-        color: var(--ds-text-secondary);
-        font-size: 14px;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .app-shell {
-        display: block;
-        flex: 1 1 auto;
-        height: auto;
-        min-height: 0;
-        overflow: visible;
-        padding: 0;
-        background: var(--ds-bg);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .app-sidebar {
-        display: none;
-      }
-
-      .widget[data-display-mode="modal"],
-      .widget[data-display-mode="modal"] .app-shell {
-        height: 100%;
-        min-height: 100%;
-        overflow: hidden;
-      }
-
-      .widget[data-display-mode="modal"] .app-shell {
-        display: flex;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .app-main {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        min-width: 0;
-        width: 100%;
-        height: auto;
-        min-height: calc(100vh - 57px);
-        overflow: visible;
-        border: 0;
-        border-radius: 0;
-        background: var(--ds-bg);
-        box-shadow: none;
-      }
-
-      .widget[data-display-mode="modal"] .app-main {
-        height: 100%;
-        min-height: 0;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .detail-title-section {
-        display: flex;
-        flex: 0 0 auto;
-        flex-direction: column;
-        gap: 8px;
-        padding: 24px 32px 16px;
-      }
-
-      .detail-title-row {
-        display: flex;
-        width: 100%;
-        min-width: 0;
-        align-items: flex-start;
-        justify-content: space-between;
-        gap: 16px;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .detail-title-section h1 {
-        flex: 1 1 auto;
-        min-width: 0;
-        margin: 0;
-        color: var(--ds-text-primary);
-        font-size: 28px;
-        font-weight: 500;
-        line-height: 34px;
-        letter-spacing: -0.04px;
-      }
-
-      .modal-title-close-button {
-        display: none;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        margin-left: auto;
-        margin-top: 2px;
-        border: 0;
-        border-radius: var(--ds-radius-pill);
-        background: transparent;
-        color: var(--ds-text-secondary);
-        cursor: pointer;
-      }
-
-      .widget[data-display-mode="modal"] .modal-title-close-button {
-        display: inline-flex;
-      }
-
-      .modal-title-close-button:hover {
-        background: var(--ds-menu-hover-bg);
-        color: var(--ds-text-primary);
-      }
-
-      .modal-title-close-button:focus-visible {
-        outline: 2px solid var(--ds-blue-bright);
-        outline-offset: 2px;
-      }
-
-      .detail-subtitle {
-        margin: 0;
-        color: var(--ds-text-secondary);
-        font-size: 14px;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .app-toolbar {
-        display: none;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        min-height: 58px;
-        border-bottom: 1px solid var(--ds-border-subtle);
-        padding: 12px 16px;
-        background: var(--ds-bg);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .view-mode-tabs {
-        display: none;
-      }
-
-      .app-panel {
-        padding: 16px;
-      }
-
-      .app-panel + .app-panel {
-        border-top: 1px solid var(--ds-border-subtle);
-      }
-
-      .app-panel-heading {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 10px;
-        color: var(--ds-text-primary);
-        font-size: 13px;
-        font-weight: 760;
-      }
-
-      .source-details {
-        display: grid;
-        gap: 10px;
-        margin-top: 12px;
-      }
-
-      .source-row {
-        display: grid;
-        grid-template-columns: 58px minmax(0, 1fr);
-        gap: 10px;
-        color: var(--ds-text-muted);
-        font-size: 12px;
-        line-height: 1.35;
-      }
-
-      .source-row strong {
-        color: var(--ds-text-primary);
-        font-weight: 650;
-      }
-
-      .source-row-list {
-        display: grid;
-        gap: 4px;
-      }
-
-      .source-row-list span {
-        overflow-wrap: anywhere;
-      }
-
-      .source-row-table {
-        align-items: start;
-      }
-
-      .source-preview-shell {
-        max-height: 220px;
-        overflow: auto;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: 6px;
-        background: var(--ds-surface);
-      }
-
-      .source-preview-table {
-        width: max-content;
-        min-width: 100%;
-        border-collapse: collapse;
-        color: var(--ds-text-primary);
-        font-size: 11.5px;
-      }
-
-      .source-preview-table th,
-      .source-preview-table td {
-        max-width: 220px;
-        padding: 6px 8px;
-        border-bottom: 1px solid var(--ds-border-subtle);
-        text-align: left;
-        vertical-align: top;
-        overflow-wrap: anywhere;
-      }
-
-      .source-preview-table th {
-        position: sticky;
-        top: 0;
-        background: var(--ds-surface-secondary);
-        color: var(--ds-text-muted);
-        font-weight: 700;
-      }
-
-      .source-code {
-        max-height: 260px;
-        margin-top: 3px;
-        border-radius: 6px;
-        padding: 10px;
-        background: var(--ds-surface-secondary);
-        font-size: 11.5px;
-        line-height: 1.45;
-      }
-
-      .source-disclosure {
-        display: block;
-      }
-
-      .source-disclosure summary {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        min-height: 32px;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: 7px;
-        padding: 0 10px;
-        background: var(--ds-surface-secondary);
-        color: var(--ds-text-primary);
-        cursor: pointer;
-        font-size: 12px;
-        font-weight: 700;
-        list-style: none;
-      }
-
-      .source-disclosure summary::-webkit-details-marker {
-        display: none;
-      }
-
-      .source-disclosure summary::after {
-        color: var(--ds-text-muted);
-        content: "Show";
-        font-size: 11px;
-        font-weight: 700;
-      }
-
-      .source-disclosure[open] summary::after {
-        content: "Hide";
-      }
-
-      .app-icon-button {
-        border: 0;
-        border-radius: 5px;
-        padding: 0 4px;
-        background: transparent;
-        color: var(--ds-text-muted);
-        cursor: default;
-        font: inherit;
-        font-size: 18px;
-        line-height: 1;
-      }
-
-      .field-filter {
-        width: 100%;
-        min-height: 34px;
-        margin: 14px 0 12px;
-        border: 1px solid var(--ds-border-subtle);
-        border-radius: 8px;
-        padding: 0 9px;
-        background: var(--ds-surface-secondary);
-        color: var(--ds-text);
-        font: inherit;
-        font-size: 12px;
-      }
-
-      .field-group {
-        margin-top: 14px;
-      }
-
-      .field-group-title {
-        margin: 0 0 7px;
-        color: var(--ds-text-muted);
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.02em;
-        text-transform: uppercase;
-      }
-
-      .field-list {
-        display: grid;
-        gap: 3px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
-      .field-item {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 0;
-        border-radius: 10px;
-        padding: 7px 9px;
-        color: var(--ds-text-secondary);
-        font-size: 14px;
-      }
-
-      .field-item.is-active {
-        background: var(--ds-surface-secondary);
-        color: var(--ds-text);
-      }
-
-      .field-icon {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        width: 18px;
-        color: var(--ds-text-muted);
-        text-align: center;
-        font-size: 14px;
-      }
-
-      .field-label {
-        overflow: hidden;
-        min-width: 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .chart-shell {
-        flex: 0 0 auto;
-        height: clamp(360px, 48vw, 520px);
-        min-height: 360px;
-        overflow: visible;
-        padding: 16px 32px 24px;
-        background: var(--ds-bg);
-      }
-
-      .widget[data-display-mode="modal"] .chart-shell {
-        flex: 1 1 auto;
-        height: 100%;
-        min-height: 0;
-      }
-
-      .chart-shell:focus,
-      .chart-canvas-wrap:focus,
-      .chart-canvas-wrap:focus-visible {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-      }
-
-      .chart-shell:focus-visible,
-      .chart-canvas-wrap:focus-visible {
-        outline-color: var(--ds-blue-bright);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .controls {
-        display: flex;
-        position: sticky;
-        top: 56px;
-        z-index: 4;
-        flex: 0 0 auto;
-        align-content: flex-start;
-        min-height: auto;
-        align-items: center;
-        gap: 6px 8px;
-        padding: 8px 32px;
-        background: var(--ds-bg);
-      }
-
-      .widget[data-display-mode="modal"] .controls {
-        top: 0;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .control-label {
-        display: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .chart-picker-button,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .field-pill,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .clear-button {
-        height: 32px;
-        min-height: 32px;
-        border-color: var(--ds-chip-border);
-        padding: 0 12px;
-        color: var(--ds-chip-text);
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .clear-button {
-        border-color: transparent;
-        color: var(--ds-text-primary);
-      }
-
-      .chart-legend-shell {
-        min-height: 36px;
-        border-bottom: 0;
-        padding: 8px 16px 10px;
-        background: transparent;
-        box-shadow: none;
-      }
-
-      .chart-legend-shell.is-empty .legend-list {
-        visibility: hidden;
-      }
-
-      .chart-legend-shell[hidden] {
-        display: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .chart-legend-shell {
-        display: none !important;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer {
-        display: none;
-        grid-row: 3;
-        align-items: center;
-        justify-content: center;
-        min-height: 12px;
-        border: 0;
-        background:
-          linear-gradient(
-            to bottom,
-            transparent calc(50% - 0.5px),
-            var(--ds-border) calc(50% - 0.5px),
-            var(--ds-border) calc(50% + 0.5px),
-            transparent calc(50% + 0.5px)
-          ),
-          transparent;
-        cursor: row-resize;
-        touch-action: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer::before {
-        width: 32px;
-        height: 3px;
-        border-radius: var(--ds-radius-pill);
-        background: var(--ds-border-strong);
-        opacity: 0.42;
-        transition:
-          background 120ms ease,
-          opacity 120ms ease,
-          width 120ms ease;
-        content: "";
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer:hover,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer:focus-visible,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]).is-resizing .split-resizer {
-        background:
-          linear-gradient(
-            to bottom,
-            transparent calc(50% - 0.5px),
-            var(--ds-border-strong) calc(50% - 0.5px),
-            var(--ds-border-strong) calc(50% + 0.5px),
-            transparent calc(50% + 0.5px)
-          ),
-          var(--ds-surface-secondary);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer:hover::before,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .split-resizer:focus-visible::before,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]).is-resizing .split-resizer::before {
-        width: 44px;
-        background: var(--ds-blue-bright);
-        opacity: 0.75;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .bottom-split {
-        display: flex;
-        flex: 0 0 auto;
-        flex-direction: column;
-        gap: 16px;
-        min-height: 0;
-        overflow: visible;
-        padding: 16px 32px 32px;
-        background: var(--ds-bg);
-      }
-
-      .widget[data-display-mode="modal"] .bottom-split {
-        display: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .bottom-split.has-sql {
-        grid-template-columns: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview {
-        display: block;
-        flex: 0 0 auto;
-        height: auto;
-        min-height: 0;
-        overflow: visible;
-        width: 100%;
-        background: var(--ds-bg);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview .shared-table-shell,
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview .table-wrap {
-        width: 100%;
-        max-width: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview .table-wrap {
-        overflow-x: auto;
-        overflow-y: clip;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview .data-table {
-        width: 100%;
-        min-width: 720px;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .data-preview .data-table td {
-        white-space: nowrap;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .sql-preview {
-        display: none;
-        min-width: 0;
-        flex: 0 0 auto;
-        height: auto;
-        min-height: 0;
-        overflow: visible;
-        border-left: 0;
-        background: var(--ds-bg);
-        flex-direction: column;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .bottom-split[data-data-mode="query"] .data-preview {
-        display: none;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .bottom-split[data-data-mode="query"] .sql-preview {
-        display: flex;
-      }
-
-      .data-section-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 16px;
-        min-height: 32px;
-      }
-
-      .data-section-name {
-        display: inline-flex;
-        align-items: center;
-        min-width: 0;
-        color: var(--ds-text);
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 24px;
-        letter-spacing: -0.01px;
-      }
-
-      .data-mode-segmented {
-        position: relative;
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        height: 32px;
-        overflow: hidden;
-        border: 0;
-        border-radius: var(--ds-radius-pill);
-        padding: 2px;
-        background: var(--ds-segmented-bg);
-      }
-
-      .data-mode-segmented::before {
-        position: absolute;
-        top: 2px;
-        bottom: 2px;
-        left: 2px;
-        z-index: 0;
-        width: calc((100% - 4px) / 2);
-        border-radius: var(--ds-radius-pill);
-        background: var(--ds-segmented-active-bg);
-        box-shadow: var(--ds-segmented-active-shadow);
-        content: "";
-        transform: translateX(0);
-        transition:
-          transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
-          background-color 160ms ease;
-      }
-
-      .data-mode-segmented[data-active-mode="query"]::before {
-        transform: translateX(100%);
-      }
-
-      .data-mode-option {
-        position: relative;
-        z-index: 1;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-height: 28px;
-        border: 0;
-        border-radius: 999px;
-        padding: 0 12px;
-        background: transparent;
-        color: var(--ds-text-secondary);
-        cursor: pointer;
-        font: inherit;
-        font-size: 14px;
-        line-height: 22px;
-        letter-spacing: -0.14px;
-      }
-
-      .data-mode-option[aria-pressed="true"] {
-        color: var(--ds-text);
-        font-weight: 500;
-      }
-
-      .sql-preview .source-code {
-        flex: 1 1 auto;
-        max-height: none;
-        min-height: 0;
-        margin: 0;
-        border: 0;
-        border-radius: var(--ds-radius-panel);
-        padding: 26px;
-        background: var(--ds-code-container-bg);
-        color: var(--ds-text);
-        font-size: 14px;
-        line-height: 1.5;
-        letter-spacing: -0.14px;
-      }
-
-      .preview-caption {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        border-bottom: 1px solid var(--ds-border);
-        padding: 8px var(--ds-panel-padding);
-        color: var(--ds-text-secondary);
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 18px;
-      }
-
-      .preview-count {
-        font-weight: 500;
-      }
-
-      .data-preview table {
-        min-width: 720px;
-      }
-
-      .data-preview tbody tr {
-        transition: background-color 120ms ease;
-      }
-
-      .data-preview tbody tr:hover {
-        background: var(--ds-menu-hover-bg);
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) :is(.table-scroll) {
-        width: 100%;
-        max-width: 100%;
-        height: auto;
-        overflow-x: auto;
-        overflow-y: visible;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) tbody tr:nth-child(even) {
-        background: transparent;
-      }
-
-      @media (max-width: 1024px) {
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .app-shell {
-          overflow-x: hidden;
-          overflow-y: auto;
-        }
-
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .sql-preview {
-          border-left: 0;
-        }
-
-        .query-status {
-          display: none;
-        }
-      }
-
-      @media (max-width: 640px) {
-        :root {
-          --ds-gutter: 24px;
-          --ds-panel-padding: 16px;
-        }
-
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .detail-title-section,
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .controls,
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .chart-shell,
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .bottom-split {
-          padding-right: 16px;
-          padding-left: 16px;
-        }
-
-        .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .detail-title-section h1 {
-          font-size: 22px;
-          line-height: 28px;
-        }
-
-        .data-section-header {
-          align-items: flex-start;
-          flex-direction: column;
-        }
-
-      }
-
-      svg {
-        display: block;
-        width: 100%;
-        height: auto;
-        overflow: visible;
-      }
-
-      .widget:is([data-display-mode="fullscreen"], [data-display-mode="modal"]) .chart-canvas-wrap {
-        min-height: 0;
-        height: 100%;
-      }
-
-      .axis-label,
-      .tick,
-      .legend-item,
-      .point-label {
-        fill: var(--ds-chart-text-muted);
-        color: var(--ds-chart-text-muted);
-        font-size: 12px;
-      }
-
-      .grid-line {
-        stroke: var(--grid);
-        stroke-width: 1;
-      }
-
-      .axis {
-        stroke: var(--axis);
-        stroke-width: 1;
-      }
-
-      .category-label {
-        fill: var(--ds-text);
-        font-size: 14px;
-        font-weight: 400;
-      }
-
-      .value-tick {
-        fill: var(--ds-text-tertiary);
-        font-size: 12px;
-        font-weight: 400;
-      }
-
-      .stack-segment {
-        shape-rendering: crispEdges;
-        stroke: var(--ds-surface);
-        stroke-width: 2;
-      }
-
-      .empty {
-        display: grid;
-        min-height: 240px;
-        align-content: center;
-        justify-items: center;
-        gap: 6px;
-        border: 1px dashed var(--ds-border-strong);
-        border-radius: var(--ds-radius-panel);
-        padding: 28px;
-        background: var(--ds-surface-secondary);
-        font-size: 13px;
-        text-align: center;
-      }
-
-      .empty strong {
-        color: var(--ds-text);
-        font-size: 14px;
-        font-weight: 650;
-      }
-
-      .empty span {
-        max-width: 520px;
-        color: var(--ds-text-muted);
-        line-height: 1.45;
-      }
-
-      .table-scroll {
-        width: 100%;
-        max-width: 100%;
-        overflow-x: auto;
-        overflow-y: clip;
-      }
-
-      table {
-        width: max-content;
-        min-width: 100%;
-        border-collapse: collapse;
-        color: var(--ds-text);
-        font-size: 14px;
-        table-layout: auto;
-      }
-
-      th,
-      td {
-        border-bottom: 1px solid var(--ds-border-subtle);
-        padding: 8px 16px 8px 0;
-        text-align: left;
-        vertical-align: top;
-        white-space: nowrap;
-      }
-
-      th {
-        position: relative;
-        height: 30px;
-        background: transparent;
-        color: var(--ds-text-tertiary);
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 18px;
-      }
-
-      tbody tr:nth-child(even) {
-        background: transparent;
-      }
-
-      tbody tr:last-child td {
-        border-bottom: 0;
-      }
-
-      td.numeric,
-      th.numeric {
-        text-align: right;
-        font-variant-numeric: tabular-nums;
-        font-feature-settings: "tnum" 1, "lnum" 1;
-      }
-
-      td {
-        color: var(--ds-text-secondary);
-        font-size: 14px;
-        line-height: 22px;
-        white-space: normal;
-      }
-
-      td:first-child {
-        color: var(--ds-text-primary);
-      }
-
-      .legend-list,
-      .notes,
-      .metrics {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px 16px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
-      .legend-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        border: 0;
-        padding: 0;
-        background: transparent;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-      }
-
-      .legend-item {
-        font-weight: 650;
-      }
-
-      .legend-button[aria-pressed="false"] {
-        opacity: 0.42;
-        text-decoration: line-through;
-      }
-
-      .legend-reset-button {
-        color: var(--ds-blue-bright);
-        font-weight: 650;
-      }
-
-      .swatch {
-        width: 7px;
-        height: 7px;
-        border-radius: 99px;
-        background: currentColor;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        *,
-        *::before,
-        *::after {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          scroll-behavior: auto !important;
-          transition-duration: 0.01ms !important;
-        }
-      }