*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0f1117;color:#e2e8f0;min-height:100vh}code,pre,.mono{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.section{border:1px solid #2d3148;border-radius:8px;padding:.875rem 1rem;opacity:.55;transition:opacity .15s,border-color .15s}.section--active{opacity:1;border-color:#4f6ef7}.section-header{display:flex;align-items:center;gap:.625rem;cursor:pointer;font-weight:600;font-size:.875rem;color:#cbd5e1;-webkit-user-select:none;user-select:none}.section-header input[type=checkbox]{width:1rem;height:1rem;accent-color:#4f6ef7;cursor:pointer}.section-body{margin-top:.875rem;display:flex;flex-direction:column;gap:.5rem}.field-label{font-size:.72rem;color:#64748b;display:block;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em}.field-hint{font-size:.72rem;color:#475569;margin-top:.15rem}select,input[type=text],input[type=number]{width:100%;background:#0f1117;border:1px solid #2d3148;border-radius:6px;color:#e2e8f0;padding:.4rem .6rem;font-size:.875rem;outline:none;transition:border-color .15s}select:focus,input[type=text]:focus,input[type=number]:focus{border-color:#4f6ef7}select option{background:#1e2130}.row{display:flex;gap:.5rem}.row>*{flex:1}.pattern-chip{display:inline-block;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;color:#a5f3fc;background:#0c1e2e;border:1px solid #164e63;border-radius:4px;padding:.25rem .6rem;margin-top:.15rem}.pattern-chip-hint{font-size:.72rem;color:#475569;margin-top:.15rem}.preview{display:flex;flex-direction:column;gap:.625rem}.preview-box{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:#0f1117;border:1px solid #4f6ef7;border-radius:8px;padding:.75rem 1rem;min-height:3rem}.preview-box--empty{border-color:#2d3148}.preview-regex{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:1rem;color:#a5f3fc;word-break:break-all;flex:1}.preview-box--empty .preview-regex{color:#334155;font-size:.875rem}.copy-btn{flex-shrink:0;background:#1e2130;border:1px solid #2d3148;border-radius:6px;color:#94a3b8;font-size:.8rem;padding:.3rem .75rem;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.copy-btn:hover{background:#2d3148;color:#e2e8f0}.copy-btn--done{border-color:#22c55e;color:#22c55e}.breakdown{display:flex;flex-direction:column;gap:.75rem;padding-top:.25rem;border-top:1px solid #2d3148}.breakdown-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#475569}.breakdown-tokens{display:flex;flex-wrap:wrap;gap:.375rem}.token{display:inline-flex;align-items:center;border-radius:5px;padding:.2rem .5rem;font-size:.9rem;border:1px solid transparent}.token code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.token--start{background:#1a2744;border-color:#3b5bdb;color:#91a7ff}.token--contains{background:#1a2e1a;border-color:#2f9e44;color:#8ce99a}.token--end{background:#2d1b1b;border-color:#c92a2a;color:#ffa8a8}.token--capture{background:#2b1f3b;border-color:#862e9c;color:#e599f7}.breakdown-list{display:flex;flex-direction:column;gap:.625rem;padding-left:0;list-style:none}.breakdown-item{display:flex;flex-direction:column;gap:.2rem}.breakdown-item-header{display:flex;align-items:center;gap:.5rem}.breakdown-frag{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.8rem;padding:.15rem .4rem;border-radius:4px;border:1px solid transparent}.breakdown-frag.token--start{background:#1a2744;border-color:#3b5bdb;color:#91a7ff}.breakdown-frag.token--contains{background:#1a2e1a;border-color:#2f9e44;color:#8ce99a}.breakdown-frag.token--end{background:#2d1b1b;border-color:#c92a2a;color:#ffa8a8}.breakdown-frag.token--capture{background:#2b1f3b;border-color:#862e9c;color:#e599f7}.breakdown-label{font-size:.8rem;font-weight:600;color:#94a3b8}.breakdown-desc{font-size:.8rem;color:#64748b;line-height:1.5;padding-left:0}.test-panel{display:flex;flex-direction:column;gap:.625rem}.test-panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.mode-tabs{display:flex;gap:.25rem}.mode-tab{background:transparent;border:1px solid #2d3148;border-radius:6px;color:#475569;cursor:pointer;font-size:.75rem;font-weight:600;padding:.25rem .6rem;transition:background .12s,color .12s,border-color .12s}.mode-tab:hover{background:#252840;color:#94a3b8}.mode-tab--active{background:#1e2d5a;border-color:#4f6ef7;color:#a5b4fc}.test-input{width:100%;resize:vertical;background:#0f1117;border:1px solid #2d3148;border-radius:8px;color:#e2e8f0;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;line-height:1.6;padding:.625rem .75rem;outline:none;transition:border-color .15s}.test-input:focus{border-color:#4f6ef7}.replace-controls{display:flex;flex-direction:column;gap:.25rem}.op-label{font-size:.72rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em}.test-replacement{width:100%;background:#0f1117;border:1px solid #2d3148;border-radius:6px;color:#e2e8f0;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;padding:.4rem .6rem;outline:none;transition:border-color .15s}.test-replacement:focus{border-color:#4f6ef7}.op-hint{font-size:.7rem;color:#334155;line-height:1.6}.op-hint code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.7rem;color:#64748b;background:#0f1117;border:1px solid #2d3148;border-radius:3px;padding:0 .3rem}.test-results{display:flex;flex-direction:column;gap:.5rem}.test-meta{display:flex;align-items:center;gap:.5rem}.test-count{font-size:.78rem;font-weight:600;color:#22c55e;background:#14291f;border:1px solid #166534;border-radius:999px;padding:.15rem .6rem}.test-count--zero{color:#475569;background:transparent;border-color:#2d3148}.test-error{font-size:.78rem;color:#f87171}.test-hint{font-size:.8rem;color:#334155}.test-highlighted{background:#0f1117;border:1px solid #2d3148;border-radius:8px;padding:.625rem .75rem;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;line-height:1.6;color:#94a3b8;white-space:pre-wrap;word-break:break-all}.test-mark{background:#854d0e;color:#fef08a;border-radius:2px;padding:0 1px}.extract-list{display:flex;flex-direction:column;gap:.375rem}.extract-item{background:#0f1117;border:1px solid #2d3148;border-radius:8px;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.375rem}.extract-item-header{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}.extract-num{font-size:.7rem;font-weight:700;color:#475569;min-width:1.8rem}.extract-full{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.85rem;color:#fef08a;background:#2a1f00;border:1px solid #78350f;border-radius:4px;padding:.05rem .4rem;word-break:break-all}.extract-pos{font-size:.7rem;color:#334155;margin-left:auto}.extract-groups{display:flex;flex-wrap:wrap;gap:.375rem;padding-left:2.3rem}.extract-group{display:flex;align-items:center;gap:.3rem}.extract-group-label{font-size:.68rem;color:#64748b;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace}.extract-group-value{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.78rem;color:#a5f3fc;background:#0c1e2e;border:1px solid #164e63;border-radius:4px;padding:.05rem .35rem}.replace-panels{display:flex;flex-direction:column;gap:.375rem}.replace-panel{display:flex;flex-direction:column;gap:.2rem}.replace-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#475569}.replace-label--after{color:#22c55e}.replace-text{margin:0;background:#0f1117;border:1px solid #2d3148;border-radius:8px;padding:.625rem .75rem;font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;line-height:1.6;color:#94a3b8;white-space:pre-wrap;word-break:break-all}.split-list{display:flex;flex-direction:column;gap:.25rem}.split-item{display:flex;align-items:baseline;gap:.625rem;background:#0f1117;border:1px solid #2d3148;border-radius:6px;padding:.375rem .625rem}.split-num{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.7rem;color:#334155;min-width:1.8rem;flex-shrink:0}.split-value{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.85rem;color:#cbd5e1;word-break:break-all}.ref-panel{border:1px solid #2d3148;border-radius:12px;overflow:hidden}.ref-panel-toggle{width:100%;background:#1e2130;border:none;cursor:pointer;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;transition:background .15s}.ref-panel-toggle:hover{background:#252840}.ref-panel-toggle-label{font-size:.9rem;font-weight:700;color:#cbd5e1}.ref-panel-toggle-hint{font-size:.75rem;color:#475569;text-align:right}.ref-panel-body{border-top:1px solid #2d3148;display:flex;flex-direction:column}.ref-section{border-bottom:1px solid #2d3148}.ref-section:last-child{border-bottom:none}.ref-section-toggle{width:100%;background:transparent;border:none;cursor:pointer;padding:.875rem 1.5rem;display:flex;align-items:center;justify-content:space-between;text-align:left;color:#94a3b8;font-size:.875rem;font-weight:600;transition:background .15s,color .15s}.ref-section-toggle:hover{background:#1a1e2e;color:#cbd5e1}.ref-section--open .ref-section-toggle{color:#e2e8f0;background:#1a1e2e}.ref-section-chevron{font-size:.65rem;color:#475569}.ref-section-body{padding:0 1.5rem 1.25rem;background:#1a1e2e;display:flex;flex-direction:column;gap:1rem}.ref-intro{font-size:.825rem;color:#64748b;line-height:1.6;border-left:2px solid #2d3148;padding-left:.75rem}.ref-items{display:flex;flex-direction:column;gap:1rem}.ref-item{background:#0f1117;border:1px solid #2d3148;border-radius:8px;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.4rem}.ref-item-header{display:flex;align-items:baseline;gap:.625rem;flex-wrap:wrap}.ref-pattern{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.875rem;color:#a5f3fc;background:#0c1e2e;border:1px solid #164e63;border-radius:4px;padding:.1rem .45rem;white-space:nowrap}.ref-name{font-size:.825rem;font-weight:600;color:#cbd5e1}.ref-desc{font-size:.8rem;color:#64748b;line-height:1.6}.ref-examples{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.25rem;padding-top:.5rem;border-top:1px solid #1e2130}.ref-example-group{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:180px}.ref-example-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.match-label{color:#22c55e}.nomatch-label{color:#ef4444}.ref-example-group ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem}.ref-example-group li{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:.75rem;color:#475569;line-height:1.4}.app{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.app-header{margin-bottom:2rem}.app-header h1{font-size:1.75rem;font-weight:700;color:#f1f5f9}.app-header p{color:#64748b;margin-top:.25rem;font-size:.9rem}.app-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.panel{background:#1e2130;border:1px solid #2d3148;border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}.panel-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#475569;margin-bottom:-.25rem}.reference-wrapper{margin-top:1.5rem}@media (max-width: 768px){.app-layout{grid-template-columns:1fr}}