*,*:before,*:after{box-sizing:border-box}html{text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentcolor}img,picture{max-width:100%;display:block}input,button,textarea,select{font-family:inherit;font-size:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}:root{--bg-color: #081415;--fg-color: #bbe8d5;--accent-bg-color: #063a35;--accent-fg-color: #b0fff0;--accent-color: #08f7ca;--aside-bg-color: #112c2f;--sans-serif: ui-rounded, "Hiragino Maru Gothic ProN", quicksand, comfortaa, manjari, "Arial Rounded MT", "Arial Rounded MT Bold", calibri, source-sans-pro, sans-serif;--monospace: ui-monospace, "Cascadia Code", "Source Code Pro", menlo, consolas, "DejaVu Sans Mono", monospace}html,body{font-family:var(--sans-serif);font-display:optional}@supports (font-variation-settings: normal){html,body{font-family:"Inter var","Inter Variable",var(--sans-serif)}}body{background-color:var(--bg-color);color:var(--fg-color);font-size:1.2rem}p{margin:1em 0 2em}h1{font-weight:900;text-transform:lowercase;font-style:italic}a{color:var(--accent-fg-color);transition:all ease-in-out 96ms}a:hover,a:focus{color:var(--bg-color);background-color:var(--accent-fg-color)}button{border-radius:.2em;background-color:var(--accent-bg-color);color:var(--accent-color);padding:.5em .75em;border:none;cursor:pointer}button:hover,button:focus{background-color:gray}textarea{width:100%;padding:.7em;font-size:1em;font-family:var(--monospace);background-color:transparent;border:.15em solid gray;border-radius:.2em;color:var(--fg-color)}textarea:focus{box-shadow:0 0 .2em #000;outline:.1em solid var(--accent-color);outline-offset:.2em}table{background-color:var(--accent-bg-color)}th,td{background-color:var(--bg-color);padding:.5em}td ul{margin:0}.container{margin-right:auto;margin-left:auto;max-width:100%}body>article{margin-top:40vh;margin-right:auto;margin-left:auto;max-width:100%}@media (width >= 36rem){.container{max-width:31.875rem;padding-right:0;padding-left:0}}@media (width >= 48rem){.container{max-width:43.75rem}}@media (width >= 64rem){.container{max-width:60rem}}@media (width >= 80rem){.container{max-width:75rem}body>article{max-width:75rem}}@media (width >= 96rem){.container{max-width:90rem}body>article{max-width:90rem}}.metadata{display:grid;grid-auto-flow:column;gap:1em;justify-content:left;margin:1em 0}.metadata>*{background-color:var(--aside-bg-color);color:var(--accent-fg-color);width:8em;padding:1em;border-radius:.2em}#models{display:grid;gap:1em;grid-template-columns:repeat(auto-fit,minmax(4em,1fr));margin:.5em 0}#models button.selected{background-color:var(--accent-color);color:var(--accent-bg-color);animation:glow-up 1s ease-out}.number{display:grid;justify-content:center;text-align:center;font-size:.9em}.number span{font-size:2em}.controls{display:flex;gap:1em;margin:.5em 0}.input-ids-list{font-family:var(--monospace)}.tokens-list{list-style:none;padding:0;margin:0;font-size:1.5em}#results{display:grid;gap:6em;margin-bottom:6em}.tokenizer-model:before{content:"tokenizer: "}.token-0{background-color:#cf01fe66}.token-1{background-color:#01e4b766}.token-2{background-color:#fee63466}.token-3{background-color:#fe1b1b66}.end-of-word{display:none;opacity:.2;font-family:var(--monospace)}.token{color:#81ffb8;white-space:pre;display:inline-block}.token>span{color:#fff}@keyframes glow-up{0%{box-shadow:0 0 0 transparent}20%{box-shadow:0 0 2em var(--accent-fg-color)}to{box-shadow:0 0 0 transparent}}
