/* Blog: index (featured card, card grid) and articles (reading card, sticky contents). */
.blog-index, .blog-article { padding: 4.5rem 0 6rem; }
.blog-index h1 { font-size: clamp(2.4rem, 4vw + 1rem, 4rem); max-width: 18ch; margin: 0 0 .8rem; }
.blog-index .lede { color: var(--ink-2); max-width: 46rem; }

.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; color: var(--mute); font-size: .88rem; margin: 0; }
.blog-meta > * + *::before { content: "·"; margin-right: .9rem; color: var(--rim); }
.blog-series-tag { color: var(--glow-2); font-weight: 600; letter-spacing: .02em; }

.blog-card {
  position: relative;
  display: grid;
  gap: 1.4rem;
  padding: 1.25rem;
  border: 1px solid var(--rim);
  border-radius: 14px;
  background: var(--deep);
  transition: border-color .2s ease;
}
.blog-card:hover, .blog-card:focus-within { border-color: #2a6175; }
.blog-card img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; }
.blog-card h2, .blog-card h3 { margin: .6rem 0 .5rem; line-height: 1.15; }
.blog-card h2 { font-size: clamp(1.6rem, 2.2vw + .6rem, 2.3rem); }
.blog-card h3 { font-size: 1.45rem; }
.identity-abyss.blog-page main .blog-card h2 a, .identity-abyss.blog-page main .blog-card h3 a { color: var(--ink); text-decoration: none; }
.blog-card h2 a::after, .blog-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.blog-card h2 a:focus-visible, .blog-card h3 a:focus-visible { outline: none; }
.blog-card:focus-within { outline: 2px solid var(--glow); outline-offset: 3px; }
.blog-card p { color: var(--ink-2); margin: 0; }
.blog-card-body { padding: .2rem .35rem .4rem; }



.blog-grid { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 760px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
.blog-upcoming { margin-top: 2.6rem; color: var(--mute); }

/* Article */
.blog-crumbs { font-size: .9rem; color: var(--mute); margin-bottom: 1.6rem; }
.blog-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.blog-crumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--mute); }
.identity-abyss.blog-page main .blog-crumbs a { color: var(--ink-2); }
.blog-title { font-size: clamp(2.2rem, 3.4vw + 1rem, 3.6rem); max-width: 22ch; margin: 0 0 2.2rem; line-height: 1.05; }
.blog-layout { display: grid; gap: 2.5rem; }
@media (min-width: 1060px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3.5rem; } }

.blog-paper { min-width: 0; max-width: 44rem; }
.blog-byline { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; color: var(--mute); font-size: .9rem; padding-bottom: 1.3rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--rim); }
.blog-byline strong { color: var(--ink); font-weight: 600; }
.blog-paper .lede { font-size: 1.15rem; color: var(--ink); }
.blog-paper h2 { font-size: clamp(1.45rem, 1.4vw + .9rem, 1.9rem); margin: 2.8rem 0 .8rem; scroll-margin-top: 7rem; }
.blog-paper p, .blog-paper li { color: var(--ink-2); line-height: 1.7; font-size: 1.04rem; }
.blog-paper strong { color: var(--ink); }
.blog-paper a { color: var(--glow-2); }
.blog-paper ul, .blog-paper ol { padding-left: 1.3rem; }
.blog-paper li { margin: .4rem 0; }
.blog-paper code { font-family: "JetBrains Mono", monospace; font-size: .86em; background: var(--tide); padding: .08rem .4rem; border-radius: 4px; }
.blog-paper pre {
  overflow-x: auto;
  margin: 1.3rem 0 1.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--abyss);
  border: 1px solid var(--rim);
  border-radius: 8px;
  font-size: .86rem;
  line-height: 1.6;
}
.blog-paper pre code { background: none; padding: 0; font-size: inherit; color: var(--ink); }
.blog-next { margin: 3rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--rim); }

.blog-aside { display: none; }
@media (min-width: 1060px) {
  .blog-aside { display: block; }
  .blog-aside-inner { position: sticky; top: 7.5rem; display: grid; gap: 1.5rem; }
}
.blog-toc p { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin: 0 0 .7rem; }
.blog-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rim); }
.identity-abyss.blog-page main .blog-toc a { display: block; padding: .45rem 0 .45rem 1rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--mute); font-size: .92rem; line-height: 1.35; text-decoration: none; }
.identity-abyss.blog-page main .blog-toc a:hover { color: var(--ink); }
.identity-abyss.blog-page main .blog-toc a[aria-current] { color: var(--ink); border-left-color: var(--glow); }
.blog-cta { padding: 1.2rem; border: 1px dashed var(--rim); border-radius: 6px; }
.blog-cta h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.blog-cta p { color: var(--ink-2); font-size: .92rem; margin: 0 0 1rem; }
.blog-cta .btn { width: 100%; justify-content: center; }

.blog-paper h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; color: var(--ink); }
.blog-table-wrap { overflow-x: auto; margin: 1.4rem 0 1.6rem; border: 1px solid var(--rim); border-radius: 8px; }










.blog-tldr-title { margin: 0 0 .4rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--glow-2); font-weight: 600; }

