:root{--token-selector:#0e7c86;--token-property:#0b6e75;--token-value:#0f766e;--token-comment:#4b6365;--token-number:#b45309;--token-punc:#3f5a5c;--checker-a:rgba(148,163,184,.13);--checker-b:transparent;--handle-ring:rgba(37,99,235,.16)}
html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"]{--token-selector:#d8b4fe;--token-property:#93c5fd;--token-value:#5eead4;--token-comment:#8aa19f;--token-number:#fcd34d;--token-punc:#c6d4d2;--checker-a:rgba(148,163,184,.08);--checker-b:transparent;--handle-ring:rgba(59,130,246,.20)}
.tool-app *{box-sizing:border-box}
.tool-app button,.tool-app input,.tool-app select,.tool-app textarea{font:inherit}
.tool-app button{-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
.layout-slot{display:block}
.section{max-width:1240px;margin:0 auto 16px;padding:0 16px}
.card{border:1px solid var(--border);background:var(--surface);border-radius:26px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.hero{padding-top:24px}
.hero-card{padding:26px;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;background:radial-gradient(circle, rgba(37,99,235,.18), transparent 65%);filter:blur(10px);pointer-events:none}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.82rem;font-weight:800}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero h1{margin:0 0 10px;font-size:clamp(2rem,3vw,3.2rem);line-height:1.04;letter-spacing:-.03em;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{margin:0;max-width:980px;color:var(--muted);line-height:1.8}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head h3{margin:0 0 6px;color:var(--text);font-size:1.08rem}
.section-head p{margin:0;color:var(--muted);line-height:1.7}
.inline-status{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-size:.78rem;font-weight:800;white-space:nowrap}
.inline-status.success{background:var(--success-soft)}
.inline-status.warning{background:var(--warning-soft)}
.inline-status.danger{background:var(--danger-soft)}
.btn-primary,.btn-outline,.btn-ghost,.preset-btn,.mini-btn{min-height:46px;border-radius:15px;padding:0 16px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:800;line-height:1;cursor:pointer;user-select:none;transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;text-decoration:none}
.btn-primary{color:var(--btn-primary-text);background:var(--accent-grad);border-color:rgba(255,255,255,.08);box-shadow:0 12px 26px rgba(37,99,235,.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(37,99,235,.28)}
.btn-outline{color:var(--btn-outline-text);background:var(--btn-outline-bg);border-color:var(--btn-outline-border)}
.btn-outline:hover{transform:translateY(-1px);background:rgba(37,99,235,.14)}
.btn-ghost,.preset-btn,.mini-btn{color:var(--btn-ghost-text);background:var(--btn-ghost-bg);border-color:var(--btn-ghost-border)}
.btn-ghost:hover,.preset-btn:hover,.mini-btn:hover{transform:translateY(-1px);background:var(--surface-soft)}
.btn-primary:disabled,.btn-outline:disabled,.btn-ghost:disabled{opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none !important}
.preset-strip{padding:18px}
.preset-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.preset-btn{min-height:64px;padding:10px;border-radius:18px;position:relative;overflow:hidden}
.preset-btn span{position:absolute;inset:auto 8px 8px 8px;padding:6px 8px;border-radius:10px;background:rgba(15,23,42,.42);color:#fff;font-size:.74rem;font-weight:800;backdrop-filter:blur(8px)}
.main-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:16px;align-items:start}
.left-stack,.right-stack{display:grid;gap:16px;align-self:start}
.preview-card,.code-card,.controls-card,.stops-card{padding:18px}
.preview-shell{border:1px solid var(--border);border-radius:24px;background:var(--preview-bg);overflow:hidden}
.preview-stage{position:relative;min-height:520px;background-image:linear-gradient(45deg, var(--checker-a) 25%, var(--checker-b) 25%),
        linear-gradient(-45deg, var(--checker-a) 25%, var(--checker-b) 25%),
        linear-gradient(45deg, var(--checker-b) 75%, var(--checker-a) 75%),
        linear-gradient(-45deg, var(--checker-b) 75%, var(--checker-a) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;overflow:hidden;touch-action:none;user-select:none}
.preview-gradient{position:absolute;inset:0}
.preview-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.10), transparent 18%, transparent 82%, rgba(0,0,0,.06));pointer-events:none;z-index:1}
.guide-line{position:absolute;left:50%;top:50%;width:180%;height:2px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);transform-origin:center;opacity:.55;z-index:2;pointer-events:none}
.radial-rings{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.45}
.ring{position:absolute;border:1px dashed rgba(255,255,255,.55);border-radius:999px;transform:translate(-50%,-50%)}
.stop-dot,.center-dot{position:absolute;transform:translate(-50%,-50%);border:none;border-radius:999px;cursor:pointer;z-index:4;transition:transform .16s ease, box-shadow .18s ease}
.stop-dot{width:22px;height:22px;border:3px solid rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(15,23,42,.25), 0 0 0 6px rgba(255,255,255,.12)}
.stop-dot.active{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 10px 22px rgba(15,23,42,.3), 0 0 0 8px var(--handle-ring)}
.center-dot{width:20px;height:20px;background:#fff;border:3px solid rgba(37,99,235,.95);box-shadow:0 8px 18px rgba(15,23,42,.25), 0 0 0 8px var(--handle-ring)}
.preview-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--surface-soft)}
.mini-stat{padding:12px;border:1px solid var(--border);border-radius:16px;background:var(--surface-strong)}
.mini-stat small{display:block;color:var(--muted);margin-bottom:4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.mini-stat strong{display:block;word-break:break-word;font-size:.96rem}
.preview-toolbar{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border-top:1px solid var(--border);background:var(--surface-soft)}
.controls-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.82rem;font-weight:800;color:var(--text)}
.field input[type="text"],.field input[type="number"],.field select{width:100%;min-height:46px;border-radius:15px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:11px 13px;outline:none;transition:border-color .18s ease, box-shadow .18s ease}
.field select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:46px;background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);background-position:calc(100% - 19px) calc(50% - 3px), calc(100% - 13px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus{border-color:var(--accent1);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.range-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.tool-app input[type="range"]{width:100%;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg, rgba(37,99,235,.22), rgba(124,58,237,.22));outline:none;border:none}
.tool-app input[type="range"]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0b6e75;box-shadow:0 8px 16px rgba(37,99,235,.24);cursor:pointer}
.tool-app input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #0b6e75;box-shadow:0 8px 16px rgba(37,99,235,.24);cursor:pointer}
.value-pill{min-width:76px;text-align:center;padding:10px 12px;border-radius:12px;background:var(--surface-strong);border:1px solid var(--border);color:var(--text);font-weight:800;font-size:.86rem}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.stop-list{display:grid;gap:14px}
.stop-card{padding:14px;border:1px solid var(--border);border-radius:20px;background:var(--surface-soft);box-shadow:var(--shadow-soft);transition:.18s ease}
.stop-card.active{border-color:rgba(37,99,235,.35);box-shadow:0 0 0 4px rgba(37,99,235,.08), var(--shadow-soft)}
.stop-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.stop-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stop-swatch{width:20px;height:20px;border-radius:999px;border:2px solid rgba(255,255,255,.8);box-shadow:0 4px 10px rgba(15,23,42,.18);flex:0 0 auto}
.mini-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.74rem;font-weight:800;color:var(--muted)}
.stop-actions{display:flex;gap:8px;flex-wrap:wrap}
.mini-btn{min-height:38px;padding:0 12px;border-radius:12px;font-size:.84rem}
.stop-body{display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:start}
.color-stack{display:flex;flex-direction:column;gap:8px}
.color-stack input[type="color"]{width:100%;min-height:58px;padding:0;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid var(--input-border);background:var(--input-bg)}
.hex-code{padding:10px 12px;border-radius:12px;background:var(--btn-outline-bg);color:var(--btn-outline-text);border:1px solid var(--btn-outline-border);text-align:center;font-weight:800;font-size:.9rem;word-break:break-word}
.stop-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.code-box{min-height:280px;max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:20px;background:var(--code-bg);color:var(--text);padding:16px;font:500 13px/1.75 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;white-space:pre-wrap;word-break:break-word}
.code-box .tk-selector{color:var(--token-selector);font-weight:700}
.code-box .tk-property{color:var(--token-property);font-weight:700}
.code-box .tk-value{color:var(--token-value)}
.code-box .tk-number{color:var(--token-number)}
.code-box .tk-punc{color:var(--token-punc)}
.code-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.note{color:var(--muted);font-size:.9rem;line-height:1.7}
@media (max-width:1180px){
.preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.main-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
.controls-grid{grid-template-columns:1fr}
.stop-grid{grid-template-columns:1fr}
.preview-bar{grid-template-columns:1fr 1fr}
.stop-body{grid-template-columns:1fr}
.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
.hero-actions,.quick-actions,.preview-toolbar,.code-actions{display:grid;grid-template-columns:1fr}
.hero-actions > *,.quick-actions > *,.preview-toolbar > *,.code-actions > *{width:100%}
.preview-stage{min-height:380px}
.preview-bar{grid-template-columns:1fr}
.preset-grid{grid-template-columns:1fr}
}

