:root{--brand-violet:#6c44d8;--brand-plum:#322343;--brand-orange:#ef9650;--brand-paper:#fcf9f2}
body[data-view="home"]{background:radial-gradient(ellipse at 85% 5%,#f0e6ff 0,transparent 42%),radial-gradient(ellipse at 0 90%,#fff0d7 0,transparent 44%),#f9f7f2}
body[data-view="home"] main{max-width:1180px;padding:0 34px 36px}
body[data-view="home"] .topbar{padding:26px 0;margin-bottom:18px}
body[data-view="home"] .home-brand{display:inline-flex;align-items:center;gap:11px;color:var(--brand-plum);text-decoration:none;width:fit-content}
.home-brand>img{width:46px;height:46px;border-radius:14px;box-shadow:0 5px 12px #6c44d81c}
.brand-wordmark{display:flex;flex-direction:column;gap:0}
.brand-wordmark strong{font-size:1.55rem;font-weight:850;line-height:1.1;letter-spacing:-.055em}
.brand-wordmark small{font-size:.73rem;font-weight:600;letter-spacing:0;color:#796b85;margin-top:4px}
.sidebar .brand>img{width:37px;height:37px}
body[data-view="home"] .play-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;overflow:hidden;padding:52px 54px;border-radius:32px;border:1px solid #e8deed;background:linear-gradient(112deg,#fffefd 20%,#faf4ff 75%,#f3eaff 100%);box-shadow:0 18px 60px #5937740a;text-align:left;min-height:540px}
body[data-view="home"] .play-hero::after{display:block;width:200px;height:200px;top:auto;right:-100px;bottom:-130px;background:#ffbf7040;pointer-events:none}
body[data-view="home"] .play-copy{max-width:540px;position:relative;z-index:2;margin:0}
body[data-view="home"] .play-copy h2{font-size:clamp(2.4rem,4.3vw,3.7rem);font-weight:850;letter-spacing:-.05em;line-height:1.04;margin:0 0 20px;color:var(--brand-plum);max-width:530px}
body[data-view="home"] .play-copy>p:not(.play-meta){font-size:1.1rem;line-height:1.55;color:#7a6c86;margin:0 0 30px;max-width:420px}
body[data-view="home"] .quick-fields{max-width:425px;margin:0;gap:13px}
body[data-view="home"] .quick-fields label{color:#554365;font-weight:700}
body[data-view="home"] .quick-fields select{border-color:#dacde7;border-radius:12px;background:#ffffffd9;box-shadow:0 2px 0 #ede5f2;height:52px}
body[data-view="home"] .play-now{max-width:425px;margin:22px 0 0;background:var(--brand-violet);box-shadow:0 5px 0 #4c299f,0 10px 22px #6c44d827;border-radius:13px;padding:16px 20px;transition:transform .16s,box-shadow .16s,background .16s}
body[data-view="home"] .play-now:hover{background:#5e35c5;transform:translateY(-2px);box-shadow:0 7px 0 #4c299f,0 14px 25px #6c44d82b}
body[data-view="home"] .play-now:active{transform:translateY(3px);box-shadow:0 2px 0 #4c299f}
body[data-view="home"] .play-meta{max-width:425px;text-align:center;font-size:.82rem;color:#8b7a99;margin-top:19px}
.hero-art{position:relative;width:100%;min-width:0;aspect-ratio:1;height:auto;max-height:480px;isolation:isolate}
.hero-art::before{content:"";position:absolute;inset:8% 1% 6% 4%;z-index:-1;border-radius:48% 52% 57% 43% / 49% 46% 54% 51%;background:linear-gradient(145deg,#e5d5ff,#f0e6ff 62%,#f8e6d2);transform:rotate(-9deg)}
.hero-art::after{content:"";position:absolute;left:21%;right:16%;bottom:7%;height:8%;z-index:-1;border-radius:50%;background:#a682c522;filter:blur(12px)}
.mascot{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 17px #8c69a920);animation:bibi-float 6s ease-in-out infinite}
.word-token{position:absolute;padding:10px 16px;background:#fffdf9;border:1px solid #e8dcef;border-radius:15px;box-shadow:0 8px 20px #6238880f;color:#514060;font-size:1.12rem;font-weight:800;line-height:1;z-index:2;pointer-events:none}
.word-token.word-en{left:1%;top:14%;transform:rotate(-9deg)}
.word-token.word-es{right:-1%;bottom:19%;transform:rotate(8deg);background:#fff1d9;border-color:#f3dcb6;color:#995c2f}
.mascot-name{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:750;letter-spacing:.04em;color:#8d71a6;background:#fff8;padding:5px 12px;border-radius:99px}
.art-spark{position:absolute;width:19px;height:19px;background:#eaaa4d;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);right:11%;top:8%;transform:rotate(13deg)}
.art-spark.second{width:12px;height:12px;left:8%;bottom:18%;background:#9d77d9}
body[data-view="home"] .more-options-button{margin:24px auto 0;color:#826f95;border-color:#dfd2e8;background:#ffffff70;min-height:42px;padding:10px 22px;border-radius:12px}
body[data-view="home"] .more-options-button:hover{background:#efe4fb;color:#6c44d8}
@keyframes bibi-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}}
@media(max-width:980px) and (min-width:761px){body[data-view="home"] .play-hero{padding:38px 34px;gap:16px;min-height:485px}body[data-view="home"] .play-copy h2{font-size:2.6rem}.word-token{font-size:.95rem;padding:9px 12px}}
@media(max-width:760px){body[data-view="home"] main{padding:0 18px 28px}body[data-view="home"] .topbar{padding:18px 0;margin-bottom:10px}.home-brand>img{width:40px;height:40px}.brand-wordmark strong{font-size:1.35rem}.brand-wordmark small{font-size:.7rem}body[data-view="home"] .play-hero{display:flex;flex-direction:column;gap:10px;min-height:0;padding:17px 25px 28px;border-radius:25px;text-align:center}body[data-view="home"] .play-copy{order:2;width:100%;max-width:450px}body[data-view="home"] .play-copy h2{font-size:clamp(1.95rem,8.5vw,2.9rem);max-width:430px;line-height:1.08;margin:0 auto 13px}body[data-view="home"] .play-copy>p:not(.play-meta){font-size:.97rem;margin:0 auto 20px;max-width:340px}body[data-view="home"] .quick-fields{max-width:425px;margin:0 auto;gap:11px;text-align:left}body[data-view="home"] .quick-fields select{height:48px;font-size:.95rem}body[data-view="home"] .play-now{margin:18px auto 0;padding:14px 20px;font-size:1.05rem}body[data-view="home"] .play-meta{margin:17px auto 0}.hero-art{order:1;height:178px;aspect-ratio:auto;max-width:290px;margin:0 auto 5px}.hero-art::before{inset:4% 17% 6%;border-radius:50%}.mascot{inset:-8px 0 0;height:calc(100% + 12px);animation:none}.word-token{font-size:.85rem;padding:8px 11px;border-radius:11px}.word-token.word-en{left:0;top:14%}.word-token.word-es{right:0;bottom:18%}.mascot-name{bottom:-4px;font-size:.62rem;padding:3px 9px}.art-spark{right:16%;top:4%;width:14px;height:14px}.art-spark.second{left:15%;bottom:14%}body[data-view="home"] .more-options-button{margin-top:18px;padding:8px 19px;min-height:40px}}
@media(max-width:380px),(max-height:740px) and (max-width:760px){.hero-art{height:135px;max-width:245px}body[data-view="home"] .play-hero{padding:13px 20px 23px;gap:8px}body[data-view="home"] .play-copy h2{font-size:1.85rem}body[data-view="home"] .play-copy>p:not(.play-meta){margin-bottom:16px;font-size:.9rem}}
@media(prefers-reduced-motion:reduce){.mascot{animation:none}body[data-view="home"] .play-now{transition:none}}
.word-token{display:grid;gap:5px;text-align:center}
.word-token small{font-size:.58rem;font-weight:800;letter-spacing:.12em;color:inherit;opacity:.7}
.word-token strong{font-weight:800}
.word-token.word-de{right:-1%;top:3%;transform:rotate(7deg);background:#e6f7f0;border-color:#c3e4d7;color:#286e5a}
.hero-art .art-spark{right:27%;top:1%}
@media(max-width:760px){.word-token{gap:4px;padding:8px 10px}.word-token small{font-size:.52rem}.word-token.word-de{right:0;top:1%;transform:rotate(7deg)}.word-token.word-es{bottom:13%}.hero-art .art-spark{right:38%;top:1%}}