:root {
  color-scheme: light;
  --ink: #272443;
  --ink-soft: #64627f;
  --muted: #9896ae;
  --purple: #7162dc;
  --purple-dark: #594bc2;
  --lilac: #efedff;
  --pink: #f8d9e8;
  --paper: #fbfaff;
  --line: rgba(90, 79, 153, .12);
  font-family: 'DM Sans', 'Manrope', 'Aptos', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 83% 15%, rgba(221, 219, 255, .34), transparent 30%), radial-gradient(ellipse at 0% 61%, rgba(255, 224, 239, .22), transparent 26%), var(--paper); min-height: 100vh; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(128, 112, 232, .43); outline-offset: 3px; }
button { cursor: pointer; }
.app-shell { width: min(1440px, 100%); padding: 0 68px; margin: 0 auto; }
.topbar { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(93, 84, 144, .09); }
.brand { color: var(--ink); text-decoration: none; display: inline-flex; gap: 12px; align-items: center; font-size: 19px; font-weight: 750; letter-spacing: -.65px; }
.brand-name b { color: #8274e8; font-size: 12px; letter-spacing: 1px; margin-left: 3px; vertical-align: 2px; }
.brand-mark { position: relative; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg,#9e8bff,#7666de 61%,#5e66cb); box-shadow: 0 7px 16px rgba(114, 98, 220, .24); }
.brand-mark::before, .brand-mark::after, .brand-mark span { position: absolute; content: ""; border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%; transform: rotate(-30deg); }
.brand-mark::before { width: 25px; height: 10px; }
.brand-mark::after { width: 10px; height: 25px; }
.brand-mark span { width: 7px; height: 7px; background: #fff5b5; border: 0; box-shadow: 0 0 8px #fff; }
.top-actions { display: flex; align-items: center; gap: 24px; }
.nav-link, .parent-link { padding: 10px 14px; border: 0; background: transparent; color: #6f6c88; font-size: 13px; font-weight: 600; border-radius: 15px; transition: .2s ease; }
.nav-link:hover, .parent-link:hover { color: var(--purple-dark); background: #f1efff; }
.nav-icon { color: #9888e8; font-size: 16px; vertical-align: -1px; margin-right: 7px; }
.parent-link { color: #514d70; background: rgba(255,255,255,.62); border: 1px solid rgba(101,89,169,.12); padding: 11px 16px; box-shadow: 0 3px 12px rgba(62, 54, 125, .035); }
.parent-dot { display: inline-block; vertical-align: 1px; width: 7px; height: 7px; background: #f1a2bd; border-radius: 50%; margin-right: 7px; box-shadow: 0 0 0 3px #fbeaf1; }
.site-footer { min-height: 74px; border-top: 1px solid rgba(93,84,144,.08); display: flex; align-items: center; justify-content: center; gap: 11px; color: #a09db4; font-size: 11px; letter-spacing: .2px; }
.footer-sparkle { font-size: 13px; color: #beabd8; }

.welcome-page { min-height: 740px; position: relative; padding: 70px 0 55px; display: grid; grid-template-columns: 1.02fr 1fr; align-items: center; column-gap: 40px; }
.welcome-copy { position: relative; z-index: 2; padding: 9px 0 0 6px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #817da0; font-size: 11px; font-weight: 650; letter-spacing: 1.6px; text-transform: uppercase; }
.eyebrow-orbit { color: #9588eb; font-size: 15px; text-shadow: 0 0 9px #cdc8ff; }
.welcome-copy h1 { margin: 22px 0 4px; font-size: clamp(52px, 5.5vw, 77px); font-weight: 750; line-height: 1.14; letter-spacing: -5px; color: #282443; }
.welcome-copy h1 span { color: #7968dc; background: linear-gradient(105deg,#8073e7 12%,#a984d7 58%,#df92bb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.welcome-subtitle { margin: 16px 0 0; font-size: 17px; letter-spacing: .4px; color: #5b5876; font-weight: 600; }
.welcome-description { margin: 10px 0 0; color: #9390a8; font-size: 13px; line-height: 1.9; }
.hero-mic { border: 0; position: relative; display: grid; place-items: center; width: 91px; height: 91px; margin: 25px 0 0 4px; background: transparent; color: #fff; }
.mic-core { position: relative; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; transform: rotate(-4deg); background: linear-gradient(143deg,#a88bf2,#7969e2 63%,#6881e6); box-shadow: 0 12px 22px rgba(120, 99, 216, .24), inset 0 1px 1px rgba(255,255,255,.65); transition: transform .24s, box-shadow .24s; }
.hero-mic:hover .mic-core { transform: rotate(0) scale(1.06); box-shadow: 0 14px 27px rgba(120, 99, 216, .34), inset 0 1px 1px rgba(255,255,255,.65); }
.mic-ripple { position: absolute; width: 88px; height: 88px; border-radius: 30px; background: rgba(156, 137, 238, .09); transform: rotate(-4deg); }
.ripple-two { width: 108px; height: 108px; background: rgba(156, 137, 238, .05); }
.is-listening .mic-core, .studio-mic.is-listening { animation: mic-breathe 1.2s ease-in-out infinite; }
.is-listening .ripple-one { animation: ripple 1.5s ease-out infinite; }
.is-listening .ripple-two { animation: ripple 1.5s ease-out .42s infinite; }
.mic-caption { margin: 4px 0 0 2px; color: #797590; font-size: 12px; }
.voice-feedback { display: none; margin: 8px 0 0; font-size: 11px; color: #bb7292; }
.voice-feedback.is-visible { display: block; }
.example-title { display: flex; align-items: center; gap: 7px; margin: 31px 0 11px; color: #8c88a2; font-size: 11px; letter-spacing: .3px; }
.example-title span { font-size: 13px; }
.example-list { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.example-chip { display: inline-flex; align-items: center; gap: 12px; min-width: 259px; padding: 10px 13px; color: #5d5979; background: rgba(255,255,255,.63); border: 1px solid rgba(112,99,183,.12); border-radius: 13px; font-size: 12px; text-align: left; box-shadow: 0 3px 12px rgba(54, 48, 116, .025); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.example-chip:hover { transform: translateX(5px); border-color: rgba(122,104,220,.28); box-shadow: 0 7px 18px rgba(78,67,157,.08); }
.chip-number { color: #a69bdc; font-size: 9px; font-weight: 700; letter-spacing: .7px; }
.chip-arrow { margin-left: auto; color: #bbb6d2; font-size: 15px; }
.welcome-bottom { display: flex; gap: 20px; align-items: center; margin: 19px 0 0 2px; }
.text-entry-link, .continue-link { padding: 0; color: #85819a; border: 0; background: none; font-size: 11px; }
.text-entry-link span, .continue-link span { color: #8876dc; padding-left: 4px; }
.continue-link { color: #7663cf; }
.welcome-art-wrap { position: relative; min-width: 0; min-height: 500px; display: grid; place-items: center; }
.art-halo { position: absolute; width: min(94%, 525px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(217,208,255,.6) 0%, rgba(239,227,255,.38) 42%, rgba(248,240,255,0) 70%); filter: blur(2px); }
.welcome-art-card { position: relative; width: min(100%, 540px); margin: 7px 0 0 12px; transform: rotate(1.7deg); filter: drop-shadow(0 29px 42px rgba(50,43,113,.2)); animation: float 6s ease-in-out infinite; }
.welcome-art-card .world-svg { display: block; border-radius: 29px; border: 8px solid rgba(255,255,255,.74); box-shadow: 0 0 0 1px rgba(130,117,206,.08); }
.art-label { position: absolute; z-index: 2; color: #777294; font-size: 10px; letter-spacing: .6px; }
.label-top { top: 53px; right: 3%; }
.label-bottom { bottom: 61px; left: 4%; }
.label-bottom span { color: #c188be; font-size: 17px; vertical-align: -2px; margin-right: 3px; }
.label-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; background: #75d8ba; border-radius: 50%; box-shadow: 0 0 0 4px rgba(117,216,186,.17); }
.art-float-card { position: absolute; right: -22px; bottom: 49px; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 17px; background: rgba(255,255,255,.83); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 10px 28px rgba(42,35,102,.12); backdrop-filter: blur(12px); color: #514c73; }
.float-star { display: grid; place-items: center; color: #fff; font-size: 17px; width: 33px; height: 33px; border-radius: 12px; background: linear-gradient(140deg,#ffd880,#f2a1ba); }
.art-float-card b, .art-float-card small { display: block; }
.art-float-card b { font-size: 11px; font-weight: 700; }
.art-float-card small { margin-top: 3px; font-size: 9px; color: #9b97ae; }
.art-orbit { position: absolute; border: 1px solid rgba(137,125,207,.19); border-radius: 50%; }
.orbit-small { width: 75px; height: 75px; top: 18%; left: 7%; }
.art-doodle { position: absolute; color: #b8a1df; text-shadow: 0 2px 10px #e2d3ff; }
.doodle-a { top: 13%; left: 17%; font-size: 23px; }
.doodle-b { top: 29%; right: 2%; color: #ecb6ca; font-size: 17px; }
.doodle-c { bottom: 17%; right: 9%; font-size: 21px; }
.welcome-footnote { grid-column: 1/-1; align-self: end; margin: 4px 0 0 7px; color: #a19db3; font-size: 10px; letter-spacing: .3px; }
.welcome-footnote span { color: #c2a9dd; margin-right: 6px; }
.home-composer { display: none; }
.home-composer.is-open { grid-column: 1/-1; display: flex; gap: 9px; align-items: center; max-width: 512px; margin: 15px 0 0 4px; padding: 7px 8px 7px 15px; border: 1px solid rgba(118,99,211,.19); background: #fff; border-radius: 18px; box-shadow: 0 8px 24px rgba(75,65,145,.08); animation: appear .22s ease; }
.home-composer label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.home-composer input { flex: 1; min-width: 0; height: 38px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.home-composer input::placeholder, .studio-composer input::placeholder { color: #aba8ba; }
.home-composer .send-button { width: 38px; height: 38px; }

.studio-page { padding: 43px 0 58px; }
.studio-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 1px 24px; }
.studio-heading h1 { margin: 10px 0 5px; font-size: 36px; letter-spacing: -1.8px; line-height: 1.2; font-weight: 750; }
.studio-heading p { margin: 0; color: #9290a7; font-size: 12px; }
.heading-slash { color: #c4bfda; padding: 0 2px; }
.studio-heading-actions { display: flex; gap: 13px; align-items: center; }
.live-pill { color: #7d7991; display: flex; align-items: center; gap: 8px; font-size: 10px; }
.live-pill i { width: 7px; height: 7px; background: #7edab4; border-radius: 50%; box-shadow: 0 0 0 4px rgba(126,218,180,.14); }
.round-icon-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; border: 1px solid rgba(99,88,168,.13); background: rgba(255,255,255,.75); color: #706a99; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 21px; align-items: start; }
.stage-column { min-width: 0; }
.world-stage-card { overflow: hidden; border-radius: 27px; background: rgba(255,255,255,.84); border: 1px solid rgba(110,99,178,.1); box-shadow: 0 12px 38px rgba(59,52,125,.07); }
.stage-topline { height: 48px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: #817d98; font-size: 10px; }
.stage-location { color: #655f86; font-weight: 700; letter-spacing: .2px; }
.stage-location span { color: #a490e8; font-size: 15px; margin-right: 5px; vertical-align: -1px; }
.stage-count { color: #a09daf; }
.stage-count b { color: #d0ccdc; margin: 0 5px; }
.world-stage { position: relative; overflow: hidden; margin: 0 10px; border-radius: 21px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); }
.world-svg { display: block; width: 100%; height: auto; aspect-ratio: 780/500; }
.world-svg-compact { width: 100%; }
.world-object { transform-box: fill-box; transform-origin: center; animation: objectFade .62s ease-out both; filter: drop-shadow(0 4px 4px rgba(35,31,78,.12)); }
.compact-object { animation: none; }
.has-new-object .world-object { animation: objectFade .62s ease-out both; }
.planet-pop { transform-origin: 390px 280px; animation: planetIn .9s cubic-bezier(.18,.85,.3,1); }
.stage-caption { position: absolute; bottom: 13px; left: 15px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(24,31,81,.3); color: rgba(255,255,255,.92); backdrop-filter: blur(9px); font-size: 10px; }
.caption-pulse { display: inline-block; vertical-align: 0; margin-right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #b0ffe1; box-shadow: 0 0 9px #7df3d3; }
.stage-sticker { position: absolute; top: 13px; right: 14px; padding: 7px 10px; color: #fff; background: rgba(27,31,83,.24); border: 1px solid rgba(255,255,255,.26); border-radius: 99px; backdrop-filter: blur(8px); font-size: 9px; }
.stage-response { min-height: 81px; display: flex; gap: 11px; align-items: center; position: relative; padding: 12px 20px 14px; }
.assistant-avatar { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#a899f6,#7668d7); border-radius: 12px; box-shadow: 0 4px 12px rgba(119,103,216,.2); }
.response-copy { min-width: 0; }
.response-label { display: block; color: #8d88a3; font-size: 9px; font-weight: 700; letter-spacing: .4px; }
.response-label i { padding-left: 6px; color: #b2afbf; font-style: normal; font-weight: 400; }
.response-copy p { margin: 4px 0 0; color: #5c5876; font-size: 11px; line-height: 1.5; }
.response-decoration { position: absolute; right: 20px; color: #e2d3ee; font-size: 17px; }
.voice-panel { min-height: 90px; display: flex; align-items: center; gap: 13px; margin-top: 14px; padding: 13px 16px; border: 1px solid rgba(114,101,189,.14); border-radius: 21px; background: rgba(255,255,255,.81); box-shadow: 0 6px 23px rgba(67,57,133,.045); transition: .25s; }
.voice-panel-listening { border-color: rgba(128,111,224,.37); box-shadow: 0 7px 26px rgba(91,76,189,.12); }
.studio-mic { position: relative; display: grid; place-items: center; flex: 0 0 51px; width: 51px; height: 51px; overflow: hidden; color: white; border: 0; border-radius: 16px; background: linear-gradient(145deg,#9d8aef,#7666dd); box-shadow: 0 7px 13px rgba(117,100,211,.22); }
.mic-wave { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: 2px; background: rgba(70,56,156,.4); }
.mic-wave i { display: block; width: 2px; height: 7px; border-radius: 9px; background: #fff; animation: wave .8s ease-in-out infinite alternate; }
.mic-wave i:nth-child(2), .mic-wave i:nth-child(4) { height: 14px; animation-delay: .16s; }
.mic-wave i:nth-child(3) { height: 20px; animation-delay: .3s; }
.is-listening .mic-wave { display: flex; }
.voice-prompt-area { flex: 1 0 143px; min-width: 135px; }
.voice-prompt-area strong, .voice-prompt-area span { display: block; }
.voice-prompt-area strong { color: #555171; font-size: 11px; font-weight: 700; }
.voice-prompt-area span { color: #a19daf; font-size: 9px; margin-top: 5px; }
.studio-composer { display: flex; flex: 1; min-width: 100px; gap: 6px; align-items: center; padding-left: 12px; border-left: 1px solid rgba(101,91,162,.11); }
.studio-composer input { min-width: 0; flex: 1; height: 38px; color: var(--ink); outline: 0; border: 0; background: transparent; font-size: 10px; }
.send-button { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: white; border: 0; border-radius: 12px; background: linear-gradient(140deg,#a18cef,#7869dd); box-shadow: 0 5px 11px rgba(114,98,213,.2); transition: transform .2s; }
.send-button:hover { transform: translateX(2px); }
.quick-ideas { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.quick-ideas > span { margin-right: 3px; color: #aaa6b8; font-size: 9px; }
.quick-ideas button { padding: 7px 10px; border: 1px solid rgba(115,103,183,.1); background: rgba(255,255,255,.51); border-radius: 10px; color: #7a7594; font-size: 9px; transition: .2s; }
.quick-ideas button:hover { color: #6657c7; border-color: rgba(115,103,183,.27); background: white; }
.world-sidebar { display: flex; flex-direction: column; gap: 14px; }
.sidebar-card { padding: 19px; border-radius: 22px; background: rgba(255,255,255,.79); border: 1px solid rgba(110,99,178,.1); box-shadow: 0 9px 28px rgba(59,52,125,.055); }
.sidebar-title { display: flex; justify-content: space-between; align-items: center; }
.sidebar-kicker { color: #9a95ae; font-size: 9px; letter-spacing: .7px; }
.sidebar-title h2 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.4px; }
.inventory-count { display: grid; place-items: center; width: 25px; height: 25px; color: #7465d4; border-radius: 9px; background: #f0edff; font-size: 11px; font-weight: 700; }
.sidebar-intro { margin: 12px 0 13px; color: #a09cae; font-size: 10px; line-height: 1.8; }
.object-collection { display: flex; flex-wrap: wrap; gap: 7px; }
.object-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px 6px 6px; color: #6e6987; border-radius: 11px; background: #f9f8fd; border: 1px solid rgba(112,102,170,.08); font-size: 9px; }
.object-icon { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 7px; font-style: normal; color: #8371d4; background: #efebff; font-size: 12px; }
.icon-tree { color: #35ad8b; background: #e2f7ed; }.icon-house { color: #dd8199; background: #ffebf0; }.icon-dragon { color: #4bbcae; background: #e2f9f5; }.icon-treasure { color: #dba34d; background: #fff5dc; }.icon-character { color: #d580aa; background: #fff0f5; }
.inventory-divider { height: 1px; margin: 16px 0 13px; background: rgba(106,97,164,.1); }
.tiny-world-note { display: flex; align-items: center; gap: 9px; }
.note-orb { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; color: #8571d9; border-radius: 10px; background: linear-gradient(145deg,#eeebff,#fbecf7); }
.tiny-world-note b, .tiny-world-note small { display: block; }
.tiny-world-note b { color: #6d6884; font-size: 9px; }
.tiny-world-note small { margin-top: 4px; color: #aaa6b5; font-size: 8px; }
.game-card { overflow: hidden; padding: 0 17px 16px; }
.game-illustration { height: 94px; position: relative; display: grid; place-items: center; overflow: hidden; margin: 0 -17px 13px; background: linear-gradient(115deg,#d6caff,#e5d9ff 44%,#ffe2e9); }
.game-illustration::before, .game-illustration::after { content: ""; position: absolute; bottom: -35px; border-radius: 50%; background: #f9f5ff; opacity: .8; }
.game-illustration::before { width: 190px; height: 75px; left: -20px; }.game-illustration::after { width: 170px; height: 70px; right: -24px; bottom: -45px; opacity: .7; }
.game-chest { z-index: 1; font-size: 32px; filter: drop-shadow(0 5px 4px rgba(89,61,144,.16)); animation: bob 2.8s ease-in-out infinite; }
.game-star { position: absolute; z-index: 1; color: #fff5ad; text-shadow: 0 1px 8px #fff; }.star-left { top: 17px; left: 26%; font-size: 13px; }.star-right { top: 29px; right: 22%; font-size: 18px; color: white; }
.game-cloud { position: absolute; width: 39px; height: 14px; background: rgba(255,255,255,.74); border-radius: 50px; }.game-cloud::before, .game-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }.game-cloud::before { width: 17px; height: 17px; left: 7px; top: -7px; }.game-cloud::after { width: 12px; height: 12px; right: 6px; top: -4px; }.cloud-left { left: 8%; top: 42px; transform: scale(.7); }.cloud-right { right: 7%; top: 18px; transform: scale(.8); }
.game-card-copy h3 { margin: 5px 0 4px; color: #45405f; font-size: 14px; letter-spacing: -.2px; }
.game-card-copy p { margin: 0; color: #a09cac; font-size: 9px; }
.game-button { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 10px 12px; color: white; border: 0; border-radius: 12px; background: linear-gradient(105deg,#8170df,#a080d9); font-size: 10px; font-weight: 650; box-shadow: 0 5px 13px rgba(124,101,205,.18); transition: .2s; }
.game-button:hover { filter: brightness(1.04); transform: translateY(-1px); }.game-button span { font-size: 16px; }.game-button.is-active { background: linear-gradient(105deg,#77bda9,#66a9bf); }
.save-world-card { display: flex; align-items: center; width: 100%; gap: 10px; padding: 14px; text-align: left; border-radius: 17px; border: 1px solid rgba(218,170,198,.27); background: linear-gradient(120deg,rgba(255,245,251,.95),rgba(252,249,255,.88)); box-shadow: 0 5px 17px rgba(95,71,133,.035); transition: .2s; }
.save-world-card:hover { transform: translateY(-2px); border-color: rgba(218,170,198,.5); }
.save-card-icon { display: grid; place-items: center; width: 35px; height: 35px; color: #bc82ab; border-radius: 12px; background: #ffedf5; }
.save-world-card b, .save-world-card small { display: block; }.save-world-card b { color: #665a78; font-size: 9px; }.save-world-card small { margin-top: 4px; color: #aaa0b2; font-size: 8px; }.save-card-arrow { margin-left: auto; color: #b994c2; font-size: 16px; }

.gallery-page, .result-page { min-height: 670px; padding: 41px 0 65px; }
.back-link { padding: 0; border: 0; background: transparent; color: #847f9a; font-size: 11px; }
.back-link:hover { color: #6e5dd2; }
.gallery-heading { text-align: center; margin: 55px auto 34px; }.gallery-heading .eyebrow, .result-heading .eyebrow { justify-content: center; }
.gallery-heading h1, .result-heading h1 { margin: 15px 0 9px; color: #302b4c; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -1.7px; }
.gallery-heading p, .result-heading p { margin: 0; color: #9692a8; font-size: 12px; }
.empty-gallery { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed rgba(116,103,186,.22); border-radius: 29px; background: rgba(255,255,255,.54); }
.empty-orbit { position: relative; width: 88px; height: 88px; display: grid; place-items: center; margin-bottom: 12px; color: #9c8be3; border: 1px solid rgba(147,130,219,.24); border-radius: 50%; box-shadow: 0 0 0 12px rgba(228,220,255,.22), 0 0 0 24px rgba(228,220,255,.12); font-size: 28px; }.empty-orbit i, .empty-orbit b { position: absolute; color: #d6a4ce; font-style: normal; font-weight: 400; font-size: 12px; }.empty-orbit i { top: 6px; right: 1px; }.empty-orbit b { left: 2px; bottom: 12px; color: #f0b6a6; }
.empty-gallery h2 { margin: 14px 0 5px; color: #504a6b; font-size: 16px; }.empty-gallery p { margin: 0 0 17px; color: #a19daf; font-size: 11px; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 42px; padding: 0 17px; border: 0; border-radius: 13px; color: white; background: linear-gradient(110deg,#8572e6,#a17bd4); box-shadow: 0 7px 16px rgba(128,105,208,.22); font-size: 11px; font-weight: 650; transition: .2s; }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(128,105,208,.28); }
.saved-art-card { max-width: 830px; display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; margin: 0 auto 30px; border: 1px solid rgba(105,95,173,.13); border-radius: 25px; background: rgba(255,255,255,.83); box-shadow: 0 12px 35px rgba(54,46,124,.07); }.saved-art-image { display: grid; place-items: center; padding: 14px; background: #efedff; }.saved-art-image .world-svg { overflow: hidden; border-radius: 17px; }.saved-art-meta { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 28px; }.saved-badge { display: inline-flex; padding: 6px 9px; color: #8170ce; background: #f0edff; border-radius: 9px; font-size: 9px; }.saved-art-meta h2 { margin: 15px 0 5px; font-size: 23px; }.saved-art-meta p { margin: 0 0 22px; color: #9a96a9; font-size: 11px; }
.gallery-parent-prompt { display: flex; align-items: center; gap: 12px; max-width: 830px; margin: 17px auto; padding: 16px 19px; border-radius: 17px; background: rgba(255,247,251,.77); border: 1px solid rgba(214,173,198,.24); }.parent-prompt-icon { display: grid; place-items: center; width: 35px; height: 35px; color: #cf88aa; font-size: 20px; border-radius: 12px; background: #ffebf3; }.gallery-parent-prompt b, .gallery-parent-prompt small { display: block; }.gallery-parent-prompt b { color: #665974; font-size: 10px; }.gallery-parent-prompt small { margin-top: 4px; color: #aaa0af; font-size: 9px; }.gallery-parent-prompt button { margin-left: auto; padding: 9px 12px; border: 0; border-radius: 10px; color: #a16c9a; background: transparent; font-size: 10px; }

.result-heading { margin: 42px auto 27px; text-align: center; }.result-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 19px; align-items: stretch; max-width: 910px; margin: 0 auto; }.result-preview-card, .parent-form-card { overflow: hidden; border-radius: 24px; border: 1px solid rgba(107,96,177,.12); background: rgba(255,255,255,.85); box-shadow: 0 11px 33px rgba(58,50,123,.065); }.result-art { position: relative; padding: 12px; background: linear-gradient(130deg,#dedaff,#f6dcea); }.result-art .world-svg { overflow: hidden; border-radius: 15px; }.result-art-caption { position: absolute; bottom: 21px; left: 22px; padding: 7px 10px; color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(32,34,87,.34); backdrop-filter: blur(8px); border-radius: 10px; font-size: 8px; }.result-meta { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 7px; }.result-meta h2 { margin: 8px 0 3px; font-size: 17px; }.result-meta p { margin: 0; color: #a09bad; font-size: 9px; }.result-sparkle { color: #e1b1ce; font-size: 25px; }.result-actions { display: flex; gap: 8px; padding: 12px 18px 18px; }.result-actions .primary-button, .result-actions .secondary-button { flex: 1; min-height: 39px; }.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #796b9b; border: 1px solid rgba(119,101,181,.18); border-radius: 13px; background: white; font-size: 10px; }.secondary-button:hover { background: #faf9ff; border-color: rgba(119,101,181,.34); }
.parent-form-card { padding: 24px; background: linear-gradient(150deg,rgba(255,255,255,.94),rgba(255,247,251,.9)); }.form-orb { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; color: #cd81a6; background: #ffeaf3; border-radius: 14px; font-size: 21px; }.parent-form-card h2 { margin: 6px 0 6px; color: #514962; font-size: 20px; letter-spacing: -.5px; }.parent-form-card > p { margin: 0 0 19px; color: #9993a7; font-size: 10px; line-height: 1.7; }.booking-form { display: flex; flex-direction: column; gap: 11px; }.booking-form label { display: block; color: #777188; font-size: 9px; }.booking-form label > span { float: right; color: #b5afbd; font-size: 8px; }.booking-form input, .booking-form select { display: block; width: 100%; height: 38px; margin-top: 5px; padding: 0 11px; color: #5d5870; border: 1px solid rgba(111,101,161,.13); border-radius: 10px; outline: 0; background: rgba(255,255,255,.77); font-size: 9px; }.booking-form input::placeholder { color: #bbb6c3; }.booking-button { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 11px 14px; color: white; border: 0; border-radius: 12px; background: linear-gradient(105deg,#d88caf,#bb8bd2); box-shadow: 0 5px 13px rgba(191,127,171,.19); font-size: 10px; font-weight: 650; }.booking-button span { font-size: 15px; }.form-privacy { text-align: center; color: #aaa5b1; font-size: 8px; }.form-success { min-height: 198px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.form-success > span { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 12px; color: #fff; border-radius: 13px; background: linear-gradient(130deg,#a993e8,#d28dae); }.form-success b { color: #5e5875; font-size: 14px; }.form-success small { margin: 6px 0 12px; color: #aaa3b4; font-size: 9px; line-height: 1.6; }.result-bottom-link { display: flex; justify-content: center; gap: 7px; align-items: center; margin: 22px auto 0; color: #a09bab; font-size: 10px; }.result-bottom-link button { padding: 5px; color: #7c6ad1; border: 0; background: transparent; font-size: 10px; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 24px; max-width: min(90vw, 480px); padding: 12px 17px; color: white; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(43,39,81,.91); box-shadow: 0 9px 28px rgba(32,28,77,.2); font-size: 11px; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: .25s ease; backdrop-filter: blur(12px); }.toast.show { opacity: 1; transform: translate(-50%,0); }
.cloud-a { animation: drift 9s ease-in-out infinite alternate; }.cloud-b { animation: drift 11s ease-in-out infinite alternate-reverse; }.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.7s ease-in-out infinite; }.twinkle-1 { animation-delay: .4s; }.twinkle-2 { animation-delay: 1s; }.twinkle-3 { animation-delay: 1.7s; }.game-marker { animation: arrive .65s ease both; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(1.7deg); } 50% { transform: translateY(-8px) rotate(.7deg); } }
@keyframes drift { from { transform: translateX(-4px); } to { transform: translateX(10px); } }
@keyframes twinkle { 0%,100% { opacity: .6; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes wave { from { transform: scaleY(.45); } to { transform: scaleY(1.35); } }
@keyframes mic-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes ripple { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes arrive { from { opacity: 0; transform: translateY(16px) scale(.78); } 70% { opacity: 1; transform: translateY(-3px) scale(1.035); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes objectFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes planetIn { from { opacity: .65; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes appear { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1440px) { .app-shell { padding: 0 85px; } }
@media (max-width: 1120px) {
  .app-shell { padding: 0 43px; }
  .welcome-page { column-gap: 16px; }.welcome-copy h1 { font-size: 66px; }.welcome-art-wrap { min-height: 445px; }
  .studio-layout { grid-template-columns: minmax(0, 1fr) 235px; gap: 14px; }.sidebar-card { padding: 16px; }.game-card { padding: 0 14px 14px; }.game-illustration { margin-left: -14px; margin-right: -14px; }
  .voice-panel { flex-wrap: wrap; }.voice-prompt-area { flex: 1; }.studio-composer { flex-basis: 100%; border-left: 0; border-top: 1px solid rgba(101,91,162,.1); padding: 6px 0 0 2px; }
}
@media (max-width: 820px) {
  .app-shell { padding: 0 24px; }.topbar { height: 76px; }.welcome-page { grid-template-columns: 1fr .88fr; min-height: 660px; padding: 58px 0 40px; }.welcome-copy { padding-left: 0; }.welcome-copy h1 { font-size: 58px; letter-spacing: -3.5px; }.welcome-description br { display: none; }.welcome-art-wrap { min-height: 385px; }.art-float-card { right: -10px; bottom: 30px; transform: scale(.9); transform-origin: bottom right; }.art-label { font-size: 8px; }.label-top { top: 44px; }.label-bottom { bottom: 45px; }
  .studio-layout { grid-template-columns: minmax(0,1fr) 222px; }.studio-heading h1 { font-size: 32px; }.stage-topline { padding: 0 14px; }.stage-response { padding-left: 14px; }.world-sidebar { gap: 11px; }
}
@media (max-width: 650px) {
  .app-shell { padding: 0 17px; }.topbar { height: 68px; }.brand { font-size: 17px; gap: 9px; }.brand-mark { width: 31px; height: 31px; }.top-actions { gap: 4px; }.nav-link { padding: 9px 8px; font-size: 10px; }.nav-icon { margin-right: 3px; }.parent-link { padding: 9px 10px; font-size: 10px; }.site-footer { min-height: 64px; font-size: 9px; gap: 7px; }
  .welcome-page { min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 44px 2px 29px; }.welcome-copy { order: 1; padding: 0; }.eyebrow { font-size: 9px; letter-spacing: 1.2px; }.welcome-copy h1 { margin-top: 16px; font-size: clamp(51px, 13vw, 70px); line-height: 1.08; letter-spacing: -3.7px; }.welcome-subtitle { font-size: 15px; margin-top: 12px; }.welcome-description { font-size: 11px; margin-top: 8px; }.hero-mic { width: 81px; height: 81px; margin: 21px 0 0 -2px; }.mic-core { width: 66px; height: 66px; border-radius: 22px; }.mic-ripple { width: 80px; height: 80px; border-radius: 26px; }.ripple-two { width: 96px; height: 96px; }.mic-caption { font-size: 10px; }.example-title { margin-top: 21px; }.example-list { display: grid; grid-template-columns: 1fr; gap: 7px; }.example-chip { width: 100%; min-width: 0; padding: 10px 12px; font-size: 10px; }.welcome-bottom { margin-top: 15px; }.welcome-art-wrap { order: 0; min-height: 0; height: auto; margin: 0 -3px 28px; aspect-ratio: 1.26; }.welcome-art-card { width: 94%; margin: 0; }.welcome-art-card .world-svg { border-width: 5px; border-radius: 20px; }.art-halo { width: 90%; }.label-top { top: 7%; right: 1%; }.label-bottom { bottom: 8%; left: 0; }.art-float-card { right: -4px; bottom: 13%; gap: 7px; padding: 8px 10px; border-radius: 13px; transform: scale(.84); }.float-star { width: 27px; height: 27px; font-size: 13px; }.art-float-card b { font-size: 9px; }.art-float-card small { font-size: 8px; }.art-doodle { font-size: 15px; }.welcome-footnote { order: 3; align-self: flex-start; margin: 24px 0 0; font-size: 9px; }.home-composer.is-open { order: 2; width: 100%; margin: 14px 0 0; }.home-composer input { font-size: 11px; }
  .studio-page { padding: 30px 0 38px; }.studio-heading { align-items: center; margin-bottom: 16px; }.studio-heading h1 { font-size: 28px; margin-top: 8px; }.studio-heading p { max-width: 230px; font-size: 10px; line-height: 1.6; }.studio-heading-actions { gap: 9px; }.live-pill { font-size: 0; gap: 0; }.live-pill i { width: 8px; height: 8px; }.round-icon-button { width: 34px; height: 34px; }.studio-layout { display: flex; flex-direction: column; gap: 13px; }.stage-column { width: 100%; }.world-stage-card { border-radius: 21px; }.stage-topline { height: 41px; font-size: 8px; padding: 0 11px; }.world-stage { margin: 0 6px; border-radius: 16px; }.world-svg { border-radius: inherit; }.stage-caption { bottom: 7px; left: 7px; padding: 6px 8px; font-size: 8px; }.stage-sticker { top: 7px; right: 7px; padding: 5px 7px; font-size: 7px; }.stage-response { min-height: 74px; gap: 8px; padding: 9px 11px; }.assistant-avatar { width: 30px; height: 30px; flex-basis: 30px; border-radius: 10px; }.response-copy p { font-size: 9px; }.response-decoration { right: 11px; }.voice-panel { gap: 10px; min-height: 75px; margin-top: 10px; padding: 10px; border-radius: 17px; }.studio-mic { flex-basis: 43px; width: 43px; height: 43px; border-radius: 13px; }.voice-prompt-area { flex: 1; min-width: 120px; }.voice-prompt-area strong { font-size: 10px; }.voice-prompt-area span { font-size: 8px; }.studio-composer { min-height: 43px; padding-top: 4px; }.studio-composer input { font-size: 9px; }.quick-ideas { gap: 5px; }.quick-ideas > span { width: 100%; }.quick-ideas button { padding: 7px 8px; font-size: 8px; }
  .world-sidebar { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.sidebar-card { border-radius: 17px; padding: 13px; }.inventory-card { grid-row: span 2; }.sidebar-title h2 { font-size: 15px; }.sidebar-intro { font-size: 9px; margin: 9px 0; }.object-collection { gap: 5px; }.object-pill { padding: 5px 7px 5px 5px; font-size: 8px; }.object-icon { width: 17px; height: 17px; }.inventory-divider { margin: 11px 0; }.tiny-world-note { align-items: flex-start; }.tiny-world-note b { font-size: 8px; }.tiny-world-note small { font-size: 7px; line-height: 1.4; }.note-orb { width: 25px; height: 25px; flex-basis: 25px; }.game-card { grid-column: 2; padding: 0 11px 11px; }.game-illustration { height: 61px; margin: 0 -11px 9px; }.game-chest { font-size: 24px; }.game-card-copy h3 { font-size: 11px; }.game-card-copy p { font-size: 8px; line-height: 1.4; }.game-button { margin-top: 9px; padding: 8px 9px; font-size: 8px; }.save-world-card { grid-column: 2; gap: 7px; padding: 9px; border-radius: 13px; }.save-card-icon { width: 29px; height: 29px; border-radius: 9px; }.save-world-card b { font-size: 8px; }.save-world-card small { font-size: 7px; }.save-card-arrow { display: none; }
  .gallery-page, .result-page { min-height: 0; padding: 30px 0 40px; }.gallery-heading { margin: 38px auto 25px; }.gallery-heading h1, .result-heading h1 { font-size: 28px; letter-spacing: -1px; }.gallery-heading p, .result-heading p { font-size: 10px; }.empty-gallery { min-height: 300px; }.empty-gallery h2 { font-size: 14px; }.empty-gallery p { font-size: 10px; }.saved-art-card { grid-template-columns: 1fr; border-radius: 20px; }.saved-art-image { padding: 9px; }.saved-art-meta { padding: 17px; }.saved-art-meta h2 { font-size: 19px; margin-top: 11px; }.saved-art-meta p { margin-bottom: 15px; }.gallery-parent-prompt { align-items: flex-start; padding: 12px; gap: 8px; }.gallery-parent-prompt b { font-size: 9px; }.gallery-parent-prompt small { max-width: 180px; font-size: 8px; line-height: 1.5; }.gallery-parent-prompt button { padding: 8px 4px; font-size: 8px; }
  .result-heading { margin: 33px auto 22px; }.result-grid { display: flex; flex-direction: column; gap: 13px; }.result-preview-card, .parent-form-card { border-radius: 20px; }.parent-form-card { padding: 19px; }.result-art { padding: 8px; }.result-art-caption { bottom: 15px; left: 15px; }.result-meta { padding: 12px 13px 5px; }.result-actions { padding: 10px 13px 14px; }.result-actions .primary-button, .result-actions .secondary-button { min-height: 38px; font-size: 9px; }.result-bottom-link { flex-direction: column; gap: 3px; margin-top: 17px; }
}

/* Story Playhouse: guided, replayable worlds that adapt to the selected level */
.home-experience-entry { grid-column: 1/-1; display: flex; align-items: center; gap: 13px; width: min(820px,calc(100% - 5px)); margin: 11px 0 0 5px; padding: 14px 16px; text-align: left; border: 1px solid rgba(131,113,205,.17); border-radius: 17px; background: linear-gradient(105deg,rgba(255,255,255,.88),rgba(241,238,255,.86) 55%,rgba(255,245,250,.88)); box-shadow: 0 8px 22px rgba(72,61,142,.055); transition: transform .2s,border-color .2s,box-shadow .2s; }
.home-experience-entry:hover { transform: translateY(-2px); border-color: rgba(131,113,205,.35); box-shadow: 0 12px 28px rgba(72,61,142,.09); }
.home-experience-icon { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; border-radius: 12px; color: white; background: linear-gradient(145deg,#a998ef,#7768d4); font-size: 19px; box-shadow: 0 5px 13px rgba(125,105,213,.2); }
.home-experience-entry > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }.home-experience-entry small { color: #a09aaf; font-size: 8px; }.home-experience-entry b { color: #57506f; font-size: 11px; }.home-experience-entry i { overflow: hidden; color: #9c96aa; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.home-experience-entry > strong { flex: 0 0 auto; color: #7868c6; font-size: 9px; font-weight: 650; }.home-experience-entry em { margin-left: 4px; font-size: 14px; font-style: normal; }
.experience-sidebar-card { position: relative; overflow: hidden; padding: 16px 17px; border-color: rgba(150,126,209,.16); background: linear-gradient(145deg,#fbf9ff,#f4f0ff 70%,#fdf7fb); }.experience-sidebar-orb { position: absolute; top: 12px; right: 14px; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 10px; color: white; background: linear-gradient(140deg,#a895ed,#7566d5); font-size: 16px; }.experience-sidebar-card h3 { margin: 7px 0 4px; color: #56506e; font-size: 13px; }.experience-sidebar-card p { margin: 0; color: #9891a7; font-size: 9px; line-height: 1.6; }.experience-sidebar-card > button { display: flex; justify-content: space-between; width: 100%; margin-top: 12px; padding: 8px 9px; border: 1px solid rgba(127,111,192,.15); border-radius: 10px; color: #7968c8; background: rgba(255,255,255,.77); font-size: 8px; }.experience-sidebar-card > button span { font-size: 13px; }
.journey-console { margin: 15px 0 0; padding: 18px 19px 14px; overflow: hidden; border: 1px solid rgba(124,112,183,.14); border-radius: 22px; background: linear-gradient(120deg,rgba(255,255,255,.94),rgba(246,244,255,.95) 70%,rgba(255,247,250,.95)); box-shadow: 0 10px 27px rgba(61,54,125,.055); }
.journey-top { display: flex; align-items: flex-start; gap: 12px; }.journey-emblem { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 13px; background: linear-gradient(145deg,#fff,#ece8ff); box-shadow: inset 0 0 0 1px rgba(133,113,205,.12); font-size: 20px; }.journey-copy { flex: 1; min-width: 0; }.journey-copy > span { color: #9b8ccd; font-size: 8px; letter-spacing: .35px; }.journey-copy h2 { margin: 4px 0; color: #45405e; font-size: 15px; }.journey-copy p { margin: 0; color: #9390a3; font-size: 9px; line-height: 1.6; }.journey-progress { flex: 0 0 auto; padding: 6px 9px; border-radius: 9px; color: #7969c7; background: rgba(237,233,255,.82); font-size: 9px; font-weight: 700; }
.journey-mission-list { display: grid; gap: 6px; margin: 13px 0 0; padding: 0; list-style: none; }.journey-mission { display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 8px; border: 1px solid transparent; border-radius: 11px; color: #8c8999; background: rgba(255,255,255,.55); }.journey-mission > span { display: grid; place-items: center; flex: 0 0 21px; width: 21px; height: 21px; border: 1px solid rgba(128,119,159,.18); border-radius: 50%; color: #a29dac; font-size: 7px; }.journey-mission > div { display: grid; gap: 3px; flex: 1; min-width: 0; }.journey-mission b { font-size: 9px; font-weight: 600; }.journey-mission small { color: #8172c4; font-size: 8px; line-height: 1.5; }.journey-mission.is-next { border-color: rgba(132,115,204,.16); color: #585174; background: rgba(255,255,255,.9); box-shadow: 0 3px 11px rgba(72,61,142,.04); }.journey-mission.is-next > span { border: 0; color: white; background: linear-gradient(140deg,#a392e7,#7869d3); }.journey-mission.is-done > span { border: 0; color: white; background: #8ec4ad; }.journey-mission.is-done b { color: #9ca69f; text-decoration: line-through; }.journey-mission > button { padding: 7px 9px; border: 1px solid rgba(129,111,204,.16); border-radius: 9px; color: #7767c6; background: #fff; font-size: 8px; white-space: nowrap; }.journey-mission > button:hover { color: white; border-color: transparent; background: linear-gradient(105deg,#8d7bdf,#a584d6); }.journey-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(124,112,183,.1); }.journey-footer > span { color: #a09aab; font-size: 8px; }.journey-footer > button { padding: 6px 8px; border: 0; color: #7d6ec2; background: transparent; font-size: 8px; }.journey-footer > button b { margin-left: 4px; font-size: 12px; }
.experiences-page { min-height: 680px; padding: 34px 0 55px; }.experiences-heading { margin: 31px auto 21px; text-align: center; }.experiences-heading .eyebrow { justify-content: center; }.experiences-heading h1 { margin: 13px 0 8px; color: #302b4c; font-size: clamp(27px,3.2vw,42px); line-height: 1.2; letter-spacing: -1.4px; }.experiences-heading p { max-width: 640px; margin: 0 auto; color: #9692a8; font-size: 10px; line-height: 1.7; }.experience-progress-banner { display: flex; align-items: center; gap: 11px; max-width: 1050px; margin: 0 auto 13px; padding: 12px 15px; border: 1px solid rgba(123,106,197,.13); border-radius: 15px; background: linear-gradient(100deg,rgba(239,235,255,.83),rgba(255,247,251,.83)); }.experience-banner-spark { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: white; border-radius: 10px; background: linear-gradient(145deg,#a392ea,#7566d5); font-size: 18px; }.experience-progress-banner > span:nth-child(2) { display: grid; gap: 3px; flex: 1; min-width: 0; }.experience-progress-banner small { color: #9e98aa; font-size: 7px; }.experience-progress-banner b { color: #625b7d; font-size: 9px; }.experience-progress-banner i { color: #9a94a5; font-size: 8px; font-style: normal; }.experience-progress-banner > strong { padding: 7px 10px; border-radius: 9px; color: #92733b; background: rgba(255,255,255,.7); font-size: 9px; white-space: nowrap; }
.experience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; max-width: 1050px; margin: 0 auto; }.experience-card { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 220px; padding: 16px; overflow: hidden; border: 1px solid rgba(117,105,176,.12); border-radius: 19px; background: linear-gradient(150deg,#fff 17%,#f5f3ff 100%); box-shadow: 0 8px 22px rgba(65,57,131,.045); animation: experience-rise .42s both; animation-delay: calc(var(--experience-index,0) * 35ms); transition: transform .2s,border-color .2s,box-shadow .2s; }.experience-card::after { content: "✧"; position: absolute; top: 28px; right: 15px; color: rgba(157,142,217,.17); font-size: 48px; pointer-events: none; }.experience-card:hover:not(.is-locked) { transform: translateY(-3px); border-color: rgba(130,112,204,.29); box-shadow: 0 13px 27px rgba(65,57,131,.09); }.experience-card.is-locked { filter: saturate(.62); background: linear-gradient(150deg,#fcfbfd,#f5f3f8); }.experience-card-top { display: flex; align-items: center; gap: 7px; min-height: 34px; }.experience-emoji { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.83); box-shadow: 0 3px 11px rgba(68,58,127,.08); font-size: 18px; }.experience-category { padding: 5px 7px; border-radius: 7px; color: #9288ae; background: rgba(255,255,255,.75); font-size: 7px; }.experience-complete { margin-left: auto; color: #65977f; font-size: 7px; }.experience-card h2 { margin: 11px 0 5px; color: #46405f; font-size: 15px; }.experience-card > p { min-height: 38px; margin: 0 0 9px; color: #918ca0; font-size: 8px; line-height: 1.65; }.experience-mission-preview { display: grid; gap: 5px; padding: 9px 10px; border-radius: 11px; background: rgba(255,255,255,.72); }.experience-mission-preview span { color: #827c93; font-size: 8px; }.experience-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: auto; padding-top: 11px; }.experience-card-foot > span { overflow: hidden; color: #9b96a8; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.experience-card-foot button { flex: 0 0 auto; padding: 8px 9px; border: 1px solid rgba(127,111,192,.14); border-radius: 9px; color: #7767c6; background: #fff; font-size: 8px; }.experience-card-foot button:not(:disabled):hover { color: white; border-color: transparent; background: linear-gradient(105deg,#8877dc,#a082d2); }.experience-card-foot button:disabled { color: #aaa4b2; background: rgba(255,255,255,.7); cursor: not-allowed; }.experience-ocean { background: linear-gradient(150deg,#fff 17%,#edf9ff 100%); }.experience-forest { background: linear-gradient(150deg,#fff 17%,#eef8f1 100%); }.experience-sky { background: linear-gradient(150deg,#fff 17%,#eef6ff 100%); }.experience-candy { background: linear-gradient(150deg,#fff 17%,#fff1f7 100%); }.experience-volcano { background: linear-gradient(150deg,#fff 17%,#fff0eb 100%); }
.experience-note { display: flex; align-items: flex-start; gap: 10px; max-width: 1050px; margin: 14px auto 0; padding: 12px 14px; border: 1px solid rgba(220,174,199,.17); border-radius: 14px; background: rgba(255,247,251,.67); }.experience-note > span { color: #b891d6; font-size: 17px; }.experience-note b,.experience-note small { display: block; }.experience-note b { color: #746b80; font-size: 8px; }.experience-note small { margin-top: 4px; color: #a19aa6; font-size: 7px; line-height: 1.55; }
@keyframes experience-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 920px) { .experience-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.experience-card { min-height: 210px; padding: 13px; }.experience-progress-banner > span:nth-child(2) i { max-width: 470px; line-height: 1.5; } }
@media (max-width: 650px) { .home-experience-entry { gap: 8px; width: calc(100% - 5px); margin-top: 9px; padding: 10px; border-radius: 14px; }.home-experience-icon { flex-basis: 30px; width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }.home-experience-entry b { font-size: 8px; }.home-experience-entry small,.home-experience-entry i { font-size: 6px; }.home-experience-entry > strong { font-size: 7px; }.experience-sidebar-card { padding: 12px; }.experience-sidebar-card h3 { font-size: 11px; }.experience-sidebar-card p { font-size: 8px; }.journey-console { margin-top: 9px; padding: 12px; border-radius: 17px; }.journey-top { gap: 8px; }.journey-emblem { flex-basis: 31px; width: 31px; height: 31px; border-radius: 10px; font-size: 16px; }.journey-copy h2 { font-size: 12px; }.journey-copy p { font-size: 8px; }.journey-progress { padding: 5px 6px; font-size: 7px; }.journey-mission-list { gap: 5px; margin-top: 9px; }.journey-mission { gap: 6px; min-height: 31px; padding: 5px; border-radius: 9px; }.journey-mission > span { flex-basis: 18px; width: 18px; height: 18px; font-size: 6px; }.journey-mission b { font-size: 8px; }.journey-mission small { font-size: 7px; }.journey-mission > button { padding: 6px; font-size: 7px; }.journey-footer { margin-top: 8px; padding-top: 8px; }.journey-footer > span,.journey-footer > button { font-size: 7px; }.experiences-page { min-height: 0; padding: 26px 0 36px; }.experiences-heading { margin: 26px auto 15px; }.experiences-heading h1 { font-size: 27px; letter-spacing: -.8px; }.experiences-heading p { padding: 0 10px; font-size: 8px; }.experience-progress-banner { gap: 7px; padding: 9px; border-radius: 12px; }.experience-banner-spark { flex-basis: 24px; width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }.experience-progress-banner b { font-size: 8px; }.experience-progress-banner i { font-size: 6px; line-height: 1.4; }.experience-progress-banner > strong { padding: 6px; font-size: 7px; }.experience-grid { grid-template-columns: 1fr; gap: 8px; }.experience-card { min-height: 0; padding: 12px; border-radius: 15px; }.experience-card::after { top: 22px; font-size: 40px; }.experience-card h2 { margin: 8px 0 4px; font-size: 13px; }.experience-card > p { min-height: 0; margin-bottom: 7px; font-size: 7px; }.experience-mission-preview { gap: 4px; padding: 8px; }.experience-mission-preview span { font-size: 7px; }.experience-card-foot { padding-top: 8px; }.experience-note { gap: 7px; margin-top: 9px; padding: 9px; border-radius: 12px; }.experience-note b { font-size: 7px; }.experience-note small { font-size: 6px; } }
.experience-duration { margin-left: auto; color: #a19aab; font-size: 7px; white-space: nowrap; }.experience-card-top .experience-complete { margin-left: 0; color: #65977f; font-size: 7px; white-space: nowrap; }

/* Age-tuned play loops and meaningful story choices */
.play-path-panel { max-width: 1050px; margin: 0 auto 16px; padding: 18px 20px; border: 1px solid rgba(125,110,193,.16); border-radius: 20px; background: radial-gradient(circle at 92% 0%,rgba(221,215,255,.62),transparent 33%),linear-gradient(120deg,#fff 8%,#f5f3ff 68%,#fff7fb); box-shadow: 0 10px 26px rgba(67,56,128,.055); }
.play-path-top { display:flex; align-items:center; gap:10px; }.play-path-age { padding:6px 9px; border-radius:9px; color:#7666c2; background:#eeebff; font-size:11px; font-weight:700; }.play-path-top > b { color:#5d5676; font-size:12px; }.play-path-panel > p { margin:10px 0 13px; color:#777289; font-size:12px; line-height:1.7; }
.play-path-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.play-path-card { display:flex; align-items:flex-start; gap:9px; min-width:0; padding:11px 12px; border:1px solid rgba(131,117,192,.11); border-radius:13px; background:rgba(255,255,255,.78); }.play-path-card > span { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:9px; color:#806ed1; background:#f0edff; font-size:16px; }.play-path-card > div { display:grid; gap:4px; }.play-path-card b { color:#55506c; font-size:11px; }.play-path-card small { color:#8b8798; font-size:10px; line-height:1.55; }.play-path-level-note { display:block; margin-top:11px; color:#8075aa; font-size:10px; }
.experience-browser-heading { display:flex; align-items:baseline; justify-content:space-between; max-width:1050px; margin:19px auto 8px; }.experience-browser-heading h2 { margin:0; color:#47415e; font-size:17px; }.experience-browser-heading > span { color:#9a94aa; font-size:10px; }.experience-filters { display:flex; gap:7px; max-width:1050px; margin:0 auto 12px; overflow-x:auto; padding:2px 1px 5px; scrollbar-width:thin; }.experience-filter { flex:0 0 auto; padding:8px 11px; border:1px solid rgba(127,111,192,.14); border-radius:999px; color:#756f87; background:rgba(255,255,255,.8); font-size:10px; transition:background .16s,color .16s,border-color .16s; }.experience-filter:hover,.experience-filter.is-active { color:#fff; border-color:transparent; background:linear-gradient(105deg,#8978dc,#a080d0); }.experience-mission-preview > b { color:#8c7bc5; font-size:9px; font-weight:700; }.experience-mission-preview > span { font-size:10px; line-height:1.55; }.experience-decision { padding-top:5px; border-top:1px solid rgba(124,112,183,.08); color:#9077bc!important; }.experience-card > p { font-size:10px; line-height:1.6; }.experience-card-foot > span { font-size:9px; }.experience-card-foot button { font-size:10px; }.experience-empty { grid-column:1/-1; padding:28px; border:1px dashed rgba(127,111,192,.22); border-radius:16px; color:#888398; background:rgba(255,255,255,.64); text-align:center; font-size:12px; }
.journey-branch-note { display:grid; gap:4px; margin:12px 0 0 51px; padding:10px 12px; border-left:3px solid #a392e7; border-radius:0 11px 11px 0; background:rgba(237,233,255,.56); }.journey-branch-note > span { color:#8978ca; font-size:9px; }.journey-branch-note > b { color:#55506d; font-size:11px; }.journey-branch-note > small { color:#858093; font-size:10px; line-height:1.5; }
.journey-mission.is-next { align-items:flex-start; }.journey-mission.is-next > div { padding:3px 0; }.journey-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:5px; }.journey-choice { display:grid; gap:5px; min-width:0; padding:10px 11px; text-align:left; border:1px solid rgba(129,111,204,.17); border-radius:12px; color:#57516c; background:linear-gradient(145deg,#fff,#f6f3ff); transition:transform .16s,border-color .16s,box-shadow .16s; }.journey-choice:hover { transform:translateY(-1px); border-color:rgba(129,111,204,.42); box-shadow:0 5px 14px rgba(72,61,142,.08); }.journey-choice b { font-size:11px; }.journey-choice small { color:#8d879c; font-size:9px; line-height:1.45; }
@media (max-width:920px) { .play-path-panel { margin-right:5px; margin-left:5px; }.experience-browser-heading,.experience-filters { margin-right:5px; margin-left:5px; } }
@media (max-width:650px) { .play-path-panel { margin-bottom:11px; padding:12px; border-radius:15px; }.play-path-top { flex-wrap:wrap; gap:7px; }.play-path-age { padding:5px 7px; font-size:10px; }.play-path-top > b { font-size:11px; }.play-path-panel > p { margin:8px 0 10px; font-size:11px; }.play-path-grid { grid-template-columns:1fr; gap:6px; }.play-path-card { align-items:center; padding:8px; }.play-path-card > span { flex-basis:25px; width:25px; height:25px; }.play-path-card b { font-size:10px; }.play-path-card small { font-size:9px; }.play-path-level-note { margin-top:9px; font-size:9px; line-height:1.55; }.experience-browser-heading { align-items:flex-start; gap:7px; flex-direction:column; margin-top:15px; }.experience-browser-heading h2 { font-size:15px; }.experience-browser-heading > span { font-size:9px; }.experience-filters { gap:6px; margin-bottom:9px; }.experience-filter { padding:7px 9px; font-size:9px; }.experience-mission-preview > b { font-size:9px; }.experience-mission-preview > span { font-size:9px; }.experience-decision { font-size:9px!important; }.experience-card > p { font-size:10px; }.experience-card-foot > span { font-size:9px; }.experience-card-foot button { font-size:10px; }.journey-branch-note { margin-left:0; }.journey-choice-grid { grid-template-columns:1fr; gap:6px; }.journey-choice { padding:9px; }.journey-choice b { font-size:10px; }.journey-choice small { font-size:9px; } }
.lab-test-result { display:grid; gap:7px; margin:12px 0 0 51px; padding:11px 12px; border:1px solid rgba(210,164,117,.18); border-radius:12px; background:linear-gradient(120deg,#fffaf1,#fff 82%); }.lab-test-result.is-passed { border-color:rgba(104,172,137,.26); background:linear-gradient(120deg,#f1fbf4,#fff 82%); }.lab-test-result > b { color:#8c6a36; font-size:11px; }.lab-test-result.is-passed > b { color:#568c6d; }.lab-test-result > p { margin:0; color:#777389; font-size:10px; }.lab-test-result > div { display:flex; flex-wrap:wrap; gap:6px; }.lab-test-result > div span { padding:5px 7px; border-radius:8px; color:#9b8a69; background:rgba(255,255,255,.8); font-size:9px; }.lab-test-result > div span.is-ready { color:#548c6d; background:#e9f7ef; }
@media (max-width:650px) { .lab-test-result { margin-left:0; } }

/* Persistent, child-led exploration loop */
.result-recap { display: grid; gap: 8px; margin: 7px 18px 0; padding: 11px 13px; border: 1px solid rgba(130,112,192,.1); border-radius: 14px; background: linear-gradient(120deg,rgba(248,246,255,.92),rgba(250,251,255,.94)); }
.result-recap-row { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: start; font-size: 9px; line-height: 1.5; }
.result-recap-row span { color: #9992ac; }
.result-recap-row b { color: #63567f; font-weight: 650; }
@media (max-width: 760px) { .result-recap { margin-right: 13px; margin-left: 13px; } }

.undo-button { padding: 8px 10px; color: #827a9c; border: 1px solid rgba(111,99,171,.13); border-radius: 11px; background: rgba(255,255,255,.7); font-size: 9px; transition: .18s ease; }
.undo-button:hover:not(:disabled) { color: #6656c5; border-color: rgba(111,99,171,.28); background: #fff; }
.undo-button:disabled { opacity: .43; cursor: not-allowed; }
.adventure-console { margin-top: 14px; padding: 17px; border: 1px solid rgba(105,133,144,.17); border-radius: 24px; background: linear-gradient(145deg,rgba(245,250,249,.96),rgba(255,255,255,.94) 55%,rgba(248,246,255,.95)); box-shadow: 0 10px 30px rgba(48,77,94,.055); }
.adventure-console-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 1px 2px 13px; }
.adventure-console-label { color: #7f9c99; font-size: 9px; letter-spacing: .7px; }
.adventure-console-top h2 { margin: 6px 0 4px; color: #37475c; font-size: 17px; letter-spacing: -.4px; }
.adventure-console-top p { margin: 0; color: #8a969f; font-size: 9px; line-height: 1.55; }
.adventure-progress-badge { flex: 0 0 auto; padding: 7px 9px; color: #638d84; border: 1px solid rgba(108,165,147,.15); border-radius: 10px; background: rgba(255,255,255,.76); font-size: 8px; font-weight: 700; }
.adventure-area-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-bottom: 9px; }
.adventure-area-tab { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 9px; text-align: left; border: 1px solid rgba(110,133,141,.12); border-radius: 13px; background: rgba(255,255,255,.7); transition: .18s ease; }
.adventure-area-tab:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(104,163,151,.38); background: white; }
.adventure-area-tab.is-current { border-color: rgba(93,160,145,.36); background: linear-gradient(125deg,#f0fbf7,#fff); box-shadow: inset 0 0 0 1px rgba(104,174,154,.06); }
.adventure-area-tab.is-locked { opacity: .55; cursor: not-allowed; }
.area-tab-symbol { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; color: #658c89; border-radius: 9px; background: #e8f4f1; font-size: 13px; }
.adventure-area-tab > span:nth-child(2) { min-width: 0; flex: 1; }
.adventure-area-tab b, .adventure-area-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adventure-area-tab b { color: #566d72; font-size: 9px; }
.adventure-area-tab small { margin-top: 3px; color: #a1abad; font-size: 7px; }
.adventure-area-tab > i { flex: 0 0 auto; color: #a1aaa7; font-size: 7px; font-style: normal; }
.adventure-area-tab.is-current > i { color: #62a28e; }
.adventure-scene-card { display: grid; grid-template-columns: minmax(150px,.75fr) minmax(0,1.25fr); gap: 15px; min-height: 192px; padding: 12px; border: 1px solid rgba(110,133,141,.1); border-radius: 18px; background: rgba(255,255,255,.77); }
.adventure-scene-art { position: relative; display: grid; place-items: center; min-height: 168px; overflow: hidden; border-radius: 13px; isolation: isolate; }
.adventure-scene-art::before, .adventure-scene-art::after { position: absolute; z-index: -1; content: ""; border-radius: 50%; }
.adventure-scene-art::before { width: 155px; height: 155px; top: -56px; right: -27px; background: rgba(255,255,255,.11); }
.adventure-scene-art::after { width: 120px; height: 120px; left: -38px; bottom: -56px; background: rgba(20,48,69,.11); }
.forest-art { color: #dcffe6; background: radial-gradient(circle at 73% 23%,rgba(231,255,187,.8) 0 4px,transparent 5px), radial-gradient(circle at 23% 27%,rgba(190,255,231,.88) 0 3px,transparent 4px), linear-gradient(150deg,#263e63 2%,#416e79 52%,#579581); }
.canal-art { color: #dcfbff; background: radial-gradient(ellipse at 48% 75%,rgba(116,225,222,.8),transparent 35%), linear-gradient(150deg,#375875,#497e91 58%,#8eb3a8); }
.shrine-art { color: #fff1c7; background: radial-gradient(circle at 50% 62%,rgba(255,226,154,.58),transparent 36%), linear-gradient(145deg,#31385f,#655c79 58%,#b18a82); }
.scene-tree { position: absolute; bottom: 21px; left: 12%; color: #b7ecc8; font-size: 89px; line-height: 1; text-shadow: 9px 8px 0 rgba(35,79,75,.45); animation: bob 4.2s ease-in-out infinite; }
.scene-stump { position: absolute; right: 19%; bottom: 28px; display: grid; place-items: center; width: 46px; height: 46px; color: #e3f8ef; border: 2px solid rgba(226,255,240,.75); border-radius: 50%; background: radial-gradient(circle,#baf1df 0 12%,#4a897d 14% 43%,#344b5c 46%); box-shadow: 0 0 25px rgba(143,247,212,.64); font-size: 11px; animation: twinkle 2.8s ease-in-out infinite; }
.scene-moon { position: absolute; top: 17px; right: 22px; color: #ffedb9; font-size: 27px; }
.scene-firefly { position: absolute; color: #fff5ae; font-size: 14px; font-style: normal; text-shadow: 0 0 10px #fff19a; animation: twinkle 1.9s ease-in-out infinite; }.firefly-a { top: 31%; left: 58%; }.firefly-b { top: 49%; right: 17%; animation-delay: .8s; }
.scene-orbit { position: absolute; left: 5%; bottom: 16%; z-index: 1; color: rgba(226,250,243,.8); font-size: 58px; transform: rotate(-18deg); }
.scene-ruin { position: absolute; right: 18%; top: 19%; color: #eedfbe; font-size: 49px; text-shadow: 0 8px 0 rgba(36,57,75,.38); }
.scene-shrine { position: absolute; bottom: 25px; color: #f2e6c5; font-size: 83px; text-shadow: 0 10px 0 rgba(44,44,67,.38); }
.scene-rune { position: absolute; z-index: 2; display: grid; place-items: center; width: 27px; height: 27px; color: #b7f9ec; border: 1px solid rgba(226,255,245,.6); border-radius: 50%; background: rgba(36,59,77,.5); box-shadow: 0 0 13px rgba(138,255,231,.5); font-size: 12px; font-style: normal; animation: twinkle 3s ease-in-out infinite; }.rune-a { top: 21%; left: 19%; }.rune-b { top: 44%; right: 18%; animation-delay: .55s; }.rune-c { bottom: 15%; left: 35%; animation-delay: 1.1s; }
.shrine-glow { position: absolute; inset: 16% 27% 20%; border: 1px solid rgba(255,241,193,.2); border-radius: 50%; box-shadow: 0 0 34px rgba(255,224,150,.23); }
.adventure-scene-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 3px 7px 3px 0; }
.scene-kicker { color: #84a49b; font-size: 8px; letter-spacing: .8px; }
.adventure-scene-copy h3 { margin: 5px 0 5px; color: #465b66; font-size: 16px; }
.adventure-scene-copy > p { max-width: 510px; margin: 0; color: #7d8b93; font-size: 9px; line-height: 1.7; }
.clue-note { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 9px; padding: 7px 9px; border: 1px solid rgba(117,172,160,.14); border-radius: 10px; background: #f2faf7; }
.clue-note span { color: #81a69b; font-size: 7px; }.clue-note b { color: #548a7b; font-size: 8px; letter-spacing: .2px; }
.side-clue { margin-top: 8px; }
.adventure-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.adventure-action { display: inline-flex; align-items: center; gap: 9px; min-height: 33px; padding: 0 11px; border: 1px solid rgba(105,159,146,.18); border-radius: 10px; color: #618b82; background: white; font-size: 8px; font-weight: 650; transition: .18s ease; }
.adventure-action:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(93,160,145,.45); box-shadow: 0 4px 11px rgba(73,128,114,.1); }
.adventure-action.primary { color: #fff; border-color: transparent; background: linear-gradient(110deg,#6fac9a,#68a9b2); box-shadow: 0 5px 12px rgba(88,155,143,.17); }
.adventure-action.primary span { font-size: 13px; }.adventure-action.side { color: #857ca3; background: #f7f5ff; border-color: rgba(129,112,185,.15); }
.adventure-action:disabled { opacity: .65; cursor: default; }
.rune-choice-row { display: flex; gap: 6px; margin-top: 9px; }
.rune-choice { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 4px 9px; border: 1px solid rgba(130,132,160,.15); border-radius: 9px; color: #7b7591; background: #fbfaff; font-size: 8px; transition: .18s; }
.rune-choice > span { color: #9d8bdc; font-size: 12px; }.rune-choice:hover:not(:disabled) { border-color: rgba(128,112,220,.42); background: #f5f2ff; }.rune-choice.is-lit { color: #548a7b; border-color: rgba(105,177,153,.31); background: #edf9f4; }.rune-choice.is-lit > span { color: #62af93; }
.rune-progress, .adventure-finale { color: #77a291; font-size: 8px; font-weight: 650; }.adventure-finale { padding: 8px 10px; border: 1px solid rgba(117,172,160,.19); border-radius: 10px; background: #f1faf6; }
.adventure-save-hint { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0; color: #a0a7a8; font-size: 7px; }.adventure-save-hint span { color: #91b4a9; font-size: 13px; }
.adventure-svg .water-current { animation: water-flow 1.45s linear infinite; filter: drop-shadow(0 0 5px rgba(145,255,233,.9)); }
.adventure-svg .explorer-position { filter: drop-shadow(0 0 7px rgba(152,255,234,.9)); animation: explorer-pulse 2s ease-in-out infinite; }
@keyframes water-flow { to { stroke-dashoffset: -36; } }
@keyframes explorer-pulse { 0%,100% { opacity: .78; } 50% { opacity: 1; } }
@media (max-width: 820px) { .adventure-scene-card { grid-template-columns: minmax(125px,.65fr) minmax(0,1.35fr); gap: 11px; }.adventure-area-tab { padding: 8px 6px; gap: 5px; }.area-tab-symbol { flex-basis: 23px; width: 23px; height: 23px; }.adventure-area-tab > i { display: none; } }
@media (max-width: 650px) { .studio-heading-actions { gap: 5px; }.undo-button { padding: 6px 7px; font-size: 7px; }.adventure-console { margin-top: 10px; padding: 11px; border-radius: 18px; }.adventure-console-top { gap: 7px; padding-bottom: 10px; }.adventure-console-top h2 { font-size: 13px; }.adventure-console-top p { max-width: 245px; font-size: 8px; }.adventure-progress-badge { padding: 6px 7px; font-size: 7px; }.adventure-area-tabs { gap: 5px; }.adventure-area-tab { align-items: flex-start; gap: 5px; padding: 7px 5px; border-radius: 10px; }.area-tab-symbol { flex-basis: 20px; width: 20px; height: 20px; border-radius: 7px; font-size: 10px; }.adventure-area-tab b { font-size: 7px; }.adventure-area-tab small { font-size: 6px; }.adventure-scene-card { grid-template-columns: 1fr; gap: 8px; padding: 8px; border-radius: 14px; }.adventure-scene-art { min-height: 126px; }.scene-tree { font-size: 72px; }.scene-stump { width: 38px; height: 38px; }.scene-shrine { font-size: 66px; }.adventure-scene-copy { padding: 3px 5px 6px; }.adventure-scene-copy h3 { font-size: 14px; }.adventure-scene-copy > p { font-size: 8px; }.adventure-action-row { gap: 6px; margin-top: 9px; }.adventure-action { min-height: 31px; padding: 0 8px; font-size: 7px; }.rune-choice { gap: 4px; min-height: 29px; padding: 4px 6px; font-size: 7px; }.adventure-save-hint { font-size: 6px; line-height: 1.5; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Age and creative-level progression */
.level-nav .nav-icon { font-size: 19px; }
.profile-preview { grid-column: 1/-1; display: flex; align-items: center; gap: 14px; max-width: 820px; margin: 16px 0 0 5px; padding: 15px 17px; border-radius: 18px; border: 1px solid rgba(119,103,190,.14); background: linear-gradient(115deg,rgba(255,255,255,.78),rgba(246,242,255,.76)); box-shadow: 0 7px 22px rgba(72,61,142,.045); }
.profile-preview-orb { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #fff; border-radius: 13px; background: linear-gradient(145deg,#a591ef,#7667db); box-shadow: 0 5px 13px rgba(125,105,213,.18); font-size: 19px; }
.profile-preview > div { flex: 1; min-width: 0; }.profile-preview small, .profile-preview b, .profile-preview > div > span { display: block; }.profile-preview small { color: #a39db4; font-size: 8px; letter-spacing: .6px; }.profile-preview b { margin: 3px 0; color: #5e5778; font-size: 11px; }.profile-preview > div > span { color: #9d98aa; font-size: 9px; }
.profile-preview > button { padding: 9px 11px; color: #7563c8; border: 1px solid rgba(118,99,200,.16); border-radius: 11px; background: rgba(255,255,255,.72); font-size: 9px; white-space: nowrap; }.profile-preview > button span { margin-left: 5px; }
.profile-chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(117,102,185,.12); border-radius: 10px; color: #756c9b; background: rgba(255,255,255,.74); font-size: 9px; white-space: nowrap; }.profile-chip i { color: #a391e7; font-style: normal; }
.profile-edit-button { padding: 7px 9px; border: 0; color: #8775cf; background: transparent; font-size: 9px; white-space: nowrap; }.profile-edit-button:hover { color: #5d4dc0; }
.level-mini-card { padding: 15px 17px; background: linear-gradient(140deg,rgba(245,242,255,.9),rgba(255,255,255,.92)); }.level-mini-top { display: flex; align-items: center; gap: 9px; }.level-mini-icon { display: grid; place-items: center; width: 29px; height: 29px; color: #fff; border-radius: 10px; background: linear-gradient(140deg,#a894ed,#7766d5); }.level-mini-top small, .level-mini-top b { display: block; }.level-mini-top small { color: #a09aac; font-size: 8px; }.level-mini-top b { margin-top: 3px; color: #5c5579; font-size: 10px; }.level-mini-card p { margin: 11px 0 8px; color: #88839c; font-size: 9px; line-height: 1.6; }.feature-preview { color: #9b93b0; font-size: 8px; line-height: 1.65; }.level-mini-card > button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 8px 9px; border: 1px solid rgba(127,111,192,.13); border-radius: 10px; background: rgba(255,255,255,.74); color: #7968c8; font-size: 8px; }.level-mini-card > button span { font-size: 13px; }.game-button.is-locked { color: #897ca7; background: linear-gradient(110deg,#ebe5fa,#f3e9f4); box-shadow: none; }
.story-preview { padding: 11px 13px; border: 1px solid rgba(211,173,205,.23); border-radius: 15px; background: linear-gradient(120deg,#fff7fb,#f6f1ff); }.story-preview span { color: #a57fa7; font-size: 8px; }.story-preview p { margin: 6px 0 0; color: #716982; font-size: 9px; line-height: 1.55; }
.quest-card { padding: 14px 15px; background: linear-gradient(145deg,rgba(239,247,244,.96),rgba(250,247,239,.95)); border-color: rgba(98,147,132,.16); }.quest-card-heading { display: flex; align-items: center; justify-content: space-between; }.quest-card-heading b { padding: 4px 7px; color: #6e9c91; background: rgba(255,255,255,.65); border-radius: 8px; font-size: 8px; }.quest-card ol { display: grid; gap: 7px; margin: 11px 0 8px; padding: 0; list-style: none; }.quest-card li { display: flex; align-items: center; gap: 8px; min-width: 0; color: #777d83; font-size: 9px; }.quest-card li > span { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; color: #9a9587; border: 1px solid rgba(120,130,117,.19); border-radius: 50%; background: rgba(255,255,255,.56); font-size: 7px; }.quest-card li.is-next { color: #4f766e; font-weight: 700; }.quest-card li.is-next > span { color: #fff; border-color: #76b8a3; background: linear-gradient(135deg,#8dcab4,#61a99b); box-shadow: 0 3px 8px rgba(78,150,132,.19); }.quest-card li.is-done { color: #a8aaa4; text-decoration: line-through; }.quest-card li.is-done > span { color: white; border: 0; background: #a4c9b6; }.quest-card > small { color: #a0a39e; font-size: 7px; line-height: 1.5; }.adventure-svg .quest-marker { transform-box: fill-box; transform-origin: center; animation: arrive .55s ease both; }.adventure-svg .quest-marker:nth-child(2) { animation-delay: .08s; }.adventure-svg .quest-marker:nth-child(3) { animation-delay: .16s; }.adventure-svg .quest-marker:nth-child(4) { animation-delay: .24s; }
@media (max-width: 650px) { .quest-card { grid-column: 1/-1; } }
.quick-ideas i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 6px; color: #907edd; background: #f1edff; font-size: 7px; font-style: normal; font-weight: 700; }
.quick-ideas button { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.levels-page { min-height: 700px; padding: 38px 0 61px; }
.levels-heading { text-align: center; margin: 35px auto 23px; }.levels-heading .eyebrow { justify-content: center; }.levels-heading h1 { margin: 14px 0 8px; color: #302b4c; font-size: clamp(27px,3.2vw,42px); line-height: 1.25; letter-spacing: -1.6px; }.levels-heading > p { margin: 0; color: #9692a8; font-size: 11px; }
.active-profile-banner { display: flex; align-items: center; gap: 11px; max-width: 1000px; margin: 0 auto 14px; padding: 12px 16px; border: 1px solid rgba(123,106,197,.14); border-radius: 16px; background: linear-gradient(100deg,rgba(239,235,255,.86),rgba(255,246,251,.82)); }.active-profile-sparkle { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; border-radius: 10px; background: linear-gradient(145deg,#a392ea,#7566d5); }.active-profile-banner small, .active-profile-banner b { display: block; }.active-profile-banner small { color: #a09aac; font-size: 8px; }.active-profile-banner b { margin-top: 3px; color: #645c82; font-size: 10px; }.profile-banner-copy { margin-left: auto; color: #9c96ab; font-size: 9px; }
.age-band-list { display: flex; flex-direction: column; gap: 12px; max-width: 1000px; margin: 0 auto; }.age-band-card { display: grid; grid-template-columns: 162px minmax(0,1fr); gap: 12px; padding: 13px; border: 1px solid rgba(112,100,178,.11); border-radius: 21px; background: rgba(255,255,255,.7); box-shadow: 0 8px 24px rgba(64,53,136,.045); transition: border-color .2s, box-shadow .2s; }.age-band-card.age-selected { border-color: rgba(126,107,215,.29); box-shadow: 0 9px 27px rgba(101,83,180,.09); }
.age-band-info { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 16px; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg,#e9e5ff,#f2e7fb 66%,#ffeaf3); }.age-band-card:nth-child(2) .age-band-info { background: linear-gradient(145deg,#e4edff,#e5f7f3 64%,#f1f0ff); }.age-band-card:nth-child(3) .age-band-info { background: linear-gradient(145deg,#e7e6ff,#ede8ff 57%,#e5f4ff); }.age-band-info::after { content: "✧"; position: absolute; right: 11px; top: 6px; color: rgba(255,255,255,.87); font-size: 33px; }.age-band-index { color: #9185bd; font-size: 8px; letter-spacing: 1px; }.age-band-info h2 { margin: 10px 0 2px; color: #423b65; font-size: 27px; letter-spacing: -1px; }.age-band-info h3 { margin: 0; color: #655c88; font-size: 11px; }.age-band-info p { margin: 9px 0 0; color: #8983a0; font-size: 9px; line-height: 1.6; }.age-selected-tag { margin-top: 9px; padding: 5px 7px; color: #7764ca; border-radius: 8px; background: rgba(255,255,255,.63); font-size: 8px; }
.level-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }.level-choice { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 13px 12px 11px; border: 1px solid rgba(116,105,174,.11); border-radius: 15px; background: rgba(255,255,255,.87); transition: transform .2s,border-color .2s,box-shadow .2s; }.level-choice:hover { transform: translateY(-2px); border-color: rgba(125,104,211,.28); box-shadow: 0 7px 16px rgba(73,62,143,.06); }.level-choice.is-current { border-color: rgba(127,108,211,.4); background: linear-gradient(155deg,#fff 25%,#f6f3ff); box-shadow: inset 0 0 0 1px rgba(127,108,211,.06); }.level-choice-head { display: flex; align-items: center; gap: 7px; }.level-index { display: grid; place-items: center; width: 23px; height: 23px; color: #8a7bd1; border-radius: 8px; background: #f0edff; font-size: 8px; font-weight: 700; }.level-choice:nth-child(2) .level-index { color: #57a997; background: #e8f7f1; }.level-choice:nth-child(3) .level-index { color: #c17fa7; background: #fcedf5; }.level-choice-name { color: #514a6e; font-size: 12px; font-weight: 750; }.current-mark { margin-left: auto; color: #8672ce; font-size: 7px; white-space: nowrap; }.level-cue { min-height: 28px; margin: 8px 0 10px; color: #9892a7; font-size: 8px; line-height: 1.5; }.level-unlocks { min-height: 31px; margin-bottom: 5px; color: #928da3; font-size: 8px; line-height: 1.5; }.level-unlocks b { display: block; margin-bottom: 2px; color: #a7a1b1; font-size: 7px; font-weight: 600; letter-spacing: .4px; }.level-unlocks span { display: block; }.level-example { min-height: 33px; margin-top: auto; padding: 7px 8px; color: #a49db1; border-radius: 9px; background: #faf9fd; font-size: 7px; line-height: 1.5; }.level-example i { color: #796ab7; font-style: normal; }.level-select-button { min-height: 33px; margin-top: 8px; color: #7766c9; border: 1px solid rgba(124,105,205,.17); border-radius: 9px; background: #fff; font-size: 8px; font-weight: 650; }.level-select-button:hover { color: white; border-color: #8672dc; background: linear-gradient(110deg,#8877df,#a485d8); }.level-select-button.selected { color: #fff; border-color: transparent; background: linear-gradient(110deg,#8271da,#9b83dc); }
.levels-note { display: flex; align-items: center; gap: 11px; max-width: 1000px; margin: 15px auto 0; padding: 13px 16px; border: 1px solid rgba(220,174,199,.2); border-radius: 15px; background: rgba(255,247,251,.72); }.levels-note > span { color: #cb8dac; font-size: 21px; }.levels-note b, .levels-note small { display: block; }.levels-note b { color: #76677e; font-size: 9px; }.levels-note small { margin-top: 4px; color: #a39ba8; font-size: 8px; }

@media (max-width: 920px) {
  .studio-heading-actions { gap: 5px; }.profile-chip { font-size: 8px; padding: 7px; }.profile-edit-button { font-size: 8px; padding: 7px 5px; }
  .age-band-card { grid-template-columns: 138px minmax(0,1fr); gap: 9px; padding: 10px; }.age-band-info { padding: 12px; }.age-band-info h2 { font-size: 23px; }.level-choice { padding: 11px 9px 9px; }.level-choice-name { font-size: 11px; }.current-mark { font-size: 6px; }
}
@media (max-width: 650px) {
  .top-actions { gap: 2px; }.top-actions .nav-link { padding: 8px 5px; font-size: 9px; white-space: nowrap; }.top-actions .nav-icon { display: none; }.top-actions .parent-link { padding: 8px 7px; font-size: 9px; white-space: nowrap; }
  .profile-preview { order: 2; gap: 9px; margin: 15px 0 0; padding: 11px; border-radius: 15px; }.profile-preview-orb { flex-basis: 31px; width: 31px; height: 31px; border-radius: 10px; font-size: 15px; }.profile-preview b { font-size: 9px; }.profile-preview > div > span { font-size: 7px; }.profile-preview > button { padding: 8px 7px; font-size: 7px; }.welcome-footnote { order: 4; }.home-composer.is-open { order: 3; }
  .studio-heading-actions { gap: 4px; }.profile-chip { gap: 3px; padding: 6px; font-size: 7px; }.profile-chip i { display: none; }.profile-edit-button { font-size: 7px; padding: 6px 3px; }.round-icon-button { flex: 0 0 32px; }
  .quick-ideas button { max-width: calc(50% - 4px); font-size: 7px; }.quick-ideas i { width: 14px; height: 14px; margin-right: 3px; }
  .level-mini-card { padding: 12px; }.level-mini-card p { font-size: 8px; }.feature-preview { font-size: 7px; }.level-mini-card > button { font-size: 7px; }
  .levels-page { min-height: 0; padding: 28px 0 40px; }.levels-heading { margin: 30px auto 19px; }.levels-heading h1 { font-size: 27px; letter-spacing: -.9px; }.levels-heading > p { font-size: 9px; line-height: 1.6; }.active-profile-banner { gap: 8px; padding: 10px; border-radius: 13px; }.active-profile-sparkle { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; }.active-profile-banner b { font-size: 8px; }.profile-banner-copy { max-width: 100px; font-size: 7px; text-align: right; line-height: 1.4; }.age-band-list { gap: 10px; }.age-band-card { display: block; padding: 9px; border-radius: 17px; }.age-band-info { min-height: 109px; padding: 13px; margin-bottom: 8px; }.age-band-info h2 { margin-top: 5px; font-size: 23px; }.age-band-info h3 { font-size: 10px; }.age-band-info p { max-width: 245px; margin-top: 5px; font-size: 8px; }.age-selected-tag { position: absolute; right: 12px; bottom: 12px; margin: 0; }.level-choice-grid { grid-template-columns: 1fr; gap: 7px; }.level-choice { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 0 10px; padding: 10px; border-radius: 13px; }.level-choice-head { grid-column: 1; }.level-cue { min-height: 0; grid-column: 1; margin: 4px 0 6px 30px; }.level-unlocks { grid-column: 1; min-height: 0; margin: 0 0 4px 30px; }.level-example { grid-column: 1; min-height: 0; margin: 4px 0 0 30px; }.level-select-button { grid-column: 2; grid-row: 1/6; align-self: center; min-width: 95px; min-height: 35px; margin: 0; font-size: 7px; }.current-mark { font-size: 7px; }.levels-note { align-items: flex-start; margin-top: 10px; padding: 11px; }.levels-note b { font-size: 8px; }.levels-note small { font-size: 7px; line-height: 1.5; }
}
.site-footer #runtime-status { max-width: 100%; color: #897fae; font-size: 10px; text-align: right; }
.parent-consent-dialog { width: min(520px, calc(100vw - 28px)); max-height: calc(100dvh - 28px); overflow-y: auto; padding: 28px; border: 1px solid rgba(127,108,211,.2); border-radius: 24px; color: #403958; background: linear-gradient(145deg,#fff,#f8f5ff); box-shadow: 0 24px 90px rgba(48,39,93,.24); }
.parent-consent-dialog::backdrop { background: rgba(32,27,55,.38); backdrop-filter: blur(6px); }
.consent-orb { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 15px; color: white; background: linear-gradient(145deg,#a691f0,#7864d8); font-size: 22px; }
.parent-consent-dialog h2 { margin: 8px 0; color: #312c4b; font-size: 23px; }
.parent-consent-dialog .consent-copy { margin: 12px 0; color: #67617b; font-size: 14px; line-height: 1.75; }
.consent-data-details { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(119,104,179,.14); border-radius: 13px; background: rgba(255,255,255,.76); }
.consent-data-details summary, .parent-data-details summary { color: #64578d; font-size: 12px; font-weight: 700; line-height: 1.5; cursor: pointer; }
.consent-data-details p { margin: 8px 0 0; color: #787186; font-size: 11px; line-height: 1.65; }
.consent-privacy-note { margin: 0; padding: 11px 13px; border-radius: 12px; color: #7e6f9e; background: #f1edff; font-size: 12px; line-height: 1.6; }
.consent-check { display: flex; align-items: flex-start; gap: 9px; margin: 17px 0; color: #514a68; font-size: 13px; line-height: 1.6; cursor: pointer; }
.consent-check input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #806cdb; }
.consent-actions { display: flex; justify-content: flex-end; gap: 9px; }
.consent-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .parent-consent-dialog { padding: 22px 19px; border-radius: 20px; }.parent-consent-dialog h2 { font-size: 20px; }.site-footer #runtime-status { font-size: 9px; } }
.result-actions { flex-wrap: wrap; }
.result-actions .primary-button, .result-actions .secondary-button { flex: 1 1 138px; }
.parent-data-details { max-width: 910px; margin: 12px auto 0; padding: 13px 16px; border: 1px solid rgba(119,104,179,.13); border-radius: 14px; color: #777087; background: rgba(255,255,255,.78); }
.parent-data-details div { display: grid; gap: 7px; margin-top: 9px; }
.parent-data-details p { margin: 0; font-size: 10px; line-height: 1.7; }
@media (max-width: 600px) { .consent-data-details { padding: 10px 11px; }.consent-data-details p { font-size: 10px; }.parent-data-details { margin: 10px 12px 0; padding: 11px; }.parent-data-details p { font-size: 9px; } }
.local-data-controls { display: flex; align-items: center; gap: 14px; max-width: 910px; margin: 12px auto 0; padding: 14px 16px; border: 1px solid rgba(119,104,179,.13); border-radius: 15px; background: rgba(255,255,255,.74); }
.local-data-controls > span { display: grid; gap: 4px; flex: 1; min-width: 0; }
.local-data-controls b { color: #68617c; font-size: 10px; }
.local-data-controls small { color: #9691a2; font-size: 8px; line-height: 1.55; }
.local-data-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.local-data-controls button { flex: 0 0 auto; padding: 8px 10px; border: 1px solid rgba(119,104,179,.16); border-radius: 10px; color: #7466a5; background: white; font-size: 8px; white-space: nowrap; }
.local-data-controls button:hover { background: #f8f6ff; border-color: rgba(119,104,179,.3); }
.local-data-controls .clear-local-work-button { color: #8c7187; border-color: rgba(143,112,142,.18); }
.local-data-controls .clear-local-data-button { color: #9b506c; border-color: rgba(185,93,128,.26); background: #fff9fb; }
@media (max-width: 650px) { .local-data-controls { align-items: flex-start; gap: 8px; padding: 11px; }.local-data-controls b { font-size: 8px; }.local-data-controls small { font-size: 7px; }.local-data-controls button { padding: 7px; font-size: 7px; white-space: nowrap; } }
@media (max-width: 650px) { .local-data-controls { flex-direction: column; }.local-data-actions { width: 100%; justify-content: stretch; }.local-data-actions button { flex: 1 1 100px; } }