:root{color-scheme:dark;--ink:#f5eddc;--muted:#b5c8be;--teal:#112e2e;--copper:#efb782}*{box-sizing:border-box}body{margin:0;background:#0b2123;color:var(--ink);font:16px/1.6 system-ui,-apple-system,sans-serif;background-image:radial-gradient(ellipse at 30% 0,#20443e,transparent 65%)}main{max-width:1120px;margin:auto;padding:32px 24px}header{display:flex;justify-content:space-between;align-items:center;gap:16px}.eyebrow{font-size:10px;letter-spacing:.25em;color:var(--copper);margin:0 0 12px}h1{font:52px/.95 Georgia,serif;font-weight:400;margin:0}h1 span{display:block;font:17px/2.1 system-ui;letter-spacing:.15em;color:var(--muted)}button{border:1px solid #58766b;border-radius:10px;background:#1d3b37;color:var(--ink);font:600 14px/1.3 system-ui;padding:12px 18px;cursor:pointer;min-height:44px;transition:background .15s,transform .15s}button:hover{background:#36564a}button:active{transform:translateY(1px)}button:focus-visible,canvas:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ffc997;outline-offset:4px}button:disabled{opacity:.42;cursor:default}button[hidden]{display:none}small{font-size:10px;opacity:.6;margin-left:6px}.intro{display:grid;grid-template-columns:1fr 1.5fr;gap:45px;align-items:center;margin:18px 0 22px}.intro p:first-child{font:23px/1.4 Georgia,serif;max-width:300px}.intro p:last-child{color:var(--muted);font-size:14px;max-width:580px}nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}nav button{width:55px;padding:10px 5px;font-size:14px}nav button.active{background:#eec79d;color:#223d36;border-color:#eec79d}nav button .earned{display:block;font-size:8px;letter-spacing:2px;min-height:10px}.play{background:#102c2c;border:1px solid #426456;border-radius:19px;overflow:hidden;box-shadow:0 18px 70px #0004}.bar{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:18px 24px}.bar h2{font:22px/1.2 Georgia,serif;margin:0}.bar #stats{font-size:12px;color:var(--muted)}.stage{position:relative;background:#153b39 url('garden.webp') center/cover}canvas{display:block;width:100%;height:auto;touch-action:none}.legend{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:10px;color:#d5e7dc;pointer-events:none;text-shadow:0 1px 4px #000}.dot,.ghost{display:inline-block;width:8px;height:8px;background:#72b39d;border:1px solid #b1d8bf;border-radius:100%;margin:0 4px 0 14px}.ghost{background:transparent;border:1px dashed #f6cfa0;border-radius:1px}#message{min-height:55px;padding:13px 24px;font-size:14px;background:#183a33;color:#f3d3a5}.controls{display:flex;gap:28px;padding:20px 24px;align-items:center;justify-content:space-between}.directions{text-align:center;min-width:146px}.directions button{padding:10px;width:44px;margin:2px;min-height:40px}.hinges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:240px}.hinges button{padding:13px 15px}.hinges span{display:block;width:100%;font-size:11px;text-align:center;color:var(--muted)}.tools{display:flex;gap:8px;flex-wrap:wrap;max-width:350px}.tools button{padding:10px 14px;font-size:12px}#next{background:#e8c19b;color:#193a30}footer{padding:25px 10px;color:var(--muted);font-size:12px}summary{cursor:pointer;color:#e3cfad}details p{max-width:850px}a{color:#efc494}.footnote{text-align:center;font:16px Georgia,serif;margin-top:30px}#collection{text-align:center;color:var(--copper)}@media(min-width:850px){.stage{margin:0 20px;border:1px solid #43675b;border-radius:12px;overflow:hidden}canvas{max-height:630px;object-fit:contain}}@media(max-width:650px){main{padding:20px 12px}h1{font-size:40px}h1 span{font-size:12px}.intro{display:block;margin:12px 0}.intro p:first-child{font-size:19px;max-width:none;margin-bottom:8px}.intro p:last-child{font-size:12px;margin-top:0}.eyebrow{font-size:8px}header>button{padding:10px;font-size:11px}nav{gap:5px;margin-bottom:12px}nav button{width:calc((100% - 35px)/8);min-width:27px;min-height:40px}.bar{padding:14px 12px}.bar h2{font-size:17px}.bar #stats{font-size:10px;max-width:100px;text-align:right}#message{padding:10px 12px;font-size:12px;min-height:60px}.controls{padding:12px 8px;gap:8px;flex-wrap:wrap;justify-content:center}.hinges{flex:1;max-width:205px}.hinges button{padding:12px}.tools{max-width:none;width:100%;justify-content:center}.tools button{padding:10px}.legend{font-size:8px;bottom:4px}.footnote{font-size:14px}}