
.wlc-py-editor {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 10px;
  height: 100%;
  min-height: 160px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.wlc-py-gutter {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  text-align: right;
}
.wlc-py-ln {
  padding: 0 8px 0 4px;
  color: var(--fg-mute);
  font-size: 11.5px;
  line-height: 1.55;
}
.wlc-py-codewrap {
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.wlc-py-pre, .wlc-py-ta {
  margin: 0;
  padding: 8px 14px;
  border: 0;
  box-sizing: border-box;
  font: inherit;
  white-space: pre;
  overflow: auto;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  line-height: 1.55;
  tab-size: 4;
  -moz-tab-size: 4;
}
.wlc-py-pre {
  pointer-events: none;
  color: var(--fg);
  background: transparent;
  z-index: 1;
  scrollbar-width: none;
}
.wlc-py-pre::-webkit-scrollbar { display: none; }
.wlc-py-ta {
  color: transparent;
  caret-color: var(--fg);
  background: transparent;
  resize: none;
  outline: none;
  z-index: 2;
}
.wlc-py-ta::selection {
  background: rgba(88,166,255,.28);
  color: transparent;
}
.wlc-py-errmarks {
  position: relative;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  overflow: hidden;
  will-change: transform;
}
.wlc-py-errdot {
  position: absolute;
  right: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 5px var(--red);
  cursor: pointer;
}

.wlc-py-t-kw     { color: var(--accent); }
.wlc-py-t-type   { color: var(--bank-D); }
.wlc-py-t-class  { color: var(--fg); }
.wlc-py-t-bank   { color: var(--bank-Y); font-weight: 700; }
.wlc-py-t-sys    { color: var(--amber); font-weight: 700; }
.wlc-py-t-mnem   { color: var(--red); font-weight: 700; }
.wlc-py-t-num    { color: var(--bank-Y); }
.wlc-py-t-op     { color: var(--fg-dim); }
.wlc-py-t-string { color: var(--green); }
.wlc-py-t-comment{ color: var(--fg-mute); font-style: italic; }

.wlc-py-ac {
  position: absolute;
  z-index: 40;
  min-width: 260px;
  max-height: 200px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
  padding: 4px;
}
.wlc-py-ac-row {
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  color: var(--fg-dim);
}
.wlc-py-ac-row:hover { background: var(--accent-2); color: #fff; }
.wlc-py-ac-kw   { color: var(--accent); }
.wlc-py-ac-type { color: var(--bank-D); }
.wlc-py-ac-bank { color: var(--bank-Y); }
.wlc-py-ac-sys  { color: var(--amber); }
.wlc-py-ac-fn   { color: var(--green); }
.wlc-py-ac-row:hover { color: #fff; }

.wlc-py-panel-back { z-index: 10050; }
.wlc-py-panel-modal {
  width: min(96vw, 1200px);
  max-width: 1200px;
  height: min(92vh, 900px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.wlc-py-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.wlc-py-panel-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
}
.wlc-py-panel-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 62fr 38fr;
  min-height: 0;
  overflow: hidden;
}
.wlc-py-panel-editor {
  padding: 12px 14px;
  min-height: 0;
  overflow: hidden;
}
.wlc-py-panel-out {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
}
.wlc-py-panel-tabs {
  display: flex;
  gap: 2px;
  padding: 6px 10px 0;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.wlc-py-panel-tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.wlc-py-panel-tab:hover { color: var(--fg); }
.wlc-py-panel-tab.active {
  background: var(--bg);
  border-color: var(--border);
  color: var(--fg);
  margin-bottom: -1px;
}
.wlc-py-panel-outbody {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 14px 14px;
  min-height: 0;
}
.wlc-py-panel-ir {
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--fg-dim);
  white-space: pre;
}
.wlc-py-panel-empty {
  color: var(--fg-mute);
  font-size: 12.5px;
  padding: 24px 8px;
  text-align: center;
}
.wlc-py-panel-ok { color: var(--green); }
.wlc-py-panel-err {
  display: grid;
  grid-template-columns: 42px 46px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 7px 10px;
  border-radius: 5px;
  background: var(--bg-2);
  border-left: 3px solid var(--red);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12.5px;
}
.wlc-py-panel-err:hover { background: var(--bg-3); }
.wlc-py-panel-err-code {
  font-family: var(--mono);
  font-weight: 800;
  color: var(--red);
  font-size: 11px;
  letter-spacing: .4px;
}
.wlc-py-panel-err-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-mute);
}
.wlc-py-panel-err-msg { color: var(--fg); }

@media (max-width: 900px) {
  .wlc-py-panel-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .wlc-py-panel-body  { grid-template-rows: 58fr 42fr; }
  .wlc-py-editor { font-size: 12px; }
}


.wlc-py-tab-badge {
  display: inline-block;
  background: color-mix(in oklab, #a371f7 30%, transparent);
  color: #a371f7;
  border: 1px solid #a371f7;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 0 4px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  line-height: 1.4;
}

.wlc-py-inline-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: block;
}
.wlc-py-inline-host .wlc-py-editor {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.wlc-py-inline-status {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
  user-select: none;
  -webkit-user-select: none;
}
.wlc-py-inline-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.wlc-py-inline-status-icon.ok {
  background: rgba(46,204,113,.16);
  color: var(--green);
  border: 1px solid rgba(46,204,113,.5);
}
.wlc-py-inline-status-icon.bad {
  background: rgba(231,76,60,.16);
  color: var(--red);
  border: 1px solid rgba(231,76,60,.5);
}
.wlc-py-inline-status-msg {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wlc-py-inline-status-btn {
  flex: 0 0 auto;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.wlc-py-inline-status-btn:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: #fff;
}

@media (max-width: 900px) {
  .wlc-py-inline-status {
    height: 30px;
    padding: 0 10px;
    font-size: 11px;
  }
  .wlc-py-inline-status-btn {
    padding: 3px 8px;
    font-size: 10px;
  }
  .wlc-py-tab-badge {
    font-size: 8px;
    padding: 0 3px;
  }
}


.wlc-py-style-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-2);
  overflow: hidden;
  margin-left: 8px;
  flex: 0 0 auto;
  height: 26px;
  user-select: none;
  -webkit-user-select: none;
}
.wlc-py-style-seg {
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 10px;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background .12s, color .12s;
  white-space: nowrap;
  min-width: 52px;
}
.wlc-py-style-seg:not(:last-child) {
  border-right: 1px solid var(--border);
}
.wlc-py-style-seg:hover:not(.disabled):not(.active) {
  background: var(--bg-3);
  color: var(--fg);
}
.wlc-py-style-seg.active {
  background: var(--accent-2);
  color: #fff;
}
.wlc-py-style-seg.active:hover {
  background: var(--accent-2);
}
.wlc-py-style-seg.disabled {
  opacity: .38;
  cursor: not-allowed;
  position: relative;
}
.wlc-py-style-seg.disabled::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--fg-mute);
}

