:root{--border:#ced4da;--blue:#228be6;--blue-dark:#1c7ed6;--fg:#212529;--bg:#fff;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}.app{flex-direction:column;gap:1rem;max-width:62rem;height:100%;margin:0 auto;padding:1rem;display:flex}.row{align-items:center;gap:.75rem;display:flex}.row-wrap{flex-wrap:wrap;justify-content:space-between}.token{min-width:0;font:inherit;border:1px solid var(--border);border-radius:.25rem;flex:1;padding:.5rem .75rem}.content{resize:none;border:1px solid var(--border);border-radius:.25rem;flex:1;padding:.75rem;font-family:monospace}.token:focus,.content:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:#0000}.token:invalid{border-color:#fa5252}.btn{font:inherit;white-space:nowrap;color:var(--blue);border:1px solid var(--blue);cursor:pointer;background:0 0;border-radius:.25rem;padding:.5rem 1rem}.btn:hover{background:#228be614}.btn-filled{color:#fff;background:var(--blue)}.btn-filled:hover{background:var(--blue-dark)}.segmented{background:#f1f3f5;border-radius:.25rem;gap:.25rem;padding:.25rem;display:inline-flex}.segment{font:inherit;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:.2rem;padding:.375rem .75rem}.segment-active{background:var(--bg);box-shadow:0 1px 3px #0000001a}