:root{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#263955;background:#e9f0f8;font-size:16px;font-synthesis:none;--blue:#3459a5;--ink:#263955;--paper:#fffdf8;--line:#d7dfeb}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}a{color:var(--blue)}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #d5912f;outline-offset:5px}[hidden]{display:none!important}.topbar{height:88px;padding:0 5vw;display:flex;align-items:center;gap:24px;position:relative;z-index:5}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.05rem;font-weight:700;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;background:var(--blue);color:var(--paper);height:35px;width:35px;border-radius:12px;font-size:1.5rem}.edition{font-size:.8rem;letter-spacing:.06em;color:#566780;margin-left:auto}.quiet-button{border:1px solid #c7d3e5;background:transparent;border-radius:100px;padding:10px 17px;color:#40567a;text-decoration:none;font-size:.85rem}.quiet-button span{margin-left:8px}#parent-button{margin-left:auto}.topbar:has(#parent-button:not([hidden])) .edition{display:none}#play-area{position:relative;min-height:calc(100svh - 88px);display:flex;justify-content:center;align-items:flex-start;padding:16px 20px 70px;isolation:isolate;outline:none;overflow:hidden}.stage-sky{position:absolute;inset:0;z-index:-3;pointer-events:none}.cloud{position:absolute;width:150px;height:30px;border-radius:50%;background:#f5f8fc;transform:rotate(-8deg)}.cloud-one{left:12%;top:14%}.cloud-two{right:9%;top:34%;width:90px;transform:rotate(5deg)}.stage-floor{position:absolute;z-index:-2;left:-5%;right:-5%;height:26%;bottom:0;background:#dce6f1;border-radius:50% 50% 0 0/25% 25% 0 0;pointer-events:none}.floor-line{position:absolute;width:80%;height:2px;top:18%;left:10%;background:#cbd7e7;border-radius:100%}.setup-card{width:430px;max-width:100%;padding:30px 36px 24px;border:1px solid #e2e6eb;border-radius:28px;background:var(--paper);box-shadow:0 16px 50px #40567a0c;text-align:center;z-index:2}.eyebrow{font-size:.8rem;letter-spacing:.2em;color:#68788d;font-weight:700;margin:0 0 10px}h1{font-size:2.25rem;line-height:1.3;letter-spacing:.06em;margin:0;color:var(--blue)}.intro-creatures{height:125px;display:flex;justify-content:center;align-items:end;margin:10px -10px 4px}.intro-creatures svg{width:115px;height:125px;margin:0 -4px}.intro{line-height:1.85;font-size:.95rem;margin:10px 0 22px;color:#52617a}.setup-fields{display:flex;align-items:center;justify-content:space-between;margin:12px 0 18px;font-size:.9rem}.duration-control{display:flex;gap:8px;align-items:center}.duration-control select{color:var(--ink);background:#edf2f8;border:1px solid var(--line);padding:8px 28px 8px 16px;border-radius:10px;font-weight:700;font-size:1.05rem}.setting-row{display:flex;align-items:center;gap:12px;font-size:.85rem;margin:16px 0}.setting-row label{white-space:nowrap}.setting-row input{width:100%;min-width:40px;accent-color:var(--blue)}.setting-row output{min-width:36px;text-align:right;font-size:.8rem;font-variant-numeric:tabular-nums}.check-row{font-size:.85rem;display:flex;align-items:center;gap:9px;margin:15px 0 22px;text-align:left}.check-row input{width:17px;height:17px;accent-color:var(--blue)}.primary-button{border:0;border-radius:15px;background:var(--blue);color:#fff;padding:16px 20px;font-weight:700;letter-spacing:.03em;width:100%;box-shadow:0 4px 0 #284580;font-size:1rem}.primary-button:hover{background:#2e5096}.primary-button span{margin-left:12px}.primary-button:active{transform:translateY(2px);box-shadow:0 2px 0 #284580}.parent-note{font-size:.8rem;line-height:1.8;color:#65748a;margin:19px 0 0}.about{font-size:.8rem;margin-top:16px;color:#637186;text-align:left;line-height:1.8}.about summary{text-align:center;cursor:pointer}.about p{margin:12px 0}.band{display:flex;align-items:flex-end;justify-content:center;gap:clamp(0px,3vw,55px);width:min(1100px,94vw);position:absolute;bottom:19%;left:50%;transform:translateX(-50%)}.creature{width:clamp(160px,25vw,320px);flex:0 1 320px;min-width:0;transform-origin:50% 86%;will-change:transform}.creature svg{width:100%;display:block;overflow:visible}.band[data-count="1"] .creature{flex-basis:370px;max-width:62vw}.play-message{position:absolute;top:10%;left:0;width:100%;text-align:center;color:var(--blue);font-size:1.8rem;font-weight:700;letter-spacing:.1em}.play-message small{display:block;margin-top:14px;font-size:.85rem;letter-spacing:0;font-weight:400;color:#627491}.play-hint{position:absolute;bottom:5%;left:0;width:100%;text-align:center;font-size:.9rem;letter-spacing:.13em;color:#576d8d}.is-playing #play-area,.is-ended #play-area,.is-paused #play-area{height:calc(100svh - 88px);min-height:380px}.secondary-button{width:100%;background:#f0f4fa;border:1px solid #d6dfed;border-radius:12px;color:var(--ink);padding:13px 15px;margin-top:12px}.text-button{display:block;background:none;border:0;color:#536a90;text-decoration:underline;text-underline-offset:4px;padding:12px;margin:8px auto 0;font-size:.85rem}dialog{border:1px solid #dbe2ed;border-radius:24px;background:var(--paper);color:var(--ink);width:420px;max-width:calc(100vw - 32px);padding:28px;max-height:85svh;overflow:auto;box-shadow:0 24px 90px #1f36552e}dialog::backdrop{background:#26395535;backdrop-filter:blur(4px)}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog-header .eyebrow{margin:0}.icon-button{font-size:1.6rem;line-height:1;width:35px;height:35px;border:0;background:#edf1f6;border-radius:50%;color:var(--ink)}h2{font-size:1.5rem;margin:16px 0 8px;color:var(--blue)}.remaining{font-size:.85rem;color:#68788d;line-height:1.7;font-variant-numeric:tabular-nums}.advanced{font-size:.85rem;line-height:1.8;margin:20px 0 0;color:#62708a}.advanced summary{cursor:pointer}.error{font-size:.85rem;color:#993d39;line-height:1.7}.gallery-main{max-width:1200px;padding:24px 5vw 70px;margin:auto}.gallery-main h1{font-size:2rem}.gallery-main>p:not(.eyebrow){max-width:700px;line-height:1.9;color:#5b6b80}.gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:30px 0 50px}.sample{background:var(--paper);border-radius:18px;border:1px solid #dce3ed;padding:10px 12px 18px;text-align:center}.sample svg{display:block;width:100%;aspect-ratio:300/320}.sample p{font-size:.8rem;color:#63728b;line-height:1.7;margin:0}.sample strong{display:block;color:var(--ink);font-size:.9rem;margin-bottom:4px}@media(max-width:700px){.topbar{height:70px;padding:0 22px}.edition{display:none}#play-area{min-height:calc(100svh - 70px);padding:5px 16px 45px}.setup-card{padding:24px 24px 22px}.is-playing #play-area,.is-ended #play-area,.is-paused #play-area{height:calc(100svh - 70px)}h1{font-size:2rem}.band{width:98vw;bottom:24%;gap:0}.creature{width:32vw}.play-message{top:13%;font-size:1.5rem}.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.gallery-main{padding:25px 18px}.gallery-main h1{font-size:1.5rem}.sample{padding:6px 5px 12px}.cloud-one{left:3%}.desktop-br{display:none}}@media(max-width:400px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.brand{font-size:.9rem}.quiet-button{padding:9px 12px}.setup-card{padding:24px 20px}.setting-row{gap:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Large PC stage; motion belongs to the body, never to its ground shadow. */
.motion-body{transform-box:fill-box;transform-origin:50% 100%}
.band{width:min(1500px,94vw);bottom:15%;gap:clamp(8px,3vw,65px)}
.creature{width:clamp(180px,28vw,420px);flex-basis:420px;max-height:55svh}
.creature svg{max-height:55svh}
.band[data-count="1"] .creature{flex-basis:460px;max-width:65vw}
.seed-place{position:absolute;bottom:16%;left:50%;width:110px;height:30px;transform:translateX(-50%);border:2px dashed #8eabc7;border-radius:50%;background:#e9f0f855;pointer-events:none}
.seed-place span{display:block;width:13px;height:13px;border-radius:50%;background:#a8bdd1;margin:-15px auto 0}
.seed-place[data-count="1"]{left:79%}
.seed-place[data-count="2"]{left:88%}
@media(max-width:700px){.band{width:96vw;gap:0;bottom:22%}.creature{width:32vw}.seed-place{width:55px;height:20px;bottom:22%}}

/* Fixed landing places: births never reflow existing characters. */
.band{display:block;height:min(55svh,34vw);gap:0}
.band .creature,.band[data-count="1"] .creature{position:absolute;bottom:0;width:33.333333%;max-width:none;max-height:none;margin:0}
.band .creature>svg{width:100%;height:auto;max-height:55svh}
.stable-motion,.appearance-layer{transform-box:view-box;transform-origin:150px 270px}
.seed-place,.seed-place[data-count="1"],.seed-place[data-count="2"]{bottom:calc(15% + 2.5svh)}
@media(max-width:700px){.seed-place,.seed-place[data-count="1"],.seed-place[data-count="2"]{bottom:calc(22% + 2vw)}}

.face-response{transform-box:fill-box;transform-origin:50% 50%}

#welcome-open{margin-left:auto;background:#fffdf8}#welcome-open small{font-size:.65rem;color:#637186}#welcome-open:not([hidden])~#parent-button{margin-left:0}@media(max-width:700px){.topbar:has(#welcome-open:not([hidden])){gap:8px;padding:0 12px}.topbar:has(#welcome-open:not([hidden])) .brand>span:last-child{display:none}#welcome-open small{display:none}}