:root {
    --bg: #f7f6ef;
    --paper: #fffefa;
    --ink: #343b2d;
    --muted: #96998b;
    --green: #6e8149;
    --green-dark: #536838;
    --green-light: #edf1e2;
    --line: #e7e8db;
    --orange: #c68d57;
    --pink: #d68e9e;
    --radius: 24px;
    --shadow: 0 5px 24px #444a2c05;
    font-family: 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
    color: var(--ink);
    font-size: 14px;
    font-synthesis: none
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg)
}

button, input, textarea {
    font: inherit
}

button, a, input, textarea {
    -webkit-tap-highlight-color: transparent
}

button, a {
    touch-action: manipulation
}

button {
    cursor: pointer;
    color: inherit
}

button {
    border: 0;
    background: none
}

button:disabled {
    cursor: wait;
    opacity: .55
}

button, a {
    -webkit-user-select: none;
    user-select: none
}

a {
    color: inherit;
    text-decoration: none
}

button:focus-visible, a:focus-visible {
    outline: 3px solid #aabc75;
    outline-offset: 4px
}

input:focus, textarea:focus {
    outline: 2px solid #a6b47a;
    outline-offset: 1px
}

h1, h2, h3, p {
    margin: 0
}

h1 {
    font-size: 30px;
    font-weight: 650;
    letter-spacing: 1px;
    line-height: 1.4
}

h2 {
    font-size: 16px;
    font-weight: 600
}

h3 {
    font-size: 16px;
    font-weight: 600
}

svg {
    vertical-align: middle;
    flex-shrink: 0
}

small {
    font-weight: 400
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 204px;
    background: #f0f1e7;
    border-right: 1px solid #e3e5d7;
    padding: 34px 20px 22px;
    display: flex;
    flex-direction: column;
    z-index: 20
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-left: 10px
}

.brand img {
    width: 48px;
    height: 48px
}

.brand > span {
    font-size: 27px;
    letter-spacing: 4px;
    font-weight: 650
}

.brand small {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: #92997f;
    margin-top: 3px
}

.nav-caption {
    font-size: 10px;
    letter-spacing: 2px;
    color: #a2a792;
    margin: 53px 0 16px 16px
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border-radius: 13px;
    color: #878e79;
    font-size: 13px;
    transition: .2s
}

.sidebar nav a:hover {
    background: #e7ebda;
    color: var(--green-dark)
}

.sidebar nav a.active {
    background: #dfe6cc;
    color: #4d6635;
    font-weight: 600
}

.nav-dot {
    width: 5px;
    height: 5px;
    background: #ba9e6c;
    border-radius: 50%;
    margin-left: auto
}

.sidebar-note {
    margin: auto 0 32px 15px;
    padding-top: 50px;
    line-height: 1.9;
    color: #9aa485
}

.little-leaves {
    display: inline-block;
    transform: rotate(-12deg);
    margin-bottom: 9px;
    color: #aab888
}

.sidebar-note p {
    font-size: 11px
}

.sidebar-note small {
    font-size: 7px;
    letter-spacing: 1.2px
}

.sidebar-bottom {
    border-top: 1px solid #dde1cf;
    padding-top: 13px
}

.sidebar-bottom button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    color: #7d856e;
    font-size: 12px
}

.sidebar-bottom button svg:last-child {
    margin-left: auto
}

.workspace {
    margin-left: 204px
}

.topbar {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 0 40px;
    background: #f9f9f3dd;
    position: sticky;
    top: 0;
    z-index: 30
}

.breadcrumb {
    color: #a0a394;
    font-size: 11px;
    display: flex;
    gap: 13px;
    align-items: center
}

.breadcrumb b {
    font-weight: 500;
    color: #626b54
}

.breadcrumb > span {
    color: #c9cdbd
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: 13px 20px;
    font-size: 12px;
    font-weight: 550;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 1.3;
    transition: transform .18s, background .18s, box-shadow .18s
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px #46553510
}

.primary {
    background: var(--green);
    color: white;
    box-shadow: 0 3px 6px #667e3c18
}

.primary:hover {
    background: #5f7440
}

.secondary {
    background: #fffefa;
    border-color: #e4e7d9;
    color: #6a735b
}

.dark {
    background: #37472e;
    color: #fafcf4
}

.warm {
    background: #f5ead7;
    color: #997340;
    border-color: #ecdfc8
}

.ghost {
    background: transparent;
    color: #858d75
}

.small {
    padding: 8px 13px;
    font-size: 11px;
    border-radius: 9px
}

.demo-top {
    padding: 10px 13px;
    background: #f1eee2;
    border: 1px solid #e6e1d1;
    color: #8e805c;
    font-size: 11px
}

.top-actions > .dark {
    padding: 10px 15px;
    font-size: 11px
}

.mode-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    color: #8b927d;
    padding: 8px 2px
}

.mode-badge > span:first-child {
    width: 5px;
    height: 5px;
    background: #8ba35e;
    border-radius: 50%
}

.avatar-button {
    margin-left: 2px;
    padding: 0;
    display: flex;
    align-items: center
}

.avatar-button img {
    width: 34px;
    height: 34px;
    border-radius: 50%
}

.mobile-brand, .mobile-nav {
    display: none
}

#main {
    padding: 30px 40px 20px;
    max-width: 1580px;
    margin: auto
}

.page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px
}

.eyebrow {
    font-size: 10px;
    color: #999f8b;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px
}

.page-heading > div > p {
    font-size: 12px;
    color: #959b88;
    margin-top: 8px;
    line-height: 1.8
}

.companion-day {
    display: flex;
    gap: 12px;
    align-items: center;
    text-align: left;
    color: #82915f;
    flex-shrink: 0;
    padding: 10px 16px;
    border-left: 1px solid #e2e5d6
}

.companion-day span {
    font-size: 12px;
    color: #727d60
}

.companion-day b {
    font-size: 19px;
    font-weight: 500;
    color: #6e804a
}

.companion-day small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #a1a78e
}

.home-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap: 24px
}

.home-left {
    min-width: 0
}

.home-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start
}

.scene-card {
    height: 425px;
    position: relative;
    border-radius: 23px;
    overflow: hidden;
    border: 1px solid #dcdac5;
    background: #bdc49b;
    isolation: isolate
}

.scene-forest {
    position: absolute;
    inset: 0 0 36%
}

.scene-forest svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: brightness(.91) saturate(.8)
}

.scene-forest:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #bec69600 20%, #2a34132a)
}

