.how{max-width:38rem;min-width:0}.how button,.how select,.how input,.how textarea{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:10px;min-height:44px;min-width:44px;max-width:100%;padding:.3em .6em}.how button{white-space:normal;overflow-wrap:anywhere;cursor:pointer}.how button.on{border-color:var(--tone);box-shadow:inset 0 0 0 1px var(--tone);font-weight:700}.how button.primary{background:var(--tone);border-color:var(--tone);color:#fff;font-weight:700}.how button:disabled{opacity:.5;cursor:default}.how .row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.5rem 0}.how .row>*{min-width:0;flex:1 1 6rem}.how .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.5rem 0}.how .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:.5rem 0}.how .grid2>*,.how .grid3>*{min-width:0}.how .panel{padding:.6rem;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}.how .note{font-size:.85rem;color:var(--muted);margin:.4rem 0}.how .status{min-height:3.2em;margin:.4rem 0}.how svg{display:block;width:100%;height:auto}.how .big{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}.how .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.how :focus-visible{outline:3px solid var(--tone);outline-offset:2px}@media(prefers-reduced-motion:reduce){.how *{animation:none!important;transition:none!important}}