/* Nimba · quiet typography, tactile character, scroll-led storytelling. */
:root {
    --bg:#f5f4f7;
    --bg-deep:#f5f4f7;
    --bg2:#efedf3;
    --ink:#222127;
    --ink2:#6b6775;
    --ink3:#817b8d;
    --accent:#7561a5;
    --accent2:#60498f;
    --accent-ink:#fff;
    --line:#dedbe4;
    --line2:#cec8d9;
    --card:#fff;
    --good:#497c68;
    --think:#8b6fa9;
    --talk:#8970ba;
    --danger:#af4960;
    --ease:cubic-bezier(.22,1,.36,1);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    color:var(--ink);
    background:var(--bg);
    font-synthesis:none
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    overflow:hidden
}

button,input,select {
    font:inherit
}

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

button {
    cursor:pointer;
    color:inherit
}

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

button,a {
    touch-action:manipulation
}

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

button {
    border:0
}

img {
    max-width:100%;
    display:block
}

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

h1,h2,h3 {
    font-weight:650
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
    outline:3px solid #9b81c4;
    outline-offset:5px
}

.hidden {
    display:none!important
}

[hidden] { display:none!important }

.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}

.muted {
    color:var(--ink2)
}

.eyebrow {
    font-size:10px;
    font-weight:650;
    letter-spacing:.22em;
    line-height:1.5;
    color:var(--accent);
    margin-bottom:22px
}

.logo {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    flex-shrink:0;
    line-height:1
}

.logo img {
    display:block;
    width:144px;
    height:auto
}

.primary-btn,.secondary-btn,.pill-btn {
    border-radius:50px;
    padding:16px 28px;
    font-size:13px;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:25px;
    transition:background .2s,transform .2s
}

.primary-btn {
    background:var(--ink);
    color:#fff
}

.primary-btn:hover {
    background:#4b405a;
    transform:translateY(-2px)
}

.secondary-btn {
    background:#efebf5;
    color:#5d467b
}

.secondary-btn:hover {
    background:#e6ddee
}

.pill-btn {
    padding:10px 22px;
    background:#ece8f2
}

.text-link {
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:none;
    padding:6px 0;
    color:var(--accent2);
    font-size:13px;
    font-weight:550
}

.text-link:hover span {
    transform:translate(2px,-2px)
}

.text-link span {
    transition:transform .2s
}

.text-link.light {
    color:#d2c1ed
}

.icon-btn {
    width:40px;
    height:40px;
    border-radius:50%;
    background:transparent;
    font-size:24px;
    display:grid;
    place-items:center
}

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

.link-btn {
    background:none;
    color:var(--accent2);
    font-size:12px;
    padding:8px
}

.skip-link {
    position:absolute;
    z-index:50;
    left:20px;
    top:-100px;
    padding:15px;
    background:#fff;
    border-radius:12px
}

.skip-link:focus {
    top:12px
}

/* The welcome page scrolls independently of the product screens. */
.welcome-screen {
    position:fixed;
    inset:0;
    overflow:auto;
    overflow-x:hidden;
    z-index:200;
    background:var(--bg);
    scrollbar-width:thin;
    scrollbar-color:#cfc8d9 transparent;
    overscroll-behavior-y:contain
}

.site-header {
    position:sticky;
    top:0;
    height:0;
    z-index:30
}

