/* Five vivid, interlocking pieces form the child's entire entrance. */
html:has(#splash:not([hidden])){overflow:hidden}
body:is(.adult,:not(.adult)) #splash{
 --entrance-ink:#fffbea;--entrance-primary:#ffd527;--entrance-deep:#cba400;--entrance-button-ink:#11265c;--entrance-cut:rgba(12,31,82,.32);--entrance-cut-light:rgba(255,255,255,.15);--entrance-cut-mask:url('entrance/puzzle-cuts-v82.svg');
 position:fixed;inset:0;z-index:100;display:block;isolation:isolate;overflow:hidden;
 margin:0;padding:0;background:#2457f5;color:var(--entrance-ink);opacity:1;
 transition:opacity .24s ease;touch-action:manipulation;
}
#splash::before,#splash::after{display:none}
#splash .entrance-scene,#splash .entrance-picture{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;pointer-events:none}
#splash .entrance-scene{z-index:-1}
#splash .entrance-art{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;margin:0;opacity:0;transition:opacity .24s ease;pointer-events:none;animation:none}
#splash.is-ready .entrance-art{opacity:1}
#splash .entrance-cuts{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .24s ease}
#splash.is-ready .entrance-cuts{opacity:1}
#splash .entrance-cuts::before,#splash .entrance-cuts::after{content:"";position:absolute;inset:0;-webkit-mask:var(--entrance-cut-mask) center/cover no-repeat;mask:var(--entrance-cut-mask) center/cover no-repeat}
#splash .entrance-cuts::before{background:var(--entrance-cut);filter:drop-shadow(0 1px 0 #00000014)}
#splash .entrance-cuts::after{background:var(--entrance-cut-light);transform:translate(-.6px,-.6px)}
#splash .entrance-brand{position:absolute;top:43%;left:24px;right:24px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;margin:0;padding:0;z-index:1}
#splash .entrance-mark{display:none}
body:is(.adult,:not(.adult)) #splash .sname{position:static;inset:auto;display:block;width:100%;height:auto;max-width:100%;min-height:0;margin:0;padding:0;background:none;color:var(--entrance-ink);font-family:'Jua',sans-serif;text-align:center;text-shadow:none}
#splash .sname::before,#splash .sname::after{display:none!important}
#splash #splashName{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#splash .entrance-wordmark{display:flex;flex-direction:column;align-items:center;gap:0}
#splash .entrance-wordmark-owner{display:block;color:var(--entrance-ink);font:400 40px/1.1 'Jua',sans-serif;letter-spacing:-.035em}
#splash .entrance-wordmark-title{display:block;color:var(--entrance-ink);font:400 124px/1.03 'Jua',sans-serif;letter-spacing:-.045em;text-shadow:0 3px 0 #163fc0}
#splash .entrance-actions{position:absolute;left:50%;bottom:max(32px,calc(24px + env(safe-area-inset-bottom)));transform:translateX(-50%);display:grid;place-items:center;width:min(calc(100% - 64px),320px);margin:0;padding:0;z-index:1}
body:is(.adult,:not(.adult)) #splash .tstart{
 position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-width:0;max-width:none;height:64px;min-height:64px;aspect-ratio:auto;
 margin:0;padding:0 24px;border:0;border-radius:22px;background:var(--entrance-primary)!important;box-shadow:0 4px 0 var(--entrance-deep),0 8px 18px #10244418;color:var(--entrance-button-ink);
 font:700 20px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-shadow:none;animation:none;transition:transform .14s ease,box-shadow .14s ease,opacity .14s ease;
}
#splash .entrance-play{display:block;width:20px;height:23px;flex:none;fill:currentColor}
#splash #titleStartLabel{position:static;width:auto;height:auto;margin:0;padding:0;overflow:visible;clip-path:none;white-space:nowrap}
body:is(.adult,:not(.adult)) #splash .tstart::before,body:is(.adult,:not(.adult)) #splash .tstart::after{display:none!important}
body:is(.adult,:not(.adult)) #splash .tstart:active{transform:translateY(3px);box-shadow:0 1px 0 var(--entrance-deep),0 3px 8px #10244418}
body:is(.adult,:not(.adult)) #splash .tstart:focus-visible{outline:3px solid var(--entrance-button-ink);outline-offset:7px}
body:is(.adult,:not(.adult)) #splash:not(.bye) .tstart:disabled{opacity:.6;cursor:wait}
#splash .entrance-loading{position:absolute;bottom:calc(100% + 12px);display:flex;align-items:center;gap:7px;color:var(--entrance-button-ink);font:600 14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#splash .entrance-loading::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:entrance-spin .8s linear infinite}
#splash.is-ready .entrance-loading{display:none}
body:is(.adult,:not(.adult)) #splash.bye{opacity:0;pointer-events:none}
#splash[hidden] *{animation:none!important}
body.adult #splash{--entrance-ink:#3e4b38;--entrance-primary:#45513b;--entrance-deep:#2e3828;--entrance-button-ink:#fffbed;--entrance-cut:rgba(65,58,39,.22);--entrance-cut-light:rgba(255,255,255,.25);background:#f0e9d9}
body.adult #splash .entrance-wordmark{gap:9px}
body.adult #splash .entrance-wordmark-owner{font:600 28px/1.3 'Noto Serif KR',serif;letter-spacing:.04em}
body.adult #splash .entrance-wordmark-title{font:600 58px/1.3 'Noto Serif KR',serif;letter-spacing:-.04em;text-shadow:none}
body.adult #splash .entrance-loading{color:#3e4b38}
@media(hover:hover){body:is(.adult,:not(.adult)) #splash .tstart:not(:disabled):hover{filter:brightness(1.035)}}
@media(min-aspect-ratio:1/1){body:is(.adult,:not(.adult)) #splash{--entrance-cut-mask:url('entrance/puzzle-cuts-wide-v82.svg')}}
@media(max-width:340px){
 #splash .entrance-wordmark-owner{font-size:36px}
 #splash .entrance-wordmark-title{font-size:108px}
 body.adult #splash .entrance-wordmark-owner{font-size:25px}
 body.adult #splash .entrance-wordmark-title{font-size:50px}
}
@media(max-height:500px) and (min-aspect-ratio:1/1){
 #splash .entrance-brand{top:43%}
 #splash .entrance-wordmark-owner{font-size:25px}
 #splash .entrance-wordmark-title{font-size:84px}
 #splash .entrance-actions{bottom:max(20px,env(safe-area-inset-bottom));width:280px}
 body.adult #splash .entrance-wordmark{gap:5px}
 body.adult #splash .entrance-wordmark-owner{font-size:22px}
 body.adult #splash .entrance-wordmark-title{font-size:44px}
}
@keyframes entrance-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#splash,#splash *,#splash *::before{animation:none!important;transition:none!important}}