:root{color-scheme:light;--ink:#26322c;--muted:#708076;--line:#e6e9df;--green:#47745e;--deep:#294d3b;--cream:#f7f7f1;--card:#fff;--sage:#e6eee5;--accent:#dfb989;font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);min-height:100vh;padding-bottom:135px}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #e2a558;outline-offset:3px}.preview-bar{height:34px;background:#263b2d;color:#f4f7ed;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;letter-spacing:.06em}.preview-dot{width:7px;height:7px;border-radius:50%;background:#b7d6a9}.app-shell{max-width:520px;margin:auto;min-height:calc(100vh - 34px)}.topbar{height:83px;display:flex;align-items:center;padding:0 24px;gap:11px}.brand-mark{width:39px;height:39px;border-radius:13px;background:var(--deep);color:white;display:grid;place-items:center;font-size:23px;font-weight:700}.brand-copy{display:flex;flex-direction:column;gap:1px}.brand-copy strong{font-size:15px;letter-spacing:.04em}.brand-copy small{font-size:10px;color:var(--muted);letter-spacing:.1em}.help-button{margin-left:auto;border:1px solid #d9dfd3;background:#fff;color:var(--deep);border-radius:50%;height:32px;width:32px;font-weight:700}.hero{height:240px;margin:0 13px;border-radius:24px;background:#dfeadf;position:relative;overflow:hidden;padding:36px 28px}.eyebrow{font-size:10px;letter-spacing:.25em;color:#60816b;font-weight:800;margin:0 0 19px}.hero h1{font-size:28px;margin:0;line-height:1.45;position:relative;z-index:2;letter-spacing:.01em}.wave{color:#bd9365;margin-left:7px;font-size:22px}.hero p:not(.eyebrow){font-size:13px;color:#5c7060;margin:9px 0 0;position:relative;z-index:2}.hero-ornament{position:absolute;width:190px;height:190px;right:-28px;bottom:-48px;border:31px solid #c9dec9;border-radius:50%;transform:rotate(20deg)}.hero-ornament span:first-child{position:absolute;width:93px;height:93px;border-radius:50%;background:#f4f7e9;top:18px;left:18px}.hero-ornament span:nth-child(2){position:absolute;width:46px;height:46px;border-radius:50%;background:#e4c9a9;top:-38px;left:1px}.hero-ornament span:last-child{position:absolute;width:28px;height:28px;border-radius:50%;background:#9cb89a;bottom:2px;right:-24px}.content{padding:28px 23px 45px}.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:15px}.section-title h2{margin:0;font-size:18px;letter-spacing:.03em}.section-title small{color:var(--muted);font-size:12px}.section-intro{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 18px}.child-list{display:grid;gap:12px}.child-card{width:100%;border:1px solid var(--line);border-radius:19px;background:var(--card);display:flex;align-items:center;padding:16px;text-align:left;box-shadow:0 6px 18px rgba(40,70,44,.035);transition:transform .15s,border-color .15s,box-shadow .15s}.child-card:hover{transform:translateY(-2px);border-color:#adc8ad;box-shadow:0 9px 24px rgba(40,70,44,.07)}.child-card.selected{border:2px solid var(--green);padding:15px;background:#fcfffb}.avatar{width:49px;height:49px;border-radius:16px;background:#e9eee8;color:#496451;display:grid;place-items:center;flex:none;font-size:20px;font-weight:700}.child-card:nth-child(even) .avatar{background:#f4ebe0;color:#906f4d}.child-copy{display:flex;flex-direction:column;margin-left:13px;gap:3px}.child-copy strong{font-size:16px}.child-copy small{font-size:12px;color:var(--muted)}.card-tail{margin-left:auto;color:var(--green);font-size:23px}.selected .card-tail{font-size:16px;font-weight:700}.context-card{margin-top:21px;border:1px solid #d6e2d6;border-radius:19px;background:#ecf3e9;padding:20px}.context-label{font-size:10px;color:#5d7c65;font-weight:800;letter-spacing:.12em}.context-card h3{margin:9px 0 6px;font-size:18px}.context-card p{margin:0;font-size:12px;line-height:1.65;color:#667a69}.feature-section{margin-top:29px}.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.feature{border:1px solid var(--line);background:#fff;border-radius:17px;padding:17px 14px;min-height:99px}.feature-icon{font-size:18px;display:block;margin-bottom:9px}.feature strong{font-size:14px;display:block}.feature small{color:#94a095;font-size:11px;display:block;margin-top:4px}.notice{margin-top:23px;border-top:1px solid var(--line);padding-top:18px;color:#89978c;font-size:11px;line-height:1.7}.empty-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:29px 24px;text-align:center}.empty-art{width:76px;height:76px;border-radius:24px;background:#edf3e9;display:grid;place-items:center;margin:0 auto 20px;font-size:31px;color:var(--green)}.empty-card h2{font-size:18px;margin:0 0 9px}.empty-card p{font-size:13px;line-height:1.75;color:var(--muted);margin:0 auto 18px;max-width:275px}.info-strip{padding:14px;background:#f7f8f3;border-radius:12px;font-size:12px;color:#718074;line-height:1.65;text-align:left}.retry-button,.primary-button{border:0;border-radius:12px;background:var(--deep);color:white;padding:12px 20px;font-size:13px;font-weight:700}.retry-button{margin-top:19px}.footer{display:flex;justify-content:space-between;color:#a1ada1;font-size:10px;padding:0 25px 30px}.demo-panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(520px,100%);background:white;border:1px solid #e0e5db;border-bottom:0;border-radius:19px 19px 0 0;box-shadow:0 -5px 35px rgba(30,58,41,.12);z-index:10;padding-bottom:env(safe-area-inset-bottom)}.demo-toggle{height:54px;width:100%;border:0;background:transparent;text-align:left;padding:0 23px;color:var(--deep);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:space-between}.demo-controls{padding:0 22px 21px}.demo-controls p{margin:0 0 12px;color:var(--muted);font-size:11px}.scenario-list{display:flex;flex-wrap:wrap;gap:8px}.scenario-button{border:1px solid #dce3d8;border-radius:999px;background:#f8faf6;padding:8px 12px;color:#536b59;font-size:12px}.scenario-button.active{background:var(--deep);border-color:var(--deep);color:#fff}dialog{border:0;border-radius:22px;padding:0;max-width:min(360px,calc(100vw - 36px));box-shadow:0 22px 70px rgba(14,40,24,.25)}dialog::backdrop{background:rgba(19,39,27,.46)}.dialog-content{padding:29px;position:relative}.dialog-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#77877a;font-size:25px}.dialog-icon{width:38px;height:38px;border-radius:50%;background:#e7efe5;color:var(--deep);display:grid;place-items:center;font-weight:700}.dialog-content h2{font-size:19px;margin:18px 0 10px}.dialog-content p{font-size:13px;color:var(--muted);line-height:1.8;margin:0 0 23px}.dialog-content .primary-button{width:100%}@media(min-width:650px){body{background:#e9eee8}.app-shell{background:var(--cream);box-shadow:0 0 45px rgba(44,66,48,.09)}}@media(max-width:360px){.hero{padding-left:22px}.hero h1{font-size:25px}.content{padding-left:18px;padding-right:18px}.feature{padding:14px 11px}}
:root{font-size:16px}
.preview-bar{height:40px;font-size:13px;letter-spacing:.02em}
.brand-copy strong{font-size:17px}
.brand-copy small{font-size:13px;letter-spacing:.02em}
.eyebrow{font-size:12px;letter-spacing:.15em}
.hero p:not(.eyebrow){font-size:15px;line-height:1.6;max-width:245px}
.section-title h2{font-size:19px}
.section-title small{font-size:14px}
.section-intro{font-size:15px;line-height:1.75}
.child-copy small{font-size:14px}
.context-label{font-size:13px;letter-spacing:.04em}
.context-card p{font-size:15px;line-height:1.7}
.feature strong{font-size:15px}
.feature small{font-size:14px}
.notice{font-size:14px;line-height:1.7}
.empty-card p{font-size:15px}
.info-strip{font-size:14px}
.retry-button,.primary-button{font-size:15px}
.footer{font-size:13px;line-height:1.5;gap:12px;flex-wrap:wrap}
.demo-toggle{font-size:15px;height:58px}
.demo-controls{max-height:45vh;overflow-y:auto}
.demo-controls p{font-size:14px;line-height:1.5}
.scenario-button{font-size:14px;padding:9px 13px}
.dialog-content p{font-size:15px}
@media(max-width:360px){.topbar{padding:0 18px}.content{padding-left:18px;padding-right:18px}.feature{min-height:106px}.footer{padding-left:19px;padding-right:19px}}
.liff-check{margin:18px 23px 0;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:18px}
.liff-check h2{margin:0 0 8px;font-size:18px}
.liff-check p{margin:8px 0;font-size:15px;line-height:1.6}
.liff-check small{display:block;margin-top:12px;color:#657568;font-size:14px;line-height:1.6}
.liff-check code{font-size:13px;overflow-wrap:anywhere;user-select:all}
.liff-check button{margin-top:8px;border:0;border-radius:10px;background:var(--deep);color:white;padding:10px 14px;font-size:14px}
.brand-copy small,.section-title small,.child-copy small,.context-label,.feature small,.notice,.info-strip,.demo-controls p,.scenario-button{font-size:15px}
.hero p:not(.eyebrow),.section-intro,.context-card p,.empty-card p,.dialog-content p{font-size:16px}
.feature small,.notice,.footer{color:#657568}
.feature-grid{gap:12px}
.feature{min-height:112px}