/* Copyright 2026 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root{
  --csstools-color-scheme--light:initial;
  color-scheme:light dark;
}

@media (prefers-color-scheme: dark){

:root{
  --csstools-color-scheme--light:;
}
}
*{
  box-sizing:border-box;
}
body{
  font-family:"Courier New", Courier, monospace;
  margin:0;
  padding:16px;
  --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #1e1e1e;
  background:var(--csstools-light-dark-toggle--0, #fff);
  background:light-dark(#fff, #1e1e1e);
  --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #d4d4d4;
  color:var(--csstools-light-dark-toggle--1, #1e1e1e);
  color:light-dark(#1e1e1e, #d4d4d4);
  font-size:13px;
  line-height:1.5;
}
#header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
#header h1{
    --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #9cdcfe;
    color:var(--csstools-light-dark-toggle--3, #0070c1);
    color:light-dark(#0070c1, #9cdcfe);
    font-size:1.2em;
    margin:0;
  }
#header #pdf-info{
    font-family:system-ui, sans-serif;
    font-size:1.15em;
    font-weight:500;
    --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #d4d4d4;
    color:var(--csstools-light-dark-toggle--4, #1e1e1e);
    color:light-dark(#1e1e1e, #d4d4d4);
  }
#password-dialog{
  --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #2d2d2d;
  background:var(--csstools-light-dark-toggle--5, #fff);
  background:light-dark(#fff, #2d2d2d);
  --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) #d4d4d4;
  color:var(--csstools-light-dark-toggle--6, #1e1e1e);
  color:light-dark(#1e1e1e, #d4d4d4);
  --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) #555;
  border:1px solid var(--csstools-light-dark-toggle--7, #ccc);
  border:1px solid light-dark(#ccc, #555);
  border-radius:6px;
  padding:20px;
  min-width:320px;
}
#password-dialog::backdrop{
    background:rgb(0 0 0 / 0.4);
  }
#password-dialog p{
    margin:0 0 12px;
  }
#password-dialog input{
    display:block;
    width:100%;
    margin-top:4px;
    --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) #3c3c3c;
    background:var(--csstools-light-dark-toggle--8, #fff);
    background:light-dark(#fff, #3c3c3c);
    --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) #d4d4d4;
    color:var(--csstools-light-dark-toggle--9, #1e1e1e);
    color:light-dark(#1e1e1e, #d4d4d4);
    --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #555;
    border:1px solid var(--csstools-light-dark-toggle--10, #c8c8c8);
    border:1px solid light-dark(#c8c8c8, #555);
    border-radius:3px;
    padding:4px 8px;
    font-family:inherit;
    font-size:inherit;
  }
#password-dialog .password-dialog-buttons{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:16px;
  }
:is(#password-dialog .password-dialog-buttons) button{
      padding:4px 14px;
      border-radius:3px;
      --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) #555;
      border:1px solid var(--csstools-light-dark-toggle--11, #c8c8c8);
      border:1px solid light-dark(#c8c8c8, #555);
      --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) #3c3c3c;
      background:var(--csstools-light-dark-toggle--12, #f3f3f3);
      background:light-dark(#f3f3f3, #3c3c3c);
      color:inherit;
      cursor:pointer;
      font-family:inherit;
      font-size:inherit;
    }
:is(:is(#password-dialog .password-dialog-buttons) button):hover{
        --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #4a4a4a;
        background:var(--csstools-light-dark-toggle--13, #e0e0e0);
        background:light-dark(#e0e0e0, #4a4a4a);
      }
#controls{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:10px 14px;
  --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #252526;
  background:var(--csstools-light-dark-toggle--14, #f3f3f3);
  background:light-dark(#f3f3f3, #252526);
  border-radius:4px;
  --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #3c3c3c;
  border:1px solid var(--csstools-light-dark-toggle--15, #e0e0e0);
  border:1px solid light-dark(#e0e0e0, #3c3c3c);
}
#controls label{
    display:flex;
    align-items:center;
    gap:4px;
    --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #888;
    color:var(--csstools-light-dark-toggle--16, #6e6e6e);
    color:light-dark(#6e6e6e, #888);
  }
#controls #github-link{
    margin-inline-start:auto;
    display:flex;
    align-items:center;
    --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #aaa;
    color:var(--csstools-light-dark-toggle--17, #6e6e6e);
    color:light-dark(#6e6e6e, #aaa);
    text-decoration:none;
  }
:is(#controls #github-link):hover{
      --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #fff;
      color:var(--csstools-light-dark-toggle--18, #1e1e1e);
      color:light-dark(#1e1e1e, #fff);
    }
:is(#controls #github-link) svg{
      width:20px;
      height:20px;
      fill:currentColor;
    }
#goto-input{
  --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #3c3c3c;
  background:var(--csstools-light-dark-toggle--19, #fff);
  background:light-dark(#fff, #3c3c3c);
  --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #d4d4d4;
  color:var(--csstools-light-dark-toggle--20, #1e1e1e);
  color:light-dark(#1e1e1e, #d4d4d4);
  --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #555;
  border:1px solid var(--csstools-light-dark-toggle--21, #c8c8c8);
  border:1px solid light-dark(#c8c8c8, #555);
  border-radius:3px;
  padding:2px 6px;
  font-family:inherit;
  font-size:inherit;
}
#goto-input:disabled{
    opacity:0.4;
  }
#goto-input[aria-invalid="true"]{
    border-color:#f66;
  }
#status{
  --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #888;
  color:var(--csstools-light-dark-toggle--2, #6e6e6e);
  color:light-dark(#6e6e6e, #888);
  font-style:italic;
}
#tree{
  padding:8px 12px;
  --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #252526;
  background:var(--csstools-light-dark-toggle--22, #f3f3f3);
  background:light-dark(#f3f3f3, #252526);
  border-radius:4px;
  --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) #3c3c3c;
  border:1px solid var(--csstools-light-dark-toggle--23, #e0e0e0);
  border:1px solid light-dark(#e0e0e0, #3c3c3c);
  min-height:60px;
}
#tree .node{
    display:block;
    padding:1px 0;
  }
#tree .key{
    --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) #9cdcfe;
    color:var(--csstools-light-dark-toggle--24, #0070c1);
    color:light-dark(#0070c1, #9cdcfe);
  }
#tree .separator{
    --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) #888;
    color:var(--csstools-light-dark-toggle--25, #6e6e6e);
    color:light-dark(#6e6e6e, #888);
  }
#tree [role="button"]{
    display:inline-block;
    width:14px;
    font-size:0.7em;
    --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) #aaa;
    color:var(--csstools-light-dark-toggle--26, #666);
    color:light-dark(#666, #aaa);
    cursor:pointer;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    vertical-align:middle;
  }
#tree [role="group"]{
    padding-left:20px;
    --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #444;
    border-left:1px dashed var(--csstools-light-dark-toggle--27, #d0d0d0);
    border-left:1px dashed light-dark(#d0d0d0, #444);
    margin-left:2px;
  }
.hidden:is(#tree [role="group"]){
      display:none;
    }
#tree .ref{
    --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #4ec9b0;
    color:var(--csstools-light-dark-toggle--28, #007b6e);
    color:light-dark(#007b6e, #4ec9b0);
    cursor:pointer;
    -webkit-text-decoration:underline dotted;
            text-decoration:underline dotted;
  }
:is(#tree .ref):hover{
      --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #89d9c8;
      color:var(--csstools-light-dark-toggle--29, #065);
      color:light-dark(#065, #89d9c8);
    }
#tree .str-value{
    --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) #ce9178;
    color:var(--csstools-light-dark-toggle--30, #a31515);
    color:light-dark(#a31515, #ce9178);
  }
#tree .num-value{
    --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) #b5cea8;
    color:var(--csstools-light-dark-toggle--31, #098658);
    color:light-dark(#098658, #b5cea8);
  }
#tree .bool-value{
    --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) #569cd6;
    color:var(--csstools-light-dark-toggle--32, #00f);
    color:light-dark(#00f, #569cd6);
  }
#tree .null-value{
    --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) #808080;
    color:var(--csstools-light-dark-toggle--33, #767676);
    color:light-dark(#767676, #808080);
  }
#tree .name-value{
    --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #dcdcaa;
    color:var(--csstools-light-dark-toggle--34, #795e26);
    color:light-dark(#795e26, #dcdcaa);
  }
#tree .bracket{
    --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #888;
    color:var(--csstools-light-dark-toggle--35, #6e6e6e);
    color:light-dark(#6e6e6e, #888);
    cursor:pointer;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }
:is(#tree .bracket):hover{
      --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #bbb;
      color:var(--csstools-light-dark-toggle--36, #444);
      color:light-dark(#444, #bbb);
    }
#tree .stream-label{
    --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #c586c0;
    color:var(--csstools-light-dark-toggle--37, #af00db);
    color:light-dark(#af00db, #c586c0);
    font-style:italic;
  }
#tree [role="status"]{
    --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #888;
    color:var(--csstools-light-dark-toggle--38, #6e6e6e);
    color:light-dark(#6e6e6e, #888);
    font-style:italic;
  }
#tree [role="alert"]{
    color:#f66;
  }
#tree .bytes-content{
    padding-left:20px;
    white-space:pre-wrap;
    font-size:1em;
    opacity:0.85;
    --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #ce9178;
    color:var(--csstools-light-dark-toggle--39, #a31515);
    color:light-dark(#a31515, #ce9178);
  }
#tree .bytes-hex{
    font-family:monospace;
    --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #569cd6;
    color:var(--csstools-light-dark-toggle--40, #00f);
    color:light-dark(#00f, #569cd6);
  }
#tree .image-preview{
    display:block;
    margin-top:4px;
    max-width:40%;
    image-rendering:pixelated;
    --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #444;
    border:1px solid var(--csstools-light-dark-toggle--41, #ccc);
    border:1px solid light-dark(#ccc, #444);
  }
#tree .content-stream-parsed{
    display:none;
  }
#tree .content-stream-raw{
    display:inline;
  }
#tree.parse-cs-active .content-stream-parsed{
      display:inline;
    }
#tree.parse-cs-active .content-stream-raw{
      display:none;
    }
#tree .content-stream{
    line-height:1.8;
  }
#tree .cs-instruction{
    display:block;
    white-space:nowrap;
  }
#tree .token-cmd{
    --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #9cdcfe;
    color:var(--csstools-light-dark-toggle--42, #0070c1);
    color:light-dark(#0070c1, #9cdcfe);
    font-weight:bold;
  }
#tree .token-num{
    --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #b5cea8;
    color:var(--csstools-light-dark-toggle--43, #098658);
    color:light-dark(#098658, #b5cea8);
  }
#tree .token-str{
    --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #ce9178;
    color:var(--csstools-light-dark-toggle--44, #a31515);
    color:light-dark(#a31515, #ce9178);
  }
#tree .token-name{
    --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #dcdcaa;
    color:var(--csstools-light-dark-toggle--45, #795e26);
    color:light-dark(#795e26, #dcdcaa);
  }
#tree .token-bool{
    --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #569cd6;
    color:var(--csstools-light-dark-toggle--46, #00f);
    color:light-dark(#00f, #569cd6);
  }
#tree .token-null{
    --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #808080;
    color:var(--csstools-light-dark-toggle--47, #767676);
    color:light-dark(#767676, #808080);
  }
#tree .token-ref{
    --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #4ec9b0;
    color:var(--csstools-light-dark-toggle--48, #007b6e);
    color:light-dark(#007b6e, #4ec9b0);
  }
#tree .token-array,#tree .token-dict{
    --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #d4d4d4;
    color:var(--csstools-light-dark-toggle--49, #1e1e1e);
    color:light-dark(#1e1e1e, #d4d4d4);
  }