.bao{--bao-stage:var(--scene);--bao-tile:var(--bg);--bao-t:.55s}
.bao .ln{display:inline-block;max-width:100%}
.bao .nb{white-space:nowrap}
.bao .t-body,.bao .bao-tile p,.bao .ex-group p,.bao .ex-cap .cap,.bao .bao-note dd{text-wrap:pretty}
.bao-n{font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--mute)}
.bao-en{font-family:var(--body);font-size:13px;line-height:1.4;color:var(--mute)}

.bao-temp{position:absolute;right:var(--gx);top:calc(var(--hd) + 18px);z-index:3}


.bao-hero{background:var(--bao-stage)}
.bao-row{position:relative;z-index:1;--rh:30vw;--cap:78px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;outline:0}
.bao-row::-webkit-scrollbar{display:none}
.bao-row__track{list-style:none;margin:0;display:flex;align-items:flex-end;width:max-content;min-width:100%;padding:calc(var(--rh) * .16) var(--gx) 0}
.bao-m{flex:0 0 auto;width:calc(var(--rh) * 1.7778 * var(--vis,1));scroll-snap-align:center;position:relative}
.bao-m > a{display:block;color:inherit;outline:0}
.bao-m__img{display:block;position:relative;z-index:1;height:var(--rh);transform-origin:50% 86%;transition:transform var(--bao-t) var(--ease),opacity var(--bao-t) var(--ease);will-change:transform,opacity}
.bao-m__img picture{display:block;width:100%;height:100%}
.bao-m__img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;max-width:none}
.bao-m__cap{position:relative;z-index:3;display:flex;gap:8px;align-items:baseline;min-height:var(--cap);padding:14px 16px 0 2px;border-top:1px solid var(--scene-line);font-family:var(--head);font-size:14px;font-weight:500;line-height:1.4;color:var(--scene-ink);transition:color var(--bao-t) var(--ease),border-color var(--bao-t) var(--ease)}
.bao-m__cap .bao-n{flex:0 0 auto;font-size:12px;color:inherit;opacity:.7}
.bao-m__cap .nm{min-width:0}
.bao-m > a:focus-visible .bao-m__cap{outline:2px solid var(--scene-ink);outline-offset:-2px}

.bao-row.is-live .bao-m.is-focus .bao-m__img{z-index:2}
.bao-row.is-live .bao-m:not(.is-focus) .bao-m__img{opacity:.44;transform:scale(.9)}
.bao-row.is-live .bao-m.is-focus .bao-m__img{transform:scale(1.12)}
.bao-row.is-live .bao-m:not(.is-focus) .bao-m__cap{color:var(--scene-muted)}
.bao-row.is-live .bao-m.is-focus .bao-m__cap{border-top-color:var(--scene-ink)}

.bao-row__ctl{display:flex;align-items:center;gap:4px;position:absolute;right:var(--gx);z-index:3}
.bao-count{font-family:var(--body);font-size:13px;color:var(--scene-muted);font-variant-numeric:tabular-nums;min-width:4.2em;text-align:center}
.bao-arrow{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--scene-line);border-radius:50%;display:grid;place-items:center;color:var(--scene-ink);transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
.bao-arrow:hover{background:rgba(36,50,42,.06);border-color:var(--scene-ink)}
.bao-arrow:focus-visible{outline:2px solid var(--scene-ink);outline-offset:2px}
.bao-arrow[disabled]{opacity:.35;cursor:default}
.bao-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bao-row__hint{display:none}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .bao-hero .p-hero__copy{max-width:none}
  .bao-hero .lead{max-width:30em}
  .bao-row{position:absolute;left:0;right:0;bottom:0;--rh:min(36svh,23vw)}
  .bao-row__ctl{bottom:calc(min(36svh,23vw) * 1.16 + 78px + 14px)}
}

@media (min-width:721px) and (max-width:899px), (min-width:721px) and (max-aspect-ratio:5/4){
  .bao-row{--rh:30vw;padding-bottom:28px}
  .bao-hero .p-hero__copy{padding-bottom:8px}
  .bao-row__ctl{position:static;justify-content:flex-end;padding:0 var(--gx) 0;margin-top:4px}
}

