mates-css 0.2.0 → 0.3.0

package/demo.html

@@ -89,8 +89,17 @@
         <label class="label" for="s1">Select</label>
         <select class="input" id="s1"><option>Choose one…</option><option>Option A</option></select>
         <label class="label" for="ok">States</label>
-        <input class="input input-success" id="ok" type="text" value="Looks good">
-        <input class="input input-error" type="text" value="Has an error" style="margin-top:.5rem;">
+        <input class="input-success" id="ok" type="text" value="Bare input + .input-success">
+        <div class="m-error">
+          <label class="label" for="err1" style="margin-top:.5rem;">Username</label>
+          <input id="err1" type="text" value="ada!!">
+          <span class="hint">Only letters and numbers allowed.</span>
+        </div>
+        <div class="m-valid">
+          <label class="label" for="ok1" style="margin-top:.5rem;">Email</label>
+          <input id="ok1" type="email" value="ada@example.com">
+          <span class="hint">Looks good.</span>
+        </div>
         <label class="label">Checks &amp; radios</label>
         <label style="display:block;"><input type="checkbox" class="check" checked> Checked</label>
         <label style="display:block;"><input type="checkbox" class="check"> Unchecked</label>
@@ -103,7 +112,8 @@
         <label class="switch"><input type="checkbox" checked><i></i></label>
         <label class="switch" style="margin-left:.75rem;"><input type="checkbox"><i></i></label>
         <label class="label" for="rg">Range</label>
-        <input type="range" class="range" id="rg" value="60">
+        <input type="range" id="rg" value="60">
+        <input type="range" value="35" style="--m-range-h: 12px; margin-top:.5rem;" aria-label="Thick track example">
         <label class="label">Form group</label>
         <div class="fgroup">
           <span class="fgroup-label">https://</span>
@@ -317,6 +327,12 @@
       else document.documentElement.setAttribute('data-theme', mode);
       document.querySelector('.theme-toggle .btn').textContent = 'Theme: ' + mode;
     }
+    // demo-only: live range fill (WebKit needs --m-range-progress; Firefox is native)
+    document.querySelectorAll('input[type="range"]').forEach(r => {
+      const update = () => r.style.setProperty('--m-range-progress', (r.value / (r.max || 100) * 100) + '%');
+      update();
+      r.addEventListener('input', update);
+    });
     // demo-only: removable tags
     document.querySelectorAll('.tag-x').forEach(x => x.addEventListener('click', e => e.target.closest('.tag').remove()));
   </script>

package/mates.css

@@ -26,7 +26,13 @@
   --m-success: #0e9f6e;
   --m-warning: #c27803;
   --m-danger: #e02424;
+  --m-on-success: #ffffff;
+  --m-on-warning: #ffffff;
+  --m-on-danger: #ffffff;
   --m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);
+  --m-elev: 0 1px 2px rgba(16,24,40,.10), 0 3px 8px rgba(16,24,40,.14), 0 8px 20px rgba(16,24,40,.10);
+  --m-elev-active: 0 1px 2px rgba(16,24,40,.16), 0 2px 4px rgba(16,24,40,.12);
+  --m-range-h: 6px;
   --m-dur: .2s;
 }
 
@@ -47,7 +53,12 @@
     --m-success: #2ee06e;
     --m-warning: #ffc757;
     --m-danger: #ff5c5c;
+    --m-on-success: #14161a;
+    --m-on-warning: #14161a;
+    --m-on-danger: #14161a;
     --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
+    --m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
+    --m-elev-active: 0 1px 3px rgba(0,0,0,.5);
   }
 }
 
@@ -67,7 +78,12 @@
   --m-success: #2ee06e;
   --m-warning: #ffc757;
   --m-danger: #ff5c5c;
+  --m-on-success: #14161a;
+  --m-on-warning: #14161a;
+  --m-on-danger: #14161a;
   --m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
+  --m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);
+  --m-elev-active: 0 1px 3px rgba(0,0,0,.5);
 }
 
 /* reset */
@@ -147,31 +163,44 @@ button:active, .btn:active { background: var(--m-border-2); }
 button:disabled, .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
 
 .btn-primary { background: var(--m-primary); color: var(--m-on-primary); }
-button.btn-primary:hover, .btn-primary:hover { background: var(--m-primary-h); }
-button.btn-primary:active, .btn-primary:active { background: var(--m-primary-a); }
+button.btn-primary:hover, .btn.btn-primary:hover { background: var(--m-primary-h); }
+button.btn-primary:active, .btn.btn-primary:active { background: var(--m-primary-a); }
 .btn-dark { background: var(--m-fg); color: var(--m-bg); }
-.btn-dark:hover { background: var(--m-fg); opacity: .88; }
-.btn-dark:active { opacity: .75; }
+button.btn-dark:hover, .btn.btn-dark:hover { background: var(--m-fg); opacity: .88; }
+button.btn-dark:active, .btn.btn-dark:active { opacity: .75; }
 .btn-light { background: var(--m-bg); color: var(--m-fg); border-color: var(--m-border); }
-.btn-light:hover { background: var(--m-surface); }
-.btn-light:active { background: var(--m-border); }
-.btn-success { background: var(--m-success); color: #fff; }
-.btn-success:hover { filter: brightness(1.1); }
-.btn-success:active { filter: brightness(.92); }
-.btn-danger { background: var(--m-danger); color: #fff; }
-.btn-danger:hover { filter: brightness(1.1); }
-.btn-danger:active { filter: brightness(.92); }
-.btn-warning { background: var(--m-warning); color: #fff; }
-.btn-warning:hover { filter: brightness(1.1); }
-.btn-warning:active { filter: brightness(.92); }
+button.btn-light:hover, .btn.btn-light:hover { background: var(--m-surface); }
+button.btn-light:active, .btn.btn-light:active { background: var(--m-border); }
+.btn-success { background: var(--m-success); color: var(--m-on-success); }
+button.btn-success:hover, .btn.btn-success:hover { background: var(--m-success); filter: brightness(1.08); }
+button.btn-success:active, .btn.btn-success:active { background: var(--m-success); filter: brightness(.92); }
+.btn-danger { background: var(--m-danger); color: var(--m-on-danger); }
+button.btn-danger:hover, .btn.btn-danger:hover { background: var(--m-danger); filter: brightness(1.08); }
+button.btn-danger:active, .btn.btn-danger:active { background: var(--m-danger); filter: brightness(.92); }
+.btn-warning { background: var(--m-warning); color: var(--m-on-warning); }
+button.btn-warning:hover, .btn.btn-warning:hover { background: var(--m-warning); filter: brightness(1.08); }
+button.btn-warning:active, .btn.btn-warning:active { background: var(--m-warning); filter: brightness(.92); }
 .btn-outline { background: transparent; border-color: var(--m-border-2); color: var(--m-primary); }
-.btn-outline:hover { background: var(--m-primary-soft); border-color: var(--m-primary); }
-.btn-outline:active { background: var(--m-primary); color: var(--m-on-primary); }
+button.btn-outline:hover, .btn.btn-outline:hover { background: var(--m-primary-soft); border-color: var(--m-primary); }
+button.btn-outline:active, .btn.btn-outline:active { background: var(--m-primary); color: var(--m-on-primary); }
 .btn-ghost { background: transparent; color: var(--m-fg-2); }
-.btn-ghost:hover { background: var(--m-surface); color: var(--m-fg); }
-.btn-ghost:active { background: var(--m-border); }
+button.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--m-surface); color: var(--m-fg); }
+button.btn-ghost:active, .btn.btn-ghost:active { background: var(--m-border); }
 .btn-link { background: transparent; color: var(--m-primary); padding-inline: .2em; }
-.btn-link:hover { background: transparent; text-decoration: underline; }
+button.btn-link:hover, .btn.btn-link:hover { background: transparent; text-decoration: underline; }
+:where(button, .btn).btn-elevated {
+  box-shadow: var(--m-elev);
+}
+:where(button, .btn).btn-elevated:hover {
+  box-shadow: var(--m-elev);
+  filter: brightness(1.04);
+}
+:where(button, .btn).btn-elevated:active {
+  box-shadow: var(--m-elev-active);
+}
+:where(button, .btn).btn-elevated.btn-primary:hover { background: var(--m-primary-h); filter: none; }
+:where(button, .btn).btn-elevated.btn-primary:active { background: var(--m-primary-a); }
+
 .btn-sm { padding: .25em .7em; font-size: .72rem; }
 .btn-lg { padding: .55em 1.3em; font-size: .92rem; }
 .btn-block { display: flex; width: 100%; }
@@ -265,9 +294,32 @@ button.btn-primary:active, .btn-primary:active { background: var(--m-primary-a);
 /* forms */
 .label { display: block; font-weight: 700; font-size: .85rem; line-height: 1.4; margin: .8rem 0 .15rem; }
 .hint { display: block; font-size: .78rem; color: var(--m-fg-3); margin-top: .25rem; }
-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
+
+/* validation: wrap a field in .m-error to color control + message */
+.m-error .input,
+.m-error input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
+.m-error select,
+.m-error textarea {
+  border-color: var(--m-danger);
+}
+.m-error .input:focus-visible,
+.m-error input:focus-visible, .m-error select:focus-visible, .m-error textarea:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--m-danger) 18%, transparent);
+}
+.m-error .hint { color: var(--m-danger); }
+.m-error .label { color: var(--m-danger); }
+
+/* success variant for the wrapper */
+.m-valid .input,
+.m-valid input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
+.m-valid select,
+.m-valid textarea {
+  border-color: var(--m-success);
+}
+.m-valid .hint { color: var(--m-success); }
+:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
 select,