.scene-ground {
    position: absolute;
    inset: 44% 0 0;
    background: radial-gradient(ellipse at 44% 70%, #e9e1b9 0, #d3d5a8 36%, #b8c38d 66%, #90a46b);
    box-shadow: 0 -25px 40px #bdc69b;
    transform: perspective(400px) rotateX(7deg);
    transform-origin: bottom
}

.scene-ground:after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .3;
    background: radial-gradient(ellipse at 12% 28%, #eff0c0 0 2px, transparent 3px), radial-gradient(ellipse at 72% 60%, #f8f0c4 0 2px, transparent 3px);
    background-size: 45px 36px, 63px 57px
}

.scene-top {
    position: absolute;
    top: 18px;
    left: 19px;
    right: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3
}

.scene-tag {
    background: #f8f8e9dc;
    color: #627146;
    font-size: 10px;
    padding: 7px 11px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(10px)
}

.scene-icon {
    width: 31px;
    height: 31px;
    border: 1px solid #f3f4de9c;
    background: #f4f4e3d9;
    border-radius: 50%;
    color: #839364
}

.scene-hello {
    position: absolute;
    top: 72px;
    left: 28px;
    color: #fffde9;
    text-shadow: 0 2px 14px #26371f45;
    z-index: 2
}

.scene-hello > span {
    font-size: 25px;
    display: block;
    font-weight: 550;
    letter-spacing: 2px
}

.scene-hello > small {
    font-size: 11px;
    display: block;
    margin-top: 7px;
    opacity: .85
}

.scene-speech {
    position: absolute;
    top: 139px;
    left: 49%;
    transform: translateX(-30%);
    min-width: 160px;
    max-width: 280px;
    background: #fffdf0f5;
    padding: 13px 21px;
    border-radius: 19px;
    color: #6e684d;
    font-size: 12px;
    line-height: 1.65;
    z-index: 7;
    box-shadow: 0 5px 10px #52592909;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.scene-speech:after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 30px;
    border: 8px solid transparent;
    border-left-color: #fffdf0f5;
    transform: rotate(13deg)
}

.scene-rug {
    position: absolute;
    left: 50%;
    bottom: 43px;
    transform: translateX(-50%);
    width: 58%;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #c4c997, #a9b581 66%, #d8d6aa 68%, #c8c798 76%, transparent 78%);
    box-shadow: 0 13px 18px #4d633219
}

.hero-character {
    position: absolute;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    width: 270px;
    height: 235px;
    z-index: 5
}

.character {
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: 50% 95%;
    animation: breathe 4s ease-in-out infinite;
    filter: drop-shadow(0 10px 5px #453a2217)
}

.character-art {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
}

.human-character {
    height: 100%;
    width: 100%;
    filter: drop-shadow(0 6px 4px #453a2220)
}

.custom-character {
    display: flex;
    justify-content: center;
    align-items: flex-end
}

.custom-character img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 15px;
    filter: drop-shadow(0 6px 8px #4b51331a)
}

.mood-curious {
    animation: curious 3.8s ease-in-out infinite
}

.mood-sleepy {
    animation: sleepy 5s ease-in-out infinite;
    transform-origin: 50% 100%
}

.mood-eating {
    animation: eating 1.7s ease-in-out infinite
}

.mood-listening {
    animation: listening 2.5s ease-in-out infinite
}

.grown-flower {
    position: absolute;
    width: 24%;
    height: 41%;
    left: 57%;
    top: -7%;
    filter: drop-shadow(0 2px 2px #685e2b12);
    transform: rotate(12deg);
    transform-origin: 25% 100%;
    animation: flower-sway 4s ease-in-out infinite
}

.grown-flower.flower-1 {
    left: 39%;
    top: -16%;
    transform: rotate(-20deg);
    width: 22%;
    animation-delay: -1s
}

.grown-flower.flower-2 {
    left: 72%;
    top: 4%;
    width: 18%;
    transform: rotate(32deg);
    animation-delay: -2s
}

.bud-stem {
    position: absolute;
    left: 61%;
    top: 3%;
    height: 54px;
    width: 24px;
    border-left: 4px solid #87a154;
    border-radius: 50%;
    transform: rotate(28deg)
}

.bud-stem i {
    position: absolute;
    left: -6px;
    top: -2px;
    width: 20px;
    height: 28px;
    border-radius: 75% 35% 70% 40%;
    background: linear-gradient(60deg, #84a154 15%, #e2cf7d 25%, #fff0bc 65%, #c0c979 82%);
    box-shadow: inset 2px 0 3px #7b8b3330
}

.human-sprout {
    position: absolute;
    right: 0;
    bottom: 5%;
    font-size: 30px
}

.scene-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #eef0dcce;
    backdrop-filter: blur(12px);
    height: 39px;
    padding: 0 19px;
    color: #718057;
    font-size: 10px;
    z-index: 10
}

.scene-bottom > span {
    display: flex;
    align-items: center;
    gap: 6px
}

.scene-bottom i {
    width: 5px;
    height: 5px;
    background: #799655;
    border-radius: 50%
}

.scene-bottom button {
    font-size: 10px;
    color: #73835b
}

.floating-leaf {
    position: absolute;
    z-index: 2;
    color: #e4eac6;
    opacity: .8;
    filter: drop-shadow(0 2px 3px #3d58213b)
}

.leaf-one {
    right: 13%;
    top: 57%;
    transform: rotate(30deg);
    animation: float 7s infinite
}

.leaf-two {
    left: 13%;
    bottom: 23%;
    transform: rotate(-20deg);
    animation: float 9s infinite
}

.scene-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px
}

.scene-actions > .btn {
    flex: 1;
    padding: 14px 16px
}

.quiet-action {
    font-size: 11px;
    color: #899477;
    padding: 8px 1px 8px 7px;
    white-space: nowrap
}

.quiet-action svg {
    margin-right: 4px
}

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow)
}

.wellbeing-card {
    padding: 20px 21px 14px
}

.card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px
}

.card-heading > div {
    display: flex;
    align-items: center;
    gap: 7px
}

.card-heading h2 {
    font-size: 14px
}

.text-btn {
    font-size: 10px;
    color: #9a9d86;
    display: inline-flex;
    gap: 3px;
    align-items: center;
    padding: 3px 0
}

.text-btn:hover {
    color: var(--green-dark)
}

.stats {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.stat > div:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px
}

.stat svg {
    width: 16px;
    height: 16px
}

.stat span {
    font-size: 10px;
    color: #7d856e
}

.stat strong {
    font-size: 12px;
    font-weight: 550;
    margin-left: auto;
    color: #738556
}

.stat strong small {
    font-size: 9px;
    margin-left: 3px;
    color: #b4b9a5
}

.track {
    height: 5px;
    background: #eeefe6;
    border-radius: 4px;
    overflow: hidden
}

.track i {
    display: block;
    background: #a2b970;
    height: 100%;
    border-radius: 4px;
    transition: width .8s
}

.stat.green {
    color: #8ca75a
}

.stat.pink {
    color: #d394a4
}

.stat.pink .track i {
    background: #dca4ad
}

.stat.amber {
    color: #cbb16b
}

.stat.amber .track i {
    background: #d8bf81
}

.growth-caption {
    font-size: 9px;
    color: #a3aa92;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px dashed #e6e9dc;
    display: flex;
    gap: 5px;
    align-items: center
}

.chat-card {
    padding: 18px 16px 10px;
    display: flex;
    flex-direction: column;
    min-height: 0
}

.chat-card .card-heading {
    padding: 0 3px;
    margin-bottom: 10px
}

.chat-card .card-heading > div > svg {
    color: #8b9b73;
    width: 18px
}

.subtle {
    color: #a5ab97;
    font-size: 10px
}

.tiny-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a3b575
}

.chat-messages {
    height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e3e8d6 transparent;
    padding: 8px 0 10px;
    min-height: 0
}

.message {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    margin-bottom: 10px
}

.message img {
    width: 25px;
    height: 25px
}

.message p {
    background: #f0f3e8;
    border-radius: 1px 12px 12px 12px;
    font-size: 11px;
    line-height: 1.9;
    padding: 10px 12px;
    max-width: 86%;
    white-space: pre-wrap;
    overflow-wrap: anywhere
}

.message.user {
    justify-content: flex-end
}

.message.user p {
    background: #e4ebd6;
    border-radius: 12px 1px 12px 12px;
    color: #5c6d40
}

.chat-suggestions {
    display: flex;
    gap: 6px;
    margin: 7px 0 10px;
    flex-wrap: wrap
}

.chat-suggestions button {
    font-size: 9px;
    color: #8b947a;
    background: #f8f9f2;
    border: 1px solid #eaeddf;
    border-radius: 20px;
    padding: 5px 8px
}

.chat-composer {
    display: flex;
    align-items: center;
    background: #f9f9f3;
    border: 1px solid #e6e9dc;
    border-radius: 12px;
    padding: 7px;
    gap: 3px
}

.chat-composer input {
    background: none;
    border: none;
    min-width: 0;
    flex: 1;
    font-size: 11px;
    padding: 5px 4px;
    color: #556345
}

.chat-composer input:focus {
    outline: 0
}

.chat-composer input::placeholder {
    color: #b0b6a1
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    color: #8d987d
}

.icon-btn:hover {
    background: #edf0e4
}

.send-btn {
    background: #7d9057;
    border-radius: 8px;
    color: #fff;
    width: 32px;
    height: 30px;
    flex-shrink: 0
}

.voice-caption {
    font-size: 8px;
    color: #afb5a0;
    text-align: center;
    margin-top: 7px;
    min-height: 12px
}

.listening {
    color: #d18a73;
    animation: pulse 1s infinite
}

.typing {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 10px;
    color: #9ba88a;
    padding: 8px 30px
}