@media (max-width: 900px) {
  .wlc-py-style-chip {
    height: 30px;
    margin-left: 4px;
  }
  .wlc-py-style-seg {
    padding: 0 8px;
    font-size: 11px;
    min-width: 46px;
  }
}
@media (max-width: 480px) {
  .wlc-py-style-chip {
    height: 26px;
  }
  .wlc-py-style-seg {
    padding: 0 6px;
    font-size: 10.5px;
    min-width: 38px;
  }
}

.wlc-py-report-back { z-index: 10060; }
.wlc-py-report-modal {
  width: min(94vw, 640px);
  max-width: 640px;
}
.wlc-py-report-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.wlc-py-report-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--fg);
}
.wlc-py-report-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-mute);
}
.wlc-py-report-body {
  padding: 16px 20px 8px;
  max-height: 64vh;
  overflow-y: auto;
}
.wlc-py-report-section {
  margin-bottom: 18px;
}
.wlc-py-report-section-h {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--fg-mute);
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.wlc-py-report-line {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.wlc-py-report-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  flex: 0 0 auto;
}
.wlc-py-report-line.ok .wlc-py-report-icon {
  background: rgba(46,204,113,.18);
  color: var(--green);
}
.wlc-py-report-line.warn .wlc-py-report-icon {
  background: rgba(243,156,18,.18);
  color: var(--amber);
}
.wlc-py-report-text {
  color: var(--fg-dim);
  flex: 1 1 auto;
}
.wlc-py-report-warn {
  background: rgba(243,156,18,.08);
  border-left: 3px solid var(--amber);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.5;
}
.wlc-py-report-bullet {
  font-size: 12.5px;
  color: var(--fg-dim);
  line-height: 1.6;
  padding: 3px 0;
}

