:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  color: #bdbdbd;
  background: #000;
  font: 300 13px/1.45 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .06em;
  text-transform: lowercase;
}
button, select { font: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
.gutter-tools { position: fixed; inset: 0; z-index: 81; overflow: visible; pointer-events: none; }
.gutter-tools > * { pointer-events: auto; }
.kettenkrad-helper {
  position: absolute;
  left: clamp(80px, 9.375vw, 192px);
  top: 106px;
  z-index: 82;
  width: clamp(110px, 7.35vw, 150px);
  padding: 0;
  background: transparent;
  border: 0;
  transform: translateX(-50%);
  cursor: pointer;
}
.kettenkrad-helper img { display: block; width: 100%; opacity: 1; filter: none; transition: transform .3s ease, filter .25s ease; }
.kettenkrad-helper:hover img { filter: blur(1.1px); transform: translateY(-2px); }
.kettenkrad-helper.wiggle img { animation: wiggle .48s ease; }
.floating-note {
  position: absolute;
  left: clamp(12px, 5.96vw, 122px);
  bottom: clamp(16px, 8.77vh, 93px);
  z-index: 90;
  width: 140px;
  height: 106px;
  min-width: 112px;
  min-height: 25px;
  max-width: min(420px, 80vw);
  max-height: min(500px, 75vh);
  overflow: hidden;
  resize: both;
  color: #bdbdbd;
  background: #000;
  border: 1px solid currentColor;
}
.floating-note h2 { display: flex; justify-content: space-between; margin: 0; padding: 1px 3px; border-bottom: 1px dotted currentColor; font-size: 11px; font-weight: 300; cursor: move; }
.floating-note h2 button { width: 20px; padding: 0; color: inherit; background: transparent; border: 0; cursor: pointer; }
.notepad-surface { height: calc(100% - 22px); padding: 6px; overflow: auto; outline: none; font: 400 11px/1.3 'Doto', "Helvetica Neue", Helvetica, Arial, sans-serif; }
.notepad-surface img { display: block; max-width: 100%; max-height: 120px; }
.floating-note.minimized { width: 100px !important; height: 23px !important; resize: none; }
.floating-note.minimized .notepad-surface { display: none; }
.user-drop { position: fixed; z-index: 78; width: min(280px, 34vw); margin: 0; cursor: move; touch-action: none; user-select: none; }
.user-drop.fresh-drop { transform: translate(-50%,-50%); }
.user-drop img { display: block; width: 100%; max-height: 340px; object-fit: contain; pointer-events: none; }
.drop-active::after { content: "drop image anywhere"; position: fixed; inset: 12px; z-index: 9998; display: grid; place-items: center; color: #aaa; border: 1px dashed currentColor; background: rgba(0,0,0,.72); pointer-events: none; }
.copyright { position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); font-size: 10px; }
.blink { display: inline-block; animation: blink 1.1s steps(2,end) infinite; }
.player,
.page-stage,
.album-radio,
.gutter-tools,
.copyright { transition: opacity .82s cubic-bezier(.22,.74,.18,1), transform .92s cubic-bezier(.16,1,.3,1), filter .82s ease; }
html.page-loading .player,
html.page-loading .page-stage,
html.page-loading .album-radio,
html.page-loading .gutter-tools { opacity: 0; transform: translateY(12px); filter: blur(3px); }
html.page-loaded .player,
html.page-loaded .page-stage,
html.page-loaded .album-radio,
html.page-loaded .gutter-tools { opacity: 1; transform: translateY(0); filter: blur(0); }
html.page-leaving .player,
html.page-leaving .page-stage,
html.page-leaving .album-radio,
html.page-leaving .gutter-tools,
html.page-leaving .user-drop { opacity: 0; transform: translateY(7px); filter: blur(3px); pointer-events: none; }
html.page-loading .copyright { opacity: 0; transform: translate(-50%, 12px); filter: blur(3px); }
html.page-loaded .copyright { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
html.page-leaving .copyright { opacity: 0; transform: translate(-50%, 7px); filter: blur(3px); pointer-events: none; }
html.route-darkening::after,
html.route-lightening::after { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; opacity: 0; animation: route-tone .72s ease forwards; }
html.route-darkening::after { background: #000; }
html.route-lightening::after { background: #ffffff; }
html[data-theme="light"] body { color: #222; background: #ffffff; }
html[data-theme="light"] .floating-note { color: #222; background: #ffffff; }
html[data-theme="light"] .kettenkrad-helper img { filter: invert(1); mix-blend-mode: multiply; }
html.mode-flicker::before { content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; background: #fff; mix-blend-mode: difference; animation: mode-flicker 160ms steps(1,end) both; }
@keyframes mode-flicker { 0%,24.999%{opacity:1}25%,49.999%{opacity:0}50%,74.999%{opacity:.5}75%,100%{opacity:0} }
@keyframes blink { 50% { opacity: 0; } }
@keyframes wiggle { 0%,100%{transform:translateY(-2px) rotate(0)}25%{transform:translateY(-2px) rotate(-2deg)}55%{transform:translateY(-1px) rotate(1.6deg)}80%{transform:translateY(-2px) rotate(-.8deg)} }
@keyframes route-tone { to { opacity: 1; } }
@media (max-width: 780px) {
  .kettenkrad-helper { left: 60px; top: 112px; width: 100px; }
  .floating-note { left: 10px; bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) { .player, .page-stage, .album-radio, .gutter-tools, .copyright { transition: none; } }