:root{--paper:#f3ead3;--ink:#2b2620;--warm:#e9b35a;--dim:#f3ead373;--shade:#14100cb8}html,body{height:100%;color:var(--paper);background:#1c1a17;margin:0;font-family:Trebuchet MS,Segoe UI,sans-serif;overflow:hidden}#bench{width:100vw;height:100vh;display:block;position:fixed;inset:0}.hud{pointer-events:none;font-size:clamp(11px,1.15vw,17px);position:fixed;inset:0}.steps{background:var(--shade);border-radius:.6em;gap:.35em;padding:.35em .5em;display:flex;position:absolute;top:1.2em;left:50%;transform:translate(-50%)}.step{color:var(--dim);white-space:nowrap;border-radius:.4em;align-items:center;gap:.35em;padding:.25em .6em;transition:background .4s,color .4s;display:flex}.step .n{border:1px solid;border-radius:50%;place-items:center;width:1.4em;height:1.4em;font-size:.8em;display:inline-grid}.step.done{color:var(--paper)}.step.done .n{color:#fff;background:#6f9a5a;border-color:#6f9a5a}.step.now{background:var(--warm);color:var(--ink);font-weight:700}.step.later{opacity:.55}.hud.intro .steps,.hud.intro .ticket,.hud.intro .tray-label,.hud.intro .bug{opacity:0}.ticket{background:var(--paper);width:15em;color:var(--ink);border-radius:.2em;padding:.7em .9em .8em;font-family:Georgia,serif;transition:opacity .6s;position:absolute;top:4.4em;right:1.4em;transform:rotate(1.2deg);box-shadow:0 .4em 1.2em #00000073}.ticket .head{letter-spacing:.15em;text-transform:uppercase;color:#8a3a2a;border-bottom:1px dashed #b9a98a;margin-bottom:.35em;padding-bottom:.25em;font-size:.8em}.ticket .row{margin:.2em 0;line-height:1.25}.ticket .row.robot .v{font-size:1.25em;font-weight:700}.ticket .k{color:#7a6a52;text-transform:uppercase;letter-spacing:.06em;font-size:.72em;display:block}.ticket .missing .v,.ticket .extra .v{color:#8a3a2a;font-weight:700}.tray-label{background:var(--shade);white-space:nowrap;border-radius:.3em;padding:.12em .5em;font-size:.85em;transition:opacity .6s;position:absolute;top:0;left:0}.tray-label.short{background:#8a3a2a}.bug{background:var(--shade);border-left:.3em solid var(--warm);flex-direction:column;padding:.4em .8em;transition:opacity .6s;display:flex;position:absolute;bottom:1.4em;left:1.4em}.bug .who{font-size:1.15em;font-weight:700}.bug .what{color:var(--dim);font-size:.8em}.caption{background:var(--shade);opacity:0;border-radius:.5em;max-width:60vw;padding:.45em .9em;font-size:1.15em;transition:opacity .4s,transform .4s;position:absolute;bottom:1.6em;left:50%;transform:translate(-50%)translateY(.6em)}.caption.on{opacity:1;transform:translate(-50%)translateY(0)}.caption .who{color:var(--warm);margin-right:.5em;font-weight:700}.votes{white-space:nowrap;opacity:0;background:#284637d9;border-radius:.4em;padding:.25em .7em;transition:opacity .4s;position:absolute;top:0;left:0}.votes.on{opacity:1}.title-seq{text-align:center;background:radial-gradient(#14100c59,#14100cd9);flex-direction:column;justify-content:center;align-items:center;display:none;position:absolute;inset:0}.title-seq.on{display:flex}.title-seq .big{color:var(--paper);text-shadow:0 .06em #8a3a2a,0 .2em .6em #0009;font-family:Georgia,serif;font-size:4.6em;font-weight:700}.title-seq .small{color:var(--warm);margin-top:.4em;font-size:1.5em;font-style:italic}.title-seq.beat .big{animation:.5s cubic-bezier(.2,1.6,.4,1) slam}.title-seq.beat .small{animation:.9s ease-out fadeup}@keyframes slam{0%{opacity:0;transform:scale(2.2)}to{opacity:1;transform:scale(1)}}@keyframes fadeup{0%{opacity:0;transform:translateY(.8em)}to{opacity:1;transform:none}}.end-card{background:var(--paper);color:var(--ink);text-align:center;opacity:0;border-radius:.3em;padding:1em 1.6em;font-family:Georgia,serif;transition:opacity .8s;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);box-shadow:0 .6em 2em #0000008c}.end-card.on{opacity:1}.end-card .big{font-size:1.8em;font-weight:700}.end-card .small{color:#7a4a2a;margin-top:.4em;font-style:italic}.tuning{color:var(--warm);background:#1c1a17;justify-content:center;align-items:center;font-family:Georgia,serif;font-size:2em;display:none;position:absolute;inset:0}.tuning.on{display:flex}@media (max-aspect-ratio:1){.steps .name{display:none}.step.now .name{display:inline}.ticket{width:12em;top:auto;bottom:5.5em}}
