.lnw-fig [hidden] { display:none !important }
.lnw {
  container:lnw / inline-size;
  max-inline-size:44rem;
  margin-inline:auto;
  color:#1a1a1a;
  font-size:1rem;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  min-inline-size:0;
  overflow-wrap:anywhere;
  display:grid;
  grid-template-areas:"heading" "legend" "setup" "wire" "result" "amount" "actions" "near" "readouts" "reserve" "reset" "scope";
  grid-template-columns:minmax(0,1fr);
  gap:.5rem;
}
.lnw * { box-sizing:border-box }
.lnw p { margin:0 }
.lnw .lnw-heading { grid-area:heading }
.lnw .lnw-title { font-size:1.15rem; font-weight:700 }
.lnw .lnw-intro { margin-top:.2rem; color:#555 }
.lnw .lnw-legend {
  grid-area:legend; display:flex; flex-wrap:wrap; gap:.4rem 1rem; font-size:.9rem;
  padding-bottom:.25rem;
}
.lnw .lnw-legend span { display:inline-flex; align-items:center; gap:.35rem }
.lnw .lnw-legend i { flex:none; width:.9rem; height:.9rem; border-radius:50%; display:inline-block }
.lnw .lnw-you-key { background:#f7931a; border:1px solid #a55c0e }
.lnw .lnw-partner-key { background:#1e73be; border:1px solid #165a96 }
.lnw .lnw-legend .lnw-reserve-key {
  border-radius:2px; border:1px solid #6b7078;
  background:repeating-linear-gradient(135deg,#fff 0 3px,#6b7078 3px 4px,#fff 4px 5px);
}
.lnw .lnw-setup { grid-area:setup; display:grid; grid-template-columns:minmax(0,1fr); gap:.4rem 1rem }
.lnw :is(label,.lnw-label) { display:block; font-size:.95rem; font-weight:650 }
.lnw :is(select,input,button) {
  font:inherit; color:inherit; border-radius:8px; background:#fff; margin:0; min-inline-size:44px;
}
.lnw :is(select,input) {
  width:100%; min-height:48px; font-size:max(1rem,16px);
  border:1px solid #6b7078; padding:.35rem .6rem;
}
.lnw [aria-invalid=true] { border-color:#a8261b; box-shadow:0 0 0 1px #a8261b }
.lnw :is(button,select) { cursor:pointer }
.lnw :focus-visible { outline:3px solid #8d4f0a; outline-offset:2px }
.lnw .lnw-wire { grid-area:wire; margin-top:.2rem; }
.lnw .lnw-wire-row { display:flex; justify-content:space-between; gap:.5rem; font-size:.9rem }
.lnw .lnw-wire-row > :last-child { text-align:right }
.lnw .lnw-wire svg { width:100%; height:auto; display:block }
.lnw .lnw-result, .lnw .lnw-near {
  background:#f8f9fa; border-inline-start:4px solid #c9ced6; border-radius:0 10px 10px 0;
  padding:.4rem .65rem; min-inline-size:0;
}
.lnw .lnw-result { grid-area:result }
.lnw .lnw-result[data-tone=ok] { border-color:#1e6b34 }
.lnw .lnw-result[data-tone=error] { border-color:#a8261b }
.lnw .lnw-amount { grid-area:amount }
.lnw .lnw-chips {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem;
  margin:.2rem 0 .4rem;
}
.lnw button {
  font-weight:650; min-height:46px; padding:.55rem 1.25rem; border:1px solid #a55c0e;
  background:#a55c0e; color:#fff;
}
.lnw button:hover { background:#8b4d0c }
.lnw .lnw-chips button {
  min-height:44px; padding:.5rem .25rem; white-space:nowrap;
  border:1px solid #6b7078; background:#fff; color:#1a1a1a;
}
.lnw .lnw-chips button[aria-pressed=true] {
  padding:calc(.5rem - 1px) calc(.25rem - 1px);
  border:2px solid #8d4f0a; background:#fff8f0; color:#8d4f0a; font-weight:700;
}
.lnw .lnw-error { min-height:1.5em; color:#a8261b; font-size:.9rem }
.lnw .lnw-actions { grid-area:actions; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem }
.lnw .lnw-actions button { min-height:52px; min-inline-size:0; overflow-wrap:anywhere }
.lnw .lnw-near { grid-area:near; background:#fff8f0; border-color:#8d4f0a }
.lnw .lnw-readouts { grid-area:readouts; display:grid; gap:.45rem .8rem }
.lnw .lnw-readouts > div { min-inline-size:0; padding:.5rem .7rem; border:1px solid #e6e8ec; border-radius:10px }
.lnw .lnw-reserve, .lnw .lnw-scope { color:#555; font-size:.9rem }
.lnw .lnw-reserve { grid-area:reserve }
.lnw .lnw-scope { grid-area:scope; border-top:1px solid #e6e8ec; padding-top:.5rem }
.lnw .lnw-reset {
  grid-area:reset; align-self:start; justify-self:start;
  color:#8d4f0a; background:#fff; border:2px solid #8d4f0a;
}
.lnw .lnw-reset:hover { background:#fff8f0 }
.lnw .lnw-sr {
  position:absolute; inline-size:1px; block-size:1px; clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}
.lnw.lnw-measure { display:block; position:fixed; inset:0 auto auto -10000px; visibility:hidden; pointer-events:none; }
@container lnw (min-width:20rem) {
  .lnw .lnw-chips { grid-template-columns:repeat(4,minmax(0,1fr)) }
}
@container lnw (min-width:30rem) {
  .lnw .lnw-setup, .lnw .lnw-readouts { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lnw .lnw-amount input { width:11rem }
  .lnw .lnw-actions { grid-template-columns:repeat(2,minmax(9rem,max-content)) }
  .lnw .lnw-reset { justify-self:end; align-self:center }
}
/* The reset is the last focusable control in the DOM. Align it with the action row when there is room. */
@supports selector(:has(*)) {
  .lnw-fig { container:lnw-host / inline-size }
  @container lnw-host (min-width:30rem) {
    .lnw:not(.lnw-measure) {
      grid-template-columns:minmax(0,1fr) minmax(10rem,max-content);
      grid-template-areas:"heading heading" "legend legend" "setup setup" "wire wire" "result result"
        "amount amount" "actions reset" "near near" "readouts readouts" "reserve reserve" "scope scope";
    }
  }
}
@media (prefers-reduced-motion:reduce) { .lnw * { transition:none !important } }
@media print {
  .lnw-fig .lnw { display:none !important }
  .lnw-fig .lnw-fallback { display:block !important }
}