/* Guide and blog.

   Both are built to be looked at more than read: every block is a plate with a
   drawing, a clip or a chart, and at most a line of text under it. Sized for a
   phone first; from 720px the plates sit two across. Colour and type come from
   the site's tokens, and the drawings use the same bone and joint colours as
   the skeleton over the landing clips. */

.fkd-doc{padding:28px 0 72px;}
@media(min-width:881px){ .fkd-doc{padding:52px 0 96px;} }

.fkd-doc__title{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;color:var(--fg-1);
  font-size:clamp(30px,7.6vw,46px);line-height:1.06;margin:12px 0 0;max-width:17ch;text-wrap:balance;
}
.fkd-doc__lead{font-size:16px;line-height:1.55;color:var(--fg-2);margin:14px 0 0;max-width:44ch;}

/* ---- step chips ----------------------------------------------------------- */
.fkd-steps{
  display:flex;gap:8px;margin:22px -20px 0;padding:0 20px 2px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.fkd-steps::-webkit-scrollbar{display:none;}
.fkd-steps a{
  flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border-radius:999px;border:1px solid var(--line);background:var(--ink-800);
  color:var(--fg-1);font-size:14px;font-weight:500;transition:border-color var(--t-fast);
}
.fkd-steps a:hover{border-color:var(--accent);}
.fkd-steps b{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.1em;color:var(--accent-2);}

/* ---- a step and its plates ------------------------------------------------ */
.fkd-step{padding-top:46px;scroll-margin-top:70px;}
.fkd-step__head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;}
.fkd-step__no{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--accent-2);}
.fkd-step__head h2{
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;color:var(--fg-1);
  font-size:clamp(23px,5.8vw,30px);line-height:1.12;margin:0;
}

.fkd-plates{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);}
@media(min-width:720px){
  .fkd-plates{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fkd-plate--wide{grid-column:1 / -1;}
}
.fkd-plate{
  margin:0;display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);
}
.fkd-plate__art{position:relative;border-radius:var(--r-md);background:var(--ink-850);overflow:hidden;}
.fkd-plate__art > svg{display:block;width:100%;height:auto;}
.fkd-plate__cap{
  display:flex;align-items:center;gap:10px;margin:0 2px 2px;
  font-size:15.5px;line-height:1.35;font-weight:500;color:var(--fg-1);
}
.fkd-plate__cap .fk-ic{flex:none;width:18px;height:18px;color:var(--accent-2);}
.fkd-plate__cap small{font-size:13px;font-weight:400;color:var(--fg-3);}
.fkd-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.fkd-pair > svg{display:block;width:100%;height:auto;border-radius:var(--r-md);background:var(--ink-850);}

