:root{font:16px system-ui,sans-serif;color:#202124;background:#fafafa;color-scheme:light}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 40px,440px);margin:18vh auto 40px}label{display:block;font-size:14px;margin-bottom:10px}.row{display:flex;gap:10px}input{min-width:0;width:100%;border:1px solid #d6d7da;border-radius:7px;background:white;padding:12px;font:inherit}button{flex-shrink:0;padding:12px 20px;border:1px solid #d6d7da;border-radius:7px;background:white;color:inherit;font:inherit;cursor:pointer}input:focus,button:focus-visible{outline:2px solid #72777f;outline-offset:2px}#result{margin-top:28px}canvas{display:block;max-width:100%;height:auto!important;margin:0 auto 20px}#link{font:12px ui-monospace,monospace}.actions{display:flex;justify-content:center;gap:12px;margin-top:14px}#status{text-align:center;font-size:13px;color:#686b70}#status:empty{display:none}
.token-field{position:relative;flex:1;min-width:0}#token{color:transparent;caret-color:#202124}#token::selection{color:transparent;background:#e5e7eb}#token-mask{position:absolute;left:13px;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;overflow:hidden;white-space:nowrap;font:14px ui-monospace,monospace;color:#202124}