.tokenizer-lab{border:1px solid var(--line,#e7e4ec);border-radius:16px;padding:22px;background:#fff;color:var(--ink,#212121);min-width:0}
.tokenizer-lab h3{font-size:22px;line-height:1.3;margin:7px 0 10px}.tokenizer-lab p{font-size:13px;line-height:1.65}.tokenizer-lab .tokenizer-lab-kicker{color:var(--purple,#6440bf);font-size:11px;margin:0}.tokenizer-lab-heading>p:last-child{color:var(--muted,#6b6b6b);max-width:720px}
.tokenizer-lab-examples{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 15px}.tokenizer-lab button{min-height:42px;border:1px solid var(--line,#e7e4ec);border-radius:10px;background:#fff;color:var(--ink,#212121);font:inherit;font-size:13px;padding:9px 13px;cursor:pointer}.tokenizer-lab button:hover{background:var(--lavender,#ebe6f7)}.tokenizer-lab button:focus-visible,.tokenizer-lab textarea:focus-visible,.tokenizer-lab summary:focus-visible{outline:3px solid #ad92ff;outline-offset:3px}
.tokenizer-lab-input-label{display:block;font-size:13px;font-weight:600}.tokenizer-lab textarea{display:block;box-sizing:border-box;width:100%;resize:vertical;min-height:90px;margin-top:8px;padding:12px 14px;border:1px solid #c8bfdc;border-radius:10px;background:#fff;color:#24202b;font:inherit;font-size:15px;font-weight:400;line-height:1.5}.tokenizer-lab .tokenizer-lab-hint,.tokenizer-lab .tokenizer-lab-legend{font-size:12px;color:var(--muted,#6b6b6b)}
.tokenizer-lab-stats{display:flex;gap:36px;margin:20px 0 12px}.tokenizer-lab-stats p{margin:0;display:flex;align-items:baseline;gap:8px}.tokenizer-lab-stats strong{font-size:28px;line-height:1.2;font-weight:600;color:var(--purple,#6440bf)}.tokenizer-lab-stats span{font-size:12px;color:var(--muted,#6b6b6b)}
.tokenizer-lab-pieces{display:flex;flex-wrap:wrap;gap:5px;align-items:stretch;padding:16px;background:#faf9fc;border:1px solid var(--line,#e7e4ec);border-radius:12px;min-height:70px;box-sizing:border-box}.tokenizer-piece{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 8px 5px;border:1px solid transparent;border-radius:7px;min-width:25px;max-width:100%;box-sizing:border-box;white-space:pre-wrap;overflow-wrap:anywhere;font-family:monospace;font-size:17px;line-height:1.25;color:#30243a}.tokenizer-piece small{font-family:inherit;font-size:9px;opacity:.72;line-height:1}.tokenizer-color-0{background:#eee4ff;border-color:#ddcafb}.tokenizer-color-1{background:#dff0ff;border-color:#bfddef}.tokenizer-color-2{background:#e2f2e9;border-color:#bedaca}.tokenizer-color-3{background:#fff0d9;border-color:#ecdbbf}.tokenizer-color-4{background:#fce3eb;border-color:#edc7d3}.tokenizer-byte{border-style:dashed;font-size:13px}.tokenizer-lab .tokenizer-lab-empty{margin:0;color:var(--muted,#6b6b6b);align-self:center}
.tokenizer-lab .tokenizer-lab-byte-note{font-size:12px;color:#5e516e;margin:12px 0}.tokenizer-lab-reconstruction{margin:16px 0;font-size:12px}.tokenizer-lab-reconstruction summary{cursor:pointer;color:var(--purple,#6440bf);line-height:1.6}.tokenizer-lab-reconstruction pre{white-space:pre-wrap;overflow-wrap:anywhere;max-width:100%;padding:12px;background:#f5f2f9;border-radius:8px;font-size:13px;line-height:1.5}.tokenizer-lab .tokenizer-lab-conclusion{padding-top:14px;border-top:1px solid var(--line,#e7e4ec)}.tokenizer-lab .tokenizer-lab-scope{font-size:12px;color:var(--muted,#6b6b6b)}.tokenizer-lab .tokenizer-lab-credit{font-size:11px;color:var(--muted,#6b6b6b);margin-bottom:0}.tokenizer-lab-credit a{text-decoration:underline;text-underline-offset:3px}.tokenizer-lab-error{padding:14px;background:#fff0ed;border:1px solid #eed7cf;border-radius:10px;color:#793e2e}.tokenizer-lab-loading{padding:18px;color:var(--muted,#6b6b6b)}
@media(max-width:650px){.tokenizer-lab{padding:16px}.tokenizer-lab h3{font-size:20px}.tokenizer-lab-stats{gap:22px}.tokenizer-lab-stats strong{font-size:25px}.tokenizer-lab-pieces{padding:10px}.tokenizer-piece{font-size:16px;padding:7px 6px 4px}.tokenizer-byte{font-size:12px}}

/* The token colours explain segmentation; surrounding UI stays neutral. */
.tokenizer-lab{border:0;border-radius:0;padding:0;background:transparent}
.tokenizer-lab p{font-size:14px}
.tokenizer-lab-heading>p{margin:0}
.tokenizer-lab-stats strong{color:var(--ink);font-size:24px}
.tokenizer-lab-stats span{font-size:14px}
.tokenizer-lab-pieces{padding:14px 0;background:transparent;border:0;border-radius:0;min-height:48px}
.tokenizer-piece{padding:8px;border:0}
.tokenizer-lab-reconstruction{font-size:14px}
.tokenizer-lab-reconstruction summary{color:var(--ink);min-height:32px;line-height:1.6;width:fit-content}
.tokenizer-lab-reconstruction pre{background:#f6f6f7}
.tokenizer-lab .tokenizer-lab-conclusion{font-size:14px}
@media(max-width:650px){.tokenizer-lab{padding:0}.tokenizer-lab-pieces{padding:10px 0}.tokenizer-lab-stats strong{font-size:24px}}