:root {
  --db-primary: #18181a;
  --db-secondary: #000000;
  --db-tertiary: #212426;
  --db-quaternary: #2e3434;
  --lb-primary: #ffffff;
  --lb-secondary: #e8eaee;
  --lb-tertiary: #f3f4f6;
  --lb-quaternary: #eef0f2;
  --df-primary: #ffffff;
  --df-secondary: #8f9da3;
  --lf-primary: #000000;
  --lf-secondary: #495e74;
  --da-primary: #7efff5;
  --da-primary-muted: #426158;
  --da-tertiary: #00d1b8;
  --la-primary: #6911d4;
  --la-primary-muted: #e1d2f5;
  --la-tertiary: #8c33eb;
  --success-500: #2d9f8f;
  --error-500: #ff3277;
  --font-weight-regular: 400;
  --font-weight-bold: 500;
  --font-line-height-s: 1.2;
  --font-line-height-m: 1.4;
  --font-line-height-l: 1.5;
  --font-size-xs: 10px;
  --font-size-s: 12px;
  --font-size-m: 14px;
  --font-size-l: 16px;
  --spacing-4: 0.25rem;
  --spacing-8: calc(var(--spacing-4) * 2);
  --spacing-12: calc(var(--spacing-4) * 3);
  --spacing-16: calc(var(--spacing-4) * 4);
  --spacing-20: calc(var(--spacing-4) * 5);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background-primary: var(--db-primary);
  --background-secondary: var(--db-secondary);
  --background-tertiary: var(--db-tertiary);
  --background-quaternary: var(--db-quaternary);
  --foreground-primary: var(--df-primary);
  --foreground-secondary: var(--df-secondary);
  --accent-primary: var(--da-primary);
  --accent-primary-muted: var(--da-primary-muted);
  --accent-tertiary: var(--da-tertiary);
}

:root[data-theme="light"],
:root:not([data-theme]) {
  color-scheme: light;
  --background-primary: var(--lb-primary);
  --background-secondary: var(--lb-secondary);
  --background-tertiary: var(--lb-tertiary);
  --background-quaternary: var(--lb-quaternary);
  --foreground-primary: var(--lf-primary);
  --foreground-secondary: var(--lf-secondary);
  --accent-primary: var(--la-primary);
  --accent-primary-muted: var(--la-primary-muted);
  --accent-tertiary: var(--la-tertiary);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--background-primary);
  color: var(--foreground-secondary);
  font-family: "Work Sans", "Segoe UI", sans-serif;
  font-size: var(--font-size-s);
  font-optical-sizing: auto;
  font-style: normal;
  line-height: var(--font-line-height-m);
}

body,
h1,
h2,
h3,
h4,
h5,
p,
pre {
  margin: 0;
}

button,
input {
  font: inherit;
}

sub {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  bottom: -0.2em;
}

.headline-s {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
  text-transform: uppercase;
}

.title-s {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-s);
}

.body-s,
.caption {
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-m);
}

.shell {
  display: grid;
  gap: var(--spacing-12);
  padding: var(--spacing-12);
}

.panel {
  background: var(--background-primary);
  border: 1px solid var(--background-secondary);
  border-radius: var(--spacing-8);
  overflow: hidden;
}

.panel-form,
.panel-preview {
  padding: var(--spacing-12);
}

.panel-head,
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-bottom: var(--spacing-12);
  padding-bottom: var(--spacing-12);
  border-bottom: 1px solid var(--background-secondary);
}

.eyebrow {
  color: var(--foreground-secondary);
  letter-spacing: 0.04em;
}

.preview-note {
  color: var(--foreground-secondary);
  text-align: right;
  white-space: nowrap;
}

.form {
  display: grid;
  gap: var(--spacing-12);
}

.field {
  display: grid;
  gap: var(--spacing-8);
}

.field-label,
.summary-label {
  color: var(--foreground-secondary);
}

.field-help {
  color: var(--foreground-secondary);
}

.input {
  display: flex;
  width: 100%;
  min-height: 32px;
  border: 1px solid;
  border-radius: var(--spacing-8);
  font-family: inherit;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-line-height-m);
  outline: none;
  padding: var(--spacing-8);
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease;
}

:root[data-theme="dark"] .input {
  background-color: var(--background-tertiary);
  border-color: var(--background-tertiary);
  color: var(--foreground-primary);
}

:root[data-theme="dark"] .input:hover {
  background-color: var(--background-quaternary);
  border-color: var(--background-quaternary);
}

:root[data-theme="dark"] .input:focus {
  background-color: var(--background-primary);
  border-color: var(--accent-primary);
}

:root[data-theme="dark"] .input::placeholder {
  color: var(--foreground-secondary);
}

:root[data-theme="light"] .input,
:root:not([data-theme]) .input {
  background-color: var(--background-tertiary);
  border-color: var(--background-tertiary);
  color: var(--foreground-primary);
}

