*{box-sizing:border-box}body{margin:0;background:#f4f0df;color:#253a30;font:16px Georgia,serif}main{max-width:900px;margin:auto;padding:24px}header span{letter-spacing:3px;font:12px system-ui;color:#637367}h1{font-size:42px;margin:12px 0}header p{margin:0 0 20px}.toolbar,.stats,.foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.toolbar{margin-bottom:16px}button,select{font:600 15px system-ui;padding:13px;border:1px solid #566f5a;border-radius:8px;background:#fffdf3;color:#253a30;cursor:pointer}button:active,#start{background:#284c3b;color:white}.stats{justify-content:space-between;background:#e4e7d3;padding:12px;border-radius:12px 12px 0 0;font:15px system-ui}canvas{width:100%;display:block;background:#718c58;border-radius:0 0 12px 12px;touch-action:none}.foot{margin:16px 0}.foot p{flex:1;min-width:220px;line-height:1.5}#bark{background:#e6b951}details{font:13px/1.6 system-ui;color:#59685b}@media(max-width:600px){main{padding:14px}h1{font-size:31px}.toolbar{gap:8px}select{max-width:215px}.stats{font-size:12px;padding:10px}.foot{gap:8px}.foot p{font-size:15px;margin:0}button{min-height:46px}}