Cradicle Explorer
Cyber_sec_notes
/ .obsidian / plugins / code-styler / styles.css
styles.css
   1  /* src/css/codeblocks.css */
   2  body {
   3    --border-radius: 10px;
   4    --gradient-background-colour: transparent;
   5    --code-padding: 8px;
   6    --container-height: calc(var(--language-icon-size) + 2 * var(--header-inner-vertical-padding) * var(--header-font-size));
   7    --container-min-height: calc((var(--header-font-size) + 2 * var(--header-inner-vertical-padding) * var(--header-font-size)) * var(--line-height-normal));
   8    --language-border-colour: var(--code-styler-codeblock-background-colour);
   9    --language-border-width: 0px;
  10    --header-font-size: var(--code-size);
  11    --header-padding: 0px;
  12    --header-inner-vertical-padding: 0.3;
  13    --header-spacing: 15px;
  14    --header-button-spacing: 14px;
  15    --header-separator-width: 2px;
  16    --header-separator-width-padding: var(--header-separator-width);
  17    --code-styler-header-border: none;
  18    --folded-bottom-border: 0 solid transparent;
  19    --language-icon-size: 28px;
  20    --language-icon-filter: none;
  21    --gradient-highlights-colour-stop: 100%;
  22    --line-number-height-correction: 2px;
  23    --line-number-gutter-padding: 16px;
  24    --line-number-gutter-min-width: 32.67px;
  25    --line-wrapping: pre-wrap;
  26    --line-active-wrapping: var(--line-wrapping);
  27    --code-styler-button-colour: var(--text-muted);
  28    --code-styler-button-active-colour: white;
  29    --duration-button: 240ms;
  30    --dent-difference: 30px;
  31    --polygon-in: polygon(0 0, 16px 0, 16px 36px, 0 36px);
  32    --polygon-out: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  33    --copy-code-header-right-margin: calc(3 * var(--header-button-spacing));
  34  }
  35  @font-face {
  36    font-family: code-styler-nerdfont;
  37    src: url(https://raw.githubusercontent.com/romkatv/powerlevel10k-media/master/MesloLGS%20NF%20Regular.ttf) format("truetype");
  38  }
  39  .code-styler-pre-parent {
  40    margin-bottom: 16px;
  41  }
  42  .markdown-source-view.mod-cm6 .code-styler-pre-parent {
  43    margin-bottom: 0px;
  44  }
  45  .code-styler pre.code-styler-pre {
  46    overflow: hidden !important;
  47    min-height: unset;
  48    padding: 0px !important;
  49    border-radius: var(--border-radius) !important;
  50    background: var(--code-styler-codeblock-background-colour) !important;
  51  }
  52  .code-styler pre.code-styler-pre[class*=language-] {
  53    padding-left: var(--language-border-width) !important;
  54    background: linear-gradient(90deg, var(--language-border-colour), var(--language-border-colour) var(--language-border-width), var(--code-styler-codeblock-background-colour) var(--language-border-width), var(--code-styler-codeblock-background-colour) 100%), var(--code-styler-codeblock-background-colour) !important;
  55  }
  56  .code-styler pre > code {
  57    padding-top: var(--code-padding) !important;
  58    padding-bottom: var(--code-padding) !important;
  59  }
  60  .code-styler pre.code-styler-pre > code {
  61    display: grid;
  62    max-height: unset;
  63    padding-top: var(--code-padding) !important;
  64    padding-right: 0px !important;
  65    padding-bottom: var(--code-padding) !important;
  66    padding-left: 0px !important;
  67    border-radius: 0px !important;
  68    background: none !important;
  69    grid-template-columns: min-content auto;
  70    grid-template-rows: auto;
  71    overflow-x: overlay;
  72    transition-duration: var(--duration-button);
  73    transition-property:
  74      max-height,
  75      padding-top,
  76      padding-bottom,
  77      border-top;
  78    transition-timing-function: ease-in-out;
  79    white-space: var(--line-wrapping) !important;
  80  }
  81  .code-styler pre.code-styler-pre.wrapped > code {
  82    --line-wrapping: pre-wrap;
  83    --line-active-wrapping: pre-wrap;
  84  }
  85  .code-styler pre.code-styler-pre.unwrapped > code {
  86    --line-wrapping: pre;
  87    --line-active-wrapping: pre;
  88  }
  89  .code-styler pre.code-styler-pre.unwrapped-inactive > code {
  90    --line-wrapping: pre;
  91    --line-active-wrapping: pre-wrap;
  92  }
  93  .code-styler pre.code-styler-pre code:not(:has(> input[style*="display: inline;"])):active {
  94    --line-wrapping: var(--line-active-wrapping) !important;
  95  }
  96  .code-styler pre.code-styler-pre.code-styler-folded > code {
  97    max-height: 0 !important;
  98    padding-top: 0 !important;
  99    padding-bottom: 0 !important;
 100  }
 101  .code-styler pre.code-styler-pre::before,
 102  .code-styler pre.code-styler-pre::after {
 103    content: none !important;
 104  }
 105  .markdown-source-view.mod-cm6 .cm-embed-block pre.code-styler-pre {
 106    margin: 0em 0px;
 107  }
 108  body.code-styler .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container + [class*=code-styler-line].HyperMD-codeblock-begin {
 109    border-top: none !important;
 110    border-top-left-radius: 0px !important;
 111    border-top-right-radius: 0px !important;
 112  }
 113  .code-styler .markdown-source-view [class*=code-styler-line].HyperMD-codeblock-end {
 114    border-bottom-left-radius: var(--border-radius);
 115    border-bottom-right-radius: var(--border-radius);
 116  }
 117  body.code-styler .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container-hidden + [class*=code-styler-line].HyperMD-codeblock-begin {
 118    border-top-left-radius: var(--border-radius) !important;
 119    border-top-right-radius: var(--border-radius) !important;
 120  }
 121  body.code-styler .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container-hidden + [class*=code-styler-line].HyperMD-codeblock-begin .code-styler-line-number {
 122    border-top-left-radius: var(--border-radius) !important;
 123  }
 124  .code-styler .markdown-source-view .HyperMD-codeblock[class*=code-styler-line] {
 125    overflow: hidden;
 126    padding: 0 !important;
 127    padding-left: var(--size-4-4) !important;
 128    background: linear-gradient(90deg, var(--gradient-background-colour) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
 129  }
 130  .code-styler .markdown-source-view .HyperMD-codeblock[class*=code-styler-line][class*=language-] {
 131    background: linear-gradient(90deg, var(--language-border-colour), var(--language-border-colour) var(--language-border-width), var(--gradient-background-colour) var(--language-border-width) var(--gradient-highlights-colour-stop), transparent 100%), var(--code-styler-codeblock-background-colour) !important;
 132  }
 133  .code-styler .markdown-source-view .HyperMD-codeblock[class*=code-styler-line][class*=language-] .code-styler-line-number {
 134    margin-left: var(--language-border-width);
 135  }
 136  body .code-styler-header-container-hidden {
 137    display: none !important;
 138  }
 139  .code-styler-header-container {
 140    display: flex !important;
 141    overflow: visible;
 142    height: var(--container-height);
 143    min-height: var(--container-min-height);
 144    box-sizing: content-box;
 145    padding-top: var(--header-padding);
 146    margin-top: 0px !important;
 147    font-size: var(--header-font-size);
 148    transition: border-bottom ease-in-out var(--duration-button);
 149    user-select: none;
 150  }
 151  .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container {
 152    padding-bottom: var(--header-separator-width);
 153    padding-left: var(--language-border-width);
 154    border-top: var(--code-styler-header-border);
 155    border-right: var(--code-styler-header-border);
 156    border-left: var(--code-styler-header-border);
 157    background: linear-gradient(var(--code-styler-header-background-colour) 0%, var(--code-styler-header-background-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) calc(100% - var(--header-separator-width)), var(--code-styler-header-separator-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat, var(--language-border-colour) !important;
 158    border-top-left-radius: var(--border-radius);
 159    border-top-right-radius: var(--border-radius);
 160  }
 161  pre.code-styler-pre .code-styler-header-container {
 162    border-bottom: var(--header-separator-width) solid var(--code-styler-header-separator-colour);
 163    background-color: var(--code-styler-header-background-colour);
 164  }
 165  .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container.code-styler-header-folded {
 166    padding-bottom: var(--header-padding);
 167    border-bottom: var(--code-styler-header-border);
 168    border-bottom: var(--folded-bottom-border);
 169    background: linear-gradient(var(--code-styler-header-background-colour) 0%, var(--code-styler-header-background-colour) 100%) var(--language-border-width) bottom/100% border-box no-repeat, var(--language-border-colour) !important;
 170    border-bottom-left-radius: var(--border-radius);
 171    border-bottom-right-radius: var(--border-radius);
 172  }
 173  pre.code-styler-pre.code-styler-folded .code-styler-header-container {
 174    border-bottom: var(--folded-bottom-border);
 175  }
 176  .code-styler-header-container .code-styler-header-language-tag {
 177    display: flex;
 178    height: 100%;
 179    flex-direction: column;
 180    align-content: center;
 181    justify-content: center;
 182    padding-top: calc(1em * var(--header-inner-vertical-padding));
 183    padding-right: var(--header-spacing);
 184    padding-bottom: calc(1em * var(--header-inner-vertical-padding));
 185    padding-left: var(--header-spacing);
 186    border-radius: var(--border-radius) var(--border-radius) 0px 0px;
 187    margin-right: var(--header-spacing);
 188    background-color: var(--code-styler-header-language-tag-background-colour);
 189    color: var(--code-styler-header-language-tag-text-colour);
 190    font-size: inherit;
 191    font-style: var(--code-styler-header-language-tag-text-italic, normal);
 192    font-weight: var(--code-styler-header-language-tag-text-bold, normal);
 193    text-align: center;
 194    transition: border-radius ease-in-out var(--duration-button), padding ease-in-out var(--duration-button);
 195  }
 196  .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container.code-styler-header-folded .code-styler-header-language-tag,
 197  pre.code-styler-pre.code-styler-folded .code-styler-header-container .code-styler-header-language-tag {
 198    border-radius: var(--border-radius);
 199  }
 200  .code-styler-header-text,
 201  .code-styler-header-external-reference > div,
 202  pre.code-styler-pre .code-styler-header-external-reference > button {
 203    display: flex;
 204    flex-direction: column;
 205    align-content: center;
 206    justify-content: center;
 207    padding-top: calc(1em * var(--header-inner-vertical-padding));
 208    padding-bottom: calc(1em * var(--header-inner-vertical-padding));
 209    padding-left: 0px;
 210    color: var(--code-styler-header-text-colour);
 211    font-size: inherit;
 212    font-style: var(--code-styler-header-title-text-italic, normal);
 213    font-weight: var(--code-styler-header-title-text-bold, normal);
 214    transition: padding ease-in-out var(--duration-button);
 215  }
 216  pre.code-styler-pre .code-styler-header-external-reference > button {
 217    display: inline-flex !important;
 218    height: auto;
 219    padding-top: calc(1em * var(--header-inner-vertical-padding)) !important;
 220    padding-bottom: calc(1em * var(--header-inner-vertical-padding)) !important;
 221    padding-left: 6px !important;
 222    transition:
 223      padding ease-in-out var(--duration-button),
 224      scale ease-in-out var(--duration-button),
 225      visibility var(--duration-button),
 226      opacity var(--duration-button) !important;
 227  }
 228  pre.code-styler-pre .code-styler-header-external-reference > button:hover {
 229    scale: 1.4;
 230  }
 231  body .code-styler-header-container:not(:has(div > img.code-styler-icon)) .code-styler-header-language-tag {
 232    border-bottom-left-radius: 0 !important;
 233    border-top-left-radius: 0 !important;
 234  }
 235  body .code-styler-header-container:not(:has(.code-styler-header-language-tag)) .code-styler-header-text {
 236    padding-left: var(--header-spacing);
 237  }
 238  .code-styler-header-external-reference {
 239    display: contents;
 240    margin-left: var(--header-spacing);
 241  }
 242  .code-styler-header-external-reference > div:first-child {
 243    padding-left: var(--header-spacing) !important;
 244  }
 245  .code-styler-header-external-reference > div,
 246  pre.code-styler-pre .code-styler-header-external-reference > button {
 247    padding-left: 6px;
 248    font-family:
 249      code-styler-nerdfont,
 250      menlo,
 251      var(--font-monospace);
 252    font-size: var(--code-styler-external-reference-text-size,xx-small);
 253  }
 254  .code-styler-header-external-reference > div[class$=icon] {
 255    font-size: var(--code-styler-external-reference-icon-size,x-small);
 256  }
 257  div.external-reference-repo,
 258  div.external-reference-repo-icon {
 259    color: var(--code-styler-header-external-reference-repository, cyan);
 260  }
 261  div.external-reference-ref,
 262  div.external-reference-ref-icon {
 263    color: var(--code-styler-header-external-reference-version, pink);
 264  }
 265  div.external-reference-timestamp,
 266  div.external-reference-timestamp-icon {
 267    color: var(--code-styler-header-external-reference-timestamp, grey);
 268  }
 269  div:has(> img.code-styler-icon) {
 270    display: inline-flex;
 271    flex-direction: column;
 272    align-content: center;
 273    justify-content: center;
 274    padding-top: calc(1em * var(--header-inner-vertical-padding));
 275    padding-right: var(--header-spacing);
 276    padding-bottom: calc(1em * var(--header-inner-vertical-padding));
 277    padding-left: var(--header-spacing);
 278    transition: padding ease-in-out var(--duration-button);
 279  }
 280  .code-styler-icon {
 281    width: var(--language-icon-size);
 282    height: var(--language-icon-size);
 283    border: none !important;
 284    margin: 0 !important;
 285    filter: var(--language-icon-filter);
 286  }
 287  pre.code-styler-pre [class^=code-styler-line-highlighted] > .code-styler-line-text {
 288    background-image: linear-gradient(90deg, var(--gradient-background-colour) 0% var(--gradient-highlights-colour-stop), var(--code-styler-codeblock-background-colour) 100%);
 289  }
 290  .code-styler-line-highlighted {
 291    --gradient-background-colour: var(--code-styler-default-highlight-colour) !important;
 292  }
 293  .code-styler-active-line-highlight .cm-active,
 294  .code-styler-active-line-highlight-editor .cm-active {
 295    background: linear-gradient(to right, var(--code-styler-active-editor-line-colour), var(--gradient-highlights-colour-stop), transparent) !important;
 296  }
 297  .code-styler-active-line-highlight .markdown-source-view .HyperMD-codeblock.cm-active,
 298  .code-styler-active-line-highlight-codeblock .markdown-source-view .HyperMD-codeblock.cm-active {
 299    background: linear-gradient(to right, var(--code-styler-active-codeblock-line-colour), var(--gradient-highlights-colour-stop), var(--code-styler-codeblock-background-colour)) !important;
 300  }
 301  .markdown-source-view :not(div):not([class*=HyperMD-codeblock]) > .code-styler-line-number {
 302    display: none;
 303  }
 304  .code-styler code > div:first-child > .code-styler-line-number {
 305    box-shadow: 0px calc(-1 * var(--code-padding)) var(--code-styler-gutter-background-colour);
 306    transition: box-shadow ease-in-out var(--duration-button);
 307  }
 308  .code-styler .code-styler-folded > code > div:first-child > .code-styler-line-number {
 309    box-shadow: 0px 0px var(--code-styler-gutter-background-colour);
 310  }
 311  .code-styler code > div:last-child > .code-styler-line-number {
 312    box-shadow: 0px var(--code-padding) var(--code-styler-gutter-background-colour);
 313  }
 314  .code-styler code > div:only-child > .code-styler-line-number {
 315    box-shadow: 0px calc(-1 * var(--code-padding)) var(--code-styler-gutter-background-colour), 0px var(--code-padding) var(--code-styler-gutter-background-colour);
 316  }
 317  pre.code-styler-pre div > [class*=code-styler-line-number],
 318  .markdown-source-view div[class*=HyperMD-codeblock] > [class*=code-styler-line-number] {
 319    width: var(--line-number-gutter-width);
 320    min-width: var(--line-number-gutter-min-width);
 321    padding-right: 8px;
 322    padding-left: calc(4px + var(--language-border-width));
 323    background-color: var(--code-styler-gutter-background-colour);
 324    color: var(--code-styler-gutter-text-colour);
 325    font-family: var(--font-monospace);
 326    font-size: var(--code-size);
 327    text-align: right;
 328    user-select: none;
 329  }
 330  .markdown-source-view [class*=HyperMD-codeblock] > .code-styler-line-number {
 331    position: absolute;
 332    left: 0;
 333    display: inline-block;
 334    min-width: calc(var(--line-number-gutter-min-width) - 12px);
 335    height: 100%;
 336    box-sizing: content-box;
 337    padding-top: var(--line-number-height-correction);
 338    direction: rtl;
 339    overflow-x: auto;
 340  }
 341  .markdown-source-view .HyperMD-codeblock-begin .code-styler-line-number,
 342  .markdown-source-view .HyperMD-codeblock-end .code-styler-line-number {
 343    width: var(--line-number-gutter-width);
 344  }
 345  pre.code-styler-pre .code-styler-line-number {
 346    position: sticky;
 347    top: -1px;
 348    left: 0;
 349    border-top: var(--line-number-height-correction) solid transparent;
 350    grid-column: 1;
 351    white-space: nowrap;
 352  }
 353  pre.code-styler-pre div:last-child > .code-styler-line-number {
 354    width: unset;
 355  }
 356  .code-styler-gutter-highlight pre.code-styler-pre [class*=code-styler-line-highlighted] .code-styler-line-number {
 357    background-color: var(--gradient-background-colour) !important;
 358  }
 359  .code-styler-active-line-highlight.code-styler-gutter-highlight .markdown-source-view .HyperMD-codeblock[class*=code-styler-line].cm-active .code-styler-line-number,
 360  .code-styler-active-line-highlight-codeblock.code-styler-gutter-highlight .markdown-source-view .HyperMD-codeblock[class*=code-styler-line].cm-active .code-styler-line-number,
 361  .code-styler-gutter-highlight [class*=code-styler-line-highlighted] .code-styler-line-number {
 362    background-color: rgba(0, 0, 0, 0) !important;
 363  }
 364  .code-styler-gutter-active-line .cm-active .code-styler-line-number {
 365    color: var(--code-styler-gutter-active-text-colour) !important;
 366  }
 367  .code-styler .markdown-source-view .HyperMD-codeblock:has(.code-styler-line-number) {
 368    padding-left: calc(12px + var(--language-border-width) + var(--line-number-gutter-width) + var(--line-number-gutter-padding)) !important;
 369  }
 370  .code-styler .markdown-source-view .HyperMD-codeblock[class*=code-styler-line]::before {
 371    content: none !important;
 372  }
 373  pre.code-styler-pre > code > div[class*=code-styler-line] {
 374    display: contents !important;
 375  }
 376  pre.code-styler-pre .code-styler-line-text {
 377    flex-basis: 100%;
 378    padding-left: var(--line-number-gutter-padding);
 379    grid-column: 2;
 380  }
 381  .HyperMD-codeblock:has(> .cm-widgetBuffer) {
 382    white-space: nowrap;
 383  }
 384  .HyperMD-codeblock:has(> .cm-widgetBuffer) > .cm-hmd-codeblock {
 385    white-space: break-spaces;
 386  }
 387  pre.code-styler-pre.code-styler-folded::-webkit-scrollbar,
 388  pre.code-styler-pre.code-styler-folded code::-webkit-scrollbar,
 389  pre.code-styler-pre.hide-scroll::-webkit-scrollbar,
 390  pre.code-styler-pre.hide-scroll code::-webkit-scrollbar {
 391    display: none !important;
 392  }
 393  @keyframes outdent {
 394    from {
 395      margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
 396      clip-path: var(--polygon-in);
 397    }
 398    to {
 399      margin-right: var(--copy-code-header-right-margin);
 400      clip-path: var(--polygon-out);
 401    }
 402  }
 403  @keyframes indent {
 404    from {
 405      margin-right: var(--copy-code-header-right-margin);
 406      clip-path: var(--polygon-out);
 407    }
 408    to {
 409      margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
 410      clip-path: var(--polygon-in);
 411    }
 412  }
 413  @keyframes reverse-outdent {
 414    from {
 415      clip-path: var(--polygon-in);
 416    }
 417    to {
 418      clip-path: var(--polygon-out);
 419    }
 420  }
 421  @keyframes reverse-indent {
 422    from {
 423      clip-path: var(--polygon-out);
 424    }
 425    to {
 426      clip-path: var(--polygon-in);
 427    }
 428  }
 429  pre.code-styler-pre button {
 430    display: unset !important;
 431    padding: 0 !important;
 432    border: none !important;
 433    margin: 0;
 434    margin-top: 0 !important;
 435    margin-bottom: 0 !important;
 436    background: transparent !important;
 437    box-shadow: none;
 438    color: var(--code-styler-button-colour) !important;
 439    font-family: var(--font-interface);
 440    font-size: var(--font-ui-smaller);
 441    opacity: 1;
 442    transition: visibility var(--duration-button), opacity var(--duration-button);
 443    visibility: visible;
 444  }
 445  pre.code-styler-pre.code-styler-folded button,
 446  pre.code-styler-pre:not(.code-styler-folded):not(:hover) button,
 447  pre.code-styler-pre:not(.code-styler-folded):not(:hover) .code-styler-header-container::after {
 448    opacity: 0;
 449    visibility: hidden;
 450  }
 451  .code-styler-header-container::after {
 452    position: relative;
 453    top: 0;
 454    right: 0;
 455    bottom: 0;
 456    left: 0;
 457    width: 20px;
 458    height: 20px;
 459    margin: auto;
 460    margin-right: var(--header-button-spacing);
 461    background-color: var(--code-styler-button-colour);
 462    content: "\200b";
 463    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z'/%3E%3C/svg%3E");
 464    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
 465    -webkit-mask-repeat: no-repeat;
 466    mask-repeat: no-repeat;
 467    opacity: 1;
 468    scale: 0.8;
 469    transition:
 470      transform var(--duration-button) ease-out,
 471      visibility var(--duration-button),
 472      opacity var(--duration-button),
 473      scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
 474    visibility: visible;
 475  }
 476  pre.code-styler-pre.code-styler-folded .code-styler-header-container::after,
 477  .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container:not(:has(+ .HyperMD-codeblock-begin))::after {
 478    transform: rotate(-90deg);
 479  }
 480  .code-styler-header-container:hover::after {
 481    scale: 1;
 482  }
 483  body pre.code-styler-pre:has(.code-styler-header-container-hidden) button.copy-code-button,
 484  body .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container-hidden + .HyperMD-codeblock-begin span.code-block-flair {
 485    top: calc(0.5 * var(--font-text-size) * 0.875 * var(--line-height-normal)) !important;
 486    --copy-code-header-right-margin: 12px;
 487  }
 488  body .markdown-source-view :not(pre.code-styler-pre) > .code-styler-header-container.hidden + .HyperMD-codeblock-begin {
 489    overflow: hidden;
 490  }
 491  pre.code-styler-pre button.copy-code-button {
 492    top: max(calc(0.5 * var(--container-height) * 1), calc(0.5 * var(--container-min-height) * 1)) !important;
 493    bottom: unset !important;
 494    transform: translateY(-50%);
 495  }
 496  pre.code-styler-pre button.copy-code-button,
 497  pre.code-styler-pre button.run-code-button,
 498  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair {
 499    margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
 500    clip-path: var(--polygon-in);
 501    will-change: margin-right, clip-path;
 502  }
 503  pre.code-styler-pre button.copy-code-button:not(:active),
 504  pre.code-styler-pre button.run-code-button:not(:active),
 505  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair:not(:active) {
 506    animation: indent var(--duration-button);
 507  }
 508  pre.code-styler-pre button.copy-code-button:hover,
 509  pre.code-styler-pre button.run-code-button:hover,
 510  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair:hover {
 511    margin-right: var(--copy-code-header-right-margin);
 512    animation: outdent var(--duration-button);
 513    background-color: transparent;
 514    clip-path: var(--polygon-out);
 515  }
 516  pre.code-styler-pre button.copy-code-button:active,
 517  pre.code-styler-pre button.run-code-button:active,
 518  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair:active {
 519    scale: 0.95;
 520    transition: scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
 521  }
 522  pre.code-styler-pre button.copy-code-button::before,
 523  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::before {
 524    display: inline-block;
 525    width: 14px;
 526    height: 14px;
 527    padding-right: 4px;
 528    background-color: var(--code-styler-button-colour);
 529    content: "\200b";
 530    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
 531    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z'/%3E%3Cpath d='M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='<Transparent Rectangle>'/%3E%3C/svg%3E");
 532    -webkit-mask-repeat: no-repeat;
 533    mask-repeat: no-repeat;
 534    vertical-align: 1px;
 535  }
 536  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair {
 537    position: absolute;
 538    top: min(calc(-0.5 * var(--container-height) * 1.1 - var(--header-separator-width)), calc(-0.5 * var(--container-min-height) * 1.1 - var(--header-separator-width))) !important;
 539    right: 0;
 540    padding: 0;
 541    margin-top: 0 !important;
 542    margin-bottom: 0 !important;
 543    font-size: 0;
 544    line-height: initial !important;
 545    transform: translateY(-50%);
 546    visibility: hidden;
 547  }
 548  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair > * {
 549    width: 0px;
 550  }
 551  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::before {
 552    font-size: var(--font-ui-smaller);
 553    opacity: 1;
 554    vertical-align: -1px;
 555    visibility: visible;
 556  }
 557  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line span.code-block-flair::after {
 558    color: var(--code-styler-button-colour);
 559    content: "Copy";
 560    font-size: var(--font-ui-smaller);
 561    opacity: 1;
 562    visibility: visible;
 563  }
 564  .markdown-source-view.mod-cm6 .HyperMD-codeblock-begin.code-styler-line {
 565    overflow: visible;
 566  }
 567  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line .code-styler-comment-link {
 568    display: inline;
 569  }
 570  .markdown-source-view.mod-cm6 .HyperMD-codeblock.code-styler-line .code-styler-comment-link > p {
 571    display: inline;
 572  }
 573  
 574  /* src/css/inlineCode.css */
 575  body {
 576    --code-styler-inline-font-weight: 400;
 577    --code-styler-inline-border-radius: 6px;
 578    --code-styler-inline-padding-vertical: 5px;
 579    --code-styler-inline-padding-horizontal: 5px;
 580    --code-styler-inline-margin-horizontal: 0px;
 581    --code-styler-inline-colour: var(--code-normal);
 582    --code-styler-inline-colour-active: var(--code-normal);
 583    --code-styler-inline-background-colour: var(--code-background);
 584  }
 585  .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-inline-code,
 586  .code-styler.code-styler-style-inline .markdown-rendered :not(pre) > code:not([class*=blur]),
 587  .code-styler.code-styler-style-inline .reveal :not(pre) > code:not([class*=blur]),
 588  .code-styler.code-styler-style-inline code.code-styler-settings-inline-code {
 589    padding: var(--code-styler-inline-padding-vertical) var(--code-styler-inline-padding-horizontal) !important;
 590    border-radius: var(--code-styler-inline-border-radius) !important;
 591    margin: 0px var(--code-styler-inline-margin-horizontal) !important;
 592    background-color: var(--code-styler-inline-background-colour) !important;
 593    color: var(--code-styler-inline-colour);
 594    font-weight: var(--code-styler-inline-font-weight);
 595  }
 596  .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-formatting-code {
 597    display: inline !important;
 598    color: var(--code-styler-inline-colour-active);
 599  }
 600  .code-styler.code-styler-style-inline .cm-s-obsidian span.code-styler-inline-opener ~ span.cm-inline-code:not(.cm-formatting-code) {
 601    padding-left: 0px !important;
 602    border-radius: 0px var(--code-styler-inline-border-radius) var(--code-styler-inline-border-radius) 0px !important;
 603    margin-left: 0px !important;
 604  }
 605  .code-styler.code-styler-style-inline .cm-s-obsidian span.code-styler-inline-opener,
 606  .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-formatting-code:has(+ span.cm-inline-code:not(.cm-formatting-code)) {
 607    padding-right: 0px !important;
 608    padding-left: var(--code-styler-inline-padding-horizontal) !important;
 609    border-radius: var(--code-styler-inline-border-radius) 0px 0px var(--code-styler-inline-border-radius) !important;
 610    margin-right: 0px !important;
 611    margin-left: var(--code-styler-inline-margin-horizontal) !important;
 612    color: var(--code-styler-inline-colour-active);
 613  }
 614  .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-formatting-code + span.cm-inline-code:not(.cm-formatting-code) {
 615    padding-right: 0px !important;
 616    padding-left: 0px !important;
 617    border-radius: 0px !important;
 618    margin: 0px 0px !important;
 619    color: var(--code-styler-inline-colour-active);
 620  }
 621  .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-inline-code:not(.cm-formatting-code) + span.cm-formatting-code {
 622    padding-right: var(--code-styler-inline-padding-horizontal) !important;
 623    padding-left: 0px !important;
 624    border-radius: 0px var(--code-styler-inline-border-radius) var(--code-styler-inline-border-radius) 0px !important;
 625    margin-right: var(--code-styler-inline-margin-horizontal) !important;
 626    margin-left: 0px !important;
 627    color: var(--code-styler-inline-colour-active);
 628  }
 629  body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji]) {
 630    display: inline !important;
 631    height: calc(var(--code-size) * 1.2);
 632    margin-bottom: 2px !important;
 633    vertical-align: middle;
 634  }
 635  .code-styler span.code-styler-inline-opener .code-styler-inline-title {
 636    color: var(--code-styler-inline-title-colour);
 637    font-weight: var(--code-styler-inline-title-font-weight);
 638  }
 639  .code-styler span.code-styler-inline-opener .code-styler-inline-title::after {
 640    color: var(--code-styler-inline-title-color);
 641    content: "\ff5c";
 642  }
 643  .code-styler span.code-styler-inline-opener span:has(> img.code-styler-inline-icon) {
 644    padding-right: 8px;
 645  }
 646  .code-styler .cm-s-obsidian span.cm-inline-code .code-styler-inline-parameters {
 647    color: var(--code-comment);
 648  }
 649  .reveal img.code-styler-inline-icon {
 650    margin: inherit;
 651  }
 652  
 653  /* src/css/frontmatter.css */
 654  .cm-hmd-frontmatter.cm-inline-code,
 655  .cm-hmd-frontmatter.cm-math {
 656    color: var(--code-normal);
 657  }
 658  .cm-hmd-frontmatter.cm-hmd-frontmatter.cm-def.cm-def,
 659  .cm-hmd-frontmatter.cm-comment,
 660  .cm-hmd-frontmatter.cm-meta {
 661    color: var(--code-comment);
 662  }
 663  .cm-hmd-frontmatter.cm-tag {
 664    color: var(--code-tag);
 665  }
 666  .cm-hmd-frontmatter.cm-punctuation,
 667  .cm-hmd-frontmatter.cm-bracket,
 668  .cm-hmd-frontmatter.cm-hr {
 669    color: var(--code-punctuation);
 670  }
 671  .cm-hmd-frontmatter.cm-number {
 672    color: var(--code-value);
 673  }
 674  .cm-hmd-frontmatter.cm-qualifier,
 675  .cm-hmd-frontmatter.cm-string,
 676  .cm-hmd-frontmatter.cm-string-2 {
 677    color: var(--code-string);
 678  }
 679  .cm-hmd-frontmatter.cm-operator {
 680    color: var(--code-operator);
 681  }
 682  .cm-hmd-frontmatter.cm-link,
 683  .cm-hmd-frontmatter.cm-variable,
 684  .cm-hmd-frontmatter.cm-variable-2,
 685  .cm-hmd-frontmatter.cm-variable-3 {
 686    color: var(--code-property);
 687  }
 688  .cm-hmd-frontmatter,
 689  .cm-hmd-frontmatter.cm-builtin,
 690  .cm-hmd-frontmatter.cm-property,
 691  .cm-hmd-frontmatter.cm-attribute,
 692  .cm-hmd-frontmatter.cm-type {
 693    color: var(--code-function);
 694  }
 695  .cm-hmd-frontmatter.cm-keyword {
 696    color: var(--code-keyword);
 697  }
 698  .cm-hmd-frontmatter.cm-atom {
 699    color: var(--code-important);
 700  }
 701  
 702  /* src/css/pdfExport.css */
 703  div.print {
 704    --line-wrapping: pre-wrap !important;
 705  }
 706  .code-styler div.print pre.code-styler-pre code {
 707    max-height: unset !important;
 708  }
 709  .code-styler div.print pre.code-styler-pre.code-styler-folded code {
 710    display: none !important;
 711  }
 712  
 713  /* src/css/pickr.css */
 714  .pickr {
 715    position: relative;
 716    overflow: visible;
 717    transform: translateY(0);
 718  }
 719  .pickr * {
 720    box-sizing: border-box;
 721    border: none;
 722    -webkit-appearance: none;
 723    appearance: none;
 724    outline: none;
 725  }
 726  .pickr .pcr-button {
 727    position: relative;
 728    width: 2em;
 729    height: 2em;
 730    padding: 0.5em;
 731    border-radius: .15em;
 732    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;
 733    background-size: 0;
 734    cursor: pointer;
 735    font-family:
 736      -apple-system,
 737      BlinkMacSystemFont,
 738      "Segoe UI",
 739      "Roboto",
 740      "Helvetica Neue",
 741      Arial,
 742      sans-serif;
 743    transition: all 0.3s;
 744  }
 745  .pickr .pcr-button::before {
 746    position: absolute;
 747    z-index: -1;
 748    top: 0;
 749    left: 0;
 750    width: 100%;
 751    height: 100%;
 752    border-radius: .15em;
 753    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
 754    background-size: .5em;
 755    content: "";
 756  }
 757  .pickr .pcr-button::before {
 758    z-index: initial;
 759  }
 760  .pickr .pcr-button::after {
 761    position: absolute;
 762    top: 0;
 763    left: 0;
 764    width: 100%;
 765    height: 100%;
 766    border-radius: .15em;
 767    background: var(--pcr-color);
 768    content: "";
 769    transition: background 0.3s;
 770  }
 771  .pickr .pcr-button.clear {
 772    background-size: 70%;
 773  }
 774  .pickr .pcr-button.clear::before {
 775    opacity: 0;
 776  }
 777  .pickr .pcr-button.clear:focus {
 778    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color);
 779  }
 780  .pickr .pcr-button.disabled {
 781    cursor: not-allowed;
 782  }
 783  .pickr *,
 784  .pcr-app * {
 785    box-sizing: border-box;
 786    border: none;
 787    -webkit-appearance: none;
 788    appearance: none;
 789    outline: none;
 790  }
 791  .pickr input:focus,
 792  .pickr input.pcr-active,
 793  .pickr button:focus,
 794  .pickr button.pcr-active,
 795  .pcr-app input:focus,
 796  .pcr-app input.pcr-active,
 797  .pcr-app button:focus,
 798  .pcr-app button.pcr-active {
 799    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px var(--pcr-color);
 800  }
 801  .pickr .pcr-palette,
 802  .pickr .pcr-slider,
 803  .pcr-app .pcr-palette,
 804  .pcr-app .pcr-slider {
 805    transition: box-shadow 0.3s;
 806  }
 807  .pickr .pcr-palette:focus,
 808  .pickr .pcr-slider:focus,
 809  .pcr-app .pcr-palette:focus,
 810  .pcr-app .pcr-slider:focus {
 811    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(0, 0, 0, 0.25);
 812  }
 813  .pcr-app {
 814    position: fixed;
 815    z-index: 10000;
 816    top: 0;
 817    left: 0;
 818    display: flex;
 819    flex-direction: column;
 820    border-radius: 0.1em;
 821    background: #fff;
 822    box-shadow: 0 0.15em 1.5em 0 rgba(0, 0, 0, 0.1), 0 0 1em 0 rgba(0, 0, 0, 0.03);
 823    font-family:
 824      -apple-system,
 825      BlinkMacSystemFont,
 826      "Segoe UI",
 827      "Roboto",
 828      "Helvetica Neue",
 829      Arial,
 830      sans-serif;
 831    opacity: 0;
 832    transition: opacity 0.3s, visibility 0s 0.3s;
 833    visibility: hidden;
 834  }
 835  .pcr-app.visible {
 836    opacity: 1;
 837    transition: opacity 0.3s;
 838    visibility: visible;
 839  }
 840  .pcr-app .pcr-swatches {
 841    display: flex;
 842    flex-wrap: wrap;
 843    margin-top: 0.75em;
 844  }
 845  .pcr-app .pcr-swatches.pcr-last {
 846    margin: 0;
 847  }
 848  @supports (display: grid) {
 849    .pcr-app .pcr-swatches {
 850      display: grid;
 851      align-items: center;
 852      grid-template-columns: repeat(auto-fit, 1.75em);
 853    }
 854  }
 855  .pcr-app .pcr-swatches > button {
 856    position: relative;
 857    z-index: 1;
 858    overflow: hidden;
 859    width: calc(1.75em - 10px);
 860    height: calc(1.75em - 10px);
 861    flex-shrink: 0;
 862    border-radius: 0.15em;
 863    margin: 2.5px;
 864    background: transparent;
 865    cursor: pointer;
 866    font-size: 1em;
 867    justify-self: center;
 868    transition: all 0.15s;
 869  }
 870  .pcr-app .pcr-swatches > button::before {
 871    position: absolute;
 872    z-index: -1;
 873    top: 0;
 874    left: 0;
 875    width: 100%;
 876    height: 100%;
 877    border-radius: .15em;
 878    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
 879    background-size: 6px;
 880    content: "";
 881  }
 882  .pcr-app .pcr-swatches > button::after {
 883    position: absolute;
 884    top: 0;
 885    left: 0;
 886    width: 100%;
 887    height: 100%;
 888    box-sizing: border-box;
 889    border: 1px solid rgba(0, 0, 0, 0.05);
 890    border-radius: 0.15em;
 891    background: var(--pcr-color);
 892    content: "";
 893  }
 894  .pcr-app .pcr-swatches > button:hover {
 895    filter: brightness(1.05);
 896  }
 897  .pcr-app .pcr-swatches > button:not(.pcr-active) {
 898    box-shadow: none;
 899  }
 900  .pcr-app .pcr-interaction {
 901    display: flex;
 902    flex-wrap: wrap;
 903    align-items: center;
 904    margin: 0 -0.2em 0 -0.2em;
 905  }
 906  .pcr-app .pcr-interaction > * {
 907    margin: 0 0.2em;
 908  }
 909  .pcr-app .pcr-interaction input {
 910    padding: 0.45em 0.5em;
 911    border-radius: .15em;
 912    margin-top: 0.75em;
 913    background: #f1f3f4;
 914    color: #75797e;
 915    cursor: pointer;
 916    font-size: 0.75em;
 917    letter-spacing: 0.07em;
 918    text-align: center;
 919    transition: all 0.15s;
 920  }
 921  .pcr-app .pcr-interaction input:hover {
 922    filter: brightness(0.975);
 923  }
 924  .pcr-app .pcr-interaction input:focus {
 925    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(66, 133, 244, 0.75);
 926  }
 927  .pcr-app .pcr-interaction .pcr-result {
 928    min-width: 8em;
 929    flex: 1 1 8em;
 930    border-radius: .15em;
 931    background: #f1f3f4;
 932    color: #75797e;
 933    cursor: text;
 934    text-align: left;
 935    transition: all 0.2s;
 936  }
 937  .pcr-app .pcr-interaction .pcr-result::-moz-selection {
 938    background: #4285f4;
 939    color: #fff;
 940  }
 941  .pcr-app .pcr-interaction .pcr-result::selection {
 942    background: #4285f4;
 943    color: #fff;
 944  }
 945  .pcr-app .pcr-interaction .pcr-type.active {
 946    background: #4285f4;
 947    color: #fff;
 948  }
 949  .pcr-app .pcr-interaction .pcr-save,
 950  .pcr-app .pcr-interaction .pcr-cancel,
 951  .pcr-app .pcr-interaction .pcr-clear {
 952    width: auto;
 953    color: #fff;
 954  }
 955  .pcr-app .pcr-interaction .pcr-save,
 956  .pcr-app .pcr-interaction .pcr-cancel,
 957  .pcr-app .pcr-interaction .pcr-clear {
 958    color: #fff;
 959  }
 960  .pcr-app .pcr-interaction .pcr-save:hover,
 961  .pcr-app .pcr-interaction .pcr-cancel:hover,
 962  .pcr-app .pcr-interaction .pcr-clear:hover {
 963    filter: brightness(0.925);
 964  }
 965  .pcr-app .pcr-interaction .pcr-save {
 966    background: #4285f4;
 967  }
 968  .pcr-app .pcr-interaction .pcr-clear,
 969  .pcr-app .pcr-interaction .pcr-cancel {
 970    background: #f44250;
 971  }
 972  .pcr-app .pcr-interaction .pcr-clear:focus,
 973  .pcr-app .pcr-interaction .pcr-cancel:focus {
 974    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 3px rgba(244, 66, 80, 0.75);
 975  }
 976  .pcr-app .pcr-selection .pcr-picker {
 977    position: absolute;
 978    width: 18px;
 979    height: 18px;
 980    border: 2px solid #fff;
 981    border-radius: 100%;
 982    -webkit-user-select: none;
 983    -moz-user-select: none;
 984    -ms-user-select: none;
 985    user-select: none;
 986  }
 987  .pcr-app .pcr-selection .pcr-color-palette,
 988  .pcr-app .pcr-selection .pcr-color-chooser,
 989  .pcr-app .pcr-selection .pcr-color-opacity {
 990    position: relative;
 991    display: flex;
 992    flex-direction: column;
 993    cursor: grab;
 994    cursor: -webkit-grab;
 995    -webkit-user-select: none;
 996    -moz-user-select: none;
 997    -ms-user-select: none;
 998    user-select: none;
 999  }
1000  .pcr-app .pcr-selection .pcr-color-palette:active,
1001  .pcr-app .pcr-selection .pcr-color-chooser:active,
1002  .pcr-app .pcr-selection .pcr-color-opacity:active {
1003    cursor: grabbing;
1004    cursor: -webkit-grabbing;
1005  }
1006  .pcr-app[data-theme=nano] {
1007    width: 14.25em;
1008    max-width: 95vw;
1009  }
1010  .pcr-app[data-theme=nano] .pcr-swatches {
1011    padding: 0 .6em;
1012    margin-top: .6em;
1013  }
1014  .pcr-app[data-theme=nano] .pcr-interaction {
1015    padding: 0 .6em .6em .6em;
1016  }
1017  .pcr-app[data-theme=nano] .pcr-selection {
1018    display: grid;
1019    width: 100%;
1020    height: 10.5em;
1021    align-items: center;
1022    align-self: flex-start;
1023    grid-gap: .6em;
1024    grid-template-columns: 1fr 4fr;
1025    grid-template-rows: 5fr auto auto;
1026  }
1027  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview {
1028    display: flex;
1029    width: 100%;
1030    height: 100%;
1031    flex-direction: row;
1032    justify-content: center;
1033    margin-left: .6em;
1034    grid-area: 2 / 1 / 4 / 1;
1035  }
1036  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color {
1037    display: none;
1038  }
1039  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color {
1040    position: relative;
1041    overflow: hidden;
1042    width: 2em;
1043    height: 2em;
1044    border-radius: 50em;
1045    background: var(--pcr-color);
1046  }
1047  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color::before {
1048    position: absolute;
1049    z-index: -1;
1050    top: 0;
1051    left: 0;
1052    width: 100%;
1053    height: 100%;
1054    border-radius: .15em;
1055    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
1056    background-size: .5em;
1057    content: "";
1058  }
1059  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette {
1060    z-index: 1;
1061    width: 100%;
1062    height: 100%;
1063    grid-area: 1 / 1 / 2 / 3;
1064  }
1065  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette {
1066    width: 100%;
1067    height: 100%;
1068    border-radius: .15em;
1069  }
1070  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette::before {
1071    position: absolute;
1072    z-index: -1;
1073    top: 0;
1074    left: 0;
1075    width: 100%;
1076    height: 100%;
1077    border-radius: .15em;
1078    background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
1079    background-size: .5em;
1080    content: "";
1081  }
1082  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser {
1083    grid-area: 2 / 2 / 2 / 2;
1084  }
1085  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
1086    grid-area: 3 / 2 / 3 / 2;
1087  }
1088  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,
1089  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity {
1090    height: 0.5em;
1091    margin: 0 .6em;
1092  }
1093  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,
1094  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker {
1095    top: 50%;
1096    transform: translateY(-50%);
1097  }
1098  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,
1099  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
1100    flex-grow: 1;
1101    border-radius: 50em;
1102  }
1103  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider {
1104    background: linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red);
1105  }
1106  .pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider {
1107    background: linear-gradient(to right, transparent, black), url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');
1108    background-size: 100%, 0.25em;
1109  }
1110  .pcr-app .pcr-swatches > button {
1111    padding: 0;
1112  }
1113  
1114  /* src/css/settings.css */
1115  .setting-item.code-styler-spaced .checkbox-container + .pickr {
1116    padding-left: 10px;
1117  }
1118  .code-styler-donation {
1119    width: 70%;
1120    margin: 0 auto;
1121    text-align: center;
1122  }
1123  .code-styler-setting-text-area textarea {
1124    width: 400px;
1125    height: 220px;
1126  }
1127  .code-styler-setting-text-wide {
1128    width: 100%;
1129  }
1130  button.code-styler-settings-button.copy-code-button {
1131    position: absolute;
1132    right: 0;
1133    height: auto;
1134  }
1135  code.code-styler-settings-inline-code {
1136    padding: 0.1em 0.25em;
1137    border-radius: var(--code-radius);
1138    background-color: var(--code-background);
1139    color: var(--code-normal);
1140    font-family: var(--font-monospace);
1141    font-size: var(--code-size);
1142  }
1143  p:has(> code.code-styler-settings-inline-code) {
1144    text-align: center;
1145  }
1146  .advanced-settings-header::after {
1147    position: relative;
1148    display: inline-block;
1149    width: 20px;
1150    height: 20px;
1151    margin: auto;
1152    margin-left: 4px;
1153    background-color: var(--code-styler-button-colour);
1154    content: "\200b";
1155    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'%3E%3Cpath d='M16 22 6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z'/%3E%3C/svg%3E");
1156    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
1157    -webkit-mask-repeat: no-repeat;
1158    mask-repeat: no-repeat;
1159    opacity: 1;
1160    scale: 0.9;
1161    transition:
1162      transform var(--duration-button) ease-out,
1163      visibility var(--duration-button),
1164      opacity var(--duration-button),
1165      scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
1166    visibility: visible;
1167  }
1168  .advanced-settings-header.header-folded::after {
1169    transform: rotate(-90deg);
1170  }
1171  
1172  /* src/css/pluginCompatibility.css */
1173  pre.code-styler-pre code ~ code.language-output {
1174    display: block;
1175    padding-bottom: calc(2.5 * var(--code-padding)) !important;
1176    padding-left: calc(var(--line-number-gutter-padding)) !important;
1177    border-top: var(--header-separator-width) solid var(--code-styler-header-separator-colour);
1178    margin-bottom: 0;
1179  }
1180  pre.code-styler-pre.code-styler-folded code ~ code.language-output {
1181    border-top-width: 0;
1182    border-top-color: transparent;
1183  }
1184  pre.code-styler-pre:hover code ~ code.language-output {
1185    margin-bottom: 0;
1186  }
1187  pre.code-styler-pre code ~ code.language-output input.interactive-stdin {
1188    padding: 2px 8px;
1189    border-width: 1px;
1190    border-style: solid;
1191    border-color: var(--code-comment);
1192    border-radius: 5px;
1193    background-color: var(--code-styler-codeblock-background-colour);
1194    color: var(--text-normal);
1195  }
1196  pre.code-styler-pre code ~ code.language-output hr {
1197    display: none;
1198  }
1199  pre.code-styler-pre button.run-code-button {
1200    --copy-code-header-right-margin: 12px;
1201    --dent-difference: 24px;
1202    height: 14px;
1203    margin-bottom: 6px !important;
1204  }
1205  pre.code-styler-pre.code-styler-folded button.run-code-button {
1206    top: 500px;
1207  }
1208  pre.code-styler-pre button.run-code-button::before {
1209    display: inline-block;
1210    width: 14px;
1211    height: 14px;
1212    padding-right: 4px;
1213    background-color: var(--code-styler-button-colour);
1214    content: "\200b";
1215    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='&lt;Transparent Rectangle&gt;'/%3E%3C/svg%3E");
1216    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28Z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='&lt;Transparent Rectangle&gt;'/%3E%3C/svg%3E");
1217    -webkit-mask-repeat: no-repeat;
1218    mask-repeat: no-repeat;
1219    vertical-align: 0px;
1220  }
1221  pre.code-styler-pre button.clear-button-disabled,
1222  pre.code-styler-pre button.run-button-disabled {
1223    display: none !important;
1224  }
1225  pre.code-styler-pre button.clear-button {
1226    height: 14px;
1227    margin-bottom: 6px !important;
1228    margin-left: calc(var(--language-border-width) + 12px);
1229    clip-path: var(--polygon-in);
1230    will-change: margin-right, clip-path;
1231  }
1232  pre.code-styler-pre button.clear-button::before {
1233    display: inline-block;
1234    width: 14px;
1235    height: 14px;
1236    padding-right: 4px;
1237    background-color: var(--code-styler-button-colour);
1238    content: "\200b";
1239    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14 16 4z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='&lt;Transparent Rectangle&gt;'/%3E%3C/svg%3E");
1240    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4 6 14l1.41 1.41L15 7.83V28h2V7.83l7.59 7.58L26 14 16 4z'/%3E%3Cpath fill='none' d='M0 0h32v32H0z' data-name='&lt;Transparent Rectangle&gt;'/%3E%3C/svg%3E");
1241    -webkit-mask-repeat: no-repeat;
1242    mask-repeat: no-repeat;
1243    vertical-align: 0px;
1244  }
1245  pre.code-styler-pre button.clear-button:not(:active) {
1246    animation: reverse-indent var(--duration-button);
1247  }
1248  pre.code-styler-pre button.clear-button:hover {
1249    margin-right: var(--copy-code-header-right-margin);
1250    animation: reverse-outdent var(--duration-button);
1251    background-color: transparent;
1252    clip-path: var(--polygon-out);
1253  }
1254  pre.code-styler-pre button.clear-button:active {
1255    scale: 0.95;
1256    transition: scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1);
1257  }
1258  .code-styler-pre-parent.has-run-code-button .load-state-indicator {
1259    z-index: 10;
1260    background: none;
1261    color: none;
1262  }
1263  .code-styler-pre-parent.has-run-code-button .load-state-indicator::before {
1264    box-shadow: none;
1265  }
1266  .code-styler-pre-parent.has-run-code-button .load-state-indicator svg {
1267    color: var(--code-styler-button-colour);
1268  }
1269  .code-styler-pre-parent.has-run-code-button .load-state-indicator svg:hover {
1270    color: var(--code-styler-button-active-colour);
1271  }
1272  .code-styler-pre-parent.has-run-code-button .load-state-indicator.visible {
1273    transform: translateX(0);
1274  }
1275  .block-language-preview pre.code-styler-pre code {
1276    white-space: unset;
1277  }
1278  pre.code-styler-pre span.code-block-line_num-wrap,
1279  pre.code-styler-pre div.code-block-highlight-wrap {
1280    display: none;
1281  }
1282  .markdown-source-view.mod-cm6 .cm-embed-block .code-styler-pre-parent + .edit-block-button::after {
1283    padding-left: 4px;
1284    content: "Edit Block";
1285    font-size: var(--font-ui-smaller);
1286  }
1287  .markdown-source-view.mod-cm6 .cm-embed-block:not(:hover) .code-styler-pre-parent + .edit-block-button {
1288    opacity: 0;
1289    visibility: hidden;
1290  }
1291  .markdown-source-view.mod-cm6 .cm-embed-block > .code-styler-pre-parent + .edit-block-button {
1292    --copy-code-header-right-margin: calc(2.2 * var(--header-button-spacing));
1293    --dent-difference: 0px;
1294    --polygon-in: polygon(0 0, 18px 0, 18px 36px, 0 36px);
1295    z-index: 10;
1296    top: max(calc(0.5 * var(--container-height) * 1), calc(0.5 * var(--container-min-height) * 1));
1297    padding: 0 !important;
1298    margin: 0;
1299    margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
1300    background-color: transparent !important;
1301    clip-path: var(--polygon-in);
1302    opacity: 1;
1303    transform: translateY(-50%);
1304    transition: visibility var(--duration-button), opacity var(--duration-button) !important;
1305    visibility: visible;
1306    will-change: margin-right, clip-path;
1307  }
1308  .markdown-source-view.mod-cm6.is-live-preview.is-readable-line-width .cm-embed-block > .code-styler-pre-parent + .edit-block-button {
1309    width: unset !important;
1310    padding-left: 0 !important;
1311  }
1312  body .cm-embed-block .code-styler-pre-parent:has(pre.code-styler-pre .code-styler-header-container-hidden) + .edit-block-button {
1313    --copy-code-header-right-margin: 4px;
1314    top: calc(0.5 * var(--font-text-size) * 0.875 * var(--line-height-normal));
1315  }
1316  .markdown-source-view.mod-cm6 .cm-embed-block:hover .code-styler-pre-parent + .edit-block-button:hover {
1317    margin-right: var(--copy-code-header-right-margin);
1318    animation: reverse-outdent var(--duration-button);
1319    background: transparent;
1320    clip-path: var(--polygon-out);
1321  }
1322  .markdown-source-view.mod-cm6 .cm-embed-block:hover .code-styler-pre-parent + .edit-block-button:active {
1323    scale: 0.95;
1324    transition: scale var(--duration-button) cubic-bezier(0.4, 0.14, 0.3, 1) !important;
1325  }
1326  div.block-language-include pre.code-styler-pre button.copy-code-button {
1327    margin: 0;
1328    margin-right: calc(var(--copy-code-header-right-margin) - var(--dent-difference));
1329  }
1330  div.block-language-include pre.code-styler-pre button.copy-code-button:hover {
1331    margin-right: var(--copy-code-header-right-margin);
1332  }
1333  .slides button.copy-code-button {
1334    position: absolute;
1335    top: 0;
1336    right: 0;
1337    height: auto;
1338    padding: 6px 8px;
1339    margin: 6px;
1340    background-color: transparent;
1341    box-shadow: none;
1342    color: var(--text-muted);
1343    font-family: var(--font-interface);
1344    font-size: var(--font-ui-smaller);
1345  }
1346  
1347  /* src/styles.css */
1348  /*! Complicated */