/*! @mogos/starkit — aggregated component styles.
* Single self-contained stylesheet for server-rendered / non-Solid consumers.
* Theme it by loading @mogos/starstyle/theme.css FIRST, then this file:
* <link rel="stylesheet" href="@mogos/starstyle/theme.css">
* <link rel="stylesheet" href="@mogos/starkit/styles.css">
* Every value resolves through canon var(--star-*) first, with a legacy
* var(--starplane-*) compat tail and a literal floor; no literal palette is
* applied. Generated by scripts/build-css.ts — do not edit by hand.
*/
:where(:root) {
--star-type-display-family: var(--star-font-heading);
--star-type-display-size: var(--star-text-5xl);
--star-type-display-weight: var(--star-weight-bold);
--star-type-display-leading: var(--star-leading-tight);
--star-type-display-tracking: var(--star-tracking-tight);
--star-type-display-transform: none;
--star-type-display-features: normal;
--star-type-headline-family: var(--star-font-heading);
--star-type-headline-size: var(--star-text-3xl);
--star-type-headline-weight: var(--star-weight-bold);
--star-type-headline-leading: var(--star-leading-tight);
--star-type-headline-tracking: var(--star-tracking-tight);
--star-type-headline-transform: none;
--star-type-headline-features: normal;
--star-type-title-family: var(--star-font-heading);
--star-type-title-size: var(--star-text-xl);
--star-type-title-weight: var(--star-weight-semibold);
--star-type-title-leading: var(--star-leading-tight);
--star-type-title-tracking: var(--star-tracking-tight);
--star-type-title-transform: none;
--star-type-title-features: normal;
--star-type-heading-family: var(--star-font-ui);
--star-type-heading-size: var(--star-text-lg);
--star-type-heading-weight: var(--star-weight-semibold);
--star-type-heading-leading: var(--star-leading-tight);
--star-type-heading-tracking: normal;
--star-type-heading-transform: none;
--star-type-heading-features: normal;
--star-type-subheading-family: var(--star-font-ui);
--star-type-subheading-size: var(--star-text-base);
--star-type-subheading-weight: var(--star-weight-medium);
--star-type-subheading-leading: var(--star-leading-normal);
--star-type-subheading-tracking: normal;
--star-type-subheading-transform: none;
--star-type-subheading-features: normal;
--star-type-body-family: var(--star-font-ui);
--star-type-body-size: var(--star-text-base);
--star-type-body-weight: var(--star-weight-normal);
--star-type-body-leading: var(--star-leading-relaxed);
--star-type-body-tracking: normal;
--star-type-body-transform: none;
--star-type-body-features: normal;
--star-type-body-sm-family: var(--star-font-ui);
--star-type-body-sm-size: var(--star-text-sm);
--star-type-body-sm-weight: var(--star-weight-normal);
--star-type-body-sm-leading: var(--star-leading-normal);
--star-type-body-sm-tracking: normal;
--star-type-body-sm-transform: none;
--star-type-body-sm-features: normal;
--star-type-label-family: var(--star-font-ui);
--star-type-label-size: var(--star-text-sm);
--star-type-label-weight: var(--star-weight-medium);
--star-type-label-leading: var(--star-leading-tight);
--star-type-label-tracking: normal;
--star-type-label-transform: none;
--star-type-label-features: normal;
--star-type-meta-family: var(--star-font-ui);
--star-type-meta-size: var(--star-text-xs);
--star-type-meta-weight: var(--star-weight-normal);
--star-type-meta-leading: var(--star-leading-normal);
--star-type-meta-tracking: normal;
--star-type-meta-transform: none;
--star-type-meta-features: normal;
--star-type-caption-family: var(--star-font-ui);
--star-type-caption-size: var(--star-text-2xs);
--star-type-caption-weight: var(--star-weight-normal);
--star-type-caption-leading: var(--star-leading-normal);
--star-type-caption-tracking: normal;
--star-type-caption-transform: none;
--star-type-caption-features: normal;
--star-type-eyebrow-family: var(--star-font-ui);
--star-type-eyebrow-size: var(--star-text-2xs);
--star-type-eyebrow-weight: var(--star-weight-semibold);
--star-type-eyebrow-leading: var(--star-leading-tight);
--star-type-eyebrow-tracking: var(--star-legend-tracking);
--star-type-eyebrow-transform: uppercase;
--star-type-eyebrow-features: normal;
--star-type-code-family: var(--star-font-mono);
--star-type-code-size: var(--star-text-sm);
--star-type-code-weight: var(--star-weight-normal);
--star-type-code-leading: var(--star-leading-normal);
--star-type-code-tracking: normal;
--star-type-code-transform: none;
--star-type-code-features: normal;
--star-type-numeric-family: var(--star-font-ui);
--star-type-numeric-size: var(--star-text-base);
--star-type-numeric-weight: var(--star-weight-medium);
--star-type-numeric-leading: var(--star-leading-tight);
--star-type-numeric-tracking: normal;
--star-type-numeric-transform: none;
--star-type-numeric-features: "tnum" 1, "lnum" 1;
}
:where(.star-type-display) {
font-family: var(--star-type-display-family);
font-size: var(--star-type-display-size);
font-weight: var(--star-type-display-weight);
line-height: var(--star-type-display-leading);
letter-spacing: var(--star-type-display-tracking);
text-transform: var(--star-type-display-transform);
font-feature-settings: var(--star-type-display-features);
font-optical-sizing: auto;
}
:where(.star-type-headline) {
font-family: var(--star-type-headline-family);
font-size: var(--star-type-headline-size);
font-weight: var(--star-type-headline-weight);
line-height: var(--star-type-headline-leading);
letter-spacing: var(--star-type-headline-tracking);
text-transform: var(--star-type-headline-transform);
font-feature-settings: var(--star-type-headline-features);
font-optical-sizing: auto;
}
:where(.star-type-title) {
font-family: var(--star-type-title-family);
font-size: var(--star-type-title-size);
font-weight: var(--star-type-title-weight);
line-height: var(--star-type-title-leading);
letter-spacing: var(--star-type-title-tracking);
text-transform: var(--star-type-title-transform);
font-feature-settings: var(--star-type-title-features);
font-optical-sizing: auto;
}
:where(.star-type-heading) {
font-family: var(--star-type-heading-family);
font-size: var(--star-type-heading-size);
font-weight: var(--star-type-heading-weight);
line-height: var(--star-type-heading-leading);
letter-spacing: var(--star-type-heading-tracking);
text-transform: var(--star-type-heading-transform);
font-feature-settings: var(--star-type-heading-features);
font-optical-sizing: auto;
}
:where(.star-type-subheading) {
font-family: var(--star-type-subheading-family);
font-size: var(--star-type-subheading-size);
font-weight: var(--star-type-subheading-weight);
line-height: var(--star-type-subheading-leading);
letter-spacing: var(--star-type-subheading-tracking);
text-transform: var(--star-type-subheading-transform);
font-feature-settings: var(--star-type-subheading-features);
font-optical-sizing: auto;
}
:where(.star-type-body) {
font-family: var(--star-type-body-family);
font-size: var(--star-type-body-size);
font-weight: var(--star-type-body-weight);
line-height: var(--star-type-body-leading);
letter-spacing: var(--star-type-body-tracking);
text-transform: var(--star-type-body-transform);
font-feature-settings: var(--star-type-body-features);
font-optical-sizing: auto;
}
:where(.star-type-body-sm) {
font-family: var(--star-type-body-sm-family);
font-size: var(--star-type-body-sm-size);
font-weight: var(--star-type-body-sm-weight);
line-height: var(--star-type-body-sm-leading);
letter-spacing: var(--star-type-body-sm-tracking);
text-transform: var(--star-type-body-sm-transform);
font-feature-settings: var(--star-type-body-sm-features);
font-optical-sizing: auto;
}
:where(.star-type-label) {
font-family: var(--star-type-label-family);
font-size: var(--star-type-label-size);
font-weight: var(--star-type-label-weight);
line-height: var(--star-type-label-leading);
letter-spacing: var(--star-type-label-tracking);
text-transform: var(--star-type-label-transform);
font-feature-settings: var(--star-type-label-features);
font-optical-sizing: auto;
}
:where(.star-type-meta) {
font-family: var(--star-type-meta-family);
font-size: var(--star-type-meta-size);
font-weight: var(--star-type-meta-weight);
line-height: var(--star-type-meta-leading);
letter-spacing: var(--star-type-meta-tracking);
text-transform: var(--star-type-meta-transform);
font-feature-settings: var(--star-type-meta-features);
font-optical-sizing: auto;
}
:where(.star-type-caption) {
font-family: var(--star-type-caption-family);
font-size: var(--star-type-caption-size);
font-weight: var(--star-type-caption-weight);
line-height: var(--star-type-caption-leading);
letter-spacing: var(--star-type-caption-tracking);
text-transform: var(--star-type-caption-transform);
font-feature-settings: var(--star-type-caption-features);
font-optical-sizing: auto;
}
:where(.star-type-eyebrow) {
font-family: var(--star-type-eyebrow-family);
font-size: var(--star-type-eyebrow-size);
font-weight: var(--star-type-eyebrow-weight);
line-height: var(--star-type-eyebrow-leading);
letter-spacing: var(--star-type-eyebrow-tracking);
text-transform: var(--star-type-eyebrow-transform);
font-feature-settings: var(--star-type-eyebrow-features);
font-optical-sizing: auto;
}
:where(.star-type-code) {
font-family: var(--star-type-code-family);
font-size: var(--star-type-code-size);
font-weight: var(--star-type-code-weight);
line-height: var(--star-type-code-leading);
letter-spacing: var(--star-type-code-tracking);
text-transform: var(--star-type-code-transform);
font-feature-settings: var(--star-type-code-features);
font-optical-sizing: auto;
}
:where(.star-type-numeric) {
font-family: var(--star-type-numeric-family);
font-size: var(--star-type-numeric-size);
font-weight: var(--star-type-numeric-weight);
line-height: var(--star-type-numeric-leading);
letter-spacing: var(--star-type-numeric-tracking);
text-transform: var(--star-type-numeric-transform);
font-feature-settings: var(--star-type-numeric-features);
font-optical-sizing: auto;
}
:where(.star-type-display),
:where(.star-type-headline),
:where(.star-type-title),
:where(.star-type-heading) {
text-wrap: balance;
}
:where([class*="star-motion-"]) {
--star-motion-distance: 6px;
--star-motion-scale-from: 0.96;
--star-motion-dur: var(--star-dur-base);
--star-motion-ease: var(--star-ease);
--star-motion-delay: 0s;
--star-motion-index: 0;
--star-motion-stagger: calc(var(--star-dur-fast) / 4);
--star-motion-repeat: infinite;
--star-motion-amount: 4px;
--star-motion-angle: 6deg;
--star-motion-origin: center;
--star-motion-depth: 24px;
--star-motion-pop: 2px;
--star-motion-dim: 0.55;
}
@keyframes star-fade {
from { opacity: 0; }
to { opacity: 1; }
}
:where(.star-motion-fade) {
animation: star-fade var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-rise {
from { opacity: 0; transform: translateY(var(--star-motion-distance)); }
to { opacity: 1; transform: translateY(0); }
}
:where(.star-motion-rise) {
animation: star-rise var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-fall {
from { opacity: 0; transform: translateY(calc(var(--star-motion-distance) * -1)); }
to { opacity: 1; transform: translateY(0); }
}
:where(.star-motion-fall) {
animation: star-fall var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-scale {
from { opacity: 0; transform: scale(var(--star-motion-scale-from)); }
to { opacity: 1; transform: scale(1); }
}
:where(.star-motion-scale) {
animation: star-scale var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-zoom {
from { opacity: 0; transform: scale(calc(2 - var(--star-motion-scale-from))); }
to { opacity: 1; transform: scale(1); }
}
:where(.star-motion-zoom) {
animation: star-zoom var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-slide-start {
from { opacity: 0; transform: translateX(calc(var(--star-motion-distance) * -2)); }
to { opacity: 1; transform: translateX(0); }
}
:where(.star-motion-slide-start) {
animation: star-slide-start var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-slide-end {
from { opacity: 0; transform: translateX(calc(var(--star-motion-distance) * 2)); }
to { opacity: 1; transform: translateX(0); }
}
:where(.star-motion-slide-end) {
animation: star-slide-end var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-pop {
0% { opacity: 0; transform: scale(var(--star-motion-scale-from)); }
64% { opacity: 1; transform: scale(calc(2 - var(--star-motion-scale-from))); }
100% { opacity: 1; transform: scale(1); }
}
:where(.star-motion-pop) {
animation: star-pop var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-flip-x {
from { opacity: 0; transform: perspective(800px) rotateX(var(--star-motion-angle)); }
to { opacity: 1; transform: perspective(800px) rotateX(0deg); }
}
:where(.star-motion-flip-x) {
animation: star-flip-x var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-flip-y {
from { opacity: 0; transform: perspective(800px) rotateY(var(--star-motion-angle)); }
to { opacity: 1; transform: perspective(800px) rotateY(0deg); }
}
:where(.star-motion-flip-y) {
animation: star-flip-y var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-swing {
from { opacity: 0; transform: rotate(var(--star-motion-angle)); }
to { opacity: 1; transform: rotate(0deg); }
}
:where(.star-motion-swing) {
animation: star-swing var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-reveal {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
:where(.star-motion-reveal) {
animation: star-reveal var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-fade-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
:where(.star-motion-fade-out) {
animation: star-fade-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-rise-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(var(--star-motion-distance)); }
}
:where(.star-motion-rise-out) {
animation: star-rise-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-fall-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(calc(var(--star-motion-distance) * -1)); }
}
:where(.star-motion-fall-out) {
animation: star-fall-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-scale-out {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(var(--star-motion-scale-from)); }
}
:where(.star-motion-scale-out) {
animation: star-scale-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-zoom-out {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(calc(2 - var(--star-motion-scale-from))); }
}
:where(.star-motion-zoom-out) {
animation: star-zoom-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-slide-start-out {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(calc(var(--star-motion-distance) * -2)); }
}
:where(.star-motion-slide-start-out) {
animation: star-slide-start-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-slide-end-out {
0% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(calc(var(--star-motion-distance) * 2)); }
}
:where(.star-motion-slide-end-out) {
animation: star-slide-end-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-pop-out {
0% { opacity: 1; transform: scale(1); }
36% { opacity: 1; transform: scale(calc(2 - var(--star-motion-scale-from))); }
100% { opacity: 0; transform: scale(var(--star-motion-scale-from)); }
}
:where(.star-motion-pop-out) {
animation: star-pop-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-flip-x-out {
0% { opacity: 1; transform: perspective(800px) rotateX(0deg); }
100% { opacity: 0; transform: perspective(800px) rotateX(var(--star-motion-angle)); }
}
:where(.star-motion-flip-x-out) {
animation: star-flip-x-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-flip-y-out {
0% { opacity: 1; transform: perspective(800px) rotateY(0deg); }
100% { opacity: 0; transform: perspective(800px) rotateY(var(--star-motion-angle)); }
}
:where(.star-motion-flip-y-out) {
animation: star-flip-y-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-swing-out {
0% { opacity: 1; transform: rotate(0deg); }
100% { opacity: 0; transform: rotate(var(--star-motion-angle)); }
}
:where(.star-motion-swing-out) {
animation: star-swing-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-reveal-out {
0% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
:where(.star-motion-reveal-out) {
animation: star-reveal-out var(--star-motion-dur) var(--star-motion-ease) calc(var(--star-motion-delay) + var(--star-motion-index) * var(--star-motion-stagger)) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-pulse {
0%, 100% { opacity: 1; }
50% { opacity: var(--star-motion-dim); }
}
:where(.star-motion-pulse) {
animation: star-pulse var(--star-motion-period, var(--star-period-pulse)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(calc(2 - var(--star-motion-scale-from))); }
}
:where(.star-motion-breathe) {
animation: star-breathe var(--star-motion-period, var(--star-period-drift)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(calc(var(--star-motion-amount) * -1)); }
}
:where(.star-motion-float) {
animation: star-float var(--star-motion-period, var(--star-period-drift)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(calc(var(--star-motion-amount) * -1)); }
40% { transform: translateX(var(--star-motion-amount)); }
60% { transform: translateX(calc(var(--star-motion-amount) * -0.6)); }
80% { transform: translateX(calc(var(--star-motion-amount) * 0.6)); }
}
:where(.star-motion-shake) {
animation: star-shake var(--star-motion-period, var(--star-period-pulse)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(calc(var(--star-motion-amount) * -2)); }
70% { transform: translateY(calc(var(--star-motion-amount) * -0.8)); }
}
:where(.star-motion-bounce) {
animation: star-bounce var(--star-motion-period, var(--star-period-pulse)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-heartbeat {
0%, 40%, 100% { transform: scale(1); }
14% { transform: scale(calc(2 - var(--star-motion-scale-from))); }
28% { transform: scale(1); }
}
:where(.star-motion-heartbeat) {
animation: star-heartbeat var(--star-motion-period, var(--star-period-pulse)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-ping {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(calc(1 + calc(2 - var(--star-motion-scale-from)))); }
}
:where(.star-motion-ping) {
animation: star-ping var(--star-motion-period, var(--star-period-pulse)) linear var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
:where(.star-motion-spin) {
animation: star-spin var(--star-motion-period, var(--star-period-pulse)) linear var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-wobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(var(--star-motion-angle)); }
75% { transform: rotate(calc(var(--star-motion-angle) * -1)); }
}
:where(.star-motion-wobble) {
animation: star-wobble var(--star-motion-period, var(--star-period-pulse)) var(--star-motion-ease) var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-sweep {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
:where(.star-motion-sweep) {
animation: star-sweep var(--star-motion-period, var(--star-period-pulse)) linear var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
:where(.star-motion-blink) {
animation: star-blink var(--star-motion-period, var(--star-period-pulse)) linear var(--star-motion-delay) var(--star-motion-repeat) both;
transform-origin: var(--star-motion-origin);
}
@keyframes star-scroll-parallax {
from { transform: translateY(var(--star-motion-depth)); }
to { transform: translateY(calc(var(--star-motion-depth) * -1)); }
}
@keyframes star-scroll-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@supports (animation-timeline: view()) {
:where(.star-motion-scroll-parallax) {
animation: star-scroll-parallax auto linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
transform-origin: var(--star-motion-origin);
}
:where(.star-motion-scroll-progress) {
animation: star-scroll-progress auto linear both;
animation-timeline: scroll(root block);
animation-range: normal;
transform-origin: var(--star-motion-origin);
}
}
:where(.star-motion-interactive, .star-motion-lift, .star-motion-press) {
transition: transform var(--star-dur-fast) var(--star-motion-ease), opacity var(--star-dur-fast) var(--star-motion-ease);
}
:where(.star-motion-lift:hover) {
transform: translateY(calc(var(--star-motion-pop) * -1));
}
:where(.star-motion-lift:active, .star-motion-press:active) {
transform: scale(var(--star-motion-scale-from));
}
:where(.star-motion-mask) {
overflow: hidden;
}
:where(.star-motion-stagger > :nth-child(1)) {
--star-motion-index: 0;
}
:where(.star-motion-stagger > :nth-child(2)) {
--star-motion-index: 1;
}
:where(.star-motion-stagger > :nth-child(3)) {
--star-motion-index: 2;
}
:where(.star-motion-stagger > :nth-child(4)) {
--star-motion-index: 3;
}
:where(.star-motion-stagger > :nth-child(5)) {
--star-motion-index: 4;
}
:where(.star-motion-stagger > :nth-child(6)) {
--star-motion-index: 5;
}
:where(.star-motion-stagger > :nth-child(7)) {
--star-motion-index: 6;
}
:where(.star-motion-stagger > :nth-child(8)) {
--star-motion-index: 7;
}
:where(.star-motion-stagger > :nth-child(9)) {
--star-motion-index: 8;
}
:where(.star-motion-stagger > :nth-child(10)) {
--star-motion-index: 9;
}
:where(.star-motion-stagger > :nth-child(11)) {
--star-motion-index: 10;
}
:where(.star-motion-stagger > :nth-child(12)) {
--star-motion-index: 11;
}
@media (prefers-reduced-motion: reduce) {
:where([class*="star-motion-"]) {
animation: none;
animation-timeline: none;
transition: none;
}
}
:where(:root) {
--star-icon-size-xs: 0.75em;
--star-icon-size-sm: 0.875em;
--star-icon-size-md: 1em;
--star-icon-size-lg: 1.25em;
--star-icon-size-xl: 1.5em;
}
.star-icon {
--star-icon-size: var(--star-icon-size-md);
display: inline-block;
inline-size: var(--star-icon-size);
block-size: var(--star-icon-size);
fill: currentColor;
flex: none;
vertical-align: text-bottom;
}
.star-icon[data-size="xs"] {
--star-icon-size: var(--star-icon-size-xs);
}
.star-icon[data-size="sm"] {
--star-icon-size: var(--star-icon-size-sm);
}
.star-icon[data-size="md"] {
--star-icon-size: var(--star-icon-size-md);
}
.star-icon[data-size="lg"] {
--star-icon-size: var(--star-icon-size-lg);
}
.star-icon[data-size="xl"] {
--star-icon-size: var(--star-icon-size-xl);
}
.star-icon-sprite {
display: none;
}
:where(:root) {
--star-text-md: var(--star-text-base);
--star-radius-base: var(--star-radius-control);
--star-radius: var(--star-radius-control);
--star-surface-hover: var(--star-surface-raised);
--star-ease-snap: var(--star-ease-spring);
}
:where([data-starplane-control-button]) {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-2, 8px);
border: 1px solid transparent;
border-radius: var(--star-radius-control, 8px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition:
background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
opacity var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-button][data-size="md"]) {
height: 36px;
padding: 0 var(--star-space-4, 16px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-control-button][data-size="sm"]) {
height: 28px;
padding: 0 var(--star-space-3, 12px);
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-button][data-variant="primary"]) {
background: var(--star-accent-cta, var(--star-accent, #3b6ef0));
color: var(--star-accent-on, #ffffff);
box-shadow: var(--star-shadow-1, 0 1px 2px rgba(28, 25, 20, 0.10));
}
:where([data-starplane-control-button][data-variant="primary"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-accent-cta, var(--star-accent, #3b6ef0)) 88%, #000);
box-shadow: var(--star-shadow-2, 0 4px 12px -4px rgba(28, 25, 20, 0.22));
}
:where([data-starplane-control-button][data-variant="ghost"]) {
background: transparent;
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
color: var(--star-text, #1c1914);
}
:where([data-starplane-control-button][data-variant="ghost"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-text, #1c1914) 6%, transparent);
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-button][data-variant="danger"]) {
background: var(--star-danger, #b3261e);
color: var(--star-accent-on, #ffffff);
box-shadow: var(--star-shadow-1, 0 1px 2px rgba(28, 25, 20, 0.10));
}
:where([data-starplane-control-button][data-variant="danger"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-danger, #b3261e) 88%, #000);
box-shadow: var(--star-shadow-2, 0 4px 12px -4px rgba(179, 38, 30, 0.30));
}
:where([data-starplane-control-button]:active:not(:disabled)) {
transform: translateY(0.5px);
box-shadow: var(--star-shadow-1, 0 1px 1px rgba(28, 25, 20, 0.10));
}
:where([data-starplane-control-button]:disabled:not([data-loading="true"])) {
background: color-mix(in srgb, var(--star-text, #1c1914) 6%, transparent);
color: var(--star-text-muted, #9a9080);
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
box-shadow: none;
opacity: 1;
cursor: not-allowed;
}
:where([data-starplane-control-button][data-loading="true"]) {
cursor: progress;
}
:where([data-starplane-control-button-icon]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:where([data-starplane-control-spinner]) {
width: 14px;
height: 14px;
border-radius: 999px;
border: 2px solid currentColor;
border-top-color: transparent;
opacity: 0.9;
animation: starplane-control-spin 0.7s linear infinite;
}
@keyframes starplane-control-spin {
to {
transform: rotate(360deg);
}
}
:where([data-starplane-control-input]) {
box-sizing: border-box;
display: flex;
align-items: center;
gap: var(--star-space-2, 8px);
width: 100%;
border: 1px solid var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-radius: var(--star-radius-control, 8px);
background: var(--star-surface-raised, #fbfaf7);
color: var(--star-text, #1c1914);
transition:
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-input][data-size="md"]) {
padding: 0 var(--star-space-3, 12px);
min-height: 36px;
}
:where([data-starplane-control-input][data-size="sm"]) {
padding: 0 var(--star-space-2, 8px);
min-height: 28px;
}
:where([data-starplane-control-input]:focus-within) {
border-color: var(--star-accent, #3b6ef0);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, #3b6ef0) 30%, transparent);
}
:where([data-starplane-control-input][data-invalid="true"]) {
border-color: var(--star-danger, #b3261e);
}
:where([data-starplane-control-input][data-invalid="true"]:focus-within) {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-danger, #b3261e) 26%, transparent);
}
:where([data-starplane-control-input][data-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted, #9a9080);
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
background: color-mix(in srgb, var(--star-text, #1c1914) 3%, transparent);
cursor: not-allowed;
}
:where([data-starplane-control-input-icon]) {
display: inline-flex;
align-items: center;
color: var(--star-text-muted, #9a9080);
flex: none;
}
:where([data-starplane-control-input-field]) {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.4;
}
:where([data-starplane-control-input][data-size="sm"]) [data-starplane-control-input-field] {
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-input-field]::placeholder) {
color: var(--star-text-muted, #9a9080);
}
:where([data-starplane-control-textarea]) {
box-sizing: border-box;
display: block;
width: 100%;
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
border: 1px solid var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-radius: var(--star-radius-control, 8px);
background: var(--star-surface-raised, #fbfaf7);
color: var(--star-text, #1c1914);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.5;
resize: vertical;
transition:
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-textarea][data-size="sm"]) {
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-textarea]:focus-visible) {
outline: none;
border-color: var(--star-accent, #3b6ef0);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, #3b6ef0) 30%, transparent);
}
:where([data-starplane-control-textarea][data-invalid="true"]) {
border-color: var(--star-danger, #b3261e);
}
:where([data-starplane-control-textarea]::placeholder) {
color: var(--star-text-muted, #9a9080);
}
:where([data-starplane-control-checkbox]),
:where([data-starplane-control-radio]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 8px);
cursor: pointer;
color: var(--star-text, #1c1914);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
line-height: 1.3;
user-select: none;
}
:where([data-starplane-control-checkbox][data-disabled="true"]),
:where([data-starplane-control-radio][data-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted, #9a9080);
cursor: not-allowed;
}
:where([data-starplane-control-checkbox][data-disabled="true"])
[data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box] {
background: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-radio][data-disabled="true"])
[data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot] {
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-radio][data-disabled="true"])
[data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]::after {
background: var(--star-text-muted, #9a9080);
}
:where([data-starplane-control-checkbox-input]),
:where([data-starplane-control-radio-input]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
:where([data-starplane-control-checkbox-box]) {
flex: none;
display: grid;
place-items: center;
width: 18px;
height: 18px;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
border-radius: var(--star-radius-sm, 5px);
background: var(--star-surface-raised, #fbfaf7);
color: var(--star-accent-on, #ffffff);
transition:
background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-checkbox-tick]) {
width: 14px;
height: 14px;
opacity: 0;
transform: scale(0.7);
transition:
opacity var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-checkbox-input]:checked) ~ [data-starplane-control-checkbox-box] {
background: var(--star-accent, #3b6ef0);
border-color: var(--star-accent, #3b6ef0);
}
:where([data-starplane-control-checkbox-input]:checked) ~ [data-starplane-control-checkbox-box] [data-starplane-control-checkbox-tick] {
opacity: 1;
transform: scale(1);
}
:where([data-starplane-control-checkbox-input]:focus-visible) ~ [data-starplane-control-checkbox-box],
:where([data-starplane-control-radio-input]:focus-visible) ~ [data-starplane-control-radio-dot] {
outline: 2px solid var(--star-focus-ring, #3b6ef0);
outline-offset: 2px;
}
:where([data-starplane-control-radio-dot]) {
flex: none;
position: relative;
width: 18px;
height: 18px;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
border-radius: var(--star-radius-pill, 999px);
background: var(--star-surface-raised, #fbfaf7);
transition: border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-radio-dot])::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 9px;
height: 9px;
border-radius: var(--star-radius-pill, 999px);
background: var(--star-accent, #3b6ef0);
transform: scale(0);
transition: transform var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-radio-input]:checked) ~ [data-starplane-control-radio-dot] {
border-color: var(--star-accent, #3b6ef0);
}
:where([data-starplane-control-radio-input]:checked) ~ [data-starplane-control-radio-dot]::after {
transform: scale(1);
}
:where([data-starplane-control-switch]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 8px);
cursor: pointer;
color: var(--star-text, #1c1914);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
user-select: none;
}
:where([data-starplane-control-switch][data-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted, #9a9080);
cursor: not-allowed;
}
:where([data-starplane-control-switch][data-disabled="true"]) [data-starplane-control-switch-track][data-on="true"] {
background: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-switch-track]) {
flex: none;
position: relative;
width: 38px;
height: 22px;
padding: 0;
border: none;
border-radius: var(--star-radius-pill, 999px);
cursor: inherit;
background: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
transition: background var(--star-dur-base, 0.18s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-accent, #3b6ef0);
}
:where([data-starplane-control-switch-thumb]) {
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
border-radius: var(--star-radius-pill, 999px);
background: var(--star-accent-on, #ffffff);
box-shadow: var(--star-shadow-1, 0 1px 2px rgba(28, 25, 20, 0.18));
transition: transform var(--star-dur-base, 0.18s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-switch-track][data-on="true"]) [data-starplane-control-switch-thumb] {
transform: translateX(16px);
}
:where([data-starplane-control-tablist]) {
display: inline-flex;
align-items: stretch;
gap: var(--star-space-1, 4px);
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
}
:where([data-starplane-control-tab]) {
appearance: none;
border: none;
background: transparent;
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
margin-bottom: -1px;
border-bottom: 2px solid transparent;
color: var(--star-text-muted, #6a6155);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
font-weight: 600;
cursor: pointer;
transition:
color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-tab]:hover:not([data-disabled="true"])) {
color: var(--star-text, #1c1914);
}
:where([data-starplane-control-tab][data-selected="true"]) {
color: var(--star-accent-strong, #2f57c2);
background: var(--star-surface-raised, #fbf8f1);
border-bottom-color: var(--star-accent, #3b6ef0);
}
:where([data-starplane-control-tab][data-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted, #9a9080);
cursor: not-allowed;
}
:where([data-starplane-control-tabpanel]) {
padding: var(--star-space-3, 12px) 0;
outline: none;
}
:where([data-starplane-control-badge]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 4px);
padding: 2px var(--star-space-2, 8px);
border-radius: var(--star-radius-pill, 999px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 11px);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.4;
background: color-mix(in srgb, var(--star-text, #1c1914) 6%, transparent);
color: var(--star-text, #433d33);
}
:where([data-starplane-control-badge][data-tone="ok"]) {
background: color-mix(in srgb, var(--star-ok, #2c6e4e) 9%, var(--star-surface, #fbf8f1));
color: var(--star-ok-ink, #1f6442);
}
:where([data-starplane-control-badge][data-tone="warn"]) {
background: color-mix(in srgb, var(--star-warn, #c0791a) 9%, var(--star-surface, #fbf8f1));
color: var(--star-warn-ink, #8a5a14);
}
:where([data-starplane-control-badge][data-tone="danger"]) {
background: color-mix(in srgb, var(--star-danger, #b3261e) 16%, transparent);
color: var(--star-danger-ink, #8f231b);
}
:where([data-starplane-control-avatar]) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
overflow: hidden;
border-radius: var(--star-radius-pill, 999px);
background: color-mix(in srgb, var(--star-text, #1c1914) 6%, transparent);
color: var(--star-text, #433d33);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-weight: 600;
text-transform: uppercase;
user-select: none;
}
:where([data-starplane-control-avatar][data-size="sm"]) {
width: 24px;
height: 24px;
font-size: var(--star-text-xs, 10px);
}
:where([data-starplane-control-avatar][data-size="md"]) {
width: 32px;
height: 32px;
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-avatar][data-size="lg"]) {
width: 44px;
height: 44px;
font-size: var(--star-text-base, 16px);
}
:where([data-starplane-control-avatar-img]) {
width: 100%;
height: 100%;
object-fit: cover;
}
:where([data-starplane-control-chip]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 4px);
padding: 3px 3px 3px var(--star-space-2, 8px);
border-radius: var(--star-radius-pill, 999px);
border: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
background: var(--star-surface, #f1efe9);
color: var(--star-text, #433d33);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
line-height: 1.3;
}
:where([data-starplane-control-chip]:not(:has([data-starplane-control-chip-remove]))) {
padding-right: var(--star-space-2, 8px);
}
:where([data-starplane-control-chip-icon]) {
display: inline-flex;
align-items: center;
}
:where([data-starplane-control-chip-remove]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
padding: 0;
border: none;
border-radius: var(--star-radius-pill, 999px);
background: transparent;
color: var(--star-text-muted, #9a9080);
cursor: pointer;
transition:
background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-chip-remove]:hover) {
background: color-mix(in srgb, var(--star-text, #1c1914) 8%, transparent);
color: var(--star-text, #1c1914);
}
:where([data-starplane-control-chip-remove] svg) {
width: 11px;
height: 11px;
}
:where([data-starplane-control-progress]) {
position: relative;
width: 100%;
height: 6px;
border-radius: var(--star-radius-pill, 999px);
overflow: hidden;
background: color-mix(in srgb, var(--star-text, #1c1914) 10%, transparent);
}
:where([data-starplane-control-progress-bar]) {
height: 100%;
border-radius: inherit;
background: var(--star-accent, #3b6ef0);
transition: width var(--star-dur-base, 0.18s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-control-progress][data-indeterminate="true"] [data-starplane-control-progress-bar]) {
width: 40%;
animation: starplane-control-progress-slide 1.1s var(--star-ease, var(--starplane-ease-out, ease)) infinite;
}
@keyframes starplane-control-progress-slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(280%);
}
}
:where([data-starplane-control-skeleton]) {
display: block;
width: 100%;
height: 1em;
border-radius: var(--star-radius-sm, 6px);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--star-text, #1c1914) 5%, transparent) 25%,
color-mix(in srgb, var(--star-text, #1c1914) 10%, transparent) 37%,
color-mix(in srgb, var(--star-text, #1c1914) 5%, transparent) 63%
);
background-size: 400% 100%;
animation: starplane-control-shimmer 1.4s ease infinite;
}
@keyframes starplane-control-shimmer {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
:where([data-starplane-control-empty]) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--star-space-2, 8px);
padding: var(--star-space-5, 24px);
text-align: center;
color: var(--star-text-muted, #6a6155);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starplane-control-empty-icon]) {
display: inline-flex;
color: var(--star-text-muted, #9a9080);
font-size: var(--star-text-xl, 28px);
margin-bottom: var(--star-space-1, 4px);
}
:where([data-starplane-control-empty-title]) {
color: var(--star-text, #1c1914);
font-size: var(--star-text-base, 15px);
font-weight: 600;
}
:where([data-starplane-control-empty-sub]) {
max-width: 38ch;
font-size: var(--star-text-xs, 13px);
line-height: 1.5;
}
:where([data-starplane-control-empty-action]) {
margin-top: var(--star-space-2, 8px);
}
:where([data-starplane-control-button][data-size="lg"]) {
height: 44px;
padding: 0 var(--star-space-5, 20px);
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-button][data-variant="soft"]) {
background: color-mix(in srgb, var(--star-accent, #3b6ef0) 14%, transparent);
color: var(--star-accent-strong, #2f57c2);
}
:where([data-starplane-control-button][data-variant="soft"]:hover:not(:disabled)) {
background: color-mix(in srgb, var(--star-accent, #3b6ef0) 22%, transparent);
}
:where([data-starplane-control-button][data-shape="pill"]) {
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starplane-control-button][data-shape="square"]) {
border-radius: 0;
}
:where([data-starplane-control-button][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starplane-control-input][data-size="lg"]) {
padding: 0 var(--star-space-4, 16px);
min-height: 44px;
}
:where([data-starplane-control-textarea][data-size="lg"]) {
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-input][data-variant="filled"]),
:where([data-starplane-control-textarea][data-variant="filled"]) {
border-color: transparent;
background: color-mix(in srgb, var(--star-text, #1c1914) 6%, transparent);
}
:where([data-starplane-control-input][data-variant="flush"]),
:where([data-starplane-control-textarea][data-variant="flush"]) {
border-width: 0 0 1px 0;
border-radius: 0;
background: transparent;
}
:where([data-starplane-control-textarea][data-resize="none"]) {
resize: none;
}
:where([data-starplane-control-textarea][data-resize="horizontal"]) {
resize: horizontal;
}
:where([data-starplane-control-textarea][data-resize="both"]) {
resize: both;
}
:where([data-starplane-control-checkbox][data-placement="start"]),
:where([data-starplane-control-radio][data-placement="start"]),
:where([data-starplane-control-switch][data-placement="start"]) {
flex-direction: row-reverse;
}
:where([data-starplane-control-checkbox][data-size="sm"] [data-starplane-control-checkbox-box]) {
width: 15px;
height: 15px;
}
:where([data-starplane-control-checkbox][data-size="lg"] [data-starplane-control-checkbox-box]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-radio][data-size="sm"] [data-starplane-control-radio-dot]) {
width: 15px;
height: 15px;
}
:where([data-starplane-control-radio][data-size="lg"] [data-starplane-control-radio-dot]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-checkbox][data-tone="ok"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="ok"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-ok, #2c6e4e);
border-color: var(--star-ok, #2c6e4e);
}
:where([data-starplane-control-radio][data-tone="ok"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot])::after {
background: var(--star-accent-on, #ffffff);
}
:where([data-starplane-control-checkbox][data-tone="warn"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="warn"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-warn, #c0791a);
border-color: var(--star-warn, #c0791a);
}
:where([data-starplane-control-checkbox][data-tone="danger"] [data-starplane-control-checkbox-input]:checked ~ [data-starplane-control-checkbox-box]),
:where([data-starplane-control-radio][data-tone="danger"] [data-starplane-control-radio-input]:checked ~ [data-starplane-control-radio-dot]) {
background: var(--star-danger, #b3261e);
border-color: var(--star-danger, #b3261e);
}
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-track]) {
width: 30px;
height: 18px;
}
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-thumb]) {
width: 14px;
height: 14px;
}
:where([data-starplane-control-switch][data-size="sm"] [data-starplane-control-switch-track][data-on="true"] [data-starplane-control-switch-thumb]) {
transform: translateX(12px);
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-track]) {
width: 46px;
height: 26px;
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-thumb]) {
width: 22px;
height: 22px;
}
:where([data-starplane-control-switch][data-size="lg"] [data-starplane-control-switch-track][data-on="true"] [data-starplane-control-switch-thumb]) {
transform: translateX(20px);
}
:where([data-starplane-control-switch][data-tone="ok"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-ok, #2c6e4e);
}
:where([data-starplane-control-switch][data-tone="warn"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-warn, #c0791a);
}
:where([data-starplane-control-switch][data-tone="danger"] [data-starplane-control-switch-track][data-on="true"]) {
background: var(--star-danger, #b3261e);
}
:where([data-starplane-control-tablist][data-size="sm"] [data-starplane-control-tab]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-control-tablist][data-size="lg"] [data-starplane-control-tab]) {
padding: var(--star-space-3, 12px) var(--star-space-4, 16px);
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-control-tablist][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starplane-control-tablist][data-fullwidth="true"] [data-starplane-control-tab]) {
flex: 1;
justify-content: center;
}
:where([data-starplane-control-tablist][data-variant="pills"]) {
border-bottom: none;
gap: var(--star-space-1, 4px);
}
:where([data-starplane-control-tablist][data-variant="pills"] [data-starplane-control-tab]) {
margin-bottom: 0;
border-bottom: none;
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starplane-control-tablist][data-variant="pills"] [data-starplane-control-tab][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, #3b6ef0) 14%, transparent);
color: var(--star-accent-strong, #2f57c2);
}
:where([data-starplane-control-tablist][data-variant="enclosed"] [data-starplane-control-tab]) {
margin-bottom: -1px;
border: 1px solid transparent;
border-radius: var(--star-radius-control, 8px) var(--star-radius-control, 8px) 0 0;
}
:where([data-starplane-control-tablist][data-variant="enclosed"] [data-starplane-control-tab][data-selected="true"]) {
border-color: var(--star-border, var(--starplane-border, rgba(28, 25, 20, 0.16)));
border-bottom-color: var(--star-surface-raised, #fbf8f1);
background: var(--star-surface-raised, #fbf8f1);
}
:where([data-starplane-control-badge][data-size="sm"]) {
padding: 1px var(--star-space-1, 6px);
font-size: 10px;
}
:where([data-starplane-control-badge][data-size="lg"]) {
padding: 3px var(--star-space-3, 12px);
font-size: var(--star-text-sm, 13px);
}
:where([data-starplane-control-badge][data-variant="solid"]) {
background: var(--star-text, #1c1914);
color: var(--star-surface-raised, #fbfaf7);
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="ok"]) {
background: var(--star-ok, #2c6e4e);
color: var(--star-accent-on, #ffffff);
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="warn"]) {
background: var(--star-warn, #c0791a);
color: var(--star-accent-on, #ffffff);
}
:where([data-starplane-control-badge][data-variant="solid"][data-tone="danger"]) {
background: var(--star-danger, #b3261e);
color: var(--star-accent-on, #ffffff);
}
:where([data-starplane-control-badge][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="ok"]) {
border-color: var(--star-ok, #2c6e4e);
color: var(--star-ok-ink, #1f6442);
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="warn"]) {
border-color: var(--star-warn, #c0791a);
color: var(--star-warn-ink, #8a5a14);
}
:where([data-starplane-control-badge][data-variant="outline"][data-tone="danger"]) {
border-color: var(--star-danger, #b3261e);
color: var(--star-danger-ink, #8f231b);
}
:where([data-starplane-control-badge-dot]) {
width: 6px;
height: 6px;
border-radius: var(--star-radius-pill, 999px);
background: currentColor;
flex: none;
}
:where([data-starplane-control-avatar][data-size="xs"]) {
width: 20px;
height: 20px;
font-size: 9px;
}
:where([data-starplane-control-avatar][data-size="xl"]) {
width: 56px;
height: 56px;
font-size: var(--star-text-lg, 20px);
}
:where([data-starplane-control-avatar][data-shape="square"]) {
border-radius: var(--star-radius-control, 8px);
}
:where([data-starplane-control-avatar][data-ring="true"]) {
box-shadow: 0 0 0 2px var(--star-surface, #fbf8f1),
0 0 0 4px var(--star-accent, #3b6ef0);
}
:where([data-starplane-control-avatar]) {
position: relative;
}
:where([data-starplane-control-avatar-status]) {
position: absolute;
right: 0;
bottom: 0;
width: 28%;
height: 28%;
min-width: 6px;
min-height: 6px;
border-radius: var(--star-radius-pill, 999px);
box-shadow: 0 0 0 2px var(--star-surface, #fbf8f1);
background: var(--star-text-muted, #9a9080);
}
:where([data-starplane-control-avatar-status][data-status="online"]) {
background: var(--star-ok, #2c6e4e);
}
:where([data-starplane-control-avatar-status][data-status="busy"]) {
background: var(--star-danger, #b3261e);
}
:where([data-starplane-control-avatar-status][data-status="away"]) {
background: var(--star-warn, #c0791a);
}
:where([data-starplane-control-chip][data-size="sm"]) {
font-size: 11px;
padding: 2px 2px 2px var(--star-space-1, 6px);
}
:where([data-starplane-control-chip][data-size="lg"]) {
font-size: var(--star-text-sm, 14px);
padding: 4px 4px 4px var(--star-space-3, 12px);
}
:where([data-starplane-control-chip][data-variant="solid"]) {
background: var(--star-text, #1c1914);
border-color: transparent;
color: var(--star-surface-raised, #fbfaf7);
}
:where([data-starplane-control-chip][data-variant="outline"]) {
background: transparent;
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(28, 25, 20, 0.28)));
}
:where([data-starplane-control-chip][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, #3b6ef0) 16%, transparent);
border-color: var(--star-accent, #3b6ef0);
color: var(--star-accent-strong, #2f57c2);
}
:where([data-starplane-control-progress][data-size="sm"]) {
height: 4px;
}
:where([data-starplane-control-progress][data-size="lg"]) {
height: 10px;
}
:where([data-starplane-control-progress][data-tone="ok"] [data-starplane-control-progress-bar]) {
background: var(--star-ok, #2c6e4e);
}
:where([data-starplane-control-progress][data-tone="warn"] [data-starplane-control-progress-bar]) {
background: var(--star-warn, #c0791a);
}
:where([data-starplane-control-progress][data-tone="danger"] [data-starplane-control-progress-bar]) {
background: var(--star-danger, #b3261e);
}
:where([data-starplane-control-progress-row]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 8px);
width: 100%;
}
:where([data-starplane-control-progress-value]) {
flex: none;
min-width: 3ch;
text-align: right;
color: var(--star-text-muted, #6a6155);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 12px);
font-variant-numeric: tabular-nums;
}
:where([data-starplane-control-skeleton][data-variant="circle"]) {
border-radius: var(--star-radius-pill, 999px);
aspect-ratio: 1 / 1;
}
:where([data-starplane-control-skeleton][data-variant="rect"]) {
border-radius: var(--star-radius-sm, 6px);
}
:where([data-starplane-control-skeleton][data-animation="pulse"]) {
background: color-mix(in srgb, var(--star-text, #1c1914) 8%, transparent);
animation: starplane-control-pulse 1.4s ease-in-out infinite;
}
:where([data-starplane-control-skeleton][data-animation="none"]) {
background: color-mix(in srgb, var(--star-text, #1c1914) 8%, transparent);
animation: none;
}
@keyframes starplane-control-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.45;
}
}
:where([data-starplane-control-skeleton-lines]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, 8px);
width: 100%;
}
:where([data-starplane-control-empty][data-size="sm"]) {
padding: var(--star-space-4, 16px);
gap: var(--star-space-1, 4px);
}
:where([data-starplane-control-empty][data-size="lg"]) {
padding: var(--star-space-6, 40px);
gap: var(--star-space-3, 12px);
}
:where([data-starplane-control-empty][data-align="start"]) {
align-items: flex-start;
text-align: left;
}
:where([data-starplane-control-empty-action]) {
display: flex;
flex-wrap: wrap;
gap: var(--star-space-2, 8px);
}
:where(
[data-starplane-control-button],
[data-starplane-control-tab],
[data-starplane-control-switch-track],
[data-starplane-control-chip-remove]
):focus-visible {
outline: 2px solid var(--star-focus-ring, #3b6ef0);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where(
[data-starplane-control-button],
[data-starplane-control-spinner],
[data-starplane-control-input],
[data-starplane-control-textarea],
[data-starplane-control-checkbox-box],
[data-starplane-control-checkbox-tick],
[data-starplane-control-radio-dot],
[data-starplane-control-radio-dot]::after,
[data-starplane-control-switch-track],
[data-starplane-control-switch-thumb],
[data-starplane-control-tab],
[data-starplane-control-progress-bar],
[data-starplane-control-skeleton],
[data-starplane-control-chip-remove]
) {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
:where([data-starplane-control-button]:active:not(:disabled)) {
transform: none;
}
}
:where([data-starplane-overlay-popover]) {
position: fixed;
top: 0;
left: 0;
z-index: var(--starkit-overlay-z, 2147483000);
box-sizing: border-box;
min-width: 180px;
max-width: min(92vw, 360px);
padding: var(--star-space-1, 6px);
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-window, 10px);
background: var(--star-surface-raised, #ffffff);
color: var(--star-text, #1b1714);
box-shadow: var(--star-shadow-3, 0 16px 40px -12px rgba(27, 23, 20, 0.30), 0 4px 10px -6px rgba(27, 23, 20, 0.20));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
--star-motion-scale-from: 0.985;
animation: star-scale var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
:where([data-starplane-overlay-menu]) {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
:where([data-starplane-overlay-menu-trigger]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 6px);
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-control, 7px);
background: var(--star-surface-raised, #ffffff);
color: var(--star-text, #1b1714);
padding: var(--star-space-2, 7px) var(--star-space-3, 10px);
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
transition:
background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-menu-trigger]:hover) {
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(27, 23, 20, 0.24)));
}
:where([data-starplane-overlay-menu-item]) {
display: flex;
align-items: center;
gap: var(--star-space-3, 10px);
width: 100%;
text-align: left;
border: none;
background: transparent;
border-radius: var(--star-radius-sm, 7px);
padding: var(--star-space-2, 7px) var(--star-space-3, 10px);
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
color: var(--star-text, #1b1714);
transition: background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-menu-item]:hover),
:where([data-starplane-overlay-menu-item]:focus-visible) {
background: color-mix(in srgb, var(--star-text, #1b1714) 6%, transparent);
}
:where([data-starplane-overlay-menu-item][disabled]) {
color: var(--star-text-muted, #9c938a);
cursor: not-allowed;
}
:where([data-starplane-overlay-menu-item][data-danger="true"]) {
color: var(--star-danger, #e8442c);
}
:where([data-starplane-overlay-menu-item][data-danger="true"]:hover),
:where([data-starplane-overlay-menu-item][data-danger="true"]:focus-visible) {
background: color-mix(in srgb, var(--star-danger, #e8442c) 12%, transparent);
}
:where([data-starplane-overlay-menu-icon]) {
flex: none;
display: inline-grid;
place-items: center;
width: 18px;
color: var(--star-text-muted, #6a625a);
}
:where([data-starplane-overlay-menu-label]) {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where([data-starplane-overlay-select-trigger]) {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, 6px);
min-width: 160px;
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
border-radius: var(--star-radius-control, 7px);
background: var(--star-surface-raised, #ffffff);
color: var(--star-text, #1b1714);
padding: var(--star-space-2, 7px) var(--star-space-3, 10px);
cursor: pointer;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 13px);
transition:
border-color var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-select-trigger]:hover:not([disabled])) {
border-color: var(--star-border-strong, var(--starplane-border-strong, rgba(27, 23, 20, 0.24)));
}
:where([data-starplane-overlay-select-trigger][disabled]) {
color: var(--star-text-muted, #9c938a);
cursor: not-allowed;
opacity: 0.7;
}
:where([data-starplane-overlay-select-trigger][data-placeholder="true"] [data-starplane-overlay-select-value]) {
color: var(--star-text-muted, #9c938a);
}
:where([data-starplane-overlay-select-value]) {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where([data-starplane-overlay-select-arrow]) {
flex: none;
color: var(--star-text-muted, #6a625a);
font-size: var(--star-text-xs, 11px);
}
:where([data-starplane-overlay-listbox]) {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
:where([data-starplane-overlay-option]) {
display: flex;
align-items: center;
gap: var(--star-space-3, 10px);
border-radius: var(--star-radius-sm, 7px);
padding: var(--star-space-2, 7px) var(--star-space-3, 10px);
cursor: pointer;
color: var(--star-text, #1b1714);
transition: background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-option]:hover),
:where([data-starplane-overlay-option]:focus-visible) {
background: color-mix(in srgb, var(--star-text, #1b1714) 6%, transparent);
}
:where([data-starplane-overlay-option][aria-disabled="true"]) {
color: var(--star-text-muted, #9c938a);
cursor: not-allowed;
}
:where([data-starplane-overlay-option][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, #e8442c) 12%, transparent);
color: var(--star-accent, #e8442c);
}
:where([data-starplane-overlay-option-label]) {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
:where([data-starplane-overlay-option-check]) {
flex: none;
opacity: 0;
color: var(--star-accent, #e8442c);
}
:where([data-starplane-overlay-option][data-selected="true"] [data-starplane-overlay-option-check]) {
opacity: 1;
}
:where([data-starplane-overlay-sheet-root]) {
position: fixed;
inset: 0;
z-index: var(--starkit-overlay-z, 2147483000);
display: flex;
}
:where([data-starplane-overlay-sheet-root][data-side="bottom"]) {
align-items: flex-end;
}
:where([data-starplane-overlay-sheet-root][data-side="top"]) {
align-items: flex-start;
}
:where([data-starplane-overlay-sheet-root][data-side="left"]) {
justify-content: flex-start;
}
:where([data-starplane-overlay-sheet-root][data-side="right"]) {
justify-content: flex-end;
}
:where([data-starplane-overlay-sheet-scrim]) {
position: absolute;
inset: 0;
background: var(--star-overlay, var(--starplane-scrim, rgba(27, 23, 20, 0.42)));
animation: star-fade var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
:where([data-starplane-overlay-sheet]) {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: auto;
padding: var(--star-space-4, 16px);
background: var(--star-surface-raised, #ffffff);
color: var(--star-text, #1b1714);
border: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(27, 23, 20, 0.08)));
box-shadow: var(--star-shadow-3, 0 -8px 40px -12px rgba(27, 23, 20, 0.40));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
--star-motion-distance: 8px;
animation: star-rise var(--star-dur-base, 0.18s) var(--star-ease, var(--starplane-ease-out, ease)) both;
}
:where([data-starplane-overlay-sheet][data-side="bottom"]),
:where([data-starplane-overlay-sheet][data-side="top"]) {
width: 100%;
max-height: 86vh;
}
:where([data-starplane-overlay-sheet][data-side="bottom"]) {
border-radius: var(--star-radius-window, 10px) var(--star-radius-window, 10px) 0 0;
}
:where([data-starplane-overlay-sheet][data-side="top"]) {
border-radius: 0 0 var(--star-radius-window, 10px) var(--star-radius-window, 10px);
}
:where([data-starplane-overlay-sheet][data-side="left"]),
:where([data-starplane-overlay-sheet][data-side="right"]) {
height: 100%;
width: min(420px, 92vw);
}
:where([data-starplane-overlay-sheet][data-side="left"]) {
border-radius: 0 var(--star-radius-window, 10px) var(--star-radius-window, 10px) 0;
}
:where([data-starplane-overlay-sheet][data-side="right"]) {
border-radius: var(--star-radius-window, 10px) 0 0 var(--star-radius-window, 10px);
}
:where([data-starplane-overlay-sheet][data-side="bottom"]) {
animation-name: star-rise;
--star-motion-distance: 16px;
}
:where([data-starplane-overlay-sheet][data-side="top"]) {
animation-name: star-fall;
--star-motion-distance: 16px;
}
:where([data-starplane-overlay-sheet][data-side="left"]) {
animation-name: star-slide-start;
--star-motion-distance: 8px;
}
:where([data-starplane-overlay-sheet][data-side="right"]) {
animation-name: star-slide-end;
--star-motion-distance: 8px;
}
:where([data-starplane-overlay-menu-trigger]):focus-visible,
:where([data-starplane-overlay-select-trigger]):focus-visible,
:where([data-starplane-overlay-menu-item]):focus-visible,
:where([data-starplane-overlay-option]):focus-visible,
:where([data-starplane-overlay-sheet]):focus-visible {
outline: 2px solid var(--star-focus-ring, #e8442c);
outline-offset: 2px;
}
:where([data-starplane-overlay-popover][data-size="sm"]) {
min-width: 140px;
padding: var(--star-space-1, 4px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-popover][data-size="lg"]) {
min-width: 240px;
max-width: min(94vw, 440px);
padding: var(--star-space-2, 8px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-overlay-popover][data-arrow="true"])::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: var(--star-surface-raised, #ffffff);
border: 1px solid var(--star-border, var(--starplane-border, rgba(27, 23, 20, 0.14)));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starplane-overlay-popover][data-arrow="true"][data-placement^="bottom"])::after {
top: -5px;
left: 16px;
border-right: none;
border-bottom: none;
}
:where([data-starplane-overlay-popover][data-arrow="true"][data-placement^="top"])::after {
bottom: -5px;
left: 16px;
border-left: none;
border-top: none;
}
:where([data-starplane-overlay-menu][data-size="sm"] [data-starplane-overlay-menu-item]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-menu][data-size="lg"] [data-starplane-overlay-menu-item]) {
padding: var(--star-space-3, 10px) var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-overlay-menu][data-inset="true"] [data-starplane-overlay-menu-item]) {
padding-left: calc(18px + var(--star-space-3, 10px) + var(--star-space-3, 10px));
}
:where([data-starplane-overlay-menu][data-inset="true"] [data-starplane-overlay-menu-item] [data-starplane-overlay-menu-icon]) {
margin-left: calc(-1 * (18px + var(--star-space-3, 10px)));
}
:where([data-starplane-overlay-select-trigger][data-size="sm"]) {
min-width: 120px;
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
font-size: var(--star-text-2xs, 12px);
}
:where([data-starplane-overlay-select-trigger][data-size="lg"]) {
min-width: 200px;
padding: var(--star-space-3, 10px) var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-overlay-listbox][data-size="sm"] [data-starplane-overlay-option]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
}
:where([data-starplane-overlay-listbox][data-size="lg"] [data-starplane-overlay-option]) {
padding: var(--star-space-3, 10px) var(--star-space-4, 14px);
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-overlay-select-trigger][data-invalid="true"]) {
border-color: var(--star-danger, #e8442c);
}
:where([data-starplane-overlay-select-trigger][data-invalid="true"]:focus-visible) {
outline-color: var(--star-danger, #e8442c);
}
:where([data-starplane-overlay-select-clear]) {
flex: none;
display: inline-grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 50%;
cursor: pointer;
color: var(--star-text-muted, #6a625a);
font-size: var(--star-text-xs, 13px);
line-height: 1;
transition: background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-overlay-select-clear]:hover) {
background: color-mix(in srgb, var(--star-text, #1b1714) 10%, transparent);
color: var(--star-text, #1b1714);
}
:where([data-starplane-overlay-sheet][data-side="left"][data-size="sm"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="sm"]) {
width: min(300px, 92vw);
}
:where([data-starplane-overlay-sheet][data-side="left"][data-size="lg"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="lg"]) {
width: min(560px, 96vw);
}
:where([data-starplane-overlay-sheet][data-side="left"][data-size="full"]),
:where([data-starplane-overlay-sheet][data-side="right"][data-size="full"]) {
width: 100vw;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="sm"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="sm"]) {
max-height: 40vh;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="lg"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="lg"]) {
max-height: 94vh;
}
:where([data-starplane-overlay-sheet][data-side="top"][data-size="full"]),
:where([data-starplane-overlay-sheet][data-side="bottom"][data-size="full"]) {
height: 100vh;
max-height: 100vh;
}
:where([data-starplane-overlay-sheet-root][data-scrim="off"] [data-starplane-overlay-sheet-scrim]) {
background: transparent;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-overlay-popover]),
:where([data-starplane-overlay-sheet]),
:where([data-starplane-overlay-sheet-scrim]),
:where([data-starplane-overlay-menu-trigger]),
:where([data-starplane-overlay-select-trigger]),
:where([data-starplane-overlay-menu-item]),
:where([data-starplane-overlay-option]) {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
:where([data-starplane-dv-table-scroll]) {
box-sizing: border-box;
max-height: 100%;
overflow: auto;
border-radius: var(--star-radius-window, 10px);
background: var(--star-surface, #ffffff);
color: var(--star-text, #1b1714);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starplane-dv-table-scroll]) *,
:where([data-starplane-dv-table-scroll]) *::before,
:where([data-starplane-dv-table-scroll]) *::after {
box-sizing: border-box;
}
:where([data-starplane-dv-table]) {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--star-text-sm, 14px);
}
:where([data-starplane-dv-thead] [data-starplane-dv-th]) {
position: sticky;
top: 0;
z-index: 1;
text-align: start;
font-weight: var(--star-weight-semibold, 600);
white-space: nowrap;
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
color: var(--star-text-muted, #5b5650);
background: var(--star-surface-raised, #f6f4ef);
border-bottom: 1px solid var(--star-border, #d9d3c7);
}
:where([data-starplane-dv-th][data-align="center"]),
:where([data-starplane-dv-cell][data-align="center"]) {
text-align: center;
}
:where([data-starplane-dv-th][data-align="end"]),
:where([data-starplane-dv-cell][data-align="end"]) {
text-align: end;
}
:where([data-starplane-dv-th][data-select]),
:where([data-starplane-dv-cell][data-select]) {
width: 1%;
white-space: nowrap;
text-align: center;
}
:where([data-starplane-dv-sortbtn]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 8px);
width: 100%;
margin: 0;
padding: 0;
border: none;
background: transparent;
color: inherit;
font: inherit;
font-weight: 600;
cursor: pointer;
text-align: inherit;
}
:where([data-starplane-dv-sort]) {
font-size: var(--star-text-xs, 10px);
line-height: 1;
color: var(--star-text-muted, #908a80);
}
:where([data-starplane-dv-sort][data-dir="ascending"]),
:where([data-starplane-dv-sort][data-dir="descending"]) {
color: var(--star-accent, #e8442c);
}
:where([data-starplane-dv-cell]) {
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
text-align: start;
line-height: var(--star-leading-normal, 1.5);
border-bottom: 1px solid var(--star-border, #ece7dc);
color: var(--star-text, #1b1714);
}
:where([data-starplane-dv-row][data-clickable="true"]) {
cursor: pointer;
}
:where([data-starplane-dv-tbody] [data-starplane-dv-row]) {
transition: background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tbody] [data-starplane-dv-row]:hover) {
background: color-mix(in srgb, var(--star-text, #1b1714) 4%, transparent);
}
:where([data-starplane-dv-row][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent, #e8442c) 10%, transparent);
}
:where([data-starplane-dv-empty]),
:where([data-starplane-dv-loading]),
:where([data-starplane-dv-error]) {
padding: var(--star-space-4, 20px);
text-align: center;
color: var(--star-text-muted, #908a80);
}
:where([data-starplane-dv-error]) {
color: var(--star-danger, #c0392b);
}
:where([data-starplane-dv-tree-status]) {
list-style: none;
}
:where([data-starplane-dv-vlist-status]) {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
}
:where([data-starplane-dv-table-scroll][data-density="compact"] [data-starplane-dv-cell]),
:where([data-starplane-dv-table-scroll][data-density="compact"] [data-starplane-dv-thead] [data-starplane-dv-th]) {
padding-top: var(--star-space-1, 4px);
padding-bottom: var(--star-space-1, 4px);
}
:where([data-starplane-dv-table-scroll][data-striped="true"] [data-starplane-dv-tbody] [data-starplane-dv-row]:nth-child(even)) {
background: color-mix(in srgb, var(--star-text, #1b1714) 3%, transparent);
}
:where([data-starplane-dv-table-scroll][data-sticky-header="false"] [data-starplane-dv-thead] [data-starplane-dv-th]) {
position: static;
}
:where([data-starplane-dv-table-scroll][data-size="sm"] [data-starplane-dv-table]) {
font-size: var(--star-text-xs, 12px);
}
:where([data-starplane-dv-table-scroll][data-size="lg"] [data-starplane-dv-table]) {
font-size: var(--star-text-base, 16px);
}
:where([data-starplane-dv-vlist]) {
box-sizing: border-box;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, #1b1714);
}
:where([data-starplane-dv-vlist]) * {
box-sizing: border-box;
}
:where([data-starplane-dv-vlist-scroll]) {
overflow: auto;
border-radius: var(--star-radius-window, 10px);
background: var(--star-surface, #ffffff);
}
:where([data-starplane-dv-vlist-sizer]) {
position: relative;
width: 100%;
}
:where([data-starplane-dv-vlist-item]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 0 var(--star-space-3, 12px);
border-bottom: 1px solid var(--star-border, #ece7dc);
}
:where([data-starplane-dv-tree]),
:where([data-starplane-dv-tree-group]) {
list-style: none;
margin: 0;
padding: 0;
}
:where([data-starplane-dv-tree]) {
box-sizing: border-box;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 14px);
color: var(--star-text, #1b1714);
background: var(--star-surface, #ffffff);
border-radius: var(--star-radius-window, 10px);
padding: var(--star-space-2, 8px);
}
:where([data-starplane-dv-tree]) * {
box-sizing: border-box;
}
:where([data-starplane-dv-tree-row]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 8px);
padding: var(--star-space-2, 8px) var(--star-space-2, 8px);
border-radius: var(--star-radius-control, 8px);
cursor: pointer;
transition: background var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tree-row]:hover) {
background: color-mix(in srgb, var(--star-text, #1b1714) 4%, transparent);
}
:where([data-starplane-dv-tree-item][data-disabled="true"] > [data-starplane-dv-tree-row]) {
cursor: not-allowed;
opacity: 0.5;
}
:where([data-starplane-dv-tree-item][data-disabled="true"] > [data-starplane-dv-tree-row]:hover) {
background: transparent;
}
:where([data-starplane-dv-tree-item][data-selected="true"] > [data-starplane-dv-tree-row]) {
background: color-mix(in srgb, var(--star-accent, #e8442c) 10%, transparent);
color: var(--star-accent, #e8442c);
}
:where([data-starplane-dv-tree-twisty]) {
flex: none;
display: inline-grid;
place-items: center;
width: var(--star-space-5, 1.125rem);
height: var(--star-space-5, 1.125rem);
margin: 0;
padding: 0;
border: none;
border-radius: var(--star-radius-sm, 4px);
background: transparent;
color: var(--star-text-muted, #908a80);
cursor: pointer;
font-size: var(--star-text-lg, 0.875rem);
line-height: 1;
transition: transform var(--star-dur-fast, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starplane-dv-tree-twisty-glyph]) {
display: inline-flex;
width: 1em;
height: 1em;
}
:where([data-starplane-dv-tree-twisty-glyph] svg) {
width: 100%;
height: 100%;
display: block;
}
:where([data-starplane-dv-tree-twisty][data-open="true"]) {
transform: rotate(90deg);
}
:where([data-starplane-dv-tree-twisty][data-leaf]) {
visibility: hidden;
cursor: default;
}
:where([data-starplane-dv-tree][data-guides="true"] [data-starplane-dv-tree-group]) {
border-inline-start: 1px solid var(--star-border, #ece7dc);
margin-inline-start: var(--star-space-3, 12px);
}
:where([data-starplane-dv-tree][data-density="compact"] [data-starplane-dv-tree-row]) {
padding-top: var(--star-space-1, 4px);
padding-bottom: var(--star-space-1, 4px);
}
:where([data-starplane-dv-tree-icon]) {
flex: none;
display: inline-flex;
align-items: center;
color: var(--star-text-muted, #5b5650);
}
:where([data-starplane-dv-tree-label]) {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree])
:where(button, input, [tabindex]):focus-visible {
outline: 2px solid var(--star-focus-ring, #e8442c);
outline-offset: -2px;
border-radius: var(--star-radius-sm, 6px);
}
:where([data-starplane-dv-tree-item]):focus-visible {
outline: 2px solid var(--star-focus-ring, #e8442c);
outline-offset: -2px;
border-radius: var(--star-radius-control, 8px);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *,
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *::before,
:where([data-starplane-dv-table-scroll], [data-starplane-dv-vlist], [data-starplane-dv-tree]) *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
:where([data-starplane-field]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, 6px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text, #1b1714);
}
:where([data-starplane-field-label]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 4px);
font-size: var(--star-text-sm, 11px);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
letter-spacing: var(--star-tracking-tight, var(--starplane-tracking-tight, -0.01em));
color: var(--star-text, #1b1714);
}
:where([data-starplane-field-required]) {
color: var(--star-danger, #c0392b);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
}
:where([data-starplane-field-hint]) {
font-size: var(--star-text-xs, 10px);
font-weight: var(--star-weight-normal, 400);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, #6a625a);
}
:where([data-starplane-field-control]) {
display: flex;
flex-direction: column;
}
:where([data-starplane-field-control]) :where(input, textarea, select) {
width: 100%;
font: inherit;
color: var(--star-text, #1b1714);
background: var(--star-surface-raised, var(--starplane-bg-elevated, transparent));
border: 1px solid var(--star-border, #cfc7b5);
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
outline: none;
transition:
border-color var(--star-dur-fast, 0.14s) var(--star-ease, ease),
box-shadow var(--star-dur-fast, 0.14s) var(--star-ease, ease);
}
:where([data-starplane-field-control]) :where(input::placeholder, textarea::placeholder) {
color: var(--star-text-muted, #6a625a);
}
:where([data-starplane-field-control]) :where(input:focus, textarea:focus, select:focus) {
border-color: var(--star-accent, #e8442c);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-focus-ring, #e8442c) 30%, transparent);
}
:where([data-starplane-field-control]) :where(input:disabled, textarea:disabled, select:disabled) {
border-color: var(--star-border, var(--starplane-border-subtle, rgba(106, 98, 90, 0.22)));
opacity: 0.6;
cursor: not-allowed;
}
:where([data-starplane-field][data-invalid="true"]) :where(input, textarea, select) {
border-color: var(--star-danger, #c0392b);
}
:where([data-starplane-field][data-invalid="true"]) :where(input:focus, textarea:focus, select:focus) {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-danger, #c0392b) 26%, transparent);
}
:where([data-starplane-field-error]) {
font-size: var(--star-text-xs, 10px);
font-weight: var(--star-weight-medium, 500);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-danger-ink, var(--star-danger, #c0392b));
}
:where([data-starplane-field-row]) {
display: flex;
gap: var(--star-space-3, 12px);
align-items: flex-start;
}
:where([data-starplane-field-row]) > :where([data-starplane-field]) {
flex: 1 1 0;
min-width: 0;
}
:where([data-starplane-field][data-orientation="horizontal"]) {
flex-direction: row;
align-items: baseline;
gap: var(--star-space-3, 12px);
}
:where([data-starplane-field][data-orientation="horizontal"]) > :where([data-starplane-field-label]) {
flex: 0 0 auto;
min-width: 8rem;
padding-top: var(--star-space-2, 8px);
}
:where([data-starplane-field][data-orientation="horizontal"]) > :where([data-starplane-field-control]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starplane-field][data-size="sm"]) :where([data-starplane-field-control]) :where(input, textarea, select) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
font-size: var(--star-text-xs, 13px);
}
:where([data-starplane-field][data-size="lg"]) :where([data-starplane-field-control]) :where(input, textarea, select) {
padding: var(--star-space-3, 12px) var(--star-space-4, 16px);
font-size: var(--star-text-base, 15px);
}
:where([data-starplane-field-label][data-size="sm"]) {
font-size: var(--star-text-xs, 10px);
}
:where([data-starplane-field-label][data-size="lg"]) {
font-size: var(--star-text-base, 12px);
}
:where([data-starplane-field-optional]) {
color: var(--star-text-muted, #6a625a);
font-weight: var(--star-weight-normal, 400);
font-size: var(--star-text-2xs, 8px);
letter-spacing: var(--star-tracking-tight, var(--starplane-tracking-tight, -0.01em));
}
:where([data-starplane-field-label][data-visually-hidden="true"]) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
:where([data-starplane-field-error][data-tone="warn"]) {
color: var(--star-warn-ink, #8a5a14);
}
:where([data-starplane-field-error][data-size="sm"]) {
font-size: var(--star-text-2xs, 8px);
}
:where([data-starplane-field-error]) {
display: flex;
align-items: center;
gap: var(--star-space-1, 4px);
}
:where([data-starplane-field-error-icon]) {
display: inline-flex;
align-items: center;
flex: none;
line-height: 0;
}
:where([data-starplane-field-error-icon] svg) {
display: block;
}
:where([data-starplane-field-row][data-orientation="stacked"]) {
flex-direction: column;
align-items: stretch;
}
:where([data-starplane-field-row][data-align="center"]) {
align-items: center;
}
:where([data-starplane-field-row][data-align="end"]) {
align-items: flex-end;
}
:where([data-starplane-field-row][data-align="stretch"]) {
align-items: stretch;
}
:where([data-starplane-field-row][data-gap="sm"]) {
gap: var(--star-space-2, 8px);
}
:where([data-starplane-field-row][data-gap="lg"]) {
gap: var(--star-space-4, 16px);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starplane-field-control]) :where(input, textarea, select) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-icon-button], [data-starkit-toggle-button]) {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid transparent;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
line-height: 1;
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-icon-button][data-variant="secondary"]),
:where([data-starkit-icon-button][data-variant="ghost"]),
:where([data-starkit-toggle-button][data-pressed="false"]) {
border-color: var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-toggle-button]) {
gap: var(--star-space-1, 4px);
}
:where([data-starkit-icon-button]:hover:not([aria-disabled="true"])),
:where([data-starkit-toggle-button]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-icon-button]:active:not([aria-disabled="true"])),
:where([data-starkit-toggle-button]:active:not([aria-disabled="true"])) {
transform: translateY(1px);
filter: brightness(0.96);
}
:where([data-starkit-icon-button]):focus-visible,
:where([data-starkit-toggle-button]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-icon-button][aria-disabled="true"]),
:where([data-starkit-toggle-button][aria-disabled="true"]) {
opacity: 1;
background: color-mix(in srgb, var(--star-text) 6%, transparent);
color: var(--star-text-muted);
border-color: var(--star-border);
cursor: not-allowed;
pointer-events: none;
}
:where([data-starkit-icon-button][data-shape="rounded"]) {
border-radius: var(--star-radius-control, 0.375rem);
}
:where([data-starkit-icon-button][data-shape="circle"]) {
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starkit-icon-button][data-shape="square"]) {
border-radius: 0;
}
:where([data-starkit-toggle-button][data-shape="rounded"]) {
border-radius: var(--star-radius-control, 0.375rem);
}
:where([data-starkit-toggle-button][data-shape="pill"]) {
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starkit-icon-button][data-fullwidth="true"]),
:where([data-starkit-toggle-button][data-fullwidth="true"]) {
width: 100%;
}
:where([data-starkit-icon-button][data-loading="true"]),
:where([data-starkit-toggle-button][data-loading="true"]) {
cursor: progress;
pointer-events: none;
}
:where([data-starkit-icon-button-spinner], [data-starkit-toggle-button-spinner]) {
display: inline-block;
inline-size: 1em;
block-size: 1em;
border-radius: var(--star-radius-pill, 999px);
border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
border-top-color: currentColor;
animation: starkit-control-spin 0.6s linear infinite;
}
@keyframes starkit-control-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-icon-button-spinner], [data-starkit-toggle-button-spinner]) {
animation-duration: 1.2s;
}
}
:where([data-starkit-chip]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
font: inherit;
line-height: 1;
}
:where([data-starkit-chip][data-selectable="true"]) {
cursor: pointer;
transition: filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-chip][data-selectable="true"]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-chip][data-selectable="true"]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-chip][aria-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted);
border-color: var(--star-border);
background: color-mix(in srgb, var(--star-text) 4%, transparent);
cursor: not-allowed;
pointer-events: none;
}
:where([data-starkit-chip-dismiss]) {
cursor: pointer;
background: transparent;
border: 0;
color: inherit;
font: inherit;
line-height: 1;
padding: 0;
}
:where([data-starkit-chip-dismiss]:hover) {
filter: brightness(1.2);
}
:where([data-starkit-chip-dismiss]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-segmented]) {
display: inline-flex;
gap: var(--star-space-1, 0.25rem);
}
:where([data-starkit-segment]) {
cursor: pointer;
border: 1px solid transparent;
border-radius: var(--star-radius-control, 0.375rem);
font: inherit;
line-height: 1;
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-segment]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-segment]:active:not([aria-disabled="true"])) {
transform: translateY(1px);
}
:where([data-starkit-segment]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-segment][aria-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted);
cursor: not-allowed;
}
:where([data-starkit-textarea]) {
border: 1px solid var(--star-border);
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
min-height: 4lh;
resize: vertical;
transition: border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-textarea]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-textarea][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-textarea][data-invalid="true"]):focus-visible {
outline-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-textarea][aria-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted);
border-color: var(--star-border);
cursor: not-allowed;
}
:where([data-starkit-search]) {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--star-space-2, 8px);
border: 1px solid var(--star-border);
transition: border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-search]:hover:not([data-disabled="true"])) {
border-color: color-mix(in srgb, var(--star-accent) 40%, var(--star-border));
}
:where([data-starkit-search]:active:not([data-disabled="true"])) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-search]):focus-within {
border-color: var(--star-accent, var(--starplane-accent));
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-search][data-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted);
border-color: var(--star-border);
cursor: not-allowed;
}
:where([data-starkit-search][data-readonly="true"]) {
cursor: default;
}
:where([data-starkit-search][data-readonly="true"] [data-starkit-search-input]) {
cursor: default;
}
:where([data-starkit-search-icon]) {
color: var(--star-text-muted);
flex: 0 0 auto;
}
:where([data-starkit-search][data-loading="true"] [data-starkit-search-icon]) {
color: var(--star-accent);
animation: starkit-control-spin 0.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-search][data-loading="true"] [data-starkit-search-icon]) {
animation-duration: 1.2s;
}
}
:where([data-starkit-search-input]) {
flex: 1 1 auto;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
color: inherit;
font: inherit;
}
:where([data-starkit-search-input])::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
:where([data-starkit-search-clear]) {
cursor: pointer;
flex: 0 0 auto;
background: transparent;
border: 0;
color: var(--star-text-muted, var(--starplane-text-tertiary));
font: inherit;
line-height: 1;
padding: 0;
}
:where([data-starkit-search-clear]:hover) {
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-search-clear]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-stepper-input]) {
width: 3ch;
text-align: center;
background: var(--star-surface, var(--starplane-surface-base));
border: 1px solid var(--star-border);
border-radius: var(--star-radius-control, 0.375rem);
color: var(--star-text, var(--starplane-text-primary));
font: inherit;
-moz-appearance: textfield;
appearance: textfield;
transition: border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-stepper-input])::-webkit-outer-spin-button,
:where([data-starkit-stepper-input])::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
:where([data-starkit-stepper-input]:hover:not(:disabled)) {
border-color: color-mix(in srgb, var(--star-accent) 40%, var(--star-border));
}
:where([data-starkit-stepper-input]:active:not(:disabled)) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-stepper-input]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-stepper-input]:disabled) {
opacity: 1;
color: var(--star-text-muted);
border-color: var(--star-border);
cursor: not-allowed;
}
:where([data-starkit-slider]) {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: var(--star-space-2, 0.5rem);
background: color-mix(in srgb, var(--star-text) 12%, transparent);
border-radius: var(--star-radius-pill);
cursor: pointer;
}
:where([data-starkit-slider][data-disabled="true"]) {
opacity: 1;
cursor: not-allowed;
}
:where([data-starkit-slider][data-disabled="true"])::-webkit-slider-thumb {
background: var(--star-text-muted);
box-shadow: none;
}
:where([data-starkit-slider][data-disabled="true"])::-moz-range-thumb {
background: var(--star-text-muted);
box-shadow: none;
}
:where([data-starkit-slider])::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 1rem;
border-radius: var(--star-radius-pill);
background: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-accent) 18%, transparent);
cursor: grab;
transition: box-shadow var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-slider]:active)::-webkit-slider-thumb {
cursor: grabbing;
box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--star-accent) 26%, transparent);
}
:where([data-starkit-slider])::-moz-range-thumb {
width: 1rem;
height: 1rem;
border: 0;
border-radius: var(--star-radius-pill);
background: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-accent) 18%, transparent);
cursor: grab;
}
:where([data-starkit-slider]:active)::-moz-range-thumb {
cursor: grabbing;
box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--star-accent) 26%, transparent);
}
:where([data-starkit-slider]:hover:not([data-disabled="true"]))::-webkit-slider-thumb {
box-shadow: 0 0 0 0.33rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-slider]:hover:not([data-disabled="true"]))::-moz-range-thumb {
box-shadow: 0 0 0 0.33rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-slider]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where(
[data-starkit-icon-button],
[data-starkit-toggle-button],
[data-starkit-chip],
[data-starkit-segment],
[data-starkit-textarea],
[data-starkit-search],
[data-starkit-stepper-input]
) {
transition-duration: 0.01ms;
}
:where([data-starkit-slider])::-webkit-slider-thumb {
transition-duration: 0.01ms;
}
:where(
[data-starkit-icon-button]:active,
[data-starkit-toggle-button]:active,
[data-starkit-segment]:active
) {
transform: none;
}
}
:where([data-starkit-segmented]) {
position: relative;
display: inline-flex;
align-items: stretch;
gap: var(--star-space-1, 4px);
padding: var(--star-space-1, 4px);
border-radius: var(--star-radius-pill, 9999px);
background: var(--star-surface-sunken);
box-shadow:
inset 0 0 0 1px var(--star-border),
inset 0 1px 1px color-mix(in srgb, var(--star-text) 4%, transparent);
}
:where([data-starkit-segmented-thumb]) {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 0;
border-radius: 999px;
background: transparent;
box-shadow: none;
transition: transform 240ms var(--star-ease-spring, cubic-bezier(0.34, 1.4, 0.4, 1));
will-change: transform;
}
:where([data-starkit-segment]) {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 7px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 999px;
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
color: var(--star-text-secondary, var(--starplane-text-secondary));
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
transition: color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-segment]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--starplane-focus-ring));
outline-offset: -2px;
}
:where([data-starkit-segment-dot]) {
width: 7px;
height: 7px;
border-radius: 999px;
flex: none;
background: var(--star-text-muted, var(--star-border, var(--starplane-text-secondary)));
}
:where([data-starkit-segment-dot="working"]),
:where([data-starkit-segment-dot][data-status="working"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-segment-dot="needs-attention"]),
:where([data-starkit-segment-dot][data-status="needs-attention"]) {
background: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-segment-dot="ended"]),
:where([data-starkit-segment-dot][data-status="ended"]) {
background: var(--star-text-muted, var(--star-border, var(--starplane-text-secondary)));
}
:where([data-starkit-segment-dot="ok"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-segment-dot="danger"]),
:where([data-starkit-segment-dot="warn"]) {
background: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-segment-dot="neutral"]) {
background: var(--star-text-muted, var(--star-border, var(--starplane-text-secondary)));
}
:where([data-starkit-segment-count]) {
font-variant-numeric: tabular-nums;
background: var(--star-surface);
box-shadow: inset 0 0 0 1px var(--star-border);
border-radius: var(--star-radius-xs, 7px);
padding: 1px 6px;
color: var(--star-text-muted);
}
:where([data-starkit-segmented]:not([data-variant="underline"]) [data-starkit-segment]) {
transition:
color var(--star-dur-fast, 0.12s) var(--star-ease, ease),
background-color var(--star-dur-base, 0.18s) var(--star-ease, ease),
box-shadow var(--star-dur-base, 0.18s) var(--star-ease, ease);
}
:where([data-starkit-segmented]:not([data-variant="underline"]) [data-starkit-segment][data-selected="true"]) {
background: var(--star-surface);
color: var(--star-text, var(--starplane-text-primary));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-sm));
}
:where([data-starkit-segmented]:not([data-variant="underline"]) [data-starkit-segment][data-selected="true"] [data-starkit-segment-count]) {
background: var(--star-surface-sunken);
box-shadow: none;
}
:where([data-starkit-segmented][data-variant="underline"]) {
gap: var(--star-space-3, 0.75rem);
background: transparent;
padding: 0;
border-radius: 0;
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segmented-thumb]) {
display: none;
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment]) {
border-radius: 0;
padding: 0.25rem 0.125rem;
border-bottom: 1px solid transparent;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm, 13px);
font-weight: var(--star-weight-medium, 500);
letter-spacing: normal;
text-transform: none;
background: transparent;
filter: none;
transform: none;
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment]:hover:not([aria-disabled="true"])) {
filter: none;
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment]:active:not([aria-disabled="true"])) {
transform: none;
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment][data-selected="true"]) {
color: var(--star-accent, var(--starplane-accent));
border-bottom-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-segmented][data-variant="underline"] [data-starkit-segment-count]) {
background: transparent;
padding: 0 0 0 0.25rem;
border-radius: 0;
color: var(--star-text-muted);
font-size: var(--star-text-xs, 11px);
}
:where([data-starkit-radiocard]) {
background: var(--star-surface, var(--starplane-surface));
border-radius: var(--star-radius-control, 12px);
box-shadow: inset 0 0 0 1px var(--star-border);
padding: 16px;
cursor: pointer;
transition: box-shadow var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-radiocard]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--starplane-focus-ring));
outline-offset: 2px;
}
:where([data-starkit-radiocard-row]) {
display: flex;
align-items: flex-start;
gap: 12px;
}
:where([data-starkit-radiocard-main]) { flex: 1; min-width: 0; }
:where([data-starkit-radiocard-titlerow]) {
display: flex;
align-items: center;
gap: 8px;
}
:where([data-starkit-radiocard-title]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-lg, 17px);
font-weight: var(--star-weight-semibold, 600);
color: var(--star-text);
}
:where([data-starkit-radiocard-description]) {
display: block;
margin-top: 2px;
font-size: var(--star-text-sm, 13px);
color: var(--star-text-muted);
}
:where([data-starkit-radiocard-trailing]) { text-align: right; }
:where([data-starkit-radiocard-radio]) {
flex: none;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--star-border);
background: transparent;
transition:
background-color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
box-shadow var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--star-accent, var(--starplane-accent));
box-shadow: none;
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio])::after {
content: "";
display: block;
width: 6px;
height: 10px;
margin: 3px auto 0;
border: solid var(--star-accent-on, var(--starplane-accent-on));
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
:where([data-starkit-radiocard-detail]) {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows 300ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
opacity 300ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-detail]) {
grid-template-rows: 1fr;
opacity: 1;
}
:where([data-starkit-radiocard-detailinner]) { overflow: hidden; min-height: 0; }
:where([data-starkit-featurechecklist]) {
margin-top: 12px;
padding-top: 12px;
border-top: 1px dashed var(--star-border);
}
:where([data-starkit-featurechecklist-heading]) {
display: block;
margin-bottom: 8px;
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--star-text-muted);
}
:where([data-starkit-featurechecklist-list]) {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
:where([data-starkit-featurechecklist-item]) {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--star-text-sm, 13px);
color: var(--star-text);
}
:where([data-starkit-featurechecklist-check]) {
color: var(--star-ok-ink, var(--starplane-ok-ink));
font-weight: var(--star-weight-bold, 700);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-segmented-thumb]),
:where([data-starkit-segment]),
:where([data-starkit-radiocard]),
:where([data-starkit-radiocard-radio]),
:where([data-starkit-radiocard-detail]) {
transition: none;
}
}
:where([data-starkit-switchlamp]) {
position: relative;
display: inline-flex;
align-items: center;
width: 44px;
height: 24px;
padding: 0;
border: 0;
border-radius: 999px;
background: var(--star-border);
cursor: pointer;
transition: background-color 240ms var(--star-ease, ease);
}
:where([data-starkit-switchlamp][data-checked="true"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-switchlamp][disabled]) {
opacity: 1;
color: var(--star-text-muted);
cursor: not-allowed;
}
:where([data-starkit-switchlamp]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--starplane-focus-ring));
outline-offset: 2px;
}
:where([data-starkit-switchlamp-glow]) {
position: absolute;
inset: -3px;
border-radius: 999px;
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-ok) 45%, transparent);
opacity: 0;
transition: opacity 240ms var(--star-ease, ease);
pointer-events: none;
}
:where([data-starkit-switchlamp][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
opacity: 1;
}
:where([data-starkit-switchlamp-thumb]) {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 999px;
background: var(--star-surface, var(--starplane-surface));
box-shadow: 0 1px 2px color-mix(in srgb, var(--star-text) 18%, transparent);
transition: transform 240ms var(--star-ease-spring, var(--star-ease, ease));
will-change: transform;
}
:where([data-starkit-switchlamp][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(20px);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-switchlamp]),
:where([data-starkit-switchlamp-glow]),
:where([data-starkit-switchlamp-thumb]) {
transition: none;
}
}
:where([data-starkit-pagination]) {
display: inline-flex;
align-items: center;
gap: 4px;
}
:where([data-starkit-page]),
:where([data-starkit-page-nav]) {
appearance: none;
border: none;
margin: 0;
display: inline-grid;
place-items: center;
min-width: 36px;
height: 36px;
padding: 0 6px;
border-radius: var(--star-radius-control, 0.375rem);
background: transparent;
color: color-mix(in srgb, var(--star-text) 78%, transparent);
font: inherit;
font-variant-numeric: tabular-nums;
cursor: pointer;
transition:
background-color 160ms var(--star-ease, var(--starplane-ease-out, ease)),
color 160ms var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-page]:hover),
:where([data-starkit-page-nav]:hover) {
background: color-mix(in srgb, var(--star-text) 6%, transparent);
}
:where([data-starkit-page]:active),
:where([data-starkit-page-nav]:active) {
transform: translateY(1px);
}
:where([data-starkit-page]:focus-visible),
:where([data-starkit-page-nav]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-page]:disabled),
:where([data-starkit-page-nav]:disabled) {
opacity: 1;
color: var(--star-text-muted);
cursor: default;
background: transparent;
}
:where([data-starkit-page][data-current="true"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent)) 6%, var(--star-surface));
color: var(--star-accent-strong, var(--starplane-accent-strong));
}
:where([data-starkit-page-ellipsis]) {
min-width: 24px;
text-align: center;
color: color-mix(in srgb, var(--star-text) 62%, transparent);
user-select: none;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-page]),
:where([data-starkit-page-nav]) {
transition: none;
}
}
:where([data-starkit-button-group]) {
display: inline-flex;
align-items: stretch;
}
:where([data-starkit-button-group][data-orientation="vertical"]) {
flex-direction: column;
align-items: stretch;
}
:where([data-starkit-button-group][data-orientation="horizontal"]:not([data-attached="false"])) > :not(:first-child) {
border-start-start-radius: 0;
border-end-start-radius: 0;
margin-inline-start: -1px;
}
:where([data-starkit-button-group][data-orientation="horizontal"]:not([data-attached="false"])) > :not(:last-child) {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
:where([data-starkit-button-group][data-orientation="vertical"]:not([data-attached="false"])) > :not(:first-child) {
border-start-start-radius: 0;
border-start-end-radius: 0;
margin-block-start: -1px;
}
:where([data-starkit-button-group][data-orientation="vertical"]:not([data-attached="false"])) > :not(:last-child) {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
:where([data-starkit-button-group][data-attached="false"]) {
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-button-group][data-attached="false"][data-size="sm"]) {
gap: var(--star-space-1, 0.25rem);
}
:where([data-starkit-button-group][data-attached="false"][data-size="lg"]) {
gap: var(--star-space-3, 0.75rem);
}
:where([data-starkit-button-group][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-button-group][data-fullwidth="true"]) > * {
flex: 1 1 0;
}
:where([data-starkit-button-group]) > :focus-visible,
:where([data-starkit-button-group]) > :hover {
position: relative;
z-index: 1;
}
:where([data-starkit-button-group-text]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
padding-inline: var(--star-space-3, 0.75rem);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: 0.875rem;
color: var(--star-text-muted, var(--starplane-text-secondary));
background: var(--star-surface-raised, var(--starplane-surface-raised, transparent));
border: 1px solid var(--star-border);
user-select: none;
}
:where([data-starkit-button-group-separator]) {
flex: 0 0 auto;
align-self: stretch;
background: var(--star-border);
}
:where([data-starkit-button-group-separator][data-orientation="vertical"]) {
inline-size: 1px;
}
:where([data-starkit-button-group-separator][data-orientation="horizontal"]) {
block-size: 1px;
inline-size: auto;
}
:where([data-starkit-toggle-group][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-toggle-group][data-fullwidth="true"]) > :where([data-starkit-toggle-group-item]) {
flex: 1 1 0;
}
:where([data-starkit-toggle-group][data-shape="rounded"]) > :where([data-starkit-toggle-group-item]) {
border-radius: var(--star-radius-control, 0.375rem);
}
:where([data-starkit-toggle-group][data-shape="pill"]) > :where([data-starkit-toggle-group-item]) {
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starkit-toggle-group][data-shape="square"]) > :where([data-starkit-toggle-group-item]) {
border-radius: 0;
}
:where([data-starkit-toggle-group-item]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-segmented][data-fullwidth="true"]) {
display: flex;
width: 100%;
}
:where([data-starkit-segmented][data-fullwidth="true"]) > :where([data-starkit-segment]) {
flex: 1 1 0;
justify-content: center;
}
:where([data-starkit-segmented][data-shape="square"]) > :where([data-starkit-segment]),
:where([data-starkit-segmented][data-shape="square"]) > :where([data-starkit-segmented-thumb]) {
border-radius: var(--star-radius-control, 0.375rem);
}
:where([data-starkit-search][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-search][data-invalid="true"]):focus-within {
border-color: var(--star-danger, var(--starplane-danger));
outline-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-slider][data-inline="true"]) {
width: auto;
}
:where([data-starkit-slider][data-size="sm"]) {
height: var(--star-space-1, 0.25rem);
}
:where([data-starkit-slider][data-size="lg"]) {
height: var(--star-space-3, 0.75rem);
}
:where([data-starkit-slider][data-size="sm"])::-webkit-slider-thumb {
width: 0.75rem;
height: 0.75rem;
}
:where([data-starkit-slider][data-size="lg"])::-webkit-slider-thumb {
width: 1.25rem;
height: 1.25rem;
}
:where([data-starkit-slider][data-size="sm"])::-moz-range-thumb {
width: 0.75rem;
height: 0.75rem;
}
:where([data-starkit-slider][data-size="lg"])::-moz-range-thumb {
width: 1.25rem;
height: 1.25rem;
}
:where([data-starkit-slider][data-tone="ok"])::-webkit-slider-thumb {
background: var(--star-ok, var(--starplane-ok));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-ok) 18%, transparent);
}
:where([data-starkit-slider][data-tone="ok"])::-moz-range-thumb {
background: var(--star-ok, var(--starplane-ok));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-ok) 18%, transparent);
}
:where([data-starkit-slider][data-tone="danger"])::-webkit-slider-thumb {
background: var(--star-danger, var(--starplane-danger));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-danger) 18%, transparent);
}
:where([data-starkit-slider][data-tone="danger"])::-moz-range-thumb {
background: var(--star-danger, var(--starplane-danger));
box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--star-danger) 18%, transparent);
}
:where([data-starkit-stepper][data-fullwidth="true"]) {
display: inline-flex;
width: 100%;
}
:where([data-starkit-stepper][data-fullwidth="true"]) > :where([data-starkit-stepper-input]) {
flex: 1 1 auto;
width: auto;
}
:where([data-starkit-stepper][data-size="sm"]) > :where([data-starkit-stepper-input]) {
width: 2.5ch;
font-size: var(--star-text-sm, 0.8125rem);
}
:where([data-starkit-stepper][data-size="lg"]) > :where([data-starkit-stepper-input]) {
width: 4ch;
font-size: var(--star-text-lg, 1.0625rem);
}
:where([data-starkit-stepper-input][data-align="start"]) {
text-align: start;
}
:where([data-starkit-stepper-input][data-align="end"]) {
text-align: end;
}
:where([data-starkit-stepper-input][data-align="center"]) {
text-align: center;
}
:where([data-starkit-switchlamp][data-size="sm"]) {
width: 36px;
height: 20px;
}
:where([data-starkit-switchlamp][data-size="lg"]) {
width: 52px;
height: 28px;
}
:where([data-starkit-switchlamp][data-size="sm"]) :where([data-starkit-switchlamp-thumb]) {
width: 14px;
height: 14px;
}
:where([data-starkit-switchlamp][data-size="lg"]) :where([data-starkit-switchlamp-thumb]) {
width: 22px;
height: 22px;
}
:where([data-starkit-switchlamp][data-size="sm"][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(16px);
}
:where([data-starkit-switchlamp][data-size="lg"][data-checked="true"]) :where([data-starkit-switchlamp-thumb]) {
transform: translateX(24px);
}
:where([data-starkit-switchlamp][data-tone="accent"][data-checked="true"]) {
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-switchlamp][data-tone="danger"][data-checked="true"]) {
background: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-switchlamp][data-tone="accent"][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-accent) 45%, transparent);
}
:where([data-starkit-switchlamp][data-tone="danger"][data-checked="true"]) :where([data-starkit-switchlamp-glow]) {
box-shadow: 0 0 12px 2px color-mix(in srgb, var(--star-danger) 45%, transparent);
}
:where([data-starkit-switchlamp][data-glow="false"]) :where([data-starkit-switchlamp-glow]) {
display: none;
}
:where([data-starkit-radiocardgroup][data-size="sm"]) :where([data-starkit-radiocard]) {
padding: 12px;
}
:where([data-starkit-radiocardgroup][data-size="lg"]) :where([data-starkit-radiocard]) {
padding: 20px;
}
:where([data-starkit-radiocardgroup][data-orientation="horizontal"]) {
flex-wrap: wrap;
}
:where([data-starkit-radiocardgroup][data-orientation="horizontal"]) > :where([data-starkit-radiocard]) {
flex: 1 1 240px;
}
:where([data-starkit-radiocardgroup][data-tone="ok"]) :where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-radiocardgroup][data-tone="danger"]) :where([data-starkit-radiocard][data-selected="true"]) {
box-shadow: inset 0 0 0 2px var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-radiocardgroup][data-tone="ok"]) :where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-radiocardgroup][data-tone="danger"]) :where([data-starkit-radiocard][data-selected="true"]) :where([data-starkit-radiocard-radio]) {
background: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-pagination][data-size="sm"]) :where([data-starkit-page], [data-starkit-page-nav]) {
min-width: 28px;
height: 28px;
}
:where([data-starkit-pagination][data-size="lg"]) :where([data-starkit-page], [data-starkit-page-nav]) {
min-width: 44px;
height: 44px;
}
:where([data-starkit-pagination][data-shape="pill"]) :where([data-starkit-page], [data-starkit-page-nav]) {
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starkit-pagination][data-shape="square"]) :where([data-starkit-page], [data-starkit-page-nav]) {
border-radius: 0;
}
:where([data-starkit-pagination][data-tone="neutral"]) :where([data-starkit-page][data-current="true"]) {
background: color-mix(in srgb, var(--star-text) 10%, transparent);
color: var(--star-text);
}
:where([data-starkit-copy-button]) {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
font: inherit;
font-family: var(--star-font-ui);
line-height: 1;
transition:
transform var(--star-dur-fast) var(--star-ease),
color var(--star-dur-base) var(--star-ease),
background var(--star-dur-base) var(--star-ease),
border-color var(--star-dur-base) var(--star-ease);
}
:where([data-starkit-copy-button][data-presentation="both"]) {
gap: var(--star-space-2);
}
:where([data-starkit-copy-button][data-variant="outline"]) {
border-color: var(--star-border);
}
:where([data-starkit-copy-button][data-variant="solid"]) {
background: var(--star-surface-raised);
border-color: var(--star-border);
}
:where([data-starkit-copy-button]:hover:not([aria-disabled="true"])) {
background: color-mix(in srgb, var(--star-text) 8%, transparent);
color: var(--star-text);
}
:where([data-starkit-copy-button]:active:not([aria-disabled="true"])) {
transform: translateY(1px);
}
:where([data-starkit-copy-button]):focus-visible {
outline: 2px solid var(--star-focus-ring);
outline-offset: 2px;
}
:where([data-starkit-copy-button][aria-disabled="true"]) {
opacity: 1;
color: var(--star-text-muted);
cursor: not-allowed;
pointer-events: none;
}
:where([data-starkit-copy-button][data-state="copied"]) {
background: var(--star-ok-soft);
border-color: color-mix(in srgb, var(--star-ok) 45%, transparent);
}
:where([data-starkit-copy-button][data-state="error"]) {
background: var(--star-danger-soft);
border-color: color-mix(in srgb, var(--star-danger) 45%, transparent);
}
:where([data-starkit-copy-button-glyph]) {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
font-size: 1.15em;
}
:where([data-starkit-copy-button-glyph]) :where([data-glyph-for]) {
display: none;
}
:where([data-starkit-copy-button-glyph]) :where([data-glyph-for][data-glyph-on]) {
display: inline-flex;
}
:where([data-starkit-copy-button-label]) {
white-space: nowrap;
}
:where([data-starkit-copy-button][data-presentation="icon"]) :where([data-starkit-copy-button-label]) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
:where([data-starkit-copy-button][data-presentation="label"]) :where([data-starkit-copy-button-glyph]) {
display: none;
}
:where([data-starkit-copy-button-live]) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
:where([data-starkit-alert]) {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--star-space-3, 12px);
background: var(--star-surface, var(--star-bg, var(--starplane-surface)));
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-left-width: 3px;
border-left-color: var(--star-border-strong, var(--starplane-border));
}
:where([data-starkit-alert][data-tone="info"]) {
border-left-color: var(--star-info, var(--starplane-info));
background: color-mix(in oklab, var(--star-info, var(--starplane-info)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-alert][data-tone="ok"]) {
border-left-color: var(--star-ok, var(--starplane-ok));
background: color-mix(in oklab, var(--star-ok, var(--starplane-ok)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-alert][data-tone="warn"]) {
border-left-color: var(--star-warn, var(--starplane-warn));
background: color-mix(in oklab, var(--star-warn, var(--starplane-warn)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-alert][data-tone="danger"]) {
border-left-color: var(--star-danger, var(--starplane-danger));
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-alert-icon]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5em;
height: 1.5em;
font-size: var(--star-text-lg, 1.125rem);
line-height: 1;
}
:where([data-starkit-alert-body]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-alert-title]) {
font-weight: 600;
margin-bottom: var(--star-space-1, 0.25rem);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-alert-description]) {
color: inherit;
}
:where([data-starkit-alert-dismiss]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--star-space-5, 1.25rem);
height: var(--star-space-5, 1.25rem);
padding: 0;
border: 0;
border-radius: var(--star-radius-sm, 0.375rem);
background: transparent;
color: inherit;
line-height: 1;
cursor: pointer;
opacity: 0.65;
transition: opacity var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-alert-dismiss]:hover),
:where([data-starkit-alert-dismiss]):focus-visible {
opacity: 1;
background: color-mix(in srgb, var(--star-text, #1c1914) 10%,
var(--star-surface, var(--star-bg, #fbf8f1)));
}
:where([data-starkit-alert-dismiss]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-alert][data-density="compact"]) {
font-size: 0.875em;
}
:where([data-starkit-alert][data-register="legend"]) {
font-family: var(--star-font-mono, var(--starplane-font-mono, ui-monospace, monospace));
font-size: 0.8125em;
letter-spacing: 0.02em;
}
:where([data-starkit-kbd]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-1, 4px);
border: 1px solid var(--star-border, #d7dade);
border-radius: var(--star-radius-sm, 6px);
box-shadow: 0 1px 0 var(--star-border, #d7dade);
font-size: var(--star-text-xs, 11px);
line-height: 1.2;
min-width: 1.25em;
}
:where([data-starkit-kbd][data-size="sm"]) {
font-size: 10px;
min-width: 1.1em;
}
:where([data-starkit-kbd][data-size="lg"]) {
font-size: 13px;
min-width: 1.5em;
}
:where([data-starkit-kbd][data-density="compact"]) {
letter-spacing: -0.02em;
}
:where([data-starkit-kbd][data-register="legend"]) {
text-transform: uppercase;
letter-spacing: 0.04em;
}
:where([data-starkit-kbd-group]) {
vertical-align: middle;
}
:where([data-starkit-callout]) {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--star-space-3, 12px);
padding: var(--star-space-4, 16px);
border-radius: var(--star-radius-control, 8px);
background: var(--star-surface, var(--star-bg, var(--starplane-surface)));
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-left-width: 3px;
border-left-color: var(--star-border-strong, var(--starplane-border));
}
:where([data-starkit-callout][data-tone="info"]) {
border-left-color: var(--star-info, var(--starplane-info));
background: color-mix(in oklab, var(--star-info, var(--starplane-info)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-tone="ok"]) {
border-left-color: var(--star-ok, var(--starplane-ok));
background: color-mix(in oklab, var(--star-ok, var(--starplane-ok)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-tone="warn"]) {
border-left-color: var(--star-warn, var(--starplane-warn));
background: color-mix(in oklab, var(--star-warn, var(--starplane-warn)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-tone="danger"]) {
border-left-color: var(--star-danger, var(--starplane-danger));
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 7%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout-icon]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5em;
height: 1.5em;
font-size: var(--star-text-lg, 1.125rem);
line-height: 1;
}
:where([data-starkit-callout-body]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-callout-heading]) {
font-weight: 600;
margin-bottom: var(--star-space-1, 0.25rem);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-callout-actions]) {
display: flex;
gap: var(--star-space-2, 0.5rem);
margin-top: var(--star-space-3, 0.75rem);
}
:where([data-starkit-callout-dismiss]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: var(--star-space-5, 1.25rem);
height: var(--star-space-5, 1.25rem);
padding: 0;
border: 0;
border-radius: var(--star-radius-sm, 0.375rem);
background: transparent;
color: inherit;
line-height: 1;
cursor: pointer;
opacity: 0.65;
transition: opacity var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-callout-dismiss]:hover),
:where([data-starkit-callout-dismiss]):focus-visible {
opacity: 1;
background: color-mix(in srgb, var(--star-text, #1c1914) 10%,
var(--star-surface, var(--star-bg, #fbf8f1)));
}
:where([data-starkit-callout-dismiss]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-callout][data-size="sm"]) {
padding: var(--star-space-2, 0.5rem);
font-size: 0.875em;
}
:where([data-starkit-callout][data-size="lg"]) {
padding: var(--star-space-5, 1.25rem);
font-size: 1.0625em;
}
:where([data-starkit-callout][data-variant="outline"]) {
background: var(--star-surface, var(--star-bg, var(--starplane-surface)));
border-color: var(--star-border-strong, var(--starplane-border));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="info"]) {
background: color-mix(in oklab, var(--star-info, var(--starplane-info)) 18%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="ok"]) {
background: color-mix(in oklab, var(--star-ok, var(--starplane-ok)) 18%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="warn"]) {
background: color-mix(in oklab, var(--star-warn, var(--starplane-warn)) 18%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-callout][data-variant="solid"][data-tone="danger"]) {
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 18%,
var(--star-surface, var(--star-bg, var(--starplane-surface))));
}
:where([data-starkit-blockquote]) {
padding: var(--star-space-2, 8px) var(--star-space-4, 16px);
color: var(--star-text-secondary, #5c5852);
margin: 0;
border-left: 3px solid var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-blockquote][data-tone="info"]) { border-left-color: var(--star-info, var(--starplane-info)); }
:where([data-starkit-blockquote][data-tone="ok"]) { border-left-color: var(--star-ok, var(--starplane-ok)); }
:where([data-starkit-blockquote][data-tone="warn"]) { border-left-color: var(--star-warn, var(--starplane-warn)); }
:where([data-starkit-blockquote][data-tone="danger"]) { border-left-color: var(--star-danger, var(--starplane-danger)); }
:where([data-starkit-blockquote][data-size="sm"]) { font-size: 0.875em; }
:where([data-starkit-blockquote][data-size="lg"]) { font-size: 1.125em; }
:where([data-starkit-blockquote][data-align="center"]) { text-align: center; }
:where([data-starkit-blockquote][data-align="end"]) { text-align: right; }
:where([data-starkit-blockquote-cite]) {
margin-top: var(--star-space-2, 0.5rem);
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: 0.875em;
}
:where([data-starkit-divider]) {
border: 0;
background: var(--star-border, var(--starplane-divider));
flex: 0 0 auto;
}
:where([data-starkit-divider][data-orientation="horizontal"]) {
width: 100%;
height: 1px;
}
:where([data-starkit-divider][data-orientation="vertical"]) {
width: 1px;
height: 100%;
min-height: 1em;
align-self: stretch;
}
:where([data-starkit-divider][data-tone="strong"]) {
background: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
}
:where([data-starkit-divider][data-tone="accent"]) {
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-divider][data-variant="dashed"]),
:where([data-starkit-divider][data-variant="dotted"]) {
background: transparent;
}
:where([data-starkit-divider][data-orientation="horizontal"][data-variant="dashed"]) {
height: 0;
border-top: 1px dashed var(--star-border, var(--starplane-divider));
}
:where([data-starkit-divider][data-orientation="horizontal"][data-variant="dotted"]) {
height: 0;
border-top: 1px dotted var(--star-border, var(--starplane-divider));
}
:where([data-starkit-divider][data-orientation="vertical"][data-variant="dashed"]) {
width: 0;
border-left: 1px dashed var(--star-border, var(--starplane-divider));
}
:where([data-starkit-divider][data-orientation="vertical"][data-variant="dotted"]) {
width: 0;
border-left: 1px dotted var(--star-border, var(--starplane-divider));
}
:where([data-starkit-divider][data-tone="strong"][data-variant="dashed"]),
:where([data-starkit-divider][data-tone="strong"][data-variant="dotted"]) {
border-color: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
}
:where([data-starkit-divider][data-tone="accent"][data-variant="dashed"]),
:where([data-starkit-divider][data-tone="accent"][data-variant="dotted"]) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-divider][data-labelled]) {
display: flex;
align-items: center;
gap: var(--star-space-3, 0.75rem);
height: auto;
background: transparent;
border: 0;
}
:where([data-starkit-divider][data-labelled])::before,
:where([data-starkit-divider][data-labelled])::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--star-border, var(--starplane-divider));
}
:where([data-starkit-divider][data-labelled][data-tone="strong"])::before,
:where([data-starkit-divider][data-labelled][data-tone="strong"])::after {
background: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
}
:where([data-starkit-divider][data-labelled][data-tone="accent"])::before,
:where([data-starkit-divider][data-labelled][data-tone="accent"])::after {
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-divider-label]) {
flex: 0 0 auto;
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: 0.8125em;
white-space: nowrap;
}
:where([data-starkit-breadcrumb-group]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-breadcrumb-sep]) {
color: var(--star-text-muted, var(--starplane-text-muted));
user-select: none;
}
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
text-decoration: none;
transition: color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]:hover) {
color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-breadcrumb-item][aria-current="page"]) {
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-breadcrumb-ellipsis]) {
color: var(--star-text-muted, var(--starplane-text-muted));
user-select: none;
}
:where([data-starkit-breadcrumb][data-size="sm"]) { font-size: 0.8125em; }
:where([data-starkit-tag]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-1, 4px);
}
:where([data-starkit-tag-remove]) {
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
padding: 0;
opacity: 0.7;
transition: opacity var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-tag-remove]:hover) {
opacity: 1;
}
:where([data-starkit-tag-remove]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-tag][data-tone="accent"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent)) 7%, var(--star-surface));
}
:where([data-starkit-tag][data-tone="ok"]) {
background: color-mix(in srgb, var(--star-ok, var(--starplane-ok)) 9%, var(--star-surface));
}
:where([data-starkit-tag][data-tone="warn"]) {
background: color-mix(in srgb, var(--star-warn, var(--starplane-warn)) 9%, var(--star-surface));
}
:where([data-starkit-tag-icon]) {
display: inline-flex;
align-items: center;
line-height: 1;
}
:where([data-starkit-tag][data-size="sm"]) { font-size: 0.75em; }
:where([data-starkit-tag][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--star-border, var(--starplane-border));
}
:where([data-starkit-tag][data-variant="outline"][data-tone="accent"]) { border-color: var(--star-accent, var(--starplane-accent)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="ok"]) { border-color: var(--star-ok, var(--starplane-ok)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="warn"]) { border-color: var(--star-warn, var(--starplane-warn)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="danger"]) { border-color: var(--star-danger, var(--starplane-danger)); }
:where([data-starkit-tag][data-variant="outline"][data-tone="info"]) { border-color: var(--star-info, var(--starplane-info)); }
:where([data-starkit-stat-delta]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-1, 4px);
}
:where([data-starkit-stat-delta][data-tone="ok"]) {
background: color-mix(in srgb, var(--star-ok, var(--starplane-ok)) 9%, var(--star-surface));
}
:where([data-starkit-stat-delta][data-size="sm"]) { font-size: 0.8125em; }
:where([data-starkit-stat]) {
display: flex;
flex-direction: column;
gap: var(--star-space-1, 4px);
padding: var(--star-space-4, 16px);
background-color: var(--star-surface, #fbf8f1);
border-radius: var(--star-radius-control, 8px);
color: var(--star-text, #1c1914);
border: 1px solid var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
}
:where([data-starkit-stat-label]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
font-size: 0.8125em;
letter-spacing: 0.01em;
}
:where([data-starkit-stat-value]) {
font-size: 1.5em;
font-weight: 650;
line-height: 1.1;
letter-spacing: -0.01em;
}
:where([data-starkit-stat-icon]) {
display: inline-flex;
align-items: center;
margin-right: var(--star-space-2, 0.5rem);
line-height: 1;
}
:where([data-starkit-stat][data-size="sm"]) > :where([data-starkit-stat-value]) { font-size: 1.125em; }
:where([data-starkit-stat][data-size="lg"]) > :where([data-starkit-stat-value]) { font-size: 2em; }
:where([data-starkit-stat][data-align="center"]) { text-align: center; align-items: center; }
:where([data-starkit-stat][data-align="end"]) { text-align: right; align-items: flex-end; }
:where([data-starkit-stat][data-tone="accent"]) > :where([data-starkit-stat-value]) {
color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-stat][data-tone="ok"]) > :where([data-starkit-stat-value]) {
color: var(--star-ok, var(--starplane-ok-ink, var(--starplane-ok)));
}
:where([data-starkit-stat][data-tone="warn"]) > :where([data-starkit-stat-value]) {
color: var(--star-warn, var(--starplane-warn-ink, var(--starplane-warn)));
}
:where([data-starkit-stat][data-tone="danger"]) > :where([data-starkit-stat-value]) {
color: var(--star-danger, var(--starplane-danger-ink, var(--starplane-danger)));
}
:where([data-starkit-stat-trailing]) {
margin-top: var(--star-space-1, 0.25rem);
}
:where([data-starkit-stat][data-interactive]) {
cursor: pointer;
transition: transform var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-stat][data-interactive]:hover) {
transform: translateY(-1px);
border-color: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
}
:where([data-starkit-stat][data-interactive]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-avatar]) {
position: relative;
box-sizing: border-box;
display: inline-grid;
place-items: center;
flex: none;
overflow: visible;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
border-style: solid;
border-width: var(--starkit-av-ring, 2px);
border-color: var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-avatar][data-size="sm"]) {
--starkit-av-ring: 2px;
font-size: 0.6875rem;
}
:where([data-starkit-avatar][data-size="md"]) {
--starkit-av-ring: 2.5px;
font-size: 0.8125rem;
}
:where([data-starkit-avatar][data-size="lg"]) {
--starkit-av-ring: 3px;
font-size: 1rem;
}
:where([data-starkit-avatar][data-kind="human"]) {
border-color: var(--star-info, var(--starplane-info));
}
:where([data-starkit-avatar][data-kind="agent"]) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-avatar][data-kind="system"]) {
border-color: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
color: var(--star-text-muted, var(--starplane-text-tertiary));
}
:where([data-starkit-avatar-initials]) {
grid-area: 1 / 1;
user-select: none;
}
:where([data-starkit-avatar-img]) {
grid-area: 1 / 1;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--star-surface, var(--star-bg, var(--starplane-surface)));
}
:where([data-starkit-avatar-img][data-failed]) {
display: none;
}
:where([data-starkit-avatar-badge]) {
position: absolute;
right: -2px;
bottom: -2px;
width: 38%;
height: 38%;
min-width: 8px;
min-height: 8px;
box-shadow: 0 0 0 2px var(--star-surface, var(--star-bg, var(--starplane-surface)));
}
:where([data-starkit-avatar-badge][data-shape="disc"]) {
border-radius: 50%;
background: var(--star-info, var(--starplane-info));
}
:where([data-starkit-avatar-badge][data-shape="diamond"]) {
border-radius: 2px;
transform: rotate(45deg);
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-avatar-status]) {
position: absolute;
top: -1px;
right: -1px;
width: 30%;
height: 30%;
min-width: 7px;
min-height: 7px;
border-radius: 50%;
box-shadow: 0 0 0 2px var(--star-surface, var(--star-bg, var(--starplane-surface)));
background: var(--star-text-muted, var(--starplane-text-tertiary));
}
:where([data-starkit-avatar-status][data-status="online"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-avatar-status][data-status="busy"]) {
background: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-avatar-status][data-status="away"]) {
background: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-avatar-status][data-status="offline"]) {
background: var(--star-text-muted, var(--starplane-text-tertiary));
}
:where([data-starkit-avatar-status][data-status="online"])::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: starkit-av-pulse var(--star-dur-slow, 2s)
var(--star-ease, var(--starplane-ease-out, ease-out)) infinite;
}
@keyframes starkit-av-pulse {
0% {
opacity: 0.45;
transform: scale(1);
}
70%,
100% {
opacity: 0;
transform: scale(2.4);
}
}
:where([data-starkit-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;
}
:where([data-starkit-avatar-group]) [data-starkit-avatar],
:where([data-starkit-avatar-group]) [data-starkit-avatar-overflow] {
box-shadow: 0 0 0 2px var(--star-surface, var(--star-bg, var(--starplane-surface)));
}
:where([data-starkit-avatar-group]) > * + * {
margin-left: -0.6em;
}
:where([data-starkit-avatar-overflow]) {
box-sizing: border-box;
display: inline-grid;
place-items: center;
flex: none;
font-weight: 700;
font-size: 0.75em;
line-height: 1;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
color: var(--star-text-muted, var(--starplane-text-secondary));
user-select: none;
}
:where([data-starkit-avatar-overflow][data-size="sm"]) {
font-size: 0.625rem;
}
:where([data-starkit-avatar-overflow][data-size="lg"]) {
font-size: 0.8125rem;
}
:where([data-starkit-avatar][data-shape="square"]) > :where([data-starkit-avatar-img]) {
border-radius: var(--star-radius-control, 0.5rem);
}
:where([data-starkit-avatar][data-ring="false"]) {
border-color: transparent;
}
:where([data-starkit-avatar][data-interactive]) {
cursor: pointer;
transition: transform var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-avatar][data-interactive]:hover) {
transform: translateY(-1px);
}
:where([data-starkit-avatar][data-interactive]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-stat-delta-glyph]) {
line-height: 1;
font-size: 0.75em;
display: inline-block;
animation: starkit-delta-rise var(--star-dur-base, 0.32s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))) both;
}
:where([data-starkit-stat-delta][data-trend="down"] [data-starkit-stat-delta-glyph]) {
animation-name: starkit-delta-drop;
}
@keyframes starkit-delta-rise {
from {
opacity: 0;
transform: translateY(0.4em);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes starkit-delta-drop {
from {
opacity: 0;
transform: translateY(-0.4em);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-breadcrumb] a[data-starkit-breadcrumb-item]),
:where([data-starkit-tag-remove]) {
transition-duration: 0.01ms;
}
:where([data-starkit-stat-delta-glyph]) {
animation: none;
}
:where([data-starkit-avatar-status][data-status="online"])::after {
animation: none;
display: none;
}
:where([data-starkit-avatar][data-interactive]) {
transition-duration: 0.01ms;
}
:where([data-starkit-stat][data-interactive]) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-gauge]) {
display: flex;
align-items: stretch;
gap: 3px;
height: 16px;
min-width: 0;
}
:where([data-starkit-gauge][data-size="hero"]) { height: 28px; }
:where([data-starkit-gauge][data-size="mini"]) { height: 10px; }
:where([data-starkit-gauge]) > :where([data-tick]) {
flex: 0 0 2px;
width: 2px;
height: 100%;
border-radius: 1px;
background: var(--star-border, #d7dade);
animation: starkit-gauge-in 180ms var(--star-ease, var(--starplane-ease, cubic-bezier(0.16, 1, 0.3, 1))) backwards;
animation-delay: var(--starkit-gauge-delay, 0ms);
}
:where([data-starkit-gauge]) > :where([data-tick="fill"]) {
background: var(--star-accent, #f5641e);
}
:where([data-starkit-gauge]) > :where([data-tick="ok"]) {
background: var(--star-ok, #16a34a);
}
:where([data-starkit-gauge]) > :where([data-tick="danger"]) {
background: var(--star-danger, #dc2626);
}
:where([data-starkit-gauge]) > :where([data-tick="threshold"]) {
background: var(--star-text, #0b0d0f);
}
:where([data-starkit-gauge]) > :where([data-tick="untested"]) {
background: var(--star-border, #d7dade);
}
:where([data-starkit-gauge][data-tone="ok"]) > :where([data-tick="fill"]) {
background: var(--star-ok, #16a34a);
}
:where([data-starkit-gauge][data-tone="warn"]) > :where([data-tick="fill"]) {
background: var(--star-warn, #d97706);
}
:where([data-starkit-gauge][data-tone="danger"]) > :where([data-tick="fill"]) {
background: var(--star-danger, #dc2626);
}
:where([data-starkit-gauge][data-rounded]) > :where([data-tick]) {
border-radius: 999px;
}
:where([data-starkit-gauge][data-disabled]) { opacity: 0.45; }
:where([data-starkit-gauge][data-empty]) { align-items: flex-end; }
:where([data-starkit-gauge][data-empty]) > :where([data-tick]) { height: 60%; }
:where([data-starkit-gauge][data-live]) > :where([data-tick-last]) {
animation:
starkit-gauge-in 180ms var(--star-ease, var(--starplane-ease, cubic-bezier(0.16, 1, 0.3, 1))) backwards,
starkit-gauge-pulse 2.4s ease-in-out infinite;
animation-delay: var(--starkit-gauge-delay, 0ms), 0ms;
}
@keyframes starkit-gauge-in {
from { opacity: 0; }
}
@keyframes starkit-gauge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-gauge]) > :where([data-tick]),
:where([data-starkit-gauge][data-live]) > :where([data-tick-last]) {
animation: none;
}
}
:where([data-starkit-gaugestat-legend]) { width: 100%; }
:where([data-starkit-gaugestat][data-align="center"]) { align-items: center; text-align: center; }
:where([data-starkit-gaugestat][data-align="end"]) { align-items: flex-end; text-align: right; }
:where([data-starkit-statuschip]) {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
line-height: 1.6;
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
border-radius: var(--star-radius-pill, 9999px);
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 12px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.06em);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
background: var(--star-surface-sunken);
color: var(--star-text-secondary, var(--starplane-text-secondary));
}
:where([data-starkit-statuschip][data-tone="ok"]) {
background: color-mix(in srgb, var(--star-ok, var(--starplane-ok)) 9%, var(--star-surface));
color: var(--star-ok-ink, var(--starplane-ok, var(--star-ok)));
}
:where([data-starkit-statuschip][data-tone="warn"]) {
background: color-mix(in srgb, var(--star-warn, var(--starplane-warn)) 9%, var(--star-surface));
color: var(--star-warn-ink, var(--starplane-warn, var(--star-warn)));
}
:where([data-starkit-statuschip][data-tone="danger"]) {
background: var(--star-danger-soft, color-mix(in srgb, var(--starplane-danger, var(--star-danger)) 10%, var(--star-surface)));
color: var(--star-danger-ink, var(--starplane-danger, var(--star-danger)));
}
:where([data-starkit-statuschip][data-tone="info"]) {
background: var(--star-info-soft, color-mix(in srgb, var(--starplane-info, var(--star-info)) 10%, var(--star-surface)));
color: var(--star-info-ink, var(--starplane-info, var(--star-info)));
}
:where([data-starkit-statuschip][data-tone="accent"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent)) 7%, var(--star-surface));
color: var(--star-accent-strong, var(--starplane-accent, var(--star-accent)));
}
:where([data-starkit-statuschip][data-tone="neutral"]) {
background: var(--star-surface-sunken);
color: var(--star-text-secondary, var(--starplane-text-secondary));
}
:where([data-starkit-statuschip][data-tone="brand"]) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text-primary)) 8%, var(--star-surface));
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-chip-dot]) {
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
flex: none;
}
:where([data-starkit-statuschip][data-size="sm"]) { font-size: 0.6875rem; gap: 4px; }
:where([data-starkit-statuschip][data-size="lg"]) { font-size: 0.8125rem; gap: 8px; }
:where([data-starkit-statuschip][data-variant="outline"]) {
background: transparent;
border: 1px solid var(--star-border, var(--starplane-border));
}
:where([data-starkit-statuschip][data-variant="outline"][data-tone="accent"]) { border-color: var(--star-accent, var(--starplane-accent)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="ok"]) { border-color: var(--star-ok, var(--starplane-ok)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="warn"]) { border-color: var(--star-warn, var(--starplane-warn)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="danger"]) { border-color: var(--star-danger, var(--starplane-danger)); }
:where([data-starkit-statuschip][data-variant="outline"][data-tone="info"]) { border-color: var(--star-info, var(--starplane-info)); }
:where([data-starkit-chip-remove]) {
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
line-height: 1;
padding: 0;
margin-left: 2px;
opacity: 0.7;
transition: opacity var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-chip-remove]:hover) { opacity: 1; }
:where([data-starkit-chip-remove]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-accentpill]),
:where([data-starkit-ghostpill]) {
display: inline-flex;
align-items: center;
white-space: nowrap;
gap: 6px;
cursor: pointer;
border: 0;
line-height: 1.6;
transition:
transform var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
background-color var(--star-dur-fast, 120ms) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-accentpill]:hover) {
background-color: var(--star-accent-hover, #e2530f);
}
:where([data-starkit-accentpill]:active),
:where([data-starkit-ghostpill]:active) {
transform: scale(0.97);
}
:where([data-starkit-ghostpill]) {
border: 1px solid var(--star-border, #d7dade);
}
:where([data-starkit-ghostpill]:hover) {
background-color: var(--star-surface-sunken, #f7f8f9);
}
:where([data-starkit-accentpill]:focus-visible),
:where([data-starkit-ghostpill]:focus-visible) {
outline: 2px solid var(--star-focus-ring, #f5641e);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-accentpill]),
:where([data-starkit-ghostpill]) {
transition: none;
}
}
:where([data-starkit-logotile]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--star-surface, #fff);
box-shadow: inset 0 0 0 1px var(--star-border, #d7dade);
flex: none;
overflow: hidden;
}
:where([data-starkit-logotile][data-size="sm"]) { width: 32px; height: 32px; border-radius: 9px; }
:where([data-starkit-logotile][data-size="lg"]) { width: 56px; height: 56px; border-radius: 15px; }
:where([data-starkit-logotile-initial]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-weight: var(--star-weight-semibold, 600);
font-size: var(--star-text-lg, 17px);
color: var(--star-text-muted, #6b7177);
}
:where([data-starkit-stattile]) {
display: grid;
gap: 4px;
padding: 10px 12px;
border-radius: var(--star-radius-control, 12px);
background: var(--star-surface-sunken, #f7f8f9);
box-shadow: inset 0 0 0 1px var(--star-border, #d7dade);
}
:where([data-starkit-stattile][data-align="center"]) { justify-items: center; text-align: center; }
:where([data-starkit-stattile][data-align="end"]) { justify-items: end; text-align: right; }
:where([data-starkit-stattile-head]) {
display: inline-flex;
align-items: center;
gap: 6px;
}
:where([data-starkit-stattile-icon]) { color: var(--star-text-muted, #6b7177); }
:where([data-starkit-stattile-label]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--star-text-muted, #6b7177);
}
:where([data-starkit-stattile-value]) {
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-base, 15px);
font-weight: var(--star-weight-semibold, 600);
font-variant-numeric: tabular-nums;
color: var(--star-text, #0b0d0f);
}
:where([data-starkit-datalink]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--star-text-muted, #6b7177);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--star-dur-fast, 120ms) var(--star-ease, ease);
}
:where([data-starkit-datalink]:hover) {
color: var(--star-accent, #f5641e);
}
:where([data-starkit-datalink]:focus-visible) {
outline: 2px solid var(--star-focus-ring, #f5641e);
outline-offset: 2px;
}
:where([data-starkit-kbdhint]) {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 7px;
border-radius: 6px;
background: var(--star-surface, #fff);
box-shadow:
inset 0 0 0 1px var(--star-border, #d7dade),
0 1px 0 var(--star-border, #d7dade);
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
color: var(--star-text-muted, #6b7177);
}
:where([data-starkit-livedot]) {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--star-ok, #16a34a);
flex: none;
}
:where([data-starkit-livedot][data-tone="danger"]) { background: var(--star-danger, #dc2626); }
:where([data-starkit-livedot][data-tone="accent"]) { background: var(--star-accent, #f5641e); }
:where([data-starkit-livedot][data-tone="neutral"]) { background: var(--star-border, #d7dade); }
:where([data-starkit-livedot][data-pulse="true"]) {
animation: starkit-livedot-pulse 2.4s ease-in-out infinite;
}
@keyframes starkit-livedot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-livedot][data-pulse="true"]) { animation: none; }
}
:where([data-starkit-statusdot]) {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
flex: none;
background: var(--star-text-muted, var(--star-border, var(--starplane-text-secondary)));
}
:where([data-starkit-statusdot][data-size="sm"]) {
width: 6px;
height: 6px;
}
:where([data-starkit-statusdot][data-size="lg"]) {
width: 10px;
height: 10px;
}
:where([data-starkit-statusdot][data-status="working"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-statusdot][data-status="needs-attention"]) {
background: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-statusdot][data-status="ended"]) {
background: var(--star-text-muted, var(--star-border, var(--starplane-text-secondary)));
}
:where([data-starkit-shell]) {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
:where([data-starkit-shell][data-enter="true"]) {
animation: starkit-shell-in 320ms var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
}
@keyframes starkit-shell-in {
from { opacity: 0; transform: translateY(8px); }
}
:where([data-starkit-shell-head]) {
padding: 20px 24px 0;
display: grid;
gap: 2px;
}
:where([data-starkit-shell-kicker]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: var(--star-text-xs, 11px);
font-weight: var(--star-legend-weight, 500);
letter-spacing: var(--star-legend-tracking, 0.08em);
text-transform: uppercase;
color: var(--star-text-muted, #6b7177);
}
:where([data-starkit-shell-title]) {
margin: 0;
font-family: var(--star-font-ui, system-ui, sans-serif);
font-size: var(--star-text-xl, 21px);
font-weight: var(--star-weight-semibold, 600);
letter-spacing: -0.01em;
color: var(--star-text, #0b0d0f);
}
:where([data-starkit-shell-body]) {
padding: 16px 24px 24px;
display: grid;
gap: 20px;
}
:where([data-starkit-footerrail]) {
background: var(--star-surface-sunken, #f7f8f9);
border-top: 1px solid var(--star-border, #d7dade);
padding: 14px 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
:where([data-starkit-hatchcanvas]) {
min-height: 100%;
background-color: var(--star-bg, #f4f5f7);
background-image: repeating-linear-gradient(
93.5deg,
color-mix(in srgb, var(--star-text, #0b0d0f) 2%, transparent) 0 1px,
transparent 1px 9px
);
}
:where([data-starkit-hatchcanvas][data-hatch="none"]) {
background-image: none;
}
:where([data-starkit-hatchcanvas][data-hatch="bold"]) {
background-image: repeating-linear-gradient(
93.5deg,
color-mix(in srgb, var(--star-text, #0b0d0f) 4.5%, transparent) 0 1px,
transparent 1px 9px
);
}
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-shell-head]) {
padding: 14px 16px 0;
}
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-shell-body]) {
padding: 12px 16px 16px;
gap: 14px;
}
:where([data-starkit-shell][data-padding="compact"]) > :where([data-starkit-footerrail]) {
padding: 10px 16px;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-shell][data-enter="true"]) { animation: none; }
}
:where([data-starkit-timeline]) {
display: block;
--starkit-tl-hue: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-timeline][data-tone="ok"]) { --starkit-tl-hue: var(--star-ok, var(--starplane-ok)); }
:where([data-starkit-timeline][data-tone="warn"]) { --starkit-tl-hue: var(--star-warn, var(--starplane-warn)); }
:where([data-starkit-timeline][data-tone="danger"]) { --starkit-tl-hue: var(--star-danger, var(--starplane-danger)); }
:where([data-starkit-timeline-legends]) {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
:where([data-starkit-timeline-track]) {
position: relative;
height: 6px;
margin: 16px 0;
border-radius: var(--star-radius-pill, 999px);
background: color-mix(in srgb, var(--starkit-tl-hue, var(--star-accent, var(--starplane-accent))) 16%, transparent);
}
:where([data-starkit-timeline-fill]) {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: inherit;
background: color-mix(in srgb, var(--starkit-tl-hue, var(--star-accent, var(--starplane-accent))) 38%, transparent);
}
:where([data-starkit-timeline-node]) {
position: absolute;
top: 50%;
left: 0;
width: 34px;
height: 34px;
transform: translate(-50%, -50%);
display: grid;
place-items: center;
border-radius: var(--star-radius-pill, 999px);
background: var(--star-surface, var(--starplane-surface));
border: 2px solid color-mix(in srgb, var(--starkit-tl-hue, var(--star-accent, var(--starplane-accent))) 55%, transparent);
color: var(--starkit-tl-hue, var(--star-accent, var(--starplane-accent)));
box-shadow: 0 1px 3px color-mix(in srgb, var(--star-text) 15%, transparent);
}
:where([data-starkit-timeline][data-size="sm"]) > :where([data-starkit-timeline-track]) { height: 4px; }
:where([data-starkit-timeline][data-size="sm"]) :where([data-starkit-timeline-node]) { width: 26px; height: 26px; }
:where([data-starkit-timeline][data-size="lg"]) > :where([data-starkit-timeline-track]) { height: 8px; }
:where([data-starkit-timeline][data-size="lg"]) :where([data-starkit-timeline-node]) { width: 42px; height: 42px; }
:where([data-starkit-timeline-values]) {
display: flex;
justify-content: space-between;
align-items: baseline;
}
:where([data-starkit-timeline-value]) {
font-family: var(--star-legend-font, ui-monospace, monospace);
font-size: 13px;
font-variant-numeric: tabular-nums;
color: var(--star-text, var(--starplane-text));
}
:where([data-starkit-chart]) {
display: block;
width: 100%;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starkit-chart] svg) {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
:where([data-starkit-chart-axis]) {
font-family: var(--star-legend-font, var(--star-font-mono, ui-monospace, monospace));
font-size: 10px;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
fill: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-chart-empty]) {
font-size: 12px;
fill: var(--star-text-muted, var(--starplane-text-tertiary));
}
:where([data-starkit-chart-gridline]) {
opacity: 0.5;
}
:where([data-starkit-chart-value]) {
font-family: var(--star-legend-font, var(--star-font-mono, ui-monospace, monospace));
font-size: 10px;
font-variant-numeric: tabular-nums;
fill: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-chart-bar]),
:where([data-starkit-chart-dot]) {
animation: starkit-chart-in var(--star-dur-base, 0.16s) var(--star-ease, ease) both;
animation-delay: var(--starkit-chart-delay, 0ms);
}
@keyframes starkit-chart-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-chart-bar]),
:where([data-starkit-chart-dot]) {
animation: none !important;
}
}
:where([data-starkit-aspectratio]) {
position: relative;
width: 100%;
aspect-ratio: var(--starkit-aspect, 1.7777);
overflow: hidden;
}
:where([data-starkit-aspectratio]) > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
:where([data-starkit-aspectratio][data-rounded]) {
border-radius: var(--star-radius-control, 0.5rem);
}
:where([data-starkit-aspectratio][data-fit="cover"]) > * { object-fit: cover; }
:where([data-starkit-aspectratio][data-fit="contain"]) > * { object-fit: contain; }
:where([data-starkit-aspectratio][data-fit="fill"]) > * { object-fit: fill; }
:where([data-starkit-aspectratio][data-fit="none"]) > * { object-fit: none; }
:where([data-starkit-image]),
:where([data-starkit-video]) {
display: block;
max-width: 100%;
height: auto;
}
:where([data-starkit-image][data-fit="cover"]),
:where([data-starkit-video][data-fit="cover"]) { object-fit: cover; }
:where([data-starkit-image][data-fit="contain"]),
:where([data-starkit-video][data-fit="contain"]) { object-fit: contain; }
:where([data-starkit-image][data-fit="fill"]),
:where([data-starkit-video][data-fit="fill"]) { object-fit: fill; }
:where([data-starkit-image][data-fit="none"]),
:where([data-starkit-video][data-fit="none"]) { object-fit: none; }
:where([data-starkit-image][data-rounded]),
:where([data-starkit-video][data-rounded]) {
border-radius: var(--star-radius-control, 0.5rem);
overflow: hidden;
}
:where([data-starkit-image][data-fade]),
:where([data-starkit-video][data-fade]) {
opacity: 0;
transition: opacity var(--star-dur-base, 0.28s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-image][data-fade][data-loaded]),
:where([data-starkit-video][data-fade][data-loaded]) {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-image][data-fade]),
:where([data-starkit-video][data-fade]) {
opacity: 1;
transition: none;
}
}
:where([data-starkit-scrollarea]) {
position: relative;
overflow: auto;
scrollbar-width: thin;
scrollbar-color: var(--star-border, var(--starplane-border-strong)) transparent;
}
:where([data-starkit-scrollarea][data-orientation="vertical"]) {
overflow-x: hidden;
overflow-y: auto;
}
:where([data-starkit-scrollarea][data-orientation="horizontal"]) {
overflow-x: auto;
overflow-y: hidden;
}
:where([data-starkit-scrollarea][data-orientation="both"]) {
overflow: auto;
}
:where([data-starkit-scrollarea]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-scrollarea])::-webkit-scrollbar {
width: 0.625rem;
height: 0.625rem;
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-track {
background: transparent;
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-thumb {
border-radius: 9999px;
border: 2px solid transparent;
background-clip: padding-box;
background-color: var(--star-border, var(--starplane-border-strong));
}
:where([data-starkit-scrollarea])::-webkit-scrollbar-thumb:hover {
background-color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-scrollarea-content]) {
min-width: 0;
min-height: 0;
}
:where([data-starkit-scrollarea][data-size="sm"]) { scrollbar-width: thin; }
:where([data-starkit-scrollarea][data-size="sm"])::-webkit-scrollbar {
width: 0.375rem;
height: 0.375rem;
}
:where([data-starkit-scrollarea][data-size="lg"]) { scrollbar-width: auto; }
:where([data-starkit-scrollarea][data-size="lg"])::-webkit-scrollbar {
width: 0.875rem;
height: 0.875rem;
}
:where([data-starkit-scrollarea][data-fade][data-orientation="vertical"]) {
mask-image: linear-gradient(to bottom, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
}
:where([data-starkit-scrollarea][data-fade][data-orientation="horizontal"]) {
mask-image: linear-gradient(to right, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
}
:where([data-starkit-scrollarea][data-fade][data-orientation="both"]) {
mask-image:
linear-gradient(to bottom, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%),
linear-gradient(to right, transparent 0, black 1.25rem, black calc(100% - 1.25rem), transparent 100%);
mask-composite: intersect;
}
:where([data-starkit-carousel]) {
position: relative;
display: flex;
flex-direction: column;
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-carousel-viewport]) {
overflow: hidden;
scroll-behavior: smooth;
}
:where([data-starkit-carousel][data-orientation="horizontal"] [data-starkit-carousel-viewport]) {
overflow-x: auto;
scroll-snap-type: x mandatory;
}
:where([data-starkit-carousel][data-orientation="vertical"] [data-starkit-carousel-viewport]) {
overflow-y: auto;
max-height: 20rem;
scroll-snap-type: y mandatory;
}
:where([data-starkit-carousel-viewport]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-carousel-viewport])::-webkit-scrollbar {
display: none;
}
:where([data-starkit-carousel-track]) {
display: flex;
gap: var(--star-space-3, 0.75rem);
}
:where([data-starkit-carousel][data-orientation="vertical"] [data-starkit-carousel-track]) {
flex-direction: column;
}
:where([data-starkit-carousel-slide]) {
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
}
:where([data-starkit-carousel-controls]) {
display: flex;
gap: var(--star-space-2, 0.5rem);
justify-content: flex-end;
}
:where([data-starkit-carousel-prev]),
:where([data-starkit-carousel-next]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
background: var(--star-surface-raised, var(--starplane-surface-raised));
color: var(--star-text, var(--starplane-text));
font-size: 1.125rem;
line-height: 1;
cursor: pointer;
transition: filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-carousel-prev]:hover),
:where([data-starkit-carousel-next]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-carousel-prev]):focus-visible,
:where([data-starkit-carousel-next]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-carousel-prev]):disabled,
:where([data-starkit-carousel-next]):disabled {
opacity: 0.4;
cursor: not-allowed;
}
:where([data-starkit-carousel-dots]) {
display: flex;
gap: var(--star-space-1, 0.25rem);
justify-content: center;
}
:where([data-starkit-carousel-dot]) {
width: 0.5rem;
height: 0.5rem;
padding: 0;
border-radius: 9999px;
border: none;
background: var(--star-border, var(--starplane-border-strong));
opacity: 0.5;
cursor: pointer;
transition:
opacity var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
background var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-carousel-dot][data-active="true"]) {
opacity: 1;
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-carousel-dot]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-carousel-live]) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
:where([data-starkit-resizable]) {
display: flex;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
:where([data-starkit-resizable][data-direction="horizontal"]) {
flex-direction: row;
}
:where([data-starkit-resizable][data-direction="vertical"]) {
flex-direction: column;
}
:where([data-starkit-resizable-panel]) {
overflow: auto;
min-width: 0;
min-height: 0;
}
:where([data-starkit-resizable-handle]) {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
background: var(--star-border, var(--starplane-border-subtle));
touch-action: none;
user-select: none;
}
:where([data-starkit-resizable][data-direction="horizontal"] [data-starkit-resizable-handle]) {
width: 1px;
cursor: col-resize;
padding-inline: 3px;
margin-inline: -3px;
background-clip: content-box;
}
:where([data-starkit-resizable][data-direction="vertical"] [data-starkit-resizable-handle]) {
height: 1px;
cursor: row-resize;
padding-block: 3px;
margin-block: -3px;
background-clip: content-box;
}
:where([data-starkit-resizable-handle]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-resizable-grip]) {
position: absolute;
border-radius: 9999px;
background: var(--star-border, var(--starplane-border-strong));
}
:where([data-starkit-resizable][data-direction="horizontal"] [data-starkit-resizable-grip]) {
width: 3px;
height: 1.5rem;
}
:where([data-starkit-resizable][data-direction="vertical"] [data-starkit-resizable-grip]) {
width: 1.5rem;
height: 3px;
}
:where([data-starkit-resizable][data-disabled] [data-starkit-resizable-handle]) {
cursor: default;
}
:where([data-starkit-resizable][data-disabled] [data-starkit-resizable-grip]) {
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-carousel-viewport]) {
scroll-behavior: auto;
}
}
:where([data-starkit-item]) {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--star-space-3, 12px);
width: 100%;
min-width: 0;
box-sizing: border-box;
border: 1px solid transparent;
transition:
background-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
border-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
filter var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-item][data-tone="outline"]) {
border-color: var(--star-border, var(--starplane-border));
}
:where([data-starkit-item][data-density="compact"]) {
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-item][data-interactive]) {
cursor: pointer;
}
:where([data-starkit-item][data-interactive]:hover:not([data-disabled])) {
background: var(--star-surface-raised, var(--starplane-surface-raised));
filter: brightness(1.02);
}
:where([data-starkit-item][data-interactive]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-item][data-interactive]:active:not([data-disabled])) {
filter: brightness(0.97);
}
:where([data-starkit-item][data-disabled]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
:where([data-starkit-item-content]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-item-title]) {
margin: 0;
font-weight: 600;
line-height: 1.25;
}
:where([data-starkit-item-description]) {
margin: 0;
font-size: 0.875em;
line-height: 1.35;
}
:where([data-starkit-item-media][data-variant="icon"]) {
flex: 0 0 auto;
color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-item-media][data-variant="image"]) {
flex: 0 0 auto;
overflow: hidden;
border-radius: var(--star-radius-sm, 0.25rem);
}
:where([data-starkit-item-actions]) {
flex: 0 0 auto;
margin-inline-start: auto;
}
:where([data-starkit-item-group]) {
width: 100%;
}
:where([data-starkit-table]) {
background-color: var(--star-bg, #ffffff);
width: 100%;
overflow: auto;
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-control, 0.375rem);
}
:where([data-starkit-table-root]) {
width: 100%;
border-collapse: collapse;
caption-side: bottom;
font-size: 0.9375rem;
}
:where([data-starkit-table][data-size="sm"] [data-starkit-table-root]) {
font-size: 0.8125rem;
}
:where([data-starkit-table][data-size="lg"] [data-starkit-table-root]) {
font-size: 1rem;
}
:where([data-starkit-table][data-register="legend"] [data-starkit-table-root]) {
font-family: var(--star-font-mono, var(--starplane-font-mono, ui-monospace, monospace));
}
:where([data-starkit-table-head]),
:where([data-starkit-table-cell]) {
padding: var(--star-space-3, 0.75rem);
text-align: start;
vertical-align: middle;
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-table][data-density="compact"] [data-starkit-table-head]),
:where([data-starkit-table][data-density="compact"] [data-starkit-table-cell]) {
padding: var(--star-space-2, 0.5rem);
}
:where([data-starkit-table-head]) {
font-weight: 600;
background: var(--star-surface-raised, var(--starplane-surface-raised));
}
:where([data-starkit-table-row]:hover) {
background: var(--star-surface-raised, var(--starplane-surface-raised, transparent));
}
:where([data-starkit-table-caption]) {
padding: var(--star-space-3, 0.75rem);
font-size: 0.875em;
}
:where([data-starkit-table-foot] [data-starkit-table-cell]) {
font-weight: 600;
border-bottom: 0;
background: var(--star-surface-base2, var(--starplane-surface-base2, transparent));
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-item]) {
transition: none;
}
}
:where([data-starkit-codeblock]) {
padding: var(--star-space-1, 4px);
border-radius: var(--star-radius-control, 8px);
color: var(--star-text, #1c1914);
overflow: hidden;
border: 1px solid var(--star-border, var(--starplane-border, currentColor));
font-family: var(--star-font-mono, var(--starplane-font-mono, ui-monospace, monospace));
font-size: 0.875em;
}
:where([data-starkit-codeblock-head]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, 0.5rem);
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
border-bottom: 1px solid var(--star-border, var(--starplane-border, currentColor));
background: color-mix(in srgb, var(--star-text) 4%, transparent);
color: var(--star-text-muted, var(--starplane-text-secondary, inherit));
}
:where([data-starkit-codeblock-pre]) {
margin: 0;
padding: var(--star-space-3, 0.75rem);
overflow: auto;
}
:where([data-starkit-codeblock-copy]) {
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: inherit;
font: inherit;
border-radius: var(--star-radius-control, 6px);
padding: 0.15rem 0.5rem;
}
:where([data-starkit-codeblock-copy]:hover) {
background: color-mix(in srgb, var(--star-text) 8%, transparent);
}
:where([data-starkit-codeblock-copy]:focus-visible) {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-tickbar]) {
display: flex;
align-items: flex-end;
gap: var(--star-tick-gap, 3px);
width: 100%;
min-width: 0;
height: var(--star-tick-baseline, 26px);
}
:where([data-starkit-tickbar][data-variant="meter"]) {
height: var(--star-tick-baseline-meter, 30px);
}
:where([data-starkit-tickbar]) > :where([data-tick]) {
flex: 1 1 0;
min-width: var(--star-tick-width, 2px);
height: 100%;
border-radius: var(--star-tick-radius, 1.5px);
background: var(--star-text-tertiary, var(--star-text-muted, #b4b4b4));
}
:where([data-starkit-tickbar]) > :where([data-tick="empty"]) {
opacity: var(--star-tick-inactive-opacity, 0.55);
}
:where([data-starkit-tickbar]) > :where([data-tick="ok"]) {
background: var(--star-ok, #2fa968);
}
:where([data-starkit-tickbar]) > :where([data-tick="err"]) {
background: var(--star-danger, #e5484d);
}
:where([data-starkit-tickbar]) > :where([data-tick="accent"]) {
background: var(--star-accent, #d95a11);
}
:where([data-starkit-tickbar]) > :where([data-tick="neutral"]) {
background: var(--star-text-muted, #767676);
}
:where([data-starkit-banner]) {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--star-space-3);
border: 1px solid transparent;
font-family: var(--star-font-ui);
line-height: var(--star-leading-normal);
}
:where([data-starkit-banner][data-shape="bar"]) {
border-radius: 0;
border-inline: 0;
}
:where([data-starkit-banner][data-shape="inset"]) {
border-radius: var(--star-radius-control);
}
:where([data-starkit-banner][data-tone="info"]) {
border-color: color-mix(in srgb, var(--star-info) 35%, transparent);
}
:where([data-starkit-banner][data-tone="ok"]) {
border-color: color-mix(in srgb, var(--star-ok) 35%, transparent);
}
:where([data-starkit-banner][data-tone="warn"]) {
border-color: color-mix(in srgb, var(--star-warn) 35%, transparent);
}
:where([data-starkit-banner][data-tone="danger"]) {
border-color: color-mix(in srgb, var(--star-danger) 35%, transparent);
}
:where([data-starkit-banner][data-open="false"]) {
display: none;
}
:where([data-starkit-banner-icon]) {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
font-size: var(--star-text-lg);
color: currentColor;
}
:where([data-starkit-banner-body]) {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--star-space-1);
}
:where([data-starkit-banner-title]) {
font-weight: var(--star-weight-semibold);
font-size: var(--star-text-sm);
letter-spacing: var(--star-tracking-tight);
}
:where([data-starkit-banner-text]) {
font-size: var(--star-text-sm);
color: currentColor;
opacity: 0.88;
}
:where([data-starkit-banner][data-size="lg"]) :where([data-starkit-banner-title]) {
font-size: var(--star-text-base);
}
:where([data-starkit-banner][data-size="lg"]) :where([data-starkit-banner-text]) {
font-size: var(--star-text-base);
}
:where([data-starkit-banner][data-size="sm"]) :where([data-starkit-banner-title], [data-starkit-banner-text]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-banner-action]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--star-space-2);
}
:where([data-starkit-banner-dismiss]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: transparent;
border: 0;
padding: var(--star-space-1);
border-radius: var(--star-radius-sm);
color: currentColor;
font: inherit;
opacity: 0.7;
transition:
opacity var(--star-dur-base) var(--star-ease),
background var(--star-dur-base) var(--star-ease);
}
:where([data-starkit-banner-dismiss]:hover) {
opacity: 1;
background: color-mix(in srgb, currentColor 12%, transparent);
}
:where([data-starkit-banner-dismiss]):focus-visible {
outline: 2px solid var(--star-focus-ring);
outline-offset: 2px;
opacity: 1;
}
:where([data-starkit-banner]) {
container-type: inline-size;
inline-size: 100%;
flex-wrap: wrap;
}
@container (max-width: 26rem) {
:where([data-starkit-banner-action]) {
flex-grow: 1;
}
:where([data-starkit-banner-body]) {
flex-basis: 100%;
}
}
:where([data-starkit-description-list]) {
--starkit-dl-term-width: 12rem;
margin: 0;
font-family: var(--star-font-ui);
line-height: var(--star-leading-normal);
}
:where([data-starkit-dl-row]) {
display: grid;
align-items: baseline;
min-width: 0;
}
:where([data-starkit-description-list][data-layout="rows"]) :where([data-starkit-dl-row]) {
grid-template-columns: minmax(0, var(--starkit-dl-term-width)) minmax(0, 1fr);
column-gap: var(--star-space-4);
}
:where([data-starkit-description-list][data-layout="stacked"]) :where([data-starkit-dl-row]) {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--star-space-half);
}
:where([data-starkit-description-list][data-layout="columns"]) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
column-gap: var(--star-space-5);
}
:where([data-starkit-description-list][data-layout="columns"]) :where([data-starkit-dl-row]) {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--star-space-half);
}
:where([data-starkit-description-list][data-density="comfortable"]) :where([data-starkit-dl-row]) {
padding-block: var(--star-space-2);
}
:where([data-starkit-description-list][data-density="compact"]) :where([data-starkit-dl-row]) {
padding-block: var(--star-space-1);
}
:where([data-starkit-description-list][data-divided="true"]) :where([data-starkit-dl-row] + [data-starkit-dl-row]) {
border-top: 1px solid var(--star-border);
}
:where([data-starkit-dl-term]) {
margin: 0;
min-width: 0;
color: var(--star-text-muted);
font-size: var(--star-text-sm);
font-weight: var(--star-weight-medium);
}
:where([data-starkit-dl-value]) {
margin: 0;
min-width: 0;
display: flex;
align-items: center;
gap: var(--star-space-2);
color: var(--star-text);
font-size: var(--star-text-sm);
font-weight: var(--star-weight-normal);
}
:where([data-starkit-dl-value-text]) {
min-width: 0;
overflow-wrap: anywhere;
}
:where([data-starkit-description-list][data-size="sm"]) :where([data-starkit-dl-term], [data-starkit-dl-value]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-description-list][data-size="lg"]) :where([data-starkit-dl-term], [data-starkit-dl-value]) {
font-size: var(--star-text-base);
}
:where([data-starkit-dl-copy]) {
flex: 0 0 auto;
opacity: 0;
transition: opacity var(--star-dur-base) var(--star-ease);
}
:where([data-starkit-dl-row]:hover) :where([data-starkit-dl-copy]),
:where([data-starkit-dl-row]:focus-within) :where([data-starkit-dl-copy]),
:where([data-starkit-dl-copy][data-state="copied"]),
:where([data-starkit-dl-copy][data-state="error"]) {
opacity: 1;
}
@media (hover: none) {
:where([data-starkit-dl-copy]) {
opacity: 1;
}
}
:where([data-starkit-description-list]) {
container-type: inline-size;
inline-size: 100%;
}
@container (max-width: 34rem) {
:where([data-starkit-description-list][data-layout="rows"]) :where([data-starkit-dl-row]) {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--star-space-half);
}
}
:where([data-starkit-relative-time]) {
font-family: var(--star-font-ui);
font-variant-numeric: tabular-nums;
color: var(--star-text-muted);
white-space: nowrap;
}
:where([data-starkit-button]) {
cursor: pointer;
border: 1px solid transparent;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
line-height: 1;
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
box-shadow var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-button][data-variant="secondary"]),
:where([data-starkit-button][data-variant="ghost"]) {
border-color: var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-button]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-button]:active:not([aria-disabled="true"])) {
transform: translateY(0.5px) scale(0.99);
filter: brightness(0.96);
}
:where([data-starkit-button]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-button][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-button]) {
transition-duration: 0.01ms;
}
:where([data-starkit-button]:active:not([aria-disabled="true"])) {
transform: none;
}
}
:where([data-starkit-card]) {
display: flex;
flex-direction: column;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
border: 1px solid transparent;
box-shadow: var(--star-shadow-1, 0 1px 2px -1px rgba(20, 19, 23, 0.4));
}
:where([data-starkit-card][data-variant="outline"]) {
border-color: var(--star-border, var(--starplane-border-subtle));
box-shadow: none;
}
:where([data-starkit-card][data-variant="elevated"]) {
box-shadow: var(--star-shadow-2, 0 8px 24px -12px rgba(20, 19, 23, 0.5));
}
:where([data-starkit-card][data-interactive]) {
cursor: pointer;
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
box-shadow var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-card][data-interactive]:hover:not([aria-disabled="true"])) {
transform: translateY(-1px);
box-shadow: var(--star-shadow-2, 0 8px 24px -12px rgba(20, 19, 23, 0.5));
}
:where([data-starkit-card][data-interactive]:active:not([aria-disabled="true"])) {
transform: translateY(0) scale(0.997);
}
:where([data-starkit-card][data-interactive]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-card][data-interactive][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
:where([data-starkit-card-header]) {
display: flex;
flex-direction: column;
gap: var(--star-space-1, 4px);
}
:where([data-starkit-card-footer]) {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--star-space-2, 8px);
}
:where([data-starkit-badge]) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--star-space-1, 4px);
}
:where([data-starkit-card-title]) {
color: var(--star-text, #1c1914);
margin: 0;
font-size: var(--star-text-lg, 1.125rem);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.01em;
}
:where([data-starkit-card-description]) {
color: var(--star-text-secondary, #5c5852);
margin: 0;
font-size: var(--star-text-sm, 0.875rem);
line-height: 1.45;
}
:where([data-starkit-card-content]) {
font-size: var(--star-text-sm, 0.875rem);
line-height: 1.5;
}
:where([data-starkit-card][data-variant="outline"][data-interactive]) {
box-shadow: var(--star-shadow-1, 0 1px 2px -1px rgba(20, 19, 23, 0.4));
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-card][data-interactive]) {
transition-duration: 0.01ms;
}
:where([data-starkit-card][data-interactive]:hover:not([aria-disabled="true"])),
:where([data-starkit-card][data-interactive]:active:not([aria-disabled="true"])) {
transform: none;
}
}
:where([data-starkit-badge][data-tone="accent"]) {
background: color-mix(in srgb, var(--star-accent, var(--starplane-accent)) 7%, var(--star-surface));
}
:where([data-starkit-badge][data-tone="ok"]) {
background: color-mix(in srgb, var(--star-ok, var(--starplane-ok)) 9%, var(--star-surface));
}
:where([data-starkit-badge][data-tone="warn"]) {
background: color-mix(in srgb, var(--star-warn, var(--starplane-warn)) 9%, var(--star-surface));
}
:where([data-starkit-tooltip-trigger]) {
display: inline-flex;
}
:where([data-starkit-tooltip]) {
padding: var(--star-space-2, 8px);
border-radius: var(--star-radius-control, 8px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
position: relative;
z-index: var(--starkit-z-overlay, 1000);
max-width: 18rem;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
font: inherit;
font-size: var(--star-text-xs, 0.8125rem);
line-height: var(--star-leading-normal, 1.4);
pointer-events: none;
transform-origin: var(--starkit-tooltip-origin, center bottom);
--star-motion-scale-from: 0.97;
animation: star-scale var(--star-dur-fast, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dropdown-trigger]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
cursor: pointer;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
transition: filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-dropdown-trigger]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-dropdown-trigger]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-dropdown]) {
display: inline-block;
}
:where([data-starkit-combobox-input]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
font: inherit;
min-width: 12rem;
}
:where([data-starkit-combobox-input]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-combobox-list]) {
z-index: var(--starkit-z-overlay, 1000);
min-width: 12rem;
max-height: 16rem;
overflow-y: auto;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 0.375rem);
background: var(--star-surface-raised, var(--starplane-surface-raised));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
animation: star-rise var(--star-dur-fast, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-combobox-option]) {
padding: var(--star-space-2, 0.5rem);
border-radius: var(--star-radius-sm, 0.25rem);
cursor: pointer;
}
:where([data-starkit-combobox-option][data-active="true"]) {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
}
:where([data-starkit-combobox-option][data-selected="true"]) {
font-weight: var(--star-weight-semibold, 600);
}
:where([data-starkit-combobox-option][aria-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-combobox-empty]) {
padding: var(--star-space-2, 0.5rem);
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: var(--star-text-xs, 0.8125rem);
}
:where([data-starkit-command-root]) {
position: fixed;
inset: 0;
z-index: var(--starkit-z-overlay, 1000);
display: grid;
grid-template-rows: auto;
align-items: start;
justify-items: center;
padding: clamp(2rem, 12vh, 9rem) var(--star-space-4, 1rem) var(--star-space-4, 1rem);
}
:where([data-starkit-command-backdrop]) {
position: fixed;
inset: 0;
background: var(--star-overlay, var(--starplane-overlay));
animation: star-fade var(--star-dur-base, 0.18s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-command]) {
padding: var(--star-space-2, 8px);
border-radius: var(--star-radius-window, 10px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
position: relative;
display: flex;
flex-direction: column;
width: min(40rem, 92vw);
max-height: min(28rem, 70vh);
overflow: hidden;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
transform-origin: center top;
--star-motion-scale-from: 0.97;
animation: star-scale var(--star-dur-slow, 0.26s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-command]):focus-visible {
outline: none;
}
:where([data-starkit-command-input]) {
width: 100%;
border: none;
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
font: inherit;
font-size: var(--star-text-sm, 0.9375rem);
}
:where([data-starkit-command-input]):focus-visible {
outline: none;
}
:where([data-starkit-command-list]) {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--star-space-1, 0.25rem);
}
:where([data-starkit-command-option]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
padding: var(--star-space-2, 0.5rem);
border-radius: var(--star-radius-sm, 0.25rem);
cursor: pointer;
transition: background var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-command-option]:hover),
:where([data-starkit-command-option]):focus,
:where([data-starkit-command-option]):focus-visible {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
outline: none;
}
:where([data-starkit-command-option][data-danger="true"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-command-option][aria-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-command-label]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-command-hint]) {
flex: 0 0 auto;
margin-left: auto;
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: var(--star-text-2xs, 0.75rem);
letter-spacing: 0.02em;
}
:where([data-starkit-command-empty]) {
padding: var(--star-space-3, 0.75rem);
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: var(--star-text-xs, 0.8125rem);
text-align: center;
}
:where([data-starkit-contextmenu-menu]) {
z-index: var(--starkit-z-overlay, 1000);
min-width: 11rem;
max-width: min(20rem, 92vw);
padding: var(--star-space-1, 0.25rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 0.375rem);
background: var(--star-surface-raised, var(--starplane-surface-raised));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
transform-origin: top left;
animation: star-rise var(--star-dur-fast, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-contextmenu-item]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
width: 100%;
padding: var(--star-space-2, 0.5rem);
border: none;
border-radius: var(--star-radius-sm, 0.25rem);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-contextmenu-item]:hover),
:where([data-starkit-contextmenu-item]):focus,
:where([data-starkit-contextmenu-item]):focus-visible {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
outline: none;
}
:where([data-starkit-contextmenu-item][data-danger="true"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-contextmenu-item]):disabled {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-contextmenu-icon]) {
display: inline-flex;
flex: 0 0 auto;
}
:where([data-starkit-contextmenu-label]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-hovercard-trigger]) {
display: inline-flex;
}
:where([data-starkit-hovercard]) {
padding: var(--star-space-4, 16px);
border-radius: var(--star-radius-control, 8px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
z-index: var(--starkit-z-overlay, 1000);
max-width: 20rem;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
font: inherit;
pointer-events: auto;
transform-origin: var(--starkit-hovercard-origin, center top);
--star-motion-scale-from: 0.97;
animation: star-scale var(--star-dur-fast, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-drawer]) {
padding: var(--star-space-5, 24px);
border-radius: var(--star-radius-control, 8px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
:where([data-starkit-drawer][data-side="left"]),
:where([data-starkit-drawer][data-side="right"]) {
width: min(22rem, 90vw);
height: 100%;
}
:where([data-starkit-drawer][data-side="top"]),
:where([data-starkit-drawer][data-side="bottom"]) {
width: 100%;
max-height: 80vh;
}
:where([data-starkit-dialog-root]) {
position: fixed;
inset: 0;
z-index: var(--starkit-z-overlay, 1000);
display: grid;
place-items: center;
padding: var(--star-space-4, 1rem);
}
:where([data-starkit-dialog-backdrop]) {
position: fixed;
inset: 0;
background: var(--star-overlay, var(--starplane-overlay));
animation: star-fade var(--star-dur-base, 0.18s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-dialog]) {
padding: var(--star-space-6, 32px);
border-radius: var(--star-radius-window, 10px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
position: relative;
width: min(32rem, 92vw);
max-height: 86vh;
overflow-y: auto;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
transform-origin: center;
--star-motion-scale-from: 0.97;
animation: star-scale var(--star-dur-slow, 0.26s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dialog]):focus-visible {
outline: none;
}
:where([data-starkit-dialog-title]) {
margin: 0 0 var(--star-space-2, 0.5rem);
font-family: var(--star-font-heading, var(--star-font-ui, system-ui, sans-serif));
font-size: var(--star-text-lg, 1.125rem);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
letter-spacing: var(--star-tracking-tight, -0.01em);
}
:where([data-starkit-dialog-description]) {
margin: 0 0 var(--star-space-3, 0.75rem);
color: var(--star-text-secondary, var(--starplane-text-secondary));
font-size: var(--star-text-sm, 0.875rem);
line-height: var(--star-leading-normal, 1.5);
}
:where([data-starkit-toast-host]) {
position: fixed;
bottom: var(--star-space-4, 1rem);
right: var(--star-space-4, 1rem);
z-index: var(--starkit-z-hud, 1100);
width: min(24rem, calc(100vw - 2rem));
pointer-events: none;
}
:where([data-starkit-toast]) {
padding: var(--star-space-3, 12px);
border-radius: var(--star-radius-control, 8px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
display: flex;
align-items: flex-start;
gap: var(--star-space-3, 0.75rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
pointer-events: auto;
transform-origin: right center;
--star-motion-distance: 55%;
animation: star-slide-end var(--star-dur-slow, 0.26s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
transition: transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-toast]:hover) {
transform: translateX(-2px);
}
:where([data-starkit-toast][data-tone="ok"]) {
border-left: 3px solid var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-toast][data-tone="warn"]) {
border-left: 3px solid var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-toast][data-tone="danger"]) {
border-left: 3px solid var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-toast][data-tone="info"]) {
border-left: 3px solid var(--star-info, var(--starplane-info));
}
:where([data-starkit-toast-message]) {
flex: 1 1 auto;
min-width: 0;
}
:where([data-starkit-toast-icon]) {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
line-height: 0;
}
:where([data-starkit-toast][data-tone="ok"]) [data-starkit-toast-icon] {
color: var(--star-ok);
}
:where([data-starkit-toast][data-tone="info"]) [data-starkit-toast-icon] {
color: var(--star-info);
}
:where([data-starkit-toast][data-tone="warn"]) [data-starkit-toast-icon] {
color: var(--star-warn);
}
:where([data-starkit-toast][data-tone="danger"]) [data-starkit-toast-icon] {
color: var(--star-danger);
}
:where([data-starkit-toast-close]) {
flex: 0 0 auto;
cursor: pointer;
border: none;
background: transparent;
color: inherit;
font-size: var(--star-text-lg, 1.125rem);
line-height: 1;
opacity: 0.6;
transition: opacity var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-toast-close]:hover) {
opacity: 1;
}
:where([data-starkit-toast-close]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-tooltip][data-size="sm"]) {
font-size: var(--star-text-2xs, 0.75rem);
padding: var(--star-space-1, 0.25rem);
}
:where([data-starkit-tooltip][data-arrow="true"]) {
overflow: visible;
}
:where([data-starkit-tooltip][data-arrow="true"])::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starkit-tooltip][data-arrow="true"][data-placement^="top"])::after {
bottom: -4px;
left: 14px;
border-left: none;
border-top: none;
}
:where([data-starkit-tooltip][data-arrow="true"][data-placement^="bottom"])::after {
top: -4px;
left: 14px;
border-right: none;
border-bottom: none;
}
:where([data-starkit-combobox-input][data-size="sm"]) {
min-width: 9rem;
padding: var(--star-space-1, 0.25rem);
font-size: var(--star-text-xs, 0.8125rem);
}
:where([data-starkit-combobox-input][data-size="lg"]) {
min-width: 16rem;
padding: var(--star-space-3, 0.75rem);
font-size: var(--star-text-sm, 0.9375rem);
}
:where([data-starkit-combobox-list][data-size="sm"]) {
min-width: 9rem;
}
:where([data-starkit-combobox-list][data-size="lg"]) {
min-width: 16rem;
}
:where([data-starkit-combobox-input][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-combobox-input][data-invalid="true"]):focus-visible {
outline-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-dialog][data-size="sm"]) {
width: min(24rem, 92vw);
}
:where([data-starkit-dialog][data-size="lg"]) {
width: min(48rem, 94vw);
}
:where([data-starkit-dialog][data-size="full"]) {
width: min(72rem, 96vw);
max-height: 94vh;
}
:where([data-starkit-dialog-root][data-placement="top"]) {
align-items: start;
padding-top: clamp(2rem, 10vh, 8rem);
}
:where([data-starkit-command][data-size="sm"]) {
width: min(32rem, 92vw);
}
:where([data-starkit-command][data-size="lg"]) {
width: min(48rem, 94vw);
}
:where([data-starkit-command-root][data-placement="center"]) {
align-items: center;
padding-top: var(--star-space-4, 1rem);
}
:where([data-starkit-contextmenu-menu][data-size="sm"] [data-starkit-contextmenu-item]) {
padding: var(--star-space-1, 0.25rem) var(--star-space-2, 0.5rem);
font-size: var(--star-text-xs, 0.8125rem);
}
:where([data-starkit-contextmenu-menu][data-size="lg"] [data-starkit-contextmenu-item]) {
padding: var(--star-space-3, 0.75rem);
font-size: var(--star-text-sm, 0.9375rem);
}
:where([data-starkit-contextmenu-menu][data-inset="true"] [data-starkit-contextmenu-item]) {
padding-left: calc(1.25rem + var(--star-space-2, 0.5rem) + var(--star-space-2, 0.5rem));
}
:where([data-starkit-contextmenu-menu][data-inset="true"] [data-starkit-contextmenu-item] [data-starkit-contextmenu-icon]) {
margin-left: calc(-1 * (1.25rem + var(--star-space-2, 0.5rem)));
}
:where([data-starkit-hovercard][data-size="sm"]) {
max-width: 14rem;
}
:where([data-starkit-hovercard][data-size="lg"]) {
max-width: 28rem;
}
:where([data-starkit-hovercard][data-arrow="true"]) {
overflow: visible;
}
:where([data-starkit-hovercard][data-arrow="true"])::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
transform: rotate(45deg);
pointer-events: none;
}
:where([data-starkit-hovercard][data-arrow="true"][data-placement^="bottom"])::after {
top: -4px;
left: 16px;
border-right: none;
border-bottom: none;
}
:where([data-starkit-hovercard][data-arrow="true"][data-placement^="top"])::after {
bottom: -4px;
left: 16px;
border-left: none;
border-top: none;
}
:where([data-starkit-toast][data-size="sm"]) {
gap: var(--star-space-2, 0.5rem);
font-size: var(--star-text-xs, 0.8125rem);
}
:where([data-starkit-toast-host][data-position="top-right"]) {
top: var(--star-space-4, 1rem);
bottom: auto;
transform-origin: right top;
}
:where([data-starkit-toast-host][data-position="top-left"]) {
top: var(--star-space-4, 1rem);
bottom: auto;
left: var(--star-space-4, 1rem);
right: auto;
transform-origin: left top;
}
:where([data-starkit-toast-host][data-position="bottom-left"]) {
left: var(--star-space-4, 1rem);
right: auto;
transform-origin: left bottom;
}
:where([data-starkit-toast-host][data-position="top-center"]) {
top: var(--star-space-4, 1rem);
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
:where([data-starkit-toast-host][data-position="bottom-center"]) {
left: 50%;
right: auto;
transform: translateX(-50%);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-tooltip]),
:where([data-starkit-dialog]),
:where([data-starkit-dialog-backdrop]),
:where([data-starkit-combobox-list]),
:where([data-starkit-command]),
:where([data-starkit-command-backdrop]),
:where([data-starkit-contextmenu-menu]),
:where([data-starkit-hovercard]),
:where([data-starkit-toast]) {
animation-duration: 0.01ms;
}
:where([data-starkit-toast]:hover) {
transform: none;
}
}
:where([data-starkit-alertdialog-body]) {
display: flex;
flex-direction: column;
gap: var(--star-space-3, 0.75rem);
}
:where([data-starkit-alertdialog-consequence]) {
margin: 0;
color: var(--star-text-muted, var(--starplane-text-secondary));
font-size: var(--star-text-xs, 0.75rem);
line-height: var(--star-leading-normal, 1.5);
}
:where([data-starkit-alertdialog-actions]) {
display: flex;
justify-content: flex-end;
gap: var(--star-space-2, 0.5rem);
margin-top: var(--star-space-2, 0.5rem);
}
:where([data-starkit-alertdialog-cancel]),
:where([data-starkit-alertdialog-confirm]) {
padding: var(--star-space-2, 0.5rem)
var(--star-space-4, 1rem);
border-radius: var(--star-radius-control, 0.375rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
font: inherit;
font-weight: var(--star-weight-semibold, 600);
cursor: pointer;
transition: filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-alertdialog-cancel]) {
background: var(--star-surface-raised, var(--starplane-surface-raised));
color: var(--star-text, var(--starplane-text));
}
:where([data-starkit-alertdialog-confirm][data-tone="danger"]) {
background: var(--star-danger, var(--starplane-danger));
border-color: var(--star-danger, var(--starplane-danger));
color: var(--star-text-on-accent, var(--star-surface, var(--starplane-danger-on)));
}
:where([data-starkit-alertdialog-confirm][data-tone="default"]) {
background: var(--star-accent, var(--starplane-accent));
border-color: var(--star-accent, var(--starplane-accent));
color: var(--star-text-on-accent, var(--star-surface, var(--starplane-text-on-accent)));
}
:where([data-starkit-alertdialog-cancel]:hover),
:where([data-starkit-alertdialog-confirm]:hover) {
filter: brightness(1.06);
}
:where([data-starkit-alertdialog-cancel]):focus-visible,
:where([data-starkit-alertdialog-confirm]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-form-field]) {
display: flex;
flex-direction: column;
}
:where([data-starkit-form-group]) {
display: flex;
flex-direction: column;
}
:where([data-starkit-form-group-title]) {
margin: 0;
font-family: var(--star-font-ui, var(--starplane-font-display, var(--starplane-font, system-ui, sans-serif)));
font-size: var(--star-text-base);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-form-group-description]) {
margin: 0;
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-fieldset]) {
min-inline-size: 0;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-fieldset][data-disabled="true"]) {
opacity: 0.55;
}
:where([data-starkit-legend]) {
padding-left: var(--star-space-2, 8px);
padding-right: var(--star-space-2, 8px);
font-family: var(--star-font-ui, var(--starplane-font-display, var(--starplane-font, system-ui, sans-serif)));
font-size: var(--star-text-sm);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-form-actions]) {
flex-wrap: wrap;
}
:where([data-starkit-date-input], [data-starkit-time-input]) {
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, var(--starplane-text-primary));
border: 1px solid var(--star-border, var(--starplane-border));
width: 100%;
box-sizing: border-box;
transition:
border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-date-input]:hover:not(:disabled)),
:where([data-starkit-time-input]:hover:not(:disabled)) {
border-color: var(--star-border-strong, var(--starplane-border-strong));
}
:where([data-starkit-date-input]):focus-visible,
:where([data-starkit-time-input]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-date-input][aria-invalid="true"]),
:where([data-starkit-time-input][aria-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-date-input]:disabled),
:where([data-starkit-time-input]:disabled) {
cursor: not-allowed;
opacity: 0.55;
}
:where([data-starkit-date-input])::-webkit-calendar-picker-indicator,
:where([data-starkit-time-input])::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: var(--starplane-picker-filter, none);
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-date-input]),
:where([data-starkit-time-input]) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-input-otp]) {
position: relative;
display: inline-flex;
}
:where([data-starkit-input-otp][aria-disabled="true"]) {
opacity: 0.55;
}
:where([data-starkit-input-otp-hidden]) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: transparent;
caret-color: transparent;
outline: none;
opacity: 0;
cursor: text;
z-index: 1;
}
:where([data-starkit-input-otp-hidden]:disabled) {
cursor: not-allowed;
}
:where([data-starkit-input-otp-slots]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
}
:where([data-starkit-input-otp-slot]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.75rem;
font-family: var(--star-font-mono, var(--starplane-font-mono, ui-monospace, monospace));
font-size: var(--star-text-lg);
color: var(--star-text, var(--starplane-text-primary));
background: var(--star-surface-sunken, var(--starplane-surface-sunken, transparent));
border: 1px solid var(--star-border, var(--starplane-border));
box-sizing: border-box;
transition:
border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-input-otp-slot]:first-child) {
border-start-start-radius: var(--star-radius-control, 0);
border-end-start-radius: var(--star-radius-control, 0);
}
:where([data-starkit-input-otp-slot]:last-child) {
border-start-end-radius: var(--star-radius-control, 0);
border-end-end-radius: var(--star-radius-control, 0);
}
:where([data-starkit-input-otp-slot][data-active="true"]) {
border-color: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 2px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
z-index: 1;
}
:where([data-starkit-input-otp-slot][data-filled="true"]) {
border-color: var(--star-border-strong, var(--starplane-border-strong));
}
:where([data-starkit-input-group]) {
display: flex;
align-items: center;
inline-size: 100%;
min-inline-size: 0;
box-sizing: border-box;
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-control, 0);
background: var(--star-surface-sunken, var(--starplane-surface-sunken, transparent));
transition:
border-color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-input-group]:has([data-align="block-start"])),
:where([data-starkit-input-group]:has([data-align="block-end"])) {
flex-direction: column;
align-items: stretch;
block-size: auto;
}
:where([data-starkit-input-group]:hover) {
border-color: var(--star-border-strong, var(--starplane-border-strong));
}
:where([data-starkit-input-group]:focus-within) {
border-color: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 2px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-input-group][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-input-group][data-disabled="true"]) {
opacity: 0.55;
cursor: not-allowed;
}
:where([data-starkit-input-group-control]) {
flex: 1 1 auto;
min-inline-size: 0;
font: inherit;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, var(--starplane-text-primary));
background: transparent;
border: 0;
outline: none;
padding: var(--star-space-2, 0.5rem);
}
:where([data-starkit-input-group-addon]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
color: var(--star-text-muted, var(--starplane-text-secondary));
padding-inline: var(--star-space-3, 0.75rem);
user-select: none;
}
:where([data-starkit-input-group-addon][data-align="inline-start"]) { order: 0; }
:where([data-starkit-input-group-addon][data-align="inline-end"]) { order: 9; }
:where([data-starkit-input-group-addon][data-align="block-start"]),
:where([data-starkit-input-group-addon][data-align="block-end"]) {
inline-size: 100%;
justify-content: flex-start;
padding-block: var(--star-space-2, 0.5rem);
}
:where([data-starkit-input-group-text]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-input-group-button]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
font: inherit;
cursor: pointer;
color: var(--star-text, var(--starplane-text-primary));
background: transparent;
border: 1px solid transparent;
border-radius: var(--star-radius-sm, 0);
padding: var(--star-space-1, 0.25rem) var(--star-space-2, 0.5rem);
}
:where([data-starkit-input-group-button]:hover:not(:disabled)) {
background: var(--star-surface-raised, var(--starplane-surface-raised, transparent));
}
:where([data-starkit-input-group-button]:disabled) {
cursor: not-allowed;
opacity: 0.55;
}
:where([data-starkit-calendar]) {
display: inline-flex;
flex-direction: column;
gap: var(--star-space-2, 0.5rem);
inline-size: max-content;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-calendar-header]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-calendar-caption]) {
font-size: var(--star-text-base);
font-weight: var(--star-weight-semibold, 600);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-calendar-nav]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
cursor: pointer;
color: var(--star-text-muted, var(--starplane-text-secondary));
background: transparent;
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-control, 0);
}
:where([data-starkit-calendar-nav]:hover:not(:disabled)) {
color: var(--star-text, var(--starplane-text-primary));
border-color: var(--star-border-strong, var(--starplane-border-strong));
}
:where([data-starkit-calendar-nav]:disabled) {
cursor: not-allowed;
opacity: 0.45;
}
:where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar-week]) {
display: grid;
grid-template-columns: repeat(7, 2.25rem);
}
:where([data-starkit-calendar-weekday]) {
display: inline-flex;
align-items: center;
justify-content: center;
block-size: 2rem;
font-size: var(--star-text-xs);
font-weight: var(--star-weight-medium, 500);
color: var(--star-text-muted, var(--starplane-text-secondary));
user-select: none;
}
:where([data-starkit-calendar-cell]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
:where([data-starkit-calendar-day]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
font: inherit;
cursor: pointer;
color: var(--star-text, var(--starplane-text-primary));
background: transparent;
border: 1px solid transparent;
border-radius: var(--star-radius-control, 0);
transition:
background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
color var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-calendar-day]:hover:not(:disabled)) {
background: var(--star-surface-raised, var(--starplane-surface-raised, transparent));
}
:where([data-starkit-calendar-day]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 1px;
}
:where([data-starkit-calendar-day][data-outside="true"]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
opacity: 0.6;
}
:where([data-starkit-calendar-day][data-today="true"]) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-calendar-day][data-selected="true"]) {
background: var(--star-accent-cta, var(--star-accent, var(--starplane-accent-cta)));
color: var(--star-accent-on, #ffffff);
border-color: var(--star-accent-cta, var(--star-accent, var(--starplane-accent-cta)));
}
:where([data-starkit-calendar-day]:disabled) {
cursor: not-allowed;
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-input-otp-slot]),
:where([data-starkit-input-group]),
:where([data-starkit-calendar-day]) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-form-actions][data-fullwidth="true"]) > * {
flex: 1 1 0;
}
:where([data-starkit-form-actions][data-sticky="true"]) {
position: sticky;
bottom: 0;
z-index: 1;
background: var(--star-surface, var(--star-surface-raised, var(--starplane-surface-base, transparent)));
padding-block: var(--star-space-2, 0.5rem);
}
:where([data-starkit-form-group][data-divider="true"]) :where([data-starkit-form-group-heading]) {
border-block-end: 1px solid var(--star-border, var(--starplane-border-subtle));
padding-block-end: var(--star-space-2, 0.5rem);
}
:where([data-starkit-form-group][data-orientation="horizontal"]) :where([data-starkit-form-group-heading]) {
flex: 0 0 auto;
min-inline-size: 12rem;
}
:where([data-starkit-fieldset][data-tone="accent"]) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-fieldset][data-tone="warn"]) {
border-color: var(--star-warn, var(--star-accent, var(--starplane-warn)));
}
:where([data-starkit-fieldset][data-tone="danger"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-legend][data-size="sm"]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-legend][data-size="lg"]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-legend][data-tone="muted"]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-legend][data-tone="accent"]) {
color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-legend][data-tone="danger"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-legend-required]) {
margin-inline-start: var(--star-space-half, 2px);
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-form-field][data-size="sm"]) {
font-size: var(--star-text-sm);
}
:where([data-starkit-form-field][data-size="lg"]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-form-field][data-inset="true"]) {
padding: var(--star-space-3, 0.75rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 0);
}
:where([data-starkit-date-input][data-size="sm"]),
:where([data-starkit-time-input][data-size="sm"]) {
font-size: var(--star-text-sm);
}
:where([data-starkit-date-input][data-size="lg"]),
:where([data-starkit-time-input][data-size="lg"]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-date-input][data-fullwidth="false"]),
:where([data-starkit-time-input][data-fullwidth="false"]) {
width: auto;
}
:where([data-starkit-input-otp][data-size="sm"]) :where([data-starkit-input-otp-slot]) {
inline-size: 2rem;
block-size: 2.25rem;
font-size: var(--star-text-sm);
}
:where([data-starkit-input-otp][data-size="lg"]) :where([data-starkit-input-otp-slot]) {
inline-size: 3rem;
block-size: 3.25rem;
font-size: var(--star-text-xl);
}
:where([data-starkit-input-otp-separator]) {
display: inline-flex;
align-items: center;
user-select: none;
padding-inline: var(--star-space-1, 0.25rem);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-input-group][data-size="sm"]) :where([data-starkit-input-group-control]) {
padding: var(--star-space-1, 0.25rem) var(--star-space-2, 0.5rem);
font-size: var(--star-text-sm);
}
:where([data-starkit-input-group][data-size="lg"]) :where([data-starkit-input-group-control]) {
padding: var(--star-space-3, 0.75rem);
font-size: var(--star-text-lg);
}
:where([data-starkit-input-group][data-radius="sm"]) {
border-radius: var(--star-radius-sm, 0);
}
:where([data-starkit-input-group][data-radius="lg"]) {
border-radius: var(--star-radius-md, 0.5rem);
}
:where([data-starkit-input-group][data-radius="full"]) {
border-radius: var(--star-radius-pill, 9999px);
}
:where([data-starkit-input-group][data-fullwidth="false"]) {
inline-size: auto;
}
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 1.875rem);
}
:where([data-starkit-calendar][data-size="sm"]) :where([data-starkit-calendar-day]) {
inline-size: 1.875rem;
block-size: 1.875rem;
font-size: var(--star-text-sm);
}
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 2.75rem);
}
:where([data-starkit-calendar][data-size="lg"]) :where([data-starkit-calendar-day]) {
inline-size: 2.75rem;
block-size: 2.75rem;
font-size: var(--star-text-lg);
}
:where([data-starkit-calendar][data-fullwidth="true"]) {
inline-size: 100%;
}
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-weekdays]),
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-week]) {
grid-template-columns: repeat(7, 1fr);
}
:where([data-starkit-calendar][data-fullwidth="true"]) :where([data-starkit-calendar-day]) {
inline-size: 100%;
}
:where([data-starkit-native-select]) {
border-radius: var(--star-radius-control, 8px);
appearance: none;
-webkit-appearance: none;
inline-size: 100%;
font: inherit;
line-height: var(--star-leading-normal, 1.4);
background-color: var(--star-surface, var(--starplane-surface-default, transparent));
border: 1px solid var(--star-border, var(--starplane-border));
background-repeat: no-repeat;
background-position: right var(--star-space-2, 0.65rem) center;
background-size: var(--star-text-xs);
padding-inline-end: var(--star-space-6, 2rem);
transition:
border-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
box-shadow var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-native-select]:hover:not(:disabled)) {
border-color: var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
}
:where([data-starkit-native-select]):focus-visible {
outline: none;
border-color: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 2px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-native-select][data-invalid="true"]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-native-select][data-invalid="true"]):focus-visible {
box-shadow: 0 0 0 2px var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-native-select]:disabled) {
opacity: 0.55;
cursor: not-allowed;
}
:where([data-starkit-native-select][data-density="compact"]) {
line-height: var(--star-leading-tight, 1.2);
padding-block: var(--star-space-1, 0.25rem);
}
:where([data-starkit-label]) {
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-sm);
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
color: var(--star-text, var(--starplane-text-primary));
cursor: default;
}
:where([data-starkit-label][data-size="sm"]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-label][data-size="lg"]) {
font-size: var(--star-text-base);
}
:where([data-starkit-label][data-density="compact"]) {
line-height: var(--star-leading-tight, 1.2);
}
:where([data-starkit-label][data-register="legend"]) {
font-family: var(--star-font-ui, var(--starplane-font-display, var(--starplane-font, system-ui, sans-serif)));
font-weight: var(--star-weight-bold, 700);
letter-spacing: var(--star-tracking-tight, var(--starplane-tracking-tight, -0.01em));
text-transform: none;
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-label-required]) {
color: var(--star-danger, var(--starplane-danger));
margin-inline-start: var(--star-space-half, 2px);
}
:where([data-starkit-radio-group]) {
border: 0;
}
:where([data-starkit-radio]) {
display: inline-flex;
align-items: flex-start;
gap: var(--star-space-2, 0.5rem);
cursor: pointer;
border-radius: var(--star-radius-control, 0.375rem);
padding: var(--star-space-1, 0.25rem);
transition: background-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-radio][aria-disabled="true"]) {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-radio]:hover:not([aria-disabled="true"])) {
background-color: var(--star-surface-raised, var(--starplane-surface-raised, transparent));
}
:where([data-starkit-radio]):focus-visible {
outline: none;
}
:where([data-starkit-radio]):focus-visible :where([data-starkit-radio-dot]) {
box-shadow: 0 0 0 3px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-radio-dot]) {
flex: none;
inline-size: 1.1rem;
block-size: 1.1rem;
margin-block-start: var(--star-space-half, 0.1rem);
border-radius: var(--star-radius-pill, 999px);
border: 2px solid var(--star-border-strong, var(--star-border, var(--starplane-border-strong)));
background-color: var(--star-surface, var(--starplane-surface-default, transparent));
transition: border-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
position: relative;
}
:where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot]) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-radio-group][data-tone="ok"]) :where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot]) {
border-color: var(--star-ok, var(--star-accent, var(--starplane-ok)));
}
:where([data-starkit-radio-group][data-tone="danger"]) :where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot]) {
border-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot])::after {
content: "";
position: absolute;
inset: var(--star-space-1, 3px);
border-radius: var(--star-radius-pill, 999px);
background-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-radio-group][data-tone="ok"]) :where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot])::after {
background-color: var(--star-ok, var(--star-accent, var(--starplane-ok)));
}
:where([data-starkit-radio-group][data-tone="danger"]) :where([data-starkit-radio][data-selected="true"]) :where([data-starkit-radio-dot])::after {
background-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-radio-main]) {
display: inline-flex;
flex-direction: column;
gap: var(--star-space-half, 0.1rem);
}
:where([data-starkit-radio-label]) {
color: var(--star-text, var(--starplane-text-primary));
font-size: var(--star-text-sm);
font-weight: var(--star-weight-medium, 500);
line-height: var(--star-leading-tight, 1.2);
}
:where([data-starkit-radio-description]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
}
:where([data-starkit-radio-group][data-density="compact"]) :where([data-starkit-radio]) {
padding: var(--star-space-half, 0.125rem);
}
:where([data-starkit-dropzone]) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--star-space-2, 0.5rem);
padding: var(--star-space-6, 1.5rem);
cursor: pointer;
border: 2px dashed var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-md, 0.75rem);
color: var(--star-text-muted, var(--starplane-text-secondary));
background-color: var(--star-surface, var(--starplane-surface-default, transparent));
transition:
border-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease)),
background-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-dropzone]:hover:not([aria-disabled="true"])) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-dropzone]):focus-visible {
outline: none;
border-color: var(--star-accent, var(--starplane-accent));
box-shadow: 0 0 0 3px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-dropzone][data-dragging="true"]) {
border-color: var(--star-accent, var(--starplane-accent));
background-color: var(--star-accent-tint, var(--star-surface-raised, var(--starplane-accent-tint, transparent)));
}
:where([data-starkit-dropzone][data-tone="ok"]) { border-color: var(--star-ok, var(--star-accent, var(--starplane-ok))); }
:where([data-starkit-dropzone][data-tone="warn"]) { border-color: var(--star-warn, var(--star-accent, var(--starplane-warn))); }
:where([data-starkit-dropzone][data-tone="danger"]) { border-color: var(--star-danger, var(--starplane-danger)); }
:where([data-starkit-dropzone][data-disabled="true"]) {
opacity: 0.55;
cursor: not-allowed;
}
:where([data-starkit-dropzone][data-density="compact"]) {
padding: var(--star-space-4, 0.75rem);
}
:where([data-starkit-dropzone][data-register="inline"]) {
flex-direction: row;
padding-block: var(--star-space-2, 0.5rem);
}
:where([data-starkit-dropzone-input]) {
position: absolute;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
:where([data-starkit-color-picker]) {
position: relative;
display: inline-block;
}
:where([data-starkit-color-picker-trigger]) {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-control, 0.375rem);
background-color: var(--star-surface, var(--starplane-surface-raised, transparent));
transition: border-color var(--star-dur-base, 0.14s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-color-picker-trigger]:hover:not(:disabled)) {
border-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-color-picker-trigger]):focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-color-picker-trigger]:disabled) { opacity: 0.55; cursor: not-allowed; }
:where([data-starkit-color-picker-preview]) {
inline-size: 1.25rem;
block-size: 1.25rem;
border-radius: var(--star-radius-sm, 0.25rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
background-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-color-picker-trigger][data-size="sm"]) :where([data-starkit-color-picker-preview]) { inline-size: 1rem; block-size: 1rem; }
:where([data-starkit-color-picker-trigger][data-size="lg"]) :where([data-starkit-color-picker-preview]) { inline-size: 1.6rem; block-size: 1.6rem; }
:where([data-starkit-color-picker-panel]) {
position: absolute;
inset-block-start: calc(100% + var(--star-space-2, 0.375rem));
inset-inline-start: 0;
z-index: var(--starkit-z-overlay, 40);
padding: var(--star-space-2, 0.5rem);
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-md, 0.75rem);
background-color: var(--star-surface, var(--starplane-surface-raised, transparent));
box-shadow: var(--star-shadow-2, 0 8px 24px -8px rgba(0, 0, 0, 0.28));
}
:where([data-starkit-color-picker-panel][hidden]) { display: none; }
:where([data-starkit-color-picker-grid]) {
display: grid;
grid-template-columns: repeat(4, var(--star-space-6, 1.5rem));
gap: var(--star-space-2, 0.375rem);
}
:where([data-starkit-color-picker-swatch]) {
inline-size: var(--star-space-6, 1.5rem);
block-size: var(--star-space-6, 1.5rem);
padding: 0;
cursor: pointer;
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-sm, 0.25rem);
transition: transform var(--star-dur-base, 0.1s) var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-color-picker-swatch]:hover) { transform: scale(1.08); }
:where([data-starkit-color-picker-swatch]):focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
}
:where([data-starkit-color-picker-swatch][data-selected="true"]) {
border-color: var(--star-text, var(--starplane-text-primary));
box-shadow: 0 0 0 2px var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-color-picker][data-density="compact"]) :where([data-starkit-color-picker-grid]) {
gap: var(--star-space-1, 0.25rem);
}
:where(
[data-starkit-disclosure-trigger],
[data-starkit-accordion-trigger],
[data-starkit-sidebar-item],
[data-starkit-pagination-prev],
[data-starkit-pagination-next],
[data-starkit-pagination-page]
) {
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
font: inherit;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
transition:
background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where(
[data-starkit-disclosure-trigger]:hover:not([aria-disabled="true"]),
[data-starkit-accordion-trigger]:hover:not([aria-disabled="true"]),
[data-starkit-sidebar-item]:hover:not([data-disabled="true"]),
[data-starkit-pagination-prev]:hover:not([aria-disabled="true"]),
[data-starkit-pagination-next]:hover:not([aria-disabled="true"]),
[data-starkit-pagination-page]:hover:not([aria-disabled="true"])
) {
background: color-mix(in srgb, var(--star-text) 7%, transparent);
}
:where(
[data-starkit-disclosure-trigger],
[data-starkit-accordion-trigger],
[data-starkit-sidebar-item],
[data-starkit-pagination-prev],
[data-starkit-pagination-next],
[data-starkit-pagination-page]
):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where(
[data-starkit-disclosure-trigger][aria-disabled="true"],
[data-starkit-accordion-trigger][aria-disabled="true"],
[data-starkit-sidebar-item][data-disabled="true"],
[data-starkit-pagination-prev][aria-disabled="true"],
[data-starkit-pagination-next][aria-disabled="true"]
) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
:where([data-starkit-glyph]) {
display: block;
flex-shrink: 0;
}
:where([data-starkit-pagination-prev] [data-starkit-glyph]) {
transform: rotate(180deg);
}
:where([data-starkit-disclosure], [data-starkit-accordion], [data-starkit-collapsible]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, 8px);
}
:where([data-starkit-sidebar]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, 0.5rem);
padding: var(--star-space-3, 0.75rem);
}
:where([data-starkit-disclosure-trigger], [data-starkit-accordion-trigger]) {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
}
:where(
[data-starkit-disclosure-title],
[data-starkit-accordion-title],
[data-starkit-collapsible-title]
) {
font-weight: var(--star-weight-semibold, 600);
line-height: var(--star-leading-tight, 1.2);
letter-spacing: var(--star-tracking-tight, -0.01em);
}
:where(
[data-starkit-disclosure-region],
[data-starkit-accordion-region],
[data-starkit-collapsible-content]
) {
color: var(--star-text-secondary);
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
}
:where([data-starkit-disclosure-region][data-open="false"]),
:where([data-starkit-accordion-region][data-open="false"]) {
display: none;
}
:where([data-starkit-collapsible-trigger]) {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-align: left;
gap: var(--star-space-2, 0.5rem);
cursor: pointer;
background: transparent;
border: none;
font: inherit;
color: inherit;
}
:where([data-starkit-collapsible-trigger][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
:where([data-starkit-collapsible-trigger]:focus-visible) {
outline: 2px solid var(--star-accent, #5b86f5);
outline-offset: 2px;
border-radius: var(--star-radius-control, 4px);
}
:where([data-starkit-collapsible-content][data-open="false"]) {
display: none;
}
:where([data-starkit-collapsible-content][data-open="true"]) {
--star-motion-distance: 4px;
animation: star-fall var(--star-dur-base, 0.16s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-collapsible-caret]) {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
transition: transform var(--star-dur-base, 0.16s) var(--star-ease, var(--starplane-ease-out, ease));
transform: rotate(-90deg);
}
:where([data-starkit-collapsible][data-open="true"] [data-starkit-collapsible-caret]) {
transform: rotate(0deg);
}
:where([data-starkit-collapsible][data-density="compact"] [data-starkit-collapsible-trigger]) {
padding: var(--star-space-1, 0.25rem) 0;
}
:where([data-starkit-collapsible][data-density="comfortable"] [data-starkit-collapsible-trigger]) {
padding: var(--star-space-2, 0.5rem) 0;
}
:where([data-starkit-collapsible][data-size="sm"] [data-starkit-collapsible-trigger]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-collapsible][data-size="lg"] [data-starkit-collapsible-trigger]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-collapsible][data-register="legend"] [data-starkit-collapsible-content]) {
font-family: var(--star-font-mono, var(--starplane-type-mono, ui-monospace, monospace));
font-size: var(--star-text-sm);
}
:where([data-starkit-navbar]) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--star-space-4, 16px);
padding: var(--star-space-3, 12px);
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-sidebar-item]) {
display: block;
width: 100%;
text-align: left;
}
:where([data-starkit-sidebar-item][data-active="true"]) {
background: color-mix(in srgb, var(--star-accent) 6%, var(--star-surface));
color: var(--star-accent-strong, var(--starplane-accent-strong));
font-weight: 600;
box-shadow: inset 2px 0 0 0 var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-sidebar][data-collapsed="true"]) {
width: var(--starkit-sidebar-collapsed-w, 0);
overflow: hidden;
}
:where([data-starkit-pagination-page][data-current="true"]) {
background: var(--star-accent-cta, var(--starplane-accent, var(--star-accent)));
color: var(--star-accent-on, var(--starplane-accent-on));
font-weight: 600;
}
:where([data-starkit-stepper-list]) {
display: flex;
align-items: center;
gap: var(--star-space-3, 0.75rem);
margin: 0;
padding: 0;
list-style: none;
}
:where([data-starkit-stepper-step]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-stepper-label]) {
font-size: var(--star-text-sm);
font-weight: var(--star-weight-medium, 500);
line-height: var(--star-leading-tight, 1.2);
}
:where([data-starkit-stepper-step][data-state="current"] [data-starkit-stepper-label]) {
color: var(--star-text);
font-weight: var(--star-weight-semibold, 600);
}
:where([data-starkit-stepper-marker]) {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--star-space-6, 1.5rem);
block-size: var(--star-space-6, 1.5rem);
border-radius: var(--star-radius-pill, 999px);
border: 1px solid var(--star-border, var(--starplane-border));
font-size: var(--star-text-sm);
font-weight: var(--star-weight-semibold, 600);
line-height: 1;
transition: background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-stepper-step][data-state="done"] [data-starkit-stepper-marker]) {
background: var(--star-ok, var(--starplane-ok));
color: var(--star-accent-on, var(--starplane-accent-on));
border-color: transparent;
}
:where([data-starkit-stepper-step][data-state="current"] [data-starkit-stepper-marker]) {
background: var(--star-accent-cta, var(--starplane-accent, var(--star-accent)));
color: var(--star-accent-on, var(--starplane-accent-on));
border-color: transparent;
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--star-accent) 22%, transparent);
}
:where([data-starkit-stepper-step][data-state="upcoming"]) {
color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-menubar-menu]) {
position: relative;
}
:where([data-starkit-menubar-trigger]) {
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
font: inherit;
line-height: 1;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
transition: background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where(
[data-starkit-menubar-trigger]:hover:not([disabled]):not([aria-disabled="true"]),
[data-starkit-menubar-trigger][aria-expanded="true"]
) {
background: color-mix(in srgb, var(--star-accent) 12%, transparent);
}
:where([data-starkit-menubar-trigger]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where(
[data-starkit-menubar-trigger][disabled],
[data-starkit-menubar-trigger][aria-disabled="true"]
) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
:where([data-starkit-menubar-content]) {
position: absolute;
z-index: 20;
inset-inline-start: 0;
min-width: 12rem;
margin-block-start: var(--star-space-1, 0.25rem);
padding: var(--star-space-2, 0.5rem);
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
border: 1px solid var(--star-border, var(--starplane-border));
border-radius: var(--star-radius-control, 8px);
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
}
:where([data-starkit-menubar-content][data-open="false"]) {
display: none;
}
:where([data-starkit-menubar-item]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
width: 100%;
cursor: pointer;
border: 0;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
font: inherit;
text-align: left;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
transition: background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where(
[data-starkit-menubar-item]:hover:not([disabled]):not([aria-disabled="true"]),
[data-starkit-menubar-item]:focus-visible
) {
background: color-mix(in srgb, var(--star-accent) 12%, transparent);
outline: none;
}
:where([data-starkit-menubar-item][data-danger="true"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-menubar-item][data-danger="true"]:hover:not([disabled]):not([aria-disabled="true"])) {
background: color-mix(in srgb, var(--star-danger) 12%, transparent);
}
:where(
[data-starkit-menubar-item][disabled],
[data-starkit-menubar-item][aria-disabled="true"]
) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
:where([data-starkit-menubar-icon]) {
display: inline-flex;
align-items: center;
}
:where([data-starkit-menubar-hint]) {
margin-inline-start: auto;
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: var(--star-text-xs);
}
@media (prefers-reduced-motion: reduce) {
:where(
[data-starkit-disclosure-trigger],
[data-starkit-accordion-trigger],
[data-starkit-sidebar-item],
[data-starkit-pagination-prev],
[data-starkit-pagination-next],
[data-starkit-pagination-page],
[data-starkit-stepper-marker],
[data-starkit-menubar-trigger],
[data-starkit-menubar-item]
) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-navmenu]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
background-color: var(--star-surface, #fbf8f1);
border-width: 1px;
border-style: solid;
border-color: var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
position: relative;
}
:where([data-starkit-navmenu-list]) {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
:where([data-starkit-navmenu-item]) {
position: relative;
}
:where([data-starkit-navmenu-link]),
:where([data-starkit-navmenu-trigger]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
padding: var(--star-space-1, 0.25rem)
var(--star-space-3, 0.75rem);
border: none;
border-radius: var(--star-radius-control, 0.375rem);
background: transparent;
color: inherit;
font: inherit;
text-decoration: none;
cursor: pointer;
transition: background var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-navmenu-link]:hover),
:where([data-starkit-navmenu-trigger]:hover),
:where([data-starkit-navmenu-trigger][data-open="true"]) {
background: color-mix(in srgb, var(--star-accent) 14%, transparent);
}
:where([data-starkit-navmenu-link]):focus-visible,
:where([data-starkit-navmenu-trigger]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-navmenu-link][aria-disabled="true"]),
:where([data-starkit-navmenu-trigger]):disabled {
opacity: 0.5;
cursor: not-allowed;
}
:where([data-starkit-navmenu-caret]) {
font-size: 0.7em;
transition: transform var(--star-dur-base, 0.18s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-navmenu-trigger][data-open="true"] [data-starkit-navmenu-caret]) {
transform: rotate(180deg);
}
:where([data-starkit-navmenu-panel]) {
position: absolute;
top: calc(100% + var(--star-space-1, 0.25rem));
left: 0;
z-index: var(--starkit-z-overlay, 1000);
min-width: 14rem;
max-width: min(32rem, 92vw);
padding: var(--star-space-3, 0.75rem);
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 0.375rem);
background: var(--star-surface-raised, var(--starplane-surface-raised));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
transform-origin: top left;
--star-motion-distance: 4px;
animation: star-fall var(--star-dur-fast, 0.14s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-navmenu-panel]) {
animation-duration: 0.01ms;
}
:where([data-starkit-navmenu-caret]) {
transition-duration: 0.01ms;
}
}
:where([data-starkit-tabspanel][data-orientation="vertical"]) {
display: flex;
align-items: flex-start;
gap: var(--star-space-4, 1rem);
}
:where([data-starkit-tabspanel][data-orientation="vertical"] [data-starplane-control-tablist]) {
flex-direction: column;
flex-shrink: 0;
}
:where([data-starkit-tabspanel][data-orientation="vertical"] [data-starplane-control-tabpanel]) {
flex: 1 1 auto;
}
:where([data-starkit-tabspanel][data-fitted="true"] [data-starplane-control-tablist]) {
display: flex;
width: 100%;
}
:where([data-starkit-tabspanel][data-fitted="true"] [data-starplane-control-tab]) {
flex: 1 1 0;
justify-content: center;
}
:where([data-starkit-tabspanel][data-variant="pill"] [data-starplane-control-tab][data-selected="true"]) {
background: color-mix(in srgb, var(--star-accent) 14%, transparent);
border-radius: var(--star-radius-pill, 999px);
}
:where([data-starkit-tabspanel][data-variant="enclosed"] [data-starplane-control-tab][data-selected="true"]) {
border: 1px solid var(--star-border, var(--starplane-border));
border-bottom-color: transparent;
border-radius: var(--star-radius-control, 6px)
var(--star-radius-control, 6px) 0 0;
}
:where([data-starkit-tabspanel][data-size="sm"] [data-starplane-control-tab]) {
font-size: var(--star-text-xs);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-tabspanel][data-size="lg"] [data-starplane-control-tab]) {
font-size: var(--star-text-lg);
padding: var(--star-space-3, 0.75rem)
var(--star-space-4, 1rem);
}
:where([data-starkit-accordion-caret], [data-starkit-disclosure-caret]) {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 0.85em;
line-height: 0;
transition: transform var(--star-dur-base, 0.18s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-accordion-title], [data-starkit-disclosure-title]) {
flex: 1 1 auto;
}
:where([data-icon-position="end"] [data-starkit-accordion-caret]),
:where([data-icon-position="end"] [data-starkit-disclosure-caret]) {
order: 2;
}
:where([data-icon-position="start"] [data-starkit-accordion-caret]),
:where([data-icon-position="start"] [data-starkit-disclosure-caret]) {
order: 0;
margin-inline-end: var(--star-space-2, 0.5rem);
}
:where([data-starkit-accordion-item][data-open="true"] [data-starkit-accordion-caret]),
:where([data-starkit-disclosure][data-open="true"] [data-starkit-disclosure-caret]) {
transform: rotate(180deg);
}
:where([data-starkit-accordion][data-variant="separated"] [data-starkit-accordion-item]),
:where([data-starkit-accordion][data-variant="contained"] [data-starkit-accordion-item]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 8px);
padding: var(--star-space-2, 0.5rem);
}
:where([data-starkit-accordion][data-variant="contained"]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 8px);
overflow: hidden;
}
:where([data-starkit-accordion][data-size="sm"] [data-starkit-accordion-trigger]) {
font-size: var(--star-text-xs);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-accordion][data-size="lg"] [data-starkit-accordion-trigger]) {
font-size: var(--star-text-lg);
padding: var(--star-space-3, 0.75rem)
var(--star-space-4, 1rem);
}
:where([data-starkit-disclosure][data-variant="bordered"]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 8px);
padding: var(--star-space-3, 0.75rem);
}
:where([data-starkit-disclosure][data-variant="filled"]) {
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
border-radius: var(--star-radius-control, 8px);
padding: var(--star-space-3, 0.75rem);
}
:where([data-starkit-disclosure][data-size="sm"] [data-starkit-disclosure-trigger]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-disclosure][data-size="lg"] [data-starkit-disclosure-trigger]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-pagination-first], [data-starkit-pagination-last]) {
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
font: inherit;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
transition: background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-pagination-first]:hover:not([aria-disabled="true"])),
:where([data-starkit-pagination-last]:hover:not([aria-disabled="true"])) {
background: color-mix(in srgb, var(--star-text) 7%, transparent);
}
:where([data-starkit-pagination-first][aria-disabled="true"]),
:where([data-starkit-pagination-last][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
:where([data-starkit-pagination-first], [data-starkit-pagination-last]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-pagination-gap]) {
display: inline-flex;
align-items: flex-end;
padding-inline: var(--star-space-1, 0.25rem);
color: var(--star-text-muted, var(--starplane-text-muted));
user-select: none;
}
:where([data-starkit-pagination][data-compact]) {
gap: 0;
}
:where([data-starkit-pagination][data-size="sm"] button) {
font-size: var(--star-text-xs);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-pagination][data-size="lg"] button) {
font-size: var(--star-text-lg);
padding: var(--star-space-3, 0.75rem)
var(--star-space-4, 1rem);
}
:where([data-starkit-sidebar][data-width="true"]:not([data-collapsed="true"])) {
inline-size: var(--starkit-sidebar-w);
}
:where([data-starkit-sidebar][data-side="right"] [data-starkit-sidebar-item][data-active="true"]) {
box-shadow: inset -2px 0 0 0 var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-sidebar][data-side="right"]) {
text-align: end;
}
:where([data-starkit-sidebar][data-variant="filled"]) {
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
}
:where([data-starkit-sidebar][data-variant="floating"]) {
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 12px);
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
}
:where([data-starkit-sidebar][data-size="sm"] [data-starkit-sidebar-item]) {
font-size: var(--star-text-xs);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-sidebar][data-size="lg"] [data-starkit-sidebar-item]) {
font-size: var(--star-text-lg);
padding: var(--star-space-3, 0.75rem)
var(--star-space-4, 1rem);
}
:where([data-starkit-stepper][data-orientation="vertical"] [data-starkit-stepper-list]) {
flex-direction: column;
align-items: flex-start;
}
:where([data-starkit-stepper][data-variant="dots"] [data-starkit-stepper-marker]) {
inline-size: 0.75rem;
block-size: 0.75rem;
font-size: 0;
padding: 0;
}
:where([data-starkit-stepper][data-variant="simple"] [data-starkit-stepper-marker]) {
display: none;
}
:where([data-starkit-stepper][data-size="sm"] [data-starkit-stepper-marker]) {
inline-size: 1.15rem;
block-size: 1.15rem;
font-size: 0.7rem;
}
:where([data-starkit-stepper][data-size="lg"] [data-starkit-stepper-marker]) {
inline-size: 2rem;
block-size: 2rem;
font-size: 1rem;
}
:where([data-starkit-stepper-step][data-clickable="true"]) {
cursor: pointer;
border-radius: var(--star-radius-control, 6px);
transition: background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-stepper-step][data-clickable="true"]:hover) {
background: color-mix(in srgb, var(--star-text) 7%, transparent);
}
:where([data-starkit-stepper-step][data-clickable="true"]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-navbar][data-sticky="true"]) {
position: sticky;
top: 0;
z-index: var(--starkit-z-overlay, 100);
background: var(--star-surface, var(--starplane-surface));
}
:where([data-starkit-navbar][data-variant="raised"]) {
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-navbar][data-variant="transparent"]) {
border-bottom-color: transparent;
background: transparent;
}
:where([data-starkit-navbar][data-variant="bordered"]) {
border: 1px solid var(--star-border, var(--starplane-border-subtle));
border-radius: var(--star-radius-control, 10px);
}
:where([data-starkit-navbar][data-density="compact"]) {
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-navmenu][data-variant="plain"]) {
background: transparent;
border-color: transparent;
}
:where([data-starkit-navmenu][data-size="sm"] [data-starkit-navmenu-link]),
:where([data-starkit-navmenu][data-size="sm"] [data-starkit-navmenu-trigger]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-navmenu][data-size="lg"] [data-starkit-navmenu-link]),
:where([data-starkit-navmenu][data-size="lg"] [data-starkit-navmenu-trigger]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-navmenu][data-align="end"] [data-starkit-navmenu-panel]) {
left: auto;
right: 0;
transform-origin: top right;
}
:where([data-starkit-navmenu][data-align="center"] [data-starkit-navmenu-panel]) {
left: 50%;
transform: translateX(-50%);
}
:where([data-starkit-menubar][data-variant="raised"]) {
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
border-radius: var(--star-radius-control, 8px);
padding: var(--star-space-1, 0.25rem);
}
:where([data-starkit-menubar][data-size="sm"] [data-starkit-menubar-trigger]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-menubar][data-size="lg"] [data-starkit-menubar-trigger]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-menubar][data-align="end"] [data-starkit-menubar-content]) {
inset-inline-start: auto;
inset-inline-end: 0;
}
:where([data-starkit-theme-toggle]) {
cursor: pointer;
border: 1px solid var(--star-border, var(--starplane-border, currentColor));
border-radius: var(--star-radius-control, 6px);
font: inherit;
line-height: 1;
transition:
background var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease)),
filter var(--star-dur-base, 0.14s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-theme-toggle][data-variant="ghost"]) {
border-color: transparent;
}
:where([data-starkit-theme-toggle][data-variant="raised"]) {
border-color: transparent;
}
:where([data-starkit-theme-toggle]:hover:not([aria-disabled="true"])) {
filter: brightness(1.06);
}
:where([data-starkit-theme-toggle]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-theme-toggle][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.55;
pointer-events: none;
}
:where([data-starkit-theme-toggle][data-density="compact"]) {
padding-block: var(--star-space-1, 0.25rem);
}
:where([data-starkit-theme-toggle][data-register="toolbar"]) {
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: var(--star-text-xs);
}
:where([data-starkit-theme-toggle-light]),
:where([data-starkit-theme-toggle-dark]) {
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
:where(
[data-starkit-accordion-caret],
[data-starkit-disclosure-caret],
[data-starkit-collapsible-caret],
[data-starkit-collapsible-content],
[data-starkit-pagination-first],
[data-starkit-pagination-last],
[data-starkit-stepper-step][data-clickable="true"],
[data-starkit-theme-toggle]
) {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
}
}
:where([data-starkit-navrail]) {
display: flex;
flex-direction: column;
gap: var(--star-space-3, 12px);
padding: var(--star-space-2, 8px);
color: var(--star-text, var(--starplane-text-primary, inherit));
}
:where([data-starkit-navrail-list]) {
list-style: none;
margin: 0;
padding: 0;
}
:where([data-starkit-navrail-link]) {
display: flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
color: inherit;
text-decoration: none;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-navrail-link]:hover) {
background: color-mix(in srgb, var(--star-text) 7%, transparent);
}
:where([data-starkit-navrail-link][data-active="true"]),
:where([data-starkit-navrail-link][aria-current="page"]) {
background: color-mix(in srgb, var(--star-accent) 14%, transparent);
color: var(--star-accent, var(--starplane-accent, inherit));
}
:where([data-starkit-navrail-group-title]),
:where([data-starkit-navrail-summary]) {
cursor: pointer;
list-style: none;
font-weight: 600;
color: var(--star-text-muted, var(--starplane-text-secondary, inherit));
}
:where([data-starkit-navrail-badge]) {
font-size: 0.7em;
padding: 0.1em 0.4em;
border-radius: var(--star-radius-pill, 999px);
background: color-mix(in srgb, var(--star-accent) 18%, transparent);
color: var(--star-accent, var(--starplane-accent, inherit));
}
:where([data-starkit-navrail][data-collapsed="true"]) {
opacity: 0.85;
}
:where([data-starkit-toc]) {
display: flex;
flex-direction: column;
gap: var(--star-space-2, 8px);
color: var(--star-text-muted, var(--starplane-text-secondary, inherit));
}
:where([data-starkit-toc-title]) {
font-weight: 600;
font-size: 0.85em;
letter-spacing: 0.02em;
text-transform: uppercase;
margin-bottom: var(--star-space-2, 0.5rem);
}
:where([data-starkit-toc-list]) {
list-style: none;
margin: 0;
padding: 0;
}
:where([data-starkit-toc-link]) {
display: block;
color: inherit;
text-decoration: none;
padding: 0.2rem 0.4rem;
border-left: 2px solid transparent;
border-radius: 0 var(--star-radius-control, 6px)
var(--star-radius-control, 6px) 0;
}
:where([data-starkit-toc-link][data-depth="3"]),
:where([data-starkit-toc-link][data-depth="4"]) {
padding-left: 1rem;
}
:where([data-starkit-toc-link]:hover) {
color: var(--star-text, var(--starplane-text-primary, inherit));
}
:where([data-starkit-toc-link][data-active="true"]),
:where([data-starkit-toc-link][aria-current="location"]) {
color: var(--star-accent, var(--starplane-accent, inherit));
border-left-color: var(--star-accent, var(--starplane-accent, currentColor));
}
:where([data-starkit-toc-track]) {
display: none;
}
:where(a[data-starkit-sidebar-item]) {
display: block;
text-decoration: none;
text-align: inherit;
}
:where([data-starkit-metric]) {
padding: var(--star-space-4, 16px);
border-radius: var(--star-radius-window, 10px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
border-width: 1px;
border-style: solid;
border-color: var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starkit-metric-value]) {
font-size: var(--star-text-4xl);
line-height: var(--star-leading-tight, 1.2);
font-weight: var(--star-weight-semibold, 600);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
:where([data-starkit-metric-title]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
font-weight: var(--star-weight-medium, 500);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-metric-delta]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
font-weight: var(--star-weight-semibold, 600);
font-variant-numeric: tabular-nums;
}
:where([data-starkit-metric-delta][data-trend="up"]) {
color: var(--star-ok-ink, var(--starplane-ok-ink));
}
:where([data-starkit-metric-delta][data-trend="down"]) {
color: var(--star-danger-ink, var(--starplane-danger-ink));
}
:where([data-starkit-metric-delta][data-trend="flat"]) {
color: var(--star-text-muted, var(--starplane-text-tertiary));
}
:where([data-starkit-metric-delta-glyph]) {
font-size: 0.75em;
margin-inline-end: 0.15em;
}
:where([data-starkit-metric][data-size="sm"] [data-starkit-metric-value]) {
font-size: var(--star-text-3xl);
}
:where([data-starkit-metric][data-size="lg"] [data-starkit-metric-value]) {
font-size: var(--star-text-5xl);
}
:where([data-starkit-metric][data-align="center"]) {
text-align: center;
}
:where([data-starkit-metric][data-align="center"] > *) {
align-items: center;
}
:where([data-starkit-metric][data-align="end"]) {
text-align: end;
}
:where([data-starkit-metric][data-align="end"] > *) {
align-items: flex-end;
}
:where([data-starkit-kanban]) {
padding: var(--star-space-3, 12px);
border-radius: var(--star-radius-control, 8px);
background-color: var(--star-surface, #fbf8f1);
color: var(--star-text, #1c1914);
cursor: grab;
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
box-shadow var(--star-dur-base, 0.16s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-kanban]:hover) {
transform: translateY(-2px);
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
}
:where([data-starkit-kanban]:active) {
cursor: grabbing;
transform: translateY(0) scale(0.997);
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-kanban][data-density="compact"]) {
padding: var(--star-space-2, 0.5rem);
}
:where([data-starkit-kanban-title]) {
font-size: var(--star-text-base);
line-height: var(--star-leading-tight, 1.2);
font-weight: var(--star-weight-semibold, 600);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-kanban-footer]) {
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
font-weight: var(--star-weight-medium, 500);
color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-kanban-label]) {
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
font-weight: var(--star-weight-medium, 500);
}
:where([data-starkit-kanban][data-size="sm"] [data-starkit-kanban-title]) {
font-size: var(--star-text-xs);
}
:where([data-starkit-kanban][data-size="lg"] [data-starkit-kanban-title]) {
font-size: var(--star-text-lg);
}
:where([data-starkit-timeline]) {
display: flex;
flex-direction: column;
gap: var(--star-space-4, 16px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starkit-timeline-item]) {
position: relative;
padding-left: var(--star-space-5, 1.5rem);
}
:where([data-starkit-timeline-item])::before {
content: "";
position: absolute;
left: 0.3125rem;
top: 0.75rem;
bottom: -0.5rem;
width: 1px;
background: var(--star-border, var(--starplane-border));
}
:where([data-starkit-timeline-item]:last-child)::before {
display: none;
}
:where([data-starkit-timeline-item][data-icon="true"]) {
padding-left: var(--star-space-6, 2rem);
}
:where([data-starkit-timeline-item][data-icon="true"])::before {
left: 0.625rem;
top: 1.375rem;
}
:where([data-starkit-timeline-dot]) {
position: absolute;
left: 0;
top: 0.3125rem;
width: 0.6875rem;
height: 0.6875rem;
border-radius: 50%;
background: var(--star-accent, var(--starplane-accent));
border: 2px solid var(--star-bg, var(--starplane-base));
}
:where([data-starkit-timeline-dot][data-tone="ok"]) {
background: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-timeline-dot][data-tone="warn"]) {
background: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-timeline-dot][data-tone="danger"]) {
background: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-timeline-dot][data-icon="true"]) {
display: grid;
place-items: center;
width: 1.25rem;
height: 1.25rem;
top: 0;
background: var(--star-bg, var(--starplane-base));
border: 1px solid currentColor;
color: var(--star-accent, var(--starplane-accent));
font-size: var(--star-text-xs, 0.75rem);
}
:where([data-starkit-timeline-dot][data-icon="true"][data-tone="ok"]) {
background: var(--star-bg, var(--starplane-base));
color: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-timeline-dot][data-icon="true"][data-tone="warn"]) {
background: var(--star-bg, var(--starplane-base));
color: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-timeline-dot][data-icon="true"][data-tone="danger"]) {
background: var(--star-bg, var(--starplane-base));
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-timeline-dot][data-icon="true"] svg) {
width: 0.75rem;
height: 0.75rem;
}
:where([data-starkit-timeline-status]) {
list-style: none;
padding: var(--star-space-4, 1rem) var(--star-space-2, 0.5rem);
text-align: center;
color: var(--star-text-muted, var(--starplane-text-muted));
font-size: var(--star-text-sm, 0.875rem);
}
:where([data-starkit-timeline-status][data-state="error"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-timeline-title]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-tight, 1.2);
font-weight: var(--star-weight-semibold, 600);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-timeline-detail]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-timeline-time]) {
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, var(--starplane-text-muted));
font-variant-numeric: tabular-nums;
}
:where([data-starkit-timeline][data-line-style="dashed"] [data-starkit-timeline-item])::before {
background: none;
border-left: 1px dashed var(--star-border, var(--starplane-border));
width: 0;
}
:where([data-starkit-timeline][data-density="compact"]) {
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-timeline][data-orientation="horizontal"]) {
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
:where([data-starkit-timeline][data-orientation="horizontal"] [data-starkit-timeline-item]) {
padding-left: 0;
padding-top: var(--star-space-5, 1.5rem);
flex: 1 1 0;
}
:where([data-starkit-timeline][data-orientation="horizontal"] [data-starkit-timeline-item])::before {
left: 0.75rem;
right: -0.5rem;
top: 0.3125rem;
bottom: auto;
width: auto;
height: 1px;
}
:where([data-starkit-timeline][data-orientation="horizontal"][data-line-style="dashed"] [data-starkit-timeline-item])::before {
border-left: none;
border-top: 1px dashed var(--star-border, var(--starplane-border));
height: 0;
}
:where([data-starkit-timeline][data-orientation="horizontal"] [data-starkit-timeline-dot]) {
top: 0;
left: 0.375rem;
}
:where([data-starkit-activity]) {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--star-space-3, 12px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starkit-activity-actor]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
font-weight: var(--star-weight-semibold, 600);
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-activity-action]) {
font-size: var(--star-text-sm);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-activity-icon]) {
flex: none;
display: grid;
place-items: center;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--star-radius-pill, 999px);
background: var(--star-surface-raised, var(--starplane-surface-raised));
border: 1px solid var(--star-border, var(--starplane-border));
color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-activity-icon] svg) {
width: 0.875rem;
height: 0.875rem;
}
:where([data-starkit-activity-line][data-clamp="true"]) {
overflow-wrap: anywhere;
}
:where([data-starkit-activity-line][data-clamp="true"] [data-starkit-activity-actor]) {
margin-inline-end: var(--star-space-1, 0.25rem);
}
:where([data-starkit-activity-time]) {
font-size: var(--star-text-xs);
line-height: var(--star-leading-normal, 1.5);
color: var(--star-text-muted, var(--starplane-text-muted));
font-variant-numeric: tabular-nums;
}
:where([data-starkit-activity][data-density="compact"]) {
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-activity][data-unread="true"]) {
position: relative;
}
:where([data-starkit-activity][data-unread="true"])::before {
content: "";
position: absolute;
left: calc(-1 * var(--star-space-2, 0.5rem));
top: 0.5rem;
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-activity][data-interactive="true"]) {
cursor: pointer;
border-radius: var(--star-radius-control, 0.5rem);
transition: background var(--star-dur-fast, 0.12s) var(--star-ease, ease);
}
:where([data-starkit-activity][data-interactive="true"]:hover) {
background: color-mix(in srgb, var(--star-text, var(--starplane-text)) 4%, transparent);
}
:where([data-starkit-spinner]) {
display: inline-block;
box-sizing: border-box;
--starkit-spinner-size: 1.5rem;
width: var(--starkit-spinner-size);
height: var(--starkit-spinner-size);
border-radius: 50%;
border: 2px solid var(--star-border, var(--starplane-border));
border-top-color: var(--star-accent, var(--starplane-accent));
animation: starkit-spin var(--starkit-spin-dur, 0.7s) linear infinite;
will-change: transform;
}
:where([data-starkit-spinner][data-size="sm"]) {
--starkit-spinner-size: 1rem;
}
:where([data-starkit-spinner][data-size="md"]) {
--starkit-spinner-size: 1.5rem;
}
:where([data-starkit-spinner][data-size="lg"]) {
--starkit-spinner-size: 2.25rem;
border-width: 3px;
}
:where([data-starkit-spinner][data-speed="slow"]) {
animation-duration: 1.2s;
}
:where([data-starkit-spinner][data-speed="fast"]) {
animation-duration: 0.45s;
}
:where([data-starkit-spinner][data-tone="neutral"]) {
border-top-color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-spinner][data-tone="ok"]) {
border-top-color: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-spinner][data-tone="warn"]) {
border-top-color: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-spinner][data-tone="danger"]) {
border-top-color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-spinner][data-track="hidden"]) {
border-color: transparent;
border-top-color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-spinner][data-track="hidden"][data-tone="neutral"]) {
border-top-color: var(--star-text-muted, var(--starplane-text-muted));
}
:where([data-starkit-spinner][data-track="hidden"][data-tone="ok"]) {
border-top-color: var(--star-ok, var(--starplane-ok));
}
:where([data-starkit-spinner][data-track="hidden"][data-tone="warn"]) {
border-top-color: var(--star-warn, var(--starplane-warn));
}
:where([data-starkit-spinner][data-track="hidden"][data-tone="danger"]) {
border-top-color: var(--star-danger, var(--starplane-danger));
}
@keyframes starkit-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
:where([data-starkit-confetti]) {
position: relative;
display: inline-block;
width: var(--starkit-confetti-size, 12rem);
height: var(--starkit-confetti-size, 12rem);
pointer-events: none;
overflow: visible;
}
:where([data-starkit-confetti-piece]) {
position: absolute;
left: 50%;
top: 50%;
width: var(--starkit-confetti-piece-size, 0.5rem);
height: var(--starkit-confetti-piece-size, 0.5rem);
transform: translate(-50%, -50%);
opacity: 0;
animation: starkit-confetti-burst var(--starkit-confetti-dur, 1.1s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.22, 1, 0.36, 1))) forwards;
will-change: transform, opacity;
}
@keyframes starkit-confetti-burst {
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(0.6);
opacity: 0;
}
12% {
opacity: 1;
}
100% {
transform: translate(
calc(-50% + var(--starkit-confetti-dx, 0px)),
calc(-50% + var(--starkit-confetti-dy, 0px))
)
rotate(var(--starkit-confetti-rot, 360deg)) scale(1);
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-kanban]) {
transition-duration: 0.01ms;
}
:where([data-starkit-kanban]:hover) {
transform: none;
}
:where([data-starkit-spinner]) {
animation-duration: 0.01ms;
animation-iteration-count: 1;
}
:where([data-starkit-confetti-piece]) {
animation: none;
opacity: 0;
}
}
:where([data-starkit-message]) {
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
width: 100%;
min-width: 0;
font-size: var(--star-text-sm, 0.875rem);
color: var(--star-text, var(--starplane-text));
}
:where([data-starkit-message][data-align="end"]) {
flex-direction: row-reverse;
}
:where([data-starkit-message-avatar]) {
flex: 0 0 auto;
align-self: flex-start;
}
:where([data-starkit-message-content]) {
min-width: 0;
flex: 1 1 auto;
overflow-wrap: anywhere;
}
:where([data-starkit-message][data-align="end"] [data-starkit-message-content]) {
align-items: flex-end;
text-align: end;
}
:where([data-starkit-message-body]) {
min-width: 0;
line-height: 1.5;
}
:where([data-starkit-message-meta]) {
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-message-time]) {
font-family: var(--star-legend-font, var(--star-font-mono, ui-monospace, monospace));
font-size: var(--star-text-xs, 0.75rem);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-message-receipt]) {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--star-font-mono, ui-monospace, monospace);
font-size: var(--star-text-xs, 0.75rem);
letter-spacing: 0.01em;
color: var(--star-text-muted, var(--starplane-text-muted));
opacity: 1;
}
:where([data-starkit-message-status]) {
white-space: nowrap;
}
:where([data-starkit-message-actions]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
margin-inline-start: auto;
}
:where([data-starkit-message][data-density="compact"] [data-starkit-message-content]) {
gap: var(--star-space-1, 0.125rem);
font-size: var(--star-text-xs, 0.75rem);
}
:where([data-starkit-message-scroller]) {
position: relative;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
height: 100%;
}
:where([data-starkit-message-scroller-viewport]) {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
:where([data-starkit-message-scroller-content]) {
display: flex;
flex-direction: column;
gap: var(--star-space-4, 1rem);
padding: var(--star-space-3, 0.75rem);
min-height: 100%;
}
:where([data-starkit-message-scroller-jump]) {
position: absolute;
left: 50%;
bottom: var(--star-space-3, 0.75rem);
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: var(--star-radius-pill, 999px);
border: 1px solid var(--star-border, var(--starplane-border));
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
color: var(--star-text, var(--starplane-text));
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
cursor: pointer;
transition:
transform var(--star-dur-base, 0.16s) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1)),
opacity var(--star-dur-base, 0.16s) var(--star-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
:where([data-starkit-message-scroller-jump][data-active="false"]) {
transform: translate(-50%, 150%) scale(0.95);
opacity: 0;
pointer-events: none;
}
:where([data-starkit-message-scroller-jump][data-active="true"]) {
transform: translate(-50%, 0) scale(1);
opacity: 1;
}
:where([data-starkit-message-scroller-jump]:hover) {
background: var(--star-surface-sunken, var(--star-surface, var(--starplane-surface-sunken)));
}
:where([data-starkit-bubble]) {
border-radius: var(--star-radius-window, 10px);
padding: var(--star-space-2, 8px) var(--star-space-3, 12px);
display: block;
width: fit-content;
max-width: 80%;
line-height: 1.5;
font-size: var(--star-text-sm, 0.875rem);
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
color: var(--star-text, var(--starplane-text));
border: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-bubble][data-align="end"]) {
margin-left: auto;
}
:where([data-starkit-bubble][data-size="sm"]) {
font-size: var(--star-text-xs, 0.75rem);
padding: var(--star-space-1, 0.25rem) var(--star-space-2, 0.5rem);
}
:where([data-starkit-bubble][data-size="lg"]) {
font-size: var(--star-text-base, 1rem);
padding: var(--star-space-3, 0.75rem) var(--star-space-4, 1rem);
}
:where([data-starkit-bubble][data-elevated="true"]) {
border-color: transparent;
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-bubble][data-tail="true"]) {
position: relative;
}
:where([data-starkit-bubble][data-tail="true"])::after {
content: "";
position: absolute;
bottom: 0.5rem;
width: 0.5rem;
height: 0.5rem;
background: inherit;
border: inherit;
transform: rotate(45deg);
}
:where([data-starkit-bubble][data-tail="true"][data-align="start"])::after {
left: -0.25rem;
border-top: none;
border-right: none;
}
:where([data-starkit-bubble][data-tail="true"][data-align="end"])::after {
right: -0.25rem;
border-bottom: none;
border-left: none;
}
:where([data-starkit-bubble][data-tone="accent"]) {
border-color: color-mix(in oklab, var(--star-accent, var(--starplane-accent)) 30%, transparent);
background: color-mix(in oklab, var(--star-accent, var(--starplane-accent)) 10%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-bubble][data-tone="ok"]) {
border-color: color-mix(in oklab, var(--star-ok, var(--starplane-ok)) 30%, transparent);
background: color-mix(in oklab, var(--star-ok, var(--starplane-ok)) 10%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-bubble][data-tone="warn"]) {
border-color: color-mix(in oklab, var(--star-warn, var(--starplane-warn)) 30%, transparent);
background: color-mix(in oklab, var(--star-warn, var(--starplane-warn)) 10%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-bubble][data-tone="danger"]) {
border-color: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 30%, transparent);
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 10%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-bubble][data-tone="info"]) {
border-color: color-mix(in oklab, var(--star-info, var(--starplane-info)) 30%, transparent);
background: color-mix(in oklab, var(--star-info, var(--starplane-info)) 10%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-attachment]) {
display: inline-flex;
width: fit-content;
max-width: 100%;
min-width: 0;
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
border-radius: var(--star-radius-control, 0.5rem);
border: 1px solid var(--star-border, var(--starplane-border));
background: var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised)));
color: var(--star-text, var(--starplane-text));
transition: background var(--star-dur-fast, 0.12s) var(--star-ease, ease);
}
:where([data-starkit-attachment][data-state="idle"]) {
border-style: dashed;
}
:where([data-starkit-attachment][data-state="error"]) {
border-color: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 45%, transparent);
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 8%,
var(--star-surface-raised, var(--star-surface, var(--starplane-surface-raised))));
}
:where([data-starkit-attachment-icon]) {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--star-radius-sm, 0.375rem);
background: var(--star-surface-sunken, var(--star-surface, var(--starplane-surface-sunken)));
color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-attachment][data-state="error"] [data-starkit-attachment-icon]) {
color: var(--star-danger, var(--starplane-danger));
background: color-mix(in oklab, var(--star-danger, var(--starplane-danger)) 12%, transparent);
}
:where([data-starkit-attachment-body]) {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.25;
}
:where([data-starkit-attachment-name]) {
display: block;
max-width: 14rem;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--star-text-sm, 0.875rem);
font-weight: 500;
color: var(--star-text, var(--starplane-text));
}
:where([data-starkit-attachment]:is([data-state="uploading"], [data-state="processing"])
[data-starkit-attachment-name]) {
background: linear-gradient(
90deg,
var(--star-text, var(--starplane-text)) 0%,
var(--star-text-muted, var(--starplane-text-tertiary)) 50%,
var(--star-text, var(--starplane-text)) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: starkit-attachment-shimmer 1.4s linear infinite;
}
:where([data-starkit-attachment-size]) {
font-size: var(--star-text-xs, 0.75rem);
font-variant-numeric: tabular-nums;
color: var(--star-text-muted, var(--starplane-text-secondary));
}
:where([data-starkit-attachment-action]) {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
margin-left: auto;
padding-left: var(--star-space-2, 0.5rem);
}
:where([data-starkit-attachment-remove]) {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
padding: 0;
border: none;
border-radius: var(--star-radius-sm, 0.375rem);
background: transparent;
color: var(--star-text-muted, var(--starplane-text-secondary));
cursor: pointer;
transition: background var(--star-dur-fast, 0.12s) var(--star-ease, ease);
}
:where([data-starkit-attachment-remove]:hover) {
background: color-mix(in oklab, var(--star-text, var(--starplane-text)) 8%, transparent);
color: var(--star-text, var(--starplane-text));
}
:where([data-starkit-attachment][data-scale="sm"]) {
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
}
:where([data-starkit-attachment][data-scale="sm"] [data-starkit-attachment-icon]) {
width: 1.25rem;
height: 1.25rem;
}
:where([data-starkit-attachment][data-variant="soft"]) {
border-color: transparent;
background: var(--star-surface-sunken, var(--star-surface, var(--starplane-surface-sunken)));
}
@keyframes starkit-attachment-shimmer {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-attachment-name]) {
animation: none !important;
}
:where([data-starkit-message-scroller-jump]) {
transition: none !important;
}
}
:where([data-starkit-dock]) {
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
width: max-content;
height: max-content;
}
:where([data-starkit-dock-rail]) {
overflow: visible;
}
:where([data-starkit-dock-item]) {
position: relative;
display: grid;
place-items: center;
cursor: pointer;
border: 0;
background: transparent;
color: inherit;
padding: var(--star-space-1, 0.25rem);
border-radius: var(--star-radius-control, 6px);
font: inherit;
transform: scale(1);
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
filter var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dock][data-position="bottom"] [data-starkit-dock-item]) {
transform-origin: bottom center;
}
:where([data-starkit-dock][data-position="top"] [data-starkit-dock-item]) {
transform-origin: top center;
}
:where([data-starkit-dock][data-position="left"] [data-starkit-dock-item]) {
transform-origin: left center;
}
:where([data-starkit-dock][data-position="right"] [data-starkit-dock-item]) {
transform-origin: right center;
}
:where([data-starkit-dock-glyph]) {
display: grid;
place-items: center;
width: var(--starkit-dock-icon, 2rem);
height: var(--starkit-dock-icon, 2rem);
font-size: calc(var(--starkit-dock-icon, 2rem) * 0.75);
line-height: 1;
pointer-events: none;
}
:where([data-starkit-dock-item]:hover) {
transform: scale(1.45);
}
:where([data-starkit-dock-item]:hover + [data-starkit-dock-item]),
:where([data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)) {
transform: scale(1.2);
}
:where([data-starkit-dock-item]:active) {
transform: scale(1.3);
filter: brightness(0.94);
}
:where([data-starkit-dock-item]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 3px;
}
:where([data-starkit-dock-item][data-disabled="true"]) {
cursor: not-allowed;
opacity: 0.4;
pointer-events: none;
}
:where([data-starkit-dock-dot]) {
position: absolute;
width: var(--star-space-1, 0.25rem);
height: var(--star-space-1, 0.25rem);
border-radius: 50%;
background: var(--star-accent, var(--starplane-accent));
opacity: 0;
transition: opacity var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-dock-item][data-running="true"] [data-starkit-dock-dot]) {
opacity: 1;
}
:where([data-starkit-dock][data-position="bottom"] [data-starkit-dock-dot]) { bottom: -0.18rem; }
:where([data-starkit-dock][data-position="top"] [data-starkit-dock-dot]) { top: -0.18rem; }
:where([data-starkit-dock][data-position="left"] [data-starkit-dock-dot]) { left: -0.18rem; }
:where([data-starkit-dock][data-position="right"] [data-starkit-dock-dot]) { right: -0.18rem; }
:where([data-starkit-dock-item][data-active="true"] [data-starkit-dock-glyph]) {
filter: drop-shadow(0 0 6px color-mix(in srgb, var(--star-accent) 60%, transparent));
}
:where([data-starkit-dock-badge]) {
position: absolute;
top: -0.1rem;
right: -0.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--star-space-4, 1rem);
min-height: var(--star-space-4, 1rem);
padding: 0 var(--star-space-1, 0.25rem);
font-size: var(--star-text-2xs, 0.6875rem);
line-height: 1;
border-radius: 999px;
color: var(--star-accent-on, var(--starplane-accent-on));
background: color-mix(in srgb, var(--star-danger, var(--starplane-danger)) 82%, #000);
pointer-events: none;
}
:where([data-starkit-dock][data-size="sm"]) { --starkit-dock-icon: 1.5rem; }
:where([data-starkit-dock][data-size="lg"]) { --starkit-dock-icon: 2.5rem; }
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:hover),
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:hover + [data-starkit-dock-item]),
:where([data-starkit-dock][data-magnify="false"] [data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)) {
transform: scale(1);
}
:where([data-starkit-dock][data-autohide="true"]) {
transition: transform var(--star-dur-base, 0.16s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-dock][data-autohide="true"][data-position="bottom"]) { transform: translateY(calc(100% - 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="top"]) { transform: translateY(calc(-100% + 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="left"]) { transform: translateX(calc(-100% + 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"][data-position="right"]) { transform: translateX(calc(100% - 0.35rem)); }
:where([data-starkit-dock][data-autohide="true"]:hover),
:where([data-starkit-dock][data-autohide="true"]:focus-within) {
transform: none;
}
:where([data-starkit-toolbar]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-toolbar-button]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
font: inherit;
border-radius: var(--star-radius-control, 6px);
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
transition:
background var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-toolbar-button]:hover:not([disabled])) {
background: color-mix(in srgb, var(--star-text) 8%, transparent);
}
:where([data-starkit-toolbar-button]:active:not([disabled])) {
transform: translateY(0.5px) scale(0.98);
}
:where([data-starkit-toolbar-button]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-toolbar-button][data-active="true"]) {
background: color-mix(in srgb, var(--star-accent) 16%, transparent);
color: var(--star-accent, var(--starplane-accent));
border-color: color-mix(in srgb, var(--star-accent) 30%, transparent);
}
:where([data-starkit-toolbar-button][data-tone="danger"]) {
color: var(--star-danger, var(--starplane-danger));
}
:where([data-starkit-toolbar-button][data-tone="danger"]:hover:not([disabled])) {
background: color-mix(in srgb, var(--star-danger) 12%, transparent);
}
:where([data-starkit-toolbar-button][disabled]),
:where([data-starkit-toolbar-button][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none;
}
:where([data-starkit-toolbar-icon]) {
display: inline-grid;
place-items: center;
line-height: 0;
}
:where([data-starkit-toolbar-separator]) {
align-self: stretch;
width: 1px;
min-height: 1.25rem;
margin: 0 var(--star-space-1, 0.25rem);
background: var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-toolbar-title]) {
font-weight: 600;
font-size: var(--star-text-sm, 0.875rem);
color: var(--star-text, var(--starplane-text-primary));
padding: 0 var(--star-space-1, 0.25rem);
}
:where([data-starkit-toolbar][data-orientation="vertical"]) {
border-bottom: 0;
border-right: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-toolbar][data-orientation="vertical"] [data-starkit-toolbar-separator]) {
align-self: stretch;
width: auto;
min-height: 0;
height: 1px;
min-width: 1.25rem;
margin: var(--star-space-1, 0.25rem) 0;
}
:where([data-starkit-toolbar][data-variant="ghost"]) { border-bottom: 0; }
:where([data-starkit-toolbar][data-variant="floating"]) {
border-bottom: 0;
border-radius: var(--star-radius-window, 12px);
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
}
:where([data-starkit-toolbar][data-size="sm"] [data-starkit-toolbar-button]) {
padding: 0 var(--star-space-1, 0.25rem);
font-size: var(--star-text-xs, 0.75rem);
}
:where([data-starkit-toolbar][data-size="lg"] [data-starkit-toolbar-button]) {
padding: var(--star-space-2, 0.5rem)
var(--star-space-3, 0.75rem);
font-size: var(--star-text-base, 1rem);
}
:where([data-starkit-panel]) {
display: flex;
flex-direction: column;
gap: var(--star-space-1, 4px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
min-height: 0;
overflow: hidden;
}
:where([data-starkit-panel-header]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, 0.5rem);
padding: var(--star-space-3, 0.75rem)
var(--star-space-4, 1rem);
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-panel-title]) {
margin: 0;
font-size: var(--star-text-lg, 1.125rem);
font-weight: 650;
line-height: 1.3;
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-panel-actions]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
}
:where([data-starkit-panel-body]) {
min-height: 0;
overflow: auto;
padding: var(--star-space-4, 1rem);
}
:where([data-starkit-panel-body][data-flush="true"]) {
padding: 0;
}
:where([data-starkit-panel-body][data-padding="none"]) { padding: 0; }
:where([data-starkit-panel-body][data-padding="sm"]) {
padding: var(--star-space-2, 0.5rem);
}
:where([data-starkit-panel-body][data-padding="lg"]) {
padding: var(--star-space-5, 1.25rem);
}
:where([data-starkit-panel][data-elevation="raised"]) {
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-panel][data-elevation="floating"]) {
box-shadow: var(--star-shadow-3, var(--starplane-shadow-3));
}
:where([data-starkit-panel][data-variant="ghost"]) { border: 0; }
:where([data-starkit-panel][data-resizable="true"]) {
resize: both;
overflow: auto;
}
:where([data-starkit-listdetail]) {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--star-space-2, 8px);
min-height: 0;
}
:where([data-starkit-listdetail-list]) {
flex: 0 0 auto;
min-width: 0;
min-height: 0;
overflow: auto;
}
:where([data-starkit-listdetail-detail]) {
flex: 1 1 0;
min-width: 0;
min-height: 0;
overflow: auto;
}
:where([data-starkit-statusbar]) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--star-space-3, 12px);
padding: var(--star-space-1, 4px) var(--star-space-3, 12px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
font-size: var(--star-text-xs, 0.75rem);
color: var(--star-text-muted, var(--starplane-text-secondary));
border-top: 1px solid var(--star-border, var(--starplane-border-subtle));
min-height: 1.5rem;
}
:where([data-starkit-statusbar][data-position="top"]) {
border-top: 0;
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-statusbar][data-size="sm"]) {
min-height: 1.25rem;
font-size: var(--star-text-2xs, 0.6875rem);
}
:where([data-starkit-statusbar][data-variant="ghost"]) {
border-top: 0;
border-bottom: 0;
}
:where([data-starkit-statusbar-item]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-1, 0.25rem);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
:where([data-starkit-statusbar-item][data-align="end"]) {
margin-inline-start: auto;
}
:where([data-starkit-statusbar-item][data-align="end"] ~ [data-starkit-statusbar-item][data-align="end"]) {
margin-inline-start: 0;
}
:where([data-starkit-statusbar-item][data-tone="strong"]) {
color: var(--star-text, var(--starplane-text-primary));
font-weight: 600;
}
:where([data-starkit-statusbar-item][data-tone="ok"]) { color: var(--star-ok-ink, var(--starplane-ok-ink)); }
:where([data-starkit-statusbar-item][data-tone="warn"]) { color: var(--star-warn-ink, var(--starplane-warn-ink)); }
:where([data-starkit-statusbar-item][data-tone="danger"]) { color: var(--star-danger-ink, var(--starplane-danger-ink)); }
:where([data-starkit-statusbar-icon]) {
display: inline-grid;
place-items: center;
line-height: 0;
}
:where([data-starkit-widget]) {
display: flex;
flex-direction: column;
gap: var(--star-space-3, 12px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
text-align: left;
box-shadow: var(--starkit-widget-elev, var(--star-shadow-1, var(--starplane-shadow-1)));
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-widget-header]) {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--star-space-2, 0.5rem);
}
:where([data-starkit-widget-heading]) {
display: inline-flex;
align-items: center;
gap: var(--star-space-2, 0.5rem);
min-width: 0;
}
:where([data-starkit-widget-icon]) {
display: inline-grid;
place-items: center;
line-height: 0;
color: var(--star-accent, var(--starplane-accent));
}
:where([data-starkit-widget-title]) {
font-size: var(--star-text-sm, 0.875rem);
font-weight: 600;
color: var(--star-text, var(--starplane-text-primary));
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:where([data-starkit-widget-action]) {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
:where([data-starkit-widget][data-interactive="true"]) {
cursor: pointer;
border-width: 1px;
border-style: solid;
transition:
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1))),
box-shadow var(--star-dur-base, 0.16s)
var(--star-ease, var(--starplane-ease-out, cubic-bezier(0.16, 1, 0.3, 1)));
}
:where([data-starkit-widget][data-interactive="true"]:hover) {
transform: translateY(-2px);
box-shadow: var(--star-shadow-2, var(--starplane-shadow-2));
}
:where([data-starkit-widget][data-interactive="true"]:active) {
transform: translateY(0) scale(0.997);
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-widget][data-interactive="true"]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-widget][data-interactive="true"][disabled]) {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
:where([data-starkit-widget][data-tone="accent"]) { box-shadow: inset 3px 0 0 0 var(--star-accent, var(--starplane-accent)), var(--starkit-widget-elev, var(--star-shadow-1, var(--starplane-shadow-1))); }
:where([data-starkit-widget][data-tone="ok"]) { box-shadow: inset 3px 0 0 0 var(--star-ok, var(--starplane-ok)), var(--starkit-widget-elev, var(--star-shadow-1, var(--starplane-shadow-1))); }
:where([data-starkit-widget][data-tone="warn"]) { box-shadow: inset 3px 0 0 0 var(--star-warn, var(--starplane-warn)), var(--starkit-widget-elev, var(--star-shadow-1, var(--starplane-shadow-1))); }
:where([data-starkit-widget][data-tone="danger"]) { box-shadow: inset 3px 0 0 0 var(--star-danger, var(--starplane-danger)), var(--starkit-widget-elev, var(--star-shadow-1, var(--starplane-shadow-1))); }
:where([data-starkit-widget][data-elevation="flat"]) { --starkit-widget-elev: none; }
:where([data-starkit-widget][data-elevation="floating"]) { --starkit-widget-elev: var(--star-shadow-3, var(--starplane-shadow-3)); }
:where([data-starkit-widget][data-variant="outlined"]) {
border-width: 1px;
border-style: solid;
border-color: var(--star-border, var(--starplane-border-subtle));
}
:where([data-starkit-widget][data-variant="plain"]) {
--starkit-widget-elev: none;
border: 0;
}
:where([data-starkit-widget][data-span="2"]) {
grid-column: span 2;
}
:where([data-starkit-widget-grid]) {
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
@media (prefers-reduced-motion: reduce) {
:where([data-starkit-dock-item]),
:where([data-starkit-toolbar-button]),
:where([data-starkit-widget][data-interactive="true"]) {
transition-duration: 0.01ms;
}
:where([data-starkit-dock-item]:hover),
:where([data-starkit-dock-item]:hover + [data-starkit-dock-item]),
:where([data-starkit-dock-item]:has(+ [data-starkit-dock-item]:hover)),
:where([data-starkit-dock-item]:active) {
transform: none;
}
:where([data-starkit-widget][data-interactive="true"]:hover),
:where([data-starkit-widget][data-interactive="true"]:active),
:where([data-starkit-toolbar-button]:active:not([disabled])) {
transform: none;
}
:where([data-starkit-dock-dot]) {
transition: none;
}
}
:where([data-starkit-menubar]) {
padding: var(--star-space-1, 4px) var(--star-space-2, 8px);
background-color: var(--star-surface, #fbf8f1);
border-width: 1px;
border-style: solid;
border-color: var(--star-border, var(--starplane-border-subtle, rgba(28, 25, 20, 0.10)));
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
border-bottom: 1px solid var(--star-border, var(--starplane-border-subtle));
box-shadow: var(--star-shadow-1, var(--starplane-shadow-1));
}
:where([data-starkit-menubar-chrome]) {
min-height: var(--star-menubar-height, 1.75rem);
}
:where([data-starkit-menubar-title]) {
color: var(--star-text, var(--starplane-text-primary));
font-size: var(--star-text-sm, 0.875rem);
font-weight: 650;
line-height: 1;
white-space: nowrap;
}
:where([data-starkit-menubar-row]) {
min-width: 0;
}
:where([data-starkit-menubar-button]) {
cursor: pointer;
border: 0;
background: transparent;
color: var(--star-text, var(--starplane-text-primary, inherit));
border-radius: var(--star-radius-control, 6px);
font: inherit;
font-size: var(--star-text-sm, 0.875rem);
line-height: 1;
padding: var(--star-space-1, 0.25rem)
var(--star-space-2, 0.5rem);
transition:
opacity var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-menubar-button]:hover:not([disabled])),
:where([data-starkit-menubar-button][aria-expanded="true"]) {
background: color-mix(in srgb, var(--star-accent) 12%, transparent);
}
:where([data-starkit-menubar-button]:active:not([disabled])) {
transform: scale(0.98);
}
:where([data-starkit-menubar-button]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 2px;
}
:where([data-starkit-menubar-button][disabled]),
:where([data-starkit-menubar-button][aria-disabled="true"]) {
cursor: not-allowed;
opacity: 0.45;
pointer-events: none;
}
:where(.starkit-menubar-popup-trigger) {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
:where([data-starkit-menubar][data-elevation="flat"]) { box-shadow: none; }
:where([data-starkit-menubar][data-variant="ghost"]) {
border-bottom: 0;
box-shadow: none;
}
:where([data-starkit-menubar][data-variant="win"] [data-starkit-menubar-button]) {
border-radius: 0;
}
:where([data-starkit-menubar][data-size="sm"] [data-starkit-menubar-chrome]) { min-height: 1.5rem; }
:where([data-starkit-menubar][data-size="sm"] [data-starkit-menubar-button]) {
font-size: var(--star-text-xs, 0.75rem);
padding: 0 var(--star-space-1, 0.25rem);
}
:where([data-starkit-menubar][data-size="lg"] [data-starkit-menubar-chrome]) { min-height: 2.25rem; }
:where([data-starkit-menubar][data-size="lg"] [data-starkit-menubar-button]) {
font-size: var(--star-text-base, 1rem);
padding: var(--star-space-1, 0.25rem)
var(--star-space-3, 0.75rem);
}
:where([data-starkit-window-controls]) {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--star-space-1, 4px);
font-family: var(--star-font-ui, var(--starplane-font, system-ui, sans-serif));
}
:where([data-starkit-window-control]) {
position: relative;
display: inline-grid;
place-items: center;
width: var(--star-window-control-size, 0.75rem);
height: var(--star-window-control-size, 0.75rem);
padding: 0;
cursor: pointer;
border: 1px solid color-mix(in srgb, var(--star-text) 14%, transparent);
border-radius: 50%;
color: var(--star-text, var(--starplane-window-control-glyph));
background: var(--star-window-control-fill, var(--star-surface-raised));
font: inherit;
line-height: 1;
transition:
opacity var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-window-control][data-action="close"]) {
background: var(--star-window-control-close, var(--star-danger));
}
:where([data-starkit-window-control][data-action="minimize"]) {
background: var(--star-window-control-minimize, var(--star-warn, var(--star-accent)));
}
:where([data-starkit-window-control][data-action="zoom"]) {
background: var(--star-window-control-zoom, var(--star-ok, var(--star-accent)));
}
:where([data-starkit-window-control]:hover),
:where([data-starkit-window-control]:focus-visible) {
transform: scale(1.05);
}
:where([data-starkit-window-control]:active) {
transform: scale(0.94);
}
:where([data-starkit-window-control]):focus-visible {
outline: 2px solid var(--star-focus-ring, var(--star-accent, var(--starplane-focus-ring)));
outline-offset: 3px;
}
:where([data-starkit-window-control-glyph]) {
display: grid;
place-items: center;
font-size: var(--star-text-xs, 0.625rem);
font-weight: 700;
line-height: 1;
opacity: 0;
transform: scale(0.82);
transition:
opacity var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease)),
transform var(--star-dur-fast, 0.12s)
var(--star-ease, var(--starplane-ease-out, ease));
}
:where([data-starkit-window-controls]:hover [data-starkit-window-control-glyph]),
:where([data-starkit-window-control]:focus-visible [data-starkit-window-control-glyph]) {
opacity: 1;
transform: scale(1);
}
:where([data-starkit-window-controls][data-size="sm"]) { --starplane-window-control-size: 0.625rem; }
:where([data-starkit-window-controls][data-size="lg"]) { --starplane-window-control-size: 0.9rem; }
:where([data-starkit-window-controls][data-side="right"]) {
flex-direction: row-reverse;
}
:where([data-starkit-window-controls][data-glyphs="always"] [data-starkit-window-control-glyph]) {
opacity: 1;
transform: scale(1);
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]) {
width: auto;
height: auto;
min-width: 2.75rem;
min-height: 1.75rem;
border: 0;
border-radius: 0;
background: transparent;
color: var(--star-text, var(--starplane-text-primary));
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control-glyph]) {
opacity: 1;
transform: none;
font-size: var(--star-text-sm, 0.875rem);
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]:hover),
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control]:focus-visible) {
transform: none;
background: color-mix(in srgb, var(--star-text) 10%, transparent);
}
:where([data-starkit-window-controls][data-variant="windows"] [data-starkit-window-control][data-action="close"]:hover) {
background: var(--star-danger, var(--starplane-danger));
color: var(--star-danger-on, var(--star-accent-on, var(--starplane-danger-on)));
}