lutra 0.0.1

package/dist/style.css

@@ -0,0 +1,787 @@
+@font-face {
+    font-family: InterVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url("/InterVariable.woff2") format("woff2");
+}
+@font-face {
+    font-family: InterVariable;
+    font-style: italic;
+    font-weight: 100 900;
+    src: url("/InterVariable-Italic.woff2") format("woff2");
+}
+@font-face {
+    font-family: InconsolataVariable;
+    font-style: normal;
+    font-weight: 100 900;
+    src: url("/InconsolataVariable.woff2") format("woff2");
+}
+
+:root {
+    /* The base grid size is used to calculate sizes */
+    --grid-size: 16px;
+    /* Default font family */
+    --font-family: InterVariable, sans-serif;
+    --font-family-mono: 'InconsolataVariable';
+    font-optical-sizing: auto;
+    font-kerning: auto;
+    --border-radius: 0.5em;
+    --field-radius: 0.35em;
+    --border-size: 1px;
+    --border-style: solid;
+    --focus-size: 5px;
+    --mix-amount: 80%; 
+    /* Transitions */
+    --menu-trans: 0.1s ease-in-out;
+    /**
+     * Light theme
+     */
+    --l-mix-target: hsl(215, 0%, 5%);
+    /* bg */
+    --l-bg-app: hsl(215, 3%, 99.5%);
+    --l-bg-subtle: hsl(240, 7%, 97%);
+    --l-bg-overlay: rgba(255,255,255,0.85);
+    --l-shadow: rgba(0, 0, 0, 0.1);
+    /* border */
+    --l-border-color: hsl(215, 6%, 80%);
+    --l-border-subtle-color: hsl(215, 5%, 87%);
+    --l-focus-color: hsl(215, 60%, 55%);
+    --l-border: var(--border-size) var(--border-style) var(--l-border-color);
+    --l-border-subtle: var(--border-size) var(--border-style) var(--l-border-subtle-color);
+    --l-focus-outline: var(--focus-size) solid var(--l-focus-color);
+    /* text */
+    --l-text: hsl(240, 2%, 20%);
+    --l-text-subtle: hsl(240, 2%, 44%);
+    --l-text-highlight: hsl(206, 99%, 47%);
+    --l-text-heading: hsl(240, 3%, 12%);
+    --l-text-link: hsl(215, 70%, 55%);
+    --l-text-warn: #e74c3c;
+    --l-text-icon: #666;
+    --l-text-subtle-icon: #999;
+    --l-text-warn-icon: #e74c3c;
+    /* fields */
+    --l-field-bg: transparent;
+    --l-field-border: var(--l-border);
+    --l-field-text: var(--l-text);
+    --l-field-placeholder: #999;
+    --l-field-label: #333;
+    /* toggle */
+    --l-toggle-on: #0187ed;
+    --l-toggle-off: #ccc;
+    /* buttons */
+    --l-button-bg: hsl(215, 70%, 50%);
+    --l-button-text: white;
+    --l-button-border-color: var(--l-button-bg);
+    --l-button-border: var(--border-size) var(--border-style) var(--l-button-border-color);
+    /* buttons: disabled */
+    --l-button-disabled-bg: hsl(215, 3%, 50%);
+    --l-button-disabled-text: #fafafa;
+    --l-button-disabled-border-color: var(--l-button-disabled-bg);
+    --l-button-disabled-border: var(--border-size) var(--border-style) var(--l-button-disabled-border-color);
+    /* buttons: outlined */
+    --l-button-outlined-text: hsl(215, 3%, 30%);
+    --l-button-outlined-border-color: hsl(215, 3%, 50%);
+    --l-button-outlined-border: var(--border-size) var(--border-style) var(--l-button-outlined-border-color);
+    /* buttons: secondary (for highlighted actions) */
+    --l-button-secondary-bg: hsl(132, 94%, 32%);
+    --l-button-secondary-text: white;
+    --l-button-secondary-border-color: var(--l-button-secondary-bg);
+    --l-button-secondary-border: var(--border-size) var(--border-style) var(--l-button-secondary-border-color);
+    /* buttons: warn */
+    --l-button-warn-bg: #e74c3c;
+    --l-button-warn-text: white;
+    --l-button-warn-border-color: var(--l-button-warn-bg);
+    --l-button-warn-border: var(--border-size) var(--border-style) var(--l-button-warn-border-color);
+    /* warn */
+    --l-warn-bg: #ffbc04;
+    --l-warn-border: #b58500;
+    --l-warn-text: #3f2f00;
+    /* success */
+    --l-success-bg: #e6ffed;
+    --l-success-border: #a3e7c5;
+    --l-success-text: rgb(29, 69, 29);
+    /* error */
+    --l-error-bg: #ffdede;
+    --l-error-border: #df8888;
+    --l-error-text: rgb(115, 37, 37);
+    /* info */
+    --l-info-bg: #e6f7ff;
+    --l-info-border: #a3e7ff;
+    --l-info-text: rgb(29, 69, 69);
+    /* menu */
+    --l-menu-bg: #fff;
+    --l-menu-bg-active: hsl(215, 25%, 90%);
+    --l-menu-bg-hover: hsl(215, 20%, 95%);
+    --l-menu-border: var(--l-border-subtle);
+    --l-menu-link: #666;
+    --l-menu-link-hover: #333;
+    --l-menu-link-active: #333;
+    --l-menu-link-active-hover: #333;
+    /* status colors */
+    --l-status-default: hsl(215, 20%, 85%);
+    --l-status-ok: #28a745;
+    --l-status-alert: #dc3545;
+    --l-status-warn: #ffc107;
+    --l-status-info: #038ac8;
+    --l-status-task: #007bff;
+
+    /**
+     * Dark theme
+     */
+    --d-mix-target: hsl(215, 3%, 3%);
+    /* bg */
+    --d-bg-app: #121212;
+    --d-bg-subtle: hsl(215, 3%, 15%);
+    --d-bg-overlay: rgba(0, 0, 0, 0.85);
+    --d-shadow: rgba(0, 0, 0, 0.3);
+    /* border */
+    --d-border-color: hsl(215, 8%, 30%);
+    --d-border-subtle-color: hsl(215, 5%, 25%);
+    --d-focus-color: rgb(77, 144, 254);
+    --d-border: var(--border-size) var(--border-style) var(--d-border-color);
+    --d-border-subtle: var(--border-size) var(--border-style) var(--d-border-subtle-color);
+    --d-focus-outline: var(--focus-size) solid var(--d-focus-color);
+    /* text */
+    --d-text: #ccc;
+    --d-text-subtle: #a1a1a6;
+    --d-text-highlight: #4C9AFF;
+    --d-text-heading: #e1e1e3;
+    --d-text-link: rgb(77, 144, 254);
+    --d-text-link-hover: rgb(58, 109, 193);
+    --d-text-warn: #ff6b6b;
+    --d-text-icon: #bbb;
+    --d-text-subtle-icon: #888;
+    --d-text-warn-icon: #ff6b6b;
+    /* fields */
+    --d-field-bg: transparent;
+    --d-field-border: var(--d-border);
+    --d-field-text: var(--d-text);
+    --d-field-placeholder: #666;
+    --d-field-label: #ccc;
+    /* toggle */
+    --d-toggle-on: #4C9AFF;
+    --d-toggle-on-hover: #3771c1;
+    --d-toggle-off: #666;
+    --d-toggle-off-hover: #888;
+    /* buttons */
+    --d-button-bg: #4C9AFF;
+    --d-button-text: white;
+    --d-button-border-color: var(--d-button-bg);
+    --d-button-border: var(--border-size) var(--border-style) var(--d-button-border-color);
+    /* buttons: disabled */
+    --d-button-disabled-bg: #555;
+    --d-button-disabled-text: #333;
+    --d-button-disabled-border-color: var(--d-button-disabled-bg);
+    --d-button-disabled-border: var(--border-size) var(--border-style) var(--d-button-disabled-border-color);
+    /* buttons: outlined */
+    --d-button-outlined-text: #ccc;
+    --d-button-outlined-border-color: var(--d-button-outlined-text);
+    --d-button-outlined-border: var(--border-size) var(--border-style) var(--d-button-outlined-border-color);
+    /* buttons: secondary (for highlighted actions) */
+    --d-button-secondary-bg: hsl(146, 67%, 38%);
+    --d-button-secondary-text: white;
+    --d-button-secondary-border-color: var(--d-button-secondary-bg);
+    --d-button-secondary-border: var(--border-size) var(--border-style) var(--d-button-secondary-border-color);
+    /* buttons: warn */
+    --d-button-warn-bg: #ff6b6b;
+    --d-button-warn-text: white;
+    --d-button-warn-border-color: var(--d-button-warn-bg);
+    --d-button-warn-border: var(--border-size) var(--border-style) var(--d-button-warn-border-color);
+    /* warn */
+    --d-warn-bg: #ffb900;
+    --d-warn-border: #cc9500;
+    --d-warn-text: #664d00;
+    /* success */
+    --d-success-bg: #4caf50;
+    --d-success-border: #397d3f;
+    --d-success-text: #e8f5e9;
+    /* error */
+    --d-error-bg: #f44336;
+    --d-error-border: #d32f2f;
+    --d-error-text: #ffebee;
+    /* info */
+    --d-info-bg: #2196f3;
+    --d-info-border: #1976d2;
+    --d-info-text: #e3f2fd;
+    /* menu */
+    --d-menu-bg: #2c2c2c;
+    --d-menu-bg-active: #444;
+    --d-menu-bg-hover: #444;
+    --d-menu-border: var(--d-border-subtle);
+    --d-menu-link: #ccc;
+    --d-menu-link-hover: #fff;
+    --d-menu-link-active: #fff;
+    --d-menu-link-active-hover: #fff;
+    /* status colors */
+    --d-status-default: hsl(215, 10%, 25%);
+    --d-status-ok: #4caf50;
+    --d-status-alert: #f44336;
+    --d-status-warn: #ffeb3b;
+    --d-status-info: #0362c8;
+    --d-status-task: #1e88e5;
+}
+
+@media(max-width: 1280px) {
+    :root {
+        --grid-size: 16px;
+    }
+}
+
+@media(max-width: 1024px) {
+    :root {
+        --grid-size: 14px;
+    }
+}
+
+@media(max-width: 480px) {
+    :root {
+        --grid-size: 13px;
+    }
+}
+
+body {
+    font-family: var(--font-family);
+    font-size: var(--grid-size);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scrollbar-width: thin;
+    font-kerning: auto;
+    scrollbar-gutter: stable both-edges;
+    min-width: 280px;
+}
+
+body * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body, .app {
+    padding: 0;
+    margin: 0;
+    inline-size: 100%;
+    min-block-size: 100%;
+    block-size: 100%;
+}
+
+html {
+    font-size: 1rem;
+}
+
+html, body {
+    overscroll-behavior-x: none;
+}
+
+input, textarea, select, button {
+    font-family: var(--font-family);
+}
+
+*:focus-visible {
+    transition: outline 0.1s;
+    outline: 3px solid var(--focus-color);
+    outline-offset: 0;
+    -webkit-outline-offset: 0;
+    transform: translateZ(0);
+}
+
+/**
+ * Typography
+ */
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family);
+    margin: 0;
+    color: var(--text-heading);
+}
+
+
+/**
+ * Use system font on iOS devices
+ */
+@supports (font: -apple-system-body) {
+    body {
+        font: -apple-system-body;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        font: -apple-system-headline;
+    }
+    input, p, li, textarea, select, button {
+        font: -apple-system-body;
+    }
+}
+
+h1 {
+    font-size: 2em;
+    font-weight: 700;
+    text-wrap: balance;
+}
+
+h2 {
+    font-size: 1.75em;
+    font-weight: 650;
+    text-wrap: balance;
+}
+
+h3 {
+    font-size: 1.5em;
+    font-weight: 650;
+}
+
+h4 {
+    font-size: 1.25em;
+    font-weight: 600;
+}
+
+h5 {
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 500;
+}
+
+h6 {
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 500;
+}
+
+p, th, td, li:not(:has(p)) {
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 400;
+    color: var(--text);
+}
+
+small {
+    font-size: 0.85em;
+    line-height: 1.5;
+    font-weight: 400;
+    color: var(--text-subtle);
+    display: block;
+}
+
+strong {
+    color: var(--text-heading);
+    font-weight: 500;
+}
+
+code, pre {
+    font-family: var(--font-family-mono);
+    font-weight: 400;
+}
+
+/**
+ * Links
+ */
+
+a {
+    color: var(--text-link);
+    text-decoration: none;
+}
+
+a:hover {
+    color: color-mix(in hsl shorter hue, var(--text-link) var(--mix-amount), var(--mix-target));
+}
+
+/**
+ * Forms
+ */
+
+form {
+    margin: 0;
+    padding: 0;
+}
+
+fieldset {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    border-radius: var(--border-radius);
+}
+
+fieldset.contained {
+    border: var(--border);
+    padding: 0.5rem;
+}
+
+fieldset legend {
+    color: var(--text-heading);
+    font-weight: 600;
+}
+
+input, textarea, select {
+    font-size: 1em;
+    line-height: 1.5;
+    font-weight: 400;
+    color: var(--field-text);
+    background-color: var(--field-bg);
+    border: var(--field-border);
+    border-radius: var(--field-radius);
+    padding: 0.5em 0.75em;
+    transition: border-color 0.1s;
+}
+
+select {
+    padding-right: 2em;
+    appearance: none;
+    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1LDAsMCwxLDAsMCkiPgogICAgICAgIDxwYXRoIGQ9Ik0xNiwwTDAsMEw4LDhMMTYsMFoiLz4KICAgIDwvZz4KPC9zdmc+Cg==') calc(100% - 0.65em) 50% no-repeat;
+    background-size: 10px;
+}
+
+input[type="submit"],
+input[type="button"] {
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    border-radius: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    cursor: pointer;
+    width: 1.35em;
+    height: 1.35em;
+    accent-color: var(--focus-color);
+    transition: accent-color 0.1s, scale 0.1s;
+}
+
+input[type="checkbox"]:hover,
+input[type="radio"]:hover {
+    border: var(--field-border);
+    opacity: 1;
+}
+
+input[type="checkbox"]:active,
+input[type="radio"]:active {
+    accent-color: color-mix(in srgb, var(--focus-color) var(--mix-amount), var(--mix-target));
+}
+
+input[type="checkbox"]:focus-visible,
+input[type="radio"]:focus-visible {
+    border: var(--field-border);
+}
+
+label {
+    color: var(--field-label);
+    font-size: max(0.85em, 12px);
+    line-height: 1.5;
+    font-weight: 500;
+    display: block;
+}
+
+label:has(+input[type="checkbox"]),
+label:has(+input[type="radio"]) {
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: 400;
+}
+
+/**
+ * Buttons
+ */
+
+button {
+    background: none;
+    border: none;
+    padding: 0;
+}
+
+.button {
+    font-size: var(--font-size, 1em);
+    line-height: 1.5;
+    font-weight: 500;
+    background-color: var(--button-bg);
+    color: var(--button-text);
+    padding: var(--padding, 0.5em 1.3em);
+    border-radius: var(--field-radius);
+    border: var(--button-border);
+    cursor: pointer;
+    display: inline-flex;
+    transition: transform 0.1s, background-color 0.1s, color 0.1s, border-color 0.1s, scale 0.1s;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.button:hover {
+    color: var(--button-text);
+    background-color: color-mix(in srgb, var(--button-bg) var(--mix-amount), var(--mix-target));
+    border-color: color-mix(in srgb, var(--button-border-color) var(--mix-amount), var(--mix-target));
+}
+
+button:active,
+.button:active {
+    scale: 0.95;
+}
+
+.button.sm {
+    --font-size: 0.75em;
+    --padding: 0.35em 0.75em;
+}
+
+.button.lg {
+    --font-size: 1.15em;
+    --padding: 0.65em 1.25em;
+}
+
+.button.xl {
+    --font-size: 1.25em;
+    --padding: 0.75em 1.5em;
+}
+
+.button.outlined {
+    background-color: transparent;
+    color: var(--button-outlined-text);
+    border: var(--button-outlined-border);
+}
+
+.button.outlined:hover {
+    border-color: color-mix(in srgb, var(--button-outlined-border-color) 50%, var(--mix-target));
+}
+
+.button.secondary {
+    background-color: var(--button-secondary-bg);
+    border: var(--button-secondary-border);
+}
+
+.button.secondary:hover {
+    background-color: color-mix(in srgb, var(--button-secondary-bg) var(--mix-amount), var(--mix-target));
+    border-color: color-mix(in srgb, var(--button-secondary-border-color) var(--mix-amount), var(--mix-target));
+}
+
+.button.warn {
+    background-color: var(--button-warn-bg);
+    border: var(--button-warn-border);
+}
+
+.button.warn:hover {
+    background-color: color-mix(in srgb, var(--button-warn-bg) var(--mix-amount), var(--mix-target));
+    border-color: color-mix(in srgb, var(--button-warn-border-color) var(--mix-amount), var(--mix-target));
+}
+
+@scope (.PageContent) to (.UIContent) {
+        
+    .button { margin-block-start: 0.5rem; }
+    .button.lg { margin-block-start: 0.75rem; }
+    .button.xl { margin-block-start: 1rem; }
+    .button:has(+.button) { margin-inline-end: 0.5rem; }
+    .button.lg:has(+.button) { margin-inline-end: 1rem; }
+    .button.xl:has(+.button) { margin-inline-end: 1.5rem; }
+
+    p { margin-block: 0.75rem; }
+    h1 { margin-block: 3rem 1.5rem; }
+    h2 { margin-block: 3rem 1.5rem; }
+    h1+h2 {
+        margin-block-start: 0;
+    }
+    h1:has(+h2) {
+        margin-block-end: 0.75rem;
+    }
+    h3 { margin-block: 2rem 1.5rem; }
+    h3:has(+p, +ul, +ol) {
+        margin-block-end: 0.75rem;
+    }
+    h4,
+    h5 {
+        margin-block: 1.5rem 0.5rem;
+    }
+    p {
+        hyphens: auto;
+    }
+
+    ul, ol {
+        margin-block: 1.5rem;
+    }
+    ul {
+        list-style-type: "–  ";
+        list-style-position: outside;
+    }
+    li {
+        margin-block: 0.5em;
+    }
+    @media(max-width: 960px) {
+        ul, ol {
+            list-style-position: inside;
+        }
+        ul {
+            margin-inline-start: 0;
+        }
+        ul li:before {
+            margin-inline-start: 0.5rem;
+        }
+    }
+    li p {
+        margin-block: 0.5rem;
+    }
+    li:not(:last-child) p:last-child {
+        margin-block-end: 0.85em;
+    }
+    ul:has(+p), ol:has(+p) {
+        margin-block-end: 1em;
+    }
+
+    p+ul, p+ol {
+        margin-block-start: 1em;
+    }
+
+    h3+p,
+    h3+ul,
+    h3+ol {
+        margin-block-start: 1em;
+    }
+
+    h4+p,
+    h4+ul,
+    h4+ol {
+        margin-block-start: 0.75em;
+    }
+
+    h5+p,
+    h5+ul,
+    h5+ol {
+        margin-block-start: 0.5em;
+    }
+
+    /** Links */
+    a:hover:not(.button),
+    a:focus-visible:not(.button) {
+        text-decoration: underline;
+    }
+
+    /** Dividers */
+    hr {
+        margin-block: 2em;
+        border-top: var(--border-subtle);
+    }
+
+    /** Code */
+    p > code,
+    li > code {
+        padding: 0.15em 0.35em;
+        background-color: var(--bg-subtle);
+        border-radius: var(--border-radius);
+        border: var(--border-subtle);
+        color: var(--text);
+        font-weight: 450;
+    }
+    pre {
+        color: var(--text);
+        font-size: 1em;
+        line-height: 1.35;
+        background-color: var(--bg-subtle);
+        border-radius: var(--border-radius);
+        border: var(--border-subtle);
+        overflow-x: auto;
+        inline-size: calc(100% + 2rem);
+        box-sizing: border-box;
+        display: grid;
+        margin-block: 1.5rem;
+        margin-inline: -1rem;
+        overflow-wrap: break-word;
+        word-break: break-word;
+    }
+    pre code {
+        box-sizing: border-box;
+        display: block;
+        padding: 1rem;
+        font-weight: 450;
+        color: var(--text);
+        box-sizing: border-box;
+        overflow-x: auto;
+        width: 100%;
+    }
+    :first-child {
+        margin-block-start: 0;
+    }
+    :last-child {
+        margin-block-end: 0;
+    }
+
+    /** Tables */
+    table {
+        margin-block: 1.5em;
+        border-collapse: collapse;
+    }
+    table.full {
+        width: 100%;
+    }
+    table.contained {
+        border: var(--border);
+    }
+    table.hang {
+        margin-inline: -1rem;
+        inline-size: calc(100% + 2rem);
+    }
+    table.sm {
+        --font-size: 0.85em;
+        --padding: 0.5rem;
+    }
+    table.rounded {
+        border-radius: var(--border-radius);
+        overflow: clip;
+        border-collapse: separate;
+        border-spacing: 0;
+    }
+    th {
+    }
+    th,
+    td {
+        padding: var(--padding, 0.5rem 0.75rem);
+        text-align: start;
+        border-inline-end: var(--border-subtle);
+        border-block-end: var(--border-subtle);
+        font-size: var(--font-size, 1em);
+    }
+    table.hang th:first-of-type,
+    table.hang td:first-of-type {
+        padding-inline: 1rem;
+    }
+    table.hang th:last-of-type,
+    table.hang td:last-of-type {
+        padding-inline: 1rem;
+    }
+    th:last-child,
+    td:last-child {
+        border-inline-end: none;
+    }
+    th {
+        font-weight: 700;
+        border-block-end: var(--border);
+        border-inline-end: var(--border);
+    }
+    table.color tr:nth-child(2n) {
+        background-color: var(--bg-subtle);
+    }
+    table tr:last-child td {
+        border-block-end: none;
+    }
+
+    /** Forms */
+    fieldset label,
+    fieldset input {
+        margin-block-end: 0.5rem;
+    }
+
+    /** Blockquote */
+    blockquote {
+        margin-block: 1.5rem;
+        padding: 1.5rem 1.5rem;
+        inline-size: calc(100% + 2rem);
+        margin-inline: -1rem;
+        border-inline-start: 4px solid var(--border-subtle-color);
+        background-color: var(--bg-subtle);
+    }
+}
+
+@media(prefers-reduced-motion: reduce) {
+    * {
+        transition-duration: 0s !important;
+    }
+
+    button:active,
+    .button:active {
+        scale: initial;
+    }
+}