.std-demo{background:var(--background)}.std-demo-inner{--std-demo-width:900px;max-width:var(--page-width);grid-template-columns:minmax(0,1fr);grid-template-areas:"head""intro""figure""options";margin-inline:auto;padding:80px 48px;display:grid}.std-demo-head{grid-area:head;margin-bottom:40px}.std-demo-head h2{text-align:center;text-wrap:balance;margin:0;font-size:45px;line-height:1.15}.std-demo-intro{color:var(--muted);grid-area:intro;margin:0 0 32px;font-size:15px}.std-demo-figure{width:100%;max-width:var(--std-demo-width);grid-area:figure;justify-self:center;min-width:0;margin:0}.std-demo-stage{--pos:62%;aspect-ratio:3/2;background:#d6d9d9;position:relative;overflow:hidden}.std-demo-stage:has(.comparison-range:focus-visible){outline:3px solid var(--focus);outline-offset:5px}.std-demo-layers{position:absolute;inset:0}.std-demo-layers[data-switched=true]{animation:std-demo-fade .42s var(--motion-ease-out)}.std-demo-layers img{object-fit:cover;width:100%;height:100%;position:absolute}.std-demo-original{clip-path:inset(0 0 0 var(--pos));position:absolute;inset:0}.std-demo-badges{pointer-events:none;justify-content:flex-end;display:flex;position:absolute;inset:20px 20px auto}.std-demo-divider{left:var(--pos);z-index:1;margin-left:-1px}.std-demo-stage .comparison-range{z-index:1}.std-demo-marks{z-index:2;pointer-events:none;clip-path:inset(0 calc(100% - var(--pos)) 0 0);transition:opacity .26s var(--motion-ease-out);position:absolute;inset:0;overflow:hidden}.std-demo-marks[data-hidden=true]{opacity:0}.std-demo-marks[data-hidden=true] [data-part]{pointer-events:none}.std-demo-stage[data-smooth=true] .std-demo-original{transition:clip-path .52s var(--motion-ease-out)}.std-demo-stage[data-smooth=true] .std-demo-marks{transition:clip-path .52s var(--motion-ease-out), opacity .26s var(--motion-ease-out)}.std-demo-stage[data-smooth=true] .std-demo-divider{transition:left .52s var(--motion-ease-out)}.std-demo-arrow{z-index:4;color:#fff;cursor:pointer;width:44px;height:44px;transition:background var(--motion-fast), transform var(--motion-panel) var(--motion-ease-out);background:#282a2b80;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.std-demo-arrow:hover{background:#282a2bcc}.std-demo-arrow:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.std-demo-arrow-prev{left:12px}.std-demo-arrow-next{right:12px}.std-demo-arrow-prev:hover{transform:translate(-3px,-50%)}.std-demo-arrow-next:hover{transform:translate(3px,-50%)}.std-demo-figure figcaption{margin-top:16px}.std-demo-statusbar{justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;display:flex}.std-demo-status{text-transform:uppercase;align-items:center;gap:12px;margin:0;font-size:12px;font-weight:600;display:flex}.std-demo-status span{color:var(--muted);font-weight:500}.std-demo-switch{cursor:pointer;align-items:center;gap:10px;font-size:12px;font-weight:600;display:inline-flex;position:relative}.std-demo-switch input{opacity:0;pointer-events:none;position:absolute}.std-demo-switch-track{width:36px;height:20px;transition:background var(--motion-fast);background:#b9bdbd;border-radius:999px;position:relative}.std-demo-switch-track:after{content:"";width:16px;height:16px;transition:transform var(--motion-panel) var(--motion-ease-out);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.std-demo-switch:has(input:checked) .std-demo-switch-track{background:var(--foreground)}.std-demo-switch:has(input:checked) .std-demo-switch-track:after{transform:translate(16px)}.std-demo-switch:has(input:focus-visible) .std-demo-switch-track{outline:3px solid var(--focus);outline-offset:3px}.std-demo-verdict{text-align:center;justify-content:center;align-items:center;min-height:78px;margin:0;font-size:16px;line-height:1.6;display:flex}.std-demo-verdict[data-mark=false]{color:#7a4a14}.std-demo-verdict strong{font-weight:700}.std-demo-options{width:100%;max-width:var(--std-demo-width);border:0;border-top:1px solid var(--line);grid-area:options;justify-self:center;min-width:0;margin:8px 0 0;padding:24px 0 0}.std-demo-options:disabled{opacity:.45}.std-demo-options legend{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.std-demo-options-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px 40px;display:flex}.std-demo-tones{flex-wrap:wrap;gap:20px;display:flex}.std-demo-tone{color:var(--muted);cursor:pointer;transition:color var(--motion-fast);align-items:center;gap:8px;font-size:13px;display:inline-flex;position:relative}.std-demo-tone:hover,.std-demo-tone.is-selected{color:var(--foreground)}.std-demo-tone.is-selected .std-demo-tone-name{font-weight:600}.std-demo-tone:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}.std-demo-tone input,.std-demo-thumb-toggle input{opacity:0;pointer-events:none;position:absolute}.std-demo-swatch{width:20px;height:20px;transition:box-shadow var(--motion-fast);border:1px solid #777;border-radius:50%}.std-demo-tone.is-selected .std-demo-swatch{box-shadow:0 0 0 2px var(--background), 0 0 0 3.5px var(--foreground)}.std-demo-swatch.tone-auto{background:linear-gradient(135deg,#fff 0 50%,#111 50% 100%)}.std-demo-swatch.tone-white{background:#fff}.std-demo-swatch.tone-black{background:#111}.std-demo-thumb-toggle{cursor:pointer;align-items:center;gap:12px;font-size:13px;display:flex;position:relative}.std-demo-thumb-toggle:before{content:"";border:1px solid var(--foreground);background:#fff linear-gradient(var(--foreground), var(--foreground)) center / 0 0 no-repeat;height:18px;transition:background-size var(--motion-fast);border-radius:3px;flex:0 0 18px}.std-demo-thumb-toggle:has(input:checked):before{background-size:10px 10px}.std-demo-thumb-toggle:has(input:focus-visible):before{outline:3px solid var(--focus);outline-offset:2px}.std-demo-thumb-toggle span{flex-wrap:wrap;align-items:baseline;gap:0 10px;display:flex}.std-demo-thumb-toggle small{color:var(--muted);font-size:12px}@keyframes std-demo-fade{0%{opacity:0}}@media (max-width:900px){.std-demo-inner{grid-template-areas:"head""intro""figure""options"}.std-demo-head{margin-bottom:24px}.std-demo-options{margin-bottom:32px}}@media (max-width:700px){.std-demo-inner{padding:56px 24px}.std-demo-head h2{font-size:30px}.std-demo-intro{margin-bottom:24px}.std-demo-verdict{font-size:15px}.std-demo-badges{inset:12px 12px auto}.std-demo-arrow{width:40px;height:40px}.std-demo-arrow-prev{left:8px}.std-demo-arrow-next{right:8px}}