/* src/client/styles/tokens.css */
:root {
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --scroll-bleed: var(--space-3);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --duration-fast: .15s;
  --duration-expand: .24s;
  --ease-interaction: ease;
  --hover-scale: 1;
  --hover-lift: 0px;
  --hover-rotate: 0deg;
  --press-scale: 1;
  --focus-scale: 1;
  --overlay-scrim: #00000073;
  --overlay-width-sm: 22rem;
  --overlay-width-md: 34rem;
  --overlay-width-lg: 46rem;
  --sheet-max-height: 85dvh;
  --sidebar-width: 20rem;
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-design="a"] {
  --font-size-sm: .8125rem;
  --font-size-body: .9375rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-weight-heading: 650;
  --line-height-body: 1.6;
  --control-height: 2.25rem;
  --control-padding-x: var(--space-3);
  --radius-control: var(--radius-md);
  --radius-surface: var(--radius-lg);
  --border-width: 1px;
  --focus-ring-width: 2px;
  --surface-shadow: 0 1px 3px #00000014;
}

[data-design="b"] {
  --overlay-scrim: #000000a6;
  --font-size-sm: 1rem;
  --font-size-body: 1.125rem;
  --font-size-lg: 1.3125rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.25rem;
  --font-weight-heading: 750;
  --line-height-body: 1.7;
  --control-height: 3rem;
  --control-padding-x: var(--space-4);
  --radius-control: var(--radius-sm);
  --radius-surface: var(--radius-sm);
  --border-width: 2px;
  --focus-ring-width: 4px;
  --surface-shadow: none;
}

[data-design="office"] {
  --overlay-scrim: #00000040;
  --font-sans: "Segoe UI", Tahoma, Geneva, Verdana, "Malgun Gothic", sans-serif;
  --font-size-sm: .6875rem;
  --font-size-body: .8125rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.375rem;
  --font-weight-heading: 700;
  --line-height-body: 1.4;
  --control-height: 1.75rem;
  --control-padding-x: var(--space-2);
  --radius-control: 2px;
  --radius-surface: 2px;
  --border-width: 1px;
  --focus-ring-width: 1px;
  --surface-shadow: none;
  --duration-fast: 0s;
  --duration-expand: 0s;
}

[data-design="kids"] {
  --font-sans: "Baloo 2", "Comic Sans MS", "Chalkboard SE", "Comic Neue", "Fredoka", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-size-sm: .9375rem;
  --font-size-body: 1.0625rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 1.875rem;
  --font-size-2xl: 2.5rem;
  --font-weight-heading: 800;
  --line-height-body: 1.6;
  --control-height: 3rem;
  --control-padding-x: var(--space-4);
  --radius-control: var(--radius-full);
  --radius-surface: var(--radius-xl);
  --border-width: 3px;
  --focus-ring-width: 4px;
  --surface-shadow: 0 6px 0 #0000001f, 0 14px 26px #0000001a;
  --duration-fast: .22s;
  --duration-expand: .38s;
  --ease-interaction: cubic-bezier(.34, 1.8, .5, 1);
  --hover-scale: 1.08;
  --hover-lift: -4px;
  --hover-rotate: -2.5deg;
  --press-scale: .9;
  --focus-scale: 1.04;
}

[data-design="a"][data-theme="light"] {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --color-bg: #f6f6fa;
  --color-surface: #fff;
  --color-surface-raised: #fff;
  --color-text: #23283a;
  --color-text-muted: #69708a;
  --color-border: #e3e5ee;
  --color-primary: #5b5bd6;
  --color-primary-hover: #4949c4;
  --color-primary-contrast: #fff;
  --color-success: #1a9e56;
  --color-warning: #c07a12;
  --color-danger: #d64550;
  --color-danger-contrast: #fff;
  --color-focus: #5b5bd6;
}

[data-design="a"][data-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --color-bg: #14161e;
  --color-surface: #1d2029;
  --color-surface-raised: #262a36;
  --color-text: #e7e9f2;
  --color-text-muted: #9ba2b8;
  --color-border: #313545;
  --color-primary: #8f8ff2;
  --color-primary-hover: #a7a7f7;
  --color-primary-contrast: #14161e;
  --color-success: #4ecb84;
  --color-warning: #e0a33e;
  --color-danger: #f0707a;
  --color-danger-contrast: #14161e;
  --color-focus: #8f8ff2;
}

