/* The manuscript. Each word is a token span: its ink is the model's confidence, the red gloss
   above it is the runner-up it almost wrote, a red point marks a word that was not its
   favourite. The left-margin trace is the same data, read top to bottom. */
.ms {
    font: 400 clamp(1.32rem, 0.95rem + 1.15vw, 2rem)/1.98 var(--serif);
    color: var(--ink);
    max-width: 34em;
    min-height: 4.5em;
    outline: none;
    hyphens: none;
}
.ms:focus-visible { box-shadow: -1.2rem 0 0 -1.1rem var(--rubric); }
.tok { position: relative; border-radius: 2px; transition: background-color 0.15s, color 0.3s; cursor: pointer; }
.tok { --inkc: var(--ink); }
[data-branch='1'] { --inkc: var(--b1); }
[data-branch='2'] { --inkc: var(--b2); }
[data-branch='3'] { --inkc: var(--b3); }
[data-branch='4'] { --inkc: var(--b4); }
.tok.c4 { color: var(--inkc); }
.tok.c3 { color: color-mix(in srgb, var(--inkc) 90%, var(--paper)); }
.tok.c2 { color: color-mix(in srgb, var(--inkc) 78%, var(--paper)); }
.tok.c1 { color: color-mix(in srgb, var(--inkc) 70%, var(--paper)); }
.tok.c0 { color: color-mix(in srgb, var(--inkc) 64%, var(--paper)); }
.tok-ws { color: var(--rubric); opacity: 0.5; font-size: 0.8em; }
.pbreak { display: block; height: 0.6em; }

.gl {
    position: absolute;
    left: 50%;
    bottom: 94%;
    transform: translateX(-50%);
    font: italic 400 0.46em/1 var(--serif);
    color: var(--rubric);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    transition: opacity 0.2s, transform 0.2s;
}
.gl-hi { opacity: 0.95; }
.gl-was { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--rubric); opacity: 0.95; }
.gl-off { opacity: 0; }
.tok:hover .gl, .tok.is-open .gl, .tok.is-lit .gl { opacity: 1; transform: translateX(-50%) translateY(-0.12em); }
.tok.odds::after { content: ''; position: absolute; left: 50%; bottom: 0.02em; width: 0.15em; height: 0.15em; margin-left: -0.075em; border-radius: 50%; background: var(--rubric); }

.tok:hover, .tok.is-lit, .tok.is-key { background: var(--rubric-soft); }
.tok.is-key { box-shadow: 0 0.08em 0 0 var(--rubric); }
.tok.is-open { background: var(--ink); color: var(--paper-2); }
.tok.forked { box-shadow: 0 0.1em 0 0 currentColor; }
.tok.is-open[data-branch] { color: var(--paper-2); }
.tok.is-open .gl { color: var(--rubric); }

.tok.first { color: var(--rubric); }

.fresh { animation: ink-in 0.45s ease-out both; }
@keyframes ink-in { from { opacity: 0; filter: blur(3px); color: var(--rubric); } }
.dissolve { display: inline-block; animation: dissolve 0.62s cubic-bezier(0.5, 0, 0.9, 0.5) var(--d, 0ms) forwards; pointer-events: none; }
.dissolve .gl, .dissolve::after { display: none; }
@keyframes dissolve { to { opacity: 0; transform: translateY(0.9em) rotate(4deg); filter: blur(5px); } }

.is-replaying .ms::after, .is-writing .ms::after {
    content: '';
    display: inline-block;
    width: 0.07em;
    height: 0.95em;
    margin-left: 0.08em;
    vertical-align: -0.12em;
    background: var(--rubric);
    animation: nib 0.9s steps(2) infinite;
}
@keyframes nib { 50% { opacity: 0; } }

.seismo { width: 100%; display: block; overflow: visible; cursor: crosshair; }
.sz-base { stroke: var(--rule); stroke-width: 1; }
.sz-tick { stroke: var(--rule); stroke-width: 1; }
.sz-trace { fill: none; stroke: var(--ink-2); stroke-width: 1.1; stroke-linejoin: round; }
.sz-peak { fill: var(--rubric); }
.sz-nib { fill: var(--rubric); opacity: 0; }
.is-replaying .sz-nib, .is-writing .sz-nib { opacity: 1; }

.ms-wrap { position: relative; }
.coach {
    grid-column: 2 / -1;
    position: relative;
    justify-self: start;
    max-width: 30rem;
    margin: 0.9rem 0 0.2rem;
    padding: 0.6rem 0.85rem;
    background: var(--ink);
    color: var(--paper-2);
    font: italic 400 1.02rem/1.35 var(--serif);
    border-radius: 2px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.4s, transform 0.4s, height 0.45s, margin 0.45s, padding 0.45s;
    overflow: hidden;
}
.coach .mono { font-style: normal; color: #ff9a7a; text-transform: uppercase; display: block; margin-bottom: 0.2rem; }
.coach::after { content: ''; position: absolute; left: 1rem; bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.coach.is-in { opacity: 1; transform: none; overflow: visible; }
.coach.is-gone { opacity: 0; height: 0 !important; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.var-label { margin: 0 0 0.4rem; color: var(--rubric); text-transform: uppercase; }
.var-hint { margin: 0; color: var(--ink-3); max-width: 38em; }
.stemma { width: 220px; max-width: 100%; display: block; margin-bottom: 0.4rem; }
.st-line { fill: none; stroke-width: 1.5; opacity: 0.45; }
.st-line.is-current { opacity: 1; stroke-width: 2.2; }
.st-line.b0 { stroke: var(--b0); } .st-line.b1 { stroke: var(--b1); } .st-line.b2 { stroke: var(--b2); } .st-line.b3 { stroke: var(--b3); } .st-line.b4 { stroke: var(--b4); }
.var-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.var-btn { font: inherit; display: inline-flex; gap: 0.5rem; align-items: baseline; padding: 0.35rem 0.6rem; border: 1px solid var(--rule); border-radius: 2px; background: transparent; color: var(--ink-2); cursor: pointer; }
.var-btn b { font: italic 400 1.05rem/1 var(--serif); }
.var-btn.b1 b { color: var(--b1); } .var-btn.b2 b { color: var(--b2); } .var-btn.b3 b { color: var(--b3); } .var-btn.b4 b { color: var(--b4); }
.var-btn:hover { border-color: var(--ink); }
.var-btn.is-current { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    .fresh, .dissolve { animation: none; }
    .is-replaying .ms::after, .is-writing .ms::after { animation: none; }
}