.pen-toolbar{position:sticky;z-index:18;top:-22px;width:max-content;max-width:min(794px,100%);margin:0 auto 10px;display:flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid #d8d5ce;border-radius:10px;background:#fffefa;box-shadow:0 7px 22px #2933311c;overflow-x:auto}.pen-toolbar[hidden]{display:none}.pen-toolbar button{display:flex;align-items:center;gap:5px;height:31px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:#53615f;font-size:11px}.pen-toolbar button:hover,.pen-toolbar button.active{background:#e2ebe8;color:#315b63}.pen-toolbar>i{height:21px;border-left:1px solid #ddd9d1;margin:0 2px}.pen-toolbar>label:first-of-type{position:relative;width:31px;height:31px;border-radius:50%;overflow:hidden;border:2px solid white;box-shadow:0 0 0 1px #c9c6bf}.pen-toolbar input[type=color]{position:absolute;inset:-6px;width:44px;height:44px;border:0;padding:0}.pen-setting{display:grid;grid-template-columns:auto 82px 35px;align-items:center;gap:5px;font-size:8px;color:#76807d;white-space:nowrap}.pen-setting input{accent-color:#315b63}.pen-setting output{font-size:8px;color:#53615f}.shared-view .pen-toolbar{display:none}