@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@400;600;700;800&display=swap";:root{--text:#4b5563;--text-h:#1a202c;--bg:#fafbfc;--border:#e2e8f0;--code-bg:#f1f5f9;--accent:#4f46e5;--accent-bg:#4f46e514;--accent-border:#4f46e533;--social-bg:#f1f5f999;--shadow:#00000014 0 10px 15px -3px, #0000000a 0 4px 6px -2px;--shadow-lg:#0000001f 0 20px 25px -5px, #00000014 0 10px 10px -5px;--transition-smooth:all .3s cubic-bezier(.34, 1.56, .64, 1);--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#a8b5c7;--text-h:#eceff5;--bg:#1a2332;--border:#2d3f52;--code-bg:#232d3a;--accent:#6366f1;--accent-bg:#6366f11f;--accent-border:#6366f140;--social-bg:#2d3f5280;--shadow:#0000004d 0 10px 15px -3px, #00000026 0 4px 6px -2px;--shadow-lg:#0006 0 20px 25px -5px, #00000040 0 10px 10px -5px}#social .button-icon{filter:invert(.9)brightness(1.1)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:auto;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{background-color:var(--bg);margin:0;font-family:Arial,sans-serif;transition:background-color .3s}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:600;transition:color .3s}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px;animation:.6s ease-out fadeInDown}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.home-page{background:#f8fafc;min-height:calc(100vh - 60px);padding:60px 20px}.home-hero{text-align:center;color:#3f4557;margin-bottom:60px}.home-hero__title{color:#1a202c;letter-spacing:-.5px;margin-bottom:20px;font-size:3.5rem;font-weight:700}.home-hero__subtitle{color:#6b7280;max-width:600px;margin:0 auto;font-size:1.25rem;font-weight:400;line-height:1.6}.home-categories{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto;display:grid}.category-card{color:#1a202c;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;padding:40px 30px;text-decoration:none;transition:all .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #0000000a}.category-card:hover{border-color:#d1d5db;transform:translateY(-4px);box-shadow:0 8px 16px #00000014}.category-card--blue{border-left:4px solid #4f46e5}.category-card--blue:hover{background:#f5f3ff;border-left-color:#4f46e5}.category-card--purple{border-left:4px solid #8b5cf6}.category-card--purple:hover{background:#faf5ff;border-left-color:#8b5cf6}.category-card--green{border-left:4px solid #10b981}.category-card--green:hover{background:#f0fdf4;border-left-color:#10b981}.category-card__icon{opacity:.7;margin-bottom:15px;font-size:2.5rem}.category-card__title{color:#1a202c;margin-bottom:15px;font-size:1.5rem;font-weight:700}.category-card__description{color:#64748b;flex-grow:1;margin-bottom:20px;font-size:.95rem;line-height:1.6}.category-card__cta{color:#475569;font-size:.95rem;font-weight:500;transition:transform .3s}.category-card:hover .category-card__cta{transform:translate(5px)}@media (width<=768px){.home-hero__title{font-size:2.5rem}.home-categories{grid-template-columns:1fr}.category-card{padding:30px 20px}}.exercise-card{cursor:default;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;padding:28px 24px 24px;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;box-shadow:0 1px 2px #0000000a}.exercise-card:hover{border-color:#4f46e5;transform:translateY(-4px);box-shadow:0 8px 16px #00000014}.exercise-card__icon-wrap{background:#f3f4f6;border-radius:12px;justify-content:center;align-items:center;width:52px;height:52px;margin-bottom:16px;transition:background .2s;display:flex}.exercise-card:hover .exercise-card__icon-wrap{background:#f5f3ff}.exercise-card__icon{font-size:24px;line-height:1}.exercise-card__title{color:#1a202c;letter-spacing:-.2px;margin:0 0 10px;font-size:18px;font-weight:700;line-height:1.3}.exercise-card__description{color:#6b7280;flex-grow:1;margin:0 0 20px;font-size:14.5px;line-height:1.65}.exercise-card__concepts{margin-bottom:22px}.exercise-card__concepts-label{text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;margin:0 0 10px;font-size:11px;font-weight:700}.exercise-card__concepts-list{flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;display:flex}.exercise-card__concept-tag{color:#374151;white-space:nowrap;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:500;transition:background .15s,border-color .15s}.exercise-card:hover .exercise-card__concept-tag{color:#3730a3;background:#f5f3ff;border-color:#d6d3f7}.exercise-card__button{color:#fff;letter-spacing:.1px;background:#6366f1;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin-top:auto;padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 2px 8px #6366f147}.exercise-card__button:hover{background:#4f46e5;transform:translateY(-1px);box-shadow:0 6px 18px #6366f161}.exercise-card__button:active{transform:translateY(0);box-shadow:0 2px 6px #6366f133}.exercise-card__arrow{flex-shrink:0;width:16px;height:16px;transition:transform .18s}.exercise-card__button:hover .exercise-card__arrow{transform:translate(3px)}@media (prefers-color-scheme:dark){.exercise-card{background:#1e293b;border-color:#334155;box-shadow:0 1px 4px #00000040}.exercise-card:hover{border-color:#818cf8;box-shadow:0 12px 32px #0006}.exercise-card__icon-wrap{background:#0f172a}.exercise-card:hover .exercise-card__icon-wrap{background:#1e1b4b}.exercise-card__title{color:#f1f5f9}.exercise-card__description{color:#94a3b8}.exercise-card__concepts-label{color:#64748b}.exercise-card__concept-tag{color:#cbd5e1;background:#0f172a;border-color:#334155}.exercise-card:hover .exercise-card__concept-tag{color:#a5b4fc;background:#1e1b4b;border-color:#6366f1}.exercise-card__button{background:#6366f1}.exercise-card__button:hover{background:#4f46e5}}.showcase-container{max-width:1160px;margin:0 auto;padding:56px 24px 80px}.showcase-header{text-align:center;margin-bottom:56px;animation:.5s both fadeInDown}.showcase-header__title{color:#1a202c;letter-spacing:-1px;background:0 0;-webkit-background-clip:unset;-webkit-text-fill-color:unset;background-clip:unset;margin:0 0 14px;font-size:44px;font-weight:700;line-height:1.15}.showcase-header__subtitle{color:#6b7280;margin:0 0 36px;max-width:560px;margin-inline:auto;font-size:17px;line-height:1.65}.showcase-header__stats{justify-content:center;gap:48px;animation:.5s .15s both fadeInUp;display:flex}.stat{text-align:center}.stat__number{color:#4f46e5;letter-spacing:-.5px;margin-bottom:4px;font-size:30px;font-weight:700;display:block}.stat__label{color:#9ca3af;text-transform:uppercase;letter-spacing:.8px;font-size:12px;font-weight:600;display:block}.exercises-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin-bottom:80px;animation:.5s .3s both fadeIn;display:grid}.showcase-footer{text-align:center;border-top:1px solid #e2e8f0;padding:56px 0 0}.showcase-footer h2{color:#1a202c;letter-spacing:-.3px;margin:0 0 36px;font-size:28px;font-weight:700}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:8px;display:grid}.skill-item{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:14px;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;transition:transform .2s,background .2s,border-color .2s;display:flex}.skill-item:hover{background:#eef2ff;border-color:#a5b4fc;transform:translateY(-3px)}.skill-icon{font-size:28px;line-height:1}.skill-title{color:#334155;font-size:13px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.showcase-container{padding:36px 16px 60px}.showcase-header{margin-bottom:40px}.showcase-header__title{font-size:34px}.showcase-header__subtitle{font-size:15px}.showcase-header__stats{gap:28px}.exercises-grid{grid-template-columns:1fr;gap:16px;margin-bottom:56px}.skills-grid{grid-template-columns:repeat(2,1fr)}.showcase-footer{padding-top:40px}.showcase-footer h2{margin-bottom:28px;font-size:22px}}@media (width<=480px){.showcase-header__title{font-size:28px}.showcase-header__stats{gap:16px}.stat__number{font-size:24px}}@media (prefers-color-scheme:dark){.showcase-header__title{background:linear-gradient(135deg,#818cf8 0%,#a78bfa 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.showcase-header__subtitle{color:#94a3b8}.stat__number{color:#818cf8}.stat__label{color:#64748b}.showcase-footer{border-top-color:#334155}.showcase-footer h2{color:#f1f5f9}.skill-item{background:#1e293b;border-color:#334155}.skill-item:hover{background:#1e1b4b;border-color:#6366f1}.skill-title{color:#cbd5e1}}.showcase-container{background:#f8fafc;max-width:1200px;min-height:calc(100vh - 60px);margin:0 auto;padding:40px 20px}.showcase-header{text-align:center;margin-bottom:60px}.showcase-header__title{color:#1a202c;margin-bottom:15px;font-size:2.5rem;font-weight:700}.showcase-header__subtitle{color:#6b7280;max-width:600px;margin:0 auto;font-size:1.1rem;line-height:1.6}.showcase-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;display:grid}@media (width<=768px){.showcase-header__title{font-size:2rem}.showcase-grid{grid-template-columns:1fr}}.accordion-page{background:#f8fafc;max-width:1000px;min-height:calc(100vh - 60px);margin:0 auto;padding:40px 20px}.accordion-header{text-align:center;margin-bottom:60px}.accordion-header h1{color:#1a202c;margin-bottom:15px;font-size:2.8rem;font-weight:700}.accordion-header p{color:#6b7280;max-width:700px;margin:0 auto;font-size:1.1rem;line-height:1.6}.learn-more-link{color:#fff;background:#4f46e5;border-radius:8px;margin-top:20px;padding:12px 24px;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .3s;display:inline-block;box-shadow:0 4px 12px #4f46e54d}.learn-more-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4f46e566}.learn-more-link:active{transform:translateY(0)}.pattern-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:50px;padding:40px}.pattern-section h2{color:#1a202c;margin-bottom:25px;font-size:1.8rem;font-weight:600}.problem-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px;display:grid}.problem-card{background:#f8fafc;border-left:4px solid #4f46e5;border-radius:8px;padding:20px}.problem-card h3{color:#1a202c;margin-bottom:10px;font-size:1.1rem;font-weight:600}.problem-card p{color:#6b7280;margin:0;line-height:1.6}.mental-model{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:25px}.model-title{color:#475569;margin-bottom:15px;font-size:1rem;font-weight:500;display:block}.code-block{color:#0f172a;background:#fff;border-left:4px solid #3b82f6;border-radius:6px;margin-bottom:20px;padding:15px;font-family:Courier New,monospace;font-size:.95rem;overflow-x:auto}.model-explanation{flex-direction:column;gap:12px;display:flex}.model-point{color:#64748b;align-items:flex-start;gap:12px;line-height:1.6;display:flex}.model-icon{flex-shrink:0;font-size:1.2rem}.implementation-steps{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;display:grid}.step{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px}.step h3{color:#0f172a;margin-bottom:12px;font-size:1.1rem;font-weight:600}.step p{color:#64748b;margin-bottom:15px;font-size:.95rem;line-height:1.6}.step code{color:#3b82f6;background:#f0f9ff;border-radius:4px;padding:2px 6px;font-family:Courier New,monospace;font-size:.9rem}.guidance-box{color:#0c4a6e;background:#f0f9ff;border-left:4px solid #3b82f6;border-radius:6px;margin-top:15px;padding:15px;font-size:.9rem;line-height:1.6}.guidance-box strong{color:#0f172a}.diagrams-container{grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;margin-top:20px;display:grid}.diagram-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;padding:20px;display:flex}.diagram-card h3{color:#0f172a;margin-bottom:15px;font-size:1.1rem;font-weight:600}.diagram-image{border:1px solid #e2e8f0;border-radius:8px;width:100%;height:auto;margin-bottom:15px;display:block}.diagram-caption{color:#64748b;text-align:center;margin:0;font-size:.9rem;font-style:italic;line-height:1.5}.example-subtitle{color:#64748b;margin-bottom:25px;font-size:1rem;line-height:1.6}.accordion-item{background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:12px;transition:all .3s;overflow:hidden;box-shadow:0 1px 3px #00000014}.accordion-item:hover{box-shadow:0 4px 12px #0000001f}.accordion-header-content{color:#0f172a;cursor:pointer;-webkit-user-select:none;user-select:none;background:#fff;border-left:4px solid #3b82f6;justify-content:space-between;align-items:center;padding:18px 24px;font-weight:500;transition:all .3s;display:flex}.accordion-header-content:hover{background:#f0f9ff}.accordion-header-content:after{content:"▼";color:#64748b;font-size:.75em;transition:transform .3s}.accordion-item.open .accordion-header-content:after{transform:rotate(180deg)}.accordion-content{color:#475569;background:#f8fafc;border-top:1px solid #e2e8f0;padding:20px 24px;line-height:1.7;animation:.3s slideDown}.accordion-content ul{margin:15px 0;padding-left:20px}.accordion-content li{color:#64748b;margin-bottom:10px}.accordion-content strong{color:#0f172a}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.comparison-table{overflow-x:auto}.comparison-table table{border-collapse:collapse;width:100%;margin-top:20px}.takeaways-section{background:linear-gradient(135deg,#f0f9ff 0%,#faf5ff 100%);border:2px solid #3b82f6}.takeaways{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:20px;display:grid}.takeaway-item{background:#fff;border-left:4px solid #3b82f6;border-radius:8px;align-items:flex-start;gap:15px;padding:20px;display:flex}.number{color:#fff;background:#3b82f6;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:35px;height:35px;font-size:1.1rem;font-weight:700;display:flex}.takeaway-item p{color:#475569;margin:0;font-size:.95rem;line-height:1.6}@media (width<=1024px){.accordion-page{padding:30px 18px}.accordion-header{margin-bottom:50px}.accordion-header h1{font-size:2.4rem}.pattern-section{padding:35px 25px}.pattern-section h2{margin-bottom:20px;font-size:1.6rem}.diagrams-container{grid-template-columns:1fr;gap:25px}}@media (width<=768px){.accordion-page{max-width:100%;padding:25px 15px}.accordion-header{margin-bottom:40px}.accordion-header h1{margin-bottom:12px;font-size:2rem}.accordion-header p{font-size:.95rem;line-height:1.5}.learn-more-link{padding:10px 20px;font-size:.9rem}.pattern-section{margin-bottom:40px;padding:25px 18px}.pattern-section h2{margin-bottom:18px;font-size:1.4rem}.problem-grid{grid-template-columns:1fr;gap:15px}.problem-card{padding:18px}.problem-card h3{font-size:1rem}.mental-model{padding:20px}.code-block{margin-bottom:15px;padding:12px;font-size:.85rem}.implementation-steps{grid-template-columns:1fr;gap:15px}.step{padding:18px}.step h3{margin-bottom:10px;font-size:1rem}.step p{margin-bottom:12px;font-size:.9rem}.guidance-box{margin-top:12px;padding:12px;font-size:.85rem}.accordion-header-content{padding:15px 18px;font-size:.95rem}.accordion-content{padding:16px 18px;font-size:.9rem;line-height:1.6}.accordion-content ul{margin:12px 0;padding-left:18px}.accordion-content li{margin-bottom:8px;font-size:.9rem}.comparison-table{font-size:.85rem}.comparison-table th,.comparison-table td{padding:12px 8px}.takeaways{grid-template-columns:1fr;gap:15px;margin-top:15px}.takeaway-item{gap:12px;padding:16px}.number{width:32px;height:32px;font-size:1rem}.takeaway-item p{font-size:.9rem}.diagram-card{padding:18px}.diagram-card h3{margin-bottom:12px;font-size:1rem}.diagram-caption{font-size:.85rem}.example-subtitle{margin-bottom:20px;font-size:.95rem}}@media (width<=640px){.accordion-page{padding:20px 12px}.accordion-header{margin-bottom:35px}.accordion-header h1{margin-bottom:10px;font-size:1.65rem}.accordion-header p{font-size:.9rem}.learn-more-link{text-align:center;padding:10px 16px;font-size:.85rem;display:block}.pattern-section{border-radius:8px;margin-bottom:30px;padding:20px 15px}.pattern-section h2{margin-bottom:15px;font-size:1.25rem}.model-title{margin-bottom:12px;font-size:.9rem}.code-block{padding:10px;font-size:.8rem;line-height:1.4}.step{border-radius:6px;padding:15px}.step h3{margin-bottom:8px;font-size:.95rem}.step p{margin-bottom:10px;font-size:.85rem}.step code{font-size:.8rem}.guidance-box{margin-top:10px;padding:10px;font-size:.8rem}.accordion-header-content{padding:12px 15px;font-size:.9rem}.accordion-header-content:after{font-size:.7em}.accordion-content{padding:14px 15px;font-size:.85rem;line-height:1.5}.accordion-content ul{margin:10px 0;padding-left:16px}.accordion-content li{margin-bottom:6px;font-size:.85rem}.comparison-table table{font-size:.75rem}.comparison-table th,.comparison-table td{padding:8px 6px}.takeaway-item{gap:10px;padding:14px}.number{width:30px;min-width:30px;height:30px;font-size:.9rem}.takeaway-item p{font-size:.85rem}.diagram-card{padding:15px}.diagram-card h3{margin-bottom:10px;font-size:.95rem}.diagram-caption{font-size:.8rem}}@media (width<=480px){.accordion-page{padding:16px 10px}.accordion-header{margin-bottom:30px}.accordion-header h1{margin-bottom:8px;font-size:1.4rem}.accordion-header p{font-size:.85rem;line-height:1.4}.learn-more-link{padding:9px 14px;font-size:.8rem}.pattern-section{margin-bottom:25px;padding:18px 12px}.pattern-section h2{margin-bottom:12px;font-size:1.1rem}.problem-card{padding:15px}.problem-card h3{margin-bottom:8px;font-size:.9rem}.problem-card p{font-size:.8rem}.model-title{font-size:.85rem}.code-block{padding:8px;font-size:.75rem;line-height:1.3}.step{padding:14px}.step h3{font-size:.9rem}.step p{font-size:.8rem}.guidance-box{padding:8px;font-size:.75rem}.accordion-header-content{padding:12px;font-size:.85rem}.accordion-content{padding:12px;font-size:.8rem}.accordion-content ul{margin:8px 0;padding-left:14px}.accordion-content li{margin-bottom:5px;font-size:.8rem}.comparison-table th,.comparison-table td{padding:6px 4px;font-size:.7rem}.takeaway-item{gap:8px;padding:12px}.number{width:28px;min-width:28px;height:28px;font-size:.85rem}.takeaway-item p{font-size:.8rem}.diagram-card{padding:12px}.diagram-card h3{margin-bottom:10px;font-size:.9rem}.diagram-image{margin-bottom:10px}.diagram-caption{font-size:.75rem}.example-subtitle{margin-bottom:15px;font-size:.85rem}}.render-props-page{background:#f8fafc;min-height:100vh;padding:40px 20px}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tracker-grid{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:30px;display:grid}.tracker-example{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;padding:20px;display:flex}.tracker-example h4{color:#0f172a;text-align:center;margin:0 0 15px;font-size:1rem;font-weight:600}.tracker-box{background:#fff;border:2px solid #e2e8f0;border-radius:8px;flex:1;align-items:stretch;width:100%;height:380px;display:flex;position:relative;overflow:hidden}.tracker-simple{background:linear-gradient(135deg,#f0f9ff 0%,#fff 100%);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.coords-text{color:#3b82f6;text-align:center;letter-spacing:.5px;font-size:1.4rem;font-weight:700}.tracker-circle{background:radial-gradient(circle,#3b82f614,#3b82f605,#0000);width:100%;height:100%;position:relative}.cursor-dot{pointer-events:none;background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);border:3px solid #fff;border-radius:50%;width:20px;height:20px;transition:all 50ms;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 12px #3b82f680}.tracker-gradient{color:#64748b;justify-content:center;align-items:center;width:100%;height:100%;font-size:1.1rem;font-weight:600;transition:background 50ms linear;display:flex}.tracker-distance{background:linear-gradient(135deg,#f0f9ff 0%,#faf5ff 100%);flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;display:flex}.tracker-distance .status{font-size:2.5rem;transition:transform .1s}.tracker-distance .status.close{animation:.5s ease-in-out pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.illustration-section{background:#f8fafc;border-radius:12px;justify-content:center;align-items:center;margin:0 0 30px;padding:30px;display:flex}.pattern-illustration{border-radius:8px;max-width:100%;height:auto;display:block;box-shadow:0 4px 12px #0000001a}.guide-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;display:grid}.guide-section{background:#f8fafc;border-left:4px solid #3b82f6;border-radius:12px;padding:20px}.guide-section h3{color:#0f172a;margin:0 0 12px;font-size:1rem;font-weight:600}.guide-section p{color:#64748b;margin:8px 0;font-size:.95rem;line-height:1.6}.guide-section ol{margin:0;padding-left:20px}.guide-section li{color:#64748b;margin-bottom:8px;line-height:1.8}.guide-section strong{color:#0f172a}.code-block{color:#0f172a;background:#fff;border-left:3px solid #3b82f6;border-radius:6px;margin:12px 0;padding:12px 15px;font-family:Courier New,monospace;font-size:.85rem;line-height:1.4;display:block;overflow-x:auto}.benefits{margin:8px 0;padding:0;list-style:none}.benefits li{color:#64748b;padding:8px 0;font-size:.95rem;line-height:1.6}.benefits strong{color:#0f172a}.hook-comparison{background:#f8fafc;border-radius:12px;grid-template-columns:1fr auto 1fr;align-items:flex-start;gap:20px;margin-bottom:30px;padding:20px;display:grid}.hook-section{flex-direction:column;display:flex}.hook-section h3{color:#0f172a;margin:0 0 12px;font-size:.95rem;font-weight:600}.hook-section .code-example{color:#0f172a;white-space:pre-wrap;word-break:break-all;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin:10px 0;padding:15px;font-family:Courier New,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto}.divider{color:#cbd5e1;align-items:center;margin-top:30px;font-size:1.5rem;font-weight:300;display:flex}.annotation{color:#94a3b8;margin:8px 0 0;font-size:.85rem;font-style:italic}.hook-details{background:#f8fafc;border-left:4px solid #3b82f6;border-radius:12px;padding:20px}.hook-details h4{color:#0f172a;margin:0 0 15px;font-size:.95rem;font-weight:600}.comparison-table{border-collapse:collapse;width:100%;font-size:.9rem}.comparison-table th{text-align:left;color:#0f172a;background:#fff;border-bottom:2px solid #3b82f6;padding:12px;font-weight:600}.comparison-table td{color:#64748b;border-bottom:1px solid #e2e8f0;padding:12px}.comparison-table tr:hover{background:#fff}.interview-qa{gap:20px;display:grid}.qa{background:#f8fafc;border-left:4px solid #3b82f6;border-radius:12px;padding:20px}.qa h3{color:#0f172a;margin:0 0 12px;font-size:.95rem;font-weight:600}.answer{color:#64748b;line-height:1.7}.answer p{margin:10px 0;font-size:.95rem}.answer ul{margin:10px 0;padding-left:20px}.answer li{margin-bottom:8px;font-size:.95rem;line-height:1.6}.answer strong{color:#0f172a}.code-block.large{margin:15px 0;padding:15px;font-size:.8rem}@media (width<=1024px){.page-content{gap:30px}.card-header,.card-content{padding:25px}.page-header h1{font-size:2rem}.hook-comparison{grid-template-columns:1fr}.divider{display:none}}@media (width<=768px){.render-props-page{padding:20px 15px}.page-header{margin-bottom:40px}.page-header h1{font-size:1.5rem}.page-header p{font-size:.95rem}.card-header,.card-content{padding:20px}.tracker-grid{grid-template-columns:1fr}.tracker-box{height:150px}.guide-grid{grid-template-columns:1fr}.illustration-section{margin:0 0 20px;padding:20px}.pattern-illustration{max-width:100%}.hook-comparison{padding:15px}.hook-section .code-example{font-size:.75rem}}.tabs-list{border-bottom:2px solid #e2e8f0;gap:8px;margin-bottom:20px;display:flex}.tabs-tab{cursor:pointer;color:#6b7280;background:0 0;border:none;border-bottom:3px solid #0000;padding:12px 20px;font-size:.95rem;font-weight:500;transition:all .2s;position:relative;bottom:-2px}.tabs-tab:hover{color:#4f46e5;background:#4f46e50a}.tabs-tab--active{color:#4f46e5;border-bottom-color:#4f46e5;font-weight:600}.tabs-panel{background:#f8fafc;border-radius:8px;padding:20px;animation:.3s ease-out slideIn}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=768px){.tabs-list{gap:4px}.tabs-tab{padding:10px 15px;font-size:.85rem}.tabs-panel{padding:15px}}.tabs-pattern-page{background:#f8fafc;min-height:100vh;padding:40px 20px}.page-header{text-align:center;max-width:700px;margin:0 auto 60px}.badge-large{color:#fff;letter-spacing:.5px;background:#4f46e5;border-radius:20px;margin-bottom:20px;padding:8px 16px;font-size:.85rem;font-weight:600;display:inline-block}.page-header h1{color:#1a202c;margin:0 0 15px;font-size:2.5rem;font-weight:700;line-height:1.3}.page-header p{color:#6b7280;margin:0;font-size:1.1rem;line-height:1.6}.page-content{gap:40px;max-width:1100px;margin:0 auto;display:grid}.card{background:#fff;border-radius:16px;transition:all .3s;animation:.6s ease-out slideUp;overflow:hidden;box-shadow:0 1px 3px #0000000d}.card:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0000001a}.card-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:30px 30px 20px}.badge{color:#4f46e5;letter-spacing:.5px;background:#4f46e51a;border-radius:12px;margin-bottom:12px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-block}.card-header h2{color:#1a202c;margin:12px 0 8px;font-size:1.6rem;font-weight:700}.card-header p{color:#6b7280;margin:0;font-size:.95rem}.card-content{padding:30px}.panel-content{animation:.3s ease-out slideIn}.panel-content h3{color:#0f172a;margin:0 0 15px;font-size:1.3rem;font-weight:600}.panel-content p{color:#64748b;margin:0 0 15px;font-size:.95rem;line-height:1.7}.code-block{color:#e2e8f0;background:#1e293b;border-radius:8px;margin:20px 0;padding:20px;overflow-x:auto}.code-block pre{margin:0;font-family:Courier New,monospace;font-size:.85rem;line-height:1.5}code{color:#3b82f6;background:#3b82f61a;border-radius:4px;padding:2px 6px;font-family:Courier New,monospace;font-size:.9rem}.benefits-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.benefits-list li{color:#64748b;padding:8px 0;font-size:.95rem;line-height:1.6}.benefits-list strong{color:#0f172a}.use-cases-list{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin:0;padding:0;list-style:none;display:grid}.use-cases-list li{color:#64748b;background:#f8fafc;border-left:4px solid #3b82f6;border-radius:8px;padding:15px;font-size:.95rem;line-height:1.6}.use-cases-list strong{color:#0f172a;margin-bottom:5px;display:block}.concept{background:#f8fafc;border:2px solid #e2e8f0;border-radius:12px;padding:20px;transition:all .3s}.concept:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f61a}.concept h3{color:#0f172a;margin:0 0 12px;font-size:1.1rem;font-weight:600}.concept p{color:#64748b;margin:0;font-size:.95rem;line-height:1.6}.architecture{flex-direction:column;align-items:center;gap:20px;display:flex}.component-box{text-align:center;background:linear-gradient(135deg,#f0f9ff 0%,#faf5ff 100%);border:2px solid #3b82f6;border-radius:8px;min-width:200px;padding:20px 30px}.component-box.main{background:linear-gradient(135deg,#e0f2fe 0%,#f5f3ff 100%);border:3px solid #3b82f6}.component-box strong{color:#0f172a;margin-bottom:8px;font-size:1rem;display:block}.component-box small{color:#64748b;font-size:.85rem;line-height:1.5;display:block}.hierarchy{flex-wrap:wrap;justify-content:center;gap:15px;width:100%;display:flex}.architecture-note{color:#64748b;text-align:center;margin-top:10px;font-size:.95rem}@media (width<=1024px){.page-content{gap:30px}.card-header,.card-content{padding:25px}.page-header h1{font-size:2rem}}@media (width<=768px){.tabs-pattern-page{padding:20px 15px}.page-header{margin-bottom:40px}.page-header h1{font-size:1.5rem}.page-header p{font-size:.95rem}.card-header,.card-content{padding:20px}.concepts-grid,.use-cases-list{grid-template-columns:1fr}.hierarchy{flex-direction:column;gap:10px}.code-block{font-size:.75rem}}.app-header{z-index:100;background:#fff;border-bottom:1px solid #e2e8f0;padding:0;position:sticky;top:0;box-shadow:0 1px 3px #0000000d}.app-header__container{justify-content:space-between;align-items:center;max-width:1160px;height:60px;margin:0 auto;padding:0 24px;display:flex}.app-header__logo{color:#1a202c;letter-spacing:-.2px;align-items:center;gap:8px;font-size:16px;font-weight:700;text-decoration:none;transition:color .2s;display:flex}.app-header__logo:hover{color:#4f46e5}.app-header__nav{align-items:center;gap:4px;display:flex}.app-header__link{color:#6b7280;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}.app-header__link:hover{color:#1a202c;background:#f3f4f6}.app-main{background:#f8fafc;min-height:calc(100vh - 61px)}@media (width<=640px){.app-header__container{height:54px;padding:0 16px}.app-header__logo{font-size:14px}.app-header__link{padding:6px 10px;font-size:13px}}@media (prefers-color-scheme:dark){.app-header{background:#1a2332;border-bottom-color:#2d3f52;box-shadow:0 1px 3px #0003}.app-header__logo{color:#eceff5}.app-header__logo:hover{color:#8b93f7}.app-header__link{color:#a8b5c7}.app-header__link:hover{color:#f1f5f9;background:#1e293b}.app-main{background:#0f172a}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f8fafc;--bg2:#f1f5f9;--bg3:#eceff5;--bg4:#e2e8f0;--blue:#4f46e5;--blue2:#4f46e5;--green:#10b981;--purple:#8b5cf6;--cyan:#06b6d4;--amber:#f59e0b;--coral:#ef4444;--text:#3f4557;--muted:#6b7280;--border:#e2e8f0;--ff-head:"Syne", sans-serif;--ff-mono:"JetBrains Mono", monospace}.learn-page{background:#f8fafc;grid-template-columns:1fr 3fr;gap:0;min-height:100vh;padding:0;font-family:Syne,sans-serif;display:grid}.learn-header{text-align:left;background:#fff;border-bottom:1px solid #e2e8f0;grid-column:1/-1;max-width:100%;margin:0;padding:36px 40px;box-shadow:0 1px 3px #0000000d}.learn-page-title{color:#1a202c;letter-spacing:-1.2px;margin-bottom:8px;font-family:Syne,sans-serif;font-size:36px;font-weight:700}.learn-page-subtitle{color:#6b7280;max-width:600px;margin:0;font-size:14px;font-weight:500;line-height:1.5}.learn-content-wrapper{background:#fff;grid-area:2/2;max-width:100%;margin:0;overflow-y:auto}.lesson-panel-container{box-shadow:none;background:#fff;border-radius:0;flex-direction:column;min-height:auto;display:flex;overflow:visible}.lesson-hero{z-index:10;background:#fff;border-bottom:1px solid #e2e8f0;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:32px 48px;display:flex;position:sticky;top:0}.lesson-counter{text-transform:uppercase;letter-spacing:1.2px;color:#0ea5e9;font-family:JetBrains Mono,monospace;font-size:11px;font-weight:700}.lesson-progress-mini{align-items:center;gap:16px;display:flex}.lesson-nav-counter{color:#0f172a;background:#06b6d414;border-radius:6px;padding:6px 12px;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:700}.nav-button{color:#0d9488;cursor:pointer;background:0 0;border:1.5px solid #06b6d44d;border-radius:6px;padding:8px 16px;font-family:Syne,sans-serif;font-size:12px;font-weight:700;transition:all .15s cubic-bezier(.34,1.56,.64,1)}.nav-button:hover{background:#06b6d41a;border-color:#06b6d4;transform:translateY(-1px)}.nav-button:active{transform:translateY(0)}.nav-button.prev{order:-1}.lesson-footer{background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-top:1px solid #06b6d41a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:32px 48px;display:flex}.lesson-completion-indicator{flex:1}.completion-message{color:#15803d;background:#22c55e1a;border-left:4px solid #22c55e;border-radius:6px;padding:12px 16px;font-family:Syne,sans-serif;font-size:13px;font-weight:700}.lesson-nav-buttons{gap:12px;display:flex}.lesson-nav-btn{color:#0d9488;cursor:pointer;background:0 0;border:1.5px solid #06b6d44d;border-radius:6px;padding:10px 20px;font-family:Syne,sans-serif;font-size:13px;font-weight:700;transition:all .15s cubic-bezier(.34,1.56,.64,1)}.lesson-nav-btn:hover{background:#06b6d41a;border-color:#06b6d4;transform:translateY(-1px)}.lesson-nav-btn:active{transform:translateY(0)}.lesson-nav-btn.prev:before{content:"← "}.lesson-nav-btn.next:after{content:" →"}.learn-container{color:var(--text);font-family:var(--ff-head);background:linear-gradient(135deg,#f5f7fa 0%,#eef2f9 100%);min-height:100vh}.panel{background:#fff;min-height:auto;padding:40px}.panel-label{letter-spacing:3px;text-transform:uppercase;color:#0ea5e9;font-size:11px;font-family:var(--ff-mono);margin-bottom:4px;font-weight:700}.panel-title{color:#1e293b;font-size:32px;font-weight:800;font-family:var(--ff-head);letter-spacing:-1px;margin-bottom:12px}.panel-sub{color:#64748b;margin-bottom:28px;font-size:13px;font-weight:500;line-height:1.6}.divider{background:linear-gradient(90deg,#0ea5e9,#06b6d4);border-radius:2px;width:40px;height:3px;margin-bottom:24px}.timeline-wrap{margin-bottom:32px;position:relative}.timeline-track{align-items:flex-start;gap:0;display:flex;position:relative}.timeline-track:before{content:"";background:linear-gradient(90deg, #0f172a1a, #0ea5e9, var(--purple), var(--green));z-index:0;height:2px;position:absolute;top:28px;left:60px;right:60px}.t-node{z-index:1;flex-direction:column;flex:1;align-items:center;display:flex;position:relative}.t-icon{border:1.5px solid;border-radius:12px;justify-content:center;align-items:center;width:56px;height:56px;margin-bottom:8px;font-size:22px;display:flex;position:relative}.t-era{font-size:9px;font-family:var(--ff-mono);letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}.t-name{text-align:center;font-size:12px;font-weight:700;line-height:1.2}.t-ar{color:var(--muted);font-size:9px;font-family:var(--ff-mono);text-align:center;margin-top:2px}.t-dot{border:2px solid var(--bg);border-radius:50%;width:8px;height:8px;position:absolute;bottom:-14px;left:50%;transform:translate(-50%)}.matrix-wrap{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}.matrix-head{background:var(--bg3);border-bottom:1px solid var(--border);grid-template-columns:140px repeat(3,1fr);display:grid}.matrix-row{border-bottom:1px solid var(--border);grid-template-columns:140px repeat(3,1fr);align-items:center;display:grid}.matrix-row:last-child{border-bottom:none}.mh-cell{letter-spacing:1px;text-transform:uppercase;font-size:11px;font-weight:700;font-family:var(--ff-mono);padding:10px 12px}.mh-cell.r{text-align:center}.mc-label{color:var(--muted);font-size:12px;font-family:var(--ff-mono);padding:10px 12px}.mc-bar-wrap{padding:10px 12px}.mc-bar{background:#ffffff0f;border-radius:3px;height:6px;margin-bottom:4px;position:relative;overflow:hidden}.mc-bar-fill{border-radius:3px;height:100%;transition:width 1.5s}.mc-val{font-size:10px;font-family:var(--ff-mono);color:var(--muted)}.mc-tag{font-size:9px;font-family:var(--ff-mono);letter-spacing:.5px;border-radius:4px;padding:2px 6px;font-weight:700;display:inline-block}.mc-heatmap{align-items:center;gap:3px;padding:10px 12px;display:flex}.heat-block{border-radius:3px;width:14px;height:20px}.arch-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;display:grid}.arch-full{margin-bottom:10px}.card{background:#fff;border:1.5px solid #3341551a;border-radius:12px;padding:18px;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;box-shadow:0 2px 8px #0f172a0a}.card:hover{border-color:#33415533;transform:translateY(-2px);box-shadow:0 8px 20px #0f172a1a}.card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.card.blue:before{background:linear-gradient(90deg,#0284c7,#06b6d4)}.card.green:before{background:linear-gradient(90deg,#059669,#10b981)}.card.purple:before{background:linear-gradient(90deg,#6d28d9,#8b5cf6)}.card.cyan:before{background:linear-gradient(90deg,#0891b2,#06b6d4)}.card.amber:before{background:linear-gradient(90deg,#b45309,#d97706)}.card-icon{margin-bottom:10px;font-size:28px;display:block}.card-name{color:#1e293b;font-size:14px;font-weight:700;font-family:var(--ff-head);margin-bottom:4px}.card-ar{font-size:11px;font-family:var(--ff-mono);color:var(--muted);margin-bottom:8px}.card-desc{color:var(--muted);font-size:11px;line-height:1.5;font-family:var(--ff-mono)}.flow-row{align-items:center;gap:6px;margin:8px 0;display:flex}.flow-label{font-size:10px;font-family:var(--ff-mono);border-radius:4px;padding:3px 8px}.flow-arrow{color:var(--muted);font-size:14px}.hook-badge{font-size:10px;font-family:var(--ff-mono);border-radius:5px;align-items:center;gap:4px;margin:2px;padding:3px 8px;font-weight:700;display:inline-flex}.warning-box{background:#ef44440f;border:1px solid #ef44444d;border-radius:8px;align-items:flex-start;gap:8px;margin-top:8px;padding:10px 12px;display:flex}.warning-icon{flex-shrink:0;margin-top:1px;font-size:16px}.warning-text{font-size:10px;font-family:var(--ff-mono);color:#fca5a5;line-height:1.6}.context-glow{position:relative}.context-glow:after{content:"";pointer-events:none;border:1.5px dashed #a855f773;border-radius:14px;position:absolute;inset:-4px}.tree-node{font-size:11px;font-family:var(--ff-mono);border-radius:7px;align-items:center;gap:5px;padding:5px 10px;font-weight:700;display:inline-flex}.tree-wrap{flex-direction:column;align-items:center;gap:4px;display:flex}.tree-row{align-items:center;gap:8px;display:flex}.connector-v{background:#ffffff26;width:1px;height:12px}.branch{flex-direction:column;align-items:center;display:flex}.cap-label{font-size:9px;font-family:var(--ff-mono);color:var(--muted);letter-spacing:1px;text-transform:uppercase}.steps-row{flex-wrap:wrap;align-items:stretch;gap:10px;margin-bottom:14px;display:flex}.step{background:var(--bg2);border:1px solid var(--border);border-radius:12px;flex:1;min-width:150px;padding:14px;position:relative}.step-num{opacity:.07;font-size:28px;font-weight:800;font-family:var(--ff-mono);position:absolute;top:10px;right:12px}.step-icon{margin-bottom:6px;font-size:22px}.step-label{font-size:9px;font-family:var(--ff-mono);letter-spacing:2px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}.step-title{margin-bottom:6px;font-size:13px;font-weight:700}.step-cmd{font-size:10px;font-family:var(--ff-mono);color:#4ade80;background:#000;border:1px solid #ffffff0f;border-radius:7px;padding:8px 10px;line-height:1.6}.step-arrow{color:var(--muted);justify-content:center;align-items:center;padding-top:20px;font-size:20px;display:flex}.dir-tree{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden}.dir-header{background:var(--bg3);border-bottom:1px solid var(--border);align-items:center;gap:8px;padding:10px 14px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.dir-body{font-family:var(--ff-mono);padding:12px 14px;font-size:11px;line-height:1.9}.dir-folder{color:#60a5fa;font-weight:700}.dir-file{color:#94a3b8}.dir-indent1{padding-left:16px}.dir-indent2{padding-left:32px}.dir-indent3{padding-left:48px}.dir-badge{vertical-align:middle;letter-spacing:.5px;border-radius:3px;margin-left:6px;padding:1px 5px;font-size:8px;font-weight:700;display:inline-block}.ext-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;display:grid}.ext-item{background:var(--bg3);border:1px solid var(--border);border-radius:8px;align-items:flex-start;gap:8px;padding:8px 10px;display:flex}.ext-icon{flex-shrink:0;font-size:18px}.ext-name{color:var(--text);font-size:11px;font-weight:700}.ext-desc{font-size:9px;font-family:var(--ff-mono);color:var(--muted)}.compare-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;display:grid}.path-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px}.path-header{border-bottom:1px solid var(--border);align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;display:flex}.path-icon{font-size:22px}.path-badge{font-size:9px;font-family:var(--ff-mono);letter-spacing:1.5px;text-transform:uppercase;border-radius:5px;padding:3px 8px;font-weight:700}.path-title{font-size:14px;font-weight:800}.code-block{font-size:10px;font-family:var(--ff-mono);border-radius:8px;margin-bottom:8px;padding:10px;line-height:1.75}.code-bad{background:#ef44440f;border:1px solid #ef444433}.code-good{background:#22c55e0d;border:1px solid #22c55e33}.checklist{font-size:11px;font-family:var(--ff-mono);line-height:1.8;list-style:none}.checklist li:before{margin-right:6px;font-size:12px}.checklist li.bad:before{content:"✗";color:#ef4444}.checklist li.good:before{content:"✓";color:#22c55e}.checklist li.bad{color:#fca5a5}.checklist li.good{color:#86efac}.git-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px}.git-header{align-items:center;gap:10px;margin-bottom:14px;display:flex}.git-timeline{flex-direction:column;gap:0;display:flex}.git-commit{align-items:flex-start;gap:12px;padding:8px 0;display:flex;position:relative}.git-commit:before{content:"";background:#ffffff14;width:1px;position:absolute;top:28px;bottom:-8px;left:7px}.git-commit:last-child:before{display:none}.git-dot{border:2px solid;border-radius:50%;flex-shrink:0;width:16px;height:16px;margin-top:2px}.git-meta{flex:1}.git-msg{font-size:12px;font-family:var(--ff-mono);margin-bottom:2px;font-weight:700}.git-hash,.git-files{font-size:9px;font-family:var(--ff-mono);color:var(--muted)}.git-push{font-family:var(--ff-mono);color:#4ade80;background:#22c55e14;border:1px solid #22c55e40;border-radius:10px;padding:12px 16px;font-size:11px}.portfolio-badge{font-family:var(--ff-mono);color:#60a5fa;background:#3b82f61a;border:1px solid #3b82f64d;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:11px;font-weight:700;display:inline-flex}.badge-tag{font-size:9px;font-family:var(--ff-mono);border-radius:5px;padding:3px 8px;display:inline-block}.panel-insights{background:#fff}.insights-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.insight-card{background:#fff;border:1.5px solid;border-radius:10px;padding:18px;transition:all .2s}.insight-card:hover{border-color:#3341554d;transform:translateY(-2px);box-shadow:0 8px 16px #0f172a1a}.insight-header{align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.insight-icon{flex-shrink:0;font-size:2rem}.insight-titles{flex:1}.insight-title{color:#0f172a;margin:0 0 4px;font-size:15px;font-weight:700}.insight-ar{color:#64748b;margin:0;font-family:JetBrains Mono,monospace;font-size:11px}.insight-description{color:#475569;margin:0;font-size:13px;line-height:1.6}.insight-badge{background:#ffffff0d;border:1px solid;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;display:inline-block}.insights-legend{border-top:1px solid var(--border);flex-wrap:wrap;gap:2rem;margin-top:2rem;padding-top:1.5rem;display:flex}.legend-item{align-items:center;gap:.75rem;font-size:13px;display:flex}.legend-dot{border:2px solid;border-radius:50%;flex-shrink:0;width:12px;height:12px}.panel-architecture{background:#fff}.architecture-section{margin:2rem 0}.section-title{color:var(--blue);text-transform:uppercase;letter-spacing:1px;margin:1.5rem 0 1rem;font-size:16px;font-weight:600}.component-tree{border:1px solid var(--border);background:#0000004d;border-radius:12px;margin:2rem 0;padding:2rem}.tree-root{background:linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);border-radius:8px;margin-bottom:2rem;padding:1rem}.tree-node{background:#3b82f61f;border:1px solid #3b82f666;border-radius:8px;align-items:center;gap:.75rem;margin-bottom:1rem;padding:1rem;display:flex}.tree-root,.tree-node{color:#fff;font-size:14px;font-weight:500}.tree-root small,.tree-node small{color:#ffffffb3;margin-top:4px;font-size:12px;font-weight:400;display:block}.node-icon{flex-shrink:0;font-size:20px}.node-text{flex:1}.tree-children{border-left:2px solid var(--blue);margin-left:2rem;padding-left:1rem;position:relative}.flow-labels{color:var(--muted);justify-content:space-between;margin-top:1.5rem;font-size:12px;font-weight:600;display:flex}.architecture-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.arch-box{border:1px solid;border-radius:10px;padding:1.5rem}.arch-hook{background:#08504133;border-color:#5dcaa566}.arch-service{background:#63380633;border-color:#ef9f2766}.arch-header{color:var(--text);margin-bottom:.75rem;font-size:15px;font-weight:600}.arch-description{color:var(--muted);margin-bottom:1rem;font-size:13px}.arch-code{font-size:11px;font-family:var(--ff-mono);color:var(--cyan);white-space:nowrap;background:#0000004d;border-radius:6px;padding:.75rem;display:block;overflow-x:auto}.architecture-patterns{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin:2rem 0;display:grid}.key-concept{background:#3b82f61a;border:1px solid #3b82f64d;border-radius:10px;padding:1.5rem}.concept-title{color:var(--blue);margin:0 0 1rem;font-size:14px;font-weight:600}.concept-list{margin:0;padding-left:1.25rem;list-style:none}.concept-list li{color:var(--text);margin-bottom:.5rem;padding-left:.5rem;font-size:13px;line-height:1.6;position:relative}.concept-list li:before{content:"→";color:var(--blue);position:absolute;left:-1rem}.re-render-cycle{background:#a855f71a;border:1px solid #a855f74d;border-radius:10px;margin:2rem 0;padding:1.5rem}.cycle-title{color:var(--purple);margin:0 0 1rem;font-size:14px;font-weight:600}.cycle-steps{flex-wrap:wrap;align-items:center;gap:.75rem;font-size:13px;display:flex}.cycle-step{white-space:nowrap;background:#a855f733;border-radius:6px;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex}.step-num{background:var(--purple);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:600;display:flex}.cycle-arrow{color:var(--purple);font-weight:600}.panel-state-matrix{background:#fff}.decision-flow{gap:1rem;max-width:100%;margin:2rem 0;display:grid}.flow-box{color:#0f172a;background:#3b82f614;border-left:4px solid #3b82f6;border-radius:8px;justify-content:space-between;align-items:center;padding:14px;font-size:13px;display:flex}.flow-box strong{font-weight:600}.flow-answer{color:var(--green);white-space:nowrap;background:#22c55e33;border-radius:4px;padding:.4rem .8rem;font-weight:600}.matrix-section-title{margin-top:2rem}.state-options-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin:2rem 0;display:grid}.state-option-card{border:1px solid;border-radius:12px;padding:1.5rem;transition:transform .2s cubic-bezier(.16,1,.3,1)}.state-option-card.color-local{background:#22c55e14;border-color:#22c55e40}.state-option-card.color-context{background:#6366f114;border-color:#6366f140}.state-option-card.color-zustand{background:#06b6d414;border-color:#06b6d440}.state-option-card.color-rq{background:#f59e0b14;border-color:#f59e0b40}.state-option-card:hover{transform:translateY(-4px)}.soc-header{gap:1rem;margin-bottom:1rem;display:flex}.soc-icon{flex-shrink:0;font-size:24px}.soc-titles{flex:1}.soc-tool{color:var(--text);margin:0 0 4px;font-size:16px;font-weight:600}.soc-ar{color:var(--muted);font-size:12px;font-family:var(--ff-mono);margin:0}.soc-when{color:var(--text);margin:0 0 1rem;font-size:13px;line-height:1.5}.soc-list{grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem;display:grid}.soc-pros strong,.soc-cons strong{color:var(--text);margin-bottom:.5rem;font-size:12px;display:block}.soc-pros ul,.soc-cons ul{margin:0;padding-left:1.2rem;list-style:outside}.soc-pros li,.soc-cons li{color:var(--text);margin-bottom:.4rem;font-size:12px;line-height:1.4}.anti-patterns{margin:2rem 0}.anti-title{color:var(--coral);margin:0 0 1.5rem;font-size:16px;font-weight:600}.anti-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;display:grid}.anti-item{border:1px solid;border-radius:10px;padding:1.5rem}.anti-bad{background:#791f1f26;border-color:#f095954d}.anti-good{background:#27500a26;border-color:#97c4594d}.anti-item strong{margin-bottom:.75rem;font-size:14px;display:block}.anti-item p{margin:0 0 .75rem;font-size:13px;line-height:1.5}.anti-item small{color:var(--muted);font-size:12px;font-weight:600;display:block}.panel-primitives{background:#fff}.primitives-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;margin:2rem 0;display:grid}.primitive-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s cubic-bezier(.16,1,.3,1)}.primitive-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000014}.primitive-header{gap:1rem;margin-bottom:1.5rem;display:flex}.primitive-icon{flex-shrink:0;font-size:2.5rem}.primitive-titles{flex:1}.primitive-name{color:#0f172a;margin:0 0 4px;font-size:18px;font-weight:700}.primitive-ar{color:#64748b;font-size:12px;font-family:var(--ff-mono);margin:0}.primitive-metaphor{color:#475569;background:#cbd5e166;border-radius:6px;margin-bottom:1rem;padding:.75rem;font-size:13px;font-style:italic}.primitive-definition{color:#475569;border-left:3px solid #cbd5e1;margin-bottom:1.5rem;padding-left:1rem;font-size:13px;line-height:1.6}.primitive-section{margin-bottom:1.5rem}.primitive-section strong{text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin-bottom:.75rem;font-size:12px;display:block}.primitive-list{margin:0;padding-left:1.25rem;list-style:outside}.primitive-list li{color:#475569;margin-bottom:.4rem;font-size:12px;line-height:1.4}.primitive-list.compact li{margin-bottom:.25rem}.section-label{text-transform:uppercase;letter-spacing:.5px;color:#64748b;margin-bottom:.75rem;font-size:12px;display:block}.primitive-awareness{border-top:1px solid #e2e8f0;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1rem;display:grid}.knows strong,.ignores strong{color:#64748b;margin-bottom:.5rem;font-size:11px;display:block}.knows ul,.ignores ul{margin:0;padding:0;list-style:none}.knows li,.ignores li{color:#64748b;margin-bottom:.3rem;font-size:11px}.primitives-interaction{background:#3b82f60f;border:1px solid #bfdbfe;border-radius:12px;margin:2rem 0;padding:2rem}.interaction-title{color:#0ea5e9;margin:0 0 1.5rem;font-size:16px;font-weight:600}.interaction-flow{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.flow-stage{text-align:center;background:#3b82f614;border:2px solid #3b82f640;border-radius:10px;flex-direction:column;align-items:center;gap:.5rem;min-width:200px;padding:1.5rem;display:flex}.flow-icon{font-size:2rem}.flow-label{color:#0f172a;font-size:14px;font-weight:600}.flow-stage p{color:#64748b;margin:0;font-size:12px}.flow-connector{color:#0ea5e9;font-size:20px}.flow-feedback{color:#22c55e;font-size:12px}.design-principles{margin:2rem 0}.principles-title{color:#0ea5e9;margin:0 0 1.5rem;font-size:16px;font-weight:600}.principles-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;display:grid}.principle{text-align:center;background:#a855f714;border:1px solid #a855f740;border-radius:10px;padding:1.5rem}.principle-icon{margin-bottom:.75rem;font-size:28px;display:block}.principle strong{color:#0f172a;margin-bottom:.75rem;font-size:13px;display:block}.principle p{color:#64748b;margin:0;font-size:12px;line-height:1.5}.anti-patterns-primitives{background:#ef444414;border:1px solid #ef444440;border-radius:10px;margin:2rem 0;padding:1.5rem}.anti-patterns-primitives .anti-title{color:#ef4444;margin-top:0}.anti-list{margin:0;padding-left:1.5rem;list-style:outside}.anti-list li{color:#475569;margin-bottom:.75rem;font-size:13px;line-height:1.5}.anti-list strong{color:#ef4444}.related-resources{background:linear-gradient(135deg,#f8fafc 0%,#f3f4f6 100%);border:1px solid #e2e8f0;border-radius:12px;margin:2.5rem 0;padding:2rem}.resources-title{color:#1a202c;margin:0 0 8px;font-size:1.3rem;font-weight:700}.resources-subtitle{color:#6b7280;margin:0 0 20px;font-size:.95rem;line-height:1.5}.panel-rq-cache{background:#fff}.cache-states-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;margin:2rem 0;display:grid}.cache-state-card{background-color:#fff;border:2px solid;border-radius:12px;padding:1.5rem;transition:all .2s cubic-bezier(.16,1,.3,1)}.cache-state-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000014}.cache-state-card.state-empty{background-color:#cbd5e10f;border-color:#cbd5e1}.cache-state-card.state-fetching{background-color:#f59e0b14;border-color:#f59e0b}.cache-state-card.state-fresh{background-color:#10b98114;border-color:#10b981}.cache-state-card.state-stale{background-color:#f9731614;border-color:#f97316}.state-header{align-items:center;gap:.8rem;margin-bottom:1rem;display:flex}.state-icon{font-size:2rem}.state-header h4{color:#0f172a;margin:0;font-size:1.1rem}.state-details{flex-direction:column;gap:.8rem;display:flex}.detail-row{color:#64748b;font-size:.95rem}.detail-row strong{color:#0f172a;margin-bottom:.3rem;display:block}.status-badge{color:#0f172a;background-color:#33415514;border-radius:6px;padding:.25rem .75rem;font-size:.85rem;font-weight:500;display:inline-block}.lifecycle-flow-section{background-color:#06b6d40f;border-left:4px solid #06b6d4;border-radius:8px;margin:2rem 0;padding:1.5rem}.invalidation-box{background-color:#cbd5e114;border:1px dashed #cbd5e1;border-radius:8px;padding:1.5rem}.invalidation-steps{flex-direction:column;gap:1rem;margin:0;padding:0;list-style:none;display:flex}.invalidation-steps li{align-items:flex-start;gap:1rem;display:flex}.step-number{color:#fff;background-color:#06b6d4;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-weight:700;display:flex}.step-text{flex:1;padding-top:.25rem}.step-text code{background-color:#33415514;border-radius:4px;margin-top:.3rem;padding:.5rem;font-size:.85rem;display:block;overflow-x:auto}.panel-rq-orchestration{background:#fff}.orchestration-grid{grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2rem 0;display:grid}.orchestration-card{text-align:center;background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:.8rem;padding:1.3rem;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex}.orchestration-card:hover{border-color:#06b6d4;transform:translateY(-6px);box-shadow:0 4px 12px #00000014}.feature-icon{margin-bottom:.3rem;font-size:2.5rem}.orchestration-card h4{color:#0f172a;margin:0;font-size:1rem}.feature-description{color:#64748b;margin:0;font-size:.9rem}.feature-benefit{color:#06b6d4;margin:0;font-size:.85rem}.orchestration-flow-diagram{background-color:#06b6d40f;border-radius:12px;margin:2rem 0;padding:2rem}.flow-layers{flex-direction:column;gap:1rem;margin-top:1.5rem;display:flex}.flow-layer{text-align:center;background-color:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:1.5rem}.flow-layer.orchestration-box-large{padding:2rem}.layer-label{color:#06b6d4;margin-bottom:1rem;font-size:1.05rem;font-weight:600;display:block}.orchestration-internals{grid-template-columns:repeat(5,1fr);gap:.8rem;margin-top:1rem;display:grid}.internal-box{color:#0f172a;background-color:#06b6d414;border:1px solid #06b6d440;border-radius:6px;padding:.8rem;font-size:.85rem}.flow-arrow{text-align:center;color:#06b6d4;font-size:1.5rem;font-weight:700}.panel-state-types{background:#fff}.state-comparison-table{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;margin:2rem 0;overflow:hidden}.comparison-header{color:#0f172a;background-color:#6366f114;border-bottom:2px solid #e2e8f0;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;padding:1.2rem;font-weight:600;display:grid}.comparison-row{border-bottom:1px solid #f1f5f9;grid-template-columns:1.5fr 1fr 1fr;gap:1rem;padding:1.2rem;display:grid}.comparison-row:last-child{border-bottom:none}.comparison-aspect{color:#06b6d4;font-weight:600}.comparison-client,.comparison-server{flex-direction:column;gap:.5rem;display:flex}.comparison-label{color:#64748b;text-transform:uppercase;font-size:.8rem;font-weight:600}.state-tool-cards{grid-template-columns:repeat(2,1fr);gap:2rem;margin:2rem 0;display:grid}.state-tool-card{border:2px solid;border-radius:12px;padding:1.8rem}.client-state-card{background-color:#6366f114;border-color:#6366f140}.server-state-card{background-color:#22c55e14;border-color:#22c55e40}.tool-icon{margin-bottom:1rem;font-size:3rem}.state-tool-card h4{color:#0f172a;margin:0 0 1rem;font-size:1.3rem}.tool-description p{color:#475569;margin:.8rem 0;font-size:.95rem;line-height:1.5}.example-list{flex-direction:column;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none;display:flex}.example-list li{color:#64748b;padding-left:1.5rem;font-size:.9rem;position:relative}.example-list li:before{content:"→";color:#06b6d4;position:absolute;left:0}.architecture-principle-box{background-color:#06b6d40f;border-left:4px solid #06b6d4;border-radius:8px;margin-top:2rem;padding:1.5rem}.principle-example{color:#475569;border-left:2px dashed #06b6d4;margin:.8rem 0;padding-left:1rem;font-size:.9rem}.panel-patterns{background:#fff}.pattern-comparison-container{grid-template-columns:1fr auto 1fr;align-items:start;gap:2rem;margin:2rem 0;display:grid}.pattern-side{flex-direction:column;gap:1.5rem;display:flex}.pattern-renderprops{background-color:#f9731614;border:1px solid #f9731640}.pattern-hooks{background-color:#22c55e14;border:1px solid #22c55e40}.pattern-side h3{color:#0f172a;margin-top:0}.pattern-description{color:#64748b;margin:0;font-size:.9rem}.pattern-phase{background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1.3rem}.pattern-phase h4{color:#0f172a;margin:0 0 .8rem;font-size:1rem}.pattern-phase p{color:#475569;margin:.5rem 0;font-size:.9rem}.pattern-code{background-color:#33415514;border-radius:6px;margin-top:.8rem;padding:.8rem;font-size:.8rem;display:block;overflow-x:auto}.pattern-divider{background-color:#e2e8f0;border-radius:1px;width:2px}.pattern-note{text-align:center;border-radius:8px;padding:1rem;font-size:.9rem}.renderprops-note{color:#f97316;background-color:#f9731614;border:1px solid #f9731640}.hooks-note{color:#22c55e;background-color:#22c55e14;border:1px solid #22c55e40}.pattern-comparison-section{margin:2rem 0}.patterns-table{margin-top:1.5rem}.patterns-row{grid-template-columns:1.2fr 1.4fr 1.4fr}.comparison-renderprops,.comparison-hooks{flex-direction:column;gap:.5rem;display:flex}.practical-examples-box{background-color:#ffffff0f;border-radius:12px;margin:2rem 0;padding:1.5rem}.examples-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.panel h3,.panel h4,.panel h5{color:#1e293b;font-family:var(--ff-head);margin-top:24px;margin-bottom:12px}.panel h3{font-size:22px;font-weight:700}.panel h4{font-size:18px;font-weight:600}.panel p{color:#475569;margin-bottom:12px;line-height:1.7}.panel ul,.panel ol{color:#475569;margin-bottom:16px;margin-left:20px}.panel li{margin-bottom:8px;line-height:1.6}.info-badge{color:#0d9488;font-size:12px;font-weight:600;font-family:var(--ff-mono);background:#06b6d41a;border-left:3px solid #06b6d4;border-radius:4px;margin:0 4px;padding:4px 10px;display:inline-block}.code-block{color:#1e293b!important;font-family:var(--ff-mono)!important;background:#f0f4f8!important;border:1px solid #06b6d426!important;border-radius:8px!important;margin:16px 0!important;padding:16px!important;overflow-x:auto!important}.code-bad{background:#ef444414!important;border-left:4px solid #ef4444!important}.code-good{background:#22c55e14!important;border-left:4px solid #22c55e!important}.warning-box{background:#ef44440f;border:1.5px solid #ef444433;border-radius:10px;margin:16px 0;padding:16px}.warning-icon{margin-right:8px;font-size:20px;display:inline}.warning-text{color:#7f1d1d;font-size:13px;font-weight:600}button,.interactive-element{transition:all .3s cubic-bezier(.34,1.56,.64,1)!important}button:hover,.interactive-element:hover{transform:translateY(-2px)}.panel table{border-collapse:collapse;background:#fff;border:1px solid #3341551a;border-radius:8px;width:100%;margin:20px 0;overflow:hidden}.panel th{color:#1e293b;text-align:left;background:#06b6d414;border-bottom:2px solid #06b6d426;padding:12px;font-weight:700}.panel td{color:#475569;border-bottom:1px solid #33415514;padding:12px}.panel tr:last-child td{border-bottom:none}.panel tr:hover{background:#06b6d408}.scrollable-panels{scroll-behavior:smooth}.panel{color:#1e293b}.panel h1{color:#0f172a;letter-spacing:-1.2px;margin:32px 0 16px;font-family:Syne,sans-serif;font-size:36px;font-weight:800;line-height:1.1}.panel h2{color:#0f172a;letter-spacing:-.8px;border-bottom:3px solid #06b6d41a;margin:28px 0 12px;padding-bottom:12px;font-family:Syne,sans-serif;font-size:28px;font-weight:800;line-height:1.15}.panel h3{color:#1e293b;letter-spacing:-.3px;margin:20px 0 10px;font-family:Syne,sans-serif;font-size:20px;font-weight:700;line-height:1.2}.panel h4{color:#334155;margin:16px 0 8px;font-family:Syne,sans-serif;font-size:16px;font-weight:700}.panel h5{color:#475569;margin:12px 0 6px;font-family:Syne,sans-serif;font-size:14px;font-weight:700}.panel h6{color:#64748b;text-transform:uppercase;letter-spacing:.8px;margin:12px 0 6px;font-size:12px;font-weight:700}.panel p{color:#475569;margin-bottom:16px;font-size:14px;line-height:1.7}.panel strong{color:#0f172a;font-weight:700}.panel em{color:#64748b;font-style:italic}.panel ul,.panel ol{color:#475569;margin-bottom:20px;margin-left:24px;list-style-position:outside}.panel li{color:#475569;margin-bottom:10px;line-height:1.6}.panel blockquote{color:#64748b;background:#06b6d40d;border-left:4px solid #06b6d44d;border-radius:4px;margin:20px 0;padding:12px 16px;font-style:italic}@media (width<=1400px){.lesson-hero,.lesson-footer{padding:24px 36px}.panel{padding:32px}}@media (width<=1024px){.learn-page{grid-template-columns:1fr}.learn-header{grid-column:1}.lesson-nav-container{border-bottom:1px solid #0f172a14;border-right:none;grid-area:auto/1;max-height:none;position:relative;top:auto}.learn-content-wrapper{grid-column:1}.lesson-hero,.lesson-footer{padding:20px 28px}.panel{padding:24px}}@media (width<=768px){.learn-header{padding:24px 20px}.learn-page-title{font-size:28px}.lesson-nav-container{padding:16px}.lesson-hero{gap:12px;padding:16px 20px}.lesson-footer{flex-direction:column;align-items:flex-start;padding:16px 20px}.panel{padding:18px}.panel h1{font-size:28px}.panel h2{font-size:22px}.panel h3{font-size:18px}.lesson-nav-buttons{flex-direction:column;width:100%}.lesson-nav-btn{width:100%}}@media (width<=480px){.learn-header{padding:16px}.learn-page-title{font-size:24px}.learn-page-subtitle{font-size:13px}.lesson-nav-container{padding:12px}.lesson-hero{flex-wrap:nowrap;justify-content:flex-start;padding:12px 16px}.lesson-progress-mini{gap:8px}.nav-button{padding:6px 10px;font-size:11px}.lesson-footer{padding:12px 16px}.panel{padding:14px}.panel p{font-size:13px}.panel ul,.panel ol{margin-left:18px}}@media (width<=768px){.learn-page-title{font-size:32px}.panel-title{font-size:24px}.panel{padding:24px}.lesson-hero{padding:20px}.lesson-footer{flex-direction:column;align-items:flex-start;padding:20px}}*{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}.example-card{background-color:#ffffff0d;border:1px solid #ffffff1a;border-radius:10px;padding:1.3rem}.example-card h4{color:var(--text);margin:0 0 1rem}.example-card ul{margin:0 0 1rem;padding:0;list-style:none}.example-card li{color:var(--muted);padding:.4rem 0 .4rem 1.5rem;font-size:.9rem;position:relative}.example-card li:before{content:"→";color:var(--text);position:absolute;left:0}.example-reason{color:var(--cyan);margin:0;font-size:.85rem;font-style:italic}.panel-compound{background:#fff}.compound-overview-box{background-color:#6366f10f;border:1px solid #6366f140;border-radius:12px;margin:2rem 0;padding:1.5rem}.compound-overview-box p{color:#475569;margin:.8rem 0}.usage-example{background-color:#33415514;border-radius:8px;margin-top:1rem;padding:1.2rem;font-size:.85rem;line-height:1.6;display:block;overflow-x:auto}.component-roles-grid{grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2rem 0;display:grid}.component-role-card{background-color:#fff;border:2px solid;border-radius:12px;padding:1.3rem;transition:all .2s cubic-bezier(.16,1,.3,1)}.component-role-card.state-owner{background-color:#ec489914;border-color:#ec489940}.component-role-card.state-consumer{background-color:#6366f114;border-color:#6366f140}.component-role-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000014}.role-header{justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:1rem;display:flex}.role-header h4{color:#0f172a;margin:0;font-size:1rem}.ownership-badge,.consumer-badge{white-space:nowrap;border-radius:4px;padding:.25rem .6rem;font-size:.75rem;font-weight:600;display:inline-block}.ownership-badge{color:#ec4899;background-color:#ec48991a}.consumer-badge{color:#6366f1;background-color:#6366f11a}.role-details{flex-direction:column;gap:.8rem;display:flex}.responsibility,.example{margin:0;font-size:.9rem}.responsibility{color:#64748b}.example{font-family:var(--ff-mono);background-color:#cbd5e114;border-radius:4px;padding:.6rem}.example code{color:#06b6d4}.context-flow-diagram{background-color:#06b6d40f;border-radius:12px;margin:2rem 0;padding:2rem}.flow-section{flex-direction:column;gap:1.5rem;margin-top:1.5rem;display:flex}.flow-step{background-color:#fff;border:1px solid #e2e8f0;border-radius:10px;grid-template-columns:auto 1fr;gap:1.5rem;padding:1.5rem;display:grid}.step-number{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:3rem;height:3rem;font-size:1.3rem;font-weight:700;display:flex}.step-owner .step-number{color:#ec4899;background-color:#ec48991a;border:2px solid #ec489940}.step-provider .step-number,.step-consumer .step-number{color:#6366f1;background-color:#6366f11a;border:2px solid #6366f140}.step-content h4{color:#0f172a;margin:0 0 .8rem}.step-content p{color:#64748b;margin:.6rem 0;font-size:.95rem}.highlight{background-color:#06b6d414;border-left:2px solid #06b6d4;border-radius:4px;padding:.5rem .5rem .5rem 1rem}.code-snippet{font-family:var(--ff-mono);background-color:#33415514;border-radius:4px;padding:.8rem;font-size:.85rem;overflow-x:auto}.pattern-benefits-box{background-color:#06b6d40f;border-radius:12px;margin:2rem 0;padding:1.5rem}.benefits-list{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.benefit-item{background-color:#fff;border-left:3px solid #06b6d4;border-radius:8px;padding:1.2rem;font-size:.95rem}.benefit-item strong{color:#06b6d4}.pattern-tradeoff-box{background-color:#06b6d40f;border-radius:12px;margin:2rem 0;padding:1.5rem}.tradeoff-section{grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1.5rem;display:grid}.use-case{border-radius:10px;padding:1.3rem}.use-yes{background-color:#22c55e14;border:1px solid #22c55e40}.use-no{background-color:#ef444414;border:1px solid #ef444440}.use-case h4{color:#0f172a;margin:0 0 1rem}.use-case ul{margin:0;padding:0;list-style:none}.use-case li{color:#475569;padding:.4rem 0 .4rem 1.5rem;font-size:.9rem;position:relative}.use-case li:before{content:"•";position:absolute;left:0}.use-yes li:before{color:#22c55e}.use-no li:before{color:#ef4444}@media (width<=768px){.arch-grid,.compare-grid,.ext-grid,.insights-grid,.architecture-grid,.state-options-grid,.primitives-grid,.principles-grid,.anti-grid,.architecture-patterns,.design-principles,.soc-list,.cache-states-grid,.orchestration-grid,.state-tool-cards,.pattern-comparison-container,.component-roles-grid,.examples-grid,.benefits-list,.tradeoff-section{grid-template-columns:1fr}.steps-row,.cycle-steps,.interaction-flow{flex-direction:column}.pattern-comparison-container{grid-template-columns:1fr}.pattern-divider{display:none}.panel{padding:1rem}.panel-title{font-size:20px}.primitive-awareness{grid-template-columns:1fr}.insights-legend{flex-direction:column;gap:1rem}.orchestration-internals,.comparison-header,.comparison-row{grid-template-columns:1fr}.flow-layers{gap:.8rem}.primitives-grid{gap:1.2rem}.cache-states-grid,.component-roles-grid{gap:1rem}.orchestration-internals{gap:.6rem}.soc-list{gap:.8rem}.panel-primitives,.panel-rq-cache,.panel-compound{padding:16px!important}.principle,.primitive-card,.cache-state-card,.component-role-card,.state-option-card{padding:1rem}.comparison-header,.comparison-row{gap:.5rem}.state-tool-cards{gap:1.2rem}}@media (width<=480px){.learn-header{padding:12px}.learn-page-title{font-size:20px}.panel{padding:12px!important}.panel-title{font-size:18px}.panel-label{font-size:10px}.arch-grid,.primitives-grid,.cache-states-grid,.component-roles-grid,.state-options-grid,.orchestration-grid,.principles-grid,.benefits-list,.tradeoff-section{gap:.8rem}.primitive-card,.cache-state-card,.component-role-card,.state-option-card,.principle{padding:.8rem}.primitive-header{flex-direction:column;gap:.5rem}.primitive-icon{font-size:2rem}.primitive-name{font-size:16px}.primitive-ar{font-size:11px}.primitive-definition{font-size:12px}.primitive-list li,.section-label{font-size:11px}.primitive-awareness{gap:.6rem}@supports (display:grid){.primitives-grid,.cache-states-grid,.component-roles-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important}}.flow-stage{min-width:150px;padding:1rem}.interaction-flow{gap:1rem}.design-principles{margin:1.5rem 0}.principles-grid{grid-template-columns:1fr}.principle{text-align:left}.principle-icon{margin-right:.5rem;display:inline-block}.header-container{flex-direction:column}.lesson-hero,.lesson-footer{padding:10px 12px}.panel h1{font-size:24px}.panel h2{font-size:20px}.panel h3{font-size:16px}.panel h4{font-size:14px}.code-block{padding:8px!important;font-size:11px!important}.comparison-header,.comparison-row{font-size:12px;grid-template-columns:1fr!important}.orchestration-internals{grid-template-columns:repeat(2,1fr);gap:.5rem}}.panel-tq{background:#fff}.tq-intro-box{background-color:#f59e0b0f;border:1px solid #f59e0b40;border-radius:12px;margin:2rem 0;padding:1.5rem}.tq-intro-box h3{color:#0f172a;margin-top:0}.tq-intro-box p{color:#475569;margin:.8rem 0;line-height:1.6}.tq-intro-box ul{margin:1rem 0 1.5rem;padding-left:1.5rem}.tq-intro-box li{color:#475569;margin-bottom:.5rem}.tq-intro-box .highlight{background-color:#f59e0b14;border-left:3px solid #f59e0b;border-radius:6px;margin:1rem 0;padding:1rem}.comparison-box{margin:2rem 0}.comparison-box h3{color:#0f172a;margin-bottom:1.5rem}.comparison-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem;display:grid}.comparison-item{border:1px solid;border-radius:12px;padding:1.5rem}.comparison-item.manual{background-color:#ef444414;border-color:#ef444440}.comparison-item.rq{background-color:#f59e0b14;border-color:#f59e0b40}.comparison-item h4{color:#0f172a;margin:0 0 1rem;font-size:1.1rem}.comparison-item code{background-color:#33415514;border-radius:6px;margin:.8rem 0;padding:.8rem;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.5;display:block}.comparison-item p{margin:0;font-size:.95rem;font-weight:600}.drawback{color:#dc2626}.benefit{color:#16a34a}.features-grid{margin:2rem 0}.features-grid h3{color:#0f172a;margin-bottom:1.5rem}.features-list{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;display:grid}.feature-card{text-align:center;background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem;transition:all .2s cubic-bezier(.16,1,.3,1)}.feature-card:hover{border-color:#f59e0b;transform:translateY(-4px);box-shadow:0 4px 12px #00000014}.feature-icon{margin-bottom:.8rem;font-size:2.5rem;display:block}.feature-card h4{color:#0f172a;margin:0 0 .8rem;font-size:1rem}.feature-card p{color:#64748b;margin:0;font-size:.95rem;line-height:1.5}.when-to-use-box{margin:2rem 0}.when-to-use-box h3{color:#0f172a;margin-bottom:1.5rem}.usecase-table{background-color:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden}.table-header{color:#0f172a;background-color:#f59e0b14;border-bottom:2px solid #e2e8f0;grid-template-columns:2fr 1.5fr 2fr;gap:1rem;padding:1.2rem;font-weight:600;display:grid}.table-row{border-bottom:1px solid #f1f5f9;grid-template-columns:2fr 1.5fr 2fr;align-items:center;gap:1rem;padding:1.2rem;display:grid}.table-row:last-child{border-bottom:none}.scenario{color:#0f172a;font-weight:500}.tool-badge{color:#f59e0b;background-color:#f59e0b1a;border:1px solid #f59e0b4d;border-radius:6px;padding:.4rem .8rem;font-size:.9rem;font-weight:600;display:inline-block}.reason{color:#64748b;font-size:.9rem;line-height:1.4}.fundamentals-box{margin:2rem 0}.fundamentals-box h3{color:#0f172a;margin-bottom:1.5rem}.concepts-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;display:grid}.concept-card{background-color:#6366f114;border:1px solid #6366f140;border-radius:12px;padding:1.5rem}.concept-card h4{color:#0f172a;margin:0 0 .8rem;font-size:1rem}.concept-card p{color:#64748b;margin:0 0 1rem;font-size:.95rem;line-height:1.5}.code-snippet{color:#06b6d4;background-color:#33415514;border-radius:6px;padding:.8rem;font-family:JetBrains Mono,monospace;font-size:.85rem;display:block;overflow-x:auto}.basic-example-box{background-color:#3341550a;border:1px solid #e2e8f0;border-radius:12px;margin:2rem 0;padding:1.5rem}.basic-example-box h3{color:#0f172a;margin-top:0}.code-block.full-width{color:#e2e8f0;background-color:#1e293b;border-radius:8px;margin-top:1rem;padding:1.5rem;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.6;display:block;overflow-x:auto}.devx-box{background-color:#22c55e0f;border:1px solid #22c55e40;border-radius:12px;margin:2rem 0;padding:1.5rem}.devx-box h3{color:#0f172a;margin-top:0}.benefits-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:1.5rem;display:grid}.benefit{background-color:#fff;border:1px solid #22c55e40;border-radius:10px;flex-direction:column;gap:.6rem;padding:1.2rem;display:flex}.benefit-icon{font-size:1.8rem}.benefit strong{color:#0f172a;font-size:.95rem}.benefit{color:#64748b;font-size:.9rem;line-height:1.5}.tq-recap{background-color:#f59e0b14;border:1px solid #f59e0b40;border-radius:12px;margin:3rem 0 0;padding:2rem}.tq-recap h3{color:#0f172a;margin-top:0}.tq-recap p{color:#475569;margin:.8rem 0;font-size:.95rem}@media (width<=768px){.comparison-grid,.features-list,.concepts-grid,.benefits-grid{grid-template-columns:1fr}.table-header,.table-row{grid-template-columns:1fr;gap:.5rem}.table-row{padding:1rem}}@media (width<=480px){.comparison-item,.feature-card,.concept-card,.benefit,.tq-intro-box,.devx-box,.tq-recap{padding:1rem}.code-block.full-width{padding:1rem;font-size:.75rem}.feature-icon{font-size:2rem}}.lesson-nav-container{background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;grid-area:2/1;gap:24px;max-height:calc(100vh - 120px);padding:32px 24px;display:flex;position:sticky;top:120px;overflow-y:auto}.lesson-nav-container::-webkit-scrollbar{width:6px}.lesson-nav-container::-webkit-scrollbar-track{background:0 0}.lesson-nav-container::-webkit-scrollbar-thumb{background:#4f46e54d;border-radius:3px}.lesson-nav-container::-webkit-scrollbar-thumb:hover{background:#4f46e580}.progress-section{border-bottom:1px solid #e2e8f0;margin-bottom:8px;padding-bottom:16px}.progress-header{justify-content:space-between;align-items:flex-start;margin-bottom:12px;display:flex}.progress-title{color:#1a202c;letter-spacing:.3px;margin:0;font-family:Syne,sans-serif;font-size:14px;font-weight:700}.progress-subtitle{color:#9ca3af;margin:4px 0 0;font-size:12px;font-weight:500}.progress-percentage{color:#10b981;font-family:JetBrains Mono,monospace;font-size:24px;font-weight:700}.progress-bar-container{background:#f3f4f6;border-radius:10px;height:6px;position:relative;overflow:hidden}.progress-bar-fill{background:#4f46e5;border-radius:10px;height:100%;transition:width .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 8px #4f46e566}.category-filter{margin-bottom:16px}.filter-label{color:#6b7280;text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;font-size:11px;font-weight:700;display:block}.category-buttons{grid-template-columns:1fr;gap:6px;display:grid}.category-btn{cursor:pointer;color:#475569;text-align:left;background:0 0;border:1.5px solid #3341551a;border-radius:8px;align-items:center;gap:10px;padding:10px 14px;font-family:Syne,sans-serif;font-size:13px;font-weight:600;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex}.category-btn:hover{color:#0d9488;background:#06b6d414;border-color:#06b6d44d}.category-btn.active{color:#0d9488;background:#06b6d41f;border-color:#06b6d4;font-weight:700;box-shadow:0 2px 8px #06b6d426}.category-icon{min-width:20px;font-size:16px}.category-text{display:inline}.lessons-grid{flex-direction:column;gap:8px;display:flex}.lesson-card{cursor:pointer;text-align:left;background:0 0;border:1.5px solid #0000;border-radius:8px;padding:0;font-family:inherit;transition:all .2s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.lesson-card:hover{background:#06b6d40f;border-color:#06b6d44d;transform:translate(4px)}.lesson-card.active{background:#06b6d41a;border-color:#06b6d4;transform:translate(4px)}.lesson-card-inner{flex-direction:row;align-items:flex-start;gap:12px;padding:12px 14px;display:flex;position:relative}.lesson-number{text-align:center;letter-spacing:.5px;border-radius:4px;flex-shrink:0;min-width:28px;margin-top:2px;padding:4px 6px;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:700}.lesson-icon{flex-shrink:0;margin-top:1px;font-size:20px}.completed-badge{color:#fff;background:#22c55e;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex;position:absolute;top:8px;right:8px;box-shadow:0 2px 6px #22c55e66}.lesson-info{flex:1;min-width:0}.lesson-title{color:#0f172a;margin:0;font-family:Syne,sans-serif;font-size:13px;font-weight:700;line-height:1.3}.lesson-description{color:#78909c;margin:3px 0 0;font-size:11px;line-height:1.4;display:none}.lesson-card.active .lesson-description{display:block}.lesson-color-bar{opacity:.6;width:3px;position:absolute;top:0;bottom:0;right:0}.lesson-card.active .lesson-color-bar{opacity:1;width:4px}@media (width<=1024px){.lesson-nav-container{max-height:none;padding:24px 20px;position:relative;top:auto}.category-buttons{grid-template-columns:repeat(3,1fr)}}@media (width<=768px){.learn-page{grid-template-columns:1fr}.lesson-nav-container{border-bottom:1px solid #0f172a14;border-right:none;grid-area:auto/1;max-height:none;padding:20px}.lesson-icon{font-size:18px}.lesson-title{font-size:12px}.category-buttons{grid-template-columns:repeat(3,1fr);gap:8px}.category-btn{padding:8px 10px;font-size:12px}}@media (width<=480px){.lesson-nav-container{padding:16px}.lesson-card-inner{gap:10px;padding:10px 12px}.lesson-icon{font-size:16px}.lesson-title{font-size:11px}.category-buttons{grid-template-columns:repeat(2,1fr)}}:root{--react-pdf-annotation-layer:1;--annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:black;--link-outline:none}@media screen and (forced-colors:active){:root{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight;--link-outline:1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selecteditem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert();backdrop-filter:invert()}}.annotationLayer{pointer-events:none;transform-origin:0 0;z-index:3;position:absolute;top:0;left:0}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg)translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg)translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg)translateY(-100%)}.annotationLayer canvas{width:100%;height:100%;position:absolute}.annotationLayer section{text-align:initial;pointer-events:auto;box-sizing:border-box;transform-origin:0 0;margin:0;position:absolute}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{width:100%;height:100%;font-size:1em;position:absolute;top:0;left:0}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--total-scale-factor)) sans-serif;vertical-align:top;width:100%;height:100%;margin:0}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{border:2px solid var(--input-disabled-border-color);cursor:not-allowed;background:0 0}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);background:0 0;border-radius:2px}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-color:#0000;background-image:none}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);border-radius:2px}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{content:"";background-color:canvastext;display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{width:1px;height:80%;left:45%}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;width:50%;height:50%;top:20%;left:30%}.annotationLayer .textWidgetAnnotation input.comb{padding-left:2px;padding-right:0;font-family:monospace}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{appearance:none}.annotationLayer .popupTriggerArea{width:100%;height:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{font-size:calc(9px * var(--total-scale-factor));width:100%;min-width:calc(180px * var(--total-scale-factor));pointer-events:none;position:absolute}.annotationLayer .popup{max-width:calc(180px * var(--total-scale-factor));box-shadow:0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) #888;border-radius:calc(2px * var(--total-scale-factor));padding:calc(6px * var(--total-scale-factor));margin-left:calc(5px * var(--total-scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto;background-color:#ff9;position:absolute}.annotationLayer .popup>*{font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{margin-left:calc(5px * var(--total-scale-factor));display:inline-block}.annotationLayer .popupContent{margin-top:calc(2px * var(--total-scale-factor));padding-top:calc(2px * var(--total-scale-factor));border-top:1px solid #333}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--total-scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .annotationTextContent{opacity:0;color:#0000;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}:root{--react-pdf-text-layer:1;--highlight-bg-color:#b400aa;--highlight-selected-bg-color:#006400}@media screen and (forced-colors:active){:root{--highlight-bg-color:Highlight;--highlight-selected-bg-color:ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg)translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg)translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg)translate(-100%)}.textLayer{text-align:initial;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2;line-height:1;position:absolute;inset:0;overflow:hidden}.textLayer :is(span,br){color:#0000;white-space:pre;cursor:text;transform-origin:0 0;margin:0;position:absolute}.textLayer span.markedContent{height:0;top:0}.textLayer .highlight{background-color:var(--highlight-bg-color);border-radius:4px;margin:-1px;padding:1px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:0 0}.textLayer .endOfContent{z-index:-1;cursor:default;-webkit-user-select:none;user-select:none;display:block;position:absolute;inset:100% 0 0}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{width:0;height:0;display:none;position:absolute;top:0;left:0}.pdf-viewer-container{margin:20px 0}.pdf-controls{flex-wrap:wrap;gap:12px;margin-bottom:16px;display:flex}.pdf-btn{cursor:pointer;border:none;border-radius:8px;padding:10px 18px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s}.pdf-btn-primary{color:#fff;background:#4f46e5;box-shadow:0 2px 8px #4f46e533}.pdf-btn-primary:hover{background:#4338ca;transform:translateY(-1px);box-shadow:0 4px 12px #4f46e54d}.pdf-btn-secondary{color:#374151;background:#f3f4f6;border:1px solid #d1d5db}.pdf-btn-secondary:hover{background:#e5e7eb;border-color:#9ca3af}.pdf-modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.pdf-modal{background:#fff;border-radius:12px;flex-direction:column;width:100%;max-width:900px;max-height:90vh;animation:.3s ease-out slideUp;display:flex;box-shadow:0 20px 60px #0000004d}.pdf-modal-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.pdf-modal-header h3{color:#1a202c;margin:0;font-size:18px;font-weight:700}.pdf-modal-close{cursor:pointer;color:#6b7280;background:0 0;border:none;padding:4px;font-size:24px;transition:color .2s}.pdf-modal-close:hover{color:#1a202c}.pdf-modal-content{background:#f8fafc;flex:1;justify-content:center;align-items:flex-start;padding:20px;display:flex;overflow-y:auto}.pdf-modal-content canvas{background:#fff;border:1px solid #e2e8f0;max-width:100%;box-shadow:0 2px 8px #00000014}.pdf-modal-footer{background:#fff;border-top:1px solid #e2e8f0;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:16px 24px;display:flex}.pdf-nav-btn{cursor:pointer;color:#374151;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;padding:8px 14px;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s}.pdf-nav-btn:hover:not(:disabled){color:#1a202c;background:#e5e7eb;border-color:#9ca3af}.pdf-nav-btn:disabled{opacity:.5;cursor:not-allowed}.pdf-page-info{color:#6b7280;text-align:center;min-width:120px;font-size:13px;font-weight:600}.pdf-error-message{text-align:center;background:#fef2f2;border-radius:8px;margin:20px;padding:40px}.pdf-error-message p{color:#7f1d1d;margin:0 0 12px;font-size:15px;font-weight:600}.pdf-error-help{color:#991b1b;margin:0;font-size:13px;font-weight:500}@media (width<=768px){.pdf-modal-overlay{padding:10px}.pdf-modal{max-height:95vh}.pdf-modal-header{padding:16px}.pdf-modal-content{padding:12px}.pdf-modal-footer{gap:8px;padding:12px 16px}.pdf-nav-btn{padding:6px 10px;font-size:12px}.pdf-page-info{font-size:12px}}