:root{--ink:#252039;--muted:#726d82;--purple:#7854d8;--deep:#6040b9;--cream:#fffaf3;--line:#ece6f3;--pink:#ff767d;--yellow:#ffc65b;--mint:#77dcc6;--shadow:0 16px 40px rgba(68,45,111,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Nunito,"Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;line-height:1.5}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid #ffbf5b;outline-offset:3px}.hidden{display:none!important}.app-shell{max-width:1480px;margin:auto;padding:0 clamp(20px,4vw,64px)}.topbar{height:104px;display:flex;align-items:center;gap:42px}.brand{text-decoration:none;color:var(--ink);font-size:27px;font-weight:1000;white-space:nowrap;letter-spacing:-1.7px;display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;color:#fff;background:var(--purple);font-size:33px;line-height:1;transform:rotate(-12deg)}.brand-alt{color:var(--purple)}.main-nav{display:flex;gap:8px;margin:auto}.nav-button{border:0;background:transparent;color:#777086;padding:11px 19px;border-radius:14px;font-weight:900;font-size:15px;white-space:nowrap}.nav-button span{margin-right:5px}.nav-button:hover,.nav-button.active{color:var(--deep);background:#eee8ff}.header-pill{font-size:13px;color:#a0702c;background:#fff1d7;padding:10px 15px;border-radius:99px;font-weight:900;white-space:nowrap}.page{display:none;padding-bottom:70px}.page.active{display:block}.hero{min-height:390px;border-radius:30px;background:#ede4ff;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr .9fr;align-items:center;padding:48px clamp(36px,5vw,76px)}.hero:before{content:"";position:absolute;width:370px;height:370px;border-radius:50%;border:44px solid rgba(255,255,255,.2);right:-92px;top:-186px}.hero-copy{position:relative;z-index:2}.eyebrow,.mini-label{font-size:12px;letter-spacing:2.3px;font-weight:1000;color:#bd7557}.eyebrow.purple{color:var(--purple)}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.13;letter-spacing:-.04em}h1{font-size:clamp(40px,4.4vw,66px);font-weight:1000;margin:15px 0 20px}.hero h1 span{color:var(--purple)}.hero p{font-size:17px;max-width:510px;color:#635c75;margin-bottom:28px}.button{border:0;border-radius:15px;padding:15px 25px;font-weight:1000;display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:54px;transition:transform .16s,box-shadow .16s;white-space:nowrap}.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(55,39,92,.15)}.button.primary{background:var(--purple);color:#fff;box-shadow:0 7px 0 #6240bd}.button.primary:hover{box-shadow:0 9px 0 #6240bd}.button.white{background:#fff;color:var(--deep)}.button.outline{background:#fff;color:var(--deep);border:2px solid #d9cafa}.button.large{min-width:210px}.hero-art{height:290px;position:relative}.art-card{position:absolute;border-radius:25px;box-shadow:0 18px 25px rgba(82,52,140,.14);font-weight:1000}.art-card-front{background:#fff;padding:28px 35px;width:215px;height:225px;left:28%;top:15%;transform:rotate(6deg);display:flex;flex-direction:column;align-items:center;justify-content:center}.art-card-front span{font-size:43px;color:var(--ink)}.art-card-front strong{font-size:55px;color:var(--purple);line-height:1.05}.art-card-front small{font-size:17px;color:#e8804a;margin-top:9px}.art-card-back{background:#ffcc69;padding:21px;width:170px;height:108px;left:8%;top:3%;transform:rotate(-12deg);font-size:25px;color:#6f4b29}.art-card-back strong{display:block;font-size:27px}.float-shape{position:absolute;font-size:58px;font-weight:1000}.shape-star{right:6%;top:0;color:#ff9c87;transform:rotate(17deg)}.shape-dot{left:5%;bottom:0;color:#7bd9c7;font-size:45px}.art-pencil{position:absolute;right:9%;bottom:2%;font-size:72px;transform:rotate(-20deg)}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:60px 0 25px}.section-heading h2,.chart-title h2{font-size:32px;margin:8px 0 5px}.section-heading p{color:var(--muted);margin:0}.section-icon{background:#fff0d1;border-radius:18px;font-size:29px;padding:12px}.number-picks{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}.number-pick{min-height:74px;border-radius:17px;background:#fff;color:var(--ink);border:2px solid #f0eaf4;box-shadow:0 5px 0 #eee6ee;font-size:27px;font-weight:1000;transition:transform .15s}.number-pick:hover{transform:translateY(-3px)}.number-pick.active{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 5px 0 #5e3eaf}.learn-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.75fr);gap:22px;margin-top:27px}.table-card,.tip-card,.full-table,.quiz-card,.quiz-sidebar,.chart-card,.history-card{border-radius:26px}.table-card,.full-table,.quiz-card,.quiz-sidebar,.chart-card,.history-card{background:#fff;box-shadow:var(--shadow);border:1px solid #f2edf2}.table-card{padding:29px}.card-head,.chart-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.card-head h3{font-size:28px;margin:5px 0 22px}.card-emoji{font-size:36px;align-self:start}.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.fact{background:#faf7ff;border-radius:13px;padding:13px 18px;font-size:19px;font-weight:850;display:flex;align-items:center;justify-content:space-between;gap:10px}.fact:nth-child(4n+2),.fact:nth-child(4n+3){background:#fff8ec}.fact strong{color:var(--purple);font-size:22px}.tip-card{background:#d9f5e8;padding:35px;position:relative;overflow:hidden}.tip-card:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.27);right:-95px;top:-95px}.tip-illustration{font-size:72px;margin-bottom:20px;transform:rotate(-12deg)}.tip-card .mini-label{color:#278b73}.tip-card h3{font-size:30px;margin:11px 0 15px}.tip-card p{font-size:16px;color:#46685c;line-height:1.6;max-width:320px}.tip-card .button{margin-top:13px;position:relative;z-index:1}.full-table{padding:30px;margin-top:24px}.section-heading.compact{margin:0 0 20px}.matrix-scroll{overflow:auto;border-radius:16px}#matrix-table{border-collapse:separate;border-spacing:5px;width:100%;min-width:680px;text-align:center}#matrix-table th,#matrix-table td{height:48px;min-width:48px;border-radius:10px;font-weight:900}#matrix-table th{background:#eee7ff;color:var(--deep)}#matrix-table th:first-child{background:#7954d7;color:#fff}#matrix-table td{background:#fbf9ff}#matrix-table td:nth-child(even){background:#fff8e9}#matrix-table tr:hover td,#matrix-table tr:hover th[scope=row]{background:#e7d9ff;color:var(--deep)}#matrix-table th[scope=row]{cursor:pointer}.table-hint{font-size:13px;color:#8b8398;margin:16px 5px 0}.page-intro{padding:37px 0 32px}.page-intro h1{font-size:clamp(38px,4vw,54px);margin:8px 0}.page-intro p{font-size:17px;color:var(--muted);max-width:700px;margin:0}.quiz-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:stretch}.quiz-card{min-height:520px;padding:36px;display:grid;place-items:center}.quiz-idle,.quiz-finished{text-align:center;max-width:475px}.quiz-mascot{font-size:80px;margin-bottom:13px}.quiz-idle h2,.quiz-finished h2{font-size:41px;margin:10px 0}.quiz-idle p,.quiz-finished p{color:var(--muted);font-size:17px;margin-bottom:29px}.quiz-live{width:min(100%,620px);align-self:start}.quiz-topline{display:flex;align-items:center;justify-content:space-between}.question-count{font-size:13px;letter-spacing:2px;font-weight:1000;color:var(--purple);background:#efe9ff;border-radius:99px;padding:9px 14px}.text-button{border:0;background:none;color:#9d789c;font-size:14px;font-weight:900;padding:9px}.text-button:hover{text-decoration:underline}.question-caption{text-align:center;color:var(--muted);font-size:18px;margin-top:55px}.question{text-align:center;font-size:clamp(54px,7vw,84px);font-weight:1000;letter-spacing:-.06em;margin:4px 0 35px}.question span{color:var(--purple)}#answer-form label{display:block;font-weight:900;margin-bottom:10px}.answer-row{display:flex;gap:12px}.answer-row input{min-width:0;flex:1;height:70px;border:3px solid #e5d9fa;border-radius:16px;text-align:center;font-size:31px;font-weight:1000;color:var(--ink);background:#faf8ff}.answer-row input::-webkit-inner-spin-button{-webkit-appearance:none}.answer-row .button{min-width:130px}.feedback{min-height:44px;font-weight:900;font-size:17px;padding-top:9px}.feedback.correct{color:#1b9a75}.feedback.wrong{color:#ed6974}.timer-heading{display:flex;justify-content:space-between;margin-top:16px;color:#716b7f;font-weight:900}.timer-heading strong{color:var(--ink)}.timer-track{height:14px;background:#f1edf4;border-radius:99px;margin-top:10px;overflow:hidden}.timer-fill{height:100%;width:0;background:linear-gradient(90deg,#8c69e8,#ffbb7e);border-radius:99px}.timer-note{font-size:13px;color:#9b94a5;margin:9px 0 0}.quiz-sidebar{padding:30px;align-self:stretch}.quiz-sidebar h3{font-size:23px;margin:0 0 25px}.quiz-stat{display:flex;align-items:center;gap:14px;margin-bottom:24px}.stat-icon{height:59px;width:59px;display:grid;place-items:center;border-radius:17px;font-size:27px}.stat-icon.pink{background:#ffe2e4}.stat-icon.yellow{background:#fff0cc}.stat-icon.mint{background:#ddf8ef}.quiz-stat strong,.quiz-stat small{display:block}.quiz-stat strong{font-size:26px;line-height:1}.quiz-stat small{color:var(--muted);margin-top:4px}.sidebar-note{background:#f1ebff;color:#6748a8;border-radius:18px;padding:20px;font-weight:850;margin-top:32px}.finish-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.privacy-note{background:#eff7f0;border:1px solid #d6eedc;border-radius:14px;color:#48745a;padding:12px 18px;font-size:14px;margin-bottom:23px}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.summary-card{min-height:160px;padding:24px;border-radius:22px;display:flex;flex-direction:column}.summary-card.peach,.chart-badge.peach{background:#ffe7df}.summary-card.lavender,.chart-badge.lavender{background:#ede6ff}.summary-card.mint{background:#ddf5eb}.summary-card.yellow{background:#fff0cd}.summary-card span{font-size:27px}.summary-card strong{font-size:31px;margin-top:8px;line-height:1.15}.summary-card small{font-size:14px;color:#6d6677;font-weight:800}.progress-empty{margin-top:24px;padding:65px 25px;text-align:center;background:#fff;border-radius:26px}.progress-empty>div{font-size:72px}.progress-empty h2{font-size:32px;margin:12px 0}.progress-empty p{color:var(--muted);max-width:450px;margin:0 auto 25px}.progress-data{margin-top:24px}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.chart-card,.history-card{padding:28px}.chart-title h2{font-size:24px;margin:6px 0}.chart-badge{font-size:12px;font-weight:900;border-radius:99px;padding:8px 11px;white-space:nowrap}.chart-area{height:250px;margin:20px 0 9px}.chart-area svg{width:100%;height:100%;overflow:visible}.chart-caption{font-size:13px;color:#8d8699;margin:0}.history-card{margin-top:20px}.history-list{margin-top:18px}.history-row{display:grid;grid-template-columns:1fr auto auto auto;gap:20px;align-items:center;padding:15px 0;border-top:1px solid var(--line)}.history-row strong{display:block}.history-row small{color:var(--muted)}.history-pill{background:#e8f7ed;color:#36895d;padding:7px 12px;border-radius:99px;font-weight:900;font-size:13px}footer{text-align:center;color:#aa9cb3;padding:25px 0 35px;font-size:13px;font-weight:800}footer span{color:#ffb564;margin:0 5px}
@media(max-width:1050px){.topbar{gap:16px}.header-pill{display:none}.number-picks{grid-template-columns:repeat(5,1fr)}.hero{grid-template-columns:1fr .72fr}.art-card-front{left:12%}.quiz-layout{grid-template-columns:minmax(0,1fr) 260px}.quiz-sidebar{padding:24px}.summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.app-shell{padding:0 18px}.topbar{height:auto;min-height:82px;flex-wrap:wrap;padding:14px 0;gap:12px}.brand{font-size:24px}.main-nav{order:2;width:100%;margin:0;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:15px;padding:5px}.nav-button{padding:10px 4px;font-size:14px}.hero{grid-template-columns:1fr;min-height:0;padding:32px 28px 20px}.hero h1{font-size:44px}.hero p{font-size:16px}.hero-art{height:200px;margin-top:18px}.art-card-front{width:160px;height:165px;left:46%;top:5%;padding:15px}.art-card-front span{font-size:29px}.art-card-front strong{font-size:41px}.art-card-front small{font-size:13px}.art-card-back{left:12%;top:0;width:140px;height:95px;font-size:20px}.art-pencil{font-size:50px;right:12%}.shape-star{font-size:37px}.section-heading{margin-top:42px}.section-heading h2{font-size:27px}.learn-grid,.quiz-layout,.chart-grid{grid-template-columns:1fr}.tip-card{min-height:0}.tip-illustration{font-size:55px;margin-bottom:5px}.tip-card h3 br{display:none}.quiz-card{min-height:480px}.quiz-sidebar{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quiz-sidebar h3,.sidebar-note{grid-column:1/-1}.quiz-stat{margin:0;flex-direction:column;align-items:start}.summary-grid{gap:10px}.summary-card{min-height:145px;padding:17px}.history-row{grid-template-columns:1fr auto;gap:5px 15px}}
@media(max-width:470px){.number-picks{gap:7px}.number-pick{min-height:60px;font-size:23px}.facts-grid{gap:7px}.fact{padding:10px 11px;font-size:15px}.fact strong{font-size:18px}.table-card,.full-table,.quiz-card,.quiz-sidebar,.chart-card,.history-card{padding:20px}.hero h1{font-size:39px}.section-icon{display:none}.quiz-sidebar{grid-template-columns:repeat(3,1fr)}.quiz-stat{gap:5px}.stat-icon{width:44px;height:44px;font-size:21px}.quiz-stat strong{font-size:22px}.quiz-stat small{font-size:11px}.question{font-size:54px}.answer-row input{height:62px}.answer-row .button{min-width:110px;padding:12px}.chart-title{align-items:start}.chart-badge{font-size:11px}}
@media(min-width:761px) and (max-width:1100px){.button,.nav-button,.number-pick{touch-action:manipulation}.number-pick{min-height:82px}.fact{min-height:58px}.quiz-card{min-height:570px}.answer-row input{height:78px}}
/* Keep the question and answer visible above a tablet or phone number keyboard. */
@media(max-width:1100px), (pointer:coarse){
  body.quiz-active #kuis .page-intro{display:none}
  body.quiz-active #kuis .quiz-layout{grid-template-columns:1fr;gap:0}
  body.quiz-active #kuis .quiz-sidebar{display:none}
  body.quiz-active #kuis .quiz-card{display:block;min-height:0;padding:16px 20px}
  body.quiz-active #kuis .quiz-live{margin:auto}
  body.quiz-active #kuis .question-caption{margin-top:9px;font-size:15px}
  body.quiz-active #kuis .question{font-size:clamp(42px,6vw,58px);margin:2px 0 12px}
  body.quiz-active #kuis #answer-form label{font-size:13px;margin-bottom:5px}
  body.quiz-active #kuis .answer-row input{height:54px;font-size:27px}
  body.quiz-active #kuis .answer-row .button{min-height:54px}
  body.quiz-active #kuis .feedback{min-height:30px;padding-top:5px;font-size:14px}
  body.quiz-active #kuis .timer-heading{margin-top:3px;font-size:13px}
  body.quiz-active #kuis .timer-track{height:9px;margin-top:5px}
  body.quiz-active #kuis .timer-note{display:none}
}
body.keyboard-tight #kuis .quiz-card{padding:10px 15px}
body.keyboard-tight #kuis .question-caption{display:none}
body.keyboard-tight #kuis .question{font-size:40px;margin:0 0 7px}
body.keyboard-tight #kuis .answer-row input,body.keyboard-tight #kuis .answer-row .button{height:48px;min-height:48px}
body.keyboard-tight #kuis .feedback{min-height:24px;font-size:13px}