*,body,html{margin:0;padding:0}.block,.block.visible{transition:opacity .5s ease-out}#choices svg,#matrix svg,.block,body,html{width:100%}#choices svg,#matrix svg,#text{max-width:320px}.button span,.button svg{vertical-align:middle}#nav p,.button{cursor:pointer}#base,#nav p{text-align:center}body,html{height:100%;background:#FFF;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:16px;color:#000}*{box-sizing:border-box}#matrix{height:320px}.block{position:absolute;left:0;top:0;opacity:0}#choices,#player{position:relative}#next,#replay{top:90px;position:absolute;left:0}.block.visible{opacity:1}#matrix svg *{transition:all .5s ease-out}svg rect{stroke:#333;fill:transparent;stroke-width:4}#choices{left:0;top:0;height:220px}.lines-hint{opacity:.5;stroke-width:0;fill:transparent;stroke-linecap:round}#matrix.hide-triangles .triangles,.number-hint{opacity:0}.triangles-hint{opacity:0;stroke-width:0;fill:violet;r:0}.triangles-hint circle{r:inherit}.number-hint text{text-anchor:middle;alignment-baseline:middle;font-family:'Playfair Display',serif;font-size:0}.lines{stroke:#333;stroke-width:4;fill:transparent;stroke-linecap:round}.triangles{fill:#333}#panel1 .lines-hint,#panel2 .lines-hint,#panel3 .lines-hint{stroke:#d86126}#panel4 .lines-hint,#panel5 .lines-hint,#panel6 .lines-hint{stroke:#d89d26}#panel7 .lines-hint,#panel8 .lines-hint,#panel9 .lines-hint{stroke:#d8d826}#panel2 .color-hint,#panel2 .lines-hint,#panel2 .number-hint{transition-delay:250ms}#panel3 .color-hint,#panel3 .lines-hint,#panel3 .number-hint{transition-delay:.5s}#panel4 .color-hint,#panel4 .lines-hint,#panel4 .number-hint{transition-delay:750ms}#panel5 .color-hint,#panel5 .lines-hint,#panel5 .number-hint{transition-delay:1s}#panel6 .color-hint,#panel6 .lines-hint,#panel6 .number-hint{transition-delay:1.25s}#panel7 .color-hint,#panel7 .lines-hint,#panel7 .number-hint{transition-delay:1.5s}#panel8 .color-hint,#panel8 .lines-hint,#panel8 .number-hint{transition-delay:1.75s}#panel9 .color-hint,#panel9 .lines-hint,#panel9 .number-hint{transition-delay:2s}.fig2 #panel1 .number-hint text,.fig2 #panel1 .triangles-hint,.fig2 #panel2 .number-hint text,.fig2 #panel2 .triangles-hint,.fig2 #panel9 .number-hint text,.fig2 #panel9 .triangles-hint{fill:#269dd8}.fig2 #panel3 .number-hint text,.fig2 #panel3 .triangles-hint,.fig2 #panel4 .number-hint text,.fig2 #panel4 .triangles-hint,.fig2 #panel8 .number-hint text,.fig2 #panel8 .triangles-hint{fill:#9d26d8}.fig2 #panel5 .number-hint text,.fig2 #panel5 .triangles-hint,.fig2 #panel6 .number-hint text,.fig2 #panel6 .triangles-hint,.fig2 #panel7 .number-hint text,.fig2 #panel7 .triangles-hint{fill:#2626d8}.fig1 #panel2 .triangles-hint{transition-delay:250ms}.fig1 #panel3 .triangles-hint{transition-delay:.5s}.fig1 #panel4 .triangles-hint{transition-delay:750ms}.fig1 #panel5 .triangles-hint{transition-delay:1s}.fig1 #panel6 .triangles-hint{transition-delay:1.25s}.fig1 #panel7 .triangles-hint{transition-delay:1.5s}.fig1 #panel8 .triangles-hint{transition-delay:1.75s}.fig1 #panel9 .triangles-hint{transition-delay:2s}.fig1 #panel1 .number-hint,.fig1 #panel1 .triangles-hint,.fig1 #panel2 .number-hint,.fig1 #panel2 .triangles-hint,.fig1 #panel3 .number-hint,.fig1 #panel3 .triangles-hint{fill:#269dd8}.fig1 #panel4 .number-hint,.fig1 #panel4 .triangles-hint,.fig1 #panel5 .number-hint,.fig1 #panel5 .triangles-hint,.fig1 #panel6 .number-hint,.fig1 #panel6 .triangles-hint{fill:#9d26d8}.fig1 #panel7 .number-hint,.fig1 #panel7 .triangles-hint,.fig1 #panel8 .number-hint,.fig1 #panel8 .triangles-hint,.fig1 #panel9 .number-hint,.fig1 #panel9 .triangles-hint{fill:#2626d8}.fig2 #panel4 .number-hint,.fig2 #panel4 .triangles-hint{transition-delay:250ms}.fig2 #panel7 .number-hint,.fig2 #panel7 .triangles-hint{transition-delay:.5s}.fig2 #panel2 .number-hint,.fig2 #panel2 .triangles-hint{transition-delay:750ms}.fig2 #panel5 .number-hint,.fig2 #panel5 .triangles-hint{transition-delay:1s}.fig2 #panel8 .number-hint,.fig2 #panel8 .triangles-hint{transition-delay:1.25s}.fig2 #panel3 .number-hint,.fig2 #panel3 .triangles-hint{transition-delay:1.5s}.fig2 #panel6 .number-hint,.fig2 #panel6 .triangles-hint{transition-delay:1.75s}.fig2 #panel9 .number-hint,.fig2 #panel9 .triangles-hint{transition-delay:2s}.fig3 #panel1 .number-hint text,.fig3 #panel1 .triangles-hint,.fig3 #panel2 .number-hint text,.fig3 #panel2 .triangles-hint,.fig3 #panel3 .number-hint text,.fig3 #panel3 .triangles-hint{fill:#269dd8}.fig3 #panel4 .number-hint text,.fig3 #panel4 .triangles-hint,.fig3 #panel5 .number-hint text,.fig3 #panel5 .triangles-hint,.fig3 #panel6 .number-hint text,.fig3 #panel6 .triangles-hint{fill:#9d26d8}.fig3 #panel7 .number-hint text,.fig3 #panel7 .triangles-hint,.fig3 #panel8 .number-hint text,.fig3 #panel8 .triangles-hint,.fig3 #panel9 .number-hint text,.fig3 #panel9 .triangles-hint{fill:#2626d8}.fig3 #panel4 .number-hint,.fig3 #panel4 .triangles-hint{transition-delay:250ms}.fig3 #panel7 .number-hint,.fig3 #panel7 .triangles-hint{transition-delay:.5s}.fig3 #panel2 .number-hint,.fig3 #panel2 .triangles-hint{transition-delay:750ms}.fig3 #panel5 .number-hint,.fig3 #panel5 .triangles-hint{transition-delay:1s}.fig3 #panel8 .number-hint,.fig3 #panel8 .triangles-hint{transition-delay:1.25s}.fig3 #panel3 .number-hint,.fig3 #panel3 .triangles-hint{transition-delay:1.5s}.fig3 #panel6 .number-hint,.fig3 #panel6 .triangles-hint{transition-delay:1.75s}.fig3 #panel9 .number-hint,.fig3 #panel9 .triangles-hint{transition-delay:2s}#choices *{transition:all 250ms ease-out}#choices #choice1,#choices #choice1 .color-hint,#choices #choice1 .correct-mark,#choices #choice1 .correct-mark2,#choices #choice1 .correct-mark3,#choices #choice1 .lines-hint,#choices #choice1 .number-hint,#choices #choice1 .triangles,#choices #choice1 .triangles-hint{transition-delay:0}#choices #choice2,#choices #choice2 .color-hint,#choices #choice2 .correct-mark,#choices #choice2 .correct-mark2,#choices #choice2 .correct-mark3,#choices #choice2 .lines-hint,#choices #choice2 .number-hint,#choices #choice2 .triangles,#choices #choice2 .triangles-hint{transition-delay:250ms}#choices #choice3,#choices #choice3 .color-hint,#choices #choice3 .correct-mark,#choices #choice3 .correct-mark2,#choices #choice3 .correct-mark3,#choices #choice3 .lines-hint,#choices #choice3 .number-hint,#choices #choice3 .triangles,#choices #choice3 .triangles-hint{transition-delay:.5s}#choices #choice4,#choices #choice4 .color-hint,#choices #choice4 .correct-mark,#choices #choice4 .correct-mark2,#choices #choice4 .correct-mark3,#choices #choice4 .lines-hint,#choices #choice4 .number-hint,#choices #choice4 .triangles,#choices #choice4 .triangles-hint{transition-delay:750ms}#choices #choice5,#choices #choice5 .color-hint,#choices #choice5 .correct-mark,#choices #choice5 .correct-mark2,#choices #choice5 .correct-mark3,#choices #choice5 .lines-hint,#choices #choice5 .number-hint,#choices #choice5 .triangles,#choices #choice5 .triangles-hint{transition-delay:1s}#choices #choice6,#choices #choice6 .color-hint,#choices #choice6 .correct-mark,#choices #choice6 .correct-mark2,#choices #choice6 .correct-mark3,#choices #choice6 .lines-hint,#choices #choice6 .number-hint,#choices #choice6 .triangles,#choices #choice6 .triangles-hint{transition-delay:1.25s}#choices #choice7,#choices #choice7 .color-hint,#choices #choice7 .correct-mark,#choices #choice7 .correct-mark2,#choices #choice7 .correct-mark3,#choices #choice7 .lines-hint,#choices #choice7 .number-hint,#choices #choice7 .triangles,#choices #choice7 .triangles-hint{transition-delay:1.5s}#choices #choice8,#choices #choice8 .color-hint,#choices #choice8 .correct-mark,#choices #choice8 .correct-mark2,#choices #choice8 .correct-mark3,#choices #choice8 .lines-hint,#choices #choice8 .number-hint,#choices #choice8 .triangles,#choices #choice8 .triangles-hint{transition-delay:1.75s}#matrix.show-line-hints .lines-hint{stroke-width:24}#choices.dim-lines .lines,#matrix.dim-lines .lines{opacity:.1}#matrix.hide-lines .lines{opacity:0}#choices.show-triangle-hints .triangles-hint,#matrix.show-triangle-hints .triangles-hint{opacity:.5;r:30}#matrix.fig2.quick-show-triangle-hints .triangles-hint,#matrix.fig3.quick-show-triangle-hints .triangles-hint{r:30;opacity:.5;transition-delay:0}#choices.fig3.show-triangle-hints .triangles-hint,#matrix.fig3.show-triangle-hints .triangles-hint{r:50}#choices.fig2 .triangles-hint{fill:#269dd8}#choices.fig3 .triangles-hint{fill:#2626d8}#choices.fig3 .lines-hint{stroke:#d8d826}#choices.fig3.show-line-hints .lines-hint{stroke-width:24}#matrix.dim-triangles .triangles{opacity:.1}#choices.show-number-hints .number-hint,#choices.show-number-hints .number-hint text,#matrix.show-number-hints .number-hint,#matrix.show-number-hints .number-hint text{opacity:1;font-size:150px}#choices.fig1 .number-hint text,#choices.fig1 .triangles-hint{fill:#a8a8ef}#choices.fig1 #choice1 .number-hint text,#choices.fig1 #choice1 .triangles-hint{fill:#2626d8}#choices.hide-triangles .triangles{opacity:0}#choices.fig1.hide-wrong #choice2,#choices.fig1.hide-wrong #choice3,#choices.fig1.hide-wrong #choice4,#choices.fig1.hide-wrong #choice5,#choices.fig1.hide-wrong #choice6,#choices.fig1.hide-wrong #choice7,#choices.fig1.hide-wrong #choice8{opacity:.1}#choices.fig2.show-line-hints #choice1 .lines-hint,#choices.fig2.show-line-hints #choice2 .lines-hint,#choices.fig2.show-line-hints #choice7 .lines-hint{stroke-width:24;stroke:#d8d826;opacity:.5}#choices.fig2.hide-wrong #choice2,#choices.fig2.hide-wrong #choice6,#choices.fig2.hide-wrong #choice7,#choices.fig3.hide-wrong #choice4,#choices.fig3.hide-wrong #choice7,#choices.fig3.hide-wrong2 #choice2,#choices.fig3.hide-wrong2 #choice3,#choices.fig3.hide-wrong2 #choice6,#choices.fig3.hide-wrong2 #choice7,#choices.fig3.hide-wrong3 #choice4,#choices.fig3.hide-wrong3 #choice5,#choices.fig3.hide-wrong3 #choice6,#choices.fig3.hide-wrong3 #choice7,#choices.fig3.hide-wrong3 #choice8{opacity:.1}#choices.highlight-correct .correct-mark,#choices.highlight-correct2 .correct-mark2,#choices.highlight-correct3 .correct-mark3{opacity:1}#choices.fig2.hide-wrong2 #choice3,#choices.fig2.hide-wrong2 #choice4,#choices.fig2.hide-wrong2 #choice5,#choices.fig2.hide-wrong2 #choice6,#choices.fig2.hide-wrong2 #choice8{opacity:.1}#choices.fig2.highlight-solution #choice1{opacity:1}#choices.fig2.highlight-solution #choice2,#choices.fig2.highlight-solution #choice3,#choices.fig2.highlight-solution #choice4,#choices.fig2.highlight-solution #choice5,#choices.fig2.highlight-solution #choice6,#choices.fig2.highlight-solution #choice7,#choices.fig2.highlight-solution #choice8{opacity:.1}#choices.fig3.highlight-solution #choice1{opacity:1}#choices.fig3.highlight-solution #choice2,#choices.fig3.highlight-solution #choice3,#choices.fig3.highlight-solution #choice4,#choices.fig3.highlight-solution #choice5,#choices.fig3.highlight-solution #choice6,#choices.fig3.highlight-solution #choice7,#choices.fig3.highlight-solution #choice8{opacity:.1}#choices.hide-lines .lines{opacity:0}#choices.dim-triangles .triangles{opacity:.1}#choices.quick-hide-hints .number-hint,#choices.quick-hide-hints .triangles-hint,#matrix.quick-hide-hints .lines-hint,#matrix.quick-hide-hints .number-hint,#matrix.quick-hide-hints .triangles-hint{opacity:0;transition-delay:0s!important}#choices.quick-reset *,#matrix.quick-reset *{transition-delay:0s!important}#choices.quick-hide-hints .lines,#choices.quick-hide-hints .triangles{transition-delay:0s!important;opacity:1}#choices.show-number-hints .number-hint{opacity:1}.color-hint{opacity:0}.show-color-hints .color-hint{opacity:1}.color-hint.dark rect,.dark{fill:#222;stroke:#222;stroke-width:1}.color-hint.mid rect,.mid{fill:#888;stroke:#222;stroke-width:1}.color-hint.light rect,.light{fill:#eee;stroke:#222;stroke-width:1}.triangles circle{r:20}#choices.fig2 #choice1 .number-hint,#choices.fig2 #choice3 .number-hint,#choices.fig2 #choice4 .number-hint,#choices.fig2 #choice5 .number-hint,#choices.fig2 #choice8 .number-hint{fill:#269dd8}#choices.fig2 #choice2 .number-hint,#choices.fig2 #choice6 .number-hint{fill:#2626d8}#choices.fig2 #choice7 .number-hint{fill:#9d26d8}#choices.fig3 #choice1 .number-hint,#choices.fig3 #choice2 .number-hint,#choices.fig3 #choice3 .number-hint,#choices.fig3 #choice5 .number-hint,#choices.fig3 #choice6 .number-hint,#choices.fig8 #choice6 .number-hint{fill:#2626d8}#choices.fig3 #choice4 .number-hint,#choices.fig3 #choice7 .number-hint{fill:#9d26d8}#matrix #solution{opacity:0}#matrix.show-solution #solution{opacity:1}#matrix.show-solution #solution rect{fill:#ffd27e}#text div{display:none}#text div.visible{display:block}#nav,#replay{display:none}#text p{transition:opacity 250ms ease-out;opacity:0;position:absolute;left:0;top:0}#text p.visible{opacity:1}.button{transition:opacity 150ms ease-out;background-color:#0074c8;color:#fff;padding:15px 30px;font-size:20px}.button:hover{background-color:#2f9eef}.button.hidden{background-color:#888;pointer-events:none;opacity:.1}.button svg{width:32px;height:32px;margin-left:1em}#nav{height:3em;width:100%;border-bottom:1px solid #0074c8}#nav p{width:100px;float:left;line-height:3em}#nav p:hover{background-color:#2f9eef}#nav p.active{background-color:#0074c8;color:#fff}#copy{position:absolute;left:20px;right:20px;top:20px;height:100px}#base{position:absolute;left:0;right:0;top:140px}.panel-number{font-size:100px;text-anchor:middle;alignment-baseline:baseline}.correct-mark,.correct-mark2,.correct-mark3{text-anchor:middle;opacity:0}.correct-mark{fill:#269dd8;alignment-baseline:after-edge;font-size:50px}.fig3 .correct-mark{fill:#2626d8}.correct-mark2{fill:#d8d826;alignment-baseline:initial;font-size:100px}.correct-mark3{fill:#222;alignment-baseline:initial;font-size:80px}.box{width:8px;height:8px;display:inline-block;border:1px solid #333;vertical-align:baseline}.light-gray{background-color:#eee}.dark-gray{background-color:#888}.black{background-color:#222}.fig1.show-solution #choice1 rect,.fig2.show-solution #choice1 rect,.fig3.show-solution #choice1 rect{fill:#ffd27e}@media (min-width :640px){#base,#copy{position:absolute}#copy{left:310px;top:10px;width:400px;height:500px}#base{left:0;top:0;width:300px}}@media (max-width :640px){#nav{width:100%}#nav p{width:33%}.button{top:90px;width:100%;font-size:20px;padding:10px 20px;text-align:center}.button svg{margin-left:.5em}#base{top:170px}}