.trmnl .screen--md #spacing-size-md-p-24-mixin,.trmnl .screen--lg #spacing-size-md-p-24-mixin{padding:96px}.trmnl .screen--portrait #spacing-orientation-portrait-mx-20-mixin{margin-left:80px;margin-right:80px}#gap-size-lg-xlarge-mixin{display:flex}.trmnl .screen--lg #gap-size-lg-xlarge-mixin{gap:var(--gap-xlarge)}#gap-orientation-portrait-large-mixin{display:flex}.trmnl .screen--portrait #gap-orientation-portrait-large-mixin{gap:var(--gap-large)}#size-size-md-w-36-mixin{height:48px;width:48px}.trmnl .screen--md #size-size-md-w-36-mixin,.trmnl .screen--lg #size-size-md-w-36-mixin{width:144px}.trmnl .screen--md #rounded-size-md-xlarge-mixin,.trmnl .screen--lg #rounded-size-md-xlarge-mixin{border-radius:var(--rounded-xlarge)}#grid-size-md-cols-3-mixin{display:grid;gap:var(--gap);grid-template-columns:repeat(1, minmax(0, 1fr))}.trmnl .screen--md #grid-size-md-cols-3-mixin,.trmnl .screen--lg #grid-size-md-cols-3-mixin{grid-template-columns:repeat(3, minmax(0, 1fr))}.trmnl .screen--md #bg-size-md-mixin,.trmnl .screen--lg #bg-size-md-mixin{background:var(--gray-50)}.trmnl .screen--portrait #bg-orientation-portrait-mixin{background:var(--gray-50)}.trmnl .screen--2bit #bg-bit-depth-2bit-mixin{background:var(--gray-50)}.trmnl .screen--md.screen--portrait #bg-size-orientation-md-portrait-mixin,.trmnl .screen--lg.screen--portrait #bg-size-orientation-md-portrait-mixin{background:var(--gray-50)}.trmnl .screen--md.screen--2bit #bg-size-bit-depth-md-2bit-mixin,.trmnl .screen--lg.screen--2bit #bg-size-bit-depth-md-2bit-mixin{background:var(--gray-50)}.trmnl .screen--portrait.screen--2bit #bg-orientation-bit-depth-portrait-2bit-mixin{background:var(--gray-50)}.trmnl .screen--portrait.screen--md.screen--2bit #bg-all-md-portrait-2bit-mixin,.trmnl .screen--portrait.screen--lg.screen--2bit #bg-all-md-portrait-2bit-mixin{background:var(--gray-50)}.trmnl .screen--sm #vis-size-sm-hidden-mixin,.trmnl .screen--md #vis-size-sm-hidden-mixin,.trmnl .screen--lg #vis-size-sm-hidden-mixin{display:none}.trmnl .screen--portrait #vis-orientation-portrait-hidden-mixin{display:none}.trmnl .screen--4bit #vis-bit-depth-4bit-hidden-mixin{display:none}.trmnl .screen--md.screen--portrait #vis-size-orientation-md-portrait-hidden-mixin,.trmnl .screen--lg.screen--portrait #vis-size-orientation-md-portrait-hidden-mixin{display:none}.trmnl .screen--lg.screen--2bit #vis-size-bit-depth-lg-2bit-hidden-mixin{display:none}.trmnl .screen--portrait.screen--4bit #vis-orientation-bit-depth-portrait-4bit-hidden-mixin{display:none}.trmnl .screen--portrait.screen--md.screen--2bit #vis-all-md-portrait-2bit-hidden-mixin,.trmnl .screen--portrait.screen--lg.screen--2bit #vis-all-md-portrait-2bit-hidden-mixin{display:none}.trmnl .screen--lg #text-size-lg-center-mixin{text-align:center}.trmnl .screen--portrait #text-orientation-portrait-center-mixin{text-align:center}.trmnl .screen--2bit #text-bit-depth-2bit-center-mixin{text-align:center}.trmnl .screen--md.screen--portrait #text-size-orientation-md-portrait-center-mixin,.trmnl .screen--lg.screen--portrait #text-size-orientation-md-portrait-center-mixin{text-align:center}.trmnl .screen--lg.screen--4bit #text-size-bit-depth-lg-4bit-center-mixin{text-align:center}.trmnl .screen--portrait.screen--2bit #text-orientation-bit-depth-portrait-2bit-center-mixin{text-align:center}.trmnl .screen--portrait.screen--md.screen--2bit #text-all-md-portrait-2bit-right-mixin,.trmnl .screen--portrait.screen--lg.screen--2bit #text-all-md-portrait-2bit-right-mixin{text-align:right}.trmnl .screen--md #flex-size-md-center-mixin,.trmnl .screen--lg #flex-size-md-center-mixin{justify-content:center;align-items:center}.trmnl .screen--portrait #flex-orientation-portrait-col-mixin{flex-direction:column}.trmnl .screen--lg.screen--portrait #flex-size-orientation-lg-portrait-center-mixin{justify-content:center;align-items:center}.trmnl .screen--md #layout-size-md-col-mixin,.trmnl .screen--lg #layout-size-md-col-mixin{flex-direction:column}.trmnl .screen--portrait #layout-orientation-portrait-center-mixin{justify-content:flex-end;align-items:flex-end}.trmnl .screen--lg.screen--portrait #layout-size-orientation-lg-portrait-bottom-mixin{justify-content:flex-end;align-items:flex-end}.trmnl .screen--md #layout-size-md-stretch-x-mixin>*,.trmnl .screen--lg #layout-size-md-stretch-x-mixin>*{width:100%}.trmnl .screen--portrait #layout-orientation-portrait-bottom-mixin{justify-content:flex-end;align-items:flex-end}.trmnl .screen--portrait.screen--md.screen--2bit .test-alternative-complex,.trmnl .screen--portrait.screen--lg.screen--2bit .test-alternative-complex{text-align:right}.trmnl .screen--md.screen--4bit .test-alternative-mobile-first,.trmnl .screen--lg.screen--4bit .test-alternative-mobile-first{background:var(--gray-75)}.trmnl .screen--portrait.screen--lg.screen--4bit .test-alternative-triple{display:flex;flex-direction:column;justify-content:center}#edge-case-nested{background:var(--gray-75)}.trmnl .screen--md #edge-case-nested,.trmnl .screen--lg #edge-case-nested{background:var(--gray-75)}.trmnl .screen--portrait #edge-case-nested{background:var(--gray-50)}.trmnl .screen--portrait.screen--lg.screen--4bit #edge-case-nested{background:var(--gray-25)}#edge-case-cascade{display:block}.trmnl .screen--sm #edge-case-cascade,.trmnl .screen--md #edge-case-cascade,.trmnl .screen--lg #edge-case-cascade{display:flex}.trmnl .screen--md #edge-case-cascade,.trmnl .screen--lg #edge-case-cascade{display:grid}.trmnl .screen--portrait #edge-case-cascade{display:none}#performance-test{padding:var(--gap-small);margin:var(--gap-small)}.trmnl .screen--sm #performance-test,.trmnl .screen--md #performance-test,.trmnl .screen--lg #performance-test{padding:var(--gap-medium)}.trmnl .screen--md #performance-test,.trmnl .screen--lg #performance-test{padding:var(--gap-large);margin:var(--gap-medium)}.trmnl .screen--lg #performance-test{padding:var(--gap-xlarge);margin:var(--gap-large)}.trmnl .screen--portrait #performance-test{flex-direction:column;text-align:center}.trmnl .screen--1bit #performance-test{background:var(--black);color:var(--white)}.trmnl .screen--2bit #performance-test{background:var(--gray-75);color:var(--black)}.trmnl .screen--4bit #performance-test{background:var(--gray-50);color:var(--black)}.trmnl .screen--md.screen--portrait #performance-test,.trmnl .screen--lg.screen--portrait #performance-test{flex-direction:row;text-align:left}.trmnl .screen--lg.screen--4bit #performance-test{background:var(--gray-25)}.trmnl .screen--portrait.screen--1bit #performance-test{background:var(--white);color:var(--black)}.trmnl .screen--portrait.screen--lg.screen--4bit #performance-test{background:var(--gray-10);text-align:right;flex-direction:column-reverse}.example-progressive-sizing{font-size:var(--value-font-size)}.trmnl .screen--md .example-progressive-sizing,.trmnl .screen--lg .example-progressive-sizing{font-size:var(--value-large-font-size)}.trmnl .screen--lg .example-progressive-sizing{font-size:var(--value-xlarge-font-size)}.example-bit-depth-adaptation{height:36px;width:36px;border-radius:var(--rounded-large)}.trmnl .screen--1bit .example-bit-depth-adaptation{background:var(--black)}.trmnl .screen--2bit .example-bit-depth-adaptation{background:var(--gray-45)}.trmnl .screen--4bit .example-bit-depth-adaptation{background:var(--gray-75)}.example-orientation-responsive{display:flex;flex-direction:row;gap:var(--gap-small)}.trmnl .screen--portrait .example-orientation-responsive{flex-direction:column}.debug-screen-info::before{content:"landscape";position:absolute;top:0;left:0;font-size:10px;background:rgba(255,0,0,.8);color:#fff;padding:2px 4px;z-index:1000}.trmnl .screen--portrait .debug-screen-info::before{content:"portrait";background:rgba(0,255,0,.8)}.trmnl .screen--sm .debug-screen-info::before,.trmnl .screen--md .debug-screen-info::before,.trmnl .screen--lg .debug-screen-info::before{content:"sm+" attr(content)}.trmnl .screen--md .debug-screen-info::before,.trmnl .screen--lg .debug-screen-info::before{content:"md+" attr(content)}.trmnl .screen--lg .debug-screen-info::before{content:"lg+" attr(content)}.trmnl .screen--1bit .debug-screen-info::before{content:attr(content) " 1bit"}.trmnl .screen--2bit .debug-screen-info::before{content:attr(content) " 2bit"}.trmnl .screen--4bit .debug-screen-info::before{content:attr(content) " 4bit"}