[data-progressive-stage],[data-treatment-stage],[data-lens-stage]{position:absolute;z-index:2;opacity:1;visibility:visible;overflow:hidden}
[data-progressive-stage]{left:30%;top:4%;width:67%;height:92%;border-radius:4%;background:#070809;pointer-events:none}
[data-progressive-stage] svg,[data-treatment-stage] svg{display:block;width:100%;height:100%}
[data-progressive-demo] .lens-buttons{z-index:5}
[data-progressive-demo] [data-lens]{touch-action:manipulation}
[data-progressive-demo] [data-lens]:focus-visible,[data-thickness-demo] [data-index]:focus-visible{outline:2px solid #05b8f1;outline-offset:-2px}
[data-treatment-stage]{inset:0;border-radius:inherit;pointer-events:none;background:#232323}
[data-treatment-demo]{touch-action:pan-y}
[data-treatment-range]{position:absolute;inset:0;z-index:6;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none}
[data-treatment-demo] [data-divider]{position:absolute;z-index:5;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:6%;aspect-ratio:1;border:1px solid #919ca2;border-radius:50%;background:#1b2e3c;color:#e8f2f7;font-size:clamp(9px,1.6vw,22px);opacity:1;pointer-events:none}
[data-treatment-demo] [data-divider]::before{display:none}
[data-treatment-demo]:focus-within{outline:none}
[data-treatment-demo]:has([data-treatment-range]:focus-visible) [data-divider]{outline:none}
[data-lens-stage]{left:40.5%;top:3%;width:59.5%;height:94%;border-radius:3%;background-color:#000;background-image:radial-gradient(circle at 50% 46%,rgba(20,118,196,.08627451),transparent calc(311.328 * var(--u))),linear-gradient(rgba(255,255,255,.13333333) calc(1 * var(--u)),transparent calc(1 * var(--u))),linear-gradient(90deg,rgba(255,255,255,.13333333) calc(1 * var(--u)),transparent calc(1 * var(--u)));background-size:auto,calc(48 * var(--u)) calc(48 * var(--u)),calc(48 * var(--u)) calc(48 * var(--u));background-position:center,calc(29.235 * var(--u)) calc(.2 * var(--u)),calc(29.235 * var(--u)) calc(.2 * var(--u));touch-action:none;cursor:grab}
[data-lens-stage]:active{cursor:grabbing}
.demo-lens-canvas{display:block;width:100%;height:100%;outline:none}
.demo-lens-canvas:focus-visible{outline:2px solid #08b3f4;outline-offset:-3px}
[data-thickness-demo] .thickness-controls{z-index:5}
/* Keep both columns inside the gray card, including dialog clones. The card's
   width/height may be set by responsive.css; child layout needs no offsets. */
[data-thickness-demo]{--thickness-padding:clamp(8px,calc(14 * var(--u)),14px);--thickness-gap:clamp(8px,calc(16 * var(--u)),16px);--thickness-radius:14px;display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);grid-template-rows:minmax(0,1fr);gap:var(--thickness-gap);padding:var(--thickness-padding)}
[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;padding:0;border:0;background:transparent;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto clamp(12px,calc(24 * var(--u)),24px) auto auto minmax(0,1fr);gap:0}
[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}
[data-thickness-demo] .index-buttons{--index-padding:clamp(2px,calc(4 * var(--u)),4px);--index-border:calc(1 * var(--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%;min-width:0;height:clamp(28px,calc(60 * var(--u)),60px);flex:none;gap:clamp(1px,calc(3 * var(--u)),3px);padding:var(--index-padding);border-width:var(--index-border)}
[data-thickness-demo] .index-buttons button{min-width:0;padding:0;font-size:clamp(9px,calc(18 * var(--u)),18px);border-radius:var(--index-button-radius)}
[data-thickness-demo] .thickness-controls output{grid-column:1;grid-row:3;display:grid;place-items:center;min-height:0;margin:0;font-size:clamp(25px,calc(78 * var(--u)),78px)}
[data-thickness-demo] .thickness-controls>[data-power]{grid-column:1;grid-row:5;min-width:0;width:100%;height:clamp(18px,calc(32 * var(--u)),32px);margin:0}
[data-thickness-demo] .range-labels{grid-column:1;grid-row:6;min-width:0;margin-top:calc(4 * var(--u));gap:4px;font-size:clamp(8px,calc(14 * var(--u)),14px)}
[data-thickness-demo].thickness-card,[data-thickness-demo] .thickness-controls,[data-thickness-demo] [data-lens-stage],[data-thickness-demo] .index-buttons{border-radius:var(--thickness-radius)}
.demo-lens-unavailable{position:absolute;left:8%;right:8%;top:45%;color:#bbc3c8;text-align:center;font-size:clamp(9px,1.1vw,16px);line-height:1.4}
.demo-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}