.demo-main{padding-block:48px 96px}.demo-main h1{letter-spacing:-.045em;margin:0;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.04}.demo-tagline{max-width:62ch;color:var(--muted);margin:18px 0 40px;font-size:1.02rem;line-height:1.6}.demo-limits{max-width:68ch;color:var(--muted);margin:-22px 0 8px;font-size:.9rem}.demo-limits summary{cursor:pointer;color:var(--text);font-weight:650}.demo-limits summary::marker{color:var(--cyan)}.demo-limits ul{gap:8px;margin:12px 0 0;padding-left:20px;line-height:1.55;display:grid}.demo-cta{border:1px solid var(--line);background:linear-gradient(150deg,#239cd61f,#7e3edb1a);border-radius:22px;width:min(560px,100%);margin-top:44px;padding:28px}.demo-cta h2{letter-spacing:-.03em;margin:0;font-size:1.5rem}.demo-cta p{color:var(--muted);margin:12px 0 0;line-height:1.6}.demo-cta-actions{flex-wrap:wrap;gap:12px;margin-top:22px;display:flex}.demo-cta-note{font-size:.82rem}.demo-stage{--ios-bg:#000;--ios-grouped:#1c1c1e;--ios-grouped-hi:#2c2c2e;--ios-label:#fff;--ios-label-2:#ebebf599;--ios-label-3:#ebebf54d;--ios-separator:#545458a6;--ios-fill-2:#78788052;--ios-fill-3:#7676803d;--ios-tint:#0a84ff;--ios-green:#30d158;--ios-orange:#ff9f0a;--ios-red:#ff453a;--app-surface-1:#121214;--app-surface-2:#1e1e21;--app-text-1:#f7f7f8;--app-text-2:#aaaab2;--app-accent:#6da8ff;--app-on-accent:#0a1428;--app-destructive:#ff7878;--app-on-destructive:#280808;--app-success:#64dc8c;--app-warning:#ffbe50;--app-separator:#3a3a3e;--sp-xs:4px;--sp-sm:8px;--sp-md:16px;--sp-lg:24px;--sp-xl:32px;--r-md:8px;--r-lg:16px;--r-full:9999px;--group-inset:16px;--row-lead:16px;--row-lead-icon:60px;--ios-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;--ios-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace}.device-screen [hidden]{display:none!important}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.demo-stack{overscroll-behavior:contain;scrollbar-width:none;min-height:0;padding-bottom:var(--sp-lg);flex:1;overflow-y:auto;container-type:inline-size}.demo-stack::-webkit-scrollbar{display:none}.demo-wide-empty{text-align:center;min-height:380px;color:var(--ios-label-2);padding:60px 24px}.demo-wide-empty svg{width:42px;height:42px;color:var(--ios-label-3)}.demo-wide-empty h3{color:var(--ios-label);font:600 20px/1.2 var(--ios-font);margin:16px 0 6px}.demo-wide-empty p{font:15px/1.45 var(--ios-font);margin:0}.ios-navbar{z-index:5;align-items:center;gap:var(--sp-sm);min-height:52px;padding:var(--sp-sm) var(--group-inset);backdrop-filter:saturate(180%)blur(20px);background:#000000b8;display:flex;position:sticky;top:0}@supports not (backdrop-filter:blur(1px)){.ios-navbar{background:#000000f0}}@media (prefers-reduced-transparency:reduce){.ios-navbar{backdrop-filter:none;background:#000}}.demo-toolbar-actions{border-radius:var(--r-full);background:var(--ios-fill-3);align-items:center;gap:2px;margin-left:auto;padding:2px;display:flex}.demo-toolbar-actions:not(:has(button:not([hidden]))){background:0 0;padding:0}.demo-toolbar-actions .ios-circle-button{background:0 0}.demo-toolbar-actions .ios-circle-button:hover,.demo-toolbar-actions .ios-circle-button:focus-visible{background:#78788066}.ios-circle-button{background:var(--ios-fill-3);width:36px;height:36px;color:var(--ios-label);font:400 19px/1 var(--ios-font);cursor:pointer;border:0;border-radius:50%;place-items:center;padding:0;display:inline-grid;box-shadow:inset 0 0 0 1px #ffffff1f}.ios-circle-button:hover,.ios-circle-button:focus-visible{background:#78788066}.ios-circle-button svg{width:17px;height:17px}.demo-back span[aria-hidden]{margin-right:2px}.ios-inline-title{max-width:60%;color:var(--ios-label);font:600 17px/1.3 var(--ios-font);letter-spacing:-.022em;text-overflow:ellipsis;white-space:nowrap;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}[data-title-mode=large] .ios-inline-title,[data-title-mode=inline] .ios-large-title{display:none}.ios-large-title{margin:2px var(--group-inset) var(--sp-md);color:var(--ios-label);font:700 34px/1.06 var(--ios-font);letter-spacing:-.026em}.demo-pane{padding:0}.demo-pane:focus{outline:none}.demo-section-title{padding-inline:calc(var(--group-inset) + var(--sp-xs));color:var(--ios-label-2);font:400 16px/1.33 var(--ios-font);letter-spacing:-.01em;margin:0 0 7px}.demo-list{margin:0 var(--group-inset) 28px;background:var(--ios-grouped);border-radius:12px;padding:0;list-style:none}.demo-list>li:first-child>.demo-row{border-radius:12px 12px 0 0}.demo-list>li:last-child>.demo-row{border-radius:0 0 12px 12px}.demo-list>li:only-child>.demo-row{border-radius:12px}.demo-row{align-items:center;gap:var(--sp-md);width:100%;min-height:48px;padding:14px var(--group-inset);color:var(--ios-label);font:400 17px/1.294 var(--ios-font);letter-spacing:-.022em;text-align:left;background:0 0;border:0;display:flex;position:relative}.demo-list>li:not(:last-child)>.demo-row:after{content:"";inset:auto var(--row-lead) 0 var(--row-lead);background:var(--ios-separator);transform-origin:bottom;height:1px;position:absolute;transform:scaleY(.5)}.demo-row.has-icon:after{left:var(--row-lead-icon)}.demo-row-button{cursor:pointer}.demo-row-button:hover,.demo-row-button:focus-visible,.demo-row-button:active{background:var(--ios-grouped-hi)}.demo-row-button[disabled]{cursor:default}.demo-row-button[disabled]:hover{background:0 0}.demo-row-button[disabled] .demo-row-title{color:var(--ios-label-3)}.demo-row-icon{width:28px;height:28px;color:var(--ios-tint);flex:none}.demo-row-button[disabled] .demo-row-icon{color:var(--ios-label-3)}.demo-row-main{flex:1;gap:2px;min-width:0;display:grid}.demo-row-main>.demo-row-title{font-weight:600}.demo-row-title{font:400 17px/1.294 var(--ios-font);letter-spacing:-.022em}.demo-row-path,.demo-row-meta{color:var(--ios-label-2);font:400 13px/1.31 var(--ios-font);overflow-wrap:anywhere}.demo-row-reason{color:var(--ios-orange);font:400 13px/1.31 var(--ios-font);gap:5px;display:flex}.demo-row-reason svg{flex:none;width:13px;height:13px;margin-top:2px}.demo-row-value,.demo-row-trailing{color:var(--ios-label-2);font:400 17px/1.294 var(--ios-font);letter-spacing:-.022em;text-align:right;margin-left:auto}.demo-row-value code{font:400 15px/1.3 var(--ios-mono);overflow-wrap:anywhere}.demo-chevron{color:var(--ios-label-3);flex:none;font-size:15px;font-weight:600}.demo-row-stacked{gap:var(--sp-sm);display:grid}.demo-row-message{font:400 15px/1.4 var(--ios-font);display:block}.demo-toggle{cursor:pointer;justify-content:space-between}.demo-toggle input[type=checkbox]{-webkit-appearance:none;appearance:none;border-radius:var(--r-full);background:var(--ios-fill-2);cursor:pointer;flex:none;width:51px;height:31px;margin:0;transition:background-color .2s}.demo-toggle input[type=checkbox]:before{content:"";background:#fff;border-radius:50%;width:27px;height:27px;margin:2px;transition:transform .2s;display:block;box-shadow:0 3px 8px #00000026,0 1px 1px #00000029}.demo-toggle input[type=checkbox]:checked{background:var(--ios-green)}.demo-toggle input[type=checkbox]:checked:before{transform:translate(20px)}.demo-toggle input[type=checkbox]:disabled{opacity:.5;cursor:default}.demo-toggle input[type=checkbox]:focus-visible{outline:2px solid var(--ios-tint);outline-offset:2px}@media (prefers-reduced-motion:reduce){.demo-toggle input[type=checkbox],.demo-toggle input[type=checkbox]:before{transition:none}}@media (forced-colors:active){.demo-toggle input[type=checkbox]{-webkit-appearance:auto;appearance:auto;width:auto;height:auto}.demo-toggle input[type=checkbox]:before{display:none}}.demo-segmented{background:var(--ios-fill-3);border-radius:9px;flex:none;margin-left:auto;padding:2px;display:inline-flex}.demo-segmented button{color:var(--ios-label);font:600 13px/1.23 var(--ios-font);cursor:pointer;background:0 0;border:0;border-radius:7px;padding:5px 11px}.demo-segmented button[aria-pressed=true]{background:#636366;box-shadow:0 3px 8px #0000001f,0 1px 1px #0000000a}.demo-segmented button:disabled{color:var(--ios-label-3);cursor:default}@container (width<360px){.demo-row-labelled{flex-wrap:wrap}.demo-segmented{margin-left:0}.mirror-device{flex:100%}}.demo-play,.demo-stop{width:100%;padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-md);font:600 17px/1.294 var(--ios-font);letter-spacing:-.022em;cursor:pointer;border:0;display:block}.demo-play{background:var(--app-accent);color:var(--app-on-accent)}.demo-stop{background:var(--app-destructive);color:var(--app-on-destructive)}.demo-play:disabled,.demo-stop:disabled{opacity:.45;cursor:default}.demo-controls{gap:var(--sp-sm);margin:0 var(--group-inset) var(--sp-lg);padding:var(--sp-md);background:var(--ios-grouped);border-radius:10px;display:grid}.demo-progress{gap:var(--sp-xs);display:grid}.demo-status{align-items:center;gap:var(--sp-sm);font:400 17px/1.294 var(--ios-font);letter-spacing:-.022em;display:flex}.demo-status svg{width:20px;height:20px;color:var(--ios-tint);flex:none}.demo-elapsed{color:var(--ios-label);font-variant-numeric:tabular-nums;margin-left:auto}.demo-progress:has([data-progress]:not([hidden])) .icon-idle,.demo-progress:not(:has([data-progress]:not([hidden]))) .icon-active{display:none}.demo-bar{border-radius:var(--r-full);background:#78788047;height:4px;position:relative;overflow:hidden}.demo-bar i{border-radius:var(--r-full);background:var(--ios-tint);width:0;height:100%;transition:width 1s linear;display:block}.demo-bar[data-indeterminate=true] i{width:35%;transition:none;animation:1.4s ease-in-out infinite demo-bar-slide}@keyframes demo-bar-slide{0%{transform:translate(-100%)}to{transform:translate(320%)}}@media (prefers-reduced-motion:reduce){.demo-bar i{transition:none}.demo-bar[data-indeterminate=true] i{opacity:.4;width:100%;animation:none}}.demo-result-row{gap:var(--sp-sm)}.demo-result-mark{flex:none;font-size:17px;font-weight:700}[data-outcome=succeeded] .demo-result-row{color:var(--ios-green)}[data-outcome=failed] .demo-result-row{color:var(--ios-red)}[data-outcome=cancelled] .demo-result-row{color:var(--ios-label-2)}.demo-test-counts{color:var(--ios-label-2);justify-content:space-between;font-size:15px}.demo-test-counts b{color:var(--ios-label);margin-right:5px;font-size:17px;font-weight:600}.demo-diagnostic-head{align-items:baseline;gap:var(--sp-sm);display:flex}.demo-diagnostic-head b{border-radius:var(--r-full);font:600 11px/1.4 var(--ios-font);letter-spacing:.02em;text-transform:uppercase;flex:none;padding:2px 8px}[data-severity=error] .demo-diagnostic-head b{color:var(--app-destructive);background:#ff787829}[data-severity=warning] .demo-diagnostic-head b{color:var(--app-warning);background:#ffbe5029}[data-severity=note] .demo-diagnostic-head b{color:var(--app-text-2);background:#ffffff1a}[data-status=passed] .demo-diagnostic-head b{color:var(--ios-green);font-size:15px}[data-status=failed] .demo-diagnostic-head b{color:var(--ios-red);font-size:15px}[data-status=skipped] .demo-diagnostic-head b{color:var(--ios-label-2);font-size:15px}.demo-diagnostic .demo-row-title,.demo-test-case .demo-row-title{font-size:15px;line-height:1.35}.demo-snippet,.demo-command{border-radius:var(--r-md);color:var(--ios-label-2);font:400 13px/1.55 var(--ios-mono);white-space:pre;background:#0006;margin:2px 0 0;padding:10px 12px;overflow-x:auto}.demo-snippet-line{display:inline}.demo-snippet-line[data-offending=true]{color:var(--app-text)}.demo-snippet-number{color:var(--ios-label-3,var(--ios-label-2));margin-right:10px;display:inline-block}.demo-command{margin:0 var(--group-inset) var(--sp-lg);padding:12px var(--sp-md);background:var(--ios-grouped);white-space:pre-wrap;overflow-wrap:anywhere;border-radius:10px}.demo-log{height:200px;margin:0 var(--group-inset) var(--sp-sm);padding:12px var(--sp-md);background:var(--ios-grouped);color:var(--ios-label);font:400 13px/1.6 var(--ios-mono);overscroll-behavior:contain;border-radius:10px;overflow:auto}.demo-log-line{overflow-wrap:anywhere;white-space:pre-wrap;padding-block:1px}.demo-check{width:22px;height:22px;color:var(--ios-tint);visibility:hidden;flex:none}.demo-destination[aria-pressed=true] .demo-check{visibility:visible}.demo-mirror{flex-direction:column;min-height:100%;display:flex}.mirror-bar{align-items:center;gap:var(--sp-sm);padding:10px var(--group-inset);border-bottom:1px solid var(--app-separator);background:var(--app-surface-2);font:400 15px/1.3 var(--ios-font);display:flex}.mirror-device{color:var(--app-text-1);text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.mirror-badge{border-radius:var(--r-full);color:var(--ios-orange);font:600 11px/1.4 var(--ios-font);letter-spacing:.02em;text-transform:uppercase;background:#ff9f0a38;flex:none;padding:2px 8px}.mirror-companion-note{padding:8px var(--group-inset);border-bottom:1px solid var(--app-separator);background:var(--app-surface-2);color:var(--app-text-2);font:400 12px/1.35 var(--ios-font);margin:0}.mirror-status{color:var(--app-text-2);margin-left:auto;font-size:13px}.mirror-disconnect{border-radius:var(--r-md);color:var(--app-destructive);font:600 15px/1.3 var(--ios-font);cursor:pointer;background:0 0;border:0;flex:none;padding:4px 10px}.mirror-disconnect:hover,.mirror-disconnect:focus-visible{background:#ff787824}.mirror-stage{padding:var(--sp-md);flex:1;place-items:center;display:grid}.mirror-bezel{width:min(196px, calc(100cqw - 2 * var(--group-inset) - 48px));background:#000;border:2px solid #aaaab28c;border-radius:30px;padding:8px;position:relative;box-shadow:0 8px 24px #00000080}.mirror-bezel canvas{aspect-ratio:402/874;touch-action:none;cursor:pointer;border-radius:23px;width:100%;display:block}.mirror-touch{pointer-events:none;background:#0a84ff2e;border:2px solid #0a84ffe6;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;position:absolute}.mirror-message{gap:var(--sp-sm);text-align:center;max-width:34ch;color:var(--app-text-2);font:400 15px/1.45 var(--ios-font);display:grid}.mirror-message strong{color:var(--app-text-1);font:600 17px/1.3 var(--ios-font)}.mirror-controls{gap:var(--sp-sm);display:grid}.mirror-buttons{gap:var(--sp-sm);margin:0 var(--group-inset);grid-template-columns:repeat(3,1fr);display:grid}.mirror-buttons button{background:var(--ios-fill-3);color:var(--ios-tint);font:600 15px/1.3 var(--ios-font);cursor:pointer;border:0;border-radius:12px;padding:11px 8px}.mirror-buttons button:hover:not(:disabled),.mirror-buttons button:focus-visible{background:#78788066}.mirror-buttons button:disabled{color:var(--ios-label-3);cursor:default}.demo-section-footer{margin:-20px var(--group-inset) 28px;padding-inline:var(--sp-xs);color:var(--ios-label-2);font:400 13px/1.38 var(--ios-font)}[data-start-agent]>.demo-chevron,[data-open-agents]>.demo-chevron{margin-left:auto}.agent-row-icon{width:22px;height:22px}.agent-row-action{color:var(--ios-tint);font:400 17px/1.294 var(--ios-font);letter-spacing:-.022em}.agent-rejoin{color:var(--ios-tint);font:400 15px/1.3 var(--ios-font);flex:none;margin-left:auto}.demo-agent{flex-direction:column;min-height:100%;display:flex}.agent-chrome{z-index:4;position:sticky;top:52px}.agent-bottom{bottom:calc(-1 * var(--sp-lg));z-index:4;position:sticky}.agent-bar-main{gap:1px;min-width:0;display:grid}.agent-bar-meta{color:var(--app-text-2);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.agent-actions{padding:4px calc(var(--group-inset) - 10px);border-bottom:1px solid var(--app-separator);background:var(--app-surface-2);justify-content:space-between;display:flex}.agent-action{border-radius:var(--r-md);color:var(--ios-tint);font:400 15px/1.3 var(--ios-font);cursor:pointer;background:0 0;border:0;padding:4px 10px}.agent-action:hover,.agent-action:focus-visible{background:#0a84ff24}.agent-ended{padding:8px var(--group-inset);background:linear-gradient(#30d15824, #30d15824), var(--app-surface-2);color:var(--app-text-1);font:500 13px/1.35 var(--ios-font);margin:0}.agent-terminal{color:#e6e6e6;min-height:300px;font:400 11.5px/1.45 var(--ios-mono);white-space:pre;overscroll-behavior:contain;cursor:text;background:#000;flex:1;padding:10px 12px;overflow-x:auto}.agent-terminal:focus-visible{outline:2px solid var(--ios-tint);outline-offset:-2px}.agent-line{min-height:1.45em}.agent-dim{color:#8a8a8e}.agent-bold{font-weight:700}.agent-green{color:#00d787}.agent-red{color:#ff5f5f}.agent-blue{color:#00afff}.agent-amber{color:#d7af00}.agent-cursor{vertical-align:text-bottom;background:#e6e6e6;width:.6em;height:1.1em;animation:1s step-end infinite agent-blink;display:inline-block}@keyframes agent-blink{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.agent-cursor{animation:none}}.agent-input{opacity:0;pointer-events:none;border:0;width:1px;height:1px;padding:0;font-size:16px;position:absolute}.agent-mode-hint{padding:10px var(--group-inset);border-top:1px solid var(--app-separator);background:var(--app-surface-2);color:var(--app-text-1);font:400 13px/1.4 var(--ios-font)}.agent-mode-hint p{margin:0}.agent-mode-hint code{font:600 13px/1.3 var(--ios-mono);margin:6px 0;display:inline-block}.agent-mode-hint-footer{color:var(--app-text-2);font-size:12px}.agent-keys{border-top:1px solid var(--app-separator);background:var(--app-surface-2);scrollbar-width:none;gap:6px;padding:8px 10px;display:flex;overflow-x:auto}.agent-keys button{border-radius:var(--r-md);background:var(--ios-fill-2);min-width:38px;color:var(--app-text-1);font:500 13px/1.2 var(--ios-font);cursor:pointer;border:0;flex:none;padding:7px 10px}.agent-keys button:hover,.agent-keys button:focus-visible{background:var(--ios-fill-3);outline:1px solid var(--ios-tint)}.demo-guide{text-align:center;max-width:42ch;color:var(--muted);margin:24px 16px 0;line-height:1.6}.demo-tabbar{background:linear-gradient(145deg,#303033,#1c1c1e);border:1px solid #ffffff2e;border-radius:999px;flex:none;gap:2px;margin:4px 10px 0;padding:5px;display:flex;box-shadow:inset 0 1px 3px #ffffff1f}.demo-tabbar button{min-width:0;color:var(--ios-label);font:500 11px/1.2 var(--ios-font);cursor:pointer;background:0 0;border:0;border-radius:999px;flex-direction:column;flex:1;align-items:center;gap:3px;padding:7px 2px;display:flex}.demo-tabbar button[aria-current]{color:var(--ios-tint);background:#0000007a}.demo-tab-icon{display:flex;position:relative}.demo-tab-icon svg{width:25px;height:25px}.demo-tab-badge{color:#fff;background:var(--ios-red);min-width:18px;font:600 11px/1.2 var(--ios-font);border-radius:999px;padding:2px 4px;position:absolute;top:-5px;right:-10px}.demo-tabbar button:focus-visible,.demo-sheet-done:focus-visible{outline:2px solid var(--ios-tint);outline-offset:1px}.demo-stage[data-device-mode=wide] .demo-tabbar{z-index:3;width:min(440px,50%);height:42px;margin:0;position:absolute;top:6px;left:50%;transform:translate(-50%)}.demo-stage[data-device-mode=wide] .demo-tabbar button{flex-direction:row;justify-content:center;gap:5px;padding:6px 8px;font-size:14px}.demo-stage[data-device-mode=wide] .demo-tab-icon svg{width:17px;height:17px}.demo-stage[data-device-mode=wide] .demo-guide{max-width:70ch}.demo-workbench{z-index:4;margin:4px var(--group-inset) 20px;background:var(--ios-grouped);box-shadow:0 0 0 8px var(--ios-bg);display:flex;position:sticky;top:52px}.demo-workbench button{flex:1;min-height:32px}.demo-favorite[aria-pressed=true]{color:#ffd60a}.demo-select{min-width:0;max-width:68%;color:var(--ios-tint);font:inherit;text-align:right;text-overflow:ellipsis;background:0 0;border:0;margin-left:auto}.demo-select option{color:var(--ios-label);background:var(--ios-grouped)}.demo-search{margin:0 var(--group-inset) 24px;display:block}.demo-search input{width:100%;color:var(--ios-label);background:var(--ios-grouped);font:16px var(--ios-font);border:0;border-radius:10px;padding:10px 12px}.demo-empty{text-align:center;color:var(--ios-label-2);margin:40px 24px;font-size:16px;line-height:1.5}.demo-empty svg{width:48px;height:48px}.demo-empty h3{color:var(--ios-label);margin-bottom:8px;font-size:21px}.demo-destination-sheet{z-index:10;border:1px solid var(--ios-separator);width:100%;max-width:none;max-height:calc(100% - 64px);color:var(--ios-label);overscroll-behavior:contain;font-family:var(--ios-font);background:#111113;border-radius:28px 28px 0 0;margin:0;padding:0 0 24px;position:absolute;inset:auto 0 0;box-shadow:0 -80px 0 120px #0000008c}.demo-destination-sheet:before{content:"";background:var(--ios-label-3);border-radius:999px;width:34px;height:5px;margin:8px auto 0;display:block}.demo-sheet-header{z-index:1;background:#111113;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:16px;display:flex;position:sticky;top:0}.demo-sheet-header strong{font-size:17px}.demo-sheet-done{color:var(--ios-tint);background:var(--ios-fill-3);font:600 15px var(--ios-font);cursor:pointer;border:0;border-radius:999px;padding:8px 10px}.demo-stage{--bezel:12px;--screen-w:clamp(320px, calc(100vw - 2 * var(--bezel) - 56px), 393px);--screen-r:44px;justify-items:center;margin-block:32px 44px;display:grid}.demo-device-picker{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:22px;display:flex}.demo-device-picker button{color:#fff;cursor:pointer;background:#20212b;border:1px solid #fff3;border-radius:14px;padding:10px 16px;font:600 14px/1.35 system-ui,sans-serif}.demo-device-picker button span{color:#b8bac7;font-size:12px;font-weight:400;display:block}.demo-device-picker button[aria-pressed=true]{background:#17354b;border-color:#7dc8ff}.demo-device-picker button:focus-visible{outline-offset:2px;outline:2px solid #7dc8ff}.demo-pan-hint{color:#b8bac7;text-align:center;margin:-8px 16px 16px;font:13px/1.4 system-ui,sans-serif;display:none}.demo-stage[data-device-mode=wide]{--bezel:9px;--screen-r:22px;--screen-w:min(1040px, calc(100vw - 100px));flex-direction:column;align-items:center;display:flex}.demo-stage[data-device-mode=wide]:focus-visible{outline-offset:4px;outline:2px solid #7dc8ff}.demo-stage[data-device-mode=wide] .device-screen{grid-template-rows:54px minmax(0,1fr);grid-template-columns:minmax(240px,29%) minmax(0,1fr);height:clamp(600px,76svh,780px);display:grid}.demo-stage[data-device-mode=wide] .ios-statusbar{z-index:1;grid-area:1/1/auto/-1}.demo-stage[data-device-mode=wide] .dynamic-island,.demo-stage[data-device-mode=wide] .ios-home-indicator{display:none}.demo-stage[data-device-mode=wide] .demo-stack{grid-area:2/2}.demo-wide-sidebar{display:none}.demo-stage[data-device-mode=wide] .demo-wide-sidebar{background:#1b1e20;border-right:1px solid #ffffff1a;grid-area:2/1;min-height:0;display:block;overflow-y:auto}.demo-wide-sidebar h2{font:700 20px/1.2 var(--ios-font);margin:20px 16px 12px}.demo-wide-sidebar .demo-search{margin-bottom:16px}.demo-wide-sidebar .demo-list{margin-inline:8px}.demo-sidebar-launch{background:var(--ios-tint);color:#fff;font:600 14px var(--ios-font);cursor:pointer;border:0;border-radius:9px;margin:20px 16px;padding:8px 14px}@media (width<=800px){.demo-stage[data-device-mode=wide]{--screen-w:760px;align-items:flex-start;width:100vw;margin-inline:calc(50% - 50vw);overflow-x:auto}.demo-stage[data-device-mode=wide] .demo-device-picker{align-self:center}.demo-stage[data-device-mode=wide] .device{flex:none;margin-inline:16px}.demo-stage[data-device-mode=wide] .demo-guide{align-self:center}.demo-stage[data-device-mode=wide] .demo-pan-hint{align-self:flex-start;width:100vw;display:block}}@media (width<=560px){.demo-stage{--screen-w:min(393px, calc(100vw - 2 * var(--bezel) - 16px));width:100vw;margin-inline:calc(50% - 50vw)}}.demo-stage-embed{margin-block:0}@media (width>=561px){.demo-stage-embed{width:100%;container-type:inline-size}}@media (width>=901px){.demo-stage-embed{--screen-w:clamp(320px, calc(100cqw - 2 * var(--bezel)), 393px)}.demo-stage-embed .device-screen{height:clamp(560px, calc(var(--screen-w) * 852 / 393), 760px)}}.device{padding:var(--bezel);border-radius:calc(var(--screen-r) + var(--bezel));font-family:var(--ios-font);background:linear-gradient(160deg,#3a3d45,#16171b 40%,#0b0c0f);border:1px solid #ffffff24;box-shadow:0 40px 90px #0000008c,inset 0 0 0 1px #0009}.device-screen{width:var(--screen-w);height:clamp(520px, min(78svh, calc(var(--screen-w) * 852 / 393)), 852px);border-radius:var(--screen-r);background:var(--ios-bg);color:var(--ios-label);flex-direction:column;display:flex;position:relative;overflow:hidden}.ios-statusbar{height:54px;font:600 15px/1 var(--ios-font);letter-spacing:-.01em;flex:none;align-items:center;gap:5px;padding:0 24px 0 28px;display:flex;position:relative}.dynamic-island{background:#000;border-radius:9999px;width:118px;height:34px;position:absolute;top:11px;left:50%;transform:translate(-50%)}.statusbar-bell{opacity:.9;width:13px;height:13px}.statusbar-right{align-items:center;gap:6px;margin-left:auto;display:flex}.signal-bars{align-items:flex-end;gap:2px;height:11px;display:flex}.signal-bars i{background:currentColor;border-radius:1px;width:3px}.signal-bars i:first-child{height:4px}.signal-bars i:nth-child(2){height:6px}.signal-bars i:nth-child(3){height:9px}.signal-bars i:nth-child(4){height:11px}.statusbar-wifi{width:17px;height:12px}.battery{border:1px solid #ffffff73;border-radius:4px;width:25px;height:12px;padding:1.5px;position:relative}.battery:after{content:"";background:#ffffff73;border-radius:0 2px 2px 0;width:2px;height:4px;position:absolute;top:3.5px;right:-3px}.battery i{background:#fff;border-radius:2px;width:58%;height:100%;display:block}.ios-home-indicator{background:#ffffff59;border-radius:9999px;flex:none;width:140px;height:5px;margin:6px auto 8px}