:root {
    /* ============ 主题色(默认:🖋 墨水经典) ============
       切换主题:从 references/themes.md 复制对应的 :root 块
       整体替换这几行(--ink / --ink-rgb / --paper / --paper-rgb)
       其他地方散落的 rgba() 都走 var(--ink-rgb) / var(--paper-rgb),无需逐处改 */
    --ink: #0a0a0b;
    --ink-rgb: 10, 10, 11;
    --paper: #f1efea;
    --paper-rgb: 241, 239, 234;
    --paper-tint: #e8e5de;
    --ink-tint: #18181a;

    /* ============ 字体(跨主题固定) ============ */
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --serif-en: "Playfair Display", "Source Serif 4", Georgia, serif;
    --serif-body-en: "Source Serif 4", Georgia, serif;
    --serif-zh: "Noto Serif SC", source-han-serif-sc, serif;
    --sans-zh: "Noto Sans SC", source-han-sans-sc, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans-zh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

/* ============ WebGL 双背景 ============ */
canvas.bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    transition: opacity .3s ease
}

canvas#bg-light {
    opacity: 0
}

canvas#bg-dark {
    opacity: 1
}

body.light-bg canvas#bg-light {
    opacity: 1
}

body.light-bg canvas#bg-dark {
    opacity: 0
}

/* ============ Deck 容器 + 翻页 ============ */
/* width: NSLIDES * 100vw，会在 JS 里动态矫正 */
#deck {
    position: fixed;
    inset: 0;
    width: 10000vw;
    height: 100vh;
    display: flex;
    flex-wrap: nowrap;
    transition: transform .34s cubic-bezier(.22, .8, .3, 1);
    z-index: 10;
    will-change: transform
}

.slide {
    width: 100vw;
    height: 100vh;
    flex: 0 0 100vw;
    position: relative;
    padding: 6vh 6vw 10vh 6vw;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.slide.light {
    color: var(--ink)
}

.slide.dark {
    color: var(--paper)
}

/* 默认页：遮罩较厚，保证文字可读 */
.slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    transition: background .7s ease
}

.slide.light::before {
    background: rgba(var(--paper-rgb), .78);
    backdrop-filter: blur(3px)
}

.slide.dark::before {
    background: rgba(var(--ink-rgb), .78);
    backdrop-filter: blur(3px)
}

.slide.white-background::before {
    background: #fff;
    backdrop-filter: none
}

.slide.white-background {
    background: #fff
}

/* Hero 页：遮罩大幅降低，让 WebGL 背景明显透出 */
.slide.hero.light::before {
    background: rgba(var(--paper-rgb), .16);
    backdrop-filter: none
}

.slide.hero.dark::before {
    background: rgba(var(--ink-rgb), .12);
    backdrop-filter: none
}

/* Hero 页顶底微弱渐隐，保证 chrome/foot 区域可读 */
.slide.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none
}

.slide.hero.light::after {
    background: linear-gradient(180deg, rgba(var(--paper-rgb), .28) 0%, rgba(var(--paper-rgb), 0) 14%, rgba(var(--paper-rgb), 0) 86%, rgba(var(--paper-rgb), .28) 100%)
}

.slide.hero.dark::after {
    background: linear-gradient(180deg, rgba(var(--ink-rgb), .32) 0%, rgba(var(--ink-rgb), 0) 14%, rgba(var(--ink-rgb), 0) 86%, rgba(var(--ink-rgb), .32) 100%)
}

.slide.hero.white-background::after {
    background: none
}

/* ============ Magazine chrome：顶部 meta + 底部 foot ============ */
.chrome {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .7
}

.chrome .left,
.chrome .right {
    display: flex;
    gap: 2.4em;
    align-items: center
}

.chrome .sep {
    width: 40px;
    height: 1px;
    background: currentColor;
    opacity: .4
}

.foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55
}

.foot .title {
    font-family: var(--serif-zh);
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: none;
    opacity: .75;
    font-size: 13px
}

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: 1px solid currentColor;
    opacity: .85
}

.rule {
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: .25;
    margin: 3vh 0
}

.rule.v {
    width: 1px;
    height: 100%;
    margin: 0
}

/* ============ 字体规则 ============
     · 衬线（Noto Serif SC / Playfair）：大标题、重点金句、数字
     · 非衬线（Noto Sans SC）：正文描述、body、补充说明
     · 等宽（IBM Plex Mono）：kicker、meta 小标签、foot 右侧
  */
.kicker {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .3em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2.6vh
}

.display {
    font-family: var(--serif-en);
    font-weight: 700;
    font-size: 11vw;
    line-height: .92;
    letter-spacing: -.025em
}

.display-zh {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 7.8vw;
    line-height: 1.04;
    letter-spacing: -.005em
}

.h1-zh {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 4.6vw;
    line-height: 1.12;
    letter-spacing: -.005em
}

.h2-zh {
    font-family: var(--serif-zh);
    font-weight: 600;
    font-size: 3.2vw;
    line-height: 1.2;
    letter-spacing: 0
}

.h3-zh {
    font-family: var(--serif-zh);
    font-weight: 500;
    font-size: 1.9vw;
    line-height: 1.35
}

.body-zh {
    font-family: var(--sans-zh);
    font-weight: 400;
    font-size: max(15px, 1.22vw);
    line-height: 1.75;
    opacity: .82;
    letter-spacing: .01em
}

.body-serif {
    font-family: var(--serif-zh);
    font-weight: 400;
    font-size: max(15px, 1.3vw);
    line-height: 1.65;
    opacity: .88
}

.lead {
    font-family: var(--serif-zh);
    font-weight: 400;
    font-size: 1.9vw;
    line-height: 1.4;
    opacity: .85
}

.meta {
    font-family: var(--mono);
    font-size: max(11px, .88vw);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6
}

.big-num {
    font-family: var(--serif-en);
    font-weight: 800;
    font-size: 10vw;
    line-height: .85;
    letter-spacing: -.03em;
    font-feature-settings: "tnum"
}

.mid-num {
    font-family: var(--serif-en);
    font-weight: 700;
    font-size: 5.5vw;
    line-height: .88;
    letter-spacing: -.02em;
    font-feature-settings: "tnum"
}

.ghost {
    font-family: var(--serif-en);
    font-weight: 900;
    font-size: 34vw;
    line-height: .8;
    opacity: .06;
    letter-spacing: -.04em;
    position: absolute;
    font-feature-settings: "tnum"
}

em {
    font-style: italic;
    font-family: var(--serif-en)
}

.en {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 500
}

/* ============ 布局工具 ============ */
.col {
    display: flex;
    flex-direction: column;
    gap: 2.4vh
}

.row {
    display: flex;
    align-items: center;
    gap: 3vw
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4vw 6vw;
    flex: 1;
    align-content: center;
    padding: 2vh 0
}

.grid-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3vh 4vw;
    flex: 1;
    align-content: center
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4vh 6vw;
    flex: 1;
    align-content: center
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vw;
    flex: 1;
    align-content: center
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    flex: 1;
    align-items: center
}

.split-55 {
    display: grid;
    grid-template-columns: 55fr 45fr;
    gap: 5vw;
    flex: 1;
    align-items: stretch
}

.fill {
    flex: 1
}

.center {
    align-items: center;
    justify-content: center;
    text-align: center
}

.bottom-left {
    position: absolute;
    left: 6vw;
    bottom: 9vh;
    max-width: 50vw
}

.bottom-right {
    position: absolute;
    right: 6vw;
    bottom: 9vh;
    max-width: 50vw;
    text-align: right
}

.top-right {
    position: absolute;
    right: 6vw;
    top: 6vh;
    text-align: right
}

/* ============ Stat（数字矩阵） ============ */
.stat {
    display: flex;
    flex-direction: column;
    gap: 1vh;
    align-items: flex-start
}

.stat .n {
    font-family: var(--serif-en);
    font-weight: 800;
    font-size: 8vw;
    line-height: .88;
    letter-spacing: -.03em;
    font-feature-settings: "tnum"
}

.stat .l {
    font-family: var(--sans-zh);
    font-size: max(13px, 1.05vw);
    opacity: .7;
    margin-top: 1vh;
    font-weight: 400;
    line-height: 1.5
}

.stat .m {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .5;
    margin-bottom: .2vh
}

/* ============ Callout（引用框） ============ */
.callout {
    padding: 3vh 2.4vw;
    border-left: 3px solid currentColor;
    position: relative;
    font-family: var(--serif-zh);
    font-size: max(15px, 1.2vw);
    line-height: 1.55;
    opacity: .92
}

.slide.light .callout {
    background: rgba(var(--ink-rgb), .05)
}

.slide.dark .callout {
    background: rgba(var(--paper-rgb), .06)
}

.callout .cite {
    display: block;
    margin-top: 1.6vh;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .6
}

.callout .q-big {
    font-family: var(--serif-zh);
    font-weight: 600;
    font-size: max(17px, 1.6vw);
    line-height: 1.42
}

/* ============ Platform（平台卡） ============ */
.plat {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2vh 0;
    border-top: 1px solid currentColor;
    border-color: rgba(127, 127, 127, .35)
}

.plat .name {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 1.8vw;
    margin-bottom: .6vh
}

.plat .nb {
    font-family: var(--serif-en);
    font-weight: 700;
    font-size: 3.2vw;
    letter-spacing: -.02em;
    line-height: 1;
    font-feature-settings: "tnum"
}

.plat .sub {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .55;
    margin-top: .6vh
}

.plat .fill {
    font-family: var(--sans-zh);
    font-weight: 300;
    font-size: 2.4vw;
    opacity: .28;
    letter-spacing: -.01em;
    line-height: 1
}

/* ============ Rowline（表格行） ============ */
.rowline {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2vw;
    padding: 2.2vh 0;
    border-top: 1px solid currentColor;
    align-items: center;
    border-color: rgba(127, 127, 127, .25)
}

.rowline:last-child {
    border-bottom: 1px solid currentColor;
    border-color: rgba(127, 127, 127, .25)
}

.rowline .k {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 1.7vw
}

.rowline .v {
    font-family: var(--sans-zh);
    font-weight: 400;
    font-size: max(14px, 1.2vw);
    opacity: .85;
    line-height: 1.55
}

.rowline .m {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .6;
    justify-self: end
}

/* ============ Pillar（支柱卡片） ============ */
.pillar {
    display: flex;
    flex-direction: column;
    gap: 1.8vh
}

.pillar .ic {
    font-family: var(--serif-en);
    font-style: italic;
    font-size: 2.6vw;
    opacity: .45;
    font-weight: 400
}

.pillar .ic svg {
    width: 2.8vw;
    height: 2.8vw;
    stroke-width: 1.2;
    opacity: .7
}

.pillar .t {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 2.4vw;
    line-height: 1.1
}

.pillar .d {
    font-family: var(--sans-zh);
    font-weight: 400;
    font-size: max(14px, 1.1vw);
    opacity: .76;
    line-height: 1.6
}

/* ============ Signature / Highlight ============ */
.sign {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 500;
    font-size: 2vw;
    opacity: .7
}

.hi {
    position: relative;
    display: inline
}

.slide.dark .hi::after {
    content: "";
    position: absolute;
    left: -.1em;
    right: -.1em;
    bottom: -.05em;
    height: .28em;
    background: rgba(var(--paper-rgb), .15);
    z-index: -1
}

.slide.light .hi::after {
    content: "";
    position: absolute;
    left: -.1em;
    right: -.1em;
    bottom: -.05em;
    height: .28em;
    background: rgba(var(--ink-rgb), .08);
    z-index: -1
}

/* ============ Icons（Lucide via CDN） ============ */
.ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.12em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0
}

.ico-lg,
.ico-md,
.ico-sm {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round
}

.ico-lg {
    width: 2.6vw;
    height: 2.6vw;
    stroke-width: 1.2;
    display: inline-block
}

.ico-md {
    width: 1.8vw;
    height: 1.8vw;
    stroke-width: 1.3;
    display: inline-block;
    vertical-align: -.4em
}

.ico-sm {
    width: 1.1vw;
    height: 1.1vw;
    stroke-width: 1.4;
    display: inline-block;
    vertical-align: -.15em;
    opacity: .7
}

/* ============ 图片占位（虚线框，提示设计师位置） ============ */
.img-slot {
    border: 1.5px dashed rgba(127, 127, 127, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1vh;
    padding: 2vh 2vw;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .55;
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    max-height: 56vh;
    margin-inline: auto;
    box-sizing: border-box
}

.img-slot::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid currentColor;
    opacity: .2
}

.img-slot .plus {
    font-size: 2vw;
    font-weight: 300;
    opacity: .5;
    letter-spacing: 0
}

.img-slot .label {
    position: relative;
    z-index: 2;
    text-align: center
}

.img-slot.r-4x3 {
    aspect-ratio: 4/3
}

.img-slot.r-3x2 {
    aspect-ratio: 3/2
}

.img-slot.r-1x1 {
    aspect-ratio: 1/1
}

/* ============ 图片实填框（关键：固定高度 + 只裁底部） ============
     重要约束：高度用内联 height:Nvh 精确控制，不要用 aspect-ratio（会撑破布局）
     object-position:top center 保证严禁裁剪顶部和左右，只裁剪底部
  */
.frame-img {
    overflow: hidden;
    position: relative;
    background: rgba(0, 0, 0, .04);
    box-sizing: border-box;
    width: 100%;
    border-radius: 4px
}

.slide.dark .frame-img {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .12)
}

.frame-img>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block
}

.frame-cap {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1vw;
    margin-top: .8vh;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .72
}

.frame-cap .pf {
    font-family: var(--serif-zh);
    font-weight: 600;
    font-size: max(13px, 1vw);
    letter-spacing: .04em;
    text-transform: none;
    opacity: .94
}

.frame-cap .nb {
    font-family: var(--serif-en);
    font-style: italic;
    font-size: max(15px, 1.2vw);
    letter-spacing: .02em;
    text-transform: none;
    opacity: .88
}

.frame-cap .idx {
    font-family: var(--mono);
    opacity: .5
}

figure.tile {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0
}

figure.tile>.frame-img {
    flex: 0 0 auto
}

/* ============ 导航 ============ */
#nav {
    position: fixed;
    left: 50%;
    bottom: 2.6vh;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px)
}

#nav[hidden] {
    display: none
}

#nav .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: all .3s ease;
    border: 0;
    padding: 0
}

#nav .dot:hover {
    background: rgba(255, 255, 255, .5);
    transform: scale(1.15)
}

#nav .dot.active {
    background: rgba(255, 255, 255, .95);
    width: 22px;
    border-radius: 999px
}

body.light-bg #nav {
    background: rgba(255, 255, 255, .25)
}

body.light-bg #nav .dot {
    background: rgba(var(--ink-rgb), .25)
}

body.light-bg #nav .dot.active {
    background: rgba(var(--ink-rgb), .9)
}

/* ============================================================
     ============ LAYOUTS API · 面向 agent 的类（v2）============
     所有 layouts.md 中的骨架都基于下面这套命名。
     如果你在 layouts.md 里看到某个类，它必须在下面有定义。
     ============================================================ */

/* ---------- .frame：每页主内容容器 ---------- */
.frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}

/* 当 .frame 同时加了 grid 类时，grid 的 display:grid 覆盖 flex */
.frame.grid-2-7-5,
.frame.grid-2-6-6,
.frame.grid-2-8-4,
.frame.grid-3-3,
.frame.grid-6 {
    display: grid
}

/* ---------- 标题层级（API 名称，衬线为主） ---------- */
.h-hero {
    font-family: var(--serif-zh);
    font-weight: 900;
    font-size: 10vw;
    line-height: .96;
    letter-spacing: -.02em;
}

.h-xl {
    font-family: var(--serif-zh);
    font-weight: 700;
    font-size: 6.2vw;
    line-height: 1.08;
    letter-spacing: -.01em;
}

.h-sub {
    font-family: var(--serif-zh);
    font-weight: 500;
    font-size: 3.1vw;
    line-height: 1.25;
    letter-spacing: 0;
    opacity: .7;
}

.h-md {
    font-family: var(--serif-zh);
    font-weight: 600;
    font-size: 2.3vw;
    line-height: 1.3;
}

/* 英文标题专用（Playfair 衬线） */
.h-hero-en,
.h-xl-en {
    font-family: var(--serif-en);
    letter-spacing: -.025em
}

/* ---------- lead 引语 ---------- */
.lead {
    font-family: var(--serif-zh);
    font-weight: 400;
    font-size: 1.75vw;
    line-height: 1.5;
    opacity: .86;
}

/* ---------- meta-row 底部元数据 ---------- */
.meta-row {
    display: flex;
    gap: 1.2em;
    align-items: baseline;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: max(12px, .92vw);
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}

/* ---------- stat-card（数据大字报用） ---------- */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: .8vh;
    align-items: flex-start;
    padding-top: 1.6vh;
    border-top: 1px solid currentColor;
    border-color: rgba(127, 127, 127, .3);
}

.stat-card .stat-label {
    font-family: var(--mono);
    font-size: max(10px, .78vw);
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .55;
}

.stat-card .stat-nb {
    font-family: var(--serif-en);
    font-weight: 800;
    font-size: 5.8vw;
    line-height: .9;
    letter-spacing: -.03em;
    font-feature-settings: "tnum";
    margin-top: .4vh;
}

.stat-card .stat-nb .stat-unit {
    font-family: var(--serif-zh);
    font-weight: 500;
    font-size: .38em;
    letter-spacing: 0;
    opacity: .72;
    margin-left: .14em;
}

.stat-card .stat-note {
    font-family: var(--sans-zh);
    font-weight: 400;
    font-size: max(13px, 1.05vw);
    line-height: 1.5;
    opacity: .72;
    margin-top: .6vh;
}

/* 当 stat-card 用于 grid-4（2x2），数字可以更大 */
.grid-4 .stat-card .stat-nb {
    font-size: 7.5vw
}

/* 当只有 3 个，字也可以稍大 */
.grid-3 .stat-card .stat-nb {
    font-size: 6.8vw
}

/* ---------- pipeline（流水线） ---------- */
.pipeline-section {
    margin-top: 4.4vh;
    padding-top: 2.8vh;
    border-top: 1px dashed rgba(127, 127, 127, .32);
}

