@font-face{font-family:ClayRound;src:url('./assets/fonts/ZenMaruGothic-Medium.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--position:0;--cream:#fff0d0;--ease-out:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:#365d78;font-family:ClayRound,'Microsoft YaHei',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #ad6b30;outline-offset:3px}::selection{background:#bf704a;color:#fff1d6}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.experience{position:relative;isolation:isolate;width:min(100%,calc(100svh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;color:var(--cream)}.scene{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.back{position:absolute;left:4%;top:2%;padding:.5cqw;font-size:1cqw;color:inherit;text-decoration:none;text-shadow:0 1px 3px #28445388}.back:hover{text-decoration:underline;text-underline-offset:4px}
/* Hit areas follow the four real recessed clay buttons in the scene. */
.stages{position:absolute;inset:0;pointer-events:none;z-index:4}.stages button{position:absolute;padding:0;border:0;border-radius:.9cqw;background:none;color:transparent;font-size:1.5cqw;pointer-events:auto;transform:rotate(2deg)}.stages button[data-stage='0']{left:26.8%;top:31.2%;width:12.8%;height:7.8%}.stages button[data-stage='1']{left:43.3%;top:32.8%;width:13%;height:8.1%}.stages button[data-stage='2']{left:60%;top:34%;width:13.4%;height:8.4%}.stages button[data-stage='3']{left:77.5%;top:35.1%;width:14.35%;height:8.5%}.stages button::before{content:'';position:absolute;inset:3px;border-radius:inherit;box-shadow:inset 0 0 0 1.5px #476979,inset 0 -.18cqw 0 #47697955;opacity:0;transition:opacity 160ms var(--ease-out),transform 120ms var(--ease-out)}.stages button[aria-pressed=true]::before{opacity:.9}.stages button:active::before{transform:translateY(1px);opacity:1}
.controller{position:absolute;left:25.45%;top:69.65%;width:54%;height:7%;transform:rotate(6.12deg);transform-origin:left top;touch-action:none;user-select:none;cursor:ew-resize;z-index:7}.rail-anchor{position:absolute;top:1.1cqw;width:0;height:0;pointer-events:none}.rail-start{left:1.3cqw}.rail-end{left:calc(100% - 1.3cqw)}.capabilities{position:absolute;inset:0}.rail-stop{position:absolute;left:calc(1.3cqw + var(--detent) * (100% - 2.6cqw));top:1.1cqw;width:3.4cqw;height:2.2cqw;transform:translate(-50%,-50%);border:0;border-radius:50%;background:none;padding:0}.slider-thumb{position:absolute;left:calc(1.3cqw + var(--rail-position,0) * (100% - 2.6cqw));top:1.1cqw;width:2.85cqw;aspect-ratio:2;transform:translate(-50%,-50%);border:.14cqw solid #b45d40;border-radius:50%;box-shadow:0 .05cqw .08cqw #69463233;pointer-events:none;z-index:3}.controller:has(#journey:focus-visible) .slider-thumb{outline:2px solid #b86e37;outline-offset:3px}#journey{position:absolute;left:0;top:0;width:100%;height:2.2cqw;opacity:0;pointer-events:none;margin:0}
.thought-bubble{position:absolute;left:3.5%;top:7%;width:18.3%;min-height:6.4cqw;display:flex;align-items:center;justify-content:center;padding:1.2cqw 1.3cqw;background:#f4dfc0;border-radius:43% 46% 41% 44% / 43% 42% 45% 44%;color:#493422;box-shadow:0 .15cqw 0 #cdb38f,.15cqw .45cqw .6cqw #16374b30,inset 0 .1cqw .2cqw #fff2d8b3;z-index:4;pointer-events:none}.thought-bubble #note-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.note-divider{display:none}.thought-bubble #note-copy{font:500 1.18cqw/1.65 ClayRound,'Microsoft YaHei',sans-serif;text-align:center;white-space:nowrap;margin:0;color:#493422}.thought-bubble::before,.thought-bubble::after{content:'';position:absolute;background:#f4dfc0;border-radius:50%;box-shadow:.08cqw .18cqw .2cqw #16374b26}.thought-bubble::before{left:64%;top:calc(100% + .25cqw);width:.75cqw;aspect-ratio:1}.thought-bubble::after{left:60%;top:calc(100% + 1.4cqw);width:.4cqw;aspect-ratio:1}
.prop{background-image:url('./assets/capability-path/moving-props.fast.webp');background-repeat:no-repeat}.stamp{position:absolute;left:calc(var(--seal-left) - 1cqw);top:calc(var(--seal-top) - 4.8cqw);width:5.6%;aspect-ratio:530/590;background-size:289.811% 173.559%;background-position:83.499% 9.217%;pointer-events:none;opacity:0;z-index:6;transform:translateY(-4cqw)}.is-stamping .stamp{animation:paper-stamp 700ms var(--ease-out) both}.delivery-seal{position:absolute;left:var(--seal-left);top:var(--seal-top);width:2.1cqw;aspect-ratio:1;display:grid;place-items:center;border:.16cqw double #ad4930;border-radius:50%;color:#ad4930;font:bold 1.3cqw Georgia,serif;transform:rotate(-16deg);opacity:0;pointer-events:none;z-index:5}.experience[data-delivered=true] .delivery-seal{opacity:.9}.experience[data-instant=true] .stamp{display:none}.crank{position:absolute;left:12%;top:43%;width:12%;height:18%;border:0;border-radius:50%;background:none;z-index:4}.gesture-hint{position:absolute;bottom:2.5%;left:5%;margin:0;font-size:.85cqw;color:#fff2d8;text-shadow:0 1px 2px #28445388}
@keyframes paper-stamp{0%{opacity:0;transform:translateY(-4cqw) rotate(-8deg)}18%{opacity:1}40%,52%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translate(.8cqw,-3cqw) rotate(7deg)}}
@media(hover:hover) and (pointer:fine){.stages button:not([aria-pressed=true]):hover::before{opacity:.45;box-shadow:inset 0 0 0 1px #956b40}.rail-stop:hover{box-shadow:inset 0 0 0 1px #aa744233}}
@media(max-width:700px) and (orientation:portrait){body{place-items:start center}.experience{width:100%;margin-top:13svh;overflow:visible}.back{top:-18%;font-size:2.8cqw}.stages{inset:auto;left:7%;top:104%;width:86%;display:grid;grid-template-columns:repeat(4,1fr);gap:1.8cqw}.stages button{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:48px;padding:9px 0;color:#fff0d0;font-size:3.2cqw;transform:none;border:1px solid #f2d6ac33;border-radius:12px;background:#31556c;box-shadow:0 2px 3px #18374733;transition:background-color 160ms ease,color 160ms ease}.stages button::before{display:none}.stages button[aria-pressed=true]{color:#493422;background:#f1d9b8;border-color:#ebd0a9;box-shadow:inset 0 1px 0 #fff0d8,0 2px 0 #ae8c62}.thought-bubble{top:136%;left:7%;width:86%;min-height:0;padding:4cqw 5cqw;border-radius:22% 24% 20% 23% / 42% 43% 41% 44%}.thought-bubble #note-copy{font-size:4cqw;line-height:1.7}.thought-bubble::before{width:2cqw;top:calc(100% + 1cqw)}.thought-bubble::after{width:1cqw;top:calc(100% + 4cqw)}.gesture-hint{top:198%;bottom:auto;left:7%;font-size:2.8cqw}}
@media(max-width:700px),(pointer:coarse){.stamp,.delivery-seal{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.is-stamping .stamp{display:none}}
/* Four consistent clay poses share one transparent atlas and a planted baseline. */
.character{position:absolute;left:1.5%;top:23%;width:18%;height:52%;pointer-events:none;z-index:3;filter:drop-shadow(.15cqw .3cqw .25cqw #3d301d24)}
.actor-pose{position:absolute;inset:0;background-image:url('./assets/capability-path/character-poses.fast.webp');background-repeat:no-repeat;background-size:200% 200%;opacity:0;transform-origin:50% 96%;transition:opacity 180ms var(--ease-out)}
.actor-pose[data-pose='0']{background-position:0 0}.actor-pose[data-pose='1']{background-position:100% 0}.actor-pose[data-pose='2']{background-position:0 100%}.actor-pose[data-pose='3']{background-position:100% 100%}
.actor-pose[data-active=true]{opacity:1}
.actor-pose[data-rig=ready]{background-image:none}
.actor-pose canvas{display:block;width:100%;height:100%}
.slider-thumb{width:3.7cqw;aspect-ratio:470/330;border:0;border-radius:0;background-image:url('./assets/capability-path/moving-props.fast.webp');background-size:326.81% 310.303%;background-position:80.675% 93.66%;box-shadow:none;filter:drop-shadow(0 .16cqw .1cqw #62432644);margin-top:-.45cqw;transition:filter 160ms var(--ease-out)}
.is-dragging .slider-thumb{filter:drop-shadow(0 .3cqw .14cqw #62432655)}
.thought-bubble{border-radius:44% 48% 42% 47% / 46% 44% 48% 45%;transform-origin:62% 120%}
.thought-bubble::before,.thought-bubble::after{display:none}
.thought-trail{position:absolute;left:14.5%;top:19%;width:2%;height:4%;pointer-events:none;z-index:4}
.thought-trail i{position:absolute;display:block;border-radius:50%;background:#f4dfc0;box-shadow:.08cqw .18cqw .2cqw #16374b26}
.thought-trail i:first-child{width:.4cqw;height:.4cqw;left:0;bottom:0}.thought-trail i:last-child{width:.75cqw;height:.75cqw;left:.45cqw;top:0}
.experience[data-instant=true] .actor-pose{transition:none}
@media(max-width:700px) and (orientation:portrait){.thought-trail{left:12%;top:129%;height:5%;width:5%;transform:rotate(180deg)}.thought-trail i:first-child{width:1cqw;height:1cqw}.thought-trail i:last-child{width:2cqw;height:2cqw}.thought-bubble{transform-origin:12% 0}}
@media(prefers-reduced-motion:reduce){.actor-pose{transition:none}}
/* A real clay cloud shares the scene's ivory, pores, lighting and rounded depth. */
.thought-bubble{background:transparent url('./assets/capability-path/thought-cloud-clay.fast.webp') center / 100% 100% no-repeat;border-radius:0;box-shadow:none;filter:drop-shadow(.06cqw .22cqw .15cqw #17384b38);padding:1.5cqw 1.3cqw;min-height:7cqw}
.thought-bubble #note-copy{color:#513620;text-shadow:0 .045cqw 0 #fff5de}
.thought-trail i{background:radial-gradient(circle at 30% 24%,#fff3d8,#edd3ab 70%,#c7a67e);box-shadow:.05cqw .12cqw .12cqw #17384b30,inset 0 .04cqw .04cqw #fff6df}
@media(max-width:700px) and (orientation:portrait){.thought-bubble{padding:5cqw;min-height:0}}
/* Match the return control to the physical terracotta controls in the scene. */
.back{left:3.5%;top:auto;bottom:3.5%;width:8.5cqw;height:5.2cqw;min-width:76px;min-height:48px;padding:.2cqw;display:grid;place-items:center;z-index:8;text-shadow:none;transition:transform 160ms var(--ease-out)}
.gesture-hint{left:13%;bottom:6.2%}
.back img{display:block;width:100%;height:auto;filter:drop-shadow(0 .12cqw .08cqw #173a5050)}
.back:active{transform:translateY(2px)}
@media(hover:hover) and (pointer:fine){.back:hover{transform:translateY(-1px);text-decoration:none}}
@media(max-width:700px) and (orientation:portrait){.back{left:7%;top:218%;bottom:auto;width:92px;height:56px;padding:2px}.gesture-hint{left:7%;top:198%;bottom:auto}}
@media(prefers-reduced-motion:reduce){.back{transition:none}.back:active,.back:hover{transform:none}}