@font-face {
  font-family:JournalDisplay;
  font-style:normal;
  font-weight:200 800;
  src:url('/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');
  font-display:swap;
}
@font-face {
  font-family:JournalDisplay;
  font-style:italic;
  font-weight:200 800;
  src:url('/fonts/newsreader-latin-opsz-italic.woff2') format('woff2');
  font-display:swap;
}
@media(min-width:701px) and (max-width:1100px) {
  .shell {
    max-width:42rem;
  }
}
:root {
  color-scheme: light;
  --bg: #faf7f1;
  --surface: rgba(255, 252, 247, .82);
  --surface-soft: rgba(127, 153, 171, .11);
  --ink: #1b1c1e;
  --muted: #5f6873;
  --line: rgba(92, 104, 128, .17);
  --mark-a: #c8673f;
  --mark-b: #7f99ab;
  --selected: rgba(214, 104, 62, .12);
  --link: #3b5f82;
  --shadow: 0 8px 30px rgba(92, 104, 128, .035);
  --danger: #9c4527;
  /* Same generated Monet / Starry Night painting layers as the homepage. */
  --bg-wash:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.05' numOctaves='3' seed='4' result='n'/%3E%3CfeColorMatrix values='0 0 0 0 0.910 0 0 0 0 0.588 0 0 0 0 0.424 1.2 0 0 0 -0.74'/%3E%3C/filter%3E%3Cfilter id='h' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005 0.07' numOctaves='3' seed='23' result='n'/%3E%3CfeColorMatrix values='0 0 0 0 1.000 0 0 0 0 0.980 0 0 0 0 0.941 0 1.2 0 0 -0.76'/%3E%3C/filter%3E%3ClinearGradient id='gmt' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='0.5' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='mt'%3E%3Crect width='1200' height='800' fill='url(%23gmt)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1200' height='800' filter='url(%23w)' mask='url(%23mt)'/%3E%3Crect width='1200' height='800' filter='url(%23h)'/%3E%3C/svg%3E"),
    radial-gradient(11vmin 0.7vmin at 9% 71vh, rgba(78, 116, 136, 0.26) 30%, transparent 100%),
    radial-gradient(6vmin 0.5vmin at calc(9% + 3vmin) calc(71vh + 0.9vmin), rgba(78, 116, 136, 0.16) 30%, transparent 100%),
    radial-gradient(9vmin 0.65vmin at 92% 81vh, rgba(78, 116, 136, 0.22) 30%, transparent 100%),
    radial-gradient(5vmin 0.45vmin at calc(92% - 2.5vmin) calc(81vh + 0.8vmin), rgba(78, 116, 136, 0.14) 30%, transparent 100%),
    linear-gradient(180deg, rgba(240, 186, 146, 0.3) 0%, rgba(238, 198, 172, 0.2) 22%, rgba(172, 172, 196, 0.17) 42%, rgba(116, 150, 164, 0.17) 70%, rgba(88, 126, 144, 0.2) 100%);
  --bg-orb:
    radial-gradient(circle at 86% 22vh, rgba(236, 98, 46, 0.7) 0, rgba(228, 92, 44, 0.6) 1.1vmin, rgba(230, 104, 56, 0.3) 1.8vmin, rgba(236, 132, 84, 0.1) 2.9vmin, transparent 5vmin),
    radial-gradient(18vmin 8vmin at 86% 22vh, rgba(240, 150, 104, 0.14), transparent 70%),
    radial-gradient(4.2vmin 0.55vmin at 86.4% 36vh, rgba(222, 96, 48, 0.42) 30%, transparent 100%),
    radial-gradient(3.4vmin 0.5vmin at 85.4% 40vh, rgba(222, 96, 48, 0.35) 30%, transparent 100%),
    radial-gradient(5vmin 0.6vmin at 86.8% 45vh, rgba(214, 92, 46, 0.29) 30%, transparent 100%),
    radial-gradient(3vmin 0.5vmin at 85.6% 50vh, rgba(214, 92, 46, 0.23) 30%, transparent 100%),
    radial-gradient(4.4vmin 0.55vmin at 86.2% 56vh, rgba(206, 88, 44, 0.17) 30%, transparent 100%),
    radial-gradient(2.8vmin 0.5vmin at 85.2% 62vh, rgba(206, 88, 44, 0.11) 30%, transparent 100%);
  --night-wash:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.00583 0.0267' numOctaves='3' seed='5' result='n'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0019' numOctaves='1' seed='55' result='f'/%3E%3CfeDisplacementMap in='n' in2='f' scale='155' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix values='0 0 0 0 0.408 0 0 0 0 0.612 0 0 0 0 0.871 0.85 0 0 0 -0.53'/%3E%3C/filter%3E%3Cfilter id='t' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0075 0.0311' numOctaves='3' seed='17' result='n'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0019' numOctaves='1' seed='67' result='f'/%3E%3CfeDisplacementMap in='n' in2='f' scale='155' xChannelSelector='R' yChannelSelector='G'/%3E%3CfeColorMatrix values='0 0 0 0 0.361 0 0 0 0 0.667 0 0 0 0 0.706 0 0.75 0 0 -0.5'/%3E%3C/filter%3E%3ClinearGradient id='gms' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='1'/%3E%3Cstop offset='0.7' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='ms'%3E%3Crect width='100%25' height='100%25' fill='url(%23gms)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' mask='url(%23ms)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23t)' mask='url(%23ms)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 4% 28vh, rgba(255, 240, 190, 0.75) 0 0.3vmin, rgba(246, 214, 130, 0.2) 0.9vmin, transparent 1.8vmin),
    radial-gradient(circle at 6% 62vh, rgba(255, 240, 190, 0.7) 0 0.3vmin, rgba(246, 214, 130, 0.18) 0.9vmin, transparent 1.8vmin),
    radial-gradient(circle at 96% 46vh, rgba(255, 240, 190, 0.65) 0 0.3vmin, rgba(246, 214, 130, 0.16) 0.9vmin, transparent 1.8vmin),
    radial-gradient(14vmin 75vh at 4% 100%, rgba(6, 14, 14, 0.5), transparent 70%),
    radial-gradient(9vmin 50vh at 6.5% 100%, rgba(6, 14, 14, 0.36), transparent 70%),
    linear-gradient(180deg, rgba(28, 46, 128, 0.6) 0%, rgba(34, 58, 144, 0.45) 32%, rgba(22, 40, 104, 0.32) 62%, rgba(8, 14, 34, 0.35) 100%);
  --night-orb:
    radial-gradient(circle at 87% 13vh, rgba(252, 226, 150, 0.6) 0 1.4vmin, rgba(244, 188, 88, 0.24) 2.2vmin, rgba(244, 188, 88, 0.1) 3.8vmin, transparent 5.4vmin),
    radial-gradient(26vmin 26vmin at 87% 13vh, rgba(246, 218, 150, 0.06), transparent 70%);
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: #0c1128;
  --surface: rgba(18, 27, 57, .88);
  --surface-soft: rgba(154, 184, 232, .1);
  --ink: #e6e8ef;
  --muted: #9da7bd;
  --line: rgba(150, 176, 232, .15);
  --mark-a: #d6b462;
  --mark-b: #6e90c8;
  --selected: rgba(222, 186, 98, .14);
  --link: #a9c6ee;
  --shadow: 0 8px 30px #0000000a;
  --danger: #edaaa1;
  --bg-wash: var(--night-wash);
  --bg-orb: var(--night-orb);
}
* {
  box-sizing:border-box;
}
body {
  isolation:isolate;
  min-height:100vh;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -2%;
  pointer-events: none;
}
body::before {
  background-image: var(--bg-wash);
  z-index: -2;
}
body::after {
  background-image: var(--bg-orb);
  z-index: -1;
}
button,input,textarea,select {
  font:inherit;
  color:inherit;
}
button,a,input,textarea,summary,select {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button {
  border:0;
  background:transparent;
}
button:disabled {
  opacity:.5;
  cursor:wait;
}
button,a,input,textarea,select,summary {
  outline-offset:5px;
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--mark-b);
}
a {
  color:var(--link);
  text-decoration:none;
}
button {
  transition:background .15s,color .15s;
}
button:hover {
  background:var(--surface-soft);
}
[hidden] {
  display:none!important;
}
svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
h1,h2,h3,p {
  margin:0;
}
h1 {
  font-size:28px;
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.5;
  font-family:"Kaiti SC","STKaiti",serif;
}
h2 {
  font-size:18px;
  font-weight:550;
}
h3 {
  font-size:15px;
  font-weight:600;
}
.shell {
  width:min(calc(100% - 64px),50rem);
  margin:auto;
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px 0 29px;
  border-bottom:1px solid var(--line);
}
.brand {
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:18px;
}
.brand-name {
  font-family:"Kaiti SC","STKaiti",serif;
  font-size:31px;
  letter-spacing:.1em;
}
.brand-dot {
  color:var(--mark-a);
}
.brand-note {
  font-size:12px;
  letter-spacing:.12em;
  color:var(--muted);
}
.header-actions {
  display:flex;
  gap:10px;
}
.icon-button {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  font-size:25px;
}
.greeting {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:36px 0 23px;
  gap:16px;
}
.eyebrow {
  font-size:12px;
  color:var(--muted);
  margin-bottom:9px;
  letter-spacing:.08em;
}
.small-serif {
  font-family:JournalDisplay,Georgia,serif;
  font-style:italic;
  color:var(--muted);
  font-size:15px;
}
.composer {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:18px;
  padding:19px 22px 17px;
  box-shadow:var(--shadow);
}
.composer:focus-within {
  border-color:var(--link);
}
.composer-head,.composer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.segmented {
  display:flex;
  gap:3px;
  background:var(--surface-soft);
  padding:3px;
  border-radius:8px;
}
.segmented button {
  font-size:13px;
  padding:3px 14px;
  border-radius:6px;
  color:var(--muted);
}
.segmented button[aria-pressed=true] {
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 3px #00000008;
}
.quiet {
  color:var(--muted);
  font-size:13px;
}
.composer textarea {
  width:100%;
  background:transparent;
  border:0;
  outline:none;
  resize:vertical;
  min-height:120px;
  max-height:500px;
  padding:19px 0 13px;
  line-height:1.9;
  font-size:16px;
}
.composer textarea::placeholder {
  color:var(--muted);
  opacity:.8;
}
.composer-bottom {
  padding-top:13px;
  border-top:1px solid var(--line);
}
.record-date {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px;
}
.record-date svg {
  width:16px;
  height:16px;
}
.record-date input {
  border:0;
  background:transparent;
  padding:3px 0;
  max-width:125px;
  min-width:0;
}
.save-actions {
  display:flex;
  align-items:center;
  gap:14px;
}
.keyboard-hint {
  font-size:11px;
  color:var(--muted);
  letter-spacing:.04em;
}
.primary,.secondary,.danger {
  border-radius:9px;
  padding:8px 17px;
  font-size:13px;
  font-weight:550;
}
.primary {
  background:var(--link);
  color:var(--bg);
}
.primary:hover {
  background:var(--ink);
}
.primary span {
  padding-left:13px;
}
.secondary {
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.danger {
  background:var(--danger);
  color:var(--bg);
}
.danger:hover {
  opacity:.85;
}
.calendar-section {
  margin:0 0 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  overflow:hidden;
}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  font-size:13px;
  font-weight:550;
  gap:12px;
}
summary::-webkit-details-marker {
  display:none;
}
.summary-hint {
  color:var(--muted);
  font-size:11px;
  font-weight:400;
}
.summary-hint > span:last-child {
  display:inline-block;
  margin-left:14px;
  transition:transform .2s;
}
details[open] .summary-hint > span:last-child {
  transform:rotate(180deg);
}
#month-summary {
  font-weight:400;
  font-size:11px;
  margin-left:8px;
}
.calendar-body {
  padding:0 20px 12px;
  border-top:1px solid var(--line);
}
.calendar-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:14px 0 12px;
}
.calendar-head h2 {
  font-size:15px;
  letter-spacing:.03em;
}
.month-nav {
  display:flex;
  align-items:center;
  gap:6px;
}
.month-nav button {
  border-radius:6px;
  min-width:34px;
  min-height:32px;
  font-size:16px;
}
.month-nav .today-button {
  font-size:12px;
  padding:3px 10px;
}
.weekdays,.calendar-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}
.weekdays {
  font-size:11px;
  text-align:center;
  color:var(--muted);
  margin-bottom:5px;
}
.calendar-grid button {
  min-width:0;
  min-height:43px;
  border-radius:7px;
  position:relative;
  padding:4px 2px 10px;
  font-size:13px;
  line-height:1.3;
}
.calendar-grid button.today {
  color:var(--mark-a);
  font-weight:700;
}
.calendar-grid button.has-entries {
  background:var(--surface-soft);
}
.calendar-grid button[aria-pressed=true] {
  background:var(--link);
  color:var(--bg);
}
.calendar-grid button:after {
  content:"";
  position:absolute;
  bottom:5px;
  width:3px;
  height:3px;
  background:transparent;
  border-radius:50%;
  left:calc(50% - 1.5px);
}
.calendar-grid button.has-entries:after {
  background:var(--mark-a);
}
.calendar-grid button[aria-pressed=true]:after {
  background:var(--bg);
}
.calendar-foot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--muted);
  font-size:11px;
  margin-top:12px;
}
.legend-dot {
  width:4px;
  height:4px;
  background:var(--mark-a);
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
  vertical-align:middle;
}
.text-button {
  font-size:12px;
  color:var(--muted);
  padding:4px;
  border-radius:4px;
}
.text-button:hover {
  color:var(--ink);
}
.timeline-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}
.timeline-heading h2 {
  font-family:"Kaiti SC","STKaiti",serif;
  font-size:22px;
  font-weight:500;
  letter-spacing:.06em;
}
#refresh {
  font-size:11px;
}
.filter-row {
  display:flex;
  gap:20px;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding-bottom:10px;
}
.filter-tabs {
  display:flex;
  gap:5px;
}
.filter-tabs button {
  padding:5px 13px;
  font-size:13px;
  border-radius:7px;
  color:var(--muted);
}
.filter-tabs button[aria-pressed=true] {
  background:var(--selected);
  color:var(--ink);
}
.search {
  display:flex;
  align-items:center;
  gap:8px;
  max-width:240px;
  color:var(--muted);
}
.search svg {
  width:16px;
  height:16px;
}
.search input {
  border:0;
  background:transparent;
  outline-offset:2px;
  width:100%;
  min-width:0;
  font-size:12px;
  padding:5px 0;
}
.filter-meta {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin:13px 0 20px;
  font-size:11px;
  color:var(--muted);
}
.filter-meta label {
  display:flex;
  align-items:center;
  white-space:nowrap;
  gap:5px;
}
.filter-meta input {
  accent-color:var(--mark-b);
}
.day-heading {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.03em;
  color:var(--muted);
  font-weight:400;
  margin:23px 0 11px;
}
.day-heading:after {
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.entry {
  background:var(--surface);
  border:1px solid var(--line);
  padding:17px 20px;
  border-radius:13px;
  margin-bottom:12px;
  box-shadow:var(--shadow);
}
.entry-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  gap:10px;
  margin-bottom:10px;
}
.entry-meta {
  display:flex;
  gap:9px;
  align-items:center;
}
.entry-type {
  color:var(--mark-a);
  font-size:10px;
  letter-spacing:.06em;
}
.entry-actions {
  display:flex;
  gap:6px;
}
.entry-actions button {
  border-radius:4px;
  font-size:11px;
  color:var(--muted);
  padding:2px 6px;
}
.entry-body {
  display:flex;
  align-items:flex-start;
  gap:12px;
}
.entry-content {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.95;
  flex:1;
  min-width:0;
  font-size:14px;
}
.entry-content .tag {
  color:var(--ink);
  background:var(--selected);
  border-radius:3px;
  padding:1px 3px;
  font-size:13px;
}
.todo-check {
  border:1.5px solid var(--muted);
  border-radius:5px;
  width:19px;
  min-width:19px;
  height:19px;
  margin-top:4px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:12px;
  line-height:1;
}
.todo-check[aria-checked=true] {
  background:var(--link);
  border-color:var(--link);
  color:var(--bg);
}
.entry.completed .entry-content {
  color:var(--muted);
  text-decoration:line-through;
  text-decoration-thickness:1px;
}
.empty {
  text-align:center;
  padding:44px 18px 48px;
  border:1px dashed var(--line);
  border-radius:12px;
}
.empty-mark {
  display:block;
  font-family:Georgia,serif;
  font-size:32px;
  color:var(--mark-a);
  margin-bottom:5px;
}
.empty h3 {
  font-size:15px;
  font-weight:500;
  margin-bottom:7px;
}
.empty p {
  color:var(--muted);
  font-size:12px;
}
.empty button {
  margin-top:15px;
}
.load-more {
  display:block;
  margin:24px auto;
}
.notice {
  font-size:12px;
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:17px;
  background:var(--surface);
}
footer {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin:50px 0 26px;
  padding-top:17px;
  font-family:"Kaiti SC","STKaiti",serif;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.07em;
}
dialog {
  width:min(520px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  padding:24px;
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 90px #0003;
}
dialog::backdrop {
  background:#0c112860;
  backdrop-filter:blur(4px);
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}
.dialog-head h2 {
  font-family:"Kaiti SC","STKaiti",serif;
  font-size:23px;
  font-weight:500;
}
dialog label {
  display:block;
  font-size:12px;
  color:var(--muted);
}
dialog textarea,dialog input,dialog select {
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:10px;
  font-size:16px;
  margin:7px 0 15px;
}
dialog textarea {
  resize:vertical;
}
.edit-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:17px;
}
.settings-section {
  border-top:1px solid var(--line);
  padding:19px 0 3px;
  margin-top:17px;
}
.settings-section h3 {
  margin-bottom:7px;
}
.settings-section p {
  margin:6px 0 12px;
}
.settings-section a {
  font-size:13px;
}
blockquote {
  border-left:2px solid var(--line);
  padding-left:14px;
  margin:18px 0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  color:var(--muted);
  font-size:13px;
  max-height:200px;
  overflow:auto;
}
.error {
  color:var(--danger);
  font-size:12px;
}
#toast {
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%);
  z-index:10;
  padding:11px 20px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--ink);
  color:var(--bg);
  font-size:13px;
  box-shadow:0 8px 30px #0002;
  max-width:calc(100vw - 32px);
  width:max-content;
}
.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}
.skip-link:focus {
  position:absolute;
  left:15px;
  top:10px;
  background:var(--surface);
  padding:10px;
  z-index:10;
}
@media(min-width:1600px) {
  .shell {
    max-width:56rem;
    width:calc(100% - 64px);
  }
}
@media(max-width:700px) {
  .shell {
    width:calc(100% - 36px);
  }
  .masthead {
    padding:22px 0 19px;
  }
  .brand {
    gap:10px;
  }
  .brand-name {
    font-size:28px;
  }
  .brand-note {
    display:none;
  }
  .header-actions {
    gap:5px;
  }
  .greeting {
    margin:28px 0 18px;
  }
  h1 {
    font-size:25px;
  }
  .small-serif {
    display:none;
  }
  .eyebrow {
    font-size:11px;
  }
  .composer {
    padding:15px 15px 13px;
    border-radius:14px;
  }
  .composer-head .quiet {
    font-size:10px;
  }
  .composer textarea {
    min-height:115px;
  }
  .keyboard-hint {
    display:none;
  }
  .primary {
    padding:8px 13px;
  }
  .record-date {
    gap:5px;
  }
  .record-date input {
    max-width:117px;
  }
  .calendar-section {
    margin:0 0 17px;
  }
  summary {
    padding:13px 15px;
  }
  .summary-hint {
    font-size:10px;
  }
  .summary-hint > span:last-child {
    margin-left:6px;
  }
  #month-summary {
    display:none;
  }
  .calendar-body {
    padding:0 12px 10px;
  }
  .calendar-grid button {
    min-height:42px;
  }
  .filter-row {
    gap:9px;
  }
  .filter-tabs {
    gap:2px;
  }
  .filter-tabs button {
    padding:5px 10px;
  }
  .search {
    max-width:155px;
    gap:5px;
  }
  .search input {
    font-size:12px;
  }
  .filter-meta {
    font-size:10px;
  }
  .entry {
    padding:15px;
    border-radius:12px;
  }
  .entry-content {
    font-size:14px;
  }
  .entry-actions {
    gap:3px;
  }
  .timeline-heading h2 {
    font-size:21px;
  }
  .timeline-heading {
    gap:6px;
  }
  .timeline-heading #refresh {
    font-size:10px;
  }
  footer {
    flex-direction:column;
    text-align:center;
    gap:4px;
    margin-top:38px;
  }
  .edit-fields {
    grid-template-columns:1fr;
  }
  dialog {
    padding:19px;
  }
  .record-date input {
    font-size:12px;
  }
  input[type=search] {
    font-size:16px;
  }
  #toast {
    bottom:calc(20px + env(safe-area-inset-bottom));
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}
@media print {
  body::before,body::after,.archive-section,.composer,.header-actions,.calendar-section,.filter-row,.filter-meta,.entry-actions,#refresh,.load-more,dialog,#toast {
    display:none!important;
  }
  .shell {
    width:100%;
  }
  .entry {
    break-inside:avoid;
    box-shadow:none;
  }
  body {
    background:white;
    color:black;
  }
}

