.gradient-lab{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}.gradient-preview-column{position:sticky;top:24px;min-width:0}.gradient-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;min-height:40px}.gradient-toolbar>span{font-size:13px}.gradient-view-controls{display:flex;align-items:center;gap:4px;border-radius:24px;padding:4px;background:var(--field-bg)}.gradient-view-controls>button{background:transparent;border:0;color:var(--muted);min-height:32px;border-radius:18px;padding:0 14px;font-size:11px}.gradient-view-controls>button[aria-pressed=true]{background:var(--surface);color:var(--text)}.gradient-view-controls>.expand-preview{width:36px;height:32px;min-height:32px;padding:0;display:grid;place-items:center}.gradient-view-controls>.expand-preview svg{width:17px;height:17px}
.gradient-scene{aspect-ratio:1.6;width:100%;border-radius:20px;overflow:hidden;position:relative;background:linear-gradient(135deg,#f7b491,#f27166,#805771);--gradient-ink:#0f1624}.gradient-scene>svg{position:absolute;inset:0;width:100%;height:100%;display:block;stroke:none;fill:initial}.gradient-overlay{position:absolute;inset:0;padding:40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;color:var(--gradient-ink)}.gradient-logo{display:block;width:112px;height:32px;background:currentColor;mask:url('/static/docs-ui/brand/mega-white.svg') center/contain no-repeat;-webkit-mask:url('/static/docs-ui/brand/mega-white.svg') center/contain no-repeat}.gradient-overlay>p{font-size:clamp(34px,4vw,66px);letter-spacing:-1px;line-height:1.1;margin:30px 0}.gradient-overlay>small{font-size:11px}.gradient-preview-caption{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);line-height:1.6;margin-top:16px}.gradient-preview-caption>span:first-child{max-width:85%}.gradient-controls{display:grid;gap:22px;min-width:0}.gradient-field{display:grid;gap:10px;min-width:0}.gradient-field>label{font-size:13px}.gradient-boundaries{display:grid;grid-template-columns:1fr;gap:18px}.gradient-help{font-size:11px;line-height:1.65;color:var(--muted);margin:0}.gradient-controls input[type=range]{width:100%;min-height:24px;height:24px;margin:0;padding:0;background:transparent;border:0;accent-color:var(--action-primary)}.gradient-directions{display:flex;gap:8px}.gradient-directions button{height:40px;width:48px;background:var(--field-bg);color:var(--muted);border:0;border-radius:12px;display:grid;place-items:center}.gradient-directions button[aria-pressed=true]{background:var(--accent-soft);color:var(--text)}.gradient-directions svg{width:18px;height:18px}.gradient-range-ends{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted)}.gradient-actions{display:flex;gap:12px}.gradient-actions>.button{width:calc(50% - 6px)!important;padding:0 16px}.gradient-error{font-size:13px;color:var(--danger)}.gradient-controls .pattern-reset{margin-top:-12px}
.gradient-presets{margin-top:56px;padding:24px 0 40px}.gradient-preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}.gradient-preset-card{padding:0;text-align:left;background:transparent;border:0;color:var(--text);min-width:0;position:relative;border-radius:16px}.gradient-preset-card>.gradient-preset-art{display:block;height:130px;border-radius:16px;margin-bottom:14px;position:relative}.gradient-preset-card[aria-pressed=true]>.gradient-preset-art:after{content:'';position:absolute;inset:7px;border:1px solid #ffffffb0;border-radius:10px}.gradient-preset-card>strong{display:block;font-size:15px;font-weight:400;margin-bottom:7px}.gradient-preset-card>small{font-size:10px;color:var(--muted);line-height:1.6;display:block}.gradient-key-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;border-block:1px solid var(--border);padding:36px 0;margin-bottom:16px}.gradient-key-rules strong{display:block;font-size:18px;font-weight:400;margin-bottom:14px}.gradient-key-rules p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.gradient-spectrum-diagram{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;min-height:400px}.gradient-spectrum-diagram>span{flex:1;padding:22px 24px;font-size:12px;color:#fff}.gradient-neighbor-diagram{display:grid;gap:28px}.gradient-neighbor-diagram>div>span{font-size:13px;display:block;margin-bottom:12px}.gradient-demo-strip{height:130px;border-radius:14px}.gradient-neighbor-diagram p{font-size:11px;color:var(--muted);line-height:1.6;margin:12px 0 0}.gradient-wrong>span{color:var(--danger)}.gradient-direction-diagram{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}.gradient-direction-diagram figure{margin:0}.gradient-direction-diagram figure>div{height:160px;border-radius:14px;background:linear-gradient(var(--direction),#f7b491,#f27166,#805771)}.gradient-cover-example{min-height:420px;padding:36px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;border-radius:18px;background:linear-gradient(135deg,#f27166,#805771,#424050);color:#fff}.gradient-cover-example>p{font-size:42px;line-height:1.12;letter-spacing:-1px;margin:40px 0}.gradient-cover-example>small{font-size:11px}.gradient-text-diagram{display:grid;grid-template-columns:1fr 1fr;gap:16px}.gradient-text-diagram figure>div{min-height:240px;display:grid;place-items:center;font-size:32px;letter-spacing:-1px;font-weight:700;border-radius:16px;background:linear-gradient(135deg,#f7b491,#f27166)}.gradient-smooth-diagram{display:grid;gap:28px}.gradient-smooth-diagram figure>div{height:135px;border-radius:14px;background:linear-gradient(90deg,#f7b491,#f27166,#805771)}.gradient-smooth-diagram .gradient-stepped>div{background:linear-gradient(90deg,#f7b491 0% 16%,#f59e84 16% 32%,#f38775 32% 48%,#f27166 48% 64%,#ba6570 64% 82%,#805771 82% 100%)}.gradient-page .pattern-editorial-visual figcaption{font-size:12px;color:var(--muted)}.gradient-page .pattern-editorial-visual figcaption>span{font-size:11px;line-height:1.6}
.mega-viewer-stage>.gradient-scene{width:100%;height:100%;aspect-ratio:auto;border-radius:0}.mega-viewer-target.gradient-scene .gradient-overlay{padding:6vh 6vw}.mega-viewer-target.gradient-scene .gradient-overlay>p{font-size:clamp(48px,7vw,120px)}
@media(max-width:1180px){.gradient-lab{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.gradient-preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gradient-overlay{padding:30px}}
@media(max-width:980px){.gradient-lab{grid-template-columns:1fr}.gradient-preview-column{position:static}.gradient-controls{grid-template-columns:1fr 1fr;gap:24px;padding:24px;background:var(--surface);border-radius:18px}.gradient-boundaries{grid-template-columns:1fr 1fr;grid-column:1/-1}.gradient-controls>.gradient-help{grid-column:1/-1}.gradient-controls>.pattern-reset{margin:0;align-self:center}.gradient-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gradient-key-rules{gap:24px}.gradient-key-rules strong{font-size:16px}.gradient-key-rules p{font-size:14px}}
@media(max-width:680px){.gradient-toolbar{align-items:center;gap:10px}.gradient-toolbar>span{font-size:11px;max-width:140px;line-height:1.5}.gradient-view-controls>button{font-size:10px;padding:0 10px}.gradient-scene{aspect-ratio:1.2;border-radius:16px}.gradient-overlay{padding:24px}.gradient-overlay>p{font-size:34px;margin:20px 0}.gradient-logo{width:90px;height:26px}.gradient-overlay>small{font-size:9px}.gradient-preview-caption{font-size:10px;gap:12px}.gradient-controls{grid-template-columns:1fr;padding:22px;gap:24px}.gradient-boundaries{grid-template-columns:1fr;grid-column:1}.gradient-controls>.gradient-help{grid-column:1}.gradient-field>label{font-size:14px}.gradient-actions>.button{width:calc(50% - 6px)!important}.gradient-presets{margin-top:28px}.gradient-preset-grid{gap:22px 14px}.gradient-preset-card>.gradient-preset-art{height:110px;border-radius:12px}.gradient-preset-card>strong{font-size:13px;line-height:1.45}.gradient-preset-card>small{font-size:10px}.gradient-key-rules{grid-template-columns:1fr;gap:26px;padding:30px 0}.gradient-key-rules strong{font-size:18px;margin-bottom:10px}.gradient-key-rules p{font-size:15px}.gradient-spectrum-diagram{min-height:350px}.gradient-direction-diagram figure>div{height:140px}.gradient-text-diagram{gap:12px}.gradient-text-diagram figure>div{min-height:210px;font-size:26px}.gradient-cover-example{padding:28px;min-height:360px}.gradient-cover-example>p{font-size:34px}.gradient-smooth-diagram figure>div{height:110px}.mega-viewer-target.gradient-scene .gradient-overlay>p{font-size:clamp(42px,12vw,72px)}}