/* Pearl studio: CLASTOP surfaces and portrait geometry, AZOLAI-inspired light layers. */
:root{--studio-ink:#17212c;--studio-muted:#64717e;--studio-edge:#dce3e8}
#app,#creatorApp{isolation:isolate;background:#fff;color:var(--studio-ink)}
#app::before,#app::after,#creatorApp::before,#creatorApp::after{content:'';position:absolute;inset:-14%;pointer-events:none;z-index:0;will-change:transform,opacity}
#app::before,#creatorApp::before{background:radial-gradient(ellipse at 15% 30%,#d8e5f02e,transparent 56%),linear-gradient(120deg,transparent 30%,#ffffffc9 48%,transparent 68%);animation:studio-key 18s ease-in-out infinite alternate}
#app::after,#creatorApp::after{background:radial-gradient(ellipse at 90% 65%,#efe5d529,transparent 50%);animation:studio-fill 23s ease-in-out infinite alternate}
@keyframes studio-key{0%{transform:translate(-4%,-3%) rotate(-5deg);opacity:.65}100%{transform:translate(7%,4%) rotate(6deg);opacity:1}}
@keyframes studio-fill{0%{transform:translate(5%,5%);opacity:.35}100%{transform:translate(-8%,-6%);opacity:.9}}
#creatorApp{position:relative;overflow:hidden}#creatorApp>header,#creatorApp>section,#creatorApp>#notice{position:relative;z-index:1}
#app>.scr{z-index:1}.intro{background:transparent!important}.intro .light,.intro .lasers,.intro .iflash,.intro .ivign{display:none}.intro .lid{fill:#17212c!important}.intro .lidedge{stroke:#8c9cab}.intro .slogan .r{color:#17212c}
.intro .door{transform:none}.intro .stage{width:88%;margin-bottom:10px}.intro .kick{color:#64717e;font-size:11px;letter-spacing:.09em}.intro .slogan{font-size:clamp(32px,10vw,42px);letter-spacing:-1.4px}.intro .btn.cta{min-width:240px;border-radius:14px;background:#17212c;box-shadow:0 8px 24px #17212c15;font-size:16px}
.studio-masthead{position:absolute;top:calc(28px + var(--sat));inset-inline:26px;display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid #b8c4ce5c;font-size:10px;font-weight:700;color:#687782;letter-spacing:.06em}.studio-masthead span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:#c52d40;border-radius:50%;margin-inline-end:7px}.intro .skip{top:auto;bottom:calc(24px + var(--sab));inset-inline:0;margin:auto;width:max-content;color:#78828c;font-weight:500}
.studio-index{position:absolute;bottom:calc(88px + var(--sab));inset-inline:28px;display:flex;justify-content:space-between;border-top:1px solid #b8c4ce5c;padding-top:15px;font-size:10px;color:#687782}.studio-index b{color:#293949;font-weight:700;margin-inline-end:5px}
.btn.red{background:#1d1d1f;box-shadow:0 6px 15px #0000000d}.btn{border-radius:14px}.pick .top{border-bottom:1px solid #c7d1da70;padding-bottom:10px}.pick h1{font-size:32px;letter-spacing:-1px;margin-top:20px}.pick h1 b{color:#17212c}.pick p.sub{font-size:13px;color:#63717e}.tiles{gap:14px 10px;padding-top:12px;padding-bottom:110px}.tile{transform:none!important;border-radius:17px;gap:6px;padding:12px 4px 14px;background:#fff;box-shadow:0 5px 16px #273b4b08,inset 0 0 0 1px #ffffff;isolation:isolate}.tile:before{content:'';position:absolute;inset:0 0 auto;height:43px;border-radius:17px 17px 0 0;background:linear-gradient(125deg,#f6f8fa,#fff);z-index:-1}.tile .ph{width:64px;height:64px;aspect-ratio:1;margin:0 auto 2px;border-radius:50%;border:4px solid white;box-shadow:0 0 0 5px #fff;font-size:20px}.tile b{font-size:12px}.tile small{font-size:10px;color:#687782}.tile[aria-pressed=true]{box-shadow:0 0 0 1.5px #bd263c,0 8px 20px #17212c0a}.tile .ck{top:7px;inset-inline-end:6px;width:18px;height:18px;font-size:10px;line-height:18px;background:#bd263c}.pickbar{position:fixed;background:linear-gradient(#ffffff00,#fff 22%);z-index:3}
#sPlay{background:#fff}#sPlay:before{inset:-12%;background:radial-gradient(ellipse at 12% 45%,#d8e5f02e,transparent 58%),linear-gradient(118deg,transparent 35%,#ffffffc9 50%,transparent 70%);animation:studio-key 18s ease-in-out infinite alternate;transition:none}#sPlay:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 92% 73%,#efe5d529,transparent 52%);animation:studio-fill 23s ease-in-out infinite alternate;z-index:0}#sPlay[data-phase=final]:before{background:radial-gradient(ellipse at 65% 70%,#efe5d529,transparent 60%),linear-gradient(118deg,transparent,#ffffffa0,transparent)}
#creatorApp header{padding-bottom:18px;border-bottom:1px solid #c7d1da70;margin-bottom:28px}.primary{background:#17212c;box-shadow:0 7px 20px #17212c12;border-radius:12px}.secondary{border-radius:12px;background:#ffffffc9;border-color:#dce3e8}.eyebrow{color:#687782;letter-spacing:.08em}.eyebrow:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#bd263c;margin-inline-end:7px}.creator-card{border:1px solid #fff;border-radius:22px;box-shadow:0 12px 35px #273b4b09}.cover{height:174px;background:linear-gradient(125deg,#f2f6fa,#fff 50%,#fcfaf7);border-bottom:1px solid #fff}.cover:after{width:180px;height:180px;top:20px;border-color:#fff;box-shadow:0 0 0 22px #ffffff38,0 0 0 44px #ffffff18}.cover i{color:#657685}.portrait{border-width:5px;width:82px;height:82px;box-shadow:0 -9px 0 9px #fff}.creator-card h2{font-size:21px;letter-spacing:-.5px}.score-placeholder{border-top:1px dashed #dce3e8;background:transparent;border-radius:0;margin:20px 0 0;color:#65717c}.metrics{gap:10px}.metrics>div{border:1px solid #ffffff;border-radius:18px;background:#fff;box-shadow:0 5px 20px #273b4b05}.hero img{filter:drop-shadow(-4px 0 5px #b6d1e45c) drop-shadow(5px 8px 12px #384e6424);animation:box-rim 18s ease-in-out infinite alternate}@keyframes box-rim{to{filter:drop-shadow(4px 0 6px #e9d3ae70) drop-shadow(-5px 8px 12px #384e6424)}}
@media(min-width:600px){.pickbar{position:absolute}}
/* Continue the studio through the interlude and the final result. */
#drawer{isolation:isolate;background:#fff;border:1px solid #ffffffc9;box-shadow:0 -12px 40px #182c4020;overflow:hidden}
#drawer:before,#drawer:after{content:'';position:absolute;inset:-10%;pointer-events:none;z-index:-1;will-change:transform,opacity}
#drawer:before{background:radial-gradient(ellipse at 12% 30%,#d8e5f02e,transparent 60%),linear-gradient(118deg,transparent 30%,#ffffffd0 50%,transparent 70%);animation:studio-key 18s ease-in-out infinite alternate}
#drawer:after{background:radial-gradient(ellipse at 90% 65%,#efe5d529,transparent 55%);animation:studio-fill 23s ease-in-out infinite alternate}
#drawer .s1d-h{background:transparent;border-bottom:1px solid #c7d1da70}#drawer h2 b{color:#17212c}#drawer .safe-art{color:#75899b;background:linear-gradient(145deg,#fff,#dce5ed);border:1px solid #fff;box-shadow:0 12px 25px #263b5010,inset 0 1px 0 #fff;border-radius:22px}
#drawer .vault-code{color:#17212c;background:#ffffffa6;border:1px solid #fff;border-radius:16px;font-variant-numeric:tabular-nums;box-shadow:0 5px 20px #273b4b08}#drawer .vault-pad button{background:#ffffffbf;border:1px solid #fff;border-radius:14px;box-shadow:0 4px 12px #273b4b07;color:#17212c}#drawer .vault-pad button:active{background:#dce5ed;color:#17212c}#drawer .gold-badge{background:#e8d7b54d;color:#786044;border:1px solid #d5be963d}#drawer .card{border:1px solid #fff;box-shadow:0 12px 30px #273b4b12;border-radius:22px}#drawer .card .under{background:radial-gradient(ellipse at 80% 80%,#ead9b94d,transparent 65%),#f7f8fa}#drawer .treasure-total{color:#846a43}#drawer .meter{background:#dce3e8}#drawer .meter i{background:#a78c60}#drawer .btn.red{background:#17212c;box-shadow:0 6px 20px #17212c12}
#sEnd{gap:12px}#sEnd .card2{flex-shrink:0;box-shadow:0 10px 30px #273b4b12;border:1px solid #fff;border-radius:22px}#sEnd .row{flex-shrink:0}#sEnd .btn{font-size:13px;padding:14px 12px}#sEnd .challenge-result{font-size:13px;color:#4d6070;margin:0;text-align:center}#sEnd #creatorResult{background:#ffffffb8!important;border:1px solid #fff;border-radius:18px!important;padding:14px!important;box-shadow:0 5px 18px #273b4b08}#sEnd #creatorResult p{margin:0 0 10px;color:#425b6b}#sEnd #creatorResult .btn{background:#17212c;color:#fff}
@media(prefers-reduced-motion:reduce){#drawer:before,#drawer:after{animation:none;will-change:auto}}
@media(max-height:640px){.studio-index{bottom:72px}.intro{gap:16px}.intro .stage{width:74%;margin:0}.intro .slogan{font-size:32px}}
@media(prefers-reduced-motion:reduce){#app::before,#app::after,#creatorApp::before,#creatorApp::after,#sPlay:before,#sPlay:after,.hero img{animation:none!important;will-change:auto}}

/* Snow-white surfaces. Minimal 7.6.1 card shadow, adapted to a lighter stage. */
:root{--studio-ink:#1d1d1f;--studio-muted:#66717b;--studio-card-shadow:0 0 2px #919eab26,0 12px 24px -4px #919eab14}
body{background:#fff}#creatorApp{box-shadow:none}#app{box-shadow:none}.creator-card,.metrics>div,.tile{box-shadow:var(--studio-card-shadow);border:1px solid #eef0f2}.creator-card{position:relative;z-index:0}.cover{overflow:visible}.cover:before{content:'';position:absolute;bottom:-26px;left:50%;width:144px;height:62px;transform:translateX(-50%);background:url('/assets/avatar-shape.svg') center/contain no-repeat;z-index:1}.portrait{box-shadow:none;border:5px solid #fff;z-index:2}.cover:after{opacity:.5}
.hero .ring{border-color:#e6e9ed;box-shadow:0 0 0 18px #f9fafb80,0 0 0 35px #fdfdfd80}.photo-pick{border:1px dashed #dce1e5;border-radius:16px}.example,.score-placeholder{background:#fafbfc}.local-note{background:#f7f8fa;color:#65717d}.primary,.btn.red{background:#1d1d1f;color:#fff}.primary:active,.btn:active{transform:scale(.98)}input:focus,textarea:focus{border-color:#83909d;box-shadow:0 0 0 3px #83909d12}#sPlay .count.red{color:#1d1d1f}
/* Slow moving specular band: long quiet hold, a gentle sweep, then settle. */
#app:after,#creatorApp:after,#sPlay:after,#drawer:after{background:linear-gradient(112deg,transparent 35%,#dfe7ed30 44%,#ffffffdd 49%,#ffffffee 51%,#e5e9ee20 57%,transparent 66%);animation:studio-sweep 11s ease-in-out infinite;opacity:.7}
@keyframes studio-sweep{0%,35%{transform:translateX(-62%);opacity:0}50%{opacity:.65}75%{transform:translateX(62%);opacity:0}100%{transform:translateX(62%);opacity:0}}
@media(min-width:600px){#app{border:1px solid #e8ebef;box-shadow:0 12px 60px #17212c0a}}@media(prefers-reduced-motion:reduce){#app:after,#creatorApp:after,#sPlay:after,#drawer:after{animation:none!important;opacity:.2;transform:none}}