.site-nav {
    height:66px;
    padding:0 max(28px,calc((100vw - 1200px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    background:#faf9fcdd;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border-bottom:1px solid #dcd7e580
}

.nav-links {
    display:flex;
    gap:30px;
    font-size:11px;
    color:#615a6d
}

.nav-links a:hover {
    color:#201526
}

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

.nav-cta {
    background:#2b2632;
    color:#fff;
    border-radius:50px;
    padding:9px 18px;
    font-size:11px
}

.nav-cta span {
    margin-left:10px
}

.menu-toggle {
    display:none;
    background:none;
    width:32px;
    height:32px;
    padding:8px
}

.menu-toggle span {
    display:block;
    height:1px;
    background:#302938;
    margin:5px 0
}

.scroll-progress {
    height:2px;
    background:transparent
}

.scroll-progress i {
    height:100%;
    display:block;
    transform-origin:left;
    transform:scaleX(var(--page-progress,0));
    background:#9780b8
}

.scene {
    position:relative;
    height:calc(var(--length)*1svh);
    --p:0
}

.stage {
    height:100svh;
    min-height:620px;
    position:sticky;
    top:0;
    overflow:hidden
}

.hero {
    background:#f5f4f7
}

.hero-halo {
    position:absolute;
    width:110vw;
    height:95svh;
    left:50%;
    bottom:-40svh;
    transform:translateX(-50%);
    background:radial-gradient(ellipse,#dcd2ed 0,transparent 67%)
}

.hero-copy {
    position:absolute;
    top:14%;
    left:5%;
    width:90%;
    z-index:3;
    text-align:center;
    opacity:clamp(0,calc(1 - var(--p)*3),1);
    transform:translateY(calc(var(--p)*-120px))
}

.hero-copy .eyebrow {
    margin-bottom:16px
}

.hero h1 {
    font-size:clamp(56px,6.2vw,92px);
    line-height:1.02;
    letter-spacing:-.065em
}

.hero h1 span {
    color:#8a779e
}

.hero-sub {
    font-size:16px;
    line-height:1.55;
    color:#706777;
    margin:19px 0 10px
}

.mobile-break {
    display:none
}

.hero-product {
    position:absolute;
    width:58vw;
    max-width:780px;
    height:51svh;
    left:50%;
    bottom:0;
    transform:translateX(-50%) translateY(calc(var(--p)*-17svh)) scale(calc(1 + var(--p)*.28)) rotate(calc(var(--p)*-3deg));
    transform-origin:50% 80%
}

.nimba-stage {
    position:absolute;
    inset:0;
    transition:scale .7s var(--ease),translate .7s var(--ease)
}

/* The studio render: shown at once, and kept underneath the 3D canvas as its
   fallback. will-change keeps its drop-shadow rasterised once instead of being
   refiltered on every float/tilt frame. */
.nimba-stage>img {
    position:absolute;
    inset:0;
    transform:perspective(1400px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));
    animation:nimbaFloat 7s ease-in-out infinite;
    will-change:transform;
    transition:opacity .9s var(--ease)
}

@keyframes nimbaFloat { 0%,100% { translate:0 0 } 50% { translate:0 -1.4% } }

/* The live 3D model (js/nimba-3d.js), faded in over the render once its first frame exists */
.nimba-canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:grab;
    touch-action:pan-y;
    user-select:none;
    -webkit-user-select:none;
    transition:opacity .9s var(--ease)
}

.hero-product.is-3d .nimba-canvas { opacity:1 }
.hero-product.is-3d .nimba-stage>img { opacity:0; animation:none }
.hero-product.is-dragging .nimba-canvas { cursor:grabbing }
.hero-product[data-detail='ears'] .nimba-stage { scale:1.28; translate:0 9% }
.hero-product[data-detail='moon'] .nimba-stage { scale:1.28; translate:0 -12% }

/* One quiet line instead of a toolbar, only while the 3D model is live and
   nobody has tried dragging yet */
.nimba-hint {
    position:absolute;
    left:0;
    right:0;
    bottom:4.5%;
    z-index:4;
    text-align:center;
    font-size:11px;
    letter-spacing:.06em;
    color:#8b7d98;
    opacity:0;
    pointer-events:none;
    transition:opacity .6s var(--ease)
}

.hero:not([data-step='0']):has(.hero-product.is-3d:not(.was-dragged)) .nimba-hint { opacity:1 }

.detail-heading {
    position:absolute;
    top:13%;
    left:0;
    width:100%;
    text-align:center;
    opacity:clamp(0,calc((var(--p) - .4)*5),1);
    transform:translateY(calc(20px - min(var(--p)*40px,20px)));
    pointer-events:none
}

.detail-heading .eyebrow { font-size:9px; margin-bottom:10px }
.detail-heading h2 { font-size:clamp(28px,3vw,46px); letter-spacing:-.05em }
.hero:has(.hero-product[data-detail]) .detail-heading { opacity:0 }

.hero-product img,.closer-product img,.night-product img {
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 25px 20px #4e35601a)
}

.hero-detail {
    position:absolute;
    z-index:2;
    padding:23px 26px;
    border:1px solid #ffffffaa;
    border-radius:22px;
    background:linear-gradient(135deg,#ffffffab,#f8f5fc75);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 50px #65507109;
    text-align:left;
    font-size:12px;
    line-height:1.6;
    color:#6e607b;
    opacity:clamp(0,calc((var(--p) - .28)*4),1);
    transform:translateY(calc(16px - min(var(--p)*40px,16px)));
    transition:background .2s,border-color .2s,box-shadow .2s
}

.left-detail {
    left:8%;
    top:45%
}

.right-detail {
    right:8%;
    top:53%
}

.hero-detail:hover,.hero-detail[aria-pressed='true'] { background:#fffdfc; border-color:#bbaaCE; box-shadow:0 16px 50px #65507112 }
.detail-number { display:block; font-size:9px; letter-spacing:.15em; color:#9780aa; margin-bottom:14px }
.hero-detail strong { display:block; font-size:22px; letter-spacing:-.04em; line-height:1.2; color:#3b3148 }
.detail-description { display:block; margin-top:12px; font-size:12px }
.detail-link { display:flex; justify-content:space-between; gap:24px; margin-top:19px; font-size:11px; font-weight:600; color:#725a8b }
.hero[data-step='0'] .hero-detail { visibility:hidden }
.hero:not([data-step='0']) .hero-copy { visibility:hidden }


.scroll-cue {
    position:absolute;
    bottom:5%;
    left:7%;
    display:flex;
    gap:16px;
    align-items:center;
    color:#776e80;
    opacity:clamp(0,calc(1 - var(--p)*4),1)
}

.scroll-cue span {
    font-size:8px;
    letter-spacing:.16em
}

.scroll-cue i {
    font-style:normal
}

.hero-index {
    position:absolute;
    bottom:5%;
    right:7%;
    color:#81748b;
    font-size:9px;
    letter-spacing:.02em;
    opacity:clamp(0,calc(1 - var(--p)*4),1)
}

.introduction {
    background:#fff
}

.introduction .stage {
    display:grid;
    place-items:center;
    text-align:center;
    padding:60px 8%
}

.intro-inner {
    max-width:960px
}

.intro-inner h2 {
    font-size:clamp(44px,6.7vw,88px);
    letter-spacing:-.06em;
    line-height:1.08;
    max-width:850px;
    margin:auto
}

.intro-inner h2 span {
    opacity:var(--word-opacity,1)
}

.section-description {
    color:var(--ink2);
    font-size:17px;
    line-height:1.8;
    margin-top:34px
}

.intro-signature {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:42px;
    font-size:11px;
    color:#7d6e8e
}

.mini-moon {
    width:17px;
    height:17px;
    display:inline-block;
    border-radius:50%;
    box-shadow:inset 5px -3px #bca2d8;
    transform:rotate(-20deg)
}

.closer {
    background:#17151c;
    color:#f6f1fa
}

.closer-glow {
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 80% 60%,#66516d50,transparent 60%)
}

.closer-product {
    position:absolute;
    right:-1%;
    bottom:-5%;
    width:54%;
    height:88%;
    transform:translateY(calc(var(--p)*8%)) scale(calc(1 + var(--p)*.55));
    transform-origin:60% 70%
}

.closer-copy {
    position:absolute;
    left:8%;
    top:20%;
    width:49%;
    z-index:2
}

.closer .eyebrow {
    color:#b8a1cd
}

.closer h2 {
    font-size:clamp(48px,6.2vw,86px);
    line-height:1.03;
    letter-spacing:-.06em
}

.closer h2 span {
    color:#b09abc
}

.closer-copy>p:last-child {
    font-size:15px;
    line-height:1.8;
    color:#b9b0c3;
    margin-top:27px;
    max-width:420px
}

.closer-copy-one {
    opacity:clamp(0,calc(1 - (var(--p) - .2)*5),1);
    transform:translateY(calc(var(--p)*-55px))
}

.closer-copy-two {
    opacity:clamp(0,calc((var(--p) - .4)*5),1);
    transform:translateY(clamp(0px,calc((.65 - var(--p))*90px),50px))
}

.listening-demo {
    position:absolute;
    left:8%;
    top:64%;
    width:36%;
    z-index:2;
    opacity:clamp(0,calc((var(--p) - .42)*5),1)
}

.listening-label {
    display:flex;
    gap:8px;
    align-items:center;
    font-size:9px;
    letter-spacing:.08em;
    color:#c4b3d9
}

.live-dot {
    width:5px;
    height:5px;
    background:#bda2d7;
    border-radius:50%;
    box-shadow:0 0 12px #d3afef
}

.sound-wave {
    display:flex;
    gap:3px;
    height:28px;
    align-items:center;
    margin:14px 0
}

.sound-wave i {
    width:2px;
    height:var(--h);
    background:#b598ca;
    border-radius:5px;
    transform:scaleY(calc(.35 + var(--p)*.65))
}

.child-thought {
    font-size:17px;
    line-height:1.7;
    color:#d9cde3
}

.child-thought span {
    opacity:clamp(.15,calc((var(--p) - .7)*6),1)
}

.label-reply {
    display:none
}

.closer[data-step='2'] .label-wait {
    display:none
}

.closer[data-step='2'] .label-reply {
    display:inline
}

.chapter-foot {
    position:absolute;
    bottom:6%;
    left:8%;
    right:8%;
    display:flex;
    justify-content:space-between;
    font-size:9px;
    letter-spacing:.03em;
    color:#a397b1
}

.chapter-dots {
    display:flex;
    gap:7px
}

.chapter-dots i {
    width:4px;
    height:4px;
    background:#ffffff35;
    border-radius:50%
}

.closer[data-step='0'] .chapter-dots i:nth-child(1),.closer[data-step='1'] .chapter-dots i:nth-child(2),.closer[data-step='2'] .chapter-dots i:nth-child(3) {
    background:#d1b7ed
}

.story-showcase {
    background:#f5f4f7
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:35px
}

.section-heading h2 {
    font-size:clamp(40px,4.7vw,66px);
    letter-spacing:-.06em;
    line-height:1.08
}

.section-heading h2 span {
    color:#8a7a98
}

.story-showcase .section-heading {
    position:absolute;
    top:15%;
    left:8%;
    right:8%
}

.story-showcase .section-heading .text-link {
    margin-bottom:8px;
    white-space:nowrap
}

.story-track-wrap {
    position:absolute;
    top:41%;
    width:100%
}

.story-track {
    display:flex;
    gap:22px;
    padding:0 8vw;
    width:max-content;
    transform:translateX(calc(var(--p)*var(--shift,0px)*-1))
}

.feature-panel {
    position:relative;
    flex:none;
    width:min(66vw,780px);
    height:46svh;
    min-height:300px;
    border-radius:26px;
    overflow:hidden
}

.story-cover-panel {
    background:linear-gradient(125deg,#e6dfee,#d3c2e3)
}

.feature-copy {
    position:absolute;
    left:7%;
    bottom:12%;
    max-width:49%;
    z-index:2
}

.feature-number {
    font-size:10px;
    letter-spacing:.14em;
    display:block;
    margin-bottom:17px;
    opacity:.65
}

.feature-copy h3 {
    font-size:clamp(27px,3vw,40px);
    line-height:1.08;
    letter-spacing:-.05em
}

.feature-copy p {
    font-size:12px;
    line-height:1.7;
    margin-top:16px;
    max-width:260px;
    opacity:.72
}

.story-book {
    position:absolute;
    right:9%;
    top:9%;
    height:83%;
    width:31%;
    max-width:225px;
    border-radius:3px 12px 12px 3px;
    background:linear-gradient(150deg,#8e6da8,#574872);
    color:#faf5ff;
    transform:perspective(800px) rotateY(-17deg) rotate(8deg);
    box-shadow:-6px 1px 0 #eee5f3,-10px 4px 0 #78608c,10px 25px 30px #59417145;
    padding:17px 16px;
    overflow:hidden
}

.story-book>span {
    font-size:6px;
    letter-spacing:.18em;
    position:relative;
    z-index:2
}

.story-book strong {
    display:block;
    margin-top:13px;
    font-size:clamp(20px,2vw,28px);
    line-height:1.05;
    letter-spacing:-.04em;
    position:relative;
    z-index:2
}

.story-book img {
    position:absolute;
    bottom:0;
    left:5%;
    width:100%;
    height:68%;
    object-fit:contain;
    z-index:1
}

.story-book small {
    position:absolute;
    bottom:13px;
    left:16px;
    z-index:3;
    font-size:5px;
    letter-spacing:.08em
}

.book-hill {
    position:absolute;
    background:#48395b;
    bottom:-32%;
    left:-40%;
    width:170%;
    height:46%;
    border-radius:50%
}

.book-moon {
    width:32px;
    height:32px;
    border-radius:50%;
    box-shadow:inset 10px -4px #f8e9c4;
    position:absolute;
    right:20px;
    top:31%
}

.question-panel {
    background:#282333;
    color:#f6f0fc
}

.question-bubble {
    position:absolute;
    right:7%;
    top:24%;
    font-size:25px;
    letter-spacing:-.04em;
    line-height:1.2;
    padding:24px;
    border-radius:22px 22px 3px 22px;
    background:#aa90c5;
    color:#211c29;
    transform:rotate(5deg)
}

.question-orbit {
    position:absolute;
    right:12%;
    top:6%;
    width:190px;
    height:190px;
    border:1px solid #b295d12e;
    border-radius:50%
}

.question-orbit span {
    position:absolute;
    right:-25px;
    top:5px;
    font-size:48px;
    color:#c4aada;
    transform:rotate(15deg)
}

.resume-panel {
    background:#dce7e1;
    color:#314a41
}

.resume-visual {
    position:absolute;
    top:22%;
    right:7%;
    width:40%
}

.resume-line {
    height:3px;
    background:#99b4a8;
    position:relative
}

.resume-line i,.resume-line b {
    position:absolute;
    border-radius:50%;
    width:10px;
    height:10px;
    top:-4px;
    background:#486f5f
}

.resume-line i {
    left:15%
}

.resume-line b {
    right:15%
}

.resume-labels {
    display:flex;
    justify-content:space-between;
    font-size:7px;
    margin-top:15px;
    color:#486858;
    gap:15px
}

.resume-symbol {
    font-size:105px;
    line-height:1.4;
    display:block;
    text-align:center;
    color:#658a79
}

.story-track-controls {
    position:absolute;
    bottom:5%;
    left:8%;
    display:flex;
    gap:7px
}

.story-track-controls button {
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    padding:0;
    background:none
}

.story-track-controls button:after {
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ccc3d6;
    transition:width .3s
}

.story-track-controls button[aria-pressed='true']:after {
    width:22px;
    background:#8d749f
}

.feelings-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:7%;
    min-height:760px;
    padding:130px max(7%,calc((100vw - 1200px)/2));
    background:radial-gradient(ellipse at 75% 60%,#ece4f440,transparent 60%),#fcfbfd
}

.feelings-copy h2 {
    font-size:clamp(45px,5.5vw,76px);
    letter-spacing:-.06em;
    line-height:1.07
}

.feelings-copy h2 span {
    color:#9680aa
}

.feelings-copy>p:not(.eyebrow) {
    max-width:390px;
    font-size:14px;
    line-height:1.8;
    color:var(--ink2);
    margin:26px 0
}

.breath-facts { display:flex; flex-wrap:wrap; gap:9px 17px; font-size:9px; color:#87758f; margin-bottom:30px }
.breath-facts span+span:before { content:'·'; margin-right:17px; color:#b19bc2 }
.breath-actions { display:flex; align-items:center; flex-wrap:wrap; gap:20px }
.feelings-copy>p.breath-footnote { font-size:10px; margin:17px 0 0; color:#968a9d }

.breath-experience {
    position:relative;
    width:100%;
    min-width:0;
    overflow:hidden;
    max-width:510px;
    padding:26px 28px 25px;
    border-radius:34px;
    border:1px solid #ffffff;
    background:linear-gradient(150deg,#f8f4fc,#f0e8f6 68%,#e9dff2);
    box-shadow:0 25px 80px #74598912,inset 0 1px 0 #ffffff
}

.breath-session-label { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.1em; color:#957da8 }
.breath-session-label>#breath-clock { margin-left:auto; font-variant-numeric:tabular-nums; font-size:10px; letter-spacing:0 }
.breath-status-dot { width:5px; height:5px; border-radius:50%; background:#a88abd; box-shadow:0 0 0 4px #b9a4d019 }
.breath-inline-btn { width:30px; height:30px; border-radius:50%; background:#ffffff87; color:#806594; font-size:13px; flex-shrink:0 }
.breath-inline-btn:hover { background:#fff }
.breathing-art {
    position:relative;
    width:100%;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    isolation:isolate;
    --breath-expansion:0
}

.breath-core {
    position:absolute;
    inset:17%;
    border-radius:50%;
    transform:scale(calc(.86 + var(--breath-expansion)*.24));
    transition:transform .2s linear;
    background:radial-gradient(circle at 32% 18%,#faf0ff,#c0acd4 32%,#91769f 65%,#c9b6d2 90%);
    box-shadow:inset 1px 3px 10px #ffffffa8,inset -10px -17px 40px #48315147,0 26px 60px #927ba044;
    border:1px solid #f5e7ffbb
}

.breath-core:after { content:''; position:absolute; inset:7%; border-radius:50%; background:linear-gradient(120deg,#ffffff18,transparent 50%); border-top:1px solid #ffffff50 }
.breath-moon { position:absolute; width:24%; aspect-ratio:1; top:15%; right:19%; border-radius:50%; box-shadow:inset 9px -3px #fffff55c; transform:rotate(-20deg); filter:drop-shadow(0 0 10px #fff7) }
.breath-orbit { position:absolute; inset:5%; border:1px solid #bca5d440; border-radius:50%; transform:rotate(-25deg) scaleY(.87) }
.breath-orbit:before { content:''; position:absolute; width:6px; height:6px; background:#c0a8d4; border:1px solid #ffffff; border-radius:50%; top:19%; left:10%; box-shadow:0 0 15px #b092c3 }
.breath-orbit.orbit-two { inset:0; transform:rotate(25deg) scaleY(.9); opacity:.65 }
.breath-aura { position:absolute; inset:4%; border-radius:50%; background:radial-gradient(circle,#c1aad948,transparent 65%); filter:blur(15px) }
.breath-guidance {
    position:relative;
    z-index:1;
    display:grid;
    text-align:center;
    justify-items:center;
    color:#fff;
    width:69%;
    text-shadow:0 2px 18px #57426032
}

.breath-kicker { font-size:9px; letter-spacing:.13em; margin-bottom:10px; color:#f1e7f8 }
.breath-guidance strong { font-size:clamp(19px,2vw,27px); font-weight:550; letter-spacing:-.035em }
.breath-guidance>#breath-instruction { margin-top:9px; font-size:11px; line-height:1.7; max-width:170px; color:#f7f2fc }
.breath-nimba { position:absolute; width:32%; height:auto; right:-4%; bottom:-1%; filter:drop-shadow(0 12px 10px #65507b18); z-index:2; transform:rotate(-7deg) }
.breath-spark { position:absolute; color:#b09bc2; font-size:21px }
.spark-one { top:12%; right:9% }
.spark-two { left:9%; bottom:17%; font-size:12px }
.breath-progress { height:2px; border-radius:5px; overflow:hidden; background:#d7c7e24a; margin:10px 0 20px }
.breath-progress i { display:block; height:100%; background:#a188b6; width:0; transition:width .2s linear }
.breath-steps { display:flex; align-items:center; gap:12px; font-size:8px; color:#b4a2c3 }
.breath-steps b { font-size:11px; margin-left:6px; font-weight:500; color:#9d88af }
.breath-step-line { width:15px; height:1px; background:#c9b8d6 }
.breath-steps>#breath-count { margin-left:auto; font-size:10px; color:#9781aa }
.breath-steps .is-current,.breath-steps .is-current b { color:#66467e }

.bedtime-showcase {
    background:#171722;
    color:#fff
}

.bedtime-showcase .stage {
    background:radial-gradient(ellipse at 75% 85%,#4b3e6450,transparent 60%)
}

.night-stars {
    position:absolute;
    inset:0;
    background-image:radial-gradient(circle at 20% 15%,#d6bdec80 1px,transparent 2px),radial-gradient(circle at 65% 32%,#c6adde60 1px,transparent 2px),radial-gradient(circle at 90% 72%,#c6adde60 1px,transparent 2px);
    background-size:317px 273px,439px 383px,511px 401px;
    opacity:.5
}

.night-moon {
    position:absolute;
    top:17%;
    right:16%;
    width:65px;
    height:65px;
    border-radius:50%;
    box-shadow:inset 19px -7px #e7d4f2;
    transform:rotate(-18deg);
    filter:drop-shadow(0 0 25px #ac83ca40)
}

.night-copy {
    position:absolute;
    left:10%;
    top:28%;
    z-index:2
}

.night-copy .eyebrow {
    color:#bda5d2
}

.night-copy h2 {
    font-size:clamp(60px,7vw,98px);
    line-height:1.04;
    letter-spacing:-.065em
}

.night-copy h2 span {
    color:#b19cc6
}

.night-copy>p:not(.eyebrow) {
    font-size:15px;
    line-height:1.8;
    color:#b4a7c3;
    margin:25px 0 20px
}

.night-product {
    position:absolute;
    right:0;
    bottom:-8%;
    height:74%;
    width:50%;
    transform:translateY(calc(90px - var(--p)*110px)) rotate(7deg) scale(calc(.95 + var(--p)*.1));
    filter:brightness(.8)
}

.night-cloud {
    position:absolute;
    bottom:-35%;
    left:20%;
    width:130%;
    height:48%;
    background:#24202e;
    border-radius:50%;
    filter:blur(15px)
}

.parents-section {
    background:#fff;
    padding:130px 10%
}

.parents-section .section-heading>p {
    font-size:13px;
    color:var(--ink2);
    line-height:1.7;
    margin-bottom:6px
}

.parent-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px;
    padding:75px 0 80px;
    border-bottom:1px solid var(--line)
}

.line-icon {
    color:#9d82b6;
    font-size:29px;
    display:block;
    margin-bottom:20px
}

.parent-features h3 {
    font-size:19px;
    letter-spacing:-.035em;
    margin-bottom:14px
}

.parent-features p {
    font-size:13px;
    line-height:1.8;
    color:var(--ink2)
}

.faq {
    max-width:780px;
    margin:75px auto 0
}

.faq>h3 {
    font-size:28px;
    letter-spacing:-.04em;
    margin-bottom:28px
}

.faq details {
    border-bottom:1px solid #e7e2ec
}

.faq summary {
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    font-size:14px;
    font-weight:550
}

.faq summary::-webkit-details-marker {
    display:none
}

.faq summary span {
    color:#9a82ac;
    font-size:21px;
    font-weight:400;
    transition:transform .2s
}

.faq details[open] summary span {
    transform:rotate(45deg)
}

.faq details p {
    font-size:13px;
    color:var(--ink2);
    line-height:1.8;
    padding-bottom:26px;
    max-width:640px
}

.join-section {
    min-height:610px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:90px;
    padding:65px 12%;
    background:radial-gradient(ellipse at 20% 65%,#e7def1,transparent 65%),#f4f1f7
}

.join-art {
    max-width:390px;
    transform:rotate(-5deg)
}

.join-section h2 {
    font-size:clamp(50px,5.7vw,80px);
    line-height:1.04;
    letter-spacing:-.065em
}

.join-section p:not(.eyebrow) {
    color:var(--ink2);
    font-size:14px;
    margin:23px 0
}

.join-note {
    display:block;
    font-size:9px;
    color:#796984;
    margin-top:18px
}

.site-footer {
    padding:35px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    background:#f4f1f7;
    border-top:1px solid #ddd5e6
}

.site-footer>span,.site-footer>a:last-child {
    font-size:10px;
    color:#77697f
}

/* The 3D model's licence (CC BY 4.0) asks for this credit */
.site-footer .credit {
    display:block;
    margin-top:6px;
    font-size:9px;
    color:#9b8fa5
}

.site-footer .credit a { color:inherit; text-decoration:underline; text-underline-offset:2px }

.motion-ready [data-reveal] {
    opacity:0;
    transform:translateY(26px);
    transition:opacity .8s var(--ease),transform .8s var(--ease)
}

.motion-ready [data-reveal].in {
    opacity:1;
    transform:none
}

/* Parent sign-in and the shared product shell. */
.signin-dialog {
    border:1px solid #fff;
    border-radius:27px;
    padding:32px 40px 35px;
    width:min(440px,calc(100vw - 32px));
    max-height:calc(100dvh - 32px);
    overflow:auto;
    background:#faf8fc;
    color:var(--ink);
    margin:auto;
    box-shadow:0 30px 100px #24123530;
    text-align:center
}

.signin-dialog::backdrop {
    background:#251c3b66;
    backdrop-filter:blur(12px)
}

.dialog-close {
    position:absolute;
    right:14px;
    top:12px;
    color:#7c6c8a
}

.signin-portrait {
    width:95px;
    height:106px;
    margin:0 auto 14px
}

.signin-portrait img {
    width:100%;
    height:100%;
    object-fit:contain
}

.signin-dialog .eyebrow {
    font-size:8px;
    margin-bottom:12px
}

.signin-dialog h2 {
    font-size:28px;
    letter-spacing:-.045em;
    margin-bottom:10px
}

.signin-dialog>.muted {
    font-size:12px
}

.login-form {
    display:flex;
    flex-direction:column;
    gap:9px;
    margin-top:26px;
    text-align:left
}

.login-form label {
    font-size:11px;
    color:#716479;
    margin-top:5px
}

.login-form input,.pw-input {
    width:100%;
    border:1px solid #ddd6e4;
    background:#fff;
    border-radius:10px;
    padding:13px 14px;
    font-size:13px;
    color:var(--ink);
    min-height:44px
}

.login-form .primary-btn {
    width:100%;
    margin-top:15px;
    font-size:12px;
    gap:18px
}

.login-error,.pw-error {
    color:#a34055;
    font-size:12px;
    line-height:1.6
}

.login-change-pw-link {
    font-size:10px;
    color:#776284;
    display:inline-block;
    margin-top:23px
}

.loader {
    display:inline-block;
    width:18px;
    height:18px;
    border:2px solid #cfbfdc;
    border-top-color:#7e5a9a;
    border-radius:50%;
    animation:spin .8s linear infinite
}

#welcome-loader,#setup-loader {
    font-size:12px;
    color:var(--ink2);
    margin-top:20px
}

#welcome-loader p,#setup-loader p {
    margin-top:7px
}

@keyframes spin {
    to {
        transform:rotate(360deg)
    }

}

.screen {
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    overflow:auto;
    background:var(--bg)
}

.topbar {
    min-height:80px;
    display:flex;
    align-items:center;
    gap:15px;
    padding:14px 4%;
    flex-shrink:0;
    border-bottom:1px solid #e7e1ee
}

.topbar .logo {
    margin-right:auto
}

.whoami {
    display:flex;
    align-items:center;
    gap:20px;
    font-size:11px;
    color:#75697d
}

.setup-screen {
    background:radial-gradient(ellipse at 50% 40%,#ece5f460,transparent 65%),#f9f8fb
}

.setup-main {
    width:min(900px,92%);
    margin:auto;
    padding:45px 0 36px;
    text-align:center
}

.setup-main>.eyebrow {
    margin-bottom:13px
}

.setup-main h1 {
    font-size:clamp(34px,4vw,54px);
    letter-spacing:-.055em;
    line-height:1.08
}

.setup-sub {
    font-size:13px;
    color:var(--ink2);
    margin-top:16px
}

.experience-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin:34px 0 26px
}

.exp-card {
    position:relative;
    border:1px solid #ded7e6;
    border-radius:22px;
    background:#f5f1f9;
    padding:16px 24px 27px;
    text-align:left;
    overflow:hidden;
    transition:background .25s,border-color .25s,box-shadow .25s
}

.exp-card.active {
    border-color:#aa8dc4;
    box-shadow:0 0 0 2px #baa0d124;
    background:#f0e9f7
}

.exp-card:hover {
    border-color:#aa8dc4
}

.exp-art {
    height:176px;
    display:flex;
    justify-content:center;
    margin-bottom:10px
}

.exp-art img {
    width:180px;
    height:100%;
    object-fit:contain;
    transform:rotate(-5deg)
}

.exp-check {
    position:absolute;
    top:20px;
    right:20px;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border:1px solid #c9bdd4;
    border-radius:50%;
    font-size:10px;
    color:transparent
}

.exp-card.active .exp-check {
    background:#8d72a5;
    border-color:#8d72a5;
    color:#fff
}

.exp-copy .eyebrow {
    font-size:8px;
    letter-spacing:.15em;
    margin-bottom:9px
}

.exp-copy h2 {
    font-size:26px;
    letter-spacing:-.05em;
    margin-bottom:10px
}

.exp-copy>p {
    font-size:12px;
    line-height:1.7;
    color:#766682
}

.story-choice {
    background:#f0edf3
}

.mini-book-art {
    align-items:center
}

.mini-book {
    width:109px;
    height:144px;
    background:linear-gradient(135deg,#a88dbe,#67517f);
    color:#fff;
    padding:13px;
    box-shadow:-4px 1px 0 #e8e0ed,-7px 3px 0 #816891,6px 15px 18px #58416e28;
    transform:rotate(9deg);
    border-radius:2px 6px 6px 2px;
    text-align:left
}

.mini-book>span:first-child {
    font-size:5px;
    letter-spacing:.17em
}

.mini-book strong {
    font-size:20px;
    line-height:1.05;
    display:block;
    margin-top:13px;
    letter-spacing:-.04em
}

.mini-book-moon {
    display:block;
    font-size:35px;
    text-align:right;
    color:#e4d2ed
}

.listen-style {
    min-height:105px;
    margin-bottom:20px
}

.listen-style.collapsed {
    display:none
}

.ls-label {
    display:block;
    font-size:11px;
    color:#71647b;
    margin-bottom:12px
}

.seg {
    display:inline-flex;
    background:#ebe6f0;
    padding:4px;
    border-radius:50px
}

.seg-btn {
    font-size:11px;
    padding:10px 19px;
    border-radius:50px;
    background:none;
    color:#7b688a
}

.seg-btn.active {
    background:#fff;
    color:#594369;
    box-shadow:0 2px 5px #6950750a
}

.ls-desc {
    font-size:11px;
    color:var(--ink2);
    margin:12px auto 0;
    max-width:460px;
    line-height:1.6
}

.setup-main>.primary-btn {
    min-width:220px
}

.setup-footnote {
    font-size:9px;
    color:#7f7189;
    margin-top:17px
}

/* Rendered Nimba: small, physical motions, no synthetic mouth animation. */
.nimba {
    position:relative;
    height:100%;
    width:100%;
    animation:nimba-breathe 5s ease-in-out infinite;
    transform-origin:50% 80%
}

.nimba-image {
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 15px 18px #69527f13)
}

.nimba-light {
    position:absolute;
    left:41%;
    top:62%;
    width:15%;
    height:10%;
    background:radial-gradient(ellipse,#c1acff70,transparent 70%);
    border-radius:50%;
    opacity:0;
    pointer-events:none
}

.nimba[data-state='speaking'] .nimba-light {
    opacity:1;
    animation:moon-glow 1s ease-in-out infinite
}

.nimba[data-state='listening'] {
    animation:nimba-listen 4s ease-in-out infinite
}

@keyframes nimba-breathe {
    50% {
        transform:translateY(-5px) rotate(.5deg)
    }

}

@keyframes nimba-listen {
    0%,100% {
        transform:rotate(-2deg)
    }

    50% {
        transform:rotate(-4deg) translateY(-4px)
    }

}

@keyframes moon-glow {
    50% {
        opacity:.25;
        transform:scale(.85)
    }

}

.chat-top {
    padding-top:12px;
    padding-bottom:12px;
    min-height:72px
}

.chat-id {
    display:flex;
    flex-direction:column;
    gap:4px
}

.chat-id strong {
    font-size:16px;
    letter-spacing:-.02em
}

.status {
    font-size:10px;
    line-height:1.5;
    color:#82748d
}

.status.connected,.status.ready {
    color:#538272
}

.status.disconnected {
    color:#9c7180
}

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

.language-badge {
    font-size:10px;
    color:#74647d
}

.chat-layout {
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    grid-template-rows:minmax(0,1fr) auto;
    gap:22px;
    padding:30px 4% max(26px,env(safe-area-inset-bottom))
}

.chat-stage {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:0;
    text-align:center;
    background:radial-gradient(ellipse at 50% 55%,#e6dbf170,transparent 65%)
}

.chat-stage>.eyebrow {
    font-size:8px;
    letter-spacing:.2em;
    margin-bottom:10px;
    color:#76627f
}

#character-container {
    width:min(100%,440px);
    height:46dvh;
    max-height:480px;
    position:relative
}

.aura {
    position:absolute;
    inset:10%;
    border-radius:50%;
    background:radial-gradient(ellipse,#e7dcf266,transparent 70%);
    transition:background .5s
}

#emotion-indicator {
    font-size:9px;
    letter-spacing:.08em;
    color:#785e89;
    margin:7px 0 12px
}

.voice-caption {
    font-size:23px;
    font-weight:550;
    letter-spacing:-.04em;
    color:#66506e
}

.stage-note {
    font-size:10px;
    margin-top:11px;
    color:#76627f
}

#chat-panel {
    border:1px solid #e6deee;
    background:#fff9;
    border-radius:22px;
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden
}

#chat-panel>header {
    padding:21px 23px;
    border-bottom:1px solid #eee8f3;
    font-size:11px;
    color:#725c82
}

#chat-panel>header strong {
    display:block;
    font-size:13px;
    color:#61516d;
    margin-bottom:4px
}

#chat-panel>header span {
    font-size:9px
}

.conversation-empty {
    text-align:center;
    color:#7b6388;
    font-size:12px;
    line-height:1.8;
    margin:auto;
    padding:25px
}

.conversation-empty>span {
    display:block;
    font-size:26px;
    margin-bottom:12px
}

#chat-panel:has(.message) .conversation-empty {
    display:none
}

#chat-messages {
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:15px;
    overflow:auto;
    scrollbar-width:thin;
    flex:1;
    min-height:0
}

#chat-messages:empty {
    flex:0;
    padding:0
}

.message {
    font-size:12px;
    line-height:1.75;
    max-width:92%;
    white-space:pre-wrap;
    word-break:break-word
}

.message.assistant {
    align-self:flex-start;
    padding:13px 16px;
    border-radius:15px 15px 15px 3px;
    background:#f1ebf6;
    color:#695776
}

.message.user {
    align-self:flex-end;
    padding:13px 16px;
    border-radius:15px 15px 3px 15px;
    background:#e9e0f0;
    color:#5b436c
}

.message.system {
    font-size:10px;
    color:#785b88;
    align-self:center;
    text-align:center
}

.message.streaming:after {
    content:'·';
    animation:moon-glow .7s infinite
}

.message-label {
    display:block;
    font-size:9px;
    margin-bottom:5px;
    opacity:.7
}

.listen-status {
    font-size:10px;
    color:#8c70a3;
    text-align:center;
    line-height:1.7
}

.input-area {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:10px;
    width:min(780px,100%);
    margin:0 auto;
    padding:9px 10px 9px 22px;
    background:#fff;
    border:1px solid #e2d9eb;
    border-radius:50px;
    box-shadow:0 6px 25px #71627b08
}

#text-input {
    border:0;
    background:transparent;
    min-width:0;
    flex:1;
    padding:10px 0;
    font-size:13px;
    color:#5c456c;
    outline-offset:0
}

#text-input::placeholder {
    color:#796583
}

#send-btn {
    width:36px;
    height:36px;
    background:#f0eaf6;
    border-radius:50%;
    color:#8e71a6;
    font-size:21px
}

.dock-divider {
    height:22px;
    width:1px;
    background:#e6dfed;
    margin:0 3px
}

#stop-btn {
    width:36px;
    height:36px;
    border-radius:50%;
    background:none;
    color:#a28cad;
    font-size:12px
}

#mic-btn {
    width:44px;
    height:44px;
    border-radius:50%;
    background:#8a6fa6;
    color:white;
    display:grid;
    place-items:center
}

#mic-btn svg {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round
}

#mic-btn.recording {
    background:#b16f8f;
    box-shadow:0 0 0 6px #b7809c20
}

body[data-voice='listening'] .voice-caption {
    color:#956382
}

body[data-voice='speaking'] .voice-caption {
    color:#7b5b9b
}

#settings-panel {
    position:absolute;
    right:4%;
    top:75px;
    z-index:15;
    width:290px;
    padding:24px;
    background:#fff;
    border:1px solid #e3d9ec;
    border-radius:18px;
    box-shadow:0 20px 60px #4c355426;
    font-size:12px
}

#settings-panel h3 {
    margin-bottom:18px
}

#settings-panel .setting-item {
    margin:15px 0;
    display:flex;
    flex-direction:column;
    gap:8px
}

#settings-panel input {
    width:100%;
    padding:10px;
    border:1px solid var(--line);
    border-radius:7px;
    font-size:10px
}

#settings-panel button {
    background:#f0e9f6;
    border-radius:8px;
    padding:11px;
    font-size:11px
}

#settings-panel .info {
    font-size:10px;
    line-height:1.7;
    color:var(--ink2)
}

#loading-overlay {
    position:absolute;
    inset:72px 0 0;
    z-index:20;
    background:#f5f1f8ea;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:15px;
    font-size:13px;
    color:#80668f
}

.story-screen {
    background:radial-gradient(ellipse at 40% 50%,#e7dbf350,transparent 60%),#f7f4fa;
    transition:background .8s,color .8s
}

.story-top {
    justify-content:space-between
}

.story-top>span {
    font-size:11px;
    color:#745d83
}

.story-atmosphere {
    pointer-events:none
}

.story-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;
    width:min(1120px,90%);
    margin:auto;
    padding:45px 0
}

.story-stage {
    position:relative;
    height:66dvh;
    max-height:650px
}

.story-glow {
    position:absolute;
    inset:15%;
    border-radius:50%;
    background:radial-gradient(ellipse,#dfcdeb65,transparent 70%)
}

#story-face {
    position:relative;
    width:100%;
    height:100%
}

.story-information .eyebrow {
    font-size:9px
}

.story-information h1 {
    font-size:clamp(40px,5vw,68px);
    line-height:1.07;
    letter-spacing:-.055em
}

.story-teller {
    font-size:13px;
    color:#766086;
    margin:20px 0 35px
}

.story-status {
    display:flex;
    align-items:center;
    gap:10px;
    min-height:32px
}

#status {
    font-size:12px
}

.story-equalizer {
    display:flex;
    align-items:center;
    gap:3px;
    height:20px
}

.story-equalizer i {
    width:2px;
    height:7px;
    background:#aa88c2;
    border-radius:3px
}

.story-equalizer i:nth-child(2) {
    height:15px
}

.story-equalizer i:nth-child(3) {
    height:11px
}

.story-information:has(.speaking) .story-equalizer i {
    animation:moon-glow .8s infinite
}

#story-progress {
    display:block;
    width:100%;
    height:3px;
    appearance:none;
    border:0;
    margin:18px 0 34px;
    background:#e4daed;
    border-radius:5px;
    overflow:hidden
}

#story-progress::-webkit-progress-bar {
    background:#e4daed
}

#story-progress::-webkit-progress-value {
    background:#a585bc;
    transition:width .6s
}

#story-progress::-moz-progress-bar {
    background:#a585bc
}

.story-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}

.story-actions button {
    font-size:12px;
    padding:15px 23px
}

#story-hint {
    font-size:11px;
    color:#756181;
    line-height:1.8;
    margin-top:22px;
    max-width:380px
}

body[data-story-mode='bedtime'] .story-screen {
    background:radial-gradient(ellipse at 35% 60%,#463353,#1d1b2a 70%);
    color:#f1eaf8
}

body[data-story-mode='bedtime'] .story-top {
    border-color:#61506940
}

body[data-story-mode='bedtime'] .story-stage {
    filter:brightness(.8)
}

body[data-story-mode='bedtime'] .story-information .eyebrow,body[data-story-mode='bedtime'] .story-teller,body[data-story-mode='bedtime'] #story-hint {
    color:#b7a1c7
}

body[data-story-mode='bedtime'] .story-information .status {
    color:#d6c0e7
}

.modal-overlay {
    position:fixed;
    inset:0;
    z-index:400;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#251c3b66;
    backdrop-filter:blur(12px);
    padding:20px
}

.modal-card,.modal-content {
    width:min(420px,100%);
    background:#faf8fc;
    border-radius:25px;
    padding:34px;
    box-shadow:0 25px 90px #2c123129
}

.modal-card h2,.modal-content h2 {
    font-size:26px;
    letter-spacing:-.045em;
    margin-bottom:14px
}

.modal-card>p,.modal-content>p {
    font-size:13px;
    line-height:1.7;
    color:#816b8e;
    margin-bottom:22px
}

.modal-actions {
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:24px
}

.modal-actions button {
    padding:14px;
    border-radius:50px;
    font-size:12px
}

.modal-primary {
    background:#302437;
    color:#fff
}

.modal-secondary {
    background:#ece4f3;
    color:#725983
}

.modal-cancel {
    background:none;
    color:#8d749c
}

.pw-label {
    font-size:11px;
    color:#7f668e;
    display:block;
    margin:15px 0 7px
}

.pw-error {
    margin-top:12px
}

.pw-hint {
    font-size:10px!important
}

.modal-actions .danger {
    color:#9d4263
}

@media(min-width:1600px) {
    .hero-copy {
        top:15%
    }

    .hero-product {
        height:55svh;
        bottom:-3svh
    }

    .hero h1 {
        font-size:100px
    }

    .story-track-wrap {
        top:40%
    }

    .feature-panel {
        height:47svh
    }

}

@media(max-height:760px) and (min-width:761px) {
    .hero-copy {
        top:16%
    }

    .hero h1 {
        font-size:64px
    }

    .hero-sub {
        font-size:14px;
        margin:13px 0 5px
    }

    .hero-copy .eyebrow {
        margin-bottom:10px
    }

    .hero-product {
        height:55svh
    }

    .setup-main {
        padding:25px 0
    }

    .exp-art {
        height:120px
    }

    .experience-grid {
        margin:25px 0 20px
    }

    .exp-card {
        padding-bottom:20px
    }

    .setup-main h1 {
        font-size:42px
    }

    .closer-copy {
        top:18%
    }

    .closer h2 {
        font-size:64px
    }

    .closer-copy>p:last-child {
        font-size:13px;
        margin-top:18px
    }

    .listening-demo {
        top:65%
    }

    .child-thought {
        font-size:14px
    }

    .story-showcase .section-heading {
        top:17%
    }

    .section-heading h2 {
        font-size:48px
    }

    .story-track-wrap {
        top:42%
    }

    .feature-panel {
        min-height:260px
    }

    .story-information h1 {
        font-size:52px
    }

    .chat-layout {
        padding-top:18px;
        gap:15px
    }

}

@media(max-width:1000px) and (min-width:761px) {
    .nav-links {
        gap:20px
    }

    .hero h1 {
        font-size:70px
    }

    .closer h2 {
        font-size:62px
    }

    .closer-copy>p:last-child {
        font-size:13px
    }

    .closer-product {
        right:-9%;
        width:65%
    }

    .feature-copy h3 {
        font-size:31px
    }

    .feature-copy p {
        font-size:11px
    }

    .question-bubble {
        font-size:20px;
        right:5%;
        padding:20px
    }

    .chat-layout {
        grid-template-columns:minmax(0,1fr) 285px
    }

    .feelings-section {
        padding:100px 7%;
        gap:40px
    }

    .parent-features {
        gap:35px
    }

    .join-section {
        gap:45px;
        padding:65px 8%
    }

    .story-card {
        gap:20px
    }

    .story-actions {
        gap:8px
    }

    .story-actions button {
        padding:14px 17px
    }

}

@media(max-width:760px) {
    .site-nav {
        height:60px;
        padding:0 22px;
        gap:18px
    }

    .logo img {
        width:120px
    }

    .nav-links {
        display:none;
        position:absolute;
        top:60px;
        left:0;
        right:0;
        flex-direction:column;
        gap:0;
        background:#faf9fcfa;
        padding:10px 24px 22px;
        border-bottom:1px solid var(--line);
        box-shadow:0 20px 40px #392f4315
    }

    .nav-links.open {
        display:flex
    }

    .nav-links a {
        padding:15px 0;
        font-size:13px
    }

    .menu-toggle {
        display:block
    }

    .nav-cta {
        font-size:10px;
        padding:8px 14px
    }

    .nav-actions {
        gap:8px
    }

    .stage {
        min-height:620px
    }

    .hero-copy {
        top:17%;
        left:4%;
        width:92%
    }

    .hero-copy .eyebrow {
        font-size:8px;
        letter-spacing:.17em;
        margin-bottom:16px
    }

    .hero h1 {
        font-size:clamp(43px,10.7vw,68px);
        letter-spacing:-.063em
    }

    .hero-sub {
        font-size:13px;
        line-height:1.6;
        margin:18px 0 9px
    }

    .mobile-break {
        display:block
    }

    .text-link {
        font-size:11px
    }

    .hero-product {
        width:86vw;
        height:50svh;
        bottom:12%;
        transform:translateX(-50%) translateY(calc(var(--p)*-9svh)) scale(calc(1 + var(--p)*.08))
    }

    .hero-detail {
        font-size:10px;
        line-height:1.5;
        padding:13px 17px;
        width:calc(50% - 30px);
        max-width:185px;
        border-radius:17px
    }

    .left-detail {
        left:22px;
        top:auto;
        bottom:17%
    }

    .right-detail {
        right:22px;
        top:auto;
        bottom:17%
    }

    .hero-detail strong { font-size:16px }
    .detail-number { font-size:6px; margin-bottom:7px }
    .detail-description { display:none }
    .detail-link { margin-top:8px; font-size:7px; gap:4px }
    .detail-heading { top:16%; padding:0 20px }
    .detail-heading .eyebrow { font-size:7px; letter-spacing:.12em }
    .detail-heading h2 { font-size:29px }

    .scroll-cue {
        left:7%;
        bottom:5%;
        gap:10px
    }

    .scroll-cue span {
        font-size:6px
    }

    .hero-index {
        right:7%;
        font-size:6px;
        bottom:5%
    }

    .introduction .stage {
        padding:80px 8%
    }

    .intro-inner h2 {
        font-size:clamp(40px,10.5vw,62px)
    }

    .section-description {
        font-size:13px;
        line-height:1.9;
        margin-top:28px
    }

    .section-description br {
        display:none
    }

    .intro-signature {
        font-size:10px;
        margin-top:35px
    }

    .eyebrow {
        font-size:8px;
        letter-spacing:.18em
    }

    .closer-copy {
        left:7%;
        top:16%;
        width:88%
    }

    .closer h2 {
        font-size:clamp(43px,10.8vw,65px)
    }

    .closer-copy>p:last-child {
        font-size:12px;
        line-height:1.8;
        margin-top:20px;
        max-width:290px
    }

    .closer-product {
        right:-20%;
        width:88%;
        height:64%;
        bottom:-5%;
        opacity:calc(1 - var(--p)*.35);
        transform:translateY(calc(var(--p)*45%)) scale(calc(1 + var(--p)*.35))
    }

    .listening-demo {
        left:7%;
        top:48%;
        width:73%
    }

    .listening-label {
        font-size:8px
    }

    .sound-wave {
        margin:12px 0;
        height:22px;
        gap:2px
    }

    .child-thought {
        font-size:14px
    }

    .chapter-foot {
        left:7%;
        right:7%;
        font-size:7px;
        bottom:5%
    }

    .story-showcase .section-heading {
        top:15%;
        left:7%;
        right:7%;
        display:block
    }

    .section-heading h2 {
        font-size:clamp(34px,8.6vw,49px)
    }

    .story-showcase .section-heading .text-link {
        margin-top:18px
    }

    .story-showcase .eyebrow {
        margin-bottom:17px
    }

    .story-track-wrap {
        top:41%
    }

    .story-track {
        padding:0 7vw;
        gap:16px
    }

    .feature-panel {
        width:86vw;
        height:47svh;
        min-height:300px;
        border-radius:21px
    }

    .feature-copy {
        left:8%;
        bottom:9%;
        max-width:80%
    }

    .feature-copy h3 {
        font-size:29px
    }

    .feature-copy p {
        font-size:11px;
        line-height:1.6;
        margin-top:12px;
        max-width:250px
    }

    .feature-number {
        font-size:8px;
        margin-bottom:10px
    }

    .story-book {
        top:6%;
        right:8%;
        height:49%;
        width:34%;
        padding:11px
    }

    .story-book>span {
        font-size:4px
    }

    .story-book strong {
        font-size:17px;
        margin-top:9px
    }

    .story-book small {
        font-size:3px;
        left:11px;
        bottom:8px
    }

    .book-moon {
        width:20px;
        height:20px;
        right:13px;
        box-shadow:inset 7px -3px #f8e9c4
    }

    .question-bubble {
        font-size:20px;
        padding:18px;
        top:15%;
        right:10%
    }

    .question-orbit {
        width:145px;
        height:145px;
        top:5%;
        right:17%
    }

    .question-orbit span {
        font-size:37px
    }

    .resume-visual {
        top:20%;
        width:62%;
        right:17%
    }

    .resume-symbol {
        font-size:67px;
        line-height:1
    }

    .resume-labels {
        font-size:6px;
        margin-top:11px
    }

    .story-track-controls {
        left:7%;
        bottom:5%
    }

    .feelings-section {
        grid-template-columns:1fr;
        padding:85px 7%;
        gap:40px;
        min-height:0
    }

    .feelings-copy h2 {
        font-size:clamp(39px,10.7vw,55px)
    }

    .feelings-copy>p:not(.eyebrow) {
        font-size:13px;
        margin:23px 0
    }

    .breath-experience {
        padding:23px;
        border-radius:27px;
        max-width:440px;
        margin:auto
    }

    .breath-facts { font-size:8px; gap:8px 12px; margin-bottom:26px }
    .breath-facts span+span:before { margin-right:12px }
    .breath-guidance strong { font-size:22px }
    .breath-guidance>#breath-instruction { font-size:9px; max-width:145px }
    .breath-session-label { font-size:7px; letter-spacing:.06em }
    .breath-kicker { font-size:8px }
    .breath-steps { gap:8px; font-size:6px }
    .breath-steps b { font-size:8px; margin-left:3px }
    .breath-steps>#breath-count { font-size:7px }

    .night-copy {
        top:17%;
        left:8%
    }

    .night-copy h2 {
        font-size:clamp(55px,13vw,78px)
    }

    .night-copy>p:not(.eyebrow) {
        font-size:12px;
        line-height:1.8;
        margin:20px 0 14px
    }

    .night-product {
        width:79%;
        height:56%;
        right:-9%;
        bottom:-7%
    }

    .night-moon {
        width:40px;
        height:40px;
        right:12%;
        top:13%;
        box-shadow:inset 12px -4px #e7d4f2
    }

    .night-cloud {
        height:30%;
        bottom:-22%
    }

    .parents-section {
        padding:85px 8%
    }

    .parents-section .section-heading {
        display:block
    }

    .parents-section .section-heading>p {
        font-size:12px;
        margin-top:23px
    }

    .parent-features {
        grid-template-columns:1fr;
        gap:32px;
        padding:45px 0
    }

    .parent-features article {
        position:relative;
        padding-left:50px
    }

    .line-icon {
        position:absolute;
        left:0;
        top:0;
        font-size:26px
    }

    .parent-features h3 {
        font-size:18px;
        margin-bottom:9px
    }

    .parent-features p {
        font-size:12px
    }

    .faq {
        margin-top:45px
    }

    .faq>h3 {
        font-size:25px
    }

    .faq summary {
        font-size:12px;
        padding:21px 0
    }

    .faq details p {
        font-size:12px
    }

    .join-section {
        grid-template-columns:1fr;
        gap:25px;
        text-align:center;
        padding:40px 8% 70px
    }

    .join-art {
        max-width:230px;
        margin:auto
    }

    .join-section h2 {
        font-size:51px
    }

    .join-section p:not(.eyebrow) {
        font-size:12px
    }

    .join-section .eyebrow {
        margin-bottom:17px
    }

    .join-note {
        font-size:8px
    }

    .site-footer {
        flex-wrap:wrap;
        padding:28px 7%;
        gap:22px
    }

    .site-footer>span {
        order:3;
        flex-basis:100%;
        font-size:9px
    }

    .site-footer>a:last-child {
        font-size:9px
    }

    .signin-dialog {
        padding:28px 26px
    }

    .signin-portrait {
        height:90px
    }

    .signin-dialog h2 {
        font-size:26px
    }

    .topbar {
        min-height:65px;
        padding:12px 5%;
        gap:10px
    }

    .whoami {
        gap:8px;
        font-size:9px
    }

    .whoami>span {
        max-width:150px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    .setup-main {
        padding:34px 0 30px;
        width:90%;
        margin:0 auto
    }

    .setup-main h1 {
        font-size:35px
    }

    .setup-sub {
        font-size:11px;
        line-height:1.7;
        margin-top:13px
    }

    .experience-grid {
        gap:12px;
        margin:28px 0 24px
    }

    .exp-card {
        padding:13px 14px 20px;
        border-radius:17px
    }

    .exp-art {
        height:131px;
        margin-bottom:15px
    }

    .exp-art img {
        width:135px
    }

    .exp-check {
        top:13px;
        right:13px;
        width:17px;
        height:17px;
        font-size:9px
    }

    .exp-copy .eyebrow {
        font-size:6px;
        line-height:1.7;
        letter-spacing:.09em;
        min-height:20px;
        margin-bottom:6px
    }

    .exp-copy h2 {
        font-size:21px;
        line-height:1.12;
        min-height:47px
    }

    .exp-copy>p {
        font-size:10px;
        line-height:1.7
    }

    .mini-book {
        width:80px;
        height:112px;
        padding:10px
    }

    .mini-book>span:first-child {
        font-size:4px
    }

    .mini-book strong {
        font-size:16px;
        margin-top:10px
    }

    .mini-book-moon {
        font-size:25px
    }

    .seg-btn {
        padding:10px 13px;
        font-size:10px
    }

    .ls-desc {
        font-size:10px;
        max-width:300px
    }

    .setup-footnote {
        font-size:8px
    }

    .setup-main>.primary-btn {
        font-size:12px
    }

    .chat-top {
        min-height:65px
    }

    .chat-id strong {
        font-size:14px
    }

    .chat-id .status {
        font-size:9px
    }

    .top-actions {
        gap:5px
    }

    .language-badge {
        display:none
    }

    .pill-btn {
        font-size:10px;
        padding:9px 16px
    }

    .icon-btn {
        width:35px;
        height:35px;
        font-size:22px
    }

    .chat-layout {
        grid-template-columns:1fr;
        grid-template-rows:minmax(0,1fr) minmax(115px,.47fr) auto;
        gap:12px;
        padding:12px 5% max(17px,env(safe-area-inset-bottom))
    }

    .chat-stage>.eyebrow,.stage-note {
        display:none
    }

    #character-container {
        height:31dvh;
        max-height:330px;
        max-width:300px
    }

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

    #emotion-indicator {
        font-size:8px;
        margin:0 0 7px
    }

    #chat-panel {
        border-radius:17px
    }

    #chat-panel>header {
        padding:12px 16px
    }

    #chat-panel>header strong {
        font-size:11px;
        margin:0
    }

    #chat-panel>header>span {
        display:none
    }

    .conversation-empty {
        font-size:10px;
        padding:15px
    }

    .conversation-empty>span {
        display:none
    }

    #chat-messages {
        padding:12px;
        gap:10px
    }

    .message {
        font-size:11px;
        line-height:1.65
    }

    .message.assistant,.message.user {
        padding:10px 12px
    }

    .input-area {
        padding:7px 8px 7px 16px;
        gap:6px
    }

    #text-input {
        font-size:12px
    }

    #mic-btn {
        width:39px;
        height:39px
    }

    #send-btn,#stop-btn {
        width:30px;
        height:30px
    }

    .dock-divider {
        margin:0
    }

    #settings-panel {
        right:5%;
        top:70px;
        width:270px
    }

    .story-card {
        grid-template-columns:1fr;
        gap:15px;
        padding:20px 0 30px;
        width:86%;
        margin:0 auto
    }

    .story-stage {
        height:36dvh;
        max-height:360px
    }

    .story-information {
        text-align:center
    }

    .story-information .eyebrow {
        font-size:8px;
        margin-bottom:12px
    }

    .story-information h1 {
        font-size:38px
    }

    .story-teller {
        font-size:11px;
        margin:13px 0 19px
    }

    .story-status {
        justify-content:center
    }

    #story-progress {
        max-width:270px;
        margin:12px auto 24px
    }

    .story-actions {
        justify-content:center;
        gap:10px
    }

    .story-actions button {
        font-size:11px;
        padding:13px 19px
    }

    #story-hint {
        font-size:10px;
        margin:18px auto 0
    }

    .modal-card,.modal-content {
        padding:28px
    }

    .modal-card h2,.modal-content h2 {
        font-size:24px
    }

}

