.gv-screen {
  --g-paper: #F7F5F0;
  --g-surface: #FFFFFF;
  --g-rail: #F2EFE8;
  --g-ink: #1C1B18;
  --g-lead: #3A3731;
  --g-text: #4A463F;
  --g-muted: #69635A;
  --g-line: #E2DDD3;
  --g-line-strong: #877F72;
  --g-sand: #EFE8DC;
  --g-sand-line: #E3DACB;
  --g-green: #2D6A4F;
  --g-green-ink: #245A42;
  --g-green-tint: #E6EFEA;
  --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  container-type: inline-size;
  display: grid;
  gap: 10px;
  min-width: 0;
  margin-top: clamp(14px, 2vw, 20px);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--g-text);
}
.gv-screen p, .gv-screen h3 { margin: 0; }
.gv-screen b { font-weight: 700; color: var(--g-ink); }
.g-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.gvi-acc { fill: var(--gv-icon-accent, currentColor); stroke: var(--gv-icon-accent, currentColor); }
.g-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--g-muted); border: 1px solid var(--g-line-strong); border-radius: 999px; padding: 1px 8px; }
.g-replay { min-width: 44px; min-height: 40px; padding: 0 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--g-ink); background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g-line-strong); }
.g-replay:hover { background: #E6E2DA; }
.g-replay:focus-visible { outline: 2px solid var(--g-green); outline-offset: -2px; }
.g-frame { min-width: 0; background: var(--g-paper); border: 1px solid var(--g-line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28, 27, 24, 0.04), 0 14px 36px rgba(28, 27, 24, 0.08); }
.g-chrome { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 4px 0 12px; background: #EFECE5; border-bottom: 1px solid var(--g-line); }
.g-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #D5CFC3; }
.g-url { margin-left: 10px; padding: 2px 12px; font-size: 11px; color: var(--g-muted); background: var(--g-surface); border-radius: 999px; }
.g-app { display: grid; grid-template-columns: minmax(0, 1fr); }
.g-rail { display: none; }
.g-chat { order: 1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: var(--g-paper); border-bottom: 1px solid var(--g-line); }
.g-main { order: 2; display: grid; align-content: start; gap: 10px; min-width: 0; padding: 14px 14px 0; overflow: hidden; }
.g-logo { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.03em; color: var(--g-green); }
.g-logo svg { width: 16px; height: auto; fill: currentColor; }
.g-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--g-muted); --gv-icon-accent: currentColor; }
.g-nav svg { width: 17px; height: 17px; flex: none; }
.g-nav[aria-current="page"] { background: var(--g-surface); color: var(--g-ink); font-weight: 600; --gv-icon-accent: var(--g-green); }
.g-h { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--g-ink); }
.g-card { display: grid; padding: 12px 14px 0; background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 10px; overflow: hidden; }
.g-goal { display: grid; gap: 1px; padding: 7px 12px; background: var(--g-sand); border: 1px solid var(--g-sand-line); border-radius: 8px; }
.g-goal__t { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--g-ink); }
.g-goal__t .g-why { font-weight: 400; }
.g-layer { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--g-line); }
.g-k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--g-green-ink); }
.g-goal .g-k { color: var(--g-muted); }
.g-t { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--g-ink); }
.g-why { font-size: 13px; line-height: 1.45; color: var(--g-text); }
.g-rest { color: transparent; }
.is-typing .g-typed::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-right: -2px; vertical-align: -0.15em; background: var(--g-green); }
.g-tail { position: relative; display: grid; padding-bottom: 8px; }
.g-blurimg { display: block; height: auto; max-width: none; }
.g-blurpic { display: contents; }
.g-blurimg--wide { width: calc(100% + 28px); margin: 0 -14px; }
.g-blurimg--narrow { display: none; width: calc(100% + 28px); margin: 0 -14px; }
.gv-screen.is-anim .g-blurimg { clip-path: inset(0 0 calc((1 - var(--reveal, 0)) * 100%) 0); }
.g-pop { position: absolute; top: 92px; left: 0; right: 0; z-index: 1; display: grid; gap: 4px; padding: 0 8px; text-align: center; text-wrap: balance; text-shadow: 0 0 2px #fff, 0 0 14px #fff, 0 0 28px #fff; }
.g-pop::before { content: ""; position: absolute; inset: -14px -6% -14px; z-index: -1; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%); }
.g-pop__soon { font-size: clamp(15px, 1.9cqi, 18px); font-weight: 500; line-height: 1.3; color: var(--g-lead); }
.g-pop__main { font-size: clamp(21px, 3.2cqi, 28px); font-weight: 600; line-height: 1.1; letter-spacing: -0.025em; color: var(--g-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ow { color: var(--g-green); text-decoration: underline dotted rgba(45, 106, 79, 0.6); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ow[role="button"] { cursor: help; border-radius: 3px; }
.ow[role="button"]:focus-visible { outline: 2px solid var(--g-green); outline-offset: 2px; }
.g-why .ow { font-weight: 500; }
.g-goal__t, .g-why { position: relative; }
.ow__tip { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 3; max-width: min(100%, 360px); padding: 8px 10px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--g-ink); background: var(--g-surface); border: 1px solid var(--g-line-strong); border-radius: 8px; box-shadow: 0 6px 18px rgba(28, 27, 24, 0.12); }
.ow:hover + .ow__tip, .ow:focus-visible + .ow__tip, .ow.is-open + .ow__tip { display: block; }
.ow.is-closed + .ow__tip { display: none; }
.ow__q { display: block; margin-top: 3px; }
.ow__tip--pin, .ow.is-closed + .ow__tip--pin { display: block; }
.ow__tip--pin { top: calc(100% + 4px); padding: 5px 9px; font-size: 12px; line-height: 1.3; border-radius: 7px; box-shadow: 0 4px 12px rgba(28, 27, 24, 0.10); }
.ow__tip--pin .ow__q { margin-top: 2px; }
.ow__tip--pin { top: calc(100% + 10px); }
.g-why::before, .g-why::after { content: ""; position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 420ms var(--g-ease); }
.g-why:has(.ow__tip--pin)::before, .g-why:has(.ow__tip--pin)::after { opacity: 1; }
.gv-screen.is-anim .g-why:has(.ow__tip--pin:not(.is-in))::before, .gv-screen.is-anim .g-why:has(.ow__tip--pin:not(.is-in))::after { opacity: 0; }
.g-why .ow__tip--pin { left: -9px; border-top-left-radius: 3px; }
.ow-at { position: relative; }
.ow-at > .ow__tip { top: auto; bottom: calc(100% + 6px); left: auto; right: 0; width: max-content; max-width: 260px; }
.g-msg .ow-at > .ow__tip { top: calc(100% + 6px); bottom: auto; left: 0; right: auto; }
.g-why::before { left: -6px; width: 7px; top: calc(1lh - 1.75px); bottom: -10px; border-left: 1.5px solid rgba(45, 106, 79, 0.55); border-top: 1.5px solid rgba(45, 106, 79, 0.55); border-top-left-radius: 4px; }
.g-why::after { left: 0; top: calc(1lh - 3.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--g-green); }
.g-chat__hd { padding: 12px 16px; border-bottom: 1px solid var(--g-line); }
.g-chat__hd b { font-size: 15px; font-weight: 600; }
.g-chat__body { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px; }
.gv-screen.is-anim:not(.is-done) .g-chat__body { overflow-y: hidden; }
.g-chat__body:focus-visible { outline: 2px solid var(--g-green); outline-offset: -2px; border-radius: 4px; }
.g-chat__body > * { flex: none; }
.g-chat__body > .g-chat__spacer { display: block; flex: 1 0 0; }
.g-msg--me { align-self: flex-end; }
.g-msg { max-width: 92%; font-size: 15px; line-height: 1.45; color: var(--g-ink); }
.g-msg--me { padding: 8px 12px; background: var(--g-sand); border: 1px solid var(--g-sand-line); border-radius: 10px 10px 3px 10px; color: var(--g-lead); }
.g-ask { display: grid; gap: 8px; padding: 12px; border: 1px dashed var(--g-line-strong); border-radius: 10px; }
.g-ask__q { font-size: 14px; font-weight: 600; color: var(--g-ink); }
.g-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.g-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; font-size: 14px; line-height: 1.3; color: var(--g-ink); background: var(--g-surface); border: 1px solid var(--g-line); border-radius: 999px; transition: background 200ms, border-color 200ms, color 200ms; }
.g-chip--pick { background: var(--g-green-tint); border-color: var(--g-green); color: var(--g-green-ink); font-weight: 600; }
.g-tick { flex: none; width: 14px; height: 14px; }
.g-ask--goal { padding: 0; border: 0; }
.g-chat__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px 12px; border-top: 1px solid var(--g-line); }
.g-input { min-height: 40px; padding: 9px 12px; font-size: 15px; line-height: 1.4; color: var(--g-ink); background: var(--g-surface); border: 1px solid var(--g-line-strong); border-radius: 10px; }
.g-input__text { display: none; }
.g-send { padding: 8px 14px; font-size: 13px; font-weight: 600; color: #fff; background: var(--g-green); border-radius: 999px; transition: background 150ms, transform 150ms var(--g-ease); }
@container (max-width: 719px) {
  .g-chip { min-height: 32px; gap: 4px; padding: 5px 9px; font-size: 12.5px; letter-spacing: -0.005em; }
  .g-chat__body { height: 300px; gap: 8px; padding: 12px 16px; }
  .g-chat__hd { padding: 10px 16px; }
  .g-chat__in { padding: 8px 12px 12px; }
  .g-h { margin-bottom: var(--space-3); font-size: 17px; }
  .g-goal__t { width: auto; }
  .g-goal .ow__tip--pin { position: relative; display: block; left: auto; top: auto; bottom: auto; width: max-content; max-width: 100%; margin-top: 12px; }
  .g-goal .ow__tip--pin::before, .g-goal .ow__tip--pin::after { content: ""; position: absolute; pointer-events: none; }
  .g-goal .ow__tip--pin::before { left: 22px; bottom: 100%; width: 1.5px; height: 12px; background: rgba(45, 106, 79, 0.55); }
  .g-goal .ow__tip--pin::after { left: 20.25px; bottom: calc(100% + 9.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--g-green); }
  .g-ask { gap: 6px; padding: 10px 12px; }
  .g-ask__q { font-size: 13px; line-height: 1.4; }
  .g-msg:not(.g-msg--me) { font-size: 13px; }
  .g-blurimg--wide { display: none; }
  .g-blurimg--narrow { display: block; }
  .g-card { border: 0; padding: 0; background: transparent; }
  .g-main { padding: 14px 18px 0 8px; }
  .gv-screen .g-card { padding-left: 10px; }
  .g-t { font-size: 14px; }
  .g-why { font-size: 12.5px; }
  .g-msg { font-size: 14px; line-height: 1.45; }
  .g-msg--me { padding: 8px 12px; }
  .g-chip { min-height: 32px; padding-block: 5px; }
  .g-why { font-size: 13px; line-height: 1.5; }
  .ow__tip--pin { right: 0; max-width: none; padding: 6px 10px; }
  .ow-at > .ow__tip { left: 0; right: auto; }
  .g-pop { top: calc((64px + 100%) / 2); translate: 0 -50%; gap: 0; }
  .g-pop::before { inset: -6px -6% -6px; }
  .g-pop__main { font-size: 19px; }
  .g-pop__soon { font-size: 13px; }
}
@container (min-width: 720px) {
  .g-app { grid-template-columns: minmax(0, 1fr) clamp(272px, 32cqi, 300px); height: clamp(300px, calc(100svh - var(--g-above, 300px) - 12px), 500px); overflow: hidden;
    grid-template-rows: minmax(0, 1fr); }
  .g-chat, .g-main { min-height: 0; }
  .g-main { position: relative; }
  .g-tail { position: static; }
  .gv-screen .g-pop { top: calc((var(--pop-k, 274px) + 100%) / 2); bottom: auto; translate: 0 -50%; }
  .g-goal__t { width: fit-content; }
  .g-goal .ow__tip--pin { left: calc(100% + 16px); top: auto; bottom: -5px; width: max-content; max-width: none; padding: 4px 8px; font-size: 11.5px; }
  .g-goal .ow__tip--pin::before, .g-goal .ow__tip--pin::after { content: ""; position: absolute; pointer-events: none; }
  .g-goal .ow__tip--pin::before { right: 100%; bottom: 4.25px; width: 17px; height: 1.5px; background: rgba(45, 106, 79, 0.55); }
  .g-goal .ow__tip--pin::after { right: calc(100% + 14px); bottom: 2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--g-green); }
  .g-input { font-size: 13.5px; line-height: 1.35; }
  .g-pop__main { font-size: clamp(19px, 2.1cqi, 23px); }
  .g-pop__soon { font-size: 16px; }
  .g-chat__hd { padding: 10px 14px; }
  .g-chat__body { gap: 8px; padding: 12px 14px; }
  .g-msg { font-size: 14px; }
  .g-ask { padding: 9px 10px; gap: 6px; }
  .g-ask__q { font-size: 13px; }
  .g-chip { min-height: 30px; padding: 4px 10px; font-size: 13px; }
  .g-chat__in { padding: 8px 10px 10px; }
  .g-input { min-height: 36px; padding: 7px 10px; }
  .g-main { order: 0; padding: 16px 22px 0; }
  .g-chat { order: 0; border-bottom: 0; border-left: 1px solid var(--g-line); }
}
@container (min-width: 960px) {
  .g-app { grid-template-columns: 164px minmax(0, 1fr) 290px; }
  .g-nav { font-size: 12.5px; white-space: nowrap; }
  .g-rail { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--g-rail); border-right: 1px solid var(--g-line); }
}
.gv-screen.is-anim [data-at] { transition: opacity 420ms var(--g-ease), transform 420ms var(--g-ease), filter 600ms var(--g-ease); }
.gv-screen.is-anim [data-at]:not(.is-in) { opacity: 0; transform: translateY(6px); }
.gv-screen.is-anim .g-input__text.is-in { display: inline; }
.gv-screen.is-anim .g-input__text, .gv-screen.is-anim .g-input__text:not(.is-in) { opacity: 1; transform: none; }
.gv-screen.is-anim .g-send:not(.is-in) { opacity: 1; transform: none; }
.gv-screen.is-anim .g-send.is-in { background: var(--g-green-ink); transform: scale(0.94); }
.gv-screen.is-anim .g-chip--pick:not(.is-in) { opacity: 1; transform: none; background: var(--g-surface); border-color: var(--g-line); color: var(--g-ink); font-weight: 400; }
.gv-screen.is-anim .g-chip--pick:not(.is-in) .g-tick { display: none; }
.gv-screen.is-anim .g-t[data-type]:not(.is-in) { transform: none; }
.gv-screen.is-anim .g-pop { transition: opacity 700ms var(--g-ease), filter 900ms var(--g-ease), transform 900ms var(--g-ease); }
.gv-screen.is-anim .g-pop:not(.is-in) { opacity: 0; filter: blur(10px); transform: scale(0.97); }
@keyframes g-in { from { opacity: 0; transform: translateY(6px); } }
.gv-screen.is-anim .g-chat__body > [data-at]:not(.is-in) { display: none; }
.gv-screen.is-anim .g-chat__body > .is-in { animation: g-in 420ms var(--g-ease) both; }
.gv-screen.is-setup * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .gv-screen * { transition: none !important; animation: none !important; } }
.wrap { max-width: 1120px; }
.hero--screen { padding-block: var(--space-4) var(--space-12); gap: var(--space-3); }
.hero--screen > h1 { font-size: clamp(26px, 3.6vw, 42px); max-width: none; }
.hero--screen > .lead { max-width: none; font-size: clamp(16px, 1.5vw, 19px); }
.gv-screen { --g-above: 336px; }
@media (min-width: 720px) and (max-height: 780px) {
  .top { padding-block: var(--space-2) 0; }
  .hero--screen { padding-block: var(--space-2) var(--space-12); gap: var(--space-2); }
  .hero--screen > h1 { font-size: clamp(26px, 2.6vw, 34px); }
  .hero--screen > .lead { font-size: 16px; }
  .gv-screen { margin-top: var(--space-3); --g-above: 248px; }
}
@container (min-width: 720px) {
  @media (max-height: 679px) {
    .g-why .ow__tip--pin { max-width: none; width: max-content; }
    .g-why .ow__tip--pin .ow__q { display: inline; margin: 0; }
    .g-why .ow__tip--pin .ow__q::before { content: " · "; }
    .gv-screen .g-pop { --pop-k: 256px; }
  }
}
@media (min-width: 720px) and (max-height: 640px) {
  .gv-screen .g-pop { --pop-k: 250px; }
  .gv-screen .g-main { padding-top: 10px; }
}
@media (max-width: 719px) {
  .wrap { padding-inline: 20px; }
  .top { padding-block: var(--space-2) 0; }
  .hero--screen { padding-block: var(--space-3) var(--space-12); gap: var(--space-3); }
  .hero--screen > h1 { font-size: 24px; }
  .hero--screen > .lead { font-size: 15.5px; line-height: 1.5; }
  .gv-screen { margin-top: var(--space-4); }
}
.hero--screen > .follow { width: 100%; margin: var(--space-8) 0 0; }
.follow { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.follow__line { margin: 0; font-size: var(--type-body); line-height: var(--leading-ui); color: var(--gv-text); }
@media (max-width: 559px) { .follow__btn { width: 100%; } }
@media (min-width: 720px) and (max-height: 600px) {
  .hero--screen { padding-block: var(--space-1, 4px) var(--space-12); }
  .hero--screen > h1 { font-size: 24px; }
  .gv-screen { margin-top: var(--space-2); --g-above: 210px; }
  .ow__tip--pin { font-size: 11.5px; }
  .g-pop { top: 44px; gap: 2px; }
  .gv-screen .g-pop::before { inset: -6px -6% -6px; }
  .g-pop__main { font-size: 19px; }
  .g-pop__soon { font-size: 15px; }
  .g-chat__body { gap: 6px; padding: 10px 12px; }
  .g-ask { padding: 7px 9px; gap: 5px; }
  .g-ask__q { font-size: 12.5px; }
  .g-chip { min-height: 26px; padding: 3px 8px; font-size: 12px; }
}