Add modern theme

1 files changed, 970 insertions, 0 deletions

diff --git a/src/ui/theme-files/modern/theme.css b/src/ui/theme-files/modern/theme.css
new file mode 100644
index 0000000..094e7fc
--- /dev/null
+++ b/src/ui/theme-files/modern/theme.css
@@ -0,0 +1,970 @@
+@font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('/ui/theme-files/modern/InterVariable.woff2?v=4.0') format('woff2');
+}
+@font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url('/ui/theme-files/modern/InterVariable-Italic.woff2?v=4.0') format('woff2');
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+:root {
+    color-scheme: light dark;
+    scroll-behavior: smooth;
+    accent-color: var(--color--primary);
+
+    --header-height: 52px;
+    --border-radius: 0;
+
+    --font-family--sans-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-family--monospace: ui-monospace, monospace;
+    --font-size--base: 11pt;
+
+    --color--primary: #07d;
+    --color--info: #0ac;
+    --color--success: #0c8;
+    --color--warning: #d90;
+    --color--danger: #c08;
+    --color--muted: #707d8a;
+
+    --color--background: #fff;
+    --color--text: #000;
+    --color--links: var(--color--primary);
+    
+    --color--btn--default-bg: #000;
+    --color--btn--default-fg: #fff;
+
+    --color--btn--primary-bg: var(--color--primary);
+    --color--btn--primary-fg: #fff;
+
+    --color--btn--info-bg: var(--color--info);
+    --color--btn--info-fg: #000;
+
+    --color--btn--success-bg: var(--color--success);
+    --color--btn--success-fg: #000;
+
+    --color--btn--warning-bg: var(--color--warning);
+    --color--btn--warning-fg: #000;
+
+    --color--btn--danger-bg: var(--color--danger);
+    --color--btn--danger-fg: #fff;
+
+    --widget--border-width: 1px;
+    --widget--border-color: #bbb;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color--primary: #9cf;
+        --color--info: #9ef;
+        --color--success: #9fa;
+        --color--warning: #fd9;
+        --color--danger: #f9b;
+        --color--muted: #97a3af;
+
+        --color--background: #0b0b0b;
+        --color--text: #e1e1e1;
+        
+        --color--btn--default-bg: #fff;
+        --color--btn--default-fg: #000;
+
+        --color--btn--primary-fg: #000;
+        --color--btn--danger-fg: #000;
+
+        --widget--border-color: #3b3b3b;
+
+        select {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e1e1e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+        }
+    }
+}
+
+html {
+    height: 100%;
+}
+
+body {
+    min-height: 100%;
+
+    background: var(--color--background);
+    color: var(--color--text);
+
+    display: grid;
+    max-inline-size: 1000px;
+    margin-inline: auto;
+    margin-block: 0;
+    grid-template: "header" max-content
+                   "main" minmax(0, 1fr)
+                   "footer" max-content
+                 / minmax(0, 1fr);
+    font: var(--font-size--base) var(--font-family--sans-serif);
+    font-optical-sizing: auto;
+    box-shadow: calc(var(--widget--border-width) * -1) 0 0 var(--widget--border-color),
+                var(--widget--border-width) 0 0 var(--widget--border-color);
+}
+
+[hidden] {
+    display: none !important;
+}
+
+h1,
+.h1 {
+    font-size: 2em;
+    font-weight: 200;
+}
+
+a {
+    color: var(--color--links);
+}
+
+:focus-visible {
+    outline: 1px solid var(--_focus-color, var(--_bg, var(--color--primary)));
+    outline-offset: 2px;
+}
+
+header {
+    grid-area: header;
+    display: grid;
+    grid-template: "brand nav" minmax(0, 1fr)
+                 / max-content minmax(0, 1fr);
+    /* padding: 16px 8px; */
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    position: sticky;
+    top: 0;
+    background: var(--color--background);
+    z-index: 3;
+    height: var(--header-height);
+    align-items: stretch;
+}
+#brand {
+    display: block;
+    grid-area: brand;
+    align-content: center;
+    margin-left: 16px;
+    font-weight: 400;
+    text-decoration: none;
+    color: inherit;
+}
+nav {
+    display: flex;
+    justify-content: end;
+    align-items: stretch;
+    grid-area: nav;
+    padding-right: 8px;
+    >p {
+        margin: 0;
+        align-content: center;
+    }
+    >a {
+        padding: 16px 8px;
+        color: inherit;
+        text-decoration: none;
+        align-content: center;
+        &:hover {
+            background-color: rgb(from var(--color--text) r g b / 10%);
+        }
+        >svg {
+            display: block;
+        }
+        &.active {
+            box-shadow: calc(var(--widget--border-width) * -1) 0 0 var(--widget--border-color),
+                        var(--widget--border-width) 0 0 var(--widget--border-color);
+        }
+    }
+    >* {
+        display: block;
+    }
+}
+main {
+    grid-area: main;
+    padding: 8px;
+}
+footer {
+    grid-area: footer;
+    display: grid;
+    grid-template: "about prefs" minmax(0, 1fr)
+                 / minmax(0, 1fr) max-content;
+    align-items: center;
+    padding: 16px;
+    border-top: var(--widget--border-width) solid var(--widget--border-color);
+    #about {
+        grid-area: about;
+    }
+    #preferences {
+        grid-area: prefs;
+    }
+}
+.form-group {
+    display: flex;
+    flex-direction: column;
+    margin-block: 8px;
+    label {
+        /* font-size: 80%;
+        font-weight: bold; */
+        align-self: start;
+    }
+    >input, >select, >textarea, >.input {
+        align-self: stretch;
+        width: 100%;
+        display: block;
+    }
+    &.form-actions {
+        flex-direction: row;
+        justify-content: start;
+        align-items: center;
+        gap: 8px;
+    }
+    &.form-additional {
+        display: block;
+    }
+}
+.form-inline {
+    display: inline-flex;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 8px;
+    .form-group {
+        margin: 0;
+        flex-direction: row;
+        align-items: center;
+        label {
+            margin-right: 0.25em;
+        }
+        >* {
+            align-self: unset;
+        }
+    }
+}
+
+.main-form {
+    max-inline-size: 480px;
+    margin-inline: auto;
+    margin-top: 32px;
+}
+
+input:is(
+    :not([type]),
+    [type="text"],
+    [type="email"],
+    [type="password"],
+    [type="search"],
+    [type="number"]
+),
+textarea,
+select {
+    appearance: none;
+    border: var(--widget--border-width) solid var(--widget--border-color);
+    background: none;
+    font: inherit;
+    border-radius: var(--border-radius);
+    padding: 6px;
+
+    &:focus-visible {
+        background-color: rgb(from var(--color--primary) r g b / 10%);
+    }
+}
+
+select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-size: 16px 16px;
+    background-repeat: no-repeat;
+    background-position: right 4px center;
+    padding-right: 24px;
+}
+
+button,
+input:is(
+    [type="button"],
+    [type="submit"],
+    [type="reset"]
+),
+.btn {
+    appearance: none;
+    background: none;
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--font-family--sans-serif);
+    font-weight: 800;
+    font-size: var(--font-size--base);
+    gap: 0.25em;
+    text-decoration: none;
+    padding: 6px 16px;
+    border-radius: var(--border-radius);
+    border: var(--widget--border-width) solid var(--widget--border-color);
+    cursor: pointer;
+    color: var(--color--text);
+
+    &:hover {
+        background-color: rgb(from var(--color--text) r g b / 10%);
+    }
+
+    &.btn-link {
+        border-color: transparent;
+        color: var(--color--links);
+
+        text-decoration: underline;
+        font-weight: inherit;
+    }
+
+    &.btn-default {
+        --_bg: var(--color--btn--default-bg);
+        --_fg: var(--color--btn--default-fg);
+    }
+    &.btn-primary {
+        --_bg: var(--color--btn--primary-bg);
+        --_fg: var(--color--btn--primary-fg);
+    }
+    &.btn-info {
+        --_bg: var(--color--btn--info-bg);
+        --_fg: var(--color--btn--info-fg);
+    }
+    &.btn-success {
+        --_bg: var(--color--btn--success-bg);
+        --_fg: var(--color--btn--success-fg);
+    }
+    &.btn-warning {
+        --_bg: var(--color--btn--warning-bg);
+        --_fg: var(--color--btn--warning-fg);
+    }
+    &.btn-danger {
+        --_bg: var(--color--btn--danger-bg);
+        --_fg: var(--color--btn--danger-fg);
+    }
+
+    &:is(
+        .btn-default,
+        .btn-primary,
+        .btn-info,
+        .btn-success,
+        .btn-warning,
+        .btn-danger
+    ) {
+        box-shadow: none;
+        background: var(--_bg);
+        border-color: var(--_bg);
+        color: var(--_fg);
+        &:hover {
+            border-color: hsl(from var(--_bg) h s calc(l + 15));
+            background: hsl(from var(--_bg) h s calc(l + 15));
+        }
+    }
+
+    &.btn-iconic {
+        padding-inline: 6px;
+    }
+}
+
+.icon {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    flex-shrink: 0;
+}
+
+.post-list {
+    border-top: var(--widget--border-width) solid var(--widget--border-color);
+    margin-inline: -8px;
+    >._item {
+        display: block;
+        border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+        padding: 16px;
+        color: inherit;
+        text-decoration: none;
+        &:hover {
+            background-color: rgb(from var(--color--text) r g b / 10%);
+        }
+        >._heading {
+            font-size: inherit;
+            font-weight: bold;
+            margin: 0;
+        }
+        >._text {
+            margin: 0;
+        }
+    }
+}
+
+.actions {
+    inline-size: max-content;
+    margin-inline-start: auto;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    &:first-child {
+        margin: -8px -8px 0 auto;
+        >.btn {
+            border-top: 0;
+            border-bottom: 0;
+            border-right: 0;
+        }
+    }
+}
+
+.page-actions {
+    display: flex;
+    justify-content: end;
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    margin-inline: -8px;
+    gap: 8px;
+    button,
+    .btn {
+        border-top: 0;
+        border-bottom: 0;
+    }
+    form {
+        display: contents;
+        margin: 0;
+        padding: 0;
+    }
+}
+
+.rt-toolbar,
+.btn-toolbar {
+    display: flex;
+    gap: 8px;
+    button,
+    .btn {
+        border-width: 0;
+        border-right-width: var(--widget--border-width);
+        &:first-child {
+            border-left-width: var(--widget--border-width);
+        }
+    }
+    .rt-group,
+    .btn-group {
+        display: flex;
+        &:first-child > button:first-child {
+            border-left-width: 0;
+        }
+    }
+}
+
+.btn-toolbar .btn-group {
+    border-top: var(--widget--border-width) solid var(--widget--border-color);
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+}
+
+.text-primary { color: var(--color--primary); }
+.text-info { color: var(--color--info); }
+.text-success { color: var(--color--success); }
+.text-warning { color: var(--color--warning); }
+.text-danger { color: var(--color--danger); }
+.text-muted { color: var(--color--muted); }
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+
+.richtext-editor {
+    display: flex;
+    flex-direction: column;
+    border: var(--widget--border-width) solid var(--widget--border-color);
+    .rt-toolbar {
+        border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    }
+    textarea {
+        font-family: var(--font-family--monospace);
+        border: none;
+        resize: vertical;
+        max-height: 500px;
+    }
+}
+
+.post-reply .richtext-editor {
+    margin-inline: -8px;
+    border-left: 0;
+    border-right: 0;
+}
+
+.sr-only {
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+    opacity: 0;
+}
+
+.modal {
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: #000c;
+    transition: opacity 0.2s ease;
+    padding: 16px;
+    &.fade {
+        opacity: 0;
+        pointer-events: none;
+        .modal-dialog {
+            translate: 0% -128px;
+        }
+    }
+}
+.modal-dialog {
+    background: var(--color--background);
+    color: var(--color--text);
+    border: var(--widget--border-width) solid var(--widget--border-color);
+    max-inline-size: 1002px;
+    margin: auto;
+    transition: inherit;
+    transition-property: translate;
+    &.modal-primary .modal-header {
+        color: var(--color--primary);
+        background-color: rgb(from var(--color--primary) r g b / 10%);
+    }
+    &.modal-info .modal-header {
+        color: var(--color--info);
+        background-color: rgb(from var(--color--info) r g b / 10%);
+    }
+    &.modal-success .modal-header {
+        color: var(--color--success);
+        background-color: rgb(from var(--color--success) r g b / 10%);
+    }
+    &.modal-warning .modal-header {
+        color: var(--color--warning);
+        background-color: rgb(from var(--color--warning) r g b / 10%);
+    }
+    &.modal-danger .modal-header {
+        color: var(--color--danger);
+        background-color: rgb(from var(--color--danger) r g b / 10%);
+    }
+}
+.modal-header {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) max-content;
+    padding: 0 16px;
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    align-items: center;
+    >button,
+    >.btn {
+        border-top: 0;
+        border-bottom: 0;
+    }
+    >.close {
+        margin-right: -16px;
+    }
+}
+.modal-header>.close {
+    grid-column: 2;
+}
+.modal-title {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+    font-size: inherit;
+    font-weight: 800;
+    &:has(>svg) {
+        display: flex;
+        gap: 0.25em;
+        align-items: center;
+        >svg {
+            display: block;
+        }
+    }
+}
+.modal-footer {
+    display: flex;
+    border-top: var(--widget--border-width) solid var(--widget--border-color);
+    padding: 0 16px;
+    gap: 8px;
+    justify-content: end;
+    >button,
+    >.btn {
+        border-top: 0;
+        border-bottom: 0;
+    }
+}
+.modal-body {
+    padding: 16px;
+}
+
+.edit-post-wrapper {
+    padding: 0;
+    >.richtext-editor {
+        border: 0;
+    }
+}
+
+.pull-right {
+    float: right;
+}
+
+:has(>.pull-right)::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+.title-controls {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    >form {
+        display: contents;
+    }
+}
+
+.page-header {
+    padding-block-end: 8px;
+    margin-bottom: 8px;
+    margin-inline: -8px;
+    padding-inline: 8px;
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    >h1 {
+        margin: 0;
+    }
+}
+.page-header:has(~ .post) {
+    margin-bottom: 0;
+}
+
+.post {
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    margin-inline: -8px;
+    z-index: 0;
+    position: relative;
+}
+.post-pfp {
+    border-right: var(--widget--border-width) solid var(--widget--border-color);
+    padding: 8px;
+    position: relative;
+    >a {
+        &, >img {
+            display: block;
+        }
+    }
+}
+.post-title {
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    padding: 8px;
+    position: sticky;
+    top: var(--header-height);
+    background: var(--color--background);
+    font-size: 80%;
+}
+.post-attachments {
+    padding: 8px;
+    border-top: var(--widget--border-width) solid var(--widget--border-color);
+}
+.post-main {
+    padding: 8px;
+}
+.post-body:has(>.post-status) {
+    align-content: center;
+}
+.post-status {
+    padding: 8px;
+    display: flex;
+    gap: 0.25em;
+    height: 100%;
+    align-items: center;
+    &.post-status-primary {
+        color: var(--color--primary);
+        background-color: rgb(from var(--color--primary) r g b / 10%);
+    }
+    &.post-status-info {
+        color: var(--color--info);
+        background-color: rgb(from var(--color--info) r g b / 10%);
+    }
+    &.post-status-success {
+        color: var(--color--success);
+        background-color: rgb(from var(--color--success) r g b / 10%);
+    }
+    &.post-status-warning {
+        color: var(--color--warning);
+        background-color: rgb(from var(--color--warning) r g b / 10%);
+    }
+    &.post-status-danger {
+        color: var(--color--danger);
+        background-color: rgb(from var(--color--danger) r g b / 10%);
+    }
+}
+.post-content {
+    word-break: break-word;
+    hyphens: auto;
+}
+
+.icon-in-text {
+    vertical-align: middle;
+}
+
+.is-you {
+    color: var(--color--primary);
+}
+
+blockquote {
+    padding: 8px;
+    margin-left: 0;
+    border-left: var(--widget--border-width) solid var(--widget--border-color);
+}
+
+#image-attachment-view,
+#video-attachment-view {
+    max-width: 100%;
+    margin-inline: auto;
+    display: block;
+}
+
+.spring-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    >.spring-fill {
+        flex: 1;
+    }
+    >.spring-fit {
+        flex-shrink: 0;
+    }
+}
+
+.spring-fill input {
+    display: block;
+    width: 100%;
+}
+
+.post-anchor {
+    position: absolute;
+    left: 0;
+    top: calc(-1 * var(--header-height));
+    width: 0;
+    height: 0;
+}
+
+.topic-info-box {
+    padding: 16px;
+    text-align: center;
+    margin: 0 -8px calc(-8px - var(--widget--border-width));
+    border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+    &.primary {
+        background-color: rgb(from var(--color--primary) r g b / 10%);
+    }
+    &.info {
+        background-color: rgb(from var(--color--info) r g b / 10%);
+    }
+    &.success {
+        background-color: rgb(from var(--color--success) r g b / 10%);
+    }
+    &.warning {
+        background-color: rgb(from var(--color--warning) r g b / 10%);
+    }
+    &.danger {
+        background-color: rgb(from var(--color--danger) r g b / 10%);
+    }
+
+    >h3 {
+        margin: 0 0 8px;
+    }
+}
+
+.alert {
+    padding: 16px;
+    margin-bottom: 16px;
+    border: var(--widget--border-width) solid var(--widget--border-color);
+    &.alert-primary {
+        color: var(--color--primary);
+        background-color: rgb(from var(--color--primary) r g b / 10%);
+    }
+    &.alert-info {
+        color: var(--color--info);
+        background-color: rgb(from var(--color--info) r g b / 10%);
+    }
+    &.alert-success {
+        color: var(--color--success);
+        background-color: rgb(from var(--color--success) r g b / 10%);
+    }
+    &.alert-warning {
+        color: var(--color--warning);
+        background-color: rgb(from var(--color--warning) r g b / 10%);
+    }
+    &.alert-danger {
+        color: var(--color--danger);
+        background-color: rgb(from var(--color--danger) r g b / 10%);
+    }
+    &:is(main>.alert) {
+        padding: 24px;
+        margin: -8px -8px 0;
+        border-left: 0;
+        border-top: 0;
+        border-right: 0;
+        &:is(.page-header:has(~ .post) + .alert) {
+            margin-top: 0;
+        }
+    }
+    >svg {
+        vertical-align: sub;
+    }
+}
+
+.result-alert {
+    margin: 8px -8px 0;
+    >.alert {
+        padding: 24px;
+        margin: 0;
+        border-left: 0;
+        border-right: 0;
+    }
+    &:is(.profile-edit-view .result-alert) {
+        margin-inline: 0;
+    }
+}
+
+.topic-locked {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    gap: 0.25em;
+    color: var(--color--warning);
+}
+
+.profile-header {
+    display: grid;
+    grid-template: "image name" minmax(0, 1fr)
+                   "image info" max-content
+                 / max-content minmax(0, 1fr);
+    column-gap: 8px;
+    >._image {
+        grid-area: image;
+    }
+    >._name {
+        grid-area: name;
+        align-self: center;
+    }
+    >._info {
+        grid-area: info;
+        align-self: center;
+    }
+}
+
+main:has(>.profile-edit-view) {
+    display: flex;
+    flex-direction: column;
+}
+
+.profile-edit-view {
+    margin: -8px;
+    display: grid;
+    grid-template: "posts edit" minmax(0, 1fr)
+                 / minmax(0, 1fr) max-content;
+    flex: 1;
+    h3 {
+        padding-inline: 8px;
+    }
+    >._posts {
+        grid-area: posts;
+        .post-list {
+            margin-inline: 0;
+        }
+    }
+    >._edit {
+        grid-area: edit;
+        border-left: var(--widget--border-width) solid var(--widget--border-color);
+        width: 300px;
+        h3 + form {
+            border-top: var(--widget--border-width) solid var(--widget--border-color);
+        }
+        form {
+            padding-inline: 8px;
+        }
+        form:has(+ h3) {
+            border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+        }
+    }
+}
+
+.post-images {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.image-attachment {
+    display: block;
+    margin-right: 8px;
+    text-decoration: none;
+    position: relative;
+    .image-attachment-image {
+        display: block;
+        border: var(--widget--border-width) solid var(--widget--border-color);
+    }
+    .attachment-lock {
+        position: absolute;
+        color: white;
+        right: 6px;
+        top: 6px;
+        text-shadow: 0 1px 3px rgba(0,0,0,.5);
+    }
+    .video-player-icon {
+        position: absolute;
+        color: white;
+        inset: 0;
+        margin: auto;
+        filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
+        width: 24px;
+        height: 24px;
+    }
+}
+
+@media (max-width: 900px) {
+    footer {
+        display: block;
+        #preferences {
+            margin-top: 8px;
+        }
+    }
+}
+
+@media (max-width: 780px) {
+    main:has(>.profile-edit-view) {
+        display: block;
+    }
+    
+    .profile-edit-view {
+        grid-template: "edit" max-content
+                       "posts" minmax(0, 1fr)
+                     / minmax(0, 1fr);
+        >._posts {
+            margin-bottom: 8px;
+        }
+        >._edit {
+            width: auto;
+            border-bottom: var(--widget--border-width) solid var(--widget--border-color);
+            border-left: 0;
+        }
+    }
+}
+
+@media (max-width: 560px) {
+    .post {
+        grid-template-columns: minmax(0, 1fr);
+        .post-pfp {
+            display: none;
+        }
+    }
+    footer #preferences form {
+        display: block;
+        margin-top: 4px;
+    }
+}
+
+#group0 {
+    display: none !important;
+}
+
+@media (prefers-reduced-motion) {
+    *, *::before, *::after {
+        transition: none !important;
+    }
+}