@media(max-width:380px) {
    .hero-detail strong { font-size:14px }
    .breath-guidance strong { font-size:19px }
}

/* Reduced motion retains every chapter and control without sticky scrubbing. */
.reduce-motion .scene {
    height:auto
}

.reduce-motion .stage {
    position:relative;
    height:100svh
}

.reduce-motion .hero-copy {
    opacity:1;
    transform:none;
    position:relative;
    inset:auto;
    width:100%
}

.reduce-motion .hero-product {
    transform:none;
    position:relative;
    inset:auto;
    height:55svh;
    margin-top:20px
}

.reduce-motion .detail-heading { display:none }
.reduce-motion .hero .stage { height:auto; min-height:100svh; display:grid; justify-items:center; padding:115px 7% 65px }
.reduce-motion .hero-details { display:flex; justify-content:center; gap:12px; width:100%; margin:20px 0 }
.reduce-motion .nimba-stage>img { animation:none }
.reduce-motion .nimba-hint { display:none }
.reduce-motion .hero .scroll-cue,.reduce-motion .hero-index { display:none }

.reduce-motion .hero-detail {
    display:block;
    position:relative;
    inset:auto;
    opacity:1;
    visibility:visible;
    transform:none;
    flex:1;
    max-width:230px
}

.reduce-motion .intro-inner h2 span {
    opacity:1!important
}

