/* One canonical interface palette for the homepage and all four tools. */
:root[data-trail-feature] {
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --ui-bg: #f5f5f7;
  --ui-surface: #fff;
  --ui-text: #101318;
  --ui-secondary: #646b78;
  --ui-accent: #356247;
  --ui-accent-soft: #eaf1ec;
  --ui-line: #e4e7eb;
  --ui-radius: 1.375rem;
  --ui-control-radius: .75rem;
  --ui-gutter: 1.125rem;
  --ui-shadow: 0 8px 30px rgb(25 40 31 / 5%);
  font-family: var(--ui-font);
  font-size: 100%;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

:root[data-trail-feature] body {
  margin: 0;
  font-family: var(--ui-font);
  line-height: 1.6;
  color: var(--ui-text);
  background: var(--ui-bg);
}

:root[data-trail-feature] :where(button, input, select, textarea) {
  font-family: var(--ui-font);
  font-optical-sizing: auto;
}

:root[data-trail-feature] :where(button, a, summary) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:root[data-trail-feature] :where(input, select, textarea) {
  font-size: 1rem;
  accent-color: var(--ui-accent);
}

:root[data-trail-feature] :where(h1, h2, h3) {
  font-family: var(--ui-font);
  font-optical-sizing: auto;
  letter-spacing: -.025em;
}

:root[data-trail-feature] :where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ui-accent);
  outline-offset: 3px;
}

:root[data-trail-feature] :where(button:not(:disabled), summary):active {
  filter: brightness(.95);
}

:root[data-trail-feature="home"] {
  --page: var(--ui-bg);
  --surface: var(--ui-surface);
  --ink: var(--ui-text);
  --secondary: var(--ui-secondary);
  --green: var(--ui-accent);
}

:root[data-trail-feature="home"] .feature-description,
:root[data-trail-feature="home"] .home-footer {
  font-size: .8125rem;
}

:root[data-trail-feature="studio"] .feature-home-bar {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: 3.25rem;
  padding: 0 .5rem;
  border-bottom: 1px solid var(--ui-line);
  background: rgb(255 255 255 / 94%);
  color: var(--ui-text);
  backdrop-filter: blur(20px) saturate(150%);
}

:root[data-trail-feature="studio"] .feature-home-button {
  width: max-content;
  max-width: 100%;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem;
  border-radius: var(--ui-control-radius);
  color: var(--ui-accent);
  font-family: var(--ui-font);
  font-size: .875rem;
  font-weight: 600;
}

:root[data-trail-feature="studio"] .feature-home-title {
  font-size: .9375rem;
  font-weight: 650;
  text-align: center;
}

:root[data-trail-feature="studio"] .feature-home-bar [role="status"] {
  justify-self: end;
  font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-trail-feature] *,
  :root[data-trail-feature] *::before,
  :root[data-trail-feature] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-trail-feature="studio"] .feature-home-bar {
    background: var(--ui-surface);
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root[data-trail-feature] { --ui-line: #929b96; --ui-secondary: #414b46; }
}