@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-primary:#0f172a;--color-primary-hover:#1e293b;--color-primary-active:#334155;--color-bg-app:#f8fafc;--color-surface:#fff;--color-surface-alt:#f1f5f9;--color-text-primary:#0f172a;--color-text-secondary:#64748b;--color-text-disabled:#94a3b8;--color-text-inverse:#fff;--color-border:#e2e8f0;--color-border-focus:#0f172a;--color-success:#10b981;--color-success-surface:#d1fae5;--color-warning:#f59e0b;--color-warning-surface:#fef3c7;--color-danger:#ef4444;--color-danger-surface:#fee2e2;--color-info:#3b82f6;--color-info-surface:#dbeafe;--color-primary-surface:color-mix(in srgb, var(--color-primary), transparent 90%);--color-primary-faded:color-mix(in srgb, var(--color-primary), transparent 95%);--color-creational:#7c3aed;--color-creational-surface:#ede9fe;--color-structural:#0ea5e9;--color-structural-surface:#e0f2fe;--color-behavioral:#059669;--color-behavioral-surface:#d1fae5;--color-web-architectural:#f59e0b;--color-web-architectural-surface:#fef3c7;--font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.25rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.5rem;--font-size-4xl:3rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-snug:1.3;--line-height-normal:1.5;--line-height-relaxed:1.6;--letter-spacing-tight:-.02em;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--shadow-focus:0 0 0 2px #fff, 0 0 0 4px #0f172a;--duration-fast:.15s;--duration-normal:.25s;--duration-slow:.35s;--ease-default:cubic-bezier(.4, 0, .2, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--container-max:1280px;--sidebar-width:280px;--syntax-keyword:#7c3aed;--syntax-string:#059669;--syntax-comment:#64748b;--syntax-number:#d97706;--syntax-function:#2563eb;--syntax-class:#dc2626;--syntax-variable:#334155;--syntax-operator:#475569}[data-theme=dark]{--color-primary:#f8fafc;--color-primary-hover:#f1f5f9;--color-primary-active:#e2e8f0;--color-bg-app:#020617;--color-surface:#0f172a;--color-surface-alt:#1e293b;--color-text-primary:#f8fafc;--color-text-secondary:#94a3b8;--color-text-disabled:#475569;--color-text-inverse:#0f172a;--color-border:#1e293b;--color-border-focus:#f8fafc;--color-success-surface:#10b98126;--color-warning-surface:#f59e0b26;--color-danger-surface:#ef444426;--color-info-surface:#3b82f626;--color-creational-surface:#7c3aed33;--color-structural-surface:#0ea5e933;--color-behavioral-surface:#05966933;--color-web-architectural-surface:#f59e0b33;--shadow-sm:0 1px 3px #0006, 0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #00000080, 0 2px 4px -1px #0006;--shadow-lg:0 10px 15px -3px #0009, 0 4px 6px -2px #00000080;--shadow-focus:0 0 0 2px #020617, 0 0 0 4px #f8fafc;--syntax-keyword:#c084fc;--syntax-string:#86efac;--syntax-comment:#94a3b8;--syntax-number:#fcd34d;--syntax-function:#67e8f9;--syntax-class:#fca5a5;--syntax-variable:#e2e8f0;--syntax-operator:#94a3b8}@media (prefers-reduced-motion:reduce){:root{--duration-fast:0s;--duration-normal:0s;--duration-slow:0s}}.app-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;height:64px;transition:background var(--duration-normal), border-color var(--duration-normal);align-items:center;display:flex;position:sticky;top:0}.app-header__inner{justify-content:space-between;align-items:center;width:100%;display:flex}.app-header__logo{align-items:center;gap:var(--space-2);font-weight:var(--font-weight-bold);font-size:var(--font-size-lg);color:var(--color-text-primary);cursor:pointer;text-decoration:none;display:flex}.app-header__logo:hover{text-decoration:none}.app-header__logo-accent{color:#818cf8}.app-header__actions{align-items:center;gap:var(--space-4);display:flex}.theme-switcher{border-radius:var(--radius-md);width:36px;height:36px;color:var(--color-text-secondary);padding:0}.theme-switcher:hover{background:var(--color-surface-alt);color:var(--color-text-primary)}.hero{padding:var(--space-12) 0;color:#fff;transition:background var(--duration-normal), color var(--duration-normal);background:linear-gradient(135deg,#0f172a 0%,#1e293b 60%,#0f172a 100%);position:relative;overflow:hidden}[data-theme=dark] .hero{background:linear-gradient(135deg,#020617 0%,#0f172a 60%,#020617 100%)}.hero:before{content:"";pointer-events:none;background:radial-gradient(at 70%,#7c3aed26 0%,#0000 60%);position:absolute;inset:0}.hero__inner{justify-content:space-between;align-items:center;gap:var(--space-8);display:flex;position:relative}.hero__text{flex:1}.hero__eyebrow{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:#fffc;letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--space-4);background:#ffffff1a;border:1px solid #ffffff26;display:inline-flex}.hero__title{font-size:clamp(2rem, 5vw, var(--font-size-3xl));font-weight:var(--font-weight-bold);color:#fff;line-height:var(--line-height-tight);margin-bottom:var(--space-4)}.hero__title-accent{color:#818cf8}.hero__subtitle{font-size:var(--font-size-lg);color:#ffffffb3;max-width:560px;line-height:var(--line-height-relaxed);margin-bottom:var(--space-8)}.hero__stats{gap:var(--space-8);display:flex}.hero__stat{flex-direction:column;display:flex}.hero__stat strong{font-size:var(--font-size-2xl);color:#fff;font-weight:var(--font-weight-bold);line-height:1}.hero__stat span{font-size:var(--font-size-sm);color:#fff9;margin-top:2px}.hero__progress{flex-shrink:0;justify-content:center;align-items:center;width:160px;height:160px;display:flex;position:relative}.hero__ring{width:160px;height:160px}.hero__ring-bg{stroke:#ffffff26}.hero__ring-fill{stroke:#818cf8}.hero__ring-text{text-align:center;position:absolute}.hero__ring-text strong{font-size:var(--font-size-xl);color:#fff;font-weight:var(--font-weight-bold);display:block}.hero__ring-text span{font-size:var(--font-size-xs);color:#fff9;text-transform:uppercase;letter-spacing:.05em}.catalogue-controls{padding:var(--space-8) 0 var(--space-6);gap:var(--space-4);flex-direction:column;display:flex}.catalogue-content{padding-bottom:var(--space-16)}.search-bar{width:100%;max-width:560px}.search-bar__wrapper{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:0 var(--space-3);box-shadow:var(--shadow-sm);transition:border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);align-items:center;display:flex}.search-bar__wrapper:focus-within{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.search-bar__icon{color:var(--color-text-disabled);flex-shrink:0;display:flex}.search-bar__input{padding:var(--space-3) var(--space-2);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);background:0 0;border:none;outline:none;flex:1}.search-bar__input::placeholder{color:var(--color-text-disabled)}.search-bar__clear{cursor:pointer;color:var(--color-text-disabled);padding:var(--space-1);border-radius:var(--radius-sm);background:0 0;border:none;display:flex}.search-bar__clear:hover{color:var(--color-text-primary);background:var(--color-surface-alt)}.search-bar__count{margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary)}.category-filter{gap:var(--space-2);flex-wrap:wrap;display:flex}.category-filter__tab{border:1.5px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-4);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;color:var(--color-text-secondary);transition:all var(--duration-fast) var(--ease-default);background:0 0}.category-filter__tab:hover{border-color:var(--color-primary);color:var(--color-primary)}.category-filter__tab[aria-selected=true]{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.category-filter__tab--creational[aria-selected=true],.category-filter__tab--structural[aria-selected=true],.category-filter__tab--behavioral[aria-selected=true],.category-filter__tab--web-architectural[aria-selected=true]{color:#fff}.category-filter__tab--creational[aria-selected=true]{background:var(--color-creational);border-color:var(--color-creational)}.category-filter__tab--structural[aria-selected=true]{background:var(--color-structural);border-color:var(--color-structural)}.category-filter__tab--behavioral[aria-selected=true]{background:var(--color-behavioral);border-color:var(--color-behavioral)}.category-filter__tab--web-architectural[aria-selected=true]{background:var(--color-web-architectural);border-color:var(--color-web-architectural)}.category-section{margin-bottom:var(--space-12)}.category-section__header{align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap;display:flex}.category-section__icon{border-radius:var(--radius-lg);color:#fff;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.category-section__icon--creational{background:var(--color-creational)}.category-section__icon--structural{background:var(--color-structural)}.category-section__icon--behavioral{background:var(--color-behavioral)}.category-section__icon--web-architectural{background:var(--color-web-architectural)}.category-section__meta{flex:1;min-width:200px}.category-section__title{font-size:var(--font-size-xl);margin-bottom:var(--space-1)}.category-section__description{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.category-section__progress{flex-shrink:0;min-width:200px}.progress-bar-container{gap:var(--space-1);flex-direction:column;display:flex}.progress-bar-track{background:var(--color-surface-alt);border-radius:var(--radius-full);height:8px;overflow:hidden}.progress-bar-fill{border-radius:var(--radius-full);height:100%;transition:width var(--duration-slow) var(--ease-out);background:var(--color-primary)}.progress-bar-fill--creational{background:var(--color-creational)}.progress-bar-fill--structural{background:var(--color-structural)}.progress-bar-fill--behavioral{background:var(--color-behavioral)}.progress-bar-fill--web-architectural{background:var(--color-web-architectural)}.progress-bar-fill--complete{background:var(--color-success)}.progress-bar-label{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.pattern-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=640px){.pattern-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.pattern-grid{grid-template-columns:repeat(3,1fr)}}.pattern-card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);cursor:pointer;transition:box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);gap:var(--space-3);flex-direction:column;display:flex;position:relative}.pattern-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary);transform:translateY(-2px)}.pattern-card:focus-visible{box-shadow:var(--shadow-focus);outline:none}.pattern-card--learned{border-color:var(--color-success)}.pattern-card__header{justify-content:space-between;align-items:center;display:flex}.pattern-card__learned-badge{color:var(--color-success);display:flex}.pattern-card__name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.pattern-card__intent{font-size:var(--font-size-sm);color:var(--color-text-secondary);flex:1}.pattern-card__footer{padding-top:var(--space-3);border-top:1px solid var(--color-border);justify-content:space-between;align-items:center;margin-top:auto;display:flex}.pattern-card__compare-btn{border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:4px var(--space-2);font-size:var(--font-size-xs);cursor:pointer;font-family:var(--font-family);color:var(--color-text-secondary);transition:all var(--duration-fast);background:0 0;align-items:center;gap:4px;display:flex}.pattern-card__compare-btn:hover,.pattern-card__compare-btn--active{background:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.pattern-card__arrow{color:var(--color-text-disabled)}.empty-state{text-align:center;padding:var(--space-16) var(--space-4);align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.empty-state__title{font-size:var(--font-size-xl)}.empty-state__message{color:var(--color-text-secondary);max-width:360px}.pattern-header{background:var(--color-primary);color:#fff;padding:var(--space-8) 0}.pattern-header__breadcrumb{align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);display:flex}.pattern-header__back{align-items:center;gap:var(--space-1);display:flex;color:#ffffffe6!important}.pattern-header__back:hover{color:#fff;background:#ffffff26}.pattern-header__sep{color:#ffffff80}.pattern-header__title{color:#fff;margin-bottom:var(--space-2);font-size:clamp(1.5rem,4vw,2.5rem)}.pattern-header__intent{font-size:var(--font-size-lg);color:#fffc;max-width:640px;margin-bottom:var(--space-6)}.pattern-header__actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.pattern-header__learned--active{background:var(--color-success);border-color:var(--color-success);color:#fff}.pattern-header__compare--active{color:#fff;background:#fff3}[data-theme=dark] .pattern-header{background:var(--color-surface);color:var(--color-text-primary);border-bottom:1px solid var(--color-border)}[data-theme=dark] .pattern-header__title{color:var(--color-text-primary)}[data-theme=dark] .pattern-header__intent{color:var(--color-text-secondary)}[data-theme=dark] .pattern-header__back{color:var(--color-primary)!important}[data-theme=dark] .pattern-header__sep{color:var(--color-text-disabled)}.detail-layout.container{padding-top:var(--space-16);gap:var(--space-8);flex-direction:column;display:flex}@media (width>=1024px){.detail-layout{gap:var(--space-12);flex-direction:row}}.detail-layout__description,.detail-layout__interactive{flex:1;min-width:0}.detail-layout__diagram-and-steps{gap:var(--space-8);flex-direction:column;display:flex}@media (width>=1024px){.detail-layout__diagram-and-steps{align-items:stretch;gap:var(--space-12);flex-direction:row}}.detail-section{margin-bottom:var(--space-10)}.detail-section__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4);align-items:center;gap:var(--space-2);display:flex}.analogy-section__card{background:var(--color-warning-surface);border-radius:var(--radius-lg);padding:var(--space-6);gap:var(--space-4);border:1px solid #f59e0b4d;display:flex}.analogy-section__icon{color:var(--color-warning);flex-shrink:0;margin-top:2px}.analogy-section__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-warning);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-2)}.analogy-section__text{color:var(--color-text-primary);opacity:.9;line-height:var(--line-height-relaxed)}.participants-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.participant-card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);border-left:4px solid var(--color-primary)}.participant-card__name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-2);font-family:JetBrains Mono,monospace}.participant-card__role{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.step-list{gap:var(--space-2);flex-direction:column;list-style:none;display:flex}.step-item{border-radius:var(--radius-md);border:1px solid var(--color-border);overflow:hidden}.step-item--active{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.step-item__btn{align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);cursor:pointer;font-family:var(--font-family);text-align:left;color:var(--color-text-primary);transition:background var(--duration-fast);background:0 0;border:none;display:flex}.step-item__btn:hover{background:var(--color-surface-alt)}.step-item--active .step-item__btn{background:var(--color-primary);color:var(--color-text-inverse)}.step-item__number{background:var(--color-primary);width:28px;height:28px;color:var(--color-text-inverse);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.step-item--active .step-item__number{background:var(--color-text-inverse);color:var(--color-primary)}.step-item__title{font-weight:var(--font-weight-medium);font-size:var(--font-size-sm)}.step-item__description{padding:var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);border-top:1px solid var(--color-border)}.diagram-wrapper{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}.diagram-svg{width:100%;height:auto;max-height:300px}.diagram-controls{gap:var(--space-2);margin-top:var(--space-3);justify-content:center;display:flex}.diagram-section__header{justify-content:space-between;align-items:center;margin-bottom:0;display:flex}.diagram-section__step-counter{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-variant-numeric:tabular-nums}.diagram-reduced-motion-note{font-size:var(--font-size-xs);color:var(--color-text-disabled);margin-top:var(--space-2);text-align:center}.pseudocode-section__header{margin-bottom:var(--space-3);justify-content:space-between;align-items:center;display:flex}.pseudocode-section__wrapper{border-radius:var(--radius-lg);overflow:hidden}.usage-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:1fr;display:grid}@media (width>=640px){.usage-grid{grid-template-columns:1fr 1fr}}.usage-card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}.usage-card--use{border-top:4px solid var(--color-success)}.usage-card--avoid{border-top:4px solid var(--color-danger)}.usage-card__title{align-items:center;gap:var(--space-2);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-4);display:flex}.usage-list{gap:var(--space-3);flex-direction:column;list-style:none;display:flex}.usage-list__item{padding-left:var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);position:relative}.usage-list__item:before{content:"";border-radius:50%;width:8px;height:8px;position:absolute;top:8px;left:0}.usage-list__item--use:before{background:var(--color-success)}.usage-list__item--avoid:before{background:var(--color-danger)}.related-patterns__title{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin-bottom:var(--space-3)}.related-patterns__list{gap:var(--space-2);flex-wrap:wrap;display:flex}.related-pattern-chip{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:var(--font-size-sm);cursor:pointer;font-family:var(--font-family);color:var(--color-text-primary);transition:all var(--duration-fast);display:inline-flex}.related-pattern-chip:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.pattern-navigation{border-top:1px solid var(--color-border);padding:var(--space-8) 0}.pattern-navigation__inner{justify-content:space-between;gap:var(--space-4);display:flex}.pattern-navigation__side{flex:1}.pattern-navigation__side--right{justify-content:flex-end;display:flex}.pattern-nav-btn{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-6);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font-family);color:var(--color-text-primary);transition:all var(--duration-fast);max-width:300px;display:flex}.pattern-nav-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.pattern-nav-btn--next{flex-direction:row-reverse}.pattern-nav-btn__text{flex-direction:column;display:flex}.pattern-nav-btn__direction{font-size:var(--font-size-xs);color:var(--color-text-disabled);text-transform:uppercase;letter-spacing:.05em}.pattern-nav-btn__name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.compare-fab{bottom:var(--space-6);right:var(--space-6);background:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-full);padding:var(--space-3) var(--space-6);align-items:center;gap:var(--space-2);font-family:var(--font-family);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;box-shadow:var(--shadow-lg);z-index:100;transition:transform var(--duration-fast), background var(--duration-fast);border:none;display:flex;position:fixed}.compare-fab:hover{background:var(--color-primary-hover);transform:translateY(-2px)}.compare-fab:focus-visible{box-shadow:var(--shadow-focus);outline:none}.compare-panel-overlay{z-index:200;background:#00000080;justify-content:flex-end;display:flex;position:fixed;inset:0}.compare-panel{background:var(--color-surface);flex-direction:column;width:100%;max-width:900px;height:100%;display:flex;overflow-y:auto}.compare-panel__header{padding:var(--space-6);border-bottom:1px solid var(--color-border);background:var(--color-surface);z-index:10;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.compare-panel__title{align-items:center;gap:var(--space-2);font-size:var(--font-size-lg);display:flex}.compare-panel__header-actions{gap:var(--space-2);display:flex}.compare-panel__body{flex:1;overflow-x:auto}.compare-table{min-width:640px}.compare-row{border-bottom:1px solid var(--color-border);grid-template-columns:140px repeat(3,1fr);display:grid}.compare-row--header{background:var(--color-surface-alt)}.compare-row__label{padding:var(--space-4);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}.compare-row__value{padding:var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);border-left:1px solid var(--color-border);line-height:var(--line-height-relaxed)}.compare-row__value--header{flex-direction:column;display:flex}.compare-row__pattern-name{margin-bottom:var(--space-2);justify-content:space-between;align-items:center;display:flex}.compare-row__link{cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);color:var(--color-primary);background:0 0;border:none;text-decoration:underline}.compare-row__link:hover{color:var(--color-primary-hover)}.compare-row__remove{cursor:pointer;color:var(--color-text-disabled);border-radius:var(--radius-sm);background:0 0;border:none;padding:2px;display:flex}.compare-row__remove:hover{color:var(--color-danger);background:var(--color-danger-surface)}.compare-list{gap:var(--space-2);padding-left:var(--space-3);flex-direction:column;list-style:none;display:flex}.compare-list li:before{content:"• ";color:var(--color-primary)}.compare-list--avoid li:before{color:var(--color-danger)}@media (width<=639px){.hero__inner{flex-direction:column}.hero__progress{display:none}.hero__stats{gap:var(--space-4)}.category-section__header,.pattern-navigation__inner{flex-direction:column}.compare-panel{border-radius:var(--radius-xl) var(--radius-xl) 0 0;max-width:100%;height:85vh;margin-top:auto}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-family);background-color:var(--color-bg-app);color:var(--color-text-primary);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{color:inherit;font-family:inherit;font-size:inherit}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{line-height:var(--line-height-tight);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}p{color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.btn{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-md);font-family:var(--font-family);font-weight:var(--font-weight-medium);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default), opacity var(--duration-fast) var(--ease-default);white-space:nowrap;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;text-decoration:none;display:inline-flex}.btn:focus-visible{box-shadow:var(--shadow-focus);outline:none}.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.btn:active:not(:disabled){transform:scale(.98)}.btn-primary{background:var(--color-primary);color:var(--color-text-inverse)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--color-surface-alt)}.btn-ghost{color:var(--color-text-primary);background:0 0}.btn-ghost:hover{background:var(--color-surface-alt)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover{background:#dc2626}.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--font-size-sm)}.btn-md{height:40px;padding:0 var(--space-4);font-size:var(--font-size-base)}.btn-lg{height:48px;padding:0 var(--space-6);font-size:var(--font-size-base)}.btn-full{width:100%}.badge{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);letter-spacing:.03em;text-transform:uppercase;display:inline-flex}.badge-creational{background:var(--color-creational-surface);color:var(--color-creational)}.badge-structural{background:var(--color-structural-surface);color:var(--color-structural)}.badge-behavioral{background:var(--color-behavioral-surface);color:var(--color-behavioral)}.badge-web-architectural{background:var(--color-web-architectural-surface);color:var(--color-web-architectural)}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.container{width:100%;max-width:var(--container-max);padding:0 var(--space-4);margin:0 auto}@media (width>=768px){.container{padding:0 var(--space-8)}}@media (width>=1280px){.container{padding:0 var(--space-8)}}.section{padding:var(--space-12) 0}code,pre{font-family:JetBrains Mono,Fira Code,monospace;font-size:var(--font-size-sm)}pre.hljs{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-surface-alt);color:var(--color-text-primary);max-height:480px;transition:background var(--duration-normal), color var(--duration-normal);border:1px solid var(--color-border);line-height:1.6;overflow:auto}.hljs-keyword{color:var(--syntax-keyword);font-weight:500}.hljs-string{color:var(--syntax-string)}.hljs-comment{color:var(--syntax-comment);font-style:italic}.hljs-number{color:var(--syntax-number)}.hljs-function{color:var(--syntax-function)}.hljs-class{color:var(--syntax-class)}.hljs-variable{color:var(--syntax-variable)}.hljs-operator{color:var(--syntax-operator)}.hljs-title{color:var(--syntax-function)}.hljs-params{color:var(--syntax-variable)}.hljs-built_in{color:var(--syntax-class)}.hljs-type{color:var(--syntax-keyword)}.hljs-literal{color:var(--syntax-number)}.diagram-node{transition:opacity var(--duration-normal) var(--ease-default), fill var(--duration-normal) var(--ease-default)}.diagram-node.active .node-bg{fill:var(--color-primary)}.diagram-node.active .node-text{fill:var(--color-text-inverse)}.diagram-node.active .node-ring{stroke:var(--color-primary);stroke-width:2.5px}.diagram-edge{transition:opacity var(--duration-normal) var(--ease-default), stroke var(--duration-normal) var(--ease-default)}.diagram-edge.active .edge-line{stroke:var(--color-primary);stroke-width:2.5px}.diagram-edge.active .edge-label{fill:var(--color-primary);font-weight:600}@media (width<=767px){.compare-panel-overlay.open .compare-panel{transform:translateY(0)}.compare-panel{transition:transform var(--duration-normal) var(--ease-default);transform:translateY(100%)}}@media (width>=768px){.compare-panel-overlay.open .compare-panel{transform:translate(0)}.compare-panel{transition:transform var(--duration-normal) var(--ease-default);transform:translate(100%)}}.progress-ring-circle{transition:stroke-dashoffset var(--duration-slow) var(--ease-out);transform-origin:50%;transform:rotate(-90deg)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.truncate-2{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.divider{background:var(--color-border);height:1px;margin:var(--space-6) 0}.text-center{text-align:center}.flex-center{justify-content:center;align-items:center;display:flex}.glass-card{background:var(--color-surface);opacity:.8;-webkit-backdrop-filter:blur(8px);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);border-radius:var(--radius-lg);transition:transform var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default)}[data-theme=light] .glass-card{background:#ffffffb3;border:1px solid #fff6}[data-theme=dark] .glass-card{background:#0f172acc;border:1px solid #ffffff1a}.glass-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #1f26871a}.detail-section__subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);max-width:720px}.mb-20{margin-bottom:var(--space-20)}.mt-20{margin-top:var(--space-20)}.mb-16{margin-bottom:var(--space-16)}.mt-16{margin-top:var(--space-16)}.mb-12{margin-bottom:var(--space-12)}.mt-12{margin-top:var(--space-12)}.mb-10{margin-bottom:var(--space-10)}.mt-10{margin-top:var(--space-10)}.mb-8{margin-bottom:var(--space-8)}.mt-8{margin-top:var(--space-8)}.mb-6{margin-bottom:var(--space-6)}.mt-6{margin-top:var(--space-6)}.mb-2{margin-bottom:var(--space-2)}.mt-2{margin-top:var(--space-2)}.p-12{padding:var(--space-12)}.p-10{padding:var(--space-10)}.p-8{padding:var(--space-8)}.p-6{padding:var(--space-6)}.p-4{padding:var(--space-4)}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (width>=768px){.md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}.gap-24{gap:var(--space-24)}.gap-20{gap:var(--space-20)}.gap-16{gap:var(--space-16)}.gap-12{gap:var(--space-12)}.gap-8{gap:var(--space-8)}.gap-6{gap:var(--space-6)}.gap-4{gap:var(--space-4)}.gap-2{gap:var(--space-2)}.items-center{align-items:center}.justify-center{justify-content:center}.flex{display:flex}.inline-flex{display:inline-flex}.text-lg{font-size:var(--font-size-lg)}.text-sm{font-size:var(--font-size-sm)}.text-xs{font-size:var(--font-size-xs)}.font-semibold{font-weight:var(--font-weight-semibold)}.font-bold{font-weight:var(--font-weight-bold)}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.05em}.italic{font-style:italic}.text-slate-400{color:var(--color-text-disabled)}.text-slate-600{color:var(--color-text-secondary)}.text-slate-700{color:var(--color-text-primary)}.text-primary{color:var(--color-primary)}.bg-primary-5{background:color-mix(in srgb, var(--color-primary), transparent 95%)}.bg-primary-10{background:color-mix(in srgb, var(--color-primary), transparent 90%)}.border-primary-10{border-color:color-mix(in srgb, var(--color-primary), transparent 90%)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-full{border-radius:var(--radius-full)}.leading-relaxed{line-height:1.625}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.mermaid-container{border-radius:var(--radius-lg);width:100%;margin-top:var(--space-6);justify-content:center;display:flex;overflow-x:auto}.mermaid-svg-wrapper{background:var(--color-surface);width:100%;padding:var(--space-6);border-radius:var(--radius-lg);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);justify-content:center;display:flex}[data-theme=light] .mermaid-svg-wrapper{background:#fff9}[data-theme=dark] .mermaid-svg-wrapper{background:#0f172a99}.mermaid-svg-wrapper svg{max-width:100%;height:auto!important}.mermaid-svg-wrapper .node rect,.mermaid-svg-wrapper .node polygon,.mermaid-svg-wrapper .classBox,.mermaid-svg-wrapper rect{rx:0!important;ry:0!important;stroke-width:1.5px!important}.mermaid-svg-wrapper .node .label{font-weight:500!important}.mermaid-svg-wrapper .titleText{font-size:14px!important;font-weight:700!important}.animate-in{animation:slide-up var(--duration-normal) var(--ease-out) forwards;opacity:0}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.footer{padding:var(--space-12) 0;background-color:var(--color-bg-app);flex-direction:column;align-items:center;display:flex}.footer__container{flex-direction:column;align-items:center;width:100%;display:flex}.footer__cta{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);flex-direction:column;display:flex}.footer__cta-text{font-size:var(--font-size-sm);color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.footer__bmc-button{align-items:center;gap:var(--space-2);color:#000;border-radius:var(--radius-full);font-weight:var(--font-weight-bold);font-size:var(--font-size-base);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);background-color:#fd0;padding:10px 24px;text-decoration:none;display:inline-flex}.footer__bmc-button:hover{box-shadow:var(--shadow-md);background-color:#ffea00;text-decoration:none;transform:scale(1.03)translateY(-1px)}.footer__bmc-icon{color:#000}.footer__divider{background-color:var(--color-border);opacity:.5;width:100%;max-width:1200px;height:1px;margin-bottom:var(--space-6)}.footer__copyright{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.footer__heart{color:#ef4444}.footer__author-link{color:var(--color-primary);font-weight:var(--font-weight-medium)}.footer__author-link:hover{text-decoration:underline}