@font-face {
  font-family: Geist;
  src: url("assets/geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --bg: #fafafa;
  --text: #252525;
  --muted: #696969;
  --line: #dedede;
  --soft: #efefef;
  --accent: #252525;
  --logo: #000;
  --column: 520px;
  color-scheme: light;
  font-family: Geist, Arial, sans-serif;
  font-synthesis: none;
}
:root[data-theme="dark"] {
  --bg: #181818;
  --text: #e5e5e5;
  --muted: #b0b0b0;
  --line: #363636;
  --soft: #242424;
  --accent: #eee;
  --logo: #fff;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #181818;
    --text: #e5e5e5;
    --muted: #b0b0b0;
    --line: #363636;
    --soft: #242424;
    --accent: #eee;
    --logo: #fff;
    color-scheme: dark;
  }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
::selection {
  background: var(--text);
  color: var(--bg);
}
h1,
h2,
h3,
p {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 500;
}
img {
  display: block;
  max-width: 100%;
}
/* Layers: project color 0; content 1; side media 2; skip link 5. */
.page-shell {
  position: relative;
  z-index: 1;
  max-width: calc(var(--column) + 48px);
  margin: auto;
  padding: 0 24px;
}
.site-header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
}
.wordmark {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -1px;
}
nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  font-size: 14px;
  color: var(--muted);
}
nav a:hover {
  color: var(--text);
}
.preferences {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.agent-toggle {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  margin-right: 8px;
  min-height: 44px;
}
.agent-toggle span {
  font-family: monospace;
  font-size: 15px;
}
.agent-toggle:hover {
  color: var(--text);
}
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}
.icon-button:hover {
  background: var(--soft);
}
.theme-symbol {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transform: rotate(-35deg);
}
.sound-bars {
  height: 18px;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  opacity: 0.5;
}
.sound-bars i {
  display: block;
  width: 2px;
  background: currentColor;
  border-radius: 2px;
  height: 6px;
}
.sound-bars i:nth-child(2) {
  height: 13px;
}
.sound-bars i:nth-child(3) {
  height: 18px;
}
.sound-bars i:nth-child(4) {
  height: 10px;
}
.sound-bars:after {
  content: "";
  width: 24px;
  height: 1.5px;
  background: currentColor;
  position: absolute;
  transform: rotate(-48deg);
  left: -4px;
  box-shadow: 0 0 0 2px var(--bg);
}
[aria-pressed="true"] .sound-bars {
  opacity: 1;
}
[aria-pressed="true"] .sound-bars:after {
  display: none;
}
.hero {
  padding: 72px 0 80px;
}
.logo-mark {
  display: block;
  width: 58px;
  height: 42px;
  padding: 0;
  margin-bottom: 30px;
  color: var(--logo);
}
.logo-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.logo-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.1px;
  margin-bottom: 32px;
  max-width: 560px;
}
.intro-copy p {
  font-size: 17px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 18px;
}
.signature {
  margin-top: 22px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.5;
}
.signature span {
  display: block;
  font-size: 16px;
}
.section-heading {
  margin-bottom: 26px;
}
.section-heading h2 {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.work-section {
  padding: 0 0 76px;
}
.project {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0 24px;
}
.project + .project {
  border-top: 1px solid var(--line);
}
.project-number {
  font-size: 16px;
  color: var(--muted);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.project-link {
  display: block;
}
.project-link h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -0.55px;
  margin-bottom: 10px;
}
.project-link p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
  max-width: 580px;
}
.project-arrow {
  font-size: 21px;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition:
    opacity 0.2s,
    transform 0.3s;
}
.project:hover .project-arrow,
.project:focus-within .project-arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.project-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.project-scene {
  pointer-events: none;
}
.scene-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.scene-agent .scene-background {
  background: #c5eaf0;
}
.scene-connect .scene-background {
  background: #dbebe8;
}
.side-screen {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 38vw;
  max-width: none;
  height: auto;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px #152b3226;
  opacity: 0;
  transition:
    transform 0.68s cubic-bezier(0.22, 0.8, 0.25, 1),
    opacity 0.35s;
  pointer-events: none;
}
.screen-left {
  right: calc(50% + var(--column) / 2 + 28px);
  transform: translate(-115%, -42%) rotate(-5deg);
}
.screen-right {
  left: calc(50% + var(--column) / 2 + 28px);
  transform: translate(115%, -54%) rotate(5deg);
}
:root[data-preview="agent"],
:root[data-preview="connect"] {
  --text: #17363b;
  --muted: #36565a;
  --line: #50757740;
  --accent: #17363b;
  --logo: #000;
  --soft: #ffffff40;
}
[data-preview="agent"] .scene-agent .scene-background,
[data-preview="connect"] .scene-connect .scene-background {
  opacity: 1;
}
[data-preview="agent"] .scene-agent .side-screen,
[data-preview="connect"] .scene-connect .side-screen {
  opacity: 1;
}
[data-preview="agent"] .scene-agent .screen-left,
[data-preview="connect"] .scene-connect .screen-left {
  transform: translate(0, -42%) rotate(-3deg);
}
[data-preview="agent"] .scene-agent .screen-right,
[data-preview="connect"] .scene-connect .screen-right {
  transform: translate(0, -54%) rotate(3deg);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.experiments-section {
  border-top: 1px solid var(--line);
  padding: 38px 0 76px;
}
.experiments-section .section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.experiments-section h2 {
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--text);
}
.section-note {
  font-size: 13px;
  color: var(--muted);
}
.section-description {
  color: var(--muted);
  font-size: 16px;
  margin-top: -12px;
  margin-bottom: 28px;
}
.experiment {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}
.experiment-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: monospace;
  background: var(--soft);
  border-radius: 10px;
  font-size: 19px;
  color: var(--muted);
}
.experiment h3 {
  font-size: 16px;
}
.experiment p {
  font-size: 14px;
  color: var(--muted);
}
.soon {
  font-size: 12px;
  color: var(--muted);
}
.contact-section {
  border-top: 1px solid var(--line);
  padding: 58px 0 20px;
}
.intro-label {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 16px;
}
.contact-section h2 {
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -1.2px;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 28px;
  font-size: 14px;
}
.contact-links a {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 44px;
}
.contact-links a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-bottom {
  margin-top: 72px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  padding: 20px 0;
}
.footer-bottom a:hover {
  color: var(--text);
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--text);
  color: var(--bg);
  padding: 10px 16px;
  z-index: 5;
}
.skip-link:focus {
  top: 12px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.agent-page main {
  padding: 55px 0 80px;
}
.agent-page h1 {
  font-family: Geist, Arial, sans-serif;
  font-size: 34px;
  margin: 24px 0;
}
.agent-page main a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.agent-page pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font:
    14px/1.8 ui-monospace,
    monospace;
  color: var(--muted);
  background: var(--soft);
  padding: 24px;
  border-radius: 12px;
}
.agent-page .agent-toolbar {
  display: flex;
  gap: 20px;
  align-items: center;
}
.agent-page .copy-button {
  padding: 10px 18px;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-size: 14px;
}
.agent-page .agent-toolbar a {
  font-size: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-stroke {
    animation: draw-mark 1.8s cubic-bezier(0.45, 0, 0.25, 1) both;
  }
  .logo-mark.replay .logo-stroke {
    animation-name: draw-mark-again;
  }
  @keyframes draw-mark {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes draw-mark-again {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
}
@media (max-width: 1100px), (hover: none) {
  .project-stage {
    display: none;
  }
  .project-arrow {
    opacity: 1;
    transform: none;
  }
  .project-link:focus-visible {
    outline-offset: 4px;
  }
  @keyframes preview-enter {
    from {
      opacity: 0;
      transform: translateX(-18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @keyframes preview-other {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (max-width: 767px) {
  html {
    scroll-padding-top: 32px;
  }
  .page-shell {
    padding: 0 24px;
  }
  .site-header {
    gap: 15px;
    padding: 20px 0;
    flex-wrap: wrap;
  }
  .wordmark {
    margin-right: auto;
  }
  nav {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 26px;
    padding-top: 8px;
  }
  .preferences {
    padding: 0;
    border: 0;
  }
  .agent-toggle {
    font-size: 12px;
    margin-right: 4px;
  }
  .hero {
    padding: 52px 0 64px;
  }
  .logo-mark {
    width: 62px;
    height: 45px;
    margin-bottom: 34px;
  }
  h1 {
    font-size: 39px;
    letter-spacing: -1.4px;
    margin-bottom: 32px;
  }
  .intro-copy p {
    font-size: 17px;
    line-height: 1.45;
    margin-bottom: 18px;
  }
  .signature {
    font-size: 16px;
  }
  .signature span {
    font-size: 14px;
  }
  .work-section {
    padding-bottom: 76px;
  }
  .project {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 0;
  }
  .project-link h3 {
    font-size: 22px;
  }
  .project-link p {
    font-size: 16px;
    line-height: 1.45;
  }
  .project-number {
    font-size: 14px;
  }
  .experiments-section {
    padding: 38px 0 76px;
  }
  .experiments-section .section-heading {
    flex-wrap: wrap;
    gap: 8px;
  }
  .experiments-section h2 {
    font-size: 19px;
  }
  .experiment {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }
  .experiment-symbol {
    width: 38px;
    height: 40px;
  }
  .experiment p {
    font-size: 13px;
  }
  .soon {
    grid-column: 2;
    margin-top: -9px;
    font-size: 12px;
  }
  .contact-section {
    padding-top: 40px;
  }
  .contact-section h2 {
    font-size: 34px;
  }
  .contact-links {
    gap: 16px 26px;
    font-size: 13px;
  }
  .footer-bottom {
    margin-top: 48px;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-bottom span:first-child {
    width: 100%;
  }
  .footer-bottom a {
    margin-left: auto;
  }
  .agent-page main {
    padding-top: 30px;
  }
  .agent-page pre {
    padding: 16px;
    font-size: 13px;
  }
}
@media (max-width: 370px) {
  .page-shell {
    padding: 0 18px;
  }
  h1 {
    font-size: 34px;
  }
  .agent-toggle {
    font-size: 12px;
  }
  .preferences {
    gap: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .logo-stroke {
    stroke-dashoffset: 0;
  }
}

.click-word { position: relative; display: inline-block; padding: 0; font: inherit; letter-spacing: inherit; }
.click-word svg { position: absolute; width: 100%; height: 9px; left: 0; bottom: -8px; overflow: visible; }
.click-word path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.click-word.is-drawn path { stroke-dashoffset: 0; }

/* September component revision: quiet reading area framed by pixel landscapes. */
.blossom-canopy { position:absolute; top:0; left:0; width:calc(100% - 170px); height:180px; padding:0; overflow:hidden; z-index:2; touch-action:pan-y; }
.blossom-canopy canvas,.water-surface canvas { display:block; width:100%; height:100%; }
.site-header { position:absolute; top:26px; right:30px; padding:0; z-index:4; }
.site-header nav { display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-size:14px; margin:0; }
.site-header .agent-toggle { margin:0; min-height:30px; font-size:13px; }
.theme-switch { display:flex; align-items:center; padding:5px 0; font-size:12px; min-height:34px; }
.theme-track { --track-bg:#fff; --track-line:#e4e7ec; --knob-bg:#e8edf7; position:relative; display:flex; width:50px; height:26px; padding:2px; border-radius:13px; background:var(--track-bg); border:1px solid var(--track-line); }
:root[data-theme="dark"] .theme-track { --track-bg:#101215; --track-line:#2a2e34; --knob-bg:#2f353e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-track { --track-bg:#101215; --track-line:#2a2e34; --knob-bg:#2f353e; } }
.theme-knob { position:absolute; top:2px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--knob-bg); transition:transform .3s cubic-bezier(.32,.72,.35,1); }
[aria-checked="true"] .theme-knob { transform:translateX(22px); }
.theme-icon { position:relative; width:14px; height:14px; margin:3px 4px; fill:none; stroke:#9aa3af; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
[aria-checked="false"] .theme-icon.sun { stroke:#1a1d21; }
[aria-checked="true"] .theme-icon.moon { stroke:#f4f6f8; }
/* The new theme reveals as a circle growing from the switch. Default cross-fades are removed. */
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-old(root) { z-index:0; }
::view-transition-new(root) { z-index:1; }
.page-shell > .site-header { position:fixed; }
.hero { padding-top:210px; }
.intro-copy p { font-size:15px; line-height:1.5; }
.click-word svg { overflow:hidden; }
.click-word path { stroke:#315ed4; stroke-dasharray:none; stroke-dashoffset:0; }
.work-section .section-heading h2 { display:flex; align-items:center; gap:20px; }
.section-pill { padding:7px 17px; border-radius:24px; background:var(--soft); color:var(--text); font-size:15px; }
.project-list { display:grid; gap:14px; }
.project { position:relative; display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:18px; padding:18px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:0 2px 3px #7777770b; }
.project-thumb { width:70px; height:70px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.project-link::after { content:""; position:absolute; inset:0; border-radius:16px; }
.project-link h3 { font-size:18px; line-height:1.4; margin-bottom:4px; letter-spacing:-.2px; }
.project-link p { font-size:15px; line-height:1.45; }
.experiments-section { border-top:0; padding-top:0; }
.experiments-section .section-heading { margin-bottom:20px; }
.experiments-section h2 { font-size:13px; line-height:1.5; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.experiment { grid-template-columns:28px minmax(0,1fr); align-items:start; gap:14px; padding:18px 0; border-bottom:1px solid var(--line); }
.experiment-number { font-size:14px; line-height:26px; color:var(--muted); }
.experiment h3 { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-size:18px; font-weight:600; line-height:26px; }
.experiment p { font-size:16px; line-height:24px; margin-top:6px; }
.soon { margin:0; font-size:11px; font-weight:500; line-height:20px; padding:0 7px; border-radius:4px; color:var(--muted); background:var(--soft); }
.contact-section { position:relative; z-index:1; padding:0; border-top:1px dashed var(--line); }
.contact-inner { max-width:760px; padding:90px 24px 100px; margin:auto; }
.contact-section h2 { font-family:Georgia,'Times New Roman',serif; font-size:40px; font-weight:400; line-height:1.1; letter-spacing:-1px; }
.contact-links { gap:18px 30px; margin-top:30px; }
.contact-links a { text-decoration:underline wavy; text-decoration-color:var(--muted); text-underline-offset:6px; font-size:15px; }
.footer-bottom { max-width:none; padding:16px max(24px,calc((100% - 712px)/2)); margin:0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.water-surface { display:block; width:100%; height:260px; padding:0; overflow:hidden; touch-action:pan-y; }
@media(max-width:767px) {
 .site-header { top:16px; right:20px; width:auto; flex-wrap:nowrap; }
 .site-header nav { width:auto; padding:0; order:initial; gap:6px; }
 .blossom-canopy { width:calc(100% - 115px); height:165px; }
 .hero { padding-top:195px; }
 .intro-copy p { font-size:15px; }
 .project { grid-template-columns:52px minmax(0,1fr); gap:12px; padding:14px; }
 .project-thumb { width:52px; height:58px; }
 .project-link h3 { font-size:17px; }
 .project-link p { font-size:14px; }
 .experiment { grid-template-columns:26px minmax(0,1fr); gap:12px; }
 .experiment h3 { font-size:18px; }
 .experiment p { font-size:16px; }
 .soon { grid-column:auto; margin:0; }
 .contact-inner { padding:60px 24px 65px; }
 .contact-section h2 { font-size:36px; }
 .footer-bottom { gap:12px; padding:16px 24px; }
 .water-surface { height:220px; }
}

.contact-links a { position:relative; text-decoration:none; }
.contact-links a:hover { text-decoration:none; }
.link-wave { position:absolute; width:100%; height:6px; left:0; bottom:6px; overflow:hidden; }
.link-wave path { fill:none; stroke:#315ed4; stroke-width:1.7; }

#hero-title { font-size:32px; }
@media(max-width:767px) { #hero-title { font-size:35px; } }
@media(max-width:370px) { #hero-title { font-size:30px; } }

/* The preview palette must change card surfaces together with text colors. */
:root[data-preview] .project { background:#f4fafb; border-color:#92b8bf; color:#17363b; }
:root[data-preview] .project-link p { color:#36565a; }
.wave-underline { position:absolute; left:0; width:100%; height:8px; bottom:-8px; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'%3E%3Cpath d='M-4 6 4 2 12 6 20 2' fill='none' stroke='%23315ed4' stroke-width='1.5'/%3E%3C/svg%3E"); background-size:16px 8px; background-repeat:repeat-x; }
.contact-links .wave-underline { bottom:4px; }
.contact-links { column-gap:30px; row-gap:14px; }
.contact-links a { white-space:nowrap; }
@media(max-width:370px) { .contact-links a { font-size:14px; } }

.synced-agent main { padding-top:0; }
.synced-agent .hero { padding-top:110px; }
.synced-agent #hero-title { font-family:Georgia,'Times New Roman',serif; margin:0 0 28px; }
.synced-agent .agent-toolbar { margin-top:24px; flex-wrap:wrap; }
.synced-agent main .project-link { text-decoration:none; }
.synced-agent #profile-text[hidden] { display:none; }
@media(max-width:767px) { .synced-agent .hero { padding-top:175px; } }

.scene-warmcall .scene-background { background:#e7e4fa; }
:root[data-preview="warmcall"] { --text:#292547; --muted:#514c70; --line:#aaa3ca; --logo:#000; --soft:#ffffff60; }
[data-preview="warmcall"] .scene-warmcall .scene-background, [data-preview="warmcall"] .scene-warmcall .side-screen { opacity:1; }
[data-preview="warmcall"] .scene-warmcall .screen-left { transform:translate(0,-42%) rotate(-3deg); }
[data-preview="warmcall"] .scene-warmcall .screen-right { transform:translate(0,-54%) rotate(3deg); }

.experiment h3 a { color: inherit; text-decoration: none; }
.experiment h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.experiment h3 a:focus-visible { outline: 2px solid #3158dc; outline-offset: 5px; }