.keypad-switch{display:flex;justify-content:center;gap:10px;margin:15px 0}
.keypad-switch a{padding:10px 15px;margin: 15px 0; border:1px solid var(--line-strong);border-radius:999px;color:var(--heading);text-decoration:none}
.keypad-switch a[aria-current=page]{background:var(--heading);color:#fff;border-color:var(--heading)}
.keypad-calculator{
    --kp-scale:.85;
    --kp-surface:#0d0e10;--kp-display:#0d0e10;--kp-key:#303134;--kp-key-text:#fff;
    --kp-utility:#a7a9ad;--kp-utility-text:#151515;--kp-operator:#f39c29;--kp-operator-text:#fff;
    --kp-function:#242629;--kp-function-text:#fff;--kp-line:transparent;--kp-radius:50%;
    width:min(100%,calc(410px * var(--kp-scale)));margin:25px auto 35px;padding:calc(20px * var(--kp-scale));border:1px solid var(--kp-line);
    border-radius:25px;background:var(--kp-surface);box-shadow:0 15px 40px rgba(0,0,0,.12);
    color:var(--kp-key-text);
}
.keypad-calculator.keypad-scientific{width:min(100%,calc(665px * var(--kp-scale)))}
.keypad-calculator *{box-sizing:border-box}
.keypad-form{display:flex;flex-direction:column;gap:calc(10px * var(--kp-scale));margin:0}
.keypad-display{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:calc(10px * var(--kp-scale)) 5px calc(15px * var(--kp-scale));border-radius:15px;background:var(--kp-display);text-align:right}
.keypad-display label{font-size:13px;color:var(--kp-key-text);opacity:.7}
.keypad-display input{display:block;width:100%;min-width:0;padding:5px 0;border:0;outline:0;background:transparent;color:var(--kp-key-text);font:inherit;font-size:calc(25px * var(--kp-scale));font-weight:500;line-height:1.3;text-align:right;font-variant-numeric:tabular-nums}
.keypad-display input::placeholder{color:var(--kp-key-text);opacity:.7}
.keypad-display input:focus-visible{outline:2px solid var(--kp-operator);outline-offset:4px}
.keypad-result{display:block;min-height:calc(50px * var(--kp-scale));overflow-wrap:anywhere;color:var(--kp-key-text);font-size:calc(42px * var(--kp-scale));font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.keypad-display small{min-height:15px;color:var(--kp-key-text);font-size:11px;opacity:.6}
.keypad-keys,.keypad-advanced{display:grid;gap:calc(10px * var(--kp-scale))}
.keypad-keys{grid-template-columns:repeat(4,minmax(0,1fr))}
.keypad-advanced{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:5px;gap:calc(7px * var(--kp-scale))}
.keypad-calculator button{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:calc(72px * var(--kp-scale));padding:5px;border:0;border-radius:999px;background:var(--kp-key);color:var(--kp-key-text);font:inherit;font-size:calc(27px * var(--kp-scale));font-weight:500;line-height:1;cursor:pointer;touch-action:manipulation;transition:filter .12s ease,transform .12s ease}
.keypad-calculator button:hover{filter:brightness(1.18)}
.keypad-calculator button:active{transform:scale(.95)}
.keypad-calculator button:focus-visible{outline:3px solid var(--kp-operator);outline-offset:2px}
.keypad-calculator .keypad-utility{background:var(--kp-utility);color:var(--kp-utility-text)}
.keypad-calculator .keypad-operator{background:var(--kp-operator);color:var(--kp-operator-text)}
.keypad-calculator .keypad-zero{grid-column:span 2;border-radius:999px;justify-content:flex-start;padding-left:calc(28px * var(--kp-scale))}
.keypad-advanced button{min-height:calc(52px * var(--kp-scale));background:var(--kp-function);color:var(--kp-function-text);font-size:calc(14px * var(--kp-scale))}
.keypad-advanced button[aria-pressed=true]{background:var(--kp-operator);color:var(--kp-operator-text)}
.keypad-calculator .keypad-backspace{position:absolute;top:3px;left:2px;width:44px;min-height:30px;border-radius:999px;background:transparent;color:var(--kp-key-text);font-size:20px}
.keypad-size{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 calc(10px * var(--kp-scale));color:var(--kp-key-text);font-size:13px}
.keypad-size output{min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
.keypad-calculator .keypad-size button{width:32px;min-height:32px;padding:0;border:1px solid var(--kp-line);border-radius:999px;background:var(--kp-function);color:var(--kp-function-text);font-size:20px}
.keypad-calculator .keypad-size button:disabled{opacity:.45;cursor:default}
.theme-editorial .keypad-calculator{
    --kp-surface:#f4f0e8;--kp-display:#fffdf8;--kp-key:#e5ded1;--kp-key-text:#302d29;
    --kp-utility:#c7bba8;--kp-utility-text:#302d29;--kp-operator:#795b45;--kp-operator-text:#fff;
    --kp-function:#ded4c5;--kp-function-text:#302d29;--kp-line:#cfbea9;--kp-radius:10px;
    border-radius:10px;box-shadow:0 10px 25px rgba(49,37,22,.12)
}
.theme-werkzeug .keypad-calculator{
    --kp-surface:#1b252b;--kp-display:#101b20;--kp-key:#354850;--kp-key-text:#f1f5f5;
    --kp-utility:#a9c2c9;--kp-utility-text:#15232a;--kp-operator:#df6c40;--kp-operator-text:#fff;
    --kp-function:#263b44;--kp-function-text:#ecf4f5;--kp-line:#465c65;--kp-radius:3px;
    border-radius:3px;box-shadow:none
}
.theme-compact .keypad-calculator{
    --kp-surface:#18242b;--kp-display:#111d24;--kp-key:#33434a;--kp-key-text:#f5f8f6;
    --kp-utility:#a7c3b4;--kp-utility-text:#162a22;--kp-operator:#38815f;--kp-operator-text:#fff;
    --kp-function:#27383d;--kp-function-text:#f4f7f5;--kp-line:#31474c;--kp-radius:5px;
    padding:12px;border-radius:5px;box-shadow:none
}
.theme-compact .keypad-keys{gap:calc(5px * var(--kp-scale))}
.theme-compact .keypad-advanced{gap:calc(5px * var(--kp-scale))}
.theme-compact .keypad-calculator .keypad-keys button{min-height:calc(55px * var(--kp-scale))}
.theme-compact .keypad-calculator .keypad-advanced button{min-height:calc(42px * var(--kp-scale))}
.theme-soft .keypad-calculator{
    --kp-surface:#edf5fc;--kp-display:#ffffff;--kp-key:#dce8f3;--kp-key-text:#34465a;
    --kp-utility:#c6d8e8;--kp-utility-text:#113b78;--kp-operator:#1168b7;--kp-operator-text:#ffffff;
    --kp-function:#1168b7;--kp-function-text:#ffffff;--kp-line:#c6d8e8;--kp-radius:50%;
    border-radius:35px;box-shadow:0 15px 35px rgba(17,59,120,.12)
}
@media(max-width:700px){
    .keypad-calculator{padding:calc(12px * var(--kp-scale));margin:15px auto 25px}
    .keypad-keys{gap:calc(7px * var(--kp-scale))}
    .keypad-calculator .keypad-keys button{min-height:calc(60px * var(--kp-scale));font-size:calc(22px * var(--kp-scale))}
    .keypad-advanced{gap:calc(5px * var(--kp-scale))}
    .keypad-advanced button{min-height:calc(42px * var(--kp-scale));font-size:calc(11px * var(--kp-scale))}
    .keypad-display input{font-size:calc(20px * var(--kp-scale))}
    .keypad-result{font-size:calc(34px * var(--kp-scale))}
}
@media(max-width:360px){
    .keypad-calculator{padding:calc(8px * var(--kp-scale))}
    .keypad-keys{gap:calc(5px * var(--kp-scale))}
    .keypad-calculator .keypad-keys button{min-height:calc(54px * var(--kp-scale))}
    .keypad-advanced button{min-height:calc(38px * var(--kp-scale));font-size:calc(10px * var(--kp-scale))}
}
@media(prefers-reduced-motion:reduce){.keypad-calculator button{transition:none}}
