/* ==UserStyle==
@name Trinket Catppuccin
@namespace github.com/catppuccin/userstyles/styles/trinket
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/trinket
@version 2025.09.06
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/trinket/catppuccin.user.less
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Atrinket
@description Soothing pastel theme for Trinket
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */

@import "https://userstyles.catppuccin.com/lib/lib.less";

@-moz-document domain("trinket.io") {
  @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css");

  :root {
    @media (prefers-color-scheme: light) {
      #catppuccin(@lightFlavor);
    }
    @media (prefers-color-scheme: dark) {
      #catppuccin(@darkFlavor);
    }
  }

  #catppuccin(@flavor) {
    #lib.palette();
    #lib.defaults();
    #lib.css-variables();

    .ace_editor {
      background-color: @crust;
      color: @text;

      .ace_gutter {
        background: @mantle;
        color: @overlay1;
      }
      .ace_print-margin {
        background: @mantle;
      }

      .ace_marker-layer {
        .ace_active-line {
          background-color: fade(@yellow, 20%);
        }
        .highlight-line-error {
          background-color: fade(@red, 20%);
        }
        .ace_bracket {
          border-color: @overlay1;
        }
      }

      .ace_cursor {
        color: @text;
      }
      .ace_marker-layer .ace_selection {
        background: fade(@accent, 30%);
      }
      .ace_fold {
        background-color: @surface0;
        border-color: @surface1;
      }

      .ace_constant.ace_language,
      .ace_keyword,
      .ace_meta,
      .ace_variable.ace_language {
        color: @mauve;
      }
      .ace_line .ace_identifier:not(:first-of-type) {
        color: @blue;
      }
      .ace_paren {
        color: @red;
      }
      .ace_constant.ace_numeric {
        color: @peach;
      }
      .ace_entity.ace_other.ace_attribute-name,
      .ace_support.ace_constant,
      .ace_support.ace_function {
        color: @teal;
      }
      .ace_entity.ace_name.ace_tag,
      .ace_support.ace_class,
      .ace_support.ace_type {
        color: @blue;
      }
      .ace_storage {
        color: @peach;
      }
      .ace_string {
        color: @green;
      }
      .ace_comment {
        color: @overlay2;
      }

      .ace_indent-guide {
        @svg: escape(
          '<svg width="1" height="2" xmlns="http://www.w3.org/2000/svg"><path stroke="@{surface0}" d="M0 0v2"/></svg>'
        );

        background-image: url("data:image/svg+xml;utf8,@{svg}");
      }
    }

    #ace_settingsmenu {
      background-color: @mantle !important;
      box-shadow: none !important;
      color: @subtext0;
    }

    body {
      background-color: @base !important;
      color: @text !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: @text !important;
    }

    a {
      color: @accent;
      text-decoration-color: @accent;

      &:hover {
        color: @accent;
      }
    }

    hr,
    fieldset {
      border-color: @surface0 !important;
    }

    footer {
      border-top-color: @surface0 !important;
      background-color: @mantle !important;
    }

    code {
      background-color: @mantle !important;
      color: @text !important;
    }

    select {
      background-color: @crust !important;
      border-color: @surface0 !important;
      color: @text !important;
    }

    iframe[frameborder] {
      border-color: @surface0 !important;
    }

    label {
      color: @subtext0 !important;
    }

    table {
      background-color: @base !important;
      border-color: @surface0 !important;

      th,
      td {
        color: @text !important;
      }

      tr.even,
      tr.alt,
      tr:nth-of-type(2n) {
        background-color: @mantle !important;
      }

      thead {
        background-color: @mantle !important;
      }
    }

    input,
    textarea {
      background-color: @crust !important;
      color: @text !important;
      border-color: @surface0 !important;
    }

    textarea.lined {
      background-color: @base !important;
    }

    path[fill="#444444"] {
      fill: @text !important;
    }

    pre {
      border-color: @surface0 !important;
      background-color: @mantle !important;
    }

    #page.hfeed a:hover {
      border-bottom-color: @accent !important;
    }

    .author-section {
      box-shadow: none !important;
    }

    .code-editor .expander {
      background-image: linear-gradient(
        to right,
        fade(@mantle, 0%),
        @mantle 50%
      ) !important;
    }

    .sidebar-content a:hover {
      color: @accent !important;
    }

    .progress {
      border-color: @surface0 !important;
      background-color: @crust !important;
      color: @base !important;
    }

    .sidebar {
      box-shadow: 1px 0 15px fade(@crust, 50%) !important;
      background-color: @base !important;
    }

    .sidebar-top {
      background-color: @base !important;
      border-bottom-color: @surface0 !important;
    }

    .meter.green {
      background-color: @green !important;
    }

    .file-upload {
      background-color: @crust !important;
      border-color: @surface0 !important;
      color: @text !important;
    }

    .notifyjs-foundation-success,
    .alert-box.success {
      color: @base !important;
      background-color: @green !important;
      border-color: @green !important;
    }

    .alert-box.alert,
    .alert-box.code-error {
      color: @base !important;
      background-color: @red !important;
      border-color: @red !important;
    }

    .lineno,
    article .categories,
    article .date,
    article .date a {
      color: @subtext0 !important;

      &a:hover {
        color: @accent !important;
      }
    }

    .linedwrap .lines {
      border-right-color: @surface0;
    }

    .codelines {
      background-color: @mantle !important;
    }

    span.beta {
      color: @accent !important;
    }

    .resources a {
      color: @text !important;

      &:hover .book-item {
        box-shadow: 0 0 15px @surface0 !important;
      }
    }

    #trinket-gallery #trinketDetails a.closer {
      border-color: @surface0 !important;
      background-color: @crust !important;
    }

    .panel {
      background-color: @crust !important;
      color: @text !important;
      border-color: @surface0 !important;

      li {
        color: @subtext0 !important;
      }
    }

    .code-plan-colors,
    .code-label,
    .code-name,
    .codeplus-plan-colors,
    .codeplus-label,
    .codeplus-name,
    .connect-plan-colors,
    .connect-label,
    .connect-name,
    .classroom-plan-colors,
    .classroom-label,
    .classroom-name,
    i.trinket-key.logo {
      background-color: @accent !important;
      color: @base !important;
    }

    .code-plan-colors-inverted,
    .connect-plan-colors-inverted,
    .classroom-plan-colors-inverted {
      color: @accent;
    }

    .nav-wrapper,
    .entry-footer {
      border-bottom-color: @surface0 !important;
    }

    .top-bar,
    .top-bar-section ul li,
    .top-bar-section li:not(.has-form) a:not(.button, .faux-button),
    .name {
      background-color: @crust !important;
    }

    .top-bar-section li:not(.has-form) a:not(.button, .faux-button):hover {
      background-color: @mantle !important;
    }

    .angular-ui-tree-placeholder {
      background-color: @base !important;
      border-color: @surface0 !important;
    }

    .editable-click:hover,
    a.editable-click:hover {
      color: @accent !important;
    }

    .outline-list-item.lesson {
      border-bottom-color: @surface0 !important;
    }

    .intercom-namespace .intercom-o8wqhy {
      box-shadow: none;
    }

    .intercom-lightweight-app-launcher-icon-open svg path {
      fill: @base !important;
    }

    .intercom-lightweight-app-launcher {
      background-color: @accent !important;
    }

    .edit-material-title:hover {
      background-color: @crust !important;
    }

    a.dashboard-actions-link,
    a.edit-lesson-actions-link,
    a.edit-material-actions-link {
      i {
        color: @text !important;
      }

      &:hover {
        background-color: @mantle !important;
      }
    }

    .dashboard-content.dashboard-list {
      .submission-row,
      .user-row {
        border-bottom-color: @surface0 !important;

        &:not(.row-open):hover {
          background-color: @mantle !important;
        }
      }
    }

    .dashboard-content .material-row .material-name span {
      color: @text !important;
    }

    .chart-wrapper {
      background-color: @base !important;
    }

    .chart-segment {
      span {
        color: @base !important;
      }

      &.completed {
        background-color: @green !important;
      }

      &.submitted {
        background-color: @blue !important;
      }

      &.started {
        background-color: @yellow !important;
      }

      &.not-started {
        background-color: @text !important;
        background-image: repeating-linear-gradient(
          135deg,
          @subtext1,
          @subtext1 10px,
          transparent 10px,
          transparent 30px
        ) !important;
      }
    }

    .outline-list {
      background-color: @mantle !important;
    }

    .outline-list-item.angular-ui-tree-node.isDraft {
      background-image: repeating-linear-gradient(
        45deg,
        @base,
        @base 10px,
        transparent 10px,
        transparent 20px
      ) !important;
    }

    .top-bar .toggle-topbar.menu-icon a {
      color: @text !important;
    }

    .top-bar.expanded .toggle-topbar a span::after {
      box-shadow: 0 0 0 1px @text, 0 7px 0 1px @text, 0 14px 0 1px @text;
    }

    .button.dropdown-blue::after {
      border-top-color: @text !important;
    }

    .top-bar-section .title h5 a {
      color: @text !important;
    }

    .update-row {
      border-top-color: @surface2 !important;
    }

    .top-bar-section .divider {
      border-top-color: @surface0 !important;
    }

    nav.top-bar .top-bar-section .dropdown,
    nav.top-bar .top-bar-section body.course .dropdown-blue,
    body.course nav.top-bar .top-bar-section .dropdown-blue {
      border-color: @surface0 !important;
    }

    .content-heading {
      background-color: @mantle !important;
    }

    .top-bar-section ul li > a,
    #userdata,
    .subheader,
    .green-highlight:not(.disabled) > *,
    .tab-scroll-link,
    .closer,
    .entry-title a,
    .jqconsole-prompt,
    .jqconsole-old-prompt {
      color: @text !important;
    }

    .top-bar-section .has-dropdown > a::after {
      border-top-color: @text !important;
    }

    #loadingContent {
      background-color: @base !important;
    }

    .fa-spinner {
      color: @text !important;
    }

    button,
    .button,
    .faux-button {
      background-color: @crust !important;
      color: @text !important;
      border-color: @surface0 !important;

      &:hover {
        background-color: @mantle !important;
      }

      &:not(.disabled) {
        &.secondary,
        &.success {
          background-color: @surface0 !important;
          color: @text !important;
          border-color: @surface0 !important;

          // the :not() adds specificity to override the `!important` in the default styles
          &:hover:not(.disabled) {
            background-color: @green !important;
            color: @base !important;
            border-color: @surface0 !important;
          }
        }

        &.danger {
          background-color: @red !important;
          border-color: @red !important;
          color: @base !important;

          &:hover {
            background-color: darken(@red, 5%) !important;
          }
        }

        &.caution {
          border-color: @red !important;
          color: @red;

          &:hover {
            background-color: fade(@red, 40%) !important;
          }
        }
      }

      &#sidebar-link,
      &#sidebar-close {
        background-color: @base !important;
      }
    }

    .site-header {
      border-bottom-color: @surface0 !important;
    }

    .menu-icon {
      fill: @text !important;
    }

    .draft-message,
    .broadcast-message {
      color: @subtext0 !important;
    }

    .color-swatch {
      color: @surface0 !important;
    }

    #embed-documentation dd,
    dl#documentation dd {
      &,
      .methodHeader,
      .methodDocs {
        border-color: @surface0 !important;

        pre {
          background-color: @base !important;
        }
      }

      .methodHeader {
        background-color: @crust !important;
      }

      &.active a {
        border-bottom-color: @surface0 !important;
      }
    }

    .switch {
      label {
        background-color: @crust !important;

        &::after {
          background-color: @text !important;
        }
      }

      input:checked + label {
        background-color: @accent !important;

        &::after {
          background-color: @base !important;
        }
      }
    }

    .accordion {
      dd > a {
        background-color: @mantle !important;
        color: @text !important;
      }

      dd > .content.active {
        background-color: @mantle !important;
      }
    }

    .icon-bar {
      background-color: @base !important;

      > a {
        background-color: @crust !important;
      }

      > a:hover {
        background-color: @mantle !important;
      }

      .item,
      > * i {
        color: @text !important;
      }
    }

    .exit-off-canvas {
      box-shadow: -4px 0 4px @surface0, 4px 0 4px @surface0 !important;
      background-color: fade(@base, 50%) !important;
    }

    #trinket-gallery #trinketDetails .spotlight {
      background-color: fade(@base, 50%) !important;
    }

    .right-off-canvas-menu,
    .left-off-canvas-menu {
      background-color: @base !important;
    }

    .tab-nav {
      border-bottom-color: @base !important;

      .menu-button {
        background-color: @base !important;
        color: @text !important;
      }

      .tab {
        background-color: @crust !important;
        border-color: @surface0 !important;
        border-top-color: @crust !important;
        box-shadow: none !important;

        i.warning {
          color: @red !important;
        }

        a {
          color: @text !important;
        }

        &.active {
          background-color: @surface0 !important;

          span {
            background-color: @surface0 !important;
          }
        }
      }
    }

    .side-nav {
      border-color: @surface0 !important;

      li {
        border-top-color: @surface2 !important;
      }

      a {
        color: @accent !important;

        &.active {
          color: @text !important;
        }
      }
    }

    li.side-nav-heading {
      background-color: @mantle !important;
    }

    .decorated > span {
      &::before,
      &::after {
        border-bottom-color: @surface0;
      }
    }

    .tab-options,
    .f-dropdown.open {
      background-color: @base !important;
      border-color: @surface0 !important;

      &::before,
      &::after {
        border-bottom-color: @crust !important;
      }

      a {
        background-color: @crust !important;
        color: @text !important;
      }
    }

    .reveal-modal {
      background-color: @base !important;
      border-color: @surface0 !important;
      box-shadow: none !important;

      .close-reveal-modal {
        color: @subtext0 !important;
      }
    }

    ul.off-canvas-list li {
      a {
        border-bottom-color: @surface0 !important;
        color: @text !important;
        background-color: @base !important;
      }

      a:hover {
        background-color: @mantle !important;
      }

      label {
        background-color: @mantle !important;
        border-top-color: @surface0 !important;
        color: @subtext0 !important;
      }
    }

    .faux-input {
      background-color: @crust !important;
      border-color: @surface0 !important;
      box-shadow: none !important;
      color: @text !important;
    }

    .label:not(.last-saved) {
      background-color: @accent !important;
      color: @base !important;
    }

    .last-saved {
      color: @subtext0 !important;
    }

    .code-editor .info-area {
      border-top-color: @surface0 !important;
      background-color: @base !important;
      color: @text !important;
    }

    .injectionDiv {
      color: initial !important;
    }

    .pricing-table {
      border-color: @surface0 !important;

      .cta-button {
        background-color: @base !important;
      }

      .price {
        background-color: @base !important;
        color: @text !important;
      }

      .title {
        background-color: @mantle !important;
      }

      .description,
      .bullet-item {
        background-color: @base !important;
        color: @text !important;
        border-bottom-color: @surface2 !important;

        p {
          color: @subtext0 !important;
        }
      }
    }

    .blue-highlight:not(.disabled) {
      background-color: @accent !important;

      &,
      i.fa,
      label {
        color: @base !important;
      }
    }

    .featured-course-list li {
      border-color: @surface0 !important;
    }

    .course-title {
      background-color: @mantle !important;
      border-bottom-color: @surface0 !important;

      a {
        color: @text !important;
      }
    }

    .course-list li {
      border-color: @surface0 !important;

      &:hover {
        background-color: @mantle !important;
      }
    }

    .library-subnav {
      border-bottom-color: @surface0 !important;
    }

    .trinket-last-date {
      color: @subtext0 !important;
    }

    .fa {
      &.neutral {
        color: @subtext0 !important;
      }

      &.success {
        color: @green !important;
      }

      &.alert,
      &.caution {
        color: @red !important;
      }
    }

    .shared-modal ul#my-folders-list li.folder-item {
      border-top-color: @surface0 !important;
    }

    .trinket-stat .badge {
      background-color: @accent !important;
      background-image: none !important;
      color: @base !important;
    }

    .editable-empty {
      color: @subtext0 !important;
    }

    .breadcrumbs {
      background-color: @mantle !important;
      border-color: @surface0 !important;

      .editable {
        border-bottom-color: @subtext0 !important;

        &:hover {
          color: @accent !important;
        }
      }

      > .current {
        color: @text !important;
      }
    }

    .jqconsole-header {
      color: @subtext0 !important;
    }

    .jqconsole-output:not(.error) {
      color: @subtext1 !important;
    }

    .jqconsole-output.error,
    .jqconsole-error {
      background-color: @red !important;
      color: @base !important;
    }

    .draft-circle {
      background-color: @accent !important;
    }

    .MathJax_Preview {
      color: @subtext0 !important;
    }

    [data-magellan-expedition],
    [data-magellan-expedition-clone] {
      background-color: @base !important;
    }

    #trinkets-list,
    .trinkets-list {
      > li {
        border-color: @surface0 !important;
        box-shadow: none;
      }

      > li .snapshot .title {
        background-color: unset !important;
        border-top-color: @surface0 !important;
      }

      .dragging-trinket {
        background-color: @crust !important;
        border-color: @surface0 !important;
        color: @subtext0 !important;
      }
    }

    #sidebar-link:hover,
    #sidebar-close:hover {
      opacity: 100% !important;
    }

    #search-2 input {
      &,
      &:hover,
      &:focus {
        background-color: @crust !important;
        color: @text !important;
        border-color: @surface0 !important;
      }
    }

    #material-edit .toolbar {
      background-color: @mantle;
      border-top-color: @surface0;
      border-bottom-color: @surface0;
    }

    #outline {
      background-color: @mantle !important;
      border-right-color: @surface0 !important;

      ul {
        background-color: @mantle !important;
      }

      .outline-list-item.material.current {
        background-color: @crust !important;
        color: @text !important;
      }

      .info,
      .outline-list-item.lesson {
        border-bottom-color: @surface0 !important;
      }
    }

    #outline-expander {
      background-color: @accent !important;
      color: @base !important;
    }

    #class-progress {
      background-color: @surface0 !important;

      .percentage {
        background-color: @accent !important;
      }
    }

    #course-nav {
      background-color: @mantle !important;
      border-color: @surface0 !important;

      .title.breadcrumbs {
        background-color: @crust !important;
      }
    }

    #reset-output {
      color: @subtext0 !important;
    }

    #instructionsToolbar {
      border-bottom-color: @surface0 !important;
    }

    #instructionsContainer {
      background-color: @base !important;
    }

    #team {
      background-color: @mantle !important;

      img {
        box-shadow: 0 0 0 10px @accent !important;
      }

      a.social {
        background-color: @accent !important;

        i::before {
          color: @base !important;
        }
      }
    }

    #outputTabs {
      background-color: @crust !important;
      border-bottom-color: @surface0 !important;

      .active {
        background-color: @mantle !important;
      }

      #instructionsTab {
        border-left-color: @surface0 !important;
      }
    }

    #recent-trinkets .item a {
      background-color: @mantle !important;
      border-color: @surface0 !important;
      box-shadow: none !important;
    }

    #content-wrapper {
      border-color: @surface0 !important;
    }

    #wrapper {
      border-color: @surface0 !important;

      .trinket-content {
        border-top-color: @surface0 !important;
      }

      .trinket-wrapper .trinket-content {
        background-color: @base !important;
      }

      .trinket-label {
        color: @subtext0 !important;
      }

      &,
      .trinket-content-wrapper > :not(.codeOutput, #content-overlay) {
        background-color: @base;
      }

      .codeOutput {
        background-color: initial !important;
      }

      .left-menu-toggle {
        border-right-color: @surface0 !important;
      }

      .right-menu-toggle {
        border-left-color: @surface0 !important;
      }

      .icon-bar .item.split {
        &.button,
        &.faux-button {
          span {
            border-left-color: @surface0 !important;
          }

          span::after {
            border-top-color: @text !important;
          }
        }
      }
    }

    #content-overlay {
      background-color: fade(@base, 20%) !important;
    }

    #books-index .book-img {
      outline-color: @surface0 !important;

      &:hover {
        outline-color: @accent !important;
      }
    }

    #svg-logo .letters {
      fill: @text !important;
    }

    #svg-logo .yellow {
      fill: @yellow !important;
    }

    #svg-logo .blue {
      fill: @blue !important;
    }

    #svg-logo .green {
      fill: @green !important;
    }

    #svg-logo .white {
      fill: @base !important;
    }

    #blue-logo-circle {
      // There normally isn't an animation applied to this
      // element because the circle blends in to the background.
      opacity: 0;
      animation: RtL 1s 0.75s ease 1 forwards !important;
    }

    #hero {
      background-color: @mantle !important;
    }

    #graphic {
      /* This is the element for graphics output. If styled with Catppuccin, it may make graphics unviewable due to contrast issues. */
      background-color: white !important;

      &,
      label {
        color: initial !important;
      }
    }

    @keyframes attention-error-border-pulse {
      0% {
        box-shadow: inset 0 0 0 @red;
      }
      40% {
        box-shadow: inset 0 0 0 @red;
      }
      70% {
        box-shadow: inset 0 0 6px @red;
      }
      100% {
        box-shadow: inset 0 0 0 @red;
      }
    }

    @keyframes bluePulseButton {
      0% {
        box-shadow: 0 0 0 0 fade(@accent, 40%);
        background-color: @accent;
      }

      70% {
        box-shadow: 0 0 0 10px fade(@accent, 0%);
        background-color: @accent;
      }

      100% {
        box-shadow: none;
        background-color: @accent;
      }
    }

    img[src$="trinket-logo-notag.png"],
    img[src$="trinket-logo.png"] {
      @svg: escape(
        '<svg viewBox="0 0 525.333 92" xmlns="http://www.w3.org/2000/svg"><path fill="@{text}" d="M157.021 30.188h3.899l5.512-16.761a26.2 26.2 0 0 1 5.262 2.172q2.421 1.336 3.675 3.063 1.252 1.727 1.252 8.518v3.008h18.818q.95 2.225.95 4.732-.002 2.12-.78 2.84-.78.725-3.007.724H176.62v21.993q0 9.577 1.615 13.03 1.614 3.454 5.374 3.591 3.757.14 9.159-2.645 1.614 2.17 1.615 4.955-.001 3.79-3.982 5.096c-2.653.87-6.783 1.31-12.39 1.31q-9.186 0-13.112-3.678-3.925-3.673-3.924-14.253v-9.689q-.001-9.187-.557-19.71h-5.68q-1.002-2.394-1.003-4.843 0-1.893.753-2.673.75-.78 2.532-.78m44.755 2.727q-.001-2.001 1.475-2.617 1.476-.612 18.4-1.114.279 2.34 0 6.46 7.02-4.121 12.696-5.568c3.787-.963 7.127-1.45 10.024-1.45q2.006.001 2.672.475.668.474.668 2.2.001 3.06-.919 6.375c-.611 2.21-1.373 3.627-2.283 4.26q-1.363.946-4.315 1.392-2.951.447-3.424.223t-3.145-3.73q-4.12.001-6.321 2.978c-1.464 1.984-2.198 7.1-2.198 15.339q-.001 11.304.278 19.49h8.74q1.004 1.836 1.003 4.118 0 1.951-.805 2.729-.812.78-3.146.78h-28.397q-1.002-2.338-1.003-4.398 0-1.726.78-2.477.778-.753 2.506-.752h4.063q.278-8.187.278-18.988.001-15.59-1.475-18.43t-5.15-2.84q-1.001-2.225-1.002-4.455m74.318 44.712h6.57q.95 1.838.949 4.12 0 1.95-.81 2.73-.805.778-3.145.777h-26.726c-.633-1.558-.945-3.023-.945-4.398q0-1.726.777-2.478.78-.75 2.506-.751h4.566q.279-7.126.28-15.201-.001-12.304-.197-16.342-.195-4.036-.863-5.9-.668-1.867-2.06-2.34c-1.392-.474-2.282-.474-4.064-.474-.633-1.039-.945-2.246-.945-3.619q0-3.118 2.56-3.842 2.56-.723 10.413-.724 5.897-.001 8.045.446 2.142.446 2.45 1.755.305 1.307.306 3.646v27.394q.055 8.076.333 15.2m-10.189-55.68q-5.011.002-7.238-1.92t-2.228-5.428q.001-3.676 2.84-6.043 2.84-2.365 8.074-2.366 5.347 0 7.573 2.032t2.226 5.317q0 3.622-2.672 6.015t-8.575 2.392m43.083 13.643q6.07-3.787 11.664-5.372c3.732-1.06 6.857-1.589 9.384-1.589q7.85.001 11.663 3.455 3.816 3.451 3.815 13.918.001 27.396 1.001 29.54 1.004 2.141 4.343 2.088a10.7 10.7 0 0 1 .835 4.175c0 1.335-.436 2.248-1.308 2.726q-1.306.727-4.984.726-9.019.001-11.413-.28-2.393-.277-3.283-1.809-.893-1.529-.892-5.149V58.361q0-11.358-2.087-15.227-2.09-3.871-6.767-3.872-3.953.002-6.236 2.312t-2.283 9.66v11.193q0 7.016.278 15.201h6.626q.947 1.836.948 4.118 0 1.951-.808 2.73-.808.78-3.144.779h-26.227q-1.004-2.34-1.003-4.398 0-1.725.78-2.48.778-.75 2.505-.749h4.067a633 633 0 0 0 .275-18.99q0-15.588-1.475-18.43-1.475-2.838-5.15-2.837-1.003-2.228-1.002-4.455 0-2.004 1.476-2.618 1.474-.612 18.402-1.114.274 2.34 0 6.404m71.814 42.039h5.01q.95 1.838.949 4.12 0 1.95-.78 2.73-.784.778-3.175.777h-25.168q-.946-2.336-.946-4.398 0-1.726.78-2.478.78-.75 2.506-.751h4.566q.279-7.126.278-19.21-.002-25.278-.195-31.737-.194-6.458-.837-8.827-.64-2.364-2.171-3.06t-3.981-.697q-.946-2.284-.946-4.566-.001-2.337 1.726-2.98 1.725-.638 11.249-.638 5.899.001 8.045.472c1.43.318 2.253.9 2.478 1.754q.332 1.28.332 3.62v42.038q3.956-2.894 8.827-7.46c4.87-4.566 5.818-5.68 7.712-7.907h-4.12a9.3 9.3 0 0 1-.945-4.123q-.001-2.168.862-3.146.86-.971 2.755-.972h21.16q.945 1.891.945 4.007 0 2.454-.946 3.343-.948.89-3.286.89h-2.506l-14.922 13.863q6.459 9.969 11.164 15.87 4.704 5.904 6.904 7.683 2.197 1.782 5.206 1.783 1.057 3.842-.305 5.735-1.364 1.892-9.273 1.892-6.57.001-8.24-.918-1.669-.918-3.007-3.174c-1.338-2.256-2.162-3.822-3.812-6.96q-2.477-4.705-8.603-14.17l-5.57 5.288q0 5.181.28 12.307m72.981-49.055q11.584 0 16.816 5.264 5.234 5.26 5.233 16.619 0 5.625-2.227 8.017c-1.483 1.598-4.734 2.395-9.743 2.395h-20.713q.166 7.294 3.285 11.443 3.12 4.147 10.968 4.147c5.125 0 10.393-1.484 15.816-4.455q2.894 2.841 2.894 6.126 0 4.454-6.544 6.21-6.542 1.751-15.338 1.751-15.147.002-21.994-6.124-6.849-6.123-6.85-20.213 0-14.641 7.713-22.91 7.712-8.271 20.684-8.27m-2.225 9.633q-4.123 0-6.292 3.34c-1.45 2.229-2.19 6.107-2.23 11.638h2.953q6.18 0 9.438-.363c2.17-.239 3.442-.65 3.812-1.225q.559-.861.559-2.866-.001-5.01-2.17-7.767-2.175-2.756-6.07-2.757m34.395-8.017h3.899l5.512-16.761a26.2 26.2 0 0 1 5.262 2.172q2.422 1.336 3.675 3.063t1.254 8.518v3.008h18.817q.948 2.225.948 4.732 0 2.12-.78 2.84-.78.725-3.006.724h-15.979v21.993q-.001 9.577 1.612 13.03 1.614 3.454 5.375 3.591 3.756.14 9.158-2.645 1.617 2.17 1.615 4.955 0 3.79-3.981 5.096c-2.654.87-6.783 1.31-12.387 1.31q-9.19 0-13.113-3.678-3.926-3.673-3.926-14.253v-9.689q0-9.187-.558-19.71h-5.68q-1-2.394-1-4.843 0-1.893.75-2.673.754-.78 2.533-.78"/><path fill="@{green}" d="M138 46c0 25.405-20.596 46-46 46S46 71.405 46 46C46 20.596 66.594 0 92 0s46 20.596 46 46"/><path fill="@{blue}" d="M115.363 46c0 25.405-20.595 46-46 46s-46-20.595-46-46c0-25.404 20.595-46 46-46s46 20.596 46 46"/><path fill="@{yellow}" d="M92 46c0 25.405-20.596 46-46 46C20.595 92 0 71.405 0 46 0 20.596 20.595 0 46 0c25.404 0 46 20.596 46 46"/><path fill="@{base}" d="M28.218 73.993 56.52 45.172c4.106 3.774 10.488 3.639 14.426-.368l.59-.6c4.016-4.091 3.955-10.658-.135-14.676l-6.038-5.93a10.38 10.38 0 0 0-14.675.135l-.59.6a10.375 10.375 0 0 0-.104 14.428l-16.909 17.22-5.981-5.875-3.206 3.264 4.35 4.272-3.202 3.262-4.35-4.272-3.205 3.265 5.98 5.874-1.78 1.814a4.575 4.575 0 0 0 .06 6.468 4.575 4.575 0 0 0 6.467-.06m26.465-39.516a4.035 4.035 0 0 1-.053-5.694l.591-.6a4.03 4.03 0 0 1 5.692-.052l6.038 5.93a4.03 4.03 0 0 1 .053 5.694l-.588.6a4.037 4.037 0 0 1-5.695.052z"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    img[src$="trinket-logo-notag.png"] {
      margin: 50px 0 30px;
      padding-left: 300px;
    }

    img[src$="trinket-logo-circles.png"] {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 138 92"><path fill="@{green}" d="M138 46c0 25.41-20.6 46-46 46S46 71.4 46 46 66.6 0 92 0s46 20.6 46 46"/><path fill="@{blue}" d="M115.37 46c0 25.41-20.59 46-46 46s-46-20.6-46-46 20.59-46 46-46 46 20.6 46 46"/><path fill="@{yellow}" d="M92 46c0 25.41-20.6 46-46 46S0 71.41 0 46 20.6 0 46 0s46 20.6 46 46"/><path fill="@{base}" d="m28.22 73.99 28.3-28.82c4.11 3.77 10.49 3.64 14.43-.37l.59-.6c4.02-4.09 3.95-10.66-.13-14.68l-6.04-5.93c-4.09-4.01-10.66-3.95-14.67.14l-.59.6c-3.93 4.01-3.95 10.39-.1 14.43L33.1 55.98l-5.98-5.87-3.21 3.26 4.35 4.27-3.2 3.26-4.35-4.27-3.21 3.26 5.98 5.87-1.78 1.81c-1.77 1.8-1.74 4.7.06 6.47s4.7 1.74 6.47-.06M54.7 34.46c-1.58-1.56-1.61-4.11-.05-5.69l.59-.6a4.026 4.026 0 0 1 5.69-.05l6.04 5.93c1.58 1.56 1.61 4.11.05 5.69l-.59.6c-1.56 1.58-4.11 1.61-5.69.05z"/></svg>'
      );
      content: url("data:image/svg+xml,@{svg}");
    }

    #dragbar {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="5" height="27"><path stroke="@{surface2}" d="M2.5 0v27M.5 0v27m4-27v27"/></svg>'
      );

      background-color: @surface0 !important;
      border-left-color: @surface0 !important;
      border-right-color: @surface0 !important;
      background-image: url("data:image/svg+xml;utf8,@{svg}") !important;
    }

    #output-dragbar {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" width="27" height="5"><path stroke="@{surface2}" d="M0 2.5h27m-27 2h27M0 .5h27"/></svg>'
      );

      background-color: @surface0 !important;
      border-top-color: @surface0 !important;
      border-bottom-color: @surface0 !important;
      background-image: url("data:image/svg+xml;utf8,@{svg}") !important;
    }

    .lang-sprite,
    #trinkets-list.list-view > li .snapshot .title::before,
    .trinkets-list.list-view > li .snapshot .title::before {
      @svg: escape(
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446.63 50"><path fill="@{blue}" d="M21.49 1c-1.79 0-3.51.16-5.01.43-4.44.78-5.25 2.43-5.25 5.45v4h10.49v1.33H7.29c-3.05 0-5.72 1.83-6.55 5.32-.96 4-1.01 6.49 0 10.66.75 3.11 2.53 5.32 5.58 5.32h3.61v-4.79c0-3.46 3-6.52 6.55-6.52h10.48c2.92 0 5.25-2.4 5.25-5.33V6.88c0-2.84-2.4-4.98-5.25-5.45-1.8-.3-3.67-.44-5.47-.43m-5.67 3.22c1.08 0 1.97.9 1.97 2.01s-.88 1.99-1.97 1.99-1.97-.89-1.97-1.99.88-2.01 1.97-2.01"/><path fill="@{yellow}" d="M33.51 12.21v4.66c0 3.61-3.06 6.65-6.55 6.65H16.48c-2.87 0-5.25 2.46-5.25 5.33v9.99c0 2.84 2.47 4.51 5.25 5.33 3.32.98 6.51 1.15 10.48 0 2.64-.76 5.25-2.3 5.25-5.33v-4H21.73v-1.33h15.72c3.05 0 4.18-2.13 5.25-5.32 1.1-3.29 1.05-6.45 0-10.66-.75-3.04-2.19-5.32-5.25-5.32zm-5.89 25.3c1.09 0 1.97.89 1.97 1.99s-.88 2.01-1.97 2.01-1.97-.9-1.97-2.01.88-1.99 1.97-1.99"/><path stroke="@{text}" d="m48.63 14.86 50.21-.27m-50.18 5.03 50.2-.28m-50.18 5.94L98.89 25m-50.18 4.73 50.2-.28m-50.18 5.2 50.21-.28"/><path fill="@{text}" d="M63.83 9.82c.28 2.86-1.85 5.18-3.74 7.06-.86.82-.14.14-.59.54-.09-.44-.27-1.59-.26-1.93.12-2.47 2.13-6.04 3.88-7.35.28.53.52.57.7 1.68m.6 14.79c-1.13-.83-2.61-1.05-3.97-.81-.17-1.15-.35-2.3-.53-3.45 2.15-2.13 4.5-4.61 4.62-7.82.05-2.05-.25-4.28-1.54-5.94-1.56.12-2.66 1.98-3.48 3.13-1.36 2.45-1.05 5.42-.52 8.06-.74.87-1.77 1.6-2.5 2.5-2.16 2.11-4.04 4.98-3.67 8.13.17 3.05 2.37 5.9 5.38 6.62 1.15.29 2.34.32 3.5.09.2 2.06.94 4.24.09 6.24-.64 1.46-2.55 2.75-3.97 2.01-.55-.29-.1-.05-.44-.23.98-.24 1.83-.95 2.07-1.43.77-1.34-.37-3.34-1.97-3.08-2.07.04-2.92 2.88-1.59 4.29 1.23 1.39 3.51 1.2 4.98.29 1.66-1.08 1.87-3.25 1.68-5.1-.06-.62-.37-2.45-.41-3.1.64-.23.19-.05 1.09-.41 2.44-.96 3.99-3.9 3.29-6.52-.29-1.35-.96-2.67-2.11-3.47m.51 5.27c.2 1.82-.96 3.96-2.82 4.54-.12-.73-.16-.93-.24-1.35-.44-2.25-.68-4.57-1.02-6.85 1.49-.15 3.17.5 3.69 2 .22.53.31 1.1.4 1.66m-4.72 4.76c-2.33.13-4.58-1.46-5.16-3.74-.69-1.97-.48-4.24.75-5.96 1.02-1.56 2.39-2.84 3.69-4.16l.5 3.1c-2.74.72-4.58 4.33-2.95 6.83.49.7 1.81 2.04 2.53 1.5-1.01-.63-1.84-1.7-1.66-2.96-.08-1.17 1.26-2.67 2.43-2.93.4 2.63.86 5.56 1.26 8.19-.46.09-.94.13-1.41.13m18.81-12.91c-1.42-.07-2.53-1.33-2.97-2.63-.27-.76-.12-1.91.78-2.12 1.3-.22 2.38.88 2.98 1.94.43.78.67 2.02-.14 2.64-.19.12-.42.19-.65.18m2.26-4.46c-1.6-.97-3.61-1.05-5.36-.5-1.11.39-2.37 1.21-2.38 2.55 0 1.31 1.22 2.13 2.3 2.52 1.71.56 3.69.51 5.29-.38.9-.48 1.71-1.48 1.44-2.58-.15-.71-.69-1.24-1.28-1.61"/><path fill="@{green}" d="M99.59 2.76h16.04v3.1h6.93v5.38h15.1v4.35h-2.17l-.1 3.75-3.83-.02v3.61h-22.03v1.76h2.69l.1 4.34h14.07l.1 5.62h13.04v4.42h-23.18l-.1 3.1h9.83v5.9H99.59z"/><path fill="@{text}" d="M161.34 2.39h-2.04V.16h-2.26v6.72h2.26V4.65h2.04v2.23h2.26V.16h-2.26zM177.11.16h-.2l-1.4 2.3-1.4-2.3h-2.35v6.72h2.19V3.52l1.55 2.42 1.6-2.49v3.42h2.19V.16h-2.19Zm-12.52 2.26h1.97v4.46h2.26V2.42h1.97V.16h-6.19v2.26Zm18.12 2.2V.16h-2.26v6.72h5.41V4.62z"/><path fill="@{red}" d="M189.15 9.93h-35.41l3.32 35.99L171.44 50l14.39-4.08z"/><path fill="@{peach}" d="M171.44 12.87v34.08l11.65-3.3 2.84-30.78z"/><path fill="@{base}" d="M182.58 17.28h-22.27l1.24 13.48.03-.09h15.22l-.5 5.7-4.85 1.4-4.93-1.42-.3-3.45h-4.47l.63 6.9 9.06 2.57 9.06-2.57 1.25-13.53H165.6l-.41-4.51h16.98z"/><path fill="@{blue}" d="M199.66 0h47.93v50h-47.93z"/><path fill="@{red}" d="m199.66 50 11.87-13V12.87L199.66.86zm47.93 0-11.86-13V12.87L247.59.86z"/><path fill="@{accent}" d="M257.93 40.93h29.08c2.67 0 4.85-2.17 4.85-4.85V16.69c0-2.67-2.17-4.85-4.85-4.85h-12.12c-.76 0-1.48-.36-1.94-.97l-1.45-1.94a4.87 4.87 0 0 0-3.88-1.94h-9.69c-2.67 0-4.85 2.17-4.85 4.85v24.24c0 2.67 2.17 4.85 4.85 4.85"/><path fill="@{peach}" d="M322.81 23.36c2.33 2.68-.61 5.09-.61 5.09s5.91-3.05 3.2-6.87c-2.53-3.56-4.48-5.33 6.04-11.44 0 0-16.52 4.13-8.63 13.22"/><path fill="@{peach}" d="M325.39.29s5.01 5.01-4.75 12.73c-7.83 6.19-1.79 9.71 0 13.74-4.57-4.13-7.93-7.76-5.68-11.14 3.3-4.96 12.46-7.37 10.43-15.33"/><path fill="@{blue}" d="M314.23 37.6s-1.84 1.07 1.31 1.44c3.82.44 5.78.37 9.99-.42 0 0 1.11.69 2.65 1.3-9.44 4.05-21.38-.23-13.96-2.31m-1.14-5.29s-2.07 1.53 1.09 1.86c4.08.42 7.31.46 12.89-.62 0 0 .77.78 1.99 1.21-11.42 3.34-24.14.26-15.97-2.45"/><path fill="@{blue}" d="M335.3 41.51s1.36 1.12-1.5 1.99c-5.45 1.65-22.69 2.15-27.48.07-1.72-.75 1.51-1.79 2.52-2.01 1.06-.23 1.66-.19 1.66-.19-1.91-1.35-12.37 2.65-5.31 3.79 19.26 3.12 35.1-1.41 30.11-3.66m-20.18-14.65s-8.77 2.08-3.11 2.84c2.39.32 7.16.25 11.6-.12 3.63-.31 7.27-.96 7.27-.96s-1.28.55-2.21 1.18c-8.9 2.34-26.11 1.25-21.15-1.14 4.19-2.02 7.59-1.79 7.59-1.79m15.74 8.78c9.05-4.7 4.87-9.22 1.95-8.61-.72.15-1.04.28-1.04.28s.27-.42.77-.6c5.78-2.03 10.22 5.99-1.87 9.17 0 0 .14-.13.18-.24"/><path fill="@{blue}" d="M316.01 48.39c8.69.56 22.03-.31 22.35-4.42 0 0-.61 1.56-7.18 2.8-7.42 1.4-16.56 1.23-21.99.34 0 0 1.11.92 6.82 1.29"/><path fill="@{surface1}" d="M372.35 38.95c-13.18 0-23.86-7.91-23.86-17.66s10.68-17.66 23.86-17.66 23.86 7.91 23.86 17.66-10.68 17.66-23.86 17.66M376 10.54c-10.01 0-18.13 5.4-18.13 12.07s8.12 12.07 18.13 12.07 17.41-3.7 17.41-12.07-7.39-12.07-17.41-12.07"/><path fill="@{blue}" d="M385.03 30.98s1.6.48 2.52.95c.32.16.88.49 1.28.91.39.42.59.84.59.84l6.29 10.6h-10.16l-4.75-8.92s-.97-1.67-1.57-2.16c-.5-.4-.71-.55-1.21-.55h-2.42v11.63h-8.99V14.6h18.06s8.23.15 8.23 7.98-7.86 8.41-7.86 8.41Zm-3.91-9.94h-5.45v5.05h5.45s2.52 0 2.52-2.57-2.52-2.48-2.52-2.48M423.7 9.67c-1.06 0-2.06.1-2.95.25-2.61.46-3.09 1.43-3.09 3.21v2.35h6.17v.78h-8.49c-1.79 0-3.37 1.08-3.86 3.13-.57 2.35-.59 3.82 0 6.27.44 1.83 1.49 3.13 3.28 3.13h2.12v-2.82c0-2.04 1.76-3.84 3.86-3.84h6.17c1.72 0 3.09-1.41 3.09-3.14v-5.88c0-1.67-1.41-2.93-3.09-3.21a18.4 18.4 0 0 0-3.22-.25m-3.34 1.89c.64 0 1.16.53 1.16 1.18s-.52 1.17-1.16 1.17-1.16-.52-1.16-1.17.52-1.18 1.16-1.18"/><path fill="@{yellow}" d="M430.77 16.27v2.74c0 2.13-1.8 3.91-3.86 3.91h-6.17c-1.69 0-3.09 1.45-3.09 3.14v5.88c0 1.67 1.46 2.66 3.09 3.14 1.95.57 3.83.68 6.17 0 1.55-.45 3.09-1.36 3.09-3.14v-2.35h-6.17v-.78h9.25c1.79 0 2.46-1.25 3.09-3.13.64-1.93.62-3.79 0-6.27-.44-1.79-1.29-3.13-3.09-3.13h-2.32Zm-3.47 14.89c.64 0 1.16.52 1.16 1.17s-.52 1.18-1.16 1.18-1.16-.53-1.16-1.18.52-1.17 1.16-1.17"/><path fill="@{text}" d="M449.13 38.95V6.07H399.2v32.88h18.46v5.35h-7.5l.1 2.63h27.62V44.3h-7.89v-5.35h19.13Zm-47.76-2.16V7.93h45.52v28.86z"/></svg>'
      );

      background-image: url("data:image/svg+xml;utf8,@{svg}");
    }
  }
}