* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #D9D9D6; min-height: 100vh; }
body.stage-dark { background: #050505; }
button, textarea, input { font: inherit; color: inherit; }
svg.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app {
  container-type: inline-size;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  -webkit-font-smoothing: antialiased;
}
.app ::selection { background: var(--mark); }
.shell { max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-9); }
@container (max-width: 480px) {
  .shell { padding: var(--space-4) var(--space-4) var(--space-9); }
}

.top { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.brand { font-weight: var(--weight-strong); font-size: var(--text-lg); margin-right: auto; letter-spacing: -0.01em; }
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
}
.icon-btn:hover { background: var(--sunk); color: var(--text-1); }

.composer { border-left: 2px solid var(--line-strong); padding: var(--space-1) 0 var(--space-1) var(--space-4); }
.composer:focus-within { border-left-color: var(--text-1); }
.composer textarea {
  display: block; width: 100%; min-height: calc(2 * var(--leading-body) * 1em);
  border: 0; padding: 0; background: transparent; resize: none; outline: none;
  line-height: var(--leading-body);
}
.composer textarea::placeholder { color: var(--text-3); }
.composer-bar { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.vis {
  display: inline-flex; align-items: center; gap: var(--space-1); margin-right: auto;
  border: 0; background: transparent; padding: var(--space-1) var(--space-2); margin-left: calc(-1 * var(--space-2));
  color: var(--text-3); font-size: var(--text-sm); cursor: pointer;
}
.vis:hover { background: var(--sunk); color: var(--text-2); }
.hint { font-size: var(--text-xs); color: var(--text-3); font-family: var(--font-mono); }
.btn {
  border: 0; cursor: pointer;
  background: var(--solid); color: var(--on-solid);
  font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 6px var(--space-4);
}
.btn:disabled { background: transparent; color: var(--text-3); padding-inline: 0; cursor: default; }

.tabs { display: flex; gap: var(--space-4); margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); overflow-x: auto; }
.tab { border: 0; background: none; padding: var(--space-1) 0; color: var(--text-3); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--text-2); }
.tab[aria-selected="true"] { color: var(--text-1); font-weight: var(--weight-medium); }

.day { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-3); font-weight: var(--weight-medium); letter-spacing: 0.02em; }
.item { padding: var(--space-5) 0; }
.item + .item { border-top: 1px solid var(--line); }
.feed .item:first-child { padding-top: var(--space-2); }

.note-body { margin: 0; white-space: pre-line; line-height: var(--leading-body); }
.short-body { margin: 0; font-family: var(--font-mono); line-height: var(--leading-snug); }

.post { cursor: pointer; }
.post h2 { margin: 0 0 var(--space-2); font-weight: var(--weight-strong); font-size: var(--text-xl); line-height: var(--leading-tight); }
.post:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.excerpt {
  margin: 0; color: var(--text-2); line-height: var(--leading-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bm-comment { margin: 0 0 var(--space-3); line-height: var(--leading-body); }
.link-card {
  display: flex; gap: var(--space-3); align-items: flex-start; text-decoration: none; color: inherit;
}
.link-card:hover .lc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fav {
  flex: none; width: 20px; height: 20px; margin-top: 2px; display: grid; place-items: center;
  background: var(--line); color: var(--text-2); font-size: 11px; font-weight: var(--weight-strong);
}
.lc-title { font-weight: var(--weight-medium); line-height: var(--leading-snug); }
.lc-domain { font-size: var(--text-xs); color: var(--text-3); font-family: var(--font-mono); margin-top: 2px; }

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--text-3); }
.meta .i { width: 13px; height: 13px; }

