@font-face {
  font-family: "Thought CJK";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/lab/thought-scale/assets/NotoSansSC-Regular-subset.ttf?v=20260817dense180") format("truetype");
}

@font-face {
  font-family: "Thought Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("/assets/fonts/dm-sans-latin-wght-normal.woff2?v=20260828winperf2") format("woff2-variations");
}

@font-face {
  font-family: "Thought Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/dm-mono-latin-400-normal.woff2?v=20260828winperf2") format("woff2");
}

:root {
  color-scheme: dark;
  --paper: #000;
  --paper-raised: #1c1c1e;
  --ink: #fff;
  --muted: #aeaeb2;
  --hairline: rgba(235, 235, 245, 0.18);
  --accent: #e5522f;
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-right: max(20px, env(safe-area-inset-right));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(20px, env(safe-area-inset-left));
  --thought-database-width: min(570px, 96vw);
  --thought-glass-blur: 30px;
  --thought-glass-saturate: 1.8;
  --thought-glass-tag-face: rgb(0 0 0 / 0.33);
  --thought-glass-panel-face: linear-gradient(180deg, rgb(0 0 0 / 0.3), rgb(0 0 0 / 0.22));
  --thought-glass-rim: rgba(255, 255, 255, 0.56);
  --thought-glass-shadow: rgba(0, 0, 0, 0.44);
  --thought-glass-rim-lobe: conic-gradient(
    from 315deg at 50% 50%,
    rgb(255 255 255 / 0.95) 0deg,
    rgb(255 255 255 / 0.48) 47.5deg,
    transparent 95deg,
    rgb(255 255 255 / 0.28) 132.5deg,
    rgb(255 255 255 / 0.42) 180deg,
    rgb(255 255 255 / 0.28) 227.5deg,
    transparent 275deg,
    rgb(255 255 255 / 0.48) 312.5deg,
    rgb(255 255 255 / 0.95) 360deg
  );
  font-family: "Thought Sans", "PingFang SC", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
}

body {
  touch-action: pinch-zoom;
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.thought-shell {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pinch-zoom;
  transform-origin: 50% 58%;
  transition-property: transform, opacity, filter;
  transition-duration: 520ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.thought-shell.is-dragging {
  cursor: grabbing;
}

.thought-shell.has-linked-thought:not(.is-dragging) {
  /* Nodes move beneath a stationary pointer, so swapping grab/pointer here
     produces visible cursor flicker. The link chip carries this hover state. */
  cursor: grab;
}

/*
 * Linked-thought cursor chip: 58 x 30 glass capsule, classic visit arrow,
 * +24/+20 pointer offset, 0.72 -> 1 reveal. Frost matches Apple Books
 * night chrome: Gaussian 30 / saturate 1.8, dark platter rgb(0 0 0 / .33),
 * rim 0.56 along capsule axis π/4.
 */
.thought-link-tag {
  position: fixed;
  z-index: 33;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 58px;
  height: 30px;
  padding: 0 12px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  box-shadow:
    0 3px 6px var(--thought-glass-shadow),
    0 1px 1.5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  translate: -100px -100px;
  scale: 0.72;
  transform-origin: 0 50%;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--thought-glass-blur)) saturate(var(--thought-glass-saturate));
  backdrop-filter: blur(var(--thought-glass-blur)) saturate(var(--thought-glass-saturate));
  contain: layout paint style;
  will-change: translate, opacity;
  transition:
    opacity 180ms ease,
    scale 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 360ms;
}

.thought-link-tag::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.3), var(--thought-glass-tag-face) 48%, rgb(0 0 0 / 0.22));
  box-shadow: inset 1px 1px 0 color-mix(in srgb, var(--thought-glass-rim) 38%, transparent);
  content: "";
  pointer-events: none;
}

.thought-link-tag::after {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--thought-glass-rim-lobe);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  pointer-events: none;
}

