#playground-content{background:#fff;position:relative;top:-100px;border-radius:1rem;z-index:100}#preview-hero{position:relative;--preview-code-overlap: 0px;min-height:590px;background:#f3f3f3;overflow:hidden;padding-top:0;text-align:center;border-bottom:4px solid #111827}#preview-hero h1{font-size:6rem;color:#fff;margin:50px 0 0;padding:0;line-height:1!important;text-align:center;letter-spacing:.5rem;opacity:1}.title-block{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;gap:1rem;letter-spacing:.2em;opacity:1}.title-block .title-heading{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem}.title-block .rocket-icon{height:90px;width:80px;background-image:url(/build/assets/rocket-siloette-white-CfGW6bpQ.png);background-position:center center;background-repeat:no-repeat;background-size:contain}.title-block h2{font-size:4rem;color:#fff;margin:0;padding:0;line-height:auto;text-align:center}#preview-hero.touched h1,#preview-hero.touched .title-block,#preview-hero.touched p{opacity:0}#preview-hero .preview-hero-resize-tab{position:absolute;left:50%;bottom:calc(var(--preview-code-overlap) - 13px);z-index:4;width:72px;height:26px;border:1px solid rgba(148,163,184,.75);border-radius:999px;background:#ffffffeb;box-shadow:0 8px 22px #0f172a2e;cursor:ns-resize;transform:translate(-50%);touch-action:none}#preview-hero .preview-hero-resize-tab:before{content:"";position:absolute;left:50%;top:50%;width:34px;height:5px;border-top:1px solid #64748b;border-bottom:1px solid #64748b;transform:translate(-50%,-50%)}#preview-hero .preview-hero-gradient-overlay{--preview-shape-padding: 2rem;--preview-code-overlap: 0px;position:absolute;height:0;left:0;right:0;bottom:0;display:block;place-items:center;background:#f1f5f9;z-index:1;transition:height .3s ease-in-out;background-size:40px 40px;background-image:linear-gradient(to right,#ccc 1px,transparent 1px),linear-gradient(to bottom,#ccc 1px,transparent 1px)}#preview-hero .preview-hero-gradient-overlay.show{display:grid;height:calc(100% - 20px)}#preview-hero .preview-hero-gradient-stage{position:absolute;inset:var(--preview-shape-padding) var(--preview-shape-padding) calc(var(--preview-code-overlap) + var(--preview-shape-padding));display:grid;place-items:center;min-height:0}#preview-hero[data-view=triangle] .preview-hero-gradient-shape{clip-path:polygon(0 90%,100% 90%,50% 10%)}#gradient-code-box{position:absolute;z-index:2;bottom:0;left:calc(10% - 1rem);right:calc(10% - 1rem);border-radius:1rem 1rem 0 0;background:#111827;color:#fff;padding-bottom:100px;text-align:left}#gradient-code{display:block;padding:4rem 4.25rem 2rem 2rem;overflow-wrap:anywhere;white-space:pre-wrap}#gradient-code-mode{position:absolute;top:.85rem;right:3.75rem;z-index:2;width:auto;margin:0;color:#172033;--form-select-bar-option-padding: .35rem .65rem}#gradient-copy-code{position:absolute;top:.85rem;right:.85rem;z-index:1;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid rgba(148,163,184,.55);border-radius:.45rem;background:#ffffff14;color:#fff;cursor:pointer}#gradient-copy-code:hover{background:#ffffff29}#gradient-copy-code span,#gradient-copy-code span:before{width:.85rem;height:1rem;border:1.8px solid currentColor;border-radius:.12rem}#gradient-copy-code span{position:relative;display:block}#gradient-copy-code span:before{content:"";position:absolute;left:-.32rem;top:.26rem;opacity:.72}#gradient-copy-code[data-copied=true]{border-color:#86efac;color:#86efac}#preview-hero .preview-hero-gradient-shape{position:relative;display:none;aspect-ratio:1;height:100%;background:var(--gradient);box-shadow:0 18px 50px #1118272e;overflow:hidden}#preview-hero .preview-hero-gradient-inset{position:absolute;display:none;border-radius:inherit;pointer-events:none}.gradient-playground{--angle: 135deg;--gradient: linear-gradient(135deg, #2563eb 0%, #14b8a6 52%, #f97316 100%);color:#172033}.gradient-playground .gradient-view-control{margin-bottom:18px}.gradient-playground .gradient-top-controls{display:flex;flex-direction:row;gap:16px;margin-bottom:18px}.gradient-playground .gradient-layer-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px}.gradient-playground .gradient-layer-list{display:flex;flex-wrap:wrap;gap:8px}.gradient-playground .gradient-svg-control{display:grid;gap:8px;margin-bottom:18px}.gradient-playground .gradient-svg-control[hidden]{display:none}.gradient-playground .gradient-svg-control input-textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.gradient-playground .gradient-svg-status{min-height:1.25rem;margin:0;color:#166534;font-size:.875rem}.gradient-playground .gradient-svg-status[data-state=error]{color:#b91c1c}.gradient-playground .gradient-layer,.gradient-playground .gradient-add-layer{height:34px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#172033;cursor:pointer}.gradient-playground .gradient-layer{padding:0 12px}.gradient-playground .gradient-layer[aria-current=true]{border-color:#2563eb;background:#eff6ff;color:#1d4ed8}.gradient-playground .gradient-add-layer{width:34px;font-size:22px;line-height:30px}.gradient-playground .gradient-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:20px}.gradient-playground .gradient-control{display:none}.gradient-playground .gradient-opacity{display:grid;gap:8px;align-content:end;min-height:70px}.gradient-playground .gradient-opacity input{width:100%}.gradient-playground .gradient-reverse{align-self:end;min-height:var(--input-height, 34px);border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#172033;cursor:pointer}.gradient-playground .gradient-reverse:hover{border-color:#2563eb;color:#1d4ed8}.gradient-playground[data-gradient-type=linear] .gradient-control[data-control=angle],.gradient-playground[data-gradient-type=repeating-linear] .gradient-control[data-control=angle],.gradient-playground[data-gradient-type=conic] .gradient-control[data-control=angle],.gradient-playground[data-gradient-type=repeating-conic] .gradient-control[data-control=angle],.gradient-playground[data-gradient-type=radial] .gradient-control[data-control=radial],.gradient-playground[data-gradient-type=repeating-radial] .gradient-control[data-control=radial],.gradient-playground[data-gradient-type=conic] .gradient-control[data-control=position-x],.gradient-playground[data-gradient-type=repeating-conic] .gradient-control[data-control=position-x],.gradient-playground[data-gradient-type=radial] .gradient-control[data-control=position-x],.gradient-playground[data-gradient-type=repeating-radial] .gradient-control[data-control=position-x],.gradient-playground[data-gradient-type=conic] .gradient-control[data-control=position-y],.gradient-playground[data-gradient-type=repeating-conic] .gradient-control[data-control=position-y],.gradient-playground[data-gradient-type=radial] .gradient-control[data-control=position-y],.gradient-playground[data-gradient-type=repeating-radial] .gradient-control[data-control=position-y]{display:block}.gradient-type-specific{width:200px}.gradient-playground code{display:block;margin-top:20px;padding:16px;border-radius:8px;background:#111827;color:#e5e7eb;white-space:pre-wrap}:root{--form-angle-outer-border: 4px solid #6f7a8b;--form-angle-center-size: 50px;--form-angle-center-border: 4px solid #14398a;--form-angle-center-background: #5d90ad}#gradient-view{position:absolute;left:10%;top:40px;width:45px;z-index:100;--form-select-option-icon-width: 30px;--form-select-option-icon-height: 30px;--form-select-option-icon-bg: #14398a;--form-select-option-icon-selected-bg: #ffffff}#gradient-view:hover{width:200px}#gradient-view::part(option-icon){width:20px;height:20px}#gradient-angle{width:150px}#gradient-type{width:200px}#gradient-colorstops{width:100%}@media (max-width: 767px){#preview-hero h1{margin-top:70px;padding-inline:1rem;font-size:clamp(2.75rem,16vw,4rem);letter-spacing:.1rem}.title-block{padding-inline:1rem;letter-spacing:.08em}.title-block .title-heading{gap:.5rem}.title-block .rocket-icon{width:46px;height:54px}.title-block h2{font-size:clamp(2.25rem,11vw,3rem)}#gradient-code-box{right:1rem;left:1rem}#gradient-code-mode{left:.75rem}#playground-content{top:0;width:100%;max-width:100%!important;border-radius:0}#playground-content>.row{flex-direction:column;flex-wrap:wrap}#playground-content>.row>.gradient-type-specific,#playground-content>.row>.w\:100{width:100%}#playground-content>.row>.w\:100>.row{flex-wrap:wrap}#gradient-angle,#gradient-type,#gradient-inset,#gradient-opacity{width:100%!important;max-width:none!important}}