:root{--bg:#faf6f1;--surface:#fffdf9;--surface-alt:#f5ede4;--text:#3d2e22;--text-muted:#7a6b5d;--text-light:#9c8f82;--accent:#c4783a;--accent-light:#e8a86a;--accent-dark:#9e5a22;--accent-bg:#fef3e8;--success:#5a8a4c;--success-bg:#eef5eb;--warning:#c49a3a;--warning-bg:#fdf8e8;--danger:#b85c4a;--danger-bg:#fceeed;--border:#e8ddd3;--shadow:0 2px 8px rgba(61,46,34,.08);--shadow-lg:0 8px 32px rgba(61,46,34,.12);--radius:12px;--radius-sm:8px;--font:'Georgia','Times New Roman',serif;--font-sans:'Segoe UI',system-ui,-apple-system,sans-serif;--max-w:1200px;--transition:all .2s ease}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
.container{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--accent);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);z-index:9999;text-decoration:none;font-family:var(--font-sans);font-size:.875rem}
.skip-link:focus{top:1rem}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.logo{display:flex;align-items:center;gap:.625rem;text-decoration:none;color:var(--text)}
.logo-icon{width:36px;height:36px;color:var(--accent)}
.logo-text h1{font-size:1.25rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.logo-text span{display:block;font-family:var(--font-sans);font-size:.7rem;color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase}
nav ul{display:flex;list-style:none;gap:1.5rem;align-items:center}
nav a{text-decoration:none;color:var(--text-muted);font-family:var(--font-sans);font-size:.875rem;font-weight:500;transition:var(--transition)}
nav a:hover,nav a:focus{color:var(--accent)}
.menu-toggle{display:none;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem;cursor:pointer;color:var(--text)}
.hero{padding:3.5rem 0 2.5rem;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.hero h2{font-size:2.25rem;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin-bottom:.75rem;max-width:600px}
.hero p{font-size:1.125rem;color:var(--text-muted);max-width:560px;font-family:var(--font-sans)}
.filters{padding:1.5rem 0;background:var(--surface);border-bottom:1px solid var(--border)}
.filter-row{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-start}
.filter-group{display:flex;flex-direction:column;gap:.5rem}
.filter-group label{font-family:var(--font-sans);font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .875rem;border:1px solid var(--border);border-radius:100px;background:var(--surface);color:var(--text);font-family:var(--font-sans);font-size:.8125rem;cursor:pointer;transition:var(--transition)}
.chip:hover,.chip:focus{border-color:var(--accent);background:var(--accent-bg);outline:none}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip .count{font-size:.7rem;opacity:.7;font-weight:600}
.search-input{padding:.5rem .875rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;background:var(--surface);color:var(--text);width:220px;transition:var(--transition)}
.search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(196,120,58,.15)}
.gallery-section{padding:2.5rem 0 4rem}
.gallery-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.gallery-header h3{font-size:1.125rem;font-weight:600}
.gallery-header .results-count{font-family:var(--font-sans);font-size:.875rem;color:var(--text-muted)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.pattern-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);cursor:pointer}
.pattern-card:hover,.pattern-card:focus-within{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.pattern-preview{height:180px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pattern-preview svg{width:100%;height:100%}
.difficulty-badge{position:absolute;top:.75rem;right:.75rem;padding:.25rem .625rem;border-radius:100px;font-family:var(--font-sans);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.difficulty-1{background:var(--success-bg);color:var(--success)}
.difficulty-2{background:var(--warning-bg);color:var(--warning)}
.difficulty-3{background:var(--danger-bg);color:var(--danger)}
.pattern-info{padding:1.25rem}
.pattern-info h4{font-size:1.125rem;font-weight:700;margin-bottom:.375rem}
.pattern-info .pattern-desc{font-family:var(--font-sans);font-size:.875rem;color:var(--text-muted);margin-bottom:.875rem;line-height:1.5}
.pattern-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.meta-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .625rem;background:var(--surface-alt);border-radius:100px;font-family:var(--font-sans);font-size:.75rem;color:var(--text-muted)}
.fav-btn{position:absolute;top:.75rem;left:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);color:var(--text-light)}
.fav-btn:hover,.fav-btn:focus{border-color:var(--accent);color:var(--accent)}
.fav-btn.active{color:var(--danger);border-color:var(--danger);background:var(--danger-bg)}
.fav-btn svg{width:16px;height:16px}
.modal-overlay{position:fixed;inset:0;background:rgba(61,46,34,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;visibility:hidden;transition:var(--transition)}
.modal-overlay.open{opacity:1;visibility:visible}
.modal{background:var(--surface);border-radius:var(--radius);max-width:720px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);position:relative}
.modal-close{position:absolute;top:1rem;right:1rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);transition:var(--transition);z-index:10}
.modal-close:hover,.modal-close:focus{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}
.modal-hero{height:220px;background:var(--surface-alt);display:flex;align-items:center;justify-content:center}
.modal-hero svg{max-width:280px;max-height:180px}
.modal-body{padding:2rem}
.modal-body h2{font-size:1.75rem;font-weight:700;margin-bottom:.5rem}
.modal-body .modal-desc{font-family:var(--font-sans);color:var(--text-muted);margin-bottom:1.5rem;font-size:1rem}
.instruction-steps{margin:1.5rem 0}
.instruction-steps h3{font-size:1rem;font-weight:700;margin-bottom:.75rem;font-family:var(--font-sans)}
.step{display:flex;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-num{width:28px;height:28px;background:var(--accent);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.8rem;font-weight:700;flex-shrink:0;margin-top:.125rem}
.step p{font-family:var(--font-sans);font-size:.9375rem;line-height:1.55}
.tips-box{background:var(--accent-bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.25rem;margin-top:1.5rem}
.tips-box h3{font-size:.9375rem;font-weight:700;margin-bottom:.5rem;color:var(--accent-dark)}
.tips-box ul{padding-left:1.25rem;font-family:var(--font-sans);font-size:.875rem;color:var(--text)}
.tips-box li{margin-bottom:.375rem;line-height:1.5}
.modal-actions{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;font-weight:600;cursor:pointer;transition:var(--transition);border:1px solid transparent;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-dark)}
.btn-secondary{background:var(--surface-alt);color:var(--text);border-color:var(--border)}
.btn-secondary:hover,.btn-secondary:focus{background:var(--border)}
.btn-ghost{background:transparent;color:var(--text-muted);border-color:var(--border)}
.btn-ghost:hover,.btn-ghost:focus{color:var(--text)}
.empty-state{grid-column:1/-1;text-align:center;padding:4rem 2rem}
.empty-state svg{width:80px;height:80px;color:var(--text-light);margin-bottom:1rem}
.empty-state h3{font-size:1.25rem;margin-bottom:.5rem}
.empty-state p{font-family:var(--font-sans);color:var(--text-muted);max-width:400px;margin:0 auto}
.content-section{padding:3rem 0;background:var(--surface);border-top:1px solid var(--border)}
.content-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}
.content-block h3{font-size:1.125rem;font-weight:700;margin-bottom:.75rem}
.content-block p,.content-block li{font-family:var(--font-sans);font-size:.9375rem;color:var(--text-muted);line-height:1.65}
.content-block ul{padding-left:1.25rem}
.content-block li{margin-bottom:.375rem}
.faq-section{padding:3rem 0}
.faq-section h3{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem}
.faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:.75rem;overflow:hidden}
.faq-q{width:100%;text-align:left;background:var(--surface);border:none;padding:1rem 1.25rem;font-family:var(--font-sans);font-size:.9375rem;font-weight:600;color:var(--text);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq-q:hover{background:var(--surface-alt)}
.faq-q svg{width:20px;height:20px;flex-shrink:0;transition:transform .2s;color:var(--text-muted)}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{padding:0 1.25rem;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-a{padding:0 1.25rem 1.25rem;max-height:500px}
.faq-a p{font-family:var(--font-sans);font-size:.9375rem;color:var(--text-muted);line-height:1.6}
.tool-recs{padding:3rem 0;background:var(--surface-alt);border-top:1px solid var(--border)}
.tool-recs h3{font-size:1.25rem;font-weight:700;margin-bottom:1.5rem}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.tool-card h4{font-size:1rem;font-weight:700;margin-bottom:.375rem}
.tool-card .tool-level{font-family:var(--font-sans);font-size:.75rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.75rem}
.tool-card p{font-family:var(--font-sans);font-size:.875rem;color:var(--text-muted);line-height:1.55}
.favorites-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:2rem}
.favorites-bar h3{font-size:1rem;font-weight:700;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
.favorites-bar h3 svg{color:var(--danger);width:18px;height:18px}
.fav-list{display:flex;flex-wrap:wrap;gap:.5rem}
.fav-tag{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:var(--danger-bg);border:1px solid var(--danger);border-radius:100px;font-family:var(--font-sans);font-size:.8125rem;color:var(--danger);cursor:pointer;transition:var(--transition)}
.fav-tag:hover{opacity:.8}
.fav-tag .remove{margin-left:.25rem;font-weight:700}
.no-favs{font-family:var(--font-sans);font-size:.875rem;color:var(--text-light);font-style:italic}
.share-toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100px);background:var(--text);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:.875rem;z-index:300;transition:transform .3s ease;pointer-events:none}
.share-toast.show{transform:translateX(-50%) translateY(0)}
footer{background:var(--text);color:rgba(255,255,255,.7);padding:2.5rem 0;font-family:var(--font-sans);font-size:.875rem}
footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
footer a:hover{color:#fff}
footer .footer-links{display:flex;gap:1.5rem}
@media(max-width:768px){header .container{flex-wrap:nowrap}nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);flex-direction:column;padding:1rem 1.5rem;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}nav ul.open{display:flex}.menu-toggle{display:block}.hero h2{font-size:1.75rem}.hero p{font-size:1rem}.filter-row{flex-direction:column}.search-input{width:100%}.gallery-grid{grid-template-columns:1fr}.modal-body{padding:1.5rem}.modal-body h2{font-size:1.375rem}.content-grid,.tool-grid{grid-template-columns:1fr}footer .container{flex-direction:column;text-align:center}}
@media(max-width:480px){.container{padding:0 1rem}.hero{padding:2.5rem 0 1.5rem}.hero h2{font-size:1.5rem}.pattern-info{padding:1rem}.modal-body{padding:1.25rem}}
@media print{header,.filters,.favorites-bar,.modal-actions,.fav-btn,.menu-toggle,footer{display:none!important}.modal-overlay{position:static;opacity:1;visibility:visible;background:none}.modal{box-shadow:none;max-height:none}.pattern-card{break-inside:avoid}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}



/* Factory-injected deployment helpers. The AI owns the site design above this block. */
.ad-unit {
  width: min(100%, 720px);
  min-height: 120px;
  margin: 24px auto;
  display: block;
}

.legal-page {
  width: min(900px, calc(100% - 32px));
  margin: 40px auto;
}

.factory-fallback-nav {
  width: min(900px, calc(100% - 32px));
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  font-size: 0.95rem;
}

.factory-fallback-nav a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}