.ds-root {
  background: var(--seeto-bg-base);
  color: var(--seeto-text-primary);
  font-family: var(--seeto-font-ui);
  min-height: 100%;
}

.ds-container {
  margin-inline: auto;
  max-width: var(--ds-container-max, var(--seeto-phone-width));
  padding-inline: var(--ds-container-padding, var(--seeto-space-4));
  width: 100%;
}

.ds-phone {
  background: var(--seeto-bg-base);
  box-shadow: var(--seeto-shadow-phone);
  inline-size: min(100vw, var(--seeto-phone-width));
  margin-inline: auto;
  min-block-size: 100dvh;
  overflow: hidden;
  position: relative;
}

.ds-stack {
  align-items: var(--ds-stack-align, stretch);
  display: flex;
  flex-direction: column;
  gap: var(--ds-stack-gap, var(--seeto-space-8));
}

.ds-inline {
  align-items: var(--ds-inline-align, center);
  display: flex;
  flex-wrap: var(--ds-inline-wrap, wrap);
  gap: var(--ds-inline-gap, var(--seeto-space-4));
}

.ds-grid {
  display: grid;
  gap: var(--ds-grid-gap, var(--seeto-space-8));
  grid-template-columns: repeat(var(--ds-grid-columns, 1), minmax(0, 1fr));
}

.ds-surface {
  background: var(--ds-surface-bg, var(--seeto-bg-card-muted));
  border: 1px solid var(--ds-surface-border, var(--seeto-border-soft));
  border-radius: var(--ds-surface-radius, var(--seeto-radius-5));
  box-shadow: var(--ds-surface-shadow, none);
  color: var(--ds-surface-color, var(--seeto-text-primary));
}

.ds-surface[data-elevation="card"] {
  --ds-surface-shadow: var(--seeto-shadow-card);
}

.ds-divider {
  background: var(--ds-divider-color, var(--seeto-border-soft));
  border: 0;
  block-size: 1px;
  inline-size: 100%;
  margin: 0;
}

.ds-icon {
  block-size: var(--ds-icon-size, var(--seeto-size-icon-md));
  color: var(--ds-icon-color, currentColor);
  display: inline-block;
  flex: 0 0 auto;
  inline-size: var(--ds-icon-size, var(--seeto-size-icon-md));
}

.ds-text {
  color: var(--ds-text-color, var(--seeto-text-primary));
  font-family: var(--ds-text-font, var(--seeto-font-card));
  font-size: var(--ds-text-size, var(--seeto-type-body-base-size));
  font-weight: var(--ds-text-weight, 500);
  letter-spacing: var(--seeto-type-letter-spacing-0);
  line-height: var(--ds-text-line, var(--seeto-type-body-base-line));
  margin: 0;
}

.ds-text[data-tone="secondary"] {
  --ds-text-color: var(--seeto-text-secondary);
}

.ds-text[data-tone="muted"] {
  --ds-text-color: var(--seeto-text-muted);
}

.ds-text[data-size="large"] {
  --ds-text-size: var(--seeto-type-body-large-size);
  --ds-text-line: var(--seeto-type-body-large-line);
}

.ds-text[data-size="small"] {
  --ds-text-size: var(--seeto-type-body-small-size);
  --ds-text-line: var(--seeto-type-body-small-line);
}

.ds-text[data-size="caption"] {
  --ds-text-font: var(--seeto-font-card);
  --ds-text-size: var(--seeto-type-caption-size);
  --ds-text-line: var(--seeto-type-caption-line);
}

.ds-heading {
  color: var(--ds-heading-color, var(--seeto-text-primary));
  font-family: var(--ds-heading-font, var(--seeto-font-display));
  font-size: var(--ds-heading-size, var(--seeto-type-heading-1-size));
  font-weight: var(--ds-heading-weight, 900);
  letter-spacing: 0;
  line-height: var(--ds-heading-line, var(--seeto-type-heading-1-line));
  margin: 0;
  text-transform: var(--ds-heading-transform, uppercase);
}

.ds-heading[data-level="display"] {
  --ds-heading-size: var(--seeto-type-display-title-size);
  --ds-heading-line: var(--seeto-type-display-title-line);
}

.ds-heading[data-level="hero"] {
  --ds-heading-size: var(--seeto-type-display-hero-size);
  --ds-heading-line: var(--seeto-type-display-hero-line);
}

.ds-heading[data-level="2"] {
  --ds-heading-size: var(--seeto-type-heading-2-size);
  --ds-heading-line: var(--seeto-type-heading-2-line);
}

.ds-visually-hidden {
  block-size: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .ds-phone {
    border-radius: 34px;
  }
}