.regex-top-grid{align-items:start}.regex-flags-help{margin:0;line-height:1.35}.regex-pattern-row .copy-icon-btn{top:34px}.regex-code-export{margin-top:16px;padding:14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));background:color-mix(in srgb,var(--card) 92%,var(--accent) 4%)}.regex-code-export-title{margin:0 0 8px;font-size:16px;font-weight:600}.regex-code-export-hint{margin:0 0 12px;line-height:1.45}.regex-code-export .row{margin-top:0}.regex-code-export .row+.row{margin-top:10px}.regex-code-snippet-row .copy-icon-btn{top:34px}.regex-tutorial{margin-top:18px;background:color-mix(in srgb,var(--card) 88%,var(--accent) 4%);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--border))}.regex-tutorial-title{margin:0 0 10px;font-size:1.35rem}.regex-tutorial-lead{margin:0 0 16px;line-height:1.55}.regex-tutorial .muted{color:var(--muted)}.regex-tutorial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:20px}.regex-card{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--card);box-shadow:0 1px 0 color-mix(in srgb,var(--text) 5%,transparent)}.regex-card-title{margin:0 0 10px;font-size:15px;color:var(--text)}.regex-card-list{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;line-height:1.45;color:var(--muted)}.regex-card-list li{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline}.regex-card-list li>.rx-chip{flex:0 0 auto}.regex-card-list code{font-size:12px}.rx-chip{display:inline-block;padding:2px 6px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid #fff0}.rx-anchor{color:#6d28d9;background:color-mix(in srgb,#7c3aed 18%,transparent);border-color:color-mix(in srgb,#7c3aed 35%,var(--border))}.rx-class{color:#0f766e;background:color-mix(in srgb,#14b8a6 18%,transparent);border-color:color-mix(in srgb,#14b8a6 35%,var(--border))}.rx-meta{color:#b45309;background:color-mix(in srgb,#f59e0b 22%,transparent);border-color:color-mix(in srgb,#f59e0b 38%,var(--border))}.rx-escape{color:#be185d;background:color-mix(in srgb,#ec4899 18%,transparent);border-color:color-mix(in srgb,#ec4899 32%,var(--border))}.rx-quant{color:#1d4ed8;background:color-mix(in srgb,#3b82f6 18%,transparent);border-color:color-mix(in srgb,#3b82f6 32%,var(--border))}.rx-group{color:#047857;background:color-mix(in srgb,#10b981 16%,transparent);border-color:color-mix(in srgb,#10b981 30%,var(--border))}:root[data-theme="dark"] .rx-anchor{color:#c4b5fd}:root[data-theme="dark"] .rx-class{color:#5eead4}:root[data-theme="dark"] .rx-meta{color:#fcd34d}:root[data-theme="dark"] .rx-escape{color:#f9a8d4}:root[data-theme="dark"] .rx-quant{color:#93c5fd}:root[data-theme="dark"] .rx-group{color:#6ee7b7}.regex-walkthrough{border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--border));border-radius:14px;padding:16px;background:color-mix(in srgb,var(--card) 92%,transparent)}.regex-walkthrough-heading{margin:0 0 8px;font-size:16px}.regex-walkthrough-note{margin:0 0 12px;font-size:13px;line-height:1.5}.rx-sample-wrap{overflow-x:auto;margin-bottom:14px}.rx-sample{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--text) 6%,transparent);border:1px solid var(--border);line-height:1.6}.rx-token{padding:3px 5px;border-radius:6px;font-weight:600;border:1px solid #fff0}.rx-t-anchor{color:#6d28d9;background:color-mix(in srgb,#7c3aed 22%,transparent);border-color:color-mix(in srgb,#7c3aed 40%,var(--border))}.rx-t-class{color:#0f766e;background:color-mix(in srgb,#14b8a6 22%,transparent);border-color:color-mix(in srgb,#14b8a6 40%,var(--border))}.rx-t-lit{color:#b45309;background:color-mix(in srgb,#f59e0b 22%,transparent);border-color:color-mix(in srgb,#f59e0b 38%,var(--border))}.rx-t-esc{color:#be185d;background:color-mix(in srgb,#ec4899 20%,transparent);border-color:color-mix(in srgb,#ec4899 35%,var(--border))}.rx-legend{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}.rx-legend li{display:flex;align-items:center;gap:10px}.rx-legend-swatch{width:18px;height:18px;border-radius:5px;flex-shrink:0;border:1px solid var(--border)}.regex-flags-reminder{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;line-height:1.5}.regex-flags-reminder ul{margin:8px 0 0;padding-left:18px}.regex-flags-reminder p{margin:0}