@shift-css/core - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

dist/components/button.css

+:where([s-btn]) {
+  --_btn-bg: var(--s-interactive-primary);
+  --_btn-text: var(--s-text-inverse);
+  --_btn-border: transparent;
+  justify-content: center;
+  align-items: center;
+  gap: var(--s-space-2);
+  padding: var(--s-space-2) var(--s-space-4);
+  border-radius: var(--s-radius-md);
+  font-weight: var(--s-font-semibold);
+  font-size: var(--s-text-sm);
+  white-space: nowrap;
+  background-color: var(--_btn-bg);
+  color: var(--_btn-text);
+  border: 1px solid var(--_btn-border);
+  line-height: 1;
+  display: inline-flex;
+
+  @supports (color: oklch(from red l c h)) {
+    color: oklch(from var(--_btn-bg) clamp(.15, calc((.55 - l) * 1000 + .15), .95) 0 0);
+  }
+
+  @supports (color: contrast-color(red)) {
+    color: contrast-color(var(--_btn-bg));
+  }
+
+  transition: background-color var(--s-duration-150) var(--s-ease-out), border-color var(--s-duration-150) var(--s-ease-out), transform var(--s-duration-100) var(--s-ease-out);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-interactive-primary-hover);
+  }
+
+  &:active:not(:disabled) {
+    --_btn-bg: var(--s-interactive-primary-active);
+    transform: scale(.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--s-focus-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: .5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+[s-btn="primary"] {
+  --_btn-bg: var(--s-interactive-primary);
+  --_btn-text: var(--s-text-inverse);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-interactive-primary-hover);
+  }
+
+  &:active:not(:disabled) {
+    --_btn-bg: var(--s-interactive-primary-active);
+  }
+}
+
+[s-btn="secondary"] {
+  --_btn-bg: var(--s-surface-raised);
+  --_btn-text: var(--s-text-primary);
+  --_btn-border: var(--s-border-default);
+  color: var(--_btn-text);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-surface-sunken);
+  }
+}
+
+[s-btn="ghost"] {
+  --_btn-bg: transparent;
+  --_btn-text: var(--s-interactive-primary);
+  color: var(--_btn-text);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-surface-sunken);
+  }
+}
+
+[s-btn="link"] {
+  --_btn-bg: transparent;
+  --_btn-text: var(--s-interactive-primary);
+  --_btn-border: transparent;
+  color: var(--_btn-text);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+
+  &:hover:not(:disabled) {
+    --_btn-text: var(--s-interactive-primary-hover);
+    color: var(--_btn-text);
+  }
+}
+
+[s-btn="outline"] {
+  --_btn-bg: transparent;
+  --_btn-text: var(--s-interactive-primary);
+  --_btn-border: var(--s-interactive-primary);
+  color: var(--_btn-text);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-interactive-primary);
+    --_btn-text: var(--s-text-inverse);
+    color: var(--_btn-text);
+  }
+}
+
+[s-btn="danger"] {
+  --_btn-bg: var(--s-state-danger);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-danger-800);
+  }
+
+  &:active:not(:disabled) {
+    --_btn-bg: var(--s-danger-900);
+  }
+}
+
+[s-btn="success"] {
+  --_btn-bg: var(--s-state-success);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-success-800);
+  }
+
+  &:active:not(:disabled) {
+    --_btn-bg: var(--s-success-900);
+  }
+}
+
+[s-btn="warning"] {
+  --_btn-bg: var(--s-state-warning);
+
+  &:hover:not(:disabled) {
+    --_btn-bg: var(--s-warning-800);
+  }
+
+  &:active:not(:disabled) {
+    --_btn-bg: var(--s-warning-900);
+  }
+}
+
+[s-btn][s-size="sm"] {
+  padding: var(--s-space-1) var(--s-space-3);
+  font-size: var(--s-text-xs);
+}
+
+[s-btn][s-size="lg"] {
+  padding: var(--s-space-3) var(--s-space-6);
+  font-size: var(--s-text-base);
+}
+
+[s-btn][s-size="xl"] {
+  padding: var(--s-space-4) var(--s-space-8);
+  font-size: var(--s-text-lg);
+}
+
+[s-btn][s-icon] {
+  padding: var(--s-space-2);
+  aspect-ratio: 1;
+}
+
+[s-btn][s-block] {
+  width: 100%;
+}
+
+[s-btn][s-loading] {
+  color: #0000;
+  pointer-events: none;
+  position: relative;
+
+  &:after {
+    content: "";
+    border: 2px solid var(--s-text-inverse);
+    border-right-color: #0000;
+    border-radius: 50%;
+    width: 1em;
+    height: 1em;
+    margin: auto;
+    animation: .6s linear infinite s-btn-spin;
+    position: absolute;
+    inset: 0;
+  }
+}
+
+@keyframes s-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+[s-btn-group] {
+  display: inline-flex;
+
+  & > [s-btn] {
+    border-radius: 0;
+
+    &:first-child {
+      border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);
+    }
+
+    &:last-child {
+      border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;
+    }
+
+    &:not(:last-child) {
+      border-right: none;
+    }
+  }
+}

dist/components/card.css

+:where([s-card]) {
+  --_card-bg: var(--s-surface-raised);
+  --_card-border: var(--s-border-muted);
+  --_card-radius: var(--s-radius-xl);
+  --_card-shadow: var(--s-shadow-base);
+  --_card-padding: var(--s-space-4);
+  background-color: var(--_card-bg);
+  border: 1px solid var(--_card-border);
+  border-radius: var(--_card-radius);
+  box-shadow: var(--_card-shadow);
+  color: var(--s-text-primary);
+  flex-direction: column;
+  display: flex;
+  overflow: hidden;
+  container-type: inline-size;
+
+  @supports (color: oklch(from red l c h)) {
+    color: oklch(from var(--_card-bg) clamp(.15, calc((.55 - l) * 1000 + .15), .95) 0 0);
+  }
+}
+
+[s-card-header] {
+  padding: var(--_card-padding, var(--s-space-4));
+  border-bottom: 1px solid var(--_card-border, var(--s-border-muted));
+}
+
+[s-card-body] {
+  padding: var(--_card-padding, var(--s-space-4));
+  flex: 1;
+}
+
+[s-card-footer] {
+  padding: var(--_card-padding, var(--s-space-4));
+  border-top: 1px solid var(--_card-border, var(--s-border-muted));
+}
+
+[s-card-media] {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+
+  & > img {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+[s-card-title] {
+  font-size: var(--s-text-lg);
+  font-weight: var(--s-font-semibold);
+  line-height: var(--s-leading-tight);
+  margin-bottom: var(--s-space-1);
+}
+
+[s-card-subtitle] {
+  font-size: var(--s-text-sm);
+  color: var(--s-text-secondary);
+}
+
+[s-card="flat"] {
+  --_card-shadow: none;
+  --_card-border: var(--s-border-default);
+}
+
+[s-card="elevated"], [s-card][s-surface="raised"] {
+  --_card-shadow: var(--s-shadow-lg);
+  --_card-border: transparent;
+}
+
+[s-card][s-surface="floating"] {
+  --_card-shadow: var(--s-shadow-xl);
+  --_card-border: transparent;
+}
+
+[s-card="outline"] {
+  --_card-shadow: none;
+  --_card-border: var(--s-border-strong);
+  --_card-bg: transparent;
+}
+
+[s-card][s-interactive] {
+  cursor: pointer;
+  transition: transform var(--s-duration-200) var(--s-ease-out), box-shadow var(--s-duration-200) var(--s-ease-out);
+
+  &:hover {
+    --_card-shadow: var(--s-shadow-xl);
+    transform: translateY(-4px);
+  }
+
+  &:active {
+    transform: translateY(-2px);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--s-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+[s-card][s-link] {
+  position: relative;
+
+  & a:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+}
+
+[s-card][s-horizontal] {
+  flex-direction: row;
+
+  & [s-card-media] {
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    width: 33%;
+  }
+}
+
+@container (width <= 24rem) {
+  [s-card][s-horizontal] {
+    flex-direction: column;
+
+    & [s-card-media] {
+      aspect-ratio: 16 / 9;
+      width: 100%;
+    }
+  }
+}
+
+[s-card][s-size="sm"] {
+  --_card-padding: var(--s-space-3);
+  --_card-radius: var(--s-radius-lg);
+}
+
+[s-card][s-size="lg"] {
+  --_card-padding: var(--s-space-6);
+}
+
+[s-card="feature"] {
+  text-align: center;
+  --_card-padding: var(--s-space-6);
+}
+
+[s-card-icon] {
+  font-size: var(--s-text-4xl);
+  margin-bottom: var(--s-space-4);
+}
+
+[s-card-grid] {
+  gap: var(--s-space-4);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
+  display: grid;
+}
+
+[s-card-stack] {
+  gap: var(--s-space-4);
+  flex-direction: column;
+  display: flex;
+}

dist/components/input.css

+:where([s-input]) {
+  --_input-bg: var(--s-surface-base);
+  --_input-border: var(--s-border-default);
+  --_input-text: var(--s-text-primary);
+  --_input-placeholder: var(--s-text-tertiary);
+  --_input-radius: var(--s-radius-md);
+  appearance: none;
+  width: 100%;
+  padding: var(--s-space-2) var(--s-space-3);
+  background-color: var(--_input-bg);
+  border: 2px solid var(--_input-border);
+  border-radius: var(--_input-radius);
+  color: var(--_input-text);
+  font-size: var(--s-text-sm);
+  line-height: var(--s-leading-normal);
+  transition: border-color var(--s-duration-150) var(--s-ease-out), box-shadow var(--s-duration-150) var(--s-ease-out);
+  display: block;
+
+  &::placeholder {
+    color: var(--_input-placeholder);
+  }
+
+  &:hover:not(:disabled):not(:focus-visible) {
+    --_input-border: var(--s-border-strong);
+  }
+
+  &:focus-visible {
+    --_input-border: var(--s-interactive-primary);
+    outline: 2px solid var(--s-focus-ring);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: .5;
+    cursor: not-allowed;
+    background-color: var(--s-surface-sunken);
+  }
+
+  &:invalid:not(:placeholder-shown), &[aria-invalid="true"] {
+    --_input-border: var(--s-state-danger);
+
+    &:focus-visible {
+      outline-color: var(--s-state-danger);
+    }
+  }
+}
+
+[s-input][s-size="sm"] {
+  padding: var(--s-space-1) var(--s-space-2);
+  font-size: var(--s-text-xs);
+}
+
+[s-input][s-size="lg"] {
+  padding: var(--s-space-3) var(--s-space-4);
+  font-size: var(--s-text-base);
+}
+
+textarea[s-input] {
+  resize: vertical;
+  min-height: 6rem;
+}
+
+select[s-input] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--s-space-3) center;
+  padding-right: var(--s-space-10);
+}
+
+[s-input-group] {
+  display: flex;
+
+  & > [s-input] {
+    border-radius: 0;
+    flex: 1;
+    min-width: 0;
+
+    &:first-child {
+      border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);
+    }
+
+    &:last-child {
+      border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;
+    }
+  }
+
+  & > [s-input-addon] {
+    padding: var(--s-space-2) var(--s-space-3);
+    background-color: var(--s-surface-sunken);
+    border: 2px solid var(--s-border-default);
+    color: var(--s-text-secondary);
+    font-size: var(--s-text-sm);
+    white-space: nowrap;
+    align-items: center;
+    display: flex;
+
+    &:first-child {
+      border-radius: var(--s-radius-md) 0 0 var(--s-radius-md);
+      border-right: none;
+    }
+
+    &:last-child {
+      border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;
+      border-left: none;
+    }
+  }
+}
+
+[s-field] {
+  gap: var(--s-space-1);
+  flex-direction: column;
+  display: flex;
+}
+
+[s-field-label] {
+  font-size: var(--s-text-sm);
+  font-weight: var(--s-font-medium);
+  color: var(--s-text-primary);
+}
+
+[s-field-hint] {
+  font-size: var(--s-text-xs);
+  color: var(--s-text-secondary);
+}
+
+[s-field-error] {
+  font-size: var(--s-text-xs);
+  color: var(--s-state-danger);
+}
+
+[s-checkbox], [s-radio] {
+  align-items: center;
+  gap: var(--s-space-2);
+  cursor: pointer;
+  display: inline-flex;
+
+  & input {
+    appearance: none;
+    border: 2px solid var(--s-border-default);
+    background-color: var(--s-surface-base);
+    cursor: pointer;
+    width: 1.25rem;
+    height: 1.25rem;
+    transition: background-color var(--s-duration-150) var(--s-ease-out), border-color var(--s-duration-150) var(--s-ease-out);
+
+    &:checked {
+      background-color: var(--s-interactive-primary);
+      border-color: var(--s-interactive-primary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--s-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+[s-checkbox] input {
+  border-radius: var(--s-radius-sm);
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: .75rem;
+  }
+}
+
+[s-radio] input {
+  border-radius: 50%;
+
+  &:checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+}
+
+[s-toggle] {
+  align-items: center;
+  gap: var(--s-space-2);
+  cursor: pointer;
+  display: inline-flex;
+
+  & input {
+    appearance: none;
+    background-color: var(--s-border-default);
+    cursor: pointer;
+    width: 2.5rem;
+    height: 1.5rem;
+    transition: background-color var(--s-duration-200) var(--s-ease-out);
+    border-radius: 9999px;
+    position: relative;
+
+    &:after {
+      content: "";
+      background-color: var(--s-surface-base);
+      width: calc(1.5rem - 4px);
+      height: calc(1.5rem - 4px);
+      box-shadow: var(--s-shadow-sm);
+      transition: transform var(--s-duration-200) var(--s-ease-out);
+      border-radius: 50%;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+    }
+
+    &:checked {
+      background-color: var(--s-interactive-primary);
+
+      &:after {
+        transform: translateX(1rem);
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--s-focus-ring);
+      outline-offset: 2px;
+    }
+
+    &:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+    }
+  }
+}

dist/components/modal.css

+dialog[s-modal]:not([open]) {
+  display: none;
+}
+
+:where(dialog[s-modal]) {
+  --_modal-bg: var(--s-surface-raised);
+  --_modal-border: var(--s-border-muted);
+  --_modal-radius: var(--s-radius-xl);
+  --_modal-shadow: var(--s-shadow-2xl);
+  --_modal-padding: var(--s-space-4);
+  --_modal-max-width: 32rem;
+  width: min(var(--_modal-max-width), calc(100vw - var(--s-space-4) * 2));
+  max-height: calc(100vh - var(--s-space-4) * 2);
+  max-width: var(--_modal-max-width);
+  background-color: var(--_modal-bg);
+  border-radius: var(--_modal-radius);
+  box-shadow: var(--_modal-shadow);
+  border: none;
+  margin: auto;
+  padding: 0;
+
+  &[open] {
+    flex-direction: column;
+    display: flex;
+  }
+
+  color: var(--s-text-primary);
+}
+
+dialog[s-modal][open] {
+  animation: s-modal-scale-in var(--s-duration-200) var(--s-ease-out);
+}
+
+dialog[s-modal]:focus-visible {
+  outline: 2px solid var(--s-focus-ring);
+  outline-offset: 2px;
+}
+
+@keyframes s-modal-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(.95)translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1)translateY(0);
+  }
+}
+
+dialog[s-modal]::backdrop {
+  backdrop-filter: blur(4px);
+  animation: s-modal-backdrop-in var(--s-duration-200) var(--s-ease-out);
+  background: oklch(0% 0 0 / .5);
+}
+
+@keyframes s-modal-backdrop-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+dialog[s-modal][s-size="sm"] {
+  --_modal-max-width: 25rem;
+}
+
+dialog[s-modal][s-size="lg"] {
+  --_modal-max-width: 43.75rem;
+}
+
+dialog[s-modal][s-size="full"] {
+  --_modal-max-width: 100vw;
+  --_modal-radius: 0;
+  width: 100vw;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+dialog[s-modal][s-position="top"] {
+  margin-top: var(--s-space-8);
+  margin-bottom: auto;
+}
+
+dialog[s-modal][s-position="bottom"] {
+  margin-top: auto;
+  margin-bottom: var(--s-space-8);
+}
+
+dialog[s-modal][s-position="left"] {
+  margin-left: var(--s-space-8);
+  margin-right: auto;
+}
+
+dialog[s-modal][s-position="right"] {
+  margin-left: auto;
+  margin-right: var(--s-space-8);
+}
+
+:where([s-modal-header]) {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--s-space-4);
+  padding: var(--_modal-padding, var(--s-space-4));
+  border-bottom: 1px solid var(--s-border-muted);
+  display: flex;
+
+  & > h1, & > h2, & > h3 {
+    font-size: var(--s-text-lg);
+    font-weight: var(--s-font-semibold);
+    color: inherit;
+    margin: 0;
+    line-height: 1.25;
+  }
+}
+
+:where([s-modal-body]) {
+  padding: var(--_modal-padding, var(--s-space-4));
+  overscroll-behavior: contain;
+  flex: 1;
+  overflow-y: auto;
+}
+
+:where([s-modal-footer]) {
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--s-space-3);
+  padding: var(--_modal-padding, var(--s-space-4));
+  border-top: 1px solid var(--s-border-muted);
+  display: flex;
+}
+
+:where([s-modal-close]) {
+  cursor: pointer;
+  border-radius: var(--s-radius-full);
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  font-size: var(--s-text-xl);
+  color: var(--s-text-secondary);
+  transition: background-color var(--s-duration-150) var(--s-ease-out), color var(--s-duration-150) var(--s-ease-out);
+  background: none;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 1;
+  display: inline-flex;
+
+  &:hover {
+    background-color: var(--s-surface-sunken);
+    color: var(--s-text-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--s-focus-ring);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background-color: var(--s-border-default);
+  }
+}
+
+@media (forced-colors: active) {
+  dialog[s-modal] {
+    border: 2px solid canvastext;
+  }
+
+  dialog[s-modal]::backdrop {
+    backdrop-filter: none;
+    background: #000000bf;
+  }
+
+  [s-modal-header], [s-modal-footer] {
+    border-color: canvastext;
+  }
+
+  [s-modal-close] {
+    border: 1px solid buttontext;
+  }
+}

dist/components/prose.css

