/* Registration visuals are isolated from original art and journey scenes. */
#celebration[data-registration]{box-sizing:border-box;width:min(94vw,680px);max-width:94vw;max-height:90dvh;padding:20px;background:#100f17;color:#fff6df;overflow:auto;border:1px solid #d2ad59;isolation:isolate}
#celebration[data-registration]::backdrop{background:#080610d9}
.reg-skip{position:relative;z-index:4;display:block;margin-left:auto;font-size:12px;min-height:44px}
.reg-content{position:relative;z-index:2;text-align:center;padding:8px 6px 20px;overflow-wrap:anywhere}
.reg-content h2{font-size:clamp(22px,6vw,42px);line-height:1.05;margin:14px 0;color:#ffe195}
.reg-content p{font-size:clamp(15px,4vw,20px);line-height:1.6;max-width:32em;margin:12px auto}
.reg-content small{display:block;letter-spacing:.08em;font-size:11px}
.reg-next{margin-top:18px;min-height:44px}
.reg-art{display:grid;place-items:center;height:clamp(120px,27vh,210px);margin:12px auto;width:min(70%,240px)}
.reg-art svg,.reg-art img,.reg-art .flower-art{max-height:100%;max-width:100%;width:auto;height:100%;object-fit:contain}
.reg-art>span{font-size:100px;color:#ffe195}
.reg-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.reg-halo{position:absolute;left:10%;top:12%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffc76650,transparent 65%);border:1px solid #f2d47b80;animation:reg-halo 1.5s ease-out both}
[data-registration=daruma][data-animate=true] .reg-art{animation:reg-jump 1.3s cubic-bezier(.2,.7,.3,1) both}
[data-registration=flower][data-animate=true] .reg-art{animation:reg-bloom 1.6s ease-out both}
.reg-petals{position:absolute;inset:0;display:grid;place-items:center}
.reg-petals i{position:absolute;width:9px;height:18px;background:var(--tone);border-radius:90% 0 90% 0;animation:reg-petal 1.7s var(--wait) ease-out both}
.reg-record{position:absolute;left:15%;top:12%;width:70%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 10px,#e4b25088 12px 13px,transparent 15px 23px);animation:reg-spin 5s linear infinite}
.reg-spots i{position:absolute;top:-10%;left:15%;width:25%;height:120%;transform-origin:50% 0;background:linear-gradient(#ffeebc77,transparent);clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);animation:reg-sweep 2.4s ease-in-out infinite alternate}
.reg-spots i+ i{left:60%;animation-direction:alternate-reverse;background:linear-gradient(#af7aff88,transparent)}
.reg-lasers i{position:absolute;top:0;left:50%;width:2px;height:120%;background:#eabe80;transform-origin:top;transform:rotate(-35deg);animation:reg-sweep 2s ease-in-out infinite alternate}
.reg-lasers i:nth-child(2){left:20%;background:#c57cf0;animation-delay:-.6s}.reg-lasers i:nth-child(3){left:80%;animation-delay:-1.2s}.reg-lasers i:nth-child(4){left:60%;background:#ef796a;animation-delay:-1.8s}
.reg-wave{position:absolute;bottom:10%;left:10%;width:80%;height:70px;display:flex;align-items:center;justify-content:space-around;opacity:.5}
.reg-wave i{height:var(--height);width:2%;background:#e9bd66;animation:reg-wave .8s var(--wait) ease-in-out infinite alternate}
[data-registration=complete] .reg-art{color:gold;animation:reg-bloom 1.5s both}
@keyframes reg-jump{0%{transform:translateY(80px) scale(.6);opacity:0}35%{transform:translateY(-35px) rotate(-16deg);opacity:1}65%{transform:translateY(8px) scale(1.08,.9)}82%{transform:translateY(-10px) rotate(5deg)}100%{transform:none;opacity:1}}
@keyframes reg-bloom{from{transform:scale(.2) rotate(-12deg);opacity:0}70%{transform:scale(1.08);opacity:1}to{transform:none;opacity:1}}
@keyframes reg-halo{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes reg-petal{from{transform:rotate(var(--angle)) translateY(0);opacity:0}20%{opacity:.9}to{transform:rotate(var(--angle)) translateY(var(--distance)) rotate(90deg);opacity:0}}
@keyframes reg-spin{to{transform:rotate(360deg)}}@keyframes reg-sweep{from{transform:rotate(-32deg)}to{transform:rotate(32deg)}}@keyframes reg-wave{to{transform:scaleY(.3)}}
[data-economy=true] .reg-lasers,[data-economy=true] .reg-spots{display:none}
[data-economy=true] .reg-record{animation:none}
.motion-off #celebration[data-registration] *{animation:none!important}
@media(prefers-reduced-motion:reduce){#celebration[data-registration] *{animation:none!important}}
@media(max-width:340px){#celebration[data-registration]{padding:12px}.reg-content h2{font-size:22px}.reg-art{height:130px}.reg-content p{font-size:14px}.reg-content{padding-bottom:8px}}
.reg-art{--art-height:clamp(120px,27vh,210px);height:var(--art-height)}
.reg-art img,.reg-art svg{height:var(--art-height);max-height:var(--art-height);width:100%;max-width:100%;min-height:0}
.reg-petals{bottom:auto;top:12%;height:38%}
.reg-content h2,.reg-content p{position:relative;text-shadow:0 2px 7px #100f17,0 0 12px #100f17}
@media(max-width:340px){.reg-art{--art-height:130px}}

/* Permanent brand colors stay varied regardless of which colors are collected. */
:root{--brand-spectrum:linear-gradient(100deg,#ff7068 0%,#ffb45d 17%,#f5df66 33%,#77dca6 49%,#78cfff 65%,#b591f5 82%,#f6a0ce 100%)}
h1 i,.ticker,.eyebrow{background-image:var(--brand-spectrum);background-clip:text;-webkit-background-clip:text;color:transparent}
.ticker{background-color:#1c1c19}
.lime,.mobile button{background:#ecd577;border-color:#ecd577;color:#111}
.tabs button:nth-child(1){--tab-tone:#ff8876}.tabs button:nth-child(2){--tab-tone:#99ddae}.tabs button:nth-child(3){--tab-tone:#d0a5ff}
.tabs button{color:var(--tab-tone)}.tabs button.active{color:var(--tab-tone);border-bottom-color:var(--tab-tone)}
.tabs button:focus-visible{outline-color:var(--tab-tone)}
.category-meters article:nth-child(1){--meter-tone:#ff8876}.category-meters article:nth-child(2){--meter-tone:#99ddae}.category-meters article:nth-child(3){--meter-tone:#d0a5ff}
.category-meters article h3,.category-meters article strong{color:var(--meter-tone)}
.category-track i{background:var(--meter-tone)}
.ambient-petals span{filter:saturate(1.3) brightness(1.2)}
@keyframes quiet-fall{0%{opacity:0;transform:translate3d(-40px,-20px,0) rotate(0)}12%{opacity:.9}85%{opacity:.7}100%{opacity:0;transform:translate3d(45px,110vh,0) rotate(280deg)}}

/* Story copy: spacious reading column and four clear steps. */
#about.story{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px 64px;align-items:start}
.story-heading h2{max-width:14em;line-height:1.6;text-wrap:pretty}
.story-copy{max-width:38em}.story-copy p{font-size:15px;line-height:2.05;margin:0 0 1.2em;overflow-wrap:anywhere}
.story-copy p:last-child{margin-bottom:0}
.story-experience{grid-column:1/-1;border-top:1px solid #45453b;padding-top:28px}
.story-experience h3{font-size:clamp(21px,2.3vw,29px);line-height:1.6;margin:0 0 24px}
.story-experience ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none;counter-reset:story-step;padding:0;margin:0}
.story-experience li{counter-increment:story-step;padding:18px 0 0;border-top:2px solid var(--step-tone);min-width:0}
.story-experience li:nth-child(1){--step-tone:#ff8876}.story-experience li:nth-child(2){--step-tone:#99ddae}.story-experience li:nth-child(3){--step-tone:#8ecfff}.story-experience li:nth-child(4){--step-tone:#d0a5ff}
.story-experience li:before{content:'0' counter(story-step);display:block;font:12px monospace;color:var(--step-tone);margin-bottom:10px}
.story-experience strong{font-size:20px;color:var(--step-tone)}
.story-experience li p{font-size:14px;line-height:1.9;margin:10px 0 0;overflow-wrap:anywhere}
#about .story-closing{grid-column:1/-1;margin:0;padding-top:12px;font-size:clamp(19px,2.2vw,28px);font-weight:700;line-height:1.8;max-width:34em;text-wrap:pretty}
.hero-bottom h2{max-width:17em;line-height:1.45}
@media(max-width:900px){#about.story{gap:30px}.story-experience ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){#about.story{grid-template-columns:minmax(0,1fr);gap:28px}.story-heading h2{margin-bottom:0;font-size:27px}.story-copy p{font-size:14px;line-height:2}.story-experience ol{gap:24px 18px}.story-experience li p{font-size:13px}.hero-bottom h2{font-size:23px}}
@media(max-width:360px){.story-experience ol{grid-template-columns:minmax(0,1fr)}.story-experience li{padding-top:14px}.story-experience h3{font-size:20px}.hero-bottom h2{font-size:21px}}

.story-heading h2 span{display:block;white-space:nowrap}