/* The landing page tour is an illustration of a local workspace, not a live connection. */
.demo-shell{min-height:446px;grid-template-columns:174px minmax(0,1fr) 196px}
.demo-scene{min-height:446px;padding:27px 27px 22px;animation:demo-arrive .45s ease both}
.demo-scene-head{margin-bottom:21px}
.demo-scene-head small{font-size:9px;letter-spacing:.12em}
.demo-scene-head h2{font-size:clamp(19px,2vw,25px);margin:7px 0 5px}
.demo-scene-head p{font-size:11px;line-height:1.5}
.demo-scene-chip{font-size:9px;padding:6px 10px}
.demo-side-link{height:38px;font-size:11px}
.demo-side-label{font-size:8px;margin:16px 8px 9px}
.demo-workspace b{font-size:11px}.demo-workspace small{font-size:9px}
.demo-agent-head{font-size:11px}.demo-agent-message p{font-size:11px}.demo-agent-message small,.demo-agent-foot{font-size:8px}.demo-agent-input{font-size:10px}
.demo-runtime-map{height:244px;border-radius:12px;background-size:17px 17px}
.demo-runtime-map svg{stroke:#abc4cf;stroke-width:2.3;transition:stroke .5s,filter .5s}
.demo-runtime-map.is-active svg{stroke:#4f9d83;filter:drop-shadow(0 0 4px #67c7a95c)}
.demo-map-node{width:27%;height:84px;border-radius:10px;padding:11px 12px;text-align:left;cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s}
.demo-map-node:hover,.demo-map-node:focus-visible{transform:translateY(-3px);box-shadow:0 9px 23px #385f7528;outline:none;border-color:#7ea6b5}
.demo-map-node>span{width:24px;height:24px;font-size:14px}
.demo-map-node b{font-size:12px;margin-top:5px}.demo-map-node small{font-size:10px;margin-top:3px;color:#8799a5}
.demo-map-node.running{border-color:#72b49c;box-shadow:0 0 0 3px #69b69a28,0 6px 18px #45735d1a}
.demo-map-node.running small{color:#2c8b67;font-weight:700}
.demo-map-node.starting{border-color:#d9af76;animation:demo-pulse .65s ease-in-out infinite alternate}
.demo-map-node.starting small{color:#a57130}
.demo-node-web{left:4%;top:30px}.demo-node-api{left:36.5%;top:30px}.demo-node-mcp{right:4%;top:30px}.demo-node-db{left:36.5%;top:143px}
.demo-runtime-bottom{margin-top:11px}.demo-runtime-bottom>span{font-size:10px;padding:12px}.demo-runtime-bottom button,.demo-test-summary button,.demo-tool-result button{font-size:11px;padding:11px 13px;border-radius:7px}
.demo-card{border-radius:11px;padding:17px 18px}.demo-card-label{font-size:9px;letter-spacing:.11em;margin-bottom:14px}
.demo-explorer-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:12px;min-height:300px}
.demo-explorer-layout>.demo-card{min-height:300px}
.demo-tool-list button,.demo-table-list button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;background:transparent;border:1px solid transparent;border-radius:7px;padding:13px 10px;color:#35576b;cursor:pointer}
.demo-tool-list button+button,.demo-table-list button+button{margin-top:4px}
.demo-tool-list button:hover,.demo-tool-list button.active,.demo-table-list button:hover,.demo-table-list button.active{background:#eaf3f4;border-color:#cfe1e7}
.demo-tool-list button b,.demo-table-list button b{font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace}
.demo-tool-list button small,.demo-table-list button small{font-size:9px;color:#7793a2;text-align:right}
.demo-tool-result{display:flex;flex-direction:column}.demo-tool-result code{display:block;padding:14px;background:#edf4f5;border:1px solid #dce9e9;border-radius:8px;font-size:11px;color:#36566c;white-space:normal;overflow-wrap:anywhere}
.demo-tool-result>div{margin-top:12px;padding:14px;border-radius:8px;font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;min-height:62px}
.demo-result-pending{background:#f5f8f8;color:#8b9eaa}.demo-result-running{background:#fff5e8;color:#9b6f30}.demo-result-success{background:#eaf5ee;color:#2d765b;border:1px solid #bce0ca}
.demo-tool-result button{border:0;background:#4f7890;color:white;font-weight:750;margin-top:auto;align-self:flex-start;cursor:pointer}
.demo-readonly{display:block;margin:25px 4px 0;color:#8ea4ae;font-size:9px}
.demo-table{border:1px solid #e0e9eb;border-radius:8px;overflow:hidden}.demo-table[hidden]{display:none}.demo-table-row{display:grid;grid-template-columns:1fr 1fr .75fr;gap:8px;align-items:center;padding:13px 10px;border-top:1px solid #e9eff0;font:10px ui-monospace,SFMono-Regular,Consolas,monospace;color:#526f7f}.demo-table-row:first-child{border-top:0}.demo-table-head{background:#eff5f6;color:#849ca8;font:800 8px Arial,sans-serif;letter-spacing:.1em}.demo-table-row em{font-style:normal;color:#328367;font-weight:700}
.demo-verify-layout{grid-template-columns:.74fr 1.26fr}.demo-verify-layout .demo-card{min-height:300px}.demo-test-summary>b{font-size:40px;margin-top:16px}.demo-test-summary>b small{font-size:12px}.demo-test-summary p{font-size:11px;line-height:1.4;margin:13px 0}.demo-test-summary button{margin-top:22px}
.demo-check-list>div{display:flex;align-items:center;gap:10px;min-height:45px;border-top:1px solid #e7eef0}.demo-check-list>div>span{width:22px;height:22px;display:grid;place-items:center;background:#e9eff1;border-radius:50%;color:#8ba1aa;flex:none;font-size:13px}.demo-check-list>div b{font-size:11px;color:#446276}.demo-check-list>div small{margin-left:auto;font-size:9px;color:#91a4af}.demo-check-list>div.checking>span{background:#fff3db;color:#9f792d;animation:demo-pulse .5s infinite alternate}.demo-check-list>div.passed>span{background:#e2f3ea;color:#308d66}.demo-check-list>div.passed>small{color:#308d66}.demo-check-list>p{font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:#8aa0ad;border-top:1px solid #e7eef0;margin:4px 0 0;padding-top:12px}
.demo-tour-caption{position:relative;display:grid;grid-template-columns:135px minmax(160px,.7fr) minmax(180px,1.3fr);align-items:center;gap:14px;min-height:65px;padding:12px 17px 15px;background:#eaf1f1;border-top:1px solid #d6e3e5;color:#294a5b}
.demo-tour-caption>span:first-child{font-size:9px;letter-spacing:.12em;font-weight:800;color:#648597}.demo-tour-caption strong{font-size:15px;letter-spacing:-.02em}.demo-tour-caption>span:nth-of-type(2){font-size:10px;line-height:1.45;color:#64808f}
.demo-tour-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:#d7e5e7}.demo-tour-progress i{display:block;height:100%;width:0;background:#6eae98;transition:width 1s ease}
.demo-footer{min-height:55px}.demo-stages button,.demo-footer>button{font-size:10px;padding:9px 12px}.demo-footer>button{background:#355d70;color:#fff;border-color:#67889a}.demo-footer>button:hover{background:#44778e}
.tour-playing .demo-scene.active{animation:demo-arrive .5s ease both}
@keyframes demo-arrive{from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-pulse{to{box-shadow:0 0 0 4px #d1a5643d}}
html[data-theme="dark"] .demo-tour-caption{background:#1b3546;border-color:#365363;color:#e5f2f1}html[data-theme="dark"] .demo-tour-caption>span:first-child{color:#98bdc9}html[data-theme="dark"] .demo-tour-caption>span:nth-of-type(2){color:#adc3cf}html[data-theme="dark"] .demo-tour-progress{background:#294a5a}
html[data-theme="dark"] .demo-tool-list button,html[data-theme="dark"] .demo-table-list button,html[data-theme="dark"] .demo-check-list>div b{color:#deebee}html[data-theme="dark"] .demo-tool-list button.active,html[data-theme="dark"] .demo-tool-list button:hover,html[data-theme="dark"] .demo-table-list button.active,html[data-theme="dark"] .demo-table-list button:hover{background:#2d4c5e;border-color:#4e7183}html[data-theme="dark"] .demo-tool-result code,html[data-theme="dark"] .demo-table-head{background:#172c3b;border-color:#3a5767;color:#d4e6e9}html[data-theme="dark"] .demo-result-pending{background:#1a3040;color:#aac0c8}html[data-theme="dark"] .demo-result-running{background:#594a31;color:#f0d8a1}html[data-theme="dark"] .demo-result-success{background:#1b483f;border-color:#407d65;color:#bde7cf}html[data-theme="dark"] .demo-table,html[data-theme="dark"] .demo-table-row,html[data-theme="dark"] .demo-check-list>div,html[data-theme="dark"] .demo-check-list>p{border-color:#385365}html[data-theme="dark"] .demo-table-row{color:#c8dce3}html[data-theme="dark"] .demo-map-node.running{border-color:#5ba789}html[data-theme="dark"] .demo-map-node.running small{color:#a7e2c5}html[data-theme="dark"] .demo-runtime-map.is-active svg{stroke:#75c5a1}
html[data-theme="dark"] .demo-check-list>div.passed>small{color:#a5dfc1}
@media(max-width:1020px){.demo-shell{grid-template-columns:155px minmax(0,1fr)}.demo-scene{min-height:430px}.demo-agent{display:none}.demo-tour-caption{grid-template-columns:120px minmax(150px,.8fr) minmax(170px,1.2fr)}}
@media(max-width:700px){.demo-shell{grid-template-columns:1fr}.demo-scene{min-height:400px;padding:20px}.demo-tour-caption{grid-template-columns:1fr;gap:4px;padding:13px 15px 16px}.demo-tour-caption strong{font-size:14px}.demo-tour-caption>span:nth-of-type(2){font-size:10px}.demo-explorer-layout{min-height:265px}.demo-explorer-layout>.demo-card{min-height:265px}.demo-runtime-map{height:230px}.demo-footer{gap:7px}.demo-stages{flex:1;display:flex;min-width:0}.demo-stages button{font-size:9px;padding:8px 5px}.demo-footer>button{font-size:9px}}
@media(max-width:430px){.demo-scene{padding:17px;min-height:420px}.demo-scene-head{margin-bottom:14px}.demo-scene-head h2{font-size:18px}.demo-scene-head p{font-size:10px}.demo-scene-chip{display:none}.demo-runtime-map{height:220px}.demo-map-node{height:72px;padding:7px;width:28%}.demo-map-node>span{width:18px;height:18px;font-size:11px}.demo-map-node b{font-size:9px}.demo-map-node small{font-size:8px}.demo-node-web{left:3%;top:27px}.demo-node-api{left:36%;top:27px}.demo-node-mcp{right:3%;top:27px}.demo-node-db{left:36%;top:126px}.demo-runtime-bottom{align-items:stretch}.demo-runtime-bottom>span{font-size:8px;min-width:0;padding:10px}.demo-runtime-bottom button{font-size:9px;padding:8px}.demo-explorer-layout,.demo-verify-layout{grid-template-columns:1fr;gap:8px}.demo-explorer-layout>.demo-card{min-height:0}.demo-tool-list,.demo-table-list{display:flex;flex-wrap:wrap;gap:4px}.demo-tool-list .demo-card-label,.demo-table-list .demo-card-label{width:100%;margin-bottom:2px}.demo-tool-list button,.demo-table-list button{width:auto;flex:1;min-width:70px;display:block;padding:8px 6px}.demo-tool-list button+button,.demo-table-list button+button{margin:0}.demo-tool-list button b,.demo-table-list button b{font-size:9px}.demo-tool-list button small,.demo-table-list button small{display:block;text-align:left;font-size:7px}.demo-tool-result{min-height:170px!important}.demo-tool-result code{font-size:9px;padding:9px}.demo-tool-result>div{padding:8px;min-height:36px;font-size:8px;margin:6px 0}.demo-tool-result button{font-size:9px;padding:8px}.demo-readonly{display:none}.demo-table-preview{min-height:180px!important}.demo-table-row{padding:8px 6px;font-size:8px}.demo-test-summary{min-height:140px!important}.demo-test-summary>b{font-size:26px;margin:3px 0}.demo-test-bar{margin:6px 0}.demo-test-summary p{font-size:9px;margin:3px 0}.demo-test-summary button{margin-top:5px;font-size:9px;padding:7px}.demo-check-list{min-height:200px!important}.demo-check-list>div{min-height:31px}.demo-check-list>div b{font-size:9px}.demo-check-list>div small{font-size:8px}.demo-check-list>p{font-size:8px;padding-top:7px}.demo-stages{display:grid;grid-template-columns:repeat(4,1fr);width:100%}.demo-stages button{font-size:8px}.demo-footer>button{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.demo-scene,.tour-playing .demo-scene.active,.demo-map-node.starting,.demo-check-list>div.checking>span{animation:none!important}.demo-tour-progress i,.demo-map-node,.demo-runtime-map svg{transition:none!important}}

/* A guided product story with eleven short, independently explorable beats. */
.demo-sidebar{padding-bottom:12px}.demo-side-link{height:31px}.demo-side-label{margin-top:12px}
.demo-stages{min-width:0;flex:1;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#69879a transparent;white-space:nowrap;scroll-behavior:smooth}
.demo-stages button{flex:none;padding:9px 8px;font-size:9px}.demo-footer>button{flex:none}
.tour-playing .demo-scene.active[data-demo-scene="spec"] .demo-spec-detail p:first-of-type{animation:story-glow 2.8s ease both}
.tour-playing .demo-scene.active[data-demo-scene~="map"] .demo-map-node{animation:story-rise .55s both}
.tour-playing .demo-scene.active[data-demo-scene~="map"] .demo-map-node:nth-of-type(2){animation-delay:.18s}.tour-playing .demo-scene.active[data-demo-scene~="map"] .demo-map-node:nth-of-type(3){animation-delay:.36s}.tour-playing .demo-scene.active[data-demo-scene~="map"] .demo-map-node:nth-of-type(4){animation-delay:.54s}
@keyframes story-glow{0%{box-shadow:0 0 0 0 #6cab9820}35%{box-shadow:0 0 0 5px #6cab9840}100%{box-shadow:0 0 0 0 #6cab9800}}
@keyframes story-rise{from{opacity:.2;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.demo-env-panel{min-height:290px;display:flex;flex-direction:column;justify-content:center;gap:17px;padding:28px 32px;background:linear-gradient(135deg,#fff,#f1f7f7)}
.demo-env-panel .demo-card-label{margin:0}.demo-env-row{display:flex;align-items:center;gap:16px;border:1px solid #e1eaed;border-radius:11px;padding:17px;background:#fff}
.demo-env-indicator{display:grid;place-items:center;width:35px;height:35px;flex:none;background:#fff0db;border-radius:9px;color:#a46e2a;font-size:18px;font-weight:800}
.demo-env-row div{min-width:0}.demo-env-row b{display:block;font:700 15px ui-monospace,SFMono-Regular,Consolas,monospace;color:#335568}.demo-env-row small{display:block;font-size:10px;color:#8097a4;margin-top:4px}.demo-env-row strong{margin-left:auto;white-space:nowrap;font-size:10px;color:#a46e2a}
.demo-env-panel button{align-self:flex-start;border:0;border-radius:7px;background:#365f72;color:#fff;padding:10px 13px;font-size:11px;font-weight:700;cursor:pointer}.demo-env-panel button:hover{background:#497b90}
.demo-env-panel p{max-width:420px;margin:0;color:#8095a0;font-size:10px}.demo-env-panel.configured .demo-env-indicator{background:#e2f3e9;color:#267553}.demo-env-panel.configured .demo-env-row strong{color:#267553}
.demo-tool-result .demo-cli-equivalent{display:flex;flex-direction:column;gap:5px;margin:12px 0 10px;color:#7894a0;font-size:8px;font-weight:800;letter-spacing:.1em}
.demo-tool-result .demo-cli-equivalent code{font-size:10px;padding:9px 11px;letter-spacing:0;font-weight:500}
.demo-scene.active[data-demo-scene="data"] .demo-order-match{background:#e5f3ec;animation:story-glow 2.2s ease both}
.demo-evidence-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;min-height:300px}
.demo-evidence-grid .demo-card{min-height:300px}.demo-evidence-hero{display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#fff,#f2f8f5)}
.demo-evidence-hero>b{font-size:29px;line-height:1.12;letter-spacing:-.055em;color:#305769}.demo-evidence-hero>b span{display:inline-grid;place-items:center;width:33px;height:33px;border-radius:50%;background:#e1f3e8;color:#318460;font-size:19px;vertical-align:middle}
.demo-evidence-hero>p{max-width:310px;font-size:11px;line-height:1.55;color:#78909d;margin:13px 0 20px}.demo-evidence-chain{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.demo-evidence-chain span{background:#e7f1f1;border:1px solid #d5e6e5;border-radius:5px;padding:7px 8px;color:#3c6573;font:700 9px ui-monospace,SFMono-Regular,Consolas,monospace}.demo-evidence-chain i{font-style:normal;color:#7ba599}
.demo-evidence-note{display:block;margin-top:13px;color:#8ca3ab;font-size:8px;line-height:1.35}
.demo-evidence-activity{display:flex;flex-direction:column;justify-content:center}.demo-evidence-activity>div{display:grid;grid-template-columns:14px 1fr;column-gap:8px;border-top:1px solid #e3ecee;padding:15px 0}.demo-evidence-activity>div span{grid-row:span 2;color:#3d9b74}.demo-evidence-activity b{font-size:11px;color:#355a6c}.demo-evidence-activity small{font-size:9px;color:#8ca2ae;margin-top:3px}
.demo-scene.active[data-demo-scene="evidence"] .demo-evidence-chain span{animation:evidence-appear .45s both}.demo-scene.active[data-demo-scene="evidence"] .demo-evidence-chain span:nth-of-type(2){animation-delay:.15s}.demo-scene.active[data-demo-scene="evidence"] .demo-evidence-chain span:nth-of-type(3){animation-delay:.3s}.demo-scene.active[data-demo-scene="evidence"] .demo-evidence-chain span:nth-of-type(4){animation-delay:.45s}
@keyframes evidence-appear{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
html[data-theme="dark"] .demo-env-panel,html[data-theme="dark"] .demo-evidence-hero{background:linear-gradient(145deg,#203547,#1d3d43)}
html[data-theme="dark"] .demo-env-row{background:#192e3e;border-color:#3b5a67}html[data-theme="dark"] .demo-env-row b,html[data-theme="dark"] .demo-evidence-hero>b,html[data-theme="dark"] .demo-evidence-activity b{color:#e4f0f1}
html[data-theme="dark"] .demo-env-panel p,html[data-theme="dark"] .demo-evidence-hero>p,html[data-theme="dark"] .demo-env-row small{color:#a9c0c9}
html[data-theme="dark"] .demo-evidence-chain span{background:#244453;border-color:#41636a;color:#c9e3e2}html[data-theme="dark"] .demo-evidence-activity>div{border-color:#3b5662}
html[data-theme="dark"] .demo-scene.active[data-demo-scene="data"] .demo-order-match{background:#244d43}
@media(max-width:700px){.demo-footer{flex-wrap:nowrap}.demo-stages{display:flex;min-width:0;width:auto}.demo-stages button{font-size:9px;min-width:70px;padding:8px 7px}.demo-footer>button{font-size:9px;padding:9px}.demo-env-panel{min-height:310px;padding:19px}}
@media(max-width:430px){.demo-stages{display:flex;grid-template-columns:none;width:auto}.demo-stages button span{display:inline}.demo-stages button{min-width:65px;font-size:8px}.demo-footer>button{max-width:104px;white-space:normal;line-height:1.15}.demo-env-row{flex-wrap:wrap;padding:13px}.demo-env-row strong{margin-left:51px}.demo-evidence-grid{grid-template-columns:1fr;gap:8px}.demo-evidence-grid .demo-card{min-height:0}.demo-evidence-hero{padding:15px}.demo-evidence-hero>b{font-size:22px}.demo-evidence-hero>p{margin:7px 0 10px}.demo-evidence-activity{padding:12px 15px}.demo-evidence-activity>div{padding:5px 0}.demo-evidence-chain span{padding:5px;font-size:7px}}
@media(prefers-reduced-motion:reduce){.demo-scene.active[data-demo-scene="evidence"] .demo-evidence-chain span,.tour-playing .demo-scene.active[data-demo-scene="spec"] .demo-spec-detail p:first-of-type,.tour-playing .demo-scene.active[data-demo-scene~="map"] .demo-map-node,.demo-scene.active[data-demo-scene="data"] .demo-order-match{animation:none}}

/* The Services step follows the desktop app's individual service rows. */
.demo-services-panel{border:1px solid #dbe6e9;border-radius:11px;overflow:hidden;background:#fff}
.demo-services-title{padding:15px 18px;background:#f5f8f9;border-bottom:1px solid #dbe6e9}
.demo-services-title b{display:block;font-size:13px;color:#34556a}.demo-services-title small{display:block;margin-top:3px;font-size:9px;color:#8096a1}
.demo-service-row{display:flex;align-items:center;gap:12px;min-height:70px;padding:10px 15px;border-top:1px solid #e6edef;transition:background .3s}
.demo-service-row:first-of-type{border-top:0}.demo-service-row.starting{background:#fff9ee}.demo-service-row.running{background:#f5fbf8}
.demo-service-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;background:#e6eef2;border-radius:7px;color:#4d7388;font-size:14px}
.demo-service-info{min-width:0;flex:1}.demo-service-info b{display:flex;align-items:center;gap:7px;font-size:11px;color:#304d5d}.demo-service-info small{display:block;margin-top:5px;color:#8a9ca5;font:9px ui-monospace,SFMono-Regular,Consolas,monospace}
.demo-service-info em{font:700 8px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-style:normal;color:#718998;background:#e8eef1;border-radius:99px;padding:4px 6px}
.demo-service-row.starting em{color:#966627;background:#fff0d8}.demo-service-row.running em{color:#26775b;background:#def3e9}
.demo-service-row button{border:1px solid #d4e1e6;background:#fff;color:#365b6d;border-radius:6px;padding:7px 10px;min-width:53px;cursor:pointer;font-size:10px;font-weight:700;white-space:nowrap}
.demo-service-row button:hover,.demo-service-row button:focus-visible{background:#e7f1f4;outline:none;border-color:#92b4c2}
.demo-services-note{margin:13px 2px 0;font-size:10px;color:#819aa6;min-height:22px}
html[data-theme="dark"] .demo-services-panel{background:#203243;border-color:#3b5665}html[data-theme="dark"] .demo-services-title{background:#243a4d;border-color:#3b5665}
html[data-theme="dark"] .demo-services-title b,html[data-theme="dark"] .demo-service-info b{color:#e7f1f3}html[data-theme="dark"] .demo-services-title small,html[data-theme="dark"] .demo-service-info small,html[data-theme="dark"] .demo-services-note{color:#9eb5c0}
html[data-theme="dark"] .demo-service-row{border-color:#344e5d}html[data-theme="dark"] .demo-service-row.starting{background:#3d392f}html[data-theme="dark"] .demo-service-row.running{background:#24423e}
html[data-theme="dark"] .demo-service-icon,html[data-theme="dark"] .demo-service-info em{background:#345064;color:#bdcfda}html[data-theme="dark"] .demo-service-row.starting em{background:#5b4b30;color:#f1d49c}html[data-theme="dark"] .demo-service-row.running em{background:#285947;color:#b9e9cd}
html[data-theme="dark"] .demo-service-row button{background:#253e51;border-color:#486276;color:#deebf1}html[data-theme="dark"] .demo-service-row button:hover,html[data-theme="dark"] .demo-service-row button:focus-visible{background:#34566c}
@media(max-width:430px){.demo-service-row{gap:7px;min-height:60px;padding:7px 9px}.demo-service-icon{width:24px;height:24px;font-size:11px}.demo-service-info b{font-size:9px;gap:4px}.demo-service-info small{font-size:7px}.demo-service-info em{font-size:7px;padding:3px 4px}.demo-service-row button{font-size:8px;min-width:42px;padding:6px 5px}.demo-services-title{padding:10px 12px}}

/* Product-owner views follow the desktop app's document, board and metric patterns. */
.demo-sidebar .demo-side-label-build{margin-top:11px}
.demo-product-vision{display:grid;grid-template-columns:.5fr 1.5fr;gap:11px;min-height:300px}
.demo-product-vision>.demo-card{min-height:300px}.demo-vision-prompts{display:flex;flex-direction:column;gap:0;background:#f3f7f8}
.demo-vision-prompts .demo-card-label{margin-bottom:12px}.demo-vision-prompts>span:not(.demo-card-label){border-top:1px solid #dde8eb;padding:12px 0;color:#567485;font-size:11px;font-weight:650}
.demo-vision-prompts small{margin-top:auto;color:#8aa0aa;font-size:9px;line-height:1.4}
.demo-vision-document{background:#fff}.demo-product-document-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #e4ecee;padding-bottom:12px;margin-bottom:17px}
.demo-product-document-head>span:first-child{font-size:8px;letter-spacing:.1em;font-weight:750;color:#7893a1}.demo-product-document-head code{font:9px ui-monospace,SFMono-Regular,Consolas,monospace;color:#638093;letter-spacing:0}
.demo-product-document-head>span:last-child{border:1px solid #d6e4e9;border-radius:5px;padding:6px 8px;font-size:9px;font-weight:650;color:#4d6c7d;white-space:nowrap}
.demo-vision-document h3{font-size:19px;line-height:1.2;letter-spacing:-.04em;color:#355466;max-width:430px;margin:0 0 17px}
.demo-vision-document p{font-size:11px;line-height:1.5;color:#708a98;margin:8px 0}.demo-vision-document p b{color:#3e6070}
.demo-roadmap-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:270px}
.demo-roadmap-lane{border:1px solid #dce7ea;background:#f4f7f8;border-radius:9px;min-width:0;padding:11px}.demo-roadmap-lane.current{background:#e9f3f6;border-color:#b9d3df}
.demo-roadmap-lane>div{display:flex;align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid #dee9ec}.demo-roadmap-lane>div i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid #98adba}.demo-roadmap-lane.current>div i{background:#6d9bb1;border-color:#6d9bb1}
.demo-roadmap-lane>div b{font-size:9px;color:#4c6978;white-space:nowrap}.demo-roadmap-lane>div small{margin-left:auto;font-size:9px;color:#8ca2ae}
.demo-roadmap-lane article{background:#fff;border:1px solid #e0e9ec;border-radius:7px;margin-top:12px;padding:11px 9px;min-height:100px;box-shadow:0 4px 12px #395e6b0c}
.demo-roadmap-lane article strong{display:block;color:#35586a;font-size:10px;line-height:1.3}.demo-roadmap-lane article p{color:#8298a3;font-size:9px;line-height:1.4;margin:7px 0}.demo-roadmap-lane article small{display:block;color:#7295a6;font-size:8px;margin-top:10px}
.demo-product-note{font-size:9px;line-height:1.45;color:#8198a5;margin:11px 2px 0}
.demo-north-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:11px;min-height:276px}.demo-north-layout>.demo-card{min-height:276px}
.demo-north-current{background:#fff;display:flex;flex-direction:column}.demo-north-current>div{display:flex;align-items:center;gap:12px;margin:13px 0 2px}.demo-north-current>div b{font-size:52px;letter-spacing:-.07em;line-height:1;color:#355f71}.demo-north-current>div span{font-size:11px;line-height:1.3;color:#6a8795}.demo-north-current>div span small{font-size:9px;color:#91a5ae}
.demo-north-current p{color:#8a9eaa;font-size:9px;line-height:1.5;margin:5px 0 0}.demo-north-current button{align-self:flex-start;margin-top:auto;background:#476f83;color:#fff;border:0;border-radius:6px;padding:9px 11px;font-size:9px;font-weight:750;cursor:pointer}.demo-north-current button:hover{background:#345c70}
.demo-north-history{background:#fff}.demo-north-history>.demo-card-label{margin-bottom:4px}.demo-north-history>small{display:block;font-size:9px;color:#94a8b1}
.demo-north-history svg{width:100%;height:155px;margin-top:9px;overflow:visible}.demo-north-history svg .demo-north-grid{fill:none;stroke:#e3ecee;stroke-width:1}.demo-north-history svg polyline{fill:none;stroke:#5c96a6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:all .45s}.demo-north-history svg circle{fill:#fff;stroke:#5c96a6;stroke-width:3}.demo-north-history svg circle[hidden]{display:none}.demo-north-history>div{display:flex;justify-content:space-between;font-size:8px;color:#92a8b1}
.tour-playing .demo-scene.active[data-demo-scene="vision"] .demo-vision-document h3{animation:story-glow 2.8s ease both}.tour-playing .demo-scene.active[data-demo-scene="roadmap"] .demo-roadmap-lane.current article{animation:story-glow 2.8s ease both}
html[data-theme="dark"] .demo-vision-prompts,html[data-theme="dark"] .demo-roadmap-lane{background:#213748;border-color:#3c5968}html[data-theme="dark"] .demo-roadmap-lane.current{background:#254658;border-color:#527d8b}
html[data-theme="dark"] .demo-vision-document,html[data-theme="dark"] .demo-north-current,html[data-theme="dark"] .demo-north-history,html[data-theme="dark"] .demo-roadmap-lane article{background:#203445;border-color:#3b5868}
html[data-theme="dark"] .demo-product-document-head,html[data-theme="dark"] .demo-vision-prompts>span:not(.demo-card-label),html[data-theme="dark"] .demo-roadmap-lane>div{border-color:#3b5666}
html[data-theme="dark"] .demo-vision-document h3,html[data-theme="dark"] .demo-vision-document p b,html[data-theme="dark"] .demo-roadmap-lane article strong,html[data-theme="dark"] .demo-north-current>div b{color:#e6f2f2}
html[data-theme="dark"] .demo-vision-document p,html[data-theme="dark"] .demo-vision-prompts>span:not(.demo-card-label),html[data-theme="dark"] .demo-roadmap-lane>div b,html[data-theme="dark"] .demo-north-current>div span{color:#b7ced4}
html[data-theme="dark"] .demo-product-document-head>span:last-child{border-color:#4d6e7c;color:#c0d6df}html[data-theme="dark"] .demo-north-history svg .demo-north-grid{stroke:#3c5968}html[data-theme="dark"] .demo-north-history svg circle{fill:#203445;stroke:#84bcc3}html[data-theme="dark"] .demo-north-history svg polyline{stroke:#84bcc3}
@media(max-width:1020px){.demo-sidebar .demo-side-link{height:28px}.demo-sidebar .demo-side-label{margin-top:9px;margin-bottom:5px}}
@media(max-width:700px){.demo-product-vision{grid-template-columns:.55fr 1.45fr}.demo-roadmap-board{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}.demo-roadmap-lane{min-height:125px}.demo-roadmap-lane article{min-height:75px}.demo-north-layout{min-height:0}.demo-north-layout>.demo-card{min-height:245px}}
@media(max-width:430px){.demo-product-vision{display:block;min-height:0}.demo-product-vision>.demo-card{min-height:0}.demo-vision-prompts{display:none}.demo-vision-document h3{font-size:17px}.demo-vision-document p{font-size:10px}.demo-roadmap-board{gap:5px}.demo-roadmap-lane{padding:7px}.demo-roadmap-lane>div b{font-size:8px}.demo-roadmap-lane article{padding:7px;min-height:70px;margin-top:7px}.demo-roadmap-lane article strong{font-size:9px}.demo-roadmap-lane article p{font-size:8px}.demo-roadmap-lane article small{font-size:7px;margin-top:3px}.demo-north-layout{grid-template-columns:1fr;gap:7px}.demo-north-layout>.demo-card{min-height:0}.demo-north-current{padding:12px}.demo-north-current>div{margin:5px 0}.demo-north-current>div b{font-size:38px}.demo-north-current button{margin-top:8px}.demo-north-history{padding:11px}.demo-north-history svg{height:85px;margin-top:2px}.demo-product-note{font-size:8px;margin-top:7px}}
@media(prefers-reduced-motion:reduce){.tour-playing .demo-scene.active[data-demo-scene="vision"] .demo-vision-document h3,.tour-playing .demo-scene.active[data-demo-scene="roadmap"] .demo-roadmap-lane.current article{animation:none}}