.var-page-header{max-width:1100px;margin:0 auto;padding:24px 16px 8px;text-align:center}.var-wrapper{max-width:1100px;margin:0 auto;padding:0 16px 48px}.var-layout{display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start}@media(max-width:767px){.var-layout{display:flex;flex-direction:column;gap:16px;overflow-x:hidden}.var-control-col{order:1;min-width:0;max-width:100%}.var-preview-col{order:2;min-width:0;max-width:100%}.var-preview-compare{flex-direction:column}.var-css-output{max-width:100%}.var-css-code{max-width:100%;overflow-x:auto}.var-slot-input--range{min-width:0;max-width:100%}.var-presets{gap:6px}.var-scope-tabs{flex-direction:column}}.var-section{background:var(--swp-surface, #fff);border:1px solid var(--swp-border, #e5e7eb);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px}.var-section:last-child{margin-bottom:0}.var-section-title{font-size:14px;font-weight:800;color:var(--swp-ink);margin:0}.var-presets{display:flex;flex-wrap:wrap;gap:8px}.var-preset-btn{padding:6px 12px;min-height:44px;border:1px solid var(--swp-border, #e5e7eb);border-radius:20px;background:var(--swp-surface, #fff);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s;color:var(--swp-ink)}.var-preset-btn:hover{background:var(--swp-bg, #f9fafb)}.var-preset-btn--active{background:var(--color-primary, #0d9488);color:var(--color-primary-content, #fff);border-color:var(--color-primary, #0d9488);font-weight:700}.var-scope-tabs{display:flex;gap:8px}.var-scope-tab{flex:1;padding:8px 12px;min-height:44px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-surface, #fff);font-size:13px;cursor:pointer;transition:background .15s,border-color .15s;color:var(--swp-ink)}.var-scope-tab:hover{background:var(--swp-bg, #f9fafb)}.var-scope-tab--active{background:var(--color-primary, #0d9488);color:var(--color-primary-content, #fff);border-color:var(--color-primary, #0d9488);font-weight:700}.var-slots{display:flex;flex-direction:column;gap:8px}.var-slot{padding:10px 12px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-bg, #f9fafb);transition:opacity .15s}.var-slot--disabled{opacity:.5}.var-slot-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}.var-slot-toggle-label{display:flex;align-items:center;cursor:pointer}.var-slot-toggle{width:16px;height:16px;cursor:pointer}.var-slot-name{font-family:Courier New,Courier,monospace;font-size:12px;color:var(--swp-ink);flex:1}.var-slot-value-display{font-size:12px;font-weight:700;color:var(--color-primary, #0d9488);font-variant-numeric:tabular-nums;min-width:32px;text-align:right}.var-slot-input-row{display:flex;align-items:center;gap:8px}.var-slot-input--color{width:48px;height:32px;border:1px solid var(--swp-border, #e5e7eb);border-radius:6px;padding:2px;cursor:pointer;background:var(--swp-surface, #fff)}.var-slot-input--range{flex:1;height:36px;cursor:pointer}.var-slot-input--text{flex:1;padding:6px 10px;border:1px solid var(--swp-border, #e5e7eb);border-radius:6px;font-size:14px;background:var(--swp-surface, #fff);color:var(--swp-ink)}.var-slot-input--text:focus{outline:none;border-color:var(--color-primary, #0d9488)}.var-reset-btn{padding:8px 16px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-surface, #fff);color:var(--swp-ink-muted);font-size:13px;cursor:pointer;align-self:flex-start;transition:background .15s}.var-reset-btn:hover{background:var(--swp-bg, #f9fafb)}.var-preview-root{border-radius:8px;padding:16px;background:var(--swp-bg, #f9fafb);min-height:160px}.var-preview-card{padding:var(--padding-base, 16px);border-radius:var(--border-radius, 8px);box-shadow:0 0 var(--shadow-blur, 4px) #0000001a;background:#fff;display:flex;flex-direction:column;gap:10px}.var-preview-card-title{font-size:16px;font-weight:700;color:#1a1a2e;margin:0}.var-preview-card-body{font-size:14px;color:#4b5563;margin:0;line-height:1.6}.var-preview-card-label{font-size:12px;font-weight:700;color:#6b7280;margin:0 0 8px}.var-preview-btn{background:var(--primary-color, #0d9488);font-size:var(--font-size, 16px);padding:calc(var(--padding-base, 16px) * .5) var(--padding-base, 16px);border-radius:var(--border-radius, 8px);color:#fff;border:none;cursor:pointer;font-weight:700;align-self:flex-start;transition:opacity .15s}.var-preview-btn:hover{opacity:.85}.var-preview-compare{display:flex;gap:16px}@media(max-width:767px){.var-preview-compare{flex-direction:column}}.var-preview-compare .var-preview-card{flex:1}.var-preview-caption{font-size:13px;color:var(--swp-ink-muted);margin:12px 0 0;line-height:1.6}.var-css-output-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.var-copy-btn{padding:8px 14px;min-height:44px;border:1px solid var(--swp-border, #e5e7eb);border-radius:8px;background:var(--swp-surface, #fff);font-size:13px;font-weight:700;cursor:pointer;color:var(--swp-ink);transition:background .15s,border-color .15s;white-space:nowrap}.var-copy-btn:hover{background:var(--swp-bg, #f9fafb)}.var-copy-btn--copied{border-color:#22c55e;background:#f0fdf4;color:#16a34a}.var-css-output{background:#1a1a2e;border-radius:8px;overflow:auto;max-height:360px}.var-css-code{padding:16px;margin:0;font-family:Courier New,Courier,monospace;font-size:12px;line-height:1.7;color:#e2e8f0;white-space:pre;overflow-x:auto}.var-how-to{max-width:1100px;margin:48px auto 0;padding:0 16px}.var-section-heading{font-size:20px;font-weight:800;color:var(--swp-ink);margin:0 0 16px}.var-steps{padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.7;color:var(--swp-ink)}.var-related-section{max-width:1100px;margin:32px auto 0;padding:0 16px}.var-related-tools{display:flex;flex-direction:column;gap:8px}.var-related-link{color:var(--color-primary, #0d9488);text-decoration:none;font-size:15px}.var-related-link:hover{text-decoration:underline}