/* Selected C design: shared tab panel, scene illustration, live example and supporting cards. */
.scenario-shell{background:#faf9f5;border:1px solid #e7e8df;border-radius:24px;padding:24px;box-shadow:0 8px 28px #28302204}
#scenarios .tabs{justify-content:flex-start;margin-bottom:22px;gap:10px}#scenarios .tabs button{font-size:15px;padding:12px 27px}
.scenario-c-panel{display:grid;grid-template-columns:36% minmax(0,1fr);gap:26px;align-items:start;min-height:405px}
.scenario-story{min-width:0}.scenario-story img{display:block;width:100%;height:250px;object-fit:contain;border-radius:18px;overflow:hidden}.scenario-story h3{font-size:25px;line-height:1.5;letter-spacing:-.6px;margin-top:18px;text-wrap:balance}.scenario-story>p{color:#73776f;font-size:14px;line-height:1.85;margin-top:10px}.story-mark{display:block;width:24px;height:3px;background:var(--coral);margin-top:17px;border-radius:3px}
.scenario-work{min-width:0;display:grid;gap:14px}.scenario-example{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;background:#fff;border:1px solid #e9eae4;border-radius:16px;padding:22px;min-height:256px}.scenario-work h4{font-size:15px;margin:0 0 14px;line-height:1.5}.ask-column{min-width:0}.result-column{border-left:1px solid #e5e7df;padding-left:18px;min-width:0}.example-prompt{background:#fff;border:1px solid #e7e8e2;border-radius:9px;min-height:147px;padding:14px 13px 45px;position:relative}.example-prompt p{font-size:12px;line-height:1.9;color:#51584e}.run-example{position:absolute;right:12px;bottom:11px;min-width:72px;height:32px;padding:0 12px;border:0;background:var(--coral);color:#fff;border-radius:20px;font-size:11px;transition:background .2s}.run-example:hover{background:#d64b35}
.result-filters{display:flex;gap:5px;margin-bottom:11px}.filter-button,.diagnostic-tab{border:0;border-radius:6px;padding:7px 5px;font-size:10px;line-height:1.4;flex:1;background:#eef1ec;color:#4f6755}.filter-button.done{background:#e5f0e4;color:#54785d}.filter-button.progress{background:#e9f1f3;color:#638899}.filter-button.pending{background:#fbeae8;color:#d46a5b}.filter-button[aria-pressed=true],.diagnostic-tab[aria-pressed=true]{background:#64876a;color:white}.report-row{display:grid;grid-template-columns:5px auto 1fr;align-items:center;gap:6px;margin-top:10px}.report-dot{width:5px;height:5px;border-radius:50%;background:#75a07b}.report-dot.progress{background:#dfb56d}.report-dot.pending{background:var(--coral)}.report-row strong{font-size:10px;font-weight:500}.row-status{font-size:9px;justify-self:start;padding:2px 4px;background:#eaf2e6;border-radius:3px;color:#618665}.row-status.progress{background:#e9f1f3;color:#638899}.row-status.pending{background:#fbeae8;color:#d46a5b}.report-row p{grid-column:2/-1;font-size:10px;color:#878e81;line-height:1.65;margin:0}.scenario-support{display:grid;grid-template-columns:1fr 1.08fr;gap:14px}.materials-card,.next-card{background:#edf0e8;border-radius:13px;padding:18px}.scenario-support h4{font-size:13px;margin-bottom:12px}#scenario-materials{display:flex;gap:8px}.material-tile{background:#fff;border-radius:8px;flex:1;text-align:center;padding:10px 4px;font-size:10px;line-height:1.6}.material-icon{display:block;font-size:21px;line-height:1.3;color:#647061;margin-bottom:5px}#scenario-next{list-style:none;padding:0;margin:0;counter-reset:next}#scenario-next li{counter-increment:next;position:relative;padding-left:26px;font-size:11px;line-height:1.85;margin:7px 0}#scenario-next li:before{content:counter(next);position:absolute;left:0;top:1px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--coral);color:#fff;font-size:10px}.scenario-caption{display:flex;justify-content:space-between;gap:20px;color:#969b8e;font-size:10px;line-height:1.7;margin-top:20px;min-height:17px}#scenario-feedback{color:#688262;text-align:right}
.answer-intro,.knowledge-answer{font-size:11px;color:#646d5d;line-height:1.8}.knowledge-answer{padding-left:17px;margin:6px 0 10px}.knowledge-answer strong{font-weight:500}.result-column h5{font-size:10px;margin:10px 0 7px}.reference-list{display:flex;gap:5px;flex-wrap:wrap}.reference-chip{background:#fafbf8;border:1px solid #e0e5d9;border-radius:5px;padding:6px 5px;color:#66725b;font-size:9px}.reference-chip:hover{border-color:var(--sage)}.knowledge-note{font-size:9px;color:#7c8972;background:#eff3e9;padding:8px;border-radius:6px;line-height:1.7;margin-top:9px}.schedule-editor{background:#faf9f5;border:1px solid #e6e5df;border-radius:9px;padding:13px 10px}.schedule-time{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.schedule-time>span{font-size:28px;color:var(--coral)}.schedule-time select,.schedule-time input{font:inherit;font-size:11px;border:1px solid #e3e5db;border-radius:5px;background:#fff;padding:5px;max-width:100%}.schedule-time input{width:94px}.schedule-editor p{font-size:11px;color:#727969;line-height:1.8;margin-block:13px}.save-demo{width:100%;padding:8px;border:0;border-radius:30px;background:var(--coral);color:white;font-size:11px}.plan-heading{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;padding-bottom:10px;border-bottom:1px solid #e7e9e2}.plan-toggle{width:31px;height:18px;border:0;border-radius:12px;background:var(--coral);padding:2px;flex-shrink:0}.plan-toggle span{display:block;border-radius:50%;width:14px;height:14px;background:white;transform:translateX(13px);transition:transform .2s}.plan-toggle[aria-checked=false]{background:#b1b9a9}.plan-toggle[aria-checked=false] span{transform:none}.plan-details{margin:5px 0 0;font-size:10px}.plan-details>div{display:grid;grid-template-columns:55px 1fr;border-bottom:1px solid #f0f1ec;padding-block:8px;gap:6px;line-height:1.7}.plan-details dt{color:#7f8677}.plan-details dd{margin:0;color:#525c4b}.plan-status{background:#e7efe2;color:#6a8760;padding:3px 5px;border-radius:4px}.diagnostic-copy{font-size:12px;color:#626c5b;line-height:1.9;margin-top:12px}.confirm-demo{display:block;margin:16px 0 0 auto;background:#fff;border:1px solid var(--coral);border-radius:30px;padding:7px 14px;font-size:11px;color:var(--coral)}.confirm-demo:hover{background:#fff1eb}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1100px){.scenario-shell{padding:20px}.scenario-c-panel{gap:20px;grid-template-columns:33% minmax(0,1fr)}.scenario-example{padding:16px;gap:13px}.result-column{padding-left:13px}.scenario-story img{height:225px}.scenario-story h3{font-size:22px}.scenario-story>p{font-size:13px}.materials-card,.next-card{padding:14px}.scenario-support{gap:10px}.material-tile{font-size:9px}#scenario-next li{font-size:10px}}
@media(max-width:850px){.scenario-c-panel{grid-template-columns:1fr}.scenario-story{display:grid;grid-template-columns:40% 1fr;column-gap:22px;align-items:center}.scenario-story #story-art{grid-row:1/4}.scenario-story img{height:190px}.scenario-story h3{margin-top:0;font-size:25px}.scenario-story>p{align-self:start}.story-mark{margin:10px 0}.scenario-example{min-height:245px}.scenario-c-panel{min-height:0}}
@media(max-width:540px){.scenario-shell{padding:14px;border-radius:18px}#scenarios .tabs{gap:2px;margin-bottom:20px}#scenarios .tabs button{padding:11px 3px;font-size:12px;flex:1}.scenario-story{display:block}.scenario-story img{height:auto;aspect-ratio:1.58;max-height:240px}.scenario-story h3{font-size:24px;margin-top:15px}.scenario-story>p{font-size:13px}.story-mark{margin-top:13px}.scenario-c-panel{gap:21px}.scenario-example{grid-template-columns:1fr;padding:17px;gap:20px}.result-column{border-left:0;border-top:1px solid #e5e7df;padding-left:0;padding-top:18px}.example-prompt{min-height:110px}.scenario-work h4{font-size:14px}.example-prompt p,.diagnostic-copy{font-size:13px}.result-filters button{font-size:11px}.report-row strong,.report-row p,.plan-details{font-size:11px}.answer-intro,.knowledge-answer{font-size:12px}.scenario-support{grid-template-columns:1fr;gap:12px}.materials-card,.next-card{padding:17px}.material-tile{font-size:11px}#scenario-next li{font-size:12px}.scenario-caption{flex-direction:column;gap:6px;font-size:9px}#scenario-feedback{text-align:left}.schedule-time input,.schedule-time select{font-size:13px}.schedule-editor p{font-size:12px}.save-demo{font-size:12px}.scenario-story h3{text-wrap:balance}}