/* :-) */
/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: 'Nunito';
    src: url('https://joram.eu/fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('https://joram.eu/fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrainsMono';
    src: url('vendor/fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('vendor/fonts/JetBrainsMonoNL-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'CormorantGaramond';
    src: url('https://joram.eu/fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2-variations');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'CormorantGaramond';
    src: url('https://joram.eu/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

/* ==========================================================================
   Brand Primitives & Semantic Tokens
   ========================================================================== */

:root {
    /* Primitives */
    --color-oxford-blue:   #0a1137;
    --color-baby-powder:   #f5f7f3;
    --color-madder:        #a6112f;
    --color-madder-dark:   #f0a4b0;
    --color-rose-quartz:   #aca6bb;
    --color-ink-black:     #0d0d1a;

    /* Fonts */
    --font-body:    "Nunito", system-ui, sans-serif;
    --font-heading: "CormorantGaramond", "EB Garamond", Georgia, serif;
    --font-mono:    "JetBrainsMono", "Fira Code", "Consolas", monospace;
    --font-features-heading: "case" 1, "zero" 1, "calt" 1;

    /* Typography scale */
    --display-1:       700 clamp(3.5rem, 6vw + 1rem, 6rem)/1.02 var(--font-heading);
    --h1:              800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem)/1.1 var(--font-heading);
    --h2:              600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem)/1.15 var(--font-heading);
    --h3:              600 clamp(1.375rem, .75vw + 1rem, 1.75rem)/1.25 var(--font-heading);
    --tracking-heading: -0.01em;
    --body-lg:         300 1.125rem/1.65 var(--font-body);
    --body-emph:       400 1rem/1.6 var(--font-body);
    --caption:         400 0.75rem/1.4 var(--font-body);
    --overline:        600 0.75rem/1.2 var(--font-body);
    --tracking-overline: 0.12em;

    /* Light-mode semantics */
    --bg:            var(--color-baby-powder);
    --bg-elevated:   #ffffff;
    --bg-bar:        color-mix(in oklch, var(--color-oxford-blue) 5%, var(--color-baby-powder));
    --fg:            var(--color-oxford-blue);
    --fg-muted:      color-mix(in oklch, var(--color-oxford-blue) 50%, transparent);
    --fg-strong:     var(--color-ink-black);
    --accent:        var(--color-madder);
    --button-bg:     var(--color-oxford-blue);
    --button-fg:     var(--color-baby-powder);
    --border:        color-mix(in oklch, var(--color-oxford-blue) 10%, transparent);
    --border-strong: color-mix(in oklch, var(--color-oxford-blue) 25%, transparent);
    --focus-ring:    var(--color-madder);

    /* Spacing scale (4px base) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* Radii */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-pill: 999px;

    /* CTA tokens */
    --cta-bg: var(--color-madder);
    --cta-fg: var(--color-baby-powder);

    /* Shadows (Oxford-tinted) */
    --shadow-xs: 0 1px 2px 0 rgba(10,17,55,.06);
    --shadow-sm: 0 2px 6px -1px rgba(10,17,55,.08), 0 1px 2px rgba(10,17,55,.04);
    --shadow-md: 0 8px 20px -6px rgba(10,17,55,.14), 0 2px 4px rgba(10,17,55,.06);
    --shadow-lg: 0 20px 40px -12px rgba(10,17,55,.22), 0 4px 8px 0 rgba(10,17,55,.06);

    /* Motion */
    --duration-base: 180ms;
    --ease-standard: cubic-bezier(.4,0,.2,1);

    /* Editor */
    --editor-bg:         #ffffff;
    --editor-fg:         #0a1137;
    --editor-gutter-bg:  #f0f2ee;
    --editor-gutter-fg:  #8a8e9e;
    --editor-keyword:    #a6112f;
    --editor-string:     #2d7a3c;
    --editor-comment:    #7a7e8e;
    --editor-number:     #1558a6;
    --editor-def:        #6b21a8;
    --editor-tag:        #0f6b8a;
    --editor-attr:       #b34f00;
    --editor-selection:  rgba(166,17,47,.10);
    --editor-cursor:     #0a1137;
    --editor-activeline: rgba(10,17,55,.03);
}

[data-theme="dark"] {
    --bg:            var(--color-ink-black);
    --bg-elevated:   #0f1020;
    --bg-bar:        color-mix(in oklch, var(--color-baby-powder) 4%, var(--color-ink-black));
    --fg:            var(--color-baby-powder);
    --fg-muted:      var(--color-rose-quartz);
    --fg-strong:     var(--color-baby-powder);
    --accent:        var(--color-madder-dark);
    --button-bg:     var(--color-rose-quartz);
    --button-fg:     var(--color-oxford-blue);
    --border:        color-mix(in oklch, var(--color-baby-powder) 8%, transparent);
    --border-strong: color-mix(in oklch, var(--color-baby-powder) 20%, transparent);
    --focus-ring:    var(--color-madder-dark);
    --cta-bg:        var(--color-madder-dark);
    --cta-fg:        var(--color-ink-black);

    --editor-bg:         #0f1020;
    --editor-fg:         #f5f7f3;
    --editor-gutter-bg:  #0b0d18;
    --editor-gutter-fg:  #aca6bb;
    --editor-keyword:    #f0a4b0;
    --editor-string:     #7ec8a4;
    --editor-comment:    #aca6bb;
    --editor-number:     #89b4fa;
    --editor-def:        #c4a0ff;
    --editor-tag:        #67d8ef;
    --editor-attr:       #ffb86c;
    --editor-selection:  rgba(240,164,176,.15);
    --editor-cursor:     #f5f7f3;
    --editor-activeline: rgba(245,247,243,.025);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-flow: column;
    background-color: var(--bg);
    color: var(--fg);
    font: 300 14px/1.5 var(--font-body);
    margin: 0;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
}

* {
    font-variant-ligatures: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */

#editor {
    flex-grow: 1;
    margin-top: -3px;
    overflow: auto;
}

#controls,
#copy,
footer {
    background-color: var(--bg-bar);
    z-index: 10;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

#progress {
    min-height: 3px;
    background: var(--accent);
    z-index: 15;
    width: 0;
    transition: background-color var(--duration-base) var(--ease-standard);
}

/* ==========================================================================
   Visibility helpers
   ========================================================================== */

.hidden,
select,
#copy:not(.hidden) + #controls,
body.readonly .hide-readonly,
body:not(.readonly) .show-readonly,
body.readonly:not(:hover) #footer {
    display: none;
}

