@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#182337;background:#f4f6fa;font-synthesis:none;text-rendering:optimizeLegibility;--ink:#182337;--muted:#778399;--line:#e8ecf2;--surface:#fff;--soft:#f4f6fa;--blue:#4169e1;--blue-soft:#edf1ff;--green:#19a77a;--shadow:0 14px 44px rgba(26,42,76,.07)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -15%,#e9efff 0,transparent 48%),#f5f7fb;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid rgba(220,226,237,.8);background:rgba(255,255,255,.72);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 20px 'Space Grotesk',sans-serif;letter-spacing:-.7px}.brand-mark{width:32px;height:32px;border-radius:10px;background:#4169e1;color:#fff;display:grid;place-items:center;font-size:21px;box-shadow:0 5px 12px #4169e144}.top-actions{display:flex;align-items:center;gap:22px}.privacy-note{font-size:12px;color:var(--muted)}.live-dot{display:inline-block;width:7px;height:7px;background:#23b88b;border-radius:50%;margin-right:7px}.icon-button{border:1px solid var(--line);background:#fff;border-radius:10px;width:36px;height:36px;color:#52617b;font-size:19px}.shell{max-width:1080px;margin:0 auto;padding:48px 24px 34px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.7px;color:#7b8ba8;margin:0 0 10px}.intro h1{font:600 clamp(32px,5vw,46px)/1.12 'Space Grotesk',sans-serif;letter-spacing:-1.8px;margin:0}.intro h1 span{color:var(--blue)}.subhead{font-size:14px;color:var(--muted);margin:12px 0 0}.intro-chip{font-size:11px;color:#4d68b9;background:#edf1ff;border:1px solid #dce4ff;border-radius:20px;padding:9px 13px;margin-bottom:4px}.mode-tabs{display:flex;gap:6px;padding:6px;background:#e9edf5;border-radius:13px;width:max-content;margin-bottom:18px}.mode-tab{border:0;background:transparent;color:#748199;padding:10px 16px;border-radius:9px;font-size:12px;font-weight:600;display:flex;gap:9px;align-items:center}.mode-tab.active{background:#fff;color:#315bd4;box-shadow:0 2px 7px #20345a12}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(270px,.85fr);gap:18px;align-items:stretch}.calculator-card,.side-card,.converter-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.calculator-card{padding:20px}.display{background:#111c30;border-radius:13px;min-height:145px;padding:17px 20px 13px;color:white;margin-bottom:14px;display:flex;flex-direction:column}.display-meta{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:1.4px;color:#8999b5}.angle-indicator{color:#aabfff}.expression{color:#a7b4ca;text-align:right;min-height:24px;margin-top:12px;font-size:14px;overflow-wrap:anywhere}.result{font:500 clamp(30px,5vw,42px)/1.15 'Space Grotesk',sans-serif;text-align:right;letter-spacing:-1.3px;overflow-wrap:anywhere}.display-tools{display:flex;justify-content:space-between;margin-top:auto;padding-top:9px}.text-button{border:0;background:transparent;color:#9aabc8;font-size:10px;padding:4px 0}.text-button:hover{color:#fff}.key-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.scientific-keys{grid-template-columns:repeat(6,minmax(0,1fr));margin-bottom:9px}.key{height:49px;border:1px solid #edf0f5;border-radius:10px;background:#f8f9fc;color:#25334a;font:600 16px 'Space Grotesk',sans-serif;transition:transform .12s,background .12s,border-color .12s}.key:hover{background:#edf1fb;border-color:#dce4f6}.key:active{transform:scale(.96)}.key.utility{background:#f0f3fa;color:#52617b;font-size:13px}.key.operator{background:#edf1ff;color:#4169d8;font-size:20px}.key.equals{background:#4169e1;color:white;border-color:#4169e1;font-size:21px;box-shadow:0 5px 12px #4169e12b}.key.function{height:37px;font-size:11px;color:#5268a2;background:#f4f6fc}.calculator-footer{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:12px;border-top:1px solid var(--line)}.memory-tools,.angle-tools{display:flex;gap:5px}.memory-tools button,.angle-choice{border:0;background:transparent;color:#8994a8;font-size:10px;font-weight:700;padding:6px 8px;border-radius:6px}.memory-tools button:hover,.angle-choice.selected{background:#edf1ff;color:#4169d8}.side-card{padding:22px;display:flex;flex-direction:column;min-height:100%}.side-heading{display:flex;justify-content:space-between;align-items:center}.side-heading .eyebrow{margin-bottom:6px}.side-heading h2,.converter-heading h2{font:600 19px 'Space Grotesk',sans-serif;margin:0;letter-spacing:-.5px}.history-icon{width:35px;height:35px;border-radius:11px;background:#edf1ff;color:#4169d8;display:grid;place-items:center;font-size:19px}.side-description{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 18px}.history-list{display:flex;flex-direction:column;gap:7px;flex:1}.empty-state{margin:auto;text-align:center;color:#a0aabd;padding:30px 8px}.empty-state span{font-size:29px;color:#b6c4e8}.empty-state p{font-size:11px}.history-item{border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left;background:#fff;display:flex;flex-direction:column;gap:5px}.history-item:hover{border-color:#cbd7fa;background:#fafbff}.history-expression{font-size:10px;color:#8490a4;overflow-wrap:anywhere}.history-result{font:600 16px 'Space Grotesk',sans-serif;color:#263a61}.side-bottom{border-top:1px solid var(--line);padding-top:13px;margin-top:15px;display:flex;gap:8px;align-items:center;font-size:10px;color:#99a3b4}.privacy-lock{font-size:14px;color:#23a980}.programmer-panel{margin-top:15px}.base-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.base-grid>div,.field{display:flex;flex-direction:column;gap:7px}.base-grid label,.field label,.bitwise-row label{font-size:10px;font-weight:700;color:#8390a6;letter-spacing:.8px}.base-grid input,.bitwise-row input,.field input,.field select,.bitwise-row select{width:100%;height:42px;border:1px solid var(--line);border-radius:9px;background:#fafbfe;padding:0 11px;color:var(--ink);outline:none}.base-grid input:focus,.field input:focus,.field select:focus{border-color:#9bb0f6}.bitwise-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px;align-items:end}.bitwise-row label{grid-column:1/-1}.bitwise-row output{background:#edf1ff;border-radius:9px;padding:12px;color:#315bd4;font-weight:700;min-height:42px}.converter-card{padding:25px;margin-top:18px}.converter-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.converter-heading .eyebrow{margin-bottom:7px}.converter-symbol{font-size:27px;color:#4169d8;background:#edf1ff;border-radius:12px;width:45px;height:45px;display:grid;place-items:center}.converter-controls{display:grid;grid-template-columns:1fr 1fr 42px 1fr;gap:12px;align-items:end}.swap-button{height:42px;border:1px solid #dce4ff;background:#edf1ff;color:#4169d8;border-radius:10px;font-size:19px}.conversion-values{display:grid;grid-template-columns:1fr 30px 1fr;gap:15px;align-items:end;margin-top:20px}.conversion-equals{font-size:20px;color:#9aa6ba;text-align:center;padding-bottom:9px}.conversion-output{background:#111c30;border-radius:10px;padding:10px 14px;min-height:66px;display:flex;flex-direction:column;justify-content:center;gap:5px;overflow:hidden}.conversion-output span{font-size:9px;color:#8da0c0;letter-spacing:1.3px}.conversion-output output{font:600 22px 'Space Grotesk',sans-serif;color:#fff;overflow-wrap:anywhere}.converter-note{font-size:11px;color:#98a3b5;margin:16px 0 0}.footer{max-width:1080px;margin:0 auto;padding:15px 24px 28px;display:flex;justify-content:space-between;color:#9aa4b4;font-size:10px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,15px);background:#17243a;color:#fff;padding:10px 15px;border-radius:9px;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}
body.dark{--ink:#e8edf8;--muted:#9aa8bf;--line:#29364c;--surface:#172337;--soft:#1c2a40;background:#101827;color:var(--ink)}body.dark .topbar{background:#111d30;border-color:#29364c}body.dark .brand{color:#edf2ff}body.dark .icon-button,body.dark .history-item{background:#1c2a40;color:#e8edf8;border-color:#30405a}body.dark .mode-tabs{background:#1a2940}body.dark .mode-tab.active{background:#263854;color:#b9c9ff}body.dark .key{background:#24334b;border-color:#30415c;color:#eaf0fc}body.dark .key.utility{background:#2a3a55;color:#b7c4db}body.dark .key.operator,body.dark .key.function{background:#293a60;color:#b9c9ff;border-color:#35476e}body.dark .base-grid input,body.dark .bitwise-row input,body.dark .field input,body.dark .field select{background:#1d2b41;color:#e8edf8;border-color:#35445b}body.dark .history-item:hover{background:#243550}body.dark .intro-chip{background:#1c2d50;border-color:#344a79;color:#b9c9ff}body.dark .swap-button{background:#26385a;border-color:#3a4e7b}body.dark .bitwise-row output{background:#26385a;color:#c6d3ff}
@media(max-width:760px){.shell{padding:34px 16px 25px}.intro{align-items:start;gap:15px;flex-direction:column}.intro-chip{margin:0}.workspace{grid-template-columns:1fr}.side-card{min-height:250px}.history-list{min-height:95px}.mode-tab{padding:10px 12px;font-size:11px}.mode-tab span{display:inline}.topbar{padding:0 17px}.privacy-note{font-size:0}.privacy-note .live-dot{font-size:initial}.calculator-card{padding:14px}.key{height:51px}.converter-controls{grid-template-columns:1fr 1fr;gap:12px}.swap-button{grid-column:1/-1;grid-row:2;width:42px;justify-self:center}.conversion-values{grid-template-columns:1fr 20px 1fr;gap:8px}.converter-card{padding:19px}.footer{padding-inline:17px}}
@media(max-width:390px){.mode-tab{padding:9px 8px;gap:5px}.mode-tab span{font-size:10px}.scientific-keys{gap:5px}.key.function{font-size:10px}.key{height:46px}.calculator-footer{flex-wrap:wrap;gap:8px}}