*{box-sizing:border-box}body{margin:0;font-family:Helvetica,sans-serif;color:#404040;display:flex;flex-direction:column}button{border:2px solid #404040;padding:0 16px;font-size:16px;background-color:#fbedc4;font-weight:700;border-radius:6px;min-height:48px;color:#404040;min-width:max-content}button:hover{background-color:#f8e19c;cursor:pointer}header{display:flex;gap:16px;width:100%;position:fixed;top:0;padding:16px;background:#fff;z-index:1;justify-content:space-between;border-bottom:2px solid #404040}#copy{display:flex;gap:16px;flex-direction:row-reverse;align-items:center;max-width:66%}.copy-message a{background-color:green}.copy-url{background-color:#d9d9d9;padding:8px 16px;font-size:12px}.copy-url a{overflow-wrap:anywhere;color:#404040}main{margin-top:98px}.section-intro{padding:16px;border-bottom:2px solid #404040}.section-intro p{max-width:36em;line-height:1.5}.section-setup{display:flex;border-bottom:2px solid #404040;flex-direction:column;align-items:stretch}.section-setup .left{display:flex;padding:24px;flex-direction:column;flex-wrap:nowrap;align-self:flex-start;align-items:stretch;flex-basis:100%;width:100%}.section-setup .left .header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.section-setup .left .header h2{flex-grow:2}.section-setup .left .axes{display:flex;flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;gap:16px}.section-setup .left .axes input[type=text]{margin-bottom:8px}.section-setup .left .axes .vertical{margin-bottom:8px}select{padding:12px 8px;font-size:16px;border-radius:0;border:1px solid #404040;margin-bottom:16px;min-height:48px}.axes .radio-button{margin-bottom:8px}.secSetupMiddle{padding:16px}.secSetupMiddle .exampleGraph{display:flex;flex-direction:column;align-items:center;height:calc(100% - 48px);min-height:400px}.secSetupMiddle .matrixExample{width:100%;height:100%;margin:8px;background-image:url(matrix-dividers.svg);background-size:auto;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}.secAddAndAxis{display:flex;gap:24px;border-bottom:2px solid #404040;flex-direction:column}.secForm{display:flex;width:calc(100% - 48px);align-self:stretch;margin:16px;flex-direction:column;flex-wrap:nowrap;align-items:flex-start}input[type=text]{padding:12px;font-size:16px;border-radius:0;border:1px solid #404040;margin-bottom:16px;min-height:48px;align-self:stretch}.secAxis{width:100%}.secAxisHorizontal,.secAxisVertical{width:100%;padding:24px;display:flex;flex-direction:column}.secAxisHorizontal{background-color:#fafafa;border-top:2px solid #404040}.secAxisVertical h3.icon.icon-plus{margin-top:6px}#list-h-placeholder,#list-v-placeholder{background-color:#f0f0f0;height:100%;flex-grow:1;display:flex;align-items:center;padding:16px}h1,h2{font-weight:700;color:#333;margin:0 0 20px}h1{font-size:28px;margin:0}h2{font-size:24px}h3{font-size:20px;margin:8px 0}h4{margin:6px 0}.secGraph h2{margin-top:32px}ul{list-style:none;margin:0;max-width:600px;min-width:240px;padding:0 0 0 48px}li{background-color:#fff;border:1px solid #404040;padding:12px;font-size:16px;font-weight:700;color:#404040;cursor:move;display:flex;align-items:center;margin:12px 0;justify-content:space-between}.bullet{width:8px;height:8px;background-color:#e3e3e3;border-radius:50%;margin-right:10px}li:hover .bullet{background-color:#dbdbdb}li:active .bullet{background-color:#9c9c9c}.item-text{flex-grow:1;margin-right:10px}.secGraph{height:calc(100vh - 90px);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex-wrap:nowrap;margin:0 24px 24px}#graphWrapper{width:100%;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:space-between;flex-wrap:nowrap;height:600px}.graphHorizontal{display:flex;width:100%;height:calc(100vw - 80px);align-items:center;margin:8px}.matrixExample .graph,.secGraph .graph{height:100%;width:100%;display:flex;flex-direction:column;gap:8px}#matrix{width:100%;height:100%;margin:8px;background-image:url(matrix-dividers.svg);background-size:auto;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center}.graph .row{display:flex;flex-direction:row;align-items:center;align-content:center;justify-content:center;flex-wrap:nowrap;gap:8px;height:100%}.graph .row .cell{display:flex;height:100%;width:100%;text-align:center;align-items:center;justify-content:center;font-size:14px}.filled{background-color:#9ce1f8;font-size:14px}#placeholder{display:flex;flex-direction:column;align-items:center;background:#d9d9d9;padding:16px}.matrix-label{font-size:14px;font-weight:700;line-height:18px}.icon{background-size:32px;background-position:left;background-repeat:no-repeat;padding-left:8px}.icon-plus-green{background-image:url(icon-plus-green.svg)}.icon-plus-red{background-image:url(icon-plus-red.svg)}.icon-minus-green{background-image:url(icon-minus-green.svg)}.icon-minus-red{background-image:url(icon-minus-red.svg)}.icon-cross{background-image:url(icon-cross.svg)}.btn-icon{height:24px;width:24px;cursor:pointer}.btn-icon:hover{color:#757575}h2.icon-minus,h2.icon-plus{background-size:96px;height:96px;padding-left:72px;display:flex;align-items:center}h1.questionMark{background-size:64px;height:64px;padding-left:48px;display:flex;align-items:center}footer{display:flex;border-top:2px solid #404040;min-height:80px;align-items:center;justify-content:center;flex-direction:row;font-size:14px}footer p{text-align:center;line-height:1.6}.section-intro a,footer a{color:#404040;font-weight:700}.section-intro a a:hover,footer a:hover{color:#000}