@layer components{html:has(.design){--design-above:calc(42svh + 4.5rem);--design-below:calc(var(--control) + var(--space-40));scroll-padding-block:var(--design-above) var(--design-below)}.design{padding-block-end:calc(var(--control) + var(--space-24) + env(safe-area-inset-bottom,0px));display:grid}.design__stage{z-index:1;justify-items:center;gap:var(--space-4);background:var(--ground);padding-block:var(--space-8) var(--space-12);display:grid;position:sticky;inset-block-start:0}.design__poster{justify-items:center;gap:var(--space-4);inline-size:min(100%,92vw);margin:0;display:grid}.design__poster img{object-fit:cover;block-size:42svh;inline-size:100%;display:block}.design__caption{font-size:var(--text-caption);color:var(--ink-muted);text-align:center;margin:0}.design__panel{align-content:start;gap:0;display:grid}.design__title{justify-items:center;margin:0;display:grid}.design__headline{display:none}.design__placard{font-size:var(--text-caption)}.design__placard .sbt-placard__title{font-size:var(--text-body)}.design__code{margin:2px 0 var(--space-8);font-size:var(--text-caption);color:var(--ink-muted);justify-self:center}.design__share{margin:var(--space-12) 0 0;font-size:var(--text-caption);text-align:center;justify-self:center}.design__share [role=status]{font-size:var(--text-caption);color:var(--ink-muted);overflow-wrap:anywhere;margin-block-start:var(--space-8);display:block}.design__consent{margin:var(--space-24) 0 0;font-size:var(--text-caption);color:var(--ink-muted)}.design__chapter{gap:var(--space-24);display:grid}.design__chapterName{margin-block:var(--space-48) 0;font-size:var(--text-label);font-weight:400;line-height:var(--leading-display-arabic);color:var(--ink)}[dir=ltr] .design__chapterName{font-family:var(--font-latin-display);font-style:italic}.design__groupHint{margin:calc(var(--space-8) * -1) 0 0;max-inline-size:46ch;font-size:var(--text-caption);line-height:var(--leading-arabic);color:var(--ink-muted)}.design__pair{gap:var(--space-24);display:grid}.design__sub{gap:10px;display:grid}.design__subName{font-size:var(--text-caption);color:var(--ink-muted)}.design__fold>summary{min-block-size:var(--touch-min);font-size:var(--text-caption);color:var(--ink-muted);cursor:pointer;background:linear-gradient(90deg, var(--stitch) 55%, transparent 0) 0 calc(100% - 12px) / 7px var(--stitch-width) repeat-x;align-items:center;padding-block-end:3px;list-style:none;display:inline-flex}[dir=rtl] .design__fold>summary{background-position:100% calc(100% - 12px)}.design__fold>summary::-webkit-details-marker{display:none}.design__fold[open]{gap:var(--space-24);display:grid}.design__choices{align-items:center;gap:var(--space-12);overflow-wrap:anywhere;flex-wrap:wrap;margin-inline-start:var(--space-8);display:inline-flex}.design__dock{z-index:1;margin-block-start:var(--space-16);margin-inline:calc(var(--gutter-phone) * -1);position:sticky;inset-block-end:0}.design__offstage{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (min-width:768px){.design__poster{inline-size:min(100%,560px)}.design__dock{margin-inline:calc(var(--gutter-tablet) * -1)}.design__dock .sbt-dock{padding-inline:var(--gutter-tablet)}.design__pair{column-gap:var(--space-40);grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px) and (max-width:1023px){.design__panel{max-inline-size:760px;margin-inline:auto}.design__chapter{column-gap:var(--space-40);grid-template-columns:repeat(2,minmax(0,340px));justify-content:center;align-items:start}.design__chapterName,.design__fold{grid-column:1/-1}.design__chapter .sbt-group:has(:is(.sbt-formats,.sbt-book,.sbt-leaves,.sbt-strip,.design__pair)){grid-column:1/-1}}@media (min-width:1024px){.design{grid-template-columns:minmax(0, 1fr) var(--panel);column-gap:var(--space-48);align-items:start}html:has(.design){--design-above:var(--space-24)}.design__stage{padding-block:var(--space-24)}.design__poster{inline-size:100%}.design__poster img{block-size:min(62svh,560px)}.design__title{justify-items:start}.design__headline{font-size:var(--text-title);font-weight:var(--weight-display-arabic);line-height:var(--leading-display-arabic);text-wrap:balance;display:block}[dir=ltr] .design__headline{font-family:var(--font-latin-display);font-style:italic;font-weight:400;line-height:var(--leading-display-latin)}.design__placard{display:none}.design__dock{margin-inline:0}.design__dock .sbt-dock{padding-inline:0}.design__code{justify-self:start}.design__share{text-align:start;justify-self:start}}}