@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#263c37;background:#f8faf8;font-size:14px}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:270px minmax(400px,1fr) 280px;height:100vh}aside{padding:30px 24px;background:#fff;border-right:1px solid #e2e9e5;overflow:auto}.brand{color:inherit;text-decoration:none;font-size:26px;display:block;margin-bottom:55px}.brand span{display:block;font-size:9px;letter-spacing:2.8px;margin:8px 0 0 30px}small,.eyebrow{font-size:10px;letter-spacing:1.7px;color:#86988e}h1,h2,h3{font-family:Manrope,sans-serif}h2{font-size:25px;line-height:1.35;letter-spacing:-.7px}p{font-size:13px;color:#819087;line-height:1.8}.drop{border:1px dashed #9cbbac;border-radius:12px;background:#f4f8f5;display:flex;align-items:center;flex-direction:column;padding:23px 8px;gap:10px;font-size:27px;cursor:pointer;margin:25px 0}.drop strong{font-size:13px}.drop span{font-size:11px;color:#83948a}footer{margin-top:45px;font-size:12px;color:#4d7662}footer span{display:block;font-size:10px;line-height:1.8;color:#99a59e;margin-top:8px}main{display:flex;flex-direction:column;min-width:0;padding:30px}header{display:flex;align-items:center;justify-content:space-between;gap:15px}h1{font-size:23px;font-weight:700}h1 span{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:400;background:#eaf0eb;color:#698273;border-radius:20px;padding:6px 10px;margin-left:10px}button{font-family:inherit;border:1px solid #dfe7e1;background:white;border-radius:7px;padding:10px 12px;cursor:pointer;color:#50695c;font-size:12px}button:hover{background:#edf5ef}button:disabled{opacity:.5;cursor:default}.primary{background:#326e53;color:#fff;border-color:#326e53}.primary:hover{background:#275a43}.toolbar{display:flex;justify-content:space-between;margin:24px 0 14px;gap:10px}.toolbar>div{display:flex;gap:6px;align-items:center}#zoom{min-width:48px;text-align:center;font-size:11px}#workspace{position:relative;flex:1;min-height:320px;background:#edf1ec;border:1px solid #dce5dd;border-radius:12px;overflow:hidden;background-image:radial-gradient(#cdd8ce 1px,transparent 1px);background-size:20px 20px}canvas{width:100%;height:100%;display:block;touch-action:none}#empty{position:absolute;top:40%;left:0;width:100%;text-align:center;pointer-events:none}#empty>div{font-size:44px;color:#9bae9e}#empty h2{font-size:22px;color:#627a69}#empty p{font-size:12px}.badge{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#758879;background:#ffffffdf;border:1px solid #e1e8de;border-radius:20px;padding:9px 14px;pointer-events:none}.bottom{display:flex;justify-content:space-between;padding-top:17px;color:#84948a;font-size:10px}.inspector{border-left:1px solid #e2e9e5;border-right:0;padding-top:35px}.inspector h2{font-size:23px}.inspector h3{font-size:16px}#controls label{display:block;margin:22px 0;color:#62786b;font-size:12px}output{float:right}input[type=range]{width:100%;accent-color:#427b5b;margin-top:14px}#controls button{display:block;width:100%;margin:8px 0}hr{border:0;border-top:1px solid #e7ece8;margin:28px 0}.inspector .primary{width:100%}.hint{margin-top:30px;background:#f3f6f1;border-radius:8px;padding:16px;font-size:12px}.hint p{font-size:11px;margin-bottom:0}.layer{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e7ece7;border-radius:8px;margin:8px 0;cursor:pointer}.layer.active{border-color:#558165;background:#f1f7f2}.layer img{width:40px;height:40px;object-fit:cover;border-radius:5px}.layer span{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result{border:1px solid #dfe7e1;border-radius:8px;margin-top:12px;padding:12px;font-size:12px}.result p{font-size:11px}.result button{width:100%}@media(max-width:1100px){body{grid-template-columns:220px minmax(300px,1fr) 235px}main{padding:22px 15px}aside{padding:25px 18px}.badge{font-size:8px}h1 span{display:none}}@media(max-width:760px){body{display:block;height:auto}aside{border:0}.brand{margin-bottom:20px}aside section h2,aside section>p,footer{display:none}main{height:75vh}.inspector{border-top:1px solid #ddd}.toolbar{flex-wrap:wrap}header{flex-wrap:wrap}.badge{white-space:normal;width:85%;text-align:center}}

.result:hover,.result:focus-within{border-color:#edab32;background:#fffbf1;box-shadow:0 0 0 1px #edab3230}

.result .direction{color:#6c582d;background:#faf3e3;padding:8px;border-radius:5px;overflow-wrap:anywhere;font-size:11px}