@font-face {
  font-family: 'Literata';
  src: url('assets/fonts/literata-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
@font-face {
  font-family: 'Golos Text';
  src: url('assets/fonts/golos-text-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}
* {
    box-sizing: border-box
}

html {
    font-size: calc(16px * var(--scale, 1));
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #f5f1e8;
    color: #252a28;
    font-family: 'Golos Text', Arial, sans-serif;
    --accent: #953c32;
    --line: #d9d3c8;
    --surface: #fffdf8;
    --muted: #686a63
}

button,
input,
textarea,
select {
    font: inherit
}

a {
    color: inherit;
    text-decoration: none
}

button,
a,
select {
    touch-action: manipulation
}

button {
    cursor: pointer;
    border: 1px solid var(--line);
    padding: .7rem 1rem;
    background: transparent;
    color: inherit
}

button:hover,
a:hover {
    color: var(--accent)
}

button:disabled {
    opacity: .5;
    cursor: wait
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid #bc7536;
    outline-offset: 4px
}

.skip {
    position: absolute;
    top: -60px;
    background: white;
    color: black;
    padding: 1rem;
    z-index: 100
}

.skip:hover {
    color: black
}

.skip:focus {
    top: 0
}

.demo {
    padding: .5rem;
    text-align: center;
    background: #ddd4c3;
    font-size: .65rem;
    letter-spacing: .08em
}

header {
    max-width: 1440px;
    margin: auto;
    padding: 1.5rem 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    gap: 1rem
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: .1em
}

.brand small {
    display: block;
    font-size: .55rem;
    letter-spacing: .13em;
    margin-top: .3rem
}

.star {
    font-size: 2rem;
    color: var(--accent)
}

nav {
    display: flex;
    gap: 2rem;
    font-size: .85rem
}

nav a.active {
    border-bottom: 2px solid var(--accent);
    padding-bottom: .4rem
}

#vision {
    font-size: .75rem;
    border: 0
}

#vision:first-letter {
    font-size: 1.3rem
}

#access {
    padding: 1rem 5%;
    background: var(--surface);
    border-bottom: 2px solid;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap
}

#access[hidden] {
    display: none
}

#access label {
    display: flex;
    gap: .4rem;
    align-items: center
}

main {
    max-width: 1440px;
    margin: auto;
    min-height: 65vh
}

.eyebrow {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: bold
}

.home {
    padding: 4rem 6% 3rem
}

.hero {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 5%;
    align-items: center
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1 {
    font-family: 'Literata', Georgia, serif;
    font-size: clamp(3rem, 5.8vw, 5.6rem);
    font-weight: normal;
    line-height: 1.05;
    letter-spacing: -.04em;
    margin: 1.3rem 0 1.5rem
}

h2 {
    font: normal 2.2rem 'Literata', Georgia, serif;
    line-height: 1.15
}

h3 {
    font: normal 1.5rem 'Literata', Georgia, serif
}

p {
    line-height: 1.7
}

.intro {
    max-width: 33rem;
    font-size: 1.05rem;
    color: var(--muted)
}

.primary {
    background: var(--accent);
    color: white;
    border: 0;
    display: inline-flex;
    gap: 3rem;
    padding: 1.1rem 1.5rem
}

.primary:hover {
    color: white;
    filter: brightness(1.1)
}

.notice {
    font-size: .75rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 33rem;
    margin-top: 1rem
}

.portrait {
    min-height: 390px;
    border: 1px solid var(--line);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(0deg, transparent, transparent 39px, #c8c1b52a 40px), #e5ded0;
    overflow: hidden
}

.portrait:before {
    content: 'ГК';
    font: 10rem 'Literata', Georgia, serif;
    opacity: .15;
    letter-spacing: -.1em
}

.portrait .caption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    border-top: 1px solid #ada391;
    padding-top: 1rem
}

.caption strong {
    font: normal 1.6rem 'Literata', Georgia, serif;
    display: block
}

.caption small {
    display: block;
    line-height: 1.6;
    margin-top: .4rem;
    color: var(--muted)
}

.portrait .corner {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: .65rem;
    letter-spacing: .2em
}

.topics {
    margin-top: 4rem;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem
}

.topic-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem
}

