lutra 0.0.20 → 0.1.0

package/dist/style.css

@@ -1,853 +0,0 @@
-@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;
-    --field-border-size: 1px;
-    --field-border-style: solid;
-    --focus-size: 2px;
-    --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.15);
-    /* border */
-    --l-border-color: hsl(215, 6%, 80%);
-    --l-border-subtle-color: hsl(215, 5%, 87%);
-    --l-focus-color: hsl(215, 60%, 55%);
-    --l-focus-color-error: hsl(353, 76%, 58%);
-    --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%, 40%);
-    --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-color: var(--l-border-color);
-    --l-field-border-color-error: var(--l-focus-color-error);
-    --l-field-border: var(--field-border-size) var(--field-border-style) var(--l-field-border-color);
-    --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-text: var(--text);
-    --l-menu-text-subtle: var(--text-subtle);
-    --l-menu-text-active: hsl(240, 2%, 15%);
-    /* 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;
-    /* scrollbar */
-    --l-scrollbar-color: hsl(215, 8%, 70%) hsl(215, 20%, 98%);
-
-    /**
-     * 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-focus-color-error: red;
-    --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-color: var(--d-border-color);
-    --d-field-border-color-error: red;
-    --d-field-border: var(--field-border-size) var(--field-border-style) var(--d-field-border-color);
-    --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-text: #ccc;
-    --d-menu-text-active: #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;
-    --d-scrollbar-color: hsl(215, 10%, 55%) hsla(215, 10%, 35%, 0.5);
-}
-
-@media(min-width: 1280px) {
-    :root {
-        --grid-size: 16px;
-    }
-}
-
-@media(max-width: 1280px) {
-    :root {
-        --grid-size: 14px;
-    }
-}
-
-@media(max-width: 640px) {
-    :root {
-        --grid-size: 13px;
-    }
-}
-
-body {
-    font-family: var(--font-family);
-    font-size: 100%;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    scrollbar-width: thin;
-    font-kerning: auto;
-    min-width: 280px;
-    overscroll-behavior: none;
-}
-
-body * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-html:has(.Layout .Theme.dark) {
-    --scrollbar-color: var(--d-scrollbar-color);
-}
-
-html:has(.Layout .Theme.light) {
-    --scrollbar-color: var(--l-scrollbar-color);
-}
-
-html, body, .app {
-    padding: 0;
-    margin: 0;
-    inline-size: 100%;
-    min-block-size: 100%;
-    block-size: 100%;
-    scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-color);
-    scrollbar-gutter: stable;
-}
-
-html {
-    font-size: 1rem;
-}
-
-html, body {
-    overscroll-behavior-x: none;
-}
-
-input, textarea, select, button {
-    touch-action: manipulation;
-    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);
-}
-
-.scrollbar {
-    width: 8px;
-    height: 100%;
-    background: transparent;
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1000;
-}
-
-.scrollbar .grabber {
-    width: calc(100% - 2px);
-    height: 100px;
-    background: var(--text);
-    cursor: grab;
-    border-radius: 9999px;
-    position: absolute;
-    left: 1px;
-}
-
-/**
- * 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;
-}
-
-hr {
-    border: 0;
-    border-top: var(--border);
-    box-sizing: content-box;
-}
-
-/**
- * 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;
-}
-
-input:user-invalid {
-    border-color: var(--field-border-color-error);
-}
-
-input:user-invalid:focus-visible {
-    outline-color: var(--focus-color-error);
-}
-
-select {
-    padding-right: 2.25em;
-    appearance: none;
-    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+Cjxzdmcgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM6c2VyaWY9Imh0dHA6Ly93d3cuc2VyaWYuY29tLyIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyOyI+CiAgICA8ZyB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1LDAsMCwxLDAsMCkiPgogICAgICAgIDxwYXRoIGQ9Ik0xNiwwTDAsMEw4LDhMMTYsMFoiLz4KICAgIDwvZz4KPC9zdmc+Cg==') calc(100% - 0.75em) 50% no-repeat;
-    background-size: 12px;
-}
-
-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,
-::file-selector-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: calc(0.5rem * var(--margin-scale, 1)); }
-    .button.lg { margin-block-start: calc(0.75rem * var(--margin-scale, 1)); }
-    .button.xl { margin-block-start: calc(1rem * var(--margin-scale, 1)); }
-    .button:has(+.button) { margin-inline-end: calc(0.5rem * var(--margin-scale, 1)); }
-    .button.lg:has(+.button) { margin-inline-end: calc(1rem * var(--margin-scale, 1)); }
-    .button.xl:has(+.button) { margin-inline-end: calc(1.5rem * var(--margin-scale, 1)); }
-
-    p { margin-block: calc(0.75rem * var(--margin-scale, 1)); }
-    h1 { margin-block: calc(3rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1)); }
-    h2 { margin-block: calc(3rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1)); }
-    h1+h2 {
-        margin-block-start: 0;
-    }
-    h1:has(+h2) {
-        margin-block-end: calc(0.75rem * var(--margin-scale, 1));
-    }
-    h3 {
-        margin-block: calc(2rem * var(--margin-scale, 1)) calc(1.5rem * var(--margin-scale, 1));
-    }
-    h3:has(+p, +ul, +ol) {
-        margin-block-end: calc(0.75rem * var(--margin-scale, 1));
-    }
-    h4,
-    h5 {
-        margin-block: calc(1.5rem * var(--margin-scale, 1)) calc(0.5rem * var(--margin-scale, 1));
-    }
-    p {
-        hyphens: auto;
-    }
-
-    ul, ol {
-        margin-block: calc(1.5rem * var(--margin-scale, 1));
-    }
-    ul {
-        list-style-type: "–  ";
-        list-style-position: outside;
-    }
-    li {
-        margin-block: calc(0.5em * var(--margin-scale, 1));
-    }
-    @media(max-width: 960px) {
-        ul, ol {
-            list-style-position: inside;
-        }
-        ul {
-            margin-inline-start: 0;
-        }
-        ul li:before {
-            margin-inline-start: calc(0.5rem * var(--margin-scale, 1));
-        }
-    }
-    li p {
-        margin-block: calc(0.5rem * var(--margin-scale, 1));
-    }
-    li:not(:last-child) p:last-child {
-        margin-block-end: calc(0.85em * var(--margin-scale, 1));
-    }
-    ul:has(+p), ol:has(+p) {
-        margin-block-end: calc(1em * var(--margin-scale, 1));
-    }
-
-    p+ul, p+ol {
-        margin-block-start: calc(1em * var(--margin-scale, 1));
-    }
-
-    h3+p,
-    h3+ul,
-    h3+ol {
-        margin-block-start: calc(1em * var(--margin-scale, 1));
-    }
-
-    h4+p,
-    h4+ul,
-    h4+ol {
-        margin-block-start: calc(0.75em * var(--margin-scale, 1));
-    }
-
-    h5+p,
-    h5+ul,
-    h5+ol {
-        margin-block-start: calc(0.5em * var(--margin-scale, 1));
-    }
-
-    /** Links */
-    a:hover:not(.button),
-    a:focus-visible:not(.button) {
-        text-decoration: underline;
-    }
-
-    /** Dividers */
-    hr {
-        margin-block: calc(2em * var(--margin-scale, 1));
-        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: calc(1.5em * var(--margin-scale, 1));
-        border-collapse: collapse;
-        font-size: var(--font-size, 1em);
-    }
-    table.fullWidth {
-        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-spacing: 0;
-    }
-    tr {
-        border-block-end: var(--border-subtle);
-    }
-    th,
-    td {
-        font-size: 1em;
-        line-height: 1.5;
-        padding: var(--padding, 0.5em 0.75em);
-        text-align: start;
-    }
-    td.actions {
-        min-width: 0px;
-        width: 0px;
-    }
-    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;
-    }
-    table.colored tbody tr:nth-child(2n) {
-        background-color: var(--bg-subtle);
-    }
-    table.contained th,
-    table.contained td {
-        border-inline-end: var(--border-subtle);
-    }
-    table tbody tr:last-of-type {
-        border-block-end: none;
-    }
-    table thead tr {
-        background-color: var(--bg-subtle);
-    }
-
-    /** Forms */
-    fieldset label,
-    fieldset input {
-        margin-block-end: calc(0.5rem * var(--margin-scale, 1));
-    }
-
-    /** Blockquote */
-    blockquote {
-        margin-block: calc(1.5rem * var(--margin-scale, 1));
-        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;
-    }
-}