/* GalaxyBuilder space playground.
   This layer changes presentation only. Guide media and all creator/parent gates
   keep their existing identities, routes, and event hooks. */
:root {
  --galaxy-ink: #202041;
  --galaxy-muted: #62617b;
  --galaxy-paper: #f5f4ff;
  --galaxy-line: #deddee;
  --galaxy-lime: #d4ff59;
  --galaxy-cyan: #a8f4f3;
  --galaxy-violet: #7255e7;
  --galaxy-night: #201746;
  --galaxy-round: "Avenir Next", "Trebuchet MS", ui-rounded, system-ui, sans-serif;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--galaxy-ink);
  background: radial-gradient(ellipse at 84% 10%, #e1ddff 0, transparent 35%),
    radial-gradient(ellipse at 0 40%, #e7f5ef 0, transparent 30%), var(--galaxy-paper);
  font-family: var(--galaxy-round);
  overflow-x: clip;
}
body::before { display: none; }
button, a, summary { touch-action: manipulation; }
button, input, select, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #6447d4; outline-offset: 4px; }
.studio-shell { position: relative; width: min(1320px, calc(100% - 80px)); padding-bottom: 0; }
.topbar {
  position: relative; z-index: 4; display: flex; align-items: center;
  min-height: 100px; height: auto; gap: 24px; margin: 0; padding: 20px 0;
  border: 0; border-bottom: 1px solid #cbc9df; border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
}
.brand { gap: 10px; font: 850 24px/1 var(--galaxy-round); letter-spacing: -1.1px; text-shadow: none; }
.brand-mark { display: block; width: 43px; height: 43px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
.brand-mark img { display: block; width: 100%; height: 100%; filter: none; }
.brand-strong { background: none; color: var(--galaxy-ink); filter: none; text-shadow: none; }
.desktop-nav { gap: 5px; padding: 4px; border: 1px solid #deddee; border-radius: 99px; background: #ffffff7d; }
.desktop-nav .nav-button { min-height: 44px; padding: 11px 18px; border-radius: 99px; font: 700 14px/1.2 var(--galaxy-round); color: #535168; letter-spacing: 0; text-shadow: none; }
.desktop-nav .nav-button.active { background: var(--galaxy-ink); color: #fff; box-shadow: none; }
.desktop-nav .nav-button:hover:not(.active) { background: #eae7fa; color: var(--galaxy-ink); }
.account-area { gap: 10px; }
.account-label { color: #62617b; font-size: 13px; }
.account-area .quiet-button { min-height: 44px; padding: 11px 16px; border: 1px solid #ccc8e2; border-radius: 99px; background: #fff; color: var(--galaxy-ink); box-shadow: none; text-shadow: none; font: 700 13px/1.2 var(--galaxy-round); }
.account-area .quiet-button:hover { background: var(--galaxy-lime); border-color: #bacf78; }
.skip-link { color: var(--galaxy-ink); z-index: 20; }
.notice { z-index: 10; }

/* One inviting composition: idea on the left, the real guides on the right. */
.galaxy-home { display: block; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--galaxy-ink); }
.galaxy-home .galaxy-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center; gap: clamp(30px, 5vw, 76px); position: relative;
  min-height: 0; margin: 0; padding: 52px 0 50px; border-radius: 0;
  background: none; overflow: visible; isolation: isolate;
}
.galaxy-home .galaxy-hero::before { display: none; }
.galaxy-home .hero-copy { min-width: 0; width: auto; max-width: none; min-height: 0; margin: 0; padding: 0; text-align: left; align-self: center; }
.galaxy-home .eyebrow {
  display: flex; align-items: center; gap: 9px; width: auto; margin: 0 0 15px; padding: 0;
  border: 0; border-radius: 0; background: none; color: #62539a;
  font: 800 11px/1.5 var(--galaxy-round); letter-spacing: 1.4px; text-shadow: none; box-shadow: none;
}
.orbit-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7960da; box-shadow: 0 0 0 4px #7960da15; }
.galaxy-home .hero-copy h1 {
  display: block; max-width: 620px; margin: 0 0 18px; color: var(--galaxy-ink);
  font: 850 clamp(42px, 4.9vw, 66px)/1.04 var(--galaxy-round);
  letter-spacing: -2.7px; text-shadow: none; text-wrap: balance;
}
.galaxy-home .hero-description { display: block; max-width: 460px; margin: 0 0 25px; color: #62617b; font: 500 17px/1.65 var(--galaxy-round); text-shadow: none; }
.galaxy-home .instant-preview-form {
  box-sizing: border-box; position: relative; z-index: 2; width: 100%; max-width: none;
  margin: 0; padding: 20px; border: 1px solid #d9d6ec; border-radius: 25px;
  background: #fff; box-shadow: 0 10px 0 -5px #e6e2f8, 0 20px 45px #3a27740c; text-align: left;
}
.composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.galaxy-home .instant-preview-form label { display: block; margin: 0; color: var(--galaxy-ink); font: 800 21px/1.3 var(--galaxy-round); letter-spacing: -.5px; text-shadow: none; }
.composer-heading > span { color: var(--galaxy-violet); font-size: 28px; line-height: 1; }
.galaxy-home .instant-preview-input { display: flex; flex-direction: column; gap: 12px; }
.galaxy-home .instant-preview-input textarea {
  display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 106px; min-height: 106px;
  padding: 13px 15px; border: 1px solid #e1ddec; border-radius: 15px;
  background: #f7f6fc; color: var(--galaxy-ink); font: 500 18px/1.5 var(--galaxy-round);
  text-align: left; resize: vertical; overflow-wrap: anywhere; box-shadow: none;
}
.galaxy-home .instant-preview-input textarea::placeholder { color: #6f6984; opacity: 1; }
.galaxy-home .instant-preview-input textarea:focus { border-color: var(--galaxy-violet); outline: 3px solid #b3a2fb55; outline-offset: 1px; background: #fff; }
.galaxy-home .instant-preview-input button {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  width: 100%; min-height: 55px; padding: 13px 20px; border: 1px solid #b8dd4d; border-radius: 14px;
  background: var(--galaxy-lime); color: #253020; font: 800 20px/1.3 var(--galaxy-round);
  box-shadow: none; cursor: pointer; transition: background .18s, transform .18s;
}
.galaxy-home .instant-preview-input button > span { font-size: 26px; line-height: 1; }
.galaxy-home .instant-preview-input button:hover { background: #c5f740; box-shadow: none; transform: translateY(-1px); }
.galaxy-home .instant-preview-input button:active { transform: translateY(1px); }
.galaxy-home .instant-preview-input button:disabled { opacity: .6; transform: none; }
.galaxy-home #instant-preview-note { margin: 12px 0 0; color: #696378; font: 500 12px/1.55 var(--galaxy-round); text-align: center; }
.galaxy-home .creation-demo, .galaxy-home #start-creating, .galaxy-home .adventure-guides-art, .galaxy-home .stage-note { display: none; }

/* Orbit scene is CSS. Character pixels are the original, approved media. */
.guide-planet {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  min-width: 0; min-height: 550px; padding: 26px 20px 20px; overflow: hidden;
  border: 1px solid #b8aaf9; border-radius: 180px 180px 34px 34px;
  background: radial-gradient(ellipse at 50% 38%, #e2daff 0, #b9a5ff 42%, transparent 72%),
    linear-gradient(145deg, #aea3ff, #8d75e6 64%, #c0afff);
  box-shadow: inset 0 0 0 7px #ffffff24, 0 25px 65px #7254c820;
}
.guide-planet::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 27%; height: 58%; border-radius: 50%; background: #d9ccff; box-shadow: 0 0 70px #efe7ff99; }
.guide-planet::after { content: ""; position: absolute; z-index: -1; left: -10%; right: -10%; bottom: 91px; height: 130px; border-radius: 50%; transform: rotate(-7deg); border: 1px solid #f3eaffaa; background: linear-gradient(180deg, #e7dfffaa, #9275d322); }
.guide-team-heading { display: flex; justify-content: center; align-items: center; gap: 9px; position: relative; z-index: 1; margin: 13px 0 22px; color: #392661; font: 850 10px/1.4 var(--galaxy-round); letter-spacing: 1.5px; }
.guide-team-heading > span:last-child { font-size: 17px; }
.guide-team-heading .orbit-dot { width: 6px; height: 6px; background: #45305e; box-shadow: none; }
.planet-invitation { position: relative; z-index: 1; margin: 0; color: #39295f; text-align: center; font: 500 25px/1.2 var(--galaxy-round); letter-spacing: -.8px; }
.planet-invitation strong { display: inline-block; margin-top: 4px; font-size: 29px; font-weight: 850; }
.planet-orbit { position: absolute; z-index: -1; width: 600px; height: 230px; top: 150px; left: 50%; border: 1px solid #ffffff65; border-radius: 50%; transform: translateX(-50%) rotate(-34deg); pointer-events: none; }
.planet-orbit-two { width: 560px; height: 220px; top: 200px; transform: translateX(-50%) rotate(30deg); border-color: #7155b33d; }
.planet-spark { position: absolute; z-index: 0; color: #efffc4; font: 700 58px/1 var(--galaxy-round); }
.planet-spark-one { right: 8%; top: 125px; transform: rotate(8deg); }
.planet-spark-two { left: 7%; top: 245px; color: #fff; font-size: 34px; }
.hero-guides { display: flex; justify-content: center; align-items: end; gap: 7px; max-width: 100%; margin: 18px 0 13px; }
.guide-character { position: relative; flex: 1; min-width: 0; margin: 0; text-align: center; border-radius: 18px; }
.guide-character[role=button] { cursor: pointer; }
.guide-character[role=button]:focus-visible { outline-color: #392661; }
.guide-character figcaption { position: relative; z-index: 2; display: inline-block; padding: 6px 12px; border: 1px solid #ffffff9c; border-radius: 99px; color: #30234c; background: #f4eaffbc; font: 800 13px/1.2 var(--galaxy-round); }
.guide-stage { position: relative; height: 252px; overflow: visible; background: transparent; pointer-events: none; }
.guide-stage img, .guide-stage video { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.guide-stage img { filter: url(#guide-soft-alpha); }
.guide-stage [hidden] { display: none !important; }
.guide-planet .hero-guides { width: 100%; }
.guide-planet .guide-character:nth-child(2) .guide-stage { height: 276px; }
.guide-planet .guide-character:nth-child(1) { transform: rotate(-3deg); }
.guide-planet .guide-character:nth-child(3) { transform: rotate(3deg); }
.guide-message { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 66px; margin-top: auto; padding: 10px 12px 10px 16px; border: 1px solid #ffffffae; border-radius: 18px; background: #f8f4ffda; box-shadow: 0 7px 24px #4f2e9121; }
.guide-greeting { min-width: 0; margin: 0; color: #433260; font: 650 14px/1.45 var(--galaxy-round); letter-spacing: 0; text-shadow: none; }
.guide-mute { flex: none; max-width: 110px; min-height: 44px; margin: 0; padding: 9px 12px; border: 1px solid #d6cbea; border-radius: 12px; background: #fff; color: #574074; font: 700 12px/1.3 var(--galaxy-round); cursor: pointer; }
.guide-mute:hover { background: #ebe3ff; }
.planet-coordinate { margin-top: 13px; color: #39265f; font: 750 9px/1.4 var(--galaxy-round); letter-spacing: 3px; }
.guide-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.guide-stage .guide-talk-frames { display: block; width: 100%; height: 100%; overflow: visible; }
.guide-talk-frames [hidden] { display: none !important; }
.guide-character .guide-stage .guide-talk-frames svg { display: block; width: 100%; height: 100%; }
.guide-character[data-gesture=idle] .guide-stage { animation: guide-alive 3.8s ease-in-out infinite; }
.guide-character[data-gesture=wave] .guide-stage img { animation: guide-wave-pose .7s ease-in-out infinite alternate; transform-origin: center bottom; }
.guide-character[data-gesture=talk] .guide-stage img { animation: guide-talk-pose .38s ease-in-out infinite alternate; transform-origin: center bottom; }
.guide-character[data-gesture=point] .guide-stage img { animation: guide-point-pose .8s ease-in-out infinite alternate; transform-origin: center bottom; }
.guide-character[data-gesture=celebrate] .guide-stage img { animation: guide-celebrate-pose .55s ease-in-out infinite alternate; transform-origin: center bottom; }
@keyframes guide-alive { 50% { transform: translateY(-5px); } }
@keyframes guide-wave-pose { to { transform: rotate(-4deg) translateY(-3px); } }
@keyframes guide-talk-pose { to { transform: scale(1.015) translateY(-2px); } }
@keyframes guide-point-pose { to { transform: rotate(2deg); } }
@keyframes guide-celebrate-pose { to { transform: translateY(-10px) rotate(-3deg); } }
.guide-target { outline: 3px solid #7050db !important; outline-offset: 4px; }
.guide-character[data-gesture=point]::after { content: "➜"; position: absolute; right: 0; bottom: 0; display: block; transform: rotate(var(--guide-point-angle, 90deg)); font: 700 24px/1 var(--galaxy-round); color: #3d2b6a; }

/* Playful, tactile entry points. No invented activity or generated examples. */
.starter-builds { position: relative; z-index: 1; width: 100%; max-width: none; margin: 20px 0 30px; padding: 0; text-align: left; }
.starter-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }
.starter-heading .eyebrow { margin-bottom: 8px; }
.galaxy-home .starter-builds h2 { margin: 0; color: var(--galaxy-ink); font: 850 clamp(28px, 3vw, 38px)/1.15 var(--galaxy-round); letter-spacing: -1.3px; text-shadow: none; }
.starter-builds h2 span { color: #7755d6; }
.starter-heading > p { margin: 0 0 3px; color: var(--galaxy-muted); font: 500 14px/1.5 var(--galaxy-round); }
.starter-build-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.starter-build-grid button { min-width: 0; min-height: 44px; padding: 7px; border: 1px solid #dedbed; border-radius: 23px; background: #fff; color: var(--galaxy-ink); cursor: pointer; text-align: left; box-shadow: 0 8px 20px #4c377008; transition: transform .18s, box-shadow .18s; }
.starter-build-grid button:hover { transform: translateY(-5px); box-shadow: 0 12px 28px #4c37701c; }
.starter-build-grid button:active { transform: translateY(-1px); }
.starter-art { position: relative; display: grid; place-items: center; height: 126px; overflow: hidden; border-radius: 17px; }
.starter-art::before, .starter-art::after { content: ""; position: absolute; width: 145px; height: 145px; border-radius: 50%; border: 1px solid #ffffff7c; transform: rotate(-25deg); }
.starter-art::before { width: 220px; height: 76px; }
.starter-art::after { width: 80px; height: 180px; }
.starter-art > span { position: relative; z-index: 1; display: grid; place-items: center; width: 67px; height: 67px; border: 1px solid #ffffffbb; border-radius: 21px; background: #ffffff94; font: 800 42px/1 var(--galaxy-round); box-shadow: 0 8px 0 #00000010, 0 13px 25px #00000013; transform: rotate(-9deg); }
.starter-art > i { position: absolute; left: 12px; top: 11px; color: #36304f; font: 750 10px/1.3 var(--galaxy-round); font-style: normal; letter-spacing: 1px; }
.starter-art-sky { background: linear-gradient(135deg, #b8efef, #72cddd); color: #285c80; }
.starter-art-race { background: linear-gradient(135deg, #d9caff, #bca1f1); color: #6842ac; }
.starter-art-race > span { transform: rotate(9deg); }
.starter-art-buddy { background: linear-gradient(135deg, #fcd4de, #eda1c3); color: #9b3763; }
.starter-art-school { background: linear-gradient(135deg, #e4f59c, #c4e16b); color: #566b20; }
.starter-art-school > span { transform: rotate(7deg); }
.starter-copy { position: relative; display: block; padding: 15px 31px 12px 10px; }
.starter-build-grid b { display: block; font: 800 16px/1.3 var(--galaxy-round); letter-spacing: -.3px; }
.starter-build-grid small { display: block; margin-top: 5px; color: #6d677d; font: 500 13px/1.4 var(--galaxy-round); }
.starter-arrow { position: absolute; right: 9px; top: 17px; color: #5b467d; font-size: 22px; }
.starter-builds .starter-disclosure { margin: 15px 0 0; color: #6d677d; font: 500 12px/1.6 var(--galaxy-round); }
#guest-creations-section h2 { margin-bottom: 20px; }
#guest-creations button { min-height: 110px; padding: 20px; }
#guest-creations button b { overflow-wrap: anywhere; }
#guest-creations button > span { display: block; margin-bottom: 8px; font-size: 26px; }

/* Keep the quieter family material easy to scan below the playground. */
.galaxy-home .galaxy-section { padding: 65px 0; }
.galaxy-home h2, .galaxy-home h3 { color: var(--galaxy-ink); font-family: var(--galaxy-round); text-shadow: none; }
.galaxy-home h2 { font-weight: 850; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.14; letter-spacing: -1.5px; }
.galaxy-home h2 span { color: #7654c8; }
.galaxy-home h3 { font-weight: 800; letter-spacing: -.6px; }
.category-section { border-top: 1px solid var(--galaxy-line); margin-top: 42px; }
.category-heading { text-align: center; }
.category-heading .eyebrow { justify-content: center; }
.category-heading h2 { margin: 0 0 14px; }
.category-heading > p:last-child { margin: 0 0 27px; color: var(--galaxy-muted); font-size: 16px; line-height: 1.5; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.category-card { position: relative; min-width: 0; min-height: 240px; aspect-ratio: .95; overflow: hidden; padding: 0; border: 1px solid #ddd8ec; border-radius: 22px; background: #c3b5df; color: #fff; text-align: left; box-shadow: none; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.category-card:hover { transform: translateY(-5px); box-shadow: 0 13px 28px #38304928; }
.category-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-card > span { position: absolute; inset: auto 0 0; display: grid; gap: 5px; padding: 50px 18px 19px; background: linear-gradient(transparent, #19122feb 72%); color: #fff; font-family: var(--galaxy-round); text-shadow: none; }
.category-card strong { color: #fff; font-size: 18px; line-height: 1.2; }
.category-card small { color: #f0e9ff; font: 500 13px/1.4 var(--galaxy-round); }
.marketing-section-heading { display: flex; flex-direction: row; align-items: end; gap: 30px; }
.marketing-section-heading h2 { margin: 0; }
.marketing-section-heading > p { color: var(--galaxy-muted); font: 500 15px/1.6 var(--galaxy-round); }
.galaxy-home .loop-section { display: block; border-top: 1px solid var(--galaxy-line); }
.loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.loop-grid article, .loop-grid article:nth-child(n) { padding: 23px; min-height: 225px; background: #fff; border: 1px solid var(--galaxy-line); border-radius: 23px; box-shadow: none; }
.loop-grid .step-number { color: #8e82aa; font-size: 11px; }
.loop-grid h3 { color: var(--galaxy-ink); font-size: 20px; text-shadow: none; }
.loop-grid p, .example-copy p, .age-grid p { color: var(--galaxy-muted); font: 500 14px/1.65 var(--galaxy-round); }
.step-symbol { box-shadow: none; }
.prototype-note { color: #746d85; font: 500 12px/1.65 var(--galaxy-round); }
.possibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.galaxy-home .possibility-card { display: block; overflow: hidden; background: #fff; border: 1px solid var(--galaxy-line); border-radius: 25px; box-shadow: none; }
.example-art { height: 190px; min-height: 190px; }
.example-copy { padding: 25px; background: #fff; }
.example-tag { margin-bottom: 12px; color: #775aab; font-size: 10px; letter-spacing: 1px; }
.possibility-card h3 { color: var(--galaxy-ink); font-size: 22px; text-shadow: none; }
.example-copy button { min-height: 44px; margin-top: 19px; padding: 14px 0 0; border-top-color: #ded9ec; color: #6542b1; font-size: 14px; }
.galaxy-home .family-section { margin: 25px 0; padding: 42px; gap: 60px; background: #e8e2fa; border: 1px solid #d9ceee; border-radius: 30px; }
.family-intro h2 { margin: 0; }
.family-intro > p:not(.eyebrow) { color: #5f526f; font: 500 15px/1.75 var(--galaxy-round); }
.galaxy-home .galaxy-text-link, .galaxy-home .galaxy-text-link:visited { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: #5f3ca1; box-shadow: none; font-weight: 750; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.family-principles h3 { color: var(--galaxy-ink); margin-top: 0; font-size: 17px; }
.family-principles p { color: #615570; font: 500 14px/1.65 var(--galaxy-round); }
.family-principles article > span { width: 44px; height: 44px; background: #fff9; color: #7152af; }
.age-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.age-grid article { border-color: var(--galaxy-line); }
.age-grid article > span { color: #7856b2; font: 800 11px/1.4 var(--galaxy-round); letter-spacing: 1px; }
.age-grid h3 { color: var(--galaxy-ink); font-size: 20px; }
.galaxy-home .faq-section { border-top: 1px solid var(--galaxy-line); gap: 60px; }
.faq-list details { padding: 18px 0; border-bottom: 1px solid var(--galaxy-line); }
.faq-list summary { align-items: center; min-height: 44px; color: var(--galaxy-ink); font-size: 17px; }
.faq-list summary::after { color: #7154c3; font-size: 26px; }
.faq-list p { color: var(--galaxy-muted); font: 500 15px/1.7 var(--galaxy-round); }
.galaxy-home .closing-cta { margin: 0 0 36px; padding: 50px 24px; border: 1px solid #c9c29f; border-radius: 30px; background: radial-gradient(ellipse at 90% 5%, #eafaad, transparent 60%), #eff5d8; }
.closing-cta > span { color: #688131; margin-bottom: 15px; }
.closing-cta .eyebrow { justify-content: center; color: #5d6a34; }
.closing-cta h2 { color: #344321; }
.galaxy-home .galaxy-cta { min-height: 52px; padding: 14px 24px; border: 1px solid #273921; border-radius: 99px; background: #2f4228; color: #fff; box-shadow: none; font: 800 16px/1.4 var(--galaxy-round); text-decoration: none; }
.closing-cta > p:last-child { color: #667151; font-size: 13px; }
.marketing-page-links { border-color: var(--galaxy-line); gap: 16px; }
.galaxy-home .marketing-page-links a { display: inline-flex; align-items: center; min-height: 44px; color: #635576; font-size: 13px; }
.site-footer { padding: 22px 0 28px; gap: 14px; border-top: 1px solid var(--galaxy-line); color: #71697f; font: 500 12px/1.5 var(--galaxy-round); }

/* App surfaces stay functional, readable, and visually part of the same studio. */
.content-view { color: var(--galaxy-ink); }
.content-view .eyebrow { color: #7758b3; }
.content-view h1, .content-view h2, .content-view h3 { color: var(--galaxy-ink); text-shadow: none; }
.content-view .hero-description { color: var(--galaxy-muted); }
.test-account-dialog, .idea-review-dialog, .kids-tour-dialog { border: 1px solid #d8d0e7; border-radius: 24px; background: #fcfaff; color: var(--galaxy-ink); font-family: var(--galaxy-round); box-shadow: 0 24px 80px #29124b33; }
.test-account-dialog h2, .idea-review-dialog h2 { color: var(--galaxy-ink); }
.dialog-close { width: 44px; height: 44px; }
#builder-signup-form { display: grid; gap: 14px; font: 16px/1.5 var(--galaxy-round); }
#builder-signup-form input:not([type=checkbox]) { box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px; border: 1px solid #bcb1d1; border-radius: 14px; background: #fff; color: var(--galaxy-ink); font: 18px var(--galaxy-round); }
#builder-signup-form input[type=checkbox] { width: 24px; height: 24px; vertical-align: middle; accent-color: var(--galaxy-violet); }
#builder-signup-dialog > .secondary-action { min-height: 44px; margin-top: 16px; }
body.creator-is-open { overflow: hidden; overscroll-behavior: none; }
.instant-workspace {
  position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
  min-width: 0; margin: 0; padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  overflow: hidden; border: 0; border-radius: 0; background: #f4f1fd; color: var(--galaxy-ink); box-shadow: none; overscroll-behavior: contain;
}
.instant-workspace[open] { display: flex; flex-direction: column; }
.instant-workspace-header { display: flex; flex: none; align-items: center; gap: 12px; min-width: 0; padding: 12px max(18px, env(safe-area-inset-right)) 12px max(18px, env(safe-area-inset-left)); background: #f9f7ff; border-bottom: 1px solid #d7cde8; text-shadow: none; }
.instant-workspace-kicker { display: none; }
.instant-workspace .instant-workspace-header h2 { margin: 0 0 3px; color: var(--galaxy-ink); font: 800 22px/1.25 var(--galaxy-round); letter-spacing: -.6px; text-shadow: none; }
.instant-workspace .instant-workspace-header p { margin: 0; color: #696075; font: 500 15px/1.4 var(--galaxy-round); letter-spacing: 0; }
.instant-workspace-close { flex: none; width: 44px; height: 44px; border: 1px solid #d8ceeb; border-radius: 50%; background: #fff; color: #644e89; }
.creation-guides { justify-content: flex-start; width: 115px; max-width: 115px; margin: 0 0 5px; gap: 3px; }
.creation-guides .guide-stage { height: 44px; }
.creation-guides figcaption { display: none; }
.creation-guides .guide-character[data-gesture=point]::after { display: none; }
.instant-workspace .instant-workspace-preview { display: flex; order: 2; flex: 1; position: relative; overflow: hidden; min-width: 0; min-height: 0; width: 100%; max-width: none; margin: 0; touch-action: none; overscroll-behavior: none; }
.generated-game-frame { display: block; flex: 1; width: 100%; height: 100%; min-width: 0; min-height: 0; border: 0; background: #211943; touch-action: none; overscroll-behavior: none; }
.instant-workspace .instant-workspace-save { order: 3; flex: none; min-height: 0; margin: 0; padding: 0 16px; text-shadow: none; color: #6b607a; font: 500 13px/1.4 var(--galaxy-round); }
.instant-workspace .instant-workspace-save:not(:empty) { padding-block: 7px; }
.instant-workspace .instant-workspace-toolbar { order: 4; flex: none; position: static; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid #d8cfe8; background: #faf8ff; }
.instant-workspace .instant-workspace-toolbar button, .instant-workspace .instant-workspace-toolbar button + button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 52px; padding: 10px 6px; border: 1px solid #dfd5ef; border-radius: 14px; background: #eeE8f8; color: #503773; box-shadow: none; font: 700 15px/1.2 var(--galaxy-round); letter-spacing: 0; overflow-wrap: anywhere; }
.instant-workspace .instant-workspace-toolbar button:first-child { background: var(--galaxy-lime); border-color: #c0db6e; color: #344023; }
.instant-workspace .instant-workspace-toolbar button[aria-expanded=true] { border-color: #7455c2; background: #dcd1f4; }
.instant-workspace .instant-workspace-toolbar button:disabled { opacity: .5; cursor: default; }
.instant-workspace .instant-tool-panel, .instant-workspace .instant-design-form { position: absolute; z-index: 8; top: auto; bottom: 90px; left: 12px; right: 12px; width: auto; max-height: 65dvh; overflow: auto; margin: 0; padding: 23px; border: 1px solid #d1c2e8; border-radius: 23px; background: #fdfaff; color: var(--galaxy-ink); box-shadow: 0 15px 60px #24113e40; }
.instant-tool-panel h3, .instant-design-form h3 { color: #4c326f; font-size: 22px; }
.instant-tool-panel p, .instant-tool-panel label, .instant-design-form label { color: #5c4f6f; font: 500 16px/1.5 var(--galaxy-round); }
.instant-design-form textarea, #guide-help-form input { width: 100%; min-height: 52px; padding: 12px; border: 1px solid #b8a7d4; border-radius: 14px; color: var(--galaxy-ink); background: #fff; font: 18px/1.5 var(--galaxy-round); }
.instant-design-form textarea { min-height: 125px; }
.instant-design-form button, #guide-help-form button { min-height: 48px; padding: 12px 20px; border: 0; border-radius: 13px; background: var(--galaxy-lime); color: #334126; font: 800 16px/1.3 var(--galaxy-round); box-shadow: none; cursor: pointer; }
#guide-help-form { display: grid; gap: 10px; margin-top: 12px; }
.instant-workspace .creation-demo { display: block; }
.quality-choice-panel { width: min(620px, 100%); margin: auto; padding: 24px; border: 1px solid #d4c7e7; border-radius: 24px; background: #f6f1ff; color: var(--galaxy-ink); }
.quality-choice-panel p { color: var(--galaxy-ink); font-size: 18px; font-weight: 750; }
.quality-choice-panel button { display: block; width: 100%; min-height: 48px; margin: 10px 0; padding: 12px; border: 1px solid #d1c3e4; border-radius: 14px; background: #fff; color: #573481; font: 700 17px var(--galaxy-round); cursor: pointer; }
.creation-build-animation { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; background: radial-gradient(ellipse, #6853a5, #211943 80%); }
.creation-build-animation span { color: var(--galaxy-lime); font-size: 44px; animation: creation-snap 2.5s ease-in-out 1; }
.creation-build-animation span:nth-child(even) { color: var(--galaxy-cyan); animation-delay: .15s; }
.creation-build-animation span:nth-child(3) { color: #d2b0ff; animation-delay: .3s; }
.creation-build-animation.settled span { animation: none; }
@keyframes creation-snap { 0% { transform: translateY(75px) rotate(-35deg) scale(.4); opacity: 0; } 35% { transform: translateY(-45px) rotate(30deg) scale(1.25); opacity: 1; } 75% { transform: translateY(15px) rotate(-10deg); } 100% { transform: translateY(0) rotate(0); } }
.creation-look-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 760px; margin: auto; }
.creation-look-card { min-width: 0; padding: 8px; border: 1px solid #c6b4e1; border-radius: 18px; background: #f6f0ff; }
.creation-look-window { position: relative; overflow: hidden; width: 100%; border-radius: 10px; pointer-events: none; }
.creation-look-window iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform-origin: 0 0; pointer-events: none; }
.creation-look-card button { width: 100%; min-height: 44px; margin-top: 8px; padding: 8px 2px; color: #344023; background: var(--galaxy-lime); border: 0; border-radius: 12px; font: 750 14px var(--galaxy-round); }
.creation-look-keep { display: block; margin: 16px auto; min-height: 44px; padding: 10px 18px; border: 1px solid #c4afdF; border-radius: 14px; color: #503773; background: #fff; }
.creation-look-picker { width: 100%; padding: 12px; box-sizing: border-box; }
.creation-history-dialog { box-sizing: border-box; width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; border: 1px solid #c8b3e6; border-radius: 24px; background: #f9f5ff; color: var(--galaxy-ink); }
.creation-history-dialog::backdrop { background: #24143cc9; }
.creation-history-dialog button { min-height: 44px; padding: 10px 16px; margin: 4px; border: 1px solid #cebee3; border-radius: 12px; background: #fff; color: #503773; cursor: pointer; }
.creation-history-versions { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 12px; }
.creation-history-preview iframe { display: block; width: 100%; height: min(70dvh, 760px); border: 0; border-radius: 12px; background: #211943; }

@media (min-width: 1500px) {
  .galaxy-home .galaxy-hero { padding-block: 64px; }
  .guide-planet { min-height: 590px; }
  .guide-stage { height: 275px; }
  .guide-planet .guide-character:nth-child(2) .guide-stage { height: 295px; }
}
@media (max-width: 1100px) {
  .studio-shell { width: calc(100% - 48px); }
  .topbar { gap: 15px; min-height: 88px; }
  .brand { font-size: 21px; }
  .account-label { display: none; }
  .desktop-nav .nav-button { padding-inline: 13px; }
  .galaxy-home .galaxy-hero { gap: 28px; padding-block: 38px; }
  .galaxy-home .hero-copy h1 { font-size: 49px; letter-spacing: -2px; }
  .guide-planet { padding-inline: 14px; min-height: 520px; }
  .planet-invitation { font-size: 23px; }
  .planet-invitation strong { font-size: 26px; }
  .guide-stage { height: 224px; }
  .guide-planet .guide-character:nth-child(2) .guide-stage { height: 250px; }
  .guide-message { flex-direction: column; text-align: center; gap: 8px; padding: 12px; }
  .guide-mute { min-height: 44px; }
  .starter-build-grid { gap: 12px; }
  .starter-build-grid b { font-size: 15px; }
  .starter-copy { padding-left: 8px; }
  .category-card { min-height: 200px; }
  .galaxy-home .family-section { gap: 32px; }
}
@media (max-width: 800px) {
  .studio-shell { width: calc(100% - 36px); }
  .brand { font-size: 20px; }
  .brand-mark { width: 37px; height: 37px; }
  .topbar { gap: 12px; flex-wrap: wrap; }
  .desktop-nav { gap: 2px; }
  .desktop-nav .nav-button { padding-inline: 10px; font-size: 12px; }
  .account-area { max-width: none; }
  .galaxy-home .hero-copy h1 { font-size: 43px; }
  .galaxy-home .hero-description { font-size: 16px; }
  .galaxy-home .instant-preview-form { padding: 16px; }
  .galaxy-home .instant-preview-form label { font-size: 19px; }
  .guide-planet { border-radius: 140px 140px 28px 28px; min-height: 500px; }
  .guide-team-heading { font-size: 8px; letter-spacing: 1px; }
  .planet-invitation { font-size: 21px; }
  .planet-invitation strong { font-size: 23px; }
  .guide-stage { height: 190px; }
  .guide-planet .guide-character:nth-child(2) .guide-stage { height: 215px; }
  .guide-character figcaption { font-size: 11px; padding-inline: 9px; }
  .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .possibility-grid { gap: 12px; }
  .example-copy { padding: 18px; }
  .possibility-card h3 { font-size: 19px; }
}
@media (max-width: 760px) {
  .studio-shell { width: 100%; max-width: none; padding: 0 max(20px, env(safe-area-inset-right)) calc(82px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .topbar { min-height: 76px; padding: max(14px, env(safe-area-inset-top)) 0 14px; flex-wrap: nowrap; }
  .brand { gap: 7px; font-size: 21px; letter-spacing: -.7px; }
  .desktop-nav { display: none; }
  .account-area { gap: 6px; justify-content: flex-end; flex-wrap: wrap; max-width: 44%; }
  .account-area .quiet-button { padding: 9px 11px; font-size: 11px; }
  .galaxy-home .galaxy-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 33px 0 30px; }
  .galaxy-home .hero-copy { min-height: 0; }
  .galaxy-home .eyebrow { font-size: 10px; letter-spacing: 1px; margin-bottom: 13px; }
  .galaxy-home .hero-copy h1 { max-width: 540px; font-size: clamp(40px, 9.7vw, 60px); line-height: 1.04; letter-spacing: -1.8px; margin: 0 0 16px; }
  .galaxy-home .hero-description { max-width: 500px; font-size: 16px; line-height: 1.6; margin-bottom: 22px; }
  .galaxy-home .instant-preview-form { padding: 18px; border-radius: 23px; }
  .galaxy-home .instant-preview-form label { font-size: 21px; }
  .galaxy-home .instant-preview-input textarea { height: 108px; min-height: 108px; font-size: 17px; }
  .galaxy-home .instant-preview-input button { min-height: 55px; font-size: 20px; }
  .galaxy-home #instant-preview-note { font-size: 12px; line-height: 1.5; }
  .guide-planet { width: 100%; max-width: 540px; min-height: 0; margin: 0 auto; padding: 20px 18px 16px; border-radius: 30px; }
  .guide-team-heading { margin: 0 0 13px; font-size: 9px; letter-spacing: 1.5px; }
  .planet-invitation { font-size: 20px; line-height: 1.2; }
  .planet-invitation br { display: none; }
  .planet-invitation strong { font-size: 20px; margin: 0; }
  .guide-planet .hero-guides { margin: 8px 0 16px; gap: 6px; }
  .guide-stage { height: clamp(140px, 42vw, 228px); }
  .guide-planet .guide-character:nth-child(2) .guide-stage { height: clamp(158px, 46vw, 250px); }
  .guide-character figcaption { padding: 6px 12px; font-size: 12px; }
  .guide-message { flex-direction: row; text-align: left; gap: 10px; padding: 10px 12px; min-height: 64px; }
  .guide-greeting { font-size: 13px; }
  .guide-mute { font-size: 11px; max-width: 100px; }
  .planet-coordinate { font-size: 8px; margin-top: 11px; letter-spacing: 2px; }
  .planet-spark-one { top: 60px; right: 6%; font-size: 40px; }
  .planet-spark-two { top: 160px; left: 4%; font-size: 23px; }
  .planet-orbit { top: 90px; }
  .planet-orbit-two { top: 130px; }
  .starter-builds { margin: 17px 0 30px; }
  .starter-heading { display: block; margin-bottom: 18px; }
  .starter-heading > p { margin-top: 10px; font-size: 14px; }
  .galaxy-home .starter-builds h2 { font-size: 32px; }
  .starter-build-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .starter-build-grid button { border-radius: 20px; padding: 6px; }
  .starter-art { height: 115px; border-radius: 14px; }
  .starter-art > span { width: 56px; height: 56px; border-radius: 18px; font-size: 36px; }
  .starter-copy { padding: 13px 22px 11px 6px; }
  .starter-build-grid b { font-size: 14px; line-height: 1.3; }
  .starter-build-grid small { font-size: 12px; }
  .starter-arrow { font-size: 18px; right: 3px; top: 14px; }
  .galaxy-home .galaxy-section { padding: 40px 0; }
  .category-section { margin-top: 35px; }
  .category-heading { text-align: left; }
  .category-heading .eyebrow { justify-content: flex-start; }
  .category-heading h2 { font-size: 32px; }
  .category-heading > p:last-child { font-size: 15px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .category-card { aspect-ratio: .88; min-height: 180px; border-radius: 19px; }
  .category-card > span { padding: 45px 12px 14px; }
  .category-card strong { font-size: 16px; }
  .category-card small { font-size: 12px; }
  .marketing-section-heading { flex-direction: column; align-items: start; gap: 15px; margin-bottom: 23px; }
  .marketing-section-heading > p { font-size: 14px; }
  .galaxy-home h2 { font-size: 32px; letter-spacing: -1px; }
  .loop-grid { gap: 12px; }
  .loop-grid article, .loop-grid article:nth-child(n) { min-height: 215px; padding: 18px; border-radius: 20px; }
  .loop-grid h3 { font-size: 19px; }
  .loop-grid p { font-size: 13px; }
  .possibility-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .example-art { height: 175px; min-height: 175px; }
  .example-copy { padding: 22px; }
  .possibility-card h3 { font-size: 23px; }
  .galaxy-home .family-section { margin: 12px 0; padding: 25px; grid-template-columns: minmax(0, 1fr); gap: 30px; border-radius: 25px; }
  .age-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .age-grid article { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--galaxy-line); }
  .galaxy-home .faq-section { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq-list summary { font-size: 16px; }
  .galaxy-home .closing-cta { padding: 35px 20px; margin-bottom: 25px; border-radius: 25px; }
  .site-footer { flex-direction: column; font-size: 11px; }
  .mobile-nav { z-index: 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 9px max(12px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid #dcd5ec; background: #fcfaffee; box-shadow: 0 -8px 30px #442a5c0b; backdrop-filter: blur(18px); }
  .mobile-nav-button { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 47px; padding: 9px 5px; border-radius: 14px; color: #6c607b; font: 700 12px/1.2 var(--galaxy-round); text-shadow: none; }
  .mobile-nav-button.active { background: #e8dff8; color: #593886; }
  .mobile-nav-button > span { color: inherit; font-size: 17px; }
  .instant-workspace .instant-workspace-header h2 { font-size: 19px; }
  .instant-workspace .instant-workspace-header p { font-size: 14px; }
  .instant-workspace .instant-workspace-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .instant-workspace .instant-workspace-toolbar button, .instant-workspace .instant-workspace-toolbar button + button { min-height: 48px; font-size: 14px; }
  .instant-workspace .instant-tool-panel, .instant-workspace .instant-design-form { bottom: calc(135px + env(safe-area-inset-bottom)); padding: 20px; }
  .creation-guides .guide-stage { height: 36px; }
}
@media (max-width: 390px) {
  .studio-shell { padding-inline: max(15px, env(safe-area-inset-left)); }
  .brand { font-size: 18px; }
  .topbar { gap: 8px; }
  .account-area .quiet-button { max-width: 100%; overflow-wrap: anywhere; font-size: 10px; padding-inline: 9px; }
  .brand-mark { width: 32px; height: 32px; }
  .galaxy-home .hero-copy h1 { font-size: 39px; }
  .galaxy-home .instant-preview-form { padding: 15px; }
  .galaxy-home .instant-preview-form label { font-size: 20px; }
  .guide-planet { padding-inline: 12px; }
  .planet-invitation, .planet-invitation strong { font-size: 18px; }
  .starter-build-grid b { font-size: 13px; }
  .category-card { min-height: 165px; }
  .category-card strong { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.instant-less-motion *, .instant-less-motion *::before, .instant-less-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* An edit keeps the original sandbox in place until a saved version is ready. */
.creation-edit-progress { position: absolute; z-index: 2; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; max-width: calc(100% - 24px); padding: 10px; border: 1px solid #c6b4fa; border-radius: 16px; background: #211943; box-shadow: 0 4px 20px #0006; }
.creation-edit-progress:empty { display: none; }
.creation-edit-progress .creation-build-animation { width: 90px; height: 40px; gap: 5px; background: none; }
.creation-edit-progress .creation-build-animation span { font-size: 18px; }
.creation-edit-progress button { min-height: 44px; flex: 0 1 auto; }