[data-design="b"][data-theme="light"] {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --color-bg: #fff;
  --color-surface: #fff;
  --color-surface-raised: #f2f2f2;
  --color-text: #000;
  --color-text-muted: #3d3d3d;
  --color-border: #000;
  --color-primary: #0038a8;
  --color-primary-hover: #002a7f;
  --color-primary-contrast: #fff;
  --color-success: #005e2b;
  --color-warning: #7a4d00;
  --color-danger: #a80000;
  --color-danger-contrast: #fff;
  --color-focus: #0038a8;
}

[data-design="b"][data-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --color-bg: #000;
  --color-surface: #0d0d0d;
  --color-surface-raised: #1a1a1a;
  --color-text: #fff;
  --color-text-muted: #d6d6d6;
  --color-border: #fff;
  --color-primary: #82b1ff;
  --color-primary-hover: #a9c9ff;
  --color-primary-contrast: #000;
  --color-success: #57d787;
  --color-warning: #ffc457;
  --color-danger: #ff8080;
  --color-danger-contrast: #000;
  --color-focus: #82b1ff;
}

[data-design="office"][data-theme="light"] {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --color-bg: #d4d0c8;
  --color-surface: #fff;
  --color-surface-raised: #ece9d8;
  --color-text: #000;
  --color-text-muted: #4d4d4d;
  --color-border: gray;
  --color-primary: #21569e;
  --color-primary-hover: #1b4580;
  --color-primary-contrast: #fff;
  --color-success: #2d7d2d;
  --color-warning: #9c6500;
  --color-danger: #a80000;
  --color-danger-contrast: #fff;
  --color-focus: #21569e;
  --office-bevel-light: #fff;
  --office-bevel-dark: gray;
  --office-btn-top: #fbfbfa;
  --office-btn-bottom: #d7d3ca;
}

[data-design="office"][data-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --color-bg: #333;
  --color-surface: #2b2b2b;
  --color-surface-raised: #3f3f3f;
  --color-text: #f0f0f0;
  --color-text-muted: #b0b0b0;
  --color-border: #5a5a5a;
  --color-primary: #4a8ad4;
  --color-primary-hover: #6aa0e0;
  --color-primary-contrast: #fff;
  --color-success: #4ea64e;
  --color-warning: #cf9b34;
  --color-danger: #d16a6a;
  --color-danger-contrast: #fff;
  --color-focus: #7aa8e0;
  --office-bevel-light: #5f5f5f;
  --office-bevel-dark: #141414;
  --office-btn-top: #4a4a4a;
  --office-btn-bottom: #333;
}

[data-design="kids"][data-theme="light"] {
  --buncss-light: initial;
  --buncss-dark: ;
  color-scheme: light;
  --color-bg: #fff7ec;
  --color-surface: #fff;
  --color-surface-raised: #fff0d6;
  --color-text: #35235e;
  --color-text-muted: #7a6aa6;
  --color-border: #2c2150;
  --color-primary: #4f7cff;
  --color-primary-hover: #3a63e6;
  --color-primary-contrast: #fff;
  --color-success: #23c268;
  --color-warning: #ff9f1c;
  --color-danger: #ff4d6d;
  --color-danger-contrast: #fff;
  --color-focus: #ffb703;
}

[data-design="kids"][data-theme="dark"] {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --color-bg: #1b1236;
  --color-surface: #271a49;
  --color-surface-raised: #34235f;
  --color-text: #f4ecff;
  --color-text-muted: #b9a8e6;
  --color-border: #7c5cff;
  --color-primary: #7aa2ff;
  --color-primary-hover: #9cbcff;
  --color-primary-contrast: #14102b;
  --color-success: #4ade80;
  --color-warning: #ffc23d;
  --color-danger: #ff6b88;
  --color-danger-contrast: #14102b;
  --color-focus: #ffd60a;
}

/* src/client/styles/main.css */
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color var(--duration-fast), color var(--duration-fast);
  margin: 0;
}

h1, h2, h3 {
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
}