+:where([s-prose]) {
+  --_prose-body: var(--s-text-base);
+  --_prose-body-weight: var(--s-font-normal);
+  --_prose-leading: var(--s-leading-relaxed);
+  --_prose-link-color: var(--s-primary-600);
+  --_prose-link-hover: var(--s-primary-700);
+  --_prose-code-bg: var(--s-neutral-100);
+  --_prose-code-color: var(--s-danger-600);
+  --_prose-pre-bg: var(--s-neutral-900);
+  --_prose-pre-color: var(--s-neutral-100);
+  --_prose-border-color: var(--s-border-default);
+  --_prose-quote-border: var(--s-primary-500);
+  font-size: var(--_prose-body);
+  font-weight: var(--_prose-body-weight);
+  line-height: var(--_prose-leading);
+  color: var(--s-text-primary);
+  max-width: 65ch;
+}
+
+[s-prose="full"] {
+  max-width: none;
+}
+
+:where([s-prose]) :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--s-text-primary);
+  font-weight: var(--s-font-bold);
+  line-height: var(--s-leading-tight);
+  margin-top: 1.5em;
+  margin-bottom: .5em;
+}
+
+:where([s-prose]) :where(h1) {
+  font-size: var(--s-text-4xl);
+  margin-top: 0;
+}
+
+:where([s-prose]) :where(h2) {
+  font-size: var(--s-text-3xl);
+  border-bottom: 1px solid var(--_prose-border-color);
+  padding-bottom: .25em;
+}
+
+:where([s-prose]) :where(h3) {
+  font-size: var(--s-text-2xl);
+}
+
+:where([s-prose]) :where(h4) {
+  font-size: var(--s-text-xl);
+}
+
+:where([s-prose]) :where(h5) {
+  font-size: var(--s-text-lg);
+}
+
+:where([s-prose]) :where(h6) {
+  font-size: var(--s-text-base);
+  color: var(--s-text-secondary);
+}
+
+:where([s-prose]) :where(p) {
+  margin-bottom: 1.25em;
+}
+
+:where([s-prose]) :where(strong, b) {
+  font-weight: var(--s-font-semibold);
+  color: var(--s-text-primary);
+}
+
+:where([s-prose]) :where(em, i) {
+  font-style: italic;
+}
+
+:where([s-prose]) :where(small) {
+  font-size: var(--s-text-sm);
+}
+
+:where([s-prose]) :where(a) {
+  color: var(--_prose-link-color);
+  text-underline-offset: 2px;
+  transition: color var(--s-duration-150) var(--s-ease-out);
+  text-decoration: underline 1px;
+
+  &:hover {
+    color: var(--_prose-link-hover);
+  }
+}
+
+:where([s-prose]) :where(ul, ol) {
+  margin-bottom: 1.25em;
+  padding-left: 1.5em;
+}
+
+:where([s-prose]) :where(ul) {
+  list-style-type: disc;
+}
+
+:where([s-prose]) :where(ol) {
+  list-style-type: decimal;
+}
+
+:where([s-prose]) :where(li) {
+  margin-bottom: .5em;
+
+  &::marker {
+    color: var(--s-text-tertiary);
+  }
+}
+
+:where([s-prose]) :where(li > ul, li > ol) {
+  margin-top: .5em;
+  margin-bottom: 0;
+}
+
+:where([s-prose]) :where(dl) {
+  margin-bottom: 1.25em;
+}
+
+:where([s-prose]) :where(dt) {
+  font-weight: var(--s-font-semibold);
+  margin-top: 1em;
+}
+
+:where([s-prose]) :where(dd) {
+  margin-bottom: .5em;
+  margin-left: 1.5em;
+}
+
+:where([s-prose]) :where(blockquote) {
+  border-left: 4px solid var(--_prose-quote-border);
+  background-color: var(--s-surface-sunken);
+  border-radius: 0 var(--s-radius-md) var(--s-radius-md) 0;
+  color: var(--s-text-secondary);
+  margin: 1.5em 0;
+  padding: .5em 1em;
+  font-style: italic;
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+:where([s-prose]) :where(code) {
+  font-family: var(--s-font-mono);
+  background-color: var(--_prose-code-bg);
+  color: var(--_prose-code-color);
+  border-radius: var(--s-radius-sm);
+  padding: .125em .375em;
+  font-size: .875em;
+}
+
+:where([s-prose]) :where(pre) {
+  background-color: var(--_prose-pre-bg);
+  color: var(--_prose-pre-color);
+  border-radius: var(--s-radius-lg);
+  font-size: var(--s-text-sm);
+  line-height: var(--s-leading-normal);
+  margin: 1.5em 0;
+  padding: 1em;
+  overflow-x: auto;
+
+  & code {
+    color: inherit;
+    font-size: inherit;
+    background: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
+:where([s-prose]) :where(kbd) {
+  font-family: var(--s-font-mono);
+  background-color: var(--s-neutral-200);
+  color: var(--s-text-primary);
+  border-radius: var(--s-radius-sm);
+  border: 1px solid var(--s-neutral-300);
+  box-shadow: 0 1px 0 var(--s-neutral-400);
+  padding: .125em .375em;
+  font-size: .875em;
+}
+
+:where([s-prose]) :where(hr) {
+  border: none;
+  border-top: 1px solid var(--_prose-border-color);
+  margin: 2em 0;
+}
+
+:where([s-prose]) :where(img) {
+  border-radius: var(--s-radius-lg);
+  max-width: 100%;
+  height: auto;
+}
+
+:where([s-prose]) :where(figure) {
+  margin: 1.5em 0;
+}
+
+:where([s-prose]) :where(figcaption) {
+  font-size: var(--s-text-sm);
+  color: var(--s-text-secondary);
+  text-align: center;
+  margin-top: .75em;
+}
+
+:where([s-prose]) :where(table) {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--s-text-sm);
+  margin: 1.5em 0;
+}
+
+:where([s-prose]) :where(thead) {
+  border-bottom: 2px solid var(--_prose-border-color);
+}
+
+:where([s-prose]) :where(th) {
+  font-weight: var(--s-font-semibold);
+  text-align: left;
+  background-color: var(--s-surface-sunken);
+  padding: .75em 1em;
+}
+
+:where([s-prose]) :where(td) {
+  border-bottom: 1px solid var(--_prose-border-color);
+  padding: .75em 1em;
+}
+
+:where([s-prose]) :where(tbody tr:hover) {
+  background-color: var(--s-surface-sunken);
+}
+
+[s-prose][s-size="sm"] {
+  --_prose-body: var(--s-text-sm);
+}
+
+[s-prose][s-size="lg"] {
+  --_prose-body: var(--s-text-lg);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where([s-prose]) {
+    --_prose-link-color: var(--s-primary-400);
+    --_prose-link-hover: var(--s-primary-300);
+    --_prose-code-bg: var(--s-neutral-800);
+    --_prose-code-color: var(--s-danger-400);
+    --_prose-pre-bg: var(--s-neutral-950);
+    --_prose-pre-color: var(--s-neutral-200);
+  }
+
+  :where([s-prose]) :where(kbd) {
+    background-color: var(--s-neutral-700);
+    border-color: var(--s-neutral-600);
+    box-shadow: 0 1px 0 var(--s-neutral-500);
+  }
+}
+
+:root[style*="color-scheme: dark"] :where([s-prose]), :root[style*="color-scheme:dark"] :where([s-prose]) {
+  --_prose-link-color: var(--s-primary-400);
+  --_prose-link-hover: var(--s-primary-300);
+  --_prose-code-bg: var(--s-neutral-800);
+  --_prose-code-color: var(--s-danger-400);
+  --_prose-pre-bg: var(--s-neutral-950);
+  --_prose-pre-color: var(--s-neutral-200);
+}

dist/components/skip-link.css

+:where([s-skip-link]) {
+  --_skip-bg: var(--s-primary-600);
+  --_skip-color: white;
+  --_skip-radius: var(--s-radius-md);
+  --_skip-shadow: var(--s-shadow-lg);
+  --_skip-z: 9999;
+  z-index: var(--_skip-z);
+  align-items: center;
+  gap: var(--s-space-2);
+  padding: var(--s-space-3) var(--s-space-6);
+  background-color: var(--_skip-bg);
+  color: var(--_skip-color);
+  font-size: var(--s-text-sm);
+  font-weight: var(--s-font-semibold);
+  border-radius: var(--_skip-radius);
+  box-shadow: var(--_skip-shadow);
+  white-space: nowrap;
+  transition: top var(--s-duration-200) var(--s-ease-out), opacity var(--s-duration-200) var(--s-ease-out);
+  opacity: 0;
+  text-decoration: none;
+  display: inline-flex;
+  position: fixed;
+  top: -100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[s-skip-link]:focus, [s-skip-link]:focus-visible {
+  top: var(--s-space-4);
+  opacity: 1;
+  box-shadow: var(--_skip-shadow), 0 0 0 3px white, 0 0 0 5px var(--_skip-bg);
+  outline: none;
+}
+
+[s-skip-link-group] {
+  z-index: 9999;
+  align-items: center;
+  gap: var(--s-space-2);
+  padding: var(--s-space-2);
+  flex-direction: column;
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[s-skip-link-group] [s-skip-link] {
+  position: relative;
+  top: -200%;
+  left: 0;
+  transform: none;
+}
+
+[s-skip-link-group] [s-skip-link]:focus, [s-skip-link-group] [s-skip-link]:focus-visible {
+  top: 0;
+}
+
+[s-skip-link="secondary"] {
+  --_skip-bg: var(--s-neutral-800);
+}
+
+[s-skip-link="contrast"] {
+  --_skip-bg: var(--s-neutral-950);
+  --_skip-color: var(--s-neutral-50);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [s-skip-link] {
+    transition: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :where([s-skip-link]:not([s-skip-link="secondary"]):not([s-skip-link="contrast"])) {
+    --_skip-bg: var(--s-primary-500);
+  }
+
+  [s-skip-link]:focus, [s-skip-link]:focus-visible {
+    box-shadow: var(--_skip-shadow), 0 0 0 3px var(--s-neutral-900), 0 0 0 5px var(--_skip-bg);
+  }
+}
+
+:root[style*="color-scheme: dark"] :where([s-skip-link]:not([s-skip-link="secondary"]):not([s-skip-link="contrast"])), :root[style*="color-scheme:dark"] :where([s-skip-link]:not([s-skip-link="secondary"]):not([s-skip-link="contrast"])) {
+  --_skip-bg: var(--s-primary-500);
+}

dist/components/surface.css

+:where([s-surface]) {
+  --_surface-bg: var(--s-surface-base);
+  --_surface-padding: var(--s-space-4);
+  --_surface-radius: var(--s-radius-lg);
+  background-color: var(--_surface-bg);
+  padding: var(--_surface-padding);
+  border-radius: var(--_surface-radius);
+  color: var(--s-text-primary);
+  container-type: inline-size;
+
+  @supports (color: oklch(from red l c h)) {
+    color: oklch(from var(--_surface-bg) clamp(.15, calc((.55 - l) * 1000 + .15), .95) 0 0);
+  }
+
+  @supports (color: contrast-color(red)) {
+    color: contrast-color(var(--_surface-bg));
+  }
+}
+
+[s-surface="flat"] {
+  --_surface-bg: var(--s-surface-base);
+}
+
+[s-surface="sunken"] {
+  --_surface-bg: var(--s-surface-sunken);
+  box-shadow: var(--s-shadow-inner);
+}
+
+[s-surface="raised"] {
+  --_surface-bg: var(--s-surface-raised);
+  box-shadow: var(--s-shadow-md);
+}
+
+[s-surface="floating"] {
+  --_surface-bg: var(--s-surface-raised);
+  box-shadow: var(--s-shadow-xl);
+}
+
+[s-surface][s-bordered] {
+  border: 1px solid var(--s-border-default);
+}
+
+[s-surface][s-interactive] {
+  cursor: pointer;
+  transition: transform var(--s-duration-150) var(--s-ease-out), box-shadow var(--s-duration-150) var(--s-ease-out);
+
+  &:hover {
+    box-shadow: var(--s-shadow-lg);
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    box-shadow: var(--s-shadow-sm);
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--s-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+[s-surface="primary"] {
+  --_surface-bg: var(--s-primary-700);
+  background-color: #06a;
+  background-color: var(--_surface-bg);
+  color: #fff;
+}
+
+[s-surface="secondary"] {
+  --_surface-bg: var(--s-secondary-700);
+  background-color: #64a;
+  background-color: var(--_surface-bg);
+  color: #fff;
+}
+
+[s-surface="accent"] {
+  --_surface-bg: var(--s-accent-700);
+  background-color: #a46;
+  background-color: var(--_surface-bg);
+  color: #fff;
+}
+
+[s-surface="success"] {
+  --_surface-bg: var(--s-state-success-bg);
+  background-color: #d4edda;
+  background-color: var(--_surface-bg);
+  border-left: 4px solid var(--s-state-success);
+  color: #1a1a1a;
+}
+
+[s-surface="warning"] {
+  --_surface-bg: var(--s-state-warning-bg);
+  background-color: #fff3cd;
+  background-color: var(--_surface-bg);
+  border-left: 4px solid var(--s-state-warning);
+  color: #1a1a1a;
+}
+
+[s-surface="danger"] {
+  --_surface-bg: var(--s-state-danger-bg);
+  background-color: #f8d7da;
+  background-color: var(--_surface-bg);
+  border-left: 4px solid var(--s-state-danger);
+  color: #1a1a1a;
+}
+
+@container (width <= 20rem) {
+  :where([s-surface]) {
+    --_surface-padding: var(--s-space-3);
+  }
+}
+
+@container (width >= 40rem) {
+  :where([s-surface]) {
+    --_surface-padding: var(--s-space-6);
+  }
+}

dist/utils/flex.css

+.s-flex-1 {
+  flex: 1;
+}
+
+.s-flex-auto {
+  flex: auto;
+}
+
+.s-flex-initial {
+  flex: 0 auto;
+}
+
+.s-flex-none {
+  flex: none;
+}
+
+.s-grow {
+  flex-grow: 1;
+}
+
+.s-grow-0 {
+  flex-grow: 0;
+}
+
+.s-shrink {
+  flex-shrink: 1;
+}
+
+.s-shrink-0 {
+  flex-shrink: 0;
+}
+
+.s-self-auto {
+  align-self: auto;
+}
+
+.s-self-start {
+  align-self: flex-start;
+}
+
+.s-self-end {
+  align-self: flex-end;
+}
+
+.s-self-center {
+  align-self: center;
+}
+
+.s-self-stretch {
+  align-self: stretch;
+}
+
+.s-self-baseline {
+  align-self: baseline;
+}
+
+.s-place-items-start {
+  place-items: start;
+}
+
+.s-place-items-end {
+  place-items: end;
+}
+
+.s-place-items-center {
+  place-items: center;
+}
+
+.s-place-items-stretch {
+  place-items: stretch stretch;
+}
+
+.s-place-content-start {
+  place-content: start;
+}
+
+.s-place-content-end {
+  place-content: end;
+}
+
+.s-place-content-center {
+  place-content: center;
+}
+
+.s-place-content-between {
+  place-content: space-between;
+}
+
+.s-place-content-around {
+  place-content: space-around;
+}
+
+.s-place-content-evenly {
+  place-content: space-evenly;
+}
+
+.s-order-first {
+  order: -9999;
+}
+
+.s-order-last {
+  order: 9999;
+}
+
+.s-order-none {
+  order: 0;
+}
+
+.s-order-1 {
+  order: 1;
+}
+
+.s-order-2 {
+  order: 2;
+}
+
+.s-order-3 {
+  order: 3;
+}
+
+.s-w-full {
+  width: 100%;
+}
+
+.s-w-screen {
+  width: 100vw;
+}
+
+.s-w-min {
+  width: min-content;
+}
+
+.s-w-max {
+  width: max-content;
+}
+
+.s-w-fit {
+  width: fit-content;
+}
+
+.s-w-auto {
+  width: auto;
+}
+
+.s-h-full {
+  height: 100%;
+}
+
+.s-h-screen {
+  height: 100vh;
+}
+
+.s-h-screen-dvh {
+  height: 100dvh;
+}
+
+.s-h-min {
+  height: min-content;
+}
+
+.s-h-max {
+  height: max-content;
+}
+
+.s-h-fit {
+  height: fit-content;
+}
+
+.s-h-auto {
+  height: auto;
+}
+
+.s-min-w-0 {
+  min-width: 0;
+}
+
+.s-min-w-full {
+  min-width: 100%;
+}
+
+.s-max-w-none {
+  max-width: none;
+}
+
+.s-max-w-xs {
+  max-width: 20rem;
+}
+
+.s-max-w-sm {
+  max-width: 24rem;
+}
+
+.s-max-w-md {
+  max-width: 28rem;
+}
+
+.s-max-w-lg {
+  max-width: 32rem;
+}
+
+.s-max-w-xl {
+  max-width: 36rem;
+}
+
+.s-max-w-2xl {
+  max-width: 42rem;
+}
+
+.s-max-w-3xl {
+  max-width: 48rem;
+}
+
+.s-max-w-4xl {
+  max-width: 56rem;
+}
+
+.s-max-w-5xl {
+  max-width: 64rem;
+}
+
+.s-max-w-6xl {
+  max-width: 72rem;
+}
+
+.s-max-w-7xl {
+  max-width: 80rem;
+}
+
+.s-max-w-full {
+  max-width: 100%;
+}
+
+.s-max-w-prose {
+  max-width: 65ch;
+}
+
+.s-min-h-0 {
+  min-height: 0;
+}
+
+.s-min-h-full {
+  min-height: 100%;
+}
+
+.s-min-h-screen {
+  min-height: 100vh;
+}
+
+.s-min-h-screen-dvh {
+  min-height: 100dvh;
+}
+
+.s-max-h-full {
+  max-height: 100%;
+}
+
+.s-max-h-screen {
+  max-height: 100vh;
+}
+
+.s-aspect-auto {
+  aspect-ratio: auto;
+}
+
+.s-aspect-square {
+  aspect-ratio: 1;
+}
+
+.s-aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
+.s-aspect-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.s-z-0 {
+  z-index: 0;
+}
+
+.s-z-10 {
+  z-index: 10;
+}
+
+.s-z-20 {
+  z-index: 20;
+}
+
+.s-z-30 {
+  z-index: 30;
+}
+
+.s-z-40 {
+  z-index: 40;
+}
+
+.s-z-50 {
+  z-index: 50;
+}
+
+.s-z-auto {
+  z-index: auto;
+}

dist/utils/layout.css

+[s-flex] {
+  display: flex;
+}
+
+[s-flex="row"] {
+  flex-direction: row;
+  display: flex;
+}
+
+[s-flex="col"] {
+  flex-direction: column;
+  display: flex;
+}
+
+[s-flex="row-reverse"] {
+  flex-direction: row-reverse;
+  display: flex;
+}
+
+[s-flex="col-reverse"] {
+  flex-direction: column-reverse;
+  display: flex;
+}
+
+[s-flex="center"] {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex="stack"] {
+  flex-direction: column;
+  display: flex;
+}
+
+[s-flex="between"] {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex="end"] {
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+}
+
+[s-flex~="wrap"] {
+  flex-wrap: wrap;
+}
+
+[s-flex~="nowrap"] {
+  flex-wrap: nowrap;
+}
+
+[s-justify="start"] {
+  justify-content: flex-start;
+}
+
+[s-justify="end"] {
+  justify-content: flex-end;
+}
+
+[s-justify="center"] {
+  justify-content: center;
+}
+
+[s-justify="between"] {
+  justify-content: space-between;
+}
+
+[s-justify="around"] {
+  justify-content: space-around;
+}
+
+[s-justify="evenly"] {
+  justify-content: space-evenly;
+}
+
+[s-items="start"] {
+  align-items: flex-start;
+}
+
+[s-items="end"] {
+  align-items: flex-end;
+}
+
+[s-items="center"] {
+  align-items: center;
+}
+
+[s-items="baseline"] {
+  align-items: baseline;
+}
+
+[s-items="stretch"] {
+  align-items: stretch;
+}
+
+[s-content="start"] {
+  align-content: flex-start;
+}
+
+[s-content="end"] {
+  align-content: flex-end;
+}
+
+[s-content="center"] {
+  align-content: center;
+}
+
+[s-content="between"] {
+  align-content: space-between;
+}
+
+[s-content="around"] {
+  align-content: space-around;
+}
+
+[s-grid] {
+  display: grid;
+}
+
+[s-grid="1"] {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="2"] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="3"] {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="4"] {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="5"] {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="6"] {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="12"] {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  display: grid;
+}
+
+[s-grid="auto-fit"] {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  display: grid;
+}
+
+[s-grid="auto-fill"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
+  display: grid;
+}
+
+[s-grid-rows="1"] {
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+}
+
+[s-grid-rows="2"] {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
+[s-grid-rows="3"] {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+[s-grid-rows="4"] {
+  grid-template-rows: repeat(4, minmax(0, 1fr));
+}
+
+[s-col-span="1"] {
+  grid-column: span 1 / span 1;
+}
+
+[s-col-span="2"] {
+  grid-column: span 2 / span 2;
+}
+
+[s-col-span="3"] {
+  grid-column: span 3 / span 3;
+}
+
+[s-col-span="4"] {
+  grid-column: span 4 / span 4;
+}
+
+[s-col-span="6"] {
+  grid-column: span 6 / span 6;
+}
+
+[s-col-span="12"] {
+  grid-column: span 12 / span 12;
+}
+
+[s-col-span="full"] {
+  grid-column: 1 / -1;
+}
+
+[s-row-span="1"] {
+  grid-row: span 1 / span 1;
+}
+
+[s-row-span="2"] {
+  grid-row: span 2 / span 2;
+}
+
+[s-row-span="3"] {
+  grid-row: span 3 / span 3;
+}
+
+[s-row-span="full"] {
+  grid-row: 1 / -1;
+}
+
+[s-gap] {
+  gap: var(--s-space-4);
+}
+
+[s-gap="xs"] {
+  gap: var(--s-space-1);
+}
+
+[s-gap="sm"] {
+  gap: var(--s-space-2);
+}
+
+[s-gap="md"] {
+  gap: var(--s-space-4);
+}
+
+[s-gap="lg"] {
+  gap: var(--s-space-6);
+}
+
+[s-gap="xl"] {
+  gap: var(--s-space-8);
+}
+
+[s-gap="none"] {
+  gap: 0;
+}
+
+[s-container] {
+  width: 100%;
+  padding-inline: var(--s-space-4);
+  max-width: var(--s-container-max, 80rem);
+  margin-inline: auto;
+}
+
+[s-container="sm"] {
+  max-width: 40rem;
+}
+
+[s-container="md"] {
+  max-width: 48rem;
+}
+
+[s-container="lg"] {
+  max-width: 64rem;
+}
+
+[s-container="xl"] {
+  max-width: 80rem;
+}
+
+[s-container="full"] {
+  max-width: 100%;
+}
+
+[s-container="prose"] {
+  max-width: 65ch;
+}
+
+[s-position="static"] {
+  position: static;
+}
+
+[s-position="relative"] {
+  position: relative;
+}
+
+[s-position="absolute"] {
+  position: absolute;
+}
+
+[s-position="fixed"] {
+  position: fixed;
+}
+
+[s-position="sticky"] {
+  position: sticky;
+}
+
+[s-inset="0"] {
+  inset: 0;
+}
+
+[s-inset="auto"] {
+  inset: auto;
+}
+
+[s-display="block"] {
+  display: block;
+}
+
+[s-display="inline"] {
+  display: inline;
+}
+
+[s-display="inline-block"] {
+  display: inline-block;
+}
+
+[s-display="contents"] {
+  display: contents;
+}
+
+[s-display="inline-flex"] {
+  display: inline-flex;
+}
+
+[s-display="inline-grid"] {
+  display: inline-grid;
+}

dist/utils/spacing.css

+.s-m-0 {
+  margin: 0;
+}
+
+.s-m-1 {
+  margin: var(--s-space-1);
+}
+
+.s-m-2 {
+  margin: var(--s-space-2);
+}
+
+.s-m-3 {
+  margin: var(--s-space-3);
+}
+
+.s-m-4 {
+  margin: var(--s-space-4);
+}
+
+.s-m-5 {
+  margin: var(--s-space-5);
+}
+
+.s-m-6 {
+  margin: var(--s-space-6);
+}
+
+.s-m-8 {
+  margin: var(--s-space-8);
+}
+
+.s-m-10 {
+  margin: var(--s-space-10);
+}
+
+.s-m-12 {
+  margin: var(--s-space-12);
+}
+
+.s-m-auto {
+  margin: auto;
+}
+
+.s-mx-0 {
+  margin-inline: 0;
+}
+
+.s-mx-1 {
+  margin-inline: var(--s-space-1);
+}
+
+.s-mx-2 {
+  margin-inline: var(--s-space-2);
+}
+
+.s-mx-3 {
+  margin-inline: var(--s-space-3);
+}
+
+.s-mx-4 {
+  margin-inline: var(--s-space-4);
+}
+
+.s-mx-5 {
+  margin-inline: var(--s-space-5);
+}
+
+.s-mx-6 {
+  margin-inline: var(--s-space-6);
+}
+
+.s-mx-8 {
+  margin-inline: var(--s-space-8);
+}
+
+.s-mx-auto {
+  margin-inline: auto;
+}
+
+.s-my-0 {
+  margin-block: 0;
+}
+
+.s-my-1 {
+  margin-block: var(--s-space-1);
+}
+
+.s-my-2 {
+  margin-block: var(--s-space-2);
+}
+
+.s-my-3 {
+  margin-block: var(--s-space-3);
+}
+
+.s-my-4 {
+  margin-block: var(--s-space-4);
+}
+
+.s-my-5 {
+  margin-block: var(--s-space-5);
+}
+
+.s-my-6 {
+  margin-block: var(--s-space-6);
+}
+
+.s-my-8 {
+  margin-block: var(--s-space-8);
+}
+
+.s-my-auto {
+  margin-block: auto;
+}
+
+.s-mt-0 {
+  margin-top: 0;
+}
+
+.s-mt-1 {
+  margin-top: var(--s-space-1);
+}
+
+.s-mt-2 {
+  margin-top: var(--s-space-2);
+}
+
+.s-mt-3 {
+  margin-top: var(--s-space-3);
+}
+
+.s-mt-4 {
+  margin-top: var(--s-space-4);
+}
+
+.s-mt-5 {
+  margin-top: var(--s-space-5);
+}
+
+.s-mt-6 {
+  margin-top: var(--s-space-6);
+}
+
+.s-mt-8 {
+  margin-top: var(--s-space-8);
+}
+
+.s-mt-auto {
+  margin-top: auto;
+}
+
+.s-mb-0 {
+  margin-bottom: 0;
+}
+
+.s-mb-1 {
+  margin-bottom: var(--s-space-1);
+}
+
+.s-mb-2 {
+  margin-bottom: var(--s-space-2);
+}
+
+.s-mb-3 {
+  margin-bottom: var(--s-space-3);
+}
+
+.s-mb-4 {
+  margin-bottom: var(--s-space-4);
+}
+
+.s-mb-5 {
+  margin-bottom: var(--s-space-5);
+}
+
+.s-mb-6 {
+  margin-bottom: var(--s-space-6);
+}
+
+.s-mb-8 {
+  margin-bottom: var(--s-space-8);
+}
+
+.s-mb-auto {
+  margin-bottom: auto;
+}
+
+.s-ml-0 {
+  margin-left: 0;
+}
+
+.s-ml-1 {
+  margin-left: var(--s-space-1);
+}
+
+.s-ml-2 {
+  margin-left: var(--s-space-2);
+}
+
+.s-ml-3 {
+  margin-left: var(--s-space-3);
+}
+
+.s-ml-4 {
+  margin-left: var(--s-space-4);
+}
+
+.s-ml-auto {
+  margin-left: auto;
+}
+
+.s-mr-0 {
+  margin-right: 0;
+}
+
+.s-mr-1 {
+  margin-right: var(--s-space-1);
+}
+
+.s-mr-2 {
+  margin-right: var(--s-space-2);
+}
+
+.s-mr-3 {
+  margin-right: var(--s-space-3);
+}
+
+.s-mr-4 {
+  margin-right: var(--s-space-4);
+}
+
+.s-mr-auto {
+  margin-right: auto;
+}
+
+.s-p-0 {
+  padding: 0;
+}
+
+.s-p-1 {
+  padding: var(--s-space-1);
+}
+
+.s-p-2 {
+  padding: var(--s-space-2);
+}
+
+.s-p-3 {
+  padding: var(--s-space-3);
+}
+
+.s-p-4 {
+  padding: var(--s-space-4);
+}
+
+.s-p-5 {
+  padding: var(--s-space-5);
+}
+
+.s-p-6 {
+  padding: var(--s-space-6);
+}
+
+.s-p-8 {
+  padding: var(--s-space-8);
+}
+
+.s-p-10 {
+  padding: var(--s-space-10);
+}
+
+.s-p-12 {
+  padding: var(--s-space-12);
+}
+
+.s-px-0 {
+  padding-inline: 0;
+}
+
+.s-px-1 {
+  padding-inline: var(--s-space-1);
+}
+
+.s-px-2 {
+  padding-inline: var(--s-space-2);
+}
+
+.s-px-3 {
+  padding-inline: var(--s-space-3);
+}
+
+.s-px-4 {
+  padding-inline: var(--s-space-4);
+}
+
+.s-px-5 {
+  padding-inline: var(--s-space-5);
+}
+
+.s-px-6 {
+  padding-inline: var(--s-space-6);
+}
+
+.s-px-8 {
+  padding-inline: var(--s-space-8);
+}
+
+.s-py-0 {
+  padding-block: 0;
+}
+
+.s-py-1 {
+  padding-block: var(--s-space-1);
+}
+
+.s-py-2 {
+  padding-block: var(--s-space-2);
+}
+
+.s-py-3 {
+  padding-block: var(--s-space-3);
+}
+
+.s-py-4 {
+  padding-block: var(--s-space-4);
+}
+
+.s-py-5 {
+  padding-block: var(--s-space-5);
+}
+
+.s-py-6 {
+  padding-block: var(--s-space-6);
+}
+
+.s-py-8 {
+  padding-block: var(--s-space-8);
+}
+
+.s-pt-0 {
+  padding-top: 0;
+}
+
+.s-pt-1 {
+  padding-top: var(--s-space-1);
+}
+
+.s-pt-2 {
+  padding-top: var(--s-space-2);
+}
+
+.s-pt-3 {
+  padding-top: var(--s-space-3);
+}
+
+.s-pt-4 {
+  padding-top: var(--s-space-4);
+}
+
+.s-pt-5 {
+  padding-top: var(--s-space-5);
+}
+
+.s-pt-6 {
+  padding-top: var(--s-space-6);
+}
+
+.s-pt-8 {
+  padding-top: var(--s-space-8);
+}
+
+.s-pb-0 {
+  padding-bottom: 0;
+}
+
+.s-pb-1 {
+  padding-bottom: var(--s-space-1);
+}
+
+.s-pb-2 {
+  padding-bottom: var(--s-space-2);
+}
+
+.s-pb-3 {
+  padding-bottom: var(--s-space-3);
+}
+
+.s-pb-4 {
+  padding-bottom: var(--s-space-4);
+}
+
+.s-pb-5 {
+  padding-bottom: var(--s-space-5);
+}
+
+.s-pb-6 {
+  padding-bottom: var(--s-space-6);
+}
+
+.s-pb-8 {
+  padding-bottom: var(--s-space-8);
+}
+
+.s-pl-0 {
+  padding-left: 0;
+}
+
+.s-pl-1 {
+  padding-left: var(--s-space-1);
+}
+
+.s-pl-2 {
+  padding-left: var(--s-space-2);
+}
+
+.s-pl-3 {
+  padding-left: var(--s-space-3);
+}
+
+.s-pl-4 {
+  padding-left: var(--s-space-4);
+}
+
+.s-pr-0 {
+  padding-right: 0;
+}
+
+.s-pr-1 {
+  padding-right: var(--s-space-1);
+}
+
+.s-pr-2 {
+  padding-right: var(--s-space-2);
+}
+
+.s-pr-3 {
+  padding-right: var(--s-space-3);
+}
+
+.s-pr-4 {
+  padding-right: var(--s-space-4);
+}
+
+.s-gap-0 {
+  gap: 0;
+}
+
+.s-gap-1 {
+  gap: var(--s-space-1);
+}
+
+.s-gap-2 {
+  gap: var(--s-space-2);
+}
+
+.s-gap-3 {
+  gap: var(--s-space-3);
+}
+
+.s-gap-4 {
+  gap: var(--s-space-4);
+}
+
+.s-gap-5 {
+  gap: var(--s-space-5);
+}
+
+.s-gap-6 {
+  gap: var(--s-space-6);
+}
+
+.s-gap-8 {
+  gap: var(--s-space-8);
+}
+
+.s-gap-10 {
+  gap: var(--s-space-10);
+}
+
+.s-gap-12 {
+  gap: var(--s-space-12);
+}
+
+.s-gap-x-0 {
+  column-gap: 0;
+}
+
+.s-gap-x-1 {
+  column-gap: var(--s-space-1);
+}
+
+.s-gap-x-2 {
+  column-gap: var(--s-space-2);
+}
+
+.s-gap-x-3 {
+  column-gap: var(--s-space-3);
+}
+
+.s-gap-x-4 {
+  column-gap: var(--s-space-4);
+}
+
+.s-gap-x-6 {
+  column-gap: var(--s-space-6);
+}
+
+.s-gap-x-8 {
+  column-gap: var(--s-space-8);
+}
+
+.s-gap-y-0 {
+  row-gap: 0;
+}
+
+.s-gap-y-1 {
+  row-gap: var(--s-space-1);
+}
+
+.s-gap-y-2 {
+  row-gap: var(--s-space-2);
+}
+
+.s-gap-y-3 {
+  row-gap: var(--s-space-3);
+}
+
+.s-gap-y-4 {
+  row-gap: var(--s-space-4);
+}
+
+.s-gap-y-6 {
+  row-gap: var(--s-space-6);
+}
+
+.s-gap-y-8 {
+  row-gap: var(--s-space-8);
+}
+
+.s-space-y-1 > * + * {
+  margin-top: var(--s-space-1);
+}
+
+.s-space-y-2 > * + * {
+  margin-top: var(--s-space-2);
+}
+
+.s-space-y-3 > * + * {
+  margin-top: var(--s-space-3);
+}
+
+.s-space-y-4 > * + * {
+  margin-top: var(--s-space-4);
+}
+
+.s-space-y-6 > * + * {
+  margin-top: var(--s-space-6);
+}
+
+.s-space-y-8 > * + * {
+  margin-top: var(--s-space-8);
+}
+
+.s-space-x-1 > * + * {
+  margin-left: var(--s-space-1);
+}
+
+.s-space-x-2 > * + * {
+  margin-left: var(--s-space-2);
+}
+
+.s-space-x-3 > * + * {
+  margin-left: var(--s-space-3);
+}
+
+.s-space-x-4 > * + * {
+  margin-left: var(--s-space-4);
+}
+
+.s-space-x-6 > * + * {
+  margin-left: var(--s-space-6);
+}
+
+.s-space-x-8 > * + * {
+  margin-left: var(--s-space-8);
+}

dist/utils/typography.css

+.s-font-sans {
+  font-family: var(--s-font-sans);
+}
+
+.s-font-serif {
+  font-family: var(--s-font-serif);
+}
+
+.s-font-mono {
+  font-family: var(--s-font-mono);
+}
+
+.s-text-xs {
+  font-size: var(--s-text-xs);
+}
+
+.s-text-sm {
+  font-size: var(--s-text-sm);
+}
+
+.s-text-base {
+  font-size: var(--s-text-base);
+}
+
+.s-text-lg {
+  font-size: var(--s-text-lg);
+}
+
+.s-text-xl {
+  font-size: var(--s-text-xl);
+}
+
+.s-text-2xl {
+  font-size: var(--s-text-2xl);
+}
+
+.s-text-3xl {
+  font-size: var(--s-text-3xl);
+}
+
+.s-text-4xl {
+  font-size: var(--s-text-4xl);
+}
+
+.s-text-5xl {
+  font-size: var(--s-text-5xl);
+}
+
+.s-font-thin {
+  font-weight: var(--s-font-thin);
+}
+
+.s-font-extralight {
+  font-weight: var(--s-font-extralight);
+}
+
+.s-font-light {
+  font-weight: var(--s-font-light);
+}
+
+.s-font-normal {
+  font-weight: var(--s-font-normal);
+}
+
+.s-font-medium {
+  font-weight: var(--s-font-medium);
+}
+
+.s-font-semibold {
+  font-weight: var(--s-font-semibold);
+}
+
+.s-font-bold {
+  font-weight: var(--s-font-bold);
+}
+
+.s-font-extrabold {
+  font-weight: var(--s-font-extrabold);
+}
+
+.s-font-black {
+  font-weight: var(--s-font-black);
+}
+
+.s-leading-none {
+  line-height: var(--s-leading-none);
+}
+
+.s-leading-tight {
+  line-height: var(--s-leading-tight);
+}
+
+.s-leading-snug {
+  line-height: var(--s-leading-snug);
+}
+
+.s-leading-normal {
+  line-height: var(--s-leading-normal);
+}
+
+.s-leading-relaxed {
+  line-height: var(--s-leading-relaxed);
+}
+
+.s-leading-loose {
+  line-height: var(--s-leading-loose);
+}
+
+.s-tracking-tighter {
+  letter-spacing: var(--s-tracking-tighter);
+}
+
+.s-tracking-tight {
+  letter-spacing: var(--s-tracking-tight);
+}
+
+.s-tracking-normal {
+  letter-spacing: var(--s-tracking-normal);
+}
+
+.s-tracking-wide {
+  letter-spacing: var(--s-tracking-wide);
+}
+
+.s-tracking-wider {
+  letter-spacing: var(--s-tracking-wider);
+}
+
+.s-tracking-widest {
+  letter-spacing: var(--s-tracking-widest);
+}
+
+.s-text-left {
+  text-align: left;
+}
+
+.s-text-center {
+  text-align: center;
+}
+
+.s-text-right {
+  text-align: right;
+}
+
+.s-text-justify {
+  text-align: justify;
+}
+
+.s-text-start {
+  text-align: start;
+}
+
+.s-text-end {
+  text-align: end;
+}
+
+.s-align-baseline {
+  vertical-align: baseline;
+}
+
+.s-align-top {
+  vertical-align: top;
+}
+
+.s-align-middle {
+  vertical-align: middle;
+}
+
+.s-align-bottom {
+  vertical-align: bottom;
+}
+
+.s-align-text-top {
+  vertical-align: text-top;
+}
+
+.s-align-text-bottom {
+  vertical-align: text-bottom;
+}
+
+.s-align-sub {
+  vertical-align: sub;
+}
+
+.s-align-super {
+  vertical-align: super;
+}
+
+.s-underline {
+  text-decoration-line: underline;
+}
+
+.s-overline {
+  text-decoration-line: overline;
+}
+
+.s-line-through {
+  text-decoration-line: line-through;
+}
+
+.s-no-underline {
+  text-decoration-line: none;
+}
+
+.s-decoration-solid {
+  text-decoration-style: solid;
+}
+
+.s-decoration-double {
+  text-decoration-style: double;
+}
+
+.s-decoration-dotted {
+  text-decoration-style: dotted;
+}
+
+.s-decoration-dashed {
+  text-decoration-style: dashed;
+}
+
+.s-decoration-wavy {
+  text-decoration-style: wavy;
+}
+
+.s-uppercase {
+  text-transform: uppercase;
+}
+
+.s-lowercase {
+  text-transform: lowercase;
+}
+
+.s-capitalize {
+  text-transform: capitalize;
+}
+
+.s-normal-case {
+  text-transform: none;
+}
+
+.s-text-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.s-text-clip {
+  text-overflow: clip;
+}
+
+.s-text-wrap {
+  text-wrap: wrap;
+}
+
+.s-text-nowrap {
+  text-wrap: nowrap;
+}
+
+.s-text-balance {
+  text-wrap: balance;
+}
+
+.s-text-pretty {
+  text-wrap: pretty;
+}
+
+.s-whitespace-normal {
+  white-space: normal;
+}
+
+.s-whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.s-whitespace-pre {
+  white-space: pre;
+}
+
+.s-whitespace-pre-line {
+  white-space: pre-line;
+}
+
+.s-whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
+.s-whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+.s-break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.s-break-words {
+  overflow-wrap: break-word;
+}
+
+.s-break-all {
+  word-break: break-all;
+}
+
+.s-break-keep {
+  word-break: keep-all;
+}
+
+.s-hyphens-none {
+  hyphens: none;
+}
+
+.s-hyphens-manual {
+  hyphens: manual;
+}
+
+.s-hyphens-auto {
+  hyphens: auto;
+}
+
+.s-text-primary {
+  color: var(--s-text-primary);
+}
+
+.s-text-secondary {
+  color: var(--s-text-secondary);
+}
+
+.s-text-tertiary {
+  color: var(--s-text-tertiary);
+}
+
+.s-text-inverse {
+  color: var(--s-text-inverse);
+}
+
+.s-text-success {
+  color: var(--s-state-success);
+}
+
+.s-text-warning {
+  color: var(--s-state-warning);
+}
+
+.s-text-danger {
+  color: var(--s-state-danger);
+}
+
+.s-link {
+  color: var(--s-interactive-primary);
+  text-underline-offset: 2px;
+  text-decoration: underline;
+
+  &:hover {
+    color: var(--s-interactive-primary-hover);
+  }
+}
+
+.s-list-none {
+  list-style-type: none;
+}
+
+.s-list-disc {
+  list-style-type: disc;
+}
+
+.s-list-decimal {
+  list-style-type: decimal;
+}
+
+.s-list-inside {
+  list-style-position: inside;
+}
+
+.s-list-outside {
+  list-style-position: outside;
+}
+
+.s-opacity-0 {
+  opacity: 0;
+}
+
+.s-opacity-5 {
+  opacity: .05;
+}
+
+.s-opacity-10 {
+  opacity: .1;
+}
+
+.s-opacity-20 {
+  opacity: .2;
+}
+
+.s-opacity-25 {
+  opacity: .25;
+}
+
+.s-opacity-30 {
+  opacity: .3;
+}
+
+.s-opacity-40 {
+  opacity: .4;
+}
+
+.s-opacity-50 {
+  opacity: .5;
+}
+
+.s-opacity-60 {
+  opacity: .6;
+}
+
+.s-opacity-70 {
+  opacity: .7;
+}
+
+.s-opacity-75 {
+  opacity: .75;
+}
+
+.s-opacity-80 {
+  opacity: .8;
+}
+
+.s-opacity-90 {
+  opacity: .9;
+}
+
+.s-opacity-95 {
+  opacity: .95;
+}
+
+.s-opacity-100 {
+  opacity: 1;
+}

dist/utils/visibility.css

+[s-hidden] {
+  display: none;
+}
+
+[s-visible] {
+  visibility: visible;
+}
+
+[s-invisible] {
+  visibility: hidden;
+}
+
+[s-collapse] {
+  visibility: collapse;
+}
+
+[s-sr-only] {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+[s-sr-only="focusable"]:focus, [s-sr-only="focusable"]:focus-within, [s-not-sr-only], [s-focus\:not-sr-only]:focus, [s-focus\:not-sr-only]:focus-visible, [s-focus-within\:not-sr-only]:focus-within {
+  clip: auto;
+  white-space: normal;
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  position: static;
+  overflow: visible;
+}
+
+[s-truncate] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+[s-truncate="2"] {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-truncate="3"] {
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-truncate="4"] {
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+[s-overflow="auto"] {
+  overflow: auto;
+}
+
+[s-overflow="hidden"] {
+  overflow: hidden;
+}
+
+[s-overflow="visible"] {
+  overflow: visible;
+}
+
+[s-overflow="scroll"] {
+  overflow: scroll;
+}
+
+[s-overflow-x="auto"] {
+  overflow-x: auto;
+}
+
+[s-overflow-x="hidden"] {
+  overflow-x: hidden;
+}
+
+[s-overflow-y="auto"] {
+  overflow-y: auto;
+}
+
+[s-overflow-y="hidden"] {
+  overflow-y: hidden;
+}
+
+@media (width < 640px) {
+  [s-hide-on~="sm"] {
+    display: none;
+  }
+}
+
+@media (width >= 640px) and (width < 768px) {
+  [s-hide-on~="md"] {
+    display: none;
+  }
+}
+
+@media (width >= 768px) and (width < 1024px) {
+  [s-hide-on~="lg"] {
+    display: none;
+  }
+}
+
+@media (width >= 1024px) {
+  [s-hide-on~="xl"] {
+    display: none;
+  }
+}
+
+@media (width >= 640px) {
+  [s-show-on~="sm"] {
+    display: none;
+  }
+}
+
+@media (width < 640px), (width >= 768px) {
+  [s-show-on~="md"] {
+    display: none;
+  }
+}
+
+@media (width < 768px), (width >= 1024px) {
+  [s-show-on~="lg"] {
+    display: none;
+  }
+}
+
+@media (width < 1024px) {
+  [s-show-on~="xl"] {
+    display: none;
+  }
+}
+
+[s-pointer="none"] {
+  pointer-events: none;
+}
+
+[s-pointer="auto"] {
+  pointer-events: auto;
+}
+
+[s-select="none"] {
+  user-select: none;
+}
+
+[s-select="text"] {
+  user-select: text;
+}
+
+[s-select="all"] {
+  user-select: all;
+}
+
+[s-select="auto"] {
+  user-select: auto;
+}
+
+[s-isolate] {
+  isolation: isolate;
+}
+
+[s-isolate="auto"] {
+  isolation: auto;
+}

README.md

+# @shift-css/core
+
+A zero-runtime, OKLCH-native CSS framework with automatic theming.
+
+[![npm version](https://img.shields.io/npm/v/@shift-css/core)](https://www.npmjs.com/package/@shift-css/core)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+
+## Installation
+
+```bash
+npm install @shift-css/core
+# or
+bun add @shift-css/core
+# or
+pnpm add @shift-css/core
+```
+
+## Usage
+
+```css
+/* Full framework */
+@import "@shift-css/core";
+
+/* Or minified for production */
+@import "@shift-css/core/min";
+```
+
+```html
+<div s-surface="raised">
+  <h2>Hello Shift</h2>
+  <button s-btn="primary">Get Started</button>
+</div>
+```
+
+No configuration, no JavaScript, no build step for customization.
+
+## Features
+
+- **Zero JavaScript** - Theming works without any runtime code
+- **Perceptually uniform colors** - OKLCH ensures consistent brightness across your palette
+- **Automatic contrast** - Text colors adapt to any background automatically
+- **Clean specificity** - Cascade layers mean no more `!important` battles
+- **One-line customization** - Change a single hue variable to transform your entire palette
+
+```css
+/* Change your entire brand palette with one line */
+:root {
+  --shift-hue-primary: 280; /* Purple instead of blue */
+}
+```
+
+## Customization
+
+Override seed hues to transform your entire palette:
+
+```css
+:root {
+  --shift-hue-primary: 280; /* Purple */
+  --shift-hue-secondary: 200; /* Teal */
+  --shift-hue-accent: 45; /* Gold */
+  --shift-hue-neutral: 280; /* Purple-tinted grays */
+}
+```
+
+## Modular Imports
+
+Import only what you need:
+
+```css
+/* Reset only */
+@import "@shift-css/core/reset";
+
+/* Tokens only */
+@import "@shift-css/core/tokens";
+```
+
+## Bundle Size
+
+| File            | Size   |
+| --------------- | ------ |
+| `shift.css`     | ~55 KB |
+| `shift.min.css` | ~41 KB |
+| Gzipped         | ~10 KB |
+
+## Browser Support
+
+| Browser | Minimum Version |
+| ------- | --------------- |
+| Chrome  | 131+            |
+| Firefox | 133+            |
+| Safari  | 18+             |
+| Edge    | 131+            |
+
+## Documentation
+
+Full documentation at [getshiftcss.com](https://getshiftcss.com)
+
+## CLI
+
+Use the CLI to initialize Shift CSS with proper cascade layers:
+
+```bash
+npx shift-css init
+```
+
+See [@shift-css/cli](https://www.npmjs.com/package/@shift-css/cli) for details.
+
+## License
+
+MIT

dist/shift.min.css

@@ -1,1 +0,1 @@
-@layer shift.reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{color-scheme:light dark;font-size:clamp(.9375rem,.875rem + .25vi,1rem);@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100dvh;line-height:1.5;font-family:var(--s-font-sans,ui-sans-serif,system-ui,sans-serif);background-color:var(--s-surface-base);color:var(--s-text-primary)}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.2}p{text-wrap:pretty}ul,ol{padding:0;list-style:none}a{color:var(--s-interactive-primary);text-decoration:none;&:hover{text-decoration:underline}}:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}:focus:not(:focus-visible){outline:none}#root,#__next,#app{isolation:isolate;min-height:100dvh}table{border-collapse:collapse;border-spacing:0}pre,code{font-family:var(--s-font-mono,ui-monospace,monospace)}pre{overflow-x:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:more){*{border-color:currentColor!important}}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:0 0!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}pre{white-space:pre-wrap!important}@page{margin:2cm}}}@layer shift.tokens{@layer shift.tokens{:root{color-scheme:light dark;--shift-hue-primary:250;--shift-hue-secondary:180;--shift-hue-accent:30;--shift-hue-success:145;--shift-hue-warning:45;--shift-hue-danger:25;--shift-hue-neutral:250;--s-primary-50:oklch(.9778 .0108 var(--shift-hue-primary));--s-primary-100:oklch(.9356 .0321 var(--shift-hue-primary));--s-primary-200:oklch(.8811 .0636 var(--shift-hue-primary));--s-primary-300:oklch(.8267 .0951 var(--shift-hue-primary));--s-primary-400:oklch(.7422 .1211 var(--shift-hue-primary));--s-primary-500:oklch(.6478 .1472 var(--shift-hue-primary));--s-primary-600:oklch(.5733 .1383 var(--shift-hue-primary));--s-primary-700:oklch(.4689 .1178 var(--shift-hue-primary));--s-primary-800:oklch(.3944 .0894 var(--shift-hue-primary));--s-primary-900:oklch(.32 .072 var(--shift-hue-primary));--s-primary-950:oklch(.2378 .054 var(--shift-hue-primary));--s-secondary-50:oklch(.9778 .0108 var(--shift-hue-secondary));--s-secondary-100:oklch(.9356 .0321 var(--shift-hue-secondary));--s-secondary-200:oklch(.8811 .0636 var(--shift-hue-secondary));--s-secondary-300:oklch(.8267 .0951 var(--shift-hue-secondary));--s-secondary-400:oklch(.7422 .1211 var(--shift-hue-secondary));--s-secondary-500:oklch(.6478 .1472 var(--shift-hue-secondary));--s-secondary-600:oklch(.5733 .1383 var(--shift-hue-secondary));--s-secondary-700:oklch(.4689 .1178 var(--shift-hue-secondary));--s-secondary-800:oklch(.3944 .0894 var(--shift-hue-secondary));--s-secondary-900:oklch(.32 .072 var(--shift-hue-secondary));--s-secondary-950:oklch(.2378 .054 var(--shift-hue-secondary));--s-accent-50:oklch(.9778 .0108 var(--shift-hue-accent));--s-accent-100:oklch(.9356 .0321 var(--shift-hue-accent));--s-accent-200:oklch(.8811 .0636 var(--shift-hue-accent));--s-accent-300:oklch(.8267 .0951 var(--shift-hue-accent));--s-accent-400:oklch(.7422 .1211 var(--shift-hue-accent));--s-accent-500:oklch(.6478 .1472 var(--shift-hue-accent));--s-accent-600:oklch(.5733 .1383 var(--shift-hue-accent));--s-accent-700:oklch(.4689 .1178 var(--shift-hue-accent));--s-accent-800:oklch(.3944 .0894 var(--shift-hue-accent));--s-accent-900:oklch(.32 .072 var(--shift-hue-accent));--s-accent-950:oklch(.2378 .054 var(--shift-hue-accent));--s-success-50:oklch(.9778 .0108 var(--shift-hue-success));--s-success-100:oklch(.9356 .0321 var(--shift-hue-success));--s-success-200:oklch(.8811 .0636 var(--shift-hue-success));--s-success-300:oklch(.8267 .0951 var(--shift-hue-success));--s-success-400:oklch(.7422 .1211 var(--shift-hue-success));--s-success-500:oklch(.6478 .1472 var(--shift-hue-success));--s-success-600:oklch(.5733 .1383 var(--shift-hue-success));--s-success-700:oklch(.4689 .1178 var(--shift-hue-success));--s-success-800:oklch(.3944 .0894 var(--shift-hue-success));--s-success-900:oklch(.32 .072 var(--shift-hue-success));--s-success-950:oklch(.2378 .054 var(--shift-hue-success));--s-warning-50:oklch(.9778 .0108 var(--shift-hue-warning));--s-warning-100:oklch(.9356 .0321 var(--shift-hue-warning));--s-warning-200:oklch(.8811 .0636 var(--shift-hue-warning));--s-warning-300:oklch(.8267 .0951 var(--shift-hue-warning));--s-warning-400:oklch(.7422 .1211 var(--shift-hue-warning));--s-warning-500:oklch(.6478 .1472 var(--shift-hue-warning));--s-warning-600:oklch(.5733 .1383 var(--shift-hue-warning));--s-warning-700:oklch(.4689 .1178 var(--shift-hue-warning));--s-warning-800:oklch(.3944 .0894 var(--shift-hue-warning));--s-warning-900:oklch(.32 .072 var(--shift-hue-warning));--s-warning-950:oklch(.2378 .054 var(--shift-hue-warning));--s-danger-50:oklch(.9778 .0108 var(--shift-hue-danger));--s-danger-100:oklch(.9356 .0321 var(--shift-hue-danger));--s-danger-200:oklch(.8811 .0636 var(--shift-hue-danger));--s-danger-300:oklch(.8267 .0951 var(--shift-hue-danger));--s-danger-400:oklch(.7422 .1211 var(--shift-hue-danger));--s-danger-500:oklch(.6478 .1472 var(--shift-hue-danger));--s-danger-600:oklch(.5733 .1383 var(--shift-hue-danger));--s-danger-700:oklch(.4689 .1178 var(--shift-hue-danger));--s-danger-800:oklch(.3944 .0894 var(--shift-hue-danger));--s-danger-900:oklch(.32 .072 var(--shift-hue-danger));--s-danger-950:oklch(.2378 .054 var(--shift-hue-danger));--s-neutral-50:oklch(.9778 .0054 var(--shift-hue-neutral));--s-neutral-100:oklch(.9356 .0072 var(--shift-hue-neutral));--s-neutral-200:oklch(.8811 .009 var(--shift-hue-neutral));--s-neutral-300:oklch(.8267 .0099 var(--shift-hue-neutral));--s-neutral-400:oklch(.7422 .0108 var(--shift-hue-neutral));--s-neutral-500:oklch(.6478 .0118 var(--shift-hue-neutral));--s-neutral-600:oklch(.5733 .0108 var(--shift-hue-neutral));--s-neutral-700:oklch(.4689 .0099 var(--shift-hue-neutral));--s-neutral-800:oklch(.3944 .009 var(--shift-hue-neutral));--s-neutral-900:oklch(.32 .0081 var(--shift-hue-neutral));--s-neutral-950:oklch(.2378 .0072 var(--shift-hue-neutral));--s-surface-base:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-surface-raised:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-surface-sunken:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-surface-overlay:light-dark(var(--s-neutral-900),var(--s-neutral-100));--s-text-primary:light-dark(var(--s-neutral-900),var(--s-neutral-50));--s-text-secondary:light-dark(var(--s-neutral-700),var(--s-neutral-300));--s-text-tertiary:light-dark(var(--s-neutral-500),var(--s-neutral-500));--s-text-inverse:light-dark(var(--s-neutral-50),var(--s-neutral-900));--s-border-default:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-border-muted:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-border-strong:light-dark(var(--s-neutral-400),var(--s-neutral-600));--s-interactive-primary:light-dark(var(--s-primary-700),var(--s-primary-300));--s-interactive-primary-hover:light-dark(var(--s-primary-800),var(--s-primary-200));--s-interactive-primary-active:light-dark(var(--s-primary-900),var(--s-primary-100));--s-interactive-secondary:light-dark(var(--s-secondary-700),var(--s-secondary-300));--s-state-success:light-dark(var(--s-success-700),var(--s-success-300));--s-state-success-bg:light-dark(var(--s-success-100),var(--s-success-900));--s-state-warning:light-dark(var(--s-warning-700),var(--s-warning-300));--s-state-warning-bg:light-dark(var(--s-warning-100),var(--s-warning-900));--s-state-danger:light-dark(var(--s-danger-700),var(--s-danger-300));--s-state-danger-bg:light-dark(var(--s-danger-100),var(--s-danger-900));--s-focus-ring:light-dark(var(--s-primary-500),var(--s-primary-400));--s-focus-ring-offset:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-space-0:0;--s-space-1:.25rem;--s-space-2:.5rem;--s-space-3:.75rem;--s-space-4:1rem;--s-space-5:1.25rem;--s-space-6:1.5rem;--s-space-7:1.75rem;--s-space-8:2rem;--s-space-9:2.25rem;--s-space-10:2.5rem;--s-space-11:2.75rem;--s-space-12:3rem;--s-space-14:3.5rem;--s-space-16:4rem;--s-space-20:5rem;--s-space-24:6rem;--s-space-28:7rem;--s-space-32:8rem;--s-space-36:9rem;--s-space-40:10rem;--s-space-44:11rem;--s-space-48:12rem;--s-space-52:13rem;--s-space-56:14rem;--s-space-60:15rem;--s-space-64:16rem;--s-space-72:18rem;--s-space-80:20rem;--s-space-96:24rem;--s-space-px:1px;--s-space-0_5:.125rem;--s-space-1_5:.375rem;--s-space-2_5:.625rem;--s-space-3_5:.875rem;--s-radius-none:0;--s-radius-sm:.125rem;--s-radius-base:.25rem;--s-radius-md:.375rem;--s-radius-lg:.5rem;--s-radius-xl:.75rem;--s-radius-2xl:1rem;--s-radius-3xl:1.5rem;--s-radius-full:9999px;--s-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--s-font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--s-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--s-text-xs:clamp(.6875rem,.625rem + .25vi,.75rem);--s-text-sm:clamp(.8125rem,.75rem + .25vi,.875rem);--s-text-base:clamp(.9375rem,.875rem + .25vi,1rem);--s-text-lg:clamp(1.0625rem,1rem + .25vi,1.125rem);--s-text-xl:clamp(1.1875rem,1.0625rem + .5vi,1.25rem);--s-text-2xl:clamp(1.4375rem,1.25rem + .75vi,1.5rem);--s-text-3xl:clamp(1.75rem,1.5rem + 1vi,1.875rem);--s-text-4xl:clamp(2.125rem,1.75rem + 1.5vi,2.25rem);--s-text-5xl:clamp(2.75rem,2.25rem + 2vi,3rem);--s-leading-none:1;--s-leading-tight:1.25;--s-leading-snug:1.375;--s-leading-normal:1.5;--s-leading-relaxed:1.625;--s-leading-loose:2;--s-font-thin:100;--s-font-extralight:200;--s-font-light:300;--s-font-normal:400;--s-font-medium:500;--s-font-semibold:600;--s-font-bold:700;--s-font-extrabold:800;--s-font-black:900;--s-tracking-tighter:-.05em;--s-tracking-tight:-.025em;--s-tracking-normal:0;--s-tracking-wide:.025em;--s-tracking-wider:.05em;--s-tracking-widest:.1em;--s-duration-75:75ms;--s-duration-100:.1s;--s-duration-150:.15s;--s-duration-200:.2s;--s-duration-300:.3s;--s-duration-500:.5s;--s-duration-700:.7s;--s-duration-1000:1s;--s-ease-linear:linear;--s-ease-in:cubic-bezier(.4,0,1,1);--s-ease-out:cubic-bezier(0,0,.2,1);--s-ease-in-out:cubic-bezier(.4,0,.2,1);--s-ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--s-shadow-sm:0 1px 2px 0 #0000000d;--s-shadow-base:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--s-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--s-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--s-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--s-shadow-2xl:0 25px 50px -12px #00000040;--s-shadow-inner:inset 0 2px 4px 0 #0000000d;--s-shadow-none:0 0 #0000}}}@layer shift.core{:where([s-surface]){--_surface-bg:var(--s-surface-base);--_surface-padding:var(--s-space-4);--_surface-radius:var(--s-radius-lg);background-color:var(--_surface-bg);padding:var(--_surface-padding);border-radius:var(--_surface-radius);color:var(--s-text-primary);container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_surface-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_surface-bg))}}[s-surface=flat]{--_surface-bg:var(--s-surface-base)}[s-surface=sunken]{--_surface-bg:var(--s-surface-sunken);box-shadow:var(--s-shadow-inner)}[s-surface=raised]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-md)}[s-surface=floating]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-xl)}[s-surface][s-bordered]{border:1px solid var(--s-border-default)}[s-surface][s-interactive]{cursor:pointer;transition:transform var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);&:hover{box-shadow:var(--s-shadow-lg);transform:translateY(-2px)}&:active{box-shadow:var(--s-shadow-sm);transform:translateY(0)}}[s-surface=primary]{--_surface-bg:var(--s-primary-500)}[s-surface=secondary]{--_surface-bg:var(--s-secondary-500)}[s-surface=accent]{--_surface-bg:var(--s-accent-500)}[s-surface=success]{--_surface-bg:var(--s-state-success-bg);border-left:4px solid var(--s-state-success);color:var(--s-text-primary)}[s-surface=warning]{--_surface-bg:var(--s-state-warning-bg);border-left:4px solid var(--s-state-warning);color:var(--s-text-primary)}[s-surface=danger]{--_surface-bg:var(--s-state-danger-bg);border-left:4px solid var(--s-state-danger);color:var(--s-text-primary)}@container (width<=20rem){:where([s-surface]){--_surface-padding:var(--s-space-3)}}@container (width>=40rem){:where([s-surface]){--_surface-padding:var(--s-space-6)}}:where([s-btn]){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);--_btn-border:transparent;justify-content:center;align-items:center;gap:var(--s-space-2);padding:var(--s-space-2)var(--s-space-4);border-radius:var(--s-radius-md);font-weight:var(--s-font-semibold);font-size:var(--s-text-sm);white-space:nowrap;background-color:var(--_btn-bg);color:var(--_btn-text);border:1px solid var(--_btn-border);line-height:1;display:inline-flex;@supports (color:oklch(from red l c h)){color:oklch(from var(--_btn-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_btn-bg))}transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out),transform var(--s-duration-100)var(--s-ease-out);cursor:pointer;user-select:none&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active);transform:scale(.98)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}}[s-btn=primary]{--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active)}}[s-btn=secondary]{--_btn-bg:var(--s-surface-raised);--_btn-text:var(--s-text-primary);--_btn-border:var(--s-border-default);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=ghost]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=link]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:transparent;color:var(--_btn-text);text-underline-offset:2px;text-decoration:underline;&:hover:not(:disabled){--_btn-text:var(--s-interactive-primary-hover);color:var(--_btn-text)}}[s-btn=outline]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);color:var(--_btn-text)}}[s-btn=danger]{--_btn-bg:var(--s-state-danger);&:hover:not(:disabled){--_btn-bg:var(--s-danger-800)}&:active:not(:disabled){--_btn-bg:var(--s-danger-900)}}[s-btn=success]{--_btn-bg:var(--s-state-success);&:hover:not(:disabled){--_btn-bg:var(--s-success-800)}&:active:not(:disabled){--_btn-bg:var(--s-success-900)}}[s-btn=warning]{--_btn-bg:var(--s-state-warning);&:hover:not(:disabled){--_btn-bg:var(--s-warning-800)}&:active:not(:disabled){--_btn-bg:var(--s-warning-900)}}[s-btn][s-size=sm]{padding:var(--s-space-1)var(--s-space-3);font-size:var(--s-text-xs)}[s-btn][s-size=lg]{padding:var(--s-space-3)var(--s-space-6);font-size:var(--s-text-base)}[s-btn][s-size=xl]{padding:var(--s-space-4)var(--s-space-8);font-size:var(--s-text-lg)}[s-btn][s-icon]{padding:var(--s-space-2);aspect-ratio:1}[s-btn][s-block]{width:100%}[s-btn][s-loading]{color:#0000;pointer-events:none;position:relative;&:after{content:"";border:2px solid var(--s-text-inverse);border-right-color:#0000;border-radius:50%;width:1em;height:1em;margin:auto;animation:.6s linear infinite s-btn-spin;position:absolute;inset:0}}@keyframes s-btn-spin{to{transform:rotate(360deg)}}[s-btn-group]{display:inline-flex;&>[s-btn]{border-radius:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}&:not(:last-child){border-right:none}}}:where([s-card]){--_card-bg:var(--s-surface-raised);--_card-border:var(--s-border-muted);--_card-radius:var(--s-radius-xl);--_card-shadow:var(--s-shadow-base);--_card-padding:var(--s-space-4);background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--_card-radius);box-shadow:var(--_card-shadow);color:var(--s-text-primary);flex-direction:column;display:flex;overflow:hidden;container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_card-bg)clamp(.15,calc((.6 - l)*1000 + .15),.95)0 0)}}[s-card-header]{padding:var(--_card-padding,var(--s-space-4));border-bottom:1px solid var(--_card-border,var(--s-border-muted))}[s-card-body]{padding:var(--_card-padding,var(--s-space-4));flex:1}[s-card-footer]{padding:var(--_card-padding,var(--s-space-4));border-top:1px solid var(--_card-border,var(--s-border-muted))}[s-card-media]{aspect-ratio:16/9;overflow:hidden;&>img{object-fit:cover;width:100%;height:100%}}[s-card-title]{font-size:var(--s-text-lg);font-weight:var(--s-font-semibold);line-height:var(--s-leading-tight);margin-bottom:var(--s-space-1)}[s-card-subtitle]{font-size:var(--s-text-sm);color:var(--s-text-secondary)}[s-card=flat]{--_card-shadow:none;--_card-border:var(--s-border-default)}[s-card=elevated],[s-card][s-surface=raised]{--_card-shadow:var(--s-shadow-lg);--_card-border:transparent}[s-card][s-surface=floating]{--_card-shadow:var(--s-shadow-xl);--_card-border:transparent}[s-card=outline]{--_card-shadow:none;--_card-border:var(--s-border-strong);--_card-bg:transparent}[s-card][s-interactive]{cursor:pointer;transition:transform var(--s-duration-200)var(--s-ease-out),box-shadow var(--s-duration-200)var(--s-ease-out);&:hover{--_card-shadow:var(--s-shadow-xl);transform:translateY(-4px)}&:active{transform:translateY(-2px)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}}[s-card][s-link]{position:relative;& a:after{content:"";position:absolute;inset:0}}[s-card][s-horizontal]{flex-direction:row;& [s-card-media]{aspect-ratio:1;flex-shrink:0;width:33%}}@container (width<=24rem){[s-card][s-horizontal]{flex-direction:column;& [s-card-media]{aspect-ratio:16/9;width:100%}}}[s-card][s-size=sm]{--_card-padding:var(--s-space-3);--_card-radius:var(--s-radius-lg)}[s-card][s-size=lg]{--_card-padding:var(--s-space-6)}[s-card=feature]{text-align:center;--_card-padding:var(--s-space-6)}[s-card-icon]{font-size:var(--s-text-4xl);margin-bottom:var(--s-space-4)}[s-card-grid]{gap:var(--s-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));display:grid}[s-card-stack]{gap:var(--s-space-4);flex-direction:column;display:flex}:where([s-input]){--_input-bg:var(--s-surface-base);--_input-border:var(--s-border-default);--_input-text:var(--s-text-primary);--_input-placeholder:var(--s-text-tertiary);--_input-radius:var(--s-radius-md);appearance:none;width:100%;padding:var(--s-space-2)var(--s-space-3);background-color:var(--_input-bg);border:2px solid var(--_input-border);border-radius:var(--_input-radius);color:var(--_input-text);font-size:var(--s-text-sm);line-height:var(--s-leading-normal);transition:border-color var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);display:block;&::placeholder{color:var(--_input-placeholder)}&:hover:not(:disabled):not(:focus){--_input-border:var(--s-border-strong)}&:focus{--_input-border:var(--s-interactive-primary);box-shadow:0 0 0 3px oklch(from var(--s-interactive-primary)l c h/.2);outline:none}&:disabled{opacity:.5;cursor:not-allowed;background-color:var(--s-surface-sunken)}&:invalid:not(:placeholder-shown),&[aria-invalid=true]{--_input-border:var(--s-state-danger);&:focus{box-shadow:0 0 0 3px oklch(from var(--s-state-danger)l c h/.2)}}}[s-input][s-size=sm]{padding:var(--s-space-1)var(--s-space-2);font-size:var(--s-text-xs)}[s-input][s-size=lg]{padding:var(--s-space-3)var(--s-space-4);font-size:var(--s-text-base)}textarea[s-input]{resize:vertical;min-height:6rem}select[s-input]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s-space-3)center;padding-right:var(--s-space-10)}[s-input-group]{display:flex;&>[s-input]{border-radius:0;flex:1;min-width:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}}&>[s-input-addon]{padding:var(--s-space-2)var(--s-space-3);background-color:var(--s-surface-sunken);border:2px solid var(--s-border-default);color:var(--s-text-secondary);font-size:var(--s-text-sm);white-space:nowrap;align-items:center;display:flex;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md);border-right:none}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0;border-left:none}}}[s-field]{gap:var(--s-space-1);flex-direction:column;display:flex}[s-field-label]{font-size:var(--s-text-sm);font-weight:var(--s-font-medium);color:var(--s-text-primary)}[s-field-hint]{font-size:var(--s-text-xs);color:var(--s-text-secondary)}[s-field-error]{font-size:var(--s-text-xs);color:var(--s-state-danger)}[s-checkbox],[s-radio]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;border:2px solid var(--s-border-default);background-color:var(--s-surface-base);cursor:pointer;width:1.25rem;height:1.25rem;transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out);&:checked{background-color:var(--s-interactive-primary);border-color:var(--s-interactive-primary)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}[s-checkbox] input{border-radius:var(--s-radius-sm);&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:.75rem}}[s-radio] input{border-radius:50%;&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat}}[s-toggle]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;background-color:var(--s-border-default);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--s-duration-200)var(--s-ease-out);border-radius:9999px;position:relative;&:after{content:"";background-color:var(--s-surface-base);width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);box-shadow:var(--s-shadow-sm);transition:transform var(--s-duration-200)var(--s-ease-out);border-radius:50%;position:absolute;top:2px;left:2px}&:checked{background-color:var(--s-interactive-primary);&:after{transform:translate(1rem)}}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}}@layer shift.utils{[s-flex]{display:flex}[s-flex=row]{flex-direction:row;display:flex}[s-flex=col]{flex-direction:column;display:flex}[s-flex=row-reverse]{flex-direction:row-reverse;display:flex}[s-flex=col-reverse]{flex-direction:column-reverse;display:flex}[s-flex=center]{justify-content:center;align-items:center;display:flex}[s-flex=stack]{flex-direction:column;display:flex}[s-flex=between]{justify-content:space-between;align-items:center;display:flex}[s-flex=end]{justify-content:flex-end;align-items:center;display:flex}[s-flex~=wrap]{flex-wrap:wrap}[s-flex~=nowrap]{flex-wrap:nowrap}[s-justify=start]{justify-content:flex-start}[s-justify=end]{justify-content:flex-end}[s-justify=center]{justify-content:center}[s-justify=between]{justify-content:space-between}[s-justify=around]{justify-content:space-around}[s-justify=evenly]{justify-content:space-evenly}[s-items=start]{align-items:flex-start}[s-items=end]{align-items:flex-end}[s-items=center]{align-items:center}[s-items=baseline]{align-items:baseline}[s-items=stretch]{align-items:stretch}[s-content=start]{align-content:flex-start}[s-content=end]{align-content:flex-end}[s-content=center]{align-content:center}[s-content=between]{align-content:space-between}[s-content=around]{align-content:space-around}[s-grid]{display:grid}[s-grid="1"]{grid-template-columns:repeat(1,minmax(0,1fr));display:grid}[s-grid="2"]{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}[s-grid="3"]{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}[s-grid="4"]{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}[s-grid="5"]{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}[s-grid="6"]{grid-template-columns:repeat(6,minmax(0,1fr));display:grid}[s-grid="12"]{grid-template-columns:repeat(12,minmax(0,1fr));display:grid}[s-grid=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));display:grid}[s-grid=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));display:grid}[s-grid-rows="1"]{grid-template-rows:repeat(1,minmax(0,1fr))}[s-grid-rows="2"]{grid-template-rows:repeat(2,minmax(0,1fr))}[s-grid-rows="3"]{grid-template-rows:repeat(3,minmax(0,1fr))}[s-grid-rows="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[s-col-span="1"]{grid-column:span 1/span 1}[s-col-span="2"]{grid-column:span 2/span 2}[s-col-span="3"]{grid-column:span 3/span 3}[s-col-span="4"]{grid-column:span 4/span 4}[s-col-span="6"]{grid-column:span 6/span 6}[s-col-span="12"]{grid-column:span 12/span 12}[s-col-span=full]{grid-column:1/-1}[s-row-span="1"]{grid-row:span 1/span 1}[s-row-span="2"]{grid-row:span 2/span 2}[s-row-span="3"]{grid-row:span 3/span 3}[s-row-span=full]{grid-row:1/-1}[s-gap]{gap:var(--s-space-4)}[s-gap=xs]{gap:var(--s-space-1)}[s-gap=sm]{gap:var(--s-space-2)}[s-gap=md]{gap:var(--s-space-4)}[s-gap=lg]{gap:var(--s-space-6)}[s-gap=xl]{gap:var(--s-space-8)}[s-gap=none]{gap:0}[s-container]{width:100%;padding-inline:var(--s-space-4);max-width:var(--s-container-max,80rem);margin-inline:auto}[s-container=sm]{max-width:40rem}[s-container=md]{max-width:48rem}[s-container=lg]{max-width:64rem}[s-container=xl]{max-width:80rem}[s-container=full]{max-width:100%}[s-container=prose]{max-width:65ch}[s-position=static]{position:static}[s-position=relative]{position:relative}[s-position=absolute]{position:absolute}[s-position=fixed]{position:fixed}[s-position=sticky]{position:sticky}[s-inset="0"]{inset:0}[s-inset=auto]{inset:auto}[s-display=block]{display:block}[s-display=inline]{display:inline}[s-display=inline-block]{display:inline-block}[s-display=contents]{display:contents}[s-display=inline-flex]{display:inline-flex}[s-display=inline-grid]{display:inline-grid}[s-hidden]{display:none}[s-visible]{visibility:visible}[s-invisible]{visibility:hidden}[s-collapse]{visibility:collapse}[s-sr-only]{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[s-sr-only=focusable]:focus,[s-sr-only=focusable]:focus-within{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}[s-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[s-truncate="2"]{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="3"]{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="4"]{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-overflow=auto]{overflow:auto}[s-overflow=hidden]{overflow:hidden}[s-overflow=visible]{overflow:visible}[s-overflow=scroll]{overflow:scroll}[s-overflow-x=auto]{overflow-x:auto}[s-overflow-x=hidden]{overflow-x:hidden}[s-overflow-y=auto]{overflow-y:auto}[s-overflow-y=hidden]{overflow-y:hidden}@media (width<640px){[s-hide-on~=sm]{display:none}}@media (width>=640px) and (width<768px){[s-hide-on~=md]{display:none}}@media (width>=768px) and (width<1024px){[s-hide-on~=lg]{display:none}}@media (width>=1024px){[s-hide-on~=xl]{display:none}}@media (width>=640px){[s-show-on~=sm]{display:none}}@media (width<640px),(width>=768px){[s-show-on~=md]{display:none}}@media (width<768px),(width>=1024px){[s-show-on~=lg]{display:none}}@media (width<1024px){[s-show-on~=xl]{display:none}}[s-pointer=none]{pointer-events:none}[s-pointer=auto]{pointer-events:auto}[s-select=none]{user-select:none}[s-select=text]{user-select:text}[s-select=all]{user-select:all}[s-select=auto]{user-select:auto}[s-isolate]{isolation:isolate}[s-isolate=auto]{isolation:auto}.s-m-0{margin:0}.s-m-1{margin:var(--s-space-1)}.s-m-2{margin:var(--s-space-2)}.s-m-3{margin:var(--s-space-3)}.s-m-4{margin:var(--s-space-4)}.s-m-5{margin:var(--s-space-5)}.s-m-6{margin:var(--s-space-6)}.s-m-8{margin:var(--s-space-8)}.s-m-10{margin:var(--s-space-10)}.s-m-12{margin:var(--s-space-12)}.s-m-auto{margin:auto}.s-mx-0{margin-inline:0}.s-mx-1{margin-inline:var(--s-space-1)}.s-mx-2{margin-inline:var(--s-space-2)}.s-mx-3{margin-inline:var(--s-space-3)}.s-mx-4{margin-inline:var(--s-space-4)}.s-mx-5{margin-inline:var(--s-space-5)}.s-mx-6{margin-inline:var(--s-space-6)}.s-mx-8{margin-inline:var(--s-space-8)}.s-mx-auto{margin-inline:auto}.s-my-0{margin-block:0}.s-my-1{margin-block:var(--s-space-1)}.s-my-2{margin-block:var(--s-space-2)}.s-my-3{margin-block:var(--s-space-3)}.s-my-4{margin-block:var(--s-space-4)}.s-my-5{margin-block:var(--s-space-5)}.s-my-6{margin-block:var(--s-space-6)}.s-my-8{margin-block:var(--s-space-8)}.s-my-auto{margin-block:auto}.s-mt-0{margin-top:0}.s-mt-1{margin-top:var(--s-space-1)}.s-mt-2{margin-top:var(--s-space-2)}.s-mt-3{margin-top:var(--s-space-3)}.s-mt-4{margin-top:var(--s-space-4)}.s-mt-5{margin-top:var(--s-space-5)}.s-mt-6{margin-top:var(--s-space-6)}.s-mt-8{margin-top:var(--s-space-8)}.s-mt-auto{margin-top:auto}.s-mb-0{margin-bottom:0}.s-mb-1{margin-bottom:var(--s-space-1)}.s-mb-2{margin-bottom:var(--s-space-2)}.s-mb-3{margin-bottom:var(--s-space-3)}.s-mb-4{margin-bottom:var(--s-space-4)}.s-mb-5{margin-bottom:var(--s-space-5)}.s-mb-6{margin-bottom:var(--s-space-6)}.s-mb-8{margin-bottom:var(--s-space-8)}.s-mb-auto{margin-bottom:auto}.s-ml-0{margin-left:0}.s-ml-1{margin-left:var(--s-space-1)}.s-ml-2{margin-left:var(--s-space-2)}.s-ml-3{margin-left:var(--s-space-3)}.s-ml-4{margin-left:var(--s-space-4)}.s-ml-auto{margin-left:auto}.s-mr-0{margin-right:0}.s-mr-1{margin-right:var(--s-space-1)}.s-mr-2{margin-right:var(--s-space-2)}.s-mr-3{margin-right:var(--s-space-3)}.s-mr-4{margin-right:var(--s-space-4)}.s-mr-auto{margin-right:auto}.s-p-0{padding:0}.s-p-1{padding:var(--s-space-1)}.s-p-2{padding:var(--s-space-2)}.s-p-3{padding:var(--s-space-3)}.s-p-4{padding:var(--s-space-4)}.s-p-5{padding:var(--s-space-5)}.s-p-6{padding:var(--s-space-6)}.s-p-8{padding:var(--s-space-8)}.s-p-10{padding:var(--s-space-10)}.s-p-12{padding:var(--s-space-12)}.s-px-0{padding-inline:0}.s-px-1{padding-inline:var(--s-space-1)}.s-px-2{padding-inline:var(--s-space-2)}.s-px-3{padding-inline:var(--s-space-3)}.s-px-4{padding-inline:var(--s-space-4)}.s-px-5{padding-inline:var(--s-space-5)}.s-px-6{padding-inline:var(--s-space-6)}.s-px-8{padding-inline:var(--s-space-8)}.s-py-0{padding-block:0}.s-py-1{padding-block:var(--s-space-1)}.s-py-2{padding-block:var(--s-space-2)}.s-py-3{padding-block:var(--s-space-3)}.s-py-4{padding-block:var(--s-space-4)}.s-py-5{padding-block:var(--s-space-5)}.s-py-6{padding-block:var(--s-space-6)}.s-py-8{padding-block:var(--s-space-8)}.s-pt-0{padding-top:0}.s-pt-1{padding-top:var(--s-space-1)}.s-pt-2{padding-top:var(--s-space-2)}.s-pt-3{padding-top:var(--s-space-3)}.s-pt-4{padding-top:var(--s-space-4)}.s-pt-5{padding-top:var(--s-space-5)}.s-pt-6{padding-top:var(--s-space-6)}.s-pt-8{padding-top:var(--s-space-8)}.s-pb-0{padding-bottom:0}.s-pb-1{padding-bottom:var(--s-space-1)}.s-pb-2{padding-bottom:var(--s-space-2)}.s-pb-3{padding-bottom:var(--s-space-3)}.s-pb-4{padding-bottom:var(--s-space-4)}.s-pb-5{padding-bottom:var(--s-space-5)}.s-pb-6{padding-bottom:var(--s-space-6)}.s-pb-8{padding-bottom:var(--s-space-8)}.s-pl-0{padding-left:0}.s-pl-1{padding-left:var(--s-space-1)}.s-pl-2{padding-left:var(--s-space-2)}.s-pl-3{padding-left:var(--s-space-3)}.s-pl-4{padding-left:var(--s-space-4)}.s-pr-0{padding-right:0}.s-pr-1{padding-right:var(--s-space-1)}.s-pr-2{padding-right:var(--s-space-2)}.s-pr-3{padding-right:var(--s-space-3)}.s-pr-4{padding-right:var(--s-space-4)}.s-gap-0{gap:0}.s-gap-1{gap:var(--s-space-1)}.s-gap-2{gap:var(--s-space-2)}.s-gap-3{gap:var(--s-space-3)}.s-gap-4{gap:var(--s-space-4)}.s-gap-5{gap:var(--s-space-5)}.s-gap-6{gap:var(--s-space-6)}.s-gap-8{gap:var(--s-space-8)}.s-gap-10{gap:var(--s-space-10)}.s-gap-12{gap:var(--s-space-12)}.s-gap-x-0{column-gap:0}.s-gap-x-1{column-gap:var(--s-space-1)}.s-gap-x-2{column-gap:var(--s-space-2)}.s-gap-x-3{column-gap:var(--s-space-3)}.s-gap-x-4{column-gap:var(--s-space-4)}.s-gap-x-6{column-gap:var(--s-space-6)}.s-gap-x-8{column-gap:var(--s-space-8)}.s-gap-y-0{row-gap:0}.s-gap-y-1{row-gap:var(--s-space-1)}.s-gap-y-2{row-gap:var(--s-space-2)}.s-gap-y-3{row-gap:var(--s-space-3)}.s-gap-y-4{row-gap:var(--s-space-4)}.s-gap-y-6{row-gap:var(--s-space-6)}.s-gap-y-8{row-gap:var(--s-space-8)}.s-space-y-1>*+*{margin-top:var(--s-space-1)}.s-space-y-2>*+*{margin-top:var(--s-space-2)}.s-space-y-3>*+*{margin-top:var(--s-space-3)}.s-space-y-4>*+*{margin-top:var(--s-space-4)}.s-space-y-6>*+*{margin-top:var(--s-space-6)}.s-space-y-8>*+*{margin-top:var(--s-space-8)}.s-space-x-1>*+*{margin-left:var(--s-space-1)}.s-space-x-2>*+*{margin-left:var(--s-space-2)}.s-space-x-3>*+*{margin-left:var(--s-space-3)}.s-space-x-4>*+*{margin-left:var(--s-space-4)}.s-space-x-6>*+*{margin-left:var(--s-space-6)}.s-space-x-8>*+*{margin-left:var(--s-space-8)}.s-flex-1{flex:1}.s-flex-auto{flex:auto}.s-flex-initial{flex:0 auto}.s-flex-none{flex:none}.s-grow{flex-grow:1}.s-grow-0{flex-grow:0}.s-shrink{flex-shrink:1}.s-shrink-0{flex-shrink:0}.s-self-auto{align-self:auto}.s-self-start{align-self:flex-start}.s-self-end{align-self:flex-end}.s-self-center{align-self:center}.s-self-stretch{align-self:stretch}.s-self-baseline{align-self:baseline}.s-place-items-start{place-items:start}.s-place-items-end{place-items:end}.s-place-items-center{place-items:center}.s-place-items-stretch{place-items:stretch stretch}.s-place-content-start{place-content:start}.s-place-content-end{place-content:end}.s-place-content-center{place-content:center}.s-place-content-between{place-content:space-between}.s-place-content-around{place-content:space-around}.s-place-content-evenly{place-content:space-evenly}.s-order-first{order:-9999}.s-order-last{order:9999}.s-order-none{order:0}.s-order-1{order:1}.s-order-2{order:2}.s-order-3{order:3}.s-w-full{width:100%}.s-w-screen{width:100vw}.s-w-min{width:min-content}.s-w-max{width:max-content}.s-w-fit{width:fit-content}.s-w-auto{width:auto}.s-h-full{height:100%}.s-h-screen{height:100vh}.s-h-screen-dvh{height:100dvh}.s-h-min{height:min-content}.s-h-max{height:max-content}.s-h-fit{height:fit-content}.s-h-auto{height:auto}.s-min-w-0{min-width:0}.s-min-w-full{min-width:100%}.s-max-w-none{max-width:none}.s-max-w-xs{max-width:20rem}.s-max-w-sm{max-width:24rem}.s-max-w-md{max-width:28rem}.s-max-w-lg{max-width:32rem}.s-max-w-xl{max-width:36rem}.s-max-w-2xl{max-width:42rem}.s-max-w-3xl{max-width:48rem}.s-max-w-4xl{max-width:56rem}.s-max-w-5xl{max-width:64rem}.s-max-w-6xl{max-width:72rem}.s-max-w-7xl{max-width:80rem}.s-max-w-full{max-width:100%}.s-max-w-prose{max-width:65ch}.s-min-h-0{min-height:0}.s-min-h-full{min-height:100%}.s-min-h-screen{min-height:100vh}.s-min-h-screen-dvh{min-height:100dvh}.s-max-h-full{max-height:100%}.s-max-h-screen{max-height:100vh}.s-aspect-auto{aspect-ratio:auto}.s-aspect-square{aspect-ratio:1}.s-aspect-video{aspect-ratio:16/9}.s-aspect-4-3{aspect-ratio:4/3}.s-z-0{z-index:0}.s-z-10{z-index:10}.s-z-20{z-index:20}.s-z-30{z-index:30}.s-z-40{z-index:40}.s-z-50{z-index:50}.s-z-auto{z-index:auto}.s-font-sans{font-family:var(--s-font-sans)}.s-font-serif{font-family:var(--s-font-serif)}.s-font-mono{font-family:var(--s-font-mono)}.s-text-xs{font-size:var(--s-text-xs)}.s-text-sm{font-size:var(--s-text-sm)}.s-text-base{font-size:var(--s-text-base)}.s-text-lg{font-size:var(--s-text-lg)}.s-text-xl{font-size:var(--s-text-xl)}.s-text-2xl{font-size:var(--s-text-2xl)}.s-text-3xl{font-size:var(--s-text-3xl)}.s-text-4xl{font-size:var(--s-text-4xl)}.s-text-5xl{font-size:var(--s-text-5xl)}.s-font-thin{font-weight:var(--s-font-thin)}.s-font-extralight{font-weight:var(--s-font-extralight)}.s-font-light{font-weight:var(--s-font-light)}.s-font-normal{font-weight:var(--s-font-normal)}.s-font-medium{font-weight:var(--s-font-medium)}.s-font-semibold{font-weight:var(--s-font-semibold)}.s-font-bold{font-weight:var(--s-font-bold)}.s-font-extrabold{font-weight:var(--s-font-extrabold)}.s-font-black{font-weight:var(--s-font-black)}.s-leading-none{line-height:var(--s-leading-none)}.s-leading-tight{line-height:var(--s-leading-tight)}.s-leading-snug{line-height:var(--s-leading-snug)}.s-leading-normal{line-height:var(--s-leading-normal)}.s-leading-relaxed{line-height:var(--s-leading-relaxed)}.s-leading-loose{line-height:var(--s-leading-loose)}.s-tracking-tighter{letter-spacing:var(--s-tracking-tighter)}.s-tracking-tight{letter-spacing:var(--s-tracking-tight)}.s-tracking-normal{letter-spacing:var(--s-tracking-normal)}.s-tracking-wide{letter-spacing:var(--s-tracking-wide)}.s-tracking-wider{letter-spacing:var(--s-tracking-wider)}.s-tracking-widest{letter-spacing:var(--s-tracking-widest)}.s-text-left{text-align:left}.s-text-center{text-align:center}.s-text-right{text-align:right}.s-text-justify{text-align:justify}.s-text-start{text-align:start}.s-text-end{text-align:end}.s-align-baseline{vertical-align:baseline}.s-align-top{vertical-align:top}.s-align-middle{vertical-align:middle}.s-align-bottom{vertical-align:bottom}.s-align-text-top{vertical-align:text-top}.s-align-text-bottom{vertical-align:text-bottom}.s-align-sub{vertical-align:sub}.s-align-super{vertical-align:super}.s-underline{text-decoration-line:underline}.s-overline{text-decoration-line:overline}.s-line-through{text-decoration-line:line-through}.s-no-underline{text-decoration-line:none}.s-decoration-solid{text-decoration-style:solid}.s-decoration-double{text-decoration-style:double}.s-decoration-dotted{text-decoration-style:dotted}.s-decoration-dashed{text-decoration-style:dashed}.s-decoration-wavy{text-decoration-style:wavy}.s-uppercase{text-transform:uppercase}.s-lowercase{text-transform:lowercase}.s-capitalize{text-transform:capitalize}.s-normal-case{text-transform:none}.s-text-ellipsis{text-overflow:ellipsis}.s-text-clip{text-overflow:clip}.s-text-wrap{text-wrap:wrap}.s-text-nowrap{text-wrap:nowrap}.s-text-balance{text-wrap:balance}.s-text-pretty{text-wrap:pretty}.s-whitespace-normal{white-space:normal}.s-whitespace-nowrap{white-space:nowrap}.s-whitespace-pre{white-space:pre}.s-whitespace-pre-line{white-space:pre-line}.s-whitespace-pre-wrap{white-space:pre-wrap}.s-whitespace-break-spaces{white-space:break-spaces}.s-break-normal{overflow-wrap:normal;word-break:normal}.s-break-words{overflow-wrap:break-word}.s-break-all{word-break:break-all}.s-break-keep{word-break:keep-all}.s-hyphens-none{hyphens:none}.s-hyphens-manual{hyphens:manual}.s-hyphens-auto{hyphens:auto}.s-text-primary{color:var(--s-text-primary)}.s-text-secondary{color:var(--s-text-secondary)}.s-text-tertiary{color:var(--s-text-tertiary)}.s-text-inverse{color:var(--s-text-inverse)}.s-text-success{color:var(--s-state-success)}.s-text-warning{color:var(--s-state-warning)}.s-text-danger{color:var(--s-state-danger)}.s-link{color:var(--s-interactive-primary);text-underline-offset:2px;text-decoration:underline;&:hover{color:var(--s-interactive-primary-hover)}}.s-list-none{list-style-type:none}.s-list-disc{list-style-type:disc}.s-list-decimal{list-style-type:decimal}.s-list-inside{list-style-position:inside}.s-list-outside{list-style-position:outside}.s-opacity-0{opacity:0}.s-opacity-5{opacity:.05}.s-opacity-10{opacity:.1}.s-opacity-20{opacity:.2}.s-opacity-25{opacity:.25}.s-opacity-30{opacity:.3}.s-opacity-40{opacity:.4}.s-opacity-50{opacity:.5}.s-opacity-60{opacity:.6}.s-opacity-70{opacity:.7}.s-opacity-75{opacity:.75}.s-opacity-80{opacity:.8}.s-opacity-90{opacity:.9}.s-opacity-95{opacity:.95}.s-opacity-100{opacity:1}}
+@layer shift.reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{color-scheme:light dark;font-size:clamp(.9375rem,.875rem + .25vi,1rem);@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth}-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{min-height:100dvh;line-height:1.5;font-family:var(--s-font-sans,ui-sans-serif,system-ui,sans-serif);background-color:var(--s-surface-base);color:var(--s-text-primary)}img,picture,video,canvas,svg{max-width:100%;height:auto;display:block}input,button,textarea,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.2}p{text-wrap:pretty}ul,ol{padding:0;list-style:none}a{color:var(--s-interactive-primary);text-decoration:none;&:hover{text-decoration:underline}}:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}:focus:not(:focus-visible){outline:none}#root,#__next,#app{isolation:isolate;min-height:100dvh}table{border-collapse:collapse;border-spacing:0}pre,code{font-family:var(--s-font-mono,ui-monospace,monospace)}pre{overflow-x:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (prefers-contrast:more){*{border-color:currentColor!important}}@media print{*,:before,:after{color:#000!important;box-shadow:none!important;text-shadow:none!important;background:0 0!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href)")"}pre{white-space:pre-wrap!important}@page{margin:2cm}}}@layer shift.tokens{@layer shift.tokens{:root{color-scheme:light dark;--shift-hue-primary:250;--shift-hue-secondary:180;--shift-hue-accent:30;--shift-hue-success:145;--shift-hue-warning:45;--shift-hue-danger:25;--shift-hue-neutral:250;--s-primary-50:oklch(.9778 .0108 var(--shift-hue-primary));--s-primary-100:oklch(.9356 .0321 var(--shift-hue-primary));--s-primary-200:oklch(.8811 .0636 var(--shift-hue-primary));--s-primary-300:oklch(.8267 .0951 var(--shift-hue-primary));--s-primary-400:oklch(.7422 .1211 var(--shift-hue-primary));--s-primary-500:oklch(.6478 .1472 var(--shift-hue-primary));--s-primary-600:oklch(.5733 .1383 var(--shift-hue-primary));--s-primary-700:oklch(.4689 .1178 var(--shift-hue-primary));--s-primary-800:oklch(.3944 .0894 var(--shift-hue-primary));--s-primary-900:oklch(.32 .072 var(--shift-hue-primary));--s-primary-950:oklch(.2378 .054 var(--shift-hue-primary));--s-secondary-50:oklch(.9778 .0108 var(--shift-hue-secondary));--s-secondary-100:oklch(.9356 .0321 var(--shift-hue-secondary));--s-secondary-200:oklch(.8811 .0636 var(--shift-hue-secondary));--s-secondary-300:oklch(.8267 .0951 var(--shift-hue-secondary));--s-secondary-400:oklch(.7422 .1211 var(--shift-hue-secondary));--s-secondary-500:oklch(.6478 .1472 var(--shift-hue-secondary));--s-secondary-600:oklch(.5733 .1383 var(--shift-hue-secondary));--s-secondary-700:oklch(.4689 .1178 var(--shift-hue-secondary));--s-secondary-800:oklch(.3944 .0894 var(--shift-hue-secondary));--s-secondary-900:oklch(.32 .072 var(--shift-hue-secondary));--s-secondary-950:oklch(.2378 .054 var(--shift-hue-secondary));--s-accent-50:oklch(.9778 .0108 var(--shift-hue-accent));--s-accent-100:oklch(.9356 .0321 var(--shift-hue-accent));--s-accent-200:oklch(.8811 .0636 var(--shift-hue-accent));--s-accent-300:oklch(.8267 .0951 var(--shift-hue-accent));--s-accent-400:oklch(.7422 .1211 var(--shift-hue-accent));--s-accent-500:oklch(.6478 .1472 var(--shift-hue-accent));--s-accent-600:oklch(.5733 .1383 var(--shift-hue-accent));--s-accent-700:oklch(.4689 .1178 var(--shift-hue-accent));--s-accent-800:oklch(.3944 .0894 var(--shift-hue-accent));--s-accent-900:oklch(.32 .072 var(--shift-hue-accent));--s-accent-950:oklch(.2378 .054 var(--shift-hue-accent));--s-success-50:oklch(.9778 .0108 var(--shift-hue-success));--s-success-100:oklch(.9356 .0321 var(--shift-hue-success));--s-success-200:oklch(.8811 .0636 var(--shift-hue-success));--s-success-300:oklch(.8267 .0951 var(--shift-hue-success));--s-success-400:oklch(.7422 .1211 var(--shift-hue-success));--s-success-500:oklch(.6478 .1472 var(--shift-hue-success));--s-success-600:oklch(.5733 .1383 var(--shift-hue-success));--s-success-700:oklch(.4689 .1178 var(--shift-hue-success));--s-success-800:oklch(.3944 .0894 var(--shift-hue-success));--s-success-900:oklch(.32 .072 var(--shift-hue-success));--s-success-950:oklch(.2378 .054 var(--shift-hue-success));--s-warning-50:oklch(.9778 .0108 var(--shift-hue-warning));--s-warning-100:oklch(.9356 .0321 var(--shift-hue-warning));--s-warning-200:oklch(.8811 .0636 var(--shift-hue-warning));--s-warning-300:oklch(.8267 .0951 var(--shift-hue-warning));--s-warning-400:oklch(.7422 .1211 var(--shift-hue-warning));--s-warning-500:oklch(.6478 .1472 var(--shift-hue-warning));--s-warning-600:oklch(.5733 .1383 var(--shift-hue-warning));--s-warning-700:oklch(.4689 .1178 var(--shift-hue-warning));--s-warning-800:oklch(.3944 .0894 var(--shift-hue-warning));--s-warning-900:oklch(.32 .072 var(--shift-hue-warning));--s-warning-950:oklch(.2378 .054 var(--shift-hue-warning));--s-danger-50:oklch(.9778 .0108 var(--shift-hue-danger));--s-danger-100:oklch(.9356 .0321 var(--shift-hue-danger));--s-danger-200:oklch(.8811 .0636 var(--shift-hue-danger));--s-danger-300:oklch(.8267 .0951 var(--shift-hue-danger));--s-danger-400:oklch(.7422 .1211 var(--shift-hue-danger));--s-danger-500:oklch(.6478 .1472 var(--shift-hue-danger));--s-danger-600:oklch(.5733 .1383 var(--shift-hue-danger));--s-danger-700:oklch(.4689 .1178 var(--shift-hue-danger));--s-danger-800:oklch(.3944 .0894 var(--shift-hue-danger));--s-danger-900:oklch(.32 .072 var(--shift-hue-danger));--s-danger-950:oklch(.2378 .054 var(--shift-hue-danger));--s-neutral-50:oklch(.9778 .0054 var(--shift-hue-neutral));--s-neutral-100:oklch(.9356 .0072 var(--shift-hue-neutral));--s-neutral-200:oklch(.8811 .009 var(--shift-hue-neutral));--s-neutral-300:oklch(.8267 .0099 var(--shift-hue-neutral));--s-neutral-400:oklch(.7422 .0108 var(--shift-hue-neutral));--s-neutral-500:oklch(.6478 .0118 var(--shift-hue-neutral));--s-neutral-600:oklch(.5733 .0108 var(--shift-hue-neutral));--s-neutral-700:oklch(.4689 .0099 var(--shift-hue-neutral));--s-neutral-800:oklch(.3944 .009 var(--shift-hue-neutral));--s-neutral-900:oklch(.32 .0081 var(--shift-hue-neutral));--s-neutral-950:oklch(.2378 .0072 var(--shift-hue-neutral));--s-surface-base:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-surface-raised:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-surface-sunken:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-surface-overlay:light-dark(var(--s-neutral-900),var(--s-neutral-100));--s-text-primary:light-dark(var(--s-neutral-900),var(--s-neutral-50));--s-text-secondary:light-dark(var(--s-neutral-700),var(--s-neutral-300));--s-text-tertiary:light-dark(var(--s-neutral-500),var(--s-neutral-500));--s-text-inverse:light-dark(var(--s-neutral-50),var(--s-neutral-900));--s-border-default:light-dark(var(--s-neutral-200),var(--s-neutral-800));--s-border-muted:light-dark(var(--s-neutral-100),var(--s-neutral-900));--s-border-strong:light-dark(var(--s-neutral-400),var(--s-neutral-600));--s-interactive-primary:light-dark(var(--s-primary-700),var(--s-primary-300));--s-interactive-primary-hover:light-dark(var(--s-primary-800),var(--s-primary-200));--s-interactive-primary-active:light-dark(var(--s-primary-900),var(--s-primary-100));--s-interactive-secondary:light-dark(var(--s-secondary-700),var(--s-secondary-300));--s-state-success:light-dark(var(--s-success-700),var(--s-success-300));--s-state-success-bg:light-dark(var(--s-success-100),var(--s-success-900));--s-state-warning:light-dark(var(--s-warning-700),var(--s-warning-300));--s-state-warning-bg:light-dark(var(--s-warning-100),var(--s-warning-900));--s-state-danger:light-dark(var(--s-danger-700),var(--s-danger-300));--s-state-danger-bg:light-dark(var(--s-danger-100),var(--s-danger-900));--s-focus-ring:light-dark(var(--s-primary-500),var(--s-primary-400));--s-focus-ring-offset:light-dark(var(--s-neutral-50),var(--s-neutral-950));--s-space-0:0;--s-space-1:.25rem;--s-space-2:.5rem;--s-space-3:.75rem;--s-space-4:1rem;--s-space-5:1.25rem;--s-space-6:1.5rem;--s-space-7:1.75rem;--s-space-8:2rem;--s-space-9:2.25rem;--s-space-10:2.5rem;--s-space-11:2.75rem;--s-space-12:3rem;--s-space-14:3.5rem;--s-space-16:4rem;--s-space-20:5rem;--s-space-24:6rem;--s-space-28:7rem;--s-space-32:8rem;--s-space-36:9rem;--s-space-40:10rem;--s-space-44:11rem;--s-space-48:12rem;--s-space-52:13rem;--s-space-56:14rem;--s-space-60:15rem;--s-space-64:16rem;--s-space-72:18rem;--s-space-80:20rem;--s-space-96:24rem;--s-space-px:1px;--s-space-0_5:.125rem;--s-space-1_5:.375rem;--s-space-2_5:.625rem;--s-space-3_5:.875rem;--s-radius-none:0;--s-radius-sm:.125rem;--s-radius-base:.25rem;--s-radius-md:.375rem;--s-radius-lg:.5rem;--s-radius-xl:.75rem;--s-radius-2xl:1rem;--s-radius-3xl:1.5rem;--s-radius-full:9999px;--s-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--s-font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--s-font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--s-text-xs:clamp(.6875rem,.625rem + .25vi,.75rem);--s-text-sm:clamp(.8125rem,.75rem + .25vi,.875rem);--s-text-base:clamp(.9375rem,.875rem + .25vi,1rem);--s-text-lg:clamp(1.0625rem,1rem + .25vi,1.125rem);--s-text-xl:clamp(1.1875rem,1.0625rem + .5vi,1.25rem);--s-text-2xl:clamp(1.4375rem,1.25rem + .75vi,1.5rem);--s-text-3xl:clamp(1.75rem,1.5rem + 1vi,1.875rem);--s-text-4xl:clamp(2.125rem,1.75rem + 1.5vi,2.25rem);--s-text-5xl:clamp(2.75rem,2.25rem + 2vi,3rem);--s-leading-none:1;--s-leading-tight:1.25;--s-leading-snug:1.375;--s-leading-normal:1.5;--s-leading-relaxed:1.625;--s-leading-loose:2;--s-font-thin:100;--s-font-extralight:200;--s-font-light:300;--s-font-normal:400;--s-font-medium:500;--s-font-semibold:600;--s-font-bold:700;--s-font-extrabold:800;--s-font-black:900;--s-tracking-tighter:-.05em;--s-tracking-tight:-.025em;--s-tracking-normal:0;--s-tracking-wide:.025em;--s-tracking-wider:.05em;--s-tracking-widest:.1em;--s-duration-75:75ms;--s-duration-100:.1s;--s-duration-150:.15s;--s-duration-200:.2s;--s-duration-300:.3s;--s-duration-500:.5s;--s-duration-700:.7s;--s-duration-1000:1s;--s-ease-linear:linear;--s-ease-in:cubic-bezier(.4,0,1,1);--s-ease-out:cubic-bezier(0,0,.2,1);--s-ease-in-out:cubic-bezier(.4,0,.2,1);--s-ease-bounce:cubic-bezier(.68,-.55,.265,1.55);--s-shadow-sm:0 1px 2px 0 #0000000d;--s-shadow-base:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--s-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--s-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--s-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--s-shadow-2xl:0 25px 50px -12px #00000040;--s-shadow-inner:inset 0 2px 4px 0 #0000000d;--s-shadow-none:0 0 #0000}}}@layer shift.core{:where([s-surface]){--_surface-bg:var(--s-surface-base);--_surface-padding:var(--s-space-4);--_surface-radius:var(--s-radius-lg);background-color:var(--_surface-bg);padding:var(--_surface-padding);border-radius:var(--_surface-radius);color:var(--s-text-primary);container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_surface-bg)clamp(.15,calc((.55 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_surface-bg))}}[s-surface=flat]{--_surface-bg:var(--s-surface-base)}[s-surface=sunken]{--_surface-bg:var(--s-surface-sunken);box-shadow:var(--s-shadow-inner)}[s-surface=raised]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-md)}[s-surface=floating]{--_surface-bg:var(--s-surface-raised);box-shadow:var(--s-shadow-xl)}[s-surface][s-bordered]{border:1px solid var(--s-border-default)}[s-surface][s-interactive]{cursor:pointer;transition:transform var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);&:hover{box-shadow:var(--s-shadow-lg);transform:translateY(-2px)}&:active{box-shadow:var(--s-shadow-sm);transform:translateY(0)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}}[s-surface=primary]{--_surface-bg:var(--s-primary-700);background-color:#06a;background-color:var(--_surface-bg);color:#fff}[s-surface=secondary]{--_surface-bg:var(--s-secondary-700);background-color:#64a;background-color:var(--_surface-bg);color:#fff}[s-surface=accent]{--_surface-bg:var(--s-accent-700);background-color:#a46;background-color:var(--_surface-bg);color:#fff}[s-surface=success]{--_surface-bg:var(--s-state-success-bg);background-color:#d4edda;background-color:var(--_surface-bg);border-left:4px solid var(--s-state-success);color:#1a1a1a}[s-surface=warning]{--_surface-bg:var(--s-state-warning-bg);background-color:#fff3cd;background-color:var(--_surface-bg);border-left:4px solid var(--s-state-warning);color:#1a1a1a}[s-surface=danger]{--_surface-bg:var(--s-state-danger-bg);background-color:#f8d7da;background-color:var(--_surface-bg);border-left:4px solid var(--s-state-danger);color:#1a1a1a}@container (width<=20rem){:where([s-surface]){--_surface-padding:var(--s-space-3)}}@container (width>=40rem){:where([s-surface]){--_surface-padding:var(--s-space-6)}}:where([s-btn]){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);--_btn-border:transparent;justify-content:center;align-items:center;gap:var(--s-space-2);padding:var(--s-space-2)var(--s-space-4);border-radius:var(--s-radius-md);font-weight:var(--s-font-semibold);font-size:var(--s-text-sm);white-space:nowrap;background-color:var(--_btn-bg);color:var(--_btn-text);border:1px solid var(--_btn-border);line-height:1;display:inline-flex;@supports (color:oklch(from red l c h)){color:oklch(from var(--_btn-bg)clamp(.15,calc((.55 - l)*1000 + .15),.95)0 0)}@supports (color:contrast-color(red)){color:contrast-color(var(--_btn-bg))}transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out),transform var(--s-duration-100)var(--s-ease-out);cursor:pointer;user-select:none&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active);transform:scale(.98)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}}[s-btn=primary]{--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary-hover)}&:active:not(:disabled){--_btn-bg:var(--s-interactive-primary-active)}}[s-btn=secondary]{--_btn-bg:var(--s-surface-raised);--_btn-text:var(--s-text-primary);--_btn-border:var(--s-border-default);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=ghost]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-surface-sunken)}}[s-btn=link]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:transparent;color:var(--_btn-text);text-underline-offset:2px;text-decoration:underline;&:hover:not(:disabled){--_btn-text:var(--s-interactive-primary-hover);color:var(--_btn-text)}}[s-btn=outline]{--_btn-bg:transparent;--_btn-text:var(--s-interactive-primary);--_btn-border:var(--s-interactive-primary);color:var(--_btn-text);&:hover:not(:disabled){--_btn-bg:var(--s-interactive-primary);--_btn-text:var(--s-text-inverse);color:var(--_btn-text)}}[s-btn=danger]{--_btn-bg:var(--s-state-danger);&:hover:not(:disabled){--_btn-bg:var(--s-danger-800)}&:active:not(:disabled){--_btn-bg:var(--s-danger-900)}}[s-btn=success]{--_btn-bg:var(--s-state-success);&:hover:not(:disabled){--_btn-bg:var(--s-success-800)}&:active:not(:disabled){--_btn-bg:var(--s-success-900)}}[s-btn=warning]{--_btn-bg:var(--s-state-warning);&:hover:not(:disabled){--_btn-bg:var(--s-warning-800)}&:active:not(:disabled){--_btn-bg:var(--s-warning-900)}}[s-btn][s-size=sm]{padding:var(--s-space-1)var(--s-space-3);font-size:var(--s-text-xs)}[s-btn][s-size=lg]{padding:var(--s-space-3)var(--s-space-6);font-size:var(--s-text-base)}[s-btn][s-size=xl]{padding:var(--s-space-4)var(--s-space-8);font-size:var(--s-text-lg)}[s-btn][s-icon]{padding:var(--s-space-2);aspect-ratio:1}[s-btn][s-block]{width:100%}[s-btn][s-loading]{color:#0000;pointer-events:none;position:relative;&:after{content:"";border:2px solid var(--s-text-inverse);border-right-color:#0000;border-radius:50%;width:1em;height:1em;margin:auto;animation:.6s linear infinite s-btn-spin;position:absolute;inset:0}}@keyframes s-btn-spin{to{transform:rotate(360deg)}}[s-btn-group]{display:inline-flex;&>[s-btn]{border-radius:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}&:not(:last-child){border-right:none}}}:where([s-card]){--_card-bg:var(--s-surface-raised);--_card-border:var(--s-border-muted);--_card-radius:var(--s-radius-xl);--_card-shadow:var(--s-shadow-base);--_card-padding:var(--s-space-4);background-color:var(--_card-bg);border:1px solid var(--_card-border);border-radius:var(--_card-radius);box-shadow:var(--_card-shadow);color:var(--s-text-primary);flex-direction:column;display:flex;overflow:hidden;container-type:inline-size;@supports (color:oklch(from red l c h)){color:oklch(from var(--_card-bg)clamp(.15,calc((.55 - l)*1000 + .15),.95)0 0)}}[s-card-header]{padding:var(--_card-padding,var(--s-space-4));border-bottom:1px solid var(--_card-border,var(--s-border-muted))}[s-card-body]{padding:var(--_card-padding,var(--s-space-4));flex:1}[s-card-footer]{padding:var(--_card-padding,var(--s-space-4));border-top:1px solid var(--_card-border,var(--s-border-muted))}[s-card-media]{aspect-ratio:16/9;overflow:hidden;&>img{object-fit:cover;width:100%;height:100%}}[s-card-title]{font-size:var(--s-text-lg);font-weight:var(--s-font-semibold);line-height:var(--s-leading-tight);margin-bottom:var(--s-space-1)}[s-card-subtitle]{font-size:var(--s-text-sm);color:var(--s-text-secondary)}[s-card=flat]{--_card-shadow:none;--_card-border:var(--s-border-default)}[s-card=elevated],[s-card][s-surface=raised]{--_card-shadow:var(--s-shadow-lg);--_card-border:transparent}[s-card][s-surface=floating]{--_card-shadow:var(--s-shadow-xl);--_card-border:transparent}[s-card=outline]{--_card-shadow:none;--_card-border:var(--s-border-strong);--_card-bg:transparent}[s-card][s-interactive]{cursor:pointer;transition:transform var(--s-duration-200)var(--s-ease-out),box-shadow var(--s-duration-200)var(--s-ease-out);&:hover{--_card-shadow:var(--s-shadow-xl);transform:translateY(-4px)}&:active{transform:translateY(-2px)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}}[s-card][s-link]{position:relative;& a:after{content:"";position:absolute;inset:0}}[s-card][s-horizontal]{flex-direction:row;& [s-card-media]{aspect-ratio:1;flex-shrink:0;width:33%}}@container (width<=24rem){[s-card][s-horizontal]{flex-direction:column;& [s-card-media]{aspect-ratio:16/9;width:100%}}}[s-card][s-size=sm]{--_card-padding:var(--s-space-3);--_card-radius:var(--s-radius-lg)}[s-card][s-size=lg]{--_card-padding:var(--s-space-6)}[s-card=feature]{text-align:center;--_card-padding:var(--s-space-6)}[s-card-icon]{font-size:var(--s-text-4xl);margin-bottom:var(--s-space-4)}[s-card-grid]{gap:var(--s-space-4);grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));display:grid}[s-card-stack]{gap:var(--s-space-4);flex-direction:column;display:flex}:where([s-input]){--_input-bg:var(--s-surface-base);--_input-border:var(--s-border-default);--_input-text:var(--s-text-primary);--_input-placeholder:var(--s-text-tertiary);--_input-radius:var(--s-radius-md);appearance:none;width:100%;padding:var(--s-space-2)var(--s-space-3);background-color:var(--_input-bg);border:2px solid var(--_input-border);border-radius:var(--_input-radius);color:var(--_input-text);font-size:var(--s-text-sm);line-height:var(--s-leading-normal);transition:border-color var(--s-duration-150)var(--s-ease-out),box-shadow var(--s-duration-150)var(--s-ease-out);display:block;&::placeholder{color:var(--_input-placeholder)}&:hover:not(:disabled):not(:focus-visible){--_input-border:var(--s-border-strong)}&:focus-visible{--_input-border:var(--s-interactive-primary);outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed;background-color:var(--s-surface-sunken)}&:invalid:not(:placeholder-shown),&[aria-invalid=true]{--_input-border:var(--s-state-danger);&:focus-visible{outline-color:var(--s-state-danger)}}}[s-input][s-size=sm]{padding:var(--s-space-1)var(--s-space-2);font-size:var(--s-text-xs)}[s-input][s-size=lg]{padding:var(--s-space-3)var(--s-space-4);font-size:var(--s-text-base)}textarea[s-input]{resize:vertical;min-height:6rem}select[s-input]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s-space-3)center;padding-right:var(--s-space-10)}[s-input-group]{display:flex;&>[s-input]{border-radius:0;flex:1;min-width:0;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md)}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0}}&>[s-input-addon]{padding:var(--s-space-2)var(--s-space-3);background-color:var(--s-surface-sunken);border:2px solid var(--s-border-default);color:var(--s-text-secondary);font-size:var(--s-text-sm);white-space:nowrap;align-items:center;display:flex;&:first-child{border-radius:var(--s-radius-md)0 0 var(--s-radius-md);border-right:none}&:last-child{border-radius:0 var(--s-radius-md)var(--s-radius-md)0;border-left:none}}}[s-field]{gap:var(--s-space-1);flex-direction:column;display:flex}[s-field-label]{font-size:var(--s-text-sm);font-weight:var(--s-font-medium);color:var(--s-text-primary)}[s-field-hint]{font-size:var(--s-text-xs);color:var(--s-text-secondary)}[s-field-error]{font-size:var(--s-text-xs);color:var(--s-state-danger)}[s-checkbox],[s-radio]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;border:2px solid var(--s-border-default);background-color:var(--s-surface-base);cursor:pointer;width:1.25rem;height:1.25rem;transition:background-color var(--s-duration-150)var(--s-ease-out),border-color var(--s-duration-150)var(--s-ease-out);&:checked{background-color:var(--s-interactive-primary);border-color:var(--s-interactive-primary)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}[s-checkbox] input{border-radius:var(--s-radius-sm);&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:.75rem}}[s-radio] input{border-radius:50%;&:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='white'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat}}[s-toggle]{align-items:center;gap:var(--s-space-2);cursor:pointer;display:inline-flex;& input{appearance:none;background-color:var(--s-border-default);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--s-duration-200)var(--s-ease-out);border-radius:9999px;position:relative;&:after{content:"";background-color:var(--s-surface-base);width:calc(1.5rem - 4px);height:calc(1.5rem - 4px);box-shadow:var(--s-shadow-sm);transition:transform var(--s-duration-200)var(--s-ease-out);border-radius:50%;position:absolute;top:2px;left:2px}&:checked{background-color:var(--s-interactive-primary);&:after{transform:translate(1rem)}}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:disabled{opacity:.5;cursor:not-allowed}}}dialog[s-modal]:not([open]){display:none}:where(dialog[s-modal]){--_modal-bg:var(--s-surface-raised);--_modal-border:var(--s-border-muted);--_modal-radius:var(--s-radius-xl);--_modal-shadow:var(--s-shadow-2xl);--_modal-padding:var(--s-space-4);--_modal-max-width:32rem;width:min(var(--_modal-max-width),calc(100vw - var(--s-space-4)*2));max-height:calc(100vh - var(--s-space-4)*2);max-width:var(--_modal-max-width);background-color:var(--_modal-bg);border-radius:var(--_modal-radius);box-shadow:var(--_modal-shadow);border:none;margin:auto;padding:0;&[open]{flex-direction:column;display:flex}color:var(--s-text-primary)}dialog[s-modal][open]{animation:s-modal-scale-in var(--s-duration-200)var(--s-ease-out)}dialog[s-modal]:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}@keyframes s-modal-scale-in{0%{opacity:0;transform:scale(.95)translateY(-10px)}to{opacity:1;transform:scale(1)translateY(0)}}dialog[s-modal]::backdrop{backdrop-filter:blur(4px);animation:s-modal-backdrop-in var(--s-duration-200)var(--s-ease-out);background:oklch(0% 0 0/.5)}@keyframes s-modal-backdrop-in{0%{opacity:0}to{opacity:1}}dialog[s-modal][s-size=sm]{--_modal-max-width:25rem}dialog[s-modal][s-size=lg]{--_modal-max-width:43.75rem}dialog[s-modal][s-size=full]{--_modal-max-width:100vw;--_modal-radius:0;width:100vw;height:100vh;max-height:100vh}dialog[s-modal][s-position=top]{margin-top:var(--s-space-8);margin-bottom:auto}dialog[s-modal][s-position=bottom]{margin-top:auto;margin-bottom:var(--s-space-8)}dialog[s-modal][s-position=left]{margin-left:var(--s-space-8);margin-right:auto}dialog[s-modal][s-position=right]{margin-left:auto;margin-right:var(--s-space-8)}:where([s-modal-header]){justify-content:space-between;align-items:center;gap:var(--s-space-4);padding:var(--_modal-padding,var(--s-space-4));border-bottom:1px solid var(--s-border-muted);display:flex;&>h1,&>h2,&>h3{font-size:var(--s-text-lg);font-weight:var(--s-font-semibold);color:inherit;margin:0;line-height:1.25}}:where([s-modal-body]){padding:var(--_modal-padding,var(--s-space-4));overscroll-behavior:contain;flex:1;overflow-y:auto}:where([s-modal-footer]){justify-content:flex-end;align-items:center;gap:var(--s-space-3);padding:var(--_modal-padding,var(--s-space-4));border-top:1px solid var(--s-border-muted);display:flex}:where([s-modal-close]){cursor:pointer;border-radius:var(--s-radius-full);min-width:2.75rem;min-height:2.75rem;font-size:var(--s-text-xl);color:var(--s-text-secondary);transition:background-color var(--s-duration-150)var(--s-ease-out),color var(--s-duration-150)var(--s-ease-out);background:0 0;border:none;justify-content:center;align-items:center;padding:0;line-height:1;display:inline-flex;&:hover{background-color:var(--s-surface-sunken);color:var(--s-text-primary)}&:focus-visible{outline:2px solid var(--s-focus-ring);outline-offset:2px}&:active{background-color:var(--s-border-default)}}@media (forced-colors:active){dialog[s-modal]{border:2px solid canvastext}dialog[s-modal]::backdrop{backdrop-filter:none;background:#000000bf}[s-modal-header],[s-modal-footer]{border-color:canvastext}[s-modal-close]{border:1px solid buttontext}}:where([s-prose]){--_prose-body:var(--s-text-base);--_prose-body-weight:var(--s-font-normal);--_prose-leading:var(--s-leading-relaxed);--_prose-link-color:var(--s-primary-600);--_prose-link-hover:var(--s-primary-700);--_prose-code-bg:var(--s-neutral-100);--_prose-code-color:var(--s-danger-600);--_prose-pre-bg:var(--s-neutral-900);--_prose-pre-color:var(--s-neutral-100);--_prose-border-color:var(--s-border-default);--_prose-quote-border:var(--s-primary-500);font-size:var(--_prose-body);font-weight:var(--_prose-body-weight);line-height:var(--_prose-leading);color:var(--s-text-primary);max-width:65ch}[s-prose=full]{max-width:none}:where([s-prose]) :where(h1,h2,h3,h4,h5,h6){color:var(--s-text-primary);font-weight:var(--s-font-bold);line-height:var(--s-leading-tight);margin-top:1.5em;margin-bottom:.5em}:where([s-prose]) :where(h1){font-size:var(--s-text-4xl);margin-top:0}:where([s-prose]) :where(h2){font-size:var(--s-text-3xl);border-bottom:1px solid var(--_prose-border-color);padding-bottom:.25em}:where([s-prose]) :where(h3){font-size:var(--s-text-2xl)}:where([s-prose]) :where(h4){font-size:var(--s-text-xl)}:where([s-prose]) :where(h5){font-size:var(--s-text-lg)}:where([s-prose]) :where(h6){font-size:var(--s-text-base);color:var(--s-text-secondary)}:where([s-prose]) :where(p){margin-bottom:1.25em}:where([s-prose]) :where(strong,b){font-weight:var(--s-font-semibold);color:var(--s-text-primary)}:where([s-prose]) :where(em,i){font-style:italic}:where([s-prose]) :where(small){font-size:var(--s-text-sm)}:where([s-prose]) :where(a){color:var(--_prose-link-color);text-underline-offset:2px;transition:color var(--s-duration-150)var(--s-ease-out);text-decoration:underline 1px;&:hover{color:var(--_prose-link-hover)}}:where([s-prose]) :where(ul,ol){margin-bottom:1.25em;padding-left:1.5em}:where([s-prose]) :where(ul){list-style-type:disc}:where([s-prose]) :where(ol){list-style-type:decimal}:where([s-prose]) :where(li){margin-bottom:.5em;&::marker{color:var(--s-text-tertiary)}}:where([s-prose]) :where(li>ul,li>ol){margin-top:.5em;margin-bottom:0}:where([s-prose]) :where(dl){margin-bottom:1.25em}:where([s-prose]) :where(dt){font-weight:var(--s-font-semibold);margin-top:1em}:where([s-prose]) :where(dd){margin-bottom:.5em;margin-left:1.5em}:where([s-prose]) :where(blockquote){border-left:4px solid var(--_prose-quote-border);background-color:var(--s-surface-sunken);border-radius:0 var(--s-radius-md)var(--s-radius-md)0;color:var(--s-text-secondary);margin:1.5em 0;padding:.5em 1em;font-style:italic;& p:last-child{margin-bottom:0}}:where([s-prose]) :where(code){font-family:var(--s-font-mono);background-color:var(--_prose-code-bg);color:var(--_prose-code-color);border-radius:var(--s-radius-sm);padding:.125em .375em;font-size:.875em}:where([s-prose]) :where(pre){background-color:var(--_prose-pre-bg);color:var(--_prose-pre-color);border-radius:var(--s-radius-lg);font-size:var(--s-text-sm);line-height:var(--s-leading-normal);margin:1.5em 0;padding:1em;overflow-x:auto;& code{color:inherit;font-size:inherit;background:0 0;border-radius:0;padding:0}}:where([s-prose]) :where(kbd){font-family:var(--s-font-mono);background-color:var(--s-neutral-200);color:var(--s-text-primary);border-radius:var(--s-radius-sm);border:1px solid var(--s-neutral-300);box-shadow:0 1px 0 var(--s-neutral-400);padding:.125em .375em;font-size:.875em}:where([s-prose]) :where(hr){border:none;border-top:1px solid var(--_prose-border-color);margin:2em 0}:where([s-prose]) :where(img){border-radius:var(--s-radius-lg);max-width:100%;height:auto}:where([s-prose]) :where(figure){margin:1.5em 0}:where([s-prose]) :where(figcaption){font-size:var(--s-text-sm);color:var(--s-text-secondary);text-align:center;margin-top:.75em}:where([s-prose]) :where(table){border-collapse:collapse;width:100%;font-size:var(--s-text-sm);margin:1.5em 0}:where([s-prose]) :where(thead){border-bottom:2px solid var(--_prose-border-color)}:where([s-prose]) :where(th){font-weight:var(--s-font-semibold);text-align:left;background-color:var(--s-surface-sunken);padding:.75em 1em}:where([s-prose]) :where(td){border-bottom:1px solid var(--_prose-border-color);padding:.75em 1em}:where([s-prose]) :where(tbody tr:hover){background-color:var(--s-surface-sunken)}[s-prose][s-size=sm]{--_prose-body:var(--s-text-sm)}[s-prose][s-size=lg]{--_prose-body:var(--s-text-lg)}@media (prefers-color-scheme:dark){:where([s-prose]){--_prose-link-color:var(--s-primary-400);--_prose-link-hover:var(--s-primary-300);--_prose-code-bg:var(--s-neutral-800);--_prose-code-color:var(--s-danger-400);--_prose-pre-bg:var(--s-neutral-950);--_prose-pre-color:var(--s-neutral-200)}:where([s-prose]) :where(kbd){background-color:var(--s-neutral-700);border-color:var(--s-neutral-600);box-shadow:0 1px 0 var(--s-neutral-500)}}:root[style*="color-scheme: dark"] :where([s-prose]),:root[style*=color-scheme\:dark] :where([s-prose]){--_prose-link-color:var(--s-primary-400);--_prose-link-hover:var(--s-primary-300);--_prose-code-bg:var(--s-neutral-800);--_prose-code-color:var(--s-danger-400);--_prose-pre-bg:var(--s-neutral-950);--_prose-pre-color:var(--s-neutral-200)}:where([s-skip-link]){--_skip-bg:var(--s-primary-600);--_skip-color:white;--_skip-radius:var(--s-radius-md);--_skip-shadow:var(--s-shadow-lg);--_skip-z:9999;z-index:var(--_skip-z);align-items:center;gap:var(--s-space-2);padding:var(--s-space-3)var(--s-space-6);background-color:var(--_skip-bg);color:var(--_skip-color);font-size:var(--s-text-sm);font-weight:var(--s-font-semibold);border-radius:var(--_skip-radius);box-shadow:var(--_skip-shadow);white-space:nowrap;transition:top var(--s-duration-200)var(--s-ease-out),opacity var(--s-duration-200)var(--s-ease-out);opacity:0;text-decoration:none;display:inline-flex;position:fixed;top:-100%;left:50%;transform:translate(-50%)}[s-skip-link]:focus,[s-skip-link]:focus-visible{top:var(--s-space-4);opacity:1;box-shadow:var(--_skip-shadow),0 0 0 3px white,0 0 0 5px var(--_skip-bg);outline:none}[s-skip-link-group]{z-index:9999;align-items:center;gap:var(--s-space-2);padding:var(--s-space-2);flex-direction:column;display:flex;position:fixed;top:0;left:50%;transform:translate(-50%)}[s-skip-link-group] [s-skip-link]{position:relative;top:-200%;left:0;transform:none}[s-skip-link-group] [s-skip-link]:focus,[s-skip-link-group] [s-skip-link]:focus-visible{top:0}[s-skip-link=secondary]{--_skip-bg:var(--s-neutral-800)}[s-skip-link=contrast]{--_skip-bg:var(--s-neutral-950);--_skip-color:var(--s-neutral-50)}@media (prefers-reduced-motion:reduce){[s-skip-link]{transition:none}}@media (prefers-color-scheme:dark){:where([s-skip-link]:not([s-skip-link=secondary]):not([s-skip-link=contrast])){--_skip-bg:var(--s-primary-500)}[s-skip-link]:focus,[s-skip-link]:focus-visible{box-shadow:var(--_skip-shadow),0 0 0 3px var(--s-neutral-900),0 0 0 5px var(--_skip-bg)}}:root[style*="color-scheme: dark"] :where([s-skip-link]:not([s-skip-link=secondary]):not([s-skip-link=contrast])),:root[style*=color-scheme\:dark] :where([s-skip-link]:not([s-skip-link=secondary]):not([s-skip-link=contrast])){--_skip-bg:var(--s-primary-500)}}@layer shift.utils{[s-flex]{display:flex}[s-flex=row]{flex-direction:row;display:flex}[s-flex=col]{flex-direction:column;display:flex}[s-flex=row-reverse]{flex-direction:row-reverse;display:flex}[s-flex=col-reverse]{flex-direction:column-reverse;display:flex}[s-flex=center]{justify-content:center;align-items:center;display:flex}[s-flex=stack]{flex-direction:column;display:flex}[s-flex=between]{justify-content:space-between;align-items:center;display:flex}[s-flex=end]{justify-content:flex-end;align-items:center;display:flex}[s-flex~=wrap]{flex-wrap:wrap}[s-flex~=nowrap]{flex-wrap:nowrap}[s-justify=start]{justify-content:flex-start}[s-justify=end]{justify-content:flex-end}[s-justify=center]{justify-content:center}[s-justify=between]{justify-content:space-between}[s-justify=around]{justify-content:space-around}[s-justify=evenly]{justify-content:space-evenly}[s-items=start]{align-items:flex-start}[s-items=end]{align-items:flex-end}[s-items=center]{align-items:center}[s-items=baseline]{align-items:baseline}[s-items=stretch]{align-items:stretch}[s-content=start]{align-content:flex-start}[s-content=end]{align-content:flex-end}[s-content=center]{align-content:center}[s-content=between]{align-content:space-between}[s-content=around]{align-content:space-around}[s-grid]{display:grid}[s-grid="1"]{grid-template-columns:repeat(1,minmax(0,1fr));display:grid}[s-grid="2"]{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}[s-grid="3"]{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}[s-grid="4"]{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}[s-grid="5"]{grid-template-columns:repeat(5,minmax(0,1fr));display:grid}[s-grid="6"]{grid-template-columns:repeat(6,minmax(0,1fr));display:grid}[s-grid="12"]{grid-template-columns:repeat(12,minmax(0,1fr));display:grid}[s-grid=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));display:grid}[s-grid=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));display:grid}[s-grid-rows="1"]{grid-template-rows:repeat(1,minmax(0,1fr))}[s-grid-rows="2"]{grid-template-rows:repeat(2,minmax(0,1fr))}[s-grid-rows="3"]{grid-template-rows:repeat(3,minmax(0,1fr))}[s-grid-rows="4"]{grid-template-rows:repeat(4,minmax(0,1fr))}[s-col-span="1"]{grid-column:span 1/span 1}[s-col-span="2"]{grid-column:span 2/span 2}[s-col-span="3"]{grid-column:span 3/span 3}[s-col-span="4"]{grid-column:span 4/span 4}[s-col-span="6"]{grid-column:span 6/span 6}[s-col-span="12"]{grid-column:span 12/span 12}[s-col-span=full]{grid-column:1/-1}[s-row-span="1"]{grid-row:span 1/span 1}[s-row-span="2"]{grid-row:span 2/span 2}[s-row-span="3"]{grid-row:span 3/span 3}[s-row-span=full]{grid-row:1/-1}[s-gap]{gap:var(--s-space-4)}[s-gap=xs]{gap:var(--s-space-1)}[s-gap=sm]{gap:var(--s-space-2)}[s-gap=md]{gap:var(--s-space-4)}[s-gap=lg]{gap:var(--s-space-6)}[s-gap=xl]{gap:var(--s-space-8)}[s-gap=none]{gap:0}[s-container]{width:100%;padding-inline:var(--s-space-4);max-width:var(--s-container-max,80rem);margin-inline:auto}[s-container=sm]{max-width:40rem}[s-container=md]{max-width:48rem}[s-container=lg]{max-width:64rem}[s-container=xl]{max-width:80rem}[s-container=full]{max-width:100%}[s-container=prose]{max-width:65ch}[s-position=static]{position:static}[s-position=relative]{position:relative}[s-position=absolute]{position:absolute}[s-position=fixed]{position:fixed}[s-position=sticky]{position:sticky}[s-inset="0"]{inset:0}[s-inset=auto]{inset:auto}[s-display=block]{display:block}[s-display=inline]{display:inline}[s-display=inline-block]{display:inline-block}[s-display=contents]{display:contents}[s-display=inline-flex]{display:inline-flex}[s-display=inline-grid]{display:inline-grid}[s-hidden]{display:none}[s-visible]{visibility:visible}[s-invisible]{visibility:hidden}[s-collapse]{visibility:collapse}[s-sr-only]{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}[s-sr-only=focusable]:focus,[s-sr-only=focusable]:focus-within,[s-not-sr-only],[s-focus\:not-sr-only]:focus,[s-focus\:not-sr-only]:focus-visible,[s-focus-within\:not-sr-only]:focus-within{clip:auto;white-space:normal;width:auto;height:auto;margin:0;padding:0;position:static;overflow:visible}[s-truncate]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[s-truncate="2"]{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="3"]{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-truncate="4"]{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}[s-overflow=auto]{overflow:auto}[s-overflow=hidden]{overflow:hidden}[s-overflow=visible]{overflow:visible}[s-overflow=scroll]{overflow:scroll}[s-overflow-x=auto]{overflow-x:auto}[s-overflow-x=hidden]{overflow-x:hidden}[s-overflow-y=auto]{overflow-y:auto}[s-overflow-y=hidden]{overflow-y:hidden}@media (width<640px){[s-hide-on~=sm]{display:none}}@media (width>=640px) and (width<768px){[s-hide-on~=md]{display:none}}@media (width>=768px) and (width<1024px){[s-hide-on~=lg]{display:none}}@media (width>=1024px){[s-hide-on~=xl]{display:none}}@media (width>=640px){[s-show-on~=sm]{display:none}}@media (width<640px),(width>=768px){[s-show-on~=md]{display:none}}@media (width<768px),(width>=1024px){[s-show-on~=lg]{display:none}}@media (width<1024px){[s-show-on~=xl]{display:none}}[s-pointer=none]{pointer-events:none}[s-pointer=auto]{pointer-events:auto}[s-select=none]{user-select:none}[s-select=text]{user-select:text}[s-select=all]{user-select:all}[s-select=auto]{user-select:auto}[s-isolate]{isolation:isolate}[s-isolate=auto]{isolation:auto}.s-m-0{margin:0}.s-m-1{margin:var(--s-space-1)}.s-m-2{margin:var(--s-space-2)}.s-m-3{margin:var(--s-space-3)}.s-m-4{margin:var(--s-space-4)}.s-m-5{margin:var(--s-space-5)}.s-m-6{margin:var(--s-space-6)}.s-m-8{margin:var(--s-space-8)}.s-m-10{margin:var(--s-space-10)}.s-m-12{margin:var(--s-space-12)}.s-m-auto{margin:auto}.s-mx-0{margin-inline:0}.s-mx-1{margin-inline:var(--s-space-1)}.s-mx-2{margin-inline:var(--s-space-2)}.s-mx-3{margin-inline:var(--s-space-3)}.s-mx-4{margin-inline:var(--s-space-4)}.s-mx-5{margin-inline:var(--s-space-5)}.s-mx-6{margin-inline:var(--s-space-6)}.s-mx-8{margin-inline:var(--s-space-8)}.s-mx-auto{margin-inline:auto}.s-my-0{margin-block:0}.s-my-1{margin-block:var(--s-space-1)}.s-my-2{margin-block:var(--s-space-2)}.s-my-3{margin-block:var(--s-space-3)}.s-my-4{margin-block:var(--s-space-4)}.s-my-5{margin-block:var(--s-space-5)}.s-my-6{margin-block:var(--s-space-6)}.s-my-8{margin-block:var(--s-space-8)}.s-my-auto{margin-block:auto}.s-mt-0{margin-top:0}.s-mt-1{margin-top:var(--s-space-1)}.s-mt-2{margin-top:var(--s-space-2)}.s-mt-3{margin-top:var(--s-space-3)}.s-mt-4{margin-top:var(--s-space-4)}.s-mt-5{margin-top:var(--s-space-5)}.s-mt-6{margin-top:var(--s-space-6)}.s-mt-8{margin-top:var(--s-space-8)}.s-mt-auto{margin-top:auto}.s-mb-0{margin-bottom:0}.s-mb-1{margin-bottom:var(--s-space-1)}.s-mb-2{margin-bottom:var(--s-space-2)}.s-mb-3{margin-bottom:var(--s-space-3)}.s-mb-4{margin-bottom:var(--s-space-4)}.s-mb-5{margin-bottom:var(--s-space-5)}.s-mb-6{margin-bottom:var(--s-space-6)}.s-mb-8{margin-bottom:var(--s-space-8)}.s-mb-auto{margin-bottom:auto}.s-ml-0{margin-left:0}.s-ml-1{margin-left:var(--s-space-1)}.s-ml-2{margin-left:var(--s-space-2)}.s-ml-3{margin-left:var(--s-space-3)}.s-ml-4{margin-left:var(--s-space-4)}.s-ml-auto{margin-left:auto}.s-mr-0{margin-right:0}.s-mr-1{margin-right:var(--s-space-1)}.s-mr-2{margin-right:var(--s-space-2)}.s-mr-3{margin-right:var(--s-space-3)}.s-mr-4{margin-right:var(--s-space-4)}.s-mr-auto{margin-right:auto}.s-p-0{padding:0}.s-p-1{padding:var(--s-space-1)}.s-p-2{padding:var(--s-space-2)}.s-p-3{padding:var(--s-space-3)}.s-p-4{padding:var(--s-space-4)}.s-p-5{padding:var(--s-space-5)}.s-p-6{padding:var(--s-space-6)}.s-p-8{padding:var(--s-space-8)}.s-p-10{padding:var(--s-space-10)}.s-p-12{padding:var(--s-space-12)}.s-px-0{padding-inline:0}.s-px-1{padding-inline:var(--s-space-1)}.s-px-2{padding-inline:var(--s-space-2)}.s-px-3{padding-inline:var(--s-space-3)}.s-px-4{padding-inline:var(--s-space-4)}.s-px-5{padding-inline:var(--s-space-5)}.s-px-6{padding-inline:var(--s-space-6)}.s-px-8{padding-inline:var(--s-space-8)}.s-py-0{padding-block:0}.s-py-1{padding-block:var(--s-space-1)}.s-py-2{padding-block:var(--s-space-2)}.s-py-3{padding-block:var(--s-space-3)}.s-py-4{padding-block:var(--s-space-4)}.s-py-5{padding-block:var(--s-space-5)}.s-py-6{padding-block:var(--s-space-6)}.s-py-8{padding-block:var(--s-space-8)}.s-pt-0{padding-top:0}.s-pt-1{padding-top:var(--s-space-1)}.s-pt-2{padding-top:var(--s-space-2)}.s-pt-3{padding-top:var(--s-space-3)}.s-pt-4{padding-top:var(--s-space-4)}.s-pt-5{padding-top:var(--s-space-5)}.s-pt-6{padding-top:var(--s-space-6)}.s-pt-8{padding-top:var(--s-space-8)}.s-pb-0{padding-bottom:0}.s-pb-1{padding-bottom:var(--s-space-1)}.s-pb-2{padding-bottom:var(--s-space-2)}.s-pb-3{padding-bottom:var(--s-space-3)}.s-pb-4{padding-bottom:var(--s-space-4)}.s-pb-5{padding-bottom:var(--s-space-5)}.s-pb-6{padding-bottom:var(--s-space-6)}.s-pb-8{padding-bottom:var(--s-space-8)}.s-pl-0{padding-left:0}.s-pl-1{padding-left:var(--s-space-1)}.s-pl-2{padding-left:var(--s-space-2)}.s-pl-3{padding-left:var(--s-space-3)}.s-pl-4{padding-left:var(--s-space-4)}.s-pr-0{padding-right:0}.s-pr-1{padding-right:var(--s-space-1)}.s-pr-2{padding-right:var(--s-space-2)}.s-pr-3{padding-right:var(--s-space-3)}.s-pr-4{padding-right:var(--s-space-4)}.s-gap-0{gap:0}.s-gap-1{gap:var(--s-space-1)}.s-gap-2{gap:var(--s-space-2)}.s-gap-3{gap:var(--s-space-3)}.s-gap-4{gap:var(--s-space-4)}.s-gap-5{gap:var(--s-space-5)}.s-gap-6{gap:var(--s-space-6)}.s-gap-8{gap:var(--s-space-8)}.s-gap-10{gap:var(--s-space-10)}.s-gap-12{gap:var(--s-space-12)}.s-gap-x-0{column-gap:0}.s-gap-x-1{column-gap:var(--s-space-1)}.s-gap-x-2{column-gap:var(--s-space-2)}.s-gap-x-3{column-gap:var(--s-space-3)}.s-gap-x-4{column-gap:var(--s-space-4)}.s-gap-x-6{column-gap:var(--s-space-6)}.s-gap-x-8{column-gap:var(--s-space-8)}.s-gap-y-0{row-gap:0}.s-gap-y-1{row-gap:var(--s-space-1)}.s-gap-y-2{row-gap:var(--s-space-2)}.s-gap-y-3{row-gap:var(--s-space-3)}.s-gap-y-4{row-gap:var(--s-space-4)}.s-gap-y-6{row-gap:var(--s-space-6)}.s-gap-y-8{row-gap:var(--s-space-8)}.s-space-y-1>*+*{margin-top:var(--s-space-1)}.s-space-y-2>*+*{margin-top:var(--s-space-2)}.s-space-y-3>*+*{margin-top:var(--s-space-3)}.s-space-y-4>*+*{margin-top:var(--s-space-4)}.s-space-y-6>*+*{margin-top:var(--s-space-6)}.s-space-y-8>*+*{margin-top:var(--s-space-8)}.s-space-x-1>*+*{margin-left:var(--s-space-1)}.s-space-x-2>*+*{margin-left:var(--s-space-2)}.s-space-x-3>*+*{margin-left:var(--s-space-3)}.s-space-x-4>*+*{margin-left:var(--s-space-4)}.s-space-x-6>*+*{margin-left:var(--s-space-6)}.s-space-x-8>*+*{margin-left:var(--s-space-8)}.s-flex-1{flex:1}.s-flex-auto{flex:auto}.s-flex-initial{flex:0 auto}.s-flex-none{flex:none}.s-grow{flex-grow:1}.s-grow-0{flex-grow:0}.s-shrink{flex-shrink:1}.s-shrink-0{flex-shrink:0}.s-self-auto{align-self:auto}.s-self-start{align-self:flex-start}.s-self-end{align-self:flex-end}.s-self-center{align-self:center}.s-self-stretch{align-self:stretch}.s-self-baseline{align-self:baseline}.s-place-items-start{place-items:start}.s-place-items-end{place-items:end}.s-place-items-center{place-items:center}.s-place-items-stretch{place-items:stretch stretch}.s-place-content-start{place-content:start}.s-place-content-end{place-content:end}.s-place-content-center{place-content:center}.s-place-content-between{place-content:space-between}.s-place-content-around{place-content:space-around}.s-place-content-evenly{place-content:space-evenly}.s-order-first{order:-9999}.s-order-last{order:9999}.s-order-none{order:0}.s-order-1{order:1}.s-order-2{order:2}.s-order-3{order:3}.s-w-full{width:100%}.s-w-screen{width:100vw}.s-w-min{width:min-content}.s-w-max{width:max-content}.s-w-fit{width:fit-content}.s-w-auto{width:auto}.s-h-full{height:100%}.s-h-screen{height:100vh}.s-h-screen-dvh{height:100dvh}.s-h-min{height:min-content}.s-h-max{height:max-content}.s-h-fit{height:fit-content}.s-h-auto{height:auto}.s-min-w-0{min-width:0}.s-min-w-full{min-width:100%}.s-max-w-none{max-width:none}.s-max-w-xs{max-width:20rem}.s-max-w-sm{max-width:24rem}.s-max-w-md{max-width:28rem}.s-max-w-lg{max-width:32rem}.s-max-w-xl{max-width:36rem}.s-max-w-2xl{max-width:42rem}.s-max-w-3xl{max-width:48rem}.s-max-w-4xl{max-width:56rem}.s-max-w-5xl{max-width:64rem}.s-max-w-6xl{max-width:72rem}.s-max-w-7xl{max-width:80rem}.s-max-w-full{max-width:100%}.s-max-w-prose{max-width:65ch}.s-min-h-0{min-height:0}.s-min-h-full{min-height:100%}.s-min-h-screen{min-height:100vh}.s-min-h-screen-dvh{min-height:100dvh}.s-max-h-full{max-height:100%}.s-max-h-screen{max-height:100vh}.s-aspect-auto{aspect-ratio:auto}.s-aspect-square{aspect-ratio:1}.s-aspect-video{aspect-ratio:16/9}.s-aspect-4-3{aspect-ratio:4/3}.s-z-0{z-index:0}.s-z-10{z-index:10}.s-z-20{z-index:20}.s-z-30{z-index:30}.s-z-40{z-index:40}.s-z-50{z-index:50}.s-z-auto{z-index:auto}.s-font-sans{font-family:var(--s-font-sans)}.s-font-serif{font-family:var(--s-font-serif)}.s-font-mono{font-family:var(--s-font-mono)}.s-text-xs{font-size:var(--s-text-xs)}.s-text-sm{font-size:var(--s-text-sm)}.s-text-base{font-size:var(--s-text-base)}.s-text-lg{font-size:var(--s-text-lg)}.s-text-xl{font-size:var(--s-text-xl)}.s-text-2xl{font-size:var(--s-text-2xl)}.s-text-3xl{font-size:var(--s-text-3xl)}.s-text-4xl{font-size:var(--s-text-4xl)}.s-text-5xl{font-size:var(--s-text-5xl)}.s-font-thin{font-weight:var(--s-font-thin)}.s-font-extralight{font-weight:var(--s-font-extralight)}.s-font-light{font-weight:var(--s-font-light)}.s-font-normal{font-weight:var(--s-font-normal)}.s-font-medium{font-weight:var(--s-font-medium)}.s-font-semibold{font-weight:var(--s-font-semibold)}.s-font-bold{font-weight:var(--s-font-bold)}.s-font-extrabold{font-weight:var(--s-font-extrabold)}.s-font-black{font-weight:var(--s-font-black)}.s-leading-none{line-height:var(--s-leading-none)}.s-leading-tight{line-height:var(--s-leading-tight)}.s-leading-snug{line-height:var(--s-leading-snug)}.s-leading-normal{line-height:var(--s-leading-normal)}.s-leading-relaxed{line-height:var(--s-leading-relaxed)}.s-leading-loose{line-height:var(--s-leading-loose)}.s-tracking-tighter{letter-spacing:var(--s-tracking-tighter)}.s-tracking-tight{letter-spacing:var(--s-tracking-tight)}.s-tracking-normal{letter-spacing:var(--s-tracking-normal)}.s-tracking-wide{letter-spacing:var(--s-tracking-wide)}.s-tracking-wider{letter-spacing:var(--s-tracking-wider)}.s-tracking-widest{letter-spacing:var(--s-tracking-widest)}.s-text-left{text-align:left}.s-text-center{text-align:center}.s-text-right{text-align:right}.s-text-justify{text-align:justify}.s-text-start{text-align:start}.s-text-end{text-align:end}.s-align-baseline{vertical-align:baseline}.s-align-top{vertical-align:top}.s-align-middle{vertical-align:middle}.s-align-bottom{vertical-align:bottom}.s-align-text-top{vertical-align:text-top}.s-align-text-bottom{vertical-align:text-bottom}.s-align-sub{vertical-align:sub}.s-align-super{vertical-align:super}.s-underline{text-decoration-line:underline}.s-overline{text-decoration-line:overline}.s-line-through{text-decoration-line:line-through}.s-no-underline{text-decoration-line:none}.s-decoration-solid{text-decoration-style:solid}.s-decoration-double{text-decoration-style:double}.s-decoration-dotted{text-decoration-style:dotted}.s-decoration-dashed{text-decoration-style:dashed}.s-decoration-wavy{text-decoration-style:wavy}.s-uppercase{text-transform:uppercase}.s-lowercase{text-transform:lowercase}.s-capitalize{text-transform:capitalize}.s-normal-case{text-transform:none}.s-text-ellipsis{text-overflow:ellipsis}.s-text-clip{text-overflow:clip}.s-text-wrap{text-wrap:wrap}.s-text-nowrap{text-wrap:nowrap}.s-text-balance{text-wrap:balance}.s-text-pretty{text-wrap:pretty}.s-whitespace-normal{white-space:normal}.s-whitespace-nowrap{white-space:nowrap}.s-whitespace-pre{white-space:pre}.s-whitespace-pre-line{white-space:pre-line}.s-whitespace-pre-wrap{white-space:pre-wrap}.s-whitespace-break-spaces{white-space:break-spaces}.s-break-normal{overflow-wrap:normal;word-break:normal}.s-break-words{overflow-wrap:break-word}.s-break-all{word-break:break-all}.s-break-keep{word-break:keep-all}.s-hyphens-none{hyphens:none}.s-hyphens-manual{hyphens:manual}.s-hyphens-auto{hyphens:auto}.s-text-primary{color:var(--s-text-primary)}.s-text-secondary{color:var(--s-text-secondary)}.s-text-tertiary{color:var(--s-text-tertiary)}.s-text-inverse{color:var(--s-text-inverse)}.s-text-success{color:var(--s-state-success)}.s-text-warning{color:var(--s-state-warning)}.s-text-danger{color:var(--s-state-danger)}.s-link{color:var(--s-interactive-primary);text-underline-offset:2px;text-decoration:underline;&:hover{color:var(--s-interactive-primary-hover)}}.s-list-none{list-style-type:none}.s-list-disc{list-style-type:disc}.s-list-decimal{list-style-type:decimal}.s-list-inside{list-style-position:inside}.s-list-outside{list-style-position:outside}.s-opacity-0{opacity:0}.s-opacity-5{opacity:.05}.s-opacity-10{opacity:.1}.s-opacity-20{opacity:.2}.s-opacity-25{opacity:.25}.s-opacity-30{opacity:.3}.s-opacity-40{opacity:.4}.s-opacity-50{opacity:.5}.s-opacity-60{opacity:.6}.s-opacity-70{opacity:.7}.s-opacity-75{opacity:.75}.s-opacity-80{opacity:.8}.s-opacity-90{opacity:.9}.s-opacity-95{opacity:.95}.s-opacity-100{opacity:1}}

package.json

 {
   "name": "@shift-css/core",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Zero-runtime, OKLCH-native CSS framework with cascade layers and native light-dark() theming",
@@ -12,2 +12,12 @@ "type": "module",
     "./tokens": "./dist/tokens.css",
+    "./components/button": "./dist/components/button.css",
+    "./components/card": "./dist/components/card.css",
+    "./components/input": "./dist/components/input.css",
+    "./components/modal": "./dist/components/modal.css",
+    "./components/surface": "./dist/components/surface.css",
+    "./utils/layout": "./dist/utils/layout.css",
+    "./utils/spacing": "./dist/utils/spacing.css",
+    "./utils/flex": "./dist/utils/flex.css",
+    "./utils/typography": "./dist/utils/typography.css",
+    "./utils/visibility": "./dist/utils/visibility.css",
     "./package.json": "./package.json"
@@ -14,0 +24,0 @@ },

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

293189

52.24%

Number of package files

19

216.67%

Lines of code

5558

110.85%

Number of medium quality alerts

0

-100%

Number of lines in readme file

111

Infinity%

No dependency changes