:root { color-scheme: light; font-family: system-ui, sans-serif; color: #292d29; background: #f2eee5; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
header, footer { max-width: 1100px; margin: auto; display: flex; justify-content: space-between; gap: 20px; }
header { padding: 30px 32px; font-size: 10px; letter-spacing: .16em; }
header a { font-weight: 750; }
header span { color: #8c8c80; }
main { max-width: 1020px; margin: 65px auto 80px; display: grid; grid-template-columns: 1fr 390px; gap: 32px 80px; padding: 0 32px; align-items: start; }
.intro { padding-top: 35px; }
.eyebrow { font-size: 10px; letter-spacing: .22em; color: #737e6f; }
h1 { font-family: serif; font-size: 90px; font-weight: 500; letter-spacing: -.08em; margin: 35px 0 22px; }
h1 span { color: #c3714f; }
.intro > p:last-child { font-family: serif; font-size: 14px; letter-spacing: .12em; color: #797e73; }
.calculator { background: #dddcd2; padding: 23px; border: 1px solid #d1d0c6; border-radius: 19px; box-shadow: 0 20px 40px #484f3c12, 0 4px 0 #c3c4b8; }
.topline { display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .12em; margin-bottom: 17px; color: #72786b; }
#status { letter-spacing: 0; }
.screen { background: #eaf0df; border: 1px solid #c2cbb6; border-radius: 7px; padding: 17px; box-shadow: inset 0 2px 4px #6d7e5812; }
label { font-size: 8px; letter-spacing: .16em; color: #7c8a70; }
input { display: block; width: 100%; text-align: right; border: 0; outline: none; background: transparent; margin: 12px 0; color: #4e6145; font-family: monospace; font-size: 17px; }
input:focus { box-shadow: 0 1px #98a78a; }
output { display: block; min-height: 45px; text-align: right; font-family: monospace; font-size: 33px; overflow-wrap: anywhere; }
output.error { color: #a34833; font-size: 14px; padding-top: 10px; }
.toolbar { display: flex; justify-content: space-between; margin: 16px 0 13px; }
.toolbar button, .history-heading button { border: 0; background: none; color: #626c5b; padding: 4px 6px; font-size: 11px; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 2px solid #af684b; outline-offset: 3px; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.keys button, .functions button { border: 1px solid #cccbbf; background: #f6f3eb; border-radius: 7px; height: 55px; color: #323a2d; box-shadow: 0 3px 0 #c3c2b6; font-size: 21px; }
.keys button:hover, .functions button:hover { background: #fffdf7; }
.keys button:active, .functions button:active { transform: translateY(2px); box-shadow: none; }
.keys .utility { background: #cdcec2; font-size: 15px; }
.keys .operator { background: #bec8b4; }
.keys .equal { background: #bd7656; color: white; border-color: #ae694b; }
.keys .equal:hover { background: #ca8260; }
.functions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 13px; }
.functions[hidden] { display: none; }
.functions button { font-size: 12px; height: 35px; }
.hint { margin: 17px 0 0; text-align: center; font-size: 9px; color: #7e8376; }
aside { grid-column: 1; grid-row: 2; margin-top: -170px; max-width: 330px; }
.history-heading { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9d8cc; }
h2 { font-size: 12px; font-weight: 500; letter-spacing: .12em; }
#empty { color: #939689; font-size: 11px; margin-top: 20px; }
ol { list-style: none; padding: 0; margin: 0; }
li button { border: 0; border-bottom: 1px solid #ddddd0; width: 100%; background: none; text-align: left; padding: 12px 0; color: #747d6b; font: 12px monospace; overflow-wrap: anywhere; }
li strong { display: block; margin-top: 5px; color: #374331; font-size: 17px; font-weight: 500; }
footer { padding: 25px 32px 30px; border-top: 1px solid #deddd2; font-size: 9px; letter-spacing: .08em; color: #7a8072; }
@media(max-width: 760px) {
 header { padding: 24px; } header span { display: none; }
 main { display: flex; flex-direction: column; align-items: center; margin: 15px auto 40px; padding: 0 22px; gap: 30px; }
 .intro { padding: 0; text-align: center; } h1 { font-size: 65px; margin: 15px 0; }
 .calculator { width: 100%; max-width: 390px; }
 aside { margin: 10px 0 0; width: 100%; max-width: 390px; }
 footer { flex-wrap: wrap; padding: 25px; }
}