#playground-content{z-index:100;background:#fff;border-radius:1rem;position:relative;top:-100px}#preview-hero{--preview-code-overlap:0px;text-align:center;background:#f3f3f3;border-bottom:4px solid #111827;min-height:590px;padding-top:0;position:relative;overflow:hidden}#preview-hero h1{color:#fff;text-align:center;letter-spacing:.5rem;opacity:1;margin:50px 0 0;padding:0;font-size:6rem;line-height:1!important}.title-block{letter-spacing:.2em;opacity:1;flex-direction:column;justify-content:center;align-items:center;gap:1rem;display:flex;position:relative}.title-block .title-heading{flex-direction:row;justify-content:center;align-items:center;gap:1rem;display:flex}.title-block .rocket-icon{background-image:url(/build/assets/rocket-siloette-white-CfGW6bpQ.png);background-position:50%;background-repeat:no-repeat;background-size:contain;width:80px;height:90px}.title-block h2{color:#fff;font-size:4rem;line-height:auto;text-align:center;margin:0;padding:0}#preview-hero.touched h1,#preview-hero.touched .title-block,#preview-hero.touched p{opacity:0}#preview-hero .preview-hero-resize-tab{left:50%;bottom:calc(var(--preview-code-overlap) - 13px);z-index:4;cursor:ns-resize;touch-action:none;background:#ffffffeb;border:1px solid #94a3b8bf;border-radius:999px;width:72px;height:26px;position:absolute;transform:translate(-50%);box-shadow:0 8px 22px #0f172a2e}#preview-hero .preview-hero-resize-tab:before{content:"";border-top:1px solid #64748b;border-bottom:1px solid #64748b;width:34px;height:5px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#preview-hero .preview-hero-gradient-overlay{--preview-shape-padding:2rem;--preview-code-overlap:0px;z-index:1;background-color:#f1f5f9;background-image:linear-gradient(90deg,#ccc 1px,#0000 1px),linear-gradient(#ccc 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:40px 40px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;place-items:center;height:0;transition:height .3s ease-in-out;display:block;position:absolute;bottom:0;left:0;right:0}#preview-hero .preview-hero-gradient-overlay.show{height:calc(100% - 20px);display:grid}#preview-hero .preview-hero-gradient-stage{inset:var(--preview-shape-padding) var(--preview-shape-padding) calc(var(--preview-code-overlap) + var(--preview-shape-padding));place-items:center;min-height:0;display:grid;position:absolute}#preview-hero[data-view=triangle] .preview-hero-gradient-shape{clip-path:polygon(0 90%,100% 90%,50% 10%)}#gradient-code-box{z-index:2;color:#fff;text-align:left;background:#111827;border-radius:1rem 1rem 0 0;padding-bottom:100px;position:absolute;bottom:0;left:calc(10% - 1rem);right:calc(10% - 1rem)}#gradient-code{overflow-wrap:anywhere;white-space:pre-wrap;padding:4rem 4.25rem 2rem 2rem;display:block}#gradient-code-mode{z-index:2;color:#172033;--form-select-bar-option-padding:.35rem .65rem;width:auto;margin:0;position:absolute;top:.85rem;right:3.75rem}#gradient-copy-code{z-index:1;color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #94a3b88c;border-radius:.45rem;place-items:center;width:2.25rem;height:2.25rem;display:grid;position:absolute;top:.85rem;right:.85rem}#gradient-copy-code:hover{background:#ffffff29}#gradient-copy-code span,#gradient-copy-code span:before{border:1.8px solid;border-radius:.12rem;width:.85rem;height:1rem}#gradient-copy-code span{display:block;position:relative}#gradient-copy-code span:before{content:"";opacity:.72;position:absolute;top:.26rem;left:-.32rem}#gradient-copy-code[data-copied=true]{color:#86efac;border-color:#86efac}#preview-hero .preview-hero-gradient-shape{aspect-ratio:1;background:var(--gradient);height:100%;display:none;position:relative;overflow:hidden;box-shadow:0 18px 50px #1118272e}#preview-hero .preview-hero-gradient-inset{border-radius:inherit;pointer-events:none;display:none;position:absolute}.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{flex-direction:row;gap:16px;margin-bottom:18px;display:flex}.gradient-playground .gradient-layer-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;display:flex}.gradient-playground .gradient-layer-list{flex-wrap:wrap;gap:8px;display:flex}.gradient-playground .gradient-svg-control{gap:8px;margin-bottom:18px;display:grid}.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{color:#166534;min-height:1.25rem;margin:0;font-size:.875rem}.gradient-playground .gradient-svg-status[data-state=error]{color:#b91c1c}.gradient-playground .gradient-layer,.gradient-playground .gradient-add-layer{color:#172033;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;height:34px}.gradient-playground .gradient-layer{padding:0 12px}.gradient-playground .gradient-layer[aria-current=true]{color:#1d4ed8;background:#eff6ff;border-color:#2563eb}.gradient-playground .gradient-add-layer{width:34px;font-size:22px;line-height:30px}.gradient-playground .gradient-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:20px;display:grid}.gradient-playground .gradient-control{display:none}.gradient-playground .gradient-opacity{align-content:end;gap:8px;min-height:70px;display:grid}.gradient-playground .gradient-opacity input{width:100%}.gradient-playground .gradient-reverse{min-height:var(--input-height,34px);color:#172033;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:6px;align-self:end}.gradient-playground .gradient-reverse:hover{color:#1d4ed8;border-color:#2563eb}.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{color:#e5e7eb;white-space:pre-wrap;background:#111827;border-radius:8px;margin-top:20px;padding:16px;display:block}: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{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:#fff;width:45px;position:absolute;top:40px;left:10%}#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 (width<=767px){#preview-hero h1{letter-spacing:.1rem;margin-top:70px;padding-inline:1rem;font-size:clamp(2.75rem,16vw,4rem)}.title-block{letter-spacing:.08em;padding-inline:1rem}.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{left:1rem;right:1rem}#gradient-code-mode{left:.75rem}#playground-content{border-radius:0;width:100%;top:0;max-width:100%!important}#playground-content>.row{flex-flow:column 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}}