.starter{background:var(--cream);border:2px solid;padding:20px;box-shadow:var(--shadow)}
.brief ol{padding-left:1.4rem;line-height:1.65}.tree.mini{height:125px;position:relative;margin:auto;max-width:330px}.tree.mini .node{position:absolute;border:2px solid;background:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;z-index:2}.tree.mini .root{left:calc(50% - 24px);top:0}.tree.mini .left{left:22%;top:77px}.tree.mini .right{right:22%;top:77px;border-style:dashed}.tree.mini .edge{position:absolute;width:2px;height:82px;background:var(--ink);top:26px;left:50%;transform-origin:top}.tree.mini .el{transform:rotate(49deg)}.tree.mini .er{transform:rotate(-49deg)}
.tree-stage{height:330px;max-width:700px;margin:20px auto;position:relative;background:#fff8e9;border:2px dashed var(--line);overflow:hidden}.tree-stage svg{position:absolute;inset:0;width:100%;height:100%}.tree-stage path{fill:none;stroke:var(--ink);stroke-width:3}.tree-node{position:absolute;width:54px;height:54px;border:3px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink);z-index:2}.tree-node.selected{background:var(--sun)}.tree-node.done{background:#d8f0df}.tree-node.wrong{background:#ffe1d3;animation:shake .18s 2}.n7{left:calc(50% - 27px);top:15px}.n4{left:calc(27% - 27px);top:108px}.n10{right:calc(27% - 27px);top:108px}.n3{left:calc(15% - 27px);top:213px}.n5{left:calc(39% - 27px);top:213px}.n8{right:calc(39% - 27px);top:213px}.n12,.n13{right:calc(15% - 27px);top:213px}
.trace-strip{border:2px solid;background:#fff;padding:12px;max-width:700px;margin:12px auto}.help-row{display:flex;gap:10px;margin-top:14px}.skeleton{display:grid;gap:12px;background:#eef4ea;border:2px solid;margin-top:18px;padding:16px}.skeleton label,.bug-grid label{display:grid;gap:7px}.skeleton select,.bug-grid select{width:100%;padding:10px;border:2px solid;background:#fff;font:inherit}.locked{opacity:.5}.locked>*{pointer-events:none}.complete-tree{display:grid;gap:45px;max-width:650px;margin:24px auto;padding:20px;background:#fff8e9;border:2px dashed}.level{display:flex;justify-content:center}.level.two{justify-content:space-around}.level.four{justify-content:space-between}.complete-tree button,.complete-tree .fixed{width:54px;height:54px;border-radius:50%;border:3px solid;display:grid;place-items:center;background:#fff;font:inherit}.complete-tree button{border-style:dashed;cursor:pointer}.complete-tree button.filled{border-style:solid;background:#d8f0df}.bug-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.bug-grid article{border:2px solid;padding:14px;background:#fff8e9}.full-solution{margin-top:18px;border-top:4px double;padding-top:18px}.state-btn.active{outline:4px solid var(--blue);outline-offset:3px}button:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:4px solid var(--blue);outline-offset:3px}@keyframes shake{50%{transform:translateX(6px)}}
@media(max-width:750px){.bug-grid{grid-template-columns:1fr}.tree-stage{height:300px}.tree-node{width:48px;height:48px}.n7{left:calc(50% - 24px)}.n4{left:calc(27% - 24px)}.n10{right:calc(27% - 24px)}.n3{left:calc(15% - 24px)}.n5{left:calc(39% - 24px)}.n8{right:calc(39% - 24px)}.n12,.n13{right:calc(15% - 24px)}}