@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{justify-content:center;align-items:center;min-height:100vh;padding:24px 12px;display:flex;overflow:hidden auto}body:has(.cal.mode-developer){align-items:flex-start}button{cursor:pointer;-webkit-user-select:none;user-select:none;border:none;outline:none;justify-content:center;align-items:center;font-weight:500;display:flex}button:disabled{opacity:.25;cursor:not-allowed}input{text-align:right;background:0 0;border:none;outline:none;width:100%}.programmer-panel{gap:8px;max-height:0;transition:all .3s;display:grid;overflow:hidden;transform:translateY(-8px)}.cal.mode-developer .programmer-panel{max-height:180px}.base-row{cursor:pointer;border-radius:12px;grid-template-columns:52px 1fr;align-items:center;min-height:34px;padding:7px 12px;transition:all .2s;display:grid}.light-theme .base-row.active{color:#0c46b9;background:#0c46b91a}.dark-theme .base-row.active{color:#22d3ee;background:#22d3ee26}.base-label{font-size:.78rem;font-weight:700}.base-value{text-align:right;min-width:0;font-size:.98rem;font-weight:600;overflow:hidden}.controls-area{display:block}.hex-keys{display:none}.cal.mode-developer .controls-area{grid-template-columns:52px 1fr;gap:12px;display:grid}.cal .keybtn{grid-template-columns:repeat(4,1fr)!important}.cal.mode-developer .keybtn{grid-template-columns:repeat(5,1fr)!important}.cal:not(.mode-developer) .hex-key{display:none}.light-theme{color:#1e293b;background:linear-gradient(135deg,#f3e5fa 0%,#dae8fb 40%,#d6f5f5 100%)}.light-theme .cal{background:#fff6;border:1px solid #fff9;border-radius:36px;flex-direction:column;gap:24px;width:375px;padding:30px 24px 24px;display:flex;position:relative}.light-theme .cal.mode-developer{width:min(445px,90vw)}.light-theme .cal.mode-developer .keybtn #zero{grid-column:span 1!important}.light-theme .theme-header{flex-direction:column;align-items:center;gap:12px;width:100%;margin-bottom:16px;padding:0 4px;display:flex}.light-theme .brand-title{background:linear-gradient(135deg,#0c46b9 0%,#027cf6 100%);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:700}.light-theme .header-controls{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.light-theme #calc-mode-select{text-align:center;color:#334155;cursor:pointer;appearance:none;background:#ffffff8c;border:1px solid #fffc;border-radius:12px;outline:none;flex-grow:1;height:45px;padding:8px 28px 8px 12px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .3s;box-shadow:0 4px 10px #94a3b80f}.light-theme #calc-mode-select:hover{background:#ffffffd9;border-color:#0c46b94d;transform:translateY(-2.5px);box-shadow:0 6px 15px #0c46b914}.light-theme #calc-mode-select:focus{background:#fff;border-color:#0c46b9;box-shadow:0 0 0 3px #0c46b926}.light-theme #calc-mode-select option{color:#334155;background:#fff;font-family:Outfit,sans-serif;font-weight:500}.light-theme .theme-toggle-btn{color:#475569;cursor:pointer;background:#ffffff8c;border:1px solid #fffc;border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;transition:all .3s;display:flex;box-shadow:0 4px 10px #94a3b80f}.light-theme .theme-toggle-btn:hover{color:#0f172a;background:#ffffffe6;border-color:#0c46b94d;transform:translateY(-1px);box-shadow:0 6px 15px #94a3b826}.light-theme .theme-toggle-btn:active{transform:scale(.92)}.light-theme .theme-toggle-btn .sun-icon{display:none}.light-theme .theme-toggle-btn .moon-icon{justify-content:center;align-items:center;display:flex}.light-theme .text{background:#ffffff4d;border:1px solid #fff6;border-radius:24px;flex-direction:column;justify-content:space-between;align-items:flex-end;height:115px;padding:20px 24px;display:flex;overflow:hidden;box-shadow:inset 0 3px 8px #94a3b80d,0 10px 20px -10px #94a3b81a}.light-theme .history-expr{color:#51637d;text-align:right;opacity:.8;letter-spacing:.5px;width:100%;min-height:24px;font-size:1.24rem;font-weight:450}.light-theme .text input{color:#1e293b;font-size:2.3rem;font-weight:600}.light-theme .keybtn{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.light-theme #zero{grid-column:1/3;justify-content:flex-start;padding-left:30px;display:grid}.light-theme .keybtn button{border-radius:20px;height:62px;font-size:1.35rem;font-weight:500;transition:all .25s}.light-theme .cal.mode-developer .keybtn .hex-key{color:#334155;background:#ffffffa6;border:1px solid #fffc;box-shadow:0 4px 10px #94a3b80f}.light-theme .cal.mode-developer .keybtn .hex-key:hover{background:#fffffff2;transform:translateY(-2px);box-shadow:0 8px 18px #94a3b826}.light-theme .keybtn .number{color:#334155;background:#ffffffa6;border:1px solid #fffc;box-shadow:0 4px 10px #94a3b80f}.light-theme .keybtn .number:hover{background:#fffffff2;transform:translateY(-2px);box-shadow:0 8px 18px #94a3b826}.light-theme .keybtn #dot{color:#334155;background:#ffffffa6;border:1px solid #fffc;box-shadow:0 4px 10px #94a3b80f}.light-theme .keybtn #dot:hover{background:#fffffff2;transform:translateY(-2px);box-shadow:0 8px 18px #94a3b826}.light-theme .keybtn button.action{color:#0f4c5c;background:linear-gradient(135deg,#c6f1eb 0%,#b7e6f0 100%);border:1px solid #ffffffe6;font-weight:600}.light-theme .keybtn button.action:hover{background:linear-gradient(135deg,#b6ede5 0%,#a7e1ec 100%);transform:translateY(-2px);box-shadow:0 8px 20px #0d948826}.light-theme .keybtn button.operator{color:#0b3843;background:#94a3b826;border:1px solid #ffffffe6;font-size:1.5rem;font-weight:600}.light-theme .keybtn button.operator:hover{background:#ffffffa6;transform:translateY(-2px);box-shadow:0 8px 20px #373e4826}.light-theme .keybtn button#equals{color:#fff;background:linear-gradient(135deg,#0c46b9,#027cf6);border:1px solid #ffffff0d;font-size:1.6rem;font-weight:600;box-shadow:0 6px 15px #f9731638}.light-theme .keybtn button#equals:hover{background:linear-gradient(135deg,#195ad2 0%,#288cff 100%);transform:translateY(-2px)}.light-theme .keybtn button:active,.light-theme .keybtn .number:active,.light-theme .keybtn #dot:active,.light-theme .keybtn button.action:active,.light-theme .keybtn button.operator:active,.light-theme .keybtn button#equals:active{transform:scale(.94)translateY(2px);box-shadow:0 2px 6px #0003}.dark-theme{color:#f8fafc;background:linear-gradient(135deg,#0b0e1e 0%,#180e2a 50%,#1f0d21 100%)}.dark-theme .cal{background:#16213b73;border:1px solid #8b5cf638;border-radius:36px;flex-direction:column;gap:24px;width:375px;padding:30px 24px 24px;display:flex;position:relative}.dark-theme .cal.mode-developer{width:min(445px,90vw)}.dark-theme .cal.mode-developer .keybtn #zero{grid-column:span 1!important}.dark-theme .theme-header{flex-direction:column;align-items:center;gap:12px;width:100%;margin-bottom:16px;padding:0 4px;display:flex}.dark-theme .brand-title{background:linear-gradient(135deg,#22d3ee 0%,#a78bfa 100%);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:700}.dark-theme .header-controls{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.dark-theme #calc-mode-select{text-align:center;color:#f8fafc;cursor:pointer;appearance:none;background:#0f172aa6;border:1px solid #8b5cf640;border-radius:12px;outline:none;flex-grow:1;height:45px;padding:8px 28px 8px 12px;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;transition:all .3s}.dark-theme #calc-mode-select:hover{background:#1e293bd9;border-color:#8b5cf673;transform:translateY(-2.5px);box-shadow:0 0 12px #8b5cf640,0 6px 15px #0000004d}.dark-theme #calc-mode-select:focus{background:#0f172af2;border-color:#a78bfa;box-shadow:0 0 0 3px #a78bfa4d,0 0 15px #a78bfa33}.dark-theme #calc-mode-select option{color:#f8fafc;background:#0f172a;font-family:Outfit,sans-serif;font-weight:500}.dark-theme .theme-toggle-btn{color:#94a3b8;cursor:pointer;background:#0f172aa6;border:1px solid #8b5cf640;border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;transition:all .3s;display:flex;box-shadow:inset 0 2px 4px #0000004d,0 4px 10px #0003}.dark-theme .theme-toggle-btn:hover{color:#22d3ee;background:#1e293bd9;border-color:#8b5cf673;transform:translateY(-1px);box-shadow:0 0 15px #8b5cf640,0 6px 15px #0000004d}.dark-theme .theme-toggle-btn:active{transform:scale(.92)}.dark-theme .theme-toggle-btn .sun-icon{justify-content:center;align-items:center;display:flex}.dark-theme .theme-toggle-btn .moon-icon{display:none}.dark-theme .text{background:#080c1c99;border:1px solid #8b5cf626;border-radius:24px;flex-direction:column;justify-content:space-between;align-items:flex-end;height:115px;padding:20px 24px;display:flex;overflow:hidden;box-shadow:inset 0 4px 15px #00000059,0 10px 25px -10px #0003}.dark-theme .history-expr{color:#3d98a2;text-align:right;opacity:.85;letter-spacing:.5px;width:100%;min-height:24px;font-size:1.24rem;font-weight:450}.dark-theme .text input{color:#22d3ee;font-size:2.3rem;font-weight:600}.dark-theme .keybtn{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.dark-theme #zero{grid-column:span 2;justify-content:flex-start;padding-left:30px;display:grid}.dark-theme .keybtn button{border-radius:20px;height:62px;font-size:1.35rem;font-weight:500;transition:all .25s}.dark-theme .keybtn .hex-key{color:#f1f5f9;background:#1e293b59;border:1px solid #ffffff08;box-shadow:0 4px 10px #0000001a}.dark-theme .keybtn .hex-key:hover{color:#fff;background:#33415580;border-color:#8b5cf640;transform:translateY(-2px);box-shadow:0 8px 20px #00000040,0 0 12px #8b5cf626}.dark-theme .keybtn .number{color:#f1f5f9;background:#1e293b59;border:1px solid #ffffff08;box-shadow:0 4px 10px #0000001a}.dark-theme .keybtn .number:hover{color:#fff;background:#33415580;border-color:#8b5cf640;transform:translateY(-2px);box-shadow:0 8px 20px #00000040,0 0 12px #8b5cf626}.dark-theme .keybtn #dot{color:#f1f5f9;background:#1e293b59;border:1px solid #ffffff08;box-shadow:0 4px 10px #0000001a}.dark-theme .keybtn #dot:hover{color:#fff;background:#33415580;border-color:#8b5cf640;transform:translateY(-2px);box-shadow:0 8px 20px #00000040,0 0 12px #8b5cf626}.dark-theme .keybtn button.action{color:#fff;background:linear-gradient(135deg,#0aa7b8 0%,#04ae92 100%);border:1px solid #ffffff0d;font-weight:600}.dark-theme .keybtn button.action:hover{background:linear-gradient(135deg,#0bb8cb 0%,#05c2a2 100%);transform:translateY(-2px)}.dark-theme .keybtn button.operator{color:#fff;background:#33415580;border:1px solid #ffffff0d;font-size:1.5rem;font-weight:600}.dark-theme .keybtn button.operator:hover{background:#1e293b59;border:1px solid #ffffff08;transform:translateY(-2px)}.dark-theme .keybtn button#equals{color:#fff;background:linear-gradient(135deg,#0c46b9,#027cf6);border:1px solid #ffffff0d;font-size:1.6rem;font-weight:600}.dark-theme .keybtn button#equals:hover{background:linear-gradient(135deg,#195ad2 0%,#288cff 100%);transform:translateY(-2px)}.dark-theme .keybtn button:active,.dark-theme .keybtn .number:active,.dark-theme .keybtn #dot:active,.dark-theme .keybtn button.action:active,.dark-theme .keybtn button.operator:active,.dark-theme .keybtn button#equals:active{transform:scale(.94)translateY(2px);box-shadow:0 2px 6px #0003}