.pipeline-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 3vh;
}

.pipeline-label {
    font-family: var(--mono);
    font-size: max(11px, .85vw);
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .62;
    margin-bottom: 2.2vh;
}

.pipeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2vw;
}

.pipeline[data-cols="3"] {
    grid-template-columns: repeat(3, 1fr)
}

.pipeline[data-cols="4"] {
    grid-template-columns: repeat(4, 1fr)
}

.pipeline[data-cols="6"] {
    grid-template-columns: repeat(6, 1fr)
}

.step {
    display: flex;
    flex-direction: column;
    gap: .8vh;
    padding-top: 1.4vh;
    border-top: 1px solid currentColor;
    border-color: rgba(127, 127, 127, .35);
}

.step-nb {
    font-family: var(--serif-en);
    font-style: italic;
    font-weight: 500;
    font-size: 1.15vw;
    opacity: .45;
}

.step-title {
    font-family: var(--sans-zh);
    font-weight: 700;
    font-size: 1.55vw;
    letter-spacing: .01em;
    line-height: 1.2;
}

.step-desc {
    font-family: var(--sans-zh);
    font-weight: 400;
    font-size: max(12px, .95vw);
    line-height: 1.45;
    opacity: .72;
}

/* ---------- 网格（layouts.md 所用） ---------- */
/* 这些类独立挂到任何容器上都能生效，不依赖 .frame 复合选择器 */
.grid-2-7-5 {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 3vw 4vh;
    align-items: start
}

.grid-2-6-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3vw 4vh;
    align-items: start
}

.grid-2-8-4 {
    display: grid;
    grid-template-columns: 8fr 4fr;
    gap: 3vw 4vh;
    align-items: start
}

.grid-3-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    gap: 2.4vh 2vw;
}

/* grid-6 已在旧样式里定义为 3x2，这里仅补 align */

/* ---------- 图片 frame-img（layouts.md 主命名） ---------- */
/* 在旧样式里已定义，这里补 img-cap 命名别名与增强 */
figure.frame-img {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.img-cap {
    display: block;
    margin-top: .8vh;
    font-family: var(--mono);
    font-size: max(10px, .8vw);
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .6;
}

/* callout src 命名别名 */
.callout-src {
    display: block;
    margin-top: 1.6vh;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .6;
}

/* ---------- chrome & foot 补位（layouts.md 简单写法） ---------- */
.chrome {
    font-family: var(--mono);
    font-size: max(11px, .78vw);
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .62
}

.foot {
    font-family: var(--mono);
    font-size: max(11px, .78vw);
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .5
}

/* ---------- 响应式降级 ---------- */
@media (max-width:900px) {
    .display {
        font-size: 16vw
    }

    .display-zh {
        font-size: 12vw
    }

    .h1-zh {
        font-size: 7vw
    }

    .h-hero {
        font-size: 14vw
    }

    .h-xl {
        font-size: 9vw
    }

    .pipeline {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid-2-7-5,
    .grid-2-6-6,
    .grid-2-8-4 {
        grid-template-columns: 1fr
    }
}

/* Thesis deck extension: siren-red punctuation on a nearly black stage. */
:root {
    --ink: #07080a;
    --ink-rgb: 7, 8, 10;
    --paper: #f2eadf;
    --paper-rgb: 242, 234, 223;
    --paper-tint: #e9ded0;
    --ink-tint: #121114;
    --signal: #ff3b30;
}

.slide {
    padding: 5.5vh 6vw 8vh
}

.slide.dark::before {
    background: rgba(var(--ink-rgb), .92)
}

.slide.light::before {
    background: rgba(var(--paper-rgb), .96)
}

.slide.hero.dark::before {
    background: rgba(var(--ink-rgb), .42)
}

.slide.hero.light::before {
    background: rgba(var(--paper-rgb), .9)
}

.signal {
    color: var(--signal)
}

.signal-rule {
    width: 11vw;
    height: 4px;
    background: var(--signal);
    margin: 3vh 0 4vh
}

.cover {
    background: transparent
}

.cover::before {
    z-index: 0;
    background: linear-gradient(90deg, rgba(7, 8, 10, .9), rgba(7, 8, 10, .38)), url('assets/sirens.jpg') center/cover !important;
    backdrop-filter: blur(9px) !important;
    opacity: .86
}

.cover>* {
    position: relative;
    z-index: 1
}

.cover h1 {
    max-width: 74vw;
    font-size: 6.2vw;
    line-height: 1.02
}

.title-frame {
    gap: 1.25vh
}

.title-frame .kicker {
    margin: 0;
    font-size: 15.18px
}

.title-frame h1 {
    max-width: none
}

.agenda-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5vh 3vw;
    max-width: 78vw;
    margin-top: 5vh
}

.agenda-item {
    font-family: var(--serif-en);
    font-size: 2.15vw;
    line-height: 1.1;
    padding-top: 1.4vh;
    border-top: 1px solid rgba(var(--paper-rgb), .32)
}

.agenda-item span {
    display: block;
    font-family: var(--mono);
    font-size: .65em;
    letter-spacing: .14em;
    color: var(--signal);
    margin-bottom: .75vh
}

.divider-word {
    font-family: var(--serif-en);
    font-size: 12vw;
    line-height: .88;
    letter-spacing: -.05em
}

.content-title {
    font-family: var(--serif-en);
    font-size: 2.5vw;
    line-height: 1.1;
    margin-top: 3.5vh
}

.canvas-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 2.5vh;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: none
}

.canvas-slide {
    color: var(--ink);
    background: #fff
}

.canvas-slide::before {
    background: #fff !important;
    backdrop-filter: none !important
}

.canvas-world {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transition: transform .52s cubic-bezier(.22, .8, .3, 1);
    will-change: transform;
    border: 0;
    box-shadow: none
}

.canvas-world>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none
}

@media (prefers-reduced-motion: reduce) {
    .canvas-world {
        transition: none
    }
}

@property --problem-pie-value {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

.problem-statement-slide .content-title {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: 0;
    font-size: 5.2vw;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    transition: top .42s cubic-bezier(.22, .8, .3, 1), left .42s cubic-bezier(.22, .8, .3, 1),
        font-size .42s cubic-bezier(.22, .8, .3, 1), transform .42s cubic-bezier(.22, .8, .3, 1)
}

.problem-statement-slide.problem-opened .content-title {
    top: 10.5vh;
    left: 6vw;
    font-size: 2.5vw;
    transform: none
}

.problem-definition {
    position: absolute;
    top: 17.5vh;
    left: 6vw;
    margin: 0;
    font-family: var(--serif-en);
    font-size: 1.65vw;
    line-height: 1.35;
    color: rgba(var(--paper-rgb), .72);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .24s ease .42s, transform .24s ease .42s
}

.problem-opened .problem-definition {
    opacity: 1;
    transform: none
}

.problem-frame {
    position: absolute;
    inset: 22vh 6vw 8vh;
    justify-content: center
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6vw;
    align-items: stretch;
    width: 100%;
    margin-top: 3vh
}

.problem-stat {
    display: flex;
    flex-direction: column;
    min-height: 42vh;
    border-top: 1px solid rgba(var(--paper-rgb), .3);
    padding-top: 1.7vh;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .24s ease, transform .24s ease
}

.problem-stat.revealed {
    opacity: 1;
    transform: none
}

.problem-index {
    min-height: 2.5em;
    font-family: var(--mono);
    font-size: .72vw;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .55)
}

.problem-stat .number {
    margin-top: 2.2vh;
    font-family: var(--serif-body-en);
    font-variant-numeric: tabular-nums;
    font-size: 4.6vw;
    line-height: .92;
    color: var(--signal);
    letter-spacing: -.05em
}

.problem-stat>p:not(.problem-source):not(.problem-detail) {
    max-width: 22vw;
    margin-top: 1.5vh;
    font-size: 1.2vw;
    line-height: 1.42;
    color: rgba(var(--paper-rgb), .82)
}

.problem-stat .problem-detail {
    margin-top: 2vh;
    font-family: var(--serif-body-en);
    font-size: .92vw;
    line-height: 1.4;
    color: rgba(var(--paper-rgb), .58)
}

.problem-pie-row {
    display: flex;
    gap: 1.5vw;
    align-items: flex-start;
    margin-top: 2.2vh
}

.problem-pie-figure {
    width: 10vw;
    text-align: center
}

.problem-pie {
    --problem-pie-value: 36%;
    width: 9.2vw;
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -90deg, #ff7665, var(--signal) var(--problem-pie-value), rgba(var(--paper-rgb), .1) 0);
    box-shadow: 0 0 0 1px rgba(var(--paper-rgb), .08), 0 0 2.5vw rgba(255, 59, 48, .12);
    transition: --problem-pie-value .55s cubic-bezier(.22, .8, .3, 1)
}

.problem-range-expanded .problem-debt-pie {
    --problem-pie-value: 74%;
    transition-duration: .7s;
    transition-delay: .22s
}

.problem-time-pie {
    --problem-pie-value: 23%
}

.problem-pie-core {
    width: 72%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
    border: 1px solid rgba(var(--paper-rgb), .1);
    border-radius: 50%;
    background: var(--ink-tint);
    font-family: var(--serif-body-en);
    font-variant-numeric: tabular-nums;
    font-size: 1.75vw;
    letter-spacing: -.04em;
    color: var(--paper)
}

.problem-pie-core span {
    position: absolute
}

.problem-pie-figure figcaption {
    margin-top: 1vh;
    font-family: var(--mono);
    font-size: .7vw;
    line-height: 1.3;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .62)
}

.problem-costly-copy {
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s
}

.problem-costly .problem-costly-copy {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s
}

.problem-stat .problem-promise {
    margin-top: 2.2vh !important;
    font-family: var(--serif-en);
    font-size: 1.82vw !important;
    line-height: 1.15 !important;
    color: var(--paper) !important
}

.problem-risk {
    margin-top: 2.5vh;
    padding-top: 2vh;
    border-top: 3px solid var(--signal);
    font-family: var(--serif-body-en);
    font-size: 1.35vw;
    line-height: 1.35;
    color: rgba(var(--paper-rgb), .82)
}

.problem-risk strong {
    font-weight: 500;
    color: var(--signal)
}

.problem-source {
    margin-top: auto;
    padding-top: 2vh;
    font-family: var(--mono);
    font-size: .65vw;
    line-height: 1.35;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .42)
}

.gap-mrq-title {
    position: relative;
    min-height: 1.1em
}

.gap-mrq-title span {
    position: absolute;
    inset: 0 auto auto 0;
    transition: opacity .24s ease, transform .24s ease
}

.research-gap-title {
    opacity: 0;
    transform: translateY(12px)
}

.gap-mode .related-work-title {
    opacity: 0;
    transform: translateY(-12px)
}

.gap-mode .research-gap-title {
    opacity: 1;
    transform: none
}

.gap-mrq-frame {
    justify-content: flex-start;
    gap: 3.5vh;
    padding-top: 4vh
}

.gap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.6vw
}

.gap-card {
    border-top: 1px solid rgba(var(--paper-rgb), .3);
    padding-top: 1.8vh
}

.related-category {
    opacity: 0;
    transform: translateY(12px);
    border-top-color: transparent;
    transition: opacity .24s ease, transform .24s ease, border-color .24s ease
}

.related-category.revealed {
    opacity: 1;
    transform: none;
    border-top-color: rgba(var(--paper-rgb), .3)
}

.gap-card h2 {
    font-family: var(--mono);
    font-size: .9vw;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.5vh;
    color: rgba(var(--paper-rgb), .58)
}

.gap-card ul {
    padding-left: 1.2em
}

.related-details {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 0;
    transition: grid-template-rows .24s ease, opacity .24s ease
}

.related-details.revealed {
    opacity: 1
}

.related-details-inner {
    min-height: 0;
    overflow: hidden
}

.related-details-content {
    min-height: 11vh
}

.gap-mode .related-details {
    grid-template-rows: 0fr;
    opacity: 0
}

.related-examples {
    display: flex;
    align-items: center;
    min-height: 4.5vh;
    gap: .8vw;
    font-family: var(--mono);
    font-size: .82vw;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .72)
}

.related-examples img {
    width: 5.5vw;
    height: 3.6vh;
    object-fit: contain
}

.related-example-names span+span::before {
    content: "·";
    margin-right: .8vw;
    color: var(--signal)
}

.related-strength {
    max-width: 22vw;
    margin-top: 1.2vh;
    font-family: var(--serif-en);
    font-size: 1.5vw;
    line-height: 1.2;
    color: var(--paper)
}

.gap-weaknesses {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .24s ease, transform .24s ease
}

.gap-weaknesses.revealed {
    opacity: 1;
    transform: none
}

.gap-card li {
    font-family: var(--serif-body-en);
    font-size: 1.45vw;
    line-height: 1.38;
    margin-bottom: 1vh;
    padding-left: .2em
}

.mrq-block {
    display: grid;
    grid-template-columns: 6vw 1fr;
    gap: 2vw;
    margin-top: 1vh;
    border-top: 3px solid var(--signal);
    padding-top: 2.5vh
}

.mrq-label {
    font-family: var(--mono);
    font-size: 1.15vw;
    letter-spacing: .12em;
    color: var(--signal)
}

.mrq-block p {
    font-family: var(--serif-en);
    font-size: 2.25vw;
    line-height: 1.28
}

