:root{font-family:Avenir Next,PingFang SC,sans-serif;color:#342d25;background:#eee7d7}*{box-sizing:border-box}body{margin:0;background:#eee7d7}button,input{font:inherit}main{max-width:1200px;margin:auto;padding:35px 30px 80px}header{display:grid;grid-template-columns:180px 1fr;gap:35px;align-items:center;border-bottom:1px solid #9b8d77;padding-bottom:25px}.brand{font-family:serif;font-size:45px;line-height:.9;border:2px solid #d7653f;width:145px;height:145px;border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-5deg);color:#d7653f}.brand b{font-size:50px}header span{font-size:11px;letter-spacing:.2em;color:#817565}h1{font-family:Songti SC,serif;font-size:clamp(40px,6vw,68px);font-weight:400;line-height:1.1;margin:12px 0}header p{color:#706656}.metrics{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #9b8d77}.metrics div{padding:22px;border-right:1px solid #9b8d77}.metrics div:last-child{border:0}.metrics small{display:block;color:#746a5c}.metrics strong{font:54px Georgia;color:#d7653f;margin-right:8px}.metrics i{font-style:normal}.work{display:grid;grid-template-columns:230px 1fr;margin-top:30px;border:1px solid #80735e;background:#f6f0e3}.work aside{padding:22px;border-right:1px solid #80735e}.work h2,.save h2,.archive h2{font-family:Songti SC,serif;font-weight:400;margin:0 0 20px}.work label{display:block;font-size:12px;margin-bottom:20px}.work label span{display:flex;align-items:center;margin-top:6px}.work input{width:85px;border:0;border-bottom:1px solid;background:transparent;padding:7px}.work aside p{font-size:12px;line-height:1.8;color:#756b5d;border-top:1px dashed #a99d88;padding-top:15px}.work button,.save button{background:#342d25;color:#f3ead9;border:0;padding:10px 15px;cursor:pointer}.work button:disabled,.save button:disabled{opacity:.35}.canvas{min-width:0;padding:15px}.canvas svg{width:100%;display:block;background:#ede4d2;touch-action:none;cursor:crosshair}.route{fill:none;stroke:#d7653f;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.canvas circle{fill:#f6f0e3;stroke:#342d25;stroke-width:4;cursor:grab}.node{font-size:11px;pointer-events:none}.dist{font-size:12px;fill:#b34b2d;font-weight:700;text-anchor:middle;paint-order:stroke;stroke:#eee7d7;stroke-width:5}.hint{fill:#938775;font-size:18px}.save{display:grid;grid-template-columns:1fr 1fr 140px;gap:20px;align-items:center;margin-top:22px;background:#d7653f;color:#fff;padding:22px}.save h2{margin:0}.save p{margin:5px 0 0;font-size:12px}.save input{padding:12px;background:#f7eee1;border:0}.archive{margin-top:35px}.archive h2{border-bottom:1px solid;padding-bottom:12px}.archive h2 span{float:right;color:#d7653f}.archive article{display:flex;border-bottom:1px dashed #a99d88}.archive button{border:0;background:transparent;cursor:pointer}.archive .load{flex:1;text-align:left;padding:15px}.archive .load b,.archive .load span{display:block}.archive .load span{font-size:12px;color:#7a7062;margin-top:5px}.delete{color:#a7462d}.empty{color:#887d6c;text-align:center;padding:35px}@media(max-width:720px){main{padding:25px 14px 60px}header{grid-template-columns:90px 1fr}.brand{width:80px;height:80px;font-size:24px}.brand b{font-size:27px}h1{font-size:35px}.metrics strong{font-size:33px}.metrics div{padding:15px 7px}.work{grid-template-columns:1fr}.work aside{border:0;border-bottom:1px solid}.save{grid-template-columns:1fr}.save button{width:100%}}