:root {
     --primary-color: #2563eb;
     --text-color: #1f2937;
     --bg-color: #f3f4f6;
     --card-bg: #ffffff;
     --code-bg: #1e293b;
     --code-text: #e2e8f0;
     --border-color: #e5e7eb;
}

body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     line-height: 1.6;
     color: var(--text-color);
     background-color: var(--bg-color);
     margin: 0;
	padding: 20px;
}

.container {
     max-width: 1020px;
     margin: 0 auto;
     background: var(--card-bg);
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

h1 {
     font-size: 2.5rem;
     color: var(--primary-color);
     border-bottom: 2px solid var(--border-color);
     padding-bottom: 10px;
     margin-bottom: 20px;
}

h2 {
     font-size: 1.5rem;
     margin-top: 30px;
     margin-bottom: 15px;
     color: #374151;
}

h3 {
     margin-top: 25px;
     color: #4b5563;
}

h4 {
     margin-top: 15px;
     margin-bottom: 5px;
     color: #6b7280;
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
}

p {
     margin-bottom: 15px;
}

a {
     color: var(--primary-color);
     text-decoration: none;
}

a:hover {
     text-decoration: underline;
}

.back-link {
     display: inline-block;
     margin-bottom: 20px;
     font-weight: bold;
     font-size: 0.9rem;
}

pre {
     background-color: #f6f8fa;
     color: #0c4a6e;
     border: 1px solid #bae6fd;
     border-left: 4px solid #0284c7;
     padding: 15px;
     border-radius: 6px;
     overflow-x: auto;
     font-family: "Menlo", "Monaco", "Consolas", "Courier New", monospace;
     font-size: 0.9rem;
     margin-bottom: 20px;
}

pre.example {
     background-color: #1e293b;
     color: #e2e8f0;
     border: 1px solid #374151;
     border-left: 4px solid #64748b;
}

code {
     font-family: inherit;
}

p code {
     background-color: #e5e7eb;
     color: #c026d3;
     padding: 2px 4px;
     border-radius: 4px;
     font-size: 0.9em;
}

.plugin-list {
     column-count: 3;
     column-gap: 20px;
     padding: 0;
     list-style: none;
}

.plugin-list li {
     background: #f8fafc;
     border: 1px solid var(--border-color);
     border-radius: 6px;
     transition: transform 0.2s, box-shadow 0.2s;
     break-inside: avoid;
     margin-bottom: 15px;
}

.plugin-list li:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
     border-color: var(--primary-color);
}

.plugin-list a {
     display: block;
     padding: 15px;
     font-weight: 500;
}

@media (max-width: 800px) {
     .plugin-list {
          column-count: 2;
     }
}

@media (max-width: 500px) {
     .plugin-list {
          column-count: 1;
     }
}

.params-table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 20px;
     background: #fff;
     font-size: 0.95rem;
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.params-table th,
.params-table td {
     border: 1px solid #e5e7eb;
     padding: 12px;
     text-align: left;
     vertical-align: top;
}

.params-table th {
     background-color: #f3f4f6;
     color: #111827;
     font-weight: 600;
     width: 20%;
}

.params-table tr:nth-child(even) {
     background-color: #f9fafb;
}

.params-table td ul {
     margin: 5px 0 0 20px;
     padding: 0;
}

.footer {
     text-align: center;
     margin-top: 40px;
     padding-top: 20px;
     border-top: 1px solid var(--border-color);
     color: #6b7280;
     font-size: 0.9rem;
}