/* The animated screens: the program, the plugin (full and compact) and the tray drawn in HTML,
   as they look (the glow look, its five themes), with their own light moving. Laid out at the
   programs' own pixel sizes and scaled to the stage; phones see still pictures of them. */

.showcase {
  --mg: #0c0a10; --ma: #ff7a2f; --mb: #ff4f8b; --mc: #6f7bff;
  --ml1: rgba(255,122,47,.25); --ml2: rgba(120,80,255,.20); --ml3: rgba(40,140,255,.26);
  --mm1: #34d399; --mm2: #a3e635; --mink: #fff; --macc: #ff7a2f;
}
.stage { background: #0a0b0e; }
.slide .mk-frame { position: relative; flex: none; }
.slide .mk-shot { display: none; }

.mk { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 10px;
  background: var(--mg); color: #fff; font-family: Verdana, Geneva, "DejaVu Sans", sans-serif; font-size: 10.3px; line-height: 1.2;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .07); transition: background .6s ease;
  -webkit-user-select: none; user-select: none; }
.mk * { box-sizing: border-box; }
.mk .a { position: absolute; }
.mk .t { display: flex; align-items: center; white-space: nowrap; }
.mk .c { justify-content: center; text-align: center; }
.mk .r { justify-content: flex-end; text-align: right; }
.mk .mono { font-family: "Lucida Console", Monaco, "DejaVu Sans Mono", monospace; }
.mk .dim { color: rgba(255, 255, 255, .62); }

/* The ground: three lights drifting slowly */
.mk .lights { position: absolute; inset: 0; pointer-events: none; }
.mk .lights i { position: absolute; border-radius: 50%; }
.mk .lights i:nth-child(1) { width: 84%; aspect-ratio: 1; left: -15%; top: 26%; background: radial-gradient(closest-side, var(--ml1), transparent); animation: mk-d1 36s ease-in-out infinite alternate; }
.mk .lights i:nth-child(2) { width: 84%; aspect-ratio: 1; left: 31%; top: -40%; background: radial-gradient(closest-side, var(--ml2), transparent); animation: mk-d2 44s ease-in-out infinite alternate; }
.mk .lights i:nth-child(3) { width: 68%; aspect-ratio: 1; left: 58%; top: 40%; background: radial-gradient(closest-side, var(--ml3), transparent); animation: mk-d3 32s ease-in-out infinite alternate; }
@keyframes mk-d1 { to { transform: translate(8%, -7%) scale(1.08); } }
@keyframes mk-d2 { to { transform: translate(-10%, 8%) scale(1.1); } }
@keyframes mk-d3 { to { transform: translate(-5%, -10%) scale(1.06); } }

/* Glass, tracks, pills */
.mk .glass { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.14); }
.mk .track { border-radius: 11px; background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.08); }
.mk .seg { border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; }
.mk .seg.on { background: rgba(255,255,255,.92); color: #121014; }
.mk .pill { border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; }
.mk .pill.dd { justify-content: space-between; padding: 0 11px; color: #fff; }
.mk .pill.dd::after, .mk .well::after { content: "\25BE"; font-size: 9px; color: rgba(255,255,255,.6); }
.mk .well { border-radius: 8px; background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: space-between; padding: 0 11px; white-space: nowrap; }
.mk .pill.primary { border: 0; background: linear-gradient(90deg, var(--ma), var(--mb)); color: var(--mink); font-weight: 700; }
.mk .pill.tint { background: linear-gradient(90deg, color-mix(in srgb, var(--ma) 32%, transparent), color-mix(in srgb, var(--mb) 32%, transparent)); border: 1.2px solid color-mix(in srgb, var(--ma) 90%, transparent); color: rgba(255,255,255,.88); }
.mk .h { font-size: 8.6px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); white-space: nowrap; }
.mk .chip { position: absolute; height: 22px; padding: 0 8px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.08);
  font-family: "Lucida Console", Monaco, monospace; font-size: 9.4px; color: rgba(255,255,255,.82); display: flex; align-items: center; white-space: nowrap; }

.mk .seg.ell { display: block; line-height: 26px; padding: 0 8px; text-overflow: ellipsis; text-align: center; }

