/* ------------------------------------------------------------------
   ahmetbugra.com - conversation window
   Hand-written. No framework, no web fonts, no icon set.
------------------------------------------------------------------ */

:root {
    --face: #ece9d8;
    --face-hi: #ffffff;
    --face-lo: #aca899;
    --frame: #0054e3;
    --field: #7f9db9;
    --ink: #1b1b1b;
    --ink-soft: #5c6470;
    --them: #1c4d94;
    --you: #a8380f;
    --link: #0b53b8;
    --chat-bg: #ffffff;
    --chat-size: 12px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
    font-size: 11px;
    color: var(--ink);
    background: #245edb;
    background-image:
        radial-gradient(120% 80% at 50% 0%, #7fb6ef 0%, #3b7fd4 42%, #1c4fa8 100%),
        linear-gradient(180deg, #1c4fa8 0%, #16407f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 22px;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

body::after {
    /* the hill */
    content: "";
    position: fixed;
    left: -5%;
    right: -5%;
    bottom: -8%;
    height: 42%;
    background: radial-gradient(60% 100% at 50% 100%, #7fae3f 0%, #5d8f2c 55%, #4b7a22 100%);
    border-radius: 60% 40% 0 0 / 70% 60% 0 0;
    z-index: 0;
    pointer-events: none;
}

/* ---------------- window ---------------- */

.win {
    position: relative;
    z-index: 1;
    width: min(880px, 100%);
    height: min(690px, 100%);
    display: flex;
    flex-direction: column;
    padding: 0 3px 3px;
    background: linear-gradient(180deg, #0a5ad8 0%, #0054e3 100%);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

.win.shake { animation: shake .55s cubic-bezier(.36, .07, .19, .97) both; }

@keyframes shake {
    10%, 90% { transform: translate(-3px, 1px); }
    20%, 80% { transform: translate(5px, -2px); }
    30%, 50%, 70% { transform: translate(-8px, 3px); }
    40%, 60% { transform: translate(8px, -3px); }
}

.win.minimized { display: none; }

.win.maximized {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.win.maximized .win-inner,
.win.maximized .titlebar { border-radius: 0; }

.win-inner {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--face);
    border-radius: 7px 7px 0 0;
}

/* ---------------- title bar ---------------- */

.titlebar {
    height: 29px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 3px 1px 5px;
    border-radius: 7px 7px 0 0;
    background:
        linear-gradient(180deg,
            #0f62dd 0%, #4d95f2 4%, #2a83ef 8%, #1170ec 14%,
            #0b64e4 40%, #0356d8 52%, #0a5ce0 82%, #2f81f1 94%,
            #4b95f3 97%, #0d5ad6 100%);
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
    cursor: default;
    user-select: none;
}

.titlebar .tb-icon { width: 16px; height: 16px; flex: none; }

.titlebar .tb-text {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-btns { display: flex; gap: 2px; }

.tb-btn {
    width: 21px;
    height: 21px;
    flex: none;
    border: 1px solid #1e4fa8;
    border-radius: 3px;
    background: linear-gradient(180deg, #7cb2f5 0%, #3d86ec 22%, #0e5ad9 60%, #2f7cec 100%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.tb-btn:hover { filter: brightness(1.15); }
.tb-btn:active { filter: brightness(.9); }

.tb-btn.close {
    width: 33px;
    background: linear-gradient(180deg, #f7a48c 0%, #ec6a44 22%, #d63b11 60%, #ea6b45 100%);
    border-color: #a02c0c;
}

.tb-btn svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2; }

/* ---------------- menu bar ---------------- */

.menubar {
    flex: none;
    display: flex;
    align-items: center;
    height: 21px;
    padding: 0 2px;
    background: var(--face);
    border-bottom: 1px solid #d3cebc;
    user-select: none;
}

.menu { position: relative; }

.menu > button {
    font: inherit;
    font-size: 11px;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 3px 7px;
    cursor: default;
    border-radius: 2px;
}

.menu.open > button,
.menu > button:hover { background: #316ac5; color: #fff; }

.menu u { text-underline-offset: 2px; }

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    display: none;
    z-index: 40;
    padding: 2px;
    background: #fff;
    border: 1px solid #a0a0a0;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, .3);
}

.menu.open .dropdown { display: block; }

.dropdown button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font: inherit;
    font-size: 11px;
    text-align: left;
    background: none;
    border: 0;
    padding: 5px 8px 5px 22px;
    cursor: default;
    color: var(--ink);
}

.dropdown button:hover { background: #316ac5; color: #fff; }
.dropdown button .hint { opacity: .6; font-size: 10px; }
.dropdown button:hover .hint { opacity: .85; }
.dropdown hr { border: 0; border-top: 1px solid #dcdcdc; margin: 3px 4px; }
.dropdown button.on::before {
    content: "";
    position: absolute;
    left: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2f6b2f;
    margin-top: 4px;
}
.dropdown button { position: relative; }

/* ---------------- toolbar ---------------- */

.toolbar {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 1px;
    padding: 3px 4px 4px;
    background: linear-gradient(180deg, #fdfeff 0%, #f2f7fd 55%, #e2ecf9 100%);
    border-bottom: 1px solid #b6cbe4;
}

.tools {
    display: flex;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tools::-webkit-scrollbar { display: none; }

.tool {
    flex: none;
    width: 58px;
    padding: 3px 2px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font: inherit;
    font-size: 11px;
    color: var(--ink);
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    line-height: 1.1;
}

.tool:hover { background: #dcebfb; border-color: #a8c8ec; }
.tool:active { background: #c5dcf5; }
.tool svg { width: 26px; height: 26px; }

.brand {
    flex: none;
    align-self: center;
    display: flex;
    padding-left: 10px;
}

.brand .tab {
    display: flex;
    gap: 5px;
    padding: 3px 5px;
    background: linear-gradient(180deg, #ffffff, #e9f0fa);
    border: 1px solid #c3d5ea;
    border-radius: 12px;
}

.pill {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid #96b3d6;
    background: linear-gradient(180deg, #ffffff, #d8e6f7);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
}

.pill:hover { filter: brightness(1.06); }
.pill svg { width: 12px; height: 12px; }

/* ---------------- panes ---------------- */

.pane {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 6px;
    padding: 6px;
}

.col-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.col-right {
    flex: none;
    width: 112px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sunken {
    background: var(--chat-bg);
    border: 1px solid var(--field);
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .07);
}

.chatbox {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.to-row {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 6px;
    border-bottom: 1px solid #dfe6ee;
    font-size: 11px;
}

.to-row .mini-dp { display: none; }

.to-row .label { color: var(--ink); }
.to-row .who { font-weight: bold; }
.to-row .pm { color: var(--ink-soft); font-style: italic; }
.to-row .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #4aa832;
    box-shadow: 0 0 0 1px #2f6b21 inset;
    flex: none;
}

/* ---------------- history ---------------- */

.history {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 9px 11px 12px;
    font-size: var(--chat-size);
    line-height: 1.5;
    scroll-behavior: smooth;
}

.history.bg-blue { background: linear-gradient(180deg, #f4f9ff 0%, #e8f2ff 100%); }
.history.bg-mint { background: linear-gradient(180deg, #f4fff8 0%, #e4f7ec 100%); }
.history.bg-grid {
    background-color: #fffdf5;
    background-image: linear-gradient(#f0ead5 1px, transparent 1px), linear-gradient(90deg, #f0ead5 1px, transparent 1px);
    background-size: 18px 18px;
}
.history.bg-night { background: #1e2430; color: #dde3ec; }
.history.bg-night .msg-body { color: #dde3ec; }
.history.bg-night .sys { color: #8b96a8; }
.history.bg-night .name.them { color: #7db2ff; }
.history.bg-night .name.you { color: #ff9d6e; }
.history.bg-night a { color: #7db2ff; }
.history.bg-night .card { background: #262e3c; border-color: #3b465a; }
.history.bg-night .card .sub { color: #96a1b3; }

.msg { margin-bottom: 7px; }

.msg-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.name { font-weight: bold; }
.name.them { color: var(--them); }
.name.you { color: var(--you); }
.time { color: #9aa3af; font-size: 10px; }

.msg-body {
    padding-left: 2px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.msg.grouped { margin-top: -6px; }
.msg.grouped .msg-head { display: none; }

.sys {
    color: #7a8290;
    font-style: italic;
    margin: 8px 0;
}

.sys.red { color: #b03a1c; }

.history a { color: var(--link); }
.history a:hover { color: #d13d0c; }

.pick {
    margin: 9px 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pick button {
    font: inherit;
    font-size: inherit;
    color: var(--link);
    background: #f3f8ff;
    border: 1px solid #bfd6f2;
    border-radius: 11px;
    padding: 3px 11px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pick button:hover { background: #e2eeff; color: #d13d0c; }
.history.bg-night .pick button { background: #2a3342; border-color: #3f4d63; color: #7db2ff; }

.card {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 5px 0;
    padding: 7px 9px;
    background: #f7f9fc;
    border: 1px solid #cdd9e8;
    max-width: 330px;
}

.card img { width: 34px; height: 34px; border-radius: 8px; flex: none; }
.card .meta { min-width: 0; flex: 1; }
.card .nm { font-weight: bold; }
.card .sub { color: var(--ink-soft); font-size: 11px; }
.card .go { flex: none; }

.emo { width: 1.25em; height: 1.25em; vertical-align: -.25em; }

/* ---------------- display pictures ---------------- */

.dp {
    position: relative;
    padding: 4px;
    display: flex;
}

.dp img, .dp svg.duck {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.dp-spacer { flex: 1; }

/* ---------------- composer ---------------- */

.composer {
    flex: none;
    display: flex;
    gap: 6px;
}

.composer .box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.formatbar {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px 3px;
    border-bottom: 1px solid #dfe6ee;
    background: linear-gradient(180deg, #fdfeff, #f1f6fc);
    overflow-x: auto;
    scrollbar-width: none;
}

.formatbar::-webkit-scrollbar { display: none; }

.fbtn {
    flex: none;
    display: flex;
    align-items: center;
    gap: 3px;
    font: inherit;
    font-size: 11px;
    color: var(--ink);
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 4px;
    cursor: pointer;
}

.fbtn:hover { background: #dcebfb; border-color: #a8c8ec; }
.fbtn svg { width: 16px; height: 16px; }
.fbtn .caret { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #4a5768; }
.sep { flex: none; width: 1px; align-self: stretch; margin: 3px 3px; background: #dde5ef; }

#input {
    flex: 1;
    min-height: 54px;
    resize: none;
    border: 0;
    outline: none;
    padding: 7px 9px;
    font-family: inherit;
    font-size: var(--chat-size);
    line-height: 1.5;
    color: var(--ink);
    background: transparent;
}

.composer .actions {
    flex: none;
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xbtn {
    flex: 1;
    font: inherit;
    font-size: 11px;
    font-weight: bold;
    color: #26303d;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 45%, #dfe8f4 100%);
    border: 1px solid #9db4cd;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 #fff;
    cursor: pointer;
    padding: 6px 8px;
}

.xbtn:hover { border-color: #f0a832; box-shadow: inset 0 0 0 1px #ffe6ae, inset 0 1px 0 #fff; }
.xbtn:active { background: linear-gradient(180deg, #dfe8f4, #f2f6fb); }
.xbtn:disabled { color: #9aa3af; cursor: default; box-shadow: inset 0 1px 0 #fff; border-color: #c3cedb; }

/* ---------------- status bar ---------------- */

.statusbar {
    flex: none;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px 0 8px;
    background: var(--face);
    border-top: 1px solid #fff;
    font-size: 11px;
    color: #3c444d;
}

.statusbar .tip {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    border: 0;
    font: inherit;
    color: #24405e;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.statusbar .tip:hover { text-decoration: underline; }

.statusbar .typing { color: #3c444d; }
.statusbar .typing:empty { display: none; }

.grip {
    flex: none;
    width: 12px;
    height: 12px;
    background-image:
        linear-gradient(135deg, transparent 46%, #b7b3a4 46%, #b7b3a4 54%, transparent 54%),
        linear-gradient(135deg, transparent 66%, #b7b3a4 66%, #b7b3a4 74%, transparent 74%),
        linear-gradient(135deg, transparent 86%, #b7b3a4 86%, #b7b3a4 94%, transparent 94%);
}

/* ---------------- popovers ---------------- */

.pop {
    position: absolute;
    z-index: 50;
    display: none;
    padding: 6px;
    background: #fff;
    border: 1px solid #8fa8c4;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .28);
}

.pop.open { display: block; }
.pop .row { display: flex; flex-wrap: wrap; gap: 3px; max-width: 188px; }

.pop .row button {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
}

.pop .row button:hover { background: #dcebfb; border-color: #a8c8ec; }
.pop .row button svg { width: 18px; height: 18px; }

.pop .stack { display: flex; flex-direction: column; min-width: 150px; }

.pop .stack button {
    font: inherit;
    font-size: 11px;
    text-align: left;
    background: none;
    border: 0;
    padding: 6px 9px;
    cursor: pointer;
    color: var(--ink);
    border-radius: 2px;
}

.pop .stack button:hover { background: #316ac5; color: #fff; }
.pop .title { font-weight: bold; padding: 2px 4px 6px; color: var(--ink-soft); }

.swatches { display: flex; gap: 4px; padding: 4px; }
.swatches button { width: 20px; height: 20px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); cursor: pointer; }

/* ---------------- dialog ---------------- */

.overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 30, 60, .35);
}

.overlay.open { display: flex; }

.dialog {
    width: min(360px, 100%);
    padding: 0 3px 3px;
    background: linear-gradient(180deg, #0a5ad8, #0054e3);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
}

.dialog .body {
    background: var(--face);
    padding: 14px 16px 16px;
    font-size: 11px;
    line-height: 1.6;
}

.dialog .body p { margin: 0 0 9px; }
.dialog .body a { color: var(--link); }
.dialog .foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.dialog .foot .xbtn { flex: none; min-width: 78px; padding: 5px 10px; }

/* ---------------- signed out ---------------- */

.signout {
    position: relative;
    z-index: 1;
    display: none;
    align-self: center;
    margin: auto;
    width: min(300px, calc(100% - 40px));
    padding: 0 3px 3px;
    background: linear-gradient(180deg, #0a5ad8, #0054e3);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    text-align: center;
}

.signout.open { display: block; }

.signout .head {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 7px 7px 0 0;
    background:
        linear-gradient(180deg,
            #0f62dd 0%, #4d95f2 4%, #2a83ef 8%, #1170ec 14%,
            #0b64e4 40%, #0356d8 52%, #0a5ce0 82%, #2f81f1 94%,
            #4b95f3 97%, #0d5ad6 100%);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .45);
}

.signout .body { background: var(--face); padding: 24px 20px 22px; }
.signout img { width: 44px; height: 44px; margin-bottom: 12px; }
.signout h2 { font-size: 12px; margin: 0 0 6px; }
.signout p { font-size: 11px; color: var(--ink-soft); margin: 0 0 18px; }
.signout .xbtn { flex: none; padding: 7px 20px; font-size: 11px; }

/* ---------------- blue screen ---------------- */

.bsod {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 9vh 18px 24px;
    background: #0000aa;
    color: #d8d8d8;
    font-family: "Lucida Console", "DejaVu Sans Mono", Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
    cursor: pointer;
    overflow-y: auto;
}

.bsod.open { display: flex; }

.bsod-inner { width: 100%; max-width: 620px; }
.bsod p { margin: 0 0 1em; }
.bsod .bsod-go { margin-top: 1.4em; }
.bsod .t { display: none; }

.bsod .caret {
    display: inline-block;
    margin-left: 2px;
    animation: blink 1.06s steps(1) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* ---------------- taskbar ---------------- */

.taskbar {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    display: none;
    align-items: center;
    padding: 0 6px;
    background: linear-gradient(180deg, #3f8ef0 0%, #1155d8 9%, #0a4fd0 90%, #073da8 100%);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .35) inset;
}

.taskbar.open { display: flex; }

.taskbar button {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 12px 0 8px;
    font: inherit;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(180deg, #4d93ef, #1a63dd);
    border: 1px solid #0b3f9e;
    border-radius: 3px;
    cursor: pointer;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
}

.taskbar button:hover { filter: brightness(1.1); }
.taskbar button img { width: 14px; height: 14px; }

/* ---------------- scrollbars ---------------- */

.history::-webkit-scrollbar { width: 16px; }
.history::-webkit-scrollbar-track { background: #f1f5fb; border-left: 1px solid #dbe4ef; }
.history::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #ffffff, #cfdcec 30%, #a8c0dd 100%);
    border: 1px solid #93aecd;
    border-radius: 2px;
}
.history::-webkit-scrollbar-thumb:hover { filter: brightness(1.05); }
.history { scrollbar-color: #b8cbe2 #f1f5fb; scrollbar-width: thin; }

/* ---------------- mobile ---------------- */

@media (max-width: 760px) {
    body {
        padding: 0;
        align-items: stretch;
        position: fixed;
        inset: 0;
        height: var(--vvh, 100%);
    }
    body::after { display: none; }
    body.signed-out::after {
        display: block;
        left: -55%;
        right: -55%;
        bottom: -4%;
        height: 26%;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }

    :root { --chat-size: 15px; }

    .win {
        width: 100%;
        height: 100%;
        max-height: none;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .titlebar, .win-inner { border-radius: 0; }
    .bsod { font-size: 11px; padding: 18px 14px; align-items: flex-start; }
    .bsod .k { display: none; }
    .bsod .t { display: inline; }
    .signout h2 { font-size: 14px; }
    .signout p { font-size: 12px; }
    .signout .head, .signout .xbtn { font-size: 12px; }
    .col-right { display: none; }
    .to-row .mini-dp { display: block; width: 26px; height: 26px; border-radius: 3px; object-fit: cover; }
    .to-row .pm { display: none; }
    .to-row, .statusbar, .menubar > .menu > button { font-size: 12px; }

    .tool { width: auto; min-width: 46px; padding: 3px 6px 2px; font-size: 10px; white-space: nowrap; }
    .tool svg { width: 24px; height: 24px; }
    .brand { padding-left: 4px; }

    .pane { padding: 5px; gap: 5px; }
    .history { padding: 9px 10px 14px; }

    .composer .actions { width: 74px; }
    .pick button { font-size: 14px; }
    .brand { padding-right: 2px; }
    .composer .actions .xbtn.secondary { display: none; }
    #input { font-size: 16px; min-height: 46px; }
    .fbtn .txt { display: none; }

    .card { max-width: none; }
}

@media (max-width: 430px) {
    .tool { padding: 3px 5px 2px; font-size: 10px; }
    .tool svg { width: 22px; height: 22px; }
    .composer .actions { width: 62px; }
}

@media (prefers-reduced-motion: reduce) {
    .win.shake { animation: none; }
    .bsod .caret { animation: none; }
    .history { scroll-behavior: auto; }
}