.gap-color-1, [data-gap="1"].highlighted { color: #ff6b61 }
.gap-color-2, [data-gap="2"].highlighted { color: #f2b84b }
.gap-color-3, [data-gap="3"].highlighted { color: #68c57d }
.gap-color-4, [data-gap="4"].highlighted { color: #75b8ff }
.gap-color-5, [data-gap="5"].highlighted { color: #c94d78 }

.gap-card li {
    transition: color .24s ease
}

.mrq-block-reveal {
    opacity: 0;
    transition: opacity .24s ease
}

.mrq-block-reveal.revealed {
    opacity: 1
}

.mrq-reveal {
    opacity: 0;
    transition: opacity .24s ease
}

.mrq-reveal.revealed {
    opacity: 1
}

.rq-list {
    justify-content: center;
    gap: 1.4vh;
    padding-top: 2vh
}

.rq-item {
    display: grid;
    grid-template-columns: 5.5vw 1fr;
    gap: 1.5vw;
    align-items: baseline;
    border-top: 1px solid rgba(var(--paper-rgb), .26);
    padding: 1.7vh 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .24s ease, transform .24s ease
}

.rq-item.revealed {
    opacity: 1;
    transform: none
}

.rq-item span {
    font-family: var(--mono);
    font-size: 1vw;
    letter-spacing: .12em;
    color: var(--signal)
}

.rq-item p {
    font-family: var(--serif-body-en);
    font-size: 1.62vw;
    line-height: 1.34;
    max-width: 72vw
}

@media (max-width:900px) {
    .problem-statement-slide .content-title { font-size: 7vw }
    .problem-statement-slide.problem-opened .content-title { font-size: 3.8vw }
    .problem-definition { font-size: 2.6vw }
    .problem-frame { inset: 22vh 6vw 7vh; justify-content: flex-start }
    .problem-grid { grid-template-columns: 1fr; gap: 1.2vh; margin-top: 2vh }
    .problem-stat { min-height: 0; padding-top: 1vh }
    .problem-index { min-height: 0; font-size: 1.3vw }
    .problem-stat .number { margin-top: .7vh; font-size: 7vw }
    .problem-stat>p:not(.problem-source):not(.problem-detail) { margin-top: .5vh; max-width: none; font-size: 2.2vw }
    .problem-stat .problem-detail { margin-top: .6vh; font-size: 1.65vw }
    .problem-pie-row { gap: 2vw; margin-top: .6vh }
    .problem-pie-figure { width: 12vw }
    .problem-pie { width: 9vh }
    .problem-pie-core { font-size: 2.2vw }
    .problem-pie-figure figcaption { margin-top: .4vh; font-size: 1.2vw }
    .problem-stat .problem-promise { margin-top: .7vh !important; max-width: none; font-size: 3.4vw !important }
    .problem-risk { margin-top: .8vh; padding-top: .7vh; font-size: 2.1vw }
    .problem-source { margin-top: .7vh; padding-top: 0; font-size: 1.2vw }
    .gap-mrq-frame { gap: 2vh; padding-top: 2vh }
    .gap-grid { grid-template-columns: 1fr; gap: 1.5vh }
    .related-details-content { min-height: 0 }
    .related-examples { min-height: 2.5vh; font-size: 1.4vw }
    .related-examples img { width: 8vw; height: 2.5vh }
    .related-strength { margin-top: .5vh; max-width: none; font-size: 2.3vw }
    .gap-card li { font-size: 2.4vw }
    .gap-card h2 { font-size: 1.5vw; margin-bottom: .5vh }
    .mrq-block p { font-size: 3vw }
    .rq-item p { font-size: 2.45vw }
    .rq-item span { font-size: 1.5vw }
}

@media (prefers-reduced-motion: reduce) {
    .problem-statement-slide .content-title,
    .problem-definition,
    .problem-stat,
    .problem-pie,
    .problem-pie-core span,
    .problem-costly-copy,
    .gap-mrq-title span,
    .related-category,
    .related-details,
    .gap-weaknesses,
    .gap-card li,
    .mrq-block-reveal,
    .mrq-reveal {
        transition: none
    }
}

.qna {
    background: radial-gradient(circle at 72% 28%, rgba(255, 59, 48, .2), transparent 25%), var(--ink)
}

.qna-mark {
    font-family: var(--serif-en);
    font-size: 19vw;
    line-height: .7;
    color: var(--signal);
    letter-spacing: -.1em
}

.approach-figure,
.study-figure {
    flex: 1;
    min-height: 0;
    margin: 2.5vh 0 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.approach-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.siren-system-slide {
    padding: 4.5vh 4vw 4vh;
    background: var(--ink)
}

.siren-system-slide::before {
    background: rgba(var(--ink-rgb), .97) !important;
    backdrop-filter: none !important
}

.siren-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2vw
}

.siren-heading .content-title {
    margin-top: 2.2vh
}

.siren-step-rail {
    display: flex;
    align-items: center;
    gap: .34vw;
    padding-bottom: .45vh
}

.siren-step-rail i {
    width: 1.15vw;
    height: 3px;
    background: rgba(var(--paper-rgb), .14);
    transition: background .28s ease, transform .28s ease
}

.siren-step-rail i.complete {
    background: rgba(255, 59, 48, .36)
}

.siren-step-rail i.active {
    background: var(--signal);
    transform: scaleY(2)
}

.siren-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 2.1vh;
    overflow: hidden
}

.siren-view {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s
}

.siren-view.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    pointer-events: auto
}

.siren-scope-view {
    display: grid;
    grid-template-columns: 13vw minmax(0, 1fr);
    gap: 3vw;
    align-items: stretch;
    padding: 2.5vh 0 1vh
}

.siren-scope-number {
    align-self: center;
    display: flex;
    flex-direction: column;
    padding: 2vh 0 2.5vh 1.4vw;
    border-left: 4px solid var(--signal)
}

.siren-scope-number strong {
    font-family: var(--serif-en);
    font-size: 9.5vw;
    line-height: .78;
    letter-spacing: -.06em;
    color: var(--signal)
}

.siren-scope-number span {
    margin-top: 2.4vh;
    font-family: var(--mono);
    font-size: .8vw;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .56)
}

.siren-operation-table {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.7vw
}

.siren-operation-table > section {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    border-top: 3px solid rgba(var(--paper-rgb), .5)
}

.siren-operation-table header {
    min-height: 10vh;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75vw;
    align-items: baseline;
    padding: 1.7vh .5vw 1.4vh 0;
    border-bottom: 1px solid rgba(var(--paper-rgb), .16)
}

.siren-operation-table header span,
.siren-operation-table header b {
    font-family: var(--mono);
    font-size: .64vw;
    font-weight: 500;
    letter-spacing: .12em;
    color: var(--signal)
}

.siren-operation-table h2 {
    font-family: var(--serif-en);
    font-size: 1.75vw;
    font-weight: 500;
    line-height: 1.05
}

.siren-operation-table ol {
    list-style: none;
    display: grid;
    grid-template-rows: repeat(7, 1fr)
}

.siren-operation-table li {
    display: grid;
    grid-template-columns: .75vw 1fr;
    gap: .72vw;
    align-items: center;
    min-width: 0;
    padding: 1vh .5vw 1vh 0;
    border-bottom: 1px solid rgba(var(--paper-rgb), .1);
    font-family: var(--serif-body-en);
    font-size: 1.02vw;
    color: rgba(var(--paper-rgb), .84);
    opacity: 0;
    transform: translateY(10px)
}

.siren-operation-table li i {
    width: .38vw;
    height: .38vw;
    background: var(--signal)
}

.siren-scope-view.animate-in li {
    opacity: 1;
    transform: none;
    transition: opacity .26s ease calc(var(--reveal-index) * 28ms), transform .26s ease calc(var(--reveal-index) * 28ms)
}

.siren-kb-view {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 2.2vh;
    padding: .7vh 0 0
}

.siren-kb-build {
    display: grid;
    grid-template-columns: 1fr 2.5vw 1.25fr 2.5vw 1.25fr 2.5vw .75fr;
    gap: .7vw;
    align-items: center
}

.siren-kb-build > div {
    position: relative;
    min-height: 6.4vh;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .3vh .65vw;
    align-content: center;
    padding: .8vh .8vw;
    border: 1px solid rgba(var(--paper-rgb), .17);
    background: rgba(var(--paper-rgb), .025)
}

.siren-kb-build > div span,
.siren-kb-build > div small {
    font-family: var(--mono);
    font-size: .55vw;
    letter-spacing: .08em;
    color: rgba(var(--paper-rgb), .46)
}

.siren-kb-build > div b {
    font-family: var(--serif-body-en);
    font-size: .98vw;
    font-weight: 500
}

.siren-book-icon {
    position: absolute;
    top: 50%;
    right: .7vw;
    width: 1.5vw;
    height: 2.1vh;
    border: 1px solid rgba(var(--paper-rgb), .5);
    border-left: 4px solid var(--signal);
    transform: translateY(-50%)
}

.siren-kb-build > div small {
    grid-column: 2
}

.siren-build-arrow {
    position: relative;
    height: 1px;
    background: rgba(var(--paper-rgb), .35)
}

.siren-build-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .45vw;
    height: .45vw;
    border-top: 1px solid rgba(var(--paper-rgb), .5);
    border-right: 1px solid rgba(var(--paper-rgb), .5);
    transform: translateY(-50%) rotate(45deg)
}

.siren-kb-build .siren-build-result {
    grid-template-columns: auto 1fr;
    border-color: var(--signal)
}

.siren-build-result strong {
    grid-row: 1 / 3;
    font-family: var(--serif-en);
    font-size: 2.4vw;
    line-height: .8;
    color: var(--signal)
}

.siren-kb-card {
    min-height: 0;
    display: grid;
    grid-template-columns: .72fr 1.05fr 1.7fr;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(var(--paper-rgb), .24);
    border-top: 3px solid var(--signal);
    background: rgba(var(--paper-rgb), .018);
    box-shadow: 0 2vh 5vw rgba(0, 0, 0, .2);
    overflow: hidden;
    transform: translateY(18px) scale(.985);
    opacity: 0
}

.siren-kb-view.animate-in .siren-kb-card {
    transform: none;
    opacity: 1;
    transition: transform .48s cubic-bezier(.22, .8, .3, 1) .16s, opacity .34s ease .16s
}

.siren-kb-card > header {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.2vw;
    align-items: baseline;
    padding: 1.6vh 1.4vw;
    border-bottom: 1px solid rgba(var(--paper-rgb), .16)
}

.siren-kb-card > header span,
.siren-kb-card > header b,
.siren-kb-card h3 {
    font-family: var(--mono);
    font-size: .62vw;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.siren-kb-card > header h2 {
    font-family: var(--serif-en);
    font-size: 2vw;
    line-height: 1;
    font-weight: 600
}

.siren-kb-card > header b {
    color: var(--signal)
}

.siren-kb-card > aside,
.siren-kb-mechanics,
.siren-kb-example {
    min-width: 0;
    padding: 2.2vh 1.35vw
}

.siren-kb-card > aside,
.siren-kb-mechanics {
    border-right: 1px solid rgba(var(--paper-rgb), .14)
}

.siren-kb-card dl {
    display: grid;
    gap: 1.15vh
}

.siren-kb-card dl div {
    display: grid;
    grid-template-columns: 3.4vw 1fr;
    gap: .6vw
}

.siren-kb-card dt,
.siren-kb-card dd {
    font-family: var(--mono);
    font-size: .63vw;
    line-height: 1.35
}

.siren-kb-card dt {
    color: var(--signal)
}

.siren-kb-card dd {
    color: rgba(var(--paper-rgb), .76)
}

.siren-kb-card blockquote {
    margin-top: 3.4vh;
    padding-top: 2.1vh;
    border-top: 1px solid rgba(var(--paper-rgb), .15);
    font-family: var(--serif-body-en);
    font-size: 1.18vw;
    line-height: 1.32;
    color: rgba(var(--paper-rgb), .88)
}

.siren-kb-mechanics h3,
.siren-kb-example h3 {
    margin-bottom: 1.8vh;
    color: var(--signal)
}

.siren-kb-mechanics ol {
    list-style: none;
    counter-reset: mechanic;
    display: grid;
    gap: 1.05vh
}

.siren-kb-mechanics li {
    counter-increment: mechanic;
    display: grid;
    grid-template-columns: 1.8vw 1fr;
    gap: .6vw;
    font-family: var(--serif-body-en);
    font-size: .87vw;
    line-height: 1.28;
    color: rgba(var(--paper-rgb), .78)
}

.siren-kb-mechanics li::before {
    content: "0" counter(mechanic);
    font-family: var(--mono);
    font-size: .54vw;
    color: rgba(var(--paper-rgb), .36)
}

.siren-kb-example {
    display: grid;
    grid-template-rows: auto 1fr
}

.siren-kb-example > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1vw
}

.siren-kb-example > header div {
    display: flex;
    gap: .25vw
}

.siren-kb-example > header span {
    padding: .45vh .45vw;
    border-bottom: 2px solid rgba(var(--paper-rgb), .12);
    font-family: var(--mono);
    font-size: .5vw;
    color: rgba(var(--paper-rgb), .35)
}

.siren-kb-example > header span.active {
    border-color: var(--signal);
    color: var(--paper)
}

.siren-code-pair {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1.2vw 1fr;
    gap: .65vw;
    align-items: stretch
}

.siren-code-pair pre {
    min-width: 0;
    padding: 1.25vh .75vw;
    background: rgba(var(--paper-rgb), .045);
    border: 1px solid rgba(var(--paper-rgb), .11);
    overflow: hidden;
    white-space: pre-wrap
}

.siren-code-pair pre > b {
    display: block;
    margin-bottom: 1.3vh;
    font-family: var(--mono);
    font-size: .52vw;
    letter-spacing: .12em;
    color: rgba(var(--paper-rgb), .38)
}

.siren-code-pair code {
    font-family: var(--mono);
    font-size: .56vw;
    line-height: 1.65;
    color: rgba(var(--paper-rgb), .76)
}

.siren-code-pair mark,
.siren-code-pair ins {
    text-decoration: none;
    color: inherit
}

.siren-code-pair mark { background: rgba(255, 59, 48, .28) }
.siren-code-pair ins { background: rgba(104, 197, 125, .22) }

.siren-code-pair > i {
    align-self: center;
    font-family: var(--mono);
    font-style: normal;
    color: var(--signal)
}

.siren-overview-view {
    display: grid;
    grid-template-columns: .92fr 2.5vw 1.75fr 2.5vw 1fr;
    gap: 1.2vw;
    align-items: center;
    padding: 2.2vh 0 1vh
}

.siren-overview-ide,
.siren-overview-output {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto;
    gap: 1.2vh;
    min-width: 0;
    align-self: center;
    padding: .7vh .45vw .8vh;
    border: 1px solid rgba(var(--paper-rgb), .2);
    background: var(--ink)
}

.siren-overview-image {
    min-width: 0;
    overflow: hidden;
    background: #000
}

.siren-overview-image img {
    display: block;
    width: 100%;
    height: auto
}

.siren-overview-output .siren-overview-image {
    aspect-ratio: 1.65
}

.siren-overview-output img {
    width: 107%;
    max-width: none;
    transform: translate(-3.5%, -3.5%)
}

.siren-overview-ide figcaption,
.siren-overview-output figcaption {
    display: flex;
    align-items: center;
    gap: .45vw;
    font-family: var(--mono);
    font-size: .6vw;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .62)
}

.siren-overview-ide figcaption i {
    width: .52vw;
    height: .52vw;
    border-radius: 50%;
    background: #ffd35a;
    box-shadow: 0 0 1vw rgba(255, 211, 90, .5)
}

.siren-overview-system {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7vw;
    grid-template-rows: 1fr 1fr;
    gap: 2.7vh 1.2vw
}

.siren-overview-phase {
    min-width: 0;
    padding: 2vh 1.35vw;
    border: 1px solid rgba(var(--paper-rgb), .25);
    border-top: 3px solid var(--signal);
    background: rgba(var(--paper-rgb), .025)
}

.siren-overview-phase header {
    display: flex;
    align-items: baseline;
    gap: .75vw;
    margin-bottom: 3.1vh
}

.siren-overview-phase header span {
    font-family: var(--mono);
    font-size: .58vw;
    color: var(--signal)
}

.siren-overview-phase h2 {
    font-family: var(--serif-en);
    font-size: 1.7vw;
    font-weight: 500
}

.siren-overview-phase > div {
    display: grid;
    grid-template-columns: 1fr 1.7vw 1fr 1.7vw 1fr;
    align-items: center
}

.siren-overview-phase > div b {
    padding: 1.7vh .5vw;
    border: 1px solid rgba(var(--paper-rgb), .18);
    text-align: center;
    font-family: var(--mono);
    font-size: .72vw;
    font-weight: 500;
    color: rgba(var(--paper-rgb), .78)
}

.siren-overview-phase > div i {
    height: 1px;
    background: rgba(var(--paper-rgb), .35)
}

.siren-overview-context {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    grid-template-rows: 1fr 2.5vh 1fr;
    align-items: center;
    padding: 1vh .65vw;
    border: 1px dashed rgba(var(--paper-rgb), .28)
}

.siren-overview-context div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8vh
}

.siren-overview-context strong {
    font-family: var(--serif-en);
    font-size: 2.2vw;
    color: var(--signal)
}

.siren-overview-context span {
    text-align: center;
    font-family: var(--mono);
    font-size: .5vw;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .55)
}

.siren-overview-context > i {
    justify-self: center;
    width: 1px;
    height: 100%;
    background: rgba(var(--paper-rgb), .22)
}

.siren-flow-arrow {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--signal)
}

.siren-flow-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--signal);
    border-right: 2px solid var(--signal);
    transform: translateY(-50%) rotate(45deg)
}

.siren-flow-arrows {
    display: grid;
    gap: 76px;
    align-content: center
}

.siren-workflow-view,
.siren-workflow-viewport {
    overflow: hidden
}

.siren-workflow-viewport {
    position: absolute;
    inset: 0
}

.siren-workflow-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 6400px;
    height: 2000px;
    transform-origin: top left;
    transition: transform .62s cubic-bezier(.22, .8, .3, 1);
    will-change: transform
}

.siren-world-route {
    position: absolute;
    inset: 0;
    width: 6400px;
    height: 2000px;
    overflow: visible
}

.siren-world-route path {
    fill: none;
    stroke: rgba(255, 59, 48, .24);
    stroke-width: 7;
    vector-effect: non-scaling-stroke
}

.siren-workflow-scene {
    position: absolute;
    width: 1400px;
    height: 800px;
    padding: 52px 58px 48px;
    border: 2px solid rgba(var(--paper-rgb), .18);
    border-top: 7px solid rgba(var(--paper-rgb), .42);
    background: var(--ink);
    box-shadow: 0 35px 100px rgba(0, 0, 0, .32);
    opacity: .18;
    filter: saturate(.35);
    transition: opacity .35s ease, filter .35s ease, border-color .35s ease
}

.siren-workflow-scene.is-active {
    opacity: 1;
    filter: none;
    border-top-color: var(--signal)
}

.siren-prediction-scene { left: 100px; top: 100px }
.siren-context-scene { left: 1700px; top: 100px }
.siren-compression-scene { left: 3300px; top: 100px }
.siren-decision-scene { left: 4900px; top: 100px }
.siren-ranking-scene { left: 4900px; top: 1100px }
.siren-planning-scene { left: 3300px; top: 1100px }
.siren-codegen-scene { left: 1700px; top: 1100px }
.siren-diff-scene { left: 100px; top: 1100px }

.siren-scene-heading {
    min-height: 105px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 8px 30px;
    border-bottom: 1px solid rgba(var(--paper-rgb), .16)
}

.siren-scene-heading span,
.siren-scene-heading b {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--signal)
}

.siren-scene-heading b {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    padding: 10px 14px;
    border: 1px solid rgba(var(--paper-rgb), .18);
    color: rgba(var(--paper-rgb), .6)
}

.siren-scene-heading h2 {
    font-family: var(--serif-en);
    font-size: 47px;
    line-height: 1;
    font-weight: 550
}

.siren-animate {
    opacity: 0;
    transform: translateY(18px)
}

.siren-workflow-scene.is-active .siren-animate {
    opacity: 1;
    transform: none;
    transition: opacity .34s ease calc(var(--delay) * 90ms + 120ms), transform .44s cubic-bezier(.22, .8, .3, 1) calc(var(--delay) * 90ms + 120ms)
}

.siren-prediction-grid {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: 1.35fr .78fr 1fr;
    grid-template-rows: 1fr;
    gap: 24px;
    padding-top: 30px
}

.siren-ide-crop {
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    gap: 12px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(var(--paper-rgb), .18)
}

.siren-target-shot {
    position: relative;
    overflow: hidden
}

.siren-target-shot img {
    display: block;
    width: 100%;
    height: auto
}

.siren-target-shot i {
    position: absolute;
    top: 53.2%;
    left: 15.8%;
    width: 22.5%;
    height: 5.2%;
    border: 2px solid var(--signal);
    box-shadow: 0 0 16px rgba(255, 59, 48, .45)
}

.siren-ide-crop figcaption,
.siren-metric-packet > span,
.siren-model-bank > span {
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.siren-metric-packet {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(4, 1fr);
    gap: 10px
}

.siren-metric-packet > span {
    grid-column: 1;
    padding-bottom: 8px
}

.siren-metric-packet div {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
    border: 1px solid rgba(var(--paper-rgb), .13);
    background: rgba(var(--paper-rgb), .025)
}

.siren-metric-packet b {
    font-family: var(--serif-en);
    font-size: 34px;
    color: var(--signal)
}

.siren-metric-packet small {
    font-family: var(--mono);
    font-size: 12px;
    color: rgba(var(--paper-rgb), .58)
}

.siren-model-bank {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 59, 48, .45);
    background: rgba(255, 59, 48, .045)
}

.siren-model-bank > div {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px;
    align-content: center
}

.siren-model-bank i {
    display: grid;
    place-items: center;
    height: 32px;
    background: rgba(255, 59, 48, .12);
    transform-origin: left;
    font-family: var(--mono);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: rgba(var(--paper-rgb), .28);
    --model-final-bg: rgba(255, 59, 48, .12);
    --model-final-color: rgba(var(--paper-rgb), .28)
}

.siren-model-bank i.candidate {
    background: var(--signal);
    color: var(--ink);
    --model-final-bg: var(--signal);
    --model-final-color: var(--ink)
}

.siren-prediction-scene.is-active .siren-model-bank i {
    animation: siren-model-pulse .75s ease calc(var(--model-index) * 20ms + 350ms) both
}

.siren-model-bank strong {
    font-family: var(--serif-en);
    font-size: 28px
}

.siren-context-grid {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: 1.3fr .9fr;
    grid-template-rows: 1fr auto;
    gap: 22px;
    padding-top: 28px
}

