/*
 * LINEHOUND DESIGN SYSTEM V2 (2026-10-19): the tokens and the shared components for every page of the hub (landing, leaderboard,
 * kennels, model page, builder, training camp, member app, admin). Loaded LAST, after hounds.css / dog-kit.css / builder.css, and
 * written as overrides so nothing those files promise (every data-hook, every state) changes: this file only calms and unifies the look.
 *
 * Owner, 2026-10-19: "less AI slop everywhere", then "super engaging, super fun, super customizable ... like a billion-dollar design
 * team designed this page and the entire hub". The benchmark that set these numbers is docs/design/BENCHMARK_2026-10-19.md.
 *
 *   TYPE      two faces, both already shipped in css/fonts.css (nothing from a CDN): Barlow Condensed for display (the hero, big
 *             numbers, section titles from 28px up, never uppercase, never italic) and Instrument Sans for everything you read.
 *             One scale (12 / 13 / 15 / 17 / 22 / 30 / 48 / 76) with a real jump at the top, because a page with only small and
 *             medium type has no hierarchy. Instrument Sans ships at 400 / 500 / 600 only, so 600 is the heaviest text weight.
 *   COLOUR    near-black ground, three greys, ONE hero accent (green) and the two semantic colours (win green is the accent's
 *             lighter sibling, loss is a soft red, pending amber). Colour appears on numbers, results and the one primary action.
 *   SPACE     a 4/8 ladder: 4 8 12 16 24 32 48 64 96. Nothing else is a margin.
 *   SHAPE     three radii (8 controls, 12 cards, 18 panels) and a pill. Elevation is one hairline plus one soft shadow, in three steps.
 *   MOTION    one easing set and four durations; page-load stagger, count-ups, the studio spring, tab fades, live arrival and the dogs'
 *             own movement all read from these tokens. EVERY animation is inside prefers-reduced-motion: no-preference.
 *
 * What the old skin said still holds: fewer boxes, space and one hairline instead of bordered cards, red and green only on numbers
 * and results, with their words and signs.
 */

:root {
  /* ---- colour ----------------------------------------------------------------------------------------------- */
  --lh-bg: #0B0D10;
  --lh-bg-2: #10141A;                              /* raised: drawers, menus, popovers */
  --lh-ink: #F2F4F8;
  --lh-ink2: #C9D0DB;
  --lh-mute: #8D96A6;
  --lh-faint: #6B7482;
  --lh-line: rgba(255, 255, 255, .07);
  --lh-line-2: rgba(255, 255, 255, .13);
  --lh-soft: rgba(255, 255, 255, .05);             /* a card or chip fill */
  --lh-soft-2: rgba(255, 255, 255, .09);           /* its hover */
  --lh-accent: #2FD07A;                            /* the ONE hero accent */
  --lh-accent-hi: #4BE08F;
  --lh-accent-ink: #04140B;                        /* text on the accent */
  --lh-accent-soft: rgba(47, 208, 122, .14);
  --lh-win: #5BE39A;      --lh-win-soft: rgba(61, 220, 132, .12);
  --lh-loss: #FF8A96;     --lh-loss-soft: rgba(255, 107, 122, .12);
  --lh-pending: #F2B84B;  --lh-pending-soft: rgba(242, 184, 75, .12);

  /* ---- type ------------------------------------------------------------------------------------------------- */
  --lh-font-display: 'Barlow Condensed', 'Arial Narrow', 'Instrument Sans', system-ui, sans-serif;
  --lh-font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-fs-xs: 12px;
  --lh-fs-sm: 13px;
  --lh-fs-base: 15px;
  --lh-fs-md: 17px;
  --lh-fs-lg: 22px;
  --lh-fs-xl: 30px;
  --lh-fs-2xl: clamp(34px, 4.6vw, 48px);
  --lh-fs-hero: clamp(46px, 8.2vw, 84px);
  --lh-track-tight: -.02em;
  --lh-track-display: -.012em;

  /* ---- space: a 4/8 ladder ---------------------------------------------------------------------------------- */
  --lh-s1: 4px;  --lh-s2: 8px;  --lh-s3: 12px;  --lh-s4: 16px;  --lh-s5: 24px;
  --lh-s6: 32px;  --lh-s7: 48px;  --lh-s8: 64px;  --lh-s9: 96px;

  /* ---- shape and elevation ---------------------------------------------------------------------------------- */
  --lh-r-sm: 8px;  --lh-r-md: 12px;  --lh-r-lg: 18px;  --lh-r-pill: 999px;
  --lh-e1: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --lh-e2: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 10px 28px rgba(0, 0, 0, .38);
  --lh-e3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 28px 70px rgba(0, 0, 0, .55);
  --lh-focus: 0 0 0 2px var(--lh-bg), 0 0 0 4px var(--lh-accent);

  /* ---- motion: ONE easing set and four durations ------------------------------------------------------------- */
  --lh-ease: cubic-bezier(.2, .7, .2, 1);          /* arrivals: decelerate */
  --lh-spring: cubic-bezier(.34, 1.56, .64, 1);    /* selections, the drawer, the dog: a small overshoot */
  --lh-ease-io: cubic-bezier(.4, 0, .2, 1);        /* things that move and come back */
  --lh-t-fast: 120ms;  --lh-t-base: 220ms;  --lh-t-slow: 420ms;  --lh-t-hero: 900ms;
  --lh-stagger: 45ms;
}

