@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#071925;--ink:#edf7f6;--muted:#9cb1bd;--mint:#b4e8d7;--line:#ffffff15;--growth:#9fe3d6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px 'DM Sans','Noto Sans JP',sans-serif}button,textarea{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid #caf9e8;outline-offset:5px}button{border:0}button:disabled{cursor:wait;opacity:.5}button:hover{filter:brightness(1.13)}.app{max-width:1720px;margin:auto;padding:0 48px}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:Georgia,serif;font-size:48px;line-height:.8;font-style:italic;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:24px;letter-spacing:-3px}.brand span{font:10px 'DM Sans',sans-serif;line-height:1.6;letter-spacing:2.3px;width:90px}.top-caption{color:#bbcbd1;font-size:14px;letter-spacing:.12em}.sound{background:transparent;border:1px solid #ffffff25;border-radius:30px;padding:10px 17px;font-size:14px;color:#c2d3db}.sound>span{margin-left:6px}main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,1fr);gap:26px;margin-top:28px;min-height:700px;height:calc(100dvh - 181px);max-height:930px}.ocean{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 47% 28%,#206072 0%,#0b3448 43%,#0b2434 75%);border-radius:24px;border:1px solid #a0dcea2a;box-shadow:inset 0 2px 1px #ffffff1a,inset 12px 0 40px #07182235,inset -12px 0 40px #07182235}.ocean:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -120px 110px -40px #061a2b;z-index:-1}.ocean-grain{position:absolute;inset:0;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.light{position:absolute;top:-20%;height:105%;background:linear-gradient(#d4fffa30,transparent);transform:rotate(24deg);filter:blur(14px);z-index:-1;animation:light 16s ease-in-out infinite alternate}.light-one{width:19%;left:36%}.light-two{width:7%;left:68%;animation-delay:-8s}.tank-head{position:absolute;left:32px;top:30px;z-index:3}.eyebrow{font-size:11px;letter-spacing:2.6px;color:#a6cdcf}.tank-head h1{font-weight:500;font-size:25px;letter-spacing:.09em;margin:12px 0}.tank-head p{font-size:14px;color:#b7ced5;letter-spacing:.03em;margin:0}.stage-chip{position:absolute;right:25px;top:33px;border:1px solid #d2fff02d;border-radius:24px;padding:9px 12px;font-size:12px;color:#c2e1df;background:#bafff00a}.character-scene{position:absolute;left:12%;right:12%;top:17%;bottom:14%;perspective:900px;transition:transform .3s}.halo{position:absolute;width:90%;height:75%;top:9%;left:5%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--growth) 22%,transparent),transparent 69%);filter:blur(25px);transition:background 1s}.float{height:100%;animation:float 6s ease-in-out infinite}.character{position:relative;display:block;height:100%;width:100%;background:none;padding:0;border:0;transform:rotate(-7deg);transition:transform .5s;filter:drop-shadow(0 20px 35px #020e1944)}.character:hover{transform:rotate(-3deg) scale(1.035)}.character img{height:100%;width:100%;object-fit:contain}.tail-color{position:absolute;inset:0;clip-path:inset(56% 0 0 0);filter:hue-rotate(var(--tail-hue,0deg));pointer-events:none}.accessory{position:absolute;top:18%;left:29%;font-size:38px;color:#ffe6a3;text-shadow:0 2px 3px #745e8e;transform:rotate(-17deg)}.greeting{position:absolute;top:28%;right:-4%;background:#e7f7f0ef;color:#264b51;font-size:14px;line-height:1.9;padding:15px 21px;border-radius:20px 20px 20px 4px;max-width:220px;box-shadow:0 10px 40px #04192330;animation:appear .6s both}.water-ring{position:absolute;border:1px solid #aaf1e81a;border-radius:50%;height:100px;left:9%;right:9%;bottom:8%;transform:rotate(-7deg);box-shadow:0 0 35px #aaf1e808,inset 0 0 35px #aaf1e808;z-index:-1}.ring-two{left:17%;right:17%;bottom:10%;height:60px}.particle{position:absolute;bottom:-20px;border:1px solid #ddfff641;border-radius:50%;width:var(--size);height:var(--size);left:var(--left);animation:rise var(--duration) linear infinite;animation-delay:var(--delay);pointer-events:none;box-shadow:inset 1px 1px 2px #ffffff20}.tank-bottom{position:absolute;bottom:87px;left:0;right:0;text-align:center;font-size:13px;color:#a9c9d0;pointer-events:none}.little-star{color:#c4f4de;margin-right:8px}.depth{display:block;font-size:9px;letter-spacing:2.3px;color:#6e969f;margin-top:13px}.customize{position:absolute;bottom:20px;left:22px;right:22px;background:#113245e8;border:1px solid #7cabbe40;border-radius:16px;backdrop-filter:blur(24px);z-index:5;box-shadow:0 10px 25px #020b1830}.customize>button{display:flex;align-items:center;gap:10px;width:100%;background:transparent;padding:17px 20px;text-align:left;font-size:14px}.plus{margin-left:auto;color:#a0c6cf}#customizePanel{padding:0 20px 12px;border-top:1px solid #ffffff12}fieldset{padding:0;margin:15px 0;border:0}legend{color:#bdced3;font-size:13px;margin-bottom:10px}.choices{display:flex;gap:8px}.choices button{padding:9px 14px;background:#ffffff08;border:1px solid #ffffff1a;border-radius:8px;font-size:13px}.choices button[aria-pressed=true]{background:#bddfce;color:#163b41;border-color:#bddfce}.swatches{display:flex;gap:12px}.swatch{width:28px;height:28px;background:var(--swatch);border:3px solid #13364a;border-radius:50%;box-shadow:0 0 0 1px #ffffff22}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #c9f9e7}.save-note{font-size:12px;color:#96b4bf;margin:13px 0 0}.side{border:1px solid #ffffff14;border-radius:24px;background:#0d2331;display:flex;flex-direction:column;min-height:0;overflow:hidden}.tabs{display:flex;border-bottom:1px solid var(--line);padding:0 24px;gap:26px;flex-shrink:0}.tabs button{background:none;color:#9db3bf;font-size:14px;padding:24px 0 20px;border-bottom:2px solid transparent;white-space:nowrap}.tabs button[aria-selected=true]{color:#d9f4e6;border-color:#b4e8d7}.tabs span{background:#ffffff09;border-radius:6px;padding:2px 6px;margin-left:5px;font-size:11px}#talkPanel{display:flex;flex-direction:column;flex:1;min-height:0}#talkPanel[hidden],section[hidden]{display:none}.chat-heading{display:flex;gap:12px;align-items:center;margin:25px 26px 16px}.avatar{width:43px;height:43px;background:#244a53;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#d0efdd}.chat-heading h2{font-size:17px;margin:0 0 5px;font-weight:500}.chat-heading p{font-size:12px;color:#8eaab6;margin:0}.demo{font-size:11px;color:#a2b8c2;border:1px solid #ffffff20;border-radius:5px;padding:4px 7px;margin-left:auto}.chat{padding:6px 26px 20px;overflow-y:auto;flex:1;min-height:170px;scrollbar-width:thin;scrollbar-color:#315363 transparent}.date-line{font-size:11px;color:#7f9aaa;text-align:center;margin:8px 0 26px}.message{margin-bottom:24px;animation:appear .4s both}.speaker{font-size:12px;color:#9bb6c0;display:block;margin:0 0 8px 2px}.message p{margin:0;font-size:14px;line-height:2;background:#173443;padding:17px 19px;border-radius:0 15px 15px 15px;overflow-wrap:anywhere;white-space:pre-wrap}.message.user{margin-left:36px}.message.user p{background:#b6dccd;color:#173b43;border-radius:15px 0 15px 15px}.message.user .speaker{text-align:right}.composer-area{padding:15px 23px 22px;border-top:1px solid #ffffff09}.prompt-label{font-size:12px;color:#88a4b3;margin:0 0 12px}.suggestions{display:flex;gap:7px;margin-bottom:16px;flex-wrap:wrap}.suggestions button{font-size:12px;padding:8px 10px;background:transparent;border:1px solid #63899d40;border-radius:20px;color:#b8d0db}form{position:relative}textarea{display:block;resize:none;width:100%;background:#061a28;color:#e4f5f1;border:1px solid #63829455;border-radius:12px;padding:16px 60px 15px 15px;font-size:14px;line-height:1.7}textarea::placeholder{color:#7993a5}#send{position:absolute;bottom:14px;right:13px;background:#bddfce;color:#153842;border-radius:50%;width:35px;height:35px;font-size:23px}.demo-note{font-size:10px;color:#7c97a6;line-height:1.9;text-align:center;margin:12px 0 0}#growthPanel{overflow-y:auto;padding:29px 26px}.growth-intro h2{font-size:22px;font-weight:500;letter-spacing:.02em;margin:13px 0}.growth-intro>p{font-size:14px;line-height:1.9;color:#9db6c1}.bond{padding:20px 0 23px;margin:8px 0 6px;border-bottom:1px solid var(--line)}.bond>div{display:flex;justify-content:space-between;font-size:13px;color:#b8d1d9}.bond strong{font-size:15px;color:#c4ebdc}progress{width:100%;height:5px;border:0;margin-top:17px;border-radius:10px;overflow:hidden;background:#253f4d}progress::-webkit-progress-bar{background:#253f4d}progress::-webkit-progress-value{background:#b4e8d7}progress::-moz-progress-bar{background:#b4e8d7}.bond p{font-size:12px;color:#89a8b7;margin:10px 0 0}.type{display:grid;grid-template-columns:37px 1fr 30px;gap:10px;align-items:center;padding:14px 0;border-bottom:1px solid #ffffff0a}.type-icon{font-size:22px}.type strong{font-weight:500;font-size:14px}.type p{font-size:12px;color:#91acb9;margin:5px 0 9px}.type-bar{height:3px;background:#25404d;border-radius:3px;overflow:hidden}.type-bar i{display:block;height:100%;width:0;background:var(--type-color);transition:width .5s}.type-score{font-size:12px;color:#a7c4c9;text-align:right}.growth-note{font-size:12px;text-align:center;line-height:1.9;color:#7b9daa;margin-top:23px}footer{display:flex;justify-content:space-between;font-size:10px;color:#678797;padding:20px 3px;letter-spacing:.06em}.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}.paused *{animation-play-state:paused!important}.celebrate .float{animation:happy .7s ease-in-out 2}.celebrate .halo{filter:blur(10px)}@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}50%{transform:translate3d(8px,-17px,0) rotate(2deg)}}@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:.65}85%{opacity:.5}100%{transform:translateY(-850px);opacity:0}}@keyframes light{to{transform:translateX(30px) rotate(15deg);opacity:.55}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes happy{50%{transform:translateY(-25px) rotate(5deg)}}@media(min-width:1450px){.character-scene{left:18%;right:18%}.greeting{right:-17%}}@media(max-width:1100px){.app{padding:0 24px}main{gap:18px;grid-template-columns:minmax(0,1.25fr) minmax(330px,1fr)}.top-caption{display:none}.stage-chip{top:124px;left:30px;right:auto}.character-scene{left:5%;right:5%;top:23%}.greeting{font-size:12px;right:2%;padding:11px 14px;max-width:165px;top:25%}}@media(max-width:760px){.app{padding:0 16px}header{height:85px}.brand{font-size:39px;gap:18px}.brand span{font-size:8px}.sound{padding:8px 12px;font-size:12px}main{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0;margin-top:18px;gap:18px}.ocean{height:640px;min-height:640px}.tank-head{top:25px;left:25px}.tank-head h1{font-size:23px}.stage-chip{top:28px;right:20px;left:auto;font-size:10px}.character-scene{top:20%;bottom:19%;left:8%;right:8%}.greeting{right:0;top:22%}.side{height:660px;min-height:660px}.tabs{padding:0 23px}footer{gap:18px;font-size:9px;line-height:1.8}footer span:last-child{max-width:110px;text-align:right}}@media(max-width:390px){.stage-chip{top:120px;left:25px;right:auto}.choices button{padding:8px 10px;font-size:12px}.ocean{height:625px;min-height:625px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Readable conversation and a speech bubble below the face. */
.message p{font-size:16px}.demo-note,.depth,footer,.date-line,.demo{font-size:12px}.prompt-label,.suggestions button,.choices button,legend{font-size:14px}.greeting{top:62%}.chat-heading p{font-size:13px}.stage-chip{font-size:12px}@media(max-width:760px){.greeting{top:62%;right:0}.stage-chip{top:115px;left:25px;right:auto}}
.character{width:auto;aspect-ratio:2/3;margin-inline:auto;max-width:100%}.tail-color{clip-path:polygon(0 68%,39% 68%,44% 57%,58% 56%,58% 62%,62% 68%,77% 73%,80% 100%,0 100%)}

