@font-face{font-family:TuglaVAR;src:url(../tugla-var.woff2) format("woff2");font-display:block}:root{--ux:24px;--uy:24px;--rh:24px;--ink:#F2EBDD;--bg:#000;--hair:rgba(242,235,221,.18);--acc:#E85D28}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden}body{font-family:TuglaVAR,monospace;font-size:max(12px,calc(var(--ux)*.75));line-height:var(--rh);text-transform:uppercase;font-variation-settings:"WDTH" 140,"HGHT" 140,"STRK" 50}#app{width:calc(var(--ux)*var(--n));margin:0;position:relative;background-image:linear-gradient(to right,var(--hair) 1px,transparent 1px),linear-gradient(to bottom,var(--hair) 1px,transparent 1px);background-size:var(--ux) var(--uy);min-height:100vh;overflow:hidden}.row{display:grid;grid-template-columns:repeat(var(--n),var(--ux));grid-auto-rows:var(--uy)}.blk{grid-column:1/-1}header{min-height:calc(var(--uy)*6);display:flex;align-items:center;padding-left:var(--ux)}h1{margin:0;font-size:calc(var(--ux)*1.6);line-height:1.15;font-weight:400;font-variation-settings:"WDTH" 140,"HGHT" 140,"STRK" 105}.panel{padding:0 var(--ux)}.lab{min-height:var(--rh);display:flex;align-items:center;opacity:.6;white-space:normal;overflow-wrap:anywhere;line-height:var(--rh);font-size:max(11px,calc(var(--ux)*.6))}button,select,input,textarea{font:inherit;color:inherit;text-transform:inherit;background:transparent;border:0;cursor:pointer;height:var(--rh);padding:0 calc(var(--ux)*.5);margin:0;font-variation-settings:inherit;border-radius:0}button:hover{background:var(--ink);color:var(--bg)}button[aria-pressed=true],button.on{background:var(--acc);color:var(--bg)}input[type=range]{width:100%;height:var(--rh);padding:0;accent-color:var(--acc)}input[type=text]{border-bottom:1px solid var(--ink);cursor:text;width:calc(var(--ux)*10)}.axes{position:relative;display:flex;align-items:center;height:var(--rh);white-space:nowrap;gap:calc(var(--ux)*.5)}.knobrow{cursor:ew-resize;touch-action:pan-y}.knobrow .track{position:absolute;left:0;right:calc(var(--ux)*2.5);top:50%;height:1px;background:var(--hair)}.knob{position:absolute;top:0;transform:translate(-50%);font-family:TuglaVAR;font-size:calc(var(--rh)*.85);line-height:var(--rh);color:var(--acc);pointer-events:none;text-transform:none;font-variation-settings:inherit}.knobrow .aval{margin-left:auto;width:calc(var(--ux)*2);text-align:right}input.sr{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.axes .aval{text-align:right;font-size:max(11px,calc(var(--ux)*.55));opacity:.7}.axes span:last-child{text-align:right}.tree details{border-top:1px solid var(--hair)}.tree details:not([open])>:not(summary){display:none}.tree summary{min-height:calc(var(--rh)*1.4);display:flex;align-items:center;cursor:pointer;list-style:none}.tree summary:before{content:"+ "}.tree details[open]>summary:before{content:"- "}.tiles{display:grid;grid-template-columns:repeat(auto-fill,var(--ux));grid-auto-rows:auto;grid-auto-flow:dense;width:100%}.tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;cursor:pointer;padding:0;overflow:hidden;border-radius:0;width:100%;height:auto}.tile svg{display:block;flex:none}.tile small{display:block;min-height:var(--rh);font-size:max(11px,calc(var(--ux)*.5));line-height:1.2;opacity:.7;pointer-events:none;white-space:normal;overflow-wrap:anywhere}.tile.sel{background:var(--ink);color:var(--bg)}.tile.edited small:after{content:" *"}.field{width:100%;display:block}.field svg{display:block;touch-action:none}.ctl{display:flex;flex-wrap:wrap;gap:0;min-height:var(--rh)}.pre{width:100%;min-height:calc(var(--uy)*6);display:block}.pre span{display:block;line-height:var(--uy);overflow-wrap:anywhere;text-transform:none}textarea{height:calc(var(--rh)*4);width:100%;border:1px solid var(--hair);padding:calc(var(--ux)*.25);cursor:text;text-transform:none;font-size:max(11px,calc(var(--ux)*.5));line-height:1.3;font-family:monospace}.note{opacity:.6;font-size:max(11px,calc(var(--ux)*.55));line-height:calc(var(--rh)*.95);white-space:normal;overflow-wrap:anywhere}.cols2{display:flex;flex-direction:column}@media (min-width:900px){.cols2{flex-direction:row}.cols2>.left{width:calc(var(--ux)*var(--leftn))}.cols2>.right{flex:1;min-width:0}}@media (max-width:899px){body{font-size:max(12px,calc(var(--ux)*.62))}.axes{grid-template-columns:calc(var(--ux)*7) 1fr}.tile small{font-size:calc(var(--ux)*.5)}button{padding:0 calc(var(--ux)*.3)}}@media (min-width:900px){.cols2>.left{position:sticky;top:0;align-self:flex-start;max-height:100vh;overflow-y:auto}}#big{min-height:calc(var(--uy)*3)}#back{display:none;width:100%;margin-bottom:var(--uy)}@media (max-width:700px){#back{display:block}}svg text{text-transform:none}