@media (max-width: 900px) {
  .wlc-py-report-modal {
    width: 100vw;
    max-width: 100vw;
    height: auto;
    max-height: 92dvh;
    border-radius: 14px 14px 0 0;
    align-self: flex-end;
  }
  .wlc-py-report-body { max-height: 60dvh; }
}


.wlc-py-inline-host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: block;
}
.wlc-py-inline-host > .wlc-py-editor {
  position: absolute;
  inset: 0;
  height: auto;
  width: auto;
  box-sizing: border-box;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

.wlc-py-panel-editor {
  position: relative;
}
.wlc-py-panel-editor > .wlc-py-editor {
  position: absolute;
  inset: 12px 14px;
  height: auto;
  width: auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.wlc-py-inline-status-hint {
  flex: 0 0 auto;
  font-size: 10.5px;
  color: var(--fg-mute);
  padding-left: 4px;
  letter-spacing: .3px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .wlc-py-inline-status-hint { display: none; }
}

.wlc-py-editor {
  min-height: 120px;
}

.wlc-py-report-loss-intro {
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.55;
  padding: 8px 12px;
  background: rgba(231,76,60,.08);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  margin-bottom: 8px;
}
.wlc-py-report-loss {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--red);
  padding: 3px 0 3px 14px;
  line-height: 1.5;
}


.cm-s-wlc-py.CodeMirror,
.cm-s-wlc-py .CodeMirror-lines,
.cm-s-wlc-py .CodeMirror-scroll {
  background: var(--bg-1);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
}
.cm-s-wlc-py .CodeMirror-gutters {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
}
.cm-s-wlc-py .CodeMirror-linenumber { color: var(--fg-mute); }
.cm-s-wlc-py .CodeMirror-cursor    { border-left: 2px solid var(--accent); }
.cm-s-wlc-py .CodeMirror-selected  { background: color-mix(in oklab, var(--accent) 25%, transparent); }
.cm-s-wlc-py .CodeMirror-activeline-background {
  background: color-mix(in oklab, var(--fg) 4%, transparent);
}
.cm-s-wlc-py .CodeMirror-matchingbracket {
  background: color-mix(in oklab, var(--accent) 25%, transparent);
  color: var(--fg) !important;
  outline: 1px solid var(--accent);
}
.cm-s-wlc-py .CodeMirror-nonmatchingbracket { color: var(--red) !important; }

.cm-s-wlc-py .cm-keyword    { color: #c678dd; font-weight: 700; }
.cm-s-wlc-py .cm-storage    { color: #c678dd; font-weight: 700; }
.cm-s-wlc-py .cm-operator   { color: #56b6c2; }
.cm-s-wlc-py .cm-number     { color: #d19a66; }
.cm-s-wlc-py .cm-string,
.cm-s-wlc-py .cm-string-2   { color: #98c379; }
.cm-s-wlc-py .cm-escape     { color: #56b6c2; }
.cm-s-wlc-py .cm-comment    { color: #5c6370; font-style: italic; }
.cm-s-wlc-py .cm-def        { color: #61afef; font-weight: 600; }
.cm-s-wlc-py .cm-variable   { color: #e06c75; }
.cm-s-wlc-py .cm-variable-2 { color: #61afef; }   /* self */
.cm-s-wlc-py .cm-variable-3 { color: #e5c07b; }
.cm-s-wlc-py .cm-property   { color: #e5c07b; }
.cm-s-wlc-py .cm-attribute  { color: #d19a66; }
.cm-s-wlc-py .cm-builtin    { color: #e5c07b; }
.cm-s-wlc-py .cm-type       { color: #e5c07b; }
.cm-s-wlc-py .cm-decorator  { color: #e5c07b; }
.cm-s-wlc-py .cm-meta       { color: #abb2bf; }
.cm-s-wlc-py .cm-qualifier  { color: #e5c07b; }
.cm-s-wlc-py .cm-tag        { color: #e06c75; }
.cm-s-wlc-py .cm-bracket    { color: #abb2bf; }
.cm-s-wlc-py .cm-error {
  color: #e06c75;
  text-decoration: underline wavy #e06c75;
}

.wlc-py-code .py-keyword   { color: #c678dd; font-weight: 700; }
.wlc-py-code .py-storage   { color: #c678dd; font-weight: 700; }
.wlc-py-code .py-string    { color: #98c379; }
.wlc-py-code .py-comment   { color: #5c6370; font-style: italic; }
.wlc-py-code .py-number    { color: #d19a66; }
.wlc-py-code .py-decorator { color: #e5c07b; }
.wlc-py-code .py-builtin   { color: #e5c07b; }
.wlc-py-code .py-def       { color: #61afef; }
.wlc-py-code .py-operator  { color: #56b6c2; }


.CodeMirror .cm-keyword,
.CodeMirror .cm-storage,
.wlc-py-editor .cm-keyword,
.wlc-py-editor .cm-storage {
  color: #c678dd; font-weight: 700;
}
.CodeMirror .cm-operator,
.wlc-py-editor .cm-operator { color: #56b6c2; }
.CodeMirror .cm-number,
.wlc-py-editor .cm-number   { color: #d19a66; }
.CodeMirror .cm-string,
.CodeMirror .cm-string-2,
.wlc-py-editor .cm-string,
.wlc-py-editor .cm-string-2 { color: #98c379; }
.CodeMirror .cm-comment,
.wlc-py-editor .cm-comment  { color: #5c6370; font-style: italic; }
.CodeMirror .cm-def,
.wlc-py-editor .cm-def      { color: #61afef; font-weight: 600; }
.CodeMirror .cm-variable,
.wlc-py-editor .cm-variable { color: #e06c75; }
.CodeMirror .cm-variable-2,
.wlc-py-editor .cm-variable-2 { color: #61afef; }   /* self */
.CodeMirror .cm-variable-3,
.wlc-py-editor .cm-variable-3 { color: #e5c07b; }
.CodeMirror .cm-builtin,
.wlc-py-editor .cm-builtin  { color: #e5c07b; }
.CodeMirror .cm-type,
.wlc-py-editor .cm-type     { color: #e5c07b; }
.CodeMirror .cm-attribute,
.wlc-py-editor .cm-attribute{ color: #d19a66; }
.CodeMirror .cm-property,
.wlc-py-editor .cm-property { color: #e5c07b; }
.CodeMirror .cm-meta,
.wlc-py-editor .cm-meta     { color: #abb2bf; }
.CodeMirror .cm-bracket,
.wlc-py-editor .cm-bracket  { color: #abb2bf; }
.CodeMirror .cm-error,
.wlc-py-editor .cm-error {
  color: #e06c75; text-decoration: underline wavy #e06c75;
}

.wlc-py-editor .py-keyword,
.py-source .py-keyword,
.wlc-py-editor .kw,
.py-source .kw              { color: #c678dd; font-weight: 700; }
.wlc-py-editor .py-string,
.py-source .py-string,
.wlc-py-editor .str,
.py-source .str             { color: #98c379; }
.wlc-py-editor .py-comment,
.py-source .py-comment,
.wlc-py-editor .cmt,
.py-source .cmt             { color: #5c6370; font-style: italic; }
.wlc-py-editor .py-number,
.py-source .py-number,
.wlc-py-editor .num,
.py-source .num             { color: #d19a66; }
.wlc-py-editor .py-def,
.py-source .py-def,
.wlc-py-editor .fn,
.py-source .fn              { color: #61afef; font-weight: 600; }
.wlc-py-editor .py-builtin,
.py-source .py-builtin,
.wlc-py-editor .bi,
.py-source .bi              { color: #e5c07b; }
.wlc-py-editor .py-decorator,
.py-source .py-decorator,
.wlc-py-editor .dec,
.py-source .dec             { color: #e5c07b; }
.wlc-py-editor .py-operator,
.py-source .py-operator,
.wlc-py-editor .op,
.py-source .op              { color: #56b6c2; }

.token.keyword, .token.atrule, .token.important       { color: #c678dd; font-weight: 700; }
.token.string,  .token.char,  .token.attr-value        { color: #98c379; }
.token.comment, .token.prolog, .token.doctype          { color: #5c6370; font-style: italic; }
.token.number,  .token.boolean, .token.constant        { color: #d19a66; }
.token.function, .token.class-name                     { color: #61afef; }
.token.builtin, .token.punctuation, .token.decorator   { color: #e5c07b; }
.token.operator, .token.symbol                         { color: #56b6c2; }

.hljs-keyword, .hljs-built_in       { color: #c678dd; font-weight: 700; }
.hljs-string,  .hljs-meta-string    { color: #98c379; }
.hljs-comment, .hljs-quote          { color: #5c6370; font-style: italic; }
.hljs-number,  .hljs-literal        { color: #d19a66; }
.hljs-title,   .hljs-function       { color: #61afef; }
.hljs-params,  .hljs-variable       { color: #e06c75; }
.hljs-attr,    .hljs-attribute      { color: #d19a66; }


:root {
  --py-kw:   #c678dd;   /* keyword     */
  --py-sto:  #c678dd;   /* self / cls  */
  --py-str:  #98c379;   /* string      */
  --py-cmt:  #5c6370;   /* comment     */
  --py-num:  #d19a66;   /* number      */
  --py-def:  #61afef;   /* def name    */
  --py-var:  #e06c75;   /* variable    */
  --py-bi:   #e5c07b;   /* builtin     */
  --py-dec:  #e5c07b;   /* decorator   */
  --py-op:   #56b6c2;   /* operator    */
  --py-attr: #d19a66;   /* attribute   */
  --py-punc: #abb2bf;   /* punctuation */
}

.cm-s-wlc-py .cm-keyword,   .CodeMirror .cm-keyword    { color: var(--py-kw);  font-weight: 700; }
.cm-s-wlc-py .cm-storage,   .CodeMirror .cm-storage    { color: var(--py-sto); font-weight: 700; }
.cm-s-wlc-py .cm-string,    .CodeMirror .cm-string,
.cm-s-wlc-py .cm-string-2,  .CodeMirror .cm-string-2   { color: var(--py-str); }
.cm-s-wlc-py .cm-comment,   .CodeMirror .cm-comment    { color: var(--py-cmt); font-style: italic; }
.cm-s-wlc-py .cm-number,    .CodeMirror .cm-number     { color: var(--py-num); }
.cm-s-wlc-py .cm-def,       .CodeMirror .cm-def        { color: var(--py-def); font-weight: 600; }
.cm-s-wlc-py .cm-variable-2,.CodeMirror .cm-variable-2 { color: var(--py-def); }
.cm-s-wlc-py .cm-variable,  .CodeMirror .cm-variable   { color: var(--py-var); }
.cm-s-wlc-py .cm-builtin,   .CodeMirror .cm-builtin    { color: var(--py-bi); }
.cm-s-wlc-py .cm-operator,  .CodeMirror .cm-operator   { color: var(--py-op); }
.cm-s-wlc-py .cm-attribute, .CodeMirror .cm-attribute  { color: var(--py-attr); }

.py-source .py-keyword, .py-editor .py-keyword, .wlc-py .py-keyword, .kw   { color: var(--py-kw);  font-weight: 700; }
.py-source .py-storage, .py-editor .py-storage, .wlc-py .py-storage        { color: var(--py-sto); font-weight: 700; }
.py-source .py-string,  .py-editor .py-string,  .wlc-py .py-string,  .str  { color: var(--py-str); }
.py-source .py-comment, .py-editor .py-comment, .wlc-py .py-comment, .cmt  { color: var(--py-cmt); font-style: italic; }
.py-source .py-number,  .py-editor .py-number,  .wlc-py .py-number,  .num  { color: var(--py-num); }
.py-source .py-def,     .py-editor .py-def,     .wlc-py .py-def,     .fn   { color: var(--py-def); font-weight: 600; }
.py-source .py-builtin, .py-editor .py-builtin, .wlc-py .py-builtin, .bi   { color: var(--py-bi); }
.py-source .py-decorator,.py-editor .py-decorator,.wlc-py .py-decorator,.dec { color: var(--py-dec); }
.py-source .py-operator,.py-editor .py-operator,.wlc-py .py-operator, .op  { color: var(--py-op); }

.token.keyword, .token.atrule, .token.important   { color: var(--py-kw);  font-weight: 700; }
.token.string,  .token.char,   .token.attr-value  { color: var(--py-str); }
.token.comment, .token.prolog, .token.doctype     { color: var(--py-cmt); font-style: italic; }
.token.number,  .token.boolean,.token.constant    { color: var(--py-num); }
.token.function,.token.class-name                 { color: var(--py-def); }
.token.builtin, .token.punctuation,.token.decorator { color: var(--py-bi); }
.token.operator,.token.symbol                     { color: var(--py-op); }
.hljs-keyword,  .hljs-built_in                    { color: var(--py-kw);  font-weight: 700; }
.hljs-string,   .hljs-meta-string                 { color: var(--py-str); }
.hljs-comment,  .hljs-quote                       { color: var(--py-cmt); font-style: italic; }
.hljs-number,   .hljs-literal                     { color: var(--py-num); }
.hljs-title,    .hljs-function                    { color: var(--py-def); }
.hljs-params,   .hljs-variable                    { color: var(--py-var); }
.hljs-attr,     .hljs-attribute                   { color: var(--py-attr); }

.wlc-py-hl {
  white-space: pre;
  font-family: var(--mono);
}

.wlc-py-hl .py-keyword {
  color: #c678dd; font-weight: 700;
}
.wlc-py-hl .py-storage {
  color: #c678dd; font-weight: 700; font-style: italic;
}

.wlc-py-hl .py-string  { color: #98c379; }
.wlc-py-hl .py-number  { color: #d19a66; }

.wlc-py-hl .py-comment { color: #5c6370; font-style: italic; }

.wlc-py-hl .py-defname { color: #61afef; font-weight: 600; }   /* after def/class */
.wlc-py-hl .py-builtin { color: #e5c07b; }
.wlc-py-hl .py-decorator { color: #e5c07b; }
.wlc-py-hl .py-var     { color: #e06c75; }                     /* object of attr */
.wlc-py-hl .py-attr    { color: #d19a66; }                     /* .name after dot */

.wlc-py-hl .py-operator { color: #56b6c2; }
.wlc-py-hl .py-punct    { color: #abb2bf; }

.wlc-py-hl .py-builtin[data-const="1"] {
  text-decoration: underline dotted rgba(229,192,123,.5);
  text-underline-offset: 3px;
}

.wlc-py-hl-overlay {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
  border: 1px solid transparent;
}
.wlc-py-hl-overlay::-webkit-scrollbar { width: 0; height: 0; }
.wlc-py-hl-overlay { scrollbar-width: none; }


/* ============================================================
 * u_43c_1 — align textarea and pre scroll behaviour so the
 * highlighted overlay stays pixel-aligned with the real text.
 * Without this, the textarea's reserved scrollbar gutter shifts
 * its content area inward relative to the pre, producing the
 * "shadow on text" effect reported on mobile.
 * ============================================================ */
.wlc-py-editor .wlc-py-ta,
.wlc-py-editor .wlc-py-pre {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* legacy Edge */
}
.wlc-py-editor .wlc-py-ta::-webkit-scrollbar,
.wlc-py-editor .wlc-py-pre::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Chromium / WebKit */
}
.wlc-py-editor .wlc-py-ta {
  /* The overlay above supplies the visible glyphs; the textarea
     keeps only the caret.  Do NOT let a stylesheet hide it. */
  caret-color: var(--fg);
}

/* ============================================================================
 * u_43c_1 — Editor layout fixes and VSCode-Dark+ colour palette.
 * ==========================================================================*/

/* Fixed line height across gutter, pre and textarea so nothing drifts. */
.wlc-py-editor {
  --py-lh: 20px;
  line-height: var(--py-lh);
}
.wlc-py-editor .wlc-py-gutter {
  line-height: var(--py-lh);
  will-change: transform;
}
.wlc-py-editor .wlc-py-ln {
  line-height: var(--py-lh);
  font-size: 11.5px;
  height: var(--py-lh);
}
.wlc-py-editor .wlc-py-pre,
.wlc-py-editor .wlc-py-ta {
  line-height: var(--py-lh);
  font-size: 13px;
  padding: 8px 14px;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.wlc-py-editor .wlc-py-pre { scrollbar-width: none; }
.wlc-py-editor .wlc-py-pre::-webkit-scrollbar { width: 0; height: 0; display: none; }
.wlc-py-editor .wlc-py-ta  { scrollbar-width: thin; }
.wlc-py-editor .wlc-py-ta::-webkit-scrollbar { width: 10px; height: 10px; }
.wlc-py-editor .wlc-py-ta::-webkit-scrollbar-thumb {
  background: var(--bg-3); border-radius: 6px; border: 2px solid var(--bg);
}
.wlc-py-editor .wlc-py-ta {
  caret-color: var(--fg);
  tab-size: 4;
  -moz-tab-size: 4;
}
.wlc-py-editor .wlc-py-pre {
  tab-size: 4;
  -moz-tab-size: 4;
}

/* --- VSCode Dark+ inspired palette for .wlc-py-* class names --- */
:root {
  --py-c-keyword:  #c586c0;   /* control flow       */
  --py-c-kw2:      #569cd6;   /* def / class / self */
  --py-c-string:   #ce9178;
  --py-c-comment:  #6a9955;
  --py-c-number:   #b5cea8;
  --py-c-func:     #dcdcaa;
  --py-c-class:    #4ec9b0;
  --py-c-decor:    #dcdcaa;
  --py-c-op:       #d4d4d4;
  --py-c-var:      #9cdcfe;
  --py-c-builtin:  #dcdcaa;
  --py-c-punct:    #d4d4d4;
  --py-c-constant: #569cd6;
}

.wlc-py-editor .py-comment        { color: var(--py-c-comment); font-style: italic; }
.wlc-py-editor .py-string,
.wlc-py-editor .py-string-2       { color: var(--py-c-string); }
.wlc-py-editor .py-fstring        { color: var(--py-c-string); }
.wlc-py-editor .py-keyword        { color: var(--py-c-keyword); font-weight: 600; }
.wlc-py-editor .py-defname,
.wlc-py-editor .py-classname      { color: var(--py-c-class); font-weight: 600; }
.wlc-py-editor .py-number         { color: var(--py-c-number); }
.wlc-py-editor .py-function-call  { color: var(--py-c-func); }
.wlc-py-editor .py-builtin-call   { color: var(--py-c-func); }
.wlc-py-editor .py-builtin        { color: var(--py-c-builtin); }
.wlc-py-editor .py-method         { color: var(--py-c-func); }
.wlc-py-editor .py-attribute      { color: var(--py-c-var); }
.wlc-py-editor .py-variable       { color: var(--py-c-var); }
.wlc-py-editor .py-self           { color: var(--py-c-kw2); font-style: italic; }
.wlc-py-editor .py-constant       { color: var(--py-c-constant); font-weight: 600; }
.wlc-py-editor .py-decorator      { color: var(--py-c-decor); }
.wlc-py-editor .py-bankname       { color: var(--py-c-class); }
.wlc-py-editor .py-operator       { color: var(--py-c-op); }
.wlc-py-editor .py-punct          { color: var(--py-c-punct); }

/* Older class names retained for backwards compatibility. */
.wlc-py-editor .wlc-py-t-kw     { color: var(--py-c-keyword); }
.wlc-py-editor .wlc-py-t-type   { color: var(--py-c-class); }
.wlc-py-editor .wlc-py-t-bank   { color: var(--py-c-class); font-weight: 700; }
.wlc-py-editor .wlc-py-t-sys    { color: var(--py-c-constant); font-weight: 700; }
.wlc-py-editor .wlc-py-t-mnem   { color: var(--py-c-func); font-weight: 700; }
.wlc-py-editor .wlc-py-t-num    { color: var(--py-c-number); }
.wlc-py-editor .wlc-py-t-op     { color: var(--py-c-op); }
.wlc-py-editor .wlc-py-t-string { color: var(--py-c-string); }
.wlc-py-editor .wlc-py-t-comment{ color: var(--py-c-comment); font-style: italic; }
.wlc-py-editor .wlc-py-t-class  { color: var(--py-c-class); }

@media (max-width: 900px) {
  .wlc-py-editor { --py-lh: 22px; font-size: 12px; }
  .wlc-py-editor .wlc-py-pre,
  .wlc-py-editor .wlc-py-ta { font-size: 13.5px; padding: 6px 10px; }
  .wlc-py-editor .wlc-py-ln { font-size: 11px; }
}

/* ============================================================
 * u_43c_2 — Force the editor grid to a single 1fr row so the
 * gutter can actually scroll.  Without this the implicit auto
 * row stretched to fit the gutter's content and no scrolling
 * was ever possible, which is why the line numbers froze at 19
 * whenever DevTools resized the viewport.
 * ============================================================ */
.wlc-py-editor {
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
}
.wlc-py-editor .wlc-py-gutter {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wlc-py-editor .wlc-py-gutter::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.wlc-py-editor .wlc-py-codewrap,
.wlc-py-editor .wlc-py-errmarks {
  min-height: 0;
}

/* Gutter font size matches code so line boxes share baselines. */
.wlc-py-editor .wlc-py-ln {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-mute);
  opacity: .72;
  padding: 0 8px 0 4px;
  height: var(--py-lh);
  line-height: var(--py-lh);
}
@media (max-width: 900px) {
  .wlc-py-editor .wlc-py-ln {
    font-size: 13.5px;
    padding: 0 6px 0 3px;
  }
}
