/* Colorful Studio. White canvas, vivid accents, neutral ink. Generated sites own their design. */
:root, :root:not([data-theme="dark"]) {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f6; --surface-3: #eaeaec;
  --ink: #202124; --ink-2: #45474b; --ink-3: #5f6368;
  --line: #dedee2; --line-strong: #767676;
  --accent: #d0005b; --accent-hover: #ab004b; --accent-ink: #ffffff;
  --accent-soft: #ffe5f1; --accent-text: #ab004b; --focus: #202124;
  --lemon: #ffeb3b; --lime: #b8f542; --mint: #70ebc0; --color-ink: #202124;
  --butter: var(--lemon); --butter-ink: var(--color-ink); --leaf: var(--mint); --leaf-ink: var(--color-ink);
  --danger: #bf1741; --danger-soft: #ffe5ed; --danger-text: #a30c33;
  --ok-soft: #d7faec; --ok-text: #125c3e; --warn-soft: #fff5a6; --warn-text: #494200;
  --scroll-thumb: #a2a3a7; --scroll-thumb-hover: #73757a; --stage: #efeff1;
  --font: "Studio Instrument", system-ui, sans-serif; --font-display: var(--font);
  --radius: 18px; --radius-sm: 12px;
  --shadow-1: 0 2px 4px rgb(32 33 36 / .04);
  --shadow-2: 0 6px 24px rgb(32 33 36 / .1);
  --ease: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1); --dur: 160ms;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #202124; --surface: #292a2d; --surface-2: #333438; --surface-3: #424348;
  --ink: #ffffff; --ink-2: #e0e0e4; --ink-3: #b9bbc1;
  --line: #575960; --line-strong: #989aa1;
  --accent: #ff82b8; --accent-hover: #ffa8cd; --accent-ink: #202124;
  --accent-soft: #52243b; --accent-text: #ff9bc6; --focus: #ffeb3b;
  --danger: #ff8cab; --danger-soft: #4d2630; --danger-text: #ffabc1;
  --ok-soft: #203e31; --ok-text: #9af2cc; --warn-soft: #3c3a20; --warn-text: #fff18a;
  --scroll-thumb: #73757a; --scroll-thumb-hover: #a2a3a7; --stage: #191a1c;
  color-scheme: dark;
}
body { font-family: var(--font); }
.brightlook-symbol { display: inline-block; width: 36px; height: 36px; flex: 0 0 36px; background: var(--accent); mask-image: url('./assets/brand/brightlook-mark-v2.png'); mask-size: 130%; mask-position: center; mask-repeat: no-repeat; }
.brightlook-wordmark { font-family: var(--font); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.auth-studio .brightlook-symbol { background: #d0005b; }
:root[data-theme="dark"] .auth-studio .brightlook-symbol { background: #ff82b8; }
/* Router focus announces the new page; noninteractive headings are not form controls. */
.app-root h1[tabindex="-1"]:focus { outline: none; }
.btn { border-radius: var(--radius-sm); }
.btn-primary { font-weight: 600; }
.workspace-shell .brand { letter-spacing: -.055em; }
.studio-mark > span { border-radius: 3px 3px 1px 1px; }
.studio-mark > span:nth-child(2) { background: var(--lime); opacity: 1; }
.studio-mark > span:nth-child(3) { background: var(--accent); opacity: 1; }
.workspace-shell .topbar { background: var(--bg); border-color: var(--line); }
.workspace-shell .workspace-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.workspace-shell .page-head h1 { font-weight: 550; }
.workspace-shell .site-symbol { background: var(--butter); color: var(--butter-ink); border-color: transparent; border-radius: 8px 16px 8px 8px; }
.workspace-shell .work-section, .workspace-shell .metric-group { border-radius: 20px; }
.workspace-shell .section-heading { background: var(--surface); }
.workspace-shell .first-site { background: var(--surface); color: var(--ink); }
.workspace-shell .first-site p { color: var(--ink-3); }
.workspace-shell .first-site .workspace-fold { margin-bottom: 4px; }
.workspace-shell .first-site .workspace-fold > span { background: var(--accent); border-radius: 4px; }
.workspace-shell .first-site .workspace-fold > span:nth-child(2) { background: var(--accent-hover); }
.workspace-greeting { position: relative; overflow: clip; padding: 30px 34px; border-radius: 24px; background: var(--mint); margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.workspace-greeting > div { min-width: 0; }
.workspace-greeting p { color: var(--butter-ink); max-width: 48ch; font-size: 1rem; }
.workspace-greeting h2 { margin-bottom: 10px; color: var(--butter-ink); font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 550; letter-spacing: -.035em; }
.workspace-greeting .greeting-art { flex-shrink: 0; width: 82px; height: 82px; position: relative; color: #d0005b; }
.greeting-art::before, .greeting-art::after { content: ""; position: absolute; inset: 4px; border-radius: 24px; background: currentColor; transform: rotate(22.5deg); }
.greeting-art::after { transform: rotate(67.5deg); }
.greeting-art > span { position: absolute; z-index: 1; inset: 27px; border-radius: 50%; background: var(--butter); }
@media (max-width: 560px) {
  .workspace-greeting { padding: 24px; align-items: flex-start; gap: 16px; }
  .workspace-greeting .greeting-art { width: 48px; height: 48px; }
  .greeting-art::before, .greeting-art::after { border-radius: 14px; }
  .greeting-art > span { inset: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-shell *, .welcome-shell *::before, .welcome-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}