:root{
  --bg:#1f2226; --panel:#2a2e34; --panel2:#33383f; --line:#3d434b; --text:#e9edf2; --muted:#9aa3ad;
  --k-dark:#2b2f35; --k-dark-t:#fff; --k-num:#f7f7f5; --k-num-t:#111; --k-op:#d9dde2; --k-op-t:#111; --k-fn:#d9dde2;
  --k-2nd:#2d8cff; --k-alpha:#5cc45c; --l2:#5fb0ff; --la:#7fdc7f;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;user-select:none}
.bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#16181b;border-bottom:1px solid var(--line)}
.brand{font-weight:600;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.brand .dot{width:12px;height:12px;border-radius:3px;background:linear-gradient(135deg,#2d8cff,#5cc45c)}
.tools{display:flex;gap:8px}
.tools button,.histhead button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer}
.tools button:hover,.histhead button:hover{background:#3d434b}
main{display:flex;gap:0;padding:16px;height:calc(100% - 48px);overflow:auto}
/* the keypad fills its column; drag the splitter to change the column width (--calcW) */
.calc{flex:0 0 var(--calcW, 380px);display:flex;justify-content:center;min-width:0}
.calcbody{width:100%;height:100%;display:flex;flex-direction:column;container-type:inline-size;background:linear-gradient(180deg,#2c3036,#24272c);border-radius:22px;padding:14px 14px 18px;border:1px solid #444a52;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.mini{display:none;background:#111;border-radius:8px;padding:6px;margin-bottom:10px}
.mini canvas{width:100%;display:block;border-radius:3px;image-rendering:auto}
.keypad{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(10,minmax(0,1fr));column-gap:2.4cqw;row-gap:.9cqw}
.kw{display:flex;flex-direction:column;align-items:stretch;min-height:0}
.klabels{display:flex;justify-content:space-between;font-size:clamp(9px,2.8cqw,17px);height:1.4em;line-height:1.4em;padding:0 1px;white-space:nowrap;overflow:hidden}
.klabels .l2{color:var(--l2)} .klabels .la{color:var(--la)}
.key{flex:1 1 auto;min-height:24px;border-radius:clamp(6px,1.9cqw,12px);border:none;font-size:clamp(12px,3.8cqw,24px);font-weight:600;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.45);transition:transform .05s, filter .1s;font-family:"Segoe UI",Arial,sans-serif;padding:0}
.key:hover{filter:brightness(1.12)}
.key.pressed,.dk.pressed{transform:translateY(2px);box-shadow:0 0 0 rgba(0,0,0,.4);filter:brightness(.9)}
.key.dark{background:var(--k-dark);color:var(--k-dark-t);border:1px solid #444a52}
.key.num{background:var(--k-num);color:var(--k-num-t);font-size:clamp(15px,4.8cqw,30px)}
.key.op{background:var(--k-op);color:var(--k-op-t);font-size:clamp(14px,4.5cqw,28px)}
.key.fn{background:var(--k-fn);color:#111;font-size:clamp(11px,3.5cqw,22px)}
.key.second{background:var(--k-2nd);color:#fff}
.key.alpha{background:var(--k-alpha);color:#0b2a0b}
body.shift-2nd .key.second{outline:3px solid #9cc9ff;outline-offset:1px}
body.shift-alpha .key.alpha{outline:3px solid #b9f0b9;outline-offset:1px}
body.shift-2nd .klabels .l2{color:#fff;text-shadow:0 0 6px #2d8cff}
body.shift-alpha .klabels .la{color:#fff;text-shadow:0 0 6px #5cc45c}
.dpad{position:relative;width:100%;height:100%;min-height:0}
.dk{position:absolute;background:#c9ced5;color:#222;border:none;cursor:pointer;font-size:clamp(11px,3cqw,20px);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.dk.d-up{left:30%;top:4%;width:40%;height:32%;border-radius:16px 16px 6px 6px}
.dk.d-down{left:30%;bottom:4%;width:40%;height:32%;border-radius:6px 6px 16px 16px}
.dk.d-left{left:2px;top:30%;width:34%;height:40%;border-radius:16px 6px 6px 16px}
.dk.d-right{right:2px;top:30%;width:34%;height:40%;border-radius:6px 16px 16px 6px}
/* the bar between keypad and screen: drag (mouse, pen or finger) to resize, double-click to reset */
.splitter{flex:0 0 18px;display:flex;align-items:center;justify-content:center;cursor:col-resize;touch-action:none}
.splitter::before{content:"";width:4px;height:56px;border-radius:2px;background:#4a5059}
.splitter:hover::before,.splitter.drag::before{background:#8a939e}
body.projector .splitter{display:none}
.right{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;min-width:280px}
/* the screen fills whatever room is left (4:3 plus the 28px frame), next to the keypad and above the key history */
.display{display:flex;justify-content:center;align-items:flex-start;flex:1 1 auto;min-height:0;container-type:size}
.bezel{background:#0f1113;padding:14px;border-radius:12px;border:1px solid #3b4047;box-shadow:0 8px 24px rgba(0,0,0,.45);width:min(100cqw, calc((100cqh - 28px) * 4 / 3 + 28px))}
.bezel canvas{width:100%;display:block;border-radius:3px}
.hist{background:var(--panel);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;flex:0 0 auto;height:min(220px, 30vh);min-height:0}
body.histmin .hist{height:auto}
body.histmin .chips{display:none}
.histhead .hbtns{display:flex;gap:6px}
.histhead{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px;overflow:auto;align-content:flex-start;max-height:200px}
.chip{display:flex;flex-direction:column;align-items:center}
.chip .ct{font-size:10px;height:13px;color:var(--muted)} .chip .ct.t2{color:var(--l2)} .chip .ct.ta{color:var(--la)}
.chip .cb{min-width:42px;padding:4px 8px;border-radius:6px;font-size:12.5px;font-weight:600;text-align:center}
.chip .cb.dark{background:var(--k-dark);color:#fff;border:1px solid #4a5059}
.chip .cb.num{background:var(--k-num);color:#111}
.chip .cb.op,.chip .cb.fn,.chip .cb.pad{background:var(--k-op);color:#111}
.chip .cb.second{background:var(--k-2nd);color:#fff}
.chip .cb.alpha{background:var(--k-alpha);color:#0b2a0b}
body.nohist .hist{display:none}
body.projector .calc{display:none}
/* narrow window: big screen on top, keypad under it, key history last */
@media (max-width: 900px){
  main{flex-direction:column;align-items:center}
  .right{display:contents}
  .display{order:-1;width:100%;flex:0 0 auto;container-type:normal}
  .bezel{width:min(100%, clamp(300px, calc((100vh - 660px) * 1.333 + 28px), 560px))} /* leave room for the keypad below */
  .calc{order:0;flex:0 0 auto;width:min(380px,100%)}
  .calcbody{height:auto}
  .keypad{grid-template-rows:none}
  .key{flex:none;height:34px}
  .dpad{min-height:84px}
  .splitter{display:none}
  .hist{order:1;width:100%;max-width:560px;flex:0 0 auto;height:auto;min-height:0}
  .chips{min-height:120px}
}
/* touch screens (Surface etc.): keys react on touch-down, no double-tap zoom, no long-press menu or tap flash */
.keypad,.key,.dk,.tools button,.panel button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.key,.dk{min-height:34px}

/* Programs (.8xp) panel */
.panel{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20;user-select:text}
.panel[hidden]{display:none}
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;width:min(520px,94vw);max-height:80vh;overflow:auto}
.panelhead{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:8px}
.panelnote{color:var(--muted);font-size:13px;margin:6px 0}
.panelrow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.panel button{background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer}

/* phone (portrait): header, then the calculator screen, then the keypad filling the rest, like the handheld.
   No big display, splitter or key history; the screen keeps about a third of the height so keys stay big enough to tap. */
@media (max-width: 600px){
  html,body{overflow:hidden;overscroll-behavior:none}
  body{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
  .bar{flex:0 0 40px;height:40px;padding:0 10px}
  #projector,#histToggle,#progs{display:none}
  .tools{gap:6px}
  .tools button{padding:6px 10px}
  main{display:block;flex:1 1 auto;height:auto;min-height:0;padding:6px;overflow:hidden}
  .right,.splitter{display:none}
  .calc{width:100%;height:100%}
  .calcbody{height:100%;border-radius:16px;padding:8px 8px 10px}
  .mini{display:block;flex:0 0 auto;align-self:center;padding:4px;margin-bottom:6px;width:min(100%, calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .36 * 4 / 3))}
  .mini canvas{aspect-ratio:400/264} /* squashed to 88% of its height so the keys get more room */
  .keypad{grid-template-rows:repeat(10,minmax(0,1fr));column-gap:2.2cqw;row-gap:.6cqw}
  .key,.dk{flex:1 1 auto;height:auto;min-height:0}
  .dpad{min-height:0}
}