.demo-intro{max-width:1240px;padding-top:38px;padding-bottom:40px}.demo-intro h1{margin:18px 0;font-size:clamp(48px,6vw,78px)}.demo-intro>p:last-child{max-width:610px;color:var(--muted);font-size:19px}.demo-workbench{grid-template-columns:320px minmax(0,1fr);align-items:start;gap:42px;padding-bottom:54px;display:grid}.demo-guide{padding-top:12px}.demo-styles{gap:9px;display:grid}.demo-styles>button{border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:left;border-radius:22px;align-items:center;gap:12px;width:100%;padding:15px;display:flex}.demo-styles>button[aria-selected=true]{background:var(--tonal);border-color:var(--accent)}.demo-styles img{border-radius:12px}.demo-styles>button>span:nth-child(2){flex:1;min-width:0}.demo-styles strong{font-size:18px;font-weight:600;display:block}.demo-styles small{color:var(--muted);margin-top:4px;font-size:11px;display:block}.demo-styles .tier{padding:5px 8px;font-size:10px}.demo-lighting{gap:8px;margin:20px 0;display:flex}.demo-lighting button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:99px;flex:1;padding:12px}.demo-lighting [aria-pressed=true]{background:var(--ink);color:var(--bg)}.demo-tasks{margin-top:32px}.demo-tasks h2{letter-spacing:-.025em;margin-bottom:14px;font-size:23px}.demo-tasks button{text-align:left;width:100%;color:var(--muted);border:0;border-bottom:1px solid var(--line);background:0 0;gap:12px;padding:16px 0;font-size:13px;display:flex}.demo-tasks span{color:var(--ink);flex:1}.demo-disclosure{color:var(--muted);margin:25px 0 16px;font-size:12px}.demo-reset{color:var(--accent);background:0 0;border:0;padding:6px 0;font-size:13px}.demo-stage{background:var(--tonal);border:1px solid var(--line);border-radius:40px;justify-items:center;min-width:0;padding:18px 12px 0;display:grid}.demo-stage-note{width:100%;color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:15px;padding:22px;font-size:12px;display:flex}.demo-stage-note>span:first-child{color:var(--ink);font-weight:550}.demo-after{background:var(--paper);border:1px solid var(--line);border-radius:28px;grid-column:1/-1;grid-template-columns:1fr auto;gap:18px 32px;padding:28px;display:grid}.demo-after strong{color:var(--ink);margin-bottom:5px;font-size:22px;display:block}.demo-after p{color:var(--muted);max-width:700px}.demo-after .micro{font-size:12px}.demo-after .text-link{align-self:start}.demo-device{--m3-background:#f6f8fc;--m3-onBackground:#191c20;--m3-surface:#fff;--m3-onSurface:#191c20;--m3-primary:#33618d;--m3-onPrimary:#fff;--m3-primaryContainer:#d0e4ff;--m3-onPrimaryContainer:#144974;--m3-surfaceContainerHigh:#e6e8ee;--m3-onSurfaceVariant:#42474e;--m3-outlineVariant:#c2c7cf;isolation:isolate;background:var(--m3-background);width:min(390px,100%);height:844px;color:var(--m3-onBackground);box-shadow:0 20px 40px var(--shadow);text-align:left;border:5px solid #59616f;border-radius:36px;font-family:Outfit,system-ui,sans-serif;font-size:14px;position:relative;overflow:hidden}.demo-device button,.demo-device input,.demo-device select,.demo-device textarea{font:inherit;color:inherit}.demo-device button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.demo-device svg{flex-shrink:0;width:22px;height:22px;display:inline-block}.demo-device button:focus-visible,.demo-device input:focus-visible,.demo-device select:focus-visible,.demo-device summary:focus-visible,.demo-device textarea:focus-visible{outline:3px solid var(--m3-primary);outline-offset:2px}.demo-device button:disabled{opacity:.4;cursor:default}.demo-status{background:var(--m3-background);height:32px;color:var(--m3-onBackground);justify-content:space-between;align-items:center;padding:8px 23px 0;font-size:12px;display:flex}.demo-status>span{letter-spacing:2px;font-size:10px}.demo-home{background:var(--m3-onBackground);opacity:.65;pointer-events:none;z-index:7;border-radius:8px;width:96px;height:4px;position:absolute;bottom:8px;left:calc(50% - 48px)}#demo-app{flex-direction:column;height:calc(100% - 48px);min-height:0;display:flex;position:relative}#demo-app[inert]{pointer-events:none}.app-scroll{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--m3-outlineVariant) transparent;flex:1;min-height:0;padding:0 20px 104px;overflow-y:auto}.app-heading{justify-content:space-between;align-items:center;gap:10px;padding:24px 0 21px;display:flex}.app-heading>div{min-width:0}.app-heading h2{letter-spacing:-.045em;font-size:33px;font-weight:600;line-height:1.1}.app-eyebrow{letter-spacing:.06em;color:var(--m3-primary);margin:10px 0;font-size:10px;font-weight:550;line-height:1.5}.app-heading .app-eyebrow{margin:0 0 8px;font-size:9px}.demo-icon-button{background:0 0;border:0;border-radius:50%;flex-shrink:0;place-items:center;width:42px;min-width:42px;height:42px;min-height:42px;display:grid;color:var(--m3-onSurfaceVariant)!important}.demo-icon-button:hover{background:var(--m3-surfaceContainerHigh)}.demo-icon-button.tonal,.person-call{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer)!important}.app-search{background:var(--m3-surfaceContainerHigh);min-height:50px;color:var(--m3-onSurfaceVariant);border-radius:99px;align-items:center;gap:10px;margin-bottom:12px;padding:0 16px;display:flex}.app-search input{background:0 0;border:0;outline:0;width:100%;min-width:0;padding:12px 0;font-size:13px;color:var(--m3-onSurface)!important}.app-search input::placeholder{color:var(--m3-onSurfaceVariant);opacity:1}.app-chips{flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0 18px;display:flex}.app-chips>button:not(.demo-icon-button),.app-chip{border:1px solid var(--m3-outlineVariant);color:var(--m3-onSurfaceVariant);background:0 0;border-radius:99px;min-height:36px;padding:9px 13px;font-size:11px}.app-chips [aria-pressed=true],.app-chip[aria-pressed=true]{border-color:#0000;background:var(--m3-primaryContainer)!important;color:var(--m3-onPrimaryContainer)!important}.app-chips .demo-icon-button{width:36px;min-width:36px;height:36px;min-height:36px;margin-left:auto}.people-shelf{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:30px;margin:14px 0 21px;padding:16px 12px 17px}.people-shelf>.app-eyebrow{color:var(--m3-onPrimaryContainer);margin:0 5px 15px;font-size:9px}.people-shelf>div{justify-content:space-around;gap:5px;display:flex}.favourite-person{background:0 0;border:0;border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:8px;min-width:0;padding:2px;display:flex}.favourite-person strong{font-size:13px;font-weight:500}.favourite-person small{opacity:.85;font-size:10px}.demo-avatar{background:var(--m3-secondaryContainer);width:43px;height:43px;color:var(--m3-onSecondaryContainer);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:16px;font-weight:500;display:inline-flex}.demo-avatar.large{width:62px;height:62px;font-size:24px}.favourite-person .demo-avatar{background:var(--m3-surface);color:var(--m3-primary);outline:5px solid color-mix(in srgb,var(--m3-surface) 38%,transparent)}.directory-letter{color:var(--m3-primary);padding:9px 9px 4px;font-size:11px}.person-row{background:var(--m3-surface);border-radius:22px;align-items:center;gap:8px;min-height:66px;margin:5px 0;padding:8px 10px;display:flex}.person-main{text-align:left;background:0 0;border:0;border-radius:14px;flex:1;align-items:center;gap:12px;min-width:0;padding:0;display:flex}.person-main>span:last-child{min-width:0}.person-main strong{overflow-wrap:anywhere;font-size:14px;font-weight:500;display:block}.person-main small{color:var(--m3-onSurfaceVariant);margin-top:5px;font-size:10px;display:block}.person-call{border:0;border-radius:50%;flex-shrink:0;place-items:center;width:38px;min-width:38px;height:38px;min-height:38px;display:grid}.person-call svg{width:18px;height:18px}.app-nav{background:var(--m3-surfaceContainerHigh);color:var(--m3-onSurfaceVariant);z-index:3;border-radius:30px;justify-content:space-around;align-items:center;gap:5px;padding:8px 10px;display:flex;position:absolute;bottom:14px;left:20px;right:20px;box-shadow:0 5px 16px #0001}.app-nav button,.reach-tabs button{background:0 0;border:0;border-radius:22px;flex:1;justify-content:center;align-items:center;gap:8px;min-width:0;min-height:44px;padding:11px 9px;font-size:11px;display:flex}.app-nav button[aria-current=page],.reach-tabs button[aria-current=page]{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer)}.app-nav svg{width:19px;height:19px}.app-keypad-fab{background:var(--m3-primary);z-index:4;border:0;border-radius:20px;place-items:center;width:58px;height:58px;display:grid;position:absolute;bottom:16px;right:18px;box-shadow:0 5px 12px #0002;color:var(--m3-onPrimary)!important}.demo-device[data-style=lunar] .app-nav{right:90px}.demo-device[data-style=portrait] .people-shelf{background:var(--m3-surface);color:var(--m3-onSurface);padding:20px 13px}.demo-device[data-style=portrait] .people-shelf .app-eyebrow{color:var(--m3-primary)}.demo-device[data-style=portrait] .favourite-person{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:28px;min-height:152px;padding:18px 3px 16px}.demo-device[data-style=portrait] .favourite-person:nth-child(2){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)}.demo-device[data-style=portrait] .app-heading h2{font-size:35px}.demo-device[data-style=portrait] .person-row{border-radius:26px}.demo-device[data-style=portrait] .app-nav,.demo-device[data-style=mosaic] .app-nav{box-shadow:none;background:var(--m3-surface);border-radius:0;bottom:0;left:0;right:0}.demo-device[data-style=portrait] .app-nav button,.demo-device[data-style=mosaic] .app-nav button{border-radius:22px;flex-direction:column;gap:6px;padding:9px 2px}.demo-device[data-style=ledger] .app-heading h2{letter-spacing:-.035em;font-size:31px;font-weight:500}.demo-device[data-style=ledger] .app-eyebrow,.demo-device[data-style=ledger] .ledger-label,.demo-device[data-style=ledger] .person-main small{font-family:Fira Code,monospace;font-size:9px}.demo-device[data-style=ledger] .app-nav{box-shadow:none;border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:0;inset:0 18px auto}.demo-device[data-style=ledger] .app-nav button{border-radius:0;padding:14px 8px;font-family:Fira Code,monospace;font-size:10px}.demo-device[data-style=ledger] .app-nav button[aria-current=page]{border-bottom:2px solid var(--m3-primary);color:var(--m3-primary);background:0 0}.demo-device[data-style=ledger] .person-row{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:14px 0}.demo-device[data-style=ledger] .person-main>.demo-avatar{display:none}.ledger-letter{width:20px;color:var(--m3-primary);flex-shrink:0;font-family:Fira Code,monospace;font-size:12px}.demo-device[data-style=ledger] .person-row:not(:has(.ledger-letter)){padding-left:28px}.ledger-label{color:var(--m3-onSurfaceVariant);justify-content:space-between;padding:13px 0 10px;display:flex}.demo-device[data-style=ledger] .person-main small{font-size:10px}.demo-device[data-style=ledger] .app-keypad-fab{border-radius:12px}.people-bento{grid-template-columns:1fr 1fr;gap:10px;margin-top:13px;display:grid}.bento-person{text-align:left;background:var(--m3-secondaryContainer);border:0;border-radius:28px;flex-direction:column;align-items:flex-start;gap:13px;min-width:0;min-height:175px;padding:17px;display:flex;color:var(--m3-onSecondaryContainer)!important}.bento-person:nth-child(3n){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)!important}.bento-person strong{overflow-wrap:anywhere;font-size:16px;font-weight:550}.bento-person>span:not(.demo-avatar){overflow-wrap:anywhere;font-size:9px}.bento-person.hero-tile{background:var(--m3-primaryContainer);grid-column:1/-1;grid-template-columns:72px 1fr;align-items:center;gap:5px 13px;min-height:178px;display:grid;color:var(--m3-onPrimaryContainer)!important}.bento-person.hero-tile .demo-avatar{grid-row:1/4}.bento-person.hero-tile strong{font-size:23px}.tile-call{align-items:center;gap:5px;display:flex}.tile-call svg{width:15px;height:15px}.add-tile{background:var(--m3-surfaceContainerHigh);justify-content:center;min-height:130px;color:var(--m3-onSurfaceVariant)!important}.demo-device[data-style=mosaic] .app-heading h2{font-size:38px}.demo-device[data-style=mosaic] .demo-avatar{border-radius:20px}.demo-device[data-style=mosaic] .person-call{border-radius:13px}.demo-device[data-style=reach] #demo-app>.app-heading h2{font-size:42px}.reach-people{background:var(--m3-surface);border-radius:34px 34px 0 0;flex-direction:column;flex:1;min-height:0;padding:17px 18px 6px;display:flex}.reach-tabs{background:var(--m3-surfaceContainerHigh);border-radius:99px;padding:5px;display:flex}.reach-scroll{overscroll-behavior:contain;flex:1;min-height:0;padding-bottom:14px;overflow-y:auto}.reach-people .app-search{flex-shrink:0;margin:12px 0 0}.reach-people .people-shelf{margin:0 0 12px}.reach-people .app-chips{margin:12px 0}.demo-device[data-style=reach] .app-nav{bottom:16px;right:92px}.demo-empty{color:var(--m3-onSurfaceVariant);padding:28px 6px;font-size:13px}.recent-run{background:var(--m3-surface);border-radius:25px;margin:10px 0;padding:12px}.run-head{align-items:center;gap:10px;display:flex}.avatar-button{background:0 0;border:0;border-radius:50%;padding:0}.run-main{text-align:left;background:0 0;border:0;border-radius:12px;flex:1;min-width:0;padding:6px 0}.run-main strong{overflow-wrap:anywhere;font-size:16px;font-weight:550;display:block}.run-main small{color:var(--m3-onSurfaceVariant);margin-top:5px;font-size:10px;display:block}.recent-run.missed .run-main small{color:var(--m3-error)}.run-logs{border-top:1px solid var(--m3-outlineVariant);margin-top:10px;padding-top:7px}.run-logs p{color:var(--m3-onSurfaceVariant);justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-size:10px;line-height:1.5;display:flex}.run-logs time{white-space:nowrap;margin-left:auto;font-family:Fira Code,monospace;font-size:9px}.run-logs>button{background:var(--m3-primaryContainer);width:100%;color:var(--m3-onPrimaryContainer);border:0;border-radius:12px;justify-content:space-between;align-items:center;margin-top:6px;padding:10px 13px;font-size:11px;display:flex}.demo-device[data-style=ledger] .recent-run{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:16px 0}.demo-device[data-style=mosaic] .recent-run:nth-child(2n){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)}.keypad-context{flex:1;min-height:0;padding:0 20px 18px;overflow-y:auto}.keypad-hint{color:var(--m3-onSurfaceVariant);font-size:12px}.keypad-suggestions article{background:var(--m3-surface);border-radius:22px;align-items:center;gap:9px;margin-top:10px;padding:10px;display:flex}.keypad-suggestions article>button:not(.person-call){text-align:left;background:0 0;border:0;border-radius:12px;flex:1;min-width:0}.keypad-suggestions strong,.keypad-suggestions small{display:block}.keypad-suggestions strong{font-size:13px}.keypad-suggestions small{color:var(--m3-onSurfaceVariant);margin-top:5px;font-size:10px}.new-number{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:24px;gap:8px;margin-top:15px;padding:17px;display:grid}.new-number button{background:0 0;border:0;align-items:center;gap:8px;padding:10px 0;font-size:12px;display:flex}.keypad-deck{background:var(--m3-surface);border-radius:32px 32px 0 0;flex-shrink:0;margin-top:auto;padding:20px 20px 12px}.keypad-number{background:var(--m3-surfaceContainerHigh);border-radius:20px;align-items:center;gap:8px;padding:10px 5px 10px 14px;display:flex}.keypad-number>label{flex:1;min-width:0}.keypad-number input{letter-spacing:.02em;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:24px!important}.keypad-number input::placeholder{color:var(--m3-onSurfaceVariant);opacity:1;font-size:18px}.dial-digits{grid-template-columns:repeat(3,1fr);gap:10px;padding:20px 0 13px;display:grid}.dial-digits button{background:var(--m3-surfaceContainerHigh);height:66px;min-height:48px;color:var(--m3-onSurface);border:0;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex}.dial-digits strong{font-size:29px;font-weight:500;line-height:1}.dial-digits span{letter-spacing:.08em;min-height:10px;font-size:9px}.keypad-bottom{justify-content:space-between;align-items:center;gap:10px;display:flex}.sample-call-button{background:var(--m3-primary);border:0;border-radius:99px;justify-content:center;align-items:center;gap:12px;width:170px;min-height:52px;display:flex;color:var(--m3-onPrimary)!important}.demo-device[data-style=portrait] .dial-digits button{border-radius:50%}.demo-device[data-style=ledger] .keypad-deck{border-top:1px solid var(--m3-outlineVariant);border-radius:0}.demo-device[data-style=ledger] .dial-digits button{border-radius:8px}.demo-device[data-style=mosaic] .dial-digits button:nth-child(3n){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)}.demo-device[data-style=reach] .keypad-context{padding-top:60px}.block-scope{background:var(--m3-primaryContainer);border:0;border-radius:99px;align-items:center;gap:9px;margin-bottom:22px;padding:10px 14px;font-size:12px;display:flex;color:var(--m3-onPrimaryContainer)!important}.block-active{background:var(--m3-secondaryContainer);color:var(--m3-onSecondaryContainer);border-radius:22px;align-items:center;gap:11px;margin-bottom:25px;padding:17px;font-size:13px;display:flex}.block-active small{margin-top:5px;font-size:9px;display:block}.block-rules{background:var(--m3-surface);border-radius:26px;margin:12px 0 27px;padding:2px 16px 4px}.block-rule{border-bottom:1px solid var(--m3-outlineVariant);flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0;display:flex}.block-rule:last-child{border:0}.block-rule>div{flex:1;min-width:0}.block-rule strong{font-size:13px;font-weight:550;display:block}.block-rule small{color:var(--m3-onSurfaceVariant);margin-top:6px;font-size:10px;line-height:1.4;display:block}.mi-switch{border:1px solid var(--m3-outlineVariant);background:var(--m3-surfaceContainerHighest);border-radius:99px;flex-shrink:0;width:48px;height:29px;padding:3px;transition:background .18s;position:relative}.mi-switch>span{background:var(--m3-onSurfaceVariant);width:21px;height:21px;color:var(--m3-surfaceContainerHighest);border-radius:50%;place-items:center;transition:transform .18s;display:grid}.mi-switch[aria-checked=true]{background:var(--m3-primary);border-color:var(--m3-primary)}.mi-switch[aria-checked=true]>span{background:var(--m3-onPrimary);color:var(--m3-primary);transform:translate(17px)}.mi-switch svg{width:14px;height:14px}.block-rule .mixed-label{width:100%;margin:0}.block-lists{background:var(--m3-surface);border-radius:25px;margin-top:12px;overflow:hidden}.block-lists button{text-align:left;background:0 0;border:0;align-items:center;gap:12px;width:100%;min-height:75px;padding:17px;display:flex}.block-lists button+button{border-top:1px solid var(--m3-outlineVariant)}.block-lists button>span{flex:1}.block-lists strong{font-size:13px;font-weight:550;display:block}.block-lists small{color:var(--m3-onSurfaceVariant);margin-top:5px;font-size:10px;display:block}.block-footnote{color:var(--m3-onSurfaceVariant);margin:20px 8px;font-size:10px}.demo-device[data-style=ledger] .block-rules,.demo-device[data-style=ledger] .block-lists{border-radius:8px}.demo-device[data-style=mosaic] .block-active{border-radius:28px}.sample-call{flex-direction:column;height:100%;min-height:0;padding:6px 26px 16px;display:flex;overflow-y:auto}.call-top{letter-spacing:.08em;color:var(--m3-onSurfaceVariant);justify-content:space-between;align-items:center;font-size:9px;display:flex}.call-identity{text-align:center;flex-direction:column;align-items:center;padding-top:32px;display:flex}.call-identity .demo-avatar{background:var(--m3-primaryContainer);width:116px;height:116px;color:var(--m3-onPrimaryContainer);font-size:42px}.call-identity h2{letter-spacing:-.045em;overflow-wrap:anywhere;margin:24px 0 11px;font-size:31px;font-weight:550;line-height:1.1}.call-identity p{color:var(--m3-onSurfaceVariant);align-items:center;gap:7px;font-size:13px;display:flex}.call-identity p svg{width:16px;height:16px}.call-identity>strong{margin-top:24px;font-family:Fira Code,monospace;font-size:22px;font-weight:400}.call-identity>small{color:var(--m3-onSurfaceVariant);margin-top:8px;font-size:11px}.call-tools{gap:21px;margin-top:auto;padding-top:27px;display:grid}.record-pill{background:var(--m3-primaryContainer);border:0;border-radius:99px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:52px;padding:13px 19px;font-size:13px;display:flex;color:var(--m3-onPrimaryContainer)!important}.record-pill.recording{background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)!important}.record-pill.recording>svg{width:18px;height:18px}.record-label{font-size:10px}.sample-wave{flex:1;justify-content:center;align-items:center;gap:2px;max-width:156px;height:24px;display:flex}.sample-wave i{width:2px;height:var(--height);animation:sample-wave 1.1s ease-in-out var(--delay) infinite alternate;background:currentColor;border-radius:99px;display:block}.six-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 14px;display:grid}.six-controls button{background:var(--m3-surfaceContainerHigh);border:0;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:79px;padding:14px 4px;display:flex;color:var(--m3-onSurface)!important}.six-controls button[aria-pressed=true]{background:var(--m3-primary);color:var(--m3-onPrimary)!important}.six-controls span{font-size:10px}.six-controls svg{width:24px;height:24px}.end-call{background:var(--m3-error);border:0;border-radius:99px;place-items:center;width:100%;height:59px;margin:0 auto;display:grid;color:var(--m3-onError)!important}.demo-device[data-style=portrait] .call-identity .demo-avatar{border-radius:40px;width:140px;height:155px}.demo-device[data-style=ledger] .call-identity{text-align:left;align-items:flex-start}.demo-device[data-style=ledger] .call-identity .demo-avatar{border-radius:8px;width:75px;height:75px;font-size:28px}.demo-device[data-style=ledger] .call-identity h2{font-family:Outfit,sans-serif;font-weight:500}.demo-device[data-style=ledger] .six-controls button{border-radius:8px}.demo-device[data-style=mosaic] .call-identity{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:34px;margin-top:14px;padding:26px 12px 20px}.demo-device[data-style=mosaic] .call-identity .demo-avatar{background:var(--m3-surface);border-radius:26px;width:88px;height:88px}.demo-device[data-style=mosaic] .call-identity>strong{margin-top:12px}.demo-device[data-style=reach] .call-tools{background:var(--m3-surface);border-radius:32px 32px 0 0;margin-left:-12px;margin-right:-12px;padding:22px 15px 10px}.return-call{background:var(--m3-primary);z-index:5;border:0;padding:9px;font-size:11px;position:absolute;top:0;left:0;right:0;color:var(--m3-onPrimary)!important}#demo-overlay{z-index:10;position:absolute;inset:0}#demo-overlay[hidden]{display:none}.demo-scrim{background:#0007;position:absolute;inset:0}.app-sheet{background:var(--m3-surface);color:var(--m3-onSurface);border-radius:32px 32px 0 0;outline:none;flex-direction:column;max-height:92%;padding:11px 20px 24px;display:flex;position:absolute;bottom:0;left:0;right:0}.sheet-handle{background:var(--m3-outlineVariant);border-radius:4px;width:36px;height:4px;margin:0 auto 14px}.app-sheet>header{justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;display:flex}.app-sheet h2{letter-spacing:-.03em;font-size:24px;font-weight:550;line-height:1.2}.sheet-scroll{overscroll-behavior:contain;min-height:0;padding:0 3px 5px;overflow-y:auto}.sheet-person{flex-direction:column;align-items:center;gap:16px;margin:8px 0 22px;display:flex}.sheet-person h3{letter-spacing:-.035em;font-size:25px;font-weight:550}.app-chip{align-items:center;gap:8px;display:flex}.app-chip svg{width:17px;height:17px}.sheet-number{border-bottom:1px solid var(--m3-outlineVariant);justify-content:space-between;align-items:center;gap:8px;padding:17px 0;font-size:12px;display:flex}.sheet-number>div{flex:1;min-width:0}.sheet-number strong{overflow-wrap:anywhere;font-weight:550;display:block}.sheet-number small{color:var(--m3-onSurfaceVariant);margin-bottom:6px;font-size:10px;display:block}.sheet-number .demo-icon-button{background:var(--m3-primaryContainer);width:37px;min-width:37px;height:37px;min-height:37px;color:var(--m3-onPrimaryContainer)!important}.social-actions{gap:12px;margin:24px 0 10px;display:flex}.social-actions button{background:0 0;border:0;border-radius:18px;flex-direction:column;flex:1;align-items:center;gap:9px;min-width:0;font-size:10px;display:flex}.social-mark{background:var(--m3-secondaryContainer);width:45px;height:45px;color:var(--m3-onSecondaryContainer);border-radius:15px;place-items:center;display:grid}.sheet-note{color:var(--m3-onSurfaceVariant);margin:16px 0;font-size:10px;line-height:1.6}.sheet-option{text-align:left;background:0 0;border:0;border-radius:18px;align-items:center;gap:12px;width:100%;min-height:52px;padding:15px 9px;font-size:13px;display:flex}.sheet-option:hover{background:var(--m3-surfaceContainerHigh)}.sheet-option>span{overflow-wrap:anywhere;flex:1;min-width:0}.sheet-primary{background:var(--m3-primary);border:0;border-radius:99px;width:100%;min-height:49px;margin-top:20px;padding:14px 18px;font-weight:550;display:block;color:var(--m3-onPrimary)!important}#sample-contact-form,#sample-block-form{gap:16px;margin-top:10px;display:grid}.app-sheet form label{color:var(--m3-onSurfaceVariant);gap:8px;font-size:11px;display:grid}.app-sheet input:not([type=checkbox]),.app-sheet select,.app-sheet textarea{border:1px solid var(--m3-outlineVariant);background:var(--m3-surfaceContainerLow);width:100%;color:var(--m3-onSurface);border-radius:15px;min-height:48px;padding:14px;font-size:13px}.app-sheet textarea{resize:vertical}.app-sheet .contact-more{border:0}.contact-more summary{color:var(--m3-primary);padding:10px 0;font-size:12px}.contact-more>label{margin:12px 0}.sheet-check{border-bottom:1px solid var(--m3-outlineVariant);justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:13px;display:flex}.sheet-check>span{flex:1}.sheet-check input{width:21px;height:21px;accent-color:var(--m3-primary)}.sheet-check small{color:var(--m3-onSurfaceVariant);margin-top:7px;font-size:10px;display:block}.country-picker{color:var(--m3-onSurfaceVariant);gap:8px;margin-bottom:16px;font-size:11px;display:grid}.alphabet-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.alphabet-grid button{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border:0;border-radius:16px;height:50px}.demo-toast{background:var(--m3-inverseSurface,#2d3135);color:var(--m3-inverseOnSurface,#eff1f6);z-index:12;pointer-events:none;opacity:0;border-radius:20px;padding:14px 18px;font-size:11px;line-height:1.5;transition:opacity .15s,transform .15s;position:absolute;bottom:22px;left:13px;right:13px;transform:translateY(8px);box-shadow:0 4px 18px #0003}.demo-toast.visible{opacity:1;transform:translateY(0)}.sr-only{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@keyframes sample-wave{0%{transform:scaleY(.6)}to{transform:scaleY(1)}}@media (width<=850px){.demo-workbench{grid-template-columns:270px minmax(0,1fr);gap:18px}.demo-stage{border-radius:32px;padding:13px 8px 0}.demo-stage-note{padding:18px 4px;font-size:10px}.demo-styles>button{gap:9px;padding:12px}.demo-styles strong{font-size:15px}.demo-styles img{width:34px;height:34px}.demo-after{grid-template-columns:1fr}.demo-after .button{justify-self:start}}@media (width<=650px){.demo-workbench{grid-template-columns:1fr;gap:22px;padding-left:14px;padding-right:14px}.demo-intro{padding-top:20px;padding-bottom:18px}.demo-intro>p:last-child{font-size:16px}.demo-guide{padding:0 4px}.demo-styles{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.demo-styles>button{text-align:center;border-radius:18px;flex-direction:column;align-items:center;gap:8px;height:108px;padding:12px 3px;display:flex}.demo-styles>button>span:nth-child(2){flex:none}.demo-styles strong{letter-spacing:0;font-size:10px}.demo-styles small{display:none}.demo-styles img{width:32px;height:32px}.demo-styles .tier{padding:3px 5px;font-size:8px}.demo-lighting{margin:14px 0}.demo-tasks{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.demo-tasks h2{width:100%;margin-bottom:3px;font-size:19px}.demo-tasks button{background:var(--paper);border:1px solid var(--line);border-radius:14px;flex:42%;gap:6px;width:auto;padding:11px;font-size:10px}.demo-disclosure{margin:15px 0 7px;font-size:11px}.demo-reset{font-size:11px}.demo-device{width:min(390px,100%)}.demo-stage{border-radius:32px;padding:12px 8px 0}.demo-after{padding:22px}.demo-after strong{font-size:20px}.demo-after p{font-size:14px}}@media (width<=360px){.demo-workbench{padding-left:9px;padding-right:9px}.demo-stage{border-radius:28px;padding:8px 4px 0}.demo-device{border-width:4px;border-radius:28px;height:820px}.app-scroll{padding-left:14px;padding-right:14px}.app-heading h2{font-size:29px}.demo-avatar.large{width:51px;height:51px;font-size:20px}.favourite-person strong{font-size:11px}.people-shelf{padding:14px 9px}.person-main{gap:8px}.person-main strong{font-size:12px}.demo-avatar{width:35px;height:35px;font-size:13px}.person-row{padding:9px 8px}.person-call{width:33px;min-width:33px;height:33px;min-height:33px}.app-nav{gap:0;padding:8px;left:12px}.app-nav button{gap:5px;padding:10px 4px;font-size:10px}.app-keypad-fab{width:52px;height:52px;bottom:19px;right:12px}.demo-device[data-style=lunar] .app-nav{right:76px}.block-rule strong{font-size:12px}.block-rules{padding:0 12px}.sample-call{padding-left:18px;padding-right:18px}.six-controls{gap:12px 10px}.six-controls button{min-height:72px}.record-pill{gap:7px;padding-left:15px;padding-right:15px}.sample-wave{gap:1.5px}.sample-wave i{width:1.5px}.call-identity h2{font-size:29px}.keypad-deck{padding-left:16px;padding-right:16px}.dial-digits{gap:8px}.app-sheet{padding-left:15px;padding-right:15px}.bento-person{gap:12px;min-height:169px;padding:14px}.bento-person strong{font-size:14px}.bento-person.hero-tile{grid-template-columns:56px 1fr}}@media (prefers-reduced-motion:reduce){.sample-wave i{animation:none}.mi-switch>span,.demo-toast{transition:none}}.demo-device[data-style=lunar] .app-heading h2{font-size:29px;font-weight:720}.demo-device[data-style=lunar] .people-shelf{background:0 0;margin-bottom:6px;padding:4px 0 12px}.demo-device[data-style=lunar] .people-shelf>.app-eyebrow{color:var(--m3-onSurface);text-transform:none;letter-spacing:0;font-family:Outfit,sans-serif;font-size:11px;font-weight:400}.demo-device[data-style=lunar] .people-shelf>div{gap:9px}.demo-device[data-style=lunar] .favourite-person{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:26px;gap:12px;padding:18px 3px 17px}.demo-device[data-style=lunar] .favourite-person:nth-child(2){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)}.demo-device[data-style=lunar] .favourite-person .demo-avatar{outline:0;width:45px;height:45px;font-size:18px}.demo-device[data-style=lunar] .person-row{background:0 0;border-radius:0;margin:0;padding:13px 0}.demo-device[data-style=lunar] .person-main strong{font-size:13px}.demo-device[data-style=lunar] .directory-letter{border-bottom:1px solid var(--m3-outlineVariant);margin-top:12px;padding:8px 0}.demo-device[data-style=lunar] .app-nav{bottom:15px;left:18px;right:18px}.demo-device[data-style=lunar] .app-keypad-fab{background:var(--m3-primaryContainer);border-radius:21px;gap:7px;width:auto;height:49px;min-height:49px;padding:0 17px;display:flex;bottom:88px;right:18px;color:var(--m3-onPrimaryContainer)!important}.app-keypad-fab span{font-size:11px;font-weight:550}.demo-device[data-style=portrait] .people-shelf{background:0 0;margin:10px 0 18px;padding:2px 0 0}.demo-device[data-style=portrait] .people-shelf>.app-eyebrow{display:none}.demo-device[data-style=portrait] .people-shelf>div{gap:10px}.demo-device[data-style=portrait] .favourite-person{border-radius:24px;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:12px;min-height:193px;padding:22px 15px}.demo-device[data-style=portrait] .favourite-person .demo-avatar{border-radius:22px;outline:0;width:75px;height:75px;font-size:27px}.demo-device[data-style=portrait] .favourite-person strong{font-size:18px}.demo-device[data-style=portrait] .favourite-person small{font-size:9px}.demo-device[data-style=portrait] .person-row{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:13px 0}.demo-device[data-style=portrait] .person-main .demo-avatar{border-radius:15px;width:42px;height:42px}.demo-device[data-style=portrait] .person-main strong{font-size:13px}.demo-device[data-style=portrait] .directory-letter{border-bottom:1px solid var(--m3-outlineVariant);padding:11px 0 7px}.demo-device[data-style=mosaic] .app-heading h2{font-size:33px;font-weight:720}.demo-device[data-style=mosaic] .bento-person{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer)!important}.demo-device[data-style=mosaic] .bento-person:nth-child(3){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)!important}.demo-device[data-style=mosaic] .bento-person .demo-avatar{background:var(--m3-surface);color:var(--m3-onSurface);border-radius:50%;width:46px;height:46px;font-size:18px}.demo-device[data-style=mosaic] .hero-tile{border-radius:28px;min-height:141px}.demo-device[data-style=mosaic] .hero-tile strong{font-size:19px}.demo-device[data-style=mosaic] .hero-tile>.demo-avatar{width:65px;height:65px;font-size:24px}.demo-device[data-style=mosaic] .hero-tile>span:not(.demo-avatar){font-size:10px}.demo-device[data-style=ledger] .app-nav{top:52px}.ledger-brand{align-items:center;gap:6px;display:flex;position:absolute;top:15px;left:20px;right:20px}.ledger-brand strong{letter-spacing:-1.2px;font-size:23px;font-weight:720}.ledger-brand small{letter-spacing:.08em;font-family:Fira Code,monospace;font-size:9px}.ledger-keypad{border:1px solid var(--m3-outlineVariant);background:0 0;border-radius:99px;align-items:center;gap:6px;margin-left:auto;padding:10px 12px;display:flex}.ledger-keypad svg{width:17px;height:17px}.ledger-keypad:after{content:"Keypad";font-size:11px}.demo-device[data-style=ledger]:not([data-screen=call]):not([data-screen=keypad]) .app-scroll{padding-top:102px}.demo-device[data-style=ledger] .app-heading{align-items:center}.demo-device[data-style=ledger] .app-heading h2{max-width:180px;font-size:34px;font-weight:400}.demo-device[data-style=ledger] .app-heading .demo-icon-button{width:32px;min-width:32px;height:32px;min-height:32px}.demo-device[data-style=ledger] .person-call{background:0 0;color:var(--m3-onSurface)!important}.demo-device[data-style=ledger] .app-search{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:0 9px}.demo-device[data-style=reach] #demo-app>.app-heading{padding:85px 22px 14px}.demo-device[data-style=reach] #demo-app>.app-heading h2{max-width:185px;font-size:42px;font-weight:400}.reach-tagline{color:var(--m3-onSurfaceVariant);padding:0 22px 35px;font-size:11px}.demo-device[data-style=reach] .people-shelf{background:0 0;margin:5px 0 10px;padding:4px 0 12px}.demo-device[data-style=reach] .people-shelf>.app-eyebrow{color:var(--m3-onSurface);text-transform:none;letter-spacing:0;font-size:11px}.demo-device[data-style=reach] .favourite-person{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);border-radius:24px;gap:10px;padding:13px 5px}.demo-device[data-style=reach] .favourite-person:nth-child(2){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer)}.demo-device[data-style=reach] .favourite-person .demo-avatar{outline:0;width:37px;height:37px;font-size:13px}.demo-device[data-style=reach] .person-row{border-bottom:1px solid var(--m3-outlineVariant);border-radius:0;padding:13px 0}.demo-device[data-style=reach] .demo-avatar{border-radius:16px}.demo-device[data-style=reach] .app-keypad-fab{border-radius:99px;gap:10px;width:calc(100% - 40px);height:52px;display:flex;left:20px;right:20px}.demo-device[data-style=reach] .app-keypad-fab span{font-size:14px}.home-favourites{grid-template-columns:1fr 1fr;gap:10px;margin:5px 0 23px;display:grid}.home-person{text-align:left;background:0 0;border:0;border-radius:23px;align-items:center;gap:10px;min-width:0;padding:10px 4px;display:flex}.home-person.featured{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer);grid-column:1/-1;min-height:144px;padding:24px}.home-person>span:last-child{min-width:0}.home-person small{margin-bottom:6px;font-size:9px;display:block}.home-person strong{overflow-wrap:anywhere;font-size:12px;display:block}.home-person.featured strong{font-size:23px}.demo-device[data-style=portrait] .recents-page>.app-heading h2{max-width:260px;font-size:32px;line-height:1.15}.demo-device[data-style=portrait] .recent-run{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0;padding:13px 0}.demo-device[data-style=mosaic] .home-favourites{grid-template-rows:1fr 1fr;grid-template-columns:1.1fr 1fr}.demo-device[data-style=mosaic] .home-person.featured{flex-direction:column;grid-area:1/1/3;align-items:flex-start;min-height:220px;padding:20px}.demo-device[data-style=mosaic] .home-person:not(.featured){background:var(--m3-tertiaryContainer);color:var(--m3-onTertiaryContainer);border-radius:22px;padding:14px}.demo-device[data-style=mosaic] .recent-run{background:var(--m3-surface)!important;color:var(--m3-onSurface)!important}.demo-device[data-style=reach] .recent-run{border-bottom:1px solid var(--m3-outlineVariant);background:0 0;border-radius:0}.demo-device[data-style=reach] .app-nav{top:35px;bottom:auto}.demo-device[data-style=reach] .recents-page{padding-top:100px}.demo-device[data-style=reach] .recents-page>.app-heading{padding-top:18px}.sample-call{padding-left:20px;padding-right:20px}.call-top{flex-direction:row;justify-content:space-between}.call-top>.demo-icon-button:first-of-type{order:-1}.call-identity{padding-top:38px}.call-identity .demo-avatar{border-radius:32px;width:93px;height:93px;font-size:33px}.call-identity h2{margin:25px 0 11px;font-size:29px}.call-tools{gap:13px}.six-controls{gap:10px}.six-controls button{min-height:73px}.demo-device[data-style=lunar][data-screen=call]{background:linear-gradient(125deg,var(--m3-primaryContainer),var(--m3-background) 90%)}.demo-device[data-style=lunar] .sample-call .six-controls button{background:var(--m3-surface);border:1px solid var(--m3-outline);border-radius:24px}.demo-device[data-style=lunar] .sample-call .six-controls button[aria-pressed=true]{background:var(--m3-primaryContainer);color:var(--m3-onPrimaryContainer)!important}.end-call{background:var(--m3-errorContainer);justify-content:center;gap:10px;height:55px;display:flex;color:var(--m3-onErrorContainer)!important}.end-call span{font-size:13px}.end-call svg{width:22px;height:22px;transform:none}.demo-device[data-style=portrait] .call-identity .demo-avatar{background:var(--m3-primaryContainer);width:100%;height:246px;color:var(--m3-onPrimaryContainer);border-radius:150px 150px 25px 25px;font-size:65px}.demo-device[data-style=portrait] .call-identity{padding-top:22px}.demo-device[data-style=portrait] .call-identity h2{margin-top:20px;font-size:28px}.demo-device[data-style=portrait] .call-identity>strong{margin-top:12px;font-size:18px}.demo-device[data-style=portrait] .six-controls button{border-radius:99px;min-height:68px}.demo-device[data-style=ledger] .call-identity{padding-top:50px}.demo-device[data-style=ledger] .call-identity .demo-avatar{display:none}.demo-device[data-style=ledger] .call-identity h2{max-width:205px;margin:25px 0;font-size:50px;font-weight:400;line-height:1.05}.demo-device[data-style=ledger] .call-identity>strong{border-top:1px solid var(--m3-outlineVariant);width:100%;margin-top:20px;padding-top:18px;font-family:Outfit,sans-serif;font-size:15px}.demo-device[data-style=ledger] .six-controls{gap:0}.demo-device[data-style=ledger] .six-controls button{border-top:1px solid var(--m3-outlineVariant);border-bottom:1px solid var(--m3-outlineVariant);border-radius:0;min-height:74px;background:0 0!important}.demo-device[data-style=ledger] .six-controls button[aria-pressed=true]{background:var(--m3-primaryContainer)!important;color:var(--m3-onPrimaryContainer)!important}.demo-device[data-style=mosaic] .call-identity{min-height:330px;padding:40px 10px 28px}.demo-device[data-style=mosaic] .call-identity .demo-avatar{background:var(--m3-primary);width:108px;height:108px;color:var(--m3-onPrimary);border-radius:36px;font-size:41px}.demo-device[data-style=reach] .call-identity{padding-top:80px}.demo-device[data-style=reach] .call-identity>strong{margin-top:20px;font-family:Outfit,sans-serif;font-size:24px}@media (width<=360px){.demo-device[data-style=portrait] .favourite-person{min-height:180px;padding:18px 12px}.demo-device[data-style=portrait] .favourite-person .demo-avatar{width:63px;height:63px;font-size:24px}.demo-device[data-style=portrait] .favourite-person strong{font-size:16px}.demo-device[data-style=lunar] .favourite-person{padding:15px 2px}.demo-device[data-style=ledger] .app-heading h2{max-width:160px;font-size:31px}.demo-device[data-style=ledger] .app-heading{gap:5px}.demo-device[data-style=reach] #demo-app>.app-heading{padding-top:65px}.demo-device[data-style=reach] #demo-app>.app-heading h2{font-size:37px}.demo-device[data-style=portrait] .call-identity .demo-avatar{height:220px}.call-identity h2{font-size:26px}}.blocker-page{padding-bottom:30px}.blocker-page>.demo-icon-button{margin-top:10px;margin-left:-8px}.blocker-page>.app-heading{padding-top:8px}.demo-device[data-style=ledger][data-screen=blocker] .app-scroll{padding-top:0}.dial-digits button{height:auto;min-height:66px;padding:9px 4px}