.typing i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a2b580;
    animation: pulse 1s infinite
}

.typing i:nth-child(2) {
    animation-delay: .15s
}

.typing i:nth-child(3) {
    animation-delay: .3s
}

.typing span {
    margin-left: 5px
}

.memory-teaser {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 11px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #f1f2e7;
    padding: 14px 16px;
    color: #a3aa8c
}

.memory-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #e5e9d5;
    color: #859663;
    flex-shrink: 0
}

.memory-teaser > span:nth-child(2) {
    min-width: 0;
    flex: 1
}

.memory-teaser strong {
    display: block;
    font-size: 11px;
    font-weight: 550;
    color: #7c8966
}

.memory-teaser small {
    display: block;
    font-size: 9px;
    margin-top: 5px;
    color: #9da78b;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.demo-panel {
    background: linear-gradient(115deg, #f2f3e8, #f5f2e7);
    border: 1px solid #e4e7d4;
    border-radius: 20px;
    padding: 19px 20px 15px;
    margin-top: 21px
}

.demo-heading {
    display: flex;
    gap: 10px;
    align-items: center
}

.demo-emblem {
    height: 35px;
    width: 35px;
    border-radius: 11px;
    background: #e3e8cf;
    color: #829258;
    display: grid;
    place-items: center
}

.demo-heading h2 {
    font-size: 12px;
    color: #6c7955
}

.demo-heading p {
    font-size: 9px;
    color: #a0a58c;
    margin-top: 5px
}

.demo-label {
    font-size: 8px;
    letter-spacing: 1px;
    margin-left: auto;
    color: #b0a57f;
    border: 1px solid #e1ddc5;
    padding: 4px 6px;
    border-radius: 4px
}

.demo-steps {
    display: flex;
    justify-content: space-between;
    margin: 19px 0 13px;
    gap: 4px
}

.demo-steps button {
    font-size: 9px;
    color: #a4ab91;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    flex: 1;
    padding: 0;
    position: relative
}

.demo-steps button:after {
    content: '';
    height: 1px;
    background: #dce1cd;
    position: absolute;
    left: 70%;
    right: -25%;
    top: 10px
}

.demo-steps button:last-child:after {
    display: none
}

.demo-steps i {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid #d8dec6;
    border-radius: 50%;
    font-style: normal;
    font-size: 9px;
    color: #9ba785;
    background: #f6f7ef
}

.demo-steps button.active {
    color: #617542
}

.demo-steps button.active i {
    background: #81965a;
    border-color: #81965a;
    color: white;
    box-shadow: 0 0 0 4px #dfe7cf
}

.demo-progress {
    height: 3px;
    background: #e4e7d6;
    border-radius: 4px;
    overflow: hidden
}

.demo-progress i {
    display: block;
    height: 100%;
    background: #9bad78;
    transition: width .15s linear
}

.demo-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px
}

.demo-footer > span {
    font-size: 9px;
    color: #a0a58e;
    max-width: 65%;
    line-height: 1.5
}

.demo-footer > div {
    display: flex;
    gap: 3px
}

.demo-footer .btn {
    font-size: 9px;
    padding: 7px 9px
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 27px 0 16px
}

.section-title h2 {
    font-size: 15px
}

.section-title h2 small {
    color: #a3aa94;
    font-size: 11px;
    margin-left: 7px
}

.section-title a {
    font-size: 10px;
    color: #969f83;
    display: flex;
    gap: 5px;
    align-items: center
}

.activity-preview {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 17px
}

.activity-tile {
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: 17px;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 20px 17px;
    transition: .2s
}

.activity-tile:hover {
    transform: translateY(-3px)
}

.activity-illustration {
    width: 49px;
    height: 49px;
    border-radius: 15px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #ac9a6a;
    background: #f5eddb
}

.activity-tile strong {
    display: block;
    font-size: 11px;
    color: #6f785e;
    font-weight: 550
}

.activity-tile small {
    display: block;
    font-size: 9px;
    margin-top: 7px;
    color: #a2a893
}

.activity-tile > svg, .activity-tile > .soon-dot {
    margin-left: auto;
    color: #b1b79d
}

.soon-dot {
    font-size: 7px;
    letter-spacing: .7px;
    border: 1px solid #e7e9dc;
    padding: 3px 4px;
    border-radius: 3px
}

.chess .activity-illustration {
    background-color: #edf0e5;
    background-image: linear-gradient(#d2dbc1 1px, transparent 1px), linear-gradient(90deg, #d2dbc1 1px, transparent 1px);
    background-size: 13px 13px;
    position: relative
}

.chess-board i {
    width: 13px;
    height: 13px;
    background: #657a4c;
    border-radius: 50%;
    position: absolute;
    top: 13px;
    left: 12px;
    box-shadow: 1px 2px 2px #52673a25
}

.chess-board i + i {
    top: 25px;
    left: 25px;
    background: #fffdf5
}

.craft .activity-illustration {
    background: #f2ebe5;
    color: #c29f7c
}

.home-bottom {
    margin-top: 0
}

.site-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 40px 26px;
    max-width: 1580px;
    margin: auto;
    font-size: 9px;
    color: #acb19d
}

.site-footer button {
    font-size: 9px;
    color: #a0a88f;
    display: flex;
    align-items: center;
    gap: 5px
}

.meal-workspace {
    display: grid;
    grid-template-columns:1fr 290px;
    gap: 22px
}

.meal-invitation {
    padding: 35px;
    display: flex;
    gap: 32px;
    align-items: center;
    min-height: 280px
}

.meal-invitation h2 {
    font-size: 24px;
    letter-spacing: .6px;
    margin: 9px 0 14px
}

.meal-invitation p {
    font-size: 12px;
    line-height: 1.9;
    color: #909983;
    max-width: 350px
}

.meal-visual {
    flex-shrink: 0;
    width: 190px;
    height: 190px;
    background: #eff1e2;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.drawn-plate {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #fefcf2;
    box-shadow: inset 0 0 0 9px #fff, 0 8px 20px #67783b1a;
    font-size: 38px
}

.drawn-plate span:nth-child(2) {
    font-size: 45px
}

.button-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px
}

.sample-link {
    margin-top: 15px;
    color: #9c9d85
}

.meal-tip {
    background: #eff1e5;
    padding: 28px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #92a171
}

.meal-tip h3 {
    font-size: 15px;
    color: #6f7f54;
    margin: 18px 0 10px
}

.meal-tip p {
    font-size: 11px;
    line-height: 2;
    color: #949e81;
    margin-bottom: 20px
}

.meal-records {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px
}

.meal-record {
    overflow: hidden
}

.meal-record-image {
    height: 170px;
    background: #ecefde;
    position: relative;
    display: grid;
    place-items: center;
    font-size: 60px
}

.meal-record-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.meal-record-image small {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: #fffdf3d9;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 9px
}

.meal-record > div:last-child {
    padding: 20px
}

.meal-record > div > small {
    font-size: 10px;
    color: #a2aa92
}

.meal-record h3 {
    font-size: 14px;
    margin: 8px 0 12px
}

.meal-record p {
    font-size: 11px;
    color: #8b987a;
    line-height: 1.9;
    margin-top: 13px
}

.tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap
}

.tags span {
    font-size: 9px;
    padding: 4px 7px;
    border-radius: 5px;
    background: #edf1e3;
    color: #8a9b70
}

.empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 45px;
    text-align: center;
    border: 1px dashed #dce2cb;
    background: #f4f5eb99;
    border-radius: 22px;
    margin-top: 20px
}

.empty-state > span {
    background: #e9eddb;
    color: #9eaf7a;
    padding: 20px;
    border-radius: 50%;
    margin-bottom: 20px
}

.empty-state h3 {
    font-size: 16px;
    font-weight: 500;
    color: #7b8964
}

.empty-state p {
    font-size: 11px;
    color: #a0a88e;
    margin: 12px 0 24px;
    line-height: 1.9
}

.growth-layout {
    display: grid;
    grid-template-columns:1fr 390px;
    gap: 24px
}

