/* MDS theme: deep teal, lime, lavender and mint, soft rounded cards. Loaded last by every page (start screen and studios). */
:root{
  --teal:#1f4447; --teal2:#2a5458; --lime:#c6f04d; --lav:#d9ccf8; --lavsoft:#efe9fd; --mint:#5fd38d; --mintsoft:#e2f6ea; --cream:#f7efe6;
  --paper:#eef2f2; --board:#ffffff; --ink:#15302f; --muted:#6a7b7b; --line:#e2e8e8; --grid:#e7eded; --fill:#f5f8f8;
  --btn:#f2f5f5; --btnh:#e5ecec; --sel:#7b5cf0; --on:#1f4447; --onink:#ffffff; --good:#2f9e6a; --warn:#c2740f; --tint:#f5f1fc; --chip:rgba(255,255,255,.92);
  --radius:14px; --shadow:0 1px 2px rgba(21,48,47,.05),0 6px 18px rgba(21,48,47,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f292b; --board:#163739; --ink:#e9f2f1; --muted:#9db4b3; --line:#244a4d; --grid:#1b4144; --fill:#1a3e41;
  --btn:#1c4245; --btnh:#245155; --sel:#c6f04d; --on:#c6f04d; --onink:#11292b; --good:#5fd38d; --warn:#f2b35a; --tint:#1d3f42; --chip:rgba(22,55,57,.92);
  --lavsoft:#2a2f4d; --mintsoft:#1c4636; --cream:#3a3328; --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f292b; --board:#163739; --ink:#e9f2f1; --muted:#9db4b3; --line:#244a4d; --grid:#1b4144; --fill:#1a3e41;
  --btn:#1c4245; --btnh:#245155; --sel:#c6f04d; --on:#c6f04d; --onink:#11292b; --good:#5fd38d; --warn:#f2b35a; --tint:#1d3f42; --chip:rgba(22,55,57,.92);
  --lavsoft:#2a2f4d; --mintsoft:#1c4636; --cream:#3a3328; --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 22px rgba(0,0,0,.25); color-scheme:dark}

/* controls */
button,.btn{border-radius:10px;border-color:var(--line);transition:background .12s,border-color .12s,color .12s}
button.pri,.btn.pri,button[aria-pressed="true"].pri{background:var(--on);color:var(--onink);border-color:var(--on);font-weight:600}
button.pri:hover,.btn.pri:hover{filter:brightness(1.12)}
input,select,textarea{border-radius:10px}
.field input,.field select,.field textarea{border-radius:10px;border-color:var(--line);background:var(--fill)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sel);outline-offset:1px}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--sel);outline-offset:2px}

/* start screen */
.brand h1{letter-spacing:-.01em}
nav{background:var(--board);padding:4px;border-radius:12px;box-shadow:var(--shadow)}
nav button{border-radius:9px}
nav button[aria-current="page"]{background:var(--on);color:var(--onink)}
h2{text-transform:none;letter-spacing:-.01em;font-weight:700;font-size:1.3rem}
.tile,.list,.sect{border:0;border-radius:18px;box-shadow:var(--shadow)}
.tile{position:relative;overflow:hidden}
.tile:hover{border-color:transparent;transform:translateY(-1px);box-shadow:0 2px 4px rgba(21,48,47,.06),0 12px 26px rgba(21,48,47,.10)}
.tile svg{background:var(--lavsoft);border-radius:14px;padding:8px;box-sizing:content-box;width:34px;height:34px}
.tiles .tile:nth-child(5n+2) svg{background:var(--cream)} .tiles .tile:nth-child(5n+3) svg{background:var(--mintsoft)} .tiles .tile:nth-child(5n+4) svg{background:#eaf7c9}
:root[data-theme="dark"] .tiles .tile:nth-child(5n+4) svg{background:#2f3d1c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tiles .tile:nth-child(5n+4) svg{background:#2f3d1c}:root:not([data-theme="light"]) .switch[aria-checked="true"]{background:var(--lime);border-color:var(--lime)}:root:not([data-theme="light"]) .switch[aria-checked="true"]::after{background:var(--teal)}}
.tile h3{letter-spacing:-.01em}
.tile .go{color:var(--teal);background:var(--lime);padding:5px 12px;border-radius:99px;font-size:.78rem}
.tile.soon{box-shadow:none;border:1.5px dashed var(--line)}
.chip{border:0;background:var(--lavsoft);color:var(--ink)}
.prow:hover{background:var(--tint)}
.tip{border-left:0;background:var(--lavsoft);border-radius:12px}
.switch[aria-checked="true"]{background:var(--teal);border-color:var(--teal)} .switch[aria-checked="true"]::after{background:var(--lime)}
:root[data-theme="dark"] .switch[aria-checked="true"]{background:var(--lime);border-color:var(--lime)} :root[data-theme="dark"] .switch[aria-checked="true"]::after{background:var(--teal)}
.lbtools select,.lbtools input{border-radius:10px}

/* studios: panels and toolbars as soft cards */
.panel,.side,.insp,#side,#insp,aside{border-radius:18px}
.tabs button[aria-pressed="true"],.seg button[aria-pressed="true"],.seg button.on,button.on,button[aria-pressed="true"]{background:var(--on);color:var(--onink);border-color:var(--on)}
.cath,.grp{color:var(--muted);letter-spacing:.04em}