create-yss-spec 1.1.2 → 1.1.4

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

@@ -0,0 +1,2117 @@
+* {
+        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;
+        }
+      }