@layer quartz-base{.loom-grid,.lw-board{background:var(--lightgray);border:1.5px solid var(--darkgray);outline:1px solid var(--lightgray);outline-offset:2px;gap:1px;display:grid}canvas.reach{pointer-events:none;width:300%;height:300%;position:absolute;inset:-100%}.loom-sq.sounding,.loom-editor .le-n.sounding{z-index:1;overflow:visible}.loom[hidden]{display:none}@keyframes loom-held{50%{opacity:.12}}.loom-sq{background:var(--light);position:relative;overflow:hidden}.loom-sq.beat-group{box-shadow:-1px 0 0 var(--gray)}.loom-sq canvas.graph{width:100%;height:100%;position:absolute;inset:0}.loom-sq.held:before{content:"";aspect-ratio:1;opacity:.35;background:#c23b22;border-radius:50%;width:22%;animation:2.4s ease-in-out infinite loom-held;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (prefers-reduced-motion:reduce){.loom-sq.held:before{animation:none}}.loom-sq.open:before{content:"+";font-family:var(--codeFont);color:var(--gray);place-items:center;font-size:.8rem;display:grid;position:absolute;inset:0}.loom-sq.sounding{box-shadow:inset 0 0 0 1.5px var(--secondary)}:root[saved-theme=dark] canvas.graph,:root[saved-theme=dark] .le-over,:root[saved-theme=dark] .le-paper canvas{filter:invert()hue-rotate(180deg)}.loom{margin:1.25rem 0 1.5rem}.loom-glimpse{cursor:zoom-in;background:0 0;border:none;width:100%;margin:0;padding:3px;display:block}.loom-glimpse .loom-grid{grid-template-columns:repeat(var(--cols,12), 1fr)}.loom-glimpse .loom-sq{aspect-ratio:1}.loom-glimpse:hover .loom-grid,.loom-glimpse:focus-visible .loom-grid{border-color:var(--secondary)}.loom-caption{font-family:var(--codeFont);color:var(--gray);margin:.35rem 0 0;font-size:.72rem}html.loom-open,html.loom-open body{overscroll-behavior:none}html.loom-open{overflow:hidden}.loom-btn{border:1px solid var(--lightgray);font:inherit;font-family:var(--bodyFont);color:var(--dark);cursor:pointer;background:0 0;border-radius:2px;padding:.3rem .65rem;font-size:.9rem}.loom-btn:hover:not(:disabled){border-color:var(--gray)}.loom-btn[aria-pressed=true]{background:var(--dark);border-color:var(--dark);color:var(--light)}.loom-btn:disabled{color:var(--gray);cursor:default}.loom-whole{z-index:1000;background:var(--light);flex-direction:column;display:flex;position:fixed;inset:0}.loom-whole .lw-bar{border-bottom:1px solid var(--lightgray);align-items:center;gap:1rem;padding:.75rem 1.25rem;display:flex}.loom-whole .lw-say{color:var(--darkgray);flex:1;font-size:.9rem}.loom-whole .lw-stage{overscroll-behavior:contain;flex:1;place-items:safe center;min-height:0;padding:16px;display:grid;overflow:auto}.loom-whole .lw-board{grid-template-columns:repeat(var(--cols,12), var(--sq,48px));grid-auto-rows:var(--sq,48px)}.loom-whole button.loom-sq{cursor:pointer;border:none;padding:0}.loom-whole button.loom-sq:hover,.loom-whole button.loom-sq:focus-visible{box-shadow:inset 0 0 0 1.5px var(--secondary);outline:none}.loom-whole button.loom-sq.open:hover:before{color:var(--secondary)}@property --paper{syntax:"<length>";inherits:true;initial-value:300px}@property --lift{syntax:"<number>";inherits:true;initial-value:0}.loom-editor{--centre:50%;--lift:0;--top:calc(var(--lift) * (50% - var(--paper) / 2));--paper:min(56vmin, 440px);--peek:calc(var(--paper) * .22);--slider:1.5rem;z-index:1;background:var(--light);flex-direction:column;justify-content:center;align-items:center;gap:.9rem;padding:1rem;display:flex;position:absolute;inset:0;overflow:auto}.loom-editor .le-stage{width:100%;height:calc(var(--paper) + var(--peek));flex:none;position:relative;overflow:hidden}.loom-editor .le-paper{top:var(--top);left:calc(var(--centre) - var(--paper) / 2);z-index:1;width:var(--paper);height:var(--paper);border:1.5px solid var(--darkgray);background:var(--light);touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:absolute}.loom-editor .le-paper:before{content:"";position:absolute;inset:-10px}.loom-editor .le-paper canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.loom-editor .le-paper .le-wave{pointer-events:none}.loom-editor .le-n{top:var(--top);width:var(--paper);height:var(--paper);border:1.5px solid var(--lightgray);background:var(--light);opacity:.85;padding:0;position:absolute;overflow:hidden}.loom-editor .le-n.none{opacity:.6;border-style:dashed}.loom-editor button.le-n{cursor:pointer}.loom-editor button.le-n:hover{opacity:1}.loom-editor .le-over{top:var(--top);left:calc(var(--centre) - var(--paper) * 1.5);z-index:2;width:calc(var(--paper) * 3);height:calc(var(--paper) * 2);pointer-events:none;position:absolute}.loom-editor .le-join{left:calc(var(--centre) + (var(--x) - .5) * var(--paper));top:calc(var(--top) + var(--y) * var(--paper));z-index:3;background:var(--light);cursor:crosshair;touch-action:none;border:2px solid #c23b22;border-radius:50%;width:1.05rem;height:1.05rem;padding:0;position:absolute;transform:translate(-50%,-50%)}.loom-editor .le-join:hover{background:#c23b22}.loom-editor .le-left{left:calc(var(--centre) - var(--paper) * 1.5)}.loom-editor .le-right{left:calc(var(--centre) + var(--paper) / 2 + var(--slider) + 3px)}.loom-editor .le-zoom{top:var(--top);left:calc(var(--centre) + var(--paper) / 2 + 3px);z-index:3;width:var(--slider);height:calc(var(--paper) + 3px);cursor:ns-resize;touch-action:none;outline:none;position:absolute}.loom-editor .le-zoom:before{content:"";background:var(--gray);width:1px;position:absolute;top:9px;bottom:9px;left:50%}.loom-editor .le-zoom:focus-visible .le-knob{box-shadow:0 0 0 2px var(--secondary)}.loom-editor .le-knob{left:50%;top:calc(9px + (1 - var(--at,0)) * (100% - 18px));background:var(--dark);pointer-events:none;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%)}.loom-editor .le-join[data-side=right]{margin-left:var(--slider)}.loom-editor .le-below{top:calc(var(--top) + var(--paper));left:calc(var(--centre) - var(--paper) / 2)}.loom-editor .le-n.sounding{opacity:1}.loom-editor .le-paper.sounding,.loom-editor .le-n.sounding{box-shadow:inset 0 0 0 1.5px var(--secondary)}.loom-editor .le-tools,.loom-editor .le-actions{width:min(100%, var(--paper) * 1.6);flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;display:flex}.loom-editor .le-gap{flex:1}.loom-editor .le-add:not(:disabled){background:var(--dark);border-color:var(--dark);color:var(--light)}.loom-editor .le-meter{font-family:var(--codeFont);color:var(--gray);align-items:center;gap:.6rem;font-size:.72rem;display:flex}.loom-editor .le-meter .le-where{color:var(--gray)}@media (max-width:800px),(pointer:coarse){.loom-btn{touch-action:manipulation;min-height:44px}.lw-bar{gap:.5rem}.loom-editor{--slider:40px}.loom-editor .le-join:after{content:"";position:absolute;inset:-14px}.loom-editor .le-join[data-side=left]:after{right:-76px}.loom-editor .le-join[data-side=right]{margin-left:0}.loom-editor .le-join[data-side=right]:after{left:-76px}.loom-editor .le-tools,.loom-editor .le-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:min(100%,460px);display:grid}.loom-editor .loom-btn{padding-left:4px;padding-right:4px;font-size:.875rem}.loom-editor .le-more,.loom-editor .le-gap{display:none}.loom-editor .le-add{grid-column:span 2}.loom-editor .le-add:not(:disabled){background:var(--dark);border-color:var(--dark);color:var(--light)}.loom-editor .le-meter{min-height:1.25rem}}@media (max-width:800px){.loom-editor{--paper:min(calc(100vw - 96px), 56dvh);overscroll-behavior:contain;justify-content:flex-start;gap:.6rem;padding:.75rem 8px 1rem;transition:--paper .32s,--lift .32s;overflow-y:auto}.loom-editor .le-stage{flex:1 1 calc(var(--paper) + var(--peek));height:auto;min-height:calc(var(--paper) + var(--peek))}.loom-editor .le-right{left:calc(var(--centre) + var(--paper) / 2)}}@media (max-width:800px) and (prefers-reduced-motion:reduce){.loom-editor{transition:none}}@media (max-width:800px){.loom-editor.le-trio{--paper:calc((100vw - 16px) / 3);--lift:1;--centre:50%}.loom-editor.le-trio .le-stage{cursor:pointer}.loom-editor.le-trio .le-stage>*{pointer-events:none}.loom-editor.le-trio .le-n{opacity:.5}.loom-editor.le-trio .le-n.sounding,.loom-editor.le-trio .le-paper.sounding{opacity:1}.loom-editor.le-trio .le-right{left:calc(var(--centre) + var(--paper) / 2)}.loom-editor.le-trio .le-below,.loom-editor.le-trio .le-zoom,.loom-editor.le-trio .le-join{display:none}.loom-editor.le-trio .le-hint{display:block}}.loom-editor .le-hint{left:0;right:0;top:calc(var(--top) + var(--paper) + .75rem);text-align:center;font-family:var(--codeFont);color:var(--gray);margin:0;font-size:.8rem;display:none;position:absolute}@media (max-height:520px) and (orientation:landscape){.loom-editor{--paper:calc(100dvh - 1.6rem);--peek:0px;grid-template-columns:calc(var(--paper) + 7rem) minmax(0, 1fr);padding:.75rem max(.75rem, env(safe-area-inset-right)) .75rem max(.5rem, env(safe-area-inset-left));grid-template-rows:auto auto auto;place-content:center stretch;gap:.4rem .75rem;display:grid;overflow-y:auto}.loom-editor .le-stage{height:calc(var(--paper) + 4px);flex:none;grid-area:1/1/-1;min-height:0}.loom-editor .le-tools,.loom-editor .le-meter,.loom-editor .le-actions{grid-column:2;width:100%}.loom-editor .le-right,.loom-editor .le-below{display:none}.loom-editor .le-left{left:calc(var(--centre) - var(--paper) * 1.5)}}canvas.graph{width:100%;height:100%;position:absolute;inset:0}}