/* Sliders, switches (the plugin's at its 80 %) */
.mk-plugin .slider .knob, .mk-compact .fader .knob { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; }
.mk-compact .fader .knob { margin: 0 0 -5.5px -5.5px; }
.mk-plugin .tg b { width: 24px; height: 14px; }
.mk-plugin .tg b::after { width: 10px; height: 10px; }
.mk-plugin .tg.on b::after { left: 11px; }
.mk .slider .rail { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(255,255,255,.13); }
.mk .slider .fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(90deg, var(--ma), var(--mb)); }
.mk .slider .knob, .mk .fader .knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 3px color-mix(in srgb, var(--mb) 22%, transparent); }
.mk .fader .rail { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: rgba(255,255,255,.13); }
.mk .fader .fill { position: absolute; bottom: 0; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; background: linear-gradient(0deg, var(--ma), var(--mb)); }
.mk .fader .knob { left: 50%; top: auto; margin: 0 0 -7px -7px; }
.mk .tg { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: rgba(255,255,255,.8); }
.mk .tg b { position: relative; flex: none; width: 30px; height: 17px; border-radius: 9px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.24); }
.mk .tg b::after { content: ""; position: absolute; top: 1px; left: 1px; width: 13px; height: 13px; border-radius: 50%; background: rgba(255,255,255,.55); transition: left .3s ease, background .3s ease; }
.mk .tg.on b { background: linear-gradient(90deg, var(--ma), var(--mb)); border-color: transparent; }
.mk .tg.on b::after { left: 14px; background: var(--mink); }

/* The big switch: off, glass; on, the theme's gradient running and a ring inviting a click */
.mk .switch { border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: color .5s ease; }
.mk .switch::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(90deg, var(--ma), var(--mb), var(--ma), var(--mb), var(--ma)); background-size: 400% 100%; animation: mk-run 6s linear infinite; }
.mk .switch > span { position: relative; display: flex; align-items: center; gap: 10px; }
.mk .switch .lockup { display: block; width: 246px; height: 26px; background: currentColor;
  -webkit-mask: url(/img/logo-dark-bg.svg) no-repeat left center / contain; mask: url(/img/logo-dark-bg.svg) no-repeat left center / contain; }
.mk .switch.on { color: var(--mink); border-color: transparent; }
.mk .switch.on::before { opacity: 1; }
.mk .switch.on::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; animation: mk-ring 2.4s ease-out infinite; }
@keyframes mk-run { to { background-position: 66.667% 0; } }
@keyframes mk-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mb) 50%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }

/* Levels and their lights */
.mk .bar { position: absolute; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; }
.mk .bar i { position: absolute; left: 0; bottom: 0; border-radius: 3px; }
.mk .bar.up i { right: 0; height: 0; background: linear-gradient(0deg, var(--mm1), var(--mm2)); }
.mk .bar.across i { top: 0; width: 0; background: linear-gradient(90deg, var(--mm1), var(--mm2)); }
.mk .bar.hot i { background: #ff5a5f; }
.mk .bar em { position: absolute; background: rgba(255,255,255,.85); }
.mk .bar.up em { left: 0; right: 0; height: 2px; }
.mk .bar.across em { top: 0; bottom: 0; width: 2px; }
.mk .mark { position: absolute; background: #ff5a5f; }
.mk .lamp { border-radius: 6px; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center;
  font-size: 8.2px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.55); }

/* Graphs: the program's, as it always is; the plugin's result in the theme, drawn in when shown */
.mk .plate { border-radius: 8px; background: rgba(8,8,12,.6); border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.mk svg { position: absolute; overflow: visible; }
.mk .draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mk.boot .draw { animation: mk-draw 1.6s cubic-bezier(.45, 0, .25, 1) both; }
.mk.boot .afterdraw { animation: mk-fade 1.2s ease 1.1s both; }
@keyframes mk-draw { from { stroke-dashoffset: 1; } }
@keyframes mk-fade { from { opacity: 0; } }
.mk .breathe { animation: mk-breathe 3.2s ease-in-out infinite alternate; }
@keyframes mk-breathe { from { opacity: .45; } to { opacity: .9; } }

/* The tray's corner and the compact plugin, with a few words beside them */
.slide.side { justify-content: flex-end; align-items: center; padding: 4% 7% 4% 5%; }
.slide.side .tray-note { margin-right: auto; }
.slide.tray .mk-frame { align-self: flex-end; }

/* The theme swatches over the screens */
.showcase .swatches { display: flex; gap: 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.showcase .swatches button { width: 22px; height: 22px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.showcase .swatches button:hover { transform: scale(1.12); }
.showcase .swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }

@media (max-width: 720px) {
  .slide .mk-frame { display: none; }
  .slide .mk-shot { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
  .showcase .swatches { display: none; }
  .slide.side { justify-content: center; padding: 4%; }
}
.mk-still .mk *, .mk-still .mk *::before, .mk-still .mk *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mk .lights i, .mk .switch::before, .mk .switch.on::after, .mk .breathe { animation: none !important; }
}