/* ==========================================================================
   Shadows
   ========================================================================== */

.shadow-bottom {
    box-shadow: var(--shadow-sm);
}
.shadow-top {
    box-shadow: 0 -2px 6px -1px rgba(10,17,55,.06), 0 -1px 2px rgba(10,17,55,.04);
}

[data-theme="dark"] .shadow-bottom {
    box-shadow: 0 2px 8px -2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
}
[data-theme="dark"] .shadow-top {
    box-shadow: 0 -2px 8px -2px rgba(0,0,0,.3), 0 -1px 3px rgba(0,0,0,.15);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 { font-feature-settings: var(--font-features-heading); }

h1 {
    font: 600 21px/1 var(--font-heading);
    white-space: nowrap;
    color: var(--fg-strong);
    letter-spacing: var(--tracking-heading);
    margin: 0;
}

h2 {
    font: 600 18px/1.2 var(--font-body);
    color: var(--fg-strong);
    margin-top: 0;
}

h3 {
    font: 600 14px/1.3 var(--font-body);
    color: var(--fg-strong);
    margin: 12px 0 6px;
}

.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
}

.accent {
    color: var(--accent);
}

/* ==========================================================================
   Links
   ========================================================================== */

a,
a:visited,
a:hover,
a:active,
a:focus {
    color: inherit;
    outline: none;
}

#controls a:not(.ctrl-btn),
#footer a {
    color: var(--fg);
    text-decoration: none;
    font: 400 13px/1 var(--font-body);
    opacity: 0.75;
    transition: opacity var(--duration-base) var(--ease-standard);
}

#controls a:not(.ctrl-btn):hover,
#footer a:hover {
    opacity: 1;
}

/* ==========================================================================
   Base button reset
   ========================================================================== */

button {
    cursor: pointer;
    font-family: var(--font-body) !important;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard),
        filter var(--duration-base) var(--ease-standard) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   Action buttons (.btn, .btn-outline)
   ========================================================================== */

.btn {
    background-color: var(--button-bg) !important;
    color: var(--button-fg) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    font: 600 12px/1 var(--font-body) !important;
    padding: 6px 11px !important;
    height: auto !important;
}

.btn:hover {
    filter: brightness(0.9) !important;
}

.btn:active {
    filter: brightness(0.82) !important;
    transform: translateY(1px);
}

.btn-outline {
    background-color: transparent !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font: 400 12px/1 var(--font-body) !important;
    padding: 6px 11px !important;
    height: auto !important;
}

.btn-outline:hover {
    background-color: var(--border) !important;
}

/* Line wrap icon buttons */
#enable-line-wrapping,
#disable-line-wrapping {
    background: transparent !important;
    border: none !important;
    color: var(--fg) !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
}

#enable-line-wrapping:not(.hidden),
#disable-line-wrapping:not(.hidden) {
    display: inline-flex !important;
}

#enable-line-wrapping:hover,
#disable-line-wrapping:hover {
    background: var(--border) !important;
}

