.regex-playground{--rg-highlight-bg: var(--color-accent-soft, #fff3a0);--rg-highlight-outline: var(--color-accent, #d4a017);--rg-link-outline: var(--color-accent, #d4a017);--rg-link-outline-width: 2px;--rg-error-color: var(--color-error, #c0392b);--rg-warning-color: var(--color-warning, #d97706);--rg-success-color: var(--color-success, #16a34a);--rg-info-color: var(--color-info, #2563eb);--rg-panel-bg: var(--color-surface, #f5f5f5);--rg-panel-border: var(--color-border, #e5e5e5);--rg-code-font: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);color-scheme:light dark;display:grid;grid-template-columns:1fr;gap:1rem;max-width:1200px;margin:0 auto;padding:1rem}.regex-playground h1{margin:0 0 .5rem;font-size:1.75rem}.regex-playground h2{font-size:1.15rem;margin:1rem 0 .5rem}.regex-playground__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media(max-width:768px){.regex-playground__row{grid-template-columns:1fr}}.regex-playground__panel{background:var(--rg-panel-bg);border:1px solid var(--rg-panel-border);border-radius:6px;padding:.75rem 1rem}.regex-playground__panel-label{display:block;font-weight:600;margin-bottom:.5rem}.regex-playground__pattern-input,.regex-playground__test-text,.regex-playground__replacement{width:100%;font-family:var(--rg-code-font);font-size:.95rem;padding:.5rem;border:1px solid var(--rg-panel-border);border-radius:4px;background:var(--color-surface, #fff);color:var(--color-text, #1a1a1a);box-sizing:border-box}.regex-playground__test-text{min-height:8rem;resize:vertical}.regex-playground__pattern-input[aria-invalid=true]{border-color:var(--rg-error-color)}.regex-playground__flag-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0}.regex-playground__flag-toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:1px solid var(--rg-panel-border);border-radius:4px;background:var(--color-surface, #fff);color:var(--color-text, #1a1a1a);cursor:pointer;font-size:.85rem;font-family:var(--rg-code-font)}.regex-playground__flag-toggle[aria-pressed=true]{background:var(--rg-highlight-bg);border-color:var(--rg-highlight-outline)}.regex-playground__mode-toggle{display:inline-flex;gap:.25rem;margin:.5rem 0}.regex-playground__mode-row{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin:.5rem 0}.regex-playground__mode-row .regex-playground__cheatsheet-hint{margin:0}.regex-playground__mode-button{padding:.4rem .8rem;border:1px solid var(--rg-panel-border);background:var(--color-surface, #fff);color:var(--color-text, #1a1a1a);border-radius:4px;cursor:pointer;font-size:.9rem}.regex-playground__mode-button[aria-pressed=true]{background:var(--rg-highlight-bg);border-color:var(--rg-highlight-outline);font-weight:600}.regex-playground__run{margin-top:.5rem;padding:.5rem 1rem;background:var(--color-accent, #d4a017);color:var(--color-surface, #fff);border:none;border-radius:4px;cursor:pointer;font-size:.9rem}.regex-playground__run:hover{filter:brightness(.95)}.regex-playground__pattern-row{position:relative;font-family:var(--rg-code-font);font-size:.95rem;padding:.5rem;border:1px solid var(--rg-panel-border);border-radius:4px;background:var(--color-surface, #fff);min-height:2.5rem;white-space:pre-wrap;word-break:break-all;margin-bottom:.5rem}.regex-playground__pattern-token{display:inline;border-radius:2px;padding:0 1px;cursor:help}.regex-playground__pattern-token[data-token-id-active=true]{outline:var(--rg-link-outline-width) solid var(--rg-link-outline);background:var(--rg-highlight-bg)}.regex-playground__results{position:relative}.regex-playground__match-count{font-size:.9rem;margin-bottom:.5rem;font-weight:500}.regex-playground__match-warning,.regex-playground__aborted-warning{font-size:.85rem;padding:.4rem .6rem;border-radius:4px;margin-bottom:.5rem}.regex-playground__match-warning{background:var(--rg-warning-color);color:var(--color-surface, #fff)}.regex-playground__aborted-warning{background:var(--rg-error-color);color:var(--color-surface, #fff)}.regex-playground__no-matches,.regex-playground__empty-hint,.regex-playground__no-suggestions{font-size:.9rem;color:var(--color-text-muted);font-style:italic;padding:.5rem 0}.regex-playground__match-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem;max-height:30rem;overflow-y:auto}.regex-playground__match-row{border:1px solid var(--rg-panel-border);border-radius:4px;padding:.5rem;background:var(--color-surface, #fff)}.regex-playground__match-row__head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;margin-bottom:.25rem}.regex-playground__match-value{font-family:var(--rg-code-font);font-weight:600;word-break:break-all}.regex-playground__match-pos{font-family:var(--rg-code-font);font-size:.8rem;color:var(--color-text-muted)}.regex-playground__capture-group{font-family:var(--rg-code-font);font-size:.85rem;padding:.2rem .5rem;margin:.15rem 0;background:var(--color-background, #eaeaea);border-radius:3px;display:flex;justify-content:space-between;gap:.5rem}.regex-playground__capture-group[data-token-id-active=true],.regex-playground__highlight-span[data-token-id-active=true]{outline:var(--rg-link-outline-width) solid var(--rg-link-outline);background:var(--rg-highlight-bg)}.regex-playground__explanation-list,.regex-playground__suggestion-list,.regex-playground__examples-list,.regex-playground__cheatsheet-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.25rem}.regex-playground__explanation-list{max-height:30rem;overflow-y:auto;scroll-behavior:smooth}.regex-playground__explanation-row{padding:.3rem .5rem;border-radius:3px;display:flex;gap:.5rem;font-size:.9rem}.regex-playground__explanation-row[data-token-id-active=true]{background:var(--rg-highlight-bg);outline:var(--rg-link-outline-width) solid var(--rg-link-outline)}.regex-playground__explanation-row__token{font-family:var(--rg-code-font);font-weight:600;min-width:4rem;color:var(--color-accent, #d4a017)}.regex-playground__explanation-row__desc{flex:1}.regex-playground__suggestion{padding:.5rem;border-left:4px solid var(--color-border, #999);border-radius:3px;background:var(--color-surface, #fff);font-size:.9rem;display:flex;flex-direction:column;gap:.25rem}.regex-playground__suggestion--error{border-left-color:var(--rg-error-color)}.regex-playground__suggestion--warning{border-left-color:var(--rg-warning-color)}.regex-playground__suggestion--info{border-left-color:var(--rg-info-color)}.regex-playground__suggestion__apply{align-self:flex-start;padding:.2rem .5rem;background:var(--color-accent, #d4a017);color:var(--color-surface, #fff);border:none;border-radius:3px;cursor:pointer;font-size:.85rem}.regex-playground__example-item,.regex-playground__cheatsheet-entry{padding:.4rem .6rem;border:1px solid var(--rg-panel-border);border-radius:4px;background:var(--color-surface, #fff);color:var(--color-text);cursor:pointer;text-align:left;font-size:.9rem;display:flex;gap:.5rem;align-items:baseline}.regex-playground__example-item:hover,.regex-playground__cheatsheet-entry:hover{background:var(--rg-highlight-bg)}.regex-playground__example-item__cat,.regex-playground__cheatsheet-family{font-size:.75rem;color:var(--color-text-muted);font-family:var(--rg-code-font)}.regex-playground__copy{padding:.2rem .5rem;background:var(--color-background, #eaeaea);border:1px solid var(--rg-panel-border);border-radius:3px;cursor:pointer;font-size:.8rem;font-family:inherit}.regex-playground__copy--copied{background:var(--rg-success-color);color:var(--color-surface, #fff)}.regex-playground__pattern-error{font-size:.85rem;color:var(--rg-error-color);font-family:var(--rg-code-font);padding:.4rem .6rem;background:var(--color-background, #eaeaea);border-radius:3px;margin-top:.4rem}.regex-playground__replacement-preview{font-family:var(--rg-code-font);font-size:.9rem;padding:.5rem;background:var(--color-surface, #fff);border:1px solid var(--rg-panel-border);border-radius:4px;white-space:pre-wrap;word-break:break-all;min-height:2rem}.regex-playground__cheatsheet-toggle{background:none;border:1px solid var(--rg-panel-border);color:var(--color-text);padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.9rem;margin:.5rem 0}.regex-playground__cheatsheet-hint{display:inline-block;margin:.25rem 0 .5rem;padding:.25rem .5rem;background:none;border:none;color:var(--color-text-muted);font-size:.8rem;font-style:italic;text-align:left;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}.regex-playground__cheatsheet-hint:hover{color:var(--color-text);text-decoration:underline solid}.regex-playground__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[data-theme=dark] .regex-playground{--rg-highlight-bg: rgba(212, 160, 23, .28);--rg-highlight-outline: #d4a017;--rg-link-outline: #e5b94a;--rg-panel-bg: var(--color-surface, #1e1e1e)}