.AspectRatios-module-scss-module__11ldSq__aspect-section{position:relative;overflow:hidden}.AspectRatios-module-scss-module__11ldSq__aspect-section:before{content:"";pointer-events:none;background:radial-gradient(circle,#f59e0b0d,#0000 65%);width:500px;height:500px;position:absolute;top:-100px;left:-150px}.AspectRatios-module-scss-module__11ldSq__accent{color:var(--color-secondary)}.AspectRatios-module-scss-module__11ldSq__layout{gap:var(--space-2xl);margin-top:var(--space-2xl);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media screen and (max-width:1023.98px){.AspectRatios-module-scss-module__11ldSq__layout{grid-template-columns:1fr}}.AspectRatios-module-scss-module__11ldSq__ratio-grid{gap:var(--space-md);grid-template-columns:repeat(2,1fr);display:grid}.AspectRatios-module-scss-module__11ldSq__ratio-demo{gap:var(--space-xs);flex-direction:column;align-items:flex-start;display:flex}.AspectRatios-module-scss-module__11ldSq__ratio-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md);width:100%;padding:var(--space-sm);overflow:hidden}.AspectRatios-module-scss-module__11ldSq__ratio-inner{border-radius:var(--border-radius-sm);background:linear-gradient(135deg,#006eff1f,#a855f71f);justify-content:center;align-items:center;width:100%;max-height:80px;display:flex;overflow:hidden}.AspectRatios-module-scss-module__11ldSq__ratio-label{font-family:var(--font-code);color:var(--color-primary);font-size:.72rem;font-weight:700}.AspectRatios-module-scss-module__11ldSq__ratio-cls{font-family:var(--font-code);color:var(--color-primary-light);font-size:.68rem}.AspectRatios-module-scss-module__11ldSq__ratio-desc{color:var(--color-text-muted);font-size:.68rem}.AspectRatios-module-scss-module__11ldSq__property-box{gap:var(--space-md);padding:var(--space-xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);border-top:3px solid var(--color-secondary);flex-direction:column;display:flex}.AspectRatios-module-scss-module__11ldSq__property-title{color:var(--color-text);font-size:.95rem;font-weight:700}.AspectRatios-module-scss-module__11ldSq__property-desc{color:var(--color-text-muted);margin:0;font-size:.82rem;line-height:1.7}.AspectRatios-module-scss-module__11ldSq__property-code{border-radius:var(--border-radius-md);background:#0a0d16;border:1px solid #ffffff0d;overflow:hidden}.AspectRatios-module-scss-module__11ldSq__property-code pre{padding:var(--space-md);font-family:var(--font-code);color:#a8c4e0;white-space:pre;text-align:left;margin:0;font-size:clamp(.62rem,1vw,.72rem);line-height:1.9;overflow-x:auto}
.TotalCustomization-module-scss-module__S6i6LG__custom-section{position:relative;overflow:hidden}.TotalCustomization-module-scss-module__S6i6LG__custom-section:before{content:"";pointer-events:none;background:radial-gradient(circle,#6366f10a,#0000 60%);width:800px;height:800px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.TotalCustomization-module-scss-module__S6i6LG__grid{gap:var(--space-lg);margin-top:var(--space-2xl);z-index:1;grid-template-columns:repeat(3,1fr);display:grid;position:relative}@media screen and (max-width:1279.98px){.TotalCustomization-module-scss-module__S6i6LG__grid{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:767.98px){.TotalCustomization-module-scss-module__S6i6LG__grid{grid-template-columns:1fr}}.TotalCustomization-module-scss-module__S6i6LG__card{gap:var(--space-sm);padding:var(--space-xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);cursor:default;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;position:relative;overflow:hidden}.TotalCustomization-module-scss-module__S6i6LG__card:before{content:"";background:var(--accent);opacity:0;width:100%;height:3px;transition:opacity .25s;position:absolute;top:0;left:0}.TotalCustomization-module-scss-module__S6i6LG__card:hover{border-color:color-mix(in srgb, var(--accent), transparent 60%);transform:translateY(-4px);box-shadow:0 8px 30px #00000012}.TotalCustomization-module-scss-module__S6i6LG__card:hover:before{opacity:1}.TotalCustomization-module-scss-module__S6i6LG__card-icon{border-radius:var(--border-radius-sm);flex-shrink:0;place-items:center;width:40px;height:40px;font-size:1.2rem;display:grid}.TotalCustomization-module-scss-module__S6i6LG__card-title{color:var(--color-text);font-size:.95rem;font-weight:700}.TotalCustomization-module-scss-module__S6i6LG__card-desc{color:var(--color-text-muted);flex:1;font-size:.78rem;line-height:1.6}.TotalCustomization-module-scss-module__S6i6LG__card-code{padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius-xs);font-family:var(--font-code);color:#ffffff8c;white-space:pre;text-align:left;background:#ffffff09;border:1px solid #ffffff12;margin:0;font-size:.62rem;line-height:1.8;overflow-x:auto}
.LayoutVars-module-scss-module__w9wPWW__layout-section{position:relative;overflow:hidden}.LayoutVars-module-scss-module__w9wPWW__layout-section:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#6366f10f,#0000 60%);width:600px;height:600px;position:absolute;top:-80px;right:-120px}.LayoutVars-module-scss-module__w9wPWW__layout-section:after{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#06b6d40d,#0000 60%);width:500px;height:500px;position:absolute;bottom:-80px;left:-120px}.LayoutVars-module-scss-module__w9wPWW__accent{background:linear-gradient(135deg,#6366f1,#06b6d4);-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text}.LayoutVars-module-scss-module__w9wPWW__content{gap:var(--space-2xl);margin-top:var(--space-2xl);z-index:1;grid-template-columns:1fr 1.1fr;align-items:start;display:grid;position:relative}@media screen and (max-width:1279.98px){.LayoutVars-module-scss-module__w9wPWW__content{grid-template-columns:1fr}}.LayoutVars-module-scss-module__w9wPWW__demo-panel{gap:var(--space-lg);padding:var(--space-xl);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);top:calc(var(--header-height,64px) + var(--space-lg));flex-direction:column;display:flex;position:sticky}.LayoutVars-module-scss-module__w9wPWW__live-badge{align-items:center;gap:var(--space-xs);color:#22c55e;text-transform:uppercase;letter-spacing:.08em;background:#22c55e14;border:1px solid #22c55e33;border-radius:20px;align-self:flex-start;padding:4px 12px;font-size:.68rem;font-weight:700;display:inline-flex}.LayoutVars-module-scss-module__w9wPWW__live-dot{background:#22c55e;border-radius:50%;width:7px;height:7px;animation:1.5s ease-in-out infinite LayoutVars-module-scss-module__w9wPWW__pulse;box-shadow:0 0 6px #22c55e}@keyframes LayoutVars-module-scss-module__w9wPWW__pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.LayoutVars-module-scss-module__w9wPWW__value-display{align-items:center;gap:var(--space-xs);padding:var(--space-xl);border-radius:var(--border-radius-md);text-align:center;background:#6366f10a;border:1px solid #6366f126;flex-direction:column;display:flex}.LayoutVars-module-scss-module__w9wPWW__value-label{font-family:var(--font-code);color:var(--color-text-muted);letter-spacing:.04em;font-size:.72rem}.LayoutVars-module-scss-module__w9wPWW__value-number{font-family:var(--font-code);background:linear-gradient(135deg,#6366f1,#06b6d4);-webkit-text-fill-color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1;transition:all .3s}.LayoutVars-module-scss-module__w9wPWW__value-bp{color:var(--color-text-muted);font-size:.72rem}.LayoutVars-module-scss-module__w9wPWW__value-bp strong{color:var(--color-text)}.LayoutVars-module-scss-module__w9wPWW__bp-track-container{gap:var(--space-sm);flex-direction:column;display:flex}.LayoutVars-module-scss-module__w9wPWW__bp-row{align-items:center;gap:var(--space-sm);grid-template-columns:80px 1fr 46px;display:grid}.LayoutVars-module-scss-module__w9wPWW__bp-meta{flex-direction:column;gap:1px;display:flex}.LayoutVars-module-scss-module__w9wPWW__bp-key{font-family:var(--font-code);color:var(--color-text-muted);font-size:.72rem;font-weight:700;transition:color .2s}.LayoutVars-module-scss-module__w9wPWW__bp-range{color:var(--color-text-muted);opacity:.6;font-size:.55rem}.LayoutVars-module-scss-module__w9wPWW__bp-bar-track{background:#ffffff0a;border:1px solid #ffffff0f;border-radius:4px;height:8px;position:relative;overflow:visible}.LayoutVars-module-scss-module__w9wPWW__bp-bar-fill{background:#ffffff14;border-radius:4px;height:100%;transition:opacity .3s,background .3s;position:absolute;top:0;left:0}.LayoutVars-module-scss-module__w9wPWW__bp-cursor{border:2px solid var(--color-surface);z-index:2;border-radius:50%;width:14px;height:14px;transition:left .15s;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 8px}.LayoutVars-module-scss-module__w9wPWW__bp-value{font-family:var(--font-code);color:var(--color-text-muted);text-align:right;font-size:.68rem;font-weight:600;transition:color .2s,font-weight .2s}.LayoutVars-module-scss-module__w9wPWW__demo-hint{color:var(--color-text-muted);padding:var(--space-sm) var(--space-md);border-left:2px solid #6366f14d;margin:0;font-size:.72rem;line-height:1.6}.LayoutVars-module-scss-module__w9wPWW__demo-hint code{font-family:var(--font-code);color:#6366f1;font-size:.68rem}.LayoutVars-module-scss-module__w9wPWW__code-column{gap:var(--space-md);flex-direction:column;display:flex}.LayoutVars-module-scss-module__w9wPWW__code-panel{border-radius:var(--border-radius-lg);background:#080b14;border:1px solid #6366f11f;overflow:hidden}.LayoutVars-module-scss-module__w9wPWW__code-panel--output{border-color:#22c55e1f}.LayoutVars-module-scss-module__w9wPWW__code-bar{background:#ffffff05;border-bottom:1px solid #ffffff0a;align-items:center;gap:6px;padding:9px 14px;display:flex}.LayoutVars-module-scss-module__w9wPWW__dot{border-radius:50%;width:10px;height:10px}.LayoutVars-module-scss-module__w9wPWW__dot-red{background:#ff5f57}.LayoutVars-module-scss-module__w9wPWW__dot-yellow{background:#febc2e}.LayoutVars-module-scss-module__w9wPWW__dot-green{background:#28c840}.LayoutVars-module-scss-module__w9wPWW__code-filename{font-family:var(--font-code);color:var(--color-text-muted);flex:1;margin-left:6px;font-size:.6rem}.LayoutVars-module-scss-module__w9wPWW__code-badge{letter-spacing:.08em;color:#818cf8;background:#6366f11f;border:1px solid #6366f133;border-radius:20px;padding:2px 8px;font-size:.55rem;font-weight:700}.LayoutVars-module-scss-module__w9wPWW__code-badge--green{color:#4ade80;background:#22c55e1a;border-color:#22c55e33}.LayoutVars-module-scss-module__w9wPWW__code-body{padding:var(--space-lg);font-family:var(--font-code);color:#a8c4e0;white-space:pre;text-align:left;margin:0;font-size:clamp(.6rem,1vw,.7rem);line-height:1.9;overflow-x:auto}.LayoutVars-module-scss-module__w9wPWW__arrow-row{align-items:center;gap:var(--space-sm);display:flex}.LayoutVars-module-scss-module__w9wPWW__arrow-line{background:linear-gradient(90deg,#0000,#6366f140,#0000);flex:1;height:1px}.LayoutVars-module-scss-module__w9wPWW__arrow-label{color:var(--color-text-muted);white-space:nowrap;letter-spacing:.04em;font-size:.65rem;font-weight:600}.LayoutVars-module-scss-module__w9wPWW__usage-box{align-items:flex-start;gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius-md);background:#06b6d40d;border:1px solid #06b6d426;display:flex}.LayoutVars-module-scss-module__w9wPWW__usage-icon{flex-shrink:0;font-size:1.2rem;line-height:1}.LayoutVars-module-scss-module__w9wPWW__usage-title{color:var(--color-text);margin-bottom:4px;font-size:.78rem;font-weight:700}.LayoutVars-module-scss-module__w9wPWW__usage-desc{color:var(--color-text-muted);font-size:.72rem;line-height:1.6}.LayoutVars-module-scss-module__w9wPWW__usage-desc code{font-family:var(--font-code);color:#22d3ee;font-size:.68rem}