.siren-import-map {
    position: relative;
    border: 1px solid rgba(var(--paper-rgb), .14)
}

.siren-import-map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.siren-import-map path {
    fill: none;
    stroke: rgba(var(--paper-rgb), .3);
    stroke-width: 2;
    stroke-dasharray: 700;
    stroke-dashoffset: 700
}

.siren-context-scene.is-active .siren-import-map path {
    animation: siren-draw-line .7s ease .35s forwards
}

.siren-import-map path.reverse {
    stroke: var(--signal);
    stroke-dasharray: 8 8;
    stroke-dashoffset: 0
}

.siren-import-map > div {
    position: absolute;
    min-width: 150px;
    padding: 13px 16px;
    border: 1px solid rgba(var(--paper-rgb), .2);
    background: var(--ink);
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    color: rgba(var(--paper-rgb), .7)
}

.siren-import-map .target {
    top: 50%;
    left: 50%;
    padding: 23px 28px;
    border: 2px solid var(--signal);
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: var(--paper)
}

.siren-import-map .target small {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    color: rgba(var(--paper-rgb), .42)
}

.siren-import-map .one { top: 8%; left: 5% }
.siren-import-map .two { bottom: 8%; left: 4% }
.siren-import-map .three { top: 6%; right: 4% }
.siren-import-map .four { right: 2%; bottom: 7% }

.siren-file-ranking {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid rgba(var(--paper-rgb), .14)
}

.siren-file-ranking header {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(var(--paper-rgb), .14);
    font-family: var(--mono);
    font-size: 13px;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .5)
}

.siren-file-ranking header b { color: var(--signal) }

.siren-file-ranking ol {
    list-style: none;
    display: grid;
    grid-auto-rows: 1fr
}

.siren-file-ranking li {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(var(--paper-rgb), .09);
    font-family: var(--mono);
    font-size: 12px
}

.siren-file-ranking li i { color: rgba(var(--paper-rgb), .3) }
.siren-file-ranking li b { color: rgba(var(--paper-rgb), .4); font-weight: 400 }

.siren-context-kb {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    gap: 13px;
    align-items: center
}

.siren-context-kb > span {
    padding-right: 15px;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.35;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .45)
}

.siren-context-kb > div {
    display: grid;
    grid-template-columns: 11px 1fr;
    gap: 4px 10px;
    padding: 13px;
    border: 1px solid rgba(255, 59, 48, .28)
}

.siren-context-kb i { grid-row: 1 / 3; background: var(--signal) }
.siren-context-kb b { font-family: var(--serif-body-en); font-size: 17px }
.siren-context-kb small { font-family: var(--mono); font-size: 10px; color: rgba(var(--paper-rgb), .42) }

.siren-compression-flow {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: 1.1fr .65fr 1fr;
    gap: 45px;
    align-items: center;
    padding-top: 30px
}

.siren-chunk-cloud {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 42px 22px 22px;
    border: 1px solid rgba(var(--paper-rgb), .14)
}

.siren-chunk-cloud > b {
    position: absolute;
    top: 14px;
    left: 18px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .45)
}

.siren-chunk-cloud > i,
.siren-selected-context > i {
    display: grid;
    gap: 5px;
    padding: 9px;
    border: 1px solid rgba(var(--paper-rgb), .15)
}

.siren-chunk-cloud i span,
.siren-selected-context i span {
    height: 4px;
    background: rgba(var(--paper-rgb), .2)
}

.siren-compression-scene.is-active .siren-chunk-cloud i.dropped {
    animation: siren-drop-chunk .55s ease calc(var(--chunk-index) * 25ms + .45s) forwards
}

.siren-compression-scene.is-active .siren-chunk-cloud i.kept {
    animation: siren-keep-chunk .55s ease calc(var(--chunk-index) * 25ms + .45s) forwards
}

.siren-compressor {
    position: relative;
    min-height: 220px;
    display: grid;
    place-content: center;
    gap: 11px;
    border: 2px solid var(--signal);
    border-radius: 50%;
    text-align: center
}

.siren-compressor::before,
.siren-compressor::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 45px;
    height: 1px;
    background: var(--signal)
}

.siren-compressor::before { right: 100% }
.siren-compressor::after { left: 100% }

.siren-compressor span { font-family: var(--serif-en); font-size: 24px }
.siren-compressor strong { font-family: var(--mono); font-size: 12px; font-weight: 500; color: rgba(var(--paper-rgb), .5) }

.siren-selected-context {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
}

.siren-selected-context > i {
    border-color: rgba(255, 59, 48, .36);
    background: rgba(255, 59, 48, .045)
}

.siren-budget {
    grid-column: 1 / 3;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 11px;
    padding-top: 14px;
    font-family: var(--mono)
}

.siren-budget span { font-size: 12px; text-transform: uppercase; color: rgba(var(--paper-rgb), .42) }
.siren-budget b { font-size: 15px; color: var(--signal) }
.siren-budget i { grid-column: 1 / 3; height: 8px; background: linear-gradient(90deg, var(--signal) 83%, rgba(var(--paper-rgb), .12) 83%) }

.siren-decision-inputs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 24px 0 18px;
    font-family: var(--mono);
    font-size: 13px;
    text-transform: uppercase
}

.siren-decision-inputs span {
    padding: 9px 13px;
    border: 1px solid rgba(var(--paper-rgb), .17);
    color: rgba(var(--paper-rgb), .62)
}

.siren-decision-inputs i { color: var(--signal); font-style: normal }

.siren-decision-rows {
    display: grid;
    gap: 12px
}

.siren-decision-row {
    display: grid;
    grid-template-columns: 220px 62px 1fr 70px;
    gap: 20px;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid rgba(var(--paper-rgb), .14);
    opacity: 0;
    transform: translateX(-16px)
}

.siren-decision-scene.is-active .siren-decision-row {
    animation: siren-decision-row .45s ease calc(var(--decision-index) * 120ms + .38s) forwards
}

.siren-decision-row > b { font-family: var(--serif-body-en); font-size: 19px }

.siren-decision-row .call {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--signal);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 12px;
    font-style: normal;
    color: var(--signal)
}

.siren-decision-row .trace {
    display: grid;
    gap: 7px
}

.siren-decision-row .trace em {
    height: 4px;
    background: rgba(var(--paper-rgb), .18)
}

.siren-decision-row .trace em:nth-child(2) { width: 82% }
.siren-decision-row .trace em:nth-child(3) { width: 58% }

.siren-decision-row > strong {
    padding: 8px;
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    color: #68c57d;
    border: 1px solid currentColor
}

.siren-decision-row.rejected > strong { color: var(--signal) }

.siren-decision-scene.is-active .siren-decision-row.rejected {
    animation-name: siren-decision-row, siren-reject-row;
    animation-duration: .45s, .35s;
    animation-delay: calc(var(--decision-index) * 120ms + .38s), calc(var(--decision-index) * 120ms + 1.05s);
    animation-fill-mode: forwards
}

.siren-decision-footer {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 20px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid rgba(var(--paper-rgb), .12);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .4)
}

.siren-decision-footer b { color: var(--signal) }

.siren-ranking-grid {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: .85fr 1.5fr;
    grid-template-rows: auto;
    gap: 24px;
    align-content: center;
    padding-top: 28px
}

.siren-rank-board {
    list-style: none;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 14px;
}

.siren-rank-board li {
    display: grid;
    grid-template-columns: 46px 1fr 65px;
    gap: 14px;
    align-items: center;
    padding: 22px 18px;
    border: 1px solid rgba(var(--paper-rgb), .16);
    transform: translateY(calc(var(--rank-from) * 38px));
    transition: transform .7s cubic-bezier(.22, .8, .3, 1) .45s
}

.siren-ranking-scene.is-active .siren-rank-board li { transform: none }
.siren-rank-board li:first-child { border-color: var(--signal); background: rgba(255, 59, 48, .06) }
.siren-rank-board i { font-family: var(--mono); font-size: 13px; color: var(--signal) }
.siren-rank-board b { font-family: var(--serif-body-en); font-size: 20px }
.siren-rank-board span { height: 7px; background: var(--signal) }
.siren-rank-board li:nth-child(2) span { width: 72%; background: rgba(var(--paper-rgb), .4) }
.siren-rank-board li:nth-child(3) span { width: 48%; background: rgba(var(--paper-rgb), .25) }

.siren-ranking-shot {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(var(--paper-rgb), .16)
}

.siren-ranking-shot img {
    display: block;
    width: 100%;
    height: auto
}

.siren-ranking-shot figcaption {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.siren-planning-flow {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: 1fr 72px 1fr 72px 1fr;
    gap: 18px;
    align-items: center;
    padding-top: 28px
}

.siren-plan-inputs {
    display: grid;
    gap: 18px
}

.siren-plan-input,
.siren-mechanics-card,
.siren-file-tasks {
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(var(--paper-rgb), .15)
}

.siren-plan-input {
    display: grid;
    gap: 14px
}

.siren-plan-input span,
.siren-mechanics-card > span,
.siren-file-tasks > span,
.siren-codegen-tasks > span {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--signal)
}

.siren-plan-input b { font-family: var(--serif-en); font-size: 28px }
.siren-plan-input small { padding-top: 9px; border-top: 1px solid rgba(var(--paper-rgb), .1); font-family: var(--mono); font-size: 11px; color: rgba(var(--paper-rgb), .44) }

.siren-mechanics-card ol {
    margin-top: 17px;
    list-style-position: inside;
    display: grid;
    gap: 11px;
    font-family: var(--serif-body-en);
    font-size: 15px;
    color: rgba(var(--paper-rgb), .7)
}

.siren-planner-node,
.siren-codegen-node {
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    gap: 12px;
    border: 2px solid var(--signal);
    border-radius: 50%;
    text-align: center
}

.siren-planner-node i,
.siren-codegen-node i { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--signal) }
.siren-planner-node strong,
.siren-codegen-node strong { font-family: var(--serif-en); font-size: 24px }

.siren-file-tasks {
    display: grid;
    gap: 10px
}

.siren-file-tasks > div {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 3px 10px;
    padding: 12px;
    border: 1px solid rgba(var(--paper-rgb), .11)
}

.siren-file-tasks i { grid-row: 1 / 3; font-family: var(--mono); font-size: 11px; color: rgba(var(--paper-rgb), .3) }
.siren-file-tasks b { font-family: var(--mono); font-size: 13px }
.siren-file-tasks small { font-family: var(--serif-body-en); font-size: 13px; color: rgba(var(--paper-rgb), .5) }

.siren-codegen-grid {
    height: calc(100% - 105px);
    display: grid;
    grid-template-columns: 1fr 72px 1fr 72px 1fr;
    gap: 18px;
    align-items: center;
    padding-top: 28px
}

.siren-codegen-input {
    display: grid;
    gap: 18px
}

.siren-codegen-tasks {
    display: grid;
    align-content: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(var(--paper-rgb), .15)
}

.siren-codegen-tasks b { padding: 12px; border: 1px solid rgba(var(--paper-rgb), .1); font-family: var(--mono); font-size: 13px; font-weight: 500 }
.siren-codegen-tasks small { font-family: var(--mono); font-size: 11px; color: rgba(var(--paper-rgb), .4) }

.siren-patch-attempts {
    display: grid;
    gap: 10px
}

.siren-patch-attempt {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--paper-rgb), .15);
    background: rgba(var(--paper-rgb), .025);
    white-space: pre-wrap;
    opacity: 0
}

.siren-patch-attempt b,
.siren-patch-attempt code {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.28
}

.siren-patch-attempt b {
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--signal)
}

.siren-patch-attempt code { color: rgba(var(--paper-rgb), .66) }
.siren-patch-attempt.valid { border-color: #68c57d }
.siren-patch-attempt.valid b { color: #68c57d }

.siren-codegen-scene.is-active .siren-patch-attempt.malformed {
    animation: siren-patch-failed 1.2s ease .55s forwards
}

.siren-codegen-scene.is-active .siren-patch-attempt.broad {
    animation: siren-patch-failed 1.2s ease 1.45s forwards
}

.siren-codegen-scene.is-active .siren-patch-attempt.valid {
    animation: siren-patch-valid .45s ease 2.35s forwards
}

.siren-diff-scene {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    padding: 34px 58px 30px
}

.siren-diff-scene .siren-scene-heading {
    min-height: 95px
}

.siren-diff-shot {
    min-height: 0;
    height: 100%;
    max-width: 1080px;
    aspect-ratio: 1.65;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(var(--paper-rgb), .18);
    background: #000
}

.siren-diff-shot img {
    display: block;
    width: 107%;
    max-width: none;
    height: auto;
    transform: translate(-3.5%, -3.5%)
}

@keyframes siren-draw-line { to { stroke-dashoffset: 0 } }

@keyframes siren-model-pulse {
    0% { transform: scaleX(.1); opacity: .25 }
    65% { background: var(--signal); color: var(--ink); opacity: 1 }
    100% { transform: scaleX(1); background: var(--model-final-bg); color: var(--model-final-color); opacity: 1 }
}

@keyframes siren-drop-chunk {
    to { opacity: .08; transform: scale(.88) }
}

@keyframes siren-keep-chunk {
    to { border-color: var(--signal); background: rgba(255, 59, 48, .08); transform: translateX(6px) }
}

@keyframes siren-decision-row {
    to { opacity: 1; transform: none }
}

@keyframes siren-reject-row {
    to { opacity: .2; transform: translateX(18px) }
}

@keyframes siren-patch-failed {
    0% { opacity: 0; transform: translateY(10px) }
    35% { opacity: 1; transform: none }
    100% { opacity: .28; transform: none }
}

@keyframes siren-patch-valid {
    from { opacity: 0; transform: translateY(10px) }
    to { opacity: 1; transform: none }
}

@media (max-width:900px) {
    .siren-system-slide { padding-right: 3vw; padding-left: 3vw }
    .siren-scope-view { grid-template-columns: 11vw 1fr; gap: 2vw }
    .siren-operation-table { gap: 1vw }
    .siren-operation-table h2 { font-size: 2vw }
    .siren-operation-table li { font-size: 1.15vw }
    .siren-kb-card blockquote { font-size: 1.35vw }
    .siren-kb-mechanics li { font-size: 1vw }
    .siren-code-pair code { font-size: .63vw }
}

@media (prefers-reduced-motion: reduce) {
    .siren-view,
    .siren-workflow-world,
    .siren-workflow-scene,
    .siren-animate,
    .siren-operation-table li,
    .siren-kb-card,
    .siren-rank-board li {
        transition: none !important
    }

    .siren-import-map path,
    .siren-model-bank i,
    .siren-chunk-cloud i,
    .siren-decision-row,
    .siren-patch-attempt {
        animation: none !important;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0
    }
}

.experiment-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1.04fr .92fr 1.18fr;
    gap: 2.4vw;
    align-items: stretch;
    padding-top: 4vh
}

.experiment-panel {
    border-top: 3px solid var(--signal);
    padding-top: 2vh;
    min-width: 0;
    display: flex;
    flex-direction: column
}

.experiment-label {
    font-family: var(--mono);
    font-size: .78vw;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 2.8vh
}

.dataset-source {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(var(--paper-rgb), .22);
    padding: 2vh 1.4vw
}

.dataset-source strong,
.dataset-balance strong {
    font-family: var(--serif-en);
    font-size: 3.5vw;
    line-height: .9;
    color: var(--paper)
}

.dataset-source span,
.dataset-balance span {
    font-family: var(--serif-body-en);
    font-size: 1.18vw;
    margin-top: .8vh
}

.dataset-source small,
.dataset-balance small {
    font-family: var(--mono);
    font-size: .68vw;
    line-height: 1.45;
    color: rgba(var(--paper-rgb), .55);
    margin-top: .8vh
}

.dataset-arrow {
    font-family: var(--mono);
    font-size: .7vw;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(var(--paper-rgb), .52);
    padding: 1.7vh 0
}

.dataset-balance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vw
}

.dataset-balance div {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(var(--paper-rgb), .3);
    padding-top: 1.6vh
}

.dataset-balance strong {
    font-size: 2.7vw;
    color: var(--signal)
}

.models-panel h2 {
    font-family: var(--serif-en);
    font-size: 2.1vw;
    font-weight: 600;
    margin-bottom: 2.5vh
}

.model-scale {
    display: flex;
    flex-direction: column;
    gap: 1.7vh
}

.model-scale div {
    display: grid;
    grid-template-columns: 1fr 3vw;
    gap: .8vw;
    align-items: center
}

.model-scale span {
    height: 7px;
    display: block;
    background: var(--signal)
}

.model-scale strong {
    font-family: var(--mono);
    font-size: .85vw;
    font-weight: 500
}

.model-sizes {
    min-height: 27vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8vw;
    padding: 1vh 0 2.5vh
}

.model-size {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--paper-rgb), .58);
    border-radius: 50%
}

.model-size strong {
    font-family: var(--serif-en);
    font-size: 1.3vw
}

/* Circle area is proportional to parameter count; diameter scales with sqrt(parameters). */
.size-7 {
    width: 5vw;
    height: 5vw;
    border-color: #ff6b61;
    color: #ff6b61
}

.size-14 {
    width: 7.07vw;
    height: 7.07vw;
    border-color: #f2b84b;
    color: #f2b84b
}

.size-32 {
    width: 10.69vw;
    height: 10.69vw;
    border: 2px solid #68c57d;
    color: #68c57d
}

.shared-settings {
    padding-top: 1.5vh;
    border-top: 1px solid rgba(var(--paper-rgb), .25)
}

.shared-label {
    display: block;
    margin-bottom: 1vh;
    font-family: var(--mono);
    font-size: .66vw;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .52)
}

.shared-settings div {
    display: flex;
    flex-wrap: wrap;
    gap: .65vh .4vw
}

.shared-settings div span {
    padding: .55vh .5vw;
    border: 1px solid rgba(var(--paper-rgb), .22);
    font-family: var(--mono);
    font-size: .62vw
}

.settings-list {
    display: flex;
    flex-wrap: wrap;
    gap: .65vh .45vw;
    margin-top: 3.2vh
}

.settings-list span {
    border: 1px solid rgba(var(--paper-rgb), .25);
    padding: .6vh .55vw;
    font-family: var(--mono);
    font-size: .67vw;
    letter-spacing: .05em
}

