/* AT Connect: readable device examples and finite motion. Content stays visible without JS. */
body[data-connect-readable]{font-size:18px;line-height:1.5}body[data-connect-readable] :is(p,li,label,input,textarea,select,button,summary){font-size:18px;line-height:1.5}body[data-connect-readable] :is(.small,.tag,.hint,small,footer){font-size:16px;line-height:1.5}body[data-connect-readable] :is(button,select,input:not([type=checkbox]),summary){min-height:44px}body[data-connect-readable] :is(a,button,input,select,summary):focus-visible{outline:3px solid #91b757;outline-offset:4px}
body .connect-example{--example-bg:#10261e;--example-ink:#f6f7ee;--example-muted:#c0cec3;--example-accent:#cdeaa6;margin:0;min-width:0;align-self:center;color:var(--example-ink);text-align:left}body .connect-example-stage{position:relative;isolation:isolate;border:1px solid #49604f;border-radius:24px;overflow:hidden;background:var(--example-bg);transform-style:preserve-3d}body .connect-example .device-picture,body .connect-example .mini-device-picture{width:100%;height:auto;max-height:290px;object-fit:cover;margin:0;border-radius:0;display:block;opacity:.72}body .connect-example-label{position:absolute;top:14px;left:16px;font-size:16px;line-height:1.4;color:var(--example-muted)}body .connect-example-device{position:absolute;bottom:16px;left:16px;font-size:22px;line-height:1.2;font-weight:750;color:var(--example-ink)}body .connect-example-ui{position:absolute;top:27%;right:7%;width:56%;border:1px solid #6e8d71;border-radius:18px;padding:16px;background:#142e25;box-shadow:0 12px 25px #06120b66;display:grid;gap:12px;transform:rotate(-3deg)}body .connect-example-app{font-size:16px;color:var(--example-muted)}body .connect-example-profile{font-size:20px;font-weight:700;line-height:1.2}body .connect-example-power{display:flex;align-items:center;justify-content:space-between;border-radius:11px;padding:10px 12px;background:var(--example-accent);color:#14251b;font-size:16px;font-weight:700}body .connect-example[data-example-device=android] .connect-example-ui{border-radius:10px;transform:rotate(3deg)}body .connect-example:is([data-example-device=windows],[data-example-device=macos],[data-example-device=linux]) .connect-example-ui{width:70%;right:7%;top:23%;border-radius:10px;transform:rotate(0)}body .connect-example-picker{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}body .connect-example-picker[hidden]{display:none}body .connect-example-picker button{font:inherit;font-size:16px!important;line-height:1.3;min-height:44px;padding:9px 12px;border:1px solid #566b5a;border-radius:24px;background:transparent;color:var(--example-ink);cursor:pointer}body .connect-example-picker button[aria-pressed=true]{background:var(--example-accent);border-color:var(--example-accent);color:#14251b}body .connect-example figcaption{padding:18px 4px 0}body .connect-example-heading{display:block;font-size:20px;line-height:1.3;letter-spacing:-.4px}body .connect-example-steps{padding-left:24px;margin:10px 0 6px;color:var(--example-muted)}body .connect-example-steps li{font-size:16px!important;line-height:1.5;padding:3px 0}body .connect-example-guide{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:var(--example-accent);text-decoration:underline;text-underline-offset:4px}body .lp-pass>.connect-example,body .pass>.connect-example{margin:0 0 22px}body .plain-scene>.connect-example{width:100%}body .mini-hero>.connect-example{width:100%}body .mini-hero .connect-example .mini-device-picture{max-height:245px}body .mini-hero .connect-example-stage{border-radius:20px}body .mini-hero .connect-example-steps{margin-top:8px}body .mini-hero .connect-example-heading{font-size:20px}body .mini-hero .connect-example-picker{gap:6px}body .mini-hero .connect-example-picker button{padding:8px 10px}body .connect-example :is(button,a):focus-visible{outline:3px solid var(--example-accent);outline-offset:3px}body .connect-example [hidden]{display:none!important}
/* New controls require their module, while the static example and guide never do. */
@media(max-width:700px){body .connect-example .device-picture,body .connect-example .mini-device-picture{max-height:215px}body .connect-example-ui{padding:12px;gap:8px}body .connect-example-profile{font-size:18px}body .connect-example-power{padding:8px 10px}body .connect-example-label{font-size:16px;top:12px;left:14px}body .connect-example-device{font-size:20px;bottom:14px;left:14px}body .mini-hero .connect-example .mini-device-picture{max-height:190px}body .connect-example figcaption{padding-top:14px}body .plain-scene{align-items:start}body .connect-example-picker{gap:6px}body .connect-example-picker button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}body .connect-example-stage{transform:none!important}}
body .plain-rail{align-items:flex-start;overflow-y:hidden}body .connect-example-device{display:none}body .connect-example .device-picture,body .connect-example .mini-device-picture{height:275px;max-height:none;object-fit:cover}body .connect-example-ui{top:25%;padding:14px;gap:10px}body .connect-example:is([data-example-device=windows],[data-example-device=macos],[data-example-device=linux]) .connect-example-ui{top:25%}@media(max-width:700px){body .connect-example .device-picture,body .connect-example .mini-device-picture,body .mini-hero .connect-example .mini-device-picture{height:230px;max-height:none}body .connect-example-ui{padding:12px;gap:8px}}
body #main .connect-example .device-picture{height:275px;max-height:none}@media(max-width:700px){body #main .connect-example .device-picture{height:230px;max-height:none}}
body .connect-example-ui{width:60%;top:20%}body .connect-example:is([data-example-device=windows],[data-example-device=macos],[data-example-device=linux]) .connect-example-ui{top:20%}body #mini-welcome .connect-example .mini-device-picture,body #mini-home .connect-example .mini-device-picture{height:275px;max-height:none}@media(max-width:700px){body #mini-welcome .connect-example .mini-device-picture,body #mini-home .connect-example .mini-device-picture{height:230px;max-height:none}}
body[data-connect-readable] .motion-toolbar{display:none!important}body[data-connect-readable] .scene-art,body[data-connect-readable] .scene-art::before,body[data-connect-readable] .scene-art::after,body[data-connect-readable] .scene-art *,body[data-connect-readable] .scene-art *::before,body[data-connect-readable] .scene-art *::after{animation:none!important}

/* Local example colors for the Mini App's existing light theme. */
:root[data-theme=light] body .connect-example{--example-ink:#17241b;--example-muted:#43564b;--example-link:#31551a}
body .connect-example-stage{--example-ink:#f6f7ee;--example-muted:#c0cec3;--example-accent:#cdeaa6;color:var(--example-ink)}
body .connect-example-guide{color:var(--example-link,var(--example-accent))}
:root[data-theme=light] body .connect-example :is(button,a):focus-visible{outline-color:#31551a}

/* Existing public instruction action: readable in the Mini App light theme. */
:root[data-theme=light] body #mini-public-guide{color:#31551a}
:root[data-theme=light] body #mini-public-guide:focus-visible{outline-color:#31551a}