/* Etude — the Why Etude post: its figures. Line drawings in the front page's
   style (grey for hardware, blue for your data and the model on your Mac,
   green for what stays private), set going by assets/why.js as each one
   scrolls into view. */

/* A third colour, on this page only: what is not private (your words on
   someone else's computers). A red, lighter in dark mode as the site's blue
   and green are. */
:root { --leak: 206, 46, 66; }
:root[data-theme="dark"] { --leak: 240, 88, 94; }

.why-meta { margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.why-article { margin-top: clamp(28px, 5vh, 48px); }
.why-article > h2:first-child { margin-top: 0; }
.why-article h3 {
  margin-top: 40px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.why-article p b { color: var(--ink); font-weight: 600; }
.why-article p a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--glass-rim-hover); }
.why-article p a:hover { text-decoration-color: currentColor; }

/* ---- a figure ------------------------------------------------------------ */
.why-fig { margin: 40px 0; color: var(--ink-3); }
.why-fig svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.why-fig .accent { stroke: rgb(var(--net)); }
.why-fig .accent.priv { stroke: rgb(var(--priv)); }
.why-fig .accent-fill { fill: rgb(var(--net)); stroke: none; }
.why-fig .accent-fill.priv { fill: rgb(var(--priv)); }
.why-fig .accent.leak { stroke: rgb(var(--leak)); }
.why-fig .accent-fill.leak, .why-fig .led.leak { fill: rgb(var(--leak)); }
.why-fig .ink-fill { fill: var(--ink-3); stroke: none; }
.why-fig .dash { stroke-dasharray: 2 6; }
.why-fig .faint { opacity: 0.6; }
.why-fig .link { stroke-dasharray: 1.5 5; opacity: 0.7; }
.why-fig .ghost { opacity: 0.55; stroke-dasharray: 3 4.5; }
.why-fig .cut { stroke: var(--ink); stroke-width: 2.2; }
.why-fig .lbl {
  fill: var(--ink-3);
  stroke: none;
  font-family: var(--font);
  font-size: 12.5px;
  text-anchor: middle;
}
.why-fig .lbl.strong { fill: var(--ink); font-size: 14px; font-weight: 600; }
/* the wide drawings shrink to about half size on a phone; keep their words readable */
@media (max-width: 600px) {
  .why-fig .lbl { font-size: 19px; }
  .why-fig .lbl.strong { font-size: 20px; }
}
.why-fig .why-cap { margin-top: 12px; font-size: 14.5px; line-height: 1.5; text-align: center; color: var(--ink-3); }
.why-fig .why-cap b { color: var(--ink-2); font-weight: 600; }
.why-fig .why-cap a { color: var(--ink-2); text-underline-offset: 3px; }

/* two drawings side by side, one above the other on a phone */
.why-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 600px) { .why-pair { grid-template-columns: 1fr; } }

/* ---- what moves -----------------------------------------------------------
   Chats travel to the data center, files to the model, packets inside your
   own computer; the model's core pulses; the servers blink. */
.why-fig .packet { animation: travel 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.why-fig .packet.p2 { animation-delay: 1.2s; }
.why-fig .packet.p3 { animation-delay: 2.4s; }
.why-fig .packet { opacity: 0; }
@keyframes travel {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(254px); opacity: 0; }
}
.why-fig .run { opacity: 0; animation: run 2.4s ease-in-out infinite; }
.why-fig .run.back { animation-name: run-back; animation-delay: 1.2s; }
@keyframes run      { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(72px);  opacity: 0; } }
@keyframes run-back { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(-72px); opacity: 0; } }
.why-fig .shuttle { animation: shuttle 2.8s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
.why-fig .shuttle.back { animation-name: shuttle-back; animation-delay: 0.5s; }
@keyframes shuttle      { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(14px);  opacity: 0; } }
@keyframes shuttle-back { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(-14px); opacity: 0; } }
.why-fig .core { animation: core-pulse 2.6s ease-in-out infinite; }
@keyframes core-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.why-fig .led { fill: rgb(var(--net)); stroke: none; animation: led 1.6s steps(1) infinite; }
.why-fig .led.l2 { animation-delay: 0.5s; }
.why-fig .led.l3 { animation-delay: 1.1s; }
@keyframes led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
.why-fig .flow { stroke: rgb(var(--net)); stroke-width: 1.8; stroke-dasharray: 3 11; animation: flow 1.2s linear infinite; }
.why-fig .flow.priv { stroke: rgb(var(--priv)); }
@keyframes flow { to { stroke-dashoffset: -28; } }

