:root {
  color-scheme: light;
  background: #f2efe7;
  color: #353630;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }
.background-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
main { position: relative; max-width: 1000px; margin: auto; padding: 64px 36px 40px; }
h1, h2, p { margin: 0; }
header { text-align: center; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-weight: 400; letter-spacing: -.04em; }
h1 span { color: #6f293e; }
p { font-size: 14px; line-height: 1.75; }
.tagline { margin-top: 8px; color: #6f293e; font-size: 12px; }
.mission { margin: 24px auto 0; font-size: 17px; }
.research-orbit { display: grid; grid-template-columns: 1fr 280px 1fr; gap: 42px; align-items: center; margin: 56px 0 48px; }
h2 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.project-description { display: grid; }
.project-description > span { grid-area: 1 / 1; }
.project-sizing { visibility: hidden; }
.project-reveal { outline: none; }
.project-reveal h2 { transition: color .2s ease; }
.project-reveal:hover h2, .project-reveal:focus h2 { color: #6f293e; }
.project-reveal:focus-visible { outline: 1px solid #6f293e; outline-offset: 12px; }
.project-reveal.is-scrambling .project-text { color: #6f293e; }
.left-notes, .right-notes { min-width: 0; }
.penrose-project summary { list-style: none; cursor: pointer; }
.penrose-project summary::-webkit-details-marker { display: none; }
.penrose-project summary h2 { transition: color .2s ease; }
.penrose-project summary:hover h2, .penrose-project[open] h2 { color: #6f293e; }
.penrose-project summary:focus-visible { outline: 1px solid #6f293e; outline-offset: 12px; }
/* The map has its own space in the column, so no branch can overlap
   the central logo, VYOMA, or footer at any viewport width. */
.penrose-map { position: relative; width: 100%; aspect-ratio: 240 / 280; margin-top: 22px; container-type: inline-size; }
.penrose-project.is-enhanced .penrose-map-shell { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.22, 1, .36, 1); }
.penrose-map-clip { min-height: 0; overflow: hidden; }
.penrose-project.is-enhanced .penrose-map { opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top center; transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.penrose-project.is-map-visible .penrose-map-shell { grid-template-rows: 1fr; }
.penrose-project.is-map-visible .penrose-map { opacity: 1; transform: translateY(0) scale(1); }
.penrose-neurons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.neuron-dendrites { stroke: #6f293e; stroke-width: .8; stroke-opacity: .4; stroke-linecap: round; stroke-linejoin: round; }
.neuron-synapses { fill: #6f293e; opacity: .6; }
.neuron-signals { stroke: #6f293e; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 26; opacity: .55; }
.penrose-project.is-map-visible .neuron-signals { animation: neuron-flow 6s linear infinite; }
@keyframes neuron-flow { to { stroke-dashoffset: -112; } }
.penrose-branches { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.penrose-branches li { position: absolute; width: 44%; aspect-ratio: 1; border: 1px solid #6f293e66; border-radius: 50%; background: #f2efe7; padding: clamp(5px, 3cqw, 9px); display: flex; flex-direction: column; justify-content: center; text-align: center; box-shadow: 0 0 0 4px #6f293e06; }
.penrose-branches li:nth-child(1) { left: 3%; top: 4%; }
.penrose-branches li:nth-child(2) { right: 3%; top: 4%; }
.penrose-branches li:nth-child(3) { left: 28%; top: 59%; }
.penrose-branches h3 { margin: 0 0 5px; color: #6f293e; font-size: clamp(11px, 5cqw, 14px); font-weight: 500; }
.penrose-branches p { font-size: clamp(9px, 4cqw, 11px); line-height: 1.35; color: #696b63; }
.neural-text { display: grid; }
.neural-text > .neural-visible, .neural-text > .neural-sizing { grid-area: 1 / 1; }
.neural-sizing { visibility: hidden; }
.penrose-project.is-scrambling .neural-visible { color: #6f293e; }
.penrose-project.is-map-visible .neuron-synapses { animation: neuron-pulse 4s ease-in-out infinite; }
.penrose-project.is-map-visible .penrose-branches li { animation: neuron-breathe 6s ease-in-out infinite; }
.penrose-branches li:nth-child(2) { animation-delay: -2s; }
.penrose-branches li:nth-child(3) { animation-delay: -4s; }
@keyframes neuron-breathe { 0%, 100% { box-shadow: 0 0 0 4px #6f293e06; } 50% { box-shadow: 0 0 0 6px #6f293e0c; } }
@keyframes neuron-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .penrose-project.is-enhanced .penrose-map-shell, .penrose-project.is-enhanced .penrose-map { transition: none; }
  .penrose-project.is-map-visible .neuron-synapses, .penrose-project.is-map-visible .neuron-signals, .penrose-project.is-map-visible .penrose-branches li { animation: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.note { font-size: 11px; color: #696b63; }
.logo-field { position: relative; width: 280px; height: 280px; }
.logo-fallback { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-interior { position: absolute; inset: 0; display: none; background: #6f293e; }
@supports (mask-image: url('brand/vetrivel-mark.png')) or (-webkit-mask-image: url('brand/vetrivel-mark.png')) {
  .logo-fallback { visibility: hidden; }
  .logo-interior { display: block; mask: url('brand/vetrivel-mark.png') center / contain no-repeat; -webkit-mask: url('brand/vetrivel-mark.png') center / contain no-repeat; }
}
canvas { width: 100%; height: 100%; display: block; }
footer { text-align: center; }
footer .note { margin: 0 0 20px; }
a { color: #6f293e; font-size: 13px; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #6f293e; outline-offset: 5px; }
footer p { margin-top: 16px; font-size: 11px; color: #696b63; }
::selection { background: #6f293e; color: #f2efe7; }
@media (max-width: 800px) {
  main { padding: 40px 28px; max-width: 570px; }
  .research-orbit { grid-template-columns: 1fr 1fr; gap: 30px; margin: 38px 0 44px; align-items: start; }
  .logo-field { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: 220px; height: 220px; margin-bottom: 12px; }
  .left-notes, .right-notes { grid-column: 1 / -1; width: 100%; max-width: 320px; justify-self: center; }
}
@media (max-width: 400px) {
  main { padding-inline: 24px; }
  .research-orbit { grid-template-columns: 1fr; gap: 28px; }
  .logo-field { grid-column: 1; }
}