.topic {
    padding: 1.3rem 0;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 1rem;
    align-items: start
}

.topic .number {
    font: 1.2rem 'Literata', Georgia, serif;
    color: var(--accent)
}

.topic strong {
    display: block;
    font: 1.5rem 'Literata', Georgia, serif;
    margin-bottom: .6rem
}

.topic small {
    color: var(--muted);
    line-height: 1.6
}

.method {
    display: flex;
    gap: 3rem;
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    margin-top: 3rem
}

.method p {
    font-size: .8rem;
    color: var(--muted);
    flex: 1
}

.chat-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 70vh
}

.history {
    padding: 2rem 1.5rem;
    background: #eae5dc;
    border-right: 1px solid var(--line)
}

.history h2 {
    font: 1rem 'Golos Text', Arial;
    margin-top: 2rem
}

.history button {
    width: 100%;
    text-align: left;
    margin-bottom: .6rem;
    font-size: .85rem;
    border: 0
}

.history .new {
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: 1.5rem
}

.history small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.6;
    display: block
}

.chat-main {
    padding: 2rem 7%;
    max-width: 1000px;
    width: 100%;
    margin: auto
}

.chat-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: 1rem
}

.chat-heading h1 {
    font-size: 2rem;
    margin: .4rem 0
}

.avatar {
    width: 3rem;
    height: 3rem;
    background: #ddd4c3;
    display: grid;
    place-items: center;
    font: 1.2rem 'Literata', Georgia
}

.chat-heading>div {
    flex: 1
}

.message {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--line)
}

.message .who {
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .6rem
}

.question {
    margin-left: 15%;
    text-align: right
}

.answer-text {
    font: 1.15rem/1.85 'Literata', Georgia, serif
}

.answer-tag {
    display: inline-block;
    color: var(--accent);
    font-size: .7rem;
    border: 1px solid var(--line);
    padding: .3rem .5rem;
    margin-bottom: .8rem
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem
}

.actions button {
    padding: .45rem .6rem;
    font-size: .75rem
}

.sources {
    border-left: 2px solid var(--accent);
    padding: .8rem 1rem;
    margin-top: 1rem;
    background: var(--surface)
}

.sources summary {
    cursor: pointer;
    font-size: .8rem
}

.sources p {
    font-size: .8rem;
    margin: 1rem 0 .2rem
}

.composer {
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 1rem
}

.composer label {
    display: block;
    font-size: .7rem;
    color: var(--muted);
    margin-bottom: .5rem
}

.composer textarea {
    resize: vertical;
    min-height: 65px;
    width: 100%;
    background: transparent;
    color: inherit;
    border: 0;
    line-height: 1.5
}

.composer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem
}

.composer-bar small {
    font-size: .65rem;
    color: var(--muted)
}

.scenario {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: .7rem;
    padding: 1rem 0;
    flex-wrap: wrap
}

.scenario select {
    background: var(--surface);
    color: inherit;
    padding: .5rem;
    border: 1px solid var(--line)
}

.status {
    padding: 1rem;
    border-left: 3px solid var(--accent);
    font-size: .85rem;
    background: var(--surface)
}

.about {
    padding: 4rem 10%;
    max-width: 1050px;
    margin: auto
}

.about h1 {
    font-size: 4rem
}

.about section {
    display: grid;
    grid-template-columns: 50px 1fr;
    border-top: 1px solid var(--line);
    padding: 2rem 0;
    gap: 2rem
}

.about .index {
    color: var(--accent);
    font: 1.5rem Georgia
}

.about p {
    color: var(--muted)
}

footer {
    max-width: 1440px;
    margin: auto;
    padding: 2rem 5% 6rem;
    border-top: 1px solid var(--line);
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    font-size: .75rem
}

footer small {
    width: 100%;
    color: var(--muted)
}

.switcher {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: #202622;
    color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 5px 30px #0003;
    border-radius: 2rem;
    z-index: 20;
    white-space: nowrap;
    font-size: .75rem
}

