/* ============================================================================
   Atlas — atlas-web marketing site
   Single stylesheet: design tokens (transcribed from the Atlas Design System)
   + component / layout styles + responsive rules.
   Source of truth: claude.ai/design "Atlas Design System" (ui_kits/landing).
   ========================================================================== */

/* ---- Fonts: Geist + Geist Mono (Vercel's real distributable via jsDelivr) --- */
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-Regular.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('https://cdn.jsdelivr.net/npm/geist@1.5.1/dist/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2')}

/* ------------------------------- Tokens ----------------------------------- */
:root{
  /* Color */
  --canvas:#F8F8F6; --white:#FFFFFF; --soft:#F1F2F4;
  --ink:#111214; --body:#42464D; --muted:#747981; --hairline:#DADDE2;
  --blue:#0E5CFF; --blue-hover:#1E51D6; --blue-tint:#EEF3FF;
  --hero-canvas:#111A2C; --hero-deep:#0C1424; --hero-surface:#182238;
  --hero-hairline:rgba(255,255,255,0.12); --hero-text:#FFFFFF; --hero-body:#D9DEE8;
  --world-sky:#5E8EF7; --world-cyan:#62CDE4; --world-mint:#77C9A4; --world-lime:#A7D96F;
  --world-yellow:#F3CA58; --world-orange:#F1A05C; --world-coral:#E87967; --world-pink:#D983B8; --world-purple:#A181DA;
  --world-pants:#3D7BE0;
  --line-navy:#35516F;
  --shadow-card:0 8px 30px rgba(20,30,50,0.06);
  --glass-bg:rgba(255,255,255,0.62); --glass-border:rgba(255,255,255,0.55);

  /* Type */
  --font-sans:'Geist',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:'Geist Mono',ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Spacing scale (4px base) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;

  /* Radii */
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:9999px;

  /* Motion */
  --ease-standard:cubic-bezier(0.2,0.8,0.2,1);
  --duration-fast:180ms; --duration-card:300ms; --duration-flip:420ms;

  /* Layout */
  --page-max:1280px;
  --gutter:clamp(20px,5vw,72px);
}

/* ------------------------------- Reset ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
/* The hidden attribute must always win over component display rules
   (e.g. .checkout{display:grid}, .field{display:flex}). */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
body{
  margin:0; background:var(--canvas); color:var(--body);
  font-family:var(--font-sans); font-size:16px; line-height:24px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,p{margin:0}
img,svg{display:block; max-width:100%}
button{font:inherit; color:inherit}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--blue-hover)}

/* Visible, consistent focus ring for keyboard users */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:6px;
}

