@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Manrope:wght@500;600&display=swap";:root{font-family:DM Sans,sans-serif;color:#e9e5d7;background:#11110f;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:#11110f}button,select,input{font:inherit}header{height:76px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #32322d;background:#171715}.brand{display:flex;align-items:center;gap:13px}.brand i{width:31px;height:31px;border:1px solid #d6bd73;display:block;transform:rotate(45deg);position:relative}.brand i:after{content:"";position:absolute;inset:7px;border:1px solid #d6bd73}.brand h1{font:600 17px Manrope;margin:0;color:#f4f0df}.brand p{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#77776f;margin:3px 0 0}select{color:#c9c6b9;background:#22221f;border:1px solid #3b3b35;border-radius:4px;padding:7px 10px;font-size:11px}main{height:calc(100vh - 108px);display:grid;grid-template-columns:minmax(0,1fr) 300px}.stage{position:relative;min-height:420px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.badge,.hint,.coords{position:absolute;pointer-events:none;color:#aaa79b;font-size:10px;text-transform:uppercase;letter-spacing:.09em}.badge{top:18px;left:18px;border:1px solid #45443c;background:#171715cc;padding:7px 10px}.hint{bottom:17px;left:50%;transform:translate(-50%);white-space:nowrap}.coords{right:20px;bottom:18px;line-height:1.7;text-align:right;font-variant-numeric:tabular-nums}aside{background:#191917;border-left:1px solid #34342f;padding:21px 20px;overflow:auto}.group{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #30302c}.group>label:not(.toggle){display:block;font:500 10px Manrope;text-transform:uppercase;letter-spacing:.14em;color:#77776f;margin-bottom:10px}.seg{display:grid;grid-template-columns:1fr 1fr;background:#11110f;border:1px solid #35352f;padding:3px;border-radius:4px}.seg.three{grid-template-columns:repeat(3,1fr)}button{border:0;background:transparent;color:#88877f;padding:8px;cursor:pointer;border-radius:3px;font-size:11px}button:hover{color:#eee9d8;background:#282824}.seg button.active{background:#d4bd79;color:#171713;font-weight:600}.slider{display:grid;grid-template-columns:1fr auto;gap:5px;margin:12px 0}.slider span,.toggle span{font-size:11px;color:#b7b4a8}.slider output{font-size:10px;color:#d3c794;font-variant-numeric:tabular-nums}.slider input{grid-column:1/-1;width:100%;height:2px;accent-color:#d4bd79}.slider input:disabled{opacity:.25}.toggle{display:flex;align-items:center;justify-content:space-between;margin:12px 0;cursor:pointer}.toggle input{display:none}.toggle i{display:block;width:32px;height:17px;border-radius:10px;background:#34342f;position:relative}.toggle i:after{content:"";position:absolute;width:11px;height:11px;left:3px;top:3px;border-radius:50%;background:#77776f;transition:.2s}.toggle input:checked+i{background:#aa965c}.toggle input:checked+i:after{left:18px;background:#171713}.toggle input:disabled+i{opacity:.3}.views{display:grid;grid-template-columns:1fr 1fr;gap:6px}.views button,.reset{border:1px solid #393933;color:#aaa79b}.reset{width:100%;text-transform:uppercase;letter-spacing:.08em;font-size:9px}footer{height:32px;border-top:1px solid #2f2f2b;color:#5e5e58;background:#151513;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.14em}footer span{margin:0 8px;color:#927f4a}@media(max-width:760px){header{height:66px;padding:0 15px}.brand p{display:none}.brand h1{font-size:14px}main{height:auto;min-height:calc(100vh - 98px);grid-template-columns:1fr}.stage{height:58vh;min-height:400px}aside{border-left:0;border-top:1px solid #34342f}.hint{display:none}footer{margin-top:0}}