/* ============================================================ Take a Chance on Me โ€” Games of Choice ยท ICSD 2026 Clean academic minimal. Safe = blue, Risky = gold. All tweakable state lives on (data-* + CSS vars). ============================================================ */ :root { /* ---- palette (overridable by Tweaks) ---- */ --safe: #2f6d9e; /* blue โ€” the safe game (matches result figures) */ --risky: #c4384e; /* red โ€” the risk game (matches result figures) */ --safe-tint: color-mix(in oklab, var(--safe) 14%, var(--paper)); --risky-tint: color-mix(in oklab, var(--risky) 16%, var(--paper)); /* ---- surfaces & ink (warm, low chroma) ---- */ --paper: #f5f3ec; --paper-2: #efebe1; --ink: #1c1b17; --ink-soft: #56524a; --ink-faint:#8b8579; --rule: rgba(28,27,23,0.14); --rule-strong: rgba(28,27,23,0.30); /* ---- type (overridable by Tweaks) ---- */ --font-display: "Spectral", Georgia, serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* ---- density (overridable) ---- */ --body-size: 33px; --lead-size: 41px; --gap: 1.0; } /* white background theme */ :root[data-bg="white"] { --paper: #ffffff; --paper-2: #f0f0f1; --rule: rgba(20,20,22,0.13); --rule-strong: rgba(20,20,22,0.28); } :root[data-density="compact"] { --body-size: 30px; --lead-size: 37px; --gap: 0.84; } :root[data-density="comfy"] { --body-size: 35px; --lead-size: 45px; --gap: 1.16; } /* ============================================================ Stage / deck ============================================================ */ deck-stage:not(:defined) { visibility: hidden; } deck-stage { background: #14130f; } /* every slide is a slotted section */ .slide { box-sizing: border-box; width: 1920px; height: 1080px; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--body-size); line-height: 1.5; padding: 96px 132px 92px; display: flex; flex-direction: column; position: relative; overflow: hidden; -webkit-font-smoothing: antialiased; } /* paper grain: a whisper of warmth, no gradients */ .slide::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--paper-2) 60%, transparent), transparent 60%); pointer-events: none; opacity: .5; } .slide > * { position: relative; z-index: 1; } /* ============================================================ Shared chrome ============================================================ */ .kicker { font-family: var(--font-mono); font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 18px; white-space: nowrap; } .kicker .glyph { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; } .kicker .glyph i { width: 9px; height: 9px; background: var(--ink-faint); border-radius: 1px; } .kicker .glyph i.s { background: var(--safe); } .kicker .glyph i.r { background: var(--risky); } .headline { font-family: var(--font-display); font-weight: 500; font-size: 76px; line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; margin: 0; } .headline em { font-style: italic; color: var(--ink-soft); } .headline .safe { color: var(--safe); font-style: normal; } .headline .risky { color: var(--risky); font-style: normal; } .lead { font-size: var(--lead-size); line-height: 1.34; letter-spacing: -0.01em; color: var(--ink); max-width: 30ch; text-wrap: pretty; } p.body { font-size: var(--body-size); line-height: 1.52; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; } p.body strong { color: var(--ink); font-weight: 600; } .safe-ink { color: var(--safe); font-weight: 600; } .risky-ink { color: var(--risky); font-weight: 600; } .hr { height: 1px; background: var(--rule); border: 0; width: 100%; } /* header block used on content slides */ .head { display: flex; flex-direction: column; gap: calc(20px * var(--gap)); } .head .topline { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; } /* footer meta */ .footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.06em; color: var(--ink-faint); padding-top: 26px; border-top: 1px solid var(--rule); } .footer > span { white-space: nowrap; } .footer .dot { width:7px; height:7px; border-radius:50%; background: var(--risky); display:inline-block; margin-right:12px; vertical-align: middle;} /* ============================================================ Title slide ============================================================ */ .title-slide { justify-content: center; padding: 110px 140px; } .title-slide .eyebrow { font-family: var(--font-mono); font-size: 24px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); display:flex; align-items:center; gap: 22px; } .bigmark { display:inline-grid; grid-template-columns: 1fr 1fr; gap:6px; } .bigmark i { width:20px; height:20px; border-radius:3px; background: var(--ink); } .bigmark i:nth-child(1){ background: var(--safe); } .bigmark i:nth-child(4){ background: var(--risky); } .bigmark i:nth-child(2){ background: color-mix(in oklab, var(--safe) 50%, var(--risky)); } .bigmark i:nth-child(3){ background: color-mix(in oklab, var(--safe) 50%, var(--risky)); } .title-main { font-family: var(--font-display); font-weight: 500; font-size: 132px; line-height: 0.98; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .title-main .sub { display:block; font-size: 64px; font-style: italic; color: var(--ink-soft); margin-top: 18px; letter-spacing: -0.01em; font-weight: 400;} .title-meta { display:flex; gap: 80px; flex-wrap: wrap; align-items:flex-end; } .title-meta .who { font-size: 34px; color: var(--ink); } .title-meta .who b { font-weight: 600; } .title-meta .who span { color: var(--ink-faint); } .title-meta .where { font-family: var(--font-mono); font-size: 22px; letter-spacing:0.05em; color: var(--ink-faint); line-height:1.7; } /* title treatment variants */ :root[data-title="centered"] .title-slide { text-align: center; align-items: center; } :root[data-title="centered"] .title-slide .eyebrow { justify-content: center; } :root[data-title="centered"] .title-slide .title-meta { justify-content: center; } :root[data-title="centered"] .title-slide .lead { margin-left:auto; margin-right:auto; } :root[data-title="matrix"] .title-slide { display:grid; grid-template-columns: 1fr auto; align-items:center; gap: 90px; } :root[data-title="matrix"] .title-figure { display:none; } :root[data-title="matrix"] .title-slide .title-figure { display:block; } .title-figure { display:none; } /* ============================================================ Section divider ============================================================ */ .divider { justify-content: center; background: var(--ink); color: var(--paper); } .divider::after { opacity: .12; background: radial-gradient(120% 90% at 0% 100%, color-mix(in oklab, var(--risky) 60%, transparent), transparent 60%); } .divider .idx { font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.3em; color: color-mix(in oklab, var(--risky) 80%, var(--paper)); } .divider .dtitle { font-family: var(--font-display); font-weight: 500; font-size: 116px; line-height: 1.0; letter-spacing: -0.02em; margin: 26px 0 0; max-width: 24ch; color: var(--paper); } .divider .dsub { margin-top: 40px; font-size: 36px; color: color-mix(in oklab, var(--paper) 72%, var(--ink)); max-width: 34ch; line-height:1.4; } .divider .bignum { position:absolute; right: 110px; bottom: -40px; font-family: var(--font-display); font-weight: 600; font-size: 560px; line-height: 1; color: rgba(255,255,255,0.06); z-index: 0; } /* ============================================================ Columns / lists ============================================================ */ .cols { display: grid; gap: 64px; margin-top: calc(48px * var(--gap)); } .cols.two { grid-template-columns: 1fr 1fr; } .cols.three { grid-template-columns: repeat(3,1fr); } .movelist { list-style: none; margin: calc(40px*var(--gap)) 0 0; padding: 0; display: grid; gap: calc(22px*var(--gap)); } .movelist li { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; font-size: var(--body-size); color: var(--ink); } .movelist li .mk { font-family: var(--font-mono); font-size: 22px; color: var(--ink-faint); padding-top: 8px; min-width: 2ch; } .movelist li b { font-weight: 600; } .movelist li .sub { display:block; color: var(--ink-soft); font-size: 26px; margin-top: 4px; } /* generic card */ .card { border: 1px solid var(--rule); border-radius: 4px; padding: 40px 42px; background: color-mix(in oklab, var(--paper) 84%, #fff); display:flex; flex-direction: column; gap: 16px; } .card .lab { font-family: var(--font-mono); font-size: 21px; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-faint); } .card h3 { font-family: var(--font-display); font-weight:500; font-size: 42px; margin: 0; line-height:1.1; } .card p { font-size: 28px; color: var(--ink-soft); margin: 0; line-height:1.46; } .card.safe { border-color: color-mix(in oklab, var(--safe) 40%, var(--rule)); background: var(--safe-tint); } .card.risky { border-color: color-mix(in oklab, var(--risky) 45%, var(--rule)); background: var(--risky-tint); } .card.safe .lab { color: var(--safe); } .card.risky .lab { color: var(--risky); } .card.safe h3 { color: color-mix(in oklab, var(--safe) 80%, var(--ink)); } .card.risky h3 { color: color-mix(in oklab, var(--risky) 70%, var(--ink)); } /* ============================================================ Statement slide ============================================================ */ .statement { justify-content: center; } .statement .quote { font-family: var(--font-display); font-weight: 500; font-size: 92px; line-height: 1.08; letter-spacing: -0.018em; max-width: 22ch; text-wrap: balance; margin: 0; } .statement .quote .accent { color: var(--risky); font-style: italic; } .statement .attrib { margin-top: 56px; font-family: var(--font-mono); font-size: 24px; letter-spacing: 0.08em; color: var(--ink-faint); } /* ============================================================ Payoff matrix ============================================================ */ .matrix-wrap { display:flex; align-items:center; gap: 26px; } .matrix { --cell: 188px; display: grid; grid-template-columns: 92px repeat(2, var(--cell)); grid-template-rows: 92px repeat(2, var(--cell)); font-family: var(--font-mono); position: relative; } /* colored box covering the whole 2x2 payoff block (header row/col = 92px) */ .matrix .matrixbox { position: absolute; top: 92px; left: 92px; width: calc(2 * var(--cell)); height: calc(2 * var(--cell)); border: 3px solid var(--game); border-radius: 5px; pointer-events: none; z-index: 3; } .matrix .corner { } .matrix .colhead, .matrix .rowhead { display:flex; align-items:center; justify-content:center; font-size: 26px; letter-spacing: 0.06em; color: var(--ink-soft); font-weight:500; } .matrix .colhead .tag, .matrix .rowhead .tag { font-size: 21px; color: var(--ink-faint); } .matrix .rowhead { writing-mode: vertical-rl; transform: rotate(180deg); } .matrix .cell { border: 1px solid var(--rule-strong); display:flex; flex-direction: column; align-items:center; justify-content:center; gap: 6px; background: color-mix(in oklab, var(--paper) 70%, #fff); } .matrix .cell .pair { font-size: 56px; font-weight: 500; color: var(--ink); letter-spacing: 0.02em; } .matrix .cell .pair .you { color: var(--ink); } .matrix .cell .pair .them { color: var(--ink-faint); } .matrix .cell .lbl { font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .matrix .cell.cc { background: color-mix(in oklab, var(--game) 13%, #fff); } .matrix .cell.dd { background: color-mix(in oklab, var(--paper-2) 80%, #fff); } .matrix .cell.mark { position: relative; } .matrix.safe-game { --game: var(--safe); } .matrix.risky-game { --game: var(--risky); } .matrix-title { font-family: var(--font-display); font-weight:500; font-size: 40px; margin:0 0 6px; } .matrix-title.safe { color: var(--safe); } .matrix-title.risky { color: var(--risky); } .matrix-cap { font-family: var(--font-mono); font-size: 20px; color: var(--ink-faint); letter-spacing:0.04em; margin-top:18px; line-height:1.6; } .payoff-key { display:grid; grid-template-columns: max-content 1fr; column-gap: 22px; row-gap: 18px; align-items: baseline; font-family: var(--font-mono); font-size: 23px; line-height: 1.4; color: var(--ink-soft); } .payoff-key .row { display: contents; } .payoff-key .sym { color: var(--ink); font-weight:500; white-space:nowrap; } /* ============================================================ Tradeoff bars / compare ============================================================ */ .compare { display:grid; grid-template-columns: 1fr 1fr; gap: 0; border:1px solid var(--rule); border-radius:4px; overflow:hidden; } .compare .col { padding: 44px 48px; display:flex; flex-direction:column; gap: 22px; } .compare .col.s { background: var(--safe-tint); border-right:1px solid var(--rule); } .compare .col.r { background: var(--risky-tint); } .compare .col .name { font-family: var(--font-mono); font-size: 22px; letter-spacing:0.14em; text-transform:uppercase; } .compare .col.s .name { color: var(--safe); } .compare .col.r .name { color: var(--risky); } .compare .col h3 { font-family: var(--font-display); font-weight:500; font-size: 46px; margin: 0; } .compare .col ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:16px; } .compare .col li { font-size: 28px; color: var(--ink-soft); display:grid; grid-template-columns:auto 1fr; gap:14px; } .compare .col li .ic { color: var(--ink-faint); font-family:var(--font-mono); } /* ============================================================ Mechanism / flow ============================================================ */ .flow { display:flex; align-items:stretch; gap: 0; margin-top: calc(40px*var(--gap)); } .flow .node { flex:1; border:1px solid var(--rule); border-radius:4px; padding: 34px 34px; display:flex; flex-direction:column; gap:12px; background: color-mix(in oklab, var(--paper) 84%, #fff); } .flow .node .step { font-family:var(--font-mono); font-size:20px; letter-spacing:0.12em; color: var(--ink-faint); text-transform:uppercase; } .flow .node h4 { font-family:var(--font-display); font-weight:500; font-size:34px; margin:0; line-height:1.12;} .flow .node p { font-size:24px; color:var(--ink-soft); margin:0; line-height:1.45; } .flow .arrow { display:flex; align-items:center; padding: 0 22px; color: var(--ink-faint); font-size: 40px; } .flow .node.safe { background: var(--safe-tint); border-color: color-mix(in oklab,var(--safe) 35%,var(--rule)); } .flow .node.risky { background: var(--risky-tint); border-color: color-mix(in oklab,var(--risky) 40%,var(--rule)); } /* example rows */ .examples { display:grid; gap: calc(26px*var(--gap)); margin-top: calc(40px*var(--gap)); } .examples .ex { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 40px; padding: 26px 0; border-top:1px solid var(--rule); } .examples .ex:last-child { border-bottom:1px solid var(--rule); } .examples .ex .from { font-size: 30px; color: var(--ink); } .examples .ex .to { font-size: 30px; color: var(--ink-soft); } .examples .ex .verb { font-family:var(--font-mono); font-size:20px; letter-spacing:0.1em; text-transform:uppercase; color: var(--risky); text-align:center; white-space:nowrap; } .examples .ex b { font-weight:600; } /* ============================================================ Conditions grid (experiment) ============================================================ */ .conditions { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: calc(42px*var(--gap)); } .cond { border:1px solid var(--rule); border-radius:4px; padding: 32px 34px; display:flex; flex-direction:column; gap:14px; background: color-mix(in oklab, var(--paper) 84%, #fff); } .cond .tag { font-family:var(--font-mono); font-size:20px; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-faint); } .cond h4 { font-family:var(--font-display); font-weight:500; font-size:34px; margin:0; } .cond p { font-size:25px; color: var(--ink-soft); margin:0; line-height:1.45; } .cond.full { grid-column: span 3; background: var(--paper-2); } .badge { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:19px; letter-spacing:0.08em; text-transform:uppercase; padding:7px 14px; border-radius:999px; border:1px solid var(--rule); color:var(--ink-soft); white-space:nowrap; } .badge.s { color: var(--safe); border-color: color-mix(in oklab,var(--safe) 40%,var(--rule)); background: var(--safe-tint);} .badge.r { color: var(--risky); border-color: color-mix(in oklab,var(--risky) 45%,var(--rule)); background: var(--risky-tint);} /* default-rule visual for voting treatments */ .vote-rules { display:grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: calc(40px*var(--gap)); } .vote-rule { border:1px solid var(--rule); border-radius:4px; padding: 40px 42px; display:flex; flex-direction:column; gap: 22px; } .vote-rule .name { font-family:var(--font-mono); font-size:22px; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-faint); } .vote-rule h3 { font-family:var(--font-display); font-weight:500; font-size:42px; margin:0; line-height:1.1;} .vote-rule .formula { font-family:var(--font-mono); font-size:26px; color:var(--ink); line-height:1.7; } .vote-rule .formula .s { color:var(--safe); font-weight:500;} .vote-rule .formula .r { color:var(--risky); font-weight:500;} .vote-rule.def-s { background: var(--safe-tint); border-color: color-mix(in oklab,var(--safe) 30%,var(--rule)); } .vote-rule.def-r { background: var(--risky-tint); border-color: color-mix(in oklab,var(--risky) 35%,var(--rule)); } /* ============================================================ Figure placeholder (results) ============================================================ */ .figure { flex:1; border: 1px solid var(--rule-strong); border-radius: 6px; background: repeating-linear-gradient(135deg, color-mix(in oklab,var(--paper-2) 70%,#fff) 0 14px, var(--paper) 14px 28px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 18px; position: relative; min-height: 0; } .figure .ph-lab { font-family:var(--font-mono); font-size: 26px; letter-spacing:0.1em; color: var(--ink-soft); background: var(--paper); padding: 10px 22px; border:1px solid var(--rule); border-radius:999px; white-space:nowrap; } .figure .ph-sub { font-family:var(--font-mono); font-size:20px; color: var(--ink-faint); max-width: 70%; text-align:center; line-height:1.5; } .results-grid { display:grid; grid-template-columns: 1.5fr 1fr; gap: 56px; flex:1; min-height:0; margin-top: calc(36px*var(--gap)); } .finding { display:flex; flex-direction:column; gap: 26px; justify-content:center; } .finding .big { font-family:var(--font-display); font-weight:500; font-size: 56px; line-height:1.08; letter-spacing:-0.01em; } .finding .big .accent { color: var(--risky); } .finding p { font-size: 28px; color: var(--ink-soft); margin:0; line-height:1.5; } .finding .pill { align-self:flex-start; } /* ============================================================ Takeaway / conclusion ============================================================ */ .takeaways { display:grid; gap: calc(24px*var(--gap)); margin-top: calc(32px*var(--gap)); max-width: 44ch;} .takeaways .t { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; } .takeaways .t .n { font-family:var(--font-mono); font-size:24px; color:var(--risky); padding-top:6px;} .takeaways .t p { margin:0; font-size: 31px; line-height:1.34; color:var(--ink); } .takeaways .t p b { font-weight:600; } .thanks { display:flex; flex-direction:column; justify-content:center; } .thanks .big { font-family:var(--font-display); font-weight:500; font-size: 104px; letter-spacing:-0.02em; margin:0; } .thanks .contact { margin-top: 50px; display:flex; gap:64px; font-family:var(--font-mono); font-size:24px; color: var(--ink-soft); } .thanks .contact b { color: var(--ink); font-weight:600; display:block; font-size:20px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px;} /* ============================================================ Figure slides (real result images) ============================================================ */ .takeaway { font-size: 30px; line-height: 1.4; color: var(--ink-soft); max-width: 64ch; text-wrap: pretty; margin-top: calc(14px*var(--gap)); } .takeaway b { color: var(--ink); font-weight: 600; } .takeaway .safe-ink { color: var(--safe); } .takeaway .risky-ink { color: var(--risky); } .figframe { flex: 1; min-height: 0; margin-top: calc(30px*var(--gap)); border: 1px solid var(--rule); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 26px; } .figframe img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .fig-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 58px; flex: 1; min-height: 0; margin-top: calc(26px*var(--gap)); align-items: stretch; } .fig-cols .figframe { margin-top: 0; height: 100%; } .fig-cols .col-text { display: flex; flex-direction: column; gap: calc(22px*var(--gap)); justify-content: center; } /* compact payoff relations line */ .relations { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: calc(30px*var(--gap)); font-family: var(--font-mono); font-size: 25px; color: var(--ink-soft); } .relations .r { display: flex; gap: 12px; align-items: baseline; } .relations .r b { color: var(--ink); font-weight: 500; } .relations .r .v-r { color: var(--risky); font-weight:500; } .relations .r .v-s { color: var(--safe); font-weight:500; } /* findings list (text-only result emphasis) */ .findings { display: grid; grid-template-columns: max-content 1fr; column-gap: 34px; row-gap: calc(26px*var(--gap)); margin-top: calc(30px*var(--gap)); align-items: center; } .findings .f { display: contents; } .findings .f .stat { font-family: var(--font-display); font-weight: 600; font-size: 52px; line-height: 1; text-align: right; } .findings .f .stat.s { color: var(--safe); } .findings .f .stat.r { color: var(--risky); } .findings .f .stat svg { width: 46px; height: 46px; display: inline-block; vertical-align: middle; } .findings .f p { margin: 0; font-size: 29px; line-height: 1.4; color: var(--ink-soft); } .findings .f p b { color: var(--ink); font-weight: 600; } /* utility */ .spacer { flex: 1; } /* ============================================================ Panel-zoom (tabbed figure: full + sub-panels) ============================================================ */ .panelzoom { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; } .fig-cols .panelzoom { height: 100%; } .pz-frame { flex: 1; min-height: 0; border: 1px solid var(--rule); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 22px; } .pz-frame img { max-width: 100%; max-height: 100%; object-fit: contain; } .pz-frame .pz-img { display: none; } .pz-frame .pz-img.active { display: block; } .pz-tabs { display: flex; gap: 10px; flex-wrap: wrap; } .pz-tabs .pz-tab { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.03em; padding: 9px 17px; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); cursor: pointer; transition: all .15s; user-select: none; } .pz-tabs .pz-tab:hover { border-color: var(--ink); color: var(--ink); } .pz-tabs .pz-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); } .pz-hint { font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); letter-spacing: 0.04em; } /* ============================================================ Sample slide ============================================================ */ .sample-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(44px*var(--gap)) 70px; margin-top: calc(46px*var(--gap)); } .sample-stats .s { display: flex; flex-direction: column; gap: 10px; } .sample-stats .s .num { font-family: var(--font-display); font-weight: 600; font-size: 76px; line-height: 0.95; letter-spacing: -0.01em; } .sample-stats .s .num.s { color: var(--safe); } .sample-stats .s .num.r { color: var(--risky); } .sample-stats .s .lab { font-family: var(--font-mono); font-size: 21px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .sample-stats .s .sub { font-size: 25px; color: var(--ink-soft); } .cond-mini { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: calc(40px*var(--gap)); } .cond-mini .cond-row { display: flex; flex-wrap: wrap; gap: 12px; } .cond-mini .c { display: inline-flex; align-items: baseline; gap: 11px; white-space: nowrap; font-family: var(--font-mono); font-size: 22px; padding: 9px 18px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); } .cond-mini .c b { color: var(--ink); font-weight: 500; white-space: nowrap; } .cond-mini .c.s { border-color: color-mix(in oklab, var(--safe) 35%, var(--rule)); background: var(--safe-tint); } .cond-mini .c.r { border-color: color-mix(in oklab, var(--risky) 38%, var(--rule)); background: var(--risky-tint); } .mt-s { margin-top: calc(24px*var(--gap)); } .mt-m { margin-top: calc(40px*var(--gap)); } .maxw-wide { max-width: 52ch; }