:root{--green:#156B56;--ink:#18231f;--paper:#e8e5dc;--surface:#f7f7f1;--line:#b8bfb5;--muted:#54635b;color:var(--ink);background:var(--paper)}
body{background:var(--paper)}button{position:relative;isolation:isolate}button:active:not(:disabled){transform:none}
.masthead{height:82px;background:var(--green);color:var(--surface);border-bottom:5px solid var(--ink);padding:0 4vw}.brand{color:var(--surface);font-size:24px;letter-spacing:0}.brand-icon{border:1px solid #f7f7f180;border-radius:0;background:none}.brand small{font-size:10px;letter-spacing:2px}.prototype{background:transparent;color:var(--surface);border:1px solid #f7f7f150;border-radius:0}.text-button{color:var(--surface)}
main{max-width:1500px;padding:26px 4vw 0;display:grid;grid-template-columns:290px minmax(0,1fr);gap:0 32px}
.intro{grid-column:1/-1;padding:0 0 22px;border-bottom:2px solid var(--ink);align-items:center}.eyebrow{font-family:Consolas,"Microsoft YaHei",sans-serif;font-size:12px;color:var(--green);letter-spacing:1.5px}.intro h1{font-size:clamp(30px,3.2vw,48px);line-height:1.13;letter-spacing:-1px;font-weight:900;margin:0}.intro h1 span{color:var(--green)}.intro h1 br{display:none}
.mode-badge{display:grid;grid-template-columns:auto auto;gap:3px 18px;align-items:center;color:var(--ink)}.edition-number{grid-row:1/3;font-family:Impact,"Arial Narrow",sans-serif;font-size:68px;line-height:1;letter-spacing:-3px;color:var(--green)}.edition-number span{font-size:30px;letter-spacing:0}.mode-badge strong{font-size:14px}.mode-badge small{font-size:12px;margin:0;color:#536158}
.view-tabs{grid-column:2;grid-row:2;width:100%;margin:18px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0;justify-content:flex-start;gap:0}.view-tabs button{font-size:14px;border-radius:0;padding:11px 22px;color:var(--ink)}.view-tabs button.active{background:var(--green);color:white;box-shadow:none}
.demo-panel{grid-column:1;grid-row:2/5;margin:18px 0 0;padding:0 0 22px;background:transparent;border:0;border-top:6px solid var(--green);border-radius:0}.demo-title{display:block;padding-top:20px}.demo-title h2{font-size:24px;font-weight:850;line-height:1.4}.demo-title .eyebrow{font-size:12px}.demo-title>span{display:block;font-size:14px;line-height:1.6;margin-top:14px;color:var(--muted)}
.scenario-grid{grid-template-columns:1fr;gap:0;counter-reset:scenario}.scenario-grid button{counter-increment:scenario;min-height:105px;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:18px 4px;gap:10px}.scenario-grid button:before{content:"0" counter(scenario);font-family:Impact,"Arial Narrow",sans-serif;font-size:34px;align-self:flex-start;color:var(--green);min-width:38px}.scenario-icon{display:none}.scenario-grid strong{font-size:18px;font-weight:750}.scenario-grid small{font-size:13px;line-height:1.6;color:var(--muted)}.scenario-grid button:hover{background:#d6ddd2;border-color:var(--green)}.scenario-grid button b{font-size:21px;color:var(--green)}.scenario-grid button:focus-visible{outline-offset:0}
.demo-footer{border-color:var(--line);display:block;margin-top:0;padding-top:20px}.demo-footer>span{display:block;font-size:14px}.demo-footer strong{font-family:Consolas,monospace;font-size:28px;font-weight:700;color:var(--green)}.demo-footer small{display:block;line-height:1.7;font-size:12px;margin:8px 0 18px}.demo-footer>div{display:flex;flex-wrap:wrap;gap:8px}.demo-footer button{border:1px solid var(--line);background:none;border-radius:0;font-size:14px;padding:9px}.demo-footer button.reset{border-color:var(--green);color:white;background:var(--green);border-radius:0}
.director{grid-column:2;grid-row:3;border:1px solid var(--line);border-left:5px solid var(--green);border-radius:0;box-shadow:none;background:var(--surface);padding:15px 17px;margin:0 0 24px;scroll-margin-top:12px}.director-caption strong{font-size:18px;font-weight:750}.director-caption p{color:var(--muted);font-size:14px}.director-caption{gap:12px}#step-number{border-radius:0;background:var(--green);font-family:Consolas,"Microsoft YaHei",sans-serif}#step-actor{border:1px solid var(--line);border-radius:0;background:none;color:var(--green);font-size:12px;white-space:normal;max-width:145px}.director-bottom{border-color:var(--line)}#step-track li{font-size:12px;color:var(--muted)}#step-track li span{border-radius:0;border-color:var(--line)}#step-track .current span,#step-track .done span{background:var(--green)}.playback{font-size:14px;flex-wrap:wrap}.playback button,.playback select{border-radius:0;background:none;border-color:var(--line);color:var(--green);padding:7px}
.workspace{grid-column:2;grid-row:4;align-items:flex-start;gap:22px;padding:0 0 28px}.phone-column{min-width:0}.role-heading{margin:0 0 17px;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px}.role-number{font-family:Impact,"Arial Narrow",sans-serif;font-size:32px;color:var(--green);padding:0;border:0;border-radius:0}.role-heading h2{font-size:18px;font-weight:800}.role-heading p{font-size:12px;color:var(--muted)}.role-chip{border:0;padding:0;font-size:12px;color:var(--muted)}.phone{width:310px;filter:drop-shadow(6px 10px 0 #18231f15)}.screen{background:var(--surface);border-radius:43px}.phone-scroll{padding-left:18px;padding-right:18px}
.connection{width:65px;flex-shrink:0;margin-top:95px;align-self:flex-start}.connection-line{border-color:var(--green)}.connection>span{background:var(--paper);border:1px solid var(--green);color:var(--green);border-radius:50%;width:42px;height:42px}.connection strong{font-size:12px;text-align:center;line-height:1.6;color:var(--green)}.connection small{white-space:normal;text-align:center;font-size:12px;line-height:1.5;color:var(--muted)}.flow-mini{font-size:12px;color:var(--muted);gap:10px;margin-top:30px}
.older-content .greeting{font-size:24px}.older-content .date{font-size:20px;color:var(--muted);margin-bottom:17px}.med-card{background:#e5eadd;border:1px solid #b4c4b6;border-top:5px solid var(--green);border-radius:5px;padding:16px}.med-time{font-family:Consolas,monospace;font-size:44px;font-weight:800;letter-spacing:-2px;color:var(--green)}.med-bottom,.med-detail{color:#425d4e}.med-divider{background:#b4c4b6}.elder-button{border-radius:5px;font-size:24px}.confirm-button{background:var(--green);box-shadow:none}.help-button{border-color:#bc7e72;color:#973b2c;background:#f7ece5}.elder-hint{color:#526257}.state-card{border-radius:4px;border-left:5px solid var(--card-fg);transition:none}.state-top{font-family:Consolas,monospace}.state-card p{font-size:14px}.family-actions button{border-radius:3px;font-size:14px;background:var(--surface);border-color:#b8c6b8}.family-actions .primary{background:var(--green);border-color:var(--green)}.family-top small{color:var(--muted)}.avatar,.person-avatar{border-radius:3px;background:#e2e8db;color:var(--green)}.timeline li{font-size:14px}.timeline time{font-size:12px;color:var(--muted)}.timeline-head button,.family-person small,.family-foot{font-size:12px;color:var(--muted)}.success-panel{border-radius:4px;border-left:5px solid var(--green);background:#e7eddf;animation-duration:180ms}.notification{border-radius:4px}.demo-focus-target{outline-color:var(--green)!important;box-shadow:none!important;outline-offset:3px}.demo-phone-active .screen{box-shadow:none}
footer{grid-column:1/-1;border-top:2px solid var(--ink);padding:16px 0 24px;font-size:12px;color:var(--muted)}
dialog{border-radius:4px;border-top:6px solid var(--green);background:var(--surface)}dialog::backdrop{backdrop-filter:none}dialog .submit{background:var(--green);border-radius:3px}dialog textarea{border-radius:3px}
.tap-marker{position:absolute;left:50%;top:50%;z-index:10;width:36px;height:36px;transform:translate(-50%,-50%);border:3px solid #f7f7f1;background:#156b56c9;box-shadow:0 0 0 2px #156b56;animation:button-press 650ms ease-out both;pointer-events:none}.tap-marker i{border-color:#f7f7f1;animation:button-ring 650ms ease-out both}.tap-marker b{top:38px;font-size:12px;background:#172c23;padding:3px 7px}.tap-marker:after{content:"";position:absolute;inset:9px;border-radius:50%;background:white}
@keyframes button-press{0%{opacity:0;scale:.8}20%,85%{opacity:1;scale:1}100%{opacity:.8;scale:1}}
@keyframes button-ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.8);opacity:0}}
@media(min-width:1550px){.phone{width:340px}}
@media(max-width:1200px){main{grid-template-columns:235px minmax(0,1fr);gap:0 20px;padding-left:24px;padding-right:24px}.workspace{gap:12px}.phone{width:280px}.connection{width:52px}.intro h1{font-size:34px}.intro h1 br{display:block}.role-chip{display:none}.director-caption{flex-wrap:wrap}#step-actor{max-width:none}.screen{border-radius:38px}.scenario-grid strong{font-size:17px}}
@media(max-width:1000px){main{grid-template-columns:1fr}.intro,.view-tabs,.demo-panel,.director,.workspace,footer{grid-column:1;grid-row:auto}.intro{order:0}.view-tabs{order:1}.demo-panel{order:2;border-top:0;margin:0 0 18px;padding:0}.demo-title{display:none}.scenario-grid{grid-template-columns:repeat(3,1fr);gap:12px}.scenario-grid button{border:1px solid var(--line);padding:12px;min-height:90px}.scenario-grid button:before{font-size:25px;min-width:27px}.scenario-grid small{font-size:12px}.demo-footer{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border:0}.demo-footer strong{font-size:22px}.demo-footer small{display:none}.director{order:3}.workspace{order:4;gap:22px}.phone{width:310px}.connection{width:65px}footer{order:5}.screen{border-radius:43px}}
@media(max-width:780px){.masthead{height:72px;padding:0 18px}.brand{font-size:21px}main{padding:20px 18px 0}.intro h1{font-size:30px}.intro{display:flex;gap:12px}.mode-badge{display:block;max-width:140px}.edition-number{font-size:48px;display:block;margin-bottom:5px}.mode-badge strong{font-size:12px}.mode-badge small{display:block;font-size:12px;margin-top:6px}.view-tabs button{padding:10px;flex:1;font-size:13px}.scenario-grid{gap:6px}.scenario-grid button{display:block;padding:10px 8px;min-height:100px}.scenario-grid button:before{display:block;font-size:24px}.scenario-grid b{display:none}.scenario-grid strong{font-size:15px;margin-top:7px}.scenario-grid small{display:none}.demo-footer{flex-wrap:wrap;gap:8px}.demo-footer button{font-size:12px}.director-caption>div{min-width:65%}#step-actor{margin-left:0}.director-caption strong{font-size:17px}.workspace{align-items:center}.phone{width:min(340px,calc(100vw - 50px))}.role-chip{display:block}.connection{margin:0;align-self:center;width:220px;min-height:70px}.connection small{display:none}.connection strong{font-size:14px}.connection-line{display:block;width:1px;height:64px;border-top:0;border-left:1px dashed var(--green);top:0;left:50%}.screen{border-radius:43px}.playback{gap:5px}.playback button,.playback select{padding:7px}footer{line-height:1.7}}
@media(prefers-reduced-motion:reduce){.tap-marker,.tap-marker i{animation:none}.tap-marker{opacity:1}}