/* Seven evolutions, shared Home component. */
.preview-seven-evolutions #mshell :is(#ms-home,#ms-home-on) .home-hero > :is(.entity-ring,.home-evo-id){display:none!important}
#mshell #homeEvolutionPreview{position:relative;width:100%;max-width:420px;margin:0 auto 16px;color:var(--text,#193d36);font-family:inherit;text-align:center}
#mshell #homeEvolutionPreview *{box-sizing:border-box}
#mshell #homeEvolutionPreview [hidden]{display:none!important}
#mshell #homeEvolutionPreview .evo-home-stage{height:218px;width:100%;position:relative;overflow:hidden;isolation:isolate;background:transparent;margin:0 auto}
#mshell #homeEvolutionPreview canvas{display:block;width:100%;height:100%;touch-action:pan-y;background:transparent;border:0;outline-offset:-3px}
#mshell #homeEvolutionPreview .evo-home-identity h3{font-family:inherit;font-size:25px;font-weight:700;line-height:1.15;letter-spacing:-.5px;margin:0;color:var(--text,#193d36)}
#mshell #homeEvolutionPreview .evo-home-short{max-width:330px;margin:6px auto 10px;font-size:13px;line-height:1.45;color:var(--text-secondary,#667970);text-wrap:pretty}
#mshell #homeEvolutionPreview .evo-home-form{max-width:330px;margin:0 auto;font-size:11px;line-height:1.5;color:var(--text-secondary,#667970)}
#mshell #homeEvolutionPreview .evo-home-form strong{font-weight:600;color:var(--text,#193d36)}
#mshell #homeEvolutionPreview .evo-home-knowledge{max-width:300px;margin:4px auto 12px;font-size:12px;line-height:1.5;color:var(--text-secondary,#667970);text-wrap:pretty}
#mshell #homeEvolutionPreview button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mshell #homeEvolutionPreview .controls{display:flex;justify-content:center;align-items:center;gap:6px;margin:0 auto 12px}
#mshell #homeEvolutionPreview .controls button{display:inline-flex;align-items:center;justify-content:center;gap:4px;background:transparent;color:var(--text-secondary,#527366);border:1px solid var(--border,#bdd7cc);border-radius:999px;height:29px;padding:0 11px;font-size:10px;min-width:30px;box-shadow:none;line-height:1}
#mshell #homeEvolutionPreview .controls button:first-child{padding:0 8px;font-size:16px}
#mshell #homeEvolutionPreview .controls svg{width:13px;height:13px}
#mshell #homeEvolutionPreview .controls button[aria-pressed=true]{background:var(--bg-subtle,#e3f4e950);color:var(--text,#315342)}
#mshell #homeEvolutionPreview button:disabled{opacity:.42;cursor:default}
#mshell #homeEvolutionPreview :is(button,summary,select,a):focus-visible{outline:2px solid var(--teal,#0d7a7f);outline-offset:3px}
#mshell #homeEvolutionPreview .evo-home-tools{max-width:310px;margin:0 auto;border:1px solid var(--border,#bdd7cc);border-radius:16px;background:transparent;overflow:hidden}
#mshell #homeEvolutionPreview .evo-home-tools summary{display:flex;align-items:center;justify-content:center;gap:8px;list-style:none;cursor:pointer;padding:9px 12px;font-size:11px;font-weight:500;color:var(--text-secondary,#527366);user-select:none}
#mshell #homeEvolutionPreview .evo-home-tools summary::-webkit-details-marker{display:none}
#mshell #homeEvolutionPreview .evo-home-tools[open] summary{border-bottom:1px solid var(--border,#bdd7cc)}
#mshell #homeEvolutionPreview .evo-home-tools[open] summary span[aria-hidden]{transform:rotate(180deg)}
#mshell #homeEvolutionPreview .evo-home-tools-body{padding:14px;text-align:start;background:var(--bg-elevated,#ffffffd9)}
#mshell #homeEvolutionPreview label{display:block;font-size:10px;color:var(--text-secondary,#527366);margin-bottom:6px}
#mshell #homeEvolutionPreview select{width:100%;min-height:38px;padding:8px 10px;border:1px solid var(--border,#bdd7cc);border-radius:11px;font:inherit;font-size:12px;color:var(--text,#193d36);background:var(--bg-elevated,#fff)}
#mshell #homeEvolutionPreview .evo-home-description{margin:10px 0 14px;font-size:12px;line-height:1.6;color:var(--text-secondary,#527366)}
#mshell #homeEvolutionPreview .evo-home-evolve{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;border:1px solid #c6dbcc;background:linear-gradient(110deg,#e3f4e9,#f7f0d7);color:#315342!important;border-radius:13px;padding:11px 12px;min-height:42px;font-size:12px;font-weight:600}
#mshell #homeEvolutionPreview .evo-home-evolve span{color:#315342!important}
#mshell #homeEvolutionPreview :is(.evo-home-route,.evo-home-preview-note){font-size:10px;line-height:1.5;color:var(--text-secondary,#667970);margin:8px 0 0}
#mshell #homeEvolutionPreview .evo-home-tools a{display:inline-block;margin-top:12px;font-size:11px;color:var(--teal,#0d7a7f)}
#mshell #homeEvolutionPreview .loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-secondary,#527366);font-size:12px;background:transparent}
#mshell #homeEvolutionPreview .loading button{border-radius:20px;border:1px solid var(--border);padding:7px 14px;color:var(--text);background:var(--bg-elevated)}
#mshell #homeEvolutionPreview .evo-loader{width:20px;height:20px;border:2px solid var(--border,#bdd7cc);border-top-color:var(--teal,#0d7a7f);border-radius:50%;animation:home-evo-load 1s linear infinite}
#mshell #homeEvolutionPreview .loading.failed .evo-loader{display:none}
#mshell #homeEvolutionPreview .evolution-toast{position:absolute;z-index:4;top:4px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;max-width:98%;padding:7px 12px;background:var(--bg-elevated,#fffffff0);color:var(--text,#315342);border:1px solid var(--border,#c6dbcc);border-radius:22px;font-size:10px;pointer-events:none;box-shadow:0 4px 20px #18342c0c}
#mshell #homeEvolutionPreview .magic{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;opacity:0}
#mshell #homeEvolutionPreview .is-evolving .magic{opacity:1}
#mshell #homeEvolutionPreview .magic-cloud{position:absolute;top:48%;left:50%;width:160px;height:140px;border-radius:50%;background:radial-gradient(ellipse,#fff 15%,#ffffffe0 35%,#dff3e575 65%,transparent 72%);opacity:0;filter:blur(5px);transform:translate(-50%,-50%)}
#mshell #homeEvolutionPreview .magic-ring{position:absolute;left:50%;top:48%;width:80px;height:80px;border:2px solid #ffffffb0;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}
#mshell #homeEvolutionPreview .is-evolving .magic-cloud{animation:home-evo-puff 2.3s ease-out both}
#mshell #homeEvolutionPreview .is-evolving .magic-ring{animation:home-evo-halo 1.9s .45s ease-out both}
#mshell #homeEvolutionPreview .sparkle{position:absolute;left:50%;top:48%;width:var(--size);height:var(--size);border-radius:40%;background:var(--particle);opacity:0;transform:translate(-50%,-50%)}
#mshell #homeEvolutionPreview .sparkle.star{clip-path:polygon(50% 0%,62% 35%,100% 50%,64% 63%,50% 100%,37% 65%,0% 50%,36% 36%);border-radius:0}
#mshell #homeEvolutionPreview .is-evolving .sparkle{animation:home-evo-sparkle 2.4s var(--delay) cubic-bezier(.2,.65,.3,1) both}
#mshell #homeEvolutionPreview[data-paused] .magic *{animation-play-state:paused!important}
@keyframes home-evo-load{to{transform:rotate(360deg)}}
@keyframes home-evo-puff{0%,22%{opacity:0;transform:translate(-50%,-50%) scale(.2)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}70%{opacity:.6}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes home-evo-halo{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}25%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}
@keyframes home-evo-sparkle{0%{opacity:0;transform:translate(-50%,-50%) scale(.1) rotate(0)}15%{opacity:1}65%{opacity:.8}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.45) rotate(var(--twist))}}
@media(prefers-reduced-motion:reduce){#mshell #homeEvolutionPreview .magic{display:none}#mshell #homeEvolutionPreview .evo-loader{animation:none}}

/* XP proposal: compact on Home, explanations and simulator stay folded away. */
#mshell #homeEvolutionPreview .evo-home-xp{display:block;width:100%;max-width:310px;margin:16px auto 8px;text-align:start;color:var(--text,#193d36)}
#mshell #homeEvolutionPreview .evo-xp-heading{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:600}
#mshell #homeEvolutionPreview .evo-home-xp progress{display:block;appearance:none;-webkit-appearance:none;width:100%;height:5px;margin:8px 0;border:0;border-radius:8px;overflow:hidden;background:var(--border,#bdd7cc);color:var(--teal,#0d7a7f)}
#mshell #homeEvolutionPreview .evo-home-xp progress::-webkit-progress-bar{background:var(--border,#bdd7cc);border-radius:8px}
#mshell #homeEvolutionPreview .evo-home-xp progress::-webkit-progress-value{background:var(--teal,#0d7a7f);border-radius:8px}
#mshell #homeEvolutionPreview .evo-home-xp progress::-moz-progress-bar{background:var(--teal,#0d7a7f);border-radius:8px}
#mshell #homeEvolutionPreview .evo-xp-next{margin:0 0 12px;color:var(--text-secondary,#527366);font-size:11px;line-height:1.5}
#mshell #homeEvolutionPreview .evo-home-xp details{border:1px solid var(--border,#bdd7cc);border-radius:16px;overflow:hidden;margin-top:8px;background:transparent}
#mshell #homeEvolutionPreview .evo-home-xp summary{display:flex;justify-content:center;align-items:center;gap:8px;list-style:none;cursor:pointer;min-height:36px;padding:9px 12px;font-size:12px;color:var(--text-secondary,#527366)}
#mshell #homeEvolutionPreview .evo-home-xp summary::-webkit-details-marker{display:none}
#mshell #homeEvolutionPreview .evo-home-xp details[open] summary{border-bottom:1px solid var(--border,#bdd7cc)}
#mshell #homeEvolutionPreview .evo-home-xp details[open] summary span[aria-hidden]{transform:rotate(180deg)}
#mshell #homeEvolutionPreview .evo-xp-body{padding:14px;background:var(--bg-elevated,#ffffffd9)}
#mshell #homeEvolutionPreview .evo-xp-intro{font-size:13px;font-weight:600;margin:0 0 8px;line-height:1.5}
#mshell #homeEvolutionPreview .evo-xp-actions{padding:0;margin:0;list-style:none}
#mshell #homeEvolutionPreview .evo-xp-actions li{display:flex;align-items:flex-start;gap:8px;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border,#bdd7cc);font-size:12px}
#mshell #homeEvolutionPreview .evo-xp-actions small{display:block;font-size:11px;line-height:1.5;color:var(--text-secondary,#527366);margin-top:4px}
#mshell #homeEvolutionPreview .evo-home-xp b{font-weight:600;font-size:11px;white-space:nowrap}
#mshell #homeEvolutionPreview :is(.evo-xp-note,.evo-xp-footnote){font-size:11px;line-height:1.6;margin:10px 0;color:var(--text-secondary,#527366)}
#mshell #homeEvolutionPreview .evo-xp-footnote{margin-bottom:0}
#mshell #homeEvolutionPreview .evo-xp-levels{padding:0;margin:14px 0;list-style:none}
#mshell #homeEvolutionPreview .evo-xp-levels li{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:7px 0;color:var(--text-secondary,#527366)}
#mshell #homeEvolutionPreview .evo-xp-levels li[data-earned=true]{color:var(--text,#193d36);font-weight:600}
#mshell #homeEvolutionPreview .evo-xp-levels i{display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;width:22px;height:22px;border:1px solid var(--border,#bdd7cc);border-radius:50%;margin-right:9px}
#mshell #homeEvolutionPreview .evo-xp-day{font-size:12px;font-weight:600;margin:12px 0}
#mshell #homeEvolutionPreview .evo-xp-lab-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#mshell #homeEvolutionPreview .evo-home-xp button{color:var(--text,#193d36);border:1px solid var(--border,#bdd7cc);background:transparent;border-radius:10px;box-shadow:none;font-size:11px;padding:9px;min-height:44px;line-height:1.4}
#mshell #homeEvolutionPreview .evo-xp-week{width:100%;margin-top:8px}
#mshell #homeEvolutionPreview .evo-xp-result{font-size:11px;line-height:1.6;min-height:36px;color:var(--text,#193d36);margin:12px 0}
#mshell #homeEvolutionPreview .evo-home-xp .evo-xp-reset{border:0;text-decoration:underline;color:var(--text-secondary,#527366);padding:7px 0}
#mshell #homeEvolutionPreview .evo-home-xp .evo-xp-return{border:0;text-decoration:underline;padding:0;font-size:10px;margin:0 0 8px}

#mshell #homeEvolutionPreview [data-evo-id="position"]{direction:ltr;unicode-bidi:isolate}
#mshell #homeEvolutionPreview .evo-xp-levels i{margin-right:0;margin-inline-end:9px}
#mshell #homeEvolutionPreview .evolution-toast{white-space:normal;text-align:center;width:max-content}

/* Seven real model portraits: earned forms in colour, future forms in silhouette. */
#mshell #homeEvolutionPreview .evo-journey{max-width:350px;margin:16px auto 0}
#mshell #homeEvolutionPreview .evo-journey-title{font-size:11px;font-weight:600;color:var(--text-secondary,#527366);margin:0 0 8px}
#mshell #homeEvolutionPreview .evo-journey-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
#mshell #homeEvolutionPreview .evo-journey-list li{min-width:0}
#mshell #homeEvolutionPreview .evo-journey-list button{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:100%;padding:3px 0 0;min-height:77px;border-radius:15px;border:1px solid transparent;background:transparent;color:var(--text-secondary,#667970);box-shadow:none;opacity:1}
#mshell #homeEvolutionPreview .evo-journey-list button[aria-current=true]{background:var(--bg-elevated,#ffffffa6);border-color:var(--border,#bdd7cc);box-shadow:0 3px 10px #23524408;color:var(--text,#193d36)}
#mshell #homeEvolutionPreview .evo-portrait{height:42px;display:grid;place-items:center;width:100%;position:relative}
#mshell #homeEvolutionPreview .evo-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px #183d3620)}
#mshell #homeEvolutionPreview [data-unlocked=false] .evo-portrait img{filter:brightness(0);opacity:.23}
#mshell #homeEvolutionPreview [data-unlocked=false]{cursor:default}
#mshell #homeEvolutionPreview .evo-portrait-fallback{font-size:25px;opacity:.35}
#mshell #homeEvolutionPreview .evo-form-name{font-size:9px;line-height:1.5;font-weight:500}
#mshell #homeEvolutionPreview .evo-form-state{font-size:10px;line-height:1.4;color:var(--teal,#16776c)}
#mshell #homeEvolutionPreview .evo-journey-hint{font-size:10px;line-height:1.5;color:var(--text-secondary,#667970);margin:7px 0 0}
:root:is(.look-sakura,.look-moonlake) #mshell #homeEvolutionPreview [data-unlocked=false] .evo-portrait img,
:root.garly-night-blue #mshell #homeEvolutionPreview [data-unlocked=false] .evo-portrait img,
:root.garly-ocean-bg #mshell #homeEvolutionPreview [data-unlocked=false] .evo-portrait img,
:root[data-theme=dark] #mshell #homeEvolutionPreview [data-unlocked=false] .evo-portrait img{filter:brightness(0) invert(1);opacity:.35}

/* App-wide, non-modal celebration; it never steals focus or changes the current tab. */
#mshell #evoCelebration{position:fixed;z-index:55;left:50%;top:calc(env(safe-area-inset-top,0px) + 68px);transform:translateX(-50%);width:calc(100% - 28px);max-width:370px;display:flex;gap:10px;align-items:center;isolation:isolate;padding:22px 18px 18px 8px;border:1px solid var(--border,#c9dfd6);border-radius:28px;background:var(--bg-elevated,#fffffff5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:var(--text,#193d36);box-shadow:0 16px 55px #173c352b,inset 0 1px 0 #ffffff65;animation:evo-notice-enter .55s cubic-bezier(.2,.8,.25,1.2) both;font-family:inherit;text-align:start}
#mshell #evoCelebration[hidden],#mshell #evoCelebration [hidden]{display:none!important}
#mshell #evoCelebration *{box-sizing:border-box}
#mshell #evoCelebration button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mshell #evoCelebration .evo-notice-dismiss{position:absolute;inset-inline-end:6px;top:4px;background:transparent;color:var(--text-secondary,#527366);width:36px;height:36px;font-size:21px;border:0;border-radius:50%;box-shadow:none;z-index:2}
#mshell #evoCelebration .evo-notice-art{width:114px;height:130px;position:relative;display:grid;place-items:center;flex-shrink:0}
#mshell #evoCelebration .evo-notice-halo{position:absolute;inset:12px 0;border-radius:49% 51% 57% 43%;background:radial-gradient(ellipse,#f7e6acaa,#c1e9d480 56%,transparent 73%);transform:rotate(-12deg)}
#mshell #evoCelebration .evo-notice-art img{position:relative;display:block;width:126px;height:126px;object-fit:contain;filter:drop-shadow(0 7px 4px #173c3515);animation:evo-notice-bounce 1.1s .1s ease both}
#mshell #evoCelebration .evo-notice-fallback{position:relative;font-size:45px;color:#74a28a}
#mshell #evoCelebration .evo-notice-copy{flex:1;min-width:0;position:relative}
#mshell #evoCelebration .evo-notice-kicker{margin:0 0 5px;font-size:10px;line-height:1.45;font-weight:600;color:var(--text-secondary,#527366)}
#mshell #evoCelebration h3{font-family:inherit;margin:0;font-size:20px;line-height:1.2;letter-spacing:-.4px;color:var(--text,#193d36);font-weight:700}
#mshell #evoCelebration .evo-notice-description{font-size:11px;line-height:1.5;color:var(--text-secondary,#527366);margin:7px 0 11px}
#mshell #evoCelebration .evo-notice-home{font-size:11px;line-height:1.4;font-weight:600;min-height:37px;padding:8px 12px;border:1px solid #bed9ca;border-radius:14px;background:linear-gradient(115deg,#e0f3e8,#faf0d5);color:#284f3e;box-shadow:0 3px 10px #315d4208}
#mshell #evoCelebration button:focus-visible{outline:2px solid var(--teal,#0d7a7f);outline-offset:2px}
#mshell #evoCelebration .evo-notice-sparkles{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1}
#mshell #evoCelebration .evo-notice-sparkles i{position:absolute;left:14%;top:12%;color:#cab36e;font-size:17px;font-style:normal;animation:evo-notice-twinkle 1.7s ease-in-out 2}
#mshell #evoCelebration .evo-notice-sparkles i:nth-child(2){left:33%;top:78%;color:#9b9dcc;animation-delay:.2s;font-size:22px}
#mshell #evoCelebration .evo-notice-sparkles i:nth-child(3){left:3%;top:65%;font-size:11px;animation-delay:.5s}
#mshell #evoCelebration .evo-notice-sparkles i:nth-child(4){left:42%;top:5%;color:#8abba4;font-size:15px;animation-delay:.7s}
#mshell #evoCelebration .evo-notice-sparkles i:nth-child(5){left:91%;top:82%;color:#9b9dcc;font-size:21px;animation-delay:.4s}
#mshell .evo-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes evo-notice-enter{from{opacity:0;transform:translate(-50%,-14px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes evo-notice-bounce{0%{transform:scale(.65) translateY(12px)}40%{transform:scale(1.06) translateY(-6px) rotate(-5deg)}70%{transform:scale(.98) translateY(1px) rotate(3deg)}100%{transform:scale(1) translateY(0)}}
@keyframes evo-notice-twinkle{0%,100%{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(12deg)}}
@media(max-width:350px){#mshell #evoCelebration .evo-notice-art{width:86px}#mshell #evoCelebration .evo-notice-art img{width:105px;height:105px}#mshell #evoCelebration h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){#mshell #evoCelebration,#mshell #evoCelebration *{animation:none!important}}

/* Clean local presentation: exactly the user-facing Home, without development tools. */
.evolution-user-view #mshell .demo-badge{display:none!important}

#mshell #homeEvolutionPreview .evo-static-fallback{display:block;width:100%;height:100%;object-fit:contain}
#mshell #homeEvolutionPreview .loading.failed{inset:auto 0 0;padding:5px;background:var(--bg-elevated,#fff);border-radius:12px;font-size:10px;gap:4px}