.typing-outline-guide{--outline-key:#fefefe;--outline-frame:#fafafa;--outline-line:#d5d6d5;--outline-ink:#737b78;--outline-green:#58bca4;width:100%;max-width:960px;margin-inline:auto;container-type:inline-size}.dark .typing-outline-guide{--outline-key:#242a29;--outline-frame:#1d2221;--outline-line:#4d5753;--outline-ink:#bfcac5;--outline-green:#278d62}.typing-outline-stage{isolation:isolate;width:100%;position:relative}.typing-outline-case{border:1px solid var(--outline-line);background:var(--outline-frame);border-radius:1.7cqw;width:94.4%;height:59.26%;position:absolute;top:5.85%;left:3.65%}.typing-outline-key{border:1px solid var(--outline-line);background:var(--outline-key);color:var(--outline-ink);border-radius:.65cqw;justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:2.8cqw;font-weight:400;line-height:1;display:flex;position:absolute}button.typing-outline-key{cursor:pointer}button.typing-outline-key:focus-visible{outline:3px solid var(--outline-green);outline-offset:2px}.typing-outline-legend{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.typing-outline-shifted{font-size:1.1cqw;position:absolute;top:.35cqw;left:.55cqw}.typing-outline-modifier{font-size:1.25cqw}.typing-outline-key-next{background:var(--outline-green);border-color:var(--outline-green);color:#123f30}.typing-outline-key-pressed{box-shadow:inset 0 0 0 2px var(--outline-green)}.typing-outline-key-wrong{box-shadow:inset 0 0 0 2px #ce534b}.typing-outline-key-insist{outline:2px solid var(--outline-green);outline-offset:2px}.typing-outline-home-bump{opacity:.5;background:currentColor;border-radius:2px;width:1.15cqw;height:.2cqw;position:absolute;bottom:.48cqw}.typing-outline-art{pointer-events:none;position:absolute;inset:0}.typing-outline-art canvas{width:100%;height:100%;display:block;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 0% 72%,#0000 96%);mask-image:linear-gradient(#000 0% 72%,#0000 96%)}.typing-outline-contact{aspect-ratio:1;background:#2299630e;border:1px solid #22996312;border-radius:50%;width:7.8%;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1.2cqw #22996305}.typing-outline-finger-name{color:#147247}.dark .typing-outline-finger-name{color:#77d5a6}@media (prefers-reduced-motion:reduce){.typing-outline-guide *{transition:none!important;animation:none!important}}.typing-outline-guide>p{text-align:center;margin:0;font-size:14px}.dark .typing-outline-key-next{color:#fff}.typing-outline-guide[data-compact=true] .typing-outline-viewport{aspect-ratio:1536/760;overflow:hidden}.typing-outline-guide[data-compact=true] canvas{-webkit-mask-image:linear-gradient(#000 0% 62%,#0000 79%);mask-image:linear-gradient(#000 0% 62%,#0000 79%)}.typing-outline-guide[data-interactive=true] .typing-outline-stage{min-width:768px;container-type:inline-size}.typing-outline-guide[data-interactive=true] .typing-outline-viewport{overflow-x:auto}.typing-outline-guide[data-interactive=true][data-compact=true] .typing-outline-viewport{aspect-ratio:auto;height:max(380px,49.48cqw)}.typing-outline-guide>.typing-outline-scroll-hint{margin-bottom:8px;font-size:12px;display:none}@container (width<=767px){.typing-outline-guide>.typing-outline-scroll-hint{display:block}}