@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Schibsted+Grotesk:wght@400..800&display=swap");

/* Talk To Gina components. Every value comes from tokens.css. */

html, body { background: var(--surface-000); color: var(--ink); }
body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.tg-stage { padding: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.tg-stage--col { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.tg-stage--mist { background: var(--surface-100); }

/* Label: uppercase mono eyebrow */
.tg-label { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.tg-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin: 0; }

/* Button: black pill first */
.tg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-pill); border: 1px solid transparent; font: 600 15px/1 var(--font-body); cursor: pointer; text-decoration: none; transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.tg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tg-btn:active { transform: translateY(1px); }
.tg-btn--primary { background: var(--surface-inverse); color: var(--on-inverse); }
.tg-btn--primary:hover { background: var(--accent); color: var(--on-accent); }
.tg-btn--accent { background: var(--accent); color: var(--on-accent); }
.tg-btn--accent:hover { background: var(--accent-strong); }
.tg-btn--secondary { background: var(--surface-000); color: var(--ink); border-color: var(--hairline-strong); }
.tg-btn--secondary:hover { background: var(--surface-200); }
.tg-btn--ghost { background: transparent; color: var(--accent); padding: 0 var(--space-3); }
.tg-btn--ghost:hover { background: var(--accent-soft); }
.tg-btn--glow { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-md); }
.tg-btn--sm { height: 34px; padding: 0 var(--space-4); font-size: 14px; }
.tg-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Chip */
.tg-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-pill); font: 500 12px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; background: var(--surface-200); color: var(--ink); border: 1px solid var(--hairline); }
.tg-chip--accent { background: var(--accent-soft); color: var(--accent-strong); border-color: transparent; }
.tg-chip--live { background: var(--live-soft); color: var(--live-ink); border-color: transparent; }
.tg-chip--alert { background: var(--alert-soft); color: var(--alert-ink); border-color: transparent; }
.tg-chip--cream { background: var(--cream); color: var(--on-cream); border-color: transparent; }
.tg-chip--select { cursor: pointer; }
.tg-chip--select[aria-pressed="true"] { background: var(--surface-inverse); color: var(--on-inverse); }
.tg-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.tg-dot--live { background: var(--live); box-shadow: var(--glow-live); }
.tg-dot--alert { background: var(--alert); box-shadow: var(--glow-alert); }
.tg-dot--accent { background: var(--accent); box-shadow: var(--glow-sm); }

/* Bento card */
.tg-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tg-card { background: var(--surface-000); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tg-card--mist { background: var(--surface-100); }
.tg-card--inverse { background: var(--surface-inverse); color: var(--on-inverse); border-color: transparent; }
.tg-card--inverse .tg-label { color: var(--on-inverse); opacity: .8; }
.tg-card--cream { background: var(--cream); color: var(--on-cream); border-color: transparent; }
.tg-card--cream .tg-label { color: var(--on-cream); }
.tg-card--wide { grid-column: span 2; }
.tg-card--tall { grid-row: span 2; }
.tg-card h3 { margin: 0; font: 600 20px/1.25 var(--font-body); }
.tg-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.tg-card--inverse p, .tg-card--cream p { color: inherit; }
.tg-numeral { font: 700 56px/1 var(--font-display); letter-spacing: -0.03em; }

/* Gina avatar */
.tg-avatar { --size: 48px; width: var(--size); height: var(--size); border-radius: 50%; background: var(--gina-bg, var(--accent-soft)); display: inline-grid; place-items: center; flex: none; position: relative; overflow: visible; }
.tg-avatar > img.tg-avatar__art { width: 112%; height: 112%; object-fit: contain; border-radius: 0; margin-top: 4%; }
.tg-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.tg-avatar--24 { --size: 24px; } .tg-avatar--32 { --size: 32px; } .tg-avatar--64 { --size: 64px; } .tg-avatar--96 { --size: 96px; } .tg-avatar--128 { --size: 128px; }
.tg-avatar--glow { box-shadow: var(--glow-sm); }
.tg-avatar--working { box-shadow: var(--glow-md); animation: tg-breathe var(--dur-breathe) ease-in-out infinite; }
.tg-avatar--hero { box-shadow: var(--glow-lg); }
.tg-avatar--done { box-shadow: var(--glow-live); }
.tg-avatar--needs { box-shadow: var(--glow-alert); }
.tg-avatar__badge { position: absolute; right: -2px; bottom: -2px; width: 30%; height: 30%; min-width: 10px; min-height: 10px; border-radius: 50%; border: 2px solid var(--surface-000); }
.tg-avatar__badge--live { background: var(--live); } .tg-avatar__badge--alert { background: var(--alert); } .tg-avatar__badge--accent { background: var(--accent); }
@keyframes tg-breathe { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.08); transform: scale(1.04); } }

/* Floating Gina: avatar + what she is doing */
.tg-float { display: inline-flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-4) 6px 6px; background: var(--surface-000); border: 1px solid var(--hairline); border-radius: var(--radius-pill); box-shadow: var(--elev-2); max-width: 380px; }
.tg-float--working { box-shadow: var(--elev-2), var(--glow-md); }
.tg-float--needs { box-shadow: var(--elev-2), var(--glow-alert); }
.tg-float__text { display: flex; flex-direction: column; min-width: 0; }
.tg-float__doing { font: 600 14px/1.3 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-float__meta { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.tg-float__meta--needs { color: var(--alert-ink); }
.tg-float__meta--live { color: var(--live-ink); }
.tg-shimmer { background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--accent) 50%, var(--ink) 60%, var(--ink) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tg-shimmer var(--dur-breathe) linear infinite; }
@keyframes tg-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

/* Color picker */
.tg-picker { background: var(--surface-000); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); width: 320px; box-shadow: var(--elev-2); }
.tg-swatches { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tg-swatch { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(17,17,17,.08); }
.tg-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface-000), 0 0 0 4px var(--ink); }
.tg-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tg-upload { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px dashed var(--hairline-strong); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink-muted); }
.tg-command { font: 400 14px/1.5 var(--font-mono); background: var(--surface-200); color: var(--ink); padding: 2px 8px; border-radius: 6px; }

/* Command bar */
.tg-composer { display: flex; align-items: center; gap: var(--space-3); height: 56px; padding: 0 8px 0 var(--space-5); border-radius: var(--radius-pill); background: var(--surface-000); border: 1px solid var(--hairline-strong); width: 100%; max-width: 560px; box-sizing: border-box; }
.tg-composer:focus-within { border-color: var(--accent); box-shadow: var(--glow-md); }
.tg-composer input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.5 var(--font-body); color: var(--ink); }
.tg-composer input::placeholder { color: var(--ink-muted); }
.tg-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface-inverse); color: var(--on-inverse); cursor: pointer; }
.tg-iconbtn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Timeline (Today with Gina) */
.tg-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tg-tl { display: grid; grid-template-columns: 64px 20px 1fr; gap: var(--space-3); align-items: start; }
.tg-tl__time { font: 500 12px/20px var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); text-align: right; }
.tg-tl__rail { position: relative; height: 100%; display: flex; justify-content: center; }
.tg-tl__rail::before { content: ""; position: absolute; top: 14px; bottom: -6px; width: 2px; background: var(--hairline); }
.tg-tl:last-child .tg-tl__rail::before { display: none; }
.tg-tl__node { position: relative; margin-top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--hairline-strong); }
.tg-tl__node--live { background: var(--live); box-shadow: var(--glow-live); }
.tg-tl__node--now { background: var(--accent); box-shadow: var(--glow-md); animation: tg-breathe var(--dur-breathe) ease-in-out infinite; }
.tg-tl__node--alert { background: var(--alert); box-shadow: var(--glow-alert); }
.tg-tl__body { padding-bottom: var(--space-5); }
.tg-tl__title { font-weight: 600; font-size: 15px; line-height: 1.4; }
.tg-tl__sub { font-size: 14px; color: var(--ink-muted); }

/* Profile header */
.tg-profile { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-100); }
.tg-profile h2 { margin: 0; font: 700 36px/1.1 var(--font-display); letter-spacing: -0.02em; }
.tg-profile p { margin: 4px 0 0; color: var(--ink-muted); }

/* Connection diagram */
.tg-conn { position: relative; background: var(--surface-100); border-radius: var(--radius-lg); padding: var(--space-6); }
.tg-conn svg { display: block; width: 100%; height: auto; aspect-ratio: 820 / 400; overflow: visible; }
.tg-conn .line { fill: none; stroke: var(--hairline-strong); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.tg-conn .line--live { stroke: var(--accent); stroke-dasharray: none; opacity: .35; }
.tg-conn .spark { fill: var(--accent); filter: drop-shadow(0 0 4px var(--glow-core)); }
.tg-conn .spark--live { fill: var(--live); }
.tg-conn .tile rect { fill: var(--surface-000); stroke: var(--hairline); }
.tg-conn .tile text { fill: var(--ink); font: 600 14px var(--font-body); }
.tg-conn .tile .sub { fill: var(--ink-muted); font: 500 12px var(--font-mono); letter-spacing: .05em; }
.tg-conn .hub-halo { fill: var(--glow-core); opacity: .18; }
.tg-conn .hub { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.tg-conn .ok { fill: var(--live); }

/* Connection tile */
.tg-tile { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); min-width: 220px; }
.tg-tile--live { box-shadow: var(--glow-live); border-color: transparent; }
.tg-tile__logo { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface-200); font: 700 15px/1 var(--font-display); color: var(--ink); }
.tg-tile__name { font-weight: 600; }
.tg-tile__state { font: 500 12px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.tg-tile--live .tg-tile__state { color: var(--live-ink); }

/* Inbox row */
.tg-list { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-000); }
.tg-row { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--hairline); }
.tg-row:first-child { border-top: 0; }
.tg-row:hover { background: var(--surface-100); }
.tg-row--unread .tg-row__name::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.tg-row__initials { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-200); font: 600 14px/1 var(--font-body); color: var(--ink); }
.tg-row__name { font-weight: 600; font-size: 15px; }
.tg-row__preview { font-size: 14px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row__main { min-width: 0; }
.tg-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }

/* Progress + onboarding */
.tg-progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-200); overflow: hidden; }
.tg-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: var(--glow-sm); }
.tg-progress--live > span { background: var(--live); box-shadow: var(--glow-live); }
.tg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tg-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-000); }
.tg-step__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 14px/1 var(--font-mono); background: var(--surface-200); color: var(--ink); flex: none; }
.tg-step--done .tg-step__n { background: var(--live-soft); color: var(--live-ink); }
.tg-step--now { border-color: var(--accent); box-shadow: var(--glow-sm); }
.tg-step--now .tg-step__n { background: var(--accent); color: var(--on-accent); }
.tg-step__title { font-weight: 600; flex: 1; }
.tg-step--done .tg-step__title { color: var(--ink-muted); text-decoration: line-through; }

/* Approval card */
.tg-approve { border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--surface-000); overflow: hidden; max-width: 460px; box-shadow: var(--elev-1); }
.tg-approve__band { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); background: var(--alert-soft); color: var(--alert-ink); font: 500 12px/1.6 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }
.tg-approve__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.tg-approve__body h3 { margin: 0; font: 600 20px/1.25 var(--font-body); }
.tg-approve__quote { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--ink); font-size: 15px; }
.tg-approve__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Galleries */
.tg-gallery { display: grid; align-items: start; grid-auto-rows: min-content; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-4); }
.tg-gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-2); border-radius: var(--radius-md); background: var(--surface-100); }
.tg-gallery img { display: block; }
.tg-gallery figcaption { font: 500 12px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
.tg-sticker { position: relative; display: inline-block; }
.tg-sticker--glow img { border-radius: 50%; box-shadow: var(--glow-md); }

/* Glow specimens */
.tg-glows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-6); padding: var(--space-6); }
.tg-glow { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.tg-glow__orb { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); }
.tg-glow__orb--live { background: var(--live); } .tg-glow__orb--alert { background: var(--alert); } .tg-glow__orb--cream { background: var(--cream); }

/* Print sheet */
.tg-sheet { width: 100%; max-width: 640px; aspect-ratio: 8.5 / 11; background: #ffffff; color: #132642; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 48px; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--elev-2); }
.tg-sheet__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-3); border-bottom: 1px solid #dfe7f2; }
.tg-sheet h1 { margin: 0; font: 700 40px/1 var(--font-display); letter-spacing: -0.02em; }
.tg-sheet .tg-label { color: #4a5b75; }
.tg-sheet__foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid #dfe7f2; }
.tg-mark-hl { background: linear-gradient(transparent 55%, var(--cream) 50%, var(--cream) 92%, transparent 92%); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tg-avatar--working, .tg-tl__node--now, .tg-shimmer { animation: none; }
  .tg-shimmer { color: var(--ink); background: none; }
  .tg-conn animateMotion { display: none; }
}
.tg-gallery--paper figure { background: var(--surface-100); }
.tg-gallery--paper figcaption { color: var(--ink-muted); }

/* The real mascot: a 3D cutout. Glow follows her shape with drop-shadow. */
.tg-mascot { display: block; height: auto; }
.tg-mascot--glow { filter: drop-shadow(0 0 10px var(--glow-core)) drop-shadow(0 0 24px var(--glow-core)); }
.tg-mascot--working { filter: drop-shadow(0 0 10px var(--glow-core)) drop-shadow(0 0 24px var(--glow-core)); animation: tg-breathe var(--dur-breathe) ease-in-out infinite; }
.tg-mascot--done { filter: drop-shadow(0 0 10px var(--live)) drop-shadow(0 0 22px var(--live)); }
.tg-mascot--needs { filter: drop-shadow(0 0 10px var(--alert)) drop-shadow(0 0 22px var(--alert)); }
.tg-poses { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--space-4); align-items: start; grid-auto-rows: min-content; }
.tg-poses figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--surface-100); }
.tg-poses img { width: 112px; height: 112px; object-fit: contain; }
.tg-poses figcaption { font: 500 12px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .tg-mascot--working { animation: none; } }

/* Expressions: Gina's motion states, built on the real renders */
.tg-exprs { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-5); align-items: start; width: 100%; }
.tg-expr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.tg-expr__stage { position: relative; width: 150px; height: 170px; display: grid; place-items: center; }
.tg-expr__art { position: relative; z-index: 1; width: 120px; height: auto; transform-origin: 50% 90%; }
.tg-expr__shadow { position: absolute; bottom: 4px; left: 50%; width: 70px; height: 10px; margin-left: -35px; border-radius: 50%; background: var(--ink); opacity: .12; filter: blur(3px); }
.tg-expr__doing { font: var(--type-body-s, 500 14px/1.4 'Schibsted Grotesk', sans-serif); color: var(--ink); }
.tg-expr figcaption .tg-label { display: block; margin-bottom: 2px; color: var(--ink-muted); }

/* floating: idle, available */
.tg-expr--floating .tg-expr__art { animation: tg-float 3.2s ease-in-out infinite; }
.tg-expr--floating .tg-expr__shadow { animation: tg-float-shadow 3.2s ease-in-out infinite; }
@keyframes tg-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes tg-float-shadow { 0%, 100% { transform: scaleX(1); opacity: .14; } 50% { transform: scaleX(.75); opacity: .07; } }

/* think: reading, planning */
.tg-expr--think .tg-expr__art { width: 112px; animation: tg-float 4.8s ease-in-out infinite, tg-lens 2.4s ease-in-out infinite; }
.tg-expr--think .tg-expr__shadow { animation: tg-float-shadow 4.8s ease-in-out infinite; }
@keyframes tg-lens { 0%, 100% { filter: drop-shadow(0 0 4px var(--glow-core)); } 50% { filter: drop-shadow(0 0 8px var(--glow-core)) drop-shadow(0 0 14px var(--glow-core)); } }
.tg-expr__bubbles { position: absolute; z-index: 2; top: -2px; right: -6px; width: 40px; height: 40px; }
.tg-expr__bubbles i { position: absolute; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); opacity: 0; animation: tg-bubble 2.4s ease-out infinite; }
.tg-expr__bubbles i:nth-child(1) { width: 8px; height: 8px; left: 0; bottom: 0; }
.tg-expr__bubbles i:nth-child(2) { width: 12px; height: 12px; left: 10px; bottom: 12px; animation-delay: .3s; }
.tg-expr__bubbles i:nth-child(3) { width: 18px; height: 18px; left: 22px; bottom: 28px; animation-delay: .6s; }
@keyframes tg-bubble { 0% { opacity: 0; transform: scale(.4); } 20%, 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* spinning: running a task */
.tg-expr--spinning .tg-expr__art { width: 84px; animation: tg-breathe var(--dur-breathe) ease-in-out infinite; }
.tg-expr__ring { position: absolute; inset: 15px 5px 15px 5px; width: 140px; height: 140px; margin: auto; }
.tg-expr__ring .track { fill: none; stroke: var(--accent-soft); stroke-width: 6; }
.tg-expr__ring .arc { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--glow-core)); }
.tg-expr__ring .head { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.tg-expr__ring g { transform-origin: 70px 70px; animation: tg-spin 1.2s cubic-bezier(.5, .15, .5, .85) infinite; }
@keyframes tg-spin { to { transform: rotate(360deg); } }

/* hooray: a wish granted */
.tg-expr--hooray .tg-expr__art { animation: tg-hop 2.4s cubic-bezier(.3, .7, .4, 1) infinite; filter: drop-shadow(0 0 12px var(--cream)) drop-shadow(0 0 4px var(--glow-core)); }
.tg-expr--hooray .tg-expr__shadow { animation: tg-hop-shadow 2.4s ease-out infinite; }
@keyframes tg-hop { 0%, 60%, 100% { transform: translateY(0) scale(1, 1); } 6% { transform: translateY(2px) scale(1.06, .94); } 18% { transform: translateY(-22px) scale(.97, 1.04) rotate(-3deg); } 32% { transform: translateY(0) scale(1.04, .96); } 40% { transform: translateY(0) scale(1, 1); } }
@keyframes tg-hop-shadow { 0%, 60%, 100% { transform: scaleX(1); opacity: .14; } 18% { transform: scaleX(.6); opacity: .05; } 32% { transform: scaleX(1.05); opacity: .16; } }
.tg-expr__confetti { position: absolute; z-index: 2; left: 50%; top: 42%; width: 0; height: 0; }
.tg-expr__confetti i { position: absolute; width: 7px; height: 11px; border-radius: 2px; background: var(--c, var(--accent)); box-shadow: inset 0 0 0 1.5px var(--ink-line, transparent); opacity: 0; animation: tg-burst 2.4s cubic-bezier(.15, .7, .35, 1) infinite; }
.tg-expr__confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
@keyframes tg-burst { 0%, 8% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.4); } 14% { opacity: 1; } 55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } 75%, 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 26px)) rotate(var(--r)) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tg-expr__art, .tg-expr__shadow, .tg-expr__bubbles i, .tg-expr__ring g, .tg-expr__confetti i { animation: none !important; }
  .tg-expr__bubbles i { opacity: 1; }
  .tg-expr__ring g { transform: rotate(40deg); }
  .tg-expr__confetti i { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}