.garden-stage {
    height: 390px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 45%, #f7f3d8, #e9edd9);
    display: flex;
    align-items: center;
    flex-direction: column
}

.garden-character {
    width: 270px;
    height: 235px;
    margin-top: 64px;
    position: relative;
    z-index: 3
}

.garden-current {
    position: absolute;
    top: 25px;
    font-size: 11px;
    color: #9eaa7f;
    padding: 6px 12px;
    background: #faffee88;
    border-radius: 20px;
    z-index: 2
}

.garden-stage > p {
    font-size: 11px;
    color: #9da782;
    position: absolute;
    bottom: 23px;
    z-index: 4
}

.garden-orbit {
    position: absolute;
    left: 50%;
    top: 57%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border: 1px solid #d8e0c4;
    border-radius: 50%
}

.orbit-2 {
    width: 430px;
    height: 430px;
    opacity: .5
}

.garden-settings {
    padding: 25px
}

.field-label {
    display: block;
    font-size: 11px;
    color: #858f71;
    margin: 21px 0 10px
}

.growth-stages {
    display: flex;
    gap: 7px
}

.growth-stages button {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    background: #f8f9f3;
    border: 1px solid #eaeddf;
    border-radius: 11px
}

.growth-stages button.selected {
    background: #eef3e2;
    border-color: #aabc86
}

.growth-stages span {
    font-size: 22px;
    margin-bottom: 8px
}

.growth-stages b {
    font-size: 11px;
    font-weight: 500;
    color: #829165
}

.growth-stages small {
    font-size: 8px;
    color: #a5ae92;
    margin-top: 4px
}

.color-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.color-options button {
    font-size: 10px;
    border: 1px solid #e7ebdb;
    padding: 7px 9px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #969e84
}

.color-options button.selected {
    border-color: #a3b57e;
    background: #f0f4e8
}

.color-options i {
    width: 13px;
    height: 13px;
    border-radius: 50%
}

.segmented {
    display: flex;
    background: #f1f3e8;
    padding: 4px;
    border-radius: 9px
}

.segmented button {
    flex: 1;
    padding: 7px;
    border-radius: 6px;
    font-size: 11px;
    color: #9da88b
}

.segmented button.active {
    background: #fffefa;
    box-shadow: 0 2px 6px #6171420a;
    color: #75875a
}

.field-hint {
    font-size: 10px;
    line-height: 1.9;
    color: #a0a78f;
    margin-top: 13px
}

.pill {
    font-size: 9px;
    padding: 4px 8px;
    background: #f0f1e7;
    border-radius: 5px;
    color: #a1a98e;
    font-weight: 400;
    display: inline-block
}

.story-card {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #f1eee2;
    border: 1px solid #e8e3d2;
    border-radius: 20px;
    padding: 30px 35px;
    margin-top: 25px;
    color: #a9af8f
}

.story-card h2 {
    color: #7e8566;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 12px
}

.story-card p {
    font-size: 11px;
    line-height: 2.1;
    color: #9d9f86;
    max-width: 850px
}

.memory-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 35px;
    border-radius: 21px;
    background: #edf0df;
    border: 1px solid #e3e8d2;
    margin-bottom: 25px;
    color: #a0af7d
}

.memory-banner h2 {
    color: #77895a;
    margin-bottom: 10px
}

.memory-banner p {
    color: #939f7e;
    font-size: 11px;
    line-height: 1.8
}

.memory-count {
    margin-left: auto;
    font-size: 32px;
    color: #82965e;
    text-align: center
}

.memory-count small {
    display: block;
    color: #a0ad88;
    font-size: 9px;
    margin-top: 3px;
    white-space: nowrap
}

.memory-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px
}

.memory-note {
    padding: 25px;
    border: 1px solid #e8e6d6;
    border-radius: 16px;
    background: #f7f2e3;
    min-height: 180px;
    color: #c0b183;
    box-shadow: 0 5px 10px #4f543307
}

.memory-note.note-1 {
    background: #f0f2e5;
    color: #9caf7a;
    border-color: #dfe6ce
}

.memory-note.note-2 {
    background: #f5ece7;
    color: #c6a08f;
    border-color: #eaded5
}

.memory-note > div {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.memory-note p {
    font-size: 14px;
    line-height: 2;
    color: #82856d;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 15px 0 20px
}

.memory-note small {
    font-size: 9px;
    color: #a9ac93
}

.activities-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 22px
}

.activity-big {
    border-radius: 23px;
    border: 1px solid var(--line);
    background: #fffdf7;
    padding: 27px;
    min-height: 350px;
    position: relative;
    overflow: hidden
}

.activity-big h2 {
    font-size: 21px;
    margin: 15px 0 13px
}

.activity-big p {
    font-size: 11px;
    line-height: 2;
    color: #98a086;
    margin-bottom: 22px
}

.activity-art {
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 66px;
    position: relative
}

.activity-art > i {
    font-style: normal;
    font-size: 45px;
    transform: translateY(13px) rotate(12deg)
}

.dining {
    background: #f7f2e4
}

.board-game {
    background: #eef1e7
}

.handcraft {
    background: #f4eee9
}

.available {
    background: #e8edd7;
    color: #8b9d64
}

.board-art {
    width: 120px;
    height: 100px;
    background-image: linear-gradient(#bdc8a7 1px, transparent 1px), linear-gradient(90deg, #bdc8a7 1px, transparent 1px);
    background-size: 23px 23px;
    margin: 20px auto 15px;
    transform: rotate(-12deg);
    border: 8px solid #d9e1c6;
    border-radius: 7px;
    background-color: #e8eedb;
    box-shadow: 8px 13px 15px #60734417
}

.board-art i, .board-art b, .board-art span {
    width: 21px;
    height: 21px;
    position: absolute;
    border-radius: 50%;
    background: #6e8353;
    left: 35px;
    top: 26px;
    box-shadow: 2px 3px 3px #65714525
}

.board-art b {
    background: #fffdf2;
    top: 48px;
    left: 58px
}

.board-art span {
    left: 58px;
    top: 5px
}

.craft-art {
    color: #bf9a7c;
    gap: 20px
}

.craft-art > span {
    transform: rotate(-20deg)
}

.craft-art > i {
    font-size: 75px;
    color: #d4b694
}

.familiar-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 27px;
    border: 1px solid #e1e5d4;
    border-radius: 23px;
    overflow: hidden;
    background: linear-gradient(110deg, #edf0e0, #f5f1e7);
    padding: 34px 45px;
    min-height: 245px
}

.familiar-banner h2 {
    font-size: 25px;
    margin: 10px 0 14px
}

.familiar-banner p {
    font-size: 11px;
    color: #949e82;
    margin: 0 0 24px;
    line-height: 1.9
}

.familiar-human {
    width: 155px;
    height: 210px;
    flex-shrink: 0;
    margin: 0 45px 0 25px
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%)
}

dialog {
    border: 1px solid #e3e8d5;
    border-radius: 24px;
    background: #fffef8;
    color: var(--ink);
    padding: 0;
    max-width: 760px;
    width: calc(100% - 40px);
    max-height: 90dvh;
    box-shadow: 0 25px 100px #34442320
}

dialog::backdrop {
    background: #28331c55;
    backdrop-filter: blur(5px)
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px 30px 21px;
    border-bottom: 1px solid #eaecdf
}

.modal-header h2 {
    font-size: 21px;
    font-weight: 550
}

.modal-header .eyebrow {
    font-size: 9px;
    margin-bottom: 8px
}

.modal-body {
    padding: 25px 30px 29px
}

.modal-intro {
    font-size: 12px;
    color: #9ba58b;
    margin-bottom: 23px
}

.character-options {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 15px
}

.character-option {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #e7e9db;
    border-radius: 17px;
    background: #f8f8f0;
    padding: 15px 10px 18px;
    position: relative
}

.character-option.selected {
    border: 1.5px solid #95a974;
    background: #edf2e1;
    box-shadow: 0 0 0 3px #b9c79411
}

.character-choice-art {
    width: 155px;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px
}

.character-choice-art .human-character {
    width: 91px
}

.character-choice-art img {
    max-width: 130px;
    max-height: 140px;
    object-fit: contain;
    border-radius: 9px
}

