:root{--bg:#fff7e8;--paper:#fffdf8;--ink:#213936;--muted:#63706d;--green:#286b5b;--green2:#42a66f;--gold:#f1b33b;--orange:#f47b42;--red:#e8505b;--blue:#3a7bd5;--lav:#9c6ade;--line:#ead9bb;--soft:#f7ead2;--shadow:0 18px 40px rgba(74,56,20,.12);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Aptos","Leelawadee UI","Noto Sans Thai",system-ui,sans-serif;background:radial-gradient(circle at top left,#fff0bf 0,#fff7e8 30%,#f3fbf0 100%);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer;border:0}.app-shell{width:min(1180px,96vw);margin:0 auto 36px;padding:18px 0 32px}.hero{display:grid;grid-template-columns:1fr 280px;gap:18px;align-items:stretch;margin:10px 0 18px;padding:28px;border-radius:34px;background:linear-gradient(135deg,#1f5a4d,#2c9a6c 55%,#f0a93a);color:white;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:auto -60px -120px auto;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.18)}.hero-copy{position:relative;z-index:1}.eyebrow{margin:0 0 8px;letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:800;opacity:.86}.hero h1{margin:0;font-size:clamp(26px,4vw,44px);line-height:1.05}.subtitle{font-size:17px;max-width:760px;line-height:1.55;margin:12px 0 16px}.quick-pills{display:flex;flex-wrap:wrap;gap:8px}.quick-pills span{padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:700;font-size:13px}.hero-card{position:relative;z-index:1;border-radius:24px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);padding:18px;display:flex;flex-direction:column;justify-content:center;gap:8px}.hero-card span{font-size:13px;opacity:.8}.hero-card strong{font-size:24px}.hero-card small{opacity:.9}.panel{background:rgba(255,253,248,.86);border:1px solid rgba(219,189,136,.7);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin:18px 0}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.section-kicker{margin:0 0 4px;color:var(--orange);font-size:12px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.panel h2{margin:0;color:var(--green);font-size:26px}.panel h3{margin:0 0 10px;color:var(--green);font-size:20px}.ghost-button,.secondary,.primary,.bonus{border-radius:16px;padding:12px 16px;font-weight:900;box-shadow:0 8px 16px rgba(55,70,45,.08)}.ghost-button{background:#fff;border:1px solid var(--line);color:var(--green)}.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff}.secondary{background:#fff7e8;border:1px solid var(--line);color:var(--green)}.bonus{background:#ffe1af;color:#7a4100;border:1px solid #f7c166}.button-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}.primary.warm{background:linear-gradient(135deg,var(--orange),var(--gold));color:#fff}.sync-note{margin:0 0 14px;padding:12px 14px;border-radius:18px;background:#fff7e8;border:1px solid var(--line);color:var(--green);font-weight:800;line-height:1.55}.chunk.testing{outline:3px solid rgba(255,255,255,.65)}.word.live{background:rgba(255,255,255,.25);border-radius:6px;padding:0 3px}
.profile-grid,.control-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.control-grid{grid-template-columns:repeat(4,1fr);margin-top:16px}.field,.range-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:14px}.field span,.range-card span{font-weight:900;color:var(--green)}.field input,.field textarea,.field select{border:1px solid #e6d6b8;border-radius:14px;padding:12px;background:#fffdf8;color:var(--ink);outline-color:var(--gold)}.field.full{margin-top:12px}.range-card strong{font-size:22px;color:var(--orange)}.range-card input{accent-color:var(--green)}.range-card small{color:var(--muted)}.script-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.script-card{position:relative;text-align:left;border-radius:22px;padding:15px;min-height:142px;background:linear-gradient(145deg,#fff,#fff6df);border:2px solid transparent;box-shadow:0 10px 18px rgba(83,67,22,.08);transition:.16s transform,.16s border}.script-card:hover{transform:translateY(-2px)}.script-card.active{border-color:var(--orange);box-shadow:0 0 0 5px rgba(244,123,66,.16)}.script-card .tag{display:inline-block;border-radius:999px;background:#e6f5eb;color:var(--green);font-size:12px;padding:4px 8px;font-weight:900}.script-card strong{display:block;margin:8px 0 4px;color:var(--green);font-size:17px}.script-card small{display:block;color:var(--muted);line-height:1.35}.script-card .emoji{position:absolute;right:12px;bottom:8px;font-size:34px}.custom-card{margin-top:14px;background:#fff9ec;border:1px dashed #d9b66b;border-radius:18px;padding:12px}.custom-card summary{font-weight:900;color:var(--green);cursor:pointer}.mode-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.mode{padding:10px 13px;border-radius:999px;background:#f4e5c8;color:#6b5736;font-weight:900}.mode.active{background:var(--green);color:white}.mini-metrics{display:flex;gap:8px;flex-wrap:wrap}.mini-metrics span{background:#f3f7f2;border:1px solid #dbe8da;border-radius:999px;padding:8px 10px;color:var(--muted)}.story-strip{display:grid;grid-template-columns:1.2fr 1.3fr 1fr;gap:10px;margin:12px 0}.story-strip div{background:#f8f0db;border:1px solid var(--line);border-radius:18px;padding:11px}.story-strip span{display:block;font-size:12px;text-transform:uppercase;font-weight:900;color:#9b6c21}.story-strip strong{display:block;margin-top:4px;color:var(--ink)}.prompter-wrap{position:relative;overflow:hidden;border-radius:30px;border:8px solid #283f3b;background:linear-gradient(180deg,#142522,#264d42);min-height:430px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), var(--shadow)}.ribbon{position:absolute;z-index:4;left:20px;top:16px;background:rgba(255,255,255,.16);color:#fff;border-radius:999px;padding:8px 12px;font-weight:900;font-size:14px}.prompter{height:430px;overflow:hidden;padding:126px 48px 150px;scroll-behavior:smooth}.placeholder{color:#fff;text-align:center;font-size:26px;margin-top:90px;opacity:.78}.chunk{font-size:38px;line-height:1.35;color:rgba(255,255,255,.48);padding:12px 18px;margin:12px 0;border-radius:20px;text-align:center;transition:.2s all}.chunk.done{color:rgba(255,255,255,.32)}.chunk.active{color:#fff;background:rgba(255,255,255,.14);transform:scale(1.04);box-shadow:0 8px 24px rgba(0,0,0,.18)}.chunk.upcoming{color:rgba(255,255,255,.62)}.word.done{color:#ffe58f;text-shadow:0 0 16px rgba(255,215,76,.55)}.focus-band{pointer-events:none;position:absolute;left:0;right:0;top:42%;height:110px;border-top:2px dashed rgba(255,226,126,.6);border-bottom:2px dashed rgba(255,226,126,.6);background:linear-gradient(90deg,rgba(255,208,77,.08),rgba(255,255,255,.06),rgba(255,208,77,.08))}.assessment-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.assessment-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px}.transcript{min-height:150px;max-height:260px;overflow:auto;background:#f8faf7;border-radius:16px;padding:14px;line-height:1.6;color:var(--ink)}.target{border-left:6px solid var(--gold)}.recognized{border-left:6px solid var(--blue)}.status-pill{padding:8px 12px;border-radius:999px;background:#fee8ca;color:#7a4100;font-weight:900}.score-grid,.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.score-card,.team-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;text-align:center}.score-card span,.team-card span{display:block;color:var(--muted);font-weight:800}.score-card strong,.team-card strong{display:block;color:var(--green);font-size:32px;margin-top:6px}.score-card.big{background:linear-gradient(135deg,#fff0bd,#e4f6e6)}.team-card{position:relative;overflow:hidden}.team-card:before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--team,#f1b33b)}.team-card .team-name{font-size:20px;color:var(--green);font-weight:1000}.teacher-note{color:var(--muted);margin-bottom:0}.mission-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mission-item{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.mission-item input{width:22px;height:22px;accent-color:var(--green)}.mission-item strong{color:var(--green)}.mission-item small{display:block;color:var(--muted);margin-top:3px}.footer{display:flex;justify-content:space-between;gap:12px;align-items:center;color:#54615e;font-size:13px;padding:8px 12px}.footer strong{color:var(--green)}dialog{border:0;border-radius:26px;max-width:620px;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.25);background:#fffdf8;color:var(--ink)}dialog::backdrop{background:rgba(13,38,34,.55)}dialog h2{color:var(--green);margin-top:0}dialog li{margin:8px 0}.confetti{pointer-events:none;position:fixed;inset:0;z-index:99;overflow:hidden}.confetti i{position:absolute;width:10px;height:16px;background:var(--c);top:-20px;animation:fall 1.6s linear forwards;border-radius:4px}@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}@media (max-width:900px){.hero{grid-template-columns:1fr}.profile-grid,.control-grid,.script-grid,.story-strip,.assessment-grid,.score-grid,.team-grid,.mission-list{grid-template-columns:1fr}.prompter{padding-left:20px;padding-right:20px}.chunk{font-size:32px}.footer{display:block;text-align:center}.panel-head{align-items:flex-start;flex-direction:column}.mini-metrics{width:100%}}@media print{body{background:white}.button-row,.setup-panel,.game-panel,.mission-panel{display:none}.panel{box-shadow:none;break-inside:avoid}}

/* Sync v3: separated assessment lane, following the original SCORM sample structure */
.assessment-stage{background:linear-gradient(135deg,#fff8e9,#edf8ed);border:1px solid var(--line);border-radius:26px;padding:16px;margin:16px 0;box-shadow:0 12px 26px rgba(84,67,22,.08)}
.assessment-stage-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.assessment-stage-head span{display:inline-block;color:var(--orange);font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;margin-bottom:3px}
.assessment-stage-head strong{display:block;color:var(--green);font-size:18px;line-height:1.35}
.assessment-metrics span{background:#fff;border-color:#e4d3ae;color:var(--muted)}
.assessment-prompter-wrap{position:relative;overflow:hidden;border-radius:26px;border:7px solid #31544d;background:linear-gradient(180deg,#12302b,#276454);min-height:330px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.assessment-prompter{height:330px;padding:98px 42px 126px;overflow:hidden;scroll-behavior:smooth}
.assessment-prompter .placeholder{font-size:23px;margin-top:62px}
.assessment-prompter .chunk{font-size:36px;margin:10px 0;padding:11px 18px}
.assessment-ribbon{font-size:13px;top:14px;background:rgba(255,224,142,.2)}
.assessment-focus{top:41%;height:96px;background:linear-gradient(90deg,rgba(241,179,59,.14),rgba(255,255,255,.08),rgba(241,179,59,.14))}
.assessment-grid{margin-top:14px}
@media (max-width:900px){.assessment-stage-head{flex-direction:column}.assessment-prompter{padding-left:20px;padding-right:20px}.assessment-prompter .chunk{font-size:30px}}