.gradient-main{padding:0 4.5vw 90px}.gradient-hero{text-align:center;padding:66px 0 40px}.gradient-hero h1{font-size:clamp(46px,6vw,78px);letter-spacing:-4px;line-height:1;margin:18px 0}.gradient-hero h1 em{font-family:'Playfair Display',serif;color:#59c0a1}.gradient-hero p{max-width:650px;margin:auto;color:var(--muted);line-height:1.7}.gradient-workspace{max-width:1220px;margin:auto;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr);background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}.gradient-preview{min-height:650px;display:grid;place-items:center;position:relative}.gradient-preview:after{content:'';position:absolute;inset:0;background-image:linear-gradient(45deg,#fff1 25%,transparent 25%),linear-gradient(-45deg,#fff1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#fff1 75%),linear-gradient(-45deg,transparent 75%,#fff1 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;mix-blend-mode:soft-light;opacity:.25}.gradient-preview span{z-index:1;font-size:10px;font-weight:700;letter-spacing:2px;color:#fff;background:#1117;padding:8px 12px;border-radius:99px;backdrop-filter:blur(8px)}.gradient-controls{padding:30px;border-left:1px solid var(--line)}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.control-grid label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;color:var(--muted)}.control-grid select{display:block;width:100%;height:42px;margin-top:9px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:0 11px}.control-grid output{float:right;color:var(--ink)}.control-grid input[type=range]{width:100%;margin-top:17px;accent-color:#d85c42}.stops-heading,.preset-heading,.gradient-code-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 12px}.stops-heading strong,.preset-heading strong{font-size:13px}.stops-heading small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.stops-heading button,.preset-heading button,.gradient-code-heading button{border:0;background:transparent;color:var(--ink);font-size:10px;font-weight:700}.gradient-stops{display:grid;gap:8px}.gradient-stop{display:grid;grid-template-columns:42px 1fr 70px 30px;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--paper)}.gradient-stop input[type=color]{width:42px;height:36px;padding:2px;border:1px solid var(--line);border-radius:7px;background:var(--card)}.gradient-stop .stop-hex,.gradient-stop .stop-position{width:100%;height:36px;border:0;background:transparent;color:var(--ink);font-size:11px;font-weight:700}.gradient-stop .stop-position{text-align:right}.gradient-stop .remove-stop{border:0;background:transparent;color:var(--muted);font-size:18px}.gradient-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.gradient-preset{height:42px;border:1px solid #fff5;border-radius:8px}.gradient-code-heading label{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-weight:700}.gradient-code-heading button{background:var(--ink);color:var(--paper);padding:9px 13px;border-radius:99px}.gradient-controls pre{max-height:130px;overflow:auto;margin:0}.gradient-library{max-width:1220px;margin:70px auto 0}.gradient-guest{text-align:center;border:1px dashed var(--line);border-radius:18px;padding:45px;background:var(--card)}.gradient-guest h2{font-size:30px;margin:0 0 10px}.gradient-guest p{color:var(--muted);max-width:560px;margin:0 auto 24px;line-height:1.6}.library-section{padding:15px 0 45px}.saved-gradients-section{border-top:1px solid var(--line);padding-top:55px}.library-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.library-heading .eyebrow{justify-content:flex-start}.library-heading h2{font-size:34px;letter-spacing:-1.5px;margin:11px 0 0}.library-heading>small{color:var(--muted);font-size:10px}.favorite-palette-list,.saved-gradient-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.favorite-gradient-palette,.saved-gradient-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px}.favorite-gradient-palette{cursor:pointer}.favorite-gradient-palette:hover,.saved-gradient-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.mini-gradient-swatches{display:flex;height:72px;border-radius:8px;overflow:hidden}.mini-gradient-swatches i{flex:1}.favorite-gradient-palette strong,.saved-gradient-card strong{display:block;font-size:11px;margin:10px 3px 3px}.saved-gradient-preview{height:90px;border-radius:8px}.saved-gradient-actions{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.saved-gradient-actions button{border:0;background:transparent;font-size:10px;font-weight:700;color:var(--ink)}.saved-gradient-actions .remove-gradient{color:#b74636;font-size:16px}.save-gradient-form{display:flex;gap:8px}.save-gradient-form input{height:40px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);padding:0 11px}.save-gradient-form .btn{border-radius:8px}.gradient-empty{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:30px;text-align:center;color:var(--muted);font-size:12px}.gradient-toast{z-index:50}@media(max-width:900px){.gradient-workspace{grid-template-columns:1fr}.gradient-preview{min-height:390px}.gradient-controls{border-left:0;border-top:1px solid var(--line)}.favorite-palette-list,.saved-gradient-list{grid-template-columns:repeat(2,1fr)}.library-heading{display:block}.library-heading>small,.save-gradient-form{display:flex;margin-top:14px}}@media(max-width:600px){.gradient-main{padding:0 14px 60px}.gradient-hero{padding-top:48px}.gradient-hero h1{letter-spacing:-2.5px}.gradient-controls{padding:20px}.control-grid{grid-template-columns:1fr}.gradient-stop{grid-template-columns:40px 1fr 58px 26px}.gradient-presets{grid-template-columns:repeat(5,1fr)}.favorite-palette-list,.saved-gradient-list{grid-template-columns:1fr}.save-gradient-form{display:grid}.gradient-guest{padding:32px 20px}}