.character-option strong {
    font-size: 14px;
    font-weight: 550;
    margin-top: 8px;
    color: #7c8d5f
}

.character-option small {
    font-size: 9px;
    color: #9ca68b;
    margin-top: 7px
}

.upload-option {
    border-style: dashed;
    color: #a1ae89
}

.selected-mark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #91a568;
    color: white;
    display: grid;
    place-items: center
}

.settings-section {
    border-bottom: 1px solid #e8ebdd;
    padding-bottom: 23px;
    margin-bottom: 24px
}

.settings-section h3 {
    font-size: 14px;
    font-weight: 550;
    color: #6a7d4d;
    margin-bottom: 16px
}

.settings-section .pill {
    margin-left: 5px
}

.personality-options {
    display: flex;
    gap: 10px
}

.personality-options label {
    flex: 1;
    cursor: pointer
}

.personality-options input {
    position: absolute;
    opacity: 0
}

.personality-options span {
    display: block;
    text-align: center;
    padding: 12px;
    border: 1px solid #e4e8d7;
    border-radius: 10px;
    font-size: 11px;
    color: #96a281;
    background: #f7f8f0
}

.personality-options input:checked + span {
    border-color: #9caf7c;
    background: #eaf0dd;
    color: #6f8550
}

.personality-options input:focus-visible + span {
    outline: 2px solid #aabc75
}

.toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #859471;
    margin-top: 18px;
    gap: 12px
}

.toggle-label small {
    display: block;
    font-size: 9px;
    color: #a9b095;
    margin-top: 5px
}

.toggle-label input {
    accent-color: #839a5e;
    width: 17px;
    height: 17px
}

.range-label {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 11px;
    color: #919d7d;
    margin-top: 15px
}

.range-label input {
    flex: 1;
    accent-color: #8a9e67;
    min-width: 0
}

.range-label output {
    font-size: 11px;
    width: 40px
}

.number-fields {
    display: flex;
    gap: 15px;
    margin-top: 18px
}

.number-fields label {
    flex: 1;
    font-size: 10px;
    color: #9da68d
}

.number-fields input {
    display: block;
    margin-top: 6px;
    width: 100%
}

input[type=text], input[type=number], textarea {
    background: #fafbf5;
    border: 1px solid #e0e7d3;
    border-radius: 9px;
    padding: 11px 12px;
    color: #738459;
    font-size: 12px
}

input[type=text], textarea {
    width: 100%
}

textarea {
    min-height: 100px;
    resize: vertical;
    line-height: 1.8
}

input::placeholder, textarea::placeholder {
    color: #b2b9a2
}

.settings-footer {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.danger {
    color: #bd8e7f
}

.danger-button {
    background: #b58373;
    color: white
}

.meal-modal-grid {
    display: grid;
    grid-template-columns:1fr 1.15fr;
    gap: 25px
}

.meal-photo {
    min-height: 260px;
    max-height: 350px;
    background: #f0f3e5;
    border: 1px dashed #dbe3ca;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: #a7b68c
}

.meal-photo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.meal-photo > div:not(.photo-actions) {
    text-align: center
}

.meal-photo p {
    font-size: 11px;
    margin-top: 15px
}

.photo-actions {
    position: absolute;
    bottom: 13px;
    left: 0;
    right: 0;
    display: flex;
    gap: 9px;
    justify-content: center
}

.food-checks {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.food-checks label {
    position: relative;
    cursor: pointer
}

.food-checks input {
    position: absolute;
    opacity: 0
}

.food-checks span {
    display: block;
    padding: 7px 9px;
    border: 1px solid #e2e8d5;
    border-radius: 8px;
    color: #9eaa8b;
    font-size: 10px
}

.food-checks input:checked + span {
    border-color: #9eaf7c;
    background: #edf2e1;
    color: #6e8650
}

.food-checks input:focus-visible + span {
    outline: 2px solid #aabc75
}

.meal-modal-grid .field-label:first-child {
    margin-top: 0
}

.camera-preview {
    background: #263124;
    border-radius: 17px;
    min-height: 260px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.camera-preview video {
    display: block;
    width: 100%;
    max-height: 430px;
    min-height: 260px;
    object-fit: cover
}

.camera-preview p {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 20px;
    padding: 10px;
    border-radius: 9px;
    background: #f7faefd9;
    backdrop-filter: blur(5px);
    color: #617a49;
    font-size: 11px;
    text-align: center;
    line-height: 1.8
}

.analysis-result {
    font-size: 11px;
    color: #869a6e;
    line-height: 1.9;
    white-space: pre-wrap;
    margin-top: 12px
}

.modal-end {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px
}

.coming-preview {
    text-align: center;
    padding: 24px
}

.coming-preview > span {
    color: #a1b383
}

.coming-preview h3 {
    font-size: 19px;
    margin: 25px 0 15px
}

.coming-preview p {
    font-size: 12px;
    color: #99a386;
    line-height: 2;
    max-width: 430px;
    margin: 0 auto 30px
}

.capability-list p {
    font-size: 12px;
    color: #9aa388;
    line-height: 2;
    margin-bottom: 20px
}

.capability-list b {
    color: #728857;
    font-weight: 550
}

.capability-list p:last-child {
    margin: 0
}

#toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 20px);
    background: #3e5035f5;
    color: #f5f8ec;
    padding: 13px 23px;
    font-size: 12px;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
    transition: .25s;
    max-width: calc(100% - 30px);
    line-height: 1.8;
    box-shadow: 0 6px 20px #22301d26;
    text-align: center
}

#toast.visible {
    opacity: 1;
    transform: translate(-50%, 0)
}

.projection-body {
    background: #000 !important;
    overflow: hidden;
    width: 100vw;
    height: 100dvh;
    color: #fff
}

.projection-body #projection-root {
    position: absolute;
    width: 510px;
    height: 300px;
    transform-origin: top left
}

.projection-scene {
    position: relative;
    width: 510px;
    height: 300px
}

.projection-character {
    position: absolute;
    width: 204px;
    height: 177px;
    top: 38px;
    left: 0;
    z-index: 2
}

.projection-character .human-character {
    width: 125px;
    height: 195px;
    margin-left: 28px;
    transform: translateY(-20px)
}

.projection-rug {
    position: absolute;
    top: 183px;
    left: 0;
    width: 220px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #7b8e40 0, #657b32 57%, #b5b27b 60%, #9b9e64 64%, #000 67%);
    opacity: .8
}

.projection-bubble {
    position: absolute;
    left: 215px;
    top: 37px;
    max-width: 270px;
    min-width: 130px;
    border-radius: 18px 18px 18px 3px;
    background: #fff5d7;
    color: #6e593a;
    padding: 16px 19px;
    font-size: 15px;
    line-height: 1.8;
    box-shadow: 0 0 10px #e2c76716;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.projection-stats {
    position: absolute;
    left: 12px;
    top: 242px;
    width: 210px;
    display: flex;
    gap: 8px
}

.projection-stats[hidden] {
    display: none
}

.mini-stat {
    flex: 1;
    color: #9aaf77;
    font-size: 8px;
    min-width: 0
}

.mini-stat > span {
    display: block;
    margin-bottom: 5px
}

.mini-stat i {
    height: 3px;
    display: block;
    background: #25321d;
    border-radius: 2px
}

.mini-stat b {
    height: 100%;
    display: block;
    background: #b7c67c;
    border-radius: 2px;
    transition: width .5s
}

.mini-stat.pink {
    color: #cba6ac
}

.mini-stat.pink b {
    background: #d8a1b0
}

.mini-stat.amber {
    color: #c1ad72
}

.mini-stat.amber b {
    background: #d7bb70
}

.projection-tools {
    position: fixed;
    right: 20px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #65735a;
    font-size: 10px;
    opacity: 0;
    transition: opacity .3s;
    background: #11170e;
    padding: 10px;
    border-radius: 8px
}

.projection-tools:hover, .projection-tools:focus-within {
    opacity: 1
}

.projection-tools button, .projection-tools a {
    font-size: 10px;
    color: #929f7c;
    padding: 4px
}

