:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#172c36;background:#f2f5f3;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:#126158}header{max-width:1120px;margin:auto;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;align-items:center}header>a{font-weight:800;text-decoration:none}nav{display:flex;gap:20px;font-size:14px}main{max-width:1080px;margin:12px auto 40px;padding:0 20px}.workspace{display:grid;grid-template-columns:minmax(300px,410px) minmax(280px,1fr);gap:36px;align-items:start}.handheld{padding:24px 22px 20px;background:#243945;border:1px solid #1b2a32;border-radius:28px;box-shadow:0 16px 35px #1733411e, inset 0 1px #ffffff20;color:#f3f7f9}.brand{display:flex;justify-content:space-between;align-items:center;padding:0 3px 17px}.brand-name{font-size:12px;font-weight:800;letter-spacing:3px;color:#9bd8cf}h1{font-size:23px;line-height:1.2;margin:3px 0;font-weight:600}.model{font-size:11px;color:#bacbd2;text-align:right}.screen{background:#e4e8d5;color:#263522;border:6px solid #192b35;border-radius:13px;padding:10px 12px;min-height:139px;box-shadow:inset 0 2px 6px #19332222}.indicators{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:.8px;min-height:16px}.previous{font:12px ui-monospace,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:19px;color:#596149}#expression{border:0;background:transparent;color:#24301f;font:21px ui-monospace,monospace;width:100%;padding:3px 0;outline-offset:3px;border-radius:0;min-height:32px}#answer{display:block;text-align:right;font:25px ui-monospace,monospace;overflow-wrap:anywhere;min-height:35px}.fraction{display:inline-flex;flex-direction:column;vertical-align:middle;align-items:center;font-size:19px;line-height:1.2}.fraction span:first-child{border-bottom:1px solid;padding:0 6px}.fraction span:last-child{padding:0 6px}#error{font-size:12px;min-height:18px;color:#ffd3b7;margin:7px 2px;overflow-wrap:anywhere}.top-keys{display:grid;grid-template-columns:repeat(3,1fr) 1.7fr;gap:9px;align-items:end;margin-bottom:12px}.arrows{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.arrows button{padding:3px;min-height:28px;line-height:1;color:#163d43;background:#d2dee1;border:0;border-radius:5px}.arrows button:first-child{grid-column:2}.arrows button:nth-child(2){grid-column:1}.arrows button:last-child{grid-column:2}.menu-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}.keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px 9px}.key-wrap{min-width:0}.key-wrap small{display:block;color:#9cddd3;font-size:12px;letter-spacing:-.3px;text-align:center;height:14px;white-space:nowrap}.key{display:block;width:100%;padding:7px 2px;min-height:35px;background:#3b5362;color:#fff;border:1px solid #52707c;border-bottom:3px solid #142630;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}.key.num{background:#dce4e6;color:#18313e;border-color:#b8c8cd;border-bottom-color:#122733;font-size:19px;font-weight:500}.key.op{background:#a8cbd0;color:#153640;border-color:#80abb3;border-bottom-color:#122733;font-size:19px}.key.enter,.key.shift{background:#8fe0ce;border-color:#77bdae;border-bottom-color:#16392f;color:#173c33}.key:active,.key[aria-pressed=true]{transform:translateY(1px);background:#e9c873;color:#142c33}.key:hover{filter:brightness(1.12)}.key-help{font-size:11px;color:#bdd0d8;line-height:1.5;margin:16px 0 0;text-align:center}.workbench{padding-top:8px;min-width:0}.bench-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:10px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;color:#487168}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d79236;outline-offset:3px}.workbench button{border:1px solid #bdd0cc;background:white;color:#25473f;border-radius:8px;padding:9px 13px;font-size:13px}.workbench button.primary{background:#185c50;color:white;border-color:#185c50}.workbench h2{font-size:21px;letter-spacing:-.4px;margin:0 0 12px}.workbench p{line-height:1.55;font-size:16px}.muted{color:#62716e;font-size:12px!important}.tool-options{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.tool-panel{background:#fff;border:1px solid #d4e1dc;border-radius:15px;padding:20px;margin-bottom:22px}label{font-size:14px;font-weight:650;display:block;margin:12px 0 6px}.workbench input,.workbench textarea,.workbench select{font:15px ui-monospace,monospace;color:#193932;width:100%;border:1px solid #b9ccc5;padding:10px;border-radius:7px;background:#fbfdfc}.workbench textarea{resize:vertical}.workbench form>button{margin-top:15px}.tool-result{margin:15px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.7 ui-monospace,monospace;max-height:370px;overflow:auto;color:#144b3f}.tool-result.error{color:#9e2929}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.history,.about{border-top:1px solid #cbd9d3;padding:18px 0}summary{cursor:pointer;font-weight:650;font-size:15px}#history{list-style:none;margin:12px 0 0;padding:0;max-height:340px;overflow:auto}#history li{margin-bottom:8px}#history button{width:100%;text-align:left;overflow-wrap:anywhere;font-family:ui-monospace,monospace;background:#fff}footer{padding:20px;text-align:center;color:#657b71;font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:8px;background:white;padding:12px;z-index:10}@media(max-width:720px){header{padding:16px;font-size:14px}nav{gap:12px;font-size:12px}main{padding:0 12px;margin-top:4px}.workspace{grid-template-columns:minmax(0,1fr);gap:20px;max-width:430px;margin:auto}.handheld{padding:20px 17px 15px}.workbench{padding:0 4px}.keys{gap:10px 8px}.key{min-height:37px}.screen{min-height:140px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
:root:has(body.embed) { background: #fff }
body.embed header, body.embed footer { display: none }
body.embed main { padding: 0; margin: 0 }
body.embed .workspace { display: block; max-width: 420px; margin: 0 auto }
body.embed .handheld { border-radius: 0; box-shadow: none }
body.embed .workbench { padding: 14px }

/* The learning path uses the same calculator engine with only the keys needed for its first practices. */
body.learning-simple .top-keys,body.learning-simple .menu-keys,body.learning-simple .workbench,body.learning-simple .key-help{display:none}
body.learning-simple .keys{grid-template-columns:repeat(4,minmax(0,1fr))}
body.learning-simple .keys .key-wrap{display:none}
body.learning-simple .keys .key-wrap:has([data-key="0"]),body.learning-simple .keys .key-wrap:has([data-key="1"]),body.learning-simple .keys .key-wrap:has([data-key="2"]),body.learning-simple .keys .key-wrap:has([data-key="3"]),body.learning-simple .keys .key-wrap:has([data-key="4"]),body.learning-simple .keys .key-wrap:has([data-key="5"]),body.learning-simple .keys .key-wrap:has([data-key="6"]),body.learning-simple .keys .key-wrap:has([data-key="7"]),body.learning-simple .keys .key-wrap:has([data-key="8"]),body.learning-simple .keys .key-wrap:has([data-key="9"]),body.learning-simple .keys .key-wrap:has([data-key="add"]),body.learning-simple .keys .key-wrap:has([data-key="sub"]),body.learning-simple .keys .key-wrap:has([data-key="mul"]),body.learning-simple .keys .key-wrap:has([data-key="div"]),body.learning-simple .keys .key-wrap:has([data-key="lparen"]),body.learning-simple .keys .key-wrap:has([data-key="rparen"]),body.learning-simple .keys .key-wrap:has([data-key="dot"]),body.learning-simple .keys .key-wrap:has([data-key="clear"]),body.learning-simple .keys .key-wrap:has([data-key="enter"]){display:block}
body.learning-simple .key-wrap small{visibility:hidden;height:0}