.hounds-page {
  --hd-bg: var(--lh-bg); --hd-card: transparent; --hd-card-2: var(--lh-soft); --hd-line: var(--lh-line);
  --hd-text: var(--lh-ink); --hd-text-2: var(--lh-ink2); --hd-mute: var(--lh-mute); --hd-accent: var(--lh-accent);
  background: var(--lh-bg); color: var(--lh-ink);
  font-family: var(--lh-font-text); font-size: var(--lh-fs-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.hounds-page ::selection { background: var(--lh-accent-soft); }

/* ---- type ------------------------------------------------------------------------------------------------- */
.hounds-page h1, .hounds-page h2, .hounds-page h3, .hounds-page .hd-h3 {
  font-family: var(--lh-font-text); text-transform: none; font-style: normal; letter-spacing: -.012em; color: var(--lh-ink);
}
.hounds-page .hd-wrap h1 {
  font-family: var(--lh-font-display); font-size: var(--lh-fs-2xl); font-weight: 700; line-height: 1; letter-spacing: var(--lh-track-display);
  margin: var(--lh-s1) 0 var(--lh-s2);
}
.hounds-page .hd-wrap h2 { font-size: var(--lh-fs-md); font-weight: 600; line-height: 1.3; margin: 0 0 var(--lh-s3); }
.hounds-page .hd-h3 { font-size: var(--lh-fs-base); font-weight: 600; margin: var(--lh-s4) 0 6px; }
.hounds-page .hd-lede { font-size: var(--lh-fs-md); color: var(--lh-mute); margin: 0 0 var(--lh-s2); max-width: 46em; }
.hounds-page .hd-muted, .hounds-page .hd-fine { color: var(--lh-mute); }
.hounds-page .hd-muted { font-size: 14px; }
.hounds-page .hd-fine { font-size: var(--lh-fs-xs); }
.hounds-page a { text-underline-offset: 3px; }
.lh-eyebrow { margin: 0 0 var(--lh-s1); font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lh-accent); }
.lh-display { font-family: var(--lh-font-display); font-weight: 700; letter-spacing: var(--lh-track-display); line-height: 1; }

/* ---- layout: space, not boxes ------------------------------------------------------------------------------ */
.hounds-page .hd-wrap { max-width: 1080px; padding: var(--lh-s5) var(--lh-s4) 96px; }
.hounds-page .hd-panel { background: none; border: 0; padding: 0; margin: 0 0 var(--lh-s7); }
.hounds-page .hd-panel + .hd-panel { padding-top: var(--lh-s6); box-shadow: 0 -1px 0 var(--lh-line); }
.hounds-page .hd-panel__head { margin-bottom: var(--lh-s3); }
.hounds-page .hd-pagehead { align-items: flex-end; margin-bottom: var(--lh-s2); }
.hounds-page .hd-back { font-size: var(--lh-fs-sm); }
.hounds-page .hd-back a { color: var(--lh-mute); text-decoration: none; }
.hounds-page .hd-back a:hover { color: var(--lh-ink); }

/* the one disclosure line: small, quiet, no box */
.hounds-page .hd-disclosure, .hounds-page .hd-notice, .hounds-page .hd-paper {
  margin: var(--lh-s1) 0 var(--lh-s5); padding: 0; border: 0; background: none; font-size: var(--lh-fs-xs); color: var(--lh-mute);
}
.hounds-page .hd-disclosure strong, .hounds-page .hd-notice strong, .hounds-page .hd-paper strong { font-weight: 500; color: var(--lh-mute); }
.hounds-page .hd-foot { max-width: 1080px; margin: 0 auto; padding: var(--lh-s5) var(--lh-s4) var(--lh-s6); box-shadow: 0 -1px 0 var(--lh-line); color: var(--lh-mute); font-size: var(--lh-fs-xs); }
.hounds-page .hd-foot p { margin: 0 0 6px; }
.hounds-page .hd-foot a { color: var(--lh-ink2); }

/* ---- components: one button, one chip, one card ------------------------------------------------------------ */
.lh-btn, .hounds-page .btn {
  border-radius: var(--lh-r-sm); clip-path: none; text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--lh-font-text); font-style: normal;
}
.lh-card { background: var(--lh-soft); border-radius: var(--lh-r-lg); padding: var(--lh-s4); box-shadow: var(--lh-e1); }
.lh-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--lh-s3); border-radius: var(--lh-r-pill);
  background: var(--lh-soft); color: var(--lh-ink2); font-size: var(--lh-fs-sm); font-weight: 500;
}
.lh-chip--win { background: var(--lh-win-soft); color: var(--lh-win); }
.lh-chip--loss { background: var(--lh-loss-soft); color: var(--lh-loss); }
.lh-chip--pending { background: var(--lh-pending-soft); color: var(--lh-pending); }

