/* Rhythme testers page: the tester guide's own styles, scoped under .guide so the home page is untouched. Light only, like the site. */
.guide { --ink-3: #8d7fa8; --ok: #4f8d70; --high: #b9505b; --on-plum: #ffffff; --line: rgba(90, 66, 116, .14); --display: var(--serif); --body: var(--sans); --r: 22px; --r-sm: 14px;
  font-family: var(--body); font-size: 15.5px; line-height: 1.55; font-weight: 500 }
.guide section { padding: 0 }
.guide h1, .guide h2, .guide h3 { font-weight: 500; color: var(--ink) }
.guide .wrap { max-width: 640px; margin: 0 auto; padding-block: 18px 56px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 26px }
.guide .ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; display: inline-block; vertical-align: -4px; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none }
.guide .ms.fill { font-variation-settings: "FILL" 1 }
.guide h1, .guide h2, .guide h3 { font-family: var(--display); font-weight: 500; text-wrap: balance; margin: 0; color: var(--ink) }
.guide p { margin: 0 }
.guide a { color: var(--mauve) }
.guide :focus-visible { outline: 3px solid var(--mauve); outline-offset: 2px; border-radius: 8px }
.guide .g-hero { position: relative; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 90% at 85% 10%, var(--blush-2), transparent 60%), linear-gradient(160deg, var(--lilac-2), var(--paper-2)); padding: 24px 20px 22px; display: grid; grid-template-columns: minmax(0,1fr) 112px; gap: 12px; align-items: end; box-shadow: var(--shadow) }
.guide .g-brand { display: flex; align-items: center; gap: 7px; font-weight: 800; letter-spacing: .14em; font-size: 12px; color: var(--plum); text-transform: uppercase }
.guide .g-brand img { width: 22px; height: 22px; border-radius: 7px }
.guide .g-hero h1 { font-size: clamp(31px, 8.4vw, 42px); line-height: 1.04; margin-top: 12px; letter-spacing: -.01em }
.guide .g-hero h1 em { font-style: italic; color: var(--mauve) }
.guide .g-hero .lede { color: var(--ink-2); margin-top: 10px; max-width: 34ch }
.guide .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px }
.guide .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--card); color: var(--plum); font-weight: 700; font-size: 13px; border: 1px solid var(--line) }
.guide .pill a { color: inherit; text-decoration: none }
.guide .hero-art { position: relative; height: 216px }
.guide .hero-art .g-rhea { position: absolute; bottom: -6px; right: 0; width: 88px}
.guide .hero-art .g-luna { position: absolute; top: -8px; left: -22px; width: 50px; animation: bob 4.5s ease-in-out infinite }
@keyframes bob { 50% { transform: translateY(-7px) rotate(-4deg) } }
@media (prefers-reduced-motion: reduce) {
.guide .hero-art .g-luna { animation: none }
}
.guide .gsec { display: flex; flex-direction: column; gap: 12px }
.guide .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mauve) }
.guide .gsec > h2 { font-size: 27px; line-height: 1.15 }
.guide .gsec > .sub { color: var(--ink-2); margin-top: -4px }
.guide .prep { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px }
.guide .prep .tile { background: var(--card); border-radius: var(--r-sm); padding: 14px; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line) }
.guide .prep .tile .ms { color: var(--mauve); font-size: 24px }
.guide .prep .tile b { font-size: 14.5px }
.guide .prep .tile span:last-child { color: var(--ink-2); font-size: 13.5px; line-height: 1.45 }
@media (max-width: 380px) {
.guide .prep { grid-template-columns: minmax(0,1fr) }
}
.guide .progress { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 0 8px; display: flex; align-items: center; gap: 12px }
.guide .bar { flex: 1; height: 10px; border-radius: 999px; background: var(--lilac-2); overflow: hidden }
.guide .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--lilac), var(--mauve)); transition: width .4s ease }
.guide .count { font-weight: 800; font-size: 13.5px; color: var(--plum); font-variant-numeric: tabular-nums; white-space: nowrap }
.guide .reset { border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 4px }
.guide .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: step }
.guide .step { counter-increment: step; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px 16px 14px; display: grid; grid-template-columns: minmax(0,1fr) 84px; gap: 4px 12px; border: 1px solid transparent; transition: border-color .25s, background .25s }
.guide .step.done { border-color: var(--mint); background: color-mix(in srgb, var(--card) 88%, var(--mint)) }
.guide .step .top { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 }
.guide .tick { flex: none; position: relative; width: 30px; height: 30px; margin-top: 1px }
.guide .tick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 30px; height: 30px }
.guide .tick span { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--lilac); display: grid; place-items: center; color: transparent; background: var(--paper); transition: background .2s, border-color .2s, color .2s }
.guide .tick span::before { content: counter(step); font-weight: 800; font-size: 13px; color: var(--mauve) }
.guide .tick input:checked + span { background: var(--ok); border-color: var(--ok); color: var(--on-plum) }
.guide .tick input:checked + span::before { content: "check"; font-family: "Material Symbols Outlined"; font-size: 20px; color: var(--card); font-weight: 400 }
.guide .tick input:focus-visible + span { outline: 3px solid var(--mauve); outline-offset: 2px }
.guide .step h3 { font-size: 20px; line-height: 1.2; padding-top: 3px }
.guide .step h3 small { display: block; font-family: var(--body); font-size: 12.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; margin-top: 2px }
.guide .step .art { grid-column: 2; grid-row: 1 / span 3; align-self: start; display: flex; justify-content: center }
.guide .step .art img { width: 84px; height: auto; max-height: 96px; object-fit: contain}
.guide .step .art img.round { width: 64px; height: 64px; border-radius: 50%; object-fit: cover }
.guide .step .art.pair { position: relative; height: 96px; width: 84px }
.guide .step .art.pair img { position: absolute; width: 56px }
.guide .step .art.pair img:first-child { left: 0; top: 0 }
.guide .step .art.pair img:last-child { right: 0; bottom: 0 }
.guide .do, .guide .see { grid-column: 1; font-size: 14.5px; padding-left: 40px }
.guide .do { margin-top: 6px }
.guide .see { color: var(--ink-2) }
.guide .do b, .guide .see b { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px }
.guide .do b { color: var(--mauve) }
.guide .see b { color: var(--ok) }
.guide .uipath { font-weight: 700; color: var(--plum) }
.guide .step details { grid-column: 1 / -1; margin: 6px 0 0 40px; font-size: 14px; color: var(--ink-2) }
.guide .step summary { cursor: pointer; color: var(--mauve); font-weight: 700; font-size: 13.5px; list-style: none; display: inline-flex; align-items: center; gap: 2px; padding: 4px 0 }
.guide .step summary::-webkit-details-marker { display: none }
.guide .step summary .ms { font-size: 18px; transition: transform .2s }
.guide .step details[open] summary .ms { transform: rotate(90deg) }
.guide .step details ul { margin: 4px 0 2px; padding-left: 18px; display: flex; flex-direction: column; gap: 3px }
@media (max-width: 360px) {
.guide .step { grid-template-columns: minmax(0,1fr) 64px }
.guide .step .art img { width: 64px }
.guide .do, .guide .see { padding-left: 0 }
.guide .step details { margin-left: 0 }
}
.guide .bug { background: linear-gradient(160deg, var(--blush-2), var(--card) 70%); border-radius: 26px; padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px }
.guide .bug-head { display: grid; grid-template-columns: minmax(0,1fr) 88px; gap: 12px; align-items: center }
.guide .bug-head img { width: 88px }
.guide .bug h2 { font-size: 27px; line-height: 1.12 }
.guide .bug-head p { color: var(--ink-2); margin-top: 6px }
.guide .where { background: var(--card); border-radius: var(--r-sm); border: 1px solid var(--line); padding: 12px 14px; display: flex; align-items: center; gap: 12px }
.guide .mock { flex: none; width: 118px; height: 74px; border-radius: 12px; background: linear-gradient(160deg, var(--lilac-2), var(--paper-2)); position: relative; border: 1px solid var(--line) }
.guide .mock .chip { position: absolute; top: 9px; right: 8px; font-size: 10px; font-weight: 800; color: var(--plum); background: var(--card); border-radius: 999px; padding: 3px 7px }
.guide .mock .bb { position: absolute; top: 34px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--card); display: grid; place-items: center; color: var(--plum); box-shadow: 0 0 0 3px var(--blush), 0 0 0 7px color-mix(in srgb, var(--blush) 45%, transparent) }
.guide .mock .bb .ms { font-size: 16px; vertical-align: 0 }
.guide .where p { font-size: 14px; color: var(--ink-2) }
.guide .where p b { color: var(--ink) }
.guide .flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px }
.guide .flow li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px }
.guide .flow li .ms { color: var(--mauve); flex: none; margin-top: 2px }
.guide .template { background: var(--cream); border-radius: var(--r-sm); padding: 12px 14px; font-size: 14px; border: 1px dashed var(--lilac) }
.guide .template .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mauve); display: block; margin-bottom: 4px }
.guide .template p + p { margin-top: 3px }
.guide .template i { color: var(--ink-3); font-style: normal }
.guide .dont { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border-radius: var(--r-sm); padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--high) 40%, transparent); font-size: 14px }
.guide .dont .ms { color: var(--high); flex: none }
.guide .dont b { color: var(--high) }
.guide .fixed { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2) }
.guide .fixed .ms { color: var(--ok) }
.guide .about { background: var(--card); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line) }
.guide .about h2 { font-size: 24px }
.guide .about p { color: var(--ink-2) }
.guide .about p b { color: var(--ink) }
.guide .tips { display: grid; gap: 10px }
.guide .tip { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border-radius: var(--r-sm); padding: 13px 14px; border: 1px solid var(--line); font-size: 14.5px }
.guide .tip .ms { color: var(--mauve); flex: none; font-size: 22px }
.guide .tip b { display: block; color: var(--ink) }
.guide .tip span.t { color: var(--ink-2) }
.guide .tip.care { background: var(--blush-2); border-color: transparent }
.guide .tip.care .ms { color: var(--high) }
.guide .soon { display: flex; flex-wrap: wrap; gap: 8px }
.guide .soon span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--lilac-2); color: var(--plum); font-weight: 600; font-size: 13.5px }
.guide .soon .ms { font-size: 18px }
.guide .g-end { text-align: center; color: var(--ink-3); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px }
.guide .g-end img { width: 54px; opacity: .9 }

/* the site nav is sticky too, so the progress bar sits just under it */
.guide .progress { top: calc(max(10px, env(safe-area-inset-top, 0px)) + 68px) }
.guide .wrap { padding-block: 26px 40px }
.guide .g-end { text-align: center; color: var(--ink-3); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 8px }
.guide .g-end img { width: 54px; opacity: .9 }
.guide .g-hero .lede { font-size: inherit; margin-left: 0; margin-right: 0 }