:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif}body{margin:0;padding:0}*{box-sizing:border-box}#root{max-width:1280px;min-height:100vh;margin:0 auto;text-align:center;background-color:#dcdfe2}main{width:100%;padding:0 4px;display:flex;flex-direction:column;align-items:center;gap:clamp(20px,5vw,40px)}.title{font-size:clamp(20px,6vw,3rem);align-self:center}.container{width:100%;display:flex;flex-direction:column;align-items:center;gap:clamp(5px,6vw,80px)}.panel{flex:1;display:flex;flex-direction:column;gap:clamp(5px,2vw,40px)}@media(min-width:768px){main{padding:0 16px}.title{align-self:flex-start}.container{flex-direction:row;align-items:start}}@media(min-width:991px){main{padding:0 80px}}.canvas-container{max-width:350px;display:flex;flex-direction:column;align-items:center;gap:20px}.canvas{max-width:100%}.buttons{display:flex;gap:10px}.buttons button{padding:6px 12px;font-size:clamp(12px,3vw,18px);font-weight:700;cursor:pointer;color:#000;background-color:#fff;border:none;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease}.buttons button:hover{transform:translateY(-2px)}@media(min-width:768px){.buttons button{padding:10px 20px}}.appearance-control{padding:6px 12px;font-size:clamp(12px,3vw,16px);background-color:transparent;color:#1987d1;border:2px solid #1987d1;border-radius:25px;text-transform:capitalize;cursor:pointer;transition:all .25s ease;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease}.active,.appearance-control:hover{color:#fff;border-color:#0076c5;background-color:#0076c5}@media(min-width:768px){.appearance-control{font-size:clamp(12px,1vw,16px)}}@media(min-width:991px){.appearance-control{font-size:clamp(12px,2vw,16px)}}.wrapper{display:flex;flex-direction:column;align-items:center;gap:5px}.wrapper-title{font-size:clamp(12px,2vw,18px);font-weight:800;text-transform:uppercase;text-align:left;margin:0}.wrapper-content{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(5px,2vw,8px)}@media(min-width:768px){.wrapper{align-items:flex-start}.wrapper-content{justify-content:start}}