.gs-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:clamp(14px,2vw,24px);display:grid}.gs-preview{border-radius:var(--r-lg);min-height:min(70vh,640px);box-shadow:inset 0 0 0 1px #ffffff14, var(--shadow-sm);position:sticky;top:88px}.gs-chip{border-radius:var(--r-pill);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;letter-spacing:.1em;text-transform:uppercase;background:#00000073;padding:6px 11px;font-size:.62rem;position:absolute;bottom:16px;left:16px}.gs-bar{border-radius:var(--r-sm);cursor:copy;height:46px;margin:6px 12px 18px;position:relative;box-shadow:inset 0 0 0 1px #ffffff1f}.gs-handle{border:3px solid var(--paper);cursor:grab;touch-action:none;border-radius:8px;width:22px;height:54px;margin-left:-11px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 10px #00000080}.gs-handle.is-active{border-color:var(--orange);z-index:2;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35), 0 2px 10px #00000080}.gs-handle:active{cursor:grabbing}.gs-stops{gap:6px;margin:0;padding:0;list-style:none;display:grid}.gs-stops li{border:1px solid var(--line);border-radius:var(--r-sm);background:#0003;grid-template-columns:40px 104px minmax(0,1fr) 42px auto;align-items:center;gap:10px;padding:6px 8px;display:grid}.gs-stops li.is-active{border-color:rgba(var(--accent-rgb),.5)}.gs-stops .ak-input{padding:7px 9px;font-size:.78rem}.gs-swatch{border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;width:40px;height:34px;padding:0}.gs-pos{color:var(--muted);text-align:right;font-size:.74rem}.gs-angles{flex-wrap:wrap;gap:6px;display:flex}.gs-angles span{display:inline-block}.gs-angles button[aria-pressed=true]{border-color:var(--orange);color:var(--orange)}.gs-presets{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.gs-presets button{aspect-ratio:16/10;border-radius:var(--r-sm);cursor:pointer;transition:transform .2s var(--ease);border:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff1a}.gs-presets button:hover{transform:translateY(-2px)}.gs-presets span{color:#fff;background:#00000080;border-radius:99px;padding:2px 7px;font-size:.62rem;font-weight:650;position:absolute;bottom:6px;left:6px}.gs-code{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:12px}@media (max-width:1080px){.gs-layout{grid-template-columns:1fr}.gs-preview{min-height:260px;position:relative;top:0}}@media (max-width:560px){.gs-stops li{grid-template-columns:36px minmax(0,1fr) 40px auto}.gs-stops .ak-range{grid-area:2/1/auto/-1}}