.switcher button {
    border: 0;
    color: white
}

.switcher span {
    padding: 0 .8rem
}

dialog {
    max-width: 600px;
    width: 90%;
    background: var(--surface);
    color: inherit;
    border: 1px solid var(--line);
    padding: 2rem
}

dialog::backdrop {
    background: #0008
}

#close-modal {
    float: right
}

dialog textarea {
    width: 100%;
    min-height: 100px;
    padding: 1rem
}

body.low {
    --scale: 1.2;
    background: var(--accessible-bg, #fff) !important;
    color: var(--accessible-fg, #000) !important;
    --accent: var(--accessible-fg, #000);
    --muted: var(--accessible-fg, #000);
    --surface: var(--accessible-bg, #fff);
    --line: var(--accessible-fg, #000)
}

body.low .demo,
body.low .history,
body.low .avatar {
    background: var(--accessible-bg) !important;
    color: var(--accessible-fg) !important
}

body.low .primary {
    background: var(--accessible-fg) !important;
    color: var(--accessible-bg) !important
}

body.no-decor .portrait {
    display: none
}

body.no-decor .hero {
    display: block
}

body.no-decor * {
    animation: none !important;
    transition: none !important
}

body.spaced {
    letter-spacing: .08em;
    line-height: 2
}

body.spaced p {
    line-height: 2.1
}

@media(max-width:700px) {
    header {
        padding: 1rem 5%;
        flex-wrap: wrap
    }

    .brand {
        font-size: 1.25rem
    }

    nav {
        order: 3;
        width: 100%;
        justify-content: space-between;
        gap: 1rem
    }

    #vision span {
        display: none
    }

    .home {
        padding: 2rem 6%
    }

    .hero,
    body[data-variant=B] .hero {
        display: flex;
        flex-direction: column;
        gap: 1.5rem
    }

    .hero h1 {
        font-size: 3rem
    }

    body[data-variant=B] .hero-copy {
        padding: 0
    }

    .portrait,
    body[data-variant=B] .portrait {
        min-height: 240px;
        width: 100%
    }

    .portrait:before {
        font-size: 7rem
    }

    .caption strong {
        font-size: 1.3rem
    }

    .topic-list {
        display: block
    }

    .method {
        display: block
    }

    .topics {
        margin-top: 2rem
    }

    .chat-layout {
        display: block
    }

    .history {
        padding: 1rem !important;
        border-bottom: 1px solid var(--line);
        border-right: 0
    }

    .history h2,
    .history small {
        display: none
    }

    .history button {
        width: auto;
        display: inline-block;
        margin: 0 .5rem .5rem 0 !important
    }

    .chat-main {
        padding: 1.5rem 6%
    }

    .chat-heading h1 {
        font-size: 1.5rem
    }

    .about {
        padding: 2rem 6%
    }

    .about h1 {
        font-size: 3rem
    }

    .about section {
        grid-template-columns: 25px 1fr;
        gap: 1rem
    }

    .question {
        margin-left: 8%
    }

    .composer-bar small {
        max-width: 130px
    }

    .switcher {
        max-width: 95%;
        font-size: .65rem
    }

    .switcher span {
        white-space: normal;
        text-align: center
    }

    .primary {
        gap: 1.5rem
    }

    .demo {
        line-height: 1.7
    }

    footer {
        padding-bottom: 7rem
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        animation: none !important
    }
}

body.low h1,
body.low h2,
body.low p,
body.low a {
    overflow-wrap: anywhere
}

body.low .about section>* {
    min-width: 0
}

body.low #access label {
    max-width: 100%;
    flex-wrap: wrap
}

body.low #access select {
    max-width: 100%
}

body.low .switcher {
    width: min(95%, 420px)
}

body.low .switcher span {
    min-width: 0;
    white-space: normal
}

html {
    overflow: hidden
}

body {
    height: calc(100dvh - 76px);
    overflow-y: auto
}

body.low {
    height: calc(100dvh - 120px)
}

.switcher {
    bottom: 8px
}

.skip {
    top: 0;
    transform: translateY(-150%)
}

.skip:focus {
    transform: none
}

body[data-variant=B] {
    background: #242625;
    color: #f2f0ea;
    --accent: #eee7d9;
    --line: #525551;
    --surface: #2b2e2b;
    --muted: #c3c5bd;
}

body[data-variant=B] header {
    max-width: 1180px;
    padding: 1.5rem 3rem;
    border-bottom: 1px solid var(--line);
}

body[data-variant=B] .demo {
    background: #353834;
    color: #c9cdc4;
    font-size: .7rem;
    letter-spacing: .02em;
}

body[data-variant=B] .brand {
    font: 1.2rem 'Literata', Georgia, serif;
    letter-spacing: .1em;
}

body[data-variant=B] .brand small {
    font: .6rem 'Golos Text', Arial, sans-serif;
    letter-spacing: .08em;
}

body[data-variant=B] h1 {
    font-family: 'Literata', Georgia, 'Times New Roman', serif;
    font-weight: normal;
    text-transform: none;
    letter-spacing: -.025em;
}

body[data-variant=B] .primary {
    background: #efede5;
    color: #242625;
    padding: .85rem 1.3rem;
    font-size: .95rem;
    gap: 2rem;
}

.museum-home {
    max-width: 1180px;
    padding: 3rem 3rem 1rem;
    margin: auto;
}

.museum-lead {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 4.5rem;
    align-items: center;
}

.museum-portrait {
    margin: 0;
}

.museum-portrait img {
    display: block;
    width: 100%;
    height: auto;
}

.museum-portrait figcaption {
    color: var(--muted);
    font-size: .65rem;
    line-height: 1.5;
    padding-top: .7rem;
}

.museum-portrait a,
.photo-credit a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.section-label {
    font-size: .75rem;
    color: var(--muted);
    margin: 0 0 .7rem;
}

body[data-variant=B] .museum-introduction h1 {
    font-size: 4.5rem;
    line-height: 1.05;
    margin: 0;
}

.subject-dates {
    font: 1.2rem 'Literata', Georgia, serif;
    color: var(--muted);
    margin: .7rem 0 1.4rem;
}

.museum-invitation {
    max-width: 530px;
    font-size: 1.15rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.museum-introduction .notice {
    max-width: 470px;
    font-size: .75rem;
    line-height: 1.65;
    margin: 1.1rem 0 0;
}

.museum-questions {
    margin-top: 2.5rem;
    border-top: 1px solid var(--line);
    padding-top: 1.4rem;
}

.museum-questions h2 {
    font: 1.3rem 'Literata', Georgia, serif;
    margin: 0 0 1rem;
}

.question-rows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.question-rows button {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: .8rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
    line-height: 1.6;
}

.reading-note {
    max-width: 690px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.6;
    margin: 1.8rem 0 1rem;
}

body[data-variant=B] .chat-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    max-width: 1180px;
}

body[data-variant=B] .history {
    display: block;
    padding: 1.5rem;
    border-right: 1px solid var(--line);
    border-bottom: 0;
}

body[data-variant=B] .history h2 {
    display: block;
    font: .8rem 'Golos Text', Arial, sans-serif;
    color: var(--muted);
    margin: 2rem 0 .6rem;
}

body[data-variant=B] .history button {
    display: block;
    width: 100%;
    margin: 0 0 .5rem;
    padding: .7rem .5rem;
    text-align: left;
    font-size: .8rem;
    border: 0;
}

body[data-variant=B] .history .new {
    border: 1px solid var(--line);
}

body[data-variant=B] .chat-main {
    padding: 1.5rem 2.5rem 2rem;
    max-width: none;
    min-width: 0;
}

.profile-photo {
    display: block;
    width: 48px;
    height: auto;
    flex: 0 0 auto;
}

body[data-variant=B] .chat-heading {
    align-items: center;
    gap: 1rem;
    margin: 0;
}

body[data-variant=B] .chat-heading h1 {
    font-size: 1.65rem;
    line-height: 1.2;
    margin: .2rem 0 0;
}

body[data-variant=B] .chat-heading .eyebrow {
    font-size: .65rem;
    text-transform: none;
    letter-spacing: .03em;
}

body[data-variant=B] .chat-main>.notice {
    font-size: .75rem;
    line-height: 1.6;
    max-width: 620px;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.welcome {
    padding: .8rem 0 1rem;
}

.welcome h2 {
    font: 1.4rem 'Literata', Georgia, serif;
    margin: 0 0 .6rem;
}

.welcome p {
    color: var(--muted);
    font-size: .85rem;
    margin: 0;
    line-height: 1.6;
}

body[data-variant=B] .composer {
    margin-top: .5rem;
    padding: 1rem;
}

body[data-variant=B] .composer textarea {
    min-height: 80px;
}

body[data-variant=B] .composer label {
    color: var(--muted);
    font-size: .8rem;
}

body[data-variant=B] .message {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 1rem 0 1.3rem;
}

body[data-variant=B] .question {
    margin-left: 0;
    background: transparent;
}

body[data-variant=B] .question p {
    font: 1.2rem 'Literata', Georgia, serif;
}

body[data-variant=B] .answer-text {
    font: 1rem/1.8 'Golos Text', Arial, sans-serif;
}

body[data-variant=B] .answer-tag {
    color: var(--muted);
    border: 0;
    padding: 0;
}

body[data-variant=B] .sources {
    background: transparent;
    border-left: 0;
    padding: .8rem 0;
    border-top: 1px solid var(--line);
}

.state-examples {
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--muted);
}

.state-examples summary {
    cursor: pointer;
}

body[data-variant=B] .actions button {
    border: 0;
    padding-left: 0;
    padding-right: 1rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-variant=B] .about {
    padding: 2.5rem 3rem;
}

body[data-variant=B] .about h1 {
    font-size: 2.7rem;
}

body[data-variant=B] footer {
    max-width: 1180px;
    padding: 1.5rem 3rem 2rem;
    color: var(--muted);
}

body.low .museum-portrait,
body.no-decor .profile-photo {
    display: none;
}

body.no-decor .museum-lead {
    display: block;
}

body.low[data-variant=B] {
    --muted: var(--accessible-fg);
    --line: var(--accessible-fg);
    --surface: var(--accessible-bg);
    --accent: var(--accessible-fg);
}

@media (max-width: 700px) {
    body[data-variant=B] header {
        padding: .85rem 1.25rem;
    }

    .museum-home {
        padding: 1.5rem 1.25rem;
    }

    .museum-lead {
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 1rem;
        align-items: start;
    }

    .museum-portrait {
        grid-column: 1;
        grid-row: 1;
    }

    .museum-portrait figcaption {
        font-size: .55rem;
    }

    .museum-introduction {
        display: contents;
    }

    .museum-introduction .section-label {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: .65rem;
    }

    body[data-variant=B] .museum-introduction h1 {
        grid-column: 2;
        grid-row: 1;
        margin-top: 1.7rem;
        font-size: 2.4rem;
    }

    .subject-dates {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0 0 1rem;
        font-size: .9rem;
    }

    .museum-invitation,
    .museum-introduction .primary,
    .museum-introduction .notice {
        grid-column: 1/-1;
    }

    .museum-invitation {
        font-size: 1rem;
        margin: .2rem 0;
    }

    .museum-introduction .primary {
        justify-self: start;
    }

    .museum-introduction .notice {
        margin: 0;
    }

    .museum-questions {
        margin-top: 1.8rem;
    }

    .question-rows {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .question-rows button {
        padding: .85rem 0;
    }

    body[data-variant=B] .chat-layout {
        display: block;
    }

    body[data-variant=B] .history {
        display: flex;
        padding: .75rem 1.25rem !important;
        gap: .6rem;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    body[data-variant=B] .history h2 {
        display: none;
    }

    body[data-variant=B] .history button {
        width: auto;
        padding: .4rem .5rem;
        font-size: .7rem;
        margin: 0 !important;
    }

    body[data-variant=B] .chat-main {
        padding: 1rem 1.25rem 1.5rem;
    }

    body[data-variant=B] .chat-heading h1 {
        font-size: 1.4rem;
    }

    .profile-photo {
        width: 35px;
    }

    body[data-variant=B] .chat-main>.notice {
        margin: .7rem 0;
        padding-bottom: .7rem;
        font-size: .65rem;
    }

    .welcome {
        padding: .5rem 0 .8rem;
    }

    .welcome h2 {
        font-size: 1.2rem;
    }

    .welcome p {
        font-size: .75rem;
    }

    body[data-variant=B] .composer {
        padding: .75rem;
    }

    body[data-variant=B] .composer textarea {
        min-height: 64px;
    }

    body[data-variant=B] .primary {
        padding: .7rem 1rem;
        font-size: .85rem;
        gap: 1rem;
    }

    body[data-variant=B] .about {
        padding: 2rem 1.25rem;
    }

    body[data-variant=B] .about h1 {
        font-size: 2rem;
    }

    body[data-variant=B] footer {
        padding: 1.5rem 1.25rem;
    }

    body.no-decor .museum-introduction {
        display: block;
    }

    body.no-decor .museum-introduction h1 {
        margin-top: 1rem;
    }

    body.no-decor .subject-dates {
        margin: .6rem 0 1rem;
    }
}body[data-variant=B] .chat-layout { margin: 0 auto; }
body[data-variant=B] .history { background: #202220; color: #f2f0ea; }
body[data-variant=B] .history button[aria-current=true] { background: #383b36; color: #fff; }
body[data-variant=B] .history button:hover { background: #41453e; color: #fff; }
body[data-variant=B] .history button:focus-visible { outline: 2px solid #eee7d9; outline-offset: 2px; }
body.low[data-variant=B] .history button[aria-current=true],
body.low[data-variant=B] .history button:hover { background: var(--accessible-fg); color: var(--accessible-bg); }
body[data-variant=B] .chat-main { margin: 0; }

body[data-variant=B] .museum-introduction h1 { font-size: 4.1rem; font-weight: 450; font-optical-sizing: auto; line-height: 1.13; }
body[data-variant=B] .chat-heading h1 { font-weight: 450; }
@media (max-width: 700px) {
  body[data-variant=B] .museum-introduction h1 { margin-top: .1rem; font-size: 2.2rem; }
}

[hidden] { display:none !important; }
body, body.low { height:auto; min-height:100vh; padding-bottom:0; }
.demo { white-space:normal; height:auto; line-height:1.5; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body[data-variant=B] .answer-text { font-family:Literata,serif; font-size:1.125rem; line-height:1.65; max-width:65ch; }
.answer-text p { margin:0 0 .85em; }
.answer-text p:last-child { margin-bottom:0; }
.actions { flex-wrap:wrap; gap:.75rem; }
.actions button[aria-pressed=true] { background:var(--fg); outline:2px solid currentColor; }
.anniversary { font-size:1rem; margin:1rem 0; }
.history, .chat-main, .chat-layout, main { min-width:0; }
.history button { max-width:100%; white-space:normal; overflow-wrap:break-word; }
body.low nav a { overflow-wrap:normal; word-break:normal; }
body.low nav { display:flex; flex-direction:column; align-items:flex-start; }
body.low #access { flex-wrap:wrap; }
body.low #access label { min-width:0; max-width:100%; }
body.low #access select { max-width:100%; }
.state-examples label, .state-examples select { display:block; margin:.7rem 0; max-width:100%; }
#finish { margin:.6rem 0; }
@keyframes paragraphAppear { from {opacity:0} to {opacity:1} }
@keyframes penAppear { from {clip-path:polygon(0 0,0 0,0 0,0 0)} 45% {clip-path:polygon(0 0,100% 0,100% 48%,0 48%)} to {clip-path:polygon(0 0,100% 0,100% 100%,0 100%)} }
.paragraph-reveal p { animation:paragraphAppear 450ms both; animation-delay:var(--delay); }
.line-reveal p { animation:penAppear 800ms both; animation-delay:var(--delay); }
@media(max-width:700px) {
 body[data-variant=B] .history { display:flex; flex-direction:column; width:100%; max-width:100%; gap:.3rem; }
 body[data-variant=B] .history button { flex:none; width:100%; min-width:0; text-align:left; }
 body[data-variant=B] .history h2 { display:block; }
 body.low header { display:flex; flex-direction:column; align-items:flex-start; }
 body.low header nav { width:100%; }
 body.low .chat-layout { display:block; }
 body.low .composer-bar { flex-wrap:wrap; gap:.75rem; }
 body.low .composer, body.low .chat-main { max-width:100%; }
 body.low .about section { display:block; }
}
@media(prefers-reduced-motion:reduce) { .revealing p { animation:none; } }
body.low .revealing p { animation:none; }
html { overflow:auto; }
body { overflow-y:visible; }

.line-reveal p { animation:none; }

body[data-variant=B] .chat-heading { gap:1.25rem; border-bottom:0; padding-bottom:0; }
body[data-variant=B] .profile-photo { width:80px; height:100px; object-fit:cover; object-position:50% 22%; }
body[data-variant=B] .chat-heading h1 { font-size:1.9rem; margin:0 0 .5rem; }
.identity-dates { margin:0; font-size:.8rem; line-height:1.6; color:var(--muted); }
.identity-dates span { display:block; }
body[data-variant=B] .chat-main>.notice { max-width:65ch; margin:1.1rem 0 1.3rem; padding-bottom:1.3rem; font-size:.8rem; }
body[data-variant=B] .welcome { padding:.35rem 0 1.1rem; }
.composer { display:grid; gap:.75rem; }
body[data-variant=B] .composer { border:0; padding:1rem 0 0; background:transparent; }
.composer label { margin:0; }
.composer textarea { display:block; box-sizing:border-box; min-width:0; padding:.8rem; border:1px solid var(--line); background:var(--surface); }
body[data-variant=B] .composer textarea { min-height:104px; }
.composer textarea:focus-visible { outline-offset:3px; }
.composer-bar { min-width:0; flex-wrap:wrap; gap:.75rem 1rem; padding-top:.25rem; }
.composer-bar small { line-height:1.5; font-size:.7rem; }
.composer-bar .primary { margin-left:auto; min-height:44px; }
.chat-heading>div { min-width:0; }
body.low .identity-dates { color:inherit; }
@media(max-width:700px) {
 body[data-variant=B] .profile-photo { width:64px; height:82px; }
 body[data-variant=B] .chat-heading { gap:1rem; }
 body[data-variant=B] .chat-heading h1 { font-size:1.5rem; }
 .identity-dates { font-size:.72rem; }
 body[data-variant=B] .chat-main>.notice { font-size:.75rem; padding-bottom:1rem; }
 body[data-variant=B] .composer { padding:1rem 0 0; }
 body[data-variant=B] .composer textarea { min-height:112px; }
 .composer-bar small { font-size:.7rem; }
}
body[data-variant=B] .chat-heading { position:relative; min-height:132px; gap:1.5rem; align-items:center; background:linear-gradient(90deg,rgba(213,203,181,.06),transparent 68%); }
body[data-variant=B] .profile-photo { width:116px; height:132px; object-position:50% 18%; filter:grayscale(1) contrast(.93); mix-blend-mode:luminosity; mask-image:linear-gradient(90deg,#000 72%,transparent),linear-gradient(0deg,transparent,#000 22%); mask-composite:intersect; }
body[data-variant=B] .chat-heading h1 { font-size:2rem; }
body.low[data-variant=B] .chat-heading { background:none; }
@media(max-width:700px) {
 body[data-variant=B] .chat-heading { min-height:108px; gap:.85rem; }
 body[data-variant=B] .profile-photo { width:90px; height:108px; }
 body[data-variant=B] .chat-heading h1 { font-size:1.45rem; }
}

.demo-controls { margin:1rem 0 1.5rem; padding:1.25rem; border:1px solid var(--line); background:var(--surface); }
.demo-controls h2 { font-size:1.1rem; margin:0 0 .6rem; }
.demo-controls p { font-size:.85rem; max-width:70ch; line-height:1.6; }
.demo-fields { display:flex; align-items:end; flex-wrap:wrap; gap:1rem; }
.demo-fields label { display:grid; gap:.5rem; font-size:.85rem; min-width:0; }
.demo-fields select { max-width:100%; padding:.65rem; background:var(--surface); color:inherit; border:1px solid var(--line); }
.demo-fields button { padding:.7rem 1rem; min-height:44px; }
.source-card { max-width:65ch; margin:1rem 0; border-left:2px solid var(--line); padding:.6rem 1rem; font-size:.85rem; line-height:1.6; }
.source-card summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.source-card a { text-decoration:underline; }
body[data-variant=B] .question { max-width:55ch; margin-left:0; text-align:left; padding:.75rem 0; }
body[data-variant=B] .question p { font:1rem/1.6 'Golos Text',sans-serif; margin:.4rem 0; }
body[data-variant=B] .question .who { text-align:left; }
@media(pointer:coarse) { .composer-bar small { display:none; } }
@media(max-width:700px) { .demo-fields { display:grid; } .demo-fields label { width:100%; } .composer-bar small { flex-basis:100%; } }
.demo-fields label:first-child { flex:1 1 18rem; max-width:24rem; }
.demo-fields select { width:100%; min-width:0; }
@media(max-width:700px) { .demo-fields label:first-child { max-width:none; } }

body, body.low { display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
header, #access, footer { flex-shrink:0; }
header, footer { width:100%; }
main { flex:1 0 auto; width:100%; min-height:0; margin:0 auto; }
footer, body[data-variant=B] footer { margin:0 auto; padding-bottom:1.5rem; }
body[data-variant=B] .brand { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; letter-spacing:0; line-height:1.25; white-space:nowrap; }
body[data-variant=B] .brand small { margin:0; font-size:.65rem; letter-spacing:.01em; color:var(--muted); }
main h1[tabindex="-1"]:focus, main:focus { outline:none; }
body[data-variant=B] .about { width:100%; max-width:940px; padding:3rem 3rem 3.5rem; }
body[data-variant=B] .about h1 { max-width:23ch; font-size:clamp(2rem,3.2vw,3rem); line-height:1.2; margin:.8rem 0 1.25rem; }
.about .intro { max-width:60ch; line-height:1.7; margin-bottom:2rem; }
.about section { grid-template-columns:2rem minmax(0,1fr); gap:1.5rem; padding:1.5rem 0; }
.about section h2 { font-size:1.6rem; line-height:1.3; margin:0 0 .8rem; }
.about section p { max-width:62ch; line-height:1.7; margin:0; }
.about .index { font-size:1.1rem; padding-top:.2rem; }
.about>.primary { margin-top:.75rem; }
@media(max-width:700px) {
 body[data-variant=B] header { flex-wrap:wrap; align-items:center; gap:1rem; }
 body[data-variant=B] header nav { order:3; width:100%; gap:1.5rem; }
 body[data-variant=B] .brand { font-size:1.1rem; }
 body[data-variant=B] .brand small { font-size:.6rem; }
 body[data-variant=B] .about { padding:2rem 1.25rem; }
 .about section { gap:.85rem; grid-template-columns:1.5rem minmax(0,1fr); }
 .about section h2 { font-size:1.3rem; }
}

.demo-fields { align-items:end; }
.demo-fields select, .demo-fields button { height:44px; min-height:44px; line-height:1.25; box-sizing:border-box; margin:0; }
.demo-fields button { align-self:end; }

.demo-fields label { position:relative; }
.demo-fields select { appearance:none; -webkit-appearance:none; padding-right:2.75rem; }
.demo-fields label::after {
 content:""; position:absolute; pointer-events:none;
 right:1.1rem; bottom:19px; width:6px; height:6px;
 border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
 transform:rotate(45deg);
}
@media(forced-colors:active) {
 .demo-fields select { appearance:auto; -webkit-appearance:auto; padding-right:.65rem; }
 .demo-fields label::after { display:none; }
}