/* /skills: free Claude Skills for content creators (2026-11-03). Loads after ink/home.css, which holds the tokens, header,
   hero, buttons, proof row, list-and-stage, FAQ and close. Only this page's own parts live here, all under body.iksk.
   Mocks sit on plain mist with a 1px line on white cards (INK-SYSTEM.md section 4): no colour behind any picture. */

html body.iksk:not(#_) { --sk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
html body.iksk:not(#_) :is(code, pre) { font-family: var(--sk-mono); }
html.sk-lock { overflow: hidden; }

/* ---------- Hero: the skill file, and the answer it gives. Turned slightly, as the homepage phone. ---------- */
html body.iksk:not(#_) .ik-hero__visual { perspective: 1600px; }
html body.iksk:not(#_) .sk-hv { position: relative; width: min(540px, 100%); height: 540px; transform: rotateY(calc(-8deg + var(--ty, 0deg))) rotateX(calc(3deg + var(--tx, 0deg))); transform-origin: 60% 50%; transition: transform .6s var(--ease-out); }
html body.iksk:not(#_) .sk-file { position: absolute; top: 0; right: 0; width: min(430px, 88%); overflow: hidden; border-radius: 20px; background: #fff; color: var(--cf-text); }
html body.iksk:not(#_) .sk-file__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--cf-line); font-size: 13px; color: var(--cf-text-2); }
html body.iksk:not(#_) .sk-dots { display: inline-flex; gap: 6px; }
html body.iksk:not(#_) .sk-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--cf-field); }
html body.iksk:not(#_) textarea.sk-file__code { display: block; width: 100%; height: 266px; margin: 0; padding: 18px 20px 20px; overflow: hidden; border: 0; background: #fff; font-family: var(--sk-mono); font-size: 13.5px; line-height: 1.65; color: #3f3f46; white-space: pre; resize: none; pointer-events: none; }
html body.iksk:not(#_) .sk-chat { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 10px; width: min(350px, 72%); padding: 14px; border-radius: 20px; background: #fff; color: var(--cf-text); transform: rotate(-1.5deg); }
html body.iksk:not(#_) p.sk-chat__me { align-self: flex-end; max-width: 86%; padding: 9px 13px; border-radius: 18px 18px 6px 18px; background: var(--cf-mist); font-size: 14px; line-height: 1.35; }
html body.iksk:not(#_) .sk-chat__ai { display: flex; flex-direction: column; gap: 6px; }
html body.iksk:not(#_) p.sk-chat__use { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 13px; color: var(--cf-text-3); }
html body.iksk:not(#_) p.sk-chat__use svg { padding: 2px; border-radius: 50%; background: var(--cf-lime); color: var(--cf-ink); }
html body.iksk:not(#_) p.sk-chat__use code { font-size: 12.5px; color: var(--cf-text); }
html body.iksk:not(#_) p.sk-chat__row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--cf-mist); font-size: 13.5px; line-height: 1.35; }
html body.iksk:not(#_) p.sk-chat__row code { font-size: 12.5px; color: var(--cf-text-3); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes skUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes skChat { from { opacity: 0; transform: translateY(24px) rotate(-1.5deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
  @keyframes skPop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
  html body.iksk:not(#_) .sk-file { animation: skUp 1s var(--ease-out) .2s both; }
  html body.iksk:not(#_) .sk-chat { animation: skChat .9s var(--ease-out) .8s both; }
  html body.iksk:not(#_) .sk-chat__me { animation: skPop .45s var(--ease-out) 1.2s both; }
  html body.iksk:not(#_) .sk-chat__use { animation: skPop .45s var(--ease-out) 1.6s both; }
  html body.iksk:not(#_) .sk-chat__row:nth-of-type(2) { animation: skPop .45s var(--ease-out) 1.9s both; }
  html body.iksk:not(#_) .sk-chat__row:nth-of-type(3) { animation: skPop .45s var(--ease-out) 2.2s both; }
  html body.iksk:not(#_) .sk-chat__row:nth-of-type(4) { animation: skPop .45s var(--ease-out) 2.5s both; }
}
@media (max-width: 767px) {
  html body.iksk:not(#_) .sk-hv { height: 400px; transform: none; }
  html body.iksk:not(#_) .sk-file { width: 100%; }
  html body.iksk:not(#_) textarea.sk-file__code { height: 196px; padding: 14px 16px; font-size: 12px; line-height: 1.5; }
  html body.iksk:not(#_) .sk-chat:not(.sk-chat--stage) { left: 4%; bottom: 0; width: 88%; gap: 8px; padding: 12px; }
  html body.iksk:not(#_) .sk-chat:not(.sk-chat--stage) p.sk-chat__row:nth-of-type(4) { display: none; }
  html body.iksk:not(#_) p.sk-chat__row { padding: 7px 9px; font-size: 13px; }
}

/* ---------- The 8 skills ---------- */
html body.iksk:not(#_) .sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
html body.iksk:not(#_) button.sk-chip { appearance: none; height: 40px; padding: 0 16px; border: 1px solid var(--cf-field); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 500; color: var(--cf-text); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
html body.iksk:not(#_) button.sk-chip[aria-pressed="true"] { border-color: var(--cf-ink); background: var(--cf-ink); color: #fff; }
@media (hover: hover) { html body.iksk:not(#_) button.sk-chip[aria-pressed="false"]:hover { border-color: var(--cf-text); } }
html body.iksk:not(#_) ul.sk-grid { margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  html body.iksk:not(#_) ul.sk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  html body.iksk:not(#_) ul.sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body.iksk:not(#_) li.sk-card { display: flex; flex-direction: column; padding: 8px 8px 16px; border-radius: 28px; background: #fff; }
html body.iksk:not(#_) li.sk-card[hidden] { display: none; }
html body.iksk:not(#_) .sk-card :is(.ik-h3, .ik-p) { padding: 0 12px; }
html body.iksk:not(#_) .sk-card p.ik-trg__eye { margin: 14px 12px 4px; }
html body.iksk:not(#_) .sk-card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 16px 12px 0; }
html body.iksk:not(#_) .sk-act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid var(--cf-field); border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--cf-text); text-decoration: none; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
html body.iksk:not(#_) .sk-act--dl { border-color: transparent; background: var(--cf-grad-lime); color: var(--cf-ink); }
@media (hover: hover) {
  html body.iksk:not(#_) a.sk-act:hover { border-color: var(--cf-text); background: var(--cf-text); color: #fff; }
  html body.iksk:not(#_) a.sk-act--dl:hover { border-color: transparent; background: var(--cf-lime-lo); color: var(--cf-ink); }
}

/* The mist panel on each card and what the skill makes, drawn small. */
html body.iksk:not(#_) .sk-art { position: relative; display: block; height: 156px; padding: 12px; background: var(--cf-mist); }
/* Long words (German, Dutch, Russian) break inside the small mocks instead of running out of them. */
html body.iksk:not(#_) .sk-art :is(p, b, span) { hyphens: auto; overflow-wrap: break-word; }
html body.iksk:not(#_) .sk-art :is(.sk-m-slide, .sk-m-shot__pic, .sk-m-reel__phone, .sk-m-img__pic, .sk-m-outs li) { outline: 1px solid var(--cf-line); outline-offset: -1px; }
html body.iksk:not(#_) .sk-art .ik-ui { font-size: 12.5px; }
html body.iksk:not(#_) .sk-art code { font-size: 11.5px; color: var(--cf-text-3); }
html body.iksk:not(#_) .sk-art .ik-kw { font-size: 11px; }
html body.iksk:not(#_) :is(.sk-m-img__pic, .sk-m-reel__phone, .sk-m-shot__pic, .sk-m-slide--cover) > img { display: block; width: 100%; height: 100%; object-fit: cover; }
html body.iksk:not(#_) .sk-m-src img { display: block; object-fit: cover; }

/* Image prompts: the picture and the prompt that describes it. */
html body.iksk:not(#_) .sk-m-img__pic { position: absolute; top: 14px; left: 16px; width: 34%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: #fff; transform: rotate(-3deg); }
html body.iksk:not(#_) .sk-m-img__prompt { position: absolute; right: 12px; bottom: 14px; width: 64%; padding: 10px 12px; border-radius: 14px; line-height: 1.35; transform: rotate(1deg); }
html body.iksk:not(#_) p.sk-m-lbl { margin-bottom: 4px; }

/* Reel script: the first frame with its on-screen text, and the script rows. */
html body.iksk:not(#_) .sk-m-reel__phone { position: absolute; top: 12px; left: 16px; width: 27%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; background: #fff; transform: rotate(-3deg); }
html body.iksk:not(#_) .sk-m-reel__txt { position: absolute; top: 18%; left: 8%; right: 8%; padding: 4px 5px; border-radius: 6px; background: rgba(20, 20, 20, .78); font-size: 10.5px; font-weight: 600; line-height: 1.2; color: #fff; text-align: center; }
html body.iksk:not(#_) .sk-m-rows { position: absolute; right: 12px; bottom: 16px; width: 62%; display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 14px; }
html body.iksk:not(#_) .sk-m-rows p { display: grid; grid-template-columns: 32px 1fr; gap: 6px; line-height: 1.3; }

/* AI video prompts: three shots of the same dish, each with its length and camera move. */
html body.iksk:not(#_) .sk-m-shots { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 100%; }
html body.iksk:not(#_) .sk-m-shot { display: flex; flex-direction: column; gap: 3px; width: 26%; font-size: 11.5px; line-height: 1.25; color: var(--cf-text); }
html body.iksk:not(#_) .sk-m-shot:nth-child(2) { transform: translateY(-8px); }
html body.iksk:not(#_) .sk-m-shot__pic { aspect-ratio: 9 / 13; overflow: hidden; border-radius: 10px; background: #fff; }
html body.iksk:not(#_) .sk-m-shot b { margin-top: 3px; font-weight: 600; }
html body.iksk:not(#_) .sk-m-shot span { color: var(--cf-text-3); }

/* Comment-to-DM: the Triggers card look, the post with the keyword comment and the DM it gets. */
html body.iksk:not(#_) .sk-m-post { width: 58%; margin-left: 4px; }
html body.iksk:not(#_) .sk-m-post .ik-post__pic { aspect-ratio: 4 / 3; }

/* Instagram profile: the top of the profile with the new name field and bio. */
html body.iksk:not(#_) .sk-m-prof { position: relative; width: 100%; height: 100%; padding: 12px 14px; border-radius: 16px; }
html body.iksk:not(#_) .sk-m-prof__top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
html body.iksk:not(#_) .sk-m-prof__top img { flex: none; width: 40px; height: 40px; border-radius: 50%; }
html body.iksk:not(#_) .sk-m-prof__top span { display: flex; flex-direction: column; line-height: 1.25; }
html body.iksk:not(#_) .sk-m-prof__top b { font-size: 13px; font-weight: 600; }
html body.iksk:not(#_) .sk-m-prof__top i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--cf-text); }
html body.iksk:not(#_) p.sk-m-prof__bio { font-size: 12px; line-height: 1.3; }
html body.iksk:not(#_) p.sk-m-prof__link code { font-size: 12px; font-weight: 600; color: #00376b; }
html body.iksk:not(#_) .sk-m-count { position: absolute; top: 12px; right: 12px; padding: 3px 8px; border-radius: 999px; background: var(--cf-mist); }

/* Captions: the caption in the house layout, and the rules it passed. */
html body.iksk:not(#_) .sk-m-cap { display: flex; flex-direction: column; gap: 5px; width: 100%; height: 100%; padding: 12px 14px; border-radius: 16px; line-height: 1.35; }
html body.iksk:not(#_) .sk-m-cap b { font-weight: 600; }
html body.iksk:not(#_) p.sk-m-cap__tags { color: #00376b; }
html body.iksk:not(#_) .sk-m-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
html body.iksk:not(#_) .sk-m-checks span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--cf-mist); font-size: 11.5px; font-weight: 500; }
html body.iksk:not(#_) .sk-m-checks svg { color: #15803d; }

/* Carousel: the cover, a middle slide and the last slide, fanned out. */
html body.iksk:not(#_) .sk-m-car { position: relative; height: 100%; }
html body.iksk:not(#_) .sk-m-slide { position: absolute; top: 6px; display: flex; flex-direction: column; gap: 4px; width: 30%; aspect-ratio: 4 / 5; overflow: hidden; padding: 10px; border-radius: 10px; background: #fff; font-size: 11.5px; line-height: 1.25; color: var(--cf-text); }
html body.iksk:not(#_) .sk-m-slide:nth-child(1) { left: 2%; transform: rotate(-4deg); }
html body.iksk:not(#_) .sk-m-slide:nth-child(2) { left: 35%; top: 2px; }
html body.iksk:not(#_) .sk-m-slide:nth-child(3) { left: 68%; transform: rotate(4deg); }
html body.iksk:not(#_) .sk-m-slide b { font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
html body.iksk:not(#_) .sk-m-slide span { color: var(--cf-text-2); }
html body.iksk:not(#_) p.sk-m-cta { font-size: 11.5px; line-height: 1.5; color: var(--cf-text-2); }
html body.iksk:not(#_) .sk-m-slide--cover { justify-content: flex-end; padding: 0; }
html body.iksk:not(#_) .sk-m-slide--cover img { position: absolute; inset: 0; }
html body.iksk:not(#_) .sk-m-slide--cover b { position: relative; margin: 6px; padding: 5px 7px; border-radius: 6px; background: #fff; font-size: 12px; }

/* Repurpose: one episode in, four posts out. */
html body.iksk:not(#_) .sk-m-rep { display: flex; align-items: center; gap: 10px; height: 100%; }
html body.iksk:not(#_) .sk-m-src { display: flex; flex-direction: column; gap: 8px; width: 40%; padding: 10px; border-radius: 14px; }
html body.iksk:not(#_) .sk-m-src img { width: 100%; height: 64px; border-radius: 8px; }
html body.iksk:not(#_) .sk-m-src span { display: flex; flex-direction: column; line-height: 1.3; }
html body.iksk:not(#_) .sk-m-src b { font-size: 12.5px; font-weight: 600; }
html body.iksk:not(#_) .sk-m-src i { font-style: normal; }
html body.iksk:not(#_) .sk-m-arrow { flex: none; color: var(--cf-text-3); }
html body.iksk:not(#_) ul.sk-m-outs { flex: 1; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
html body.iksk:not(#_) .sk-m-outs li { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px; background: #fff; font-size: 12px; font-weight: 500; color: var(--cf-text); }
html body.iksk:not(#_) .sk-m-outs svg { flex: none; color: #15803d; }

/* ---------- Install: the homepage list-and-stage, shorter here ---------- */
html body.iksk:not(#_) .ik-aud__stage { min-height: 440px; }
html body.iksk:not(#_) .sk-scene { display: flex; align-items: center; justify-content: center; border-radius: 22px; background: var(--cf-mist); }
html body.iksk:not(#_) .ik-aud__body code { font-size: .92em; color: var(--cf-on-ink); }
html body.iksk:not(#_) .sk-app { display: flex; flex-direction: column; gap: 8px; width: min(380px, 86%); padding: 16px; border-radius: 18px; font-size: 14px; transform: rotate(-1deg); }
html body.iksk:not(#_) .sk-app__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
html body.iksk:not(#_) .sk-app__top b { font-size: 16px; font-weight: 600; }
html body.iksk:not(#_) .sk-app__up { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 8px; background: var(--cf-ink); font-size: 13px; font-weight: 500; color: #fff; }
html body.iksk:not(#_) .sk-app__drop { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1.5px dashed var(--cf-field); border-radius: 12px; }
html body.iksk:not(#_) .sk-app__row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--cf-mist); }
html body.iksk:not(#_) .sk-app code { font-size: 13px; color: var(--cf-text); }
html body.iksk:not(#_) .sk-tg { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--cf-field); }
html body.iksk:not(#_) .sk-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
html body.iksk:not(#_) .sk-tg.is-on { background: var(--cf-ink); }
html body.iksk:not(#_) .sk-tg.is-on::after { left: 17px; background: var(--cf-lime); }
html body.iksk:not(#_) .sk-term { width: min(470px, 88%); overflow: hidden; border-radius: 18px; background: var(--cf-ink); transform: rotate(-1deg); }
html body.iksk:not(#_) .sk-term .sk-file__bar { border-bottom-color: var(--cf-ink-line); color: var(--cf-on-ink-2); }
html body.iksk:not(#_) .sk-term .sk-dots i { background: #3a3a3e; }
html body.iksk:not(#_) pre.sk-term__code { margin: 0; padding: 18px 20px 22px; font-size: 14px; line-height: 1.7; color: #e4e4e7; white-space: pre-wrap; }
html body.iksk:not(#_) .sk-api { display: flex; flex-direction: column; gap: 8px; width: min(360px, 86%); padding: 16px; border-radius: 18px; transform: rotate(-1deg); }
html body.iksk:not(#_) .sk-api__row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--cf-mist); }
html body.iksk:not(#_) .sk-api__n { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cf-ink); font-size: 13px; font-weight: 600; color: #fff; }
html body.iksk:not(#_) .sk-api__row > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
html body.iksk:not(#_) .sk-api__row b { font-weight: 600; }
html body.iksk:not(#_) .sk-api__row code { font-size: 13px; color: var(--cf-text-2); }
@media (max-width: 767px) {
  html body.iksk:not(#_) .ik-aud__stage { min-height: 340px; }
}

/* Step 1: the skill card and the ZIP it gives. Step 3: the chat card, standing still on the stage. */
html body.iksk:not(#_) .sk-get { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: min(380px, 86%); padding: 22px; border-radius: 18px; transform: rotate(-1deg); }
html body.iksk:not(#_) .sk-get p.ik-trg__eye { margin: 0; }
html body.iksk:not(#_) .sk-get > b { font-size: 18px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
html body.iksk:not(#_) .sk-get .sk-act { pointer-events: none; }
html body.iksk:not(#_) .sk-get__file { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--cf-mist); }
html body.iksk:not(#_) .sk-get__ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 8px; background: var(--cf-ink); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--cf-lime); }
html body.iksk:not(#_) .sk-get__file > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
html body.iksk:not(#_) .sk-get__file code { font-size: 13px; color: var(--cf-text); }
html body.iksk:not(#_) .sk-get__file i { font-style: normal; }
html body.iksk:not(#_) .sk-get__file i code { font-size: 12px; color: var(--cf-text-3); }
html body.iksk:not(#_) .sk-chat.sk-chat--stage { position: relative; left: auto; bottom: auto; width: min(380px, 86%); outline: 1px solid var(--cf-line); outline-offset: -1px; }
html body.iksk:not(#_) .sk-chat--stage, html body.iksk:not(#_) .sk-chat--stage * { animation: none !important; }
html body.iksk:not(#_) .sk-m-post .ik-post__cmt { white-space: nowrap; }
/* The DM sits beside the picture, so the RECIPE comment under it stays readable. */
html body.iksk:not(#_) .sk-art p.ik-trg__reply { top: 34px; right: 12px; bottom: auto; }
/* Desktop: the install pictures fill more of their frame. */
@media (min-width: 1024px) {
  html body.iksk:not(#_) .sk-scene > :is(.sk-get, .sk-app, .sk-chat) { width: min(440px, 80%); font-size: 15px; }
  html body.iksk:not(#_) .sk-get > b { font-size: 21px; }
  html body.iksk:not(#_) .sk-app__row { padding: 12px 14px; }
  html body.iksk:not(#_) .sk-app code { font-size: 14px; }
  html body.iksk:not(#_) .sk-chat--stage p.sk-chat__me, html body.iksk:not(#_) .sk-chat--stage p.sk-chat__row { font-size: 15px; }
}

/* ---------- Prompts to copy: tabs, then one row per prompt, on ink ---------- */
html body.iksk:not(#_) #prompts { padding-top: 0; }
html body.iksk:not(#_) .sk-ptabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
html body.iksk:not(#_) button.sk-ptab { border-color: #4a4a50; background: transparent; color: var(--cf-on-ink); }
html body.iksk:not(#_) button.sk-ptab[aria-selected="true"] { border-color: var(--cf-on-ink); background: var(--cf-on-ink); color: var(--cf-ink); }
@media (hover: hover) { html body.iksk:not(#_) button.sk-ptab[aria-selected="false"]:hover { border-color: var(--cf-on-ink); } }
html body.iksk:not(#_) ol.sk-prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
html body.iksk:not(#_) li.sk-pr { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 20px; border: 1px solid var(--cf-ink-line); border-radius: 18px; background: var(--cf-ink-2); }
html body.iksk:not(#_) li.sk-pr[hidden] { display: none; }
html body.iksk:not(#_) p.sk-pr__skill { margin-bottom: 6px; }
html body.iksk:not(#_) p.sk-pr__skill code { font-size: 13px; color: #7a7a80; }
html body.iksk:not(#_) p.sk-pr__t { font-size: 16px; line-height: 1.5; color: var(--cf-on-ink); text-align: left; }
html body.iksk:not(#_) .sk-ph { color: var(--cf-on-ink-2); }
html body.iksk:not(#_) button.sk-pr__copy { appearance: none; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 14px; border: 1px solid #4a4a50; border-radius: 8px; background: transparent; font: inherit; font-size: 15px; font-weight: 500; color: var(--cf-on-ink); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
html body.iksk:not(#_) button.sk-pr__copy.is-done { border-color: var(--cf-lime); background: var(--cf-lime); color: var(--cf-ink); }
html body.iksk:not(#_) button.sk-pr__copy [hidden] { display: none; }
@media (hover: hover) { html body.iksk:not(#_) button.sk-pr__copy:not(.is-done):hover { border-color: var(--cf-on-ink); background: var(--cf-on-ink); color: var(--cf-ink); } }
@media (max-width: 1023px) { html body.iksk:not(#_) ol.sk-prompts { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  /* Phones: the copy button sits top right, beside the skill name, so each prompt stays short. */
  html body.iksk:not(#_) li.sk-pr { position: relative; display: block; padding: 14px 16px 16px; }
  html body.iksk:not(#_) p.sk-pr__skill { min-height: 34px; padding-right: 96px; }
  html body.iksk:not(#_) button.sk-pr__copy { position: absolute; top: 10px; right: 10px; height: 34px; padding: 0 12px; font-size: 14px; }
  /* Chips and tabs stay on one line and swipe. */
  html body.iksk:not(#_) :is(.sk-chips, .sk-ptabs) { flex-wrap: nowrap; margin-right: -24px; padding-right: 24px; overflow-x: auto; scrollbar-width: none; }
  html body.iksk:not(#_) :is(.sk-chips, .sk-ptabs)::-webkit-scrollbar { display: none; }
  html body.iksk:not(#_) :is(.sk-chips, .sk-ptabs) > button { flex: none; }
}

/* ---------- FAQ "Also read" line (same as the use-case pages) ---------- */
html body.iksk:not(#_) p.uc-also { margin-top: 20px; font-size: 15px; line-height: 1.6; color: var(--cf-text-2); text-align: left; }
html body.iksk:not(#_):not(#_) [role="main"] p.uc-also a { color: var(--cf-text); }

/* ---------- The file viewer ---------- */
html body.iksk:not(#_) dialog.sk-dlg { width: min(820px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: auto; border: 0; border-radius: 24px; background: #fff; color: var(--cf-text); }
html body.iksk:not(#_) dialog.sk-dlg::backdrop { background: rgba(20, 20, 20, .72); }
html body.iksk:not(#_) .sk-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 28px 18px; }
html body.iksk:not(#_) p.sk-dlg__eye { margin-bottom: 4px; font-size: 13px; font-weight: 500; color: var(--cf-text-3); }
html body.iksk:not(#_):not(#_) h2.sk-dlg__h { font-size: 26px !important; font-weight: 500; line-height: 1.15; letter-spacing: -.03em; color: var(--cf-text); text-align: left; margin: 0 !important; }
html body.iksk:not(#_) p.sk-dlg__ask { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--cf-text-2); }
html body.iksk:not(#_) p.sk-dlg__ask q { color: var(--cf-text); }
html body.iksk:not(#_) button.sk-dlg__x { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--cf-line); border-radius: 50%; background: #fff; color: var(--cf-text); cursor: pointer; }
@media (hover: hover) { html body.iksk:not(#_) button.sk-dlg__x:hover { border-color: var(--cf-text); } }
html body.iksk:not(#_) .sk-dlg__file { margin: 0 28px; overflow: hidden; border: 1px solid var(--cf-line); border-radius: 16px; }
html body.iksk:not(#_) .sk-dlg__file .sk-file__bar { justify-content: space-between; background: var(--cf-mist); }
html body.iksk:not(#_) .sk-dlg__file code { font-size: 13px; color: var(--cf-text-2); }
html body.iksk:not(#_) textarea.sk-dlg__code { display: block; width: 100%; height: min(52dvh, 520px); margin: 0; padding: 18px 20px; overflow: auto; border: 0; border-radius: 0; background: #fff; font-family: var(--sk-mono); font-size: 13px; line-height: 1.6; color: #27272a; white-space: pre-wrap; overflow-wrap: anywhere; resize: none; }
html body.iksk:not(#_) textarea.sk-dlg__code:focus-visible { outline: 2px solid var(--cf-ink); outline-offset: -2px; }
html body.iksk:not(#_) .sk-dlg__acts { display: flex; flex-wrap: wrap; gap: 10px; padding: 20px 28px 8px; }
html body.iksk:not(#_) .sk-dlg__acts a.ik-btn { gap: 8px; }
html body.iksk:not(#_) button.sk-copy { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 24px; border: 1px solid var(--cf-field); border-radius: 8px; background: #fff; font: inherit; font-size: 16px; font-weight: 500; color: var(--cf-text); cursor: pointer; }
@media (hover: hover) { html body.iksk:not(#_) button.sk-copy:hover { border-color: var(--cf-text); background: var(--cf-text); color: #fff; } }
html body.iksk:not(#_) button.sk-copy [hidden] { display: none; }
html body.iksk:not(#_) p.sk-dlg__note { padding: 4px 28px 24px; font-size: 14px; line-height: 1.5; color: var(--cf-text-3); }
html body.iksk:not(#_) .sk-dlg :is(a, button):focus-visible { outline: 2px solid var(--cf-ink); outline-offset: 2px; }
@media (max-width: 767px) {
  html body.iksk:not(#_) .sk-dlg__head { padding: 20px 18px 14px; }
  html body.iksk:not(#_):not(#_) h2.sk-dlg__h { font-size: 22px !important; }
  html body.iksk:not(#_) .sk-dlg__file { margin: 0 12px; }
  html body.iksk:not(#_) .sk-dlg__acts { padding: 16px 12px 4px; }
  html body.iksk:not(#_) .sk-dlg__acts > * { flex: 1 1 100%; }
  html body.iksk:not(#_) p.sk-dlg__note { padding: 4px 18px 20px; }
}