/* Nested surfaces share the site's 3-step corners. Avoid whole sections,
   charts, separators, robot artwork and already framed .pxbox panels. */
body :is(.card__shot,.mode__shot,.slide,.pet-day,.lesson-details,
 .chat__text,.zonebig__row,.zonebig__stand,.parts__ex,.ai__a,
 .phonefx .phone,.weekly__next,.weekly__kpi li,.bignums--two li){
 border-radius:0;
 clip-path:var(--stair);
}

/* Paint the frame OVER content. A child image otherwise covers the inner
   corner pixels of border-image, which extends beyond the layout border. */
body :is(.card__shot,.mode__shot,.slide,.pet-day,.lesson-details,.chat__text){
 position:relative;
 border:3px solid transparent!important;
 border-image:none;
 background-clip:padding-box;
 overflow:visible;
}
body :is(.card__shot,.mode__shot,.slide,.pet-day,.lesson-details,.chat__text)::after{
 content:'';
 position:absolute;
 inset:-3px;
 z-index:2;
 pointer-events:none;
 border:3px solid var(--outline-blue);
 border-image:var(--frame-img) 6 / 6px / 0 repeat;
 clip-path:var(--stair);
}

/* Inputs cannot render reliable frame pseudo-elements. Retain native controls
   and draw an inset focus indicator, so the clipped outline stays visible. */
body .ask__field :is(input:not([type=checkbox]):not([type=radio]),textarea,select){
 border-radius:0;
 clip-path:var(--stair);
 border-image-source:var(--frame-img);
 border-image-slice:6;
 border-image-width:6px;
 border-image-repeat:repeat;
}
body .ask__field :is(input,textarea,select):focus-visible,
body :is(.pet-day,.slide):focus-visible{
 outline:none;
 box-shadow:inset 0 0 0 3px var(--orange);
}
body .lesson-details:has(>summary:focus-visible){box-shadow:inset 0 0 0 3px var(--orange)}

/* A clipped speech bubble needs no old rotated square tail. */
.page--promo .sec--session .chat__msg--bot .chat__text::before{display:none}

/* Active instructional rows are small independent surfaces, not full panels. */
.page--chatty-edu .edu-lab-program li.is-active{clip-path:var(--stair)}

/* Compact header surfaces: frame above the fill, without clipped corner gaps. */
.chrome__lang{--frame-orange:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' shape-rendering='crispEdges'><path fill='%23ff6601' d='M4 2h1v1h-1zM5 2h1v1h-1zM4 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM4 4h1v1h-1zM5 4h1v1h-1zM2 5h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM13 2h1v1h-1zM12 2h1v1h-1zM13 3h1v1h-1zM12 3h1v1h-1zM15 4h1v1h-1zM14 4h1v1h-1zM13 4h1v1h-1zM12 4h1v1h-1zM15 5h1v1h-1zM14 5h1v1h-1zM13 5h1v1h-1zM12 5h1v1h-1zM4 15h1v1h-1zM5 15h1v1h-1zM4 14h1v1h-1zM5 14h1v1h-1zM2 13h1v1h-1zM3 13h1v1h-1zM4 13h1v1h-1zM5 13h1v1h-1zM2 12h1v1h-1zM3 12h1v1h-1zM4 12h1v1h-1zM5 12h1v1h-1zM13 15h1v1h-1zM12 15h1v1h-1zM13 14h1v1h-1zM12 14h1v1h-1zM15 13h1v1h-1zM14 13h1v1h-1zM13 13h1v1h-1zM12 13h1v1h-1zM15 12h1v1h-1zM14 12h1v1h-1zM13 12h1v1h-1zM12 12h1v1h-1zM6 0h6v3h-6zM6 15h6v3h-6zM0 6h3v6h-3zM15 6h3v6h-3zM3 3h1v1h-1zM14 3h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1z'/></svg>");}
.chrome__stage-num,.chrome__lang a,.chrome__pad{border-radius:0;clip-path:var(--stair)}
.chrome__lang a{position:relative;border-color:transparent}
.chrome__lang a::after{content:'';position:absolute;inset:0;pointer-events:none;
 border:0 solid transparent;border-image:var(--frame-img) 6 / 6px / 0 repeat;
 clip-path:var(--stair)}
.chrome__lang a:hover,.chrome__lang a.is-on{border-color:transparent}
.chrome__lang a:hover::after,.chrome__lang a:focus-visible::after{
 border-image-source:var(--frame-orange)}
.chrome__lang a:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--orange)}
/* The tiny progress pixels need smaller notches than the full-size panels. */
.chrome .hudbar li{border-radius:0;clip-path:polygon(1px 0,calc(100% - 1px) 0,calc(100% - 1px) 1px,100% 1px,100% calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 100%,1px 100%,1px calc(100% - 1px),0 calc(100% - 1px),0 1px,1px 1px)}