*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;background:#000;color:#c8c8c8;font:12px/1.4 Arial,Helvetica,sans-serif}
.app{position:relative;width:1280px;height:720px;margin:auto;display:flex;flex-direction:column;overflow:hidden;background:#2b2b2b}
button{cursor:pointer;font:inherit;color:#b9b9b9;background:none;border:1px solid #4a4a4c;border-radius:5px;padding:4px 12px}
button:hover{background:#3d3f41}
button:active{background:#484a4c}
.ctl{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.tools{display:flex;align-items:center;padding:0 8px}
.ttab{padding:12px 14px;border:0;border-radius:0}
.ttab.on{background:#323334;color:#fff;font-weight:700}
.subbar{display:flex;align-items:center;padding:6px 8px}
.stab{padding:3px 10px;background:#424244;border:0;border-bottom:2px solid #db612f;border-radius:3px;color:#eaeaea}
.stab b{color:#a8a8a8;font-weight:400}
.bar{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#323334;border-top:1px solid #1f1f1f;border-bottom:1px solid #1f1f1f}
.send,.ai,.cancel{display:inline-block;cursor:pointer;padding:4px 12px;border-radius:5px;font-weight:700;color:#fff}
.send{background:#db612f;border:1px solid #db612f;padding:4px 16px}
.send:hover{background:#e4703c;border-color:#e4703c}
.ai{background:#4b44ae;border:1px solid #4b44ae}
.ai:hover{background:#584fd0;border-color:#584fd0}
.cancel{border:1px solid #4a4a4c;color:#6f6f6f;font-weight:400}
.cancel:hover{background:#3d3f41}
.wipe{display:none;position:fixed;inset:0;place-items:center;overflow:hidden;z-index:9}
body.wiping .wipe{display:grid}
.art{margin:0;font-family:Consolas,"DejaVu Sans Mono",monospace;font-size:5px;line-height:1;white-space:pre;color:#8f8f8f}
body.logo .art{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
body.wiping .art{font-size:7px}
.wipe::before,.wipe::after{content:"";position:absolute;inset:0;display:none}
.wipe::before{background:#0000aa;z-index:1}
.wipe::after{background:#000;z-index:2}
body.blue .wipe::before{display:block}
body.black .wipe::after{display:block}
body.busy .send{opacity:.45;pointer-events:none}
body.busy .cancel{color:#b9b9b9}
.grow{flex:1}
.sep{width:1px;align-self:stretch;background:#4a4a4c;margin:0 4px}
.ico{padding:3px 8px}
.rnd{border-radius:50%}
.target{font-weight:700;color:#f0f0f0}
.proto{color:#b9b9b9}

main{flex:1;min-height:0;display:flex}
.pane{flex:1;min-width:0;display:flex;flex-direction:column}
.pane + .pane{border-left:1px solid #3a3b3c}
.phead{display:flex;align-items:center;padding:10px 12px}
.phead h2{margin:0;font-size:13px;color:#f0f0f0}
.editor{position:relative;flex:1;min-height:0;display:flex;overflow:auto;padding:6px 0;font-family:Consolas,"DejaVu Sans Mono","Liberation Mono",monospace;font-size:13px;line-height:1.5;color:#d0d0d0}
.gutter{flex:none;width:3.4em;padding-right:10px;text-align:right;color:#6f6f6f;user-select:none}
.code i{display:inline-block;width:3.4em;padding-right:10px;text-align:right;font-style:normal;color:#6f6f6f;user-select:none}
body:has(#method option[value="GET"]:checked),body:has(#method option[value="HEAD"]:checked),body:has(#method option[value="DELETE"]:checked){
	.blank,.bodyline,.ct,.hdr:has(.len){display:none}
}
.code{flex:1;min-width:0;padding-right:10px}
.editor input,.editor select{font:inherit;color:inherit;background:none;border:0;padding:0;outline:0}
.editor input:focus,.editor select:focus{background:#3a3b3d}
.reqline,.hdr,.bodyline{display:block;white-space:pre-wrap;word-break:break-all;padding-left:calc(3.4em + 10px);text-indent:calc(-3.4em - 10px)}
.reqline{color:#dcdcdc}
.hdr{color:#a9a9a9}
.hk{font-weight:400;color:#d6d6d6}
.blank{display:block;height:1.5em}
.reqline:focus-within,.hdr:focus,.bodyline:focus-within{background:#343537;outline:0}
#method{background:#3a3b3d;border:1px solid #4a4a4c;border-radius:4px;padding:0 4px;color:#eaeaea}
#endpoint{color:#dcdcdc}
.payload{width:34ch}

.aipanel{display:none;position:absolute;top:0;right:0;bottom:0;width:380px;flex-direction:column;background:#252526;border-left:1px solid #3a3b3c;box-shadow:-10px 0 20px rgba(0,0,0,.5)}
#ai:checked ~ .aipanel{display:flex}
body:has(#ai:checked) .ai{background:#584fd0;border-color:#584fd0}
.aihead{display:flex;align-items:center;padding:10px 14px}
.aihead h2{margin:0;font-size:12px;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spark{margin-right:6px;color:#8b7cf0;font-weight:400}
.aix{margin-left:auto;cursor:pointer;color:#b9b9b9;border:1px solid #4a4a4c;border-radius:5px;padding:1px 8px}
.aix:hover{background:#3d3f41}
.aitabs{display:flex;padding:0 14px;border-bottom:1px solid #3a3b3c}
.ait{border:0;padding:0 0 7px;color:#9a9a9a}
.ait:hover{background:none;color:#d6d6d6}
.ait.on{color:#fff;box-shadow:0 2px 0 #db612f}
.aisteps{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid #3a3b3c}
.aistep{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#2f3032;border-radius:5px;color:#d6d6d6}
.ck{flex:none;width:15px;height:15px;font-size:10px;line-height:15px;text-align:center;font-weight:700;color:#22301f;background:#7fc07f;border-radius:50%}
.aichat{flex:1;min-height:0;overflow:auto;padding:12px 14px}
.asec{margin-bottom:6px;color:#8b9cf0;font-weight:700}
.redlab{display:inline-block;width:132px;height:10px;background:#55565a;border-radius:2px}
.lab2{width:104px}
.wide{width:190px;height:12px}
.apara{margin-bottom:12px;line-height:1.5}
.redacted{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.redacted del{display:block;height:11px;background:#55565a;border-radius:2px;text-decoration:none}
.redacted del:nth-child(1){width:100%}
.redacted del:nth-child(2){width:96%}
.redacted del:nth-child(3){width:99%}
.redacted del:nth-child(4){width:58%}
.ajson{margin:0 0 12px;padding:8px 10px;background:#2f3032;border-radius:5px;font-family:Consolas,"DejaVu Sans Mono",monospace;font-size:11px;white-space:pre-wrap}
.ainote{padding:10px 14px 0;color:#9a9a9a;font-style:italic;line-height:1.5;text-align:center}
.aicomposer{padding:12px 14px;border-top:1px solid #3a3b3c}
.aicomposer input{width:100%;font:inherit;color:#d0d0d0;background:#2b2b2b;border:1px solid #4b44ae;border-bottom-color:#3a3b3c;border-radius:6px 6px 0 0;padding:8px 10px;outline:0}
.aibar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#2b2b2b;border:1px solid #4b44ae;border-top:0;border-radius:0 0 6px 6px}
.aib{width:19px;height:19px;padding:0;line-height:17px;text-align:center;border-radius:50%}
.vsep{width:1px;height:16px;background:#4a4a4c}
.chip{border:0;padding:3px 8px;background:#3a3b3d;border-radius:4px}
.plane{margin-left:auto;border:0;color:#8b7cf0;font-size:14px}
.aicomposer:has(input:disabled) input,.aicomposer:has(input:disabled) .aibar{border-color:#3a3b3c}
.aicomposer input:disabled{cursor:not-allowed;color:#8a8a8a}
.aibar button:disabled{cursor:not-allowed;color:#6f6f6f;border-color:#3a3b3c}
.aibar .chip:disabled{background:#313234}
.aibar .plane:disabled{color:#55565a}

.res pre{display:none;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.r200mem{user-select:none}
.st{color:#dcdcdc}
body:has(#sent:checked){
	&[data-route="root"][data-method="GET"] .res .r200root{display:block}
	&[data-route="root"]:not([data-method="GET"]) .res .r405{display:block}
	&[data-route="index"][data-method="GET"] .res .r200list{display:block}
	&[data-route="slash"] .res .r301{display:block}
	&[data-route="memory"][data-method="GET"][data-valid="1"]:not([data-sealed="1"]):not(.busy) .res .r200mem{display:block}
	&[data-route="memory"][data-sealed="1"][data-method="GET"][data-valid="1"]:not(.busy) .res .r403{display:block}
	&:is([data-route="index"],[data-route="memory"],[data-route="sub"]):not([data-method="GET"][data-valid="1"]):not([data-sealed="1"][data-method="DELETE"][data-valid="1"]) .res .r403{display:block}
	&:not([data-route="index"]):not([data-route="memory"]):not([data-route="sub"])[data-valid="1"] .res .r403{display:block}
	&[data-route="memory"][data-sealed="1"][data-method="DELETE"][data-valid="1"]:not(.busy):not(.logo):not(.wiping) .res .r200core{display:block}
	&:not([data-route="root"]):not([data-route="slash"])[data-method="POST"] .res .r403,
	&:not([data-route="root"]):not([data-route="slash"])[data-method="PUT"] .res .r403,
	&:not([data-route="root"]):not([data-route="slash"])[data-method="PATCH"] .res .r403{display:block}
	&:not([data-route="root"]):not([data-route="index"]):not([data-route="memory"]):not([data-route="sub"]):not([data-route="slash"])[data-valid="0"]:not([data-method="POST"]):not([data-method="PUT"]):not([data-method="PATCH"]) .res .r404{display:block}
}
