.b3 .real { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ppi { position: relative; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.ppi i { position: absolute; left: 1px; top: 1px; width: 10px; height: 10px; border-radius: 5px; background: #B3121F;
  transition: left .35s cubic-bezier(.2, .7, .2, 1), top .35s cubic-bezier(.2, .7, .2, 1), width .35s cubic-bezier(.2, .7, .2, 1), height .35s cubic-bezier(.2, .7, .2, 1), border-radius .35s; }
.ppi.bars i { top: 0; width: 3.5px; height: 12px; border-radius: 1px; }
.ppi.bars i:first-child { left: 1.5px; }
.ppi.bars i:last-child { left: 7px; }
.tr .pp { text-decoration: none; }
.tr .pp .pw { text-decoration: underline; text-decoration-color: inherit; text-underline-offset: .25em; text-decoration-thickness: inherit; }
.roles .open b { display: inline-block; transform-origin: 0 100%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.roles .r .open b { transform-origin: 100% 100%; }
.roles .on .open b { transform: scale(1.03); }
.rdot { display: inline-block; width: .32em; height: .32em; margin-left: .35em; border-radius: 50%; background: #B3121F;
  vertical-align: .08em; transform: scale(0); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.roles .on .rdot { transform: scale(1); }
html.flooding #hi { background: var(--under) !important; position: relative; }
html.flooding #hi:not(.flooded) { color: var(--under-ink) !important; transition: color .3s; }
#hi .flood { position: absolute; inset: 0; background: var(--over); pointer-events: none; }
#hi > :not(.flood) { position: relative; }
.write .rl { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em; }
.write .r1, .write .r2 { display: block; white-space: nowrap; }
.write .r2 { position: absolute; left: 0; top: 0; }
.write .rl span span { display: inline-block; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; text-decoration-color: currentColor;
  transition: transform .42s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 12ms); }
.write .r2 span { transform: translateY(115%); }
.write.copied .r1 span { transform: translateY(-115%); }
.write.copied .r2 span { transform: none; }
.write { text-decoration: none; cursor: copy; transition: transform .14s; }
.write.press { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .write .rl span span { transition: none; } }
html.lensing { cursor: grabbing; }