@media (max-width:720px){
  .bao-temp{top:calc(var(--hd) + 12px)}
  .bao-hero .p-hero__copy{padding-bottom:10px}
  .bao-row{--rh:56vw;--cap:64px;scroll-snap-type:x mandatory}
  .bao-row__track{padding:calc(var(--rh) * .06) 8vw 0}
  .bao-m{width:84vw}
  .bao-m__img{transform-origin:50% 88%}
  .bao-row.is-live .bao-m:not(.is-focus) .bao-m__img{opacity:.4;transform:scale(.92)}
  .bao-row.is-live .bao-m.is-focus .bao-m__img{transform:none}
  .bao-m__cap{font-size:15px;padding:12px 12px 0 2px}
  .bao-row__ctl{display:none}
  .bao-row__hint{display:flex;justify-content:space-between;align-items:center;padding:10px var(--gx) 18px;font-family:var(--body);font-size:13px;color:var(--scene-muted)}
  .bao-row__hint b{font-weight:600;color:var(--scene-ink);font-variant-numeric:tabular-nums}
}

@media (min-width:900px) and (min-aspect-ratio:5/4){
  .bao-hero--one .p-hero__art img{transform:translateX(10%)}
}
.bao-hero--one .p-hero__art img{-webkit-mask-image:none;mask-image:none}


.bao-filter{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:22px;margin-top:8px}
.bao-filter .t-small{white-space:nowrap}
.bao-chips{display:flex;flex-wrap:wrap;gap:8px}
.bao-chips button{font-family:var(--head);font-size:14px;font-weight:500;line-height:1.2;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.4);color:var(--ink);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.bao-chips button:hover{border-color:var(--ink)}
.bao-chips button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bao-chips button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bao-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}
.bao-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 32px}
.bao-grid.no-filter{border-top:1px solid var(--ink);padding-top:28px;margin-top:8px}
.bao-tile{min-width:0;scroll-margin-top:calc(var(--hd) + var(--tabbar) + 24px);transition:opacity .3s var(--ease)}
.bao-tile.dim{opacity:.3}
.bao-tile{display:flex}
.bao-tile > a{display:flex;flex-direction:column;width:100%;color:inherit;outline:0}
.bao-tile__img{display:block;aspect-ratio:4/3;background:var(--bao-tile);overflow:hidden}
.bao-tile__img img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 84%;transition:transform var(--bao-t) var(--ease),opacity var(--bao-t) var(--ease)}
.bao-grid.is-live .bao-tile:not(.is-focus) .bao-tile__img img{opacity:.6;transform:scale(.95)}
.bao-tile__body{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding-top:16px;border-top:1px solid var(--line);transition:border-color var(--bao-t) var(--ease)}
.bao-grid.is-live .bao-tile.is-focus .bao-tile__body{border-top-color:var(--ink)}
.bao-tile__body h3{display:flex;align-items:baseline;gap:10px;font-size:clamp(19px,1.5vw,22px);line-height:1.35;letter-spacing:-.01em}
.bao-tile__body h3 .bao-n{font-size:13px;flex:0 0 auto}
.bao-tile__body .bao-en{margin-top:4px}
.bao-tile__body p.role{margin-top:10px;font-size:15px;line-height:1.6;color:var(--mute)}
.bao-models{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bao-models span{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:4px;padding:5px 8px;font-family:var(--body);font-size:13px;line-height:1;font-weight:500;background:rgba(255,255,255,.4);white-space:nowrap}
.bao-tile__keys{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:auto 0 0;padding-top:18px;width:100%}
.bao-tile__keys div{border-top:1px solid var(--line);padding-top:10px;min-width:0}
.bao-tile__keys dt{font-family:var(--head);font-size:13px;line-height:1.4;color:var(--mute)}
.bao-tile__keys dd{margin:4px 0 0;font-family:var(--head);font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.bao-tile__keys dd span{font-family:var(--body);font-size:13px;font-weight:400;color:var(--mute);margin-left:4px;white-space:nowrap}
.bao-tile__go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--body);font-size:14px;font-weight:500;padding-bottom:4px;border-bottom:1px solid var(--ink);transition:color .2s var(--ease),border-color .2s var(--ease)}
.bao-tile > a:hover .bao-tile__go{color:var(--link);border-color:var(--link)}
.bao-tile > a:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:3px}
.bao-tile.is-hit .bao-tile__body{border-top-color:var(--lime)}


