*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
:root{--c1:#00e5ff;--c2:#b44cff;--c3:#ff4fd8;--g:rgba(255,255,255,.07)}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
body{min-height:100vh;background:radial-gradient(ellipse at 20% 0,#1a1050 0,#05060f 55%,#000 100%) fixed;color:#e8ecff;font-family:system-ui,'Segoe UI',Tahoma,sans-serif;padding:max(10px,env(safe-area-inset-top)) 12px 28px;overflow-x:hidden}
#bg{position:fixed;inset:0;z-index:-2;width:100%;height:100%}
.neb{position:fixed;inset:-20%;z-index:-1;background:radial-gradient(circle at 30% 30%,#b44cff33,transparent 40%),radial-gradient(circle at 70% 70%,#00e5ff2b,transparent 40%);animation:neb 18s ease-in-out infinite alternate}
@keyframes neb{to{transform:rotate(25deg) scale(1.2)}}
header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;max-width:1100px;margin:6px auto}
h1{font-size:clamp(18px,4vw,30px);letter-spacing:3px;direction:ltr;font-weight:300}
h1 b{background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c1));background-size:300%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 6s linear infinite}
@keyframes flow{to{background-position:300%}}
button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff22;background:var(--g);border-radius:12px;padding:8px 14px;transition:.18s}
button:hover{box-shadow:0 0 14px var(--c1);border-color:var(--c1)}
button:active{transform:scale(.92)}
.bar{display:flex;gap:6px}
.sel{background:linear-gradient(135deg,#00e5ff55,#b44cff55)!important;border-color:var(--c1)}
nav{display:flex;gap:8px;justify-content:center;margin:10px auto;max-width:1100px}
main{max-width:1100px;margin:auto}
.tab{display:none;gap:14px}
.tab.act{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);animation:in .45s}
#graph.act,#table.act{grid-template-columns:minmax(0,1fr)}
@keyframes in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.card{position:relative;background:linear-gradient(160deg,#ffffff14,#ffffff05);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:24px;padding:16px;border:1px solid #ffffff14;box-shadow:0 20px 60px #000a,inset 0 1px #ffffff22}
.card::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;background:conic-gradient(from var(--a),transparent 60%,var(--c1),var(--c2),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask-composite:exclude;animation:spin 6s linear infinite;pointer-events:none}
@keyframes spin{to{--a:360deg}}
.ltr{direction:ltr}
.disp{background:#0009;border-radius:16px;padding:12px;margin-bottom:12px;box-shadow:inset 0 0 20px #000;text-align:right}
#in{width:100%;background:none;border:0;outline:0;color:#fff;font-size:clamp(20px,4vw,28px);font-family:Consolas,monospace;text-align:left;caret-color:var(--c1)}
#res{font-size:clamp(26px,6vw,42px);font-weight:600;min-height:1.3em;white-space:pre-line;color:var(--c1);text-shadow:0 0 18px var(--c1);word-break:break-all;overflow-x:auto}
#res.pop{animation:pop .3s}
#res.bad{color:#ff6b8a;text-shadow:0 0 14px #ff3b5c;font-size:clamp(16px,3.4vw,22px)}
#alt{color:#ffd24f;min-height:1.2em;white-space:pre-line;word-break:break-all}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.f{background:#b44cff22}.v{background:#00e5ff1f}.o{background:#ff4fd833}.n{background:#ffffff14;font-weight:600}.ac{background:#ff3b5c44}
.eq{grid-column:span 2;background:linear-gradient(135deg,var(--c1),var(--c2));color:#000;font-weight:800;font-size:22px;box-shadow:0 0 22px #00e5ff66}
.hh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hh button{padding:5px 10px;font-size:13px;background:#ff3b5c33}
#hl{list-style:none;max-height:62vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
#hl li{display:flex;gap:8px;align-items:center;justify-content:space-between;background:#ffffff0d;border-radius:12px;padding:8px 10px;cursor:pointer;direction:ltr;animation:in .3s}
#hl li:hover{background:#00e5ff1a}
#hl i{font-style:normal;display:block;opacity:.6;font-size:13px;font-family:Consolas,monospace}
#hl span{display:block;color:var(--c1);font-weight:600;word-break:break-all}
#hl button{padding:2px 9px;background:#ff3b5c33}
.empty{opacity:.5;text-align:center;padding:20px}
.row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
input:not(#in){flex:1;min-width:80px;background:#0008;border:1px solid #ffffff33;border-radius:12px;color:#fff;padding:9px 12px;font:15px Consolas,monospace;outline:0}
input:not(#in):focus{box-shadow:0 0 12px var(--c1)}
#cv{width:100%;height:58vh;min-height:300px;background:#0007;border-radius:16px;touch-action:none;cursor:grab;display:block;margin-bottom:10px}
.scr{max-height:60vh;overflow:auto}
table{width:100%;border-collapse:collapse;text-align:center}
td,th{padding:7px;border-bottom:1px solid #ffffff14;font-family:Consolas,monospace}
th{position:sticky;top:0;background:#14143a;color:var(--c1)}
tr:hover td{background:#00e5ff14}
@media(max-width:800px){.tab.act{grid-template-columns:minmax(0,1fr)}#hl{max-height:40vh}.card{padding:12px;border-radius:20px}.keys{gap:5px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
footer{text-align:center;margin:22px 0 6px;font-size:14px}footer a{color:#9ab;text-decoration:none;border-bottom:1px dotted #9ab}footer a:hover{color:var(--c1)}
.doc{max-width:760px;margin:16px auto;line-height:1.9}.doc h2{margin:18px 0 6px;color:var(--c1);font-size:19px}.doc h1{letter-spacing:0;font-size:26px}.doc p,.doc li{opacity:.9}.doc ul{padding-inline-start:22px}.doc section{display:none}.doc section.on2{display:block}
.bar{position:relative}
#appsm{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:50;display:flex;gap:14px;padding:14px;background:linear-gradient(160deg,#1a1050f2,#05060ff2);border:1px solid #ffffff22;border-radius:16px;box-shadow:0 20px 50px #000a;backdrop-filter:blur(18px)}
#appsm[hidden]{display:none}
#appsm a{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;text-decoration:none;color:#e8ecff;font-size:12px;text-align:center}
#appsm a i{font-style:normal;font-size:22px;width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#3b82f6)}
#appsm a:hover i{box-shadow:0 0 14px var(--c1)}
/* ---- v4: keypad groups, numeric pad, matrices, memory, examples ---- */
.dtop{display:flex;justify-content:space-between;margin-bottom:6px}
.dtop button{padding:3px 10px;font-size:13px;border-radius:10px}
.gtabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:8px;padding-bottom:2px;scrollbar-width:thin}
.gtabs button{flex:0 0 auto;padding:6px 13px;font-size:13px;border-radius:999px}
.fkeys{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:6px;margin-bottom:10px}
.pad{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.fkeys button,.pad button{padding:0 2px;height:clamp(40px,6vh,54px);font-size:clamp(11px,2.1vw,15px);text-overflow:ellipsis;border-radius:14px;overflow:hidden;white-space:nowrap}
.pad button{height:clamp(46px,7vh,60px);font-size:clamp(16px,3vw,21px)}
.mem{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:13px}
.chip{padding:4px 10px;font-size:12.5px;border-radius:999px;font-family:Consolas,monospace}
.chip.x{background:#ff3b5c33}
.exd{margin-top:12px;font-size:13px}
.exd summary{cursor:pointer;opacity:.7;padding:4px 0}
.exs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mxp{background:#0008;border:1px solid #ffffff22;border-radius:16px;padding:12px;margin-bottom:10px}
.mxp[hidden],.mem[hidden]{display:none}
.mxh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mxh button{padding:2px 10px}
.mxp label{display:flex;align-items:center;gap:6px;font-size:13px}
#mxp input,#mxp select{flex:none;min-width:0;width:64px;text-align:center;padding:6px;background:#0008;border:1px solid #ffffff33;border-radius:10px;color:#fff;font:14px Consolas,monospace}
.mxg{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:6px;margin:8px 0}
#mxp .mxg input{width:100%}
.mxi{width:100%;background:linear-gradient(135deg,var(--c1),var(--c2));color:#000;font-weight:700}
.mwrap{overflow-x:auto;max-width:100%}
.mt{display:inline-table;width:auto;border-left:2px solid var(--c1);border-right:2px solid var(--c1);border-radius:8px;margin:2px 0}
.mt td{padding:4px 12px;border:0;font-size:clamp(15px,3.2vw,22px)}
.mname{font-size:16px;opacity:.8}
.gf1{border-color:#00e5ff!important}.gf2{border-color:#ff4fd8!important}.gf3{border-color:#ffd24f!important}
.offscreen{position:fixed;left:-9999px;top:0}
select{font:inherit}
.bar a.back{display:inline-flex;align-items:center;color:inherit;text-decoration:none;border:1px solid #ffffff22;background:var(--g);border-radius:12px;padding:8px 14px}
.bar a.back:hover{box-shadow:0 0 14px var(--c1);border-color:var(--c1)}