:root{color:#213b34;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#f5f7f3;font-family:system-ui,-apple-system,Segoe UI,Noto Sans TC,Microsoft JhengHei,sans-serif}body{min-width:320px;margin:0}*{box-sizing:border-box}.app{max-width:760px;margin:auto;padding:24px 20px 110px}header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:36px;display:flex}.eyebrow{letter-spacing:.08em;color:#52746c;margin:0 0 8px;font-size:.8rem}h1{margin:0;font-size:1.6rem}h2{margin:0 0 16px;font-size:1.25rem}h3{margin:0 0 8px;font-size:1.5rem}p{line-height:1.75}section{background:#fff;border:1px solid #d9e3de;border-radius:16px;padding:24px}form{gap:18px;margin-top:24px;display:grid}label{gap:8px;font-size:.95rem;display:grid}input,textarea{box-sizing:border-box;color:#213b34;width:100%;font:inherit;background:#fff;border:1px solid #96aaa3;border-radius:8px;padding:12px;font-size:16px}textarea{resize:vertical;min-height:86px}button{color:#fff;min-height:44px;font:inherit;cursor:pointer;background:#22664f;border:1px solid #0000;border-radius:8px;padding:10px 18px;font-weight:600}button:disabled{opacity:.45;cursor:not-allowed}.secondary{color:#275240;background:#fff;border-color:#8aa397;margin-left:8px}.quiet{color:#22664f;background:0 0;padding:8px}.help{color:#566960;font-size:.86rem}.score-input{grid-template-columns:3em 1fr 72px;align-items:center;gap:12px;margin:12px 0;display:grid}.score-input input[type=range]{accent-color:#22664f;padding:0}.score-input input[type=number]{padding:8px}fieldset{border:1px solid #d9e3de;border-radius:8px;padding:12px}legend{padding:0 8px}.section-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.section-heading h2{margin:0}.items{margin:20px 0 0;padding:0;list-style:none}.items li{overflow-wrap:anywhere;border-top:1px solid #e0e8e3;padding:22px 0}.items li:last-child{padding-bottom:0}.items p{margin:6px 0}.zhuyin{color:#446158}.scores{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px;font-size:.8rem;display:grid}.scores span{text-align:center;background:#f0f5f2;border-radius:6px;padding:8px}.scores b{margin-top:4px;font-size:1rem;display:block}.connection{color:#566960;justify-content:space-between;align-items:center;margin-top:14px;font-size:.85rem;display:flex}.error{color:#8b2828;background:#fff2f0;border-radius:8px;padding:14px}.message{color:#225541;background:#e8f4eb;border-radius:8px;padding:14px}.note{white-space:pre-wrap;overflow-wrap:anywhere}nav{padding:8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom));background:#fff;border-top:1px solid #d9e3de;justify-content:center;display:flex;position:fixed;bottom:0;left:0;right:0}nav button{color:#54665e;background:0 0;border-radius:6px;width:170px}nav button[aria-current=page]{color:#184d39;background:#e8f1eb}:focus-visible{outline-offset:3px;outline:3px solid #d08c25}@media (width<=480px){.app{padding:20px 14px 100px}section{padding:20px 16px}header{margin-bottom:26px}header .quiet{font-size:.8rem}h1{font-size:1.4rem}.secondary{width:100%;margin:10px 0 0}form>button,section>button:not(.quiet){width:100%}.scores{gap:5px}.scores span{padding:8px 3px}nav button{padding:8px;font-size:.85rem}}