
:root{--bg:#fafafa;--fg:#202124;--line:#dadce0;--acc:#1a73e8;--face:#ece9d8;--face2:#f6f5ef;--dfg:#000}
@media (prefers-color-scheme:dark){:root{--bg:#202124;--fg:#e8eaed;--line:#5f6368}}
body{margin:0;padding:0 16px 16px;background:var(--bg);color:var(--fg);font:14px system-ui,sans-serif}
#caption{font-size:14px;font-weight:bold;margin:0 -16px;padding:3px 6px;white-space:pre;background:linear-gradient(90deg,#0a246a,#a6caf0);color:#fff;
 overflow:hidden;text-overflow:ellipsis;user-select:none}   #menubar{display:flex;flex-wrap:wrap;align-items:center;gap:0;border-bottom:1px solid var(--line);user-select:none}
.mtop{position:relative}
.mtop>button{border:0;background:transparent;color:var(--fg);padding:4px 10px;margin:0;border-radius:0;cursor:default}
.mtop>button:hover:not(:disabled),.mtop.open>button{background:var(--acc);color:#fff}
.mtop>button[data-blank]{min-width:1.6em;min-height:1.6em}   .mtop>button:disabled{opacity:.45}
.drop{display:none;position:absolute;left:0;top:100%;z-index:20;min-width:16em;max-height:70vh;overflow:auto;background:var(--face2);color:var(--dfg);
 border:1px solid #888;box-shadow:2px 2px 4px rgba(0,0,0,.3);padding:2px 0}
.mtop.open .drop{display:block}
.mi{display:flex;width:100%;gap:12px;border:0;background:transparent;color:var(--dfg);text-align:left;padding:3px 10px 3px 4px;margin:0;border-radius:0;cursor:default;white-space:nowrap}
.mi:hover{background:var(--acc);color:#fff} .mi .ck{width:1.2em;text-align:center} .mi .lb{flex:1} .mi .ky{opacity:.7}
#editor{margin-left:auto;padding:2px 6px;font-size:13px}
#bars{display:flex;flex-wrap:wrap;gap:2px 2px;padding:2px 0;border-bottom:1px solid var(--line)}
#bars:empty{display:none}
#lbars{display:flex;gap:2px;align-items:flex-start;flex:0 0 auto} #lbars:empty{display:none}
.lcol{display:flex;flex-direction:column;gap:2px}
.tb{display:flex;align-items:center;gap:0;padding:2px;background:var(--face);border:1px solid;border-color:#fff #808080 #808080 #fff}
.lcol .tb{flex-direction:column}
.tb[hidden]{display:none}
.tb .sep{width:6px} .lcol .tb .sep{width:auto;height:6px}
.tbb{box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;line-height:0;cursor:default;
 background:var(--face);border:1px solid;border-color:#fff #000 #000 #fff;box-shadow:inset -1px -1px #808080;border-radius:0}
.tbb:active:not(:disabled),.tbb[aria-pressed=true]{border-color:#000 #fff #fff #000;box-shadow:inset 1px 1px #808080;background:var(--face2)}
.tbb:disabled img{filter:grayscale(1) opacity(.45)}
#cmdbar{display:flex;align-items:center;gap:6px;padding:3px 4px;background:var(--face);color:var(--dfg);border-bottom:1px solid #808080;font-size:13px}
#cmdbar .box,#cmd{border:1px solid;border-color:#808080 #fff #fff #808080;background:#fff;color:#000;padding:1px 4px;min-height:1.3em;box-sizing:border-box}
#cmdbar .box{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cmdbar>button{border:1px solid;border-color:#fff #404040 #404040 #fff;background:var(--face);color:#000;padding:1px 12px;font:inherit}
.row{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:6px}
.panel{flex:1 1 420px;min-width:0} .panel.view{flex:0 0 auto;max-width:100%;overflow:auto} #wrap{position:relative;display:inline-block}
#v{border:1px solid var(--line);background:#fff;cursor:crosshair;display:block;user-select:none}
#ov{position:absolute;left:0;top:0;pointer-events:none}
table{border-collapse:collapse;font-size:12px;width:100%} td,th{border:1px solid var(--line);padding:2px 6px;text-align:right}
td:first-child,th:first-child,td:nth-child(2){text-align:left} tr.sel{background:rgba(217,48,37,.12)}
#status{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:13px}
#status>*{border:1px solid #9a9a9a;border-color:#9a9a9a #fff #fff #9a9a9a;background:var(--face2);color:var(--dfg);padding:2px 6px;min-height:1.3em}
#msg{flex:1 1 30em;color:#000} #mode{flex:0 0 8em} #xy{min-width:12em;font-variant-numeric:tabular-nums} #hint{flex:1 1 20em}
.ind{min-width:2.6em;text-align:center;opacity:.35} .ind.on{opacity:1}
#line{display:flex;gap:6px;align-items:center;flex:1 1 20em} #linep{white-space:nowrap} #cmd{flex:1;font:13px ui-monospace,monospace}
#modal{display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.25);align-items:center;justify-content:center}
#modal.open{display:flex}
.dlg{background:var(--face);color:var(--dfg);border:2px solid;border-color:#fff #555 #555 #fff;box-shadow:3px 3px 8px rgba(0,0,0,.4);max-width:96vw;max-height:94vh;overflow:auto}
.dlg .cap{background:linear-gradient(90deg,#0a246a,#a6caf0);color:#fff;font-weight:bold;padding:3px 6px;font-size:13px;user-select:none}
.dlg .cli{position:relative}
.dlg .cli>*{position:absolute;box-sizing:border-box;margin:0;font:inherit;white-space:pre;overflow:hidden}   .dlg .cli .ch>span{white-space:pre;overflow:hidden} .dlg .cli .lbl{white-space:pre-wrap}   .dlg .cli .sb{display:flex;background:repeating-conic-gradient(#fff 0 25%,#d4d0c8 0 50%) 0 0/2px 2px;pointer-events:none}   .dlg .cli .sb.v{flex-direction:column} .dlg .cli .sb>i{flex:none;box-sizing:border-box;background:var(--face);border:1px solid;border-color:#fff #404040 #404040 #fff;
 color:#808080;font:normal 7px/1 sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dlg .cli .sb>b{flex:1}
.dlg .cli input[type=text],.dlg .cli select{padding:0 2px;border:1px solid;border-color:#808080 #fff #fff #808080;background:#fff;color:#000}
.dlg .cli .ch{display:flex;align-items:center;gap:3px} .dlg .cli .ch input{margin:0}
.dlg .cli .grp{border:1px solid #9a9a9a;border-radius:2px;overflow:visible} .dlg .cli .grp>span{position:absolute;top:-.7em;left:6px;background:var(--face);padding:0 2px}
.dlg .cli .frm{border-top:1px solid #808080;border-bottom:1px solid #fff}
.dlg .cli .grp,.dlg .cli .frm,.dlg .cli .lbl{pointer-events:none}   .dlg .cli button,.dlg .flow button{border:1px solid;border-color:#fff #404040 #404040 #fff;background:var(--face);color:#000;padding:0}
.dlg .flow{padding:10px;display:flex;flex-direction:column;gap:8px;min-width:28em}
.dlg .flow input{font:13px ui-monospace,monospace;padding:2px 4px}
.dlg .flow .btns{display:flex;gap:8px;justify-content:flex-end} .dlg .flow .btns button{padding:3px 14px}
.dlg pre{margin:0;white-space:pre-wrap;font:13px ui-monospace,monospace;max-height:60vh;overflow:auto}
.dlg .rows{position:absolute;overflow:auto;display:grid;grid-template-columns:auto 10em;gap:4px 8px;align-content:start;padding:6px;white-space:normal}
.dlg .rows label{position:static}
.dlg .rows input{position:static}
#splashwrap{display:none;position:fixed;inset:0;z-index:90;align-items:center;justify-content:center;background:transparent}
#splashwrap.open{display:flex} #splash{line-height:0;box-shadow:3px 3px 10px rgba(0,0,0,.45)} #splash img{display:block;max-width:96vw;max-height:94vh}
.dlg .pal{padding:8px;display:flex;flex-direction:column;gap:6px;width:min(36em,90vw)}
.dlg .pal input{font:13px ui-monospace,monospace;padding:3px 4px}
.dlg .pal ul{list-style:none;margin:0;padding:0;max-height:50vh;overflow:auto;background:#fff;border:1px solid;border-color:#808080 #fff #fff #808080}
.dlg .pal li{padding:2px 6px;white-space:nowrap;cursor:default} .dlg .pal li[aria-selected=true]{background:var(--acc);color:#fff}
.mi:disabled{opacity:.45} .mi:disabled:hover{background:transparent;color:var(--dfg)}
body.busy,body.busy *{cursor:wait!important}

#boot{position:fixed;left:50%;top:40%;transform:translateX(-50%);margin:0;padding:8px 14px;background:var(--face2);border:1px solid var(--line);font:14px system-ui,sans-serif}
#boot:empty{display:none}
#files{position:fixed;right:8px;bottom:28px;max-width:260px;max-height:40vh;overflow:auto;padding:6px 10px;background:var(--face2);border:1px solid var(--line);font:12px system-ui,sans-serif;z-index:5}
#files ul{margin:4px 0 0;padding-left:16px}
#files .up{cursor:pointer;color:var(--acc);text-decoration:underline}
#files .hint{display:block;color:#666}
