code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.85em;
    background: var(--code-bg); padding: 0.2rem 0.4rem; border-radius: 6px;
    color: var(--text-primary);
}
pre {
    background: var(--pre-bg); border-radius: 16px; padding: 1.2rem 1.4rem;
    overflow-x: auto; font-size: 0.85rem; line-height: 1.6; margin: 1.4rem 0;
    border: 1px solid #333; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
pre code {
    font-size: 0.85rem; color: var(--pre-text); background: transparent; padding: 0; border: none;
}
.note, .tip, .warning {
    padding: 0.8rem 1rem; margin: 1.2rem 0; border-radius: 14px; border-left: 4px solid;
}
.note { background: var(--note-bg); border-left-color: #3b82f6; }
.tip { background: var(--tip-bg); border-left-color: #10b981; }
.warning { background: var(--warning-bg); border-left-color: #f97316; }
table {
    width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.9rem;
}
th, td { border: 1px solid var(--border-color); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
th { background: var(--table-header-bg); font-weight: 600; }
.coord-diagram {
    background: var(--bg-secondary); border-radius: 20px; padding: 1.5rem; text-align: center;
    margin: 1rem 0; font-family: monospace; font-size: 0.9rem; border: 1px solid var(--border-color);
}
.coord-diagram svg { max-width: 100%; height: auto; background: white; border-radius: 12px; }
.experimental-badge {
    background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
    padding: 0.15rem 0.5rem; border-radius: 14px; font-size: 0.7rem; margin-left: 0.5rem;
    vertical-align: middle;
}