:where(.page-tasten) .keys-page{width:min(1180px, 100% - var(--gutter-l) - var(--gutter-r));flex-direction:column;gap:1.75rem;margin:0 auto;padding-top:1rem;display:flex}:where(.page-tasten) .key:focus-visible,:where(.page-tasten) .legend button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}:where(.page-tasten) .legend{flex-wrap:wrap;gap:.5rem;display:flex}:where(.page-tasten) .legend button{font:1rem var(--old);color:var(--ink);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:.45rem;padding:.25rem .85rem;display:inline-flex}:where(.page-tasten) .legend button[aria-pressed=false]{opacity:.4}:where(.page-tasten) .dot{background:var(--c);border-radius:50%;width:.7rem;height:.7rem}:where(.page-tasten) .board-box{padding-bottom:.25rem;overflow-x:auto}:where(.page-tasten) .board-row{align-items:flex-start;gap:1rem;min-width:max-content;display:flex}:where(.page-tasten) .board{--u:3.5rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:.3rem;padding:.9rem;display:flex}:where(.page-tasten) .row{gap:.3rem;display:flex}:where(.page-tasten) .gap{width:calc(var(--u) * .5)}:where(.page-tasten) .key{--c:var(--cap-edge);width:calc(var(--u) * var(--w,1) + .3rem * (var(--w,1) - 1));height:var(--u);background:var(--cap-off);border:1px solid var(--cap-edge);color:var(--muted);font:.85rem/1 var(--body);text-align:left;cursor:default;border-bottom-width:3px;border-radius:.35rem;flex-direction:column;justify-content:space-between;padding:.3rem .35rem;display:flex;position:relative}:where(.page-tasten) .key .cap{font-size:.85rem}:where(.page-tasten) .key .what{color:var(--ink);overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;font-size:.7rem;line-height:1.1}:where(.page-tasten) .key.on{background:var(--cap);border-color:var(--c);color:var(--ink);cursor:pointer;box-shadow:inset 0 .22rem 0 var(--c)}:where(.page-tasten) .key.on .cap{font-weight:600}:where(.page-tasten) .key.dim{opacity:.3}:where(.page-tasten) .key.active{background:var(--c);color:var(--page)}:where(.page-tasten) .key.active .what{color:var(--page)}:where(.page-tasten) .key .hold{font-size:.6rem;position:absolute;top:.25rem;right:.3rem}:where(.page-tasten) .mouse{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;align-items:center;gap:.5rem;padding:.9rem;display:flex}:where(.page-tasten) .mouse-body{--u:3.5rem;grid-template-columns:1fr 1.7rem 1fr;gap:.25rem;width:8rem;display:grid}:where(.page-tasten) .mouse-body .key{border-radius:2.4rem .5rem .4rem .4rem;width:auto;height:5rem;padding:1.4rem .5rem .4rem}:where(.page-tasten) .mouse-body .key.right{border-radius:.5rem 2.4rem .4rem .4rem}:where(.page-tasten) .mouse-body .key.wheel{text-align:center;border-radius:1.2rem;align-self:start;align-items:center;height:3.6rem;margin-top:.4rem;padding:.5rem .25rem}:where(.page-tasten) .mouse-body .key.wheel .what{white-space:nowrap;font-size:.6rem}:where(.page-tasten) .mouse-body .palm{border:1px solid var(--cap-edge);background:var(--cap-off);border-radius:.4rem .4rem 3rem 3rem;grid-column:1/4;height:4.2rem}:where(.page-tasten) .mouse-label{font-family:var(--display);color:var(--muted);letter-spacing:.08em;font-size:.9rem}:where(.page-tasten) .detail{border-left:3px solid var(--detail-c,var(--line-gold));background:var(--panel);min-height:3.4rem;color:var(--muted);border-radius:0 12px 12px 0;padding:.6rem 1rem}:where(.page-tasten) .detail strong{color:var(--ink);font-weight:600}:where(.page-tasten) .groups{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:1.5rem 2rem;display:grid}:where(.page-tasten) .group h2{font-family:var(--display);letter-spacing:.04em;color:var(--c);align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:1.35rem;font-weight:400;display:flex}:where(.page-tasten) .group ul{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}:where(.page-tasten) .group li{border-top:1px dotted var(--line);grid-template-columns:8.5rem 1fr;gap:.75rem;min-width:0;padding:.45rem .3rem;display:grid}:where(.page-tasten) .group li.hl{background:color-mix(in srgb, var(--c) 16%, transparent)}:where(.page-tasten) kbd{font:600 .85rem var(--body);border:1px solid var(--cap-edge);background:var(--cap);color:var(--ink);white-space:nowrap;border-bottom-width:2px;border-radius:.3rem;place-self:start;padding:.05rem .45rem;display:inline-block}:where(.page-tasten) .group small{color:var(--muted);font-size:.95rem;display:block}:where(.page-tasten) .pad-box{border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.5rem}:where(.page-tasten) .pad-title{font-family:var(--display);letter-spacing:.04em;margin:0 0 .4rem;font-size:1.6rem;font-weight:400}:where(.page-tasten) .pad-intro{color:var(--muted);max-width:46rem;margin:0 0 1.2rem}:where(.page-tasten) .note{border-top:1px solid var(--line);color:var(--muted);gap:.4rem;max-width:46rem;padding-top:1rem;display:grid}:where(.page-tasten) .note b{color:var(--ink);font-weight:600}@media (width<=40rem){:where(.page-tasten) .board,:where(.page-tasten) .mouse-body{--u:3rem}}@media (prefers-reduced-motion:no-preference){:where(.page-tasten) .key,:where(.page-tasten) .legend button{transition:background-color .15s,opacity .15s}}