:root{--pico-spacing: 10px}@font-face{font-family:Sonoma;src:url(../LTSonoma2.otf)}html,body{height:100%;margin:0;padding:0}body{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;grid-template-areas:"aside main" "footer footer";aside{grid-area:aside;padding:1rem;display:flex;flex-direction:column;justify-content:space-between}main{grid-area:main;padding:0;overflow:auto;noscript{h2{text-align:center}}}footer{grid-area:footer;display:flex;justify-content:center;a{width:1rem;flex:0 0 auto}}}:root{--pico-spacing: .4rem;--color-checked: var(--pico-primary-background);--color-unchecked: color-mix( in srgb, var(--color-checked), var(--pico-muted-color) 70% );--bottom-size-2: .4rem;--shadow-clear: rgb(255, 255, 255, .12);--shadow-dark: rgb(0, 0, 0, .12);--box-shadow: .2rem}table{margin:auto;width:auto;transform:perspective(2000px) rotateX(4deg);tbody>tr>td{border:none;text-align:center}}label{--bottom-size-reference: .7rem;--base-size: 5rem;border:none;font:inherit;outline:inherit;width:9rem!important;overflow:hidden;height:var(--base-size);border-radius:1rem;text-align:center;align-content:center;font-family:Sonoma,sans-serif;user-select:none;color:var(--pico-background-color);text-shadow:-1px -1px 1px var(--shadow-clear),1px 1px 1px var(--shadow-dark);padding:calc(var(--box-shadow) + .2em);background:var(--color) none;transition:all .1s linear;&:not(:has(input:checked)){--color: var(--color-unchecked);--bottom-size: var(--bottom-size-reference)}&:has(input:checked){--color: var(--color-checked);--bottom-size: var(--bottom-size-2)}&:has(input:active){--bottom-size: 0em}input{display:none}margin-top:calc(var(--bottom-size-reference) - var(--bottom-size));margin-bottom:var(--bottom-size);box-shadow:color-mix(in srgb,var(--color),black 30%) 0 var(--bottom-size) 0 0,inset var(--shadow-clear) var(--box-shadow) var(--box-shadow) var(--box-shadow) var(--box-shadow),inset var(--shadow-dark) calc(0rem - var(--box-shadow)) calc(0rem - var(--box-shadow)) var(--box-shadow) var(--box-shadow)}output{--color: var(--color-unchecked);&.checked{--color: var(--color-checked)}&:before{content:"✮";color:var(--color);transition:all .3s linear;font-size:xxx-large;width:1em;height:1ch}}