.commerce-study{--commerce-ink:#244534;--commerce-muted:#5c7364;position:relative;width:100%;height:440px;margin:38px 0 20px;background:#eff3e9;border-block:1px solid #30583d20;overflow:hidden;isolation:isolate;grid-column:1/-1}.commerce-study canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}.commerce-study *{box-sizing:border-box}.commerce-inlets{position:absolute;left:3%;top:20%;bottom:20%;width:21%;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.commerce-inlets button{background:transparent;border:0;color:var(--commerce-muted);padding:10px 0;text-align:left;font:400 15px 'SIB Sans',Arial;cursor:pointer;width:max-content;max-width:100%;transition:color .25s}.commerce-inlets button[aria-pressed=true]{color:var(--commerce-ink)}.commerce-inlets button:before{content:'';display:inline-block;vertical-align:middle;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:12px;opacity:.35}.commerce-inlets button[aria-pressed=true]:before{opacity:1}.commerce-core{position:absolute;left:36%;top:30%;width:28%;height:40%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:2;pointer-events:none;color:var(--commerce-ink)}.commerce-core small{font-size:9px;letter-spacing:1.4px;text-transform:uppercase}.commerce-core strong{font-size:clamp(21px,2.5vw,32px);font-weight:400;line-height:1.15;letter-spacing:-.04em;margin:17px 0}.commerce-core span{font-size:11px;line-height:1.7;color:var(--commerce-muted)}.commerce-review{position:absolute;right:3%;top:38%;width:19%;z-index:2;color:var(--commerce-ink)}.commerce-review small{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--commerce-muted)}.commerce-review strong{font-size:21px;line-height:1.2;font-weight:400;display:block;margin:13px 0}.commerce-review span{font-size:11px;line-height:1.6;color:var(--commerce-muted);display:block;max-width:150px}.commerce-pause{position:absolute;right:18px;top:15px;border:1px solid #68807555;background:transparent;color:var(--commerce-muted);border-radius:25px;padding:8px 12px;font-size:10px;z-index:3}.commerce-example{display:block;grid-column:1/-1;font-size:13px;line-height:1.6;color:inherit;margin:0 0 35px;opacity:.7}.commerce-study .commerce-example{display:none}body[data-concept=darkroom] .commerce-study{--commerce-ink:#e8d4b8;--commerce-muted:#a89f91;background:#080b10;border-color:#cbb49626}body[data-concept=spectrum] .commerce-study{--commerce-ink:#403850;--commerce-muted:#746b80;background:#eeedf3;border-color:#70628525}body[data-concept=darkroom] .agent-zone>.commerce-study{margin-bottom:0}body[data-concept=darkroom] .agent-zone>.commerce-example{margin-bottom:0;padding:20px 0;border-bottom:1px solid var(--line)}.commerce-fallback canvas{display:none}.commerce-fallback .commerce-core{border:1px solid #80988855;border-radius:15px}
@media(max-width:650px){.commerce-study{height:620px;margin-top:30px}.commerce-inlets{left:5%;right:5%;top:65px;bottom:auto;width:auto;display:flex;flex-direction:row;gap:12px;align-items:flex-start}.commerce-inlets button{font-size:11px;line-height:1.5;text-align:center;flex:1;padding:10px 0;max-width:100px}.commerce-inlets button:before{display:block;margin:0 auto 10px}.commerce-core{left:20%;top:36%;width:60%;height:28%}.commerce-core strong{font-size:30px}.commerce-core small{font-size:9px}.commerce-core span{font-size:11px}.commerce-review{top:auto;bottom:34px;left:20%;width:60%;right:auto;text-align:center}.commerce-review strong{font-size:20px;margin:9px 0}.commerce-review span{margin:auto;max-width:190px;font-size:11px}.commerce-review small{font-size:9px}.commerce-pause{top:14px;right:14px;font-size:9px}}