:root{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#1a1a1a;--text-secondary:#495057;--text-muted:#6c757d;--accent:#06c;--accent-hover:#0052a3;--border:#dee2e6;--border-light:#e9ecef;--table-header-bg:#212529;--table-header-text:#fff;--table-row-odd:#f8f9fa;--table-row-even:#fff;--table-row-hover:#e9ecef;--header-bg:#2c5282;--header-text:#fff;--tier-basic-bg:transparent;--tier-basic-border:transparent;--tier-preferred-bg:#ffc1071a;--tier-preferred-border:#ffc107;--tier-extended-bg:#ff8c0026;--tier-extended-border:#ff8c00;--success:#28a745;--warning:#ffc107;--danger:#dc3545;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--transition-fast:.15s ease;--transition-normal:.25s ease}@media (prefers-color-scheme:dark){:root{--bg-primary:#1a1a1a;--bg-secondary:#242424;--bg-tertiary:#2d2d2d;--text-primary:#e0e0e0;--text-secondary:#a0a0a0;--text-muted:#6c757d;--accent:#4da6ff;--accent-hover:#7fbfff;--border:#404040;--border-light:#333;--table-header-bg:#0d0d0d;--table-header-text:#e0e0e0;--table-row-odd:#242424;--table-row-even:#1a1a1a;--table-row-hover:#2d2d2d;--header-bg:#1e3a5f;--header-text:#fff;--tier-basic-bg:transparent;--tier-basic-border:transparent;--tier-preferred-bg:#ffc10726;--tier-preferred-border:#ffc107;--tier-extended-bg:#ff8c0033;--tier-extended-border:#ff8c00;--shadow-sm:0 1px 2px #0003;--shadow-md:0 4px 6px #0000004d;--shadow-lg:0 10px 15px #0000004d}}*{box-sizing:border-box}:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}body{color:var(--text-primary);background-color:var(--bg-primary);margin:0}#app{flex-direction:column;min-height:100vh;display:flex}header{background-color:var(--header-bg);padding:0 var(--spacing-md);z-index:100;box-shadow:var(--shadow-md);justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.headerlogo{color:var(--header-text);padding:var(--spacing-sm) 0;font-size:1.5rem;font-weight:600;text-decoration:none}.headerlogo:hover{opacity:.9}header nav{gap:var(--spacing-xs);display:flex}header a{color:var(--header-text);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);transition:background-color var(--transition-fast);text-decoration:none}header a:hover{background-color:#ffffff1a}header a.active{background-color:#fff3}main{width:100%;max-width:1400px;padding:var(--spacing-lg);flex:1;margin:0 auto}footer{background-color:var(--bg-secondary);border-top:1px solid var(--border);padding:var(--spacing-md) var(--spacing-lg);text-align:center;color:var(--text-muted);font-size:.875rem}footer p{max-width:800px;margin:0 auto}footer .footer-meta{margin-top:var(--spacing-xs)}footer a{font-weight:600}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit;font-size:inherit}@media (width<=768px){header{padding:var(--spacing-sm);flex-direction:column}header nav{flex-wrap:wrap;justify-content:center;width:100%}header a{padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem}main{padding:var(--spacing-md)}}.page-header{align-items:flex-start;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);display:flex}.page-header-image{object-fit:contain;flex-shrink:0;width:64px;height:64px}.page-header-text{flex:1}.page-title{color:var(--text-primary);margin:0 0 var(--spacing-lg) 0;font-size:1.75rem;font-weight:600}.page-header .page-title{margin-bottom:var(--spacing-xs)}.page-subtitle{color:var(--text-secondary);margin:-var(--spacing-md) 0 var(--spacing-lg) 0;font-size:1rem}.page-header .page-subtitle{margin:0}.tier-legend{gap:var(--spacing-lg);margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);flex-wrap:wrap;justify-content:space-between;align-items:center;font-size:.875rem;display:flex}.tier-legend-items{gap:var(--spacing-lg);flex-wrap:wrap;display:flex}.tier-toggle{align-items:center;display:flex}.tier-toggle-label{align-items:center;gap:var(--spacing-xs);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}.tier-toggle-label input{cursor:pointer;width:18px;height:18px}.tier-toggle-text{color:var(--text-secondary);font-size:.875rem}.tier-legend-item{align-items:center;gap:var(--spacing-xs);display:flex}.tier-legend-swatch{border-radius:var(--radius-sm);border:2px solid #0000;width:16px;height:16px}.tier-legend-swatch.basic{background-color:var(--tier-basic-bg);border-color:var(--border);border-style:dashed}.tier-legend-swatch.preferred{background-color:var(--tier-preferred-bg);border-color:var(--tier-preferred-border);border-style:dashed}.tier-legend-swatch.extended{background-color:var(--tier-extended-bg);border-color:var(--tier-extended-border)}.pick-tier-badge{border-radius:var(--radius-sm);border:1px dashed var(--border);background:var(--tier-basic-bg);white-space:nowrap;padding:2px 7px;font-size:.72rem;display:inline-block}.pick-tier-badge.preferred{background:var(--tier-preferred-bg);border-color:var(--tier-preferred-border)}.pick-tier-badge.extended{background:var(--tier-extended-bg);border-color:var(--tier-extended-border);color:var(--text-primary);border-style:solid;font-weight:600}.component-grid-container{max-height:calc(100dvh - var(--header-height,3.25rem) - 1.5rem);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:auto}.component-grid{border-collapse:collapse;width:100%;font-size:.875rem}.component-grid th{background-color:var(--table-header-bg);color:var(--table-header-text);padding:var(--spacing-md);text-align:center;white-space:nowrap;z-index:10;font-weight:600;position:sticky;top:0}.component-grid th:first-child{text-align:left;z-index:12;position:sticky;top:0;left:0}.component-grid td{padding:var(--spacing-sm) var(--spacing-md);text-align:center;border-bottom:1px solid var(--border-light);vertical-align:top}.component-grid td:first-child{text-align:left;background-color:inherit;z-index:1;font-weight:500;position:sticky;left:0}.component-grid tbody tr:nth-child(odd){background-color:var(--table-row-odd)}.component-grid tbody tr:nth-child(2n){background-color:var(--table-row-even)}.component-grid tbody tr:hover{background-color:var(--table-row-hover)}.package-header{align-items:center;gap:var(--spacing-xs);flex-direction:column;display:flex}.package-header img{border-radius:var(--radius-sm);max-width:80px;height:auto}.jlc-link-wrapper{align-items:center;display:inline-flex;position:relative}.jlc-copy-btn{border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-secondary);width:26px;height:26px;color:var(--text-muted);cursor:pointer;opacity:0;transition:all var(--transition-fast);justify-content:center;align-items:center;margin-left:4px;padding:0;display:flex}.jlc-link-wrapper:hover .jlc-copy-btn{opacity:1}.jlc-copy-btn:hover{background-color:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}.jlc-copy-btn.copied{background-color:var(--success);border-color:var(--success);color:#fff;opacity:1}.jlc-link{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-primary);border:1px dashed var(--border);background-color:var(--bg-primary);font-family:monospace;font-size:.8rem;text-decoration:none;display:inline-flex}.jlc-link:hover{background-color:var(--bg-tertiary);text-decoration:none}.jlc-link.copied{background-color:var(--success);color:#fff;border-color:var(--success)}.jlc-link.preferred{background-color:var(--tier-preferred-bg);border:1px dashed var(--tier-preferred-border)}.jlc-link.preferred:hover{background-color:#ffc10733}.jlc-link.extended{background-color:var(--tier-extended-bg);border:1px solid var(--tier-extended-border)}.jlc-link.extended:hover{background-color:#ff8c0040}.jlc-link.has-specs{padding:var(--spacing-xs) var(--spacing-sm);flex-direction:column;align-items:center;gap:1px}.jlc-link-specs{color:var(--text-muted);font-family:inherit;font-size:.65rem}.jlc-link-check{margin-left:2px;font-size:.75rem}.jlc-tooltip{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-md);z-index:99999;text-align:left;pointer-events:none;width:240px;font-size:.75rem;position:fixed;box-shadow:0 4px 20px #00000040}.jlc-tooltip-header{color:var(--text-primary);margin-bottom:4px;font-size:.875rem;font-weight:600}.jlc-tooltip-tier{color:var(--text-secondary);margin-bottom:4px}.jlc-tooltip-friendly{color:var(--text-primary);margin-bottom:6px;font-size:.9rem;font-weight:600}.jlc-tooltip-info{color:var(--text-primary);font-weight:500}.jlc-tooltip-desc{color:var(--text-secondary);text-overflow:ellipsis;max-height:60px;margin-top:4px;line-height:1.4;overflow:hidden}.jlc-tooltip-hint{border-top:1px solid var(--border-light);color:var(--text-muted);margin-top:8px;padding-top:6px;font-size:.75rem}.cell-empty{color:var(--text-muted);font-style:italic}.datasheet-icon{color:var(--text-muted);transition:color var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.datasheet-icon:hover{color:#c62828}.stacked-parts{gap:var(--spacing-sm);flex-direction:column;display:flex}.stacked-cell{flex-direction:column;align-items:center;gap:1px;display:flex}.cell-specs{color:var(--text-muted);white-space:nowrap;font-size:.65rem}.component-notes{background-color:var(--bg-tertiary);border-left:2px solid var(--accent);color:var(--text-secondary);margin-top:4px;padding:4px 8px;font-size:.75rem;font-style:italic}.part-header{justify-content:space-between;align-items:flex-start;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg);display:flex}.part-header-main{flex:1;min-width:0}.part-friendly-desc{color:var(--text-primary);margin:0 0 var(--spacing-sm) 0;font-size:1.5rem;font-weight:600;line-height:1.3}.part-identity{align-items:baseline;gap:var(--spacing-xs);flex-wrap:wrap;margin:0;display:flex}.part-mpn{color:var(--text-secondary);font-size:1rem;font-weight:500}.part-mfr{color:var(--text-muted);font-size:1.125rem}.part-jlc-pill{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--accent);color:#fff;white-space:nowrap;border-radius:999px;flex-shrink:0;font-family:monospace;font-size:1.25rem;font-weight:600}.part-jlc-pill:hover{background-color:var(--accent-hover)}.part-jlc-pill.copied{background-color:var(--success)}.copyable-text{cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);align-items:center;gap:6px;margin:-2px -6px;padding:2px 6px;display:inline-flex}.copyable-text:hover{background-color:var(--bg-tertiary)}.copyable-text.copied{background-color:var(--success);color:#fff}.copyable-icon{opacity:0;transition:opacity var(--transition-fast);color:var(--text-muted);align-items:center;display:inline-flex}.copyable-text:hover .copyable-icon{opacity:1}.copyable-text.copied .copyable-icon{opacity:1;color:#fff}.part-jlc-pill .copyable-icon{color:#ffffffb3}.part-jlc-pill:hover .copyable-icon{color:#fff}@media (width<=768px){.part-header{gap:var(--spacing-md);flex-direction:column}.part-jlc-pill{align-self:flex-start}.part-friendly-desc{font-size:1.25rem}}.part-details-card{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--spacing-lg)}.part-details-table{border-collapse:collapse;width:100%}.part-details-table th{text-align:left;padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);vertical-align:top;width:120px;font-weight:500}.part-details-table td{padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary)}.part-details-table tr:not(:last-child){border-bottom:1px solid var(--border-light)}.detail-button{align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-secondary);color:var(--text-primary);transition:all var(--transition-fast);font-size:.875rem;text-decoration:none;display:inline-flex}.detail-button:hover{background-color:var(--bg-tertiary);text-decoration:none}.detail-button.primary{background-color:var(--accent);border-color:var(--accent);color:#fff}.detail-button.primary:hover{background-color:var(--accent-hover)}.detail-button.datasheet{color:#fff;padding:var(--spacing-md) var(--spacing-lg);background:linear-gradient(135deg,#e53935 0%,#c62828 100%);border-color:#c62828;font-size:1rem;font-weight:600;box-shadow:0 2px 8px #c628284d}.detail-button.datasheet:hover{background:linear-gradient(135deg,#f44336 0%,#d32f2f 100%);transform:translateY(-1px);box-shadow:0 4px 12px #c6282866}.detail-button.datasheet svg{flex-shrink:0}.temp-class-guide{margin-bottom:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);font-size:.75rem}.temp-class-guide-header{align-items:baseline;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);display:flex}.temp-class-guide-header strong{color:var(--text-primary);font-size:.875rem}.temp-class-guide-subtitle{color:var(--text-muted);font-size:.75rem}.temp-class-table{border-collapse:collapse;width:100%;font-size:.75rem}.temp-class-table th{text-align:left;padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-secondary);border-bottom:1px solid var(--border-light);font-weight:600}.temp-class-table td{padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-secondary)}.temp-class-table td:first-child{color:var(--text-primary);font-family:monospace}.temp-class-table td b{font-weight:600}.filter-bar{gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-md);flex-wrap:wrap;display:flex}.filter-group{gap:var(--spacing-xs);flex-direction:column;display:flex}.filter-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.filter-group select{padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--border);border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--text-primary);min-width:120px;font-size:.875rem}.filter-group select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 2px #06c3}.home-grid{gap:var(--spacing-lg);padding:var(--spacing-lg) 0;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.home-card{background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--spacing-xl);color:var(--text-primary);transition:all var(--transition-normal);text-decoration:none}.home-card:hover{box-shadow:var(--shadow-lg);border-color:var(--accent);text-decoration:none;transform:translateY(-4px)}.home-card-image{object-fit:contain;width:80px;height:80px;margin-bottom:var(--spacing-sm)}.home-card h2{margin:0 0 var(--spacing-sm) 0;color:var(--text-primary);font-size:1.25rem}.home-card p{color:var(--text-secondary);margin:0;font-size:.875rem}.home-card.coming-soon{opacity:.6;cursor:not-allowed}.home-card.coming-soon:hover{box-shadow:none;border-color:var(--border);transform:none}.component-grid th:first-child,.component-grid td:first-child{background-color:var(--bg-primary)}.component-grid tbody tr:nth-child(odd) td:first-child{background-color:var(--table-row-odd)}.component-grid tbody tr:nth-child(2n) td:first-child{background-color:var(--table-row-even)}.component-grid tbody tr:hover td:first-child{background-color:var(--table-row-hover)}.component-grid th:first-child:after,.component-grid td:first-child:after{content:"";pointer-events:none;background:linear-gradient(90deg,#00000014,#0000);width:8px;position:absolute;top:0;bottom:0;right:-8px}.component-grid th:first-child,.component-grid td:first-child{position:sticky;left:0}.component-grid td:first-child{z-index:1}.component-grid th:first-child{z-index:12}@media (width<=768px){.component-grid{font-size:.75rem}.component-grid th,.component-grid td{padding:var(--spacing-xs) var(--spacing-sm)}.jlc-link{padding:var(--spacing-sm) var(--spacing-md);justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.package-header img{max-width:50px}.filter-bar{flex-direction:column}.filter-group{width:100%}.filter-group select{width:100%;min-height:44px}.filter-bar button{min-height:44px;padding:var(--spacing-sm) var(--spacing-md)}.home-card{padding:var(--spacing-lg)}.page-title{font-size:1.5rem}.page-subtitle{font-size:.875rem}.tier-legend{gap:var(--spacing-sm);flex-direction:column}.temp-class-guide{overflow-x:auto}.temp-class-table{min-width:400px}}.ai-note{margin-top:var(--spacing-xl);border:2px solid var(--warning);border-radius:var(--radius-md);background-color:var(--bg-primary);overflow:hidden}.ai-note-banner{gap:var(--spacing-sm);padding:var(--spacing-md);background-color:#ffc10726;background-color:color-mix(in srgb, var(--warning) 18%, var(--bg-primary));border-bottom:2px solid var(--warning);color:var(--text-primary);align-items:flex-start;font-size:.875rem;line-height:1.5;display:flex}.ai-note-banner svg{color:color-mix(in srgb, var(--warning) 70%, var(--text-primary));flex-shrink:0;margin-top:2px}.ai-note-family-label{margin:var(--spacing-md) var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-secondary);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:.875rem}.ai-note-loading{padding:var(--spacing-md);color:var(--text-muted);font-size:.875rem}.ai-note-body{padding:0 var(--spacing-md) var(--spacing-md);color:var(--text-secondary);font-size:.9375rem;line-height:1.6}.ai-note-body h3{margin:var(--spacing-lg) 0 var(--spacing-sm);color:var(--text-primary);font-size:1.15rem}.ai-note-body h4{margin:var(--spacing-lg) 0 var(--spacing-sm);color:var(--text-primary);font-size:1rem}.ai-note-body h5{margin:var(--spacing-md) 0 var(--spacing-xs);color:var(--text-primary);font-size:.9375rem}.ai-note-body p{margin:var(--spacing-sm) 0}.ai-note-body ul,.ai-note-body ol{margin:var(--spacing-sm) 0;padding-left:1.5rem}.ai-note-body li{margin:var(--spacing-xs) 0}.ai-note-body blockquote{margin:var(--spacing-md) 0;padding:var(--spacing-sm) var(--spacing-md);border-left:4px solid var(--warning);background-color:var(--bg-secondary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.875rem}.ai-note-body code{background-color:var(--bg-tertiary);border-radius:var(--radius-sm);padding:.1em .35em;font-size:.85em}.ai-note-body a{color:inherit;overflow-wrap:anywhere;text-decoration:underline}.ai-note-table-wrap{margin:var(--spacing-md) 0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow-x:auto}.ai-note-table-wrap table{border-collapse:collapse;width:100%;font-size:.875rem}.ai-note-table-wrap th,.ai-note-table-wrap td{padding:var(--spacing-sm) var(--spacing-md);text-align:left;vertical-align:top;border-bottom:1px solid var(--border-light)}.ai-note-table-wrap th{background-color:var(--bg-secondary);color:var(--text-primary);white-space:nowrap}.ai-note-table-wrap tr:last-child td{border-bottom:none}