/* HP 32SII / Pioneer materials with the genuine SwissMicros R47 key arrangement.
   Legends sit on the brown faceplate above black keycaps, as on the reference. */
:root{
  color-scheme:dark;
  --case:#51433d; --case-light:#60514a; --case-dark:#372f2c;
  --bezel:#352f2e; --cap:#171719; --cap-top:#333033;
  --ink:#e8e4dd; --f:#efa46a; --g:#98c9e1; --lcd:#c7d7ba;
}
*{box-sizing:border-box}
html{background:#211d1d;overscroll-behavior:none}
body{margin:0;font-family:Arial,Helvetica,system-ui,sans-serif;background:#211d1d;color:#efeae2}
.shell{
  max-width:470px;min-height:100dvh;margin:0 auto;
  padding:env(safe-area-inset-top) 11px calc(env(safe-area-inset-bottom) + 8px);
  background:
    linear-gradient(90deg,#ffffff0a 0,transparent 3%,transparent 96%,#08040435 100%),
    linear-gradient(155deg,#60534d 0%,#4e433e 43%,#413834 100%);
  border-left:1px solid #75635955;border-right:1px solid #140f0f;
  box-shadow:inset 2px 2px 2px #c2a48a19,inset -4px 0 8px #1c1515aa;
}
.branding{height:52px;display:flex;align-items:center;gap:14px;padding:2px 9px;color:#ede8e1}
.hp-mark{
  font:italic 750 25px Arial,Helvetica,sans-serif;
  border:2px solid #ded9d1;border-radius:52%;padding:1px 9px;
  letter-spacing:-.035em;transform:skew(-8deg);
  text-shadow:0 1px #100d0c;
}
.brand-caption{font:bold 14px Arial,Helvetica,sans-serif;letter-spacing:.16em;text-shadow:0 1px #1a1111}
.brand-caption small{display:block;margin-top:3px;font-size:10px;font-weight:400;letter-spacing:.095em;color:#ddd1c6}
.lcd-frame{
  border:5px solid #2b2524;border-radius:10px;background:#19191a;padding:6px;
  box-shadow:0 2px 0 #8e7f73,inset 0 2px 6px #000b,0 7px 11px #110c0c80;
}
canvas#lcd{
  width:100%;height:auto;display:block;aspect-ratio:5/3;
  image-rendering:pixelated;background:var(--lcd);border-radius:2px;
  box-shadow:inset 0 0 4px #11231d;
}
.softkeys{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;margin:9px 3px 9px;
  border-top:1px solid #a28e8055;padding-top:8px;
}
.softkeys button{
  height:26px;min-height:26px;background:linear-gradient(#282629,#121316);
  color:#eee9e0;border:1px solid #494344;border-bottom:4px solid #080709;
  border-radius:5px;box-shadow:0 1px 0 #a48c8069;
  font:bold 11px Arial,Helvetica,sans-serif;
}
.keyboard{display:flex;flex-direction:column;gap:4px}
.keyrow{display:grid;gap:5px}
.keyrow.six,.keyrow.enter-row{grid-template-columns:repeat(6,minmax(0,1fr))}
.keyrow.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.keyrow.enter-row .key.enter{grid-column:span 2}
.key{
  position:relative;min-width:0;min-height:52px;height:clamp(52px,6.4dvh,58px);
  padding:0;overflow:visible;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  border:0;background:transparent;color:var(--ink);font-family:Arial,Helvetica,sans-serif;
}
.key::before{
  content:"";position:absolute;inset:17px 2px 2px;
  border-radius:5px 5px 7px 7px;
  border:1px solid #4f4849;border-bottom:4px solid #090809;
  background:linear-gradient(180deg,#3d393a 0%,#29272a 23%,#181719 75%,#141314 100%);
  box-shadow:0 2px 1px #a88c7b40,0 3px 3px #130d0eaa,inset 0 2px 2px #a4a2a017;
}
.key .legend{position:absolute;display:block;line-height:1;white-space:nowrap;overflow:visible}
.key .secondary,.key .tertiary{
  top:3px;font-size:clamp(7px,1.92vw,9px);font-weight:800;
  letter-spacing:-.04em;text-shadow:0 1px 0 #2b1b19;
}
.key .secondary{left:3px;color:var(--f);text-align:left}
.key .tertiary{right:3px;color:var(--g);text-align:right}
.key .primary{
  left:2px;right:2px;top:25px;text-align:center;color:#f3efe7;
  font-size:clamp(13px,3.6vw,18px);font-weight:750;letter-spacing:-.025em;
  text-shadow:0 1px 2px #070607;
}
.key.enter .primary{font-size:clamp(13px,3.7vw,17px);letter-spacing:.03em}
.key.enter::before{background:linear-gradient(#383539,#141315)}
.key.shift-f .primary{color:#efa66e;font-size:19px;font-style:italic}
.key.shift-g .primary{color:#9acbe6;font-size:19px;font-style:italic}
.key.operator .primary{font-size:clamp(17px,4.2vw,21px)}
.key:active::before,.key.is-down::before{
  transform:translateY(2px);border-bottom-width:2px;
  filter:brightness(.78);
}
.key:focus-visible{outline:2px solid #a4d4ed;outline-offset:0;border-radius:5px}
.softkeys button:active,.softkeys button.is-down{transform:translateY(2px);border-bottom-width:2px}
#status{margin:7px 3px 3px;min-height:14px;text-align:center;font-size:9px;color:#dfd0c4}
#status.error{color:#ffd1bc}
footer{margin:3px 8px 0;color:#c9b9ad;text-align:center;font-size:8px;line-height:1.3}
footer a{color:#dce2d5}
@media(max-height:780px){
  .branding{height:44px}
  .lcd-frame{border-width:4px;padding:4px}
  .softkeys{margin:6px 3px;padding-top:5px}
  .keyboard{gap:2px}
  .keyrow{gap:4px}
  .key{min-height:45px;height:45px}
  .key::before{top:15px}
  .key .primary{top:21px}
  .key .secondary,.key .tertiary{font-size:7px;top:2px}
}