:root{--color-ohmg-black:#1b1b1b;--color-ohmg-blue:#94dbff;--color-ohmg-red:#cc4722;--color-ohmg-yellow:#ffbf35;--color-ohmg-lilac:#b0afed;--color-ohmg-pink:#ff94c2}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#fff;width:100%;height:100%;font-family:Inter,sans-serif;overflow:hidden}.app{width:100%;height:100%;display:flex}.sidebar{border-right:1px solid var(--color-ohmg-black);flex-direction:column;gap:24px;width:200px;height:100%;padding:24px;display:flex}.sidebar__title{letter-spacing:.12em;text-transform:uppercase;color:var(--color-ohmg-black);font-size:10px;font-weight:500}.sidebar__control{flex-direction:column;gap:8px;display:flex}.sidebar__label{letter-spacing:.08em;text-transform:uppercase;color:var(--color-ohmg-black);font-size:10px;font-weight:500}.sidebar__slider{appearance:none;background:var(--color-ohmg-black);cursor:pointer;width:100%;height:1px;margin:8px 0}.sidebar__slider::-webkit-slider-thumb{appearance:none;background:var(--color-ohmg-black);cursor:pointer;border-radius:50%;width:12px;height:12px}.sidebar__select{border:none;border-bottom:1px solid var(--color-ohmg-black);letter-spacing:.02em;width:100%;color:var(--color-ohmg-black);cursor:pointer;background:0 0;border-radius:0;padding:8px 0;font-family:Inter,sans-serif;font-size:11px;font-weight:400}.sidebar__select:focus{outline:none}.sidebar__colors{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.sidebar__color-swatch{border:1px solid var(--color-ohmg-black);cursor:pointer;width:100%;height:24px;padding:0}.sidebar__color-swatch--active{outline:2px solid var(--color-ohmg-black);outline-offset:2px}.sidebar__actions{flex-direction:column;gap:8px;margin-top:auto;display:flex}.sidebar__button{color:var(--color-ohmg-black);border:1px solid var(--color-ohmg-black);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:0 0;padding:10px 0;font-family:Inter,sans-serif;font-size:10px;font-weight:500;transition:all .2s}.sidebar__button:hover{background:var(--color-ohmg-black);color:#fff}.canvas-area{flex:1;justify-content:center;align-items:center;display:flex}.canvas-container{border:1px solid var(--color-ohmg-black)}.canvas-container canvas{display:block}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}