@charset "UTF-8";
:root{color-scheme:light;--ink:#243e4c;--muted:#627570;--paper:#faf9f6;--sage:#778f7d;--line:#dedfd7;--room:#f0f1e9;--cup:#dce5d7;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #557967;outline-offset:5px}button{touch-action:manipulation}a{color:inherit}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:absolute;top:-100px;left:20px;z-index:20;background:white;padding:12px}.skip-link:focus{top:15px}
.site-header{max-width:1320px;margin:auto;padding:29px 54px;display:flex;align-items:center;justify-content:space-between;gap:18px}.wordmark{text-decoration:none;font-family:Arial,sans-serif;font-weight:700;font-size:26px;letter-spacing:.045em;white-space:nowrap}.wordmark>span:first-child{font-weight:400}.wordmark-dot{color:#8b9e8a}.brand-caption{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-weight:500;font-size:14px;letter-spacing:.07em;margin-left:14px;display:inline-block}.preferences{display:flex;gap:8px}.preference{background:transparent;border:1px solid transparent;border-radius:24px;min-height:44px;padding:8px 13px;display:flex;align-items:center;gap:8px;font-size:13px;color:#5b6c69;white-space:nowrap}.preference svg{width:17px;height:17px}.preference:hover{background:#edeee7}.preference[aria-pressed=true]{border-color:#dce2d7}.preference[aria-pressed=false] svg{opacity:.65}
main{max-width:1212px;margin:0 auto;padding:18px 42px 0}.rest-layout{display:grid;grid-template-columns: .75fr 1.25fr;gap:52px;align-items:center}.introduction{padding:5px 0 0 15px}.eyebrow{font-size:13px;letter-spacing:.14em;color:#5e746a;margin:0 0 28px;display:flex;align-items:center;gap:9px}.eyebrow span{width:6px;height:6px;border-radius:50%;background:#8b9f86}.introduction h1{font-size:clamp(42px,4.5vw,62px);font-weight:500;line-height:1.55;letter-spacing:.1em;margin:0 0 27px}.intro-copy{font-size:17px;line-height:2.1;letter-spacing:.075em;margin:0 0 20px}.gentle-note{font-size:14px;line-height:2.1;letter-spacing:.04em;color:var(--muted)}.little-line{width:36px;height:1px;background:#bac5b4;margin:32px 0 22px}.desktop-whisper{font-size:13px;color:#6e7d76;line-height:2}
.experience{min-width:0}.room{height:510px;position:relative;overflow:hidden;background:linear-gradient(125deg,#f2f1e9,#eef1eb 60%,#e8eee6);border-radius:160px 160px 22px 22px;isolation:isolate;transition:background 1.2s}.room-label{position:absolute;left:0;right:0;text-align:center;top:30px;font:10px Arial,sans-serif;letter-spacing:.19em;color:#76897a}.window{position:absolute;width:148px;height:212px;top:69px;right:49px;border:9px solid #fffef7;border-bottom-width:14px;border-radius:74px 74px 3px 3px;background:linear-gradient(#dce9e9,#f0f3e8);box-shadow:8px 9px 24px #52684706;overflow:hidden}.window-bar{position:absolute;top:0;bottom:0;left:48%;width:7px;background:#fffef7}.window-bar:after{content:"";position:absolute;width:145px;height:7px;left:-73px;top:112px;background:#fffef7}.cloud{position:absolute;background:#fffdf5;opacity:.6;border-radius:100%;width:94px;height:24px}.cloud-one{top:47px;left:-25px;animation:cloud-drift 45s ease-in-out infinite alternate}.cloud-two{top:85px;right:-38px;width:100px;height:14px;animation:cloud-drift 54s ease-in-out infinite alternate-reverse}.light-patch{position:absolute;inset:220px -80px 0 170px;transform:rotate(24deg);background:linear-gradient(180deg,#fffeed70,#fffeed05);filter:blur(5px)}.room-floor{position:absolute;left:0;right:0;bottom:0;height:125px;background:linear-gradient(180deg,#dddccd00,#d4dccd42);border-top:1px solid #ffffff26}.plant{position:absolute;left:22px;bottom:74px;width:102px;height:187px;stroke:none;transform-origin:bottom;animation:plant-sway 14s ease-in-out infinite alternate}.side-table{position:absolute;right:32px;bottom:68px;width:95px;height:122px}.table-top{position:absolute;top:42px;width:95px;height:17px;border-radius:50%;background:#cbc7b7;box-shadow:0 3px 0 #b9b6a8}.table-leg{position:absolute;left:45px;top:57px;width:6px;height:65px;background:#b9b6a8}.table-leg:after{content:"";position:absolute;bottom:0;left:-28px;width:62px;height:9px;background:#b9b6a8;border-radius:50%}.tiny-cup{position:absolute;top:12px;left:28px;width:28px;height:29px;background:#9aafa2;border-radius:2px 2px 10px 10px;z-index:1}.tiny-cup:after{content:"";position:absolute;top:4px;right:-10px;width:12px;height:15px;border:3px solid #9aafa2;border-radius:50%}.tiny-cup span{position:absolute;width:42px;height:5px;background:#d4dbcc;bottom:-4px;left:-7px;border-radius:50%}.tiny-cup:before{content:"";position:absolute;left:13px;top:-24px;width:4px;height:18px;border-radius:100%;background:#fffefa90;filter:blur(1px);animation:steam 3s ease-out infinite}
.character-zone{position:absolute;left:50%;top:92px;width:272px;height:340px;transform:translateX(-50%);z-index:2}.character-shadow{position:absolute;bottom:-3px;left:18%;width:64%;height:21px;border-radius:50%;background:#39493821;filter:blur(10px);animation:shadow-breathe 6s ease-in-out infinite}.character-float{height:100%;animation:idle-breathe 6s ease-in-out infinite}.character{border:0;background:none;display:block;position:relative;padding:0;width:100%;height:100%;user-select:none;touch-action:none;cursor:grab;border-radius:44%;outline-offset:-16px}.character:active{cursor:grabbing}.character-tilt{display:block;height:100%;width:100%;transform:rotate(var(--lean,0deg)) translateY(var(--lift,0px));transform-origin:50% 82%;transition:transform .3s ease-out}.character-art{display:block;width:100%;height:100%;background-image:url("assets/hobiroa-states.png");background-size:200% 200%;background-position:0 0;background-repeat:no-repeat;pointer-events:none}.character-art.fallback{background-image:url("assets/hobiroa-original.png");background-size:contain;background-position:center bottom}.bubble{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);margin:0;padding:9px 21px;border-radius:23px;background:#fffefaed;font-size:14px;letter-spacing:.04em;white-space:nowrap;z-index:3;min-height:43px;max-width:95%;box-shadow:0 4px 20px #42524204}.bubble:before{content:"";position:absolute;top:-5px;left:50%;width:11px;height:11px;background:inherit;transform:rotate(45deg)}.touch-feedback{pointer-events:none;position:absolute;left:50%;top:180px;width:62px;height:62px;border:1px solid #ffffffe6;border-radius:50%;opacity:0;z-index:4}.touch-feedback.show{animation:touch-ripple .65s ease-out}.light-switch{display:flex;gap:2px;position:absolute;bottom:13px;right:12px;z-index:4;background:#fffefa99;padding:3px;border-radius:30px}.light-choice{display:flex;align-items:center;justify-content:center;gap:4px;border:0;background:transparent;border-radius:25px;min-width:43px;height:36px;padding:5px;color:#728177;font-size:11px}.light-choice svg{width:16px;height:16px}.light-choice[aria-pressed=true]{background:#e0e7d9;color:#344f3e}.light-choice span{display:none}.interaction-hint{text-align:center;font-size:13px;color:#6b7a74;margin:17px 0 13px;letter-spacing:.015em}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.action{display:flex;align-items:center;justify-content:center;gap:7px;min-height:58px;background:#fffefa;border:1px solid #e0e3d8;border-radius:14px;padding:11px 7px;font-size:13px;white-space:nowrap;transition:background .18s,transform .18s}.action svg{width:20px;height:20px;color:#738a77}.action:hover{background:#edf1e6;transform:translateY(-2px)}.action:active{transform:translateY(1px)}.tea-action{background:#e5ebdf;border-color:#d7dfce}.tea-action[aria-pressed=true]{background:#cad9c5}.no-task{text-align:center;font-size:12px;color:#788579;margin:17px 0 0;letter-spacing:.06em}
.quiet-footer{display:flex;justify-content:center;align-items:center;gap:25px;margin:49px 0 0;border-top:1px solid var(--line);padding:27px 0 24px}.quiet-footer p{font-size:13px;color:var(--muted);margin:0}.quiet-footer a{display:inline-flex;align-items:center;gap:13px;text-decoration:none;font-size:14px}.quiet-footer a:hover{text-decoration:underline}.quiet-footer svg{width:18px;height:18px}.site-footer{max-width:1212px;margin:auto;padding:12px 42px 28px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;color:#7a847b;font-size:11px;letter-spacing:.02em}.about{position:relative;max-width:480px;text-align:right}.about summary{cursor:pointer;list-style:none;min-height:30px}.about summary:after{content:" ＋"}.about[open] summary:after{content:" −"}.about-content{font-size:13px;text-align:left;line-height:1.9;padding:12px 17px;background:#f0f1ea;border-radius:10px;margin-top:8px}.about-content p:first-child{margin-top:0}.about-content button{background:transparent;border:1px solid #cad2c4;padding:6px 12px;border-radius:6px;min-height:40px;font-size:12px}
body[data-state=happy] .character-art,body[data-state=stroke] .character-art{background-position:100% 0}body[data-state=held] .character-art,body[data-state=sleepy] .character-art{background-position:0 100%}body[data-state=tea] .character-art{background-position:100% 100%}body[data-state=happy] .character-float{animation:happy-bounce .75s ease-out}body[data-state=stroke] .character-float{animation:stroke-sway 2.8s ease-in-out infinite}body[data-state=held] .character-float{animation:idle-breathe 9s ease-in-out infinite}body[data-state=tea] .character-float{animation:tea-sway 7s ease-in-out infinite}body[data-state=tea] .tiny-cup{opacity:0}body[data-state=sleepy] .character-tilt{transform:rotate(-3deg)}
body[data-light=evening]{--room:#ece4da}body[data-light=evening] .room{background:linear-gradient(125deg,#efe8df,#e9e5db 65%,#e0e4d9)}body[data-light=evening] .window{background:linear-gradient(#cbd4de,#f1dcca)}body[data-light=evening] .light-patch{background:linear-gradient(180deg,#ffe4b580,#ffe6b800)}
@keyframes idle-breathe{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-4px) rotate(.3deg)}}@keyframes shadow-breathe{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.94);opacity:.7}}@keyframes happy-bounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-13px) rotate(-2deg)}55%{transform:translateY(0) rotate(1deg)}75%{transform:translateY(-5px)}}@keyframes stroke-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}@keyframes tea-sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg) translateY(-2px)}}@keyframes touch-ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(.45)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.65)}}@keyframes plant-sway{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}@keyframes steam{0%{transform:translateY(3px);opacity:0}35%{opacity:.8}100%{transform:translateY(-14px);opacity:0}}@keyframes cloud-drift{from{transform:translateX(0)}to{transform:translateX(20px)}}
body[data-motion=off] *,body[data-motion=off] *:before,body[data-motion=off] *:after{animation:none!important;transition:none!important}body[data-motion=off] .character-tilt{transform:none!important}body[data-motion=off] .action:hover{transform:none}body[data-hidden=true] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){body:not([data-user-motion=on]) *,body:not([data-user-motion=on]) *:before,body:not([data-user-motion=on]) *:after{animation:none!important;transition:none!important}body:not([data-user-motion=on]) .character-tilt{transform:none!important}}
@media(min-width:1400px){main{padding-top:35px}.room{height:550px}.character-zone{top:107px;width:295px;height:366px}.window{top:87px}.plant{bottom:81px}.quiet-footer{margin-top:52px}}
@media(max-width:1040px){.site-header{padding:22px 30px}.brand-caption{display:none}main{padding:16px 30px 0}.rest-layout{gap:25px;grid-template-columns:.7fr 1.3fr}.introduction{padding-left:0}.introduction h1{font-size:43px}.eyebrow{font-size:11px;letter-spacing:.06em}.room{height:475px}.character-zone{top:94px;width:253px;height:310px}.window{right:26px;width:125px;height:185px}.plant{left:6px;width:81px;height:149px}.side-table{right:16px;transform:scale(.8);transform-origin:bottom right}.action{font-size:12px;gap:4px}.action svg{width:17px}.light-switch{bottom:82px}.site-footer{padding-left:30px;padding-right:30px}}
@media(max-width:740px){.site-header{padding:17px 20px 10px}.wordmark{font-size:22px}.preferences{gap:1px}.preference{font-size:11px;padding:6px 8px;gap:5px;min-height:40px}.preference svg{width:15px;height:15px}main{padding:8px 20px 0;max-width:530px}.rest-layout{display:block}.introduction{text-align:center;margin:11px 0 23px}.eyebrow{justify-content:center;font-size:11px;letter-spacing:.08em;margin:0 0 11px}.introduction h1{font-size:34px;letter-spacing:.07em;line-height:1.55;margin:0 0 9px}.introduction h1 br{display:none}.intro-copy{font-size:13px;line-height:1.85;letter-spacing:.03em;margin:0}.intro-copy br{display:none}.gentle-note,.little-line,.desktop-whisper{display:none}.room{height:380px;border-radius:110px 110px 20px 20px}.room-label{font-size:8px;top:20px;letter-spacing:.18em}.character-zone{top:63px;width:242px;height:271px}.window{top:49px;width:108px;height:162px;right:26px;border-width:7px}.window-bar:after{top:84px}.plant{bottom:61px;left:8px;width:74px;height:136px}.side-table{bottom:51px;right:11px;transform:scale(.63)}.bubble{bottom:17px;font-size:12px;padding:7px 15px;min-height:36px}.room-floor{height:87px}.character-shadow{bottom:2px;width:58%;left:21%}.light-switch{bottom:68px;right:9px}.light-choice{min-width:35px;height:33px}.light-choice svg{width:14px;height:14px}.light-patch{inset:180px -60px 0 160px}.interaction-hint{font-size:11px;margin:13px 0 11px}.actions{gap:8px}.action{flex-direction:column;font-size:11px;gap:5px;min-height:67px;padding:8px 3px;border-radius:12px}.action svg{width:20px;height:20px}.no-task{font-size:11px;margin-top:13px}.quiet-footer{margin-top:28px;padding:21px 0;gap:18px}.quiet-footer p{font-size:11px}.quiet-footer a{font-size:12px;gap:8px}.site-footer{max-width:530px;padding:2px 20px 25px;font-size:10px;gap:12px}.about{max-width:60%}.about-content{position:relative;margin-left:-120px;font-size:12px}.about-content button{font-size:11px}}
@media(max-width:360px){.site-header{padding-left:13px;padding-right:13px}.wordmark{font-size:20px}.preference{padding:6px;font-size:11px}main{padding-left:13px;padding-right:13px}.introduction h1{font-size:31px}.room{height:355px}.character-zone{top:56px;width:221px;height:250px}.window{right:20px;width:93px;height:145px}.plant{width:66px;left:3px}.room-label{font-size:7px}.light-switch{right:6px}.quiet-footer{gap:12px}.site-footer{padding-left:13px;padding-right:13px}}
/* Sprite viewBoxes align each original image frame without modifying the artwork. */
.character-art{background:none!important;stroke:none;overflow:hidden}.character-art image{pointer-events:none}
.lazy-action{grid-column:1/-1;flex-direction:row;min-height:45px;background:#f2f0e9;border-color:#e6e1d7;font-size:13px;gap:10px}.lazy-action[aria-pressed=true]{background:#e8e6da}.lazy-dots{letter-spacing:4px;color:#8a9488;margin-left:7px}
body{--rest-width:330px}body[data-lazy=true] .character-zone{top:auto;bottom:74px;width:var(--rest-width);height:320px}body[data-lazy=true] .character-float{animation:lazy-breathe 8s ease-in-out infinite}body[data-state=sit] .character-zone,body[data-state=stretch] .character-zone{width:272px;height:300px}body[data-state=lazyHappy] .character-float{animation:lazy-nod 2.7s ease-in-out}body[data-lazy=true] .character-shadow{width:80%;left:10%;bottom:-3px}.light-choice{min-height:44px;min-width:44px}
@keyframes lazy-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}@keyframes lazy-nod{0%,100%{transform:rotate(0)}40%{transform:rotate(-1.3deg)}70%{transform:rotate(.5deg)}}
@media(max-width:740px){body{--rest-width:280px}.action{font-size:12px}.interaction-hint{font-size:12px}.preference{font-size:12px}.lazy-action{font-size:13px;min-height:46px;flex-direction:row}.light-switch{bottom:66px}.light-choice{min-width:38px;min-height:40px}body[data-lazy=true] .character-zone{height:255px;bottom:56px}body[data-state=sit] .character-zone,body[data-state=stretch] .character-zone{width:245px;height:235px}.no-task{font-size:12px}}
/* A quiet view removes the choice of actions while keeping the way back visible. */
[hidden]{display:none!important}.quiet-control{display:flex;justify-content:center;margin:12px 0 0}.quiet-toggle{border:0;background:none;color:#586e60;padding:9px 14px;min-height:44px;border-radius:24px;display:inline-flex;align-items:center;gap:8px;font-size:14px}.quiet-toggle svg{width:18px;height:18px}.quiet-toggle:hover,.quiet-toggle[aria-pressed=true]{background:#ecefe5}body[data-quiet=true] .bubble,body[data-quiet=true] .interaction-hint{visibility:hidden}body[data-quiet=true] .no-task{color:#637264}.no-task{margin-top:5px}.character-tilt{-webkit-touch-callout:none}body[data-tea=true] .tiny-cup{opacity:0}
.action{font-size:14px}.interaction-hint{font-size:14px}.bubble{font-size:15px}.site-footer{font-size:12px}.no-task{font-size:13px}
@media(max-width:740px){.actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.action{min-height:59px;flex-direction:row;gap:7px;font-size:14px;padding:10px 6px;white-space:normal;line-height:1.6}.lazy-action{grid-column:auto;font-size:13px;gap:5px}.lazy-dots{display:none}.interaction-hint{font-size:13px}.bubble{font-size:14px}.eyebrow{font-size:12px}.intro-copy{font-size:14px}.quiet-footer p,.quiet-footer a{font-size:13px}.site-footer{font-size:11px}.light-choice{min-width:44px;min-height:44px}.light-switch{right:7px}.room{border-radius:100px 100px 20px 20px}}
@media(max-width:360px){.action{font-size:13px}.lazy-action{font-size:12px}.interaction-hint{font-size:12px}.preferences{gap:0}.preference{font-size:11px}}
/* Keep moving characters inside the room; vertical swipes can still scroll the page. */
.character-zone{left:calc(50% + var(--walk-x,0px));transition:left var(--walk-duration,0ms) linear;max-width:calc(100% - 20px)}
.character{touch-action:pan-y}.character-art{-webkit-user-select:none;user-select:none}
body[data-state=walking] .character-float{animation:stroll 1.56s ease-in-out infinite}
body[data-state=walking][data-direction=left] .character-art{transform:scaleX(-1)}
body[data-state=walking] .character-shadow{animation:shadow-breathe 1.56s ease-in-out infinite}
body[data-lazy=true][data-reaction=tap] .character-float{animation:lazy-nod 2.7s ease-in-out}
@keyframes stroll{0%,50%,100%{transform:translateY(0) rotate(-.5deg)}25%,75%{transform:translateY(-2px) rotate(.5deg)}}
.bubble{width:max-content;max-width:calc(100% - 28px);white-space:normal;text-align:center;line-height:1.65;overflow-wrap:anywhere}
.room-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:15px 0 10px;padding:0 3px}
.room-controls .light-switch{position:static;background:#eeefe7;border:1px solid #e1e5db;padding:3px;gap:3px}
.room-controls .light-choice{height:40px;min-height:44px;min-width:56px;padding:7px 9px;gap:6px;font-size:13px}
.room-controls .light-choice span{display:inline}
.room-controls .quiet-toggle{font-size:14px;padding:9px 12px}
.walk-action{grid-column:1/-1;min-height:44px;background:transparent;border-color:transparent;font-size:14px;color:#54705d}
.walk-action:hover{background:#eef1e7;transform:none}.walk-action:disabled{opacity:.45;cursor:default;background:transparent;transform:none}
.no-task{color:#5d705f}.site-footer{color:#5f7164}.about summary{min-height:44px;padding:6px 0}.about-content{font-size:14px;overflow-wrap:anywhere}.about-content button{min-height:44px}
@media(max-width:740px){.room-controls{margin-top:13px;gap:7px}.room-controls .light-choice{min-width:51px;padding:7px}.room-controls .quiet-toggle{font-size:13px;padding:9px 8px}.walk-action{grid-column:1/-1;min-height:43px}.about[open]{max-width:100%;flex-basis:100%}.about-content{margin-left:0;font-size:14px}.site-footer{flex-wrap:wrap}.bubble{bottom:17px}}
@media(max-width:360px){.room-controls{padding:0}.room-controls .light-choice{min-width:48px}.room-controls .quiet-toggle{font-size:12px;padding:9px 5px}}
/* Readable controls remain usable when text wraps or the viewport narrows. */
.actions{grid-template-columns:repeat(3,minmax(0,1fr))}.action{white-space:normal;line-height:1.6}.action span{min-width:0}.action svg{flex-shrink:0}
.script-note{font-size:14px;line-height:1.9;padding:14px 18px;background:#eef1e7;border-radius:12px}
.about summary::-webkit-details-marker{display:none}.site-footer{font-size:13px}
@media(max-width:740px){.actions{grid-template-columns:repeat(2,minmax(0,1fr))}.preference{min-height:44px}}
/* Travel and body motion share one frame clock; only pose dimensions transition. */
body{--stand-bottom:78px;--joy-width:350px}
.character-zone{left:50%;top:auto;bottom:var(--stand-bottom);transform:translate3d(calc(-50% + var(--walk-x,0px)),0,0);transition:width .55s ease,height .55s ease,bottom .55s ease;will-change:transform}
body[data-state=walking] .character-float{animation:stroll 1.04s ease-in-out infinite}
body[data-state=walking] .character-shadow{animation:shadow-breathe 1.04s ease-in-out infinite}
body[data-state=happy] .character-float{animation:idle-breathe 6s ease-in-out infinite}
body[data-state=joy] .character-zone{width:var(--joy-width)}
body[data-state=joy] .character-float.celebrate{animation:joy-hop 1.12s ease-in-out;transform-origin:50% 100%}
body[data-state=joy] .character-shadow{animation:joy-shadow 1.12s ease-in-out}
@keyframes joy-hop{0%,100%{transform:translateY(0) scale(1)}14%{transform:translateY(3px) scale(1.025,.98)}42%{transform:translateY(-24px) scale(.99,1.01)}58%{transform:translateY(-20px) scale(1)}80%{transform:translateY(0) scale(1.03,.975)}92%{transform:translateY(-2px) scale(1)}}
@keyframes joy-shadow{0%,100%{transform:scaleX(1);opacity:.85}45%,58%{transform:scaleX(.76);opacity:.45}80%{transform:scaleX(1.07);opacity:.9}}
body[data-napping=true] .character-zone{top:auto;bottom:74px;width:var(--rest-width);height:320px}
body[data-state=yawn] .character-zone,body[data-state=wake] .character-zone{width:272px;height:300px}
body[data-state=yawn] .character-float{animation:yawn-stretch 3.8s ease-in-out;transform-origin:50% 90%}
body[data-state=nap] .character-float{animation:nap-breathe 7.2s ease-in-out infinite;transform-origin:50% 100%}
body[data-state=wake] .character-float{animation:wake-stretch 2.4s ease-in-out;transform-origin:50% 90%}
body[data-napping=true] .character-shadow{width:80%;left:10%;bottom:-3px;animation:shadow-breathe 7.2s ease-in-out infinite}
@keyframes yawn-stretch{0%,100%{transform:rotate(0) translateY(0)}45%,65%{transform:rotate(-2deg) translateY(-3px) scale(1.012)}}
@keyframes nap-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-1.5px) scale(1.006,1.004)}}
@keyframes wake-stretch{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-5px) rotate(1.2deg)}75%{transform:translateY(-2px) rotate(-.6deg)}}
.sleep-marks{position:absolute;left:15%;top:22%;width:45px;height:65px;opacity:0;pointer-events:none;transition:opacity .4s;color:#6a8479;font-family:Georgia,serif;font-style:italic}
body[data-state=nap] .sleep-marks{opacity:1}.sleep-marks span{position:absolute;bottom:0;left:0;font-size:15px;opacity:0;animation:sleep-drift 4.8s ease-out infinite}.sleep-marks span:nth-child(2){left:13px;font-size:19px;animation-delay:1.6s}.sleep-marks span:nth-child(3){left:26px;font-size:23px;animation-delay:3.2s}
@keyframes sleep-drift{0%{opacity:0;transform:translateY(7px)}24%,60%{opacity:.7}100%{opacity:0;transform:translateY(-32px)}}
.lazy-action,.walk-action,.nap-action{grid-column:auto;min-height:58px;padding:10px 7px;font-size:13px;gap:6px}.lazy-dots{display:none}
.walk-action{background:#fffefa;border-color:#e0e3d8}.nap-action{background:#edf0e9;border-color:#dce3d6}.nap-action[aria-pressed=true]{background:#dce6d6;border-color:#c4d3be}
@media(min-width:1400px){body{--stand-bottom:77px;--joy-width:370px}}
@media(max-width:1040px){body{--stand-bottom:71px;--joy-width:320px}}
@media(max-width:740px){body{--stand-bottom:46px;--joy-width:280px}body[data-napping=true] .character-zone{height:255px;bottom:56px}body[data-state=yawn] .character-zone,body[data-state=wake] .character-zone{width:245px;height:235px}.lazy-action,.walk-action,.nap-action{min-height:59px}.sleep-marks{top:24%}}
@media(max-width:360px){body{--stand-bottom:49px}.lazy-action,.walk-action,.nap-action{font-size:12px}}
body[data-motion=off] .sleep-marks span{opacity:.65;transform:none}
@media(prefers-reduced-motion:reduce){body:not([data-user-motion=on]) .sleep-marks span{opacity:.65;transform:none}}
/* Keep both cropped poses on the same floor while their opacity blends. */
.character-tilt{position:relative;transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.character-art{position:absolute;inset:0;opacity:1;transition:opacity var(--pose-blend-duration,240ms) ease-in-out;will-change:opacity}
.character-art-next{opacity:0}
body[data-state=walking][data-direction=left] .character-art{transform:none}
.character-art[data-facing=left]{transform:scaleX(-1)!important}
/* One continuous clock controls breathing, steps and reactions. State changes
   blend from the currently visible transform instead of restarting CSS loops. */
#character-float,#character-zone .character-shadow{animation:none!important}
#character-float{transform-origin:50% 100%;will-change:transform}
/* The steam shares the cup's SVG coordinates, so it follows every sway and size. */
.cup-steam{display:none;pointer-events:none}
body[data-tea=true] .character-art[data-cup=true] .cup-steam{display:block}
.cup-steam path{fill:none;stroke:#fffef2;stroke-width:4.5;stroke-linecap:round;opacity:0;animation:cup-steam-rise 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.cup-steam path:nth-child(2){animation-delay:-1.6s;stroke-width:5.5}
.cup-steam path:nth-child(3){animation-delay:-3.2s;stroke-width:3.5}
@keyframes cup-steam-rise{0%{opacity:0;transform:translateY(8px) scaleX(.85)}25%{opacity:.62}60%{opacity:.32}100%{opacity:0;transform:translateY(-25px) scaleX(1.1)}}
body[data-motion=off] .cup-steam path{opacity:.35;transform:none}
@media(prefers-reduced-motion:reduce){body:not([data-user-motion=on]) .cup-steam path{opacity:.35;transform:none}}
.lazy-pose-action{grid-column:1/-1;min-height:44px;background:transparent;color:#586e60;border-color:#dce3d6;font-size:13px}
/* Upright sleepy poses keep their feet on the same floor before lying down. */
body[data-state=doze] .character-zone,body[data-state=rubEyes] .character-zone{width:300px;height:340px;bottom:var(--stand-bottom)}
body[data-state=relax] .character-zone,body[data-state=stretch] .character-zone{width:272px;height:300px;bottom:var(--stand-bottom)}
@media(max-width:740px){body[data-state=doze] .character-zone,body[data-state=rubEyes] .character-zone{width:270px;height:271px}body[data-state=relax] .character-zone,body[data-state=stretch] .character-zone{width:245px;height:235px}}
/* Keep one stage throughout upright gestures. Atlas camera normalization sets
   the face scale; a change of pose no longer resizes the surrounding SVG. */
body{--stand-height:340px}
body[data-pose-kind=standing] .character-zone{width:var(--joy-width);height:var(--stand-height);bottom:var(--stand-bottom)}
body[data-pose-kind=floor] .character-zone{width:var(--rest-width);height:320px;bottom:74px}
@media(min-width:1400px){body{--stand-height:366px}}
@media(max-width:1040px){body{--stand-height:310px}}
@media(max-width:740px){body{--stand-height:271px}body[data-pose-kind=floor] .character-zone{height:255px;bottom:56px}}
@media(max-width:360px){body{--stand-height:250px}}