/* 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;
  --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #1e1e1e;
  --bg-color:var(--csstools-light-dark-toggle--0, #fff);
  --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #252526;
  --surface-bg:var(--csstools-light-dark-toggle--1, #f3f3f3);
  --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #3c3c3c;
  --input-bg:var(--csstools-light-dark-toggle--2, #fff);
  --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #3c3c3c;
  --button-bg:var(--csstools-light-dark-toggle--3, #f3f3f3);
  --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #4a4a4a;
  --button-hover-bg:var(--csstools-light-dark-toggle--4, #e0e0e0);
  --clr-canvas-bg:#c0c0c0;
  --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #d4d4d4;
  --text-color:var(--csstools-light-dark-toggle--5, #1e1e1e);
  --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) #888;
  --muted-color:var(--csstools-light-dark-toggle--6, #6e6e6e);
  --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) #9cdcfe;
  --accent-color:var(--csstools-light-dark-toggle--7, #0070c1);
  --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) #3c3c3c;
  --border-color:var(--csstools-light-dark-toggle--8, #e0e0e0);
  --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) #444;
  --border-subtle-color:var(--csstools-light-dark-toggle--9, #d0d0d0);
  --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #555;
  --input-border-color:var(--csstools-light-dark-toggle--10, #c8c8c8);
  --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.05);
  --hover-bg:var(--csstools-light-dark-toggle--11, rgb(0 0 0 / 0.05));
  --hover-color:currentColor;
  --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(255 165 0 / 0.2);
  --paused-bg:var(--csstools-light-dark-toggle--12, rgb(255 165 0 / 0.15));
  --paused-outline-color:rgb(255 140 0 / 0.6);
  --paused-color:currentColor;
  --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #4ec9b0;
  --ref-color:var(--csstools-light-dark-toggle--13, #007b6e);
  --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #89d9c8;
  --ref-hover-color:var(--csstools-light-dark-toggle--14, #065);
  --changed-bg:transparent;
  --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #f66;
  --changed-color:var(--csstools-light-dark-toggle--15, #c00);
  --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #ce9178;
  --string-color:var(--csstools-light-dark-toggle--16, #a31515);
  --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #b5cea8;
  --number-color:var(--csstools-light-dark-toggle--17, #098658);
  --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #569cd6;
  --bool-color:var(--csstools-light-dark-toggle--18, #00f);
  --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #808080;
  --null-color:var(--csstools-light-dark-toggle--19, #767676);
  --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #dcdcaa;
  --name-color:var(--csstools-light-dark-toggle--20, #795e26);
  --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #c586c0;
  --stream-color:var(--csstools-light-dark-toggle--21, #af00db);
}

@supports (color: light-dark(red, red)){
:root{
  --bg-color:light-dark(#fff, #1e1e1e);
  --surface-bg:light-dark(#f3f3f3, #252526);
  --input-bg:light-dark(#fff, #3c3c3c);
  --button-bg:light-dark(#f3f3f3, #3c3c3c);
  --button-hover-bg:light-dark(#e0e0e0, #4a4a4a);
  --text-color:light-dark(#1e1e1e, #d4d4d4);
  --muted-color:light-dark(#6e6e6e, #888);
  --accent-color:light-dark(#0070c1, #9cdcfe);
  --border-color:light-dark(#e0e0e0, #3c3c3c);
  --border-subtle-color:light-dark(#d0d0d0, #444);
  --input-border-color:light-dark(#c8c8c8, #555);
}
}

@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){
:root{
  --hover-bg:light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.05));
  --paused-bg:light-dark(rgb(255 165 0 / 0.15), rgb(255 165 0 / 0.2));
}
}

@supports (color: light-dark(red, red)){
:root{
  --ref-color:light-dark(#007b6e, #4ec9b0);
  --ref-hover-color:light-dark(#065, #89d9c8);
  --changed-color:light-dark(#c00, #f66);
  --string-color:light-dark(#a31515, #ce9178);
  --number-color:light-dark(#098658, #b5cea8);
  --bool-color:light-dark(#00f, #569cd6);
  --null-color:light-dark(#767676, #808080);
  --name-color:light-dark(#795e26, #dcdcaa);
  --stream-color:light-dark(#af00db, #c586c0);
}
}

@supports not (color: light-dark(tan, tan)){

:root *{
  --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) #1e1e1e;
  --bg-color:var(--csstools-light-dark-toggle--0, #fff);
  --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) #252526;
  --surface-bg:var(--csstools-light-dark-toggle--1, #f3f3f3);
  --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) #3c3c3c;
  --input-bg:var(--csstools-light-dark-toggle--2, #fff);
  --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #3c3c3c;
  --button-bg:var(--csstools-light-dark-toggle--3, #f3f3f3);
  --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #4a4a4a;
  --button-hover-bg:var(--csstools-light-dark-toggle--4, #e0e0e0);
  --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #d4d4d4;
  --text-color:var(--csstools-light-dark-toggle--5, #1e1e1e);
  --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) #888;
  --muted-color:var(--csstools-light-dark-toggle--6, #6e6e6e);
  --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) #9cdcfe;
  --accent-color:var(--csstools-light-dark-toggle--7, #0070c1);
  --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) #3c3c3c;
  --border-color:var(--csstools-light-dark-toggle--8, #e0e0e0);
  --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) #444;
  --border-subtle-color:var(--csstools-light-dark-toggle--9, #d0d0d0);
  --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #555;
  --input-border-color:var(--csstools-light-dark-toggle--10, #c8c8c8);
  --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.05);
  --hover-bg:var(--csstools-light-dark-toggle--11, rgb(0 0 0 / 0.05));
  --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(255 165 0 / 0.2);
  --paused-bg:var(--csstools-light-dark-toggle--12, rgb(255 165 0 / 0.15));
  --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #4ec9b0;
  --ref-color:var(--csstools-light-dark-toggle--13, #007b6e);
  --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #89d9c8;
  --ref-hover-color:var(--csstools-light-dark-toggle--14, #065);
  --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #f66;
  --changed-color:var(--csstools-light-dark-toggle--15, #c00);
  --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #ce9178;
  --string-color:var(--csstools-light-dark-toggle--16, #a31515);
  --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #b5cea8;
  --number-color:var(--csstools-light-dark-toggle--17, #098658);
  --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #569cd6;
  --bool-color:var(--csstools-light-dark-toggle--18, #00f);
  --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #808080;
  --null-color:var(--csstools-light-dark-toggle--19, #767676);
  --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #dcdcaa;
  --name-color:var(--csstools-light-dark-toggle--20, #795e26);
  --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #c586c0;
  --stream-color:var(--csstools-light-dark-toggle--21, #af00db);
  }
}

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

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

@media (forced-colors: active){
  :root{
    --bg-color:Canvas;
    --surface-bg:Canvas;
    --input-bg:Field;
    --button-bg:ButtonFace;
    --button-hover-bg:Highlight;
    --clr-canvas-bg:Canvas;
    --text-color:CanvasText;
    --muted-color:GrayText;
    --accent-color:CanvasText;
    --border-color:ButtonBorder;
    --border-subtle-color:ButtonBorder;
    --input-border-color:ButtonBorder;
    --hover-bg:Highlight;
    --hover-color:HighlightText;
    --paused-bg:Mark;
    --paused-outline-color:ButtonBorder;
    --paused-color:MarkText;
    --ref-color:LinkText;
    --ref-hover-color:ActiveText;
    --changed-bg:Mark;
    --changed-color:MarkText;
    --string-color:CanvasText;
    --number-color:CanvasText;
    --bool-color:CanvasText;
    --null-color:GrayText;
    --name-color:CanvasText;
    --stream-color:CanvasText;
  }
    :is(#render-resizer,#op-resizer,#op-gs-resizer):hover,.dragging:is(#render-resizer,#op-resizer,#op-gs-resizer){
      background:Highlight;
    }
  .bp-gutter::before{
    opacity:1;
    color:Canvas;
  }
  .bp-gutter:hover::before{
    color:ButtonBorder;
  }
  .bp-gutter.active::before{
    color:ButtonText;
  }
  button:disabled,
  input:disabled{
    color:GrayText;
    border-color:GrayText;
    opacity:1;
  }
  .color-swatch{
    forced-color-adjust:none;
  }
}

*{
  box-sizing:border-box;
}
body.loading{
  cursor:wait;
}
body{
  font-family:"Courier New", Courier, monospace;
  margin:0;
  padding:16px;
  background:var(--bg-color);
  color:var(--text-color);
  font-size:13px;
  line-height:1.5;
}
#header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
#header h1{
    color:var(--accent-color);
    font-size:1.2em;
    margin:0;
  }
#header #pdf-info{
    font-family:system-ui, sans-serif;
    font-size:1.15em;
    font-weight:500;
    color:var(--text-color);
  }
#password-dialog{
  background:var(--input-bg);
  color:var(--text-color);
  border:1px solid var(--input-border-color);
  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;
    background:var(--input-bg);
    color:var(--text-color);
    border:1px solid var(--input-border-color);
    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;
      border:1px solid var(--input-border-color);
      background:var(--button-bg);
      color:inherit;
      cursor:pointer;
      font-family:inherit;
      font-size:inherit;
    }
:is(:is(#password-dialog .password-dialog-buttons) button):hover{
        background:var(--button-hover-bg);
      }
#controls{
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:10px 14px;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
}
#controls label{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--muted-color);
  }
#controls #github-link{
    margin-inline-start:auto;
    display:flex;
    align-items:center;
    color:var(--muted-color);
    text-decoration:none;
  }
:is(#controls #github-link):hover{
      color:var(--text-color);
    }
:is(#controls #github-link) svg{
      width:20px;
      height:20px;
      fill:currentColor;
    }
#goto-input{
  background:var(--input-bg);
  color:var(--text-color);
  border:1px solid var(--input-border-color);
  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:var(--changed-color);
  }
#status{
  color:var(--muted-color);
  font-style:italic;
}
#tree.loading{
  pointer-events:none;
}
#tree{
  padding:8px 12px;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
  min-height:60px;
}
#tree .node{
    display:block;
    padding:1px 0;
  }
#tree .key{
    color:var(--accent-color);
  }
#tree .separator{
    color:var(--muted-color);
  }
#tree [role="button"]{
    display:inline-block;
    width:14px;
    font-size:0.7em;
    color:var(--muted-color);
    cursor:pointer;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    vertical-align:middle;
  }
#tree [role="group"]{
    padding-left:20px;
    border-left:1px dashed var(--border-subtle-color);
    margin-left:2px;
  }
.hidden:is(#tree [role="group"]){
      display:none;
    }
#tree .ref{
    color:var(--ref-color);
    cursor:pointer;
    -webkit-text-decoration:underline dotted;
            text-decoration:underline dotted;
  }
:is(#tree .ref):hover{
      color:var(--ref-hover-color);
    }
#tree .str-value{
    color:var(--string-color);
  }
#tree .num-value{
    color:var(--number-color);
  }
#tree .bool-value{
    color:var(--bool-color);
  }
#tree .null-value{
    color:var(--null-color);
  }
#tree .name-value{
    color:var(--name-color);
  }
#tree .bracket{
    color:var(--muted-color);
    cursor:pointer;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }
:is(#tree .bracket):hover{
      --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #bbb;
      color:var(--csstools-light-dark-toggle--22, #444);
      color:light-dark(#444, #bbb);
    }
#tree .stream-label{
    color:var(--stream-color);
    font-style:italic;
  }
#tree [role="status"]{
    color:var(--muted-color);
    font-style:italic;
  }
#tree [role="alert"]{
    color:var(--changed-color);
  }
#tree .bytes-content{
    padding-left:20px;
    white-space:pre-wrap;
    font-size:1em;
    opacity:0.85;
    color:var(--string-color);
  }
#tree .bytes-hex{
    font-family:monospace;
    color:var(--bool-color);
  }
#tree .image-preview{
    display:block;
    margin-top:4px;
    max-width:40%;
    image-rendering:pixelated;
    border:1px solid var(--border-subtle-color);
  }
#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{
    color:var(--accent-color);
    font-weight:bold;
  }
#tree .token-num{
    color:var(--number-color);
  }
#tree .token-str{
    color:var(--string-color);
  }
#tree .token-name{
    color:var(--name-color);
  }
#tree .token-bool{
    color:var(--bool-color);
  }
#tree .token-null{
    color:var(--null-color);
  }
#tree .token-ref{
    color:var(--ref-color);
  }
#tree .token-array,#tree .token-dict{
    color:var(--text-color);
  }
#debug-btn{
  padding:4px 12px;
  border-radius:3px;
  border:1px solid var(--input-border-color);
  background:var(--button-bg);
  color:inherit;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
}
#debug-btn:hover{
    background:var(--button-hover-bg);
  }
#debug-view{
  display:flex;
  flex-direction:column;
  gap:10px;
}
#debug-view[hidden]{
    display:none;
  }
#debug-back-btn{
  padding:4px 12px;
  border-radius:3px;
  border:1px solid var(--input-border-color);
  background:var(--button-bg);
  color:inherit;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
}
#debug-back-btn:hover{
    background:var(--button-hover-bg);
  }
#render-panels{
  display:flex;
  flex-direction:row;
  gap:0;
  align-items:stretch;
  height:calc(100vh - 160px);
}
#render-resizer{
  flex-shrink:0;
  width:6px;
  align-self:stretch;
  cursor:col-resize;
  background:var(--border-color);
}
#render-resizer:hover,#render-resizer.dragging{
    background:var(--accent-color);
  }
#op-left-col{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}
#op-resizer{
  flex-shrink:0;
  height:6px;
  cursor:row-resize;
  background:var(--border-color);
}
#op-resizer:hover,#op-resizer.dragging{
    background:var(--accent-color);
  }
#op-top-row{
  flex:4 1 0;
  display:flex;
  flex-direction:row;
  min-height:0;
}
#op-list-panel{
  flex:1 1 0;
  overflow:auto;
  min-width:0;
  min-height:0;
  padding:8px 12px;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
}
#op-list{
  min-width:-moz-max-content;
  min-width:max-content;
}
#op-gs-resizer{
  flex-shrink:0;
  width:6px;
  align-self:stretch;
  cursor:col-resize;
  background:var(--border-color);
}
#op-gs-resizer:hover,#op-gs-resizer.dragging{
    background:var(--accent-color);
  }
#gs-panel{
  flex:0 0 auto;
  width:40ch;
  overflow:auto;
  min-height:0;
  padding:8px 12px;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
}
#gs-panel .gs-section + .gs-section{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--border-color);
  }
#gs-panel .gs-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    color:var(--accent-color);
    font-weight:bold;
    margin-bottom:4px;
  }
#gs-panel .gs-stack-nav{
    display:flex;
    align-items:center;
    gap:2px;
    font-weight:normal;
    font-size:0.8em;
  }
[hidden]:is(#gs-panel .gs-stack-nav){
      display:none;
    }
#gs-panel .gs-stack-btn{
    padding:0 3px;
    border:1px solid currentcolor;
    border-radius:2px;
    background:transparent;
    color:inherit;
    cursor:pointer;
    line-height:1.3;
  }
:is(#gs-panel .gs-stack-btn):disabled{
      opacity:0.35;
      cursor:default;
    }
#gs-panel .gs-stack-pos{
    min-width:4ch;
    text-align:center;
    font-variant-numeric:tabular-nums;
  }
#gs-panel .gs-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:1px 0;
  }
#gs-panel .gs-key{
    color:var(--muted-color);
    flex-shrink:0;
    min-width:20ch;
  }
#gs-panel .gs-val{
    color:var(--number-color);
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
#op-detail-panel{
  flex:1 1 0;
  container-type:size;
  overflow:auto;
  min-height:0;
  padding:8px 12px;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
}
#op-detail-panel .detail-name{
    color:var(--accent-color);
    font-weight:bold;
    margin-bottom:4px;
  }
#op-detail-panel .detail-empty{
    color:var(--muted-color);
    font-style:italic;
  }
#op-detail-panel .detail-row{
    display:flex;
    align-items:center;
    gap:8px;
    padding:1px 0;
  }
#op-detail-panel .detail-idx{
    color:var(--muted-color);
    flex-shrink:0;
  }
#op-detail-panel .detail-val{
    color:var(--number-color);
    white-space:pre-wrap;
    word-break:break-all;
  }
#op-detail-panel .detail-body{
    display:flex;
    flex-direction:row;
    gap:12px;
    align-items:flex-start;
  }
#op-detail-panel .detail-args-col{
    flex:1;
    min-width:0;
  }
#op-detail-panel .detail-img-col{
    flex-shrink:0;
    max-width:45%;
    overflow:hidden;
  }
:is(#op-detail-panel .detail-img-col) .image-preview{
      height:90cqh;
      width:auto;
      max-width:100%;
      margin-top:0;
    }
#op-detail-panel .path-preview{
    flex-shrink:0;
    border:1px solid var(--border-subtle-color);
    border-radius:3px;
    background:var(--bg-color);
  }
#canvas-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--surface-bg);
  border-radius:4px;
  border:1px solid var(--border-color);
}
#canvas-toolbar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:4px 8px;
  border-bottom:1px solid var(--border-color);
}
#canvas-toolbar button{
    padding:1px 8px;
    border-radius:3px;
    border:1px solid var(--input-border-color);
    background:var(--button-bg);
    color:inherit;
    cursor:pointer;
    font-family:inherit;
    font-size:1.1em;
    line-height:1.4;
  }
:is(#canvas-toolbar button):hover{
      background:var(--button-hover-bg);
    }
:is(#canvas-toolbar button):disabled{
      opacity:0.4;
      cursor:default;
    }
#canvas-toolbar #zoom-level{
    min-width:4ch;
    text-align:center;
  }
#canvas-scroll{
  flex:1;
  overflow:auto;
  padding:8px 12px;
  min-height:0;
  background:var(--clr-canvas-bg);
  display:flex;
  flex-direction:column;
  align-items:safe center;
  gap:12px;
}
#canvas-wrapper{
  position:relative;
  display:inline-block;
  line-height:0;
}
.temp-canvas-wrapper{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  cursor:pointer;
}
.temp-canvas-label{
  font-size:0.85em;
  color:var(--muted-color);
  font-style:italic;
}
.temp-canvas-wrapper canvas{
  border:1px solid var(--border-subtle-color);
  zoom:calc(1 / var(--dpr, 1));
}
#render-canvas{
  cursor:pointer;
}
#highlight-canvas{
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
}
.op-line{
  display:flex;
  align-items:center;
  gap:0.5ch;
  white-space:nowrap;
  padding:1px 0;
  cursor:pointer;
}
.op-line.selected{
    text-decoration:underline;
  }
.op-line:hover{
    background:var(--hover-bg);
    color:var(--hover-color);
  }
.color-swatch{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid var(--muted-color);
  flex-shrink:0;
}
.op-name{
  color:var(--accent-color);
  font-weight:bold;
}
.op-arg{
  color:var(--number-color);
}
.changed-value{
  font-weight:bold;
  background:var(--changed-bg);
  color:var(--changed-color);
}
.bp-gutter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  flex-shrink:0;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
}
.bp-gutter::before{
    content:"●";
    color:var(--changed-color);
    font-size:0.75em;
    opacity:0;
  }
.bp-gutter:hover::before{
    opacity:0.4;
  }
.bp-gutter.active::before{
    opacity:1;
  }
.op-line.paused{
  background:var(--paused-bg);
  color:var(--paused-color);
  outline:1px solid var(--paused-outline-color);
  outline-offset:-1px;
}