@starci/grammar 0.3.0 → 0.4.2

package/dist/common/styles.css

@@ -1,2 +1,1566 @@
-/* Establish one deterministic cascade without owning product colour or business meaning. */
-@layer starci-grammar-common, starci-grammar-core, starci-grammar-extension;
+/* Common owns only universal structure/scales. Families supply material DNA. */
+@layer starci-grammar-common, starci-grammar-core, starci-grammar-heritage, starci-grammar-offset-pop;
+
+@layer starci-grammar-common {
+    .grammar-common-root {
+        --grammar-inline-gap: 0.5rem;
+        --grammar-row-gap: 0.75rem;
+        --grammar-section-gap: 1rem;
+        --grammar-region-gap: 1.5rem;
+        --grammar-page-inset: clamp(1rem, 3vw, 2rem);
+        min-width: 0;
+    }
+
+    .grammar-common-root,
+    .grammar-common-root::before,
+    .grammar-common-root::after,
+    .grammar-common-root *,
+    .grammar-common-root *::before,
+    .grammar-common-root *::after {
+        box-sizing: border-box;
+    }
+
+    /* Grammar scroll remains operable without adding persistent chrome to a composition. */
+    .grammar-common-root,
+    .grammar-common-root * {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+
+    .grammar-common-root::-webkit-scrollbar,
+    .grammar-common-root *::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    .starci-core-page-container {
+        width: min(100%, var(--starci-core-page-measure, 80rem));
+        min-width: 0;
+        margin-inline: auto;
+        padding-inline: var(--starci-core-page-inset, clamp(1rem, 3vw, 2rem));
+    }
+
+    .starci-core-page-container[data-grammar-page-measure="reading"] {
+        width: min(100%, var(--starci-core-reading-measure, 72ch));
+    }
+
+    .starci-core-page-container[data-grammar-page-measure="full"] {
+        width: 100%;
+    }
+
+    .starci-core-section-header {
+        display: flex;
+        min-width: 0;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: var(--starci-core-region-gap, 1.5rem);
+    }
+
+    .starci-core-section-header-copy {
+        display: flex;
+        min-width: 0;
+        flex: 1;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .starci-core-section-title {
+        margin: 0;
+        max-width: 100%;
+        color: var(--starci-core-foreground, var(--foreground, CanvasText));
+        font-size: clamp(1.25rem, 1rem + 0.75cqi, 1.75rem);
+        font-weight: 700;
+        letter-spacing: -0.025em;
+        line-height: 1.2;
+        overflow-wrap: anywhere;
+        text-wrap: balance;
+    }
+
+    .starci-core-section-eyebrow {
+        color: var(--starci-core-accent, var(--accent, Highlight));
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.08em;
+        line-height: 1.25rem;
+        text-transform: uppercase;
+    }
+
+    .starci-core-section-description,
+    .starci-core-media-caption {
+        color: var(--starci-core-muted, var(--muted, GrayText));
+        font-size: 0.875rem;
+        line-height: 1.5;
+        overflow-wrap: anywhere;
+    }
+
+    .starci-core-section-action {
+        flex: none;
+    }
+
+    .starci-core-visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .starci-core-surface-copy-group {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .starci-core-surface-copy-group[data-grammar-copy-density="comfortable"] {
+        gap: 0.75rem;
+    }
+
+    .starci-core-included-mark {
+        display: inline-block;
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
+        color: inherit;
+        vertical-align: text-bottom;
+    }
+
+    .starci-core-media-frame {
+        display: flex;
+        min-width: 0;
+        margin: 0;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .starci-core-media-viewport {
+        position: relative;
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid var(--starci-core-border, var(--border, GrayText));
+        border-radius: var(--starci-core-surface-radius, 1rem);
+        background: var(--starci-core-surface-secondary, var(--surface-secondary, Canvas));
+    }
+
+    .starci-core-media-frame[data-grammar-media-aspect="landscape"] .starci-core-media-viewport { aspect-ratio: 16 / 10; }
+    .starci-core-media-frame[data-grammar-media-aspect="portrait"] .starci-core-media-viewport { aspect-ratio: 4 / 5; }
+    .starci-core-media-frame[data-grammar-media-aspect="square"] .starci-core-media-viewport { aspect-ratio: 1; }
+
+    .starci-core-media-viewport > :where(img, picture, video, svg) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .starci-core-media-frame[data-grammar-media-fit="contain"] .starci-core-media-viewport > :where(img, picture, video, svg) {
+        object-fit: contain;
+    }
+
+    .starci-core-media-frame[data-grammar-media-treatment="plain"] .starci-core-media-viewport {
+        border-color: transparent;
+        background: transparent;
+    }
+
+    .starci-core-primary-rail-container {
+        container: starci-core-primary-rail / inline-size;
+        min-width: 0;
+    }
+
+    .starci-core-primary-rail-layout {
+        display: grid;
+        min-width: 0;
+        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
+        gap: var(--starci-core-region-gap, 1.5rem);
+    }
+
+    .starci-core-primary-rail-layout[data-grammar-layout-rail="absent"] {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .starci-core-primary-rail-layout[data-grammar-layout-rail-width="compact"] { grid-template-columns: minmax(0, 1fr) minmax(14rem, 16rem); }
+    .starci-core-primary-rail-layout[data-grammar-layout-rail-width="wide"] { grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem); }
+    .starci-core-primary-rail-layout[data-grammar-layout-align="start"] { align-items: start; }
+    .starci-core-primary-rail-layout[data-grammar-layout-align="stretch"] { align-items: stretch; }
+
+    .starci-core-primary-region,
+    .starci-core-rail-region {
+        min-width: 0;
+    }
+
+    .starci-core-form-page {
+        display: flex;
+        min-height: 100dvh;
+        padding: 1.5rem 1rem;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+    }
+
+    .starci-core-form-scroll-viewport {
+        width: 100%;
+        max-height: calc(100dvh - 3rem);
+        overscroll-behavior: contain;
+    }
+
+    .starci-core-form-surface {
+        display: flex;
+        width: min(100%, var(--starci-core-form-measure, 30rem));
+        min-width: 0;
+        flex-direction: column;
+        gap: var(--starci-core-section-gap, 0.75rem);
+    }
+
+    .starci-core-form-surface--compact {
+        width: min(100%, var(--starci-core-form-compact-measure, 28rem));
+    }
+
+    .starci-core-form-surface > .card,
+    .starci-core-form-surface > .starci-core-surface,
+    .starci-core-form-surface > .starci-core-surface-highlight {
+        max-height: calc(100dvh - 3rem);
+        overflow: hidden !important;
+        padding: 0 !important;
+    }
+
+    .starci-core-form-surface > .starci-core-surface-highlight > .starci-core-surface {
+        max-height: inherit;
+    }
+
+    .starci-core-form-field {
+        display: flex;
+        min-width: 0;
+        flex-direction: column;
+        gap: var(--starci-core-field-gap, 0.5rem);
+    }
+
+    .starci-core-form-label--screen-reader {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    .starci-core-horizontal-scroll-region {
+        width: 100%;
+        min-width: 0;
+        padding-block: 0.25rem;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-horizontal-scroll-region > * {
+        width: max-content;
+        min-width: max-content;
+    }
+
+    @media (min-width: 40rem) {
+        .starci-core-form-page {
+            padding-block: 2.5rem;
+        }
+
+        .starci-core-form-scroll-viewport {
+            max-height: calc(100dvh - 5rem);
+        }
+
+        .starci-core-form-surface > .card,
+        .starci-core-form-surface > .starci-core-surface,
+        .starci-core-form-surface > .starci-core-surface-highlight {
+            max-height: calc(100dvh - 5rem);
+        }
+    }
+
+    .starci-core-surface-card,
+    .starci-core-surface-list,
+    .starci-core-surface-accordion-card {
+        container-name: starci-core-surface;
+        container-type: inline-size;
+        display: flex;
+        min-width: 0;
+        width: 100%;
+        flex-direction: column;
+        gap: var(--starci-core-section-gap, 0.75rem);
+    }
+
+    .starci-core-surface-label {
+        display: flex;
+        min-width: 0;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: var(--starci-core-inline-gap, 0.5rem);
+    }
+
+    .starci-core-surface-label > :first-child {
+        min-width: 0;
+        margin: 0;
+    }
+
+    .starci-core-label {
+        min-width: 0;
+        margin: 0;
+    }
+
+    .starci-core-tooltip {
+        position: relative;
+        max-width: fit-content;
+    }
+
+    .starci-core-tooltip-content {
+        position: absolute;
+        z-index: 20;
+        pointer-events: none;
+        white-space: nowrap;
+        border-radius: var(--starci-core-control-radius, 0.75rem);
+        background: var(--starci-core-foreground, var(--foreground, CanvasText));
+        color: var(--starci-core-canvas, var(--background, Canvas));
+        padding: 0.25rem 0.5rem;
+        font-size: 0.75rem;
+        line-height: 1rem;
+        font-weight: 500;
+        opacity: 0;
+        transition:
+            opacity var(--starci-core-motion-duration, 180ms) var(--starci-core-motion-easing, cubic-bezier(0.2, 0, 0, 1)),
+            visibility var(--starci-core-motion-duration, 180ms) var(--starci-core-motion-easing, cubic-bezier(0.2, 0, 0, 1));
+        visibility: hidden;
+    }
+
+    .starci-core-tooltip:hover > .starci-core-tooltip-content,
+    .starci-core-tooltip:focus-within > .starci-core-tooltip-content {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .starci-core-tooltip[data-grammar-tooltip-placement="top"] > .starci-core-tooltip-content {
+        bottom: calc(100% + 0.375rem);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .starci-core-tooltip[data-grammar-tooltip-placement="bottom"] > .starci-core-tooltip-content {
+        top: calc(100% + 0.375rem);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .starci-core-tooltip-content {
+            transition: none;
+        }
+    }
+
+    .starci-core-surface {
+        position: relative;
+        min-width: 0;
+        overflow: hidden;
+        border-radius: var(--starci-core-surface-radius, 1rem);
+        background: var(--surface, Canvas);
+        color: var(--surface-foreground, CanvasText);
+    }
+
+    @property --starci-core-highlight-angle {
+        syntax: "<angle>";
+        initial-value: 0deg;
+        inherits: false;
+    }
+
+    @keyframes starci-core-highlight-spin {
+        to {
+            --starci-core-highlight-angle: 360deg;
+        }
+    }
+
+    .starci-core-surface-highlight {
+        border-radius: var(--starci-core-surface-radius, 1rem);
+        overflow: visible;
+    }
+
+    .starci-core-surface-highlight-sweep {
+        position: absolute;
+        z-index: 1;
+        inset: var(--starci-core-highlight-inset, 0);
+        box-sizing: border-box;
+        border-radius: inherit;
+        padding: 2px;
+        background: conic-gradient(
+            from var(--starci-core-highlight-angle),
+            transparent 0%,
+            transparent 82%,
+            var(--starci-core-accent, var(--accent, Highlight)) 92%,
+            transparent 100%
+        );
+        -webkit-mask:
+            linear-gradient(#000 0 0) content-box,
+            linear-gradient(#000 0 0);
+        -webkit-mask-composite: xor;
+        mask:
+            linear-gradient(#000 0 0) content-box,
+            linear-gradient(#000 0 0);
+        mask-composite: exclude;
+        animation: starci-core-highlight-spin 3s linear infinite;
+        pointer-events: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .starci-core-surface-highlight-sweep {
+            animation: none;
+        }
+    }
+
+    .starci-core-surface[data-grammar-surface-depth="top"] {
+        border: 0;
+        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, 0 1px 3px rgb(0 0 0 / 0.16)));
+    }
+
+    .starci-core-surface[data-grammar-surface-depth="nested"] {
+        border: 1px solid var(--border, GrayText);
+        box-shadow: none;
+    }
+
+    .starci-core-surface-content {
+        min-width: 0;
+        padding: var(--starci-core-surface-inset, 1rem);
+    }
+
+    .starci-core-surface[data-grammar-surface-composition="joined"] > .starci-core-surface-content {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+    }
+
+    .starci-core-surface-card[data-grammar-surface-height="fill"],
+    .starci-core-surface-card[data-grammar-surface-height="fill"] > .starci-core-surface,
+    .starci-core-surface-card[data-grammar-surface-height="fill"] > .starci-core-surface-highlight,
+    .starci-core-surface-card[data-grammar-surface-height="fill"] > .starci-core-surface-highlight > .starci-core-surface,
+    .starci-core-surface-card[data-grammar-surface-height="fill"] .starci-core-surface-content {
+        height: 100%;
+    }
+
+    .starci-core-surface.starci-core-frameless-surface {
+        position: relative;
+        min-width: 0;
+        overflow: visible;
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+    }
+
+    .starci-core-frameless-surface > .starci-core-surface-content {
+        padding: 0;
+    }
+
+    [data-grammar-scroll="contained"] {
+        max-height: var(--starci-core-contained-max-height, calc(100dvh - 3rem));
+        overflow: hidden;
+    }
+
+    [data-grammar-scroll="contained"] > .scroll-shadow--vertical {
+        width: 100%;
+        max-height: inherit;
+        min-height: 0;
+        overscroll-behavior: contain;
+    }
+
+    [data-grammar-whole-action] {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        border: 0;
+        border-radius: inherit;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+    }
+
+    [data-grammar-whole-action]:focus-visible {
+        outline: 2px solid var(--focus, Highlight);
+        outline-offset: -2px;
+    }
+
+    .starci-core-surface-card[data-grammar-interaction="whole-action"] .starci-core-surface {
+        transition: background-color var(--starci-core-motion-duration, 180ms) var(--starci-core-motion-easing, ease-out);
+    }
+
+    .starci-core-surface-card[data-grammar-interaction="whole-action"] .starci-core-surface:has([data-grammar-whole-action]:hover),
+    .starci-core-surface-card[data-grammar-interaction="whole-action"] .starci-core-surface:has([data-grammar-whole-action]:focus-visible) {
+        background: var(--accent-soft, var(--starci-core-surface-secondary, var(--surface-secondary, Canvas)));
+    }
+
+    .starci-core-surface-card[data-grammar-interaction="whole-action"] .starci-core-surface:has([data-grammar-whole-action]:active) {
+        background: color-mix(in oklab, var(--starci-core-accent, Highlight) 14%, var(--starci-core-surface, Canvas));
+    }
+
+    [data-grammar-whole-action][aria-disabled="true"],
+    [data-grammar-whole-action]:disabled {
+        cursor: not-allowed;
+    }
+
+    [data-grammar-state="unavailable"] {
+        opacity: var(--starci-core-disabled-opacity, 0.55);
+    }
+
+    [data-grammar-state="pending"] {
+        cursor: progress;
+    }
+
+    .starci-core-leading-number {
+        display: inline-block;
+        flex: none;
+        min-width: 1.25rem;
+        color: var(--muted, GrayText);
+        font-size: 0.875rem;
+        font-variant-numeric: tabular-nums;
+        line-height: 1.25rem;
+        text-align: end;
+        white-space: nowrap;
+    }
+
+    .starci-core-list-shell {
+        padding: 0;
+    }
+
+    .starci-core-static-list {
+        display: flex;
+        margin: 0;
+        padding: 0;
+        flex-direction: column;
+        list-style: none;
+    }
+
+    .starci-core-owned-collection {
+        min-width: 0;
+    }
+
+    .starci-core-surface-footer {
+        min-width: 0;
+    }
+
+    .starci-core-tabs-frame,
+    .starci-core-tabs-scroll {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-tabs-frame,
+    .starci-core-tabs .tabs__list,
+    .starci-core-tabs .tabs__list-container {
+        margin-bottom: 0;
+        padding-bottom: 0;
+    }
+
+    .starci-core-tabs .tabs__list,
+    .starci-core-tabs .tabs__list-container {
+        border-bottom-width: 0 !important;
+    }
+
+    .starci-core-tabs .tabs__list {
+        align-items: flex-end;
+    }
+
+    .starci-core-tabs-scroll {
+        overflow-x: auto;
+    }
+
+    .starci-core-tabs-frame[data-grammar-tabs-inset="page"] {
+        padding-inline: 1.5rem;
+    }
+
+    .starci-core-tabs {
+        width: max-content;
+        min-width: 100%;
+        white-space: nowrap;
+    }
+
+    .starci-core-tabs .tabs__tab {
+        position: relative;
+        width: auto !important;
+        flex: 0 0 auto !important;
+        padding-inline: 0.75rem !important;
+        padding-block-end: 0 !important;
+    }
+
+    .starci-core-tabs .tabs__indicator {
+        bottom: 0 !important;
+        height: 2px !important;
+        margin-block-end: 0 !important;
+    }
+
+    .starci-core-tab-content {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: var(--starci-core-inline-gap, 0.5rem);
+    }
+
+    .starci-core-tab-label {
+        display: none;
+    }
+
+    .starci-core-tabs-frame[data-grammar-tab-labels="always"] .starci-core-tab-label {
+        display: inline;
+    }
+
+    .starci-core-static-row,
+    .starci-core-empty-row {
+        display: flex;
+        min-width: 0;
+        margin: 0;
+        align-items: flex-start;
+        gap: var(--starci-core-row-gap, 0.75rem);
+        padding: var(--starci-core-row-inset, 1rem);
+    }
+
+    .starci-core-static-row + .starci-core-static-row {
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-list-shell[data-grammar-hover="invariant"] .starci-core-static-row:hover {
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        transform: none;
+    }
+
+    .starci-core-accordion-shell {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-accordion-row {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-accordion-row + .starci-core-accordion-row {
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-accordion-heading {
+        margin: 0;
+    }
+
+    .starci-core-accordion-trigger {
+        display: block;
+        width: 100%;
+        min-width: 0;
+        min-height: 44px;
+        padding: var(--starci-core-row-inset, 1rem);
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        text-align: left;
+        transform: none;
+        transition: none;
+    }
+
+    .starci-core-accordion-trigger:hover,
+    .starci-core-accordion-trigger[data-hovered="true"],
+    .starci-core-accordion-trigger:active,
+    .starci-core-accordion-trigger[aria-expanded="true"] {
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        transform: none;
+    }
+
+    .starci-core-accordion-trigger:focus-visible,
+    .starci-core-accordion-trigger[data-focus-visible="true"] {
+        outline: 2px solid var(--focus, Highlight);
+        outline-offset: -2px;
+    }
+
+    .starci-core-accordion-trigger:disabled {
+        cursor: default;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .starci-core-surface-card[data-grammar-interaction="whole-action"] .starci-core-surface {
+            transition: none;
+        }
+    }
+
+    .starci-core-accordion-panel {
+        width: 100%;
+        min-width: 0;
+        padding: 0 var(--starci-core-row-inset, 1rem) var(--starci-core-row-inset, 1rem);
+    }
+
+    .starci-core-markdown-article {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        gap: 1rem;
+        color: inherit;
+        font-size: 0.875rem;
+        line-height: 1.65;
+        overflow-wrap: anywhere;
+    }
+
+    .starci-core-markdown-article[data-grammar-markdown-measure="compact"] {
+        max-width: 72ch;
+        gap: 0.75rem;
+    }
+
+    .starci-core-markdown-article > :first-child {
+        margin-top: 0;
+    }
+
+    .starci-core-markdown-article > :last-child {
+        margin-bottom: 0;
+    }
+
+    .starci-core-markdown-article :where(h1, h2, h3, h4) {
+        margin: 1.5rem 0 0.625rem;
+        color: inherit;
+        font-weight: 600;
+        line-height: 1.3;
+    }
+
+    .starci-core-markdown-article h1 { font-size: 1.5rem; }
+    .starci-core-markdown-article h2 { font-size: 1.25rem; }
+    .starci-core-markdown-article h3 { font-size: 1.125rem; }
+    .starci-core-markdown-article h4 { font-size: 1rem; }
+
+    .starci-core-markdown-article :where(p, ul, ol, blockquote, pre, table) {
+        margin: 0;
+    }
+
+    .starci-core-markdown-article :where(ul, ol) {
+        padding-inline-start: 1.5rem;
+    }
+
+    .starci-core-markdown-article ul { list-style: disc; }
+    .starci-core-markdown-article ol { list-style: decimal; }
+
+    .starci-core-markdown-article strong { font-weight: 600; }
+    .starci-core-markdown-article em { font-style: italic; }
+
+    .starci-core-markdown-article li + li {
+        margin-top: 0.375rem;
+    }
+
+    .starci-core-markdown-article :not(pre) > code {
+        display: inline;
+        padding: 0.125rem 0.375rem;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 999px;
+        background: var(--muted-surface, color-mix(in srgb, CanvasText 7%, Canvas));
+        color: inherit;
+        font: 500 0.875rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
+        white-space: break-spaces;
+    }
+
+    .starci-core-markdown-article pre,
+    .starci-core-fenced-code-block pre {
+        max-width: 100%;
+        margin: 0;
+        padding: 1rem;
+        overflow-x: auto;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
+        color: inherit;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-markdown-article pre code,
+    .starci-core-fenced-code-block pre code {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: 400 0.875rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
+        white-space: pre;
+    }
+
+    .starci-core-fenced-code-block {
+        width: 100%;
+        min-width: 0;
+        margin: 0 0 1rem;
+    }
+
+    .starci-core-fenced-code-header {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+        padding: 0 0 0.5rem;
+        color: var(--muted, GrayText);
+    }
+
+    .starci-core-fenced-code-header :where(button) {
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+    }
+
+    [data-grammar-fenced-code-highlight="true"] {
+        width: 100%;
+        min-width: 0;
+        overflow-x: auto;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
+        overscroll-behavior-inline: contain;
+    }
+
+    [data-grammar-fenced-code-highlight="true"] pre {
+        width: max-content;
+        min-width: 100%;
+        padding: 1rem;
+        border: 0;
+        border-radius: 0;
+        background: transparent !important;
+    }
+
+    .starci-core-markdown-article blockquote {
+        padding-inline-start: 1rem;
+        border-inline-start: 3px solid var(--border, GrayText);
+        color: var(--muted, GrayText);
+    }
+
+    .starci-core-markdown-article table,
+    .starci-core-markdown-table-frame {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        overflow-x: auto;
+        overscroll-behavior-inline: contain;
+    }
+
+    .starci-core-markdown-article table {
+        border-collapse: collapse;
+    }
+
+    .starci-core-markdown-table-frame {
+        min-width: 0;
+        border: 1px solid var(--border, GrayText);
+        border-radius: 0.75rem;
+        background: var(--code-surface, color-mix(in srgb, CanvasText 4%, Canvas));
+        box-shadow: none;
+    }
+
+    .starci-core-markdown-article hr {
+        width: 100%;
+        margin: 1rem 0;
+        border: 0;
+        border-top: 1px solid var(--separator, var(--border, GrayText));
+    }
+
+    .starci-core-markdown-article :where(th, td) {
+        min-width: 8rem;
+        padding: 0.625rem 0.75rem;
+        border-bottom: 1px solid var(--separator, var(--border, GrayText));
+        text-align: start;
+        vertical-align: top;
+    }
+
+    .starci-core-markdown-article a {
+        color: var(--link, LinkText);
+        text-decoration: underline;
+        text-underline-offset: 0.15em;
+    }
+
+    .starci-core-static-row-copy {
+        display: flex;
+        min-width: 0;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--starci-core-copy-gap, 0.25rem);
+    }
+
+    .starci-core-static-row-copy > :last-child:not(:first-child) {
+        color: var(--muted, GrayText);
+    }
+
+    [data-grammar-state-mark="check"] {
+        width: 1.25rem;
+        height: 1.25rem;
+        flex: none;
+        color: var(--success, #15803d);
+    }
+
+    .starci-core-rail {
+        container-name: starci-core-rail;
+        container-type: inline-size;
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-rail[data-grammar-rail-width="compact"] {
+        max-width: var(--starci-core-rail-compact, 16rem);
+    }
+
+    .starci-core-rail[data-grammar-collapse="collapsed"] {
+        max-width: var(--starci-core-rail-collapsed, 4rem);
+    }
+
+    .starci-core-rail[data-grammar-rail-width="standard"] {
+        max-width: var(--starci-core-rail-standard, 20rem);
+    }
+
+    .starci-core-rail[data-grammar-rail-width="wide"] {
+        max-width: var(--starci-core-rail-wide, 24rem);
+    }
+
+    .starci-core-rail-frame {
+        display: flex;
+        min-width: 0;
+        max-height: calc(100dvh - var(--starci-core-rail-offset, 5.5rem) - 1.5rem);
+        flex-direction: column;
+        gap: var(--starci-core-rail-gap, 1rem);
+    }
+
+    .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
+        position: sticky;
+        top: var(--starci-core-rail-offset, 5.5rem);
+    }
+
+    .starci-core-rail-body {
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    .starci-core-rail[data-grammar-rail-height="fill"],
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame,
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
+        height: 100%;
+        min-height: 0;
+    }
+
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame {
+        max-height: none;
+    }
+
+    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
+        flex: 1 1 0%;
+        overflow: hidden;
+    }
+
+    .starci-core-rail-footer {
+        flex: none;
+    }
+
+    .starci-core-rail :where(button, [role="button"]) {
+        min-inline-size: 44px;
+        min-block-size: 44px;
+    }
+
+    @container starci-core-surface (max-width: 28rem) {
+        .starci-core-surface-label {
+            align-items: flex-start;
+            flex-direction: column;
+        }
+
+        .starci-core-static-row {
+            gap: var(--starci-core-row-gap-compact, 0.5rem);
+        }
+    }
+
+    @container starci-core-rail (max-width: 18rem) {
+        .starci-core-rail-frame {
+            gap: var(--starci-core-rail-gap-compact, 0.75rem);
+        }
+    }
+
+    @container starci-core-primary-rail (max-width: 56rem) {
+        .starci-core-primary-rail-layout {
+            grid-template-columns: minmax(0, 1fr);
+        }
+    }
+
+    @container starci-core-primary-rail (max-width: 32rem) {
+        .starci-core-section-header {
+            align-items: flex-start;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+    }
+
+    @media (max-width: 47.999rem) {
+        .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
+            position: static;
+            max-height: none;
+        }
+
+        .starci-core-rail-body {
+            overflow-y: visible;
+        }
+    }
+
+    @media (min-width: 48rem) {
+        .starci-core-tab-label {
+            display: inline;
+        }
+    }
+
+    .starci-core-navigation-feature-nav {
+        width: 100%;
+        border-bottom: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+        background: var(--background, var(--starci-core-canvas, Canvas));
+        color: var(--foreground, var(--starci-core-foreground, CanvasText));
+    }
+
+    .starci-core-navigation-feature-nav[data-grammar-navigation-feature-nav-position="sticky"] {
+        position: sticky;
+        z-index: var(--starci-core-navbar-z, 50);
+        top: 0;
+    }
+
+    .starci-core-navigation-feature-nav-primary {
+        display: grid !important;
+        min-height: 4rem;
+        grid-template-columns: minmax(0, 1fr) auto auto !important;
+        align-items: center;
+        gap: var(--starci-core-row-gap, 0.75rem);
+        padding-block: var(--starci-core-inline-gap, 0.5rem);
+    }
+
+    .starci-core-navigation-feature-nav-primary.starci-core-page-container {
+        padding-inline: 0.75rem;
+    }
+
+    .starci-core-navigation-feature-nav-identity,
+    .starci-core-navigation-feature-nav-navigation,
+    .starci-core-navigation-feature-nav-compact-navigation,
+    .starci-core-navigation-feature-nav-actions,
+    .starci-core-navigation-feature-nav-feature {
+        min-width: 0;
+    }
+
+    .starci-core-navigation-feature-nav-navigation {
+        display: none !important;
+    }
+
+    .starci-core-navigation-feature-nav-compact-navigation {
+        display: block !important;
+    }
+
+    .starci-core-navigation-feature-nav-actions {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        gap: var(--starci-core-inline-gap, 0.5rem);
+    }
+
+    .starci-core-navigation-feature-nav-feature {
+        width: 100%;
+        padding-inline: 0.75rem;
+    }
+
+    .starci-core-course-section-navigation {
+        padding-inline-start: 0.75rem;
+        padding-inline-end: 0.75rem;
+    }
+
+    /* The navbar owns the only outer separator; HeroUI's secondary tab rail must not add a twin. */
+    .starci-core-navigation-feature-nav-feature .tabs__list-container {
+        border-bottom-width: 0 !important;
+    }
+
+    /* Feature tabs share the dashboard rail's left inset; scroll chrome must not reclaim it. */
+    .starci-core-navigation-feature-nav-feature .starci-core-tabs-scroll {
+        padding-block: 0;
+        padding-inline-start: 0;
+    }
+
+    .starci-core-navigation-feature-nav-feature .tabs__list-container__scroll-prev[disabled],
+    .starci-core-navigation-feature-nav-feature .tabs__list-container__scroll-prev[tabindex="-1"] {
+        width: 0;
+        min-width: 0;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .starci-core-navigation-feature-nav-feature .starci-core-tabs .tabs__indicator {
+        bottom: 0 !important;
+        inset-block-end: 0 !important;
+    }
+
+    .starci-core-course-section-navigation .tabs__list-container {
+        border-bottom-width: 0 !important;
+    }
+
+    .starci-core-subnav {
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        min-height: 3.25rem;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--starci-core-row-gap, 0.75rem);
+        padding-inline: 0.75rem;
+        border-bottom: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+        background: var(--background, var(--starci-core-canvas, Canvas));
+        color: var(--foreground, var(--starci-core-foreground, CanvasText));
+    }
+
+    .starci-core-subnav[data-grammar-subnav-position="sticky"] {
+        position: sticky;
+        z-index: var(--starci-core-subnav-z, 40);
+        top: var(--starci-core-subnav-offset, 4rem);
+        backface-visibility: hidden;
+        transform: translateZ(0);
+        will-change: transform;
+    }
+
+    .starci-core-subnav-identity {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: var(--starci-core-inline-gap, 0.5rem);
+    }
+
+    .starci-core-subnav-leading,
+    .starci-core-subnav-toggle {
+        flex: none;
+    }
+
+    .starci-core-subnav-title {
+        display: flex;
+        min-width: 0;
+        overflow: hidden;
+        align-items: center;
+        font-weight: 600;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .starci-core-subnav-toggle {
+        display: inline-flex;
+        width: 2.75rem;
+        height: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        color: inherit;
+        cursor: pointer;
+    }
+
+    @media (min-width: 48rem) {
+        .starci-core-navigation-feature-nav-primary {
+            grid-template-columns: auto minmax(0, 1fr) auto !important;
+        }
+
+        .starci-core-navigation-feature-nav-navigation {
+            display: block !important;
+        }
+
+        .starci-core-navigation-feature-nav-compact-navigation {
+            display: none !important;
+        }
+    }
+
+    @media (min-width: 70rem) {
+        .starci-core-subnav[data-grammar-subnav-visibility="compact"] {
+            display: none;
+        }
+    }
+
+    .starci-core-workspace-shell {
+        position: relative;
+        min-width: 0;
+        container: starci-core-workspace-shell / inline-size;
+    }
+
+    .starci-core-workspace-shell-header {
+        min-width: 0;
+        margin-block-end: var(--starci-core-region-gap, 1.5rem);
+    }
+
+    .starci-core-workspace-shell-compact-header,
+    .starci-core-workspace-shell-compact-navigation {
+        display: none;
+    }
+
+    .starci-core-workspace-shell-layout {
+        --starci-core-workspace-navigation-track: minmax(14rem, var(--starci-core-workspace-navigation-width, 18rem));
+        --starci-core-workspace-rail-track: minmax(16rem, var(--starci-core-rail-standard, 20rem));
+        display: grid;
+        min-width: 0;
+        grid-template-areas: "navigation primary rail";
+        grid-template-columns:
+            var(--starci-core-workspace-navigation-track)
+            minmax(0, 1fr)
+            var(--starci-core-workspace-rail-track);
+        gap: var(--starci-core-region-gap, 1.5rem);
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-track="intrinsic"] {
+        --starci-core-workspace-navigation-track: max-content;
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="present"] {
+        grid-template-areas: "primary rail";
+        grid-template-columns: minmax(0, 1fr) var(--starci-core-workspace-rail-track);
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"][data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="present"] {
+        grid-template-areas: "rail rule primary";
+        grid-template-columns: var(--starci-core-workspace-rail-track) 1px minmax(0, 1fr);
+        column-gap: 0;
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"][data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="present"] {
+        grid-template-areas: "navigation rail rule primary";
+        grid-template-columns:
+            var(--starci-core-workspace-navigation-track)
+            var(--starci-core-workspace-rail-track)
+            1px
+            minmax(0, 1fr);
+        column-gap: 0;
+    }
+
+    .starci-core-workspace-shell-leading-rule {
+        display: none;
+        grid-area: rule;
+        width: 1px;
+        align-self: stretch;
+        justify-self: stretch;
+        background: var(--separator, var(--starci-core-separator, GrayText));
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"] .starci-core-workspace-shell-leading-rule {
+        display: block;
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"] .starci-core-workspace-shell-primary {
+        padding-inline-start: var(--starci-core-workspace-leading-seam, 2rem);
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="absent"] {
+        grid-template-areas: "navigation primary";
+        grid-template-columns: var(--starci-core-workspace-navigation-track) minmax(0, 1fr);
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="absent"] {
+        grid-template-areas: "primary";
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-width="compact"] {
+        --starci-core-workspace-rail-track: minmax(14rem, var(--starci-core-rail-compact, 16rem));
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-rail-width="wide"] {
+        --starci-core-workspace-rail-track: minmax(20rem, var(--starci-core-rail-wide, 24rem));
+    }
+
+    .starci-core-workspace-shell-layout[data-grammar-workspace-align="start"] { align-items: start; }
+    .starci-core-workspace-shell-layout[data-grammar-workspace-align="stretch"] { align-items: stretch; }
+    .starci-core-workspace-shell-navigation { grid-area: navigation; }
+    .starci-core-workspace-shell-primary { grid-area: primary; }
+    .starci-core-workspace-shell-rail { grid-area: rail; }
+
+    .starci-core-workspace-shell-navigation,
+    .starci-core-workspace-shell-primary,
+    .starci-core-workspace-shell-rail {
+        width: 100%;
+        min-width: 0;
+    }
+
+    .starci-core-workspace-shell-primary {
+        display: flex;
+        flex-direction: column;
+        gap: var(--starci-core-region-gap, 1.5rem);
+        outline: none;
+    }
+
+    .starci-core-workspace-shell-floating-layer {
+        position: fixed;
+        z-index: var(--starci-core-workspace-floating-z, 40);
+        inset-inline-end: var(--starci-core-workspace-floating-inset, 1rem);
+        inset-block-end: max(var(--starci-core-workspace-floating-inset, 1rem), env(safe-area-inset-bottom));
+        max-inline-size: min(var(--starci-core-workspace-floating-max, 22rem), calc(100vw - 2 * var(--starci-core-workspace-floating-inset, 1rem)));
+        max-block-size: calc(100dvh - 2 * var(--starci-core-workspace-floating-inset, 1rem));
+        overflow: auto;
+        overscroll-behavior: contain;
+    }
+
+    .starci-core-chat-workspace {
+        display: flex;
+        height: 100%;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        overflow: hidden;
+        background: var(--background, var(--starci-core-canvas, Canvas));
+    }
+
+    .starci-core-chat-workspace-header,
+    .starci-core-chat-workspace-composer,
+    .starci-core-chat-workspace-rail-trigger-boundary {
+        min-width: 0;
+        flex: none;
+    }
+
+    .starci-core-chat-workspace-rail-trigger-boundary {
+        display: flex;
+        justify-content: flex-end;
+        padding: 0.5rem 1rem;
+        border-bottom: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+    }
+
+    .starci-core-chat-workspace-rail-trigger {
+        display: inline-flex;
+        min-width: 2.75rem;
+        min-height: 2.75rem;
+        align-items: center;
+        justify-content: center;
+        padding-inline: 0.75rem;
+        border: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+        border-radius: var(--starci-core-control-radius, 0.75rem);
+        background: var(--surface, var(--starci-core-surface, Canvas));
+        color: var(--foreground, var(--starci-core-foreground, CanvasText));
+        font-size: 0.875rem;
+        font-weight: 500;
+    }
+
+    .starci-core-chat-workspace-rail-trigger:focus-visible,
+    .starci-core-chat-workspace-conversation:focus-visible,
+    .starci-core-chat-workspace-overlay-rail:focus-visible {
+        outline: 2px solid var(--focus, var(--starci-core-focus, Highlight));
+        outline-offset: -2px;
+    }
+
+    .starci-core-chat-workspace-layout {
+        display: grid;
+        min-height: 0;
+        min-width: 0;
+        flex: 1;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--starci-core-region-gap, 1.5rem);
+    }
+
+    .starci-core-chat-workspace-layout-without-rail {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .starci-core-chat-workspace-primary {
+        display: flex;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .starci-core-chat-workspace-conversation {
+        min-height: 0;
+        min-width: 0;
+        flex: 1;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scroll-behavior: smooth;
+    }
+
+    .starci-core-chat-workspace-composer {
+        border-top: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+        background: var(--background, var(--starci-core-canvas, Canvas));
+    }
+
+    .starci-core-chat-workspace-inline-rail { display: none; }
+
+    .starci-core-chat-workspace-drawer-content {
+        right: 0 !important;
+        left: auto !important;
+        width: min(24rem, calc(100dvw - 1rem)) !important;
+        max-width: calc(100dvw - 1rem) !important;
+    }
+
+    .starci-core-chat-workspace-drawer-dialog {
+        width: 100% !important;
+        height: 100% !important;
+        min-height: 0 !important;
+        max-width: none !important;
+    }
+
+    .starci-core-chat-workspace-drawer-body {
+        min-height: 0;
+        min-width: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    .starci-core-chat-workspace-overlay-rail {
+        height: 100%;
+        min-height: 0;
+        min-width: 0;
+        padding: 1rem;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    .starci-core-chat-workspace-drawer-close {
+        width: 2.5rem !important;
+        height: 2.5rem !important;
+        border: 1px solid var(--separator, var(--starci-core-separator, GrayText)) !important;
+        border-radius: 999px !important;
+        background: var(--surface, var(--starci-core-surface, Canvas)) !important;
+        color: var(--foreground, var(--starci-core-foreground, CanvasText)) !important;
+    }
+
+    @container starci-core-workspace-shell (max-width: 72rem) {
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="present"] {
+            grid-template-areas: "navigation primary" "navigation rail";
+            grid-template-columns: var(--starci-core-workspace-navigation-track) minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"][data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="present"] {
+            grid-template-areas: "navigation rail rule primary";
+            grid-template-columns:
+                var(--starci-core-workspace-navigation-track)
+                var(--starci-core-workspace-rail-track)
+                1px
+                minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell-rail .starci-core-rail {
+            max-width: none;
+        }
+    }
+
+    @container starci-core-workspace-shell (max-width: 56rem) {
+        .starci-core-workspace-shell-layout,
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="present"],
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="present"][data-grammar-workspace-rail="absent"],
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="absent"] {
+            grid-template-areas: "navigation" "primary" "rail";
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"][data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="present"] {
+            grid-template-areas: "rail" "primary";
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"] {
+            grid-template-areas: "primary" "rail";
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"][data-grammar-workspace-navigation="absent"] {
+            grid-template-areas: "rail" "primary";
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"] .starci-core-workspace-shell-leading-rule {
+            display: none;
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail-position="leading"] .starci-core-workspace-shell-primary {
+            padding-inline-start: 0;
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-rail="absent"] {
+            grid-template-areas: "navigation" "primary";
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation="absent"][data-grammar-workspace-rail="absent"] {
+            grid-template-areas: "primary";
+        }
+
+        .starci-core-workspace-shell-rail .starci-core-rail-frame {
+            position: static;
+            max-height: none;
+        }
+
+        .starci-core-workspace-shell-rail .starci-core-rail-body {
+            overflow-y: visible;
+        }
+    }
+
+    @media (max-width: 69.999rem) {
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"] .starci-core-workspace-shell-navigation {
+            display: none;
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"][data-grammar-workspace-rail="absent"] {
+            grid-template-areas: "primary";
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"][data-grammar-workspace-rail="present"] {
+            grid-template-areas: "primary" "rail";
+            grid-template-columns: minmax(0, 1fr);
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"][data-grammar-workspace-rail-position="leading"][data-grammar-workspace-rail="present"] {
+            grid-template-areas: "rail" "primary";
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"] .starci-core-workspace-shell-leading-rule {
+            display: none;
+        }
+
+        .starci-core-workspace-shell-layout[data-grammar-workspace-navigation-visibility="wide"] .starci-core-workspace-shell-primary {
+            padding-inline-start: 0;
+        }
+
+        .starci-core-workspace-shell-compact-header {
+            display: block;
+        }
+
+        .starci-core-workspace-shell-compact-navigation {
+            position: sticky;
+            z-index: 40;
+            inset-block-end: 0;
+            display: flex;
+            min-width: 0;
+            align-items: center;
+            justify-content: space-between;
+            gap: var(--starci-core-inline-gap, 0.5rem);
+            border-block-start: 1px solid var(--separator, var(--starci-core-separator, GrayText));
+            background: var(--background, var(--starci-core-canvas, Canvas));
+            padding: 0.75rem 1rem;
+        }
+    }
+
+    @media (min-width: 48rem) {
+        .starci-core-chat-workspace-layout[data-grammar-chat-workspace-rail-width="compact"] {
+            grid-template-columns: minmax(0, 1fr) minmax(14rem, var(--starci-core-rail-compact, 16rem));
+        }
+
+        .starci-core-chat-workspace-layout[data-grammar-chat-workspace-rail-width="standard"] {
+            grid-template-columns: minmax(0, 1fr) minmax(16rem, var(--starci-core-rail-standard, 20rem));
+        }
+
+        .starci-core-chat-workspace-layout[data-grammar-chat-workspace-rail-width="wide"] {
+            grid-template-columns: minmax(0, 1fr) minmax(20rem, var(--starci-core-rail-wide, 24rem));
+        }
+
+        .starci-core-chat-workspace-inline-rail {
+            display: block;
+            min-height: 0;
+            min-width: 0;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-grammar-motion="animated"] {
+            scroll-behavior: auto;
+        }
+    }
+}
+