.projection-tools:hover {
    opacity: 1
}

@keyframes breathe {
    0%, 100% {
        transform: translateY(0) scale(1)
    }
    50% {
        transform: translateY(-5px) scale(1.015, 1.025)
    }
}

@keyframes curious {
    0%, 100% {
        transform: rotate(0)
    }
    45%, 65% {
        transform: rotate(-5deg) translateY(-3px)
    }
}

@keyframes sleepy {
    0%, 100% {
        transform: scale(1.04, .89) translateY(9px) rotate(-3deg)
    }
    50% {
        transform: scale(1.05, .91) translateY(8px) rotate(-3deg)
    }
}

@keyframes eating {
    0%, 100% {
        transform: translateY(0) rotate(0)
    }
    50% {
        transform: translateY(3px) rotate(2deg)
    }
}

@keyframes listening {
    0%, 100% {
        transform: rotate(-3deg)
    }
    50% {
        transform: rotate(1deg)
    }
}

@keyframes flower-sway {
    0%, 100% {
        rotate: -3deg
    }
    50% {
        rotate: 4deg
    }
}

@keyframes float {
    0%, 100% {
        translate: 0 0
    }
    50% {
        translate: 5px -9px
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .35
    }
}

@media (min-width: 1600px) {
    .scene-card {
        height: 475px
    }

    .hero-character {
        width: 310px;
        height: 270px;
        bottom: 57px
    }

    .scene-speech {
        top: 150px
    }

    .chat-card {
        min-height: 0
    }

    .chat-messages {
        height: 220px
    }
}

@media (max-width: 1230px) {
    .sidebar {
        width: 178px;
        padding: 28px 13px 20px
    }

    .workspace {
        margin-left: 178px
    }

    .topbar {
        padding: 0 25px
    }

    .top-actions {
        gap: 8px
    }

    #main {
        padding: 25px 25px 20px
    }

    .home-grid {
        grid-template-columns:minmax(0, 1fr) 300px;
        gap: 18px
    }

    .scene-card {
        height: 405px
    }

    .hero-character {
        width: 245px;
        height: 213px
    }

    .scene-speech {
        max-width: 240px;
        left: 43%;
        font-size: 11px
    }

    .scene-hello > span {
        font-size: 22px
    }

    .scene-hello {
        left: 23px
    }

    .quiet-action {
        font-size: 10px
    }

    .btn {
        padding: 12px 15px
    }

    .activity-tile {
        padding: 17px 12px;
        gap: 9px
    }

    .activity-illustration {
        width: 39px;
        height: 42px
    }

    .activity-tile strong {
        font-size: 10px
    }

    .activity-tile .soon-dot {
        display: none
    }

    .meal-workspace {
        grid-template-columns:1fr 230px
    }

    .meal-invitation {
        padding: 25px;
        gap: 20px
    }

    .meal-visual {
        width: 130px;
        height: 130px
    }

    .drawn-plate {
        width: 110px;
        height: 110px;
        font-size: 26px
    }

    .drawn-plate span:nth-child(2) {
        font-size: 30px
    }

    .meal-invitation h2 {
        font-size: 20px
    }

    .growth-layout {
        grid-template-columns:1fr 340px
    }

    .familiar-banner {
        padding: 30px
    }

    .familiar-human {
        margin-right: 10px
    }

    .site-footer {
        padding: 12px 25px 25px
    }

    .activity-big {
        padding: 23px
    }

    .activity-big h2 {
        font-size: 18px
    }

    .demo-panel {
        padding: 18px 15px 14px
    }
}

@media (max-width: 1050px) and (min-width: 761px) {
    .sidebar {
        width: 75px;
        padding: 25px 10px
    }

    .brand {
        padding: 0;
        justify-content: center
    }

    .brand img {
        width: 42px
    }

    .brand > span, .nav-caption, .sidebar-note, .sidebar nav a > span, .sidebar-bottom button > span, .sidebar-bottom button svg:last-child {
        display: none
    }

    .sidebar nav {
        margin-top: 45px
    }

    .sidebar nav a {
        padding: 15px;
        justify-content: center
    }

    .sidebar-bottom {
        margin-top: auto
    }

    .sidebar-bottom button {
        padding: 16px;
        justify-content: center
    }

    .workspace {
        margin-left: 75px
    }

    .top-actions .mode-badge {
        display: none
    }

    .home-grid {
        grid-template-columns:minmax(0, 1fr) 290px
    }

    .page-heading h1 {
        font-size: 26px
    }

    .companion-day {
        padding-right: 0
    }

    .scene-actions {
        gap: 8px
    }

    .quiet-action {
        font-size: 0
    }

    .quiet-action svg {
        width: 22px;
        height: 22px
    }

    .meal-workspace {
        grid-template-columns:1fr
    }

    .meal-tip {
        display: none
    }

    .growth-layout {
        grid-template-columns:1fr 320px
    }

    .activities-grid {
        gap: 13px
    }

    .activity-big {
        padding: 20px
    }

    .familiar-banner h2 {
        font-size: 23px
    }
}