.container{max-width:var(--page-max); margin:0 auto; padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; line-height:16px;
  letter-spacing:0.08em; text-transform:uppercase; color:rgb(101,112,128);
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ------------------------------- Buttons ---------------------------------- */
.btn{
  --btn-h:44px; --btn-pad:12px 20px; --btn-fs:15px;
  height:var(--btn-h); padding:var(--btn-pad); font-size:var(--btn-fs);
  font-family:var(--font-sans); font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard);
}
.btn--sm{--btn-h:40px; --btn-pad:10px 16px; --btn-fs:14px}
.btn--primary{background:var(--blue); color:#fff}
.btn--primary:hover{background:var(--blue-hover); color:#fff}
.btn--primary:active{background:#1746BC}
.btn--secondary{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--hairline)}
.btn--secondary:hover{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px #C3C8D0}
.btn--ghost{background:transparent; color:var(--body)}
.btn--ghost:hover{background:var(--soft); color:var(--ink)}
.btn__arrow{font-family:var(--font-mono)}

/* -------------------------------- Badge ----------------------------------- */
.badge{
  font-family:var(--font-mono); font-size:10px; line-height:14px; letter-spacing:0.05em;
  padding:6px 10px; border-radius:var(--radius-pill); display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; background:var(--blue-tint); color:var(--blue);
}
.badge__check{font-weight:600}

/* --- Soft glass wash behind the hero (stand-in for glass-panels render) ---- */
.page-glow{
  position:absolute; top:-80px; right:0; z-index:0; pointer-events:none;
  width:min(72%,980px); height:900px; border-radius:40%;
  background:
    radial-gradient(60% 55% at 72% 30%, rgba(94,142,247,0.10), rgba(94,142,247,0) 70%),
    radial-gradient(50% 60% at 60% 60%, rgba(98,205,228,0.08), rgba(98,205,228,0) 72%);
  filter:blur(6px);
}
@media (max-width:1024px){ .page-glow{display:none} }

/* --------------------------------- Nav ------------------------------------ */
.site-header{position:relative; z-index:10}
.nav{
  height:76px; display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{display:inline-flex; align-items:center; gap:12px; color:var(--ink)}
.brand__mark{width:26px; height:26px}
.brand__word{font-family:var(--font-sans); font-weight:500; font-size:22px; letter-spacing:-0.02em; color:var(--ink)}
.nav__links{display:flex; gap:32px; align-items:center; list-style:none; margin:0; padding:0}
.nav__link{font-size:14px; font-weight:400; color:rgb(58,64,74)}
.nav__link:hover{color:var(--ink)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__signin{
  display:inline-flex; align-items:center; text-decoration:none;
  border-radius:var(--radius-pill); padding:9px 18px; background:rgba(255,255,255,0.78);
  box-shadow:inset 0 0 0 1px rgb(203,209,218); font-weight:500; font-size:14px; color:var(--ink); cursor:pointer;
}
.nav__signin:hover{background:#fff; color:var(--ink)}
.nav__toggle{display:none}

/* -------------------------------- Hero ------------------------------------ */
/* overflow visible so the scene can bleed past the hero and dissolve */
.hero{position:relative}
.hero__inner{
  position:relative; z-index:3;
  display:grid; grid-template-columns:minmax(0,600px) 1fr; align-items:center; gap:36px;
  padding-block:16px 72px; min-height:660px;
}
.hero__copy{display:flex; flex-direction:column; gap:24px; max-width:600px}
.hero__title{
  font-family:var(--font-sans); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(40px,6.4vw,64px); line-height:1.02; letter-spacing:-0.03em;
}
.hero__title .accent{color:var(--blue)}
.hero__lede{
  font-size:clamp(16px,1.6vw,17px); line-height:26px; color:var(--body); max-width:480px;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px}
.hero__sublabel{font-family:var(--font-mono); font-size:12px; line-height:16px; letter-spacing:0.07em; color:var(--muted)}

/* Category / technical chips */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none}
.chip{
  font-size:13px; color:var(--body); padding:6px 12px; border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--chip) 12%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--chip) 24%, transparent);
}

/* Hero world/character scene (SVG, code-built stand-in for the render) */
/* Extends below the hero and fades out, so the glass wall bleeds into the
   canvas instead of ending on a hard horizontal cut. */
.hero__scene{
  position:absolute; inset:0 0 -180px 0; z-index:1; width:100%; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,
    #000 0%, #000 64%, rgba(0,0,0,0.72) 80%, rgba(0,0,0,0.28) 92%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    #000 0%, #000 64%, rgba(0,0,0,0.72) 80%, rgba(0,0,0,0.28) 92%, rgba(0,0,0,0) 100%);
}
.hero__scene svg{width:100%; height:100%; display:block}
/* Left fade keeps the headline/copy readable over the glass surface */
.hero__fade{
  position:absolute; inset:0 auto 0 0; z-index:2; width:min(880px,92%); pointer-events:none;
  background:linear-gradient(90deg, var(--canvas) 0%, var(--canvas) 38%, rgba(248,248,246,0) 100%);
}

/* --------------------------- World Formats -------------------------------- */
.formats{position:relative; z-index:3; padding-block:80px 96px}
.formats__head{display:flex; flex-direction:column; gap:12px; margin-bottom:30px}
.formats__head .eyebrow{letter-spacing:0.12em; color:var(--muted)}
.formats__title{
  font-family:var(--font-sans); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(30px,4.4vw,40px); line-height:1.1; letter-spacing:-0.025em;
}
.formats__lede{font-size:16px; color:var(--body)}
.formats__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;
}

/* World format card — Generate world goes straight to the generate page */
.world-card{
  min-width:0; background:#fff; border-radius:var(--radius-lg);
  box-shadow:inset 0 0 0 1px var(--hairline); padding:24px 28px;
  display:flex; flex-direction:column; gap:14px;
}
.world-card__illus{
  height:190px; border-radius:14px; background:var(--soft);
  position:relative; overflow:hidden; flex-shrink:0;
}
.world-card__illus svg{position:absolute; inset:0; width:100%; height:100%}
.world-card__meta{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.world-card__text{display:flex; flex-direction:column; gap:4px}
.world-card__title{font-family:var(--font-sans); font-weight:500; font-size:26px; letter-spacing:-0.01em; color:#17191E}
.world-card__desc{font-size:14px; line-height:20px; color:var(--muted)}
.world-card__actions{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:auto}

/* -------------------------------- Footer ---------------------------------- */
.site-footer{border-top:1px solid var(--hairline); background:var(--canvas)}
.site-footer__inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-block:28px;
}
.site-footer__brand{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px}
.site-footer__brand .brand__word{font-size:16px; color:var(--ink)}
.site-footer__links{display:flex; flex-wrap:wrap; gap:24px; list-style:none; margin:0; padding:0}
.site-footer__links a{font-size:13px; color:var(--muted)}
.site-footer__links a:hover{color:var(--ink)}

/* ------------------------------ Responsive -------------------------------- */
@media (max-width:1024px){
  .hero__inner{grid-template-columns:1fr; min-height:0; gap:28px; padding-block:8px 40px}
  .hero__copy{max-width:640px}
  .hero__scene{
    position:relative; inset:auto; width:100%; height:auto; margin-top:4px;
  }
  .hero__scene svg{width:100%; height:auto; max-width:920px; margin:0 auto}
  .hero__fade{display:none}
  .formats__grid{grid-template-columns:1fr; gap:20px}
}

@media (max-width:640px){
  :root{--gutter:20px}
  .nav{height:64px}
  /* .nav__create / .nav__account are hidden in the Auth section below — their
     base rules are declared there, after this block, so hiding them here would
     be overridden at equal specificity. */
  .nav__links, .nav__signin{display:none}
  .nav__toggle{
    display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
    border-radius:var(--radius-md); background:#fff; box-shadow:inset 0 0 0 1px var(--hairline); cursor:pointer;
  }
  /* Mobile menu (revealed via [data-open]) */
  .nav--open .nav__links{
    display:flex; position:absolute; top:64px; left:var(--gutter); right:var(--gutter);
    flex-direction:column; gap:4px; padding:12px; background:#fff; border-radius:var(--radius-md);
    box-shadow:var(--shadow-card), inset 0 0 0 1px var(--hairline); z-index:20;
  }
  .nav--open .nav__link{padding:10px 8px}
  .nav--open .nav__signin,
  .nav--open .nav__create,
  .nav--open .nav__account{display:inline-flex; margin-top:6px}
  .nav--open .nav__account{width:100%}
  .nav--open .account,
  .nav--open .account__chip{width:100%}
  .hero{padding-top:4px}
  .formats{padding-block:56px 64px}
  .hero__actions .btn{flex:1 1 auto}
  .world-card__actions{flex-direction:column; align-items:stretch}
  .world-card__actions .btn{width:100%}
  .world-card__title{font-size:22px}
  .site-footer__inner{flex-direction:column; align-items:flex-start; gap:16px}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .btn,.nav__link{transition-duration:1ms}
  /* No motion, and no static fill either — a part-filled bar would imply progress */
  .progress__bar--indeterminate .progress__fill{animation:none; width:0}
}

/* ------------------------------- Pricing ---------------------------------- */
.pricing{padding-block:64px 96px}
.page-head{
  max-width:720px; margin:0 auto 48px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.page-head .eyebrow{letter-spacing:0.12em; color:var(--muted)}
.page-head__title{
  font-family:var(--font-sans); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(30px,4.6vw,44px); line-height:1.1; letter-spacing:-0.025em;
}
.page-head__lede{font-size:16px; line-height:24px; color:var(--body); max-width:560px}

.pricing-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch}
/* Billing terms, under the cards. Body-sized rather than fine print: monthly
   billing and non-rollover are things a buyer should read before choosing, not
   discover on their second month. */
.pricing-terms{
  margin:24px 0 0; max-width:720px;
  font-size:14px; line-height:22px; color:var(--muted);
}
.pricing-terms strong{color:var(--body); font-weight:600}
.price-card{
  position:relative; min-width:0; background:#fff; border-radius:var(--radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:20px;
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.price-card--featured{box-shadow:var(--shadow-card), inset 0 0 0 1.5px var(--blue)}
.price-card__badge{
  position:absolute; top:-11px; right:20px; background:var(--blue); color:#fff;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  padding:5px 10px; border-radius:var(--radius-pill);
}
.price-card__name{font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted)}
.price-card__price{display:flex; align-items:baseline; gap:6px}
.price-card__amount{font-family:var(--font-sans); font-size:40px; font-weight:500; letter-spacing:-0.02em; color:var(--ink)}
.price-card__period{font-size:14px; color:var(--muted)}
.price-card__features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1}
.price-card__features li{display:flex; gap:8px; font-size:14px; line-height:20px; color:var(--body)}
.price-card__features li::before{content:"✓"; color:var(--blue); flex-shrink:0}
.price-card .btn{width:100%}

/* Master — cohort pricing, deliberately NOT styled as a subscription tier */
.cohort{
  margin-top:24px; border:1px solid var(--hairline); border-radius:var(--radius-lg);
  background:var(--soft); padding:24px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cohort__body{min-width:0; flex:1}
.cohort__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cohort__name{font-family:var(--font-sans); font-weight:500; font-size:18px; color:var(--ink)}
.cohort__tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.04em; color:var(--muted);
  border:1px solid var(--hairline); border-radius:var(--radius-pill); padding:3px 8px; background:#fff;
}
.cohort__lines{margin:8px 0 0; font-size:14px; line-height:22px; color:var(--body)}
.cohort .btn{white-space:nowrap}

@media (max-width:860px){
  .pricing-grid{grid-template-columns:1fr; max-width:440px; margin-inline:auto}
  .cohort{flex-direction:column; align-items:flex-start}
  .cohort .btn{width:100%}
}

/* ------------------------------- Checkout --------------------------------- */
.payment{padding-block:64px 96px}
.checkout{display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:900px; margin:0 auto; align-items:start}
.summary{display:flex; flex-direction:column; gap:14px}
.summary .eyebrow{letter-spacing:0.12em; color:var(--muted)}
.summary__name{font-family:var(--font-sans); font-weight:500; font-size:30px; letter-spacing:-0.015em; color:var(--ink); margin:0}
.summary__price{display:flex; align-items:baseline; gap:6px}
.summary__amount{font-family:var(--font-sans); font-size:40px; font-weight:500; letter-spacing:-0.02em; color:var(--ink)}
.summary__period{font-size:14px; color:var(--muted)}
.summary__desc{font-size:15px; line-height:22px; color:var(--body); max-width:380px}

.card-surface{background:#fff; border-radius:var(--radius-lg); box-shadow:inset 0 0 0 1px var(--hairline); padding:28px}
.form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field__label{font-size:13px; font-weight:500; color:var(--body)}
.field input{
  height:46px; padding:0 16px; width:100%; box-sizing:border-box;
  border:1px solid var(--hairline); border-radius:var(--radius-md); background:#fff;
  font-family:var(--font-sans); font-size:15px; color:var(--ink); outline:none;
  transition:border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field input:focus{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint)}
.field input::placeholder{color:#AEB3BB}
.field__hint{font-size:12px; line-height:16px; color:var(--muted)}
.field input:invalid:not(:placeholder-shown){border-color:#D9534F}
.form__row{display:flex; gap:12px}
.form__row .field{flex:1}
.payment-note{font-size:12px; line-height:16px; color:var(--muted); margin:0}

/* Confirmation state */
.confirm{max-width:480px; margin:0 auto}
.confirm .card-surface{display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-card), inset 0 0 0 1px var(--hairline); padding:32px}
.confirm__lead{font-size:15px; color:var(--body)}
.confirm .summary__name{outline:none}
.confirm .badge{align-self:flex-start}
.confirm__actions{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.confirm__actions .btn{width:100%}

@media (max-width:760px){
  .checkout{grid-template-columns:1fr; gap:24px; max-width:440px}
}

/* --------------------------- Generate World ------------------------------- */
.gen{position:relative; min-height:100vh; overflow:hidden; background:#B9DCF8; display:flex; flex-direction:column}
.gen__scene{position:absolute; inset:0; z-index:0}
.gen__scene svg{width:100%; height:100%; display:block}
/* Lightens the upper band so header and headline stay legible over the sky */
.gen__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.22) 32%, rgba(255,255,255,0) 58%);
}
.gen__header{position:relative; z-index:3}
.gen__stage{position:relative; z-index:3; padding-block:24px 72px; flex:1}

.gen__head{max-width:640px; display:flex; flex-direction:column; gap:12px; margin-bottom:34px}
.gen__head .eyebrow{color:#2A4763}
.gen__title{
  font-family:var(--font-sans); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(34px,5vw,56px); line-height:1.04; letter-spacing:-0.03em;
}
.gen__lede{font-size:17px; line-height:26px; color:#2E3946; max-width:520px}

/* Options floating in the world's space */
.gen__panels{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
  margin:0; padding:0; border:0;
  perspective:1200px; transform-style:preserve-3d;
}
.gen-panel{
  min-width:0; display:flex; flex-direction:column; gap:12px; padding:20px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 18px 44px rgba(20,40,70,0.16);
}
.gen-panel__label{font-family:var(--font-sans); font-weight:500; font-size:15px; color:var(--ink)}

/* Segmented choice control */
.seg{
  position:relative; display:flex; gap:4px; padding:4px;
  background:rgba(255,255,255,0.72); border-radius:var(--radius-pill);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.seg input{position:absolute; width:1px; height:1px; margin:-1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)}
.seg label{
  flex:1; text-align:center; padding:8px 6px; border-radius:var(--radius-pill);
  font-size:13px; line-height:16px; color:var(--body); cursor:pointer; white-space:nowrap;
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.seg label:hover{background:rgba(14,92,255,0.08); color:var(--ink)}
/* Action variant of a segment — used by the Variation control */
.seg__btn{
  flex:1; text-align:center; padding:8px 6px; border:0; background:transparent;
  border-radius:var(--radius-pill); cursor:pointer; white-space:nowrap;
  font-family:var(--font-sans); font-size:13px; line-height:16px; color:var(--body);
  transition:background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.seg__btn:hover{background:rgba(14,92,255,0.08); color:var(--ink)}
.seg__btn:active{background:var(--blue); color:#fff}
.seg input:checked + label{background:var(--blue); color:#fff}
/* Not release-supported by the live catalogue — visible, never submittable */
.seg input:disabled + label,.seg label.is-unavailable{
  color:var(--muted); opacity:0.45; cursor:not-allowed; text-decoration:line-through;
}
.seg input:disabled + label:hover{background:transparent; color:var(--muted)}
.seg input:focus-visible + label{outline:2px solid var(--blue); outline-offset:2px}

.gen__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.gen__status{
  margin-top:14px; min-height:16px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.04em; color:#2A4763;
}

/* --------------------------- Generating screen ---------------------------- */
/* Buildings pop up from their footings */
.sc-shop{transform-box:fill-box; transform-origin:50% 100%}

/* Sits in the upper third rather than centred — keeps the panel and its bar
   well clear of the horizon and the crowd below. */
.progress-stage{display:flex; align-items:flex-start; padding-top:clamp(12px,7vh,80px)}
/* Wide, landscape panel: heading on the left, live phase + bar on the right */
.progress{
  max-width:900px; padding:26px 32px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.74);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 18px 44px rgba(20,40,70,0.16);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:32px; align-items:center;
}
.progress__head{display:flex; flex-direction:column; gap:8px; min-width:0}
.progress__track{display:flex; flex-direction:column; gap:12px; min-width:0}
.progress__phase{
  font-family:var(--font-mono); font-size:14px; letter-spacing:0.02em;
  color:var(--ink); margin:0; min-height:20px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.progress .eyebrow{color:#2A4763}
.progress__title{
  font-family:var(--font-sans); font-weight:400; color:var(--ink); margin:0;
  font-size:clamp(26px,3.4vw,34px); line-height:1.1; letter-spacing:-0.025em;
}
.progress__bar{
  height:4px; border-radius:var(--radius-pill); background:rgba(20,40,70,0.10);
  overflow:hidden; margin-top:2px;
}
.progress__fill{
  display:block; height:100%; width:0%; border-radius:var(--radius-pill);
  background:var(--blue); transition:width 120ms linear;
}
/* The job status API publishes a state (queued / generating), never a
   percentage, so the bar is indeterminate — it shows activity, never progress. */
.progress__bar--indeterminate .progress__fill{
  width:38%; transition:none;
  animation:atlas-indeterminate 1.3s var(--ease-standard) infinite;
}
@keyframes atlas-indeterminate{
  0%{transform:translateX(-105%)}
  100%{transform:translateX(268%)}
}

/* Result metadata — confirmation facts only */
.result-meta{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.result-meta__item{
  font-size:13px; line-height:16px; color:var(--body);
  background:rgba(255,255,255,0.72); border:1px solid var(--hairline);
  border-radius:var(--radius-pill); padding:5px 10px; white-space:nowrap;
}
.result-meta__item.is-mono{font-family:var(--font-mono); font-size:11px; letter-spacing:0.04em; color:var(--muted)}
.result-meta .badge{white-space:nowrap}
.btn[aria-disabled="true"]{opacity:0.5; cursor:not-allowed}

.progress__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:2px}

@media (max-width:760px){
  .progress{grid-template-columns:1fr; gap:18px; padding:22px 20px}
  .progress__actions .btn{flex:1 1 auto}
}

/* Advanced controls — revealed in place, presented as locked */
.adv{
  margin-top:20px; max-width:860px; padding:20px 22px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.66);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 12px 32px rgba(20,40,70,0.12);
}
.adv .eyebrow{color:#2A4763}
.adv__note{margin:8px 0 16px; font-size:14px; line-height:20px; color:#2E3946}
.adv__note strong{font-weight:500; color:var(--ink)}
.adv__list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.adv-row{
  display:flex; align-items:flex-start; gap:10px; min-width:0;
  padding:14px; border-radius:var(--radius-md);
  background:rgba(241,242,244,0.7); border:1px dashed rgba(116,121,129,0.42);
}
.adv-row__lock{flex-shrink:0; margin-top:1px; color:#6A7078}
.adv-row__text{display:flex; flex-direction:column; gap:3px; min-width:0}
.adv-row__name{font-size:14px; font-weight:500; color:#5A6068}
.adv-row__desc{font-size:13px; line-height:18px; color:#6A7078}
.adv-row__badge{
  margin-left:auto; flex-shrink:0; align-self:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:#6A7078;
  background:rgba(255,255,255,0.75); border:1px solid var(--hairline);
  border-radius:var(--radius-pill); padding:3px 8px;
}

@media (max-width:860px){
  .adv__list{grid-template-columns:1fr}
  .gen__panels{grid-template-columns:1fr; gap:16px}
  .gen__stage{padding-block:16px 56px}
  .gen__head{margin-bottom:26px}
  .gen__actions .btn{flex:1 1 auto}
}

/* --------------------------- Community gallery ---------------------------- */
.community{position:relative; min-height:100vh}
/* The creations fill the page edge to edge; the header floats over them. */
.community__wall{display:block; padding:20px; min-height:100vh}
.community__scrim{
  position:absolute; top:0; left:0; right:0; z-index:2; pointer-events:none;
  height:min(470px,64vh);
  background:linear-gradient(180deg,
    var(--canvas) 0%, rgba(248,248,246,0.95) 34%, rgba(248,248,246,0.74) 58%, rgba(248,248,246,0) 100%);
}
.community__nav{position:absolute; top:0; left:0; right:0; z-index:4}
.community__head{position:absolute; top:76px; left:0; right:0; z-index:4; padding-top:26px}
.community__head .page-head{text-align:left; align-items:flex-start; margin:0; max-width:680px}
.empty-note{font-size:14px; line-height:20px; color:var(--muted); max-width:520px}
.creations-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px;
  list-style:none; margin:0; padding:0;
  perspective:1000px;
}
.creation{
  min-width:0; background:#fff; border-radius:var(--radius-lg); padding:16px;
  box-shadow:inset 0 0 0 1px var(--hairline);
  transform-style:preserve-3d;
}
/* Empty slot — a framed, tinted placeholder awaiting a real submission. */
.creation__frame{
  aspect-ratio:16 / 10; border-radius:14px; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  color:var(--line-navy);
  background:var(--soft);
  background-image:linear-gradient(160deg, color-mix(in srgb, var(--tint) 14%, transparent), color-mix(in srgb, var(--tint) 6%, transparent));
  box-shadow:inset 0 0 0 1px rgba(174,185,201,0.45);
}
.creation__frame svg{opacity:0.5}
.creation__frame img{width:100%; height:100%; object-fit:cover}
/* Motif parts animate individually (bars grow from their baseline, ring scales
   from its centre) — SVG needs fill-box for transform-origin to mean that. */
.mo-bar{transform-box:fill-box; transform-origin:bottom center}
.mo-ring,.mo-dot{transform-box:fill-box; transform-origin:center}
.creation__meta{display:flex; flex-direction:column; gap:4px; padding:14px 4px 2px; min-width:0}
.creation__title{
  font-size:15px; font-weight:500; letter-spacing:-0.005em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.creation__by{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.creation__user{color:var(--body); font-weight:500}
/* Unpopulated slot — muted caption, never a fabricated title or author */
.creation--empty .creation__title{font-weight:400; color:var(--muted)}

/* auto-fill handles column count; only the overlaid header needs adjusting */
@media (max-width:640px){
  .creations-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
  .community__wall{padding:14px}
  .community__head{top:64px; padding-top:18px}
  .community__scrim{height:min(430px,70vh)}
}

/* --------------------------------- Auth ----------------------------------- */
.auth{padding-block:80px 96px}
.auth-card{max-width:420px; margin:0 auto; display:flex; flex-direction:column; gap:16px}
.auth-card .eyebrow{letter-spacing:0.12em; color:var(--muted)}
.auth-card .summary__desc{max-width:none}
.auth-alt{display:flex; justify-content:center; margin-top:-2px}
.auth-link{
  background:none; border:none; padding:2px 4px; cursor:pointer;
  font-family:var(--font-sans); font-size:14px; color:var(--blue);
}
.auth-link:hover{color:var(--blue-hover); text-decoration:underline}

/* Provider sign-in. Same .btn--secondary shell as the rest of the site — a
   provider button, not a borrowed Google widget. */
.auth-providers{display:flex; flex-direction:column; gap:10px}
.auth-provider{width:100%; gap:10px}
.auth-provider__mark{flex-shrink:0}

/* "──── or ────" between the provider and the credential form */
.auth-divider{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.auth-divider::before,.auth-divider::after{
  content:""; flex:1; height:1px; background:var(--hairline);
}

.auth-submit{width:100%; margin-top:4px}

/* One alert slot per card — errors by default, notices in Atlas Blue. Copy is
   always the site's own words; raw Supabase errors go to the console. */
.auth-alert{
  margin:0; padding:10px 12px; border-radius:var(--radius-md);
  font-size:14px; line-height:20px; color:#8A2C28;
  background:#FDF1F0; box-shadow:inset 0 0 0 1px #F2C9C6;
}
.auth-alert--notice{color:#173E8F; background:var(--blue-tint); box-shadow:inset 0 0 0 1px #C9DBFF}

.auth .confirm .card-surface .progress__bar{margin-top:4px}

/* ------------------------- Navigation account state ------------------------ */
.nav__account{position:relative; display:inline-flex; align-items:center; gap:10px}
.nav__create{
  display:inline-flex; align-items:center; text-decoration:none;
  border-radius:var(--radius-pill); padding:9px 18px; background:var(--blue);
  font-weight:500; font-size:14px; color:#fff; cursor:pointer;
}
.nav__create:hover{background:var(--blue-hover); color:#fff}

.account{position:relative; display:inline-flex}
.account__chip{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  border:none; border-radius:var(--radius-pill); padding:6px 14px 6px 6px;
  background:rgba(255,255,255,0.78); box-shadow:inset 0 0 0 1px rgb(203,209,218);
  font-family:var(--font-sans); font-size:14px; font-weight:500; color:var(--ink);
  max-width:260px;
}
.account__chip:hover{background:#fff}
.account__avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex-shrink:0; border-radius:var(--radius-pill);
  background:var(--blue); color:#fff; font-size:13px; font-weight:500;
}
.account__label{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Unconfirmed email — a quiet marker, never a claim that the account is verified */
.account__flag{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; flex-shrink:0; border-radius:var(--radius-pill);
  background:#F3CA58; color:#5A4300; font-size:12px; font-weight:500;
}
.account__menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:30; min-width:240px;
  display:flex; flex-direction:column; gap:10px; padding:14px;
  background:#fff; border-radius:var(--radius-md);
  box-shadow:var(--shadow-card), inset 0 0 0 1px var(--hairline);
}
.account__who{
  font-size:13px; color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account__note{font-size:12px; line-height:16px; color:var(--muted)}
.account__action{
  border:none; background:var(--soft); cursor:pointer; text-align:left;
  border-radius:var(--radius-sm); padding:9px 12px;
  font-family:var(--font-sans); font-size:14px; color:var(--ink);
}
.account__action:hover{background:#E7E9ED}
.account__action:disabled{opacity:0.6; cursor:default}

/* Mobile: both account affordances fold into the hamburger menu, exactly as
   .nav__signin always has. Declared here, after the base rules above, so the
   hide actually applies; the .nav--open and .gen__nav-end overrides are
   two-class selectors and still win over it regardless of order. */
@media (max-width:640px){
  .nav__create, .nav__account{display:none}
}

/* The generator's header keeps its "Back to world formats" button and gains the
   account chip beside it. Below 640px the chip collapses to its avatar so the
   two controls still fit on one line. */
.gen__nav-end{display:flex; align-items:center; gap:12px; min-width:0}
@media (max-width:640px){
  .gen__nav-end .account__label{display:none}
  .gen__nav-end .account__chip{padding:6px}
  .gen__nav-end .nav__account{display:inline-flex}
}

/* The generator's auth check runs before its own script; keep the page from
   flashing into view for a visitor who is about to be sent to sign in.
   The attribute is removed as soon as a session is confirmed, and also on
   error, so a failed check can never leave the page hidden. */
html[data-auth-pending] body{visibility:hidden}