.technical-deep-dive{background:var(--color-neutral-700);padding:var(--spacing-5xl) 0}.technical-deep-dive .container{margin:0 auto;max-width:900px;padding:0 var(--spacing-md)}.technical-deep-dive .accordion-title{color:var(--text-inverse);font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-snug);margin-bottom:var(--spacing-md);text-align:center}.technical-deep-dive .accordion-subtitle{color:var(--glass-text);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);margin:0 auto var(--spacing-3xl);max-width:var(--container-narrow,800px);text-align:center}.technical-deep-dive .accordion-item{background:var(--text-inverse);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs);margin-bottom:var(--spacing-lg);overflow:hidden;transition:all var(--transition-slow)}.technical-deep-dive .accordion-item:hover{box-shadow:var(--shadow-md)}.technical-deep-dive .accordion-item.active{box-shadow:var(--shadow-lg)}.technical-deep-dive .accordion-header{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl);text-align:left;transition:all var(--transition-base);width:100%}.technical-deep-dive .accordion-header:hover{background:var(--color-neutral-100)}.technical-deep-dive .accordion-icon{align-items:center;background:var(--color-primary);border-radius:var(--radius-md);display:flex;flex-shrink:0;height:var(--space-10);justify-content:center;width:var(--space-10)}.technical-deep-dive .accordion-icon .material-icons-round{color:var(--text-inverse);font-size:var(--space-5)}.technical-deep-dive .accordion-header-text{align-items:center;color:var(--text-primary);display:flex;flex:1;flex-wrap:wrap;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);gap:var(--spacing-sm);justify-content:space-between}.technical-deep-dive .accordion-toggle{color:var(--text-tertiary);flex-shrink:0;font-size:var(--spacing-lg);transition:transform var(--transition-slow)}.technical-deep-dive .accordion-item.active .accordion-toggle{transform:rotate(180deg)}.technical-deep-dive .accordion-content{max-height:0;overflow:hidden;transition:max-height var(--duration-slower) var(--ease-out)}.technical-deep-dive .accordion-item.active .accordion-content{max-height:2000px}.technical-deep-dive .accordion-body{padding:0 var(--spacing-xl) var(--spacing-xl)}.technical-deep-dive .accordion-body h4{color:var(--text-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-snug);margin-bottom:var(--spacing-md);margin-top:var(--spacing-xl)}.technical-deep-dive .accordion-body p{color:var(--text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-md)}.technical-deep-dive .accordion-body ul{display:flex;flex-direction:column;gap:var(--spacing-md);list-style:none;margin:var(--spacing-lg) 0;padding-left:0}.technical-deep-dive .accordion-body li{align-items:flex-start;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);display:flex;gap:var(--spacing-sm);line-height:var(--line-height-relaxed);padding:var(--spacing-md) var(--spacing-lg);transition:all var(--transition-base)}.technical-deep-dive .accordion-body li:hover{background:var(--text-inverse);border-color:var(--color-primary)}.technical-deep-dive .accordion-body li .material-icons-round{color:var(--color-success);flex-grow:0;flex-shrink:0;font-size:var(--space-5);margin-top:2px;width:var(--space-5)}.technical-deep-dive .accordion-body li>span{flex:1}.technical-deep-dive .accordion-body li strong{color:var(--text-primary);font-weight:var(--font-weight-semibold)}.technical-deep-dive .code-comparison{display:flex;flex-direction:column;gap:var(--spacing-lg);margin:var(--spacing-lg) 0}.technical-deep-dive .code-block{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden;transition:all var(--transition-slow)}.technical-deep-dive .code-block:hover{box-shadow:var(--shadow-lg);transform:var(--transform-lift-sm)}.technical-deep-dive .code-block.bad{border-color:var(--color-danger-light)}.technical-deep-dive .code-block.bad:hover{border-color:var(--color-danger);box-shadow:var(--shadow-lg)}.technical-deep-dive .code-block.good{border-color:var(--color-success-light)}.technical-deep-dive .code-block.good:hover{border-color:var(--color-success);box-shadow:var(--shadow-lg)}.technical-deep-dive .code-label{align-items:center;display:flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md)}.technical-deep-dive .code-label .material-icons-round{font-size:var(--font-size-base)}.technical-deep-dive .code-block.bad .code-label{background:var(--color-danger-bg);color:var(--color-danger)}.technical-deep-dive .code-block.bad .code-label .material-icons-round{color:var(--color-danger)}.technical-deep-dive .code-block.good .code-label{background:var(--color-success-bg);color:var(--color-success)}.technical-deep-dive .code-block.good .code-label .material-icons-round{color:var(--color-success)}.technical-deep-dive .code-block pre{align-items:center;background:var(--color-primary);border-radius:0;display:flex;flex:1;margin:0;overflow-x:auto;padding:var(--spacing-lg) var(--spacing-xl);white-space:pre-wrap;word-break:break-word}.technical-deep-dive .code-block code{background:transparent;color:var(--glass-text);font-family:var(--font-mono);font-size:var(--font-size-sm);font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed);padding:0;white-space:pre-wrap;word-wrap:break-word;display:block;width:100%}.technical-deep-dive .code-block .current-year{color:var(--color-success-light);font-weight:var(--font-weight-semibold)}.technical-deep-dive .tip{align-items:flex-start;background:var(--bg-secondary);border-left:2px solid var(--color-primary);border:2px solid var(--color-primary);border-left-width:4px;border-radius:var(--radius-md);display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg)}.technical-deep-dive .tip-icon{align-items:center;background:var(--color-primary);border-radius:var(--radius-full);color:var(--text-inverse);display:flex;flex-shrink:0;font-size:var(--font-size-lg);height:var(--spacing-xl);justify-content:center;width:var(--spacing-xl)}.technical-deep-dive .tip-content{color:var(--text-secondary);flex:1;line-height:var(--line-height-relaxed)}.technical-deep-dive .tip-content strong{color:var(--color-primary);font-weight:var(--font-weight-semibold)}@media(max-width:768px){.technical-deep-dive{padding:var(--spacing-4xl) 0}.technical-deep-dive .accordion-subtitle{font-size:var(--font-size-base);margin-bottom:var(--spacing-2xl)}.technical-deep-dive .accordion-header{gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg)}.technical-deep-dive .accordion-icon{height:var(--spacing-xl);width:var(--spacing-xl)}.technical-deep-dive .accordion-icon .material-icons-round{font-size:var(--font-size-lg)}.technical-deep-dive .accordion-header-text{font-size:var(--font-size-base)}.technical-deep-dive .accordion-body{padding:0 var(--spacing-lg) var(--spacing-lg)}.technical-deep-dive .accordion-body h4{font-size:var(--font-size-base)}.technical-deep-dive .code-block pre{overflow-x:hidden;padding:var(--spacing-md)}.technical-deep-dive .code-block code{font-size:var(--font-size-xs);line-height:var(--line-height-relaxed);white-space:pre-wrap}.technical-deep-dive .code-label{font-size:var(--font-size-xs)}}