.reduce-motion .closer .stage {
    height:auto;
    min-height:930px;
    padding:115px 8% 400px
}

.reduce-motion .closer-copy {
    position:relative;
    inset:auto;
    width:auto;
    transform:none;
    opacity:1;
    max-width:600px
}

.reduce-motion .closer-copy-two {
    margin-top:55px
}

.reduce-motion .closer h2 {
    font-size:48px
}

.reduce-motion .closer-product {
    height:50%;
    width:50%;
    bottom:-6%;
    right:-5%;
    transform:none;
    opacity:.6
}

.reduce-motion .listening-demo {
    top:auto;
    bottom:100px;
    opacity:1;
    width:70%
}

.reduce-motion .child-thought span {
    opacity:1
}

.reduce-motion .story-track-wrap {
    overflow:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    padding-bottom:8px
}

.reduce-motion .story-track {
    transform:none
}

.reduce-motion .feature-panel {
    scroll-snap-align:center
}

.reduce-motion .night-product {
    transform:rotate(7deg)
}

.reduce-motion [data-reveal] {
    opacity:1;
    transform:none;
    transition:none
}

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

}

/* Shared control details. */
.panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px;
    border-bottom:1px solid #eee8f3;
    font-size:11px;
    color:#81698f
}

.panel-dot {
    width:5px;
    height:5px;
    background:#bfa4d2;
    border-radius:50%
}

