:root{--bezel:#3a3f44;--bezel-edge:#2b2f33;--key-bg:#4a5058;--key-bg-2:#545b64;--key-fg:#e8e6df;--lbl-f:#f0b73f;--lbl-g:#6fc3d8;--lcd-bg:#9aa88f;--lcd-fg:#2c3626}*{box-sizing:border-box}body{color:var(--key-fg);background:#20242a;margin:0;font-family:Helvetica Neue,Arial,sans-serif}.page{flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:100vh;padding:24px;display:flex}.page h1{letter-spacing:4px;color:#9aa4ae;margin:0;font-size:14px;font-weight:600}.hint{color:#7d8791;margin:0;font-size:12px}.calc{background:linear-gradient(180deg, var(--bezel), var(--bezel-edge));border-radius:18px;outline:none;width:min(680px,96vw);padding:18px 18px 22px;box-shadow:0 18px 50px #0000008c,inset 0 1px #ffffff14}.display{background:#22262b;border-radius:10px;margin-bottom:16px;padding:10px 14px 14px;box-shadow:inset 0 2px 8px #0009}.annunciators{gap:10px;min-height:14px;margin-bottom:6px;display:flex}.ann{letter-spacing:1px;color:#6f7a72;font-size:10px;font-weight:700}.lcd{background:var(--lcd-bg);color:var(--lcd-fg);text-align:right;letter-spacing:1px;white-space:nowrap;border-radius:4px;min-height:1.2em;padding:8px 14px;font-family:Courier New,monospace;font-size:clamp(26px,6vw,44px);font-weight:700;overflow:hidden;box-shadow:inset 0 0 12px #00000040}.keys{grid-template-columns:repeat(10,1fr);grid-auto-rows:1fr;gap:6px;display:grid}.key{background:linear-gradient(180deg, var(--key-bg-2), var(--key-bg));color:var(--key-fg);cursor:pointer;border:none;border-radius:8px;min-height:46px;padding:10px 2px;font-family:inherit;font-size:13px;font-weight:600;transition:transform 40ms,box-shadow 40ms,background .1s;position:relative;box-shadow:0 2px #00000073,inset 0 1px #ffffff1a}.key:hover{background:linear-gradient(#5d656f,#4d545d)}.key:active{transform:translateY(1px);box-shadow:0 1px #00000073,inset 0 1px #ffffff0f}.key:focus-visible{outline-offset:1px;outline:2px solid #8ecbff}.key-on{letter-spacing:1px;background:linear-gradient(#7a4a2e,#5f3a24);font-size:15px}.key-f{background:linear-gradient(#8a6420,#6d4d18)}.key-g{background:linear-gradient(#2e6b78,#245660)}.key-enter{letter-spacing:1px;font-size:15px}.spacer{box-shadow:none;cursor:default;background:0 0;min-height:0}.lbl{line-height:1.15;display:block}.lbl-f{color:var(--lbl-f);font-size:9px;font-weight:700;position:absolute;top:3px;left:4px}.lbl-g{color:var(--lbl-g);font-size:9px;font-weight:700;position:absolute;bottom:3px;right:4px}.lbl-base{font-size:14px}.key-f-label{color:var(--lbl-f)}.key-g-label{color:var(--lbl-g)}.shift-f-active{outline:2px solid var(--lbl-f);outline-offset:-2px}.shift-g-active{outline:2px solid var(--lbl-g);outline-offset:-2px}@media (width<=560px){.key{min-height:40px;padding:8px 1px;font-size:11px}.lbl-f,.lbl-g{font-size:8px}.lbl-base{font-size:12px}}