:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: rgba(17, 26, 47, 0.72);
  --line: rgba(102, 180, 255, 0.18);
  --text: #e7eeff;
  --muted: #8fa3cc;
  --accent: #66b4ff;
  --accent-2: #a78bfa;
  --glow-1: rgba(56, 102, 214, 0.35);
  --glow-2: rgba(139, 92, 246, 0.22);
  --field-bg: rgba(10, 17, 33, 0.94);
  --field-text: #e7eeff;
  --field-muted: #9fb2d8;
  --field-border: rgba(102, 180, 255, 0.34);
  --field-disabled-bg: rgba(17, 26, 47, 0.76);
  --field-disabled-text: #8fa3cc;
  --focus-ring: #66b4ff;
  --pill: rgba(22, 38, 69, 0.65);
  --pill-hover: rgba(36, 60, 104, 0.85);
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f3f7ff;
    --panel: rgba(255, 255, 255, 0.82);
    --line: rgba(42, 91, 148, 0.24);
    --text: #102033;
    --muted: #4b6284;
    --accent: #0b63b6;
    --accent-2: #6d3bc9;
    --glow-1: rgba(102, 180, 255, 0.3);
    --glow-2: rgba(167, 139, 250, 0.2);
    --field-bg: #ffffff;
    --field-text: #102033;
    --field-muted: #53677f;
    --field-border: rgba(42, 91, 148, 0.38);
    --field-disabled-bg: #e2e8f0;
    --field-disabled-text: #64748b;
    --focus-ring: #0b63b6;
    --pill: rgba(255, 255, 255, 0.78);
    --pill-hover: rgba(231, 240, 255, 0.94);
  }
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7ff;
  --panel: rgba(255, 255, 255, 0.82);
  --line: rgba(42, 91, 148, 0.24);
  --text: #102033;
  --muted: #4b6284;
  --accent: #0b63b6;
  --accent-2: #6d3bc9;
  --glow-1: rgba(102, 180, 255, 0.3);
  --glow-2: rgba(167, 139, 250, 0.2);
  --field-bg: #ffffff;
  --field-text: #102033;
  --field-muted: #53677f;
  --field-border: rgba(42, 91, 148, 0.38);
  --field-disabled-bg: #e2e8f0;
  --field-disabled-text: #64748b;
  --focus-ring: #0b63b6;
  --pill: rgba(255, 255, 255, 0.78);
  --pill-hover: rgba(231, 240, 255, 0.94);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b16;
  --panel: rgba(17, 26, 47, 0.72);
  --line: rgba(102, 180, 255, 0.18);
  --text: #e7eeff;
  --muted: #8fa3cc;
  --accent: #66b4ff;
  --accent-2: #a78bfa;
  --glow-1: rgba(56, 102, 214, 0.35);
  --glow-2: rgba(139, 92, 246, 0.22);
  --field-bg: rgba(10, 17, 33, 0.94);
  --field-text: #e7eeff;
  --field-muted: #9fb2d8;
  --field-border: rgba(102, 180, 255, 0.34);
  --field-disabled-bg: rgba(17, 26, 47, 0.76);
  --field-disabled-text: #8fa3cc;
  --focus-ring: #66b4ff;
  --pill: rgba(22, 38, 69, 0.65);
  --pill-hover: rgba(36, 60, 104, 0.85);
}
body.test-env {
  --bg: #07120c;
  --panel: rgba(19, 38, 26, 0.72);
  --line: rgba(99, 201, 135, 0.22);
  --muted: #9ccab1;
  --accent: #63c987;
  --accent-2: #a9eec5;
  --glow-1: rgba(47, 158, 68, 0.3);
  --glow-2: rgba(99, 201, 135, 0.16);
  --pill: rgba(22, 50, 34, 0.65);
  --pill-hover: rgba(34, 74, 50, 0.85);
}
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 600px at 85% -5%, var(--glow-1), transparent 60%),
    radial-gradient(700px 500px at -5% 105%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
.card {
  width: 100%;
  max-width: 400px;
  margin-top: 118px;
  padding: 1.4rem 1.6rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: center;
  animation: rise 0.5s ease-out both;
  position: relative;
}
/* The dog lives on top of the card, so the card never has an empty hole while it roams. */
.yard {
  position: absolute;
  left: 1.6rem;
  right: 1.6rem;
  bottom: calc(100% - 4px);
  height: 122px;
}
.dog {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 122px;
  height: 122px;
  margin-left: -61px;
  transform-origin: 50% 90%;
  will-change: transform;
}
.status {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  display: block;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  line-height: 0;
  transform: translate(70px, 0);
  will-change: transform;
}
/* dog-yard.js marks the ball throwable (not under reduced motion). */
.status[data-throw] {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  cursor: grab;
}
html.ball-held, html.ball-held * { cursor: grabbing !important; user-select: none !important; }
/* During fetch, pressing the dog snatches the ball, so it shouldn't scroll or pop a callout. */
.dog.keepaway { touch-action: none; -webkit-touch-callout: none; user-select: none; cursor: grab; }
.dog.keepaway a { cursor: grab; }
.dog[data-dog-throw] {
  touch-action: none;
  -webkit-touch-callout: none;
  user-select: none;
  cursor: grab;
}
.dog[data-dog-throw] a { cursor: grab; }
html.dog-held, html.dog-held * { cursor: grabbing !important; user-select: none !important; }
.dog.dog-held .avatar { animation: dog-kick 0.18s ease-in-out infinite alternate; }
.dog.dog-bow .avatar { animation: dog-bow 0.5s ease-in-out infinite alternate; }
.dog.dog-shake .avatar { animation: dog-shake 0.09s linear infinite; }
.status.held .dot { transform: scale(1.6); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45); }
/* A fingertip-sized target for picking the ball up on phones. */
@media (pointer: coarse) { .status[data-throw] .dot::before { inset: -14px; } }
.status .dot {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: background 0.3s ease, transform 0.12s ease;
}
.status .dot::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
}
.status[data-state="ok"] .dot { background: #4ade80; }
.status[data-state="warn"] .dot { background: #fbbf24; }
.status[data-state="bad"] .dot { background: #f87171; }
/* Health checks panel that opens from the status ball. */
.status-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: min(290px, calc(100vw - 16px));
  padding: 0.75rem 0.9rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(14, 22, 41, 0.97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  opacity: 0;
  transform: translateY(6px) scale(0.97);
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.status-panel[data-side="below"] { transform: translateY(-6px) scale(0.97); }
.status-panel.show { opacity: 1; transform: none; }
.status-panel p { margin: 0; }
.status-panel .pip { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8a8f99; }
.status-panel [data-state="ok"] > .pip { background: #4ade80; }
.status-panel [data-state="warn"] > .pip { background: #fbbf24; }
.status-panel [data-state="bad"] > .pip { background: #f87171; }
.status-panel-head { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
.status-panel-list { margin: 0.45rem 0; padding: 0; list-style: none; }
.status-panel-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.18rem 0; }
.status-panel-list .name { flex: none; white-space: nowrap; }
.status-panel-list .detail { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.7rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.status-panel-foot { padding-top: 0.45rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.68rem; text-align: right; }
.status-panel-foot a.src { color: var(--muted); text-decoration: underline dotted; text-underline-offset: 2px; }
.status-panel-foot a.src:hover { color: var(--text); }
.dog.roam, .status.roam {
  position: fixed;
  left: 0;
  top: 0;
  bottom: auto;
  margin: 0;
  z-index: 40;
}
.dog.roam { transform-origin: 50% 50%; }
.status.roam { z-index: 41; }
.yelp {
  position: fixed;
  z-index: 45;
  pointer-events: none;
  padding: 0.15rem 0.5rem;
  border-radius: 999px 999px 999px 3px;
  background: rgba(248, 250, 252, 0.94);
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: yelp 2.4s ease-out forwards;
}
@keyframes yelp {
  0% { opacity: 0; transform: translate(-50%, -100%) translateY(6px) rotate(var(--tilt, 0deg)) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--tilt, 0deg)) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -100%) translateY(-24px) rotate(var(--tilt, 0deg)) scale(1); }
}
@keyframes dog-kick {
  from { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  to { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25)); }
}
@keyframes dog-bow {
  from { transform: translateY(2px) scale(1.05, 0.9) rotate(-2deg); }
  to { transform: translateY(8px) scale(1.15, 0.78) rotate(2deg); }
}
@keyframes dog-shake {
  0%, 100% { transform: translateX(-2px) rotate(-3deg); }
  50% { transform: translateX(2px) rotate(3deg); }
}
.avatar {
  display: inline-block;
  width: 116px;
  height: 116px;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 32px var(--glow-1);
  transition: transform 0.2s ease;
}
.avatar:hover { transform: scale(1.04) rotate(-2deg); }
.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--bg);
  background: var(--field-bg);
}
/* Rest on the cartoon for a few seconds and it flips over to the real dog. */
.avatar-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-touch-callout: none;
}
.avatar-flip img {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-user-drag: none;
  user-select: none;
}
.avatar-back { transform: rotateY(180deg); }
.avatar.flipped .avatar-flip { transform: perspective(600px) rotateY(180deg); }
h1 {
  margin: 0 0 0.25rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.email {
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}
.email:hover { color: var(--accent); }
.tilt-toggle {
  margin: 0.35rem auto 0;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--pill);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}
.tilt-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.credit {
  margin: 1rem 0 0;
  color: var(--muted);
  /* 12 px: the smallest size for words a visitor is meant to read. */
  font-size: 0.75rem;
  text-align: center;
}
.credit a { color: inherit; text-decoration: underline dotted; text-underline-offset: 2px; }
.credit a:hover { color: var(--accent); }
.credit a:focus-visible { color: var(--accent); outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.footer-links { margin-top: 0.35rem; }
.homepage-theme-switch {
  margin: 1rem auto 0;
}
.homepage-theme-switch select {
  background-color: var(--field-bg);
  color: var(--field-text);
  border-color: var(--field-border);
}
/* Two lines: the state and the commit, then the two times. Each fact is a block that moves as one piece, so a
   line that truly does not fit (a small phone with enlarged text) breaks between two facts and stays in the card.
   The dot between two facts is drawn on a space. A space at a line break takes no room, so the dot goes with
   it and no line starts or ends with one. */
.build {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin: 0.45rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: help;
  /* Build state colours: a dark-page and a light-page value each, so the words stay readable in both. */
  --build-ok: #4ade80;
  --build-behind: #f87171;
  --build-ahead: #fbbf24;
}
@media (prefers-color-scheme: light) {
  .build { --build-ok: #166534; --build-behind: #b91c1c; --build-ahead: #92400e; }
}
html[data-theme="light"] .build { --build-ok: #166534; --build-behind: #b91c1c; --build-ahead: #92400e; }
html[data-theme="dark"] .build { --build-ok: #4ade80; --build-behind: #f87171; --build-ahead: #fbbf24; }
.build[hidden] { display: none; }
.build-line { display: block; max-width: 100%; text-align: center; }
.build-line > * { vertical-align: middle; }
.build-line > :not(.sep) { display: inline-block; overflow-wrap: anywhere; }
.build-line > .build-fact { display: inline-flex; align-items: center; gap: 0.4rem; }
.build code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--text); }
.build .sep {
  opacity: 0.6;
  word-spacing: 0.7rem;
  background: radial-gradient(circle at 50% 58%, currentColor 0 0.1em, transparent 0.12em);
}
.build-mark {
  display: inline-grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--muted);
  color: var(--bg);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}
.build[data-state="current"] .build-mark { background: var(--build-ok); }
.build[data-state="current"] #buildState { color: var(--build-ok); }
.build[data-state="behind"] .build-mark { background: var(--build-behind); }
.build[data-state="behind"] #buildState { color: var(--build-behind); }
.build[data-state="ahead"] .build-mark { background: var(--build-ahead); }
.build[data-state="ahead"] #buildState { color: var(--build-ahead); }
.bio {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
}
/* The about text follows the site name directly: no rule above it and no visible label. */
.about-author {
  margin: 0.75rem 0 0;
  text-align: left;
}
/* "About the Author" stays in the page for screen readers and is not drawn. */
.mini-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.about-author h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.35;
}
.about-author p:not(.mini-title) {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.env-badge { margin-top: 0.6rem; }
.yelirverse-family {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.yelirverse-family h2 {
  margin: 0.1rem 0 0.9rem;
  font-size: 0.98rem;
  line-height: 1.35;
}
.family-group + .family-group { margin-top: 1rem; }
.family-group h3 {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.family-grid {
  display: grid;
  gap: 0.5rem;
}
.family-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--pill);
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.family-card:hover,
.family-card:focus-visible {
  border-color: var(--accent);
  background: var(--pill-hover);
  transform: translateY(-1px);
}
.family-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.55rem;
}
.family-card small,
.family-card > span:not(.family-card-head),
.family-card em {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}
.family-card em { font-style: normal; }
.links {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--pill);
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.links a::after {
  content: "\2197";
  color: var(--muted);
  transition: color 0.15s ease, transform 0.15s ease;
}
.links a:hover {
  background: var(--pill-hover);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.links a:hover::after { color: var(--accent); transform: translate(2px, -2px); }

.links .bluesky-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--pill);
  color: var(--text);
  text-align: left;
  overflow: hidden;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.links .bluesky-card:hover { background: var(--pill-hover); border-color: var(--accent); transform: translateY(-1px); }
.links .bluesky-card .bluesky-primary,
.links .bluesky-card .bluesky-primary:hover {
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
  box-shadow: none;
}
.links .bluesky-card .bluesky-primary::after { align-self: flex-start; }
.bluesky-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0 1.1rem 1rem;
}
.bluesky-actions button,
.bluesky-feed-button,
.bluesky-close,
.bluesky-fullscreen,
.bluesky-retry,
.bluesky-lightbox button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.bluesky-actions button { padding: 0.38rem 0.7rem; }
/* A focus ring in the theme's own colour: the browser's default ring is too faint on the light theme. */
.bluesky-actions button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bluesky-actions button:hover,
.bluesky-actions button:focus-visible,
.bluesky-feed-button:hover,
.bluesky-feed-button:focus-visible,
.bluesky-close:hover,
.bluesky-close:focus-visible,
.bluesky-fullscreen:hover,
.bluesky-fullscreen:focus-visible,
.bluesky-retry:hover,
.bluesky-retry:focus-visible,
.bluesky-lightbox button:hover,
.bluesky-lightbox button:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.bluesky-more-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.24s ease;
}
.bluesky-more-panel[hidden],
.bluesky-actions button[hidden] { display: none; }
.bluesky-more-list {
  margin: 0;
  padding: 0 1.1rem 0.85rem;
  list-style: none;
}
.bluesky-more-list li { border-top: 1px solid var(--line); padding-top: 0.65rem; margin-top: 0.65rem; }
.bluesky-more-list a { display: block; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 0.82rem; line-height: 1.4; overflow-wrap: anywhere; }
.bluesky-more-list a::after { content: none; }
.bluesky-more-list a:hover { color: var(--accent); background: transparent; transform: none; }
.bluesky-more-list small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: 0.72rem; }
body.bluesky-lock { overflow: hidden; }
.bluesky-overlay[hidden] { display: none; }
.bluesky-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  /* The page colour of the theme, with nothing showing through: light in the light theme, dark in the dark one. */
  background: var(--bg);
  color: var(--text);
  overflow: auto;
}
.bluesky-feed-shell { width: min(100%, 1680px); margin: 0 auto; }
.bluesky-feed-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0 1rem;
  background: linear-gradient(var(--bg) 78%, transparent);
}
.bluesky-feed-head h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2.4rem); }
.bluesky-feed-head p { margin: 0.2rem 0 0; color: var(--muted); }
.bluesky-feed-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.45rem; }
.bluesky-feed-button,
.bluesky-close,
.bluesky-fullscreen,
.bluesky-retry { padding: 0.5rem 0.8rem; }
/* The three controls at the top are one set: a link and two buttons with the same box, height and words. */
.bluesky-feed-controls > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.25rem;
  margin: 0;
  /* The outline of a control has to reach 3 to 1 against what is beside it; the faint line colour does not. */
  border-color: var(--muted);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.bluesky-feed-controls > [hidden] { display: none; }
