body{background:var(--fw-canvas);color:var(--fw-text);font-family:var(--fw-font);margin:0}.secure-demo{max-width:1120px;margin:0 auto;padding:32px 24px 64px}.secure-demo__eyebrow{color:var(--fw-primary);font-size:var(--fw-font-size-base);letter-spacing:.08em;text-transform:uppercase;margin:0;font-weight:700}.secure-demo__header h1{margin:4px 0 8px;font-size:32px}.secure-demo__header p{max-width:70ch;color:var(--fw-text-secondary);line-height:1.55}.secure-demo__header code{background:var(--fw-primary-surface);border-radius:5px;padding:1px 5px;font-size:.9em}.secure-demo__grid{grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;display:grid}.secure-demo__client{grid-row:span 2}.secure-demo__panel-title{font-size:var(--fw-font-size-md);color:var(--fw-text-secondary);margin:0 0 10px;font-weight:700}.secure-demo__client,.secure-demo__wire,.secure-demo__server{border:1px solid var(--fw-border-subtle);background:var(--fw-surface);border-radius:14px;padding:18px}.secure-demo__server{border-color:var(--fw-danger-border);background:var(--fw-danger-surface)}.secure-demo__wire pre,.secure-demo__server pre{max-height:320px;font-family:var(--fw-font-mono);white-space:pre-wrap;word-break:break-word;margin:0;font-size:12.5px;line-height:1.5;overflow:auto}.secure-demo__step h2{margin:4px 0 8px;font-size:22px}.secure-demo__step-tag{color:var(--fw-text-muted);font-size:var(--fw-font-size-sm);letter-spacing:.06em;text-transform:uppercase;margin:0;font-weight:700}.secure-demo__desc{color:var(--fw-text-secondary)}.secure-demo__result{background:var(--fw-success-surface);color:var(--fw-success-text);border-radius:10px;padding:14px 16px;line-height:1.55}.secure-demo__field,.secure-demo__choices{border:0;margin:14px 0;padding:0;display:block}.secure-demo__field>span,.secure-demo__field>legend{font-size:var(--fw-font-size-md);color:var(--fw-text-strong);margin-bottom:6px;font-weight:600;display:block}.secure-demo__field input[type=text],.secure-demo__field input[type=number]{box-sizing:border-box;border:1px solid var(--fw-border);width:100%;font:inherit;font-size:var(--fw-font-size-xl);border-radius:8px;padding:10px 12px}.secure-demo__choices label,.secure-demo__field label{align-items:center;gap:8px;padding:8px 0;display:flex}.secure-demo__nav{gap:10px;margin-top:20px;display:flex}.secure-demo__nav button{border:1px solid var(--fw-primary);background:var(--fw-primary);color:var(--fw-on-primary);font:inherit;cursor:pointer;border-radius:8px;padding:10px 18px;font-weight:600}.secure-demo__nav button:hover{border-color:var(--fw-primary-hover);background:var(--fw-primary-hover)}.secure-demo__nav button:focus-visible{outline:3px solid var(--fw-focus-ring,#4f46e559);outline-offset:2px}.secure-demo__nav button[data-action=back],.secure-demo__nav button[data-action=restart]{background:var(--fw-surface);color:var(--fw-primary)}.secure-demo__nav button[data-action=back]:hover,.secure-demo__nav button[data-action=restart]:hover{background:var(--fw-surface-subtle)}.secure-demo__editor-link{margin-top:24px}.secure-demo__editor-link a{color:var(--fw-primary);font-weight:600}@media (width<=780px){.secure-demo__grid{grid-template-columns:1fr}.secure-demo__client{grid-row:auto}}