:root { --ink: #171717; --tab-on-bg: #0b0b0b; --tab-on-fg: #fff; --gloss: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%); --gloss-on: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 50%); --gloss-on-edge: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.1); }
.copied-tip { font: 400 12px/1 system-ui, sans-serif; }
.jump-wrap { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 30; height: 0; pointer-events: none; }
/* Glass, copied from shop.com's search bar: 75% white, 16px blur, a hairline plus a long soft shadow, 32px radius, 320ms ease (.2, 0, 0, 1). Everything inside is a tint of the same glass. */
/* The Jump bar copies anishfn.ink exactly: 300 wide (540 open), 48 tall, radius 20, white, his popover shadow, 14px text, a 16px mark at the left and a 28px key chip at the right.
   --glass and --blur are the only two things that make it "glass"; set --glass to #fff and --blur to none for his flat white. */
.jump { --glass: #fff; --blur: none; --hover: #f7f7f7; --surface: #f2f2f2; --control: #ececec; --jb: rgba(0, 0, 0, .06); --tert: #6e6e6e; --ease: cubic-bezier(.2, 0, 0, 1); color: #171717;
  position: absolute; bottom: 0; left: var(--jx, calc(50vw + 250px)); transform: translateX(-50%); width: min(300px, calc(100vw - 24px)); max-width: calc(100vw - 24px); padding: 0; border-radius: 20px; overflow: hidden; pointer-events: auto;
  background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 8px -2px rgba(0, 0, 0, .06), 0 12px 24px -4px rgba(0, 0, 0, .08);
  transition: width .24s cubic-bezier(.23, 1, .32, 1), background-color .35s, box-shadow .35s; }
:root[data-theme="dark"] .jump { --glass: #262626; --hover: #212121; --surface: #232323; --control: #2a2a2a; --jb: rgba(255, 255, 255, .07); --tert: #919191; color: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 16px 40px -12px rgba(0, 0, 0, .6); }
.jico { position: relative; flex: none; width: 28px; height: 28px; margin: -6px -4px -6px -6px; display: block; }
/* A still picture of the star sits where the canvas will be, so there is never an empty gap while the script loads. It steps aside once the live star has drawn. */
.jico::before { content: ""; position: absolute; left: -8px; top: -12.7px; width: 48px; height: 48px; background: url("assets/star-light.webp") center / 100% 100% no-repeat; pointer-events: none; transition: opacity .2s; }
:root[data-theme="dark"] .jico::before { background-image: url("assets/star-dark.webp"); }
.jico.ready::before { opacity: 0; }
.jico canvas { display: block; transform: translateY(-1.5px); }
.jump.open { width: min(540px, calc(100vw - 24px)); }
.jump.open .jp-in { position: relative; }
.jump.open .jp-in::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: var(--jb); }
.jp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.jump.open .jp { grid-template-rows: 1fr; }
.jp-in { min-height: 0; overflow: hidden; }
.jp-list { list-style: none; margin: 0; padding: 6px 6px 7px; max-height: min(50vh, 380px); overflow-y: auto; scrollbar-width: none; }
.jp-list[hidden], .jp-hi[hidden], .jp-call[hidden] { display: none; }
.jp-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 14px; background: none; color: inherit; text-align: left; transition: background-color .32s var(--ease); }
.jp-item.on, .jp-item:hover { background: var(--hover); }
.jp-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--control); color: var(--ink); }
:root[data-theme="dark"] .jp-ic img { filter: invert(1); }
.jp-tx { min-width: 0; flex: 1; line-height: 1.3; display: flex; flex-direction: column; }
.jp-l { font-size: 14px; font-weight: 400; }
.jp-h { font-size: 12.5px; color: var(--tert); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jp-empty { margin: 0; padding: 12px 16px; font-size: 14px; color: var(--tert); list-style: none; }
/* "Say hi" form, copied from anishfn.ink: email chip with copy, two fields on a row, message, Send, and a calm "Sent" state */
.jp-hi { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.jp-mail { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 12px; background: var(--surface); color: var(--tert); }
.jp-mail svg { flex: none; }
.jp-mail span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink); }
.jp-mail button { height: 28px; padding: 0 8px; border-radius: 8px; background: none; color: var(--tert); font-size: 12px; transition: background-color .32s var(--ease), color .32s var(--ease); }
.jp-mail button:hover { background: var(--control); color: var(--ink); }
.jp-formx { display: flex; flex-direction: column; gap: 8px; }
.jp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.jp-formx label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jp-formx label span { padding-left: 4px; font-size: 13px; color: var(--tert); }
.jp-formx input, .jp-formx textarea { width: 100%; font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 0; border-radius: 12px; padding: 10px 14px; outline: none; resize: none; transition: box-shadow .32s var(--ease), background-color .32s var(--ease); }
.jp-formx textarea { border-radius: 12px; }
.jp-formx input::placeholder, .jp-formx textarea::placeholder { color: var(--tert); }
.jp-formx input:hover, .jp-formx textarea:hover { background: var(--control); }
.jp-formx input:focus, .jp-formx textarea:focus { box-shadow: 0 0 0 2px var(--ink); }
.jp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin-top: 2px; }
.jp-err { display: block; font-size: 13px; color: #dc2626; }
:root[data-theme="dark"] .jp-err { color: #f2575c; }
.jp-send { position: relative; flex: none; height: 36px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--tab-on-bg); color: var(--tab-on-fg); font-size: 14px; font-weight: 400; transition: opacity .32s var(--ease), transform .32s var(--ease); }
.jp-send:hover { opacity: .9; }
.jp-send:active { transform: scale(.96); }
.jp-send:disabled { opacity: .6; }
.jp-spin { display: none; position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: jspin .7s linear infinite; }
.jp-send.busy .jp-lbl { opacity: 0; }
.jp-send.busy .jp-spin { display: block; }
@keyframes jspin { to { transform: rotate(360deg); } }
.jp-sent { color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 0 22px; text-align: center; animation: sentIn .3s cubic-bezier(.23,1,.32,1); }
.jp-sent[hidden], .jp-formx[hidden] { display: none; }
.jp-sent p { margin: 0; font-size: 15px; }
.jp-ok { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--tab-on-bg); color: var(--tab-on-fg); }
@keyframes sentIn { from { opacity: 0; transform: scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: blur(0); } }
.jp-call { padding-bottom: 7px; }
.jp-call iframe { display: block; width: 100%; height: 420px; border: 0; }
.jp-call .jp-empty { padding: 16px; }
.jrow { height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px; }
#jpInput { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; color: inherit; font: inherit; font-size: 14px; font-weight: 400; padding: 0; text-overflow: ellipsis; }
#jpInput::placeholder { color: var(--tert); opacity: 1; }
.jp-send, .jp-ok { background-image: var(--gloss-on); box-shadow: var(--gloss-on-edge); }
.jp-mail button:hover, .jp-ic { background-image: var(--gloss); }
.jp-send:hover { opacity: 1; filter: brightness(1.12); }
.jkey, .jesc { flex: none; height: 28px; padding: 0 10px; border-radius: 10px; display: inline-flex; align-items: center; background: var(--control); color: var(--tert); font: inherit; font-size: 11px; transition: background-color .32s var(--ease), color .32s var(--ease); }
.jkey[hidden], .jesc[hidden] { display: none; }
.jesc:hover { color: var(--ink); }
.jump, .jump * { font-weight: 400; }
.copied-tip { position: fixed; z-index: 2147483647; transform: translate(-50%, -100%) translateY(4px); padding: 6px 10px; border-radius: 8px; background: #111; color: #fff; font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .16s ease, transform .2s cubic-bezier(.16, 1, .3, 1); }
.copied-tip.on { opacity: 1; transform: translate(-50%, -100%); }

/* White Jump bar, fixed at the bottom centre like the quick links in the Figma file. */
.jump-wrap { z-index: 50 !important; }
.jump { left: 50% !important; transform: translateX(-50%) !important; }
/* The Jump bar keeps the system font it always had (SF on a Mac), not the page font. */
.jump, .jump input, .jump button, .jump textarea, .jump * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

/* Shortcut icons, one visual size: the filled X and WhatsApp marks fill their box, the outlined ones do not, so those two are drawn a little smaller. */
.jp-ic svg { width: 16px; height: 16px; }
.jp-ic img { display: block; width: 14px; height: 14px; }
.jp-ic img[src*="whatsapp"] { width: 12.5px; height: 12.5px; }

/* Phones: the Jump bar exactly as on the live site (Geist, sizes that sit close together, every icon the same size and weight). */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Phones: the Jump bar as on the live site (Geist, sizes that sit close together, every icon the same size and weight). Desktop keeps its own, smaller sizes. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/geist-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.jump-wrap { bottom: 24px !important; }
@media (max-width: 640px) {
  .jump-wrap { bottom: 16px !important; }
  #jpInput { font-size: 16px; }
  .jump, .jump input, .jump button, .jump textarea, .jump * { font-family: Geist, system-ui, -apple-system, "Segoe UI", sans-serif; }
  .jp-l { font-size: 15px; }
  .jp-h { font-size: 13px; }
  .jp-empty { font-size: 15px; }
  .jp-ic svg, .jp-ic img { width: 15px; height: 15px; }
  .jp-ic svg { stroke-width: 1.6; }
  .jp-ic img[src*="dock-x"] { width: 13px; height: 13px; }
  .jp-ic img[src*="whatsapp"] { width: 14px; height: 14px; }
}