.live-demo {padding-top:44px;padding-bottom:30px}
.demo-intro {display:flex;justify-content:space-between;align-items:center;gap:28px;margin-bottom:28px}
.demo-intro h1 {font-size:clamp(2.3rem,4.3vw,4rem);letter-spacing:-.055em;line-height:1.1;margin:14px 0 16px;font-weight:500}
.demo-intro h1 em {font-style:normal;color:#587749}
.demo-intro .lead {font-size:16px;max-width:660px;margin:0}
.network-pill {display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:40px;padding:12px 16px;white-space:nowrap;font:10px monospace;letter-spacing:.02em}
.network-pill .status-dot {width:6px;height:6px}
.demo-connection {display:flex;align-items:center;gap:10px;padding:13px 17px;border:1px solid var(--line);border-radius:8px;font-size:11px;margin-bottom:24px;flex-wrap:wrap}
.demo-connection strong {font-weight:600}.demo-connection #setup-message {color:var(--muted);margin-left:auto;max-width:52%;overflow-wrap:anywhere}
.connection-light {width:7px;height:7px;border-radius:50%;background:#b5934b}.connection-light[data-ready=true] {background:#388559}
.demo-workspace {display:grid;grid-template-columns:340px minmax(0,1fr);gap:24px;align-items:start}
.demo-console {border:1px solid var(--line);background:var(--white);border-radius:12px;overflow:hidden}
.console-heading {display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);gap:8px}.console-heading .eyebrow {margin:0;font-size:9px}
.demo-console .demo-card {border:0;border-bottom:1px solid var(--line);border-radius:0;padding:22px;background:transparent}
.demo-console h2 {font-size:22px;letter-spacing:-.035em;margin:8px 0 20px}.demo-console .demo-card .eyebrow {font-size:9px;margin:0}
.demo-console label {font-size:11px}.demo-console .demo-card input,.demo-console .demo-card select {padding:11px 10px;font-size:12px;min-height:43px;width:100%;min-width:0}.demo-console .demo-card .button {margin-top:14px;min-height:44px;padding:12px 16px;font-size:12px;width:100%}
.form-pair {display:grid;grid-template-columns:1.2fr 1fr;gap:12px}.form-pair>div {min-width:0}
.demo-console .demo-help {font-size:11px;line-height:1.6}
.demo-console .demo-session {margin:0;border-radius:0;padding:16px 22px;flex-direction:column;align-items:stretch;gap:12px}.demo-session p {font-size:10px;line-height:1.6;margin:0}
.live-demo .button-revoke {justify-content:center;min-height:42px;padding:11px 16px;border:1px solid #b77d6c;border-radius:6px;background:transparent;color:#852f20;font-size:12px;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.live-demo .button-revoke:hover:not(:disabled) {background:#f4e3dc;border-color:#852f20;transform:none}.live-demo .button-revoke:focus-visible {outline:3px solid #852f20;outline-offset:3px}.live-demo .button-revoke:disabled {background:transparent;transform:none}
.live-demo button:disabled {opacity:.45;cursor:not-allowed}.live-demo [hidden] {display:none!important}
.field-error:not(:empty) {margin:14px 22px;font-size:12px}.demo-console #live-resume {margin:0 22px 14px}
.funding-details {padding:18px 22px;font-size:11px;border-top:1px solid var(--line)}.live-demo summary {cursor:pointer;font-weight:600}.testnet-funding {margin:18px 0}.testnet-funding dt {font-size:10px;color:var(--muted);margin-top:15px}.testnet-funding dd {margin:6px 0;display:flex;flex-direction:column;gap:7px}.testnet-funding code {overflow-wrap:anywhere;font-size:10px}
.flow-panel {padding:28px;border:1px solid var(--line);border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#FAF2DC 0%,var(--paper) 65%);min-width:0}
.flow-heading {display:flex;align-items:center;justify-content:space-between;gap:16px}.flow-heading .eyebrow {margin:0 0 10px;font-size:9px}.flow-heading h2 {font-size:28px;line-height:1.1;letter-spacing:-.045em;margin:0}.flow-live {font:9px monospace;color:var(--muted);border:1px solid var(--line);padding:7px 8px;border-radius:4px;white-space:nowrap}
.flow-caption {font-size:12px;color:var(--muted);line-height:1.5;min-height:36px;margin:16px 0 22px}
.flow-node {background:var(--white);border:1px solid #cbd5c4;border-radius:8px;padding:18px;transition:border-color .2s,background .2s;min-width:0}.flow-node .eyebrow {font-size:9px;margin:0 0 7px}.flow-node h3 {font-size:18px;letter-spacing:-.03em;margin:0;font-weight:600}.flow-node .node-detail {font-size:11px;line-height:1.6;margin:7px 0 0;color:var(--muted)}
.authority-node,.assembly-node,.destination-node {display:flex;align-items:center;gap:14px}.authority-node>div,.assembly-node>div,.destination-node>div {flex:1;min-width:0}
.node-icon {display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;font:18px monospace;background:var(--paper)}
.node-status {font:9px monospace;white-space:nowrap;align-self:flex-start;color:var(--muted);padding:5px 7px;background:var(--light);border-radius:4px}
.flow-node[data-state=verified] {border-color:#759c5c}.flow-node[data-state=verified] .node-status {color:#244c27;background:var(--accent)}
.flow-node[data-state=active] {border-color:#628e3f;box-shadow:0 0 0 2px var(--accent-glow)}.flow-node[data-state=active] .node-status {background:var(--accent-soft);color:#3d6226;animation:status-pulse 1.8s ease-in-out infinite}
.flow-node[data-state=failed],.flow-node[data-state=uncertain] {border-color:#bb8974}.flow-node[data-state=failed] .node-status,.flow-node[data-state=uncertain] .node-status {background:#f3e4d9;color:#852f20}
.flow-fork,.flow-join {height:30px;display:flex;position:relative;padding:0 24%}.flow-fork span,.flow-join span {flex:1;border-top:1px solid #9cac8f;margin-top:15px;position:relative}.flow-fork span:first-child {border-left:1px solid #9cac8f;border-radius:8px 0 0 0}.flow-fork span:last-child {border-right:1px solid #9cac8f;border-radius:0 8px 0 0}.flow-fork:before {content:'';position:absolute;left:50%;height:15px;border-left:1px solid #9cac8f;top:0}
.flow-signers {display:grid;grid-template-columns:1fr 1fr;gap:16px}.signer-node {padding:17px}.signer-heading {display:flex;justify-content:space-between;gap:6px;align-items:start}.signer-heading .eyebrow {font-size:8px;line-height:1.5;max-width:96px}.signer-heading .node-status {font-size:8px}
.share-illustration {display:flex;align-items:center;gap:8px;margin:7px 0 8px}.share-illustration svg {width:70px;height:62px;fill:var(--accent-soft);stroke:#385c39;stroke-width:1.5;flex-shrink:0}.share-illustration .mono {font-size:8px;color:var(--muted)}.signer-node .node-detail {min-height:38px}.signer-evidence {font:9px monospace;line-height:1.7;border-top:1px dashed var(--line);padding-top:12px;margin:12px 0 0;color:var(--muted);overflow-wrap:anywhere}
.flow-join {height:40px}.flow-join span {margin-top:0;height:19px;border-top:0;border-bottom:1px solid #9cac8f}.flow-join span:first-child {border-left:1px solid #9cac8f;border-radius:0 0 0 8px}.flow-join span:nth-child(2) {border-right:1px solid #9cac8f;border-radius:0 0 8px 0}.flow-join b {position:absolute;left:50%;top:12px;transform:translateX(-50%);background:var(--paper);font:8px monospace;padding:3px 7px;color:var(--muted)}.flow-join:after {content:'';position:absolute;left:50%;height:13px;bottom:0;border-left:1px solid #9cac8f}
.assembly-node {background:var(--ink);color:var(--paper);border-color:var(--ink)}.assembly-node .eyebrow {color:#c4d7bc}.assembly-node .node-detail {color:#c4d7bc}.assembly-node .node-icon {font-size:28px;background:#2f5040;color:var(--accent);border-color:#4c6a53}.assembly-node code {display:block;margin-top:10px;font:10px monospace;color:var(--accent);overflow-wrap:anywhere}
.flow-down {height:30px;text-align:center;color:#829974;line-height:30px}.base-icon {display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#2455e6;color:white;font-size:25px}.destination-node .text-link {display:inline-block;font-size:11px;margin-top:9px}.flow-footnote {text-align:center;font:9px monospace;line-height:1.7;color:var(--muted);margin:23px 0 0}
.activity-panel {border:1px solid var(--line);border-radius:12px;margin-top:24px;padding:26px;background:var(--white)}.activity-heading {display:flex;justify-content:space-between;gap:22px;align-items:start}.activity-heading .eyebrow {font-size:9px;margin:0 0 8px}.activity-heading h2 {font-size:25px;letter-spacing:-.04em;line-height:1.2;margin:0}.history-control label {display:block;font-size:10px;color:var(--muted);margin-bottom:7px}.history-control select {padding:8px;border:1px solid var(--line);border-radius:4px;max-width:280px;background:var(--paper);font-size:11px;color:var(--ink)}
#operation-state {font:10px monospace;color:var(--muted);margin:12px 0 18px}#operation-events {display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;padding-left:20px;font-size:12px;line-height:1.6}#operation-events li::marker {color:#739358;font:11px monospace}.testnet-links {display:flex;flex-wrap:wrap;gap:20px;margin:20px 0;font-size:12px}.activity-panel details {border-top:1px solid var(--line);padding-top:16px;margin-top:18px;font-size:11px}#operation-json {white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto;font-size:10px}.demo-disclosure {font-size:11px;max-width:950px;margin:22px 0 0;line-height:1.7}
@keyframes status-pulse {50% {opacity:.55}}
@media(prefers-reduced-motion:reduce) {.flow-node[data-state=active] .node-status {animation:none}.flow-node,.button-revoke {transition:none}}
@media(max-width:1100px) {.demo-intro {align-items:start;flex-direction:column;gap:18px}.demo-workspace {grid-template-columns:300px minmax(0,1fr);gap:18px}.flow-panel {padding:20px}.flow-node {padding:14px}.signer-heading {flex-direction:column}.share-illustration svg {width:50px}.flow-heading {align-items:start}.flow-live {font-size:8px}.demo-connection #setup-message {max-width:100%;margin-left:0}}
@media(max-width:800px) {.live-demo {padding-top:28px}.demo-workspace {grid-template-columns:1fr}.demo-console {display:grid;grid-template-columns:1fr 1fr}.console-heading,.demo-console .demo-session,.funding-details,.demo-console .field-error,.demo-console #live-resume {grid-column:1/-1}.demo-console #live-grant {border-right:1px solid var(--line)}.demo-console .demo-session {flex-direction:row;align-items:center;justify-content:space-between}.flow-panel {padding:24px}.signer-heading {flex-direction:row}.share-illustration svg {width:70px}.activity-heading {flex-direction:column}.history-control {width:100%}.history-control select {width:100%;max-width:none}.flow-node .node-status {font-size:8px}}
@media(max-width:480px) {.demo-console {display:block}.demo-console #live-grant {border-right:0}.demo-console .demo-session {flex-direction:column;align-items:stretch}.flow-panel {padding:18px 12px}.flow-heading h2 {font-size:25px}.flow-live {display:none}.flow-signers {gap:9px}.signer-heading {flex-direction:column}.share-illustration {flex-direction:column;align-items:start}.share-illustration svg {height:46px;width:55px}.signer-node .node-detail {min-height:70px}.authority-node,.assembly-node,.destination-node {flex-wrap:wrap;gap:10px}.authority-node .node-status,.assembly-node .node-status,.destination-node .node-status {margin-left:auto}.node-icon {width:32px;height:32px}.flow-node h3 {font-size:16px}.activity-panel {padding:20px}#operation-events {grid-template-columns:1fr}.network-pill {font-size:9px;padding:10px 12px}}

.flow-notice {border:1px solid #bb8974;background:#f6e9df;color:#783e28;padding:12px 14px;border-radius:6px;font-size:12px;line-height:1.6;margin:0 0 18px}
.message-step {margin-top:28px!important}.demo-console textarea,.signature-verifier textarea,.signature-verifier input {width:100%;border:1px solid #bac6b3;border-radius:5px;padding:11px;background:var(--paper);color:var(--ink);font:12px/1.6 monospace;resize:vertical;box-sizing:border-box}.demo-console textarea:focus-visible,.signature-verifier textarea:focus-visible,.signature-verifier input:focus-visible {outline:3px solid #258455;outline-offset:2px}.derived-key {margin:20px 0;padding:14px;border:1px solid var(--line);border-radius:6px;background:var(--light)}.derived-key code {display:block;overflow-wrap:anywhere;font:11px/1.7 monospace;margin:10px 0}.derived-key>span:not(.eyebrow) {display:block;font-size:10px;color:var(--muted)}.envelope-preview {font-size:11px;margin-top:15px}.envelope-preview pre {white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.6 monospace}.signature-verifier {padding:20px;background:var(--white);border:1px solid var(--line);border-radius:8px;margin-top:18px}.signature-verifier .eyebrow {font-size:9px;margin:0 0 9px}.signature-verifier h3,.signature-use h3 {font-size:20px;letter-spacing:-.03em;margin:0}.signature-verifier label {display:block;font-size:11px;margin:14px 0 8px}.signature-verifier details {font-size:11px;margin-top:12px}.signature-verifier .button {margin-top:16px;padding:12px 18px;font-size:12px;cursor:pointer;border:0}.signature-verifier #verify-result {font-size:12px;margin:12px 0 0;line-height:1.6}.signature-verifier #verify-result[data-valid=true] {color:#2c6639}.signature-verifier #verify-result[data-valid=false] {color:#852f20}.signature-use {display:flex;gap:14px;margin-top:20px;padding:20px;border:1px dashed #a5b79b;border-radius:8px}.signature-use p:last-child {font-size:12px;color:var(--muted);line-height:1.7;margin:9px 0 0}.signature-use .eyebrow {font-size:9px;margin:0 0 8px}.signature-use .node-icon {background:transparent}.demo-console #message-form {border-right:0}.assembly-node code {max-height:90px;overflow:auto;word-break:break-all}.signature-verifier :disabled {opacity:.5}
@media(max-width:800px) {.demo-console {display:block}}

.chain-picker {border:0;padding:0;margin:20px 0 0;min-width:0}
.chain-picker legend {font-size:11px;margin-bottom:10px;padding:0}
.chain-options {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.demo-console .chain-option {position:relative;display:block;margin:0;cursor:pointer}
.demo-console .demo-card .chain-option input {position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0}
.chain-choice {display:flex;align-items:center;gap:10px;min-height:60px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);transition:background .15s,border-color .15s,box-shadow .15s;font-weight:600}
.chain-choice img {width:27px;height:27px;flex-shrink:0}
.chain-option:hover .chain-choice {border-color:#759c5c;background:#FAF2DC}
.chain-option input:checked + .chain-choice {border-color:#587749;background:#e8f2dc;box-shadow:inset 0 0 0 1px #587749}
.chain-option input:checked + .chain-choice:after {content:'✓';margin-left:auto;color:#385c39;font-size:12px}
.chain-option input:focus-visible + .chain-choice {outline:3px solid #258455;outline-offset:3px}
.chain-picker:disabled .chain-option {cursor:not-allowed;opacity:.5}
@media(prefers-reduced-motion:reduce) {.chain-choice {transition:none}}

.chain-option:last-child:nth-child(odd) { grid-column:1/-1; }
.google-controls{display:grid;gap:12px;margin:16px 0}.google-controls[hidden],.google-controls [hidden]{display:none}.google-controls #google-button{min-height:42px}
.google-approval{display:grid;gap:12px;margin-top:18px;padding:16px;border:1px solid #c6d4b8;border-radius:8px;background:#f4f7ed}.google-approval[hidden]{display:none}.google-approval p{margin:0;font-size:12px;line-height:1.6;color:var(--ink)}.google-approval #google-approval-button{min-height:42px}.google-approval .button{justify-self:start;padding:9px 12px;font-size:11px}.google-approval:focus-visible{outline:3px solid #258455;outline-offset:3px}
.source-picker{border:0;padding:0;margin:0;min-width:0}.source-picker legend{font-size:11px;margin-bottom:10px;padding:0}.source-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.demo-console .source-option{position:relative;display:block;margin:0;cursor:pointer}.demo-console .demo-card .source-option input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;margin:0}.source-choice{display:flex;align-items:center;gap:9px;min-height:58px;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font-size:11px;font-weight:600;line-height:1.3;transition:background .15s,border-color .15s,box-shadow .15s}.source-choice img{width:24px;height:24px;flex-shrink:0}.source-option:hover .source-choice{border-color:#759c5c;background:#FAF2DC}.source-option input:checked+.source-choice{border-color:#587749;background:#e8f2dc;box-shadow:inset 0 0 0 1px #587749}.source-option input:focus-visible+.source-choice{outline:3px solid #258455;outline-offset:3px}.source-option input:disabled+.source-choice{opacity:.45;cursor:not-allowed}.passkey-controls{margin:12px 0 0}.passkey-controls .demo-help{margin:0}.demo-console .demo-card .passkey-controls .button{margin-top:8px}
.policy-setup{margin:18px 0 4px;border:1px solid var(--line);border-radius:8px;background:var(--light);overflow:hidden}.policy-setup summary{display:list-item;padding:14px 16px;font-size:12px;line-height:1.4}.policy-setup[open] summary{border-bottom:1px solid var(--line)}.policy-setup-body{display:grid;gap:9px;padding:16px}.policy-setup-body label{display:block;font-weight:600}.demo-console .demo-card .policy-setup-body input{margin:0;background:var(--white)}.policy-setup-body .demo-help{margin:0}.demo-console .demo-card .policy-setup-body .button{margin:4px 0 0}
@media(max-width:480px){.source-choice{min-height:54px;padding:8px;gap:7px;font-size:10px}.source-choice img{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.source-choice{transition:none}}