/* RELUMA × uberdesigner
   Dark version of the uberdesigner.ai design system, layered over reluma.css / studio.css.
   Tokens follow uberdesigner (Instrument Sans, pill controls, 12px uppercase captions,
   10px page margin, purple accent); the surface stays dark because the light on the
   image is the product. Remove this file's <link> to return to the original RELUMA look. */

:root {
  /* uberdesigner tokens, dark */
  --bg-primary: #080808;
  --bg-secondary: #141414;
  --bg-tertiary: #1f1f1f;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.64);
  --text-tertiary: rgba(255, 255, 255, 0.36);
  --stroke-primary: rgba(255, 255, 255, 0.32);
  --stroke-secondary: rgba(255, 255, 255, 0.12);
  --hover-layer: rgba(255, 255, 255, 0.08);
  --accent: #9568f9;
  --accent-fill: #8657e7;
  --accent-ink: #b59bff;
  --on-accent: #ffffff;
  --radius-pill: 999px;
  --radius-panel: 4px;
  --radius-tag: 2px;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-code: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --micro-tint: 0.18s;
  --micro-tint-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --spring-ease: linear(0 0%, 0.02 2.5%, 0.072 5%, 0.144 7.5%, 0.227 10%, 0.316 12.5%, 0.406 15%, 0.492 17.5%, 0.573 20%, 0.647 22.5%, 0.713 25%, 0.77 27.5%, 0.82 30%, 0.863 32.5%, 0.898 35%, 0.927 37.5%, 0.951 40%, 0.969 42.5%, 0.984 45%, 0.995 47.5%, 1.003 50%, 1.008 52.5%, 1.012 55%, 1.014 57.5%, 1.015 60%, 1.015 62.5%, 1.015 65%, 1.014 67.5%, 1.013 70%, 1.011 72.5%, 1.01 75%, 1.009 77.5%, 1.007 80%, 1.006 82.5%, 1.005 85%, 1.004 87.5%, 1.003 90%, 1.003 92.5%, 1.002 95%, 1.001 97.5%, 1 100%);

  /* RELUMA variables mapped onto them */
  --bg: var(--bg-primary);
  --panel: var(--bg-secondary);
  --fg: var(--text-primary);
  --white: #ffffff;
  --muted: var(--text-secondary);
  --dim: var(--text-tertiary);
  --line: var(--stroke-secondary);
  --line-2: rgba(255, 255, 255, 0.2);
  --display: var(--font-sans);
  --mono: var(--font-sans);
  --gutter: 10px;
  --top: 116px;
  --bottom: 24px;
}

body { font-family: var(--font-sans); font-size: 16px; line-height: 20px; }
.mono, .note, .label, .caption, .readout, .controls, .hint, .cta, .rail, .plabel, .chip, .switch { font-family: var(--font-sans); }

/* ---------- type: uberdesigner scale ---------- */
.display { font-weight: 400; font-size: clamp(48px, 6.4vw, 92px); line-height: 1; letter-spacing: -0.02em; }
.note { max-width: 300px; font-size: 16px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.label { gap: 8px; padding: 0; border: 0; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }
.label span { color: var(--text-primary); }
.caption { max-width: 300px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; color: var(--text-secondary); }
.mono { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; }
.stack { gap: 16px; }
.stack-lg { gap: 24px; }

/* ---------- buttons: pills, 40px, lowercase ---------- */
.cta {
  height: 40px; padding: 0 20px; gap: 8px;
  border: 1px solid var(--stroke-primary);
  font-size: 18px; line-height: 20px; font-weight: 500; letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--text-primary);
  transition: background var(--micro-tint) var(--micro-tint-ease), border-color var(--micro-tint) var(--micro-tint-ease), color var(--micro-tint) var(--micro-tint-ease);
}
.cta:hover { border-color: var(--text-primary); background: var(--hover-layer); }
.cta .cta-dot { display: none; }
.cta--solid, button.cta.cta--solid { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.cta--solid:hover, button.cta.cta--solid:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- header: 60px, logo mark + name, lowercase nav ---------- */
.site-header { height: calc(60px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--pad-r) 0 var(--pad-l); }
.site-header::before { inset: 0 0 -20px; }
/* RELUMA wordmark with a "by uberdesigner" line under it */
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; color: var(--text-primary); }
.brand img { width: 94px; height: auto; }
.brand-by { font-size: 10px; line-height: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-primary); }
.header-right { gap: 24px; }
.nav { gap: 20px; }
.nav a { font-size: 18px; line-height: 20px; font-weight: 500; letter-spacing: -0.02em; text-transform: lowercase; opacity: 1; color: var(--text-primary); transition: color var(--micro-tint) var(--micro-tint-ease); }
.nav a:hover { color: var(--text-secondary); }
.nav a[aria-current="page"] { text-decoration: none; color: var(--text-primary); }
.nav a.nav-ext { color: var(--text-secondary); }
.nav a.nav-ext:hover { color: var(--text-primary); }

