/* Main content container */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 30px;
    overflow-x: hidden;
}

/* Page title section */
.page-content {
    margin-bottom: 20px;
    text-align: center;
    padding-top: 16px;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.title-divider {
    color: var(--text-secondary);
    margin: 0 8px;
}

.title-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
}

/* App banner */
.app-banner {
    display: block;
    max-width: 100%;
    margin: 0 auto 30px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.app-banner-image {
    width: 100%;
    height: auto;
    display: block;
}

section img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px;
}.research-section{margin-bottom:30px;padding:24px 28px;background:var(--bg-secondary);border-radius:10px;box-shadow:0 2px 8px rgb(0 0 0 / 4%);border:1px solid var(--card-border);position:relative;overflow:hidden}.research-section:last-child{margin-bottom:0}.research-section h2{margin-top:0;margin-bottom:12px;color:var(--primary-color);font-size:24px;font-weight:700;letter-spacing:-0.3px;position:relative;display:inline-block;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-text-fill-color:transparent;background-clip:text;padding-bottom:16px}.center{text-align:center;margin-bottom:24px}.center h2{display:inline-block;width:100%}.research-section h2::after{content:'';position:absolute;bottom:0;left:50%;width:50px;height:2px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));transform:translateX(-50%);border-radius:2px}.research-section h3{color:var(--text-primary);margin-top:24px;margin-bottom:12px;font-size:18px;font-weight:600}.research-section h3.text-left{text-align:left;margin-left:0}.research-section p{line-height:1.7;margin-bottom:14px;color:var(--text-primary);font-size:15px}.css-table-wrapper{margin:20px 0;overflow-x:auto;border-radius:12px;box-shadow:0 4px 20px rgb(0 0 0 / 10%);background:var(--card-bg)}.css-var-table{width:100%;border-collapse:collapse;background-color:var(--card-bg);font-size:14px}.css-var-table caption{padding:16px;font-weight:600;text-align:left;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:white;font-size:18px;letter-spacing:-0.3px}.css-var-table th{text-align:left;padding:16px;background-color:var(--bg-tertiary);font-weight:600;color:var(--text-primary);border-bottom:2px solid var(--card-border);position:sticky;top:0;z-index:10}.css-var-table td{padding:16px;border-bottom:1px solid var(--card-border)}.css-var-table tr{transition:background-color 0.2s ease}.css-var-table tr:hover{background-color:var(--bg-secondary)}.var-name{font-family:"Fira Code",monospace;font-weight:500;color:var(--primary-color);font-size:13px;letter-spacing:-0.3px}.color-swatch{display:inline-block;width:28px;height:28px;border-radius:6px;margin-right:10px;vertical-align:middle;box-shadow:0 2px 8px rgb(0 0 0 / 15%);border:2px solid var(--card-border);transition:transform 0.2s ease}.color-swatch:hover{transform:scale(1.1)}.theme-comparison{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin:30px 0}.theme-comparison>div{padding:25px;background:var(--card-bg);border-radius:16px;box-shadow:0 4px 20px rgb(0 0 0 / 8%);transition:transform 0.3s ease,box-shadow 0.3s ease;position:relative;overflow:hidden}.theme-comparison>div::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));transform:scaleX(0);transition:transform 0.3s ease}.theme-comparison>div:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgb(0 0 0 / 12%)}.theme-comparison>div:hover::before{transform:scaleX(1)}.theme-comparison h4{color:var(--primary-color);margin-top:0;margin-bottom:20px;font-size:24px;font-weight:600;text-align:center}.image-thumbnail{width:100%;height:auto;border-radius:12px;margin-bottom:20px;border:1px solid rgb(0 0 0 / 10%);box-shadow:0 4px 12px rgb(0 0 0 / 8%);transition:transform 0.3s ease}.theme-comparison>div:hover .image-thumbnail{transform:scale(1.05)}.table-of-contents{background:var(--bg-secondary);padding:20px 30px;border-radius:12px;margin:30px 0;border-left:4px solid var(--primary-color);box-shadow:0 3px 15px rgb(0 0 0 / 5%)}.table-of-contents h3{margin-top:0;color:var(--primary-color);font-size:20px;margin-bottom:15px}.table-of-contents ul{list-style:none;padding:0;margin:0}.table-of-contents li{margin:10px 0;padding-left:25px;position:relative}.table-of-contents li::before{content:"▸";position:absolute;left:0;color:var(--primary-color);font-weight:700;transition:transform 0.2s ease}.table-of-contents li:hover::before{transform:translateX(5px)}.table-of-contents a{color:var(--text-primary);text-decoration:none;transition:color 0.2s ease;font-weight:500}.table-of-contents a:hover{color:var(--primary-color)}.code-example{background-color:var(--code-bg);border:1px solid var(--code-border);border-radius:8px;padding:20px;margin:20px 0;overflow-x:auto;position:relative}.code-example pre{margin:0;font-family:"Fira Code",monospace;font-size:14px;line-height:1.5}.code-example code{color:var(--code-text)}