-textarea,
+textarea),
 .input {
   width: 100%;
   padding: .45em .8em;
@@ -278,8 +330,8 @@ textarea,
   transition: border-color var(--m-dur), box-shadow var(--m-dur);
 }
 ::placeholder { color: var(--m-fg-3); }
-input:focus, select:focus, textarea:focus, .input:focus { border-color: var(--m-primary); }
-input:focus-visible, select:focus-visible, textarea:focus-visible {
+:where(input, select, textarea):focus, .input:focus { border-color: var(--m-primary); }
+:where(input, select, textarea):focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px var(--m-primary-soft);
 }
@@ -358,19 +410,31 @@ input[type="checkbox"]:disabled, input[type="radio"]:disabled, .check:disabled {
 .switch input:checked + i::after { left: calc(100% - 1.05em - 3px); }
 .switch input:focus-visible + i { outline: 2px solid var(--m-primary); outline-offset: 2px; }
 
-input[type="range"] { appearance: none; width: 100%; height: 1.4em; background: transparent; cursor: pointer; }
-input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
+input[type="range"] {
+  appearance: none;
+  width: 100%;
+  height: 1.4em;
+  background: transparent;
+  cursor: pointer;
+  /* filled portion: set --m-range-progress (0-100) from JS on input; default 50% */
+  --m-range-progress: 50%;
+  background: linear-gradient(to right,
+      var(--m-primary) var(--m-range-progress),
+      var(--m-border) var(--m-range-progress)) no-repeat center / 100% var(--m-range-h);
+}
+input[type="range"]::-webkit-slider-runnable-track { height: var(--m-range-h); border-radius: var(--m-r-full); background: transparent; }
 input[type="range"]::-webkit-slider-thumb {
   appearance: none;
   width: 1em;
   height: 1em;
-  margin-top: calc(2px - .5em);
+  margin-top: calc(var(--m-range-h) / 2 - .5em);
   border-radius: 50%;
   background: var(--m-primary);
   border: 2px solid var(--m-bg);
   box-shadow: 0 0 0 1px var(--m-border-2);
 }
-input[type="range"]::-moz-range-track { height: 4px; border-radius: var(--m-r-full); background: var(--m-border); }
+input[type="range"]::-moz-range-track { height: var(--m-range-h); border-radius: var(--m-r-full); background: var(--m-border); }
+input[type="range"]::-moz-range-progress { height: var(--m-range-h); border-radius: var(--m-r-full); background: var(--m-primary); }
 input[type="range"]::-moz-range-thumb { width: 1em; height: 1em; border-radius: 50%; background: var(--m-primary); border: 2px solid var(--m-bg); }
 input[type="color"] { width: 2.8em; height: 2.2em; padding: .15em; cursor: pointer; }
 

package/mates.min.css

@@ -1,4 +1,4 @@
 /*!
  * Mates CSS v0.1.0 — a compact pure-CSS UI kit.
  * No JS, no SCSS. MIT licensed.
- */:root{--m-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--m-font-head: Montserrat, system-ui, sans-serif;--m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--m-r: 8px;--m-r-sm: 5px;--m-r-full: 999px;--m-bg: #ffffff;--m-surface: #f6f7f9;--m-border: #e5e8ec;--m-border-2: #d0d5db;--m-fg: #14161a;--m-fg-2: #5a6472;--m-fg-3: #8a939f;--m-on-primary: #ffffff;--m-primary: #0172ad;--m-primary-h: #016091;--m-primary-a: #014e75;--m-primary-soft: rgba(1,114,173,.12);--m-success: #0e9f6e;--m-warning: #c27803;--m-danger: #e02424;--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);--m-dur: .2s}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35)}}:root[data-theme=dark]{--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{font-family:var(--m-font);font-size:15px;line-height:1.6;color:var(--m-fg);background:var(--m-bg);-webkit-font-smoothing:antialiased}:root{color-scheme:light dark}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}img,svg,video{display:block;max-width:100%}input,button,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--m-font-head);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:1.4em 0 .5em}h1{font-size:2rem}h2{font-size:1.55rem}h3{font-size:1.25rem}h4{font-size:1.1rem}h5{font-size:.95rem}h6{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--m-fg-3)}p{margin:.6em 0}small{font-size:.84em;color:var(--m-fg-3)}a{color:var(--m-primary);text-decoration:none}a:hover{text-decoration:underline}hr{border:0;border-top:1px solid var(--m-border);margin:1.6em 0}blockquote{border-left:3px solid var(--m-border-2);background:var(--m-surface);border-radius:0 var(--m-r-sm) var(--m-r-sm) 0;padding:.7em 1.1em;margin:1em 0;color:var(--m-fg-2)}ul,ol{padding-left:1.4em}li{margin:.25em 0}li::marker{color:var(--m-fg-3)}kbd{font-family:var(--m-mono);font-size:.8em;padding:.15em .45em;border:1px solid var(--m-border);border-bottom-width:2px;border-radius:var(--m-r-sm);background:var(--m-surface)}mark{padding:.1em .3em;border-radius:3px;background:#ffc75759}::selection{background:var(--m-primary);color:var(--m-on-primary)}:focus{outline:none}:focus-visible{outline:2px solid var(--m-primary);outline-offset:2px}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.38em .95em;border:1px solid transparent;border-radius:var(--m-r-sm);font-family:var(--m-font-head);font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1.5;cursor:pointer;user-select:none;text-decoration:none;background:var(--m-surface);color:var(--m-fg);transition:background var(--m-dur),color var(--m-dur),border-color var(--m-dur)}button:hover,.btn:hover{background:var(--m-border);text-decoration:none}button:active,.btn:active{background:var(--m-border-2)}button:disabled,.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--m-primary);color:var(--m-on-primary)}button.btn-primary:hover,.btn-primary:hover{background:var(--m-primary-h)}button.btn-primary:active,.btn-primary:active{background:var(--m-primary-a)}.btn-dark{background:var(--m-fg);color:var(--m-bg)}.btn-dark:hover{background:var(--m-fg);opacity:.88}.btn-dark:active{opacity:.75}.btn-light{background:var(--m-bg);color:var(--m-fg);border-color:var(--m-border)}.btn-light:hover{background:var(--m-surface)}.btn-light:active{background:var(--m-border)}.btn-success{background:var(--m-success);color:#fff}.btn-success:hover{filter:brightness(1.1)}.btn-success:active{filter:brightness(.92)}.btn-danger{background:var(--m-danger);color:#fff}.btn-danger:hover{filter:brightness(1.1)}.btn-danger:active{filter:brightness(.92)}.btn-warning{background:var(--m-warning);color:#fff}.btn-warning:hover{filter:brightness(1.1)}.btn-warning:active{filter:brightness(.92)}.btn-outline{background:transparent;border-color:var(--m-border-2);color:var(--m-primary)}.btn-outline:hover{background:var(--m-primary-soft);border-color:var(--m-primary)}.btn-outline:active{background:var(--m-primary);color:var(--m-on-primary)}.btn-ghost{background:transparent;color:var(--m-fg-2)}.btn-ghost:hover{background:var(--m-surface);color:var(--m-fg)}.btn-ghost:active{background:var(--m-border)}.btn-link{background:transparent;color:var(--m-primary);padding-inline:.2em}.btn-link:hover{background:transparent;text-decoration:underline}.btn-sm{padding:.25em .7em;font-size:.72rem}.btn-lg{padding:.55em 1.3em;font-size:.92rem}.btn-block{display:flex;width:100%}.btn-group{display:inline-flex}.btn-group button,.btn-group .btn{border-radius:0;margin-left:-1px}.btn-group button:first-child,.btn-group .btn:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm);margin-left:0}.btn-group button:last-child,.btn-group .btn:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.btn-spin:after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-top-color:transparent;border-radius:50%;animation:m-spin .6s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}.btn-close{width:20px;height:20px;min-width:0;padding:0;border:0;border-radius:var(--m-r-full);background:rgb(from currentColor r g b / .18);position:relative}.btn-close:before,.btn-close:after{content:"";position:absolute;left:50%;top:50%;width:50%;height:2px;background:currentColor;translate:-50% -50%;rotate:45deg}.btn-close:after{rotate:-45deg}.btn-close:hover{background:rgb(from currentColor r g b / .3)}.tag{display:inline-flex;align-items:center;gap:.35em;padding:.18em .7em;border-radius:var(--m-r-full);font-size:.78rem;font-weight:600;line-height:1.6;background:var(--m-surface);color:var(--m-fg-2);border:1px solid var(--m-border);white-space:nowrap}.tag-primary{background:var(--m-primary);border-color:var(--m-primary);color:var(--m-on-primary)}.tag-success{background:var(--m-success);border-color:var(--m-success);color:#fff}.tag-warning{background:var(--m-warning);border-color:var(--m-warning);color:#fff}.tag-danger{background:var(--m-danger);border-color:var(--m-danger);color:#fff}.tag-soft{background:var(--m-primary-soft);border-color:transparent;color:var(--m-primary)}.tag-soft-success{background:color-mix(in srgb,var(--m-success) 14%,transparent);border-color:transparent;color:var(--m-success)}.tag-soft-danger{background:color-mix(in srgb,var(--m-danger) 12%,transparent);border-color:transparent;color:var(--m-danger)}.tag-rounded{border-radius:6px}.tag-x{display:inline-block;width:1.1em;height:1.1em;border-radius:50%;background:rgb(from currentColor r g b / .2);position:relative;cursor:pointer}.tag-x:before,.tag-x:after{content:"";position:absolute;left:50%;top:50%;width:55%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}.tag-x:after{rotate:-45deg}.tag-x:hover{background:rgb(from currentColor r g b / .4)}.label{display:block;font-weight:700;font-size:.85rem;line-height:1.4;margin:.8rem 0 .15rem}.hint{display:block;font-size:.78rem;color:var(--m-fg-3);margin-top:.25rem}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),select,textarea,.input{width:100%;padding:.45em .8em;background:var(--m-bg);border:1px solid var(--m-border-2);border-radius:var(--m-r-sm);color:var(--m-fg);transition:border-color var(--m-dur),box-shadow var(--m-dur)}::placeholder{color:var(--m-fg-3)}input:focus,select:focus,textarea:focus,.input:focus{border-color:var(--m-primary)}input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:0 0 0 3px var(--m-primary-soft)}input:disabled,select:disabled,textarea:disabled,.input:disabled{background:var(--m-surface);color:var(--m-fg-3);cursor:not-allowed}.input-success,input.input-success,select.input-success,textarea.input-success{border-color:var(--m-success)}.input-error,input.input-error,select.input-error,textarea.input-error{border-color:var(--m-danger)}textarea{min-height:6rem;resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:.5em .6em;padding-right:2.2em}input[type=search]{padding-left:2.1em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .6em center}input[type=checkbox],input[type=radio],.check{appearance:none;width:1.1em;height:1.1em;margin:0 .45em 0 0;flex-shrink:0;vertical-align:-.18em;border:1.5px solid var(--m-border-2);background:var(--m-bg);cursor:pointer;transition:background var(--m-dur),border-color var(--m-dur)}input[type=checkbox]{border-radius:4px}input[type=radio]{border-radius:50%}input[type=checkbox]:hover,input[type=radio]:hover,.check:hover{border-color:var(--m-fg-3)}input[type=checkbox]:checked,input[type=radio]:checked,.check:checked{background:var(--m-primary);border-color:var(--m-primary)}input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");background-size:.72em;background-position:center;background-repeat:no-repeat}input[type=radio]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");background-size:1em;background-position:center;background-repeat:no-repeat}input[type=checkbox]:disabled,input[type=radio]:disabled,.check:disabled{opacity:.4;cursor:not-allowed}.switch{position:relative;display:inline-block;width:2.6em;height:1.45em;flex-shrink:0}.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;z-index:1}.switch i{position:absolute;inset:0;border-radius:var(--m-r-full);background:var(--m-border-2);transition:background var(--m-dur);pointer-events:none}.switch i:after{content:"";position:absolute;left:3px;top:50%;translate:0 -50%;width:1.05em;height:1.05em;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:left var(--m-dur)}.switch input:checked+i{background:var(--m-primary)}.switch input:checked+i:after{left:calc(100% - 1.05em - 3px)}.switch input:focus-visible+i{outline:2px solid var(--m-primary);outline-offset:2px}input[type=range]{appearance:none;width:100%;height:1.4em;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}input[type=range]::-webkit-slider-thumb{appearance:none;width:1em;height:1em;margin-top:calc(2px - .5em);border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg);box-shadow:0 0 0 1px var(--m-border-2)}input[type=range]::-moz-range-track{height:4px;border-radius:var(--m-r-full);background:var(--m-border)}input[type=range]::-moz-range-thumb{width:1em;height:1em;border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg)}input[type=color]{width:2.8em;height:2.2em;padding:.15em;cursor:pointer}.fgroup{display:flex;margin:.5rem 0}.fgroup>*{border-radius:0}.fgroup>:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm)}.fgroup>:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.fgroup>*+*{margin-left:-1px}.fgroup-label{display:inline-flex;align-items:center;padding:0 .8em;background:var(--m-surface);border:1px solid var(--m-border-2);color:var(--m-fg-2);font-size:.88rem;white-space:nowrap}.fgroup .btn{flex-shrink:0}.card{background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);overflow:hidden}.card-body{padding:1rem 1.25rem}.card-title{font-size:1.08rem;margin:0 0 .2em}.card-sub{font-size:.85rem;color:var(--m-fg-3);margin:0}.card-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-top:1px solid var(--m-border);background:var(--m-surface)}.card-img{width:100%;display:block}.card-hover{transition:box-shadow var(--m-dur)}.card-hover:hover{box-shadow:0 2px 4px #10182814,0 10px 24px #1018281f}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:.92rem}.table th,.table td{padding:.55em .8em;text-align:left;border-bottom:1px solid var(--m-border)}.table thead th{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--m-fg-3);background:var(--m-surface)}.table tbody tr{transition:background var(--m-dur)}.table tbody tr:hover{background:var(--m-surface)}.table tr.selected{background:var(--m-primary-soft)}.table.striped tbody tr:nth-child(2n){background:color-mix(in srgb,var(--m-surface) 55%,transparent)}.table.bordered th,.table.bordered td{border:1px solid var(--m-border)}.table caption{caption-side:bottom;padding:.5em 0;font-size:.8rem;color:var(--m-fg-3);text-align:left}.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--m-surface);border-radius:var(--m-r-sm);width:fit-content;max-width:100%}.tab{padding:.38em 1em;border:0;border-radius:calc(var(--m-r-sm) - 1px);background:transparent;color:var(--m-fg-3);font-weight:600;font-size:.88rem;cursor:pointer;transition:color var(--m-dur),background var(--m-dur)}.tab:hover{color:var(--m-fg)}.tab.selected{background:var(--m-bg);color:var(--m-fg);box-shadow:0 1px 3px #0000001f}.tabs-line{background:none;padding:0;border-radius:0;border-bottom:2px solid var(--m-border);width:auto}.tabs-line .tab{border-radius:0;margin-bottom:-2px;border-bottom:2px solid transparent}.tabs-line .tab.selected{background:transparent;box-shadow:none;color:var(--m-primary);border-bottom-color:var(--m-primary)}.toast{padding:.8rem 1.1rem;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);box-shadow:var(--m-shadow);margin:.5rem 0}.toast-title{font-weight:700;margin:0 0 .15em}.toast p{margin:0;font-size:.88rem;opacity:.85}.toast-success{background:var(--m-success);color:#fff}.toast-danger{background:var(--m-danger);color:#fff}.toast-primary{background:var(--m-primary);color:var(--m-on-primary)}.alert{padding:.8rem 1.1rem;border:1px solid var(--m-border);border-left:3px solid var(--m-fg-3);border-radius:var(--m-r-sm);background:var(--m-surface);margin:.8rem 0}.alert p{margin:0}.alert-success{border-left-color:var(--m-success);background:color-mix(in srgb,var(--m-success) 10%,var(--m-bg))}.alert-warning{border-left-color:var(--m-warning);background:color-mix(in srgb,var(--m-warning) 12%,var(--m-bg))}.alert-danger{border-left-color:var(--m-danger);background:color-mix(in srgb,var(--m-danger) 10%,var(--m-bg))}.alert-primary{border-left-color:var(--m-primary);background:var(--m-primary-soft)}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px;padding:.3em .7em;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--m-dur),translate var(--m-dur);z-index:50}.tooltip:hover:after{opacity:1;translate:-50% 0}.tooltip-b:after{bottom:auto;top:calc(100% + 6px);translate:-50% -2px}.tooltip-b:hover:after{translate:-50% 0}.tooltip-r:after{bottom:auto;top:50%;left:calc(100% + 6px);translate:-2px -50%}.tooltip-r:hover:after{translate:0 -50%}.tooltip-l:after{bottom:auto;top:50%;right:calc(100% + 6px);left:auto;translate:2px -50%}.tooltip-l:hover:after{translate:0 -50%}.modal-toggle{display:none}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity var(--m-dur),visibility var(--m-dur);z-index:100}.modal-toggle:checked~.modal{visibility:visible;opacity:1}.modal-overlay{position:absolute;inset:0;background:#00000080}.modal-box{position:relative;width:min(28rem,100%);background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .5rem}.modal-title{margin:0;font-size:1.1rem}.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.1rem}.modal-box>.modal-body{padding:.25rem 1.25rem}details.acc{border:1px solid var(--m-border);border-radius:var(--m-r-sm);background:var(--m-bg);padding:.7em 1em;margin:.5em 0}details.acc summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}details.acc summary::-webkit-details-marker{display:none}details.acc summary:after{content:"";width:.55em;height:.55em;border:2px solid var(--m-fg-3);border-top:0;border-left:0;rotate:45deg;transition:rotate var(--m-dur)}details.acc[open] summary:after{rotate:225deg}details.acc[open] summary{margin-bottom:.4em}.nav{display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.1rem;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);flex-wrap:wrap}.nav-brand{font-family:var(--m-font-head);font-weight:700;font-size:1.02rem;color:var(--m-fg)}.nav a{color:var(--m-fg-3);font-weight:600;font-size:.9rem}.nav a:hover{color:var(--m-fg);text-decoration:none}.nav .selected{color:var(--m-fg)}.nav-space{flex:1}.avatar{display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--m-primary-soft);color:var(--m-primary);font-weight:700;font-size:.85rem;overflow:hidden;flex-shrink:0}.avatar-sm{width:2em;height:2em;font-size:.7rem}.avatar-lg{width:3.4em;height:3.4em;font-size:1.05rem}progress.progress{appearance:none;width:100%;height:.5rem;border:0;overflow:hidden;border-radius:var(--m-r-full);background:var(--m-surface);display:block}progress.progress::-webkit-progress-bar{background:var(--m-surface)}progress.progress::-webkit-progress-value{background:var(--m-primary);border-radius:var(--m-r-full)}progress.progress::-moz-progress-bar{background:var(--m-primary);border-radius:var(--m-r-full)}.container{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}.m-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-gap, 1rem);align-items:center}.m-col{display:flex;flex-direction:column;gap:var(--m-gap, 1rem)}.m-row>*{flex:1 1 0;min-width:0}.m-row>.m-col-auto{flex:0 0 auto;width:auto}.m-row-nowrap{flex-wrap:nowrap}.m-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--m-gap, 1rem)}.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}.c-5{flex:0 0 41.6667%;max-width:41.6667%}.c-6{flex:0 0 50%;max-width:50%}.c-7{flex:0 0 58.3333%;max-width:58.3333%}.c-8{flex:0 0 66.6667%;max-width:66.6667%}.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}.m-g-0{--m-gap:0}.m-g-xs{--m-gap:.4rem}.m-g-sm{--m-gap:.65rem}.m-g-lg{--m-gap:1.75rem}.center{text-align:center}.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--m-border)}.m-0{margin:0}.m-5{margin:5px}.m-10{margin:10px}.m-15{margin:15px}.m-20{margin:20px}.m-30{margin:30px}.m-40{margin:40px}.m-t-0{margin-top:0}.m-t-5{margin-top:5px}.m-t-10{margin-top:10px}.m-t-15{margin-top:15px}.m-t-20{margin-top:20px}.m-t-30{margin-top:30px}.m-t-40{margin-top:40px}.m-b-0{margin-bottom:0}.m-b-5{margin-bottom:5px}.m-b-10{margin-bottom:10px}.m-b-15{margin-bottom:15px}.m-b-20{margin-bottom:20px}.m-b-30{margin-bottom:30px}.m-b-40{margin-bottom:40px}.m-l-0{margin-left:0}.m-l-5{margin-left:5px}.m-l-10{margin-left:10px}.m-l-15{margin-left:15px}.m-l-20{margin-left:20px}.m-l-30{margin-left:30px}.m-l-40{margin-left:40px}.m-r-0{margin-right:0}.m-r-5{margin-right:5px}.m-r-10{margin-right:10px}.m-r-15{margin-right:15px}.m-r-20{margin-right:20px}.m-r-30{margin-right:30px}.m-r-40{margin-right:40px}.m-x-0{margin-left:0;margin-right:0}.m-x-5{margin-left:5px;margin-right:5px}.m-x-10{margin-left:10px;margin-right:10px}.m-x-15{margin-left:15px;margin-right:15px}.m-x-20{margin-left:20px;margin-right:20px}.m-x-auto{margin-left:auto;margin-right:auto}.m-y-0{margin-top:0;margin-bottom:0}.m-y-5{margin-top:5px;margin-bottom:5px}.m-y-10{margin-top:10px;margin-bottom:10px}.m-y-15{margin-top:15px;margin-bottom:15px}.m-y-20{margin-top:20px;margin-bottom:20px}.p-0{padding:0}.p-5{padding:5px}.p-10{padding:10px}.p-15{padding:15px}.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}.p-t-0{padding-top:0}.p-t-5{padding-top:5px}.p-t-10{padding-top:10px}.p-t-15{padding-top:15px}.p-t-20{padding-top:20px}.p-t-30{padding-top:30px}.p-b-0{padding-bottom:0}.p-b-5{padding-bottom:5px}.p-b-10{padding-bottom:10px}.p-b-15{padding-bottom:15px}.p-b-20{padding-bottom:20px}.p-b-30{padding-bottom:30px}.p-l-0{padding-left:0}.p-l-5{padding-left:5px}.p-l-10{padding-left:10px}.p-l-15{padding-left:15px}.p-l-20{padding-left:20px}.p-l-30{padding-left:30px}.p-r-0{padding-right:0}.p-r-5{padding-right:5px}.p-r-10{padding-right:10px}.p-r-15{padding-right:15px}.p-r-20{padding-right:20px}.p-r-30{padding-right:30px}.p-x-0{padding-left:0;padding-right:0}.p-x-5{padding-left:5px;padding-right:5px}.p-x-10{padding-left:10px;padding-right:10px}.p-x-15{padding-left:15px;padding-right:15px}.p-x-20{padding-left:20px;padding-right:20px}.p-y-0{padding-top:0;padding-bottom:0}.p-y-5{padding-top:5px;padding-bottom:5px}.p-y-10{padding-top:10px;padding-bottom:10px}.p-y-15{padding-top:15px;padding-bottom:15px}.p-y-20{padding-top:20px;padding-bottom:20px}.mono{font-family:var(--m-mono);font-size:.86em}.muted{color:var(--m-fg-2)}.subtle{color:var(--m-fg-3)}.overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-fg-3)}.hidden{display:none!important}.m-flex{display:flex}.m-inline-flex{display:inline-flex}.m-flex-row{flex-direction:row}.m-flex-col{flex-direction:column}.m-flex-wrap{flex-wrap:wrap}.m-flex-nowrap{flex-wrap:nowrap}.m-flex-1{flex:1 1 0%;min-width:0}.m-flex-auto{flex:1 1 auto}.m-flex-none{flex:none}.m-grow{flex-grow:1}.m-shrink-0{flex-shrink:0}.m-basis-0{flex-basis:0}.m-items-start,.m-i-start{align-items:flex-start}.m-items-center,.m-i-center{align-items:center}.m-items-end,.m-i-end{align-items:flex-end}.m-items-stretch,.m-i-stretch{align-items:stretch}.m-items-baseline,.m-i-baseline{align-items:baseline}.m-self-start{align-self:flex-start}.m-self-center{align-self:center}.m-self-end{align-self:flex-end}.m-justify-start,.m-j-start{justify-content:flex-start}.m-justify-center,.m-j-center{justify-content:center}.m-justify-end,.m-j-end{justify-content:flex-end}.m-justify-between,.m-j-between{justify-content:space-between}.m-justify-around,.m-j-around{justify-content:space-around}.m-justify-evenly,.m-j-evenly{justify-content:space-evenly}.m-j-center-v{justify-content:center}.m-content-start{align-content:flex-start}.m-content-between{align-content:space-between}.m-content-center{align-content:center}.m-order-first{order:-1}.m-order-last{order:99}.m-gap-0{gap:0}.m-gap-xs{gap:.4rem}.m-gap-sm{gap:.65rem}.m-gap{gap:1rem}.m-gap-lg{gap:1.75rem}.m-gap-xl{gap:2.5rem}.m-gap-5{gap:5px}.m-gap-10{gap:10px}.m-gap-15{gap:15px}.m-gap-20{gap:20px}.m-gap-30{gap:30px}.m-gap-40{gap:40px}.m-gap-x-0{column-gap:0}.m-gap-x-xs{column-gap:.4rem}.m-gap-x-sm{column-gap:.65rem}.m-gap-x{column-gap:1rem}.m-gap-x-lg{column-gap:1.75rem}.m-gap-x-5{column-gap:5px}.m-gap-x-10{column-gap:10px}.m-gap-x-15{column-gap:15px}.m-gap-x-20{column-gap:20px}.m-gap-x-30{column-gap:30px}.m-gap-y-0{row-gap:0}.m-gap-y-xs{row-gap:.4rem}.m-gap-y-sm{row-gap:.65rem}.m-gap-y{row-gap:1rem}.m-gap-y-lg{row-gap:1.75rem}.m-gap-y-5{row-gap:5px}.m-gap-y-10{row-gap:10px}.m-gap-y-15{row-gap:15px}.m-gap-y-20{row-gap:20px}.m-gap-y-30{row-gap:30px}.m-grid{display:grid}.m-inline-grid{display:inline-grid}.m-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.m-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.m-grid-cols-auto-sm{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.m-grid-cols-auto-lg{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}.m-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.m-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.m-grid-flow-dense{grid-auto-flow:row dense}.m-col-span-2{grid-column:span 2/span 2}.m-col-span-3{grid-column:span 3/span 3}.m-col-span-full{grid-column:1/-1}.m-row-span-2{grid-row:span 2/span 2}@media(max-width:640px){.m-grid-cols-2,.m-grid-cols-3,.m-grid-cols-4{grid-template-columns:1fr}.m-col-span-2,.m-col-span-3{grid-column:auto}}
+ */:root{--m-font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--m-font-head: Montserrat, system-ui, sans-serif;--m-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--m-r: 8px;--m-r-sm: 5px;--m-r-full: 999px;--m-bg: #ffffff;--m-surface: #f6f7f9;--m-border: #e5e8ec;--m-border-2: #d0d5db;--m-fg: #14161a;--m-fg-2: #5a6472;--m-fg-3: #8a939f;--m-on-primary: #ffffff;--m-primary: #0172ad;--m-primary-h: #016091;--m-primary-a: #014e75;--m-primary-soft: rgba(1,114,173,.12);--m-success: #0e9f6e;--m-warning: #c27803;--m-danger: #e02424;--m-on-success: #ffffff;--m-on-warning: #ffffff;--m-on-danger: #ffffff;--m-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);--m-elev: 0 1px 2px rgba(16,24,40,.1), 0 3px 8px rgba(16,24,40,.14), 0 8px 20px rgba(16,24,40,.1);--m-elev-active: 0 1px 2px rgba(16,24,40,.16), 0 2px 4px rgba(16,24,40,.12);--m-range-h: 6px;--m-dur: .2s}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-on-success: #14161a;--m-on-warning: #14161a;--m-on-danger: #14161a;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);--m-elev-active: 0 1px 3px rgba(0,0,0,.5)}}:root[data-theme=dark]{--m-bg: #14161a;--m-surface: #1d2026;--m-border: #2c3138;--m-border-2: #3d434b;--m-fg: #e8eaed;--m-fg-2: #a8b0ba;--m-fg-3: #6f7780;--m-primary: #2fabdf;--m-primary-h: #45b9e6;--m-primary-a: #5ac3ed;--m-primary-soft: rgba(47,171,223,.16);--m-on-primary: #14161a;--m-success: #2ee06e;--m-warning: #ffc757;--m-danger: #ff5c5c;--m-on-success: #14161a;--m-on-warning: #14161a;--m-on-danger: #14161a;--m-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);--m-elev: 0 2px 4px rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.35);--m-elev-active: 0 1px 3px rgba(0,0,0,.5)}*,*:before,*:after{box-sizing:border-box}*{margin:0}body{font-family:var(--m-font);font-size:15px;line-height:1.6;color:var(--m-fg);background:var(--m-bg);-webkit-font-smoothing:antialiased}:root{color-scheme:light dark}:root[data-theme=dark]{color-scheme:dark}:root[data-theme=light]{color-scheme:light}img,svg,video{display:block;max-width:100%}input,button,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{font-family:var(--m-font-head);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:1.4em 0 .5em}h1{font-size:2rem}h2{font-size:1.55rem}h3{font-size:1.25rem}h4{font-size:1.1rem}h5{font-size:.95rem}h6{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--m-fg-3)}p{margin:.6em 0}small{font-size:.84em;color:var(--m-fg-3)}a{color:var(--m-primary);text-decoration:none}a:hover{text-decoration:underline}hr{border:0;border-top:1px solid var(--m-border);margin:1.6em 0}blockquote{border-left:3px solid var(--m-border-2);background:var(--m-surface);border-radius:0 var(--m-r-sm) var(--m-r-sm) 0;padding:.7em 1.1em;margin:1em 0;color:var(--m-fg-2)}ul,ol{padding-left:1.4em}li{margin:.25em 0}li::marker{color:var(--m-fg-3)}kbd{font-family:var(--m-mono);font-size:.8em;padding:.15em .45em;border:1px solid var(--m-border);border-bottom-width:2px;border-radius:var(--m-r-sm);background:var(--m-surface)}mark{padding:.1em .3em;border-radius:3px;background:#ffc75759}::selection{background:var(--m-primary);color:var(--m-on-primary)}:focus{outline:none}:focus-visible{outline:2px solid var(--m-primary);outline-offset:2px}button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.38em .95em;border:1px solid transparent;border-radius:var(--m-r-sm);font-family:var(--m-font-head);font-size:.8rem;font-weight:600;letter-spacing:.02em;line-height:1.5;cursor:pointer;user-select:none;text-decoration:none;background:var(--m-surface);color:var(--m-fg);transition:background var(--m-dur),color var(--m-dur),border-color var(--m-dur)}button:hover,.btn:hover{background:var(--m-border);text-decoration:none}button:active,.btn:active{background:var(--m-border-2)}button:disabled,.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn-primary{background:var(--m-primary);color:var(--m-on-primary)}button.btn-primary:hover,.btn.btn-primary:hover{background:var(--m-primary-h)}button.btn-primary:active,.btn.btn-primary:active{background:var(--m-primary-a)}.btn-dark{background:var(--m-fg);color:var(--m-bg)}button.btn-dark:hover,.btn.btn-dark:hover{background:var(--m-fg);opacity:.88}button.btn-dark:active,.btn.btn-dark:active{opacity:.75}.btn-light{background:var(--m-bg);color:var(--m-fg);border-color:var(--m-border)}button.btn-light:hover,.btn.btn-light:hover{background:var(--m-surface)}button.btn-light:active,.btn.btn-light:active{background:var(--m-border)}.btn-success{background:var(--m-success);color:var(--m-on-success)}button.btn-success:hover,.btn.btn-success:hover{background:var(--m-success);filter:brightness(1.08)}button.btn-success:active,.btn.btn-success:active{background:var(--m-success);filter:brightness(.92)}.btn-danger{background:var(--m-danger);color:var(--m-on-danger)}button.btn-danger:hover,.btn.btn-danger:hover{background:var(--m-danger);filter:brightness(1.08)}button.btn-danger:active,.btn.btn-danger:active{background:var(--m-danger);filter:brightness(.92)}.btn-warning{background:var(--m-warning);color:var(--m-on-warning)}button.btn-warning:hover,.btn.btn-warning:hover{background:var(--m-warning);filter:brightness(1.08)}button.btn-warning:active,.btn.btn-warning:active{background:var(--m-warning);filter:brightness(.92)}.btn-outline{background:transparent;border-color:var(--m-border-2);color:var(--m-primary)}button.btn-outline:hover,.btn.btn-outline:hover{background:var(--m-primary-soft);border-color:var(--m-primary)}button.btn-outline:active,.btn.btn-outline:active{background:var(--m-primary);color:var(--m-on-primary)}.btn-ghost{background:transparent;color:var(--m-fg-2)}button.btn-ghost:hover,.btn.btn-ghost:hover{background:var(--m-surface);color:var(--m-fg)}button.btn-ghost:active,.btn.btn-ghost:active{background:var(--m-border)}.btn-link{background:transparent;color:var(--m-primary);padding-inline:.2em}button.btn-link:hover,.btn.btn-link:hover{background:transparent;text-decoration:underline}:where(button,.btn).btn-elevated{box-shadow:var(--m-elev)}:where(button,.btn).btn-elevated:hover{box-shadow:var(--m-elev);filter:brightness(1.04)}:where(button,.btn).btn-elevated:active{box-shadow:var(--m-elev-active)}:where(button,.btn).btn-elevated.btn-primary:hover{background:var(--m-primary-h);filter:none}:where(button,.btn).btn-elevated.btn-primary:active{background:var(--m-primary-a)}.btn-sm{padding:.25em .7em;font-size:.72rem}.btn-lg{padding:.55em 1.3em;font-size:.92rem}.btn-block{display:flex;width:100%}.btn-group{display:inline-flex}.btn-group button,.btn-group .btn{border-radius:0;margin-left:-1px}.btn-group button:first-child,.btn-group .btn:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm);margin-left:0}.btn-group button:last-child,.btn-group .btn:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.btn-spin:after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-top-color:transparent;border-radius:50%;animation:m-spin .6s linear infinite}@keyframes m-spin{to{transform:rotate(360deg)}}.btn-close{width:20px;height:20px;min-width:0;padding:0;border:0;border-radius:var(--m-r-full);background:rgb(from currentColor r g b / .18);position:relative}.btn-close:before,.btn-close:after{content:"";position:absolute;left:50%;top:50%;width:50%;height:2px;background:currentColor;translate:-50% -50%;rotate:45deg}.btn-close:after{rotate:-45deg}.btn-close:hover{background:rgb(from currentColor r g b / .3)}.tag{display:inline-flex;align-items:center;gap:.35em;padding:.18em .7em;border-radius:var(--m-r-full);font-size:.78rem;font-weight:600;line-height:1.6;background:var(--m-surface);color:var(--m-fg-2);border:1px solid var(--m-border);white-space:nowrap}.tag-primary{background:var(--m-primary);border-color:var(--m-primary);color:var(--m-on-primary)}.tag-success{background:var(--m-success);border-color:var(--m-success);color:#fff}.tag-warning{background:var(--m-warning);border-color:var(--m-warning);color:#fff}.tag-danger{background:var(--m-danger);border-color:var(--m-danger);color:#fff}.tag-soft{background:var(--m-primary-soft);border-color:transparent;color:var(--m-primary)}.tag-soft-success{background:color-mix(in srgb,var(--m-success) 14%,transparent);border-color:transparent;color:var(--m-success)}.tag-soft-danger{background:color-mix(in srgb,var(--m-danger) 12%,transparent);border-color:transparent;color:var(--m-danger)}.tag-rounded{border-radius:6px}.tag-x{display:inline-block;width:1.1em;height:1.1em;border-radius:50%;background:rgb(from currentColor r g b / .2);position:relative;cursor:pointer}.tag-x:before,.tag-x:after{content:"";position:absolute;left:50%;top:50%;width:55%;height:1.5px;background:currentColor;translate:-50% -50%;rotate:45deg}.tag-x:after{rotate:-45deg}.tag-x:hover{background:rgb(from currentColor r g b / .4)}.label{display:block;font-weight:700;font-size:.85rem;line-height:1.4;margin:.8rem 0 .15rem}.hint{display:block;font-size:.78rem;color:var(--m-fg-3);margin-top:.25rem}.m-error .input,.m-error input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),.m-error select,.m-error textarea{border-color:var(--m-danger)}.m-error .input:focus-visible,.m-error input:focus-visible,.m-error select:focus-visible,.m-error textarea:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--m-danger) 18%,transparent)}.m-error .hint,.m-error .label{color:var(--m-danger)}.m-valid .input,.m-valid input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),.m-valid select,.m-valid textarea{border-color:var(--m-success)}.m-valid .hint{color:var(--m-success)}:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]),select,textarea),.input{width:100%;padding:.45em .8em;background:var(--m-bg);border:1px solid var(--m-border-2);border-radius:var(--m-r-sm);color:var(--m-fg);transition:border-color var(--m-dur),box-shadow var(--m-dur)}::placeholder{color:var(--m-fg-3)}:where(input,select,textarea):focus,.input:focus{border-color:var(--m-primary)}:where(input,select,textarea):focus-visible{outline:none;box-shadow:0 0 0 3px var(--m-primary-soft)}input:disabled,select:disabled,textarea:disabled,.input:disabled{background:var(--m-surface);color:var(--m-fg-3);cursor:not-allowed}.input-success,input.input-success,select.input-success,textarea.input-success{border-color:var(--m-success)}.input-error,input.input-error,select.input-error,textarea.input-error{border-color:var(--m-danger)}textarea{min-height:6rem;resize:vertical}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;background-size:.5em .6em;padding-right:2.2em}input[type=search]{padding-left:2.1em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%238a939f'%3E%3Cpath d='M14.9 14.4l-.5.5a.4.4 0 0 1-.5 0L9.5 10.5A5.3 5.3 0 1 1 11.6 6.3a5.3 5.3 0 0 1-1.1 3.2l4.4 4.4a.4.4 0 0 1 0 .5zM6.3 2.4a3.9 3.9 0 1 0 3.9 3.9 3.9 3.9 0 0 0-3.9-3.9z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .6em center}input[type=checkbox],input[type=radio],.check{appearance:none;width:1.1em;height:1.1em;margin:0 .45em 0 0;flex-shrink:0;vertical-align:-.18em;border:1.5px solid var(--m-border-2);background:var(--m-bg);cursor:pointer;transition:background var(--m-dur),border-color var(--m-dur)}input[type=checkbox]{border-radius:4px}input[type=radio]{border-radius:50%}input[type=checkbox]:hover,input[type=radio]:hover,.check:hover{border-color:var(--m-fg-3)}input[type=checkbox]:checked,input[type=radio]:checked,.check:checked{background:var(--m-primary);border-color:var(--m-primary)}input[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");background-size:.72em;background-position:center;background-repeat:no-repeat}input[type=radio]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23ffffff'/%3E%3C/svg%3E");background-size:1em;background-position:center;background-repeat:no-repeat}input[type=checkbox]:disabled,input[type=radio]:disabled,.check:disabled{opacity:.4;cursor:not-allowed}.switch{position:relative;display:inline-block;width:2.6em;height:1.45em;flex-shrink:0}.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;z-index:1}.switch i{position:absolute;inset:0;border-radius:var(--m-r-full);background:var(--m-border-2);transition:background var(--m-dur);pointer-events:none}.switch i:after{content:"";position:absolute;left:3px;top:50%;translate:0 -50%;width:1.05em;height:1.05em;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:left var(--m-dur)}.switch input:checked+i{background:var(--m-primary)}.switch input:checked+i:after{left:calc(100% - 1.05em - 3px)}.switch input:focus-visible+i{outline:2px solid var(--m-primary);outline-offset:2px}input[type=range]{appearance:none;width:100%;height:1.4em;background:transparent;cursor:pointer;--m-range-progress: 50%;background:linear-gradient(to right,var(--m-primary) var(--m-range-progress),var(--m-border) var(--m-range-progress)) no-repeat center / 100% var(--m-range-h)}input[type=range]::-webkit-slider-runnable-track{height:var(--m-range-h);border-radius:var(--m-r-full);background:transparent}input[type=range]::-webkit-slider-thumb{appearance:none;width:1em;height:1em;margin-top:calc(var(--m-range-h) / 2 - .5em);border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg);box-shadow:0 0 0 1px var(--m-border-2)}input[type=range]::-moz-range-track{height:var(--m-range-h);border-radius:var(--m-r-full);background:var(--m-border)}input[type=range]::-moz-range-progress{height:var(--m-range-h);border-radius:var(--m-r-full);background:var(--m-primary)}input[type=range]::-moz-range-thumb{width:1em;height:1em;border-radius:50%;background:var(--m-primary);border:2px solid var(--m-bg)}input[type=color]{width:2.8em;height:2.2em;padding:.15em;cursor:pointer}.fgroup{display:flex;margin:.5rem 0}.fgroup>*{border-radius:0}.fgroup>:first-child{border-radius:var(--m-r-sm) 0 0 var(--m-r-sm)}.fgroup>:last-child{border-radius:0 var(--m-r-sm) var(--m-r-sm) 0}.fgroup>*+*{margin-left:-1px}.fgroup-label{display:inline-flex;align-items:center;padding:0 .8em;background:var(--m-surface);border:1px solid var(--m-border-2);color:var(--m-fg-2);font-size:.88rem;white-space:nowrap}.fgroup .btn{flex-shrink:0}.card{background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);overflow:hidden}.card-body{padding:1rem 1.25rem}.card-title{font-size:1.08rem;margin:0 0 .2em}.card-sub{font-size:.85rem;color:var(--m-fg-3);margin:0}.card-bar{display:flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-top:1px solid var(--m-border);background:var(--m-surface)}.card-img{width:100%;display:block}.card-hover{transition:box-shadow var(--m-dur)}.card-hover:hover{box-shadow:0 2px 4px #10182814,0 10px 24px #1018281f}.table-wrap{overflow-x:auto}.table{width:100%;border-collapse:collapse;font-size:.92rem}.table th,.table td{padding:.55em .8em;text-align:left;border-bottom:1px solid var(--m-border)}.table thead th{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--m-fg-3);background:var(--m-surface)}.table tbody tr{transition:background var(--m-dur)}.table tbody tr:hover{background:var(--m-surface)}.table tr.selected{background:var(--m-primary-soft)}.table.striped tbody tr:nth-child(2n){background:color-mix(in srgb,var(--m-surface) 55%,transparent)}.table.bordered th,.table.bordered td{border:1px solid var(--m-border)}.table caption{caption-side:bottom;padding:.5em 0;font-size:.8rem;color:var(--m-fg-3);text-align:left}.tabs{display:flex;gap:.25rem;padding:.25rem;background:var(--m-surface);border-radius:var(--m-r-sm);width:fit-content;max-width:100%}.tab{padding:.38em 1em;border:0;border-radius:calc(var(--m-r-sm) - 1px);background:transparent;color:var(--m-fg-3);font-weight:600;font-size:.88rem;cursor:pointer;transition:color var(--m-dur),background var(--m-dur)}.tab:hover{color:var(--m-fg)}.tab.selected{background:var(--m-bg);color:var(--m-fg);box-shadow:0 1px 3px #0000001f}.tabs-line{background:none;padding:0;border-radius:0;border-bottom:2px solid var(--m-border);width:auto}.tabs-line .tab{border-radius:0;margin-bottom:-2px;border-bottom:2px solid transparent}.tabs-line .tab.selected{background:transparent;box-shadow:none;color:var(--m-primary);border-bottom-color:var(--m-primary)}.toast{padding:.8rem 1.1rem;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);box-shadow:var(--m-shadow);margin:.5rem 0}.toast-title{font-weight:700;margin:0 0 .15em}.toast p{margin:0;font-size:.88rem;opacity:.85}.toast-success{background:var(--m-success);color:#fff}.toast-danger{background:var(--m-danger);color:#fff}.toast-primary{background:var(--m-primary);color:var(--m-on-primary)}.alert{padding:.8rem 1.1rem;border:1px solid var(--m-border);border-left:3px solid var(--m-fg-3);border-radius:var(--m-r-sm);background:var(--m-surface);margin:.8rem 0}.alert p{margin:0}.alert-success{border-left-color:var(--m-success);background:color-mix(in srgb,var(--m-success) 10%,var(--m-bg))}.alert-warning{border-left-color:var(--m-warning);background:color-mix(in srgb,var(--m-warning) 12%,var(--m-bg))}.alert-danger{border-left-color:var(--m-danger);background:color-mix(in srgb,var(--m-danger) 10%,var(--m-bg))}.alert-primary{border-left-color:var(--m-primary);background:var(--m-primary-soft)}.tooltip{position:relative}.tooltip:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;translate:-50% 2px;padding:.3em .7em;border-radius:var(--m-r-sm);background:var(--m-fg);color:var(--m-bg);font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--m-dur),translate var(--m-dur);z-index:50}.tooltip:hover:after{opacity:1;translate:-50% 0}.tooltip-b:after{bottom:auto;top:calc(100% + 6px);translate:-50% -2px}.tooltip-b:hover:after{translate:-50% 0}.tooltip-r:after{bottom:auto;top:50%;left:calc(100% + 6px);translate:-2px -50%}.tooltip-r:hover:after{translate:0 -50%}.tooltip-l:after{bottom:auto;top:50%;right:calc(100% + 6px);left:auto;translate:2px -50%}.tooltip-l:hover:after{translate:0 -50%}.modal-toggle{display:none}.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;visibility:hidden;opacity:0;transition:opacity var(--m-dur),visibility var(--m-dur);z-index:100}.modal-toggle:checked~.modal{visibility:visible;opacity:1}.modal-overlay{position:absolute;inset:0;background:#00000080}.modal-box{position:relative;width:min(28rem,100%);background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .5rem}.modal-title{margin:0;font-size:1.1rem}.modal-foot{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem 1.1rem}.modal-box>.modal-body{padding:.25rem 1.25rem}details.acc{border:1px solid var(--m-border);border-radius:var(--m-r-sm);background:var(--m-bg);padding:.7em 1em;margin:.5em 0}details.acc summary{cursor:pointer;font-weight:700;list-style:none;display:flex;align-items:center;justify-content:space-between}details.acc summary::-webkit-details-marker{display:none}details.acc summary:after{content:"";width:.55em;height:.55em;border:2px solid var(--m-fg-3);border-top:0;border-left:0;rotate:45deg;transition:rotate var(--m-dur)}details.acc[open] summary:after{rotate:225deg}details.acc[open] summary{margin-bottom:.4em}.nav{display:flex;align-items:center;gap:1.25rem;padding:.6rem 1.1rem;background:var(--m-bg);border:1px solid var(--m-border);border-radius:var(--m-r);box-shadow:var(--m-shadow);flex-wrap:wrap}.nav-brand{font-family:var(--m-font-head);font-weight:700;font-size:1.02rem;color:var(--m-fg)}.nav a{color:var(--m-fg-3);font-weight:600;font-size:.9rem}.nav a:hover{color:var(--m-fg);text-decoration:none}.nav .selected{color:var(--m-fg)}.nav-space{flex:1}.avatar{display:inline-flex;align-items:center;justify-content:center;width:2.6em;height:2.6em;border-radius:50%;background:var(--m-primary-soft);color:var(--m-primary);font-weight:700;font-size:.85rem;overflow:hidden;flex-shrink:0}.avatar-sm{width:2em;height:2em;font-size:.7rem}.avatar-lg{width:3.4em;height:3.4em;font-size:1.05rem}progress.progress{appearance:none;width:100%;height:.5rem;border:0;overflow:hidden;border-radius:var(--m-r-full);background:var(--m-surface);display:block}progress.progress::-webkit-progress-bar{background:var(--m-surface)}progress.progress::-webkit-progress-value{background:var(--m-primary);border-radius:var(--m-r-full)}progress.progress::-moz-progress-bar{background:var(--m-primary);border-radius:var(--m-r-full)}.container{max-width:72rem;margin-inline:auto;padding-inline:1.25rem}.m-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--m-gap, 1rem);align-items:center}.m-col{display:flex;flex-direction:column;gap:var(--m-gap, 1rem)}.m-row>*{flex:1 1 0;min-width:0}.m-row>.m-col-auto{flex:0 0 auto;width:auto}.m-row-nowrap{flex-wrap:nowrap}.m-grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--m-gap, 1rem)}.c-1{flex:0 0 8.3333%;max-width:8.3333%}.c-2{flex:0 0 16.6667%;max-width:16.6667%}.c-3{flex:0 0 25%;max-width:25%}.c-4{flex:0 0 33.3333%;max-width:33.3333%}.c-5{flex:0 0 41.6667%;max-width:41.6667%}.c-6{flex:0 0 50%;max-width:50%}.c-7{flex:0 0 58.3333%;max-width:58.3333%}.c-8{flex:0 0 66.6667%;max-width:66.6667%}.c-9{flex:0 0 75%;max-width:75%}.c-10{flex:0 0 83.3333%;max-width:83.3333%}.c-11{flex:0 0 91.6667%;max-width:91.6667%}.c-12{flex:0 0 100%;max-width:100%}.m-g-0{--m-gap:0}.m-g-xs{--m-gap:.4rem}.m-g-sm{--m-gap:.65rem}.m-g-lg{--m-gap:1.75rem}.center{text-align:center}.divider{display:flex;align-items:center;gap:1rem;margin:1.5em 0;color:var(--m-fg-3);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;border-top:1px solid var(--m-border)}.m-0{margin:0}.m-5{margin:5px}.m-10{margin:10px}.m-15{margin:15px}.m-20{margin:20px}.m-30{margin:30px}.m-40{margin:40px}.m-t-0{margin-top:0}.m-t-5{margin-top:5px}.m-t-10{margin-top:10px}.m-t-15{margin-top:15px}.m-t-20{margin-top:20px}.m-t-30{margin-top:30px}.m-t-40{margin-top:40px}.m-b-0{margin-bottom:0}.m-b-5{margin-bottom:5px}.m-b-10{margin-bottom:10px}.m-b-15{margin-bottom:15px}.m-b-20{margin-bottom:20px}.m-b-30{margin-bottom:30px}.m-b-40{margin-bottom:40px}.m-l-0{margin-left:0}.m-l-5{margin-left:5px}.m-l-10{margin-left:10px}.m-l-15{margin-left:15px}.m-l-20{margin-left:20px}.m-l-30{margin-left:30px}.m-l-40{margin-left:40px}.m-r-0{margin-right:0}.m-r-5{margin-right:5px}.m-r-10{margin-right:10px}.m-r-15{margin-right:15px}.m-r-20{margin-right:20px}.m-r-30{margin-right:30px}.m-r-40{margin-right:40px}.m-x-0{margin-left:0;margin-right:0}.m-x-5{margin-left:5px;margin-right:5px}.m-x-10{margin-left:10px;margin-right:10px}.m-x-15{margin-left:15px;margin-right:15px}.m-x-20{margin-left:20px;margin-right:20px}.m-x-auto{margin-left:auto;margin-right:auto}.m-y-0{margin-top:0;margin-bottom:0}.m-y-5{margin-top:5px;margin-bottom:5px}.m-y-10{margin-top:10px;margin-bottom:10px}.m-y-15{margin-top:15px;margin-bottom:15px}.m-y-20{margin-top:20px;margin-bottom:20px}.p-0{padding:0}.p-5{padding:5px}.p-10{padding:10px}.p-15{padding:15px}.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}.p-t-0{padding-top:0}.p-t-5{padding-top:5px}.p-t-10{padding-top:10px}.p-t-15{padding-top:15px}.p-t-20{padding-top:20px}.p-t-30{padding-top:30px}.p-b-0{padding-bottom:0}.p-b-5{padding-bottom:5px}.p-b-10{padding-bottom:10px}.p-b-15{padding-bottom:15px}.p-b-20{padding-bottom:20px}.p-b-30{padding-bottom:30px}.p-l-0{padding-left:0}.p-l-5{padding-left:5px}.p-l-10{padding-left:10px}.p-l-15{padding-left:15px}.p-l-20{padding-left:20px}.p-l-30{padding-left:30px}.p-r-0{padding-right:0}.p-r-5{padding-right:5px}.p-r-10{padding-right:10px}.p-r-15{padding-right:15px}.p-r-20{padding-right:20px}.p-r-30{padding-right:30px}.p-x-0{padding-left:0;padding-right:0}.p-x-5{padding-left:5px;padding-right:5px}.p-x-10{padding-left:10px;padding-right:10px}.p-x-15{padding-left:15px;padding-right:15px}.p-x-20{padding-left:20px;padding-right:20px}.p-y-0{padding-top:0;padding-bottom:0}.p-y-5{padding-top:5px;padding-bottom:5px}.p-y-10{padding-top:10px;padding-bottom:10px}.p-y-15{padding-top:15px;padding-bottom:15px}.p-y-20{padding-top:20px;padding-bottom:20px}.mono{font-family:var(--m-mono);font-size:.86em}.muted{color:var(--m-fg-2)}.subtle{color:var(--m-fg-3)}.overline{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--m-fg-3)}.hidden{display:none!important}.m-flex{display:flex}.m-inline-flex{display:inline-flex}.m-flex-row{flex-direction:row}.m-flex-col{flex-direction:column}.m-flex-wrap{flex-wrap:wrap}.m-flex-nowrap{flex-wrap:nowrap}.m-flex-1{flex:1 1 0%;min-width:0}.m-flex-auto{flex:1 1 auto}.m-flex-none{flex:none}.m-grow{flex-grow:1}.m-shrink-0{flex-shrink:0}.m-basis-0{flex-basis:0}.m-items-start,.m-i-start{align-items:flex-start}.m-items-center,.m-i-center{align-items:center}.m-items-end,.m-i-end{align-items:flex-end}.m-items-stretch,.m-i-stretch{align-items:stretch}.m-items-baseline,.m-i-baseline{align-items:baseline}.m-self-start{align-self:flex-start}.m-self-center{align-self:center}.m-self-end{align-self:flex-end}.m-justify-start,.m-j-start{justify-content:flex-start}.m-justify-center,.m-j-center{justify-content:center}.m-justify-end,.m-j-end{justify-content:flex-end}.m-justify-between,.m-j-between{justify-content:space-between}.m-justify-around,.m-j-around{justify-content:space-around}.m-justify-evenly,.m-j-evenly{justify-content:space-evenly}.m-j-center-v{justify-content:center}.m-content-start{align-content:flex-start}.m-content-between{align-content:space-between}.m-content-center{align-content:center}.m-order-first{order:-1}.m-order-last{order:99}.m-gap-0{gap:0}.m-gap-xs{gap:.4rem}.m-gap-sm{gap:.65rem}.m-gap{gap:1rem}.m-gap-lg{gap:1.75rem}.m-gap-xl{gap:2.5rem}.m-gap-5{gap:5px}.m-gap-10{gap:10px}.m-gap-15{gap:15px}.m-gap-20{gap:20px}.m-gap-30{gap:30px}.m-gap-40{gap:40px}.m-gap-x-0{column-gap:0}.m-gap-x-xs{column-gap:.4rem}.m-gap-x-sm{column-gap:.65rem}.m-gap-x{column-gap:1rem}.m-gap-x-lg{column-gap:1.75rem}.m-gap-x-5{column-gap:5px}.m-gap-x-10{column-gap:10px}.m-gap-x-15{column-gap:15px}.m-gap-x-20{column-gap:20px}.m-gap-x-30{column-gap:30px}.m-gap-y-0{row-gap:0}.m-gap-y-xs{row-gap:.4rem}.m-gap-y-sm{row-gap:.65rem}.m-gap-y{row-gap:1rem}.m-gap-y-lg{row-gap:1.75rem}.m-gap-y-5{row-gap:5px}.m-gap-y-10{row-gap:10px}.m-gap-y-15{row-gap:15px}.m-gap-y-20{row-gap:20px}.m-gap-y-30{row-gap:30px}.m-grid{display:grid}.m-inline-grid{display:inline-grid}.m-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.m-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.m-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.m-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.m-grid-cols-auto-sm{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}.m-grid-cols-auto-lg{grid-template-columns:repeat(auto-fit,minmax(22rem,1fr))}.m-grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.m-grid-rows-3{grid-template-rows:repeat(3,minmax(0,1fr))}.m-grid-flow-dense{grid-auto-flow:row dense}.m-col-span-2{grid-column:span 2/span 2}.m-col-span-3{grid-column:span 3/span 3}.m-col-span-full{grid-column:1/-1}.m-row-span-2{grid-row:span 2/span 2}@media(max-width:640px){.m-grid-cols-2,.m-grid-cols-3,.m-grid-cols-4{grid-template-columns:1fr}.m-col-span-2,.m-col-span-3{grid-column:auto}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mates-css",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A compact pure-CSS UI kit. Design tokens, blue primary with hover/active ramps, automatic dark mode and flex & grid utilities. No JS.",
   "style": "mates.css",
   "main": "mates.min.css",
@@ -25,13 +25,13 @@
     "no-js",
     "micro-framework"
   ],
-  "homepage": "https://github.com/your-username/mates-css#readme",
+  "homepage": "https://github.com/thejsmaster/mates-css#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/your-username/mates-css.git"
+    "url": "git+https://github.com/thejsmaster/mates-css.git"
   },
   "bugs": {
-    "url": "https://github.com/your-username/mates-css/issues"
+    "url": "https://github.com/thejsmaster/mates-css/issues"
   },
   "license": "MIT",
   "author": "your-name",
@@ -44,6 +44,8 @@
       "default": "./mates.min.css"
     },
     "./min": "./mates.min.css",
+    "./mates.css": "./mates.css",
+    "./style.css": "./mates.css",
     "./package.json": "./package.json"
   },
   "devDependencies": {