/* ---- drawings ------------------------------------------------------------- */
.fkd-art{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.fkd-art .ground{stroke:var(--line-strong);stroke-width:1.5;}
.fkd-art .ink{stroke:var(--fg-2);stroke-width:1.6;}
.fkd-art .body{fill:var(--ink-700);stroke:var(--fg-1);stroke-width:1.6;}
.fkd-art .screen{fill:var(--ink-900);stroke:var(--line-strong);stroke-width:1.5;}
.fkd-art .accent{stroke:var(--accent);stroke-width:1.6;}
.fkd-art .dash{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7;}
.fkd-art .cone{fill:var(--accent);stroke:none;opacity:.08;}
.fkd-art .lens{fill:var(--coral);stroke:none;}
.fkd-art .bone{stroke:#f4f1e9;stroke-width:3;}
.fkd-art .joint{fill:var(--pulse-500);stroke:none;}
.fkd-art .ghost{stroke:var(--fg-3);stroke-width:1.4;opacity:.5;}
.fkd-art text{stroke:none;fill:var(--fg-3);font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}
.fkd-art text.big{fill:var(--fg-1);font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:-.01em;text-transform:none;}
.fkd-art .ok{fill:var(--accent);stroke:none;}
.fkd-art .no{fill:var(--risk);stroke:none;}
.fkd-art .mark{stroke:var(--on-accent);stroke-width:2.2;}
.fkd-art .mark-no{stroke:#fff;stroke-width:2.2;}

@media(prefers-reduced-motion:no-preference){
  .fkd-art .lens-pulse{transform-box:fill-box;transform-origin:center;animation:fkd-art-pulse 2.4s ease-out infinite;}
  .fkd-art .shake{transform-box:fill-box;transform-origin:50% 100%;animation:fkd-art-shake 1.1s ease-in-out infinite;}
  .fkd-art .fill30{transform-box:fill-box;transform-origin:0 50%;animation:fkd-art-fill 6s linear infinite;}
  .fkd-rec__dot{animation:fkd-art-blink 1.6s ease-in-out infinite;}
}
@keyframes fkd-art-pulse{0%{transform:scale(1);opacity:.55;}100%{transform:scale(4.2);opacity:0;}}
@keyframes fkd-art-shake{0%,100%{transform:rotate(-5deg) translateX(-3px);}50%{transform:rotate(6deg) translateX(4px);}}
@keyframes fkd-art-fill{0%{transform:scaleX(0);}85%,100%{transform:scaleX(1);}}
@keyframes fkd-art-blink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---- upload / record tiles ------------------------------------------------ */
.fkd-tile{align-items:center;text-align:center;padding:18px 12px 16px;gap:14px;}
.fkd-tile__icon{
  display:grid;place-items:center;width:76px;height:76px;border-radius:22px;
  border:1.5px dashed var(--line-strong);color:var(--accent-2);
}
.fkd-tile__icon .fk-ic{width:30px;height:30px;}
.fkd-rec{border-style:solid;border-radius:50%;}
.fkd-rec__dot{width:34px;height:34px;border-radius:50%;background:var(--coral);}
.fkd-tile h3{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--fg-1);margin:0;}
.fkd-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;}
.fkd-chips span{
  display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:var(--r-sm);
  background:var(--ink-700);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-2);
}
.fkd-chips .fk-ic{width:13px;height:13px;color:var(--fg-3);}
.fkd-chips--left{justify-content:flex-start;}
@media(max-width:719px){ .fkd-plates--two{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ---- the viewer plate ----------------------------------------------------- */
.fkd-plate--viewer{padding:0;overflow:hidden;gap:0;}
.fkd-plate--viewer .fk-mini{border:0;border-radius:0;box-shadow:none;}
/* The bar sits under the clip here, so it never covers the feet. */
.fkd-plate--viewer .fk-mini__time{position:static;padding:8px 10px;background:none;border-top:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none;}
.fkd-plate--viewer .fk-anglechips{margin:0;padding:12px;gap:8px;}
.fkd-plate--viewer .fk-anglechip{flex:1 1 0;min-width:0;padding:9px 12px;}
.fkd-legend{display:grid;gap:10px;margin:0;padding:14px 14px 16px;list-style:none;border-top:1px solid var(--line);}
.fkd-legend li{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.35;color:var(--fg-1);font-weight:500;}
.fkd-legend .fk-ic{flex:none;width:20px;height:20px;color:var(--coral);}
.fkd-icontile{flex-direction:row;align-items:center;gap:13px;padding:14px;}
.fkd-icontile__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--ink-700);color:var(--accent-2);}
.fkd-icontile__ic .fk-ic{width:22px;height:22px;}
.fkd-icontile h3{font-size:15.5px;font-weight:500;color:var(--fg-1);margin:0 0 7px;font-family:inherit;}
.fkd-icontile h3:last-child{margin:0;}
.fkd-note{margin:14px 2px 0;font-size:13px;line-height:1.5;color:var(--fg-3);}

/* ---- credits -------------------------------------------------------------- */
.fkd-eq{display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,22px);padding:22px 8px;}
.fkd-eq__term{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;}
.fkd-eq__big{
  display:grid;place-items:center;width:clamp(58px,17vw,74px);height:clamp(58px,17vw,74px);border-radius:50%;
  font-family:var(--font-display);font-weight:600;font-size:clamp(26px,7vw,32px);color:var(--fg-1);
  background:var(--ink-700);border:1px solid var(--line-strong);
}
.fkd-eq__big.is-coin{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.fkd-eq__big .fk-ic{width:28px;height:28px;color:var(--accent-2);}
.fkd-eq__term > span:not(.fkd-eq__big){font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);text-align:center;}
.fkd-eq__op{font-family:var(--font-display);font-size:24px;color:var(--fg-3);margin-bottom:22px;}
.fkd-doc__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;}
.fkd-doc__cta .fk-btn{flex:1 1 180px;justify-content:center;}

