/* The artist's paper UI and a night-carriage palette share the same artwork. */
/* Leptos keys the image by its encoded PNG: only a changed QR enters again. */
@keyframes qr-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.qr-result { animation: qr-reveal 280ms cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .qr-result { animation: none; } }
:root,
html[data-theme="light"] {
  color-scheme: light;
  --ink: #292c2c;
  --muted: #626661;
  --dim: #73786f;
  --paper: #f3f0e7;
  --panel: #e6e1d7;
  --panel-raised: #faf8f0;
  --panel-soft: #ede9df;
  --line: #c8c3b8;
  --accent: #79612b;
  --accent-soft: #bca16a;
  --field: #fffdf7;
  --header-fill: #f3f0e7f5;
  --page-haze: #d7d0bb30;
  --bot-bubble: #e5e7df;
  --user-bubble: #434c46;
  --user-ink: #f8f2df;
  --focus: #79612b;
  --ochre: var(--accent);
  --cold: #777d7b;
  --sync-text: var(--ink);
  --sync-ink: var(--ink);
  --sync-muted: var(--muted);
  --sync-panel: var(--panel-raised);
  --sync-panel-2: var(--panel-soft);
  --sync-panel-shadow: #141d2815;
  --sync-accent: var(--accent);
  --sync-highlight: var(--accent-soft);
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e9e5d9;
  --muted: #b4b9b7;
  --dim: #a3acae;
  --paper: #151c25;
  --panel: #252e39;
  --panel-raised: #202935;
  --panel-soft: #1a232d;
  --line: #46515c;
  --accent: #ddc081;
  --accent-soft: #ad965e;
  --field: #17212b;
  --header-fill: #151c25f5;
  --page-haze: #62757b1c;
  --bot-bubble: #2b3641;
  --user-bubble: #d1b579;
  --user-ink: #20252a;
  --focus: #e5c989;
  --cold: #9fadb4;
  --sync-panel-shadow: #00000030;
}

body {
  background: radial-gradient(ellipse at 5% 30%, var(--page-haze), transparent 65%), var(--paper);
  color: var(--ink);
}
/* Reserve the same content width whether the current page needs scrolling. */
html:has(body:not([data-page="home"])) { scrollbar-gutter: stable; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.scratch-button:focus-visible { outline-color: var(--focus); }
::selection { background: var(--accent); color: var(--paper); }
.site-header { background: var(--header-fill); gap: 18px; }
.site-header nav { margin-left: auto; }
.logo-slot { color: var(--ink); }
.logo-slot img { display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.16); }
.logo-slot svg { fill: currentColor; }
.logo-slot .logo-line { stroke: var(--paper); }
.hero h1, .hero h1 em, .page-heading { color: var(--ink); }
/* Fit the complete title to its content column, including narrow phones. */
.hero { container-type: inline-size; }
.hero h1 {
  white-space: nowrap;
  font-size: clamp(1.125rem, 8.6cqi, 68px);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.eyebrow, .bio, .education p, .education li, .contribution p, .achievement p,
.job-copy, .job .date-location, .social-link small, .back-link { color: var(--muted); }
.education h3, .job .company, .social-link strong { color: var(--ink); }
.resume-section, .contribution, .social-list, .social-link, .timeline { border-color: var(--line); }
.external-arrow, .social-monogram { color: var(--accent); }
.social-monogram { border-color: var(--line); }
.social-icon { width:23px;height:23px;display:block;fill:currentColor; }
.entry-index { color: var(--dim); }
.expertise-list li { border-color: var(--line); color: var(--ink); background: var(--panel-soft); }
.achievement { border-color: var(--line); background: var(--panel-soft); }
.job::before { background: var(--accent); box-shadow: 0 0 0 4px var(--paper); }
body[data-page="portfolio"] .resume-section:last-child { border-bottom: 0; }

.course-list { display: grid; gap: 18px; }
.course-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-raised);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.course-card h2 { font-size: 23px; line-height: 1.5; font-weight: 700; }
.course-card p { margin-top: 12px; font-size: 17px; line-height: 1.8; color: var(--muted); }
.course-open-icon { color: var(--accent); margin-top: 5px; }
.course-card:hover { border-color: var(--accent); color: var(--accent); background: var(--panel-soft); }

