.gsg-wrap{display:flex;flex-direction:column;gap:1.25rem}.gsg-controls{display:flex;flex-direction:column;gap:.75rem}.gsg-field{display:flex;flex-direction:column;gap:.3rem}.gsg-row-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}.gsg-field-header{display:flex;justify-content:space-between;align-items:center}.gsg-label{font-size:.82rem;font-weight:600;color:var(--color-text-secondary)}.gsg-val{font-size:.8rem;font-family:var(--font-mono);color:var(--color-primary);min-width:3.5rem;text-align:right}.gsg-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--color-border);outline:none;cursor:pointer}.gsg-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-primary)}.gsg-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 0 0 1px var(--color-primary)}.gsg-color-input-wrap{display:flex;align-items:center;gap:.5rem;margin-top:.2rem}.gsg-swatch{width:36px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px;cursor:pointer;background:none;flex-shrink:0}.gsg-hex-input{font-family:var(--font-mono);font-size:.85rem;padding:.35rem .6rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-secondary);color:var(--color-text);width:100%;min-width:0}.gsg-hex-input:focus{outline:none;border-color:var(--color-primary);background:var(--color-bg)}.gsg-presets{display:flex;gap:.5rem;flex-wrap:wrap}.gsg-preset{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:transform .15s,border-color .15s;outline:none}.gsg-preset:hover{transform:scale(1.12)}.gsg-preset.active{border-color:var(--color-text);transform:scale(1.12)}.gsg-preset-sunset{background:linear-gradient(135deg,#f093fb,#f5576c)}.gsg-preset-ocean{background:linear-gradient(135deg,#4facfe,#00f2fe)}.gsg-preset-forest{background:linear-gradient(135deg,#43e97b,#38f9d7)}.gsg-preset-night{background:linear-gradient(135deg,#2d2b55,#0c0c1e)}.gsg-preset-aurora{background:linear-gradient(135deg,#667eea,#764ba2)}.gsg-section-label{font-size:.82rem;font-weight:600;color:var(--color-text-secondary);display:block;margin-bottom:.5rem}.gsg-preview-canvas{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f093fb,#f5576c);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2.5rem 1.5rem;min-height:180px;position:relative;overflow:hidden}.gsg-card{position:relative;z-index:1;padding:1.5rem 1.75rem;display:flex;flex-direction:column;gap:.5rem;min-width:180px;transition:background-color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast)}.gsg-card-dot{width:10px;height:10px;border-radius:50%;background:#ffffffb3;margin-bottom:.25rem}.gsg-card-title{font-size:1rem;font-weight:700;color:#ffffffeb;letter-spacing:.01em}.gsg-card-sub{font-size:.78rem;color:#ffffffb3}.gsg-card-btn{margin-top:.5rem;height:24px;width:80px;border-radius:12px;background:#ffffff40}.gsg-output-section{display:flex;flex-direction:column;gap:.4rem}.gsg-output-header{display:flex;justify-content:space-between;align-items:center}.gsg-pre{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.85rem 1rem;overflow-x:auto;margin:0;font-family:var(--font-mono);font-size:.82rem;line-height:1.7}.gsg-code{font-family:inherit}.gsg-hl-sel{color:#7c3aed}.gsg-hl-brace{color:var(--color-text-secondary)}.gsg-hl-prop{color:#0369a1}.gsg-hl-colon{color:var(--color-text-secondary)}.gsg-hl-val{color:#057a55}.gsg-hl-num{color:#b45309}.gsg-hl-semi{color:var(--color-text-secondary)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .gsg-hl-sel{color:#a78bfa}:root:not([data-theme=light]) .gsg-hl-prop{color:#38bdf8}:root:not([data-theme=light]) .gsg-hl-val{color:#34d399}:root:not([data-theme=light]) .gsg-hl-num{color:#fbbf24}}[data-theme=dark] .gsg-hl-sel{color:#a78bfa}[data-theme=dark] .gsg-hl-prop{color:#38bdf8}[data-theme=dark] .gsg-hl-val{color:#34d399}[data-theme=dark] .gsg-hl-num{color:#fbbf24}@media(max-width:480px){.gsg-row-two{grid-template-columns:1fr}}