:root{--banner:#04395e;--chrome:#181818;--editor:#1f1f1f;--border:#2b2b2b;--fg:#ccc;--muted:#9d9d9d;--inactive:#868686;--hover:#2a2d2e;--selected:#37373d;--blue:#0078d4;--link:#4daafc}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--editor);color:var(--fg);font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:1px solid var(--blue);outline-offset:-1px}.shell{width:100vw;height:100vh;display:grid;grid-template-rows:26px 35px minmax(0,1fr) 22px;overflow:hidden;background:#252526}.shell.no-banner{grid-template-rows:35px minmax(0,1fr) 22px}.banner{display:grid;grid-template-columns:minmax(300px,1fr) auto minmax(24px,1fr);align-items:center;gap:14px;padding:0 9px;background:var(--banner);color:#fff;font-size:12px;white-space:nowrap}.brand{overflow:hidden;text-overflow:ellipsis}.brand .codicon{margin-right:5px;color:#23a8f2;font-size:16px;vertical-align:-2px}.banner nav{display:flex;gap:19px}.banner a{color:#fff;text-underline-offset:2px}.banner button{justify-self:end;width:24px;height:24px;border:0;background:transparent;color:#fff;cursor:pointer}.titlebar{display:grid;grid-template-columns:minmax(160px,1fr) minmax(320px,584px) minmax(160px,1fr);align-items:center;border-bottom:1px solid var(--border);background:var(--chrome);user-select:none}.history{display:flex;justify-content:flex-end;padding-right:7px}.history button,.title-actions button,.command,.side-title button,.tabs button,.panel button,.status button{border:0;background:transparent;color:inherit;cursor:pointer}.history button{width:25px;height:24px;color:#858585;opacity:.55}.command{height:24px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border:1px solid #3f3f3f;border-radius:6px;background:#242424;color:var(--fg);font-size:12px}.command:hover{background:#2a2a2a;border-color:#565656}.command .codicon{color:#999}.title-actions{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:2px;padding:0 7px}.title-actions button{width:24px;height:24px;border-radius:5px;color:#b6b6b6}.title-actions button:hover,.title-actions button.on{background:#333;color:#fff}.body{min-width:0;min-height:0;display:grid;grid-template-columns:48px 300px minmax(0,1fr)}.shell.side-hidden .body{grid-template-columns:48px minmax(0,1fr)}.activity{display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--border);background:var(--chrome);user-select:none}.activity>div{display:flex;flex-direction:column}.activity button{width:47px;height:48px;display:grid;place-items:center;position:relative;padding:0;border:0;background:transparent;color:var(--inactive);cursor:pointer}.activity button.menu{height:35px}.activity button:hover,.activity button.active{color:#fff}.activity button.active:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:#fff}.activity .codicon{font-size:24px}.activity .menu .codicon{font-size:18px}.sidebar{min-width:0;min-height:0;display:grid;grid-template-rows:35px 22px auto 1fr 22px 22px;overflow:hidden;border-right:1px solid var(--border);background:var(--chrome)}.side-title{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 20px}.side-title h2{margin:0;font-size:11px;font-weight:400}.side-title button{width:28px;height:28px;border-radius:5px}.side-title button:hover{background:var(--hover)}.project,.collapsed{width:100%;height:22px;display:flex;align-items:center;gap:3px;padding:0 6px;border:0;background:var(--chrome);color:var(--fg);text-align:left;cursor:pointer}.project:hover,.collapsed:hover{background:var(--hover)}.project strong,.collapsed strong{font-size:11px;line-height:22px}.tree{min-height:0;overflow:auto;padding:2px 0 5px}.tree button{width:100%;height:22px;display:grid;grid-template-columns:16px 18px minmax(0,1fr) auto;align-items:center;gap:1px;padding:0 10px 0 6px;border:0;background:transparent;color:var(--fg);text-align:left;cursor:default}.tree button:hover{background:var(--hover)}.tree button.selected{background:var(--selected);color:#fff}.tree .d1{padding-left:16px}.tree .d2{padding-left:26px;cursor:pointer}.tree .twisty{display:grid;place-items:center}.tree .file-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree button>.codicon-folder,.tree button>.codicon-folder-opened{color:#dcb67a}.tree .codicon-symbol-method{color:#75beff}.tree .codicon-git-commit{color:#e37933}.tree .codicon-json{color:#dcdcaa}.tree .codicon-markdown{color:#519aba}.tree .m{color:#cca700;font-size:11px}.collapsed{border-top:1px solid var(--border)}.editor-part{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 170px;background:var(--editor)}.shell.panel-hidden .editor-part{grid-template-rows:minmax(0,1fr)}.groups{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(420px,1.25fr) minmax(300px,.75fr)}.group{min-width:0;min-height:0;display:grid;grid-template-rows:35px 22px minmax(0,1fr);background:var(--editor)}.preview-group{border-left:1px solid var(--border)}.tabs{display:flex;align-items:stretch;border-bottom:1px solid var(--border);background:var(--chrome)}.tab{height:35px;max-width:240px;display:flex;align-items:center;gap:7px;padding:0 10px;border:0;border-right:1px solid var(--border)!important;background:var(--editor)!important;color:#fff!important;box-shadow:0 1px var(--blue) inset}.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab .codicon:last-child{margin-left:auto}.tab .codicon:first-child{color:#75beff}.tab-actions{margin-left:auto;display:flex;align-items:center;padding-right:3px}.tab-actions button{width:27px;height:27px;border-radius:5px}.tab-actions button:hover{background:var(--hover)}.crumbs{height:22px;display:flex;align-items:center;gap:2px;padding:0 12px;overflow:hidden;color:#a3a3a3;font-size:12px;white-space:nowrap}.crumbs .codicon{color:#6e6e6e}.code{position:relative;min-height:0;overflow:auto;background:var(--editor)}.lines{width:max-content;min-width:calc(100% - 70px);padding:7px 70px 24px 0;counter-reset:line;font:14px/19px Consolas,"Courier New",monospace}.line{height:19px;display:grid;grid-template-columns:60px max-content;counter-increment:line}.line:before{content:counter(line);color:#6e7681;text-align:right;padding-right:14px}.line.active{background:#282828}.kw{color:#c586c0}.type{color:#4ec9b0}.fn{color:#dcdcaa}.str{color:#ce9178}.var{color:#9cdcfe}.const{color:#569cd6}.comment{color:#6a9955}.property{color:#9cdcfe}.heading{color:#569cd6}.link{color:var(--link)}.caret{display:inline-block;width:2px;height:17px;background:#aeafad;vertical-align:-3px;animation:blink 1.05s steps(1) infinite}.minimap{width:70px;position:absolute;inset:0 0 0 auto;z-index:2;padding:9px 6px;border-left:1px solid #ffffff05;background:var(--editor);opacity:.58}.minimap i{display:block;height:2px;margin:2px 0 0 auto;background:#6b6b6b}.minimap i:nth-child(3n){background:#7a5780}.minimap i:nth-child(4n){background:#59755c}.preview{min-height:0;overflow:auto;padding:26px clamp(22px,4vw,48px) 36px}.profile{display:grid;grid-template-columns:132px minmax(0,1fr);gap:24px;align-items:center}.profile>img{width:132px;height:148px;object-fit:cover;object-position:center 25%;border:1px solid #3c3c3c;background:#eee}.profile small{color:var(--muted);letter-spacing:.08em}.profile h1{margin:6px 0 5px;color:#fff;font-size:32px;font-weight:400}.profile p{margin:0 0 16px;color:var(--muted)}.profile p span{color:var(--link)}.profile-actions{display:flex;gap:8px}.profile-actions button{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;border:1px solid transparent;border-radius:2px;background:var(--blue);color:#fff;cursor:pointer}.profile-actions button:last-child{border-color:#4b4b4b;background:#2b2b2b;color:var(--fg)}.preview hr{height:1px;margin:26px 0 20px;border:0;background:#333}.liked-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.liked-title div{display:flex;align-items:center;gap:7px}.liked-title h2{margin:0;color:#fff;font-size:19px;font-weight:400}.liked-title div .codicon{color:#f48771}.liked-title>span{color:var(--muted);font-size:11px}.liked-title b{color:var(--link);font-weight:400}.art{height:min(310px,35vh);overflow:hidden;border:1px solid #333;background:#fff}.art img{width:100%;height:100%;object-fit:cover;object-position:center 18%}.carousel{height:31px;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:11px}.carousel button{width:28px;height:26px;border:0;border-radius:3px;background:transparent;color:var(--fg);cursor:pointer}.carousel button:hover{background:var(--hover)}.panel{min-width:0;min-height:0;overflow:hidden;border-top:1px solid var(--border);background:var(--chrome)}.panel-top{height:35px;display:flex;justify-content:space-between;padding:0 7px 0 18px}.panel-tabs{display:flex;gap:20px}.panel-tabs button{height:35px;padding:0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);font-size:11px}.panel-tabs button.active{border-color:var(--blue);color:#fff}.panel-actions{display:flex;align-items:center}.panel-actions button{width:27px;height:27px;border-radius:5px}.panel-actions button:hover{background:var(--hover)}.terminal{padding:3px 14px;font:13px/19px Consolas,"Courier New",monospace}.terminal p{margin:0}.green{color:#4ec9b0}.term-blue{color:#75beff}.terminal .caret{height:15px}.status{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);background:var(--chrome);font-size:12px;user-select:none}.status>div{height:21px;display:flex;align-items:center}.status button{height:21px;display:flex;align-items:center;gap:4px;padding:0 6px;white-space:nowrap}.status button:hover{background:#ffffff1f}.status .left button:first-child{width:34px;justify-content:center;padding:0}@keyframes blink{50%{opacity:0}}@media(max-width:1050px){.body{grid-template-columns:48px 250px minmax(0,1fr)}.groups{grid-template-columns:minmax(380px,1fr)}.preview-group{display:none}.banner nav a:nth-child(n+3){display:none}}@media(max-width:720px){.banner{grid-template-columns:1fr auto}.banner nav{display:none}.titlebar{grid-template-columns:52px minmax(150px,1fr) 104px}.history{display:none}.body,.shell.side-hidden .body{grid-template-columns:48px minmax(0,1fr)}.sidebar{display:none}.editor-part{grid-template-rows:minmax(0,1fr) 145px}.shell.panel-hidden .editor-part{grid-template-rows:minmax(0,1fr)}.minimap{display:none}.lines{padding-right:20px;font-size:12px}.panel-tabs{gap:14px}.panel-tabs button:nth-child(3),.panel-tabs button:nth-child(5){display:none}.status .right button:nth-child(n+2){display:none}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}

    .shell {
      grid-template-rows: 35px minmax(0, 1fr) 22px;
    }

    .groups {
      grid-template-columns: repeat(2, minmax(400px, 1fr));
    }

    .preview {
      padding: 24px clamp(20px, 3vw, 36px) 40px;
      line-height: 1.5;
    }

    .profile {
      grid-template-columns: 124px minmax(0, 1fr);
      gap: 20px;
    }

    .profile > img {
      width: 124px;
      height: 140px;
    }

    .profile-actions {
      flex-wrap: wrap;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    .art {
      height: auto;
      min-width: 0;
      margin: 0;
      overflow: visible;
      border: 0;
      background: transparent;
    }

    .art-frame {
      overflow: hidden;
      border: 1px solid #333;
      background: #fff;
      aspect-ratio: 1162 / 1690;
    }

    .art img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
    }

    .art-author {
      display: block;
      margin-top: 7px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }

    .art-author b {
      color: var(--link);
      font-weight: 400;
    }

    @media (max-width: 1050px) {
      .groups {
        grid-template-columns: minmax(380px, 1fr);
      }
    }

    @media (max-width: 520px) {
      .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    .sidebar[hidden] {
      display: none;
    }

    @media (max-width: 720px) {
      .titlebar {
        grid-template-columns: minmax(0, 1fr) 104px;
      }
    }

    .music-player {
      margin-top: 20px;
      overflow: hidden;
      border: 1px solid #333;
      border-radius: 3px;
      background: var(--chrome);
      color: var(--fg);
    }

    .player-now {
      min-width: 0;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
    }

    .player-cover {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #3c3c3c;
      border-radius: 2px;
      background: #252526;
      color: #8c8c8c;
    }

    .player-cover img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .player-cover .codicon {
      font-size: 24px;
    }

    .player-meta {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .player-meta small,
    .playlist-heading {
      color: var(--muted);
      font-size: 10px;
      letter-spacing: .08em;
    }

    .player-meta strong,
    .player-meta span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .player-meta strong {
      margin-top: 3px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
    }

    .player-meta span {
      color: var(--muted);
      font-size: 12px;
    }

    .player-controls {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    .player-control {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
    }

    .player-control:hover:not(:disabled) {
      background: var(--hover);
      color: #fff;
    }

    .player-control.primary {
      background: var(--blue);
      color: #fff;
    }

    .player-control.primary:hover:not(:disabled) {
      background: #188ce5;
    }

    .player-control:disabled {
      color: #606060;
      cursor: default;
    }

    .player-progress {
      display: grid;
      grid-template-columns: 38px minmax(60px, 1fr) 43px;
      gap: 8px;
      align-items: center;
      padding: 0 12px 11px;
      color: var(--muted);
      font: 11px Consolas, "Courier New", monospace;
    }

    .player-progress span:last-child {
      text-align: right;
    }

    .player-seek {
      width: 100%;
      height: 3px;
      margin: 0;
      appearance: none;
      border: 0;
      border-radius: 0;
      background: linear-gradient(to right, var(--blue) var(--seek, 0%), #414141 var(--seek, 0%));
      cursor: pointer;
    }

    .player-seek::-webkit-slider-thumb {
      width: 10px;
      height: 10px;
      appearance: none;
      border: 0;
      border-radius: 50%;
      background: #fff;
    }

    .player-seek::-moz-range-thumb {
      width: 10px;
      height: 10px;
      border: 0;
      border-radius: 50%;
      background: #fff;
    }

    .player-seek:disabled {
      cursor: default;
      opacity: .45;
    }

    .playlist-panel {
      border-top: 1px solid var(--border);
    }

    .playlist-heading {
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px 0 12px;
    }

    .playlist-heading span:last-child {
      letter-spacing: 0;
    }

    .track-list {
      max-height: 148px;
      margin: 0;
      padding: 0 0 5px;
      overflow: auto;
      list-style: none;
    }

    .track-row {
      width: 100%;
      min-width: 0;
      height: 38px;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      padding: 3px 10px;
      border: 0;
      border-left: 2px solid transparent;
      background: transparent;
      color: var(--fg);
      text-align: left;
      cursor: pointer;
    }

    .track-row:hover {
      background: var(--hover);
    }

    .track-row.current {
      border-left-color: var(--blue);
      background: var(--selected);
      color: #fff;
    }

    .track-thumb {
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #3c3c3c;
      background: #252526;
      color: #858585;
    }

    .track-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    .track-copy {
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .track-copy strong,
    .track-copy span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .track-copy strong {
      font-size: 12px;
      font-weight: 400;
    }

    .track-copy span,
    .track-number {
      color: var(--muted);
      font-size: 10px;
    }

    .player-empty {
      margin: 0;
      padding: 12px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
    }

    @media (max-width: 520px) {
      .player-now {
        grid-template-columns: 48px minmax(0, 1fr);
      }

      .player-cover {
        width: 48px;
        height: 48px;
      }

      .player-controls {
        grid-column: 1 / -1;
        justify-content: center;
      }
    }

    * {
  scrollbar-width: thin;
  scrollbar-color: #4b4b4b #181818;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #181818;
}

::-webkit-scrollbar-thumb {
  background: #424242;
  border: 2px solid #181818;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

::-webkit-scrollbar-corner {
  background: #181818;
}

/* polished interaction motion */
button,
a,
.tree button,
.track-row,
.art,
.art-frame,
.art img,
.profile > img,
.player-cover,
.player-cover img,
.player-seek::-webkit-slider-thumb {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease,
    opacity 160ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

button:not(:disabled):active {
  transform: scale(.94);
  transition-duration: 70ms;
}

.command:hover,
.profile-actions button:hover,
.player-control.primary:hover:not(:disabled) {
  box-shadow: 0 4px 14px #0005;
  transform: translateY(-1px);
}

.activity button:hover .codicon,
.title-actions button:hover .codicon,
.panel-actions button:hover .codicon,
.tab-actions button:hover .codicon {
  transform: scale(1.1);
}

.codicon {
  transition: color 140ms ease, opacity 140ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.tree button:hover .file-label,
.track-row:hover .track-copy strong {
  transform: translateX(2px);
}

.file-label,
.track-copy strong {
  transition: color 140ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}

.profile > img:hover {
  border-color: #666;
  box-shadow: 0 8px 24px #0006;
  transform: translateY(-3px) scale(1.015);
}

.art {
  animation: reveal 420ms both cubic-bezier(.2,.8,.2,1);
}

.art:nth-child(2) { animation-delay: 60ms; }
.art:nth-child(3) { animation-delay: 120ms; }
.art:nth-child(4) { animation-delay: 180ms; }

.art:hover {
  transform: translateY(-4px);
}

.art:hover .art-frame {
  border-color: #666;
  box-shadow: 0 10px 26px #0007;
}

.art:hover img {
  transform: scale(1.025);
}

.track-row:hover .track-thumb,
.track-row.current .track-thumb {
  border-color: #666;
  transform: scale(1.05);
}

.player-seek:not(:disabled):hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px #0078d444;
  transform: scale(1.2);
}

.player-seek:not(:disabled):hover::-moz-range-thumb {
  box-shadow: 0 0 0 4px #0078d444;
  transform: scale(1.2);
}

.line.active {
  transition: background-color 180ms ease;
}

.line.active .caret,
.terminal .caret {
  animation: caret-blink 1s steps(1, end) infinite;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes caret-blink {
  0%, 45% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* spring layout transitions */
.body {
  transition: grid-template-columns 420ms cubic-bezier(.22, 1.18, .35, 1);
}

.shell.side-hidden .body {
  grid-template-columns: 48px 0 minmax(0, 1fr);
}

.sidebar {
  width: 100%;
  opacity: 1;
  transform: translateX(0);
  transform-origin: left center;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.22, 1.18, .35, 1);
}

.shell.side-hidden .sidebar {
  display: grid;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-18px) scaleX(.96);
}

.editor-part {
  transition: grid-template-rows 420ms cubic-bezier(.22, 1.14, .35, 1);
}

.shell.panel-hidden .editor-part {
  grid-template-rows: minmax(0, 1fr) 0;
}

.panel {
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  transform-origin: bottom center;
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.22, 1.14, .35, 1);
}

.shell.panel-hidden .panel {
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px) scaleY(.96);
}

button,
.track-row,
.art,
.profile > img {
  transition-timing-function: cubic-bezier(.22, 1.12, .35, 1);
  transition-duration: 260ms;
}

@media (max-width: 720px) {
  .body,
  .shell.side-hidden .body {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .shell.side-hidden .sidebar {
    display: none;
  }
}

/* intentional half-second motion */
button,
a,
.codicon,
.file-label,
.track-copy strong,
.track-row,
.track-thumb,
.art,
.art-frame,
.art img,
.profile > img,
.player-cover,
.player-cover img,
.sidebar,
.panel,
.body,
.editor-part {
  transition-duration: 500ms !important;
}

.body,
.sidebar,
.editor-part,
.panel,
button,
.track-row,
.art,
.profile > img {
  transition-timing-function: cubic-bezier(.22, 1.12, .35, 1) !important;
}

.line.active .caret,
.terminal .caret {
  animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
}

.art {
  animation-duration: 500ms !important;
}

.code {
  scroll-behavior: smooth !important;
}

.line {
  transition: background-color 500ms ease, opacity 500ms ease, transform 500ms cubic-bezier(.22, 1.12, .35, 1);
}

.line.code-selected {
  background: #264f78;
  box-shadow: inset 2px 0 #75beff;
}

.line.code-deleting {
  opacity: 0;
  transform: translateX(-12px);
}

.line.code-selected::before {
  color: #c6d8ea;
}

.line > span {
  white-space: pre;
}

@property --rainbow-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 200deg;
}

.rainbow-mode {
  --rainbow-hue: 200deg;
  --blue: hsl(var(--rainbow-hue) 90% 62%);
  --link: hsl(calc(var(--rainbow-hue) + 35deg) 90% 68%);
  --rainbow: linear-gradient(110deg, #ff4d6d, #ffb703, #55e06f, #28c9ff, #8667ff, #ff5dc8, #ff4d6d);
  animation: rainbow-hue 5s linear infinite !important;
}

.rainbow-mode .activity button.active::before,
.rainbow-mode .profile-actions button,
.rainbow-mode .player-control.primary {
  background: var(--rainbow);
  background-size: 300% 100%;
  animation: rainbow-flow 4s linear infinite !important;
}

.rainbow-mode .player-control.primary:hover:not(:disabled) {
  background: var(--rainbow);
  background-size: 300% 100%;
}

.rainbow-mode .tab {
  position: relative;
  box-shadow: none;
}

.rainbow-mode .tab::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rainbow);
  background-size: 300% 100%;
  animation: rainbow-flow 4s linear infinite !important;
}

.rainbow-mode .player-seek {
  background: linear-gradient(to right, transparent var(--seek, 0%), #414141 var(--seek, 0%)), var(--rainbow);
  background-size: 100% 100%, 300% 100%;
  animation: rainbow-seek 4s linear infinite !important;
}

.rainbow-mode .track-row.current,
.rainbow-mode .panel-tabs button.active {
  border-image: var(--rainbow) 1;
}

.rainbow-mode .line.code-selected {
  box-shadow: inset 2px 0 var(--blue);
}

.rainbow-mode .boolean-setting:focus {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
}

.rainbow-mode :is(.link, .profile p span, .art-author b, .tree .codicon-symbol-method, .tab .codicon:first-child, .term-blue, .property, .var, .const, .heading) {
  color: transparent !important;
  background: var(--rainbow);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: rainbow-flow 4s linear infinite !important;
}

@keyframes rainbow-hue {
  to { --rainbow-hue: 560deg; }
}

@keyframes rainbow-flow {
  to { background-position: 300% 50%; }
}

@keyframes rainbow-seek {
  to { background-position: 0 0, 300% 50%; }
}

.meltdown-mode .music-player {
  pointer-events: none;
}

.meltdown-mode::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147481000;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 48%, #52000038 100%);
  box-shadow: inset 0 0 90px #9b00002b;
}

.gebura-stage {
  --gebura-x: 130px;
  --gebura-y: calc(100vh - 18px);
  --gebura-walk-duration: 0ms;
  --gebura-facing: 1;
  width: 460px;
  height: 360px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  pointer-events: none;
  transform: translate3d(calc(var(--gebura-x) - 230px), calc(var(--gebura-y) - 360px), 0);
  transition: transform var(--gebura-walk-duration) cubic-bezier(.28, .7, .25, 1);
  will-change: transform;
}

.gebura-stage.facing-right {
  --gebura-facing: -1;
}

.gebura-stage img {
  --sprite-height: 300px;
  --sprite-bottom: 0px;
  --sprite-x: -3px;
  width: auto;
  height: var(--sprite-height);
  position: absolute;
  left: 50%;
  margin-left: var(--sprite-x);
  bottom: var(--sprite-bottom);
  display: block;
  max-width: none;
  transform: translateX(-50%) scaleX(var(--gebura-facing));
  transform-origin: center bottom;
  user-select: none;
}

.gebura-stage[data-state="walk"] img {
  --sprite-height: 356px;
  --sprite-bottom: -37px;
  --sprite-x: -7px;
}

.gebura-stage[data-state="attack1"] img {
  --sprite-height: 653px;
  --sprite-bottom: -131px;
  --sprite-x: 58px;
}

.gebura-stage[data-state="attack2"] img {
  --sprite-height: 571px;
  --sprite-bottom: -61px;
  --sprite-x: -24px;
}

.gebura-stage.facing-right img {
  --sprite-x: 3px;
}

.gebura-stage.facing-right[data-state="walk"] img {
  --sprite-x: 7px;
}

.gebura-stage.facing-right[data-state="attack1"] img {
  --sprite-x: -58px;
}

.gebura-stage.facing-right[data-state="attack2"] img {
  --sprite-x: 24px;
}

.meltdown-shard {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147482000;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.shell.meltdown-impact {
  animation: meltdown-shake 480ms cubic-bezier(.2, .8, .25, 1) !important;
}

.meltdown-cracked {
  animation: meltdown-crack 480ms steps(2, end) !important;
}

@keyframes meltdown-shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  12% { transform: translate3d(-11px, 5px, 0) rotate(-.25deg); }
  25% { transform: translate3d(9px, -7px, 0) rotate(.22deg); }
  39% { transform: translate3d(-7px, -4px, 0) rotate(-.16deg); }
  54% { transform: translate3d(6px, 5px, 0) rotate(.12deg); }
  70% { transform: translate3d(-4px, 2px, 0); }
  84% { transform: translate3d(2px, -2px, 0); }
}

@keyframes meltdown-crack {
  0%, 100% { filter: none; }
  35% { filter: brightness(2.2) saturate(.2); }
  60% { filter: brightness(.65) saturate(1.8); }
}

.redmist-quote-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
  pointer-events: none !important;
  isolation: isolate;
  transform: translateZ(0);
}

.redmist-quote {
  width: 112vw;
  position: absolute;
  left: -6vw;
  top: var(--quote-y, 16vh);
  z-index: 1;
  color: #d51c23;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.5vw, 72px);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: .13em;
  text-align: center;
  -webkit-text-stroke: .8px #480306;
  text-shadow: 0 2px 0 #2b0000, 2px 4px 2px #050000e6, 0 0 8px #ff10109c, 0 0 18px #720000bd;
  transform: rotate(var(--quote-rotation, -10deg));
  transform-origin: center;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: normal;
  filter: saturate(1.15) contrast(1.08);
}

.redmist-quote.medium {
  font-size: clamp(31px, 3.8vw, 61px);
}

.redmist-quote.long {
  font-size: clamp(25px, 3.15vw, 51px);
  line-height: 1.45;
}

.redmist-word {
  display: inline-block;
  white-space: nowrap;
}

.redmist-letter {
  display: inline-block;
  opacity: 0;
  animation: redmist-letter 5.7s ease-out var(--letter-delay, 0ms) both !important;
  will-change: transform, opacity, filter;
}

@keyframes redmist-letter {
  0% {
    opacity: 0;
    filter: blur(2px);
    transform: translate(var(--letter-enter-x), var(--letter-enter-y)) rotate(var(--letter-enter-rotation)) scale(.96);
  }
  11% {
    opacity: .96;
  }
  23%, 72% {
    opacity: .94;
    filter: blur(0);
    transform: translate(var(--letter-x), var(--letter-y)) rotate(var(--letter-rotation)) scale(1);
  }
  100% {
    opacity: 0;
    filter: blur(1.5px);
    transform: translate(var(--letter-x), calc(var(--letter-y) - 3px)) rotate(var(--letter-rotation)) scale(1.015);
  }
}

.boolean-setting {
  display: inline-block;
  min-width: 36px;
  border-radius: 2px;
  cursor: text;
  caret-color: #fff;
}

.boolean-setting:focus {
  outline: 1px solid var(--blue);
  background: #0078d433;
}

.boolean-setting.invalid {
  color: #f48771;
  outline-color: #f48771;
}

.physics-active .sidebar,
.physics-active .panel {
  transform: none !important;
}

.physics-piece {
  position: fixed !important;
  inset: auto !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  transform: translate3d(var(--physics-x),var(--physics-y),0) rotate(var(--physics-angle)) !important;
  transform-origin: center !important;
  transition: none !important;
  animation: none !important;
  cursor: grab !important;
  touch-action: none;
  user-select: none;
  will-change: transform;
}

.physics-piece.physics-dragging {
  cursor: grabbing !important;
  filter: brightness(1.1);
  box-shadow: 0 12px 30px #0008;
}

.physics-active {
  cursor: default;
}