/* Demo components inherit the shared Telegone website tokens and shell. */
.demo{padding-block:48px 16px}.demo-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:32px}.demo-intro h1{font:400 clamp(2.8rem,4.5vw,4.2rem)/1.05 var(--serif);letter-spacing:-.055em;margin:0}.demo-intro .eyebrow{margin-bottom:16px}.demo-intro>p{max-width:46ch;color:var(--muted);margin:0}.demo-window{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}.demo-titlebar{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid var(--line)}.demo-titlebar strong{letter-spacing:-.06em}.demo-titlebar>span{margin-left:auto;color:var(--muted);font-size:.8125rem}.demo-workspace{display:grid;grid-template-columns:260px minmax(0,1fr)}.demo-sidebar{padding:32px;background:var(--pink);border-right:1px solid var(--line)}.demo-sidebar .eyebrow{font-size:.75rem;margin-bottom:16px}.demo-sidebar h2{font:400 2rem/1.1 var(--serif);letter-spacing:-.035em;margin:0 0 24px}.demo-sidebar>p{font-size:.875rem}.demo-sidebar>p span{color:var(--muted)}.demo-guidance{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);margin-top:24px;padding-top:24px}.demo-guidance img{transform:rotate(-12deg)}.demo-guidance p{font:italic 1.25rem/1.2 var(--serif);margin:0;color:var(--berry)}.demo-review{padding:24px 32px}.demo-review-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.demo-review-heading .eyebrow{margin-bottom:6px}.demo-review-heading h2{font:400 1.75rem var(--serif);letter-spacing:-.03em;margin:0}.demo-review-heading>span{font-size:.8125rem;color:var(--berry);white-space:nowrap}.demo .review-row{display:grid;grid-template-columns:44px 76px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.demo .review-row b{font-size:.9375rem;font-weight:500}.demo .review-row p{font-size:.75rem;color:var(--muted);margin:4px 0 0}.demo .review-row>span{font-size:.75rem;color:var(--berry)}.demo .check{width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:1.125rem}.demo .selected .check{background:var(--berry);color:var(--on-berry);border-color:var(--berry)}.demo .thumb{height:76px;width:76px;border-radius:12px;background-image:url(assets/synthetic-demo-contact-sheet.png);background-size:200% 200%;border:1px solid var(--line)}.demo .thumb.two{background-position:100% 0}.demo .thumb.three{background-position:0 100%}.demo .thumb.four{background-position:100% 100%}.demo-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px}.demo-actions p{font-size:.8125rem;color:var(--muted);margin:0;max-width:32ch}.demo-actions .button{white-space:nowrap}.demo-reset{background:none;border:0;text-decoration:underline;text-underline-offset:4px;color:var(--muted);font-size:.8125rem;min-height:44px;padding:8px 0;margin-top:4px}.demo-disclaimer{font-size:.8125rem;color:var(--muted);max-width:84ch;margin:24px auto;text-align:center}.demo-disclaimer a{white-space:nowrap}#confirm-dialog{width:min(520px,calc(100% - 32px));border:1px solid var(--line);border-radius:24px;padding:32px;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}#confirm-dialog::backdrop{background:#211a1eaa}#confirm-dialog h2{font:400 2rem var(--serif);margin:0 0 20px}#confirm-dialog p{color:var(--muted)}#confirm-dialog .eyebrow{color:var(--berry)}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:24px}#confirm-dialog .demo-secondary{background:transparent;color:var(--ink);border-color:var(--line)}
@media(max-width:1000px){.demo-workspace{grid-template-columns:210px minmax(0,1fr)}.demo-sidebar,.demo-review{padding:24px}.demo .review-row{gap:12px;grid-template-columns:44px 64px minmax(0,1fr)}.demo .thumb{width:64px;height:64px}.demo .review-row>span{display:none}.demo-actions{align-items:flex-start;flex-direction:column;gap:12px}}
@media(max-width:760px){.demo{padding-top:28px}.demo-intro{grid-template-columns:1fr;gap:20px;margin-bottom:24px}.demo-intro h1{font-size:2.8rem}.demo-intro>p{font-size:.9375rem}.demo-titlebar{padding:12px 16px;gap:8px}.demo-titlebar>span{max-width:150px;text-align:right;font-size:.75rem;line-height:1.4}.demo-workspace{grid-template-columns:1fr}.demo-sidebar{display:none}.demo-review{padding:20px 16px}.demo-review-heading{align-items:flex-start}.demo-review-heading h2{font-size:1.5rem}.demo-review-heading .eyebrow{font-size:.625rem}.demo-review-heading>span{font-size:.75rem}.demo .review-row{grid-template-columns:44px 64px minmax(0,1fr);gap:8px}.demo .review-row b{font-size:.8125rem;line-height:1.4;display:block}.demo .review-row p{font-size:.6875rem}.demo-actions{flex-direction:column-reverse;align-items:stretch}.demo-actions .button{width:100%}.demo-actions p{max-width:none}.demo-disclaimer{text-align:left}#confirm-dialog{padding:24px}}