/* Motion System adaptations: Globe 3D (via home-motion.js), animated grid,
   and animated connections. All colors and typography use the shared site tokens. */
.demo-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;align-items:center;padding-top:76px;padding-bottom:70px;border-top:0}
.demo-intro .h-display{font-size:clamp(2.8rem,5.1vw,4.25rem);margin-bottom:24px}
.demo-intro .lede{max-width:440px;margin-bottom:28px}.demo-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.demo-primary{background:var(--geo);color:var(--bg-card);border:1px solid var(--geo)}.demo-primary:hover{filter:brightness(.94);transform:translateY(-1px)}
.demo-note,.demo-disclosure{font-size:.78rem;color:var(--muted);margin-top:20px}.demo-world{height:425px;position:relative;border:1px solid var(--a10);border-radius:var(--r-lg);background:var(--bg-lighter);overflow:hidden}.demo-world:focus-visible{outline:2px solid var(--geo);outline-offset:5px}.demo-world .hm-globe{position:absolute;width:100%;height:auto;inset:6px 0 0;max-width:none}.demo-world-label{position:absolute;top:24px;left:24px;font:9px var(--mono);letter-spacing:.09em;color:var(--muted);z-index:1}.demo-world-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:18px 20px;border-top:1px solid var(--a8);background:var(--bg-card);font:9px var(--mono);color:var(--muted);gap:12px}.demo-float{position:absolute;display:flex;gap:8px;align-items:center;background:var(--bg-card);padding:11px 14px;border:1px solid var(--a10);border-radius:var(--r-sm);font-size:.72rem;box-shadow:0 8px 28px var(--a6)}.demo-float-a{top:110px;left:16px}.demo-float-b{bottom:90px;right:16px}.demo-dot{height:6px;width:6px;border-radius:50%;background:var(--geo)}
.demo-grid{position:absolute;inset:0;background-image:linear-gradient(var(--a4) 1px,transparent 1px),linear-gradient(90deg,var(--a4) 1px,transparent 1px);background-size:36px 36px}.demo-grid i{position:absolute;width:36px;height:36px;background:var(--geo-soft);animation:demo-grid-pulse 6s ease-in-out infinite}.demo-grid i:nth-child(1){top:72px;left:36px}.demo-grid i:nth-child(2){top:252px;right:36px;animation-delay:-3s}.demo-grid i:nth-child(3){top:36px;right:108px;animation-delay:-1s}.demo-grid i:nth-child(4){bottom:72px;left:108px;animation-delay:-4s}
.demo-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}.demo-heading .h-section{max-width:610px}.demo-sample,.demo-example,.demo-micro{font:10px var(--mono);letter-spacing:.06em;color:var(--muted)}.demo-sample{white-space:nowrap;border:1px solid var(--a10);padding:8px 12px;border-radius:var(--r-sm);background:var(--bg-card)}.demo-workspace{display:grid;grid-template-columns:300px 1fr;background:var(--bg-card);border:1px solid var(--a12);border-radius:var(--r-lg);overflow:hidden}.demo-steps{background:var(--bg-lighter);border-right:1px solid var(--a10);padding:18px;display:flex;flex-direction:column;gap:10px}.demo-steps [role=tab]{font:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:9px;padding:20px 16px;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--ink)}.demo-steps [role=tab]>span{font:10px var(--mono);letter-spacing:.07em;color:var(--muted)}.demo-steps strong{font-size:.96rem;font-weight:500}.demo-steps small{font-size:.76rem;color:var(--muted)}.demo-steps [aria-selected=true]{border-color:var(--geo);background:var(--bg-card);box-shadow:0 3px 14px var(--a3)}.demo-steps [aria-selected=true]>span{color:var(--geo)}.demo-steps [role=tab]:hover{background:var(--geo-soft)}.demo-controls{margin-top:auto;padding:12px 0 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-controls>span{font:10px var(--mono);color:var(--muted)}.demo-panel{min-width:0}.demo-browser-bar{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--a8);font:10px var(--mono);color:var(--faint)}.demo-browser-bar>span:nth-child(2){color:var(--muted)}.demo-scene{padding:30px;min-height:395px;animation:demo-enter .4s ease both}.demo-scene[hidden]{display:none}.demo-micro{color:var(--geo)}.demo-scene h3{font-size:1.55rem;font-weight:500;letter-spacing:-.035em;line-height:1.2;margin:13px 0 10px}.demo-scene-head p{font-size:.86rem;color:var(--muted);max-width:390px;margin-bottom:26px}.demo-source{display:flex;gap:12px;align-items:center;border:1px solid var(--a8);border-radius:var(--r-sm);padding:15px 12px;margin-top:10px}.demo-source strong{font-size:.84rem;font-weight:500}.demo-source small{display:block;font-size:.68rem;color:var(--muted);margin-top:3px}.demo-file{display:grid;place-items:center;flex-shrink:0;width:32px;height:36px;background:var(--geo-soft);color:var(--geo);border-radius:5px}.demo-tag{margin-left:auto;font:9px var(--mono);color:var(--muted)}.demo-network{position:relative;height:180px;margin:0 -12px}.demo-network svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.demo-tracks{stroke:var(--a12);fill:none;stroke-width:1}.demo-beams{stroke:var(--geo);fill:none;stroke-width:2;stroke-dasharray:25 440;animation:demo-beam 4s linear infinite}.demo-node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;text-align:center;background:var(--bg-card);border:1px solid var(--a12);border-radius:var(--r-sm);width:77px;height:38px;font:10px var(--mono)}.node-a{left:14%;top:17%}.node-b{left:14%;top:50%}.node-c{left:14%;top:83%}.node-hub{left:50%;top:50%;width:64px;height:64px;border-color:var(--geo);box-shadow:0 0 0 8px var(--geo-soft)}.node-end{left:86%;top:50%;height:52px}.demo-scene-caption{font-size:.7rem;color:var(--muted);margin-top:22px;text-align:center}.demo-question{padding:13px 18px;background:var(--geo-soft);border-radius:var(--r-sm);font-size:.87rem;margin-bottom:18px}.demo-answer{border:1px solid var(--a10);border-radius:var(--r-sm);padding:20px}.demo-answer>p{font-size:.89rem;margin:12px 0 18px;line-height:1.8}.demo-answer a{color:var(--geo)}#demo-sources{border-top:1px solid var(--a8);padding-top:13px;font-size:.7rem;color:var(--muted)}#demo-sources span{background:var(--geo-soft);color:var(--geo);padding:2px 6px;margin-right:6px;border-radius:3px}.demo-next{text-align:center}.demo-next .lede{max-width:560px;margin:22px auto 28px}.demo-next .demo-actions{justify-content:center}.demo-walkthrough{scroll-margin-top:70px}.demo-steps button:focus-visible{outline:2px solid var(--geo);outline-offset:3px}
@keyframes demo-grid-pulse{0%,100%{opacity:.2}50%{opacity:1}}@keyframes demo-beam{to{stroke-dashoffset:-465}}@keyframes demo-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.demo-hero{gap:24px;grid-template-columns:1fr 1fr}.demo-world{height:355px}.demo-float{font-size:.65rem;padding:9px}.demo-world-bottom{font-size:8px}.demo-workspace{grid-template-columns:250px 1fr}.demo-scene{padding:22px}.demo-tag{display:none}.demo-sample{display:none}}
@media(max-width:650px){.demo-hero{grid-template-columns:1fr;padding-top:45px;padding-bottom:38px}.demo-intro .h-display{font-size:3.1rem}.demo-intro .lede{max-width:100%}.demo-world{height:355px;max-width:440px;width:100%;margin:8px auto 0}.demo-world .hm-globe{width:360px;left:calc(50% - 180px)}.demo-world-label{font-size:8px}.demo-workspace{grid-template-columns:1fr}.demo-steps{border-right:0;border-bottom:1px solid var(--a10);display:grid;grid-template-columns:repeat(3,1fr);padding:12px;gap:7px}.demo-steps [role=tab]{padding:13px 8px;gap:6px}.demo-steps [role=tab]>span{font-size:8px;letter-spacing:0}.demo-steps strong{font-size:.76rem;line-height:1.4}.demo-steps small{display:none}.demo-controls{grid-column:1/-1}.demo-scene{padding:24px 18px;min-height:395px}.demo-heading{margin-bottom:24px}.demo-source{gap:9px}.demo-source small{font-size:.65rem}.demo-browser-bar{padding:16px}.demo-network{margin:0}.demo-node{width:65px;font-size:9px}.demo-disclosure{line-height:1.7}}
@media(prefers-reduced-motion:reduce){.demo-grid i,.demo-beams,.demo-scene{animation:none}.demo-beams{stroke-dasharray:none;opacity:.45}}