.conversation-empty h2 {
    font-size:16px;
    letter-spacing:-.035em;
    font-weight:550;
    margin-bottom:10px
}

.conversation-empty p {
    font-size:11px
}

.stop-btn {
    width:36px;
    height:36px;
    border-radius:50%;
    background:none;
    color:#a28cad;
    font-size:12px
}

#settings-panel {
    display:none
}

#settings-panel.visible {
    display:block
}

#settings-panel .check {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    line-height:1.6
}

#settings-panel input[type='checkbox'] {
    width:15px;
    height:15px;
    accent-color:#9271ac
}

.story-top-label {
    margin-left:auto;
    color:#917b9f;
    font-size:9px;
    letter-spacing:.16em
}

.pw-fields {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:25px 0 15px
}

.modal-moon {
    display:block;
    font-size:30px;
    color:#a386bb;
    margin-bottom:20px
}

.modal-overlay {
    width:100%;
    max-width:none;
    height:100%;
    max-height:none;
    border:0;
    margin:0;
    background:transparent;
    backdrop-filter:none;
    color:var(--ink)
}

.modal-overlay::backdrop {
    background:#251c3b66;
    backdrop-filter:blur(12px)
}

.modal-overlay:not([open]) {
    display:none
}

.modal-status {
    margin:18px 0 0!important;
    font-size:11px!important
}

