/* Full-width mobile demos retain their horizontal internal layouts. Dialogs are
   outside main, so their expanded controls keep the existing responsive layout. */

:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo],
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-treatment-demo],
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo],
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo]{
    --inline-demo-u:calc(var(--mobile-demo-width) / 817);
    min-height:0;
    max-width:none;
    max-height:none;
    container-type:inline-size;
  }

:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo]{
    position:relative;
    display:block;
    aspect-ratio:817 / 464!important;
    gap:0;
    padding:0;
    border-radius:calc(24 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo] .lens-buttons{
    position:absolute;
    inset:calc(22 * var(--inline-demo-u)) auto calc(26 * var(--inline-demo-u)) calc(25 * var(--inline-demo-u));
    width:calc(206 * var(--inline-demo-u));
    height:auto;
    display:flex;
    flex-direction:column;
    gap:calc(10 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo] .lens-buttons button{
    grid-column:auto;
    grid-row:auto;
    flex:1;
    min-width:0;
    min-height:0;
    padding:0 0 0 calc(7 * var(--inline-demo-u));
    font-size:calc(37 * var(--inline-demo-u));
    line-height:1;
    border-width:calc(1 * var(--inline-demo-u));
    border-radius:calc(13 * var(--inline-demo-u));
    text-shadow:0 calc(1.65 * var(--inline-demo-u)) calc(3.3 * var(--inline-demo-u)) #000b;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo] .lens-buttons button::before{
    width:calc(8 * var(--inline-demo-u));
    border-radius:0 calc(4 * var(--inline-demo-u)) calc(4 * var(--inline-demo-u)) 0;
    box-shadow:0 0 calc(7 * var(--inline-demo-u)) var(--swatch-top);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-stage]{
    position:absolute;
    grid-column:auto;
    grid-row:auto;
    inset:4% auto auto 30%;
    width:67%;
    height:92%;
    min-height:0;
    aspect-ratio:auto;
    border-radius:4%;
  }

:where(html[data-device="phone"],html[data-device="tablet"]) main [data-treatment-demo] [data-divider]{
    width:6%;
    min-width:0;
    font-size:calc(22 * var(--inline-demo-u));
    border-width:calc(1 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) [data-treatment-demo]:has([data-treatment-range]:focus-visible) [data-divider]{
    outline:none;
  }

:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo]{
    --inline-demo-u:calc(var(--mobile-demo-width) / 813);
    --thickness-padding:calc(14 * var(--inline-demo-u));
    --thickness-gap:calc(16 * var(--inline-demo-u));
    --thickness-radius:calc(14 * var(--inline-demo-u));
    display:grid;
    grid-template-columns:minmax(0,38fr) minmax(0,62fr);
    grid-template-rows:minmax(0,1fr);
    aspect-ratio:813 / 460!important;
    gap:var(--thickness-gap);
    padding:var(--thickness-padding);
    border-radius:var(--thickness-radius);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo].thickness-card .thickness-controls{
    position:relative;
    inset:auto;
    grid-column:1;
    grid-row:1;
    width:auto;
    height:100%;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto calc(24 * var(--inline-demo-u)) auto auto minmax(0,1fr);
    gap:0;
    padding:0;
    border-radius:var(--thickness-radius);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .index-buttons{
    --index-padding:calc(4 * var(--inline-demo-u));
    --index-border:calc(1 * var(--inline-demo-u));
    --index-button-radius:max(0px,calc(var(--thickness-radius) - var(--index-padding) - var(--index-border)));
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%;
    height:calc(60 * var(--inline-demo-u));
    min-height:0;
    gap:calc(3 * var(--inline-demo-u));
    padding:var(--index-padding);
    border:var(--index-border) solid #666;
    border-radius:var(--thickness-radius);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .index-buttons button{
    min-width:0;
    min-height:0;
    padding:0;
    font-size:calc(18 * var(--inline-demo-u));
    line-height:1;
    border-radius:var(--index-button-radius);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .thickness-controls output{
    grid-column:1;
    grid-row:3;
    align-self:stretch;
    display:grid;
    place-items:center;
    min-height:0;
    margin:0;
    padding:0;
    font-size:calc(78 * var(--inline-demo-u));
    line-height:1;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .thickness-controls>[data-power]{
    grid-column:1;
    grid-row:5;
    align-self:stretch;
    width:100%;
    height:calc(32 * var(--inline-demo-u));
    min-width:0;
    min-height:0;
    margin:0;
    padding:0;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .range-labels{
    grid-column:1;
    grid-row:6;
    margin-top:calc(4 * var(--inline-demo-u));
    gap:calc(4 * var(--inline-demo-u));
    font-size:calc(14 * var(--inline-demo-u));
    line-height:1.2;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] [data-lens-stage]{
    position:relative;
    inset:auto;
    grid-column:2;
    grid-row:1;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    aspect-ratio:auto;
    border-radius:var(--thickness-radius);
  }

:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo]{
    position:relative;
    display:block;
    aspect-ratio:817 / 522!important;
    gap:0;
    padding:0;
    border-radius:calc(24 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .frame-buttons{
    position:static;
    display:contents;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-frame]{
    position:absolute;
    grid-column:auto;
    grid-row:auto;
    left:3%;
    width:38%;
    height:28.5%;
    min-width:0;
    min-height:0;
    padding:0;
    border-width:calc(3 * var(--inline-demo-u))!important;
    border-radius:calc(14 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-frame="0"]{top:4.8%}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-frame="1"]{top:35.6%}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-frame="2"]{top:66.7%}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-frame].tryon-is-selected{
    box-shadow:inset 0 0 0 calc(1.5 * var(--inline-demo-u)) #00b7ed;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-frame-thumbnail{
    width:94%;
    height:88%;
    filter:drop-shadow(0 calc(1 * var(--inline-demo-u)) calc(1.5 * var(--inline-demo-u)) #0005);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-tryon-stage]{
    position:absolute;
    grid-column:auto;
    grid-row:auto;
    left:42.7%;
    top:5.1%;
    width:54.9%;
    height:89%;
    min-height:0;
    aspect-ratio:auto;
    border-width:calc(1 * var(--inline-demo-u));
    border-radius:calc(17 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] [data-tryon-start]{
    left:57%;
    right:auto;
    top:7%;
    width:38%;
    height:auto;
    min-height:0;
    padding:calc(7 * var(--inline-demo-u)) calc(3 * var(--inline-demo-u));
    font-size:calc(12 * var(--inline-demo-u));
    line-height:1.25;
    border-width:calc(1 * var(--inline-demo-u));
    border-radius:calc(9 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-controls{
    left:4%;
    right:4%;
    bottom:4%;
    height:calc(37 * var(--inline-demo-u));
    min-height:0;
    gap:calc(6 * var(--inline-demo-u));
    padding:calc(4 * var(--inline-demo-u));
    border-width:calc(1 * var(--inline-demo-u));
    border-radius:calc(8 * var(--inline-demo-u));
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-controls button{
    width:calc(28 * var(--inline-demo-u));
    min-width:0;
    min-height:0;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-size{
    min-width:0;
    margin:0;
    gap:0;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-size input{
    min-width:0;
    min-height:0;
    height:calc(26 * var(--inline-demo-u));
    padding:0;
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-status{
    left:5%;
    right:5%;
    bottom:20%;
    font-size:calc(11 * var(--inline-demo-u));
    line-height:1.25;
    text-shadow:0 calc(1 * var(--inline-demo-u)) calc(4 * var(--inline-demo-u)) #111;
  }
  /* Scale the complete native widget, retaining its live accent fill. Percentage
     width is already zoom-compensated by layout; dividing it again overflows. */
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] [data-power]{--mobile-range-accent:#057dff}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-size input{--mobile-range-accent:#00b3f0}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] [data-power],
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-size input{
    --inline-range-scale:calc(20 * var(--inline-demo-u) / 16px);
    appearance:auto;
    accent-color:var(--mobile-range-accent);
    width:100%;
    zoom:var(--inline-range-scale);
  }
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] .thickness-controls>[data-power]{height:calc(32 * var(--inline-demo-u) / var(--inline-range-scale))}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] .tryon-size input{height:calc(26 * var(--inline-demo-u) / var(--inline-range-scale))}
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-progressive-demo] button:focus-visible,
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-thickness-demo] button:focus-visible,
:where(html[data-device="phone"],html[data-device="tablet"]) main [data-tryon-demo] button:focus-visible{
    outline-width:calc(2 * var(--inline-demo-u));
    outline-offset:calc(-2 * var(--inline-demo-u));
  }