.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}.demo-stack [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}.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-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}@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}