.blog-note { margin: 1.8rem 0; padding: 1rem 1.2rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
.blog-note p { margin: 0; font-size: .97rem; }

/* Analysis-level lab */
.lab { margin: 1.6rem 0 2rem; padding: 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.lab-controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.lab-level { font: inherit; font-size: .88rem; padding: .45rem .8rem; border-radius: 999px; border: 1px solid var(--rim); background: var(--abyss); color: var(--ink-2); cursor: pointer; }
.lab-level:hover { border-color: #2a6175; color: var(--ink); }
.lab-level[aria-pressed="true"] { background: var(--glow); border-color: var(--glow); color: var(--abyss); font-weight: 600; }
.lab-level:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }

.blog-paper .lab-explain { margin: 0 0 .8rem; font-size: .95rem; min-height: 3.2em; }
.blog-paper .lab-code { margin: 0; padding-left: 3.2rem; font-size: .82rem; line-height: 1.7; }
.identity-abyss.blog-page main pre code { background: none; padding: 0; border: 0; }

.lab-line { display: inline-block; position: relative; min-width: calc(100% + 3.8rem); margin: 0 -.6rem 0 -3.2rem; padding: 0 .6rem 0 3.2rem; border-radius: 4px; transition: background .2s ease; }
.lab-tag { position: absolute; left: .45rem; top: .2em; font-weight: 700; font-size: .72rem; line-height: 1.5; padding: 0 .35rem; border-radius: 4px; }
.lab-line.is-found { background: rgba(46, 230, 200, .14); }
.lab-line.is-found .lab-tag { background: var(--glow); color: var(--abyss); }
.lab-line.is-fp { background: rgba(255, 211, 123, .13); }
.lab-line.is-fp .lab-tag { background: #ffd37b; color: var(--abyss); }
.lab-line.is-missed { background: transparent; outline: 1px dashed var(--mute); outline-offset: -1px; }
.lab-line.is-missed .lab-tag { background: var(--tide); color: var(--ink-2); }
.lab-line.is-ok .lab-tag { background: var(--tide); color: var(--mute); }
.blog-paper .lab-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .8rem 0 0; font-size: .85rem; color: var(--mute); }
.lab-key::before { content: ""; display: inline-block; width: .8rem; height: .8rem; margin-right: .4rem; vertical-align: -1px; border-radius: 3px; }
.lab-key.is-found::before { background: var(--glow); }
.lab-key.is-fp::before { background: #ffd37b; }
.lab-key.is-missed::before { border: 1px dashed var(--mute); }

/* Engine cards */
.engine-grid { display: grid; gap: 1rem; margin: 1.4rem 0; }
@media (min-width: 700px) { .engine-grid { grid-template-columns: 1fr 1fr; } }
.engine { padding: 1rem 1.1rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
.blog-paper .engine h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.engine dl { margin: 0; display: grid; grid-template-columns: 5.6rem 1fr; gap: .35rem .6rem; }
.engine dt { color: var(--mute); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; }
.engine dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
.blog-paper .engine-meta { margin: .8rem 0 0; font-size: .82rem; color: var(--mute); }

/* Step-by-step taint trace */
.trace { margin: 1.6rem 0 2rem; padding: 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.blog-paper .trace-code { margin: 0 0 1rem; font-size: .84rem; }
.trace-line { display: inline-block; min-width: calc(100% + 1.2rem); margin: 0 -.6rem; padding: 0 .6rem; border-radius: 4px; transition: background .2s ease; }
.trace-line.is-tainted { background: rgba(46, 230, 200, .08); }
.trace-line.is-active { background: rgba(46, 230, 200, .2); box-shadow: inset 3px 0 0 var(--glow); }
.blog-paper .trace-steps { margin: 0; padding-left: 1.3rem; }
.blog-paper .trace-steps li { margin: .35rem 0; }
.trace.is-interactive .trace-steps li { color: var(--mute); }
.trace.is-interactive .trace-steps li[aria-current] { color: var(--ink); }
.trace-nav { display: none; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.trace.is-interactive .trace-nav { display: flex; }
.trace-btn { font: inherit; font-size: .88rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--rim); background: var(--abyss); color: var(--ink-2); cursor: pointer; }
.trace-btn:hover:not(:disabled) { border-color: #2a6175; color: var(--ink); }
.trace-btn-primary { background: var(--glow); border-color: var(--glow); color: var(--abyss); font-weight: 600; }
.trace-btn-primary:hover:not(:disabled) { color: var(--abyss); background: var(--glow-2); }
.trace-btn:disabled { opacity: 1; color: var(--mute); background: transparent; border-color: var(--rim); cursor: default; }
.trace-btn:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }

/* Who sees what */
.coverage-grid { display: grid; gap: .8rem; margin: 1.2rem 0 1.4rem; }
@media (min-width: 640px) { .coverage-grid { grid-template-columns: 1fr 1fr; } }
.coverage { padding: .9rem 1rem; border: 1px solid var(--rim); border-radius: 10px; }
.coverage.is-current { border-color: var(--glow); background: rgba(46, 230, 200, .06); }
.blog-paper .coverage p { margin: 0; font-size: .93rem; }
.blog-paper .coverage .coverage-name { font-family: var(--display); font-weight: 650; color: var(--ink); font-size: 1.05rem; }
.blog-paper .coverage .coverage-reads { color: var(--glow-2); font-size: .85rem; margin: .1rem 0 .4rem; }

/* Prerequisite line, glossary, planted-bug key */
.blog-paper .blog-prereq { font-size: .95rem; color: var(--mute); border-left: 2px solid var(--rim); padding-left: .9rem; }
.blog-glossary { margin: 2.4rem 0 1.6rem; padding: 1.1rem 1.3rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
.blog-glossary dl { margin: .4rem 0 0; display: grid; grid-template-columns: minmax(6.5rem, max-content) 1fr; gap: .45rem 1rem; }
.blog-glossary dt { color: var(--ink); font-weight: 600; font-size: .92rem; }
.blog-glossary dd { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
@media (max-width: 520px) { .blog-glossary dl { grid-template-columns: 1fr; gap: .1rem; } .blog-glossary dd { margin-bottom: .5rem; } }



/* Invoice-search demo */
.demo { margin: 1.6rem 0 1.4rem; padding: 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.demo-modes { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1rem; }
.demo-window { padding: 1rem 1.1rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--abyss); transition: border-color .2s ease; }
.demo.is-breached .demo-window { border-color: #c98a8a; }
.blog-paper .demo-title { margin: 0 0 .8rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.demo-form label { display: block; font-size: .85rem; color: var(--ink-2); margin-bottom: .35rem; }
.demo-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-row input { flex: 1 1 12rem; min-width: 0; font: inherit; font-family: "JetBrains Mono", monospace; font-size: .95rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--rim); background: var(--deep); color: var(--ink); }
.demo-row input:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 1px; }
.blog-paper .demo-try { margin: .7rem 0 0; font-size: .88rem; color: var(--mute); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.demo-chip { font: inherit; font-family: "JetBrains Mono", monospace; font-size: .82rem; padding: .25rem .6rem; border-radius: 6px; border: 1px solid var(--rim); background: var(--deep); color: var(--glow-2); cursor: pointer; }
.demo-chip:hover { border-color: #2a6175; }
.demo-chip:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.blog-paper .demo-label { margin: 1rem 0 .35rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.blog-paper .demo-sql { margin: 0; font-size: .82rem; white-space: pre-wrap; word-break: break-word; }
.demo-results { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); min-height: 1rem; }
.invoice { display: grid; gap: .1rem; padding: .6rem .75rem; border: 1px solid var(--rim); border-radius: 8px; background: var(--deep); }
.invoice.is-leak { border-color: #c98a8a; }
.invoice-no { font-size: .75rem; color: var(--mute); }
.invoice-name { font-weight: 600; color: var(--ink); }
.invoice-amount { color: var(--glow-2); font-size: .9rem; }
.blog-paper .demo-verdict { margin: .8rem 0 0; font-size: .95rem; color: var(--ink); }

/* Quiz */
.quiz { margin: 1.2rem 0; padding: 1rem 1.2rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
.blog-paper .quiz-q { margin: 0 0 .6rem; color: var(--ink); }
.blog-paper .quiz-options { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .7rem; }
.quiz-options span { padding: .25rem .8rem; border-radius: 6px; background: var(--tide); color: var(--ink-2); font-weight: 600; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; }
.quiz-answer summary { cursor: pointer; color: var(--glow-2); font-weight: 600; font-size: .95rem; }
.quiz-answer summary:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; border-radius: 4px; }
.blog-paper .quiz-answer p { margin: .6rem 0 0; }
.blog-faq { margin-top: 1rem; }
.blog-paper .demo-results { padding: 0; }
.quiz-options button { font: inherit; padding: .25rem .8rem; border-radius: 6px; border: 1px solid transparent; background: var(--tide); color: var(--ink-2); font-weight: 600; font-size: .85rem; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.quiz-options button:hover { color: var(--ink); border-color: #2a6175; }
.quiz-options button[aria-pressed="true"] { background: var(--glow); color: var(--abyss); }
.quiz-options button:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }

/* Inline definitions: dotted word, definition on hover, focus or tap */
.term { position: relative; padding: 0 .14em; border-radius: 3px; border-bottom: 1px dotted var(--glow-2); background: var(--glow-soft); color: var(--glow-2); font-weight: 600; cursor: help; }
.term-def { font-weight: 400; color: var(--ink); }
/* Key words: the bold phrases of the text get a highlighter stroke */
.blog-paper :is(p, li) > strong { background-image: linear-gradient(transparent 60%, rgba(46, 230, 200, .22) 0); padding: 0 .08em; }
.term:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; border-radius: 2px; }
.term-def strong { color: var(--glow-2); font-weight: 600; }
.term-def { display: none; position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; width: max-content; max-width: min(20rem, 80vw); padding: .55rem .75rem; border: 1px solid var(--rim); border-radius: 8px; background: var(--tide); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); color: var(--ink); font-size: .86rem; font-weight: 400; font-style: normal; line-height: 1.45; text-transform: none; letter-spacing: 0; white-space: normal; }
.term:hover .term-def, .term:focus .term-def { display: block; }
@media (max-width: 640px) {
  .term-def { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; font-size: .92rem; }
}

/* Pedagogy helpers */
.demo-typed { background: rgba(255, 211, 123, .22); color: #ffd37b; border-radius: 3px; padding: 0 .1rem; }
.blog-paper .blog-aside-line { font-size: .92rem; color: var(--mute); margin-top: -.4rem; }
.blog-more { margin: 1.2rem 0 1.6rem; padding: .8rem 1.1rem; border: 1px solid var(--rim); border-radius: 10px; }
.blog-more summary { cursor: pointer; color: var(--glow-2); font-weight: 600; }
.blog-more summary:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; border-radius: 4px; }
.blog-paper .blog-more ul { margin-bottom: 0; }
.blog-paper .blog-note p + p { margin-top: .6rem; }
.blog-paper .blog-key { padding: .8rem 1rem; border-left: 3px solid var(--glow); background: rgba(46, 230, 200, .07); border-radius: 0 8px 8px 0; color: var(--ink); }

/* ===== Pedagogical layout components ===== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.35rem; height: 1.35rem; flex: none; vertical-align: -.3rem; color: var(--glow-2); }

/* Numbered sections */
.blog-paper { counter-reset: sec; }
.blog-paper > h2 { counter-increment: sec; display: flex; align-items: baseline; gap: .7rem; }
.blog-paper > h2::before { content: counter(sec, decimal-leading-zero); flex: none; font-family: "JetBrains Mono", monospace; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--glow-2); padding: .2rem .45rem; border: 1px solid var(--rim); border-radius: 6px; transform: translateY(-.2rem); }

/* Summary cards */
.blog-summary { margin: 1.8rem 0 2.2rem; }
.summary-grid { display: grid; gap: .8rem; margin-top: .6rem; }
.summary-card { display: grid; grid-template-columns: 1.6rem 1fr; column-gap: 1.1rem; align-items: start; padding: 1.15rem 1.4rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.summary-card .ico { grid-row: 1 / span 2; margin-top: .1rem; }
.summary-card .ico { width: 1.6rem; height: 1.6rem; }
.blog-paper .summary-label { margin: 0 0 .35rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--glow-2); font-weight: 600; }
.blog-paper .summary-card p:last-child { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink); }

/* Key figures */
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1.4rem 0; }
.stat { padding: .9rem .8rem; border: 1px solid var(--rim); border-radius: 12px; text-align: center; background: linear-gradient(180deg, rgba(46, 230, 200, .07), transparent); }
.blog-paper .stat-num { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--glow-2); line-height: 1.1; }
.blog-paper .stat-label { margin: .3rem 0 0; font-size: .85rem; line-height: 1.35; color: var(--ink-2); }

/* Concern / action boxes */
.blog-paper .concern-title { display: flex; gap: .55rem; align-items: center; font-weight: 600; color: var(--ink); margin: 0 0 .6rem; }
.concern { border-color: #2a6175; background: linear-gradient(180deg, rgba(46, 230, 200, .06), var(--deep)); }
.blog-paper .concern-list { margin: .4rem 0 .6rem; padding-left: 1.4rem; }
.blog-paper .concern-list li { margin: .3rem 0; color: var(--ink); }
.action-grid { display: grid; gap: 1rem; }
@media (min-width: 760px) { .action-grid { grid-template-columns: 1fr 1fr; } }
.action-grid .blog-note { margin: 0; }

/* Clerk comparison */
.compare { display: grid; gap: 1rem; margin: 1.3rem 0 1rem; }
@media (min-width: 720px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { padding: 1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.compare-col.is-bad { border-color: rgba(232, 140, 140, .55); }
.compare-col.is-good { border-color: rgba(46, 230, 200, .5); }
.blog-paper .compare-title { display: flex; gap: .5rem; align-items: center; margin: 0 0 .8rem; font-weight: 650; color: var(--ink); font-family: var(--display); }
.compare-col.is-bad .compare-title .ico { color: #f0a3a3; }
.blog-paper .compare-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.blog-paper .compare-steps li { margin: 0; display: grid; gap: .25rem; }
.step-who { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.slip { display: block; padding: .5rem .7rem; background: #e9f4f5; color: #102733; border-radius: 4px; font-family: "Caveat", "Comic Sans MS", cursive, var(--display); font-size: 1rem; transform: rotate(-.6deg); box-shadow: 2px 2px 0 rgba(0, 0, 0, .35); }
.bubble { display: block; padding: .55rem .75rem; border-radius: 12px 12px 12px 3px; background: var(--tide); color: var(--ink); font-size: .95rem; line-height: 1.5; }
.bubble mark { background: rgba(255, 211, 123, .25); color: #ffd37b; padding: 0 .15rem; border-radius: 3px; }
.outcome { display: flex; gap: .5rem; align-items: center; font-weight: 600; font-size: .95rem; color: var(--ink); }
.is-bad .outcome .ico { color: #f0a3a3; }

/* Filter table */
.filter-demo { margin: 1.2rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.blog-paper .filter-cond { margin: 0 0 .8rem; padding: .55rem .75rem; border-radius: 8px; background: var(--abyss); font-family: "JetBrains Mono", monospace; font-size: .88rem; color: var(--ink); }
.blog-paper .filter-cond strong { color: #ffd37b; }
.blog-scroll { overflow-x: auto; }
.filter-table, .matrix { width: 100%; border-collapse: collapse; font-size: .92rem; }
.filter-table th, .filter-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--rim); text-align: left; color: var(--ink-2); }
.filter-table thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.filter-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.filter-table td.no { color: var(--mute); }
.filter-table td.yes { color: #ffd37b; font-weight: 600; }
.filter-table td.keep { color: #f0a3a3; font-weight: 700; white-space: nowrap; }
.filter-table td.keep .ico { color: #f0a3a3; }
.blog-paper .filter-note { margin: .8rem 0 0; font-size: .93rem; }

/* Query anatomy */
.anatomy { margin: 1rem 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.blog-paper .anatomy-line { margin: 0 0 .6rem; font-family: "JetBrains Mono", monospace; font-size: clamp(.95rem, 2.6vw, 1.25rem); overflow-x: auto; white-space: nowrap; }
.a-prog { color: var(--ink-2); padding: .15rem .25rem; border-bottom: 3px solid #4f7f8a; }
.a-typed { color: #ffd37b; background: rgba(255, 211, 123, .14); padding: .15rem .25rem; border-bottom: 3px solid #ffd37b; }
.blog-paper .anatomy-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0 0 .7rem; font-size: .85rem; color: var(--mute); }
.key-prog::before, .key-typed::before { content: ""; display: inline-block; width: .9rem; height: .25rem; margin-right: .4rem; vertical-align: middle; border-radius: 2px; }
.key-prog::before { background: #4f7f8a; }
.key-typed::before { background: #ffd37b; }
.blog-paper .anatomy-steps { margin: 0; padding-left: 1.3rem; }
.blog-paper .anatomy-steps li { margin: .3rem 0; font-size: .95rem; }

/* Timeline */
.blog-paper .timeline { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; position: relative; }
.blog-paper .timeline::before { content: ""; position: absolute; left: 2.15rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--rim); }
.blog-paper .timeline li { position: relative; display: grid; grid-template-columns: 4.3rem 1fr; gap: .6rem 1rem; margin: 0 0 1rem; align-items: start; }
.tl-year { position: relative; z-index: 1; justify-self: start; padding: .2rem .55rem; border-radius: 999px; background: var(--glow); color: var(--abyss); font-weight: 700; font-size: .85rem; font-family: "JetBrains Mono", monospace; }
.blog-paper .timeline p { grid-column: 2; margin: 0; }
.blog-paper .timeline li > .tl-year { grid-row: 1; }

/* Flow diagram */
.flow { display: grid; gap: .5rem; margin: 1.2rem 0 1.2rem; align-items: stretch; }
@media (min-width: 760px) { .flow { grid-template-columns: 1fr auto 1fr auto 1fr; } }
.flow-step { padding: 1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.flow-step .ico { width: 1.7rem; height: 1.7rem; }
.flow-step.is-danger { border-color: rgba(255, 211, 123, .55); }
.flow-step.is-danger .ico { color: #ffd37b; }
.blog-paper .flow-name { margin: .5rem 0 .2rem; font-weight: 650; color: var(--ink); }
.blog-paper .flow-step p:last-child { margin: 0; font-size: .93rem; }
.flow-arrow { display: flex; align-items: center; justify-content: center; color: var(--mute); }
.flow-arrow .ico { color: var(--mute); }
@media (max-width: 759px) { .flow-arrow .ico { transform: rotate(90deg); } }
.blog-more .trace { margin-bottom: .2rem; }

/* Icon cards */
.card-grid { display: grid; gap: .8rem; margin: 1.1rem 0 1.4rem; }
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
.icard { padding: 1rem 1.05rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.icard .ico { width: 1.6rem; height: 1.6rem; }
.blog-paper .icard-title { margin: .5rem 0 .3rem; font-weight: 650; color: var(--ink); }
.blog-paper .icard p:last-child { margin: 0; font-size: .93rem; line-height: 1.55; }
.coverage-name .ico { margin-right: .35rem; }

/* FP/FN matrix */
.matrix { margin: 1rem 0 1.2rem; table-layout: fixed; }
.matrix th, .matrix td { padding: .75rem .8rem; border: 1px solid var(--rim); vertical-align: top; text-align: left; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.matrix thead th { font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mute); background: var(--deep); }
.matrix tbody th { color: var(--ink); font-weight: 600; background: var(--deep); width: 28%; }
.matrix strong { color: var(--ink); }
.matrix td.m-good { background: rgba(46, 230, 200, .07); }
.matrix td.m-warn { background: rgba(255, 211, 123, .08); }
.matrix td.m-warn .ico { color: #ffd37b; }
.matrix td.m-bad { background: rgba(232, 140, 140, .09); }
.matrix td.m-bad .ico { color: #f0a3a3; }

/* Reading progress */
.read-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; background: var(--glow); box-shadow: 0 0 8px rgba(46, 230, 200, .6); }
@media (min-width: 640px) { .card-grid.is-five > :first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) {
  .inv-no { display: none; }
  .filter-table th, .filter-table td { padding: .5rem .35rem; font-size: .85rem; }
  .filter-table thead th { font-size: .66rem; letter-spacing: .03em; }
  .matrix th, .matrix td { padding: .55rem .5rem; font-size: .84rem; }
}

/* ===== Deep dive components ===== */
/* Planted cases */
.cast-grid { display: grid; gap: .6rem; margin: 1rem 0 1.4rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cast { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .75rem .85rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
.cast.is-vuln { border-color: rgba(232, 140, 140, .45); }
.cast.is-safe { border-color: rgba(46, 230, 200, .45); }
.cast-tag { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: .8rem; padding: .15rem .45rem; border-radius: 6px; }
.cast.is-vuln .cast-tag { background: rgba(232, 140, 140, .18); color: #f0a3a3; }
.cast.is-safe .cast-tag { background: rgba(46, 230, 200, .16); color: var(--glow-2); }
.blog-paper .cast p { margin: 0; font-size: .92rem; line-height: 1.5; }

/* Scoreboard with bars */
.scoreboard { width: 100%; border-collapse: collapse; margin: .6rem 0 1.4rem; font-size: .92rem; }
.scoreboard th, .scoreboard td { padding: .6rem .6rem; border-bottom: 1px solid var(--rim); text-align: left; color: var(--ink-2); white-space: nowrap; }
.scoreboard thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.scoreboard tbody th { color: var(--ink); font-weight: 600; }
.scoreboard td { font-family: "JetBrains Mono", monospace; color: var(--ink); }
.bar { display: inline-block; width: 6.5rem; height: .55rem; margin-right: .6rem; border-radius: 999px; background: var(--tide); vertical-align: middle; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; }
.bar-fill.is-found { background: var(--glow); }
.bar-fill.is-fp { background: #ffd37b; }
.bar-0 { width: 0; } .bar-50 { width: 50%; } .bar-75 { width: 75%; } .bar-100 { width: 100%; }

/* Precision / recall cards */
.metric-grid { display: grid; gap: .8rem; margin: 1rem 0 1rem; }
@media (min-width: 640px) { .metric-grid { grid-template-columns: 1fr 1fr; } }
.metric { padding: 1rem 1.05rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.metric .ico { width: 1.6rem; height: 1.6rem; }
.blog-paper .metric-name { margin: .45rem 0 .3rem; font-family: var(--display); font-size: 1.15rem; font-weight: 650; color: var(--ink); }
.blog-paper .metric p { margin: 0 0 .4rem; font-size: .95rem; }
.blog-paper .metric-ex { margin: .5rem 0 0; padding-top: .5rem; border-top: 1px dashed var(--rim); font-family: "JetBrains Mono", monospace; font-size: .85rem; color: var(--glow-2); }

/* Level verdict chips */
.blog-paper .level-verdict { display: flex; gap: .5rem; flex-wrap: wrap; margin: -.2rem 0 1rem; }
.chip { font-size: .82rem; font-weight: 600; padding: .2rem .65rem; border-radius: 999px; border: 1px solid; }
.chip.is-found { color: var(--glow-2); border-color: rgba(46, 230, 200, .5); background: rgba(46, 230, 200, .08); }
.chip.is-fp { color: #ffd37b; border-color: rgba(255, 211, 123, .5); background: rgba(255, 211, 123, .08); }
.chip.is-good { color: var(--glow-2); border-color: rgba(46, 230, 200, .5); background: rgba(46, 230, 200, .08); }

/* Two-step flow */
@media (min-width: 760px) { .flow.is-two { grid-template-columns: 1fr auto 1fr; } }

/* Sanitizer context table */
.ctx-table { width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem; font-size: .92rem; }
.ctx-table th, .ctx-table td { padding: .6rem .65rem; border-bottom: 1px solid var(--rim); text-align: left; vertical-align: top; color: var(--ink-2); line-height: 1.45; }
.ctx-table thead th { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.ctx-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.ctx-table td.yes .ico { color: var(--glow-2); }
.ctx-table td.no .ico { color: #f0a3a3; }
.ctx-table .ico { width: 1.1rem; height: 1.1rem; vertical-align: -.2rem; margin-right: .2rem; }

/* Engine card heading icon */
.blog-paper .engine h3 { display: flex; align-items: center; gap: .5rem; }
.engine h3 .ico { width: 1.2rem; height: 1.2rem; vertical-align: 0; }
.blog-paper .metric .metric-name { font-size: 1.2rem; margin: .45rem 0 .35rem; }
.blog-paper .metric .metric-ex { font-family: inherit; font-weight: 600; }
@media (max-width: 600px) {
  .ctx-table thead { display: none; }
  .ctx-table, .ctx-table tbody, .ctx-table tr, .ctx-table th, .ctx-table td { display: block; width: 100%; }
  .ctx-table tr { padding: .7rem .8rem; margin-bottom: .6rem; border: 1px solid var(--rim); border-radius: 10px; background: var(--deep); }
  .ctx-table th, .ctx-table td { border: 0; padding: .2rem 0; white-space: normal; }
  .ctx-table tbody th { margin-bottom: .2rem; }
  .scoreboard th, .scoreboard td { padding: .5rem .35rem; font-size: .82rem; }
  .bar { width: 3.2rem; margin-right: .35rem; }
}
.identity-abyss.blog-page main .blog-paper .metric .metric-name { color: var(--ink); }
.identity-abyss.blog-page main .blog-paper .metric .metric-ex { color: var(--glow-2); }
/* More air between paragraphs */
.blog-paper > p { margin: 0 0 1.15rem; }
.blog-paper > p + p { margin-top: 0; }
.blog-paper > h2 { margin-top: 3.2rem; }
.blog-paper > .blog-key, .blog-paper > .blog-note, .blog-paper > aside { margin-top: 1.4rem; margin-bottom: 1.6rem; }

/* ===== Lab: control panel + file windows ===== */
.lab { padding: 0; border: 0; background: none; }
.lab-panel { padding: 1.1rem 1.2rem 1.2rem; border: 1px solid #2a6175; border-radius: 14px; background: linear-gradient(180deg, rgba(46, 230, 200, .06), var(--deep)); margin-bottom: 1.4rem; }
.blog-paper .lab-step { margin: 0 0 .7rem; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; color: var(--glow-2); }
.lab-scores { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1rem 0 .9rem; }
.lab-score-box { display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--rim); background: var(--abyss); }
.lab-score-box.is-found { border-color: rgba(46, 230, 200, .45); }
.lab-score-box.is-fp { border-color: rgba(255, 211, 123, .45); }
.lab-score-num { font-family: var(--display); font-size: 1.8rem; font-weight: 700; line-height: 1; }
.lab-score-num small { font-size: .9rem; font-weight: 500; color: var(--mute); }
.lab-score-box.is-found .lab-score-num { color: var(--glow-2); }
.lab-score-box.is-fp .lab-score-num { color: #ffd37b; }
.lab-score-label { font-size: .82rem; color: var(--ink-2); }
.blog-paper .lab-panel .lab-explain { margin: 0; padding: .7rem .85rem; border-radius: 8px; background: var(--abyss); min-height: 0; color: var(--ink); }
.lab-files { display: grid; gap: .9rem; }
.lab-file-win { border: 1px solid var(--rim); border-radius: 12px; overflow: hidden; background: var(--abyss); }
.lab-file-bar { display: flex; align-items: center; gap: .7rem; padding: .5rem .85rem; border-bottom: 1px solid var(--rim); background: var(--deep); flex-wrap: wrap; }
.lab-dots { display: inline-flex; gap: .3rem; }
.lab-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #24495b; }
.lab-file-name { font-family: "JetBrains Mono", monospace; font-size: .85rem; color: var(--ink); font-weight: 600; }
.lab-file-role { font-size: .8rem; color: var(--mute); }
.lab-file-role:not(:empty)::before { content: "· "; }
.blog-paper .lab-file-win .lab-code { margin: 0; border: 0; border-radius: 0; background: none; }
.blog-paper .lab > .lab-legend { margin: -.3rem 0 .8rem; }

/* Planted cases split in two groups */
.cast-groups { display: grid; gap: 1rem; margin: 1rem 0 1.6rem; }
@media (min-width: 760px) { .cast-groups { grid-template-columns: 2fr 1fr; align-items: start; } }
.cast-group { padding: .9rem; border-radius: 12px; border: 1px solid var(--rim); }
.cast-group.is-vuln { border-color: rgba(232, 140, 140, .4); background: rgba(232, 140, 140, .04); }
.cast-group.is-safe { border-color: rgba(46, 230, 200, .4); background: rgba(46, 230, 200, .04); }
.blog-paper .cast-group-title { margin: 0 0 .75rem; display: grid; gap: .1rem; }
.cast-count { font-family: var(--display); font-weight: 650; font-size: 1.05rem; color: var(--ink); }
.cast-group.is-vuln .cast-count { color: #f0a3a3; }
.cast-group.is-safe .cast-count { color: var(--glow-2); }
.cast-rule { font-size: .85rem; color: var(--ink-2); }
.cast-groups .cast-grid { margin: 0; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cast-group.is-vuln .cast-grid { grid-template-columns: 1fr 1fr; } }
.cast-groups .cast { background: var(--abyss); border-color: var(--rim); }






.stat { min-width: 0; }
.blog-paper .stat-label { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 420px) { .stat-row { gap: .45rem; } .stat { padding: .7rem .45rem; } .blog-paper .stat-num { font-size: 1.45rem; } .blog-paper .stat-label { font-size: .78rem; } }

/* ===== SCA game "The recall": recipe (project) and shop window (in service) ===== */
@font-face { font-family: "Caveat"; src: url("assets/fonts/caveat-latin-variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
.sca-city, .sast-game { --rc-line: #8ab4c4; --rc-dim: var(--rim); --rc-ink: var(--ink); --rc-soft: var(--ink-2); --rc-alert: #ff8a5c; --rc-ok: #7af2dc; --rc-paper: #f6efdf; --rc-paper-ink: #2b2620;
  margin: 1.6rem 0 2rem; padding: 1.1rem; border: 1px solid var(--rim); border-radius: 12px; color: var(--ink); background: var(--deep); }
.sca-city:not(.is-live), .sast-game:not(.is-live) { color: var(--ink-2); }



































@keyframes rc-unfold { from { opacity: 0; transform: scaleY(.3); } }





































@keyframes rc-stamp { from { opacity: 0; transform: scale(2.2) rotate(-12deg); } }
@keyframes rc-pop { from { opacity: 0; transform: translateY(-4px); } }

@keyframes rc-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }






.rc-btn { display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .88rem; padding: .5rem .95rem; border: 1px solid var(--rim); border-radius: 999px; background: var(--abyss); color: var(--ink-2); cursor: pointer; }
.rc-btn svg { width: 1.1rem; height: 1.1rem; }
.rc-btn:hover:not(:disabled) { border-color: #2a6175; color: var(--ink); }
.rc-btn:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.rc-btn.is-primary { background: var(--glow); border-color: var(--glow); color: var(--abyss); font-weight: 600; }
.rc-btn.is-primary:hover:not(:disabled) { background: var(--glow-2); color: var(--abyss); }
.rc-btn:disabled { opacity: .5; cursor: default; }





























































/* Deep-dive lab: the reader judges first */
.cast-groups.is-concealed { display: none; }
.lab.is-guess .lab-panel, .lab.is-guess .lab-step, .lab.is-guess .lab-legend { display: none; }
.lab.is-guess .lab-line { cursor: pointer; background: none !important; outline: none; }
.lab.is-guess .lab-line:hover { background: rgba(143, 195, 230, .1) !important; }
.lab.is-guess .lab-line:focus-visible { outline: 2px solid var(--glow-2); }
.lab.is-guess .lab-line[data-pick="flaw"] { background: rgba(255, 138, 92, .14) !important; }
.lab.is-guess .lab-line[data-pick="safe"] { background: rgba(122, 242, 220, .1) !important; }
.lab-guess-bar { display: grid; gap: .3rem; justify-items: start; margin: 0 0 .9rem; padding: .7rem .9rem; border: 1.5px dashed rgba(143, 195, 230, .45); border-radius: 8px; }
.blog-paper .lab-guess-bar p { margin: 0; }
.blog-paper .lab-guess-title, .blog-paper .lab-guess-score { font-family: "Caveat", cursive; font-size: 1.6rem; line-height: 1.1; color: var(--ink); }
.blog-paper .lab-guess-score { font-size: 1.35rem; color: #7af2dc; }
.blog-paper .lab-guess-how { font-size: .9rem; color: var(--ink-2); }
.blog-paper .lab-guess-count { font-size: .84rem; color: var(--mute); }
.lab-pick { display: block; margin: .1rem 0 .25rem 2.4rem; font-family: "Caveat", cursive; font-size: 1.05rem; font-weight: 700; color: #ffd37b; white-space: nowrap; }
.lab-pick:empty { display: none; }
.lab-pick.is-right { color: #7af2dc; }
.lab-pick.is-wrong { color: #ff8a5c; }
.lab.is-guess .lab-line .lab-tag { background: #2a4a5c !important; color: #e8f3fb !important; border-color: #2a4a5c !important; }



























/* ===== Barista animation (flat, stylised) ===== */
.barista { margin: 1.6rem 0 2rem; padding: 1.1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.bz-stage { border-radius: 10px; overflow: hidden; }
.bz-svg { display: block; width: 100%; height: auto; }
.bz-wall { fill: #13344a; } .bz-floor { fill: #0d2636; }
.bz-lamp line { stroke: #3d6f87; stroke-width: 2; } .bz-lamp path { fill: #ff9a3c; }
.bz-top { fill: #3f8aa6; } .bz-front { fill: #1f5068; } .bz-panel { stroke: #2c6680; stroke-width: 3; fill: none; }
.bz-machine rect { fill: #d6e2e8; } .bz-machine .bz-machine-top { fill: #8fa7b3; } .bz-machine .bz-machine-head { fill: #33515f; } .bz-machine .bz-machine-cup { fill: #ffffff; }
.bz-skin { fill: #f1c7a3; } .bz-hair { fill: #3b2a20; }
.bz-shirt { fill: #2ee6c8; } .bz-apron { fill: #ff9a3c; } .bz-strap { stroke: #ff9a3c; stroke-width: 4; stroke-linecap: round; }
.bz-sleeve { stroke: #2ee6c8; stroke-width: 15; stroke-linecap: round; }
.bz-leg { fill: #24313a; } .bz-coat { fill: #6c8cff; } .bz-cust .bz-cust-skin { fill: #c98d63; } .bz-cust-hair { fill: #2a1d16; } .bz-cap { fill: #ff5c7a; opacity: 0; }
.act-2 .bz-coat, .act-3 .bz-coat { fill: #9b6bff; } .act-2 .bz-cap, .act-3 .bz-cap { opacity: 1; } .act-2 .bz-cust-hair, .act-3 .bz-cust-hair { opacity: 0; }
.bz-c-body { fill: #ffffff; } .bz-c-lid { fill: #2b3f4c; } .bz-c-sleeve { fill: #d29a5c; }
.bz-cupname { font-family: "Caveat", cursive; font-size: 15px; font-weight: 700; text-anchor: middle; fill: #2b2620; }
.bz-cupname.is-small { font-size: 10px; } .bz-cupname.is-long { font-size: 4px; }
.bz-box { opacity: 0; transition: opacity .3s; } .bz-box.is-on { opacity: 1; }
.bz-box rect { fill: #ffffff; stroke: #2b2620; stroke-width: .8; }
.bz-box-label { font: 700 5.5px sans-serif; text-anchor: middle; fill: #2b2620; letter-spacing: .04em; }
.bz-box-text { font-family: "Caveat", cursive; font-size: 4.5px; font-weight: 700; text-anchor: middle; fill: #2b2620; }
.bz-marker { opacity: 0; transition: opacity .3s; } .bz-marker.is-on { opacity: 1; }
.bz-marker rect { fill: #1b2a33; } .bz-marker .bz-marker-cap { fill: #ff9a3c; }
.bz-marker.is-writing rect { transform-box: fill-box; animation: bz-write .28s ease-in-out infinite alternate; }
@keyframes bz-write { from { transform: translate(-3px, 2px) rotate(-8deg); } to { transform: translate(3px, -2px) rotate(8deg); } }
.bz-cust { transition: transform 1.15s cubic-bezier(.25, .65, .3, 1); }
.bz-hand { transform-origin: 0 0; transition: transform .85s cubic-bezier(.3, 1.3, .4, 1); }
.bz-wait { transition: transform 1.05s cubic-bezier(.45, .05, .25, 1); }
.bz-bubble { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.bz-bubble.is-on { opacity: 1; transform: translateY(0); }
.bz-bubble rect, .bz-bubble path { fill: #ffffff; }
.bz-bubble text { font: 600 17px var(--display, sans-serif); fill: #12232e; }
.bz-bubble .is-hl { fill: #d9480f; font-weight: 800; }
.blog-paper .bz-caption { min-height: 3em; margin: .8rem 0 .6rem; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.bz-controls { display: flex; flex-wrap: wrap; gap: .45rem; }
.bz-act[aria-pressed="true"] { border-color: var(--glow); color: var(--ink); }
.bz-menu rect { fill: #1d4a61; } .bz-menu .bz-menu-title { fill: #ff9a3c; } .bz-menu rect + rect + rect, .bz-menu rect:last-child { fill: #3f8aa6; }
.bz-menu > rect:first-child { fill: #0e2737; stroke: #3d6f87; stroke-width: 2; }
.bz-leaf { fill: #2ee6c8; opacity: .8; } .bz-pot { fill: #ff9a3c; }
.bz-eye { fill: #1b2a33; } .bz-smile { fill: none; stroke: #1b2a33; stroke-width: 2; stroke-linecap: round; }
.bz-arm-c { stroke: #6c8cff; stroke-width: 15; stroke-linecap: round; } .act-2 .bz-arm-c, .act-3 .bz-arm-c { stroke: #9b6bff; }
.bz-marker { transition: opacity .3s, transform .9s cubic-bezier(.3, .7, .2, 1); }
.bz-talk { display: none; }
@media (max-width: 560px) {
  .bz-bubble { display: none; }
  .bz-talk { display: grid; gap: .3rem; min-height: 4.6em; margin-top: .7rem; }
  .blog-paper .bz-talk p { margin: 0; font-size: .92rem; line-height: 1.45; }
  .bz-talk mark { background: rgba(255, 154, 60, .25); color: var(--ink); padding: 0 .15rem; border-radius: 2px; }
}

/* Gestures use the SVG coordinate system, so pivots stay aligned at every size. */
.bz-shadow { fill: #071c29; opacity: .35; }
.bz-shoe { fill: #e4eaf0; }
.bz-coat-detail { fill: none; stroke: #ffffff; stroke-opacity: .25; stroke-width: 2; }
.bz-apron-seam { fill: none; stroke: #c86a28; stroke-width: 2; }
.bz-apron-button { fill: #fff0d9; }
.bz-brow, .bz-nose { fill: none; stroke: #704c38; stroke-width: 1.6; stroke-linecap: round; }
.bz-fingers { fill: none; stroke: #f1c7a3; stroke-width: 5; stroke-linecap: round; }
.bz-head { transform-origin: 470px 177px; transition: transform .5s ease; }
.bz-arm { transform-origin: 504px 204px; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1); }
.bz-support { transform-origin: 436px 204px; transition: transform .5s ease; }
.bz-cust-arm { transform-origin: 144px 230px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.bz-stride { transform-origin: 122px 325px; }
.is-entering .bz-stride { animation: bz-walk .38s ease-in-out 3; }
.is-entering .bz-stride-back { animation-direction: reverse; }
.is-entering .bz-cust-upper { animation: bz-bob .38s ease-in-out 3; }
.is-writing .bz-head { transform: rotate(12deg) translate(-3px, 2px); }
.bz-writing-arm { opacity: 0; }
.is-writing .bz-writing-arm { opacity: 1; }
.is-writing .bz-arm { opacity: 0; }
.is-writing .bz-support { transform: rotate(20deg); }
.is-calling .bz-arm { transform: rotate(-80deg); }
.is-calling .bz-head { transform: rotate(-7deg); }
.is-calling .bz-smile { stroke-width: 3; }
.is-served .bz-cust-arm { transform: rotate(-16deg); }
.is-stealing .bz-cust-upper { animation: bz-delight .7s 1.1s ease-in-out; }
.bz-steam { fill: none; stroke: #c9e9ed; stroke-width: 3; stroke-linecap: round; opacity: .25; }
.bz-steam path { animation: bz-steam 3s ease-in-out infinite; }
.bz-steam path:nth-child(2) { animation-delay: -1s; }
.bz-steam path:nth-child(3) { animation-delay: -2s; }
.bz-question { opacity: 0; }
.bz-question circle { fill: #fff0d9; stroke: #ff9a3c; stroke-width: 2; }
.bz-question text { font: 700 18px var(--display, sans-serif); fill: #633412; text-anchor: middle; }
.is-stealing .bz-flight { animation: bz-arc 1.05s var(--flight-delay) both; transform-origin: 18px 44px; }
.is-stealing .bz-question { animation: bz-question .35s calc(var(--flight-delay) + .8s) both; }
.bz-label { opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .4s ease; }
.bz-label.is-on { opacity: 1; transform: translateY(0); }
.bz-label-paper { fill: #fff8ed; stroke: #d29a5c; stroke-width: 2; }
.bz-label-title { font: 700 12px var(--display, sans-serif); letter-spacing: .05em; fill: #744619; }
.bz-label-name { font: 600 15px var(--display, sans-serif); fill: #30271f; }
.bz-label-note { font: 500 12px var(--display, sans-serif); fill: #744619; }
.bz-label-boundary { fill: none; stroke: transparent; stroke-width: 2; }
.act-3 .bz-label-paper { fill: #f0fffa; stroke: #168372; }
.act-3 .bz-label-boundary { fill: #d8f5eb; stroke: #168372; }
.act-3 .bz-label-title, .act-3 .bz-label-note { fill: #146555; }
.is-safe .bz-label-boundary { stroke-width: 3; }
.is-safe .bz-head { transform: rotate(5deg); }
.is-safe .bz-arm { transform: rotate(-25deg); }
.bz-controls button:focus-visible { outline: 3px solid #ff9a3c; outline-offset: 3px; }
.bz-controls button { min-height: 44px; }
.bz-controls button:disabled { opacity: .6; cursor: default; }
.is-resetting *, .is-resetting { transition: none !important; animation: none !important; }
@keyframes bz-walk { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } }
@keyframes bz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bz-delight { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes bz-steam { 0%, 100% { opacity: .15; transform: translateY(2px); } 50% { opacity: .7; transform: translateY(-8px); } }
@keyframes bz-arc { 0% { transform: translateY(0) rotate(0); } 15% { transform: translateY(3px) rotate(5deg); } 55% { transform: translateY(-48px) rotate(-9deg); } 85% { transform: translateY(-4px) rotate(3deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes bz-question { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .bz-stage *, .bz-stage *::before, .bz-stage *::after { animation: none !important; transition: none !important; }
  .is-stealing .bz-question { opacity: 1; }
}
.bz-card { opacity: 0; pointer-events: none; transition: opacity .35s; }
.bz-card.is-on { opacity: 1; }
.bz-card rect { fill: rgba(9, 24, 35, .88); }
.bz-card-kicker { font: 700 18px var(--display, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; fill: #ff9a3c; }
.bz-card-title { font: 800 38px var(--display, sans-serif); text-anchor: middle; fill: #ffffff; }
.bz-progress { height: 4px; margin-top: .55rem; border-radius: 2px; background: var(--rim); overflow: hidden; }
.bz-progress span { display: block; width: 0; height: 100%; background: var(--glow); transition: width .6s ease; }
.bz-jump { align-self: center; margin-left: .4rem; font-size: .82rem; color: var(--mute); }
.bz-act { font-size: .8rem; padding: .35rem .7rem; }
.is-paused .bz-svg * { animation-play-state: paused !important; }
/* Blog index: featured article, filters, grid */
.blog-hero { display: grid; gap: 1.6rem; margin-top: 2.6rem; padding: 1.4rem; border: 1px solid var(--rim); border-radius: 18px; background: linear-gradient(135deg, rgba(46, 230, 200, .06), transparent 45%), var(--deep); }
@media (min-width: 900px) { .blog-hero { grid-template-columns: 1.15fr 1fr; align-items: center; padding: 1.6rem; } }
.blog-hero-media img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; transition: transform .3s ease; }
.blog-hero-media:hover img { transform: scale(1.015); }
.blog-hero-body { display: grid; gap: .7rem; padding: 0 .4rem; }
.blog-index .blog-hero-body p { margin: 0; }
.blog-index .blog-hero-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff9a3c; }
.blog-hero-badge { padding: .2rem .6rem; border-radius: 999px; background: #ff9a3c; color: #1d1208; letter-spacing: .06em; }
.blog-index .blog-hero h2 { margin: 0; font-size: clamp(1.8rem, 2.4vw + 1rem, 2.7rem); line-height: 1.08; }
.identity-abyss.blog-page main .blog-hero h2 a { color: var(--ink); text-decoration: none; }
.identity-abyss.blog-page main .blog-hero h2 a:hover { color: var(--glow-2); }
.blog-index .blog-hero-desc { color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; }
.blog-index .blog-hero-pitch { color: var(--mute); font-size: .95rem; }
.blog-index .blog-hero-cta { margin-top: .3rem; }
.blog-index .blog-hero-also { font-size: .92rem; color: var(--ink-2); }
.blog-index .blog-all-title { margin: 3.4rem 0 0; font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); }
.blog-filters { display: grid; gap: .9rem; margin-top: 1.1rem; }
.blog-filters[hidden] { display: none; }
.blog-search { position: relative; display: flex; align-items: center; }
.blog-search-icon { position: absolute; left: 1.1rem; color: var(--glow-2); pointer-events: none; }
.blog-search input { width: 100%; min-width: 0; font: inherit; font-size: 1.05rem; padding: .95rem 5.5rem .95rem 3.2rem; border: 1px solid #2a6175; border-radius: 14px; background: var(--deep); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); -webkit-appearance: none; appearance: none; }
.blog-search input::-webkit-search-cancel-button { display: none; }
.blog-search input::placeholder { color: var(--mute); }
.blog-search input:focus-visible { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px rgba(46, 230, 200, .18); }
.blog-search-clear { position: absolute; right: 3.2rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: var(--abyss); color: var(--ink-2); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.blog-search-clear[hidden] { display: none; }
.blog-search-clear:hover { color: var(--ink); }
.blog-search-clear:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.blog-search-key { position: absolute; right: 1rem; min-width: 1.6rem; padding: .1rem .45rem; border: 1px solid var(--rim); border-radius: 6px; font: 600 .8rem "JetBrains Mono", monospace; color: var(--mute); text-align: center; }
.blog-search input:focus ~ .blog-search-key { display: none; }
.blog-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.blog-chips { display: flex; align-items: center; gap: .4rem; }
.blog-filter-label { margin-right: .2rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.blog-chip { font: inherit; font-size: .86rem; padding: .34rem .8rem; border: 1px solid var(--rim); border-radius: 999px; background: var(--abyss); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.blog-chip:hover { border-color: #2a6175; color: var(--ink); }
.blog-chip[aria-pressed="true"] { background: var(--glow); border-color: var(--glow); color: var(--abyss); font-weight: 600; }
.blog-chip:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.blog-filter-count { margin-left: auto; font-size: .85rem; color: var(--mute); white-space: nowrap; }
@media (max-width: 640px) {
  .blog-search-key { display: none; }
  .blog-search input { padding-right: 3rem; }
  .blog-search-clear { right: .6rem; }
  .blog-filter-row { gap: .5rem; }
  .blog-chips { flex-wrap: wrap; width: 100%; padding-bottom: .2rem; }
  .blog-filter-count { margin-left: 0; }
}
.blog-card[hidden] { display: none; }
.blog-index .blog-empty { margin-top: 1.4rem; color: var(--ink-2); }
.blog-index .blog-empty[hidden] { display: none; }
@media (min-width: 1100px) { .blog-index [data-blog-grid] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .blog-index [data-blog-grid] .blog-card h3 { font-size: 1.25rem; } }
.blog-index [data-blog-grid] .blog-card { align-content: start; }
/* Article share bar and role links */
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2.4rem 0 1rem; padding-top: 1.4rem; border-top: 1px solid var(--rim); }
.blog-paper .blog-share-title { flex-basis: 100%; margin: 0 0 .2rem; font-weight: 700; color: var(--ink); }
.blog-share-btn { font: inherit; font-size: .88rem; padding: .42rem .9rem; border: 1px solid var(--rim); border-radius: 999px; background: var(--abyss); color: var(--ink-2); cursor: pointer; text-decoration: none; }
.identity-abyss.blog-page main .blog-share a.blog-share-btn { color: var(--ink-2); text-decoration: none; }
.blog-share-btn:hover, .identity-abyss.blog-page main .blog-share a.blog-share-btn:hover { border-color: var(--glow); color: var(--ink); }
.blog-share-btn:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.blog-copy-manual { grid-column: 1 / -1; flex-basis: 100%; min-width: 0; color: var(--ink); }
.blog-copy-manual input { display: block; box-sizing: border-box; width: 100%; min-width: 0; margin-top: .4rem; padding: .6rem; font: inherit; color: var(--ink); background: var(--abyss); border: 1px solid var(--rim); border-radius: 6px; }
.blog-copy-manual input:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; }
.blog-cta .blog-cta-roles { margin: .9rem 0 0; font-size: .86rem; color: var(--ink-2); }
.blog-index .blog-follow { margin-top: .4rem; color: var(--mute); }

/* Article figure (inline SVG, e.g. the SCA iceberg) */
.blog-figure { margin: 1.6rem 0 1.4rem; }
.blog-figure svg, .blog-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rim); }
.blog-figure .role-fig-zoom { display: block; border-radius: 12px; cursor: zoom-in; }
.blog-figure .role-fig-zoom:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 4px; }
.blog-paper .blog-figure figcaption { margin-top: .55rem; font-size: .85rem; line-height: 1.5; color: var(--ink-2); }

/* "Chef en crise" (SCA introduction game): a neighbourhood bakery, paper objects on a dark counter */
.cc { --cc-paper: #fbf6ea; --cc-ink: #2b2620; --cc-soft: #6b6052; --cc-red: #c2410c; --cc-amber: #f0a43c; --cc-ok: #2ee6c8; --cc-teal-ink: #0f766e;
  display: grid; gap: 1rem; padding: 1.2rem; border: 1px solid var(--rim); border-radius: 16px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(46, 230, 200, .08), transparent 60%), #08131d; color: #e9f4f5; }
.blog-paper .cc p { margin: 0; }
.blog-paper .cc :is(p, li) > strong { background-image: none; padding: 0; }
.cc-head { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; }
.cc-cal { display: grid; justify-items: center; width: 4.2rem; padding: .25rem 0 .35rem; border-radius: 8px; background: var(--cc-paper); color: var(--cc-ink); box-shadow: 0 4px 0 #d8cdb4, 0 10px 20px -10px #000; }
.cc-cal-top { display: block; width: 100%; margin-top: -.25rem; padding: .15rem 0; border-radius: 8px 8px 0 0; background: var(--cc-red); color: #fff; font: 700 .68rem "JetBrains Mono", monospace; letter-spacing: .1em; text-align: center; }
.cc-cal strong { font-family: var(--display); font-size: 1.7rem; line-height: 1.15; }
.cc-cal-sub { font: .64rem "JetBrains Mono", monospace; color: var(--cc-soft); }
.blog-paper .cc-title { font-family: "Caveat", cursive; font-size: 2.3rem; line-height: .95; color: #fff; }
.blog-paper .cc-shop { font: .74rem "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #7af2dc; }
.cc-gauges { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
.cc-gauge { display: grid; gap: .35rem; padding: .55rem .75rem; border: 1px solid #16384a; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.cc-gauge-label { font-size: .74rem; letter-spacing: .04em; color: #b4cbd0; }
.cc-faces { display: flex; flex-wrap: wrap; gap: .25rem; }
.cc-face svg { display: block; width: 1.55rem; height: 1.55rem; fill: #2ee6c8; stroke: #08131d; stroke-width: 1.6; stroke-linecap: round; transition: fill .3s; }
.cc-face svg circle:first-child { stroke: none; }
.cc-face .ill { display: none; }
.cc-face.is-ill svg { fill: #ff8a5c; }
.cc-face.is-ill .ok { display: none; }
.cc-face.is-ill .ill { display: inline; }
.cc-face .ok circle, .cc-face .ill path, .cc-face .ok path { fill: none; }
.cc-face .ok circle { fill: #08131d; }
.cc-bin-wrap { display: flex; align-items: center; gap: .45rem; }
.cc-bin svg { display: block; width: 2rem; height: 2rem; fill: none; stroke: #b4cbd0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cc-bin .fill { fill: transparent; stroke: none; transition: fill .3s; }
.cc-bin.is-full .fill { fill: var(--cc-amber); }
.cc-bin.is-full svg { stroke: var(--cc-amber); }
.cc-bin-count { font: 700 1.25rem var(--display); color: #fff; }
.is-bump { animation: cc-bump .45s ease; }
@keyframes cc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1); } }

.cc-intro { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cc-intro { grid-template-columns: 1.1fr 1fr; align-items: center; } }
.cc-front { position: relative; display: block; }
.cc-front svg { display: block; width: 100%; height: auto; }
.cc-front .wall { fill: #f3e7cf; } .cc-front .awning { fill: #c2410c; } .cc-front .stripes { stroke: #fbf6ea; stroke-width: 10; opacity: .9; }
.cc-front .scallop { fill: #c2410c; stroke: #c2410c; } .cc-front .window { fill: #0c2231; stroke: #8a6a3f; stroke-width: 3; }
.cc-front .door { fill: #2b5d6b; stroke: #8a6a3f; stroke-width: 3; } .cc-front .knob { fill: #f0a43c; }
.cc-front .cakes path { fill: #f6c9a8; stroke: #fbf6ea; stroke-width: 2; } .cc-front .sign { fill: #08131d; stroke: #f0a43c; stroke-width: 2; }
.cc-intro-text { display: grid; gap: 1rem; justify-items: start; font-size: 1.02rem; line-height: 1.7; color: #e9f4f5; }

.cc-notice { position: relative; display: grid; gap: .25rem; max-width: 34rem; margin: .4rem auto .2rem; padding: 1rem 1.1rem .9rem; background: #fff7c7; color: var(--cc-ink); transform: rotate(-.8deg); box-shadow: 0 12px 24px -14px #000; animation: cc-drop .4s ease; }
.cc-notice::before, .cc-notice::after { content: ""; position: absolute; top: -.55rem; width: 4.2rem; height: 1.1rem; background: rgba(255, 255, 255, .45); }
.cc-notice::before { left: 1.2rem; transform: rotate(-6deg); } .cc-notice::after { right: 1.2rem; transform: rotate(5deg); }
.cc-notice strong { font-size: .95rem; color: var(--cc-ink); }
.cc-notice-text { font-size: .92rem; line-height: 1.5; color: #4b4336; }
.cc-notice-stamp { justify-self: start; margin-bottom: .2rem; padding: .05rem .5rem; border: 2px solid var(--cc-red); border-radius: 4px; color: var(--cc-red); font: 700 .72rem "JetBrains Mono", monospace; letter-spacing: .14em; transform: rotate(-3deg); }
@keyframes cc-drop { from { opacity: 0; transform: translateY(-14px) rotate(-3deg); } to { opacity: 1; transform: rotate(-.8deg); } }

.cc-stage { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cc-stage { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.cc-ticket { position: relative; padding: .9rem .95rem 1.4rem; background: var(--cc-paper); color: var(--cc-ink); font-family: "JetBrains Mono", monospace; box-shadow: 0 14px 26px -16px #000;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 10px repeat-x; }
.blog-paper .cc-ticket-head { font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-align: center; color: var(--cc-ink); }

.cc-preps, .cc-ings, .cc-sub { margin: 0; padding: 0; list-style: none; }
.blog-paper .cc-ticket li { margin: 0; color: var(--cc-ink); }
.cc-prep { padding: .4rem 0; border-top: 1px dashed #cbbf9f; }
.cc-prep-name { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.cc-ing { font-size: .76rem; line-height: 1.5; }
.cc-ing-line { display: flex; align-items: baseline; gap: .3rem; }
.cc-ing-name { flex: 0 1 auto; }
.cc-dots { flex: 1 1 1rem; min-width: .6rem; border-bottom: 1px dotted #b8ab8c; transform: translateY(-.25em); }
.blog-paper .cc-ticket .cc-lot { flex: 0 0 auto; color: var(--cc-soft); }
.cc-sub { padding-left: .9rem; }
.cc-prep:not(.has-hit) { opacity: .6; }
.cc-ing.is-hit > .cc-ing-line { margin: 0 -.25rem; padding: 0 .25rem; font-weight: 700; background: linear-gradient(transparent 15%, #ffd59a 15% 88%, transparent 88%); }
.blog-paper .cc-ticket .cc-hit { display: inline-block; margin: .1rem 0 .2rem; padding: 0 .4rem; border: 1.5px solid var(--cc-red); border-radius: 999px; color: var(--cc-red); font-size: .68rem; font-weight: 700; transform: rotate(-2deg); }

.cc-side { display: grid; gap: .7rem; }
.cc-ctx { display: grid; gap: .25rem; padding: .65rem .8rem; border-left: 3px solid #7af2dc; border-radius: 0 10px 10px 0; background: rgba(122, 242, 220, .06); }
.cc-ctx strong { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #7af2dc; }
.blog-paper .cc-ctx p { font-size: .92rem; line-height: 1.5; color: #e9f4f5; }
.cc-choices { display: grid; gap: .5rem; }
.cc-choice { display: grid; grid-template-columns: 1.8rem 1fr; gap: .6rem; align-items: center; padding: .65rem .8rem; border: 1px solid #16384a; border-radius: 12px; background: rgba(255, 255, 255, .03); color: #e9f4f5; font: inherit; font-size: .92rem; line-height: 1.4; text-align: left; cursor: pointer; transition: border-color .2s, transform .15s, background .2s; }
.cc-choice-key { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1.5px solid #7af2dc; color: #7af2dc; font: 700 .8rem "JetBrains Mono", monospace; }
.cc-choice:hover:not(:disabled) { border-color: #2ee6c8; background: rgba(46, 230, 200, .07); transform: translateX(4px); }
.cc-choice:focus-visible, .cc-next:focus-visible { outline: 2px solid #7af2dc; outline-offset: 2px; }
.cc-choice:disabled { cursor: default; opacity: .4; }
.cc-choice.is-picked { opacity: 1; }
.cc-choice.is-good { border-color: #2ee6c8; background: rgba(46, 230, 200, .12); }
.cc-choice.is-bad { border-color: #ff8a5c; background: rgba(255, 138, 92, .12); }
.cc-choice.is-waste, .cc-choice.is-meh { border-color: var(--cc-amber); background: rgba(240, 164, 60, .1); }
.cc-choice.is-picked .cc-choice-key { background: currentColor; }
.cc-choice.is-good .cc-choice-key { color: #2ee6c8; } .cc-choice.is-bad .cc-choice-key { color: #ff8a5c; } :is(.cc-choice.is-waste, .cc-choice.is-meh) .cc-choice-key { color: var(--cc-amber); }
.cc-outcome { display: grid; gap: .6rem; justify-items: start; }
.cc-outcome:empty { display: none; }
.blog-paper .cc-outcome p { font-size: .94rem; line-height: 1.6; color: #e9f4f5; }
.cc-stamp { padding: .15rem .7rem; border: 3px solid currentColor; border-radius: 6px; font: 800 1.05rem var(--display); letter-spacing: .12em; transform: rotate(-4deg); animation: cc-stamp .35s cubic-bezier(.2, 1.6, .4, 1); }
.cc-outcome.is-good .cc-stamp { color: #2ee6c8; } .cc-outcome.is-bad .cc-stamp { color: #ff8a5c; } :is(.cc-outcome.is-waste, .cc-outcome.is-meh) .cc-stamp { color: var(--cc-amber); }
@keyframes cc-stamp { from { opacity: 0; transform: scale(2.2) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(-4deg); } }
.cc-next { justify-self: start; padding: .65rem 1.2rem; border: 0; border-radius: 999px; background: #2ee6c8; color: #04221d; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 8px 22px -10px rgba(46, 230, 200, .8); transition: transform .15s; }
.cc-next:hover { transform: translateY(-2px); }

.cc-result { display: grid; gap: .7rem; }
.cc-result-top { display: flex; align-items: center; gap: 1rem; }
.cc-hat svg { display: block; width: 4.5rem; height: auto; fill: #fbf6ea; stroke: #b4cbd0; stroke-width: 1.5; }
.cc-stars { font-size: 1.4rem; letter-spacing: .1em; color: #2a4555; }
.cc-stars .is-on { color: #f0a43c; }
.blog-paper .cc-rank { font-family: "Caveat", cursive; font-size: 2.3rem; line-height: 1; color: #fff; }
.blog-paper .cc-rank-sub { color: #b4cbd0; }
.blog-paper .cc-lessons-title { margin-top: .3rem; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: #7af2dc; }
.cc-lessons { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; font-size: .92rem; line-height: 1.55; color: #e9f4f5; }
.blog-paper .cc-lessons li { color: #e9f4f5; }
.cc-lessons li::marker { color: #2ee6c8; font-weight: 700; }
.cc-lessons li:is(.is-bad, .is-waste, .is-meh)::marker { color: #ff8a5c; }
.blog-paper .cc-real { padding: .8rem .95rem; border-radius: 10px; background: rgba(46, 230, 200, .07); line-height: 1.65; color: #e9f4f5; }
@media (prefers-reduced-motion: reduce) { .cc-notice, .cc-stamp, .is-bump { animation: none; } }
.blog-paper .cc .cc-cal strong { color: var(--cc-ink); }
.blog-paper .cc .cc-notice strong { color: var(--cc-ink); font-size: .98rem; }
.blog-paper .cc .cc-ticket, .blog-paper .cc .cc-ticket .cc-ticket-head, .blog-paper .cc .cc-ticket .cc-prep-name, .blog-paper .cc .cc-ticket .cc-ing-name { color: var(--cc-ink); }
.cc-choice.is-picked .cc-choice-key { background: none; color: #08131d; border-color: transparent; }
.cc-choice.is-good.is-picked .cc-choice-key { background: #2ee6c8; } .cc-choice.is-bad.is-picked .cc-choice-key { background: #ff8a5c; } :is(.cc-choice.is-waste, .cc-choice.is-meh).is-picked .cc-choice-key { background: var(--cc-amber); }
@media (min-width: 760px) { .cc-stage { grid-template-columns: 1.3fr 1fr; } }
.blog-paper .cc-rank { font-size: 2rem; line-height: 1.05; }
/* Layout pass: one header row, full-width notice, compact receipt */
@media (min-width: 760px) {
  .cc-head { grid-template-columns: auto 1fr auto; }
  .cc-gauges { grid-column: auto; grid-template-columns: auto auto; }
  .cc-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; }
}
.cc-gauge { align-content: start; }
.cc-faces { flex-wrap: nowrap; gap: .2rem; }
.cc-face svg { width: 1.35rem; height: 1.35rem; }
@media (max-width: 420px) { .cc-faces { flex-wrap: wrap; } }
.cc-notice { max-width: none; margin: .5rem .3rem 0; transform: rotate(-.4deg); }
@keyframes cc-drop { from { opacity: 0; transform: translateY(-14px) rotate(-2deg); } to { opacity: 1; transform: rotate(-.4deg); } }
.cc-prep-line { display: flex; align-items: baseline; gap: .3rem; }
.blog-paper .cc .cc-ticket .cc-count { flex: 0 0 auto; font-size: .7rem; color: var(--cc-soft); }
.cc-prep:not(.has-hit) { opacity: .7; padding: .3rem 0; }
.cc-prep.has-hit .cc-ings { margin-top: .25rem; }
.cc-side { align-content: start; }
.cc-choice { min-height: 3.1rem; }
.cc-ing.is-hit > .cc-ing-line { margin: 0; padding: 0; background: none; }
.cc-ing.is-hit .cc-ing-name { padding: 0 .2rem; background: linear-gradient(transparent 12%, #ffd59a 12% 90%, transparent 90%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.blog-paper .cc .cc-ticket-head { margin-bottom: .35rem; padding-bottom: .4rem; border-bottom: 2px dashed #cbbf9f; }
.cc-stage { margin-top: .3rem; }
.cc-ing-line { flex-wrap: nowrap; }
.cc-ing-name { min-width: 0; }
.blog-paper .cc .cc-ticket .cc-ing, .blog-paper .cc .cc-ticket .cc-ing-name, .blog-paper .cc .cc-ticket .cc-lot { font-size: .78rem; line-height: 1.55; }
.blog-paper .cc .cc-ticket .cc-prep-name { font-size: .74rem; }
.blog-paper .cc .cc-ticket-head { text-transform: uppercase; font-size: .76rem; }
.blog-paper .cc .cc-shop { white-space: nowrap; }
.blog-paper .cc .cc-title, .cc-gauge-label { white-space: nowrap; } .blog-paper .cc .cc-title { font-size: 2.1rem; }
@media (min-width: 760px) {
  .cc-head { grid-template-columns: auto 1fr; }
  .cc-gauges { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
}
/* Timeline labels ('Étape 1', 'Jour 0') stay on one line, in a column wide enough for them */
.blog-paper .timeline li { grid-template-columns: 5.4rem 1fr; }
.blog-paper .timeline::before { left: 2.7rem; }
.tl-year { justify-self: center; white-space: nowrap; }
/* Process steps (fix, test, deploy): cards in a row instead of a timeline */
.blog-paper .timeline.is-steps { display: grid; gap: .8rem; counter-reset: none; }
.blog-paper .timeline.is-steps::before { display: none; }
@media (min-width: 720px) { .blog-paper .timeline.is-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blog-paper .timeline.is-steps li { position: relative; display: grid; grid-template-columns: none; align-content: start; gap: .55rem; margin: 0; padding: .85rem .9rem 1rem; border: 1px solid var(--rim); border-radius: 12px; background: var(--deep); }
.blog-paper .timeline.is-steps li > .tl-year { justify-self: start; grid-row: auto; }
.blog-paper .timeline.is-steps p { grid-column: auto; font-size: .93rem; line-height: 1.55; }
.blog-paper .timeline.is-steps li.is-key { border-color: var(--glow); background: linear-gradient(180deg, var(--glow-soft), var(--deep)); }
@media (min-width: 720px) {
  .blog-paper .timeline.is-steps li:not(:last-child)::after { content: "→"; position: absolute; right: -.75rem; top: 1rem; z-index: 2; color: var(--glow-2); font-weight: 700; }
}
@media (min-width: 720px) {
  .blog-paper .timeline.is-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-paper .timeline.is-steps li:not(:last-child)::after { content: none; }
}
/* Risk = likelihood x impact takeaway */
.blog-paper .risk-box { display: grid; gap: .55rem; }
.blog-paper .risk-box p { margin: 0; }
.blog-paper .risk-formula { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .2rem; font-family: var(--display); font-size: 1.15rem; }
.rf-term { padding: .2rem .7rem; border: 1px solid var(--glow); border-radius: 999px; color: var(--glow-2); font-weight: 650; }
.rf-term:first-child { background: var(--glow); color: var(--abyss); }
.rf-op { color: var(--ink-2); font-weight: 700; }
@media (max-width: 520px) { .blog-paper .risk-formula { font-size: .9rem; gap: .3rem; } .rf-term { padding: .15rem .5rem; } }

/* Blog FAQ: an editorial list (hairlines, question mark, chevron) instead of stacked boxes */
.blog-paper .blog-faq { display: grid; gap: 0; margin-top: 1.2rem; border-top: 1px solid var(--rim); }
.blog-paper .blog-faq .faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--rim); border-radius: 0; background: none; box-shadow: none; }
.blog-paper .blog-faq .faq-item[open] { background: none; }
.blog-paper .blog-faq .faq-item summary { display: grid; grid-template-columns: 1.7rem 1fr 1rem; gap: .8rem; align-items: center; padding: 1rem .2rem; font-size: 1.02rem; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.blog-paper .blog-faq .faq-item summary::before { content: "?"; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--glow-soft); color: var(--glow-2); font: 700 .85rem var(--display); }
.blog-paper .blog-faq .faq-item summary::after { content: ""; width: .55rem; height: .55rem; margin: 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); margin-top: -.25rem; transition: transform .2s; justify-self: center; }
.blog-paper .blog-faq .faq-item[open] summary::after { content: ""; transform: rotate(225deg); margin-top: .25rem; border-color: var(--glow-2); }
.blog-paper .blog-faq .faq-item summary:hover { color: var(--glow-2); }
.blog-paper .blog-faq .faq-item summary:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 2px; border-radius: 6px; }
.blog-paper .blog-faq .faq-item[open] summary::before { background: var(--glow); color: var(--abyss); }
.blog-paper .blog-faq .faq-item p { margin: 0 0 0 2.5rem; padding: 0 1rem .25rem 1rem; border-left: 2px solid var(--glow-soft); font-size: .96rem; line-height: 1.7; color: var(--ink-2); }
.blog-paper .blog-faq .faq-item p:last-child { padding-bottom: 1.1rem; margin-bottom: .2rem; }
.blog-paper .blog-faq .faq-item p + p { padding-top: .4rem; }
@media (max-width: 520px) { .blog-paper .blog-faq .faq-item p { margin-left: .4rem; } }
.blog-share-btn { display: inline-flex; align-items: center; gap: .45rem; }
.blog-share-btn .share-ico { flex: none; width: 1rem; height: 1rem; }
/* Share bar: 6 buttons on an even grid (3x2, then 2x3 on phones) so no button is left alone on a row */
.blog-share { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-paper .blog-share-title { grid-column: 1 / -1; }
.blog-share-btn { justify-content: center; white-space: nowrap; }
@media (max-width: 560px) { .blog-share { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* SAST game (café skin of the .cc game): instruction sheets with line numbers, steam, hourglass */
.cc-sheets .cc-ing-line { gap: .55rem; }
.blog-paper .cc .cc-sheets .cc-lot { flex: 0 0 2.1rem; color: var(--cc-soft); }
.cc-sheets .cc-ing > .cc-hit { margin-left: 2.65rem; }
.cc-front .steam { fill: none; stroke: #fbf6ea; stroke-width: 2; stroke-linecap: round; opacity: .75; }
.cc-hat svg path:last-child { fill: none; }
@media (max-width: 520px) { .blog-paper .cc .cc-title { font-size: 1.75rem; white-space: normal; } .blog-paper .cc .cc-gauge-label { white-space: normal; } }
/* SAST game, café skin: warm light, coffee calendar, chalkboard report, clipboard sheets, cups and beans */
.sast-game.cc { --cc-coffee: #6f4326; --cc-crema: #e7c9a0; --cc-chalk: #f4f1e8;
  background-image: radial-gradient(120% 60% at 50% 0, rgba(231, 160, 90, .13), transparent 60%), radial-gradient(80% 50% at 100% 100%, rgba(122, 242, 220, .05), transparent 70%); }
.sast-game .cc-cal-top { background: var(--cc-coffee); }
.blog-paper .sast-game .cc-shop { color: var(--cc-crema); }
/* cups gauge */
.cc-cup svg { fill: none; stroke: #e9f4f5; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cc-cup .ok .body { fill: #f4f1e8; stroke: #f4f1e8; }
.cc-cup .ok .coffee { fill: #6f4326; stroke: none; }
.cc-cup .steam { stroke: #b4cbd0; opacity: .8; animation: cc-steam 2.4s ease-in-out infinite; }
.cc-cup:nth-child(2n) .steam { animation-delay: .8s; } .cc-cup:nth-child(3n) .steam { animation-delay: 1.5s; }
.cc-cup .ill .body { fill: none; stroke: #ff8a5c; stroke-dasharray: 2.2 2; }
.cc-cup.is-ill svg { fill: none; }
.cc-cup.is-ill .handle, .cc-cup.is-ill .saucer { stroke: #ff8a5c; opacity: .7; }
@keyframes cc-steam { 0%, 100% { opacity: 0; transform: translateY(1.5px); } 50% { opacity: .85; transform: translateY(-1px); } }
/* chalkboard report */
.sast-game .cc-notice { max-width: 36rem; margin: .6rem auto .3rem; padding: 1rem 1.2rem 1.05rem; transform: none; background: radial-gradient(130% 120% at 30% 0, #2c3a33, #1b2420 70%); border: 9px solid #7a4b2a; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 26px rgba(0, 0, 0, .45), 0 14px 26px -14px #000; }
.sast-game .cc-notice::before, .sast-game .cc-notice::after { display: none; }
.sast-game .cc-notice-stamp { border-color: var(--cc-crema); color: var(--cc-crema); border-style: dashed; transform: rotate(-2deg); }
.blog-paper .sast-game.cc .cc-notice strong { font-family: "Caveat", cursive; font-size: 1.65rem; font-weight: 700; line-height: 1.05; color: var(--cc-chalk); }
.blog-paper .sast-game .cc-notice-text { color: #d6dccf; font-size: .95rem; }
/* clipboard */
.cc-board { position: relative; padding: 1.5rem .7rem .8rem; border-radius: 12px; background: linear-gradient(160deg, #b07a46, #8a5a32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 16px 28px -16px #000; }
.cc-clip { position: absolute; top: -.45rem; left: 50%; width: 5.5rem; height: 1.5rem; transform: translateX(-50%); border-radius: 6px 6px 10px 10px; background: linear-gradient(#e7ecef, #9aa6ad); box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
.cc-clip::after { content: ""; position: absolute; left: 50%; top: .35rem; width: 1.6rem; height: .45rem; transform: translateX(-50%); border-radius: 999px; background: #5d676d; }
.sast-game .cc-sheets { -webkit-mask: none; mask: none; padding: .9rem .95rem 1rem; border-radius: 3px; box-shadow: 0 2px 0 #e2d8c2, 0 4px 0 #d3c7ad; background: repeating-linear-gradient(transparent 0 1.55rem, rgba(120, 160, 190, .14) 1.55rem calc(1.55rem + 1px)), var(--cc-paper); }
.cc-step { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin: 0 .3rem 0 -.25rem; border-radius: 50%; background: var(--cc-red); color: #fff; font-size: .62rem; transform: rotate(2deg); }
/* beans rating */
.cc-beans { display: flex; gap: .3rem; }
.cc-beans span svg { display: block; width: 1.5rem; height: 1.5rem; fill: #2a4555; stroke: #08131d; stroke-width: 1.4; stroke-linecap: round; }
.cc-beans span svg path { fill: none; }
.cc-beans .is-on svg { fill: #b36a32; }
/* café front: coffee awning, white cups, rising steam */
.sast-game .cc-front .awning, .sast-game .cc-front .scallop { fill: #6f4326; stroke: #6f4326; }
.sast-game .cc-front .cakes path { fill: #f4f1e8; stroke: #e7c9a0; }
.sast-game .cc-front .window { fill: #2a1a10; }
.sast-game .cc-front .steam { animation: cc-steam 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cc-cup .steam, .sast-game .cc-front .steam { animation: none; opacity: .7; } }
.sast-game .cc-sheets { background: var(--cc-paper); }
.sast-game .cc-cups { gap: .35rem; }
.sast-game .cc-cup svg { width: 1.7rem; height: 1.7rem; }
@media (max-width: 520px) { .sast-game .cc-cup svg { width: 1.45rem; height: 1.45rem; } .sast-game .cc-cups { gap: .15rem; } }
.cc-beans span svg { width: 1.9rem; height: 1.9rem; }
/* results as the café's chalkboard menu */
.sast-game .cc-lessons { margin: 0; padding: 1rem 1.3rem 1rem 2.6rem; border: 9px solid #7a4b2a; border-radius: 6px; background: radial-gradient(130% 120% at 30% 0, #2c3a33, #1b2420 70%); box-shadow: inset 0 0 26px rgba(0, 0, 0, .45), 0 14px 26px -14px #000; }
.blog-paper .sast-game .cc-lessons li { color: #d6dccf; }
.blog-paper .sast-game .cc-lessons li strong { font-family: "Caveat", cursive; font-size: 1.35rem; font-weight: 700; color: var(--cc-chalk); }
.blog-paper .sast-game .cc-lessons-title { font-family: "Caveat", cursive; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--cc-crema); }
/* SCA deep dive: interactive dependency tree (blog-sca-tree.js) */
.sca-tree { margin: 1.6rem 0; padding: 1rem; border: 1px solid #16384a; border-radius: 16px; background: radial-gradient(110% 70% at 50% 0, rgba(122, 242, 220, .07), transparent 60%), #071521; color: #e9f4f5; }
.sca-tree:not(.is-live) { color: var(--ink-2); }
.st-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }
.st-levels { display: flex; flex-wrap: wrap; gap: .4rem; }
.st-scores { display: flex; gap: .5rem; }
.blog-paper .st-score { display: grid; min-width: 6.5rem; margin: 0; padding: .4rem .7rem; border: 1px solid #16384a; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.st-score strong { font: 700 1.5rem/1.1 var(--display); }
.st-score span { font-size: .72rem; color: #b4cbd0; }
.st-score.is-alert strong { color: #ff8a5c; } .st-score.is-cleared strong { color: #7af2dc; }
.st-scroll { overflow-x: auto; margin: .8rem -.2rem .2rem; }
.st-svg { display: block; width: 100%; min-width: 620px; height: auto; font-family: Geist, system-ui, sans-serif; }
.st-root { fill: #0e2a3a; stroke: #7af2dc; stroke-width: 1.5; }
.st-root-t { fill: #e9f4f5; font-size: 15px; font-weight: 700; text-anchor: middle; }
.st-row-t { fill: #6f8a94; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.st-edge { stroke: #1f4556; stroke-width: 1.2; transition: stroke .3s; }
.st-edge.is-hot { stroke: #ff8a5c; stroke-width: 2; }
.st-node circle { fill: #0e2a3a; stroke: #2a8c88; stroke-width: 1.5; transition: fill .3s, stroke .3s, opacity .3s; }
.st-node.is-direct circle { stroke: #7af2dc; }
.st-name { fill: #b4cbd0; font-size: 12px; text-anchor: middle; }
.st-tag { fill: #e9f4f5; font: 700 11px "JetBrains Mono", monospace; text-anchor: middle; }
.st-status { font-size: 11.5px; font-weight: 700; text-anchor: middle; fill: transparent; transition: fill .3s; }
.st-node.is-alert circle { fill: #3a1a12; stroke: #ff8a5c; stroke-width: 2; }
.st-node.is-alert .st-status { fill: #ffb27a; }
.st-node.is-urgent circle { fill: #ff8a5c; stroke: #ffd2b8; stroke-width: 2.5; animation: st-pulse 1.6s ease-in-out infinite; }
.st-node.is-urgent .st-tag { fill: #2b0d05; }
.st-node.is-urgent .st-status { fill: #ff8a5c; }
.st-node.is-planned circle { fill: #3a2a10; stroke: #f0a43c; stroke-width: 2; }
.st-node.is-planned .st-status { fill: #f0a43c; }
.st-node.is-low circle { fill: #0e2a3a; stroke: #f0a43c; stroke-dasharray: 3 2.5; }
.st-node.is-low .st-status { fill: #c9a46a; }
.st-node.is-cleared circle { fill: #0c3330; stroke: #7af2dc; stroke-dasharray: 3 2.5; opacity: .75; }
.st-node.is-cleared .st-status { fill: #7af2dc; }
.sca-tree[data-level="5"] .st-node:not(.is-special):not(.is-direct) circle { opacity: .45; }
@keyframes st-pulse { 0%, 100% { stroke-width: 2.5; } 50% { stroke-width: 6; } }
.blog-paper .st-explain { min-height: 3.2em; margin: .2rem 0 0; padding: .6rem .8rem; border-left: 3px solid #7af2dc; border-radius: 0 10px 10px 0; background: rgba(122, 242, 220, .06); font-size: .95rem; line-height: 1.55; color: #e9f4f5; }
@media (prefers-reduced-motion: reduce) { .st-node.is-urgent circle { animation: none; } }
html[data-theme="light"] .sca-tree { --abyss: #040b12; --deep: #071521; --tide: #0c2231; --rim: #16384a; --ink: #e9f4f5; --ink-2: #b4cbd0; --mute: #7d979e; --glow: #2ee6c8; --glow-2: #7af2dc; --glow-soft: rgba(46, 230, 200, .14); color-scheme: dark; }
.blog-paper .sca-tree strong { background-image: none; padding: 0; }
.st-row-t { text-anchor: middle; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.st-name, .st-status { paint-order: stroke; stroke: #071521; stroke-width: 5px; stroke-linejoin: round; }
.st-status { stroke: transparent; }
.st-node.is-special .st-status, .st-node.is-direct .st-status { stroke: #071521; }
.st-svg { min-width: 560px; }
html[data-theme="light"] .blog-paper .sca-tree p > strong, .blog-paper .sca-tree p > strong { background-image: none; padding: 0; }
/* Figures on phones: keep labels readable, scroll sideways */
.fig-scroll { overflow-x: auto; border-radius: 12px; }
@media (max-width: 640px) {
  .fig-scroll svg { min-width: 620px; }
  .blog-figure:has(.fig-scroll)::before { content: "Faites glisser pour voir toute la figure →"; display: block; margin-bottom: .35rem; font-size: .78rem; color: var(--mute); }
  html[lang="en"] .blog-figure:has(.fig-scroll)::before { content: "Swipe to see the whole figure →"; }
}
/* SAST deep dive lab: chalkboard prompt, the reader's score next to the tool's, panel kept in view */
.lab-guess-bar { padding: .9rem 1.1rem 1rem; border: 9px solid #7a4b2a; border-radius: 6px; background: radial-gradient(130% 120% at 30% 0, #2c3a33, #1b2420 70%); box-shadow: inset 0 0 26px rgba(0, 0, 0, .45), 0 14px 26px -14px #000; }
.blog-paper .lab-guess-title { font-size: 1.9rem; color: #f4f1e8; }
.blog-paper .lab-guess-how { color: #d6dccf; }
.blog-paper .lab-guess-count { color: #e7c9a0; }
.lab-scores:has(.is-you) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-score-box.is-you { border-color: rgba(231, 201, 160, .5); background: radial-gradient(130% 120% at 30% 0, #2c3a33, #1b2420 70%); }
.lab-score-box.is-you .lab-score-num { font-family: "Caveat", cursive; color: #f4f1e8; }
.lab-score-box.is-you .lab-score-label { color: #e7c9a0; }
@media (min-width: 900px) and (min-height: 760px) {
  .lab-panel { position: sticky; top: 5.2rem; z-index: 4; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0 1.1rem; align-items: center; background: linear-gradient(180deg, #0b2230, #071521); box-shadow: 0 18px 30px -18px #000; }
  .lab-panel .lab-step, .lab-panel .lab-controls { grid-column: 1 / -1; }
  .lab-panel .lab-scores { margin: .9rem 0 0; }
  .blog-paper .lab-panel .lab-explain { margin-top: .9rem; align-self: stretch; display: flex; align-items: center; }
}
html[data-theme="light"] .blog-paper .cc :is(p, li) > strong { background-image: none; padding: 0; }
.blog-paper strong.lead-title, html[data-theme="light"] .blog-paper :is(p, li) > strong.lead-title { display: block; width: fit-content; margin-bottom: .25rem; padding: 0; background-image: none; font-size: 1.04em; color: var(--ink); }
.cc-front .sign-t { font-family: "Caveat", cursive; font-size: 17px; font-weight: 700; fill: #fbf6ea; }
/* Small horizontal timeline for a short process (fixing a flaw): pill, dot on a track, short text.
   Below 720px it falls back to the vertical timeline. */
@media (min-width: 720px) {
  .blog-paper .timeline.is-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 1.4rem; margin: 1.6rem 0 1.8rem; }
  .blog-paper .timeline.is-flow::before { left: .45rem; right: 0; top: 2.55rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--rim), var(--rim) 70%, var(--glow)); }
  .blog-paper .timeline.is-flow li { display: grid; grid-template-columns: none; grid-template-rows: auto 1.1rem auto; gap: .6rem; margin: 0; }
  .blog-paper .timeline.is-flow li > .tl-year { grid-row: 1; justify-self: start; }
  .blog-paper .timeline.is-flow li::before { content: ""; grid-row: 2; position: relative; z-index: 1; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid var(--glow-2); background: var(--abyss); align-self: center; }
  .blog-paper .timeline.is-flow li.is-key::before { background: var(--glow); box-shadow: 0 0 0 5px var(--glow-soft); }
  .blog-paper .timeline.is-flow p { grid-column: auto; grid-row: 3; font-size: .95rem; line-height: 1.55; }
  .blog-paper .timeline.is-flow li:not(.is-key) .tl-year { background: var(--tide); color: var(--glow-2); box-shadow: inset 0 0 0 1px var(--rim); }
}
@media (min-width: 720px) {
  .blog-paper .timeline.is-flow li { display: block; position: relative; padding-top: 3.4rem; }
  .blog-paper .timeline.is-flow li > .tl-year { position: absolute; top: 0; left: 0; }
  .blog-paper .timeline.is-flow li::before { position: absolute; top: 2.05rem; left: 0; }
  .blog-paper .timeline.is-flow::before { top: 2.48rem; }
  .blog-paper .timeline.is-flow p + p { margin-top: .35rem; }
}
.st-score.is-later strong { color: #f0a43c; }
.st-scores { flex-wrap: wrap; } .blog-paper .st-score { flex: 1 1 7rem; }
.blog-paper .is-concealed { display: none; }
@media (max-width: 640px) { .blog-paper .lab-code { white-space: pre-wrap; overflow-wrap: anywhere; } }
.blog-paper .tool-table .tool-meta { display: block; margin-top: .25rem; font-size: .76rem; font-weight: 400; color: var(--mute); }
.blog-paper .tool-table th[scope="row"] { min-width: 9rem; }
.blog-paper .tool-table { table-layout: fixed; width: 100%; font-size: .86rem; }
.blog-paper .tool-table th[scope="row"] { min-width: 0; width: 24%; }
.blog-paper .tool-table td, .blog-paper .tool-table th { overflow-wrap: anywhere; hyphens: auto; }
.blog-paper .tool-table th, .blog-paper .tool-table .tool-meta { white-space: normal; }
/* Attack timelines: each date folds to its title to keep the page short */
.blog-paper .timeline .tl-fold { grid-column: 2; }
.blog-paper .timeline .tl-fold summary { display: flex; align-items: baseline; gap: .6rem; padding: .1rem 0 .2rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.blog-paper .timeline .tl-fold summary::-webkit-details-marker { display: none; }
.blog-paper .timeline .tl-fold summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg) translateY(-.2rem); transition: transform .2s; }
.blog-paper .timeline .tl-fold[open] summary::after { transform: rotate(225deg) translateY(-.1rem); border-color: var(--glow-2); }
.blog-paper .timeline .tl-fold summary:hover { color: var(--glow-2); }
.blog-paper .timeline .tl-fold summary:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 3px; border-radius: 4px; }
.blog-paper .timeline .tl-fold > p { margin: .45rem 0 0; }
.blog-paper .timeline.is-folds li { margin-bottom: 1.05rem; align-items: start; }
.blog-paper .timeline.is-folds .tl-fold summary { min-height: 1.75rem; align-items: center; }
/* Mobile table of contents: floating button + sheet (the sidebar shows from 1060px) */
.toc-mob { position: fixed; z-index: 60; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom)); width: min(34rem, calc(100% - 1.6rem)); transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease; pointer-events: none; }
.toc-mob.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (min-width: 1060px) { .toc-mob { display: none; } }
.toc-mob-btn { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem 1rem; border: 1px solid var(--rim); border-radius: 999px; background: color-mix(in srgb, var(--deep) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .55); color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.toc-mob-btn svg { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--glow-2); stroke-width: 2; stroke-linecap: round; }
.toc-mob-label { flex: none; font-weight: 700; }
.toc-mob-cur { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); }
.toc-mob-cur:not(:empty)::before { content: "· "; color: var(--mute); }
.toc-mob-chev { flex: none; width: .5rem; height: .5rem; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(225deg) translate(-2px, -2px); transition: transform .2s; }
.toc-mob.is-open .toc-mob-chev { transform: rotate(45deg); }
.toc-mob-btn:focus-visible { outline: 2px solid var(--glow-2); outline-offset: 3px; }
.toc-mob-panel { margin-bottom: .5rem; max-height: min(60vh, 28rem); overflow-y: auto; padding: .9rem .6rem .7rem 1rem; border: 1px solid var(--rim); border-radius: 18px; background: var(--deep); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.toc-mob-panel p { margin: 0 0 .5rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.toc-mob-panel ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rim); }
.toc-mob-panel a { display: block; padding: .5rem .4rem .5rem .9rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); font-size: .92rem; line-height: 1.35; text-decoration: none; }
.toc-mob-panel a[aria-current] { color: var(--ink); border-left-color: var(--glow); }
@media (prefers-reduced-motion: reduce) { .toc-mob { transition: none; } }
@media (max-width: 600px) {
  .blog-paper .ctx-table th, .blog-paper .ctx-table td { white-space: normal; overflow-wrap: break-word; }
  .blog-paper .tool-table td::before { content: attr(data-label); display: block; margin-top: .35rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
}
.blog-paper .tool-table th[scope="row"] { hyphens: manual; overflow-wrap: break-word; }
/* Figures with a portrait version: shown whole on phones, no sideways scroll */
.blog-figure .fig-tall { display: none; }
@media (max-width: 640px) {
  .blog-figure:has(.fig-tall) .fig-scroll { display: none; }
  .blog-figure .fig-tall { display: block; }
  .blog-figure:has(.fig-tall)::before { content: none; }
}
/* Touch screens: every control reaches a 44px target; receipts stay legible */
@media (pointer: coarse) {
  .blog-paper .quiz-options button, .blog-paper .lab-level, .blog-paper .trace-btn, .blog-paper .demo-chip, .blog-share-btn { min-height: 44px; }
  .blog-paper .quiz-options button { padding-inline: 1.1rem; }
  .blog-paper :is(.quiz-answer, .blog-more) > summary { padding-block: .7rem; }
  .blog-paper .timeline.is-folds .tl-fold summary { min-height: 44px; }
  .lab.is-guess .lab-line { padding-block: .6rem; }
}
@media (max-width: 520px) {
  .blog-paper .cc .cc-ticket .cc-ing, .blog-paper .cc .cc-ticket .cc-ing-name, .blog-paper .cc .cc-ticket .cc-lot { font-size: .82rem; }
  .blog-paper .cc .cc-ticket-head { font-size: .8rem; }
}
.toc-mob.is-shown.is-tucked { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.blog-paper .slip { font-size: 1.22rem; line-height: 1.3; }
@media (max-width: 600px) {
  .blog-paper .tool-table, .blog-paper .tool-table th[scope="row"] { width: 100%; table-layout: auto; }
  .blog-paper .tool-table th[scope="row"] { font-size: 1rem; }
}
@media (pointer: coarse) { .blog-chip { min-height: 44px; } }
@media (max-width: 720px) { .blog-filter-row > * { min-width: 0; max-width: 100%; } .blog-index .blog-chips { max-width: 100%; } }
/* "En 30 secondes" now also carries the three questions to ask */
.blog-summary .summary-ask { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rim); scroll-margin-top: 6rem; }
.blog-paper .blog-summary .summary-ask > p { margin: 0 0 .4rem; color: var(--ink-2); }
/* Short lists that replaced card grids */
.blog-paper .blog-points { display: grid; gap: .9rem; margin: 1rem 0 1.4rem; padding-left: 1.2rem; }
.blog-paper .blog-points li { margin: 0; }
/* Glossary folded by default */
.blog-paper details.blog-glossary > summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; list-style: none; margin: 0; }
.blog-paper details.blog-glossary > summary::-webkit-details-marker { display: none; }
.blog-paper details.blog-glossary > summary::after { content: ""; width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.blog-paper details.blog-glossary[open] > summary::after { transform: rotate(225deg); }
.blog-paper details.blog-glossary[open] > summary { margin-bottom: .8rem; }
.blog-paper details.blog-glossary .gloss-count { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mute); }
@media (pointer: coarse) { .blog-paper details.blog-glossary > summary { min-height: 44px; } }
.blog-paper .tool-table td, .blog-paper .tool-table th { hyphens: manual; } .blog-paper .check-table th[scope="row"] { width: 30%; }
/* Byline: author and dates read as one line, series details below */
.blog-byline { justify-content: flex-start; align-items: baseline; gap: .35rem 0; }
.blog-byline > span:first-child::after { content: "·"; margin: 0 .7rem; color: var(--mute); }
.blog-dates { display: inline-flex; flex-wrap: wrap; gap: 0; }
.by-date { white-space: nowrap; }
.by-date + .by-date::before { content: "·"; margin: 0 .7rem; }
.blog-byline .blog-meta { flex-basis: 100%; }
@media (max-width: 520px) {
  .blog-byline > span:first-child::after { content: none; }
  .blog-byline .blog-dates { flex-basis: 100%; }
}
@media (max-width: 520px) {
  .blog-byline .blog-dates { flex-direction: column; }
  .by-date + .by-date::before { content: none; }
  .by-date + .by-date::first-letter { text-transform: uppercase; }
}
/* Inline table of contents under the byline (phones and tablets) */
.toc-inline { margin: -.6rem 0 1.6rem; border: 1px solid var(--rim); border-radius: 14px; background: var(--deep); }
@media (min-width: 1060px) { .toc-inline { display: none; } }
.toc-inline > summary { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .6rem 1rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.toc-inline > summary::-webkit-details-marker { display: none; }
.toc-inline-count { font-weight: 400; color: var(--mute); font-size: .9rem; }
.toc-inline > summary::after { content: ""; width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; }
.toc-inline[open] > summary::after { transform: rotate(225deg); }
.toc-inline ol { list-style: none; margin: 0; padding: 0 .6rem .7rem 1rem; border-top: 1px solid var(--rim); }
.blog-paper .toc-inline li { margin: 0; }
.identity-abyss.blog-page main .toc-inline a { display: block; padding: .55rem .2rem; color: var(--ink-2); text-decoration: none; line-height: 1.35; border-bottom: 1px solid color-mix(in srgb, var(--rim) 50%, transparent); }
.identity-abyss.blog-page main .toc-inline li:last-child a { border-bottom: 0; }
/* Table of contents: numbers, read sections, progress rail, time left */
.toc-n { flex: none; min-width: 1.6rem; font: 600 .72rem "JetBrains Mono", monospace; color: var(--mute); }
.blog-toc a, .toc-mob-panel a, .identity-abyss.blog-page main .toc-inline a { display: flex !important; align-items: baseline; gap: .15rem; }
.blog-toc a[aria-current] .toc-n, .toc-mob-panel a[aria-current] .toc-n, .toc-inline a[aria-current] .toc-n { color: var(--glow-2); }
.identity-abyss.blog-page main .blog-toc a.is-read, .toc-mob-panel a.is-read, .identity-abyss.blog-page main .toc-inline a.is-read { color: var(--ink-2); }
.blog-toc a.is-read .toc-n, .toc-mob-panel a.is-read .toc-n, .toc-inline a.is-read .toc-n { color: var(--glow-2); opacity: .55; }
.blog-toc ol { position: relative; }
.blog-toc ol::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: calc(var(--toc-p, 0) * 100%); background: var(--glow); opacity: .55; transition: height .15s linear; }
.blog-toc p .toc-left { margin-left: .5rem; letter-spacing: 0; text-transform: none; color: var(--glow-2); }
.blog-toc p .toc-left:empty { display: none; }
.toc-mob-left { flex: none; font-size: .8rem; color: var(--glow-2); }
.toc-mob-left:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .blog-toc ol::before { transition: none; } }
/* Phones: the definition card sits above the floating table of contents, never under it */
@media (max-width: 700px) {
  .term-def { z-index: 80; }
  body:has(.toc-mob.is-shown) .term-def { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* SCA tree on phones: an indented list instead of the wide drawing */
.st-list { display: none; }
@media (max-width: 600px) {
  .sca-tree .st-scroll { display: none; }
  .st-list { display: block; margin: .9rem 0 .4rem; padding: 0; list-style: none; }
  .st-sub { margin: .25rem 0 0 .55rem; padding: 0 0 0 .9rem; list-style: none; border-left: 1px solid #1f4556; }
  .blog-paper .st-li { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .55rem; margin: .4rem 0; color: #b4cbd0; font-size: .92rem; }
  .st-li > .st-sub { flex-basis: 100%; }
  .st-li.is-root > strong { color: #e9f4f5; }
  .st-li-sub { font-size: .8rem; color: #6f8a94; }
  .st-dot { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 1.5px solid #2a8c88; background: #0e2a3a; color: #e9f4f5; font: 700 .68rem "JetBrains Mono", monospace; }
  .st-li.is-direct > .st-dot { border-color: #7af2dc; }
  .st-li-status { font-size: .78rem; font-weight: 700; }
  .st-li-status:empty { display: none; }
  .st-li.is-alert > .st-dot { background: #3a1a12; border-color: #ff8a5c; } .st-li.is-alert > .st-li-status { color: #ffb27a; }
  .st-li.is-urgent > .st-dot { background: #ff8a5c; border-color: #ffd2b8; color: #2b0d05; } .st-li.is-urgent > .st-li-status { color: #ff8a5c; }
  .st-li.is-planned > .st-dot { background: #3a2a10; border-color: #f0a43c; } .st-li.is-planned > .st-li-status { color: #f0a43c; }
  .st-li.is-low > .st-dot { border-style: dashed; border-color: #f0a43c; } .st-li.is-low > .st-li-status { color: #c9a46a; }
  .st-li.is-cleared > .st-dot { border-style: dashed; border-color: #7af2dc; opacity: .75; } .st-li.is-cleared > .st-li-status { color: #7af2dc; }
  .blog-paper .st-more { color: #6f8a94; font-size: .8rem; margin: .2rem 0; }
  .blog-paper pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}
html[data-theme="light"] .blog-paper .sca-tree li > strong, .blog-paper .sca-tree li > strong { background-image: none; padding: 0; }
/* Level pickers (SCA tree, SAST lab): numbered steps; on phones a 5-step stepper with the level name below */
.lv-current { display: none; }
@media (max-width: 600px) {
  .st-levels, .lab-controls { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: 100%; }
  .st-levels::before, .lab-controls::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; background: #1f4556; }
  .st-levels .lab-level, .lab-controls .lab-level { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0; border-radius: 12px; }
  .st-levels .lv-name, .lab-controls .lv-name { display: none; }
  .lv-n { font: 700 1rem "JetBrains Mono", monospace; }
  .blog-paper .lv-current { display: block; margin: .6rem 0 0; font-weight: 600; color: var(--ink); text-align: center; }
  .st-bar { display: block; }
  .st-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .8rem; }
  .blog-paper .st-score { min-width: 0; padding: .45rem .55rem; }
  .st-score strong { font-size: 1.3rem; }
  .st-score span { font-size: .68rem; line-height: 1.25; }
}
/* Level dock: change level from the bottom of the screen while the result is in view (phones) */
.lv-dock { position: fixed; z-index: 65; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom)); display: none; align-items: center; gap: .4rem; width: min(30rem, calc(100% - 1.6rem)); padding: .35rem; border: 1px solid #2a6175; border-radius: 999px; background: color-mix(in srgb, #0b2230 94%, transparent); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6); transform: translate(-50%, 140%); opacity: 0; transition: transform .25s ease, opacity .25s ease; color: #e9f4f5; }
@media (max-width: 600px) { .lv-dock { display: flex; } }
.lv-dock.is-shown { transform: translate(-50%, 0); opacity: 1; }
.lv-dock-btn { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #2ee6c8; color: #04120f; font: 700 1.4rem/1 var(--display); cursor: pointer; }
.lv-dock-btn:disabled { background: #16384a; color: #6f8a94; cursor: default; }
.lv-dock-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.blog-paper .lv-dock-label, .lv-dock-label { flex: 1; min-width: 0; margin: 0; display: grid; text-align: center; line-height: 1.2; }
.lv-dock-label strong { font-size: .9rem; color: #e9f4f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-dock-label span { font-size: .72rem; color: #b4cbd0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.has-lv-dock .toc-mob { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lv-dock { transition: none; } }
html[data-theme] .lv-dock .lv-dock-label strong, .lv-dock .lv-dock-label strong { color: #e9f4f5; background-image: none; }
@media (max-width: 600px) { .blog-paper .check-table th[scope="row"], .blog-paper .tool-table th[scope="row"] { width: 100%; hyphens: manual; } }
.blog-filters { grid-template-columns: minmax(0, 1fr); }
html[data-theme="light"] .blog-paper .blog-figure figcaption { color: #3f565e; }
.blog-index .blog-demo { margin-top: 3rem; padding: 1.6rem 0; border-block: 1px solid var(--rim, rgba(22,56,74,.6)); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.blog-index .blog-demo > p:first-child { margin: 0; flex: 1 1 18rem; font-size: 1.15rem; color: var(--ink); }