@media (max-width: 760px) {
    :root {
        font-size: 14px
    }

    .sidebar {
        display: none
    }

    .workspace {
        margin-left: 0
    }

    .topbar {
        height: 68px;
        padding: 0 19px;
        background: #f6f7ee;
        position: sticky;
        top: 0;
        z-index: 30
    }

    .breadcrumb {
        display: none
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 22px;
        letter-spacing: 2px;
        font-weight: 650
    }

    .mobile-brand img {
        width: 35px;
        height: 35px
    }

    .top-actions {
        gap: 8px
    }

    .top-actions .mode-badge {
        display: none
    }

    .top-actions > .dark {
        font-size: 0;
        padding: 9px;
        border-radius: 9px
    }

    .top-actions > .dark svg {
        width: 19px;
        height: 19px
    }

    .top-actions .demo-top {
        font-size: 10px;
        padding: 8px 10px
    }

    .avatar-button img {
        width: 30px;
        height: 30px
    }

    #main {
        padding: 24px 19px 15px
    }

    .page-heading {
        margin-bottom: 20px;
        gap: 8px
    }

    .page-heading h1 {
        font-size: 24px;
        letter-spacing: .3px
    }

    .page-heading .eyebrow {
        font-size: 9px;
        letter-spacing: 0
    }

    .page-heading > div > p {
        font-size: 10px;
        margin-top: 7px
    }

    .page-heading > .btn {
        padding: 9px 11px;
        font-size: 10px
    }

    .page-heading > .btn svg {
        width: 15px
    }

    .companion-day {
        display: none
    }

    .home-grid {
        display: flex;
        flex-direction: column;
        gap: 19px
    }

    .scene-card {
        height: 390px;
        border-radius: 20px
    }

    .hero-character {
        width: 245px;
        height: 213px;
        bottom: 53px
    }

    .scene-hello {
        left: 22px;
        top: 70px
    }

    .scene-hello > span {
        font-size: 24px
    }

    .scene-hello > small {
        font-size: 10px
    }

    .scene-speech {
        top: 133px;
        left: 47%;
        font-size: 11px;
        max-width: 220px;
        padding: 11px 17px;
        min-width: 145px
    }

    .scene-rug {
        width: 67%;
        height: 67px;
        bottom: 47px
    }

    .scene-actions {
        gap: 9px;
        margin-top: 13px
    }

    .scene-actions > .btn {
        font-size: 11px;
        padding: 13px 10px
    }

    .quiet-action {
        font-size: 0;
        padding: 9px
    }

    .quiet-action svg {
        font-size: 18px;
        margin: 0
    }

    .home-right {
        gap: 15px
    }

    .wellbeing-card {
        padding: 18px 18px 12px
    }

    .wellbeing-card .stats {
        flex-direction: row;
        gap: 17px
    }

    .stat {
        flex: 1;
        min-width: 0
    }

    .stat > div:first-child {
        gap: 4px;
        flex-wrap: wrap
    }

    .stat span {
        font-size: 9px
    }

    .stat strong {
        font-size: 11px
    }

    .stat strong small {
        display: none
    }

    .stat svg {
        width: 12px;
        height: 12px
    }

    .wellbeing-card .card-heading {
        margin-bottom: 16px
    }

    .growth-caption {
        font-size: 8px;
        margin-top: 12px;
        padding-top: 11px
    }

    .chat-card {
        min-height: 0;
        padding: 19px 17px 12px
    }

    .chat-card .card-heading h2 {
        font-size: 15px
    }

    .message p {
        font-size: 12px
    }

    .chat-messages {
        max-height: 250px;
        min-height: 170px
    }

    .chat-composer input {
        font-size: 12px
    }

    .chat-suggestions button {
        font-size: 10px
    }

    .voice-caption {
        font-size: 9px
    }

    .memory-teaser {
        padding: 15px
    }

    .memory-teaser strong {
        font-size: 12px
    }

    .memory-teaser small {
        font-size: 10px
    }

    .demo-panel {
        margin-top: 17px;
        padding: 17px 14px 14px
    }

    .demo-heading {
        gap: 8px
    }

    .demo-heading h2 {
        font-size: 12px
    }

    .demo-heading p {
        font-size: 9px
    }

    .demo-label {
        font-size: 7px;
        padding: 4px
    }

    .demo-steps {
        gap: 2px;
        margin-top: 18px
    }

    .demo-steps button {
        font-size: 8px;
        white-space: nowrap
    }

    .demo-steps button:after {
        left: 73%;
        right: -18%
    }

    .demo-footer > span {
        font-size: 8px;
        max-width: 58%
    }

    .demo-footer .btn {
        font-size: 9px;
        padding: 7px 8px
    }

    .demo-footer .btn svg {
        width: 13px
    }

    .activity-preview {
        grid-template-columns:1fr;
        gap: 11px
    }

    .activity-tile {
        padding: 16px 18px;
        gap: 15px
    }

    .activity-illustration {
        width: 43px;
        height: 43px
    }

    .activity-tile strong {
        font-size: 12px
    }

    .activity-tile small {
        font-size: 10px
    }

    .activity-tile .soon-dot {
        display: block
    }

    .section-title {
        margin: 25px 0 15px
    }

    .section-title h2 {
        font-size: 15px
    }

    .site-footer {
        padding: 20px 20px 98px;
        font-size: 9px
    }

    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: #fbfcf5f5;
        backdrop-filter: blur(18px);
        border-top: 1px solid #e4e8d8;
        padding: 11px 10px calc(10px + env(safe-area-inset-bottom));
        box-shadow: 0 -5px 15px #53643103
    }

    .mobile-nav a {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-direction: column;
        color: #a7ae98;
        min-width: 45px;
        font-size: 9px
    }

    .mobile-nav a.active {
        color: #6d8548;
        font-weight: 550
    }

    .mobile-nav a svg {
        width: 22px;
        height: 22px
    }

    .mobile-nav a.active:before {
        content: '';
        position: absolute;
        top: 0;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: #91a66d
    }

    .meal-workspace {
        grid-template-columns:1fr;
        gap: 15px
    }

    .meal-invitation {
        flex-direction: column;
        padding: 27px;
        text-align: center;
        gap: 20px
    }

    .meal-invitation .eyebrow {
        justify-content: center
    }

    .meal-invitation h2 {
        font-size: 22px
    }

    .meal-invitation p {
        font-size: 11px
    }

    .meal-invitation .button-row {
        justify-content: center
    }

    .meal-visual {
        width: 135px;
        height: 135px
    }

    .drawn-plate {
        width: 110px;
        height: 110px;
        font-size: 30px
    }

    .drawn-plate span:nth-child(2) {
        font-size: 33px
    }

    .meal-tip {
        padding: 24px;
        display: block
    }

    .meal-tip > span {
        float: left;
        margin-right: 13px
    }

    .meal-tip h3 {
        margin: 0 0 11px;
        font-size: 13px
    }

    .meal-tip p {
        font-size: 10px;
        margin-bottom: 10px
    }

    .meal-records {
        grid-template-columns:1fr
    }

    .meal-record {
        display: grid;
        grid-template-columns:110px 1fr
    }

    .meal-record-image {
        height: 100%;
        min-height: 180px
    }

    .meal-record > div:last-child {
        padding: 17px
    }

    .meal-record h3 {
        font-size: 13px
    }

    .meal-record p {
        font-size: 10px
    }

    .growth-layout {
        grid-template-columns:1fr;
        gap: 17px
    }

    .garden-stage {
        height: 345px
    }

    .garden-character {
        margin-top: 59px;
        width: 235px;
        height: 204px
    }

    .garden-settings {
        padding: 22px
    }

    .story-card {
        padding: 23px;
        gap: 16px;
        align-items: flex-start
    }

    .story-card > span > svg {
        width: 27px;
        height: 27px
    }

    .story-card h2 {
        font-size: 17px;
        line-height: 1.7
    }

    .story-card p {
        font-size: 10px
    }

    .memory-banner {
        padding: 22px 19px;
        gap: 12px
    }

    .memory-banner > span > svg {
        width: 24px;
        height: 24px
    }

    .memory-banner h2 {
        font-size: 14px
    }

    .memory-banner p {
        font-size: 10px
    }

    .memory-count {
        font-size: 25px
    }

    .memory-count small {
        font-size: 8px
    }

    .memory-grid {
        grid-template-columns:1fr;
        gap: 14px
    }

    .memory-note {
        min-height: 150px;
        padding: 23px
    }

    .empty-state {
        padding: 35px 20px
    }

    .empty-state h3 {
        font-size: 15px
    }

    .activities-grid {
        grid-template-columns:1fr;
        gap: 17px
    }

    .activity-big {
        padding: 27px;
        min-height: 280px
    }

    .activity-art {
        height: 100px;
        position: absolute;
        right: 26px;
        top: 30px;
        width: 110px;
        opacity: .85;
        font-size: 45px
    }

    .activity-big h2 {
        font-size: 22px;
        margin-top: 24px
    }

    .activity-big p {
        font-size: 11px;
        position: relative;
        z-index: 2
    }

    .activity-big .pill {
        margin-bottom: 5px
    }

    .activity-big .activity-art + .pill {
        max-width: 100px
    }

    .board-art {
        margin: 0;
        width: 100px;
        height: 90px;
        right: 28px;
        top: 40px;
        opacity: .45
    }

    .craft-art {
        font-size: 50px;
        gap: 8px;
        opacity: .45
    }

    .craft-art > i {
        font-size: 60px
    }

    .familiar-banner {
        padding: 25px;
        position: relative;
        min-height: 300px;
        align-items: flex-start
    }

    .familiar-banner > div:first-child {
        max-width: 75%;
        position: relative;
        z-index: 2
    }

    .familiar-banner h2 {
        font-size: 21px;
        line-height: 1.5
    }

    .familiar-banner p {
        font-size: 10px;
        max-width: 195px
    }

    .familiar-human {
        width: 105px;
        height: 165px;
        position: absolute;
        right: 0;
        bottom: 20px;
        margin: 0
    }

    .familiar-banner .eyebrow {
        font-size: 8px;
        line-height: 1.9
    }

    .familiar-banner .btn {
        font-size: 11px
    }

    dialog {
        width: calc(100% - 22px);
        border-radius: 20px;
        max-height: 92dvh
    }

    .modal-header {
        padding: 21px 20px 17px
    }

    .modal-header h2 {
        font-size: 18px;
        line-height: 1.5
    }

    .modal-body {
        padding: 21px 20px 24px
    }

    .modal-intro {
        font-size: 11px
    }

    .character-options {
        gap: 8px
    }

    .character-option {
        padding: 12px 5px
    }

    .character-choice-art {
        width: 90px;
        height: 100px;
        margin: 0
    }

    .character-choice-art .human-character {
        width: 62px
    }

    .character-choice-art img {
        max-width: 80px;
        max-height: 95px
    }

    .character-option strong {
        font-size: 12px
    }

    .character-option small {
        font-size: 8px;
        text-align: center;
        line-height: 1.7;
        min-height: 27px
    }

    .selected-mark {
        width: 18px;
        height: 18px;
        right: 6px;
        top: 6px
    }

    .selected-mark svg {
        width: 12px;
        height: 12px
    }

    .modal-intro {
        margin-bottom: 18px
    }

    .meal-modal-grid {
        grid-template-columns:1fr;
        gap: 22px
    }

    .meal-photo {
        min-height: 190px;
        max-height: 230px
    }

    .meal-modal-grid .button-row {
        justify-content: flex-end
    }

    .personality-options {
        gap: 6px
    }

    .personality-options span {
        font-size: 10px;
        padding: 11px 5px
    }

    .settings-section h3 {
        font-size: 13px
    }

    .range-label {
        gap: 10px
    }

    .field-hint {
        font-size: 10px
    }

    .coming-preview {
        padding: 20px 5px
    }

    .coming-preview h3 {
        font-size: 17px
    }

    .coming-preview p {
        font-size: 11px
    }

    .capability-list p {
        font-size: 11px
    }

    #toast {
        bottom: 90px;
        width: max-content;
        max-width: calc(100% - 25px);
        font-size: 11px;
        padding: 11px 15px
    }

    .projection-tools {
        font-size: 8px;
        right: 10px;
        bottom: 10px
    }

    .projection-tools span {
        display: none
    }

    .projection-tools a, .projection-tools button {
        font-size: 9px
    }
}

