:root {
  color-scheme: light;
  --ink: #10263a;
  --muted: #617487;
  --line: #cad8e4;
  --accent: #068c8a;
  --paper: #f8fbfd;
  --surface: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 5%, #e8f7f5 0, transparent 35rem),
    var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.75;
}

a { color: inherit; text-decoration-color: #80bbb9; text-underline-offset: .22em; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 1rem clamp(1.25rem, 4vw, 4rem);
  background: rgb(248 251 253 / 88%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  font-weight: 800;
}

.topbar a { text-decoration: none; }

main { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 6rem; }

.hero { max-width: 50rem; padding: clamp(2rem, 6vw, 5rem) 0; }
.hero h1, .note h1 { margin: .25rem 0 1rem; font-size: clamp(2.1rem, 7vw, 4.8rem); line-height: 1.15; letter-spacing: -.04em; }
.hero > p:last-child { max-width: 39rem; color: var(--muted); font-size: 1.05rem; }
.eyebrow { margin: 0; color: var(--accent); font: 700 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .17em; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }
.card, .note, .empty { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 16px 48px rgb(16 38 58 / 6%); }
.card { min-height: 16rem; padding: 1.5rem; }
.card h2 { margin: .5rem 0 .75rem; line-height: 1.35; }
.card p:last-child { color: var(--muted); }
.empty { padding: 3rem; text-align: center; }

.note { max-width: 52rem; margin: 2rem auto; padding: clamp(1.35rem, 5vw, 4rem); }
.note h1 { font-size: clamp(2rem, 6vw, 3.8rem); overflow-wrap: anywhere; }
.note section { margin-top: 2.5rem; }
.note h2 { margin-bottom: .5rem; font-size: 1rem; letter-spacing: .08em; }
.summary { font-size: 1.12rem; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.tag { padding: .25rem .65rem; color: var(--accent); background: #e8f7f5; border-radius: 999px; font-size: .82rem; }
.links { padding-left: 1.3rem; overflow-wrap: anywhere; }
details { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; }
summary { cursor: pointer; font-weight: 700; }
.raw { padding: 1rem; background: #f2f6f9; border-radius: .5rem; overflow-wrap: anywhere; }

@media (max-width: 36rem) {
  main { width: min(100% - 1.25rem, 72rem); padding-top: 1.5rem; }
  .hero { padding-top: 2.5rem; }
  .card, .note, .empty { box-shadow: none; }
}