@media (max-width: 640px) { .tg-exprs { grid-template-columns: repeat(2, 1fr); } }

/* Expressions, operations row: email and accounting props around the real poses */
.tg-prop { position: absolute; z-index: 2; }
.tg-env { width: 34px; height: 24px; display: block; }
.tg-env rect { fill: #ffffff; stroke: var(--ink); stroke-width: 2; }
.tg-env path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
[data-theme="dark"] .tg-env rect { fill: var(--cream); stroke: #132642; }
[data-theme="dark"] .tg-env path { stroke: #132642; }

/* sending: an envelope flies off */
.tg-expr--sending .tg-expr__art { animation: tg-float 3.2s ease-in-out infinite; }
.tg-expr--sending .tg-prop { left: 92px; top: 70px; animation: tg-send 2.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes tg-send { 0%, 10% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.6); } 22% { opacity: 1; transform: translate(4px, -4px) rotate(-8deg) scale(1); } 70% { opacity: 1; transform: translate(44px, -62px) rotate(-18deg) scale(.8); } 85%, 100% { opacity: 0; transform: translate(56px, -78px) rotate(-22deg) scale(.6); } }

/* inbox zero: the stack drains, a check lands */
.tg-expr--inbox .tg-expr__art { width: 108px; }
.tg-expr--inbox .tg-stack { left: 96px; top: 96px; width: 40px; height: 40px; }
.tg-stack .tg-env { position: absolute; left: 0; animation: tg-drain 3.6s ease-in infinite; }
.tg-stack .tg-env:nth-child(1) { top: 0; animation-delay: 0s; }
.tg-stack .tg-env:nth-child(2) { top: 6px; animation-delay: .5s; }
.tg-stack .tg-env:nth-child(3) { top: 12px; animation-delay: 1s; }
@keyframes tg-drain { 0%, 10% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translate(24px, -10px) rotate(12deg); } }
.tg-check { left: 102px; top: 98px; width: 28px; height: 28px; border-radius: 50%; background: var(--live); color: #fff; display: grid; place-items: center; box-shadow: var(--glow-live); opacity: 0; animation: tg-check 3.6s ease-out infinite; }
@keyframes tg-check { 0%, 52% { opacity: 0; transform: scale(.3); } 62% { opacity: 1; transform: scale(1.15); } 70%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* reconciling: ledger rows tick off */
.tg-expr--reconcile .tg-expr__art { width: 104px; margin-left: -34px; animation: tg-float 4.8s ease-in-out infinite; }
.tg-ledger { right: 0; top: 40px; width: 62px; padding: 7px 6px; border-radius: 8px; background: #ffffff; border: 1.5px solid var(--ink); display: grid; gap: 6px; box-shadow: var(--elev-1); }
[data-theme="dark"] .tg-ledger { background: var(--cream); border-color: #132642; }
.tg-ledger i { display: flex; align-items: center; gap: 4px; height: 7px; }
.tg-ledger i::before { content: ""; flex: 1; height: 3px; border-radius: 2px; background: #c9d3e3; }
.tg-ledger i::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); transform: scale(0); animation: tg-tick 3.2s ease-out infinite; }
.tg-ledger i:nth-child(2)::after { animation-delay: .4s; } .tg-ledger i:nth-child(3)::after { animation-delay: .8s; } .tg-ledger i:nth-child(4)::after { animation-delay: 1.2s; }
@keyframes tg-tick { 0%, 15% { transform: scale(0); } 25%, 85% { transform: scale(1); } 100% { transform: scale(0); } }

/* paid: a receipt gets stamped */
.tg-expr--paid .tg-expr__art { width: 108px; margin-left: -30px; animation: tg-hop 3.2s cubic-bezier(.3, .7, .4, 1) infinite; animation-delay: .5s; }
.tg-receipt { right: 2px; top: 46px; width: 56px; height: 70px; padding: 8px 7px; border-radius: 6px 6px 2px 2px; background: #ffffff; border: 1.5px solid var(--ink); display: grid; align-content: start; gap: 5px; transform: rotate(6deg); }
[data-theme="dark"] .tg-receipt { background: var(--cream); border-color: #132642; }
.tg-receipt i { display: block; height: 3px; border-radius: 2px; background: #c9d3e3; }
.tg-receipt i:nth-child(2) { width: 70%; }
.tg-receipt b { position: absolute; left: 3px; top: 26px; padding: 2px 4px; border: 2px solid var(--live-ink, #157a3d); border-radius: 4px; color: var(--live-ink, #157a3d); font: 700 12px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .05em; transform: rotate(-14deg) scale(2.2); opacity: 0; animation: tg-stamp 3.2s cubic-bezier(.2, .9, .3, 1.2) infinite; }
@keyframes tg-stamp { 0%, 8% { opacity: 0; transform: rotate(-14deg) scale(2.2); } 16%, 85% { opacity: 1; transform: rotate(-14deg) scale(1); } 100% { opacity: 0; transform: rotate(-14deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tg-expr .tg-prop, .tg-stack .tg-env, .tg-check, .tg-ledger i::after, .tg-receipt b { animation: none !important; }
  .tg-expr--sending .tg-prop { transform: translate(30px, -40px) rotate(-14deg); }
  .tg-stack { opacity: 0; } .tg-check { opacity: 1; }
  .tg-ledger i::after { transform: scale(1); }
  .tg-receipt b { opacity: 1; transform: rotate(-14deg); }
}

/* ===== Imaginary-friend motion: Gina is weightless, bubbly and pops out of frames =====
   Uses the individual translate / rotate / scale properties so hover, pop-in and state
   animations stack without fighting over transform. */
:root { --float-shadow: drop-shadow(0 16px 10px rgb(19 38 66 / .16)); --spring: cubic-bezier(.34, 1.56, .64, 1); }
[data-theme="dark"] { --float-shadow: drop-shadow(0 16px 12px rgb(0 0 0 / .45)); }
@keyframes tg-hover { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -9px; rotate: 2deg; } }
@keyframes tg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes tg-pop { 0% { scale: .3; opacity: 0; } 55% { scale: 1.12; opacity: 1; } 75% { scale: .95; } 90% { scale: 1.03; } 100% { scale: 1; } }

/* every mascot floats, with a soft cast shadow beneath, and pops in */
.tg-mascot, .tg-poses img, .tg-avatar > img.tg-avatar__art, .tg-gallery img, .tg-expr__art {
  animation: tg-pop .7s var(--spring) both, tg-hover 3.4s ease-in-out .7s infinite;
}
.tg-mascot, .tg-poses img { filter: var(--float-shadow); }
.tg-mascot--glow { filter: var(--float-shadow) drop-shadow(0 0 10px var(--glow-core)) drop-shadow(0 0 24px var(--glow-core)); }
.tg-mascot--working { filter: var(--float-shadow) drop-shadow(0 0 10px var(--glow-core)) drop-shadow(0 0 24px var(--glow-core)); animation: tg-pop .7s var(--spring) both, tg-hover 3.4s ease-in-out .7s infinite, tg-breathe var(--dur-breathe) ease-in-out infinite; }
.tg-mascot--done { filter: var(--float-shadow) drop-shadow(0 0 10px var(--live)) drop-shadow(0 0 22px var(--live)); }
.tg-mascot--needs { filter: var(--float-shadow) drop-shadow(0 0 10px var(--alert)) drop-shadow(0 0 22px var(--alert)); }
/* stagger so a grid never bobs in lockstep */
.tg-poses figure:nth-child(3n+2) img, .tg-gallery figure:nth-child(3n+2) img, .tg-stage > :nth-child(3n+2) .tg-avatar__art { animation-delay: .1s, 1.5s; }
.tg-poses figure:nth-child(3n) img, .tg-gallery figure:nth-child(3n) img, .tg-stage > :nth-child(3n) .tg-avatar__art { animation-delay: .2s, 2.3s; }
.tg-poses figure:nth-child(4n) img { animation-duration: .7s, 4.1s; }

/* pop-out: she breaks the frame instead of sitting inside it */
.tg-poses figure { overflow: visible; padding-top: 0; margin-top: 30px; }
.tg-poses img { margin-top: -30px; width: 124px; height: 124px; }
.tg-avatar > img.tg-avatar__art { margin-top: -14%; width: 118%; height: 118%; }
.tg-sheet { position: relative; overflow: visible; }
.tg-sheet .tg-mascot { position: absolute; right: -44px; bottom: 72px; width: 150px; height: auto; }
.tg-bento .tg-mascot, .tg-card .tg-mascot { margin-bottom: -28px; margin-right: -18px; }

/* props and cards near her get a lighter bob */
.tg-expr .tg-prop { animation-name: tg-bob; animation-duration: 2.6s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

/* spinning: she whirls like a top, wobbles dizzy, then goes again */
.tg-expr--spinning .tg-expr__art { animation: tg-pop .7s var(--spring) both, tg-whirl 2.8s cubic-bezier(.6, 0, .3, 1) .7s infinite; }
@keyframes tg-whirl {
  0% { rotate: 0deg; translate: 0 0; scale: 1; }
  10% { rotate: -25deg; translate: 0 2px; scale: 1.04 .94; }
  50% { rotate: 1105deg; translate: 0 -16px; scale: .92 1.06; }
  60% { rotate: 1080deg; translate: 0 0; scale: 1.06 .94; }
  68% { rotate: 1092deg; scale: 1; } 76% { rotate: 1070deg; } 84% { rotate: 1086deg; } 92%, 100% { rotate: 1080deg; translate: 0 0; scale: 1; }
}
.tg-expr--spinning .tg-expr__ring g { animation-duration: .7s; }
.tg-expr__whoosh { position: absolute; inset: 22px; border-radius: 50%; border: 3px dashed var(--accent); opacity: 0; animation: tg-whoosh 2.8s linear .7s infinite; }
@keyframes tg-whoosh { 0%, 12% { opacity: 0; rotate: 0deg; } 20%, 45% { opacity: .55; } 55%, 100% { opacity: 0; rotate: -720deg; } }

/* hide and seek: ducks behind the card, peeks, then pops out the other side */
.tg-expr--peek .tg-expr__stage { overflow: visible; }
.tg-expr__hide { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; height: 70px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); display: grid; place-items: center; font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); animation: tg-bob 3s ease-in-out infinite; }
.tg-expr--peek .tg-expr__art { z-index: 1; width: 92px; animation: tg-peek 4.8s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes tg-peek {
  0%, 8% { translate: 0 60px; rotate: 0deg; }
  18% { translate: 0 18px; rotate: -4deg; } 26% { translate: 0 22px; rotate: 6deg; } 32% { translate: 0 60px; rotate: 0deg; }
  42% { translate: 40px 30px; rotate: 14deg; } 50% { translate: 38px 34px; rotate: 18deg; } 56% { translate: 0 60px; rotate: 0deg; }
  66% { translate: -6px -34px; rotate: -6deg; scale: 1.08; } 74% { translate: 0 -24px; rotate: 3deg; scale: 1; } 84% { translate: 0 -30px; rotate: -2deg; }
  94%, 100% { translate: 0 60px; rotate: 0deg; }
}

/* timeline: Gina peeks over the row she's working on */
.tg-tl { position: relative; }
.tg-peekaboo { position: absolute; right: -6px; top: -30px; width: 46px; height: 34px; overflow: hidden; pointer-events: none; }
.tg-peekaboo img { display: block; width: 46px; height: auto; animation: tg-peekrow 5s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes tg-peekrow { 0%, 20% { translate: 0 40px; rotate: 0deg; } 30% { translate: 0 6px; rotate: -6deg; } 38% { translate: 0 8px; rotate: 6deg; } 46%, 58% { translate: 0 2px; rotate: 0deg; } 68%, 100% { translate: 0 40px; } }

@media (prefers-reduced-motion: reduce) {
  .tg-mascot, .tg-poses img, .tg-avatar > img.tg-avatar__art, .tg-gallery img, .tg-expr__art, .tg-expr .tg-prop,
  .tg-expr__whoosh, .tg-expr__hide, .tg-peekaboo img { animation: none !important; }
  .tg-expr--peek .tg-expr__art { translate: 0 18px; }
  .tg-peekaboo img { translate: 0 6px; }
}

/* Profile picture: Gina pops out of her circle, head and arms over the rim (Foster's-style) */
.tg-pfp { --s: 96px; position: relative; width: var(--s); height: var(--s); flex: none; display: inline-block; }
.tg-pfp::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), var(--glow-md); }
.tg-pfp__clip { position: absolute; left: -15%; width: 130%; bottom: 0; height: 160%;
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 68.75% no-repeat, radial-gradient(circle closest-side at 50% 68.75%, #000 98%, transparent 100%) 50% 100% / 100% 62.5% no-repeat;
          mask: linear-gradient(#000 0 0) 0 0 / 100% 68.75% no-repeat, radial-gradient(circle closest-side at 50% 68.75%, #000 98%, transparent 100%) 0 0 / 100% 100% no-repeat; }
.tg-pfp__clip img { position: absolute; left: 50%; bottom: 2%; width: 92%; margin-left: -46%; height: auto; filter: var(--float-shadow);
  animation: tg-pop .7s var(--spring) both, tg-pfp-bounce 2.6s ease-in-out .7s infinite; }
@keyframes tg-pfp-bounce { 0%, 100% { translate: 0 6%; rotate: -2deg; } 40% { translate: 0 -8%; rotate: 2deg; } 55% { translate: 0 -6%; } 80% { translate: 0 8%; rotate: -1deg; } }
.tg-pfp--48 { --s: 48px; } .tg-pfp--64 { --s: 64px; } .tg-pfp--128 { --s: 128px; } .tg-pfp--160 { --s: 160px; }
.tg-pfp__badge { position: absolute; z-index: 2; right: 2%; bottom: 2%; width: 24%; height: 24%; min-width: 10px; min-height: 10px; border-radius: 50%; border: 2px solid var(--surface-000); background: var(--live); box-shadow: var(--glow-live); }
@media (prefers-reduced-motion: reduce) { .tg-pfp__clip img { animation: none; translate: 0 -4%; } }

/* connection diagram hub: same pop-out, bobbing */
.tg-conn .hub-art { animation: tg-hub-bob 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes tg-hub-bob { 0%, 100% { translate: 0 8px; } 45% { translate: 0 -8px; } 60% { translate: 0 -6px; } }
.tg-conn .hub-rim { fill: none; stroke: var(--accent); stroke-width: 2; }
.tg-conn .tile { animation: tg-bob 3.6s ease-in-out infinite; }
.tg-conn .tile:nth-of-type(2n) { animation-delay: -1.2s; } .tg-conn .tile:nth-of-type(3n) { animation-delay: -2.1s; }
.tg-conn__title { margin: 0 0 var(--space-3); font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .tg-conn .hub-art, .tg-conn .tile { animation: none; } }

/* Gina team: several colorway Ginas passing work along, each bobbing out of step */
.tg-team { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding: 56px var(--space-5) var(--space-5); background: var(--surface-100); border-radius: var(--radius-lg); width: 100%; box-sizing: border-box; }
.tg-team__track { position: absolute; left: 12.5%; right: 12.5%; top: 104px; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 12px); opacity: .5; }
.tg-team__baton { position: absolute; top: 94px; left: 12.5%; width: 26px; height: 20px; z-index: 3; animation: tg-baton 6s cubic-bezier(.6, 0, .4, 1) infinite; }
.tg-team__baton .tg-env { width: 26px; height: 18px; }
@keyframes tg-baton {
  0%, 6% { left: 12.5%; translate: -50% 0; } 14% { translate: -50% -26px; } 22%, 30% { left: 37.5%; translate: -50% 0; }
  38% { translate: -50% -26px; } 46%, 54% { left: 62.5%; translate: -50% 0; } 62% { translate: -50% -26px; } 70%, 92% { left: 87.5%; translate: -50% 0; }
  96% { opacity: 0; } 100% { left: 12.5%; translate: -50% 0; opacity: 0; } }
.tg-team__member { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.tg-team__member .tg-pfp { --s: 76px; }
.tg-team__member:nth-child(4) .tg-pfp__clip img { animation-delay: .1s, 1.1s; } .tg-team__member:nth-child(5) .tg-pfp__clip img { animation-delay: .2s, 1.9s; } .tg-team__member:nth-child(6) .tg-pfp__clip img { animation-delay: .3s, .5s; }
.tg-team__member .tg-pfp::before { background: color-mix(in srgb, var(--sw) 18%, var(--surface-000)); box-shadow: inset 0 0 0 2px var(--sw), 0 0 22px color-mix(in srgb, var(--sw) 55%, transparent); }
.tg-team__name { font: 700 15px/1.2 var(--font-display); color: var(--ink); }
.tg-team__doing { font: 400 14px/1.35 var(--font-body); color: var(--ink-muted); max-width: 150px; }
@media (max-width: 640px) { .tg-team { grid-template-columns: repeat(2, 1fr); } .tg-team__track, .tg-team__baton { display: none; } }
@media (prefers-reduced-motion: reduce) { .tg-team__baton { animation: none; left: 37.5%; translate: -50% 0; } }
.tg-exprs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tg-expr--peek .tg-expr__stage { clip-path: inset(-80px -80px 0 -80px); }
.tg-expr--peek .tg-expr__hide { bottom: 0; height: 78px; }
.tg-expr--peek .tg-expr__shadow { display: none; }

/* Wispy tail: the lower part of the render wavers like genie smoke and sheds little puffs.
   Needs the tg-wisp-f SVG filter once on the page (see Expressions README). */
.tg-wisp { position: relative; display: inline-block; line-height: 0; }
.tg-wisp > img { display: block; width: 100%; height: auto; }
.tg-wisp__body { -webkit-mask: linear-gradient(#000 52%, transparent 70%); mask: linear-gradient(#000 52%, transparent 70%); }
.tg-wisp__tail { position: absolute; inset: 0; filter: url(#tg-wisp-f); -webkit-mask: linear-gradient(transparent 52%, #000 70%); mask: linear-gradient(transparent 52%, #000 70%); }
.tg-wisp__puff { position: absolute; z-index: -1; left: 40%; top: 86%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gina-blue, #0068f5) 70%, #55b5ff) 0 35%, transparent 70%); filter: blur(2px); opacity: 0; animation: tg-puff 3.6s ease-out infinite; }
.tg-wisp__puff:nth-of-type(2) { animation-delay: 1.2s; left: 30%; width: 10%; }
.tg-wisp__puff:nth-of-type(3) { animation-delay: 2.4s; left: 48%; width: 8%; }
@keyframes tg-puff { 0% { opacity: 0; translate: 0 0; scale: .5; } 20% { opacity: .55; } 100% { opacity: 0; translate: -22px 26px; scale: 1.6; } }
@media (prefers-reduced-motion: reduce) { .tg-wisp__tail { filter: none; } .tg-wisp__puff { display: none; } }
.tg-wisp__body { -webkit-mask: linear-gradient(#000 64%, transparent 67%); mask: linear-gradient(#000 64%, transparent 67%); }
.tg-wisp__tail { -webkit-mask: linear-gradient(transparent 57%, #000 61%); mask: linear-gradient(transparent 57%, #000 61%); }

/* Facing: Gina faces either way. tg-flip mirrors her (transform is free: motion uses translate/rotate/scale). */
.tg-flip { transform: scaleX(-1); }
.tg-poses figure:nth-child(even) img, .tg-team__member:nth-child(odd) .tg-pfp__clip img { transform: scaleX(-1); }
/* tg-turn: while idle she turns around now and then, with a little squash at the turn */
.tg-turn { animation-name: tg-pop, tg-hover, tg-turn !important; animation-duration: .7s, 3.4s, 9s !important; animation-timing-function: var(--spring), ease-in-out, ease-in-out !important; animation-delay: 0s, .7s, 1.5s !important; animation-iteration-count: 1, infinite, infinite !important; animation-fill-mode: both, none, none !important; }
@keyframes tg-turn { 0%, 40% { transform: scaleX(1); } 45% { transform: scaleX(-1.08) scaleY(.94); } 48%, 90% { transform: scaleX(-1); } 95% { transform: scaleX(1.08) scaleY(.94); } 98%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .tg-turn { animation: none !important; } }

/* Proactive Gina: she brings back the owner's own idea, ready to go, with small tweaks */
.tg-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); align-items: start; width: 100%; padding-top: 40px; }
.tg-idea { position: relative; background: var(--surface-000); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5) var(--space-5); box-shadow: var(--elev-2); display: grid; gap: var(--space-3); animation: tg-bob 4.2s ease-in-out infinite; }
.tg-idea__gina { position: absolute; left: -18px; top: -58px; width: 96px; height: auto; }
.tg-idea__eyebrow { margin-left: 72px; font: 500 12px/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong, var(--accent)); }
.tg-idea__text { margin: 0; font: 600 18px/1.4 var(--font-body); color: var(--ink); }
.tg-idea__quote { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--cream) 90%, transparent) 55%); border-radius: 2px; padding: 0 2px; }
.tg-idea__why { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--ink-muted); }
.tg-idea__tweaks { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tg-idea__tweaks .tg-label { width: 100%; }
.tg-idea__summary { font: 500 14px/1.4 var(--font-body); color: var(--ink); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--accent-soft); }
.tg-idea__actions { display: flex; gap: var(--space-2); align-items: center; }
.tg-idea--done { border-color: color-mix(in srgb, var(--live) 45%, var(--hairline)); box-shadow: var(--elev-2), var(--glow-live); animation-delay: -2s; }
.tg-idea--done .tg-idea__eyebrow { color: var(--live-ink, var(--live)); }
@media (prefers-reduced-motion: reduce) { .tg-idea { animation: none; } }
.tg-ideas { padding-top: 72px; }
[data-theme="dark"] .tg-idea__quote { background: linear-gradient(transparent 55%, rgb(85 181 255 / .35) 55%); }

/* ===== Chat ===== */
.tg-chat { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; max-width: 640px; margin: 0 auto; font-family: var(--font-body); }
.tg-msg { display: flex; gap: var(--space-2); align-items: flex-end; max-width: 86%; }
.tg-msg__body { display: grid; gap: 4px; }
.tg-msg__bubble { padding: 10px 14px; border-radius: 20px; font: 400 15px/1.45 var(--font-body); color: var(--ink); background: var(--surface-100); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; }
.tg-msg__meta { font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); padding: 0 6px; }
.tg-msg--me { margin-left: auto; flex-direction: row-reverse; }
.tg-msg--me .tg-msg__bubble { background: var(--surface-inverse); color: var(--on-inverse); border-color: transparent; border-bottom-left-radius: 20px; border-bottom-right-radius: 6px; }
.tg-msg--me .tg-msg__meta { text-align: right; }
.tg-msg__who { flex: none; width: 34px; height: 34px; }
.tg-msg__who .tg-pfp { --s: 34px; }
.tg-msg__who .tg-pfp::before { box-shadow: inset 0 0 0 1.5px var(--accent), var(--glow-sm); }
.tg-msg--stack .tg-msg__who { visibility: hidden; }
.tg-msg__bubble b { font-weight: 600; }
.tg-msg__bubble mark { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--cream) 90%, transparent) 55%); color: inherit; }
[data-theme="dark"] .tg-msg__bubble mark { background: linear-gradient(transparent 55%, rgb(85 181 255 / .35) 55%); }

/* typing: three bubbly dots */
.tg-typing { display: inline-flex; gap: 5px; align-items: center; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: var(--surface-100); border: 1px solid var(--hairline); }
.tg-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tg-typing 1.2s ease-in-out infinite; }
.tg-typing i:nth-child(2) { animation-delay: .15s; } .tg-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tg-typing { 0%, 60%, 100% { translate: 0 0; opacity: .45; } 30% { translate: 0 -6px; opacity: 1; } }
.tg-typing__doing { font: 500 14px/1.3 var(--font-body); color: var(--ink-muted); }

/* tool run: what she's doing, step by step */
.tg-run { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface-000); padding: var(--space-4); display: grid; gap: var(--space-3); box-shadow: var(--elev-1); }
.tg-run__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tg-run__title { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-run__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tg-run__step { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: center; font: 400 14px/1.35 var(--font-body); color: var(--ink); }
.tg-run__step span:last-child { font: 500 12px/1 var(--font-mono); letter-spacing: .05em; color: var(--ink-muted); }
.tg-run__ic { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.tg-run__step--done .tg-run__ic { background: var(--live-soft); color: var(--live-ink); }
.tg-run__step--now .tg-run__ic { border: 2px solid var(--accent-soft); border-top-color: var(--accent); animation: tg-spin .9s linear infinite; }
.tg-run__step--now { font-weight: 600; }
.tg-run__step--todo { color: var(--ink-muted); }
.tg-run__step--todo .tg-run__ic { border: 1.5px dashed var(--hairline-strong); }

/* inline result cards */
.tg-result { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-1); }
.tg-result__date { width: 52px; border-radius: 12px; overflow: hidden; text-align: center; border: 1px solid var(--hairline-strong); background: var(--surface-000); }
.tg-result__date b { display: block; background: var(--accent); color: var(--on-accent); font: 600 12px/18px var(--font-mono); letter-spacing: .05em; }
.tg-result__date span { display: block; font: 700 22px/32px var(--font-display); color: var(--ink); }
.tg-result__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--live-soft); color: var(--live-ink); }
.tg-result__ico--accent { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.tg-result__t { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-result__s { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }

/* inline draft for approval */
.tg-draft { border-radius: var(--radius-lg); border: 1px solid var(--hairline-strong); background: var(--surface-000); overflow: hidden; box-shadow: var(--elev-1); }
.tg-draft__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 10px 14px; background: var(--surface-100); border-bottom: 1px solid var(--hairline); }
.tg-draft__to { font: 400 14px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-draft__to b { color: var(--ink); font-weight: 600; }
.tg-draft__subj { padding: 12px 14px 0; font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-draft__text { padding: 6px 14px 12px; margin: 0; font: 400 14px/1.5 var(--font-body); color: var(--ink); }
.tg-draft__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 14px 14px; }

/* suggestions above the composer */
.tg-suggest { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tg-suggest button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-000); color: var(--ink); font: 500 14px/1 var(--font-body); transition: translate var(--dur-fast) ease-out, border-color var(--dur-fast); }
.tg-suggest button:hover { translate: 0 -2px; border-color: var(--accent); }
.tg-suggest .tg-suggest__idea { border-color: transparent; background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.tg-suggest .tg-suggest__idea img { width: 18px; height: 18px; }

/* composer */
.tg-composer { position: relative; display: grid; gap: var(--space-2); padding: 10px; border-radius: 26px; border: 1px solid var(--hairline-strong); background: var(--surface-000); box-shadow: var(--glow-md); }
.tg-composer__row { display: flex; align-items: center; gap: var(--space-2); }
.tg-composer__input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px/1.4 var(--font-body); color: var(--ink); padding: 8px 6px; }
.tg-composer__input::placeholder { color: var(--ink-muted); }
.tg-iconbtn { appearance: none; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: var(--ink-muted); cursor: pointer; }
.tg-iconbtn:hover { background: var(--surface-100); color: var(--ink); }
.tg-iconbtn--send { background: var(--accent); color: var(--on-accent); box-shadow: var(--glow-sm); }
.tg-iconbtn--send:hover { background: var(--accent-strong, var(--accent)); color: var(--on-accent); }
.tg-slash { position: absolute; left: 10px; bottom: calc(100% + 8px); width: min(320px, 90%); padding: 6px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); display: grid; gap: 2px; z-index: 5; }
.tg-slash__item { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; font: 400 14px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-slash__item code { font: 600 13px/1.3 var(--font-mono); color: var(--ink); }
.tg-slash__item[aria-selected="true"] { background: var(--accent-soft); color: var(--ink); }

/* attachments */
.tg-attach { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--hairline); background: var(--surface-000); }
.tg-attach__ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); letter-spacing: .04em; color: #fff; background: #d64545; }
.tg-attach__ico--img { background: var(--accent); }
.tg-attach__ico--xls { background: #1f8a4c; }
.tg-attach__n { font: 600 14px/1.25 var(--font-body); color: var(--ink); }
.tg-attach__s { font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tg-voice { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--surface-inverse); color: var(--on-inverse); }
.tg-voice__play { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--on-inverse); color: var(--surface-inverse); }
.tg-voice__wave { display: flex; align-items: center; gap: 2px; height: 22px; }
.tg-voice__wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .8; }
.tg-voice__t { font: 500 12px/1 var(--font-mono); opacity: .8; }

/* system lines */
.tg-sysline { display: flex; align-items: center; gap: var(--space-3); font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-sysline::before, .tg-sysline::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.tg-sysevent { align-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--live-soft); color: var(--live-ink); font: 500 13px/1.2 var(--font-body); }
.tg-syserr { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); background: var(--alert-soft); color: var(--alert-ink); font: 500 14px/1.35 var(--font-body); }
.tg-syserr button { margin-left: auto; }

/* thread frame */
.tg-chatframe { width: 100%; max-width: 420px; margin: 0 auto; border-radius: 32px; border: 1px solid var(--hairline); background: var(--surface-000); box-shadow: var(--elev-2); overflow: hidden; display: flex; flex-direction: column; }
.tg-chatframe__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 16px 14px; background: linear-gradient(var(--surface-100), var(--surface-000)); border-bottom: 1px solid var(--hairline); }
.tg-chatframe__head .tg-pfp { --s: 56px; }
.tg-chatframe__status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--surface-000); border: 1px solid var(--hairline); font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); box-shadow: var(--glow-sm); }
.tg-chatframe__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.tg-chatframe__foot { padding: 0 12px 12px; display: grid; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .tg-typing i, .tg-run__step--now .tg-run__ic { animation: none; } }

