:root { color: #202028; background: #f1f1f4; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
body { min-height: 100svh; margin: 0; display: grid; place-items: center; padding: 24px; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.app-shell { width: min(100%, 1100px); display: grid; grid-template-columns: minmax(330px, 410px) minmax(0, 440px); justify-content: center; align-items: start; gap: clamp(24px, 5vw, 72px); }
.phone { position: relative; min-height: min(852px, calc(100svh - 48px)); aspect-ratio: 393 / 852; overflow: hidden; display: flex; flex-direction: column; background: #fbfbfd; border: 1px solid #ddddE4; border-radius: 42px; box-shadow: 0 24px 70px rgba(30, 29, 45, .10), 0 2px 8px rgba(30, 29, 45, .05); }
.top-bar { height: 72px; padding: 20px 22px 10px; display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.wordmark { color: #262631; font-size: 21px; font-weight: 720; letter-spacing: -1.15px; text-decoration: none; }.wordmark span { color: #7869cf; }
.quiet-button, .tool-button, .icon-button { border: 1px solid #e2e0e9; border-radius: 999px; background: #fff; color: #55515e; cursor: pointer; }
.quiet-button { padding: 7px 11px; font-size: 11px; }.quiet-button:disabled { cursor: wait; opacity: .55; }.quiet-button:hover, .tool-button:hover { border-color: #c6c0d6; color: #55488a; }
.developer-actions { display: flex; align-items: center; gap: 7px; }.chat-badge { position: absolute; top: 7px; right: calc(50% - 18px); width: 7px; height: 7px; border-radius: 50%; background: #e87373; box-shadow: 0 0 0 2px #f7f7fb; }.nav-item { position: relative; }.messages-empty { display: grid; min-height: 310px; place-content: center; gap: 8px; border: 1px dashed #dedbe5; border-radius: 24px; color: #8d8796; text-align: center; }.messages-empty span { color: #b3abcf; font-size: 31px; }.messages-empty p { margin: 0; font-size: 13px; }.messages-empty small { font-size: 10px; }.permanent-chat { display: flex; min-height: 500px; flex-direction: column; overflow: hidden; border: 1px solid #e5e2eb; border-radius: 23px; background: #fff; }.permanent-chat-meta { display: flex; align-items: center; gap: 9px; padding: 15px; border-bottom: 1px solid #eeecf1; }.load-earlier-messages { align-self: center; margin: 10px 0 -3px; padding: 5px 9px; border: 0; background: transparent; color: #7869b0; font-size: 10px; font-weight: 650; cursor: pointer; }.load-earlier-messages:disabled { color: #aaa4b0; cursor: wait; }.permanent-chat-meta strong, .permanent-chat-meta small { display: block; }.permanent-chat-meta strong { color: #38333f; font-size: 12px; }.permanent-chat-meta small { margin-top: 2px; color: #9993a1; font-size: 10px; }.connection-dot { width: 9px; height: 9px; border-radius: 50%; background: #7e70bb; box-shadow: 0 0 0 4px #7e70bb1f; }.permanent-message-list { display: grid; flex: 1; align-content: start; gap: 8px; margin: 0; padding: 15px; overflow: auto; list-style: none; }.permanent-message-list li { width: fit-content; max-width: 84%; padding: 8px 10px; border-radius: 13px; background: #f0eff4; color: #4c4753; font-size: 12px; line-height: 1.45; }.permanent-message-list li.own { justify-self: end; background: #e8e3f8; color: #44386c; }.permanent-message-list li.world { border: 1px solid #e3dff0; background: #faf9fd; }.permanent-composer { display: flex; gap: 7px; padding: 11px; border-top: 1px solid #eeecf1; }.permanent-composer input { flex: 1; min-width: 0; padding: 0 11px; border: 1px solid #e7e3ec; border-radius: 11px; outline: 0; color: #393540; font-size: 12px; }.permanent-composer button { padding: 0 12px; border: 0; border-radius: 11px; background: #302c39; color: #fff; font-size: 11px; font-weight: 650; cursor: pointer; }.developer-mode-label { display: inline-block; margin: 0 0 10px; padding: 5px 8px; border-radius: 999px; background: #f0edf9; color: #7062a7; font-size: 9px; font-weight: 700; letter-spacing: .65px; }
.screen { flex: 1; min-height: 0; overflow: auto; padding: 22px 22px 108px; }.phone.is-landing .top-bar { position: absolute; z-index: 2; width: 100%; background: transparent; }.landing-screen { position: relative; display: grid; min-height: 0; overflow: hidden; place-items: center; padding: 98px 22px 26px; background: linear-gradient(160deg, #dce8dc 0%, #e9e1d5 48%, #d9e2ef 100%); }.landing-world { position: absolute; inset: 0; overflow: hidden; }.landing-world::before { position: absolute; inset: 16% -28% -16%; border: 1px solid rgba(72, 85, 76, .12); border-radius: 50%; content: ""; transform: rotate(-12deg); }.landing-world::after { position: absolute; inset: 29% -34% -29%; border: 1px solid rgba(76, 91, 111, .1); border-radius: 50%; content: ""; transform: rotate(18deg); }.landing-orb { position: absolute; display: block; border-radius: 50%; opacity: .68; filter: blur(1px); }.orb-one { top: 14%; left: -10%; width: 150px; height: 150px; background: #c0d3b8; }.orb-two { right: -22px; bottom: 21%; width: 128px; height: 128px; background: #c1c8dc; }.orb-three { top: 42%; left: 38%; width: 46px; height: 46px; background: #e9cfa9; }.landing-character { position: absolute; display: grid; width: 42px; height: 52px; place-items: center; border: 1px solid rgba(58, 64, 59, .16); border-radius: 46% 46% 40% 40%; background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 5px rgba(255,255,255,.2), 0 8px 20px rgba(48, 62, 51, .08); color: #52615a; font-size: 17px; animation: wander 11s ease-in-out infinite alternate; }.character-one { top: 20%; left: 15%; color: #556f90; animation-delay: -5s; }.character-two { top: 32%; right: 16%; color: #85637b; animation-delay: -8s; }.character-three { bottom: 24%; left: 17%; color: #71689a; animation-delay: -2s; }.character-four { right: 28%; bottom: 17%; color: #617a67; animation-delay: -10s; }.character-five { top: 11%; right: 42%; color: #8d7255; animation-delay: -3s; }.landing-content { position: relative; z-index: 1; max-width: 292px; text-align: center; }.landing-content .eyebrow { color: rgba(51, 61, 54, .65); }.landing-content h1 { margin: 0; color: #2d3630; font-size: clamp(35px, 9.2vw, 43px); line-height: 1.12; letter-spacing: -2.6px; }.landing-content > p:not(.eyebrow) { margin: 18px 0 26px; color: #546057; font-size: 13px; line-height: 1.7; }.landing-start { min-width: 142px; min-height: 52px; border: 1px solid rgba(47, 57, 49, .16); border-radius: 999px; background: #303a32; box-shadow: 0 12px 24px rgba(47, 57, 49, .2); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }.landing-start span { margin-left: 18px; color: #cadac9; }.landing-start:hover { background: #3d4a40; transform: translateY(-1px); }.landing-footnote { position: absolute; z-index: 1; bottom: max(25px, env(safe-area-inset-bottom, 0px)); margin: 0; color: rgba(54, 65, 57, .56); font-size: 10px; letter-spacing: .5px; }.auth-screen { display: flex; flex-direction: column; justify-content: space-between; gap: 44px; padding-top: clamp(48px, 12vh, 98px); }
@keyframes wander { 0% { transform: translate3d(0, 0, 0) rotate(-4deg); } 50% { transform: translate3d(16px, -22px, 0) rotate(4deg); } 100% { transform: translate3d(-12px, 12px, 0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .landing-character { animation: none; } }
.eyebrow { margin: 0 0 10px; color: #817b91; font-size: 10px; font-weight: 700; letter-spacing: 1.9px; }.auth-copy h1, .screen-heading h1 { margin: 0; color: #22212a; font-size: clamp(31px, 8.4vw, 37px); line-height: 1.16; letter-spacing: -2.1px; }.auth-copy > p:last-child, .screen-heading > p { max-width: 295px; margin: 18px 0 0; color: #777381; font-size: 14px; line-height: 1.75; }
.auth-actions { display: grid; gap: 10px; }.sign-in-button { min-height: 53px; display: flex; align-items: center; justify-content: center; gap: 11px; border: 1px solid #e2e0e7; border-radius: 16px; background: #fff; color: #2e2c34; font-size: 14px; font-weight: 650; cursor: pointer; }.sign-in-button:hover { transform: translateY(-1px); border-color: #c5bfd3; box-shadow: 0 8px 20px rgba(57, 46, 92, .06); }.google-mark { font-family: Arial, sans-serif; color: #4285f4; font-size: 19px; font-weight: 700; }.apple { background: #292730; border-color: #292730; color: #fff; }.apple span { font-size: 12px; }.tiny-copy { margin: 7px 10px 0; color: #9b97a4; font-size: 10px; line-height: 1.55; text-align: center; }
.screen-heading { margin-bottom: 22px; }.screen-heading h1 { font-size: 29px; }.avatar-canvas-wrap { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid #e3e1e9; border-radius: 26px; background: #fff; box-shadow: 0 10px 30px rgba(42, 37, 60, .035); }#avatar-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }.canvas-hint { position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; color: #b5b0c0; text-align: center; pointer-events: none; }.canvas-hint span { color: #b6add8; font-size: 37px; }.canvas-hint p { margin: 0; font-size: 13px; }
.draw-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 15px 0 19px; }.palette { display: flex; gap: 5px; }.color { width: 28px; height: 28px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: var(--color); cursor: pointer; }.color[aria-pressed="true"] { border-color: #f8f8fa; outline: 1px solid var(--color); outline-offset: 2px; }.range-label { display: flex; align-items: center; gap: 6px; margin-left: auto; color: #77717f; font-size: 11px; }.range-label input { width: 58px; accent-color: #7869cf; }.range-label output { min-width: 17px; text-align: right; }.tool-button { padding: 7px 9px; font-size: 11px; }.tool-button[aria-pressed="true"] { border-color: #998dda; background: #f3f0fd; color: #55488a; }.tool-button:disabled { opacity: .4; cursor: default; }.primary-button { width: 100%; padding: 15px 17px; border: 0; border-radius: 16px; background: #292630; color: #fff; font-size: 14px; font-weight: 650; cursor: pointer; }.primary-button span { margin-left: 22px; color: #c9c2e7; }.primary-button:disabled { opacity: .35; cursor: default; }.primary-button:not(:disabled):hover { background: #423b51; }
.world-screen { padding: 8px 0 104px; overflow: hidden; display: flex; flex-direction: column; }.world-status { display: flex; align-items: center; gap: 7px; padding: 8px 22px 16px; color: #777281; font-size: 11px; }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #59bb83; box-shadow: 0 0 0 4px #59bb831c; }.world-placeholder { position: relative; flex: 1; min-height: 440px; overflow: hidden; background: radial-gradient(circle at 50% 32%, #fbfcff 0 11%, transparent 12%), linear-gradient(180deg, #f6f6fa 0%, #fbfafb 62%, #f3f6f0 62.2%, #f0f3ed 100%); }.world-placeholder::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(#c4c1cd 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, #000, transparent 58%); }.world-note { position: absolute; top: 43%; left: 50%; margin: 0; color: #a09ba9; font-size: 11px; line-height: 1.6; text-align: center; transform: translate(-50%, -50%); }.ground-line { position: absolute; right: 0; bottom: 34%; left: 0; border-top: 1px solid #d9ded6; }.world-placeholder { --player-x: 50%; --player-y: 72%; --peer-x: 29%; --peer-y: 72%; --player-facing: 1; }.player-wrap { position: absolute; top: var(--player-y); left: var(--player-x); display: grid; justify-items: center; transform: translate(-50%, -50%); transition: left .08s linear, top .08s linear; }.player-wrap img { width: 104px; height: 118px; object-fit: contain; object-position: center bottom; transform: scaleX(var(--player-facing)); transition: transform .12s ease; }.player-name { margin-top: 6px; color: #67636f; font-size: 11px; }.speech-bubble { position: absolute; bottom: calc(100% + 15px); width: max-content; max-width: 220px; padding: 10px 14px; border: 1px solid #e5e2e8; border-radius: 17px; background: #fff; color: #4a4554; box-shadow: 0 7px 20px rgba(38, 29, 62, .08); font-size: 12px; line-height: 1.5; text-align: center; }.speech-bubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 10px; height: 10px; border-right: 1px solid #e5e2e8; border-bottom: 1px solid #e5e2e8; background: #fff; transform: translateX(-50%) rotate(45deg); }.world-composer { display: flex; align-items: center; gap: 6px; margin: -68px 18px 0; padding: 7px 8px 7px 16px; border: 1px solid #e8e5ea; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 24px rgba(45, 37, 65, .06); z-index: 1; }.world-composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #393540; font-size: 13px; }.world-composer input::placeholder { color: #aaa4b0; }.world-composer button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #292630; color: #fff; cursor: pointer; }
.world-status { justify-content: space-between; }.world-test-actions { display: flex; gap: 6px; }.safety-sheet { position: absolute; z-index: 4; right: 18px; bottom: 75px; left: 18px; padding: 18px; border: 1px solid #e4dfe9; border-radius: 20px; background: rgba(255,255,255,.97); box-shadow: 0 18px 40px rgba(37, 29, 56, .14); backdrop-filter: blur(14px); }.safety-sheet h2 { margin: 0; color: #332f3b; font-size: 19px; letter-spacing: -.7px; }.safety-sheet p:not(.eyebrow) { margin: 9px 0 16px; color: #77717f; font-size: 12px; line-height: 1.6; }.safety-danger, .safety-secondary { width: 100%; min-height: 39px; margin-top: 8px; border-radius: 11px; font-size: 12px; font-weight: 650; cursor: pointer; }.safety-danger { border: 0; background: #a14f5c; color: #fff; }.safety-secondary { border: 1px solid #e3dfea; background: #fff; color: #5f5968; }.safety-text { display: block; margin: 12px auto 0; border: 0; background: transparent; color: #857e90; font-size: 11px; cursor: pointer; }.safety-sheet form label { display: grid; gap: 6px; margin-top: 13px; color: #706a77; font-size: 11px; }.safety-sheet select, .safety-sheet textarea { width: 100%; border: 1px solid #e4e0e8; border-radius: 10px; outline: 0; background: #fff; color: #413b48; font: inherit; font-size: 12px; }.safety-sheet select { height: 36px; padding: 0 9px; }.safety-sheet textarea { min-height: 68px; padding: 9px; resize: vertical; }.safety-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }.safety-form-actions .safety-secondary, .safety-form-actions .safety-danger { margin: 0; }.peer-wrap { position: absolute; top: var(--peer-y); left: var(--peer-x); display: grid; justify-items: center; transform: translate(-50%, -50%); transition: left .08s linear, top .08s linear; }.peer-avatar { display: grid; width: 78px; height: 96px; place-items: center; border: 1px solid #cfc8e4; border-radius: 44% 44% 37% 37%; background: linear-gradient(145deg, #ebe8f7, #c9c2df); box-shadow: inset 0 0 0 6px rgba(255,255,255,.38); color: #77689e; font-size: 25px; }.world-placeholder.has-peer .world-note { opacity: .45; }.movement-controls { position: absolute; z-index: 2; bottom: 18px; left: 14px; display: grid; grid-template-columns: repeat(3, 34px); grid-template-areas: '. up .' 'left down right'; gap: 3px; }.movement-controls button { width: 34px; height: 34px; padding: 0; border: 1px solid #e2dfea; border-radius: 11px; background: rgba(255,255,255,.87); color: #625d70; font-size: 16px; line-height: 1; touch-action: none; cursor: pointer; }.movement-controls button:active { background: #ece8fa; color: #574a8d; }.movement-controls button[data-move="up"] { grid-area: up; }.movement-controls button[data-move="left"] { grid-area: left; }.movement-controls button[data-move="down"] { grid-area: down; }.movement-controls button[data-move="right"] { grid-area: right; }.world-status > div { display: flex; align-items: center; gap: 7px; }.world-population { color: #9892a3; }.world-test-button { padding: 6px 9px; border: 1px solid #d9d3ee; border-radius: 999px; background: #f7f5fd; color: #695ca4; font-size: 10px; font-weight: 650; cursor: pointer; }
.bottom-nav { position: absolute; z-index: 3; right: 16px; bottom: max(17px, env(safe-area-inset-bottom, 0px)); left: 16px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border: 1px solid rgba(255,255,255,.9); border-radius: 999px; background: rgba(248, 249, 252, .8); box-shadow: 0 12px 30px rgba(27, 36, 52, .12), inset 0 1px 1px #fff; backdrop-filter: blur(18px) saturate(150%); }.nav-item { display: grid; place-items: center; gap: 2px; min-height: 53px; border: 0; border-radius: 999px; background: transparent; color: #777480; cursor: pointer; }.nav-item span { font-size: 21px; line-height: 1; }.nav-item small { font-size: 9px; }.nav-item.is-active { color: #25242c; background: rgba(211, 215, 223, .72); box-shadow: inset 0 1px 1px #fff; }
.developer-panel { align-self: center; padding: 26px; border: 1px solid #e1dee8; border-radius: 25px; background: #fafafd; box-shadow: 0 18px 42px rgba(31, 28, 45, .06); }.panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }.panel-title h2 { margin: 0; font-size: 23px; letter-spacing: -1px; }.icon-button { width: 30px; height: 30px; font-size: 18px; }.panel-lede { margin: 17px 0 22px; color: #797482; font-size: 12px; line-height: 1.7; }.state-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin: 0; border: 1px solid #e8e6ed; border-radius: 14px; background: #e8e6ed; }.state-list div { padding: 12px; background: #fff; }.state-list dt { color: #9993a1; font-size: 10px; }.state-list dd { margin: 5px 0 0; color: #393540; font-size: 12px; font-weight: 650; }.event-stream { margin-top: 24px; }.stream-heading { display: flex; align-items: center; justify-content: space-between; }.stream-heading h3 { margin: 0; font-size: 12px; }.stream-heading button { border: 0; background: transparent; color: #7869b0; font-size: 11px; cursor: pointer; }.event-stream ol { display: grid; gap: 7px; max-height: 210px; margin: 12px 0; padding: 0; overflow: auto; list-style: none; }.event-stream li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; background: #f0eff4; color: #625d6d; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }.event-stream time { flex: 0 0 auto; color: #9993a2; }.panel-footnote { margin: 15px 0 0; color: #928c9d; font-size: 10px; line-height: 1.6; }.panel-footnote code { padding: 2px 4px; border-radius: 4px; background: #efedf4; }
@media (max-width: 800px) { body { padding: 0; display: block; }.app-shell { display: block; width: 100%; }.phone { width: 100%; min-height: 100svh; border: 0; border-radius: 0; box-shadow: none; }.developer-panel { position: fixed; z-index: 10; right: 12px; bottom: 12px; left: 12px; max-height: 74svh; overflow: auto; }.top-bar { padding-top: calc(20px + env(safe-area-inset-top, 0px)); height: calc(72px + env(safe-area-inset-top, 0px)); }.screen { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }.bottom-nav { bottom: max(17px, env(safe-area-inset-bottom, 0px)); }.world-composer { margin-bottom: 4px; }.world-composer input { font-size: 16px; } }

.chat-inbox { margin-bottom: 13px; }.chat-inbox-label { margin: 0 0 7px; color: #8e8798; font-size: 10px; font-weight: 720; letter-spacing: .7px; }.chat-inbox-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.chat-inbox-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 12px; border: 1px solid #e5e2eb; border-radius: 15px; background: #fff; color: #3b3642; text-align: left; cursor: pointer; }.chat-inbox-item.is-active { border-color: #bcb1e2; background: #faf9fe; }.chat-inbox-item strong { font-size: 12px; }.chat-inbox-item small { overflow: hidden; color: #847d8d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.chat-inbox-unread { width: 7px; height: 7px; align-self: center; border-radius: 50%; background: #e87373; }.chat-inbox-item time { grid-column: 2; grid-row: 2; align-self: end; color: #aaa4b0; font-size: 9px; }

/* Shared side-on scene placeholder: final illustration deliberately remains open. */
.landing-screen { background: #f6f8f3; }
.landing-world::before, .landing-world::after { content: none; }
.landing-cloud, .world-cloud { position: absolute; z-index: 0; display: block; width: 72px; height: 25px; border-radius: 999px; background: #ecefeb; }
.landing-cloud::before, .world-cloud::before { position: absolute; bottom: 0; left: 15px; width: 35px; height: 35px; border-radius: 50%; background: inherit; content: ""; }
.landing-cloud::after, .world-cloud::after { position: absolute; right: 9px; bottom: 0; width: 29px; height: 29px; border-radius: 50%; background: inherit; content: ""; }
.cloud-one { top: 17%; left: 18%; }.cloud-two { top: 30%; right: 11%; transform: scale(.65); }
.landing-hill, .world-hill { position: absolute; z-index: 0; display: block; width: 128%; border-radius: 50% 50% 0 0; }
.hill-back { bottom: 20%; left: -33%; height: 34%; background: #e6ebe3; }.hill-front { right: -31%; bottom: 15%; height: 25%; background: #dde7dc; }
.landing-ground { position: absolute; right: 0; bottom: 0; left: 0; height: 20%; border-top: 1px solid #d4ddd1; background: #eef2eb; }
.landing-lane { position: absolute; z-index: 1; right: 0; bottom: 20%; left: 0; height: 80px; border-bottom: 1px solid #cdd8cb; }
.landing-character { position: absolute; bottom: 0; display: grid; width: 34px; height: 46px; place-items: center; border: 1px solid rgba(75, 87, 75, .18); border-radius: 46% 46% 37% 37%; background: rgba(252, 253, 250, .72); box-shadow: inset 0 0 0 4px rgba(255,255,255,.4); color: #52615a; font-size: 15px; animation: lane-walk 8s ease-in-out infinite alternate; }
.character-one { top: auto; bottom: 0; left: 10%; color: #556f90; animation-delay: -5s; }.character-two { top: auto; right: auto; bottom: 0; left: 26%; color: #85637b; animation-delay: -8s; }.character-three { top: auto; bottom: 0; left: 46%; color: #71689a; animation-delay: -2s; }.character-four { top: auto; right: auto; bottom: 0; left: 66%; color: #617a67; animation-delay: -10s; }.character-five { top: auto; right: auto; bottom: 0; left: 82%; color: #8d7255; animation-delay: -3s; }
.landing-content { margin-bottom: 58px; }
@keyframes lane-walk { 0% { transform: translateX(-18px); } 50% { transform: translateX(24px) translateY(-1px); } 100% { transform: translateX(58px); } }

.world-placeholder { background: #f8faf7; }.world-placeholder::before { right: 0; bottom: 0; left: 0; height: 28%; background: #eef3ed; content: ""; opacity: 1; background-image: none; mask-image: none; }
.world-placeholder { --player-x: 50%; --peer-x: 29%; --player-facing: 1; --peer-facing: -1; }
.world-placeholder .hill-back { bottom: 28%; }.world-placeholder .hill-front { bottom: 23%; }
.ground-line { z-index: 1; bottom: 28%; border-top-color: #cdd8cb; }
.player-wrap, .peer-wrap { position: absolute; z-index: 2; top: auto; bottom: 28%; display: grid; justify-items: center; transform: translateX(-50%); transition: left .08s linear; }
.player-wrap { left: var(--player-x); }.peer-wrap { left: var(--peer-x); }
.player-name { position: absolute; top: calc(100% + 6px); margin: 0; white-space: nowrap; }
.world-composer, .movement-controls { z-index: 3; }
.movement-controls { display: flex; grid-template-areas: none; gap: 4px; }.movement-controls button { width: 38px; }.movement-controls button[data-move="left"], .movement-controls button[data-move="right"] { grid-area: auto; }

/* World and inbox adopt the supplied frontend-test page structure. */
.world-screen { padding: 0 0 104px; }.world-status { flex: 0 0 auto; min-height: 48px; padding: 13px 20px 9px; background: #fff; }.world-placeholder.character-stage { position: relative; flex: 1; min-height: 0; margin: 0; overflow: hidden; background: #fff; outline: none; }
.world-placeholder.character-stage::before { content: none; }.scenery { position: absolute; right: 0; left: 0; pointer-events: none; background-repeat: repeat-x; }.scenery-clouds { bottom: calc(20% + 205px); height: 110px; background-image: radial-gradient(ellipse at 18% 68%, #f0f1f2 0 15px, transparent 16px), radial-gradient(ellipse at 26% 68%, #f0f1f2 0 21px, transparent 22px), radial-gradient(ellipse at 33% 68%, #f0f1f2 0 16px, transparent 17px), radial-gradient(ellipse at 80% 52%, #f0f1f2 0 13px, transparent 14px), radial-gradient(ellipse at 86% 52%, #f0f1f2 0 19px, transparent 20px); }.scenery-hills { bottom: 20%; height: 190px; background: radial-gradient(ellipse 48% 100% at 26% 100%, #edf1eb 0 54%, transparent 55%), radial-gradient(ellipse 58% 100% at 87% 100%, #e5ece3 0 54%, transparent 55%); }.scenery-trees { bottom: 20%; height: 160px; background: radial-gradient(ellipse 23px 50px at 16% 95%, #d9e3d3 0 54%, transparent 55%), linear-gradient(#b5c0af, #b5c0af) 16% 84% / 4px 50px no-repeat, radial-gradient(ellipse 19px 42px at 84% 95%, #dce4d7 0 54%, transparent 55%), linear-gradient(#bac5b5, #bac5b5) 84% 84% / 4px 50px no-repeat; }
.character-lane { position: absolute; right: 0; bottom: 20%; left: 0; height: 132px; border-bottom: 1px solid #d9dfd5; }.world-placeholder .ground-line, .world-placeholder .world-cloud, .world-placeholder .world-hill { display: none; }
.character-lane .player-wrap, .character-lane .peer-wrap { position: absolute; z-index: 2; bottom: 0; display: grid; justify-items: center; transform: translateX(-50%); transition: left .08s linear; }.character-lane .player-wrap { left: var(--player-x); }.character-lane .peer-wrap { left: var(--peer-x); transition: left .44s cubic-bezier(.22, .8, .28, 1); }.character-lane .peer-wrap.is-entering, .character-lane .peer-wrap.is-leaving { pointer-events: none; }.character-lane .player-wrap img { width: min(112px, calc(100vw - 48px)); height: auto; min-height: 112px; object-fit: contain; object-position: center bottom; }.character-lane .peer-avatar, .character-lane .peer-avatar-image { width: 78px; height: 96px; transform: scaleX(var(--peer-facing)); transform-origin: center bottom; transition: transform .18s ease; }.character-lane .peer-avatar-image { object-fit: contain; object-position: center bottom; }.character-lane .player-name { top: calc(100% + 7px); color: #777; font-size: 10px; }.character-lane .speech-bubble { bottom: calc(100% + 15px); border-color: #e9e5ed; color: #403948; font-size: 13px; line-height: 1.6; }.character-lane .movement-controls { z-index: 3; bottom: -62px; left: 18px; }.character-lane .movement-controls button { width: 34px; height: 34px; background: #ffffffd9; }
.world-composer.chat-composer { z-index: 4; flex: 0 0 auto; margin: -63px 20px 0; padding: 8px 8px 8px 18px; border-color: #e9e6ed; border-radius: 28px; background: #f7f6f8; box-shadow: 0 2px 8px #30213e0c; }.world-composer.chat-composer input { color: #403948; font-size: 14px; }.world-composer.chat-composer button { width: 36px; height: 36px; background: #292630; }
.world-placeholder.character-stage .scenery-clouds { background-image: url('./scenery-clouds.svg'); background-size: 720px 110px; }.world-placeholder.character-stage .scenery-hills { background-image: url('./scenery-hills.svg'); background-size: 720px 190px; }.world-placeholder.character-stage .scenery-trees { background-image: url('./scenery-trees.svg'); background-size: 640px 160px; }

.messages-screen { padding: 0 0 94px; overflow: hidden; background: #fff; }.inbox-view { height: 100%; overflow-y: auto; padding-bottom: 12px; }.inbox-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 21px 17px; }.inbox-header h1 { margin: 0; color: #171717; font-size: 23px; letter-spacing: -.8px; font-weight: 700; }.inbox-header h1 span { color: #7869cf; }.dm-icon-button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; background: none; color: #161616; font-size: 24px; cursor: pointer; }.dm-search { display: flex; align-items: center; gap: 9px; margin: 0 20px; padding: 9px 13px; border-radius: 12px; background: #f2f2f2; color: #8b8b8b; }.dm-search > span { font-size: 18px; line-height: 1; }.dm-search input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #222; font-size: 13px; }.dm-notes { display: flex; gap: 10px; padding: 35px 22px 18px; }.dm-note { min-width: 0; text-align: center; }.dm-avatar { position: relative; display: grid; width: 55px; height: 55px; place-items: center; border-radius: 50%; background: #e9e7ed; color: #706b79; font-size: 21px; }.dm-note > span:last-child { display: block; margin-top: 7px; color: #797979; font-size: 10px; }.inbox-heading { display: flex; align-items: center; justify-content: space-between; padding: 10px 21px 9px; }.inbox-heading h2 { margin: 0; color: #171717; font-size: 15px; }.inbox-heading button { border: 0; background: none; color: #5574da; font-size: 11px; cursor: pointer; }.messages-empty { min-height: 180px; border: 0; border-radius: 0; color: #999; }.messages-empty span { color: #aaa5bd; }.chat-inbox { margin: 0; }.chat-inbox-list { display: block; margin: 0; padding: 0; list-style: none; }.conversation-row { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: #fff; padding: 11px 21px; color: #171717; text-align: left; cursor: pointer; }.conversation-row:hover, .conversation-row.is-active { background: #fafafa; }.conversation-avatar { flex-shrink: 0; width: 48px; height: 48px; font-size: 18px; }.conversation-copy { flex: 1; min-width: 0; }.conversation-name { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; }.conversation-preview { display: block; overflow: hidden; color: #969696; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.conversation-row.unread .conversation-name, .conversation-row.unread .conversation-preview { color: #191919; font-weight: 600; }.unread-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #4b79ed; }.permanent-chat.thread-view { min-height: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; }.thread-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px 16px; border-bottom: 1px solid #f1f1f1; }.thread-avatar { width: 36px; height: 36px; font-size: 15px; }.thread-person h2 { margin: 0 0 3px; color: #171717; font-size: 14px; }.thread-person > span { color: #999; font-size: 10px; }.permanent-message-list { gap: 7px; padding: 22px 17px; }.permanent-message-list li { max-width: 82%; padding: 11px 15px; border-radius: 19px; background: #f1f1f1; color: #171717; font-size: 13px; line-height: 1.55; }.permanent-message-list li.own { background: linear-gradient(125deg, #7663f4, #5367ed); color: #fff; }.permanent-message-list li.world { border: 0; background: #f1f1f1; }.permanent-composer { margin: 12px 16px 5px; padding: 8px 14px; border-color: #dedede; border-radius: 26px; }.permanent-composer input { padding: 6px 0; border: 0; border-radius: 0; font-size: 13px; }.permanent-composer button { background: none; color: #596eea; }

/* App polish: the signed-in experience is a world, not a branded landing page. */
.phone.is-app-screen .wordmark { visibility: hidden; }
.phone.is-app-screen .developer-actions { margin-left: auto; }

.world-screen { position: relative; padding-bottom: 104px; }
.world-placeholder.character-stage {
  touch-action: none;
  cursor: grab;
  background: linear-gradient(to bottom, #fff 0 68%, #eef3ed 68% 100%);
}
.world-placeholder.character-stage:active { cursor: grabbing; }
.scenery-clouds { bottom: calc(32% + 205px); }
.scenery-hills, .scenery-trees { bottom: 32%; }
.character-lane { bottom: 32%; }
.character-lane .player-wrap {
  transform: translateX(-50%) translateY(calc(var(--player-hop, 0px) * -1));
  transition: left .06s linear, transform .04s linear;
}
.character-lane .peer-wrap { transform: translateX(-50%); }
.world-composer.chat-composer {
  position: absolute;
  right: 20px;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  left: 20px;
  margin: 0;
  background: rgba(247, 246, 248, .94);
  backdrop-filter: blur(14px);
}

.peer-avatar {
  position: relative;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.peer-avatar::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 39px;
  height: 39px;
  border: 2px solid #777185;
  border-radius: 48% 52% 46% 54%;
  background: radial-gradient(circle at 64% 54%, #777185 0 2px, transparent 2.6px), #e6e3ec;
  content: "";
  transform: translateX(-50%);
}
.peer-avatar::after {
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 48px;
  border: 2px solid #777185;
  border-radius: 45% 45% 32% 32%;
  background: #d4cfdf;
  content: "";
}

.bottom-nav svg, .dm-icon-button svg, .dm-search svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.nav-item svg { width: 21px; height: 21px; }
.nav-item.is-active svg { stroke-width: 2.1; }
.dm-search svg { width: 17px; height: 17px; flex: 0 0 auto; }
.dm-avatar { overflow: hidden; background: #eeedf1; }
.dm-avatar::before {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #aaa5b2;
  content: "";
  transform: translateX(-50%);
}
.dm-avatar::after {
  position: absolute;
  right: 9px;
  bottom: 6px;
  left: 9px;
  height: 22px;
  border-radius: 50% 50% 24% 24%;
  background: #bcb7c4;
  content: "";
}
.thread-avatar::before { top: 6px; width: 10px; height: 10px; }
.thread-avatar::after { right: 6px; bottom: 3px; left: 6px; height: 15px; }
.inbox-heading { padding-top: 27px; }
.messages-empty { padding: 32px; }
.messages-empty p { color: #55515c; font-size: 14px; font-weight: 650; }
.messages-empty small { max-width: 220px; color: #99949f; font-size: 11px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .character-lane .player-wrap { transition: none; }
}

/* Familiar social-app tab icons: icon-only, with one quiet active indicator. */
.bottom-nav { padding: 3px 9px; }
.nav-item {
  position: relative;
  min-height: 56px;
  gap: 0;
  border-radius: 999px;
  color: #202126;
}
.nav-item svg {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.nav-item.is-active {
  background: rgba(226, 229, 233, .72);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .82);
  color: #202126;
}
.nav-item.is-active svg { stroke-width: 2; }
.nav-item.is-active::after { content: none; }
.nav-item small { display: none; }
.chat-badge { top: 9px; right: calc(50% - 19px); }