/* article */
.back { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1); border: 0; background: none; padding: 0; color: var(--text-3); font-size: var(--text-sm); cursor: pointer; margin-bottom: var(--space-7); }
.back:hover { color: var(--text-1); }
.article h1 { margin: 0 0 var(--space-3); font-weight: var(--weight-strong); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: -0.01em; }
@container (max-width: 480px) { .article h1 { font-size: var(--text-2xl); } }
.article > .meta { margin: 0 0 var(--space-7); font-size: var(--text-sm); }
.prose { font-size: var(--text-lg); line-height: var(--leading-body); max-width: var(--measure); }
@container (max-width: 480px) { .prose { font-size: 17px; } }
.prose p { margin: 0 0 var(--space-5); }
.prose h2 { font-weight: var(--weight-strong); font-size: var(--text-xl); line-height: var(--leading-tight); margin: var(--space-7) 0 var(--space-4); }
.prose blockquote { margin: 0 0 var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--line-strong); color: var(--text-2); }
.prose ul { margin: 0 0 var(--space-5); padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-1); }
.prose a { color: var(--text-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--sunk); padding: 0.1em 0.35em; }
.prose mark { background: var(--mark); color: inherit; padding: 0 0.1em; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }

/* tokens */
.tk h2 { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-3); margin: var(--space-7) 0 var(--space-3); font-family: var(--font-mono); }
.tk h2:first-of-type { margin-top: 0; }
.ramp { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: var(--space-2); }
.sw { font-size: 11px; font-family: var(--font-mono); color: var(--text-3); }
.sw b { display: block; height: 40px; border: 1px solid var(--line); margin-bottom: var(--space-1); }
.sem { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-2); }
.sem .sw b { height: 32px; }
.type-row { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-1) 0; }
.type-row span:first-child { width: 40px; flex: none; font: 11px var(--font-mono); color: var(--text-3); }
.type-row span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.space-row { display: flex; align-items: center; gap: var(--space-4); height: 20px; }
.space-row span { width: 40px; font: 11px var(--font-mono); color: var(--text-3); }
.space-row b { height: 8px; background: var(--mark); border: 1px solid var(--text-1); }
.ctable { width: 100%; border-collapse: collapse; font-size: var(--text-xs); font-family: var(--font-mono); }
.ctable-wrap { overflow-x: auto; }
.ctable th, .ctable td { text-align: left; padding: var(--space-2) var(--space-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ctable th { color: var(--text-3); font-weight: var(--weight-medium); }
.ctable .ok { color: var(--text-2); }
.ctable .bad { color: #C2410C; font-weight: var(--weight-strong); }
.ctable .cur { background: var(--sunk); }

/* test bar: fixed neutral chrome, deliberately outside the token system */
.bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 10;
  display: flex; gap: 6px; padding: 5px; border-radius: 999px;
  background: rgb(24 24 24 / 0.88); backdrop-filter: blur(8px);
  font: 12px/1 system-ui, sans-serif; color: #fff; box-shadow: 0 4px 20px rgb(0 0 0 / 0.2);
  max-width: calc(100vw - 16px); overflow-x: auto;
}
.seg { display: flex; gap: 2px; padding-right: 6px; border-right: 1px solid rgb(255 255 255 / 0.12); }
.seg:last-child { border-right: 0; padding-right: 0; }
.seg button { border: 0; background: transparent; color: rgb(255 255 255 / 0.6); padding: 7px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.seg button:hover { color: #fff; }
.seg button[aria-pressed="true"] { background: rgb(255 255 255 / 0.16); color: #fff; }
.bar[hidden] { display: none; }

.item { position: relative; }
.more {
  margin-left: auto; display: inline-grid; place-items: center; width: 28px; height: 20px;
  border: 0; background: transparent; color: var(--text-3); cursor: pointer;
}
.more .i { width: 16px; height: 16px; stroke-width: 2.4; }
.more:hover, .more[aria-expanded="true"] { color: var(--text-1); background: var(--sunk); }
@media (hover: hover) {
  .more { opacity: 0; }
  .item:hover .more, .more:focus-visible, .more[aria-expanded="true"] { opacity: 1; }
}
.menu {
  position: absolute; right: 0; top: calc(100% - var(--space-4)); z-index: 5; min-width: 140px;
  display: flex; flex-direction: column; padding: var(--space-1) 0;
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
}
.menu button {
  display: flex; align-items: center; gap: var(--space-2); border: 0; background: none; cursor: pointer;
  padding: var(--space-2) var(--space-3); font-size: var(--text-sm); text-align: left; color: var(--text-1);
}
.menu button:hover { background: var(--sunk); }

.pics { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.pics img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--sunk); }
.pics[data-n="1"] img { max-height: 360px; aspect-ratio: 4 / 3; width: auto; max-width: 100%; }
.pics[data-n="2"] { grid-template-columns: 1fr 1fr; }
.pics[data-n="3"] { grid-template-columns: 1fr 1fr 1fr; }
.pics:not([data-n="1"]) img { aspect-ratio: 1; }

.fwd { margin: 0; padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: 2px solid var(--line-strong); }
.fwd p { margin: 0; line-height: var(--leading-body); color: var(--text-2); }
.fwd footer { margin-top: var(--space-1); font: var(--text-xs) var(--font-mono); color: var(--text-3); }

.lc-text { min-width: 0; }
.lc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-raw { font: var(--text-sm) / var(--leading-snug) var(--font-mono); word-break: break-all; color: var(--text-2); }

.empty { margin: var(--space-7) 0; color: var(--text-3); font-size: var(--text-sm); }
.count { margin-top: var(--space-5); font: var(--text-xs) var(--font-mono); color: var(--text-3); }
.count + .day { margin-top: var(--space-3); }
.item mark { background: var(--mark); color: inherit; }

.search-top { gap: var(--space-3); color: var(--text-3); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); margin-bottom: 0; }
.search-top input {
  flex: 1; min-width: 0; border: 0; padding: 0; background: transparent; outline: none;
  font-size: var(--text-lg); color: var(--text-1);
}
.search-top input::placeholder { color: var(--text-3); }
.search-top input::-webkit-search-cancel-button { display: none; }
.link-btn { border: 0; background: none; padding: 0; cursor: pointer; color: var(--text-2); font-size: var(--text-sm); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
.link-btn:hover { color: var(--text-1); text-decoration-color: currentColor; }

.toast {
  position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 9;
  display: flex; gap: var(--space-4); align-items: center; padding: var(--space-2) var(--space-4);
  background: var(--solid); color: var(--on-solid); font-size: var(--text-sm);
}
.toast .link-btn { color: var(--on-solid); text-decoration-color: currentColor; }
[data-mode="dark"] .pics img { filter: brightness(0.88); }


/* site shell */
body.site { background: var(--bg); }
body.site .toast { bottom: var(--space-5); }
a.brand { color: inherit; text-decoration: none; }
a.tab { text-decoration: none; }
.tab[aria-current="page"] { color: var(--text-1); font-weight: var(--weight-medium); }
.vis-link { font-size: var(--text-sm); color: var(--text-3); text-decoration: none; }
.vis-link:hover { color: var(--text-1); }
.pager { display: inline-block; margin-top: var(--space-6); font: var(--text-xs) var(--font-mono); color: var(--text-3); text-decoration: none; }
.pager:hover { color: var(--text-1); }
.menu a { display: flex; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--text-1); text-decoration: none; }
.menu a:hover { background: var(--sunk); }
.article .meta .link-btn { margin-left: auto; font-family: var(--font-sans); }
.login { margin-top: var(--space-7); }

/* editor */
.editor { display: flex; flex-direction: column; gap: var(--space-4); }
.editor-title, .editor-body { border: 0; padding: 0; background: transparent; outline: none; width: 100%; color: var(--text-1); }
.editor-title { font-size: var(--text-3xl); font-weight: var(--weight-strong); line-height: var(--leading-tight); letter-spacing: -0.01em; }
.editor-body {
  min-height: 50vh; resize: none; field-sizing: content; font-size: var(--text-lg); line-height: var(--leading-body);
  border-left: 2px solid var(--line-strong); padding-left: var(--space-4);
}
.editor-body:focus { border-left-color: var(--text-1); }
.editor-title::placeholder, .editor-body::placeholder { color: var(--text-3); }
@container (max-width: 480px) { .editor-title { font-size: var(--text-2xl); } }
.feed .item:first-child[hidden] + .item { border-top: 0; padding-top: var(--space-2); }