.panel-why {
    margin-top: auto;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .2);
    font-family: var(--serif-body-en);
    font-size: 1.08vw;
    line-height: 1.45;
    color: rgba(var(--paper-rgb), .72)
}

.metric-list {
    display: flex;
    flex-direction: column;
    gap: 1.45vh
}

.metric-list article {
    display: grid;
    border-bottom: 1px solid rgba(var(--paper-rgb), .18);
    padding-bottom: 1.45vh
}

.metric-list div {
    display: flex;
    flex-direction: column;
    gap: .5vh
}

.metric-list strong {
    font-family: var(--serif-body-en);
    font-size: 1.22vw;
    line-height: 1.2
}

.metric-list small {
    font-family: var(--sans-zh);
    font-size: .78vw;
    line-height: 1.35;
    color: rgba(var(--paper-rgb), .62)
}

.study-design {
    width: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.4vh;
    margin-top: 3vh
}

.study-stage-labels,
.study-board {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: 1.5vw
}

.study-stage-labels {
    font-family: var(--mono);
    font-size: .69vw;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.study-stage-labels span {
    padding-bottom: 1vh;
    border-bottom: 1px solid rgba(var(--paper-rgb), .16)
}

.study-stage-participants { grid-column: 1 }
.study-stage-session-one { grid-column: 2 / 4 }
.study-stage-tlx-one { grid-column: 4 }
.study-stage-session-two { grid-column: 5 / 7 }
.study-stage-tlx-two { grid-column: 7 }

.study-stage-tlx-one,
.study-stage-tlx-two {
    font-size: .56vw;
    line-height: 1.35;
    letter-spacing: .1em;
    text-align: center
}

.study-board {
    position: relative;
    min-height: 0;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    row-gap: 1.2vh
}

.study-flow {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.study-flow > path {
    fill: none;
    stroke: rgba(var(--paper-rgb), .28);
    stroke-width: 2;
    vector-effect: non-scaling-stroke
}

.study-flow marker path {
    fill: rgba(var(--paper-rgb), .5)
}

.study-flow .study-branch {
    stroke: rgba(var(--paper-rgb), .2)
}

.study-cohort,
.study-task,
.study-tlx,
.study-survey {
    position: relative;
    z-index: 1
}

.study-cohort {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: .22vh .55vw;
    padding: 1vh 1.1vw;
    background: var(--ink);
    color: rgba(var(--paper-rgb), .72)
}

.study-person {
    position: relative;
    display: block;
    width: 1.05vw;
    height: 1.85vw;
    color: inherit
}

.study-person::before,
.study-person::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: currentColor
}

.study-person::before {
    top: 0;
    width: .66vw;
    height: .66vw;
    border-radius: 50%
}

.study-person::after {
    bottom: 0;
    width: 1.05vw;
    height: 1.03vw;
    border-radius: 52% 52% 16% 16% / 48% 48% 12% 12%
}

.study-cohort .study-person {
    width: .72vw;
    height: 1.25vw
}

.study-cohort .study-person::before {
    width: .45vw;
    height: .45vw
}

.study-cohort .study-person::after {
    width: .72vw;
    height: .69vw
}

.study-task {
    min-width: 0;
    display: grid;
    grid-template-columns: 4.3vw minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    background: var(--ink);
    border: 1px solid rgba(var(--paper-rgb), .2);
    border-top: 3px solid rgba(var(--paper-rgb), .62);
    box-shadow: 0 1.6vh 3vw rgba(0, 0, 0, .16)
}

.study-task-a-one { grid-area: 1 / 2 / 3 / 4 }
.study-task-b-one { grid-area: 4 / 2 / 6 / 4 }
.study-task-b-two { grid-area: 1 / 5 / 3 / 7 }
.study-task-a-two { grid-area: 4 / 5 / 6 / 7 }

.study-task h2 {
    grid-row: 1 / 3;
    display: grid;
    place-content: center;
    gap: .6vh;
    border-right: 1px solid rgba(var(--paper-rgb), .14);
    font-family: var(--serif-en);
    font-size: 3.2vw;
    font-weight: 600;
    line-height: .8;
    text-align: center
}

.study-task h2 span {
    font-family: var(--mono);
    font-size: .54vw;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .46)
}

.study-condition {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .9vw;
    padding: 1.2vh .85vw;
    color: #d8d5cf
}

.study-condition + .study-condition {
    border-top: 1px solid rgba(var(--paper-rgb), .14)
}

.study-condition.enabled {
    color: var(--signal);
    background: linear-gradient(90deg, rgba(255, 59, 48, .11), transparent 72%)
}

.study-people {
    display: flex;
    align-items: center;
    gap: .38vw
}

.study-condition strong {
    min-width: 0;
    font-family: var(--mono);
    font-size: .58vw;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .08em;
    text-transform: uppercase
}

.study-tlx {
    display: grid;
    place-items: center;
    margin-inline: .25vw;
    border-right: 1px solid rgba(var(--paper-rgb), .2);
    border-left: 1px solid rgba(var(--paper-rgb), .2);
    background: linear-gradient(180deg, rgba(var(--paper-rgb), .025), rgba(255, 59, 48, .07), rgba(var(--paper-rgb), .025)), var(--ink)
}

.study-tlx-one { grid-area: 1 / 4 / 6 / 5 }
.study-tlx-two { grid-area: 1 / 7 / 6 / 8 }

.study-tlx span {
    transform: rotate(-90deg);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .72vw;
    font-weight: 600;
    letter-spacing: .18em;
    color: rgba(var(--paper-rgb), .76)
}

.study-survey {
    grid-area: 1 / 8 / 6 / 10;
    align-self: stretch;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 3.2vh 1.6vw;
    border: 2px solid var(--signal);
    background: rgba(var(--ink-rgb), .86);
    box-shadow: 0 2vh 4vw rgba(0, 0, 0, .22)
}

.study-survey header {
    padding-bottom: 2.2vh;
    border-bottom: 2px solid var(--signal)
}

.study-survey header span {
    display: block;
    margin-bottom: .8vh;
    font-family: var(--mono);
    font-size: .6vw;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--signal)
}

.study-survey h2 {
    max-width: 12vw;
    font-family: var(--serif-en);
    font-size: 1.75vw;
    line-height: 1.08;
    font-weight: 600
}

.study-survey ol {
    align-self: center;
    list-style: none;
    display: flex;
    flex-direction: column
}

.study-survey li {
    display: grid;
    grid-template-columns: 2.2vw 1fr;
    gap: .55vw;
    align-items: baseline;
    padding: 1.15vh 0;
    border-bottom: 1px solid rgba(var(--paper-rgb), .13);
    font-family: var(--serif-body-en);
    font-size: 1vw;
    color: rgba(var(--paper-rgb), .86)
}

.study-survey li span {
    font-family: var(--mono);
    font-size: .56vw;
    color: rgba(var(--paper-rgb), .38)
}

@media (max-width:900px) {
    .study-design { margin-top: 1.5vh }
    .study-stage-labels { font-size: .82vw }
    .study-task { grid-template-columns: 4vw minmax(0, 1fr) }
    .study-condition { gap: .6vw; padding-right: .55vw; padding-left: .55vw }
    .study-condition strong { font-size: .66vw }
    .study-survey { padding-top: 2vh; padding-bottom: 2vh }
    .study-survey h2 { font-size: 2vw }
    .study-survey li { font-size: 1.15vw }
}

.results-content-slide .content-title {
    margin-bottom: 3.5vh
}

.rq12-results-slide .content-title {
    margin: 0
}

.rq12-title {
    position: relative;
    min-height: 1.1em
}

.rq12-title span {
    position: absolute;
    inset: 0 auto auto 0;
    transition: opacity .24s ease, transform .24s ease
}

.rq12-rq2-title {
    opacity: 0;
    transform: translateY(12px)
}

.rq12-ablation-mode .rq12-rq1-title {
    opacity: 0;
    transform: translateY(-12px)
}

.rq12-ablation-mode .rq12-rq2-title {
    opacity: 1;
    transform: none
}

.rq12-legend {
    display: flex;
    justify-content: center;
    gap: 2vw;
    min-height: 1.5vh;
    margin-top: 1.3vh
}

.rq12-legend-item {
    display: flex;
    align-items: center;
    gap: .42vw;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .78vw;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .74);
    transition: color .45s ease, opacity .45s ease, max-width .55s ease, margin .55s ease
}

.rq12-legend-item i {
    width: .55vw;
    height: .55vw;
    background: currentColor
}

.rq12-chart {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 3vw 1fr;
    margin-top: 2.5vh
}

.rq12-axis-labels {
    position: relative;
    height: calc(100% - 5.9vh);
    font-family: var(--mono);
    font-size: .78vw;
    color: rgba(var(--paper-rgb), .42)
}

.rq12-axis-labels span {
    position: absolute;
    top: var(--grid-position);
    right: .75vw;
    transform: translateY(-50%)
}

.rq12-plot {
    position: relative;
    min-width: 0
}

.rq12-grid {
    position: absolute;
    inset: 0 0 5.9vh;
    pointer-events: none
}

.rq12-grid i {
    position: absolute;
    top: var(--grid-position);
    left: 0;
    right: 0;
    border-top: 1px solid rgba(var(--paper-rgb), .18)
}

.rq12-grid i.minor {
    border-color: rgba(var(--paper-rgb), .08)
}

.rq12-groups {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1.45fr;
    gap: .35vw
}

.rq12-group {
    min-width: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 2.6vh 3.3vh;
    opacity: 0;
    transition: opacity .45s ease
}

.rq12-group.revealed {
    opacity: 1
}

.rq12-group:not(.revealed) .rq12-bar {
    transform: scaleY(0)
}

.rq12-group h2 {
    grid-row: 3;
    align-self: end;
    text-align: center;
    font-family: var(--mono);
    font-size: .93vw;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .78)
}

.rq12-bars {
    grid-row: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: .68vw
}

.rq12-rank-rail {
    grid-row: 1;
    position: relative;
    min-height: 0;
    background: rgba(var(--ink-rgb), .96)
}

.rq12-rank-tick {
    position: absolute;
    top: var(--rank-position);
    left: 35%;
    right: 8%;
    height: 1px;
    background: rgba(var(--paper-rgb), .13)
}

.rq12-rank-tick span {
    position: absolute;
    right: calc(100% + .45vw);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mono);
    font-size: .5vw;
    font-style: normal;
    color: rgba(var(--paper-rgb), .52)
}

.rq12-rank-tick:nth-child(5n + 1),
.rq12-rank-zero {
    background: rgba(var(--paper-rgb), .3)
}

.rq12-rank-marker {
    position: absolute;
    top: var(--rank-position);
    width: .78vw;
    height: .78vw;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: top .8s cubic-bezier(.2, .8, .2, 1), opacity .8s cubic-bezier(.2, .8, .2, 1), color .45s ease
}

.rq12-rank-value {
    position: absolute;
    top: calc(100% + .65vh);
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: .73vw;
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), color .45s ease
}

.rq12-rank-ci {
    position: absolute;
    top: var(--ci-top);
    height: calc(var(--ci-bottom) - var(--ci-top));
    width: 1.2vw;
    transform: translateX(-50%);
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor
}

.rq12-rank-ci::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: currentColor
}

.rq12-rank-ci.rq12-series-baseline,
.rq12-rank-marker.rq12-series-baseline,
.rq12-rank-value.rq12-series-baseline {
    left: 43%
}

.rq12-rank-ci.rq12-series-7b,
.rq12-rank-marker.rq12-series-7b,
.rq12-rank-value.rq12-series-7b {
    left: 55%
}

.rq12-rank-ci.rq12-series-14b,
.rq12-rank-marker.rq12-series-14b,
.rq12-rank-value.rq12-series-14b {
    left: 67%
}

.rq12-rank-ci.rq12-series-32b,
.rq12-rank-marker.rq12-series-32b,
.rq12-rank-value.rq12-series-32b {
    left: 79%
}

.rq12-rank-marker.rq12-series-baseline {
    top: var(--rank-start)
}

.rq12-baseline-visible .rq12-rank-marker.rq12-series-baseline {
    top: var(--rank-position)
}

.rq12-bar-slot {
    position: relative;
    width: 1.3vw;
    min-width: 0;
    color: var(--paper);
    transition: width .55s ease, opacity .45s ease, filter .45s ease, color .45s ease
}

.rq12-bar,
.rq12-value {
    position: absolute;
    left: 0;
    right: 0
}

.rq12-bar {
    bottom: 0;
    height: calc(var(--bar-value) * 100%);
    background: currentColor;
    transform-origin: bottom;
    transition: height .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), background .45s ease
}

.rq12-value {
    top: calc(100% + .65vh);
    text-align: center;
    font-family: var(--mono);
    font-size: .73vw;
    color: currentColor;
    transition: opacity .35s ease .18s
}

.rq12-series-7b {
    color: #ff6b61
}

.rq12-series-14b {
    color: #f2b84b
}

.rq12-series-32b {
    color: #68c57d
}

.rq12-series-baseline {
    opacity: 0;
    color: var(--paper)
}

.rq12-legend .rq12-series-baseline {
    width: auto;
    max-width: 12vw
}

.rq12-focused .rq12-series-7b {
    color: rgba(var(--paper-rgb), .46)
}

.rq12-focused .rq12-series-32b {
    color: rgba(var(--paper-rgb), .26)
}

.rq12-baseline-visible .rq12-series-baseline {
    opacity: 1
}

.rq12-bar-slot.rq12-series-baseline .rq12-bar {
    height: calc(var(--bar-start) * 100%);
    transform: none
}

.rq12-baseline-visible .rq12-bar-slot.rq12-series-baseline .rq12-bar {
    height: calc(var(--bar-value) * 100%)
}

.rq12-bar-slot.rq12-series-baseline .rq12-value {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1)
}

.rq12-baseline-visible .rq12-bar-slot.rq12-series-baseline .rq12-value {
    opacity: 1
}

.latency-grid,
.perception-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw
}

.latency-card,
.perception-card {
    border-top: 3px solid rgba(var(--paper-rgb), .28);
    padding-top: 2vh
}

.latency-card.default,
.perception-card:first-child {
    border-color: var(--signal)
}

.latency-card>span,
.perception-card>span {
    font-family: var(--mono);
    font-size: .8vw;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal)
}

.latency-card>strong,
.perception-card>strong {
    display: block;
    margin-top: 4vh;
    font-family: var(--serif-en);
    font-size: 5.6vw;
    line-height: .85
}

.latency-card p,
.perception-card p {
    font-family: var(--serif-body-en);
    font-size: 1.12vw;
    line-height: 1.4;
    color: rgba(var(--paper-rgb), .7)
}

.latency-card {
    display: flex;
    flex-direction: column
}

.token-note {
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .58)
}

.result-verdict {
    display: flex;
    gap: .6em;
    margin-top: 3vh;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .22);
    font-family: var(--serif-en);
    font-size: 2.3vw
}

.result-verdict strong { color: var(--signal) }

.latency-card>strong {
    font-size: 4.5vw
}

.latency-bar {
    width: var(--bar);
    height: 10px;
    margin: 3vh 0 2vh;
    background: var(--signal)
}

.latency-card b {
    margin-top: auto;
    padding-top: 2vh;
    font-family: var(--serif-en);
    font-size: 1.55vw
}

.token-note {
    margin-top: 3vh;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .22)
}

.token-note strong {
    color: var(--paper);
    font-size: 1.15vw
}

.rq3-pareto-slide {
    padding-bottom: 3.2vh
}

.rq3-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2vw
}

.rq3-heading .content-title {
    flex: 0 1 auto
}

.rq3-metric-tabs {
    display: flex;
    gap: .35vw;
    padding-bottom: .7vh
}

.rq3-metric-tabs span {
    padding: .7vh .65vw;
    border-bottom: 2px solid rgba(var(--paper-rgb), .14);
    font-family: var(--mono);
    font-size: .68vw;
    letter-spacing: .06em;
    color: rgba(var(--paper-rgb), .38);
    transition: color .3s ease, border-color .3s ease
}

.rq3-metric-tabs span.active {
    border-color: var(--signal);
    color: var(--paper)
}

.rq3-chart {
    position: relative;
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: center;
    padding: 2vh 0 0 2.5vw
}

.rq3-y-title {
    position: absolute;
    top: 50%;
    left: -.3vw;
    transform: translate(-50%, -50%) rotate(-90deg);
    white-space: nowrap;
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .06em;
    color: rgba(var(--paper-rgb), .62)
}

.rq3-y-title span {
    color: var(--paper)
}

.rq3-panels {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45vw
}

.rq3-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto
}

.rq3-panel h2 {
    min-height: 2.5vh;
    text-align: center;
    font-family: var(--serif-en);
    font-size: 1.35vw;
    font-weight: 500;
    color: rgba(var(--paper-rgb), .88)
}

.rq3-panel svg {
    width: 100%;
    height: auto;
    overflow: visible
}

.rq3-good-zone {
    fill: rgba(104, 197, 125, .08)
}

.rq3-usable-zone {
    fill: rgba(242, 184, 75, .06)
}

.rq3-grid-line,
.rq3-x-grid-line,
.rq3-axis {
    vector-effect: non-scaling-stroke
}

.rq3-grid-line {
    stroke: rgba(var(--paper-rgb), .13);
    stroke-width: 1
}

.rq3-x-grid-line {
    stroke: rgba(var(--paper-rgb), .07);
    stroke-width: 1
}

.rq3-axis {
    stroke: rgba(var(--paper-rgb), .42);
    stroke-width: 1.5
}

.rq3-x-axis-tick {
    stroke: rgba(var(--paper-rgb), .5);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke
}

.rq3-x-axis-tick.minor {
    stroke: rgba(var(--paper-rgb), .3);
    stroke-width: 1
}

.rq3-y-tick,
.rq3-x-tick {
    fill: rgba(var(--paper-rgb), .42);
    font-family: var(--mono);
    font-size: 10px
}

.rq3-y-tick {
    text-anchor: end
}

.rq3-x-tick {
    text-anchor: middle
}