.bao .sample{cursor:default}
.bao .sample:hover .ex-big.on{opacity:1}
.bao .ex-strip{grid-template-columns:repeat(var(--strip,3),minmax(0,1fr))}
.bao .ex-group li p{font-size:15px}
.bao .ex-group li dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:15px;line-height:1.55;margin-top:10px}
.bao .ex-group li dt{color:var(--mute);white-space:nowrap}
.bao .ex-group li dd{margin:0;color:var(--ink);font-family:var(--body)}
.bao .ex-group h4 .bao-n{font-size:13px;margin-right:4px}
.bao .shapes{grid-template-columns:repeat(var(--shapes,3),1fr);gap:24px}
.bao .shapes svg{max-width:132px;aspect-ratio:132/84}
.bao .shapes .tool{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.bao .shapes .tube{fill:none;stroke:#2e5bb8;stroke-width:6;stroke-linecap:butt;stroke-linejoin:round}
.bao .shapes .thin{fill:none;stroke:#2e5bb8;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.bao .shapes .cut{stroke:var(--lime);stroke-width:2.5;fill:none}
.bao .ex--list .ex-fields{grid-column:8/13;grid-row:1}

@media (min-width:1081px){
  .bao #apps #samples.ex--list .ex-photo{grid-column:1/8;grid-row:1}
}
.bao .bao-fieldlist{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.bao .bao-fieldlist li{border-top:1px solid var(--line);padding:14px 0;font-family:var(--head);font-size:17px;line-height:1.4}


.bao-specnav{position:sticky;top:calc(var(--hd) + var(--tabbar));z-index:14;background:var(--bg);padding:14px 0 12px;margin:40px 0 0;border-bottom:1px solid var(--line-soft)}
.bao-specnav ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.bao-specnav a{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--head);font-size:14px;font-weight:500;line-height:1.2;padding:9px 12px;border:1px solid var(--line);border-radius:4px;background:rgba(255,255,255,.4);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.bao-specnav a:hover{border-color:var(--ink)}
.bao-specnav a.cur{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.bao-specnav a .bao-n{color:inherit;opacity:.72;font-size:12px}
.bao-specs{margin-top:56px}
.bao-spec{scroll-margin-top:calc(var(--hd) + var(--tabbar) + 76px)}
.bao-spec + .bao-spec{margin-top:88px}
.bao-spec__h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:18px}
.bao-spec__h h3{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;font-family:var(--head);font-weight:500;font-size:clamp(21px,1.8vw,26px);line-height:1.35;letter-spacing:-.01em}
.bao-spec__h h3 .bao-n{font-size:14px}
.bao-spec__h h3 small{font-family:var(--body);font-weight:400;font-size:14px;color:var(--mute);letter-spacing:0}
.bao-spec__h .bao-models{margin-top:0}
.bao-spec__sub{flex-basis:100%;margin-top:-6px;color:var(--mute)}
.bao-spec__body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;align-items:start}
.bao-spec__body > .spec-set{grid-column:1/-1;min-width:0}
.bao-spec--one .bao-spec__body > .spec-set{grid-column:1/8}
.bao-spec__side{grid-column:8/13;min-width:0}
.bao-spec__side img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--bao-tile)}
.bao-note{margin:18px 0 0;border-top:1px solid var(--ink)}
.bao-note > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
.bao-note dt{color:var(--mute)}
.bao-note dd{margin:0}
.bao-note__h{font-family:var(--head);font-size:14px;font-weight:500;margin-top:22px}
.bao-spec--many .bao-note{margin-top:20px;max-width:640px}
.bao .table-scroll .spec-one thead th:not(:first-child),.bao .table-scroll .spec-one td{text-align:left}
.bao .table-scroll th small{font-family:var(--body)}
.bao .table-scroll .u{font-family:var(--body);color:var(--mute);font-weight:400;white-space:nowrap}
.bao-spec .spec-set + .spec-set{margin-top:0}

.bao-facts{border-top:1px solid var(--ink);list-style:none;margin:0;padding:0}
.bao-facts li{border-bottom:1px solid var(--line);padding:14px 0;font-size:16px;line-height:1.6}
.bao-spec__ask{margin-top:20px;display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap;color:var(--mute)}
@media (min-width:1081px){
  
  .bao .table-scroll .spec-one thead th:first-child{width:52%}
  .bao .table-scroll .spec-one thead th:not(:first-child){width:48%}
  .bao .table-scroll .spec-many[data-cols="3"]{width:72%}
  .bao .table-scroll .spec-many[data-cols="3"] thead th:first-child{width:36%}
  .bao .table-scroll .spec-many[data-cols="3"] thead th:not(:first-child){width:32%}
  .bao .table-scroll:has(.spec-many[data-cols="3"]){border-top:0}
  .bao .table-scroll .spec-many[data-cols="3"]{border-top:1px solid #292929}
  .bao .table-scroll .spec-many[data-cols="5"] thead th:first-child{width:28%}
  .bao .table-scroll .spec-many[data-cols="5"] thead th:not(:first-child){width:18%}
}


.bao-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px;margin-top:8px}
.bao-parts > div{border-top:1px solid var(--ink);padding-top:20px}
.bao-parts h3{font-family:var(--head);font-weight:500;font-size:clamp(19px,1.5vw,21px);line-height:1.4;margin-bottom:10px}
.bao-parts p{color:var(--mute);font-size:16px;line-height:1.65}
.bao-more{list-style:none;margin:56px 0 0;padding:0;border-top:1px solid var(--line)}
.bao-more li{border-bottom:1px solid var(--line);padding:16px 0;font-size:16px;line-height:1.6}
.bao .p-structure.bao-words{padding-bottom:112px}


@media (min-width:721px) and (max-width:1080px){
  .bao-grid,.bao-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}
  .bao-spec--one .bao-spec__body > .spec-set,.bao-spec__side{grid-column:1/-1}
  .bao-spec__side{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 24px;margin-top:20px;align-items:start}
  .bao-spec__side .bao-note{margin-top:0}
  .bao .ex--list .ex-fields{grid-column:1/-1;grid-row:auto}
  .bao .shapes{grid-template-columns:repeat(var(--shapes,3),1fr)}
  .bao-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .bao-filter{display:block;padding-top:18px}
  .bao-filter .t-small{display:block;margin-top:10px;white-space:normal}
  .bao-chips{gap:6px}
  .bao-chips button{font-size:13px;padding:8px 10px}
  .bao-grid,.bao-grid--4{grid-template-columns:1fr;gap:44px;margin-top:24px}
  .bao-grid.no-filter{padding-top:20px}
  .bao-tile__img{aspect-ratio:3/2}
  .bao-models span{font-size:12px;padding:5px 7px}
  .bao .ex-strip{grid-template-columns:repeat(var(--strip-phone,3),minmax(0,1fr))}
  .bao .shapes{grid-template-columns:1fr 1fr;gap:20px 16px}
  .bao-specnav{margin-top:28px;padding:10px 0;overflow-x:auto;scrollbar-width:none}
  .bao-specnav::-webkit-scrollbar{display:none}
  .bao-specnav ol{flex-wrap:nowrap;gap:6px}
  .bao-specnav a{font-size:13px;padding:8px 10px}
  .bao-specs{margin-top:36px}
  .bao-spec{scroll-margin-top:calc(var(--hd) + var(--tabbar) + 64px)}
  .bao-spec + .bao-spec{margin-top:64px}
  .bao-spec__body{display:block}
  .bao-spec__side{margin-top:18px}
  .bao-spec__side img{display:none}
  .bao-note{margin-top:0}
  .bao-note > div{grid-template-columns:1fr;gap:2px}
  .bao .table-scroll .spec-one td{text-align:left}
  .bao-parts{grid-template-columns:1fr;gap:24px}
  .bao-more{margin-top:36px}
  .bao .p-structure.bao-words{padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  .bao-m__img,.bao-m__cap,.bao-tile__img img,.bao-tile__body,.bao-tile,.bao-arrow,.bao-chips button,.bao-specnav a{transition:none}
  .bao-row.is-live .bao-m .bao-m__img,.bao-row.is-live .bao-m.is-focus .bao-m__img,.bao-grid.is-live .bao-tile .bao-tile__img img{transform:none}
  .bao-row{scroll-behavior:auto}
}