.thought-link-arrow {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition-property: opacity, scale, filter;
  transition-duration: 260ms;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

.thought-link-arrow-external {
  position: absolute;
}

.thought-link-tag[data-kind="external"] .thought-link-arrow-article,
.thought-link-tag:not([data-kind="external"]) .thought-link-arrow-external {
  opacity: 0;
  scale: 0.25;
  filter: blur(4px);
}

.thought-link-tag[data-kind="external"] .thought-link-arrow-external,
.thought-link-tag:not([data-kind="external"]) .thought-link-arrow-article {
  opacity: 1;
  scale: 1;
  filter: blur(0);
}

.thought-link-tag.is-visible {
  opacity: var(--link-motion-opacity, 1);
  visibility: visible;
  scale: 1;
  transition-delay: 0s;
}

.thought-link-tag.is-motion-responsive {
  transition:
    scale 360ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 360ms;
}

body.is-database-open .thought-link-tag,
body.is-article-open .thought-link-tag {
  opacity: 0;
  visibility: hidden;
  scale: 0.72;
}

body.is-article-open .thought-shell {
  transform: perspective(1200px) translateY(-1.4vh) scale(0.94);
  opacity: 0.36;
  filter: blur(3px);
}

body.is-article-open .database-entry {
  opacity: 0;
  pointer-events: none;
}

.article-reader {
  /* Both tones come off --paper, which the site injects into this frame, so a
     new sky moves the reading card with it. */
  --reader-card-face: color-mix(in srgb, var(--paper) 72%, #06100f);
  --reader-card-face-top: color-mix(in srgb, var(--paper) 78%, #06100f);
  --reader-origin-x: 50vw;
  --reader-origin-y: 72vh;
  --reader-origin-page-y: 68%;
  --reader-page-height: 720px;
  position: fixed;
  z-index: 60;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  color-scheme: dark;
  transition: visibility 0s linear 620ms;
}

.article-reader[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.article-reader-scrim {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background:
    radial-gradient(circle at var(--reader-origin-x) var(--reader-origin-y), rgba(255, 255, 255, 0.035), transparent 30vw),
    rgba(0, 0, 0, 0.42);
  opacity: 0;
  cursor: default;
  transition-property: opacity;
  transition-duration: 420ms;
  transition-timing-function: ease-out;
}

.article-reader[aria-hidden="false"] .article-reader-scrim {
  opacity: 1;
}

.article-page {
  position: fixed;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: min(560px, calc(100vw - 96px), calc(78svh - 56px));
  height: min(var(--reader-page-height), calc(100svh - 72px));
  min-height: min(640px, calc(100svh - 72px));
  overflow: hidden;
  border-radius: 4px;
  /* The card is the page's own colour taken down two steps, not a black
     rectangle laid on it. Embedded in the site, --paper is the sky the visitor
     chose, so the reading surface belongs to the same scene instead of being
     the one patch of the site that ignores the palette. Two steps down rather
     than the sky itself: at full strength the body text measures 3.9:1 against
     it, and long reading wants 4.5. This mix measures 5.0. */
  background: var(--reader-card-face);
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent),
    0 2px 8px rgba(0, 0, 0, 0.28),
    0 28px 80px rgba(0, 0, 0, 0.44),
    0 72px 160px rgba(0, 0, 0, 0.34);
  clip-path: polygon(
    0 var(--reader-origin-page-y),
    100% var(--reader-origin-page-y),
    100% var(--reader-origin-page-y),
    0 var(--reader-origin-page-y)
  );
  opacity: 0.16;
  transform: translate(-50%, -50%) scaleX(0.86) scaleY(0.98);
  transform-origin: 50% var(--reader-origin-page-y);
  filter: blur(10px);
  transition-property: clip-path, opacity, transform, filter;
  transition-duration: 620ms, 260ms, 620ms, 440ms;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1), ease-out, cubic-bezier(0.32, 0.72, 0, 1), ease-out;
}

.article-reader[aria-hidden="false"] .article-page {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  transform: translate(-50%, -50%) scaleX(1) scaleY(1);
  filter: blur(0);
}

/* The dialog itself is the silent programmatic focus target on open. */
.article-page:focus {
  outline: none;
}

.article-page-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.012), transparent 9%, transparent 91%, rgba(255, 255, 255, 0.008)),
    linear-gradient(180deg, var(--reader-card-face-top), var(--reader-card-face));
  backface-visibility: hidden;
}

.article-reader-bar {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  pointer-events: none;
}

.article-reader-close {
  display: grid;
  place-items: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(242, 242, 238, 0.78);
  cursor: pointer;
  pointer-events: auto;
  transition-property: background-color, scale;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.article-reader-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.article-reader-close:hover,
.article-reader-close:focus-visible {
  background: rgba(255, 255, 255, 0.065);
}

.article-reader-close:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.54);
  outline-offset: 2px;
}

