/* A browser and its consequences share one open workbench. */
.app-scene{color:var(--ink);background:#e8eddf;min-width:0;position:relative;--scene-signal:#df593a}
.scene-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;border-bottom:1px solid #c4ceb9}
.scene-goal{display:flex;align-items:center;gap:12px}.scene-goal>.icon{color:#b64128;width:21px;flex-shrink:0}.scene-goal strong{font-size:16px;font-weight:550;line-height:1.4}
.scene-playback{display:flex;gap:18px;align-items:center;flex-shrink:0}.scene-playback>span{font-size:12px;color:#59694d}.scene-play,.scene-replay{border:0;background:transparent;color:#35482c;display:flex;gap:7px;align-items:center;min-height:36px;padding:6px 0;font-size:13px}.scene-play .icon,.scene-replay .icon{width:16px;height:16px}.scene-replay{padding:6px}
.application-stage{display:grid;grid-template-columns:minmax(0,1.2fr) 90px minmax(0,.85fr);align-items:center;padding:28px 32px;position:relative;min-height:355px}
.scene-browser{background:#fbfaf5;border-radius:10px;overflow:hidden;box-shadow:0 14px 28px #263b2217;min-width:0;position:relative;z-index:1}
.scene-browser-top{display:flex;align-items:center;gap:13px;padding:10px 17px;background:#d9dfcf;font-size:12px;color:#516048;line-height:1.3}.scene-browser-top>.icon{width:13px;height:13px;margin-left:auto}.scene-window-dots{display:flex;gap:4px}.scene-window-dots i{width:5px;height:5px;border-radius:50%;background:#8b9a7f}
.scene-browser-content{padding:22px 25px}.scene-workspace{display:flex;gap:10px;align-items:center}.northstar-symbol{display:flex;align-items:center;justify-content:center;width:31px;height:31px;background:#e2e8d8;border-radius:7px;color:#526b41}.northstar-symbol .icon{width:19px}.scene-workspace strong{font-size:17px;line-height:1.1;display:block}.scene-workspace div>span{display:block;font-size:12px;color:#69735f;margin-top:3px}.scene-user{margin-left:auto;color:#647557;font-size:12px}
.scene-plan{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:21px 0 16px}.scene-plan div>span{font-size:12px;color:#68735f;display:block}.scene-plan strong{font-size:30px;font-weight:550;line-height:1.1}.scene-plan-pill{font-size:12px;padding:5px 9px;background:#e5eadb;color:#58694b;border-radius:4px}
.scene-feature-check{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-block:1px solid #dbe1d1;font-size:13px}.scene-feature-check>span{display:flex;align-items:center;gap:7px}.scene-feature-check .icon{width:15px;height:15px}.scene-access-lock{color:#776c51}.scene-feature-check .scene-access-ready{display:none;color:#22664c}.app-scene[data-frame='2']:not([data-delayed=true]) .scene-access-lock,.app-scene[data-frame='3']:not([data-delayed=true]) .scene-access-lock{display:none}.app-scene[data-frame='2']:not([data-delayed=true]) .scene-access-ready,.app-scene[data-frame='3']:not([data-delayed=true]) .scene-access-ready{display:flex}
.scene-payment-method{display:flex;align-items:center;gap:8px;font-size:12px;padding:12px 0;color:#637255}.scene-payment-method>.icon{width:16px;height:16px}.scene-payment-method strong{font-weight:500;color:#394b30;margin-left:auto;white-space:nowrap}
.scene-app-action{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:39px;width:100%;padding:9px 13px;border:0;border-radius:5px;color:#f5f8ef;background:#263c2e;font-size:14px;text-align:left}.scene-app-action:hover{background:#416047}.scene-app-action>.icon{width:16px;height:16px}
.application-tracks{width:100%;height:265px;overflow:visible;pointer-events:none}.track-base{stroke:#b2c19f;stroke-width:1.3}.track-active{stroke:var(--scene-signal);stroke-width:2;opacity:.12;transition:opacity .5s}.track-origin{fill:#d95b3c}.app-scene[data-frame='1'] .track-first,.app-scene[data-frame='2'] .track-first,.app-scene[data-frame='3'] .track-first,.app-scene[data-frame='2'] .track-second,.app-scene[data-frame='3'] .track-second,.app-scene[data-frame='3'] .track-return{opacity:1}.app-scene.is-playing .track-active{stroke-dasharray:12 12;animation:application-path 2.8s linear infinite}@keyframes application-path{to{stroke-dashoffset:-96}}
.scene-observations{min-width:0}.scene-observer{display:flex;align-items:center;gap:8px;margin-bottom:12px}.scene-agent{background:#f26342;display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;flex-shrink:0;transform:rotate(-12deg)}.scene-agent>.icon{width:17px;height:17px}.scene-observer strong{font-size:14px;font-weight:550}.scene-observer>span:last-child{font-size:12px;color:#58694b;margin-left:auto}
.scene-service{display:flex;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #c4ceb9;min-height:67px}.scene-service-icon{display:flex;color:#567049;flex-shrink:0}.scene-service-icon>.icon{width:21px;height:21px}.scene-service div>span{display:block;color:#5e6d52;font-size:12px}.scene-service strong{display:block;font-size:15px;font-weight:550;line-height:1.4}.scene-service>i{width:7px;height:7px;background:#94a783;border-radius:50%;margin-left:auto;flex-shrink:0}.app-scene[data-frame='1'] [data-first-indicator],.app-scene[data-frame='2'] [data-first-indicator],.app-scene[data-frame='3'] [data-first-indicator],.app-scene[data-outcome=passed] [data-second-indicator]{background:#438754}.app-scene[data-outcome=failed] [data-second-indicator]{background:#c04b29}
.scene-result{display:flex;align-items:start;gap:12px;padding:16px 0 11px;min-height:103px}.scene-result-symbol{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#d2ddc4;color:#34542c;border-radius:50%;flex-shrink:0}.scene-result-symbol>.icon{width:17px;height:17px}.scene-result strong{display:block;font-size:19px;font-weight:550;line-height:1.2;letter-spacing:-.015em}.scene-result p{font-size:13px;line-height:1.55;color:#5d6c50;margin:6px 0 0;max-width:370px}.app-scene[data-outcome=failed] .scene-result-symbol{background:#f26342;color:#222d20}.app-scene[data-outcome=failed] .scene-result strong{color:#9b3e27}.app-scene[data-outcome=passed] .scene-result-symbol{background:#c5dfb3;color:#225d36}
.scene-condition{display:flex;align-items:center;gap:9px;background:transparent;border:0;border-top:1px solid #c4ceb9;padding:11px 0 0;width:100%;font-size:13px;color:#394f2f;min-height:36px}.scene-condition small{font-size:12px;color:#566647;margin-left:auto}.scene-switch{width:29px;height:17px;background:#879c76;border-radius:15px;position:relative;flex-shrink:0}.scene-switch:after{content:'';width:11px;height:11px;border-radius:50%;background:#f5f7ed;position:absolute;top:3px;left:3px;transition:transform .2s}.scene-condition[aria-pressed=true] .scene-switch{background:#bb4c2c}.scene-condition[aria-pressed=true] .scene-switch:after{transform:translateX(12px)}.scene-result-link{display:flex;align-items:center;gap:12px;text-decoration:underline;text-underline-offset:5px;font-size:13px;margin-top:4px}.scene-result-link>.icon{width:15px;height:15px}
.scene-bottom{display:flex;align-items:start;justify-content:space-between;gap:24px;padding:16px 26px;border-top:1px solid #bdcbae;background:#dce5d0}.scene-timeline{display:flex;gap:24px;list-style:none;padding:0;margin:0;flex:1}.scene-timeline li{display:flex;align-items:center;gap:8px;font-size:12px;color:#3c5430;white-space:nowrap}.scene-timeline li>span{width:21px;height:21px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#cad7bc;font-size:12px}.scene-timeline li[aria-current=step]{color:#202f1c;font-weight:600}.scene-timeline li[aria-current=step]>span{background:#263c2e;color:#f2f7e9}.scene-timeline li.is-complete>span{background:#b4cda0;color:#26441b}
.scene-evidence{font-size:12px;flex-shrink:0;min-width:120px}.scene-evidence summary{display:flex;align-items:center;gap:16px;justify-content:space-between;list-style:none;cursor:pointer;min-height:23px}.scene-evidence summary::-webkit-details-marker{display:none}.scene-evidence summary>.icon{width:14px;height:14px;transform:rotate(45deg)}.scene-evidence[open] summary>.icon{transform:rotate(-45deg)}.scene-evidence>div{padding-top:12px;min-width:270px}.scene-evidence dl{margin:0}.scene-evidence dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:8px 0;border-top:1px solid #bacaa9}.scene-evidence dt{color:#4e6740}.scene-evidence dd{margin:0;text-align:right}.scene-evidence a{display:flex;align-items:center;gap:10px;text-decoration:underline;text-underline-offset:4px;margin-top:8px}.scene-evidence a>.icon{width:14px}
.scene-invoice-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-top:22px}.scene-invoice-heading strong{font-size:23px;font-weight:550}.scene-invoice-heading>span{font-size:12px;color:#6a765d}.scene-invoices{margin:12px 0 18px}.scene-invoices>div{display:flex;align-items:center;gap:12px;font-size:13px;padding:12px 0;border-top:1px solid #dbe1d1}.scene-invoices>div>span:last-child{margin-left:auto;font-size:12px;color:#416b32}.scene-invoices small{display:block;font-size:12px;color:#68765c;margin-top:3px}.scene-file-icon{display:flex;align-items:center;justify-content:center;width:32px;height:37px;border:1px solid #d6dfca;border-radius:4px;color:#6d825b}.scene-file-icon>.icon{width:18px}.scene-invoices .icon{width:15px;height:15px}.app-scene[data-frame='1'] [data-invoice-row=latest],.app-scene[data-frame='2'] [data-invoice-row=latest],.app-scene[data-frame='3'] [data-invoice-row=latest]{color:#23653b}
@media(max-width:1000px){.application-stage{grid-template-columns:minmax(0,1.1fr) 45px minmax(0,1fr);padding:22px;min-height:345px}.scene-browser-content{padding:18px}.scene-goal strong{font-size:14px}.scene-heading{padding:14px 20px}.scene-playback{gap:13px}.scene-playback>span{font-size:12px}.scene-user{display:none}.scene-observer>span:last-child{display:none}.scene-result strong{font-size:17px}.scene-condition small{display:none}.scene-timeline{gap:16px}.scene-bottom{padding:14px 20px;gap:14px}.scene-timeline li{gap:6px;font-size:12px}}
@media(max-width:640px){.scene-heading{align-items:start;padding:15px;gap:12px}.scene-goal{gap:7px}.scene-goal strong{font-size:13px;max-width:230px}.scene-goal>.icon{display:none}.scene-playback{gap:7px;flex-wrap:wrap;justify-content:flex-end;max-width:107px}.scene-playback>span{font-size:12px;white-space:nowrap}.scene-play,.scene-replay{min-height:27px;padding-block:0;font-size:12px}.scene-play .icon,.scene-replay .icon{width:13px;height:13px}.application-stage{display:flex;flex-direction:column;padding:15px;gap:18px}.scene-browser{width:100%}.scene-browser-content{padding:17px}.scene-browser-top{padding:10px 13px;font-size:12px}.scene-workspace strong{font-size:16px}.scene-plan{margin:18px 0 12px}.scene-plan strong{font-size:27px}.scene-feature-check{font-size:12px;padding:10px 0;gap:8px}.scene-payment-method{font-size:12px;gap:5px}.scene-payment-method>.icon{display:none}.application-tracks{display:none}.scene-observations{width:100%}.scene-observer{margin:0 0 4px}.scene-observer strong{font-size:13px}.scene-agent{width:25px;height:25px}.scene-service{padding:10px 0;min-height:53px}.scene-service strong{font-size:14px}.scene-service div>span{font-size:12px}.scene-service-icon>.icon{width:18px}.scene-result{min-height:0;padding:15px 0}.scene-result strong{font-size:17px}.scene-result p{font-size:13px}.scene-condition{font-size:13px;padding-top:10px}.scene-condition small{display:block}.scene-bottom{flex-direction:column;padding:13px 15px;gap:15px}.scene-timeline{width:100%;justify-content:space-between;gap:7px}.scene-timeline li{flex-direction:column;align-items:center;gap:5px;font-size:12px}.scene-timeline li>span{font-size:12px}.scene-evidence{width:100%;border-top:1px solid #bacaa9;padding-top:12px}.scene-evidence>div{min-width:0}.scene-evidence summary{font-size:13px}}
@media(prefers-reduced-motion:reduce){.app-scene *{animation:none!important;transition:none!important}}
/* On phones, put the observed outcome ahead of the browser detail. */
@media(max-width:640px){.application-stage{display:flex;flex-direction:column;gap:21px}.scene-observations{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.scene-observer,.scene-result,.scene-condition,.scene-result-link{grid-column:1/-1}.scene-observer{margin-bottom:5px}.scene-service{padding:11px 0;gap:7px;align-items:start}.scene-service .scene-service-icon{display:none}.scene-service strong{font-size:13px}.scene-service div>span{font-size:12px}.scene-result{padding:13px 0;margin:0}.scene-result strong{font-size:15px}.scene-result p{font-size:12px;line-height:1.5}.scene-condition{padding-block:12px;min-height:44px}.scene-timeline li{font-size:12px}.scene-browser{width:100%}.scene-heading{padding:16px 15px}.scene-playback>span{font-size:12px}}