.demo-service{--demo-surface:var(--paper);--demo-raised:color-mix(in srgb, var(--paper) 88%, var(--ink) 12%);width:100%;margin-block:2.5rem}.demo-service .demo-tabs{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.demo-service .demo-tabs button{border:1px solid var(--line);min-height:44px;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:6px;justify-content:center;align-items:center;gap:.625rem;padding:.625rem 1rem;font-size:.9375rem;line-height:1.4;transition:background-color .16s,color .16s,border-color .16s;display:inline-flex}.demo-service .demo-tabs button[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:var(--paper)}.demo-service .demo-tabs svg,.demo-service .demo-toolbar svg,.demo-service .demo-list-row svg,.demo-service .demo-handoff svg,.demo-service .demo-caption svg{flex:none}.demo-service .demo-window{border:1px solid var(--line);background:var(--demo-surface);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #00000006}.demo-service .demo-toolbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1.5rem;padding:1rem 1.5rem;font-size:.9375rem;line-height:1.4;display:flex}.demo-service .demo-toolbar>span:first-child{align-items:center;gap:.625rem;font-weight:600;display:flex}.demo-service .demo-label{color:var(--ink-soft);font-size:.875rem}.demo-service .demo-workspace{grid-template-columns:minmax(180px,.72fr) minmax(0,2fr);display:grid}.demo-service .demo-sidebar{border-right:1px solid var(--line);background:color-mix(in srgb, var(--paper-2) 50%, var(--paper) 50%);padding:1.5rem 1rem 0;overflow:hidden}.demo-service .demo-sidebar-title{color:var(--ink-soft);margin-bottom:.75rem;padding:0 .75rem;font-size:.875rem}.demo-service .demo-list-row{color:var(--ink-soft);align-items:baseline;gap:.625rem;padding:.875rem .75rem;font-size:.875rem;line-height:1.45;display:flex}.demo-service .demo-list-row svg{align-self:flex-start;margin-top:2px}.demo-service .demo-list-row[data-selected]{background:var(--demo-raised);color:var(--ink);border-radius:5px;font-weight:500}.demo-service .demo-filler{background:var(--line);border-radius:2px;width:72%;height:5px;margin:1.5rem .75rem}.demo-service .demo-filler:last-child{width:56%;margin-top:2rem}.demo-service .demo-panels{min-width:0}.demo-service .demo-panel{padding:2rem clamp(1.25rem,4vw,3rem) 1.5rem}.demo-service .demo-incoming{margin-bottom:1.5rem}.demo-service .demo-meta{color:var(--ink-soft);margin-bottom:.5rem;font-size:.875rem;line-height:1.4;display:block}.demo-service .demo-incoming p{letter-spacing:-.015em;max-width:38rem;min-height:2.8em;font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.4}.demo-service .demo-reply{border-left:2px solid var(--brand);padding:0 0 0 1.25rem}.demo-service .demo-reply-header{color:var(--brand);align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.875rem;font-weight:500;line-height:1.4;display:flex}.demo-service .demo-reply-header svg:last-child{margin-left:auto}.demo-service .demo-reply p{max-width:38rem;min-height:3.15em;font-size:1rem;line-height:1.65}.demo-service .demo-source{color:var(--ink-soft);margin-top:.75rem;font-size:.875rem;line-height:1.4;display:block}.demo-service .demo-handoff{border-top:1px solid var(--line);align-items:center;gap:.625rem;margin-top:1.75rem;padding-top:1.25rem;font-size:.9375rem;font-weight:500;line-height:1.4;display:flex}.demo-service .demo-handoff svg:last-child{color:var(--ink-soft);margin-left:auto}.demo-service .demo-caption{justify-content:space-between;gap:.75rem 2rem;margin-top:1rem;font-size:.9375rem;line-height:1.5;display:flex}.demo-service .demo-caption>span:first-child{align-items:baseline;gap:.5rem;display:flex}.demo-service .demo-caption svg{color:var(--brand);align-self:flex-start;margin-top:3px}.demo-service .demo-caption>span:last-child{color:var(--ink-soft)}.demo-service .demo-mobile-label{display:none}@media (hover:hover) and (pointer:fine){.demo-service .demo-tabs button:not([aria-selected=true]):hover{color:var(--ink);border-color:var(--ink-soft);background:var(--paper-2)}}@media (max-width:719px){.demo-service .demo-workspace{display:block}.demo-service .demo-sidebar,.demo-service .demo-label{display:none}.demo-service .demo-toolbar{padding:1rem 1.25rem}.demo-service .demo-panel{padding:1.5rem 1.25rem 1.25rem}.demo-service .demo-reply p{min-height:6.6em}.demo-service .demo-caption{flex-direction:column;gap:.375rem}.demo-service .demo-caption>span:last-child{padding-left:1.5rem}.demo-service .demo-mobile-label{color:var(--ink-soft);margin-block:0 1rem;font-size:.875rem;line-height:1.4;display:block}}@media (max-width:479px){.demo-service .demo-tabs{grid-template-columns:1fr 1fr 1fr;gap:.375rem;display:grid}.demo-service .demo-tabs button{flex-direction:column;gap:.5rem;padding:.75rem .5rem;font-size:.875rem}.demo-service .demo-reply{padding-left:1rem}}@media (prefers-reduced-motion:reduce){.demo-service .demo-tabs button{transition:none}}
