.yb-matcher-section{padding:2.4rem 0 4rem}
.yb-h{font-size:3rem;margin:0 0 .6rem;text-wrap:balance}
.yb-lede{max-width:62ch;opacity:.75;margin:0 0 2.4rem}
.yb-grid{display:grid;grid-template-columns:minmax(0,44rem) minmax(0,1fr);gap:2.4rem;align-items:start}
@media (max-width:989px){.yb-grid{grid-template-columns:1fr}}
.yb-col{display:flex;flex-direction:column;gap:1.8rem}
.yb-panel{border:1px solid rgba(var(--color-foreground),.12);border-radius:1rem;padding:2rem;
  background:rgb(var(--color-background))}
.yb-h3{font-size:1.9rem;margin:0 0 .3rem}
.yb-sub{font-size:1.35rem;opacity:.65;margin:0 0 1.4rem}
.yb-wheelWrap{position:relative;width:100%;aspect-ratio:1;max-width:34rem;margin:0 auto;touch-action:none}
.yb-wheel{width:100%;height:100%;display:block;border-radius:50%;cursor:crosshair;box-shadow:0 .2rem 1rem rgba(0,0,0,.1)}
.yb-dot{position:absolute;width:1.8rem;height:1.8rem;border-radius:50%;border:.2rem solid #fff;
  box-shadow:0 0 0 .15rem rgba(0,0,0,.5);transform:translate(-50%,-50%);pointer-events:none;left:50%;top:50%}
.yb-ramp{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid rgb(var(--color-foreground));
  border-radius:.4rem;overflow:hidden}
.yb-ramp button{appearance:none;border:0;border-right:1px solid rgb(var(--color-foreground));
  height:9.6rem;padding:0;cursor:pointer;position:relative;display:block}
.yb-ramp button:last-child{border-right:0}
.yb-ramp button[aria-pressed="true"]::after{content:"";position:absolute;inset:.6rem;
  border:.2rem solid rgba(255,255,255,.95);border-radius:.3rem;box-shadow:0 0 0 .15rem rgba(0,0,0,.45)}
.yb-rampScale{display:grid;grid-template-columns:repeat(5,1fr);margin-top:.7rem}
.yb-rampScale span{font-size:1.1rem;opacity:.6;text-align:center;font-variant-numeric:tabular-nums}
.yb-rampEnds{display:flex;justify-content:space-between;margin-top:.5rem}
.yb-rampEnds span{font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.yb-controls{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-end;margin-top:1.6rem}
.yb-field{display:flex;flex-direction:column;gap:.5rem}
.yb-field label{font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.yb-hexIn{font-size:1.5rem;padding:.9rem 1.1rem;width:13rem;border-radius:.7rem;
  border:1px solid rgba(var(--color-foreground),.2);background:transparent;color:rgb(var(--color-foreground))}
.yb-pick{width:4.6rem;height:3.9rem;padding:.2rem;border-radius:.7rem;cursor:pointer;
  border:1px solid rgba(var(--color-foreground),.2);background:transparent}
.yb-batch{font-size:1.4rem;padding:.9rem 1rem;border-radius:.7rem;
  border:1px solid rgba(var(--color-foreground),.2);background:transparent;color:rgb(var(--color-foreground))}
.yb-target{display:flex;align-items:center;gap:1.4rem;margin-bottom:1.6rem}
.yb-chip{width:6rem;height:6rem;border-radius:.8rem;border:1px solid rgba(var(--color-foreground),.2);flex:none}
.yb-hexOut{font-size:1.9rem}
.yb-matches{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:1rem}
.yb-m{display:flex;align-items:center;gap:.9rem;padding:.8rem;border-radius:.8rem;text-decoration:none;
  color:inherit;border:1px solid rgba(var(--color-foreground),.12)}
.yb-m:hover{border-color:rgba(var(--color-foreground),.3)}
.yb-sw{width:2.6rem;height:2.6rem;border-radius:.5rem;border:1px solid rgba(0,0,0,.14);flex:none;display:inline-block}
.yb-m b{font-size:1.35rem;display:block;line-height:1.25}
.yb-m em{font-size:1.05rem;opacity:.6;font-style:normal}
.yb-table{width:100%;border-collapse:collapse;font-size:1.45rem}
.yb-table th{text-align:left;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6;
  font-weight:400;padding:0 0 .8rem;border-bottom:1px solid rgba(var(--color-foreground),.12)}
.yb-table td{padding:1rem 0;border-bottom:1px solid rgba(var(--color-foreground),.12);vertical-align:middle}
.yb-num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.yb-mut{opacity:.6}
.yb-cellname{display:flex;align-items:center;gap:.9rem}
.yb-result{display:flex;align-items:center;gap:1.4rem;padding:1.2rem;border-radius:.8rem;margin-bottom:1.6rem;
  border:1px solid rgba(var(--color-foreground),.12)}
.yb-pair{display:flex;border-radius:.6rem;overflow:hidden;flex:none;border:1px solid rgba(var(--color-foreground),.2)}
.yb-pair div{width:4.4rem;height:4.4rem}
.yb-verdict{font-size:1.35rem;opacity:.75}
.yb-verdict b{opacity:1}
.yb-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.yb-note{font-size:1.3rem;opacity:.65;margin-top:1.4rem;padding-top:1.4rem;
  border-top:1px solid rgba(var(--color-foreground),.12)}
.yb-matcher-section :focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}
@media (prefers-reduced-motion:reduce){.yb-matcher-section *{transition:none!important}}