:root {
  --ink:#0b1835; --ink-2:#173b6c; --paper:#f6f8fc; --white:#fff;
  --blue:#4f9cf9; --sky:#8bd6ff; --coral:#f97366; --gold:#f6c85f;
  --muted:#62708a; --line:#dfe5ef; --shadow:0 28px 70px rgba(17,39,79,.14);
}
*{box-sizing:border-box} html{scroll-behavior:smooth} [hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Noto Sans Thai","Leelawadee UI",Arial,sans-serif}
button,input,textarea{font:inherit} button{cursor:pointer} button:disabled{cursor:not-allowed}
.site-shell{min-height:100vh;background:radial-gradient(circle at 7% 14%,rgba(139,214,255,.24),transparent 24rem),radial-gradient(circle at 92% 88%,rgba(246,200,95,.15),transparent 22rem),var(--paper)}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,6vw,96px);border-bottom:1px solid rgba(11,24,53,.09);background:rgba(246,248,252,.9);backdrop-filter:blur(18px);position:relative;z-index:20}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}
.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;color:white;background:var(--ink);font-size:14px;font-weight:900;letter-spacing:-.05em;box-shadow:5px 5px 0 var(--gold)}
.brand>span:last-child{display:grid;line-height:1.1}.brand strong{font-size:15px}.brand small{margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.topbar-meta{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:650}.status-dot{width:9px;height:9px;border-radius:50%;background:#42b883;box-shadow:0 0 0 5px rgba(66,184,131,.12)}
.toast{position:fixed;z-index:100;top:98px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;width:min(560px,calc(100vw - 32px));padding:14px 18px;border:1px solid rgba(249,115,102,.3);border-radius:14px;background:#fff5f3;color:#8a2d28;box-shadow:0 14px 40px rgba(67,20,18,.18);font-size:14px;font-weight:650}
.toast>span{display:grid;place-items:center;width:25px;height:25px;flex:0 0 auto;border-radius:50%;background:var(--coral);color:white;font-weight:900}.toast p{margin:0}
.welcome-layout{width:min(1320px,calc(100% - 48px));min-height:calc(100vh - 150px);margin:0 auto;display:grid;grid-template-columns:1.07fr .93fr;align-items:center;gap:clamp(48px,7vw,110px);padding:64px 0 72px}
.hero-copy{position:relative}.hero-copy:before{content:"S + V";position:absolute;right:0;top:-70px;font-size:clamp(68px,9vw,126px);font-weight:900;color:rgba(79,156,249,.075);letter-spacing:-.09em;transform:rotate(-5deg);pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--ink-2);font-size:12px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.eyebrow>span{width:31px;height:3px;background:var(--coral);border-radius:99px}.eyebrow.light{color:var(--sky)}
.hero-copy h1{max-width:780px;margin:22px 0 24px;font-size:clamp(54px,6.2vw,92px);line-height:.98;letter-spacing:-.065em;font-weight:850}.hero-copy h1 em{display:block;color:var(--coral);font-family:Georgia,serif;font-size:.72em;font-weight:500;letter-spacing:-.04em}
.hero-lead{max-width:670px;margin:0;color:var(--muted);font-size:clamp(17px,1.4vw,21px);line-height:1.75}
.feature-row{display:flex;margin:38px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.feature-row>div{min-width:130px;padding:18px 32px 18px 0;display:grid;grid-template-columns:auto auto;column-gap:10px;border-right:1px solid var(--line);margin-right:32px}.feature-row>div:last-child{border-right:0}.feature-row span{grid-row:1/3;color:var(--coral);font-size:10px;font-weight:850}.feature-row strong{font-size:27px;line-height:1}.feature-row small{margin-top:4px;color:var(--muted);font-size:12px}
.learning-strip{border-left:4px solid var(--blue);padding:4px 0 4px 18px}.learning-strip span{color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.learning-strip p{margin:7px 0 0;font-size:14px;font-weight:650}.learning-strip b{margin:0 8px;color:var(--coral)}
.start-card{position:relative;overflow:hidden;padding:clamp(28px,4vw,52px);border:1px solid rgba(11,24,53,.09);border-radius:32px;background:white;box-shadow:var(--shadow)}
.card-accent{position:absolute;top:0;right:0;padding:19px 25px;border-radius:0 0 0 24px;background:var(--gold);font-family:Georgia,serif;font-size:17px;font-weight:800}.card-accent span{color:var(--coral);margin:0 4px}.step-chip{display:inline-block;padding:7px 10px;border-radius:6px;background:#e8f3ff;color:var(--ink-2);font-size:10px;font-weight:850;letter-spacing:.13em}.card-heading h2{margin:18px 0 8px;font-size:clamp(28px,3vw,38px);letter-spacing:-.04em}.card-heading p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.student-form{display:grid;gap:18px;margin-top:30px}.student-form label,.correction-card label,.create-card label{display:grid;gap:8px}.student-form label>span,.correction-card label>span,.create-card label>span{font-size:12px;font-weight:800}
input,textarea{width:100%;border:1px solid #cfd8e7;border-radius:13px;outline:0;background:#fbfcfe;color:var(--ink);transition:border .16s,box-shadow .16s,background .16s}input{height:52px;padding:0 15px}textarea{padding:18px;line-height:1.7;resize:vertical}input:focus,textarea:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 4px rgba(79,156,249,.13)}input::placeholder,textarea::placeholder{color:#9aa7ba}
.primary-button{min-height:54px;display:flex;align-items:center;justify-content:center;gap:16px;border:0;border-radius:13px;padding:0 23px;background:var(--ink);color:white;box-shadow:0 10px 24px rgba(11,24,53,.18);font-weight:800;transition:transform .16s,box-shadow .16s,background .16s}.primary-button:hover{transform:translateY(-2px);background:var(--ink-2);box-shadow:0 14px 30px rgba(11,24,53,.22)}.primary-button:disabled{opacity:.65;transform:none}.primary-button span{color:var(--gold);font-size:20px}.primary-button.compact{min-width:170px;min-height:48px}
.integrity-note{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.shield{flex:0 0 auto;width:28px;height:32px;display:grid;place-items:center;border-radius:14px 14px 18px 18px;background:#e7f7ef;color:#188253;font-size:13px;font-weight:900}.integrity-note p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.integrity-note strong{display:block;margin-bottom:2px;color:var(--ink)}
.practice-layout{min-height:calc(100vh - 84px);display:grid;grid-template-columns:300px minmax(0,1fr)}.practice-sidebar{padding:40px 28px;display:flex;flex-direction:column;background:var(--ink);color:white}.sidebar-kicker{margin:0 0 9px;color:var(--sky);font-size:9px;font-weight:850;letter-spacing:.15em}.practice-sidebar h2{margin:0;font-size:24px;letter-spacing:-.035em}
.stage-nav{display:grid;gap:8px;margin:48px 0}.stage-item{width:100%;display:flex;gap:13px;align-items:center;padding:13px;border:0;border-radius:13px;background:transparent;color:#a9b6ca;text-align:left}.stage-item.active{background:rgba(255,255,255,.1);color:white}.stage-item.done{color:#b9ead5}.stage-item:disabled{opacity:.55}.stage-number{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:10px;font-size:12px;font-weight:900}.stage-item.active .stage-number{background:var(--gold);border-color:var(--gold);color:var(--ink)}.stage-item.done .stage-number{background:#1b7655;border-color:#1b7655;color:white}.stage-item>span:last-child{display:grid;gap:3px}.stage-item strong{font-size:14px}.stage-item small{font-size:10px}
.sidebar-progress{margin-top:auto;padding:18px 0;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}.sidebar-progress>div:first-child{display:flex;justify-content:space-between;font-size:11px}.sidebar-progress strong{color:var(--gold)}.progress-track{height:6px;margin:10px 0;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.15)}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sky),var(--gold));transition:width .22s}.sidebar-progress small{color:#8797b1;font-size:10px}.student-mini{display:flex;align-items:center;gap:11px;margin-top:25px}.student-mini>span{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--coral);font-size:12px;font-weight:850}.student-mini>div{display:grid;gap:3px;min-width:0}.student-mini strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.student-mini small{color:#8797b1;font-size:10px}
.exercise-panel{min-width:0;padding:0 clamp(28px,5vw,76px) 60px}.exercise-toolbar{min-height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.session-info{display:flex;gap:8px;font-size:11px}.session-info span{color:var(--muted)}.security-tools{display:flex;align-items:center;gap:18px;color:var(--muted);font-size:11px}.security-tools button{border:1px solid var(--line);border-radius:9px;padding:8px 11px;background:white;color:var(--ink);font-size:10px;font-weight:750}.security-tools button:disabled{color:#188253;background:#e8f7ef}.event-count strong{color:#188253}.event-count.warning strong{color:var(--coral)}
.part-header{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding:44px 0 28px}.part-label{color:var(--coral);font-size:10px;font-weight:900;letter-spacing:.16em}.part-header h1{margin:9px 0 8px;font-size:clamp(30px,3.4vw,48px);letter-spacing:-.045em;line-height:1.1}.part-header p{margin:0;color:var(--muted);font-size:13px}.part-counter{min-width:95px;text-align:right}.part-counter strong{font-size:36px}.part-counter>span{color:var(--muted);font-size:18px}.part-counter small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.question-list{display:grid;gap:16px}.question-card{margin:0;padding:24px;border:1px solid var(--line);border-radius:18px;background:white;box-shadow:0 9px 22px rgba(22,48,91,.045)}.question-card legend{width:100%;display:flex;align-items:flex-start;gap:14px;padding:0;font-size:15px;font-weight:800;line-height:1.5}.question-card legend>span,.correction-prompt>span{width:31px;height:31px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;background:#e9f4ff;color:var(--ink-2);font-size:10px;font-weight:900}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}.choice{min-height:52px;display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;color:#34445f;background:#fbfcfe;font-size:12px;line-height:1.45;cursor:pointer;transition:border .15s,background .15s,transform .15s}.choice:hover{transform:translateY(-1px);border-color:#a7c9f3;background:#f4f9ff}.choice.selected{border-color:var(--blue);background:#edf6ff;color:var(--ink)}.choice input{position:absolute;width:1px;height:1px;opacity:0}.radio-mark{width:17px;height:17px;flex:0 0 auto;border:2px solid #b3bfd0;border-radius:50%;background:white}.choice.selected .radio-mark{border:5px solid var(--blue)}
.correction-card{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(320px,1.2fr);align-items:center;gap:30px}.correction-prompt{display:flex;align-items:flex-start;gap:13px}.correction-prompt>div{display:grid;gap:5px}.correction-prompt small{color:var(--coral);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.correction-prompt strong{font-family:Georgia,serif;font-size:18px;line-height:1.4}
.create-card{max-width:900px;padding:clamp(28px,4vw,48px);border-radius:24px;background:white;border:1px solid var(--line);box-shadow:var(--shadow)}.prompt-badge{display:inline-block;padding:7px 10px;border-radius:7px;background:#fff2ef;color:#b5483e;font-size:9px;font-weight:900;letter-spacing:.13em}.create-card h2{max-width:650px;margin:21px 0 10px;font-family:Georgia,serif;font-size:clamp(27px,3.2vw,43px);line-height:1.15;font-weight:500}.create-card>p{margin:0 0 28px;color:var(--muted);font-size:14px;line-height:1.7}.writing-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.writing-meta span{padding:6px 9px;border-radius:7px;background:#eef3f9;color:var(--muted);font-size:9px;font-weight:750}.rubric-preview{margin-top:26px;padding:17px 19px;border-left:4px solid var(--gold);background:#fffbef}.rubric-preview strong{font-size:11px}.rubric-preview p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.exercise-actions{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:20px;margin-top:28px}.exercise-actions>span{color:var(--muted);font-size:10px;text-align:center}.secondary-button{min-height:46px;border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);font-size:12px;font-weight:750}.secondary-button:disabled{opacity:.45}
.result-page{min-height:calc(100vh - 84px);background:white}.result-hero{min-height:335px;display:flex;align-items:center;justify-content:space-between;gap:50px;padding:48px clamp(28px,8vw,130px);background:var(--ink);color:white;overflow:hidden}.result-hero h1{margin:18px 0 12px;font-family:Georgia,serif;font-size:clamp(38px,5vw,70px);font-weight:500;line-height:1.02;letter-spacing:-.04em}.result-hero p{margin:0;color:#aebbd0}.score-orbit{position:relative;width:230px;height:230px;flex:0 0 auto;display:grid;align-content:center;justify-items:center;border:2px solid var(--sky);border-radius:50%}.score-orbit:before,.score-orbit:after{content:"";position:absolute;border-radius:50%}.score-orbit:before{inset:-34px;border:1px solid rgba(139,214,255,.16)}.score-orbit:after{width:12px;height:12px;top:-40px;background:var(--gold);box-shadow:0 0 0 7px rgba(246,200,95,.13)}.score-orbit span{color:var(--sky);font-size:10px;font-weight:850;letter-spacing:.15em;text-transform:uppercase}.score-orbit strong{font-size:84px;line-height:.95}.score-orbit small{color:#aebbd0;font-size:13px}
.result-grid{width:min(1100px,calc(100% - 48px));margin:-36px auto 0;padding-bottom:70px;display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;position:relative;z-index:3}.result-summary,.score-breakdown{padding:32px;border:1px solid var(--line);border-radius:22px;background:white;box-shadow:var(--shadow)}.result-chip{display:inline-block;padding:7px 11px;border-radius:99px;background:#e9f7f0;color:#17734f;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.result-summary h2{margin:18px 0 6px;font-size:25px;letter-spacing:-.035em}.result-summary>p{margin:0 0 24px;color:var(--muted);font-size:13px}.result-summary dl{display:grid;gap:0;margin:0 0 24px}.result-summary dl>div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line)}.result-summary dt{color:var(--muted);font-size:11px}.result-summary dd{margin:0;font-size:11px;font-weight:750;text-align:right}.privacy-note{display:block;margin-top:10px;color:var(--muted);font-size:9px;text-align:center}
.breakdown-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.breakdown-header span{font-size:16px;font-weight:850}.breakdown-header strong{color:var(--coral);font-size:24px}.breakdown-row{display:grid;grid-template-columns:135px 1fr 55px;align-items:center;gap:14px;padding:13px 0}.breakdown-row>div:first-child{display:grid;gap:3px}.breakdown-row>div:first-child strong{font-size:12px}.breakdown-row small{color:var(--muted);font-size:9px}.breakdown-row>strong{font-size:15px;text-align:right}.mini-track{height:8px;overflow:hidden;border-radius:99px;background:#edf0f5}.mini-track span{display:block;height:100%;border-radius:inherit}.mini-track .blue{background:var(--blue)}.mini-track .coral{background:var(--coral)}.mini-track .gold{background:var(--gold)}.writing-feedback{margin-top:22px;padding:20px;border-radius:14px;background:#f7f9fc}.writing-feedback>div:first-child{display:flex;align-items:center;gap:9px;margin-bottom:12px}.writing-feedback>div:first-child span{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--gold);font-size:11px;font-weight:900}.writing-feedback>div:first-child strong{font-size:12px}.writing-feedback p{display:flex;justify-content:space-between;margin:0;padding:7px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px}.writing-feedback p:last-child{border-bottom:0}.writing-feedback p strong{color:var(--ink)}
footer{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(24px,6vw,96px);border-top:1px solid var(--line);color:var(--muted);background:#f6f8fc;font-size:10px}footer p{margin:0;color:var(--ink);font-weight:700}
@media(max-width:980px){.welcome-layout{grid-template-columns:1fr;max-width:720px;padding-top:52px}.start-card{max-width:620px}.practice-layout{grid-template-columns:1fr}.practice-sidebar{padding:24px;display:grid;grid-template-columns:1fr auto;gap:20px}.stage-nav{grid-column:1/-1;grid-template-columns:repeat(3,1fr);margin:8px 0 0}.sidebar-progress{display:none}.student-mini{margin:0}.practice-sidebar .stage-item{padding:9px}.exercise-panel{padding-left:28px;padding-right:28px}.result-grid{grid-template-columns:1fr;max-width:720px}}
@media(max-width:700px){.topbar{height:72px;padding:0 18px}.topbar-meta{display:none}.welcome-layout{width:min(100% - 32px,620px);padding:40px 0 52px}.hero-copy h1{font-size:51px}.hero-copy:before{display:none}.feature-row>div{min-width:0;width:33.33%;padding-right:12px;margin-right:12px}.start-card{border-radius:23px}.card-accent{font-size:13px;padding:14px 17px}.practice-sidebar{grid-template-columns:1fr}.student-mini{display:none}.stage-nav{gap:5px}.stage-item{justify-content:center}.stage-item>span:last-child{display:none}.exercise-panel{padding:0 16px 42px}.exercise-toolbar{align-items:flex-start;gap:15px;padding:14px 0}.security-tools{align-items:flex-end;flex-direction:column;gap:7px}.part-header{align-items:flex-start}.part-counter{min-width:60px}.choice-grid{grid-template-columns:1fr}.correction-card{grid-template-columns:1fr;gap:18px}.exercise-actions{grid-template-columns:1fr 1fr}.exercise-actions>span{grid-column:1/-1;grid-row:2}.exercise-actions .primary-button{min-width:0}.result-hero{padding:52px 28px 90px}.score-orbit{width:150px;height:150px}.score-orbit strong{font-size:55px}.result-grid{width:calc(100% - 32px)}.breakdown-row{grid-template-columns:95px 1fr 45px;gap:9px}footer{align-items:flex-start;flex-direction:column;padding-top:18px;padding-bottom:18px}}
@media(max-width:520px){.brand small{display:none}.hero-copy h1{font-size:43px}.hero-lead{font-size:16px}.feature-row>div{grid-template-columns:1fr}.feature-row span{display:none}.feature-row strong{font-size:23px}.learning-strip p{font-size:12px}.start-card{padding:25px 20px}.result-hero{display:grid}.score-orbit{margin:10px auto 0}.part-header h1{font-size:31px}.part-counter{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}