.rq3-x-tick.minor {
    fill: rgba(var(--paper-rgb), .32);
    font-size: 8px
}

.rq3-frontier {
    fill: none;
    stroke: rgba(var(--paper-rgb), .6);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke
}

.rq3-point {
    transition: opacity .12s linear
}

.rq3-point circle {
    fill: currentColor;
    stroke: var(--ink);
    stroke-width: 3;
    vector-effect: non-scaling-stroke
}

.rq3-point text {
    fill: currentColor;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-anchor: start;
    pointer-events: none
}

.rq3-point.dominated {
    opacity: .38
}

.rq3-x-title {
    margin-top: -1.8vh;
    text-align: center;
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .04em;
    color: rgba(var(--paper-rgb), .62)
}

.rq3-x-title span {
    margin-left: .6vw;
    color: var(--signal)
}

.rq3-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4vw;
    margin-top: .8vh;
    font-family: var(--mono);
    font-size: .68vw;
    color: rgba(var(--paper-rgb), .68)
}

.rq3-legend span {
    display: flex;
    align-items: center;
    gap: .4vw
}

.rq3-legend i {
    width: .55vw;
    height: .55vw;
    border-radius: 50%;
    background: currentColor
}

.rq3-legend small {
    padding-left: 1.4vw;
    border-left: 1px solid rgba(var(--paper-rgb), .2);
    font-size: inherit;
    color: rgba(var(--paper-rgb), .42)
}

.perception-card {
    display: flex;
    flex-direction: column;
    gap: 1.4vh
}

.perception-card>strong {
    font-size: 4.7vw
}

.perception-card small {
    margin-top: auto;
    font-family: var(--serif-body-en);
    font-size: 1.2vw;
    color: rgba(var(--paper-rgb), .72)
}

.perception-card>div {
    margin-top: 2vh;
    padding-top: 1.7vh;
    border-top: 1px solid rgba(var(--paper-rgb), .18)
}

.perception-card>div strong {
    font-family: var(--serif-en);
    font-size: 3.2vw;
    color: var(--paper)
}

.rq4-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 0fr;
    gap: 0;
    opacity: 0;
    transition: grid-template-columns .65s cubic-bezier(.22, .8, .3, 1), gap .65s ease, opacity .24s ease
}

.rq4-nasa-visible .rq4-stage {
    opacity: 1
}

.rq4-likert-visible .rq4-stage {
    grid-template-columns: .72fr 1.8fr;
    gap: 3vw
}

.rq4-tlx-panel,
.rq4-likert-panel {
    min-width: 0;
    overflow: hidden;
    border-top: 3px solid var(--signal);
    padding-top: 1.8vh
}

.rq4-tlx-panel header,
.rq4-likert-panel header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1vw
}

.rq4-tlx-panel header span,
.rq4-likert-panel header span {
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--signal)
}

.rq4-likert-panel header strong {
    font-family: var(--serif-en);
    font-size: 1.55vw;
    font-weight: 600
}

.rq4-tlx-visual {
    position: relative;
    height: 52vh;
    margin-top: 3vh
}

.rq4-tlx-view {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1.6vw 1fr;
    gap: 1.2vw;
    transition: opacity .35s ease, transform .65s cubic-bezier(.22, .8, .3, 1)
}

.rq4-tlx-dimensions {
    opacity: 0;
    transform: translateY(1.5vh)
}

.rq4-nasa-visible .rq4-tlx-dimensions {
    opacity: 1;
    transform: translateY(0)
}

.rq4-tlx-raw {
    opacity: 0
}

.rq4-likert-visible .rq4-tlx-dimensions {
    opacity: 0
}

.rq4-likert-visible .rq4-tlx-raw {
    opacity: 1;
    transition-delay: .2s
}

.rq4-tlx-axis {
    position: relative;
    height: calc(100% - 4.9vh);
    font-family: var(--mono);
    font-size: .65vw;
    color: rgba(var(--paper-rgb), .52)
}

.rq4-tlx-axis span {
    position: absolute;
    top: var(--grid-position);
    right: 0;
    transform: translateY(-50%)
}

.rq4-tlx-measures {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.2vw
}

.rq4-tlx-grid {
    position: absolute;
    inset: 0 0 4.9vh;
    pointer-events: none
}

.rq4-tlx-grid i {
    position: absolute;
    top: var(--grid-position);
    left: 0;
    right: 0;
    border-top: 1px solid rgba(var(--paper-rgb), .08)
}

.rq4-tlx-grid i.major {
    border-color: rgba(var(--paper-rgb), .16)
}

.rq4-tlx-measure {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-rows: 1fr 4.9vh;
    z-index: 1
}

.rq4-tlx-measure>strong {
    align-self: center;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    font-family: var(--mono);
    font-size: .62vw;
    font-weight: 500;
    letter-spacing: .04em
}

.rq4-boxplot-pair {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45vw
}

.rq4-boxplot {
    position: relative;
    min-width: 0
}

.rq4-boxplot i {
    position: absolute;
    display: block;
    left: 50%;
    transform: translateX(-50%)
}

.rq4-boxplot .whisker {
    bottom: var(--low);
    width: 1px;
    height: calc(var(--high) - var(--low));
    background: color-mix(in srgb, var(--accent), var(--paper) 24%)
}

.rq4-boxplot .cap {
    width: 52%;
    height: 1px;
    background: color-mix(in srgb, var(--accent), var(--paper) 24%)
}

.rq4-boxplot .cap.low { bottom: var(--low) }
.rq4-boxplot .cap.high { bottom: var(--high) }

.rq4-boxplot .box {
    bottom: var(--q1);
    width: 82%;
    min-height: 2px;
    height: calc(var(--q3) - var(--q1));
    border: 1px solid var(--accent);
    background: color-mix(in srgb, var(--accent), transparent 66%)
}

.rq4-boxplot.on .box {
    background: color-mix(in srgb, var(--accent), transparent 20%)
}

.rq4-boxplot .median {
    bottom: var(--median);
    width: 82%;
    height: 2px;
    background: var(--paper)
}

.rq4-boxplot .outlier {
    bottom: var(--outlier);
    width: .32vw;
    height: .32vw;
    border: 1px solid var(--paper);
    border-radius: 50%;
    background: var(--paper)
}

.rq4-boxplot>span {
    position: absolute;
    bottom: -1.4vh;
    width: 100%;
    text-align: center;
    font-family: var(--mono);
    font-size: .52vw;
    color: rgba(var(--paper-rgb), .58)
}

.rq4-tlx-raw {
    grid-template-columns: 1.2vw 1fr;
    gap: .8vw
}

.rq4-tlx-raw .rq4-tlx-measures {
    grid-template-columns: 1fr
}

.rq4-tlx-raw .rq4-tlx-measure>strong {
    font-size: .72vw
}

.rq4-tlx-raw .rq4-boxplot-pair {
    gap: 1.2vw
}

.rq4-likert-panel {
    opacity: 0;
    transform: translateX(4vw);
    transition: opacity .35s ease .3s, transform .55s cubic-bezier(.22, .8, .3, 1) .18s
}

.rq4-likert-visible .rq4-likert-panel {
    opacity: 1;
    transform: translateX(0)
}

.rq4-likert-tabs {
    margin-top: 2.6vh;
    padding-bottom: 0
}

.rq4-likert-tabs span {
    flex: 1;
    text-align: center
}

.rq4-likert-axis {
    margin: 2.4vh 0 1vh 14.5vw;
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    font-family: var(--mono);
    font-size: .58vw;
    color: rgba(var(--paper-rgb), .46)
}

.rq4-likert-axis span:last-child { text-align: right }
.rq4-likert-axis i { height: 1.6vh; background: rgba(var(--paper-rgb), .45) }

.rq4-likert-rows {
    display: grid;
    gap: 1.15vh
}

.rq4-likert-row[hidden] {
    display: none
}

.rq4-likert-row {
    display: grid;
    grid-template-columns: 13vw 1fr;
    gap: 1.5vw;
    align-items: center
}

.rq4-likert-copy strong,
.rq4-likert-copy span {
    display: block
}

.rq4-likert-copy strong {
    font-family: var(--serif-en);
    font-size: .92vw
}

.rq4-likert-copy span {
    margin-top: .2vh;
    font-family: var(--mono);
    font-size: .65vw;
    color: rgba(var(--paper-rgb), .58)
}

.rq4-likert-bar {
    height: 4.2vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden
}

.rq4-likert-half {
    display: flex
}

.rq4-likert-half.negative { justify-content: flex-end }

.rq4-likert-half i {
    display: block;
    width: var(--response-width);
    height: 100%;
    border-right: 1px solid rgba(var(--ink-rgb), .65);
    transform: scaleX(0);
    transition: transform .55s cubic-bezier(.22, .8, .3, 1) .48s
}

.rq4-likert-half.negative i { transform-origin: right }
.rq4-likert-half.positive i { transform-origin: left }
.rq4-likert-visible .rq4-likert-half i { transform: scaleX(1) }

.rq4-results .response-1 { background: #b2182b }
.rq4-results .response-2 { background: #d6604d }
.rq4-results .response-3 { background: #f4a582 }
.rq4-results .response-4 { background: #d0d0d0 }
.rq4-results .response-5 { background: #92a8f2 }
.rq4-results .response-6 { background: #637cef }
.rq4-results .response-7 { background: #4059d4 }

.rq4-likert-legend {
    margin: 2.3vh 0 0 14.5vw;
    display: grid;
    grid-template-columns: repeat(7, auto);
    justify-content: space-between;
    gap: .6vw;
    font-family: var(--mono);
    font-size: .54vw;
    color: rgba(var(--paper-rgb), .64)
}

.rq4-likert-legend span {
    display: flex;
    align-items: center;
    gap: .4vw
}

.rq4-likert-legend i {
    width: .58vw;
    height: .58vw;
    flex: 0 0 auto
}

@media (max-width:900px) {
    .rq4-likert-visible .rq4-stage { grid-template-columns: .8fr 1.7fr; gap: 2vw }
    .rq4-tlx-panel header span,
    .rq4-likert-panel header span { font-size: .9vw }
    .rq4-likert-panel header strong { font-size: 1.9vw }
    .rq4-likert-copy strong { font-size: 1.1vw }
    .rq4-likert-copy span,
    .rq4-likert-axis,
    .rq4-likert-legend { font-size: .72vw }
}

.discussion-content-slide .content-title {
    margin-bottom: 4vh
}

.discussion-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 2.4vw;
    align-items: stretch
}

.discussion-grid-3 {
    grid-template-columns: repeat(3, 1fr)
}

.discussion-grid-4 {
    grid-template-columns: repeat(4, 1fr)
}

.discussion-card {
    min-width: 0;
    border-top: 3px solid var(--signal);
    padding-top: 2vh;
    display: flex;
    flex-direction: column;
    gap: 1.8vh
}

.discussion-index {
    font-family: var(--mono);
    font-size: .76vw;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal)
}

.discussion-card h2 {
    font-family: var(--serif-en);
    font-size: 2.15vw;
    line-height: 1.08
}

.discussion-card p {
    font-family: var(--serif-body-en);
    font-size: 1.35vw;
    line-height: 1.42;
    color: rgba(var(--paper-rgb), .78)
}

.discussion-card>strong {
    margin-top: auto;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .2);
    font-family: var(--serif-en);
    font-size: 1.75vw;
    line-height: 1.25;
    color: var(--paper)
}

.discussion-stat>strong {
    margin-top: 1.5vh;
    padding-top: 0;
    border-top: 0;
    font-size: 5.1vw;
    line-height: .9;
    color: var(--signal)
}

.discussion-stat small {
    margin-top: auto;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .2);
    font-family: var(--mono);
    font-size: .8vw;
    line-height: 1.5;
    color: rgba(var(--paper-rgb), .62)
}

.discussion-claim {
    margin-top: 4vh;
    padding: 2.2vh 0 0 2vw;
    border-top: 1px solid rgba(var(--paper-rgb), .22);
    border-left: 4px solid var(--signal);
    font-family: var(--serif-en);
    font-size: 1.85vw;
    line-height: 1.25
}

.implication-view,
.trace-filter-view,
.rejection-view,
.conservative-view {
    position: absolute;
    inset: 18vh 6vw 7vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility 0s .24s
}

.implication-view.active,
.trace-filter-view.active,
.rejection-view.active,
.conservative-view.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s
}

.conclusion-row {
    display: grid;
    grid-template-columns: 9vw 1fr;
    gap: 2vw;
    align-items: baseline;
    padding: 3vh 0;
    border-top: 1px solid rgba(var(--paper-rgb), .26);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .24s ease, transform .24s ease
}

.conclusion-row.revealed {
    opacity: 1;
    transform: none
}

.conclusion-row>span {
    font: 500 .9vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--signal)
}

.trace-filter-view {
    display: grid;
    grid-template-columns: 1fr 12vw 1fr;
    grid-template-rows: 1fr auto;
    gap: 4vw;
    align-items: center
}

.trace-stream {
    display: grid;
    gap: 1.4vw
}

.trace-stream-in {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(5, 1fr)
}

.trace-stream-out {
    position: relative;
    z-index: 1;
    grid-template-columns: repeat(5, 1fr)
}

.trace-stream-out i {
    visibility: hidden
}

.trace-filter-view.filter-complete .trace-stream-in i {
    visibility: hidden
}

.trace-filter-view.filter-complete .trace-stream-out i:not(.dropped) {
    visibility: visible
}

.trace-stream i {
    width: 1.2vw;
    aspect-ratio: 1;
    justify-self: center;
    border-radius: 50%;
    background: rgba(var(--paper-rgb), .28)
}

.trace-stream i.signal {
    background: var(--signal);
    box-shadow: 0 0 1.4vw rgba(255, 59, 48, .28)
}

.trace-stream i.dropped {
    visibility: hidden
}

.trace-filter {
    position: relative;
    z-index: 2;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    gap: 2.2vh;
    text-align: center;
    background: var(--ink);
    border: 2px solid var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 3vw rgba(255, 59, 48, .12)
}

.latency-wait::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    opacity: 0;
    background: conic-gradient(transparent 0 94%, rgba(255, 255, 255, .95) 98%, var(--signal));
    filter: drop-shadow(0 0 .7vw var(--signal));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0)
}

.trace-filter span {
    font: 500 .75vw/1 var(--mono);
    letter-spacing: .14em;
    color: rgba(var(--paper-rgb), .55)
}

.trace-filter strong {
    margin-top: .8vh;
    font: 500 2.1vw/1 var(--serif-en)
}

.filter-takeaway {
    grid-column: 1 / -1;
    padding-top: 3vh;
    border-top: 1px solid rgba(var(--paper-rgb), .22);
    text-align: center;
    font: 500 2.8vw/1.1 var(--serif-en)
}

.filter-takeaway strong {
    font-weight: 500;
    color: var(--signal)
}

.visual-takeaway {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 3vh;
    border-top: 1px solid rgba(var(--paper-rgb), .22);
    text-align: center;
    font: 500 2.8vw/1.1 var(--serif-en)
}

.visual-takeaway strong {
    font-weight: 500;
    color: var(--signal)
}

.visual-takeaway small {
    display: block;
    margin-top: 1.2vh;
    font: 400 1.1vw/1.2 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .62)
}

.ranking-view {
    display: flex;
    align-items: center;
    padding-bottom: 11vh
}

.ranking-board {
    position: relative;
    width: 100%;
    padding-top: 8vh
}

.ranking-mode {
    position: absolute;
    top: 0;
    left: 0;
    font: 500 1.25vw/1 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase
}

.ranking-mode span {
    position: absolute;
    white-space: nowrap;
    transition: opacity .25s ease
}

.ranking-mode span:last-child,
.llm-ranked .ranking-mode span:first-child {
    opacity: 0
}

.llm-ranked .ranking-mode span:last-child {
    opacity: 1
}

.ranking-key {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: .7vw;
    font: 500 .75vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .55)
}

.ranking-key i,
.ranking-ground-truth,
.ranking-board li i {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%
}

.ranking-key i {
    width: 1.2vw
}

.ranking-key i,
.ranking-ground-truth {
    background: var(--signal);
    box-shadow: 0 0 1.4vw rgba(255, 59, 48, .28)
}

.ranking-board ol {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    list-style: none
}

.ranking-board ol::before {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 1.5vw;
    border-top: 1px solid rgba(var(--paper-rgb), .2)
}

.ranking-board li {
    display: grid;
    grid-template-rows: auto 3vw;
    justify-items: center;
    align-items: center;
    gap: 2.5vh
}

.ranking-board li b {
    font: 400 .8vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .45)
}

.ranking-board li i {
    position: relative;
    width: var(--rank-size);
    background: rgba(var(--paper-rgb), .28)
}

.ranking-ground-truth {
    position: absolute;
    left: 25%;
    bottom: 1.5vw;
    width: 1vw;
    transform: translate(-50%, 50%);
    transition: left .8s cubic-bezier(.45, 0, .2, 1), width .8s cubic-bezier(.45, 0, .2, 1)
}

.llm-ranked .ranking-ground-truth {
    left: 55%;
    width: .5vw
}

.ranking-reset .ranking-ground-truth {
    transition: none
}

@media (prefers-reduced-motion: reduce) {
    .ranking-ground-truth {
        transition: none
    }
}

.latency-view {
    display: grid;
    grid-template-columns: 1fr 14vw 1fr;
    gap: 4vw;
    align-items: center;
    padding-bottom: 11vh
}

.latency-request,
.latency-result {
    display: flex;
    position: relative;
    z-index: 1
}

.latency-request {
    justify-content: flex-end
}

.latency-result {
    justify-content: flex-start;
    transform: translateX(-16vw)
}

.latency-card {
    width: 10vw;
    padding: 1.5vh 1.2vw;
    border: 1px solid rgba(var(--paper-rgb), .25);
    border-left: 3px solid var(--signal);
    background: var(--ink-tint)
}

.latency-card span {
    display: block;
    margin-bottom: 1.2vh;
    font: 500 .7vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .65)
}

.latency-card i {
    display: block;
    width: 100%;
    height: 2px;
    margin-top: .7vh;
    background: rgba(var(--paper-rgb), .28)
}

