.LawsOfUX_container__q6_u_{min-height:100vh;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-sans);padding-top:80px}.LawsOfUX_breadcrumbs__q7URz{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl)}.LawsOfUX_breadcrumbLink__pipRA{color:var(--color-accent);text-decoration:none;font-size:.9rem;font-weight:500;transition:var(--transition-fast)}.LawsOfUX_breadcrumbLink__pipRA:hover{color:var(--color-accent)}.LawsOfUX_breadcrumbSeparator__BKciW{color:var(--color-text-tertiary);flex-shrink:0}.LawsOfUX_header__SDu10{justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl);background-color:var(--color-background-alt);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100;backdrop-filter:blur(var(--glass-blur))}.LawsOfUX_headerLeft__2VA99,.LawsOfUX_header__SDu10,.LawsOfUX_logo__v_JKS{display:flex;align-items:center}.LawsOfUX_logo__v_JKS{gap:var(--spacing-sm)}.LawsOfUX_logoIcon__OcBOw{width:32px;height:32px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#EC407A,#9C27B0)}.LawsOfUX_logoText__8l_Wu{font-size:1.25rem;font-weight:700;color:var(--color-text-primary)}.LawsOfUX_headerRight__uKXz_{display:flex;align-items:center;gap:var(--spacing-sm)}.LawsOfUX_headerBtn__qNkZg{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-secondary);font-size:.875rem;cursor:pointer;transition:var(--transition-fast)}.LawsOfUX_headerBtn__qNkZg:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-hover);color:var(--color-text-primary)}.LawsOfUX_headerBtn__qNkZg span{display:none}@media (min-width:768px){.LawsOfUX_headerBtn__qNkZg span{display:inline}}.LawsOfUX_hero__haecP{text-align:center;padding:var(--spacing-lg) var(--spacing-xl) var(--spacing-2xl);max-width:800px;margin:0 auto}.LawsOfUX_heroTitle__YgNWT{font-size:clamp(2.5rem,6vw,4rem);font-weight:800;margin-bottom:var(--spacing-lg);background:linear-gradient(135deg,var(--color-text-primary) 0,var(--color-text-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.LawsOfUX_heroDescription___4JYF{font-size:1.125rem;line-height:1.7;color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl)}.LawsOfUX_searchContainer__ksFJg{position:relative;max-width:500px;margin:0 auto}.LawsOfUX_searchIcon__wX9ax{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--color-text-tertiary)}.LawsOfUX_searchInput__Zuu_A{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) * 3);font-size:1rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background-color:var(--color-background-alt);color:var(--color-text-primary);transition:var(--transition-fast)}.LawsOfUX_searchInput__Zuu_A:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-subtle)}.LawsOfUX_searchInput__Zuu_A::placeholder{color:var(--color-text-tertiary)}.LawsOfUX_filters__Rp8Hs{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);max-width:800px;margin:0 auto}.LawsOfUX_filterPill__BY2d4{padding:var(--spacing-sm) var(--spacing-lg);font-size:.875rem;font-weight:600;border:2px solid;border-radius:var(--radius-full);cursor:pointer;transition:var(--transition-fast);background:transparent}.LawsOfUX_filterPill__BY2d4:hover{transform:scale(1.05)}.LawsOfUX_filterPillActive___QDF0{box-shadow:var(--shadow-md)}.LawsOfUX_main__406Ya{padding:var(--spacing-2xl) var(--spacing-xl);max-width:1400px;margin:0 auto}.LawsOfUX_categorySection__vQeQm{margin-bottom:var(--spacing-4xl)}.LawsOfUX_categoryHeader__80_EJ{display:flex;align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--color-border)}.LawsOfUX_categoryBar__aPq5i{width:4px;height:60px;border-radius:var(--radius-full);flex-shrink:0}.LawsOfUX_categoryInfo__kifv1{flex:1}.LawsOfUX_categoryTitle__8bL88{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-xs);display:flex;align-items:center;gap:var(--spacing-md)}.LawsOfUX_categoryCount__c8LN0{font-size:.875rem;font-weight:500;color:var(--color-text-tertiary);padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--color-surface-hover);border-radius:var(--radius-full)}.LawsOfUX_categoryDescription__HRNhl{font-size:1rem;color:var(--color-text-secondary);line-height:1.6}.LawsOfUX_grid__VC9kO{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}@media (min-width:640px){.LawsOfUX_grid__VC9kO{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.LawsOfUX_grid__VC9kO{grid-template-columns:repeat(3,1fr)}}.LawsOfUX_card__U5cg7{background-color:var(--color-background-alt);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:var(--transition-base);cursor:pointer}.LawsOfUX_card__U5cg7:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-hover)}.LawsOfUX_cardImage__uCVPB{width:100%;height:180px;overflow:hidden}.LawsOfUX_cardImage__uCVPB img{width:100%;height:100%;object-fit:cover;transition:var(--transition-slow)}.LawsOfUX_card__U5cg7:hover .LawsOfUX_cardImage__uCVPB img{transform:scale(1.05)}.LawsOfUX_cardContent__kSNIZ{padding:var(--spacing-lg)}.LawsOfUX_cardTag__17J1Y{display:inline-block;padding:var(--spacing-xs) var(--spacing-sm);font-size:.75rem;font-weight:600;color:#fff;border-radius:var(--radius-full);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.5px}.LawsOfUX_cardTitle__Xq6P_{font-size:1.125rem;font-weight:700;margin-bottom:var(--spacing-sm);color:var(--color-text-primary)}.LawsOfUX_cardDescription__XolRi{font-size:.9375rem;line-height:1.6;color:var(--color-text-secondary)}.LawsOfUX_noResults__G5Oo1{text-align:center;padding:var(--spacing-4xl);color:var(--color-text-tertiary);font-size:1.125rem}.LawsOfUX_footer__tYXh5{text-align:center;padding:var(--spacing-2xl) var(--spacing-xl);border-top:1px solid var(--color-border);color:var(--color-text-tertiary);font-size:.875rem}@media (max-width:640px){.LawsOfUX_header__SDu10{padding:var(--spacing-sm) var(--spacing-md)}.LawsOfUX_hero__haecP{padding:var(--spacing-2xl) var(--spacing-md) var(--spacing-xl)}.LawsOfUX_filters__Rp8Hs{padding:var(--spacing-md)}.LawsOfUX_main__406Ya{padding:var(--spacing-xl) var(--spacing-md)}.LawsOfUX_categoryHeader__80_EJ{flex-direction:row;align-items:stretch}.LawsOfUX_categoryBar__aPq5i{height:auto;min-height:60px}}.LawsOfUX_modalOverlay__OL5Ik{position:fixed;inset:0;background-color:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--spacing-xl);animation:LawsOfUX_fadeIn__N6oKH .2s ease-out}@keyframes LawsOfUX_fadeIn__N6oKH{0%{opacity:0}to{opacity:1}}.LawsOfUX_modal__e96Iy{position:relative;background-color:var(--color-background-alt);border-radius:var(--radius-xl);max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-xl);animation:LawsOfUX_slideUp__xl_db .3s ease-out}@keyframes LawsOfUX_slideUp__xl_db{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.LawsOfUX_modalClose__DnPtw{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-fast);z-index:10}.LawsOfUX_modalClose__DnPtw:hover{background-color:var(--color-surface-hover);color:var(--color-text-primary)}.LawsOfUX_modalContent__Ydinr{padding:var(--spacing-2xl)}.LawsOfUX_modalTitle__qDVpf{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md);padding-right:var(--spacing-3xl)}.LawsOfUX_modalTag__4VuH7{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);font-size:.75rem;font-weight:600;color:#fff;border-radius:var(--radius-full);margin-bottom:var(--spacing-lg);text-transform:uppercase;letter-spacing:.5px}.LawsOfUX_modalSummary__YHf6M{font-size:1.125rem;line-height:1.6;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.LawsOfUX_modalImage__E4BYx{width:100%;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--spacing-xl)}.LawsOfUX_modalImage__E4BYx img{width:100%;height:auto;display:block}.LawsOfUX_modalDescription__YY3NP{font-size:1rem;line-height:1.7;color:var(--color-text-primary);margin-bottom:var(--spacing-xl)}.LawsOfUX_modalInsight__WBdK2{padding:var(--spacing-lg);background-color:var(--color-surface);border-left:4px solid var(--color-accent);border-radius:var(--radius-sm);margin-bottom:var(--spacing-xl);font-size:.9375rem;line-height:1.6;color:var(--color-text-secondary)}.LawsOfUX_modalInsight__WBdK2 strong{color:var(--color-text-primary)}.LawsOfUX_modalOrigins__l_DGB{padding-top:var(--spacing-lg);border-top:1px solid var(--color-border)}.LawsOfUX_modalOrigins__l_DGB h3{font-size:1.125rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.LawsOfUX_modalOrigins__l_DGB p{font-size:.9375rem;line-height:1.7;color:var(--color-text-secondary)}.LawsOfUX_modalExamples__PgkX9{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);margin-bottom:var(--spacing-xl)}.LawsOfUX_modalExamples__PgkX9 h3{font-size:1.125rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.LawsOfUX_examplesList__8ak4U{display:flex;flex-direction:column;gap:var(--spacing-sm)}.LawsOfUX_exampleItem__Y_w4X{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border)}.LawsOfUX_exampleNumber__wDaPj{display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;background-color:#3B82F6;color:#fff;font-size:.875rem;font-weight:600;border-radius:50%;flex-shrink:0}.LawsOfUX_exampleItem__Y_w4X p{font-size:.9375rem;line-height:1.6;color:var(--color-text-primary);margin:0;padding-top:2px}.LawsOfUX_modalTakeaways__Q04oG{margin-bottom:var(--spacing-xl)}.LawsOfUX_modalTakeaways__Q04oG h3{font-size:1.125rem;font-weight:700;color:var(--color-text-primary);margin-bottom:var(--spacing-md)}.LawsOfUX_takeawaysBox__QQ3dZ{background-color:#ecfdf5;border:1px solid #a7f3d0;border-radius:var(--radius-md);padding:var(--spacing-lg) var(--spacing-xl)}[data-theme=dark] .LawsOfUX_takeawaysBox__QQ3dZ{background-color:rgba(16,185,129,.1);border-color:rgba(16,185,129,.3)}.LawsOfUX_takeawaysBox__QQ3dZ ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-md)}.LawsOfUX_takeawaysBox__QQ3dZ li{position:relative;padding-left:var(--spacing-xl);font-size:.9375rem;line-height:1.6;color:#047857}[data-theme=dark] .LawsOfUX_takeawaysBox__QQ3dZ li{color:#6ee7b7}.LawsOfUX_takeawaysBox__QQ3dZ li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background-color:#10b981;border-radius:50%}@media (max-width:640px){.LawsOfUX_modalOverlay__OL5Ik{padding:var(--spacing-md);align-items:flex-end}.LawsOfUX_modal__e96Iy{max-height:85vh;border-radius:var(--radius-xl) var(--radius-xl) 0 0}.LawsOfUX_modalContent__Ydinr{padding:var(--spacing-xl)}.LawsOfUX_modalTitle__qDVpf{font-size:1.5rem}}