.tokenizer{gap:var(--space-6);width:100%;max-width:var(--container-max);background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-xl);box-shadow:var(--glass-shadow);padding:var(--space-8);grid-template-columns:1fr;margin:0 auto;display:grid}@media (width>=1024px){.tokenizer{grid-template-columns:1fr 1fr;align-items:start}.tokenizer__compare-panel{grid-column:1/-1}}.tokenizer__input-panel{gap:var(--space-4);background:var(--bg-graphite);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);flex-direction:column;display:flex}.tokenizer__input-header{gap:var(--space-3);flex-direction:column;display:flex}@media (width>=640px){.tokenizer__input-header{flex-flow:wrap;justify-content:space-between;align-items:flex-start}}.tokenizer__model-select{background:var(--bg-slate);color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);min-height:24px;font-family:var(--font-sans);font-size:var(--text-sm);cursor:pointer;transition:var(--transition-colors);outline:none}.tokenizer__model-select:focus,.tokenizer__model-select:hover{border-color:var(--accent-green-300)}.tokenizer__char-limit-hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-warning)}.tokenizer__approx-note{margin:var(--space-2) 0 0;font-size:var(--text-2xs,.65rem);color:var(--text-secondary);text-align:center;letter-spacing:var(--tracking-wide)}.tokenizer__actions{align-items:center;gap:var(--space-2);z-index:5;flex-wrap:wrap;display:flex;position:relative}.tokenizer__input-mode-toggle{background:var(--bg-slate);border:1px solid var(--border-default);border-radius:var(--radius-md);display:flex;overflow:hidden}.tokenizer__input-mode-btn{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:var(--transition-colors);background:0 0;border:none}.tokenizer__input-mode-btn--active{background:var(--accent-blue-300,#5778db);color:var(--text-primary)}.tokenizer__input-mode-btn:not(.tokenizer__input-mode-btn--active):hover{color:var(--text-primary);background:var(--bg-elevated)}.tokenizer__mode-toggle{background:var(--bg-slate);border:1px solid var(--border-default);border-radius:var(--radius-md);display:flex;overflow:hidden}.tokenizer__mode-btn{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:var(--transition-colors);background:0 0;border:none}.tokenizer__mode-btn--active{background:var(--accent-green-300);color:var(--bg-void)}.tokenizer__mode-btn:not(.tokenizer__mode-btn--active):hover{color:var(--text-primary);background:var(--bg-elevated)}.tokenizer__action-btn{padding:var(--space-2) var(--space-4);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);background:var(--bg-slate);border:1px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-all)}.tokenizer__action-btn:hover:not(:disabled){border-color:var(--accent-green-300);color:var(--accent-green-300);box-shadow:var(--glow-green)}.tokenizer__action-btn--active{border-color:var(--accent-blue-300);color:var(--accent-blue-200);background:#4267d71f}.tokenizer__action-btn:disabled{opacity:.35;cursor:not-allowed}.tokenizer__hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-ghost);align-items:center;gap:var(--space-1);display:flex}kbd{padding:1px var(--space-2);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);display:inline-block}.tokenizer__textarea{background:var(--bg-slate);width:100%;min-height:250px;color:var(--text-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);resize:vertical;transition:var(--transition-colors);outline:none}.tokenizer__textarea:focus{border-color:var(--accent-green-300);box-shadow:0 0 0 3px var(--accent-glow)}.tokenizer__textarea::placeholder{color:var(--text-muted)}.tokenizer__stats{gap:var(--space-3);margin-top:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}@media (width>=640px){.tokenizer__stats{grid-template-columns:repeat(4,1fr)}}.tokenizer__stat-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-4);gap:var(--space-1);transition:var(--transition-all);flex-direction:column;display:flex}.tokenizer__stat-card:hover{border-color:var(--accent-green-300);box-shadow:var(--glow-green)}.tokenizer__stat-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.tokenizer__stat-value{font-family:var(--font-mono);font-size:var(--text-h3);font-weight:var(--weight-bold);color:var(--text-primary);transition:color var(--duration-fast) var(--ease-out)}.tokenizer__stat-unit{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}.tokenizer__output-panel{background:var(--bg-graphite);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);flex-direction:column;min-height:250px;display:flex}.tokenizer__output-header{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-4);align-items:center;gap:var(--space-3);display:flex}.tokenizer__typing-indicator{color:var(--accent-green-300);font-size:.6em;animation:.6s ease-in-out infinite typing-pulse}@keyframes typing-pulse{0%,to{opacity:.3}50%{opacity:1}}.tokenizer__output{background:var(--bg-slate);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--leading-relaxed);word-wrap:break-word;white-space:pre-wrap;flex:1;min-height:160px;position:relative;overflow-y:auto}.tokenizer__output-placeholder{color:var(--text-secondary);font-style:italic;font-family:var(--font-mono);font-size:var(--text-sm)}.token{background-color:hsla(var(--hue), 70%, 50%, .2);color:var(--text-primary);border-bottom:2px solid hsla(var(--hue), 70%, 50%, .8);cursor:pointer;user-select:none;transition:background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);border-radius:2px;margin:0 1px;padding:0 1px;display:inline-block;@media (prefers-reduced-motion:no-preference){opacity:0;animation:token-stagger-in .25s var(--ease-out) forwards}}@media (prefers-reduced-motion:no-preference){@keyframes token-stagger-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}}@media (prefers-reduced-motion:reduce){.token{opacity:1!important;animation:none!important}}.token:hover,.token:focus{background-color:hsla(var(--hue), 70%, 50%, .4);box-shadow:0 0 8px hsla(var(--hue), 70%, 50%, .35);outline:none}.token:active{background-color:hsla(var(--hue), 70%, 50%, .55);transform:scale(.95)}.tokenizer__compare-panel{background:var(--bg-graphite);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-6);@media (prefers-reduced-motion:no-preference){animation:compare-panel-in var(--duration-slow) var(--ease-out) both}}@media (prefers-reduced-motion:no-preference){@keyframes compare-panel-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}}@media (prefers-reduced-motion:reduce){.tokenizer__compare-panel{animation:none!important}}.tokenizer__compare-header{font-family:var(--font-sans);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--text-primary);margin-bottom:var(--space-5);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle)}.tokenizer__input-group{gap:var(--space-4);flex-direction:column;width:100%;display:flex}.token__tooltip{z-index:9999;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg), 0 0 16px #26cad933;padding:var(--space-3) var(--space-4);pointer-events:none;min-width:180px;font-family:var(--font-mono);font-size:var(--text-xs);-webkit-backdrop-filter:blur(var(--glass-blur));position:fixed}.token__tooltip-row{gap:var(--space-3);border-bottom:1px solid var(--border-subtle);padding:2px 0;display:flex}.token__tooltip-row:last-child{border-bottom:none}.token__tooltip-key{color:var(--text-muted);min-width:40px}.token__tooltip-val{color:var(--accent-green-300);word-break:break-all}.token__tooltip-text{color:var(--text-primary)}.token__tooltip-val--partial{color:#f6c155;cursor:help}.compare__token{cursor:pointer;user-select:none;transition:transform var(--duration-fast) var(--ease-out)}.compare__token:active{transform:scale(.95)}@media (width>=768px) and (width<=1024px){.tokenizer{grid-template-columns:1fr}.tokenizer__input-panel,.tokenizer__output-panel{width:100%}}@media (width<=767px){.tokenizer{padding:var(--space-4);gap:var(--space-4);grid-template-columns:1fr}.tokenizer__input-panel,.tokenizer__output-panel{width:100%;padding:var(--space-4)}.tokenizer__textarea{width:100%;min-height:200px}.tokenizer__stats{grid-template-columns:repeat(2,1fr)}.tokenizer__model-select{font-size:16px}}.tokenizer__model-row{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.tokenizer__roster-stamp{margin:var(--space-1) 0 0;font-family:var(--font-mono);font-size:var(--text-2xs,.65rem);color:var(--text-ghost);letter-spacing:var(--tracking-wide)}.tokenizer__reasoning-notice{margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);font-size:var(--text-xs);line-height:var(--leading-relaxed);color:#f6c155;border-radius:var(--radius-md);background:#f4af2514;border:1px solid #f4af2540}.tokenizer__accuracy-badge{align-items:center;gap:var(--space-1);font-family:var(--font-mono);font-size:var(--text-2xs,.65rem);padding:var(--space-1) var(--space-2);border-radius:var(--radius-full);cursor:help;letter-spacing:var(--tracking-wide);transition:var(--transition-colors);white-space:nowrap;display:inline-flex}.tokenizer__accuracy-badge--native{color:var(--accent-green-300);background:#26d98e1a;border:1px solid #26d98e4d}.tokenizer__accuracy-badge--verified{color:var(--accent-blue-200,#819ae4);background:#4267d71f;border:1px solid #4267d74d}.tokenizer__accuracy-badge--approx{color:#f6c155;background:#f4af251a;border:1px solid #f4af254d}.tokenizer__chat-overhead-badge{font-family:var(--font-mono);font-size:var(--text-2xs,.65rem);padding:2px var(--space-2);border-radius:var(--radius-full);cursor:help;letter-spacing:var(--tracking-wide);white-space:nowrap;align-items:center;width:fit-content;margin-top:2px;display:inline-flex}.tokenizer__chat-overhead-badge--native{color:var(--accent-green-300);background:#26d98e1a;border:1px solid #26d98e4d}.tokenizer__chat-overhead-badge--documented{color:var(--accent-blue-200,#819ae4);background:#4267d71f;border:1px solid #4267d74d}.tokenizer__chat-overhead-badge--estimated{color:#f6c155;background:#f4af251a;border:1px solid #f4af254d}.tokenizer__status-banner{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);display:flex;@media (prefers-reduced-motion:no-preference){animation:status-banner-in .3s var(--ease-out) both}}@media (prefers-reduced-motion:no-preference){@keyframes status-banner-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}}@media (prefers-reduced-motion:reduce){.tokenizer__status-banner{animation:none!important}}.tokenizer__status-banner--loading{color:var(--accent-blue-200,#819ae4);background:#4267d71a;border:1px solid #4267d740}.tokenizer__status-banner--fetching{color:#67dae4;background:#26cad91a;border:1px solid #26cad940}.tokenizer__status-banner--error{color:#f6c155;background:#f4af251a;border:1px solid #f4af254d;justify-content:space-between}.tokenizer__micro-spinner{border:2px solid;border-right-color:#0000;border-radius:50%;flex-shrink:0;width:14px;height:14px;display:inline-block}@media (prefers-reduced-motion:no-preference){.tokenizer__micro-spinner{animation:.6s linear infinite micro-spin}}@keyframes micro-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.tokenizer__micro-spinner{opacity:.5;animation:none!important}}.tokenizer__retry-btn{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:#f6c155;border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);cursor:pointer;transition:var(--transition-all);background:#f4af2526;border:1px solid #f4af2566}.tokenizer__retry-btn:hover{background:#f4af2540;border-color:#f4af2599}.tokenizer__no-breakdown{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center;flex-direction:column;min-height:120px;display:flex}.tokenizer__no-breakdown-count{font-family:var(--font-mono);font-size:var(--text-h3);color:var(--accent-green-300);align-items:baseline;gap:var(--space-2);display:flex}.tokenizer__no-breakdown-count strong{font-weight:var(--weight-bold);font-size:var(--text-h2)}.tokenizer__no-breakdown-msg{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);max-width:400px;font-style:italic;line-height:var(--leading-relaxed);margin:0}.tokenizer__error-state{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-8) var(--space-4);text-align:center;flex-direction:column;min-height:120px;display:flex}.tokenizer__error-msg{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-error)}.lab-page[data-astro-cid-ohhv4k5m]{padding-top:var(--space-32);background:var(--bg-obsidian);min-height:100vh}.lab-header[data-astro-cid-ohhv4k5m]{text-align:center;margin-bottom:var(--space-12)}.lab-header[data-astro-cid-ohhv4k5m] .container[data-astro-cid-ohhv4k5m]{max-width:var(--container-narrow);padding:0 var(--space-4);margin:0 auto}.lab-header[data-astro-cid-ohhv4k5m] h1[data-astro-cid-ohhv4k5m]{margin-bottom:var(--space-4)}.lab-content[data-astro-cid-ohhv4k5m] .container[data-astro-cid-ohhv4k5m]{max-width:var(--container-max);padding:0 var(--space-4);margin:0 auto}.back-link[data-astro-cid-ohhv4k5m]{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);transition:var(--transition-colors);margin-bottom:var(--space-2);align-items:center;min-height:24px;text-decoration:none;display:inline-flex}.back-link[data-astro-cid-ohhv4k5m]:hover{color:var(--accent-green-300)}