@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-Regular-core.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-Medium-core.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Sunghyun Sans"; src: url("/fonts/SunghyunSans-SemiBold-core.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* Better Design tokens, copied from packages/web/src/app/globals.css. */
:root {
  color-scheme: light dark;
  --background: oklch(0.957 0.008 85);
  --foreground: oklch(0.31 0.006 75);
  --card: oklch(1 0 0);
  --primary: oklch(0.235 0.004 75);
  --primary-foreground: oklch(0.985 0.003 90);
  --secondary: oklch(0.93 0.012 86);
  --secondary-foreground: oklch(0.31 0.006 75);
  --muted: oklch(0.94 0.009 86);
  --muted-foreground: oklch(0.51 0.009 80);
  --accent: oklch(0.915 0.013 86);
  --accent-foreground: oklch(0.31 0.006 75);
  --destructive: oklch(0.63 0.235 32);
  --border: oklch(0.895 0.01 85);
  --input: oklch(0.99 0.003 88);
  --ring: oklch(0.46 0.17 248);
  --success-surface: oklch(0.93 0.055 150);
  --success-ink: oklch(0.4 0.12 150);
  --shadow-xs: 0 0.0625rem 0.125rem 0 oklch(0 0 0 / 0.05);
  --shadow-sm: 0 0.0625rem 0.1875rem 0 oklch(0 0 0 / 0.08), 0 0.0625rem 0.125rem -0.0625rem oklch(0 0 0 / 0.08);
  --shadow-card: 0 0 0 0.0625rem oklch(0.3 0.01 75 / 0.04), 0 0.125rem 0.375rem -0.0625rem oklch(0.3 0.01 75 / 0.05), 0 0.5rem 1.5rem -0.5rem oklch(0.3 0.01 75 / 0.07);
  /* --radius is the brand card radius; the app's rounded-lg and rounded-md derive from it. */
  --radius: 1.5rem;
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 0.125rem);
  --brand-x: oklch(0 0 0);
  --brand-linkedin: oklch(0.516 0.163 254.7);
  --brand-whatsapp: oklch(0.766 0.188 149.6);
  /* The logo blue, darkened in light mode so the link text keeps its contrast. */
  --brand-logo: oklch(0.55 0.2 262);
  --font-sans: "Sunghyun Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0rem);
  --safe-right: env(safe-area-inset-right, 0rem);
  --safe-bottom: env(safe-area-inset-bottom, 0rem);
  --safe-left: env(safe-area-inset-left, 0rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: oklch(0.2 0.009 70);
    --foreground: oklch(0.94 0.009 85);
    --card: oklch(0.245 0.009 70);
    --primary: oklch(0.94 0.012 86);
    --primary-foreground: oklch(0.22 0.006 70);
    --secondary: oklch(0.29 0.012 72);
    --secondary-foreground: oklch(0.91 0.009 85);
    --muted: oklch(0.27 0.009 72);
    --muted-foreground: oklch(0.72 0.009 82);
    --accent: oklch(0.32 0.012 72);
    --accent-foreground: oklch(0.96 0.007 86);
    --destructive: oklch(0.68 0.21 32);
    --border: oklch(0.34 0.01 72);
    --input: oklch(0.27 0.009 72);
    --ring: oklch(0.78 0.13 248);
    --success-surface: oklch(0.3 0.045 150);
    --success-ink: oklch(0.82 0.13 150);
    --shadow-xs: 0 0.0625rem 0.125rem 0 oklch(0 0 0 / 0.3);
    --shadow-sm: 0 0.0625rem 0.1875rem 0 oklch(0 0 0 / 0.3), 0 0.0625rem 0.125rem -0.0625rem oklch(0 0 0 / 0.3);
    --shadow-card: 0 0 0 0.0625rem oklch(1 0 0 / 0.05), 0 0.5rem 1.5rem -0.5rem oklch(0 0 0 / 0.28);
    --brand-x: oklch(1 0 0);
    --brand-logo: oklch(0.68 0.17 262);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.5 var(--font-sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
h1, h2, p { margin: 0; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-header, .app {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-left: calc(1rem + var(--safe-left));
  padding-right: calc(1rem + var(--safe-right));
}
.site-header { padding-top: calc(0.5rem + var(--safe-top)); padding-bottom: 0.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; min-height: 2.75rem; }
.brand img { border-radius: 0.5rem; }

.site-header, .app { max-width: 37.5rem; }
.app { display: grid; gap: 1rem; padding-bottom: calc(6rem + var(--safe-bottom)); }
.panel { display: grid; gap: 1rem; align-content: start; min-width: 0; outline: none; }

.hero, .share { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 1.5rem; }
.hero { display: grid; gap: 0.75rem; }
.lead { color: var(--muted-foreground); text-wrap: pretty; }
.intro { position: relative; z-index: 3; }
/* "this product": a dotted link that shows a small preview of the landing page on hover or focus. */
.peek { position: relative; color: var(--brand-logo); font-weight: 500; text-decoration: underline dotted; text-decoration-thickness: 0.09em; text-underline-offset: 0.2em; }
.peek-card { position: absolute; left: 50%; top: calc(100% + 0.625rem); z-index: 20; width: 18rem; padding: 0.375rem; border-radius: 1rem; background: var(--card); box-shadow: 0 1rem 2rem -0.5rem oklch(0 0 0 / 0.35), 0 0 0 0.0625rem oklch(0.3 0.01 75 / 0.1); opacity: 0; visibility: hidden; transform: translate(-50%, -0.25rem) rotate(0deg) scale(0.97); transform-origin: top center; transition: opacity 160ms, transform 160ms, visibility 0s 160ms; pointer-events: none; }
.peek-card img { display: block; width: 100%; height: auto; border-radius: 0.625rem; }
.peek-caption { display: block; padding: 0.375rem 0.25rem 0.125rem; font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; }
.peek:hover .peek-card, .peek:focus-visible .peek-card { opacity: 1; visibility: visible; transform: translate(-50%, 0) rotate(-3deg) scale(1); transition: opacity 160ms, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (hover: none) { .peek-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .peek-card { transition: none; } }

/* Button, from packages/web/src/components/ui/button.tsx: default and secondary variants, pill size. */
.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: transform 150ms, color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms, opacity 150ms;
}
.button svg { width: 1rem; height: 1rem; flex: none; fill: currentColor; pointer-events: none; }
.button:active { transform: scale(0.96); }
.button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); }
.button:disabled { pointer-events: none; opacity: 0.5; }
.button-default { background: var(--primary); color: var(--primary-foreground); }
.button-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.button-pill { height: 2.75rem; gap: 0.375rem; padding: 0 1rem; }
@media (hover: hover) and (pointer: fine) {
  .button-default:hover { background: color-mix(in oklab, var(--primary) 90%, transparent); }
  .button-secondary:hover { background: var(--accent); color: var(--accent-foreground); }
}
.button-default:disabled { opacity: 0.5; }
.button[aria-busy="true"] { opacity: 0.8; cursor: progress; }
.spinner { display: none; width: 1rem; height: 1rem; border-radius: 50%; border: 0.125rem solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; }
.button[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Input, from packages/web/src/components/ui/input.tsx, at 2.75rem tall so a thumb can hit it. */
.input {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 2.75rem;
  padding: 0.25rem 0.75rem;
  border: 0.0625rem solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 1rem;
  box-shadow: var(--shadow-xs);
  outline: none;
  transition: color 150ms, box-shadow 150ms;
}
.input::placeholder { color: var(--muted-foreground); }
.input::selection { background: var(--primary); color: var(--primary-foreground); }
.input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); }
.input[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--destructive) 20%, transparent); }
.input:disabled { cursor: not-allowed; opacity: 0.5; }
@media (prefers-color-scheme: dark) { .input[aria-invalid="true"] { box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--destructive) 40%, transparent); } }
select.input { appearance: none; padding-right: 2rem; background-image: url("/media/chevron.svg"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 0.75rem; }


.signup { display: grid; gap: 0.5rem; }
.field { display: grid; gap: 0.5rem; }
.field-error { color: var(--destructive); font-size: 0.875rem; }
.privacy { color: var(--muted-foreground); font-size: 0.8125rem; text-wrap: pretty; }

/* Phone input, after the shadcn phone input: an outline country button joined to the number field. */
.phone-input { display: flex; min-width: 0; }
.phone-input .country-native { width: 9rem; flex: none; border-start-end-radius: 0; border-end-end-radius: 0; }
.phone-input .phone-number { border-start-start-radius: 0; border-end-start-radius: 0; margin-left: -0.0625rem; }
.country-button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 0.0625rem solid var(--border);
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  outline: none;
  transition: background-color 150ms, box-shadow 150ms;
}
.country-button img { width: 1.5rem; height: 1rem; border-radius: 0.125rem; object-fit: cover; background: color-mix(in oklab, var(--foreground) 20%, transparent); }
.country-button .chevron { width: 0.75rem; height: 0.75rem; color: var(--muted-foreground); }
.country-button:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) { .country-button:hover { background: var(--accent); } }
@media (prefers-color-scheme: dark) { .country-button { border-color: var(--input); background: var(--card); } }
.phone-number:focus-visible { position: relative; z-index: 1; }

