body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #fff; color: #14171a; }
header { padding: 14px 18px 8px; border-bottom: 1px solid #dfe3e6; }
h1 { font-size: 1.25rem; margin: 0 0 6px; }
h2 { font-size: 1rem; margin: 0 0 8px; }
h3 { font-size: .875rem; margin: 16px 0 6px; }
.lede { margin: 0 0 10px; color: #5b6570; max-width: 100ch; }
.links { display: flex; gap: 18px; margin: 0 0 6px; font-weight: 600; }
.links a { color: #1f6feb; }
.standin { margin: 0 0 6px; max-width: 100ch; padding: 8px 12px; border: 1px solid #dfe3e6; border-left: 3px solid #2d6bff; border-radius: 6px; font-size: 13px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.showcase { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 16px 18px; align-items: start; }
.demo { min-width: 0; border: 1px solid #dfe3e6; border-radius: 8px; padding: 12px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
button { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid #dfe3e6; border-radius: 6px; background: #fff; cursor: pointer; }
button[aria-pressed="true"] { background: #2d6bff; color: #fff; border-color: #2d6bff; }
.action { margin-left: auto; border-style: dashed; }
.htmx-request { opacity: .6; }
.saved-head { margin: 12px 0 4px; }
.saved { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 7.5em; overflow: auto; color: #5b6570; }
.saved:empty::before { content: "Nothing yet: drag a bar."; }
.steps { margin: 0; padding-left: 1.2rem; font-size: 13px; }
.steps li { margin-bottom: 6px; }
.log { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #5b6570; }
.code { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 0 18px 16px; }
.code pre { margin: 0; max-height: 520px; overflow: auto; background: #f6f8fa; border: 1px solid #dfe3e6; border-radius: 6px; padding: 10px; font-size: 12px; }
footer { font-size: 12px; color: #5b6570; padding: 0 18px 18px; }
footer a { color: #1f6feb; }
@media (max-width: 1500px) { .showcase { grid-template-columns: 1fr; } aside { display: grid; grid-template-columns: 2fr 1fr; gap: 0 24px; } aside h2, aside ol { grid-column: 1; } aside h3, aside ul { grid-column: 2; grid-row: 1 / span 2; } aside ul { grid-row: 2; align-self: start; } }
@media (max-width: 800px) { aside { display: block; } }