.DeviceFrame-module__YiP2GW__device{--device-screen-ratio:16 / 10;--device-reading-height:656px;--device-metal:color-mix(in oklab, var(--material-steel) 22%, var(--device-ink));--device-edge:color-mix(in oklab, var(--material-steel) 52%, var(--device-ink));--device-shadow:color-mix(in oklab, var(--device-ink) 72%, transparent);isolation:isolate;width:100%;max-width:1200px;margin:0 auto;padding:0 24px 28px;position:relative}.DeviceFrame-module__YiP2GW__device:before{content:"";z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent, var(--device-ink) 20%, var(--device-ink) 65%, transparent);mask-image:linear-gradient(transparent, var(--device-ink) 20%, var(--device-ink) 65%, transparent);background:radial-gradient(ellipse at 50% 76%, color-mix(in oklab, var(--material-steel) 10%, transparent), transparent 64%), radial-gradient(ellipse at 22% 58%, color-mix(in oklab, var(--accent) 5%, transparent), transparent 55%);position:absolute;inset:12% -4% -32px}.DeviceFrame-module__YiP2GW__device:after{content:"";z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 42%, var(--device-shadow), transparent 68%);height:64px;position:absolute;bottom:-12px;left:2%;right:2%}.DeviceFrame-module__YiP2GW__lid{border:1px solid var(--device-edge);background:linear-gradient(115deg, var(--device-metal), var(--device-ink) 28%, var(--device-ink) 76%, var(--device-metal));box-shadow:inset 0 1px 0 color-mix(in oklab, var(--material-silver) 55%, transparent), inset 1px 0 0 color-mix(in oklab, var(--material-steel) 24%, transparent), inset -1px -2px 2px var(--device-ink), 0 24px 40px -30px var(--device-shadow);border-radius:28px 28px 12px 12px;padding:24px 8px 10px;position:relative}.DeviceFrame-module__YiP2GW__camera{place-items:center;width:30px;height:12px;display:grid;position:absolute;top:6px;left:50%;transform:translate(-50%)}.DeviceFrame-module__YiP2GW__camera i{background:radial-gradient(circle at 35% 30%, var(--device-edge), var(--device-ink) 62%);width:5px;height:5px;box-shadow:0 0 0 1px var(--device-metal);border-radius:50%}.DeviceFrame-module__YiP2GW__screen{aspect-ratio:var(--device-screen-ratio);border:1px solid var(--device-ink);background:var(--bg);border-radius:8px;grid-template-rows:44px minmax(0,1fr) 44px 2px;min-width:0;display:grid;position:relative;overflow:hidden}.DeviceFrame-module__YiP2GW__titlebar{border-bottom:1px solid var(--border);background:var(--surface);font-size:var(--type-caption);color:var(--muted);grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 18px;display:grid}.DeviceFrame-module__YiP2GW__traffic{gap:6px;display:flex}.DeviceFrame-module__YiP2GW__traffic i{background:var(--faint);opacity:.5;border-radius:50%;width:8px;height:8px}.DeviceFrame-module__YiP2GW__windowTitle{white-space:nowrap;justify-content:center;align-items:center;gap:8px;display:flex}.DeviceFrame-module__YiP2GW__separator{color:var(--faint)}.DeviceFrame-module__YiP2GW__example{color:var(--faint);justify-self:end}.DeviceFrame-module__YiP2GW__workspace{background:radial-gradient(ellipse at 50% 46%, color-mix(in oklab, var(--surface) 68%, var(--bg)), var(--bg) 76%);min-width:0;min-height:0;padding:16px 24px;display:grid}.DeviceFrame-module__YiP2GW__canvas{width:100%;min-width:0;height:100%;min-height:0;container-type:size}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface{place-items:center;width:100%;height:100%;min-height:0;padding:0;display:grid}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface>div{place-items:center;width:100%;height:100%;min-height:0;padding:0;display:grid}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface>div{container-type:size!important}.DeviceFrame-module__YiP2GW__canvas .demo-fit:not(.demo-fit--narrow){width:min(100%, calc(100cqh * 576 / var(--demo-h)));max-width:none;min-height:0;height:auto!important}.DeviceFrame-module__YiP2GW__statusbar{border-top:1px solid var(--border);color:var(--faint);font-size:var(--type-caption);justify-content:space-between;align-items:center;padding:0 16px;display:flex}.DeviceFrame-module__YiP2GW__statusbar>span{gap:10px;display:flex}.DeviceFrame-module__YiP2GW__progress{background:var(--border);height:2px;overflow:hidden}.DeviceFrame-module__YiP2GW__progress .signature-chapter-progress{height:2px}.DeviceFrame-module__YiP2GW__base{z-index:1;border:1px solid var(--device-edge);border-bottom-color:var(--device-ink);background:linear-gradient(90deg, var(--device-metal), var(--device-edge) 4%, var(--device-metal) 18%, var(--device-metal) 82%, var(--device-edge) 96%, var(--device-metal));height:18px;box-shadow:inset 0 1px 0 color-mix(in oklab, var(--material-silver) 48%, transparent), inset 0 -6px 5px -4px var(--device-ink), 0 3px 3px -1px var(--device-shadow);border-radius:2px 2px 40% 40%/2px 2px 12px 12px;position:absolute;bottom:12px;left:0;right:0}.DeviceFrame-module__YiP2GW__base:before{content:"";background:var(--device-ink);border-radius:2px;height:4px;position:absolute;top:-5px;left:12%;right:12%}.DeviceFrame-module__YiP2GW__base span{background:var(--device-metal);width:12%;height:6px;box-shadow:inset 0 -1px 1px var(--device-edge), inset 0 2px 2px var(--device-ink);border-radius:0 0 8px 8px;position:absolute;top:-1px;left:44%}.DeviceFrame-module__YiP2GW__device[data-device-frame=window] .DeviceFrame-module__YiP2GW__lid{box-shadow:none;background:0 0;border-color:#0000}.DeviceFrame-module__YiP2GW__device[data-device-frame=window] .DeviceFrame-module__YiP2GW__screen{border-color:var(--border)}.DeviceFrame-module__YiP2GW__device[data-device-frame=window] .DeviceFrame-module__YiP2GW__camera,.DeviceFrame-module__YiP2GW__device[data-device-frame=window] .DeviceFrame-module__YiP2GW__base{visibility:hidden}.DeviceFrame-module__YiP2GW__device[data-device-frame=window]:after{opacity:.4}:is(.DeviceFrame-module__YiP2GW__canvas .ed-pause,.DeviceFrame-module__YiP2GW__canvas .es-pause){display:none}.DeviceFrame-module__YiP2GW__canvas [data-paused="1"] *{animation-play-state:paused!important}:is(.DeviceFrame-module__YiP2GW__canvas .demo-floor,.DeviceFrame-module__YiP2GW__canvas .story-floor,.DeviceFrame-module__YiP2GW__canvas .story-search:before){display:none}.DeviceFrame-module__YiP2GW__canvas .story-search{aspect-ratio:auto;width:100%;max-width:920px;min-height:0;padding:0}@media (max-width:1199px){.DeviceFrame-module__YiP2GW__device{padding:0}.DeviceFrame-module__YiP2GW__lid,.DeviceFrame-module__YiP2GW__device[data-device-frame=window] .DeviceFrame-module__YiP2GW__lid{box-shadow:none;background:0 0;border:0;padding:0}.DeviceFrame-module__YiP2GW__camera,.DeviceFrame-module__YiP2GW__base{display:none}.DeviceFrame-module__YiP2GW__screen{aspect-ratio:auto;border-color:var(--border);border-radius:12px;grid-template-rows:44px auto 44px 2px}.DeviceFrame-module__YiP2GW__workspace{min-height:var(--device-reading-height);padding:20px 16px}.DeviceFrame-module__YiP2GW__canvas{height:auto;container-type:inline-size}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface{height:auto;min-height:100%}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface>div{height:auto;min-height:100%}.DeviceFrame-module__YiP2GW__canvas .signature-demo-surface>div{container-type:inline-size!important}.DeviceFrame-module__YiP2GW__canvas .demo-fit:not(.demo-fit--narrow){width:100%;max-width:576px}.DeviceFrame-module__YiP2GW__device:after{opacity:.35;bottom:-24px}}@media (max-width:640px){.DeviceFrame-module__YiP2GW__titlebar{grid-template-columns:auto 1fr;gap:8px;padding:0 12px}.DeviceFrame-module__YiP2GW__traffic{gap:4px}.DeviceFrame-module__YiP2GW__traffic i{width:6px;height:6px}.DeviceFrame-module__YiP2GW__windowTitle{justify-content:flex-end;gap:6px}.DeviceFrame-module__YiP2GW__windowTitle>span:first-of-type,.DeviceFrame-module__YiP2GW__separator,.DeviceFrame-module__YiP2GW__example{display:none}.DeviceFrame-module__YiP2GW__workspace{padding:16px 0}.DeviceFrame-module__YiP2GW__statusbar{padding:0 8px}.DeviceFrame-module__YiP2GW__canvas .demo-fit--narrow{width:100%;max-width:344px;min-height:0;height:auto!important}.DeviceFrame-module__YiP2GW__canvas .story-search{padding-inline:8px}}
.LocalizedDemos-module__8-k50a__localized .LocalizedDemos-module__8-k50a__copy{min-height:228px}.LocalizedDemos-module__8-k50a__localized [data-device-frame]{--device-reading-height:704px}@media (min-width:768px){.LocalizedDemos-module__8-k50a__localized .LocalizedDemos-module__8-k50a__copy{min-height:192px}}.LocalizedDemos-module__8-k50a__localized .ed-pg-stat{font-size:var(--reference-type-stat)}.LocalizedDemos-module__8-k50a__localized .demo-fit--narrow .es-call-bar{grid-template-columns:minmax(0,1fr) auto;column-gap:8px;display:grid}.LocalizedDemos-module__8-k50a__localized .demo-fit--narrow .es-mark{grid-area:1/1}.LocalizedDemos-module__8-k50a__localized .demo-fit--narrow .es-meta{grid-area:1/2}.LocalizedDemos-module__8-k50a__localized .demo-fit--narrow .es-ep{grid-area:2/1/3/-1}.LocalizedDemos-module__8-k50a__localized .demo-fit--narrow .es-body{gap:8px}