*{box-sizing:border-box}html,body{color:#e8edf2;background:#1b2026;height:100%;margin:0;font:14px system-ui,sans-serif;overflow:hidden}body{grid-template:"top top top""tools main side"1fr/132px 1fr 300px;display:grid}#topbar{background:#11161b;border-bottom:1px solid #2c3640;flex-wrap:wrap;grid-area:top;align-items:center;gap:6px;padding:8px 12px;display:flex}.brand{margin-right:6px}.file{color:#fc3;margin-right:6px;font-weight:600}.sep{background:#2c3640;width:1px;height:22px;margin:0 4px}.label{color:#9fb3c8}.yval{text-align:center;min-width:34px;font-weight:700}#status{margin-left:8px}#status.ok{color:#8bc34a}#status.warn{color:#ffb74d}#status.error{color:#ff6b6b}.readonly{color:#ff6b6b;margin-left:auto}button,select,input{font:inherit;color:inherit}button{cursor:pointer;background:#252e37;border:1px solid #3a4652;border-radius:6px;padding:5px 10px}button:hover{background:#2f3a45}button.primary{color:#222;background:#fc3;border-color:#fc3;font-weight:700}button.danger{color:#ff8a80;border-color:#8e2b2b}select,input{background:#0f1418;border:1px solid #3a4652;border-radius:6px;padding:5px 8px}#tools{background:#151b21;border-right:1px solid #2c3640;flex-direction:column;grid-area:tools;gap:4px;padding:8px;display:flex;overflow-y:auto}#tools button{text-align:left;grid-template-columns:22px 1fr auto;align-items:center;gap:6px;padding:7px 8px;display:grid}#tools button.active{color:#222;background:#fc3;border-color:#fc3}#tools .icon{font-size:16px}#tools kbd{opacity:.7;font-size:11px}main{grid-area:main;min-width:0;min-height:0;position:relative}#view{width:100%;height:100%;display:block}#help{color:#c7d3de;pointer-events:none;background:#0000008c;border-radius:6px;padding:6px 10px;font-size:12px;position:absolute;bottom:8px;left:8px;right:8px}#side{background:#151b21;border-left:1px solid #2c3640;flex-direction:column;grid-area:side;display:flex;overflow-y:auto}#inspector,#validation{padding:12px}#validation{border-top:1px solid #2c3640}#validation ul{margin:0;padding:0;list-style:none}#validation li{margin:4px 0;font-size:13px}#validation .error{color:#ff8a80}#validation .warn{color:#ffcc80}#validation .ok{color:#8bc34a;margin:0}h3{margin:0 0 10px}.muted{color:#9fb3c8;font-size:13px}.f{color:#9fb3c8;flex-direction:column;gap:3px;margin-bottom:8px;font-size:12px;display:flex}.f input,.f select{color:#e8edf2;width:100%}.f input[type=color]{height:30px;padding:0}.grid3{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.check{color:#e8edf2;align-items:center;gap:6px;margin:4px 0;font-size:13px;display:flex}.swatch{border-radius:3px;width:14px;height:14px;display:inline-block}.row{gap:6px;margin-top:10px;display:flex}
