*,*:before,*:after{box-sizing:border-box}html{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f1117;--color-surface: #1a1d27;--color-surface-2: #242736;--color-border: #2e3347;--color-text: #e2e8f0;--color-text-muted: #8892a4;--color-accent: #4f9cf9;--color-accent-glow: rgba(79, 156, 249, .18);--color-token: #3b82f6;--color-token-bg: rgba(59, 130, 246, .15);--color-token-hover: rgba(59, 130, 246, .35);--color-token-border: rgba(59, 130, 246, .4);--color-success: #34d399;--color-error: #f87171;--color-warning: #fbbf24;--radius: 10px;--font-mono: "Fira Code", "Cascadia Code", "JetBrains Mono", Consolas, monospace;--font-ui: "Inter", system-ui, sans-serif}html,body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-ui);font-size:16px;line-height:1.6;min-height:100vh}.app{max-width:860px;margin:0 auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1.75rem}.app-header{border-bottom:1px solid var(--color-border);padding-bottom:1.25rem}.app-header h1{font-size:1.75rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em}.subtitle{margin-top:.4rem;color:var(--color-text-muted);font-size:.95rem}.token-demo{background:var(--color-token-bg);color:var(--color-accent);border:1px solid var(--color-token-border);border-radius:4px;padding:0 4px;font-size:.9em;cursor:default}.settings-bar{display:flex;flex-wrap:wrap;gap:1.5rem;padding:1.25rem 1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.setting{display:flex;flex-direction:column;gap:.35rem}.setting label{font-size:.8rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.setting label strong{color:var(--color-text);font-variant-numeric:tabular-nums}.setting-hint{color:var(--color-warning);font-size:.75rem;font-style:italic;margin-left:4px}.setting--select select{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border);border-radius:6px;padding:.4rem .7rem;font-size:.9rem;cursor:pointer;outline:none}.setting--select select:focus{border-color:var(--color-accent)}.setting--range{min-width:200px;flex:1}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:var(--color-surface-2);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}.range-labels{display:flex;justify-content:space-between;font-size:.72rem;color:var(--color-text-muted);margin-top:2px}.editor-container{display:flex;flex-direction:column;gap:.75rem}.editor{min-height:220px;padding:1.25rem 1.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);font-family:var(--font-mono);font-size:1.05rem;line-height:1.85;color:var(--color-text);outline:none;white-space:pre-wrap;word-break:break-word;cursor:text;transition:border-color .2s}.editor:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow)}.editor.editor--loading{opacity:.7;pointer-events:none}.editor:empty:before{content:attr(data-placeholder);color:var(--color-text-muted);pointer-events:none}.c-token{background:var(--color-token-bg);color:var(--color-accent);border-bottom:2px solid var(--color-token-border);border-radius:3px;padding:0 1px;cursor:help;transition:background .15s,border-color .15s;-webkit-user-select:none;user-select:none}.c-token:hover,.c-token--hovered{background:#ef444440;border-bottom-color:#ef4444;color:#fca5a5}.status-bar{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:6px;font-size:.875rem}.status-bar--loading{background:#4f9cf91a;color:var(--color-accent);border:1px solid rgba(79,156,249,.25)}.status-bar--error{background:#f871711a;color:var(--color-error);border:1px solid rgba(248,113,113,.25)}.status-bar--info{background:#34d39914;color:var(--color-success);border:1px solid rgba(52,211,153,.2);font-size:.8rem}.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(79,156,249,.3);border-top-color:var(--color-accent);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.tooltip{position:fixed;z-index:9999;min-width:280px;max-width:360px;background:#1e2235;border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:0 12px 40px #00000080,0 0 0 1px #4f9cf926;overflow:hidden;font-family:var(--font-ui);font-size:.85rem;-webkit-user-select:none;user-select:none}.tooltip-header{padding:.6rem .9rem .4rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.tooltip-hint{font-weight:400;font-style:italic;text-transform:none;letter-spacing:0;color:var(--color-warning);font-size:.7rem}.tooltip-rows{padding:.5rem 0}.tooltip-row{display:grid;grid-template-columns:130px 1fr 52px;align-items:center;gap:.5rem;padding:.3rem .9rem;cursor:pointer;transition:background .1s}.tooltip-row:not(.tooltip-row--selected):hover{background:#ffffff0f}.tooltip-row--selected{background:#ef4444}.tooltip-row--selected .tooltip-token{color:#fff}.tooltip-token{font-family:var(--font-mono);font-size:.8rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tooltip-bar-track{height:8px;background:var(--color-surface-2);border-radius:4px;overflow:hidden}.tooltip-bar-fill{height:100%;background:var(--color-token);border-radius:4px;transition:width .3s ease}.tooltip-row--selected .tooltip-bar-fill{background:#ffffffb3}.tooltip-prob{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--color-text-muted);text-align:right}.tooltip-row--selected .tooltip-prob{color:#fff;font-weight:600}.tooltip-footer{padding:.5rem .9rem .65rem;border-top:1px solid var(--color-border);font-size:.75rem;color:var(--color-text-muted)}.tooltip-footer code{font-family:var(--font-mono);color:#fca5a5;background:#ef444426;padding:1px 4px;border-radius:3px}.app-footer{padding-top:1rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.85rem}.app-footer strong{color:var(--color-text)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}