.latency-card i:nth-of-type(2) {
    width: 72%
}

.latency-result .latency-card i:first-of-type,
.latency-result .latency-card i:last-of-type {
    background: var(--signal)
}

.latency-wait {
    position: relative;
    z-index: 2;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    background: var(--ink);
    border: 2px solid var(--signal);
    border-radius: 50%;
    box-shadow: 0 0 3vw rgba(255, 59, 48, .12)
}

.latency-wait span,
.latency-wait small {
    font: 500 .7vw/1 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .5)
}

.latency-view.active .latency-request {
    animation: latency-request-in .7s .15s ease-in forwards
}

.latency-view.active .latency-wait::before {
    animation: latency-ring-spin .716s .85s linear 3, latency-ring-show 2.15s .85s linear forwards
}

.latency-view.active .latency-result {
    animation: latency-result-out .8s 3s cubic-bezier(.2, .7, .2, 1) forwards
}

@keyframes latency-request-in {
    to { transform: translateX(16vw) }
}

@keyframes latency-ring-spin {
    to { transform: rotate(1turn) }
}

@keyframes latency-ring-show {
    0%, 99% { opacity: 1 }
    100% { opacity: 0 }
}

@keyframes latency-result-out {
    from { transform: translateX(-16vw) }
    to { transform: translateX(0) }
}

@media (prefers-reduced-motion: reduce) {
    .latency-view.active .latency-request {
        visibility: hidden;
        animation: none
    }

    .latency-view.active .latency-result {
        transform: none;
        animation: none
    }

    .latency-view.active .latency-wait::before {
        display: none
    }
}

.rejection-view {
    display: grid;
    place-items: center
}

.rejection-explanation {
    width: 100%
}

.rejection-explanation h2 {
    max-width: none;
    margin-bottom: 1vh;
    text-align: center;
    font: 500 3.2vw/1.05 var(--serif-en)
}

.rejection-total {
    margin-bottom: 5vh;
    text-align: center;
    font: 400 1vw/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .56)
}

.rejection-total strong {
    color: var(--paper)
}

.rejection-donuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3vw;
    align-items: start
}

.rejection-donuts figure {
    text-align: center
}

.rejection-donut {
    width: min(13vw, 26vh);
    background: conic-gradient(from -90deg, var(--donut-color) var(--problem-pie-value), rgba(var(--paper-rgb), .1) 0);
    box-shadow: 0 0 0 1px rgba(var(--paper-rgb), .08), 0 0 2.5vw color-mix(in srgb, var(--donut-color) 12%, transparent)
}

.rejection-donut .problem-pie-core {
    font-size: 2.2vw
}

.rejection-donuts figcaption {
    margin-top: 1.5vh;
    font: 400 1.15vw/1.2 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .72)
}

.rejection-explanation>small {
    display: block;
    margin-top: 4vh;
    text-align: center;
    font: 400 .7vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .42)
}

.conservative-view {
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center
}

.conservative-view p {
    font: 500 3.5vw/1.12 var(--serif-en)
}

.conservative-view p strong {
    font-weight: 500;
    color: var(--signal)
}

.conservative-view div {
    margin-top: 4vh
}

.conservative-view b {
    font: 600 5vw/.9 var(--serif-body-en);
    color: var(--signal)
}

.conservative-view div span {
    margin-left: 1vw;
    font: 400 1.4vw/1 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .62)
}

.conservative-view small {
    margin-top: 5vh;
    padding-top: 2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .25);
    font: 400 1.3vw/1.2 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .72)
}

.conclusion-overview {
    position: absolute;
    inset: 17vh 6vw 5vh;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 2.2vh
}

.conclusion-overview section {
    min-height: 0
}

.conclusion-overview h2 {
    margin-bottom: .8vh;
    font: 500 .78vw/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .55);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease
}

.conclusion-overview h2.revealed {
    opacity: 1;
    transform: none
}

.conclusion-overview h2 i {
    color: var(--signal);
    font-style: normal
}

.conclusion-row {
    grid-template-columns: 4vw 1fr;
    padding: 1.5vh 0
}

.conclusion-row p {
    font: 400 1.32vw/1.25 var(--serif-body-en)
}

.conclusion-row p>strong {
    font-weight: 500
}

.future-row p {
    display: grid;
    grid-template-columns: 1fr auto 1.2fr;
    gap: 1.5vw;
    align-items: baseline
}

.future-row em {
    font-style: normal;
    color: rgba(var(--paper-rgb), .62)
}

.future-row i {
    font-style: normal;
    color: var(--signal)
}

.future-row strong {
    color: var(--paper)
}

@media (max-width:900px) {
    .experiment-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4vw
    }

    .experiment-label,
    .dataset-source small,
    .dataset-balance small,
    .settings-list span,
    .metric-list small {
        font-size: 1vw
    }

    .dataset-source span,
    .dataset-balance span,
    .panel-why,
    .metric-list strong {
        font-size: 1.45vw
    }

    .discussion-grid {
        gap: 1.5vw
    }

    .discussion-card h2 {
        font-size: 2.6vw
    }

    .discussion-card p {
        font-size: 1.8vw
    }

    .discussion-index,
    .discussion-stat small {
        font-size: 1.15vw
    }

    .conclusion-row>span { font-size: 1.2vw }
    .conclusion-row p { font-size: 2vw }
    .rejection-donuts figcaption { font-size: 1.45vw }

    .latency-card>span,
    .perception-card>span,
    .token-note { font-size: 1.15vw }
    .latency-card p,
    .perception-card p { font-size: 1.55vw }
    .perception-card small { font-size: 1.6vw }
    .rq3-metric-tabs span,
    .rq3-y-title,
    .rq3-x-title,
    .rq3-legend { font-size: 1vw }
    .rq3-panel h2 { font-size: 1.7vw }
}

.background-detail .content-title {
    color: currentColor
}

.miner-layout,
.ml-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: .9fr 1.35fr;
    gap: 5vw;
    align-items: center
}

.miner-intro>p,
.ml-lead {
    font-family: var(--serif-en);
    font-size: 2.4vw;
    line-height: 1.25
}

.miner-flow {
    display: flex;
    align-items: center;
    gap: .8vw;
    margin: 4vh 0 2vh;
    font-family: var(--mono);
    font-size: .85vw;
    text-transform: uppercase;
    letter-spacing: .08em
}

.miner-flow span,
.ml-features span {
    padding: 1.3vh 1vw;
    border: 1px solid rgba(var(--paper-rgb), .28)
}

.miner-flow b,
.miner-intro small,
.ml-copy small {
    color: var(--signal)
}

.miner-intro small,
.ml-copy small {
    font-family: var(--mono);
    font-size: .78vw;
    letter-spacing: .12em;
    text-transform: uppercase
}

.miner-benchmarks {
    border-top: 3px solid var(--signal)
}

.miner-benchmarks>div {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    padding: 2.2vh 0;
    border-bottom: 1px solid rgba(var(--ink-rgb), .22);
    font-family: var(--serif-en);
    font-size: 1.65vw
}

.miner-benchmarks .miner-head {
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55
}

.miner-benchmarks p {
    margin-top: 2.2vh;
    font-family: var(--mono);
    font-size: .8vw;
    opacity: .62
}

.ml-layout {
    grid-template-columns: .72fr 1.28fr
}

.ml-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1vh .8vw;
    margin: 3vh 0;
    font-family: var(--mono);
    font-size: .72vw
}

.ml-result {
    padding-top: 2vh;
    border-top: 3px solid var(--signal);
    margin-bottom: 2vh;
    font-family: var(--serif-en);
    font-size: 1.55vw;
    line-height: 1.3
}

.ml-figure {
    height: 60vh;
    display: flex;
    padding: 2vh 2vw;
    background: #fff
}

.ml-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.llm-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4vh
}

.llm-loop {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1.4vw;
    align-items: center
}

.llm-loop article {
    min-height: 24vh;
    padding: 2vh 1.4vw;
    border-top: 3px solid var(--signal);
    background: rgba(var(--paper-rgb), .05)
}

.llm-loop article span,
.llm-patterns span {
    display: block;
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--signal)
}

.llm-loop article strong {
    display: block;
    margin: 2vh 0 1vh;
    font-family: var(--serif-en);
    font-size: 2.5vw
}

.llm-loop article p {
    font-family: var(--serif-body-en);
    font-size: 1.1vw;
    line-height: 1.45;
    color: rgba(var(--paper-rgb), .7)
}

.llm-loop>b {
    color: var(--signal);
    font-size: 2vw
}

.llm-patterns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw
}

.llm-patterns div {
    border-top: 1px solid rgba(var(--paper-rgb), .24);
    padding-top: 1.3vh
}

.llm-patterns strong {
    display: block;
    margin-top: .8vh;
    font-family: var(--serif-en);
    font-size: 1.25vw
}

.llm-limit {
    font-family: var(--serif-en);
    font-size: 1.45vw;
    color: rgba(var(--paper-rgb), .72)
}

@media (max-width:900px) {
    .miner-layout,
    .ml-layout { grid-template-columns: 1fr; gap: 2vh }
    .miner-intro>p,
    .ml-lead { font-size: 3.8vw }
    .miner-flow { margin: 1.5vh 0 1vh; font-size: 1.3vw }
    .miner-benchmarks>div { padding: 1vh 0; font-size: 2.5vw }
    .miner-benchmarks .miner-head,
    .miner-benchmarks p,
    .miner-intro small,
    .ml-copy small,
    .ml-features { font-size: 1.25vw }
    .ml-features { margin: 1.5vh 0 }
    .ml-result { font-size: 2.5vw; margin-bottom: 1vh }
    .ml-figure { height: 40vh }
    .llm-layout { gap: 2vh }
    .llm-loop article { min-height: 18vh }
    .llm-loop article strong { font-size: 3.5vw }
    .llm-loop article p { font-size: 1.8vw }
    .llm-patterns strong,
    .llm-limit { font-size: 2vw }
}

.miner-subtitle {
    margin-top: 1.2vh;
    font-family: var(--serif-body-en);
    font-size: 1.35vw;
    opacity: .68
}

.miner-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2vw;
    align-items: stretch;
    padding-top: 4vh
}

.miner-column {
    min-width: 0;
    padding: 2vh 1.5vw;
    border-top: 3px solid var(--signal);
    background: rgba(var(--ink-rgb), .04)
}

.background-label {
    display: block;
    margin-bottom: 2vh;
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .58
}

.miner-big {
    display: block;
    font-family: var(--serif-en);
    font-size: 7vw;
    line-height: .9;
    color: var(--signal)
}

.operation-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .7vh .5vw;
    margin-top: 3vh
}

.operation-cloud span {
    padding: .55vh .5vw;
    border: 1px solid rgba(var(--ink-rgb), .2);
    font-family: var(--mono);
    font-size: .61vw
}

.language-logos {
    height: 48vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vh 1.2vw;
    align-items: center;
    justify-items: center
}

.language-logos img {
    width: 7vw;
    height: 9vh;
    object-fit: contain;
    filter: saturate(.9)
}

.language-logos img:first-child {
    grid-row: span 2;
    height: 20vh
}

.miner-column.miner-benchmarks {
    border-top: 3px solid var(--signal)
}

.ml-scope {
    display: flex;
    flex-direction: column;
    gap: .6vh;
    margin-bottom: 4vh
}

.ml-scope span {
    font-family: var(--mono);
    font-size: .72vw;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal)
}

.ml-scope strong {
    font-family: var(--serif-en);
    font-size: 3.2vw
}

.feature-groups article {
    display: flex;
    flex-direction: column;
    gap: .55vh;
    padding: 1.7vh 0;
    border-top: 1px solid rgba(var(--ink-rgb), .25)
}

.feature-groups strong {
    font-family: var(--serif-en);
    font-size: 1.65vw
}

.feature-groups span {
    font-family: var(--mono);
    font-size: .76vw;
    opacity: .62
}

.agentless-layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    padding-top: 2.5vh
}

.agentless-figure {
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 1.5vh 1vw;
    background: #fff
}

.agentless-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

@media (max-width:900px) {
    .miner-subtitle { font-size: 2.2vw }
    .miner-columns { gap: 1vw; padding-top: 2vh }
    .background-label { font-size: 1.15vw }
    .operation-cloud span { font-size: .95vw }
    .language-logos img { width: 10vw }
    .feature-groups strong { font-size: 2.6vw }
    .feature-groups span { font-size: 1.2vw }
}

/* Ranking trace evidence */
.rank-trace-view,
.rank-reasoning-case,
.ranking-mechanism-view {
    position: absolute;
    inset: 17vh 6vw 6vh;
    opacity: 0;
    visibility: hidden;
    transform: translateY(1.4vh);
    transition: opacity .28s ease, transform .34s cubic-bezier(.22, .8, .3, 1), visibility 0s .34s
}

.rank-trace-view.active,
.rank-reasoning-case.active,
.ranking-mechanism-view.active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

.rank-view-question {
    font: 500 2.1vw/1.12 var(--serif-en);
    text-align: center
}

.rank-presence-view {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 4vh
}

.rank-funnel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.5vw minmax(0, 1fr) 6.5vw minmax(0, 1fr) 6.5vw minmax(0, 1fr);
    align-items: stretch
}

.rank-funnel-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    padding: 2.2vh 1.4vw 2vh;
    border-top: 3px solid var(--stage-color);
    background: linear-gradient(180deg, color-mix(in srgb, var(--stage-color) 10%, transparent), rgba(var(--paper-rgb), .025));
    opacity: 0;
    transform: translateY(2vh)
}

.rank-presence-view.active .rank-funnel-stage,
.rank-presence-view.active .rank-funnel-loss {
    animation: rank-stage-in .42s calc(.1s + var(--stage) * .11s) cubic-bezier(.22, .8, .3, 1) forwards
}

.rank-funnel-stage>span {
    grid-column: 1 / -1;
    font: 500 .72vw/1 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .58)
}

.rank-funnel-stage>strong {
    align-self: end;
    font: 600 4.2vw/.9 var(--serif-body-en);
    color: var(--stage-color)
}

.rank-funnel-stage>b {
    align-self: end;
    padding-bottom: .45vh;
    font: 500 1.15vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .72)
}

.rank-funnel-stage>div {
    grid-column: 1 / -1;
    height: .7vh;
    margin-top: 2.4vh;
    overflow: hidden;
    background: rgba(var(--paper-rgb), .09)
}

.rank-funnel-stage>div i {
    display: block;
    width: var(--retained);
    height: 100%;
    background: var(--stage-color);
    transform: scaleX(0);
    transform-origin: left
}

.rank-presence-view.active .rank-funnel-stage>div i {
    animation: rank-bar-grow .6s calc(.35s + var(--stage) * .11s) cubic-bezier(.22, .8, .3, 1) forwards
}

.rank-funnel-loss {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .8vh;
    opacity: 0;
    color: rgba(var(--paper-rgb), .45)
}

.rank-funnel-loss::before {
    content: "→";
    font: 300 2vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .25)
}

.rank-funnel-loss b {
    font: 500 .8vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .7)
}

.rank-funnel-loss-major b {
    color: var(--signal)
}

.rank-funnel-loss span {
    max-width: 6vw;
    text-align: center;
    font: 400 .58vw/1.25 var(--mono);
    text-transform: uppercase
}

.rank-presence-takeaway {
    padding-top: 2.2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .2);
    text-align: center;
    font: 400 1.45vw/1.25 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .7)
}

.rank-presence-takeaway strong {
    font-weight: 500;
    color: var(--paper)
}

@keyframes rank-stage-in {
    to { opacity: 1; transform: none }
}

@keyframes rank-bar-grow {
    to { transform: scaleX(1) }
}

.rank-competition-view {
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 2.3vh
}

.rank-competition-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 1.5vh;
    border-bottom: 1px solid rgba(var(--paper-rgb), .18)
}

.rank-competition-head p {
    display: flex;
    align-items: baseline;
    gap: .8vw
}

.rank-competition-head strong {
    font: 600 2.8vw/.9 var(--serif-body-en);
    color: var(--signal)
}

.rank-competition-head span,
.rank-competition-head>small {
    font: 500 .75vw/1.2 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .55)
}

.rank-competition-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 2vw
}

.rank-noise-card,
.rank-mrr-card {
    min-height: 0;
    padding: 2vh 1.5vw;
    border-top: 3px solid rgba(var(--paper-rgb), .72);
    background: rgba(var(--paper-rgb), .04)
}

.rank-noise-card>span,
.rank-mrr-card>span {
    font: 500 .7vw/1 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .5)
}

.rank-candidate-counts,
.rank-mrr-card>div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5vw;
    align-items: center;
    margin-top: 1.8vh
}

.rank-candidate-counts p,
.rank-mrr-card p {
    display: grid;
    gap: .5vh
}

.rank-candidate-counts b,
.rank-mrr-card b {
    font: 600 3.4vw/.9 var(--serif-body-en)
}

.rank-candidate-counts p:last-child b,
.rank-mrr-card p:last-child b {
    color: var(--signal)
}

.rank-candidate-counts small,
.rank-mrr-card small,
.rank-noise-card>small {
    font: 400 .68vw/1.2 var(--mono);
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.rank-candidate-counts>i,
.rank-mrr-card>div>i {
    font: 300 1.8vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .3)
}

.rank-candidate-dots {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: .45vw;
    margin: 2.2vh 0 1.2vh
}

.rank-candidate-dots i {
    height: .7vh;
    background: rgba(var(--paper-rgb), .13);
    transform: scaleX(0)
}

.rank-candidate-dots i.kept {
    background: var(--signal)
}

.rank-competition-view.active .rank-candidate-dots i {
    animation: rank-bar-grow .35s calc(.2s + var(--dot, 0) * .03s) ease forwards
}

.rank-mrr-card {
    position: relative;
    border-top-color: var(--signal)
}

.rank-mrr-card>strong {
    position: absolute;
    top: 1.8vh;
    right: 1.3vw;
    padding: .55vh .55vw;
    border: 1px solid rgba(255, 59, 48, .45);
    font: 500 .72vw/1 var(--mono);
    color: var(--signal)
}

.rank-outcomes {
    display: grid;
    gap: 1.1vh
}

