:root {
  --bg: #07080f;
  --panel: #10121d;
  --panel-2: #171a29;
  --line: #262a40;
  --text: #eef0ff;
  --muted: #8f95b8;
  --accent: #107c10;
  --accent-2: #9bf00b;
  --pink: #6cc24a;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  min-height: 100vh;
  background-image:
    radial-gradient(60rem 30rem at 15% -10%, rgba(16, 124, 16, 0.22), transparent 60%),
    radial-gradient(50rem 28rem at 90% 0%, rgba(155, 240, 11, 0.14), transparent 60%);
  background-repeat: no-repeat;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }

/* nav */
.nav {
  display: flex; align-items: center; gap: 28px;
  padding: 18px max(20px, 4vw);
  position: sticky; top: 0; z-index: 10;
  background: rgba(7, 8, 15, 0.7); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(38, 42, 64, 0.6);
}
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.logo-img { display: block; width: 32px; height: 32px; }
.logo-text b { font-weight: 800; background: linear-gradient(90deg, #107c10, #52b043); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { color: var(--accent-2); margin-right: 4px; }
.main-nav { display: flex; gap: 6px; margin-inline: auto; }
.main-nav a { color: var(--muted); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 8px; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.main-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.main-nav a[aria-current="page"] { color: var(--text); }
.cta-green {
  display: inline-flex; align-items: center; white-space: nowrap;
  background: #107c10; color: #fff; font: inherit; font-size: 14.5px; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; border: 0; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(16, 124, 16, 0.25); transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.cta-green:hover { background: #0e6b0e; box-shadow: 0 0 0 4px rgba(16, 124, 16, 0.32); }
.cta-green:active { transform: translateY(1px); }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 16px; height: 2px; background: var(--text); content: ""; border-radius: 2px; }
.menu-btn span { top: 18px; } .menu-btn span::before { top: -5px; left: 0; } .menu-btn span::after { top: 5px; left: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.simple-page { max-width: 640px; margin: 0 auto; padding: 120px max(20px, 4vw) 100px; text-align: center; }
.simple-page h1 { font-size: clamp(32px, 6vw, 48px); }
.simple-page .sub { margin-bottom: 28px; }
.badge {
  font-size: 12px; padding: 3px 10px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--accent-2);
}

/* hero */
.hero { position: relative; z-index: 2; isolation: isolate; padding: 84px max(20px, 4vw) 0; text-align: center; }
.hero-inner { max-width: 820px; margin: 0 auto; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--bg); }
.hero-bg video {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; opacity: 0.6;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
@media (max-width: 900px) {
  .hero-bg video { height: 100%; aspect-ratio: auto; }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(7, 8, 15, 0.7), rgba(7, 8, 15, 0.15) 75%),
    linear-gradient(to bottom, rgba(7, 8, 15, 0.55) 0%, rgba(7, 8, 15, 0) 30%, rgba(7, 8, 15, 0) 60%, var(--bg) 100%);
}
.hero h1 { text-shadow: 0 4px 40px rgba(7, 8, 15, 0.8); margin-bottom: 36px; }
  margin-top: 34px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font: inherit; font-size: 13px; color: var(--muted); cursor: pointer;
  background: rgba(16, 18, 29, 0.6); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 99px; padding: 7px 16px;
}
@keyframes pulse { 50% { opacity: 0.35; } }
.eyebrow { color: var(--accent-2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; margin: 0 0 14px; }
h1 { font-size: clamp(36px, 7vw, 68px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 18px; }
.grad { background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto 34px; }

.create {
  text-align: left;
  background: rgba(16, 18, 29, 0.78);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(16, 124, 16, 0.35);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 30px 80px -30px rgba(16, 124, 16, 0.35);
}
textarea {
  width: 100%; resize: vertical; min-height: 84px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font: inherit; font-size: 16px;
}
textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea::placeholder { color: #5d6388; }

.chip-group { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.chip-label { width: 70px; color: var(--muted); font-size: 13px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 6px 14px; font: inherit; font-size: 13.5px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.chip:hover { border-color: var(--accent); }
/* option tiles (genre, art style): uniform grid, left-aligned, restrained selected state */
.chip-group.stack { flex-direction: column; align-items: stretch; gap: 8px; }
.chip-group.stack .chip-label { width: auto; }
.chips.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.chip.has-ex {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px;
  text-align: left; padding: 10px 12px; border-radius: 10px; background: transparent; border-color: var(--line);
  transition: border-color 0.15s, background 0.15s;
}
.chip.has-ex:hover { border-color: #3d446b; background: rgba(255, 255, 255, 0.03); }
.chip.has-ex .chip-name { font-size: 14px; font-weight: 600; color: var(--text); }
.chip-ex { font-size: 12px; line-height: 1.3; color: #7c84a8; font-weight: 400; }
.chip.has-ex[aria-pressed="true"] { background: rgba(16, 124, 16, 0.13); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chip.has-ex[aria-pressed="true"] .chip-ex { color: #bfe3bb; }
@media (max-width: 760px) { .chips.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chip[aria-pressed="true"] { background: rgba(16, 124, 16, 0.2); border-color: var(--accent); color: #fff; }

.advanced { margin-top: 14px; color: var(--muted); }
.advanced summary { cursor: pointer; font-size: 13px; user-select: none; }
.advanced summary:hover { color: var(--text); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.adv-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
select {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 10px; font: inherit;
}

.create-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; }
.hint { color: #5d6388; font-size: 12.5px; }
.error { color: #ff7a90; margin: 12px 0 0; font-size: 14px; }

.btn {
  font: inherit; font-weight: 600; cursor: pointer;
  border-radius: 12px; padding: 10px 18px; border: 1px solid transparent;
  transition: transform 0.1s, opacity 0.15s, border-color 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #2e9e2e); color: #fff; }
.btn.primary:hover { opacity: 0.92; }
.btn.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.big { font-size: 18px; padding: 16px 32px; border-radius: 16px; }
.btn.small { padding: 4px 10px; font-size: 12px; }

.suggest { margin-top: 22px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
#suggestions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.suggest button {
  background: none; border: 1px dashed var(--line); color: var(--muted);
  border-radius: 99px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.suggest button:hover { color: var(--text); border-color: var(--muted); }

/* sections */
.section { max-width: 1040px; margin: 0 auto; padding: 56px max(20px, 4vw) 10px; }
.section h2 { font-size: 28px; letter-spacing: -0.02em; margin: 0 0 6px; }
.section-sub { color: var(--muted); margin: 0 0 24px; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* a short last row is centred, not left with an empty slot */
.cards > * { flex: 0 1 calc((100% - 32px) / 3); min-width: min(290px, 100%); }
@media (max-width: 1000px) { .cards > * { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 640px) { .cards > * { flex-basis: 100%; } }
.card {
  text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: hidden; transition: transform 0.15s, border-color 0.15s;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card-art { aspect-ratio: 16 / 9; background: #0a0b14; overflow: hidden; }
.card-art canvas { display: block; width: 100%; height: 100%; transition: transform 0.35s ease; }
.card:hover .card-art canvas { transform: scale(1.04); }
.card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.card-body b { display: block; margin-bottom: 4px; }
.card-body span { color: var(--muted); font-size: 13.5px; }
.card-tags { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.card-tags i { font-style: normal; font-size: 11.5px; color: var(--accent-2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }

.steps { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.steps li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.steps span { color: var(--muted); }
.footer { text-align: center; color: #5d6388; font-size: 13px; padding: 60px 20px 40px; }

@media (max-width: 900px) {
  .nav { gap: 12px; flex-wrap: wrap; }
  .logo { margin-right: auto; }
  .nav .badge { display: none; }
  .menu-btn { display: block; order: 3; }
  .cta-green { order: 2; padding: 8px 16px; font-size: 14px; }
  .main-nav { display: none; order: 4; flex-basis: 100%; flex-direction: column; margin: 0; padding-top: 8px; gap: 2px; }
  .nav.open .main-nav { display: flex; }
  .main-nav a { padding: 11px 12px; font-size: 16px; }
}
@media (max-width: 760px) {
  .chip-label { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg video { display: none; }
  .hero-bg { background: var(--bg) url("media/hero-poster.jpg") center / cover; }
    html { scroll-behavior: auto; }
}

.advanced .chip-group { margin-top: 12px; }

/* Desktop hero layout: headline on top, the games' prompt intros in the middle of the video,
   and the create box starting below them so the background games stay visible.
   Sizes track the viewport width because the 16:9 video does. */
@media (min-width: 901px) {
  .hero { padding-top: 3.2vw; }
  .hero h1 { font-size: clamp(40px, 5vw, 76px); margin-bottom: 0; }
  /* The prompt box sits 1.75 inches (168px) under the headline, and its bottom edge is exactly where the video ends and the
     off-white section begins (--overlap is 0 below). */
  .hero .create { margin-top: 168px; }
}

/* ── light surfaces: header + prompt box (#fcfcfb) ── */
.nav { background: #fcfcfb; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #e6e5df; color-scheme: light; }
.nav .logo { color: #14151f; }
.nav .logo-mark { color: #0b6a0b; }
.main-nav a { color: #5d6175; }
.main-nav a:hover { color: #14151f; background: rgba(20, 21, 31, 0.05); }
.main-nav a[aria-current="page"] { color: #14151f; }
.nav .badge { border-color: #dcdbd4; color: #0e7a0e; }
.menu-btn { border-color: #dcdbd4; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { background: #14151f; }
.nav .btn.ghost { color: #14151f; border-color: #dcdbd4; }
.user-chip, .user-chip .uname { color: #14151f; }

.create { background: rgba(252, 252, 251, 0.84); border: 1px solid rgba(228, 227, 221, 0.9); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); color-scheme: light;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05); }
.create textarea { background: rgba(243, 242, 238, 0.75); color: #14151f; border-color: #e4e3dd; }
.create textarea::placeholder { color: #9a9aa8; }
.create textarea:focus, .create select:focus { outline-color: var(--accent); }
.create select { background: rgba(243, 242, 238, 0.75); color: #14151f; border-color: #e4e3dd; }
.create .chip-label, .create .advanced, .create .advanced summary, .create .adv-grid label { color: #5d6175; }
.create .advanced summary:hover { color: #14151f; }
.create .hint { color: #9a9aa8; }
.create .error { color: #d6334f; }
.create .chip.has-ex { border-color: #e4e3dd; background: transparent; }
.create .chip.has-ex:hover { border-color: #c9c8c0; background: #f3f2ee; }
.create .chip.has-ex .chip-name { color: #14151f; }
.create .chip-ex { color: #80849a; }
.create .chip.has-ex[aria-pressed="true"] { background: rgba(16, 124, 16, 0.09); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.create .chip.has-ex[aria-pressed="true"] .chip-ex { color: #0b6a0b; }

.login-link { color: #14151f; font-size: 14.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; transition: background 0.15s; }
.login-link:hover { background: rgba(20, 21, 31, 0.07); }
@media (max-width: 900px) { .login-link { order: 2; padding: 8px 10px; } }
@media (max-width: 440px) { .login-link { display: none; } }
/* phones: logo, Start Free Now and the menu button stay on one row (they wrapped the menu button onto a second line) */
@media (max-width: 440px) {
  .nav { gap: 8px; padding-inline: 16px; }
  .nav .logo { font-size: 17px; gap: 8px; }
  .nav .logo-img { width: 28px; height: 28px; }
  .nav .cta-green { padding: 7px 12px; font-size: 13.5px; }
  .nav .user-chip { gap: 6px; }
}

/* ── lower half of the home page: same off-white as the prompt box ── */
.light-zone {
  background: #fcfcfb; color: #14151f; color-scheme: light; padding-top: 8px;
  --panel: #fcfcfb; --panel-2: #f3f2ee; --line: #e4e3dd; --text: #14151f; --muted: #5d6175;
}
.light-zone .section h2 { color: #14151f; }
.light-zone .card { background: #fcfcfb; box-shadow: 0 1px 2px rgba(20, 21, 31, 0.05), 0 8px 24px -16px rgba(20, 21, 31, 0.25); }
.light-zone .card:hover { box-shadow: 0 2px 4px rgba(20, 21, 31, 0.06), 0 16px 32px -16px rgba(16, 124, 16, 0.4); }
.light-zone .card-tags i { color: #0e7a0e; border-color: #e4e3dd; background: #f3f2ee; }
.light-zone .steps li { background: #f3f2ee; }
.light-zone .footer { color: #8b8fa1; border-top: 1px solid #e4e3dd; margin-top: 56px; padding: 28px 20px 36px; }

/* How far the prompt box hangs over the edge between the video and the off-white section below it. 0: its bottom edge is that edge. */
:root { --overlap: 0px; }
.hero .create { position: relative; z-index: 3; margin-bottom: calc(var(--overlap) * -1); }
.light-zone { position: relative; z-index: 1; padding-top: calc(var(--overlap) + 20px); }
.light-zone .suggest { margin: 0 auto; padding: 0 20px 8px; color: #8b8fa1; }
.light-zone .suggest button { background: #fcfcfb; border: 1px solid #e4e3dd; color: #5d6175; }
.light-zone .suggest button:hover { color: #14151f; border-color: #c9c8c0; background: #f3f2ee; }
.hero-bg { bottom: var(--overlap); }

/* compact prompt box: genre sits right under the idea field */
.create .chip-group { margin-top: 8px; }
.create .create-foot { justify-content: flex-end; margin-top: 12px; }

/* anchor jumps (Explore): leave room for the sticky header so the heading stays in view */
#examples { scroll-margin-top: 60px; }

/* dropdown pickers in the home prompt box */
.pickers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.picker { min-width: 0; }
.picker-label { display: block; font-size: 12.5px; color: #5d6175; margin: 0 0 6px 2px; }
.dd { position: relative; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; font: inherit; font-size: 14.5px; color: #14151f; background: rgba(252, 252, 251, 0.9); border: 1px solid #dcdbd4; border-radius: 12px; padding: 11px 14px; cursor: pointer; }
.dd-btn:hover { border-color: #c2c1b8; }
.dd-btn[aria-expanded="true"], .dd-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.dd-value { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dd-value.placeholder { font-weight: 400; color: #8b8fa1; }
.dd-caret { flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid #5d6175; border-bottom: 2px solid #5d6175; transform: rotate(45deg); transition: transform 0.15s; }
.dd-btn[aria-expanded="true"] .dd-caret { transform: rotate(-135deg); margin-top: 2px; }
.dd-list { position: absolute; z-index: 30; left: 0; min-width: 100%; width: max-content; max-width: min(380px, 90vw); top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; background: #fcfcfb; border: 1px solid #e4e3dd; border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(20, 21, 31, 0.4); }
.dd-opt { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.dd-name { font-weight: 600; font-size: 14px; color: #14151f; }
.dd-ex { font-size: 12px; color: #80849a; }
.dd-opt.active { background: #f3f2ee; }
.dd-opt[aria-selected="true"] { background: rgba(16, 124, 16, 0.1); }
.dd-opt[aria-selected="true"] .dd-name::after { content: " ✓"; color: #0b6a0b; }
@media (max-width: 760px) { .pickers { grid-template-columns: 1fr; } .dd-list { width: 100%; } }

/* "Try:" suggestions live inside the prompt box, to the left of Generate game */
.create .create-foot { justify-content: space-between; align-items: center; gap: 16px; }
.create .suggest { margin: 0; justify-content: flex-start; flex: 1; min-width: 0; font-size: 13px; color: #8b8fa1; gap: 8px; flex-wrap: nowrap; }
.create .suggest > span { flex: none; }
.create #suggestions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
.create .suggest button { background: rgba(252, 252, 251, 0.9); border: 1px solid #dcdbd4; color: #5d6175; padding: 5px 11px; font-size: 12.5px; }
.create .suggest button:hover { color: #14151f; border-color: #c2c1b8; background: #f3f2ee; }
.create #generateBtn { flex: none; }
.light-zone { padding-top: calc(var(--overlap) + 8px); }
@media (max-width: 760px) { .create .create-foot { flex-direction: column-reverse; align-items: stretch; } .create #generateBtn { width: 100%; } .create .suggest { flex-wrap: wrap; } }

/* sample cards: "User prompt:" label + video thumbnails */
.card-prompt { display: block; color: var(--muted); font-size: 13.5px; }
.card-prompt strong { color: #14151f; font-weight: 400; }
.card-art video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .card-art video { transform: scale(1.04); }

/* Desktop: slide the video up a little. Its "Your prompt" cards (55% to 76% of its height) then sit between the headline (which
   ends about 19vw down) and the prompt box: 21.9vw to 33.75vw from the top of the hero. */
@media (min-width: 901px) {
  .hero-bg video {
    top: -9vw;
    height: max(56.25vw, calc(100% + 9vw)); /* always reach the bottom edge, even on narrower windows */
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
    opacity: 0.85;
  }
  .hero-bg::after {
    background:
      radial-gradient(60% 40% at 50% 22%, rgba(7, 8, 15, 0.6), rgba(7, 8, 15, 0) 75%),
      linear-gradient(to bottom, rgba(7, 8, 15, 0.45) 0%, rgba(7, 8, 15, 0) 25%, rgba(7, 8, 15, 0) 82%, var(--bg) 100%);
  }
}

/* the hero headline sits on a dark video: use bright greens (the dark brand green was hard to read) plus a soft dark glow */
.hero .grad { background: linear-gradient(90deg, #8cf53c, #c8ff4a 70%, #e4ff7a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.7)); }

/* the home page prompt box keeps its size: no drag handle in the corner */
.hero .create textarea { resize: none; height: 132px; min-height: 132px; } /* half an inch (48px) taller than the 2-row default */

/* a signed-in header is wider (name, Sign out, credits): on medium screens tighten it so the page never scrolls sideways */
@media (max-width: 1320px) and (min-width: 901px) {
  .nav { gap: 10px; padding-inline: 16px; }
  .main-nav { gap: 0; }
  .main-nav a { padding: 7px 6px; font-size: 13.5px; }
  .nav .user-chip .uname { display: none; }
  .nav .cta-green { padding: 8px 14px; font-size: 14px; }
}
/* the narrowest desktop widths: the logo mark alone, so all seven links, search, Login and the button still fit */
@media (max-width: 1060px) and (min-width: 901px) {
  .nav { gap: 8px; }
  .nav .logo-text { display: none; }
}
/* signed out, the (empty) signed-in area would still take a gap */
.nav .auth-area:empty { display: none; }

/* header items keep their size: a wrapping logo or a squeezed chip is what made the nav jump when the signed-in chip arrived */
@media (min-width: 901px) {
  .nav .logo, .nav .auth-area, .nav .login-link, .nav .cta-green { flex: none; white-space: nowrap; }
  .nav .user-chip { flex: none; white-space: nowrap; }
}

/* signed-in chip in the header: a quiet initial badge, the name, and a plain Sign out */
.nav .user-chip { gap: 10px; }
.nav .user-chip .avatar { width: 32px; height: 32px; background: #e9f3e9; color: #0e5a0e; border: 1px solid #cfe3cf; font-size: 13px; font-weight: 600; letter-spacing: 0; box-sizing: border-box; }
.nav .user-chip .avatar img { border-radius: 50%; }
.nav .user-chip .uname { font-size: 13.5px; font-weight: 500; color: #14151f; }
.nav .user-chip .btn.ghost { padding: 6px 10px; border-color: transparent; border-radius: 8px; background: transparent; color: #5d6175; font-size: 13px; font-weight: 500; }
.nav .user-chip .btn.ghost:hover { background: #efeee8; color: #14151f; border-color: transparent; }
.nav .user-chip .btn.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the avatar and name in the header chip open Settings */
.user-chip .chip-link { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; border-radius: 99px; }
.user-chip .chip-link:hover .uname, .user-chip .chip-link:focus-visible .uname { text-decoration: underline; }
.user-chip .chip-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.footer a { text-decoration: underline; }

/* The Station 720 logo (same mark and wordmark as the header) centred at the top of the sign-in card and dialog. */
.auth-logo { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 25px; color: #14151f; }
.auth-logo .logo-img { width: 48px; height: 48px; }

/* the fine print under the Google button (sign-in page and dialog) */
.auth-terms { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b8fa1; }
.auth-terms a { color: #5d6175; text-decoration: underline; text-underline-offset: 2px; }
.auth-terms a:hover { color: #14151f; }
.google-slot { margin-top: 2px; }
.login-note:empty, .modal-note:empty { display: none; } /* no message: no gap above the fine print */
.auth-terms { margin-top: 14px; }

/* sign-in: placeholder while Google's button loads, retry when it is blocked, what you get, the saved idea */
.google-slot { min-height: 50px; }
.google-slot[hidden] { display: none; }
.google-skel { width: 100%; height: 50px; border-radius: 999px; background: linear-gradient(90deg, #efeee8 25%, #f7f6f2 50%, #efeee8 75%); background-size: 200% 100%; animation: google-skel 1.3s ease-in-out infinite; }
@keyframes google-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .google-skel { animation: none; } }
.auth-retry { width: 100%; padding: 14px 16px; border: 1px solid #f0cfc6; background: #fdf3f0; border-radius: 16px; text-align: center; }
.auth-retry p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: #8a3a22; }
.auth-perk { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px; padding: 5px 12px; border-radius: 99px; background: #e8f3e8; color: #0b5a0b; font-size: 13px; font-weight: 600; }
.auth-perk::before { content: "✓"; font-weight: 800; }
.auth-perk:empty { display: none; }
.auth-idea { text-align: left; background: #f3f2ee; border: 1px solid #e4e3dd; border-radius: 14px; padding: 12px 14px; margin: 0 0 18px; }
.auth-idea .idea-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5d6175; }
.auth-idea .idea-text { margin: 6px 0 0; font-size: 14px; color: #14151f; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.auth-idea .idea-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.auth-idea .idea-tags:empty { display: none; }
.auth-idea .idea-tags span { font-size: 12px; color: #5d6175; border: 1px solid #e4e3dd; border-radius: 99px; padding: 2px 10px; background: #fcfcfb; }

/* Header search: sits between the page links and the account chip. Narrower screens show just the magnifier until it is tapped. */
.nav-search { position: relative; flex: none; width: 196px; height: 36px; margin-left: 4px; }
.nav-search input { width: 100%; height: 36px; padding: 0 12px 0 34px; border: 1px solid #e0dfd8; border-radius: 999px; background: #f3f2ee; color: #14151f; font: inherit; font-size: 14px; outline: none; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; -webkit-appearance: none; appearance: none; }
.nav-search input::-webkit-search-cancel-button { display: none; }
.nav-search input::placeholder { color: #8b8fa1; }
.nav-search input:focus { background: #fff; border-color: #107c10; box-shadow: 0 0 0 3px rgba(16, 124, 16, 0.14); }
.nav-search .ns-ic { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: #6b6f82; pointer-events: none; }
.ns-pop { position: absolute; top: calc(100% + 8px); right: 0; width: min(340px, 90vw); padding: 6px; border: 1px solid #e4e3dd; border-radius: 14px; background: #fff; box-shadow: 0 24px 50px -20px rgba(20, 21, 31, 0.4); z-index: 60; }
.ns-pop a { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; color: #14151f; }
.ns-pop a:hover, .ns-pop a:focus-visible { background: #f3f2ee; outline: none; }
.ns-pop a b { font-size: 14.5px; }
.ns-pop a span { font-size: 12.5px; color: #6b6f82; }
.ns-pop p { margin: 0; padding: 10px 12px; font-size: 13.5px; color: #6b6f82; }
@media (min-width: 1321px) { .main-nav { gap: 2px; } .main-nav a { padding: 7px 10px; } } /* 901-1320px keeps the tighter nav above */
@media (max-width: 1499px) {
  .nav-search { width: 38px; }
  .nav-search input { padding: 0; color: transparent; cursor: pointer; }
  .nav-search input::placeholder { color: transparent; }
  .nav-search .ns-ic { left: 11px; }
  .nav-search input:focus { position: absolute; top: 0; right: 0; width: 250px; padding: 0 36px 0 14px; color: #14151f; cursor: text; z-index: 61; }
  .nav-search input:focus::placeholder { color: #8b8fa1; }
  .nav-search:focus-within .ns-ic { z-index: 62; }
}
@media (max-width: 900px) {
  .nav-search { order: 5; flex: 1 1 100%; width: auto; height: 36px; margin: 0; }
  .nav-search input, .nav-search input:focus { position: static; width: 100%; padding: 0 12px 0 34px; color: #14151f; cursor: text; }
  .nav-search input::placeholder { color: #8b8fa1; }
  .ns-pop { left: 0; right: 0; width: auto; }
}

/* The sign-in pop-up on the home page (signin-modal.js): the same card as the Studio's sign-in dialog, over the dimmed page. */
dialog.signin { width: min(400px, calc(100% - 32px)); max-height: calc(100% - 32px); box-sizing: border-box; padding: 34px 28px 26px; text-align: center; color: #14151f; background: #fcfcfb; border: 1px solid #e4e3dd; border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(20, 21, 31, 0.5); overflow: auto; }
dialog.signin::backdrop { background: rgba(20, 21, 31, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.signin[open] { animation: signin-in 0.18s ease-out; }
@keyframes signin-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.signin[open] { animation: none; } }
dialog.signin h2 { margin: 4px 0 16px; font-size: 22px; letter-spacing: -0.02em; color: #14151f; }
dialog.signin .modal-x { position: absolute; top: 12px; right: 14px; font-size: 26px; line-height: 1; color: #5d6175; background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 8px; }
dialog.signin .modal-x:hover { color: #14151f; }
dialog.signin .modal-note { margin: 14px 0 0; font-size: 12.5px; color: #8b8fa1; }
dialog.signin .modal-note.err { color: #d6334f; }
.signin-saved { margin: 0; font-size: 13.5px; font-weight: 600; color: #107c10; }
dialog.signin .btn.wide { width: 100%; }