/* One recognizable channel companion; reactions do not imply market outcomes. */
/* v6: labelled navigation and a quieter pair of life entrances. */
.mascot-scene{position:absolute;left:5%;top:40%;width:210px;z-index:4;display:flex;flex-direction:column;align-items:center;translate:calc(var(--journey) * 16px) calc(var(--journey) * -30px)}
.mascot-caption{font-size:15px;font-weight:600;background:var(--ink);color:var(--paper);padding:7px 14px;border-radius:14px 14px 14px 2px;rotate:-6deg;position:relative;z-index:1}
.mascot-play{display:grid;place-items:center;position:relative;width:200px;height:215px;padding:0;border:0;background:none;border-radius:24px;touch-action:manipulation}
.mascot-play img{height:200px;width:190px;object-fit:contain;filter:drop-shadow(0 8px 0 #1420321a);animation:mascot-idle 5s ease-in-out infinite;transition:scale 250ms var(--ease)}
.mascot-play:hover img,.mascot-play:focus-visible img{scale:1.06}.mascot-play.is-playing img{animation:mascot-hop 720ms steps(8,end) both}
.mascot-style{min-height:44px;min-width:86px;border:1px solid var(--line);border-radius:10px;padding:7px 13px;color:var(--ink);background:var(--paper);font-size:12px;font-weight:600;display:flex;gap:8px;align-items:center;justify-content:center}
.mascot-style:hover{background:var(--ink);color:var(--paper)}.mascot-style[aria-pressed=true]{box-shadow:3px 3px 0 var(--ink)}
.mascot-scene[data-style=pixel] .mascot-play img{image-rendering:pixelated;animation:mascot-pixel-idle 2s steps(2,end) infinite;width:178px;height:195px}
.mascot-scene[data-style=pixel] .mascot-play.is-playing img{animation:mascot-hop 720ms steps(8,end) both}
.mascot-spark{position:absolute;right:3px;top:35px;font-size:30px;color:var(--blue);opacity:0;pointer-events:none}.is-playing .mascot-spark{animation:mascot-spark 720ms steps(6,end) both}
.finance-mascot{width:108px;height:118px;right:22px;bottom:16px}.finance-mascot img{width:100%;height:100%;object-fit:contain}.dialog-mascot{position:absolute;right:0;top:8px;width:90px;height:100px;object-fit:contain}
.paused .mascot-play img,.stage-offscreen .mascot-play img,body[data-dialog=knowledge] .mascot-play img{animation:none!important}
.paused .mascot-scene{translate:none}.paused .mascot-play:hover img,.paused .mascot-play:focus-visible img{scale:1}
@keyframes mascot-idle{0%,80%,100%{translate:0 0;rotate:-3deg}88%{translate:0 -7px;rotate:3deg}94%{translate:0 -2px;rotate:-2deg}}
@keyframes mascot-pixel-idle{50%{translate:0 -4px}}
@keyframes mascot-hop{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -18px;rotate:-8deg}55%{translate:0 0;rotate:4deg}75%{translate:0 -7px;rotate:-3deg}}
@keyframes mascot-spark{0%,100%{opacity:0;scale:.5;translate:0 10px}30%,70%{opacity:1;scale:1;translate:0 -12px}}
@media(min-width:1700px){.mascot-scene{left:9%;top:38%;width:245px}.mascot-play{width:230px;height:245px}.mascot-play img{width:220px;height:235px}}
@media(max-width:1100px){.mascot-scene{left:3%;width:156px;top:45%}.mascot-play{width:145px;height:165px}.mascot-play img{width:135px;height:155px}.mascot-scene[data-style=pixel] .mascot-play img{width:140px;height:156px}}
@media(max-width:720px){.mascot-scene{left:0;top:44%;width:102px;translate:0 calc(var(--journey) * -14px)}.mascot-caption{font-size:11px;padding:5px 8px}.mascot-play{width:96px;height:108px}.mascot-play img{width:90px;height:100px}.mascot-scene[data-style=pixel] .mascot-play img{width:88px;height:100px}.mascot-style{min-width:76px;font-size:11px;padding:5px 8px}.mascot-spark{font-size:22px;right:0;top:20px}.finance-mascot{width:92px;height:98px;right:18px;bottom:10px}.dialog-mascot{width:75px;height:83px;right:0;top:12px}}
@media(max-width:360px){.mascot-scene{width:87px;left:0;top:44%}.mascot-play{width:84px;height:92px}.mascot-play img{width:78px;height:86px}.mascot-scene[data-style=pixel] .mascot-play img{width:80px;height:89px}.finance-mascot{width:76px;height:88px;right:12px}}
@media(prefers-reduced-motion:reduce){.mascot-scene{translate:none!important}.mascot-play img,.mascot-spark{animation:none!important;transition:none!important}.mascot-play:hover img,.mascot-play:focus-visible img{scale:1}}

/* Mobile composition: keep Finance above the portrait's protected face zone. */
@media(max-width:720px){:root{--stage-size:640px}.stage{height:var(--stage-size)}.note-money{top:145px;width:100px;height:96px;padding:9px;right:7px;transform:rotate(7deg)}.note-money svg{height:34px}.note-money .mini-caption{font-size:12px}.note-bottom{font-size:9px}}
@media(max-width:360px){:root{--stage-size:610px}.note-money{top:136px;width:97px;height:96px;right:6px}}

@media(max-width:720px){.header nav{gap:8px;font-size:12px}.header nav a{white-space:nowrap}}

/* Ink and reading surfaces switch together; only geometry interpolates. */
.header{transition:border-color 280ms}
.world{transition:transform 380ms var(--ease)}
.world-arrow{transition:transform 360ms var(--ease)}
.float-note{transition:transform 600ms var(--ease)}
.knowledge-links a{transition:transform 200ms var(--ease)}

dialog .close{color:#142032}
dialog .close:hover{background:#142032;color:#fff}

.world:after{transition:transform 550ms var(--ease)}
@media(max-width:720px){.note-money .note-bottom{display:none}.note-money svg{height:48px;margin-top:8px}}

/* Accepted portrait stage remains the focal point; the menu has its own rhythm. */
/* Menu trial B: a single restrained rail, with room around each labelled action. */
.header nav{background:#e6ecf5;border:1px solid #d4dce9;border-radius:12px;padding:3px}
html[data-theme=dark] .header nav{background:#111c2e;border-color:#455570}
@media(max-width:720px){.header nav{border-radius:10px;padding:3px;column-gap:4px!important}}
.header{gap:20px;padding-block:18px}
.header nav{gap:6px;font-family:Mitr,Anuphan,sans-serif;font-size:15px;font-weight:400;align-items:center}
.header nav a{min-height:44px;padding:11px 14px;border-radius:8px;white-space:nowrap;transition:translate 220ms var(--ease)}
.header nav a:after{left:14px;right:14px;bottom:5px;border-radius:2px}
.header nav a:hover,.header nav a:focus-visible{translate:0 -3px;background:#e3e9f4}
.header nav a[aria-expanded=true]{background:var(--ink);color:var(--paper)}
.view-controls{gap:4px}.theme-toggle,.motion{width:44px;height:44px;min-width:44px;padding:0;justify-content:center;border-color:transparent;border-radius:50%}
.theme-text,.motion-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.theme-toggle:hover,.motion:hover{background:#dfe6f1;color:#142032}
.view-controls button:focus-visible{outline-offset:2px}
.worlds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.world{grid-column:span 2;min-height:270px;padding:30px}
.world-life{grid-column:span 3;min-height:210px;color:#142032;background:#e3eee9;border:1px solid #7b9187;--entry-angle:1deg}
.world-interests{background:#ece5f2;border-color:#9b86af;--entry-angle:-1deg}
.world-life .world-mini,.world-life .world-sub{color:#34485a}
.world-life:after{background:#c2d8ce}
.world-interests:after{background:#d9cbe6}
.world-life:hover,.world-life:focus-visible{background:#cde2d8;color:#142032}
.world-interests:hover,.world-interests:focus-visible{background:#deceed}
.world-life .world-arrow{border-color:#748a80}
.world-title{font-size:32px}
.world:not(.world-life) .world-title,.world:not(.world-life) .world-sub{max-width:calc(100% - 104px);padding-right:0}
.world:not(.world-life) .world-title-small{font-size:22px}
.world-sub{line-height:1.6}
.world-art{opacity:1}
.ai-mascot{width:152px;height:152px;right:10px;bottom:9px}
.ai-mascot img{width:100%;height:100%;object-fit:contain}
.finance-mascot{width:112px;height:124px;bottom:14px;right:16px}
.about-art{right:22px}
.world:hover .world-art,.world:focus-visible .world-art{transform:translateY(-5px) rotate(-5deg) scale(1.08)}
.breath-art{width:126px;height:126px;right:28px;bottom:30px;display:grid;place-items:center}
.breath-art i{position:absolute;inset:0;border:1px solid #337768;border-radius:50%;animation:quiet-breath 6s ease-in-out infinite}
.breath-art i:nth-child(2){inset:18px;animation-delay:-1s}.breath-art i:nth-child(3){inset:40px;background:#337768;border:0}
.vinyl-art{width:126px;height:126px;border-radius:50%;background:repeating-radial-gradient(circle,#233046 0 3px,#3d4a60 4px 5px);right:28px;bottom:30px;display:grid;place-items:center}
.vinyl-art i{width:42px;height:42px;border-radius:50%;background:#d5ef71;border:17px solid #bbaeec}
.vinyl-art>span{position:absolute;right:-9px;top:-6px;font-size:30px;color:#533980}
.world-interests:hover .vinyl-art i{rotate:180deg;transition:rotate 800ms var(--ease)}
.world-life .world-sub{max-width:calc(100% - 130px)}
body[data-world=focus] .disc{background:#337768}body[data-world=interests] .disc{background:#7751a8}
.dialog-open .stage *,.dialog-open .world-art,.dialog-open .breath-art i{animation-play-state:paused!important}
.dialog-open .mascot-play img{animation:none!important}
.dialog-mascot{width:144px;height:144px;top:-8px;right:0}
dialog h2{padding-right:155px}
#interests .dialog-mascot{width:106px;height:132px;top:0}
#interests h2{padding-right:116px}
html[data-theme=dark] .header nav a:hover,html[data-theme=dark] .header nav a:focus-visible{background:#173355;color:#f0f0f5}
html[data-theme=dark] .header nav a[aria-expanded=true]{background:#e2c98f;color:#142032}
html[data-theme=dark] .world-life{border-color:#8ba597}
html[data-theme=dark] .world-interests{border-color:#a594b9}
html[data-theme=dark] .world-life:hover,html[data-theme=dark] .world-life:focus-visible{background:#cde2d8}
html[data-theme=dark] .world-interests:hover,html[data-theme=dark] .world-interests:focus-visible{background:#deceed}
@keyframes quiet-breath{50%{scale:.84;opacity:.65}}
@media(min-width:1700px){.header nav{font-size:18px;gap:14px}.world{padding:38px;min-height:290px}.world-title{font-size:38px}.world-life{min-height:225px}}
@media(max-width:1100px){.header{flex-wrap:wrap;gap:8px;padding:14px 24px}.header nav{order:3;width:100%;justify-content:center;gap:10px;font-size:15px}.view-controls{margin-left:auto}.world{padding:24px;min-height:260px}.world-title{font-size:29px}.ai-mascot{width:128px;height:128px;right:4px}.world:not(.world-life) .world-title,.world:not(.world-life) .world-sub{max-width:calc(100% - 82px)}.world-life{min-height:190px}}
@media(max-width:850px) and (min-width:721px){.worlds{grid-template-columns:repeat(2,minmax(0,1fr))}.world{grid-column:span 1}.world-knowledge{grid-column:span 2}.world-knowledge .world-sub{max-width:65%}.world-life .world-sub{max-width:calc(100% - 105px)}.world-life .world-title{font-size:27px}.breath-art,.vinyl-art{width:96px;height:96px;right:18px}}
@media(max-width:720px){.header{padding:12px 16px 8px;gap:8px}.header nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;font-size:14px;text-align:center}.header nav a{grid-column:span 2;padding:10px 2px;min-height:44px}.header nav a:nth-child(n+4){grid-column:span 3}.header nav a:after{left:12%;right:12%}.header nav a:hover,.header nav a:focus-visible{translate:0 -2px}.worlds{display:flex;gap:12px}.world{min-height:174px;padding:22px 24px}.world-title{font-size:28px}.world:not(.world-life) .world-title,.world:not(.world-life) .world-sub{max-width:calc(100% - 90px)}.world:not(.world-life) .world-title-small{font-size:20px}.ai-mascot{width:128px;height:128px;right:6px;bottom:8px}.finance-mascot{width:96px;height:108px;right:16px;bottom:14px}.world-life{min-height:174px;margin-top:4px}.world-life+.world-life{margin-top:0}.breath-art,.vinyl-art{width:92px;height:92px;right:22px;bottom:27px}.breath-art i:nth-child(2){inset:13px}.breath-art i:nth-child(3){inset:30px}.vinyl-art i{width:32px;height:32px;border-width:12px}.world-life .world-sub{max-width:calc(100% - 85px)}.world-mini{font-size:13px}.world-sub{font-size:14px}.dialog-mascot{width:114px;height:114px;top:4px}dialog h2{padding-right:118px;font-size:42px}.knowledge-links small{font-size:14px}.dialog-top{font-size:14px}}
@media(max-width:360px){.header{padding-inline:12px}.header nav{font-size:13px}.world{padding-inline:20px}.world-title{font-size:25px}.world:not(.world-life) .world-title-small{font-size:19px}.world:not(.world-life) .world-title,.world:not(.world-life) .world-sub{max-width:calc(100% - 75px)}.ai-mascot{width:112px;height:112px;right:2px}.finance-mascot{width:82px;height:98px;right:12px}.world-life .world-sub{max-width:calc(100% - 88px)}.breath-art,.vinyl-art{width:82px;height:82px;right:18px}.world-sub{font-size:13px}dialog h2{font-size:37px;padding-right:100px}.dialog-mascot{width:96px;height:108px}#interests .dialog-mascot{width:86px;height:110px}#interests h2{padding-right:90px}}
.paused .breath-art i{animation:none!important}.paused .header nav a{translate:none;transition:none}
.world-life.is-offscreen .breath-art i{animation-play-state:paused!important}
.worlds .world-interests{border:1px solid #9b86af}
@media(max-width:720px){.world-life{border:1px solid #7b9187}.world-interests{border-color:#9b86af}}
/* Shared public identity: real person in the brand, context-fit life stickers. */
.logo{gap:9px}.brand-face{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--line)}
.world-note-icons{display:block;text-align:center;white-space:nowrap;font-size:27px;letter-spacing:2px;min-height:68px;padding-top:12px}
.life-mascot{width:132px;height:148px;right:25px;bottom:14px;background:none;border:0;box-shadow:none}.life-mascot img{width:100%;height:100%;object-fit:contain}.world-life .world-title,.world-life .world-sub{max-width:calc(100% - 130px)}
@media(max-width:1100px){.life-mascot{width:110px;height:126px;right:16px}.world-life .world-title,.world-life .world-sub{max-width:calc(100% - 105px)}}
@media(max-width:720px){.brand-face{width:30px;height:30px}.logo{gap:7px;font-size:18px}.world-note-icons{font-size:20px;letter-spacing:1px;min-height:50px}.life-mascot{width:100px;height:118px;right:14px;bottom:12px}.world-life .world-title,.world-life .world-sub{max-width:calc(100% - 90px)}.header nav a{font-size:13px}}
@media(max-width:360px){.brand-face{width:26px;height:26px}.logo{gap:5px;font-size:17px}.life-mascot{width:86px;height:106px;right:8px}.world-life .world-title,.world-life .world-sub{max-width:calc(100% - 78px)}.header nav a{font-size:12px}.world-note-icons{font-size:16px}}
.nav-finance-short{display:none}
.mascot-style{font-size:14px}
@media(max-width:360px){.header nav{font-size:14px}.nav-finance-full{display:none}.nav-finance-short{display:inline}}
@media(prefers-reduced-motion:reduce){.breath-art i{animation:none!important}.header nav a{translate:none!important}.vinyl-art i{transition:none!important}}