/* ---------- stage details ---------- */
.frame-tags { top: 10px; left: 10px; right: 10px; color: var(--text-secondary); }
.frame-tags.mono, .frame-tags { font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; }
.hint { gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.readout div { padding: 10px 0 12px; border-top-color: var(--stroke-secondary); gap: 2px; }
.readout dt { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }
.readout dd { font-size: 14px; line-height: 20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rail button { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.rail { width: 112px; gap: 4px; }
.plabel { font-size: 12px; line-height: 16px; font-weight: 500; border-left-color: var(--stroke-primary); }
.frame--pg { border-radius: var(--radius-panel); overflow: hidden; }

/* ---------- controls ---------- */
.controls .row { padding: 10px 0 12px; border-top-color: var(--stroke-secondary); }
.term { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-secondary); }
.val { font-size: 14px; line-height: 20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.presets { gap: 6px; }
.chip {
  height: 28px; padding: 0 12px;
  border: 1px solid var(--stroke-secondary);
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-secondary);
  transition: background var(--micro-tint) var(--micro-tint-ease), color var(--micro-tint) var(--micro-tint-ease), border-color var(--micro-tint) var(--micro-tint-ease);
}
.chip:hover { color: var(--text-primary); border-color: var(--stroke-primary); background: var(--hover-layer); }
.chip[aria-pressed="true"], .views .chip[aria-checked="true"] { background: var(--white); color: #000; border-color: var(--white); }
.switch { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.switch[aria-pressed="true"] { color: var(--text-primary); }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--text-primary) 0 var(--fill, 50%), var(--stroke-secondary) var(--fill, 50%) 100%); }
.swatch[aria-checked="true"] { outline-color: var(--text-primary); }

/* ---------- footer: one caption line, as on uberdesigner ---------- */
.site-footer { padding-block: 24px; border-top-color: var(--stroke-secondary); }
.site-footer .caption { max-width: 720px; }

/* ---------- studio ---------- */
.studio { padding-top: 104px; }
.s-frame { border-radius: var(--radius-panel); overflow: hidden; }
.drop { border-radius: var(--radius-panel); }
.drop::before { border-radius: var(--radius-panel); }
.drop-title { font-size: 16px; line-height: 20px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.steps { font-family: var(--font-sans); }
.steps li { border-top-color: var(--stroke-secondary); }
.steps .val { font-size: 14px; }
.hint-inline { font-family: var(--font-sans); font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.help-btn { font-family: var(--font-sans); font-size: 10px; }
.help-tip { font-family: var(--font-sans); font-size: 13px; line-height: 18px; border-radius: var(--radius-panel); background: var(--bg-tertiary); border-color: var(--stroke-secondary); }
.x-tabs .chip { height: 32px; font-size: 15px; padding: 0 14px; }
.x-steps { font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.x-steps li { border-top-color: var(--stroke-secondary); grid-template-columns: 28px 1fr; }
.x-steps code { font-family: var(--font-code); font-size: 13px; color: var(--accent-ink); }
.code { border-radius: var(--radius-panel); border-color: var(--stroke-secondary); overflow: hidden; }
.code-bar { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; text-transform: uppercase; border-bottom-color: var(--stroke-secondary); }
.code-bar .cta { height: 32px; padding: 0 14px; font-size: 15px; }
.code code { font-family: var(--font-code); font-size: 13px; }
.s-right .row.slider { grid-template-columns: 124px 1fr 40px; }
.playground .controls .row.slider { grid-template-columns: 104px 1fr 36px; }

@media (max-width: 820px) {
  :root { --gutter: 10px; --top: 80px; --bottom: 20px; }
  .site-header { height: calc(56px + env(safe-area-inset-top, 0px)); }
  .display { font-size: clamp(40px, 11.5vw, 60px); }
}

.x-actions .caption a { color: var(--accent-ink); text-underline-offset: 3px; }

/* ---------- inside uberdesigner (D-183): /tools/reluma frames these pages and brings the site header ---------- */
.framed .site-header { display: none; }
.framed .studio { padding-top: 44px; } /* 104 less its own 60 px header */
.landing-framed .playground, .landing-framed .site-footer { display: none; } /* the pop-up ends at "from pixels to presence" */
.s-right .row.to-export { display: grid; gap: 8px; padding-top: 16px; }
.to-export .cta { width: 100%; justify-content: center; }
.takes:empty { display: none; }
.takes a { color: var(--accent-ink); text-underline-offset: 3px; margin-left: 6px; }
/* The pop-up's first screen (D-183): the story runs on scroll, so it says so under the cursor hint (one 20 px line + 8) */
#heroUI .hint-scroll { top: calc(100% + 12px + 28px); }