/* ===== Time back: the 4-day, then 3-day week ===== */
.tg-week { width: 100%; max-width: 720px; display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); position: relative; }
.tg-week__eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong, var(--accent)); }
.tg-week__h { margin: 0; font: 700 34px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); max-width: 22ch; }
.tg-week__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tg-day { position: relative; height: 92px; border-radius: 16px; border: 1px solid var(--hairline); background: var(--surface-100); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; }
.tg-day b { position: relative; z-index: 1; font: 600 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-day small { position: relative; z-index: 1; font: 500 12px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-day--work { background: var(--surface-200); }
.tg-day--free { background: var(--accent-soft); border-color: var(--accent); }
.tg-day--free b, .tg-day--free small { color: var(--accent-strong, var(--accent)); }
.tg-day--winning { border-color: var(--accent); border-style: dashed; }
.tg-day--winning::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--p, 0%); background: linear-gradient(var(--accent-soft), color-mix(in srgb, var(--accent) 35%, var(--accent-soft))); animation: tg-fill 1.6s var(--spring) both .3s; }
@keyframes tg-fill { from { height: 0; } }
.tg-day__gina { position: absolute; z-index: 2; width: 54px; right: -6px; top: -4px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-week__bar { display: grid; gap: 6px; }
.tg-week__track { height: 12px; border-radius: 999px; background: var(--surface-200); overflow: hidden; }
.tg-week__fill { height: 100%; width: var(--p); border-radius: inherit; background: var(--accent); box-shadow: var(--glow-sm); animation: tg-grow 1.6s var(--spring) both .3s; }
@keyframes tg-grow { from { width: 0; } }
.tg-week__legend { display: flex; justify-content: space-between; font: 500 14px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-week__legend b { color: var(--ink); }
.tg-week__next { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-100); font: 500 14px/1.4 var(--font-body); color: var(--ink); }
.tg-week__next .tg-chip { flex: none; }

/* how far you've come */
.tg-journey { width: 100%; max-width: 760px; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-100); display: grid; gap: var(--space-5); }
.tg-journey__then-now { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; }
.tg-journey__col { padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); display: grid; gap: 4px; }
.tg-journey__col--now { border-color: var(--accent); box-shadow: var(--glow-sm); }
.tg-journey__num { font: 700 44px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.tg-journey__col--now .tg-journey__num { color: var(--accent-strong, var(--accent)); }
.tg-journey__lbl { font: 400 14px/1.35 var(--font-body); color: var(--ink-muted); }
.tg-journey__arrow { font: 700 28px/1 var(--font-display); color: var(--accent); }
.tg-journey__path { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding-top: 18px; }
.tg-journey__path::before { content: ""; position: absolute; left: 10%; right: 10%; top: 26px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent) var(--p, 70%), var(--hairline-strong) var(--p, 70%)); }
.tg-mile { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; }
.tg-mile__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface-100); box-shadow: var(--glow-sm); }
.tg-mile--next .tg-mile__dot { background: var(--surface-000); border: 2px dashed var(--accent); box-shadow: none; }
.tg-mile b { font: 600 14px/1.25 var(--font-body); color: var(--ink); }
.tg-mile small { font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.tg-mile__gina { position: absolute; top: -50px; width: 50px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }

/* Thursday recap */
.tg-recap { width: 100%; max-width: 560px; border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); overflow: visible; position: relative; }
.tg-recap__top { padding: var(--space-6) var(--space-5) var(--space-4); display: grid; gap: 8px; border-bottom: 1px solid var(--hairline); }
.tg-recap__gina { position: absolute; right: -24px; top: -54px; width: 120px; animation: tg-hover 3.2s ease-in-out infinite; filter: var(--float-shadow) drop-shadow(0 0 12px var(--cream)); }
.tg-recap__h { margin: 0; font: 700 30px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); max-width: 16ch; }
.tg-recap__wins { list-style: none; margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: 10px; }
.tg-recap__wins li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-recap__wins li span:first-child { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--live-soft); color: var(--live-ink); font: 700 14px/1 var(--font-body); }
.tg-recap__wins li b { font-weight: 600; }
.tg-recap__wins li em { font-style: normal; font: 600 13px/1 var(--font-mono); color: var(--live-ink); }
.tg-recap__peak { margin: 0 var(--space-5); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--cream); color: #132642; display: grid; gap: 4px; }
.tg-recap__peak .tg-label { color: #5b4a22; }
.tg-recap__peak strong { font: 700 20px/1.2 var(--font-display); }
.tg-recap__idea { padding: var(--space-4) var(--space-5) var(--space-5); display: grid; gap: var(--space-3); }
@media (max-width: 640px) { .tg-week__days { grid-template-columns: repeat(7, minmax(36px, 1fr)); } .tg-day { height: 72px; } .tg-journey__then-now { grid-template-columns: 1fr; } .tg-journey__path { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; } }
@media (prefers-reduced-motion: reduce) { .tg-day__gina, .tg-mile__gina, .tg-recap__gina, .tg-day--winning::before, .tg-week__fill { animation: none; } }

/* ===== Leaky faucets: where the business leaks time and money ===== */
.tg-leaks { width: 100%; max-width: 640px; border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); padding: var(--space-6) var(--space-5) var(--space-5); display: grid; gap: var(--space-4); position: relative; }
.tg-leaks__gina { position: absolute; right: -20px; top: -56px; width: 110px; animation: tg-hover 3.2s ease-in-out infinite; filter: var(--float-shadow); }
.tg-leaks__h { margin: 0; font: 700 30px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); max-width: 18ch; }
.tg-leaks__total { font: 400 15px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-leaks__total b { color: var(--ink); }
.tg-leak { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-100); }
.tg-leak__drip { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--alert-soft); color: var(--alert-ink); overflow: visible; }
.tg-leak__drip::after { content: ""; position: absolute; left: 50%; top: 70%; width: 7px; height: 9px; margin-left: -3.5px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--accent); animation: tg-drip 2.2s ease-in infinite; }
.tg-leak:nth-of-type(2) .tg-leak__drip::after { animation-delay: .7s; } .tg-leak:nth-of-type(3) .tg-leak__drip::after { animation-delay: 1.4s; }
@keyframes tg-drip { 0% { opacity: 0; translate: 0 -4px; scale: .4; } 25% { opacity: 1; translate: 0 0; scale: 1; } 70% { opacity: 1; translate: 0 18px; } 100% { opacity: 0; translate: 0 24px; scale: .6; } }
.tg-leak__t { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-leak__s { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-leak__cost { text-align: right; display: grid; gap: 6px; justify-items: end; }
.tg-leak__cost b { font: 700 18px/1 var(--font-display); color: var(--alert-ink); }
.tg-leak--fixed { background: var(--live-soft); border-color: transparent; }
.tg-leak--fixed .tg-leak__drip { background: var(--surface-000); color: var(--live-ink); }
.tg-leak--fixed .tg-leak__drip::after { display: none; }
.tg-leak--fixed .tg-leak__cost b { color: var(--live-ink); }

/* Kitchen sink: throw it all at Gina */
.tg-sink { width: 100%; max-width: 640px; display: grid; gap: var(--space-4); }
.tg-sink__drop { position: relative; min-height: 220px; border-radius: var(--radius-xl); border: 2px dashed var(--accent); background: var(--accent-soft); display: grid; place-items: center; overflow: hidden; text-align: center; padding: var(--space-6) var(--space-5); }
.tg-sink__drop h3 { margin: 0; font: 700 26px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); position: relative; z-index: 2; }
.tg-sink__drop p { margin: 6px 0 0; font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); position: relative; z-index: 2; }
.tg-sink__gina { position: relative; z-index: 2; width: 92px; margin: 0 auto 6px; animation: tg-hover 2.6s ease-in-out infinite; filter: var(--float-shadow); }
.tg-sink__fly { position: absolute; z-index: 1; padding: 6px 10px; border-radius: 10px; background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-1); font: 500 12px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink); white-space: nowrap; animation: tg-throw 4.8s cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes tg-throw { 0% { opacity: 0; translate: 0 0; rotate: 0deg; scale: 1; } 10% { opacity: 1; } 55% { opacity: 1; translate: var(--tx) var(--ty); rotate: var(--r); scale: .9; } 70%, 100% { opacity: 0; translate: var(--tx) var(--ty); rotate: var(--r); scale: .2; } }
.tg-sink__piles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.tg-pile { padding: 12px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline); display: grid; gap: 4px; }
.tg-pile b { font: 700 24px/1 var(--font-display); color: var(--ink); }
.tg-pile span { font: 500 13px/1.3 var(--font-body); color: var(--ink-muted); }
@media (max-width: 640px) { .tg-sink__piles { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .tg-leaks__gina, .tg-leak__drip::after, .tg-sink__gina, .tg-sink__fly { animation: none; } .tg-sink__fly { display: none; } }
.tg-sink__drop { align-content: end; padding-top: 150px; }
.tg-sink__drop > div { display: contents; }
.tg-sink__gina { position: absolute; left: 50%; top: 24px; margin-left: -46px; }
@keyframes tg-throw { 0% { opacity: 0; translate: 0 0; rotate: 0deg; scale: 1; } 10% { opacity: 1; } 50% { opacity: 1; translate: var(--tx) var(--ty); rotate: var(--r); scale: .7; } 60%, 100% { opacity: 0; translate: var(--tx) var(--ty); rotate: var(--r); scale: .1; } }

/* ===== Bring your Gina: the invite and referral loop ===== */
.tg-invite { width: 100%; max-width: 760px; display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface-100); }
.tg-invite__h { margin: 0; font: 700 34px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.tg-invite__bring { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tg-bring { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-000); font: 600 14px/1 var(--font-body); color: var(--ink); transition: translate var(--dur-fast) ease-out; }
.tg-bring:hover { translate: 0 -2px; }
.tg-bring__ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); overflow: visible; font: 700 12px/1 var(--font-mono); color: var(--ink); }
.tg-bring__ico img { width: 34px; margin-top: -6px; }
.tg-bring--friend { background: var(--surface-inverse); color: var(--on-inverse); border-color: transparent; }
.tg-bring--friend .tg-bring__ico { background: var(--cream); color: #132642; }
.tg-shared { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); }
.tg-shared__side { display: grid; justify-items: center; gap: 6px; text-align: center; }
.tg-shared__side .tg-pfp { --s: 72px; }
.tg-shared__side .tg-pfp::before { background: color-mix(in srgb, var(--sw) 18%, var(--surface-000)); box-shadow: inset 0 0 0 2px var(--sw), 0 0 22px color-mix(in srgb, var(--sw) 55%, transparent); }
.tg-shared__who { font: 600 14px/1.2 var(--font-body); color: var(--ink); }
.tg-shared__biz { font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-shared__job { position: relative; display: grid; gap: 8px; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-100); border: 1px dashed var(--accent); }
.tg-shared__job b { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-shared__job ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 14px/1.35 var(--font-body); color: var(--ink-muted); }
.tg-shared__job li::before { content: "✓ "; color: var(--live-ink); font-weight: 700; }
.tg-shared__spark { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--accent); box-shadow: var(--glow-sm); animation: tg-pass 2.4s ease-in-out infinite; }
.tg-shared__spark--l { left: -24px; } .tg-shared__spark--r { right: -24px; animation-direction: reverse; animation-delay: -1.2s; }
@keyframes tg-pass { 0%, 100% { translate: -14px 0; opacity: 0; } 20%, 80% { opacity: 1; } 50% { translate: 14px 0; } }
.tg-shared__agents { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); font: 500 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-shared__agents span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--surface-100); border: 1px solid var(--hairline); }
.tg-shared__agents i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-mono); font-style: normal; background: var(--surface-inverse); color: var(--on-inverse); }
.tg-invite__reward { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-radius: var(--radius-md); background: var(--cream); color: #132642; font: 500 14px/1.4 var(--font-body); }
.tg-invite__reward .tg-chip { background: #132642; color: var(--cream); }
@media (max-width: 640px) { .tg-shared { grid-template-columns: 1fr; } .tg-shared__spark { display: none; } }
@media (prefers-reduced-motion: reduce) { .tg-shared__spark { animation: none; display: none; } }

/* ===== Gina cursor: she floats over the words she's working on, like a live collaborator ===== */
.tg-cdoc { position: relative; width: 100%; max-width: 640px; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-1); font: 400 16px/1.7 var(--font-body); color: var(--ink); }
.tg-cdoc h3 { margin: 0 0 8px; font: 700 24px/1.15 var(--font-display); letter-spacing: -0.02em; }
.tg-cdoc p { margin: 0 0 12px; }
.tg-cdoc [data-gina-at] { border-radius: 4px; transition: background-color 300ms ease-out, box-shadow 300ms ease-out; }
.tg-cdoc [data-gina-at].is-gina { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 2px 0 var(--accent); }
.tg-cdoc [data-gina-at].is-done { background: color-mix(in srgb, var(--cream) 85%, transparent); }
[data-theme="dark"] .tg-cdoc [data-gina-at].is-done { background: rgb(85 181 255 / .18); }
.tg-cursor { position: absolute; z-index: 4; left: 0; top: 0; pointer-events: none; display: flex; align-items: flex-end; gap: 4px; translate: var(--cx, 140px) var(--cy, 70px); transition: translate 900ms cubic-bezier(.34, 1.3, .64, 1); }
.tg-cursor img { width: 44px; height: auto; animation: tg-hover 2.4s ease-in-out infinite; filter: var(--float-shadow) drop-shadow(0 0 6px var(--glow-core)); }
.tg-cursor__tag { margin-bottom: 18px; padding: 4px 8px; border-radius: 8px 8px 8px 2px; background: var(--accent); color: var(--on-accent); font: 600 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--glow-sm); }
.tg-cursor__trail { position: absolute; left: 14px; top: 34px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .5; animation: tg-puff 1.8s ease-out infinite; }
.tg-cdoc__note { position: absolute; right: -14px; padding: 8px 10px; max-width: 200px; border-radius: 12px; background: var(--surface-000); border: 1px solid var(--accent); box-shadow: var(--elev-2); font: 500 13px/1.35 var(--font-body); color: var(--ink); opacity: 0; translate: 8px 0; transition: opacity 300ms, translate 300ms; }
.tg-cdoc__note.is-on { opacity: 1; translate: 0 0; }
.tg-cdoc__note b { display: block; font: 600 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong, var(--accent)); margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) { .tg-cursor { transition: none; } .tg-cursor img, .tg-cursor__trail { animation: none; } }

