.page-module__IjYo4G__boxModelVisual{max-width:600px;margin:1rem auto;font-size:.875rem}.page-module__IjYo4G__marginLayer,.page-module__IjYo4G__borderLayer,.page-module__IjYo4G__paddingLayer,.page-module__IjYo4G__contentLayer{text-align:center;position:relative}.page-module__IjYo4G__marginLayer{background:#ffc1071a;border:2px dashed #ffc10780;padding:30px}.page-module__IjYo4G__borderLayer{background:#dc35451a;border:5px solid #dc3545cc;padding:0}.page-module__IjYo4G__paddingLayer{background:#28a7451a;border:2px dashed #28a74580;padding:20px}.page-module__IjYo4G__contentLayer{background:var(--card);border:2px solid var(--border);flex-direction:column;justify-content:center;align-items:center;min-height:100px;padding:2rem;display:flex}.page-module__IjYo4G__layerLabel{background:var(--background);text-transform:uppercase;letter-spacing:.05em;color:var(--foreground);border-radius:.25rem;padding:.25rem .5rem;font-size:.7rem;font-weight:600;position:absolute;top:5px;left:5px}.dark .page-module__IjYo4G__marginLayer{background:#fbbf2426;border-color:#fbbf2499}.dark .page-module__IjYo4G__borderLayer{background:#ef444426;border-color:#ef4444cc}.dark .page-module__IjYo4G__paddingLayer{background:#34d39926;border-color:#34d39999}.dark .page-module__IjYo4G__contentLayer{border-color:#475569}.page-module__IjYo4G__paddingExamples{flex-direction:column;gap:1rem;display:flex}.page-module__IjYo4G__paddingDemo{background:var(--card);border:2px solid var(--border);color:var(--foreground);font-size:.875rem}.page-module__IjYo4G__uniform{padding:20px}.page-module__IjYo4G__directional{padding:10px 20px 30px 40px}.page-module__IjYo4G__shorthand{padding:20px 40px}.page-module__IjYo4G__marginExamples{background:var(--muted);border:2px dashed var(--border);border-radius:var(--radius);padding:1rem}.page-module__IjYo4G__marginDemo{background:var(--card);border:2px solid var(--primary);text-align:center;padding:1rem;font-size:.875rem}.page-module__IjYo4G__basic{margin:20px}.page-module__IjYo4G__auto{width:200px;margin:0 auto}.page-module__IjYo4G__negative{z-index:1;background:var(--primary);color:var(--primary-foreground);margin-top:-10px;margin-left:-20px;position:relative}.page-module__IjYo4G__borderExamples{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;display:grid}.page-module__IjYo4G__borderDemo{text-align:center;background:var(--card);border-radius:var(--radius);padding:1rem;font-size:.875rem}.page-module__IjYo4G__solid{border:3px solid var(--primary)}.page-module__IjYo4G__dashed{border:2px dashed var(--secondary)}.page-module__IjYo4G__gradient{background:linear-gradient(var(--card),var(--card))padding-box,linear-gradient(45deg,#f06,#48f)border-box;border:4px solid #0000}.page-module__IjYo4G__rounded{border:2px solid var(--border);border-radius:20px 12px 12px}.page-module__IjYo4G__boxSizingComparison{grid-template-columns:1fr 1fr;gap:2rem;margin:1rem 0 2rem;display:grid}.page-module__IjYo4G__sizingDemo{background:var(--card);padding-bottom:2rem;position:relative}.page-module__IjYo4G__sizingDemo h4{margin:0 0 .5rem;font-size:.9375rem;font-weight:600}.page-module__IjYo4G__sizingDemo p{color:var(--muted-foreground);margin:0;font-size:.8125rem}.page-module__IjYo4G__contentBox{box-sizing:content-box;border:5px solid var(--primary);width:100%;max-width:300px;padding:20px}.page-module__IjYo4G__borderBox{box-sizing:border-box;border:5px solid var(--secondary);width:100%;max-width:300px;padding:20px}.page-module__IjYo4G__sizeIndicator{text-align:center;color:var(--muted-foreground);font-size:.8125rem;font-weight:600;position:absolute;bottom:-24px;left:0;right:0}.page-module__IjYo4G__layoutGrid{background:var(--muted);border-radius:var(--radius);gap:20px;padding:1rem;display:flex}.page-module__IjYo4G__gridItem{box-sizing:border-box;border:2px solid var(--primary);background:var(--card);text-align:center;border-radius:calc(var(--radius) - 2px);flex:1;padding:20px;font-weight:600}.page-module__IjYo4G__playgroundContainer{grid-template-columns:280px 1fr;gap:1.5rem;display:grid}.page-module__IjYo4G__controlsPanel{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);padding:1.25rem}.page-module__IjYo4G__controlsPanel h3{color:var(--primary);margin:0 0 1rem;font-size:1rem;font-weight:600}.page-module__IjYo4G__controlGroup{margin-bottom:1rem}.page-module__IjYo4G__sliderHeader{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.page-module__IjYo4G__switchLabel{cursor:pointer;color:var(--foreground);align-items:center;gap:.625rem;font-size:.875rem;font-weight:500;display:flex!important}.page-module__IjYo4G__valueDisplay{background:var(--muted);font-family:var(--font-jetbrains-mono),monospace;border-radius:.25rem;padding:.125rem .5rem;font-size:.8125rem;display:inline-block}.page-module__IjYo4G__playgroundDemo{flex-direction:column;gap:1rem;display:flex}.page-module__IjYo4G__playgroundWrapper{background:var(--muted);border-radius:var(--radius);border:1px solid var(--border);justify-content:center;align-items:center;min-height:350px;padding:2rem;display:flex;position:relative;overflow:hidden}.page-module__IjYo4G__playgroundBox{background:var(--card);border:5px solid var(--primary);transition:all .15s;position:relative}.page-module__IjYo4G__boxContent{height:100%;color:var(--foreground);justify-content:center;align-items:center;font-size:.875rem;font-weight:600;display:flex}.page-module__IjYo4G__labelTop{white-space:nowrap;color:var(--muted-foreground);font-size:.75rem;font-weight:600;font-family:var(--font-jetbrains-mono),monospace;position:absolute;top:-24px;left:50%;transform:translate(-50%)}.page-module__IjYo4G__playgroundCode{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.page-module__IjYo4G__playgroundCode pre{font-family:var(--font-jetbrains-mono),monospace;margin:0;padding:1rem;font-size:.8125rem;line-height:1.6;overflow-x:auto}.page-module__IjYo4G__collapseDemo{background:var(--muted);border-radius:var(--radius);padding:1rem}.page-module__IjYo4G__collapseBox{background:var(--card);border:2px solid var(--primary);text-align:center;border-radius:calc(var(--radius) - 2px);padding:1rem;font-size:.875rem}.page-module__IjYo4G__first{margin-bottom:30px}.page-module__IjYo4G__second{margin-top:20px}.page-module__IjYo4G__collapseNote{text-align:center;color:var(--muted-foreground);margin-top:1rem;font-size:.8125rem;font-style:italic}.page-module__IjYo4G__outlineExamples{flex-direction:column;gap:1rem;display:flex}.page-module__IjYo4G__outlineDemo{background:var(--card);cursor:pointer;color:var(--foreground);border-radius:var(--radius);padding:.75rem 1.5rem;font-family:inherit;font-size:.875rem;transition:all .2s}.page-module__IjYo4G__borderStyle{border:3px solid var(--primary)}.page-module__IjYo4G__outlineStyle{outline:3px solid var(--secondary);outline-offset:2px;border:none}.page-module__IjYo4G__focusStyle{border:1px solid var(--border)}.page-module__IjYo4G__focusStyle:focus{outline-offset:4px;outline:2px dashed}.page-module__IjYo4G__percentageParent{background:var(--muted);border-radius:var(--radius);width:100%;min-height:200px;padding:1rem;position:relative}.page-module__IjYo4G__percentageChild{background:var(--card);border:2px solid var(--primary);text-align:center;border-radius:calc(var(--radius) - 2px);justify-content:center;align-items:center;margin-bottom:.75rem;font-size:.875rem;display:flex}.page-module__IjYo4G__widthDemo{width:50%;padding:1rem}.page-module__IjYo4G__paddingPercentDemo{width:auto;padding:10%}.page-module__IjYo4G__marginPercentDemo{width:auto;margin:0 25% .75rem;padding:1rem}.page-module__IjYo4G__shadowExamples{background:var(--muted);border-radius:var(--radius);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1.5rem;padding:1.5rem;display:grid}.page-module__IjYo4G__shadowDemo{background:var(--card);text-align:center;border-radius:var(--radius);padding:1.25rem;font-size:.8125rem}.page-module__IjYo4G__basicShadow{box-shadow:0 4px 6px #0000001a}.page-module__IjYo4G__insetShadow{box-shadow:inset 0 2px 4px #0003}.page-module__IjYo4G__multipleShadows{box-shadow:0 2px 4px #0000001a,0 8px 16px #0000001a}.page-module__IjYo4G__glowEffect{border:1px solid #3b82f680;box-shadow:0 0 20px #3b82f680,0 0 40px #3b82f64d}.dark .page-module__IjYo4G__basicShadow{box-shadow:0 4px 6px #0000004d}.dark .page-module__IjYo4G__insetShadow{box-shadow:inset 0 2px 4px #0006}.dark .page-module__IjYo4G__multipleShadows{box-shadow:0 2px 4px #0003,0 8px 16px #0000004d}.dark .page-module__IjYo4G__glowEffect{border-color:#60a5fa80;box-shadow:0 0 20px #60a5fa80,0 0 40px #60a5fa4d}.page-module__IjYo4G__tipsGrid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.page-module__IjYo4G__tipCard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s}.page-module__IjYo4G__tipCard:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 25px #00000014;box-shadow:0 8px 25px lab(0% 0 0/.08)}.page-module__IjYo4G__tipIcon{font-size:2.5rem;font-family:var(--font-jetbrains-mono),monospace;color:var(--primary);margin-bottom:.75rem;display:block}.page-module__IjYo4G__tipCard h3{margin-bottom:.5rem;font-size:1.125rem;font-weight:600}.page-module__IjYo4G__tipCard p{color:var(--muted-foreground);margin:0;font-size:.875rem;line-height:1.5}.page-module__IjYo4G__nextGrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;max-width:700px;display:grid}.page-module__IjYo4G__nextLink{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:inherit;align-items:center;gap:1rem;padding:1.5rem;text-decoration:none;transition:border-color .3s,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s;display:flex;position:relative;overflow:hidden}.page-module__IjYo4G__nextLink:before{content:"";background:linear-gradient(to bottom,var(--primary),#4ea4ca);opacity:0;width:3px;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0}@supports (color:lab(0% 0 0)){.page-module__IjYo4G__nextLink:before{background:linear-gradient(to bottom,var(--primary),lab(63.1292% -18.1274 -28.0657))}}.page-module__IjYo4G__nextLink:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 12px 28px #357a3a1f,0 4px 10px #0000000f;box-shadow:0 12px 28px lab(45.7706% -33.6758 28.0119/.12),0 4px 10px lab(0% 0 0/.06)}.page-module__IjYo4G__nextLink:hover:before{opacity:1}.page-module__IjYo4G__nextIcon{font-size:2rem;font-family:var(--font-jetbrains-mono),monospace;color:var(--primary);flex-shrink:0}.page-module__IjYo4G__nextLink h3{color:var(--foreground);margin-bottom:.25rem;font-size:1.125rem;font-weight:600}.page-module__IjYo4G__nextLink p{color:var(--muted-foreground);margin:0;font-size:.8125rem}@media (max-width:768px){.page-module__IjYo4G__boxSizingComparison,.page-module__IjYo4G__playgroundContainer{grid-template-columns:1fr}.page-module__IjYo4G__controlsPanel{order:2}.page-module__IjYo4G__playgroundDemo{order:1}.page-module__IjYo4G__borderExamples,.page-module__IjYo4G__shadowExamples{grid-template-columns:1fr 1fr}.page-module__IjYo4G__tipsGrid,.page-module__IjYo4G__nextGrid{grid-template-columns:1fr}.page-module__IjYo4G__playgroundWrapper{min-height:280px;padding:1.5rem}}@media (max-width:480px){.page-module__IjYo4G__contentBox,.page-module__IjYo4G__borderBox{max-width:100%}.page-module__IjYo4G__borderExamples,.page-module__IjYo4G__shadowExamples{grid-template-columns:1fr}}