:root{font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif;color:#203d36;background:#f4f1e8;font-size:17px;line-height:1.65;--green:#24594d;--line:#cfd9cc;--ink:#203d36}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #91aa99;border-radius:12px;padding:.5rem .85rem;background:#fffdf7;color:var(--green);cursor:pointer;font-weight:650}button:hover:not(:disabled):not(.plot-handle){background:#e6efdf}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--green);color:white;border-color:var(--green)}button.primary:hover:not(:disabled){background:#173f36}button.quiet{background:transparent}button.danger{background:#8d3e34;color:#fff}.topbar{max-width:1160px;margin:auto;padding:18px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{color:var(--green);font-weight:800;text-decoration:none}.brand span{display:block;font-size:.72rem;font-weight:500;letter-spacing:.1em}main{max-width:1120px;margin:auto;padding:24px}.heading h1{font-size:clamp(1.8rem,5vw,2.9rem);letter-spacing:-.04em;line-height:1.2;margin:.3em 0}.heading>p:last-child{color:#5c6d61}.eyebrow{font-size:.77rem;letter-spacing:.12em;color:#5c7462;font-weight:800;margin:0 0 .4rem}.teacher-card{display:flex;align-items:end;border:1px solid #d4ddcd;background:#e9eedf;border-radius:22px;padding:20px 24px 0;margin:26px 0;overflow:hidden}.teacher-portrait{width:110px;height:180px;flex-shrink:0;overflow:hidden}.teacher-portrait img{width:110px;height:auto;display:block}.teacher-copy{display:grid;flex:1;min-width:0;padding:0 0 20px 24px;overflow-anchor:none}.guide-live,.guide-reserve{grid-area:1/1;min-width:0}.guide-reserve{visibility:hidden;pointer-events:none;user-select:none}.teacher-copy h2{font-size:1.18rem;margin:.2rem 0 .4rem}.teacher-copy p{margin:.2rem 0}.note{color:#5a6e62;font-size:.84rem;line-height:1.6}.steps{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.steps span{background:#e8e7dc;border-radius:30px;padding:6px 14px;font-size:.85rem}.steps .current{background:var(--green);color:#fff}.panel{background:#fffdf8;border:1px solid #d5dbcd;border-radius:20px;padding:26px;margin:20px 0;box-shadow:0 6px 20px #233d3506}.panel h2{font-size:1.3rem;line-height:1.4;margin:0 0 16px}.section-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}.badge{font-size:.8rem;padding:5px 12px;background:#eff2e7;border-radius:20px}.clock-card{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 18px;background:#f0f3e9;border-radius:14px}.clock-card strong{font-size:1.6rem;font-variant-numeric:tabular-nums}.clock-card small{font-size:1rem}.clock-card>span:last-child{font-size:.82rem;margin-left:auto}.track{width:100%;margin:10px 0}.track svg{display:block;width:100%;height:auto}.track-note{text-align:center;font-size:.86rem}.marker-key{border-bottom:3px solid #b75f24;font-weight:800;margin:0 .25rem}.play-controls,.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.play-controls{margin-top:16px}.reading-box{padding:18px;border:1px solid #d4ddcc;border-radius:14px;background:#f8f8ef;margin-top:18px}.reading-box>label{display:block;font-weight:700;margin-bottom:10px}input:not([type=checkbox]),select,textarea{border:1px solid #9bac9f;border-radius:9px;background:white;color:var(--ink);min-height:44px;padding:8px 12px;max-width:100%}#reading{width:180px}textarea{width:100%;resize:vertical}.feedback{min-height:1.65em;color:#795126;margin:10px 0 0;font-size:.92rem}.feedback.success{color:#216247}table{border-collapse:collapse;width:100%;margin:14px 0;font-variant-numeric:tabular-nums}th,td{text-align:left;padding:9px;border-bottom:1px solid #dce2d7}th{font-size:.82rem;color:#5c6b5f}.time-selector{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.time-selector button{min-width:54px}.time-selector button[aria-pressed=true]{background:var(--green);color:white}.plot-layout{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;align-items:start}.plot{position:relative;min-width:0;touch-action:pan-y;overflow:visible}.plot svg{width:100%;height:auto;display:block}.plot-handle{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;border:2px solid #356a5877;border-radius:50%;padding:0;background:#cde2bf22;touch-action:none;cursor:grab;z-index:2}.plot-handle.is-dragging{background:#e8d99b44;cursor:grabbing;border-color:#996d32}.plot-controls{display:flex;flex-direction:column;gap:10px;padding:14px;background:#f1f4e9;border-radius:14px}.plot-controls .inline{gap:6px}.selected-summary{font-weight:750;margin:0;font-size:.92rem;min-height:3.3em}.plot-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:7px;font-size:.78rem}.plot-list li{background:#f0f1e7;padding:5px 9px;border-radius:7px}.description-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0}.description-grid label{display:flex;flex-direction:column;gap:7px}.description-grid input,.description-grid select{width:100%}.reflection-label{display:block;margin:26px 0 0}#numeric-form{border-top:1px solid var(--line);margin-top:24px;padding-top:8px}.completion{background:#e7f0df;border-color:#aebf9b}.storage-panel{padding:20px 8px;font-size:.9rem}.storage-panel h2{font-size:1.1rem}footer{border-top:1px solid var(--line);padding:20px 0;font-size:.77rem;color:#637365}dialog{border:1px solid #a6b79f;border-radius:20px;max-width:540px;width:calc(100% - 28px);max-height:calc(100dvh - 32px);overflow:auto;padding:26px;color:var(--ink);background:#fffdf7}dialog::backdrop{background:#14271f88}dialog h2{margin-top:0}.ack{display:flex;align-items:start;gap:12px;margin:22px 0}.ack input{width:24px;height:24px;flex-shrink:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ba773b;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(max-width:700px){main{padding:16px}.topbar{padding:14px 16px}.brand{font-size:.85rem}.heading{padding-top:8px}.teacher-card{padding:16px 14px 0;gap:0}.teacher-portrait{width:72px;height:134px}.teacher-portrait img{width:78px}.teacher-copy{padding:0 0 16px 12px}.teacher-copy h2{font-size:1.05rem}.teacher-copy p:not(.eyebrow){font-size:.9rem}.panel{padding:18px 14px}.plot-layout{grid-template-columns:1fr}.plot-controls{display:grid;grid-template-columns:1fr 1fr}.plot-controls .selected-summary,.plot-controls .note,.plot-controls>label{grid-column:1/-1}.description-grid{grid-template-columns:1fr}.play-controls button{flex:1 1 135px}.clock-card{gap:10px;padding:10px}.clock-card>span:last-child{width:100%;margin:0}.steps span{font-size:.76rem;padding:6px 10px}th,td{padding:8px 4px;font-size:.85rem}.inline input{min-width:0}.time-selector{gap:6px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:400px){main#main{padding:2px}main#main #plot-panel{padding-inline:5px}}