.scene-meal-card {
    position: absolute;
    bottom: 65px;
    left: 18px;
    width: 112px;
    padding: 5px;
    background: #fffdf0e8;
    border-radius: 11px;
    z-index: 6;
    transform: rotate(-6deg);
    box-shadow: 0 5px 18px #53683120
}

.scene-meal-card svg {
    width: 100%;
    height: 58px;
    display: block;
    overflow: hidden;
    border-radius: 7px
}

.scene-meal-card small {
    display: block;
    color: #839265;
    font-size: 7px;
    text-align: center;
    margin: 6px 0 2px
}

.scene-card.is-meal .hero-character {
    left: 59%
}

.scene-ground {
    border-radius: 55% 55% 0 0/14% 14% 0 0
}

.scene-speech {
    top: 118px
}

.hero-character {
    bottom: 48px
}

.human-character .character-art {
    overflow: visible
}

@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after {
        animation: none !important;
        scroll-behavior: auto !important;
        transition: none !important
    }
}

.chess-embed {
    height: calc(100dvh - 85px);
    margin: -30px -40px -20px;
    overflow: hidden
}

.chess-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block
}

@media (max-width: 1230px) {
    .chess-embed {
        margin: -25px -25px -20px
    }
}

@media (max-width: 760px) {
    .chess-embed {
        height: calc(100dvh - 68px - 65px);
        margin: -24px -19px -15px
    }
}

.live-top {
    padding: 10px 12px;
    font-size: 11px
}

.live-dialog {
    width: min(820px, calc(100% - 28px));
    color: var(--ink);
    background: var(--paper)
}

.live-intro {
    font-size: 13px;
    color: #858f73;
    margin-bottom: 20px
}

.live-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: #eef2e5;
    border: 1px solid #e0e8ce;
    border-radius: 15px;
    margin-bottom: 20px
}

.live-status > i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a5b187;
    flex-shrink: 0
}

.live-status[data-mode="observing"] > i, .live-status[data-mode="speaking"] > i {
    background: #719447;
    box-shadow: 0 0 0 5px #87a75a19
}

.live-status strong {
    font-size: 13px
}

.live-status p {
    font-size: 11px;
    color: #858f73;
    line-height: 1.7;
    margin-top: 3px;
    overflow-wrap: anywhere
}

.live-grid {
    display: grid;
    grid-template-columns:1.3fr 1fr;
    gap: 24px
}

.live-camera {
    position: relative;
    aspect-ratio: 4/3;
    background: #30382b;
    border-radius: 15px;
    overflow: hidden
}

.live-camera video {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.live-camera > span {
    position: absolute;
    bottom: 10px;
    left: 12px;
    color: #e0e7cd;
    font-size: 10px;
    background: #24301acc;
    padding: 5px 9px;
    border-radius: 7px
}

.live-fields .field-label:first-child {
    margin-top: 0
}

.live-fields select, .live-dialog input {
    width: 100%;
    border: 1px solid #e1e5d7;
    border-radius: 9px;
    background: #fbfcf6;
    padding: 10px;
    color: #556348;
    font: inherit;
    font-size: 12px
}

.live-fields select:focus-visible {
    outline: 2px solid #9aaf71
}

.live-fields .text-btn {
    font-size: 10px;
    margin-top: 5px
}

.live-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
    font-size: 10px;
    color: #929c80;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecdf
}

.live-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 19px
}

.live-actions .btn {
    padding: 11px 15px
}

.live-hint {
    font-size: 10px;
    line-height: 1.9;
    color: #949c86;
    margin: 12px 0 16px
}

.live-chat {
    display: flex;
    gap: 8px
}

.live-chat input {
    min-width: 0
}

.live-chat .btn {
    flex-shrink: 0
}

.live-error {
    font-size: 11px;
    color: #ad684c;
    line-height: 1.8;
    margin-top: 10px;
    overflow-wrap: anywhere;
    white-space: pre-wrap
}

.live-connection {
    border-top: 1px solid #e4e8d9;
    margin-top: 17px;
    padding-top: 17px
}

.live-connection summary {
    cursor: pointer;
    font-size: 12px;
    color: #6f7e56
}

.live-connection .button-row {
    margin-top: 14px
}

.live-guide-link {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #829266;
    font-size: 11px;
    margin-top: 22px
}

.live-guide-link:hover {
    text-decoration: underline
}

#projection-live-status {
    position: absolute;
    top: 280px;
    left: 12px;
    color: #869a69;
    font-size: 10px;
    max-width: 470px
}

.projection-tools {
    opacity: .8;
    z-index: 20;
    max-width: calc(100% - 24px);
    flex-wrap: wrap
}

.live-running.projection-body .projection-tools {
    opacity: 0
}

.live-running.projection-body .projection-tools:hover, .live-running.projection-body .projection-tools:focus-within {
    opacity: 1
}

.projection-body dialog {
    color: var(--ink)
}

.animated-character {
    animation: none !important
}

.animated-character img, .animated-character video {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.motion-thinking {
    animation: curious 2s ease-in-out infinite
}

.motion-speaking {
    animation: eating .8s ease-in-out infinite
}

.motion-listening {
    animation: listening 2s ease-in-out infinite
}

@media (max-width: 1000px) {
    .top-actions {
        gap: 7px
    }

    .top-actions .live-top {
        padding: 9px;
        font-size: 0
    }

    .top-actions .live-top svg {
        width: 18px;
        height: 18px
    }
}

@media (max-width: 600px) {
    .live-grid {
        grid-template-columns:1fr;
        gap: 15px
    }

    .live-camera {
        max-height: 200px
    }

    .live-fields {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: 8px 12px
    }

    .live-fields > label, .live-fields > .field-hint {
        grid-column: 1/-1
    }

    .live-fields input, .live-fields select {
        grid-column: 1/-1
    }

    .live-fields .field-label {
        margin: 8px 0 0
    }

    .live-dialog .modal-body {
        padding: 18px
    }

    .live-actions .btn {
        padding: 10px 11px;
        font-size: 11px
    }

    .live-status {
        padding: 12px
    }

    .live-metrics {
        gap: 12px
    }

    .projection-tools > span {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .motion-speaking, .motion-thinking, .motion-listening {
        animation: none
    }
}

.live-camera #live-camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 13px;
    color: #9aab86;
    pointer-events: none
}

.live-camera #live-camera-placeholder[hidden] {
    display: none
}

.live-camera #live-camera-placeholder p {
    font-size: 11px
}

.live-error:not(:empty) {
    padding: 10px 13px;
    background: #fbf0e6;
    border-radius: 9px;
    margin: 0 0 16px
}

.live-dialog .modal-header {
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 2
}

.live-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0
}

.live-header-actions .btn {
    padding: 6px 10px;
    font-size: 10px;
    border-radius: 8px
}

.live-header-actions .icon-btn {
    margin-left: 2px
}