/* Code block styling - ensures readable code display */
.code-block {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 14px 0;
    overflow-x: auto;
    font-family: "Fira Code", "Monaco", "Consolas", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #d4d4d4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.code-block pre {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    white-space: pre;
    overflow-x: auto;
}

.code-block code {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}.copy-button{position:absolute;top:10px;right:10px;background:var(--primary-color);color:white;border:none;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:background 0.2s ease}.copy-button:hover{background:var(--primary-hover)}.theme-demo{padding:30px;background:var(--bg-primary);border-radius:12px;margin:20px 0;box-shadow:0 4px 20px rgb(0 0 0 / 10%)}.theme-demo.hidden{display:none}.theme-demo h4{color:var(--primary-color);margin-bottom:20px;font-size:22px}.demo-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-bottom:25px}.demo-color{text-align:center;padding:15px;border-radius:10px;transition:transform 0.2s ease}.demo-color:hover{transform:translateY(-3px)}.demo-color div{width:60px;height:60px;margin:0 auto 10px;border-radius:50%;box-shadow:0 3px 12px rgb(0 0 0 / 20%)}.demo-color span{font-size:12px;font-weight:600;color:var(--text-secondary)}.feature-list{list-style:none;padding-left:0}.feature-list li{padding:8px 0;border-bottom:1px solid rgb(0 0 0 / 5%);color:var(--text-primary);font-size:14px}.feature-list li:last-child{border-bottom:none}.feature-list li strong{color:var(--primary-color);font-weight:600}.research-section li{margin:6px 0;color:var(--text-primary);font-size:14px;line-height:1.5}.research-section ul{margin:12px 0;padding-left:20px}.implementation-guide{background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));padding:30px;border-radius:16px;margin:30px 0;box-shadow:0 5px 25px rgb(0 0 0 / 8%)}.implementation-guide h3{color:var(--primary-color);margin-top:0;margin-bottom:20px;font-size:26px}.step{margin:20px 0;padding:20px;background:var(--card-bg);border-radius:12px;position:relative;padding-left:60px;box-shadow:0 2px 10px rgb(0 0 0 / 5%);transition:transform 0.2s ease}.step:hover{transform:translateX(5px)}.step-number{position:absolute;left:20px;top:20px;width:32px;height:32px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;box-shadow:0 3px 10px rgb(0 0 0 / 20%)}.step h4{margin-top:0;color:var(--text-primary);font-size:20px;font-weight:600}.step p{margin-bottom:0;color:var(--text-primary)}.pages-by-theme{margin:30px 0}.theme-group{margin-bottom:30px;padding:25px;background:var(--card-bg);border-radius:12px;box-shadow:0 3px 15px rgb(0 0 0 / 5%)}.theme-group h4{color:var(--primary-color);margin-top:0;margin-bottom:20px;font-size:22px;font-weight:600}.page-list{list-style-type:none;padding-left:0;margin:0}.page-list li{padding:12px 0 12px 32px;position:relative;border-bottom:1px solid rgb(0 0 0 / 5%);transition:all 0.2s ease}.page-list li:last-child{border-bottom:none}.page-list li::before{content:"📄";position:absolute;left:0;top:12px;font-size:18px}.page-list li:hover{padding-left:38px;color:var(--primary-color)}.theme-variations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0}.variation-card{padding:20px;background:var(--card-bg);border-radius:12px;text-align:center;box-shadow:0 3px 15px rgb(0 0 0 / 8%);transition:all 0.3s ease;cursor:pointer}.variation-card:hover{transform:translateY(-5px);box-shadow:0 5px 25px rgb(0 0 0 / 15%)}.variation-preview{display:flex;justify-content:center;gap:8px;margin-bottom:15px}.variation-color{width:40px;height:40px;border-radius:50%;box-shadow:0 2px 8px rgb(0 0 0 / 20%)}.variation-name{font-weight:600;color:var(--text-primary);margin-bottom:8px}.variation-desc{font-size:14px;color:var(--text-secondary)}.theme-switcher{position:fixed;bottom:30px;right:30px;background:var(--card-bg);padding:20px;border-radius:16px;box-shadow:0 5px 30px rgb(0 0 0 / 20%);z-index:1000;max-width:300px}.theme-switcher h5{margin-top:0;margin-bottom:15px;color:var(--primary-color)}.theme-options{display:grid;gap:10px}.theme-option{padding:12px;background:var(--bg-secondary);border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;gap:10px}.theme-option:hover{border-color:var(--primary-color)}.theme-option.active{border-color:var(--primary-color);background:var(--primary-bg-light)}.theme-option-preview{display:flex;gap:4px}.theme-option-color{width:20px;height:20px;border-radius:50%;border:1px solid rgb(0 0 0 / 20%)}@media (width <= 768px){.container{padding:0 15px}.research-section{margin-bottom:30px;padding:20px 15px}.research-section h2{font-size:24px}.research-section h3{font-size:20px}.theme-demo{padding:20px}.demo-colors{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:10px}.theme-comparison{grid-template-columns:1fr}.css-var-table{font-size:12px}.css-var-table th,.css-var-table td{padding:10px}.theme-switcher{display:none}}.tooltip{position:relative;cursor:help;border-bottom:1px dotted var(--primary-color)}.tooltip::after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:rgb(0 0 0 / 90%);color:white;padding:8px 12px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;margin-bottom:5px}.tooltip:hover::after{opacity:1}main{margin-top:70px}.container.best-practices{padding-top:10px}.best-practices-diagram{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0}.practice-card{background:var(--card-bg);padding:25px;border-radius:12px;text-align:center;box-shadow:0 3px 15px rgb(0 0 0 / 8%);transition:transform 0.3s ease;position:relative;overflow:hidden}.practice-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));transform:scaleX(0);transition:transform 0.3s ease}.practice-card:hover{transform:translateY(-5px)}.practice-card:hover::before{transform:scaleX(1)}.practice-icon{font-size:48px;margin-bottom:15px;display:inline-block;animation:bounce 2s infinite}@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.practice-card h4{color:var(--primary-color);margin:0 0 10px;font-size:20px}.practice-card p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.5}.variables-demo{background:var(--code-bg);padding:25px;border-radius:12px;margin:25px 0;border:1px solid var(--code-border)}.variables-demo h4{margin-top:0;color:var(--primary-color);margin-bottom:20px}.variable-group{margin-bottom:20px}.variable-group h5{color:var(--secondary-color);margin-bottom:10px;font-size:16px}.variable-item{display:flex;align-items:center;justify-content:space-between;padding:10px;background:var(--bg-primary);border-radius:8px;margin-bottom:8px;transition:background 0.2s ease}.variable-item:hover{background:var(--bg-secondary)}.variable-name{font-family:"Fira Code",monospace;color:var(--code-text);font-size:14px}.variable-value{display:flex;align-items:center;gap:10px}.variable-value code{background:var(--code-bg);padding:4px 8px;border-radius:4px;font-size:12px;color:var(--text-secondary)}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin:30px 0}.benefit-card{padding:25px;background:linear-gradient(135deg,var(--card-bg),var(--bg-secondary));border-radius:12px;box-shadow:0 4px 20px rgb(0 0 0 / 8%);transition:transform 0.3s ease}.benefit-card:hover{transform:translateY(-5px)}.benefit-icon{width:60px;height:60px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px;color:white;box-shadow:0 4px 15px rgb(0 0 0 / 20%)}.benefit-card h4{text-align:center;color:var(--primary-color);margin-bottom:15px;font-size:20px}.benefit-card p{text-align:center;color:var(--text-secondary);margin:0;line-height:1.6}.feature-list.checkmarks{list-style:none;padding:0;margin:20px 0}.feature-list.checkmarks li{padding:10px 0 10px 35px;position:relative;border-bottom:1px solid var(--bg-tertiary)}.feature-list.checkmarks li::before{content:"✓";position:absolute;left:0;top:10px;width:24px;height:24px;background:var(--success-bg);color:var(--success-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}.performance-tips{background:linear-gradient(135deg,#fff9e6,#ffedcc);padding:25px;border-radius:12px;margin:25px 0;border-left:4px solid #ffc107}.performance-tips h4{margin-top:0;color:#f80;display:flex;align-items:center;gap:10px;font-size:20px}.performance-tips ul{margin:15px 0 0;padding-left:25px}.performance-tips li{margin:8px 0;color:#795548}.browser-support{margin:30px 0}.browser-table{width:100%;border-collapse:collapse;background:var(--card-bg);border-radius:12px;overflow:hidden;box-shadow:0 3px 15px rgb(0 0 0 / 8%)}.browser-table th{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:white;padding:15px;text-align:left;font-weight:600}.browser-table td{padding:15px;border-bottom:1px solid var(--bg-tertiary)}.browser-table tr:last-child td{border-bottom:none}.browser-table tr:hover{background:var(--bg-secondary)}.support-yes{color:#4caf50;font-weight:600}.support-partial{color:#ff9800;font-weight:600}.support-no{color:#f44336;font-weight:600}.back-button-container{position:sticky;bottom:20px;text-align:center;margin-top:50px;z-index:100}.back-btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary-color);color:white;padding:12px 24px;border-radius:50px;text-decoration:none;font-weight:600;box-shadow:0 4px 15px rgb(0 0 0 / 20%);transition:all 0.3s ease}.back-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 6px 20px rgb(0 0 0 / 25%)}.responsive-media{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;margin:20px 0;border-radius:12px;box-shadow:0 4px 20px rgb(0 0 0 / 10%)}.responsive-media iframe,.responsive-media img{position:absolute;top:0;left:0;width:100%;height:100%}blockquote{margin:20px 0;padding:20px 20px 20px 30px;background:var(--bg-secondary);border-left:4px solid var(--primary-color);border-radius:8px;font-style:italic;color:var(--text-secondary);position:relative}blockquote::before{content:'\201C';position:absolute;left:10px;top:10px;font-size:48px;color:var(--primary-color);opacity:0.2}hr{margin:40px 0;border:none;height:1px;background:linear-gradient(to right,transparent,var(--primary-color),transparent)}@media (prefers-color-scheme:dark){.performance-tips{background:linear-gradient(135deg,#3d3d3d,#2d2d2d);border-left-color:#f80}.performance-tips h4{color:#ffa726}.performance-tips li{color:#b0b0b0}}@media print{.theme-switcher,.back-button-container,.copy-button{display:none}.research-section{break-inside:avoid}}@media (width>= 769px){.container{padding:0 20px}}@media (width <= 480px){.css-var-table{font-size:11px}.css-var-table th,.css-var-table td{padding:8px}.theme-demo h4{font-size:18px}.implementation-guide{padding:20px}.step{padding-left:50px}.step-number{width:28px;height:28px;font-size:14px}}html{scroll-behavior:smooth}a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-color);outline-offset:2px}.skip-to-content{position:absolute;top:-40px;left:0;background:var(--primary-color);color:white;padding:8px 16px;text-decoration:none;border-radius:0 0 8px;transition:top 0.2s ease}.skip-to-content:focus{top:0}.loading{display:inline-block;width:20px;height:20px;border:3px solid var(--bg-tertiary);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.alert{padding:15px 20px;border-radius:8px;margin:20px 0;display:flex;align-items:center;gap:12px;font-weight:500}.alert-info{background:var(--info-bg);color:var(--info-color);border-left:4px solid var(--info-color)}.alert-success{background:var(--success-bg);color:var(--success-color);border-left:4px solid var(--success-color)}.alert-warning{background:var(--warning-bg);color:var(--warning-color);border-left:4px solid var(--warning-color)}.alert-error{background:var(--error-bg);color:var(--error-color);border-left:4px solid var(--error-color)}.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.badge-primary{background:var(--primary-color);color:white}.badge-secondary{background:var(--secondary-color);color:white}.badge-success{background:var(--success-color);color:white}.badge-warning{background:var(--warning-color);color:white}.badge-info{background:var(--info-color);color:white}@media (hover:hover){.card-hover{transition:all 0.3s ease}.card-hover:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgb(0 0 0 / 15%)}}.text-center{text-align:center}.text-primary{color:var(--primary-color)}.text-secondary{color:var(--text-secondary)}.mt-3{margin-top:30px}.mb-3{margin-bottom:30px}.p-3{padding:30px}.dimensions-intro{text-align:center;padding:40px 20px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-radius:16px;margin:40px 0;box-shadow:0 10px 30px rgb(0 0 0 / 10%)}.dimensions-intro h2{font-size:2.5rem;margin-bottom:20px;color:var(--primary-color);font-weight:700}.dimensions-intro p{font-size:1.2rem;color:var(--text-secondary);max-width:800px;margin:0 auto;line-height:1.8}.dimensions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin:40px 0}.dimension-card{background:var(--card-bg);border-radius:16px;padding:30px;box-shadow:0 5px 20px rgb(0 0 0 / 10%);transition:all 0.3s ease;position:relative;overflow:hidden;animation:fade-in-up 0.6s ease-out;animation-fill-mode:both;cursor:pointer;user-select:none}.dimension-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));transform:scaleX(0);transition:transform 0.3s ease}.dimension-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgb(0 0 0 / 15%)}.dimension-card:hover::before{transform:scaleX(1)}.dimension-icon{width:70px;height:70px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:32px;color:white;box-shadow:0 5px 15px rgb(0 0 0 / 20%)}.dimension-card h3{text-align:center;font-size:1.5rem;margin-bottom:15px;color:var(--primary-color)}.dimension-detail{margin-top:20px}.dimension-detail h4{font-size:1.1rem;margin-bottom:10px;color:var(--text-primary);font-weight:600}.dimension-detail ul{margin:12px 0 0;padding-left:24px}.dimension-detail li{margin:4px 0;color:var(--text-secondary,#666)}.breakpoint-strategy{margin-top:40px}.breakpoint-strategy h3{margin-bottom:16px}.breakpoint-list{background:var(--bg-secondary);padding:24px;border-radius:12px;font-family:'Fira Code',monospace;font-size:14px}.breakpoint-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--bg-tertiary)}.breakpoint-item:last-child{border-bottom:none}.breakpoint-name{font-weight:600;color:var(--primary-color)}.breakpoint-value{color:var(--text-secondary)}@media (width <= 768px){.dimensions-intro h2{font-size:2rem}.dimensions-intro p{font-size:1rem}.dimensions-grid{grid-template-columns:1fr}}@media (width>= 1201px){.dimensions-grid{grid-template-columns:repeat(3,1fr)}.dimension-card{min-height:400px}}.device-preview-section{margin:60px 0;padding:40px;background:linear-gradient(135deg,var(--bg-secondary),var(--bg-tertiary));border-radius:20px;box-shadow:0 10px 40px rgb(0 0 0 / 10%)}.device-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;margin-top:30px}.device-preview{background:var(--card-bg);border-radius:16px;padding:24px;text-align:center;box-shadow:0 5px 20px rgb(0 0 0 / 10%)}.device-frame{width:100%;max-width:300px;margin:0 auto 20px;padding:20px;background:#000;border-radius:20px;box-shadow:0 10px 30px rgb(0 0 0 / 30%)}.device-screen{background:white;border-radius:10px;padding:10px;height:200px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666}.device-info h4{color:var(--primary-color);margin-bottom:10px}.device-specs{font-size:14px;color:var(--text-secondary);line-height:1.6}.dimension-card:nth-child(1){animation-delay:0.1s}.dimension-card:nth-child(2){animation-delay:0.2s}.dimension-card:nth-child(3){animation-delay:0.3s}@keyframes fade-in-up{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.dimension-card:active{transform:scale(0.98)}.gradient-text{background:linear-gradient(135deg,var(--primary-color),var(--accent-color));-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.modern-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 28px;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));color:white;border:none;border-radius:50px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;box-shadow:0 5px 15px rgb(0 0 0 / 20%);text-decoration:none}.modern-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgb(0 0 0 / 30%)}.modern-btn:active{transform:translateY(0)}.glass-card{background:rgb(255 255 255 / 10%);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / 20%);border-radius:16px;padding:30px;box-shadow:0 8px 32px rgb(0 0 0 / 10%)}.neumorphic-card{background:var(--bg-secondary);border-radius:20px;padding:30px;box-shadow:20px 20px 60px rgb(0 0 0 / 10%),-20px -20px 60px rgb(255 255 255 / 70%)}.color-palette{display:flex;gap:16px;flex-wrap:wrap;margin:30px 0}.color-swatch-large{width:100px;height:100px;border-radius:12px;box-shadow:0 5px 15px rgb(0 0 0 / 20%);display:flex;align-items:flex-end;justify-content:center;padding:10px;color:white;font-size:12px;font-weight:600;transition:transform 0.3s ease}.color-swatch-large:hover{transform:scale(1.1) rotate(5deg)}

/* Table of Contents */
.toc {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

.toc h2 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 600;
}

.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 6px;
}

.toc li {
    margin: 0;
}

.toc a {
    display: block;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.toc a:hover {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .toc ul {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 24px;
    }
    
    .title-subtitle {
        font-size: 16px;
        display: block;
        margin-top: 5px;
    }
    
    .title-divider {
        display: none;
    }
}

/* Intro highlights section for research pages */
.intro-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 5%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
}

.highlight-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}

.highlight-text h4 {
    margin: 0 0 8px;
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.highlight-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
}

/* Last updated styling */
.last-updated {
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 14px;
}

/* Responsive adjustments for intro highlights */
@media (max-width: 768px) {
    .intro-highlights {
        grid-template-columns: 1fr;
    }
    
    .highlight-item {
        padding: 15px;
    }
    
    .highlight-icon {
        font-size: 24px;
    }
    
    .highlight-text h4 {
        font-size: 16px;
    }
}