/* Continuous Mallo light stage. Real teaching applications keep their own controls. */
.spark-scene{--spark:#efc38e;--tint:#714455;position:relative;isolation:isolate;overflow:hidden;background:#1c1720!important;color:#fff0dc!important;color-scheme:dark;font-family:Arial,sans-serif;min-height:810px;width:100%;box-sizing:border-box}
.spark-scene *{box-sizing:border-box}.spark-scene [hidden]{display:none!important}
.spark-scene .spark-glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 34%,#714455b0,transparent 72%)}
.spark-scene .spark-glow.old{z-index:0}.spark-scene .spark-mascot{position:absolute;top:82px;left:50%;width:360px;height:410px;transform:translateX(-50%) scale(.65);transform-origin:50% 0;pointer-events:none;z-index:1;transition:transform 1s cubic-bezier(.2,.8,.2,1),top 1s}
.spark-scene .ground{position:absolute;width:210px;height:24px;top:364px;left:75px;border-radius:50%;background:radial-gradient(ellipse,#0008,transparent 70%)}
.spark-scene .actor-position{position:absolute;inset:0;transform-origin:50% 72%}
.spark-scene .actor{position:absolute;width:310px;height:350px;top:12px;left:25px;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;opacity:1!important;pointer-events:none}
.spark-scene .character{position:absolute;inset:0;display:block;transform-origin:50% 82%}
.spark-scene .body,.spark-scene .body-light{position:absolute;width:248px;height:248px;left:31px;top:110px}
.spark-scene .body-light{opacity:.15;filter:drop-shadow(0 0 14px var(--spark))}
.spark-scene .face{position:absolute;inset:0}.spark-scene .eyes{position:absolute;top:209px;left:115px;display:flex;gap:43px;height:22px}
.spark-scene .eyes i{width:18px;height:22px;background:#332b30;border-radius:50%;display:block;animation:spark-blink 7s infinite;transform-origin:center}
.spark-scene .mouth{position:absolute;left:148px;top:251px;width:14px;height:4px;border-radius:50%;background:#473840}
.spark-scene .cheek{position:absolute;top:244px;width:30px;height:14px;background:#ed9ab6;border-radius:50%;opacity:.42}.spark-scene .cheek.left{left:88px}.spark-scene .cheek.right{left:192px}
.spark-scene .hat-position{position:absolute;left:15px;top:15px;width:280px;height:165px;transform-origin:57% 80%;animation:spark-hat 8s ease-in-out infinite}
.spark-scene .hat{width:100%;height:100%;display:block}.spark-scene .catch-ring{display:none}
.spark-scene .personal-spark{position:absolute;left:0;top:0;width:62px;height:62px;min-height:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;z-index:1;touch-action:none;border-radius:50%;cursor:pointer}
.spark-scene .spark-shell{display:block;position:absolute;width:26px;height:22px;top:20px;left:18px;border-radius:65% 35% 62% 38%;background:var(--spark);box-shadow:0 0 18px var(--spark),0 0 45px color-mix(in srgb,var(--spark) 40%,transparent);animation:spark-breathe 5s ease-in-out infinite}
.spark-scene .spark-copy{position:relative;z-index:2;width:min(100%,650px);max-width:650px;margin:345px auto 0;text-align:center;padding:0 22px 36px;overflow-wrap:break-word;color:#fff0dc}
.spark-scene .spark-copy h1{font:clamp(32px,4.6vw,48px)/1.13 Georgia,serif!important;letter-spacing:-.025em;max-width:650px;margin:0 auto 28px;color:#fff0dc!important;text-wrap:balance}
.spark-scene .spark-copy p{font-size:18px;line-height:1.5;color:#ddc6cf;max-width:550px;margin:16px auto 25px}
.spark-scene .spark-copy small{font-size:12px;line-height:1.5;color:#d6bfcc}
.spark-scene .spark-copy button,.spark-scene .spark-copy .button{border:1px solid #d4b9c342;background:#f2e0c5;color:#30242e;border-radius:17px;padding:17px 24px;min-height:54px;font:16px/1.35 Arial,sans-serif;box-shadow:none;transition:background .3s,box-shadow .3s;cursor:pointer;max-width:100%;white-space:normal;text-wrap:balance}
.spark-scene .spark-copy button:hover{box-shadow:0 0 24px #fff0dc17;transform:none}
.spark-scene .spark-copy button:disabled{opacity:.55;cursor:default}
.spark-scene .spark-copy .quiet,.spark-scene .spark-copy .secondary,.spark-scene .spark-copy .choice{background:#fff0dc09;border-color:#dac2d03b;color:#fff0dc}
.spark-scene .spark-copy .actions,.spark-scene .mallo-update-buttons{display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:470px;margin:26px auto 0}
.spark-scene .spark-copy .actions.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:600px}
.spark-scene .spark-copy .actions.grid button{padding:20px 15px;min-height:76px}
.spark-scene .spark-copy form{max-width:380px;width:100%;margin:auto;text-align:left}
.spark-scene .spark-copy label{display:block;color:#eddae2;font:14px/1.4 Arial,sans-serif;margin:15px 0}
.spark-scene .spark-copy input,.spark-scene .spark-copy textarea{display:block;width:100%;background:#ffffff08;color:#fff0dc;border:1px solid #d4b9c344;border-radius:15px;padding:17px;font:16px/1.4 Arial,sans-serif;min-width:0}
.spark-scene .spark-copy form>button{width:100%;margin-top:14px}.spark-scene .spark-copy a{color:#f5d2e0}
.spark-scene .spark-copy .memory{display:none}
.spark-scene .spark-copy .given-name{font:clamp(44px,7vw,78px)/1.1 Georgia,serif;display:block;color:#fff0dc}
.spark-scene .spark-copy .korean-name{font-size:clamp(36px,6vw,64px);display:block;margin:20px 0;color:var(--spark)}
.spark-scene .korean-syllable{display:inline-block;animation:spark-name 1.3s both;animation-delay:calc(var(--syllable)*.12s)}
.spark-scene .spam-notice{margin:30px auto 40px;text-align:center;font:clamp(30px,5vw,48px)/1.2 Georgia,serif;background:none;border:0;padding:0}
.spark-scene .spam-arrow{display:block;color:var(--spark);font:46px/1.2 Georgia,serif;margin:12px auto 18px}
.spark-scene .spam-word{display:inline-block;font:clamp(37px,6vw,68px)/1.2 Georgia,serif;color:#fff0dc;text-shadow:0 0 24px var(--spark);padding:8px 2px;border-bottom:2px solid var(--spark)}
.spark-scene .orbit-word{display:inline-block;color:#fff0dc;text-shadow:0 0 24px var(--spark);font-style:italic}
.spark-scene .mystery-title{min-height:150px;display:grid;place-items:center;margin:12px auto 34px}.spark-scene .mystery-title h1{grid-area:1/1}
.spark-scene .mystery-actions{min-height:82px;margin:30px auto}
.spark-scene .spark-copy .premium-light{width:min(100%,370px);min-height:82px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--spark) 24%,transparent),transparent 80%),#251c29;border:1px solid color-mix(in srgb,var(--spark) 65%,transparent);box-shadow:0 0 36px color-mix(in srgb,var(--spark) 20%,transparent),inset 0 1px 0 #fff3;border-radius:22px;color:#fff0dc;font:25px/1.3 Georgia,serif;text-shadow:0 0 18px var(--spark)}
.spark-scene .premium-secret-copy{min-height:245px;display:grid;align-content:center}.spark-scene .spark-rest-space{height:165px}
.spark-scene .spark-copy .basic-text{font:clamp(29px,4.4vw,48px)/1.2 Georgia,serif;color:#f7e9d8;background:none;border:0;border-radius:0;box-shadow:none;padding:20px 6px;min-height:100px;width:100%;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:12px;text-decoration-color:#f7e9d84d}
.spark-scene .spark-copy button.correct,.spark-scene .spark-copy button.correct:disabled{background:#173f32;border-color:#83d9ad;color:#eafff2;box-shadow:0 0 27px #6bdda34d;opacity:1}
.spark-scene .spark-copy button.incorrect,.spark-scene .spark-copy button.incorrect:disabled{background:#51282f;border-color:#ec919c;color:#fff0f1;box-shadow:0 0 25px #ee70863d;opacity:1}
.spark-scene .spark-copy [role=alert]{color:#ffb9c2}.spark-scene .welcome-condition{font:32px/1.2 Georgia,serif!important}
.mallo-update.spark-scene{display:block!important;max-width:none!important;padding:0 0 36px!important;border-radius:0!important;justify-content:initial!important;min-height:100svh}
.mallo-update.spark-scene .mallo-update-body{padding-top:1px}.mallo-update.spark-scene .spark-copy{margin-top:345px}
#mallo-checkpoint-preview .product.spark-scene{border-radius:0;min-height:100svh;max-width:none;border:0;box-shadow:none}
#mallo-checkpoint-preview .spark-scene>.stage{display:block;padding:0 0 45px;min-height:0;background:none}
#mallo-checkpoint-preview .spark-scene .mascot-wrap{display:none!important}
#mallo-checkpoint-preview .spark-scene .brand-bar{position:relative;z-index:4;color:#fff0dc;padding:24px 34px}
#mallo-checkpoint-preview .spark-scene .brand-bar .account-link{color:#ddd0d6;background:none}
#mallo-checkpoint-preview .spark-scene .dialogue.spark-copy{margin-top:275px;min-width:0}
#mallo-checkpoint-preview .spark-scene .product-footer{color:#d2bdc8;background:none;padding:10px 30px 25px}
#mallo-checkpoint-preview .spark-scene .product-footer button{color:#d2bdc8;background:none;border:0}
#mallo-checkpoint-preview[data-stage=hello] .spark-scene>.stage,#mallo-checkpoint-preview[data-stage=hello] .spark-scene>.brand-bar,#mallo-checkpoint-preview[data-stage=hello] .spark-scene>.product-footer{display:none}
#mallo-checkpoint-preview[data-stage=why] .stage{animation:none!important}
#mallo-checkpoint-preview .spark-teaching>.stage{padding:0!important}
#mallo-checkpoint-preview .spark-teaching .dialogue.spark-copy{margin:0!important;padding:0!important;width:100%;max-width:none}
#mallo-checkpoint-preview .spark-teaching .actual-lesson{background:#1c1720}
@keyframes spark-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@keyframes spark-hat{0%,100%{transform:rotate(0)}50%{transform:rotate(-2deg) translateY(-2px)}}
@keyframes spark-breathe{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-7px) rotate(8deg)}}
@keyframes spark-name{from{opacity:0;filter:blur(10px);transform:translateY(8px) scale(.95)}to{opacity:1;filter:blur(0);transform:none}}
@media(max-width:500px){.spark-scene .spark-mascot{transform:translateX(-50%) scale(.52)}.spark-scene .spark-copy{margin-top:285px;padding:0 22px 30px}.mallo-update.spark-scene .spark-copy{margin-top:285px}#mallo-checkpoint-preview .spark-scene .dialogue.spark-copy{margin-top:235px}#mallo-checkpoint-preview .spark-scene .brand-bar{padding:20px 24px}.spark-scene .spark-copy .actions.grid button{padding:16px 9px}.spark-scene .spark-copy .member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.spark-scene *,.spark-scene *:before,.spark-scene *:after{animation:none!important;transition:none!important}}
/* Keep the booking application's chrome outside the temporary introduction. */
body:has(.mallo-update.spark-scene){background:#1c1720!important;margin:0}
body:has(.mallo-update.spark-scene)>header,body:has(.mallo-update.spark-scene)>footer,body:has(.mallo-update.spark-scene)>#mallo-daily-badge{display:none!important}
body:has(.mallo-update.spark-scene) #app{padding:0!important;margin:0!important;max-width:none!important}
#mallo-checkpoint-preview .spark-scene .spark-copy button.choice,#mallo-checkpoint-preview .spark-scene .spark-copy button.choice.green,#mallo-checkpoint-preview .spark-scene .spark-copy button.choice.red{background:#fff0dc09;color:#fff0dc;border:1px solid #dac2d03b;box-shadow:none;border-radius:17px;transform:none}
#mallo-checkpoint-preview .spark-scene .spark-copy button.choice:hover{box-shadow:0 0 24px #fff0dc17}
body:has(.mallo-update.spark-scene)>#daily-learning-status{background:#29212d!important;color:#e9d4de!important;border:1px solid #dac2d033}
#mallo-checkpoint-preview .spark-scene .spark-copy input,#mallo-checkpoint-preview .spark-scene .spark-copy textarea{background:#ffffff08;color:#fff0dc;border:1px solid #d4b9c344;border-radius:15px;padding:17px;font:16px/1.4 Arial,sans-serif;box-shadow:none}
#mallo-checkpoint-preview .spark-scene .spark-copy label{color:#eddae2;font:14px/1.4 Arial,sans-serif}
#mallo-checkpoint-preview .spark-scene .spark-copy .auth-form{background:none;padding:0;border:0;box-shadow:none}

/* Light controls/cards need their own foreground, independent of the dark stage. */
#mallo-checkpoint-preview .spark-scene .spark-copy input,
#mallo-checkpoint-preview .spark-scene .spark-copy textarea{background:#fffaf2;color:#283b32;caret-color:#283b32;color-scheme:light;border-color:#c7d3c3}
#mallo-checkpoint-preview .spark-scene .spark-copy input::placeholder{color:#617263;opacity:1}
#mallo-checkpoint-preview .spark-scene .password-field{background:#fffaf2;color:#283b32;border:1px solid #c7d3c3;border-radius:15px;overflow:hidden}
#mallo-checkpoint-preview .spark-scene .password-field input{border:0;border-radius:0;width:0;flex:1;min-width:0}
#mallo-checkpoint-preview .spark-scene .spark-copy .password-toggle{color:#284935;background:#e5edde;border:0;border-left:1px solid #c7d3c3;border-radius:0;min-width:86px;padding:10px 12px;font:600 13px/1.4 Arial,sans-serif;box-shadow:none}
#mallo-checkpoint-preview .spark-scene .spark-copy .password-toggle:hover{background:#d7e5cf}
#mallo-checkpoint-preview .spark-scene .spam-notice{background:#d9efca;color:#244331;padding:24px 18px 30px;border:1px solid #b7d2a7;border-radius:22px}
#mallo-checkpoint-preview .spark-scene .spam-word{display:inline-block;color:#203f2b;text-shadow:none;font:600 clamp(32px,6vw,60px)/1.2 Georgia,serif;border-bottom:2px solid #6b9255;padding:8px 2px;max-width:100%;overflow-wrap:anywhere}
#mallo-checkpoint-preview .spark-scene .spam-arrow{color:#9e3542}
#mallo-checkpoint-preview .spark-scene .spark-copy .quiet{color:#e0cbd5;background:transparent;border-color:transparent}
.spark-scene[data-spark-scene=verify] .personal-spark{z-index:3;pointer-events:none}
/* Reserve actual layout space for the absolute mascot; loaded stylesheet order
   must never pull welcome text back into his body. */
.mallo-update.spark-scene > .mallo-update-body.spark-copy{margin:0 auto;padding-top:390px}
@media(max-width:500px){.mallo-update.spark-scene > .mallo-update-body.spark-copy{margin:0 auto;padding-top:315px}}
/* The welcome contract stays on the same light stage as signup. Reserve space
   before revealing copy so each phrase fades without moving the next action. */
.spark-scene .spark-copy .deal-recap{font-size:clamp(26px,4vw,43px)!important;line-height:1.35!important}
.spark-scene .deal-line{display:block;margin-bottom:9px}
.spark-scene .deal-word{display:inline-block;opacity:0}
.spark-scene .deal-word.shown{opacity:1}
.spark-scene .deal-line:last-child{color:#fff6e7;text-shadow:0 0 25px var(--spark)}
.spark-scene .price-orbit{display:inline-block;white-space:nowrap}
.spark-scene[data-spark-scene=premium-secret] .spark-rest-space{height:260px;position:relative}
.spark-scene .spark-copy .basic-copy{font-size:clamp(29px,4.4vw,44px)!important;line-height:1.2!important}
.spark-scene .spark-click-cue{position:absolute;top:0;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff7e8;text-shadow:0 2px 4px #17121e,0 0 2px #17121e;font:16px/1.4 Arial,sans-serif;pointer-events:none}
.spark-scene .spark-click-cue span:first-child{font-size:56px;line-height:1.1;-webkit-text-stroke:1px #241b28}
.spark-scene[data-spark-scene=premium-secret] .personal-spark{z-index:4;pointer-events:none}
.spark-scene[data-spark-scene=premium-secret][data-spark-ready=true] .personal-spark{pointer-events:auto}
.spark-scene .personal-spark:focus-visible{outline:2px solid #fff7e8;outline-offset:7px;box-shadow:0 0 0 4px #241b28!important}
.spark-scene:is([data-spark-scene=signup],[data-spark-scene=deal-recap],[data-spark-scene=activation],[data-spark-scene=completion]) .personal-spark{pointer-events:none;z-index:4}
.spark-scene .activation-copy{min-height:195px;display:grid;place-items:center}
.spark-scene .activation-word{position:relative;isolation:isolate;display:inline-block;color:#fff6e7;text-shadow:0 0 14px var(--spark),0 0 38px var(--spark);padding:8px 0}
.spark-scene .activation-word:before{content:'';position:absolute;inset:4px -18px;z-index:-1;border-radius:50%;background:var(--spark);opacity:.22;filter:blur(22px);pointer-events:none}
.spark-scene .completion-copy{position:relative;isolation:isolate;min-height:250px;display:grid;place-items:center;padding:20px 0}
.spark-scene .completion-copy:before{content:'';position:absolute;inset:10% -5%;z-index:-1;background:radial-gradient(ellipse,var(--spark),transparent 68%);opacity:.13;filter:blur(30px);pointer-events:none}
.spark-scene .spark-copy .completion-copy h1{font-size:clamp(30px,4.3vw,46px)!important;line-height:1.2!important;text-shadow:0 0 28px color-mix(in srgb,var(--spark) 25%,transparent)}
@media(max-width:500px){.spark-scene .spark-copy .deal-recap{font-size:28px!important}.spark-scene .deal-word{max-width:100%;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.spark-scene .deal-word{opacity:1}}

.spark-scene .mouth{position:absolute;left:147px;top:253px;width:16px;height:5px;border:0;border-radius:50%;background:#473840;transform:none}