:root{--yellow:#ffbe0b;--blue:#3a86ff;--pink:#ff006e;--orange:#d97706;--edge-color:#64748b;--entry-color:#0f172a;--edge-label-color:#334155;--edge-active-label-color:var(--orange);--muted-opacity:.22;--matrix-blacked-bg:#08080891}:root.dark{--edge-color:#c0c4ca;--edge-label-color:#d0daf3;--matrix-blacked-bg:#6e6e6e7d}.collapsible-panel{background:linear-gradient(hsl(var(--background)), hsl(var(--background))) padding-box, linear-gradient(90deg, var(--blue), var(--yellow), var(--orange)) border-box;border:2px solid #0000;border-radius:1rem;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;overflow:hidden;box-shadow:0 18px 40px #0f172a14}.collapsible-panel:hover{transform:translateY(-1px);box-shadow:0 20px 48px #0f172a1f}:root.dark .collapsible-panel{background:linear-gradient(hsl(var(--background)), hsl(var(--background))) padding-box, linear-gradient(90deg, var(--blue), var(--yellow), var(--orange)) border-box;box-shadow:0 22px 48px #02061759}.collapsible-trigger{text-align:left;width:100%;color:inherit;cursor:pointer;border:0;align-items:flex-start;gap:1rem;padding:1.15rem 1.25rem;display:flex}.collapsible-copy h2,.collapsible-copy h3{width:auto;margin:0;font-size:1rem;font-weight:600}.collapsible-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}.collapsible-copy{flex:1;gap:.5rem;min-width:0;display:grid}.collapsible-chevron{border:1px solid #94a3b859;border-radius:100%;flex:none;transition:transform .22s,background-color .18s,border-color .18s}.collapsible-panel.is-open .collapsible-chevron{transform:rotate(180deg)}.collapsible-body-wrap{grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.7,.2,1);display:grid}.collapsible-panel.is-open .collapsible-body-wrap{grid-template-rows:1fr}.collapsible-body{min-height:0;padding:0 1.25rem;overflow:hidden}.collapsible-panel.is-open .collapsible-body{padding-bottom:1.25rem}.collapsible-body>:first-child{margin-top:0}.collapsible-body>:last-child{margin-bottom:0}.regex-input{resize:vertical;background:0 0;border:2px solid #374151;border-radius:8px;width:100%;min-height:60px;padding:12px 16px;font-family:Courier New,monospace;font-size:1.1rem;font-weight:600;transition:border-color .2s;&:focus{border-color:var(--blue);outline:none}}.automaton-graph{opacity:0;transition:opacity .22s}.automaton-graph polygon:first-child{fill:#0000}.automaton-node{cursor:pointer;& ellipse{stroke:var(--edge-color);transition:fill .16s,stroke .16s,stroke-width .16s,opacity .16s}& text{fill:currentColor;transition:fill 90ms,opacity .12s}&.automaton-node-start{& ellipse:first-of-type{stroke:var(--blue);stroke-width:2.5px}}&.automaton-node-accepting{& ellipse{stroke:var(--edge-color)}& ellipse:last-of-type{stroke:var(--edge-active-label-color)}}&:hover,&.is-linked,&.is-active{& ellipse:first-of-type{fill:#fef3c7}& text{fill:#000!important}}&.is-linked{& ellipse:first-of-type{stroke:var(--pink)}& ellipse{stroke:1.5}}&:hover,&.is-active{& ellipse:first-of-type{stroke:var(--orange)}& ellipse{stroke-width:1.75px}}&.is-muted{& ellipse,& text{opacity:var(--muted-opacity)}}}.automaton-edge{cursor:pointer;& path,& polygon,& text{transition:stroke .16s,fill .16s,stroke-width .16s,opacity .16s}& path,& polygon{stroke:var(--edge-color)}& text{fill:var(--edge-label-color)}&.is-active,&.is-hover{& path,& polygon{stroke:#ea580c;stroke-width:2.5px}& polygon{fill:#ea580c}& text{fill:var(--edge-active-label-color);font-weight:700}}&.is-muted{& path,& polygon,& text{opacity:var(--muted-opacity)}}}.distinguishability-matrix{table-layout:fixed;border:1px solid #e2e8f0;min-width:fit-content;max-width:none;font-size:1rem;& th,& td{aspect-ratio:1;vertical-align:middle;text-align:center;border:1px solid #374151;width:3rem;min-width:3rem;height:3rem;padding:0;font-weight:600;transition:background-color .16s,box-shadow .16s,color .16s}& thead th,& tbody th{background:#94a3b81f}& td[data-blacked]{background:var(--matrix-blacked-bg);cursor:default;pointer-events:none}& td[data-empty]{cursor:pointer}& td[data-empty]:hover,& td[data-empty]:focus-visible,& th[data-equivalent-hover],& td[data-equivalent-hover]{background:color-mix(in srgb, var(--blue) 14%, #fffffff0);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--blue) 72%, white)}& td[data-empty]:focus-visible{outline:0}}a.default{color:var(--blue);font-weight:500;text-decoration:underline}@keyframes spin{to{transform:rotate(360deg)}}.spinner{transform-origin:50%;animation:1s linear infinite spin}