/* The palette, as the Mac draws it (pal.js). Every example on the page is
   this one component: the field with its +, one card that grows through its
   states (filled in, working, done), the card's own keys and its one button.
   Measured from the app's own pictures (website/docs/img/say-*-dark.webp). */
:root {
  --jvp-q: cubic-bezier(.23, 1, .32, 1);   /* ease-out-quint */
  --jvp-x: cubic-bezier(.16, 1, .3, 1);    /* ease-out-expo */
}
.jvp {
  --jvp-bg: #151517; --jvp-card: #222124; --jvp-chip: #302f32; --jvp-line: #2f2e31;
  --jvp-t1: #efeef1; --jvp-t2: #b9b8be; --jvp-t3: #8b8a91; --jvp-kbd: #333236;
  --jvp-ok: #3ddc84; --jvp-pink: #f0a6bd; --jvp-acc: #ff8fb4;
  position: relative; isolation: isolate; width: 100%; text-align: left;
  border-radius: 20px; background: var(--jvp-bg); color: var(--jvp-t1);
  font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .5px rgba(0, 0, 0, .6),
    0 2px 4px rgba(10, 8, 20, .18), 0 34px 70px -26px rgba(16, 10, 34, .6);
}
.jvp-jev { position: absolute; left: 30px; bottom: calc(100% - 17px); width: 54px; aspect-ratio: 1; z-index: -1; pointer-events: none; }
.jvp-jev canvas, .jvp-jev svg { width: 100%; height: 100%; display: block; }

