.hp12c{--hp-corpo: #14161a;--hp-corpo-2: #23272d;--hp-tecla: #2c3036;--hp-tecla-borda: #0a0c0e;--hp-tecla-topo: #3b3f47;--hp-letra: #f3f4f6;--hp-laranja: #f2a93b;--hp-azul: #5ea0e3;--hp-visor: #c9d6c4;--hp-visor-tinta: #1c2618;width:100%;max-width:760px;margin:1.4rem auto;background:linear-gradient(180deg,var(--hp-corpo-2),var(--hp-corpo));border:1px solid #000;border-radius:16px;padding:1rem .9rem 1.1rem;box-shadow:0 10px 30px #00000059;user-select:none}.hp12c__brand{display:flex;align-items:baseline;justify-content:space-between;color:var(--hp-letra);font-weight:700;letter-spacing:.04em;padding:0 .2rem .6rem;font-size:.85rem}.hp12c__brand b{color:var(--hp-laranja)}.hp12c__brand span{font-weight:500;color:#9aa3ad;font-size:.72rem}.hp12c__display{background:var(--hp-visor);border-radius:6px;border:2px solid #0a0c0e;padding:.5rem .7rem;margin-bottom:.9rem;box-shadow:inset 0 2px 6px #00000059}.hp12c__x{font-family:DSEG7,ui-monospace,Courier New,monospace;font-variant-numeric:tabular-nums;font-weight:700;font-size:2rem;line-height:1.1;color:var(--hp-visor-tinta);text-align:right;letter-spacing:.04em;word-break:break-all;min-height:2.2rem}.hp12c__flags{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.35rem;font-size:.68rem;color:#45563d}.hp12c__flags .on{color:#b8540f;font-weight:700}.hp12c__mode{margin-left:auto;font-weight:700;letter-spacing:.05em}.hp12c__keys{display:grid;grid-template-columns:repeat(10,1fr);grid-auto-rows:1fr;gap:clamp(.16rem,.8vw,.4rem)}.hp-key{position:relative;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--hp-tecla-borda);border-radius:5px;background:linear-gradient(180deg,var(--hp-tecla-topo),var(--hp-tecla));color:var(--hp-letra);font:inherit;font-weight:700;min-height:clamp(40px,11vw,60px);padding:clamp(.16rem,.5vw,.35rem) 2px;cursor:pointer;text-align:center;box-shadow:0 2px 0 var(--hp-tecla-borda);transition:transform .04s ease,box-shadow .04s ease;overflow:hidden}.hp-key:active,.hp-key.is-press{transform:translateY(2px);box-shadow:0 0 0 var(--hp-tecla-borda)}.hp-key:focus-visible{outline:2px solid var(--hp-azul);outline-offset:1px}.hp-key .main{display:block;font-size:clamp(.62rem,2vw,.98rem);line-height:1}.hp-key .f,.hp-key .g{display:block;font-weight:700;font-size:clamp(.34rem,1.05vw,.52rem);line-height:1;min-height:.62em;letter-spacing:.01em}.hp-key .f{color:var(--hp-laranja)}.hp-key .g{color:var(--hp-azul);font-weight:600}.hp-key.fin{background:linear-gradient(180deg,#4b5563,#3a414c)}.hp-key.fin .main{color:#fff}.hp-key.op,.hp-key.num{background:linear-gradient(180deg,var(--hp-tecla-topo),var(--hp-tecla))}.hp-key.enter{background:linear-gradient(180deg,#3b3f47,#2c3036)}.hp-key.enter .main{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:-1px;line-height:.92;font-size:clamp(.6rem,1.7vw,.86rem);font-weight:800;margin:.15rem 0}.hp-key.fkey{background:linear-gradient(180deg,#f4b755,#e08e1c)}.hp-key.fkey .main{color:#1a1d22}.hp-key.gkey{background:linear-gradient(180deg,#74b3f0,#3d82cf)}.hp-key.gkey .main{color:#0d1830}.hp-key.armed{box-shadow:0 0 0 2px var(--hp-laranja)}.hp-key.armed.g{box-shadow:0 0 0 2px var(--hp-azul)}.hp-key.inert{cursor:default}.hp-key.inert .main{opacity:.82}.hp12c__hint{margin-top:.9rem;color:#9aa3ad;font-size:.8rem;line-height:1.4}.hp12c__hint b{color:var(--hp-laranja)}.hp12c__hint .f{color:var(--hp-laranja);font-weight:700}.hp12c__hint .g{color:var(--hp-azul)}.hp12c__unpin{position:absolute;top:.45rem;right:.5rem;width:1.6rem;height:1.6rem;display:none;place-items:center;border-radius:50%;border:1px solid var(--hp-tecla-borda);background:var(--hp-tecla);color:#9aa3ad;cursor:pointer;z-index:6}.hp12c__unpin svg{display:block;transition:transform .15s ease}.hp12c__unpin:hover{background:var(--hp-tecla-topo);color:var(--hp-letra)}.hp12c__unpin:focus-visible{outline:2px solid var(--hp-azul);outline-offset:1px}.hp12c:not(.is-unpinned) .hp12c__unpin{color:var(--hp-laranja)}.hp12c.is-unpinned .hp12c__unpin svg{transform:rotate(40deg)}@media(min-width:900px){.hp12c{position:sticky;top:calc(var(--header-h) + .6rem);z-index:5;padding:1rem 1.1rem 1.05rem}.hp12c.is-unpinned{position:relative;top:auto}.hp12c__unpin{display:grid}.hp12c__brand{padding-right:1.9rem}.hp12c__x{font-size:2.2rem}}@media(min-width:900px)and (prefers-reduced-motion:reduce){.hp12c{position:static}.hp12c__unpin{display:none}}