*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:Georgia,'Apple SD Gothic Neo','Malgun Gothic',serif;color:#fff;background:#d9e3f2;-webkit-tap-highlight-color:transparent}body:before{content:'';position:fixed;inset:-50px;background:url('aqua-scene-v4.png') center/cover;filter:blur(45px);opacity:.7}.app{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,46dvh);height:100dvh;overflow:hidden;isolation:isolate;background:#dce4f2}.character{position:absolute;inset:0;width:100%;height:100%;user-select:none;touch-action:none;z-index:-1}.character img,.character canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill}.character canvas{display:none}h1{position:absolute;top:max(4.4%,calc(env(safe-area-inset-top) + 10px));width:100%;text-align:center;margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(21px,3.1dvh,39px);font-weight:400;letter-spacing:.035em;line-height:1.15;text-shadow:0 1px 9px #ffffff35;pointer-events:none}.companion-copy{position:absolute;top:58%;margin:0;width:100%;text-align:center;line-height:1.45;font-weight:300;font-size:clamp(14px,2.05dvh,25px);letter-spacing:.025em;color:#fff;text-shadow:0 0 5px #a1b4d335;pointer-events:none}#wave{position:absolute;left:14%;width:72%;top:65%;height:11%;filter:drop-shadow(0 0 5px #fff9);pointer-events:none}.record-state{position:absolute;top:76.7%;width:100%;text-align:center;pointer-events:none}.record-state p{margin:0}#timer{font-size:clamp(15px,1.7dvh,23px);font-weight:400;font-variant-numeric:tabular-nums;line-height:1.2;color:#fff}#status{position:absolute;top:12.7dvh;width:100%;padding:0 20px;font-family:Arial,'Apple SD Gothic Neo',sans-serif;font-size:12px;line-height:1.5;color:#5f7492;letter-spacing:.03em}.record-control{position:absolute;top:80.9%;left:50%;transform:translateX(-50%);display:grid;place-items:center}#record{width:10.4dvh;height:10.4dvh;max-width:135px;max-height:135px;min-width:50px;min-height:50px;border:1px solid #ffffffbd;border-radius:50%;padding:0;display:grid;place-items:center;color:white;background:linear-gradient(140deg,#a8c9f2ab,#85aee9bd);box-shadow:inset 0 0 0 5px #e9f3ff38,0 0 15px #cee2ff28;cursor:pointer;touch-action:manipulation;transition:background .25s,transform .2s}#record:before{content:'';position:absolute;inset:-7px;border:1px solid #ffffffb0;border-radius:50%;pointer-events:none}#record:active{transform:scale(.96)}#record:focus-visible{outline:2px solid #6c8eb9;outline-offset:12px}#record svg{grid-area:1/1;width:3.2dvh;height:3.2dvh;min-width:22px;min-height:22px}.pause-icon{display:none}#record[aria-pressed=true] .mic-icon{display:none}#record[aria-pressed=true] .pause-icon{display:block}#record[aria-pressed=true]{background:linear-gradient(140deg,#9cc1f2ba,#83aae7ca)}.spinner{display:none;grid-area:1/1;width:24px;height:24px;border:2px solid #fff6;border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}#record[aria-busy=true] svg{display:none}#record[aria-busy=true] .spinner{display:block}#record:disabled{cursor:wait}.app.error #status{color:#694e69}.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}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media(max-height:420px){h1{font-size:16px;top:4%}.companion-copy{font-size:11px}#status{font-size:10px}}

/* Supplied character uses its original proportions and first-version motion. */
.app{background:#dce4f2 url('aqua-scene-v4.png') center/100% 100% no-repeat}
.character{inset:auto;left:50%;top:17%;width:110%;height:auto;aspect-ratio:1399/1124;transform:translateX(-50%);z-index:0;mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 80%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 80%,transparent 100%)}
h1,.companion-copy,.record-state,.record-control,#wave{z-index:2}

/* Fill every viewport; the character stays proportionate on wide screens. */
body:before{display:none}
.app{inset:0;left:0;transform:none;width:100%;height:100dvh;background:#e5edf7 url('calm-background-v6.png') center/cover no-repeat}
h1{font-size:clamp(8.4px,1.24dvh,15.6px)}
.character{top:17%;width:min(110vw,53dvh);mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 72%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 50%,#000 72%,transparent 100%)}
#wave{left:50%;transform:translateX(-50%);width:min(94vw,720px);top:63%;height:15%;filter:drop-shadow(0 0 7px #fff) drop-shadow(0 0 18px #c7e3ff);transition:filter .25s}
.app.recording #wave{filter:drop-shadow(0 0 9px #fff) drop-shadow(0 0 22px #b6d7ff)}
@media(max-height:420px){h1{font-size:6.4px}}