#side{width:322px;flex-shrink:0;border-left:1px solid var(--edge);background:var(--panel);
  display:flex;flex-direction:column;min-height:0;position:relative}
/* drag the left edge of the panel to widen it */
#sideResize{position:absolute;left:-4px;top:0;bottom:0;width:8px;cursor:col-resize;z-index:12}
#sideResize::after{content:"";position:absolute;left:3px;top:0;bottom:0;width:2px;background:transparent;
  transition:background .14s}
#sideResize:hover::after,#sideResize.on::after{background:var(--plot)}
/* drag between the property pane and the shape stack */
#stackResize{flex:0 0 7px;cursor:row-resize;position:relative;background:transparent}
#stackResize::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:transparent;
  transition:background .14s}
#stackResize:hover::after,#stackResize.on::after{background:var(--plot)}
body.resizing{cursor:col-resize;user-select:none}
body.resizing-v{cursor:row-resize;user-select:none}

#tabs{display:flex;border-bottom:1px solid var(--edge);flex-shrink:0}
#tabs button{flex:1;border:0;background:transparent;padding:10px 2px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid transparent}
#tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--plot);background:#fff}
#props{overflow-y:auto;flex:1 1 auto;min-height:70px}
.pane{display:none} .pane.on{display:block}
.group{padding:12px 13px;border-bottom:1px solid var(--edge)}
.group:last-child{border-bottom:0}
.group h2{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 9px}
.seg{display:flex;border:1px solid var(--edge);border-radius:4px;overflow:hidden;background:#fff}
.seg button{flex:1;border:0;background:transparent;padding:7px 3px;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-soft);border-right:1px solid var(--edge)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--vellum)}
.row{display:flex;gap:7px;margin-top:9px;align-items:flex-end}
.field{flex:1;min-width:0}
.field label{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:3px}
.field input,.field select,.field textarea{width:100%;padding:6px 7px;border:1px solid var(--edge);
  border-radius:3px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;background:#fff;color:var(--ink)}
.field input[type=color]{padding:2px;height:30px;cursor:pointer}
.field textarea{resize:vertical;min-height:48px;font-family:"IBM Plex Sans",sans-serif;font-size:13.5px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:9px}
.checks label{display:flex;align-items:center;gap:6px;font-size:13px;cursor:pointer}
.checks input{accent-color:var(--plot);margin:0}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}
.btns.three{grid-template-columns:1fr 1fr 1fr}
.checks .wide{grid-column:1/-1}
/* one row per middle gradient stop: colour, position, remove */
.gradStops .row{margin-top:7px}
.gradStops .stopAt{max-width:84px}
.gradStops .act{flex:0 0 auto;height:30px;padding:0 9px}
.onceBox{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);
  white-space:nowrap;cursor:pointer;user-select:none}
.onceBox input{accent-color:var(--plot);margin:0}
.selinfo{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);
  margin:9px 0 0;display:block}
button.act{padding:7px 6px;border:1px solid var(--edge);border-radius:3px;background:#fff;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}
button.act:hover{background:var(--vellum-deep)}
button.act:disabled{opacity:.4;cursor:default}
button.act.primary{background:var(--ink);color:var(--vellum);border-color:var(--ink)}
button.act.primary:hover{background:#263942}
.slider{margin-top:9px}
.slider .lab{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);margin-bottom:4px}
.slider .lab b{font-family:"IBM Plex Mono",monospace;font-weight:500;color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--plot);margin:0}
.note{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:8px 0 0}
.kindtag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  background:var(--vellum-deep);border-radius:3px;padding:1px 5px;color:var(--ink-soft)}
.swatchrow{display:flex;align-items:center;gap:9px;margin-top:9px}
.swatch{width:52px;height:40px;border:1px solid var(--edge);border-radius:3px;flex-shrink:0;
  background:#fff center/contain no-repeat;image-rendering:auto}
.swatch.empty{background:repeating-conic-gradient(#e6eae2 0% 25%,#f6f8f4 0% 50%) 0 0/12px 12px}

#stackwrap{flex:0 0 auto;display:flex;flex-direction:column;height:34%;min-height:150px;
  border-top:1px solid var(--edge)}
#stackhead{padding:9px 11px 7px;display:flex;align-items:center;justify-content:space-between;
  gap:6px;flex-wrap:wrap}
#stackhead h2{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0}
#stackhead .hbtns{display:flex;gap:4px;flex-wrap:wrap}
#stackhead .act{padding:4px 8px;font-size:11.5px}
/* dragging a row must not smear a text selection across the list */
#stack{flex:1;overflow-y:auto;padding:0 9px 9px;position:relative;
  user-select:none;-webkit-user-select:none}
