/* The Onbun field guide. The phone preview below keeps its native platform UI. */
.docs-head{position:relative;max-width:1300px;margin:0 auto;padding:170px var(--gutter) 65px;min-height:490px;isolation:isolate}.docs-head>*{position:relative}.docs-head .head-art{position:absolute;right:6%;bottom:10px;width:35%;height:350px;z-index:-1}.docs-head .head-art:before{content:'';position:absolute;inset:20% 15% 5%;background:#c9d0b4;border:1.5px solid var(--text);border-radius:50%;z-index:-1}.docs-head h1{margin:24px 0;font-size:clamp(48px,5.6vw,78px);line-height:1.02;max-width:720px}.docs-head h1 em{font-weight:400}.docs-head p{font-size:14px;max-width:420px}.docs{max-width:1300px;margin:0 auto;padding:60px var(--gutter) 90px;border-top:1.5px solid var(--text);display:grid;grid-template-columns:195px minmax(0,1fr);gap:clamp(40px,6vw,80px)}.toc{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;font-size:12px;padding:0 0 24px}.toc b{display:block;font:700 9px var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--text);margin:28px 0 12px}.toc b:first-child{margin-top:0}.toc a{display:block;padding:6px 13px;margin:0;border-left:1px solid var(--line);color:var(--secondary);text-decoration:none;min-height:32px}.toc a:hover{color:var(--text);background:var(--row)}.toc a.on{color:var(--text);background:var(--logo);border-color:var(--text)}
article.prose{min-width:0;max-width:780px;font-size:14px;line-height:1.85}.prose section{scroll-margin-top:100px;padding-bottom:45px;margin-bottom:45px;border-bottom:1px solid var(--line)}.prose section:last-child{border:0;margin:0}.prose h2{font-size:36px;letter-spacing:-.06em;margin:0 0 22px;line-height:1.1}.prose h3{font:700 18px/1.3 var(--font);margin:32px 0 14px;letter-spacing:-.02em}.prose p{margin:0 0 18px}.prose p,.prose li{color:var(--secondary)}.prose strong{color:var(--text);font-weight:700}.prose a{color:var(--link);text-decoration:underline;text-underline-offset:3px}.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}.prose li{margin:0 0 12px;padding-left:4px}.prose li::marker{color:var(--link);font-weight:700}code{font:.86em var(--mono);background:var(--row);padding:2px 5px;border-radius:3px;color:var(--text);overflow-wrap:anywhere}pre{position:relative;margin:22px 0 25px;font:12px/1.8 var(--mono);background:var(--row);border:1px solid var(--line);border-left:3px solid var(--text);border-radius:4px;padding:20px 22px;overflow:auto;color:var(--text)}pre code{background:none;padding:0;font-size:inherit}.k-key{color:#794334}.k-str{color:#446b3c}.k-num{color:#815719}.k-com{color:var(--tertiary)}.copy{position:absolute;top:8px;right:8px;font:700 10px var(--font);padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:4px;color:var(--text);opacity:0}pre:hover .copy,.copy:focus-visible{opacity:1}.tree{font:11px/1.8 var(--mono);color:var(--text)}.tree .c{color:var(--tertiary)}.app-docs{display:grid;gap:0;margin-top:28px;border:1px solid var(--line);border-radius:5px;overflow:hidden}.app-doc{display:grid;grid-template-columns:44px 1fr;gap:17px;padding:23px;background:var(--paper);border-bottom:1px solid var(--line)}.app-doc:last-child{border:0}.app-doc h3{margin:2px 0 0;font-size:15px}.app-doc h3 small{margin-left:6px;font:10px var(--mono);color:var(--tertiary)}.app-doc p{margin:9px 0 0;font-size:12px;line-height:1.8}.app-doc p strong{font-weight:700;color:var(--text)}
table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;font:700 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--text);padding:12px;border-bottom:1.5px solid var(--text)}td{overflow-wrap:anywhere;padding:13px 12px;line-height:1.65;border-bottom:1px solid var(--line);vertical-align:top;color:var(--secondary)}td:first-child{white-space:nowrap}.req{font-size:10px;color:var(--link)}.swatches{display:flex;flex-wrap:wrap;gap:7px}.swatch{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid var(--line);border-radius:4px;font:10px var(--mono)}.swatch i{width:18px;height:18px;box-shadow:inset 0 0 0 1px #25251f33;border-radius:3px}.ref-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:24px 0}.ref-tabs button{padding:9px 15px;border:1px solid var(--line-2);border-radius:25px;color:var(--secondary);font:11px var(--font);min-height:38px}.ref-tabs button:hover{background:var(--row)}.ref-tabs button[aria-selected=true]{background:var(--text);color:var(--paper);border-color:var(--text)}#ref-body{overflow:auto}
.explorer-wrap{max-width:1440px;margin:0 auto 90px;padding:30px var(--gutter) 0;scroll-margin-top:95px}.explorer-wrap>header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px}.explorer-wrap h2{margin:18px 0;font-size:52px;line-height:1}.explorer-wrap header p{margin:0;color:var(--secondary);max-width:670px;font-size:13px;line-height:1.8}.explorer{display:grid;grid-template-columns:200px minmax(0,1fr) 290px;height:min(820px,calc(100vh - 110px));min-height:660px;border:1.5px solid var(--text);border-radius:6px;overflow:hidden;background:var(--paper);box-shadow:4px 5px 0 var(--text)}.ex-list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--row)}.ex-search{margin:14px;padding:10px 12px;border:1px solid var(--line-2);border-radius:25px;background:var(--paper);color:var(--text);font-size:11px;min-width:0}.ex-items{overflow:auto;padding:0 10px 16px;flex:1}.ex-items b{display:block;font:700 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary);margin:18px 10px 8px}.ex-items button{display:flex;justify-content:space-between;width:100%;text-align:left;padding:8px 10px;font:11px var(--mono);color:var(--secondary);border-radius:4px;min-height:33px}.ex-items button:hover{color:var(--text);background:var(--paper)}.ex-items button[aria-current=true]{background:var(--text);color:var(--paper)}.ex-items button[aria-current=true] small{color:#fffaf0bb}.ex-items button small{color:var(--tertiary);font-family:var(--font)}.ex-stage{display:flex;flex-direction:column;min-width:0;min-height:0}.ex-title{display:flex;align-items:baseline;gap:12px;padding:21px 22px 0;flex-wrap:wrap}.ex-title h3{margin:0;font:700 17px var(--mono)}.ex-title span{color:var(--tertiary);font-size:11px}.ex-device{flex:1;display:grid;place-items:center;padding:28px;min-height:0;background:repeating-linear-gradient(0deg,transparent,transparent 23px,#25251f05 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,#25251f05 24px)}.phone{position:relative;width:min(100%,620px);aspect-ratio:19.5/9;border-radius:42px;padding:10px;background:#1a1a1c;box-shadow:0 0 0 1px #3a3a3c}.phone:before{content:'';position:absolute;left:17px;top:50%;width:8px;height:54px;transform:translateY(-50%);border-radius:5px;background:#000;z-index:3}.screen{--k-accent:#0a84ff;--k-surface:#1c1c1e;position:relative;height:100%;border-radius:33px;background:#000;overflow:hidden;display:grid;grid-template-columns:50px 1fr}.rail{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding-left:12px}.rail i{width:20px;height:20px;border-radius:7px;background:#2c2c2e}.rail i.on{background:#48484a}.canvas{position:relative;overflow:auto;padding:16px 22px 16px 14px;scrollbar-width:none;color:#f5f5f7;font-family:-apple-system,'SF Pro Text',var(--font);font-size:15px;line-height:1.3}.canvas::-webkit-scrollbar{display:none}.ex-tabs{display:flex;gap:4px;padding:0 16px;border-top:1px solid var(--line)}.ex-tabs button{padding:12px 10px;font-size:11px;color:var(--tertiary);border-bottom:3px solid transparent}.ex-tabs button[aria-selected=true]{color:var(--text);border-color:var(--accent)}.ex-code{position:relative;height:200px;border-top:1px solid var(--line)}.ex-code textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;border:0;background:var(--bg);color:var(--text);font:11.5px/1.7 var(--mono);padding:16px 20px;outline:none;tab-size:2}.ex-code .err{position:absolute;right:10px;bottom:8px;font:11px var(--mono);color:#9e3027;background:var(--paper);padding:5px 10px}.ex-log{height:200px;overflow:auto;border-top:1px solid var(--line);padding:16px 20px;font:11.5px/1.7 var(--mono);color:var(--secondary);background:var(--bg)}.ex-log .cmd{color:var(--text)}.ex-log:empty:before{content:'Tap buttons, toggles and rows in the preview to see what they would send.';color:var(--tertiary);font-family:var(--font)}.ex-side{border-left:1px solid var(--line);overflow:auto;padding:24px 20px 30px}.ex-side h4{margin:0 0 10px;font:700 9px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--tertiary)}.ex-side>p{font-size:12px;line-height:1.8;color:var(--secondary);margin:0 0 24px}.ex-side p.also{font-size:11px;color:var(--secondary)}.ex-side h4.also{margin-top:24px}.prop{padding:14px 0;border-top:1px solid var(--line)}.prop header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.prop code{background:none;padding:0;color:var(--text);font-size:12px}.prop .type{font:10px var(--mono);color:var(--tertiary);margin-left:auto}.prop p{margin:7px 0 0;font-size:11px;color:var(--secondary);line-height:1.7}.prop .vals{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.prop .vals button{font:10px var(--mono);padding:5px 8px;border:1px solid var(--line-2);border-radius:4px;color:var(--secondary);min-height:30px}.prop .vals button:hover{color:var(--text);background:var(--control-2)}
@media(max-width:1000px){.docs-head h1{font-size:60px}.docs-head .head-art{width:36%;right:2%;height:300px}.docs{grid-template-columns:165px minmax(0,1fr);gap:40px}}
@media(max-width:640px){.docs-head{padding-top:195px;padding-bottom:245px;min-height:0}.docs-head>.eyebrow{font-size:8px;max-width:280px}.docs-head h1{font-size:48px;margin:20px 0}.docs-head p{font-size:13px;max-width:280px}.docs-head .head-art{width:60%;height:245px;bottom:-10px;right:0}.docs-head .head-art:before{inset:20% 10% 5%}.docs{padding-top:36px;padding-bottom:45px;gap:0}.prose h2{font-size:33px}.prose{font-size:13px!important}.prose h3{font-size:16px}.app-doc{padding:18px 15px;grid-template-columns:34px 1fr;gap:12px}.app-doc .glyph{width:34px;height:34px;border-radius:9px}.app-doc .glyph img{width:18px;height:18px}.app-doc h3{font-size:14px}.app-doc h3 small{font-size:9px}.app-doc p{font-size:12px}.tree{font-size:10px}pre{font-size:11px;padding:18px 16px}.explorer-wrap{padding-top:15px;margin-bottom:55px}.explorer-wrap h2{font-size:40px}.explorer-wrap header p{font-size:12px}.explorer{box-shadow:3px 4px 0 var(--text)}.ex-title{padding:18px 16px 0;gap:8px}.ex-title h3{font-size:15px}.ex-title span{font-size:10px}.ex-platform{margin-left:0!important}.ex-tabs{padding:0 8px}.ex-tabs button{padding:12px 8px;font-size:10px}.ex-side{padding:22px 18px}table{font-size:11px}.prose section{scroll-margin-top:100px}.toc{display:none}}

/* ── Kit preview (an approximation of the native look) ── */
.k{box-sizing:border-box;min-width:0}
.k-stack{display:flex}
.k-layers{display:grid;position:relative}.k-layers>*{grid-area:1/1}
.k-split{display:grid;height:100%}
.k-scroll{display:flex}.k-scroll[style*="row"]{scrollbar-width:none}.k-scroll[style*="row"]>*{flex-shrink:0}
.k-grid{display:grid}
.k-list,.k-section .k-group{background:var(--k-surface);border-radius:14px;overflow:hidden}
.k-list.plain{background:none}
.k-group>.k+.k,.k-list>.k+.k{border-top:.5px solid #ffffff1c}
.k-section{display:flex;flex-direction:column;gap:6px;width:100%}
.k-section h6{margin:0 0 0 14px;font-size:12px;font-weight:400;color:#98989f;text-transform:uppercase;letter-spacing:.02em}
.k-foot{margin:0 14px;font-size:12px;color:#98989f}
.k-card{display:flex;background:var(--k-surface);border-radius:20px;width:100%}
.k-spacer{flex:1}
.k-divider{border:0;border-top:.5px solid #ffffff2a;margin:4px 0;width:100%}
.k-text{margin:0;line-height:1.28}
.k-text code{font-size:.85em}
.k-label{display:inline-flex;align-items:center;gap:7px}
.k-sym{flex-shrink:0;display:inline-block;vertical-align:middle}
.k-image{position:relative;display:grid;place-items:center;border-radius:14px;overflow:hidden;background:#2c2c2e;min-height:60px;width:100%}
.k-image img{width:100%;height:100%;display:block}
.k-gallery{position:relative;border-radius:14px;overflow:hidden;background:#2c2c2e;height:150px}.k-gallery img{width:100%;height:100%;object-fit:cover}
.k-count,.k-badge-corner{position:absolute;right:8px;bottom:8px;font-size:11px;padding:3px 8px;border-radius:999px;display:flex;gap:4px;align-items:center}
.k-count{background:#0009}
.k-video,.k-media{aspect-ratio:16/9}
.k-playbadge{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0006;backdrop-filter:blur(10px)}
.k-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;align-self:flex-start}
.k-stat{display:flex;flex-direction:column;gap:3px;padding:12px 14px;background:var(--k-surface);border-radius:16px;width:100%}
.k-stat-label{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#98989f}
.k-stat b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.k-meter{display:block;height:5px;border-radius:3px;background:#ffffff1f;overflow:hidden;width:100%}
.k-meter i{display:block;height:100%;background:var(--tint,var(--k-accent));border-radius:3px}
.k-stat .k-meter{margin-top:6px}
.k-scrubber{width:100%}
.k-times{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#98989f;font-variant-numeric:tabular-nums}
.k-progress{display:flex;flex-direction:column;gap:6px;width:100%;font-size:13px;color:#98989f}
.k-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid #ffffff2a;border-top-color:#f5f5f7;animation:kspin .8s linear infinite;display:inline-block}
@keyframes kspin{to{transform:rotate(360deg)}}
.k-gauge{position:relative;display:grid;place-items:center;width:110px;height:110px}
.k-gauge svg{position:absolute;inset:0;fill:none;stroke-width:5;stroke-linecap:round}.k-gauge .track{stroke:#ffffff1f}
.k-gauge b{font-size:20px;font-variant-numeric:tabular-nums}.k-gauge span{position:absolute;bottom:4px;font-size:11px;color:#98989f}
.k-chart{width:100%;height:90px}.k-chart svg{width:100%;height:100%;display:block}
.k-avatar{display:inline-grid;place-items:center;border-radius:50%;background:#3a3a3c;overflow:hidden;font-weight:600;flex-shrink:0}.k-avatar img{width:100%;height:100%;object-fit:cover}
.k-row{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:46px;width:100%}
.k-row-sym{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--k-accent);flex-shrink:0}
.k-row-img{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0}
.k-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.k-row-text b{font-weight:400;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-row-text small{color:#98989f;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-row-value{color:#98989f;font-size:14.5px}
.k-comment{padding:6px 0 6px 10px;border-left:2px solid #ffffff1c;width:100%}
.k-comment-head{display:flex;gap:6px;font-size:12.5px;color:#98989f;align-items:center}.k-comment-head b{color:#f5f5f7;font-weight:600}.k-comment-head span{margin-left:auto;display:flex;align-items:center;gap:2px}
.k-comment p{margin:3px 0 0;font-size:14.5px}
.k-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:20px;width:100%}.k-empty b{font-size:17px}.k-empty p{margin:0;color:#98989f;font-size:14px;max-width:300px}
.k-lyrics p{margin:0 0 10px;font-size:22px;font-weight:700;color:#ffffff44;letter-spacing:-.3px}.k-lyrics p.on{color:#fff}
.k-clock{display:flex;flex-direction:column;align-items:center;width:100%;line-height:1}.k-clock b{font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.k-clock span{font-size:15px;color:#98989f;margin-top:10px}
.k-clock.face-bold b{font-weight:800}.k-clock.face-mono b{font-family:var(--mono);font-weight:400}
.k-web{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;width:100%;border:1.5px dashed #ffffff2a;border-radius:16px;text-align:center;padding:14px;font-size:13.5px}.k-web small{color:#98989f;font-size:12px}
.k-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 16px;border-radius:999px;font:500 15px -apple-system,var(--font);color:var(--tint,var(--k-accent));background:color-mix(in srgb,var(--tint,var(--k-accent)) 16%,transparent);border:0;cursor:pointer;white-space:nowrap;transition:transform .12s,filter .12s;list-style:none}
.k-button::-webkit-details-marker{display:none}
.k-button:active{transform:scale(.95)}
.k-button.v-prominent{background:var(--tint,var(--k-accent));color:#fff}
.k-button.v-plain,.k-button.v-link{background:none;padding:0 6px}
.k-button.v-glass,.k-glass{background:linear-gradient(180deg,#ffffff26,#ffffff0d),var(--glass-tint,#7c7c8026);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 1px 0 #ffffff40,inset 0 0 0 .5px #ffffff2a,0 6px 18px #0006;color:#f5f5f7}
.k-button.s-circle{width:40px;padding:0;border-radius:50%}
.k-button.s-roundedRectangle,.k-button.s-rounded{border-radius:12px}
.k-button.z-large{height:50px;font-size:17px}.k-button.z-large.s-circle{width:54px;height:54px}
.k-button.z-small{height:30px;font-size:13px;padding:0 12px}.k-button.z-small.s-circle{width:30px}
.k-button.on{background:#f5f5f7;color:#000}
.k-button:disabled{opacity:.4}
.k-pill{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px}
.k-pill .k-button{background:none;box-shadow:none;backdrop-filter:none}
.k-menu{position:relative}
.k-menu summary{cursor:pointer}
.k-menu-list{position:absolute;z-index:5;top:calc(100% + 6px);left:0;min-width:200px;padding:6px;border-radius:16px;background:#2c2c2ef0;backdrop-filter:blur(20px);box-shadow:0 12px 30px #000a}
.k-menu-list button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:14.5px;text-align:left;color:#f5f5f7}
.k-menu-list button span{flex:1}
.k-menu-list button:hover{background:#ffffff14}
.k-toggle,.k-slider,.k-stepper,.k-field{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--k-surface);border-radius:14px;width:100%;font-size:15.5px}
.k-group>.k-toggle,.k-group>.k-slider,.k-group>.k-stepper,.k-group>.k-field{border-radius:0;background:none}
.k-toggle span,.k-stepper>span:first-child{flex:1}
.k-switch{width:51px;height:31px;border-radius:16px;background:#39393d;position:relative;transition:background .2s;flex-shrink:0}
.k-switch::after{content:'';position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0004;transition:transform .2s}
.k-switch[aria-checked=true]{background:#30d158}.k-switch[aria-checked=true]::after{transform:translateX(20px)}
.k-slider input{flex:1;accent-color:var(--tint)}
.k-step{display:flex;background:#2c2c2e;border-radius:9px}.k-step button{display:grid;place-items:center;width:46px;height:32px;color:#f5f5f7}.k-step button+button{border-left:1px solid #48484a}
.k-picker.seg{display:flex;padding:2px;border-radius:10px;background:#2c2c2e;width:100%}
.k-picker.seg button{flex:1;display:flex;gap:5px;justify-content:center;align-items:center;padding:6px 10px;border-radius:8px;font-size:13.5px;color:#f5f5f7}
.k-picker.seg button.on{background:#636366;box-shadow:0 2px 6px #0005}
.k-picker:not(.seg){display:flex;justify-content:space-between;width:100%;padding:10px 14px}.k-picker-menu{color:var(--k-accent);display:flex;align-items:center;gap:4px}
.k-field input{flex:1;min-width:0;background:none;border:0;color:#f5f5f7;font:inherit;outline:none}
.k-field input::placeholder{color:#636366}
.k-prefix{color:#98989f}
.k-link{display:inline-flex;align-items:center;gap:6px;color:var(--k-accent)}
.k-pager{position:relative;width:100%}
.k-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}.k-dots i{width:6px;height:6px;border-radius:50%;background:#ffffff40}.k-dots i.on{background:#fff}
.k-tap{cursor:pointer}
.k-tap:active{opacity:.7}
[data-k-act]{cursor:pointer}

/* ── Phone style switch ───────────────────────────── */
.ex-platform{display:flex;margin-left:auto;border:1px solid var(--line-2)}
.ex-platform button{padding:5px 12px;font:12px var(--mono);color:var(--secondary)}
.ex-platform button:hover{color:var(--text)}
.ex-platform button[aria-checked=true]{background:var(--accent);color:#fff}

/* ── Android preview: Material 3 Expressive, dark, seeded from the app's accent ── */
.phone[data-platform=android]{
  --m-primary:#a8c8ff;--m-on-primary:#003063;--m-secondary-container:#3d4758;--m-on-secondary-container:#d9e3f8;
  --m-surface-container:#1d2024;--m-surface-container-high:#272a2f;--m-surface-container-highest:#32353a;
  --m-on-surface:#e2e2e9;--m-on-surface-variant:#c4c6d0;--m-outline:#8e9099;
  border-radius:30px;background:#202124;box-shadow:0 0 0 1px #3c4043}
.phone[data-platform=android]::before{left:20px;width:11px;height:11px;border-radius:50%}
.phone[data-platform=android] .screen{--k-accent:var(--m-primary);--k-surface:var(--m-surface-container);border-radius:22px;grid-template-columns:58px 1fr}
.phone[data-platform=android] .rail{align-self:center;justify-self:center;margin-left:12px;padding:6px;gap:6px;border-radius:999px;background:var(--m-surface-container-high);box-shadow:0 2px 6px #0007}
.phone[data-platform=android] .rail i{width:30px;height:30px;border-radius:50%;background:none;position:relative}
.phone[data-platform=android] .rail i::after{content:'';position:absolute;inset:8px;border-radius:4px;background:var(--m-on-surface-variant);opacity:.55}
.phone[data-platform=android] .rail i.on{background:var(--m-secondary-container)}
.phone[data-platform=android] .rail i.on::after{background:var(--m-on-secondary-container);opacity:1}
.phone[data-platform=android] .canvas{font-family:'Roboto Flex',Roboto,system-ui,sans-serif;color:var(--m-on-surface)}
/* Lists: Material's segmented list, separate rounded items with small gaps. */
.phone[data-platform=android] :is(.k-list,.k-section .k-group){display:flex;flex-direction:column;gap:2px;background:none;border-radius:0;overflow:visible}
.phone[data-platform=android] :is(.k-group,.k-list)>.k{background:var(--m-surface-container);border-radius:4px}
.phone[data-platform=android] :is(.k-group,.k-list)>.k:first-child{border-top-left-radius:20px;border-top-right-radius:20px}
.phone[data-platform=android] :is(.k-group,.k-list)>.k:last-child{border-bottom-left-radius:20px;border-bottom-right-radius:20px}
.phone[data-platform=android] :is(.k-group,.k-list)>.k+.k{border-top:0}
.phone[data-platform=android] .k-list.plain>.k{background:none}
.phone[data-platform=android] .k-section h6{margin:4px 0 4px 16px;font-size:14px;font-weight:500;text-transform:none;letter-spacing:.1px;color:var(--m-primary)}
.phone[data-platform=android] .k-foot{color:var(--m-on-surface-variant)}
.phone[data-platform=android] .k-row{padding:12px 16px;min-height:56px}
.phone[data-platform=android] .k-row-sym{border-radius:50%;background:var(--m-secondary-container)}
.phone[data-platform=android] .k-row-text small,.phone[data-platform=android] .k-row-value{color:var(--m-on-surface-variant)}
.phone[data-platform=android] .k-card{border-radius:24px}
.phone[data-platform=android] .k-stat{border-radius:20px}
.phone[data-platform=android] :is(.k-image,.k-gallery){border-radius:16px;background:var(--m-surface-container-high)}
/* Buttons: tonal by default, filled when prominent, text when plain; the corners tighten while pressed. */
.phone[data-platform=android] .k-button{height:40px;padding:0 16px;font:500 14px/1 'Roboto Flex',Roboto,system-ui,sans-serif;letter-spacing:.1px;background:var(--m-secondary-container);color:var(--tint,var(--m-on-secondary-container));box-shadow:none;backdrop-filter:none;transition:border-radius .2s cubic-bezier(.2,0,0,1),background .2s}
.phone[data-platform=android] .k-button:active{transform:none;border-radius:12px}
.phone[data-platform=android] .k-button.v-prominent{background:var(--tint,var(--m-primary));color:var(--m-on-primary)}
.phone[data-platform=android] .k-button.v-prominent[style*="--tint"]{color:#fff}
.phone[data-platform=android] :is(.k-button.v-plain,.k-button.v-link){background:none;padding:0 12px;color:var(--tint,var(--m-primary))}
.phone[data-platform=android] .k-button.s-circle{width:40px;padding:0;border-radius:50%}
.phone[data-platform=android] .k-button.s-circle:active{border-radius:12px}
.phone[data-platform=android] .k-button.z-large{height:56px;font-size:16px;padding:0 24px}
.phone[data-platform=android] .k-button.z-large.s-circle{width:56px;padding:0}
.phone[data-platform=android] .k-button.z-small{height:32px;font-size:13px;padding:0 12px}
.phone[data-platform=android] .k-button.z-small.s-circle{width:32px;padding:0}
.phone[data-platform=android] .k-button.on{background:var(--tint,var(--m-primary));color:var(--m-on-primary);border-radius:12px}
.phone[data-platform=android] .k-button.on.s-circle{border-radius:14px}
/* The floating material: an opaque tonal surface with a soft shadow, not glass. */
.phone[data-platform=android] .k-glass,.phone[data-platform=android] .k-button.v-glass{background:var(--m-surface-container-high);backdrop-filter:none;box-shadow:0 2px 6px #0008;color:var(--m-on-surface)}
.phone[data-platform=android] .k-pill{padding:4px;gap:2px}
.phone[data-platform=android] .k-pill .k-button{background:none;box-shadow:none;color:var(--m-on-surface);width:48px;padding:0;border-radius:999px}
.phone[data-platform=android] .k-pill .k-button.on{background:var(--m-secondary-container);color:var(--m-on-secondary-container)}
.phone[data-platform=android] .k-menu-list{border-radius:16px;padding:4px 0;background:var(--m-surface-container);backdrop-filter:none;box-shadow:0 4px 12px #0009}
.phone[data-platform=android] .k-menu-list button{border-radius:0;padding:12px 16px;font-size:14px;color:var(--m-on-surface)}
.phone[data-platform=android] .k-menu-list button:hover{background:#ffffff14}
/* Controls in rows */
.phone[data-platform=android] :is(.k-toggle,.k-slider,.k-stepper,.k-field){background:var(--m-surface-container);border-radius:20px;padding:12px 16px}
.phone[data-platform=android] .k-switch{width:52px;height:32px;border-radius:16px;background:var(--m-surface-container-highest);box-shadow:inset 0 0 0 2px var(--m-outline)}
.phone[data-platform=android] .k-switch::after{left:8px;top:8px;width:16px;height:16px;background:var(--m-outline);box-shadow:none;transition:all .2s cubic-bezier(.2,0,0,1)}
.phone[data-platform=android] .k-switch[aria-checked=true]{background:var(--m-primary);box-shadow:none}
.phone[data-platform=android] .k-switch[aria-checked=true]::after{left:4px;top:4px;width:24px;height:24px;transform:translateX(20px);background:var(--m-on-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23a8c8ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* Slider: a thick track, a gap around the handle, a tall thin handle. */
.phone[data-platform=android] .k-slider input{-webkit-appearance:none;appearance:none;height:44px;background:none;--fill:var(--tint,var(--m-primary))}
.phone[data-platform=android] .k-slider input::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:linear-gradient(to right,var(--fill) var(--p,50%),var(--m-secondary-container) var(--p,50%))}
.phone[data-platform=android] .k-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:4px;height:44px;margin-top:-14px;border-radius:2px;background:var(--fill);box-shadow:0 0 0 6px var(--m-surface-container)}
.phone[data-platform=android] .k-slider input::-moz-range-track{height:16px;border-radius:999px;background:var(--m-secondary-container)}
.phone[data-platform=android] .k-slider input::-moz-range-progress{height:16px;border-radius:999px;background:var(--fill)}
.phone[data-platform=android] .k-slider input::-moz-range-thumb{width:4px;height:44px;border:0;border-radius:2px;background:var(--fill);box-shadow:0 0 0 6px var(--m-surface-container)}
.phone[data-platform=android] .k-step{gap:4px;background:none}
.phone[data-platform=android] .k-step button{width:40px;height:40px;border-radius:50%;background:var(--m-secondary-container);color:var(--m-on-secondary-container);transition:border-radius .2s}
.phone[data-platform=android] .k-step button:active{border-radius:12px}
.phone[data-platform=android] .k-step button+button{border-left:0}
/* Segmented picker: Material's connected button group. */
.phone[data-platform=android] .k-picker.seg{gap:2px;padding:0;background:none;border-radius:0}
.phone[data-platform=android] .k-picker.seg button{height:40px;border-radius:8px;background:var(--m-surface-container-high);color:var(--m-on-surface-variant);font-size:14px;font-weight:500;box-shadow:none;transition:border-radius .2s cubic-bezier(.2,0,0,1)}
.phone[data-platform=android] .k-picker.seg button:first-child{border-radius:999px 8px 8px 999px}
.phone[data-platform=android] .k-picker.seg button:last-child{border-radius:8px 999px 999px 8px}
.phone[data-platform=android] .k-picker.seg button.on{background:var(--m-primary);color:var(--m-on-primary);border-radius:999px}
.phone[data-platform=android] .k-picker-menu{color:var(--m-primary)}
.phone[data-platform=android] .k-field{border-radius:4px 4px 0 0;background:var(--m-surface-container-highest);box-shadow:inset 0 -1px 0 var(--m-on-surface-variant)}
.phone[data-platform=android] .k-field:focus-within{box-shadow:inset 0 -2px 0 var(--m-primary)}
.phone[data-platform=android] .k-field input{color:var(--m-on-surface)}
.phone[data-platform=android] .k-badge{border-radius:8px}
/* Progress: a thin bar on a tonal track; the media scrubber's played part is a wave. */
.phone[data-platform=android] .k-meter{height:4px;border-radius:2px;background:var(--m-secondary-container)}
.phone[data-platform=android] .k-meter i{background:var(--tint,var(--m-primary))}
.phone[data-platform=android] .k-scrubber .k-meter{height:12px;overflow:visible;background:linear-gradient(var(--m-secondary-container),var(--m-secondary-container)) right center/100% 4px no-repeat}
.phone[data-platform=android] .k-scrubber .k-meter i{background:var(--m-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6q5-6 10 0t10 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") left center/20px 12px repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M0 6q5-6 10 0t10 0' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") left center/20px 12px repeat-x}
.phone[data-platform=android] .k-spin{border-color:var(--m-secondary-container);border-top-color:var(--m-primary);border-width:4px}
.phone[data-platform=android] .k-gauge .track{stroke:var(--m-secondary-container)}
.phone[data-platform=android] .k-dots i.on{background:var(--m-primary)}

@media (max-width:1100px){
  .explorer{grid-template-columns:200px minmax(0,1fr);height:auto}
  .ex-side{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:420px}
  .ex-device{min-height:360px}
}
@media (max-width:860px){
  .docs{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .prose section{padding-bottom:40px;margin-bottom:40px}
  .explorer{grid-template-columns:1fr}
  .ex-list{border-right:0;border-bottom:1px solid var(--line);max-height:220px}
  .ex-device{padding:12px;min-height:0}
  .phone{border-radius:28px;padding:7px}.screen{border-radius:22px;grid-template-columns:30px 1fr}.rail{padding-left:8px;gap:8px}.rail i{width:12px;height:12px;border-radius:4px}
  .canvas{font-size:13px;padding:10px}
  .app-doc{padding:16px;gap:14px}
  td:first-child{white-space:normal}
  table{table-layout:fixed}td:first-child,th:first-child{width:38%}
}

@media(min-width:641px) and (max-width:1000px){.docs-head{padding-top:195px}.docs-head h1{font-size:54px;max-width:65%}.docs-head p{max-width:57%}.docs-head .head-art{height:285px}}
.docs-head{padding-top:155px;padding-bottom:60px;min-height:350px}.docs-head h1{font-size:clamp(45px,5.5vw,70px);margin:20px 0}.docs-head .head-art{height:265px;bottom:0;width:31%}.docs-head .head-art:before{display:none}
@media(min-width:641px) and (max-width:1000px){.docs-head{padding-top:150px;min-height:340px}.docs-head h1{font-size:53px;max-width:65%}.docs-head .head-art{height:240px;right:2%}}
@media(max-width:640px){.docs-head{padding-top:130px;padding-bottom:190px;min-height:0}.docs-head h1{font-size:43px;margin:0 0 15px}.docs-head p{font-size:12px}.docs-head .head-art{height:200px;width:60%;bottom:-15px;right:0}}
.docs-head .head-art{height:290px}
@media(max-width:640px){.docs-head .head-art{height:205px}}
@media(max-width:380px){.docs-head h1{font-size:37px}}

/* The copyable prompt for coding agents, folded by default. */
.agent-prompt{margin:22px 0 25px;border:1px solid var(--line);border-radius:6px;background:var(--row)}
.agent-prompt summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}
.agent-prompt summary::-webkit-details-marker{display:none}
.agent-prompt summary span{display:flex;flex-direction:column;gap:3px;flex:1}
.agent-prompt summary small{color:var(--secondary);font-size:12px}
.agent-prompt summary i{font-style:normal;font-size:20px;line-height:1;transition:transform .2s}
.agent-prompt[open] summary i{transform:rotate(45deg)}
.agent-prompt summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}
.agent-prompt pre{margin:0 18px;font-size:11px;padding-top:46px}
.agent-prompt pre .copy{opacity:1}
.agent-prompt .prompt-note{margin:12px 18px 16px;color:var(--secondary);font-size:13px}