:root{--ink:#173744;--muted:#667d84;--paper:#f7f3ea;--card:#fff;--teal:#197f80;--teal-dark:#125b64;--mint:#e2f3ea;--gold:#d99d42;--peach:#fff0df;--line:#dce6e1;--red:#b65a54;--shadow:0 18px 50px rgba(27,62,67,.09)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","Noto Sans TC",Arial,sans-serif}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,76px);background:#fff;border-bottom:1px solid #e7ece8;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:var(--ink);color:#fff;font:900 23px/1 Georgia}.brand-mark span{color:#f4c56e;font-size:12px}.brand strong,.brand small{display:block}.brand strong{font-size:17px}.brand small{margin-top:2px;color:#7b8b90;font-size:10px}.demo-badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:99px;background:#eef7f3;color:#3d7069;font-size:11px;font-weight:800}.demo-badge i{width:8px;height:8px;border-radius:50%;background:#50b58e}.shell{width:min(1180px,calc(100% - 36px));margin:28px auto 80px}.hero{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:35px clamp(26px,4vw,48px);border-radius:25px;background:radial-gradient(circle at 92% 10%,#327f80 0,#1a5360 38%,#173744 78%);color:#fff;box-shadow:var(--shadow)}.eyebrow{color:#5ca9a0;font-size:10px;font-weight:900;letter-spacing:.17em}.hero .eyebrow{color:#9ee0d0}.hero h1{max-width:780px;margin:9px 0;font:900 clamp(32px,4.7vw,58px)/1.08 Georgia,"Noto Serif TC",serif}.hero h1 em{display:block;color:#f5cd79;font-style:normal}.hero p{max-width:700px;margin:13px 0 0;color:#d0e4e4;font-size:13px;line-height:1.75}.level-picker{flex:none;min-width:155px;color:#bdd8d7;font-size:11px;font-weight:800}.level-picker select{display:block;width:100%;margin-top:7px;border:1px solid #6d9699;border-radius:11px;background:#fff;color:var(--ink);padding:11px;font-weight:800}.student-draft{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;margin-top:18px;padding:20px 25px;border:1px solid #e0e7e2;border-radius:18px;background:#fff}.student-draft h2{margin:5px 0 0;font-size:20px}.student-draft blockquote{margin:0;padding-left:20px;border-left:3px solid #e6b665;color:#425d66;font:700 15px/1.55 Georgia,serif}.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:24px 0 13px}.step{display:flex;align-items:center;gap:9px;border:0;border-radius:12px;background:#e9eeeb;color:#77888b;padding:10px;text-align:left}.step b{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#d9e2de;font-size:10px}.step span{font-size:11px;font-weight:900}.step:disabled{opacity:.48}.step.is-done{background:#e3f2e9;color:#36745e}.step.is-done b{background:#bfe3cf}.step.is-active{background:var(--ink);color:#fff}.step.is-active b{background:#f0c36d;color:#473616}.workspace{display:grid;grid-template-columns:245px minmax(0,1fr);gap:14px;align-items:start}.locked-panel,.stage{border:1px solid #dfe7e2;border-radius:20px;background:#fff;box-shadow:var(--shadow)}.locked-panel{position:sticky;top:94px;padding:23px}.locked-panel h2{margin:7px 0 16px;font-size:20px}.locked-list{display:grid;gap:8px}.locked-list .empty{color:#91a0a0;font-size:11px;line-height:1.6}.lock-chip{display:flex;gap:7px;align-items:flex-start;padding:10px;border-radius:10px;background:#eaf6ef;color:#28634f;font-size:11px;font-weight:800;line-height:1.45}.lock-chip:before{content:"🔒"}.meaning-map{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.meaning-map h3{margin:0 0 10px;font-size:14px}.meaning-map dl{margin:0}.meaning-map dl div{padding:8px 0;border-top:1px dashed #e4ebe7}.meaning-map dt{color:#849295;font-size:9px;font-weight:900;letter-spacing:.1em}.meaning-map dd{margin:2px 0 0;font-size:11px;font-weight:800}.stage{min-height:580px;padding:clamp(24px,4vw,45px)}.panel{display:none}.panel.is-visible{display:block;animation:rise .28s ease}@keyframes rise{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}.stage-number{display:inline-block;padding:6px 9px;border-radius:7px;background:#eef5f2;color:#2f8178;font-size:9px;font-weight:900;letter-spacing:.12em}.panel>h2{margin:11px 0 7px;font:900 clamp(27px,3.3vw,39px)/1.15 Georgia,"Noto Serif TC",serif}.lead{margin:0 0 22px;color:var(--muted);font-size:12px;line-height:1.75}.intent-card{position:relative;padding:24px 28px;border-radius:17px;background:#f1f8f4}.intent-card p{margin:0;font:800 19px/1.65 Georgia,"Noto Serif TC",serif}.quote-mark{position:absolute;top:5px;right:17px;color:#b9d9cd;font:60px/1 Georgia}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.check-grid label{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:11px}.check-grid input{width:17px;height:17px;accent-color:var(--teal)}.check-grid b,.check-grid span{display:block}.check-grid b{font-size:10px;color:#76898e}.check-grid span{font-size:12px;font-weight:800}.action-row{display:flex;justify-content:flex-end;gap:9px;margin-top:25px}.action-row button,.check-answer{border:0;border-radius:10px;padding:12px 17px;font-weight:900}.primary{background:var(--ink);color:#fff}.primary:disabled{opacity:.4}.secondary{background:#eef2ef;color:#47606a}.add-piece{background:#fff0d3;color:#72551f}.current-issue{display:grid;grid-template-columns:120px 1fr;gap:7px 14px;padding:16px;border-radius:13px;background:var(--peach)}.current-issue b{font-size:10px;color:#8c6337}.current-issue code{font-weight:900}.current-issue span{grid-column:2;color:#845f46;font-size:11px;line-height:1.55}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.choice-card,.structure-card{position:relative;border:2px solid #e2e9e5;border-radius:14px;background:#fff;color:var(--ink);padding:16px;text-align:left}.choice-card:hover,.structure-card:hover{border-color:#83c4b7}.choice-card.is-selected,.structure-card.is-selected{border-color:var(--teal);background:#edf9f4;box-shadow:0 0 0 3px #d6eee6}.choice-card.recommended:after,.structure-card.recommended:after{content:"推薦";position:absolute;right:11px;top:11px;color:#b17b2c;font-size:9px;font-weight:900}.difficulty{display:inline-block;margin-bottom:9px;padding:4px 7px;border-radius:99px;background:#eef1ef;color:#708084;font-size:8px;font-weight:900;letter-spacing:.08em}.difficulty.natural{background:#e4f4eb;color:#32745d}.difficulty.advanced{background:#f8edda;color:#8c632e}.choice-card h3{margin:0 0 5px;font-size:17px}.choice-card p{margin:0;color:#6b7e83;font-size:10px;line-height:1.55}.choice-card small{display:block;margin-top:12px;color:#378177;font-family:monospace}.text-button{border:0;background:none;color:#307f78;padding:14px 0 7px;font-size:11px;font-weight:900}.advanced-drawer{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:11px;border-radius:12px;background:#f5f6f1}.advanced-drawer button{border:1px solid #e1dfd4;border-radius:9px;background:#fff;padding:11px;text-align:left}.advanced-drawer b,.advanced-drawer span{display:block}.advanced-drawer b{color:#765523}.advanced-drawer span{margin-top:4px;color:#7d898a;font-size:9px}.custom-answer{margin-top:15px;padding:15px;border-radius:13px;background:#f4f7f6}.custom-answer label{display:block;margin-bottom:7px;font-size:11px;font-weight:900}.custom-answer>div{display:flex;gap:7px}.custom-answer input{flex:1;min-width:0;border:1px solid #d4dfdb;border-radius:9px;padding:11px}.custom-answer button{border:0;border-radius:9px;background:#dceae5;color:#2b665c;font-weight:900}.custom-answer p{margin:9px 0 0;font-size:10px;line-height:1.55}.custom-answer p.good{color:#247354}.custom-answer p.warn{color:#9a6335}.selection-summary{margin-top:13px;padding:12px;border-left:4px solid var(--teal);background:#eef8f4;font-size:11px;line-height:1.6}.structure-list{display:grid;gap:10px}.structure-card{display:grid;grid-template-columns:175px 1fr;gap:5px 16px;width:100%}.structure-card div{grid-row:1/3}.structure-card div span,.structure-card div b,.structure-card div small{display:block}.structure-card div span{color:#5a9c93;font-size:8px;font-weight:900;letter-spacing:.11em}.structure-card div b{margin:6px 0;font-size:15px}.structure-card div small{color:#7b898c;font-size:9px;line-height:1.45}.structure-card p{margin:0;color:#344e58;font:700 12px/1.55 Georgia,serif}.structure-card code{color:#2b776d;font-size:10px}.builder{display:flex;flex-wrap:wrap;gap:8px;min-height:62px;padding:17px;border:1px dashed #c8d8d2;border-radius:14px;background:#fbfcfa}.sentence-piece{opacity:.25;transform:translateY(6px);padding:10px 12px;border-radius:9px;background:#edf2f1;color:#587079;font-size:11px;font-weight:800}.sentence-piece.is-added{opacity:1;transform:none;background:#e4f4eb;color:#215f4d;transition:.28s}.sentence-piece.is-new{box-shadow:0 0 0 3px #f1ca7a}.live-sentence{margin-top:16px;padding:22px;border-radius:16px;background:var(--ink);color:#fff}.live-sentence span,.final-card>span,.pattern-box>span,.transfer-prompt>span{color:#8fd3c6;font-size:9px;font-weight:900;letter-spacing:.14em}.live-sentence p{min-height:31px;margin:10px 0 0;font:800 18px/1.55 Georgia,serif}.builder-note{margin-top:12px;color:#667e84;font-size:10px}.final-card{position:relative;padding:23px 100px 23px 23px;border-radius:16px;background:var(--ink);color:#fff}.final-card p{margin:10px 0 0;font:800 21px/1.55 Georgia,serif}.final-card button{position:absolute;right:16px;top:16px;border:1px solid #64828a;border-radius:8px;background:#294b56;color:#fff;padding:7px 9px;font-size:9px}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.review-grid article{display:flex;gap:10px;padding:14px;border:1px solid var(--line);border-radius:11px}.review-grid i{display:grid;place-items:center;flex:none;width:25px;height:25px;border-radius:50%;background:#dff3e7;color:#26734f;font-style:normal;font-weight:900}.review-grid b,.review-grid span{display:block}.review-grid b{font-size:12px}.review-grid span{margin-top:3px;color:#718489;font-size:9px;line-height:1.5}.version-switch{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:14px;border-radius:11px;background:#f4f6f2}.version-switch b,.version-switch span{display:block}.version-switch b{font-size:12px}.version-switch span{margin-top:3px;color:#758486;font-size:9px}.version-switch button{border:0;border-radius:8px;background:#dfeae5;color:#356a61;padding:8px 10px;font-size:9px;font-weight:900}.two-sentence{margin-top:8px;padding:14px;border-left:4px solid var(--gold);background:#fff7e8;font:700 12px/1.6 Georgia,serif}.pattern-box,.target-pattern{margin-top:14px;padding:15px;border-radius:11px;background:#eef7f3}.pattern-box p{margin:8px 0 0;color:#2a685f;font:800 13px/1.55 monospace}.transfer-prompt{padding:20px;border-radius:14px;background:#fff3dd}.transfer-prompt span{color:#a9762c}.transfer-prompt p{margin:9px 0 0;font:800 17px/1.55 Georgia,"Noto Serif TC",serif}.target-pattern b,.target-pattern code{display:block}.target-pattern b{font-size:10px}.target-pattern code{margin-top:7px;color:#2b7067;font-weight:800}.answer-label{display:block;margin:18px 0 6px;font-size:11px;font-weight:900}.panel textarea{width:100%;resize:vertical;border:1px solid #d5dfda;border-radius:11px;padding:13px;font:600 13px/1.6 inherit}.check-answer{margin-top:9px;background:var(--teal);color:#fff}.transfer-feedback{margin-top:13px;padding:16px;border-radius:12px;font-size:11px;line-height:1.65}.transfer-feedback.good{background:#e5f5eb;color:#2a694f}.transfer-feedback.warn{background:#fff0e4;color:#8c5938}
button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #f1c461;outline-offset:2px}
@media(max-width:900px){.steps{grid-template-columns:repeat(3,1fr)}.workspace{grid-template-columns:1fr}.locked-panel{position:static}.locked-list{grid-template-columns:repeat(2,1fr)}.structure-card{grid-template-columns:1fr}.structure-card div{grid-row:auto}.hero{align-items:start}.review-grid{grid-template-columns:1fr}}
@media(max-width:620px){.topbar{height:auto;padding:13px 18px}.brand small{display:none}.demo-badge{font-size:9px}.shell{width:min(100% - 22px,1180px);margin-top:14px}.hero{display:block;padding:26px 22px}.hero h1{font-size:34px}.level-picker{display:block;margin-top:22px}.student-draft{grid-template-columns:1fr;padding:18px}.student-draft blockquote{padding-left:13px}.steps{display:flex;overflow:auto;padding-bottom:4px}.step{min-width:112px}.workspace{display:block}.locked-panel{margin-bottom:11px}.locked-list{grid-template-columns:1fr}.stage{padding:24px 18px;min-height:0}.check-grid,.choice-grid,.advanced-drawer,.review-grid{grid-template-columns:1fr}.current-issue{grid-template-columns:1fr}.current-issue span{grid-column:1}.custom-answer>div{display:grid}.structure-card{display:block}.structure-card p{margin:12px 0}.final-card{padding:21px}.final-card button{position:static;margin-top:12px}.action-row{justify-content:stretch;flex-wrap:wrap}.action-row button{flex:1}.version-switch{align-items:flex-start;gap:12px}}

/* Step 1 input and Step 3 sentence map */
.mode-switch{display:inline-flex;gap:5px;padding:5px;border-radius:12px;background:#e9efec}.mode-switch button{border:0;border-radius:9px;background:transparent;color:#677b80;padding:10px 14px;font-size:11px;font-weight:900}.mode-switch button.is-active{background:#fff;color:var(--teal-dark);box-shadow:0 3px 12px rgba(30,70,70,.1)}
.draft-entry{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fbfcfa}.draft-entry>label,.random-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:8px}.draft-entry label b,.random-title b{font-size:12px}.draft-entry label span{color:#7a8a8d;font-size:9px}.draft-entry textarea{background:#fff}.random-entry>p{margin:0 0 15px;padding:17px;border-radius:11px;background:#fff3dd;color:#57421f;font:800 16px/1.6 Georgia,"Noto Serif TC",serif}.random-title button{border:0;border-radius:8px;background:#e8f3ef;color:#2d756b;padding:7px 10px;font-size:9px;font-weight:900}.analyse-button{margin-top:12px;border:0;border-radius:10px;background:var(--teal);color:#fff;padding:12px 17px;font-weight:900}.check-grid i{display:block;margin-top:3px;font-style:normal}
.structure-library-toggle{display:block}.structure-library{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:5px;padding:14px;border-radius:14px;background:#f3f7f4}.structure-library .library-intro{grid-column:1/-1;padding:4px 3px 9px}.library-intro b,.library-intro span,.structure-library article b,.structure-library article span,.structure-library article small{display:block}.library-intro span{margin-top:4px;color:#6c7f83;font-size:10px;line-height:1.55}.structure-library article{padding:13px;border:1px solid #dce6e1;border-radius:11px;background:#fff}.structure-library article b{font-size:12px}.structure-library article span{margin-top:7px;color:#24766d;font:800 10px/1.5 monospace}.structure-library article small{margin-top:6px;color:#75878a;font-size:9px;line-height:1.45}
.sentence-piece{display:grid;gap:5px;max-width:100%}.sentence-piece small{color:#6e8587;font-size:8px;letter-spacing:.06em}.sentence-piece b{font-size:11px;line-height:1.4}.sentence-piece.is-added small{color:#3c7d6c}.builder-note{padding:11px 13px;border-radius:10px;background:#f3f7f4;line-height:1.55}.builder-note b{color:#276c62;font-size:10px}
@media(max-width:620px){.mode-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.structure-library{grid-template-columns:1fr}.draft-entry>label{align-items:flex-start;flex-direction:column;gap:3px}}