.bluesky-feed-controls > :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bluesky-feed-grid { column-count: 1; column-gap: 1rem; }
.bluesky-feed-post {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  text-align: left;
  break-inside: avoid;
}
.bluesky-feed-post p { margin: 0.5rem 0; }
.bluesky-feed-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.bluesky-feed-text a,
.bluesky-reply a,
.bluesky-quote a,
.bluesky-external a,
.bluesky-post-link { color: var(--accent); text-decoration: none; }
.bluesky-feed-text a:hover,
.bluesky-reply a:hover,
.bluesky-quote a:hover,
.bluesky-external a:hover,
.bluesky-post-link:hover { text-decoration: underline; }
.bluesky-meta,
.bluesky-counts,
.bluesky-reply { color: var(--muted); font-size: 0.78rem; }
/* The exact date and time of a post: in the page for a screen reader, after the age, but not drawn. */
.bluesky-exact { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bluesky-reply { padding: 0.5rem 0.65rem; border-left: 2px solid var(--line); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.bluesky-quote,
.bluesky-external {
  display: block;
  margin-top: 0.7rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-decoration: none;
}
.bluesky-quote b,
.bluesky-external b { display: block; margin-bottom: 0.2rem; }
.bluesky-quote span,
.bluesky-external span { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.bluesky-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.bluesky-media button { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.bluesky-media img,
.bluesky-video img,
.bluesky-external img { display: block; width: 100%; border-radius: 10px; object-fit: cover; background: rgba(255, 255, 255, 0.05); }
.bluesky-media img { max-height: 320px; }
.bluesky-video { display: block; position: relative; margin-top: 0.7rem; }
.bluesky-video::after { content: "Play on Bluesky"; position: absolute; left: 0.6rem; bottom: 0.6rem; padding: 0.25rem 0.45rem; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.72rem; }
.bluesky-external { overflow: hidden; }
.bluesky-external img { margin-bottom: 0.55rem; max-height: 190px; }
.bluesky-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.75rem; }
.bluesky-feed-status { min-height: 2.5rem; padding: 0.75rem 0 1.5rem; color: var(--muted); text-align: center; }
.bluesky-feed-status[hidden] { display: none; }
.bluesky-lightbox[hidden] { display: none; }
.bluesky-lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.92);
}
.bluesky-lightbox img { max-width: 100%; max-height: 92dvh; margin: auto; border-radius: 12px; }
.bluesky-lightbox button { padding: 0.65rem 0.85rem; }
.bluesky-lightbox .close { position: absolute; top: max(0.75rem, env(safe-area-inset-top)); right: max(0.75rem, env(safe-area-inset-right)); }
@media (min-width: 760px) { .bluesky-feed-grid { column-count: 2; } }
@media (min-width: 1180px) { .bluesky-feed-grid { column-count: 3; } }
@media (min-width: 1560px) { .bluesky-feed-grid { column-count: 4; } }
@media (max-width: 560px) {
  .bluesky-overlay { padding: max(0.65rem, env(safe-area-inset-top)) max(0.65rem, env(safe-area-inset-right)) max(0.65rem, env(safe-area-inset-bottom)) max(0.65rem, env(safe-area-inset-left)); }
  .bluesky-feed-head { align-items: flex-start; flex-direction: column; }
  .bluesky-feed-controls { justify-content: flex-start; }
  .bluesky-lightbox { grid-template-columns: 1fr; }
  .bluesky-lightbox .prev,
  .bluesky-lightbox .next { position: fixed; bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .bluesky-lightbox .prev { left: 1rem; }
  .bluesky-lightbox .next { right: 1rem; }
}
.twitch-toasts {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: calc(100vw - 2.5rem);
  pointer-events: none;
}
.twitch-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  padding: 0.75rem 0.85rem 0.75rem 1rem;
  border: 1px solid rgba(169, 112, 255, 0.45);
  border-radius: 16px;
  background: rgba(28, 18, 52, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 28px rgba(145, 70, 255, 0.35);
  /* The toast is a dark purple chip in both themes, so its words keep one light colour and do not follow the page text. */
  --toast-text: #f4eeff;
  --toast-muted: #cdbfe8;
  color: var(--toast-text);
  font-size: 0.9rem;
  animation: toast-in 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) both, bob 3.2s ease-in-out 0.6s infinite;
}
.twitch-toast[hidden] { display: none; }
.twitch-toast .live {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4d4d;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.twitch-toast a { color: #c9a7ff; font-weight: 600; text-decoration: none; }
.twitch-toast a:hover { color: #e6d6ff; text-decoration: underline; }
.twitch-toast button {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--toast-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.twitch-toast button:hover { background: rgba(255, 255, 255, 0.08); color: var(--toast-text); }
/* The chip is dark in both themes, so the focus ring is light in both. The browser's default ring is too faint here on the light theme. */
.twitch-toast button:focus-visible { outline: 2px solid var(--toast-text); outline-offset: 1px; }
.links a.social { text-align: left; }
.links a.social > span { flex: 1; }
.links a .poster {
  flex: none;
  width: 64px;
  height: 96px;
  margin-right: 1rem;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.links a .poster[hidden] { display: none; }
.links a .poster.art { width: 56px; height: 56px; border-radius: 8px; }
.links li.social-item { grid-column: 1 / -1; }
.toplinks {
  position: absolute;
  top: 0.45rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  gap: 1rem;
  font-size: 0.74rem;
}
.toplinks a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}
.toplinks a:hover,
.toplinks a:focus-visible { color: var(--accent); }
.toplinks .tip {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: max-content;
  max-width: 14rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.toplinks a:focus-visible .tip { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) {
  .toplinks a:hover .tip { opacity: 1; visibility: visible; transform: none; }
}
.links a.social small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.links a.social small[hidden] { display: none; }
.links a.social small.post-text {
  display: -webkit-box;
  margin-top: 0.35rem;
  color: var(--text);
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.links a.social small.post-text[hidden] { display: none; }
.links a.social small.post-quote {
  display: -webkit-box;
  margin-top: 0.35rem;
  padding-left: 0.55rem;
  border-left: 2px solid var(--line);
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
.links a.social small.post-quote b { color: var(--text); font-weight: 600; }
.links a.social small.post-quote[hidden] { display: none; }
.links a.social.featured { flex-wrap: wrap; padding: 1rem 1.1rem; }
.links a.social.featured > span { flex: 1 1 0; min-width: 0; }
.links a.social.featured::after { align-self: flex-start; }
.links a.social .handle { margin-left: 0.4em; color: var(--muted); font-size: 0.78rem; font-weight: 400; }
.links a.social.featured small.post-text {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  -webkit-line-clamp: 6;
}
.links a.social.featured small.post-quote {
  margin-top: 0.5rem;
  font-size: 0.84rem;
  line-height: 1.4;
  -webkit-line-clamp: 5;
}
.links a.social.featured .poster.art {
  order: 3;
  width: 100%;
  height: auto;
  max-height: 220px;
  margin: 0.75rem 0 0;
  border-radius: 10px;
}
.links a.social small.custom-status { color: var(--text); font-style: italic; }
.brand-icon {
  width: 1em;
  height: 0.9em;
  margin-right: 0.4rem;
  vertical-align: -0.08em;
  fill: #1185fe;
}
.brand-icon.discord { width: 1.2em; fill: #5865f2; }
.presence-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 0.45rem;
  border-radius: 50%;
  vertical-align: middle;
  background: #80848e;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.presence-dot[hidden] { display: none; }
.presence-dot[data-status="online"] { background: #23a55a; }
.presence-dot[data-status="idle"] { background: #f0b232; }
.presence-dot[data-status="dnd"] { background: #f23f43; }
/* Discord lives in a floating card bottom-left, opposite the Twitch toasts. */
.discord-dock {
  position: fixed;
  left: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: min(24rem, calc(100vw - 2.5rem));
  padding: 0.8rem 1.15rem 0.8rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text);
  text-decoration: none;
  text-align: left;
  animation: rise 0.5s ease-out backwards;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, max-width 0.25s ease;
}
/* On hover the card widens and lines wrap, so long statuses and song credits show in full. */
.discord-dock:hover,
.discord-dock:focus-visible { max-width: min(36rem, calc(100vw - 2.5rem)); }
.discord-dock:hover .dock-title,
.discord-dock:focus-visible .dock-title,
.discord-dock:hover .dock-text small,
.discord-dock:focus-visible .dock-text small { white-space: normal; overflow-wrap: anywhere; }
.discord-dock:hover .dock-text small.dock-more,
.discord-dock:focus-visible .dock-text small.dock-more { max-height: 4em; }
.discord-dock:not(:has(.dock-art:not([hidden]))) { padding-left: 1.15rem; }
.dock-arts { position: relative; flex: none; display: flex; }
.dock-arts:not(:has(.dock-art:not([hidden]))) { display: none; }
/* A second activity (usually the song) rides on the corner of the first one's art, like Discord does it. */
.dock-art-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.35rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--bg, #111), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.dock-art-badge[hidden], .dock-arts:has(.dock-art[hidden]) .dock-art-badge { display: none; }
.dock-also { display: flex; flex-direction: column; min-width: 0; }
.dock-also[hidden] { display: none; }
.discord-dock:hover,
.discord-dock:focus-visible { border-color: rgba(88, 101, 242, 0.6); background: var(--pill-hover); transform: translateY(-2px); }
.dock-art { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 9px; object-fit: cover; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.dock-art[hidden] { display: none; }
.dock-text { display: flex; flex-direction: column; min-width: 0; }
.dock-title { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-handle { margin-left: 0.45rem; color: var(--muted); font-size: 0.8rem; }
.dock-text small {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dock-text small.custom-status { color: var(--text); font-style: italic; }
.dock-text small.dock-stats { color: var(--accent-2); }
.dock-text small.dock-stats[role="link"] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.dock-text small.dock-stats[role="link"]:hover { color: var(--text); }
.custom-status .status-emoji { width: 1.35em; height: 1.35em; margin: -0.2em 0; object-fit: contain; vertical-align: middle; }
.dock-text small[hidden] { display: none; }
.dock-progress {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dock-progress[hidden] { display: none; }
.dock-progress .t { flex: none; min-width: 2rem; }
.dock-progress .t:last-child { text-align: right; }
.dock-progress .bar {
  flex: 1 1 auto;
  min-width: 2.4rem;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(143, 163, 204, 0.26);
}
.dock-progress .bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: var(--muted);
  opacity: 0.72;
  transition: width 0.2s linear;
}
/* Game and Spotify details slide out on hover so the card stays small. */
.dock-text small.dock-more { max-height: 0; margin-top: 0; opacity: 0; transition: max-height 0.25s ease, margin-top 0.25s ease, opacity 0.2s ease; }
.discord-dock:hover .dock-more,
.discord-dock:focus-visible .dock-more { max-height: 1.4em; margin-top: 0.2rem; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .dock-progress .bar i { transition: none; }
}
/* In the home page the card is a panel in the page, under the profile, so it never covers a link or a card.
   The rules above (fixed in a corner) are kept for the shape, colours and hover; these put it in the flow. */
.card > .discord-dock,
.card > .discord-dock:hover,
.card > .discord-dock:focus-visible {
  position: static;
  min-width: 0;
  max-width: 100%;
  margin: 0.75rem 0 0;
  border-radius: 16px;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.12);
  transform: none;
}
.card > .discord-dock:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.links li.tesla-item[hidden] { display: none; }
/* Letterboxd, Roach and GitHub: a thin one-line row (name, one fact, a marker) that opens to show the full card. */
.tesla {
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.95rem;
  transition: border-color 0.15s ease;
}
.tesla:has(> .row-toggle:hover) { border-color: var(--accent); }
.row-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.row-toggle:hover { background: var(--pill-hover); }
.row-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.row-name { flex: none; white-space: nowrap; }
/* The fact may run to a second line inside the same row height; anything longer ends in an ellipsis. */
.row-fact {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}
/* Very narrow phones: the fact takes its own line under the name, so it is not squeezed into a sliver. */
@media (max-width: 360px) {
  .row-toggle { flex-wrap: wrap; row-gap: 0.1rem; }
  .row-name { flex: 1; }
  .row-fact { order: 3; flex: none; width: 100%; }
}
/* The open row's panel says the same thing in full, so the short fact steps aside. */
.row-toggle[aria-expanded="true"] .row-fact { visibility: hidden; }
.row-mark {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.15rem;
  border-top: 1.5px solid var(--muted);
  border-right: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.row-toggle[aria-expanded="true"] .row-mark { transform: rotate(135deg); }
.row-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.2rem 1rem 0.8rem;
}
.row-panel[hidden] { display: none; }
.row-panel > span { flex: 1; min-width: 0; }
.tesla small {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.tesla small[hidden] { display: none; }
/* The themed second line under the plain status: same quiet colour, set apart by its slant, free to wrap. */
.tesla small.tesla-line { font-style: italic; overflow-wrap: anywhere; }
.tesla small.tesla-born { font-size: 0.68rem; font-style: italic; opacity: 0.75; cursor: help; }
.tesla-stats {
  flex-basis: 100%;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  text-align: center;
}
.tesla-stats[hidden] { display: none; }
.tesla-stats > small,
.myth-inner > small { margin-top: 0.55rem; font-size: 0.62rem; opacity: 0.8; }
.myth-inner > small { display: block; white-space: pre-line; }
/* Strawman claims: the claim shows, the facts open on hover (or tap/focus) underneath. */
.myth-claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.2rem 0.4rem 0.3rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.myth-claim q { font-size: 0.86rem; font-style: italic; line-height: 1.35; text-decoration: line-through 1.5px transparent; transition: text-decoration-color 0.25s ease; }
.myth-hint { color: var(--muted); font-size: 0.66rem; }
.myth-hint::after { content: "Hover for the facts ▾"; }
.myth-facts { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.myth-inner { min-height: 0; overflow: hidden; }
.myth-verdict { margin: 0.45rem 0 0.6rem; font-size: 0.8rem; line-height: 1.45; text-align: left; }
.myth-verdict:empty { display: none; }
.myth-verdict b { color: var(--text); }
.myth-claim:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.myth.is-open .myth-facts { grid-template-rows: 1fr; }
.myth.is-open .myth-claim q { text-decoration-color: rgba(255, 99, 99, 0.85); }
.myth.is-open .myth-hint::after { content: "Busted ▴"; }
@media (hover: hover) {
  .myth:hover .myth-facts { grid-template-rows: 1fr; }
  .myth:hover .myth-claim q { text-decoration-color: rgba(255, 99, 99, 0.85); }
  .myth:hover .myth-hint::after { content: "Busted ▴"; }
}
@media (hover: none) {
  .myth-hint::after { content: "Tap for the facts ▾"; }
}
/* A fact gets underlined in green instead of struck out. */
.fact .myth-claim q { text-decoration-line: underline; text-underline-offset: 3px; }
.fact .myth-hint::after { content: "Hover for the numbers ▾"; }
.fact.is-open .myth-claim q { text-decoration-color: rgba(63, 240, 138, 0.85); }
.fact.is-open .myth-hint::after { content: "True ▴"; }
@media (hover: hover) {
  .fact:hover .myth-claim q { text-decoration-color: rgba(63, 240, 138, 0.85); }
  .fact:hover .myth-hint::after { content: "True ▴"; }
}
@media (hover: none) {
  .fact .myth-hint::after { content: "Tap for the numbers ▾"; }
  .fact.is-open .myth-hint::after { content: "True ▴"; }
}
.eff-bars {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  font-size: 0.66rem;
  text-align: left;
}
.eff-bars:empty { display: none; }
.eff-bars li { display: contents; }
.eff-bars .eff-name { color: var(--muted); }
.eff-bars .eff-pct { color: var(--text); font-weight: 700; text-align: right; }
.eff-track {
  position: relative;
  height: 10px;
  border: 2px solid var(--text);
  background: rgba(255, 99, 99, 0.18);
  overflow: hidden;
}
.eff-track i,
.eff-track s {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.eff-track i { background: var(--fill, #3ff08a); }
.eff-track s { background: var(--fill, #3ff08a); opacity: 0.45; }
.tesla-stats p {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tesla-stats dl {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin: 0;
}
.tesla-stats dl:has(> div:nth-child(4)) {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 0.7rem;
}
.tesla-stats dl > div { display: flex; flex-direction: column; }
.tesla-stats dt { order: 1; color: var(--muted); font-size: 0.72rem; }
.tesla-stats dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tesla-stats dd span { color: var(--muted); font-size: 0.7rem; font-weight: 400; }
.tesla-stats dd.sub { order: 2; color: var(--muted); font-size: 0.68rem; font-weight: 400; opacity: 0.8; }
.tesla-more { flex-basis: 100%; min-width: 0; }
.tesla-more[hidden] { display: none; }
.tesla-more > summary {
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.tesla-more > summary::-webkit-details-marker,
.film-year > summary::-webkit-details-marker { display: none; }
.tesla-more > summary::before,
.film-year > summary::before {
  content: "";
  display: inline-block;
  margin-right: 0.45em;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.5em;
  border-color: transparent transparent transparent currentColor;
  vertical-align: 0.05em;
  transition: transform 0.2s;
}
.tesla-more[open] > summary::before,
.film-year[open] > summary::before { transform: rotate(90deg); }
.tesla-more.popped > summary { color: var(--text); }
.tesla-more.closing > summary::before,
.film-year.closing > summary::before { transform: none; }
.tesla-more > summary:hover,
.tesla-more > summary:focus-visible,
.film-year > summary:hover,
.film-year > summary:focus-visible { color: var(--text); }
.film-year > summary {
  padding: 0.3rem 0;
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.film-year[open] > summary { margin-bottom: 0.2rem; }
/* Hover-to-toggle countdown, timed to DWELL_MS in details-motion.js. */
.tesla-more > summary,
.film-year > summary {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat center bottom / 0% 2px;
}
.tesla-more > summary.dwelling,
.film-year > summary.dwelling {
  background-size: 100% 2px;
  transition: background-size 2s linear;
}
.film-year + .film-year { border-top: 1px dashed var(--line); }
.film-graph {
  display: grid;
  grid-template-columns: 2.6em repeat(12, minmax(0, 1fr));
  gap: 3px;
  align-items: center;
  max-width: 17rem;
  margin: 0 auto;
}
.film-graph .m,
.film-graph .y { color: var(--muted); font-size: 0.58rem; line-height: 1; }
.film-graph .y { padding-right: 0.35em; text-align: right; font-variant-numeric: tabular-nums; }
.film-graph .cell { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.film-graph .cell[data-level="1"] { background: rgba(0, 224, 84, 0.35); }
.film-graph .cell[data-level="2"] { background: rgba(0, 224, 84, 0.65); }
.film-graph .cell[data-level="3"] { background: #00e054; }
.film-graph .cell.future { background: transparent; outline: 1px dashed rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.film-graph .cell:hover { outline: 1px solid var(--text); outline-offset: -1px; }
/* GitHub contribution calendar: last year on the card, every year in the popout. */
.links li.github-item[hidden] { display: none; }
.brand-icon.github { fill: var(--text); }
.gh-cal { flex-basis: 100%; min-width: 0; }
.gh-weeks { --gap: 1.5px; }
.gh-months,
.gh-days {
  display: grid;
  grid-template-columns: repeat(var(--weeks), minmax(0, 1fr));
  column-gap: var(--gap);
}
.gh-months { height: 0.75rem; color: var(--muted); font-size: 0.55rem; line-height: 1; text-align: left; }
.gh-months span { grid-row: 1; white-space: nowrap; }
.gh-days { grid-template-rows: repeat(7, auto); grid-auto-flow: column; row-gap: var(--gap); }
.gh-weeks .cell,
.gh-legend .cell { display: block; aspect-ratio: 1; border-radius: 1px; background: rgba(255, 255, 255, 0.07); }
.gh-weeks .cell[data-level="1"],
.gh-legend .cell[data-level="1"] { background: #0e4429; }
.gh-weeks .cell[data-level="2"],
.gh-legend .cell[data-level="2"] { background: #006d32; }
.gh-weeks .cell[data-level="3"],
.gh-legend .cell[data-level="3"] { background: #26a641; }
.gh-weeks .cell[data-level="4"],
.gh-legend .cell[data-level="4"] { background: #39d353; }
/* Days spent at a Bitbucket shop get a faint Bitbucket blue instead of reading as idle. */
.gh-weeks .cell.away[data-level="0"],
.gh-legend .cell.away { background: rgba(38, 132, 255, 0.3); }
.gh-weeks .cell.pad { visibility: hidden; }
.gh-weeks .cell.future { background: transparent; outline: 1px dashed rgba(255, 255, 255, 0.08); outline-offset: -1px; }
.gh-weeks .cell[title]:hover { outline: 1px solid var(--text); outline-offset: -1px; }
.gh-body { text-align: left; }
.gh-year + .gh-year { margin-top: 0.9rem; }
.gh-year .gh-weeks { --gap: 2px; }
.gh-year p { margin: 0 0 0.3rem; color: var(--muted); font-size: 0.72rem; }
.gh-year p b { margin-right: 0.35em; color: var(--text); font-variant-numeric: tabular-nums; }
.gh-away-tag { margin-left: 0.5em; padding: 0.05em 0.45em; border-radius: 999px; background: rgba(38, 132, 255, 0.18); color: #8cbcff; font-size: 0.64rem; }
.popout small.gh-legend,
small.gh-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--line); font-size: 0.66rem; }
.gh-legend .gh-scale,
.gh-legend .gh-key { display: inline-flex; align-items: center; gap: 2px; }
.gh-legend .gh-key { gap: 0.4em; }
.gh-legend .cell { width: 9px; }
.tesla-col > .tesla-stats,
.films-body > .tesla-stats { margin-top: 0.6rem; }
.tesla-body > .tesla-col:first-child > .tesla-stats:first-child,
.films-body > .tesla-stats:first-child { padding-top: 0; border-top: 0; }
.tesla-stats > small { white-space: pre-line; }
.links a.src,
.links a.src:hover,
.popout a.src,
.popout a.src:hover {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  transform: none;
}
.links a.src::after { content: none; }
.links a.src:hover,
.popout a.src:hover { color: var(--text); }
.brand-icon.letterboxd { width: 1.9em; height: 0.65em; vertical-align: 0.02em; }
.links .films a.films-head {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: none;
}
.films-head > span { flex: 1; min-width: 0; }
.films-head:hover small { color: var(--text); }
.film-shelf {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.film-shelf[hidden] { display: none; }
.links .film-shelf a,
.links .film-shelf a:hover {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.68rem;
  text-align: center;
  transform: none;
}
.links .film-shelf a::after { content: none; }
.film-shelf .cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pill-hover);
  color: var(--muted);
  font-size: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.film-shelf .cover img { width: 100%; height: 100%; object-fit: cover; }
.film-shelf a:hover .cover { border-color: var(--accent); transform: translateY(-2px); }
.film-shelf .name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.film-shelf .when { margin-top: -0.2rem; color: var(--muted); font-size: 0.62rem; }
.film-shelf .when:empty { display: none; }
.film-shelf .stars,
.film-rank .stars { color: #00e054; font-size: 0.62rem; letter-spacing: -0.05em; }
.film-rank {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rank;
  text-align: left;
}
.film-rank li { counter-increment: rank; }
.links .film-rank a,
.links .film-rank a:hover,
.popout .film-rank a,
.popout .film-rank a:hover {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.22rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  text-decoration: none;
  font-size: 0.82rem;
  transform: none;
}
.links .film-rank a::after { content: none; }
.film-rank a::before {
  content: counter(rank);
  flex: none;
  width: 1.4em;
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.film-rank.fav a::before { content: "\2665"; color: #ff8000; }
.film-rank.log a::before { content: none; }
.film-rank .date { flex: none; width: 3.4em; color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.film-rank .times { flex: none; color: #00e054; font-size: 0.66rem; font-weight: 600; }
.film-rank .name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.film-rank .year { flex: 1; color: var(--muted); font-size: 0.7rem; }
.film-rank a:hover .name { color: var(--accent); }
.film-reviews { margin: 0.3rem 0 0; padding: 0; list-style: none; }
.film-reviews li + li { margin-top: 0.6rem; }
.film-reviews .head { display: flex; gap: 0.4rem; align-items: baseline; }
.film-reviews .name { color: var(--text); font-weight: 600; }
.film-reviews .year { color: var(--muted); font-size: 0.7rem; }
.film-reviews .stars { color: #00e054; font-size: 0.62rem; }
.film-reviews .text { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
/* A long review shows three lines; the button under it, added by the script only when words are hidden, opens it. */
.film-reviews .text.folded { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.film-reviews .review-more {
  display: block;
  margin: 0 auto;
  padding: 0.35rem 0.5rem;
  min-height: 24px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}
.film-reviews .review-more[hidden] { display: none; }
.film-reviews .review-more:hover,
.film-reviews .review-more:focus-visible { color: var(--text); }
.film-reviews .review-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.film-reviews details summary { cursor: pointer; color: var(--muted); font-size: 0.72rem; }
/* Poster that floats beside a hovered (or tapped) diary row. */
.poster-peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 62;
  width: 96px;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--pill);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}
.poster-peek.show { opacity: 1; transform: none; }
.poster-peek img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tooltip bubble for touch screens, where title tooltips never show (touch-tips.js). */
.touch-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 63;
  max-width: min(16rem, calc(100vw - 16px));
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 0.74rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}
.touch-tip.show { opacity: 1; transform: none; }
.cell.tip-on { outline: 1.5px solid var(--text); outline-offset: 0.5px; }
.touch-hint { display: none; }
@media (hover: none) {
  .touch-hint { display: block; margin-bottom: 0.2rem; }
}
.grid-mix,
.payback-bar {
  display: flex;
  height: 12px;
  margin: 0 0 0.45rem;
  border: 2px solid var(--text);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.grid-mix span { display: block; height: 100%; }
.grid-mix[hidden],
.grid-legend[hidden],
.payback-bar[hidden] { display: none; }
.grid-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem 0.6rem;
  margin: 0 0 0.6rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.64rem;
}
.grid-legend li::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.3em;
  background: var(--swatch);
}
.payback-bar { position: relative; }
.payback-bar i {
  display: block;
  width: 0;
  background: #3ff08a;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: width 0.6s steps(8, end);
}
.battery {
  flex: none;
  position: relative;
  width: 50px;
  height: 26px;
  margin-right: 6px;
  border: 3px solid var(--text);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}
.battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 5px;
  height: 10px;
  transform: translateY(-50%);
  background: var(--text);
}
.battery i,
.battery b {
  position: absolute;
  top: 2px;
  bottom: 2px;
  display: block;
  width: 0;
  max-width: calc(100% - 4px);
  transition: width 0.6s steps(8, end);
}
.battery i {
  left: 2px;
  background: #3ff08a;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.battery b {
  right: 2px;
  background: #8a8f99;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.battery[data-level="low"] i { background: #f0b232; }
/* Plugged in: an 8-bit cord drops from the nub. */
.battery[data-plugged="true"] { margin-right: 16px; }
.battery[data-plugged="true"]::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: -17px;
  width: 9px;
  height: 15px;
  border-top: 3px solid var(--muted);
  border-right: 3px solid var(--muted);
}
.battery[data-level="critical"] i { background: #f23f43; }
.battery[data-charging="true"] i {
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: charge-sweep 1.6s linear infinite;
}
@keyframes charge-sweep {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); }
}
/* Film log and EV stats open as a floating panel over the page. */
.popout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 6, 14, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.popout {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 61;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(14, 22, 41, 0.97);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.95rem;
  text-align: center;
  translate: -50% -50%;
  will-change: transform, clip-path, opacity;
}
.popout-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0.9rem 0.7rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.popout-head h2 {
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.popout-close {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--pill);
  color: var(--muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.popout-close:hover,
.popout-close:focus-visible { color: var(--text); border-color: var(--accent); transform: rotate(90deg); }
.popout-scroll {
  min-height: 0;
  padding: 1rem 1.3rem 1.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.popout small { display: block; color: var(--muted); }
.popout small[hidden] { display: none; }
.popout .films-body > .tesla-stats:first-child,
.popout .tesla-col:first-child > .tesla-stats:first-child { margin-top: 0; }
@media (min-width: 700px) {
  .popout { width: min(680px, calc(100vw - 3rem)); }
  .popout .tesla-body,
  .popout .films-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.6rem;
    align-items: start;
  }
  .popout .tesla-col > .tesla-stats:first-child,
  .popout .films-body > #filmsLog { margin-top: 0; padding-top: 0; border-top: 0; }
  .popout .films-body { grid-template-rows: auto auto 1fr; }
  .popout .films-body > #filmsLog { grid-column: 2; grid-row: 1 / span 3; }
  .popout .films-body > .tesla-stats:not(#filmsLog) { grid-column: 1; }
}
/* Narrower screens: keep live toasts stacked above the Discord card. */
@media (max-width: 999px) {
  .twitch-toasts { bottom: 6.4rem; }
}
@media (max-width: 520px) {
  .twitch-toasts { left: 1rem; right: 1rem; bottom: 6rem; max-width: none; align-items: stretch; }
  .discord-dock { left: 1rem; bottom: 1rem; }
  /* Nine top links wrap to two centered rows on phones, so the page starts a little lower. */
  body { padding-top: 3.1rem; }
  .toplinks { left: 1rem; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tesla, .row-toggle, .row-mark { transition: none; }
  .card, .avatar, .status .dot, .links a, .links a::after, .links .bluesky-card, .bluesky-more-panel, .twitch-toast, .twitch-toast .live { animation: none; transition: none; }
  .film-shelf, .tesla-more > summary::before, .film-year > summary::before, .toplinks a, .toplinks .tip, .dock-text small.dock-more, .touch-tip { transition: none; }
  .discord-dock { animation: none; transition: none; }
  .popout-close { transition: none; }
  .myth-facts, .myth-claim q { transition: none; }
  .avatar-flip { transition: none; }
  .poster-peek { transition: none; transform: none; }
  .status-panel { transition: none; transform: none; }
}

/* From a laptop up the home page is two columns, so it fits one screen instead of one long strip.
   Left: the profile, the Discord card, the projects. Right: the Bluesky card and the rows. The footer underneath.
   On a phone the same blocks stack in the order they are written: profile, Discord, the cards, the projects. */
@media (min-width: 1100px) {
  body:has(.card > .head) { padding-top: 0.25rem; padding-bottom: 0.5rem; }
  .card:has(> .head) {
    max-width: min(1120px, calc(100vw - 4rem));
    display: grid;
    grid-template-columns: 370px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0.75rem;
    align-items: start;
  }
  .card:has(> .head) > .head { grid-column: 1; grid-row: 1; }
  .card:has(> .head) > .discord-dock { grid-column: 1; grid-row: 2; }
  .card:has(> .head) > .home-projects { grid-column: 1; grid-row: 3; }
  .card:has(> .head) > nav[aria-label="Site map"] { grid-column: 2; grid-row: 1 / span 3; }
  .card:has(> .head) > .credit,
  .card:has(> .head) > .theme-switch,
  .card:has(> .head) > .build { grid-column: 1 / -1; }
  /* Tighter footer spacing, so the page still fits a 900 pixel tall screen. */
  .card:has(> .head) > .credit,
  .card:has(> .head) > .theme-switch { margin-top: 0.5rem; }
  /* One column of rows beside the profile. An opened row keeps its content at the width it has on a phone or laptop. */
  .card:has(> .head) .links { margin-top: 0; }
  .card:has(> .head) .row-panel { max-width: 23rem; margin: 0 auto; }
  /* The post's picture keeps a normal shape instead of stretching into a banner across the wide column.
     The right margin fills the rest of the line, so the picture stays under the text, not beside it. */
  .card:has(> .head) .links a.social.featured .poster.art { max-width: 24rem; margin-right: calc(100% - 24rem); }
}

/* The home page has no outer box. Its pieces (the profile, the Bluesky card and each row) are separate panels
   that float on the page background, each with a quiet fill, a thin outline and a small soft shadow.
   panel-float.js gives them a few pixels of spring when the page scrolls. */
.card:has(> .head) {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
.card:has(> .head) > .head > .intro,
.card:has(> .head) .links .bluesky-card,
.card:has(> .head) .tesla {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.12);
}
.card:has(> .head) > .head > .intro { padding: 1.25rem 1.4rem 1.4rem; }
.card:has(> .head) .row-toggle { border-radius: 15px; }
.card:has(> .head) h1 {
  margin-bottom: 0.35rem;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text);
}
.card:has(> .head) .avatar { box-shadow: none; }
.card:has(> .head) .email { display: inline-block; margin-top: 1.25rem; }
.card:has(> .head) .links { gap: 0.75rem; }
/* Below the wide layout the first card sits the same distance under the profile as the cards sit from each other. */
@media (max-width: 1099px) {
  .card:has(> .head) .links { margin-top: 0.75rem; }
}
.card:has(> .head) .links .bluesky-card:hover { background: var(--pill-hover); }
.card:has(> .head) .links a .poster,
.card:has(> .head) .film-shelf .cover { box-shadow: none; }
/* ---- Discord card: the status dot as a phone, "on mobile" (start) ----
   Discord's own app swaps the green dot for a small phone when someone is online on the phone app alone.
   discord-presence.js sets data-device="mobile" on the same dot for that case; no template carries it.
   The phone is drawn here: an upright rounded box in the status colour whose see-through middle is the screen,
   with a thicker bottom edge. No image and no icon font. It is as wide as the dot and sits in the dot's place,
   so nothing in the line moves. On the light page the green is a darker shade, because a thin outline needs
   more contrast than a filled dot to stay at 3 to 1 or better against the card. */
.presence-dot { --presence-mobile-online: #23a55a; }
@media (prefers-color-scheme: light) {
  .presence-dot { --presence-mobile-online: #15803d; }
}
html[data-theme="light"] .presence-dot { --presence-mobile-online: #15803d; }
html[data-theme="dark"] .presence-dot { --presence-mobile-online: #23a55a; }
.presence-dot[data-device="mobile"] {
  box-sizing: border-box;
  height: 12px;
  border: 2px solid var(--presence-mobile-online);
  border-bottom-width: 3px;
  border-radius: 2.5px;
  background: transparent;
  box-shadow: none;
}
/* ---- Discord card: the status dot as a phone, "on mobile" (end) ---- */