:root{--accent:#8a3d2f;--accent-soft:rgba(138,61,47,.1)}
body[data-site="regexlab"] .brand-mark{background:var(--accent);color:#fff;font-size:.7rem}
.mode-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mode-tab{border:1px solid var(--line,#d5cfbc);background:#fff;border-radius:999px;padding:.55rem 1rem;cursor:pointer;font:inherit}
.mode-tab.is-active{background:var(--accent);color:#fff;border-color:transparent}
.panel[hidden]{display:none!important}
.hl mark{background:#ffe08a;padding:0 .1em;border-radius:2px}
.hl mark.g1{background:#c5e8ff}.hl mark.g2{background:#d9f2d0}
.templates{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.templates button{font:inherit;border-radius:999px;border:1px solid var(--line,#d5cfbc);background:#fff;padding:.35rem .75rem;cursor:pointer}
#matchList{list-style:none;padding:0;margin:.75rem 0 0;display:grid;gap:.35rem}
#matchList li{background:#fff;border:1px solid var(--line,#d5cfbc);border-radius:10px;padding:.55rem .7rem;font-family:ui-monospace,monospace;font-size:.86rem}
.hint{color:var(--dim,#625f57);font-size:.9rem}
.err{color:#b5473b}

/* polish: mobile form comfort */
@media (max-width:700px){
  .studio-card label{display:block;margin:.55rem 0}
  .studio-card input[type=text],.studio-card input[type=url],.studio-card input[type=number],.studio-card input[type=search],.studio-card textarea,.studio-card select{width:100%;max-width:100%;box-sizing:border-box}
  .mode-tabs{gap:.35rem}
  .mode-tab{padding:.5rem .85rem;font-size:.9rem}
  #out,pre#out{font-size:.82rem}
}