:root{--navy:#28398a;--yellow:#ffc928;--ink:#15204b;--muted:#64708f;--line:#e7eaf3}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;background:#fff;color:var(--ink);font-family:'Noto Sans Thai','DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer}.site-header{width:min(100% - 48px,1100px);height:9vh;min-height:58px;max-height:74px;margin:auto;display:flex;align-items:center;border-bottom:1px solid var(--line)}.brand img{display:block;width:142px;height:44px;object-fit:contain}main{height:calc(100vh - clamp(58px,9vh,74px) - 38px);display:grid;grid-template-rows:minmax(0,1fr) auto}.hero{width:min(100% - 48px,920px);min-height:0;margin:0 auto;padding:clamp(14px,2.5vh,30px) 0 clamp(10px,2vh,22px);text-align:center}.computer-icon{position:relative;width:clamp(120px,16vh,190px);height:clamp(86px,11.5vh,135px);margin:0 auto clamp(7px,1.2vh,12px)}.computer-frame{position:relative;width:100%;height:calc(100% - 23px);padding:7px;border:5px solid #1f2860;border-radius:11px 11px 7px 7px;background:#111a43;box-shadow:0 10px 20px #28398a2e}.camera{position:absolute;z-index:2;top:2px;left:50%;width:4px;height:4px;border-radius:50%;background:#aeb8dd;transform:translateX(-50%)}.computer-screen{overflow:hidden;width:100%;height:100%;border-radius:3px;background:#f6f7fc}.screen-top{display:flex;gap:3px;align-items:center;height:16px;padding:0 6px;background:#e6e9f4}.screen-top i{width:4px;height:4px;border-radius:50%;background:#b9c1dc}.screen-top i:first-child{background:#ffc928}.screen-content{position:relative;height:calc(100% - 16px);padding:12px;background:linear-gradient(135deg,#f9faff,#eef1fb)}.screen-content span{display:block;height:6px;margin-bottom:6px;border-radius:99px;background:#c8d0ea}.screen-content span:first-child{width:47%;background:var(--navy)}.screen-content span:nth-child(2){width:71%}.screen-content span:nth-child(3){width:59%}.screen-content b{position:absolute;right:13px;bottom:12px;width:44px;height:32px;border-radius:4px;background:var(--yellow);box-shadow:inset 0 0 0 6px #fff5c9}.computer-stand{position:absolute;bottom:7px;left:calc(50% - 14px);width:28px;height:14px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#1d275d,#3d4d94)}.computer-base{position:absolute;bottom:0;left:calc(50% - 48px);width:96px;height:8px;border-radius:9px 9px 4px 4px;background:linear-gradient(180deg,#3f4f95,#1d275d)}.badge{display:inline-flex;padding:4px 10px;border-radius:999px;background:#eff1fb;color:var(--navy);font:700 .62rem 'DM Sans',sans-serif;letter-spacing:.1em}.hero h1{margin:clamp(7px,1vh,12px) 0 clamp(7px,1vh,12px);color:var(--navy);font-size:clamp(2.35rem,5.2vw,4.4rem);line-height:1.07;letter-spacing:-.075em}.hero h1 span{display:inline-block;white-space:nowrap;color:#d39100;text-shadow:0 2px 0 #fff3c1}.skills{margin:0 0 clamp(10px,1.5vh,17px);color:var(--muted);font-size:.92rem;line-height:1.65}.skills b{color:var(--navy);font-family:'DM Sans','Noto Sans Thai',sans-serif;font-size:.78rem}.primary-cta{border:0;border-radius:15px;padding:15px 25px;background:var(--yellow);box-shadow:0 12px 24px #ffc92866;color:#342800;font:700 1rem 'DM Sans','Noto Sans Thai',sans-serif;transition:.18s transform,.18s box-shadow}.hero .primary-cta{min-width:265px;padding:18px 32px;font-size:1.12rem;box-shadow:0 15px 29px #ffc92880}.primary-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px #ffc92892}.primary-cta:focus-visible,.google-button:focus-visible,.modal-close:focus-visible{outline:3px solid var(--navy);outline-offset:3px}.free-note{margin:6px 0 0;color:var(--muted);font-size:.72rem}.features{width:min(100% - 48px,1100px);margin:0 auto clamp(7px,1.2vh,12px);display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.features article{min-height:0;padding:clamp(12px,1.8vh,18px);border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 8px 18px #28398a0c}.features span{color:#aeb8d5;font:700 .65rem 'DM Sans',sans-serif}.features h2{margin:clamp(8px,1.2vh,12px) 0 4px;color:var(--navy);font-size:.94rem}.features p{margin:0;color:var(--muted);font-size:.75rem;line-height:1.5}footer{height:38px;padding:10px;text-align:center;color:var(--muted);font-size:.66rem}dialog{width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:30px;border:0;border-radius:18px;box-shadow:0 25px 70px #10215a55;color:var(--ink)}dialog::backdrop{background:#14215a8f}.modal-close{position:absolute;top:13px;right:16px;border:0;background:transparent;color:var(--navy);font-size:1.65rem}.modal-close~h2{margin:14px 0 7px;color:var(--navy);font-size:1.7rem}.modal-close~p:not(.badge){margin:0 0 22px;color:var(--muted);line-height:1.6}.modal-cta{width:100%;margin-top:16px;line-height:1.5}.modal-cta span{float:right}.modal-close~form label:not(.consent){display:grid;gap:7px;color:var(--navy);font-size:.88rem;font-weight:700}.modal-close~form input[type=email]{width:100%;padding:13px;border:1px solid #c9d0e2;border-radius:9px;background:#fff;color:var(--ink);font-size:1rem}.consent{display:flex;gap:9px;align-items:flex-start;margin-top:16px;color:var(--muted);font-size:.78rem;line-height:1.5}.consent input{margin-top:3px}#emailMessage{min-height:19px;margin:7px 0 0;color:#b42318;font-size:.78rem}.divider{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:20px 0;color:var(--muted);font-size:.75rem}.divider:before,.divider:after{height:1px;background:var(--line);content:''}.google-button{display:flex;align-items:center;justify-content:center;width:100%;padding:14px 25px;border:1px solid #c9d0e2;border-radius:15px;background:#fff;color:var(--navy);font:700 1rem 'DM Sans','Noto Sans Thai',sans-serif;line-height:1.5;text-decoration:none}.google-button b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:#fff1bd;color:#b36000}.google-button~small{display:block;margin-top:16px;color:var(--muted);font-size:.75rem;text-align:center}.learner-identity{margin-left:auto;margin-right:12px;color:var(--muted);font-size:.8rem;font-weight:600}.learner-my-results{margin-right:14px;color:var(--navy);font-size:.78rem;font-weight:700;text-decoration:none}.learner-signout{border:0;background:transparent;color:var(--navy);font-size:.78rem;font-weight:700;text-decoration:underline}#learnerAuthMessage{min-height:19px;margin:7px 0 0;color:#b42318;font-size:.78rem}@media(max-width:650px){.site-header,.hero,.features{width:min(100% - 28px,900px)}.site-header{height:8vh;min-height:50px}.brand img{width:120px;height:38px}main{height:calc(100vh - max(50px,8vh) - 30px);grid-template-rows:minmax(0,1fr) auto}.hero{padding:7px 0}.computer-icon{width:96px;height:70px;margin-bottom:3px}.hero h1{margin:5px 0;font-size:clamp(1.62rem,8.7vw,2.3rem)}.hero h1 span{font-size:.76em}.badge{font-size:.5rem}.skills{margin-bottom:8px;font-size:.72rem;line-height:1.45}.skills b{font-size:.61rem}.hero .primary-cta{min-width:0;padding:15px 19px;font-size:1rem}.free-note{margin-top:4px;font-size:.62rem}.features{gap:5px;margin-bottom:5px}.features article{padding:7px;border-radius:8px}.features span{font-size:.48rem}.features h2{margin:4px 0 2px;font-size:.62rem}.features p{font-size:.51rem;line-height:1.35}footer{height:30px;padding:8px;font-size:.55rem}}
/* Minimal decorative accents: intentionally abstract, never an interface frame. */
.hero{position:relative;isolation:isolate;background:radial-gradient(circle at 12% 28%,#fff8db 0 5px,transparent 6px),radial-gradient(circle at 88% 72%,#edf0fc 0 7px,transparent 8px)}.hero:before,.hero:after{position:absolute;z-index:-1;pointer-events:none;content:'';opacity:.65}.hero:before{top:12%;left:8%;width:92px;height:92px;border-radius:50%;background:radial-gradient(circle at 34% 33%,#fff2b0 0 7%,#ffdf68 8% 18%,transparent 19%)}.hero:after{right:9%;bottom:17%;width:78px;height:54px;background-image:radial-gradient(#ced5ee 1.4px,transparent 1.4px);background-size:10px 10px}.hero .primary-cta{position:relative;min-width:clamp(290px,32vw,370px);padding:clamp(20px,2.6vh,27px) clamp(36px,4vw,48px);border:2px solid #fff0a3;font-size:clamp(1.15rem,1.9vw,1.4rem);box-shadow:0 18px 0 #d39e0c,0 27px 38px #ffc9288c}.hero .primary-cta:hover{box-shadow:0 14px 0 #d39e0c,0 30px 42px #ffc9289c;transform:translateY(4px)}@media(max-height:760px){.computer-icon{display:none}.hero{padding-top:clamp(12px,2vh,20px)}}

/* Instructions are deliberately a calm, readable document—not a fixed landing viewport. */
html:has(body.instructions-page){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}.instructions-page{height:100dvh;min-height:100dvh;overflow-y:auto;overflow-x:hidden}.instructions-page .site-header{height:82px;min-height:82px;max-height:82px}.instructions-page .instruction-main{display:block;width:min(100% - 48px,760px);height:auto;min-height:0;margin:0 auto;padding:80px 0 72px}.instructions-page .instruction-main h1{margin:18px 0 20px;color:var(--navy);font-size:clamp(2rem,5vw,3.35rem);line-height:1.2;letter-spacing:-.045em}.instructions-page .instruction-lead{max-width:680px;margin:0;color:var(--muted);font-size:1.08rem;line-height:1.9}.instructions-page .instruction-main ul{display:grid;gap:14px;margin:34px 0 38px;padding:0;list-style:none}.instructions-page .instruction-main li{position:relative;padding:17px 20px 17px 47px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);line-height:1.65;box-shadow:0 8px 20px #28398a08}.instructions-page .instruction-main li:before{position:absolute;top:22px;left:20px;width:10px;height:10px;border-radius:50%;background:var(--yellow);content:''}.instructions-page .instruction-main .primary-cta{display:inline-block;padding:18px 29px;text-decoration:none}.instructions-page footer{height:auto;padding:27px}@media(max-width:650px){.instructions-page .site-header{height:70px;min-height:70px}.instructions-page .instruction-main{width:min(100% - 36px,760px);padding:48px 0 52px}.instructions-page .instruction-main h1{font-size:2rem}.instructions-page .instruction-lead{font-size:1rem;line-height:1.8}.instructions-page .instruction-main ul{margin:26px 0 30px;gap:10px}.instructions-page .instruction-main li{padding:14px 15px 14px 40px}.instructions-page .instruction-main li:before{top:20px;left:17px}.instructions-page footer{height:auto;font-size:.65rem}}