h1 {
  font-size: var(--font-size-2xl);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

code {
  font-family: var(--font-mono);
  background: var(--color-surface-raised);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: .875em;
}

a {
  color: var(--color-primary);
}

.muted {
  color: var(--color-text-muted);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

.scroll-box {
  overflow: auto;
  overscroll-behavior: contain;
  --hover-scale: 1;
  --hover-rotate: 0deg;
  --focus-scale: 1;
  padding: var(--scroll-bleed);
  margin: calc(var(--scroll-bleed) * -1);
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  z-index: 10;
  transition: transform var(--duration-fast);
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

.app-shell {
  padding: var(--space-4) var(--space-4) var(--space-7);
  max-width: 60rem;
  margin: 0 auto;
}

.app-header {
  display: flex;
  align-items:  center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  flex-wrap: wrap;
}

.app-header__brand {
  margin-right: auto;
}

.app-header__title {
  font-size: var(--font-size-lg);
  margin: 0;
}

.app-header__tagline {
  font-size: var(--font-size-sm);
  margin: 0;
}

.app-nav {
  display: flex;
  gap: var(--space-3);
}

.app-nav a {
  text-decoration: none;
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-control);
}

.app-nav a[aria-current="page"] {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-weight: 700;
}

.app-controls {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.app-main {
  padding-top: var(--space-5);
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items:  center;
  gap: var(--space-2);
  height: var(--control-height);
  padding-inline: var(--control-padding-x);
  font: inherit;
  border-radius: var(--radius-control);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-fast), color var(--duration-fast);
  font-weight: 600;
}

.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.btn--primary:not(:disabled):hover {
  background: var(--color-primary-hover);
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:not(:disabled):hover {
  background: var(--color-surface-raised);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--color-danger-contrast);
}

.btn--ghost {
  color: var(--color-text);
  background: none;
}

.btn--ghost:not(:disabled):hover {
  background: var(--color-surface-raised);
}

.field {
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
}

.field__label {
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.field__input {
  height: var(--control-height);
  padding-inline: var(--control-padding-x);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
}

.field__input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.field__input:disabled {
  opacity: .55;
}

.field__error {
  font-size: var(--font-size-sm);
  color: var(--color-danger);
  margin: 0;
}

.checkbox {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
}

.checkbox__input {
  width: calc(var(--control-height) / 2.25);
  height: calc(var(--control-height) / 2.25);
  accent-color: var(--color-primary);
}

.checkbox__input:checked + .checkbox__label {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.badge {
  display: inline-block;
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-full);
  border: var(--border-width) solid currentcolor;
  font-weight: 700;
}

.badge--neutral {
  color: var(--color-text-muted);
}

.badge--success {
  color: var(--color-success);
}

.badge--warning {
  color: var(--color-warning);
}

.badge--danger {
  color: var(--color-danger);
}

.alert {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-surface);
  border: var(--border-width) solid currentcolor;
}

.alert__body {
  flex: 1;
}

.alert--info {
  color: var(--color-primary);
}

.alert--success {
  color: var(--color-success);
}

.alert--error {
  color: var(--color-danger);
}

.spinner {
  display: inline-block;
  border: 2px solid color-mix(in srgb, currentcolor 25%, transparent);
  border-radius: var(--radius-full);
  animation: .8s linear infinite spinner-rotate;
  border-top-color: currentColor;
  width: 1.25em;
  height: 1.25em;
}

.spinner--sm {
  width: 1em;
  height: 1em;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2s;
  }
}

.card {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
}

.card__image {
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.card__body {
  padding: var(--space-4);
}

.card__title {
  margin-top: 0;
}

.accordion {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
  overflow-anchor: none;
}

.accordion__item + .accordion__item {
  border-top: var(--border-width) solid var(--color-border);
}

.accordion__header {
  font-size: var(--font-size-body);
  margin: 0;
}

.accordion__trigger {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  text-align: start;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  background: none;
  border: 0;
  width: 100%;
  font-weight: 600;
}

.accordion__trigger:hover {
  background: var(--color-surface-raised);
}

.accordion__trigger:focus-visible {
  outline-offset: calc(var(--focus-ring-width) * -1);
}

.accordion__chevron {
  transition: transform var(--duration-fast) var(--ease-interaction);
  flex-shrink: 0;
}

.accordion__item[data-open] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-expand) var(--ease-interaction);
}

