@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap";
:root{--bg:#f8f8f5;--bg-subtle:#f0f0ec;--bg-muted:#e8e8e2;--bg-card:#fff;--bg-code:#f2f2ee;--fg:#0f0f0d;--fg-secondary:#4a4a44;--fg-muted:#78786e;--fg-placeholder:#a8a8a0;--border:#e0e0d8;--border-strong:#c8c8c0;--accent:#6c63ff;--accent-hover:#5a52e6;--accent-subtle:#f0eeff;--accent-muted:#d3d0ff;--sidebar-bg:#fff;--sidebar-border:#e8e8e2;--sidebar-item-hover:#f2f2ee;--sidebar-item-active-bg:#f0eeff;--sidebar-item-active-fg:#6c63ff;--sidebar-width:260px;--success:#22c55e;--success-subtle:#dcfce7;--warning:#f59e0b;--warning-subtle:#fef3c7;--error:#ef4444;--error-subtle:#fee2e2;--info:#3b82f6;--info-subtle:#dbeafe;--color-foundations:#6c63ff;--color-screens:#43e097;--color-components:#ff6584;--color-flows:#ffd166;--color-research:#ef8c4f;--color-design-systems:#06b6d4;--color-website-blueprint:#f472b6;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-display:"Syne", system-ui, sans-serif;--font-mono:"Space Mono", "Courier New", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px #0000000f, 0 1px 3px #0000000a;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000d;--shadow-lg:0 10px 15px #0000001a, 0 4px 6px #0000000d;--shadow-xl:0 20px 25px #0000001a, 0 10px 10px #0000000a;--duration-fast:.1s;--duration-moderate:.2s;--duration-slow:.3s;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg:#0d0d0b;--bg-subtle:#141412;--bg-muted:#1c1c18;--bg-card:#1a1a16;--bg-code:#1e1e1a;--fg:#f5f5f0;--fg-secondary:#c0c0b8;--fg-muted:#888880;--fg-placeholder:#555550;--border:#2a2a24;--border-strong:#3a3a34;--accent:#6c63ff;--accent-hover:#7b72ff;--accent-subtle:#1a1830;--accent-muted:#3d3680;--sidebar-bg:#121210;--sidebar-border:#222220;--sidebar-item-hover:#1e1e1a;--sidebar-item-active-bg:#1a1830;--sidebar-item-active-fg:#6c63ff;--shadow-sm:0 1px 2px #0000004d, 0 1px 3px #0003;--shadow-md:0 4px 6px #0006, 0 2px 4px #0000004d;--shadow-lg:0 10px 15px #00000080, 0 4px 6px #0000004d;--shadow-xl:0 20px 25px #0009, 0 10px 10px #0006;--success-subtle:#22c55e26;--warning-subtle:#f59e0b26;--error-subtle:#ef444426;--info-subtle:#3b82f626}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px;overflow-x:clip}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--fg);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration-moderate) var(--ease-in-out), color var(--duration-moderate) var(--ease-in-out);overflow-wrap:break-word;word-break:break-word;max-width:100%;line-height:1.6}a{color:var(--accent);transition:color var(--duration-fast) var(--ease-out);text-decoration:none}a:hover{color:var(--accent-hover)}img,video{max-width:100%;display:block}.app-shell{width:100%;min-height:100dvh;display:flex}.main-content{margin-left:var(--sidebar-width);min-width:0;width:calc(100% - var(--sidebar-width));transition:margin-left var(--duration-slow) var(--ease-out);flex:1}@media (max-width:1024px){.app-shell{flex-direction:column}.main-content{flex:1;width:100%;max-width:100%;margin-left:0}}.sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);z-index:100;height:100dvh;transition:transform var(--duration-slow) var(--ease-out), background-color var(--duration-moderate) var(--ease-in-out);flex-direction:column;display:flex;position:fixed;top:0;left:0}.sidebar-nav::-webkit-scrollbar{width:3px}.sidebar-nav::-webkit-scrollbar-track{background:0 0}.sidebar-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.sidebar-header{padding:var(--space-5) var(--space-5);border-bottom:1px solid var(--sidebar-border);align-items:center;gap:var(--space-3);background:var(--sidebar-bg);z-index:1;display:flex;position:sticky;top:0}.sidebar-logo-mark{background:linear-gradient(135deg, var(--accent), #a855f7);border-radius:var(--radius-md);width:32px;height:32px;font-family:var(--font-mono);color:#fff;letter-spacing:-1px;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:700;display:flex}.sidebar-logo-text{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);letter-spacing:-.02em;font-weight:700}.sidebar-logo-text span{color:var(--accent)}.sidebar-search-btn{align-items:center;gap:var(--space-2);width:calc(100% - var(--space-8));margin:var(--space-4) var(--space-4);padding:var(--space-2) var(--space-3);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--fg-muted);transition:all var(--duration-fast) var(--ease-out);display:flex}.sidebar-search-btn:hover{background:var(--bg-muted);border-color:var(--border-strong);color:var(--fg-secondary)}.sidebar-search-icon{flex-shrink:0}.sidebar-search-shortcut{font-family:var(--font-mono);color:var(--fg-placeholder);background:var(--border);border-radius:4px;margin-left:auto;padding:1px 5px;font-size:10px}.sidebar-nav{padding:0 var(--space-3) var(--space-6);flex:1;overflow-y:auto}.sidebar-section{margin-bottom:var(--space-1)}.sidebar-section-header{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);cursor:pointer;font-family:var(--font-display);font-size:var(--text-sm);color:var(--fg-secondary);text-align:left;border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);letter-spacing:.01em;background:0 0;border:none;font-weight:600;display:flex}.sidebar-section-header:hover{background:var(--sidebar-item-hover);color:var(--fg)}.sidebar-section-icon{flex-shrink:0;font-size:15px}.sidebar-section-arrow{color:var(--fg-placeholder);transition:transform var(--duration-fast) var(--ease-out);margin-left:auto;font-size:12px}.sidebar-section-arrow.open{transform:rotate(90deg)}.sidebar-section-items{transition:height var(--duration-moderate) var(--ease-out);overflow:hidden}.sidebar-item{padding:var(--space-2) var(--space-3) var(--space-2) 34px;font-size:var(--text-sm);color:var(--fg-secondary);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);line-height:1.3;display:block}.sidebar-item:hover{background:var(--sidebar-item-hover);color:var(--fg)}.sidebar-item.active{background:var(--sidebar-item-active-bg);color:var(--sidebar-item-active-fg);font-weight:500}.sidebar-group-label{padding:var(--space-3) var(--space-3) var(--space-1) 34px;font-size:10px;font-weight:700;font-family:var(--font-mono);color:var(--fg-placeholder);text-transform:uppercase;letter-spacing:.08em;display:block}.sidebar-footer{padding:var(--space-4);border-top:1px solid var(--sidebar-border);background:var(--sidebar-bg);justify-content:space-between;align-items:center;display:flex}.sidebar-overlay{z-index:99;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;display:none;position:fixed;inset:0}@media (max-width:1024px){.sidebar{transform:translate(-100%)}.sidebar.open{transform:translate(0)}.sidebar-overlay.show{display:block}}.topbar{z-index:50;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--space-3) var(--space-4);align-items:center;gap:var(--space-3);box-sizing:border-box;width:100%;display:none;position:sticky;top:0}@media (max-width:1024px){.topbar{display:flex}}.topbar-menu-btn{cursor:pointer;padding:var(--space-2);border-radius:var(--radius-sm);color:var(--fg);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.topbar-logo{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);letter-spacing:-.02em;font-weight:700}.topbar-logo span{color:var(--accent)}.topbar-right{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}.page-wrapper{max-width:860px;padding:var(--space-10) var(--space-8) var(--space-16);margin:0 auto}@media (max-width:768px){.page-wrapper{padding:var(--space-6) var(--space-4) var(--space-12)}}.breadcrumb{align-items:center;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--fg-muted);display:flex}.breadcrumb a{color:var(--fg-muted);transition:color var(--duration-fast)}.breadcrumb a:hover{color:var(--fg)}.breadcrumb-sep{opacity:.4}.breadcrumb-current{color:var(--fg-secondary);font-weight:500}.topic-header{margin-bottom:var(--space-10)}.topic-category-badge{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--space-4);display:inline-flex}.topic-title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--fg);margin-bottom:var(--space-4);font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.1}.topic-description{font-size:var(--text-lg);color:var(--fg-secondary);max-width:640px;line-height:1.6}.topic-tags{gap:var(--space-2);margin-top:var(--space-5);flex-wrap:wrap;display:flex}.topic-tag{padding:var(--space-1) var(--space-3);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-full);font-size:var(--text-xs);color:var(--fg-secondary);font-family:var(--font-mono)}.topic-section{margin-bottom:var(--space-12)}.topic-section-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--fg);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border);letter-spacing:-.02em;font-weight:700}.topic-prose{font-size:var(--text-base);color:var(--fg-secondary);line-height:1.75}.practice-list{gap:var(--space-3);flex-direction:column;list-style:none;display:flex}.practice-item{gap:var(--space-3);padding:var(--space-4);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);transition:border-color var(--duration-fast), box-shadow var(--duration-fast);display:flex}.practice-item:hover{border-color:var(--accent-muted);box-shadow:var(--shadow-sm)}.practice-bullet{background:var(--accent-subtle);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;margin-top:1px;display:flex}.practice-bullet-inner{background:var(--accent);border-radius:50%;width:8px;height:8px}.practice-text{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.6}.mistake-list{gap:var(--space-3);flex-direction:column;list-style:none;display:flex}.mistake-item{gap:var(--space-3);padding:var(--space-4);background:var(--error-subtle);border-radius:var(--radius-md);border:1px solid #ef444426;align-items:flex-start;display:flex}.mistake-icon{color:var(--error);flex-shrink:0;margin-top:2px}.mistake-text{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.6}.checklist{gap:var(--space-2);flex-direction:column;display:flex}.checklist-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast);-webkit-user-select:none;user-select:none;display:flex}.checklist-item:hover{border-color:var(--accent-muted);background:var(--accent-subtle)}.checklist-item.checked{background:var(--success-subtle);border-color:#22c55e33}.checklist-checkbox{border:2px solid var(--border-strong);width:18px;height:18px;transition:all var(--duration-fast);border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;margin-top:1px;display:flex}.checklist-item.checked .checklist-checkbox{background:var(--success);border-color:var(--success);color:#fff}.checklist-text{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.5}.checklist-item.checked .checklist-text{color:var(--fg-muted);text-decoration:line-through}.checklist-note{font-size:var(--text-xs);color:var(--fg-muted);margin-top:2px;font-style:italic}.research-grid{gap:var(--space-4);flex-direction:column;display:flex}.research-card{padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg)}.research-principle{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);margin-bottom:var(--space-2);font-weight:700}.research-description{font-size:var(--text-sm);color:var(--fg-secondary);margin-bottom:var(--space-3);line-height:1.65}.research-relevance-label{font-size:var(--text-xs);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:var(--font-mono);margin-bottom:var(--space-1)}.research-relevance{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.6}.examples-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.example-card{padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);transition:all var(--duration-moderate) var(--ease-out)}.example-card:hover{border-color:var(--accent-muted);box-shadow:var(--shadow-md);transform:translateY(-2px)}.example-company{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);margin-bottom:var(--space-2);font-weight:700}.example-description{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.6}.home-hero{padding:var(--space-16) var(--space-8) var(--space-12);text-align:center;max-width:800px;margin:0 auto}.home-hero-eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);color:#d4d4d8;letter-spacing:.15em;text-transform:uppercase;margin-bottom:var(--space-5);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);align-items:center;padding:6px 14px;display:inline-flex}.home-hero-title{font-family:var(--font-display);letter-spacing:-.04em;color:var(--fg);margin-bottom:var(--space-5);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;line-height:1.05}.home-hero-title em{background:linear-gradient(135deg, var(--accent), #a855f7);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-style:normal}.home-hero-sub{font-size:var(--text-lg);color:var(--fg-secondary);max-width:560px;margin:0 auto var(--space-8);line-height:1.6}.home-search{max-width:600px;margin:0 auto;position:relative}.home-search-input{width:100%;padding:var(--space-4) var(--space-5) var(--space-4) 52px;font-family:var(--font-sans);font-size:var(--text-base);background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius-xl);color:var(--fg);transition:all var(--duration-moderate) var(--ease-out);box-shadow:var(--shadow-md);outline:none}.home-search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle), var(--shadow-md)}.home-search-input::placeholder{color:var(--fg-placeholder)}.home-search-icon{left:var(--space-4);color:var(--fg-muted);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.home-search-results{top:calc(100% + var(--space-2));background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:200;max-height:400px;position:absolute;left:0;right:0;overflow:hidden auto}.home-search-result-item{padding:var(--space-3) var(--space-4);transition:background var(--duration-fast);border-bottom:1px solid var(--border);text-decoration:none;display:block}.home-search-result-item:last-child{border-bottom:none}.home-search-result-item:hover{background:var(--bg-subtle)}.home-search-result-title{font-size:var(--text-sm);color:var(--fg);margin-bottom:2px;font-weight:600}.home-search-result-category{font-size:var(--text-xs);color:var(--fg-muted)}.home-search-no-results{padding:var(--space-5);text-align:center;color:var(--fg-muted);font-size:var(--text-sm)}.home-categories{padding:0 var(--space-8) var(--space-16);max-width:1100px;margin:0 auto}.home-categories-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--fg);margin-bottom:var(--space-6);letter-spacing:-.02em;font-weight:700}.home-category-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.home-category-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:var(--space-6);transition:all var(--duration-moderate) var(--ease-out);text-decoration:none;display:block;position:relative;overflow:hidden}.home-category-card:hover{border-color:var(--card-color,var(--accent));box-shadow:var(--shadow-lg);transform:translateY(-3px)}.home-category-icon{margin-bottom:var(--space-3);font-size:28px}.home-category-name{font-family:var(--font-display);font-size:var(--text-lg);color:var(--fg);margin-bottom:var(--space-2);letter-spacing:-.02em;font-weight:700}.home-category-desc{font-size:var(--text-sm);color:var(--fg-secondary);margin-bottom:var(--space-4);line-height:1.6}.home-category-items{gap:var(--space-1);flex-wrap:wrap;display:flex}.home-category-item-pill{font-size:var(--text-xs);background:var(--bg-subtle);border-radius:var(--radius-full);color:var(--fg-muted);border:1px solid var(--border);padding:2px 8px}.home-category-count{font-size:var(--text-xs);color:var(--fg-muted);font-family:var(--font-mono);margin-top:var(--space-3)}.theme-toggle{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-card);cursor:pointer;width:36px;height:36px;color:var(--fg-secondary);transition:all var(--duration-fast) var(--ease-out);justify-content:center;align-items:center;font-size:16px;display:flex}.theme-toggle:hover{background:var(--bg-subtle);color:var(--fg);border-color:var(--border-strong)}.search-modal-backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;animation:fadeIn var(--duration-fast) var(--ease-out);background:#0009;justify-content:center;align-items:flex-start;padding-top:15vh;display:flex;position:fixed;inset:0}.search-modal{width:100%;max-width:600px;margin:0 var(--space-4);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);animation:slideDown var(--duration-moderate) var(--ease-out);overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.search-modal-input-wrap{align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);display:flex}.search-modal-icon{color:var(--fg-muted);flex-shrink:0}.search-modal-input{font-family:var(--font-sans);font-size:var(--text-base);color:var(--fg);background:0 0;border:none;outline:none;flex:1}.search-modal-input::placeholder{color:var(--fg-placeholder)}.search-modal-esc{font-family:var(--font-mono);color:var(--fg-muted);background:var(--bg-subtle);border:1px solid var(--border);cursor:pointer;border-radius:4px;padding:2px 6px;font-size:11px}.search-modal-results{max-height:420px;overflow-y:auto}.search-modal-results::-webkit-scrollbar{width:4px}.search-modal-results::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px}.search-modal-section-label{padding:var(--space-2) var(--space-5);font-size:var(--text-xs);color:var(--fg-muted);font-weight:600;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--bg-subtle);border-bottom:1px solid var(--border)}.search-modal-result-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-5);cursor:pointer;transition:background var(--duration-fast);border-bottom:1px solid var(--border);text-decoration:none;display:flex}.search-modal-result-item:last-child{border-bottom:none}.search-modal-result-item:hover,.search-modal-result-item.highlighted{background:var(--bg-subtle)}.search-modal-result-icon{flex-shrink:0;margin-top:1px;font-size:18px}.search-modal-result-content{flex:1;min-width:0}.search-modal-result-title{font-size:var(--text-sm);color:var(--fg);margin-bottom:2px;font-weight:600}.search-modal-result-category{font-size:var(--text-xs);color:var(--fg-muted)}.search-modal-result-desc{font-size:var(--text-xs);color:var(--fg-muted);text-overflow:ellipsis;white-space:nowrap;margin-top:1px;overflow:hidden}.search-modal-empty{padding:var(--space-10);text-align:center;color:var(--fg-muted)}.search-modal-empty-icon{margin-bottom:var(--space-3);font-size:32px}.search-modal-empty-text{font-size:var(--text-sm)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.divider{border:none;border-top:1px solid var(--border);margin:var(--space-8) 0}@media (max-width:768px){.home-hero{padding:var(--space-8) var(--space-4) var(--space-8)}.home-categories{padding:0 var(--space-4) var(--space-10)}.examples-grid,.home-category-grid{grid-template-columns:1fr}.search-modal-backdrop{align-items:flex-start;padding-top:5vh}.home-search-input{font-size:var(--text-sm);padding:var(--space-3) var(--space-4) var(--space-3) 44px}.blueprint-dos-donts-grid,.blueprint-examples-grid{grid-template-columns:1fr!important}.blueprint-card-header{padding:14px 16px!important}.blueprint-tab-content{padding:16px!important}.blueprint-tabs{padding:0 16px!important}}@media (max-width:480px){.home-hero{padding:var(--space-6) var(--space-4) var(--space-6)}.home-hero-title{font-size:clamp(1.75rem,8vw,2.5rem)}.home-hero-sub{font-size:var(--text-base)}.home-category-grid,.examples-grid{grid-template-columns:1fr}.page-wrapper{padding:var(--space-4) var(--space-3) var(--space-10)}.topic-description{font-size:var(--text-base)}.breadcrumb{font-size:var(--text-xs);flex-wrap:wrap}}@media (max-height:500px){.search-modal-backdrop{align-items:flex-start;padding-top:8px}.search-modal-results{max-height:60vh}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}::selection{background:var(--accent-subtle);color:var(--accent)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg-subtle)}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}::-webkit-scrollbar-thumb:hover{background:var(--fg-placeholder)}.section-subtitle{font-family:var(--font-display);font-size:var(--text-lg);color:var(--fg);margin-bottom:var(--space-4);font-weight:600}.challenge-tabs-grid{gap:var(--space-4);margin-bottom:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.challenge-tab-card{text-align:left;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);cursor:pointer;transition:all var(--duration-moderate) var(--ease-out);flex-direction:column;align-items:flex-start;width:100%;display:flex}.challenge-tab-card:hover{border-color:var(--accent-muted);box-shadow:var(--shadow-md);transform:translateY(-2px)}.challenge-tab-card.active{background:var(--bg-subtle);border-color:var(--accent);box-shadow:var(--shadow-sm), 0 0 0 1px var(--accent)}.challenge-tab-header{width:100%;margin-bottom:var(--space-2);justify-content:space-between;align-items:center;gap:var(--space-2);display:flex}.challenge-tab-title{font-family:var(--font-display);font-size:var(--text-sm);color:var(--fg);font-weight:700;line-height:1.2}.difficulty-badge{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:700}.challenge-tab-hook{font-size:var(--text-xs);color:var(--fg-secondary);margin-top:var(--space-1);-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;display:-webkit-box;overflow:hidden}.hook-callout{background:var(--bg-subtle);border-radius:var(--radius-md);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-8);border:none;position:relative}.hook-quote-mark{font-size:4rem;font-family:var(--font-display);color:var(--border-strong);opacity:.3;-webkit-user-select:none;user-select:none;line-height:1;position:absolute;top:-10px;left:16px}.hook-text{font-family:var(--font-display);font-size:var(--text-lg);color:var(--fg);z-index:1;margin-bottom:var(--space-3);font-weight:500;line-height:1.4;position:relative}.hook-meta{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.difficulty-label-pill{font-family:var(--font-mono);text-transform:uppercase;border-radius:4px;padding:2px 8px;font-size:11px;font-weight:700}.difficulty-explanation-text{font-size:var(--text-xs);color:var(--fg-muted)}.challenge-grid{gap:var(--space-6);margin-bottom:var(--space-8);grid-template-columns:1.5fr 1fr;display:grid}.challenge-col-main,.challenge-col-sidebar{gap:var(--space-6);flex-direction:column;display:flex}.challenge-detail-card{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-6);border:none}.challenge-card-title{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);margin-bottom:var(--space-4);border-bottom:1px dashed var(--border);padding-bottom:var(--space-2);align-items:center;font-weight:600;display:flex}.challenge-card-prose{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.6}.inspiration-list{gap:var(--space-3);flex-direction:column;display:flex}.inspiration-item{font-size:var(--text-sm);line-height:1.5}.inspiration-company{color:var(--fg);font-weight:600}.inspiration-description{color:var(--fg-secondary);margin-left:var(--space-2)}.constraints-list{gap:var(--space-3);flex-direction:column;list-style:none;display:flex}.constraint-item{align-items:flex-start;gap:var(--space-3);display:flex}.constraint-bullet{border-radius:50%;flex-shrink:0;width:6px;height:6px;margin-top:8px}.constraint-text{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.4}.concepts-pills{gap:var(--space-2);flex-wrap:wrap;display:flex}.concept-pill-link{font-size:var(--text-xs);background:var(--bg-subtle);border:1px solid var(--border);padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);transition:all var(--duration-fast) var(--ease-out);font-weight:500;color:var(--fg-secondary)!important}.concept-pill-link:hover{background:var(--accent-subtle);border-color:var(--accent-muted);color:var(--accent)!important}.checklist-section{background:var(--bg-card);border-radius:var(--radius-md);padding:var(--space-6);margin-bottom:var(--space-8);border:none}.checklist-header-flex{margin-bottom:var(--space-4);justify-content:space-between;align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.checklist-counter{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600}.checklist-progress-bg{background:var(--bg-subtle);border-radius:var(--radius-full);width:100%;height:6px;margin-bottom:var(--space-6);overflow:hidden}.checklist-progress-bar{border-radius:var(--radius-full);height:100%;transition:width var(--duration-moderate) var(--ease-in-out)}.share-prompt-section{background:var(--bg-subtle);padding:var(--space-6);border-radius:var(--radius-md)}.share-prompt-title{font-family:var(--font-display);font-size:var(--text-base);color:var(--fg);margin-bottom:var(--space-2);font-weight:600}.share-prompt-text{font-size:var(--text-sm);color:var(--fg-secondary);line-height:1.5}.animate-fade-in{animation:fadeIn var(--duration-moderate) var(--ease-out) forwards}@media (max-width:768px){.challenge-grid{grid-template-columns:1fr}}.footer{background-color:var(--bg-card);border-top:1px solid var(--border);padding:80px 40px 40px}.footer-grid{gap:var(--space-8);grid-template-columns:repeat(4,1fr);margin-bottom:60px;display:grid}.footer-col{padding:0 24px}.footer-col:not(:first-child){border-left:1px solid var(--border)}.brand-col{padding-left:0}.footer-logo{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.02em;color:var(--fg);margin-bottom:var(--space-4);font-weight:800}.footer-logo span{color:var(--accent)}.footer-description{font-size:var(--text-sm);color:var(--fg-secondary);margin-bottom:var(--space-6);max-width:240px;line-height:1.6}.footer-col-title{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--fg-subtle);margin-bottom:var(--space-6);font-weight:700}.footer-social-list,.footer-links{gap:var(--space-3);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.footer-social-link,.footer-links a{font-size:var(--text-sm);color:var(--fg-secondary);text-decoration:none;transition:color .15s;display:inline-block}.footer-social-link:hover,.footer-links a:hover{color:var(--accent)}.footer-update-text{font-size:var(--text-sm);color:var(--fg-secondary);margin-bottom:var(--space-4);line-height:1.5}.footer-subscribe-form{margin-bottom:var(--space-6)}.footer-subscribe-input-wrap{border:1px solid var(--border);background-color:var(--bg);border-radius:6px;align-items:center;transition:border-color .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.footer-subscribe-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px #6c63ff26}.footer-subscribe-input{width:100%;font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg);text-transform:uppercase;background:0 0;border:none;padding:12px 48px 12px 14px}.footer-subscribe-input::placeholder{color:var(--fg-subtle)}.footer-subscribe-input:focus{outline:none}.footer-subscribe-btn{background-color:var(--bg-muted);border:1px solid var(--border);width:32px;height:32px;color:var(--fg);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;transition:background-color .15s,color .15s;display:flex;position:absolute;top:50%;right:6px;transform:translateY(-50%)}.footer-subscribe-btn:hover{background-color:var(--accent);color:#fff;border-color:var(--accent)}.footer-whatsapp-wrap{margin-top:var(--space-6)}.footer-whatsapp-btn{padding:10px var(--space-4);font-size:var(--text-xs);color:#fff;background-color:#25d366;border-radius:6px;align-items:center;font-weight:600;text-decoration:none;transition:background-color .15s,transform .15s;display:inline-flex}.footer-whatsapp-btn:hover{background-color:#128c7e;transform:translateY(-1px)}.footer-bottom{border-top:1px solid var(--border);padding-top:var(--space-8);font-size:var(--text-xs);color:var(--fg-subtle);font-family:var(--font-mono);justify-content:space-between;align-items:center;display:flex}.footer-bottom-right a{color:var(--fg-secondary);text-decoration:none;transition:color .15s}.footer-bottom-right a:hover{color:var(--accent);text-decoration:underline}@media (max-width:1024px){.footer{padding:60px 24px 32px}.footer-grid{gap:var(--space-8);grid-template-columns:repeat(2,1fr)}.footer-col{padding:0 16px}.footer-col:not(:first-child){border-left:none}.brand-col{padding-left:16px}}@media (max-width:640px){.footer-grid{gap:var(--space-8);grid-template-columns:1fr}.footer-col{border-top:1px solid var(--border);padding:0;padding-top:var(--space-6)}.footer-col:first-child{border-top:none;padding-top:0}.footer-bottom{gap:var(--space-4);flex-direction:column;align-items:flex-start}}.challenge-page-header{gap:var(--space-6);margin-bottom:var(--space-8);border-bottom:1px solid var(--border);padding-bottom:var(--space-8);flex-direction:column;display:flex}.challenge-header-left{gap:var(--space-3);flex-direction:column;display:flex}.challenge-action-toolbar{gap:var(--space-4);margin-top:var(--space-2);flex-wrap:wrap;justify-content:space-between;align-items:center;display:flex}.mode-toggle-segment,.platform-toggle-segment{background:var(--bg-muted);border:1px solid var(--border);border-radius:9999px;width:fit-content;padding:4px;display:flex}.mode-btn,.platform-btn{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--fg-muted);cursor:pointer;background:0 0;border:none;border-radius:9999px;padding:8px 18px;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1)}.mode-btn:hover,.platform-btn:hover{color:var(--fg)}.mode-btn.active,.platform-btn.active{background:var(--surface2);color:var(--accent);border:1px solid #6c63ff26;box-shadow:0 4px 12px #00000026}.action-buttons-group{gap:var(--space-3);display:flex}.action-btn{background:var(--surface);border:1px solid var(--border);color:var(--fg);border-radius:var(--radius-md);font-size:var(--text-sm);font-family:var(--font-mono);cursor:pointer;align-items:center;gap:8px;padding:10px 18px;transition:all .2s;display:inline-flex}.action-btn:hover:not(:disabled){background:var(--surface2);border-color:var(--border2);transform:translateY(-1px)}.accent-action-btn{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600}.accent-action-btn:hover:not(:disabled){color:#fff;background:#5b52e0;border-color:#5b52e0}.action-btn:disabled{opacity:.6;cursor:not-allowed}.platform-toggle-container{gap:var(--space-3);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-6);background:#6c63ff08;border:1px dashed #6c63ff33;flex-direction:column;display:flex}.platform-toggle-label{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted);text-transform:uppercase}.scratch-brief-grid{gap:var(--space-8);margin-top:var(--space-6);grid-template-columns:1.6fr 1fr;display:grid}.scratch-goal-callout{margin-top:var(--space-4);border-left:3px solid var(--accent);padding:var(--space-4);border-radius:0 var(--radius-md) var(--radius-md) 0;font-size:var(--text-sm);line-height:var(--line-height-relaxed);background:#6c63ff14}.deliverables-stack{gap:var(--space-4);flex-direction:column;display:flex}.deliverable-item-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5);transition:border-color .2s}.deliverable-item-card:hover{border-color:var(--border2)}.deliverable-header{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-2);display:flex}.deliverable-name{font-size:var(--text-base);font-weight:700}.deliverable-viewport-tag{font-size:var(--text-xs);font-family:var(--font-mono);border:1px solid var(--border);color:var(--fg-muted);background:#ffffff0f;border-radius:4px;padding:2px 8px}.deliverable-purpose{font-size:var(--text-sm);color:var(--fg-muted);line-height:var(--line-height-relaxed);margin-bottom:var(--space-4)}.deliverable-requirements{border-top:1px solid var(--border);padding-top:var(--space-3)}.req-title{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted);margin-bottom:var(--space-2);display:block}.req-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.req-item{font-size:var(--text-sm);line-height:var(--line-height-relaxed);align-items:flex-start;gap:8px;display:flex}.req-bullet{border-radius:50%;flex-shrink:0;width:5px;height:5px;margin-top:7px}.scratch-journey-timeline{gap:var(--space-6);padding-left:var(--space-2);flex-direction:column;display:flex;position:relative}.scratch-journey-timeline:before{content:"";left:21px;top:var(--space-4);bottom:var(--space-4);background:var(--border);width:2px;position:absolute}.journey-step-node{gap:var(--space-4);display:flex;position:relative}.journey-step-badge{width:28px;height:28px;font-family:var(--font-mono);font-size:var(--text-xs);color:#fff;z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:flex}.journey-step-content{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4);flex:1}.journey-step-title{font-size:var(--text-sm);margin-bottom:var(--space-2);font-weight:700}.journey-step-desc,.journey-step-outcome{font-size:var(--text-xs);color:var(--fg-muted);line-height:var(--line-height-relaxed);margin-bottom:4px}.journey-step-outcome strong,.journey-step-desc strong{color:var(--fg)}.copy-starter-stack{gap:var(--space-4);flex-direction:column;display:flex}.copy-starter-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)}.copy-label{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--fg-muted);margin-bottom:var(--space-2);display:block}.copy-quote{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent);border-left:2px solid var(--accent);margin:0 0 var(--space-2) 0;background:#6c63ff0d;border-radius:0 4px 4px 0;padding:8px 12px}.copy-rationale{font-size:var(--text-xs);color:var(--fg-muted);line-height:var(--line-height-relaxed);margin:0}.floating-success-toast{background:var(--surface2);border:1px solid var(--border2);font-size:var(--text-sm);font-family:var(--font-mono);color:var(--fg);z-index:1000;border-radius:9999px;align-items:center;padding:12px 24px;font-weight:500;animation:.2s cubic-bezier(.16,1,.3,1) slide-up-toast;display:flex;position:fixed;bottom:24px;right:24px;box-shadow:0 8px 30px #0000004d}@keyframes slide-up-toast{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.scratch-brief-grid{gap:var(--space-6);grid-template-columns:1fr}}@media (max-width:640px){.challenge-action-toolbar{flex-direction:column;align-items:stretch}.mode-toggle-segment,.action-buttons-group{justify-content:stretch;width:100%}.mode-btn,.action-btn{flex:1;justify-content:center}}