.timeline-section {
  margin-top: 32px;
}
.archive-section {
  margin-top: 38px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 24px;
}
.archive-section > details > summary {
  padding: 24px 0;
}
.section-title {
  font-family: "Kaiti SC", "STKaiti", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .06em;
}
.archive-description {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 16px;
}
.archive-body {
  padding-bottom: 4px;
}
#archive-refresh {
  padding: 0 4px;
  font-size: 11px;
}
#archive-pending-label {
  margin-left: auto;
}
@media(max-width:700px) {
  .timeline-section { margin-top: 27px; }
  .archive-description { display: block; margin: 4px 0 0; font-size: 11px; }
  .section-title { font-size: 21px; }
}

/* Authentication shares the journal's painting, type, and responsive spacing. */
.auth-shell { max-width: 50rem; }
.auth-main { max-width: 27rem; margin: 4.5rem auto 5rem; }
.auth-main h1 { font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.5; margin: .6rem 0; }
.auth-intro { margin-bottom: 2rem; }
.auth-form { display: flex; flex-direction: column; gap: .55rem; }
.auth-form > label:not(.auth-show) { margin-top: .7rem; font-size: .88rem; }
.auth-form input:not([type=checkbox]) { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: .65rem .85rem; font-size: 16px; }
.auth-form input:focus-visible { outline: 2px solid var(--mark-b); outline-offset: 3px; }
.auth-form input[readonly] { color: var(--muted); }
.auth-show { display: flex; align-items: center; gap: .5rem; width: fit-content; min-height: 44px; margin: .35rem 0; cursor: pointer; font-size: .85rem; }
.auth-show input { width: 17px; height: 17px; accent-color: var(--link); }
.auth-form .primary { min-height: 48px; }
.auth-help { font-size: .8rem; margin: 0; }
.auth-message { color: var(--danger); font-size: .88rem; min-height: 1.5em; margin: .5rem 0 0; overflow-wrap: anywhere; }
.auth-links { margin-top: 1rem; font-size: .88rem; }
.auth-footer { text-align: center; padding-bottom: 2rem; color: var(--muted); }
@media(max-width:700px) { .auth-main { margin: 3rem auto; } }