/* ---- blog ----------------------------------------------------------------- */
.fkd-posts{display:grid;gap:14px;margin-top:26px;grid-template-columns:minmax(0,1fr);}
@media(min-width:720px){ .fkd-posts{grid-template-columns:repeat(2,minmax(0,1fr));} }
.fkd-post-card{
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--t-med),transform var(--t-med) var(--ease-out);
}
.fkd-post-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.fkd-post-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink-900);}
.fkd-post-card__body{display:flex;flex-direction:column;gap:7px;padding:14px 14px 16px;}
.fkd-post-card time,.fkd-post__date{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.fkd-post-card h2{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--fg-1);margin:0;}
.fkd-post-card p{font-size:14.5px;line-height:1.5;color:var(--fg-2);margin:0;}

.fkd-post{display:flex;flex-direction:column;}
.fkd-post__crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);}
.fkd-post__date{display:block;margin-top:12px;}
.fkd-post__media{display:grid;gap:12px;margin:22px 0 0;}
.fkd-post__media figure{margin:0;}
/* What is left to say goes small, under the media. */
.fkd-post__notes{margin-top:16px;}
.fkd-post__notes p{font-size:13.5px;line-height:1.6;color:var(--fg-3);margin:0 0 8px;max-width:86ch;}
.fkd-post__notes a{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}

/* A clip with its skeleton, shown as a plate. */
.fkd-plate--clip{padding:0;gap:0;overflow:hidden;}
.fkd-plate--clip .fk-capture{border-radius:0;}
.fkd-plate--clip .fk-capture__bar{padding:10px 14px;}
/* Play / pause, as on the landing viewer: a round button at the end of the bar. */
.fk-capture__bar .fkd-play{
  flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;
  border:0;border-radius:50%;cursor:pointer;background:var(--accent);color:var(--on-accent);
}
.fk-capture__bar .fkd-play:hover{background:var(--accent-2);color:var(--on-accent);}
.fkd-play .fk-ic{width:14px;height:14px;}

/* The angle chart under the clip. */
.fkd-chart{padding:14px 12px 12px;gap:10px;}
.fkd-chart svg{display:block;width:100%;height:auto;overflow:visible;}
/* The chart takes focus so the arrow keys can step frames. A pointer should
   not get a ring for that; the keyboard still does. */
.fkd-chart svg:focus{outline:none;}
.fkd-chart svg:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px;border-radius:4px;}
.fkd-chart .grid{stroke:var(--line);stroke-width:1;}
.fkd-chart .axis{fill:var(--fg-3);font-family:var(--font-mono);font-size:10px;}
.fkd-chart .line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.fkd-chart .head{stroke:var(--fg-1);stroke-width:1.2;opacity:.75;}
.fkd-chart .dot{stroke:var(--ink-800);stroke-width:2;}
.fkd-series{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.fkd-series div{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:var(--r-md);background:var(--ink-850);border:1px solid var(--line);min-width:0;}
.fkd-series .k{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap;}
.fkd-series .k i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c);}
.fkd-series .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;letter-spacing:-.02em;color:var(--fg-1);}
.fkd-chart__hint{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);}
.fkd-chart__hint .fk-ic{flex:none;width:16px;height:16px;color:var(--coral);}
.fkd-series .r{font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);white-space:nowrap;}

@media(min-width:720px){ .fkd-plates--three{grid-template-columns:repeat(3,minmax(0,1fr));} }

/* Desktop: the setup drawing sits beside the two do/don't plates, and the viewer
   puts its readings beside the clip, so no plate is stretched across the page. */
@media(min-width:720px){
  .fkd-plates--film{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"setup frame" "setup still" "len len";}
  .fkd-plates--film > :nth-child(1){grid-area:setup;justify-content:center;}
  .fkd-plates--film > :nth-child(2){grid-area:frame;}
  .fkd-plates--film > :nth-child(3){grid-area:still;}
  .fkd-plates--film > :nth-child(4){grid-area:len;}
  .fkd-plates--film > :nth-child(4) svg{max-height:92px;}
  .fkd-plate--viewer{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"clip chips" "clip legend";grid-template-rows:auto 1fr;}
  .fkd-plate--viewer .fk-mini{grid-area:clip;}
  .fkd-plate--viewer .fk-anglechips{grid-area:chips;flex-direction:column;}
  .fkd-plate--viewer .fkd-legend{grid-area:legend;border-top:0;align-content:start;}
  .fkd-plate--viewer .fk-anglechips,.fkd-plate--viewer .fkd-legend{border-left:1px solid var(--line);}
  .fkd-post__media{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;}
}