/* Legibility pass: never below 12px, muted text one step stronger, body copy a touch more open */
.tg-label, .tg-chip { font-size: 12px; letter-spacing: .05em; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p, li { line-height: 1.55; }

/* Floating words: display headlines drift word by word, weightless. Body copy, buttons and inputs stay still. */
.tg-fw { display: inline-block; white-space: pre; animation: tg-word 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.37s); }
@keyframes tg-word { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .tg-fw { animation: none; } }

/* ===== Files ===== */
.tg-files { width: 100%; max-width: 760px; display: grid; gap: var(--space-4); }
.tg-files__bar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tg-files__search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-000); color: var(--ink-muted); font: 400 15px/1 var(--font-body); }
.tg-files__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-3); }
.tg-file { position: relative; display: grid; gap: 8px; padding: 12px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); transition: translate var(--dur-base) var(--spring), box-shadow var(--dur-base); }
.tg-file:hover { translate: 0 -4px; box-shadow: var(--elev-2); }
.tg-file__thumb { height: 96px; border-radius: 12px; background: var(--surface-100); display: grid; place-items: center; position: relative; overflow: hidden; }
.tg-file__thumb i { position: absolute; left: 14px; right: 14px; height: 5px; border-radius: 3px; background: var(--hairline); }
.tg-file__type { position: absolute; left: 8px; top: 8px; padding: 4px 7px; border-radius: 6px; font: 700 12px/1 var(--font-mono); color: #fff; background: #d64545; }
.tg-file__type--doc { background: var(--accent); } .tg-file__type--xls { background: #1f8a4c; } .tg-file__type--img { background: #7b4dd6; }
.tg-file__n { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-file__m { display: flex; justify-content: space-between; align-items: center; font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-file__by { position: absolute; right: -8px; top: -14px; width: 34px; filter: var(--float-shadow); animation: tg-hover 3s ease-in-out infinite; }
.tg-avatars { display: inline-flex; }
.tg-avatars span { width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid var(--surface-000); display: grid; place-items: center; font: 700 12px/1 var(--font-body); color: #fff; background: var(--sw, var(--accent)); }
.tg-avatars span:first-child { margin-left: 0; }

/* ===== Share sheet ===== */
.tg-share { width: 100%; max-width: 460px; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); display: grid; gap: var(--space-4); position: relative; }
.tg-share__h { margin: 0; font: 700 22px/1.15 var(--font-display); color: var(--ink); }
.tg-share__file { display: flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--font-body); color: var(--ink); }
.tg-share__invite { display: flex; gap: var(--space-2); }
.tg-share__input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hairline-strong); background: var(--surface-000); font: 400 15px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-share__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tg-share__people li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.tg-share__av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 14px/1 var(--font-body); color: #fff; background: var(--sw, var(--accent)); overflow: visible; }
.tg-share__av img { width: 40px; margin-top: -8px; }
.tg-share__who b { display: block; font: 600 15px/1.25 var(--font-body); color: var(--ink); }
.tg-share__who span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-share__role { padding: 6px 10px; border-radius: 10px; border: 1px solid var(--hairline-strong); font: 500 13px/1 var(--font-body); color: var(--ink); background: var(--surface-000); }
.tg-share__link { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-100); font: 400 14px/1.35 var(--font-body); color: var(--ink); }
.tg-share__link b { font-weight: 600; }
.tg-share__link .tg-btn { margin-left: auto; }
.tg-share__gina { position: absolute; right: -18px; top: -44px; width: 84px; filter: var(--float-shadow); animation: tg-hover 3.2s ease-in-out infinite; }

/* ===== Routines ===== */
.tg-routines { width: 100%; max-width: 680px; display: grid; gap: var(--space-3); }
.tg-routine-new { display: flex; align-items: center; gap: var(--space-2); padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-000); box-shadow: var(--glow-sm); }
.tg-routine-new span { flex: 1; font: 400 15px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-routine { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); }
.tg-routine__ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); overflow: visible; }
.tg-routine__ico img { width: 52px; margin-top: -10px; animation: tg-hover 3.4s ease-in-out infinite; }
.tg-routine:nth-child(3) .tg-routine__ico img { animation-delay: -1s; } .tg-routine:nth-child(4) .tg-routine__ico img { animation-delay: -2s; }
.tg-routine__t { font: 600 16px/1.3 var(--font-body); color: var(--ink); }
.tg-routine__when { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tg-routine__last { margin-top: 6px; font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-routine__last b { color: var(--live-ink); font-weight: 600; }
.tg-routine--paused { opacity: .7; }
.tg-switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--hairline-strong); border: 0; cursor: pointer; flex: none; transition: background var(--dur-fast); }
.tg-switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: translate var(--dur-base) var(--spring); box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.tg-switch[aria-checked="true"] { background: var(--accent); box-shadow: var(--glow-sm); }
.tg-switch[aria-checked="true"]::after { translate: 18px 0; }
@media (prefers-reduced-motion: reduce) { .tg-file__by, .tg-share__gina, .tg-routine__ico img { animation: none; } }

