.titrate{position:relative;z-index:10;padding:1.5rem var(--gutter) 3rem;display:grid;gap:1.4rem;max-width:64rem;--box: clamp(2.5rem, 9vw, 3.3rem)}.titrate__title{font-size:clamp(2.2rem,5vw,3.6rem);line-height:.95}.titrate__lede{max-width:var(--measure);margin-top:.6rem}.titrate__game{display:grid;grid-template-columns:minmax(0,26rem) minmax(14rem,22rem);gap:.9rem var(--gutter);align-items:start}.titrate__hud{grid-column:1 / -1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1.2rem;font-size:.95rem;padding-bottom:.4rem;border-bottom:var(--rule) solid var(--ink)}.titrate__which{display:flex;flex-wrap:wrap;gap:.2rem .8rem}.titrate__date{color:var(--muted)}.titrate__meters{display:flex;align-items:baseline;gap:1.2rem}.titrate__streak{color:var(--ink-soft)}.titrate__timer{display:inline-block;padding:.2rem .6rem .15rem;border:var(--rule) solid var(--ink);border-radius:999px;font-variant-numeric:tabular-nums;line-height:1}.titrate.is-solved .titrate__timer{background:var(--blue-soft)}.titrate__board{display:grid;gap:.7rem;min-width:0}.titrate__subtitle{font-size:.95rem;color:var(--ink-soft)}.titrate__ladder{position:relative;display:grid;gap:.4rem;padding:.6rem 0;user-select:none;-webkit-user-select:none;touch-action:manipulation}.titrate__ladder:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.titrate__ladder:before,.titrate__ladder:after{content:"";position:absolute;top:0;bottom:0;width:var(--rule);background:var(--ink);left:2.7rem;pointer-events:none}.titrate__ladder:after{left:calc(3.2rem + 4 * var(--box) + 3 * .3rem + .5rem - var(--rule))}.titrate__row{display:grid;grid-template-columns:3.2rem auto;align-items:center;width:max-content}.titrate__rowlabel{font-size:.8rem;color:var(--muted);padding-right:.9rem;text-align:right;line-height:1}.titrate__row--rung .titrate__rowlabel{color:var(--ink-soft)}.titrate__boxes{display:flex;gap:.3rem}.titrate__box{display:grid;place-items:center;width:var(--box);height:var(--box);border:var(--rule) solid var(--ink);background:var(--paper);font-family:var(--font-body);font-weight:500;font-size:calc(var(--box) * .5);line-height:1;color:var(--ink);transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}.titrate__row--start .titrate__box{background:var(--paper-deep)}.titrate__row--end .titrate__box{background:var(--ink);color:var(--paper)}.titrate__box.is-match{background:var(--blue);border-color:var(--blue);color:var(--paper)}.titrate__row--start .titrate__box.is-match{background:var(--blue-soft);color:var(--blue);border-color:var(--ink)}.titrate__row--rung.is-close .titrate__box{box-shadow:0 0 0 3px var(--orange-soft),0 0 14px 2px var(--orange-soft)}.titrate__row--rung.is-end .titrate__box,.titrate.is-solved .titrate__row--rung .titrate__box{box-shadow:none}.titrate__row--typing .titrate__box{border-style:dashed;border-color:var(--ink-soft)}.titrate__row--typing .titrate__box.is-filled{border-style:solid;border-color:var(--ink)}.titrate__row--typing .titrate__box.is-cursor{border-style:solid;border-color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange);background:var(--orange-soft)}.titrate__row--typing .titrate__rowlabel:before{content:"›";color:var(--orange);font-size:1.2rem}@keyframes titrate-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(4px)}30%,50%,70%{transform:translate(-6px)}40%,60%{transform:translate(6px)}}.titrate__row--typing.is-shake{animation:titrate-shake .42s var(--ease) both}@keyframes titrate-wave{0%{transform:none}35%{transform:translateY(-14%);background:var(--orange);border-color:var(--orange);color:var(--ink)}to{transform:none}}.titrate__ladder.is-wave .titrate__row--rung .titrate__box{animation:titrate-wave .64s var(--ease) both;animation-delay:calc(var(--i, 0) * 60ms)}.titrate__ladder.is-wave .titrate__row--rung:nth-child(2) .titrate__box{--i: 1}.titrate__ladder.is-wave .titrate__row--rung:nth-child(3) .titrate__box{--i: 2}.titrate__ladder.is-wave .titrate__row--rung:nth-child(4) .titrate__box{--i: 3}.titrate__ladder.is-wave .titrate__row--rung:nth-child(5) .titrate__box{--i: 4}.titrate__ladder.is-wave .titrate__row--rung:nth-child(6) .titrate__box{--i: 5}.titrate__ladder.is-wave .titrate__row--rung:nth-child(7) .titrate__box{--i: 6}.titrate__ladder.is-wave .titrate__row--rung:nth-child(8) .titrate__box{--i: 7}.titrate__ladder.is-wave .titrate__row--rung:nth-child(9) .titrate__box{--i: 8}.titrate__ladder.is-wave .titrate__row--rung:nth-child(n+10) .titrate__box{--i: 9}.titrate__status{min-height:1.4em;font-size:.95rem;color:var(--ink-soft)}.titrate__status:not(:empty){color:#b83800}.titrate__keys{display:grid;gap:.35rem;padding:.45rem 0 .5rem;background:var(--paper)}.titrate__keys[hidden]{display:none}.titrate__keyrow{display:flex;justify-content:center;gap:.3rem}.titrate__keyrow:nth-child(2){padding:0 4.5%}.titrate__key{flex:1 1 0;min-width:0;height:3.1rem;padding:0;border:0;border-radius:.35rem;background:var(--paper-deep);box-shadow:0 2px #12121259;font-family:var(--font-body);font-size:1.2rem;font-weight:500;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.titrate__key:active{background:var(--orange-soft);transform:translateY(1px);box-shadow:0 1px #12121259}.titrate__key--wide{flex:1.5 1 0;font-size:.8rem;font-family:var(--font-display)}.titrate__key--backspace{font-family:var(--font-body);font-size:1.3rem}.titrate__controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem}.titrate__controls button,.titrate__controls a,.titrate__button{padding:.45rem .85rem .4rem;border:var(--rule) solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;text-decoration:none;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent}.titrate__controls button[hidden]{display:none}.titrate__controls button:hover:not(:disabled),.titrate__controls a:hover,.titrate__controls button:focus-visible,.titrate__controls a:focus-visible,.titrate__button:hover,.titrate__button:focus-visible{background:var(--ink);color:var(--paper);outline:none}.titrate__controls button:disabled{cursor:default;opacity:.45}.titrate__controls [aria-expanded=true]{background:var(--orange);color:var(--ink)}.titrate__done{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title button" "line button" "path button";align-items:center;column-gap:1rem;row-gap:.15rem;padding:.8rem 1rem;border:var(--rule) solid var(--ink);background:var(--orange-soft)}.titrate__done[hidden]{display:none}.titrate__done-title{grid-area:title;font-size:1.3rem;line-height:1.1}.titrate__done-line{grid-area:line;font-size:.95rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}.titrate__done-path{grid-area:path;font-size:.85rem;color:var(--ink-soft)}.titrate__done-path[hidden]{display:none}.titrate__done .titrate__button{grid-area:button;font-size:.85rem;white-space:nowrap}.titrate__side{padding-top:.2rem;font-size:.92rem;color:var(--ink-soft)}.titrate__side h2{margin:0 0 .4rem;padding-bottom:.3rem;border-bottom:var(--rule) solid var(--ink);font-size:.95rem;font-weight:400;color:var(--ink)}.titrate__side ul{margin:0;padding-left:1.1rem;display:grid;gap:.4rem}.titrate__side kbd,.titrate__notes kbd{font-family:var(--font-display);font-size:.85em;padding:0 .3em;border:1px solid var(--line);border-radius:.25rem}.titrate__archive{display:grid;gap:.6rem;padding:1rem 1.2rem 1.2rem;border:var(--rule) solid var(--ink);background:var(--paper-deep)}.titrate__archive[hidden]{display:none}.titrate__archive h2{margin:0;font-size:1.1rem;font-weight:400}.titrate__archive-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.3rem 1rem}.titrate__archive-row{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;grid-template-areas:"id date state" "id title state";column-gap:.6rem;align-items:center;width:100%;padding:.4rem .5rem;border:0;border-radius:.3rem;background:transparent;font:inherit;font-size:.92rem;line-height:1.25;text-align:left;color:var(--ink);cursor:pointer}.titrate__archive-row:hover:not(:disabled),.titrate__archive-row:focus-visible{background:var(--paper);outline:none}.titrate__archive-row:disabled{cursor:default;color:var(--muted)}.titrate__archive-row.is-current{box-shadow:inset 4px 0 0 var(--orange)}.titrate__archive-row b{grid-area:id;font-family:var(--font-display);font-weight:400}.titrate__archive-row span{grid-area:date}.titrate__archive-row i{grid-area:title;font-style:normal;color:var(--ink-soft);font-size:.85rem}.titrate__archive-row i:empty{display:none}.titrate__archive-row em{grid-area:state;font-style:normal;color:var(--ink-soft);font-size:.85rem;font-variant-numeric:tabular-nums}.titrate__archive-row:disabled em{color:var(--muted)}.titrate__archive-row.is-solved em{color:var(--blue)}.titrate__notes{max-width:var(--measure);display:grid;gap:.5rem;color:var(--ink-soft);font-size:.95rem}@media(max-width:760px){.titrate{padding-top:1rem;gap:1rem}.titrate__lede{font-size:.92rem;line-height:1.4;margin-top:.3rem}.titrate__game{grid-template-columns:1fr}.titrate__side{display:none}.titrate__board{gap:.5rem}.titrate__ladder{gap:.3rem;padding:.4rem 0;justify-content:center}.titrate__ladder:before,.titrate__ladder:after{display:none}.titrate__status{min-height:1.2em;font-size:.9rem}.titrate.is-solved .titrate__keys{display:none}.titrate.has-keyboard .titrate__keys{position:sticky;bottom:0;z-index:4;margin:0 calc(-1 * var(--gutter));padding:.4rem .35rem .6rem;border-top:1px solid var(--line)}.titrate.has-keyboard .titrate__row--typing{scroll-margin-bottom:15rem}.titrate__keyrow:nth-child(2){padding:0 4%}.titrate__key{height:2.9rem;font-size:1.15rem}.titrate__controls button,.titrate__controls a,.titrate__button{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .95rem}.titrate__controls button[hidden]{display:none}.titrate__done{grid-template-columns:1fr;grid-template-areas:"title" "line" "path" "button";justify-items:start;row-gap:.3rem}.titrate__archive{padding:.8rem}.titrate__archive-list{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.titrate__box{transition:none}.titrate__row--typing.is-shake,.titrate__ladder.is-wave .titrate__row--rung .titrate__box{animation:none}}