.article-reader-close:active {
  scale: 0.96;
}

.article-page-scroll {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  user-select: text;
  -webkit-user-select: text;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.article-page-content {
  width: min(100%, 480px);
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(92px, 13vh, 124px) 30px 96px;
}

.article-title {
  max-width: 17em;
  margin: 0 0 54px;
  color: color-mix(in srgb, var(--ink) 90%, transparent);
  font: 500 clamp(28px, 3.2vw, 38px)/1.32 "Thought CJK", "PingFang SC", sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.article-title[hidden] {
  display: none;
}

.article-body {
  margin: 0;
  font: 400 19px/1.96 "Thought CJK", "PingFang SC", sans-serif;
  letter-spacing: 0.005em;
  /* Same ink the rest of the frame was handed, so the card reads as part of
     the palette rather than a neutral grey that happens to sit on it. */
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}

.markdown-content > :first-child {
  margin-top: 0;
}

.markdown-content > :last-child {
  margin-bottom: 0;
}

.article-body p {
  margin: 0 0 1.45em;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  margin: 2.2em 0 0.85em;
  color: rgba(248, 248, 244, 0.9);
  font-family: "Thought CJK", "PingFang SC", sans-serif;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.article-body h1 {
  font-size: 1.55em;
}

.article-body h2 {
  font-size: 1.32em;
}

.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
  font-size: 1.08em;
}

.markdown-content ul,
.markdown-content ol {
  margin: 0 0 1.45em;
  padding-left: 1.45em;
}

.markdown-content li {
  margin: 0.32em 0;
  padding-left: 0.18em;
}

.markdown-content blockquote {
  margin: 1.8em 0;
  padding-left: 1.15em;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(238, 238, 232, 0.55);
}

.markdown-content blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-content code {
  padding: 0.08em 0.3em;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(248, 248, 244, 0.82);
  font: 0.86em/1.5 "Thought Mono", ui-monospace, monospace;
}

.markdown-content pre {
  margin: 1.8em 0;
  padding: 1.1em 1.2em;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  white-space: pre;
}

.markdown-content pre code {
  padding: 0;
  background: transparent;
  font-size: 0.78em;
}

.markdown-content a {
  color: inherit;
  text-decoration-color: rgba(238, 238, 232, 0.34);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.markdown-content a:hover,
.markdown-content a:focus-visible {
  color: rgba(248, 248, 244, 0.96);
  text-decoration-color: currentColor;
}

.markdown-content img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 1.8em auto;
}

.markdown-content hr {
  height: 1px;
  margin: 2.4em 0;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
}

.markdown-table-wrap {
  max-width: 100%;
  margin: 1.8em 0;
  overflow-x: auto;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88em;
}

.markdown-content th,
.markdown-content td {
  padding: 0.65em 0.8em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  text-align: left;
}

.markdown-content th {
  color: rgba(248, 248, 244, 0.82);
  font-weight: 500;
}

.article-page ::selection {
  background: rgba(229, 82, 47, 0.42);
  color: #fff;
}

.article-body {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
  transition-property: opacity, transform, filter;
  transition-duration: 260ms, 420ms, 320ms;
  transition-timing-function: ease-out, cubic-bezier(0.22, 1, 0.36, 1), ease-out;
  transition-delay: 0s;
}

.article-reader[aria-hidden="false"] .article-title,
.article-reader[aria-hidden="false"] .article-body {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.article-reader[aria-hidden="false"] .article-body {
  transition-delay: 240ms;
}

.article-reader[aria-hidden="false"] .article-title {
  transition-delay: 200ms;
}

#thoughtCanvas {
  position: fixed;
  top: 22vh;
  left: calc(24.6667vw + clamp(28px, 4vw, 64px));
  width: 50.6667vw;
  height: 52vh;
  display: block;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.72) 92%, transparent 100%);
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

#thoughtCanvas:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.58);
  outline-offset: 8px;
}

body.is-ready #thoughtCanvas {
  opacity: 1;
}

body.is-intro {
  background: #000;
}

.thought-intro {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
}

.thought-intro::before {
  position: absolute;
  inset: 0;
  background: #000;
  content: "";
  opacity: var(--intro-veil, 1);
  pointer-events: none;
}

.thought-intro[hidden] {
  display: none;
}