/* ===== Vault: credentials Gina can use, never show ===== */
.tg-vault { width: 100%; max-width: 680px; border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); overflow: visible; position: relative; }
.tg-vault__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--hairline); }
.tg-vault__lock { position: relative; width: 64px; height: 64px; flex: none; border-radius: 20px; display: grid; place-items: center; background: var(--surface-inverse); color: var(--on-inverse); box-shadow: var(--glow-md); }
.tg-vault__lock img { position: absolute; width: 58px; right: -26px; top: -30px; filter: var(--float-shadow); animation: tg-hover 3s ease-in-out infinite; }
.tg-vault__h { margin: 0; font: 700 24px/1.15 var(--font-display); color: var(--ink); }
.tg-vault__sub { margin: 4px 0 0; font: 400 14px/1.45 var(--font-body); color: var(--ink-muted); }
.tg-vault__list { list-style: none; margin: 0; padding: var(--space-2) var(--space-5); }
.tg-cred { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.tg-cred:last-child { border-bottom: 0; }
.tg-cred__logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font: 700 14px/1 var(--font-body); color: #fff; background: var(--sw, var(--surface-inverse)); }
.tg-cred__n { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-cred__secret { margin-top: 2px; font: 500 14px/1.2 var(--font-mono); letter-spacing: .12em; color: var(--ink-muted); }
.tg-cred__scope { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tg-cred__side { display: grid; justify-items: end; gap: 6px; font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-vault__log { margin: 0 var(--space-5) var(--space-5); padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-100); display: grid; gap: 6px; }
.tg-vault__log div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-vault__log span { font: 500 12px/1.4 var(--font-mono); color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .tg-vault__lock img { animation: none; } }

/* ===== Leak emoticons ===== */
.tg-leak { grid-template-columns: 48px 1fr auto; }
.tg-leak__emo { --emo: 44px; display: block; animation: tg-hover 3s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgb(19 38 66 / .14)); }
.tg-leak:nth-of-type(2) .tg-leak__emo { animation-delay: -.8s; } .tg-leak:nth-of-type(3) .tg-leak__emo { animation-delay: -1.6s; }

/* ===== Custom emoticons ===== */
.tg-gallery--jobs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: var(--space-3); width: 100%; }
.tg-gallery--jobs figure { padding: var(--space-3) var(--space-1); }
.tg-gallery--jobs img { animation: tg-hover 3.4s ease-in-out infinite; }
.tg-gallery--jobs figure:nth-child(3n+2) img { animation-delay: -1.1s; } .tg-gallery--jobs figure:nth-child(3n) img { animation-delay: -2.2s; }
.tg-gallery--jobs figcaption { text-transform: none; letter-spacing: 0; color: var(--ink); }
.tg-emo { --emo: 48px; position: relative; display: inline-block; width: var(--emo); height: var(--emo); flex: none; }
.tg-emo--24 { --emo: 24px; } .tg-emo--32 { --emo: 32px; } .tg-emo--64 { --emo: 64px; } .tg-emo--96 { --emo: 96px; } .tg-emo--128 { --emo: 128px; }
.tg-emo__face { width: 100%; height: 100%; border-radius: 50%; background: #e6f0ff; object-fit: cover; display: block; }
.tg-emo__stk { position: absolute; right: -8%; bottom: -8%; width: 48%; height: 48%; border-radius: 50%; background: var(--stk, var(--accent)); border: max(2px, calc(var(--emo) * .04)) solid #fff; display: grid; place-items: center; rotate: -8deg; box-sizing: border-box; }
.tg-emo__stk svg { width: 58%; height: 58%; }
.tg-emo__stk::before { content: ""; position: absolute; left: -22%; top: 72%; width: 16%; height: 16%; border-radius: 50%; background: var(--stk, var(--accent)); border: 2px solid #fff; }
.tg-emo.is-poof .tg-emo__stk { animation: tg-emo-poof 620ms var(--spring); }
.tg-emo.is-poof .tg-emo__face { animation: tg-emo-face 620ms var(--spring); }
@keyframes tg-emo-poof { 0% { scale: .2; opacity: 0; filter: blur(6px); } 60% { scale: 1.15; opacity: 1; filter: blur(0); } 100% { scale: 1; } }
@keyframes tg-emo-face { 0% { scale: .9; filter: blur(3px); } 100% { scale: 1; filter: blur(0); } }
.tg-emomaker { width: 100%; max-width: 820px; box-sizing: border-box; display: grid; grid-template-columns: 180px 1fr; gap: var(--space-5); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-emomaker__pv { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5) 0; border-radius: var(--radius-lg); background: var(--surface-100); }
.tg-emomaker__pv .tg-emo { animation: tg-hover 3s ease-in-out infinite; }
.tg-emomaker__name { font: 600 16px/1 var(--font-mono); color: var(--ink); }
.tg-emomaker__rows { display: grid; gap: var(--space-2); min-width: 0; }
.tg-emomaker__row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-2); }
.tg-emomaker__face, .tg-emomaker__stk { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: grid; place-items: center; transition: scale var(--dur-fast) var(--spring); }
.tg-emomaker__face { background: #e6f0ff; overflow: hidden; }
.tg-emomaker__face img { width: 100%; height: 100%; object-fit: cover; }
.tg-emomaker__stk { background: var(--stk); width: 36px; height: 36px; }
.tg-emomaker__face:hover, .tg-emomaker__stk:hover { scale: 1.1; }
.tg-emomaker__face[aria-pressed="true"], .tg-emomaker__stk[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface-000) inset; }
.tg-emomaker__face:focus-visible, .tg-emomaker__stk:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tg-emomaker__save { display: flex; gap: 8px; align-items: center; }
@media (max-width: 560px) { .tg-emomaker { grid-template-columns: 1fr; } }

/* ===== Vapor ===== */
.tg-vapors { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.tg-vap { margin: 0; display: grid; gap: var(--space-2); }
.tg-vap figcaption { display: grid; gap: 2px; text-align: center; }
.tg-vap figcaption b { font: 700 16px/1.2 var(--font-display); color: var(--ink); }
.tg-vap figcaption span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-vap__stage { position: relative; height: 220px; border-radius: var(--radius-lg); background: var(--surface-100); display: grid; place-items: center; overflow: hidden; }
.tg-vap__g { width: 112px; height: auto; grid-area: 1/1; filter: var(--float-shadow); }
.tg-puff { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: radial-gradient(circle, rgb(85 181 255 / .55), rgb(85 181 255 / 0) 70%); opacity: 0; animation: tg-vap-puff 4.2s ease-out infinite; }
@keyframes tg-vap-puff { 0%, 30% { opacity: 0; translate: 0 0; scale: .3; } 42% { opacity: 1; scale: calc(var(--s) * 1.1); } 60% { opacity: 0; translate: var(--x) var(--y); scale: calc(var(--s) * 2); } 100% { opacity: 0; } }
.tg-vap--poof { animation: tg-vap-poof 4.2s ease-in-out infinite; }
@keyframes tg-vap-poof { 0% { opacity: 1; translate: 0 0; } 15% { translate: 0 -6px; } 30% { opacity: 1; scale: 1; filter: var(--float-shadow); } 42% { opacity: 0; scale: 1.25 .7; filter: blur(12px); } 62% { opacity: 0; scale: .6; filter: blur(12px); } 78% { opacity: 1; scale: 1.08 .94; filter: blur(0); } 88% { scale: .97 1.04; } 100% { opacity: 1; scale: 1; } }
.tg-vap__card { position: absolute; inset: 22px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline); display: grid; align-content: center; gap: 10px; padding: 16px; }
.tg-vap__card i { display: block; height: 8px; border-radius: 4px; background: var(--surface-200); }
.tg-vap__card i:nth-child(2) { width: 70%; } .tg-vap__card i:nth-child(3) { width: 45%; }
.tg-vap__blendwrap { position: relative; width: 112px; grid-area: 1/1; animation: tg-hover 3s ease-in-out infinite; }
.tg-vap__blendwrap .tg-vap__g { display: block; }
.tg-vap--blend { animation: tg-vap-blend 5s ease-in-out infinite; }
.tg-vap__glasses { position: absolute; left: 21.7%; top: 19.9%; width: 58.6%; height: auto; }
@keyframes tg-vap-blend { 0%, 20% { opacity: 1; filter: var(--float-shadow); } 40%, 70% { opacity: .04; filter: blur(4px); } 90%, 100% { opacity: 1; filter: var(--float-shadow); } }
.tg-vap--morph { animation: tg-vap-morph-g 4.2s ease-in-out infinite; }
.tg-vap__obj { grid-area: 1/1; width: 80px; height: 80px; border-radius: 50%; background: var(--live); border: 6px solid #fff; display: grid; place-items: center; rotate: -8deg; box-shadow: var(--glow-live); opacity: 0; animation: tg-vap-morph-o 4.2s ease-in-out infinite; }
.tg-puff--m { animation-name: tg-vap-puff2; }
@keyframes tg-vap-puff2 { 0%, 22% { opacity: 0; scale: .3; translate: 0 0; } 32% { opacity: 1; } 46% { opacity: 0; translate: var(--x) var(--y); scale: calc(var(--s) * 2); } 72% { opacity: 0; translate: 0 0; scale: .3; } 80% { opacity: 1; } 94%, 100% { opacity: 0; translate: var(--x) var(--y); scale: calc(var(--s) * 2); } }
@keyframes tg-vap-morph-g { 0%, 22% { opacity: 1; scale: 1; filter: var(--float-shadow); } 36% { opacity: 0; scale: .5 1.3; filter: blur(10px); } 74% { opacity: 0; scale: .5; filter: blur(10px); } 88% { opacity: 1; scale: 1.06; filter: blur(0); } 100% { opacity: 1; scale: 1; } }
@keyframes tg-vap-morph-o { 0%, 30% { opacity: 0; scale: .2; filter: blur(8px); } 44% { opacity: 1; scale: 1.12; filter: blur(0); } 52%, 66% { opacity: 1; scale: 1; } 78%, 100% { opacity: 0; scale: .3; filter: blur(8px); } }
.tg-vap__gap { position: absolute; left: 50%; top: 14px; width: 70px; height: 14px; margin-left: -35px; border-radius: 7px; background: var(--surface-200); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.tg-vap--squish { width: 104px; transform-origin: 50% 100%; animation: tg-vap-squish 2.6s var(--spring) infinite; }
@keyframes tg-vap-squish { 0% { scale: 1; translate: 0 0; } 18% { scale: 1.18 .78; translate: 0 10px; } 36% { scale: .72 1.3; translate: 0 -22px; } 52% { scale: 1.06 .94; translate: 0 -30px; } 70% { scale: 1.2 .8; translate: 0 10px; } 84% { scale: .95 1.05; translate: 0 0; } 100% { scale: 1; } }
.tg-vap__stage--match { animation: tg-vap-ground 5s ease-in-out infinite; }
@keyframes tg-vap-ground { 0%, 35% { background: var(--surface-100); } 50%, 85% { background: #d7f3f3; } 100% { background: var(--surface-100); } }
.tg-vap--match1, .tg-vap--match2 { animation: tg-hover 3s ease-in-out infinite, tg-vap-x1 5s ease-in-out infinite; }
.tg-vap--match2 { animation-name: tg-hover, tg-vap-x2; }
@keyframes tg-vap-x1 { 0%, 35% { opacity: 1; } 50%, 85% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tg-vap-x2 { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
[data-theme="dark"] .tg-vap__stage--match { animation-name: tg-vap-ground-d; }
@keyframes tg-vap-ground-d { 0%, 35% { background: var(--surface-100); } 50%, 85% { background: #0e3a44; } 100% { background: var(--surface-100); } }
@media (prefers-reduced-motion: reduce) { .tg-vap__g, .tg-puff, .tg-vap__obj, .tg-vap__blendwrap, .tg-vap__stage--match, .tg-emo.is-poof *, .tg-emomaker__pv .tg-emo, .tg-gallery--jobs img, .tg-leak__emo { animation: none !important; } .tg-vap--match2, .tg-puff { opacity: 0; } }

/* ===== Media library ===== */
.tg-media { width: 100%; max-width: 820px; display: grid; gap: var(--space-3); }
.tg-media__bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.tg-media__h { margin: 0; font: 700 28px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.tg-media__drop { position: relative; display: grid; gap: 2px; padding: 14px 16px 14px 92px; border-radius: var(--radius-lg); border: 2px dashed var(--hairline-strong); background: var(--surface-100); margin-top: 18px; }
.tg-media__drop b { font: 700 18px/1.2 var(--font-display); color: var(--ink); }
.tg-media__drop span { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-media__drop em { font-style: normal; color: var(--accent-strong); font-weight: 600; }
.tg-media__peek { position: absolute; left: 6px; bottom: 4px; width: 80px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-media__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 118px; gap: var(--space-3); }
.tg-media__tile { position: relative; margin: 0; border-radius: var(--radius-md); overflow: visible; background: var(--surface-000); border: 1px solid var(--hairline); display: grid; grid-template-rows: 1fr auto; transition: translate var(--dur-base) var(--spring), box-shadow var(--dur-base); }
.tg-media__tile:hover { translate: 0 -4px; box-shadow: var(--elev-2); }
.tg-media__tile--tall { grid-row: span 2; } .tg-media__tile--wide { grid-column: span 2; }
.tg-media__img { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; position: relative; display: grid; place-items: center; }
.tg-media__play { width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / .92); color: #132642; display: grid; place-items: center; }
.tg-media__tile figcaption { padding: 6px 8px 8px; display: grid; gap: 4px; min-width: 0; }
.tg-media__n { font: 600 13px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-media__tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tg-media__tag { font: 500 12px/1 var(--font-body); padding: 3px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.tg-media__by { position: absolute; right: -8px; top: -12px; width: 30px; z-index: 2; animation: tg-hover 2.8s ease-in-out infinite; filter: var(--float-shadow); }
.tg-media__brand { display: grid; gap: 8px; align-content: center; justify-items: start; padding: 10px 12px; background: #ffffff; border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.tg-media__brand img { height: 26px; }
.tg-media__sw { display: flex; gap: 4px; } .tg-media__sw i { width: 18px; height: 18px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(19 38 66 / .15); }
.tg-media__aa { font: 700 20px/1 var(--font-display); color: #0f1f38; } .tg-media__aa small { font: 400 12px/1 var(--font-body); color: #3a4a63; }
.tg-media__emos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px; align-content: center; justify-items: center; }
.tg-media__emos img { width: 30px; height: 30px; }
@media (max-width: 640px) { .tg-media__grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Collab canvas ===== */
.tg-canvas { width: 100%; max-width: 860px; border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); overflow: hidden; }
.tg-canvas__top { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.tg-canvas__file { display: grid; } .tg-canvas__file b { font: 600 15px/1.2 var(--font-body); color: var(--ink); } .tg-canvas__file span { font: 400 13px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-canvas__ginas { display: inline-flex; } .tg-canvas__ginas img { width: 28px; height: 28px; margin-left: -4px; animation: tg-hover 2.6s ease-in-out infinite; } .tg-canvas__ginas img + img { animation-delay: -1.2s; }
.tg-canvas__body { display: grid; grid-template-columns: 52px 1fr 200px; min-height: 540px; }
.tg-canvas__tools { display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; border-right: 1px solid var(--hairline); }
.tg-canvas__tools button { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tg-canvas__tools button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.tg-canvas__tools button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tg-canvas__ginabtn { margin-top: auto; } .tg-canvas__ginabtn img { width: 32px; animation: tg-hover 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--glow-core)); }
.tg-canvas__board { position: relative; background-color: var(--surface-100); background-image: radial-gradient(var(--hairline-strong) 1px, transparent 1.2px); background-size: 18px 18px; overflow: hidden; display: grid; place-items: center; padding: 24px; }
.tg-art { position: relative; width: 300px; aspect-ratio: 1; background: #ffffff; border-radius: 6px; box-shadow: 0 10px 30px rgb(19 38 66 / .14); padding: 16px; display: grid; grid-template-rows: 1fr auto auto; gap: 8px; color: #0f1f38; }
.tg-art__img { border-radius: 4px; background: linear-gradient(150deg, #dbe9ff, #8fbaf0 55%, #3d6fb8); }
.tg-art__sel { position: relative; outline: 2px solid #0068f5; outline-offset: 4px; }
.tg-art__sel i { position: absolute; width: 8px; height: 8px; background: #fff; border: 2px solid #0068f5; border-radius: 2px; }
.tg-art__sel i:nth-of-type(1) { left: -9px; top: -9px; } .tg-art__sel i:nth-of-type(2) { right: -9px; top: -9px; } .tg-art__sel i:nth-of-type(3) { left: -9px; bottom: -9px; } .tg-art__sel i:nth-of-type(4) { right: -9px; bottom: -9px; }
.tg-art__h { margin: 0; font: 800 26px/1 var(--font-display); letter-spacing: -0.02em; color: #0f1f38; }
.tg-art__p { margin: 0; font: 400 13px/1.35 var(--font-body); color: #3a4a63; }
.tg-art__logo { position: absolute; left: 24px; top: 24px; height: 20px; background: #fff; padding: 4px 8px; border-radius: 6px; }
.tg-art__emo { position: absolute; right: -18px; top: -18px; width: 64px; rotate: 8deg; animation: tg-hover 3s ease-in-out infinite; }
.tg-ccur { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 2px; pointer-events: none; }
.tg-ccur__tag { margin-top: 14px; padding: 4px 8px; border-radius: 999px 999px 999px 4px; background: var(--cc); color: #fff; font: 600 12px/1 var(--font-body); white-space: nowrap; }
.tg-ccur--maya { left: 64%; top: 58%; animation: tg-ccur-a 7s cubic-bezier(.34, 1.3, .64, 1) infinite; }
@keyframes tg-ccur-a { 0%, 100% { translate: 0 0; } 30% { translate: -60px -40px; } 55% { translate: -20px -130px; } 80% { translate: 30px -60px; } }
.tg-gcur { position: absolute; z-index: 3; display: flex; align-items: flex-end; gap: 4px; pointer-events: none; }
.tg-gcur img { width: 40px; animation: tg-hover 2.4s ease-in-out infinite; filter: var(--float-shadow) drop-shadow(0 0 6px var(--glow-core)); }
.tg-gcur__tag { padding: 4px 9px; border-radius: 999px; background: var(--gc, #0068f5); color: #fff; font: 600 12px/1.1 var(--font-body); white-space: nowrap; }
.tg-gcur--a { left: 13%; top: 46%; animation: tg-gcur-a 8s cubic-bezier(.34, 1.3, .64, 1) infinite; }
.tg-gcur--b { right: 3%; bottom: 16%; flex-direction: row-reverse; animation: tg-gcur-b 9s cubic-bezier(.34, 1.3, .64, 1) infinite; }
@keyframes tg-gcur-a { 0%, 100% { translate: 0 0; } 40% { translate: 30px -24px; } 70% { translate: 10px 14px; } }
@keyframes tg-gcur-b { 0%, 100% { translate: 0 0; } 50% { translate: -20px 30px; } }
.tg-sticky { position: absolute; z-index: 2; left: 6%; bottom: 8%; width: 150px; padding: 10px 12px; background: #fff3a8; color: #2a2205; border-radius: 4px 4px 14px 4px; rotate: -4deg; box-shadow: 0 8px 18px rgb(19 38 66 / .15); font: 400 13px/1.35 var(--font-body); }
.tg-sticky b { display: block; font: 600 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.tg-react { position: absolute; bottom: -40px; z-index: 4; animation: tg-react 4s ease-out infinite; }
.tg-react img { width: 40px; }
@keyframes tg-react { 0% { translate: 0 0; opacity: 0; scale: .5; } 12% { opacity: 1; scale: 1.1; } 70% { opacity: 1; } 100% { translate: 14px -260px; opacity: 0; scale: .9; rotate: 12deg; } }
.tg-canvas__side { border-left: 1px solid var(--hairline); padding: 14px 12px; display: grid; align-content: start; gap: 8px; }
.tg-canvas__idea { text-align: left; display: grid; gap: 3px; padding: 10px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-000); color: var(--ink); font: 600 14px/1.3 var(--font-body); cursor: pointer; transition: translate var(--dur-fast) var(--spring); }
.tg-canvas__idea span { font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.tg-canvas__idea:hover { translate: 0 -2px; }
.tg-canvas__idea[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tg-canvas__sizes { display: flex; gap: 6px; align-items: flex-end; height: 76px; }
.tg-canvas__sizes span { flex: none; height: 100%; max-width: 64px; border-radius: 4px; background: linear-gradient(150deg, #dbe9ff, #8fbaf0 55%, #3d6fb8); box-shadow: inset 0 0 0 1px var(--hairline); }
.tg-canvas__sizes span:nth-child(1) { height: 52px; } .tg-canvas__sizes span:nth-child(3) { height: 30px; width: 56px; }
@media (max-width: 720px) { .tg-canvas__body { grid-template-columns: 48px 1fr; } .tg-canvas__side { display: none; } }
@media (prefers-reduced-motion: reduce) { .tg-ccur, .tg-gcur, .tg-gcur img, .tg-react, .tg-art__emo, .tg-canvas__ginas img, .tg-canvas__ginabtn img, .tg-media__peek, .tg-media__by { animation: none; } .tg-react { display: none; } }

/* ===== Social post ===== */
.tg-post { position: relative; width: 100%; max-width: 780px; display: grid; grid-template-columns: 300px 1fr; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-post__gina { position: absolute; right: -24px; top: -60px; width: 104px; animation: tg-hover 3.2s ease-in-out infinite; filter: var(--float-shadow); }
.tg-post__card { border-radius: var(--radius-lg); border: 1px solid var(--hairline); overflow: hidden; background: #ffffff; color: #0f1f38; align-self: start; }
.tg-post__who { display: flex; gap: 8px; align-items: center; padding: 10px 12px; } .tg-post__who img { width: 30px; } .tg-post__who span { display: grid; } .tg-post__who b { font: 600 14px/1.2 var(--font-body); } .tg-post__who small { font: 400 12px/1.2 var(--font-body); color: #3a4a63; }
.tg-post__art { aspect-ratio: 1; background: linear-gradient(150deg, #dbe9ff, #8fbaf0 55%, #3d6fb8); display: flex; align-items: flex-end; padding: 16px; }
.tg-post__art span { font: 800 26px/1 var(--font-display); color: #fff; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgb(19 38 66 / .35); }
.tg-post__card p { margin: 0; padding: 10px 12px 14px; font: 400 14px/1.4 var(--font-body); }
.tg-post__side { display: grid; gap: 10px; align-content: start; }
.tg-post__h { margin: 0; font: 700 30px/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.tg-post__cap { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); cursor: pointer; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-post__cap small { display: block; font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 4px; }
.tg-post__cap input { accent-color: var(--accent); margin-top: 3px; }
.tg-post__cap:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tg-post__chs { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-post__ch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface-000); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; }
.tg-post__ch span { width: 22px; height: 22px; border-radius: 50%; background: var(--sw); color: #fff; display: grid; place-items: center; font: 700 11px/1 var(--font-body); }
.tg-post__ch[aria-pressed="false"] { opacity: .55; }
.tg-post__ch[aria-pressed="true"] { border-color: var(--ink); }
.tg-post__when { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-100); } .tg-post__when b { font: 600 15px/1.2 var(--font-body); color: var(--ink); } .tg-post__when span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
@media (max-width: 680px) { .tg-post { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tg-post__gina { animation: none; } }

/* ===== Gina's gym ===== */
.tg-gym { width: 100%; max-width: 820px; display: grid; gap: var(--space-4); }
.tg-gym__hero { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-100); }
.tg-gym__gina { width: 150px; margin: -56px 0 -20px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-gym__h { margin: 4px 0; font: 800 40px/1 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.tg-gym__hero p { margin: 0 0 12px; font: 400 16px/1.45 var(--font-body); color: var(--ink-muted); } .tg-gym__hero p b { color: var(--ink); }
.tg-gym__stats { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.tg-gym__stats span { display: grid; font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-gym__stats b { font: 800 30px/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); text-transform: none; }
.tg-gym__levelup { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px 10px 78px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2), var(--glow-cream); overflow: visible; animation: tg-pop .6s var(--spring) both; }
.tg-gym__levelup img { position: absolute; left: 4px; bottom: -6px; width: 70px; animation: tg-hover 2.6s ease-in-out infinite; }
.tg-gym__levelup div { flex: 1; min-width: 200px; display: grid; } .tg-gym__levelup b { font: 700 17px/1.2 var(--font-display); color: var(--ink); } .tg-gym__levelup span { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-gym__burst { position: absolute; left: 40px; top: 6px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; box-shadow: 0 -22px 0 #ffcf33, 18px -14px 0 #55b5ff, -18px -14px 0 #ff6fa8, 24px 4px 0 #16a34a, -24px 4px 0 #0068f5; animation: tg-gym-burst 2.4s ease-out infinite; }
@keyframes tg-gym-burst { 0% { scale: .2; opacity: 0; } 15% { opacity: 1; } 60%, 100% { scale: 1.6; opacity: 0; } }
.tg-gym__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.tg-skill { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); transition: translate var(--dur-base) var(--spring); }
.tg-skill:hover { translate: 0 -3px; }
.tg-skill__emo img { width: 52px; height: 52px; animation: tg-hover 3.2s ease-in-out infinite; }
.tg-skill:nth-child(2n) .tg-skill__emo img { animation-delay: -1.4s; }
.tg-skill__body { display: grid; gap: 6px; min-width: 0; }
.tg-skill__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .tg-skill__top b { font: 600 16px/1.2 var(--font-body); color: var(--ink); }
.tg-skill__lv { font: 700 12px/1 var(--font-mono); letter-spacing: .05em; padding: 5px 8px; border-radius: 999px; background: var(--surface-inverse); color: var(--on-inverse); }
.tg-skill__bar { height: 8px; border-radius: 999px; background: var(--surface-200); overflow: hidden; }
.tg-skill__bar i { display: block; height: 100%; border-radius: inherit; background: var(--sk, var(--accent)); box-shadow: 0 0 10px var(--sk, var(--accent)); }
.tg-skill__proof { font: 400 13px/1.35 var(--font-body); color: var(--ink); }
.tg-skill__next { font: 400 13px/1.35 var(--font-body); color: var(--ink-muted); }
.tg-skill--max { background: linear-gradient(var(--surface-000), var(--surface-000)) padding-box, linear-gradient(135deg, #fff4de, #ffcf33) border-box; border: 2px solid transparent; box-shadow: var(--glow-cream); }
.tg-skill--max .tg-skill__lv { background: #ffcf33; color: #132642; }
.tg-gym__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tg-gym__teach, .tg-gym__lib { padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--surface-000); display: grid; gap: 8px; align-content: start; }
.tg-gym__teach { border: 2px dashed var(--hairline-strong); background: var(--surface-100); }
.tg-gym__teach b { font: 700 18px/1.2 var(--font-display); color: var(--ink); } .tg-gym__teach > span { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-gym__ways { display: flex; flex-wrap: wrap; gap: 6px; }
.tg-gym__li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; }
.tg-gym__li img { width: 36px; } .tg-gym__li span { display: grid; min-width: 0; } .tg-gym__li b { font: 600 14px/1.2 var(--font-body); color: var(--ink); } .tg-gym__li small { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
@media (max-width: 640px) { .tg-gym__hero { grid-template-columns: 1fr; } .tg-gym__gina { margin: -40px auto -10px; width: 120px; } .tg-gym__row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tg-gym__gina, .tg-gym__levelup, .tg-gym__levelup img, .tg-skill__emo img { animation: none; } .tg-gym__burst { display: none; } }

/* ===== Skills hub ===== */
.tg-hub { width: 100%; max-width: 860px; display: grid; gap: var(--space-3); }
.tg-hub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.tg-hub__card { border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--surface-000); overflow: hidden; display: grid; grid-template-rows: 70px 1fr; transition: translate var(--dur-base) var(--spring), box-shadow var(--dur-base); }
.tg-hub__card:hover { translate: 0 -4px; box-shadow: var(--elev-2); }
.tg-hub__head { background: color-mix(in srgb, var(--sk) 18%, var(--surface-100)); display: grid; place-items: center; }
.tg-hub__head img { width: 56px; margin-bottom: -24px; animation: tg-hover 3.2s ease-in-out infinite; }
.tg-hub__card:nth-child(2n) .tg-hub__head img { animation-delay: -1.3s; }
.tg-hub__b { padding: 22px 12px 12px; display: grid; gap: 4px; align-content: start; }
.tg-hub__b > b { font: 600 15px/1.25 var(--font-body); color: var(--ink); }
.tg-hub__by { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-hub__src { font: 500 12px/1.3 var(--font-mono); color: var(--accent-strong); }
.tg-hub__foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 6px; } .tg-hub__foot span { font: 400 12px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-hub__remix { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: stretch; padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-100); margin-top: 24px; }
.tg-hub__gina { position: absolute; right: -16px; top: -54px; width: 90px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-hub__pane { padding: 14px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline); display: grid; gap: 6px; align-content: start; }
.tg-hub__pane p { margin: 0; font: 400 15px/1.5 var(--font-body); color: var(--ink); }
.tg-hub__pane--mine { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tg-hub__arrow { align-self: center; font: 700 24px/1 var(--font-display); color: var(--accent); }
.tg-hub__tw { background: var(--accent-soft); color: var(--accent-strong); border-radius: 4px; padding: 0 3px; }
.tg-hub__acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
@media (max-width: 720px) { .tg-hub__grid { grid-template-columns: 1fr 1fr; } .tg-hub__remix { grid-template-columns: 1fr; } .tg-hub__arrow { rotate: 90deg; justify-self: center; } }
@media (max-width: 440px) { .tg-hub__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tg-hub__head img, .tg-hub__gina { animation: none; } }

/* hub fixes */
[data-theme="dark"] .tg-hub__head { background: var(--surface-200); box-shadow: inset 0 3px 0 var(--sk); }
.tg-hub__remix { margin-top: 48px; } .tg-hub__gina { top: -64px; right: -6px; width: 84px; }

/* ===== Agent fleet ===== */
.tg-fleet { width: 100%; max-width: 860px; display: grid; gap: var(--space-4); }
.tg-fleet__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.tg-fleet__head p { margin: 0; font: 400 16px/1.45 var(--font-body); color: var(--ink-muted); max-width: 46ch; }
.tg-fleet__crew { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--surface-100); }
.tg-fleet__lead, .tg-fleet__agent { position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); }
.tg-fleet__lead { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.tg-fleet__lead .tg-avatar { animation: tg-hover 3s ease-in-out infinite; }
.tg-fleet__lead b, .tg-fleet__agent b { font: 600 14px/1.2 var(--font-body); color: var(--ink); }
.tg-fleet__lead > span:not(.tg-avatar), .tg-fleet__agent small { font: 400 12px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-fleet__av { width: 48px; height: 48px; border-radius: 50%; background: var(--ag); color: #fff; display: grid; place-items: center; font: 700 16px/1 var(--font-display); box-shadow: 0 0 0 3px var(--surface-000), 0 0 0 4px var(--hairline); flex: none; }
.tg-fleet__av--gina { background: #e6f0ff; overflow: visible; } .tg-fleet__av--gina img { width: 52px; margin-top: -8px; animation: tg-hover 2.8s ease-in-out infinite; }
.tg-fleet__agent--working .tg-fleet__av:not(.tg-fleet__av--gina) { animation: tg-fleet-breathe 2.4s ease-in-out infinite; }
@keyframes tg-fleet-breathe { 50% { box-shadow: 0 0 0 3px var(--surface-000), 0 0 0 4px var(--hairline), 0 0 18px 4px color-mix(in srgb, var(--ag) 55%, transparent); } }
.tg-fleet__st { font: 600 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.tg-fleet__agent--done .tg-fleet__st { background: var(--live-soft); color: var(--live-ink); }
.tg-fleet__agent--queued .tg-fleet__st { background: var(--surface-200); color: var(--ink-muted); }
.tg-fleet__flow { position: absolute; left: -10px; top: 34px; width: 8px; height: 8px; border-radius: 50%; background: var(--glow-core); box-shadow: 0 0 8px var(--glow-core); opacity: 0; }
.tg-fleet__agent--working .tg-fleet__flow { animation: tg-fleet-flow 1.6s ease-in-out infinite; }
@keyframes tg-fleet-flow { 0% { opacity: 0; translate: -8px 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 14px 0; } }
.tg-fleet__job { border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--surface-000); overflow: hidden; }
.tg-fleet__jobhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--hairline); } .tg-fleet__jobhead b { font: 700 18px/1.2 var(--font-display); color: var(--ink); }
.tg-fleet__row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
.tg-fleet__row:last-child { border-bottom: 0; }
.tg-fleet__piece { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.tg-fleet__to { display: flex; align-items: center; gap: 8px; } .tg-fleet__to b { font: 500 14px/1 var(--font-body); color: var(--ink); }
.tg-fleet__to .tg-fleet__av { width: 30px; height: 30px; font-size: 12px; box-shadow: none; } .tg-fleet__to .tg-fleet__av--gina img { width: 34px; margin-top: -4px; }
.tg-fleet__arrow { color: var(--accent); font-weight: 700; }
.tg-fleet__prog { display: grid; gap: 5px; } .tg-fleet__stt { font: 400 13px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-fleet__row--done .tg-fleet__stt { color: var(--live-ink); }
.tg-fleet__back { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--accent-soft); }
.tg-fleet__back b { font: 700 17px/1.2 var(--font-display); color: var(--ink); } .tg-fleet__back span { flex: 1; min-width: 200px; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
@media (max-width: 760px) { .tg-fleet__crew { grid-template-columns: repeat(3, 1fr); } .tg-fleet__row { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .tg-fleet__lead .tg-avatar, .tg-fleet__av, .tg-fleet__av img, .tg-fleet__flow { animation: none !important; } }

/* ===== CRM light ===== */
.tg-crm { width: 100%; max-width: 900px; display: grid; gap: var(--space-3); }
.tg-crm__sum { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: baseline; font: 400 14px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-crm__sum b { font: 700 20px/1 var(--font-display); color: var(--ink); }
.tg-crm__need b { color: var(--alert-ink); }
.tg-crm__fwd { flex: 1; text-align: right; min-width: 220px; }
.tg-crm__board { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: var(--space-2); overflow-x: auto; padding-bottom: 4px; }
.tg-crm__col { display: grid; align-content: start; gap: 8px; padding: 8px; border-radius: var(--radius-lg); background: var(--surface-100); min-width: 0; }
.tg-crm__colh { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-crm__colh b { font: 700 12px/1 var(--font-mono); padding: 3px 7px; border-radius: 999px; background: var(--surface-000); color: var(--ink); }
.tg-crm__card { display: grid; gap: 3px; padding: 10px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline); transition: translate var(--dur-fast) var(--spring); cursor: grab; }
.tg-crm__card:hover { translate: 0 -2px; box-shadow: var(--elev-1); }
.tg-crm__who { display: flex; align-items: center; gap: 6px; min-width: 0; } .tg-crm__who b { font: 600 14px/1.2 var(--font-body); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-crm__ini { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font: 700 11px/1 var(--font-body); }
.tg-crm__ini--lg { width: 48px; height: 48px; font-size: 17px; }
.tg-crm__what { font: 400 13px/1.3 var(--font-body); color: var(--ink); } .tg-crm__meta { font: 400 12px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-crm__flag { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; justify-self: start; padding: 3px 8px 3px 4px; border-radius: 999px; font: 600 12px/1.1 var(--font-body); }
.tg-crm__flag img { width: 18px; animation: tg-hover 2.6s ease-in-out infinite; }
.tg-crm__flag .tg-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-left: 4px; }
.tg-crm__flag--gina { background: var(--accent-soft); color: var(--accent-strong); }
.tg-crm__flag--alert { background: var(--alert-soft); color: var(--alert-ink); }
.tg-crm__flag--live { background: var(--live-soft); color: var(--live-ink); }
.tg-crm__person { position: relative; display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); margin-top: 20px; }
.tg-crm__gina { position: absolute; right: -14px; top: -58px; width: 96px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-crm__ph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 70px; } .tg-crm__ph div { flex: 1; display: grid; min-width: 200px; } .tg-crm__ph b { font: 700 22px/1.1 var(--font-display); color: var(--ink); } .tg-crm__ph div span { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-crm__tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--hairline); display: grid; gap: 8px; }
.tg-crm__tl li { position: relative; font: 400 14px/1.4 var(--font-body); color: var(--ink); } .tg-crm__tl li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface-000); }
.tg-crm__tl b { display: inline-block; min-width: 56px; font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-crm__next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-md); background: var(--accent-soft); }
.tg-crm__next img { width: 40px; animation: tg-hover 2.6s ease-in-out infinite; } .tg-crm__next div { flex: 1; display: grid; gap: 2px; min-width: 200px; } .tg-crm__next b { font: 600 15px/1.3 var(--font-body); color: var(--ink); } .tg-crm__next div > span:last-child { font: 400 13px/1.3 var(--font-body); color: var(--ink); }
@media (max-width: 720px) { .tg-crm__board { grid-template-columns: 1fr; } .tg-crm__fwd { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .tg-crm__flag img, .tg-crm__gina, .tg-crm__next img { animation: none; } }

/* ===== Business owner kit (shared card) ===== */
.tg-biz { position: relative; width: 100%; max-width: 820px; margin: 0 auto; display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5) var(--space-5); border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-biz__gina { position: absolute; right: -10px; top: -46px; width: 110px; animation: tg-hover 3.2s ease-in-out infinite; filter: var(--float-shadow); pointer-events: none; }
.tg-biz__h { margin: -6px 0 0; padding-right: 96px; font: 700 28px/1.1 var(--font-display); color: var(--ink); }
.tg-biz__p { margin: -8px 0 0; font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-biz .tg-btn--sm { white-space: nowrap; }

/* ===== Money view ===== */
.tg-money__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-3); }
.tg-money__now, .tg-money__kpi { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-100); }
.tg-money__now b { font: 700 38px/1 var(--font-display); color: var(--ink); letter-spacing: -.01em; }
.tg-money__kpi b { font: 700 22px/1.1 var(--font-display); }
.tg-money__kpi small { font: 400 12px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-money__in { color: var(--live-ink); } .tg-money__out { color: var(--alert-ink); }
.tg-money__chart { margin: 0; display: grid; gap: 6px; }
.tg-money__chart svg { width: 100%; height: 150px; display: block; overflow: visible; }
.tg-money__chart path:nth-of-type(2) { stroke-dasharray: none; }
.tg-money__chart figcaption { display: flex; gap: 16px; flex-wrap: wrap; font: 500 12px/1.2 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-money__chart figcaption span:nth-child(2) { flex: 1; text-align: center; }
.tg-money__low { color: var(--alert-ink); }
.tg-money__ask { display: grid; gap: 10px; }
.tg-money__ans { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--accent-soft); }
.tg-money__ans img { width: 34px; flex: none; animation: tg-hover 2.6s ease-in-out infinite; }
.tg-money__ans p { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--ink); } .tg-money__ans b { color: var(--ink); }
.tg-money__list { display: grid; gap: 6px; }
.tg-money__row { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); font: 400 14px/1.3 var(--font-body); color: var(--ink); }
.tg-money__row span { color: var(--ink-muted); font-size: 13px; }

/* ===== Reputation ===== */
.tg-rev__score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font: 400 14px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-rev__score > b { font: 700 40px/1 var(--font-display); color: var(--ink); }
.tg-rev__stars { color: #f5b301; letter-spacing: 1px; font-size: 16px; } .tg-rev__stars i { font-style: normal; color: var(--hairline-strong); }
.tg-rev__score .tg-rev__stars { font-size: 22px; }
.tg-rev__item { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); }
.tg-rev__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tg-rev__h b { font: 600 15px/1.2 var(--font-body); color: var(--ink); }
.tg-rev__h .tg-chip { margin-left: auto; height: 24px; }
.tg-rev__q { margin: 0; font: 400 15px/1.45 var(--font-body); color: var(--ink); }
.tg-rev__reply { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); border-left: 3px solid var(--accent); }
.tg-rev__reply img { width: 28px; flex: none; } .tg-rev__reply p { margin: 0; font: 400 14px/1.45 var(--font-body); color: var(--ink); }
.tg-rev__acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tg-rev__profile { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-100); }
.tg-rev__chk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 14px/1.3 var(--font-body); color: var(--ink); }
.tg-rev__chk::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--live-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat; }
.tg-rev__chk--fix::before { background: var(--alert-soft); content: "!"; display: grid; place-items: center; font: 800 12px/1 var(--font-body); color: var(--alert-ink); }
.tg-rev__chk--fix .tg-btn { margin-left: auto; }

/* ===== Team crew ===== */
.tg-crew__grid { display: grid; grid-template-columns: 90px repeat(5, minmax(84px, 1fr)); gap: 6px; overflow-x: auto; }
.tg-crew__d { font: 500 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); text-align: center; padding: 4px 0; }
.tg-crew__p { display: flex; align-items: center; gap: 8px; font: 600 14px/1 var(--font-body); color: var(--ink); }
.tg-crew__p i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 12px/1 var(--font-body); font-style: normal; color: #fff; background: var(--sw); }
.tg-crew__c { display: grid; place-items: center; min-height: 40px; padding: 4px 6px; border-radius: var(--radius-md); text-align: center; font: 500 13px/1.15 var(--font-body); color: var(--ink); background: color-mix(in srgb, var(--sw) 14%, var(--surface-000)); border: 1px solid color-mix(in srgb, var(--sw) 35%, transparent); cursor: grab; transition: translate var(--dur-fast) var(--spring); }
.tg-crew__c:hover { translate: 0 -2px; }
.tg-crew__c--off { background: var(--surface-100); border: 1px dashed var(--hairline-strong); color: var(--ink-muted); }
.tg-crew__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tg-crew__req, .tg-crew__pay { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--radius-lg); border: 1px solid var(--hairline); font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-crew__req { background: var(--alert-soft); border-color: transparent; }
.tg-crew__req b, .tg-crew__pay b { font: 700 17px/1.2 var(--font-display); color: var(--ink); }
.tg-crew__req span:not(.tg-label), .tg-crew__pay span:not(.tg-label) { color: var(--ink); }
.tg-crew__pay .tg-btn { justify-self: start; margin-top: 4px; }

/* ===== Contracts ===== */
.tg-ctr__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; counter-reset: s; }
.tg-ctr__s { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; font: 500 13px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-ctr__s::after { content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px); height: 2px; background: var(--hairline-strong); }
.tg-ctr__s:last-child::after { display: none; }
.tg-ctr__s i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-200); color: #fff; }
.tg-ctr__s--done { color: var(--ink); } .tg-ctr__s--done i { background: var(--live); } .tg-ctr__s--done::after { background: var(--live); }
.tg-ctr__s--now { color: var(--accent-strong); font-weight: 700; } .tg-ctr__s--now i { background: var(--accent); box-shadow: var(--glow-sm); animation: tg-ctr-pulse 1.8s ease-in-out infinite; }
@keyframes tg-ctr-pulse { 50% { scale: 1.15; } }
.tg-ctr__row { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-3); }
.tg-ctr__doc { position: relative; display: grid; gap: 8px; padding: 16px 16px 40px; border-radius: var(--radius-md); background: var(--surface-000); border: 1px solid var(--hairline-strong); box-shadow: var(--elev-1); }
.tg-ctr__doc b { font: 700 16px/1.25 var(--font-display); color: var(--ink); }
.tg-ctr__doc p { margin: 0; font: 400 14px/1.5 var(--font-body); color: var(--ink); }
.tg-ctr__sig { font: 400 14px/1 var(--font-mono); color: var(--ink-muted); }
.tg-ctr__note { position: absolute; right: 12px; bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; font: 600 12px/1.2 var(--font-body); box-shadow: var(--glow-sm); }
.tg-ctr__co { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-100); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-ctr__co b { font: 700 17px/1.2 var(--font-display); color: var(--ink); } .tg-ctr__co .tg-btn { justify-self: start; margin-top: 4px; }

/* ===== Deadlines ===== */
.tg-dl__item { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.tg-dl__date { display: grid; justify-items: center; padding: 6px 0; border-radius: var(--radius-md); background: var(--surface-100); font: 500 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); gap: 3px; }
.tg-dl__date b { font: 700 18px/1 var(--font-display); color: var(--ink); letter-spacing: 0; text-transform: none; order: 2; }
.tg-dl__item > div { display: grid; gap: 2px; min-width: 0; } .tg-dl__item > div b { font: 600 15px/1.25 var(--font-body); color: var(--ink); } .tg-dl__item > div span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-dl__cd { padding: 5px 10px; border-radius: 999px; background: var(--surface-200); color: var(--ink); font: 600 12px/1 var(--font-mono); white-space: nowrap; }
.tg-dl__cd--soon { background: var(--alert-soft); color: var(--alert-ink); }
.tg-dl__next { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-md); background: var(--accent-soft); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-dl__next img { width: 36px; animation: tg-hover 2.6s ease-in-out infinite; } .tg-dl__next > span { flex: 1; min-width: 200px; }

/* ===== Suppliers ===== */
.tg-sup__alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-md); background: var(--alert-soft); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-sup__alert > span:nth-child(2) { flex: 1; min-width: 220px; }
.tg-sup__row { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr .8fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--hairline); font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-sup__row b { font: 600 14px/1.25 var(--font-body); color: var(--ink); }
.tg-sup__bar { height: 8px; border-radius: 999px; background: var(--surface-200); overflow: hidden; }
.tg-sup__bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.tg-sup__po { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border-radius: var(--radius-md); background: var(--accent-soft); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-sup__po img { width: 36px; animation: tg-hover 2.6s ease-in-out infinite; } .tg-sup__po > span { flex: 1; min-width: 200px; }

/* ===== Phone first ===== */
.tg-phone { width: 300px; flex: none; border-radius: 40px; padding: 12px; background: #132642; box-shadow: 0 0 0 1px var(--hairline-strong), var(--elev-2); }
.tg-phone__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 12px; border-radius: 30px 30px 0 0; background: var(--surface-000); border-bottom: 1px solid var(--hairline); }
.tg-phone__bar img { width: 28px; } .tg-phone__bar b { font: 700 15px/1 var(--font-body); color: var(--ink); } .tg-phone__bar span { margin-left: auto; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); }
.tg-phone__thread { display: grid; gap: 10px; align-content: start; min-height: 340px; padding: 14px 12px 18px; border-radius: 0 0 30px 30px; background: var(--surface-100); }
.tg-phone__me { justify-self: end; max-width: 84%; display: grid; gap: 4px; justify-items: end; }
.tg-phone__me--txt { padding: 8px 14px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: #fff; font: 500 14px/1.3 var(--font-body); }
.tg-phone__vn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px 18px 4px 18px; background: var(--accent); color: #fff; }
.tg-phone__vn small { font: 500 11px/1 var(--font-mono); opacity: .9; }
.tg-phone__wave { display: flex; align-items: center; gap: 2px; height: 22px; } .tg-phone__wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .85; }
.tg-phone__tr { font: italic 400 12px/1.35 var(--font-body); color: var(--ink-muted); text-align: right; }
.tg-phone__g { justify-self: start; max-width: 88%; padding: 10px 12px; border-radius: 18px 18px 18px 4px; background: var(--surface-000); border: 1px solid var(--hairline); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-phone__g--done { display: flex; gap: 6px; align-items: flex-start; background: var(--live-soft); border-color: transparent; color: var(--ink); } .tg-phone__g--done svg { flex: none; margin-top: 4px; color: var(--live-ink); }
.tg-phone__qr { display: flex; gap: 6px; margin-top: 8px; }
.tg-phone__qr button { flex: 1; padding: 7px 4px; border-radius: 999px; border: 1px solid var(--accent); background: transparent; color: var(--accent-strong); font: 600 13px/1 var(--font-body); cursor: pointer; }
.tg-phone__qr button:first-child { background: var(--accent); color: #fff; }
.tg-phone__side { display: grid; gap: 12px; align-content: center; width: 320px; max-width: 100%; }
.tg-phone__notif { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-phone__notif img { width: 32px; flex: none; } .tg-phone__notif div { display: grid; gap: 2px; } .tg-phone__notif b { font: 600 14px/1.25 var(--font-body); color: var(--ink); } .tg-phone__notif span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-phone__notif:not(.tg-phone__notif--batch) { border-left: 4px solid var(--alert); }
.tg-phone__notif--batch { opacity: .92; box-shadow: var(--elev-1); }
.tg-phone__quiet { position: relative; display: grid; gap: 4px; padding: 14px 70px 14px 14px; border-radius: var(--radius-lg); background: var(--accent-soft); font: 400 13px/1.4 var(--font-body); color: var(--ink); }
.tg-phone__quiet b { font: 700 17px/1.2 var(--font-display); color: var(--ink); }
.tg-phone__quiet .tg-switch { position: absolute; right: 14px; top: 14px; }

/* ===== Customer pages ===== */
.tg-cp { box-sizing: border-box; width: 260px; flex: none; display: grid; gap: 10px; align-content: start; min-height: 380px; padding: 18px 16px; border-radius: 30px; background: var(--surface-000); border: 8px solid var(--surface-200); box-shadow: var(--elev-2); }
.tg-cp__brand { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); } .tg-cp__brand b { font: 700 16px/1 var(--font-display); color: var(--ink); }
.tg-cp__slots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tg-cp__slots button { padding: 10px 4px; border-radius: var(--radius-md); border: 1px solid var(--hairline-strong); background: var(--surface-000); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; }
.tg-cp__slots button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: var(--glow-sm); }
.tg-cp .tg-btn { width: 100%; justify-content: center; }
.tg-cp__amt { font: 700 34px/1 var(--font-display); color: var(--ink); }
.tg-cp__line { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-cp__by { margin-top: auto; text-align: center; font: 400 11px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-cp__tl { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--hairline); display: grid; gap: 10px; }
.tg-cp__tl li { position: relative; font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-cp__tl li::before { content: ""; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-200); box-shadow: 0 0 0 3px var(--surface-000); }
.tg-cp__tl li.is-done { color: var(--ink); } .tg-cp__tl li.is-done::before { background: var(--live); }
.tg-cp__tl li.is-now { color: var(--accent-strong); font-weight: 700; } .tg-cp__tl li.is-now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--surface-000), var(--glow-sm); }
.tg-cp__photo { display: grid; place-items: end start; padding: 8px 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-strong); height: 90px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent-soft), var(--surface-200)); }

/* ===== App basics ===== */
.tg-basics { flex: 1 1 340px; min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.tg-set, .tg-bill, .tg-notif { display: grid; gap: 4px; padding: 14px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-1); }
.tg-set__row { display: grid; grid-template-columns: 1fr auto 14px; gap: 10px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--hairline); font: 400 14px/1.3 var(--font-body); cursor: pointer; }
.tg-set__row:last-child { border-bottom: 0; } .tg-set__row b { font-weight: 600; color: var(--ink); } .tg-set__row span { color: var(--ink-muted); font-size: 13px; } .tg-set__row i { font-style: normal; color: var(--ink-muted); font-size: 18px; line-height: 1; }
.tg-set__row:hover { background: var(--surface-100); border-radius: var(--radius-md); }
.tg-bill { gap: 10px; } .tg-bill > b { font: 700 18px/1.2 var(--font-display); color: var(--ink); } .tg-bill .tg-btn { justify-self: start; }
.tg-bill__m { display: grid; grid-template-columns: 120px 1fr 48px; gap: 10px; align-items: center; font: 400 13px/1 var(--font-body); color: var(--ink-muted); } .tg-bill__m span:last-child { text-align: right; color: var(--ink); font-weight: 600; }
.tg-notif__g { margin-top: 8px; font: 500 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-notif__i { display: flex; align-items: center; gap: 10px; padding: 8px 4px; font: 400 14px/1.3 var(--font-body); color: var(--ink); } .tg-notif__i > span:nth-child(2) { flex: 1; }
.tg-states { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tg-empty, .tg-error { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 16px 12px; border-radius: var(--radius-lg); font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-empty { background: var(--surface-100); border: 1px dashed var(--hairline-strong); }
.tg-error { background: var(--alert-soft); }
.tg-empty img, .tg-error img { width: 76px; animation: tg-hover 3s ease-in-out infinite; filter: var(--float-shadow); }
.tg-empty b, .tg-error b { font: 700 15px/1.2 var(--font-display); color: var(--ink); }

@media (max-width: 720px) {
  .tg-biz__h { font-size: 22px; } .tg-biz__gina { width: 84px; top: -36px; }
  .tg-money__top, .tg-crew__row, .tg-ctr__row, .tg-states { grid-template-columns: 1fr; }
  .tg-money__row { grid-template-columns: 1fr auto; } .tg-money__row span { grid-column: 1 / -1; order: 3; }
  .tg-sup__row { grid-template-columns: 1fr auto; } .tg-sup__bar { grid-column: 1 / -1; }
  .tg-ctr__steps { grid-template-columns: repeat(5, minmax(56px, 1fr)); font-size: 12px; }
  .tg-phone, .tg-cp { width: 100%; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .tg-biz__gina, .tg-money__ans img, .tg-dl__next img, .tg-sup__po img, .tg-ctr__s--now i, .tg-empty img, .tg-error img { animation: none; }
  .tg-crew__c { transition: none; }
}

/* ===== Ads ===== */
.tg-ad { --ad-bg: #132642; --ad-ink: #ffffff; --ad-acc: #55B5FF; --ad-glow: rgb(85 181 255 / .45);
  position: relative; container-type: inline-size; aspect-ratio: var(--ar, 16/9); width: 100%; box-sizing: border-box; overflow: visible; border-radius: 3px; background: var(--ad-bg); color: var(--ad-ink); isolation: isolate; }
.tg-ad--blue { --ad-bg: #0068F5; --ad-ink: #ffffff; --ad-acc: #FFF4DE; --ad-glow: rgb(255 255 255 / .35); }
.tg-ad--white { --ad-bg: #ffffff; --ad-ink: #132642; --ad-acc: #0068F5; --ad-glow: rgb(0 104 245 / .22); box-shadow: inset 0 0 0 1px rgb(19 38 66 / .12); }
.tg-ad--mist { --ad-bg: #EAF3FF; --ad-ink: #132642; --ad-acc: #0068F5; --ad-glow: rgb(0 104 245 / .25); }
.tg-ad__copy { position: absolute; left: 5.5cqw; top: 9%; width: 54%; display: grid; gap: 1.6cqw; align-content: start; z-index: 2; }
.tg-ad__h { margin: 0; font: 700 calc(var(--hs) * 1cqw)/0.98 var(--font-display); letter-spacing: -0.02em; color: var(--ad-ink); text-wrap: balance; }
.tg-ad__h em { font-style: normal; color: var(--ad-acc); }
.tg-ad__s { margin: 0; font: 500 calc(var(--hs) * .3cqw)/1.3 var(--font-body); color: var(--ad-ink); opacity: .86; max-width: 34ch; }
.tg-ad__cta { justify-self: start; padding: .55em 1.1em; border-radius: 999px; background: var(--ad-acc); color: var(--ad-bg); font: 700 calc(var(--hs) * .28cqw)/1 var(--font-body); white-space: nowrap; }
.tg-ad--blue .tg-ad__cta { color: #0068F5; }
.tg-ad__lock { position: absolute; left: 5.5cqw; bottom: 7%; display: flex; align-items: center; gap: .5em; z-index: 2; font-size: max(9px, calc(var(--hs) * .3cqw)); }
.tg-ad__lock img { width: 2.1em; height: 2.1em; object-fit: contain; }
.tg-ad__lock b { font: 700 1.25em/1 var(--font-display); color: var(--ad-ink); letter-spacing: -0.01em; } .tg-ad__lock b em { font-style: normal; color: var(--ad-acc); }
.tg-ad--blue .tg-ad__lock b em { color: #ffffff; text-decoration: underline; text-decoration-color: #FFF4DE; text-underline-offset: .15em; }
.tg-ad__url { font: 500 .85em/1 var(--font-mono); letter-spacing: .03em; color: var(--ad-ink); opacity: .75; margin-left: .3em; }
.tg-ad__gina { position: absolute; right: 4%; bottom: 6%; height: 84%; width: auto; max-width: 42%; object-fit: contain; z-index: 1; filter: drop-shadow(0 1.4cqw 1.6cqw rgb(11 22 40 / .35)); animation: tg-hover 3.4s ease-in-out infinite; }
.tg-ad__glow { position: absolute; right: 2%; bottom: 0; width: 44%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, var(--ad-glow), transparent 72%); z-index: 0; pointer-events: none; }
/* Gina breaks the frame (billboard extension) */
.tg-ad--ext .tg-ad__gina { height: 124%; bottom: 4%; }
/* Ultra-wide: row */
.tg-ad--row .tg-ad__copy { left: auto; right: auto; top: 50%; translate: 0 -50%; position: absolute; inset-inline: 13% 22%; width: auto; grid-auto-flow: column; justify-content: start; align-items: center; gap: 2cqw; }
.tg-ad--row .tg-ad__gina { left: 2.5%; right: auto; bottom: 0; height: 118%; max-width: 12%; }
.tg-ad--row .tg-ad__glow { left: 0; right: auto; width: 14%; }
.tg-ad--row .tg-ad__lock { left: auto; right: 2.5%; bottom: 50%; translate: 0 50%; }
.tg-ad--row .tg-ad__lock b { display: none; } .tg-ad--row .tg-ad__lock img { display: none; }
.tg-ad--row .tg-ad__cta { justify-self: auto; }
.tg-ad--row:has(.tg-ad__cta) .tg-ad__lock { display: none; }
.tg-ad--row:has(.tg-ad__cta) .tg-ad__copy { inset-inline: 13% 3%; justify-content: space-between; }
/* Tall: stack */
.tg-ad--stack .tg-ad__copy { left: 8%; right: 8%; top: 7%; width: auto; text-align: left; }
.tg-ad--stack .tg-ad__gina { right: 50%; translate: 50% 0; bottom: 12%; height: 42%; max-width: 78%; }
.tg-ad--stack .tg-ad__glow { left: 10%; right: 10%; width: auto; height: 50%; bottom: 8%; }
.tg-ad--stack .tg-ad__lock { left: 50%; translate: -50% 0; bottom: 3.5%; white-space: nowrap; }
.tg-ad--stack .tg-ad__s { font-size: calc(var(--hs) * .36cqw); }
.tg-ad--stack .tg-ad__cta { font-size: calc(var(--hs) * .42cqw); }
.tg-ad--story .tg-ad__copy { top: 15%; } .tg-ad--story .tg-ad__lock { bottom: 9%; } .tg-ad--story .tg-ad__gina { bottom: 19%; height: 36%; }
.tg-ad--wall { border-radius: 0; } .tg-ad--wall .tg-ad__lock { display: none; } .tg-ad--wall .tg-ad__copy { top: 38%; text-align: center; }
.tg-ad--wall .tg-ad__gina { height: 30%; bottom: 58%; }
.tg-ad--wall:last-child .tg-ad__lock { display: flex; font-size: 7px; }
/* Mounts and context */
.tg-ads__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 18px; padding-top: 14px; }
.tg-ads__row { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.tg-ads__f { margin: 0; display: grid; gap: 10px; max-width: 100%; }
.tg-ooh { position: relative; }
.tg-ooh--board { padding: 10px; background: linear-gradient(#d9e1ec, #c6d0de); border-radius: 4px; box-shadow: var(--elev-2); margin-bottom: 34px; }
.tg-ooh--board::before, .tg-ooh--board::after { content: ""; position: absolute; top: 100%; width: 16px; height: 34px; background: linear-gradient(90deg, #8c9ab0, #b8c3d3, #8c9ab0); }
.tg-ooh--board::before { left: 22%; } .tg-ooh--board::after { right: 22%; }
.tg-ooh--car { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(#e4e9f0, #cfd7e3); box-shadow: inset 0 2px 0 #fff, var(--elev-1); }
.tg-ooh--wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-radius: 6px; background: repeating-linear-gradient(90deg, #dfe6ef 0 22px, #e9eef5 22px 23px); }
.tg-ad__rot { display: grid; } .tg-ad__rot > .tg-ad { grid-area: 1 / 1; }
.tg-ad__f2 { animation: tg-ad-rot 8s steps(1) infinite; }
@keyframes tg-ad-rot { 0% { opacity: 0; } 50% { opacity: 1; } }
:root[data-theme="dark"] .tg-ooh--board, :root[data-theme="dark"] .tg-ooh--car { background: linear-gradient(#24385a, #1b2c49); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
:root[data-theme="dark"] .tg-ooh--wall { background: repeating-linear-gradient(90deg, #1b2c49 0 22px, #22365a 22px 23px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tg-ooh--board, :root:not([data-theme="light"]) .tg-ooh--car { background: linear-gradient(#24385a, #1b2c49); } :root:not([data-theme="light"]) .tg-ooh--wall { background: repeating-linear-gradient(90deg, #1b2c49 0 22px, #22365a 22px 23px); } }
@media (max-width: 720px) { .tg-ooh--car, .tg-ooh--wall { grid-template-columns: 1fr; } .tg-ads__row > .tg-ads__f { width: 100% !important; } }
@media (prefers-reduced-motion: reduce) { .tg-ad__gina, .tg-ad__f2 { animation: none; } .tg-ad__f2 { opacity: 0; } }
.tg-ads__f { min-width: 0; }
.tg-ad__foot { position: absolute; left: 5.5cqw; bottom: 7%; display: flex; align-items: center; gap: 1.4em; z-index: 2; font-size: max(9px, calc(var(--hs) * .3cqw)); }
.tg-ad__foot .tg-ad__lock { position: static; translate: none; font-size: 1em; }
.tg-ad__foot .tg-ad__cta { font-size: 1.15em; }
.tg-ad--stack .tg-ad__foot { left: 50%; translate: -50% 0; bottom: 3.5%; flex-direction: column; gap: .8em; font-size: calc(var(--hs) * .36cqw); }
.tg-ad--story .tg-ad__foot { bottom: 9%; }
.tg-ad--row .tg-ad__copy { inset-inline: 15% 22%; }
.tg-ad--row:has(.tg-ad__cta) .tg-ad__copy { inset-inline: 15% 3%; }

/* ===== Artifact forms -> CRM light ===== */
.tg-form__build, .tg-form__into { flex: 1 1 260px; max-width: 300px; display: grid; gap: 10px; align-content: start; }
.tg-form__doc { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-1); }
.tg-form__doc > b { font: 700 18px/1.2 var(--font-display); color: var(--ink); } .tg-form__doc p { margin: 0; font: 400 13px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-form__fields { display: grid; gap: 6px; margin-top: 4px; }
.tg-form__f { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px dashed var(--hairline-strong); font: 500 13px/1.2 var(--font-body); color: var(--ink); }
.tg-form__map { font: 500 11px/1 var(--font-mono); font-style: normal; letter-spacing: .03em; color: var(--accent-strong); background: var(--accent-soft); padding: 4px 7px; border-radius: 999px; white-space: nowrap; }
.tg-form__ask { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); font: 400 13px/1.35 var(--font-body); color: var(--ink); }
.tg-form__ask img { width: 28px; flex: none; animation: tg-hover 2.6s ease-in-out infinite; }
.tg-form__live { min-height: 0; }
.tg-form__in { display: grid; gap: 4px; font: 500 12px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-form__in input { box-sizing: border-box; width: 100%; padding: 9px 11px; border-radius: var(--radius-md); border: 1px solid var(--hairline-strong); background: var(--surface-000); color: var(--ink); font: 400 14px/1.2 var(--font-body); }
.tg-form__ok { display: flex; gap: 8px; align-items: flex-start; font: 400 12px/1.35 var(--font-body); color: var(--ink-muted); } .tg-form__ok input { accent-color: var(--accent); margin-top: 1px; }
.tg-form__into .tg-crm__card { box-shadow: var(--elev-2); animation: tg-form-land .9s var(--spring) both; }
@keyframes tg-form-land { from { translate: -24px -10px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tg-form__ask img, .tg-form__into .tg-crm__card { animation: none; } }
.tg-form__dest { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-100); font: 400 12px/1.2 var(--font-body); color: var(--ink-muted); } .tg-form__dest b { font: 600 13px/1 var(--font-body); color: var(--accent-strong); }

/* ===== Simple database (Lists) ===== */
.tg-db { width: 100%; max-width: 860px; display: grid; grid-template-columns: 210px 1fr; gap: 16px; }
.tg-db__side { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: var(--radius-lg); background: var(--surface-100); }
.tg-db__l { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: var(--radius-md); cursor: pointer; font: 400 13px/1 var(--font-body); color: var(--ink-muted); position: relative; }
.tg-db__l i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 700 13px/1 var(--font-body); font-style: normal; color: #fff; background: var(--sw); }
.tg-db__l b { font: 600 14px/1 var(--font-body); color: var(--ink); }
.tg-db__l em { position: absolute; right: 34px; font: 600 10px/1 var(--font-mono); font-style: normal; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.tg-db__l.is-on { background: var(--surface-000); box-shadow: var(--elev-1); }
.tg-db__mk { margin-top: 6px; padding: 9px; border-radius: var(--radius-md); border: 1px dashed var(--hairline-strong); background: transparent; color: var(--accent-strong); font: 600 13px/1 var(--font-body); cursor: pointer; }
.tg-db__prof { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: var(--radius-xl); background: var(--surface-000); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-db__ph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .tg-db__ph div { flex: 1; display: grid; gap: 2px; min-width: 160px; } .tg-db__ph b { font: 700 22px/1.1 var(--font-display); color: var(--ink); } .tg-db__ph div span { font: 400 13px/1.3 var(--font-body); color: var(--ink-muted); }
.tg-db__fields { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.tg-db__fields div { padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-100); display: grid; gap: 3px; }
.tg-db__fields dt { font: 500 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); } .tg-db__fields dd { margin: 0; font: 500 14px/1.3 var(--font-body); color: var(--ink); }
.tg-db__fresh { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 600 11px/1.2 var(--font-body); }
.tg-db__links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.tg-db__links span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-000); font: 500 13px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.tg-db__links span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sw); }
.tg-db__add { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--radius-md); background: var(--accent-soft); font: 400 13px/1.4 var(--font-body); color: var(--ink); }
.tg-db__add img { width: 30px; flex: none; animation: tg-hover 2.6s ease-in-out infinite; }

/* ===== Flows ===== */
.tg-flow { width: 100%; max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.tg-flow__say { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--radius-lg); background: var(--surface-000); border: 1px solid var(--hairline-strong); box-shadow: var(--elev-1); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-flow__say img { width: 30px; flex: none; } .tg-flow__say span { flex: 1; }
.tg-flow__tpl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tg-flow__tpl button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface-100); color: var(--ink); font: 500 13px/1 var(--font-body); cursor: pointer; }
.tg-flow__canvas { display: grid; justify-items: center; gap: 22px; padding: 20px 12px; border-radius: var(--radius-xl); background: var(--surface-100); background-image: radial-gradient(var(--hairline) 1px, transparent 1px); background-size: 18px 18px; }
.tg-flow__s { --k: var(--accent); position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; min-width: 300px; padding: 10px 14px; border-radius: 16px; background: var(--surface-000); border: 1px solid var(--hairline); border-left: 5px solid var(--k); box-shadow: var(--elev-1); }
.tg-flow__s:not(:last-child)::after, .tg-flow__canvas > .tg-flow__s::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--hairline-strong); }
.tg-flow__canvas > .tg-flow__s:last-child::after { display: none; }
.tg-flow__s b { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--k); }
.tg-flow__s b img { width: 20px; }
.tg-flow__pick { padding: 6px 10px; border-radius: 10px; background: var(--surface-100); font: 600 14px/1 var(--font-body); color: var(--ink); cursor: pointer; }
.tg-flow__s small { flex-basis: 100%; text-align: center; font: 400 12px/1.2 var(--font-body); color: var(--ink-muted); }
.tg-flow__s--when { --k: var(--accent-strong); } .tg-flow__s--save { --k: var(--live-ink); } .tg-flow__s--if { --k: #8b5cf6; }
.tg-flow__s--gina { --k: var(--accent); min-width: 0; } .tg-flow__s--ask { --k: var(--alert-ink); background: var(--alert-soft); } .tg-flow__s--send { --k: var(--ink); }
.tg-flow__s.is-run { box-shadow: 0 0 0 2px var(--live), var(--elev-1); }
.tg-flow__s.is-now { box-shadow: 0 0 0 2px var(--alert), var(--glow-alert); animation: tg-ctr-pulse 1.8s ease-in-out infinite; }
.tg-flow__branch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(560px, 100%); }
.tg-flow__branch > div { display: grid; justify-items: center; gap: 6px; }
.tg-flow__branch::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--hairline-strong); }
.tg-flow__lane { font: 600 11px/1 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.tg-flow__test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius-md); background: var(--live-soft); font: 400 13px/1.4 var(--font-body); color: var(--ink); } .tg-flow__test > span:nth-child(2) { flex: 1; min-width: 220px; }
@media (max-width: 720px) { .tg-db { grid-template-columns: 1fr; } .tg-db__fields { grid-template-columns: 1fr; } .tg-flow__s { min-width: 0; width: 100%; } .tg-flow__branch { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tg-db__add img, .tg-flow__s.is-now { animation: none; } }

/* ===== Make it rain ===== */
.tg-rain { position: relative; overflow: hidden; width: 100%; max-width: 760px; margin: 0 auto; min-height: 360px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 12px; padding: 24px; box-sizing: border-box; border-radius: var(--radius-xl); background: radial-gradient(120% 90% at 30% 60%, var(--accent-soft), var(--surface-000) 70%); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-rain__b { position: absolute; top: -60px; left: var(--x); width: calc(56px * var(--s)); z-index: 3; pointer-events: none; animation: tg-rain-fall var(--d) cubic-bezier(.35,.1,.6,1) var(--dl) infinite; }
.tg-rain__b i { display: block; animation: tg-rain-flip .7s ease-in-out infinite alternate; filter: drop-shadow(0 4px 6px rgb(11 22 40 / .25)); } .tg-rain__b svg { display: block; width: 100%; }
@keyframes tg-rain-fall { 0% { translate: 0 0; rotate: var(--r); opacity: 0; } 8% { opacity: 1; } 50% { translate: 18px 230px; rotate: calc(var(--r) * -1); } 90% { opacity: 1; } 100% { translate: -10px 470px; rotate: var(--r); opacity: 0; } }
@keyframes tg-rain-flip { from { scale: 1 1; } to { scale: .35 1; } }
.tg-rain__glow { position: absolute; left: 6%; top: 50%; width: 40%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 244 222 / .9), rgb(255 244 222 / 0)); z-index: 0; }
.tg-rain__gina { position: relative; z-index: 2; justify-self: center; width: min(240px, 100%); filter: var(--float-shadow) drop-shadow(0 0 18px rgb(255 244 222 / .8)); animation: tg-pop .7s var(--spring) both, tg-hover 2.4s ease-in-out .7s infinite; }
.tg-rain__win { position: relative; z-index: 4; display: grid; gap: 8px; justify-items: start; padding: 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-000) 88%, transparent); backdrop-filter: blur(6px); box-shadow: var(--elev-1); }
.tg-rain__win b { font: 700 28px/1.1 var(--font-display); color: var(--ink); } .tg-rain__win > span:not(.tg-week__eyebrow) { font: 400 15px/1.4 var(--font-body); color: var(--ink); }
.tg-rain__set { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--surface-100); font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.tg-rain__amt { padding: 2px 8px; border-radius: 8px; background: var(--surface-000); border: 1px solid var(--hairline-strong); }
@media (max-width: 720px) { .tg-rain { grid-template-columns: 1fr; } .tg-rain__gina { width: 160px; } }
@media (prefers-reduced-motion: reduce) {
  .tg-rain__b { animation: none; top: auto; bottom: 18%; opacity: 1; } .tg-rain__b:nth-child(n+4) { display: none; }
  .tg-rain__b:nth-child(1) { left: 8%; rotate: -12deg; } .tg-rain__b:nth-child(2) { left: 22%; rotate: 8deg; } .tg-rain__b:nth-child(3) { left: 34%; rotate: -4deg; }
  .tg-rain__b i, .tg-rain__gina { animation: none; }
}

/* ===== Money cannon ===== */
.tg-cannon { position: relative; overflow: hidden; width: 100%; max-width: 760px; margin: 0 auto; min-height: 400px; box-sizing: border-box; padding: 24px; border-radius: var(--radius-xl); background: radial-gradient(90% 80% at 15% 100%, var(--accent-soft), var(--surface-000) 70%); border: 1px solid var(--hairline); box-shadow: var(--elev-2); }
.tg-cannon__deal { position: relative; z-index: 4; margin-left: auto; width: min(360px, 100%); display: grid; gap: 8px; justify-items: start; padding: 18px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-000) 90%, transparent); backdrop-filter: blur(6px); box-shadow: var(--elev-1); }
.tg-cannon__deal > b { font: 700 26px/1.1 var(--font-display); color: var(--ink); } .tg-cannon__deal > span:not(.tg-week__eyebrow) { font: 400 14px/1.4 var(--font-body); color: var(--ink-muted); }
.tg-cannon__goal { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; font: 500 12px/1 var(--font-body); color: var(--ink-muted); }
.tg-cannon__bar { position: relative; height: 10px; border-radius: 999px; background: var(--surface-200); }
.tg-cannon__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--live), #7be3a6); box-shadow: var(--glow-live); }
.tg-cannon__goal b { color: var(--live-ink); }
.tg-cannon__fire { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; }
.tg-cannon__gun { position: absolute; left: 118px; bottom: 18px; width: 130px; z-index: 3; }
.tg-cannon__barrel { transform-origin: 40px 50px; animation: tg-cannon-kick 3.2s ease-out infinite; }
@keyframes tg-cannon-kick { 0%, 100% { translate: 0 0; } 3% { translate: -8px 6px; } 12% { translate: 0 0; } }
.tg-cannon__flash { position: absolute; left: 206px; bottom: 96px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, #FFF4DE, rgb(255 244 222 / 0)); z-index: 2; opacity: 0; animation: tg-cannon-flash 3.2s ease-out infinite; }
@keyframes tg-cannon-flash { 0% { opacity: 0; scale: .4; } 4% { opacity: 1; scale: 1.4; } 16%, 100% { opacity: 0; scale: 1.8; } }
.tg-cannon__b { position: absolute; left: 214px; bottom: 112px; width: calc(48px * var(--s)); z-index: 2; animation: tg-cannon-x 3.2s linear var(--dl) infinite; }
.tg-cannon__b > span { display: block; animation: tg-cannon-y 3.2s linear var(--dl) infinite; }
.tg-cannon__b i { display: block; animation: tg-rain-flip .45s ease-in-out infinite alternate; } .tg-cannon__b svg { display: block; width: 100%; }
@keyframes tg-cannon-x { 0% { translate: 0 0; opacity: 0; } 2% { opacity: 1; } 75% { translate: var(--vx) 0; opacity: 1; } 85%, 100% { translate: calc(var(--vx) * 1.1) 0; opacity: 0; } }
@keyframes tg-cannon-y { 0% { translate: 0 0; rotate: 0deg; animation-timing-function: cubic-bezier(.2,.7,.4,1); } 34% { translate: 0 var(--vy); animation-timing-function: cubic-bezier(.6,0,.8,.5); } 80%, 100% { translate: 0 260px; rotate: var(--r); } }
.tg-cannon__gina { position: absolute; left: 14px; bottom: 6px; width: 120px; z-index: 3; filter: var(--float-shadow); animation: tg-hover 2.6s ease-in-out infinite; }
@media (max-width: 720px) { .tg-cannon { min-height: 520px; } .tg-cannon__deal { margin: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tg-cannon__barrel, .tg-cannon__flash, .tg-cannon__gina, .tg-cannon__b, .tg-cannon__b > span, .tg-cannon__b i { animation: none; }
  .tg-cannon__b:nth-child(n+4) { display: none; } .tg-cannon__b:nth-child(1) { translate: 40px -60px; rotate: -20deg; } .tg-cannon__b:nth-child(2) { translate: 90px -40px; rotate: 10deg; } .tg-cannon__b:nth-child(3) { translate: 60px -100px; rotate: 30deg; }
}