/* ---- what draws itself as it arrives ------------------------------------ */
.js .why-fig .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s cubic-bezier(0.45, 0, 0.3, 1) 0.3s; }
.js .why-fig.is-in .draw { stroke-dashoffset: 0; }
.js .why-fig.is-in .draw.second { transition-delay: 0.75s; }
.js .why-fig .stored { opacity: 0; transition: opacity 0.5s ease 1.2s; }
.js .why-fig .stored.s2 { transition-delay: 2.4s; }
.js .why-fig .stored.s3 { transition-delay: 3.6s; }
.js .why-fig.is-in .stored { opacity: 1; }

/* ---- the news, as small cards ------------------------------------------- */
.why-news {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}
@media (max-width: 600px) { .why-news { grid-template-columns: 1fr; } }
.why-news a {
  display: block;
  height: 100%;
  padding: 14px 16px 15px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.why-news a:hover { border-color: var(--glass-rim-hover); transform: translateY(-1px); }
.why-src { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-3); }
.js .why-news li { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .why-news.is-in li { opacity: 1; transform: none; }
.js .why-news.is-in li:nth-child(2) { transition-delay: 0.08s; }
.js .why-news.is-in li:nth-child(3) { transition-delay: 0.16s; }
.js .why-news.is-in li:nth-child(4) { transition-delay: 0.24s; }
.js .why-news.is-in li:nth-child(5) { transition-delay: 0.32s; }
.js .why-news.is-in li:nth-child(6) { transition-delay: 0.4s; }

/* ---- Etude's design, point by point ------------------------------------- */
.why-points { margin: 28px 0 8px; padding: 0; list-style: none; }
.why-points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
}
.why-points li:last-child { border-bottom: 1px solid var(--line); }
.why-points b { color: var(--ink); font-weight: 600; }
.why-points svg {
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.why-points .accent-stroke { stroke: rgb(var(--priv)); stroke-width: 1.8; stroke-dasharray: 24; stroke-dashoffset: 0; }
.js .why-points .accent-stroke { stroke-dashoffset: 24; transition: stroke-dashoffset 0.6s cubic-bezier(0.45, 0, 0.3, 1); }
.js .why-points.is-in .accent-stroke { stroke-dashoffset: 0; }
.js .why-points.is-in li:nth-child(1) .accent-stroke { transition-delay: 0.3s; }
.js .why-points.is-in li:nth-child(2) .accent-stroke { transition-delay: 0.6s; }
.js .why-points.is-in li:nth-child(3) .accent-stroke { transition-delay: 0.9s; }

/* ---- the agent asking first: the app's card, clicked on a loop ----------- */
.why-ask { position: relative; max-width: 420px; margin: 0 auto; padding-bottom: 6px; }
.why-ask-cap { display: block; margin: 0 0 6px 4px; font-size: 12px; color: var(--ink-3); }
.why-ask-card {
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  font-size: 15px;
  color: var(--ink);
}
.why-ask-card > b { display: block; font-weight: 600; }
.why-ask-cmd { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.why-ask-cmd svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-3); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.why-ask-cmd b { font-weight: 600; }
.why-ask-card code { display: block; margin-top: 3px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ink-2); }
.why-ask-btns { position: relative; display: flex; gap: 8px; margin-top: 12px; font-size: 14px; }
.why-ask-btns span { padding: 4px 12px; border-radius: 8px; background: var(--glass-fill); border: 1px solid var(--glass-rim); }
.why-ask-btns .why-done {
  position: absolute; left: 0; top: 0;
  background: none; border-color: transparent; padding-left: 0;
  color: rgb(var(--priv)); font-weight: 600;
  opacity: 0;
}
.why-ask-btns .why-done::before { content: "✓ "; }
.why-fig .why-pointer {
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  fill: #000; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  transform: translate(290px, 150px);
}
.js .why-ask-fig.is-in .why-pointer { animation: ask-pointer 6s ease-in-out infinite; }
.js .why-ask-fig.is-in .why-allow,
.js .why-ask-fig.is-in .why-ask-btns span:first-child { animation: ask-buttons 6s ease-in-out infinite; }
.js .why-ask-fig.is-in .why-done { animation: ask-done 6s ease-in-out infinite; }
@keyframes ask-pointer {
  0%, 12%  { transform: translate(290px, 150px); opacity: 1; }
  38%      { transform: translate(134px, 118px) scale(1); }
  42%      { transform: translate(134px, 118px) scale(0.85); }
  46%      { transform: translate(134px, 118px) scale(1); }
  70%      { transform: translate(134px, 118px); opacity: 1; }
  80%, 100% { transform: translate(290px, 150px); opacity: 0; }
}
@keyframes ask-buttons { 0%, 44% { opacity: 1; } 47%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes ask-done    { 0%, 46% { opacity: 0; } 50%, 86% { opacity: 1; } 90%, 100% { opacity: 0; } }

/* ---- the speed table: a few rows from the Compare page, bars that grow --- */
.why-table {
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.why-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.why-table th, .why-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.why-table tbody tr:last-child th, .why-table tbody tr:last-child td { border-bottom: 0; }
.why-table th:first-child { padding-left: 20px; }
.why-table td:last-child { padding-right: 20px; }
.why-table thead th {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.why-table thead th.is-etude { color: rgb(var(--priv)); }
.why-table tbody th { font-weight: 500; color: var(--ink); white-space: nowrap; }
.why-table td { width: 22%; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.why-table td.is-etude { color: var(--ink); font-weight: 700; }
.why-table td::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  width: calc(var(--w, 0) * 100%);
  background: var(--ink-3);
  opacity: 0.5;
  transform-origin: left;
}
.why-table td.is-etude::after { background: rgb(var(--priv)); opacity: 1; }
.js .why-table td::after { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; }
.js .why-fig.is-in .why-table td::after { transform: scaleX(1); }
@media (max-width: 600px) {
  .why-table { overflow-x: auto; }
  .why-table table { font-size: 14px; }
  .why-table th, .why-table td { padding: 11px 7px; }
  .why-table th:first-child { padding-left: 14px; }
  .why-table td:last-child { padding-right: 14px; }
  .why-table thead th { font-size: 11px; letter-spacing: 0.03em; }
  .why-table tbody th { white-space: normal; }
}

/* ---- the download at the end --------------------------------------------- */
.why-get { display: flex; flex-direction: column; align-items: center; margin-top: 40px; text-align: center; }
.why-get img {
  width: 88px; height: 88px; margin-bottom: 22px;
  filter: drop-shadow(0 0 0.5px rgba(11, 11, 13, 0.22)) drop-shadow(0 10px 26px rgba(11, 11, 13, 0.14));
}
:root[data-theme="dark"] .why-get img { filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.55)); }
.why-get .cta-note { margin-top: 12px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .why-fig .packet, .why-fig .run, .why-fig .shuttle { animation: none; opacity: 0; }
  .why-fig .core, .why-fig .led, .why-fig .flow { animation: none; }
  .js .why-ask-fig.is-in .why-pointer,
  .js .why-ask-fig.is-in .why-allow,
  .js .why-ask-fig.is-in .why-ask-btns span:first-child,
  .js .why-ask-fig.is-in .why-done { animation: none; }
}

/* the speed figure: tokens streaming from the engine into a reply that
   writes itself */
.why-fig .tok { opacity: 0; animation: why-tok 1.12s linear infinite; animation-delay: var(--d, 0s); }
@keyframes why-tok {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(282px); opacity: 0; }
}
.why-fig .ln { stroke: rgb(var(--net)); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: why-ln 3.2s ease-out infinite; }
.why-fig .ln.l2 { animation-name: why-ln2; }
.why-fig .ln.l3 { animation-name: why-ln3; }
.why-fig .ln.l4 { animation-name: why-ln4; }
@keyframes why-ln  { 0% { stroke-dashoffset: 1; opacity: 1; } 15%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes why-ln2 { 0%, 15% { stroke-dashoffset: 1; opacity: 1; } 30%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes why-ln3 { 0%, 30% { stroke-dashoffset: 1; opacity: 1; } 45%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes why-ln4 { 0%, 45% { stroke-dashoffset: 1; opacity: 1; } 58%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .why-fig .tok { animation: none; opacity: 1; transform: translateX(var(--x)); }
  .why-fig .ln { animation: none; stroke-dashoffset: 0; }
}