/* ==========================================================================
   Topbar brand buttons (.ctrl-btn)
   ========================================================================== */

.topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid var(--border-strong);
}

.ctrl-btn {
    background: transparent !important;
    border: none !important;
    color: var(--fg) !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm) !important;
    cursor: pointer;
    font-size: 20px;
    text-decoration: none;
    opacity: 0.65;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        opacity var(--duration-base) var(--ease-standard) !important;
}

.ctrl-btn:hover {
    background: var(--border) !important;
    opacity: 1;
}

/* Language switcher */
.lang-switcher {
    position: relative;
    display: inline-flex;
}

#langToggle {
    font: 600 11px/1 var(--font-body) !important;
    letter-spacing: 0.05em;
}

.lang-dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 100;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 130px;
    padding: 4px;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.lang-dropdown.open {
    display: flex;
}

.lang-dropdown button {
    background: transparent !important;
    border: none !important;
    color: var(--fg) !important;
    text-align: left !important;
    padding: 8px 10px !important;
    width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-sm) !important;
    font: 400 13px/1.4 var(--font-body) !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
}

.lang-dropdown button:hover {
    background: var(--border) !important;
}

/* ==========================================================================
   Responsive navbar
   ========================================================================== */

#mobileMenuToggle {
    display: none !important;
}


#mobile-menu {
    display: none;
}

@media (max-width: 576px) {
    #nav-links {
        display: none;
    }

    .btn-collapsible {
        display: none;
    }

    .lang-select-col {
        display: none;
    }

    .linewrap-col {
        display: none;
    }

    .topbar-actions .lang-switcher {
        display: none;
    }

    .encrypt-col {
        display: none;
    }

    .topbar-actions #themeToggle {
        display: none !important;
    }

    .mobile-impressum {
        display: inline-flex !important;
    }

    #mobileMenuToggle {
        display: inline-flex !important;
    }

    .footer-legal {
        width: 100%;
    }

    #controls .ss-main {
        width: 130px;
    }

    #mobile-menu {
        display: none;
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px 10px;
        border-top: 1px solid var(--border);
    }

    #mobile-menu.open {
        display: flex;
    }

    #mobile-menu a {
        width: 100%;
        text-align: left;
    }

    .mobile-icon-row {
        display: flex;
        gap: 4px;
        align-items: center;
    }
}

/* ==========================================================================
   Form elements (SlimSelect + inputs)
   ========================================================================== */

#controls .ss-main {
    width: 180px;
}

.ss-main .ss-single-selected {
    background-color: var(--bg-elevated) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font: 300 13px/1 var(--font-body) !important;
    height: 28px !important;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard) !important;
}

.ss-main .ss-single-selected .placeholder {
    color: var(--fg) !important;
}

.ss-main .ss-single-selected .ss-arrow span {
    border-color: var(--fg-muted) transparent transparent !important;
}

.ss-main.ss-open-below .ss-single-selected .ss-arrow span {
    border-color: transparent transparent var(--fg-muted) !important;
}

.ss-content {
    background-color: var(--bg-elevated) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 13px;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard) !important;
}

.ss-content .ss-option {
    color: var(--fg) !important;
    padding: 6px 10px !important;
    font: 300 13px/1.3 var(--font-body) !important;
}

.ss-content .ss-option:hover,
.ss-content .ss-option.ss-highlighted {
    background-color: var(--border) !important;
    color: var(--fg-strong) !important;
}

.ss-content .ss-disabled {
    background-color: color-mix(in oklch, var(--bg-bar) 60%, var(--bg-elevated)) !important;
    color: var(--fg-muted) !important;
    font: 600 10px/1 var(--font-body) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px !important;
}

.ss-content .ss-search input {
    background-color: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font: 300 13px/1 var(--font-body) !important;
    height: 28px !important;
}

input[type='text'],
input[type='search'] {
    background-color: var(--bg-elevated) !important;
    color: var(--fg) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-sm) !important;
    font: 300 14px/1 var(--font-body) !important;
    height: 28px !important;
    padding: 0 8px !important;
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard) !important;
}

input::-webkit-search-cancel-button { display: none; }

::selection {
    background-color: color-mix(in oklch, var(--accent) 18%, transparent);
}

#copy-link {
    font-family: var(--font-mono);
    font-size: 12px;
    width: 100%;
}

/* ==========================================================================
   CodeMirror Brand Theme: cm-s-nopaste
   ========================================================================== */

.cm-s-nopaste.CodeMirror {
    height: 100%;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.65;
    background: var(--editor-bg);
    color: var(--editor-fg);
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard);
}