.lname{user-select:text;-webkit-user-select:text}
body.dragrow,body.dragrow *{user-select:none!important;-webkit-user-select:none!important}
.layer{display:flex;align-items:center;gap:8px;padding:6px;border-radius:5px;cursor:grab;
  margin-bottom:3px;border:1px solid transparent;position:relative;background:transparent}
.layer:hover{background:#eef1e9}
.layer.sel{background:#dfe7e1;border-color:#b6c6bb}
.layer.on{background:var(--ink);border-color:var(--ink)}
.layer.on .lname{color:var(--vellum)}
.layer.on .lmeta{color:#93a6ae}
.layer.hidden-l{opacity:.45}
/* ---- nesting in the shape stack ----
   Two different relationships share one mechanic, told apart by glyph and colour,
   the way Photoshop separates a clipping mask from everything else:
     crimson down-arrow  = clipped by the region below it
     operator glyph      = merged into the shape below it with a set operation
   Children sit above their base (paint order), so the spine runs downward and
   lands on an elbow drawn by the base row. */
/* Indent with padding, not margin, so a child row and its base share one left
   origin: the child's spine and the base's elbow then land on the same vertical
   line no matter how deep the nesting goes. */
/* the list runs front-to-back like Photoshop; say so, since the emitted Java
   reads in the opposite direction (bottom row first) */
.stackdir{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:500;
  letter-spacing:.12em;color:var(--ink-soft);margin-left:7px;text-transform:none}
.layer{--nestlevel:0}
/* both children and bases reserve the same connector gutter, so a child's spine
   and its base's elbow sit on one line without either crossing a thumbnail */
.layer.nested,.layer.runbase{padding-left:calc(6px + var(--nestlevel) * 22px + 16px)}
.layer.nested,.layer.runbase{position:relative}

/* the child's connector: spine down the gutter, stub turning into the row */
.nestmark{position:absolute;top:0;bottom:0;width:15px;
  left:calc(6px + (var(--nestlevel) - 1) * 22px + 4px);
  display:flex;align-items:center;justify-content:center;pointer-events:auto}
.nestmark::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:currentColor;opacity:.42}
.nestmark::after{content:"";position:absolute;left:0;top:50%;width:15px;height:1px;
  background:currentColor;opacity:.42}
.nestmark>i{position:relative;font-style:normal;line-height:1;display:flex;
  font-family:"IBM Plex Mono",monospace;font-size:12px;
  background:var(--panel);padding:2px 1px}
.nestmark>i svg{width:12px;height:14px;display:block}
.nestmark.nest-clip{color:var(--plot)}
.nestmark.nest-bool{color:var(--ink-soft)}
/* the glyph masks the spine, so it must match whatever the row is sitting on */
.layer.on .nestmark>i{background:var(--ink)}
/* on the dark selected row the ink-toned spine and glyph vanish, so both the
   connector and its marker switch to the light pair the row already uses */
.layer.on .nestmark.nest-bool,.layer.on .nestbase.nest-bool{color:#93a6ae}
.layer.on .nestmark.nest-clip,.layer.on .nestbase.nest-clip{color:#e2a3ad}
.layer.on .nestmark::before,.layer.on .nestmark::after,.layer.on .nestbase{opacity:.7}
.layer.sel .nestmark>i{background:#dfe7e1}
.layer:hover .nestmark>i{background:#eef1e9}

/* the base closes the run: the spine reaches its midpoint and stops */
.nestbase{position:absolute;top:0;height:50%;width:1px;
  left:calc(6px + var(--nestlevel) * 22px + 4px);
  background:currentColor;opacity:.42;pointer-events:none}
.nestbase.nest-clip{color:var(--plot)}
.nestbase.nest-bool{color:var(--ink-soft)}

/* a clip region is scaffolding, not paint: banded, tagged and never drawn */
.layer.clipowner{background:rgba(176,47,76,.07)}
.layer.clipowner.on{background:var(--ink)}
.layer.clipowner .lname{text-decoration:underline;text-decoration-color:var(--plot);
  text-underline-offset:3px;text-decoration-thickness:1.5px}
.layer.clipowner .lmeta{color:var(--plot)}
.layer.clipowner .thumb{outline:1px dashed var(--plot);outline-offset:-1px;opacity:.75}
.layer.clipowner{position:relative}
/* keep the meta line clear of the tag sitting at the row edge */
.layer.clipowner .lbody{padding-right:38px}
/* disclosure triangle on a base row, in the gutter its elbow already occupies */
.twisty{position:absolute;left:calc(6px + var(--nestlevel) * 22px - 3px);top:50%;
  transform:translateY(-50%);width:15px;height:15px;padding:0;border:0;border-radius:3px;
  background:var(--panel);color:var(--ink-soft);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:background .14s,color .14s}
.twisty svg{width:11px;height:11px;transition:transform .16s}
.twisty.shut svg{transform:rotate(-90deg)}
.twisty:hover{background:var(--vellum-deep);color:var(--ink)}
.layer.on .twisty{background:var(--ink);color:#93a6ae}
.layer.on .twisty:hover{background:#2c414c;color:var(--vellum)}
.layer.sel .twisty{background:#dfe7e1}
.layer.clipowner .twisty{background:#f6eaed}
.layer.clipowner.on .twisty{background:var(--ink)}
.masktag{position:absolute;right:30px;top:50%;transform:translateY(-50%);
  padding:1px 4px;border-radius:2px;font-family:"IBM Plex Mono",monospace;font-size:9px;
  font-weight:600;letter-spacing:.1em;background:var(--plot);color:#fff;pointer-events:none}
.layer.clipowner.on .lmeta{color:#e2a3ad}
/* the one case where the base's mode silently overrides the members' */
.lmeta .warn{color:var(--plot);font-weight:600;cursor:help}
.layer.on .lmeta .warn{color:#e2a3ad}
.layer.grouped{margin-left:12px}
.layer.grouped::before{content:"";position:absolute;left:-8px;top:1px;bottom:1px;width:3px;
  border-radius:2px;background:var(--gband,#8a5cc4)}
.layer.dragging{opacity:.4;cursor:grabbing}
#dropline{position:absolute;left:9px;right:9px;height:2px;background:var(--plot);border-radius:2px;
  pointer-events:none;display:none;z-index:4}
#dropline.on{display:block}
.thumb{width:46px;height:36px;flex-shrink:0;border:1px solid var(--edge);border-radius:3px;background:#fff;display:block}
.layer.on .thumb{border-color:#3c4f59}
.lbody{flex:1;min-width:0}
.lname{width:100%;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:transparent;border:0;color:var(--ink);font-family:"IBM Plex Sans",sans-serif;padding:1px 2px;display:block}
.layer.clash .lname{box-shadow:inset 0 -1px 0 var(--plot)}
.layer.clash .lmeta{color:var(--plot)}
.layer.on.clash .lmeta{color:#e2a3ad}
/* must out-rank ".layer.on .lname", or renaming the active row is white on white */
.lname:focus,.layer.on .lname:focus{outline:1px solid var(--plot);background:#fff;
  color:var(--ink);border-radius:2px}
.lmeta{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-soft);padding-left:2px;
  display:block;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eye{border:0;background:transparent;cursor:pointer;padding:2px;line-height:0;flex-shrink:0;
  color:var(--ink-soft);border-radius:3px}
.layer.on .eye{color:#93a6ae}
.eye:hover{background:#00000018}
.eye svg{width:16px;height:16px;display:block}

#toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,14px);background:var(--ink);
  color:var(--vellum);padding:8px 15px;border-radius:4px;font-family:"IBM Plex Mono",monospace;
  font-size:12px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:40}
#toast.on{opacity:1;transform:translate(-50%,0)}

#help{position:fixed;inset:0;background:rgba(23,36,43,.6);display:none;align-items:center;
  justify-content:center;z-index:50;padding:20px}
#help.on{display:flex}
#helpBox{background:var(--panel);border-radius:8px;max-width:640px;width:100%;max-height:82vh;
  overflow:auto;padding:20px 22px}
#helpBox h3{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft);margin:16px 0 7px}
#helpBox h3:first-child{margin-top:0}
#helpBox table{width:100%;border-collapse:collapse}
#helpBox td{padding:4px 0;font-size:13.5px;vertical-align:top}
#helpBox td:first-child{width:150px;white-space:nowrap}
#helpClose{float:right}

/* window preview: a floating, non-modal card so the sheet stays editable
   behind it and the render keeps up while you draw */
#preview{position:fixed;z-index:45;display:none;background:var(--panel);
  border:1px solid var(--edge);border-radius:8px;padding:11px;
  box-shadow:0 12px 34px rgba(23,36,43,.26);
  max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto}
#preview.on{display:block}
#pvHead{display:flex;align-items:center;gap:9px;margin-bottom:10px;cursor:grab;
  user-select:none;touch-action:none}
#pvHead.drag{cursor:grabbing}
#pvHead .stag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  color:var(--ink-soft)}
#pvHeadName{font-size:13px;color:var(--ink-soft)}
#pvHead .spacer{flex:1}
#pvHead .act{padding:4px 10px;font-size:11.5px}

/* the mocked frame: title bar plus the panel, the way pack() assembles it */
#pvWin{border:1px solid #9aa7ae;border-radius:5px 5px 3px 3px;overflow:hidden;background:#fff;
  box-shadow:0 2px 8px rgba(23,36,43,.14)}
#pvBar{display:flex;align-items:center;gap:8px;height:29px;padding:0 4px 0 10px;
  background:linear-gradient(#fbfbfa,#eceee9);border-bottom:1px solid #c4ccc2}
#pvTitle{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1}
#pvChrome{display:flex;align-items:center;gap:2px;flex-shrink:0}
#pvChrome i{width:23px;height:21px;display:flex;align-items:center;justify-content:center;
  position:relative}
#pvChrome i::before{content:"";display:block;background:#5c6b73}
#pvChrome .min::before{width:9px;height:1px}
#pvChrome .max::before{width:8px;height:8px;background:transparent;border:1px solid #5c6b73}
#pvChrome .cls::before{width:9px;height:9px;background:transparent;
  background-image:linear-gradient(45deg,transparent 44%,#5c6b73 44%,#5c6b73 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,#5c6b73 44%,#5c6b73 56%,transparent 56%)}
#pvCanvas{display:block}

/* the readout sits beside the mock so the card stays short and the render big */
#pvBody{display:flex;align-items:flex-start;gap:14px}
#pvInfo{width:286px;flex-shrink:0}
@media (max-width:860px){
  #pvBody{flex-direction:column}
  #pvInfo{width:auto;max-width:420px}
}
.pvRow{display:flex;align-items:baseline;gap:10px;font-size:13px;padding:2px 0}
.pvRow span{color:var(--ink-soft)}
.pvRow b{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:500}
#pvWarn{color:var(--plot)}
#pvWarn .pvpick{font:inherit;color:inherit;background:transparent;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
#pvWarn .pvpick:hover{background:rgba(176,47,76,.1);border-radius:2px}
#pvWarn .pvpick:focus-visible{outline:2px solid var(--plot);outline-offset:1px}
#pvWarn:empty,#pvNote:empty{display:none}

/* ruler panel: the measurement list reads like the shape list, one row per figure */
#measList{display:flex;flex-direction:column;gap:2px;margin-top:2px}
#measList .empty{font-size:12px;color:var(--ink-soft);padding:3px 1px 5px}
.measrow{display:flex;align-items:center;gap:7px;padding:4px 5px;border:1px solid transparent;
  border-radius:4px;cursor:pointer}
.measrow:hover{background:var(--vellum-deep)}
.measrow.on{background:#fff;border-color:var(--plot)}
.measrow .mkind{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);background:var(--vellum-deep);
  border-radius:3px;padding:1px 5px;flex-shrink:0}
.measrow.on .mkind{background:var(--vellum-deep)}
.measrow .mval{font-family:"IBM Plex Mono",monospace;font-size:12.5px;flex-shrink:0}
.measrow .mof{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11.5px;color:var(--ink-soft)}
.measrow .x{border:0;background:transparent;cursor:pointer;color:var(--ink-soft);font-size:15px;
  line-height:1;padding:0 2px;flex-shrink:0}
.measrow .x:hover{color:var(--plot)}
#measDetail{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink)}
#measDetail:empty,#measModeNote:empty{display:none}

/* set operation lab: a scratch sheet for Area algebra. Non-modal like the
   preview, so the real sheet stays in view while an expression is tried out. */
#setlab{position:fixed;z-index:46;display:none;flex-direction:column;background:var(--panel);
  border:1px solid var(--edge);border-radius:8px;padding:11px;
  box-shadow:0 12px 34px rgba(23,36,43,.26);
  width:min(1140px,calc(100vw - 24px));height:min(760px,calc(100vh - 24px))}
#setlab.on{display:flex}
#slHead{display:flex;align-items:center;gap:10px;margin-bottom:10px;cursor:grab;
  user-select:none;touch-action:none;flex-shrink:0}
#slHead.drag{cursor:grabbing}
#slHead .stag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  color:var(--ink-soft)}
#slHeadName{font-size:13px;color:var(--ink-soft)}
#slHead .spacer{flex:1}
#slHead .act{padding:4px 10px;font-size:11.5px}

#slBody{display:flex;gap:12px;flex:1;min-height:0}
#slLeft{width:218px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  overflow-y:auto;padding-right:3px}
#slMid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
#slRight{width:302px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  overflow-y:auto;padding-right:3px}
#slLeft h3,#slRight h3{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
#slRight h3{margin-top:13px}
#slRight h3:first-child{margin-top:0}

#slSheet{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:var(--vellum-deep);border:1px solid var(--edge);border-radius:5px;overflow:hidden}
#slCanvas{display:block;box-shadow:0 1px 6px rgba(23,36,43,.16);touch-action:none}
#slStatus{display:flex;align-items:baseline;gap:9px;flex-shrink:0;font-size:12.5px;
  color:var(--ink-soft);min-height:18px}
#slStatus .stag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em}
#slStat{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink)}
#slStat.bad{color:var(--plot)}

#slList{display:flex;flex-direction:column;gap:2px}
#slList .empty{font-size:12px;color:var(--ink-soft);padding:3px 1px 5px}
.slrow{display:flex;align-items:center;gap:7px;padding:4px 5px;border:1px solid transparent;
  border-radius:4px;cursor:pointer}
.slrow:hover{background:var(--vellum-deep)}
.slrow.on{background:#fff;border-color:var(--plot)}
.sltag{width:19px;height:19px;border-radius:3px;display:flex;align-items:center;
  justify-content:center;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  color:#fff;flex-shrink:0}
.slrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px}
.slrow .kd{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-soft)}
.slrow .x{border:0;background:transparent;cursor:pointer;color:var(--ink-soft);font-size:15px;
  line-height:1;padding:0 2px;flex-shrink:0}
.slrow .x:hover{color:var(--plot)}
#slProps{margin-top:11px;border-top:1px solid var(--edge);padding-top:10px}
#slProps:empty{display:none}
#slProps .row{margin-top:7px}
#slProps .row:first-child{margin-top:0}

#slExpr{width:100%;padding:7px 8px;border:1px solid var(--edge);border-radius:3px;
  font-family:"IBM Plex Mono",monospace;font-size:15px;line-height:1.4;background:#fff;
  color:var(--ink);resize:vertical;min-height:46px}
#slOps{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:6px}
#slOps button{padding:5px 0;font-size:14px}
#slErr{color:var(--plot)}
#slErr:empty,#slInsNote:empty{display:none}

pre#slCode{flex:1;min-height:110px;overflow:auto;margin:0;padding:9px 10px;background:#fff;
  border:1px solid var(--edge);border-radius:4px;font-family:"IBM Plex Mono",monospace;
  font-size:11.5px;line-height:1.55;white-space:pre;color:var(--ink)}
#slCode .kw{color:#2f6f8f} #slCode .num{color:var(--plot)}
#slCode .cm{color:var(--ink-soft);font-style:italic} #slCode .str{color:#4f7a3a}

@media (max-width:1000px){
  #slBody{flex-direction:column;overflow-y:auto}
  #slLeft,#slRight{width:auto;overflow:visible}
  #slMid{min-height:320px}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}