:root{color-scheme:light;--ink:#203d34;--paper:#fffdf3;--muted:#57695a}*{box-sizing:border-box}body{margin:0;background:#abc2a2;color:var(--ink);font:14px/1.4 system-ui,sans-serif}main{height:100dvh;overflow:hidden;position:relative}canvas{width:100%;height:100%;display:block;touch-action:none}.top{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;gap:15px;pointer-events:none}.brand{display:flex;align-items:center;gap:12px}.sprig{font-size:44px}h1{font:32px Georgia,serif;letter-spacing:-1px;margin:0}.brand span:not(.sprig){font-size:9px;letter-spacing:2.5px;font-weight:700}.resources{display:flex;background:var(--paper);border:1px solid #d9dfc8;box-shadow:0 5px 20px #203d3414;border-radius:14px;padding:12px 22px;gap:30px;align-items:center}.resources>span{white-space:nowrap;font-size:17px}.resources small{display:block;text-align:center;font-size:10px;color:var(--muted)}.timebox{position:absolute;top:113px;left:28px;display:flex;gap:20px;align-items:center}.timebox b{display:block;font:20px Georgia,serif}.timebox span{font-size:12px;color:#304c3b}.speeds{display:flex;background:var(--paper);padding:4px;border-radius:10px;gap:2px}button{font:inherit;color:var(--ink);background:var(--paper);border:0;cursor:pointer;border-radius:7px;padding:7px 10px}button:hover{background:#e9edda}button.on{background:var(--ink);color:var(--paper)}button:focus-visible{outline:3px solid #ba592c;outline-offset:2px}.bottom{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(920px,calc(100% - 40px))}.tools{display:flex;padding:9px;background:var(--paper);border:1px solid #d5dcc6;border-radius:17px;box-shadow:0 6px 30px #203d3426;gap:5px}.tool{flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;padding:9px 5px;position:relative}.tool .glyph{font-size:26px;line-height:32px}.tool small{font-size:10px;color:#58684c}.tool.on small{color:#e1e8c9}.foot{display:flex;align-items:center;justify-content:space-between;padding:9px 3px;font-size:11px}.foot button{background:#f4f6e8;padding:5px 9px;font-size:11px}.objective{position:absolute;right:28px;top:113px;background:#fffdf3ed;padding:12px 18px;border-radius:12px;font-size:12px;max-width:250px}.objective strong{display:block;font:18px Georgia,serif;margin-bottom:4px}.toast{position:absolute;bottom:180px;left:50%;transform:translateX(-50%);background:#203d34;color:#fffdf3;padding:10px 20px;border-radius:30px;font-size:12px;max-width:90%;text-align:center;transition:opacity .5s;pointer-events:none}aside{position:absolute;top:196px;right:28px;width:240px;background:var(--paper);padding:18px;border-radius:14px;box-shadow:0 6px 30px #203d3426}aside h2{font:23px Georgia,serif;margin:0 0 8px}aside p{margin:8px 0;font-size:12px}aside button{background:#e8ecd8}aside .close{float:right} @media(max-width:650px){.top{top:14px;left:16px;right:16px;display:block}.brand h1{font-size:27px}.sprig{font-size:34px}.brand span:not(.sprig){font-size:8px}.resources{margin-top:12px;justify-content:space-between;padding:7px 14px;gap:10px;border-radius:10px}.resources>span{font-size:15px}.resources small{font-size:9px}.timebox{top:143px;left:16px;gap:12px}.timebox b{font-size:18px}.timebox span{font-size:10px}.objective{top:207px;right:12px;max-width:175px;padding:8px 12px;font-size:10px}.objective strong{font-size:16px}.bottom{bottom:8px;width:calc(100% - 16px)}.tools{padding:5px;gap:1px;overflow-x:auto}.tool{min-width:55px;font-size:10px;padding:6px 3px}.tool .glyph{font-size:22px}.foot{align-items:flex-start;gap:8px}.foot>span{max-width:110px;font-size:10px}.foot>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px}.foot button{padding:5px 7px;font-size:10px}.toast{bottom:153px;width:max-content;font-size:11px}aside{top:255px;right:12px;width:205px;max-height:220px;overflow:auto;padding:13px}}
