:root {
    --bg: #0c0c0d;
    --panel: #131315;
    --panel2: #17171a;
    --line: #2b2b30;
    --line2: #3b3b42;
    --text: #c8c4ba;
    --dim: #8a867e;
    --accent: #c8762a;
    --accent-dark: #6f4213;
    --danger: #8f3226;
    --link: #cf9a52;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --serif: "Golos Text", "IBM Plex Sans", Verdana, sans-serif;
    --ui: "IBM Plex Sans", Verdana, Tahoma, sans-serif;
    --head: 49px;
    --shell: 1080px;
    --r-step: 20px;
    --flag-cn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cdefs%3E%3Cpath id='s' d='M0-3L.674-.927L2.853-.927L1.09.354L1.763 2.427L0 1.146L-1.763 2.427L-1.09.354L-2.853-.927L-.674-.927Z'/%3E%3C/defs%3E%3Cg fill='%23e8c15a'%3E%3Cuse href='%23s' transform='translate(5 5)'/%3E%3Cuse href='%23s' transform='translate(10 2) scale(.4)'/%3E%3Cuse href='%23s' transform='translate(12 4) scale(.4)'/%3E%3Cuse href='%23s' transform='translate(12 7) scale(.4)'/%3E%3Cuse href='%23s' transform='translate(10 9) scale(.4)'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: 13.5px/1.55 var(--ui);
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #101012;
    border-bottom: 2px solid var(--line2);
}

.head-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 9px 16px;
}

.mark {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--accent);
}

.mark:hover { text-decoration: none; }

.word {
    font: 700 16px var(--serif);
    letter-spacing: 1px;
    color: var(--text);
}

.mark:hover .word { color: var(--accent); }

.nav {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
}

.nav form { margin: 0; }

.nav-art { display: inline-flex; align-items: baseline; gap: 5px; }
.nav-art span { font: 11px var(--mono); color: var(--line2); }
.nav-art.fresh { color: var(--accent); }
.nav-art.fresh span { color: var(--accent-dark); }

.who { display: grid; place-items: center; }

.who .ava { width: 26px; height: 26px; font-size: 12px; }

main {
    max-width: 680px;
    margin: 0 auto;
    padding: 14px 16px 30px;
}

.shell { display: block; }
.shell-rooms .content { display: none; }

body:has(.send) main { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }