.mesa.m1{aspect-ratio:16/9;touch-action:none;-webkit-user-select:none;user-select:none;cursor:default;background-color:#fbfbfc;background-image:radial-gradient(circle,#14100e29 1px,#0000 1.3px);background-position:11px 11px;background-size:22px 22px;border:1px solid #14100e29;width:100%;min-height:280px;position:relative;overflow:hidden}.mesa.m1.is-mobile{aspect-ratio:4/5}.m1 .board{transform-origin:0 0;position:absolute;top:0;left:0}.m1 .grid{pointer-events:none;opacity:0;transition:opacity .4s var(--ease);position:absolute;inset:0}.m1 .grid.on{opacity:1}.m1 .grid i{background:#1f3fd60f;border-inline:1px solid #1f3fd62e;position:absolute;top:0;bottom:0}.m1 [data-el]{cursor:grab;outline:none;position:absolute;top:0;left:0}.m1 [data-el]:hover:after{content:"";border:1px solid var(--blue);pointer-events:none;position:absolute;inset:-1px}.m1 [data-el=circle]:hover:after{border-radius:50%}.m1 .board.dragging [data-el]{cursor:grabbing}.m1 .board.animating [data-el]{transition:transform .82s var(--ease), width .82s var(--ease), height .82s var(--ease)}.m1 .el-spec{border:1px solid var(--line);background:var(--paper);overflow:hidden}.m1 .el-spec b{font-family:var(--sans);letter-spacing:-.05em;font-weight:800;line-height:1;position:absolute;top:2%;left:7%}.m1 .el-spec small,.m1 .el-image small,.m1 .el-swatch small,.m1 .el-toggle small{font:13px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;position:absolute}.m1 .el-spec small{color:var(--muted);bottom:14px;left:16px}.m1 .el-spec small:last-child{left:auto;right:16px}.m1 .el-image{border:1px solid var(--line);background:repeating-linear-gradient(135deg,#eeeef1 0 9px,#fff 9px 18px)}.m1 .el-image small{color:var(--muted);background:#fbfbfc;padding:6px 10px;top:50%;left:50%;transform:translate(-50%,-50%)}.m1 .el-image svg{width:100%;height:100%;position:absolute;inset:0}.m1 .el-circle{background:var(--blue);transition:background .5s var(--ease);border-radius:50%}.m1 .el-swatch{background:var(--ink);transition:background .5s var(--ease)}.m1 .el-swatch small{color:#fff;bottom:12px;left:12px}.m1 .el-swatch small+small{opacity:.6;top:12px;bottom:auto}.m1 .el-text p{font:400 24px/1.28 var(--text);letter-spacing:-.005em;margin:0}.m1 .el-text p em{color:var(--blue);font-style:normal}.m1 .el-button{background:var(--blue);color:#fff;font:15px var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:box-shadow .3s var(--ease), translate .3s var(--ease);justify-content:space-between;align-items:center;padding:0 22px;display:flex}.m1 .el-button.pressed{box-shadow:8px 8px 0 var(--ink);translate:-3px -3px}.m1 .el-toggle .track{border:2px solid var(--ink);background:var(--paper);transition:background .3s var(--ease), border-color .3s;border-radius:999px;position:absolute;inset:0}.m1 .el-toggle .knob{background:var(--ink);width:34px;height:34px;transition:transform .38s var(--ease), background .3s;border-radius:50%;position:absolute;top:7px;left:7px}.m1 .el-toggle.on .track{background:var(--blue);border-color:var(--blue)}.m1 .el-toggle.on .knob{background:#fff;transform:translate(44px)}.m1 .el-toggle small{color:var(--muted);top:calc(100% + 10px);left:0}.m1 .overlay{pointer-events:none;position:absolute;inset:0}.m1 .overlay svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.m1 .overlay line{stroke:var(--blue);stroke-width:1px;shape-rendering:crispedges}.m1 .overlay .tick{stroke:var(--blue);stroke-width:1.25px}.m1 .sel{border:1.5px solid var(--blue);display:none;position:absolute}.m1 .sel.show{display:block}.m1 .sel.round{border-radius:50%}.m1 .sel .h{border:1.5px solid var(--blue);pointer-events:auto;background:#fff;width:9px;height:9px;margin:-5px 0 0 -5px;position:absolute}.m1 .sel .h[data-h=nw]{cursor:nwse-resize;top:0;left:0}.m1 .sel .h[data-h=ne]{cursor:nesw-resize;top:0;left:100%}.m1 .sel .h[data-h=sw]{cursor:nesw-resize;top:100%;left:0}.m1 .sel .h[data-h=se]{cursor:nwse-resize;top:100%;left:100%}.m1 .sel.round .h{display:none}.m1 .sel.round .h[data-h=se]{display:block;top:85.4%;left:85.4%}.m1 .badge{background:var(--blue);color:#fff;font:11px var(--mono);letter-spacing:.08em;white-space:nowrap;padding:3px 6px 2px;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.m1 .ghost{opacity:0;transition:opacity .4s var(--ease);will-change:transform;position:absolute;top:0;left:0}.m1 .ghost.on{opacity:1}.m1 .ghost svg{width:18px;height:20px;transition:transform .16s var(--ease);transform-origin:3px 2px;display:block;position:static}.m1 .ghost.press svg{transform:scale(.82)}.m1 .ghost span{background:var(--blue);color:#fff;font:11px var(--mono);letter-spacing:.08em;white-space:nowrap;padding:3px 7px 2px;position:absolute;top:17px;left:14px}.m1 .mesa-top,.m1 .mesa-bottom{color:#14100ea1;font:.72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;pointer-events:none;justify-content:space-between;align-items:center;gap:.75rem;display:flex;position:absolute;left:.875rem;right:.875rem}.m1 .mesa-top{top:.75rem}.m1 .mesa-bottom{bottom:.75rem}.m1 .mesa-bottom output{margin-left:auto}.m1 .presence{align-items:center;gap:.5rem;display:flex}.m1 .presence i{width:20px;height:20px;font:10px var(--mono);letter-spacing:0;color:#fff;transition:box-shadow .3s var(--ease), opacity .3s;border-radius:50%;place-items:center;font-style:normal;display:inline-grid}.m1 .presence i.g{background:var(--blue);opacity:.45}.m1 .presence i.g.live{opacity:1;box-shadow:0 0 0 2px #fbfbfc, 0 0 0 3.5px var(--blue)}.m1 .presence i.t{background:var(--ink)}@media (width<=520px){.m1 .mesa-bottom>span,.m1 .mesa-top>span{display:none}}