/* Mashups player (media.js): one root per window, `.mp-<kind>` picks the era's chrome. */
.wbody.mp-body { padding: 0; overflow: hidden; }
.mp-root { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; outline: none; user-select: none; }
.mp-root:fullscreen { background: #000; }
.mp-screen:fullscreen { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; border: 0; border-radius: 0; background: #000; }
.mp-screen:fullscreen .mp-media, .mp-screen:fullscreen .mp-frame, .mp-screen:fullscreen .mp-vid { inset: 0; width: 100%; height: 100%; }
.mp-screen { position: relative; flex: 1; min-height: 120px; background: #000; overflow: hidden; }
.mp-media { position: absolute; inset: 0; }
.mp-frame, .mp-vid { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
.mp-screen.local .mp-frame, .mp-screen:not(.local) .mp-vid { visibility: hidden; }
.mp-poster { position: absolute; inset: 0; display: grid; place-items: center; background: #000; transition: opacity .3s; }
.mp-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mp-poster-play { position: relative; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.mp-poster-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.mp-screen.started .mp-poster { opacity: 0; pointer-events: none; }
.mp-shield { position: absolute; inset: 0; cursor: pointer; }
.mp-b { display: inline-grid; place-items: center; padding: 0; cursor: pointer; color: inherit; }
.mp-b svg { width: 14px; height: 14px; fill: currentColor; }
.mp-flex { flex: 1; }
.mp-seek { position: relative; height: 14px; cursor: pointer; touch-action: none; flex: 1; min-width: 60px; }
.mp-seek-track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #555; overflow: hidden; }
.mp-seek-fill { height: 100%; width: 0; background: #39f; }
.mp-seek-knob { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; }
.mp-vol { width: 70px; }
.mp-list { list-style: none; margin: 0; padding: 0; overflow: auto; }
.mp-item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; cursor: default; }
.mp-it { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-it small { display: block; opacity: .7; font-size: 10px; }
.mp-id { font-variant-numeric: tabular-nums; opacity: .75; }
.mp-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-error { position: absolute; inset: 0; display: none; place-items: center; padding: 16px; background: rgba(0, 0, 0, .78); color: #eee; font: 13px/1.4 system-ui, sans-serif; }
.mp-screen.failed .mp-error { display: grid; }
.mp-screen.failed .mp-poster { opacity: .5; }
.mp-error-box { max-width: 340px; text-align: center; display: grid; gap: 6px; justify-items: center; }
.mp-error-box b { font-size: 15px; } .mp-error-box p { margin: 0; color: #bbb; }
.mp-error-box a { color: #8cc8ff; } .mp-error-box button { margin-top: 4px; }
/* auto-hiding chrome */
.mp-root.mp-idle { cursor: none; }
.mp-root.mp-idle .mce-osd, .mp-root.mp-idle .mce-back, .mp-root.mp-idle .w12-ctl, .mp-root.mp-idle .w12-top, .mp-root.mp-idle .qtx-hud { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- Windows Media Player 6.4 (98) */
.mp-wmp6 { background: var(--face, #c0c0c0); gap: 3px; padding: 3px; }
.mp-wmp6 .mp-screen { border: 2px inset #fff; }
.mp-wmp6 .mp-trackbar { flex: none; height: 18px; }
.mp-wmp6 .mp-trackbar .mp-seek-track { height: 4px; background: #fff; border: 1px inset #808080; box-sizing: border-box; }
.mp-wmp6 .mp-trackbar .mp-seek-fill { background: none; }
.mp-wmp6 .mp-trackbar .mp-seek-knob { width: 9px; height: 16px; margin: -8px 0 0 -4px; border-radius: 0; background: #c0c0c0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080; }
.mp-wmp6 .mp-bar { display: flex; align-items: center; gap: 1px; }
.mp-wmp6 .mp-b { width: 24px; height: 22px; color: #000; }
.mp-wmp6 .mp-b svg { width: 11px; height: 11px; }
.mp-wmp6 .mp-sep { width: 6px; }
.mp-wmp6 .mp-info { background: #000; color: #0f0; font: 11px/1.45 Tahoma, "MS Sans Serif", sans-serif; padding: 3px 6px; }
.mp-wmp6 .mp-info b { color: #9f9; font-weight: normal; display: inline-block; width: 46px; }

/* ---------------------------------------------------------------- Windows XP Media Center */
.mp-mce { background: radial-gradient(120% 90% at 85% 0%, #3f7fd6 0%, #164a9e 38%, #0a2a66 75%, #061b45 100%); color: #fff;
  font-family: "Segoe UI", Tahoma, sans-serif; }
.mce-home { position: absolute; inset: 0; padding: 18px 28px; overflow: auto; }
.mce-swoosh { position: absolute; left: -10%; right: -10%; bottom: -60px; height: 200px; border-radius: 50%; border-top: 2px solid rgba(160, 210, 255, .35);
  background: radial-gradient(60% 100% at 50% 0%, rgba(120, 190, 255, .18), transparent); pointer-events: none; }
.mce-head { display: flex; align-items: center; gap: 16px; }
.mce-orb, .mce-orb-small { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; flex: none;
  background: radial-gradient(circle at 38% 30%, #c9f78e, #4cae26 55%, #1f6a0e); box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 0 18px rgba(130, 230, 90, .55); }
.mce-orb::after, .mce-orb-small::after { content: ""; display: block; width: 46%; height: 46%; margin: 27%;
  background: linear-gradient(#fff 0 0) 0 0/46% 46% no-repeat, linear-gradient(#fff 0 0) 100% 0/46% 46% no-repeat,
    linear-gradient(#fff 0 0) 0 100%/46% 46% no-repeat, linear-gradient(#fff 0 0) 100% 100%/46% 46% no-repeat; opacity: .92; }
.mce-crumb { font-size: 34px; font-weight: 300; letter-spacing: .5px; color: #e8f2ff; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); text-transform: lowercase; }
.mce-sub { margin: 18px 0 10px 4px; font-size: 18px; color: #bcd8ff; }
.mce-sub span { font-size: 13px; color: #7fa8e0; margin-left: 10px; }
.mce-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; }
.mce-tile { display: flex; flex-direction: column; gap: 8px; padding: 6px; border: 2px solid transparent; border-radius: 6px; background: none; color: #dbe9ff;
  font: 15px "Segoe UI", Tahoma, sans-serif; text-align: left; cursor: pointer; transition: transform .15s; }
.mce-tile img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); }
.mce-tile:hover, .mce-tile:focus-visible { outline: none; transform: scale(1.04); border-color: #9fd2ff;
  background: linear-gradient(rgba(150, 205, 255, .35), rgba(60, 130, 230, .25)); box-shadow: 0 0 16px rgba(120, 190, 255, .7); color: #fff; }
.mce-play { position: absolute; inset: 0; display: none; }
.mp-mce.watching .mce-home { display: none; }
.mp-mce.watching .mce-play { display: block; }
.mce-play .mp-screen { position: absolute; inset: 0; }
.mce-back { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; color: #fff; cursor: pointer;
  background: radial-gradient(circle at 40% 30%, #7fb8ff, #1d58b8 60%, #0b2f70); box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); transition: opacity .4s; }
.mce-back svg { width: 16px; height: 16px; }
.mce-orb-small { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; opacity: .8; pointer-events: none; }
.mp-mce.mp-idle .mce-orb-small { opacity: 0; transition: opacity .4s; }
.mce-osd { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 40px 22px 16px;
  background: linear-gradient(transparent, rgba(5, 25, 70, .92) 55%); transition: opacity .4s; }
.mce-osd-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.mce-now-title { font-size: 20px; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mce-seek .mp-seek-track { height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.mce-seek .mp-seek-fill { background: linear-gradient(#a8e4ff, #3a9bf0); }
.mce-seek .mp-seek-knob { display: none; }
.mp-mce .mp-time { font-size: 13px; color: #b4d2ff; }
.mce-cluster { display: flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 26px;
  background: linear-gradient(rgba(90, 150, 230, .55), rgba(20, 60, 140, .75)); box-shadow: inset 0 1px rgba(255, 255, 255, .4), 0 2px 8px rgba(0, 0, 0, .5); }
.mce-cluster .mp-b { width: 28px; height: 28px; border: 0; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #6aa6f2, #1b4c9c); color: #fff; }
.mce-cluster .mp-b:hover { box-shadow: 0 0 10px #8fd0ff; }
.mce-cluster .mce-big { width: 42px; height: 42px; background: radial-gradient(circle at 40% 30%, #c9f78e, #44a823 55%, #1f6a0e); }
.mce-cluster .mce-big svg { width: 18px; height: 18px; }
.mce-vol { width: 64px; }

/* ---------------------------------------------------------------- Windows Media Player 11 (Vista) */
.mp-wmp11 { background: #000; color: #e8e8e8; font: 12px "Segoe UI", Tahoma, sans-serif; }
.w11-tabs { display: flex; gap: 2px; padding: 4px 8px 0; height: 34px; box-sizing: border-box;
  background: linear-gradient(#4a4a4a, #1a1a1a 48%, #000 52%, #111); border-bottom: 1px solid #333; }
.w11-tab { padding: 6px 14px; border-radius: 3px 3px 0 0; color: #fff; text-shadow: 0 1px #000; }
.w11-tab i { font-style: normal; font-size: 9px; margin-left: 4px; opacity: .6; }
.w11-tab.on { background: linear-gradient(#8bc4ff, #2a6fc9 48%, #0d4aa3 52%, #2a6fc9); box-shadow: inset 0 1px rgba(255, 255, 255, .5); }
.w11-main { flex: 1; min-height: 0; display: flex; }
.w11-pane { width: 220px; flex: none; display: flex; flex-direction: column; background: linear-gradient(90deg, #f7f9fc, #e9eef5); color: #222; border-left: 1px solid #333; }
.w11-pane-h { padding: 8px 10px; font-size: 14px; color: #1f4d8a; border-bottom: 1px solid #c9d3df; background: linear-gradient(#fff, #e5ebf2); }
.w11-list { flex: 1; }
.w11-list .mp-item { padding: 5px 10px; border-bottom: 1px solid #e1e6ee; }
.w11-list .mp-item:hover { background: #e3f0fd; }
.w11-list .mp-item.on { background: linear-gradient(#dcebfc, #c1dcfc); color: #003399; font-weight: 600; }
.w11-pane-f { padding: 6px 10px; color: #666; border-top: 1px solid #c9d3df; }
.w11-ctl { background: linear-gradient(#3b3b3b, #121212 45%, #000 55%, #1c1c1c); border-top: 1px solid #555; }
.w11-seek { height: 10px; display: block; }
.w11-seek .mp-seek-track { height: 3px; margin-top: -1px; background: #333; }
.w11-seek .mp-seek-fill { background: linear-gradient(90deg, #1f6fd1, #7fd0ff); }
.w11-seek .mp-seek-knob { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: radial-gradient(#fff, #9cd4ff); }
.w11-row { display: flex; align-items: center; padding: 2px 10px 6px; gap: 10px; }
.w11-now { flex: 1; min-width: 0; display: grid; overflow: hidden; }
.w11-now b, .w11-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w11-now b { font-weight: 600; } .w11-now span { color: #9a9a9a; font-size: 11px; }
.w11-mid { display: flex; align-items: center; gap: 4px; }
.w11-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.mp-wmp11 .mp-b, .mp-wmp12 .mp-b { width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: #ddd; }
.mp-wmp11 .mp-b:hover, .mp-wmp12 .mp-b:hover { color: #fff; background: radial-gradient(rgba(140, 200, 255, .5), transparent 70%); }
.mp-wmp11 .w-round, .mp-wmp12 .w-round { width: 40px; height: 40px; color: #fff; border: 1px solid #0a0a0a;
  background: radial-gradient(circle at 50% 30%, #9ad6ff, #2a7fd8 45%, #0b3b7a 80%); box-shadow: inset 0 1px rgba(255, 255, 255, .6), 0 0 10px rgba(80, 170, 255, .6); }
.mp-wmp11 .w-round:hover, .mp-wmp12 .w-round:hover { background: radial-gradient(circle at 50% 30%, #c4e9ff, #45a0f5 45%, #0f4c9c 80%); }
.mp-wmp11 .w-round svg, .mp-wmp12 .w-round svg { width: 16px; height: 16px; }
.w-vol { width: 70px; }

/* ---------------------------------------------------------------- Windows Media Player 12 (7), Now Playing */
.mp-wmp12 { background: #000; color: #eee; font: 12px "Segoe UI", Tahoma, sans-serif; }
.mp-wmp12 .mp-screen { position: absolute; inset: 0; }
.w12-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; gap: 6px; padding: 6px 8px;
  background: linear-gradient(rgba(0, 0, 0, .7), transparent); transition: opacity .4s; }
.w12-lib { border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; background: rgba(40, 40, 40, .6); color: #fff; font: inherit; padding: 2px 10px; cursor: pointer; }
.w12-side { position: absolute; top: 0; right: 0; bottom: 70px; width: 240px; display: none; flex-direction: column; background: rgba(20, 24, 30, .88);
  border-left: 1px solid rgba(255, 255, 255, .15); backdrop-filter: blur(6px); }
.mp-wmp12.w12-showlist .w12-side { display: flex; }
.mp-wmp12.w12-showlist .w12-top { right: 240px; }
.w12-side-h { padding: 34px 10px 6px; font-size: 14px; color: #9cc8ff; }
.w12-list .mp-item { padding: 6px 10px; }
.w12-list .mp-item:hover { background: rgba(120, 180, 255, .15); }
.w12-list .mp-item.on { background: rgba(120, 180, 255, .3); }
.w12-list .mp-th { width: 64px; aspect-ratio: 16/9; object-fit: cover; }
.w12-ctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .85) 45%); transition: opacity .4s; }
.w12-seek .mp-seek-track { height: 3px; background: rgba(255, 255, 255, .25); }
.w12-seek .mp-seek-fill { background: linear-gradient(90deg, #2d8cf0, #9cdcff); }
.w12-seek .mp-seek-knob { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.w12-row { display: flex; align-items: center; gap: 10px; }
.w12-t { flex: 1; color: #bbb; }
.w12-mid { display: flex; align-items: center; gap: 4px; }

/* ---------------------------------------------------------------- QuickTime Player X (Snow Leopard) */
body[data-family="aqua"] .window.mp-darktitle:not(.skin) .titlebar { background: linear-gradient(#5a5a5a, #2e2e2e) !important; color: #e8e8e8 !important;
  border-bottom-color: #111 !important; text-shadow: 0 -1px #000 !important; }
body[data-family="aqua"] .window.mp-darktitle:not(.skin):not(.active) .titlebar { background: linear-gradient(#4a4a4a, #333) !important; color: #999 !important; }
.mp-qtx { background: #000; color: #fff; font: 11px "Lucida Grande", "Helvetica Neue", sans-serif; }
.mp-qtx .mp-screen { position: absolute; inset: 0; }
.qtx-hud { position: absolute; left: 50%; bottom: 18px; width: min(380px, calc(100% - 24px)); transform: translateX(-50%); padding: 6px 12px 8px; border-radius: 9px;
  background: linear-gradient(rgba(45, 45, 45, .82), rgba(15, 15, 15, .86)); box-shadow: inset 0 1px rgba(255, 255, 255, .15), 0 4px 16px rgba(0, 0, 0, .6);
  border: 1px solid rgba(0, 0, 0, .7); transition: opacity .5s; }
.qtx-row { display: flex; align-items: center; }
.qtx-row > span { display: flex; align-items: center; gap: 4px; }
.qtx-vol, .qtx-right { flex: 1; } .qtx-right { justify-content: flex-end; }
.mp-qtx .mp-b { width: 26px; height: 26px; border: 0; background: none; color: #eee; }
.mp-qtx .mp-b:hover { color: #fff; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .7)); }
.mp-qtx .qtx-play svg { width: 20px; height: 20px; }
.qtx-vs { width: 56px; }
.qtx-scrub { gap: 6px; margin-top: 2px; }
.qtx-seek .mp-seek-track { height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .25); box-sizing: border-box; }
.qtx-seek .mp-seek-fill { background: linear-gradient(#ccc, #888); }
.qtx-seek .mp-seek-knob { width: 2px; height: 10px; margin: -5px 0 0 -1px; border-radius: 0; }
.mp-qtx .mp-time { font-size: 10px; color: #ddd; min-width: 36px; } .mp-qtx .qt-r { text-align: right; }

/* ---------------------------------------------------------------- QuickTime 4 (Mac OS 9) */
.mp-qt4 { padding: 10px 12px 12px; gap: 10px; color: #222; font: 11px Charcoal, "Chicago", Geneva, sans-serif;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .05) 1px 2px, transparent 2px 3px),
    linear-gradient(#d8d8d8, #b8b8b8 40%, #c8c8c8 60%, #a8a8a8); }
.qt4-frame { flex: 1; min-height: 0; display: flex; padding: 3px; border-radius: 4px; background: #222; box-shadow: inset 0 1px 2px #000, 0 1px rgba(255, 255, 255, .7); }
.qt4-ctl { display: flex; align-items: center; gap: 10px; }
.qt4-play { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #555; color: #222; flex: none;
  background: radial-gradient(circle at 40% 30%, #fff, #c9c9c9 50%, #8a8a8a); box-shadow: 0 1px 2px rgba(0, 0, 0, .5), inset 0 -2px 3px rgba(0, 0, 0, .25); }
.qt4-play svg { width: 18px; height: 18px; }
.qt4-lcd { flex: 1; min-width: 0; padding: 4px 10px; border-radius: 12px; border: 1px solid #777; color: #1b2a12;
  background: linear-gradient(#cfe1b9, #a9c48c); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35), 0 1px rgba(255, 255, 255, .7); }
.qt4-lcd-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt4-lcd-row { display: flex; align-items: center; gap: 6px; }
.qt4-seek .mp-seek-track { height: 4px; margin-top: -2px; background: rgba(30, 50, 20, .25); }
.qt4-seek .mp-seek-fill { background: #2c4a1c; }
.qt4-seek .mp-seek-knob { width: 0; height: 0; margin: -9px 0 0 -5px; border-radius: 0; background: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #1b2a12; }
.qt4-pad { display: grid; grid-template-columns: repeat(2, 20px); gap: 3px; }
.qt4-pad .mp-b { width: 20px; height: 18px; border-radius: 9px; border: 1px solid #666; color: #333; background: linear-gradient(#f4f4f4, #b4b4b4); }
.qt4-pad .mp-b svg { width: 9px; height: 9px; }
.qt4-wheel { position: relative; width: 16px; height: 44px; border-radius: 4px; border: 1px solid #555; overflow: hidden; cursor: ns-resize; flex: none;
  background: linear-gradient(90deg, #777, #eee 45%, #999); touch-action: none; }
.qt4-wheel i { position: absolute; left: 1px; right: 1px; height: 1px; background: rgba(0, 0, 0, .45); top: calc(var(--off, 0px) + 2px); }
.qt4-wheel i:nth-child(2) { top: calc(var(--off, 0px) + 9px); } .qt4-wheel i:nth-child(3) { top: calc(var(--off, 0px) + 16px); }
.qt4-wheel i:nth-child(4) { top: calc(var(--off, 0px) + 23px); } .qt4-wheel i:nth-child(5) { top: calc(var(--off, 0px) + 30px); }
.qt4-wheel i:nth-child(6) { top: calc(var(--off, 0px) + 37px); }
.qt4-q { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font: bold 15px Georgia, serif; color: #fff;
  background: radial-gradient(circle at 40% 30%, #9cc8ff, #2a5fb0 60%, #0d2c5e); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------- Totem, Movie Player (Ubuntu 8.04) */
.mp-totem { background: #efebe7; color: #222; font: 12px "DejaVu Sans", sans-serif; }
.tt-main { flex: 1; min-height: 0; display: flex; gap: 4px; padding: 0 0 4px; }
.tt-side { width: 210px; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 4px 4px 0 0; }
.tt-side select { width: 100%; font: inherit; }
.tt-list { flex: 1; background: #fff; border: 1px solid #a49d93; }
.tt-list .mp-item.on { background: #e07a1f; color: #fff; }
.tt-list .mp-item:hover:not(.on) { background: #f6e3cf; }
.tt-bar { display: flex; align-items: center; gap: 4px; padding: 3px 6px 5px; border-top: 1px solid #d0c8bf; }
.tt-bar .mp-b { width: 28px; height: 26px; border: 1px solid transparent; border-radius: 3px; background: none; color: #3c3c3c; }
.tt-bar .mp-b:hover { border-color: #b4a99c; background: linear-gradient(#fff, #e6dfd8); }
.tt-seek .mp-seek-track { height: 6px; margin-top: -3px; border-radius: 3px; background: #dcd5cc; border: 1px solid #a49d93; box-sizing: border-box; }
.tt-seek .mp-seek-fill { background: linear-gradient(#f3a25b, #d8661a); }
.tt-seek .mp-seek-knob { width: 22px; height: 13px; margin: -6.5px 0 0 -11px; border-radius: 3px; border: 1px solid #8a8076; background: linear-gradient(#fff, #e1d9d0); }
.mp-totem .mp-time { padding: 0 6px; }

/* phones and narrow windows */
@container (max-width: 520px) {
  .w11-pane, .w11-now, .tt-side { display: none; }
  .mce-cluster .mce-vol, .mp-wmp6 .mp-vol { display: none; }
}
.mp-root { container-type: inline-size; }

/* era accent on native range inputs */
.mp-wmp6 .mp-vol { accent-color: #000080; } .mp-mce .mp-vol { accent-color: #6cc0ff; } .mp-wmp11 .mp-vol, .mp-wmp12 .mp-vol { accent-color: #3a8ee6; }
.mp-qtx .mp-vol { accent-color: #d8d8d8; } .mp-totem .mp-vol { accent-color: #e07a1f; }
.mp-error-box button { color: #111; background: linear-gradient(#fafafa, #dcdcdc); border: 1px solid #777; border-radius: 3px; padding: 4px 14px; cursor: pointer; font: 12px system-ui, sans-serif; }
.mp-error-box button:hover { background: linear-gradient(#fff, #e8e8e8); }