@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular-LatinExt.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic-LatinExt.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable-LatinExt.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/PlusJakartaSans-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1a1918;
  --muted: #5b5852;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --vh: 1vh;
  --page: 100vh;
  --size-head: clamp(54px, min(20vw, calc(var(--vh) * 15)), 136px);
  --size-def: clamp(29px, min(9vw, calc(var(--vh) * 5.6)), 60px);
  --size-eg: clamp(18px, min(5.2vw, calc(var(--vh) * 3)), 30px);
  --size-small: clamp(12.5px, min(3.5vw, calc(var(--vh) * 1.7)), 15px);
  --gap: clamp(10px, calc(var(--vh) * 2.6), 30px);
  color-scheme: light;
}
@supports (height: 1svh) { :root { --vh: 1svh; --page: 100dvh; } }

* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
body { color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.page {
  min-height: var(--page);
  width: min(100%, 680px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: max(clamp(16px, calc(var(--vh) * 6), 72px), env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(clamp(14px, calc(var(--vh) * 3.4), 40px), env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

.head { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--size-head); line-height: 0.95; letter-spacing: -0.022em; }
.meta { margin: clamp(6px, calc(var(--vh) * 1.2), 14px) 0 0; font-size: var(--size-small); color: var(--muted); }
.pron { font-weight: 500; }
.pos { font-family: var(--serif); font-size: 1.3em; color: var(--ink); margin-left: 0.5em; }

.deva { font-family: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", "Kohinoor Devanagari", "Devanagari Sangam MN", serif; font-size: 1.25em; color: var(--ink); margin-right: 0.5em; }

.def { margin: var(--gap) 0 0; font-family: var(--serif); font-size: var(--size-def); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.whole { margin: clamp(5px, calc(var(--vh) * 1.2), 14px) 0 0; font-family: var(--serif); font-size: calc(var(--size-eg) * 1.12); line-height: 1.15; letter-spacing: -0.01em; }
.eg { margin: clamp(6px, calc(var(--vh) * 1.6), 18px) 0 0; font-family: var(--serif); font-size: var(--size-eg); line-height: 1.2; color: var(--muted); text-wrap: balance; }
.eg cite { display: block; margin-top: 4px; font-family: var(--sans); font-style: normal; font-size: var(--size-small); }

.origin { margin: var(--gap) 0 0; font-size: var(--size-small); line-height: 1.5; color: var(--muted); }
.origin i { font-family: var(--serif); font-size: 1.2em; color: var(--ink); }
.label { font-weight: 700; font-size: max(12px, 0.86em); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-right: 0.4em; }

.entry { margin-top: auto; }
.side { display: contents; }
.omi { margin-top: clamp(4px, calc(var(--vh) * 2.4), 28px); }

.omi {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: clamp(12px, calc(var(--vh) * 1.8), 18px);
  padding: clamp(10px, calc(var(--vh) * 1.8), 18px) clamp(14px, calc(var(--vh) * 2), 22px);
  border: 1.5px solid transparent;
  border-radius: 22px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(115deg, #ffb13d, #ff6e5a 34%, #9c6cff 66%, #4faeff 88%, #58d3c0) border-box;
  transition: transform 320ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.omi::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px 12px -6px;
  border-radius: 22px;
  background: linear-gradient(115deg, #ffb13d, #ff6e5a 34%, #9c6cff 66%, #4faeff 88%, #58d3c0);
  filter: blur(18px);
  opacity: 0.26;
  transition: opacity 320ms var(--ease);
}
.omi:hover { transform: translateY(-2px); }
.omi:hover::before { opacity: 0.46; }
.omi:active { transform: scale(0.985); }
.omi:focus-visible, .founder a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.orb { --s: clamp(46px, calc(var(--vh) * 7.2), 68px); --ew: calc(var(--s) * 0.105); --eh: calc(var(--s) * 0.2); --eg: calc(var(--s) * 0.15); position: relative; flex: none; display: block; width: var(--s); height: var(--s); isolation: isolate; }
.orb span { display: block; }
.orb__bleed { position: absolute; inset: -50%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgb(255 177 61 / 0.62), rgb(255 110 90 / 0.3) 42%, rgb(156 108 255 / 0.12) 68%, transparent); filter: blur(calc(var(--s) * 0.16)); opacity: 0.4; transition: opacity 320ms var(--ease); animation: orb-bleed 5.2s ease-in-out infinite; }
.orb__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgb(255 177 61 / 0.85); opacity: 0; }
.orb__body { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(70% 70% at 32% 28%, #ffb13d, transparent 60%), radial-gradient(70% 70% at 72% 40%, #ff6e5a, transparent 62%), radial-gradient(80% 80% at 55% 88%, #9c6cff, transparent 70%), radial-gradient(40% 40% at 12% 70%, #58d3c0, transparent 80%), #9c6cff; animation: orb-breath 5.2s ease-in-out infinite; }
.orb__body::after { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 3; box-shadow: inset 0 calc(var(--s) * -0.1) calc(var(--s) * 0.18) rgb(156 108 255 / 0.35), inset 0 calc(var(--s) * 0.03) calc(var(--s) * 0.05) rgb(255 255 255 / 0.3); }
.orb__swirl { position: absolute; inset: -18%; background: radial-gradient(45% 45% at 30% 30%, #ffb13d, transparent 70%), radial-gradient(40% 40% at 74% 62%, #ff6e5a, transparent 70%), radial-gradient(35% 35% at 40% 80%, #58d3c0, transparent 70%); filter: blur(calc(var(--s) * 0.06)); opacity: 0.7; will-change: transform; animation: orb-spin 9s linear infinite; }
.orb__swirl--b { inset: -30%; background: conic-gradient(from 0deg, transparent 0 10%, rgb(255 255 255 / 0.38) 18%, transparent 30% 55%, rgb(255 255 255 / 0.26) 64%, transparent 76%); filter: blur(calc(var(--s) * 0.07)); mix-blend-mode: soft-light; opacity: 1; animation-duration: 6s; animation-direction: reverse; }
.orb__core { position: absolute; inset: 0; background: radial-gradient(circle at 38% 32%, rgb(255 245 227 / 0.7), transparent 34%); opacity: 0.45; }
.orb__spec { position: absolute; left: 24%; top: 10%; width: 30%; height: 16%; border-radius: 50%; z-index: 4; background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), transparent); transform: rotate(-24deg); }
.orb__eyes { position: absolute; left: 50%; top: 55%; width: 0; height: 0; z-index: 2; transform: translate(calc(var(--gx, 0) * var(--s) * 0.13), calc(var(--gy, 0) * var(--s) * 0.09)); transition: transform 260ms var(--ease); }
.orb__track { position: absolute; left: 0; top: 0; animation: orb-look 11s ease-in-out infinite; }
.orb .orb__pair { position: absolute; display: flex; gap: var(--eg); align-items: center; left: calc((var(--ew) * 2 + var(--eg)) / -2); top: calc(var(--eh) / -2); height: var(--eh); animation: orb-blink 7.6s linear infinite; }
.orb__eye { position: relative; width: var(--ew); height: var(--eh); }
.orb__eye::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #1e1526; transition: transform 220ms var(--ease), opacity 160ms var(--ease); }
.orb__eye::after { content: ""; position: absolute; border-radius: 50%; left: 50%; top: 50%; width: calc(var(--ew) * 2); height: calc(var(--ew) * 2); margin-left: calc(var(--ew) * -1); margin-top: calc(var(--ew) * -0.55); box-shadow: 0 calc(var(--ew) * -0.62) 0 0 #1e1526; opacity: 0; transform: translateY(45%) scale(0.6); transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 160ms var(--ease); }

.omi:active .orb__swirl { animation-duration: 3.4s; }
.omi:active .orb__swirl--b { animation-duration: 2.4s; }
.omi:active .orb__ring { animation: orb-ring 1.6s var(--ease) infinite; }
.omi:active .orb__bleed { opacity: 0.9; animation: none; }
.omi:active .orb__eye::before { transform: scaleY(0.1); opacity: 0; }
.omi:active .orb__eye::after { opacity: 1; transform: none; }
@media (hover: hover) {
  .omi:hover .orb__swirl { animation-duration: 3.4s; }
  .omi:hover .orb__swirl--b { animation-duration: 2.4s; }
  .omi:hover .orb__ring { animation: orb-ring 1.6s var(--ease) infinite; }
  .omi:hover .orb__bleed { opacity: 0.9; animation: none; }
  .omi:hover .orb__eye::before { transform: scaleY(0.1); opacity: 0; }
  .omi:hover .orb__eye::after { opacity: 1; transform: none; }
}
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes orb-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes orb-bleed { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.62; } }
@keyframes orb-ring { from { transform: scale(1); opacity: 0.75; } to { transform: scale(1.7); opacity: 0; } }
@keyframes orb-blink { 0%, 40%, 44%, 86%, 90%, 94%, 100% { transform: scaleY(1); } 42%, 88%, 92% { transform: scaleY(0.1); } }
@keyframes orb-look {
  0%, 22%, 50%, 74%, 100% { transform: translate(0, 0); }
  28%, 42% { transform: translate(calc(var(--s) * -0.09), calc(var(--s) * 0.02)); }
  56%, 66% { transform: translate(calc(var(--s) * 0.09), calc(var(--s) * -0.03)); }
  82%, 92% { transform: translate(0, calc(var(--s) * 0.045)); }
}

.omi__text { flex: 1; min-width: 0; display: block; }
.omi__name { display: block; font-family: var(--serif); font-size: clamp(22px, calc(var(--vh) * 3.4), 32px); line-height: 1.05; letter-spacing: -0.015em; }
.omi__tag { display: block; font-family: var(--serif); font-style: italic; font-size: clamp(15px, min(4.6vw, calc(var(--vh) * 2.3)), 21px); line-height: 1.15; }
.omi__line { display: block; margin-top: 3px; font-size: var(--size-small); line-height: 1.38; color: var(--muted); }

.tilt { display: inline-block; flex: none; width: 1em; height: 1em; vertical-align: -0.12em; margin-left: 0.18em; transition: transform 320ms var(--ease); }
.omi__tilt { position: absolute; top: clamp(10px, calc(var(--vh) * 1.8), 18px); right: clamp(12px, calc(var(--vh) * 1.8), 18px); width: 22px; height: 22px; margin: 0; }
.omi:hover .omi__tilt, .founder a:hover .tilt { transform: translate(2px, -2px); }

.founder { margin: auto 0 0; font-size: var(--size-small); color: var(--muted); }
.founder a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.founder a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (orientation: portrait) and (max-width: 300px), (orientation: portrait) and (max-height: 600px) {
  :root { --size-head: 44px; --size-def: 25px; --size-eg: 16px; --size-small: 12px; --gap: 8px; }
  .page { padding: 12px 18px 10px; }
  .omi { padding: 8px 12px; gap: 10px; }
  .orb { --s: 36px; }
  .omi__name { font-size: 20px; }
  .omi__tag { font-size: 15px; }
  .omi__line { line-height: 1.28; }
}

@media (orientation: landscape) and (max-height: 540px) {
  :root { --size-head: clamp(38px, calc(var(--vh) * 15), 72px); --size-def: clamp(22px, calc(var(--vh) * 7), 34px); --size-eg: clamp(15px, calc(var(--vh) * 4.4), 20px); --size-small: 12.5px; --gap: clamp(6px, calc(var(--vh) * 2.4), 14px); }
  .page { width: min(100%, 980px); flex-direction: row; align-items: stretch; gap: clamp(20px, 4vw, 44px); padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .entry { flex: 1.25; min-width: 0; margin: auto 0; }
  .side { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 2px 0; }
  .omi { margin-top: auto; }
  .founder { margin-top: auto; padding-top: 8px; }
}

@media (orientation: landscape) and (max-height: 540px) and (max-width: 540px) {
  .page { gap: 14px; padding-left: 16px; padding-right: 16px; }
  .omi { padding: 8px 10px; gap: 8px; }
  .orb { --s: 32px; }
  .omi__tilt { display: none; }
}

.js-entry [data-words], .js-entry [data-letters], .js-entry [data-rise] { visibility: hidden; }
.js-go [data-words], .js-go [data-letters], .js-go [data-rise] { visibility: visible; }
.js-go .w { display: inline-block; animation: entry 720ms var(--ease) calc(var(--d) * 1ms) both; }
.js-go [data-rise] { animation: entry 820ms var(--ease) calc(var(--d) * 1ms) both; }
.js-go .orb__eye { animation: orb-wake 520ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d-wake) * 1ms) both; }
@keyframes entry { from { opacity: 0; filter: blur(6px); transform: translateY(0.46em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes orb-wake { from { transform: scaleY(0.1); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .orb *, .orb *::before, .orb *::after { animation: none !important; }
}
