:root{--green:#1f8f55;--ink:#25302f;--cream:#f1eee5}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:ui-rounded,"Avenir Next","Segoe UI",sans-serif;color:var(--ink);background:#d2cec3}.shell{height:100%;display:grid;grid-template-rows:70px minmax(0,1fr) 38px;gap:7px;padding:10px 18px;background:radial-gradient(circle at 50% 10%,#eff1ea,#cbc7bc)}header,footer{width:min(1200px,100%);margin:auto;display:flex;align-items:center;justify-content:space-between}header small{font-size:9px;font-weight:900;letter-spacing:.18em;color:#718076}h1{margin:2px 0 0;font-size:29px;letter-spacing:-.05em}.stats{display:flex;gap:7px}.stats span{min-width:88px;padding:7px 10px;background:#eff1ea;border:1px solid #c3c9c1;box-shadow:0 3px rgba(47,55,49,.08);font-size:8px;font-weight:900;letter-spacing:.11em}.stats b{display:block;margin-top:2px;font-size:16px;letter-spacing:0}.workbook{position:relative;width:min(1200px,100%);height:100%;margin:auto;overflow:hidden;border:1px solid #aeb6ad;border-radius:4px;background:#fff;box-shadow:0 16px 48px rgba(53,52,45,.2);padding-top:34px}.formula{position:absolute;left:0;right:0;top:0;height:34px;display:grid;grid-template-columns:65px 33px 1fr;align-items:center;background:#f1f3ef;border-bottom:1px solid #c8cec6;font:12px Arial,sans-serif}.formula b{height:25px;margin-left:5px;display:grid;place-items:center;background:white;border:1px solid #b6beb5}.formula span{text-align:center;font-style:italic;color:#778079}.formula i{height:25px;display:flex;align-items:center;padding:0 8px;background:white;border-left:1px solid #c2c9c1;font-style:normal;color:#4e5b53}canvas{display:block;width:100%;height:100%}.intro{position:absolute;left:82px;bottom:17px;padding:9px 12px;background:rgba(255,255,255,.94);border-left:4px solid var(--green);box-shadow:0 3px 12px rgba(38,50,44,.12);pointer-events:none;transition:.2s}.intro.hidden{opacity:0}.intro b,.intro span{display:block}.intro b{font-size:10px;letter-spacing:.1em}.intro span{margin-top:3px;font-size:10px;color:#68726c}.pause,.game-over{position:absolute;inset:34px 0 0;display:none;place-content:center;text-align:center;background:rgba(245,247,242,.9);backdrop-filter:blur(3px);z-index:5}.pause.show,.game-over.show{display:grid}.pause b{font-size:44px}.pause span{font-weight:800}.game-over small{color:#b54135;font-weight:900;letter-spacing:.14em}.game-over h2{margin:4px;font-size:43px;letter-spacing:-.05em}.game-over p{margin:6px 0 18px}.game-over button{justify-self:center;border:0;background:#1f6f48;color:#fff;padding:12px 18px;font:900 12px inherit;letter-spacing:.1em;box-shadow:4px 4px 0 #efbd18;cursor:pointer}.dpad{display:none;position:absolute;right:12px;bottom:12px;width:132px;height:92px}.dpad button{position:absolute;width:43px;height:43px;border:0;border-radius:5px;background:rgba(36,48,45,.86);color:white;font-size:20px;touch-action:manipulation}.dpad button:nth-child(1){left:44px;top:0}.dpad button:nth-child(2){left:0;top:45px}.dpad button:nth-child(3){left:44px;top:45px}.dpad button:nth-child(4){right:0;top:45px}footer{font-size:10px;font-weight:800;color:#657169}footer b{display:inline-grid;place-items:center;min-width:25px;height:22px;padding:0 6px;background:#eff1ea;border:1px solid #aab3aa;border-radius:3px;color:#25302f}footer strong{color:#1f8050;letter-spacing:.1em}@media(max-width:760px){.shell{padding:5px;grid-template-rows:54px minmax(0,1fr) 27px}.stats span:nth-child(3),.stats span:nth-child(4){display:none}.stats span{min-width:68px;padding:5px 7px}h1{font-size:20px}header small{font-size:7px}.dpad{display:block}.intro{left:55px;bottom:115px;max-width:240px}.intro span{font-size:9px}footer span:nth-child(3){display:none}}