/* useanvyl.com studio pages (scripts/build-studio.mjs). Same Forge Ember palette as the Anvyl landing. */
:root {
  --bg: #000;
  --bg-elev: #0d0d10;
  --fg: #fff;
  --muted: #9ca3af;
  --hairline: #1f2937;
  --ember: #ff6b1a;
  --ember-glow: #ffb24a;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.6 -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
a:hover { color: var(--ember-glow); }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-left)); }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 20px; letter-spacing: -0.02em; }
.brand svg { width: 26px; height: 26px; color: var(--fg); }
.bar nav { display: flex; gap: 20px; font-size: 15px; color: var(--muted); }
.bar nav a { text-decoration: none; }

h1, h2, h3 { letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
h2 { font-size: 28px; font-weight: 800; margin: 72px 0 20px; }

.hero { padding: 72px 0 8px; }
.hero h1 { font-size: clamp(40px, 7.5vw, 76px); font-weight: 900; max-width: 14ch; }
.hero p { color: var(--muted); font-size: clamp(18px, 2.4vw, 21px); max-width: 38ch; margin: 20px 0 0; }
.hero-small h1 { font-size: clamp(36px, 6vw, 56px); }

.goal { margin-top: 56px; padding: 28px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--bg-elev); }
.goal h2 { margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.goal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.asof { margin: 0; color: var(--muted); font-size: 14px; }
.goal-figure { margin: 14px 0 16px; font-size: clamp(22px, 4vw, 30px); color: var(--muted); }
.goal-figure strong { color: var(--fg); font-size: clamp(40px, 8vw, 64px); font-weight: 900; letter-spacing: -0.03em; margin-right: 6px; }
.meter { height: 12px; border-radius: 99px; background: #1a1a1f; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ember), var(--ember-glow)); box-shadow: 0 0 18px rgba(255, 107, 26, 0.6); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.stats div { padding: 14px 16px; border-radius: 16px; background: #141418; }
.stats dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.stats dd { margin: 4px 0 0; font-size: 26px; font-weight: 800; }
.note { color: var(--muted); font-size: 14px; margin: 18px 0 0; }

.apps { display: grid; gap: 14px; }
.app { display: flex; gap: 18px; align-items: flex-start; padding: 20px; border: 1px solid var(--hairline); border-radius: 22px; }
.app-icon { width: 64px; height: 64px; border-radius: 15px; flex: none; background: #111; }
.app h3 { font-size: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.app p { margin: 6px 0 0; color: var(--muted); }
.app .links { display: flex; gap: 18px; font-weight: 600; color: var(--fg); }
.pill { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--hairline); color: var(--muted); }
.pill-live { color: #000; background: var(--ember); border-color: var(--ember); }

.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.posts a { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.posts time, .posts em { font-size: 13px; color: var(--muted); font-style: normal; }
.posts strong { font-size: 20px; letter-spacing: -0.015em; }
.posts span { color: var(--muted); }
.more { display: inline-block; margin-top: 18px; font-weight: 700; }

.post { max-width: 680px; padding: 56px 0 0; }
.post h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 900; margin: 8px 0 24px; }
.post h2 { font-size: 24px; margin: 40px 0 10px; }
.post p, .post li { color: #d1d5db; }
.post ul { padding-left: 20px; }
.post code { font: 15px ui-monospace, "SF Mono", monospace; background: #17171c; padding: 1px 6px; border-radius: 6px; }
.post-meta { color: var(--muted); font-size: 14px; margin: 0; }
.back { margin-top: 40px; font-weight: 700; }

.foot { margin-top: 96px; padding: 32px max(16px, env(safe-area-inset-left)) 48px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .bar nav { gap: 14px; }
  .app { flex-direction: column; }
}