:root{--s:32px;--sw:32px;--ox:0px;--fs:14px;--font:"Martian Mono", ui-monospace, monospace;--sheet:#f4f3ef;--line:#dedcd6;--head:#e9e7e1;--headText:#77756f;--chrome:#ecebe6;--text:#2b2b29;--mute:#8a8883;--select:#1d1d1b}*{box-sizing:border-box;margin:0}html,body{background:var(--sheet);height:100%;color:var(--text);font:var(--fs)/1 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}body{background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);background-size:var(--sw) var(--s);background-position:var(--ox) 0}#grid{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}h1{font:inherit}#home{cursor:pointer}[hidden]{display:none!important}.bar>*{transition:opacity .16s var(--delay,0s)}body:not(.ready) .bar>*{opacity:0}.bar{width:var(--cw,100%);height:var(--s);padding:0 var(--ox);white-space:nowrap;align-items:center;display:flex;position:absolute;left:0;overflow:hidden}.bar>*,.brand>*,.choice>*{height:var(--s);flex:none;justify-content:center;align-items:center;display:flex}.brand,.choice,.swatches{display:flex}.snap{padding:0 calc(var(--s) * .3)}.cell{width:var(--sw)}.cell svg{width:60%;height:60%}.push,#title>.push-right{margin-left:auto}.mute{color:var(--mute)}.folded{display:none!important}.btn{background:var(--select);color:var(--sheet)}.btn:hover{background:var(--mute)}.link:hover,.choice button:not(.on):hover{background:var(--line)}.choice .on:before{content:"["}.choice .on:after{content:"]"}.choice button:not(.on){color:var(--mute)}#title{top:0}#tools{top:var(--s)}#formula{top:calc(var(--s) * 2)}.swatches i{width:var(--sw);height:var(--s);display:block}#namebox{width:calc(var(--sw) * 4);padding-left:calc(var(--s) * .3);justify-content:flex-start}#expr{min-width:0;line-height:var(--s);text-overflow:ellipsis;padding-left:calc(var(--s) * .3);flex:1 1 0;display:block;overflow:hidden}#expr .str{color:var(--mute)}#menu{z-index:5;background:var(--text);color:var(--sheet);top:var(--s);position:absolute}.mrow{height:var(--s);align-items:center;display:flex}#menu .choice button:not(.on),#menu .dim{color:inherit;opacity:.55}#menu button:hover{opacity:1;background:var(--mute)}.toast{z-index:6;height:var(--s);align-items:center;gap:calc(var(--s) * .3);padding-left:calc(var(--s) * .3);background:var(--text);color:var(--sheet);display:flex;position:absolute}.toast .toast-icon{color:var(--mute)}.toast button{height:var(--s);margin-left:auto}.toast button:hover{background:var(--mute)}#page{z-index:4;white-space:normal;line-height:var(--s);pointer-events:none;position:absolute}#page .link,#page a{pointer-events:auto}#page{scrollbar-width:none;scroll-snap-type:y mandatory;overscroll-behavior:contain;overflow-y:auto}#page::-webkit-scrollbar{display:none}#page .pl{scroll-snap-align:start}@media (pointer:coarse){#page{pointer-events:auto}}#page .pl{height:var(--s);white-space:pre;overflow:hidden}#page .pl.dim,#page .dim{color:var(--mute)}#page{padding-left:calc(var(--s) * .3)}#page .link,#page a{text-align:left;height:var(--s);line-height:var(--s);vertical-align:top;margin-left:calc(var(--s) * -.3);padding:0 calc(var(--s) * .3);color:var(--text);text-decoration:none;display:inline-block}#page .link:hover,#page a:hover{background:var(--line)}#page .dim{color:var(--mute)}#footer{background:var(--chrome);box-shadow:0 -1px 0 var(--line);padding-bottom:env(safe-area-inset-bottom);position:fixed;bottom:0;left:0;right:0}#footer .bar{position:relative}#tabs button{color:var(--mute)}#tabs button:hover{color:var(--text);background:var(--line)}#tabs button.on{color:var(--text);background:var(--sheet)}#status{color:var(--mute)}@media (prefers-reduced-motion:reduce){*,.bar>*{transition:none!important}}.btn,.link:hover,.choice button:not(.on):hover,.swatches i,.toast,#menu,#page .link:hover,#page a:hover{box-shadow:inset 1px 1px 0 var(--line)}#tabs button.on,#tabs button:hover{box-shadow:inset 1px 0 0 var(--chrome)}#title .btn,#title .link:hover,#tools .link:hover,#tools .choice button:not(.on):hover,#tools .swatches i{box-shadow:inset 0 1px 0 var(--line)}#tools .swatches i.on,.swatches i.on{box-shadow:inset 0 0 0 2px var(--select)}
