.site-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; }
.site-top nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-top a { color: #3a1878; }
.site-main { padding: 0 1.5rem 4rem; max-width: 48rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0 0 1.5rem; color: #4a2a78; }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: .35rem; }
.site-article h1, .site-main h1 { font-size: 2rem; line-height: 1.2; color: #2c1860; }
.site-summary { font-size: 1.125rem; color: #2c1860; }
.site-body h2, .site-faq h2, .site-related h2, .site-cta h2 { margin-top: 2rem; color: #2c1860; }
.site-body a, .site-related a, .crumbs a { color: #3a1878; }
.tpl-card { border: 1px solid #d9d0ea; border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.tpl-var { background: #efe8ff; padding: 0 .2rem; border-radius: 4px; }
.tpl-source { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-list { padding-left: 1.1rem; }
.site-list li { margin: .6rem 0; }
.site-cta { margin-top: 2.5rem; padding: 1.25rem; border-radius: 16px; background: #f6f3fb; }
.site-form { display: grid; gap: .75rem; margin-top: 1.5rem; }
.site-form label { display: grid; gap: .25rem; color: #2c1860; }
.site-form .hp { position: absolute; left: -9999px; }
.site-form input { border: 1px solid #d9d0ea; border-radius: 8px; padding: .6rem .75rem; }
.tool-ccs, .tool-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-out { font-family: ui-monospace, monospace; word-break: break-all; }
.tool-error { color: #9b2242; min-height: 1.2em; }