.accordion__item[data-open] .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s var(--duration-expand);
  min-height: 0;
}

.accordion__item[data-open] .accordion__panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

.accordion__content {
  padding: var(--space-1) var(--space-4) var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__panel, .accordion__panel-inner, .accordion__chevron {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}

.palette {
  --palette-checker-size: 8px;
  --palette-checker: repeating-conic-gradient(var(--color-text-muted) 0% 25%, transparent 0% 50%);
}

.palette__chip, .palette__swatch {
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--palette-chip-color), var(--palette-chip-color)), var(--palette-checker);
  background-size: auto, var(--palette-checker-size) var(--palette-checker-size);
  border: var(--border-width) solid var(--color-border);
  forced-color-adjust: none;
}

.palette__trigger {
  display: inline-flex;
  align-items:  center;
  gap: var(--space-2);
  height: var(--control-height);
  padding-inline: var(--control-padding-x);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color var(--duration-fast);
}

.palette__trigger:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.palette__trigger:not(:disabled):hover {
  background: var(--color-surface-raised);
}

.palette__chip {
  border-radius: calc(var(--radius-control) / 2);
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.palette__trigger-text {
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.palette__chevron {
  color: var(--color-text-muted);
  flex: none;
}

.palette__popup {
  position: fixed;
  padding: var(--space-3);
  gap: var(--space-3);
  overflow: auto;
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--surface-shadow);
  flex-direction: column;
  margin: 0;
  inset: auto;
}

.palette__popup:popover-open {
  display: flex;
}

@media (prefers-reduced-motion: no-preference) {
  .palette__popup {
    opacity: 1;
    transition: opacity var(--duration-fast) var(--ease-interaction), transform var(--duration-fast) var(--ease-interaction), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
  }

  .palette__popup:not(:popover-open) {
    opacity: 0;
    transform: scale(.98);
  }

  @starting-style {
    .palette__popup:popover-open {
      opacity: 0;
      transform: scale(.98);
    }
  }
}

.palette__groups {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.palette__grid {
  display: grid;
  grid-template-columns: repeat(var(--palette-columns), auto);
  gap: var(--space-2);
  justify-content: start;
}

.palette__group-label {
  grid-column: 1 / -1;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

.palette__swatch {
  width: calc(var(--control-height) * .75);
  height: calc(var(--control-height) * .75);
  display: grid;
  border-radius: calc(var(--radius-control) / 1.5);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-interaction), box-shadow var(--duration-fast) var(--ease-interaction);
  place-items:  center;
  padding: 0;
}

.palette__swatch[aria-selected="true"] {
  box-shadow: 0 0 0 2px var(--color-surface-raised), 0 0 0 4px var(--color-focus);
}

.palette__swatch[data-ink="light"] .palette__check {
  color: #fff;
}

.palette__swatch[data-ink="dark"] .palette__check {
  color: #000;
}

.palette__custom {
  display: flex;
  align-items:  flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--color-border);
}

.palette__custom .field {
  flex: 1;
  min-width: 0;
}

.palette__native {
  width: var(--control-height);
  height: var(--control-height);
  padding: var(--space-1);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  cursor: pointer;
  flex: none;
}

.palette__warning {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-warning);
  margin: 0;
}

.palette__tooltip {
  position: fixed;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  pointer-events: none;
  color: var(--color-surface);
  background: var(--color-text);
  border-radius: var(--radius-sm);
}

