*{box-sizing:border-box}body{margin:0;background:#101b2c;color:#f5ecd9;font:16px system-ui,sans-serif}main{max-width:960px;margin:auto;padding:32px 24px}header{border-bottom:1px solid #4e5870;padding-bottom:18px}.eyebrow{letter-spacing:.2em;font-size:11px;color:#d9ba78}h1{font:52px Georgia,serif;margin:12px 0}h1 span{font-size:25px;color:#d9ba78;white-space:nowrap}header p{color:#b8c6d8}.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}button,select{font:inherit;color:inherit;background:#24354d;border:1px solid #71829b;border-radius:10px;padding:11px 17px;cursor:pointer}button:hover,button:focus-visible{outline:3px solid #d9ba78;outline-offset:2px}button:disabled{opacity:.4;cursor:default}#board{position:relative;width:100%;aspect-ratio:600/430;background:radial-gradient(ellipse at center,#223451,#111c30);border:1px solid #536077;border-radius:18px;overflow:hidden}svg,#nodes{position:absolute;width:100%;height:100%;inset:0}.node{position:absolute;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;padding:0;background:#20344d url(material.webp) center/180px;border:2px solid #e6d5a7;text-shadow:0 1px 3px black;font-weight:800;box-shadow:0 4px 12px #0008}.node.active{outline:5px solid #70d5c1}.node.suggest{outline:5px dashed #f5cd75}.node.used{border-color:#70d5c1}#status{min-height:28px;color:#f5cd75}details{background:#1a293e;padding:18px;border-radius:14px;line-height:1.6}summary{cursor:pointer;font-weight:700}footer{margin-top:26px;font-size:12px;color:#aab9cf}a{color:#d9ba78}line{stroke:#71829b;stroke-width:7;stroke-linecap:round}line.visited{stroke:#70d5c1;stroke-width:9}line.suggest{stroke:#f5cd75;stroke-dasharray:8 8}@media(max-width:500px){main{padding:20px 14px}h1{font-size:39px}h1 span{display:block;font-size:23px;margin-top:6px}.node{width:39px;height:39px}button,select{padding:10px 12px}.toolbar{gap:8px}details{padding:14px}}