.calc-hero{padding:50px 0 65px;background:radial-gradient(circle at 88% 8%,#166e8c 0,transparent 35%),linear-gradient(125deg,#211a4a,#343178 65%,#126d70)}
.calc-hero h1{font-size:clamp(34px,5.1vw,62px);max-width:900px;margin:17px 0}
.calc-hero .hero-highlights{margin-top:16px}
.calc-main{padding-top:0;padding-bottom:50px}
.original-bar{position:relative;z-index:1;margin:-27px 0 28px;display:flex;align-items:center;gap:16px;padding:20px 23px;border:1px solid #d4e4e9;border-radius:20px;background:#fff;box-shadow:0 14px 40px #20244c1d}
.original-logo{width:54px;height:54px;flex:none;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,#39327d,#079e97);color:white;font-size:27px;font-weight:900;font-style:italic}
.original-copy{min-width:0;flex:1}
.original-copy strong{display:block;color:#22264b;font-size:16px}
.original-copy p{font-size:13px;color:#5f677d;margin:3px 0 0;line-height:1.5}
.original-link{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:12px;min-height:47px;padding:11px 18px;border-radius:13px;background:#13867c;color:white!important;font-size:14px;font-weight:800;box-shadow:0 8px 20px #067b7130}
.original-link:hover{background:#076c65}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:22px;align-items:start}
.practice-card,.info-card{background:#fff;border:1px solid #e0e3ef;border-radius:24px;box-shadow:0 10px 34px #2820520a}
.practice-card{padding:clamp(15px,2.3vw,28px);min-width:0}
.card-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:15px}
.card-head h2{font-size:clamp(24px,3vw,30px);line-height:1.18;letter-spacing:-.03em;color:#22264e;margin:6px 0 8px}
.card-head p{margin:0;font-size:13px;color:#6a7188;line-height:1.65}
.eyebrow-mini{color:#087b76;display:block;font-size:10px;font-weight:900;letter-spacing:.12em}
.practice-badge{white-space:nowrap;display:inline-flex;align-items:center;border:1px solid #b9e8dd;background:#e9faf5;color:#0c7266;font-size:10px;font-weight:900;letter-spacing:.06em;padding:6px 9px;border-radius:100px}
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.angle-switch{display:inline-flex;padding:4px;gap:4px;border:1px solid #dddff0;border-radius:12px;background:#eff1f9}
.angle-btn{border:0;border-radius:9px;background:transparent;color:#595e78;font-weight:800;padding:7px 14px;font-size:12px}
.angle-btn.active{background:#30316c;color:white;box-shadow:0 3px 10px #292c5d33}
.toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}
.tool-small{min-height:38px;padding:7px 11px;background:#f5f6fb;color:#3d4374;border:1px solid #e1e4f1;border-radius:9px;font-weight:700;font-size:12px}
.tool-small:hover{background:#ebeefb}
.calc-machine{background:linear-gradient(145deg,#1e2642,#141a30);border:1px solid #272e51;border-radius:20px;padding:clamp(10px,1.8vw,17px);box-shadow:0 12px 24px #1e244235}
.lcd{padding:12px 14px;border-radius:13px;background:linear-gradient(180deg,#d9ebf0,#edf6ef);border:2px solid #8baaaa;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:13px;color:#1e3b47;box-shadow:inset 0 3px 7px #2a454d16}
.lcd-info{display:flex;gap:13px;align-items:center;font-size:10px;letter-spacing:.065em;font-weight:900;color:#647d80}
.lcd-info span:last-child{margin-left:auto;text-align:right}
.lcd-expression{font:12px/1.4 ui-monospace,monospace;text-align:right;min-height:17px;color:#647a83;white-space:normal;word-break:break-word}
.lcd-number{text-align:right;min-height:40px;font:700 clamp(26px,3.6vw,42px)/1.24 ui-monospace,SFMono-Regular,Consolas,monospace;color:#173842;overflow-wrap:anywhere}
.lcd-message{text-align:right;font-size:10px;color:#60797d;min-height:14px}
.keypad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.key{min-width:0;min-height:47px;padding:7px 1px;display:grid;place-items:center;border-radius:9px;border:1px solid #3b456a;background:linear-gradient(180deg,#344262,#252f4d);color:#f5f7ff;font-weight:800;font-size:13px;line-height:1.15;letter-spacing:-.015em;box-shadow:0 2px 0 #11192d;user-select:none}
.key:hover{background:#46577b;border-color:#667cac}
.key:active{transform:translateY(1px);box-shadow:0 1px 0 #11192d}
.key:focus-visible{outline:3px solid #4fdbcf;outline-offset:2px;z-index:1}
.key.digit{background:linear-gradient(180deg,#f8fafc,#d8e2ef);color:#182a47;border-color:#becbdc;font-size:18px}
.key.digit:hover{background:#fff}
.key.fn{background:linear-gradient(180deg,#3f4d70,#2e3b5b)}
.key.op{background:linear-gradient(180deg,#465b83,#31436b);color:#fff;font-size:16px}
.key.memory{background:linear-gradient(180deg,#50597c,#3b456a);font-size:12px}
.key.danger{background:linear-gradient(180deg,#94516d,#743954);border-color:#a6667d}
.key.equals{grid-column:span 2;color:white;font-size:24px;background:linear-gradient(110deg,#069688,#1baab4);border-color:#10b9a9}
.key.equals:hover{background:#08ada0}
.usage-note{margin:15px 1px 0;color:#69728c;font-size:12px;line-height:1.75}
.side-column{display:grid;gap:16px}
.info-card{padding:21px}
.info-card h3{margin:7px 0 10px;font-size:21px;line-height:1.25;color:#25294d;letter-spacing:-.02em}
.info-card p{margin:0 0 12px;color:#69728a;font-size:13px;line-height:1.75}
.demo-list{display:grid;gap:8px;margin-top:18px}
.demo-list button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;border:1px solid #e3e6f1;border-radius:12px;padding:11px 12px;text-align:left;background:#f9fbff;color:#252b52}
.demo-list button:hover{background:#edf8f5;border-color:#97d6ca}
.demo-list button span{display:grid;line-height:1.45}
.demo-list strong{font-size:13px}
.demo-list small{font-size:11px;color:#79829a}
.demo-list em{font-style:normal;font-size:12px;color:#087e74;font-weight:850;white-space:nowrap}
.soft-info{background:linear-gradient(145deg,#f6f9fd,#f0f9f8)}
.explain-link{font-size:12px;font-weight:800;color:#087b76;text-decoration:underline;text-underline-offset:3px}
.links-card{display:grid;gap:11px}
.links-card>a{display:flex;justify-content:space-between;border-bottom:1px solid #e6e9f3;padding:9px 0;color:#302f64;font-weight:750;font-size:13px}
.links-card>a:last-child{border-bottom:0}
.links-card>a:hover{color:#087b76}
.calc-disclaimer{font-size:12px;color:#7a7e94;line-height:1.7;margin:25px 0 0}
.calc-machine:fullscreen{display:flex;flex-direction:column;justify-content:center;max-width:none;border-radius:0;padding:clamp(12px,3vw,50px);background:#11172a}
.calc-machine:fullscreen .lcd{max-width:950px;width:100%;margin:0 auto 20px}
.calc-machine:fullscreen .keypad{max-width:950px;width:100%;margin:0 auto;gap:10px}
.calc-machine:fullscreen .key{min-height:64px}
@media(max-width:1050px){.calc-grid{grid-template-columns:1fr}.side-column{grid-template-columns:repeat(2,minmax(0,1fr))}.links-card{grid-column:span 2}.info-card{min-width:0}}
@media(max-width:740px){.calc-hero{padding:40px 0 65px}.original-bar{flex-wrap:wrap}.original-link{width:100%}.side-column{grid-template-columns:1fr}.links-card{grid-column:auto}.hub-container{width:min(1160px,calc(100% - 26px))}.card-head{display:block}.practice-badge{margin-top:8px}.calc-machine{padding:9px}.keypad{gap:5px}.key{border-radius:7px;min-height:46px;font-size:10.5px;padding:6px 0}.key.digit{font-size:17px}.key.op{font-size:13px}.key.memory{font-size:10px}.lcd{padding:10px 11px;min-height:121px}.lcd-number{font-size:27px}.toolbar-actions{margin-left:auto}.calc-machine:fullscreen .key{min-height:46px}}
@media(max-width:410px){.practice-card{padding:12px}.key{min-height:43px;font-size:9.5px}.key.digit{font-size:16px}.key.memory{font-size:9px}.original-bar{padding:14px}.card-head h2{font-size:24px}.original-copy{flex-basis:calc(100% - 70px)}.lcd-info{font-size:9px}}
/* Keep the current page visible in the navigation on narrow phones. */
@media(max-width:720px){
  .hub-header nav{overflow:visible;flex-wrap:wrap;gap:5px;padding-bottom:0}
  .hub-header nav a{font-size:11px;padding:5px 8px}
}