/* Small controls use the same worn sign frame as the navigation. */
.theme-toggle.scratch-button,
.menu-toggle.scratch-button,
.chat-form .chat-send.scratch-button,
.qr-download.scratch-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #eee9d9;
  min-height: 48px;
  padding: 10px 14px;
  line-height: 1.3;
  transition: color .15s, transform .15s;
}
.theme-toggle.scratch-button { flex: 0 0 48px; width: 48px; }
.menu-toggle.scratch-button { display: none; gap: 9px; font-size: 19px; }
.menu-glyph { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.menu-glyph path { transition: transform 180ms ease, opacity 180ms ease; }
[aria-expanded="true"] .menu-line-top { transform: translateY(5px) rotate(45deg); transform-origin: 12px 7px; }
[aria-expanded="true"] .menu-line-middle { opacity: 0; }
[aria-expanded="true"] .menu-line-bottom { transform: translateY(-5px) rotate(-45deg); transform-origin: 12px 17px; }
.theme-toggle .tab-icon { width: 23px; height: 23px; flex-basis: 23px; }
.theme-toggle.scratch-button:hover,
.chat-form .chat-send.scratch-button:hover,
.qr-download.scratch-button:hover { color: #e3c779; transform: translateY(-1px) rotate(-.4deg); }
.theme-toggle.scratch-button:active,
.chat-form .chat-send.scratch-button:active,
.qr-download.scratch-button:active { transform: translateY(1px); }
.theme-toggle:disabled, .chat-send:disabled { transform: none; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
.site-header nav .scratch-button[aria-current="page"] { color: #e3c779; }
.section-placard, .section-placard.page-heading { color: #eee9d9; }
#section-about .section-placard { color: #e3c779; }
html[data-theme="dark"] .scratch-button::before,
html[data-theme="dark"] .section-placard::before { filter: drop-shadow(1px 2px 0 #0007); }

/* Message content stays still and scrolls independently from the train. */
.chat-shell {
  min-width: 0;
  border-color: var(--line);
  background: var(--panel-raised);
  height: calc(100dvh - var(--header) - 60px);
  min-height: 470px;
}
.chat-header { background: var(--panel-soft); border-color: var(--line); flex-shrink: 0; }
.chat-header small { color: var(--muted); }
.chat-header > div { min-width: 0; }
.chat-language { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-shrink: 0; }
.chat-language button {
  min-width: 32px;
  min-height: 36px;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.3;
}
.chat-language button:hover { color: var(--ink); border-color: var(--line); }
.chat-language button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-soft); background: var(--panel); }
.avatar { border-color: var(--line); background: var(--panel); }
.avatar-bot img { width: 360%; height: auto; left: 44%; top: -100%; transform: translateX(-50%); }
.chat-body { min-height: 0; overscroll-behavior: contain; scrollbar-color: var(--line) transparent; }
.message { min-width: 0; }
.message-text {
  min-width: 0;
  max-width: calc(100% - 43px);
  background: var(--bot-bubble);
  color: var(--ink);
  white-space: normal;
  overflow-wrap: anywhere;
}
.message-text > p, .message-copy { white-space: pre-wrap; }
.message.user .message-text { background: var(--user-bubble); color: var(--user-ink); }
.message-text > * + * { margin-top: 12px; }
.message-text p + p { margin-top: 10px; }
.message-rich, .sync-rich, .message-math, .message-plot {
  min-width: 0;
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.message-rich, .sync-rich { font-size: 16px; line-height: 1.7; white-space: normal; }
.message-rich a, .sync-rich a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.message-rich img, .sync-rich img { max-width: 100%; height: auto; }
.message-rich svg:not(.sync-timeline-rail), .sync-rich svg:not(.sync-timeline-rail),
.message-plot svg { max-width: 100%; }
.message-plot {
  padding: 12px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 3px 1px 4px 2px;
  background: var(--panel-soft);
  color: var(--ink);
  box-shadow: 1px 2px 0 var(--line);
}
.message-plot svg { display: block; height: auto; color: var(--ink); }
.message-plot svg .frame { fill: var(--panel-soft); stroke: var(--line); stroke-width: 1; }
.message-plot svg .grid { stroke: var(--line); stroke-width: 1; opacity: .55; stroke-dasharray: 3 5; }
.message-plot svg .axis { stroke: var(--muted); stroke-width: 1.2; opacity: .85; }
.message-plot svg .curve { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.message-plot svg .frame, .message-plot svg .grid,
.message-plot svg .axis, .message-plot svg .curve { vector-effect: non-scaling-stroke; }
.message-plot svg text { fill: var(--muted); font-family: var(--font-ui) !important; }
.message-plot svg .label { fill: var(--ink); }
/* Captions outside the SVG retain readable type when the graph shrinks. */
.message-plot svg.plot-chart .label, .message-plot svg.plot-chart .tick { display: none; }
.plot-caption { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); font-size: 17px; line-height: 1.5; }
.plot-expression { color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.plot-range { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3px 18px; margin-top: 4px; font-size: 15px; color: var(--muted); }
.plot-range > * { min-width: 0; overflow-wrap: anywhere; }
.message-math { padding: 11px 13px; border-left: 2px solid var(--accent-soft); background: var(--panel-soft); color: var(--ink); }
.message-math math { font-size: 1.05em; }
/* Math symbols need a math face; the surrounding interface remains Replay. */
.message-math math, .message-math math * { font-family: "Cambria Math", "STIX Two Math", math !important; }
.message-text pre { white-space: pre; overflow: auto; max-width: 100%; }
.latent-guide-more summary { cursor: pointer; color: var(--accent); padding-block: 6px; }
.latent-guide-less-label, .latent-guide-more[open] .latent-guide-more-label { display: none; }
.latent-guide-more[open] .latent-guide-less-label { display: inline; }
.message-status, .chat-status { color: var(--muted); font-size: 14px; }
.chat-form { background: var(--panel-soft); border-color: var(--line); align-items: center; flex-shrink: 0; }
.chat-form input, .chat-form textarea {
  min-width: 0;
  color: var(--ink);
  background: var(--field);
  border-color: var(--line);
  border-radius: 7px;
  font-size: 18px;
  line-height: 1.5;
}
.chat-form input::placeholder, .chat-form textarea::placeholder { color: var(--dim); opacity: 1; }
.chat-form .chat-send.scratch-button { flex: 0 0 52px; width: 52px; min-height: 49px; padding: 11px; }
.chat-send .tab-icon { width: 25px; height: 25px; flex-basis: 25px; }
.chat-disclosure { background: var(--panel-soft); color: var(--muted); }
.chat-error, .qr-status[data-state="error"] { color: #a0463a; }
html[data-theme="dark"] .chat-error,
html[data-theme="dark"] .qr-status[data-state="error"] { color: #efaa93; }

.qr-card { color: var(--ink); background: var(--panel-raised); border-color: var(--line); }
.qr-card p, .qr-disclosure, .qr-status { color: var(--muted); }
.qr-space { width: 100%; max-width: 340px; margin-inline: auto; background: #fff; border-color: var(--line); color: #333; }
.qr-space img, .qr-space svg { background: #fff; filter: none; }
.qr-amount { display: grid; gap: 7px; margin-top: 18px; color: var(--ink); font-size: 18px; }
.qr-amount input, input.qr-amount {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: var(--field);
  font-size: 19px;
}
.qr-download.scratch-button { width: 100%; font-size: 20px; gap: 10px; }
.qr-status { min-height: 1.6em; margin-top: 12px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.qr-select { background: var(--user-bubble); color: var(--user-ink); }
.qr-select:focus-within { outline-color: var(--focus); }
.qr-download[hidden] { display: none !important; }
.qr-generate { margin-top: 12px; font-size: 18px; }

@media (max-width: 760px) {
  .course-card { padding: 20px; gap: 12px; }
  .course-card h2 { font-size: 21px; }
  .chat-shell { min-height: 380px; height: calc(100dvh - var(--header) - 40px); max-height: none; }
  .chat-body { padding: 18px 13px; }
  .message { gap: 8px; }
  .message .avatar { flex-basis: 28px; width: 28px; height: 28px; }
  .message-text { max-width: calc(100% - 36px); padding: 12px; }
  .message-rich, .sync-rich { font-size: 15px; }
  .chat-form { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 7px; }
  .chat-form input { padding: 10px 12px; font-size: 17px; }
  .chat-form .chat-send.scratch-button { flex-basis: 46px; width: 46px; min-height: 46px; }
}
@media (max-width: 640px) {
  .chat-header { padding: 13px; gap: 10px; }
  .chat-header h1 { font-size: 27px; }
  .chat-header small { font-size: 12px; }
  .chat-language { gap: 1px; }
  .chat-language button { min-width: 29px; padding-inline: 4px; font-size: 15px; }
  .message-rich .sync-timeline-row, .sync-rich .sync-timeline-row { grid-template-columns: 20px minmax(0, 1fr) !important; gap: 8px !important; }
  .message-rich .sync-timeline-rail, .sync-rich .sync-timeline-rail { left: 0 !important; width: 20px !important; }
  .message-rich .sync-timeline-card, .sync-rich .sync-timeline-card { padding: 10px !important; }
}
@media (max-width: 370px) {
  .message .avatar { display: none; }
  .message-text { max-width: 100%; }
  .qr-card { padding: 16px; }
}
@media (max-height: 520px) and (max-width: 760px) {
  .chat-shell { min-height: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle.scratch-button, .chat-form .chat-send.scratch-button, .qr-download.scratch-button { transition: none; }
  .theme-toggle.scratch-button:hover, .chat-form .chat-send.scratch-button:hover, .qr-download.scratch-button:hover { transform: none; }
}

/* A compact header and a floating disclosure keep the art above the fold. */
@keyframes navigation-reveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 900px) {
  :root { --header: 72px; }
  .site-header { gap: 10px; padding: 12px 20px; height: var(--header); }
  .site-header .logo-slot { flex: 0 0 44px; width: 44px; height: 44px; margin: 0 auto 0 0; }
  .menu-toggle.scratch-button { display: inline-flex; min-height: 44px; min-width: 102px; padding: 10px 13px; }
  .theme-toggle.scratch-button { flex-basis: 44px; width: 44px; min-height: 44px; padding: 11px; }
  .site-header nav {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 20px;
    left: 20px;
    width: auto;
    height: auto;
    margin: 0 0 0 auto;
    max-width: 420px;
    max-height: calc(100dvh - var(--header) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-raised);
    box-shadow: 0 16px 40px var(--sync-panel-shadow), 0 3px 8px var(--sync-panel-shadow);
  }
  .site-header[data-menu-open="true"] nav { display: grid; animation: navigation-reveal 180ms ease-out both; }
  .site-header nav .scratch-button {
    justify-content: flex-start;
    min-width: 0;
    min-height: 56px;
    padding: 12px;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--panel-soft);
    color: var(--ink);
    font-size: 19px;
    letter-spacing: 0;
  }
  .site-header nav .scratch-button::before { display: none; }
  .site-header nav .scratch-button:hover,
  .site-header nav .scratch-button[aria-current="page"] {
    transform: none;
    border: 1px solid var(--accent-soft);
    background: var(--panel);
    color: var(--accent);
  }
  .site-header nav .tab-icon { width: 21px; height: 21px; flex-basis: 21px; }
  .site-header nav a:focus-visible { outline-offset: 1px; }
}
@media (max-width: 370px) {
  .site-header { padding-inline: 16px; }
  .site-header nav { left: 16px; right: 16px; }
  .site-header nav .scratch-button { padding-inline: 10px; gap: 8px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header[data-menu-open="true"] nav { animation: none; }
  .menu-toggle.scratch-button, .menu-glyph path { transition: none; }
}