Find tuples/ triples adding up to 0

by thebabydino

HTML

<span>Sequence length</span>
<a href='#' id="len-decr" class="ctrl sz-ctrl">-</a>
<span id="seq-len">8</span>
<a href='#' id="len-incr" class="ctrl sz-ctrl">+</a>
<a href='#' id='gen' class='ctrl'>Generate sequence!</a>
<div id='seq' class='seq'></div>
<span>Find</span>
<a href='#' id="n-decr" class="ctrl sz-ctrl">-</a>
<span id="n-len">triples</span>
<a href='#' id="n-incr" class="ctrl sz-ctrl">+</a>
<span> adding up to zero.</span>
<a href='#' id='find' class='ctrl'>Find them, I said!</a>

CSS

html { 
    background: whitesmoke;
    font: 85%/1.3 'Trebuchet MS', Helvetica, sans-serif;
}
body { padding: .5em; }
.ctrl {
    display: inline-block;
    position: relative;
    padding: .1em .4em;
    margin: .3em 0;
    border-radius: .5em;
    box-shadow: 1px 1px 3px black;
    background: gainsboro;
    color: black;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 0 white;
}
.ctrl:hover, .ctrl:focus {
    outline: none;
    background: silver;
    text-shadow: 0 1px 0 aquamarine;
}
.ctrl:active {
    top: 2px;
    box-shadow: inset 1px 1px 3px black;
}
.sz-ctrl {
    width: .7em;
    height: 1.3em;
}
.seq {
    min-height: 1.3em;
    padding: .5em;
    margin: .5em;
    border: solid .1em silver;
    border-radius: .5em;
    background: gainsboro;
}