:root[data-theme="light"] .input:hover,
:root:not([data-theme]) .input:hover {
  background-color: var(--background-quaternary);
  border-color: var(--background-quaternary);
}

:root[data-theme="light"] .input:focus,
:root:not([data-theme]) .input:focus {
  background-color: var(--background-primary);
  border-color: var(--accent-primary);
}

:root[data-theme="light"] .input::placeholder,
:root:not([data-theme]) .input::placeholder {
  color: var(--foreground-secondary);
}

.summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border-radius: var(--spacing-8);
  border: 1px solid var(--background-secondary);
  background: var(--background-tertiary);
}

.summary strong {
  display: block;
  margin-top: var(--spacing-4);
  color: var(--foreground-primary);
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-m);
}

.value-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.value-row .input {
  flex: 1;
}

.grade-badge {
  --grade-color: #98a2b3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--spacing-8);
  background: var(--grade-color);
  color: #ffffff;
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.actions {
  display: flex;
  gap: var(--spacing-8);
}

.actions [data-appearance="primary"] {
  flex: 1 1 auto;
}

:where([data-appearance]:is(button)) {
  border: 2px solid transparent;
  border-radius: var(--spacing-8);
  font-family: inherit;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  min-height: 32px;
  padding: var(--spacing-8) var(--spacing-16);
  text-transform: uppercase;
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    outline-color 0.14s ease;
}

:where([data-appearance]:is(button)):hover:not(:disabled) {
  cursor: pointer;
}

:where([data-appearance]:is(button)):focus-visible {
  outline: none;
}

:root[data-theme="dark"] [data-appearance="primary"] {
  background-color: var(--accent-primary);
  border-color: transparent;
  color: var(--background-secondary);
}

:root[data-theme="dark"] [data-appearance="primary"]:hover:not(:disabled) {
  background-color: var(--accent-tertiary);
  border-color: var(--accent-tertiary);
}

:root[data-theme="dark"] [data-appearance="primary"]:focus:not(:disabled),
:root[data-theme="dark"] [data-appearance="primary"]:focus-visible:not(:disabled) {
  background-color: var(--background-tertiary);
  border-color: var(--accent-primary);
  color: var(--foreground-secondary);
}

:root[data-theme="dark"] [data-appearance="secondary"] {
  background-color: var(--background-tertiary);
  color: var(--foreground-secondary);
}

:root[data-theme="dark"] [data-appearance="secondary"]:hover:not(:disabled) {
  background-color: var(--background-quaternary);
  color: var(--accent-primary);
}

:root[data-theme="dark"] [data-appearance="secondary"]:focus:not(:disabled),
:root[data-theme="dark"] [data-appearance="secondary"]:focus-visible:not(:disabled) {
  border-color: var(--accent-primary);
}

:root[data-theme="light"] [data-appearance="primary"],
:root:not([data-theme]) [data-appearance="primary"] {
  background-color: var(--accent-primary);
  color: var(--background-primary);
}

:root[data-theme="light"] [data-appearance="primary"]:hover:not(:disabled),
:root:not([data-theme]) [data-appearance="primary"]:hover:not(:disabled) {
  background-color: var(--accent-tertiary);
}

:root[data-theme="light"] [data-appearance="primary"]:focus:not(:disabled),
:root[data-theme="light"] [data-appearance="primary"]:focus-visible:not(:disabled),
:root:not([data-theme]) [data-appearance="primary"]:focus:not(:disabled),
:root:not([data-theme]) [data-appearance="primary"]:focus-visible:not(:disabled) {
  color: var(--foreground-secondary);
  background-color: var(--background-tertiary);
  border-color: var(--accent-primary);
}

:root[data-theme="light"] [data-appearance="secondary"],
:root:not([data-theme]) [data-appearance="secondary"] {
  background-color: var(--background-tertiary);
  color: var(--foreground-secondary);
}

:root[data-theme="light"] [data-appearance="secondary"]:hover:not(:disabled),
:root:not([data-theme]) [data-appearance="secondary"]:hover:not(:disabled) {
  background-color: var(--background-quaternary);
  color: var(--accent-primary);
}

:root[data-theme="light"] [data-appearance="secondary"]:focus:not(:disabled),
:root[data-theme="light"] [data-appearance="secondary"]:focus-visible:not(:disabled),
:root:not([data-theme]) [data-appearance="secondary"]:focus:not(:disabled),
:root:not([data-theme]) [data-appearance="secondary"]:focus-visible:not(:disabled) {
  background-color: var(--background-tertiary);
  border-color: var(--accent-primary);
  color: var(--foreground-secondary);
}

.status {
  min-height: var(--spacing-16);
  margin-top: var(--spacing-8);
}

.status[data-state="success"] {
  color: var(--success-500);
}

.status[data-state="error"] {
  color: var(--error-500);
}

@media (max-width: 420px) {
  .actions {
    flex-direction: column;
  }
}