/* Generated from src/tokens.json. Do not edit this file directly. */
:root {
  --yy-font-sans: "Plus Jakarta Sans", "Avenir Next", Avenir, "PingFang SC", "Hiragino Sans GB", sans-serif;
  --yy-font-mono: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  --yy-label-tracking: 0.08em;
  --yy-ground: #F6F7F8;
  --yy-ink: #242220;
  --yy-ink-muted: #55534E;
  --yy-ink-quiet: #6D6A63;
  --yy-hairline: #DCE1E6;
  --yy-slot: #EEF1F4;
  --yy-focus: #242220;
  --yy-scrim: rgba(36, 34, 32, 0.16);
  --yy-pane: rgba(250, 252, 255, 0.55);
  --yy-pane-strong: rgba(252, 253, 255, 0.72);
  --yy-control: rgba(255, 255, 255, 0.32);
  --yy-control-hover: rgba(255, 255, 255, 0.56);
  --yy-glass-edge: rgba(255, 255, 255, 0.96);
  --yy-glass-border: rgba(86, 101, 116, 0.18);
  --yy-shadow-pane: 0 24px 64px rgba(64, 79, 97, 0.14), 0 8px 22px rgba(64, 79, 97, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  --yy-glass-blur: 32px;
  --yy-glass-saturate: 1.08;
  --yy-radius-control: 10px;
  --yy-radius-panel: 18px;
  --yy-radius-modal: 26px;
  --yy-radius-pill: 999px;
  --yy-space-2xs: 4px;
  --yy-space-xs: 8px;
  --yy-space-sm: 12px;
  --yy-space-md: 16px;
  --yy-space-lg: 24px;
  --yy-space-xl: 32px;
  --yy-space-2xl: 48px;
  --yy-duration-micro: 80ms;
  --yy-duration-quick: 150ms;
  --yy-duration-fast: 250ms;
  --yy-duration-medium: 350ms;
  --yy-duration-slow: 400ms;
  --yy-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --yy-ease-in-out: ease-in-out;
  --yy-motion-distance: 8px;
  --yy-motion-scale: 0.98;
}

.yy-studio-surface {
  background: var(--yy-pane);
  border: 1px solid var(--yy-glass-border);
  border-top-color: var(--yy-glass-edge);
  box-shadow: var(--yy-shadow-pane);
  -webkit-backdrop-filter: blur(var(--yy-glass-blur)) saturate(var(--yy-glass-saturate));
  backdrop-filter: blur(var(--yy-glass-blur)) saturate(var(--yy-glass-saturate));
}

.yy-studio-control {
  border: 1px solid var(--yy-glass-border);
  border-radius: var(--yy-radius-control);
  background: var(--yy-control);
  color: var(--yy-ink);
  transition: background var(--yy-duration-quick) var(--yy-ease-out), transform var(--yy-duration-quick) var(--yy-ease-out), border-color var(--yy-duration-quick) var(--yy-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .yy-studio-control:hover { background: var(--yy-control-hover); transform: translateY(-1px); }
}

.yy-studio-control:focus-visible { outline: 2px solid var(--yy-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .yy-studio-control { transition: none; }
}