.palette__tooltip-value {
  color: inherit;
  opacity: .75;
  background: none;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

.overlay {
  position: fixed;
  overflow: visible;
  background: none;
  border: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  inset: 0;
}

.overlay[open] {
  display: flex;
}

.overlay[data-variant="modal"] {
  padding: var(--space-4);
  justify-content: center;
  align-items:  center;
}

.overlay[data-variant="sheet"] {
  justify-content: center;
  align-items:  flex-end;
}

.overlay[data-variant="sidebar"] {
  justify-content: flex-start;
  align-items: stretch;
}

.overlay[data-variant="sidebar"][data-side="end"] {
  justify-content: flex-end;
}

.overlay__panel {
  display: flex;
  gap: calc(var(--space-3)  + var(--scroll-bleed));
  padding: var(--space-4);
  color: var(--color-text);
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  box-shadow: var(--surface-shadow);
  flex-direction: column;
  max-height: 100%;
}

.overlay__panel:focus {
  outline: none;
}

.overlay[data-variant="modal"] .overlay__panel {
  max-width: var(--overlay-width-md);
  width: 100%;
}

.overlay[data-size="sm"] .overlay__panel {
  max-width: var(--overlay-width-sm);
}

.overlay[data-size="lg"] .overlay__panel {
  max-width: var(--overlay-width-lg);
}

.overlay[data-tone="danger"] .overlay__panel {
  border-color: var(--color-danger);
}

.overlay[data-variant="sheet"] .overlay__panel {
  max-width: var(--overlay-width-lg);
  max-height: var(--sheet-max-height);
  border-radius: var(--radius-surface) var(--radius-surface) 0 0;
  width: 100%;
}

.overlay[data-snap="full"] .overlay__panel {
  height: var(--sheet-max-height);
}

.overlay[data-variant="sidebar"] .overlay__panel {
  width: var(--sidebar-width);
  border-radius: 0;
  max-width: 100%;
  height: 100%;
}

.overlay__header {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  justify-content: space-between;
}

.overlay__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  margin: 0;
  line-height: 1.3;
}

.overlay__close {
  display: inline-flex;
  width: var(--control-height);
  height: var(--control-height);
  color: var(--color-text-muted);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  background: none;
  flex: none;
  justify-content: center;
  align-items:  center;
  padding: 0;
}

.overlay__close:hover {
  color: var(--color-text);
  border-color: var(--color-border);
}

.overlay__body {
  flex: auto;
  min-height: 0;
}

.overlay__footer {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
}

.overlay--inline {
  position: static;
  display: block;
  width: var(--sidebar-width);
  max-width: 100%;
  height: auto;
}

.overlay--inline .overlay__panel {
  border-radius: var(--radius-surface);
  height: 100%;
}

.overlay::backdrop {
  background-color: #0000;
}

.overlay[data-overlay-top]::backdrop {
  background-color: var(--overlay-scrim);
}

@media (prefers-reduced-motion: no-preference) {
  .overlay {
    transition: overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
  }

  .overlay::backdrop {
    transition: background-color var(--duration-fast) var(--ease-interaction), overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete;
  }

  @starting-style {
    .overlay[data-overlay-top]::backdrop {
      background-color: #0000;
    }
  }

  .overlay__panel {
    opacity: 1;
    transition: opacity var(--duration-fast) var(--ease-interaction), transform var(--duration-fast) var(--ease-interaction);
    transform: none;
  }

  .overlay[data-variant="modal"]:not([open]) .overlay__panel {
    opacity: 0;
    transform: scale(.98);
  }

  .overlay[data-variant="sheet"]:not([open]) .overlay__panel {
    transform: translateY(100%);
  }

  .overlay[data-variant="sidebar"]:not([open]) .overlay__panel {
    transform: translateX(-100%);
  }

  .overlay[data-variant="sidebar"][data-side="end"]:not([open]) .overlay__panel {
    transform: translateX(100%);
  }

  @starting-style {
    .overlay[data-variant="modal"][open] .overlay__panel {
      opacity: 0;
      transform: scale(.98);
    }

    .overlay[data-variant="sheet"][open] .overlay__panel {
      transform: translateY(100%);
    }

    .overlay[data-variant="sidebar"][open] .overlay__panel {
      transform: translateX(-100%);
    }

    .overlay[data-variant="sidebar"][data-side="end"][open] .overlay__panel {
      transform: translateX(100%);
    }
  }
}