/* ---- controls --------------------------------------------------------------------------------------------- */
.hounds-page .btn, .lh-btn { border-radius: 8px; clip-path: none; text-transform: none; letter-spacing: 0; font-weight: 600; font-family: var(--font-body, 'Instrument Sans', system-ui, sans-serif); font-style: normal; }
.hounds-page .btn--primary { background: var(--lh-accent); border-color: var(--lh-accent); color: #04140B; }
.hounds-page .btn--primary:hover { background: #4BE08F; border-color: #4BE08F; }
.hounds-page .btn--ghost { background: var(--lh-soft); border-color: transparent; color: var(--lh-ink); }
.hounds-page .btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.hounds-page .hd-segs { gap: 4px; }
.hounds-page .hd-seg {
  min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--lh-soft); color: var(--lh-ink2);
  font-size: 13px; font-weight: 500; transition: background-color var(--lh-t-fast) var(--lh-ease), color var(--lh-t-fast) var(--lh-ease);
}
.hounds-page .hd-seg:hover { background: rgba(255, 255, 255, .1); }
.hounds-page .hd-seg[aria-pressed="true"] { background: var(--lh-ink); color: #0B0D10; font-weight: 600; }
.hounds-page .hd-filters { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 14px; }
.hounds-page input[type="text"], .hounds-page input[type="number"], .hounds-page select, .hounds-page textarea {
  background: var(--lh-soft); border: 1px solid transparent; border-radius: 8px; color: var(--lh-ink);
}
.hounds-page input:focus, .hounds-page select:focus, .hounds-page textarea:focus { border-color: var(--lh-accent); outline: none; }
.hounds-page :focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; }

/* ---- tabs ------------------------------------------------------------------------------------------------- */
.lh-tabs { display: flex; gap: 2px; margin: 8px 0 26px; padding: 0; overflow-x: auto; scrollbar-width: none; box-shadow: 0 1px 0 var(--lh-line); }
.lh-tabs::-webkit-scrollbar { display: none; }
.lh-tabs [role="tab"] {
  position: relative; flex: none; height: 42px; padding: 0 14px; border: 0; background: none; color: var(--lh-mute, #8D96A6);
  font: 500 14px/1 var(--font-body, 'Instrument Sans', system-ui, sans-serif); cursor: pointer; transition: color var(--lh-t-fast);
}
.lh-tabs [role="tab"]:hover { color: var(--lh-ink, #EEF1F5); }
.lh-tabs [role="tab"][aria-selected="true"] { color: var(--lh-ink, #EEF1F5); }
.lh-tabs [role="tab"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--lh-accent, #2FD07A);
  transform: scaleX(0); transform-origin: 50% 50%;
}
.lh-tabs [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.lh-tabs [role="tab"][hidden] { display: none; }
.lh-tabpanel[hidden] { display: none; }

/* ---- tables and tickets: hairlines only -------------------------------------------------------------------- */
.hounds-page .hd-tablewrap { border: 0; }
.hounds-page .hd-table { border: 0; border-collapse: collapse; background: none; }
.hounds-page .hd-table th {
  background: none; border: 0; box-shadow: inset 0 -1px 0 var(--lh-line); color: var(--lh-mute); font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.hounds-page .hd-table td { border: 0; box-shadow: inset 0 -1px 0 var(--lh-line); }
.hounds-page .hd-table tbody tr { transition: background-color var(--lh-t-fast) var(--lh-ease); }
.hounds-page .hd-table tbody tr:hover { background: var(--lh-soft); }
.hounds-page .hd-qual__title, .hounds-page .hd-qual__ranked { font-size: 14px; font-weight: 600; color: var(--lh-ink2); }
.hounds-page .hd-pill, .hounds-page .hd-st, .hounds-page .hd-chip, .hounds-page .hd-typechip, .hounds-page .hd-badge, .hounds-page .hd-style, .hounds-page .hd-chip-cat {
  border-radius: 999px; border: 0; background: var(--lh-soft); color: var(--lh-ink2); font-weight: 500; padding: 2px 10px;
}
.hounds-page .hd-chip-cat { border-left: 0; }
.hounds-page .hd-typechip { border-left: 0; }
.hounds-page .hd-res { border-radius: 999px; border: 0; padding: 2px 10px; font-weight: 600; font-size: 12px; }
.hounds-page .hd-res--won { background: rgba(61, 220, 132, .12); color: #5BE39A; }
.hounds-page .hd-res--lost { background: rgba(255, 107, 122, .12); color: #FF8A96; }
.hounds-page .hd-res--push, .hounds-page .hd-res--ungraded { background: var(--lh-soft); color: var(--lh-ink2); }
.hounds-page .hd-res--pending { background: rgba(242, 184, 75, .12); color: #F2B84B; }
.hounds-page .hd-res--pending::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.hounds-page .hd-kpi { background: none; border: 0; padding: 0; }
.hounds-page .hd-kpis { gap: 28px 40px; }
.hounds-page .hd-kpi__label { font-size: 12px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--lh-mute); }
.hounds-page .hd-kpi__big { font-family: var(--lh-font-display); font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.hounds-page .hd-state { border: 0; border-radius: 12px; background: var(--lh-soft); font-size: 14px; }
.hounds-page .hd-legend-box { background: none; border: 0; }
.hounds-page details > summary { cursor: pointer; color: var(--lh-ink2); font-size: 13.5px; }

/* ---- the dog page head ------------------------------------------------------------------------------------- */
.hounds-page .hd-modelhead { margin-bottom: 8px; }
.hounds-page .hd-actions { margin: 6px 0 18px; }
.hounds-page .dk-top .dk-panel { background: var(--lh-soft); border-radius: 16px; padding: 20px; box-shadow: none; margin-bottom: 28px; }
.hounds-page .dk-top .dk-panel h2 { margin-bottom: 6px; }
.hounds-page .dk-panel { border: 0; }

/* ---- the builder: quieter cards ---------------------------------------------------------------------------- */
.hounds-page .bd-card { background: var(--lh-soft); border: 0; border-radius: 12px; }
.hounds-page .bd-step__no { font-size: 12px; font-weight: 600; color: var(--lh-accent); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.hounds-page .bd-advanced { margin: 12px 0 4px; }
.hounds-page .bd-advanced > summary {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--lh-soft); font-weight: 500; list-style: none;
}
.hounds-page .bd-advanced > summary::-webkit-details-marker { display: none; }
.hounds-page .bd-advanced[open] > summary { background: rgba(255, 255, 255, .1); margin-bottom: 14px; }
.hounds-page .bd-chips { gap: 6px; }
.hounds-page .bd-step .bd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.hounds-page .bd-step .bd-chips::-webkit-scrollbar { display: none; }
.hounds-page .bd-chips button, .hounds-page .bd-chip, .hounds-page .dk-chipbtn {
  flex: none; white-space: nowrap; border: 0; border-radius: 999px; background: var(--lh-soft); color: var(--lh-ink2); font-size: 13px; padding: 7px 13px; clip-path: none;
}
.hounds-page .bd-chips button:hover, .hounds-page .dk-chipbtn:hover { background: rgba(255, 255, 255, .1); }

/* ---- skeletons: shimmer instead of "Loading..." ------------------------------------------------------------ */
.lh-skel {
  display: block; border-radius: 12px; min-height: 96px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .09) 45%, rgba(255, 255, 255, .04) 90%);
  background-size: 220% 100%;
}
.lh-skel--rows { height: 148px; -webkit-mask: repeating-linear-gradient(#000 0 30px, transparent 30px 44px); mask: repeating-linear-gradient(#000 0 30px, transparent 30px 44px); }
.lh-skel--kpis { height: 62px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 110px, transparent 110px 150px); mask: repeating-linear-gradient(90deg, #000 0 110px, transparent 110px 150px); }
.lh-skel--chart { height: 220px; }
.lh-skel--cards { height: 190px; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(33.3% - 12px), transparent calc(33.3% - 12px) 33.3%); mask: repeating-linear-gradient(90deg, #000 0 calc(33.3% - 12px), transparent calc(33.3% - 12px) 33.3%); }
.hd-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- the live dot and the confetti layer ------------------------------------------------------------------- */
.lh-live { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--lh-accent); position: relative; vertical-align: 1px; }
.lh-confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.lh-confetti i { position: absolute; border-radius: 2px; will-change: transform, opacity; }

/* ---- the hound rig (web/js/dog-rig.js): poses are attributes, shown by CSS; no pose needs motion to be understood ----
   data-pose is idle | happy | sad | thinking | celebrate, which draw the expressions idle | grin | snarl | focus | howl. */
.dk-badge { display: block; overflow: visible; flex: none; }
.dk-badge .dk-p { display: none; }
.dk-badge .dk-head, .dk-badge .dk-body, .dk-badge .dk-clip, .dk-badge .dk-paws, .dk-badge .dk-paw {
  transform-box: view-box; transform-origin: 60px 92px;
}
.dk-badge .dk-eyes, .dk-badge .dk-ear, .dk-badge .dk-dot, .dk-badge .dk-spark, .dk-badge .dk-glint { transform-box: fill-box; transform-origin: 50% 50%; }
.dk-badge .dk-ear--l { transform-origin: 85% 12%; }
.dk-badge .dk-ear--r { transform-origin: 15% 12%; }
.dk-badge .dk-paws { display: none; }

.dk-badge[data-pose="idle"] .dk-p--mouth.dk-p--idle, .dk-badge[data-pose="happy"] .dk-p--mouth.dk-p--happy,
.dk-badge[data-pose="sad"] .dk-p--mouth.dk-p--sad, .dk-badge[data-pose="thinking"] .dk-p--mouth.dk-p--thinking,
.dk-badge[data-pose="celebrate"] .dk-p--mouth.dk-p--celebrate { display: inline; }
.dk-badge[data-pose="idle"] .dk-p--eyes.dk-p--open, .dk-badge[data-pose="happy"] .dk-p--eyes.dk-p--happy,
.dk-badge[data-pose="celebrate"] .dk-p--eyes.dk-p--celebrate, .dk-badge[data-pose="sad"] .dk-p--eyes.dk-p--sad,
.dk-badge[data-pose="thinking"] .dk-p--eyes.dk-p--thinking { display: inline; }
.dk-badge[data-pose="sad"] .dk-p--rage, .dk-badge[data-pose="thinking"] .dk-p--thought, .dk-badge[data-pose="happy"] .dk-p--gleam,
.dk-badge[data-pose="celebrate"] .dk-p--sparkles, .dk-badge[data-pose="celebrate"] .dk-p--sound { display: inline; }
.dk-badge[data-pose="celebrate"] .dk-paws { display: inline; }

/* a pose still reads with every animation off: the head sits differently (snarl low, focus cocked, howl thrown back), the ears pin, the paws are up */
.dk-badge[data-pose="sad"] .dk-head { transform: translateY(3px) rotate(2deg); }
.dk-badge[data-pose="sad"] .dk-ear--l { transform: rotate(10deg); }
.dk-badge[data-pose="sad"] .dk-ear--r { transform: rotate(-10deg); }
.dk-badge[data-pose="thinking"] .dk-head { transform: rotate(-5deg); }
.dk-badge[data-pose="happy"] .dk-head { transform: translateY(-1px) rotate(2deg); }
.dk-badge[data-pose="celebrate"] .dk-head { transform: translateY(-4px) rotate(-6deg); }
.dk-badge[data-pose="celebrate"] .dk-paw--l { transform: translateY(-9px) rotate(-12deg); }
.dk-badge[data-pose="celebrate"] .dk-paw--r { transform: translateY(-9px) rotate(12deg); }

/* ---- MOTION: everything below is off for prefers-reduced-motion -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lh-skel { animation: lh-shimmer 1.5s linear infinite; }
  .lh-tabs [role="tab"]::after { transition: transform var(--lh-t-base) var(--lh-ease); }
  .lh-tabpanel:not([hidden]) { animation: lh-fade var(--lh-t-base) var(--lh-ease) both; }

  /* rows, tickets and cards rise in once, when they first arrive (fx.js marks them data-rise; a click never replays it) */
  [data-rise] { animation: lh-rise var(--lh-t-slow) var(--lh-ease) both; animation-delay: calc(var(--r, 0) * 40ms); }

  .lh-live::after, .hounds-page .hd-res--pending::before { animation: lh-ping 1.8s var(--lh-ease) infinite; }
  .lh-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--lh-accent); }

  .lh-btn:active, .hounds-page .btn:active, .kn-act:active { transform: scale(.97); }

  /* the dog: it breathes, blinks and flicks an ear; each pose adds its own movement */
  .dk-badge .dk-body { animation: dk-breathe 4.4s ease-in-out infinite; }
  .dk-badge .dk-head { animation: dk-bob 4.2s ease-in-out infinite; }
  .dk-badge .dk-eyes { animation: dk-blink 5.6s infinite; }
  .dk-badge .dk-ear--l { animation: dk-ear 7s ease-in-out infinite; }
  .dk-badge .dk-ear--r { animation: dk-ear 7s ease-in-out 1.3s infinite reverse; }
  .dk-badge[data-pose="idle"] .dk-glint { animation: dk-glint 6.4s ease-in-out infinite; }
  .dk-badge[data-pose="sad"] .dk-p--rage { animation: dk-rage 2.4s ease-in-out infinite; }
  .dk-badge[data-pose="celebrate"] .dk-p--sound { animation: dk-pulse .8s ease-in-out infinite alternate; }
  .dk-badge[data-pose="happy"] .dk-head { animation: dk-wiggle 1.5s ease-in-out infinite; }
  .dk-badge[data-pose="sad"] .dk-head { animation: dk-slump 5.5s ease-in-out infinite; }
  .dk-badge[data-pose="thinking"] .dk-head { animation: dk-ponder 3.2s ease-in-out infinite; }
  .dk-badge[data-pose="thinking"] .dk-dot { animation: dk-dot 1.5s ease-in-out infinite; }
  .dk-badge[data-pose="thinking"] .dk-dot--2 { animation-delay: .2s; }
  .dk-badge[data-pose="thinking"] .dk-dot--3 { animation-delay: .4s; }
  .dk-badge[data-pose="celebrate"] .dk-clip { animation: dk-jump .62s var(--lh-spring, cubic-bezier(.34, 1.56, .64, 1)) infinite alternate; }
  .dk-badge[data-pose="celebrate"] .dk-head { animation: dk-wiggle .9s ease-in-out infinite; }
  .dk-badge[data-pose="celebrate"] .dk-paw--l { animation: dk-wave-l .5s ease-in-out infinite alternate; }
  .dk-badge[data-pose="celebrate"] .dk-paw--r { animation: dk-wave-r .5s ease-in-out .12s infinite alternate; }
  .dk-badge[data-pose="celebrate"] .dk-spark { animation: dk-twinkle 1.1s ease-in-out infinite; }
  .dk-badge[data-pose="celebrate"] .dk-spark--2 { animation-delay: .25s; }
  .dk-badge[data-pose="celebrate"] .dk-spark--3 { animation-delay: .5s; }
  .dk-badge[data-pose="celebrate"] .dk-spark--4 { animation-delay: .75s; }
  .kn-card:hover .dk-badge[data-pose="idle"] .dk-head, .kn-kcard:hover .dk-badge[data-pose="idle"] .dk-head { animation: dk-perk .6s var(--lh-ease) 1, dk-bob 4.2s ease-in-out .6s infinite; }
}

@keyframes lh-shimmer { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes lh-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lh-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lh-ping { 0% { box-shadow: 0 0 0 0 rgba(47, 208, 122, .55); transform: scale(1); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47, 208, 122, 0); } }
@keyframes dk-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-1.6px) rotate(-1deg); } }
@keyframes dk-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.018); } }
@keyframes dk-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes dk-ear { 0%, 88%, 100% { transform: rotate(0deg); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(3deg); } }
@keyframes dk-wiggle { 0%, 100% { transform: rotate(0deg) translateY(0); } 20% { transform: rotate(-5deg) translateY(-2px); } 50% { transform: rotate(5deg) translateY(-3px); } 80% { transform: rotate(-3deg) translateY(-1px); } }
@keyframes dk-slump { 0%, 100% { transform: translateY(3px) rotate(2.5deg); } 50% { transform: translateY(4px) rotate(3.4deg); } }
@keyframes dk-ponder { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(-6deg) translateY(-1px); } }
@keyframes dk-dot { 0%, 100% { transform: scale(.6); opacity: .45; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes dk-glint { 0%, 70%, 100% { transform: translateX(0); opacity: 1; } 78% { transform: translateX(2.4px); opacity: .5; } 86% { transform: translateX(-1px); opacity: 1; } }
@keyframes dk-rage { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes dk-pulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes dk-jump { from { transform: translateY(2px); } to { transform: translateY(-6px); } }
@keyframes dk-wave-l { from { transform: translateY(-9px) rotate(-12deg); } to { transform: translateY(-13px) rotate(-4deg); } }
@keyframes dk-wave-r { from { transform: translateY(-9px) rotate(12deg); } to { transform: translateY(-13px) rotate(4deg); } }
@keyframes dk-twinkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@keyframes dk-perk { 0% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-3px) rotate(-6deg); } 70% { transform: translateY(-1px) rotate(3deg); } 100% { transform: translateY(0) rotate(0); } }

/* ---- phones ----------------------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .hounds-page .hd-wrap { padding: 20px 16px 40px; }
  .hounds-page .hd-panel { margin-bottom: 32px; }
  .hounds-page .hd-kpi__big { font-size: 32px; }
}

/* the type-of-model chips sit behind one quiet disclosure */
.hounds-page .hd-morefilters { flex-basis: 100%; }
.hounds-page .hd-morefilters > summary { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: none; color: var(--lh-mute); font-size: 13px; list-style: none; box-shadow: inset 0 0 0 1px var(--lh-line); }
.hounds-page .hd-morefilters > summary::-webkit-details-marker { display: none; }
.hounds-page .hd-morefilters[open] > summary { color: var(--lh-ink); }

/* "How this works": the long explanation lives behind one small disclosure instead of a paragraph under every heading */
.lh-how { margin: 0 0 12px; }
.lh-how > summary { display: inline; color: var(--lh-mute); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; list-style: none; cursor: pointer; }
.lh-how > summary::-webkit-details-marker { display: none; }
.lh-how > summary:hover { color: var(--lh-ink); }
.lh-how[open] > p { margin-top: 8px; max-width: 46em; }

/* the follow / share / download row: soft pills, no outlines */
.hounds-page .hd-actions .btn { min-height: 36px; padding: 0 16px; font-size: 13.5px; }
.hounds-page .hd-follow[aria-pressed="true"] { background: rgba(47, 208, 122, .15); color: #5BE39A; }
.hounds-page .hd-mono { border-radius: 14px; border: 0; }
.hounds-page .hd-modelhead .dk-badge { border-radius: 14px; }

/* an empty chart is one short line, not a big dashed frame; the status sentence is said once */
.hounds-page .hd-chart:has(.hd-chart__empty) .hd-chart__svg { max-height: 84px; }
.hounds-page .hd-chart__frame { stroke: none; }
.hounds-page .hd-chart__empty-note, .hounds-page .hd-chart__caption:empty { display: none; }
.hounds-page .hd-verdict__meaning { display: none; }
.hounds-page .hd-actions .btn { background: var(--lh-soft); border: 0; color: var(--lh-ink); }
.hounds-page .hd-actions .btn:hover { background: rgba(255, 255, 255, .1); }

/* fieldsets: a small label, no frame */
.hounds-page .hd-fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.hounds-page .hd-fieldset > legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lh-mute); }
.hounds-page .hd-col-clv { min-width: 128px; }

/* plain links: quiet, with a soft underline; the kennel link is the one accent link */
.hounds-page .hd-wrap a:not([class]) { color: var(--lh-ink2); text-decoration-color: rgba(255, 255, 255, .28); }
.hounds-page .hd-wrap a:not([class]):hover { color: var(--lh-ink); }
.hounds-page a.hd-kennellink { color: var(--lh-accent); text-decoration: none; }
.hounds-page a.hd-kennellink:hover { text-decoration: underline; }

/* the builder: steps without boxes, soft buttons */
.hounds-page .bd-step { border: 0; background: none; padding: 0; }
.hounds-page .bd-empty, .hounds-page .bd-sentences, .hounds-page .bd-read, .hounds-page .bd-diff { border: 0; border-radius: 12px; background: var(--lh-soft); }
.hounds-page .bd-sentences { border-left: 0; }
.hounds-page .bd-wrap .btn--ghost, .hounds-page .bd-actions .btn--ghost { background: var(--lh-soft); border: 0; color: var(--lh-ink); }
.hounds-page .bd-dogrow, .hounds-page .bd-preview, .hounds-page .bd-mine { border: 0; border-radius: 14px; background: var(--lh-soft); }
.hounds-page .bd-preview, .hounds-page .bd-mine { padding: 16px; }
.hounds-page .bd-english { border-radius: 12px; }
.hounds-page .bd-card { padding: 16px; }
.hounds-page .bd-sentences { padding: 12px 14px; }

/* the dog kit, quieter: soft fills and radii in place of outlines and left bars */
.hounds-page .dk-chip { border: 0; border-radius: 999px; background: var(--lh-soft); padding: 2px 10px; }
.hounds-page .dk-chip--warn { background: rgba(242, 184, 75, .12); }
.hounds-page .dk-chip--good { background: rgba(61, 220, 132, .12); }
.hounds-page .dk-chip--bad { background: rgba(255, 107, 122, .12); }
.hounds-page .dk-pick, .hounds-page .dk-miss, .hounds-page .dk-event, .hounds-page .dk-ticket { border: 0; border-radius: 12px; background: var(--lh-soft); }
.hounds-page .dk-msg { border: 0; border-radius: 14px; }
.hounds-page .dk-msg--you { background: rgba(47, 208, 122, .16); }
.hounds-page .dk-msg--dog { background: var(--lh-soft); }
.hounds-page .dk-chipbtn, .hounds-page .dk-opt, .hounds-page .dk-vote__btn { border: 0; border-radius: 999px; background: var(--lh-soft); min-height: 36px; }
.hounds-page .dk-opt[aria-pressed="true"], .hounds-page .dk-vote__btn[aria-pressed="true"], .hounds-page .dk-chipbtn[aria-pressed="true"] { background: rgba(47, 208, 122, .18); color: #fff; }
.hounds-page .dk-swatch { border-width: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.hounds-page .dk-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #0F1317, 0 0 0 4px var(--lh-accent); }
.hounds-page .dk-preview { border: 0; border-radius: 18px; background: var(--lh-soft); }
.hounds-page .dk-camp-dog { border: 0; border-radius: 18px; background: rgba(255, 255, 255, .04); }
.hounds-page .dk-preview .dk-badge { border-radius: 22px; }
.hounds-page .dk-actions .btn, .hounds-page .dk-pick__actions .btn { min-height: 38px; }
.hounds-page .dk-askrow input { border-radius: 999px; padding: 0 16px; }

/* ======================================================================================================================
 * MOTION CHOREOGRAPHY (design system v2). One timing/easing set (the --lh-t-* and --lh-ease/--lh-spring tokens above).
 *   load      the page head, tabs and first panels rise in a short stagger (children 1..6 of the page wrapper)
 *   numbers   count-ups (js/fx.js, data-count) ; rows and tickets rise as they arrive (data-rise, js/fx.js)
 *   results   a win lands with a small pop, a loss with a short settle, a pending ticket pulses
 *   skeletons shimmer where a chart or a list is about to be
 * All of it is inside prefers-reduced-motion: no-preference; reduced motion gets the finished page and nothing that moves.
 * ==================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hounds-page .hd-wrap > :nth-child(-n + 6) { animation: lh-rise var(--lh-t-slow) var(--lh-ease) both; }
  .hounds-page .hd-wrap > :nth-child(2) { animation-delay: calc(var(--lh-stagger) * 1); }
  .hounds-page .hd-wrap > :nth-child(3) { animation-delay: calc(var(--lh-stagger) * 2); }
  .hounds-page .hd-wrap > :nth-child(4) { animation-delay: calc(var(--lh-stagger) * 3); }
  .hounds-page .hd-wrap > :nth-child(5) { animation-delay: calc(var(--lh-stagger) * 4); }
  .hounds-page .hd-wrap > :nth-child(6) { animation-delay: calc(var(--lh-stagger) * 5); }
  [data-rise] .hd-res--won, [data-rise] .lbres--won, [data-rise] .kn-card[data-mood="happy"] .kn-card__last { animation: lh-pop var(--lh-t-slow) var(--lh-spring) both; animation-delay: calc(var(--r, 0) * var(--lh-stagger) + 160ms); }
  [data-rise] .hd-res--lost, [data-rise] .lbres--lost { animation: lh-settle var(--lh-t-slow) var(--lh-ease-io) both; animation-delay: calc(var(--r, 0) * var(--lh-stagger) + 160ms); }
  .lbrace__chart:empty { min-height: 220px; border-radius: var(--lh-r-md); background: linear-gradient(90deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .03) 90%); background-size: 220% 100%; animation: lh-shimmer 1.5s linear infinite; }
  .lh-btn, .hounds-page .btn, .kn-act { transition: background-color var(--lh-t-fast) var(--lh-ease), transform var(--lh-t-fast) var(--lh-ease), box-shadow var(--lh-t-base) var(--lh-ease); }
  .hounds-page .btn--primary:hover, .lh-btn--solid:hover { transform: translateY(-1px); }
  .hounds-page .btn--primary:active, .lh-btn--solid:active { transform: translateY(0) scale(.97); }
  .hounds-page .hd-ticket:hover, .hounds-page .dk-ticket:hover { transform: translateX(2px); }
  .hounds-page .hd-ticket, .hounds-page .dk-ticket { transition: transform var(--lh-t-base) var(--lh-ease), background-color var(--lh-t-fast) var(--lh-ease); }
}
@keyframes lh-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes lh-settle { 0% { transform: translateY(-4px); opacity: 0; } 55% { transform: translateY(2px); opacity: 1; } 100% { transform: none; opacity: 1; } }

/* focus: one ring, everywhere */
.hounds-page :focus-visible, .landing :focus-visible, .lh-nav :focus-visible { outline: 2px solid var(--lh-accent); outline-offset: 2px; border-radius: var(--lh-r-sm); }

/* ---- the leaders: big dog cards above the leaderboard table ------------------------------------------------------- */
.lb-podium { margin: 0 0 var(--lh-s6); }
.lb-podium__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--lh-s3); margin-bottom: var(--lh-s3); }
.hounds-page .lb-podium__title { margin: 0; font-size: var(--lh-fs-md); font-weight: 600; }
.lb-podium__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lh-s3); align-items: stretch; }
.lb-podium__card {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: var(--lh-s4) var(--lh-s3) var(--lh-s3); text-align: center;
  border-radius: var(--lh-r-lg); background: var(--lh-soft); box-shadow: var(--lh-e1);
  transition: transform var(--lh-t-base) var(--lh-spring), background-color var(--lh-t-fast) var(--lh-ease);
}
.lb-podium__card:hover { background: var(--lh-soft-2); transform: translateY(-3px); }
.lb-podium__card--lead { background: linear-gradient(180deg, rgba(47, 208, 122, .13), rgba(47, 208, 122, .03) 70%), var(--lh-soft); box-shadow: inset 0 0 0 1px rgba(47, 208, 122, .35), var(--lh-e2); }
.lb-podium__face { display: block; line-height: 0; margin-bottom: var(--lh-s2); }
.lb-podium__rank { font-size: var(--lh-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lh-mute); }
.lb-podium__card--lead .lb-podium__rank { color: var(--lh-accent); }
.hounds-page .lb-podium__name { font-weight: 600; color: var(--lh-ink); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hounds-page .lb-podium__name:hover { text-decoration: underline; }
.lb-podium__bank { font-family: var(--lh-font-display); font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.lb-podium__card--lead .lb-podium__bank { font-size: 42px; }
.lb-podium__ret { font-size: var(--lh-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-podium__ret--up { color: var(--lh-win); }
.lb-podium__ret--down { color: var(--lh-loss); }
.lb-podium__ret--flat { color: var(--lh-mute); }
.lb-podium__rec { font-size: var(--lh-fs-xs); color: var(--lh-mute); }
@media (max-width: 640px) {
  .lb-podium__row { grid-template-columns: minmax(0, 1fr); }
  .lb-podium__card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "face name bank" "face rank ret" "face rec rec"; justify-items: start; align-items: center; column-gap: var(--lh-s3); padding: var(--lh-s3); text-align: left; }
  .lb-podium__face { grid-area: face; margin: 0; }
  .lb-podium__name { grid-area: name; }
  .lb-podium__rank { grid-area: rank; }
  .lb-podium__bank, .lb-podium__card--lead .lb-podium__bank { grid-area: bank; font-size: 28px; justify-self: end; margin: 0; }
  .lb-podium__ret { grid-area: ret; justify-self: end; }
  .lb-podium__rec { grid-area: rec; }
}

/* ======================================================================================================================
 * PAGE TOUCH-UPS on the v2 system: the hub's one accent for every "live" tint, the model page, the training camp.
 * ==================================================================================================================== */
.hounds-page { --live: var(--lh-accent-hi); --live-lit: #9CF0C3; --live-label: #9CF0C3; --live-2: var(--lh-accent); --fresh: var(--lh-accent); }
.hounds-page .hd-chart__tick, .hounds-page .hd-chart__zero-label { font-family: var(--lh-font-text); font-size: 11px; fill: var(--lh-faint); }
.hounds-page .hd-chart__zero { stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 4 5; opacity: 1; }
.hounds-page .hd-chart-title { color: var(--lh-mute); font-weight: 500; font-size: var(--lh-fs-sm); margin: var(--lh-s1) 0 var(--lh-s2); }
.hounds-page .hd-chart__empty { font-size: var(--lh-fs-sm); }

/* the model page */
.hounds-page .dk-top { margin-bottom: var(--lh-s5); }
.hounds-page .hd-modelhead h1 { font-size: var(--lh-fs-2xl); }
.hounds-page .hd-catch { margin: 0 0 var(--lh-s2); color: var(--lh-mute); }

/* the training camp: each section is a card with a real heading */
.hounds-page [data-hook="learning-app"] { max-width: 940px; }
.hounds-page [data-hook="learning-app"] .hd-hero { padding: var(--lh-s5) 0 var(--lh-s5); }
.hounds-page [data-hook="learning-app"] .hd-panel, .hounds-page [data-hook="learning-app"] .hd-panel + .hd-panel {
  background: var(--lh-soft); border-radius: var(--lh-r-lg); padding: var(--lh-s5); margin: 0 0 var(--lh-s4); box-shadow: var(--lh-e1);
}
.hounds-page [data-hook="learning-app"] .hd-panel > h2 { font-family: var(--lh-font-display); font-size: var(--lh-fs-xl); font-weight: 700; line-height: 1.05; letter-spacing: var(--lh-track-display); margin: 0 0 var(--lh-s2); }
.hounds-page [data-hook="learning-app"] .hd-panel > .hd-muted:first-of-type { font-size: var(--lh-fs-base); margin: 0 0 var(--lh-s2); }
.hounds-page [data-hook="learning-app"] [data-hook="coach-body"] dl, .hounds-page [data-hook="learning-app"] [data-hook="learning-activity"] dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--lh-s3) var(--lh-s4); }
.hounds-page [data-hook="learning-app"] .dk-camp-dog { background: rgba(255, 255, 255, .04); }
.hounds-page [data-hook="learning-app"] code { font-family: var(--lh-font-text); background: var(--lh-soft); padding: 1px 6px; border-radius: 6px; font-size: .92em; }
@media (max-width: 760px) { .hounds-page [data-hook="learning-app"] .hd-panel { padding: var(--lh-s4); } .hounds-page [data-hook="learning-app"] .hd-panel > h2 { font-size: 26px; } }

/* the builder's dog: the character, with the identity badge pinned to it like a medal */
.hounds-page .bd-dog { position: relative; padding-left: 4px; }
.hounds-page .bd-dog__badge { position: absolute; left: -4px; top: -6px; width: 30px; height: 30px; padding: 5px; border-radius: 50%; box-shadow: 0 0 0 3px var(--lh-bg); z-index: 1; }
.hounds-page .bd-dog__badge svg { width: 100%; height: 100%; }
.hounds-page .bd-dog__text { min-width: 0; }
.hounds-page .bd-dog__name { overflow-wrap: anywhere; }

/* ---- R6: a hound's first graded ticket (web/js/first-grade.js, web/js/hounds-detail.js) ---------------------------------------
   The newest tickets graded since this browser last looked at its own hound carry data-flip, and the ticket list carries
   data-reveal="play" for 2.4 s at most (a tap sets "done"). The chip flips from PENDING to its grade in 400 ms and the units count up
   in 500 ms (fx.js, data-count-ms). NOTHING HERE READS THE RESULT: a win, a loss and a push use the same selector, the same keyframes
   and the same timing. The one burst for a hound's first grade is fired by the page, not by this file. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal="play"] [data-flip] .hd-res { position: relative; animation: lh-grade-flip .4s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 120ms) both; }
  [data-reveal="play"] [data-flip] .hd-res::before {
    content: "PENDING"; position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit;
    background: var(--hd-warn, #F2B84B); color: #1B1405; animation: lh-grade-face .4s steps(1, end) calc(var(--i, 0) * 120ms) both;
  }
}
/* reduced motion: no animation at all; the chip simply shows its grade */
@keyframes lh-grade-flip {
  0% { transform: perspective(300px) rotateX(0); }
  50% { transform: perspective(300px) rotateX(90deg); }
  50.01% { transform: perspective(300px) rotateX(-90deg); }
  100% { transform: perspective(300px) rotateX(0); }
}
@keyframes lh-grade-face { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 0; } }