/* Only the opening owns the viewport; learning and account layouts keep their rules. */
html[data-opening=true],html[data-opening=true] body{overflow:hidden;background:#0b1927;color-scheme:dark}
html[data-opening=true] .ambient-shell{visibility:hidden}
html[data-opening=true] #app{z-index:2}
.opening-world{position:fixed;inset:0;width:100%;height:100dvh;z-index:1;overflow:hidden;background:#0b1927}
.opening-world canvas{display:block;width:100%;height:100%}
.opening-screen{--lime:#deedb8;--text:#f4eedf;--muted:#9fadaa;position:relative;display:block!important;width:100%;max-width:none!important;margin:0!important;padding:0!important;height:100dvh;min-height:0!important;isolation:isolate;background:transparent!important;overflow:hidden;color:#f4eedf}
.opening-screen [hidden]{display:none!important}
.opening-screen::before{content:none}
.opening-screen .journey-options{position:absolute;top:max(22px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));z-index:8;display:flex;align-items:flex-start;gap:16px}
.opening-screen .journey-options button{border:1px solid #ffffff26;background:#0b1927;color:#c0cdc5;padding:8px 15px;font-size:12px;border-radius:24px;min-height:40px}
.opening-sound{display:flex;align-items:center;gap:14px}.opening-sound label{display:flex;align-items:center;gap:6px;font-size:11px;color:#a1aeab}.opening-sound input{width:86px;accent-color:#dceab4;margin:0}.opening-sound output{min-width:28px;font-variant-numeric:tabular-nums}
.opening-copy{position:absolute;top:18%;left:20px;right:20px;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
.opening-copy h1{font-size:clamp(24px,2.6vw,40px);font-weight:600;letter-spacing:.03em;line-height:1.5}
.opening-copy p{font-size:16px;margin-top:14px;color:#a1aeab}
.opening-screen .opening-eyebrow{font-size:11px;letter-spacing:.16em;color:#a9bda9;margin:0 0 16px;line-height:1.5}.mobile-break{display:none}
.opening-choices{position:absolute;inset:0;pointer-events:none}
.opening-choice{position:absolute;background:transparent;border:0;border-radius:45%;padding:0;pointer-events:auto;color:#d6dfd1;min-width:0;opacity:1!important}
.opening-choice>span{position:absolute;bottom:-8px;left:0;width:100%;text-align:center;font-size:15px;letter-spacing:.07em}
.opening-choice:hover>span,.opening-choice:focus-visible>span{color:#e4efc4}
.opening-choice:focus-visible{outline:2px solid #dceab4;outline-offset:6px;background:#ffffff20}
.opening-choice:disabled{pointer-events:none}.opening-screen[data-screen=confirm] .opening-choice>span{opacity:0}
.opening-promise{position:absolute;left:52%;right:7%;top:31%;text-align:left;z-index:4;opacity:0}
.opening-promise h2{font-size:12px;font-weight:500;letter-spacing:.10em;color:#a9bda9;margin:0 0 20px}
.opening-promise .encounter-promise{opacity:1;transform:none;visibility:inherit;color:#f4eedf}
.opening-promise p{font-size:clamp(23px,2.1vw,36px);font-weight:550;line-height:1.6;letter-spacing:.02em}
.opening-promise p+p{font-size:14px;font-weight:400;color:#a1aeab;margin:16px 0 26px}
.opening-screen .journey-primary{min-width:240px;width:auto;max-width:100%;margin:0;background:#deedb8;color:#203b35;border-radius:28px;box-shadow:none;min-height:52px;font-size:15px}
.opening-screen .binding-notice{font-size:11px;font-weight:400;color:#a1aeab;margin:12px 0 4px;line-height:1.65}
.opening-screen .encounter-back{font-size:12px;border:0;border-bottom:1px solid #94afa450;border-radius:0;min-height:34px;padding:4px 0;color:#acbfae}
.opening-error{max-width:460px;margin:10px 0 0;font-size:12px!important;padding:8px 12px;line-height:1.5!important;background:#302b24;color:#eccdad;border-color:#d8b59a}
.opening-beginning{position:absolute;left:52%;right:7%;top:38%;text-align:left;z-index:4;pointer-events:none}
.opening-beginning h1{font-size:clamp(27px,2.5vw,44px);line-height:1.65;font-weight:550;letter-spacing:.03em;margin:0}
.opening-next{margin-top:27px;pointer-events:auto}.opening-beginning .opening-next-note{font-size:12px;line-height:1.6;color:#a1aeab;margin:10px 0 0}
.opening-loading{position:absolute;left:20px;right:20px;bottom:9%;text-align:center;color:#acbfae;font-size:13px}
.opening-loading button{font-size:12px;padding:3px 10px;min-height:34px;margin-left:12px}
.opening-audio-status{position:absolute;left:16px;right:16px;bottom:4%;text-align:center;color:#92a79d;font-size:11px;line-height:1.7;z-index:6}
.opening-audio-status button{border:0;border-bottom:1px solid #8ba79b;padding:0 4px;min-height:26px;font-size:11px;margin-left:8px}
.opening-fallback-pet{display:none;position:absolute;inset:0 0 20px}
html[data-opening-renderer=fallback] .opening-screen{background:#0b1927!important}
html[data-opening-renderer=fallback] .opening-fallback-pet{display:block}
html[data-opening-renderer=fallback] .opening-screen:not([data-screen=select]) .opening-loading{bottom:4%;font-size:11px}
html[data-opening-renderer=fallback] .opening-audio-status{bottom:9%}
.opening-fallback-companion{display:none;position:absolute;left:15%;top:32%;width:27%;height:36%}html[data-opening-renderer=fallback] .opening-fallback-companion{display:block}
.opening-courses{position:absolute;inset:17% 7% 8% 39%;overflow:auto;padding:12px 4px;scrollbar-width:thin;transform:translateX(24px);opacity:0}
.opening-courses .journey-kicker{font-size:12px;color:#a9bda9;margin:0 0 12px;letter-spacing:.08em}
.opening-courses h1{font-size:32px;line-height:1.4;letter-spacing:.04em;font-weight:550;text-align:left;margin:0}
.opening-courses .task-selection-intro{color:#a1aeab;font-size:13px;margin:10px 0 22px}
.opening-courses .journey-task-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:none;margin:0 0 18px}
.opening-courses .journey-task{min-height:145px;padding:14px 18px;background:#102531b0;border:1px solid #526b655e;border-radius:18px;color:#e9eddc;transition:background .2s,border-color .2s}
.opening-courses .journey-task:hover{background:#1b313e}.opening-courses .journey-task.selected{background:#23463f;border-color:#dceab4;transform:none}
.opening-courses .task-diagram{height:33px;margin-bottom:8px;stroke:#93b9a5}.opening-courses .task-diagram-highlight{stroke:#dceab4}.opening-courses .task-diagram circle{fill:#dceab4}.opening-courses .task-chapter{font-size:10px;color:#a1aeab}.opening-courses .journey-task strong{font-size:20px;margin:3px 0}.opening-courses .task-description{font-size:12px;line-height:1.6;color:#a1aeab}.opening-courses .task-choice-mark{right:14px;top:12px;font-size:17px;color:#dceab4}
.opening-courses .task-selection-cancel{display:block;margin:10px 0 0;font-size:12px;color:#acbfae}
.opening-companion-caption{position:absolute;left:12%;top:72%;font-size:12px;color:#a9bda9;letter-spacing:.06em}
@media(max-width:700px){
 .opening-screen .journey-options{top:max(12px,env(safe-area-inset-top));right:14px;gap:12px}.opening-screen .journey-options button{font-size:11px;padding:6px 12px;min-height:36px}
 .opening-sound{flex-direction:column;align-items:flex-end;gap:5px}.opening-sound label{font-size:10px;gap:4px}.opening-sound input{width:58px}.opening-sound output{min-width:24px}
 .opening-copy{top:16%;left:18px;right:18px}.opening-copy h1{font-size:23px;letter-spacing:.03em;line-height:1.5}.mobile-break{display:block}.opening-copy p{font-size:13px;margin-top:10px}.opening-copy .opening-eyebrow{font-size:10px;margin-bottom:10px}.opening-choice>span{font-size:13px}
 .opening-promise{top:52%;left:18px;right:18px;text-align:center}.opening-promise h2{font-size:11px;margin-bottom:10px}.opening-promise p{font-size:22px;line-height:1.55}.opening-promise p+p{font-size:12px;margin:10px 0 19px}.opening-screen .journey-primary{font-size:14px;min-height:46px;min-width:220px;padding:11px 20px}.opening-screen .binding-notice{font-size:10px;margin:9px 0 3px}.opening-screen .encounter-back{font-size:11px;min-height:30px}.opening-error{margin:7px auto 0}
 .opening-beginning{top:51%;left:24px;right:24px;text-align:center}.opening-beginning h1{font-size:24px;line-height:1.6}.opening-beginning .opening-eyebrow{font-size:11px;margin-bottom:14px}.opening-next{margin-top:24px}.opening-next .journey-primary{margin:0 auto;width:min(270px,100%);min-width:0}.opening-beginning .opening-next-note{font-size:11px}
 .opening-loading{bottom:8%;font-size:12px}.opening-audio-status{font-size:10px;bottom:3%}
 .opening-courses{inset:31% 16px max(14px,env(safe-area-inset-bottom));padding:6px 0;transform:translateY(20px)}.opening-courses h1{font-size:23px}.opening-courses .journey-kicker{font-size:10px;margin-bottom:7px}.opening-courses .task-selection-intro{font-size:11px;margin:6px 0 16px}.opening-courses .journey-task-list{gap:8px;margin-bottom:14px}.opening-courses .journey-task{min-height:132px;padding:10px 12px}.opening-courses .task-diagram{height:28px;margin-bottom:5px}.opening-courses .journey-task strong{font-size:16px}.opening-courses .task-description{font-size:10px}.opening-courses .task-chapter{font-size:9px}.opening-courses .task-choice-mark{right:8px;top:6px;font-size:13px}.opening-courses .journey-primary{width:100%;min-width:0;font-size:13px;min-height:44px}.opening-companion-caption{left:44%;top:18%;font-size:12px}.opening-screen[data-screen=task] .opening-audio-status{display:none}
 .opening-fallback-companion{left:30%;top:19%;width:40%;height:23%}.opening-screen[data-screen=task] .opening-fallback-companion{left:10%;top:11%;width:27%;height:16%}
}
@media(max-height:650px) and (min-width:701px){.opening-copy{top:15%}.opening-promise{top:26%}.opening-promise p{font-size:25px}.opening-promise p+p{margin:10px 0 16px}.opening-promise h2{margin-bottom:12px}.opening-courses{inset:14% 6% 4% 39%}.opening-courses .journey-task{min-height:118px}.opening-courses .task-diagram{height:24px}}
@media(max-height:650px) and (max-width:700px){
 .opening-copy{top:17%}.opening-copy h1{font-size:20px}.opening-copy p{font-size:12px}.opening-copy .opening-eyebrow{margin-bottom:6px}
 .opening-promise{top:51%}.opening-promise h2{margin-bottom:6px}.opening-promise p{font-size:19px}.opening-promise p+p{font-size:11px;margin:7px 0 12px}.opening-screen .journey-primary{min-height:42px}.opening-screen .binding-notice{margin-top:7px;font-size:9px}
 .opening-beginning{top:51%}.opening-beginning h1{font-size:22px}.opening-next{margin-top:18px}.opening-beginning .opening-eyebrow{margin-bottom:10px}
 .opening-courses{top:30%;bottom:10px}.opening-courses h1{font-size:21px}.opening-courses .task-selection-intro{margin:4px 0 10px}.opening-courses .journey-task{min-height:100px;padding:7px 10px}.opening-courses .task-diagram{height:20px;margin-bottom:2px}.opening-courses .journey-task strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.opening-copy{transition:none}}

@media(max-width:700px){.opening-promise .journey-primary{margin:0 auto}}
.opening-fallback-pet svg,.opening-fallback-companion svg{width:100%;height:100%}html:not([data-opening-renderer=fallback]) .opening-screen[data-screen=select] .opening-loading{top:49%;bottom:auto;background:#0b1927;padding:18px}html[data-opening-renderer=fallback] .opening-screen[data-screen=select] .opening-audio-status{bottom:4%}

/* Bonding ceremony (2026-10-12): still companions on lit pedestals, a ring that fills while the child holds, a sealed badge. */
.opening-choice[data-id=frog]{--pc:#c8f05a}.opening-choice[data-id=owl]{--pc:#ffc940}.opening-choice[data-id=pangolin]{--pc:#52c6ff}.opening-choice[data-id=robot]{--pc:#ab9dff}
.opening-screen{--pc:#ffc940}
.opening-choice::after{content:"";position:absolute;left:8%;right:8%;bottom:18px;height:26px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 55%,transparent),transparent);opacity:.32;transition:opacity .5s ease,transform .5s ease;pointer-events:none;z-index:-1}
.opening-screen[data-screen=select] .opening-choice:hover::after,.opening-screen[data-screen=select] .opening-choice:focus-visible::after{opacity:1;transform:scaleX(1.12)}
.opening-choice:focus-visible{outline:none;background:transparent}
.opening-choice>.opening-choice-name{bottom:-14px;font-size:19px;font-weight:700;letter-spacing:.12em;color:#d6dfd1;transition:color .4s ease}
.opening-screen[data-screen=select] .opening-choice:hover>.opening-choice-name,.opening-screen[data-screen=select] .opening-choice:focus-visible>.opening-choice-name{color:var(--pc)}
.opening-choice-trait{position:absolute;left:-12%;right:-12%;bottom:-46px;font-size:14px;line-height:1.5;color:#c9d2c6;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.opening-screen[data-screen=select] .opening-choice:hover>.opening-choice-trait,.opening-screen[data-screen=select] .opening-choice:focus-visible>.opening-choice-trait{opacity:1;transform:none}
.opening-screen[data-screen=confirm] .opening-choice>.opening-choice-trait{opacity:0}
/* The chosen companion is encircled; the ring fills as the child holds the button. */
.opening-screen[data-screen=confirm] .opening-choice[aria-pressed=true]::before{content:"";position:absolute;inset:-9% -14% 4% -14%;border-radius:50%;border:2px solid color-mix(in srgb,var(--pc) 35%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--pc) 30%,transparent);background:conic-gradient(from -90deg,color-mix(in srgb,var(--pc) 60%,transparent) calc(var(--hold,0)*360deg),transparent 0) border-box;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));animation:bond-ring-in 1.1s ease both;pointer-events:none}
@keyframes bond-ring-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.opening-promise .opening-eyebrow{font-size:13px;letter-spacing:.24em;color:#d9c48a;margin:0 0 8px}
.opening-promise h2{font-size:clamp(34px,3.2vw,52px);font-weight:800;letter-spacing:.08em;color:var(--pc);margin:0 0 6px}
.opening-promise .bond-trait{font-size:17px;font-weight:500;color:#e8e2cf;margin:0 0 18px}
.opening-promise .encounter-promise p{font-size:clamp(19px,1.6vw,26px)}
.bond-hold{position:relative;overflow:hidden;min-width:260px;justify-content:center;user-select:none;-webkit-user-select:none;touch-action:none}
.bond-hold-fill{position:absolute;inset:0;background:color-mix(in srgb,var(--pc) 70%,#fff);transform-origin:left;transform:scaleX(var(--hold,0));pointer-events:none}
.bond-hold-label{position:relative}
.bond-hold.is-holding{box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 45%,transparent),0 0 26px color-mix(in srgb,var(--pc) 40%,transparent)}
/* Sealing: the ring closes, one flash, a few slow sparks, then the badge. */
.bond-ring{position:absolute;z-index:3;border-radius:50%;pointer-events:none;border:3px solid var(--pc);box-shadow:0 0 40px color-mix(in srgb,var(--pc) 50%,transparent),inset 0 0 30px color-mix(in srgb,var(--pc) 25%,transparent);opacity:calc(.25 + .75*var(--bond-seal,0));transform:translate(-50%,-50%) scale(calc(1.15 - .15*var(--bond-seal,0)))}
.opening-screen.is-flash .bond-ring{box-shadow:0 0 90px var(--pc),inset 0 0 50px color-mix(in srgb,var(--pc) 50%,transparent)}
.bond-sparks{position:absolute;z-index:3;width:0;height:0;pointer-events:none}
.bond-sparks i{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffe89a;box-shadow:0 0 10px #ffd34d;opacity:0;animation:bond-spark 2.4s ease-out both;animation-delay:calc(900ms + var(--i)*70ms);--a:calc(var(--i)*25.7deg)}
@keyframes bond-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(-40px)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-170px)}}
.bond-badge{display:inline-flex;flex-direction:column;gap:2px;padding:14px 22px 14px 58px;margin:0 0 22px;border-radius:16px;position:relative;background:linear-gradient(145deg,#2b2410,#191408);border:1px solid #8a6c18;opacity:0}
.bond-badge-seal{position:absolute;left:14px;top:50%;width:32px;height:32px;margin-top:-16px;display:grid;place-items:center;border-radius:50%;background:var(--pc);color:#1a1405;font-size:16px}
.bond-badge strong{font-size:20px;color:#ffe89a;letter-spacing:.06em}.bond-badge small{font-size:13px;color:#d9c48a;letter-spacing:.1em}
@media(prefers-reduced-motion:reduce){.bond-sparks{display:none}.opening-screen[data-screen=confirm] .opening-choice[aria-pressed=true]::before{animation:none}.opening-choice::after,.opening-choice-trait{transition:none}}
.opening-choice::after{left:-4%;right:-4%;bottom:10px;height:44px;background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 80%,transparent),color-mix(in srgb,var(--pc) 18%,transparent) 70%,transparent);opacity:.22}
.opening-screen[data-screen=select] .opening-choice:hover::after,.opening-screen[data-screen=select] .opening-choice:focus-visible::after{opacity:.95;transform:scaleX(1.08)}
.opening-screen[data-screen=select] .opening-choice::before{content:"";position:absolute;left:10%;right:10%;top:-55%;bottom:24px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--pc) 16%,transparent));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:-1}
.opening-screen[data-screen=select] .opening-choice:hover::before,.opening-screen[data-screen=select] .opening-choice:focus-visible::before{opacity:1}
.opening-screen[data-screen=select] .opening-choice:hover>.opening-choice-name,.opening-screen[data-screen=select] .opening-choice:focus-visible>.opening-choice-name{transform:scale(1.12)}
.opening-choice>.opening-choice-name{transition:color .4s ease,transform .4s ease}
.opening-choice-trait{font-size:15px;color:#eee6cf;bottom:-52px}
.opening-screen[data-screen=confirm] .opening-choice[aria-pressed=true]::before{inset:auto;left:50%;top:44%;width:118%;height:auto;aspect-ratio:1;translate:-50% -50%;border-width:3px;border-color:color-mix(in srgb,var(--pc) 45%,transparent);box-shadow:0 0 36px color-mix(in srgb,var(--pc) 35%,transparent),inset 0 0 26px color-mix(in srgb,var(--pc) 18%,transparent);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 9px));background:conic-gradient(from 0deg,var(--pc) calc(var(--hold,0)*360deg),color-mix(in srgb,var(--pc) 22%,transparent) 0)}
.bond-hold.button{background:var(--pc);color:#1a1405;border-color:var(--pc);font-weight:800;font-size:18px;min-height:56px}
.bond-hold-fill{background:linear-gradient(90deg,#fff7d6,#ffffff)}
.bond-hold:disabled{opacity:.7}
.opening-screen[data-screen=confirm] .opening-choice[aria-pressed=true]::before{border:0}
.opening-beginning .journey-primary,.opening-courses .journey-primary{background:var(--pc);border-color:var(--pc);color:#1a1405}
/* Calendar welcome: the partner on its own colour stage, a course-motif field behind, and the route appearing in order. */
body:has(.opening-screen:is([data-screen=select],[data-screen=confirm],[data-screen=task],[data-screen=departure])) .opening-world{display:none}
.welcome-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.welcome-field svg{width:100%;height:100%}
.welcome-field .wf-faint{stroke:#ffffff08;stroke-width:1;fill:none}
.welcome-field .wf-axis{stroke:#9fb3a6;stroke-width:1.2;fill:none;opacity:.2}
.welcome-field .wf-wave{stroke:var(--pc);stroke-width:1.6;fill:none;opacity:.2}
.welcome-field .wf-ray{stroke:var(--pc);stroke-width:1.8;fill:none;opacity:.3}
.welcome-field .wf-mirror{stroke:#dfe6d6;stroke-width:3;stroke-linecap:round;opacity:.3}
.welcome-field .wf-curve{stroke:var(--pc);stroke-width:1.6;fill:none;opacity:.28}
.welcome-field .wf-dot{fill:var(--pc);opacity:.4;animation:wf-settle 1.1s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*34ms + .8s)}
.welcome-field .wf-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:wf-draw 2.2s cubic-bezier(.3,.7,.2,1) var(--d,0s) forwards}
.welcome-field .wf-wave-track{animation:wf-flow 9s linear infinite}
@keyframes wf-draw{to{stroke-dashoffset:0}}
@keyframes wf-flow{from{transform:translateX(0)}to{transform:translateX(-250px)}}
@keyframes wf-settle{from{opacity:0;transform:translateY(-18px)}to{opacity:.4;transform:none}}
.welcome-stage{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(28px,5vw,88px);max-width:1120px;margin:0 auto;padding:0 clamp(24px,6vw,88px)}
.welcome-pet{position:relative;justify-self:center;width:min(420px,100%);aspect-ratio:1;display:grid;place-items:center}
.welcome-pet::before{content:"";position:absolute;left:12%;right:12%;bottom:6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,var(--pc),transparent 72%);opacity:.5;filter:blur(10px);animation:welcome-glow 3.2s ease-in-out infinite}
.welcome-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.welcome-ring circle{fill:none;stroke:var(--pc);stroke-width:.7;opacity:.5;stroke-dasharray:1;stroke-dashoffset:1;animation:wf-draw 1.8s cubic-bezier(.3,.7,.2,1) .2s forwards}
.welcome-pet-body{position:relative;width:74%;height:74%;animation:welcome-rise 1.1s cubic-bezier(.2,.9,.3,1.08) .1s both,welcome-breathe 4s ease-in-out 1.3s infinite}
.welcome-pet-body svg{width:100%;height:100%}
.welcome-name{position:absolute;left:0;bottom:-6px;margin:0;font-size:13px;color:#b7c6bb;letter-spacing:.06em}
@keyframes welcome-rise{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@keyframes welcome-breathe{0%,100%{transform:none}50%{transform:translateY(-4px)}}
@keyframes welcome-glow{0%,100%{opacity:.42;transform:scaleX(1)}50%{opacity:.6;transform:scaleX(1.06)}}
.welcome-copy{display:flex;flex-direction:column;gap:14px;animation:welcome-in .9s ease .45s both}
.welcome-copy .journey-kicker{margin:0;font-size:13px;color:var(--pc);letter-spacing:.08em}
.welcome-copy h1{margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.3;letter-spacing:.03em;font-weight:600;color:#f3f5ea}
.welcome-lede{margin:0;max-width:34em;font-size:16px;line-height:1.8;color:#a9b7ad}
.welcome-track{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;list-style:none;margin:10px 0 6px;padding:0}
.welcome-track li{display:flex;align-items:center;gap:10px;font-size:17px;color:#e6ecdf;animation:welcome-in .6s ease both;animation-delay:calc(.9s + var(--i)*.18s)}
.welcome-track li+li::before{content:"";width:34px;height:1.5px;margin-right:4px;background:linear-gradient(90deg,var(--pc),transparent);opacity:.7}
.welcome-track b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--pc);color:var(--pc);font-size:16px;font-weight:700}
.welcome-go{align-self:flex-start;margin-top:12px;background:var(--pc);border-color:var(--pc);color:#1a1405;animation:welcome-in .6s ease 1.6s both}
@keyframes welcome-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .welcome-stage{grid-template-columns:1fr;align-content:center;justify-items:center;gap:14px;padding:64px 20px 90px;overflow:auto;text-align:left}
 .welcome-pet{width:min(200px,52vw)}
 .welcome-copy{width:100%}
 .welcome-copy h1{font-size:26px}
 .welcome-lede{font-size:14px}
 .welcome-track li{font-size:15px}
 .welcome-go{align-self:stretch;justify-content:center}
}
html[data-reduced=true] .welcome-field .wf-draw,html[data-reduced=true] .welcome-ring circle{stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){
 .welcome-field *,.welcome-ring circle,.welcome-pet::before,.welcome-pet-body,.welcome-copy,.welcome-track li,.welcome-go{animation:none!important}
 .welcome-field .wf-draw,.welcome-ring circle{stroke-dashoffset:0}
 .welcome-field .wf-dot{opacity:.5}
}
html[data-reduced=true] .welcome-field *,html[data-reduced=true] .welcome-pet-body,html[data-reduced=true] .welcome-pet::before,html[data-reduced=true] .welcome-copy,html[data-reduced=true] .welcome-track li,html[data-reduced=true] .welcome-go{animation:none!important}
html[data-reduced=true] .welcome-field .wf-dot{opacity:.5}
/* v2 selection and bond. Four partners stand on their own colour floors; a hover or focus lights the stage and shows one line.
   Confirming centres the chosen partner beside the one-second bond. Legacy geometry is overridden only inside this scope. */
.opening-v2 .welcome-field{z-index:0}
.opening-v2 .opening-copy{position:absolute!important;left:0!important;right:0!important;top:14%!important;text-align:center;z-index:3;opacity:1!important;padding:0 24px}
.opening-v2 .opening-copy h1{font-size:clamp(28px,3.2vw,44px);line-height:1.35;margin:0;letter-spacing:.03em}
.opening-v2 .opening-copy p{font-size:16px;margin:14px 0 0;color:#a9b7ad}
.opening-v2 .opening-choices{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%);width:min(1060px,92vw);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,26px);z-index:2;pointer-events:none}
.opening-v2 .opening-choice{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:min(360px,52vh);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;padding:14px 12px 18px;border:1px solid #ffffff14;border-radius:26px;background:linear-gradient(180deg,#ffffff07,#ffffff02);color:#d6dfd1;cursor:pointer;pointer-events:auto;visibility:visible!important;transition:border-color .4s ease,background .4s ease;overflow:visible}
.opening-v2 .opening-choice::after{display:none}
.opening-v2 .pick-stage{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:0}
.opening-v2 .pick-light{position:absolute;left:50%;top:-6%;width:116%;height:86%;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 24%,transparent),transparent 72%);opacity:0;transition:opacity .5s ease;pointer-events:none}
.opening-v2 .pick-floor{position:absolute;left:12%;right:12%;bottom:2%;height:13%;border-radius:50%;background:radial-gradient(closest-side,var(--pc),transparent 72%);opacity:.2;filter:blur(7px);transition:opacity .5s ease}
.opening-v2 .pick-pet{position:relative;width:76%;aspect-ratio:1;display:block}
.opening-v2 .pick-pet svg{width:100%;height:100%;display:block}
.opening-v2 .opening-choice>.opening-choice-name{position:static!important;bottom:auto!important;width:auto!important;font-size:19px;font-weight:700;letter-spacing:.12em;color:#d6dfd1;transition:color .4s ease;opacity:1!important}
.opening-v2 .opening-choice>.opening-choice-trait{position:static!important;bottom:auto!important;left:auto!important;right:auto!important;margin:0;max-width:17em;font-size:14px;line-height:1.55;color:#b9c5b9;text-align:center;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease}
.opening-v2 .opening-choice:hover .pick-light,.opening-v2 .opening-choice:focus-visible .pick-light,.opening-v2 .opening-choice[aria-pressed=true] .pick-light{opacity:1}
.opening-v2 .opening-choice:hover .pick-floor,.opening-v2 .opening-choice:focus-visible .pick-floor,.opening-v2 .opening-choice[aria-pressed=true] .pick-floor{opacity:.75}
.opening-v2 .opening-choice:hover,.opening-v2 .opening-choice:focus-visible{border-color:color-mix(in srgb,var(--pc) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--pc) 9%,transparent),#ffffff02);outline:none}
.opening-v2 .opening-choice:hover>.opening-choice-name,.opening-v2 .opening-choice:focus-visible>.opening-choice-name{color:var(--pc)}
.opening-v2 .opening-choice:hover>.opening-choice-trait,.opening-v2 .opening-choice:focus-visible>.opening-choice-trait{opacity:1;transform:none}
.opening-v2 .opening-choice:focus-visible{box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 70%,transparent)}
/* Confirm: the chosen partner alone on the left, the promise and the hold on the right. */
.opening-v2[data-screen=confirm] .opening-choices{top:50%!important;left:27%!important;grid-template-columns:minmax(0,1fr);width:min(320px,30vw)}
.opening-v2[data-screen=confirm] .opening-choice:not([aria-pressed=true]){display:none!important}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]{min-height:min(440px,62vh);border-color:color-mix(in srgb,var(--pc) 60%,transparent);background:radial-gradient(closest-side at 50% 36%,color-mix(in srgb,var(--pc) 14%,transparent),transparent 75%),#ffffff03}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-light{opacity:1}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-floor{opacity:.8}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]>.opening-choice-name{color:var(--pc)}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]>.opening-choice-trait{opacity:0}
.opening-v2 .opening-promise{position:absolute!important;left:58%!important;right:7%!important;top:50%!important;transform:translateY(-50%);z-index:4;opacity:1!important}
.opening-v2 .opening-promise .bond-trait{font-size:18px;color:#c9d6c9;margin:0 0 6px}
.opening-v2 .bond-hold{position:relative;overflow:hidden;background:var(--pc);border-color:var(--pc);color:#1a1405;margin-top:18px}
.opening-v2 .bond-hold .bond-hold-label{position:relative;z-index:1}
.opening-v2 .bond-hold .bond-hold-fill{background:#ffffff66}
.opening-v2 .binding-notice,.opening-v2 .encounter-back{color:#a9b7ad}
@media(max-width:700px){
 .opening-v2 .opening-copy{top:12%!important}
 .opening-v2 .opening-choices{top:58%;width:94vw;gap:10px}
 .opening-v2 .opening-choice{min-height:min(230px,30vh);padding:10px 6px 12px;border-radius:20px}
 .opening-v2 .opening-choice>.opening-choice-name{font-size:16px}
 .opening-v2 .opening-choice>.opening-choice-trait{display:none}
 .opening-v2[data-screen=confirm] .opening-choices{top:40%;left:50%;width:min(230px,64vw)}
 .opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]{min-height:min(300px,38vh)}
 .opening-v2 .opening-promise{left:7%!important;right:7%!important;top:66%!important;transform:none;text-align:center}
 .opening-v2 .opening-promise p{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.opening-v2 *{transition:none!important}}
html[data-reduced=true] .opening-v2 *{transition:none!important}
/* v2 fixes: the legacy confirm rule hid every direct span, so the stage is shown again; the halo sits around the partner only; the scene loader is not used here. */
.opening-v2[data-screen=confirm] .opening-choice>.pick-stage{opacity:1!important}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]::before{left:16%;right:16%;top:18%;bottom:auto;height:auto;width:auto;translate:none;aspect-ratio:1}
.opening-v2:is([data-screen=select],[data-screen=confirm],[data-screen=task]) .opening-loading{display:none!important}
.opening-v2 .binding-notice{font-size:13px;line-height:1.6;color:#a9b7ad}
.opening-v2 .encounter-back{font-size:14px}
/* Phone confirm: the partner card sits in the upper half and the promise and hold below, all inside the screen. */
@media(max-width:700px){
 .opening-v2[data-screen=confirm] .opening-choices{top:34%!important;left:50%!important;transform:translate(-50%,-50%);width:min(210px,58vw)!important}
 .opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]{min-height:min(230px,30vh)!important}
 .opening-v2 .opening-promise{top:58%!important;left:8%!important;right:8%!important;transform:none!important}
 .opening-v2 .opening-promise h2{margin-bottom:6px}
 .opening-v2 .opening-promise p{font-size:18px;line-height:1.5}
 .opening-v2 .opening-promise p+p{font-size:13px;margin:8px 0 12px}
 .opening-v2 .bond-hold{margin-top:12px;min-height:44px}
}
/* Beats: copy arrives line by line, from a soft blur into focus, the way a quiet opening speaks.
   --b is each line's moment; --bo is how long the screen has already played, so a re-render resumes rather than restarts. */
.opening-v2 .beat{opacity:0;animation:beat-in 1.2s cubic-bezier(.2,.7,.2,1) calc(var(--b,0s) + var(--bo,0ms)) forwards}
.opening-v2 span.beat{display:inline-block}
@keyframes beat-in{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
/* Cards keep a legacy opacity lock, so they arrive through filter and transform instead. */
.opening-v2[data-screen=select] .opening-choice{animation:card-in 1.1s cubic-bezier(.2,.8,.2,1) calc(3.4s + var(--order)*.25s + var(--bo,0ms)) both}
@keyframes card-in{from{filter:opacity(0) blur(4px);transform:translateY(24px)}to{filter:none;transform:none}}
/* Welcome: the whole block no longer fades as one; the steps and the button follow the title's rhythm. */
.opening-v2 .welcome-copy{animation:none}
.opening-v2 .welcome-track li{animation-delay:calc(3.1s + var(--i)*.3s + var(--bo,0ms))}
.opening-v2 .welcome-go{animation-delay:calc(4.2s + var(--bo,0ms))}
.opening-v2 .welcome-pet-body{animation-delay:calc(.1s + var(--bo,0ms)),calc(1.3s + var(--bo,0ms))}
@media(prefers-reduced-motion:reduce){.opening-v2 .beat,.opening-v2[data-screen=select] .opening-choice{animation:none!important;opacity:1;filter:none;transform:none}}
html[data-reduced=true] .opening-v2 .beat,html[data-reduced=true] .opening-v2[data-screen=select] .opening-choice{animation:none!important;opacity:1;filter:none;transform:none}
/* Welcome copy reads as one left-aligned column (an older rule centred the title and kicker). */
.opening-v2 .welcome-copy,.opening-v2 .welcome-copy h1,.opening-v2 .welcome-copy .journey-kicker{text-align:left!important}
/* Golden-section field: the construction draws in line by line, ticks appear one by one, sparks travel the ray and the wave,
   a faint scan crosses the grid and a few grid points breathe. All timings follow the screen's beat offset. */
.welcome-field svg{color:var(--pc)}
.welcome-field .wf-draw{animation:wf-draw 2.2s cubic-bezier(.3,.7,.2,1) calc(var(--d,0s) + var(--bo,0ms)) forwards}
.welcome-field .wf-cut{stroke:#ffffff17;stroke-width:1;fill:none}
.welcome-field .wf-spiral{stroke:var(--pc);stroke-width:1.4;fill:none;opacity:.34}
.welcome-field .wf-guide{stroke:var(--pc);stroke-width:1;stroke-dasharray:3 9;fill:none;opacity:.14}
.welcome-field .wf-corner{stroke:#dfe6d6;stroke-width:1.6;fill:none;opacity:.32}
.welcome-field .wf-tick{opacity:0;animation:wf-fade .6s ease calc(1.3s + var(--t)*.13s + var(--bo,0ms)) forwards}
.welcome-field .wf-tick path{stroke:#9fb3a6;stroke-width:1.2;opacity:.45}
.welcome-field .wf-tick text{fill:#9fb3a6;font-size:11px;text-anchor:middle;opacity:.5;font-family:ui-monospace,Consolas,monospace}
@keyframes wf-fade{to{opacity:1}}
.welcome-field .wf-spark{opacity:.9}
.welcome-field .wf-scan{animation:wf-scan 13s linear calc(2.1s + var(--bo,0ms)) infinite}
@keyframes wf-scan{from{transform:translateX(0)}to{transform:translateX(1120px)}}
.welcome-field .wf-twinkle{fill:var(--pc);opacity:0;animation:wf-twinkle 5.5s ease-in-out calc(2s + var(--i)*.68s) infinite}
@keyframes wf-twinkle{0%,100%{opacity:0}40%{opacity:.6}60%{opacity:.15}}
/* Sunflower seeds on the golden angle behind the partner, appearing in order; a dial ring with one orbiting point. */
.golden-seeds{position:absolute;left:4%;top:4%;width:92%;height:92%;color:var(--pc);pointer-events:none;overflow:visible}
.golden-seeds circle{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;animation:seed-in .5s ease calc(.4s + var(--n)*21ms + var(--bo,0ms)) forwards}
@keyframes seed-in{from{opacity:0;transform:scale(0)}to{opacity:.3;transform:none}}
.welcome-ring .ring-ticks path{stroke:var(--pc);stroke-width:.5;opacity:.55}
.welcome-ring .ring-orbit{fill:var(--pc);filter:drop-shadow(0 0 2px var(--pc))}
.welcome-stage{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}
/* Cards: seeds appear behind the chosen partner; a light runs round the border on hover, focus and while bonding. */
.opening-v2 .pick-seeds{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-seeds{opacity:1;filter:brightness(calc(1 + var(--hold,0)*1.2))}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-light{transform:translateX(-50%) scale(calc(1 + var(--hold,0)*.15))}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-floor{transform:scaleX(calc(1 + var(--hold,0)*.4))}
@property --trace{syntax:'<angle>';inherits:false;initial-value:0deg}
.opening-v2 .opening-choice::after{display:block;content:"";position:absolute;left:-1px;right:-1px;top:-1px;bottom:-1px;width:auto;height:auto;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--trace),transparent 0 72%,var(--pc) 88%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:none;filter:none;transition:opacity .4s ease;pointer-events:none}
.opening-v2 .opening-choice:hover::after,.opening-v2 .opening-choice:focus-visible::after,.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]::after{opacity:1;animation:card-trace 3.4s linear infinite}
@keyframes card-trace{to{--trace:360deg}}
/* A highlight crosses the main button every few seconds. */
.opening-v2 .welcome-go,.opening-v2 .bond-hold{position:relative;overflow:hidden}
.opening-v2 .welcome-go::after,.opening-v2 .bond-hold::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,#ffffff70,transparent);transform:skewX(-18deg);animation:btn-shimmer 5.5s ease-in-out calc(4.4s + var(--bo,0ms)) infinite;pointer-events:none}
@keyframes btn-shimmer{0%,70%{left:-40%}100%{left:130%}}
@media(prefers-reduced-motion:reduce){
 .welcome-field .wf-spark,.welcome-field .wf-scan,.welcome-field .wf-twinkle,.welcome-ring .ring-orbit,.opening-v2 .welcome-go::after,.opening-v2 .bond-hold::after{display:none}
 .welcome-field .wf-tick{animation:none!important;opacity:1}
 .golden-seeds circle{animation:none!important;opacity:.3}
 .opening-v2 .opening-choice::after{animation:none!important}
}
html[data-reduced=true] .welcome-field .wf-spark,html[data-reduced=true] .welcome-field .wf-scan,html[data-reduced=true] .welcome-field .wf-twinkle,html[data-reduced=true] .welcome-ring .ring-orbit,html[data-reduced=true] .opening-v2 .welcome-go::after,html[data-reduced=true] .opening-v2 .bond-hold::after{display:none}
html[data-reduced=true] .welcome-field .wf-tick{animation:none!important;opacity:1}
html[data-reduced=true] .golden-seeds circle{animation:none!important;opacity:.3}
html[data-reduced=true] .opening-v2 .opening-choice::after{animation:none!important}
/* Art studies on the cards: faint construction lines that draw in with the card and brighten on hover, focus and bonding. */
.opening-v2 .pick-art{position:absolute;inset:-4% 2% 2%;pointer-events:none}
.opening-v2 .art-study{width:100%;height:100%;overflow:visible}
.opening-v2 .art-line{fill:none;stroke:var(--pc);stroke-width:.45;opacity:.22;stroke-dasharray:1;stroke-dashoffset:1;animation:wf-draw 1.6s cubic-bezier(.3,.7,.2,1) calc(3.6s + var(--order,0)*.21s + var(--k)*.13s + var(--bo,0ms)) forwards;transition:opacity .5s ease}
.opening-v2 .art-dot{fill:var(--pc);opacity:.4}
.opening-v2 .opening-choice:hover .art-line,.opening-v2 .opening-choice:focus-visible .art-line{opacity:.55}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .art-line{opacity:calc(.5 + var(--hold,0)*.4);animation-delay:calc(.4s + var(--k)*.13s + var(--bo,0ms))}
.opening-v2 .pick-art-label{position:absolute;top:12px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.06em;color:var(--pc);opacity:.45;transition:opacity .4s ease;pointer-events:none}
.opening-v2 .opening-choice:hover .pick-art-label,.opening-v2 .opening-choice:focus-visible .pick-art-label,.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-art-label{opacity:.95}
/* The scan is a whisper, not a beam. */
.welcome-field .wf-scan{width:36px;opacity:.5}
@media(prefers-reduced-motion:reduce){.opening-v2 .art-line{animation:none!important;stroke-dashoffset:0}}
html[data-reduced=true] .opening-v2 .art-line{animation:none!important;stroke-dashoffset:0}
@media(max-width:700px){.opening-v2 .pick-art-label{font-size:9px;top:8px;padding:0 4px;line-height:1.3}}
/* Quiet zones: the field fades out softly behind the partner card, the title and the copy, so lines never cross the content.
   Each gradient is clear inside an ellipse around one content block and opaque outside; intersected, lines live only in the margins. */
.opening-v2 .welcome-field{-webkit-mask-composite:source-in;mask-composite:intersect}
.opening-v2[data-screen=select] .welcome-field{-webkit-mask:radial-gradient(ellipse 30% 13% at 50% 19%,transparent 62%,#000 100%),radial-gradient(ellipse 52% 30% at 50% 51%,transparent 72%,#000 100%);mask:radial-gradient(ellipse 30% 13% at 50% 19%,transparent 62%,#000 100%),radial-gradient(ellipse 52% 30% at 50% 51%,transparent 72%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.opening-v2[data-screen=confirm] .welcome-field{-webkit-mask:radial-gradient(ellipse 21% 38% at 27% 50%,transparent 68%,#000 100%),radial-gradient(ellipse 28% 30% at 75% 50%,transparent 66%,#000 100%);mask:radial-gradient(ellipse 21% 38% at 27% 50%,transparent 68%,#000 100%),radial-gradient(ellipse 28% 30% at 75% 50%,transparent 66%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.opening-v2[data-screen=task] .welcome-field{-webkit-mask:radial-gradient(ellipse 22% 36% at 25% 50%,transparent 66%,#000 100%),radial-gradient(ellipse 32% 32% at 66% 50%,transparent 64%,#000 100%);mask:radial-gradient(ellipse 22% 36% at 25% 50%,transparent 66%,#000 100%),radial-gradient(ellipse 32% 32% at 66% 50%,transparent 64%,#000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:700px){
 .opening-v2[data-screen=select] .welcome-field{-webkit-mask:radial-gradient(ellipse 62% 14% at 50% 20%,transparent 60%,#000 100%),radial-gradient(ellipse 64% 26% at 50% 58%,transparent 70%,#000 100%);mask:radial-gradient(ellipse 62% 14% at 50% 20%,transparent 60%,#000 100%),radial-gradient(ellipse 64% 26% at 50% 58%,transparent 70%,#000 100%)}
 .opening-v2[data-screen=confirm] .welcome-field{-webkit-mask:radial-gradient(ellipse 46% 19% at 50% 34%,transparent 66%,#000 100%),radial-gradient(ellipse 62% 24% at 50% 76%,transparent 66%,#000 100%);mask:radial-gradient(ellipse 46% 19% at 50% 34%,transparent 66%,#000 100%),radial-gradient(ellipse 62% 24% at 50% 76%,transparent 66%,#000 100%)}
 .opening-v2[data-screen=task] .welcome-field{-webkit-mask:radial-gradient(ellipse 50% 17% at 50% 26%,transparent 62%,#000 100%),radial-gradient(ellipse 62% 30% at 50% 66%,transparent 66%,#000 100%);mask:radial-gradient(ellipse 50% 17% at 50% 26%,transparent 62%,#000 100%),radial-gradient(ellipse 62% 30% at 50% 66%,transparent 66%,#000 100%)}
}
/* One circle around the partner, not two: the bond ring only appears while the child is holding. */
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]::before{opacity:var(--hold,0)}
/* The scan read as a stray column at rest; the other light effects carry the motion. */
.welcome-field .wf-scan{display:none}
/* ===== Ornaments pinned to the margins (replaces the masked full-screen field). Each figure stays clear of the content by
   position, so nothing is hidden behind a card or a line of text. ===== */
.opening-v2 .welcome-field{-webkit-mask:none!important;mask:none!important}
.welcome-field .wf-grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:64px 64px;background-position:center}
.welcome-field .orn{position:absolute;height:auto;overflow:visible;color:var(--pc)}
.welcome-field .orn-ray{left:clamp(16px,3vw,48px);top:clamp(16px,3vh,32px);width:clamp(200px,19vw,280px)}
.welcome-field .orn-spiral{right:clamp(24px,4vw,64px);top:clamp(80px,11vh,110px);width:clamp(120px,11vw,170px)}
.welcome-field .orn-axis{left:clamp(16px,3vw,48px);bottom:clamp(76px,10vh,110px);width:clamp(120px,10vw,150px)}
.welcome-field .orn-bell{right:clamp(16px,3vw,48px);bottom:clamp(76px,10vh,110px);width:clamp(150px,13vw,210px)}
.welcome-field .orn-wave{left:0;right:0;bottom:clamp(14px,2.6vh,28px);width:100%;height:54px}
/* Ray: the beam ends exactly on the mirror's top surface; the spark flashes and glints there. */
.orn-ray .wf-ray{fill:none;stroke:var(--pc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.orn-ray .wf-mirror{fill:#dfe6d6;stroke:none;opacity:.6}
.orn-ray .wf-normal{fill:none;stroke:#dfe6d6;stroke-width:1;stroke-dasharray:3 4;opacity:.22}
.orn-ray .ray-flash{fill:var(--pc);opacity:0;transform-box:fill-box;transform-origin:center;filter:blur(1.5px)}
.orn-ray .ray-glint{stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:0}
.orn-ray.is-contact .ray-flash{animation:ray-flash .7s ease-out}
.orn-ray.is-contact .ray-glint{animation:ray-glint .7s ease-out}
@keyframes ray-flash{0%{opacity:.95;transform:scale(.3)}100%{opacity:0;transform:scale(2.4)}}
@keyframes ray-glint{0%{opacity:.95}100%{opacity:0}}
.welcome-field .wf-spark{fill:#fff;opacity:1;filter:drop-shadow(0 0 3px var(--pc)) drop-shadow(0 0 7px var(--pc))}
/* Golden rectangle: strokes sized for its 1000-unit box at ~150 px. */
.orn-spiral .wf-cut{fill:none;stroke:#ffffff2e;stroke-width:7}
.orn-spiral .wf-spiral{fill:none;stroke:var(--pc);stroke-width:11;stroke-linecap:round;opacity:.65}
.orn-spiral .wf-eye{fill:var(--pc);filter:drop-shadow(0 0 30px var(--pc));animation:wf-pulse 3.4s ease-in-out infinite}
/* Axes with one plotted point and its projections. */
.orn-axis .wf-axis,.orn-axis .wf-arrow{fill:none;stroke:#9fb3a6;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.orn-axis .wf-tick text{font-size:12px}
.orn-axis .wf-project{fill:none;stroke:var(--pc);stroke-width:1.2;stroke-dasharray:3 4;opacity:.55}
.orn-axis .wf-point{fill:var(--pc);filter:drop-shadow(0 0 4px var(--pc));animation:wf-pulse 3.4s ease-in-out infinite}
@keyframes wf-pulse{0%,100%{opacity:.6}50%{opacity:1}}
/* Bell curve over its base, dots inside the area. */
.orn-bell .wf-base{stroke:#9fb3a6;stroke-width:1.2;opacity:.4}
.orn-bell .wf-curve{fill:none;stroke:var(--pc);stroke-width:1.6;opacity:.6}
/* Wave strip. */
.orn-wave .wf-wave{fill:none;stroke:var(--pc);stroke-width:1.6;opacity:.38}
/* Cards: the partner stands in its study's window; light and floor follow the window. No ring crosses the art. */
.opening-v2 .pick-stage{flex:none;width:100%;aspect-ratio:1;display:block}
.opening-v2 .pick-art{inset:0}
.opening-v2 .pick-pet{position:absolute;left:calc(var(--px)*1%);top:calc(var(--py)*1%);width:calc(var(--pw)*1%);aspect-ratio:1;transform:translate(-50%,-50%)}
.opening-v2 .pick-light{left:calc(var(--px)*1%);top:calc(var(--py)*1%);width:calc(var(--pw)*2.3%);height:calc(var(--pw)*2.3%);transform:translate(-50%,-52%);background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 26%,transparent),transparent 72%)}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true] .pick-light{transform:translate(-50%,-52%) scale(calc(1 + var(--hold,0)*.18))}
.opening-v2 .pick-floor{left:calc((var(--px) - var(--pw)*.38)*1%);right:auto;width:calc(var(--pw)*.76%);top:calc((var(--py) + var(--pw)*.34)*1%);bottom:auto;height:calc(var(--pw)*.12%)}
.opening-v2[data-screen=confirm] .opening-choice[aria-pressed=true]::before{display:none}
.opening-v2 .art-num{fill:var(--pc);font-size:3.2px;text-anchor:middle;opacity:.7;font-family:ui-monospace,Consolas,monospace}
.opening-v2 .opening-choice{min-height:0;justify-content:flex-start;padding-top:30px}
/* Small heights and phones keep only the ornaments that have room. */
@media(max-height:820px) and (min-width:701px){.welcome-field .orn-axis,.welcome-field .orn-bell{display:none}}
@media(max-width:700px){
 .welcome-field .orn-spiral,.welcome-field .orn-axis,.welcome-field .orn-bell{display:none}
 .welcome-field .orn-ray{width:150px;top:12px;left:12px}
 .opening-v2:is([data-screen=confirm],[data-screen=task]) .welcome-field .orn-wave{display:none}
 .opening-v2 .opening-choice{padding-top:22px}
}
@media(prefers-reduced-motion:reduce){.orn-ray .ray-spark,.welcome-field .wave-spark{display:none}.orn-axis .wf-point,.orn-spiral .wf-eye{animation:none}}
html[data-reduced=true] .orn-ray .ray-spark,html[data-reduced=true] .welcome-field .wave-spark{display:none}
html[data-reduced=true] .orn-axis .wf-point,html[data-reduced=true] .orn-spiral .wf-eye{animation:none}
.opening-v2 .opening-choice{justify-content:center}
/* No beam rises over the title; the partner's own glow is the spotlight. On the welcome page the partner sits inside the seeds and the ring. */
.opening-v2[data-screen=select] .opening-choice::before{display:none}
.opening-v2 .welcome-pet-body{width:58%;height:58%}
.opening-v2[data-screen=select] .opening-choices{top:55%!important}
.opening-v2[data-screen=select] .opening-copy{top:12%!important}
@media(max-width:700px){.opening-v2[data-screen=select] .opening-choices{top:60%!important}}
/* Phones: the welcome stacks in one column again, and the four partners sit two by two. */
@media(max-width:700px){
 .welcome-stage{grid-template-columns:1fr}
 .opening-v2 .opening-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opening-v2[data-screen=select] .opening-choices{top:62%!important;width:min(340px,90vw)}
 .opening-v2 .pick-art-label{font-size:10px;white-space:nowrap}
}
@media(max-width:700px){.welcome-name{bottom:-24px;left:0;right:0;text-align:center}}
/* ===== Departure: the bond completes on a stage. The seal ring closes with --bond-seal, flashes once at 0.9 s (is-flash),
   golden seeds bloom outward, a few sparks rise; the badge, the line and the button follow on the right (driven by paint). */
body:has(.opening-screen[data-screen=departure]) .opening-world{display:none}
.opening-v2[data-screen=departure] .bond-ring{display:none}
.opening-v2 .bond-stage{position:absolute;left:clamp(24px,12vw,220px);top:50%;width:min(400px,32vw);aspect-ratio:1;transform:translateY(-50%);z-index:3;pointer-events:none}
.bond-stage .golden-seeds circle{animation-delay:calc(.9s + var(--n)*26ms + var(--bo,0ms))}
.bond-seal{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.bond-seal circle{fill:none;stroke:var(--pc);stroke-width:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--bond-seal,0));transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 2px var(--pc));transition:stroke-width .3s ease,filter .3s ease}
.opening-screen.is-flash .bond-seal circle{stroke-width:1.6;filter:drop-shadow(0 0 7px var(--pc))}
.bond-flash{position:absolute;left:20%;top:20%;width:60%;height:60%;border-radius:50%;background:radial-gradient(closest-side,#fff,var(--pc) 42%,transparent 72%);opacity:0;transform:scale(.4);pointer-events:none}
.opening-screen.is-flash .bond-flash{animation:bond-flash .7s ease-out}
@keyframes bond-flash{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.7)}}
.bond-pet{position:absolute;left:21%;top:21%;width:58%;height:58%;animation:welcome-breathe 4s ease-in-out 1.6s infinite}
.bond-pet svg{width:100%;height:100%}
.bond-stage .bond-sparks{position:absolute;left:50%;top:44%;width:0;height:0}
.bond-stage .bond-sparks i{left:calc((var(--i) - 6.5)*13px);top:0;animation:bond-rise 2.6s ease-out calc(1s + var(--i)*.12s + var(--bo,0ms)) both}
@keyframes bond-rise{0%{opacity:0;transform:translateY(10px) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-150px) scale(1)}}
.opening-v2[data-screen=departure] .opening-beginning{left:auto!important;right:clamp(24px,9vw,160px)!important;width:min(460px,42vw);top:50%!important;transform:translateY(-50%)}
.opening-v2[data-screen=departure] .opening-beginning h1{font-size:clamp(26px,2.6vw,40px);line-height:1.5}
@media(max-width:700px){
 .opening-v2 .bond-stage{left:50%;top:30%;width:min(250px,64vw);transform:translate(-50%,-50%)}
 .opening-v2[data-screen=departure] .opening-beginning{left:6%!important;right:6%!important;width:auto;top:58%!important;transform:none;text-align:center}
 .opening-v2[data-screen=departure] .welcome-field .orn-wave{display:none}
}
@media(prefers-reduced-motion:reduce){.bond-stage .bond-sparks,.bond-flash{display:none}.bond-pet{animation:none}}
html[data-reduced=true] .bond-stage .bond-sparks,html[data-reduced=true] .bond-flash{display:none}
html[data-reduced=true] .bond-pet{animation:none}
/* One spark language for every ornament: a white core with the partner's glow, and a flash at the contact point. */
.welcome-field .orn-flash{fill:var(--pc);opacity:0;transform-box:fill-box;transform-origin:center;filter:blur(1.5px);pointer-events:none}
.welcome-field .orn.is-contact .orn-flash{animation:ray-flash .7s ease-out}
.welcome-field .orn-spiral .wf-spark{filter:drop-shadow(0 0 18px var(--pc)) drop-shadow(0 0 42px var(--pc))}
.welcome-field .orn-spiral .orn-flash{filter:blur(8px)}
.welcome-field .orn-axis.is-contact .wf-point{animation:none;opacity:1}
@media(prefers-reduced-motion:reduce){.welcome-field .orn-spark{display:none}}
html[data-reduced=true] .welcome-field .orn-spark{display:none}
/* The sound status sits above the wave, never on it; the 3D loader message is not shown on any redesigned screen. */
.opening-v2 .opening-audio-status{bottom:clamp(80px,11vh,104px)!important}
.opening-v2[data-screen=departure] .opening-loading{display:none!important}
@media(max-width:700px){.opening-v2 .opening-audio-status{bottom:16px!important}}
/* Skill badges: always visible under the partner name — a round medal in the partner colour, the skill name and a few-word condition. */
.partner-badge{--bc:var(--pc,#e8c36a);display:inline-flex;align-items:center;gap:10px;padding:4px 16px 4px 4px;border:1px solid color-mix(in srgb,var(--bc) 38%,transparent);border-radius:999px;background:color-mix(in srgb,var(--bc) 8%,#0b1520cc);color:#e6ecdf;line-height:1.15;white-space:nowrap}
.partner-badge-medal{flex:none;width:40px;height:40px;padding:7px;border-radius:50%;box-sizing:border-box;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--bc) 40%,#fff3),color-mix(in srgb,var(--bc) 16%,#0b1520) 70%);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--bc) 75%,transparent),0 0 10px color-mix(in srgb,var(--bc) 30%,transparent);fill:none;stroke:color-mix(in srgb,var(--bc) 30%,#fff);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.partner-badge-text{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.partner-badge-text b{font-size:15px;font-weight:700;letter-spacing:.14em;color:color-mix(in srgb,var(--bc) 55%,#fff)}
.partner-badge-text small{font-size:12.5px;color:#b9c5b9;letter-spacing:.04em}
.opening-v2 .opening-choice>.partner-badge{position:static;width:auto;left:auto;bottom:auto;font-size:inherit;letter-spacing:normal;margin-top:-4px;transition:border-color .4s ease,box-shadow .4s ease}
.opening-v2 .opening-choice:hover>.partner-badge,.opening-v2 .opening-choice:focus-visible>.partner-badge,.opening-v2 .opening-choice[aria-pressed=true]>.partner-badge{border-color:color-mix(in srgb,var(--bc) 70%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--bc) 22%,transparent)}
.opening-v2 .opening-choice:hover .partner-badge-medal{animation:badge-glint 1.2s ease-out}
@keyframes badge-glint{40%{box-shadow:inset 0 0 0 1.5px var(--bc),0 0 18px var(--bc)}}
.opening-promise .bond-skill{margin:6px 0 22px;font-size:inherit}
.opening-promise .bond-skill .partner-badge{padding:5px 16px 5px 5px;gap:10px}
.opening-promise .bond-skill .partner-badge-medal{width:48px;height:48px;padding:9px}
.opening-promise .bond-skill .partner-badge-text b{font-size:17px}
.opening-promise .bond-skill .partner-badge-text small{font-size:14px}
@media(max-width:700px){.opening-v2 .opening-choice>.partner-badge{padding:3px;gap:0}.opening-v2 .opening-choice>.partner-badge .partner-badge-text small{display:none}.opening-v2 .opening-choice>.partner-badge .partner-badge-text b{font-size:12px;padding:0 8px 0 6px}}
@media(prefers-reduced-motion:reduce){.opening-v2 .opening-choice:hover .partner-badge-medal{animation:none}}
.partner-badge[data-partner=frog]{--bc:#c8f05a}.partner-badge[data-partner=owl]{--bc:#ffc940}.partner-badge[data-partner=pangolin]{--bc:#52c6ff}.partner-badge[data-partner=robot]{--bc:#ab9dff}
/* The reward is a small gold coin button: the same coin as the score bar, plus one. */
.partner-badge-coin{display:inline-flex;align-items:center;gap:5px;margin-left:4px;padding:3px 9px 3px 4px;border-radius:999px;background:linear-gradient(180deg,#5a3f0c,#2e2108);box-shadow:inset 0 0 0 1px #ffd34d66,0 2px 6px #0006;font-size:14px;font-weight:800;color:#ffd34d;letter-spacing:.02em}
.partner-badge-coin .coin{width:18px;height:18px;box-shadow:inset 0 -1.5px 0 #b8740a,0 0 0 1.5px #7a4d06}
.opening-v2 .opening-choice:hover .partner-badge-coin .coin{animation:coin-spin .6s ease-out}
.opening-promise .bond-skill .partner-badge-coin{font-size:16px;padding:4px 11px 4px 5px}.opening-promise .bond-skill .partner-badge-coin .coin{width:22px;height:22px}
@media(prefers-reduced-motion:reduce){.opening-v2 .opening-choice:hover .partner-badge-coin .coin{animation:none}}
@media(max-width:700px){.opening-v2 .opening-choice>.partner-badge{gap:2px;max-width:100%}.opening-v2 .opening-choice>.partner-badge .partner-badge-medal{width:26px;height:26px;padding:4px}.opening-v2 .opening-choice>.partner-badge .partner-badge-text b{font-size:11.5px;letter-spacing:.04em;padding:0 3px 0 4px}.opening-v2 .opening-choice>.partner-badge .partner-badge-coin{margin-left:0;padding:2px 6px 2px 2px;font-size:11.5px;gap:3px}.opening-v2 .opening-choice>.partner-badge .partner-badge-coin .coin{width:14px;height:14px}}
@media(max-width:700px){.opening-v2[data-screen=select] .opening-choice{gap:6px}.opening-v2[data-screen=select] .pick-stage{flex:none;height:112px;aspect-ratio:auto}.opening-v2[data-screen=select] .pick-pet{width:auto;height:100%}}

/* 2026-10-12 · Confirm and departure read as one pair: the partner just left of the centre line, the words just right of it,
   a fixed gap between them, so wide screens no longer push them to opposite edges. Phones keep their stacked layout. */
@media (min-width:701px){
  .opening-v2{--pair-gap:clamp(48px,5vw,96px);--confirm-shift:calc((min(440px,40vw) - min(320px,30vw))/2);--depart-shift:calc((min(460px,42vw) - min(400px,32vw))/2)}
  .opening-v2[data-screen=confirm] .opening-choices{left:calc(50% - var(--confirm-shift) - var(--pair-gap)/2 - min(320px,30vw)/2)!important}
  .opening-v2[data-screen=confirm] .opening-promise{left:calc(50% - var(--confirm-shift) + var(--pair-gap)/2)!important;right:auto!important;width:min(440px,40vw)}
  .opening-v2 .bond-stage{left:calc(50% - var(--depart-shift) - var(--pair-gap)/2 - min(400px,32vw))}
  .opening-v2[data-screen=departure] .opening-beginning{left:calc(50% - var(--depart-shift) + var(--pair-gap)/2)!important;right:auto!important}
}

/* Confirm copy, three levels only: name · what it is (trait + skill badge) · one vow. Then the hold, with one quiet line under it. */
.opening-v2 .opening-promise .opening-eyebrow{font-size:12px;letter-spacing:.28em;color:#d9c48a;margin:0 0 10px}
.opening-v2 .opening-promise h2{margin:0 0 10px;line-height:1.1}
.opening-v2 .opening-promise .bond-trait{font-size:16px;line-height:1.6;color:#c9d6c9;margin:0 0 14px}
.opening-v2 .opening-promise .bond-skill{margin:0 0 28px}
.opening-v2 .opening-promise .bond-vow{margin:0 0 26px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--pc) 70%,transparent);font-size:clamp(18px,1.5vw,22px);font-weight:600;line-height:1.65;color:#f2efe2}
.opening-v2 .opening-promise .bond-vow span{display:block}
.opening-v2 .opening-promise .bond-vow span+span{font-weight:400;color:#a9b7ad}
.opening-v2 .opening-promise .bond-hold{margin:0;min-width:240px}
.opening-v2 .opening-promise .bond-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px}
.opening-v2 .opening-promise .bond-foot .binding-notice{margin:0;font-size:12.5px;line-height:1.5;color:#8fa397}
.opening-v2 .opening-promise .bond-foot .encounter-back{min-height:0;padding:2px 0;font-size:12.5px;color:#c6d3c8}
@media (max-width:700px){
  .opening-v2 .opening-promise .bond-vow{padding-left:0;border-left:0;font-size:17px}
  .opening-v2 .opening-promise .bond-foot{justify-content:center;gap:10px 16px}
}

/* 2026-10-12 · Large screens at 100% browser zoom: the opening was laid out for ~1440×860 and every size has a cap,
   so on a 2K/2.5K screen it sat small in the middle. Scale the whole opening as one piece, like browser zoom for this
   section only; the screen height is divided back so it still fills exactly one viewport. Both width and height must
   be large, so a wide but short window never overflows. */
@media (min-width:1800px) and (min-height:1000px){.opening-v2.opening-screen{--open-zoom:1.15}}
@media (min-width:2100px) and (min-height:1150px){.opening-v2.opening-screen{--open-zoom:1.3}}
@media (min-width:2500px) and (min-height:1280px){.opening-v2.opening-screen{--open-zoom:1.45}}
@media (min-width:1800px) and (min-height:1000px){
  .opening-v2.opening-screen{zoom:var(--open-zoom);height:calc(100svh / var(--open-zoom))!important;min-height:calc(100svh / var(--open-zoom))!important}
}

/* 2026-10-12 · Hold-to-bond reads at a glance: an empty dark pill with a partner-colour outline and label; holding fills it
   solid from the left with a bright leading edge, and the label turns dark exactly where the fill has reached. */
.opening-v2 .bond-hold.button{background:color-mix(in srgb,var(--pc) 10%,#0b1520);border:2px solid var(--pc);color:var(--pc)}
.opening-v2 .bond-hold .bond-hold-fill{background:var(--pc);box-shadow:6px 0 18px color-mix(in srgb,var(--pc) 80%,#fff)}
.opening-v2 .bond-hold .bond-hold-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(90deg,#14100a calc(var(--hold,0)*100%),var(--pc) calc(var(--hold,0)*100%))}
.opening-v2 .bond-hold::after{display:none}
.opening-v2 .bond-hold.is-holding{box-shadow:0 0 0 4px color-mix(in srgb,var(--pc) 35%,transparent),0 0 32px color-mix(in srgb,var(--pc) 45%,transparent)}