.golden-angle-sphere{width:100%;padding:.5rem}.sphere-stage{aspect-ratio:1;color:#b34a26;width:min(100% - 2rem,36rem);margin:auto;position:relative}.sphere-stage>canvas,.sphere-construction,.sphere-dial,.sphere-dial svg{width:100%;height:100%;display:block;position:absolute;inset:0}.sphere-construction{pointer-events:none;overflow:visible}.sphere-construction path{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}.sphere-construction .sphere-rays{opacity:.55;stroke:var(--text-default);stroke-width:.8px}.sphere-angle-arc{stroke-width:1.5px;stroke-linecap:round}.sphere-surface{z-index:1;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;background:0 0;border:0;border-radius:50%;padding:0;position:absolute;inset:8%}.sphere-surface:active{cursor:grabbing}.sphere-surface:disabled{cursor:default}.sphere-dial{pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none}.sphere-dial svg{overflow:visible}.sphere-ring-hit{pointer-events:stroke;cursor:grab;fill:none;stroke:#0000;stroke-width:44px;vector-effect:non-scaling-stroke}.sphere-dial[aria-disabled=true] .sphere-ring-hit{cursor:default}.sphere-ring{fill:none;stroke:var(--text-default);stroke-opacity:.22;stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none}.sphere-ring-thumb{pointer-events:none;background:currentColor;border-radius:50%;width:12px;height:12px;position:absolute;transform:translate(-50%,-50%)}.sphere-golden-mark{touch-action:none;cursor:pointer;background:0 0;border:0;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;top:6%;left:50%;transform:translate(-50%,-50%)}.sphere-golden-mark span{background:currentColor;width:2px;height:1.1rem;display:block}.sphere-value{font-variant-numeric:tabular-nums;color:var(--text-strong);text-align:center;white-space:nowrap;pointer-events:none;margin-top:.625rem;font-size:.8rem;line-height:1.5;display:block}.sphere-surface:focus-visible,.sphere-golden-mark:focus-visible{outline:1px solid var(--interactive-focus);outline-offset:4px;border-radius:50%}.sphere-dial:focus-visible{outline:none}.sphere-dial:focus-visible .sphere-ring{stroke:var(--interactive-focus);stroke-opacity:1}.sphere-error{color:var(--text-default);text-align:center;margin:0;padding:0 1rem;font-size:.875rem}.sphere-error:empty{display:none}.golden-angle-page{grid-template-rows:minmax(0,1fr);height:100dvh;padding:4rem .25rem 1rem;display:grid}.golden-angle-page .golden-angle-sphere{grid-template-rows:minmax(0,1fr);gap:.625rem;min-height:0;padding:0;display:grid}.golden-angle-page .sphere-viewport{place-items:center;display:grid;container-type:size}.golden-angle-page .sphere-composition{width:min(100cqw,100cqh - 2rem)}.golden-angle-page .sphere-stage{width:100%}.golden-angle-page .sphere-surface{touch-action:none}