.thought-intro-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(min(52vmin, 320px) * var(--glyph-scale, 1));
  height: calc(min(52vmin, 320px) * var(--glyph-scale, 1));
  filter: drop-shadow(0 var(--glyph-shadow-y, 12px) var(--glyph-shadow-blur, 24px) #00000059);
  transform-origin: 50% 50%;
}

.scan-bright,
.scan-mid,
.scan-dark {
  fill: currentColor;
}

body.is-intro .database-entry {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 760px), (hover: none) {
  .thought-link-tag {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thought-link-tag {
    transition: none;
  }
}

.topbar {
  position: fixed;
  z-index: 10;
  top: var(--safe-top);
  right: var(--safe-right);
  left: var(--safe-left);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}

.identity,
.top-actions {
  pointer-events: auto;
}

.identity {
  display: grid;
  gap: 3px;
  color: var(--ink);
  text-decoration: none;
}

.identity span,
.active-count,
.age-scale,
.plane-note,
.boot-state,
.archive-head span,
.archive-edit-note {
  font: 10px/1.2 "Thought Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity strong {
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.text-action {
  position: relative;
  padding: 2px 0 5px;
  border: 0;
  background: transparent;
  font: 11px/1 "Thought Mono", ui-monospace, monospace;
  text-decoration: none;
  cursor: pointer;
}

.text-action::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.text-action:hover::after,
.text-action:focus-visible::after,
.text-action[aria-expanded="true"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.age-scale {
  position: fixed;
  z-index: 8;
  top: 50%;
  left: var(--safe-left);
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  transform: translate(-31px, -50%);
  writing-mode: vertical-rl;
  pointer-events: none;
}

.age-track {
  position: relative;
  display: block;
  width: 1px;
  height: min(28vh, 210px);
  background: var(--hairline);
}

.age-track i {
  position: absolute;
  top: calc(var(--age-progress, 1) * 100%);
  left: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  transform: translate(-50%, -50%);
  transition: top 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.active-meta {
  position: fixed;
  z-index: 8;
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 14px;
  align-items: end;
  pointer-events: none;
}

.active-count {
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--accent);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.active-meta p {
  margin: 0 0 2px;
  color: var(--muted);
  font: 10px/1.2 "Thought Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
}

.active-meta strong {
  font-size: clamp(20px, 2.5vw, 34px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.depth-readout {
  position: fixed;
  z-index: 8;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font: 10px/1 "Thought Mono", ui-monospace, monospace;
  pointer-events: none;
}

.depth-readout span {
  color: var(--accent);
}

.depth-readout output {
  min-width: 70px;
  text-align: right;
}

.gesture-hint,
.plane-note {
  position: fixed;
  z-index: 7;
  margin: 0;
  color: var(--muted);
  pointer-events: none;
}

  .gesture-hint {
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + 34px);
  font-size: 11px;
}

.plane-note {
  top: calc(var(--safe-top) + 49px);
  left: var(--safe-left);
}

.archive {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100%;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) 30px;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper-raised);
  border-left: 1px solid var(--hairline);
  transform: translateX(102%);
  visibility: hidden;
  transition:
    transform 520ms cubic-bezier(0.2, 0.82, 0.2, 1),
    visibility 0s linear 520ms;
  touch-action: pan-y;
}

.archive[aria-hidden="false"] {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}

.archive-head {
  position: sticky;
  z-index: 2;
  top: calc(-1 * var(--safe-top));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--safe-top) 0 28px;
  background: var(--paper-raised);
}

.archive-head h2 {
  margin: 5px 0 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.archive-head button,
.fallback button {
  padding: 0 0 4px;
  border-bottom: 1px solid currentColor;
  background: transparent;
  font: 11px/1 "Thought Mono", ui-monospace, monospace;
  cursor: pointer;
}

.archive ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.archive li {
  border-bottom: 1px solid var(--hairline);
}

.archive-item {
  width: 100%;
  padding: 18px 0 20px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.archive-item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--muted);
  font: 10px/1.2 "Thought Mono", ui-monospace, monospace;
}

.archive-item strong {
  display: block;
  max-width: 22ch;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.archive-item:hover strong,
.archive-item:focus-visible strong,
.archive-item[aria-current="true"] strong {
  color: var(--accent);
}

.archive-edit-note {
  margin: 26px 0 4px;
  color: var(--muted);
}

.archive-scrim {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms;
}

body.is-archive-open .archive-scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.boot {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 13px;
  background: var(--paper);
  transition:
    opacity 600ms ease,
    visibility 0s linear 600ms;
}

.boot-name {
  font-size: clamp(34px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.075em;
}

.boot-state {
  color: var(--muted);
}

.boot-line {
  position: relative;
  width: min(240px, 55vw);
  height: 1px;
  overflow: hidden;
  background: var(--hairline);
}

.boot-line i {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(var(--boot-progress, 0));
  transform-origin: left;
  transition: transform 300ms ease;
}

body.is-ready .boot {
  opacity: 0;
  visibility: hidden;
}

.fallback {
  position: fixed;
  z-index: 15;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 44px));
  transform: translate(-50%, -50%);
}

.fallback span {
  color: var(--accent);
  font: 10px/1.2 "Thought Mono", ui-monospace, monospace;
}

.fallback h1 {
  margin: 14px 0 10px;
  font-size: clamp(32px, 6vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.065em;
}

.fallback p {
  max-width: 46ch;
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

noscript {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px;
  background: var(--paper);
}

.motion-tuner {
  position: fixed;
  z-index: 35;
  top: var(--safe-top);
  right: var(--safe-right);
  width: min(310px, calc(100vw - var(--safe-left) - var(--safe-right)));
  padding: 16px;
  border-radius: 18px;
  background: rgba(28, 28, 30, 0.94);
  color: var(--ink);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.44),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font: 11px/1.2 "Thought Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
}

.motion-tuner header,
.motion-tuner footer,
.motion-tuner label {
  display: flex;
  align-items: center;
}

.motion-tuner header {
  justify-content: space-between;
  gap: 16px;
}

.motion-tuner header div {
  display: grid;
  gap: 4px;
}

.motion-tuner header span,
.motion-tuner label > span,
.motion-tuner footer {
  color: var(--muted);
}

.motion-tuner header strong {
  font: 600 15px/1.1 "Thought Sans", "PingFang SC", sans-serif;
  letter-spacing: -0.02em;
}

.motion-tuner button {
  min-width: 44px;
  min-height: 40px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition-property: color, scale;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.motion-tuner button:hover,
.motion-tuner button:focus-visible {
  color: var(--ink);
}

.motion-tuner button:active {
  scale: 0.96;
}

.motion-tuner-curve {
  display: block;
  width: 100%;
  height: 74px;
  margin: 8px 0 0;
  overflow: visible;
}

.motion-tuner-axis,
.motion-tuner-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.motion-tuner-axis {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 1;
}

.motion-tuner-path {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.motion-tuner-note {
  margin: 1px 0 5px;
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.motion-tuner label {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 78px;
  gap: 10px;
  min-height: 40px;
}

.motion-tuner label > span {
  display: grid;
  gap: 2px;
}

.motion-tuner label small {
  color: rgba(174, 174, 178, 0.72);
  font: inherit;
  font-size: 9px;
}

.motion-tuner input[type="range"] {
  width: 100%;
  height: 40px;
  margin: 0;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.motion-tuner label output {
  justify-self: end;
  color: var(--ink);
  white-space: nowrap;
}

.motion-tuner-enable input[type="checkbox"] {
  appearance: none;
  justify-self: start;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 160ms ease-out;
}

.motion-tuner-enable input[type="checkbox"]::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: 50%;
  background: var(--ink);
  transition: translate 160ms ease-out;
}

.motion-tuner-enable input[type="checkbox"]:checked {
  background: var(--accent);
}

.motion-tuner-enable input[type="checkbox"]:checked::before {
  translate: 16px 0;
}

.motion-tuner[data-enabled="false"] .motion-tuner-curve,
.motion-tuner[data-enabled="false"] .motion-tuner-note,
.motion-tuner[data-enabled="false"] label:not(.motion-tuner-enable) {
  opacity: 0.34;
}

.motion-tuner footer {
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.motion-tuner footer code {
  color: inherit;
  font: inherit;
}

.motion-tuner footer output[data-active="true"] {
  color: var(--accent);
}

.font-scale-tuner {
  position: fixed;
  z-index: 35;
  bottom: var(--safe-bottom);
  left: var(--safe-left);
  display: grid;
  width: min(250px, calc(100vw - var(--safe-left) - var(--safe-right)));
  gap: 7px;
  color: var(--muted);
  font: 10px/1 "Thought Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  touch-action: auto;
  user-select: none;
  -webkit-user-select: none;
}

.font-scale-tuner label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.font-scale-tuner label:not(:first-child) {
  margin-top: 5px;
}

.font-scale-tuner output {
  color: var(--ink);
}

.font-scale-tuner input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  accent-color: var(--ink);
  cursor: ew-resize;
}

.database-entry {
  position: fixed;
  z-index: 34;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  min-width: 96px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: 11px/1 "Thought Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  transition: color 180ms ease, opacity 180ms ease;
}

.database-entry i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0.7);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.database-entry:hover,
.database-entry:focus-visible,
.database-entry[aria-expanded="true"] {
  opacity: 1;
  color: var(--ink);
}

@media (hover: none), (pointer: coarse) {
  .database-entry {
    opacity: 1;
  }
}

.database-entry:hover i,
.database-entry:focus-visible i,
.database-entry[aria-expanded="true"] i {
  transform: scale(1);
}

.database-scrim {
  position: fixed;
  z-index: 38;
  inset: 0 var(--thought-database-width) 0 0;
  width: auto;
  height: 100%;
  padding: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  cursor: default;
  transition:
    opacity 260ms ease,
    visibility 0s linear 260ms;
}

.database-panel {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--thought-database-width);
  overflow: visible;
  background: transparent;
  visibility: hidden;
  pointer-events: none;
  touch-action: pan-y;
  transition: visibility 0s linear 280ms;
}

.database-panel[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.database-panel-frost {
  position: absolute;
  inset: 0;
  background: var(--thought-glass-panel-face);
  opacity: 0;
  box-shadow:
    -14px 0 30px var(--thought-glass-shadow),
    inset 1px 0 0 color-mix(in srgb, var(--thought-glass-rim) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(var(--thought-glass-blur)) saturate(var(--thought-glass-saturate));
  backdrop-filter: blur(var(--thought-glass-blur)) saturate(var(--thought-glass-saturate));
  pointer-events: none;
  transition: opacity 220ms ease;
}

.database-panel-frost::after {
  position: absolute;
  inset: 0;
  padding: 1px;
  background: var(--thought-glass-rim-lobe);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  content: "";
  pointer-events: none;
}

.database-panel-body {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: var(--safe-top) 30px var(--safe-bottom);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(calc(100% + 32px));
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.database-panel[aria-hidden="false"] .database-panel-frost {
  opacity: 1;
}

.database-panel[aria-hidden="false"] .database-panel-body {
  transform: translateX(0);
}

body.is-database-open .database-scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.database-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
}

.database-head span,
.database-records-meta,
.database-editor label > span,
.database-pagination,
.database-editor-actions output {
  font: 10px/1.3 "Thought Mono", ui-monospace, monospace;
  letter-spacing: 0.05em;
}

.database-head span {
  color: var(--muted);
}

.database-head h1 {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.database-head button,
.database-auth button,
.database-toolbar button,
.database-pagination button,
.database-editor-actions button {
  padding: 5px 0;
  background: transparent;
  font: 11px/1 "Thought Mono", ui-monospace, monospace;
  cursor: pointer;
}

.database-head button,
.database-auth button,
.database-toolbar button {
  border-bottom: 1px solid currentColor;
}

.database-auth {
  padding: 14px 0 15px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.database-auth[hidden] {
  display: none;
}

.database-auth form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
}

.database-auth label {
  display: grid;
  gap: 7px;
}

.database-auth label span,
.database-auth p {
  color: var(--muted);
  font: 10px/1.35 "Thought Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}

.database-auth input {
  width: 100%;
  padding: 4px 0 7px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 13px/1.3 "Thought Sans", "PingFang SC", sans-serif;
}

.database-auth input:focus {
  border-color: var(--ink);
}

.database-auth p {
  margin: 10px 0 0;
}

.database-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.database-search input,
.database-editor input,
.database-editor textarea,
.database-editor select {
  width: 100%;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.database-search input {
  padding: 4px 0;
  font-size: 13px;
}

.database-search input::placeholder,
.database-editor input::placeholder,
.database-editor textarea::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.database-records {
  padding: 18px 0 10px;
}

.database-records-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
}

#databaseMode[data-writable="true"] {
  color: var(--accent);
}

.database-records ol {
  max-height: min(33vh, 310px);
  margin: 12px 0 0;
  padding: 0;
  overflow-y: auto;
  border-top: 1px solid var(--hairline);
  list-style: none;
  scrollbar-width: thin;
}

.database-records li {
  border-bottom: 1px solid var(--hairline);
}

.database-record {
  display: grid;
  width: 100%;
  gap: 5px;
  padding: 12px 0 13px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.database-record span,
.database-record small {
  color: var(--muted);
  font: 9px/1.25 "Thought Mono", ui-monospace, monospace;
}

.database-record strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.database-record:hover strong,
.database-record:focus-visible strong,
.database-record[aria-current="true"] strong {
  color: var(--accent);
}

.database-record[data-status="draft"] > span:first-child {
  color: var(--accent);
}

.database-empty {
  margin: 18px 0 4px;
  color: var(--muted);
  font-size: 13px;
}

.database-empty[hidden] {
  display: none;
}

.database-pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  color: var(--muted);
}

.database-pagination button:last-child {
  justify-self: end;
}

.database-pagination button:disabled,
.database-toolbar button:disabled,
.database-editor-actions button:disabled {
  opacity: 0.28;
  cursor: default;
}

.database-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  column-gap: 22px;
  row-gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.database-editor label {
  display: grid;
  gap: 8px;
}

.database-editor label:first-of-type,
.database-body-field,
.database-title-field,
.database-display-field,
.database-url-field,
.database-editor-actions {
  grid-column: 1 / -1;
}

.database-editor label > span {
  color: var(--muted);
}

.database-markdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
  color: var(--muted);
}

.database-markdown-head label {
  display: inline;
  cursor: text;
}

.database-markdown-head small {
  margin-left: 0.45em;
}

.database-markdown-switch {
  display: flex;
  gap: 14px;
}

.database-markdown-switch button {
  position: relative;
  padding: 0 0 3px;
  color: var(--muted);
}

.database-markdown-switch button::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
}

.database-markdown-switch button[aria-pressed="true"] {
  color: var(--ink);
}

.database-markdown-switch button[aria-pressed="true"]::after {
  opacity: 1;
}

.database-editor label small {
  font: inherit;
  opacity: 0.65;
}

.database-editor textarea {
  min-height: 116px;
  padding: 11px 0 13px;
  resize: vertical;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  font-size: 17px;
  line-height: 1.55;
}

.database-markdown-preview {
  min-height: 116px;
  max-height: min(48vh, 520px);
  padding: 11px 0 13px;
  overflow: auto;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: rgba(238, 238, 232, 0.72);
  font: 400 17px/1.72 "Thought CJK", "PingFang SC", sans-serif;
  scrollbar-width: thin;
}

.database-markdown-preview[hidden] {
  display: none;
}

.database-markdown-preview[data-empty="true"]::before {
  color: rgba(255, 255, 255, 0.36);
  content: "尚未输入正文";
}

.database-markdown-preview p {
  margin: 0 0 1em;
}

.database-markdown-preview h1,
.database-markdown-preview h2,
.database-markdown-preview h3,
.database-markdown-preview h4,
.database-markdown-preview h5,
.database-markdown-preview h6 {
  margin: 1.6em 0 0.65em;
  color: var(--ink);
  font-size: 1.15em;
  font-weight: 500;
  line-height: 1.45;
}

.database-editor input,
.database-editor select {
  padding: 6px 0 9px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}

.database-editor select {
  appearance: none;
  cursor: pointer;
}

.database-editor input:focus,
.database-editor textarea:focus,
.database-editor select:focus {
  border-color: var(--ink);
}

.database-visibility-field {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}

.database-editor .database-visibility-field input {
  display: grid;
  width: 16px;
  height: 16px;
  padding: 0;
  place-items: center;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  cursor: pointer;
}

.database-editor .database-visibility-field input::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  opacity: 0;
  transform: scale(0.45);
  transition: opacity 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.database-editor .database-visibility-field input:checked::before {
  opacity: 1;
  transform: scale(1);
}

.database-editor .database-visibility-field input:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

.database-visibility-copy {
  display: grid;
  gap: 2px;
}

.database-visibility-copy strong {
  color: var(--ink);
  font: 500 12px/1.2 "Thought Sans", "PingFang SC", sans-serif;
}

.database-visibility-copy small {
  color: var(--muted);
  font: 9px/1.25 "Thought Mono", ui-monospace, monospace;
}

.database-editor-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.database-save {
  color: var(--accent);
}

.database-delete {
  color: var(--muted);
}

.database-editor-actions output {
  justify-self: end;
  color: var(--muted);
  text-align: right;
}

.database-editor-actions output[data-state="error"] {
  color: #e07060;
}

.database-editor-actions output[data-state="success"] {
  color: var(--accent);
}

@media (max-width: 720px) {
  :root {
    --safe-left: max(17px, env(safe-area-inset-left));
    --safe-right: max(17px, env(safe-area-inset-right));
    --thought-database-width: 100%;
  }

  .top-actions {
    gap: 13px;
  }

  .top-actions a {
    display: none;
  }

  .plane-note,
  .gesture-hint,
  .age-scale {
    display: none;
  }

  .active-meta strong {
    font-size: 24px;
  }

  .archive {
    padding-left: 22px;
  }

  #thoughtCanvas {
    top: 18vh;
    left: 9vw;
    width: 88vw;
    height: 60vh;
  }

  .article-page {
    width: calc(100vw - 18px);
    height: calc(100svh - 18px);
    min-height: 0;
    border-radius: 3px;
  }

  .article-reader-bar {
    top: 8px;
    left: 8px;
  }

  .article-page-content {
    padding: 88px 28px max(76px, env(safe-area-inset-bottom));
  }

  .article-body {
    font-size: 17px;
    line-height: 1.88;
  }

  .article-title {
    margin-bottom: 44px;
    font-size: 28px;
    line-height: 1.38;
  }

  .database-panel-body {
    padding-right: 20px;
    padding-left: 20px;
  }

  .database-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .database-editor label,
  .database-editor-actions {
    grid-column: 1;
  }

  .database-editor-actions {
    grid-template-columns: auto auto;
  }

  .database-editor-actions output {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article-reader,
  .article-reader-scrim,
  .article-page,
  .article-page-surface,
  .article-title,
  .article-body,
  body .thought-shell {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

@media (max-width: 420px) {
  .identity span {
    display: none;
  }

  .identity strong {
    font-size: 13px;
  }

  .active-meta p {
    display: none;
  }

  .active-count {
    grid-row: auto;
  }

  .active-meta {
    grid-template-columns: auto auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}
/* Personal-site section navigation. Kept isolated from the canvas controls. */
.thought-site-nav {
  position: fixed;
  z-index: 40;
  top: 88%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.8vw, 28px);
  transform: translate(-50%, -50%);
  font: 400 11px/normal "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui, sans-serif;
  letter-spacing: normal;
  white-space: nowrap;
  transition:
    opacity 320ms cubic-bezier(0.2, 0, 0, 1),
    transform 420ms cubic-bezier(0.2, 0, 0, 1),
    filter 320ms ease-out;
}

body.is-article-open .thought-site-nav {
  opacity: 0;
  transform: translate(-50%, calc(-50% + 10px)) scale(0.94);
  filter: blur(3px);
  pointer-events: none;
}

.thought-site-nav a {
  position: relative;
  display: grid;
  min-height: 44px;
  padding: 0 8px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.48);
  text-decoration: none;
  font-optical-sizing: auto;
  letter-spacing: normal;
  transition:
    color 160ms ease,
    opacity 160ms ease,
    transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.thought-site-nav a > span {
  position: relative;
  display: inline-block;
}

.thought-site-nav a > span::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms ease;
}

.thought-site-nav a:not(:hover) > span::after {
  transform-origin: right center;
}

.thought-site-nav a[aria-current="page"] > span::after {
  transform: scaleX(1);
}

.thought-site-nav a:hover,
.thought-site-nav a:focus-visible,
.thought-site-nav a[aria-current="page"] {
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .thought-site-nav a:not([aria-current="page"]):hover > span::after,
  .thought-site-nav a:not([aria-current="page"]):focus-visible > span::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

.thought-site-nav a:active {
  transition: transform 90ms ease-out;
  transform: translateY(2px) rotate(0deg) scale(0.94, 0.9);
}

.thought-site-nav a:focus-visible {
  outline: none;
  text-decoration: none;
}

@media (max-width: 768px) {
  .thought-site-nav a > span::after {
    display: none;
  }
}

:root[data-embed="true"] .thought-site-nav {
  display: none;
}