/* Messaging service for the phone number: a two-way toggle that appears once a number is typed. */
.phone-channels { display: flex; gap: 0.25rem; margin: 0; padding: 0.25rem; border: 0.0625rem solid var(--input); border-radius: 9999px; background: var(--background); min-width: 0; animation: channels-in 200ms ease-out; }
.phone-channels[hidden] { display: none; }
@keyframes channels-in { from { opacity: 0; transform: translateY(-0.25rem); } }
.channel-option { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 0.75rem; border-radius: 9999px; font-size: 0.9375rem; font-weight: 500; color: var(--muted-foreground); cursor: pointer; transition: background 150ms, color 150ms; }
.channel-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.channel-option:has(input:checked) { background: var(--foreground); color: var(--background); }
.channel-option:has(input:focus-visible) { box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); }
@media (hover: hover) and (pointer: fine) { .channel-option:not(:has(input:checked)):hover { background: var(--accent); color: var(--accent-foreground); } }
@media (prefers-reduced-motion: reduce) { .phone-channels, .channel-option { animation: none; transition: none; } }

/* Checkbox, from packages/web/src/components/ui/checkbox.tsx, on a native input, with the outline
   from the app's contrast fix (muted-foreground at 80%, over 3:1 on white). */
.checkbox {
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border: 0.0625rem solid color-mix(in oklab, var(--muted-foreground) 80%, transparent);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
  outline: none;
  cursor: pointer;
  transition: color 150ms, box-shadow 150ms, transform 150ms;
}
.checkbox::before {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background: currentColor;
  mask: url("/media/check.svg") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 100ms ease-out;
}
.checkbox:checked { background: var(--primary); border-color: var(--primary); }
.checkbox:checked::before { clip-path: inset(0 0 0 0); transition-duration: 300ms; }
.checkbox:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); }
.checkbox[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--destructive) 20%, transparent); }
.checkbox:disabled { cursor: not-allowed; opacity: 0.5; }
.checkbox:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .checkbox:hover { transform: scale(1.05); } }
@media (prefers-color-scheme: dark) { .checkbox:not(:checked) { background: color-mix(in oklab, var(--input) 30%, transparent); } }
@media (prefers-reduced-motion: reduce) { .checkbox, .checkbox::before { transition: none; } .checkbox:active { transform: none; } }