.rank-outcome-bar {
    display: flex;
    width: 100%;
    height: 1.2vh;
    gap: 2px;
    overflow: hidden
}

.rank-outcome-bar i {
    display: block;
    width: var(--share);
    transform: scaleX(0);
    transform-origin: left
}

.rank-competition-view.active .rank-outcome-bar i {
    animation: rank-bar-grow .65s .28s cubic-bezier(.22, .8, .3, 1) forwards
}

.rank-outcome-bar .improved { background: #68c57d }
.rank-outcome-bar .tied { background: rgba(var(--paper-rgb), .35) }
.rank-outcome-bar .worsened { background: var(--signal) }
.rank-outcome-bar .omitted { background: #f2b84b }

.rank-outcome-labels {
    display: grid;
    grid-template-columns: 25.32fr 31.77fr 40.97fr 8fr;
    gap: 1vw
}

.rank-outcome-labels p {
    display: flex;
    align-items: baseline;
    gap: .45vw;
    min-width: 0
}

.rank-outcome-labels b {
    font: 600 1.25vw/1 var(--serif-body-en)
}

.rank-outcome-labels span {
    font: 500 .62vw/1 var(--mono);
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .5)
}

.rank-outcome-labels .improved b { color: #68c57d }
.rank-outcome-labels .worsened b { color: var(--signal) }
.rank-outcome-labels .omitted b { color: #f2b84b }

/* Model-generated ranking rationale cases */
.rank-rationale-caption {
    margin-top: 1.2vh;
    font: 500 .68vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .45)
}

.rank-case-nav {
    position: absolute;
    top: 11.2vh;
    right: 6vw;
    display: flex;
    gap: .45vw
}

.rank-case-nav i {
    display: grid;
    place-items: center;
    width: 2.2vw;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--paper-rgb), .18);
    border-radius: 50%;
    font: 500 .58vw/1 var(--mono);
    font-style: normal;
    color: rgba(var(--paper-rgb), .35);
    transition: border-color .24s ease, color .24s ease, background .24s ease
}

.rank-case-nav i.active {
    border-color: var(--signal);
    background: rgba(255, 59, 48, .12);
    color: var(--paper)
}

.rank-reasoning-case {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 2vh
}

.rank-case-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1.4vh;
    border-bottom: 1px solid rgba(var(--paper-rgb), .18)
}

.rank-case-meta span,
.rank-case-meta b {
    font: 500 .72vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase
}

.rank-case-meta span { color: var(--signal) }
.rank-reasoning-case.success .rank-case-meta span { color: #68c57d }
.rank-case-meta b { color: rgba(var(--paper-rgb), .5) }

.rank-case-layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr) minmax(0, .8fr);
    gap: 1.7vw;
    min-height: 0
}

.rank-case-list,
.rank-argument-card {
    min-width: 0;
    min-height: 0;
    padding: 1.8vh 1.25vw;
    background: rgba(var(--paper-rgb), .035);
    border-top: 3px solid rgba(var(--paper-rgb), .28)
}

.rank-case-after {
    border-top-color: var(--signal)
}

.rank-reasoning-case.success .rank-case-after {
    border-top-color: #68c57d
}

.rank-case-list header {
    display: grid;
    gap: .6vh;
    min-height: 9vh;
    padding-bottom: 1.4vh;
    border-bottom: 1px solid rgba(var(--paper-rgb), .13)
}

.rank-case-list header span,
.rank-argument-card>span {
    font: 500 .63vw/1 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .46)
}

.rank-case-list header b {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 500 1.35vw/1.15 var(--serif-en);
    white-space: nowrap
}

.rank-case-list header small {
    font: 500 .68vw/1 var(--mono);
    color: var(--signal)
}

.rank-reasoning-case.success .rank-case-list header small {
    color: #68c57d
}

.rank-case-list ol {
    display: grid;
    gap: .8vh;
    margin-top: 1.2vh;
    list-style: none
}

.rank-case-list li {
    display: grid;
    grid-template-columns: 1.5vw 1fr;
    gap: .65vw;
    align-items: center;
    min-height: 4.2vh;
    padding: .6vh .55vw;
    border: 1px solid rgba(var(--paper-rgb), .1);
    opacity: 0;
    transform: translateX(-1vw)
}

.rank-case-after li {
    transform: translateX(1vw)
}

.rank-reasoning-case.active li {
    animation: rank-list-row-in .36s calc(.12s + var(--row, 0) * .05s) ease forwards
}

.rank-reasoning-case.active li.muted {
    animation-name: rank-list-row-muted-in
}

.rank-case-list li b {
    font: 500 .7vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .4)
}

.rank-case-list li span {
    overflow: hidden;
    text-overflow: ellipsis;
    font: 400 .85vw/1.15 var(--serif-body-en);
    white-space: nowrap
}

.rank-case-list li.truth {
    border-color: rgba(255, 59, 48, .6);
    background: rgba(255, 59, 48, .08)
}

.rank-reasoning-case.success .rank-case-list li.truth {
    border-color: rgba(104, 197, 125, .65);
    background: rgba(104, 197, 125, .08)
}

.rank-case-list li.promoted {
    border-color: rgba(242, 184, 75, .55);
    background: rgba(242, 184, 75, .07)
}

.rank-case-list li.muted {
    opacity: .38
}

.rank-argument-card {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 1.5vh;
    border-top-color: #f2b84b;
    background: linear-gradient(145deg, rgba(242, 184, 75, .09), rgba(var(--paper-rgb), .025))
}

.rank-argument-card::before {
    content: "“";
    position: absolute;
    top: 2.5vh;
    right: 1.2vw;
    font: 700 6vw/.8 var(--serif-en);
    color: rgba(242, 184, 75, .13)
}

.rank-argument-card blockquote {
    align-self: center;
    max-width: 36vw;
    font: 400 1.55vw/1.35 var(--serif-en);
    color: rgba(var(--paper-rgb), .9)
}

.rank-argument-card>div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7vw;
    align-items: baseline;
    padding-top: 1.2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .14)
}

.rank-argument-card>div small {
    font: 500 .62vw/1 var(--mono);
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .4)
}

.rank-argument-card>div strong {
    font: 500 1.05vw/1 var(--serif-en);
    color: #f2b84b
}

.rank-reasoning-case.success .rank-argument-card>div strong {
    color: #68c57d
}

.rank-argument-card>p {
    font: 500 .78vw/1.3 var(--mono);
    color: var(--signal)
}

.rank-reasoning-case.success .rank-argument-card>p {
    color: #68c57d
}

.rank-reasoning-case>footer {
    padding-top: 1.6vh;
    border-top: 1px solid rgba(var(--paper-rgb), .18);
    text-align: center;
    font: 500 1.35vw/1.2 var(--serif-en);
    color: var(--signal)
}

.rank-reasoning-case.success>footer {
    color: #68c57d
}

.rank-rationale-scope {
    position: absolute;
    right: 6vw;
    bottom: 3vh;
    font: 400 .58vw/1 var(--mono);
    color: rgba(var(--paper-rgb), .33)
}

@keyframes rank-list-row-in {
    to { opacity: 1; transform: none }
}

@keyframes rank-list-row-muted-in {
    to { opacity: .38; transform: none }
}

/* Ranking mechanisms and remedies */
.ranking-mechanism-view {
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3vh
}

.ranking-cause-grid,
.ranking-fix-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4vw
}

.ranking-cause-grid article,
.ranking-fix-grid article {
    min-width: 0;
    padding: 2.2vh 1.35vw;
    border-top: 3px solid var(--signal);
    background: rgba(var(--paper-rgb), .035);
    opacity: 0;
    transform: translateY(2vh)
}

.ranking-mechanism-view.active article {
    animation: rank-stage-in .42s calc(.1s + var(--cause-index) * .1s) cubic-bezier(.22, .8, .3, 1) forwards
}

.ranking-cause-grid article>span,
.ranking-fix-grid article>span,
.ranking-current-path>span {
    font: 500 .65vw/1 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .48)
}

.ranking-cause-grid article>strong {
    display: block;
    margin: 3vh 0 .7vh;
    font: 600 4.3vw/.86 var(--serif-body-en);
    color: var(--signal)
}

.ranking-cause-grid article>strong span {
    font-size: 1.4vw;
    color: rgba(var(--paper-rgb), .48)
}

.ranking-cause-grid article>b {
    display: block;
    min-height: 4.2vh;
    font: 500 1.1vw/1.12 var(--serif-en)
}

.ranking-cause-grid article>p,
.ranking-fix-grid article>p {
    margin-top: 2vh;
    padding-top: 1.5vh;
    border-top: 1px solid rgba(var(--paper-rgb), .13);
    font: 400 .92vw/1.4 var(--serif-body-en);
    color: rgba(var(--paper-rgb), .62)
}

.ranking-rhetoric-bars {
    display: grid;
    gap: 1.3vh;
    margin: 3vh 0 2.7vh
}

.ranking-rhetoric-bars p {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .5vw;
    padding-bottom: 1vh
}

.ranking-rhetoric-bars i {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: var(--value);
    height: 3px;
    background: var(--signal)
}

.ranking-rhetoric-bars p:last-child i {
    background: #68c57d
}

.ranking-rhetoric-bars b {
    font: 600 1.8vw/1 var(--serif-body-en)
}

.ranking-rhetoric-bars small {
    font: 500 .58vw/1 var(--mono);
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .42)
}

.ranking-mechanism-claim {
    padding-top: 2.2vh;
    border-top: 1px solid rgba(var(--paper-rgb), .2);
    text-align: center;
    font: 400 1.55vw/1.25 var(--serif-en);
    color: rgba(var(--paper-rgb), .72)
}

.ranking-mechanism-claim strong {
    font-weight: 500;
    color: var(--paper)
}

.ranking-fix-view {
    grid-template-rows: auto 1fr auto
}

.ranking-current-path {
    display: grid;
    justify-items: center;
    gap: 1.2vh;
    padding-bottom: 2.5vh;
    border-bottom: 1px solid rgba(var(--paper-rgb), .18)
}

.ranking-current-path>div {
    display: flex;
    align-items: center;
    gap: 1.5vw;
    font: 500 2.35vw/1 var(--serif-en)
}

.ranking-current-path>div i {
    font: 300 1.8vw/1 var(--mono);
    color: var(--signal)
}

.ranking-current-path>div strong {
    color: var(--signal)
}

.ranking-current-path>small {
    font: 500 .65vw/1 var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(var(--paper-rgb), .43)
}

.ranking-fix-grid {
    align-items: stretch
}

.ranking-fix-grid article>span {
    color: var(--signal)
}

.ranking-fix-grid article>strong {
    display: block;
    margin-top: 2.3vh;
    font: 500 1.45vw/1.12 var(--serif-en)
}

@media (prefers-reduced-motion: reduce) {
    .rank-funnel-stage,
    .rank-funnel-loss,
    .rank-funnel-stage>div i,
    .rank-candidate-dots i,
    .rank-outcome-bar i,
    .rank-case-list li,
    .ranking-cause-grid article,
    .ranking-fix-grid article {
        opacity: 1;
        transform: none;
        animation: none !important
    }
}

@media (max-width:900px) {
    .rank-view-question { font-size: 2.8vw }
    .rank-funnel { grid-template-columns: minmax(0, 1fr) 4vw minmax(0, 1fr) 4vw minmax(0, 1fr) 4vw minmax(0, 1fr) }
    .rank-funnel-stage { padding-inline: 1vw }
    .rank-funnel-stage>span { font-size: 1vw }
    .rank-funnel-stage>strong { font-size: 4.8vw }
    .rank-funnel-stage>b { font-size: 1.35vw }
    .rank-funnel-loss span { display: none }
    .rank-presence-takeaway { font-size: 2vw }
    .rank-competition-head span,
    .rank-competition-head>small,
    .rank-noise-card>span,
    .rank-mrr-card>span { font-size: 1vw }
    .rank-candidate-counts small,
    .rank-mrr-card small,
    .rank-noise-card>small { font-size: .95vw }
    .rank-outcome-labels span { font-size: .85vw }
    .rank-rationale-caption { font-size: .9vw }
    .rank-case-nav i { font-size: .8vw }
    .rank-case-meta span,
    .rank-case-meta b { font-size: .95vw }
    .rank-case-layout { grid-template-columns: .72fr 1.5fr .72fr; gap: 1vw }
    .rank-case-list,
    .rank-argument-card { padding-inline: .9vw }
    .rank-case-list header span,
    .rank-argument-card>span { font-size: .85vw }
    .rank-case-list header b { font-size: 1.7vw }
    .rank-case-list li span { font-size: 1.12vw }
    .rank-argument-card blockquote { font-size: 1.9vw }
    .rank-argument-card>p { font-size: 1vw }
    .rank-reasoning-case>footer { font-size: 1.8vw }
    .ranking-cause-grid article,
    .ranking-fix-grid article { padding-inline: 1vw }
    .ranking-cause-grid article>span,
    .ranking-fix-grid article>span,
    .ranking-current-path>span { font-size: .9vw }
    .ranking-cause-grid article>b { font-size: 1.45vw }
    .ranking-cause-grid article>p,
    .ranking-fix-grid article>p { font-size: 1.2vw }
    .ranking-fix-grid article>strong { font-size: 1.8vw }
    .ranking-mechanism-claim { font-size: 2vw }
}

@media (max-aspect-ratio:4/3) {
    .ranking-traces-slide .content-title,
    .ranking-reasoning-slide .content-title,
    .ranking-mechanisms-slide .content-title { font-size: max(4vw, 2.4vh) }
    .rank-trace-view,
    .rank-reasoning-case,
    .ranking-mechanism-view { inset: 15vh 5vw 5vh }
    .rank-presence-view { gap: 2vh }
    .rank-view-question { font-size: max(3vw, 1.8vh) }
    .rank-funnel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vw }
    .rank-funnel-loss { display: none }
    .rank-funnel-stage { padding: 1.4vh 1vw }
    .rank-funnel-stage>span { min-height: 3.2vh; font-size: max(1.25vw, .9vh); line-height: 1.25 }
    .rank-funnel-stage>strong { font-size: max(4.8vw, 2.3vh) }
    .rank-funnel-stage>b { font-size: max(1.35vw, 1vh) }
    .rank-presence-takeaway { font-size: max(2.3vw, 1.35vh) }
    .rank-competition-view { gap: 1.4vh }
    .rank-competition-head strong { font-size: max(4vw, 2.3vh) }
    .rank-competition-head span,
    .rank-competition-head>small,
    .rank-noise-card>span,
    .rank-mrr-card>span { font-size: max(1.2vw, .85vh) }
    .rank-competition-grid { gap: 1.5vw }
    .rank-noise-card,
    .rank-mrr-card { padding: 1.5vh 1.2vw }
    .rank-candidate-counts b,
    .rank-mrr-card b { font-size: max(4vw, 2.2vh) }
    .rank-candidate-counts small,
    .rank-mrr-card small,
    .rank-noise-card>small { font-size: max(1.05vw, .72vh) }
    .rank-outcome-labels b { font-size: max(1.7vw, 1.1vh) }
    .rank-outcome-labels span { font-size: max(.9vw, .65vh) }
    .rank-rationale-caption { font-size: max(1vw, .72vh) }
    .rank-case-nav { top: 10.5vh; right: 5vw }
    .rank-case-nav i { width: max(3.2vw, 2.4vh); font-size: max(.8vw, .65vh) }
    .rank-case-layout { grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr .85fr; gap: 1vh 2vw }
    .rank-argument-card { grid-column: 1 / -1; grid-row: 1 }
    .rank-case-before { grid-column: 1; grid-row: 2 }
    .rank-case-after { grid-column: 2; grid-row: 2 }
    .rank-case-list,
    .rank-argument-card { padding: 1.2vh 1.5vw }
    .rank-case-list header { min-height: 6vh; padding-bottom: .8vh }
    .rank-case-list header span,
    .rank-argument-card>span { font-size: max(.95vw, .68vh) }
    .rank-case-list header b { font-size: max(1.8vw, 1.15vh) }
    .rank-case-list header small { font-size: max(.9vw, .65vh) }
    .rank-case-list ol { gap: .45vh; margin-top: .6vh }
    .rank-case-list li { min-height: 2.8vh; padding-block: .35vh }
    .rank-case-list li span { font-size: max(1.15vw, .78vh) }
    .rank-argument-card blockquote { max-width: none; font-size: max(2.4vw, 1.3vh) }
    .rank-argument-card>div strong { font-size: max(1.5vw, .95vh) }
    .rank-argument-card>p { font-size: max(1vw, .72vh) }
    .rank-reasoning-case>footer { font-size: max(1.8vw, 1.1vh) }
    .rank-rationale-scope { right: 5vw; bottom: 2vh; font-size: max(.8vw, .58vh) }
    .ranking-mechanism-view { gap: 1.5vh }
    .ranking-cause-grid,
    .ranking-fix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2vh 2vw }
    .ranking-cause-grid article,
    .ranking-fix-grid article { padding: 1.4vh 1.8vw }
    .ranking-cause-grid article>span,
    .ranking-fix-grid article>span,
    .ranking-current-path>span { font-size: max(.95vw, .68vh) }
    .ranking-cause-grid article>strong { margin: 1.2vh 0 .5vh; font-size: max(4vw, 2.1vh) }
    .ranking-cause-grid article>b { min-height: 0; font-size: max(1.5vw, .95vh) }
    .ranking-cause-grid article>p,
    .ranking-fix-grid article>p { margin-top: 1vh; padding-top: .8vh; font-size: max(1.2vw, .8vh) }
    .ranking-rhetoric-bars { margin: 1.2vh 0; gap: .7vh }
    .ranking-rhetoric-bars b { font-size: max(2vw, 1.2vh) }
    .ranking-current-path { gap: .7vh; padding-bottom: 1.2vh }
    .ranking-current-path>div { font-size: max(2.8vw, 1.7vh) }
    .ranking-current-path>small { font-size: max(.9vw, .65vh) }
    .ranking-fix-grid article>strong { margin-top: 1vh; font-size: max(1.8vw, 1.1vh) }
    .ranking-mechanism-claim { padding-top: 1.2vh; font-size: max(1.9vw, 1.15vh) }
}