:root { font-family: system-ui, sans-serif; color: #172033; background: #f7f8fb; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 1050px); margin: auto; padding: 1rem 1rem 4rem; }
a { color: #155eef; }
button, input, textarea { font: inherit; }
button { cursor: pointer; min-height: 44px; padding: .6rem 1rem; }
input, textarea { font-size: 16px; }
textarea { width: 100%; min-height: 22rem; padding: .8rem; resize: vertical; }
nav { display: flex; flex-wrap: wrap; gap: .25rem; line-height: 1.5; }
.site-header { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .6rem 0; background: #f7f8fb; }
.site-brand { color: #172033; font-weight: 750; text-decoration: none; }
.guide-trigger { flex: 0 0 auto; border: 0; border-radius: 8px; background: #155eef; color: #fff; font-weight: 650; }
.card { background: #fff; border: 1px solid #d9deea; border-radius: 10px; padding: 1rem; margin: .75rem 0; }
.muted { color: #5d677a; }.completed { color: #087443; }.locked { color: #697386; }.current { border-color: #155eef; }.error { color: #b42318; }
.actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
pre { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; white-space: pre-wrap; padding: 1rem; background: #101828; color: #f8fafc; }
article { min-width: 0; line-height: 1.6; } article img, article video { max-width: 100%; height: auto; } article table { display: block; max-width: 100%; overflow-x: auto; }
.guide-dialog { width: min(700px, calc(100% - 2rem)); max-height: min(760px, calc(100dvh - 2rem)); border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(16, 24, 40, .3); padding: 0; color: #172033; }
.guide-dialog::backdrop { background: rgba(16, 24, 40, .58); }.guide-dialog__content { max-height: inherit; overflow-y: auto; padding: clamp(1.1rem, 3vw, 2rem); line-height: 1.55; }.guide-dialog__heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }.guide-dialog h2 { margin: 0; }.guide-dialog h3 { margin: 1.2rem 0 .35rem; font-size: 1rem; }.guide-dialog ol, .guide-dialog ul { padding-left: 1.35rem; }.guide-dialog li { margin: .55rem 0; }
.guide-close { min-height: 44px; padding: 0 .4rem; border: 0; background: transparent; font-size: 2rem; line-height: 1; color: #475467; }.guide-tip { border-left: 3px solid #155eef; background: #eff4ff; padding: .75rem 1rem; margin: .8rem 0; border-radius: 0 8px 8px 0; }.guide-tip h3 { margin-top: 0; }.guide-tip p { margin: .5rem 0; }.guide-tip p:first-of-type { margin-top: 0; }.guide-tip p:last-child { margin-bottom: 0; }.guide-tip blockquote { margin: .65rem 0; border-left: 3px solid #84adff; padding-left: .75rem; color: #344054; }.eyebrow { margin: 0 0 .25rem; color: #155eef; font-weight: 650; font-size: .9rem; }
.login { max-width: 26rem; margin: 10vh auto; }.login form, .login label { display: grid; gap: .5rem; }.login form { gap: 1rem; }.login input { padding: .6rem; }
.roadmap-button { display: inline-flex; align-items: center; padding: .6rem 1rem; background: #155eef; color: #fff; border-radius: 6px; text-decoration: none; }.roadmap-card li { margin: .55rem 0; }.roadmap-card small { color: #5d677a; }
@media (max-width: 550px) { main { padding: .75rem .75rem 2rem; }.site-header { padding: .5rem 0; }.site-brand { font-size: .95rem; }.guide-trigger { min-width: 124px; }.card { padding: .9rem; }.actions > button { flex: 1 1 100%; }.guide-dialog { width: calc(100% - 1rem); max-height: calc(100dvh - 1rem); }.guide-dialog__content { padding: 1rem; } }