/* Country picker: a dropdown under the button on a desktop, a bottom sheet on a phone.
   One modal <dialog>, so focus stays inside and Esc closes it. */
.country-picker {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 18.75rem;
  max-width: none;
  max-height: 20rem;
  padding: 0.5rem;
  border: 0.0625rem solid var(--border);
  /* The pill rows plus the 0.5rem padding, so the corners stay concentric. */
  border-radius: calc(1.375rem + 0.5rem);
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 0.75rem 2rem -0.5rem oklch(0 0 0 / 0.2);
  overflow: hidden;
  flex-direction: column;
  gap: 0.5rem;
}
.country-picker[open] { display: flex; }
.country-picker::backdrop { background: transparent; }
.sheet-head { display: grid; gap: 0.5rem; flex: none; }
.sheet-handle { display: none; }
.country-picker .input { height: 2.75rem; }
.country-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.country-list li[role="option"] { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 9999px; cursor: pointer; font-size: 0.9375rem; }
.country-list li img { width: 1.5rem; height: 1rem; border-radius: 0.125rem; object-fit: cover; flex: none; background: color-mix(in oklab, var(--foreground) 20%, transparent); }
.country-list .divider { height: 0.0625rem; margin: 0.25rem 0.75rem; background: var(--border); }
.country-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-dial { color: var(--muted-foreground); font-size: 0.875rem; }
.country-list li.is-active { background: var(--accent); }
.country-list li[aria-selected="true"] { font-weight: 600; }
@media (max-width: 63.99rem) {
  .country-picker {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 80dvh;
    padding: 0 calc(0.75rem + var(--safe-right)) calc(0.75rem + var(--safe-bottom)) calc(0.75rem + var(--safe-left));
    border-width: 0.0625rem 0 0;
    border-radius: 1.875rem 1.875rem 0 0;
  }
  .country-picker::backdrop { background: oklch(0 0 0 / 0.3); backdrop-filter: blur(0.125rem); }
  /* The grab handle: a 36 by 5 pill with a 44px hit area that closes the sheet. */
  .sheet-handle { display: grid; place-items: center; width: 100%; height: 2.75rem; margin-bottom: -0.5rem; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 2.25rem; height: 0.3125rem; border-radius: 9999px; background: color-mix(in oklab, var(--foreground) 25%, transparent); }
  .sheet-handle:focus-visible span { outline: 0.125rem solid var(--ring); outline-offset: 0.25rem; }
  .country-list li[role="option"] { min-height: 3.25rem; font-size: 1rem; }
  .country-picker.is-entering { animation: sheet-rise 320ms cubic-bezier(0.32, 0.72, 0, 1); }
}
@media (max-width: 63.99rem) and (prefers-color-scheme: dark) { .country-picker::backdrop { background: oklch(0 0 0 / 0.9); } }
@keyframes sheet-rise { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .country-picker.is-entering { animation: none; } }