.story-information:has(.telling) .story-equalizer i {
    animation:moon-glow .8s infinite
}

@media(max-width:760px) {
    .panel-head {
        padding:12px 16px;
        font-size:10px
    }

    .conversation-empty h2 {
        font-size:13px;
        margin-bottom:6px
    }

    .conversation-empty p {
        font-size:10px
    }

    .conversation-empty p br {
        display:none
    }

    .story-top-label {
        font-size:7px;
        letter-spacing:.1em
    }

    .story-top .pill-btn {
        font-size:9px;
        padding:9px 14px
    }

    .stop-btn {
        width:30px;
        height:30px
    }

}

body[data-story-mode='bedtime'] .story-top .pill-btn {
    background:#382e48;
    color:#e5d7f1;
}
body[data-story-mode='bedtime'] .story-top-label { color:#bba6cb; }
body[data-story-mode='bedtime'] #story-progress,
body[data-story-mode='bedtime'] #story-progress::-webkit-progress-bar { background:#51415f; }

/* ── 谁来读这个故事 ────────────────────────────────────────────────────
   每个故事都有 Mochi 和 Nimba 两个音色版本。这个选择器放在「开始」按钮之前，
   因为一旦开讲就不能中途换人——音频是预渲染的，换音色等于换一整套文件。 */
.voice-picker { margin: 18px 0 4px; }
.voice-picker-label {
    margin: 0 0 10px; font-size: 11px; letter-spacing: .14em;
    color: var(--ink-soft, rgba(30,27,46,.5)); font-weight: 600;
}
.voice-options { display: flex; gap: 10px; flex-wrap: wrap; }
.voice-option {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px 9px 10px; border-radius: 999px;
    border: 1.5px solid var(--line, rgba(30,27,46,.12));
    background: transparent; cursor: pointer; font: inherit; font-size: 14px;
    color: var(--ink, #1e1b2e); transition: border-color .18s, background .18s, transform .18s;
}
.voice-option:hover:not([aria-checked="true"]) { border-color: rgba(30,27,46,.28); }
.voice-option[aria-checked="true"] {
    border-color: var(--ink, #1e1b2e); background: rgba(30,27,46,.05); font-weight: 600;
}
.voice-option:disabled { opacity: .4; cursor: not-allowed; }
.voice-option-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    background: rgba(30,27,46,.06);
}
.voice-option-dot {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 15px; background: rgba(30,27,46,.06);
}