.todo-create {
  display: flex;
  align-items:  flex-start;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.todo-create .field {
  flex: 1;
}

.todo-create .btn {
  margin-top: calc(var(--font-size-sm) * 1.5 + var(--space-1));
}

.todo-toolbar {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.todo-list {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.todo-list[aria-busy="true"] {
  opacity: .6;
}

.todo-item {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
}

.todo-item .checkbox {
  flex: 1;
  min-width: 0;
}

.todo-item__time {
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.pagination {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ds-section {
  margin-block: var(--space-6);
}

.ds-row {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.ds-stack {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  align-items:  start;
}

.ds-color-sample {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-control);
  background: #fff;
}

.swatch-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.swatch {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
}

.swatch__chip {
  width: var(--space-6);
  height: var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

[data-design="office"] :focus-visible {
  outline: 1px dotted var(--color-text);
  outline-offset: 1px;
}

[data-design="office"] .btn {
  border-style: solid;
  border-width: 1px;
  border-color: var(--office-bevel-light) var(--office-bevel-dark) var(--office-bevel-dark) var(--office-bevel-light);
  box-shadow: none;
  font-weight: 400;
}

[data-design="office"] .btn--secondary, [data-design="office"] .btn--ghost {
  background: linear-gradient(var(--office-btn-top), var(--office-btn-bottom));
  color: var(--color-text);
}

[data-design="office"] .btn--secondary:not(:disabled):hover, [data-design="office"] .btn--ghost:not(:disabled):hover {
  background: linear-gradient(color-mix(in srgb, var(--office-btn-top), white 12%), color-mix(in srgb, var(--office-btn-bottom), white 12%));
}

[data-design="office"] .btn--primary {
  background: linear-gradient(color-mix(in srgb, var(--color-primary) 72%, white), var(--color-primary));
}

[data-design="office"] .btn--primary:not(:disabled):hover {
  background: linear-gradient(color-mix(in srgb, var(--color-primary) 58%, white), var(--color-primary-hover));
}

[data-design="office"] .btn:not(:disabled):active {
  border-color: var(--office-bevel-dark) var(--office-bevel-light) var(--office-bevel-light) var(--office-bevel-dark);
  transform: translate(1px, 1px);
}

[data-design="office"] .field__input {
  border-style: solid;
  border-width: 1px;
  border-color: var(--office-bevel-dark) var(--office-bevel-light) var(--office-bevel-light) var(--office-bevel-dark);
  background: var(--color-surface);
  border-radius: 1px;
}

[data-design="office"] .app-nav a {
  border-radius: 0;
}

[data-design="office"] .app-nav a:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  outline: 1px solid var(--color-primary);
}

[data-design="office"] .card {
  border-color: var(--office-bevel-light) var(--office-bevel-dark) var(--office-bevel-dark) var(--office-bevel-light);
}

[data-design="office"] .badge {
  border-radius: 2px;
}

[data-design="office"] .accordion__trigger {
  background: linear-gradient(var(--office-btn-top), var(--office-btn-bottom));
}

[data-design="office"] .accordion__trigger:hover {
  background: linear-gradient(color-mix(in srgb, var(--office-btn-top), white 12%), color-mix(in srgb, var(--office-btn-bottom), white 12%));
}

[data-design="office"] .accordion__item + .accordion__item {
  border-top-color: var(--office-bevel-dark);
}

[data-design="office"] .palette__trigger, [data-design="office"] .palette__native {
  border-style: solid;
  border-width: 1px;
  border-color: var(--office-bevel-dark) var(--office-bevel-light) var(--office-bevel-light) var(--office-bevel-dark);
  border-radius: 1px;
}

[data-design="office"] .palette__popup {
  border-color: var(--office-bevel-light) var(--office-bevel-dark) var(--office-bevel-dark) var(--office-bevel-light);
  background: var(--color-surface-raised);
  gap: 2px;
  padding: 2px;
}

[data-design="office"] .palette__groups, [data-design="office"] .palette__custom {
  padding: var(--space-2);
}

[data-design="office"] .palette__grid {
  gap: 2px;
}

[data-design="office"] .palette__swatch {
  border-color: var(--color-border);
  border-radius: 0;
}

[data-design="office"] .palette__swatch[aria-selected="true"] {
  box-shadow: none;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

[data-design="office"] .palette__tooltip {
  color: #000;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 0;
}

[data-design="kids"] .btn {
  font-weight: 800;
  box-shadow: 0 5px #0000002e;
}

[data-design="kids"] .btn--ghost {
  box-shadow: none;
}

[data-design="kids"] .accordion__trigger {
  font-weight: 800;
}

[data-design="kids"] .palette__trigger {
  font-weight: 800;
  box-shadow: 0 5px #0000002e;
}

[data-design="kids"] .palette__swatch {
  border-radius: var(--radius-full);
}

[data-design="kids"] .palette__tooltip {
  border-radius: var(--radius-full);
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  [data-design="kids"] .btn, [data-design="kids"] .field__input, [data-design="kids"] .app-nav a, [data-design="kids"] .todo-item, [data-design="kids"] .card, [data-design="kids"] .badge, [data-design="kids"] .palette__trigger, [data-design="kids"] .palette__swatch, [data-design="kids"] .checkbox__input {
    transition: transform var(--duration-fast) var(--ease-interaction), box-shadow var(--duration-fast) var(--ease-interaction), background-color var(--duration-fast) var(--ease-interaction), border-color var(--duration-fast) var(--ease-interaction), color var(--duration-fast) var(--ease-interaction);
  }

  [data-design="kids"] .btn:not(:disabled):hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale)) rotate(var(--hover-rotate));
    box-shadow: 0 9px #0000002e;
  }

  [data-design="kids"] .btn:not(:disabled):active {
    transform: translateY(2px) scale(var(--press-scale));
    box-shadow: 0 1px #0000002e;
  }

  [data-design="kids"] .palette__swatch:hover {
    transform: scale(1.25) rotate(var(--hover-rotate));
  }

  [data-design="kids"] .palette__swatch:focus-visible {
    transform: scale(1.25) rotate(var(--hover-rotate));
  }

  [data-design="kids"] .palette__trigger:not(:disabled):hover {
    transform: translateY(var(--hover-lift)) scale(var(--hover-scale)) rotate(var(--hover-rotate));
    box-shadow: 0 9px #0000002e;
  }

  [data-design="kids"] .app-nav a:hover {
    color: var(--color-primary);
    transform: scale(1.12)rotate(-4deg);
  }

  [data-design="kids"] .field__input:focus {
    transform: scale(var(--focus-scale));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-focus) 55%, transparent);
    animation: kids-focus-pop var(--duration-fast) var(--ease-interaction);
  }

  [data-design="kids"] .field__input:focus-visible {
    transform: scale(var(--focus-scale));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-focus) 55%, transparent);
    animation: kids-focus-pop var(--duration-fast) var(--ease-interaction);
  }

  [data-design="kids"] .card:hover, [data-design="kids"] .todo-item:hover {
    transform: translateY(-6px)rotate(-1deg)scale(1.02);
  }

  [data-design="kids"] .checkbox__input:checked {
    animation: kids-check-pop .4s var(--ease-interaction);
  }

  [data-design="kids"] .spinner {
    animation: .55s cubic-bezier(.6,0,.4,1) infinite spinner-rotate;
  }

  [data-design="kids"] .accordion__trigger:hover .accordion__chevron {
    transform: translateY(3px)scale(1.2);
  }

  [data-design="kids"] .accordion__item[data-open] .accordion__trigger:hover .accordion__chevron {
    transform: rotate(180deg)scale(1.2);
  }
}