/* Layered aquascape: environment, moving light, character, and front glass. */
.ocean{background:#105768;border:1px solid #b3f7ef65;box-shadow:inset 0 0 0 5px #d0fff00d,0 20px 70px #0004;border-radius:22px}
.aquarium-backdrop{position:absolute;inset:-12px;z-index:-3;background:url('aquarium-garden.png') center center/cover no-repeat;transform:translate3d(var(--water-x,0px),var(--water-y,0px),0) scale(1.025);transition:transform 1.4s ease-out;will-change:transform}
.ocean:after{z-index:-2;background:linear-gradient(180deg,#041e346e 0%,#052b4015 28%,transparent 58%,#04172526 72%,#041725c9 100%);box-shadow:inset 0 0 35px #05192540,inset 0 0 0 7px #c9fff30b}
.ocean-grain{opacity:.08;pointer-events:none}.water-ring{display:none}.light{z-index:-1;mix-blend-mode:screen;filter:blur(9px);opacity:.6;pointer-events:none}.light-one{width:18%;left:55%;background:linear-gradient(#d5ffff5c,transparent 85%)}.light-two{left:30%;width:8%;background:linear-gradient(#ecffff4a,transparent 70%)}
.surface-shimmer{position:absolute;inset:0 0 auto;height:24%;z-index:-1;background:radial-gradient(ellipse at 60% 0,#b0fff961,transparent 65%);mix-blend-mode:screen;animation:surface-light 7s ease-in-out infinite alternate;pointer-events:none}
.glass-reflection{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 2px 0 2px #d5ffff65,inset -2px 0 3px #e0ffff45,inset 0 3px 3px #e0ffff45;background:linear-gradient(112deg,transparent 12%,#eaffff0a 13%,#eaffff03 27%,transparent 28%,transparent 78%,#eaffff08 79%,transparent 90%)}
.tank-head{text-shadow:0 2px 15px #041524,0 1px 4px #041524}.tank-head p{color:#deefee}.tank-head .eyebrow{color:#dcf4f0}.stage-chip{z-index:3;background:#0b293c99;backdrop-filter:blur(14px);border-color:#d9fff03d}.character-scene{top:22%;bottom:22%;z-index:1}.character{filter:drop-shadow(0 18px 22px #022e484f)}.halo{opacity:.45}.tank-bottom{z-index:3;color:#e0efea;text-shadow:0 1px 7px #031925}.depth{color:#b9d1d3}.customize{background:#0c2a3dc9;border-color:#afd8da4a;box-shadow:0 9px 30px #01132166}.particle{z-index:2;border-color:#e0ffff70;background:radial-gradient(circle at 30% 25%,#ffffff3b,transparent 65%);box-shadow:inset 1px 1px 2px #ffffff5a,0 0 6px #d2fffb15}.greeting{background:#e8f9f2ed;backdrop-filter:blur(10px)}
@keyframes surface-light{0%{opacity:.5;transform:scaleX(.95)}100%{opacity:.95;transform:scaleX(1.08)}}
@media(min-width:1101px){.character-scene{left:17%;right:17%}}
@media(max-width:760px){.character-scene{top:26%;bottom:22%;left:10%;right:10%}.aquarium-backdrop{background-position:50% center}.stage-chip{top:115px}.tank-head{top:29px}}
@media(prefers-reduced-motion:reduce){.aquarium-backdrop{transform:scale(1.025);transition:none}.surface-shimmer{animation:none}}
.paused .aquarium-backdrop{transform:scale(1.025)}
@media(max-width:1100px){.stage-chip{top:138px}}
.tank-bottom>div{display:inline-block;padding:6px 12px;border-radius:20px;background:#07273685;backdrop-filter:blur(8px)}

/* Independent travel layer leaves the existing breathing and greeting intact. */
.life-travel{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;pointer-events:none}
.life-travel .character{pointer-events:auto;touch-action:manipulation}
.character-scene[data-life="plants"] .float{animation:resting 9s ease-in-out infinite}
.character-scene[data-life="distance"] .float{animation:float 8s ease-in-out infinite}
.character-scene[data-life="bubbles"] .float{animation:bubble-play 4s ease-in-out infinite}
.character-scene[data-life="listening"] .float{animation:float 6s ease-in-out infinite}
.character-scene:not([data-life="listening"]) .halo{opacity:.2;transition:opacity 2s}
@keyframes resting{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes bubble-play{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(8px,-15px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.life-travel{will-change:auto}.character-scene .float{animation:none!important}}

/* Relief surface: the canvas is larger than the image to leave room for fins. */
.mermaid-mesh{position:absolute;width:118%;height:118%;left:-9%;top:-9%;pointer-events:none;opacity:0}
.mesh-ready>.mermaid-mesh{opacity:1}.mesh-ready>#mermaid,.mesh-ready>#tail{opacity:0}
/* Mesh articulation supplies the small movements; keep body drift gentle. */
.character-scene:has(.mesh-ready) .float{animation:body-drift 7s ease-in-out infinite}
.character-scene[data-life="plants"]:has(.mesh-ready) .float{animation-duration:11s}
@keyframes body-drift{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
@media(prefers-reduced-motion:reduce){.character-scene:has(.mesh-ready) .float{animation:none}}

.mermaid-three{position:absolute;width:118%;height:118%;left:-9%;top:-9%;pointer-events:none;opacity:0}
.true-3d-ready>.mermaid-three{opacity:1}.true-3d-ready>#mermaid,.true-3d-ready>#tail,.true-3d-ready>#accessory{opacity:0}
.character-scene:has(.true-3d-ready) .float{animation:body-drift 7s ease-in-out infinite}.true-3d-ready{transform:rotate(-3deg)}
.model-turn{display:flex;gap:16px;align-items:center}.model-turn input{flex:1;min-width:0;accent-color:#b4e8d7;height:30px}.model-turn button{background:#ffffff12;padding:8px 12px;border-radius:8px;font-size:13px;white-space:nowrap}#angleValue{margin-left:12px;color:#b4e8d7}
@media(prefers-reduced-motion:reduce){.character-scene:has(.true-3d-ready) .float{animation:none!important}}
.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:18%;bottom:52%;transition:top .4s,bottom .4s}
.model-link{margin:14px 0 0;font-size:13px}.model-link a{color:#c0eddf;text-underline-offset:4px}

/* Pastel polygon aquascape, matching the faceted mermaid. */
.aquarium-backdrop{background-image:url('aquarium-lowpoly.svg');background-position:center center}
.ocean{background:#6599ae;border-color:#badbd7;border-radius:22px}
.ocean:after{background:linear-gradient(180deg,#153e5959,transparent 35%,transparent 66%,#133044a6);box-shadow:inset 0 0 0 5px #d8f1e81a}
.ocean-grain{display:none}
.light{filter:none;clip-path:polygon(40% 0,100% 0,45% 100%,0 100%);opacity:.25}
.surface-shimmer{opacity:.3;animation:none}
.glass-reflection{box-shadow:inset 2px 2px 0 #d9eee65c,inset -2px -2px 0 #a9cfc740;background:linear-gradient(115deg,transparent 72%,#e9fff20a 72%,#e9fff20a 84%,transparent 84%)}
.particle{border-radius:30%;box-shadow:none;background:#d8eee718;border-color:#e1f5ed60}
.halo{opacity:.15}
.tank-head{text-shadow:0 2px 8px #204b6670}
.customize{background:#234c60e8;border-color:#c3e1d94d;box-shadow:0 6px 18px #183d5133}
.stage-chip{background:#234c609e;border-color:#daeee552}

/* Full-scene conversation layout. */
.app{max-width:none;padding:0}header{position:absolute;z-index:10;bottom:12px;left:22px;height:auto;border:0}.brand{font-size:25px;letter-spacing:-1px}.brand span,.top-caption{display:none}.sound{position:fixed;top:26px;right:92px;font-size:11px;padding:10px;background:#244e655c}.sound span{display:none}
main{display:block;position:relative;margin:0;min-height:700px;height:100dvh;max-height:none}.ocean{position:absolute;inset:0;height:100%;min-height:0;border:0;border-radius:0}.ocean:after{background:linear-gradient(180deg,#193c5555,transparent 30%,transparent 60%,#132d5070)}.aquarium-backdrop{background-position:center 55%}.tank-head,.stage-chip,.tank-bottom,footer{display:none}
.bond-hud{position:absolute;top:25px;left:28px;z-index:8;display:flex;gap:12px;align-items:center;padding:10px 16px;border:1px solid #e9bad06b;border-radius:28px;background:#234960b8;backdrop-filter:blur(16px);text-align:left}.bond-heart{font-size:30px;color:#f0b1d1}.bond-hud small{display:block;color:#f0c5dc;font-size:10px;letter-spacing:.12em}.bond-hud strong{display:block;margin-top:3px;font-size:17px;font-weight:500}.bond-hud em{font-size:12px;color:#e5e8b4;font-style:normal;margin-left:9px}.bond-track{width:44px;height:5px;background:#ffffff29;border-radius:5px;overflow:hidden}.bond-track i{height:100%;display:block;background:#efb1cd;transition:width .3s}
.character-scene,.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:10%;bottom:32%;left:15%;right:15%}.greeting{display:none!important}
.customize{top:24px;right:24px;left:auto;bottom:auto;width:52px;border-radius:50%;background:#ffffff24;border-color:#ffffff69;box-shadow:none}.customize>button{height:52px;padding:0;justify-content:center;font-size:24px}.customize>button>span:not(:first-child){display:none}.customize:has(#customizeToggle[aria-expanded="true"]){width:min(380px,calc(100vw - 32px));border-radius:22px;background:#173c51f5}.customize:has(#customizeToggle[aria-expanded="true"])>button{justify-content:flex-end;padding-right:20px}.customize #customizePanel{max-height:70dvh;overflow:auto}
.side{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);width:min(610px,calc(100% - 40px));height:auto;min-height:0;overflow:visible;background:none;border:0;border-radius:0;display:flex;gap:10px;z-index:6}.side>.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;counter-reset:choice}.side>.suggestions button{display:flex;align-items:center;gap:12px;background:#f3f6f0df;border:1px solid #dcaacb;border-radius:18px;color:#304a59;padding:13px 17px;font-size:14px;box-shadow:0 3px 14px #16374d16;text-align:left}.side>.suggestions button:before{counter-increment:choice;content:counter(choice);background:#cf8faa;color:white;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:12px;flex-shrink:0}.side>.suggestions button:last-child{display:none}
.dialogue-card{background:#f5f7f1ed;border:1px solid #ffffffdc;border-radius:24px;color:#304956;padding:19px 24px 17px;box-shadow:0 8px 32px #18394d1a;backdrop-filter:blur(18px)}.dialogue-top{display:flex;align-items:center;justify-content:space-between}.name-tag{padding:6px 18px;background:#cd8ba9;color:white;border-radius:12px;font-size:15px;font-weight:600}#logToggle{background:none;color:#6b7c87;font-size:11px;padding:8px}#currentLine{font-size:16px;line-height:1.8;white-space:pre-line;margin:13px 0 0;max-height:130px;overflow:auto}
.side .tabs,.side .chat-heading,.side #chat,.side #growthPanel,.side .prompt-label,.side .panel-close{display:none}.side #talkPanel{display:block;flex:none}.composer-area{padding:0;border:0}.composer-area .demo-note{font-size:9px;color:#dae6e8;margin:6px 0 0;line-height:1.5}.demo-note br{display:none}.side textarea{height:48px;min-height:48px;background:#173d51c9;border:1px solid #d9eae94a;padding:12px 57px 10px 16px;border-radius:16px;font-size:13px}.side textarea::placeholder{color:#c2d2d9}.side #send{bottom:7px;width:33px;height:33px}
.side.panel-open{display:flex}.panel-open .side{bottom:30px;top:115px;background:#133347f5;border:1px solid #b6d8de55;border-radius:24px;padding:18px;overflow:hidden;backdrop-filter:blur(20px)}.panel-open .side>.suggestions,.panel-open .dialogue-card{display:none}.panel-open .side .tabs{display:flex;padding:0 6px}.panel-open .side .panel-close{display:block;position:absolute;right:18px;top:20px;background:none;font-size:12px;z-index:2}.panel-open .side #talkPanel:not([hidden]){display:flex;min-height:0;flex:1}.panel-open .side #chat{display:block}.panel-open .side #growthPanel:not([hidden]){display:block;overflow:auto}.panel-open .side .tabs button{padding-top:10px}.panel-open .side .composer-area{padding-top:8px}.side [hidden]{display:none!important}
@media(min-width:1000px){.character-scene,.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:7%;bottom:30%;left:27%;right:27%}.aquarium-backdrop{background-size:cover}.side{bottom:28px}.bond-hud{left:38px}}
@media(max-width:760px){main{height:100svh;min-height:620px}.character-scene,.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:13%;bottom:36%;left:0;right:0}.bond-hud{top:20px;left:16px;padding:9px 13px;gap:8px}.bond-track{width:30px}.customize{top:20px;right:16px}.sound{top:29px;right:78px}.side{bottom:20px;width:calc(100% - 30px);gap:8px}.dialogue-card{padding:15px 18px;border-radius:22px}#currentLine{font-size:14px;line-height:1.8;max-height:110px;margin-top:10px}.side>.suggestions{gap:8px}.side>.suggestions button{font-size:12px;padding:11px 12px;gap:8px;border-radius:15px}header{display:none}.panel-open .side{top:100px;bottom:20px}.customize #customizePanel{max-height:65svh}}

.customize>button>span{display:none}.customize>button{font-size:25px}.ocean>#motion{z-index:9}
.character-scene,.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:5%;bottom:22%}
@media(max-width:760px){.character-scene,.ocean:has(#customizeToggle[aria-expanded="true"]):has(.true-3d-ready) .character-scene{top:8%;bottom:25%;left:0;right:0}}

.turnaround-mode .character{filter:drop-shadow(0 12px 18px #16364b25)}
.turnaround-mode #modelControls legend{font-size:0}.turnaround-mode #modelControls legend:before{content:'人魚の向き';font-size:13px}.turnaround-mode #angleValue{font-size:13px}
.renderer-switch{font-size:13px;line-height:1.8}.renderer-switch a{color:#d2eee4;text-underline-offset:4px}

/* Lush water and soft light complement the illustrated character. */
.aquarium-backdrop{background-image:url('aquarium-garden.png');background-position:center center}
.ocean{background:#164e60}
.ocean:after{background:linear-gradient(180deg,#08243959,transparent 32%,#072c3b12 55%,#0922339c);box-shadow:inset 0 0 50px #0b283a24}
.light{clip-path:none;filter:blur(12px);opacity:.40}
.ocean-grain{display:block;opacity:.045}
.surface-shimmer{opacity:.45;animation:surface-light 9s ease-in-out infinite alternate}
.particle{border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffffff38,transparent 68%);border-color:#e3fff75c;box-shadow:inset 1px 1px 2px #ffffff35}
.glass-reflection{background:linear-gradient(112deg,transparent 12%,#eaffff08 13%,transparent 29%,transparent 78%,#eaffff06 79%,transparent 90%);box-shadow:inset 2px 0 3px #dcfff72b,inset -2px 0 3px #dcfff72b}
@media(prefers-reduced-motion:reduce){.surface-shimmer{animation:none}}

/* Slow distant fish; independent lanes avoid a synchronized parade. */
.fish-school{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fish-lane{position:absolute;top:var(--fish-y);left:-12%;width:var(--fish-size);color:var(--fish-color);opacity:.65;animation:fish-cross var(--fish-time) linear infinite;animation-delay:var(--fish-delay);will-change:left}
.fish-reverse{animation-direction:reverse}.fish-reverse .little-fish{transform:scaleX(-1)}
.fish-bob{animation:fish-bob var(--bob-time) ease-in-out infinite;animation-delay:var(--fish-delay)}
.little-fish{display:block;width:100%;overflow:visible;filter:drop-shadow(0 2px 3px #2d637022)}
.fish-tail{transform-box:fill-box;transform-origin:right center;animation:fish-tail .9s ease-in-out infinite alternate}
@keyframes fish-cross{from{left:-12%}to{left:112%}}
@keyframes fish-bob{0%,100%{transform:translateY(-7px) rotate(-3deg)}50%{transform:translateY(7px) rotate(3deg)}}
@keyframes fish-tail{from{transform:scaleX(.65)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.fish-lane{animation:none;left:var(--fish-rest);will-change:auto}.fish-bob,.fish-tail{animation:none}}

/* A small expression drawer keeps the conversation uncluttered. */
.expression-toggle{margin-left:auto;background:none;color:#6b7c87;font-size:12px;padding:8px 12px;border-radius:10px}
.expression-toggle[aria-expanded="true"]{background:#ecdce5;color:#85516b}
.expression-picker{margin-top:12px;padding-top:12px;border-top:1px solid #d4dde0}
.expression-picker[hidden]{display:none}
.expression-choices{display:flex;flex-wrap:wrap;gap:6px}
.expression-choices button{border:1px solid #d6ccd2;border-radius:12px;padding:7px 10px;background:#fff9fc;color:#625366;font-size:12px}
.expression-choices button[aria-pressed="true"]{background:#cd8ba9;border-color:#cd8ba9;color:white}
.expression-choices button:disabled{opacity:.45;cursor:wait}
.expression-choices button:focus-visible,.expression-toggle:focus-visible{outline:2px solid #905876;outline-offset:3px}
.expression-note{font-size:10px;line-height:1.6;margin:8px 0 0;color:#72808a}

/* Jelly Lumi: a small round creature rather than a full-height doll. */
.slime-mode .character{filter:drop-shadow(0 16px 16px #062f4530);transform:none}
.slime-mode #modelControls legend{font-size:0}.slime-mode #modelControls legend:before{content:'ルミを回して見る';font-size:13px}.slime-mode #angleValue{font-size:13px}
.slime-mode .model-link{display:none}