:root{font-family:ui-sans-serif,system-ui,-apple-system,"Noto Sans TC","Microsoft JhengHei",sans-serif;color:#16324c;background:#eef3f7;font-synthesis:none;--navy:#102e49;--teal:#087e8b;--amber:#ffbf4b;--line:#d7e1ea}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid transparent;border-radius:10px;font-weight:700;transition:background .12s,transform .12s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #078bca;outline-offset:3px}button,input,textarea{touch-action:manipulation}h1,h2,h3,p{margin:0}h2{font-size:1.4rem;line-height:1.35}p{line-height:1.65}button.primary,.primary{background:var(--amber);color:#19344a;padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:14px;width:100%;font-size:1.06rem}.subtle{background:#f0f4f8;border-color:#d7e1e9;color:#244864;padding:9px 15px}.topbar{height:88px;padding:14px max(24px,calc((100% - 1400px)/2));background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}.brand-icon{display:grid;place-items:center;background:var(--navy);color:var(--amber);font-size:1.3rem;width:47px;height:47px;border-radius:14px;transform:rotate(-5deg)}.brand h1{font-size:1.38rem;letter-spacing:.07em}.brand p{font-size:.86rem;color:#62768a}.top-actions{display:flex;gap:10px}main{max-width:1440px;margin:auto;padding:22px 24px 16px}.mission-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:20px}.mission-nav button{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border-color:var(--line);padding:10px 13px;color:#546a7e;font-size:.94rem}.mission-nav .mission-number{width:30px;height:30px;display:grid;place-items:center;flex-shrink:0;background:#eaf0f5;border-radius:8px;font-size:.85rem}.mission-nav button[aria-current=true]{background:var(--navy);color:#fff;border-color:var(--navy)}.mission-nav button[aria-current=true] .mission-number{background:#36536a;color:var(--amber)}.mission-nav button.done .mission-number{color:#fff;background:#07877e}.brief{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-bottom:20px}.brief p{color:#536a7e;margin-top:7px;font-size:1rem}.kicker{display:block;color:#087e8b;font-size:.86rem;font-weight:800;letter-spacing:.08em;margin-bottom:6px}.target{text-align:right;flex-shrink:0;padding-left:20px;border-left:2px solid #c6d7e3}.target span{display:block;font-size:.85rem;color:#5f7385;margin-bottom:5px}.target strong{font-size:1.25rem;color:#096f7c}.workspace{display:grid;grid-template-columns:minmax(0,1.78fr) minmax(340px,1fr);gap:22px;align-items:start}.theatre{background:var(--navy);color:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 22px #102e4912}.stage-top{display:flex;align-items:center;gap:12px;padding:11px 18px;min-height:54px}.stage-label{font-size:.85rem;color:#b7c8d6}.stage-label b{color:#fff;margin-left:8px}.stage-top #actorName{margin-left:auto;font-size:.92rem;font-weight:700}.stage-tool{color:#dce9f1;background:#28465e;padding:4px 11px;font-size:.85rem;min-height:34px}.stage-wrap{position:relative;background:#c9ebf2;aspect-ratio:1000/660;overflow:hidden}canvas{display:block;width:100%;height:100%}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#c9ebf2;font-weight:700;color:#173b54}.loading[hidden]{display:none}.stage-caption{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);max-width:94%;padding:8px 17px;background:#17394be8;color:#fff;font-size:1rem;border-radius:50px;text-align:center;line-height:1.45;white-space:normal;width:max-content}.transport{display:flex;gap:10px;align-items:center;padding:16px 18px 5px;flex-wrap:wrap}.play-control{color:#122f48;background:var(--amber);padding:9px 17px;min-width:137px}.icon-control{background:#2a4963;color:#fff;min-width:44px;font-size:1.45rem}.speed-label{display:flex;gap:8px;align-items:center;font-size:.86rem;color:#d0e0ec;margin-left:auto}select{padding:6px 9px;border:1px solid #4b697f;color:#fff;border-radius:8px;background:#264761;min-height:40px}#clock{color:#becfdc;font-size:.84rem;font-variant-numeric:tabular-nums;min-width:77px;text-align:right}.scrubber{padding:8px 18px 14px}input[type=range]{width:100%;accent-color:var(--amber);height:25px;cursor:pointer}.step-nav{display:flex;justify-content:space-between}.step-nav button{font-size:.85rem;min-height:33px;padding:2px 4px;background:transparent;color:#bfdae9}.storyboard{padding:17px 18px 19px;border-top:1px solid #36526a}.storyboard-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.storyboard h3{font-size:.95rem}.storyboard-title span{font-size:.8rem;color:#b6c8d9}#timeline{margin:0;padding:0;display:flex;gap:8px;list-style:none;flex-wrap:wrap}#timeline li{flex:1;min-width:125px;padding:11px;border:1px solid #3c576e;border-radius:9px;color:#e3edf4;font-size:.89rem;background:#203e57}#timeline li.active{background:#ffe1a0;color:#1a3b53;border-color:var(--amber)}#timeline li small{display:block;font-size:.8rem;opacity:.82;margin-top:5px}#timeline .empty-step{background:transparent;color:#bdcddc;border-style:dashed}.script-panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:23px;box-shadow:0 5px 20px #173e5b05}.panel-heading{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;margin-bottom:21px}.take-mark{font-size:.76rem;letter-spacing:.08em;color:#678096;font-weight:700}.take-mark b{background:#e8f1f5;border-radius:5px;padding:4px 6px;margin-left:4px}.script-panel>label{display:block;font-weight:700;font-size:.94rem;margin-bottom:9px}textarea{width:100%;resize:vertical;min-height:126px;border:2px solid #c9d9e4;border-radius:11px;padding:13px;color:#19384f;background:#f8fbfd;font-size:1.12rem;line-height:1.85}textarea::placeholder{color:#768b9b}.entry-meta{display:flex;justify-content:space-between;gap:10px;font-size:.76rem;color:#6c7f8e;margin:7px 0 17px}.feedback{padding:14px 15px;background:#eff6fa;border-left:4px solid #749aaf;border-radius:8px;margin-top:18px;color:#355970}.feedback strong{font-size:.97rem}.feedback p{font-size:.9rem;margin-top:5px;white-space:pre-line;overflow-wrap:anywhere}.feedback.success{background:#eaf7f2;border-color:#108977;color:#136152}.feedback.warning{background:#fff4df;border-color:#d49229;color:#765018}.feedback-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between;margin:4px 0 10px}.text-button{color:#476c83;background:transparent;font-size:.84rem;padding:5px 0;min-height:37px}.help{border-top:1px solid var(--line);padding-top:13px;margin-top:12px}.help summary{font-weight:700;font-size:.94rem;cursor:pointer;min-height:35px}.help p{font-size:.87rem;color:#5d7487;margin:6px 0 10px}.hint-actions{display:flex;gap:8px}.hint-button{font-size:.84rem;background:#e9f2f7;color:#2e5872;padding:6px 12px;min-height:37px}.word-chips{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0 1px}.word-chips button{background:#fff;border:1px solid #c6dbe7;color:#225776;padding:6px 10px;font-size:.86rem;min-height:35px;font-weight:500}.word-chips button:hover{background:#edf7fc}.completion{margin-top:15px;background:#e6f5ec;border-radius:11px;padding:17px;color:#155e48}.completion p{font-size:.9rem;margin:7px 0 12px}footer{display:flex;justify-content:space-between;gap:14px;color:#6b8193;font-size:.81rem;margin:20px 1px 4px}dialog{border:0;border-radius:20px;padding:30px;max-width:540px;width:calc(100% - 30px);max-height:90dvh;color:#183a53;box-shadow:0 22px 80px #06284444}dialog::backdrop{background:#051d33b3}dialog h2{margin-bottom:13px}dialog p{margin-bottom:14px}dialog .small{font-size:.86rem;color:#58738b;margin-top:12px}dialog form{position:absolute;right:12px;top:10px}.close-dialog{font-size:1.5rem;min-width:40px;min-height:40px;background:transparent;color:#48677e}.avatar-choices{display:flex;gap:12px;margin:20px 0}.avatar-choices button{flex:1;background:#e6f1f7;border-color:#bfd8e8;color:#225774;padding:13px}.teacher-actions{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0 24px}.check{display:flex;align-items:center;gap:10px;line-height:1.5}.check input{width:20px;height:20px;accent-color:#167d91}#teacherNotes{padding-left:20px;font-size:.92rem;line-height:1.8;overflow-wrap:anywhere}#teacherNotes li{margin-bottom:10px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 30px);background:#113851;color:#fff;border:1px solid #5e8097;box-shadow:0 8px 30px #07243d33;padding:13px 20px;border-radius:12px;z-index:20;font-size:.95rem;text-align:center}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}body.zoomed{overflow:hidden}body.zoomed .theatre{position:fixed;inset:12px;z-index:10;max-width:1100px;margin:auto;overflow:auto}body.zoomed .stage-wrap{max-height:calc(100dvh - 260px);aspect-ratio:auto}body.zoomed canvas{object-fit:contain}.theatre,.script-panel{min-width:0}
@media(min-width:1500px){main{padding-top:28px}.stage-wrap{max-height:565px}}
@media(max-width:1080px){.workspace{grid-template-columns:minmax(0,1.35fr) minmax(310px,1fr);gap:16px}.script-panel{padding:18px}.mission-nav button{font-size:.85rem;gap:7px;padding:9px}.mission-nav .mission-number{width:25px;height:25px}.speed-label{margin-left:0}#clock{margin-left:auto}.transport{padding:12px 12px 4px;gap:8px}.brief h2{font-size:1.25rem}}
@media(max-width:820px){.topbar{height:76px;padding:12px 16px}main{padding:16px}.mission-nav{display:flex;overflow-x:auto;padding-bottom:5px;gap:8px;margin-bottom:12px}.mission-nav button{flex:0 0 auto;min-height:47px}.mission-nav .mission-number{width:25px;height:25px}.brief{gap:12px;margin-bottom:16px}.brief p{font-size:.93rem}.target{padding-left:13px}.target strong{font-size:1.03rem}.workspace{grid-template-columns:1fr}.stage-wrap{max-height:490px}.script-panel{padding:20px}.transport{padding:12px 16px 5px}.speed-label{margin-left:auto}#clock{margin-left:0}.storyboard{padding:14px 16px}.stage-caption{font-size:.9rem;bottom:9px}.top-actions{gap:7px}.top-actions button{font-size:.86rem;padding:7px 10px}.entry-meta{font-size:.82rem}.word-chips button{min-height:40px}.script-panel>label{font-size:1rem}.help p{font-size:.94rem}}
@media(max-width:460px){.brand h1{font-size:1.12rem}.brand p{font-size:.75rem}.brand-icon{width:36px;height:36px;font-size:1rem;border-radius:10px}.brand{gap:8px}.topbar{padding:10px 12px}.top-actions button{font-size:.8rem;min-height:40px;padding:6px 8px}main{padding:13px 10px}.brief{align-items:flex-start}.brief p{font-size:.9rem}.brief h2{font-size:1.16rem}.target{max-width:108px}.target strong{font-size:.93rem;line-height:1.6}.target span{font-size:.76rem}.stage-top{padding:9px 11px;gap:7px}.stage-top #actorName{font-size:.84rem}.stage-tool{font-size:.76rem;padding:3px 8px}.transport{gap:7px;padding:12px 11px 4px}.play-control{min-width:126px;padding:8px 11px;font-size:.93rem}.speed-label{font-size:.79rem;gap:5px}.speed-label select{padding:5px}.transport #clock{width:100%;font-size:.8rem;line-height:1;margin:4px 0 0}.stage-caption{font-size:.81rem;padding:6px 11px}.script-panel{padding:18px 15px}.storyboard #timeline li{min-width:115px}.entry-meta{font-size:.76rem}footer{display:block;font-size:.78rem;line-height:1.7}footer span{margin-left:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}