.gradient-page{--gradient-line: rgba(var(--contrast-rgb), .08);--gradient-line-soft: rgba(var(--contrast-rgb), .05);--gradient-radius: 14px;--gradient-ring: 0 0 0 3px rgba(var(--primary-rgb), .22)}.gradient-label{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.82rem;font-weight:700;line-height:1.3}.gradient-step{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:rgba(var(--primary-rgb),.16);color:var(--primary);font-size:.68rem;font-weight:800}.gradient-optional{color:var(--text-muted);font-weight:500}.gradient-sublabel{color:var(--text-muted);font-size:.73rem;font-weight:600}.gradient-tip{margin:0;color:var(--text-muted);font-size:.73rem;line-height:1.45}.gradient-studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;gap:18px;padding:18px}.gradient-studio__controls{display:flex;flex-direction:column;gap:16px;min-width:0}.gradient-studio__result{position:sticky;top:calc(var(--header-height, 64px) + 12px);display:flex;flex-direction:column;gap:10px;min-width:0}.gradient-field{display:flex;flex-direction:column;gap:7px}.gradient-field__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.gradient-limit{flex:0 0 auto;color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.72rem;font-weight:500}.gradient-limit strong{color:var(--text)}.gradient-text-field textarea{width:100%;min-height:74px;resize:vertical;padding:12px 13px;border:1px solid var(--gradient-line);border-radius:11px;outline:0;background:var(--bg-elevated);color:var(--text);font:500 .93rem/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.gradient-text-field textarea:hover{border-color:rgba(var(--contrast-rgb),.15)}.gradient-text-field textarea:focus{border-color:rgba(var(--primary-rgb),.6);background:var(--bg-card);box-shadow:var(--gradient-ring)}.gradient-colors{display:flex;flex-direction:column;gap:11px}.gradient-colors__head{display:flex;align-items:center;justify-content:space-between;gap:12px}.gradient-color-actions{display:flex;align-items:center;gap:5px}.gradient-action{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:6px 11px;border:1px solid var(--gradient-line);border-radius:9px;background:var(--bg-elevated);color:var(--text-muted);font-family:inherit;font-size:.74rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.gradient-action:hover:not(:disabled){border-color:rgba(var(--primary-rgb),.45);background:var(--bg-hover);color:var(--text)}.gradient-action:focus-visible{outline:0;box-shadow:var(--gradient-ring)}.gradient-action:disabled{cursor:not-allowed;opacity:.4}.gradient-action--add{border-color:rgba(var(--primary-rgb),.4);color:var(--primary)}.gradient-track{position:relative;height:26px;border:1px solid rgba(var(--contrast-rgb),.12);border-radius:999px;background:linear-gradient(90deg,#00e0ff,#c837ff);touch-action:none}.gradient-track__markers{position:absolute;inset:0 11px;display:block}.gradient-track__marker{position:absolute;top:50%;left:var(--marker-position, 0%);width:20px;height:20px;padding:0;border:3px solid #fff;border-radius:50%;background:var(--marker-color, #fff);box-shadow:0 2px 6px #00000080;transform:translate(-50%,-50%);cursor:grab;transition:transform .12s ease,box-shadow .12s ease}.gradient-track__marker:hover{transform:translate(-50%,-50%) scale(1.14)}.gradient-track__marker.is-active{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.55),0 2px 6px #00000080;transform:translate(-50%,-50%) scale(1.14)}.gradient-track__marker:focus-visible{outline:0;box-shadow:0 0 0 3px var(--bg-card),0 0 0 6px var(--primary)}.gradient-track__marker:active{cursor:grabbing}.gradient-track__marker.is-dragging{z-index:3;cursor:grabbing;transition:none;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 0 0 3px rgba(var(--primary-rgb),.55),0 6px 14px #0000008c}.gradient-stop-editor{display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid var(--gradient-line);border-radius:12px;background:var(--bg-elevated)}.gradient-stop{display:grid;grid-template-columns:28px 42px minmax(0,1fr) 36px;align-items:center;gap:8px;min-width:0}.gradient-stop__number{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(var(--primary-rgb),.12);color:var(--primary);font-size:.69rem;font-weight:800}.gradient-stop__picker{position:relative;display:block;width:42px;height:36px;overflow:hidden;border:1px solid rgba(var(--contrast-rgb),.1);border-radius:8px;background:var(--stop-color);cursor:pointer}.gradient-stop__picker input{position:absolute;inset:-8px;width:60px;height:56px;border:0;opacity:0;cursor:pointer}.gradient-stop__hex{min-width:0;height:36px;padding:0 10px;border:1px solid var(--gradient-line);border-radius:8px;outline:0;background:var(--bg-card);color:var(--text);font:650 .78rem ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;text-transform:uppercase;transition:border-color .15s ease,box-shadow .15s ease}.gradient-stop__hex:focus{border-color:rgba(var(--primary-rgb),.6);box-shadow:var(--gradient-ring)}.gradient-stop__hex.is-invalid{border-color:rgba(var(--danger-rgb),.7);box-shadow:0 0 0 3px rgba(var(--danger-rgb),.12)}.gradient-stop__remove{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:color .15s ease,background .15s ease}.gradient-stop__remove:hover:not(:disabled){background:rgba(var(--danger-rgb),.12);color:var(--danger-soft)}.gradient-stop__remove:focus-visible{outline:0;box-shadow:var(--gradient-ring)}.gradient-stop__remove:disabled{cursor:not-allowed;opacity:.25}.gradient-quick{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}.gradient-quick__swatch{height:24px;padding:0;border:1px solid rgba(0,0,0,.3);border-radius:6px;background:var(--quick-color);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.gradient-quick__swatch:hover{transform:translateY(-2px)}.gradient-quick__swatch.is-active{box-shadow:0 0 0 2px var(--bg-elevated),0 0 0 4px var(--primary)}.gradient-quick__swatch:focus-visible{outline:0;box-shadow:0 0 0 2px var(--bg-elevated),0 0 0 4px var(--primary)}.gradient-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.gradient-presets button{height:22px;padding:0;border:2px solid var(--bg-card);border-radius:999px;outline:1px solid var(--gradient-line);background:var(--preset-gradient);cursor:pointer;transition:outline-color .15s ease,transform .15s ease}.gradient-presets button:hover,.gradient-presets button:focus-visible,.gradient-presets button.is-active{outline-color:rgba(var(--primary-rgb),.7);transform:translateY(-1px)}.gradient-formats{display:flex;flex-direction:column;gap:8px}.gradient-format-tools{display:flex;flex-wrap:wrap;gap:5px}.gradient-format-tools button{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 11px;border:1px solid var(--gradient-line);border-radius:10px;background:var(--bg-elevated);color:var(--text-muted);font-family:inherit;font-size:.74rem;font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.gradient-format-tools button>:first-child{display:grid;place-items:center;min-width:15px;color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.82rem}.gradient-format-tools button[aria-pressed=true]>:first-child{color:var(--primary)}.gradient-format-tools button:hover{border-color:rgba(var(--primary-rgb),.35);background:var(--bg-hover)}.gradient-format-tools button[aria-pressed=true]{border-color:rgba(var(--primary-rgb),.5);background:rgba(var(--primary-rgb),.13);color:var(--primary)}.gradient-format-tools button:focus-visible{outline:0;box-shadow:var(--gradient-ring)}.gradient-magic-glyph{font-size:.74rem;letter-spacing:-.08em}.gradient-preview{display:flex;align-items:center;min-height:132px;height:auto;padding:26px clamp(18px,3vw,34px);overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:12px;background-color:#242424;background-image:linear-gradient(180deg,#0000000d,#00000052),url(/assets/img/server-motd/minecraft-background-dark.png);background-repeat:repeat;background-size:auto,80px;box-shadow:inset 0 1px #ffffff0a,inset 0 -1px #00000073;color:#fff;font-family:Minecraft,ui-monospace,monospace;font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}.gradient-preview__text{display:block;width:100%;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}.gradient-preview__text>span{color:var(--char-color);text-shadow:2px 2px 0 var(--char-shadow)}.gradient-preview__text>.gradient-preview__placeholder{color:#9b9b9b;text-shadow:2px 2px 0 #262626}.gradient-preview__text>span.is-bold{font-weight:800}.gradient-preview__text>span.is-italic{font-style:italic}.gradient-preview__text>span.is-underline{text-decoration:underline;text-underline-offset:.12em}.gradient-preview__text>span.is-strike{text-decoration:line-through}.gradient-preview__text>span.is-underline.is-strike{text-decoration:underline line-through}.gradient-output{display:flex;flex-direction:column;gap:9px;padding:11px;border:1px solid var(--gradient-line);border-radius:12px;background:var(--bg-elevated)}.gradient-output__tab{min-height:32px;font-size:.76rem}.gradient-output__panels code{display:block;min-height:76px;max-height:128px;overflow:auto;padding:11px 12px;border:1px solid var(--gradient-line-soft);border-radius:9px;background:var(--bg-card);color:var(--text);font:500 .75rem/1.55 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.gradient-output__panels code[hidden]{display:none}.gradient-output__panels code.is-empty{color:var(--text-muted)}.gradient-output__foot{display:flex;align-items:center;gap:10px}.gradient-output__hint{flex:1 1 auto;min-width:0;color:var(--text-muted);font-size:.71rem;line-height:1.4}.gradient-output-length{flex:0 0 auto;padding:3px 8px;border:1px solid var(--gradient-line);border-radius:999px;background:var(--bg-card);color:var(--text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.66rem;white-space:nowrap}.gradient-output-length.is-empty{opacity:.5}.gradient-copy{flex:0 0 auto}.gradient-copy.is-copied{border-color:var(--success);background:var(--success);color:var(--on-success)}@media(max-width:1000px){.gradient-studio{display:flex;flex-direction:column;align-items:stretch;gap:16px}.gradient-studio__controls,.gradient-studio__result{display:contents}.gradient-text-field{order:1}.gradient-preview{order:2}.gradient-colors{order:3}.gradient-formats{order:4}.gradient-output{order:5}.gradient-preview{position:sticky;top:calc(var(--header-height, 64px) + 8px);z-index:2}}@media(max-width:620px){.gradient-page{gap:13px}.gradient-studio{padding:13px;gap:14px}.gradient-colors__head{align-items:stretch;flex-direction:column;gap:9px}.gradient-color-actions{width:100%}.gradient-action{flex:1 1 auto;justify-content:center;min-height:40px;padding:6px 8px}.gradient-track{height:30px}.gradient-track__marker{width:24px;height:24px}.gradient-track__markers{inset:0 13px}.gradient-quick{grid-template-columns:repeat(8,minmax(0,1fr));gap:5px}.gradient-quick__swatch{height:34px}.gradient-stop{grid-template-columns:28px 44px minmax(0,1fr) 40px}.gradient-stop__picker,.gradient-stop__hex,.gradient-stop__remove{height:42px}.gradient-format-tools button{flex:1 1 auto;justify-content:center;min-height:40px;padding:6px 9px}.gradient-preview{min-height:112px;padding:22px 18px;font-size:1.15rem}.gradient-output__tab{min-height:38px;padding:5px 6px;font-size:.72rem}.gradient-output__foot{flex-wrap:wrap}.gradient-output__hint{flex:1 1 100%;order:3}.gradient-copy{flex:1 1 auto;min-height:44px}}@media(prefers-reduced-motion:reduce){.gradient-text-field textarea,.gradient-presets button,.gradient-stop__hex,.gradient-stop__remove,.gradient-format-tools button,.gradient-icon-button,.gradient-track__marker,.gradient-quick__swatch,.gradient-track__marker:hover,.gradient-quick__swatch:hover{transform:translate(-50%,-50%)}.gradient-quick__swatch:hover{transform:none}}