@keyframes kids-focus-pop {
  0% {
    transform: scale(1);
  }

  55% {
    transform: scale(calc(var(--focus-scale)  + .06));
  }

  100% {
    transform: scale(var(--focus-scale));
  }
}

@keyframes kids-check-pop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.5)rotate(-12deg);
  }

  70% {
    transform: scale(.85)rotate(6deg);
  }

  100% {
    transform: scale(1);
  }
}

.hud-layer {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-surface);
  inset: 0;
}

.hud-layer__slot {
  position: absolute;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  flex-direction: column;
  max-width: min(100%, 22rem);
}

.hud-layer__slot--top-left {
  align-items:  flex-start;
  top: 0;
  left: 0;
}

.hud-layer__slot--top-right {
  align-items:  flex-end;
  top: 0;
  right: 0;
}

.hud-layer__slot--bottom-left {
  align-items:  flex-start;
  bottom: 0;
  left: 0;
}

.hud-layer__slot--bottom-right {
  align-items:  flex-end;
  bottom: 0;
  right: 0;
}

.hud-layer__slot--bottom-center {
  align-items:  center;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.hud-panel {
  pointer-events: auto;
  color: #f4efe2;
}

.hud-hint {
  pointer-events: none;
  font-size: var(--font-size-sm);
  color: #f4efe2b8;
  border-radius: var(--radius-control);
  padding: var(--space-1) var(--space-3);
  text-align: center;
  background: #0b121a8c;
}

.aim-hud {
  display: flex;
  align-items:  center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width) solid #f4efe22e;
  border-radius: var(--radius-surface);
  background: #0b121ad1;
}