/* page overrides */
/* CSS gradient generator: flat "Soft & clear" layout */
.tool-app{position:relative}
.tool-app .gg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.tool-app .gg-status{font:500 14px var(--zl-font-head);color:var(--zl-muted)}
.tool-app .gg-status.success{color:var(--zl-accent-strong)}
.tool-app .gg-status.danger{color:#b42318}
.tool-app .card{border-radius:18px;padding:18px;margin:0 0 16px}
.tool-app .main-grid{gap:16px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.tool-app .main-grid .card{margin:0}
.tool-app .card>.zl-ui-title{margin:0 0 12px}
.tool-app .gg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 12px}
.tool-app .gg-hint{margin:0;color:var(--zl-muted);font-size:14px}
.tool-app .preset-strip{padding:16px 18px}
.tool-app .preset-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.tool-app .preset-btn{min-height:56px;border-radius:12px;border:1px solid var(--zl-line);padding:0;box-shadow:none;transition:none}
.tool-app .preset-btn:hover{transform:none;border-color:var(--zl-ink)}
.tool-app .preset-btn span{inset:auto 0 0 0;border-radius:0 0 11px 11px;padding:2px 4px;background:rgba(0,0,0,.5);font:500 11px var(--zl-font-head);backdrop-filter:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.tool-app .preview-shell{border-radius:16px;border-color:var(--zl-line);background:var(--zl-surface)}
.tool-app .preview-stage{min-height:340px;height:340px}
.tool-app .guide-line{width:auto;transform-origin:center;background:rgba(255,255,255,.85);height:2px;opacity:.6;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.tool-app .ring{border:1.5px dashed rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tool-app .radial-rings{opacity:.7}
.tool-app .stop-dot{width:26px;height:26px;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);padding:0;cursor:grab;touch-action:none}
.tool-app .stop-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.tool-app .stop-dot.active{transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 2px var(--zl-ink),0 0 0 5px #fff}
.tool-app .center-dot{width:24px;height:24px;background:transparent;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.5);padding:0;cursor:move;touch-action:none}
.tool-app .center-dot::after{content:"";position:absolute;inset:-10px;border-radius:50%}
.tool-app .center-dot[hidden]{display:none}
.tool-app .preview-toolbar{background:var(--zl-surface-2);border-color:var(--zl-line)}
.tool-app .code-box{min-height:0;max-height:260px;margin:0;border-radius:12px;border-color:var(--zl-line);background:var(--zl-surface-2);font:500 14px/1.7 var(--zl-font-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.tool-app .field label{font:500 14px var(--zl-font-head);color:var(--zl-ink)}
.tool-app .field[hidden]{display:none}
.tool-app input[type="range"]{background:var(--zl-line-2);height:6px}
.tool-app input[type="range"]::-webkit-slider-thumb{border-color:var(--zl-accent);box-shadow:none;width:22px;height:22px}
.tool-app input[type="range"]::-moz-range-thumb{border-color:var(--zl-accent);box-shadow:none}
.tool-app .value-pill{min-width:64px;padding:8px 10px;border-radius:10px;background:var(--zl-surface-2);border-color:var(--zl-line);font:500 14px var(--zl-font-mono)}
.tool-app .value-num{width:76px;min-height:44px;padding:6px 8px;border:1.5px solid var(--zl-line-2);border-radius:10px;background:var(--zl-surface);color:var(--zl-ink);font:500 15px var(--zl-font-mono);text-align:center}
.tool-app .quick-actions{border-color:var(--zl-line)}
.tool-app .quick-actions:not(:has(button:not([hidden]))){display:none}
.tool-app .stop-list{gap:10px;max-height:620px;overflow:auto;padding:2px}
.tool-app .stop-card{border-radius:12px;border:1px solid var(--zl-line);background:var(--zl-surface);box-shadow:none;padding:12px}
.tool-app .stop-card.active{border-color:var(--zl-accent);box-shadow:0 0 0 1px var(--zl-accent)}
.tool-app .stop-top{margin-bottom:10px}
.tool-app .stop-title strong{font:600 15px var(--zl-font-head)}
.tool-app .stop-swatch{width:22px;height:22px;border:1px solid var(--zl-line-2);box-shadow:none}
.tool-app .mini-btn{min-height:36px;font-size:13.5px}
.tool-app .stop-body{grid-template-columns:96px minmax(0,1fr)}
.tool-app .color-stack input[type="color"]{min-height:48px;border-radius:10px;border:1.5px solid var(--zl-line-2);background:var(--zl-surface);padding:2px}
.tool-app input.hex-code{width:100%;min-height:40px;padding:6px 4px;border:1.5px solid var(--zl-line-2);border-radius:10px;background:var(--zl-surface);color:var(--zl-ink);font:500 14px var(--zl-font-mono);text-align:center;text-transform:uppercase}
.tool-app input.hex-code.is-invalid{border-color:#b42318}
.tool-app .stop-grid{grid-template-columns:1fr;gap:8px}
.tool-app .stop-grid .field{gap:4px}
.tool-app .code-box .tk-number{color:#a14f00}
html[data-theme="dark"] .tool-app .code-box .tk-number{color:#f6b26b}
html[data-theme="dark"] .tool-app .code-box .tk-selector,html[data-theme="dark"] .tool-app .code-box .tk-property{color:#7fd6cf}
html[data-theme="dark"] .tool-app .code-box .tk-value{color:#bfe3d8}
html[data-theme="dark"] .tool-app .code-box .tk-punc{color:#9fb4b1}
@media (max-width:1180px){.tool-app .preset-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.tool-app .main-grid{display:flex;flex-direction:column}.tool-app .left-stack,.tool-app .right-stack{display:contents}
.tool-app .preview-card{order:1}.tool-app .stops-card{order:2}.tool-app .controls-card{order:3}.tool-app .code-card{order:4}
.tool-app .stop-list{max-height:none}}
@media (max-width:680px){
.tool-app .card{padding:14px}
.tool-app .preset-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-app .preview-stage{min-height:260px;height:260px}
.tool-app .gg-actions,.tool-app .preview-toolbar{display:grid;grid-template-columns:1fr 1fr}
.tool-app .preview-toolbar #copyCssBtn{grid-column:1/-1}
.tool-app .gg-status{grid-column:1/-1}
.tool-app .stop-body{grid-template-columns:1fr}
.tool-app .color-stack{flex-direction:row}
.tool-app .color-stack>*{flex:1}
.tool-app .mini-btn{min-height:44px}
}
/* compact stop cards */
.tool-app .range-row{grid-template-columns:minmax(0,1fr) 72px}
.tool-app .range-row .value-num{width:72px;min-height:40px;padding:4px 6px}
.tool-app .stop-grid .field{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px}
.tool-app .stop-grid .field label{font-size:13.5px}
.tool-app .stop-card{padding:10px 12px}
.tool-app .stop-top{margin-bottom:8px}
.tool-app .color-stack{gap:6px}
.tool-app .color-stack input[type="color"]{min-height:40px}
.tool-app .stop-list{max-height:560px}
@media (max-width:680px){.tool-app .stop-grid .field{grid-template-columns:1fr}}
@media (max-width:1180px){.tool-app .stop-list{max-height:none}.tool-app .main-grid .card{width:100%;align-self:stretch}}
@media (max-width:680px){
.tool-app .gg-actions{grid-template-columns:repeat(6,minmax(0,1fr))}
.tool-app .gg-actions #addStopBtn,.tool-app .gg-actions #randomBtn{grid-column:span 3}
.tool-app .gg-actions #undoBtn,.tool-app .gg-actions #redoBtn,.tool-app .gg-actions #resetBtn{grid-column:span 2;padding:0 8px}
}
/* page content: long code samples scroll inside their box instead of widening the page */
.zl-article,.zl-body>*{min-width:0}
.zl-article pre{max-width:100%;overflow-x:auto}
.zl-article pre code{white-space:pre}
.zl-article .zl-table-wrap{max-width:100%;overflow-x:auto}
.zl-article :not(pre)>code{overflow-wrap:anywhere;word-break:break-word}
/* radial centre: a wide ring under the stop dots, so the 0% stop and the centre can both be grabbed */
.tool-app .center-dot{width:46px;height:46px;z-index:3}
.tool-app .stop-dot::after{inset:-5px}
.tool-app .center-dot::after{content:none}
.tool-app .stop-dot{z-index:5}