@font-face { font-family:PublicKanit; font-style:normal; font-weight:400; font-display:swap; src:url(https://fonts.gstatic.com/s/kanit/v17/nKKZ-Go6G5tXcoaS.ttf) format('truetype'); }
@font-face { font-family:PublicKanit; font-style:normal; font-weight:500; font-display:swap; src:url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5mOCWg.ttf) format('truetype'); }
@font-face { font-family:PublicKanit; font-style:normal; font-weight:600; font-display:swap; src:url(https://fonts.gstatic.com/s/kanit/v17/nKKU-Go6G5tXcr5KPyWg.ttf) format('truetype'); }
/* Public landing: isolated light surface; colours come from tokens.css. */
#publicHome {
  color-scheme:only light;
  background:var(--public-home-paper);
  color:var(--public-home-ink);
  font:16px/1.8 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
#publicHome {
  --hp-ink:var(--public-home-ink); --hp-muted:var(--gray); --hp-brand:var(--pink-deeper);
  --hp-soft:var(--rose-25); --hp-line:var(--gray-border);
  --hp-display:var(--font-public-display); --hp-body:var(--font-sans);
}
:where(#publicHome) *,:where(#publicHome) *::before,:where(#publicHome) *::after { box-sizing:border-box; }
:where(#publicHome) h1,:where(#publicHome) h2,:where(#publicHome) h3,:where(#publicHome) p,:where(#publicHome) dl,:where(#publicHome) dd,:where(#publicHome) figure { margin:0; }
:where(#publicHome) h1,:where(#publicHome) h2,:where(#publicHome) h3 { font-family:var(--font-public-display); font-weight:400; line-height:1.35; }
:where(#publicHome) a { text-decoration:none; color:inherit; touch-action:manipulation; }
:where(#publicHome) button { font:inherit; cursor:pointer; touch-action:manipulation; }
:where(#publicHome) :focus-visible { outline:3px solid var(--hp-brand); outline-offset:5px; }
:where(#publicHome) .shell { width:min(1120px,calc(100% - 80px)); margin-inline:auto; }
:where(#publicHome) .skip { position:fixed; top:-100px; left:20px; padding:12px 20px; background:var(--hp-ink); color:white; z-index:20; }
:where(#publicHome) .skip:focus { top:10px; }
/* Header and hero: one clear sign-in action and a compact introduction. */
:where(#publicHome) .nav { display:flex; align-items:center; justify-content:space-between; height:80px; min-height:80px; padding:0; gap:24px; }
:where(#publicHome) .header .logo { display:block; flex:0 0 80px; align-self:stretch; width:80px; height:80px; }
:where(#publicHome) .header .logo img { display:block; width:100%; height:100%; border-radius:0; object-fit:cover; }
:where(#publicHome) .header .login { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:11px 22px; border:1px solid var(--public-home-action); border-radius:14px; background:var(--public-home-action); color:var(--white); font-size:14px; font-weight:600; }
:where(#publicHome) .header .login:hover { background:var(--rose-700); border-color:var(--rose-700); color:var(--white); }
:where(#publicHome) .header .nav-trial { min-height:48px; padding:11px 18px; border:1px solid var(--pink-200); background:var(--white); color:var(--public-home-action); box-shadow:none; }
:where(#publicHome) .header .nav-trial:hover { background:var(--pink-50); }
:where(#publicHome) .hero-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:24px; padding-block:32px; }
:where(#publicHome) .hero-copy { position:relative; z-index:2; padding-top:16px; }
:where(#publicHome) .hero h1 { font-size:clamp(54px,5.7vw,76px); line-height:1.15; font-weight:600; letter-spacing:-1.6px; margin:0 0 22px; }
:where(#publicHome) .teacher-card { position:relative; min-width:0; width:100%; max-width:560px; justify-self:end; }
:where(#publicHome) .teacher-card figcaption { position:relative; z-index:2; display:block; margin:-8px 0 0; padding:0; text-align:center; font:600 clamp(38px,4vw,52px)/1.12 var(--font-public-display); letter-spacing:-1px; color:var(--public-home-ink); }
/* Real counters in three coloured tiles; no duplicate marketing headline. */
:where(#publicHome) .library { position:relative; z-index:2; display:grid; grid-template-columns:1fr; gap:12px; margin-top:-8px; padding:14px 14px 16px; background:var(--white); border:1px solid var(--pink-100); border-radius:28px; box-shadow:0 14px 42px color-mix(in srgb,var(--pink-muted) 7%,transparent); }
:where(#publicHome) .library-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
:where(#publicHome) .library-stats>div { --stat-accent:var(--public-home-action); position:relative; display:flex; flex-direction:column-reverse; align-items:center; justify-content:flex-start; min-width:0; padding:52px 12px 17px; text-align:center; border-radius:18px; background:var(--pink-50); }
:where(#publicHome) .library-stats>div:nth-child(2) { --stat-accent:var(--purple-gray); background:var(--purple-75); }
:where(#publicHome) .library-stats>div:nth-child(3) { --stat-accent:var(--blue-700); background:var(--sky-50); }
:where(#publicHome) .library-stats dd { font:600 42px/1.12 var(--font-public-display); font-variant-numeric:tabular-nums; letter-spacing:-1.2px; color:var(--public-home-ink); }
:where(#publicHome) .library-stats dt { font-size:13px; line-height:1.5; color:var(--gray-strong); margin-top:5px; }
:where(#publicHome) .stat-icon { position:absolute; top:14px; left:50%; display:grid; place-items:center; width:28px; height:28px; transform:translateX(-50%); color:var(--stat-accent); }
:where(#publicHome) .stat-icon svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
:where(#publicHome) .stats-note { grid-column:auto; margin:0; text-align:center; font-size:10px; line-height:1.7; color:var(--gray); }
:where(#publicHome) .learning-section { background:radial-gradient(ellipse at 0 20%,var(--pink-50),transparent 50%),radial-gradient(ellipse at 100% 5%,var(--pink-50),transparent 44%),var(--gray-lighter); padding-block:32px 60px; }
:where(#publicHome) .section-top { display:block; }
:where(#publicHome) .section-top h2 { margin:0; font-size:36px; letter-spacing:-.5px; }
@media(min-width:761px) and (max-width:1100px) {
 :where(#publicHome) .hero-grid { gap:16px; }
 :where(#publicHome) .hero h1 { font-size:clamp(46px,5.6vw,60px); }
 :where(#publicHome) .nav { gap:16px; }
}
@media(max-width:760px) {
 :where(#publicHome) .nav { height:68px; min-height:68px; gap:12px; }
 :where(#publicHome) .header .logo { flex-basis:68px; width:68px; height:68px; }
 :where(#publicHome) .header .login { min-height:44px; padding:9px 18px; font-size:14px; }
 :where(#publicHome) .hero-grid { grid-template-columns:1fr; gap:14px; padding-block:24px; }
 :where(#publicHome) .hero-copy { max-width:550px; width:100%; margin-inline:auto; padding-top:0; }
 :where(#publicHome) .hero h1 { font-size:clamp(46px,11vw,68px); line-height:1.16; letter-spacing:-1px; margin-bottom:19px; }
 :where(#publicHome) .teacher-card { max-width:490px; justify-self:center; padding:12px 10px 0; }
 :where(#publicHome) .teacher-card figcaption { margin-top:-8px; font-size:40px; }
 :where(#publicHome) .library { padding:10px 10px 13px; gap:10px; border-radius:24px; }
 :where(#publicHome) .library-stats { gap:8px; }
 :where(#publicHome) .library-stats>div { padding:43px 6px 14px; border-radius:16px; }
 :where(#publicHome) .library-stats dd { font-size:clamp(25px,7.6vw,32px); letter-spacing:-.8px; }
 :where(#publicHome) .library-stats dt { font-size:11px; }
 :where(#publicHome) .stat-icon { top:12px; width:24px; height:24px; }
 :where(#publicHome) .stat-icon svg { width:22px; height:22px; }
 :where(#publicHome) .stats-note { font-size:9px; }
 :where(#publicHome) .learning-section { padding-block:28px 36px; }
 :where(#publicHome) .section-top h2 { font-size:30px; }
}
@media(max-width:360px) {
 :where(#publicHome) .hero h1 { font-size:44px; }
 :where(#publicHome) .teacher-card { padding-inline:6px; }
 :where(#publicHome) .teacher-card figcaption { font-size:36px; }
 :where(#publicHome) .library-stats dt { font-size:10px; }
}
:where(#publicHome) .header { position:sticky; top:0; z-index:5; background:rgb(255 255 255 / 95%); border-bottom:1px solid var(--gray-border); backdrop-filter:blur(18px); }
:where(#publicHome) .logo { display:inline-flex; align-items:center; gap:10px; font:500 23px/1.1 var(--hp-display); letter-spacing:-.5px; }
:where(#publicHome) .logo img { border-radius:10px; }
:where(#publicHome) .logo small { display:none; }
:where(#publicHome) .desktop-nav { display:flex; gap:32px; font-size:14px; }
:where(#publicHome) .desktop-nav a { display:flex; align-items:center; min-height:44px; }
:where(#publicHome) .desktop-nav a:hover { color:var(--hp-brand); }
:where(#publicHome) .hero { display:block; padding:0; background:linear-gradient(120deg,var(--white) 30%,var(--gray-lighter) 100%); }
:where(#publicHome) .eyebrow { font-size:12px; font-weight:600; line-height:1.7; color:var(--public-home-action); }
:where(#publicHome) .hero .eyebrow { letter-spacing:1.3px; font-size:11px; }
:where(#publicHome) .hero h1>span { color:var(--hp-brand); }
:where(#publicHome) .intro { font-size:17px; color:var(--gray-strong); line-height:1.9; }
:where(#publicHome) .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; margin-top:29px; }
:where(#publicHome) .button { display:inline-flex; align-items:center; justify-content:center; gap:25px; min-height:51px; padding:12px 23px; border-radius:50px; font-size:14px; font-weight:600; line-height:1.7; transition:background .15s ease; }
:where(#publicHome) .button>span { font-size:19px; }
:where(#publicHome) .primary { background:var(--hp-brand); color:white; }
:where(#publicHome) .primary:hover { background:var(--rose-700); }
:where(#publicHome) .portrait-wrap { border-radius:28px; background:radial-gradient(ellipse at center,var(--pink-50),transparent 72%); }
:where(#publicHome) .teacher { display:block; width:100%; height:auto; object-fit:contain; }
:where(#publicHome) .section-copy { color:var(--gray-strong); font-size:15px; margin-top:12px; }
:where(#publicHome) .how-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:52px; }
:where(#publicHome) .how-heading h2 { font-size:37px; letter-spacing:-.5px; }
:where(#publicHome) .how-heading h2 span { color:var(--hp-muted); }
:where(#publicHome) .how-heading>p { font-size:15px; color:var(--hp-muted); margin-top:18px; }
:where(#publicHome) .learning-steps { padding:0; margin:0; list-style:none; }
:where(#publicHome) .learning-steps li { display:flex; gap:24px; padding-block:22px; border-bottom:1px solid var(--hp-line); }
:where(#publicHome) .learning-steps li:first-child { padding-top:0; }
:where(#publicHome) .learning-steps li:last-child { padding-bottom:0; border:0; }
:where(#publicHome) .learning-steps li>span { color:var(--public-home-action); font:400 21px/1.6 var(--hp-display); }
:where(#publicHome) .learning-steps h3 { font-size:23px; }
:where(#publicHome) .learning-steps p { font-size:14px; color:var(--hp-muted); margin-top:9px; }
:where(#publicHome) .premium-section { background:var(--hp-soft); padding-block:72px; }
@media(max-width:1020px) {
  :where(#publicHome) .shell { width:calc(100% - 56px); }
  :where(#publicHome) .intro { font-size:16px; }
  :where(#publicHome) .hero-actions { gap:10px 16px; }
  :where(#publicHome) .how-section { gap:40px; }
  :where(#publicHome) .how-heading h2 { font-size:33px; }

}
@media(max-width:760px) {
  :where(#publicHome) .shell { width:calc(100% - 40px); }
  :where(#publicHome) .logo { font-size:22px; gap:8px; }
  :where(#publicHome) .logo img { width:32px; height:32px; }
  :where(#publicHome) .desktop-nav { display:none; }
  :where(#publicHome) .hero .eyebrow { font-size:10px; letter-spacing:1px; }
  :where(#publicHome) .intro { font-size:16px; }
  :where(#publicHome) .hero-actions { gap:7px 19px; margin-top:25px; }
  :where(#publicHome) .wide-only { display:none; }
  :where(#publicHome) .portrait-wrap { border-radius:23px; }
  :where(#publicHome) .section-copy { font-size:14px; }
  :where(#publicHome) .how-section { grid-template-columns:1fr; padding-block:32px; gap:24px; }
  :where(#publicHome) .how-heading h2 { font-size:31px; }
  :where(#publicHome) .how-heading>p { font-size:14px; }
  :where(#publicHome) .learning-steps h3 { font-size:23px; }
  :where(#publicHome) .learning-steps p { font-size:14px; }
  :where(#publicHome) .learning-steps li { gap:20px; }
  :where(#publicHome) .premium-section { padding-block:44px; }

}
@media(max-width:360px) {
  :where(#publicHome) .shell { width:calc(100% - 32px); }
  :where(#publicHome) .hero-actions { gap:6px 14px; }
  :where(#publicHome) .hero-actions .button { padding-inline:20px; }

}
@media(prefers-reduced-motion:reduce) {
  :where(#publicHome) *,:where(#publicHome) *::before,:where(#publicHome) *::after { transition:none !important; }
}
:where(#publicHome) .membership-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
:where(#publicHome) .membership-plan { min-width:0; display:flex; flex-direction:column; align-items:start; background:color-mix(in srgb, var(--white) 70.98%, transparent); border:1px solid var(--pink-blush); border-radius:24px; padding:24px 21px 17px; }
:where(#publicHome) .membership-annual { background:linear-gradient(140deg,var(--white),var(--gray-lighter)); border-color:var(--red-300); box-shadow:0 8px 25px color-mix(in srgb, var(--pink-muted) 1.96%, transparent); }
:where(#publicHome) .plan-duration-art { position:relative; width:54px; height:58px; border:1px solid var(--pink-blush); border-radius:13px; background:linear-gradient(140deg,var(--white),var(--pink-100)); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 5px 11px color-mix(in srgb, var(--rose-800) 1.96%, transparent); }
:where(#publicHome) .plan-duration-art::before,:where(#publicHome) .plan-duration-art::after { content:""; width:3px; height:8px; position:absolute; top:-3px; border-radius:3px; background:var(--pink-200); }
:where(#publicHome) .plan-duration-art::before { left:14px; }:where(#publicHome) .plan-duration-art::after { right:14px; }
:where(#publicHome) .plan-duration-art>i { position:absolute; inset:10px 0 auto; border-top:1px solid var(--gray-border); }
:where(#publicHome) .plan-duration-art b { font:400 24px/1 var(--hp-display); color:var(--pink-500); margin-top:9px; }
:where(#publicHome) .plan-duration-art>span { font-size:5px; letter-spacing:1px; color:var(--gray-cool); margin-top:3px; }
:where(#publicHome) .membership-annual .plan-duration-art { background:linear-gradient(140deg,var(--rose-50),var(--purple-light)); border-color:var(--pink-blush); }
:where(#publicHome) .plan-tag { font-size:10px; color:var(--pink-muted); background:var(--pink-50); border:1px solid var(--red-light); padding:3px 8px; border-radius:50px; margin-top:17px; min-height:25px; line-height:1.7; }
:where(#publicHome) .membership-plan h3 { font:400 24px/1.5 var(--hp-display); margin-top:12px; }
:where(#publicHome) .membership-price { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:2px; margin-top:16px; line-height:1.3; font-family:var(--font-public-display); }
:where(#publicHome) .membership-price>span { font-size:21px; align-self:start; margin-top:7px; }
:where(#publicHome) .membership-price strong { font:400 44px/1.15 var(--hp-display); letter-spacing:-1.5px; }
:where(#publicHome) .membership-price small { color:var(--hp-muted); font:400 12px/1.5 var(--hp-body); margin-left:3px; }
:where(#publicHome) .plan-duration { color:var(--gray); font-size:11px; margin-top:11px; min-height:23px; }
:where(#publicHome) .membership-plan>a { display:flex; width:100%; justify-content:space-between; align-items:center; gap:10px; font-size:12px; min-height:47px; margin-top:15px; padding-top:12px; border-top:1px solid var(--gray-border); }
:where(#publicHome) .membership-plan>a>span { color:var(--hp-brand); font-size:17px; }
:where(#publicHome) .membership-plan>a:hover { color:var(--hp-brand); }
:where(#publicHome) .membership-terms { grid-column:1/-1; padding-top:5px; }
:where(#publicHome) .membership-terms>p { font-size:11px; color:var(--gray); line-height:1.9; }
:where(#publicHome) .membership-terms>p:first-child { display:flex; align-items:center; gap:7px; color:var(--pink-muted); margin-bottom:8px; }
:where(#publicHome) .preview-status { width:5px; height:5px; border-radius:3px; background:var(--pink-muted); flex-shrink:0; }
:where(#publicHome) .payment-summary { display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:14px; }
:where(#publicHome) .payment-summary>span { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--gray); }
:where(#publicHome) .payment-summary svg { width:18px; height:18px; color:var(--gray-cool); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
@media(max-width:1020px) {
 :where(#publicHome) .membership-plan { padding-inline:18px; }:where(#publicHome) .membership-price strong { font-size:40px; }
}
@media(max-width:960px) {

 :where(#publicHome) .membership-options { width:100%; max-width:760px; }
 :where(#publicHome) .membership-plan { padding:25px 25px 17px; }:where(#publicHome) .membership-price strong { font-size:48px; }
}
@media(max-width:760px) {
 :where(#publicHome) .membership-options { gap:12px; }:where(#publicHome) .membership-plan { padding:20px 17px 14px; border-radius:22px; }:where(#publicHome) .plan-tag { font-size:11px; padding-inline:6px; }
 :where(#publicHome) .membership-plan h3 { font-size:23px; }:where(#publicHome) .membership-price { display:grid; grid-template-columns:auto 1fr; column-gap:2px; }:where(#publicHome) .membership-price strong { font-size:40px; }:where(#publicHome) .membership-price small { grid-column:2; margin:1px 0 0; font-size:11px; }
 :where(#publicHome) .membership-plan>a { font-size:12px; }:where(#publicHome) .plan-duration { font-size:12px; }:where(#publicHome) .membership-terms>p,:where(#publicHome) .payment-summary>span { font-size:12px; }
 :where(#publicHome) .membership-terms { padding-top:7px; }:where(#publicHome) .payment-summary { gap:13px; }
}
@media(max-width:360px) {
 :where(#publicHome) .membership-options { grid-template-columns:1fr; }:where(#publicHome) .membership-plan { padding:24px; }:where(#publicHome) .plan-tag { font-size:11px; }:where(#publicHome) .membership-price { display:flex; }:where(#publicHome) .membership-price strong { font-size:49px; }:where(#publicHome) .membership-price small { margin-left:4px; font-size:12px; }:where(#publicHome) .plan-duration { font-size:12px; }:where(#publicHome) .membership-plan>a { font-size:13px; }
}
#publicHome { --hp-ink:var(--public-home-ink); --hp-brand:var(--public-home-brand); --hp-muted:var(--gray); }
:where(#publicHome) .header { background:color-mix(in srgb, var(--rose-25) 91.76%, transparent); border-bottom:1px solid var(--pink-100); }
:where(#publicHome) .logo { font-weight:600; color:var(--public-home-ink); }
:where(#publicHome) .desktop-nav { gap:24px; font-size:13px; }
:where(#publicHome) .desktop-nav a { position:relative; }
:where(#publicHome) .desktop-nav .nav-current { color:var(--public-home-action); font-weight:600; }
:where(#publicHome) .nav-current::after { content:""; height:2px; position:absolute; inset:auto 0 0; background:var(--hp-brand); }
:where(#publicHome) .nav-actions { display:flex; gap:10px; align-items:center; }
:where(#publicHome) .button { border-radius:16px; }
:where(#publicHome) .primary { background:linear-gradient(115deg,var(--public-home-brand),var(--pink-500)); box-shadow:0 10px 26px color-mix(in srgb, var(--public-home-brand) 14.90%, transparent); }
:where(#publicHome) .primary:hover { background:linear-gradient(115deg,var(--public-home-action),var(--public-home-brand)); }
:where(#publicHome) .nav-trial { min-height:44px; font-size:13px; padding:9px 18px; border-radius:13px; }
:where(#publicHome) .hero { position:relative; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 88% 43%,var(--pink-400) 0,var(--pink-200) 32%,transparent 66%),linear-gradient(120deg,var(--pink-50) 4%,var(--pink-100) 60%,var(--pink-200)); }
:where(#publicHome) .hero-ribbons { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }
:where(#publicHome) .ribbon-light { fill:color-mix(in srgb, var(--white) 31.37%, transparent); }:where(#publicHome) .ribbon-soft { fill:color-mix(in srgb, var(--pink-blush) 56.47%, transparent); }:where(#publicHome) .ribbon-line { fill:none; stroke:color-mix(in srgb, var(--white) 39.61%, transparent); stroke-width:7; }
:where(#publicHome) .hero h1>span { color:var(--public-home-brand); text-shadow:0 2px color-mix(in srgb, var(--white) 41.96%, transparent); }
:where(#publicHome) .intro { color:var(--gray-strong); font-size:16px; line-height:1.9; }
:where(#publicHome) .hero-actions { gap:12px; margin-top:25px; }
:where(#publicHome) .hero-actions .button { min-height:57px; font-size:15px; padding-inline:23px; gap:15px; }
:where(#publicHome) .hero-actions .button>span { line-height:1; }
:where(#publicHome) .hero-secondary { background:var(--white); border:1px solid var(--pink-200); color:var(--public-home-ink); box-shadow:0 6px 22px color-mix(in srgb, var(--public-home-brand) 7.06%, transparent); }
:where(#publicHome) .hero-secondary:hover { background:var(--rose-25); }
:where(#publicHome) .hero-perks { display:flex; flex-wrap:wrap; gap:9px 17px; list-style:none; padding:0; margin:22px 0 0; color:var(--hp-ink); font-size:11px; }
:where(#publicHome) .hero-perks li::before { content:"✓"; color:var(--public-home-brand); font-weight:700; margin-right:6px; }
:where(#publicHome) .portrait-wrap { position:relative; z-index:1; background:none; border-radius:0; filter:drop-shadow(0 18px 24px color-mix(in srgb, var(--rose-800) 9.41%, transparent)); }
:where(#publicHome) .teacher { position:relative; z-index:1; }
:where(#publicHome) .hero-float { position:absolute; background:color-mix(in srgb, var(--white) 94.12%, transparent); border:1px solid var(--white); box-shadow:0 15px 35px color-mix(in srgb, var(--pink-700) 10.20%, transparent); border-radius:20px; padding:17px; color:var(--gray-strong); }
:where(#publicHome) .hero-quick { left:-14px; top:69px; width:203px; transform:rotate(-10deg); }
:where(#publicHome) .float-label { display:block; font-size:9px; font-weight:700; color:var(--public-home-action); letter-spacing:.4px; }
:where(#publicHome) .float-label small { font-size:8px; color:var(--purple-gray); margin-left:8px; font-weight:400; }
:where(#publicHome) .hero-float p { font-size:12px; margin:6px 0 11px; }
:where(#publicHome) .hero-float b { display:block; font:italic 24px/1.4 Georgia,serif; color:var(--public-home-ink); }
:where(#publicHome) .float-answer { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:12px; padding:8px 10px; border:1px solid var(--pink-200); border-radius:9px; background:var(--pink-50); font:italic 18px/1.4 Georgia,serif; }
:where(#publicHome) .float-answer i { font:600 13px var(--hp-body); color:var(--public-home-action); }
:where(#publicHome) .hero-growth { right:-12px; top:96px; width:182px; transform:rotate(10deg); }
:where(#publicHome) .hero-growth p { margin-bottom:6px; }
:where(#publicHome) .hero-growth svg { display:block; width:100%; fill:none; stroke:var(--pink-400); stroke-width:15; stroke-linecap:round; padding-block:5px; }
:where(#publicHome) .hero-growth>small { font-size:9px; color:var(--gray); }
:where(#publicHome) .hero-spark { position:absolute; color:var(--white); font:42px/1 Georgia,serif; z-index:2; text-shadow:0 0 15px color-mix(in srgb, var(--white) 60.00%, transparent); }
:where(#publicHome) .spark-one { left:12px; bottom:80px; }:where(#publicHome) .spark-two { right:12px; top:20px; font-size:56px; }
@media(max-width:1100px) and (min-width:761px) {:where(#publicHome) .desktop-nav { gap:17px; font-size:12px; }:where(#publicHome) .nav-actions { gap:7px; }:where(#publicHome) .nav-trial { padding-inline:13px; font-size:12px; }:where(#publicHome) .hero-actions .button { font-size:13px; padding-inline:18px; gap:10px; }
 :where(#publicHome) .hero-quick { width:170px; left:-2px; top:45px; padding:13px; }:where(#publicHome) .hero-growth { width:151px; right:-4px; top:75px; padding:13px; }:where(#publicHome) .hero-float p { font-size:10px; }:where(#publicHome) .hero-float b { font-size:20px; }:where(#publicHome) .float-label { font-size:8px; }
}
@media(max-width:960px) and (min-width:761px) {
 :where(#publicHome) .nav-current { display:none !important; }:where(#publicHome) .desktop-nav { gap:15px; }:where(#publicHome) .intro { font-size:14px; }:where(#publicHome) .hero-perks { font-size:10px; gap:6px 12px; }
 :where(#publicHome) .hero-growth { top:51px; width:135px; }:where(#publicHome) .hero-quick { width:150px; top:19px; }:where(#publicHome) .hero-float p { font-size:9px; }
}
@media(max-width:760px) {:where(#publicHome) .desktop-nav { display:none; }:where(#publicHome) .logo { font-size:22px; }:where(#publicHome) .nav-trial { display:none; }
 :where(#publicHome) .hero { background:radial-gradient(ellipse at 90% 69%,var(--pink-400) 0,var(--pink-blush) 40%,transparent 72%),linear-gradient(130deg,var(--rose-25),var(--pink-blush)); }
 :where(#publicHome) .intro { font-size:14px; line-height:1.9; }:where(#publicHome) .hero-actions { gap:10px; margin-top:22px; }:where(#publicHome) .hero-actions .button { min-height:51px; padding-inline:17px; font-size:13px; gap:10px; }
 :where(#publicHome) .hero-perks { gap:6px 12px; font-size:10px; margin-top:19px; }
 :where(#publicHome) .hero-quick { width:155px; top:28px; left:1px; padding:12px; }:where(#publicHome) .hero-float p { font-size:9px; margin-bottom:7px; }:where(#publicHome) .hero-float b { font-size:19px; }:where(#publicHome) .float-label { font-size:7px; }:where(#publicHome) .float-label small { font-size:7px; margin-left:5px; }:where(#publicHome) .float-answer { font-size:15px; padding:6px 8px; margin-top:9px; }
 :where(#publicHome) .hero-growth { width:138px; top:58px; right:0; padding:12px; }:where(#publicHome) .hero-growth>small { font-size:8px; }:where(#publicHome) .hero-growth svg { stroke-width:14; }:where(#publicHome) .hero-spark { font-size:28px; }:where(#publicHome) .spark-one { left:6px; bottom:75px; }:where(#publicHome) .spark-two { right:4px; top:4px; font-size:37px; }
}
/* Keep phone actions stacked while Thai webfonts replace fallback glyphs. */
@media(max-width:600px) { :where(#publicHome) .hero-actions .button { width:100%; } }
@media(max-width:360px) {:where(#publicHome) .hero-actions .button { font-size:14px; }:where(#publicHome) .hero-perks { font-size:9px; }:where(#publicHome) .hero-quick { width:135px; left:-1px; }:where(#publicHome) .hero-growth { width:122px; right:-1px; }:where(#publicHome) .hero-float p { font-size:8px; }:where(#publicHome) .float-label { font-size:6px; }:where(#publicHome) .float-label small { font-size:6px; }:where(#publicHome) .hero-growth>small { font-size:7px; }
}
:where(#publicHome) .discovery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:32px; }
:where(#publicHome) .discovery-card { min-width:0; overflow:hidden; border:1px solid var(--gray-border); border-radius:28px; background:var(--white); box-shadow:0 8px 26px color-mix(in srgb, var(--rose-800) 1.57%, transparent); }
:where(#publicHome) .discovery-art { position:relative; isolation:isolate; height:288px; overflow:hidden; display:grid; place-items:center; }
:where(#publicHome) .art-topic { background:radial-gradient(ellipse at 30% 30%,var(--rose-25),transparent 70%),linear-gradient(135deg,var(--pink-light),var(--pink-blush)); --art-ink:var(--public-home-action); }
:where(#publicHome) .art-exam { background:radial-gradient(ellipse at 30% 30%,var(--purple-50),transparent 70%),linear-gradient(135deg,var(--violet-100),var(--purple-200)); --art-ink:var(--purple-gray); }
:where(#publicHome) .art-progress { background:radial-gradient(ellipse at 30% 30%,var(--sky-50),transparent 70%),linear-gradient(135deg,var(--blue-light),var(--sky-200)); --art-ink:var(--green-strong); }
:where(#publicHome) .discovery-art::after { content:""; position:absolute; z-index:-1; width:230px; height:105px; bottom:24px; border-radius:50%; background:color-mix(in srgb, var(--white) 39.61%, transparent); transform:rotate(-13deg); }
:where(#publicHome) .discovery-number { position:absolute; top:19px; left:21px; font:500 12px/1 var(--hp-display); color:var(--art-ink); border:1px solid color-mix(in srgb, var(--white) 70.98%, transparent); border-radius:50px; background:color-mix(in srgb, var(--white) 45.88%, transparent); padding:9px 11px; }
:where(#publicHome) .discovery-art>img { width:205px; height:205px; object-fit:contain; transform:rotate(-9deg) translate(-5px,3px); filter:drop-shadow(0 16px 10px color-mix(in srgb, var(--purple-900) 6.27%, transparent)); }
:where(#publicHome) .art-exam>img { transform:rotate(10deg) translate(-4px,0); }:where(#publicHome) .art-progress>img { transform:rotate(-6deg) translate(-3px,6px); }
:where(#publicHome) .art-orbit { position:absolute; width:232px; height:232px; border:1px solid color-mix(in srgb, var(--white) 60.00%, transparent); border-radius:50%; z-index:-1; top:28px; right:15px; transform:rotate(-25deg) scaleX(.78); }
:where(#publicHome) .art-token { position:absolute; z-index:1; display:flex; align-items:center; gap:9px; background:color-mix(in srgb, var(--white) 92.94%, transparent); border:1px solid white; color:var(--art-ink); border-radius:14px; padding:11px 14px; box-shadow:0 10px 20px color-mix(in srgb, var(--purple-gray) 10.20%, transparent); }
:where(#publicHome) .token-topic { right:20px; bottom:56px; font:italic 22px/1.4 Georgia,serif; transform:rotate(-7deg); }:where(#publicHome) .token-topic i { font-style:normal; color:var(--pink-400); }:where(#publicHome) .token-topic b { display:grid; place-items:center; font:500 10px/1 var(--hp-display); width:19px; height:19px; border-radius:50%; background:var(--pink-100); }
:where(#publicHome) .token-exam { bottom:48px; left:24px; font-size:11px; font-weight:600; transform:rotate(5deg); }:where(#publicHome) .token-exam i { color:var(--violet-400); font-style:normal; }
:where(#publicHome) .token-progress { bottom:47px; right:17px; font-size:10px; gap:8px; transform:rotate(-6deg); }:where(#publicHome) .token-progress svg { width:65px; height:28px; fill:none; stroke:var(--pink-500); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
:where(#publicHome) .art-spark { position:absolute; top:37px; right:28px; font:30px/1 Georgia,serif; color:white; text-shadow:0 1px 8px color-mix(in srgb, var(--pink-400) 15.29%, transparent); }
:where(#publicHome) .art-caption { position:absolute; left:23px; bottom:15px; font-size:10px; color:var(--art-ink); }
:where(#publicHome) .discovery-copy { display:flex; flex-direction:column; align-items:start; padding:22px 24px; }
:where(#publicHome) .discovery-copy h3 { font:500 30px/1.25 var(--hp-display); letter-spacing:-.5px; }
:where(#publicHome) .discovery-copy>p { font-size:13px; line-height:1.9; margin-top:10px; color:var(--gray); }
:where(#publicHome) .discovery-link { display:inline-flex; align-items:center; justify-content:center; align-self:center; min-height:48px; min-width:170px; max-width:100%; font-size:14px; font-weight:600; line-height:1.5; text-align:center; margin-top:18px; padding:12px 26px; border:0; border-radius:999px; color:var(--white); background:var(--public-home-action); box-shadow:0 6px 16px color-mix(in srgb, var(--public-home-action) 7.84%, transparent); }
:where(#publicHome) .discovery-link:hover { color:var(--white); background:var(--pink-700); }
:where(#publicHome) .concept-highlight { display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:26px; margin-top:24px; padding:25px 30px; border:1px solid var(--pink-blush); border-radius:25px; background:radial-gradient(ellipse at 0 50%,var(--pink-light),transparent 50%),linear-gradient(110deg,var(--rose-25),var(--white) 75%); }
:where(#publicHome) .concept-art { position:relative; width:84px; height:84px; display:grid; place-items:center; background:linear-gradient(140deg,var(--pink-200),var(--pink-500)); border:1px solid color-mix(in srgb, var(--white) 78.82%, transparent); border-radius:25px; transform:rotate(-8deg); box-shadow:0 10px 18px color-mix(in srgb, var(--public-home-action) 9.02%, transparent),inset 0 2px 3px color-mix(in srgb, var(--white) 36.08%, transparent); }
:where(#publicHome) .concept-play { width:49px; height:49px; display:grid; place-items:center; border-radius:17px; background:var(--white); box-shadow:0 5px 12px color-mix(in srgb, var(--pink-700) 10.20%, transparent); }:where(#publicHome) .concept-play svg { width:35px; height:35px; fill:var(--public-home-brand); }
:where(#publicHome) .concept-math { position:absolute; right:-12px; bottom:-4px; padding:3px 9px; color:var(--purple-gray); background:var(--white); border:1px solid var(--pink-blush); border-radius:8px; font:italic 15px/1.3 Georgia,serif; transform:rotate(14deg); }
:where(#publicHome) .concept-label { color:var(--pink-muted); font-size:11px; font-weight:600; }
:where(#publicHome) .concept-copy h3 { font:500 28px/1.4 var(--hp-display); margin-top:3px; letter-spacing:-.3px; }
:where(#publicHome) .concept-copy>p:last-child { color:var(--gray); font-size:13px; line-height:1.8; margin-top:5px; }:where(#publicHome) .concept-break { display:none; }
:where(#publicHome) .concept-link { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:10px 24px; border-radius:999px; border:1px solid var(--pink-200); background:var(--white); color:var(--pink-700); font-weight:600; font-size:13px; white-space:nowrap; }:where(#publicHome) .concept-link:hover { background:var(--pink-50); border-color:var(--pink-400); }
:where(#publicHome) .try-section { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; padding-block:74px; }
:where(#publicHome) .try-heading h2 { font:500 42px/1.25 var(--hp-display); margin:14px 0 20px; letter-spacing:-.8px; }:where(#publicHome) .try-heading h2 span { color:var(--hp-brand); }
:where(#publicHome) .try-heading>p:not(.eyebrow) { color:var(--hp-muted); font-size:15px; line-height:1.9; }:where(#publicHome) .try-heading>small { display:block; color:var(--gray); font-size:11px; margin-top:18px; }
:where(#publicHome) .how-section { border-top:1px solid var(--gray-border); }
@media(min-width:761px) and (max-width:1000px) {
 :where(#publicHome) .discovery-grid { grid-template-columns:1fr; gap:20px; }:where(#publicHome) .discovery-card { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; }:where(#publicHome) .discovery-art { height:270px; }:where(#publicHome) .discovery-copy { padding:22px 28px; }:where(#publicHome) .discovery-copy h3 { font-size:29px; }:where(#publicHome) .discovery-copy h3 br { display:none; }:where(#publicHome) .discovery-link { margin-top:18px; }
 :where(#publicHome) .concept-highlight { grid-template-columns:76px 1fr; gap:17px 24px; padding:24px; }:where(#publicHome) .concept-art { width:74px; height:74px; }:where(#publicHome) .concept-copy h3 { font-size:26px; }:where(#publicHome) .concept-link { grid-column:2; justify-self:start; }
 :where(#publicHome) .try-section { gap:28px; }:where(#publicHome) .try-heading h2 { font-size:36px; }
}
@media(max-width:760px) {:where(#publicHome) .discovery-grid { grid-template-columns:1fr; gap:24px; margin-top:25px; }:where(#publicHome) .discovery-card { max-width:540px; width:100%; margin-inline:auto; border-radius:26px; }
 :where(#publicHome) .discovery-art { height:280px; }:where(#publicHome) .discovery-art>img { width:215px; height:215px; }:where(#publicHome) .art-orbit { right:calc(50% - 125px); }:where(#publicHome) .token-topic { right:calc(50% - 138px); }:where(#publicHome) .token-exam { left:calc(50% - 132px); }:where(#publicHome) .token-progress { right:calc(50% - 140px); }
 :where(#publicHome) .discovery-copy { padding:21px 24px 23px; }:where(#publicHome) .discovery-copy h3 { font-size:30px; }:where(#publicHome) .discovery-copy h3 br { display:none; }:where(#publicHome) .discovery-copy>p { font-size:14px; margin-top:10px; }:where(#publicHome) .discovery-copy>p br { display:none; }:where(#publicHome) .discovery-link { font-size:14px; margin-top:18px; }
 :where(#publicHome) .concept-highlight { grid-template-columns:60px 1fr; gap:16px; margin-top:23px; padding:24px 21px; border-radius:24px; }:where(#publicHome) .concept-art { width:57px; height:64px; border-radius:19px; }:where(#publicHome) .concept-play { width:37px; height:37px; border-radius:12px; }:where(#publicHome) .concept-play svg { width:28px; height:28px; }:where(#publicHome) .concept-math { right:-8px; font-size:12px; padding-inline:6px; }:where(#publicHome) .concept-label { font-size:10px; }:where(#publicHome) .concept-copy h3 { font-size:23px; line-height:1.4; margin-top:6px; }:where(#publicHome) .concept-copy>p:last-child { font-size:12px; margin-top:8px; }:where(#publicHome) .concept-link { grid-column:2; justify-self:start; min-height:44px; padding-inline:22px; font-size:12px; }:where(#publicHome) .concept-break { display:block; }
 :where(#publicHome) .try-section { grid-template-columns:1fr; gap:27px; padding-block:44px; }:where(#publicHome) .try-heading h2 { font-size:35px; margin-block:12px 17px; }:where(#publicHome) .try-heading>p:not(.eyebrow) { font-size:14px; }
}
@media(max-width:360px) {
 :where(#publicHome) .discovery-art { height:260px; }:where(#publicHome) .discovery-art>img { width:195px; height:195px; }:where(#publicHome) .discovery-copy { padding-inline:22px; }:where(#publicHome) .discovery-copy h3 { font-size:28px; }:where(#publicHome) .discovery-copy>p { font-size:13px; }
 :where(#publicHome) .concept-highlight { grid-template-columns:1fr; gap:18px; padding:24px; }:where(#publicHome) .concept-art { width:60px; height:60px; }:where(#publicHome) .concept-copy h3 { font-size:24px; }:where(#publicHome) .concept-label { font-size:11px; }:where(#publicHome) .concept-copy>p:last-child { font-size:13px; }:where(#publicHome) .concept-link { grid-column:1; font-size:13px; }
 :where(#publicHome) .token-topic { right:16px; }:where(#publicHome) .token-exam { left:16px; }:where(#publicHome) .token-progress { right:10px; font-size:9px; }:where(#publicHome) .token-progress svg { width:57px; }
 :where(#publicHome) .try-heading h2 { font-size:32px; }
}
:where(#publicHome) .try-section { grid-template-columns:.82fr 1.18fr; gap:60px; }
:where(#publicHome) .exam-preview { position:relative; overflow:hidden; background:var(--purple-50); border:1px solid var(--white); border-radius:24px; box-shadow:0 18px 35px color-mix(in srgb, var(--gray-strong) 12.94%, transparent),0 3px 10px color-mix(in srgb, var(--gray-strong) 1.96%, transparent); }
:where(#publicHome) .exam-preview-header { background:linear-gradient(115deg,var(--purple-600),var(--pink-400) 62%,var(--pink-400)); padding:17px 20px 16px; color:var(--white); }
:where(#publicHome) .exam-preview-brand { display:flex; align-items:center; gap:9px; }:where(#publicHome) .exam-preview-brand>span { display:grid; place-items:center; width:29px; height:29px; background:color-mix(in srgb, var(--white) 14.12%, transparent); border:1px solid color-mix(in srgb, var(--white) 25.10%, transparent); border-radius:9px; font:500 23px/1 var(--hp-display); }:where(#publicHome) .exam-preview-brand p { font-size:11px; line-height:1.5; }:where(#publicHome) .exam-preview-brand small { display:block; opacity:.85; font-size:9px; margin-top:2px; }
:where(#publicHome) .exam-preview-title { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:13px; }:where(#publicHome) .exam-preview-title h3 { font:500 22px/1.4 var(--hp-display); }:where(#publicHome) .demo-attempts { flex-shrink:0; background:var(--white); color:var(--purple-gray); font-size:10px; font-weight:700; padding:5px 10px; border-radius:30px; white-space:nowrap; }:where(#publicHome) .exam-preview-header>p { font-size:10px; margin-top:5px; color:var(--pink-light); }
:where(#publicHome) .demo-topic-switch { display:flex; gap:7px; padding:13px 16px; border-bottom:1px solid var(--purple-light); background:var(--purple-50); }:where(#publicHome) .demo-topic-switch button { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 10px; border:1px solid var(--gray-border); background:var(--white); color:var(--gray); border-radius:13px; font-size:12px; font-weight:600; }:where(#publicHome) .demo-topic-switch button>span { font-size:9px; opacity:.75; }:where(#publicHome) .demo-topic-switch button[aria-pressed="true"] { background:linear-gradient(115deg,var(--pink-400),var(--purple)); color:var(--white); border-color:transparent; box-shadow:0 4px 8px color-mix(in srgb, var(--pink-500) 9.02%, transparent); }
:where(#publicHome) .demo-question-body { padding:14px; }:where(#publicHome) .demo-panel { padding:17px 17px 15px; border:1px solid var(--gray-border); border-radius:20px; background:var(--white); box-shadow:0 4px 10px color-mix(in srgb, var(--gray-strong) 2.35%, transparent); }:where(#publicHome) .demo-panel[hidden],:where(#publicHome) .demo-solution[hidden],:where(#publicHome) .demo-retry[hidden] { display:none; }
:where(#publicHome) .demo-question-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }:where(#publicHome) .demo-position,:where(#publicHome) .demo-level { display:inline-flex; align-items:center; min-height:27px; padding:4px 11px; border-radius:25px; font-size:10px; font-weight:600; }:where(#publicHome) .demo-position { background:var(--pink-blush); color:var(--rose-800); }:where(#publicHome) .demo-level { color:var(--amber-deep); background:var(--amber-light); }
:where(#publicHome) .demo-options { min-width:0; border:0; padding:0; margin:18px 0 0; }:where(#publicHome) .demo-options legend { display:block; width:100%; padding:0; font:500 21px/1.8 var(--hp-display); margin-bottom:15px; color:var(--public-home-ink); }:where(#publicHome) .demo-options legend math { font-size:24px; vertical-align:middle; margin-left:5px; }
:where(#publicHome) .demo-option { position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; min-height:61px; border:1px solid transparent; border-radius:14px; cursor:pointer; color:var(--gray-strong); }:where(#publicHome) .demo-option+.demo-option { margin-top:6px; }:where(#publicHome) .demo-option:hover { background:var(--purple-50); }:where(#publicHome) .demo-option input { position:absolute; left:19px; top:50%; transform:translateY(-50%); width:18px; height:18px; margin:0; opacity:0; }:where(#publicHome) .demo-option-letter { width:29px; height:29px; display:grid; place-items:center; flex-shrink:0; border:2px solid var(--purple-200); border-radius:50%; color:var(--gray-strong); background:var(--white); font:500 13px/1 var(--hp-display); }:where(#publicHome) .demo-option-math { min-width:0; flex:1; font-size:18px; line-height:1.5; }:where(#publicHome) .demo-option math { font-size:21px; }:where(#publicHome) .demo-option:has(input:checked) { background:var(--purple-75); border-color:var(--violet-100); }:where(#publicHome) .demo-option input:checked+.demo-option-letter { color:var(--violet-500); border-color:var(--purple); }:where(#publicHome) .demo-option:has(input:focus-visible) { outline:3px solid var(--purple-400); outline-offset:2px; }
:where(#publicHome) .demo-option-status { display:none; font-size:9px; font-weight:600; color:inherit; white-space:nowrap; }:where(#publicHome) .demo-option[data-result="correct"] { background:var(--green-50); color:var(--green-700); border-color:var(--gray-dim); }:where(#publicHome) .demo-option[data-result="correct"] .demo-option-letter { color:var(--green-700); border-color:var(--green-vivid); }:where(#publicHome) .demo-option[data-result="wrong"] { background:var(--rose-50); color:var(--pink-muted); border-color:var(--rose-200); }:where(#publicHome) .demo-option[data-result="wrong"] .demo-option-letter { color:var(--pink-muted); border-color:var(--rose-400); }:where(#publicHome) .demo-option[data-result] .demo-option-status { display:block; }
:where(#publicHome) .demo-solution { margin-top:16px; padding:13px 14px; color:var(--gray-strong); background:var(--pink-50); border-radius:13px; font-size:12px; line-height:1.9; }:where(#publicHome) .demo-solution[data-correct="true"] { background:var(--green-50); color:var(--gray-strong); }
:where(#publicHome) .demo-submit-bar { border-top:1px solid var(--gray-border); padding:13px 18px 14px; background:var(--white); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; }:where(#publicHome) .demo-submit { min-height:48px; flex:1; padding:11px 24px; border:0; border-radius:999px; color:var(--white); background:linear-gradient(110deg,var(--pink-500),var(--public-home-brand)); box-shadow:0 4px 0 var(--pink-muted); font:500 16px/1.5 var(--hp-display); }:where(#publicHome) .demo-submit:disabled { cursor:default; background:var(--gray-dim); box-shadow:0 3px 0 var(--gray-dim); color:var(--gray-strong); }:where(#publicHome) .demo-retry { min-height:48px; padding:10px 14px; background:var(--white); border:1px solid var(--gray-border); color:var(--purple-gray); border-radius:999px; font-size:12px; }:where(#publicHome) .demo-submit-bar>p { flex-basis:100%; text-align:center; font-size:10px; color:var(--gray-cool); margin-top:2px; }
@media(min-width:761px) and (max-width:1000px) {
 :where(#publicHome) .try-section { grid-template-columns:.75fr 1.25fr; gap:25px; }:where(#publicHome) .try-heading h2 { font-size:34px; }:where(#publicHome) .demo-options legend { font-size:18px; }:where(#publicHome) .demo-options legend math { font-size:22px; }:where(#publicHome) .demo-option math { font-size:19px; }:where(#publicHome) .demo-option { gap:9px; padding-inline:7px; }:where(#publicHome) .demo-panel { padding-inline:12px; }:where(#publicHome) .exam-preview-title h3 { font-size:20px; }
}
@media(max-width:760px) {
 :where(#publicHome) .try-section { grid-template-columns:1fr; gap:28px; }:where(#publicHome) .exam-preview-header { padding:15px 16px; }:where(#publicHome) .exam-preview-title h3 { font-size:21px; }:where(#publicHome) .demo-topic-switch { padding:12px; gap:6px; }:where(#publicHome) .demo-topic-switch button { font-size:11px; padding-inline:5px; gap:5px; }:where(#publicHome) .demo-question-body { padding:11px; }:where(#publicHome) .demo-panel { padding:16px 12px 13px; }:where(#publicHome) .demo-options legend { font-size:20px; }:where(#publicHome) .demo-options legend math { font-size:23px; }:where(#publicHome) .demo-option { gap:10px; padding:10px 8px; min-height:59px; }:where(#publicHome) .demo-option math { font-size:23px; }:where(#publicHome) .demo-option-math { font-size:16px; }:where(#publicHome) .demo-option-letter { width:27px; height:27px; }:where(#publicHome) .demo-option-status { font-size:8px; }:where(#publicHome) .demo-solution { font-size:12px; }:where(#publicHome) .demo-submit-bar { padding-inline:14px; }
}
@media(max-width:360px) {
 :where(#publicHome) .exam-preview-header { padding:13px; }:where(#publicHome) .exam-preview-title { gap:7px; }:where(#publicHome) .exam-preview-title h3 { font-size:18px; }:where(#publicHome) .demo-attempts { font-size:9px; padding:4px 7px; }:where(#publicHome) .demo-topic-switch { padding:10px 8px; gap:5px; }:where(#publicHome) .demo-topic-switch button { font-size:10px; gap:3px; }:where(#publicHome) .demo-topic-switch button>span { font-size:8px; }:where(#publicHome) .demo-question-body { padding:9px; }:where(#publicHome) .demo-panel { padding:13px 9px; }:where(#publicHome) .demo-options legend { font-size:18px; }:where(#publicHome) .demo-options legend math { font-size:21px; }:where(#publicHome) .demo-option { gap:7px; padding:9px 4px; }:where(#publicHome) .demo-option math { font-size:22px; }:where(#publicHome) .demo-option-letter { width:25px; height:25px; font-size:11px; }:where(#publicHome) .demo-option-status { font-size:7px; }:where(#publicHome) .demo-level,:where(#publicHome) .demo-position { font-size:9px; padding-inline:8px; }
}
:where(#publicHome) .try-section { align-items:stretch; }
:where(#publicHome) .try-heading .demo-launch { margin-top:20px; align-self:start; }
:where(#publicHome) .exam-artwork { position:relative; align-self:stretch; min-width:0; isolation:isolate; overflow:hidden; border:1px solid var(--pink-100); border-radius:30px; background:radial-gradient(ellipse at 60% 70%,var(--violet-100),transparent 67%),linear-gradient(135deg,var(--rose-25),var(--purple-75)); }
:where(#publicHome) .exam-art-glow { position:absolute; width:75%; height:60%; border-radius:50%; background:color-mix(in srgb, var(--purple-200) 50.20%, transparent); left:14%; top:22%; filter:blur(30px); }
:where(#publicHome) .exam-art-paper { position:absolute; border:1px solid var(--white); border-radius:16px; background:color-mix(in srgb, var(--white) 93.73%, transparent); box-shadow:0 14px 25px color-mix(in srgb, var(--purple-gray) 9.02%, transparent); overflow:hidden; }
:where(#publicHome) .paper-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:linear-gradient(110deg,var(--pink-400),var(--violet-500)); color:var(--white); font-size:10px; font-weight:600; }:where(#publicHome) .paper-top em { font:400 8px var(--hp-body); padding:2px 6px; border:1px solid color-mix(in srgb, var(--white) 39.61%, transparent); border-radius:10px; }:where(#publicHome) .paper-top i { width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--white) 52.16%, transparent); }
:where(#publicHome) .paper-limit { width:57%; height:182px; left:4%; top:15%; transform:rotate(-16deg); z-index:0; }:where(#publicHome) .paper-limit .paper-top { background:var(--gray-cool); }:where(#publicHome) .paper-integral { width:57%; height:185px; right:3%; top:10%; transform:rotate(13deg); z-index:1; }:where(#publicHome) .paper-integral .paper-top { background:var(--pink-400); }
:where(#publicHome) .paper-equation { font:italic 25px/1.4 Georgia,serif; color:var(--gray-strong); padding:14px 16px; display:flex; align-items:center; gap:6px; }:where(#publicHome) .paper-fraction { display:inline-flex; flex-direction:column; text-align:center; font:italic 15px/1.2 Georgia,serif; vertical-align:middle; }:where(#publicHome) .paper-fraction b { font-weight:400; padding:2px 5px; white-space:nowrap; }:where(#publicHome) .paper-fraction b+b { border-top:1px solid currentColor; }
:where(#publicHome) .paper-mini-options { display:flex; flex-wrap:wrap; gap:7px; padding:6px 16px; font:italic 11px/1.4 Georgia,serif; color:var(--gray-cool); }:where(#publicHome) .paper-mini-options span { padding:5px 8px; border:1px solid var(--violet-100); border-radius:7px; }
:where(#publicHome) .paper-derivative { width:72%; max-width:340px; height:241px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-5deg); z-index:2; background:var(--white); }
:where(#publicHome) .paper-derivative>p { font:500 12px/1.5 var(--hp-display); color:var(--gray-strong); margin:12px 17px 0; }:where(#publicHome) .paper-derivative>.paper-equation { padding:7px 17px 10px; font-size:22px; }:where(#publicHome) .paper-choice { display:flex; align-items:center; gap:10px; margin:0 10px 6px; min-height:38px; padding:4px 9px; border-radius:10px; color:var(--gray); }:where(#publicHome) .paper-choice i { display:grid; place-items:center; width:21px; height:21px; border:1px solid var(--gray-dim); border-radius:50%; color:var(--gray-cool); font:500 10px var(--hp-display); flex-shrink:0; }:where(#publicHome) .paper-choice .paper-fraction { font-size:12px; }:where(#publicHome) .paper-selected { background:var(--purple-light); color:var(--purple-gray); }:where(#publicHome) .paper-selected i { border-color:var(--purple); color:var(--violet-500); }:where(#publicHome) .paper-selected strong { font-size:12px; margin-left:auto; color:var(--purple); }
:where(#publicHome) .exam-art-spark { position:absolute; z-index:3; right:6%; bottom:12%; font:35px/1 Georgia,serif; color:var(--white); text-shadow:0 1px 5px var(--purple-300); }
:where(#publicHome) .exam-demo-dialog { width:min(580px,calc(100% - 32px)); max-height:calc(100dvh - 36px); margin:auto; padding:0; border:1px solid var(--white); border-radius:25px; background:var(--purple-50); color:var(--hp-ink); box-shadow:0 25px 90px color-mix(in srgb, var(--public-home-ink) 23.92%, transparent); overflow:auto; overscroll-behavior:contain; }
:where(#publicHome) .exam-demo-dialog::backdrop { background:color-mix(in srgb, var(--public-home-ink) 52.16%, transparent); backdrop-filter:blur(7px); }
:where(#publicHome) .preview-dialog-bar { position:sticky; top:0; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding:5px 10px 5px 19px; background:var(--white); border-bottom:1px solid var(--gray-border); }:where(#publicHome) .preview-dialog-bar>span { font-size:11px; color:var(--gray); }:where(#publicHome) .preview-dialog-bar button { display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:var(--purple-75); color:var(--purple-gray); font:300 27px/1 var(--hp-body); }:where(#publicHome) .preview-dialog-bar button:hover { background:var(--purple-light); }
:where(#publicHome) .exam-demo-dialog .exam-preview { border:0; border-radius:0; box-shadow:none; }
@media(min-width:761px) and (max-width:1000px) {
 :where(#publicHome) .try-section { grid-template-columns:.95fr 1.05fr; }:where(#publicHome) .paper-derivative { width:80%; height:228px; }:where(#publicHome) .paper-derivative>p { margin-top:10px; }:where(#publicHome) .paper-derivative>.paper-equation { padding-block:5px 7px; }:where(#publicHome) .paper-choice { margin-bottom:4px; }:where(#publicHome) .paper-choice .paper-fraction { font-size:11px; }
}
@media(max-width:760px) {
 :where(#publicHome) .try-section { gap:27px; }:where(#publicHome) .exam-artwork { height:270px; max-width:540px; width:100%; justify-self:center; align-self:auto; border-radius:27px; }:where(#publicHome) .paper-derivative { width:75%; max-width:330px; height:229px; }:where(#publicHome) .paper-top { padding:9px 12px; font-size:9px; }:where(#publicHome) .paper-derivative>p { font-size:11px; margin-top:10px; }:where(#publicHome) .paper-derivative>.paper-equation { padding-block:6px 8px; font-size:21px; }:where(#publicHome) .paper-choice { min-height:36px; margin-bottom:4px; gap:8px; }:where(#publicHome) .paper-choice .paper-fraction { font-size:11px; }:where(#publicHome) .paper-limit,:where(#publicHome) .paper-integral { height:171px; }:where(#publicHome) .exam-demo-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:22px; }
}
@media(max-width:360px) {
 :where(#publicHome) .exam-artwork { height:250px; }:where(#publicHome) .paper-derivative { width:79%; height:219px; }:where(#publicHome) .paper-top { padding:8px 11px; }:where(#publicHome) .paper-derivative>p { margin:9px 13px 0; }:where(#publicHome) .paper-derivative>.paper-equation { padding-inline:13px; padding-block:5px 6px; }:where(#publicHome) .paper-choice { padding-inline:6px; margin-inline:7px; min-height:35px; }:where(#publicHome) .paper-choice .paper-fraction { font-size:10px; }:where(#publicHome) .paper-choice i { width:19px; height:19px; font-size:9px; }:where(#publicHome) .paper-limit,:where(#publicHome) .paper-integral { width:63%; height:160px; }:where(#publicHome) .preview-dialog-bar>span { font-size:10px; }:where(#publicHome) .exam-demo-dialog { width:calc(100% - 16px); }
}
:where(#publicHome) .closing-content { text-align:center; }
:where(#publicHome) .closing-content h2 { font:400 36px/1.4 var(--hp-display); letter-spacing:-.5px; margin:18px 0 28px; }
:where(#publicHome) .closing-trial { min-height:52px; padding:13px 30px; border:0; border-radius:999px; background:var(--public-home-action); color:var(--white); box-shadow:0 7px 20px color-mix(in srgb, var(--public-home-action) 9.80%, transparent); }
:where(#publicHome) .closing-trial:hover { background:var(--pink-700); }
:where(#publicHome) .package-details-link { display:block; width:fit-content; min-height:44px; margin:10px auto 0; padding:8px 15px; border:0; background:transparent; color:var(--gray); font-size:13px; text-decoration:underline; text-decoration-color:var(--gray-dim); text-underline-offset:5px; }
:where(#publicHome) .package-details-link:hover { color:var(--pink-700); text-decoration-color:currentColor; }
:where(#publicHome) .package-dialog { width:min(740px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid var(--white); border-radius:26px; background:var(--gray-lighter); color:var(--hp-ink); box-shadow:0 25px 90px color-mix(in srgb, var(--public-home-ink) 23.92%, transparent); overflow:auto; overscroll-behavior:contain; }
:where(#publicHome) .package-dialog::backdrop { background:color-mix(in srgb, var(--public-home-ink) 52.16%, transparent); backdrop-filter:blur(7px); }
:where(#publicHome) .package-dialog-content { padding:24px 28px 27px; }
:where(#publicHome) .package-dialog-content>h2 { font:500 30px/1.4 var(--hp-display); letter-spacing:-.4px; }
:where(#publicHome) .package-dialog-content>p { color:var(--hp-muted); font-size:14px; margin-top:7px; }
:where(#publicHome) .package-dialog .membership-options { margin-top:23px; max-width:none; }
@media(max-width:760px) {
 :where(#publicHome) .closing-content h2 { font-size:29px; margin-block:15px 24px; }
 :where(#publicHome) .package-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:23px; }:where(#publicHome) .package-dialog-content { padding:21px 18px 23px; }:where(#publicHome) .package-dialog-content>h2 { font-size:26px; }:where(#publicHome) .package-dialog-content>p { font-size:12px; }:where(#publicHome) .package-dialog .membership-options { margin-top:20px; }
}
@media(max-width:360px) {
 :where(#publicHome) .closing-content h2 { font-size:26px; }:where(#publicHome) .package-dialog { width:calc(100% - 16px); }:where(#publicHome) .package-dialog-content { padding-inline:16px; }:where(#publicHome) .package-dialog-content>h2 { font-size:25px; }
}
:where(#publicHome) .footer { padding-top:54px; background:var(--public-home-footer); color:var(--gray-subtle); border-top:1px solid var(--public-home-ink); }
:where(#publicHome) .footer-grid { display:grid; grid-template-columns:1.1fr .85fr 1fr 1.2fr; gap:35px; align-items:start; }
:where(#publicHome) .footer .logo { color:var(--white); font-size:24px; }:where(#publicHome) .footer .logo img { border-radius:10px; }
:where(#publicHome) .footer-contact>p { color:var(--gray-dim); font-size:13px; line-height:1.8; margin-top:18px; }
:where(#publicHome) .footer-contact address { font-style:normal; color:var(--gray-cool); font-size:11px; line-height:1.9; margin-top:16px; }
:where(#publicHome) .footer-phone { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:13px; color:var(--pink-100); margin-top:7px; }:where(#publicHome) .footer-phone svg { width:17px; height:17px; color:var(--pink-400); }
:where(#publicHome) .footer nav { display:flex; flex-direction:column; align-items:start; min-width:0; }
:where(#publicHome) .footer-title { color:var(--white); font:500 16px/1.5 var(--hp-display); margin:4px 0 14px; }
:where(#publicHome) .footer nav>a { min-height:42px; display:flex; align-items:center; color:var(--gray-dim); font-size:12px; line-height:1.6; }
:where(#publicHome) .footer a:hover { color:var(--pink-200); }:where(#publicHome) .footer :focus-visible { outline-color:var(--pink-200); }
:where(#publicHome) .footer-social>a { gap:10px; }:where(#publicHome) .social-mark { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--public-home-ink); border-radius:8px; background:var(--public-home-ink); color:var(--red-300); flex-shrink:0; }:where(#publicHome) .social-mark svg { width:17px; height:17px; fill:currentColor; }:where(#publicHome) .footer-social a:hover .social-mark { border-color:var(--pink-muted); background:var(--public-home-ink); }
:where(#publicHome) .footer-statement { padding-top:1px; }:where(#publicHome) .footer-statement>p { font:600 30px/1.25 var(--hp-display); letter-spacing:-.7px; color:var(--purple-75); }:where(#publicHome) .footer-statement>p>span { color:var(--pink-400); }:where(#publicHome) .footer-statement>a { display:inline-flex; align-items:center; min-height:44px; color:var(--gray-cool); font-size:11px; margin-top:15px; }
:where(#publicHome) .footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:37px; padding-block:22px; border-top:1px solid var(--public-home-ink); color:var(--gray-cool); font-size:10px; }:where(#publicHome) .footer-bottom>a { margin-left:auto; min-height:36px; display:inline-flex; align-items:center; color:var(--gray-dim); }
@media(min-width:761px) and (max-width:1020px) {
 :where(#publicHome) .footer-grid { gap:24px; grid-template-columns:1.15fr .9fr 1fr 1.05fr; }:where(#publicHome) .footer-statement>p { font-size:25px; }:where(#publicHome) .footer nav>a { font-size:11px; }:where(#publicHome) .footer-contact address { font-size:10px; }
}
@media(max-width:760px) {
 :where(#publicHome) .footer { padding-top:36px; }:where(#publicHome) .footer-grid { grid-template-columns:1fr 1fr; gap:28px 22px; }:where(#publicHome) .footer-contact { grid-column:1/-1; }:where(#publicHome) .footer-contact>p { margin-top:13px; }:where(#publicHome) .footer-contact address { margin-top:12px; font-size:12px; }:where(#publicHome) .footer-phone { font-size:14px; }
 :where(#publicHome) .footer-title { font-size:16px; margin-bottom:9px; }:where(#publicHome) .footer nav>a { font-size:12px; min-height:44px; }:where(#publicHome) .footer-social>a { gap:8px; }:where(#publicHome) .social-mark { width:27px; height:27px; }:where(#publicHome) .footer-statement { grid-column:1/-1; padding-top:3px; }:where(#publicHome) .footer-statement>p { font-size:29px; }:where(#publicHome) .footer-statement>p br:first-of-type { display:none; }:where(#publicHome) .footer-statement>p>span { margin-right:8px; }:where(#publicHome) .footer-statement>a { margin-top:8px; font-size:12px; }
 :where(#publicHome) .footer-bottom { margin-top:23px; padding-block:18px; gap:8px 16px; font-size:10px; }:where(#publicHome) .footer-bottom>a { margin-left:0; }
}
#publicHome [id] { scroll-margin-top:100px; }
:where(#publicHome) [hidden] { display:none !important; }

:where(#publicHome) .home-text { display:contents; color:inherit; font:inherit; }
:where(#publicHome) .hero h1>.home-text { color:inherit; text-shadow:none; }
:where(#publicHome) .button>[data-home-trial-label] { font-size:inherit; }

/* Normal-size action labels meet AA on a consistent brand surface. */
:where(#publicHome) .primary { background:var(--public-home-action); }
:where(#publicHome) .primary:hover { background:var(--rose-700); }