.cm-s-nopaste .CodeMirror-gutters {
    background: var(--editor-gutter-bg);
    border-right: 1px solid var(--border);
    transition:
        background-color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.cm-s-nopaste .CodeMirror-linenumber {
    color: var(--editor-gutter-fg);
    font-size: 12px;
}

.cm-s-nopaste .CodeMirror-cursor {
    border-left: 2px solid var(--editor-cursor);
}

.cm-s-nopaste .CodeMirror-selected {
    background: var(--editor-selection) !important;
}

.cm-s-nopaste .CodeMirror-focused .CodeMirror-selected {
    background: var(--editor-selection) !important;
}

.cm-s-nopaste .CodeMirror-activeline-background {
    background: var(--editor-activeline);
}

.cm-s-nopaste .CodeMirror-matchingbracket {
    color: var(--accent) !important;
    background: color-mix(in oklch, var(--accent) 10%, transparent);
    border-radius: 2px;
}

/* Syntax tokens */
.cm-s-nopaste .cm-keyword    { color: var(--editor-keyword); font-weight: 600; }
.cm-s-nopaste .cm-atom       { color: var(--editor-number); }
.cm-s-nopaste .cm-number     { color: var(--editor-number); }
.cm-s-nopaste .cm-def        { color: var(--editor-def); }
.cm-s-nopaste .cm-variable   { color: var(--editor-fg); }
.cm-s-nopaste .cm-variable-2 { color: var(--editor-tag); }
.cm-s-nopaste .cm-variable-3,
.cm-s-nopaste .cm-type       { color: var(--editor-def); }
.cm-s-nopaste .cm-comment    { color: var(--editor-comment); font-style: italic; }
.cm-s-nopaste .cm-string     { color: var(--editor-string); }
.cm-s-nopaste .cm-string-2   { color: var(--editor-string); }
.cm-s-nopaste .cm-meta       { color: var(--editor-comment); }
.cm-s-nopaste .cm-qualifier  { color: var(--editor-def); }
.cm-s-nopaste .cm-builtin    { color: var(--editor-keyword); }
.cm-s-nopaste .cm-bracket    { color: var(--editor-fg); }
.cm-s-nopaste .cm-tag        { color: var(--editor-tag); }
.cm-s-nopaste .cm-attribute  { color: var(--editor-attr); }
.cm-s-nopaste .cm-hr         { color: var(--editor-comment); }
.cm-s-nopaste .cm-link       { color: var(--editor-string); text-decoration: underline; }
.cm-s-nopaste .cm-error      { color: var(--color-madder); background: color-mix(in oklch, var(--color-madder) 8%, transparent); }
.cm-s-nopaste .cm-operator   { color: var(--editor-keyword); }
.cm-s-nopaste .cm-property   { color: var(--editor-attr); }
.cm-s-nopaste .cm-punctuation { color: var(--editor-fg); }
.cm-s-nopaste .cm-header     { color: var(--editor-keyword); font-weight: 700; }

/* Simple scrollbar */
.CodeMirror-simplescroll-horizontal div,
.CodeMirror-simplescroll-vertical div {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Modals
   ========================================================================== */

.modal { display: none; }
.modal.is-open { display: block; }

.modal-content {
    background-color: var(--bg-elevated);
    color: var(--fg);
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    cursor: initial;
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transition:
        background-color var(--duration-base) var(--ease-standard),
        color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.modal-content .additional-info {
    opacity: 0.6;
    font-style: italic;
    margin-top: 16px;
    font-size: 0.875em;
    line-height: 1.5;
}

.modal-overlay {
    position: fixed;
    background: rgba(10, 17, 55, 0.3);
    right: 0; top: 0; left: 0; bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.modal-close {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    color: var(--fg-muted);
    transition: color var(--duration-base) var(--ease-standard);
    line-height: 1;
}

.modal-close:hover {
    color: var(--fg-strong);
}

.encrypt-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    margin: 12px 0 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 14px;
}

.encrypt-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.password-warning {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--accent);
}

.encrypt-deniable {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    margin-bottom: 6px;
}

/* ==========================================================================
   Loader
   ========================================================================== */

.loader-small, .loader-big {
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
    margin: auto;
}
.loader-small {
    border: 3px solid var(--bg-elevated);
    border-top-color: var(--button-bg);
    width: 20px;
    height: 20px;
    margin-right: 5px;
}
.loader-big {
    border: 8px solid var(--bg-elevated);
    border-top-color: var(--button-bg);
    width: 60px;
    height: 60px;
    margin-top: 40px;
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   Icons (Remix Icons)
   ========================================================================== */

/* 20px for buttons, 16px for inline edit link */
.ctrl-btn i,
#enable-line-wrapping i,
#disable-line-wrapping i,
#mobileLineWrapToggle i,
.modal-close i { font-size: 20px; line-height: 1; }

#footer .icon-edit-inline { font-size: 16px; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation-duration: 0.01ms !important;
    }
}