.PatternCard{background-color:var(--color-card-bg);border-radius:var(--radius-card);padding:var(--spacing-4);box-shadow:var(--shadow-lg);cursor:pointer}.PatternCard__header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3)}.PatternCard__featuredImage{position:relative;width:100%;height:180px;border-radius:var(--radius-card);overflow:hidden;margin-top:var(--spacing-4)}.PatternCard__image{transition:transform .3s ease}.PatternCard__image:hover{transform:scale(1.05)}.PatternCard__side-by-side{display:flex;align-items:center;gap:var(--spacing-1)}.PatternCard__divider{width:2px;height:24px;background-color:var(--color-border);margin:0 var(--spacing-2);border-radius:var(--radius-full)}.PatternCard__footer{display:flex;align-items:center;justify-content:space-between}:root{--font-sans:"Work Sans","Lato",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem;--font-size-6xl:3.75rem;--font-size-7xl:4.5rem;--font-size-8xl:6rem;--font-size-9xl:8rem;--line-height-none:1;--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0em;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--font-weight-thin:100;--font-weight-extralight:200;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--text-color-primary:var(--color-text-primary);--text-color-secondary:var(--color-text-secondary);--text-color-muted:var(--color-text-muted);--text-color-inverse:var(--color-text-inverse);--text-heading-1:var(--font-size-4xl);--text-heading-2:var(--font-size-3xl);--text-heading-3:var(--font-size-2xl);--text-heading-4:var(--font-size-xl);--text-body:var(--font-size-base);--text-body-sm:var(--font-size-sm);--text-caption:var(--font-size-xs)}.typography__h1{font-size:var(--font-size-4xl);line-height:var(--line-height-tight);line-height:1.2}.typography__h1,.typography__h2{font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight)}.typography__h2{font-size:var(--font-size-3xl);line-height:var(--line-height-tight);line-height:1.3}.typography__h3{font-size:var(--font-size-2xl);line-height:var(--line-height-tight);line-height:1.4}.typography__h3,.typography__h4{font-weight:var(--font-weight-semibold)}.typography__h4{font-size:var(--font-size-xl);line-height:var(--line-height-normal);line-height:1.4}.typography__body{font-weight:var(--font-weight-normal);line-height:1.5}.typography__bodySmall{font-size:var(--font-size-sm);line-height:var(--line-height-tight);font-weight:var(--font-weight-normal);line-height:1.4}.typography__extraSmall{font-size:var(--font-size-xs);line-height:var(--line-height-normal)}.typography__light{color:var(--color-text-muted,#3d4451)}.typography__primary{color:var(--color-primary-500,#8b5cf6)}.typography__weight__normal{font-weight:400}.typography__weight__medium{font-weight:500}.typography__weight__semibold{font-weight:600}.typography__weight__bold{font-weight:700}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-4);font-family:var(--font-sans);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-wide);border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;transition:all .15s ease}.button:focus-visible{outline:none;box-shadow:var(--ring-primary)}.button--filled{background:var(--color-accent);color:#fff}.button--filled:hover:not(:disabled){background-color:var(--color-primary-hover)}.button--filled:active:not(:disabled){background-color:var(--color-primary-active)}.button--outlined{background-color:transparent;color:var(--color-text-secondary);border-color:var(--color-border)}.button--outlined:hover:not(:disabled){background-color:rgba(139,92,246,.08)}.button--outlined:active:not(:disabled){background-color:rgba(139,92,246,.14)}.button--text{background-color:transparent;color:var(--color-primary);border-color:transparent}.button--text:hover:not(:disabled){background-color:rgba(139,92,246,.08)}.button--text:active:not(:disabled){background-color:rgba(139,92,246,.14)}.button--rounded{border-radius:var(--radius-full);padding-left:var(--spacing-3);padding-right:var(--spacing-3)}.button--disabled,.button:disabled{opacity:.4;cursor:not-allowed!important}.button__icon{width:16px;height:16px;flex-shrink:0}.badge{display:inline-flex;align-items:center;gap:var(--spacing-1);justify-content:center;border-radius:var(--radius-md);font-family:var(--font-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-none);border:1px solid transparent;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;--_badge-color:var(--color-primary);background-color:color-mix(in srgb,var(--_badge-color) 12%,var(--color-surface));color:var(--_badge-color);border-color:color-mix(in srgb,var(--_badge-color) 25%,var(--color-surface))}.badge p{margin:0;padding:0;line-height:inherit;color:inherit}.badge.small{padding:var(--spacing-0-5) var(--spacing-1-5);font-size:var(--font-size-xs)}.badge.medium,.badge:not(.small):not(.large){padding:var(--spacing-1) var(--spacing-2-5);font-size:var(--font-size-sm)}.badge.large{padding:var(--spacing-1-5) var(--spacing-3);font-size:var(--font-size-base)}.badge.rounded{border-radius:var(--radius-full)}.badge.primary{--_badge-color:var(--color-primary-400)}.badge.success{--_badge-color:var(--color-green-400)}.badge.warning{--_badge-color:var(--color-gold-400)}.badge.danger{--_badge-color:var(--color-pink);background-color:var(--color-pink-glow);border-color:var(--color-pink-glow)}.badge.info{--_badge-color:var(--color-cyan-400)}.badge.faang{--_badge-color:var(--color-badge-faang)}.badge.outlined{border-color:var(--color-border)}.badge.outlined,.badge.outlined.selected{background-color:transparent;color:var(--color-text-primary)}.badge.outlined.selected{border-color:var(--_badge-color)}.badge.transparent,.badge.transparent.selected{background-color:transparent;color:var(--_badge-color);border-color:transparent}.badge__icon-wrapper{position:relative;display:flex;align-items:center;gap:var(--spacing-2)}.badge__status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.badge.selectable{cursor:pointer}.badge.selectable:hover{background-color:color-mix(in srgb,var(--_badge-color) 20%,var(--color-surface))}.badge.selectable:active{transform:scale(var(--scale-active))}.badge.selected{background-color:var(--_badge-color);color:var(--color-text-inverse);border-color:var(--_badge-color)}.badge.disabled{opacity:var(--opacity-disabled);pointer-events:none}:root{--shadow-xs:0 1px 2px 0 rgba(0,0,0,.05);--shadow-sm:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--shadow-2xl:0 25px 50px -12px rgba(0,0,0,.25);--shadow-inner:inset 0 2px 4px 0 rgba(0,0,0,.06);--shadow-none:0 0 #0000;--glow-primary:0 0 20px rgba(99,102,241,.3);--glow-primary-lg:0 0 40px rgba(99,102,241,.4);--glow-success:0 0 20px rgba(16,185,129,.3);--glow-warning:0 0 20px rgba(245,158,11,.3);--glow-error:0 0 20px rgba(239,68,68,.3);--ring-primary:0 0 0 3px rgba(99,102,241,.1);--ring-success:0 0 0 3px rgba(16,185,129,.1);--ring-warning:0 0 0 3px rgba(245,158,11,.1);--ring-error:0 0 0 3px rgba(239,68,68,.1);--backdrop-blur:blur(8px);--backdrop-blur-sm:blur(4px);--backdrop-blur-lg:blur(16px);--opacity-disabled:0.5;--opacity-loading:0.7;--opacity-hover:0.9;--transition-fast:150ms ease-in-out;--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--scale-hover:1.02;--scale-active:0.98}.divider{height:1px;background-color:var(--color-border);margin:var(--divider-margin,var(--spacing-4)) 0}.PatternsPage{overflow:auto}.PatternsPage__hero{background-image:url(/images/system-architecture-outline.svg);background-size:contain;background-repeat:no-repeat;background-position:100%;background-color:var(--color-card-bg);margin:var(--spacing-4);border-radius:var(--radius-card);box-shadow:var(--shadow-sm);padding:var(--spacing-8)}.PatternsPage__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.PatternsPage__grid{margin:var(--spacing-4)}.input-container{border:1px solid var(--color-border);border-radius:7px;font-size:12.5px;color:var(--color-text-primary);transition:all .2s;background-color:var(--color-bg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2);padding:var(--spacing-0) var(--spacing-2)}.input-container .input-container__left{display:flex;align-items:center;gap:var(--spacing-1);width:100%}.input-container .input-field{padding:.5rem;width:100%;background:transparent;color:inherit;font-size:inherit;font-family:var(--font-sans);outline:none;border:none;box-shadow:none}.input-container .input-field::placeholder{color:var(--color-text-muted)}.input-container .input-field--clickable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-container__variant-default{border:1px solid var(--color-border);background-color:var(--color-bg)}.input-container__variant-outline{border:1px solid var(--color-border);background-color:transparent}.input-container__variant-transparent{border:none;background-color:transparent}.input-container__radius-sm{border-radius:var(--radius-sm)}.input-container__radius-md{border-radius:var(--radius-md)}.input-container__radius-lg{border-radius:var(--radius-lg)}.input-container__radius-full{border-radius:var(--radius-full)}.PatternGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:20px;gap:20px}