:root {
  color-scheme: light;
  --ui-ink: #233e39;
  --ui-muted: #4e6259;
  --ui-paper: #fffaf0;
  --ui-page: #edf5e9;
  --ui-edge: #afc1ac;
  --ui-primary: #296654;
  --ui-primary-dark: #214b40;
  --ui-primary-soft: #e3f2e4;
  --ui-selection-fill: #d7edbc;
  --ui-selection-edge: #44724c;
  --ui-selection-ink: #254532;
  --ui-gold: #ffd66d;
  --ui-gold-ink: #513919;
  --ui-gold-edge: #996825;
  --ui-disabled: #ecede5;
  --ui-disabled-ink: #556257;
  --ui-radius: 6px;
  --ui-panel-radius: 10px;
  --ui-shadow: 0 5px 14px #25473c2b;
  --ui-key-shadow: inset 0 1px #fffc, inset 0 -3px #233e392e;
  --ui-key-down: inset 0 2px 3px #233e3945;
  --ui-enter: 190ms;
  --ui-settle: cubic-bezier(.2, .7, .2, 1);
  --ui-quick: 140ms;
  --ui-panel-enter: 230ms;
  --ui-gutter: clamp(12px, 3vw, 64px);
  --ui-gap: clamp(8px, 2vw, 24px);
  --ui-left: max(var(--ui-gutter), env(safe-area-inset-left));
  --ui-right: max(var(--ui-gutter), env(safe-area-inset-right));
  --ui-top: max(var(--ui-gutter), env(safe-area-inset-top));
  --ui-bottom: max(var(--ui-gutter), env(safe-area-inset-bottom));
}

:where(button:not(:disabled, .cell), .button, .ui-key) { box-shadow: var(--ui-key-shadow); }
:where(button:not(:disabled, .cell), .button, .ui-key):active { box-shadow: var(--ui-key-down); }

.metal-frame {
  border: var(--metal-frame-width, 24px) solid #8ca4b3;
  border-image: url('./panel-frame.svg') 36 stretch;
  border-radius: var(--ui-panel-radius);
}

:where(a, button, input, select):focus-visible {
  outline: 3px solid var(--ui-primary-dark);
  outline-offset: 2px;
}

.home-link {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border: 1px solid var(--ui-edge); border-radius: var(--ui-radius);
  color: var(--ui-primary-dark); background: var(--ui-paper); text-decoration: none;
  pointer-events: auto; touch-action: manipulation;
}
.home-link .ui-icon { width: 23px; height: 23px; }

.dialog-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 48px; margin-bottom: 8px;
}
.dialog-heading form { margin: 0; flex: none; }
.dialog-close {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: 2px solid #527263; border-radius: 13px 10px 14px 11px;
  background: #fff3d4; color: #29453c;
  box-shadow: inset 0 2px #ffffff9e, 0 3px 0 #45625580;
  cursor: pointer; touch-action: manipulation;
}
.dialog-close::before {
  content: ''; width: 30px; height: 30px;
  background: url('./play-icons.svg') 0% 25% / 500% 500% no-repeat;
  pointer-events: none;
}
.dialog-close:active { transform: translateY(2px); }
.dialog-close:focus-visible { outline: 3px solid #234b60; outline-offset: 2px; }

@keyframes ui-lift-in {
  from { opacity: .62; translate: 0 var(--ui-rise, 8px); }
}

@keyframes ui-panel-in {
  from { opacity: .46; translate: 0 8px; scale: .988; }
}

@keyframes ui-text-in {
  from { opacity: .56; translate: 0 .24em; clip-path: inset(-.12em 0 38% 0); }
  to { clip-path: inset(-.12em 0); }
}

@keyframes ui-fade {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open], dialog[open]::backdrop { animation: ui-fade var(--ui-enter) ease-out; }
}