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