.trap { position: absolute; left: -100vw; width: 0.0625rem; height: 0.0625rem; overflow: hidden; }
.signup .button-default { width: 100%; }

.joined { display: flex; gap: 0.75rem; padding: 1rem; border-radius: 1rem; background: var(--success-surface); color: var(--success-ink); outline: none; }
.joined-icon { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; margin-top: 0.125rem; }
.joined-title { font-weight: 600; }
.joined-again { margin-top: 0.75rem; background: oklch(1 0 0); color: oklch(0.2 0.01 75); }
@media (hover: hover) and (pointer: fine) { .joined-again:hover { background: oklch(0.94 0.01 85); } }
/* The confirmation pops in, its check bounces, and a short confetti burst fires from it. */
.joined { position: relative; animation: joined-in 420ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.joined-icon { animation: joined-check 520ms 120ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes joined-in { from { opacity: 0; transform: translateY(0.5rem) scale(0.96); } }
@keyframes joined-check { from { transform: scale(0) rotate(-30deg); } }
.confetti { position: absolute; left: 1.625rem; top: 1.625rem; width: 0.5rem; height: 0.75rem; border-radius: 0.125rem; pointer-events: none; animation: confetti-fly 900ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes confetti-fly { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .joined, .joined-icon { animation: none; } .confetti { display: none; } }

.live-actions { display: grid; gap: 0.5rem; }
.live-actions .logo { width: 1rem; height: 1rem; }

.share { display: grid; gap: 0.75rem; }
.share h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.014em; }
.share-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
/* Icon on top, label centred under it: every icon sits in the same 1.75rem box, so icons and labels line up across the row. */
.share-button { display: grid; grid-template-rows: 1.75rem 1.25rem; justify-items: center; align-content: center; gap: 0.5rem; height: auto; min-height: 5rem; padding: 0.5rem 0.25rem; border-radius: 1rem; font-weight: 500; font-size: 0.8125rem; line-height: 1.25rem; }
.share-button svg { width: 1.75rem; height: 1.75rem; }
.share-button .whatsapp { fill: var(--brand-whatsapp); }
.share-button .neutral { padding: 0.1875rem; fill: currentColor; }


.notice { max-width: 32rem; margin: 4rem auto; padding: 1.5rem; display: grid; gap: 1rem; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.notice h1 { font-size: 1.5rem; font-weight: 600; }

@media (min-width: 30rem) {
  .live-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.intro { display: grid; gap: 0.5rem; }
.page-title { font-size: 1.875rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.021em; text-wrap: balance; }

/* Tab switch, after the sticker-drop route page: a pill under the title, pinned while the posts scroll.
   A phone gets three tabs; a desktop shows the form beside the posts and keeps only X and LinkedIn. */
/* A phone gets the sticker-drop route page's floating pill at the bottom, in thumb reach and above the home indicator. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; padding: 0.5rem calc(1rem + var(--safe-right)) calc(0.5rem + var(--safe-bottom)) calc(1rem + var(--safe-left)); pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; width: 100%; max-width: 24rem; padding: 0.3125rem; border-radius: 9999px; background: color-mix(in oklab, var(--card) 94%, transparent); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); box-shadow: 0 0.625rem 1.5rem -0.5rem oklch(0 0 0 / 0.25), 0 0 0 0.0625rem oklch(0.3 0.01 75 / 0.06); }
.ds-tabs { position: relative; flex: 1; display: flex; gap: 0.25rem; }
/* The selected pill slides between tabs, like the app's tabs (a spring at stiffness 520, damping 46). */
.ds-tab-indicator { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 9999px; background: var(--foreground); pointer-events: none; }
.ds-tab-indicator.is-ready { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), width 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.ds-tabs .ds-tab { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ds-tab-indicator.is-ready { transition: none; } }
/* The sticker above the Notify me tab on phones: a comic speech bubble and a finger pointing down at the tab. */
.pill { position: relative; }
.nudge { position: absolute; left: 0.25rem; bottom: calc(100% + 0.25rem); }
.nudge-open { display: grid; justify-items: start; gap: 0.125rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; transform: rotate(-3deg); transform-origin: bottom left; }
.nudge[hidden] { display: none; }
/* The close button: a small comic sticker of its own on the bubble's top-right corner. */
.nudge-close { position: absolute; top: -0.75rem; right: -0.75rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0.125rem solid oklch(0.15 0.01 75); border-radius: 9999px; background: oklch(1 0 0); color: oklch(0.15 0.01 75); box-shadow: 0.125rem 0.125rem 0 oklch(0.15 0.01 75); cursor: pointer; transform: rotate(-3deg); }
.nudge-close::before { content: ""; position: absolute; inset: -0.5rem; }
.nudge-close svg { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; }
.nudge-close:active { transform: rotate(-3deg) translate(0.0625rem, 0.0625rem); box-shadow: 0.0625rem 0.0625rem 0 oklch(0.15 0.01 75); }
.nudge-bubble { position: relative; padding: 0.5rem 0.875rem; border: 0.125rem solid oklch(0.15 0.01 75); border-radius: 1.25rem; background: oklch(0.97 0.06 95); color: oklch(0.15 0.01 75); font-weight: 700; font-size: 0.9375rem; line-height: 1.25; max-width: 15rem; text-wrap: balance; text-align: left; box-shadow: 0.1875rem 0.1875rem 0 oklch(0.15 0.01 75); }
.nudge-finger { margin-left: 2.25rem; width: 2.5rem; height: auto; filter: drop-shadow(0.125rem 0.125rem 0 oklch(0.15 0.01 75 / 0.6)); animation: nudge-bob 1.1s ease-in-out infinite; }
@keyframes nudge-bob { 50% { transform: translateY(0.3rem); } }
@media (prefers-reduced-motion: reduce) { .nudge-finger { animation: none; } }
.ds-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  outline: none;
  transition: background-color 150ms, color 150ms;
}
.ds-tab svg, .ds-tab .logo { flex: none; width: 1.125rem; height: 1.125rem; }
.ds-tab[aria-selected="true"] { background: transparent; color: var(--background); transition: color 200ms; }
#tab-x[aria-selected="true"] .logo { fill: currentColor; }
.ds-tab:focus-visible { box-shadow: 0 0 0 0.1875rem color-mix(in oklab, var(--ring) 50%, transparent); }
#tab-x .logo { fill: var(--brand-x); }
#tab-linkedin .logo { fill: var(--brand-linkedin); }
@media (hover: hover) and (pointer: fine) { .ds-tab[aria-selected="false"]:hover { background: var(--accent); color: var(--accent-foreground); } }

@media (min-width: 64rem) {
  .site-header, .app { max-width: 72rem; padding-left: calc(1.5rem + var(--safe-left)); padding-right: calc(1.5rem + var(--safe-right)); }
  .site-header { padding-block: 1.5rem 0.5rem; }
  .app {
    display: grid;
    grid-template-columns: 26rem minmax(0, 37.5rem);
    grid-template-areas: "title tabs" "title posts" "form posts";
    grid-template-rows: auto auto 1fr;
    justify-content: space-between;
    column-gap: 3rem;
    row-gap: 1rem;
    align-items: start;
  }
  .intro { grid-area: title; align-self: start; }
  .page-title { font-size: 2.25rem; }
  .tabbar { grid-area: tabs; align-self: start; justify-content: flex-start; position: static; padding: 0; pointer-events: auto; }
  .pill { max-width: 20rem; background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-sm), 0 0 0 0.0625rem oklch(0.3 0.01 75 / 0.06); }
  .ds-tab { min-height: 2.75rem; }

  #tab-notify { display: none; }
  .nudge { display: none; }
  #panel-notify { grid-area: form; position: sticky; top: 1.5rem; }
  /* The form is always on screen beside the posts. */
  #panel-notify[hidden] { display: grid !important; }
  #panel-x, #panel-linkedin { grid-area: posts; }
  .app { padding-bottom: 3rem; }
  .live-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .country-button { transition: none; }
  .button:active { transform: none; }
  .spinner { animation-duration: 2s; }
}