/* The field: what was said, a caret, and the + for a file or a picture. */
.jvp-field { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 13px 20px 13px 22px; border-bottom: 1px solid var(--jvp-line); }
.jvp-said { flex: 1; min-width: 0; font-size: 18px; line-height: 1.35; letter-spacing: -.005em; color: var(--jvp-t1); overflow-wrap: anywhere; }
.jvp-said:empty::before { content: attr(data-ph); color: #6c6b72; }
.jvp-said .um { transition: opacity .7s var(--jvp-q), color .7s var(--jvp-q); }
.jvp-said .um.gone { color: #6c6b72; text-decoration: line-through; text-decoration-color: rgba(240, 166, 189, .7); }
.jvp-said .um.out { opacity: 0; font-size: 0; }
/* An inline caret, never an inline-block: no line break can come between the last letter and it. */
.jvp-said::after { content: ""; display: inline; margin-left: 1px; border-right: 2px solid var(--jvp-pink); animation: jvp-blink 1.1s steps(1) infinite; }
.jvp-said:empty::after { margin-left: -2px; }
.jvp-said:empty::before { float: left; margin-left: 3px; }
.jvp.busy .jvp-said::after { animation: none; }
.jvp.hearing .jvp-said::after { display: none; }
@keyframes jvp-blink { 50% { border-right-color: transparent; } }
.jvp-plus { flex: none; width: 20px; height: 20px; color: var(--jvp-t2); opacity: .9; }
.jvp-plus svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.jvp-mic { flex: none; display: none; align-items: center; gap: 3px; height: 20px; }
.jvp-mic i { width: 3px; height: 6px; border-radius: 2px; background: var(--jvp-acc); animation: jvp-bar 1s var(--jvp-q) infinite alternate; }
.jvp-mic i:nth-child(2) { animation-delay: -.3s; } .jvp-mic i:nth-child(3) { animation-delay: -.6s; } .jvp-mic i:nth-child(4) { animation-delay: -.15s; }
@keyframes jvp-bar { to { height: 18px; } }
.jvp.hearing .jvp-mic { display: inline-flex; } .jvp.hearing .jvp-plus { display: none; }

/* The body grows and shrinks to what it holds, never jumps. */
.jvp-body { overflow: hidden; height: 0; transition: height .62s var(--jvp-q); }
.jvp-in { padding: 10px 12px 12px; }
.jvp-in:empty { padding: 0; }

/* Rows, as the field offers them while you type. */
.jvp-row { display: grid; grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 0 12px; height: 46px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; }
.jvp-row.sel { background: rgba(255, 255, 255, .07); }
.jvp-row b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-row span { color: var(--jvp-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-row em { font-style: normal; color: var(--jvp-t3); font-size: 12.5px; white-space: nowrap; }
.jvp-row em kbd { margin-left: 6px; }

/* The chip: one style everywhere, white line on a soft disc. */
.jvp-chip { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--jvp-chip); color: var(--jvp-t1); flex: none; }
.jvp-chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jvp-chip.ok { background: var(--jvp-ok); color: #06210f; }
.jvp-chip.ok svg { stroke-width: 2.4; }

/* The card: one object through all its states. */
.jvp-card { border-radius: 16px; background: var(--jvp-card); padding: 16px 16px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025); }
.jvp-head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.jvp-head > b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.jvp-aside { margin-left: auto; color: var(--jvp-t3); font-size: 13px; white-space: nowrap; }
.jvp-main { margin-top: 12px; display: grid; gap: 10px; }
.jvp-main > * { margin: 0; }
.jvp-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 28px; font-size: 13px; font-weight: 500; color: var(--jvp-t3); }
.jvp-foot > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.jvp-foot > i { width: 1px; height: 12px; background: #3a393d; }
.jvp kbd { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--jvp-kbd); color: var(--jvp-t3); font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.jvp-go { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 6px 0 14px; border-radius: 10px; background: #ececee; color: #18181a; font-size: 14px; font-weight: 600; white-space: nowrap; transition: transform .5s var(--jvp-q), background-color .5s var(--jvp-q); }
.jvp-go kbd { background: rgba(24, 24, 26, .12); color: #4a4a50; height: 20px; min-width: 20px; }
.jvp-go.press { transform: scale(.95); background: #d9d9dc; transition-duration: .12s; }
.jvp-go.done { background: rgba(61, 220, 132, .16); color: var(--jvp-ok); padding: 0 14px; }
.jvp-go.done kbd { display: none; }

/* What a card holds: the shapes the app's cards are made of. */
.jvp-t { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.jvp-p { color: #dddddf; }
.jvp-m { color: var(--jvp-t3); font-size: 13.5px; }
.jvp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.jvp-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 15px; background: #2c2b2f; color: #d6d5da; font-size: 14px; font-weight: 500; }
.jvp-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.jvp-pill.on { background: rgba(240, 166, 189, .16); color: var(--jvp-pink); }
.jvp-big { font-size: 34px; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.jvp-num { color: var(--jvp-ok); font-weight: 600; font-variant-numeric: tabular-nums; }
.jvp-list { display: grid; }
.jvp-li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 42px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.jvp-li:first-child { border-top: 0; }
.jvp-li > svg { width: 18px; height: 18px; fill: none; stroke: var(--jvp-t2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jvp-li > .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #2e2d31; color: var(--jvp-t2); font-size: 12px; font-weight: 600; }
.jvp-li > .ok { width: 18px; height: 18px; border-radius: 50%; background: var(--jvp-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.4l3 3.1 6-6.6' fill='none' stroke='%2306210f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.jvp-li div { min-width: 0; }
.jvp-li b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-li small { display: block; color: var(--jvp-t3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-li > em { font-style: normal; color: var(--jvp-t2); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jvp-li > em.ok-t { color: var(--jvp-ok); }
.jvp-quote { padding: 12px 14px; border-radius: 12px; background: #1b1a1d; color: #dddddf; font-size: 14.5px; line-height: 1.5; }
.jvp-conv { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.jvp-conv > div:last-child { text-align: right; }
.jvp-conv small { display: block; color: var(--jvp-t3); font-size: 13px; }
.jvp-conv b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jvp-conv > div:last-child b { color: var(--jvp-ok); }
.jvp-conv > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #2c2b2f; color: var(--jvp-t2); font-style: normal; font-size: 13px; }
.jvp-kv { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .06); color: var(--jvp-t3); font-size: 13.5px; }
.jvp-kv b { color: var(--jvp-t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.jvp-ev { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.jvp-ev > div { padding: 10px 12px; border-radius: 12px; background: #2a292d; }
.jvp-ev > div.was { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--jvp-t3); }
.jvp-ev > div.was b { text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .35); }
.jvp-ev > div.now { background: rgba(240, 166, 189, .14); box-shadow: inset 0 0 0 1px rgba(240, 166, 189, .3); }
.jvp-ev b { display: block; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jvp-ev small { display: block; color: var(--jvp-t3); font-size: 13px; }
.jvp-ev > span { color: var(--jvp-t3); }
.jvp-wx { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; }
.jvp-wx > i { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #2c2b2f; }
.jvp-wx > i svg { width: 26px; height: 26px; fill: none; stroke: var(--jvp-t1); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jvp-wx b { font-size: 30px; font-weight: 300; margin-right: 10px; }
.jvp-pics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.jvp-pics i { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(160deg, var(--pa), var(--pb)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.jvp-term { padding: 10px 12px; border-radius: 12px; background: #111113; font: 12.5px/1.65 ui-monospace, "SF Mono", Menlo, monospace; color: #a9a8ae; }
.jvp-term b { color: var(--jvp-ok); font-weight: 500; }
.jvp-tiles { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 6px; height: 74px; }
.jvp-tiles span { border-radius: 9px; padding: 8px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .92); background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* A to-do's open ring, an app's own icon, a row that is gone. */
.jvp-li > .todo { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--jvp-t2); }
.jvp-li > img.app { width: 24px; height: 24px; margin-left: -3px; border-radius: 6px; transition: opacity .5s var(--jvp-q), scale .5s var(--jvp-q), filter .5s var(--jvp-q); }
.jvp-li.gone > img.app { opacity: .35; scale: .8; filter: grayscale(1); }
.jvp-li.gone b { color: var(--jvp-t3); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }

/* The palette opened empty: its sections. */
.jvp-home { display: grid; }
.jvp-sec { margin: 4px 12px 2px; color: var(--jvp-t3); font-size: 12.5px; font-weight: 500; }
.jvp-home .jvp-chip { background: none; }
.jvp-home .jvp-chip svg { width: 18px; height: 18px; stroke: var(--jvp-t2); }

/* Files beside their preview: a folder opened, a find by what a file says. */
.jvp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; height: 262px; }
.jvp-files { display: grid; align-content: start; gap: 2px; min-width: 0; }
.jvp-f { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; transition: background-color .35s var(--jvp-q); }
.jvp-f.sel { background: rgba(255, 255, 255, .08); }
.jvp-f svg { grid-row: span 2; width: 18px; height: 18px; fill: none; stroke: var(--jvp-t2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jvp-f b { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-f span { grid-column: 2; font-size: 12px; color: var(--jvp-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jvp-f em { grid-column: 3; grid-row: 1 / span 2; font-style: normal; font-size: 12px; color: var(--jvp-t3); }
.jvp-prev { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; background: #1b1a1d; }
.jvp-pm { margin: 0; padding: 0 2px; font-size: 12px; color: var(--jvp-t3); }
.jvp-page { flex: 1; overflow: hidden; padding: 16px 16px 12px; border-radius: 4px; background: #f7f6f3; color: #1e1d22; font-size: 9.5px; line-height: 1.45; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.jvp-page h4 { margin: 0 0 2px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.jvp-page p { margin: 0 0 5px; }
.jvp-page .s { color: #6a6970; margin-bottom: 10px; }
.jvp-page .h { margin-top: 8px; font-weight: 700; font-size: 10.5px; }
.jvp-page .r { display: grid; grid-template-columns: 1fr 34px 54px; gap: 6px; padding: 4px 0; margin: 0; border-bottom: 1px solid #e4e2dd; }
.jvp-page .r span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.jvp-page .tot { margin-top: 10px; font-size: 12px; font-weight: 700; }
.jvp-page mark { padding: 1px 2px; border-radius: 2px; background: rgba(255, 143, 180, .4); color: inherit; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
@media (max-width: 560px) {
  .jvp-split { grid-template-columns: 1fr; height: auto; }
  .jvp-f:nth-child(n + 3) { display: none; }
  .jvp-page { height: 150px; flex: none; }
}

/* Answers that are checked: each figure is marked against its source. */
.jvp-fig { position: relative; padding: 0 3px; margin: 0 -1px; border-radius: 5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color .5s var(--jvp-q), color .5s var(--jvp-q); }
.jvp-fig sup { font-size: 10px; margin-left: 2px; color: var(--jvp-t3); font-weight: 600; }
.jvp-fig.checking { background: rgba(255, 255, 255, .1); }
.jvp-fig.ok { background: rgba(61, 220, 132, .14); color: #8ff0b8; }
.jvp-fig.fixed .v { color: var(--jvp-t3); font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(255, 120, 140, .8); }
.jvp-fig.fixed ins { text-decoration: none; margin-left: 6px; color: #8ff0b8; background: rgba(61, 220, 132, .14); border-radius: 5px; padding: 0 3px; }
.jvp-fig:not(.fixed) ins { display: none; }

/* Entrances: the card's parts rise in turn; one curve, slow enough to see. */
.jvp-enter > * { animation: jvp-rise .8s var(--jvp-x) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes jvp-rise { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
/* A card in place of a card: a short fade from part-shown, no blur, so the
   panel never goes blank between the two. */
.jvp-swap { animation: jvp-fade .28s var(--jvp-q) both; }
@keyframes jvp-fade { from { opacity: .35; } }

@media (max-width: 560px) {
  .jvp { border-radius: 18px; }
  .jvp-field { min-height: 50px; padding: 12px 16px 12px 18px; }
  .jvp-said { font-size: 16.5px; }
  .jvp-in { padding: 8px 8px 10px; }
  .jvp-card { padding: 14px 14px 12px; }
  .jvp-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .jvp-row span { display: none; }
  .jvp-foot > span:not(:first-child), .jvp-foot > i { display: none; }
  .jvp-big { font-size: 28px; }
  .jvp-jev { left: 22px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .jvp-body { transition: none; }
  .jvp-enter > *, .jvp-swap { animation: none; }
  .jvp-said::after { animation: none; }
}

/* ── Where the palette sits ───────────────────────────────────────────── */
/* The first screen: the palette grows down from a fixed top; the button
   under it keeps its place whatever the card holds. */
.hl-stage { height: 372px !important; margin-top: clamp(64px, 9vh, 92px) !important; }
.hl .hj-pal { position: absolute !important; top: 0; left: 0; right: 0; width: 100%; }
.hl .hj-pal .jvp-jev { width: 60px; left: 34px; bottom: calc(100% - 19px); }
@media (max-width: 560px) { .hl-stage { height: 400px !important; margin-top: 70px !important; } .hl .hj-pal .jvp-jev { width: 46px; left: 24px; } }

/* The stage: every scene's palette sits at the same height in the frame, so
   moving between tabs never moves the palette. */
.ask-stage { position: relative; width: min(580px, 86%) !important; height: 0 !important; align-self: start; margin-top: clamp(84px, 17%, 120px); }
.ask-stage .ask-pal { position: absolute; left: 0; right: 0; top: 0; transition: opacity .5s var(--jvp-q), transform .7s var(--jvp-x); }
.ask-stage.closed .ask-pal { opacity: 0; transform: translateY(-8px) scale(.975); pointer-events: none; }
.ask-stage .hx-keys { top: 6px; }
.st-panel .feat-art > .sa, .st-panel .feat-art > .sv2, .st-panel .feat-art > .sl, .st-panel .feat-art > .sc, .st-panel .feat-art > .ss { position: absolute; left: 50%; top: clamp(84px, 17%, 120px); translate: -50% 0; width: min(580px, 86%); max-width: none; display: grid; gap: 18px; }
.st-panel .feat-art > .sa-tabs { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: max-content; max-width: calc(100% - 28px); display: flex; justify-content: center; gap: 6px; }
.sa-tabs button { height: 32px; padding: 0 14px; white-space: nowrap; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .82); font: 500 13px/1 var(--sans, system-ui); cursor: pointer; backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); transition: background-color .4s var(--jvp-q), color .4s var(--jvp-q); }
.sa-tabs button:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.sa-tabs button[aria-pressed="true"] { background: rgba(255, 255, 255, .92); color: #17151c; }
.sv2-hint { position: absolute; top: -50px; left: 0; right: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 6px; color: rgba(255, 255, 255, .9); font: 500 14px/1 var(--sans, system-ui); opacity: 0; transform: translateY(4px); transition: opacity .6s var(--jvp-q), transform .8s var(--jvp-x); }
.sv2-hint.on { opacity: 1; transform: none; }
.sv2-hint kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 9px; background: rgba(255, 255, 255, .92); color: #17151c; font: 600 15px/1 -apple-system, system-ui; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.sv2-hint span { margin-left: 6px; }
@media (max-width: 760px) {
  .ask-stage, .st-panel .feat-art > .sa, .st-panel .feat-art > .sv2, .st-panel .feat-art > .sl, .st-panel .feat-art > .sc, .st-panel .feat-art > .ss { width: calc(100% - 28px) !important; top: 74px; margin-top: 74px; }
  .ask-stage { margin-top: 74px; }
  .st-panel .feat-art > .sa-tabs { bottom: 14px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sa-tabs button { flex: none; }
}

/* A day: the moment's palette under its hour, its height kept so the card
   below never moves the page. */
.dy-pal2 { margin-top: 44px; }
.dy-pal2 .jvp-body { min-height: 0; }
.dy-card { padding-bottom: clamp(22px, 3vw, 34px); }
.dy-card .dy-pal2 + * { display: none; }
.jvp p, .jvp blockquote, .jvp pre { margin: 0; }
.dy-pal2 .jvp-in { min-height: 262px; }

/* Forty years: the palette in the middle of every chore, its rim lit while it works. */
.w2-glass { background: none !important; overflow: visible !important; box-shadow: none !important; border-radius: 20px; }
.w2-jp .jvp-go { background: rgba(240, 166, 189, .16); color: var(--jvp-pink); }
.w2-jp .jvp-go kbd { display: none; }
/* The film (why-table) is folded to the field and grows with its rows; a
   rim the film's whole canvas tall read as an empty open palette. */
.w2-pal .w2-rim { display: none; }

/* The last field on the page takes the same look: it is the palette too. */
.end-pal { border-radius: 20px !important; background: #151517 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .5px rgba(0, 0, 0, .6), 0 2px 4px rgba(10, 8, 20, .18), 0 34px 70px -26px rgba(16, 10, 34, .6) !important; }
.end-pal .jx-field { min-height: 54px; padding: 13px 20px 13px 22px; font-size: 18px; }
.end-pal .jx-field input { caret-color: #f0a6bd; }
.end-pal .jx-field kbd { min-width: 22px; height: 20px; border-radius: 6px; background: #333236; color: #8b8a91; font: 500 11.5px/20px ui-monospace, "SF Mono", Menlo, monospace; text-align: center; padding: 0 6px; }

/* ── Motion, page-wide ────────────────────────────────────────────────── */
/* One family of curves (ease-out quint and expo, as raycast.com uses), slow
   enough to be seen: things arrive over about a second, rising a little out
   of a blur; titles word by word; the stage's scenes cross-fade. */
:root { --ease: cubic-bezier(.23, 1, .32, 1); --jvp-soft: cubic-bezier(.22, .68, .24, 1); }
.reveal { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 1.2s var(--jvp-soft), transform 1.4s var(--jvp-soft), filter 1.2s var(--jvp-soft) !important; transition-delay: var(--d, 0s) !important; }
.reveal.seen { opacity: 1; transform: none; filter: none; }
.sec h2.split .wd, .split .wd { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(7px); transition: opacity 1.1s var(--jvp-soft), transform 1.3s var(--jvp-soft), filter 1.1s var(--jvp-soft) !important; transition-delay: calc(var(--i, 0) * 50ms) !important; }
.st-title > .wd, .dayy h2 > .wd, .rc2 h2 > .wd, .ax h2 > .wd, .tm-head h2 > .wd, .pk-text h2 > .wd, .ty-side h2 > .wd, .end h2 > .wd { color: inherit !important; }
.sec h2.split.seen .wd, .split.seen .wd { opacity: 1; transform: none; filter: none; }
.st-panel { transition: opacity .8s var(--jvp-q), transform 1s var(--jvp-x), visibility 0s .8s !important; }
.st-panel.on { transition-delay: 0s !important; }
.st-cap { transition: opacity .7s var(--jvp-q), transform .9s var(--jvp-x), visibility 0s .7s !important; }
.st-cap.on { transition-delay: .12s !important; }
.hx-up, .hx-up2 { transform: translateY(16px); filter: blur(6px); animation: jvp-hero 1.4s var(--jvp-x) .25s forwards !important; }
.hx-up2 { animation-delay: .7s !important; }
@keyframes jvp-hero { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .sec h2.split .wd, .split .wd { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hx-up, .hx-up2 { animation: none !important; opacity: 1; transform: none; filter: none; }
}
.split.reveal { opacity: 1; transform: none; filter: none; }

/* ── Phones ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* The stage: the questions are cycled, not chosen, on a phone. */
  .st-panel .feat-art > .sa-tabs { display: none; }
  /* A day: the card holds the palette whole. */
  .dy-card { overflow: visible !important; padding-bottom: 16px !important; }
  .dy-pal2 .jvp-in { min-height: 0; }
}

/* Make it yours: the field to say a look in is the palette's field too. */
.orb-pal { padding: 6px 7px 6px 18px !important; min-height: 54px; border-radius: 20px !important; background: #151517 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .5px rgba(0, 0, 0, .6), 0 34px 70px -26px rgba(0, 0, 0, .7) !important; }
.orb-input { font-size: 18px !important; caret-color: #f0a6bd !important; }
.orb-input::placeholder { color: #6c6b72 !important; }
.orb-pal button { width: auto !important; height: 30px !important; padding: 0 6px 0 14px !important; border-radius: 10px !important; display: inline-flex; align-items: center; gap: 9px; font: 600 14px -apple-system, system-ui !important; }
.orb-pal button kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: rgba(24, 24, 26, .12); color: #4a4a50; font: 500 11.5px/1 ui-monospace, "SF Mono", Menlo, monospace; }
@media (max-width: 560px) { .orb-pal button { font-size: 0 !important; gap: 0; padding: 0 5px !important; } .orb-input { font-size: 16px !important; } }
.orb-pal { width: min(560px, calc(100% - 28px)) !important; }
@media (max-width: 560px) { .orb-themes { max-width: calc(100% - 28px); overflow-x: auto; scrollbar-width: none; border-radius: 18px; } }

/* The hero's real palette (hero.js): the app's own frames over the scene,
   at the size the Mac opens it (774 × 474 points), Jev on its edge. */
.hl-stage.real { width: min(774px, 100%) !important; height: auto !important; aspect-ratio: 2042 / 954; }
.hr-pal { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 34px 50px rgba(8, 6, 20, .55)); }
.hr-pal video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }
/* Google's answer grown in the palette (hero.js): it rises over the
   headline and runs over what is under it, then settles back. */
.hl-stage.real { z-index: 3; }
.hr-pal { translate: 0 0; transition: translate .55s cubic-bezier(.65, 0, .35, 1); }
.hr-pal { transform-origin: 50% 0; scale: 1; transition: translate .55s cubic-bezier(.65, 0, .35, 1), scale .55s cubic-bezier(.65, 0, .35, 1); }
.hl.asking .hr-pal { translate: 0 var(--lift, 0); }
/* Grown over the page, Jev steps off its edge (the Mac's sits in the field). */
.hr-jev { transition: opacity .3s; }
.hl.asking .hr-jev { opacity: 0; }
.hl .hz-t, .hl .hz-s { transition: opacity .26s, translate .26s; }
.hl.swap .hz-t, .hl.swap .hz-s { opacity: 0; translate: 0 6px; }
/* The words give way while the answer stands over them: half covered, the
   headline read as a defect ("It's done." under Google's answer, 4 November
   2026). They come back, changed, as it settles. */
.hl.asking .hz-t, .hl.asking .hz-s, .hl.settling .hz-t, .hl.settling .hz-s { opacity: 0; translate: 0 -8px; transition: opacity .22s, translate .45s cubic-bezier(.22, 1, .36, 1); }
/* The palette rises a beat after the words start to go, so it never passes over them while they show. */
.hl.asking .hr-pal, .hl.asking .hj-pal.grows { transition-delay: .16s; }
.hr-jev { position: absolute; left: 3.4%; bottom: calc(100% - 19px); width: 60px; aspect-ratio: 1; pointer-events: none; }
.hr-jev canvas, .hr-jev svg { width: 100%; height: 100%; display: block; }
.hl-stage.real + .hl-cta { margin-top: 36px !important; }

/* A filmed palette (JeviePal.film): the app's own frames, Jev on the edge. */
.jvf { position: relative; filter: drop-shadow(0 30px 44px rgba(8, 6, 20, .5)); }
.jvf video { display: block; width: 100%; height: auto; }
.jvf-jev { position: absolute; left: 30px; bottom: calc(100% - 17px); width: 54px; aspect-ratio: 1; pointer-events: none; z-index: 1; }
.jvf-jev canvas, .jvf-jev svg { width: 100%; height: 100%; display: block; }

/* The hero's folded film on narrow screens: the palette at its own height. */
.hl .hj-pal.real { background: none; box-shadow: none !important; }
@media (max-width: 760px) { .hl-stage:has(.hj-pal.real) { height: auto !important; } .hl .hj-pal.real { position: relative !important; } }

/* #agents, every picture the app's own (agents.js): the palette for Start,
   the session wall for Watch, the wall asking and the phone for Answer. */
.ax-stage.real { display: grid; grid-template-areas: "s"; place-items: start center; min-height: clamp(260px, 42vw, 520px); }
.ax-stage.real > * { grid-area: s; transition: opacity .6s var(--jvp-q), translate .6s var(--jvp-q); }
.ax-stage.real .ax-pal { width: min(620px, 100%); }
.ax-stage.real .ax-mac { position: relative; width: min(1000px, 100%); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .6); }
.ax-stage.real .ax-mac img { display: block; width: 100%; height: auto; }
.ax-stage.real .ax-mac img.ask { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--jvp-q); }
.ax-stage.real .ax-ph { justify-self: end; align-self: end; width: clamp(120px, 17vw, 190px); height: auto; border-radius: 22px; margin: 0 -10px -24px 0; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .7); rotate: 4deg; }
.ax-stage.real:not([data-step="1"]) .ax-pal, .ax-stage.real[data-step="1"] .ax-mac, .ax-stage.real:not([data-step="3"]) .ax-ph { opacity: 0; translate: 0 10px; pointer-events: none; }
.ax-stage.real[data-step="3"] .ax-mac img.ask { opacity: 1; }

/* #desk's palette, filmed (tidy.js): the frame is the film's own. */
.tidy .jp.real { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; backdrop-filter: none !important; }
.tidy .jp.real::before, .tidy .jp.real::after { display: none !important; }

/* Phones: the compact film grows the same way (hero.js): the stage is the
   palette at rest, Google's answer runs over the words round it, as wide,
   and Jev steps off its edge while it is grown. */
.hl .hj-pal.real.grows { overflow: visible; z-index: 3; translate: 0 0; transition: translate .55s cubic-bezier(.65, 0, .35, 1); }
.hj-pal.grows video { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.hl.asking .hj-pal.grows { translate: 0 var(--lift, 0); }
.hj-pal.grows .jvf-jev { transition: opacity .3s; }
.hl.asking .hj-pal.grows .jvf-jev { opacity: 0; }
@media (max-width: 760px) {
  .hz.hl { padding-left: 16px !important; padding-right: 16px !important; }
  .hl-stage:has(.hj-pal.real) { width: 100% !important; }
  .hl .hj-cta { margin-top: 32px !important; position: relative; z-index: 2; }
}
@media (max-width: 760px) {
  /* Both headlines hold two lines' room, so the palette never moves when they change. */
  .hl .hz-t { min-height: 2.08em; display: grid; align-items: end; }
  /* The pixel floor quieter than the palette's words at a phone's size. */
  .hl-world { opacity: .55; }
}

/* ══ The opening (hero.js open()), under 2 s: Jev alone in the middle,
   "Jevie, my friend" under him, then he flies up to the bar as everything
   comes in round him (in the body, over the bar: inside the hero's
   isolated section he flew under it). Opacity and transforms only (no blur on letters or
   the headline: repainting them stuttered on phones). ══ */
.hl-intro { position: fixed; left: 50%; top: 46svh; translate: -50% -50%; z-index: 30; display: grid; justify-items: center; gap: 14px; pointer-events: none; }
.hl-intro-fly { display: block; will-change: transform; }
.hl-intro-jev { display: block; width: 112px; aspect-ratio: 1; opacity: 0; scale: .92; will-change: transform, opacity; transition: opacity .55s, scale .8s cubic-bezier(.22, 1, .36, 1); }
.hl-intro-jev canvas, .hl-intro-jev svg { width: 100%; height: 100%; display: block; }
@font-face { font-family: "Jevie Accent"; src: url("assets/fonts/Fraunces-Italic.woff2") format("woff2"); font-style: italic; font-weight: 100 900; font-display: block; }
/* The caption in the first run's face: Fraunces Italic at the curtain's axes. */
.hl-intro-say { margin: 0; font: italic 380 clamp(26px, 3vw, 38px)/1.1 "Jevie Accent", "New York", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; letter-spacing: -.01em; color: rgba(255, 255, 255, .9); white-space: nowrap; transition: opacity .3s, translate .4s cubic-bezier(.22, 1, .36, 1); }
.hl-intro-friend { color: #ffc4dd; }
.hl-intro-say .ch { display: inline-block; opacity: 0; translate: 0 .32em; transition: opacity .45s, translate .6s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(120ms + var(--i) * 26ms); }
.hl-intro[data-s="1"] .hl-intro-say .ch { opacity: 1; translate: 0 0; }
.hl-intro[data-s="1"] .hl-intro-jev, .hl-intro[data-s="go"] .hl-intro-jev { opacity: 1; scale: 1; }
/* Away: the caption lifts out at once; Jev flies (hero.js), and fades only
   as the bar's own Jev takes over. */
.hl-intro[data-s="go"] .hl-intro-say { opacity: 0; translate: 0 -10px; }
html.hl-jev-home .hl-intro-jev { opacity: 0; transition: opacity .2s; }
html.hl-opening header.bar .mark-jev { opacity: 0; }
html.hl-jev-home header.bar .mark-jev { opacity: 1; transition: opacity .2s; }
/* Held back until their turn, hidden at once (no fade from the first paint). */
.hl[data-intro] .hx-up, .hl[data-intro] .hx-up2 { animation: none !important; }
.hl[data-intro] .hz-t, .hl[data-intro] .hz-s, .hl[data-intro] .hl-stage { opacity: 0; translate: 0 16px; transition: none; }
.hl[data-intro="go"] .hz-t, .hl[data-intro="go"] .hz-s, .hl[data-intro="go"] .hl-stage { opacity: 1; translate: 0 0; transition: opacity .7s, translate .9s cubic-bezier(.22, 1, .36, 1); }
.hl[data-intro="go"] .hz-t { transition-delay: .26s; }
.hl[data-intro="go"] .hz-s { transition-delay: .34s; }
.hl[data-intro="go"] .hl-stage { transition-delay: .42s; }
.hl-world { transition: opacity 1.2s; }
.hl[data-intro]:not([data-intro="go"]) .hl-world { opacity: 0; transition: none; }
.hl[data-intro] .hl-stage:not(.rolling) video { visibility: hidden; }
html.hl-opening header.bar { opacity: 0; translate: 0 -14px; transition: none; }
html.hl-opening.hl-bar-in header.bar { opacity: 1; translate: 0 0; transition: opacity .6s, translate .7s cubic-bezier(.22, 1, .36, 1); }

/* The hero's rhythm: the subline a breath under the headline, the palette
   (Jev perched on it) an even step under the subline. */
.hl .hz-s { margin-top: 20px !important; }
.hl-stage { margin-top: 68px !important; }
@media (max-width: 560px) { .hl-stage { margin-top: 64px !important; } }