@font-face{font-family:StandardKai;src:url('standard-kai-0.woff2') format('woff2');font-display:swap;unicode-range:U+20-5F62}@font-face{font-family:StandardKai;src:url('standard-kai-1.woff2') format('woff2');font-display:swap;unicode-range:U+5F64-73C2}@font-face{font-family:StandardKai;src:url('standard-kai-2.woff2') format('woff2');font-display:swap;unicode-range:U+73C3-88BE}@font-face{font-family:StandardKai;src:url('standard-kai-3.woff2') format('woff2');font-display:swap;unicode-range:U+88C0-FF40}@font-face{font-family:StandardKai;src:url('standard-kai-4.woff2') format('woff2');font-display:swap;unicode-range:U+FF41-2546E}
:root{--green:#216b5b;--ink:#233d39;--line:#d8e2d8;--paper:#f5f5ed;--soft:#eaf3e9;--board:clamp(270px,calc(100dvh - 390px),370px)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'標楷體','DFKai-SB','BiauKai',StandardKai,serif;font-size:22px;line-height:1.45;-webkit-text-size-adjust:100%}button,a{ -webkit-tap-highlight-color:transparent;touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer;border:2px solid var(--line);background:white;border-radius:16px;min-height:60px;padding:10px 20px;line-height:1.2}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:4px solid #d4922e;outline-offset:3px}button[aria-pressed=true],button[aria-current=true]{border-color:var(--green);background:var(--soft);color:#175546}.primary{background:var(--green);border-color:var(--green);color:white}.page{max-width:1280px;margin:auto;padding:20px 24px 12px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.brand{display:flex;gap:12px;align-items:center}.mark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--green);color:white;font-size:30px;flex-shrink:0}h1{font-size:28px;margin:0;line-height:1.3}.role{font-size:16px;color:#64766b}.chip{font-size:17px;color:#21614f;background:#e6efe4;padding:9px 14px;border-radius:30px;text-align:center}.demo{font-size:15px;color:#7d6338;background:#fcf5e6;border-radius:10px;padding:9px 14px;margin:0 0 16px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px}.teacher-layout{display:grid;grid-template-columns:285px 1fr;gap:20px;align-items:start}.current-label{font-size:18px;margin:0 0 12px;color:#607464}.current-image{width:100%;height:170px;object-fit:contain;background:#f4f6f0;border-radius:14px}.current-word{font-size:34px;line-height:1.3;display:block;text-align:center;color:#1d5d4e;overflow-wrap:anywhere;margin:14px 0 8px}.current-hint{font-size:17px;text-align:center;margin:0 0 16px;color:#607464}.teacher-links{display:grid;gap:10px}.link-button{display:flex;align-items:center;justify-content:center;min-height:60px;border-radius:14px;padding:10px;text-decoration:none;color:var(--ink);border:2px solid var(--line);font-size:20px}.link-button.primary{color:white;border-color:var(--green)}.status-detail{font-size:16px;color:#54705e;margin:14px 0 0;min-height:24px}.choose-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:18px}.choose-head h2{font-size:25px;margin:0}.choose-head p{font-size:17px;margin:0;color:#66796b}.filter-tabs{display:flex;gap:10px;margin-bottom:16px}.filter-tabs button{flex:1;font-size:21px;min-height:58px}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.word-choice{min-height:78px;display:flex;align-items:center;gap:12px;font-size:25px;text-align:left;padding:10px 14px}.word-choice img{width:56px;height:50px;object-fit:cover;border-radius:8px;background:#f1f4ef;flex-shrink:0}.word-choice .selected-mark{margin-left:auto;font-size:17px}.word-choice[aria-current=true]{background:var(--green);border-color:var(--green);color:white}.notice{font-size:17px;color:#366b52;margin:12px 0 0;min-height:25px}.teacher-info{font-size:16px;color:#607266;margin-top:16px}.teacher-info summary{min-height:48px;padding:12px 0;cursor:pointer}.teacher-info p{margin:6px 0}.smallprint{font-size:12px;color:#788575;text-align:center;margin:12px 0 0}.student-page .topbar{margin-bottom:14px}.student-layout{display:grid;grid-template-columns:255px minmax(0,1fr);gap:18px;align-items:start}.word-card{text-align:center;padding:22px 18px}.picture{width:100%;height:180px;object-fit:contain;background:#f4f6f0;border-radius:14px}.word{font-size:42px;color:#1c584a;line-height:1.3;margin:18px 0 10px;overflow-wrap:anywhere}.example{font-size:21px;color:#607464;margin:0 0 22px}.read-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px}.word-lock{font-size:17px;color:#697d6a;margin:20px 0 0}.practice{padding:18px 22px}.workhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.workhead h2{font-size:24px;margin:0}.progress{font-size:18px;color:#5d7363}.modes{display:flex;gap:12px}.modes button{flex:1;min-height:58px}.practice-middle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}.instruction{font-size:18px;color:#687b6b;margin:0;white-space:nowrap}.char-nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.char-nav button{min-width:56px;min-height:56px;padding:6px 12px;font-size:26px}.char-nav button[aria-current=true]{background:var(--green);color:white}.board-wrap{width:min(100%,clamp(270px,calc(100dvh - 410px),350px));margin:auto}.board{position:relative;width:100%;aspect-ratio:1;background:#fffef9;border:3px solid #b8ccbf;border-radius:16px;overflow:hidden;touch-action:none}.grid-line{position:absolute;pointer-events:none}.grid-line.h{width:100%;top:50%;border-top:1px dashed #a3bcaa}.grid-line.v{height:100%;left:50%;border-left:1px dashed #a3bcaa}.ghost{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(220px,calc(100dvh - 450px),300px);line-height:1;color:#c6d3c7;pointer-events:none;user-select:none}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.actions{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:12px;margin-top:14px}.actions button{min-height:60px;padding:10px;font-size:21px}.feedback{font-size:18px;color:#216b5b;text-align:center;margin:8px 0 0;min-height:0}.feedback:empty{display:none}.round-action{display:block;margin:12px auto 0;min-height:60px}.student-note{font-size:14px;text-align:center;color:#738171;margin:10px 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1150px){.teacher-layout{grid-template-columns:310px 1fr}.word-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.student-layout{grid-template-columns:290px 1fr}.picture{height:220px}}
@media(min-width:700px) and (orientation:portrait){.page{padding:24px}.student-layout{grid-template-columns:1fr}.word-card{display:grid;grid-template-columns:170px 1fr 100px;gap:0 20px;text-align:left;align-items:center;padding:18px 22px}.picture{height:150px;grid-row:1/4}.word{font-size:44px;margin:0 0 8px}.example{margin:0;font-size:22px}.read-btn{grid-column:3;grid-row:1/4;min-height:92px;flex-direction:column;padding:8px}.word-lock{grid-column:2;font-size:16px;margin:8px 0 0}.board-wrap{width:min(100%,360px)}.ghost{font-size:290px}.practice-middle{margin:16px 0}.practice{padding:22px}.actions{margin-top:18px}.teacher-layout{grid-template-columns:245px 1fr}.teacher-layout .card{padding:18px}.current-image{height:160px}.word-choice{font-size:23px;min-height:90px;padding:10px}.word-choice img{width:42px;height:42px}.filter-tabs{gap:8px}.filter-tabs button{padding:8px}.choose-head{display:block}.choose-head p{margin-top:6px}.word-grid{gap:10px}.selected-mark{display:none}}
@media(max-width:699px){.page{padding:16px}.topbar{align-items:flex-start}.chip{font-size:14px;padding:8px}h1{font-size:23px}.role{font-size:14px}.teacher-layout,.student-layout{grid-template-columns:1fr}.teacher-layout>.card:first-child{display:grid;grid-template-columns:90px 1fr;gap:8px 14px}.current-label{grid-column:1/3;margin:0}.current-image{grid-row:2/5;height:90px}.current-word{font-size:29px;margin:0;text-align:left}.current-hint{margin:0;text-align:left}.teacher-links{grid-column:1/3;grid-template-columns:1fr 1fr}.status-detail{grid-column:1/3;margin:0}.choose-head{display:block}.choose-head p{margin-top:4px}.word-choice{font-size:21px;min-height:78px;padding:8px}.word-choice img{width:42px;height:42px}.word-grid{gap:10px}.filter-tabs button{font-size:20px;padding:10px}.word-card{display:grid;grid-template-columns:95px 1fr 65px;gap:6px 12px;text-align:left;padding:16px}.picture{height:95px;grid-row:1/4}.word{font-size:30px;margin:0}.example{font-size:18px;margin:0}.read-btn{grid-column:3;grid-row:1/4;min-height:76px;padding:8px}.read-btn span{display:none}.word-lock{grid-column:2;font-size:14px;margin:0}.practice{padding:16px}.practice-middle{flex-direction:column;gap:8px}.char-nav{gap:6px}.char-nav button{min-width:50px;min-height:54px;font-size:24px}.board-wrap{width:min(100%,330px)}.ghost{font-size:270px}.actions{gap:8px}.actions button{font-size:19px}.selected-mark{display:none}}
@media(prefers-reduced-motion:no-preference){button{transition:background .12s,border-color .12s}}

.student-note{display:none}.chip{max-width:48%}

.selected-mark{display:none}.word-choice.long-word{font-size:21px}

.student-page .board-wrap{width:min(100%,clamp(260px,calc(100dvh - 440px),328px))}@media(min-width:700px) and (orientation:portrait){.student-page .board-wrap{width:min(100%,340px)}}