.demo-page{min-height:100dvh}.demo-label{margin:0;color:var(--muted);font-size:13px;justify-self:center}.demo-main{max-width:1380px;margin:auto;padding:52px 24px 90px}.demo-intro{display:grid;grid-template-columns:1fr 280px;gap:50px;align-items:end;margin-bottom:34px}.demo-intro h1{font-size:clamp(44px,5.4vw,78px);line-height:1;margin:15px 0 18px}.demo-intro p:not(.eyebrow){max-width:72ch;color:var(--muted);font-size:17px}.demo-progress{height:5px;background:#152528;border-radius:3px;overflow:hidden}.progress-fill{display:block;width:0;height:100%;background:var(--accent);transition:width .25s ease}.demo-shell{border:1px solid #34514d;border-radius:8px;background:#0a1416;box-shadow:0 30px 90px rgba(0,0,0,.32);overflow:hidden}.demo-toolbar{height:58px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-bottom:1px solid var(--line);background:#0f1b1d}.demo-tabs{display:flex;gap:4px}.demo-tabs button,.demo-action,.session,.reset-demo{font:inherit}.demo-tabs button{border:1px solid transparent;border-radius:5px;background:transparent;color:var(--muted);padding:8px 13px;cursor:pointer}.demo-tabs button[aria-selected=true]{border-color:#41635e;background:#152725;color:var(--text)}.synthetic-badge{border:1px solid #41635e;border-radius:4px;padding:5px 8px;color:var(--accent);font-size:10px;letter-spacing:1px}.demo-workspace{display:grid;grid-template-columns:230px minmax(500px,1fr) 310px;min-height:590px}.demo-sessions{padding:18px 13px;border-right:1px solid var(--line);background:#0d181a}.demo-sessions>p{margin:0 10px 15px;color:#6d8983;font-size:11px;text-transform:uppercase;letter-spacing:1.2px}.session{display:block;width:100%;text-align:left;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--text);padding:12px;margin-bottom:6px;cursor:pointer}.session strong,.session small{display:block}.session small{color:#74918b;margin-top:4px}.session.selected{border-color:#3c685f;background:#132824}.demo-terminal{display:flex;flex-direction:column;padding:28px 30px;font:15px/1.65 monospace;min-width:0}.terminal-output{flex:1}.terminal-output p{margin:0 0 10px}.terminal-prompt{color:var(--accent)}.terminal-muted{color:#77938d}.terminal-success{color:#70dc9b}.terminal-event{border-left:3px solid var(--accent);background:#10231f;padding:13px 16px;margin:18px 0}.terminal-actions{display:flex;flex-wrap:wrap;gap:9px;padding-top:20px;border-top:1px solid #203536}.demo-action{min-height:42px;border:1px solid #3c5b57;border-radius:5px;background:#122022;color:var(--text);padding:0 14px;cursor:pointer}.demo-action.primary-action{background:var(--accent);color:#06110e;border-color:var(--accent);font-weight:700}.demo-action:disabled{opacity:.35;cursor:not-allowed}.demo-phone{position:relative;margin:28px 24px 28px 0;border:8px solid #121b1c;border-radius:30px;background:#091315;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35)}.phone-speaker{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:70px;height:16px;border-radius:10px;background:#121b1c}.phone-header{height:58px;padding:27px 15px 0;color:var(--accent);font-weight:700;border-bottom:1px solid var(--line)}.phone-screen{padding:18px 14px;font:12px/1.55 monospace}.connection-state{display:inline-block;border:1px solid #3c645c;border-radius:4px;padding:4px 6px;color:#75cdb8;font:9px Arial,sans-serif}.phone-card{margin:18px 0;padding:12px;border:1px solid #355b53;border-radius:5px;background:#10231f}.phone-card span,.phone-card strong{display:block}.phone-card strong{color:#71dc9c;margin-top:4px}.phone-message{border-left:2px solid var(--accent);padding-left:9px;color:#bcd5cf}.demo-steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid var(--line);border-radius:6px;overflow:hidden}.demo-steps article{display:flex;gap:12px;padding:17px;border-right:1px solid var(--line);color:#637d78}.demo-steps article:last-child{border-right:0}.demo-steps article span{font-family:monospace;color:#52746d}.demo-steps article.current{background:#12241f;color:var(--text)}.demo-steps article.done{color:#79cdb8}.demo-complete{margin:54px auto 0;max-width:850px;text-align:center}.demo-complete h2{font-size:clamp(34px,4vw,56px);line-height:1.08;margin:16px auto;max-width:18ch}.demo-complete>p:not(.eyebrow){color:var(--muted)}.demo-complete .actions{justify-content:center}.view-mobile{grid-template-columns:1fr}.view-mobile .demo-sessions,.view-mobile .demo-terminal{display:none}.view-mobile .demo-phone{width:min(360px,calc(100% - 32px));min-height:620px;margin:28px auto}.view-mobile .phone-screen{font-size:14px}.view-mobile .phone-header{font-size:16px}@media(max-width:900px){.demo-main{padding-top:36px}.demo-intro{grid-template-columns:1fr}.demo-workspace{grid-template-columns:190px 1fr}.demo-phone{display:none}.view-mobile .demo-phone{display:block}.demo-steps{grid-template-columns:1fr 1fr}.demo-steps article:nth-child(2){border-right:0}.demo-steps article:nth-child(-n+2){border-bottom:1px solid var(--line)}}@media(max-width:620px){.demo-label{font-size:11px}.demo-main{padding:28px 14px 60px}.demo-intro h1{font-size:43px}.demo-toolbar{padding:0 10px}.synthetic-badge{display:none}.demo-workspace{grid-template-columns:1fr;min-height:640px}.demo-sessions{display:flex;gap:6px;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px}.demo-sessions>p{display:none}.session{min-width:155px;margin:0}.demo-terminal{padding:22px 16px;font-size:13px}.demo-phone{display:none}.terminal-actions{display:grid}.demo-action{width:100%}.demo-steps{grid-template-columns:1fr}.demo-steps article{border-right:0!important;border-bottom:1px solid var(--line)}.demo-steps article:last-child{border-bottom:0}.view-mobile .demo-phone{min-height:560px}.demo-complete{text-align:left}.demo-complete .actions{display:grid}.demo-complete .button{width:100%}}
@media(prefers-reduced-motion:reduce){.progress-fill{transition:none}}