.gumbel-sampling { margin: 2rem 0; --gs-teal: var(--primary); }
.gs-controls { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.gs-controls label { flex: 1; max-width: 360px; font-size: .9rem; }
.gs-controls output { float: right; font-variant-numeric: tabular-nums; }
.gs-controls input { display: block; width: 100%; accent-color: var(--gs-teal); }
.gs-controls button { font: inherit; font-size: .85rem; background: var(--gs-teal); color: white; border: 0; border-radius: 5px; padding: .5rem .8rem; cursor: pointer; }
.gumbel-sampling :focus-visible { outline: 3px solid var(--gs-teal); outline-offset: 3px; }
.gs-chart { margin-top: 0; }
.gs-legend { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.2rem; font-size: .8rem; color: var(--bs-secondary-color); }
.gs-label { margin: .8rem 0 0; font-size: .85rem; text-align: center; }
.gs-chart svg { width: 100%; display: block; }
.gs-chart text { font-family: inherit; font-size: 13px; fill: var(--bs-body-color); }
.gs-chart .gs-token, .gs-token { font-family: "Latin Modern Roman", Georgia, serif; font-style: italic; }
.gs-track { stroke: var(--bs-border-color); stroke-width: 1; }
.gs-shift { stroke: var(--bs-secondary-color); stroke-width: 3; }
.gs-original { fill: var(--bs-body-bg); stroke: var(--bs-secondary-color); stroke-width: 1.5; }
.gs-final { fill: var(--bs-secondary-color); }
.gs-shift.gs-winning { stroke: var(--gs-teal); }
.gs-final.gs-winning { fill: var(--gs-teal); }
.gs-probabilities { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: .8rem; }
.gs-probabilities > div { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem; font-size: .85rem; }
.gs-bar { height: 8px; background: color-mix(in srgb, var(--bs-body-color) 8%, transparent); border-radius: 4px; }
.gs-bar i { display: block; height: 100%; background: var(--gs-teal); border-radius: 4px; }
.gs-probabilities output { font-variant-numeric: tabular-nums; }
body.quarto-dark .gumbel-sampling { --gs-teal: #58b7b0; }
body.quarto-dark .gs-controls button { color: #102e2b; }
@media (max-width: 500px) { .gs-probabilities { gap: .7rem; } .gs-probabilities > div { grid-template-columns: auto 1fr; } .gs-bar { grid-row: 2; grid-column: 1/-1; } .gs-probabilities output { text-align: right; } }