/* /compare/searchable/ only: the boomerang path of one question (out to an AI, back to your
   site) and the two acetate sheets over the same minute of requests. Prefix csb-. */

/* hero: boomerang path */
.csb-bm{border-radius:10px;background:var(--sk-deep);border:1px solid var(--sk-line-2);overflow:hidden}
.csb-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--sk-line);font:500 .66rem var(--sk-mono);color:var(--sk-text-3)}
.csb-btn{padding:.2rem .55rem;border:1px solid var(--sk-line-2);border-radius:6px;background:var(--sk-ink-2);color:var(--sk-text-2);font:600 .62rem var(--sk-mono);cursor:pointer}
.csb-flight{position:relative;height:7.4rem;margin:1rem 1.1rem 1.9rem}
.csb-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.csb-arc path{fill:none;stroke:#3d5266;stroke-width:1.6;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.csb-leg{position:absolute;top:-.2rem;margin:0;font:600 .56rem var(--sk-mono);letter-spacing:.05em;text-transform:uppercase}
.csb-out{left:0;color:var(--sk-ai)}.csb-back{right:0;color:var(--sk-people-t)}
.csb-stops{margin:0;padding:0;list-style:none}
.csb-stops li{position:absolute;transform:translate(-50%,-.45rem);display:flex;flex-direction:column;align-items:center;gap:.45rem;font:600 .6rem var(--sk-mono);color:var(--sk-text-4);white-space:nowrap;transition:color .3s}
.csb-lab{padding:0 .25rem;border-radius:3px;background:var(--sk-deep)}
.csb-pin{width:.9rem;height:.9rem;border-radius:50%;background:var(--sk-ink-2);border:2px solid #4a6075;transition:background .3s,border-color .3s,transform .3s}
.csb-stops li.done .csb-pin{border-color:#6b7c8c;background:#22303d}
.csb-stops li.on{color:#fff}
.csb-stops li.on .csb-pin{transform:scale(1.35);border-color:var(--sk-people-t);background:var(--sk-people);box-shadow:0 0 0 5px rgba(42,120,214,.22)}
.csb-stops li[data-n="0"].on .csb-pin,.csb-stops li[data-n="1"].on .csb-pin{border-color:var(--sk-ai);background:var(--sk-ai-deep);box-shadow:0 0 0 5px rgba(235,104,52,.22)}
.csb-bm.fake .csb-stops li.on{color:#ff8a80}
.csb-bm.fake .csb-stops li.on .csb-pin{border-color:#ff8a80;background:#7a2620;box-shadow:0 0 0 5px rgba(255,138,128,.2)}
.csb-now{margin:0 .9rem .7rem;font:500 .74rem/1.45 var(--sk-mono);color:var(--sk-text-2);overflow-wrap:anywhere}
.csb-now b{font-weight:600;color:#fff}
.csb-rec{display:grid;gap:.45rem;margin:0 .9rem .9rem}
.csb-rec div{padding:.5rem .65rem;border-radius:6px;background:var(--sk-ink-2);border:1px solid var(--sk-line)}
.csb-rec dt{font:600 .58rem var(--sk-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--sk-text-3)}
.csb-rec dd{margin:.2rem 0 0;font-size:.84rem;line-height:1.45;color:var(--sk-text)}
.csb-sr{box-shadow:inset 3px 0 0 #7fb8c9}
.csb-sk{box-shadow:inset 3px 0 0 var(--sk-people)}
.csb-bm.fake .csb-sk{box-shadow:inset 3px 0 0 var(--sk-bots)}
.csb-bm.flash .csb-rec dd,.csb-bm.flash .csb-now b{animation:csbIn .45s}
@keyframes csbIn{from{opacity:0;transform:translateY(.25rem)}to{opacity:1;transform:none}}

/* 02: two acetate sheets over the same twelve requests */
.csb-sw{margin:0 0 1.4rem}
.csb-tray{position:relative;padding:1rem 1rem .8rem;border-radius:8px;background:#f4f1ea;color:#1b2733;box-shadow:0 8px 22px rgba(0,0,0,.35);overflow:hidden}
.csb-sheet{position:absolute;inset:.45rem;z-index:0;border-radius:6px;border:1px solid rgba(60,140,170,.45);background:rgba(127,184,201,.2);transition:background .5s,border-color .5s}
.csb-ohp[data-state="sk"] .csb-sheet{border-color:rgba(42,120,214,.4);background:rgba(106,165,238,.14)}
.csb-tab{position:absolute;top:-1px;right:1rem;padding:.12rem .5rem;border-radius:0 0 5px 5px;font:700 .58rem var(--sk-mono);letter-spacing:.05em;text-transform:uppercase;color:#fff;background:#3c8caa;transition:opacity .4s}
.csb-tab-sk{background:var(--sk-people);opacity:0}
.csb-ohp[data-state="sk"] .csb-tab-sr{opacity:0}.csb-ohp[data-state="sk"] .csb-tab-sk{opacity:1}
.csb-lines{position:relative;z-index:1;margin:.6rem 0 0;padding:0;list-style:none;counter-reset:ln}
.csb-lines li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.15rem .7rem;padding:.32rem .2rem .32rem 1.7rem;border-bottom:1px dashed #d6ccb9;position:relative}
.csb-lines li::before{counter-increment:ln;content:counter(ln);position:absolute;left:.15rem;font:500 .6rem var(--sk-mono);color:#8a96a3}
.csb-lines code{font:500 .7rem/1.4 var(--sk-mono);color:#33414e;overflow-wrap:anywhere;transition:opacity .4s,color .4s}
.csb-m{display:none;padding:.05rem .45rem;border-radius:4px;font:700 .64rem var(--sk-mono);white-space:nowrap}
.csb-ohp[data-state="sr"] .csb-m-sr,.csb-ohp[data-state="sk"] .csb-m-sk{display:inline-block}
.csb-ohp[data-state="sr"] [data-sr="keep"] .csb-m-sr{color:#1d5f75;border:1.5px solid #3c8caa}
.csb-ohp[data-state="sr"] [data-sr="drop"] .csb-m-sr{color:#8a96a3;border:1.5px dashed #b4bcc5}
.csb-ohp[data-state="sr"] [data-sr="drop"] code{opacity:.45;text-decoration:line-through;text-decoration-color:#b23a33;text-decoration-thickness:2px}
.csb-ohp[data-state="sk"] .csb-m-sk{color:#fff}
.csb-ohp[data-state="sk"] [data-sk="p"] .csb-m-sk{background:var(--sk-people)}
.csb-ohp[data-state="sk"] [data-sk="a"] .csb-m-sk{background:var(--sk-ai-deep)}
.csb-ohp[data-state="sk"] [data-sk="s"] .csb-m-sk{background:#13805a}
.csb-ohp[data-state="sk"] [data-sk="b"] .csb-m-sk{background:#8a5d00}
.csb-ohp[data-state="sk"] [data-fake] .csb-m-sk{background:#b23a33}
.csb-ohp[data-state="sk"] [data-fake] code{color:#b23a33}
.csb-count{margin:1rem 0 .3rem;font:600 .82rem var(--sk-mono);color:var(--sk-text-2)}
.csb-count b{font:700 1.5rem var(--sk-disp);color:#fff;margin-right:.3rem}
.csb-say{margin:0 0 .6rem;max-width:46rem;line-height:1.55;color:var(--sk-text-2)}
.csb-ohp.flash .csb-sheet{animation:csbLay .6s cubic-bezier(.3,.7,.3,1)}
.csb-ohp.flash .csb-m{animation:csbIn .45s .2s both}
@keyframes csbLay{0%{transform:translateX(-104%) rotate(-1.5deg)}100%{transform:none}}

@media (max-width:560px){.csb-stops li{font-size:.54rem}.csb-flight{margin:1rem .7rem 1.8rem}.csb-lines li{padding-left:1.5rem}}
@media (prefers-reduced-motion:reduce){.csb-bm.flash .csb-rec dd,.csb-bm.flash .csb-now b,.csb-ohp.flash .csb-sheet,.csb-ohp.flash .csb-m{animation:none}}
