/* Seidr Labs · /ai/crazy-8/ — page-only pieces on top of hub.css */
.page-crazy8 .hub-hero h1 { max-width: 16ch; }
.c8-fine { font-size: var(--t-small); color: var(--mist); margin: 18px 0 0; }
.c8-fine code, .page-crazy8 .lead code { font-family: var(--f-mono); font-size: .88em; color: var(--bone); }
.c8-section { padding-block: clamp(32px, 5vw, 72px); }
.c8-section h2 { font-size: var(--t-h2); margin: 14px 0 22px; max-width: 20ch; }
.c8-section h2 em { color: var(--sap); }
.c8-video video { width: 100%; height: auto; display: block; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--night-2); aspect-ratio: 16 / 9; }
.c8-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 76ch; }
.c8-steps li { counter-increment: step; position: relative; padding: 18px 20px 18px 66px; border: 1px solid var(--line); border-radius: var(--r-m); background: linear-gradient(180deg, var(--moss), var(--night-2)); color: var(--mist); line-height: 1.55; }
.c8-steps li::before { content: counter(step); position: absolute; left: 18px; top: 14px; font-family: var(--f-display); font-size: 2rem; color: var(--sap); line-height: 1; }
.c8-steps b { color: var(--bone); }
.c8-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.c8-rules li { padding: 18px 20px; border: 1px solid var(--line); border-left: 2px solid var(--aurora); border-radius: var(--r-m); background: var(--moss); color: var(--mist); line-height: 1.55; }
.c8-rules b { color: var(--bone); }
.c8-install { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.c8-code { margin: 0; padding: 22px 24px; overflow-x: auto; border: 1px solid var(--line-2); border-radius: var(--r-m); background: #04090a; color: #cfe3da; font-family: var(--f-mono); font-size: .85rem; line-height: 1.7; }
.c8-code:focus-visible { outline: 2px solid var(--sap); outline-offset: 3px; }
.c8-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.c8-two .hub-card:hover { transform: none; }
.c8-download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 44px); border: 1px solid var(--sap); border-radius: var(--r-l); background: linear-gradient(180deg, var(--moss), var(--night-2)); }
.c8-download h2 { margin-top: 10px; font-family: var(--f-mono); font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: none; }
.c8-sha code { display: block; margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: #04090a; color: var(--aurora); font-family: var(--f-mono); font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 860px) { .c8-install, .c8-download { grid-template-columns: 1fr; } }