.aim-hud__dial {
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  width: 5.5rem;
  height: 5.5rem;
}

.aim-hud__dial:active {
  cursor: grabbing;
}

.aim-hud__dial svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aim-hud__dial-face {
  fill: #f4efe20f;
  stroke: #f4efe259;
  stroke-width: 2;
}

.aim-hud__dial-tick {
  stroke: #f4efe24d;
  stroke-width: 2;
}

.aim-hud__dial-needle {
  stroke: #f4efe2;
  stroke-width: 4;
  stroke-linecap: round;
}

.aim-hud__dial-knob {
  fill: #f4efe2;
}

.aim-hud__dial-hub {
  fill: #f4efe2cc;
}

.aim-hud__stack {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
  min-width: 9rem;
}

.aim-hud__power {
  position: relative;
  border-radius: var(--radius-full);
  cursor: pointer;
  touch-action: none;
  background: #f4efe229;
  height: 1.1rem;
}

.aim-hud__power-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: var(--radius-full);
  min-width: 1.1rem;
  left: 0;
}

.aim-hud__power-thumb {
  position: absolute;
  border-radius: var(--radius-full);
  background: #f4efe2;
  border: 2px solid;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: -.525rem;
  top: 50%;
  transform: translateY(-50%);
}

.aim-hud__readout {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: #f4efe2d9;
  margin: 0;
}

.aim-hud__readout strong {
  font-size: var(--font-size-body);
  color: #f4efe2;
}

.aim-hud__dial:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 3px;
}

.aim-hud__power:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 3px;
}

.billiards-aim-readout {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  margin: 0;
  padding-block-start: 2px;
  padding-block-end: 2px;
}

.billiards-aim-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
}

.billiards-page {
  width: calc(100vw - 2 * var(--space-4));
  max-width: 88rem;
  margin-left: 50%;
  transform: translateX(-50%);
}

.billiards-header {
  margin-bottom: var(--space-4);
}

.billiards-header h2 {
  margin: 0 0 var(--space-1);
}

.billiards-header p {
  margin: 0;
}

.billiards-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: var(--space-4);
  align-items:  start;
}

@media (width <= 64rem) {
  .billiards-layout {
    grid-template-columns: 1fr;
  }
}

.billiards-canvas {
  position: relative;
  border-radius: var(--radius-surface);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  background: #101820;
  height: min(68vh, 36rem);
  min-height: 20rem;
}

.billiards-side, .billiards-panel {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;
}

.billiards-group {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-surface);
  background: var(--color-surface);
  padding: var(--space-3);
}

.billiards-group h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-body);
}

.billiards-slider {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 5.5rem;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  padding-block-start: 2px;
  padding-block-end: 2px;
}

.billiards-slider__label {
  color: var(--color-text-muted);
}

.billiards-slider__value {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

.billiards-slider input[type="range"] {
  accent-color: var(--color-primary);
  width: 100%;
  margin: 0;
}

.billiards-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.billiards-cue-potted-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
}

.billiards-readout__time {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
}

.billiards-readout__list {
  list-style: none;
  margin: 0 0 var(--space-3);
  display: flex;
  gap: var(--space-1);
  flex-direction: column;
  padding: 0;
}

.billiards-readout__row {
  display: flex;
  align-items:  center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.billiards-readout__row code {
  margin-left: auto;
}

.billiards-readout__dot {
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  width: .75rem;
  height: .75rem;
}

.billiards-readout__subtitle {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
}

.billiards-readout__empty {
  font-size: var(--font-size-sm);
  margin: 0;
}

.billiards-events {
  padding: 0 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  gap: 2px;
  max-height: 12rem;
  margin: 0;
}

.billiards-group .checkbox__input:checked + .checkbox__label {
  text-decoration: none;
  color: var(--color-text);
}